/*
 * Response Finder — design system implementation.
 *
 * The system is documented in .interface-design/system.md; this file enforces
 * it. SPEC §11.4 fixes the two decisions that matter most: answer body at
 * 15–16px / 1.65 / max 68ch, and confidence in green / amber / grey — never
 * red, because a low-confidence result is not an error.
 *
 * Direction: this is instrumentation for a consular service desk, read for a
 * whole shift, so it takes its vocabulary from the documents the work is about.
 * Public Sans is the U.S. Web Design System typeface; the palette is passport
 * navy and consular blue rather than a generic product blue; figures, codes and
 * shortcuts are set in mono so they align in columns and can be read at a
 * glance. Everything is deliberately quiet except the first-load screen, which
 * is the one moment an operator is made to wait.
 */

/* ================================================================ fonts == */
/* Vendored, never CDN-loaded — CSP is `connect-src 'self'` (SPEC §12.1). */

@font-face {
  font-family: 'Public Sans';
  src: url('/fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* =============================================================== tokens == */

:root {
  /* spacing — 4px grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* radius */
  --r-inline: 4px;
  --r-control: 6px;
  --r-container: 10px;
  --r-pill: 999px;

  /* type */
  --sans: 'Public Sans', ui-sans-serif, system-ui, -apple-system,
          'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono',
          Menlo, Consolas, monospace;

  --fs-display: 22px;
  --fs-answer: 16px;
  --fs-base: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;

  --lh-answer: 1.65;
  --lh-ui: 1.5;
  --lh-tight: 1.3;

  --track-data: 0.02em;
  --track-label: 0.08em;

  /* controls — one height so rows align without per-element nudging */
  --control-h: 30px;
  --topbar-h: 52px;

  /* motion */
  --t-fast: 100ms;
  --t-base: 160ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* colour — light */
  --bg: #fbfcfd;
  --surface: #ffffff;
  --surface-2: #eff3f8;
  --border: #dbe3ed;
  --border-strong: #7d8b9e;   /* 3.47:1 on --surface — WCAG 1.4.11 needs 3:1 */

  --text: #0d1826;
  --text-2: #46566c;
  --text-3: #5d6b81;          /* 4.85:1 on --surface-2; was 4.15 and failed 1.4.3 */

  --accent: #17518d;
  --accent-hover: #113f6f;
  --accent-ink: #ffffff;
  --accent-soft: #eaf1fa;
  --focus-ring: rgb(23 81 141 / 32%);

  --good: #0a6a5b;
  --good-soft: #e4f2ef;
  --warn: #7f5a06;
  --warn-soft: #f8efd9;

  /* Recording. Not --warn and not --accent: this is the only control in the
     product that CAPTURES, and it has to be unmistakeable for a busy state.
     Both values clear 4.5:1 against white text at the button's fill. */
  --rec: #b3291b;
  --rec-ring: rgb(179 41 27 / 45%);

  --mark: #fdeaa8;
  --mark-ink: #3a2c00;

  color-scheme: light;
}

/* Both themes are first-class. The data-theme override must win in BOTH
 * directions, so the media query is scoped away from an explicit light choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0b131f;
    --surface: #101b2b;
    --surface-2: #08101a;
    --border: #21314a;
    --border-strong: #5f7799;  /* 3.78:1 on --surface */

    --text: #e7edf5;
    --text-2: #a3b4ca;
    --text-3: #7e90a8;

    --accent: #7cb0ec;
    --accent-hover: #a3c8f5;
    --accent-ink: #06101d;
    --accent-soft: #13253c;
    --focus-ring: rgb(124 176 236 / 34%);

    --good: #4dc7ab;
    --good-soft: #0e2b28;
    --warn: #e2b657;
    --warn-soft: #2c2411;

    --rec: #e2604f;
    --rec-ring: rgb(226 96 79 / 40%);

    --mark: #5a4a12;
    --mark-ink: #ffeeb0;

    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: #0b131f;
  --surface: #101b2b;
  --surface-2: #08101a;
  --border: #21314a;
  --border-strong: #5f7799;   /* 3.78:1 on --surface */

  --text: #e7edf5;
  --text-2: #a3b4ca;
  --text-3: #7e90a8;

  --accent: #7cb0ec;
  --accent-hover: #a3c8f5;
  --accent-ink: #06101d;
  --accent-soft: #13253c;
  --focus-ring: rgb(124 176 236 / 34%);

  --good: #4dc7ab;
  --good-soft: #0e2b28;
  --warn: #e2b657;
  --warn-soft: #2c2411;

  --rec: #e2604f;
  --rec-ring: rgb(226 96 79 / 40%);

  --mark: #5a4a12;
  --mark-ink: #ffeeb0;

  color-scheme: dark;
}

/* ================================================================= base == */

*, *::before, *::after { box-sizing: border-box; }

/* Any author rule that sets `display` beats the UA stylesheet's `[hidden]`,
 * which silently un-hides elements the JS believes it has hidden. That is how
 * the clear button reappeared on top of the ⌘K hint. Restate it once, here, so
 * no component has to remember. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

:where(button, input, textarea, select) { font: inherit; color: inherit; }
:where(a) { color: var(--accent); text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-inline);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--s2); top: -60px; z-index: 20;
  padding: var(--s2) var(--s3);
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-control); text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip:focus { top: var(--s2); }

/* Data — figures, codes, shortcuts. Tabular so columns align. */
.score, .count, .sec, .ph-label, kbd, .seg-label, .dl-figure, .dl-pct {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-data);
}

