/* Drishyam: the product drawn as an engineering sheet set. No inline styles anywhere; everything dynamic goes through the CSSOM. */

@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('fonts/IBMPlexMono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('fonts/IBMPlexMono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 700; font-display: swap; src: url('fonts/IBMPlexMono-700.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Narrow'; font-weight: 500; font-display: swap; src: url('fonts/ArchivoNarrow-500.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Narrow'; font-weight: 700; font-display: swap; src: url('fonts/ArchivoNarrow-700.woff2') format('woff2'); }

:root {
  --chest: #072247;   /* the plan chest the sheets come out of */
  --paper: #0F3B73;   /* blueprint sheet */
  --panel: #0B3264;   /* figure frames on the sheet */
  --deep: #082A55;    /* viewport, log, plates */
  --line: #E8F1FF;    /* line white */
  --line-2: #B8CDEC;
  --line-3: #9AB8E2;  /* muted text: 4.7:1 on the sheet even where it crosses a grid line (WCAG AA 4.5:1) */
  --sky: #9CC8FF;
  --rule: rgba(232, 241, 255, .22);
  --amber: #FFC857;   /* callouts */
  --amber-2: #FFD889;
  --amber-ink: #2E2100;
  --red: #FF9A8A;     /* redline */
  --red-ink: #3D0A04;
  --grid: linear-gradient(90deg, rgba(232, 241, 255, .055) 1px, transparent 1px), linear-gradient(rgba(232, 241, 255, .055) 1px, transparent 1px),
          linear-gradient(90deg, rgba(232, 241, 255, .12) 1px, transparent 1px), linear-gradient(rgba(232, 241, 255, .12) 1px, transparent 1px);
  --grid-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23E8F1FF' stroke-width='1.5'%3E%3Cpath d='M11 0v22M0 11h22'/%3E%3Ccircle cx='11' cy='11' r='5'/%3E%3C/svg%3E");
  --arrow-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 5L10 1V9Z' fill='%23B8CDEC'/%3E%3C/svg%3E");
  --arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M10 5L0 1V9Z' fill='%23B8CDEC'/%3E%3C/svg%3E");
  --f-title: 'Archivo Narrow', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gutter: 24px;
  --max: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--nav, 56px) + 16px); }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  font: 400 15px/1.6 var(--f-mono); font-synthesis: none; color: var(--line);
  background-color: var(--chest);
  background-image: linear-gradient(90deg, rgba(232, 241, 255, .03) 1px, transparent 1px), linear-gradient(rgba(232, 241, 255, .03) 1px, transparent 1px);
  background-size: 40px 40px;
}
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 .6em; }
b, strong { font-weight: 700; }
small { font-size: .82em; color: var(--line-2); }
a { color: var(--line); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button, input { font: inherit; color: inherit; }
img, canvas, svg { max-width: 100%; }
:focus-visible { outline: 2.5px solid var(--amber); outline-offset: 3px; }
::selection { background: var(--amber); color: var(--amber-ink); }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: .6em 1em; background: var(--amber); color: var(--amber-ink); border: 2.5px solid var(--amber-ink); font-weight: 700; }
.skip:focus { left: 12px; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--line-2); }
.label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 12px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--line); }
.label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.label__n { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2px solid var(--amber); border-radius: 50%; color: var(--amber); font-size: 12px; letter-spacing: 0; }

/* ---------- sheets ---------- */
.sheet {
  position: relative; max-width: var(--max); margin: 28px auto; padding: 10px 10px 22px; overflow: clip;
  border: 3px solid var(--line);
  background-color: var(--paper);
  background-image: var(--cross), var(--cross), var(--cross), var(--cross), var(--grid);
  background-size: 22px 22px, 22px 22px, 22px 22px, 22px 22px, var(--grid-size);
  background-position: left 4px top 4px, right 4px top 4px, left 4px bottom 4px, right 4px bottom 4px, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat;
  box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6.5px var(--line-2), 0 24px 50px rgba(0, 0, 0, .35);
}
.sheet > :not(.strip):not(.zones):not(.tblock) { margin-inline: clamp(6px, 2vw, 22px); }
.sheet > .tblock { margin-right: clamp(6px, 2vw, 22px); margin-left: auto; }

.strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 18px 18px 0; padding: 7px 12px;
  border: 2px solid var(--line); background: rgba(7, 34, 71, .6);
  font: 500 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--line-2);
}
.strip__a { color: var(--line); font-weight: 700; }
.strip__b { flex: 1; min-width: 0; }
.strip__b::before { content: '|'; margin-right: 18px; color: var(--line-3); }
.strip__no { margin-left: auto; color: var(--amber); font-weight: 700; white-space: nowrap; }
.strip__no b { display: inline-block; min-width: 1.9em; margin: 0 .3em; padding: 0 .25em; border: 2px solid var(--amber); text-align: center; }
.zones { display: flex; justify-content: space-around; margin: 0 18px; padding: 4px 0; list-style: none; border-bottom: 1px solid var(--rule); font: 500 10.5px/1 var(--f-mono); color: var(--line-3); }
.zones li { position: relative; padding-top: 6px; }
.zones li::before { content: ''; position: absolute; left: 50%; top: -4px; width: 1.5px; height: 6px; background: var(--line-3); }

.sheet__head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 26px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2.5px solid var(--line); }
.sheet__head::before, .sheet__head::after { content: ''; position: absolute; bottom: -8px; width: 2.5px; height: 14px; background: var(--line); }
.sheet__head::before { left: 0; }
.sheet__head::after { right: 0; }
.sheet__fig { font: 700 clamp(1rem, 2vw, 1.35rem)/1 var(--f-title); letter-spacing: .08em; color: var(--amber); }
.sheet__title { font: 700 clamp(2.3rem, 6.4vw, 4.8rem)/.92 var(--f-title); letter-spacing: .05em; color: var(--line); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 40px; align-items: stretch; padding: 30px 0 6px; }
.hero__side { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-width: 0; padding-top: 18px; }
.hero__main { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: start; min-width: 0; }
.eyebrow { margin: 0; text-wrap: balance; font: 500 12px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--line-2); }
.eyebrow__fig { display: inline-block; margin-right: 10px; padding: 2px 7px; border: 2px solid var(--amber); color: var(--amber); font-weight: 700; }
.wordmark { margin: 0 0 -6px; font: 700 min(9.6rem, 17.5cqw)/.84 var(--f-title); letter-spacing: .035em; color: var(--line); white-space: nowrap; }  /* 17.5cqw: still fits if the webfont falls back to a wider face */

.dim { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 20px; padding-inline: 3px; border-inline: 2px solid var(--line-2); color: var(--line-2); font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
.dim::before, .dim::after { content: ''; flex: 1; min-width: 12px; height: 10px; }
.dim::before { background: var(--arrow-l) left center / 10px 10px no-repeat, linear-gradient(var(--line-2), var(--line-2)) left 6px center / 100% 2px no-repeat; transform-origin: right; }
.dim::after { background: var(--arrow-r) right center / 10px 10px no-repeat, linear-gradient(var(--line-2), var(--line-2)) right 6px center / 100% 2px no-repeat; transform-origin: left; }
.dim > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.claims { counter-reset: c; display: grid; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; }
.claims li { counter-increment: c; display: flex; align-items: center; gap: 14px; font: 700 clamp(1.05rem, 1.7vw, 1.3rem)/1.15 var(--f-title); letter-spacing: .04em; text-transform: uppercase; }
.claims li::before { content: counter(c); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 2.5px solid var(--amber); border-radius: 50%; color: var(--amber); font: 700 14px/1 var(--f-mono); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0; padding: 0; list-style: none; }
.stat { position: relative; display: grid; gap: 6px; align-content: start; padding: 12px 14px 14px; border: 2px solid var(--line); background: rgba(7, 34, 71, .55); }
.stat::before { content: ''; position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-right: 2.5px solid var(--amber); border-bottom: 2.5px solid var(--amber); }
.stat__k { min-height: 2.5em; font: 500 11px/1.25 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--line-2); }
.stat__dim { display: block; height: 10px; border-inline: 2px solid var(--line-3); background: var(--arrow-l) left 1px center / 9px 9px no-repeat, var(--arrow-r) right 1px center / 9px 9px no-repeat, linear-gradient(var(--line-3), var(--line-3)) center / calc(100% - 8px) 2px no-repeat; }
.stat__v { font: 500 clamp(1.05rem, 1.55vw, 1.45rem)/1.1 var(--f-mono); color: var(--amber); overflow-wrap: anywhere; }
.stat__s { font-size: 12px; line-height: 1.35; color: var(--line-2); }

