/* ==========================================================================
   Post page. Layout, type and reading chrome follow arriqaaq.github.io
   (article header, contents box, 680px reading column, light section pill).

   Two things are carried over unchanged from the original blog stylesheet:
   - the figure "island" (.fig): widgets and diagrams keep their own look, so the
     legacy element rules they were written against are reproduced under .fig;
   - the construction-crew heading characters and the reading-road truck.
   ========================================================================== */

/* Legacy colours, used only by the carried-over rules below. */
:root {
	--fg: #1a1a1a;
	--alt: #f8f8f5;
	--muted: #5f6152;
	--rule: #e0ded3;
	--rule-strong: #b9b6a3;
	--safety: #ffd43b;
	--safety-dark: #b98500;
	--olive: #1769aa;
	--code: rgba(26, 26, 26, 0.05);
}

/* ---- Article header (centred, from the target's ArticleHeader) ------------ */

header.post {
	display: grid;
	justify-items: center;
	gap: var(--s-4);
	max-width: calc(var(--measure) + 2 * var(--gutter));
	margin-inline: auto;
	padding: var(--s-7) var(--gutter) var(--s-5);
	text-align: center;
}

header.post .eyebrow {
	margin: 0;
}

header.post h1 {
	max-width: 20ch;
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.dek {
	max-width: 36rem;
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
	letter-spacing: var(--ls-body);
	color: var(--ink-2);
	text-wrap: pretty;
}

.byline-row {
	display: grid;
	justify-items: center;
	gap: var(--s-3);
	width: 100%;
	margin-top: var(--s-3);
	padding-top: var(--s-4);
	border-top: 1px solid var(--line);
}

.byline {
	max-width: 52ch;
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--ink-3);
	text-wrap: pretty;
}

/* AI-disclosure badge. Solid dot = written by hand, hatched dot = AI-assisted. */
.prov {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	padding: 4px 12px;
	border-radius: var(--r-pill);
	background: var(--page);
	box-shadow: inset 0 0 0 1px var(--line-strong);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ink-2);
	white-space: nowrap;
}

.prov::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--subject, var(--pink));
}

.prov[data-p='hand']::before {
	background: var(--subject, var(--pink));
}

.prov[data-p='assisted']::before {
	background: repeating-linear-gradient(135deg, var(--subject, var(--pink)) 0 2px, transparent 2px 4px);
}

/* ---- Contents box --------------------------------------------------------- */

.toc {
	max-width: var(--measure);
	margin: var(--s-2) auto var(--s-4);
	padding: var(--s-4) var(--s-5) var(--s-3);
	border-radius: var(--r);
	background: var(--surface);
}

.toc h2 {
	margin: 0 0 var(--s-3);
	padding: 0;
	border: 0;
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--subject-ink, var(--pink-ink));
}

.toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.toc li {
	display: grid;
	grid-template-columns: 2.1em 1fr;
	align-items: baseline;
	margin: 0;
	padding-block: 5px;
	font-size: 0.9375rem;
	line-height: 1.4;
	letter-spacing: 0;
}

.toc .toc-n {
	font: 600 0.75rem var(--font-sans);
	font-variant-numeric: tabular-nums;
	color: var(--subject-ink, var(--pink-ink));
}

.toc a {
	color: var(--ink);
	text-decoration: none;
	border-radius: 3px;
	transition: background var(--dur-fast) ease;
}

.toc a:hover {
	background: var(--page);
}

.toc li.is-current a {
	font-weight: 600;
}

.toc.is-collapsed li.is-extra {
	display: none;
}

.toc .more {
	margin-top: var(--s-2);
	min-height: var(--tap);
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

@media (min-width: 900px) {
	.toc ol {
		columns: 2;
		column-gap: var(--s-6);
	}

	.toc li {
		break-inside: avoid;
	}

	.toc.is-collapsed li.is-extra {
		display: grid;
	}

	.toc .more {
		display: none;
	}
}

/* ---- Reading route card (in flow; the header shows the current section) --- */

.reader-proto {
	max-width: var(--measure);
	margin: 0 auto var(--s-6);
	padding: var(--s-3) var(--s-5) var(--s-4);
	border-radius: var(--r);
	background: var(--page);
	box-shadow: inset 0 0 0 1px var(--line);
}

.rp-top {
	display: flex;
	align-items: baseline;
	gap: var(--s-3);
}

.rp-kicker {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--subject-ink, var(--pink-ink));
}