/* =============================================================== topbar == */

.topbar {
  position: sticky; top: 0; z-index: 6;
  height: var(--topbar-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar-in {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 0 var(--s5);
  display: flex; align-items: center; gap: var(--s4);
}

.topbar h1 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 650;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: var(--s3);
  white-space: nowrap;
}
/* The mark: a consular-blue edge rule, borrowed from a visa foil's border. */
.topbar h1::before {
  content: '';
  width: 3px; height: 16px;
  background: var(--accent);
  border-radius: 2px;
}

.topbar .sub {
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: 0;
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.count { font-size: var(--fs-2xs); color: var(--text-3); white-space: nowrap; }

.icon-btn {
  width: var(--control-h); height: var(--control-h);
  display: grid; place-items: center;
  background: transparent; color: var(--text-2);
  border: 1px solid transparent; border-radius: var(--r-control);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }

/* ================================================================= main == */
/*
 * Wide screens get a navigation rail so the 376 sections are reachable without
 * a horizontal scroller, and the answer column keeps its 68ch measure instead
 * of stretching. Below 900px the rail cannot hold labels, so it becomes the
 * horizontal chip strip.
 */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s10);
  display: grid;
  gap: 0 var(--s8);
  grid-template-columns: 208px minmax(0, 1fr);
  grid-template-areas:
    'search search'
    'status status'
    'rail   results';
  align-items: start;
}

.searchwrap { grid-area: search; position: relative; }
.statusrow {
  grid-area: status;
  min-height: 24px;
  padding: var(--s3) 0 var(--s4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.debug-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 3px var(--s3);
  font-size: var(--fs-2xs);
  font-family: var(--mono);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.debug-pill-btn:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--border-strong);
}

.toast-msg {
  position: fixed;
  bottom: var(--s6);
  right: var(--s6);
  z-index: 100;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-container);
  padding: var(--s3) var(--s5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: var(--fs-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--s2);
  animation: toastIn 0.18s ease-out;
}
@keyframes toastIn {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.chips { grid-area: rail; }
#results { grid-area: results; min-width: 0; }

@media (max-width: 900px) {
  main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'search' 'status' 'rail' 'results';
    padding: var(--s5) var(--s4) var(--s8);
    gap: 0;
  }
}

/* =============================================================== search == */

#q {
  display: block; width: 100%;
  min-height: 58px;
  padding: var(--s4) 92px var(--s4) var(--s4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-container);
  font-size: var(--fs-answer);
  line-height: 1.45;
  resize: none; overflow: hidden;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
#q::placeholder { color: var(--text-3); }
#q:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* The hint and the clear button share this corner; main.js shows one at a
 * time, never both — an X stacked over the shortcut is unreadable. */
.hint, .clear-btn { position: absolute; top: var(--s3); right: var(--s3); }

.hint {
  padding: var(--s1) var(--s2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-inline);
  font-size: var(--fs-2xs);
  color: var(--text-3);
  pointer-events: none;
}

