/* eides.org — the pages beyond the first screen: header and footer additions, page openings, reports, instruments.
   Every colour, size, speed and easing is a token from tokens.css. */

/* Pages change like sheets in a set: the header holds still, the page crossfades (dur-move). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-move); animation-timing-function: var(--ease-instrument); }
.hdr { view-transition-name: hdr; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Arabic: never letter-spaced (it breaks the joins), and a touch more leading for the script. */
:root[lang="ar"] body, :root[lang="ar"] body * { letter-spacing: 0 !important; }
:root[lang="ar"] body { line-height: 1.65; }
[dir="rtl"] .ei-table th { text-align: right; }
[dir="rtl"] .ei-table td.ei-num, [dir="rtl"] .ei-table th.ei-num { text-align: left; }
[dir="rtl"] .ei-readout__value small { margin-left: 0; margin-right: var(--space-1); }
.ltr { direction: ltr; unicode-bidi: isolate; }
[hidden] { display: none !important; }

/* Header: the language switch, the current page, the section line */
.hdr__end { display: flex; align-items: center; gap: var(--space-4); }
.lang { font: 500 13px/1 var(--font-sans); color: var(--ink-muted); text-decoration: none; padding: var(--space-2) 0; transition: color var(--dur-tick) var(--ease-instrument); }
.lang:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: var(--stroke-rule); text-underline-offset: 8px; text-decoration-color: var(--ice-ink); }
.hdr__cut { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--stroke-rule); background: var(--ice-ink); transform: scaleX(0); transform-origin: left center; opacity: 1; pointer-events: none; }
[dir="rtl"] .hdr__cut { transform-origin: right center; }
.hdr.is-cut .hdr__cut { transform: scaleX(1); opacity: 0; transition: transform var(--dur-draw) var(--ease-draw), opacity var(--dur-move) var(--ease-instrument) var(--dur-draw); }
html.is-still .hdr__cut { display: none; }
@media (max-width: 859px) { .lang { font-size: 13px; } .hdr__end { gap: var(--space-3); } }
@media (max-width: 480px) { .lang__long { display: none; } }
@media (min-width: 481px) { .lang__short { display: none; } }

/* Footer: the sheet set */
.ftr__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--stroke-hair) solid var(--line); }
.ftr__nav a { color: var(--ink-muted); text-decoration: none; font-size: 13px; }
.ftr__nav a:hover { color: var(--ink); }

/* Cards that are links */
.card--link { color: inherit; text-decoration: none; transition: border-color var(--dur-tick) var(--ease-instrument), background-color var(--dur-tick) var(--ease-instrument); }
.card--link:hover { border-color: var(--line-strong); }
.card--link:hover .card__go { color: var(--ink); }
.card__go { margin-top: auto; padding-top: var(--space-2); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); transition: color var(--dur-tick) var(--ease-instrument); }

/* A page's opening */
.phead { padding-block: var(--space-16) var(--space-12); display: grid; gap: var(--space-4); }
.phead__label { margin: 0; font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.phead__h { margin: 0; font: 600 clamp(36px, 5.2vw, 56px)/1.02 var(--font-sans); letter-spacing: -0.025em; max-width: 20ch; text-wrap: balance; }
.phead__lead { margin: 0; font: 400 17px/1.5 var(--font-sans); color: var(--ink-muted); max-width: 60ch; }
.phead .ei-chip { font-size: 11px; }

/* Reveal once */
[data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-draw) var(--ease-instrument), transform var(--dur-draw) var(--ease-instrument); }
[data-reveal].is-in { opacity: 1; transform: none; }
html.is-still [data-reveal], html.no-js [data-reveal] { opacity: 1; transform: none; transition: none; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-draw) var(--ease-draw); }
.is-in .draw { stroke-dashoffset: 0; }
html.is-still .draw { stroke-dashoffset: 0; transition: none; }

