/* =========================================================================
   netex · components.css (Foundation) · design bible §9
   Components read ROLE tokens only (--bg, --fg, --fg-2, --rule, --link, --focus, --sig, --leak,
   --cut-b, --line-art), so every component works on every field.
   States: hover only inside @media (hover: hover); focus ring never removed; disabled = dashed
   rule + --fg-3 (never opacity alone); loading = aria-busy + steps(3) ellipsis.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer components {

/* ---- grounds ------------------------------------------------------------ */
.f-ink, .f-ink-2, .f-indigo { color-scheme: dark; }
.f-paper, .f-paper-2 { color-scheme: light; }

/* ---- shared geometry --------------------------------------------------- */
:root {
	/* Bottom-right 47° chamfer for UI pieces (buttons, chips, tags). */
	--clip-ui: polygon(0 0, 100% 0, 100% calc(100% - var(--ch-ui) * var(--nx-tan)), calc(100% - var(--ch-ui)) 100%, 0 100%);
	--clip-sheet: polygon(0 0, 100% 0, 100% calc(100% - var(--ch-sheet) * var(--nx-tan)), calc(100% - var(--ch-sheet)) 100%, 0 100%);
	/* Ring (outline) of the UI chamfer, 1.5px, via evenodd. */
	--clip-ui-ring: polygon(evenodd,
		0 0, 100% 0, 100% calc(100% - var(--ch-ui) * var(--nx-tan)), calc(100% - var(--ch-ui)) 100%, 0 100%, 0 0,
		1.5px 1.5px, 1.5px calc(100% - 1.5px), calc(100% - var(--ch-ui) - .9px) calc(100% - 1.5px), calc(100% - 1.5px) calc(100% - var(--ch-ui) * var(--nx-tan) - .9px), calc(100% - 1.5px) 1.5px, 1.5px 1.5px);
	--u-x: .682px;   /* cos 47°: one px along the cut (U) */
	--u-y: -.731px;  /* −sin 47° */
}

/* ---- icon glyphs (inline SVG from netex_icon()) --------------------------- */
.nx-icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.nx-icon--fill { fill: currentColor; stroke: none; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.nx-btn {
	--btn-fill: transparent;
	--btn-fg: var(--fg);
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 48px;
	padding: .7em 20px;
	font-family: var(--f-sans);
	font-size: .9375rem;
	font-weight: var(--w-strong);
	line-height: 1.1;
	letter-spacing: .005em;
	color: var(--btn-fg);
	text-decoration: none;
	text-align: center;
	user-select: none;
	cursor: pointer;
	transition: transform var(--dur-instant) var(--ease-mech), color var(--dur-ui) var(--ease-mech);
}
.nx-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-fill);
	clip-path: var(--clip-ui);
	transition: background-color var(--dur-ui) var(--ease-mech);
}
.nx-btn__label { position: relative; }
.nx-btn__label::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -.18em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-ui) var(--ease-mech);
}
.nx-btn__arrow { width: 1.05em; height: 1.05em; transition: transform var(--dur-ui) var(--ease-mech); }
.nx-btn--sm { min-height: 40px; padding: .55em 14px; font-size: .875rem; }
.nx-btn--block { display: flex; width: 100%; }

/* Primary: Molten, ink text, ↗, bottom-right chamfer. One per view (+ the header CTA). */
.nx-btn--primary { --btn-fill: var(--molten); --btn-fg: var(--ink); }
.nx-btn--primary::after {
	/* --shadow-print-ink, drawn as a chamfered layer so the clip never eats it (1.4.11 on Paper). */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--ink);
	clip-path: var(--clip-ui);
	transform: translate(4px, 4px);
	display: none;
	transition: transform var(--dur-instant) var(--ease-mech);
}
:is(.f-paper, .f-paper-2, [data-field="paper"], [data-field="paper-2"]) .nx-btn--primary::after,
.nx-btn--primary.nx-btn--print::after { display: block; }
.nx-btn--primary:focus-visible { outline-color: var(--focus); }

/* Secondary: 1.5px chamfered rule in --fg, transparent fill. */
.nx-btn--secondary::before { background: var(--fg); clip-path: var(--clip-ui-ring); }
.nx-btn--secondary::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: transparent;
	clip-path: var(--clip-ui);
	transition: background-color var(--dur-ui) var(--ease-mech);
}

/* Quiet: text button with the arrow (the one secondary text link next to a primary). */
.nx-btn--text { min-height: 44px; padding-inline: 0; color: var(--link); }
.nx-btn--text .nx-btn__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.nx-btn--text .nx-btn__label::after { display: none; }

@media (hover: hover) {
	.nx-btn:hover .nx-btn__arrow { transform: translate(calc(3 * var(--u-x)), calc(3 * var(--u-y))); }
	.nx-btn--primary:hover .nx-btn__label::after { transform: scaleX(1); }
	.nx-btn--secondary:hover::after { background: var(--bg-2); }
	.nx-btn--text:hover .nx-btn__label { text-decoration-thickness: 2px; }
}
.nx-btn--primary:active { transform: translate(2px, 2px); }
.nx-btn--primary:active::after { transform: translate(2px, 2px); }
.nx-btn--secondary:active { transform: translate(1px, 1px); }

.nx-btn:disabled, .nx-btn[aria-disabled="true"] { --btn-fg: var(--steel-dark); cursor: not-allowed; transform: none; }
.nx-btn--primary:disabled, .nx-btn--primary[aria-disabled="true"] { --btn-fill: var(--paper-3); }
.nx-btn--primary:disabled::after, .nx-btn--primary[aria-disabled="true"]::after { display: none; }
.nx-btn--secondary:disabled, .nx-btn--secondary[aria-disabled="true"] { --btn-fg: var(--fg-3); }
.nx-btn--secondary:disabled::before, .nx-btn--secondary[aria-disabled="true"]::before { background: repeating-linear-gradient(90deg, var(--fg-3) 0 4px, transparent 4px 7px); }

/* Loading: the label carries the copy («Αποστολή…»), the dots tick in 3 steps. */
.nx-btn[aria-busy="true"] { cursor: progress; }
.nx-btn[aria-busy="true"] .nx-btn__arrow { visibility: hidden; }
.nx-busy-dots::after { content: "…"; display: inline-block; width: 1.1em; text-align: left; overflow: hidden; vertical-align: bottom; animation: nx-dots 900ms steps(4, jump-none) infinite; }
@keyframes nx-dots { from { width: 0; } to { width: 1.1em; } }

