/* Redline drawing set. Monochrome ink on white sheets over a gray drafting ground.
   Labels are Archivo at condensed width (font-stretch 72%), body Archivo at 100%.
   Weight ceiling 600. See DESIGN.md. */

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

:root {
  --ground: #e6e6e3;
  --sheet: #ffffff;
  --ink: #111111;
  --ink-2: #454545;      /* 9.4:1 on white */
  --ink-3: #6b6b6b;      /* 5.3:1 on white, 4.6:1 on ground */
  --rule: #c9c9c6;
  --rule-strong: #8a8a87; /* 3.4:1 on white: control borders */
  --wash: #f3f3f1;
  --focus: #111111;
  --accent: #ff6b1a;     /* bright orange. Fill only: black on it is 6.6:1, it on white is 2.85:1, so never text or a lone border on white */
  --accent-deep: #e85a0c;
  --accent-wash: #fff1e8;
  --cond: 72%;
  --r: 6px;            /* buttons, inputs */
  --r-sheet: 16px;     /* containers are rounder than buttons */
  --mast-h: 60px;
  --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23f2f2ef'/%3E%3Crect width='1' height='1' fill='%23111'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23111'/%3E%3C/svg%3E");
  --dots: radial-gradient(circle at 1px 1px, #b9b9b5 1px, transparent 1.2px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gut: clamp(16px, 3vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  /* classic Mac OS desktop: a 1-bit dither, 2 black pixels in every 4x4 */
  margin: 0; background: var(--ground) var(--dither) 0 0 / 4px 4px; image-rendering: pixelated; color: var(--ink);
  font: 400 16px/1.55 "Archivo", system-ui, sans-serif; font-stretch: 100%;
  font-feature-settings: "tnum" 0;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; color: inherit; }
code, .code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

[tabindex="-1"]:focus { outline: none; box-shadow: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--sheet); }

.label, .caps {
  font-stretch: var(--cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; font-size: 12px; line-height: 1.3;
}
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--accent); color: var(--ink); padding: 10px 14px; text-decoration: none; border-radius: var(--r); border: 1px solid var(--ink); }
.skip:focus { top: 12px; }

/* ── masthead ─────────────────────────────────────────────── */
.mast { position: sticky; top: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: calc(100% - 2 * var(--gut)); max-width: calc(1680px - 2 * var(--gut)); margin: 12px auto 0; min-height: var(--mast-h); padding: 0 8px 0 18px;
  background: rgb(255 255 255 / 0.66); border: 1px solid var(--ink); border-radius: var(--r-sheet);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), 0 1px 1px rgb(0 0 0 / 0.06), 0 12px 30px -16px rgb(0 0 0 / 0.35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mast { background: var(--sheet); } }
@media (prefers-reduced-transparency: reduce) { .mast { background: var(--sheet); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.mast__name { display: flex; align-items: center; gap: 10px; padding: 10px 0; text-decoration: none; font-stretch: normal; font-weight: 600; font-size: 19px; letter-spacing: 0.02em; text-transform: uppercase; }
.mast__name svg { width: 26px; height: 26px; }
/* the body sets image-rendering: pixelated for the dither, and it inherits; the mark is a smooth render served at its exact sizes */
.mast__mark { width: 28px; height: 28px; flex: none; image-rendering: auto; }
.mast nav { display: flex; gap: 4px; }
.mast nav a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r); text-decoration: none; font-stretch: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.mast nav a[aria-current="page"] { background: var(--accent); box-shadow: inset 0 0 0 1px var(--ink); }

main { padding: var(--gut); max-width: 1680px; margin: 0 auto; }
/* sticky things sit below the floating header */
.filters { top: calc(var(--mast-h) + 22px) !important; }

/* ── the sheet ────────────────────────────────────────────── */
.sheet { background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--r-sheet); box-shadow: 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 28px -14px rgb(0 0 0 / 0.28); position: relative; }
.sheet + .sheet { margin-top: var(--gut); }
.report > .sheet { margin-top: 0; }
.sheet__inner { border-radius: inherit; overflow: clip; }
.sheet__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 14px; border-bottom: 1px solid var(--ink); }

/* title block: a ruled grid of labeled cells */
.tb { display: grid; border-top: 1px solid var(--ink); }
.tb__cell { padding: 10px 14px 12px; border-right: 1px solid var(--ink); min-width: 0; }
.tb__cell:last-child { border-right: 0; }
.tb__cell .label { display: block; color: var(--ink-2); margin-bottom: 4px; }
.tb__val { font-size: 15px; overflow-wrap: anywhere; }

/* general notes */
.notes { padding: 18px 20px 22px; }
.notes h2 { font-stretch: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 12px; }
.notes ol { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 10px; }
.notes li { counter-increment: n; display: grid; grid-template-columns: 28px 1fr; max-width: 78ch; color: var(--ink-2); }
.notes li::before { content: counter(n) "."; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ── controls ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--sheet); cursor: pointer; text-decoration: none; font-stretch: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; transition: background-color 120ms ease, color 120ms ease, transform 140ms var(--ease-out); }
.btn:active:not([disabled]) { transform: scale(0.97); }
.btn--ink { background: var(--accent); color: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--wash); }
  .btn--ink:hover { background: var(--accent-deep); }
  .seg button:hover:not([aria-pressed="true"]), .rev > button:hover, .sc > button:hover, .rev > details > summary:hover,
  .mast nav a:hover:not([aria-current]) { background: rgb(0 0 0 / 0.06); }
  .balloon:hover { transform: translate(-50%, -50%) scale(1.15); }
}
.btn[disabled] { cursor: progress; opacity: 0.55; }
.btn svg { width: 17px; height: 17px; flex: none; }
.ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { appearance: none; margin: 2px 0 0; width: 20px; height: 20px; flex: none; border: 1px solid var(--ink); border-radius: 4px; background: var(--sheet); display: grid; place-content: center; cursor: pointer; }
.check input::before { content: ""; width: 12px; height: 12px; background: var(--ink); transform: scale(0.6); opacity: 0; transition: transform 140ms var(--ease-out), opacity 100ms ease; clip-path: polygon(14% 44%, 0 58%, 40% 100%, 100% 22%, 86% 8%, 38% 70%); }
.check input:checked { background: var(--accent); }
.check input:checked::before { transform: scale(1); opacity: 1; }
.check small { display: block; color: var(--ink-2); font-size: 13px; line-height: 1.45; margin-top: 2px; }