.art { margin: 0; min-width: 0; }
.art__svg { display: block; width: 100%; height: auto; overflow: visible; }
.art .s1 { stroke: var(--line-2); stroke-width: 1.5; }
.art .s15 { stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }
.art .s2 { stroke: var(--line); stroke-width: 2.5; stroke-linejoin: round; }
.art .s3 { stroke: var(--line); stroke-width: 3; stroke-linejoin: miter; }
.art .amber { stroke: var(--amber); stroke-width: 3.5; stroke-linecap: square; }
.art .hatch { stroke: var(--line-3); stroke-width: 1.5; }
.art .fill-hatch { fill: url(#hatch); }
.art .ext { stroke: var(--line-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.art .dimln { stroke: var(--line-2); stroke-width: 2; }
.art .mk-fill { fill: var(--line-2); }
.art .lblbg { fill: var(--paper); }
.art .lead { stroke: var(--amber); stroke-width: 2.5; }
.art .dot { fill: var(--amber); }
.art .num { fill: var(--paper); stroke: var(--amber); stroke-width: 2.5; }
.art .co--amber .num { fill: var(--amber); }
.art .t-num { fill: var(--amber); font: 700 14px var(--f-mono); }
.art .co--amber .t-num { fill: var(--amber-ink); }
.art .t-co { fill: var(--line); font: 700 16px var(--f-title); letter-spacing: .06em; }
.art .t-sub { fill: var(--line-2); font: 500 10.5px var(--f-mono); letter-spacing: .06em; }
.art .co--amber .t-sub { fill: var(--amber); }
.art .t-dim { fill: var(--line); font: 700 12px var(--f-mono); }
.art .t-fig { fill: var(--amber); font: 700 15px var(--f-title); letter-spacing: .08em; }
.art .t-cap { fill: var(--line-2); font: 500 11px var(--f-mono); letter-spacing: .12em; }
.art .t-note { fill: var(--line-3); font: 500 11px var(--f-mono); letter-spacing: .1em; }
.art__key { display: none; }  /* the parts list: shown on phones, where the drawing keeps only its numbered balloons */

/* ---------- top navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 2.5px solid var(--line); background: var(--chest); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.nav__in { display: flex; align-items: center; gap: 12px 24px; max-width: var(--max); min-height: 56px; margin: 0 auto; padding: 6px 16px; }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--line); text-decoration: none; }
.nav__brand b { font: 700 22px/1 var(--f-title); letter-spacing: .08em; text-transform: uppercase; }
.nav__tag { font: 500 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--line-2); }
.nav__mark { width: 22px; height: 22px; background: var(--cross) center / 22px 22px no-repeat; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--line); font: 700 12.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 3px solid transparent; }
.nav a:not(.btn):hover { color: var(--amber); }
.nav a:not(.btn)[aria-current] { color: var(--amber); border-bottom-color: var(--amber); }
.nav__end { display: flex; align-items: center; gap: 8px; }
.nav__menu { display: none; position: relative; }
.nav__menu summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2.5px solid var(--line); font: 700 12.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; list-style: none; }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu summary::after { content: ''; width: 0; height: 0; margin-left: 8px; border: 5px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.nav__menu[open] summary { background: var(--line); color: var(--paper); }
.nav__drop { position: absolute; right: 0; top: calc(100% + 8px); display: grid; min-width: 220px; padding: 6px; border: 2.5px solid var(--line); background: var(--panel); box-shadow: 0 16px 34px rgba(0, 0, 0, .5); }
.nav__drop a:not(.btn) { border-bottom: 1px solid var(--rule); }

/* hero: what it is, for whom, and how to start */
.lede { max-width: 40em; margin: 0; font: 400 clamp(15px, 1.35vw, 17px)/1.55 var(--f-mono); color: var(--line); }
.gloss { max-width: 40em; margin: -10px 0 0; font-size: 13px; line-height: 1.5; color: var(--line-2); }
.namegloss { margin: -8px 0 0; font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; color: var(--line-2); }
#rebar-note { max-width: 40em; }  /* the hero's reading measure, as .lede and .stakes */
.stakes { max-width: 40em; margin: 0; padding-left: 12px; border-left: 3px solid var(--amber); font-size: 13.5px; line-height: 1.55; color: var(--line); }
.stakes a { color: var(--amber); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cta .btn--xl { text-align: left; }
.cta__time { font-weight: 500; letter-spacing: .04em; text-transform: none; }
.cta__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--amber); font: 700 13px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-underline-offset: 4px; }
.stat:empty { display: none; }
.sheet__sub { flex-basis: 100%; max-width: 62em; margin: 6px 0 0; font: 400 14px/1.55 var(--f-mono); color: var(--line-2); }

/* ---------- notes band ---------- */
.notes { display: flex; flex-wrap: wrap; gap: 6px 26px; max-width: var(--max); margin: 0 auto; padding: 12px 18px; border-block: 2px solid var(--line-3); font: 500 12px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--line-2); }
.notes b { color: var(--amber); }

/* ---------- title blocks ---------- */
.tblock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5px; margin: 0; border: 2.5px solid var(--line); background: var(--line-2); }
.tblock > div { min-width: 0; padding: 6px 10px 7px; background: var(--panel); }
.tblock dt { font: 500 10.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--line-3); }
.tblock dd { margin: 3px 0 0; font: 700 13px/1.25 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--line); overflow-wrap: anywhere; }
.tblock .tblock__sheet { color: var(--amber); }
.tblock__title { grid-column: 1 / -1; }
.tblock__title dd { font: 700 19px/1.15 var(--f-title); letter-spacing: .06em; }
.hero__side .tblock { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(560px, 100%); margin-left: auto; }
.tblock--mini { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(440px, calc(100% - 12px)); margin-top: 26px; }
.tblock__sheet.is-stamped { animation: sheetstamp .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes sheetstamp { 0% { transform: scale(2.4) rotate(-10deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ---------- buttons, chips, pills ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .65em 1.2em; border: 2.5px solid var(--line); border-radius: 0; cursor: pointer;
  background: rgba(7, 34, 71, .5); color: var(--line); text-decoration: none;
  font: 700 13px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .15s, color .15s, transform .08s;
}
.btn:hover { background: rgba(232, 241, 255, .12); }
.btn:active { transform: translateY(2px); }
.btn--amber { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.btn--amber:hover { background: var(--amber-2); }
.btn--red { background: rgba(7, 34, 71, .5); border-color: var(--red); color: var(--red); }  /* a redline: drawn, not filled, so amber stays the only fill */
.btn--red:hover { background: rgba(255, 154, 138, .16); }
/* after the hover rules, so a disabled button under the pointer stays disabled-looking */
.btn:disabled, .btn--amber:disabled, .btn--red:disabled { cursor: not-allowed; transform: none; border-style: dashed; border-color: var(--line-3); background: transparent; color: var(--line-3); }
.btn--look:disabled::before { border-color: var(--line-3); opacity: .5; }
.btn--sm { min-height: 40px; padding: .45em .95em; font-size: 12px; }
.btn--xl { min-height: 58px; padding: .8em 1.5em; font-size: 15px; line-height: 1.25; }
.btn--xl::after { content: ''; width: 22px; height: 10px; background: var(--amber-ink); clip-path: polygon(0 40%, 70% 40%, 70% 0, 100% 50%, 70% 100%, 70% 60%, 0 60%); transition: transform .2s; }
.btn--xl:hover::after { transform: translateX(4px); }
.btn--look { min-height: 44px; padding: .45em 1.3em; font: 700 1.1rem/1 var(--f-title); letter-spacing: .14em; }
.btn--look::before { content: ''; position: absolute; inset: 4px; border: 1.5px dashed var(--amber-ink); opacity: .55; pointer-events: none; }
.btn--kill { min-height: 52px; padding: .5em 1.6em; font: 700 1.35rem/1 var(--f-title); letter-spacing: .22em; animation: killglow 1.3s ease-in-out infinite; }
@keyframes killglow { 50% { box-shadow: 0 0 0 5px rgba(255, 154, 138, .35); } }
@media (pointer: coarse) { .btn--sm { min-height: 44px; } }

.chip { display: inline-block; padding: .28em .55em; border: 1.5px solid var(--line-2); font: 500 11.5px/1.1 var(--f-mono); color: var(--line); background: transparent; white-space: nowrap; }
.chip--look { border-color: var(--line); }
.chip--unsure { border-style: dashed; border-color: var(--sky); color: var(--sky); }
.chip--verify { border-color: var(--amber); color: var(--amber); }
.chip--plain { border-color: var(--line-3); color: var(--line-2); }
.chip--gov { display: inline-flex; align-items: center; gap: .4em; border-color: var(--amber); background: var(--amber); color: var(--amber-ink); font-weight: 700; }
.chip--gov::before { content: ''; flex: none; width: .85em; height: .75em; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.chip--inject { border-style: dashed; border-color: var(--red); color: var(--red); }
.chip--cls { font-weight: 700; border-color: var(--line); background: var(--line); color: var(--paper); }
.chip--exposed_rebar { border-color: var(--amber); background: var(--amber); color: var(--amber-ink); }
.chip--spalling { border-color: var(--line-2); background: var(--line-2); }
.chip--corrosion { border-color: var(--sky); background: var(--sky); }
.chip--efflorescence { background: transparent; color: var(--line); }
.chip--state { color: var(--line); }
.finding[data-state='approved'] .chip--state { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.finding[data-state='rejected'] .chip--state { background: var(--red); border-color: var(--red); color: var(--red-ink); }
.finding[data-state='pending_review'] .chip--state { border-style: dashed; border-color: var(--amber); color: var(--amber); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.pill { display: inline-flex; align-items: center; gap: .55em; padding: .45em .8em; border: 2px solid var(--line-2); font: 700 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--line); white-space: nowrap; }
.pill--running { border-color: var(--amber); color: var(--amber); }
.pill--running::before { content: ''; width: .65em; height: .65em; background: var(--amber); animation: blink .9s steps(2) infinite; }
.pill--killed, .pill--stopped, .pill--stopping, .pill--error { border-color: var(--red); color: var(--red); }
.pill--stopping::before { content: ''; width: .65em; height: .65em; background: var(--red); animation: blink .9s steps(2) infinite; }
.pill--awaiting_review { border-style: dashed; border-color: var(--amber); color: var(--amber); }
.pill--completed, .pill--signed { border-color: var(--amber); background: var(--amber); color: var(--amber-ink); }
.pill--halted, .pill--budget { border-color: var(--sky); color: var(--sky); }
@keyframes blink { 50% { opacity: .15; } }

.badge { display: inline-block; padding: .45em .75em; border: 2.5px solid var(--amber); outline: 1.5px dashed var(--amber); outline-offset: 2px; color: var(--amber); font: 700 15px/1 var(--f-title); letter-spacing: .14em; }

/* rubber stamps: the work-order status and a human's decision on a critical finding */
.pill--stamp { padding: .55em 1em; border-width: 3px; outline: 2px dashed currentColor; outline-offset: -8px; font: 700 17px/1 var(--f-title); letter-spacing: .16em; rotate: -4deg; }
.pill--stamp.pill--awaiting_review { border-style: solid; }
.pill--stamp.pill--completed, .pill--stamp.pill--signed { outline-color: var(--amber-ink); }
.is-stamped { animation: stampin .55s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes stampin { 0% { opacity: 0; scale: 2.3; } 55% { opacity: 1; scale: .94; } 78% { scale: 1.03; } 100% { opacity: 1; scale: 1; } }
.stamp {
  position: absolute; right: 20px; bottom: 26px; z-index: 2; display: grid; justify-items: center; gap: 4px; max-width: calc(100% - 24px);
  padding: 11px 14px 9px; border: 4px solid currentColor; outline: 2px dashed currentColor; outline-offset: -10px;
  background: rgba(8, 42, 85, .82); color: var(--amber); rotate: -8deg; pointer-events: none;
  font: 700 25px/1 var(--f-title); letter-spacing: .15em; text-transform: uppercase;
  animation: stampin .55s cubic-bezier(.2, .9, .3, 1) both;
}
.stamp small { color: inherit; font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .08em; }
.stamp--rejected { color: var(--red); }

/* ---------- figure frames ---------- */
.win { position: relative; min-width: 0; background: var(--panel); border: 2.5px solid var(--line); }
.win::before { content: ''; position: absolute; left: -9px; top: -9px; width: 14px; height: 14px; border-left: 2.5px solid var(--amber); border-top: 2.5px solid var(--amber); pointer-events: none; }
.win__bar { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 12px; border-bottom: 2px solid var(--line); background: rgba(232, 241, 255, .05); }
.win__fig { flex: none; padding: 3px 7px; border: 2px solid var(--amber); color: var(--amber); font: 700 12px/1 var(--f-mono); letter-spacing: .06em; white-space: nowrap; }
.win__title { flex: 1; min-width: 0; margin: 0; font: 700 17px/1.1 var(--f-title); letter-spacing: .08em; text-transform: uppercase; color: var(--line); }
.win__x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 2px solid currentColor; background: transparent; color: inherit; font: 700 13px/1 var(--f-mono); cursor: pointer; }
.win__x:hover { background: rgba(232, 241, 255, .12); }
.win__body { position: relative; padding: 16px; }
.win__body--dark { padding: 6px; background: var(--deep); }
.win--wide { grid-column: 1 / -1; }

/* the sheet slides out of the plan chest; its number stamps in */
/* html's scroll-padding already clears the nav (+16 px); inside the demo the sticky job bar, which sticks 8 px under
   the nav, is cleared too: the two add up to a 4 px gap under the bar */
#demo .pop, .recap { scroll-margin-top: calc(var(--bar, 64px) - 4px); }
.win--view > .win__body { padding: 12px; }
@keyframes chest { 0% { opacity: 0; transform: translateY(28px); clip-path: inset(0 -40px 100% -40px); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; clip-path: inset(-40px -40px -40px -40px); } }
/* Hidden-until-scrolled only once app.js has wired the observer (it sets .js), and never in print:
   a script that fails to load or throws leaves every sheet visible. The demo's own windows are never hidden: the app
   jumps between them, and a window still sliding in read as an empty gap under the trace. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .win.pop:not(.is-in):not(#demo *) { opacity: 0; }
  .win.pop.is-in:not(#demo *) { animation: chest .75s cubic-bezier(.2, .8, .25, 1) both; animation-delay: var(--d, 0s); }
  .strip__no.is-in b { animation: sheetstamp .6s .25s cubic-bezier(.2, 1.4, .4, 1) both; }
  .js .art:not(.is-in) .d { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .art:not(.is-in) :is(.dm, .co, .fade) { opacity: 0; }
  .art.is-in .d { stroke-dasharray: 1 1; animation: draw .9s cubic-bezier(.6, .1, .3, 1) both; }
  .art.is-in .fade { animation: fadein .7s both; }
  .art.is-in .dm { transform-box: fill-box; transform-origin: center; animation: dimx .6s cubic-bezier(.2, .9, .3, 1.15) both; }
  .art.is-in .dm--y { animation-name: dimy; }
  .art.is-in .co { transform-box: fill-box; transform-origin: left center; animation: snap .6s cubic-bezier(.2, 1.5, .4, 1) both; }
  .at0 { animation-delay: .1s !important; } .at1 { animation-delay: .35s !important; } .at2 { animation-delay: .55s !important; }
  .at3 { animation-delay: .75s !important; } .at4 { animation-delay: 1.05s !important; } .at5 { animation-delay: 1.3s !important; }
  .at6 { animation-delay: 1.55s !important; } .at7 { animation-delay: 1.8s !important; } .at8 { animation-delay: 2.05s !important; }
  .at9 { animation-delay: 2.35s !important; }
  .dim--word::before, .dim--word::after { animation: dimgrow .9s .4s cubic-bezier(.2, .9, .3, 1) both; }
  .claims li::before { animation: snap .5s cubic-bezier(.2, 1.6, .4, 1) both; }
  .claims li:nth-child(1)::before { animation-delay: .6s; } .claims li:nth-child(2)::before { animation-delay: .8s; } .claims li:nth-child(3)::before { animation-delay: 1s; }
  .stat.is-measured .stat__dim { animation: dimgrow .9s cubic-bezier(.2, .9, .3, 1) both; transform-origin: center; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fadein { from { opacity: 0; } }
@keyframes dimx { from { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; } }
@keyframes dimy { from { opacity: 0; transform: scaleY(0); } 30% { opacity: 1; } }
@keyframes snap { 0% { opacity: 0; transform: translateX(-14px) scale(.85); } 60% { opacity: 1; } }
@keyframes dimgrow { from { transform: scaleX(0); } }

/* governor overrides arrive as one revision note hung under the job bar's right end, so it never covers the trace */
.toasts { position: absolute; right: 8px; top: calc(100% + 8px); width: min(400px, calc(100% - 16px)); pointer-events: none; }
.toasts:empty { display: none; }
.win--toast { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border: 2.5px solid var(--amber); background: var(--panel); box-shadow: 0 16px 34px rgba(0, 0, 0, .5); color: var(--line); pointer-events: auto; animation: revin .5s cubic-bezier(.2, .9, .3, 1.2); }
.win--toast::before { display: none; }
.win--toast .win__title { flex: none; color: var(--amber); font-size: 15px; }
.win--toast p { flex: 1 1 260px; margin: 0; font: 400 13px/1.45 var(--f-mono); }
.win--toast.is-closing { animation: revout .26s ease-in forwards; }
.rev { display: grid; place-items: end center; flex: none; width: 28px; height: 25px; padding-bottom: 2px; background: var(--amber); clip-path: polygon(50% 0, 100% 100%, 0 100%); color: var(--amber-ink); font: 700 12px/1 var(--f-mono); }
@keyframes revin { 0% { opacity: 0; transform: translateX(40px); } 70% { opacity: 1; transform: translateX(-4px); } 100% { transform: none; } }
@keyframes revout { to { opacity: 0; transform: translateX(40px); } }

/* ---------- demo sheet: four numbered steps, the viewer and its explanation side by side ---------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px var(--gutter); align-items: start; }
.col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.taskbar, .win--load { grid-column: 1 / -1; }

.taskbar {
  position: sticky; top: calc(var(--nav, 56px) + 8px); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 10px 8px 14px;
  border: 2.5px solid var(--line); background: var(--panel); box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.step__n { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border: 2.5px solid var(--amber); border-radius: 50%; background: var(--amber); color: var(--amber-ink); font: 700 15px/1 var(--f-mono); }
.state { flex: none; padding: .3em .6em; border: 2px dashed var(--line-3); font: 700 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--line-2); }
.state[data-state='running'] { border-style: solid; border-color: var(--amber); color: var(--amber); }
.state[data-state='done'] { border-style: solid; border-color: var(--amber); background: var(--amber); color: var(--amber-ink); }
.state[data-state='killed'], .state[data-state='stopped'] { border-style: solid; border-color: var(--red); color: var(--red); }
.say { margin: 0; font-size: 14px; line-height: 1.55; color: var(--line); }
.say--dark { padding: 8px 8px 4px; font-size: 12.5px; color: var(--line-2); }
.say i, .trace i { font-style: normal; font-weight: 700; color: var(--amber); }
.stack--tight { gap: 12px; }

.pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 16px; align-items: start; }
.adv { border: 2px dashed var(--line-3); background: var(--deep); }
.adv > summary, .words > summary { padding: 12px 14px; cursor: pointer; font: 700 12.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.adv > summary small { text-transform: none; letter-spacing: 0; }
.adv__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; padding: 6px 14px 16px; }
.budget { display: grid; gap: 14px; align-content: start; }
.taskbar__id { display: flex; align-items: center; gap: 8px; font: 700 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--line-2); }
.taskbar__mark { width: 18px; height: 18px; background: var(--cross) center / 18px 18px no-repeat; }
.taskbar__status { flex: 1 1 260px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; margin: 0; }
#job-text { flex: 1 1 200px; min-width: 0; font: 400 13px/1.4 var(--f-mono); }
.taskbar__steps { font: 700 13px/1 var(--f-mono); color: var(--amber); }
.taskbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin: 0; padding: 4px; list-style: none; }
.gallery:empty { display: none; }
.gallery > li { display: grid; }  /* each card fills its row, so a real-photo card's longer title makes no ragged row */
.thumb { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; align-content: start; width: 100%; padding: 6px; border: 2px solid var(--line-3); background: var(--deep); color: var(--line); text-align: left; cursor: pointer; transition: border-color .15s; }
.thumb:hover { border-color: var(--line); }
.thumb[aria-pressed='true'] { border-color: var(--amber); box-shadow: inset 0 0 0 2px var(--amber); }
.thumb[aria-pressed='true']::after { content: ''; position: absolute; right: -2px; top: -2px; width: 18px; height: 18px; background: var(--amber); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--panel); filter: grayscale(.8) sepia(.25) hue-rotate(175deg) brightness(.92); transition: filter .25s; }
.thumb:hover img, .thumb[aria-pressed='true'] img { filter: none; }
.thumb__t { font: 700 13px/1.15 var(--f-title); letter-spacing: .03em; text-transform: uppercase; hyphens: auto; overflow-wrap: break-word; }
.thumb__n { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.35; color: var(--line-2); }
.tag { justify-self: start; padding: .15em .5em; border: 1.5px solid var(--amber); color: var(--amber); font: 500 10.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.thumb--real .thumb__t { text-transform: none; }  /* the label reads exactly REAL PHOTO (ours), ... */
.tag--real { border-color: var(--line); color: var(--line); }
.drop { display: grid; gap: 4px; place-items: center; padding: 20px 12px; border: 2.5px dashed var(--line-2); text-align: center; cursor: pointer; background: repeating-linear-gradient(45deg, rgba(232, 241, 255, .05) 0 2px, transparent 2px 10px), var(--deep); transition: border-color .15s, background-color .15s; }
.drop:hover, .drop.is-over { border-color: var(--amber); background-color: #0D3A6E; }
.drop:focus-within { outline: 2.5px solid var(--amber); outline-offset: 3px; }
.drop__big { font: 700 1.2rem/1.1 var(--f-title); letter-spacing: .06em; text-transform: uppercase; }
.drop__small { font-size: 12px; color: var(--line-2); }
#prep { margin-top: 10px; min-height: 1.3em; font-size: 12px; overflow-wrap: anywhere; }
.drop { min-height: 132px; }

.group { display: grid; gap: 14px; }
.field { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.field label { font-weight: 700; font-size: 13px; }
.field__out { font: 500 15px/1 var(--f-mono); color: var(--amber); }
.field input { grid-column: 1 / -1; }

/* range inputs are rulers with a pointer */
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track {
  height: 14px; border: 2px solid var(--line-2);
  background: repeating-linear-gradient(90deg, var(--line-3) 0 1.5px, transparent 1.5px 10%) left bottom / 100% 6px no-repeat, var(--deep);
}
input[type='range']::-moz-range-track {
  height: 10px; border: 2px solid var(--line-2);
  background: repeating-linear-gradient(90deg, var(--line-3) 0 1.5px, transparent 1.5px 10%) left bottom / 100% 6px no-repeat, var(--deep);
}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 28px; margin-top: -9px; border: 2px solid var(--amber-ink); background: var(--amber); }
input[type='range']::-moz-range-thumb { width: 12px; height: 24px; border: 2px solid var(--amber-ink); border-radius: 0; background: var(--amber); }
input[type='range']:focus-visible { outline: 2.5px solid var(--amber); outline-offset: 3px; }
input[type='range']:disabled { opacity: .42; cursor: not-allowed; }

.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.presets legend { width: 100%; margin-bottom: 6px; font-weight: 700; font-size: 13px; }
.preset span { display: inline-block; padding: .5em .8em; border: 2px solid var(--line-3); font: 500 13px/1 var(--f-mono); cursor: pointer; transition: border-color .12s, background-color .12s; }
.preset span:hover { border-color: var(--line); }
.preset input:checked + span { border-color: var(--amber); background: var(--amber); color: var(--amber-ink); font-weight: 700; }
.preset input:focus-visible + span, .toggle input:focus-visible + .toggle__ui, .switch input:focus-visible + .switch__ui { outline: 2.5px solid var(--amber); outline-offset: 3px; }
.toggle { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; cursor: pointer; }
.toggle__ui { position: relative; flex: none; width: 24px; height: 24px; margin-top: 2px; border: 2.5px solid var(--line); background: var(--deep); transition: background-color .15s; }
.toggle__ui::after { content: ''; position: absolute; inset: 3px; background: linear-gradient(45deg, transparent 42%, var(--amber-ink) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--amber-ink) 42% 58%, transparent 58%); transform: scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
input:checked + .toggle__ui { border-color: var(--amber); background: var(--amber); }
input:checked + .toggle__ui::after { transform: scale(1); }
.toggle__txt { font-size: 12.5px; line-height: 1.45; color: var(--line-2); }
.toggle__txt b { display: block; font: 700 13px/1.3 var(--f-mono); color: var(--line); }
.toggle__txt code { margin-left: .5em; font: 400 11px/1.3 var(--f-mono); color: var(--line-3); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch__ui { position: relative; flex: none; width: 46px; height: 24px; border: 2.5px solid var(--line); background: var(--deep); }
.switch__ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; background: var(--line-2); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background-color .2s; }
input:checked + .switch__ui { border-color: var(--amber); }
input:checked + .switch__ui::after { transform: translateX(22px); background: var(--amber); }

.vtools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font: 500 12px/1 var(--f-mono); }
.ramp { display: inline-flex; align-items: center; gap: 6px; }
.ramp b { width: 60px; height: 10px; border: 1.5px solid var(--line-2); background: linear-gradient(90deg, #0F3B73, var(--sky) 50%, var(--amber)); }
.switch:has(input:disabled) { opacity: .45; cursor: not-allowed; }
/* "What am I looking at?": the drawing's KEY block, opened on demand */
.key > summary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 2px solid var(--line-2); cursor: pointer; font: 700 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--line); list-style: none; }
.key > summary::-webkit-details-marker { display: none; }
.key > summary::before { content: '?'; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border: 2px solid var(--amber); border-radius: 50%; color: var(--amber); font-size: 11px; }
.key[open] { flex-basis: 100%; }
.key[open] > summary { border-color: var(--amber); color: var(--amber); }
.key__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 8px 22px; margin: 10px 0 0; padding: 12px; border: 2px solid var(--line); background: var(--deep); }
.key__list > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.key__list dt { display: flex; align-items: center; gap: 4px; }
.key__list dd { margin: 0; font: 400 12px/1.45 var(--f-mono); color: var(--line-2); }
.key__win { width: 30px; height: 20px; border: 2.5px solid var(--line); box-shadow: inset 3px 3px 0 -1px var(--amber), inset -3px -3px 0 -1px var(--amber); }
.key__cross { width: 16px; height: 16px; background: var(--cross) center / 16px 16px no-repeat; }
.key__num { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--amber-ink); border-radius: 50%; background: var(--amber); color: var(--amber-ink); font: 700 10px/1 var(--f-mono); }
.key__ring { width: 16px; height: 16px; border: 3px solid var(--line); border-radius: 50%; }
.key__ring--zoom { border-color: var(--sky); }
.key__ring--verify { border-color: var(--amber); }
.key__box { display: inline-block; width: 22px; height: 14px; border: 2px dashed var(--line-2); }
.key__box--seen { border-color: var(--amber); }
.key__tag { padding: 2px 5px; background: var(--amber); color: var(--amber-ink); font: 700 10.5px/1.2 var(--f-mono); white-space: nowrap; }
.key__tile { width: 30px; height: 20px; border: 1px solid rgba(232, 241, 255, .5); background: linear-gradient(90deg, transparent 48%, rgba(232, 241, 255, .5) 48% 52%, transparent 52%); }
.stage {
  position: relative; padding: 12px 0 0 12px; border: 2.5px solid var(--line);
  background:
    repeating-linear-gradient(90deg, var(--line-3) 0 1px, transparent 1px 12px) left 16px top / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 2px, transparent 2px 60px) left 16px top / 100% 12px no-repeat,
    repeating-linear-gradient(var(--line-3) 0 1px, transparent 1px 12px) left top 16px / 6px 100% no-repeat,
    repeating-linear-gradient(var(--line-2) 0 2px, transparent 2px 60px) left top 16px / 12px 100% no-repeat,
    var(--deep);
}
.stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-top: 1.5px solid var(--line-3); border-left: 1.5px solid var(--line-3); cursor: crosshair; touch-action: manipulation; }
.replay { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.replay__out { min-width: 8.5em; font: 500 13px/1 var(--f-mono); text-align: right; color: var(--amber); }
/* the NOTE under the photo: the agent's last decision in plain words */
.narrator { position: relative; min-height: 76px; margin: 0; padding: 10px 12px 10px 74px; border: 2.5px solid var(--amber); border-left-width: 10px; background: var(--deep); }
.narrator__tag { position: absolute; left: 10px; top: 10px; padding: 3px 7px; border: 2px solid var(--amber); color: var(--amber); font: 700 12px/1 var(--f-mono); letter-spacing: .1em; }
.narrator__text { margin: 0; font: 500 14px/1.5 var(--f-mono); color: var(--line); }
.narrator__sub { margin: 4px 0 0; overflow: hidden; font: 400 11.5px/1.45 var(--f-mono); color: var(--line-3); white-space: nowrap; text-overflow: ellipsis; }
.narrator__sub:empty { display: none; }
.pip { display: none; }  /* phones only: the camera crop beside the photo's switches (never over the photo), so photo, view and NOTE share one screen */

/* the camera panel: the look as the agent saw it, and why it took it */
.cam { display: grid; grid-template-columns: minmax(140px, 180px) minmax(0, 1fr); gap: 14px; align-items: start; }
.cam__fig { display: grid; gap: 8px; margin: 0; }
.cam__img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 2.5px solid var(--line); background: var(--deep); }
.cam__cap { font: 500 11.5px/1.4 var(--f-mono); color: var(--amber); }
.stages { display: grid; gap: 6px; margin: 0; padding: 10px; list-style: none; border: 2px dashed var(--line-3); background: var(--deep); counter-reset: st; }
.stages li { counter-increment: st; display: flex; gap: 8px; font: 500 11.5px/1.35 var(--f-mono); color: var(--line-3); }
.stages li::before { content: counter(st); display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 10px; }
.stages li.is-on { color: var(--line); }
.stages li.is-on::before { border-color: var(--amber); background: var(--amber); color: var(--amber-ink); }
.detail { min-width: 0; min-height: 72px; padding: 10px 12px; border: 2px dashed var(--line-3); background: var(--deep); }
.detail .note { font-size: 12.5px; }
.detail__title { margin: 0 0 6px; font: 700 13px/1.4 var(--f-mono); color: var(--amber); }
.detail__h { margin: 10px 0 4px; font: 700 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--line-2); }
.detail__why { margin: 0; font-size: 13px; line-height: 1.5; }
.detail__raw { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--line-3); overflow-wrap: anywhere; }
.detail .kv { grid-template-columns: 1fr; }
.detail__more { margin-top: 8px; }
.detail__more > summary { cursor: pointer; font: 700 11.5px/1.3 var(--f-mono); letter-spacing: .06em; color: var(--amber); }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 18px; margin: 10px 0 0; }
.kv > div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 3px; border-bottom: 1px dotted var(--line-3); }
.kv dt { font: 400 12px/1.45 var(--f-mono); color: var(--line-2); }
.kv dd { margin: 0; font: 500 12px/1.45 var(--f-mono); text-align: right; overflow-wrap: anywhere; }