/* Section: a heading row in label style, then its content */
.sec { padding-block: var(--space-16); border-top: var(--stroke-hair) solid var(--line); }
.sec__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); max-width: 62ch; }
.sec__label { margin: 0; font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.sec__h { margin: 0; font: 600 clamp(28px, 3.4vw, 40px)/1.08 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.sec__p { margin: 0; font: 400 17px/1.5 var(--font-sans); color: var(--ink-muted); }
.prose p { margin: 0 0 var(--space-4); max-width: 64ch; color: var(--ink-muted); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

/* The end of every page: the one call to action */
.end { padding-block: var(--space-24); }
.end__in { display: grid; gap: var(--space-4); justify-items: start; padding-top: var(--space-12); border-top: var(--stroke-rule) solid var(--ink); }
.end__h { margin: 0; font: 600 clamp(28px, 3.6vw, 40px)/1.05 var(--font-sans); letter-spacing: -0.02em; max-width: 22ch; }
.end__p { margin: 0; max-width: 56ch; color: var(--ink-muted); font-size: 17px; }

/* Facts in a row, like a model frame's bar, outside a frame */
.facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.facts b { color: var(--ink); font-weight: 500; }

/* Readouts in a row */
.readrow { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.readrow .ei-readout__value { font-size: clamp(32px, 3.4vw, 44px); }
.ei-readout__value .u { font-size: 0.5em; color: var(--ink-muted); margin-inline-start: var(--space-1); letter-spacing: 0; }
:root[lang="ar"] .statement h1 { line-height: 1.15; }

/* The plot instrument: a survey drawing, north up. Ink for the boundary, ice for what the tool computes,
   laser only for the control point. */
.plot { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--font-mono); }
.pl-grid line { stroke: var(--line); stroke-width: var(--stroke-hair); }
.pl-grid line.m { stroke: var(--line-strong); stroke-opacity: 0.45; }
.pl-gl { font-size: 10px; fill: var(--ink-faint); letter-spacing: 0.06em; }
.pl-road path { fill: none; stroke: var(--line-strong); stroke-width: var(--stroke-hair); }
.pl-road__edge { stroke-dasharray: 6 5; }
.pl-road__t { font-size: 10px; fill: var(--ink-faint); text-anchor: middle; dominant-baseline: middle; letter-spacing: 0.08em; text-transform: uppercase; }
.pl-line { fill: var(--surface-100); fill-opacity: 0.55; stroke: var(--ink); stroke-width: var(--stroke-rule); stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-draw) var(--ease-draw), fill-opacity var(--dur-move) var(--ease-instrument); }
.pl-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: help; pointer-events: stroke; }
.pl-len { font-size: 11px; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--dur-move) var(--ease-instrument); transition-delay: calc(500ms + var(--i) * 60ms); pointer-events: none; }
.pl-pt { opacity: 0; transform-box: fill-box; transition: opacity var(--dur-move) var(--ease-instrument); transition-delay: calc(var(--i) * 110ms); cursor: help; outline: none; }
.pl-pt .pl-hit { fill: transparent; stroke: none; }
.pl-pt rect { fill: var(--surface-100); stroke: var(--ink); stroke-width: var(--stroke-rule); }
.pl-pt .ring { fill: none; stroke: var(--laser); stroke-width: var(--stroke-rule); stroke-linecap: round; }
.pl-pt .dot { fill: var(--laser); }
.pl-pt:hover rect, .pl-pt:focus-visible rect { fill: var(--ice); stroke: var(--ice-ink); }
.pl-id { font-size: 11px; fill: var(--ink-muted); text-anchor: middle; font-weight: 500; }
.pl-pt.is-control .pl-id { fill: var(--laser-ink); }
.pl-zone { fill: var(--ice-tint); fill-opacity: 0; stroke: var(--ice-ink); stroke-width: var(--stroke-rule); stroke-dasharray: 5 4; opacity: 0; transition: opacity var(--dur-draw) var(--ease-instrument), fill-opacity var(--dur-draw) var(--ease-instrument); }
.pl-dim { fill: none; stroke: var(--ice-ink); stroke-width: var(--stroke-hair); opacity: 0; transition: opacity var(--dur-move) var(--ease-instrument) 300ms; }
.pl-dim__t { font-size: 11px; fill: var(--ice-ink); opacity: 0; transition: opacity var(--dur-move) var(--ease-instrument) 300ms; }
.pl-area text { text-anchor: middle; opacity: 0; transition: opacity var(--dur-move) var(--ease-instrument); }
.pl-area__v { font-size: 20px; font-weight: 500; fill: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pl-area__v.b { fill: var(--ice-ink); }
.pl-area__l { font-size: 10px; fill: var(--ink-muted); letter-spacing: 0.12em; text-transform: uppercase; }
.pl-north path { fill: var(--ink); }
.pl-north text, .pl-scale text { font-size: 10px; fill: var(--ink-muted); text-anchor: middle; }
.pl-scale path { fill: none; stroke: var(--ink); stroke-width: var(--stroke-hair); }
[data-stage="1"] .pl-pt, [data-stage="2"] .pl-pt, [data-stage="3"] .pl-pt { opacity: 1; }
[data-stage="2"] .pl-line, [data-stage="3"] .pl-line { stroke-dashoffset: 0; }
[data-stage="2"] .pl-len, [data-stage="3"] .pl-len { opacity: 1; }
[data-stage="2"] .pl-area .a { opacity: 1; transition-delay: 700ms; }
[data-stage="3"] .pl-zone { opacity: 1; fill-opacity: 0.85; }
[data-stage="3"] .pl-dim, [data-stage="3"] .pl-dim__t { opacity: 1; }
[data-stage="3"] .pl-area .b { opacity: 1; transition-delay: 400ms; }
[data-stage="3"] .pl-line { fill-opacity: 0.3; }
html.is-still .plot * { transition: none !important; }

/* A frame that holds the plot */
.plot-frame .ei-frame__view { height: clamp(320px, 62vh, 620px); background: var(--surface-200); }
.plot-frame .ei-frame__hud { inset-inline-start: var(--space-4); inset-inline-end: auto; left: auto; transition: opacity var(--dur-move) var(--ease-instrument); }
[dir="ltr"] .plot-frame .ei-frame__hud { left: var(--space-4); }
.ei-frame__hud.is-hidden { opacity: 0; pointer-events: none; }

/* A story: an instrument held on the bench (sticky) while the steps pass beside it */
.story { padding-block: var(--space-8) var(--space-16); }
.story__grid { display: grid; gap: var(--space-8); }
.story__bench { position: sticky; top: calc(var(--hdr-h) + var(--space-3)); z-index: 2; align-self: start; }
.story__h { margin: 0 0 var(--space-6); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { display: grid; gap: var(--space-4); align-content: start; min-height: 62svh; padding-block: var(--space-8); border-top: var(--stroke-hair) solid var(--line); opacity: 0.38; transition: opacity var(--dur-move) var(--ease-instrument); }
.step.is-active { opacity: 1; }
.step--sub { border-top-style: dashed; }
.step:last-child { min-height: 72svh; }
.step__n { margin: 0; font: 500 24px/1.1 var(--font-mono); letter-spacing: -0.01em; color: var(--ink-faint); font-variant-numeric: tabular-nums; min-height: 1.1em; }
.step.is-active .step__n { color: var(--ink); }
.step__h { margin: 0; font: 600 clamp(24px, 2.6vw, 28px)/1.15 var(--font-sans); letter-spacing: -0.015em; }
.step__p { margin: 0; color: var(--ink-muted); font-size: 17px; max-width: 52ch; }
html.is-still .step { opacity: 1; }
@media (min-width: 860px) {
  .story__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-12); }
  .story__bench { top: calc(var(--hdr-h) + var(--space-8)); }
  .step { padding-block: var(--space-12); }
}
@media (max-width: 859px) {
  .story__bench { top: var(--hdr-h); margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2) var(--gutter); background: color-mix(in srgb, var(--surface-000) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .story .ei-frame__view { height: 38svh !important; }
  .story .ei-frame__bar { padding: var(--space-2) var(--space-3); }
  .step { min-height: 58svh; }
}
.method-frame .ei-frame__view { height: clamp(360px, 64vh, 640px); }
.method-frame .ei-frame__view canvas { width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.method-frame .ei-frame__hud { left: auto; right: var(--space-4); }
.datum.is-handed { transition: opacity var(--dur-move) var(--ease-instrument); }
.plot-host { position: absolute; inset: 0; }
.plot-frame .ei-frame__view { position: relative; overflow: hidden; }   /* the survey grid stops at the frame */
.readrow .ei-readout { background: var(--surface-100); }

/* Disciplines: a ruled list, like a drawing register */
.disc { list-style: none; margin: 0; padding: 0; border-top: var(--stroke-rule) solid var(--ink); }
.disc li { display: grid; grid-template-columns: 3.5ch minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding-block: var(--space-4); border-bottom: var(--stroke-hair) solid var(--line); align-items: baseline; }
.disc__n { font: 400 13px/1.4 var(--font-mono); color: var(--ink-faint); }
.disc__a { font: 600 20px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.disc__b { grid-column: 2; color: var(--ink-muted); }
@media (min-width: 860px) { .disc li { grid-template-columns: 3.5ch minmax(0, 1fr) minmax(0, 1fr); } .disc__b { grid-column: auto; } }

/* Work: report cards and the region map */
.work { display: grid; gap: var(--space-6); padding-bottom: var(--space-16); }
.report-card { display: grid; gap: var(--space-6); padding: var(--space-6); background: var(--surface-100); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); color: inherit; text-decoration: none; transition: border-color var(--dur-tick) var(--ease-instrument); }
.report-card:hover { border-color: var(--line-strong); }
.report-card:hover .card__go { color: var(--ink); }
@media (min-width: 860px) { .report-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; padding: var(--space-8); } }
.report-card__fig { background: var(--surface-200); border: var(--stroke-hair) solid var(--line); aspect-ratio: 3 / 2; display: grid; place-items: center; }
.report-card__body { display: grid; gap: var(--space-4); }
.report-card__label { margin: 0; display: flex; align-items: center; gap: var(--space-3); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; color: var(--ink-muted); }
.report-card__h { margin: 0; font: 600 clamp(24px, 2.6vw, 28px)/1.15 var(--font-sans); letter-spacing: -0.015em; }
.thumb { width: 100%; height: 100%; }
.thumb__b { fill: var(--surface-100); stroke: var(--ink); stroke-width: var(--stroke-rule); stroke-linejoin: round; }
.thumb rect { fill: var(--surface-100); stroke: var(--ink); stroke-width: var(--stroke-rule); }
.thumb__c { fill: none; stroke: var(--laser); stroke-width: var(--stroke-rule); }
.report-next { padding: var(--space-6); border: var(--stroke-hair) dashed var(--line-strong); border-radius: var(--radius-1); display: grid; gap: var(--space-2); }
.report-next p { margin: 0; color: var(--ink-muted); max-width: 64ch; }
.map-frame .ei-frame__bar { flex-wrap: wrap; }
.ei-frame__src { font: 400 11px/1.2 var(--font-mono); color: var(--ink-faint); }
.map-host { background: var(--surface-200); }
.map { display: block; width: 100%; height: auto; }
.map__land { fill: var(--surface-100); stroke: var(--line-strong); stroke-width: var(--stroke-hair); vector-effect: non-scaling-stroke; }
.map__t { font: 500 13px var(--font-sans); fill: var(--ink); }
.map__m { text-decoration: none; }
.map__hit { fill: transparent; stroke: none; }
.map__m:hover .map__t { fill: var(--ice-ink); text-decoration: underline; }
.map__ring { fill: var(--surface-100); stroke: var(--ice-ink); stroke-width: var(--stroke-rule); }
.map__m--mandate .map__t { fill: var(--ink-muted); }
.map .ring, .map .tick { fill: none; stroke: var(--ink); stroke-width: var(--stroke-rule); stroke-linecap: round; }
.map .dot { fill: var(--laser); }
.map__m { opacity: 0; transition: opacity var(--dur-move) var(--ease-instrument); transition-delay: calc(600ms + var(--i) * 160ms); }
.is-in .map__m, html.is-still .map__m { opacity: 1; }
.map__land { fill-opacity: 0; transition: fill-opacity var(--dur-draw) var(--ease-instrument) 500ms, stroke-dashoffset var(--dur-draw) var(--ease-draw); }
.is-in .map__land, html.is-still .map__land { fill-opacity: 1; }
.key { display: inline-flex; align-items: center; gap: var(--space-2); }
.key::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); border: var(--stroke-rule) solid var(--ink); }
.key--project::before { background: var(--laser); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--surface-100); }
.key--mandate::before { border-color: var(--ice-ink); }