.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.seg button { border: 0; border-right: 1px solid var(--ink); background: var(--sheet); min-height: 36px; padding: 0 12px; cursor: pointer; font-stretch: var(--cond); font-weight: 600; font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.seg .n { font-variant-numeric: tabular-nums; font-weight: 500; opacity: 0.8; }

/* ── scan form, laid out as the title block of a blank sheet ── */
.intake { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.intake__lede { padding: clamp(24px, 4vw, 56px) clamp(20px, 3vw, 44px); border-right: 1px solid var(--ink); display: grid; align-content: space-between; gap: 32px; }
.intake h1 { font-stretch: var(--cond); font-weight: 500; font-size: clamp(44px, 7vw, 96px); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; }
.intake__lede p { font-size: 18px; max-width: 52ch; color: var(--ink-2); }
.intake__lede p b { font-weight: 400; color: var(--ink); }
.intake form { display: flex; flex-direction: column; }
.intake form .field:nth-child(2) { flex: 1; border-bottom: 0; }
.field { padding: 14px 18px 18px; border-bottom: 1px solid var(--ink); }
.field > .label { display: block; margin-bottom: 8px; color: var(--ink-2); }
.urlrow { display: flex; align-items: center; border-bottom: 2px solid var(--ink); }
.urlrow:focus-within { border-bottom-color: var(--accent-deep); }
/* the prefix never shrinks, and the input can never paint over it */
.urlrow span { flex: none; white-space: nowrap; font-size: 22px; color: var(--ink-3); padding-right: 6px; position: relative; z-index: 1; }
.urlrow input { flex: 1; min-width: 0; border: 0; -webkit-appearance: none; appearance: none; background: transparent; font-size: 26px; padding: 8px 0 8px; outline: none; }
/* the row's orange underline is the focus indicator; the global white halo would only measure as a 1:1 ring */
.urlrow input:focus-visible { box-shadow: none; }
.urlrow input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--sheet) inset; }
.urlrow:focus-within { box-shadow: 0 2px 0 0 var(--accent-deep); }
.urlrow input::placeholder { color: var(--ink-3); }
.field .check + .check { margin-top: 14px; }
.intake__go { padding: 18px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--ink); }
.intake__go .btn { min-height: 52px; padding: 0 28px; font-size: 15px; }
.err { color: var(--ink); font-weight: 500; display: flex; gap: 8px; align-items: flex-start; }
.err:empty, .ok:empty { display: none; }
.ok { font-weight: 500; }
.err::before { content: ""; width: 14px; height: 14px; margin-top: 4px; flex: none; background: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 5px); border: 1px solid var(--ink); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats .tb__cell { border-top: 0; }
.stats .big { font-stretch: var(--cond); font-size: 40px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── progress ─────────────────────────────────────────────── */
.plot { padding: clamp(20px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.plot h2 { font-stretch: var(--cond); font-weight: 500; font-size: clamp(30px, 4vw, 48px); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.plot__url { margin-top: 10px; color: var(--ink-2); overflow-wrap: anywhere; }
.plot__eta { margin-top: 18px; font-size: 18px; font-weight: 500; display: inline-block; padding: 6px 12px; background: var(--accent); border: 1px solid var(--ink); border-radius: var(--r); }
.plot__eta:empty { display: none; }
.live__eta { font-size: 14px; color: var(--ink-2); }
.live__eta:empty { display: none; }
.plot__time { margin-top: 24px; color: var(--ink); font-stretch: var(--cond); font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; font-weight: 500; }
.plot__frame { aspect-ratio: 4 / 3; border: 1px solid var(--rule-strong); border-radius: calc(var(--r-sheet) - 6px); overflow: hidden; position: relative; background: var(--wash) var(--dots) 0 0 / 14px 14px; }
.plot__frame svg { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); overflow: visible; }
.plot__frame path { fill: none; stroke: var(--accent-deep); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: plot 9s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.plot__frame path:nth-child(2) { animation-delay: 1.2s; } .plot__frame path:nth-child(3) { animation-delay: 2.4s; } .plot__frame path:nth-child(4) { animation-delay: 3.6s; }
@keyframes plot { 0% { stroke-dashoffset: 1; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.log { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.log li { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px dotted var(--rule-strong); font-size: 15px; }
.log li .t { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log li:last-child { font-weight: 500; }
.log li:last-child .t { color: var(--ink); }

/* ── report ───────────────────────────────────────────────── */
.report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr); gap: var(--gut); align-items: start; }
.drawing { position: sticky; top: calc(var(--mast-h) + 26px); }
.drawing .sheet__inner { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: calc(100vh - var(--mast-h) - 44px); min-height: 480px; }
.viewer { overflow: auto; background: var(--wash) var(--dots) 0 0 / 12px 12px; position: relative; overscroll-behavior: contain; scrollbar-gutter: stable; }
.viewer__page { position: relative; margin: 18px auto 28px; width: min(100% - 36px, var(--pw, 900px)); box-shadow: 0 0 0 1px var(--rule-strong); background: var(--sheet); border-radius: 4px; }
.viewer__page img { border-radius: 4px; }
.viewer__page img { width: 100%; height: auto; filter: grayscale(1) contrast(0.92) brightness(1.04); }
.viewer__page svg.marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cloud { fill: rgb(255 255 255 / 0); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; transition: opacity 160ms ease; }
.cloud--adv { stroke-dasharray: 5 4; }
.marks.has-sel .cloud:not(.is-sel) { opacity: 0.18; }
.cloud.is-sel { stroke-width: 3.5; fill: rgb(255 107 26 / 0.14); }
.balloon { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--accent); color: var(--ink); display: grid; place-content: center; font-stretch: var(--cond); font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0; line-height: 1; transition: transform 180ms var(--ease-out), opacity 160ms ease; }
.balloon--adv { background: var(--sheet); color: var(--ink); }
.balloon.is-sel { transform: translate(-50%, -50%) scale(1.15); }
.balloon:active { transform: translate(-50%, -50%) scale(0.95); }
.has-sel .balloon:not(.is-sel) { opacity: 0.3; }
.viewer__empty { padding: 40px 24px; text-align: center; color: var(--ink-2); }
.drawing__foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--ink); flex-wrap: wrap; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink-2); }
.legend i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink); vertical-align: -3px; margin-right: 6px; }
.legend i.f { background: var(--accent); }
.legend i.c { border-radius: 4px; border-color: var(--accent); border-width: 2px; }

.titleblock { display: grid; grid-template-columns: 1.1fr 1fr; }
.titleblock .tb__cell { border-bottom: 1px solid var(--ink); }

.score { grid-row: span 2; display: grid; align-content: space-between; gap: 10px; }
.score__n { font-stretch: var(--cond); font-weight: 500; font-size: clamp(88px, 9vw, 132px); line-height: 0.8; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.score__n small { font-size: 0.26em; letter-spacing: 0; color: var(--ink-2); margin-left: 4px; }
.score__bar { height: 10px; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; position: relative; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--rule) calc(10% - 1px) 10%); }
.score__bar span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.score--none .score__n { font-size: 44px; line-height: 1; }
.score--none .score__bar { background: repeating-linear-gradient(45deg, var(--ink) 0 1.5px, transparent 1.5px 7px); }
details.how { font-size: 13.5px; color: var(--ink-2); }
details.how summary { cursor: pointer; font-stretch: var(--cond); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; font-size: 12px; color: var(--ink); list-style: none; display: inline-flex; gap: 6px; align-items: center; min-height: 24px; }
details.how summary::-webkit-details-marker { display: none; }
details.how summary .ico { transition: transform 200ms var(--ease-out); width: 14px; height: 14px; }
details.how[open] summary .ico { transform: rotate(180deg); }
details.how ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }

.counts { display: flex; gap: 20px; flex-wrap: wrap; }
.counts div { min-width: 64px; }
.counts b { display: block; font-stretch: var(--cond); font-weight: 500; font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }

.blocked { margin: 14px; padding: 14px 16px; border: 1px solid var(--ink); border-radius: var(--r); background: repeating-linear-gradient(45deg, var(--accent-wash) 0 6px, var(--sheet) 6px 12px); }
.blocked b { font-weight: 600; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--ink); }


/* ── motion: every animation answers a state change; none on repeated keyboard actions ── */
:root { interpolate-size: allow-keywords; }
/* collapsible bodies: height via grid rows, hidden from assistive tech and Tab while closed */
.collapse { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0;
  transition: grid-template-rows 220ms var(--ease-out), opacity 160ms ease, visibility 0s linear 220ms; }
.collapse.is-open { grid-template-rows: 1fr; visibility: visible; opacity: 1;
  transition: grid-template-rows 280ms var(--ease-out), opacity 200ms ease 40ms, visibility 0s; }