/* budget meters are ruler-tick bars */
.meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; font: 700 12px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.meter__val { font: 500 22px/1 var(--f-mono); color: var(--amber); text-transform: none; letter-spacing: 0; }
.meter__cap { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.meter__track {
  position: relative; height: 24px; border: 2px solid var(--line);
  background:
    repeating-linear-gradient(90deg, var(--line-3) 0 1.5px, transparent 1.5px 10%) left bottom / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 50%) left bottom / 100% 13px no-repeat,
    var(--deep);
}
.meter__fill { position: relative; width: 0; height: 100%; border-right: 3px solid var(--amber); background: repeating-linear-gradient(-45deg, rgba(255, 200, 87, .9) 0 3px, rgba(255, 200, 87, .3) 3px 7px); transition: width .6s cubic-bezier(.3, 1.2, .5, 1); }
.meter__fill::after { content: ''; position: absolute; right: -9px; top: -13px; border: 7px solid transparent; border-top: 8px solid var(--amber); border-bottom: 0; }
.meter--hot .meter__fill { border-right-color: var(--red); background: repeating-linear-gradient(-45deg, rgba(255, 154, 138, .95) 0 3px, rgba(255, 154, 138, .35) 3px 7px); }
.meter--hot .meter__fill::after { border-top-color: var(--red); }
.meter__track.is-indeterminate { width: 100%; }
.is-indeterminate .meter__fill { width: 30%; animation: sweep 2.2s ease-in-out infinite alternate; }
@keyframes sweep { from { margin-left: 0; } to { margin-left: 70%; } }
.ops { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: 2px dashed var(--line-3); background: var(--deep); }
.ops > div { display: flex; justify-content: space-between; gap: 10px; }
.ops dt, .ops dd { margin: 0; font: 400 12px/1.45 var(--f-mono); }
.ops dt { color: var(--line-2); }

