@layer reset, base, composition, blocks, utilities;

@layer base {
	:root {
		/* layout */
		--wrapper-max-width: 55ch;

		/* color */
		--color-light: #fdf7f1;
		--color-dark: #3c3c3c;
		--color-surface-default: var(--color-light);
		--color-text-normal: var(--color-dark);
		--color-fill: oklch(from var(--color-text-normal) l c h / 0.9);

		/* font */
		--font-body: "Short Stack", cursive;
		--font-mono:
			ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
			"DejaVu Sans Mono", monospace;
		--leading-normal: 1.6;
		--leading-tight: 1.3;
		--font-weight-bold: 400;

		/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1536,20,1.333,6,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

		--step--3: clamp(0.5277rem, 0.5921rem + -0.0671vw, 0.5787rem);
		--step--2: clamp(0.6944rem, 0.6921rem + 0.0119vw, 0.7035rem);
		--step--1: clamp(0.8333rem, 0.8059rem + 0.1374vw, 0.9377rem);
		--step-0: clamp(1rem, 0.9342rem + 0.3289vw, 1.25rem);
		--step-1: clamp(1.2rem, 1.0773rem + 0.6135vw, 1.6663rem);
		--step-2: clamp(1.44rem, 1.2344rem + 1.0278vw, 2.2211rem);
		--step-3: clamp(1.728rem, 1.4036rem + 1.622vw, 2.9607rem);
		--step-4: clamp(2.0736rem, 1.5807rem + 2.4646vw, 3.9467rem);
		--step-5: clamp(2.4883rem, 1.7587rem + 3.6481vw, 5.2609rem);
		--step-6: clamp(2.986rem, 1.9263rem + 5.2984vw, 7.0128rem);

		/* animation */
		--transition-slow: 200ms;
		--ease-3: cubic-bezier(0.25, 0, 0.3, 1);
		--animation-fade-in: fade-in 0.5s var(--ease-3);

		/* border from DoodleCSS */
		--border-thickness: 3px;
		--border-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120.092%22%20height%3D%2261.348%22%20viewBox%3D%220%200%20112.586%2057.514%22%3E%3Cpath%20d%3D%22M15.474%20996.801c5.573-.108%2011.154-.054%2016.714.091%205.006.097%2012.756.875%2019.148.622%204.28.486%208.603-.311%2012.911.288%206.164-.072%2012.31-1.003%2018.497-.664%205.81.334%2010.052.468%2017.518.331%207.402-.516%2010.784.102%2010.263%207.293-.302%206.127-.167%2011.363-.175%2016.043.035%208.648%201.362%2024.998-.566%2027.614-2.952%203.79-9.954%201.076-14.306%201.16-3.987-.144-9.602%201.103-13.523.042-4.88-.673-8.213.66-13.114.305-4.964%200-9.787-.844-14.57.312-5.884.777-13.383.644-19.2-.51-5.841-.903-9.964-.064-15.84-.128-4.778-.049-15.036%201.758-16.604-.035-1.748-1.85-.385-11.781-.438-15.645-.374-9.227-.536-15.603.13-24.823.085-1.613-1.135-8.421.014-10.21%202.414-3.571%209.257-1.587%2013.14-2.085z%22%20style%3D%22fill%3Anone%3Bstroke%3A%233c3c3c%3Bstroke-width%3A3%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A10%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20transform%3D%22translate(0%20-994.848)%22%2F%3E%3C%2Fsvg%3E%0A")
			5 5 5 5 stretch stretch;

		/* focus */
		--focus-ring-width: var(--border-thickness);
		--focus-ring-offset: calc(var(--border-thickness) - 2px);

		/* shadow from open props */
		--shadow-color: 220 3% 15%;
		--shadow-strength: 1%;
		--shadow-strength-3: calc(var(--shadow-strength) + 2%);
		--shadow-strength-4: calc(var(--shadow-strength) + 3%);
		--shadow-strength-5: calc(var(--shadow-strength) + 4%);
		--shadow-strength-6: calc(var(--shadow-strength) + 5%);
		--shadow-strength-7: calc(var(--shadow-strength) + 6%);
		--shadow-4:
			0 -2px 5px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
			0 1px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
			0 2px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
			0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
			0 9px 9px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
			0 16px 16px -2px hsl(var(--shadow-color) / var(--shadow-strength-7));

		/*font-size: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);*/
	}

	body {
		font-size: var(--step-0);
	}

	main,
	footer {
		--flow-space: 2lh;
	}

	h2 {
		font-size: var(--step-0);
	}

	a {
		color: currentColor;
		text-decoration-thickness: calc(var(--border-thickness) - 2px);
		text-decoration-color: var(--color-fill);
		text-underline-offset: calc(var(--border-thickness) - 1px);
		transition: text-decoration-thickness 50ms;

		&:hover {
			text-decoration-thickness: calc(var(--border-thickness) - 1px);
		}
	}

	svg {
		display: block;
		max-inline-size: 100%;

		flex-shrink: 0;
		inline-size: var(--icon-size, 1em);
		block-size: var(--icon-size, 1em);
		vertical-align: middle;
	}
}