.collapse__in { min-height: 0; overflow: hidden; }
/* native disclosures (score method, scan log, repair catalog) open the same way where supported */
details::details-content { height: 0; overflow: clip; transition: height 240ms var(--ease-out), content-visibility 240ms allow-discrete; }
details[open]::details-content { height: auto; }
/* a changed view fades in; the old one is gone at once */
.is-swap { animation: swap 220ms var(--ease-out); }
@keyframes swap { from { opacity: 0.35; transform: translateY(4px); } }
/* ring on a balloon after "Show on the page" */
.balloon.is-ping::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--accent-deep); animation: ping 700ms var(--ease-out) forwards; pointer-events: none; }
@keyframes ping { from { transform: scale(1); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.cloud { transition: opacity 160ms ease, stroke-width 160ms ease, fill 160ms ease; }
/* the live band collapses away when the scan ends */
.live { transition: opacity 240ms ease, transform 240ms var(--ease-out); }
.live.is-done { opacity: 0; transform: translateY(-6px); }
.live-wrap { transition-delay: 160ms; }
/* sections that appear after an action rise in */
#progress:not([hidden]), .report { animation: rise 320ms var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
/* the filter bar floats once stuck */
.filters { transition: box-shadow 200ms ease; }
.filters.is-stuck { box-shadow: 0 10px 20px -14px rgb(0 0 0 / 0.45); }
/* rows and pills respond to the pointer and to presses */
.rev > button, .sc > button, .rev > details > summary, .mast nav a, .seg button, .textbtn, .index a { transition: background-color 120ms ease, transform 140ms var(--ease-out); }
.seg button:active, .mast nav a:active, .textbtn:active { transform: scale(0.97); }
.rev > button:active, .sc > button:active { transform: scale(0.995); }
.score__bar span { width: 100% !important; transform-origin: left; transition: transform 600ms var(--ease-out); }

/* coverage map: one cell per WCAG criterion, status by fill (never color alone: pattern differs too) */
.cov { padding: 14px; border-bottom: 1px solid var(--ink); display: grid; gap: 12px; }
.cov__head { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.cov__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-2); }
.cov__legend li { display: inline-flex; gap: 6px; align-items: center; }
.cov__legend b { font-weight: 500; color: var(--ink); }
.cov__legend .cell { width: 14px; height: 14px; min-width: 0; padding: 0; }
.cov__grid { display: grid; gap: 8px; }
.cov__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: start; }
.cov__row > .label { padding-top: 6px; }
.cov__cells { display: flex; flex-wrap: wrap; gap: 4px; }
.cell { display: inline-grid; place-content: center; min-width: 44px; height: 26px; padding: 0 5px; border: 1px solid var(--ink); border-radius: 5px; font-size: 11.5px; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--ink); background: var(--sheet); transition: transform 140ms var(--ease-out); }
.cell:active { transform: scale(0.95); }
.cell--fail { background: var(--accent); font-weight: 500; }
.cell--review { background: linear-gradient(135deg, var(--accent) 0 50%, var(--accent-wash) 50%); }
.cell--pass { background: var(--sheet); }
.cell--na { background: repeating-linear-gradient(45deg, var(--wash) 0 3px, var(--sheet) 3px 6px); color: var(--ink-2); border-color: var(--rule-strong); }
.cell--person { border-style: dashed; color: var(--ink-2); }
.cov__note { font-size: 13.5px; color: var(--ink-2); }
.is-fresh .cell, .cov .cell { animation: arrive 260ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 12ms); }
@media (max-width: 560px) { .cov__row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* live scan band: sits on top of the schedule while findings stream in */
.live { padding: 14px 18px 12px; margin-bottom: var(--gut); border: 1px solid var(--ink); border-radius: var(--r-sheet); display: grid; gap: 8px; background: var(--accent-wash);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 28px -14px rgb(0 0 0 / 0.28); }
.live__row { display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; }
.live__stage { flex: 1 1 200px; font-weight: 500; }
.live__bar { height: 8px; border: 1px solid var(--ink); border-radius: 999px; background: var(--sheet) radial-gradient(circle at 1px 1px, var(--ink-3) 0.8px, transparent 1px) 0 0 / 4px 4px; position: relative; overflow: hidden; }
.live__bar span { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out); }
.live .log { margin-top: 8px; max-height: 240px; overflow: auto; }
.score--live .score__n { color: var(--ink-2); }
.score--live .score__bar span { background: repeating-linear-gradient(45deg, var(--accent) 0 3px, var(--accent-wash) 3px 6px); }
.caps.two { border: 1px solid var(--ink); background: var(--accent-wash); padding: 1px 7px; border-radius: 999px; }
.viewer__note { margin: 18px 18px 0; font-size: 14px; color: var(--ink-2); max-width: 70ch; }
.viewer__page--color img { filter: none; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } }
@keyframes arrive-b { from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } }
/* findings arriving while the scan runs: clouds draw on, rows and balloons fade up, 30ms apart */
.cloud.is-fresh { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 30ms); }
.cloud--adv.is-fresh { stroke-dasharray: none; animation-name: fade; }
.rev.is-fresh { animation: arrive 320ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.balloon.is-fresh { animation: arrive-b 320ms var(--ease-out) backwards; animation-delay: calc(120ms + var(--i, 0) * 30ms); }

/* revision schedule */
.sched { list-style: none; margin: 0; padding: 0; }
.sched__group { padding: 16px 14px 6px; border-bottom: 1px solid var(--ink); display: flex; gap: 10px; align-items: baseline; justify-content: space-between; background: var(--sheet); }
.sched__group h3 { font-stretch: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; }
.rev { border-bottom: 1px dotted var(--rule-strong); }
.rev > button { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border: 0; background: none; text-align: left; cursor: pointer; }
.rev.is-sel > button { background: var(--accent-wash); box-shadow: inset 4px 0 0 var(--accent); }
.rev > details > summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; cursor: pointer; list-style: none; }
.rev > details > summary::-webkit-details-marker { display: none; }
.rev > details > summary .ico { margin-top: 6px; transition: transform 200ms var(--ease-out); }
.rev > details[open] > summary .ico { transform: rotate(180deg); }
.rev > details > .rev__body { padding-top: 0; }
.rev__b { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-content: center; font-stretch: var(--cond); font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rev--failure .rev > details > summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; cursor: pointer; list-style: none; }
.rev > details > summary::-webkit-details-marker { display: none; }
.rev > details > summary .ico { margin-top: 6px; transition: transform 200ms var(--ease-out); }
.rev > details[open] > summary .ico { transform: rotate(180deg); }
.rev > details > .rev__body { padding-top: 0; }
.rev__b { background: var(--ink); color: var(--sheet); }
.rev--error .rev > details > summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; cursor: pointer; list-style: none; }
.rev > details > summary::-webkit-details-marker { display: none; }
.rev > details > summary .ico { margin-top: 6px; transition: transform 200ms var(--ease-out); }
.rev > details[open] > summary .ico { transform: rotate(180deg); }
.rev > details > .rev__body { padding-top: 0; }
.rev__b { border-style: dashed; }
.rev__t { font-weight: 500; font-size: 16px; line-height: 1.35; }
.rev__m { display: flex; gap: 6px 12px; flex-wrap: wrap; margin-top: 4px; color: var(--ink-2); font-size: 13.5px; }
.rev__m .caps { font-size: 11.5px; color: var(--ink); }
.rev__x { font-stretch: var(--cond); font-weight: 500; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px; }
.rev__x small { font-size: 12px; color: var(--ink-2); margin-right: 2px; }
.rev__body { padding: 2px 14px 18px 60px; display: grid; gap: 14px; }
.rev__body[hidden] { display: none; }
.spec { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.spec > .label { padding-top: 3px; color: var(--ink-2); }
.spec > div { max-width: 70ch; }
.spec--fix > div { color: var(--ink); }
.spec--guard { background: var(--accent-wash); border-top-color: var(--ink); padding: 10px 12px; margin: 0 -12px; border-radius: 0 0 6px 6px; }
.nodes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nodes li { display: grid; gap: 4px; }
.nodes code { display: block; padding: 6px 8px; background: var(--wash); border: 1px solid var(--rule); border-radius: 4px; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 12.5px; line-height: 1.45; }
.nodes button { justify-self: start; }
.risk { display: inline-flex; gap: 6px; align-items: center; }
.risk i { width: 10px; height: 10px; border: 1px solid var(--ink); display: inline-block; }
.risk--safe i { background: var(--ink); }
.risk--review i { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.linkrow { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 14px; }
.linkrow a { display: inline-flex; gap: 6px; align-items: center; }
.linkrow .ico { width: 14px; height: 14px; }
.textbtn { border: 0; background: none; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; }
.empty { padding: 28px 18px; color: var(--ink-2); }

.manual { padding: 16px 14px 20px; border-top: 1px solid var(--ink); display: grid; gap: 10px; }
.manual h3 { font-stretch: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; }
.manual p { color: var(--ink-2); max-width: 70ch; }

/* ── catalog pages (checks, laws) ─────────────────────────── */
/* ruled table: every cell bordered, vertical separators, a plain header band */
.law-group > h2 { display: flex; gap: 10px; align-items: baseline; }
.tablewrap { overflow-x: auto; }
.ruled { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.ruled th, .ruled td { text-align: left; vertical-align: top; padding: 12px 14px; border: 1px solid var(--rule-strong); }
.ruled tr > :first-child { border-left: 0; }
.ruled tr > :last-child { border-right: 0; }
.ruled tbody tr:last-child > * { border-bottom: 0; }
.ruled thead th { background: var(--wash); border-top: 0; border-bottom: 1px solid var(--ink); font-stretch: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); padding-block: 9px; }
.ruled tbody th { font-weight: 400; }
.ruled td { color: var(--ink-2); }
.ruled .w-entry { width: 40%; }
.ruled .w-date { width: 130px; }
.ruled .w-no { width: 48px; }
.ruled td.num { font-variant-numeric: tabular-nums; }
.ruled td.num > div + div { margin-top: 8px; }
.nowrap { white-space: nowrap; color: var(--ink); }
.law__name { display: block; font-weight: 500; font-size: 16px; line-height: 1.35; margin: 2px 0 6px; color: var(--ink); }
.law__sum { display: block; color: var(--ink-2); }
.law__rem { display: block; margin-top: 8px; color: var(--ink-2); }
.law__rem .label { color: var(--ink); margin-right: 4px; }
.ruled .unverified { margin-top: 8px; }
@media (max-width: 860px) {
  .ruled thead { display: none; }
  .ruled, .ruled tbody, .ruled tr, .ruled th, .ruled td { display: block; width: auto !important; }
  .ruled colgroup { display: none; }
  .ruled tr { border-bottom: 1px solid var(--ink); }
  .ruled th, .ruled td { border: 0; border-top: 1px dotted var(--rule-strong); padding: 10px 14px; }
  .ruled tr > :first-child { border-top: 0; }
  .ruled td[data-label]::before { content: attr(data-label); display: block; font-stretch: var(--cond); font-weight: 600; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
}

/* topic filters: one row of pill buttons that scrolls sideways rather than wrapping */
.chiprow { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; padding: 2px 40px 2px 2px; margin: -2px;
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.chiprow::-webkit-scrollbar { display: none; }
.chipbtn { flex: none; display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 999px; background: var(--sheet); cursor: pointer;
  font-stretch: var(--cond); font-weight: 600; font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; transition: transform 140ms var(--ease-out), background-color 120ms ease; }
.chipbtn:active { transform: scale(0.97); }
.chipbtn .n { font-variant-numeric: tabular-nums; font-weight: 500; opacity: 0.75; }
.chipbtn[aria-pressed="true"] { background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .chipbtn:hover:not([aria-pressed="true"]) { background: var(--wash); } }
.index-wrap { border-top: 1px solid var(--ink); overflow-x: auto; }
.index { width: 100%; border-collapse: collapse; font-size: 15px; }
.index th, .index td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px dotted var(--rule-strong); }
.index thead th { font-stretch: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--ink); background: var(--wash); }
.index tbody th { font-weight: 500; white-space: nowrap; }
.index tbody th a { text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.index tbody th a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); flex: none; }
.index tbody th a:hover { text-decoration: underline; }
.index td.num, .index th.num { text-align: right; font-variant-numeric: tabular-nums; width: 80px; }
.index td { color: var(--ink-2); }
.index tbody tr:last-child > * { border-bottom: 0; }
.pagehead { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.pagehead > div { padding: clamp(22px, 3.5vw, 44px) clamp(18px, 3vw, 40px); }
.pagehead > div + div { border-left: 1px solid var(--ink); display: grid; align-content: end; gap: 12px; }
.pagehead h1 { font-stretch: var(--cond); font-weight: 500; font-size: clamp(40px, 6vw, 80px); line-height: 0.95; text-transform: uppercase; }
.pagehead p { color: var(--ink-2); font-size: 17px; max-width: 58ch; margin-top: 18px; }
.filters { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; padding: 12px 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--sheet); position: sticky; top: 0; z-index: 5; }
.filters .search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0 10px; min-height: 38px; background: var(--sheet); }
.filters .search:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.filters .search input { border: 0; outline: none; flex: 1; min-width: 0; background: transparent; }