/* trace log: a ruled schedule */
.trace { max-height: 420px; margin: 0; padding: 0; overflow: auto; list-style: none; font: 400 12.5px/1.55 var(--f-mono); }
.trace__empty { margin: 0; padding: 14px 8px; font: 400 12.5px/1.5 var(--f-mono); color: var(--line-2); }
.trace__line { border-bottom: 1px solid var(--rule); animation: linein .45s ease-out; }
.trace__btn { display: grid; gap: 2px; width: 100%; padding: 6px 8px; border: 0; background: transparent; color: var(--line); font: inherit; text-align: left; cursor: pointer; }
.trace__head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.trace__why, .trace__saw { display: block; padding-left: 2.6em; color: var(--line-2); overflow-wrap: anywhere; }
.trace__line--planner .trace__why { flex-basis: 100%; }
.t-key { color: var(--amber) !important; }
.t-ms { color: var(--line-3); }
.t-act--finding { color: var(--amber); }
.t-act--review { color: var(--red); }
.words { margin-top: 6px; border-top: 1px solid var(--rule); }
.words dl { display: grid; gap: 6px; margin: 0; padding: 0 12px 12px; }
.words dl > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; }
.words dt { font: 700 12px/1.45 var(--f-mono); color: var(--amber); }
.words dd { margin: 0; font: 400 12px/1.45 var(--f-mono); color: var(--line-2); }
.trace__btn:hover { background: rgba(232, 241, 255, .07); }
.trace__line.is-current .trace__btn { background: rgba(255, 200, 87, .14); box-shadow: inset 4px 0 0 var(--amber); }
.trace__line--planner { display: flex; flex-wrap: wrap; gap: 8px; padding: 5px 8px; color: var(--line-2); }
.trace b { font-weight: 700; color: var(--line); }
.t-num { color: var(--amber); font-weight: 700; }
.t-act { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.t-act--gaze { color: var(--line); }
.t-act--escalate { color: var(--sky); }
.t-act--verify { color: var(--amber); }
.t-act--halt, .t-act--planner { color: var(--red); }
@keyframes linein { from { opacity: 0; transform: translateX(-10px); background: rgba(255, 200, 87, .28); } }

/* findings: detail callouts */
.banner { margin: 0; padding: 10px 14px; border: 2px solid var(--line); border-left: 10px solid var(--amber); background: repeating-linear-gradient(135deg, rgba(232, 241, 255, .04) 0 2px, transparent 2px 9px), var(--deep); font-size: 13.5px; }
.banner--honest { border-left-color: var(--sky); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; align-items: start; }
.cards:empty { display: none; }
.finding { container-type: inline-size; position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; padding: 12px; border: 2px solid var(--line-2); background: var(--deep); animation: cardin .7s cubic-bezier(.2, .8, .3, 1) both; }
.finding--critical { border: 2.5px solid var(--amber); }
.finding::before { content: ''; position: absolute; left: -2px; top: -2px; width: 34px; height: 4px; background: var(--amber); transform-origin: left; animation: rule .5s .35s ease-out both; }
@keyframes cardin { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 30% { opacity: 1; } 100% { opacity: 1; clip-path: inset(-60px); } }
@keyframes rule { from { transform: scaleX(0); } }
.finding__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.finding__where { flex: 1; font: 400 12px/1.35 var(--f-mono); color: var(--line-2); }
.finding__body { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: start; }
.finding__fig { display: grid; gap: 6px; margin: 0; }
.finding__crop { display: block; width: 128px; height: 128px; object-fit: cover; border: 2px solid var(--line); background: var(--panel); }
.finding__crop--none { display: grid; place-items: center; color: var(--line-2); font: 400 12px var(--f-mono); }
.finding__dim { width: 128px; gap: 4px; padding-inline: 1px; }
.finding__dim::before, .finding__dim::after { min-width: 10px; }
.finding__dim .dim__v { color: var(--line); font-weight: 700; letter-spacing: .02em; text-transform: none; }
.kv--px { grid-template-columns: 1fr; margin: 0; }
.finding__ask { margin: 0; font-size: 13px; line-height: 1.5; color: var(--line); }
.finding__ask b { color: var(--sky); }
.finding__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.finding__conf { margin: 0; font: 400 12px/1.3 var(--f-mono); color: var(--line-2); }
.finding.is-flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 5px var(--amber); } 100% { box-shadow: 0 0 0 0 transparent; } }
.review__why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--line); }
.review__why b, .review__only { color: var(--amber); }
.review__only { margin: 0; font: 700 13px/1.4 var(--f-mono); }
.review--done .review__why, .review--done .review__only { display: none; }
/* findings grouped by the region they were found in, with the levels that region was looked at */
.fgroups { display: grid; gap: 22px; }
.fgroups:empty { display: none; }
.fgroup { display: grid; gap: 12px; }
.fgroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 6px; border-bottom: 2px solid var(--line-3); }
.fgroup__t { font: 700 16px/1.2 var(--f-title); letter-spacing: .08em; text-transform: uppercase; }
.fgroup__hist { font: 500 12px/1.3 var(--f-mono); color: var(--amber); }
/* "What you just saw" */
.recap { display: grid; gap: 10px; padding: 14px 16px; border: 2.5px solid var(--amber); background: repeating-linear-gradient(135deg, rgba(255, 200, 87, .05) 0 2px, transparent 2px 10px), var(--deep); }
.recap__t { font: 700 20px/1.1 var(--f-title); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.recap__list { display: grid; gap: 6px; margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.5; }
.recap__list b { color: var(--amber); }
.recap__next { display: grid; gap: 8px; }
.recap__next p { margin: 0; font-size: 13px; color: var(--line-2); }
.recap__next .btn { margin-right: 8px; }
.done__dl { display: flex; flex-wrap: wrap; gap: 10px; }
.chip--btn { min-height: 36px; cursor: pointer; font: inherit; font-size: 12px; }
.chip--btn:hover { background: rgba(232, 241, 255, .12); }
.finding__conf b { color: var(--amber); }
.finding.is-revised .finding__dim::before, .finding.is-revised .finding__dim::after { animation: dimgrow .7s cubic-bezier(.2, .9, .3, 1) both; }
.review { display: grid; gap: 8px; padding: 12px; border: 2px dashed var(--amber); background: rgba(255, 200, 87, .06); justify-items: start; }
.review--done { min-height: 104px; padding-right: 214px; border-style: solid; border-color: var(--line-3); background: transparent; align-content: center; }
@container (max-width: 390px) { .review--done { padding-right: 12px; padding-bottom: 96px; align-content: start; } }
.review--done .badge, .review--done .review__label, .review--done .input, .review--done .review__btns { display: none; }
.review__label { font: 700 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--line-2); }
.review__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.input { width: 100%; min-height: 44px; padding: .5em .2em; border: 0; border-bottom: 2.5px solid var(--line); background: transparent; color: var(--line); font: 500 15px/1.2 var(--f-mono); }
.input::placeholder { color: var(--line-3); }
.input:disabled { opacity: .55; }
.finding__err { margin: 0; color: var(--red); font-size: 13px; font-weight: 700; }
.finding__err:empty { display: none; }
/* a not_assessed area, checked by eye by a person (findings.js Checks) */
.check__what, .check__done { margin: 0; font-size: 13px; line-height: 1.5; color: var(--line); }
.check__done b { color: var(--amber); }
.check[data-state='defect-found'] .check__done b { color: var(--red); }
.check .chip--state { border-style: dashed; border-color: var(--amber); color: var(--amber); }
.check[data-state] .chip--state { border-style: solid; background: var(--amber); color: var(--amber-ink); }
.review__t { font: 700 13px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.review--checked { border-style: solid; border-color: var(--line-3); background: transparent; }

.done__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 6px 0 2px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5px; border: 2px solid var(--line-2); background: var(--line-3); }
.tile { padding: 9px 6px; background: var(--deep); text-align: center; }
.tile__v { display: block; font: 500 21px/1.15 var(--f-mono); color: var(--amber); }
.tile__k { font: 500 10.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--line-2); }

