/* SFXray Studio — AXION4 branding (dark charcoal #13151A, blue #2563EB, green #4ade80).
   Self-contained: system font stack, no external requests. Tabs + native <details> accordions. */

:root {
  --charcoal: #13151A;
  --panel: #1b1e26;
  --panel-2: #232733;
  --line: #2e3342;
  --blue: #2563EB;
  /* --blue is a button FILL (white on it = 5.17:1). As TEXT on the page it is only
     3.53:1 and as a BORDER on a panel 2.88:1 — under AA (4.5) and under the 3:1 for
     UI components. This lighter tone is for text/borders: 7.18:1 on the page
     background, 5.86:1 on a panel. */
  --blue-accent: #60a5fa;
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #f87171;
  --text: #e7e9ee;
  --muted: #9aa1b2;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--charcoal); color: var(--text);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5;
}

/* sticky header (Gareth, 2026-07-15): topbar + tab nav stay visible while long
   ledgers scroll. Solid background so content never bleeds through. */
.sticky-head { position: sticky; top: 0; z-index: 50; background: var(--charcoal);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

/* top bar */
.topbar { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 20px; letter-spacing: .5px; }
.brand-sfx { color: var(--green); }
.brand-studio { color: var(--text); }
.brand-axion { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 14px; }
.posture { display: flex; gap: 8px; align-items: center; }
.pill { padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); }
.pill-shadow { color: var(--green); border-color: var(--green); }
.pill-live { color: var(--charcoal); background: var(--amber); border-color: var(--amber); font-weight: 700; }
.pill-human-gated { color: var(--amber); border-color: var(--amber); font-weight: 600; }
.pill-neutral { color: var(--muted); }
.logout { color: var(--muted); margin-left: 12px; font-size: 13px; }

/* tabs */
.tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.tab { padding: 10px 16px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--text); }
.tab-active { color: var(--text); border-bottom-color: var(--blue); font-weight: 600; }

.content { padding: 24px; max-width: 1280px; margin: 0 auto; }
.footer { padding: 16px 24px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }

/* KPI cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
/* a KPI tile that links to the view it counts — same look, just clickable */
a.card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: border-color .12s ease; }
a.card-link:hover { border-color: var(--blue); }
.card .kpi { font-size: 30px; font-weight: 700; }
.card .kpi-label { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.card .kpi-note { color: var(--muted); font-size: 12px; margin-top: 6px; }
.kpi-good { color: var(--green); }
.kpi-warn { color: var(--amber); }
.kpi-bad { color: var(--red); }

/* tables */
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: .6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
tr:hover td { background: var(--panel); }

/* status badges */
.badge { padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.badge-ok { background: rgba(74, 222, 128, .14); color: var(--green); }
.badge-warn { background: rgba(251, 191, 36, .14); color: var(--amber); }
.badge-bad { background: rgba(248, 113, 113, .14); color: var(--red); }
.badge-neutral { background: var(--panel-2); color: var(--muted); }
.badge-blue { background: rgba(37, 99, 235, .18); color: #93b4f8; }

/* native accordions */
details { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  margin: 10px 0; overflow: hidden; }
summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--muted); font-weight: 400; }
details[open] summary::after { content: "\2212"; }
details .details-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
details details { margin: 8px 0; background: var(--panel-2); }

/* forms + filters */
form.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; align-items: end; }
label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
input, select, textarea { background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 14px; }
textarea { width: 100%; font-family: inherit; resize: vertical; }
button { background: var(--blue); border: none; color: white; font-weight: 600;
  padding: 9px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; }
button:hover { filter: brightness(1.12); }
button.danger { background: transparent; color: var(--red); border: 1px solid var(--red); }
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
a.button { display: inline-block; background: var(--blue); color: white; font-weight: 600;
  padding: 9px 16px; border-radius: 8px; font-size: 14px; text-decoration: none; }
a.button:hover { filter: brightness(1.12); }
a.button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }

/* ---- The posture banner (DEC-246) ---------------------------------------- */
/* One plain-language line on every page: what the system will and will not do on its own
   right now. Calm (green edge) when the baseline is what is in force; LOUD (amber) when a
   database override diverges — the DEC-203 drift alarm's own condition, shown to the person.
   Contrast, measured (WCAG 2.1): text #e7e9ee on #1b1e26 = 13.8:1 · drift text #e7e9ee on
   the amber-tinted panel ≥ 12:1 (10% amber over #13151A barely lifts luminance). AA. */
