/* =========================================================================
   netex · X-Ray group · shared page components
   (Workflow X-Ray, Plant X-Ray, Method, Contact). Role tokens only; raw colours only inside SVG art.
   Hero scan figure · X-ray archive lightbox · sample Hours-Leak Map · work-order forms · slot picker ·
   funding table · contract sheet · stats rows · office maps.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- shared scaffolding ------------------------------------------------ */
.xr-sechead .nx-sechead__lead { max-width: 46ch; }
.xr-anchor { position: absolute; top: calc(-1 * var(--header-h)); }
.xr-tag { cursor: default; }
.xr-nw { white-space: nowrap; }
.nx-section { --bleed: calc((100vw - min(100vw - 2 * var(--margin), var(--max))) / 2); }

/* ---- hero (Workflow X-Ray, Plant X-Ray) -------------------------------------------------------------- */
.xr-hero { --hero-pad: var(--s-6); padding-bottom: calc(var(--ch-v) + var(--s-7)); }
.xr-hero__grid { row-gap: var(--s-7); align-items: start; }
.xr-hero__copy { display: grid; align-content: start; }
.xr-hero__h1 {
	max-width: 30ch;
	margin-bottom: var(--s-5);
	font-size: var(--t-h4);
	font-weight: var(--w-h3);
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--fg);
}
.xr-hero__display {
	max-width: 11ch;
	font-size: clamp(2.375rem, 1rem + 3.9vw, 4.75rem);
	font-weight: var(--w-display);
	line-height: var(--lh-display);
	letter-spacing: var(--tr-display);
	text-wrap: balance;
}
.xr-hero__display2 { max-width: 26ch; font-size: clamp(1.25rem, .95rem + 1.05vw, 1.875rem); margin-top: var(--s-3); }
.xr-hero__sub { margin-top: var(--s-5); max-width: 48ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.xp-hero__visit { margin-top: var(--s-4); font: 500 .8125rem/1.5 var(--f-mono); color: var(--sig); max-width: 52ch; }
.xr-hero__actions { margin-top: var(--s-6); }
.xr-hero .nx-eyebrow { margin-bottom: var(--s-3); }
.xr-hero .nx-crumbs { margin-bottom: var(--s-4); }
.xr-hero__media { margin-right: calc(-1 * var(--margin)); }
.xr-hero .xr-counter { padding-right: var(--margin); }

.xr-counter { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-top: var(--s-5); }
.xr-counter__readout { max-width: 22rem; }
.xr-counter__readout .nx-readout__value { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4.25rem); }
.xr-counter__side { display: grid; gap: var(--s-3); justify-items: start; max-width: 30rem; }
.xr-counter__how summary { font: 500 .8125rem/1.4 var(--f-mono); color: var(--link); text-decoration: underline; text-underline-offset: .2em; list-style: none; min-height: 32px; display: inline-flex; align-items: center; }
.xr-counter__how summary::-webkit-details-marker { display: none; }
.xr-counter__how ul { margin-top: var(--s-2); padding-left: 1.1em; display: grid; gap: var(--s-1); font: 400 .8125rem/1.5 var(--f-mono); color: var(--fg-2); }

@media (min-width: 1024px) {
	.xr-hero__copy { grid-column: 1 / span 6; }
	.xr-hero__media { grid-column: 7 / -1; margin-right: calc(-1 * var(--bleed)); }
	.xr-hero .xr-counter { padding-right: var(--bleed); }
	.xr-hero .xr-scan__box { aspect-ratio: 1.08; }
	.xr-hero .xr-scan__frame { inset: 0 auto 0 50%; height: 100%; aspect-ratio: 2400 / 1340; transform: translateX(calc(var(--fx) * -1%)); }
}


/* ---- s2 definition (a dictionary entry) ----------------------------------- */
.xr-def__entry { display: grid; gap: var(--s-4); }
.xr-def__term { max-width: none; font-size: var(--t-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); }
.xr-def__note { display: block; margin-top: var(--s-3); font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: var(--tr-label); color: var(--fg-2); }
.xr-def__text { font-family: var(--f-serif); font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem); line-height: 1.5; max-width: 56ch; }
.xr-def__body { margin-top: var(--s-6); max-width: 60ch; color: var(--fg); }
@media (min-width: 1024px) {
	.xr-def__entry { grid-column: 2 / span 8; }
	.xr-def__body { grid-column: 2 / span 6; }
}