@layer blocks {
	header,
	.diagram > * {
		--flow-space: 0.75lh;
	}

	header {
		/* For firefox */
		@supports not (text-box: trim-both cap alphabetic) {
			--flow-space: 0em;
		}
		container-type: inline-size;

		h1 {
			font-size: var(--step-5);
			text-transform: uppercase;
			letter-spacing: -0.075em;
		}

		p {
			--measure: 35ch;
		}
	}

	@supports (inline-size: calc(sibling-index() * 1em)) {
		@media (prefers-reduced-motion: no-preference) {
			details,
			.connector {
				opacity: 0;
				animation: var(--animation-fade-in) forwards;
				animation-delay: calc((sibling-index() + 1) * 50ms);
			}
		}
	}

	details {
		--details-padding: min(6cqi, 0.5lh);

		container-type: inline-size;
		background-color: var(--color-surface-default);
		box-shadow: var(--shadow-4);
		rotate: var(--rotate);

		&::before {
			content: "";
			position: absolute;
			inset: calc(-1 * var(--border-thickness));
			border-style: solid;
			border-width: 5px;
			border-image: var(--border-image);
			pointer-events: none;
		}

		> * {
			padding: var(--details-padding);
		}

		summary {
			--focus-ring-offset: calc(-2 / 3 * var(--details-padding));

			display: flex;
			align-items: first baseline;
			gap: 0.5ch;

			&::marker {
				content: "";
			}

			&::before {
				content: attr(data-step) / "";
				position: absolute;
				inset-block-start: 0;
				inset-inline-end: 0;
				translate: 0% -50%;
				font-size: var(--step-3);
				-webkit-text-stroke: 0.5em var(--color-surface-default);
				paint-order: stroke;
			}

			svg {
				--icon-size: min(5cqi, 1ex);

				rotate: -90deg;
				translate: 0 -0.125ex;
				transition: rotate var(--transition-slow);

				path {
					stroke: var(--color-fill);
				}
			}
		}

		&[open] summary {
			border-block-end: var(--border-thickness) solid;

			svg {
				rotate: 0deg;
			}
		}

		&::details-content {
			font-family: var(--font-mono);
		}

		ol {
			padding-inline-start: 2em;
		}
	}

	details,
	summary {
		transition: background-color var(--transition-slow);
	}

	details:not([open]):has(summary:hover, summary:focus-visible),
	details[open] summary:hover {
		background-color: oklch(
			from var(--color-surface-default) calc(l - 0.05) c h
		);
	}

	.connector {
		max-inline-size: fit-content;
		position: relative;

		svg {
			--icon-size: 1lh;
			position: absolute;
			inset-block-start: 0%;
			inset-inline-start: calc(100% + 0.5ch);
			scale: 1 -1;

			/* For firefox */
			@supports not (text-box: trim-both cap alphabetic) {
				translate: 0 33%;
			}
		}

		p {
			font-size: var(--step--1);
			text-box: trim-both cap alphabetic;
		}
	}

	footer {
		padding-block-start: 1lh;
		border-block-start: var(--border-thickness) solid;

		> * {
			--flow-space: 1em;
		}

		ul {
			padding-inline-start: 1em;
			font-size: var(--step--1);
		}
	}

	@supports (inline-size: calc(sibling-index() * 1em)) {
		@media (width >= 40rem) {
			details {
				margin-inline-end: calc((13 - sibling-index()) * 1em);
			}
		}
	}

	/*
		FIXME: not (font: -apple-system-body) to exclude safari because chain of three or more anchor-positioned elements doesn't work in Safari yet
	*/
	@supports (anchor-name: --card) and (not (font: -apple-system-body)) {
		@media (width >= 64rem) and (orientation: landscape) {
			:root {
				--wrapper-max-width: 1536px; /* 96rem */
			}

			body {
				place-content: center;
			}

			.page-inner {
				display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: 1fr;
				align-items: center;

				> * {
					grid-column: 1/-1;
					grid-row: 1/-1;
				}

				> *:not(:first-child) {
					--flow-space: 0;
				}
			}

			header,
			footer {
				z-index: 1;
			}

			header {
				container-type: unset;
				max-inline-size: fit-content;
				justify-self: end;
				align-self: start;
				text-align: end;

				p {
					margin-inline-start: auto;
				}
			}

			main {
				position: relative;
			}

			footer {
				padding-block-start: unset;
				border-block-start: none;

				max-inline-size: fit-content;
				align-self: end;
			}

			.diagram {
				--card-aspect-ratio: 0.66; /* at 1024px the card needs this ratio */
				--card-vertical-offset: 4.5rem;
				--card-horizontal-offset: 1rem;
				--card-width: calc(
					(100cqi / 7) - (var(--card-horizontal-offset) * 6 / 7)
				);
				--card-height: calc(var(--card-width) / var(--card-aspect-ratio));

				block-size: calc(
					var(--card-height) + (6 * var(--card-vertical-offset)) - 0.5lh
				);
				container-type: inline-size;
				translate: -0.25lh 0;

				> * {
					--flow-space: 0;
				}
			}

			details {
				margin-inline-end: unset;
				anchor-name: --card;
				position: absolute;
				position-anchor: --card;
				inset-block-start: calc(anchor(top) + var(--card-vertical-offset));
				inset-inline-start: calc(anchor(end) + var(--card-horizontal-offset));

				inline-size: var(--card-width);
				aspect-ratio: var(--card-aspect-ratio);

				&::details-content {
					position: relative;
					font-size: 7.75cqi;
					z-index: 1;
				}

				li + li {
					border-block-start: 1px dashed
						oklch(from var(--color-surface-default) calc(l - 0.125) c h);
				}
			}

			summary {
				h2 {
					font-size: 10cqi;
				}

				&::after {
					content: "";
					position: absolute;
					inset: 0;
				}
			}

			.connector {
				max-inline-size: unset;
				display: flex;
				justify-content: end;
				position: absolute;
				position-anchor: --card;
				inset-block-start: anchor(end);
				inset-inline-start: anchor(start);
				inset-inline-end: anchor(end);
				block-size: calc(0.75 * var(--card-vertical-offset));
				container-type: inline-size;

				svg {
					--icon-size: calc(0.75 * var(--card-vertical-offset));

					inset-inline-start: unset;
					scale: unset;
					translate: unset;

					position: absolute;
					inset-block-start: 0;
					inset-inline-end: 0;

					fill: var(--color-fill);
					rotate: 90deg;
					translate: 6cqi 2cqi;
				}

				p {
					--measure: 13ch;
					text-box: unset;

					align-self: center;
					background-color: var(--color-surface-default);
					font-size: 7cqi;
					line-height: var(--leading-tight);
					text-align: center;
					z-index: 1;
				}
			}

			@supports (inline-size: calc(sibling-index() * 1em)) {
				@media (prefers-reduced-motion: no-preference) {
					details {
						opacity: unset;
						inset-block-start: 0%;
						inset-inline-start: 0%;
						z-index: calc(100 - sibling-index());
						animation: expand-cards 400ms var(--ease-3) forwards;
					}

					.connector {
						opacity: 0;
						animation: var(--animation-fade-in) forwards;
						animation-delay: calc(((sibling-index() + 1) * 50ms) + 50ms);
					}
				}
			}
		}
	}

	@media (width >= 100rem) and (height >= 60rem) {
		.page-inner {
			border-style: solid;
			border-width: 5px;
			border-image: var(--border-image);
		}
	}

	@keyframes fade-in {
		to {
			opacity: 1;
		}
	}

	/* inspired from ebay playbook */
	@keyframes expand-cards {
		to {
			inset-block-start: calc(anchor(top) + var(--card-vertical-offset));
			inset-inline-start: calc(anchor(end) + var(--card-horizontal-offset));
			rotate: var(--rotate);
		}
	}
}

