/*
 * The AI search visibility audit. A standalone destination: this page loads
 * kit.css and this sheet, and nothing else. The frame below (shell, header,
 * step rail, screen, footer, lever picker) was borrowed from guided.css until
 * 2026-09-17, which quietly tied this demo to the social demo's stylesheet and
 * to that sheet's own --g-* locals. It is local now, so a change over there
 * cannot move this page.
 *
 * The two action shapes come from the kit itself, k-primary and k-text, rather
 * than from a copy here: there is one 44px capsule and one plain-text secondary
 * in this house, and a demo is not the place to grow a third.
 *
 * Every colour, radius, spacing step and duration is a kit token, so the demo
 * follows the kit's light and dark modes without a second palette.
 */

/* --- the frame ----------------------------------------------------------- */

.a-shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100svh - var(--s-7));
  max-width: 1200px;
  margin: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-shell);
  box-shadow: var(--shadow-shell);
  /* clip, not hidden: hidden makes the shell a scroll container, and the fix
     screen's sticky tally bar would then stick to the shell instead of the
     viewport. clip rounds the corners the same way and creates no scrollport. */
  overflow: clip;
}
.a-header { display: flex; align-items: center; gap: var(--s-4); height: 82px; padding: 0 var(--s-6); border-bottom: 1px solid var(--line); }
.a-brand { display: flex; align-items: center; }
.a-swirl { width: 34px; height: 34px; }
.a-header-actions { margin-left: auto; display: flex; gap: var(--s-2); }

/* The step rail. A step already visited is a link back; one not yet reached is
   disabled, so the rail never promises a screen the session cannot render. */
.a-steps { display: flex; align-items: center; justify-content: center; gap: var(--s-5); padding: var(--s-5) var(--s-4) 0; }
.a-steps button {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: var(--control-h-compact); padding: 0 var(--s-2);
  border: 0; border-radius: var(--r-field); background: none;
  color: var(--muted); font: inherit; font-size: var(--fs-ui); cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}
.a-steps button > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-control); }
.a-steps button[aria-current='step'] { color: var(--ink); }
.a-steps button[aria-current='step'] > span { background: var(--accent-soft); color: var(--accent); }
.a-steps button:hover:not(:disabled) { color: var(--ink); }
.a-steps button:disabled { color: var(--faint); cursor: default; }
.a-steps > i { width: 40px; height: 1px; background: var(--line-strong); }

.a-screen { width: 100%; padding: var(--s-7) var(--s-8) var(--s-7); animation: k-arrive var(--t-arrive) var(--ease-out) both; }
.a-screen h1 { margin: 0; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--fw-semibold); }
.a-screen h1:focus { outline: none; }
.a-screen-heading { margin-bottom: var(--s-6); text-align: center; }
.a-screen-heading .k-eyebrow { margin-bottom: var(--s-4); }
.a-screen-heading > p { margin: var(--s-4) auto 0; max-width: 64ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); }
.a-start-note { display: block; font-size: var(--fs-small); color: var(--muted); }

/* The lever picker: one selectable row per fix, tinted when it is applied. */
/* The fixes are a queue you watch work, not a list you read. Each card holds
   one of three phases, and the reasoning sits behind its own summary so it is
   there for anyone who wants it and in nobody's way. */
.a-levers { list-style: none; display: grid; gap: var(--s-2); margin: 0 0 var(--s-6); padding: 0; }
.a-lever {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface);
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.a-lever button {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 52px; padding: 10px var(--s-3) 6px;
  border: 0; background: none; color: var(--muted);
  font: inherit; font-size: var(--fs-ui); text-align: left; cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}
.a-lever button[disabled] { cursor: default; }
.a-lever button:hover:not([disabled]) { color: var(--ink); }
.a-lever-icon { flex: none; display: flex; }
.audit-demo .a-lever-icon svg { width: 18px; height: 18px; }
.a-lever-label { flex: 1; min-width: 0; }
.a-lever-state {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--faint);
}
.audit-demo .a-lever-state svg { width: 13px; height: 13px; stroke-width: 2.5; }
.a-lever[data-phase='applying'] { border-color: var(--accent); background: var(--accent-soft); }
.a-lever[data-phase='applying'] button, .a-lever[data-phase='applying'] .a-lever-state { color: var(--accent); }
.a-lever[data-phase='done'] { border-color: color-mix(in oklab, var(--a-hit) 45%, var(--line)); background: color-mix(in oklab, var(--a-hit) 8%, var(--surface)); }
.a-lever[data-phase='done'] button { color: var(--ink); }
.a-lever[data-phase='done'] .a-lever-state { color: var(--a-hit); }
/* Work happening, on the card it is happening to. */
.a-lever-sweep { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.a-lever[data-phase='applying'] .a-lever-sweep { animation: a-sweep 720ms var(--ease-out) forwards; }
@keyframes a-sweep { to { transform: scaleX(1); } }
.a-lever-why { padding: 0 var(--s-3) 4px; }
.a-lever-why > summary { min-height: 34px; align-content: center; cursor: pointer; font-size: var(--fs-small); color: var(--faint); }
.a-lever-why > summary:hover { color: var(--muted); }
.a-lever-why p { margin: var(--s-2) 0 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--muted); }
.a-lever-note { color: var(--faint); }