/* Buttons group */
.nx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.nx-micro {
	display: block;
	margin-top: var(--s-3);
	font: 500 var(--t-micro)/1.4 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--fg-2);
}

/* =========================================================================
   ICON BUTTON (pause, sound, close, step) · TOGGLE SWITCH · SEGMENTED · TABS
   ========================================================================= */
.nx-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-width: 44px;
	min-height: 44px;
	padding: 0 11px;
	background: var(--bg-2);
	border: var(--bw) solid var(--rule);
	color: var(--fg);
	font: 500 var(--t-label)/1 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--dur-ui) var(--ease-mech), color var(--dur-ui) var(--ease-mech);
}
.nx-iconbtn .nx-icon { width: 20px; height: 20px; }
.nx-iconbtn--label { padding: 0 14px 0 11px; }
.nx-iconbtn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.nx-iconbtn:active { transform: translate(1px, 1px); }
@media (hover: hover) { .nx-iconbtn:hover { border-color: var(--fg); } }
/* Toggle icons: [data-when="on|off"] children follow aria-pressed. */
.nx-iconbtn[aria-pressed="true"] [data-when="off"], .nx-iconbtn:not([aria-pressed="true"]):not([data-paused]) [data-when="on"] { display: none; }
/* Play/pause buttons with a swapping label (netex_video): data-paused="true|false". */
.nx-iconbtn[data-paused="true"] [data-when="off"], .nx-iconbtn[data-paused="false"] [data-when="on"] { display: none; }

.nx-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 44px;
	color: var(--fg);
	font: 500 var(--t-small)/1.2 var(--f-sans);
	text-align: left;
}
.nx-switch__track {
	position: relative;
	flex: none;
	width: 44px;
	height: 24px;
	border: var(--bw-2) solid var(--fg);
	background: transparent;
	transition: background-color var(--dur-ui) var(--ease-mech);
}
.nx-switch__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 15px;
	height: 15px;
	background: var(--fg);
	clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
	transition: transform 160ms var(--ease-mech), background-color var(--dur-ui) var(--ease-mech);
}
.nx-switch:is([aria-checked="true"], [aria-pressed="true"]) .nx-switch__track { background: var(--sig); border-color: var(--sig); }
.nx-switch:is([aria-checked="true"], [aria-pressed="true"]) .nx-switch__thumb { transform: translateX(20px); background: var(--bg); }
.nx-switch:disabled .nx-switch__track { border-style: dashed; border-color: var(--fg-3); }
.nx-switch:disabled { color: var(--fg-3); }

.nx-seg { display: inline-flex; flex-wrap: wrap; border: var(--bw) solid var(--rule); }
.nx-seg > * {
	min-height: 40px;
	padding: 0 var(--s-4);
	font: 500 var(--t-label)/1 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--fg);
	background: transparent;
}
.nx-seg > * + * { border-left: var(--bw) solid var(--rule); }
.nx-seg > :is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]) { background: var(--fg); color: var(--bg); }
.nx-seg > :focus-visible { outline-offset: -3px; }

.nx-tabs { display: flex; flex-wrap: wrap; gap: var(--s-5); border-bottom: var(--bw) solid var(--rule); }
.nx-tabs [role="tab"] {
	position: relative;
	min-height: 44px;
	padding: var(--s-2) 0;
	font: var(--w-ui) .9375rem/1.2 var(--f-sans);
	color: var(--fg-2);
}
.nx-tabs [role="tab"][aria-selected="true"] { color: var(--fg); }
.nx-tabs [role="tab"][aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--fg);
	clip-path: polygon(0 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}
@media (hover: hover) { .nx-tabs [role="tab"]:hover { color: var(--fg); } }

/* =========================================================================
   CHIPS: router · filter · tag (verb/mark)
   ========================================================================= */
.nx-chips { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-2); }
.nx-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 40px;
	padding: .45em 1em;
	border: var(--bw) solid color-mix(in srgb, var(--fg) 40%, transparent);
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--fg);
	font: var(--w-ui) .9375rem/1.2 var(--f-sans);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--dur-ui) var(--ease-mech), background-color var(--dur-ui) var(--ease-mech), color var(--dur-ui) var(--ease-mech);
}
.nx-chip--primary { background: var(--molten); border-color: var(--molten); color: var(--ink); }
.nx-chip__tick { display: none; width: .9em; height: .9em; }
.nx-chip:is([aria-pressed="true"], [aria-checked="true"], .is-selected),
.nx-chip:has(> input:checked) { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.nx-chip:is([aria-pressed="true"], [aria-checked="true"], .is-selected) .nx-chip__tick,
.nx-chip:has(> input:checked) .nx-chip__tick { display: inline-block; }
.nx-chip:has(> input:focus-visible) { outline: var(--bw-focus) solid var(--focus); outline-offset: var(--focus-offset); }
.nx-chip > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nx-chip:active { transform: translate(1px, 1px); }
@media (hover: hover) {
	.nx-chip:hover { border-color: var(--fg); }
	.nx-chip--primary:hover { border-color: var(--ink); }
}

.nx-chip--filter {
	min-height: 32px;
	padding: .3em .9em;
	font: 500 var(--t-label)/1 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

.nx-tag {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	min-height: 24px;
	padding: .2em calc(var(--ch-ui) + .2em) .2em .6em;
	color: var(--sig);
	font: 500 .6875rem/1.2 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}
.nx-tag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sig); clip-path: var(--clip-ui-ring); }
.nx-tag.is-selected, .nx-tag[aria-pressed="true"] { color: var(--bg); }
.nx-tag.is-selected::before, .nx-tag[aria-pressed="true"]::before { clip-path: var(--clip-ui); }

/* =========================================================================
   ROUTER (hero question → chips → sector line)
   ========================================================================= */
.nx-router { display: grid; gap: var(--s-4); }
.nx-router__q {
	float: none;
	padding: 0;
	margin-bottom: var(--s-3);
	font: var(--w-h3) 1.25rem/1.25 var(--f-sans);
	letter-spacing: -.005em;
	color: var(--fg);
}
.nx-router__sectors { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font: 400 .9375rem/1.5 var(--f-sans); }
.nx-router__sectors a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--fg) 45%, transparent); }
@media (hover: hover) { .nx-router__sectors a:hover { text-decoration-color: var(--fg); text-decoration-thickness: 2px; } }

/* =========================================================================
   LABELS: proof label chip + tooltip · AI media label · source chip
   ========================================================================= */