@layer reset {
	/* Browser Consistency */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	:not(dialog) {
		margin: 0;
	}

	/* Enable animations & transitions between a
   length/percentage & an intrinsic size value */
	:root {
		@media (prefers-reduced-motion: no-preference) {
			interpolate-size: allow-keywords;
		}
	}

	html {
		block-size: 100%;
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		scroll-behavior: smooth;
		scrollbar-gutter: stable;
	}

	/* Body Styles */
	body {
		min-height: 100%;
		background: var(--color-surface-default, canvas);
		color: var(--color-text-normal, canvasText);
		font-size: 1rem;
		font-family: var(--font-body, system-ui, sans-serif);
		line-height: var(--leading-normal, 1.5);
		hanging-punctuation: first last;
		-webkit-font-smoothing: antialiased;
		overflow-wrap: break-word;
	}

	/* Typography */
	h1,
	h2 {
		font-weight: var(--font-weight-bold, bold);
		line-height: var(--leading-tight, 1.1);
		text-wrap: balance;
		text-box: trim-both cap alphabetic;
	}

	h1 {
		line-height: var(--leading-none, 1.1);
	}

	h2 {
		line-height: var(--leading-tight, 1.3);
	}

	p,
	li {
		max-inline-size: var(--measure, 70ch);
		text-wrap: pretty;
	}

	/* Lists */
	ol[role="list"],
	ul[role="list"] {
		padding-inline-start: 0; /* Browsers default padding-inline-start: 40px */
		list-style: none;
	}

	/* Cursor, touch action, tap highlight color */
	a[href],
	summary {
		cursor: pointer;
	}

	a[href],
	summary {
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	/* Code */
	code {
		font-family: var(--font-mono, ui-monospace, monospace);
		background: color-mix(in srgb, currentColor 10%, transparent);
		padding-inline: 0.125em;
		hyphens: none;
		tab-size: 2;
		text-align: start;
		word-spacing: normal;
		word-break: normal;
		word-wrap: normal;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
	}

	/* Details & Summary */
	details::details-content {
		block-size: 0;
		opacity: 0;
		overflow-y: clip;
		transition:
			content-visibility var(--transition-slow, 200ms) allow-discrete,
			margin-block-start var(--transition-slow, 200ms),
			block-size var(--transition-slow, 200ms),
			opacity var(--transition-slow, 200ms);
	}

	details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}

	/* Interaction (Focus, Selection & Target) */
	:focus-visible {
		outline-width: var(--focus-ring-width, 2px);
		outline-style: var(--focus-ring-style, auto);
		outline-color: var(--focus-ring-color, currentColor);
		outline-offset: var(--focus-ring-offset, 4px);
	}

	/* Accessibility / Utilities */
	[hidden] {
		display: none !important;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		:after,
		:before {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

@layer composition {
	.region {
		padding-block: var(--region-space, 1lh);
	}

	.flow > * + * {
		margin-block-start: var(--flow-space, 1lh);
	}
}

@layer utilities {
	.wrapper {
		margin-inline: auto;
		max-inline-size: var(--wrapper-max-width, 1360px);
		padding-inline: var(--wrapper-padding-inline, 1lh);
	}

	.visually-hidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 0;
		margin: 0;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		white-space: nowrap;
	}

	.text-balance {
		text-wrap: balance;
	}
}