/* ---------- how it works ---------- */
.grid-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px var(--gutter); align-items: start; }
.formula { margin: 0; padding: 18px 16px 44px; border: 2px solid var(--line-3); background: var(--deep); color: var(--line); font: 500 clamp(1.1rem, 2.6vw, 1.6rem)/1.5 var(--f-mono); overflow-wrap: anywhere; }
.formula b { position: relative; display: inline-block; font-weight: 700; color: var(--amber); }
.formula b::before { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 14px; background: var(--amber); }
.formula b::after { content: attr(data-n) / ''; position: absolute; left: 50%; top: calc(100% + 13px); display: grid; place-items: center; width: 20px; height: 20px; margin-left: -9px; border: 2px solid var(--amber); border-radius: 50%; font: 700 11px/1 var(--f-mono); color: var(--amber); }
.terms { display: grid; gap: 10px; margin: 0; }
.terms > div { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.terms dt { display: flex; align-items: center; gap: 8px; font: 700 19px/1 var(--f-mono); color: var(--amber); }
.terms dt::before { content: attr(data-n) / ''; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 2px solid var(--amber); border-radius: 50%; font-size: 11px; }
.terms dd { margin: 0; font-size: 13.5px; }
.rules { counter-reset: r; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.rules li { counter-increment: r; position: relative; min-height: 2.4rem; padding-left: 3.4rem; font-size: 13.5px; }
.rules li::before { content: counter(r); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 2.5px solid var(--amber); border-radius: 50%; color: var(--amber); font: 700 15px/1 var(--f-mono); }
.rules li::after { content: ''; position: absolute; left: 2.2rem; top: 1.1rem; width: .9rem; height: 2px; background: var(--amber); }
.rules b { font: 700 16px/1 var(--f-title); letter-spacing: .06em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl caption { padding-bottom: 8px; text-align: left; font: 700 12px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--line-2); }
.tbl th { padding: 9px 10px; border-bottom: 2.5px solid var(--line); text-align: left; font: 700 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--amber); }
.tbl td, .tbl tbody th { padding: 10px; border-bottom: 1px solid var(--rule); vertical-align: top; text-transform: none; letter-spacing: 0; color: var(--line); }
.tbl td + td { border-left: 1px solid var(--rule); }
.tbl tbody th { font-weight: 500; }
.tbl .n { text-align: right; font-family: var(--f-mono); }
.tbl--auto td { width: 33.3%; }
.tbl .th--ok, .tbl .th--human, .tbl .th--never { color: var(--line); }
.tbl .th--ok::before, .tbl .th--human::before, .tbl .th--never::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2.5px solid var(--line); vertical-align: -1px; }
.tbl .th--human::before { border-color: var(--amber); background: var(--amber); }
.tbl .th--never::before { border-color: var(--red); background: linear-gradient(45deg, transparent 40%, var(--red) 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, var(--red) 40% 60%, transparent 60%); }