/* One button, and the number it moves. The bar is sticky so the number is on
   screen at the moment it counts: showResult() used to scroll the re-scored
   board to the top and carry the tally off with it. Glass over the surface is
   invisible at rest and reads as a bar only once content scrolls under it. */
.a-fix-run {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-4)) var(--s-4); padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .a-fix-run { background: color-mix(in srgb, var(--surface) 92%, transparent); }
}
.a-fix-tally { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: 0; }
.a-fix-tally b {
  font-size: clamp(36px, 6vw, 52px); font-weight: var(--fw-regular); line-height: 1;
  letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; color: var(--a-hit);
}
.a-fix-tally span { flex: 1 1 12rem; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--muted); }

/* A cell the lever just repaired says so, once. */
.a-cell[data-lifted='true'] .a-chip { animation: a-land 620ms var(--ease-out) both; }
@keyframes a-land {
  0% { transform: scale(0.8); opacity: 0.3; }
  55% { transform: scale(1.07); }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .a-lever[data-phase='applying'] .a-lever-sweep { animation: none; transform: scaleX(1); }
  .a-cell[data-lifted='true'] .a-chip { animation: none; }
}

.a-footer {
  margin: auto var(--s-6) 0; padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  color: var(--muted); font-size: var(--fs-small);
}
.a-footer > span { display: flex; align-items: center; gap: 7px; margin-right: auto; }
.a-footer i { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.a-footer a { display: flex; align-items: center; gap: var(--s-2); min-height: 28px; color: inherit; text-decoration: none; }
.a-footer a:hover { color: var(--ink); }
.a-footer svg, .a-steps svg { width: var(--icon-sm); height: var(--icon-sm); }

/* kit.css draws every icon at 20px in currentColor. This sheet only says where
   an icon is smaller, or, for the chart, that it is not an icon at all.
   stroke and stroke-width are inherited SVG properties, so this icon rule was
   reaching every <text> in the chart: an 11-unit glyph wearing a 1.7-unit
   near-white outline, which closed the counters and turned the ticks into
   blobs. Text in an svg is type, so it fills and never strokes. */
.audit-demo svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.audit-demo svg text { stroke: none; stroke-width: 0; }

.audit-demo {
  /*
   * Status, not series. A miss is bad and a hit is good, so they wear the two
   * colours everyone already reads that way, and the three hit tiers ramp from
   * that one green so the board still reads as ordinal rather than as four
   * unrelated states.
   *
   * Red against green is the pair a deuteranope cannot separate: the obvious
   * choices, #ff6b6b and #46d38a, came back at delta E 5.8 deuteranopic, under
   * even the 6-to-8 floor. These sit at 27.7 dark and 21.2 light, which they
   * buy by differing in LIGHTNESS as well as hue, so the heavy one stays heavy
   * for a reader who sees no hue at all. Every chip also carries an icon and a
   * word, because a status colour is never allowed to be the only signal.
   *
   * The categorical lightness-band check fails these two on purpose: holding
   * good and bad in one band is exactly what a status pair must not do.
   */
  /* Every chip state clears 4.5:1 at its 11px, measured on the colour the mix
     actually produces rather than on the token. The first pass shipped three
     states under it: Missed at 3.20, Recommended at 3.68 and light Named at
     3.01, two of them worse than the lavender ramp they replaced. */
  --a-miss: #f07a7a;
  --a-hit: #7ff0b0;
  --a-hit-ink: #10291c;
  --a-named: var(--a-hit);
  /* 55% put this chip in the mid-tone trough where neither ink reaches 4.5. */
  --a-recommended: color-mix(in oklab, var(--a-hit) 42%, var(--surface));
  --a-mentioned: color-mix(in oklab, var(--a-hit) 26%, var(--surface));
  /* The run ring's ladder, per theme (the light block re-picks two of them).
     See the run section for why it climbs in lightness. */
  /* 12% on dark, 8% on light: enough that the unfinished ring reads as a
     circle from the first frame, not so much that a waiting mark competes
     with a Missed one (1.40:1 between them on dark). */
  --a-run-track: color-mix(in oklab, var(--ink) 12%, var(--surface));
  --a-run-absent: color-mix(in oklab, var(--a-miss) 36%, var(--surface));
  --a-run-mentioned: color-mix(in oklab, var(--a-hit) 58%, var(--surface));
  --a-run-recommended: color-mix(in oklab, var(--a-hit) 80%, var(--surface));
  --a-run-named: var(--a-hit);

  /* The curve's two series. The pair the panel shipped with, accent against
     --muted, failed the normal-vision separation check outright: 9.3 delta E,
     where 15 is the floor, so full-colour readers could not reliably tell the
     lines apart. Amber is the same second series /receipts already draws, and
     the pair clears CVD and normal-vision separation on both grounds. Each line
     still carries a direct end label, so hue is never the only identity. */
  --a-series-branded: var(--accent);
  --a-series-all: #ffb44d;
}
[data-theme='light'] .audit-demo {
  --a-series-all: #b06500;
  /* Both re-picked against the light surface: the dark-ground pair drops under
     3:1 on white, and this pair clears contrast and CVD separation on it. */
  --a-miss: #8c1f1f;
  /* Deeper and a little cooler than the first pick. #17a862 left near-white ink
     on the Named chip at 3.01 and the meter fill at 2.61 against its track,
     under even the 3:1 floor for a graphical object. This clears both, and the
     cooler cast buys back separation the darkening would otherwise have cost:
     11.6 delta E deuteranopic against the miss red, against 9.0 for a pure
     green at the same lightness. */
  --a-hit: #0b7a6b;
  --a-hit-ink: #f4fff9;
  /* Missed as strong as light allows before it meets Mentioned, and Mentioned a
     step deeper to make room: 1.67:1 Missed against the surface, 1.40 against a
     waiting mark, 1.53 against Mentioned. */
  --a-run-track: color-mix(in oklab, var(--ink) 8%, var(--surface));
  --a-run-absent: color-mix(in oklab, var(--a-miss) 28%, var(--surface));
  --a-run-mentioned: color-mix(in oklab, var(--a-hit) 62%, var(--surface));
}

.a-app { min-width: 0; }
.a-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- cards and the setup ------------------------------------------------- */

.a-card {
  min-width: 0;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.a-card-kicker {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-eyebrow);
  color: var(--muted);
}
.a-card-kicker svg { width: 15px; height: 15px; }
.a-card-note, .a-sample-note {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--faint);
}
.a-sample-note { display: flex; align-items: flex-start; gap: var(--s-2); }
.a-sample-note svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }

.a-setup { max-width: 58rem; margin-inline: auto; }

.a-prompt-list, .a-assistant-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.a-prompt-list li { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink); }
.a-assistant-list li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--ink); }
.a-assistant-list svg { width: 15px; height: 15px; color: var(--muted); }
.a-kind {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 3px;
}

.a-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.a-actions .a-start-note { margin: 0; }
/* Breathing room for the reveal after an action, read from the computed value
   by revealNext in ai-search.mjs. A token, not an inline style: the demo CSP
   refuses a style attribute. */
#a-skip { scroll-margin-block: var(--s-5); }
/* Skip sits under the run heading, not below the board, so it is on screen from the first frame
   at any viewport height. Alignment comes from the heading. */
.a-run-skip { margin-top: var(--s-4); }

/* --- the run: a ring that closes ------------------------------------------ */

/* No card. The ring stands on the surface by itself, with the count it is
   counting in the middle, the question being asked under it, and the key. */
.a-run-screen .a-screen-heading { margin-bottom: var(--s-4); }
.a-run-panel { display: grid; justify-items: center; gap: var(--s-4); max-width: 44rem; margin-inline: auto; }
.a-dial { position: relative; display: grid; width: min(100%, 300px); aspect-ratio: 1; }
.a-dial > * { grid-area: 1 / 1; min-width: 0; }
/* kit.css sizes every svg as a 20px icon. This one is the dial itself. */
.audit-demo .a-dial-ring { width: 100%; height: 100%; overflow: visible; }

/* One mark per answer. Waiting is a thin dash in the track colour, being asked
   is the accent, and a landed answer swells to full weight in its tier's
   colour, so waiting and landed differ in shape as well as in colour. */