/* ---- s6 terms ---------------------------------------------------------------------- */
.xr-terms__head { margin-bottom: var(--s-6); }
.xr-terms__link { margin-top: var(--s-5); }
@media (min-width: 1024px) {
	.xr-terms__head { grid-column: 1 / span 4; margin: 0; }
	.xr-contract { grid-column: 6 / -1; }
}

/* ---- s8 funding --------------------------------------------------------------------- */
.xr-funding__copy { display: grid; gap: var(--s-4); align-content: start; margin-bottom: var(--s-7); }
.xr-funding__p2 { max-width: 52ch; }
@media (min-width: 1024px) {
	.xr-funding__copy { grid-column: 1 / span 5; margin: 0; }
	.xr-funding__table { grid-column: 7 / -1; }
}

/* ---- s10 faq ---------------------------------------------------------------------------- */
.xr-faq__head { margin-bottom: var(--s-6); }
@media (min-width: 1024px) {
	.xr-faq__head { grid-column: 1 / span 4; margin: 0; position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
	.xr-faq__list { grid-column: 6 / -1; }
}

/* ---- s11 booking ------------------------------------------------------------------------ */
.xr-book .nx-wrap { row-gap: var(--s-7); }
.xr-book__copy { display: grid; gap: var(--s-4); align-content: start; }
.xr-book__copy h2 { max-width: 13ch; }
.xr-book__aside { font-size: var(--t-small); color: var(--fg-2); max-width: 40ch; }
.xr-book__aside a { color: var(--fg); }
@media (min-width: 1024px) {
	.xr-book__copy { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
	.xr-book__form { grid-column: 6 / -1; }
}

/* ---- small shared bits ---- */
.xr-sheets__code { font: 600 .75rem/1.3 var(--f-mono); letter-spacing: .06em; color: var(--sig); }
.xr-films__note { max-width: 70ch; margin: calc(-1 * var(--s-5)) 0 var(--s-7); font: 400 var(--t-small)/1.55 var(--f-sans); color: var(--fg-2); }

/* =========================================================================
   HERO SCAN (engine xray-scan): a photo, a 47° machine band, stamped labels
   ========================================================================= */
.xr-scan { position: relative; margin: 0; --fx: 58; }
.xr-scan__box { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink-2); }
.xr-scan__frame { position: absolute; inset: 0; }
.xr-scan__frame > picture, .xr-scan__frame > picture > img { display: block; width: 100%; height: 100%; }
.xr-scan__frame img { object-fit: cover; }

/* The machine band: what's under it is seen "as the machine sees it". Position = --b (0–100, % of the frame). */
.xr-scan__machine {
	--b: 66;
	--bw: 13%;
	--run: 26%; /* half the horizontal run of a 47° line across the frame: (1340/2400) × cot 47° ÷ 2 */
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	-webkit-backdrop-filter: grayscale(1) brightness(.55) contrast(1.2);
	backdrop-filter: grayscale(1) brightness(.55) contrast(1.2);
	background: rgb(8 9 14 / .06);
	clip-path: polygon(calc(var(--b) * 1% + var(--run)) 0, calc(var(--b) * 1% + var(--run) + var(--bw)) 0, calc(var(--b) * 1% - var(--run) + var(--bw)) 100%, calc(var(--b) * 1% - var(--run)) 100%);
}
.xr-scan__edge {
	position: absolute;
	inset: 0;
	background: var(--n-grad);
	clip-path: polygon(calc(var(--b) * 1% + var(--run) + var(--bw) - .3%) 0, calc(var(--b) * 1% + var(--run) + var(--bw)) 0, calc(var(--b) * 1% - var(--run) + var(--bw)) 100%, calc(var(--b) * 1% - var(--run) + var(--bw) - .3%) 100%);
}

/* Labels: a cyan ring on the object, a 47° leader, a stamped mono tag (Molten only for a cost). */
.xr-scan__labels { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.xr-scan__label { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.xr-scan__ring {
	position: absolute;
	left: -12px;
	top: -12px;
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--cyan);
	border-radius: 50%;
	background: rgb(8 9 14 / .25);
}
.xr-scan__label.is-leak .xr-scan__ring { border-color: var(--molten); }
.xr-scan__tag {
	position: absolute;
	left: 21px;
	bottom: 22px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 7px 3px 4px;
	background: var(--ink);
	color: var(--paper);
	font: 500 .6875rem/1.25 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	white-space: nowrap;
}
.xr-scan__tag::before {
	/* the 47° leader from the ring to the tag corner */
	content: "";
	position: absolute;
	left: -15px;
	bottom: -15px;
	width: 1.5px;
	height: 26px;
	background: var(--cyan);
	transform-origin: 50% 100%;
	transform: rotate(43deg);
}
.xr-scan__label.is-leak .xr-scan__tag { color: var(--molten); }
.xr-scan__label.is-leak .xr-scan__tag::before { background: var(--molten); }
.xr-scan__tag b { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; background: var(--cyan); color: var(--ink); font-weight: 600; letter-spacing: 0; }
.xr-scan__label.is-leak .xr-scan__tag b { background: var(--molten); }
.xr-scan__label[data-dir="sw"] .xr-scan__tag { left: auto; bottom: auto; right: 21px; top: 22px; }
.xr-scan__label[data-dir="sw"] .xr-scan__tag::before { left: auto; bottom: auto; right: -15px; top: -15px; transform-origin: 50% 0; }
.xr-scan__label[data-dir="se"] .xr-scan__tag { bottom: auto; left: 21px; top: 22px; }
.xr-scan__label[data-dir="se"] .xr-scan__tag::before { bottom: auto; left: -15px; top: -15px; transform-origin: 50% 0; transform: rotate(-43deg); }

/* JS: labels wait for the beam, then stamp. No JS / reduced motion / engine error: all visible. */
.js .xr-scan:not(.is-scanned) :is(.xr-scan__label, [data-scan-item]) { opacity: 0; }
.js .xr-scan:is(.is-static, [data-engine-state="error"]) :is(.xr-scan__label, [data-scan-item]) { opacity: 1 !important; }
.js .xr-scan:not(.is-scanning):not(.is-scanned):not([data-engine-state="error"]) .xr-scan__machine { opacity: 0; }
html.rm .xr-scan :is(.xr-scan__label, [data-scan-item]) { opacity: 1 !important; }

.xr-scan__legend { margin-top: var(--s-4); }
.xr-scan__cap { display: none; font: 400 var(--t-micro)/1.5 var(--f-mono); color: var(--fg-2); }
html.rm .xr-scan__cap { display: block; margin-bottom: var(--s-2); }
.xr-scan__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-4); margin: 0; padding: 0; list-style: none; counter-reset: xr; font: 500 .75rem/1.35 var(--f-mono); color: var(--fg-2); }
.xr-scan__list li { counter-increment: xr; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-2); align-items: baseline; }
.xr-scan__list li::before { content: counter(xr); display: inline-grid; place-items: center; height: 16px; background: var(--sig); color: var(--bg); font-weight: 600; font-size: .6875rem; }
.xr-scan__list li.is-leak::before { background: var(--leak); color: var(--ink); }