.rp-current {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fs-small);
	font-weight: 500;
}

.rp-count {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--ink-3);
}

.rp-track {
	display: flex;
	gap: 3px;
	margin-top: var(--s-3);
}

.rp-dot {
	flex: 1;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: rgba(13, 12, 19, 0.1);
	cursor: pointer;
	transition: background var(--dur) ease;
}

.rp-dot.done {
	background: var(--ink);
}

.rp-dot.active {
	background: var(--subject, var(--pink));
}

.rp-actions {
	display: none;
}

/* ---- Floating section pill (previous / next section) ---------------------- */

.prototype-switcher {
	position: fixed;
	left: 50%;
	bottom: calc(14px + env(safe-area-inset-bottom));
	z-index: 40;
	display: flex;
	align-items: center;
	gap: var(--s-3);
	width: min(420px, calc(100vw - 2 * var(--gutter)));
	padding: 6px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow:
		inset 0 0 0 1px var(--line),
		0 12px 32px -12px rgba(13, 12, 19, 0.25);
	color: var(--ink);
	transform: translate(-50%, 0);
	transition:
		transform var(--dur-slow) var(--ease-out),
		opacity var(--dur) ease;
}

/* Step aside while a widget sits behind the pill, so its controls stay tappable. */
.prototype-switcher.is-away {
	transform: translate(-50%, calc(100% + 32px));
	opacity: 0;
	pointer-events: none;
}

.prototype-switcher span {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	font-size: var(--fs-small);
	font-weight: 500;
}

.prototype-switcher button {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--subject, var(--pink));
	color: var(--subject-on, var(--ink));
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: transform var(--dur) var(--ease-out);
}

.prototype-switcher button:hover {
	transform: scale(1.06);
}

/* ---- Reading road: progress along the bottom edge of the header ------------ */

.read-road {
	--read: 0;
	--wheel: 0deg;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -9px;
	height: 18px;
	pointer-events: none;
	overflow: hidden;
}

.read-road::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 8px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px);
	opacity: 0.7;
}

.read-road::after {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: calc(var(--read) * 100%);
	height: 2px;
	border-radius: 2px;
	background: var(--gradient-brand);
}

.read-truck {
	position: absolute;
	left: clamp(0px, calc(var(--read) * (100% - 42px)), calc(100% - 42px));
	top: 0;
	width: 42px;
	height: 18px;
	transition: left 0.09s linear;
}

.read-truck .wheel {
	transform-box: fill-box;
	transform-origin: center;
	transform: rotate(var(--wheel));
}

/* ---- Reading column -------------------------------------------------------- */

.wrap.article-wrap {
	max-width: calc(960px + 2 * var(--gutter));
	padding-bottom: 0;
}

article {
	counter-reset: sec;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	overflow-wrap: break-word;
}

article .sec {
	scroll-margin-top: calc(var(--topbar-h) + 24px);
}

/* Prose keeps a 680px reading measure, centred. Figures (.fig) span the wider wrap. */
.sec > :not(.fig) {
	max-width: var(--measure);
	margin-left: auto;
	margin-right: auto;
}

.sec > p,
.sec > ul,
.sec > ol,
.sec > pre,
.sec > blockquote {
	margin-top: 0;
	margin-bottom: 1.35em;
}

.sec > p {
	text-wrap: pretty;
}

/* Section headings: a numbered index on a short rule above, then the crew character
   and the title. The number is a CSS counter, so no markup changes. */
article h2 {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) 0.72rem;
	margin-top: 3.4em;
	margin-bottom: 0.8em;
	font-size: clamp(1.5rem, 1.32rem + 0.9vw, 1.875rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.025em;
	text-wrap: balance;
	counter-increment: sec;
}

article h2::before {
	content: counter(sec, decimal-leading-zero);
	flex: 0 0 100%;
	padding-top: 0.7rem;
	background: linear-gradient(var(--subject, var(--pink)), var(--subject, var(--pink))) top left / 2.2rem 2px no-repeat;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: var(--subject-ink, var(--pink-ink));
}

.sec:first-of-type + .sec h2 {
	margin-top: 1.6em;
}

article h3 {
	display: flex;
	align-items: center;
	gap: 0.72rem;
	margin-top: 2.2em;
	margin-bottom: 0.7em;
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: var(--lh-heading);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.sec > h4 {
	margin-top: 2em;
	margin-bottom: 0.6em;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--subject-ink, var(--ink-2));
}