.a-dial-ring path { fill: none; stroke: var(--a-run-track); stroke-width: 6; stroke-linecap: round; }
.a-dial [data-run-cell].is-asking path { stroke: var(--accent); stroke-width: 9; }
.a-dial [data-run-cell][data-tier] path { stroke: var(--a-tier); stroke-width: 14; }
/* A mention glows a little: the answers this demo is looking for. */
.a-dial [data-run-cell]:is([data-tier='mentioned'], [data-tier='recommended'], [data-tier='named']) path {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--a-hit) 45%, transparent));
}
.a-dial-spark, .a-dial-halo { fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.a-dial-spark { stroke: var(--a-hit); stroke-width: 2; }
.a-dial-halo { stroke: var(--accent); stroke-width: 2; }

/*
 * A ladder in LIGHTNESS, not just in hue. Reusing the chip tokens put absent
 * and mentioned at 1.04:1 on the dark ground: a dull red beside a dull green at
 * the same lightness, so the one distinction this screen exists to show, did
 * this answer mention us, vanished for a red-green colour-blind reader and in
 * greyscale. The four --a-run-* tokens climb monotonically within each theme,
 * Missed stands clear of both the surface and a waiting mark, and the key under
 * the ring reads the same token as the ring, so the two cannot disagree.
 */
.a-run-panel [data-tier='absent'] { --a-tier: var(--a-run-absent); }
.a-run-panel [data-tier='mentioned'] { --a-tier: var(--a-run-mentioned); }
.a-run-panel [data-tier='recommended'] { --a-tier: var(--a-run-recommended); }
.a-run-panel [data-tier='named'] { --a-tier: var(--a-run-named); }

/* The scan: a soft wedge of accent just inside the ring, its leading edge at
   exactly how far through the run we are. It moves continuously while the
   marks land in steps, so the ring is always visibly at work. */
@property --a-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.a-dial-sweep {
  border-radius: 50%;
  background: conic-gradient(transparent 0deg, transparent calc(var(--a-turn) - 110deg), color-mix(in srgb, var(--accent) 32%, transparent) var(--a-turn), transparent var(--a-turn));
  -webkit-mask: radial-gradient(closest-side, transparent 54%, #000 70%, #000 73%, transparent 75.5%);
  mask: radial-gradient(closest-side, transparent 54%, #000 70%, #000 73%, transparent 75.5%);
}
.a-dial.is-complete .a-dial-sweep { opacity: 0; }

.a-dial-center { place-self: center; display: grid; justify-items: center; text-align: center; }
#a-run-status { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--muted); white-space: nowrap; }
#a-run-count {
  margin-top: var(--s-1);
  font-size: 68px; font-weight: var(--fw-semibold); line-height: 1;
  letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; color: var(--ink);
}
.a-dial-of { margin-top: var(--s-1); font-size: var(--fs-ui); color: var(--muted); }
#a-run-score {
  margin-top: var(--s-3); padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted);
  font-size: var(--fs-ui); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
/* 6%, not more: text this small needs 4.5:1, and --a-hit on a 15% tint of itself
   measured 4.17 on the light ground. */
#a-run-score.has-hits { background: color-mix(in oklab, var(--a-hit) 6%, var(--surface)); color: var(--a-hit); }
/* What is being asked right now. A line is reserved so a question never
   nudges the key below it: one on a wide screen, where every question fits on
   one and the key has to stay above a laptop's fold, two on a phone. */
.a-run-question { display: grid; justify-items: center; gap: var(--s-1); max-width: 36rem; margin: var(--s-2) 0 0; text-align: center; }
#a-run-qlabel { font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--faint); }
#a-run-qtext { min-height: calc(1em * var(--lh-body)); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
#a-run-qtext.is-plain { color: var(--muted); }
#a-run-qtext.is-plain::before, #a-run-qtext.is-plain::after { content: none; }

.a-run-key { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; font-size: var(--fs-small); color: var(--muted); }
.a-run-key li { display: flex; align-items: center; gap: 6px; }
.a-run-key i { flex: none; width: 14px; height: 6px; border-radius: var(--r-pill); background: var(--a-tier); }

/* All of the motion, and only for people who have not asked for less. The
   reduced-motion ring is the same ring, filling without the flourish. Every
   effect that starts on the last answer ends inside the one-second hold before
   Findings (RUN_HOLD_SECONDS), which the tests check against these numbers. */
@media (prefers-reduced-motion: no-preference) {
  .a-dial-ring path { transition: stroke 260ms var(--ease-out), stroke-width 260ms var(--ease-out); }
  .a-dial [data-run-cell][data-tier] path { animation: a-dial-land 400ms var(--ease-out) both; }
  .a-dial [data-run-cell]:is([data-tier='mentioned'], [data-tier='recommended'], [data-tier='named']) .a-dial-spark { animation: a-dial-spark 600ms var(--ease-out) both; }
  /* 120ms linear against a 100ms ticker: each step starts before the last
     ends, so the scan never visibly stops. */
  .a-dial-sweep { transition: --a-turn 120ms linear, opacity 300ms var(--ease-out); }
  #a-run-score { transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
  #a-run-score.is-bump { animation: a-dial-bump 360ms var(--ease-out); }
  /* Only the question itself moves, and never from nothing: the line under the
     ring is not blank for a single frame. */
  #a-run-qtext.is-new { animation: a-dial-question 240ms var(--ease-out) both; }
  /* The ring closes: a wave runs once around it, clockwise from the top, and a
     halo leaves it. The wave is on the group so it never cuts off the last
     mark's own landing. */
  .a-dial.is-complete [data-run-cell] {
    transform-box: fill-box; transform-origin: center;
    animation: a-dial-wave 360ms var(--ease-out) both;
    animation-delay: calc(120ms + var(--a-i, 0) * 12ms);
  }
  .a-dial.is-complete .a-dial-halo { animation: a-dial-halo 760ms var(--ease-out) 120ms both; }
}
/* The sweep is the one thing that moves on its own; with reduced motion it is
   not drawn at all, rather than jumping a step at a time. */
@media (prefers-reduced-motion: reduce) {
  .a-dial-sweep { display: none; }
}
@keyframes a-dial-land {
  0% { stroke-width: 6; }
  45% { stroke-width: 20; }
  100% { stroke-width: 14; }
}
@keyframes a-dial-spark {
  0% { opacity: 0.9; transform: scale(0.6); stroke-width: 3; }
  100% { opacity: 0; transform: scale(2.8); stroke-width: 0.5; }
}
@keyframes a-dial-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@keyframes a-dial-question { from { opacity: 0.35; transform: translateY(4px); } }
@keyframes a-dial-wave {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.14); }
}
@keyframes a-dial-halo {
  0% { opacity: 0.35; transform: scale(1); stroke-width: 10; }
  100% { opacity: 0; transform: scale(1.18); stroke-width: 1; }
}

