/* ==========================================================================
   TERMINAL & TRACE
   The site as a wiring schematic: a bus across the top, nets branching down,
   every article a numbered sheet in the drawing set.
   ========================================================================== */

/* --- Faces -------------------------------------------------------------- */

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-latin.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Public Sans';
	src: url('../fonts/publicsans-latin.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/jetbrainsmono-latin.woff2') format('woff2-variations');
	font-weight: 100 800;
	font-display: swap;
	font-style: normal;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
	/* Drawing surface: the dark canvas of a CAD viewport, not a glossy black. */
	--sheet: #0F1216;
	--sheet-2: #141920;
	--sheet-3: #1B222C;

	/* Ink: linework and lettering, tinted from the surface hue. */
	--ink: #E9EDF3;
	--ink-prose: #DBE2EB; /* long-form body: a step below full ink, 14.4:1 */
	--ink-2: #A2ADBC;
	--ink-3: #7E8A9B;

	--rule: rgba(162, 173, 188, 0.17);
	--rule-2: rgba(180, 196, 216, 0.33);
	--rule-3: rgba(200, 214, 232, 0.62);

	/* Wire colour code — low-voltage convention, used as semantics. */
	--w-r: #E04A32; /* 24V hot     — security, HVAC        */
	--w-y: #F0B429; /* cool call   — lighting, appliances  */
	--w-g: #4FB07E; /* fan         — sensors, cameras      */
	--w-c: #5B9BE0; /* common      — networking, hubs      */
	--w-w: #DCE3EC; /* aux         — voice, quick start    */

	--wire: var(--w-w);

	/* Spacing: one rhythm, 4px module. */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4.5rem;
	--s-9: 7rem;

	--sheet-w: 1360px;
	--measure: 68ch;

	--font-display: 'Archivo', 'Archivo Expanded', system-ui, sans-serif;
	--font-body: 'Public Sans', system-ui, -apple-system, sans-serif;
	--font-data: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 520ms;
}

[data-wire='r'] { --wire: var(--w-r); }
[data-wire='y'] { --wire: var(--w-y); }
[data-wire='g'] { --wire: var(--w-g); }
[data-wire='c'] { --wire: var(--w-c); }
[data-wire='w'] { --wire: var(--w-w); }

/* --- Base --------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body.shs {
	margin: 0;
	background-color: var(--sheet);
	/* The drawing grid: a 24px module, the same one the layout aligns to. */
	background-image:
		linear-gradient(to right, rgba(162, 173, 188, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(162, 173, 188, 0.045) 1px, transparent 1px);
	background-size: 24px 24px;
	background-position: center top;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wire);
	outline-offset: 3px;
	border-radius: 1px;
}

.shs-skip {
	position: absolute;
	left: var(--s-4);
	top: -100px;
	z-index: 999;
	background: var(--sheet-3);
	border: 1px solid var(--rule-3);
	color: var(--ink);
	padding: var(--s-3) var(--s-4);
	font: 600 0.8125rem/1 var(--font-data);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: top 180ms var(--ease);
}
.shs-skip:focus { top: var(--s-4); }

.shs-wrap {
	width: 100%;
	max-width: var(--sheet-w);
	margin-inline: auto;
	padding-inline: var(--s-5);
}

@media (max-width: 640px) {
	.shs-wrap { padding-inline: var(--s-4); }
}

/* --- Drawing lettering -------------------------------------------------- */

.shs-label {
	font-family: var(--font-data);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
	line-height: 1;
}

.shs-designator {
	font-family: var(--font-data);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wire);
	line-height: 1;
	white-space: nowrap;
}

/* Terminal chip: the net's label as it appears on a real terminal block. */
.shs-terminal {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 0.3125rem var(--s-3) 0.3125rem var(--s-2);
	border: 1px solid var(--rule-2);
	background: var(--sheet-2);
	font-family: var(--font-data);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
	text-decoration: none;
	line-height: 1;
	transition: border-color 200ms var(--ease), color 200ms var(--ease);
}

.shs-terminal::before {
	content: '';
	width: 9px;
	height: 9px;
	flex: none;
	background: var(--wire);
	/* The screw-terminal square, not a dot. */
	box-shadow: inset 0 0 0 1px rgba(15, 18, 22, 0.55);
}

a.shs-terminal:hover,
a.shs-terminal:focus-visible {
	border-color: var(--wire);
	color: var(--ink);
}

/* ==========================================================================
   BUS — the header
   ========================================================================== */

.shs-bus {
	position: relative;
	z-index: 40;
	background: linear-gradient(to bottom, rgba(15, 18, 22, 0.97), rgba(15, 18, 22, 0.86));
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--rule);
}

.shs-bus__inner {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	min-height: 76px;
	position: relative;
}

/* The energised bus bar running the full width under the header. */
.shs-bus::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(to right, var(--w-r) 0%, var(--w-y) 25%, var(--w-g) 50%, var(--w-c) 75%, var(--w-w) 100%);
	opacity: 0.5;
	transform-origin: left center;
}

.shs-mark {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	text-decoration: none;
	flex: none;
}

.shs-mark__glyph {
	width: 30px;
	height: 30px;
	flex: none;
	color: var(--ink);
}