.posture-banner { margin: 0 0 16px; padding: 9px 12px; border-left: 3px solid var(--green);
  background: var(--panel); border-radius: 0 8px 8px 0; font-size: 13.5px; }
.posture-banner-line { display: block; }
.posture-banner-line + .posture-banner-line { margin-top: 4px; }
.posture-banner-drift { border-left-color: var(--amber); background: rgba(251, 191, 36, .10);
  font-weight: 600; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 20px 0 6px; }
p.sub { color: var(--muted); margin: 0 0 16px; }
.section-note { color: var(--muted); font-size: 13px; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.flash-ok { background: rgba(74, 222, 128, .12); color: var(--green); }
.flash-err { background: rgba(248, 113, 113, .12); color: var(--red); }

/* login */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 34px; width: 340px; }
.brand-login { font-size: 26px; margin-bottom: 18px; }
.login-card input { width: 100%; margin: 6px 0 14px; }
.login-card button { width: 100%; }
.login-error { color: var(--red); font-size: 13.5px; }

/* ---------- mobile optimisation (Gareth 2026-07-07: build with mobile in mind) ----------
   The tabs scroll sideways rather than wrap; tables scroll within their own box rather than
   stretch the page; cards tighten; the top bar stacks. Everything degrades, nothing hides. */

table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
th, td { white-space: nowrap; }