.nx-tipwrap { position: relative; display: inline-flex; vertical-align: baseline; }
.nx-label {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	max-width: 100%;
	padding: 2px 6px;
	border: var(--bw) solid var(--fg-3);
	border-radius: 0;
	background: transparent;
	color: var(--fg-2);
	font: 500 .6875rem/1.25 var(--f-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	white-space: normal; /* wraps inside narrow cards and calculators instead of overflowing them */
	overflow-wrap: anywhere;
	cursor: help;
}
.nx-tipwrap { max-width: 100%; }
/* Static variant (netex_label( …, [ 'static' => true ] )): the same chip, not focusable, no tooltip;
   for chips inside hidden viewers, figure captions and other places where a button would be noise. */
.nx-label--static { cursor: default; }
.nx-labels { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.nx-tip {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	z-index: var(--z-chip);
	width: max-content;
	max-width: min(32ch, 80vw);
	padding: var(--s-2) var(--s-3);
	background: var(--ink-2);
	color: var(--paper);
	border: var(--bw) solid var(--rule-dark);
	font: 400 .8125rem/1.4 var(--f-sans);
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--dur-ui) var(--ease-mech), transform var(--dur-ui) var(--ease-mech), visibility 0s linear var(--dur-ui);
	pointer-events: none;
}
.nx-tipwrap:is(:hover, :focus-within, .is-open) > .nx-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nx-tipwrap.is-dismissed > .nx-tip { opacity: 0; visibility: hidden; }
.nx-tip--below, .nx-tip.is-flip { bottom: auto; top: calc(100% + 8px); }
.nx-tip--end { left: auto; right: 0; }

.nx-media { position: relative; display: block; overflow: hidden; background: var(--bg-2); --run: calc(93.25% * var(--ar, .5625)); }
.nx-media > picture, .nx-media > picture > img, .nx-media > img, .nx-media > video { width: 100%; height: 100%; }
.nx-media img, .nx-media video { object-fit: cover; object-position: var(--focal, 50% 50%); }
.nx-media--contain img { object-fit: contain; }
.nx-ailabel {
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: var(--z-stage-ui);
	display: inline-flex;
}
.nx-ailabel .nx-label {
	min-height: 20px;
	padding: 2px 6px;
	border: 0;
	background: var(--ink-2);
	color: var(--paper);
	font-size: .625rem;
	letter-spacing: .06em;
	white-space: nowrap;
}
.nx-ailabel .nx-tip { left: 0; }

.nx-source {
	display: inline-flex;
	align-items: center;
	gap: .2em;
	padding: 0 .2em;
	color: var(--link);
	font: 500 .6875rem/1.4 var(--f-mono);
	letter-spacing: .04em;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	vertical-align: baseline;
}

/* =========================================================================
   READOUTS: stamped number · dot-matrix (Handjet, one per page)
   ========================================================================= */
.nx-readout { container-type: inline-size; display: grid; gap: var(--s-2); }
.nx-readout__label { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-readout__value {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: .12em;
	font-family: var(--f-mono);
	font-size: var(--t-readout);
	font-weight: 600;
	line-height: .95;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--fg);
}
.nx-readout__unit { font-size: .38em; font-weight: 500; letter-spacing: 0; color: var(--fg-2); }
.nx-readout--leak .nx-readout__value { color: var(--leak); }
.nx-readout--sig .nx-readout__value { color: var(--sig); }
.nx-readout__note { font: 400 var(--t-small)/1.45 var(--f-sans); color: var(--fg-2); max-width: 40ch; }
.nx-readout--dot .nx-readout__value { font-family: var(--f-dot); font-weight: 500; font-variation-settings: "ELSH" 2; letter-spacing: .02em; line-height: .9; transition: font-variation-settings var(--dur-ui) var(--ease-mech); }
@media (hover: hover) { .nx-readout--dot:hover .nx-readout__value { font-variation-settings: "ELSH" 8; } }

/* STAMP: opacity 0→1, scale 1.06→1 in 3 steps, one-frame underline flash. Never counts up. */
[data-stamp] { position: relative; display: inline-block; }
.is-stamping { animation: nx-stamp var(--dur-stamp) var(--ease-stamp) both; }
.is-stamping::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -.08em;
	height: 2px;
	background: var(--stamp-flash, var(--sig));
	animation: nx-flash var(--dur-stamp) steps(1, jump-end) both;
	pointer-events: none;
}
.nx-readout--leak .is-stamping::after, .is-stamping.is-leak::after { background: var(--leak); }
@keyframes nx-stamp { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes nx-flash { 0% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } }

/* =========================================================================
   SLIP-CUT HEADLINES (S3) · built by lib/cut.js; without JS a plain heading.
   ========================================================================= */
.cut { position: relative; }
.cut__a { display: block; }
.cut__b {
	position: absolute;
	inset: 0;
	display: block;
	color: var(--cut-b);
	font-variation-settings: "FLAR" 100, "VOLM" 100;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}
.cut__b * { color: inherit !important; }
.cut.is-cut .cut__a, .cut.is-cut .cut__b { will-change: clip-path; }
.cut__flash {
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	background: var(--n-grad);
	transform-origin: 0 50%;
	opacity: 0;
	pointer-events: none;
}
.cut.is-locked .cut__a, .cut.is-locked .cut__b { will-change: auto; }
@media print { .cut__b, .cut__flash { display: none; } }

/* Flare morph (S3b): FLAR/VOLM 100 → 0 as the element crosses the reading line. No JS. */
.nx-flare-morph { font-variation-settings: "FLAR" 0, "VOLM" 0; }
@supports (animation-timeline: view()) {
	html:not(.rm) .nx-flare-morph {
		animation: nx-flare linear both;
		animation-timeline: view();
		animation-range: entry 20% cover 55%;
	}
}
@keyframes nx-flare { from { font-variation-settings: "FLAR" 100, "VOLM" 100; } to { font-variation-settings: "FLAR" 0, "VOLM" 0; } }

/* =========================================================================
   SHEETS / DOCUMENTS · WORK ORDER · STAMP · DECODE PANEL
   ========================================================================= */