.shs-mark__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.shs-mark__name {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	font-stretch: 108%;
	letter-spacing: -0.005em;
	line-height: 1;
	color: var(--ink);
}

.shs-mark__sub {
	font-family: var(--font-data);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-3);
	line-height: 1;
}

.shs-bus__nav {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-left: auto;
	height: 76px;
	/* The bus must never be the thing that widens the page: if a future
	   category pushes it past the space available it gives up its own width
	   rather than overflowing the header. */
	min-width: 0;
}

/* Each nav item is a terminal dropping off the bus. */
.shs-bus__term {
	position: relative;
	display: flex;
	/* center, not baseline. The terminal is stretched to the bus's full 76px by
	   .shs-bus__nav, and baseline alignment inside a stretched flex item parks
	   its content at the top — which lifted the whole nav out of line with the
	   wordmark. */
	align-items: center;
	gap: 0.45em;
	padding: 0 var(--s-3);
	font-family: var(--font-data);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
	text-decoration: none;
	white-space: nowrap;
	transition: color 200ms var(--ease);
}

/* The three-letter net code and its plain-language label sit side by side:
   the code keeps the drawing-set language, the label is what a visitor
   arriving from a search actually understands (audit 2026-08-07, D3). */
.shs-bus__code {
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	opacity: 0.55;
}

.shs-bus__label {
	letter-spacing: 0.04em;
	text-transform: none;
	font-size: 0.8rem;
}

/* Below this the labels no longer fit beside the wordmark on one line, and an
   overflowing bus pushes itself out of the header entirely. The code alone is
   the graceful degradation — it is still what every sheet header shows —
   rather than wrapping the bus onto two rows. */
@media (max-width: 1180px) {
	.shs-bus__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.shs-bus__code {
		opacity: 1;
		font-size: 0.75rem;
	}
}

/* Inside the mobile drawer there is a full row per net, so the label leads
   and the code trails as a quiet designator. */
@media (max-width: 1080px) {
	.shs-bus__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}
	.shs-bus__term {
		flex-direction: row-reverse;
		justify-content: flex-end;
		gap: 0.7em;
	}
	.shs-bus__code {
		opacity: 0.5;
		min-width: 2.6em;
	}
}

.shs-bus__term::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 14px;
	background: var(--wire);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform 260ms var(--ease);
}

.shs-bus__term:hover,
.shs-bus__term:focus-visible,
.shs-bus__term[aria-current] { color: var(--ink); }

.shs-bus__term:hover::after,
.shs-bus__term:focus-visible::after,
.shs-bus__term[aria-current]::after { transform: scaleY(1); }

.shs-bus__toggle {
	display: none;
	margin-left: auto;
	align-items: center;
	gap: var(--s-2);
	background: none;
	border: 1px solid var(--rule-2);
	color: var(--ink-2);
	padding: var(--s-2) var(--s-3);
	font: 600 0.6875rem/1 var(--font-data);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 44px;
}

.shs-bus__toggle svg { width: 16px; height: 16px; }

/* Ten terminals on a 1100px bus need the tighter gap to stay on one line. */
@media (max-width: 1200px) {
	.shs-bus__term { padding: 0 var(--s-3); }
}

/* The bus carries one terminal per net, and the site runs up to ten of them.
   The drawer therefore takes over at 1080px rather than 900px: below that the
   terminal row and the mark stop fitting on one line. */
@media (max-width: 1080px) {
	.shs-bus__toggle { display: inline-flex; }
	.shs-bus__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: auto;
		flex-direction: column;
		background: var(--sheet-2);
		border-bottom: 1px solid var(--rule-2);
		padding: var(--s-2) 0 var(--s-4);
		display: none;
	}
	.shs-bus__nav[data-open='true'] { display: flex; }
	.shs-bus__term {
		padding: var(--s-4) var(--s-5);
		min-height: 48px;
		border-bottom: 1px solid var(--rule);
	}
	.shs-bus__term::after {
		left: 0;
		top: 0;
		bottom: auto;
		width: 2px;
		height: 100%;
		transform-origin: top left;
	}
}

/* ==========================================================================
   PROBE — search, the symptom entry point
   ========================================================================== */

.shs-probe { display: block; }

.shs-probe__label {
	display: block;
	font-family: var(--font-data);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s-3);
}

.shs-probe__body {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--rule-2);
	background: rgba(20, 25, 32, 0.72);
	transition: border-color 220ms var(--ease);
}

.shs-probe__body:focus-within { border-color: var(--w-y); }

.shs-probe__icon {
	width: 20px;
	height: 20px;
	flex: none;
	align-self: center;
	margin-left: var(--s-4);
	fill: none;
	stroke: var(--ink-3);
	stroke-width: 1.4;
	stroke-linecap: square;
}

.shs-probe__body:focus-within .shs-probe__icon { stroke: var(--w-y); }

.shs-probe__input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	padding: var(--s-4);
	min-height: 52px;
}

.shs-probe__input::placeholder { color: var(--ink-3); }
.shs-probe__input:focus { outline: none; }