.sec > :not(.fig) strong {
	font-weight: 600;
}

.sec > :not(.fig) a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--subject, var(--pink));
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--dur-fast) ease;
}

.sec > :not(.fig) a:hover {
	text-decoration-color: var(--ink);
	text-decoration-thickness: 2px;
}

.sec > :not(.fig) code {
	padding: 0.1em 0.36em;
	border-radius: var(--r-xs);
	background: var(--surface);
	font-family: var(--font-mono);
	font-size: 0.86em;
	letter-spacing: 0;
}

.sec > ul,
.sec > ol {
	padding-left: 1.35em;
}

.sec > ul li,
.sec > ol li {
	margin: 0;
}

.sec > ul li + li,
.sec > ol li + li {
	margin-top: 0.45em;
}

.sec > ul li::marker,
.sec > ol li::marker {
	color: var(--subject-ink, var(--ink-3));
	font-weight: 500;
}

.sec > blockquote {
	margin-top: 2em;
	margin-bottom: 2em;
	padding: 0.15rem 0 0.15rem 1.25rem;
	border-left: 4px solid var(--subject, var(--pink));
	background: none;
	border-radius: 0;
	color: var(--ink);
}

.sec > blockquote > :last-child {
	margin-bottom: 0;
}

.sec > :not(.fig) hr,
.sec > hr {
	height: 18px;
	margin-block: 2.6em;
	border: 0;
	background: var(--subject, var(--pink));
	-webkit-mask: var(--flowers) center / 84px 18px no-repeat;
	mask: var(--flowers) center / 84px 18px no-repeat;
}

/* Code blocks: soft surface, no accent bar. Tokens use the brand palette. */
.sec > pre {
	padding: var(--s-4) var(--s-5);
	border-radius: var(--r);
	background: var(--surface);
	overflow-x: auto;
	font-size: 0.85rem;
	line-height: 1.6;
	letter-spacing: 0;
}

.sec > pre code {
	padding: 0;
	background: none;
	font-size: 1em;
}

.sec > pre .hljs-comment,
.sec > pre .hljs-quote {
	color: var(--ink-3);
	font-style: italic;
}

.sec > pre .hljs-keyword,
.sec > pre .hljs-literal,
.sec > pre .hljs-selector-tag {
	color: var(--purple-ink);
}

.sec > pre .hljs-string,
.sec > pre .hljs-attr,
.sec > pre .hljs-symbol,
.sec > pre .hljs-addition {
	color: var(--green-ink);
}

.sec > pre .hljs-number,
.sec > pre .hljs-bullet {
	color: var(--pink-ink);
}

.sec > pre .hljs-title,
.sec > pre .hljs-type,
.sec > pre .hljs-built_in,
.sec > pre .hljs-builtin-name,
.sec > pre .hljs-section,
.sec > pre .hljs-name {
	color: var(--blue-ink);
}

.sec > pre .hljs-meta {
	color: var(--ink-2);
}

.sec > pre .hljs-deletion {
	color: var(--pink-ink);
}

:root {
	--flowers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 18'%3E%3Cg transform='translate(9 9)'%3E%3Ccircle cx='0' cy='-3.8' r='3.2'/%3E%3Ccircle cx='3.6' cy='-1.2' r='3.2'/%3E%3Ccircle cx='2.2' cy='3.1' r='3.2'/%3E%3Ccircle cx='-2.2' cy='3.1' r='3.2'/%3E%3Ccircle cx='-3.6' cy='-1.2' r='3.2'/%3E%3C/g%3E%3Cg transform='translate(42 9)'%3E%3Ccircle cx='0' cy='-3.8' r='3.2'/%3E%3Ccircle cx='3.6' cy='-1.2' r='3.2'/%3E%3Ccircle cx='2.2' cy='3.1' r='3.2'/%3E%3Ccircle cx='-2.2' cy='3.1' r='3.2'/%3E%3Ccircle cx='-3.6' cy='-1.2' r='3.2'/%3E%3C/g%3E%3Cg transform='translate(75 9)'%3E%3Ccircle cx='0' cy='-3.8' r='3.2'/%3E%3Ccircle cx='3.6' cy='-1.2' r='3.2'/%3E%3Ccircle cx='2.2' cy='3.1' r='3.2'/%3E%3Ccircle cx='-2.2' cy='3.1' r='3.2'/%3E%3Ccircle cx='-3.6' cy='-1.2' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   Carried over unchanged: the construction-crew heading characters.
   ========================================================================== */

.heading-role {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--fg);
	border-radius: 12px;
	background: var(--alt);
	box-shadow: 3px 3px 0 var(--safety);
	transform: rotate(-2deg);
}