.sc { border-bottom: 1px dotted var(--rule-strong); }
.sc > button { width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px 150px 24px; gap: 14px; align-items: center; padding: 12px 14px; border: 0; background: none; text-align: left; cursor: pointer; }
.sc__id { font-variant-numeric: tabular-nums; font-weight: 500; }
.sc__name { font-weight: 500; }
.sc__name small { display: block; color: var(--ink-2); font-weight: 400; font-size: 13.5px; }
.auto { display: inline-flex; gap: 7px; align-items: center; }
.auto i { width: 22px; height: 10px; border: 1px solid var(--ink); border-radius: 999px; display: inline-block; flex: none; }
.auto--full i { background: var(--accent); }
.auto--partial i { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.auto--manual i { background: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 4px); }
.sc > button .ico { transition: transform 200ms var(--ease-out); }
.sc > button[aria-expanded="true"] .ico { transform: rotate(180deg); }
.sc__body { padding: 4px 14px 22px 92px; display: grid; gap: 14px; }
.sc__body[hidden] { display: none; }
.sc__body blockquote { margin: 0; color: var(--ink-2); max-width: 72ch; font-size: 15px; }
.sc__body ol, .sc__body ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12.5px; border: 1px solid var(--rule-strong); padding: 2px 8px; border-radius: 999px; background: var(--sheet); }
.chip--ours { border-color: var(--ink); }
.principle { padding: 22px 14px 10px; border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.principle h2 { font-stretch: var(--cond); font-weight: 500; font-size: 28px; text-transform: uppercase; line-height: 1; }

.law-group { border-top: 1px solid var(--ink); }
.law-group > h2 { padding: 22px 14px 12px; font-stretch: var(--cond); font-weight: 500; font-size: 30px; text-transform: uppercase; line-height: 1; border-bottom: 1px solid var(--ink); }
.law__src { display: grid; gap: 4px; }
.law__src a { display: inline-flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; }
.law__src .ico { margin-top: 4px; width: 13px; height: 13px; }
.unverified { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; border: 1px dashed var(--ink); padding: 1px 7px; }

.foot { padding: 0 var(--gut) 40px; font-size: 13.5px; max-width: 1680px; margin: 0 auto; }
.foot__plate { background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--r-sheet); padding: 14px 18px; color: var(--ink-2); }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .report { grid-template-columns: minmax(0, 1fr); }
  .drawing { position: static; }
  .drawing .sheet__inner { height: 78vh; }
}
@media (max-width: 860px) {
  .intake, .pagehead { grid-template-columns: minmax(0, 1fr); }
  .intake__lede { border-right: 0; border-bottom: 1px solid var(--ink); }
  .pagehead > div + div { border-left: 0; border-top: 1px solid var(--ink); }
  .plot { grid-template-columns: minmax(0, 1fr); }
  .plot__frame { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .tb__cell:nth-child(2) { border-right: 0; }
  .stats .tb__cell:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
      .sc > button { grid-template-columns: 52px minmax(0, 1fr) 24px; }
  .sc > button .lvl, .sc > button .auto { display: none; }
  .sc__body { padding-left: 14px; }
}
@media (max-width: 560px) {
  :root { --mast-h: 52px; --r-sheet: 14px; }
  .mast { top: 8px; margin: 8px 16px 0 !important; padding: 0 6px 0 12px; }
  .mast__word, .mast nav .long { display: none; }
  .mast nav a { padding: 0 11px; }
  .index tbody th { white-space: normal; }
  .index td:last-child { display: none; }
  .titleblock { grid-template-columns: minmax(0, 1fr); }
  .score { grid-row: auto; }
  .rev__body { padding-left: 14px; }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec--guard { margin: 0; }
  .urlrow input { font-size: 20px; }
  }

@media (prefers-reduced-motion: reduce) {
  /* keep fades that aid comprehension, drop movement */
  *, *::before, *::after { transition-property: opacity, background-color, color !important; }
  .plot__frame path, .cloud { animation: none !important; stroke-dashoffset: 0; }
  .collapse, .collapse.is-open { transition: opacity 120ms ease, visibility 0s !important; }
  #progress:not([hidden]), .report, .is-swap { animation: fade 160ms ease !important; }
  .balloon.is-ping::after { display: none; }
  .cov .cell { animation: none !important; }
  .plot__frame path { stroke-dashoffset: 0; }
}
@media (forced-colors: active) {
  .balloon, .rev__b, .btn--ink, .seg button[aria-pressed="true"], .mast nav a[aria-current="page"] { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 2px solid CanvasText; }
  .cloud { stroke: Highlight; }
}
@media print {
  body { background: #fff; }
  .mast nav, .intake, .toolbar, .drawing__foot .btn, .skip, .nodes button { display: none !important; }
  main { padding: 0; }
  .report { grid-template-columns: 1fr; }
  .drawing { position: static; }
  .drawing .sheet__inner { height: auto; }
  .viewer { overflow: visible; }
  .sheet { box-shadow: none; }
  .collapse { grid-template-rows: 1fr !important; visibility: visible !important; opacity: 1 !important; }
  .rev { break-inside: avoid; }
}

/* ── page-to-page: cross-document view transition; the floating header stays put ── */
@view-transition { navigation: auto; }
.mast { view-transition-name: mast; }
::view-transition-group(mast) { animation-duration: 0s; }
/* the old page softens and fades; the new one follows a beat later, easing up out of a light blur */
::view-transition-old(root) { animation: vt-out 240ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 460ms var(--ease-out) 120ms both; }
@keyframes vt-out { to { opacity: 0; filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
/* data sections hold their space while loading, then fade in, so nothing jumps */
[aria-busy="true"] { min-height: 60vh; }
[aria-busy="false"] { animation: fade-rise 260ms var(--ease-out); }
@keyframes fade-rise { from { opacity: 0; transform: translateY(4px); } }

/* ── display settings (this site only) ─────────────────────── */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url(fonts/atkinson-1.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url(fonts/atkinson-2.woff2) format("woff2"); }
.ds-trigger { position: fixed; left: 16px; bottom: 16px; z-index: 30; display: inline-flex; gap: 8px; align-items: center; min-height: 48px; padding: 0 16px 0 14px;
  border: 1px solid var(--ink); border-radius: 999px; background: rgb(255 255 255 / 0.72); -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.4); cursor: pointer; font-stretch: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase;
  transition: transform 140ms var(--ease-out), background-color 120ms ease; }
.ds-trigger .ico { width: 18px; height: 18px; }
.ds-trigger:active { transform: scale(0.96); }
.ds-trigger[aria-expanded="true"] { background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .ds-trigger:hover { background: var(--sheet); } .ds-trigger[aria-expanded="true"]:hover { background: var(--accent-deep); } }
.ds-panel { position: fixed; left: 16px; bottom: 76px; z-index: 31; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - var(--mast-h) - 120px);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--r-sheet);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.06), 0 24px 48px -20px rgb(0 0 0 / 0.45);
  transform-origin: bottom left; opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 180ms ease, transform 220ms var(--ease-out); }