.shs-probe__go {
	flex: none;
	background: var(--sheet-3);
	border: 0;
	border-left: 1px solid var(--rule-2);
	color: var(--ink);
	font-family: var(--font-data);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding-inline: var(--s-5);
	min-height: 52px;
	cursor: pointer;
	transition: background 200ms var(--ease), color 200ms var(--ease);
}

.shs-probe__go:hover { background: var(--w-y); color: #12161B; }

/* ==========================================================================
   LEAD SHEET — the first viewport
   ========================================================================== */

.shs-lead {
	position: relative;
	padding-block: var(--s-8) var(--s-7);
}

.shs-lead__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--s-8);
	align-items: start;
}

.shs-lead__head {
	display: flex;
	align-items: baseline;
	gap: var(--s-4);
	margin-bottom: var(--s-5);
}

.shs-lead__rule {
	flex: 1;
	height: 1px;
	background: var(--rule-2);
	position: relative;
	top: -4px;
}

.shs-h1 {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	/* The floor is set by the longest word ("troubleshooting,") fitting a
	   360px viewport; anything larger widens the grid track instead of wrapping. */
	font-size: clamp(1.95rem, 5.4vw, 4.35rem);
	line-height: 0.98;
	letter-spacing: -0.028em;
	text-wrap: balance;
	overflow-wrap: break-word;
	margin: 0 0 var(--s-5);
	color: var(--ink);
}

.shs-h1 em {
	font-style: normal;
	color: var(--w-y);
}

.shs-lead__deck {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 52ch;
	margin: 0 0 var(--s-6);
}

.shs-lead__probe { max-width: 560px; }

.shs-lead__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-6);
	margin-top: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--rule);
}

.shs-stat { display: flex; flex-direction: column; gap: var(--s-2); }

.shs-stat__v {
	font-family: var(--font-data);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* --- The lead article, hung off the bus as a component ------------------- */

.shs-lead__sheet {
	position: relative;
	border: 1px solid var(--rule-2);
	background: rgba(20, 25, 32, 0.6);
	text-decoration: none;
	display: block;
	transition: border-color 300ms var(--ease);
}

.shs-lead__sheet:hover { border-color: var(--wire); }

/* Corner ticks — the registration marks of a drawing frame. */
.shs-frame::before,
.shs-frame::after {
	content: '';
	position: absolute;
	width: 13px;
	height: 13px;
	border: 1px solid var(--rule-3);
	pointer-events: none;
}
.shs-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.shs-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.shs-lead__img {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--sheet-2);
	border-bottom: 1px solid var(--rule-2);
}

/* Cross-hatched drawing void, visible when a sheet has no plate or the file
   is missing, so a broken image never collapses the frame. */
.shs-lead__img::before,
.shs-plate::before,
.shs-preview__stage::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		45deg,
		transparent 0 9px,
		rgba(162, 173, 188, 0.07) 9px 10px
	);
	pointer-events: none;
}

.shs-lead__img::after,
.shs-plate::after {
	content: 'PLATE NOT ISSUED';
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	font-family: var(--font-data);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	color: var(--ink-3);
	pointer-events: none;
	z-index: 0;
}

/* The image sits above the void, so a loaded plate hides it entirely. */
.shs-lead__img img,
.shs-plate img { position: relative; z-index: 1; }

.shs-plate {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--sheet-2);
}

.shs-lead__img img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.82) contrast(1.06);
	transition: transform 700ms var(--ease), filter 700ms var(--ease);
	/* A missing file must not push its alt text through the layout: the text is
	   hidden visually (assistive tech still reads the attribute) and the
	   cross-hatched void behind it stands in as the unissued plate. */
	font-size: 0;
	color: transparent;
}

.shs-lead__sheet:hover .shs-lead__img img {
	transform: scale(1.025);
	filter: saturate(1) contrast(1.06);
}

.shs-lead__tag {
	position: absolute;
	top: var(--s-3);
	left: var(--s-3);
	display: flex;
	align-items: center;
	gap: var(--s-2);
	background: rgba(15, 18, 22, 0.88);
	border: 1px solid var(--rule-2);
	padding: var(--s-2) var(--s-3);
	font-family: var(--font-data);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wire);
}

.shs-lead__body { padding: var(--s-5); }

.shs-lead__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-stretch: 104%;
	font-size: clamp(1.35rem, 2.1vw, 1.75rem);
	line-height: 1.16;
	letter-spacing: -0.018em;
	margin: 0 0 var(--s-3);
	color: var(--ink);
	text-wrap: balance;
}

.shs-lead__excerpt {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 var(--s-4);
}

.shs-lead__meta {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding-top: var(--s-3);
	border-top: 1px solid var(--rule);
	font-family: var(--font-data);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}

@media (max-width: 1000px) {
	/* minmax(0,…) so a long display word can never widen the track. */
	.shs-lead__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
	.shs-lead { padding-block: var(--s-7) var(--s-6); }
}

/* ==========================================================================
   NET DIRECTORY — categories as branch nets
   ========================================================================== */

.shs-nets { padding-block: var(--s-7); }

.shs-section-head {
	display: flex;
	align-items: baseline;
	gap: var(--s-4);
	margin-bottom: var(--s-6);
}

.shs-section-head h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-stretch: 106%;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	letter-spacing: -0.022em;
	line-height: 1.1;
	margin: 0;
	color: var(--ink);
}