/* --- the board ------------------------------------------------------------ */

.a-board-wrap { overflow-x: auto; max-width: 100%; border-radius: var(--r-card); }
.a-board-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.a-board { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.a-board th, .a-board td { padding: var(--s-3); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.a-board thead th {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.a-board th[scope='row'] { min-width: 13rem; font-weight: var(--fw-regular); }
.a-prompt { display: block; color: var(--ink); line-height: var(--lh-body); }
/* The surface name is redundant beside its column header and shown on phones,
   where the table collapses and the header is gone. Read aloud in both. */
.a-cell-surface { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--faint);
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.audit-demo .a-chip svg { flex: none; width: 13px; height: 13px; stroke-width: 2.5; }
.a-wrong-flag { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--s-2); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--a-miss); }
.audit-demo .a-wrong-flag svg { flex: none; width: 12px; height: 12px; stroke-width: 2.5; }
.a-cell[data-wrong='true'] .a-chip { border-color: var(--a-miss); }
.a-cell[data-tier='absent'] .a-chip { background: color-mix(in oklab, var(--a-miss) 18%, var(--surface)); border-color: var(--a-miss); color: var(--a-miss); font-weight: var(--fw-semibold); }
.a-cell[data-tier='mentioned'] .a-chip { background: var(--a-mentioned); border-color: transparent; color: var(--ink); }
.a-cell[data-tier='recommended'] .a-chip { background: var(--a-recommended); border-color: transparent; color: var(--ink); }
.a-cell[data-tier='named'] .a-chip { background: var(--a-named); border-color: transparent; color: var(--a-hit-ink); font-weight: var(--fw-semibold); }

/* The two numbers that matter, in the two colours everyone already reads. The
   glyph and the sentence carry the same meaning, so nothing here depends on
   telling red from green. */
.a-verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-5); margin-bottom: var(--s-6); }
.a-verdict-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); margin: 0; }
.a-verdict-figure b { font-size: clamp(44px, 8vw, 64px); font-weight: var(--fw-regular); line-height: 1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.a-verdict-figure span { flex: 1 1 8rem; display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--muted); }
.audit-demo .a-verdict-figure svg { flex: none; width: 14px; height: 14px; stroke-width: 2.5; transform: translateY(2px); }
.a-verdict-figure[data-state='miss'] b, .a-verdict-figure[data-state='miss'] svg { color: var(--a-miss); }
.a-verdict-figure[data-state='hit'] b, .a-verdict-figure[data-state='hit'] svg { color: var(--a-hit); }
/* The next step sits with the two numbers it answers. It used to be the last
   thing on the screen, three viewports down on a phone. The same button waits
   at the end for whoever read the detail. */
.a-verdict-action { display: flex; align-items: center; }

/* The wrong answers are the part that should feel like a problem. */
.a-corrections { border-color: var(--a-miss); background: color-mix(in oklab, var(--a-miss) 9%, var(--surface)); }
.a-corrections > .a-card-kicker { color: var(--a-miss); }
.audit-demo .a-corrections > .a-card-kicker svg { color: var(--a-miss); }

/* --- meters --------------------------------------------------------------- */