/* Phones: numbered rings on the photo, the words in the legend underneath. */
@media (max-width: 767px) {
	.xr-scan__tag { padding: 0; background: transparent; left: -8px; bottom: auto; top: -8px; }
	.xr-scan__tag > span, .xr-scan__tag::before { display: none; }
	.xr-scan__ring { display: none; }
	.xr-scan__tag b { min-width: 18px; height: 18px; border-radius: 50%; font-size: .625rem; box-shadow: 0 0 0 2px var(--ink); }
	.xr-scan__label:is([data-dir="sw"], [data-dir="se"]) .xr-scan__tag { right: auto; left: -8px; top: -8px; }
}
@media (min-width: 768px) {
	.xr-scan__list { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.xr-scan__legend:not(:has(.xr-scan__cap)) { margin: 0; }
}

/* =========================================================================
   X-RAY ARCHIVE (engine xray-archive): films clipped to a lit negatoscope
   ========================================================================= */
.xr-archive { container-type: inline-size; }
.xr-archive__filters { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.xr-archive__fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.xr-archive__fgroup > .nx-field__label { flex: 0 0 100%; }
@media (min-width: 600px) { .xr-archive__fgroup > .nx-field__label { flex: 0 0 auto; min-width: 9.5rem; } }
.xr-archive__light {
	--bg: color-mix(in srgb, var(--paper) 97%, var(--cyan));
	--bg-2: var(--paper-2);
	--fg: var(--ink); --fg-2: var(--steel-dark); --fg-3: var(--steel-dark);
	--rule: var(--rule-light); --link: var(--cyan-deep); --focus: var(--indigo); --sig: var(--cyan-deep); --leak: var(--molten-deep);
	position: relative;
	padding: clamp(var(--s-5), 3.5vw, var(--s-8)) clamp(var(--s-4), 3vw, var(--s-7));
	background: var(--bg);
	color: var(--fg);
	border: 1px solid rgb(8 9 14 / .3);
	color-scheme: light;
}
.xr-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	grid-auto-flow: row dense;
	gap: clamp(var(--s-6), 3vw, var(--s-8)) clamp(var(--s-4), 2.4vw, var(--s-6));
	margin: 0;
	padding: 0;
	list-style: none;
}
/* eight films read as two rows of four; the four plant films as two by two */
@container (min-width: 1200px) { .xr-archive__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 640px) { .xr-archive[data-set="plant"] .xr-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xr-film-li { min-width: 0; }
.xr-film-li[hidden] { display: none; }
.xr-film-li:has(> details[open]) { grid-column: 1 / -1; }

.xr-film { position: relative; }
.xr-film__sum { position: relative; display: grid; gap: var(--s-3); padding-top: 14px; cursor: pointer; list-style: none; color: var(--fg); transition: transform var(--dur-ui) var(--ease-mech); }
.xr-film__sum::-webkit-details-marker { display: none; }
.xr-film__sum:focus-visible { outline-offset: 6px; }
@media (hover: hover) { .xr-film:not([open]) .xr-film__sum:hover { transform: translateY(-4px); } }

/* steel clip */
.xr-film__clip { position: absolute; left: 50%; top: 0; z-index: 2; width: 46px; height: 22px; margin-left: -23px; border: 1.5px solid var(--steel-dark); border-bottom-width: 4px; background: var(--paper-3); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.xr-film__clip::after { content: ""; position: absolute; left: 50%; top: 4px; width: 14px; height: 4px; margin-left: -7px; background: var(--steel-dark); }

/* the film: radiograph treatment (grayscale → invert → contrast, Indigo multiply), Molten rings */
.xr-film__plate { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px rgb(8 9 14 / .55); container-type: inline-size; }
.xr-film__img, .xr-film__img picture, .xr-film__img img { display: block; width: 100%; height: 100%; }
.xr-film__img img { object-fit: cover; filter: grayscale(1) invert(1) contrast(1.2); }
.xr-film__img::after { content: ""; position: absolute; inset: 0; background: var(--indigo); mix-blend-mode: multiply; opacity: .55; pointer-events: none; }
.xr-film__hot { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 0; height: 0; }
.xr-film__hot i { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border: 2px solid var(--molten); border-radius: 50%; }
.xr-film__hot b {
	position: absolute;
	left: 20px;
	top: -26px;
	padding: 2px 5px;
	background: var(--ink);
	color: var(--paper);
	font: 500 .625rem/1.25 var(--f-mono);
	letter-spacing: .05em;
	text-transform: uppercase;
	width: max-content;
	max-width: 46cqw;
}
.xr-film__hot--below b { top: 12px; }
/* hotspots on the right half put their note on the left of the ring */
.xr-film__hot[style*="--x:5"] b, .xr-film__hot[style*="--x:6"] b, .xr-film__hot[style*="--x:7"] b, .xr-film__hot[style*="--x:8"] b, .xr-film__hot[style*="--x:9"] b { left: auto; right: 20px; }
.xr-film__ai { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 2px 6px; background: var(--ink-2); color: var(--paper); font: 500 .625rem/1.25 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.xr-film__edge { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); font: 500 .625rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.xr-film__note { color: var(--leak); }
.xr-film__cap { display: grid; gap: var(--s-1); }
.xr-film__title { font: var(--w-h3) 1.125rem/1.2 var(--f-sans); }
.xr-film__place { font: 400 var(--t-small)/1.4 var(--f-sans); color: var(--fg-2); }
.xr-film__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.xr-film__meta .nx-tag { color: var(--sig); }
.xr-film__open { margin-top: var(--s-2); color: var(--link); font: var(--w-ui) .9375rem/1.3 var(--f-sans); text-decoration: underline; text-underline-offset: .2em; }
.xr-film__open-off { display: none; }
.xr-film[open] .xr-film__open-on { display: none; }
.xr-film[open] .xr-film__open-off { display: inline; }

/* the report: a radiologist's sheet beside the film */
.xr-film__report { margin-top: var(--s-5); }
.xr-film[open] .xr-film__report { animation: nx-wipe-in var(--dur-cut) var(--ease-cut) backwards; }
.xr-film__rtitle { font-size: var(--t-h3); line-height: 1.1; margin-bottom: var(--s-4); }
.xr-film__rtitle span { display: block; margin-top: var(--s-1); font: 500 .75rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.xr-film__rows { margin: 0; container-type: inline-size; }
.xr-film__row { display: grid; gap: var(--s-1) var(--s-5); padding: var(--s-3) 0; border-top: var(--bw) solid var(--rule); }
.xr-film__row dt { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.xr-film__row dd { margin: 0; font-size: var(--t-body); line-height: 1.5; }
.xr-film__row--scene dd { font-family: var(--f-serif); font-style: italic; font-size: var(--t-lead); line-height: 1.4; }
.xr-film__row--hidden dd { color: var(--leak); font-weight: var(--w-strong); }
.xr-film__row--returned dd { font-weight: var(--w-strong); }
.xr-film__fine { display: block; margin-top: var(--s-2); font: 400 var(--t-small)/1.45 var(--f-sans); font-weight: 400; color: var(--fg-2); }
.xr-film__related { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline; }
@container (min-width: 520px) { .xr-film__row { grid-template-columns: 12rem minmax(0, 1fr); } }
@media (min-width: 900px) {
	.xr-film[open] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
	.xr-film[open] .xr-film__sum { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
	.xr-film[open] .xr-film__report { margin-top: 14px; }
}
.xr-archive__empty { padding: var(--s-6) 0; font-family: var(--f-serif); font-size: var(--t-lead); }
html.rm .xr-film[open] .xr-film__report { animation: none; }

/* =========================================================================
   SAMPLE HOURS-LEAK MAP (C-15)
   ========================================================================= */
.xr-map { container-type: inline-size; }
.xr-map__co { font: var(--w-h3) var(--t-h4)/1.3 var(--f-sans); margin-bottom: var(--s-4); }
.xr-map__table { font-size: .9375rem; }
.xr-map__table tbody th { font-weight: var(--w-strong); font-family: var(--f-sans); text-transform: none; letter-spacing: 0; color: var(--fg); font-size: .9375rem; }
.xr-map__proc { display: block; }
.xr-map__bar { display: block; height: 7px; margin-top: var(--s-2); width: var(--w); max-width: 100%; background: var(--hatch); color: var(--heat-2); border-left: 2px solid currentColor; }
.xr-map__bar[data-heat="1"] { color: var(--heat-1); }
.xr-map__bar[data-heat="2"] { color: var(--heat-2); }
.xr-map__bar[data-heat="3"] { color: var(--heat-3); }
.xr-map__bar[data-heat="4"] { color: var(--heat-4); }
.xr-map__table td.nx-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.xr-map__table tfoot th { font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.xr-map__total { font: 600 1.0625rem/1.3 var(--f-mono); color: var(--leak); }
.xr-map__formula { margin-top: var(--s-4); font: 400 .8125rem/1.55 var(--f-mono); color: var(--fg-2); max-width: 90ch; }
.xr-map__note { margin-top: var(--s-3); font-family: var(--f-serif); font-style: italic; font-size: 1.0625rem; max-width: 64ch; }
@media (max-width: 767px) {
	.xr-map__table tfoot tr { display: grid; grid-template-columns: 1fr; }
	.xr-map__table tfoot td { display: block; }
}

/* =========================================================================
   FUNDING TABLE · CONTRACT · STATS
   ========================================================================= */
.xr-fund th[scope="row"] { font: var(--w-strong) .9375rem/1.4 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--fg); }
.xr-fund caption { display: block; width: 100%; }
@media (max-width: 767px) { .xr-fund td { grid-template-columns: 1fr; gap: var(--s-1); } }
@media (min-width: 768px) { .xr-fund caption { display: table-caption; } .xr-fund th[scope="row"] { width: 46%; } }
.xr-fund__disclaimer { margin-top: var(--s-3); font: 400 var(--t-micro)/1.5 var(--f-mono); color: var(--fg-2); }

.xr-stats { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); container-type: inline-size; }
.xr-stats__row { display: grid; gap: var(--s-2) var(--gutter); padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); align-items: start; }
.xr-stats__value { font: 600 clamp(2rem, 1.3rem + 2.4vw, 3.5rem)/1.05 var(--f-mono); letter-spacing: -.03em; color: var(--fg); }
.xr-stats__text { font-size: var(--t-lead); font-family: var(--f-serif); line-height: 1.4; max-width: 40ch; }
.xr-stats__value--multi { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); white-space: nowrap; }
.xr-approx { display: inline-block; margin-right: .06em; font-family: var(--f-sans); font-weight: 500; }
.xr-stats__src .nx-source { text-decoration: none; padding: 0; color: var(--fg-2); }
@container (min-width: 760px) {
	.xr-stats__row { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); }
	.xr-stats__text, .xr-stats__src { padding-top: .35rem; }
}

.xr-contract { margin: 0; padding: var(--s-6) var(--s-6) calc(var(--s-6) + var(--ch-sheet) * .5); list-style: none; display: grid; gap: 0; }
.xr-contract__clause { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); }
.xr-contract__clause:first-child { border-top: 0; padding-top: 0; }
.xr-contract__no { font: 600 .875rem/1.6 var(--f-mono); color: var(--fg-2); }
.xr-contract__title { font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.25; margin-bottom: var(--s-2); padding-right: 7.5rem; }
.xr-contract__fine { margin-top: var(--s-2); font-size: var(--t-small); color: var(--fg-2); }
.xr-contract__stamp { position: absolute; right: 0; top: var(--s-5); border-color: var(--indigo); color: var(--indigo); font-size: .75rem; }
.xr-contract__clause:first-child .xr-contract__stamp { top: 0; }
/* narrow sheets: the stamp sits above the clause title instead of eating its line */
@media (max-width: 599px) {
	.xr-contract { padding-inline: var(--s-4); }
	.xr-contract__title { padding-right: 0; }
	.xr-contract__stamp { position: static; justify-self: start; grid-column: 2; grid-row: 1; margin-bottom: var(--s-1); }
	.xr-contract__clause > :not(.xr-contract__stamp, .xr-contract__no) { grid-column: 2; }
}

/* =========================================================================
   WORK-ORDER FORMS (f1, f2, f3) · slot picker
   ========================================================================= */
.xr-wo { container-type: inline-size; gap: var(--s-5); }
/* narrow work orders: the current step keeps its words, the others shrink to their number */
@container (max-width: 519px) {
	.xr-wo .nx-stepper { display: flex; counter-reset: st; }
	.xr-wo .nx-stepper li { counter-increment: st; flex: 0 0 40px; justify-content: center; padding: 0; font-size: 0; }
	.xr-wo .nx-stepper li::before { content: counter(st); font-size: .75rem; }
	.xr-wo .nx-stepper li.is-done::before { content: "✓"; }
	.xr-wo .nx-stepper li[aria-current="step"] { flex: 1 1 auto; justify-content: flex-start; padding: var(--s-1) var(--s-3); font-size: .6875rem; }
	.xr-wo .nx-stepper li[aria-current="step"]::before { content: counter(st) " ·"; font-size: inherit; }
}
.f-indigo .xr-wo.nx-sheet--active, .f-ink .xr-wo.nx-sheet--active, .f-ink-2 .xr-wo.nx-sheet--active { filter: drop-shadow(10px 10px 0 var(--ink)); }
.xr-wo .nx-sheet__head b { font-variant-numeric: tabular-nums; }
.xr-wo__row { display: grid; gap: var(--s-5) var(--s-5); }
@container (min-width: 600px) { .xr-wo__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xr-wo__row > :first-child:nth-last-child(3) { grid-column: 1 / -1; } }
.xr-chipset { display: grid; gap: var(--s-3); }
.xr-chipset .nx-chips { gap: var(--s-2); }
.xr-chipset--pain .nx-chip:last-child { border-style: dashed; }
.xr-chipset--pain > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.xr-wo .nx-form__step > legend { margin-bottom: var(--s-1); }
.xr-wo .nx-field__help { margin-top: -2px; }
.xr-wo textarea.nx-input { min-height: 7.5rem; }
.xr-wo .nx-counter { margin-top: -4px; }
.xr-prefill { padding: var(--s-4) var(--s-5); border-left: 2px solid var(--sig); background: var(--bg-2); font-size: var(--t-small); }
.xr-prefill__lines { margin: var(--s-2) 0; padding-left: 1.1em; font: 500 .75rem/1.6 var(--f-mono); }
.xr-wo__success { padding-top: var(--s-2); }
.xr-wo__stamp { display: flex; align-items: center; gap: var(--s-4); }
.xr-wo__no { font: 600 .875rem/1 var(--f-mono); letter-spacing: .06em; }
.xr-wo__next { padding-left: 1.2em; display: grid; gap: var(--s-2); }

.xr-slot { display: grid; gap: var(--s-4); margin-top: var(--s-3); padding: var(--s-5); border: 1.5px solid var(--fg); }
.xr-slot__title { font: var(--w-h3) var(--t-h4)/1.25 var(--f-sans); }
.xr-slot__status:empty { display: none; }
.xr-slot__status { font: 500 .8125rem/1.5 var(--f-mono); color: var(--ok); }
.xr-slot.is-sent .xr-chipset, .xr-slot.is-sent .nx-actions { display: none; }

.xr-slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 2px; }
.xr-slotgrid__day { position: relative; display: grid; place-items: center; min-height: 56px; padding: var(--s-2); background: var(--bg-2); border: 1px solid var(--rule); font: 500 .8125rem/1.25 var(--f-mono); text-align: center; cursor: pointer; }
.xr-slotgrid__day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.xr-slotgrid__day:has(input:checked) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.xr-slotgrid__day:has(input:focus-visible) { outline: var(--bw-focus) solid var(--focus); outline-offset: 2px; }

/* =========================================================================
   OFFICE MAPS (C-16): static OSM drawing + HTML labels + the N-bar pin
   ========================================================================= */
.xr-map-fig { margin: 0; }
.xr-osm { position: relative; overflow: hidden; background: var(--ink-2); border: 1px solid var(--rule); container-type: inline-size; }
.xr-osm img { display: block; width: 100%; height: 100%; }
.xr-osm__lbl { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font: 500 .625rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); white-space: nowrap; pointer-events: none; }
/* a map-style halo in the map's own ground colour, so street lines never strike through a place name */
.xr-osm__lbl { text-shadow: 0 0 2px var(--ink-2), 0 0 4px var(--ink-2), 0 0 6px var(--ink-2); }
.xr-osm__lbl--sea { font-style: italic; letter-spacing: .2em; }
/* labels near an edge grow inwards, so a narrow map never clips them */
.xr-osm__lbl--start { transform: translate(0, -50%); }
.xr-osm__lbl--end { transform: translate(-100%, -50%); }
.xr-osm__lbl--road { color: var(--paper-72); }
.xr-osm__pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.xr-osm__bar { position: absolute; left: -3px; bottom: 0; width: 6px; height: 44px; background: var(--n-grad); transform-origin: 50% 100%; transform: rotate(43deg); box-shadow: 0 0 0 2px var(--ink); }
.xr-osm__bar::after { content: ""; position: absolute; left: -3px; bottom: -6px; width: 12px; height: 12px; border: 2px solid var(--cyan); border-radius: 50%; background: var(--ink); }
.xr-osm__pinlbl { position: absolute; left: 34px; bottom: 30px; padding: 3px 8px; background: var(--paper); color: var(--ink); font: 600 .6875rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.xr-osm__attr { margin-top: var(--s-2); font: 400 var(--t-micro)/1.4 var(--f-mono); color: var(--fg-2); }
/* narrow maps: a pin in the right half points its 47° leader down-left (the same line, the other end), label at its tip */
@container (max-width: 560px) {
	.xr-osm__lbl { font-size: .5625rem; letter-spacing: .08em; }
	.xr-osm__pin--right .xr-osm__bar { transform: rotate(223deg); }
	.xr-osm__pin--right .xr-osm__pinlbl { left: auto; bottom: auto; right: 34px; top: 30px; }
}

/* =========================================================================
   Print: sheets read as documents
   ========================================================================= */
@media print {
	.xr-scan__machine, .xr-archive__filters, .xr-slot { display: none !important; }
	.xr-film__report { display: block !important; }
}

} /* end @layer pages */

/* Phones: the hero's primary button a size down, so the Molten stays under 5% of the first screen (§1). */
@layer pages {
	@media (max-width: 479px) {
		:is(.xr-hero, .me-hero, .ct-hero) .nx-btn--primary { min-height: 44px; padding: .6em 16px; font-size: .875rem; }
	}
}