.shs-section-head .shs-lead__rule { top: -6px; }

.shs-nets__list {
	display: grid;
	/* auto-fit, not auto-fill: the terminal strip must reach the sheet's right
	   datum instead of leaving a phantom empty column. */
	grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
	gap: 0;
	border-top: 1px solid var(--rule-2);
	border-left: 1px solid var(--rule-2);
}

/* Branch net: a drop line from the bus with its terminal and sheet count. */
.shs-net {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-5) var(--s-4) var(--s-5) var(--s-5);
	border-right: 1px solid var(--rule-2);
	border-bottom: 1px solid var(--rule-2);
	text-decoration: none;
	overflow: hidden;
	transition: background 260ms var(--ease);
}

.shs-net::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--wire);
	opacity: 0.34;
	transform: scaleX(0.5);
	transform-origin: left center;
	transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

.shs-net:hover,
.shs-net:focus-visible { background: rgba(27, 34, 44, 0.6); }
.shs-net:hover::before,
.shs-net:focus-visible::before { opacity: 1; transform: scaleX(1); }

.shs-net__code {
	font-family: var(--font-data);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wire);
	line-height: 1;
}

.shs-net__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0;
}

.shs-net__count {
	font-family: var(--font-data);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-top: auto;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   DRAWING REGISTER — the article index as a sheet list, never a card grid
   ========================================================================== */

.shs-register { padding-block: var(--s-7) var(--s-8); }

.shs-register__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--s-7);
	align-items: start;
}

.shs-register__rows {
	border-top: 1px solid var(--rule-2);
	min-width: 0;
}

.shs-row {
	position: relative;
	display: grid;
	grid-template-columns: 74px 96px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-3) var(--s-4) 0;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	transition: background 220ms var(--ease);
}

/* The trace: a hairline that energises across the row on hover. */
.shs-row::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 1px;
	width: 100%;
	background: var(--wire);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 420ms var(--ease);
}

.shs-row:hover,
.shs-row:focus-visible,
.shs-row[data-active='true'] { background: rgba(27, 34, 44, 0.55); }

.shs-row:hover::before,
.shs-row:focus-visible::before,
.shs-row[data-active='true']::before { transform: scaleX(1); }

.shs-row__no {
	font-family: var(--font-data);
	font-size: 0.75rem;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
	padding-left: var(--s-4);
	letter-spacing: 0.04em;
}

.shs-row__desig {
	font-family: var(--font-data);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wire);
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.shs-row__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--ink);
	margin: 0;
	min-width: 0;
}

.shs-row__rev {
	font-family: var(--font-data);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* --- Preview frame: where the featured images live, one at a time -------- */

.shs-preview {
	position: sticky;
	top: var(--s-5);
	border: 1px solid var(--rule-2);
	background: rgba(20, 25, 32, 0.62);
	padding: var(--s-3);
}

.shs-preview__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--sheet-2);
	border: 1px solid var(--rule);
}

.shs-preview__stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: saturate(0.8) contrast(1.05);
	transition: opacity 380ms var(--ease);
}

.shs-preview__stage img[data-shown='true'] { opacity: 1; }

.shs-preview__empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: var(--s-2);
	text-align: center;
	padding: var(--s-4);
	transition: opacity 300ms var(--ease);
}

.shs-preview__stage[data-has-image='true'] .shs-preview__empty { opacity: 0; }

.shs-preview__caption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-3);
	padding-top: var(--s-3);
	margin-top: var(--s-3);
	border-top: 1px solid var(--rule);
	font-family: var(--font-data);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
	min-height: 1rem;
}

.shs-preview__desig { color: var(--wire); font-weight: 700; }

@media (max-width: 1080px) {
	.shs-register__layout { grid-template-columns: minmax(0, 1fr); }
	.shs-preview { display: none; }
}

@media (max-width: 720px) {
	.shs-row {
		grid-template-columns: 82px minmax(0, 1fr);
		grid-template-areas:
			'desig rev'
			'title title';
		row-gap: var(--s-2);
		padding-left: var(--s-4);
		padding-block: var(--s-4);
		min-height: 44px;
	}
	.shs-row__no { display: none; }
	.shs-row__desig { grid-area: desig; padding: 0; }
	.shs-row__rev { grid-area: rev; justify-self: end; }
	.shs-row__title { grid-area: title; font-size: 1rem; }
}

/* --- Pagination as sheet navigation ------------------------------------- */

.shs-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	margin-top: var(--s-6);
	padding-top: var(--s-4);
	border-top: 1px solid var(--rule-2);
	font-family: var(--font-data);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.shs-pager a {
	color: var(--ink-2);
	text-decoration: none;
	border: 1px solid var(--rule-2);
	padding: var(--s-3) var(--s-4);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	transition: border-color 200ms var(--ease), color 200ms var(--ease);
}