/* The report */
.finding__grid { display: grid; gap: var(--space-6); }
@media (min-width: 1000px) { .finding__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.finding__side { display: grid; gap: var(--space-4); }
.ctl__note { text-transform: none; letter-spacing: 0; font: 400 13px/1.4 var(--font-sans); color: var(--ink-faint); }
.coords td, .coords th { padding: var(--space-2) var(--space-3); }
.coords .arc { color: var(--ink-faint); font-size: 11px; }
.brief { display: grid; gap: var(--space-8); }
.brief__line .of { color: var(--ink-faint); font-size: 15px; }
.ei-line__track--fit { background: var(--line); }
.spec { margin: 0; display: grid; border-top: var(--stroke-rule) solid var(--ink); }
.spec div { display: grid; gap: var(--space-1) var(--space-6); padding-block: var(--space-3); border-bottom: var(--stroke-hair) solid var(--line); }
@media (min-width: 720px) { .spec div { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); } }
.spec dt { color: var(--ink-muted); }
.spec dd { margin: 0; }
.items__line { margin-bottom: var(--space-6); max-width: 560px; }
.items td { vertical-align: top; }
.items__t { display: block; font-weight: 600; }
.items__n { display: block; color: var(--ink-muted); font-size: 13px; margin-top: var(--space-1); }
@media (max-width: 600px) { .items th:first-child, .items td:first-child { display: none; } }
.finding__grid > *, .story__grid > * { min-width: 0; }
.ctl__note { flex-basis: 100%; }
@media (max-width: 600px) { .coords { font-size: 13px; } .coords td, .coords th { padding: var(--space-2); } }
.tscroll { overflow-x: auto; min-width: 0; }
.finding__side { min-width: 0; }
.readrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.map-frame { max-width: 820px; }

/* Standards */
.toc { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); }
.toc a { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; padding: var(--space-2) var(--space-3); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-pill); background: var(--surface-100); }
.toc a:hover { color: var(--ink); border-color: var(--line-strong); }
.sec[id] { scroll-margin-top: calc(var(--hdr-h) + var(--space-4)); }
.sub { margin: var(--space-12) 0 var(--space-4); font: 600 20px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.prose-p { margin: 0 0 var(--space-4); color: var(--ink-muted); max-width: 64ch; }
.cite { font: 500 11px/1 var(--font-mono); color: var(--ice-ink); text-decoration: none; vertical-align: super; white-space: nowrap; }
.cite:hover { text-decoration: underline; }
.defs { margin: 0; display: grid; border-top: var(--stroke-rule) solid var(--ink); }
.defs div { display: grid; gap: var(--space-1) var(--space-6); padding-block: var(--space-3); border-bottom: var(--stroke-hair) solid var(--line); }
@media (min-width: 720px) { .defs div { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.defs dt b { font-family: var(--font-mono); font-weight: 500; margin-inline-end: var(--space-2); }
.defs dd { margin: 0; color: var(--ink-muted); }
.cde { display: grid; gap: var(--space-4); }
.cde__line { width: 100%; height: 40px; overflow: visible; }
.cde__path { fill: none; stroke: var(--nerve); stroke-width: 2; }
.cde__dot { fill: var(--surface-100); stroke: var(--nerve-ink); stroke-width: var(--stroke-rule); opacity: 0; transition: opacity var(--dur-move) var(--ease-instrument); transition-delay: calc(var(--i) * 220ms); }
.is-in .cde__dot, html.is-still .cde__dot { opacity: 1; }
.cde__states { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cde__states li { display: grid; gap: var(--space-1); align-content: start; }
.cde__states b { font-weight: 600; }
.cde__states span { color: var(--ink-muted); font-size: 13px; }
.cde__t { font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nerve-ink); font-style: normal; margin-top: var(--space-1); }
@media (max-width: 720px) { .cde__line { display: none; } .cde__states { grid-template-columns: 1fr 1fr; } }
.codes tr.is-selected td:first-child { color: var(--ice-ink); }
.lod { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; border-top: var(--stroke-rule) solid var(--ink); }
.lod li { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--stroke-hair) solid var(--line); }
.lod b { font: 500 13px/1.6 var(--font-mono); }
.lod span { color: var(--ink-muted); }
.lod li.is-ours { background: var(--ice-tint); padding-inline: var(--space-3); margin-inline: calc(-1 * var(--space-3)); }
.lod li.is-ours b, .lod li.is-ours span { color: var(--ice-ink); }
.mandates td { vertical-align: top; }
.mandates td:first-child { white-space: nowrap; }
.sources { margin: 0; padding-inline-start: 3ch; display: grid; gap: var(--space-1); font: 400 13px/1.4 var(--font-mono); color: var(--ink-faint); }
.sources a { color: var(--ink-muted); word-break: break-all; }

/* The container-name checker */
.namer { max-width: 860px; }
.namer__in { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-100); }
.namer__label { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.namer__input { font: 500 clamp(17px, 2.4vw, 24px)/1.2 var(--font-mono); letter-spacing: 0.02em; color: var(--ink); background: var(--surface-000); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); padding: var(--space-3) var(--space-4); width: 100%; }
.namer__input:focus { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.namer__fields { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--stroke-hair) solid var(--line); }
.namer__f { display: grid; grid-template-columns: minmax(0, 11rem) 7ch minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding-block: var(--space-2); border-bottom: var(--stroke-hair) solid var(--line); }
.namer__k { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.namer__v { font: 500 15px/1.3 var(--font-mono); }
.namer__m { color: var(--ink-muted); font-size: 13px; }
.namer__f--resolved .namer__v { color: var(--resolved-ink); }
.namer__f--selected .namer__v { color: var(--ice-ink); }
.namer__f--unresolved .namer__v { color: var(--laser-ink); }
.namer__f--unresolved .namer__m { color: var(--laser-ink); }
@media (max-width: 600px) { .namer__f { grid-template-columns: 7ch minmax(0, 1fr); } .namer__k { grid-column: 1 / -1; } .namer__in { padding: var(--space-4); } }

/* Contact: the request */
.contact { display: grid; gap: var(--space-12); padding-bottom: var(--space-24); }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); align-items: start; } }
.contact__main, .contact__side { min-width: 0; }
.rq { display: grid; gap: var(--space-8); }
.rq__set { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.rq__legend { padding: 0 0 var(--space-3); margin-bottom: var(--space-2); width: 100%; border-bottom: var(--stroke-rule) solid var(--ink); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.rq__f { display: grid; gap: var(--space-2); }
.rq__f > span { font-weight: 600; font-size: 15px; }
.rq__f > span i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--ink-faint); margin-inline-start: var(--space-2); }
.rq input:not([type="radio"]):not([type="checkbox"]), .rq select, .rq textarea { font: 400 15px/1.4 var(--font-sans); color: var(--ink); background: var(--surface-100); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); padding: var(--space-3); width: 100%; transition: border-color var(--dur-tick) var(--ease-instrument); }
.rq input:hover, .rq select:hover, .rq textarea:hover { border-color: var(--ink-muted); }
.rq input:focus, .rq select:focus, .rq textarea:focus { outline: var(--stroke-focus) solid var(--focus); outline-offset: 1px; }
.rq [aria-invalid="true"] { border-color: var(--laser-ink) !important; }
.rq textarea { resize: vertical; min-height: 6em; }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.seg__o { position: relative; }
.seg__o input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__o span { display: inline-block; padding: var(--space-2) var(--space-3); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-pill); font-size: 13px; color: var(--ink-muted); background: var(--surface-100); transition: background-color var(--dur-tick) var(--ease-instrument), color var(--dur-tick) var(--ease-instrument), border-color var(--dur-tick) var(--ease-instrument); }
.seg__o:hover span { color: var(--ink); border-color: var(--ink-muted); }
.seg__o input:checked + span { background: var(--ice-tint); color: var(--ice-ink); border-color: var(--ice-ink); }
.seg__o input:focus-visible + span { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.rq__privacy { margin: 0; font-size: 13px; color: var(--ink-muted); max-width: 60ch; padding-inline-start: var(--space-3); border-inline-start: var(--stroke-rule) solid var(--ice-ink); }
.rq__err { margin: 0; color: var(--laser-ink); font-size: 15px; }
.rq__go { justify-self: start; }
.receipt { outline: none; scroll-margin-top: calc(var(--hdr-h) + var(--space-4)); }
.receipt__in { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-100); justify-items: start; }
.receipt__label { margin: 0; font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.receipt__n { margin: 0; font: 500 clamp(28px, 4.4vw, 48px)/1 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.receipt .spec { width: 100%; }
.ei-btn[aria-disabled="true"] { color: var(--ink-faint); border-color: var(--line); cursor: not-allowed; }
.next { margin: var(--space-3) 0 var(--space-12); padding-inline-start: 3ch; display: grid; gap: var(--space-4); color: var(--ink-muted); }
.next b { color: var(--ink); }
.next li::marker { font: 500 13px var(--font-mono); color: var(--ink-faint); }
.office { margin: var(--space-3) 0 0; display: grid; border-top: var(--stroke-rule) solid var(--ink); }
.office div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--stroke-hair) solid var(--line); }
.office dt { color: var(--ink-muted); }
.office dd { margin: 0; }
.office dd.is-tbc { color: var(--laser-ink); font: 500 11px/1.8 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.contact__side .sec__label { margin: 0; }

/* Tools */
.tool-main { display: grid; gap: var(--space-6); padding-bottom: var(--space-16); }
.tool-main__head { display: grid; gap: var(--space-3); max-width: 64ch; }
.tool-main__head .sec__label { margin: 0; }
.tool-grid { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool { display: grid; gap: var(--space-3); align-content: start; justify-items: start; padding: var(--space-6); background: var(--surface-100); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); }
.tool__state { margin: 0; display: flex; gap: var(--space-3); align-items: center; }
.tool__keys { display: inline-flex; gap: var(--space-1); }
.tool__keys kbd { font: 500 11px/1 var(--font-mono); padding: 3px 5px; border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); color: var(--ink); }
.tool__h { margin: 0; font: 600 20px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.tool__p { margin: 0; color: var(--ink-muted); }

/* Glossary */
.gl { padding-bottom: var(--space-16); }
.gl__list { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--stroke-rule) solid var(--ink); }
.gl__list a { display: grid; gap: var(--space-1) var(--space-6); padding-block: var(--space-4); border-bottom: var(--stroke-hair) solid var(--line); text-decoration: none; color: inherit; }
@media (min-width: 760px) { .gl__list a { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); } }
.gl__list b { font-weight: 600; font-size: 17px; }
.gl__list span { color: var(--ink-muted); }
.gl__list a:hover b { color: var(--ice-ink); }
.gl-term { display: grid; gap: var(--space-8); padding-bottom: var(--space-8); max-width: 760px; margin-inline: auto; }
.wrap.gl-term { margin-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); }
.gl-term__body { margin: 0; font-size: 17px; color: var(--ink); max-width: 64ch; }
.gl-term__see { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--space-4) var(--space-6); background: var(--surface-100); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); color: inherit; text-decoration: none; }
.gl-term__see .sec__label { grid-column: 1 / -1; }
.gl-term__see:hover { border-color: var(--line-strong); }
.gl-term__rel ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gl-term__rel a, .gl-term__all a { display: inline-block; padding: var(--space-2) var(--space-3); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-pill); text-decoration: none; color: var(--ink-muted); background: var(--surface-100); font-size: 13px; }
.gl-term__rel a:hover, .gl-term__all a:hover { color: var(--ink); border-color: var(--line-strong); }
.gl-term__all { margin: 0; }