.a-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-5); }
.a-meter { min-width: 0; }
.a-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-2); font-size: var(--fs-small); color: var(--muted); }
.a-meter-head b { font-size: var(--fs-title); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; color: var(--ink); }
.a-meter-track { position: relative; height: 9px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.a-meter-fill {
  display: block;
  height: 100%;
  width: var(--a-to, 0%);
  border-radius: var(--r-pill);
  background: var(--a-hit);
  animation: a-meter-fill 1200ms var(--ease-out) both;
}
/* Where the rate stood before any lever was pulled. */
.a-meter-origin { position: absolute; top: 0; bottom: 0; left: var(--a-from, 0%); width: 2px; background: var(--bg); }
/* One shared keyframe, per-meter values: var() resolves at computed-value time,
   so each bar rushes to its own starting rate, holds, then climbs to today's. */
@keyframes a-meter-fill {
  0% { width: 0%; }
  34% { width: var(--a-from, 0%); }
  48% { width: var(--a-from, 0%); }
  100% { width: var(--a-to, 0%); }
}
@media (prefers-reduced-motion: reduce) {
  .a-meter-fill { animation: none; width: var(--a-to, 0%); }
  .a-chip { transition: none; }
}
.a-meter-foot { margin: var(--s-2) 0 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--faint); }

/* --- findings and fixes ---------------------------------------------------- */

.a-findings { display: grid; gap: var(--s-6); }
.a-corrections ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.a-corrections li { font-size: var(--fs-small); color: var(--muted); }
.a-corrections b { color: var(--ink); }
.a-corrections p { margin: var(--s-2) 0 0; line-height: var(--lh-body); }

.a-fix-result { display: grid; gap: var(--s-5); min-width: 0; scroll-margin-top: calc(var(--a-bar, 0px) + var(--s-4)); }
.a-fix-result:focus { outline: none; }
.a-fix-result:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.a-fix-result > .a-card-kicker { margin: 0; }
.a-correction-state { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.a-residual {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--faint);
}
.a-residual svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* --- the hero: the measured result, first and loud ------------------------- */

/* Copy in column one, chart in column two, in that order in the DOM as well,
   so the reading order and the visual order are the same thing at every width
   and the phone stack needs no reordering rule. */
.a-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--s-6);
  max-width: 58rem;
  margin: 0 auto var(--s-6);
}
.a-hero-copy { grid-column: 1; min-width: 0; }
.a-hero-chart { grid-column: 2; min-width: 0; display: grid; justify-items: center; gap: var(--s-3); }
.a-hero-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-4) 0 0;
  font-size: var(--fs-title);
  line-height: 1.15;
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-title);
  color: var(--ink);
}
.a-hero-title:focus { outline: none; }
.a-hero-title b {
  font-size: clamp(56px, 11vw, 88px);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.a-hero-title span { flex: 1 1 11rem; max-width: 22rem; }
/* The refusal is a sentence, not a number, so it wears the sentence's size. */
.a-hero-thin { display: block; font-size: var(--fs-title); font-weight: var(--fw-semibold); line-height: 1.2; }
.a-hero-sub { margin: var(--s-4) 0 0; max-width: 46ch; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--muted); }
.a-hero-sub svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
/* A date is one value, so it wraps as one. The range used to break after the
   hyphen and put "09-16" alone on the next line. */
.a-hero-dates { white-space: nowrap; }
.a-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); }
.a-hero-actions .a-start-note { margin: 0; }

/* --- the record: complete, one click away, never in the way ---------------- */

.a-record {
  max-width: 58rem;
  margin: 0 auto var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-panel);
  background: var(--accent-soft);
}
.a-record > summary {
  min-height: var(--control-h-compact);
  align-content: center;
  cursor: pointer;
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.a-record-body { display: grid; gap: var(--s-5); margin-top: var(--s-4); }
.a-record-title { margin: 0; font-size: var(--fs-heading); font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: var(--track-title); }
.a-record-headline { margin: 0; max-width: 62ch; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--ink); }
.a-handoff-fence { margin: var(--s-2) 0 0; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--muted); }

/* --- the sample setup: counts on the face, lists behind a summary ---------- */

.a-setup-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin: 0 0 var(--s-4); padding: 0; }
.a-setup-chips li { font-size: var(--fs-small); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--faint); }
.a-setup-chips b { display: block; font-size: var(--fs-title); font-weight: var(--fw-regular); letter-spacing: var(--track-title); text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.a-setup-detail > summary { min-height: var(--control-h-compact); align-content: center; cursor: pointer; font-size: var(--fs-small); color: var(--muted); }
.a-setup-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-5); margin-top: var(--s-4); }

/* kit.css sizes every svg to a 20px icon box, so the one svg here that is a
   chart rather than an icon has to outrank that rule. */
.audit-demo .a-proof-chart { display: block; width: 100%; height: auto; max-width: 20rem; }
.a-proof-grid { stroke: var(--line); stroke-width: 1; }
.a-proof-tick, .a-proof-axis { fill: var(--muted); font-family: var(--kit-mono); font-size: 13px; }
.a-proof-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Identity is carried three ways: a direct end label on each line, a legend
   that names both again, and the table under the figure. Hue is the fourth. */