.ds-panel.is-open { opacity: 1; transform: none; }
.ds-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 4px 18px; }
.ds-head h2 { font-stretch: var(--cond); font-weight: 500; font-size: 24px; text-transform: uppercase; }
.ds-close { width: 44px; height: 44px; display: grid; place-content: center; border: 1px solid var(--ink); border-radius: var(--r); background: var(--sheet); cursor: pointer; }
.ds-close:active { transform: scale(0.95); }
.ds-note { padding: 0 18px 10px; font-size: 13.5px; color: var(--ink-2); border-bottom: 1px solid var(--ink); }
.ds-body { overflow: auto; overscroll-behavior: contain; padding: 6px 18px 12px; display: grid; gap: 4px; }
.ds-body section, .ds-field { border: 0; margin: 0; padding: 12px 0; border-bottom: 1px dotted var(--rule-strong); min-width: 0; }
.ds-body .label { display: block; margin-bottom: 8px; color: var(--ink-2); padding: 0; }
.ds-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-opt { position: relative; }
.ds-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ds-opt span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 999px; font-size: 14px; background: var(--sheet); transition: background-color 120ms ease; }
.ds-opt input:checked + span { background: var(--accent); font-weight: 500; }
.ds-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.ds-help { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.ds-outline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 200px; overflow: auto; }
.ds-outline button { width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: var(--r); cursor: pointer; font-size: 14px; }
.ds-outline button .label { display: inline; margin: 0 6px 0 0; font-size: 10.5px; }
.ds-out--h2 button { padding-left: 20px; } .ds-out--h3 button { padding-left: 34px; }
@media (hover: hover) and (pointer: fine) { .ds-outline button:hover { background: var(--wash); } .ds-opt:hover span { background: var(--wash); } .ds-opt input:checked + span { background: var(--accent); } }
.ds-keys { margin: 0; display: grid; gap: 6px; font-size: 13.5px; }
.ds-keys div { display: grid; grid-template-columns: 150px 1fr; gap: 8px; }
.ds-keys dd { margin: 0; color: var(--ink-2); }
kbd { white-space: nowrap; font: inherit; font-size: 12px; padding: 1px 6px; border: 1px solid var(--ink); border-bottom-width: 2px; border-radius: 4px; background: var(--sheet); }
.ds-foot { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--ink); }
.ds-guide { position: fixed; left: 0; right: 0; top: 0; height: 44px; z-index: 29; pointer-events: none; display: none;
  background: rgb(255 107 26 / 0.12); border-block: 2px solid var(--accent-deep); }
@media print { .ds-trigger, .ds-panel, .ds-guide { display: none !important; } }

/* the preferences themselves */
html[data-pref-size="115"] body { zoom: 1.15; }
html[data-pref-size="130"] body { zoom: 1.3; }
html[data-pref-size="150"] body { zoom: 1.5; }
html[data-pref-spacing="wide"] body * { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
html[data-pref-spacing="wide"] p { margin-bottom: 2em; }
html[data-pref-contrast="high"] { --ink-2: #000; --ink-3: #000; --rule: #000; --rule-strong: #000; --wash: #fff; --ink: #000; }
html[data-pref-contrast="high"] body { background: #fff; }
html[data-pref-contrast="high"] .viewer, html[data-pref-contrast="high"] .plot__frame { background: #fff; }
html[data-pref-motion="reduce"] *, html[data-pref-motion="reduce"] *::before, html[data-pref-motion="reduce"] *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
html[data-pref-motion="reduce"] ::view-transition-old(root), html[data-pref-motion="reduce"] ::view-transition-new(root) { animation: none; }
html[data-pref-focus="strong"] :focus-visible { outline: 4px solid var(--ink) !important; outline-offset: 3px !important; box-shadow: 0 0 0 10px var(--accent) !important; }
html[data-pref-links="underline"] a { text-decoration: underline !important; text-decoration-thickness: 2px !important; }
html[data-pref-font="atkinson"] body, html[data-pref-font="atkinson"] button, html[data-pref-font="atkinson"] input { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; font-stretch: 100% !important; }
html[data-pref-guide="on"] .ds-guide { display: block; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .ds-panel { transition: opacity 120ms ease; transform: none; }
}
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 8px; }
.foot__links a { color: var(--ink); min-height: 24px; display: inline-flex; align-items: center; }
.foot { padding-bottom: 88px; } /* clear the display settings button */

/* policy pages */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.legal__toc { border-right: 1px solid var(--ink); padding: 22px 18px; }
/* the whole TOC (label and list) sticks as one panel just below the floating header */
.legal__tocin { position: sticky; top: calc(var(--mast-h) + 24px); max-height: calc(100vh - var(--mast-h) - 48px); overflow: auto; overscroll-behavior: contain; }
.legal__toc ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.legal__toc a[aria-current="location"] { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); font-weight: 500; }
.legal__toc a { display: block; padding: 6px 8px; border-radius: var(--r); text-decoration: none; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .legal__toc a:hover { background: var(--wash); } }
.legal__main { padding: clamp(20px, 3vw, 40px); display: grid; gap: 26px; max-width: 820px; }
.legal__main h1 { font-stretch: var(--cond); font-weight: 500; font-size: clamp(38px, 5vw, 64px); line-height: 0.95; text-transform: uppercase; }
.legal__draft { padding: 12px 14px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--accent-wash); font-weight: 500; }
.legal__sum { padding: 16px 18px; border: 1px solid var(--ink); border-radius: calc(var(--r-sheet) - 6px); background: var(--wash); }
.legal__sum ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.legal__main section { display: grid; gap: 10px; scroll-margin-top: calc(var(--mast-h) + 30px); }
.legal__main h2 { font-weight: 500; font-size: 21px; padding-top: 18px; border-top: 1px dotted var(--rule-strong); }
.legal__main p, .legal__main li { color: var(--ink-2); max-width: 70ch; }
.legal__main ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
mark.ph { background: var(--accent-wash); color: var(--ink); border: 1px dashed var(--accent-deep); border-radius: 4px; padding: 0 4px; font-size: 0.92em; }
@media (max-width: 860px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal__toc { border-right: 0; border-bottom: 1px solid var(--ink); } .legal__tocin { position: static; max-height: none; } }
.section-lede { padding: 14px 14px 12px; max-width: 80ch; color: var(--ink-2); }
.section-lede + .tablewrap { border-top: 1px solid var(--ink); }
.pagehead .stat { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.pagehead .stat b { font-stretch: var(--cond); font-weight: 500; font-size: 30px; line-height: 1; min-width: 2.2ch; }

/* stat rows: ruled like a table, an orange marker on each */
.statlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.statlist li { display: grid; grid-template-columns: 12px minmax(64px, max-content) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dotted var(--rule-strong); font-size: 15px; }
.statlist li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); }
.statlist b { font-stretch: var(--cond); font-weight: 500; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.statlist span { color: var(--ink-2); }

/* keep selected rows and anchors clear of the floating header */
.rev, .sc, .law-group, .legal__main section, [id^="sc-"] { scroll-margin-top: calc(var(--mast-h) + 30px); }
/* the sticky drawing ends above the Display settings button */
.drawing .sheet__inner { height: calc(100vh - var(--mast-h) - 112px); }
@media (max-width: 1100px) { .drawing .sheet__inner { height: 72vh; } }

.notice { padding: 12px 18px; font-size: 13px; color: var(--ink-2); border-top: 1px dotted var(--rule-strong); margin-top: auto; }
.consent { position: fixed; right: 16px; bottom: 16px; z-index: 32; width: min(440px, calc(100vw - 32px)); padding: 18px; display: grid; gap: 12px;
  background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--r-sheet); box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.45); animation: rise 260ms var(--ease-out); }