.nx-sheet {
	--sheet-bg: var(--paper);
	--sheet-rule: var(--rule-light);
	position: relative;
	isolation: isolate;
	padding: var(--s-5) var(--s-5) calc(var(--s-5) + var(--ch-sheet) * .5);
	color: var(--ink);
	--fg: var(--ink); --fg-2: var(--steel-dark); --fg-3: var(--steel-dark); --bg: var(--paper); --bg-2: var(--paper-2);
	--rule: var(--rule-light); --link: var(--cyan-deep); --focus: var(--indigo); --sig: var(--cyan-deep); --leak: var(--molten-deep); --cut-b: var(--indigo); --line-art: var(--ink);
	--sel-bg: var(--indigo); --sel-fg: var(--paper); --ok: var(--cyan-deep); --err: var(--molten-deep);
	color-scheme: light;
}
.nx-sheet::before, .nx-sheet::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.nx-sheet::before { inset: 0; background: var(--paper-3); clip-path: var(--clip-sheet); }
.nx-sheet::after { inset: 1px; background: var(--sheet-bg); clip-path: polygon(0 0, 100% 0, 100% calc(100% - (var(--ch-sheet) - .6px) * var(--nx-tan)), calc(100% - var(--ch-sheet) + .6px) 100%, 0 100%); }
.nx-sheet--active { filter: drop-shadow(10px 10px 0 var(--indigo)); }
.nx-sheet__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-1) var(--s-4);
	margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-5);
	padding: var(--s-3) var(--s-5);
	border-bottom: var(--bw) solid var(--rule);
	font: 500 .6875rem/1.4 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--fg-2);
}
.nx-sheet__title { font-size: var(--t-h3); font-weight: var(--w-h3); line-height: 1.12; letter-spacing: var(--tr-h3); color: var(--fg); }

.nx-workorder { }
.nx-workorder .nx-sheet__head b { color: var(--fg); font-weight: 600; }

.nx-stamp {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .35em .7em;
	border: 2px solid var(--molten);
	color: var(--fg); /* ink on Paper, paper on Ink and Indigo (ink text vanished on Indigo) */
	font: 700 .875rem/1 var(--f-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	transform: rotate(-4deg);
}
.nx-stamp.is-stamping { animation-name: nx-stamp-rot; }
@keyframes nx-stamp-rot { from { opacity: 0; transform: rotate(-4deg) scale(1.12); } to { opacity: 1; transform: rotate(-4deg); } }

.nx-decode { display: grid; gap: 0; }
.nx-decode__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.nx-decode__title h2, .nx-decode__title h3 { font-size: var(--t-h3); font-weight: var(--w-h3); line-height: 1.1; max-width: none; }
.nx-decode__seq { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-decode__rows { margin: 0; }
.nx-decode__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-1) var(--s-5);
	padding: var(--s-4) 0;
	border-top: var(--bw) solid var(--rule);
}
.nx-decode__row dt { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-decode__row dd { margin: 0; font-size: var(--t-body); line-height: 1.5; }
.nx-decode__row dd .nx-source { margin-left: .3em; }
.nx-decode__note { display: block; margin-top: var(--s-2); font: 400 var(--t-small)/1.4 var(--f-sans); color: var(--fg-2); }
.nx-decode__scale { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: .4em; }
.nx-decode__scale i { width: 10px; height: 10px; border: var(--bw) solid var(--fg); }
.nx-decode__scale i.is-on { background: var(--fg); }
.nx-decode__cta { padding-top: var(--s-5); border-top: var(--bw) solid var(--rule); }
@container (min-width: 560px) {
	.nx-decode__row { grid-template-columns: 11rem minmax(0, 1fr); }
}
.nx-decode { container-type: inline-size; }
details.nx-decode > summary { list-style: none; }
details.nx-decode > summary .nx-faq__sign { margin-left: auto; }
details.nx-decode[open] > .nx-decode__body { animation: nx-wipe-in var(--dur-cut) var(--ease-cut) backwards; }
@keyframes nx-wipe-in {
	from { clip-path: polygon(0 0, 0 0, -100% 100%, -100% 100%); }
	to { clip-path: polygon(0 0, 200% 0, 100% 100%, -100% 100%); }
}

/* =========================================================================
   FORMS
   ========================================================================= */
.nx-form { display: grid; gap: var(--s-5); max-width: 40rem; }
.nx-form--wide { max-width: none; }
.nx-field { display: grid; gap: var(--s-2); min-width: 0; }
.nx-field__label, .nx-legend {
	font: 500 var(--t-label)/1.35 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--fg-2);
}
.nx-legend { margin-bottom: var(--s-3); }
.nx-field__opt { text-transform: none; letter-spacing: 0; }
.nx-field__help { font: 400 var(--t-small)/1.45 var(--f-sans); color: var(--fg-2); }
.nx-field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	font: 500 .8125rem/1.4 var(--f-mono);
	color: var(--err);
}
.nx-field__error::before {
	content: "!";
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.2em;
	height: 1.2em;
	border: 1.5px solid currentColor;
	font-weight: 700;
	line-height: 1;
}
.nx-field__error:empty { display: none; }

.nx-control { position: relative; display: block; }
.nx-input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: .65em 14px;
	border: 0;
	border-bottom: var(--bw-2) solid var(--fg);
	border-radius: 0;
	background: var(--bg-2);
	color: var(--fg);
	font: 400 1rem/1.4 var(--f-sans);
	appearance: none;
	transition: border-color var(--dur-ui) var(--ease-mech), box-shadow var(--dur-ui) var(--ease-mech);
}
.nx-input::placeholder { color: var(--fg-2); opacity: 1; }
textarea.nx-input { min-height: calc(4 * 1.4em + 1.3em); resize: vertical; }
select.nx-input { padding-right: 44px; cursor: pointer; }
.nx-control--select::after {
	content: "";
	position: absolute;
	right: 18px;
	top: calc(50% - 6px);
	width: 8px;
	height: 8px;
	border-right: var(--bw-2) solid var(--fg);
	border-bottom: var(--bw-2) solid var(--fg);
	transform: rotate(45deg);
	pointer-events: none;
}
/* 47° corner on the control (drawn, not clipped, so the focus ring stays whole). */
.nx-control::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: var(--ch-ui);
	height: calc(var(--ch-ui) * var(--nx-tan));
	background: var(--bg);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}