/* Tool chrome: a slim bar of actions, each with its key */
.tbar { position: sticky; top: var(--hdr-h); z-index: 5; padding-block: var(--space-2); background: color-mix(in srgb, var(--surface-000) 86%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: var(--stroke-hair) solid var(--line); }
.tbar__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.tbar__name { font: 600 15px/1 var(--font-sans); }
.tbar__sp { flex: 1; }
.tbar .ei-btn { font-size: 13px; padding: var(--space-2) var(--space-3); }
.tbar kbd, .sel kbd { font: 500 11px/1 var(--font-mono); padding: 2px 4px; border: var(--stroke-hair) solid currentColor; border-radius: var(--radius-1); opacity: 0.75; }
@media (max-width: 859px) { .tbar { position: static; } .tbar kbd { display: none; } }

/* The explorer: the model and its panel */
.xp { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-16); width: min(100% - 2 * var(--gutter), 1400px); }
@media (min-width: 1060px) { .xp { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } .xp__model { position: sticky; top: calc(var(--hdr-h) + 64px); } }
.xp__model, .xp__panel { min-width: 0; }
.tool-frame .ei-frame__view { height: clamp(360px, calc(100svh - 330px), 760px); }
@media (max-width: 1059px) { .tool-frame .ei-frame__view { height: clamp(320px, 90vw, 560px); } }
.xp__panel { display: grid; gap: var(--space-4); }
.xp__reads .ei-readout__value { font-size: 36px; }
.sel { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-100); border: var(--stroke-hair) solid var(--ice-ink); border-radius: var(--radius-1); }
.sel__id { margin: 0; display: flex; align-items: center; gap: var(--space-3); font: 500 15px/1 var(--font-mono); }
.sel__h { margin: 0; font: 600 20px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.sel__dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
.sel__dl dt { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.sel__dl dd { margin: 2px 0 0; font: 400 13px/1.4 var(--font-mono); }
.sel__move, .xp__clear { display: grid; grid-template-columns: auto minmax(0, 1fr) 8ch; align-items: center; gap: var(--space-3); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.sel__move b, .xp__clear b { color: var(--ink); font-weight: 500; text-align: end; text-transform: none; }
.sel__move input, .xp__clear input { width: 100%; accent-color: var(--ice-ink); }
.sel__hint { margin: 0; color: var(--ink-muted); font-size: 13px; padding: var(--space-3) var(--space-4); border: var(--stroke-hair) dashed var(--line-strong); border-radius: var(--radius-1); }
.xp__list { max-height: 520px; overflow: auto; border: var(--stroke-hair) solid var(--line); }
.xp__table { border: 0; }
.xp__table th { position: sticky; top: 0; z-index: 1; }
.xp__table tr { cursor: pointer; }
.xp__table td { padding: var(--space-2) var(--space-3); vertical-align: top; }
.xp__t { display: block; font-weight: 600; font-size: 13px; }
.xp__e { display: block; font: 400 11px/1.4 var(--font-mono); color: var(--ink-faint); }
.xp__table .is-was { color: var(--ink-faint); text-decoration: line-through; }
.xp__table tr:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: -2px; }
.datum--quiet { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.datum--quiet svg .ring, .datum--quiet svg .tick, .datum--quiet .datum__id { display: none; }
.datum--quiet svg .dot { fill: var(--laser-ink); }
.datum--quiet svg { transform: scale(2.4); }
.datum--clear .ring { stroke-dasharray: 3 3; }
.datum { cursor: pointer; }

/* Cost readout */
.cost { display: grid; gap: var(--space-6); }
.cost__in { display: grid; gap: var(--space-4); max-width: 820px; }
@media (min-width: 860px) { .cost__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.cost__unit { display: grid; grid-template-columns: minmax(0, 1fr) 6ch; gap: var(--space-2); }
.cost input { font: 400 15px/1.4 var(--font-mono); color: var(--ink); background: var(--surface-100); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); padding: var(--space-2) var(--space-3); width: 100%; }
.cost__m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.cost__m label { display: grid; gap: var(--space-1); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.cost .ei-readout__value { font-size: clamp(24px, 3vw, 36px); }

/* Command palette */
.pal { padding: 0; border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-2); background: var(--surface-100); color: var(--ink); width: min(560px, 100% - 2 * var(--gutter)); margin-top: 14vh; box-shadow: var(--shadow-float); }
.pal::backdrop { background: color-mix(in srgb, var(--surface-inverse) 30%, transparent); }
.pal__in { display: grid; }
.pal__q { font: 400 17px/1.4 var(--font-sans); padding: var(--space-4); border: 0; border-bottom: var(--stroke-hair) solid var(--line); background: transparent; color: var(--ink); outline: none; }
.pal__list { list-style: none; margin: 0; padding: var(--space-2); max-height: 50vh; overflow: auto; }
.pal__o { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-1); cursor: pointer; font-size: 15px; }
.pal__o.is-at { background: var(--ice-tint); color: var(--ice-ink); }
.pal__o.is-off { color: var(--ink-faint); cursor: default; }
.pal__k { font: 500 11px/1 var(--font-mono); padding: 3px 5px; border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); align-self: center; }
.pal__empty { margin: 0; padding: var(--space-4); color: var(--ink-muted); }
.ei-frame__facts b { text-transform: none; }

/* Model audit */
.privacy { margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-weight: 600; }
.au-open { position: relative; font-size: 13px; padding: var(--space-2) var(--space-3); }
.au-prog { position: absolute; inset-inline: var(--space-6); top: 50%; transform: translateY(-50%); display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; }
.au-prog__t { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.au-prog__track { width: min(360px, 100%); background: var(--line); }
.au-prog .ei-line__done { background: var(--nerve); transition: width var(--dur-move) var(--ease-instrument); }
.au-ready__v { font-size: 64px !important; }
.cats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cat { all: unset; box-sizing: border-box; display: grid; gap: var(--space-2); width: 100%; padding: var(--space-3) var(--space-4); background: var(--surface-100); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); cursor: pointer; transition: border-color var(--dur-tick) var(--ease-instrument); }
.cats--static .cat { cursor: default; }
.cat:hover { border-color: var(--line-strong); }
.cat[aria-pressed="true"] { border-color: var(--ice-ink); background: var(--ice-tint); }
.cat:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.cat__row { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.cat__s { font: 500 20px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.cat__f { font: 400 12px/1 var(--font-mono); color: var(--laser-ink); }
.cat.is-weak .cat__s { color: var(--laser-ink); }
.cat__track { position: relative; display: block; height: var(--stroke-rule); background: var(--laser); }
.cat__track .ei-line__done { display: block; position: absolute; left: 0; top: 0; bottom: 0; background: var(--resolved); }
[dir="rtl"] .cat__track .ei-line__done { left: auto; right: 0; }
.cat__rule { font-size: 12px; color: var(--ink-faint); }
.au-cn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border: var(--stroke-hair) dashed var(--line-strong); border-radius: var(--radius-1); }
.au-cn .sec__label { margin: 0; }
.au-cn b { font: 500 13px/1.3 var(--font-mono); word-break: break-all; }
.au-cn a { font-size: 13px; color: var(--ice-ink); }
.au-req { justify-self: start; }
.au-link a { word-break: break-all; color: var(--ice-ink); }
.keys__note { margin-inline-start: auto; color: var(--ink-faint); text-transform: none; letter-spacing: 0; font: 400 12px/1.2 var(--font-sans); }
.au-not { margin-top: var(--space-6); }
.drop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: color-mix(in srgb, var(--surface-000) 82%, transparent); border: var(--stroke-focus) dashed var(--ice-ink); }
.drop p { font: 600 clamp(20px, 3vw, 32px)/1.2 var(--font-sans); color: var(--ice-ink); }
.res { display: grid; gap: var(--space-6); padding-bottom: var(--space-16); }
.xp__table td.ei-id { white-space: nowrap; }
@media (max-width: 859px) {
  .tbar__in { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  [dir="rtl"] .tbar__in { -webkit-mask-image: linear-gradient(270deg, #000 85%, transparent); mask-image: linear-gradient(270deg, #000 85%, transparent); }
  .tbar__in::-webkit-scrollbar { display: none; }
  .tbar__in > * { flex: none; white-space: nowrap; }
  .tbar__sp, .tbar [data-act="palette"] { display: none; }
}

/* Plan to picture */
.st { display: grid; gap: var(--space-6); padding-block: var(--space-4) var(--space-16); width: min(100% - 2 * var(--gutter), 1400px); }
@media (min-width: 1100px) { .st { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .st__spec { position: sticky; top: calc(var(--hdr-h) + var(--space-4)); } }
.st__stage { min-width: 0; display: grid; gap: var(--space-3); }
.st-view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-200); }
.st-gl, .st-pic { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.st-gl { z-index: 2; touch-action: pan-y; cursor: grab; }
.st-gl:active { cursor: grabbing; }
.st-pic { z-index: 1; opacity: 0; transition: opacity var(--dur-move) var(--ease-instrument); }
.st-frame[data-mode="picture-in"] .st-pic, .st-frame[data-mode="picture"] .st-pic { opacity: 1; z-index: 3; }
.st-frame[data-mode="picture"].is-xray .st-gl { z-index: 4; }
/* In the picture, the building stays live under it: the picture lets the pointer through to it, and fades as the view leaves home. */
.st-frame[data-mode="picture"] .st-pic { pointer-events: none; transition: none; }
.st-frame[data-mode="picture"] .st-ann, .st-frame[data-mode="picture"] .st-stamp { transition: opacity var(--dur-tick) linear; }
.st-labels { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.st-room, .st-dim, .st-node { position: absolute; left: 0; top: 0; transition: opacity var(--dur-move) var(--ease-instrument); }
.st-room { display: grid; justify-items: center; gap: 2px; translate: -50% -50%; text-align: center; }
.st-room b { font: 600 12px/1.2 var(--font-sans); color: var(--ink); white-space: nowrap; }
.st-room span { font: 400 11px/1 var(--font-mono); color: var(--ink-muted); }
.st-dim { translate: -50% -50%; font: 400 11px/1 var(--font-mono); color: var(--ink-muted); background: var(--surface-200); padding: 1px 3px; }
.st-dim--v span { display: inline-block; transform: rotate(-90deg); }
.st-node { display: flex; align-items: center; gap: var(--space-2); translate: -6px -50%; }
.st-node i { width: 10px; height: 10px; border-radius: var(--radius-pill); border: var(--stroke-rule) solid currentColor; background: var(--surface-100); flex: none; }
.st-node span { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 6px; background: color-mix(in srgb, var(--surface-inverse) 82%, transparent); color: var(--on-inverse); border-radius: var(--radius-1); white-space: nowrap; }
.st-node--water { color: var(--ice); }
.st-node--power { color: var(--nerve); }
.st-hint { position: absolute; z-index: 6; left: var(--space-4); bottom: var(--space-3); margin: 0; max-width: min(60ch, calc(100% - 2 * var(--space-4))); font: 400 12px/1.4 var(--font-mono); color: var(--ink-muted); background: color-mix(in srgb, var(--surface-200) 80%, transparent); padding: 4px 8px; border-radius: var(--radius-1); pointer-events: none; }
.st-run { position: absolute; z-index: 7; left: var(--space-4); bottom: var(--space-4); width: min(360px, calc(100% - 2 * var(--space-4))); display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-100); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-2); box-shadow: var(--shadow-float); }
.st-run__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.st-run__steps li { display: grid; grid-template-columns: 10px 1fr auto; gap: var(--space-2); align-items: center; transition: color var(--dur-tick) var(--ease-instrument); }
.st-run__steps i { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--line-strong); }
.st-run__steps li.is-on { color: var(--ink); }
.st-run__steps li.is-on i { background: var(--nerve); box-shadow: 0 0 0 3px var(--nerve-tint); }
.st-run__steps li.is-done { color: var(--ink-muted); }
.st-run__steps li.is-done i { background: var(--resolved); }
.st-run__steps b { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-muted); }
.st-run__track { background: var(--line); }
.st-run__track .ei-line__done { background: var(--nerve); transition: width var(--dur-move) linear; }
/* After the picture lands: it is dimensioned as the plan was, a resolved datum draws at its top corner, the plot stamp comes in. */
.st-ann { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.st-ann svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-ann line { fill: none; stroke: var(--ice-ink); stroke-width: var(--stroke-hair); }
.st-ann .wit { transition: stroke-dashoffset var(--dur-move) var(--ease-instrument); }
.st-ann .dim { stroke-width: var(--stroke-rule); transition: stroke-dashoffset var(--dur-draw) var(--ease-draw); }
.st-ann .tk { stroke-width: var(--stroke-rule); opacity: 0; transition: opacity var(--dur-tick) var(--ease-instrument); }
.st-ann.is-in .tk { opacity: 1; }
.st-ann .st-dim { opacity: 0; color: var(--ice-ink); background: var(--surface-100); }
.st-ann .st-dim.is-in { opacity: 1; }
.st-datum { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; overflow: visible; }
.st-datum .ring { fill: none; stroke: var(--resolved); stroke-width: var(--stroke-rule); stroke-dasharray: 52; stroke-dashoffset: 52; transition: stroke-dashoffset var(--dur-draw) var(--ease-draw); }
.st-datum .tick { fill: none; stroke: var(--resolved); stroke-width: var(--stroke-rule); stroke-linecap: round; stroke-dasharray: 3; stroke-dashoffset: 3; transition: stroke-dashoffset var(--dur-move) var(--ease-draw) var(--dur-move); }
.st-datum .dot { fill: var(--resolved); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform var(--dur-move) var(--ease-instrument) var(--dur-move); }
.st-datum.is-in .ring, .st-datum.is-in .tick { stroke-dashoffset: 0; }
.st-datum.is-in .dot { transform: scale(1); }
.st-stamp { position: absolute; z-index: 6; right: var(--space-3); bottom: var(--space-3); margin: 0; display: flex; align-items: center; gap: var(--space-2); font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ink-muted); background: color-mix(in srgb, var(--surface-100) 84%, transparent); padding: var(--space-1) var(--space-2); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); opacity: 0; translate: 0 var(--space-1); transition: opacity var(--dur-move) var(--ease-instrument), translate var(--dur-move) var(--ease-instrument); }
.st-stamp i { width: var(--space-2); height: var(--space-2); background: var(--resolved); flex: none; }
.st-stamp.is-in { opacity: 1; translate: 0 0; }
html.is-still .st-ann line, html.is-still .st-ann .st-dim, html.is-still .st-datum .ring, html.is-still .st-datum .tick, html.is-still .st-datum .dot, html.is-still .st-stamp { transition: none; }
.st-cmp { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.st-cmp__l, .st-cmp__r { position: absolute; top: var(--space-3); font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink); background: color-mix(in srgb, var(--ink) 55%, transparent); padding: 4px 7px; border-radius: var(--radius-1); }
.st-cmp__l { left: var(--space-3); }
.st-cmp__r { right: var(--space-3); }
.st-cmp__h { all: unset; pointer-events: auto; position: absolute; top: 0; bottom: 0; width: 28px; margin-left: -14px; cursor: ew-resize; touch-action: none; }
.st-cmp__h::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--surface-100); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.st-cmp__h::after { content: ""; position: absolute; left: 3px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid var(--surface-100); background: color-mix(in srgb, var(--ink) 35%, transparent); transform: rotate(45deg); }
.st-cmp__h:focus-visible::after { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.st-honest { margin: 0; max-width: 90ch; }
.st-frame .keys button[aria-pressed="true"] { color: var(--ice-ink); }
html.is-ref .hdr, html.is-ref .phead, html.is-ref .st__spec, html.is-ref .st-honest, html.is-ref .ei-frame__bar, html.is-ref .keys, html.is-ref .st-hint, html.is-ref .st-labels, html.is-ref .end, html.is-ref .sec, html.is-ref footer, html.is-ref .ei-frame__ticks { display: none !important; }
html.is-ref .st-view { background: linear-gradient(#c9d6dd, #eaedec 60%); width: 1920px; aspect-ratio: auto; height: 1080px; }
html.is-ref .st { display: block; width: auto; padding: 0; margin: 0; }
html.is-ref .st-frame { border: 0; }
html.is-ref body { margin: 0; }

/* The specification */
.st__spec { display: grid; gap: var(--space-4); }
.sp { border: var(--stroke-hair) solid var(--line); margin: 0; padding: var(--space-4); background: var(--surface-100); border-radius: var(--radius-1); display: grid; gap: var(--space-3); min-width: 0; }
.sp__h { padding: 0; font: 600 15px/1.2 var(--font-sans); display: flex; gap: var(--space-2); align-items: baseline; }
.sp__h span { font: 500 11px/1 var(--font-mono); color: var(--ink-faint); }
.sp__p { margin: 0; color: var(--ink-muted); font-size: 13px; }
.sp__seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.sp__o, .sp__card { position: relative; display: block; cursor: pointer; }
.sp__o input, .sp__card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sp__o > span { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); transition: border-color var(--dur-tick) var(--ease-instrument), background-color var(--dur-tick) var(--ease-instrument); }
.sp__o svg { width: 40px; height: 40px; }
.sp__o rect, .sp__o path, .sp__o circle { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; }
.sp__o circle { fill: var(--laser); stroke: none; }
.sp__seg--light .sp__o .arc { stroke-dasharray: 2 3; }
.sp__o b { font: 500 12px/1 var(--font-mono); }
.sp__o input:checked + span { border-color: var(--ice-ink); background: var(--ice-tint); }
.sp__o input:checked + span rect, .sp__o input:checked + span path { stroke: var(--ice-ink); }
.sp__o input:focus-visible + span { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.sp__card:has(input:focus-visible) { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.sp__cards { display: grid; gap: var(--space-2); }
.sp__card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-2); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); transition: border-color var(--dur-tick) var(--ease-instrument), background-color var(--dur-tick) var(--ease-instrument); }
.sp__card:has(input:checked) { border-color: var(--ice-ink); background: var(--ice-tint); }
.sp__ct { display: grid; gap: 2px; }
.sp__ct b { font-size: 13px; font-weight: 600; }
.sp__ct span { font-size: 12px; color: var(--ink-muted); line-height: 1.35; }
.sp__sw { width: 52px; height: 52px; border-radius: var(--radius-1); border: var(--stroke-hair) solid var(--line); }
/* Material samples: the stone and plaster as they read at a glance. These are colours of materials, not of the interface. */
.sp__sw--limestone { background: repeating-linear-gradient(0deg, #d9c8a6 0 1px, transparent 1px 13px), repeating-linear-gradient(90deg, #d9c8a6 0 1px, transparent 1px 26px), #e7d9bd; }
.sp__sw--plaster { background: linear-gradient(#f1efe8 0 64%, #cdb994 64%); }
.sp__sw--basalt { background: repeating-linear-gradient(90deg, #9a7651 0 3px, transparent 3px 9px) 0 0 / 100% 30% no-repeat, repeating-linear-gradient(0deg, #2f3033 0 1px, transparent 1px 11px), #45464a; }
.sp__go { justify-content: center; }
.sp__after { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp__legend { padding: var(--space-4); border: var(--stroke-hair) dashed var(--line-strong); border-radius: var(--radius-1); display: grid; gap: var(--space-2); }
.sp__legend p { margin: 0; font-size: 13px; color: var(--ink-muted); display: flex; gap: var(--space-2); align-items: baseline; }
.lg { display: inline-block; width: 18px; height: 3px; flex: none; transform: translateY(-3px); }
.lg--water { background: var(--ice); }
.lg--power { background: var(--nerve); }
.sp kbd, .sp__after kbd { font: 500 11px/1 var(--font-mono); padding: 2px 4px; border: var(--stroke-hair) solid currentColor; border-radius: var(--radius-1); opacity: 0.75; }

/* Sun on the plot */
.su { display: grid; gap: var(--space-6); padding-block: var(--space-4) var(--space-16); width: min(100% - 2 * var(--gutter), 1400px); }
@media (min-width: 1100px) { .su { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .su__panel { position: sticky; top: calc(var(--hdr-h) + var(--space-4)); } }
.su__stage, .su__panel { min-width: 0; display: grid; gap: var(--space-3); }
.su__panel { gap: var(--space-4); }
.su-view { position: relative; aspect-ratio: 16 / 10; background: var(--surface-200); overflow: hidden; }
.su-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.su-view canvas:active { cursor: grabbing; }
.su-path { position: absolute; right: var(--space-3); top: var(--space-3); width: clamp(150px, 22%, 230px); height: auto; aspect-ratio: 1; background: color-mix(in srgb, var(--surface-100) 88%, transparent); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-float); padding: 4px; overflow: visible; touch-action: none; cursor: pointer; }
.su-ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.su-ring--in { stroke: var(--line); }
.su-c { font: 500 10px var(--font-mono); fill: var(--ink-muted); text-anchor: middle; }
.su-arc { fill: none; stroke-linecap: round; }
.su-arc--ref { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.su-arc--day { stroke: var(--ink); stroke-width: 1.8; }
.su-hr { fill: var(--surface-100); stroke: var(--ink); stroke-width: 1; }
.su-hr__t { font: 500 8px var(--font-mono); fill: var(--ink-muted); text-anchor: middle; }
.su-sun__dot { fill: var(--laser); }
.su-sun__halo { fill: var(--laser-tint); stroke: var(--laser); stroke-width: 1; }
.su-north { position: absolute; left: var(--space-4); top: var(--space-3); display: grid; justify-items: center; gap: 2px; font: 500 11px/1 var(--font-mono); color: var(--ink-muted); pointer-events: none; }
.su-north svg { width: 22px; height: 22px; fill: var(--ink); }
.su-ctl { gap: var(--space-3) var(--space-6); }
.su-ctl .ctl__range input[type="range"] { width: clamp(120px, 18vw, 260px); }
.su-ctl .ctl__btn kbd { margin-inline-start: var(--space-1); }
.su-places { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.su-reads .ei-readout__value { font-size: clamp(22px, 2.4vw, 30px); }
.su-now { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.su-now b { color: var(--ink); font-weight: 500; text-transform: none; }
.su-fac { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-100); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); }
.su-fac .sec__label { margin: 0; }
.su-fac ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.su-fac li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-3); align-items: baseline; }
.su-fac__n { font-weight: 600; font-size: 13px; }
.su-fac__n i { display: block; font: 400 11px/1.3 var(--font-mono); font-style: normal; color: var(--ink-faint); }
.su-fac__v { font: 500 15px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.su-fac__bar { grid-column: 1 / -1; position: relative; height: var(--stroke-rule); background: var(--line); }
.su-fac__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--laser); transition: width var(--dur-move) var(--ease-instrument); }
.su-fac__t { grid-column: 1 / -1; font: 400 11px/1 var(--font-mono); color: var(--ink-muted); }
@media (max-width: 700px) { .su-path { width: 120px; } }
.su-reads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-cmp__l, .st-cmp__r { transition: opacity var(--dur-tick) var(--ease-instrument); }

/* A featured tool: the picture and its invitation */
.feat { padding-bottom: var(--space-12); }
.feat--home { padding-block: 0 var(--space-16); }
.feat__in { display: grid; gap: 0; color: inherit; text-decoration: none; background: var(--surface-100); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); overflow: hidden; transition: border-color var(--dur-tick) var(--ease-instrument); }
.feat__in:hover { border-color: var(--line-strong); }
@media (min-width: 900px) { .feat__in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.feat__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-200); }
.feat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-draw) var(--ease-instrument); }
.feat__in:hover .feat__img img { transform: scale(1.03); }
.feat__body { display: grid; gap: var(--space-3); align-content: center; justify-items: start; padding: var(--space-6) var(--space-8); }
.feat__label { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.feat__h { font: 600 clamp(24px, 2.8vw, 34px)/1.1 var(--font-sans); letter-spacing: -0.02em; }
.feat__p { color: var(--ink-muted); max-width: 46ch; }
@media (max-width: 600px) { .st-hint { display: none; } .st-run { left: var(--space-2); bottom: var(--space-2); padding: var(--space-2) var(--space-3); } .st-run__steps li:not(.is-on) { display: none; } }

/* ---------- Tool settings: fields, the projection switch, sun extras ---------- */
.fld { display: grid; gap: var(--space-1); min-width: 0; }
.fld > span { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.fld input, .fld select, .fld textarea { font: 400 14px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface-100); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); padding: var(--space-2) var(--space-3); width: 100%; min-width: 0; transition: border-color var(--dur-tick) var(--ease-instrument); }
.fld textarea { font-size: 13px; resize: vertical; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--ink-muted); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: var(--stroke-focus) solid var(--focus); outline-offset: 1px; }
.su-tools { top: auto; bottom: var(--space-3); }
.su-own { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.su-own__note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--ink-faint); }
.su-turn { margin-top: var(--space-4); }
.su-warn { margin: var(--space-2) 0 0; font-size: 13px; color: var(--laser-ink); }