.shs-pager a:hover { border-color: var(--w-y); color: var(--ink); }
.shs-pager__pos { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   SHEET — the article
   ========================================================================== */

.shs-sheet { padding-block: var(--s-6) var(--s-8); }

/* The head caps the measure of its text, never of its drawn rules: a hairline
   that stops short of the datum is the ragged edge this world cannot have. */
.shs-sheet__head {
	margin-bottom: var(--s-6);
}

.shs-sheet__head > .shs-sheet__title,
.shs-sheet__head > .shs-sheet__byline {
	max-width: 900px;
}

.shs-sheet__strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
	padding-bottom: var(--s-4);
	margin-bottom: var(--s-5);
	border-bottom: 1px solid var(--rule-2);
}

.shs-sheet__strip .shs-label { color: var(--ink-3); }

.shs-sheet__dot {
	width: 3px;
	height: 3px;
	background: var(--ink-3);
	flex: none;
}

.shs-sheet__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 108%;
	overflow-wrap: break-word;
	font-size: clamp(1.6rem, 4vw, 3.1rem);
	line-height: 1.04;
	letter-spacing: -0.026em;
	margin: 0 0 var(--s-4);
	text-wrap: balance;
	color: var(--ink);
}

.shs-sheet__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
	font-family: var(--font-data);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.shs-sheet__hero {
	position: relative;
	margin-bottom: var(--s-7);
	border: 1px solid var(--rule-2);
	background: var(--sheet-2);
}

.shs-sheet__hero img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: saturate(0.85) contrast(1.05);
	font-size: 0;
	color: transparent;
}

/* One datum for the whole sheet: strip, hero, layout and continuity all
   terminate on the same right edge. A world built on registration cannot ship
   four different edges. */
.shs-sheet .shs-wrap { max-width: 1180px; }

.shs-sheet__layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--s-7);
	align-items: start;
}

/* --- Left rail: the energised trace tracking reading progress ------------ */

.shs-rail {
	position: sticky;
	top: var(--s-5);
	align-self: start;
}

.shs-rail__track {
	position: relative;
	padding-left: var(--s-5);
	border-left: 1px solid var(--rule);
	min-height: 120px;
}

/* The current flowing down the trace as the sheet is read. Scaled, not sized,
   so a scroll-rate update never triggers layout. */
.shs-rail__track::before {
	content: '';
	position: absolute;
	left: -1px;
	top: 0;
	width: 1px;
	height: 100%;
	background: var(--wire);
	transform: scaleY(var(--progress, 0));
	transform-origin: top center;
	will-change: transform;
}

.shs-rail__contents {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.shs-rail__contents a {
	display: block;
	font-family: var(--font-data);
	font-size: 0.75rem;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: var(--ink-3);
	text-decoration: none;
	transition: color 200ms var(--ease);
}

.shs-rail__contents a:hover,
.shs-rail__contents li[data-current='true'] a { color: var(--ink); }

.shs-rail__contents li { position: relative; }

.shs-rail__contents li::before {
	content: '';
	position: absolute;
	left: calc(var(--s-5) * -1 - 3px);
	top: 0.5em;
	width: 5px;
	height: 5px;
	background: var(--sheet);
	border: 1px solid var(--rule-2);
	transition: background 200ms var(--ease), border-color 200ms var(--ease);
}

.shs-rail__contents li[data-current='true']::before {
	background: var(--wire);
	border-color: var(--wire);
}

@media (max-width: 1080px) {
	.shs-sheet__layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }

	/* No margin to hang a trace in, so the contents become a plain index box
	   above the prose — still the fastest way to reach your step. */
	.shs-rail { position: static; }
	.shs-rail__track {
		border-left: 0;
		padding: var(--s-5);
		border: 1px solid var(--rule-2);
		background: rgba(20, 25, 32, 0.55);
		min-height: 0;
	}
	.shs-rail__track::before { display: none; }
	.shs-rail__contents li::before { display: none; }
	.shs-rail__contents a { font-size: 0.8125rem; padding-block: var(--s-1); }
	.shs-rail__contents li[data-current='true'] a { color: var(--ink); }

	/* A separator dot stranded at the end of a wrapped line reads as debris. */
	.shs-sheet__dot { display: none; }
	.shs-sheet__strip { gap: var(--s-2) var(--s-3); }
}

/* ==========================================================================
   SHEET BODY — generated article HTML, styled as drawing content
   ========================================================================== */

/* Prose holds the reading measure; drawing material — details, schedules,
   section rules — spans the sheet, which is what gives the scroll its rhythm. */
.shs-body {
	max-width: 100%;
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--ink-prose);
}

.shs-body > p,
.shs-body > ul,
.shs-body > ol,
.shs-body > h3,
.shs-body > h4,
.shs-body > blockquote,
.shs-body > figure {
	max-width: var(--measure);
}

.shs-body .quick-verdict > *,
.shs-body .shs-drawn-by > div > * {
	max-width: 76ch;
}

.shs-body > * + * { margin-top: var(--s-5); }

.shs-body p { margin: 0; }

.shs-body h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-stretch: 106%;
	font-size: clamp(1.4rem, 2.5vw, 1.85rem);
	line-height: 1.18;
	letter-spacing: -0.022em;
	color: var(--ink);
	margin: var(--s-8) 0 var(--s-4);
	padding-top: var(--s-4);
	border-top: 1px solid var(--rule);
	scroll-margin-top: var(--s-6);
	text-wrap: balance;
}