.clear-btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-sm); line-height: 1; cursor: pointer;
}
.clear-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* ---- typeahead ---------------------------------------------------------- */
/*
 * Suggestions are drawn from Tier 1 titles alone — no model, no threshold. A
 * response the operator PICKS is correct by construction, which is the cheapest
 * accuracy there is.
 */
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--s1)); z-index: 12;
  margin: 0; padding: var(--s1);
  list-style: none;
  max-height: 320px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-container);
  box-shadow: 0 12px 28px -10px rgb(9 20 34 / 24%);
}
.suggest[hidden] { display: none; }

.sug {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.sug[aria-selected='true'] { background: var(--accent-soft); }
.sug:hover { background: var(--surface-2); }
.sug .sug-sec {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--mono); font-size: var(--fs-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-3);
}
.sug mark { background: var(--mark); color: var(--mark-ink); padding: 0 1px; border-radius: 2px; }

/* ========================================================== status pill == */

.pill { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--text-3); }
.pill .bar { width: 132px; height: 3px; background: var(--border); border-radius: var(--r-pill); overflow: hidden; }
.pill .bar i { display: block; height: 100%; background: var(--accent); transition: width var(--t-base) var(--ease); }
.pill.ready { color: var(--good); }
.pill .btn { height: 24px; padding: 0 var(--s2); font-size: var(--fs-2xs); }

/* ================================================================ chips == */

.chips {
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: calc(var(--topbar-h) + var(--s4));
}

.chip {
  display: block; width: 100%; text-align: left;
  padding: var(--s2) var(--s3);
  background: transparent; color: var(--text-2);
  border: 1px solid transparent; border-radius: var(--r-control);
  font-size: var(--fs-sm); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { background: var(--surface-2); color: var(--text); }
.chip[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

@media (max-width: 900px) {
  .chips {
    position: static;
    flex-direction: row; flex-wrap: nowrap;
    gap: var(--s2);
    overflow-x: auto;
    padding-bottom: var(--s3);
    scrollbar-width: thin;
  }
  .chip { width: auto; flex: 0 0 auto; border-radius: var(--r-pill); border-color: var(--border); white-space: nowrap; }
}

/* ================================================================ cards == */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-container);
  margin-bottom: var(--s4);
}
/* .card must NOT set overflow:hidden — it silently disables position:sticky on
 * every descendant, including .card-head, which carries the Copy button. The
 * corners are clipped on the children instead. */
.card > :first-child { border-radius: var(--r-container) var(--r-container) 0 0; }
.card > :last-child { border-radius: 0 0 var(--r-container) var(--r-container); }

.card-head {
  position: sticky; top: var(--topbar-h); z-index: 4;
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.card-title { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 650; line-height: var(--lh-tight); }

/* ---- drag and drop, for the two-window workflow ------------------------- */

/* The grip is the only signal that a card can be dragged, so it has to be
 * discoverable — but it is redundant with the Copy buttons, so it stays quiet
 * until the pointer is on the card. */
.grip {
  flex: 0 0 auto;
  align-self: center;
  margin-left: calc(var(--s1) * -1);
  padding: 0 var(--s1);
  color: var(--text-3);
  cursor: grab;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.card:hover .grip, .card:focus-within .grip { opacity: 1; }
.card.dragging { opacity: 0.55; }
.card.dragging .grip { cursor: grabbing; }

/* Text selection inside the answer must still work, so only the chrome is a
 * drag handle — the body opts out of initiating one. */
.card[draggable='true'] .answer { -webkit-user-drag: none; }

/* Drop target. The search field is where a dragged question lands, so it is
 * what lights up, wherever on the page the pointer happens to be. */
.searchwrap.drop-active::after {
  content: 'Drop the question here';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent-soft) 92%, transparent);
  border: 2px dashed var(--accent);
  border-radius: var(--r-container);
  color: var(--accent);
  font-size: var(--fs-sm); font-weight: 600;
  pointer-events: none;
}
.card-actions { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }

/* Confidence — green / amber / grey, never red (SPEC §11.4): a low-confidence
 * result is not an error, and red would tell an operator the tool is broken
 * when it is working exactly as designed. */