/* ---------- Tool cards: the isometric picture, the datum that snaps onto what the tool finds, the invitation ---------- */
.tcs { padding-bottom: var(--space-16); }
.tc-grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .tc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tc--wide { grid-column: 1 / -1; } }
@media (min-width: 1120px) { .tc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tc--wide { grid-column: span 2; } }
.tc { position: relative; display: grid; grid-template-rows: auto 1fr; color: inherit; text-decoration: none; background: var(--surface-100); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); overflow: hidden; transition: border-color var(--dur-tick) var(--ease-instrument), transform var(--dur-move) var(--ease-instrument); }
.tc:hover { border-color: var(--line-strong); }
.tc:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.tc__fig { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-200); }
.tc--wide .tc__fig { aspect-ratio: 16 / 9; }
.tc__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-wake) var(--ease-instrument); }
.tc:hover .tc__fig img, .tc:focus-visible .tc__fig img { transform: scale(1.035); }
/* Survey crosshair: two hairlines run in from the frame's edges to the datum, then the datum lands. */
.tc__x, .tc__y { position: absolute; background: var(--laser); opacity: 0.85; pointer-events: none; transition: transform var(--dur-draw) var(--ease-draw); }
.tc__x { left: 0; top: var(--y); width: var(--x); height: 1px; transform-origin: 0 50%; transform: scaleX(0); }
.tc__y { top: 0; left: var(--x); height: var(--y); width: 1px; transform-origin: 50% 0; transform: scaleY(0); }
[dir="rtl"] .tc__x { transform-origin: 0 50%; }
.tc:hover .tc__x, .tc:focus-visible .tc__x { transform: scaleX(1); }
.tc:hover .tc__y, .tc:focus-visible .tc__y { transform: scaleY(1); }
.tc__datum { position: absolute; left: var(--x); top: var(--y); width: 28px; height: 28px; margin: -14px 0 0 -14px; transform: scale(0); transition: transform var(--dur-move) var(--ease-instrument) 0ms; pointer-events: none; }
.tc:hover .tc__datum, .tc:focus-visible .tc__datum { transform: scale(1); transition-delay: 420ms; }
.tc__datum .ring { fill: none; stroke: var(--laser); stroke-width: 1.5; }
.tc__datum .tick { stroke: var(--laser); stroke-width: 1.5; }
.tc__datum .dot { fill: var(--laser); }
.tc__sheet { position: absolute; left: var(--space-3); bottom: var(--space-3); padding: 3px var(--space-2); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; color: var(--ink); background: color-mix(in srgb, var(--surface-100) 82%, transparent); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); }
[dir="rtl"] .tc__sheet { left: auto; right: var(--space-3); }
.tc__body { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); }
.tc--wide .tc__body { padding: var(--space-6) var(--space-8); }
@media (min-width: 1120px) {
  .tc--wide { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: none; }
  .tc--wide .tc__fig { aspect-ratio: auto; min-height: 100%; }
  .tc--wide .tc__body { align-content: center; }
  .tc--wide .tc__h { font-size: clamp(26px, 2.4vw, 34px); }
}
.tc__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tc__keys { display: inline-flex; gap: var(--space-1); }
.tc__keys kbd { font: 500 11px/1 var(--font-mono); padding: 3px 5px; border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); color: var(--ink-muted); }
.tc__h { margin: 0; font: 600 21px/1.2 var(--font-sans); letter-spacing: -0.015em; }
.tc__p { color: var(--ink-muted); font-size: 15px; line-height: 1.5; }
.tc__set { font-size: 13px; line-height: 1.5; color: var(--ink-muted); padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--line); }
.tc__set b { display: block; margin-bottom: 2px; font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.tc__go { display: inline-flex; justify-self: start; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-weight: 600; font-size: 15px; color: var(--ink); }
.tc__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform var(--dur-move) var(--ease-instrument); }
[dir="rtl"] .tc__go svg { transform: scaleX(-1); }
.tc:hover .tc__go svg { transform: translateX(4px); }
[dir="rtl"] .tc:hover .tc__go svg { transform: scaleX(-1) translateX(4px); }
.tcs__note { margin-top: var(--space-6); }
@media (prefers-reduced-motion: reduce) { .tc__fig img, .tc__x, .tc__y, .tc__datum, .tc__go svg { transition: none; } }