.shs-body h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1875rem;
	line-height: 1.3;
	letter-spacing: -0.014em;
	color: var(--ink);
	margin: var(--s-7) 0 var(--s-3);
	scroll-margin-top: var(--s-6);
}

.shs-body h4 {
	font-family: var(--font-data);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-2);
	margin: var(--s-6) 0 var(--s-3);
}

.shs-body a {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(var(--wire), var(--wire));
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 1px;
	transition: background-size 220ms var(--ease);
}

.shs-body a:hover { background-size: 100% 2px; }

.shs-body strong { color: var(--ink); font-weight: 700; }

.shs-body ul,
.shs-body ol {
	margin: 0;
	padding-left: var(--s-5);
}

.shs-body li + li { margin-top: var(--s-3); }

.shs-body li::marker { color: var(--wire); font-family: var(--font-data); font-size: 0.85em; }

/* --- Fault summary (the generator's .quick-verdict) ---------------------- */

.shs-body .quick-verdict {
	position: relative;
	background: rgba(27, 34, 44, 0.7);
	border: 1px solid var(--rule-2);
	padding: var(--s-5);
	margin-block: var(--s-6);
}

.shs-body .quick-verdict::before,
.shs-body .quick-verdict::after {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	border: 1px solid var(--wire);
	pointer-events: none;
}
.shs-body .quick-verdict::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.shs-body .quick-verdict::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.shs-body .quick-verdict h2,
.shs-body .quick-verdict h3 {
	font-family: var(--font-data);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wire);
	margin: 0 0 var(--s-3);
	padding-top: 0;
	border-top: 0;
	line-height: 1.4;
}

.shs-body .quick-verdict p { color: var(--ink-2); font-size: 1rem; }
.shs-body .quick-verdict > * + * { margin-top: var(--s-3); }

/* --- ASCII diagrams: the article's own linework -------------------------- */

.shs-body pre.ascii-diagram,
.shs-body pre {
	position: relative;
	font-family: var(--font-data);
	/* An 80-column diagram needs ~600px at 0.78rem. The type scales down with
	   the viewport, with a floor at the size where the box characters still
	   resolve; below that the block scrolls rather than becoming unreadable. */
	font-size: clamp(0.6rem, 1.72vw, 0.78rem);
	line-height: 1.5;
	color: var(--ink-2);
	background: rgba(15, 18, 22, 0.9);
	border: 1px solid var(--rule-2);
	padding: var(--s-6) var(--s-5) var(--s-5);
	overflow-x: auto;
	margin-block: var(--s-6);
	tab-size: 4;
	white-space: pre;
	scrollbar-width: thin;
	scrollbar-color: var(--rule-2) transparent;
}

.shs-body pre::-webkit-scrollbar,
.shs-schedule::-webkit-scrollbar { height: 8px; }

.shs-body pre::-webkit-scrollbar-track,
.shs-schedule::-webkit-scrollbar-track { background: rgba(15, 18, 22, 0.6); }

.shs-body pre::-webkit-scrollbar-thumb,
.shs-schedule::-webkit-scrollbar-thumb { background: var(--rule-2); }

/* The DETAIL tab lives on the frame, not inside the scroll box, so it stays
   pinned while the drawing scrubs sideways. */
.shs-detail {
	position: relative;
	margin-block: var(--s-6);
}

.shs-detail::before {
	content: 'DETAIL';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	font-family: var(--font-data);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--sheet);
	background: var(--wire);
	padding: 3px var(--s-3);
	line-height: 1;
}

.shs-detail > pre { margin-block: 0; }

/* A drawing wider than the sheet gets a visible edge, so the scrub reads as
   "there is more drawing". Only while there IS more drawing: the script sets
   data-overflow, and clears it at the right terminus. */
.shs-detail::after {
	content: '';
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 40px;
	background: linear-gradient(to right, rgba(15, 18, 22, 0), rgba(15, 18, 22, 0.92));
	pointer-events: none;
	opacity: 0;
	transition: opacity 220ms var(--ease);
}

.shs-detail[data-overflow='true']::after { opacity: 1; }

/* Fit toggle: a drawing set lets you back off to see the whole sheet, then
   return to 1:1 to read the annotations. */
.shs-detail__fit {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	display: none;
	align-items: center;
	gap: var(--s-2);
	background: var(--sheet-3);
	border: 1px solid var(--rule-2);
	border-top: 0;
	border-right: 0;
	color: var(--ink-2);
	font-family: var(--font-data);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	padding: var(--s-2) var(--s-3);
	min-height: 32px;
	cursor: pointer;
	transition: color 180ms var(--ease), background 180ms var(--ease);
}

.shs-detail[data-overflow='true'] .shs-detail__fit,
.shs-detail[data-fit='true'] .shs-detail__fit { display: inline-flex; }

.shs-detail__fit:hover { background: var(--wire); color: var(--sheet); }

.shs-detail[data-fit='true']::after { opacity: 0; }

.shs-detail[data-fit='true'] > pre {
	overflow-x: hidden;
}

.shs-detail[data-fit='true'] > pre > .shs-detail__scale {
	display: block;
	transform: scale(var(--fit, 1));
	transform-origin: top left;
	width: calc(100% / var(--fit, 1));
}