.chip-conf, .score {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 3px var(--s2);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-data);
  white-space: nowrap;
  background: var(--surface-2); color: var(--text-3);
}
.chip-conf.high { background: var(--good-soft); color: var(--good); }
.chip-conf.low { background: var(--surface-2); color: var(--text-2); }
.chip-conf.flagged { background: var(--warn-soft); color: var(--warn); }

/* Section headings inside cards and lists. These are labels, not titles — the
 * card title is the only heading that should carry weight. */
.alts h3, .ask h3, .panel h3, #results h3 {
  margin: 0 0 var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-3);
}

.answer {
  padding: var(--s5) var(--s4);
  max-width: 68ch;
  font-size: var(--fs-answer);
  line-height: var(--lh-answer);
}
.answer p { margin: 0 0 var(--s4); }
.answer p:last-child { margin-bottom: 0; }
.answer ul, .answer ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
.answer li { margin-bottom: var(--s2); }
.answer mark { background: var(--mark); color: var(--mark-ink); padding: 0 2px; border-radius: 2px; }

.blocked-link { color: var(--text-2); text-decoration: underline dotted; cursor: help; }

/* ========================================================= placeholders == */

.ph-bar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}

.ph-field { display: flex; flex-direction: column; gap: var(--s1); min-width: 148px; flex: 1 1 148px; }

.ph-label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-3);
}

.ph-field input {
  height: var(--control-h);
  padding: 0 var(--s2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
}
.ph-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ============================================================== buttons == */

.btn {
  height: var(--control-h);
  padding: 0 var(--s3);
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--text-3); }

.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn.copied, .btn.done { background: var(--good-soft); color: var(--good); border-color: currentColor; }

/* ========================================================= lists / alts == */

.alts { border-top: 1px solid var(--border); padding: var(--s3) var(--s4); }
.alts .why { font-size: var(--fs-xs); color: var(--text-3); margin: 0 0 var(--s2); }

.alt, .browse-item, .ask-opt {
  display: flex; align-items: baseline; gap: var(--s3);
  width: 100%; text-align: left;
  padding: var(--s2) var(--s3);
  background: transparent; color: var(--text);
  border: 1px solid transparent; border-radius: var(--r-control);
  font-size: var(--fs-sm); cursor: pointer;
}
.alt:hover, .browse-item:hover, .ask-opt:hover { background: var(--surface-2); }
.alt.focused, .browse-item.focused, .ask-opt.focused { background: var(--accent-soft); border-color: var(--accent); }

.browse-list, .ask-opts { display: flex; flex-direction: column; gap: 2px; }

.ask { padding: var(--s4); }
.ask > p { margin: 0 0 var(--s3); font-size: var(--fs-sm); color: var(--text-2); }

/* =============================================================== panels == */

.panel { padding: var(--s6) var(--s5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-container); }
.panel h2 { margin: 0 0 var(--s3); font-size: var(--fs-base); font-weight: 650; }

.empty { padding: var(--s10) var(--s5); text-align: center; color: var(--text-3); }
.stack-top { margin-top: var(--s4); }
.fineprint { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }

.sec { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-3); }

kbd {
  padding: 2px var(--s1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--r-inline);
  font-size: var(--fs-2xs);
}

/* =============================================================== dialog == */

dialog {
  max-width: 420px; width: calc(100vw - var(--s8));
  padding: var(--s6);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-container);
}
dialog::backdrop { background: rgb(6 12 20 / 48%); backdrop-filter: blur(2px); }
dialog h2 { margin: 0 0 var(--s4); font-size: var(--fs-base); font-weight: 650; }
dialog dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0 0 var(--s4); }
dialog dt { text-align: right; }
dialog dd { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
dialog form { margin-top: var(--s4); }

/* =========================================================== FIRST LOAD == */
/*
 * The signature screen, and the only expressive surface in the app. An operator
 * sees it once per machine and then never again, so it can afford presence —
 * and it needs it, because the wait is long enough to look broken.
 *
 * The six segments are not decoration. The model ships as six chunks that the
 * service worker reassembles (SPEC §8.3), and each segment is one of them.
 * What fills is the actual transfer.
 */

/* Full-page overlay. The panel used to live in the results area, which meant it
 * could not appear until the index had loaded — a blank page for the whole of
 * startup on a fast connection. */
.boot-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: var(--s5);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
}
.boot-overlay[hidden] { display: none; }
.boot-overlay .boot { width: min(560px, 100%); }