/* ---------- Requirements check ---------- */
.rq-legend { position: absolute; left: var(--space-3); bottom: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); pointer-events: none; }
.rq-sw { display: inline-block; width: 10px; height: 10px; margin-inline-end: var(--space-1); vertical-align: -1px; border: var(--stroke-hair) solid var(--line-strong); background: var(--surface-100); border-radius: 2px; }
.rq-sw--ok { background: var(--resolved); border-color: var(--resolved); }
.rq-sw--bad { background: var(--laser); border-color: var(--laser); }
.rq-reads .ei-readout__value { font-size: clamp(30px, 3vw, 40px); }
.rq-reads .u { font-size: 0.5em; color: var(--ink-faint); margin-inline-start: 4px; }
.rq-info { display: grid; gap: var(--space-2); }
.rq-info__note { margin: 0; font-size: 13px; color: var(--ink-faint); }
.rq-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); max-height: min(720px, 70vh); overflow: auto; }
.rq-spec { border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); background: var(--surface-100); }
.rq-spec.is-open { border-color: var(--line-strong); }
.rq-spec__head { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); background: none; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.rq-spec__head:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: -2px; }
.rq-spec__id { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; color: var(--ink-faint); }
.rq-spec__name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.rq-spec__count { grid-column: 1 / 3; font: 400 12px/1.3 var(--font-mono); color: var(--ink-muted); }
.rq-spec__track { grid-column: 1 / -1; height: 2px; background: var(--laser-tint); }
.rq-spec__track .ei-line__done { background: var(--resolved); transition: width var(--dur-draw) var(--ease-draw); }
.rq-spec.is-pass .rq-spec__track { background: var(--line); }
.rq-spec__body { padding: 0 var(--space-4) var(--space-4); display: grid; gap: var(--space-3); font-size: 13px; }
.rq-spec__app { margin: 0; color: var(--ink-muted); }
.rq-spec__app b { color: var(--ink); margin-inline-end: var(--space-1); }
.rq-spec__reqs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.rq-spec__note { margin: 0; color: var(--laser-ink); }
.rq-card { display: inline-block; min-width: 72px; font: 500 10px/1.6 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.rq-card--prohibited { color: var(--laser-ink); }
.rq-card--optional { color: var(--ink-faint); }
.rq-fails { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--stroke-hair) solid var(--line); max-height: 300px; overflow: auto; }
.rq-fail { display: grid; gap: 2px; padding: var(--space-2) var(--space-2); border-bottom: var(--stroke-hair) solid var(--line); cursor: pointer; }
.rq-fail:hover { background: var(--surface-200); }
.rq-fail.is-selected { background: var(--ice-tint); }
.rq-fail:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: -2px; }
.rq-fail--more { cursor: default; color: var(--ink-faint); }
.rq-fail__t { font-size: 13px; }
.rq-fail__e { font: 400 11px/1.4 var(--font-mono); color: var(--ink-faint); }
.rq-fail__r { color: var(--laser-ink); }
.rq-spec__acts, .rq-add { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rq-spec__acts .ei-btn, .rq-add .ei-btn { font-size: 13px; padding: var(--space-2) var(--space-3); }
.rq-add kbd { font: 500 11px/1 var(--font-mono); padding: 2px 4px; border: var(--stroke-hair) solid currentColor; border-radius: var(--radius-1); opacity: 0.75; }
/* The editor: a sheet over the page */
.rq-ed { width: min(860px, 100% - 2 * var(--space-4)); max-height: calc(100svh - 2 * var(--space-6)); padding: 0; color: var(--ink); background: var(--surface-100); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-2); box-shadow: var(--shadow-float); }
.rq-ed::backdrop { background: color-mix(in srgb, var(--surface-inverse) 55%, transparent); }
.rq-ed__in { display: grid; gap: var(--space-4); padding: var(--space-6); }
.rq-ed__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rq-ed__head h2 { margin: 0; font: 600 22px/1.2 var(--font-sans); letter-spacing: -0.01em; }
.rq-ed__head kbd { font: 500 11px/1 var(--font-mono); }
.rq-ed__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rq-ed__name, .rq-ed__desc { grid-column: 1 / -1; }
.rq-ed__set { margin: 0; padding: var(--space-4); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); display: grid; gap: var(--space-3); }
.rq-ed__set legend { padding: 0 var(--space-2); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.rq-ed__set ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rq-ed__adds { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.rq-ed__adds .ei-btn { font-size: 12px; padding: var(--space-1) var(--space-2); }
.rq-f { padding: var(--space-3); background: var(--surface-200); border-radius: var(--radius-1); display: grid; gap: var(--space-2); }
.rq-f__head { display: flex; align-items: center; gap: var(--space-3); }
.rq-f__head b { font-size: 13px; }
.rq-f__head select { margin-inline-start: auto; }
.rq-f__x { width: 28px; height: 28px; border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); background: var(--surface-100); color: var(--ink-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.rq-f__head select + .rq-f__x, .rq-f__head b + .rq-f__x { margin-inline-start: auto; }
.rq-f__head select + .rq-f__x { margin-inline-start: 0; }
.rq-f__fields { display: grid; gap: var(--space-2); }
.rq-v { display: grid; grid-template-columns: minmax(110px, 0.8fr) minmax(130px, 0.9fr) minmax(0, 1.6fr) minmax(0, 0.7fr); gap: var(--space-2); align-items: center; }
.rq-v__l { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.rq-v input, .rq-v select, .rq-f__head select { font: 400 13px/1.3 var(--font-mono); color: var(--ink); background: var(--surface-100); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); padding: 6px var(--space-2); min-width: 0; }
.rq-v input[hidden] { display: none; }
.rq-v input:focus, .rq-v select:focus, .rq-f__head select:focus { outline: var(--stroke-focus) solid var(--focus); outline-offset: 1px; }
@media (max-width: 640px) { .rq-v { grid-template-columns: 1fr 1fr; } .rq-v__l { grid-column: 1 / -1; } .rq-ed__grid { grid-template-columns: 1fr; } }
.rq-ed__err { margin: 0; color: var(--laser-ink); font-size: 14px; }
.rq-ed__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- Plot reader page ---------- */
.pr { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-16); }
@media (min-width: 1060px) { .pr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } .pr__stage { position: sticky; top: calc(var(--hdr-h) + var(--space-4)); } }
.pr__stage, .pr__panel { min-width: 0; }
.pr__panel { display: grid; gap: var(--space-4); }
.pr-frame .ei-frame__view { height: clamp(360px, 64vh, 680px); }
.pr-ctl { gap: var(--space-3) var(--space-6); }
.pr-r input[type="range"] { width: clamp(90px, 12vw, 180px); }
.pr-r.is-idle { opacity: 0.45; }
.pr-same { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--ink-muted); }
.pr-note { margin-top: var(--space-3); }
.pr-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-reads .ei-readout__value { font-size: clamp(26px, 2.6vw, 34px); }
.pr-sides td, .pr-sides th { padding: var(--space-2) var(--space-3); }
.pr-own { border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); background: var(--surface-100); padding: var(--space-3) var(--space-4); }
.pr-own summary { cursor: pointer; font-weight: 600; }
.pr-own[open] { display: grid; gap: var(--space-3); }
.pr-own__p { margin: 0; font-size: 13px; color: var(--ink-muted); }
.pr-own__row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.pr-own__row .fld { width: 140px; }
.pr-own__err { margin: 0; color: var(--laser-ink); font-size: 13px; }
.pr-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pr-acts .ei-btn { font-size: 13px; padding: var(--space-2) var(--space-3); }
.pr-acts kbd, .pr-own kbd { font: 500 11px/1 var(--font-mono); padding: 2px 4px; border: var(--stroke-hair) solid currentColor; border-radius: var(--radius-1); opacity: 0.75; }
.pr-frame .tools { top: var(--space-3); right: var(--space-3); }
/* Isometric: the envelope raised over the zone */
.pl-env__wall { fill: var(--ice-tint); fill-opacity: 0.55; stroke: var(--ice-tint); stroke-width: 0.6; stroke-linejoin: round; }
.pl-env__edge { stroke: var(--ice-ink); stroke-width: var(--stroke-hair); }
.pl-env__top { fill: var(--ice-tint); fill-opacity: 0.8; stroke: var(--ice-ink); stroke-width: var(--stroke-rule); stroke-linejoin: round; }
.pl-env__h { stroke: var(--ice-ink); stroke-width: var(--stroke-hair); stroke-dasharray: 3 3; }
.pl-env__t { font-size: 11px; fill: var(--ice-ink); text-anchor: end; dominant-baseline: middle; }
.plot.is-iso .pl-grid path { fill: none; stroke: var(--line); stroke-width: var(--stroke-hair); }
.plot.is-iso .pl-grid path.m { stroke: var(--line-strong); stroke-opacity: 0.45; }