.heading-role svg {
	display: block;
	width: 38px;
	height: 38px;
}

.heading-role-3 {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	box-shadow: 2px 2px 0 var(--safety);
	transform: rotate(2deg);
}

.heading-role-3 svg {
	width: 29px;
	height: 29px;
}

article h2:hover .heading-role,
article h3:hover .heading-role {
	animation: role-bob 0.48s ease both;
}

@keyframes role-bob {
	50% {
		transform: translateY(-5px) rotate(3deg);
	}
}

/* ==========================================================================
   Carried over unchanged: the figure island. Widgets and diagrams were written
   against the original page-wide element rules, so those rules are repeated
   here under .fig and the new page type does not leak into them.
   ========================================================================== */

.fig {
	width: 100%;
	margin: 2rem auto;
	color: #1a1a1a;
	font-size: 1.07rem;
	line-height: 1.68;
	letter-spacing: normal;
	font-weight: 400;
	text-align: left;
}

.fig p {
	margin: 0 0 1.05rem;
}

.fig strong {
	font-weight: 700;
}

.fig a {
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: var(--safety-dark);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

.fig a:hover {
	background: var(--safety);
	text-decoration-color: transparent;
}

.fig code {
	font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
	font-size: 0.85em;
	background: var(--code);
	padding: 0.1rem 0.34rem;
	border-radius: 5px;
}

.fig pre {
	background: var(--alt);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--safety-dark);
	border-radius: 10px;
	padding: 0.9rem 1.05rem;
	overflow: auto;
	font-size: 0.86rem;
	line-height: 1.55;
}

.fig pre code {
	background: none;
	padding: 0;
	font-size: 1em;
}

.fig ul,
.fig ol {
	margin: 0 0 1.05rem;
	padding-left: 1.3rem;
}

.fig li {
	margin: 0.3rem 0;
}

.fig li::marker {
	color: var(--olive);
}

.fig-dgm,
.fig-cmp {
	border: 2px solid var(--fg);
	border-radius: 14px;
	padding: 1.1rem;
	background: var(--alt);
	box-shadow: 4px 4px 0 var(--safety);
}

.dgm-svg {
	display: block;
	width: 100%;
	height: auto;
}

.fig svg text {
	font-family: 'Inter', ui-monospace, monospace;
}

.fig figcaption {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--muted);
	text-align: center;
	margin-top: 0.6rem;
}

table.cmp {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.85rem;
}

table.cmp th,
table.cmp td {
	border: 1px solid var(--rule);
	padding: 0.45rem 0.6rem;
	text-align: left;
	vertical-align: top;
}

table.cmp th {
	background: var(--alt);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-weight: 600;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--olive);
}

.cmp-wrap {
	overflow-x: auto;
}

.missing {
	color: #dc2626;
	font: 600 0.85rem 'JetBrains Mono', monospace;
	text-align: center;
	padding: 1rem;
	border: 1px dashed #dc2626;
	border-radius: 8px;
}

@media (max-width: 620px) {
	.heading-role {
		width: 42px;
		height: 42px;
	}

	.heading-role svg {
		width: 34px;
		height: 34px;
	}

	.heading-role-3 {
		width: 32px;
		height: 32px;
	}

	.heading-role-3 svg {
		width: 26px;
		height: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.read-truck {
		transition: none;
	}

	.read-truck .wheel {
		transform: none;
	}

	article h2:hover .heading-role,
	article h3:hover .heading-role {
		animation: none;
	}

	.prototype-switcher {
		transition: none;
	}
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--s-1) var(--s-4);
}

.post-meta time {
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--ink-3);
}

/* Widget toolbars: a control group wider than a phone screen wraps instead of pushing the page
   sideways. Only the wrapping is set here; the widgets themselves are unchanged. */
.fig .dstk-tgroup {
	flex-wrap: wrap;
	max-width: 100%;
}

@media (max-width: 640px) {
	.fig .dstk-stats {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
	}
}