.boot {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--s5);
  padding: var(--s8) var(--s6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-container);
}

.boot-head { display: flex; align-items: center; gap: var(--s4); }

.spinner {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.boot-title { margin: 0; font-size: var(--fs-display); font-weight: 650; letter-spacing: -0.015em; line-height: var(--lh-tight); }
.boot-sub { margin: var(--s1) 0 0; font-size: var(--fs-sm); color: var(--text-3); }

.segs {
  display: grid;
  grid-template-columns: repeat(var(--seg-count, 6), 1fr);
  gap: var(--s1);
  width: 100%;
}

.seg {
  position: relative;
  height: 30px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-inline);
  overflow: hidden;
}
.seg::after {
  content: '';
  position: absolute; inset: 0;
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
  background: var(--accent);
  transition: transform var(--t-base) var(--ease);
}
.seg[data-state='done']::after { background: var(--good); }

.seg-label {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-label);
  color: var(--text-3);
}
.seg[data-state='done'] .seg-label { color: var(--accent-ink); }

.boot-figures { display: flex; align-items: baseline; gap: var(--s4); width: 100%; }
.dl-figure { font-size: var(--fs-sm); color: var(--text-2); }
.dl-pct { margin-left: auto; font-size: var(--fs-display); font-weight: 600; color: var(--text); }

.boot-note {
  display: flex; align-items: center; gap: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-3);
}

/* Assistant launcher. Bottom-right is where users look for a chat widget, so it
 * sits there rather than in the toolbar. */
.fab {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 20;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: var(--r-pill);
  font-size: 22px; line-height: 1; cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
  transition: background var(--t-fast) var(--ease);
}
.fab:hover { background: var(--accent-hover); }
.fab[hidden] { display: none; }

/* =========================================================== responsive == */

@media (max-width: 560px) {
  .topbar .sub, .count { display: none; }
  .answer { padding: var(--s4) var(--s3); }
  .card-head, .ph-bar { padding: var(--s3); }
  .boot { padding: var(--s5) var(--s4); }
  .boot-title { font-size: var(--fs-answer); }
  .seg-label { font-size: 9px; letter-spacing: 0; }
  .ph-field { min-width: 100%; }
}

/* Touch — WCAG 2.5.5 target size. */
@media (pointer: coarse) {
  .btn, .chip, .icon-btn, .ph-field input, .alt, .browse-item, .ask-opt,
  .opt, .sug, .composer input { min-height: 44px; }
  /* The primary "go back" affordance on a phone was 20.5px tall. */
  .crumb { min-height: 44px; display: inline-flex; align-items: center; }
  .icon-btn { width: 44px; }
  .clear-btn { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Keep the spinner readable as a ring rather than a frozen arc. */
  .spinner { border-top-color: var(--border); border-left-color: var(--accent); }
}

/* Windows High Contrast replaces the palette with system colours, so structure
 * and focus have to be re-stated or the UI loses all its separation. */
@media (forced-colors: active) {
  .card, .panel, .btn, .chip, .seg, #q, dialog { border: 1px solid CanvasText; }
  .seg::after { background: Highlight; }
  .spinner { border-color: CanvasText; border-top-color: Highlight; }
  :focus-visible { outline: 2px solid Highlight; }
}

/* --------------------------------------------------------------- feedback --
 * The quiet hint. It appears only after the agent has already told us we were
 * wrong — by taking something other than the top hit, or by landing on a result
 * set with nothing confident in it.
 *
 * Styled deliberately below the noise floor of the answer it sits under: no
 * colour, no border, small type. An agent under call pressure must be able to
 * ignore it without reading it, because the signal we actually need — the rank
 * they picked — was already recorded before this rendered. This is only asking
 * for the optional extra.
 */
.hint {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s2) var(--s4) var(--s3);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.hint-text { color: var(--text-3); }

.hint-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.hint-link:hover:not(:disabled) { color: var(--accent-hover); }
.hint-link:disabled { color: var(--text-3); text-decoration: none; cursor: default; }

.hint-status { color: var(--text-3); font-style: italic; }