/* Audit settings */
.au-set { border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); background: var(--surface-100); padding: var(--space-3) var(--space-4); }
.au-set summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.au-set[open] { display: grid; gap: var(--space-3); }
.au-set__cats { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 13px; }
.au-set__cats legend { width: 100%; margin-bottom: var(--space-2); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.au-set__cats label { display: inline-flex; align-items: center; gap: var(--space-2); }
.au-set__tol { max-width: 220px; }
.au-set__note { margin: 0; font-size: 12px; color: var(--ink-faint); }
.cat.is-out { opacity: 0.55; }
.xp__clear select { font: 500 12px/1.2 var(--font-mono); color: var(--ink); background: var(--surface-100); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); padding: 4px var(--space-2); grid-column: 2 / -1; justify-self: start; }
.tcs--home { padding-bottom: var(--space-16); }
.tcs__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.tcs__head .sec__h { margin: 0; }

/* The plot reader's plot types: parcel 542 and three sample plots, each a small drawing of its outline with the
   frontage in rule weight, its name, what it is and its area. The chosen one is selected (ice). */
.pr-kinds, .kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.pk { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3); background: var(--surface-100); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); transition: border-color var(--dur-tick) var(--ease-instrument), background-color var(--dur-tick) var(--ease-instrument); }
.pk:hover { border-color: var(--line-strong); }
.pk:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.pk[aria-checked="true"] { border-color: var(--ice-ink); background: var(--ice-tint); }
.pk svg { width: 44px; height: 44px; overflow: visible; }
.pk .pk-plot { fill: var(--surface-200); stroke: var(--ink-muted); stroke-width: var(--stroke-hair); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pk .pk-line { fill: none; stroke: var(--ink-faint); stroke-width: var(--stroke-hair); vector-effect: non-scaling-stroke; }
.pk[aria-checked="true"] .pk-line { stroke: var(--ice-ink); }
.pk .pk-front { fill: none; stroke: var(--ink); stroke-width: var(--stroke-focus); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pk[aria-checked="true"] .pk-plot { stroke: var(--ice-ink); fill: var(--ice); }
.pk[aria-checked="true"] .pk-front { stroke: var(--ice-ink); }
.pk__t { display: grid; gap: 2px; min-width: 0; }
.pk__t b { font: 600 13px/1.25 var(--font-sans); color: var(--ink); }
.pk__t small { font: 400 12px/1.35 var(--font-sans); color: var(--ink-muted); }
.pk__t .pk__a { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pk-note { margin: var(--space-2) 0 var(--space-6); }
@media (max-width: 479px) { .pr-kinds, .kinds { grid-template-columns: 1fr; } }
.kinds--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .kinds--row { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.kinds + .note { margin: var(--space-2) 0 var(--space-6); }


/* The clash explorer's building picker: a row of four over the bench, its note under it. */
.xp-kinds { margin-block: var(--space-6) var(--space-4); }
.xp-kinds .note { margin: var(--space-2) 0 0; }

/* The model audit's and the requirements check's sample model picker (the shared .kinds component), a strip between
   the tool bar and the instrument. */
.smp { padding-block: var(--space-6) 0; }
.smp .sec__label { margin: 0 0 var(--space-3); }
.smp .kinds + .note { margin: var(--space-2) 0 0; }