.consent h2 { font-stretch: var(--cond); font-weight: 500; font-size: 22px; text-transform: uppercase; }
.consent p { font-size: 14px; color: var(--ink-2); }
.consent fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.consent__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.consent__btns .btn { flex: 1 1 0; }

/* page outline as a tree: regions at the top, headings nested, connector lines show the hierarchy */
.ds-outline { max-height: 240px; overflow: auto; border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 6px; }
.ds-tree { list-style: none; margin: 0; padding: 0; }
.ds-tree .ds-tree { margin-left: 14px; padding-left: 10px; border-left: 1px dotted var(--rule-strong); }
.ds-tree li { position: relative; }
.ds-tree .ds-tree > li::before { content: ""; position: absolute; left: -10px; top: 18px; width: 8px; border-top: 1px dotted var(--rule-strong); }
.ds-tree button { width: 100%; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; border: 0; background: none; padding: 6px 6px; min-height: 36px; border-radius: var(--r); cursor: pointer; font-size: 14px; }
.ds-kind { justify-self: start; font-stretch: var(--cond); font-weight: 600; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--ink); border-radius: 999px; }
.is-region > button .ds-kind { background: var(--accent); }
.is-heading > button .ds-kind { background: var(--sheet); }
.is-region > button .ds-name { font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .ds-tree button:hover { background: var(--wash); } }

.ds-keytable { font-size: 13.5px; border: 1px solid var(--rule-strong); border-radius: var(--r); border-collapse: separate; border-spacing: 0; overflow: hidden; table-layout: auto; }
.ds-keytable th, .ds-keytable td { padding: 7px 10px; border: 0; border-bottom: 1px dotted var(--rule-strong); }
.ds-keytable tbody th { border-right: 1px solid var(--rule-strong); white-space: nowrap; }
.ds-keytable tr:last-child > * { border-bottom: 0; }
@media (max-width: 860px) { .ds-keytable, .ds-keytable tbody { display: table-row-group; } .ds-keytable { display: table; } .ds-keytable thead { display: table-header-group; } .ds-keytable tr { display: table-row; } .ds-keytable th, .ds-keytable td { display: table-cell; } }

.notes__table { font-size: 15px; }
.notes .tablewrap { border: 1px solid var(--rule-strong); border-radius: var(--r); }
.how__table { margin-top: 8px; width: 100%; }
.statlist--text li { grid-template-columns: 12px minmax(0, 1fr); }
.statlist--text span { color: var(--ink); }
.legal__sum ul.statlist { margin-top: 10px; padding: 0; }

fieldset.field { margin: 0; border: 0; border-bottom: 1px solid var(--ink); min-width: 0; }
fieldset.field > legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; color: var(--ink-2); }
fieldset.field > legend + * { clear: left; }
/* focused controls scroll clear of the floating header and the Display button */
html { scroll-padding-top: calc(var(--mast-h) + 24px); scroll-padding-bottom: 84px; }
q { quotes: "\201C" "\201D"; }
.rev__body code, .sc__body code { font-size: 0.86em; padding: 0 4px; background: var(--wash); border: 1px solid var(--rule); border-radius: 4px; }
@media (max-width: 560px) { .ds-trigger { padding: 0 14px; } .ds-trigger span { display: none; } }
/* stacked tables on small screens keep their header row for assistive tech (visually hidden, not display:none) */
@media (max-width: 860px) {
  .ruled thead { display: block !important; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.contact { display: grid; }
.contact .field { padding: 14px 14px 16px; }
.contact .field > .label { display: block; margin-bottom: 8px; color: var(--ink-2); }
.input { width: 100%; font-size: 16px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--sheet); }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.input[aria-invalid="true"] { border: 2px solid var(--ink); background: var(--accent-wash); }
textarea.input { resize: vertical; min-height: 140px; line-height: 1.5; }
.contact .intake__go { border-top: 0; }

.search__label { color: var(--ink-2); padding-right: 6px; border-right: 1px solid var(--rule-strong); white-space: nowrap; }

/* policy pages, wide screens: the sheet is fixed in the window, the Sections list stays put,
   and only the policy text scrolls inside its own column */
@media (min-width: 861px) {
  .sheet:has(> #legal) { height: calc(100vh - var(--mast-h) - 12px - 2 * var(--gut)); }
  #legal, #legal > .legal { height: 100%; }
  .legal { grid-template-rows: minmax(0, 1fr); }
  .legal__tocin { position: static; max-height: none; overflow: visible; }
  .legal__main { overflow-y: auto; overscroll-behavior: contain; max-width: none; padding-right: max(clamp(20px, 3vw, 40px), calc(100% - 860px)); scroll-padding-top: 16px; }
  .legal__main:focus-visible { outline-offset: -4px; }
  .legal__main section { scroll-margin-top: 16px; }
}
@media (min-width: 861px) {
  .legal__main { -webkit-mask-image: linear-gradient(transparent 0, #000 22px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(transparent 0, #000 22px, #000 calc(100% - 28px), transparent 100%); }
}
.check label { cursor: pointer; }

/* screen reader view */
.viewer__page.is-sr .marks, .viewer__page.is-sr .balloon { opacity: 0; pointer-events: none; }
.sr-cursor { position: absolute; border: 3px solid var(--ink); border-radius: 8px; box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9), 0 0 0 6px var(--accent); pointer-events: none;
  left: 0; top: 0; transition: transform 220ms var(--ease-out); will-change: transform; }
.srv { display: grid; }
.srv__note { padding: 12px 14px; font-size: 13.5px; color: var(--ink-2); border-bottom: 1px dotted var(--rule-strong); }
.srp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-bottom: 1px solid var(--ink); }
.srp__now { padding: 16px 14px; border-right: 1px solid var(--ink); display: grid; gap: 8px; align-content: start; background: var(--accent-wash); }
.srp__meta { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.srp__speech { font-size: 22px; line-height: 1.35; font-weight: 500; min-height: 3.2em; overflow-wrap: anywhere; }
.srp__speech::before { content: "\201C"; color: var(--accent-deep); } .srp__speech::after { content: "\201D"; color: var(--accent-deep); }
.srp__problem { font-size: 14px; font-weight: 500; padding: 6px 10px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--sheet); }
.srp__controls { padding: 14px; display: grid; gap: 10px; align-content: start; }
.srp__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.srp__row > .label { width: 64px; color: var(--ink-2); }
.srp .seg button { min-height: 32px; padding: 0 9px; font-size: 11.5px; }
.srv__filters { position: static; border-top: 0; }
.srv__list { max-height: 520px; overflow: auto; }
.srv__list thead th { position: sticky; top: 0; z-index: 1; }
.srv__say { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-size: 14.5px; color: var(--ink); }
.srv__say:hover { text-decoration: underline; }
.srv__flag { display: inline-block; margin-left: 8px; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--accent); border: 1px solid var(--ink); }
#srv-rows tr.is-cur > * { background: var(--accent-wash); }
#srv-rows tr.is-cur > td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
#view-seg .n { font-variant-numeric: tabular-nums; opacity: 0.85; }
@media (max-width: 860px) { .srp { grid-template-columns: minmax(0, 1fr); } .srp__now { border-right: 0; border-bottom: 1px solid var(--ink); } }

.srp { grid-template-columns: minmax(0, 1fr) !important; }
.srp__now { border-right: 0 !important; border-bottom: 1px solid var(--ink); }
.srp__controls { gap: 12px; }
.srp__row { align-items: flex-start; }
.srp__row > .label { padding-top: 10px; flex: none; }
.srp__pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.srp__pills .chipbtn { min-height: 34px; padding: 0 12px; }

/* phase tracker: six phases per width, done / now / waiting */
.stepper { display: grid; gap: 8px; margin-top: 14px; }
.stepper__row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: center; }
.stepper__row > .label { color: var(--ink-2); }
.stepper__phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--sheet); }
.phase { display: grid; grid-template-columns: 14px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; padding: 7px 8px; border-right: 1px solid var(--rule-strong); font-size: 12.5px; line-height: 1.25; min-width: 0; }
.phase:last-child { border-right: 0; }
.phase i { grid-row: span 2; width: 12px; height: 12px; margin-top: 2px; border-radius: 50%; border: 1.5px dashed var(--ink-3); }
.phase small { color: var(--ink-2); font-size: 11.5px; }
.phase--done i { background: var(--accent); border: 1px solid var(--ink); }
.phase--done { color: var(--ink); }
.phase--now { background: var(--accent-wash); font-weight: 500; }
.phase--now i { border: 2px solid var(--accent-deep); animation: pulse 1.2s var(--ease-out) infinite; }
.phase--wait { color: var(--ink-3); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(232 90 12 / 0.55); } 100% { box-shadow: 0 0 0 7px rgb(232 90 12 / 0); } }
.stepper__now { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; margin-top: 10px; font-size: 15px; }
.stepper__now .label { padding-top: 3px; color: var(--accent-deep); }
.live__found { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13.5px; }
.live__found .found { padding: 3px 10px; border: 1px solid var(--ink); border-radius: 999px; background: var(--sheet); }
.live__found .found b { font-weight: 500; }
@media (max-width: 860px) {
  .stepper__row, .stepper__now { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .stepper__phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phase:nth-child(3) { border-right: 0; } .phase:nth-child(-n+3) { border-bottom: 1px solid var(--rule-strong); }
}
@media (prefers-reduced-motion: reduce) { .phase--now i { animation: none; } }
html[data-pref-motion="reduce"] .phase--now i { animation: none; }

/* FAQ: grouped accordions, an orange marker per group, a plus that turns into a cross */
.faq__title { font-stretch: var(--cond); font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: 0.95; text-transform: uppercase; }
.faq__group { border-top: 1px solid var(--ink); }
.faq__group:first-child { border-top: 0; }
.faq__cat { display: flex; gap: 10px; align-items: center; padding: 20px 14px 10px; font-stretch: var(--cond); font-weight: 500; font-size: 24px; text-transform: uppercase; line-height: 1; }
.faq__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); flex: none; }
.faq__item { border-top: 1px dotted var(--rule-strong); position: relative; transition: background-color 200ms ease; }
.faq__item.is-open { background: var(--accent-wash); }
.faq__item h4 { margin: 0; font-weight: 400; }
.faq__q { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 16px; align-items: center; text-align: left; padding: 14px 14px 14px 18px; border: 0; background: none; cursor: pointer; font-size: 17px; font-weight: 500; line-height: 1.35; transition: transform 140ms var(--ease-out); }
.faq__q:active { transform: scale(0.995); }
@media (hover: hover) and (pointer: fine) { .faq__item:not(.is-open) .faq__q:hover { background: var(--wash); } .faq__q:hover .faq__icon { border-color: var(--ink); background: var(--accent-wash); } }
.faq__icon { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule-strong); position: relative; justify-self: end; transition: transform 260ms var(--ease-out), background-color 160ms ease, border-color 160ms ease; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--accent); border-color: var(--ink); }
.faq__a { padding: 0 60px 18px 18px; color: var(--ink-2); max-width: 82ch; line-height: 1.6; }
.faq__a a { color: var(--ink); }
@media (max-width: 560px) { .faq__a { padding-right: 14px; } .faq__q { font-size: 16px; } }