.nx-control--select::before { display: none; }
.nx-input:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: var(--focus-offset); border-bottom-width: 2px; }
.nx-input:hover { border-bottom-color: var(--fg); }
.nx-input[aria-invalid="true"] { border-bottom-color: var(--err); border-bottom-width: 2px; }
.nx-input:disabled { border-bottom-style: dashed; color: var(--fg-3); cursor: not-allowed; }
.nx-field.is-valid .nx-control::after {
	content: "";
	position: absolute;
	right: 16px;
	top: calc(50% - 7px);
	width: 6px;
	height: 11px;
	border-right: 2px solid var(--ok);
	border-bottom: 2px solid var(--ok);
	transform: rotate(45deg);
}
.nx-field.is-valid .nx-control--select::after { display: none; }
.nx-field__unit { display: flex; align-items: center; }
.nx-field__unit .nx-control { flex: 1; }
.nx-field__unit > span:not(.nx-control) { padding: 0 var(--s-3); font: 500 var(--t-small)/1 var(--f-mono); color: var(--fg-2); } /* the unit, never the input's own wrapper */
.nx-counter { justify-self: end; font: 400 .6875rem/1 var(--f-mono); color: var(--fg-2); }

/* Checkbox: 20px square, tick draws in 120ms. */
.nx-check-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); align-items: start; font-size: var(--t-small); line-height: 1.45; color: var(--fg); }
.nx-check {
	appearance: none;
	display: inline-grid;
	place-content: center;
	width: 20px;
	height: 20px;
	margin: .1em 0 0;
	border: var(--bw-2) solid var(--fg);
	background: transparent;
	cursor: pointer;
}
.nx-check::before {
	content: "";
	width: 12px;
	height: 12px;
	background: var(--bg);
	clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 37% 70%);
	clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 37% 72%);
	transform: scale(0);
	transition: transform 120ms var(--ease-mech);
}
.nx-check:checked { background: var(--fg); }
.nx-check:checked::before { transform: none; }
.nx-check[aria-invalid="true"] { border-color: var(--err); border-width: 2px; }
.nx-check:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: var(--focus-offset); }

/* Radio row / path option: a full-width 56px index row; selected = inverse fill. */
.nx-radiorow {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-4);
	min-height: 56px;
	padding: var(--s-3) var(--s-4);
	border-top: var(--bw) solid var(--rule);
	cursor: pointer;
}
.nx-radiorow input { appearance: none; width: 16px; height: 16px; margin: 0; border: var(--bw-2) solid currentColor; border-radius: 50%; display: grid; place-content: center; }
.nx-radiorow input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform 120ms var(--ease-mech); }
.nx-radiorow input:checked::before { transform: none; }
.nx-radiorow:has(input:checked) { background: var(--fg); color: var(--bg); }
.nx-radiorow:has(input:focus-visible) { outline: var(--bw-focus) solid var(--focus); outline-offset: -3px; }
@media (hover: hover) { .nx-radiorow:hover { background: var(--bg-2); } .nx-radiorow:has(input:checked):hover { background: var(--fg); } }

/* Range slider: 1.5px track, fill in --fg (via --pct), 47° parallelogram thumb. */
.nx-range {
	--pct: 50%;
	appearance: none;
	width: 100%;
	height: 32px;
	background: transparent;
	cursor: pointer;
}
.nx-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--fg) var(--pct), var(--rule) var(--pct)); }
.nx-range::-moz-range-track { height: 2px; background: var(--rule); }
.nx-range::-moz-range-progress { height: 2px; background: var(--fg); }
.nx-range::-webkit-slider-thumb { appearance: none; width: 34px; height: 24px; margin-top: -11px; background: var(--fg); clip-path: polygon(22px 0, 34px 0, 12px 100%, 0 100%); transition: transform var(--dur-ui) var(--ease-mech); }
.nx-range::-moz-range-thumb { width: 34px; height: 24px; border: 0; border-radius: 0; background: var(--fg); clip-path: polygon(22px 0, 34px 0, 12px 100%, 0 100%); }
.nx-range:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: var(--focus-offset); }
.nx-range:focus-visible::-webkit-slider-thumb { background: var(--focus); }
@media (hover: hover) { .nx-range:hover::-webkit-slider-thumb { transform: scale(1.08); } }
.nx-range:disabled { cursor: not-allowed; }
.nx-range:disabled::-webkit-slider-thumb { background: var(--fg-3); }

/* Form steps and stepper */
.nx-stepper { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 2px; margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.nx-stepper li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 32px;
	padding: 0 var(--s-3);
	background: var(--bg-2);
	color: var(--fg-2);
	font: 500 .6875rem/1.2 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}
.nx-stepper li[aria-current="step"] { background: var(--fg); color: var(--bg); }
.nx-stepper li.is-done { color: var(--fg); }
.nx-stepper li.is-done::before { content: "✓"; }
.nx-form__step { display: grid; gap: var(--s-5); }
.nx-form__step > legend { font: var(--w-h3) var(--t-h4)/1.25 var(--f-sans); color: var(--fg); margin-bottom: var(--s-2); }
.js .nx-form[data-steps] .nx-form__step:not(.is-current) { display: none; }
.nx-form__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.no-js .nx-form__nav [data-step-nav], html:not(.js) .nx-form__nav [data-step-nav] { display: none; }
.nx-form__note { font: 400 var(--t-small)/1.45 var(--f-sans); color: var(--fg-2); }
.nx-form__summary {
	padding: var(--s-4) var(--s-5);
	border-top: 2px solid var(--err);
	background: var(--bg-2);
}
.nx-form__summary h3, .nx-form__summary p:first-child { font: var(--w-strong) var(--t-body)/1.35 var(--f-sans); color: var(--fg); }
.nx-form__summary ul { margin-top: var(--s-2); padding-left: 1.1em; }
.nx-form__summary a { color: var(--err); }
.nx-form__success { display: grid; gap: var(--s-4); }
.nx-form__success h3 { font-size: var(--t-h3); max-width: none; }
.nx-form__success ol { padding-left: 1.2em; display: grid; gap: var(--s-2); }
.nx-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   FAQ / ACCORDION (details/summary styled as index rows; + becomes −)
   ========================================================================= */
.nx-faq { border-bottom: var(--bw) solid var(--rule); }
.nx-faq__item { border-top: var(--bw) solid var(--rule); }
.nx-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	min-height: 64px;
	padding: var(--s-4) 0;
	font: var(--w-h3) var(--t-h4)/1.3 var(--f-sans);
	list-style: none;
}
.nx-faq__q:focus-visible { outline-offset: 2px; }
.nx-faq__sign { position: relative; flex: none; width: 18px; height: 18px; }
.nx-faq__sign::before, .nx-faq__sign::after { content: ""; position: absolute; left: 0; top: calc(50% - .75px); width: 100%; height: 1.5px; background: currentColor; }
.nx-faq__sign::after { transform: rotate(90deg); }
details[open] > summary .nx-faq__sign::after { display: none; }
.nx-faq__a { padding: 0 0 var(--s-5); max-width: var(--measure); color: var(--fg); }
.nx-faq__a > * + * { margin-top: .8em; }
@media (hover: hover) { .nx-faq__q:hover { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } }
@supports selector(::details-content) {
	:root { interpolate-size: allow-keywords; }
	.nx-faq__item::details-content { height: 0; overflow: clip; transition: height var(--dur-cut) var(--ease-cut), content-visibility var(--dur-cut) allow-discrete; }
	.nx-faq__item[open]::details-content { height: auto; }
}