@media (max-width: 720px) {
	/* Narrow sheets trade frame padding for drawing width before they trade
	   away legibility. Below that the fit toggle takes over. */
	.shs-body pre.ascii-diagram,
	.shs-body pre {
		padding: var(--s-6) var(--s-3) var(--s-4);
		font-size: 0.6rem;
	}
	.shs-detail::after { width: 26px; }
	.shs-detail__fit { min-height: 36px; }
}

.shs-body code {
	font-family: var(--font-data);
	font-size: 0.875em;
	color: var(--w-y);
	background: rgba(27, 34, 44, 0.8);
	padding: 0.1em 0.35em;
	border: 1px solid var(--rule);
}

.shs-body pre code { background: none; border: 0; padding: 0; color: inherit; }

/* --- Schedules (tables) -------------------------------------------------- */

.shs-schedule {
	overflow-x: auto;
	margin-block: var(--s-6);
	border: 1px solid var(--rule-2);
	max-width: 100%;
	scrollbar-width: thin;
	scrollbar-color: var(--rule-2) transparent;
}

.shs-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	min-width: 480px;
}

.shs-body thead th {
	font-family: var(--font-data);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* --ink-3 falls to 3.8:1 against the raised header row; --ink-2 holds 5.9:1. */
	color: var(--ink-2);
	text-align: left;
	padding: var(--s-3) var(--s-4);
	background: rgba(27, 34, 44, 0.8);
	border-bottom: 1px solid var(--rule-2);
	white-space: nowrap;
}

.shs-body tbody td {
	padding: var(--s-3) var(--s-4);
	border-bottom: 1px solid var(--rule);
	color: var(--ink-2);
	vertical-align: top;
}

.shs-body tbody tr:last-child td { border-bottom: 0; }
.shs-body tbody td:first-child { color: var(--ink); font-weight: 600; }

.shs-body blockquote {
	margin: var(--s-6) 0;
	padding-left: var(--s-5);
	border-left: 1px solid var(--wire);
	color: var(--ink-2);
	font-size: 1.0625rem;
}

.shs-body img {
	border: 1px solid var(--rule-2);
	margin-block: var(--s-5);
}

/* --- Inline diagrams: the charts the articles draw out of divs ------------ */

/* A quarter of the sheets carry a decision tree or signal path built from
   nested flex divs. Normalisation keeps their layout and drops the old light
   theme's colours, so the shape survives and the sheet redraws the boxes in
   its own linework rather than inheriting white cards on graphite. */
.shs-body div[style] {
	margin-block: var(--s-5);
	max-width: 100%;
	flex-wrap: wrap;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ink-2);
}

.shs-body div[style] div {
	border: 1px solid var(--rule-2);
	background: var(--sheet-2);
	padding: var(--s-2) var(--s-3);
	text-align: center;
}

/* A nested container is a branch of the diagram, not a box drawn on it. */
.shs-body div[style] div[style] {
	border: 0;
	background: none;
	padding: 0;
	margin-block: 0;
}

/* --- Drawn by (author bio) ----------------------------------------------- */

.shs-body .shs-drawn-by {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: var(--s-5);
	align-items: start;
	margin-top: var(--s-8);
	padding: var(--s-5);
	border: 1px solid var(--rule-2);
	background: rgba(20, 25, 32, 0.6);
	position: relative;
}

.shs-body .shs-drawn-by::before {
	content: 'DRAWN BY';
	position: absolute;
	top: calc(var(--s-5) * -0.5 - 5px);
	left: var(--s-5);
	background: var(--sheet);
	padding-inline: var(--s-2);
	font-family: var(--font-data);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--ink-3);
}

.shs-body .shs-drawn-by img {
	width: 64px;
	height: 64px;
	border-radius: 0;
	border: 1px solid var(--rule-2);
	margin: 0;
	filter: saturate(0.9);
}

.shs-body .shs-drawn-by h3,
.shs-body .shs-drawn-by h4 {
	margin: 0 0 var(--s-2);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--ink);
}

.shs-body .shs-drawn-by p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}

@media (max-width: 560px) {
	.shs-body .shs-drawn-by { grid-template-columns: 1fr; }
}

/* --- Continuity: related sheets ------------------------------------------ */

.shs-continuity {
	margin-top: var(--s-8);
	padding-top: var(--s-5);
	border-top: 1px solid var(--rule-2);
}

.shs-continuity__head {
	display: flex;
	align-items: baseline;
	gap: var(--s-4);
	margin-bottom: var(--s-4);
}

.shs-continuity__list {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--rule);
}

/* ==========================================================================
   TITLE BLOCK — the footer, as it appears bottom-right on a real drawing
   ========================================================================== */

.shs-titleblock {
	margin-top: var(--s-8);
	border-top: 1px solid var(--rule-2);
	background: rgba(20, 25, 32, 0.5);
}

.shs-titleblock__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	border-left: 1px solid var(--rule);
}

.shs-tb {
	padding: var(--s-5);
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	min-width: 0;
}

.shs-tb__k {
	font-family: var(--font-data);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-3);
	line-height: 1;
}

.shs-tb__v {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	letter-spacing: -0.008em;
}