/* screen reader checklist */
.srk__bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 0 14px 14px; }
.srk__count { font-weight: 500; }
.srk__say { display: block; font-weight: 500; color: var(--ink); }
.srk__heard { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.srk__heard .ds-opt span { min-height: 34px; font-size: 13px; padding: 0 11px; }
.srk .input { padding: 7px 10px; font-size: 14px; }
.srk-grid { font-size: 13.5px; }
.srk-grid thead th { white-space: normal; }
kbd.kbd-wrap { display: inline; white-space: normal; line-height: 1.8; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.plot { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
/* stat rows share one set of columns, so labels line up whatever the number's width */
.statlist { display: grid; grid-template-columns: 12px minmax(64px, max-content) minmax(0, 1fr); column-gap: 12px; }
.statlist li { grid-column: 1 / -1; grid-template-columns: subgrid; }
.statlist--text { grid-template-columns: 12px minmax(0, 1fr); }

/* multi-page scan: more addresses on the form, and one table row per page */
details.more { margin-top: 14px; }
details.more textarea { margin-top: 10px; min-height: 104px; font: inherit; font-size: 15px; line-height: 1.5; }
details.more small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
#batch:not([hidden]) { animation: rise 320ms var(--ease-out); }
.batch { padding: clamp(20px, 4vw, 48px); display: grid; gap: 24px; }
.batch__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; }
.batch__head h1 { font-stretch: var(--cond); font-weight: 500; font-size: clamp(30px, 4vw, 48px); line-height: 1; text-transform: uppercase; }
.batch__head .plot__eta { margin-top: 0; }
.batch .tablewrap { border: 1px solid var(--ink); border-radius: calc(var(--r-sheet) - 6px); }
.batch__table .w-status { width: 30%; }
.batch__table .w-score { width: 84px; }
.batch__table .w-fails { width: 120px; }
.batch__table .w-open { width: 128px; }
.batch__table td, .batch__table th { vertical-align: middle; }
.batch__table .page { color: var(--ink); overflow-wrap: anywhere; }
.batch__table .page small { display: block; color: var(--ink-2); font-size: 13px; }
.batch__table .big { font-stretch: var(--cond); font-size: 26px; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bstat { display: grid; gap: 6px; }
.bstat__bar { height: 6px; border: 1px solid var(--ink); border-radius: 3px; overflow: hidden; background: var(--sheet); }
.bstat__bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; transition: transform 600ms var(--ease-out); }
.bstat--running .bstat__bar span { background: repeating-linear-gradient(45deg, var(--accent) 0 3px, var(--accent-wash) 3px 6px); }
.bstat__label { font-stretch: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: 8px; align-items: center; }
.bstat__label i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); background: var(--sheet); }
.bstat--running .bstat__label i { background: var(--accent); animation: blink 1.2s ease-in-out infinite; }
.bstat--done .bstat__label i { background: var(--ink); }
.bstat--error .bstat__label i { background: repeating-linear-gradient(45deg, var(--ink) 0 1.5px, transparent 1.5px 4px); }
.bstat small { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.batch__table tbody tr { transition: background-color 160ms ease; }
.batch__table tbody tr.is-new-done { animation: donewash 1200ms var(--ease-out); }
@keyframes donewash { from { background: var(--accent-wash); } to { background: transparent; } }
@keyframes blink { 50% { opacity: 0.35; } }
.batch__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.batch__foot .ds-help { max-width: 70ch; margin: 0; }
.batch-back { margin: 0 0 12px; }
.batch-back a { display: inline-flex; gap: 8px; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--sheet); color: var(--ink); text-decoration: none; font-stretch: var(--cond); font-weight: 600; font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; transition: background-color 120ms ease, transform 140ms var(--ease-out); }
.batch-back a:active { transform: scale(0.97); }
@media (hover: hover) { .batch-back a:hover { background: var(--wash); } }
@media (prefers-reduced-motion: reduce) { .bstat--running .bstat__label i, .batch__table tbody tr.is-new-done { animation: none; } .bstat__bar span { transition: none; } }
@media (max-width: 860px) {
  .batch__table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .batch__table td[data-label="No."] { display: none; }
  .batch__table td.page, .batch__table td[data-label="Status"] { grid-column: 1 / -1; }
  .batch__table td.page { border-top: 0; }
  .batch__table td[data-label="Failures"], .batch__table td[data-label="Report"] { border-left: 1px dotted var(--rule-strong); }
}
details.more .more__label { display: block; margin-top: 12px; font-size: 14px; color: var(--ink); }
details.more .more__label + textarea { margin-top: 6px; }
.batch__common { display: grid; gap: 10px; }
.batch__common h3 { font-stretch: var(--cond); font-weight: 500; font-size: 24px; line-height: 1.1; text-transform: uppercase; }
.batch__common .ds-help { margin: 0; max-width: 70ch; }
.batch__table .w-crit { width: 30%; }
.batch__table .w-pages { width: 190px; }
.pagedots { display: flex; gap: 4px; margin-top: 6px; }
.pagedots i { width: 12px; height: 12px; border: 1px solid var(--ink); border-radius: 3px; background: var(--sheet); }
.pagedots i.on { background: var(--accent); }
@media (max-width: 860px) {
  .batch__common .batch__table td:first-child { grid-column: 1 / -1; border-top: 0; }
  .batch__common .batch__table td[data-label="WCAG criterion"] { grid-column: 1 / -1; }
  .batch__common .batch__table td[data-label="Pages"] { grid-column: span 2; }
  .batch__common .batch__table td[data-label="Pages"] .nowrap { white-space: normal; }
  .batch__common .batch__table td[data-label="Instances"] { border-left: 1px dotted var(--rule-strong); }
}
/* VoiceOver guide */
.vo-key { display: grid; gap: 8px; margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink); max-width: 46ch; }
.vo-key .label { color: var(--ink-2); }
.vo-lede { padding: 14px 14px 12px; max-width: 78ch; color: var(--ink-2); }
.vo-lede + .tablewrap { border-top: 1px solid var(--rule-strong); }
.vo-warn { margin: 4px 14px 16px; display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--ink); border-radius: var(--r); background: repeating-linear-gradient(45deg, var(--accent-wash) 0 6px, var(--sheet) 6px 12px); max-width: 78ch; }
.vo-warn > span:last-child { color: var(--ink); }
.vo-h3 { padding: 18px 14px 10px; font-stretch: var(--cond); font-weight: 500; font-size: 20px; text-transform: uppercase; line-height: 1.1; border-top: 1px solid var(--rule-strong); }
.law-group .ruled code { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .ruled td.num[data-label="Step"] { padding-bottom: 0; font-stretch: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); }
  .ruled td.num[data-label="Step"]::before { display: inline; content: "Step "; margin: 0; font-size: inherit; color: inherit; }
  .ruled td.num[data-label="Step"] + :is(td, th) { border-top: 0; padding-top: 4px; }
  .ruled td.num[data-label="Step"] + td::before { display: none; }
}
/* stacked criterion links: each one a 24px-tall target (WCAG 2.5.8) */
.ruled td[data-label="WCAG criterion"] a { display: inline-block; min-height: 24px; line-height: 24px; }