/* =========================================================================
   FIGURE · crop marks · plate caption · 47° machine band
   ========================================================================= */
.nx-figure { position: relative; margin: 0; }
.nx-figure__frame { position: relative; }
.nx-crop { position: absolute; inset: -12px; pointer-events: none; z-index: 1; }
.nx-crop::before, .nx-crop::after, .nx-crop > i::before, .nx-crop > i::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	border: 0 solid var(--rule);
	border-color: color-mix(in srgb, var(--fg) 45%, transparent);
}
.nx-crop::before { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.nx-crop::after { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.nx-crop > i::before { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.nx-crop > i::after { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.nx-plate {
	margin-top: var(--s-4);
	font: 400 var(--t-micro)/1.5 var(--f-mono);
	letter-spacing: .02em;
	color: var(--fg-2);
	max-width: 60ch;
}
.nx-plate b { font-weight: 600; color: var(--fg); }

/* The machine band: a clipped duplicate of the same photo, "as the machine sees it". */
.nx-band {
	position: absolute;
	inset: 0;
	pointer-events: none;
	clip-path: polygon(calc(var(--band-x, 40%) + var(--run)) 0, calc(var(--band-x, 40%) + var(--run) + var(--band-w, 14%)) 0, calc(var(--band-x, 40%) + var(--band-w, 14%)) 100%, var(--band-x, 40%) 100%);
}
.nx-band img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); filter: grayscale(1) brightness(.55) contrast(1.2); }
.nx-band__edge { position: absolute; inset: 0; pointer-events: none; }
.nx-band__label {
	position: absolute;
	left: calc(var(--band-x, 40%) + var(--run) * .55 + var(--band-w, 14%) * .5);
	top: 45%;
	transform: translateX(-50%);
	padding: 2px 6px;
	background: var(--ink);
	color: var(--cyan);
	font: 500 .6875rem/1.3 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	white-space: nowrap;
}
.nx-band__label.is-leak { color: var(--molten); }

/* =========================================================================
   VIDEO with pause control · media controls
   ========================================================================= */
.nx-video { position: relative; display: block; overflow: hidden; background: var(--ink); }
.nx-video video, .nx-video > picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
.nx-video__poster { position: absolute; inset: 0; transition: opacity 400ms var(--ease-mech); }
.nx-video.is-playing .nx-video__poster { opacity: 0; }
.nx-video__ctl { position: absolute; right: 8px; bottom: 8px; z-index: var(--z-stage-ui); display: flex; gap: var(--s-2); }
.nx-video__ctl .nx-iconbtn { --bg-2: rgb(8 9 14 / .72); --fg: var(--paper); --bg: var(--ink); --rule: rgb(241 238 230 / .28); color: var(--paper); }
.nx-video__ctl .nx-iconbtn:is([aria-pressed="true"], [data-paused="true"]) { background: var(--paper); color: var(--ink); }
.nx-mediactl { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* =========================================================================
   INDEX ROWS · INDEX + VIEWER · DRAFTING ENTRY
   ========================================================================= */
.nx-index { container-type: inline-size; margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.nx-index > li { margin: 0; }
.nx-index__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "title arrow" "meta arrow" "value value";
	align-items: center;
	gap: var(--s-1) var(--s-5);
	min-height: 64px;
	padding: var(--s-4) var(--s-3) var(--s-4) 0;
	border-top: var(--bw) solid var(--rule);
	color: var(--fg);
	text-decoration: none;
	transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech);
}
.nx-index__title { grid-area: title; font: var(--w-h3) var(--t-h4)/1.25 var(--f-sans); text-wrap: balance; }
.nx-index__meta { grid-area: meta; font: 400 var(--t-small)/1.45 var(--f-sans); color: var(--fg-2); }
.nx-index__meta--mono { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.nx-index__value { grid-area: value; font: 500 .8125rem/1.3 var(--f-mono); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.nx-index__arrow { grid-area: arrow; width: 20px; height: 20px; transition: transform var(--dur-ui) var(--ease-mech); }
.nx-index__row::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 1px;
	background: var(--fg);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-ui) var(--ease-mech);
}
.nx-index__row:focus-visible { outline-offset: -2px; }
.nx-index__row[aria-current] { box-shadow: inset 0 2px 0 var(--fg); }
@container (min-width: 640px) {
	.nx-index__row { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) auto auto; grid-template-areas: "title meta value arrow"; min-height: 72px; }
	.nx-index__value { text-align: right; }
}
@media (hover: hover) {
	a.nx-index__row:hover, button.nx-index__row:hover { background: var(--bg-2); padding-left: var(--s-3); }
	a.nx-index__row:hover .nx-index__arrow, button.nx-index__row:hover .nx-index__arrow { transform: translate(calc(3 * var(--u-x)), calc(3 * var(--u-y))); }
	a.nx-index__row:hover::after, button.nx-index__row:hover::after { transform: scaleX(1); }
}
.nx-index__row:focus-visible::after { transform: scaleX(1); }

.nx-iv { display: grid; gap: var(--gutter); }
.nx-iv__viewer { display: none; }
.nx-iv__thumb { width: 72px; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 1024px) {
	.nx-iv { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
	.nx-iv__list { grid-column: 1 / span 6; }
	.nx-iv__viewer { display: block; grid-column: 7 / -1; position: sticky; top: calc(var(--header-h) + var(--s-5)); aspect-ratio: var(--iv-ar, 4 / 5); overflow: hidden; clip-path: var(--clip-sheet); background: var(--bg-2); }
	.nx-iv__item { position: absolute; inset: 0; clip-path: polygon(0 0, 0 0, -100% 100%, -100% 100%); transition: clip-path 480ms var(--ease-cut); }
	.nx-iv__item.is-active { clip-path: polygon(0 0, 200% 0, 100% 100%, -100% 100%); z-index: 1; }
	.nx-iv__item.is-active.is-instant { transition: none; }
	.nx-iv__thumb { display: none; }
}

.nx-draft { position: relative; display: grid; gap: var(--s-3); color: var(--fg); text-decoration: none; }
.nx-draft__media { position: relative; overflow: hidden; clip-path: var(--clip-sheet); }
.nx-draft__sketch { position: absolute; inset: 0; color: var(--paper); background: rgb(8 9 14 / .55); clip-path: polygon(48% 0, 62% 0, 48% 100%, 34% 100%); opacity: 0; transition: opacity var(--dur-ui) var(--ease-ink); }
.nx-draft__title { font: var(--w-h3) var(--t-h4)/1.2 var(--f-sans); }
.nx-draft__meta { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-draft__hook { font-family: var(--f-serif); font-style: italic; color: var(--fg); }
.nx-draft:is(:hover, :focus-visible) .nx-draft__sketch { opacity: 1; }
.nx-draft:focus-visible { outline-offset: 6px; }

/* =========================================================================
   BREADCRUMBS · PAGINATION
   ========================================================================= */
.nx-crumbs { margin-bottom: var(--s-5); font: 400 var(--t-micro)/1.5 var(--f-mono); letter-spacing: .03em; color: var(--fg-2); }
.nx-crumbs ol { display: flex; flex-wrap: wrap; gap: .1em .5em; margin: 0; padding: 0; list-style: none; }
.nx-crumbs li { display: inline-flex; align-items: baseline; gap: .5em; }
.nx-crumbs li + li::before { content: "/"; color: var(--fg-3); }
.nx-crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; text-decoration: none; } /* WCAG 2.5.8 target ≥ 24 px */
.nx-crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: .2em; }
.nx-crumbs [aria-current="page"] { color: var(--fg); }

.nx-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font: 500 .8125rem/1 var(--f-mono); }
.nx-pagination :is(a, span) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 var(--s-2); color: var(--fg); text-decoration: none; }
.nx-pagination .current, .nx-pagination [aria-current] { background: var(--fg); color: var(--bg); }
.nx-pagination a:hover { text-decoration: underline; }