.shs-tb__v--data {
	font-family: var(--font-data);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.shs-tb__links {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.shs-tb__links a {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--ink-2);
	text-decoration: none;
	transition: color 180ms var(--ease);
	padding-block: 2px;
}

.shs-tb__links a:hover { color: var(--ink); }

/* Wire colour legend — the key that makes the code readable. */
.shs-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	border-bottom: 1px solid var(--rule);
}

.shs-legend__item {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-data);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.shs-legend__swatch {
	width: 16px;
	height: 3px;
	background: var(--wire);
	flex: none;
}

.shs-colophon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	justify-content: space-between;
	align-items: center;
	padding: var(--s-4) var(--s-5) var(--s-6);
	font-family: var(--font-data);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: var(--ink-3);
}

.shs-colophon a { color: var(--ink-3); text-decoration: none; }
.shs-colophon a:hover { color: var(--ink-2); }

@media (max-width: 900px) {
	.shs-titleblock__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.shs-titleblock__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PAGES, ARCHIVES, EMPTY AND ERROR STATES
   ========================================================================== */

.shs-page { padding-block: var(--s-7) var(--s-8); }

.shs-page__head {
	margin-bottom: var(--s-6);
	padding-bottom: var(--s-5);
	border-bottom: 1px solid var(--rule-2);
}

.shs-page__head > .shs-page__title,
.shs-page__head > .shs-page__deck,
.shs-page__head > .shs-404__code {
	max-width: 900px;
}

.shs-page__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 108%;
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.026em;
	margin: var(--s-3) 0 var(--s-3);
	text-wrap: balance;
}

.shs-page__deck {
	font-size: 1.0625rem;
	color: var(--ink-2);
	margin: 0;
	max-width: 60ch;
}

.shs-page__title--sub {
	font-size: clamp(1.3rem, 3vw, 2rem);
	margin-top: var(--s-5);
}

/* The archive intro comes from 10-seo-routing.php, which owns it for SEO
   reasons. The theme owns how it reads: prose measure, prose ink, and the
   net-coloured underline the rest of the sheet gives its links. */
.shtr-archive-intro {
	margin-top: var(--s-5);
	max-width: var(--measure);
}

.shtr-archive-intro p {
	margin: 0 0 var(--s-3);
	color: var(--ink-2);
	line-height: 1.72;
}

.shtr-archive-intro p:last-child { margin-bottom: 0; }

.shtr-archive-intro a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--rule-3);
	transition: border-color 200ms var(--ease);
}

.shtr-archive-intro a:hover { border-bottom-color: var(--w-y); }

.shs-page__probe {
	max-width: 620px;
	margin-top: var(--s-5);
}

.shs-rail__heading {
	display: block;
	margin-bottom: var(--s-4);
}

.shs-continuity__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.018em;
	margin: 0;
	color: var(--ink);
}

.shs-continuity__head .shs-lead__rule { top: -5px; }

.shs-tb__k--push { margin-top: auto; }

.shs-tb__v--prose {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--ink-2);
	letter-spacing: 0;
}

.shs-legend__item--key { color: var(--ink-3); }

.shs-empty {
	border: 1px dashed var(--rule-2);
	padding: var(--s-7) var(--s-5);
	text-align: center;
	color: var(--ink-2);
	display: grid;
	gap: var(--s-4);
	justify-items: center;
}

.shs-empty__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
}

.shs-empty__nets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	justify-content: center;
	margin-top: var(--s-2);
}

.shs-404__code {
	font-family: var(--font-data);
	font-size: clamp(3rem, 12vw, 7rem);
	font-weight: 700;
	line-height: 0.9;
	color: var(--w-r);
	letter-spacing: -0.02em;
	margin: 0;
}

/* ==========================================================================
   MOTION — one authored moment: the drawing energises on load
   ========================================================================== */

@keyframes shs-energize {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* Content is visible from the first frame — the settle is a small ease-out from
   an already-legible default, never a fade-in gating the LCP element. */
@keyframes shs-settle {
	from { transform: translateY(9px); }
	to { transform: none; }
}

.shs-bus::after {
	animation: shs-energize 900ms var(--ease) both;
}

.js-energize {
	animation: shs-settle 620ms var(--ease) both;
}

.js-energize--late { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
	.shs-bus::after,
	.js-energize {
		animation: none;
		opacity: 1;
		transform: none;
	}
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   PRINT — a drawing should print like one
   ========================================================================== */

@media print {
	body.shs { background: #fff; color: #000; }
	.shs-bus, .shs-rail, .shs-preview, .shs-probe, .shs-titleblock { display: none; }
	.shs-body { max-width: none; color: #000; }
	.shs-body a { background: none; text-decoration: underline; }
}

/* --- Tap targets on phones -------------------------------------------------
   Two navigation elements land just under the 24px minimum on a phone: the
   terminal chip (11px type + 5px padding + 1px border = 23px) and the links in
   the specifications list at the foot of each sheet.

   Deliberately NOT applied to links inside prose. Those are the majority of
   what an automated scan flags here, and they are the one case where padding is
   wrong: it breaks the line rhythm of the paragraph around them, and WCAG's
   target-size rule exempts inline links in a sentence for exactly that reason.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
	.shs-terminal {
		min-height: 24px;
	}

	.shtr-references li a {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
	}
}