/* pricing: row names read as plain text, prices set like the stat numbers, the Report column
   carries the accent wash, and the buy buttons fill their cell */
.pricing tbody th { color: var(--ink); font-weight: 500; }
.pricing__n { font-stretch: var(--cond); font-weight: 500; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); margin-right: 4px; }
.pricing td:nth-child(3) { background: var(--accent-wash); }
.pricing__go .btn { width: 100%; white-space: normal; text-align: center; padding-block: 10px; }
#buy-error:empty { display: none; }
#buy-error { margin-top: 14px; }
@media (max-width: 860px) {
  .pricing tbody th { background: var(--wash); }
  .pricing__go th { display: none; }
}

/* home intro as points: the stat-row list at body size, the count in ink */
.intake__points { max-width: 56ch; }
.intake__points li { font-size: 17px; line-height: 1.45; align-items: start; }
.intake__points li::before { margin-top: 0.45em; }
.intake__points b { font-weight: 400; color: var(--ink); font-size: inherit; font-stretch: normal; }
.intake__points span span { color: inherit; }

/* orange controls are physical keys, like the logomark: lit from above (light top edge, darker
   base), resting on a soft orange shadow, and pressed in when active. Black text stays at least
   6.4:1 on the darkest stop (#ee5c0e). Forced colors keep their own system styles. */
:root {
  --key-orange: linear-gradient(180deg, #ffa56e 0%, #ff7a2e 46%, #ee5c0e 100%);
  --key-orange-down: linear-gradient(180deg, #ee5c0e 0%, #ff7a2e 100%);
  --key-lift: inset 0 1px 0 rgb(255 255 255 / 0.62), inset 0 -2px 0 rgb(130 42 0 / 0.24), 0 1px 1px rgb(0 0 0 / 0.2), 0 4px 10px -4px rgb(232 90 12 / 0.6);
  --key-press: inset 0 2px 4px rgb(110 36 0 / 0.38), inset 0 -1px 0 rgb(255 255 255 / 0.28);
}
@media not (forced-colors: active) {
  .btn--ink, .skip, .chipbtn[aria-pressed="true"], .ds-trigger[aria-expanded="true"], .ds-opt input:checked + span, .faq__item.is-open .faq__icon {
    background: var(--key-orange); box-shadow: var(--key-lift); }
  .mast nav a[aria-current="page"] { background: var(--key-orange); box-shadow: inset 0 0 0 1px var(--ink), var(--key-lift); }
  .check input:checked { background: var(--key-orange); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -1px 0 rgb(130 42 0 / 0.25), 0 1px 2px rgb(232 90 12 / 0.45); }
  .btn--ink:active:not([disabled]), .chipbtn[aria-pressed="true"]:active, .mast nav a[aria-current="page"]:active, .ds-trigger[aria-expanded="true"]:active {
    background: var(--key-orange-down); box-shadow: var(--key-press); }
  .mast nav a[aria-current="page"]:active { box-shadow: inset 0 0 0 1px var(--ink), var(--key-press); }
  @media (hover: hover) and (pointer: fine) {
    .btn--ink:hover:not([disabled]) { background: var(--key-orange); filter: brightness(1.05) saturate(1.05); }
  }
}

/* defined terms: dotted underline, a button that opens a short definition. Desktop: a box under
   the term, also on hover (it stays while the pointer is on the term or the box; Escape closes).
   Phone: a sheet from the bottom with a Close button. Native popover: light dismiss, top layer. */
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; text-decoration: underline dotted 1.5px; text-underline-offset: 4px; text-decoration-color: var(--ink-2); }
.term:hover, .term[aria-expanded="true"] { text-decoration-color: var(--accent-deep); }
.defpop { margin: 0; width: min(360px, calc(100vw - 32px)); padding: 16px 18px; border: 1px solid var(--ink); border-radius: calc(var(--r-sheet) - 4px); background: var(--sheet); color: var(--ink-2); font-size: 15px; line-height: 1.5;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.08), 0 14px 32px -14px rgb(0 0 0 / 0.4); display: none; }
.defpop:popover-open { display: grid; gap: 10px; }
.defpop__h { color: var(--ink); font-stretch: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; }
.defpop__close { justify-self: start; min-height: 36px; }
@media (min-width: 761px) { .defpop { position: fixed; inset: auto; } .defpop__close { display: none; } }
@media (max-width: 760px) {
  .defpop { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-bottom: 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); font-size: 16px; }
  .defpop::backdrop { background: rgb(0 0 0 / 0.28); }
}
@media (min-width: 861px) { .intake__points li { font-size: 20px; } }

/* five nav links do not fit beside the mark under ~440px (WCAG 1.4.10 reflow at 320px):
   the nav takes its own row under the mark and wraps */
@media (max-width: 440px) {
  .mast { flex-wrap: wrap; justify-content: center; row-gap: 0; padding: 4px 6px 6px; }
  .mast__name { padding: 6px 0 2px; }
  .mast nav { width: 100%; flex-wrap: wrap; justify-content: center; }
  .mast nav a { padding: 0 9px; min-height: 40px; }
}

@media (max-width: 440px) {
  /* a sticky two-row header would cover a fifth of a small screen and the focused element under it */
  .mast { position: relative; top: 0; }
  /* fieldsets default to their widest content; let the contact topics shrink and wrap */
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact fieldset { min-width: 0; }
  .contact .ds-opt span { white-space: normal; }
  .contact .btn { white-space: normal; text-align: center; padding-block: 10px; }
}