/* =========================================================================
   TABLES: spec · price · dated (stack into definition lists under 768px)
   ========================================================================= */
.nx-table { width: 100%; border-bottom: var(--bw) solid var(--rule); font-size: var(--t-body); }
.nx-table caption { text-align: left; padding-bottom: var(--s-3); font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-table :is(th, td) { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-top: var(--bw) solid var(--rule); text-align: left; vertical-align: top; }
.nx-table th { font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); font-weight: 500; }
.nx-table td.nx-num, .nx-table th.nx-num { text-align: right; font-family: var(--f-mono); }
.nx-table__price td { font-family: var(--f-mono); font-weight: 600; font-size: 1.125rem; }
.nx-table__updated { display: inline-block; margin-top: var(--s-3); font: 500 var(--t-micro)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
@media (max-width: 767px) {
	.nx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.nx-table, .nx-table tbody, .nx-table tr, .nx-table th, .nx-table td { display: block; width: 100%; }
	.nx-table tr { border-top: var(--bw) solid var(--rule); padding: var(--s-3) 0; }
	.nx-table :is(th, td) { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: var(--s-3); border-top: 0; padding: var(--s-1) 0; text-align: left !important; }
	.nx-table :is(th, td)[data-label]::before { content: attr(data-label); font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
	.nx-table tbody th { grid-template-columns: 1fr; font-size: var(--t-label); }
}

/* =========================================================================
   OWNER-VOICE NOTE · PULL QUOTE · RANGE BAR · HEAT CELL · HATCH · N-BAR
   ========================================================================= */
.nx-note {
	position: relative;
	padding: var(--s-6) var(--s-5) var(--s-5);
	background: var(--paper);
	color: var(--ink);
	border: var(--bw) solid var(--rule-light);
	transform: rotate(var(--tilt, -2deg));
	font-family: var(--f-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
	line-height: 1.38;
	max-width: 30ch;
}
.nx-note:nth-child(even) { --tilt: 2.5deg; }
.nx-note::before {
	/* the pin */
	content: "";
	position: absolute;
	left: 50%;
	top: 10px;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	background: var(--paper-2);
}
.nx-note__tag { display: block; margin-top: var(--s-4); font: 500 .6875rem/1.3 var(--f-mono); font-style: normal; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--steel-dark); }
html.rm .nx-note { transform: none; }

.nx-pullquote {
	font-size: var(--t-h3);
	font-weight: var(--w-h2);
	line-height: 1.12;
	letter-spacing: var(--tr-h3);
	max-width: 24ch;
	text-wrap: balance;
	margin: 0;
}
.nx-pullquote cite, .nx-pullquote footer { display: block; margin-top: var(--s-4); font: 500 var(--t-label)/1.3 var(--f-mono); font-style: normal; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }

.nx-rangebar { --lo: 25%; --hi: 70%; display: grid; gap: var(--s-2); }
.nx-rangebar__track { position: relative; height: 18px; border-bottom: var(--bw-2) solid var(--fg); }
.nx-rangebar__span { position: absolute; left: var(--lo); width: calc(var(--hi) - var(--lo)); top: 2px; bottom: 0; color: var(--sig); background: var(--hatch); border-inline: 2px solid var(--fg); }
.nx-rangebar__ends { display: flex; justify-content: space-between; gap: var(--s-4); font: 500 .75rem/1.3 var(--f-mono); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.nx-rangebar__ends b { color: var(--fg); font-weight: 600; }

.nx-heat { background: var(--hatch), var(--ink-2); color: var(--heat-0); }
.nx-heat[data-heat="1"] { color: var(--heat-1); }
.nx-heat[data-heat="2"] { color: var(--heat-2); }
.nx-heat[data-heat="3"] { color: var(--heat-3); }
.nx-heat[data-heat="4"] { color: var(--heat-4); }
.nx-hatch { background-image: var(--hatch); color: var(--leak); }

.nx-nbar {
	display: block;
	height: 6px;
	background: var(--n-grad);
	clip-path: polygon(calc(6px * var(--nx-cot)) 0, 100% 0, calc(100% - 6px * var(--nx-cot)) 100%, 0 100%);
}

/* =========================================================================
   DEMO SHELL · BEFORE/AFTER · METER CHIP · X-RAY FILM · TOAST
   ========================================================================= */
.nx-demo { position: relative; display: grid; gap: var(--s-4); container-type: inline-size; }
.nx-demo__stage { position: relative; overflow: hidden; background: var(--bg-2); aspect-ratio: var(--demo-ar, 16 / 9); }
.nx-demo__poster { position: absolute; inset: 0; }
.nx-demo__poster img { width: 100%; height: 100%; object-fit: cover; }
.nx-demo__start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: var(--z-stage-ui); }
.nx-demo.is-running .nx-demo__start, .nx-demo.is-running .nx-demo__poster { display: none; }
.nx-demo__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.nx-demo__hint { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .04em; color: var(--fg-2); }
.nx-demo__disclosure { font: 500 .75rem/1.45 var(--f-mono); color: var(--fg); }
.nx-demo__text:not(.is-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nx-demo__text.is-visible { padding: var(--s-5); background: var(--bg-2); max-width: var(--measure); }
.nx-demo__error { display: none; padding: var(--s-4); border-top: 2px solid var(--err); background: var(--bg-2); }
.nx-demo.is-error .nx-demo__error { display: block; }
.nx-demo[aria-busy="true"] .nx-demo__start .nx-btn__label::after { display: none; }
[data-engine-state="loading"] { cursor: progress; }

.nx-ba { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; --pos: 50%; }
.nx-ba__before, .nx-ba__after { display: block; }
.nx-ba__after { position: absolute; inset: 0; }
.nx-ba__handle {
	position: absolute;
	top: 0;
	left: 0;
	width: 6px;
	height: 140%;
	margin: -20% 0 0 -3px;
	background: var(--n-grad);
	transform-origin: 50% 50%;
	cursor: grab;
	z-index: var(--z-stage-ui);
}
.nx-ba__handle:focus-visible { outline: var(--bw-focus) solid var(--cyan); outline-offset: 3px; }
.nx-ba__label { position: absolute; top: var(--s-3); z-index: var(--z-stage-ui); padding: 2px 6px; background: var(--ink); color: var(--paper); font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.nx-ba__label--before { left: var(--s-3); }
.nx-ba__label--after { right: var(--s-3); }

.nx-meterchip {
	position: fixed;
	right: var(--margin); /* bible: bottom-right, clear of the reading column's start */
	bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
	z-index: var(--z-chip);
	display: flex;
	align-items: center;
	gap: var(--s-3);
	max-width: calc(100vw - 2 * var(--margin));
	padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
	background: var(--ink);
	color: var(--paper);
	border: var(--bw) solid var(--rule-dark);
	font: 500 .75rem/1.3 var(--f-mono);
	--fg: var(--paper); --bg: var(--ink); --bg-2: var(--ink-2); --rule: var(--rule-dark); --focus: var(--cyan);
	animation: nx-wipe-in var(--dur-cut) var(--ease-cut) backwards;
}

.nx-film { position: relative; display: block; background: #FAF9F5; padding: var(--s-3); transition: transform var(--dur-ui) var(--ease-mech); }
.nx-film__img { position: relative; overflow: hidden; }
.nx-film__img img { filter: grayscale(1) invert(1) contrast(1.2); }
.nx-film__img::after { content: ""; position: absolute; inset: 0; background: var(--indigo); mix-blend-mode: multiply; opacity: .55; }
.nx-film__hot { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 2px solid var(--molten); border-radius: 50%; z-index: 1; }
@media (hover: hover) { .nx-film:hover { transform: translateY(-4px); } }

.nx-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
	z-index: var(--z-dialog);
	padding: var(--s-3) var(--s-5);
	background: var(--ink-2);
	color: var(--paper);
	border: var(--bw) solid var(--rule-dark);
	font: 500 .8125rem/1.35 var(--f-mono);
	transform: translate(-50%, 0);
	pointer-events: none;
	max-width: calc(100vw - 2 * var(--margin));
	text-align: center;
	transition: opacity var(--dur-ui) var(--ease-mech), transform var(--dur-ui) var(--ease-mech);
}
.nx-toast:empty, .nx-toast.is-hidden { opacity: 0; transform: translate(-50%, 8px); visibility: hidden; transition: opacity var(--dur-ui) var(--ease-mech), transform var(--dur-ui) var(--ease-mech), visibility 0s linear var(--dur-ui); }
/* hidden = out of the hit-test and the accessibility tree, so it never "obscures" the footer links on phones */

/* =========================================================================
   SECTION SCAFFOLDS
   ========================================================================= */
.nx-section { position: relative; padding-block: var(--sec-y); }
.nx-section--tight { padding-block: var(--sec-y-tight); }
.nx-section--flush { padding-block: 0; }
/* The section after this one opens with a .ch-tl notch and is pulled up by --ch-v: keep that band clear. */
.nx-section--before-ch { padding-bottom: calc(var(--sec-y-tight) + var(--ch-v)); }
.nx-section--before-ch:not(.nx-section--tight) { padding-bottom: calc(var(--sec-y) + var(--ch-v)); }
.nx-hero { display: flex; flex-direction: column; justify-content: flex-end; min-height: 64svh; }
.nx-hero--hub { min-height: 88svh; }
.nx-hero--compact { min-height: 0; }
.nx-hero__inner { width: 100%; }

/* Closing CTA section (usually Indigo): FLAR 50 display, Molten primary, one text link, mono micro-copy. */
.nx-cta__title { --flar: 50; --volm: 40; font-size: var(--t-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); max-width: 20ch; }
.nx-cta__sub { margin-top: var(--s-5); }
.nx-cta__actions { margin-top: var(--s-7); }

/* Page titles: display size in heroes, a calmer H2 size on compact (legal / utility) heroes. */
.nx-page-title { max-width: 18ch; }
.nx-hero--compact .nx-page-title { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); max-width: 22ch; }
.nx-404__confession { margin-top: var(--s-5); }
.nx-404__home { margin-top: var(--s-6); }

/* Section heading pair: display 7–8 columns, lead offset into 8–12 (layout grid in layout.css). */
.nx-kicker-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }

/* Opt-in render deferral for long sections far below the fold (style/layout skipped until they near the
   viewport; cuts the first layout of very long pages). Never on a section that holds a ScrollTrigger pin,
   a sticky or fixed child, a tooltip near its edge, or anything that must overflow it (paint containment
   clips it). Set --defer-h to the section's typical height to keep the scrollbar honest. */
.nx-defer { content-visibility: auto; contain-intrinsic-size: auto var(--defer-h, 1200px); }

/* Media wipe (lib/reveal.js sets the polygon; this keeps the first paint honest without JS). */
[data-wipe] { display: block; }
[data-draw] path, [data-draw] line, [data-draw] polyline, [data-draw] circle { vector-effect: non-scaling-stroke; }

} /* end @layer components */