/* ---------- benchmarks / failures ---------- */
.dataset { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 8px 14px; border: 2px solid var(--line); font: 500 14px/1.3 var(--f-mono); }
.dataset__k { color: var(--amber); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.dataset b { font-weight: 500; }
.win__cite { padding: 0 16px 14px; }
#policy2-note { max-width: 75ch; }
#benchmarks > .win + .win { margin-top: 22px; }
.bench { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.chart { display: block; width: 100%; height: auto; border: 2px solid var(--line-3); background: var(--deep); }
.chart__grid { stroke: rgba(232, 241, 255, .1); stroke-width: 1; }
.chart__axis { stroke: var(--line); stroke-width: 2.5; }
.chart__tick { fill: var(--line-2); font: 500 11px var(--f-mono); }
.chart__title { fill: var(--line); font: 700 11px var(--f-mono); letter-spacing: .1em; }
.chart__halo { fill: none; stroke: var(--deep); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
.chart__line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--drishyam { stroke: var(--amber); stroke-width: 3.5; }
.chart__line--tiling { stroke: var(--line); stroke-dasharray: 10 7; stroke-linecap: butt; }
.chart__line--downscale { stroke: var(--sky); stroke-dasharray: 1 7; }
.chart__line--model { stroke: var(--red); stroke-dasharray: 6 4; }
.mk { fill: var(--deep); stroke-width: 2.5; }
.mk--drishyam { stroke: var(--amber); fill: var(--amber); }
.mk--tiling { stroke: var(--line); }
.mk--downscale { stroke: var(--sky); }
.mk--model { stroke: var(--red); }
.chart__lead { fill: none; stroke: var(--amber); stroke-width: 2; }
.chart__num { fill: var(--deep); stroke: var(--amber); stroke-width: 2.5; }
.chart__numt { fill: var(--amber); font: 700 12px var(--f-mono); }
.chart__co { fill: var(--line); font: 700 12px var(--f-mono); paint-order: stroke; stroke: var(--deep); stroke-width: 6px; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .pop.is-in .chart__plot { animation: wipe 1.8s .2s cubic-bezier(.5, .1, .3, 1) both; }
  .pop.is-in .chart__callout { animation: snap .6s 1.9s cubic-bezier(.2, 1.5, .4, 1) both; transform-box: fill-box; transform-origin: left center; }
}
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0; padding: 0; list-style: none; font: 500 12px/1.2 var(--f-mono); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 30px; height: 0; border-top: 3px solid; }
.sw--drishyam { border-color: var(--amber); }
.sw--tiling { border-top-style: dashed; border-color: var(--line); }
.sw--downscale { width: 11px; height: 11px; border: 2.5px solid var(--sky); }  /* one point, no line: the swatch is its square marker */
.sw--model { border-top-style: dashed; border-color: var(--red); }
.data summary { cursor: pointer; font: 500 12px/1.2 var(--f-mono); color: var(--amber); }
.data .table-wrap, .data > .stack { margin-top: 8px; }
.prov { padding: 12px; border: 2px dashed var(--line-3); background: var(--deep); }
.prov .kv { grid-template-columns: 1fr; margin: 0; }
.kv__sub { display: block; font-size: 11px; color: var(--line-3); }
.kv--nums dd { white-space: nowrap; }  /* a number never breaks across lines */
.pending { display: grid; gap: 12px; justify-items: start; }
.pending__title { margin: 0; font: 700 1.9rem/1 var(--f-title); letter-spacing: .06em; text-transform: uppercase; color: var(--line); }
.fails { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap: 22px; }
.fail { position: relative; display: grid; gap: 12px; align-content: start; padding: 12px; border: 2px solid var(--line-2); background: var(--deep); }
.fail__cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.fail__case { display: grid; gap: 8px; align-content: start; margin: 0; }
.fail__case figcaption { font-size: 12.5px; line-height: 1.5; color: var(--line-2); overflow-wrap: anywhere; }
.fail__sub { color: var(--amber); font: 700 12px/1 var(--f-mono); }
.fail__fig { display: flex; align-items: center; gap: 10px; font: 700 15px/1 var(--f-title); letter-spacing: .1em; color: var(--amber); }
.fail__fig::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--amber), transparent); }
.fail__frame { position: relative; margin: 0; padding: 8px; border: 1.5px dashed var(--line-3); }
.fail__frame::before, .fail__frame::after { content: ''; position: absolute; width: 16px; height: 16px; border-color: var(--line); border-style: solid; pointer-events: none; }
.fail__frame::before { left: -2px; top: -2px; border-width: 2.5px 0 0 2.5px; }
.fail__frame::after { right: -2px; bottom: -2px; border-width: 0 2.5px 2.5px 0; }
.fail__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--panel); }  /* the whole plate, legend included */
.fail__img--none { display: grid; place-items: center; background: var(--panel); color: var(--line-2); font: 400 12px var(--f-mono); }
.fail__t { font: 700 18px/1.15 var(--f-title); letter-spacing: .05em; text-transform: uppercase; }
.fail p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--line-2); }
.fail .fail__rule { padding: 8px 10px; border: 2px solid var(--amber); border-left-width: 8px; color: var(--line); }
.fail__rule b { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 700 11px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--amber); }
.fail__rule b::before { content: ''; width: .9em; height: .8em; background: var(--amber); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---------- safety and questions ---------- */
.guards { counter-reset: g; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px 26px; margin: 0; padding: 0; list-style: none; }
.guards li { counter-increment: g; position: relative; padding-left: 3rem; font-size: 13.5px; line-height: 1.55; }
.guards li::before { content: counter(g); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 2.5px solid var(--amber); border-radius: 50%; color: var(--amber); font: 700 14px/1 var(--f-mono); }
.guards b { display: block; font: 700 16px/1.3 var(--f-title); letter-spacing: .06em; text-transform: uppercase; }
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 18px var(--gutter); margin: 0; }
.faq__item { padding: 14px 16px; border: 2.5px solid var(--line); background: var(--panel); }
.faq dt { margin-bottom: 6px; font: 700 18px/1.2 var(--f-title); letter-spacing: .05em; text-transform: uppercase; color: var(--amber); }
.faq dd { margin: 0; font-size: 13.5px; line-height: 1.6; }
.faq a { color: var(--amber); }
.win--loop { margin: 0; }  /* a <figure>: without this the browser's 40 px side margins inset it */
.loop__img { display: block; width: 100%; height: auto; }
.loop__hint { display: none; }  /* phones only: the drawing is too dense to read at 375 px, so it pans sideways */
.aws__img { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; }
.guards__llm { margin-top: 18px; }
.video { display: grid; gap: 10px; margin: 0; }
.video__cap { font: 500 13px/1.6 var(--f-mono); color: var(--line-2); }
.video__cap b { color: var(--line); }
.video__cap .win__fig { margin-right: 6px; }
.video video { display: block; justify-self: center; width: min(100%, 1280px); height: auto; border: 2.5px solid var(--line); background: var(--deep); }
.video video:focus-within { outline: 2.5px solid var(--amber); outline-offset: 3px; }  /* Tab also stops on its own controls (shadow DOM), where neither :focus nor :focus-visible matches the element */