.a-proof-line[data-series='branded'] { stroke: var(--a-series-branded); }
.a-proof-line[data-series='all'] { stroke: var(--a-series-all); stroke-dasharray: 6 5; }
/* The climb is the whole point, so it draws rather than appearing. A wipe, not
   a dash offset: the "all" series carries its identity in a dashed stroke, and
   animating stroke-dasharray would have taken that encoding away from a reader
   who cannot separate the two colours. */
.a-proof-wipe { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; animation: a-wipe 900ms var(--ease-out) forwards; }
.a-proof-end, .a-proof-label, .a-proof-value { opacity: 0; animation: a-settle 320ms var(--ease-out) 820ms forwards; }
@keyframes a-wipe { to { transform: scaleX(1); } }
@keyframes a-settle { to { opacity: 1; } }
/* Drawn already, rather than drawing. This has to come after the rules above:
   it is the same specificity, so source order is the only thing deciding it,
   and when it sat earlier in the file the chart never appeared at all. */
@media (prefers-reduced-motion: reduce) {
  .a-proof-wipe { animation: none; transform: scaleX(1); }
  .a-proof-end, .a-proof-label, .a-proof-value { animation: none; opacity: 1; }
}
.a-proof-end[data-series='branded'] { fill: var(--a-series-branded); }
.a-proof-end[data-series='all'] { fill: var(--a-series-all); }

.a-proof-figures { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: 0; }
.a-proof-figures div { min-width: 0; }
.a-proof-figures dt { font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--faint); }
.a-proof-figures dd { margin: 3px 0 0; font-size: var(--fs-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.a-proof-figures b { font-weight: var(--fw-regular); color: var(--ink); }
.a-proof-scope { margin: var(--s-3) 0 0; max-width: 60ch; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--muted); }
.a-proof-figures dd span { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--faint); }
.a-carried { font-size: var(--fs-small); color: var(--faint); }
.a-proof-note { margin: 0; max-width: 64ch; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--muted); }

/* --- the observed answers, the legend, the table --------------------------- */

.a-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.a-answers li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--accent-line);
}
.a-answers li:first-child { border-top: 0; padding-top: 0; }
/* The verdict is a word first. Colour only reinforces what it already says. */
.a-answer-verdict {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}
[data-verdict='identified'] .a-answer-verdict { color: var(--success); }
[data-verdict='inconsistent'] .a-answer-verdict { color: var(--accent); }
.a-answer-body { min-width: 0; }
.a-answer-body b { display: block; font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--ink); overflow-wrap: anywhere; }
.a-answer-where { display: block; margin-top: 2px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.a-answer-wrong { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--fs-small); font-style: normal; line-height: var(--lh-body); color: var(--muted); }
.audit-demo .a-answer-wrong svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }

.a-proof-figure { margin: 0; }
/* These are user units on a 560-wide viewBox, not pixels: the plot keeps its
   aspect ratio as it narrows, so its type shrinks with it. 15 here renders at
   about 11px on a phone, which is the kit's floor. The phone rule below raises
   them again at the width where the plot is narrowest. */
.a-proof-label, .a-proof-value { font-family: var(--font); font-size: 14px; }
.a-proof-label { fill: var(--muted); font-weight: var(--fw-regular); }
.a-proof-value { fill: var(--ink); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.a-proof-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--muted); }
.a-proof-legend span { display: flex; align-items: baseline; gap: var(--s-2); }
.a-proof-legend i { flex: none; width: 14px; height: 3px; border-radius: var(--r-pill); background: var(--a-series-branded); }
.a-proof-legend [data-series='all'] i { background: var(--a-series-all); }

.a-proof-table { font-size: var(--fs-small); color: var(--muted); }
.a-proof-table summary { min-height: var(--control-h-compact); align-content: center; cursor: pointer; color: var(--ink); }
.a-proof-table table { width: 100%; max-width: 28rem; border-collapse: collapse; margin-top: var(--s-2); }
.a-proof-table caption { text-align: left; padding-bottom: var(--s-2); color: var(--muted); }
.a-proof-table th, .a-proof-table td { padding: 5px var(--s-4) 5px 0; text-align: left; font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.a-proof-table thead th { color: var(--muted); }
.a-proof-table tbody th { color: var(--muted); }
.a-proof-table td { color: var(--ink); }

/* Not enough paired cells, or not enough sittings. Said out loud, not hidden. */
.a-proof-thin { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; max-width: 52ch; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--muted); }
.audit-demo .a-proof-thin svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* --- the line between the record and the sample --------------------------- */

.a-handoff { margin: var(--s-7) 0 var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.a-handoff h2 { margin: var(--s-3) 0 0; font-size: var(--fs-title); line-height: 1.2; font-weight: var(--fw-semibold); letter-spacing: var(--track-title); }
.a-handoff p { margin: var(--s-2) 0 0; max-width: 52ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); }