@media (max-width: 760px) {
  body { font-size: 14px; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
  .posture { flex-wrap: wrap; }
  .brand-axion { display: block; margin-left: 0; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 0 8px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 10px 12px; white-space: nowrap; flex: 0 0 auto; }
  .content { padding: 14px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .card { padding: 12px; }
  .card .kpi { font-size: 24px; }
  summary { padding: 11px 12px; font-size: 14px; flex-wrap: wrap; }
  details .details-body { padding: 4px 12px 12px; }
  form.filters { gap: 8px; }
  form.filters input, form.filters select { width: 100%; }
  form.filters > * { flex: 1 1 140px; }
  button { padding: 10px 14px; }  /* comfortable touch targets */
  .login-card { width: min(92vw, 340px); padding: 24px; }
  h1 { font-size: 19px; }
}

@media (max-width: 420px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .pill { font-size: 11px; padding: 2px 8px; }
}

/* ---- Review queue + item at phone width (DEC-247, written against 390px) ---
   Catriona works the queue from her phone some days — she caught a production defect from
   it. The action forms stack to full-width touch targets; nothing hides, nothing shrinks
   below a thumb. Template-level only: real-device verification is recorded honestly as
   NOT VERIFIED in the session report until someone holds a phone. */
form.review-actions { margin: 14px 0; }
@media (max-width: 420px) {
  .posture-banner { font-size: 12.5px; padding: 8px 10px; }
  .review-actions button,
  .review-actions a.button { width: 100%; display: block; text-align: center; }
  .review-actions input:not([type="radio"]):not([type="checkbox"]),
  .review-actions select { width: 100%; }
  /* the re-read confirm row: one comfortable touch target, checkbox included */
  .review-actions input[type="checkbox"] { width: 20px; height: 20px; }
  .hold-card { overflow-wrap: anywhere; }
}

/* Feedback inbox + the P6 decision surface. */
ul.inbox { list-style: none; padding: 0; margin: 0 0 12px; }
/* Was a near-white block from the light theme this Studio no longer uses: #e7e9ee text on
   #f7f8fa is 1.14:1, i.e. invisible. Now --panel-2, which gives 12.27:1 for body text and
   5.76:1 for muted. */
ul.inbox li { padding: 7px 10px; border-left: 3px solid var(--line); margin-bottom: 4px;
  background: var(--panel-2); color: var(--text); border-radius: 0 6px 6px 0; }
ul.inbox li.inbox-stale { border-left-color: var(--amber); }
ul.inbox li.inbox-complete { border-left-color: var(--green); }
pre.cmd { background: #1b1e26; color: #e6e8ee; padding: 12px; border-radius: 8px;
  overflow-x: auto; font-size: 12px; }

/* ---- Decision console (spec §3) ------------------------------------------ */
/* Band 4 must NOT read as a fault list: correct behaviour styled as correct
   behaviour, green and calm, against the amber of things actually blocked. If
   the console looks like 35 failures, the operator learns to ignore it. */
.band { margin: 0 0 26px; padding-left: 12px; border-left: 3px solid var(--line); }
.band-problem { border-left-color: #f59e0b; }
.band-by-design { border-left-color: var(--green); }
.band h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }

.console-item { margin-bottom: 6px; }
.console-item summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.band-by-design .console-item { opacity: .92; }
.ci-label { font-weight: 600; }
.ci-who { color: var(--muted); font-size: 13px; }
.ci-detail { margin: 2px 0 8px; }
/* DEC-329. Was a bordered, panel-backed bar — the SECOND of three blocks all saying what to do.
   Demoted to a plain supporting line under the one green recommendation. It is still shown; it
   just no longer competes with the sentence it supports.
   Contrast: #9aa1b2 on #1b1e26 = 6.44:1. AA. */
.ci-unlocks { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.ci-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.btn-link { display: inline-block; padding: 9px 14px; border-radius: 8px; text-decoration: none;
  background: var(--blue); color: #fff; font-size: 13.5px; font-weight: 600; }
.btn-link:hover { filter: brightness(1.06); }
.btn-link.btn-secondary { background: transparent; color: var(--blue-accent);
  border: 1px solid var(--line); }

/* Measured at 390px, as the P7 wizard was: the actions stack full-width so both
   are comfortable touch targets rather than two thin strips side by side. */
@media (max-width: 420px) {
  .band { padding-left: 9px; }
  .console-item summary { gap: 6px; }
  .ci-who { flex-basis: 100%; }
  .ci-actions { flex-direction: column; }
  .ci-actions .btn-link { width: 100%; text-align: center; }
}

/* ---- Console: nav badge, filter bar, inline actions ---------------------- */
/* Contrast, measured (WCAG 2.1 relative luminance):
   badge  #13151A on #fbbf24 = 11.5:1 · filter text #e7e9ee on #232733 = 12.27:1
   selected #13151A on #60a5fa = 8.4:1 · instruction #9aa1b2 on #232733 = 5.76:1
   All at or above AA 4.5:1 for body text. */
.nav-badge { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: var(--amber); color: var(--charcoal); font-size: 11.5px; font-weight: 700;
  vertical-align: middle; }

.filterbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

/* ---- Console: search (DEC-330) ------------------------------------------- */
/* One GET form, styled like the filters it composes with. Contrast, measured (WCAG 2.1):
   input text #e7e9ee on #232733 = 12.27:1 · label #9aa1b2 on #13151A = 7.06:1 ·
   clear link #60a5fa on #13151A = 7.18:1. All at or above AA. */
/* DEC-333: the search leads the page at FULL WIDTH — on a wall of 100+ rows it is the way in,
   and burying it under the chips is what the operator screenshot showed failing. */
.console-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 14px; }
.console-search input[type="search"] { flex: 1 1 320px; max-width: none; }

/* ---- Console: sections (DEC-333) ----------------------------------------- */
/* Four sections with real breathing room replace the single list. The header row is a link
   (toggle) plus a small sort flip; a collapsed section keeps its count on screen so nothing
   reads as missing. Contrast, measured (WCAG 2.1): heading #e7e9ee on #13151A = 15.03:1 ·
   sort link #60a5fa on #13151A = 7.18:1 · collapsed note #9aa1b2 on #13151A = 7.06:1. AA. */
.band { margin: 0 0 34px; }
.section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.section-toggle { display: inline-flex; align-items: center; gap: 10px; color: var(--text);
  text-decoration: none; }
.section-toggle:hover .section-chev { color: var(--blue-accent); }
.section-chev { color: var(--muted); font-size: 14px; width: 1em; }
.section-sort { margin-left: auto; color: var(--blue-accent); font-size: 12.5px;
  text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.section-sort:hover { border-color: var(--blue-accent); }
.section-collapsed-note { margin: 2px 0 0 26px; }

@media (max-width: 420px) {
  .section-sort { margin-left: 26px; }
}
.console-search-label { color: var(--muted); font-size: 13px; margin: 0; display: inline; }
.console-search input[type="search"] { flex: 1 1 260px; max-width: 420px; }
.console-search-clear { color: var(--blue-accent); font-size: 13px; }

@media (max-width: 420px) {
  .console-search input[type="search"] { flex-basis: 100%; max-width: none; }
  .console-search button { width: 100%; }
}
.filter { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2);
  color: var(--text); text-decoration: none; font-size: 13px; }
.filter:hover { border-color: var(--blue-accent); }
.filter-on { background: var(--blue-accent); color: var(--charcoal); border-color: var(--blue-accent);
  font-weight: 700; }
.filter-n { opacity: .75; font-variant-numeric: tabular-nums; }
.filter-on .filter-n { opacity: .9; }

.ci-action-label { color: var(--muted); font-size: 13px; align-self: center; }
.ci-instruction { margin: 10px 0 0; padding: 8px 10px; background: var(--panel-2);
  color: var(--muted); border-left: 3px solid var(--line); border-radius: 0 6px 6px 0;
  font-size: 13px; }
.ci-more { margin: 8px 0 0; font-size: 12.5px; }
.ci-more a { color: var(--blue-accent); }

@media (max-width: 420px) {
  .filterbar { gap: 5px; }
  .filter { padding: 7px 10px; font-size: 12.5px; }
  .ci-actions { flex-direction: column; align-items: stretch; }
  .ci-actions button { width: 100%; }
}

/* ---- Console: the resolution surface (DEC-102) --------------------------- */
/* LAYOUT. The console rendered offset to the right with dead space on the left.
   `.content` already centres at max-width 1280 with `margin: 0 auto`, so that is
   the signature of HORIZONTAL OVERFLOW: one long unbroken string — a subject
   line, a sender, a raw code — widens the page past the viewport, and a centred
   box inside a wider scroll area reads as "pushed right". Nothing here may
   exceed its column, so long strings wrap and the one genuinely wide thing (the
   email) scrolls inside its own box. */
.ci, .ci-head, .ci-body { min-width: 0; }
.ci-label, .ci-who, .ci-sub { overflow-wrap: anywhere; }

/* Contrast, measured (WCAG 2.1): recommendation #4ade80 on #232733 = 8.55:1 ·
   email #e7e9ee on #13151A = 15.03:1 · headings/labels/hints #9aa1b2 on #1b1e26
   = 6.44:1 · quiet button #e7e9ee on #232733 = 12.27:1 · open-item border
   #60a5fa on #1b1e26 = 6.55:1 (UI, needs 3.0). All at or above AA. */
.ci { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 8px; overflow: hidden; }
.ci-open { border-color: var(--blue-accent); }

.ci-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; text-decoration: none; color: var(--text); cursor: pointer; }
.ci-head:hover { background: var(--panel-2); }   /* hover HIGHLIGHTS; only a click opens */
/* THE TYPE SCALE (DEC-329). Four levels, each step 2px, so the hierarchy is visible rather
   than nominal: item label 19 > section heading 17 > body 15 > hint 13. Before this the section
   headings were 12px uppercase muted — SMALLER and quieter than the body they headed — and the
   item label was 15px, identical to the body text under it. Nothing on the card ranked anything.
   h1 stays 22px, so a label never competes with the page title. */
.ci-label { font-weight: 700; font-size: 19px; }
.ci-who { color: var(--muted); font-size: 13px; }
.ci-sub { color: var(--muted); font-size: 13px; flex: 1 1 220px; opacity: .8; }
.ci-chev { color: var(--muted); font-size: 18px; line-height: 1; margin-left: auto; }

/* One item open at a time, so it can afford room to breathe. */
.ci-body { padding: 4px 20px 20px; border-top: 1px solid var(--line); }
/* The section heading now READS as a heading: 17px, full-strength text, sentence case. It was
   12px uppercase muted (#9aa1b2 = 6.44:1) — legible, but ranked below its own body copy. */
.ci-h { margin: 22px 0 6px; font-size: 17px; font-weight: 700; letter-spacing: normal;
  text-transform: none; color: var(--text); }
.ci-h:first-child { margin-top: 14px; }
.ci-detail { margin: 0 0 4px; }
/* DEC-335: the fallback card's raw evidence — monospace, wrappable, quietly boxed.
   Contrast: #e7e9ee on #13151A = 15.03:1. AA. */
.ci-raw-hold { margin: 4px 0 0; }
.ci-raw-hold code { display: block; background: var(--charcoal); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; font-size: 12.5px; overflow-wrap: anywhere; }
.ci-none { margin: 0; color: var(--muted); font-size: 13px; }

.ci-read { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.ci-read dt { color: var(--muted); font-size: 13px; }
.ci-read dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }

.ci-email { background: var(--charcoal); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; margin: 0; max-height: 320px;
  overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; }

/* The recommendation. Green, above the buttons, and phrased as a suggestion. */
.ci-recommend { margin: 0 0 8px; padding: 10px 12px; background: var(--panel-2);
  border-left: 3px solid var(--green); border-radius: 0 6px 6px 0;
  color: var(--green); font-weight: 600; }

.ci-do { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ci-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.ci-hint { color: var(--muted); font-size: 12.5px; }
button.btn-quiet { background: transparent; color: var(--text); border: 1px solid var(--line); }
button.btn-quiet:hover { border-color: var(--blue-accent); }

/* ---- Console: THE THREE BUTTON RANKS (DEC-329) --------------------------- */
/* The live console ranked its controls in reverse order of importance: the only FILLED buttons
   in an expanded item were the optional "Teach the system" ones, while every resolving action —
   not-an-order, reprocess, re-read, note, the five file-as classes — was a grey outline
   (Justin, 2026-08-18). The global `button` rule is a blue fill, so any button WITHOUT a class
   read as the loudest thing on the card, and the teach buttons carried no class.

   Scoped to the console on purpose: `button` elsewhere in the Studio is unchanged, so this
   cannot restyle the Orders, Pricing or Settings tabs by accident.

   PRIMARY   filled  — the ONE action the green recommendation names. At most one per card.
   SECONDARY outline — every other resolving action.
   QUIET     text    — teach-the-system, decline, notes. Never a fill.

   Contrast, measured (WCAG 2.1 relative luminance):
     primary   #ffffff on #2563EB = 5.17:1
     secondary #e7e9ee on #1b1e26 = 13.72:1 · border #2e3342 (UI, needs 3.0)
     quiet     #9aa1b2 on #232733 = 5.76:1 · on #1b1e26 = 6.44:1
   All at or above AA 4.5:1 for text. */
.ci-do button, .ci-learn button {
  background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 600;
}
.ci-do button:hover, .ci-learn button:hover { border-color: var(--blue-accent); filter: none; }

.ci-do button.btn-primary {
  background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700;
}
.ci-do button.btn-primary:hover { filter: brightness(1.12); }

/* QUIET. A text button: no fill, no border until hover. The teach-the-system controls live here
   BY RULE — they are optional, they resolve nothing, and they must never outrank the action that
   unblocks a customer. `.ci-learn button` is listed first so a learn button can never pick up the
   secondary look by sitting inside `.ci-do`. */
.ci-learn button, .ci-do button.btn-quiet {
  background: transparent; color: var(--muted); border: 1px solid transparent; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.ci-learn button:hover, .ci-do button.btn-quiet:hover {
  color: var(--text); border-color: var(--line); text-decoration: none;
}

/* THE PRIMARY RENDERS FIRST in the stack — see console.html, which emits it above every other
   control rather than reordering visually. This rule only adds the breathing space that makes
   "first" read as "foremost". */
.ci-do .ci-form-primary { margin-bottom: 2px; }

/* ---- Console: the age pill is a SIGNAL (DEC-329) ------------------------- */
/* It was neutral grey at 5 days and at 39. Coloured by AGE ONLY — never by kind, so a
   by-design item that has sat for a month still says so.
   Contrast, measured: calm #9aa1b2 on #1b1e26 = 6.44:1 · watch #13151A on #fbbf24 = 10.94:1 ·
   late #13151A on #f87171 = 6.60:1. All at or above AA. */
.pill-age-calm { background: transparent; color: var(--muted); border-color: var(--line); }
.pill-age-watch { background: var(--amber); color: var(--charcoal); border-color: var(--amber);
  font-weight: 700; }
.pill-age-late { background: var(--red); color: var(--charcoal); border-color: var(--red);
  font-weight: 700; }

/* ---- Console: the lead number (DEC-329) ---------------------------------- */
/* One number, stated once, big: what is actually blocking an order. The full total follows in
   the muted note under it, so nothing is hidden — only re-counted.
   Contrast: #e7e9ee on #13151A = 15.03:1 · #9aa1b2 on #13151A = 7.06:1. AA. */
.console-lead { margin: 0 0 2px; font-size: 15px; }
.console-lead-n { font-size: 30px; font-weight: 700; line-height: 1.1; margin-right: 8px;
  vertical-align: -2px; }
.console-rest { color: var(--muted); font-size: 13px; margin: 0 0 16px; }

/* A note, not an alarm. Was `.flash-err` — alarm red, for a message whose subject is a hold
   reason the console has not been taught yet. That is worth telling someone; it is not an
   emergency, and red for a non-emergency teaches an operator to ignore red.
   Contrast: #e7e9ee on the amber-tinted panel >= 12:1 (10% amber over #13151A). AA. */
.console-note { margin: 0 0 14px; padding: 9px 12px; border-left: 3px solid var(--amber);
  background: rgba(251, 191, 36, .10); border-radius: 0 8px 8px 0; font-size: 13.5px; }

@media (max-width: 420px) {
  .ci-body { padding: 4px 14px 16px; }
  .ci-sub { flex-basis: 100%; }
  /* DEC-329. The scale holds at 390px — it just starts lower. `body` is already 14px under the
     760px breakpoint, so label 17 > heading 16 > body 14 > hint 12.5 keeps every step visible
     while the lead number stops dominating a phone-width column. */
  .console-lead-n { font-size: 26px; }
  .ci-label { font-size: 17px; }
  .ci-h { font-size: 16px; margin-top: 18px; }
  .ci-read { grid-template-columns: 1fr; gap: 1px 0; }
  .ci-read dt { margin-top: 8px; }
  .ci-form { flex-direction: column; align-items: stretch; }
  .ci-form button { width: 100%; }
}

/* ---- Learning loop (DEC-103) -------------------------------------------- */
/* Contrast: question #e7e9ee on #232733 = 12.27:1 · hint #9aa1b2 on #232733 =
   5.76:1 · suspended border #fbbf24 on #1b1e26 = 9.66:1 (UI, needs 3.0). AA. */
.ci-learn { background: var(--panel-2); border-left: 3px solid var(--blue-accent);
  border-radius: 0 8px 8px 0; padding: 12px 14px; margin-bottom: 10px; }
.ci-learn-q { margin: 0 0 8px; font-weight: 600; color: var(--text); }
.ci-learn .ci-form { margin-top: 8px; }
.fact-suspended { border-color: var(--amber); }
.fact-reverted { opacity: .7; }

/* ---- Matching up (quote-matching, S3/DEC-191) ---------------------------- */
/* The template shipped naming these classes and no stylesheet ever defined them, so the screen
   rendered as bare radio dots — not something a thumb can hit. Each candidate is a CARD and the
   whole card is the touch target. Contrast, measured (WCAG 2.1): body #e7e9ee on #1b1e26 =
   13.8:1 · muted #9aa1b2 on #13151A = 7.1:1 · evidence #4ade80 on #1b1e26 = 9.6:1. All ≥ AA. */
.muted { color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; margin: 12px 0; }
.candidate { display: flex; gap: 12px; align-items: flex-start; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 8px 0;
  cursor: pointer; color: var(--text); font-size: 14px; }
.candidate:hover { border-color: var(--blue-accent); }
.candidate input[type="radio"] { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto;
  accent-color: var(--blue); }
/* :has() is an ENHANCEMENT (DEC-197): without it the radio dot alone shows the choice. */
.candidate:has(input:checked) { border-color: var(--blue-accent); background: var(--panel-2); }
.candidate-body { min-width: 0; }
.candidate-body strong { overflow-wrap: anywhere; }
.why { color: var(--green); font-size: 13px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 760px) {
  /* The three answers stack full width: three equal touch targets, equal weight on purpose —
     "I can't tell" must never render as the lesser option. */
  .actions { flex-direction: column; }
  .actions button { width: 100%; }
}

/* --- DEC-336: the two-row nav. Row one is the groups (reuses .tabs/.tab); row two is the
   active group's tabs on a panel, visually subordinate. Appended as its own section to keep
   the diff clear of the cache-proofing work in flight on this file. --- */
.nav-sub { background: var(--panel); }
.nav-sub .tab { padding: 8px 14px; font-size: 13.5px; }
.nav-spacer { flex: 1; }