/* ---------- footer ---------- */
.footer { max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter) 72px; }
.footer .win::before { display: none; }
.links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.links a { display: inline-block; padding: .65em 1.1em; border: 2.5px solid var(--line); color: var(--line); font: 700 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; transition: background-color .15s, color .15s; }
.links a:hover { background: var(--line); color: var(--paper); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .taskbar:not([data-mode='running'], [data-mode='killed'], [data-mode='stopped']) { position: relative; top: 0; }  /* after KILL it keeps the result and Resume in view */
  .pick { grid-template-columns: minmax(0, 1fr); }  /* the ten samples get the width for two rows of five; the drop zone goes under them */
  .recap { scroll-margin-top: 0; }  /* shown once a run is over, when the job bar no longer sticks here */
  .hero { grid-template-columns: minmax(0, 1fr); }
  .art { max-width: 640px; }
  .grid-how, .bench { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .nav .nav__links, .nav a.nav__gh, .nav__tag { display: none; }
  .nav__menu { display: block; }
  .nav__end { margin-left: auto; }
}
@media (max-width: 700px) {
  .zones, .strip__b { display: none; }
  .sheet { margin: 16px 8px; padding: 6px 4px 30px; }
  .sheet > :not(.strip):not(.zones):not(.tblock) { margin-inline: 12px; }
  .sheet > .tblock { margin-right: 12px; }
  .strip { margin: 12px 8px 0; }
  .hero__side .tblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tblock--mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notes { margin-inline: 8px; }
  .dim--word { gap: 6px; font-size: 10.5px; letter-spacing: .06em; }
}
@media (max-width: 560px) {
  /* Phones: the drawing keeps the photo and its balloons, redrawn with heavier lines and larger lettering
     (user units; it renders at about 0.65x), and the callout text moves into a parts list below it. */
  .art__svg { overflow: hidden; }  /* app.js narrows the viewBox to the photo and its balloons */
  .art .t-co, .art .t-sub, .art .t-note, .art .rule { display: none; }
  .art .s1 { stroke-width: 3; }
  .art .s15 { stroke-width: 3.9; }
  .art .s2, .art .s3, .art .lead, .art .num { stroke-width: 4; }
  .art .amber { stroke-width: 5.5; }
  .art .dimln { stroke-width: 3.2; }
  .art .ext { stroke-width: 2.5; }
  .art .hatch { stroke-width: 2.2; }
  .art .lblbg { stroke: var(--paper); stroke-width: 12; }
  .art .num { r: 15px; }
  .art .t-num { font-size: 18px; }
  .art .t-fig { font-size: 20px; }
  .art .t-cap { font-size: 17px; letter-spacing: .06em; transform: translateX(14px); }
  .art .t-dim { font-size: 18px; }
  .art__key { counter-reset: k; display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; border: 2px solid var(--line-2); }
  .art__key li { counter-increment: k; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 7px 10px; font: 500 12px/1.35 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--line-2); }
  .art__key li + li { border-top: 1px solid var(--rule); }
  .art__key li::before { content: counter(k); display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2.5px solid var(--amber); border-radius: 50%; color: var(--amber); font: 700 12px/1 var(--f-mono); }
  .art__key li:last-child::before { background: var(--amber); color: var(--amber-ink); }
  .art__key b { font: 700 15px/1.1 var(--f-title); letter-spacing: .06em; color: var(--line); }
  .art__key li:last-child b { color: var(--amber); }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl--rows tr, .tbl--auto tr { display: block; padding: 6px 0; border-bottom: 2.5px solid var(--line); }
  .tbl--rows td, .tbl--auto td { display: block; width: auto; padding: 4px 10px; border: 0; }
  .tbl--rows td::before, .tbl--auto td::before { content: attr(data-label); display: block; font: 700 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--amber); }
  .tbl--pairs tbody th { display: block; padding: 4px 6px; border: 0; font-weight: 700; }
  .tbl.tbl--pairs td { display: flex; justify-content: space-between; gap: 12px; border: 0; }  /* label left, value right */
  .finding__where { flex-basis: 100%; order: 3; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat__k { min-height: 0; }
  .loop__hint { display: block; }
  .loop__pan { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }  /* positioned: nothing inside escapes the scroller */
  .loop__pan .loop__img { min-width: 900px; }  /* legible lettering; the reader pans it */
  .taskbar__id { display: none; }
  .taskbar__actions { margin-left: 0; width: 100%; }
  /* running on a phone: the two controls that matter (Skip to end, KILL), then one line of status, which says it is a replay */
  .taskbar[data-mode='running'] .taskbar__status { order: 1; flex-basis: 100%; }
  .taskbar[data-mode='running'] .taskbar__actions { width: auto; margin-left: auto; }
  .taskbar[data-mode='running'] :is(#sound, #job-steps, #job-pill) { display: none; }
  .taskbar[data-mode='running'] #job-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
  /* after KILL the bar stays stuck with the result, Run and Resume, so it keeps to one row of buttons */
  .taskbar:is([data-mode='killed'], [data-mode='stopped']) :is(#sound, #try-kill) { display: none; }
  .win__bar .win__fig { display: none; }  /* the step number and title carry it on a phone */
  .nav__in { padding: 6px 12px; gap: 8px; }
  .nav__mark { display: none; }
  .nav__brand b { font-size: 19px; }
  .nav__cta { padding-inline: .7em; white-space: nowrap; }
  .nav__menu summary { padding: 0 10px; }
  .hero { padding-top: 18px; }
  .hero__main { gap: 16px; }
  .cta { gap: 10px 14px; }
  .cta .btn--xl { width: 100%; }
  /* phones: the samples are one swipeable row, so the photo and Run stay close to the top */
  .gallery { grid-auto-flow: column; grid-auto-columns: 132px; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .gallery li { scroll-snap-align: start; }
  .drop { min-height: 0; }
  .cam { grid-template-columns: minmax(0, 1fr); }
  .cam__fig { max-width: 320px; }
  .vtools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; justify-items: start; }
  .vtools > #look, .vtools > .key { grid-column: 1 / -1; }
  .vtools > .switch { grid-column: 1; }  /* the switches keep column 1 whether or not the crop is shown: no overlap; the crop (56 px) fits their two rows, so no shift */
  .pip { display: block; grid-column: 2; grid-row: 2 / span 2; align-self: center; width: 56px; height: 56px; object-fit: cover; border: 2.5px solid var(--amber); background: var(--deep); pointer-events: none; }
  .narrator { padding: 10px 12px; }
  .narrator__tag { position: static; float: left; margin: 1px 8px 0 0; }
  .narrator__text { font-size: 13px; }
  .narrator__sub { display: none; }  /* the NOTE keeps to its main sentence; the step detail has the rest */
  .key__list > div { grid-template-columns: 56px minmax(0, 1fr); }
  .btn--kill { min-height: 44px; padding: .45em 1.1em; font-size: 1.1rem; }
  .finding__body { grid-template-columns: 108px minmax(0, 1fr); }
  .finding__crop, .finding__dim { width: 108px; }
  .finding__crop { height: 108px; }
  .replay { grid-template-columns: auto minmax(0, 1fr); }
  .replay__out { grid-column: 1 / -1; text-align: left; }
  .sheet__title { font-size: clamp(2.2rem, 13vw, 3.4rem); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart__tick, .chart__numt { font-size: 14px; }  /* the phone chart is a 360-wide sheet drawn at about 0.8x */
  .chart__title, .chart__co { font-size: 14.5px; }
  /* one line, so the numbered callouts never land on a second line: sized to fit from 360 px, scrolls (never widens the column) below */
  .formula { padding-inline: 8px; font-size: clamp(11px, calc((100vw - 120px) / 20.5), 13.5px); white-space: nowrap; overflow-x: auto; }
  .tbl--tight :is(th, td) { padding-inline: 6px; }
}

@media (min-width: 701px) and (max-width: 1599px) {
  .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; }  /* ten samples: two even rows of five */
}
@media (min-width: 1101px) {
  /* FIG. 3.1-3.5 flow down two balanced columns in number order, instead of rows whose short frame leaves a gap */
  #how .grid-how { display: block; column-count: 2; column-gap: var(--gutter); }
  #how .grid-how > * { break-inside: avoid; margin: 0 0 30px; }
  #how .grid-how > #loop { column-span: all; }  /* FIG. 3.0 keeps the full width; FIG. 3.3 flows with the rest */
  #how .grid-how > :last-child { margin-bottom: 0; }
  /* the governor's note hangs over the viewer's top-right corner (its step state, its FIG. badge and the tiling switch,
     which is off while a run plays), never over the camera panel, its replay slider or the trace */
  .toasts { right: calc(50% + var(--gutter) / 2 + 10px); width: 300px; }
  .toasts .win--toast p { flex-basis: 200px; }  /* the close button shares the message's row */
  .trace { max-height: 240px; }  /* the newest line stays on screen beside the photo while a run plays (Linux fonts run taller) */
  .detail { max-height: 220px; overflow-y: auto; }  /* no taller than the crop beside it, so a long step never pushes the trace down */
}
/* wide screens: the sheets use the screen instead of a 1400 px column (text keeps its reading measure) */
@media (min-width: 1600px) {
  :root { --max: min(1880px, calc(100vw - 64px)); }
  .lede { font-size: 18px; }
  .guards, .faq { grid-template-columns: repeat(5, minmax(0, 1fr)); }  /* five items: one row, never four and an orphan */
}
@media (min-width: 1101px) and (min-height: 800px) {
  .win--order { position: sticky; top: calc(var(--nav, 56px) + var(--bar, 64px) + 24px); }  /* the work order stays beside the findings it summarises */
}
@media (forced-colors: active) {  /* checked states drawn in system colours, since backgrounds and gradients are dropped */
  .toggle__ui, .switch__ui, .preset span { forced-color-adjust: none; border-color: CanvasText; background: Canvas; color: CanvasText; }
  input:checked + .toggle__ui, .preset input:checked + span { border-color: Highlight; background: Highlight; color: HighlightText; }
  .toggle__ui::after { background: linear-gradient(45deg, transparent 42%, HighlightText 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, HighlightText 42% 58%, transparent 58%); }
  .switch__ui::after { background: CanvasText; }
  input:checked + .switch__ui { border-color: Highlight; }
  input:checked + .switch__ui::after { background: Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .art .d, .art .dm, .art .co, .art .fade, .meter__fill, .btn--kill, .finding, .finding::before, .trace__line, .stamp, .is-stamped, .pill--running::before, .pill--stopping::before, .win--toast { animation: none !important; }
}