.a-close { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
/* This sentence carries an inline link and a full stop after it. Laying it out
   as a flex row made the svg, the text, the link and the stop four columns, so
   the demo's closing disclosure read "published at" and stopped. */
/* The icon gets its own column so the sentence, its inline link and the full
   stop after it stay one run of text. Flex made them four columns; a float left
   the second line hanging under the icon. */
.a-close-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); margin: 0 0 var(--s-5); max-width: 58ch; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--muted); }
.audit-demo .a-close-note svg { width: 15px; height: 15px; margin-top: 3px; color: var(--success); }
.a-close-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* --- phones ---------------------------------------------------------------- */

@media (max-width: 1000px) {
  .a-screen { padding: var(--s-6) var(--s-5) var(--s-7); }
  .a-header { padding-inline: var(--s-5); }
  .a-footer { margin-inline: var(--s-5); }
}

@media (max-width: 900px) {
}

@media (max-width: 760px) {
  /* The shell stops pretending to be a window and becomes the page. */
  .a-shell { border: 0; border-radius: 0; box-shadow: none; min-height: 100svh; }
  .a-header { height: 64px; padding-inline: var(--s-4); }
  .a-screen { padding: var(--s-5) var(--s-4) var(--s-6); }
  .a-screen-heading { margin-bottom: var(--s-5); text-align: left; }
  .a-screen-heading > p { margin-inline: 0; }
  /* The rail keeps its four steps on one line by dropping the connectors. */
  .a-steps { gap: var(--s-1); padding: var(--s-4) var(--s-2) 0; }
  .a-steps > i { display: none; }
  .a-steps button { min-height: var(--control-h); padding-inline: var(--s-1); font-size: var(--fs-small); }
  .a-steps button > span { width: 24px; height: 24px; }
  /* Phones get the kit's full target on every control the frame owns. */
  .a-footer a { min-height: var(--control-h); }
  .a-brand { min-height: var(--control-h); }
  .a-swirl { width: 40px; height: 40px; }
  .a-header-actions .k-icon { width: var(--control-h); min-height: var(--control-h); }
  .audit-demo .k-text { min-height: var(--control-h); }
  .a-footer { margin-inline: var(--s-4); }
  .a-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .a-hero-copy, .a-hero-chart { grid-column: 1; }
  /* The figure leads, the phrase sits under it: side by side, the number took
     half the width and left the phrase wrapping to three lines beside it. */
  .a-hero-title { flex-direction: column; align-items: flex-start; gap: var(--s-1); margin-top: var(--s-3); }
  .a-hero-title b { font-size: clamp(52px, 17vw, 72px); }
  .a-hero-title span { flex: none; max-width: none; }
  .a-hero-sub { margin-top: var(--s-3); }
  .a-hero-actions { margin-top: var(--s-4); }
  /* Left, with everything else, rather than floating in the middle of its row. */
  .a-hero-chart { justify-items: start; }
  .a-setup { margin-top: var(--s-5); }
  .a-record { padding: var(--s-4); }
  .a-record > summary, .a-setup-detail > summary { min-height: var(--control-h); }
  .a-answers li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .a-proof-legend { gap: var(--s-2); flex-direction: column; }
  /* The plot scales to about 0.52 here, so the compensation goes the other way. */
  /* The old box was 560 wide and rendered at about half size on a phone, so
     these bumped the user-unit type to compensate. The box is 300 wide now and
     renders at roughly 1:1, so the bump became a net enlargement: "All prompts"
     ran past the right edge of the viewBox at 320, 375 and 414, and a 100% tick
     would clip on the left the moment a rate passes 80%. */
  .a-proof-label, .a-proof-value { font-size: 15px; }
  .a-proof-tick, .a-proof-axis { font-size: 14px; }
  .a-dial { width: min(100%, 288px); }
  #a-run-count { font-size: 60px; }
  #a-run-qtext { min-height: calc(2em * var(--lh-body)); }
  /* The board collapses into one card per question: eight columns never fit,
     and a sideways scroll hides the answers that matter most. */
  .a-board, .a-board tbody, .a-board tr, .a-board th, .a-board td { display: block; }
  .a-board thead { display: none; }
  .a-board tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .a-board th[scope='row'] { min-width: 0; padding: 0 0 var(--s-3); border: 0; }
  .a-board td { display: flex; align-items: center; gap: var(--s-3); padding: 5px 0; border: 0; }
  .a-board td .a-chip { margin-left: auto; }
  .a-board td .a-wrong-flag { margin-left: 0; }
  /* Back in flow on a phone, where the column header is gone. */
  .a-cell-surface { position: static; width: auto; height: auto; clip: auto; color: var(--faint); font-size: var(--fs-small); }
}