/* DGI — dgi.css
 * Bone paper, warm ink, serif display type, hairline rules instead of
 * shadows, tiny uppercase micro-labels. Colour lives almost entirely in the
 * data — the interface itself is paper and ink.
 *
 * System fonts only — the app makes no network requests of any kind.
 */

/* ============================================================ TOKENS */

/* Bone paper, warm ink. The page is the colour of uncoated stock; the cards
   sit a shade lighter, so the surface reads as paper laid on paper rather
   than as boxes drawn on a screen. Every neutral carries a little yellow, so
   nothing in the interface is ever a cold grey. */

:root {
  color-scheme: light dark;

  --bone-50:  #FCFAF4;
  --bone-100: #F4F0E6;
  --bone-200: #EDE7D9;
  --bone-300: #E2DACA;
  --stone-400:#C9C0AC;
  --stone-500:#9C9483;
  --stone-600:#746C5D;
  --ink-800:  #3B372F;
  --ink-900:  #23211B;

  --bg: var(--bone-100);
  --surface: var(--bone-50);
  --surface-2: var(--bone-200);
  --surface-3: var(--bone-300);
  --line: #DFD7C5;
  --line-soft: #EAE3D4;
  --grid: #DCD4C1;
  --fg: var(--ink-900);
  --fg-muted: #6D6557;   /* clears AA on --surface AND --surface-2 */
  /* Hairlines, ticks and chart tracks only — 1.73:1 on --surface, so never text.
     Text that needs de-emphasis uses --fg-muted (4.97:1). */
  --fg-faint: var(--stone-400);
  --brand: #2E2A22;                 /* espresso ink, not navy */
  --shadow: 0 1px 2px rgba(70,58,38,.05), 0 8px 24px rgba(70,58,38,.06);

  /* The two most important colours in the product. Petrol vs burnt sienna is
     separable under protanopia, deuteranopia AND tritanopia — the safe axis is
     blue-against-orange — but sits far enough off navy to belong on paper.
     They are close in greyscale, which is exactly why the charts also separate
     the two series by pattern and dash, never by hue alone. */
  --sys: #3F6E7C;
  --beh: #B45A28;
  --sys-soft: rgba(63,110,124,.12);
  --beh-soft: rgba(180,90,40,.13);

  --q1: #4E7250;
  --q2: var(--sys);
  --q3: var(--beh);
  --q4: #6D665A;

  /* Ten muted hues for the symptom groups. Indexed by position, never by id,
     so adding a symptom to the library cannot produce a colourless chart. */
  --sym-0: #3F6E7C;
  --sym-1: #65784A;
  --sym-2: #8A5570;
  --sym-3: #46756B;
  --sym-4: #97643A;
  --sym-5: #5D6394;
  --sym-6: #757342;
  --sym-7: #8A5148;
  --sym-8: #4B788C;
  --sym-9: #756A88;

  --good: #4E7250;
  --warn: #8F6522;
  --bad: #A4453C;

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 4px; --r: 8px; --r-lg: 12px;
  --sp: 8px;
  --maxw: 1240px;
}

/* Screen palettes are defined in premium.css. */

/* ============================================================ RESET */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }

/* Display type is a serif. It is the single change that makes a bone page
   read as an editorial document rather than a form, and it costs nothing —
   ui-serif resolves to New York on macOS and Georgia elsewhere. */
h1, h2, .metric-value {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.015em;
}
h1 { font-size: 2.375rem; line-height: 1.14; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.005em; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration-color: var(--fg-faint); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; }
code, .mono { font-family: var(--mono); font-size: .9em; }
table { border-collapse: collapse; width: 100%; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--sys); outline-offset: 2px; border-radius: 3px; }

/* Every number, everywhere. Proportional figures in a scores table is the
   tell of an amateur build. */
.num, td, th, .metric-value, .tick, text { font-variant-numeric: tabular-nums; }

/* Shown only in the printed document; print.css flips it back on. */
.print-only { display: none; }

/* The chart data tables use this so screen readers get real content instead of
   an image with no text. `clip` alone does not stop a wide <table> from
   extending the document's scroll width, so clip-path and overflow are both
   needed — otherwise every chart silently adds horizontal scroll on mobile. */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  max-width: 1px; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================ MICRO-LABEL
   This one treatment does most of the work of making the product look
   expensive. */

.micro, .metric-label, thead th, .eyebrow, .quad-label, .axis-title {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--fg-muted);
}

.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.small { font-size: .875rem; }
.prose { max-width: 68ch; }

/* ============================================================ LAYOUT */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grid { display: grid; gap: 16px; }
.grid.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.pillar-row { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: start; }
.grid.workbench { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.grid.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.spacer { flex: 1 1 auto; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
.card.tight { padding: 14px 16px; }
.card.flush { padding: 0; overflow: hidden; }

/* ============================================================ APP CHROME */

.app-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.app-header .wrap { display: flex; align-items: center; gap: 20px; height: 60px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.brand .mark { display: flex; gap: 2px; align-items: flex-end; height: 18px; }
.brand .mark i { display: block; width: 4px; border-radius: 1px; }
.brand .mark i:nth-child(1) { height: 18px; background: var(--sym-0); }
.brand .mark i:nth-child(2) { height: 12px; background: var(--sym-1); }
.brand .mark i:nth-child(3) { height: 15px; background: var(--sym-2); }
.brand b { font-weight: 600; }
.brand span { color: var(--fg-muted); font-weight: 400; }

.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 7px 12px; border-radius: var(--r-sm); text-decoration: none;
  font-size: .9375rem; color: var(--fg-muted); white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--fg); }
.nav a[aria-current="page"] { background: var(--surface-3); color: var(--fg); font-weight: 550; }

.app-footer {
  border-top: 1px solid var(--line); margin-top: 56px; padding: 20px 0 40px;
  color: var(--fg-muted); font-size: .875rem;
}

main { padding: 28px 0 0; }
.view { animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.page-head { margin-bottom: 22px; }
.page-head h1 { margin-bottom: 6px; }
.page-head .sub { color: var(--fg-muted); max-width: 72ch; }

/* ============================================================ BUTTONS */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font-size: .875rem; font-weight: 500;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--fg-faint); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.btn.primary:hover { filter: brightness(1.12); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: 6px 11px; font-size: .875rem; }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 7px 13px; font-size: .875rem; cursor: pointer; color: var(--fg-muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--fg); font-weight: 550; }

input[type="text"], input[type="date"], input[type="number"], select, textarea {
  font: inherit; padding: 8px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--fg); width: 100%;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
label.field { display: block; }
label.field > span { display: block; margin-bottom: 5px; }

/* ============================================================ CHIPS & FLAGS */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  /* --surface, not --surface-2: chip text is a 12px colour token, and the darker
     fill pushed 14 chip variants below AA. The border still reads as a pill. */
  border: 1px solid var(--line); background: var(--surface);
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-muted);
  /* Short status chips still sit on one line; only chips carrying a full
     parameter name wrap, instead of overflowing the row on a phone. */
  white-space: normal; max-width: 100%; text-align: left; line-height: 1.3;
}
/* Symptom chips carry a whole complaint, not a two-word label, so they must be
   allowed to wrap — nowrap pushed them out of the 258px axis-key rail and
   widened the entire right column. */
.chip.sym {
  white-space: normal; text-align: left; line-height: 1.35;
  max-width: 100%; text-transform: none; letter-spacing: .01em;
  font-size: .75rem; font-weight: 600; padding: 3px 9px;
}
.chip.sys { color: color-mix(in srgb, var(--sys) 85%, var(--fg)); border-color: color-mix(in srgb, var(--sys) 45%, transparent); }
.chip.beh { color: color-mix(in srgb, var(--beh) 85%, var(--fg)); border-color: color-mix(in srgb, var(--beh) 45%, transparent); }
.chip.q1 { color: var(--q1); border-color: color-mix(in srgb, var(--q1) 40%, transparent); }
.chip.q2 { color: var(--q2); border-color: color-mix(in srgb, var(--q2) 40%, transparent); }
.chip.q3 { color: var(--q3); border-color: color-mix(in srgb, var(--q3) 40%, transparent); }
.chip.q4 { color: var(--q4); border-color: color-mix(in srgb, var(--q4) 40%, transparent); }
.chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.chip.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.chip.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.chip.sym-0 { color: var(--sym-0); border-color: color-mix(in srgb, var(--sym-0) 40%, transparent); }
.chip.sym-1 { color: var(--sym-1); border-color: color-mix(in srgb, var(--sym-1) 40%, transparent); }
.chip.sym-2 { color: var(--sym-2); border-color: color-mix(in srgb, var(--sym-2) 40%, transparent); }
.chip.sym-3 { color: var(--sym-3); border-color: color-mix(in srgb, var(--sym-3) 40%, transparent); }
.chip.sym-4 { color: var(--sym-4); border-color: color-mix(in srgb, var(--sym-4) 40%, transparent); }
.chip.sym-5 { color: var(--sym-5); border-color: color-mix(in srgb, var(--sym-5) 40%, transparent); }
.chip.sym-6 { color: var(--sym-6); border-color: color-mix(in srgb, var(--sym-6) 40%, transparent); }
.chip.sym-7 { color: var(--sym-7); border-color: color-mix(in srgb, var(--sym-7) 40%, transparent); }
.chip.sym-8 { color: var(--sym-8); border-color: color-mix(in srgb, var(--sym-8) 40%, transparent); }
.chip.sym-9 { color: var(--sym-9); border-color: color-mix(in srgb, var(--sym-9) 40%, transparent); }
.chip.plain { text-transform: none; letter-spacing: 0; font-weight: 500; }

.banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: .9375rem;
}
.banner.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.banner.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.banner b { font-weight: 650; }

/* ============================================================ METRICS */

.triad { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.metric { display: flex; flex-direction: column; gap: 6px; }
.metric-value {
  font-size: clamp(2.75rem, 5.8vw, 4.25rem); font-weight: 400;
  letter-spacing: -.025em; line-height: 1;
}
.metric-value.null { color: var(--fg-muted); font-size: 2rem; }
.metric-dir { font-size: .8125rem; color: var(--fg-muted); }
.metric-note { font-size: .875rem; color: var(--fg-muted); }

/* Band ladder — five thresholds with a marker at the score. */
.ladder { margin-top: 4px; }
.ladder-track { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.ladder-track i { display: block; height: 100%; }
.ladder-marker { position: relative; height: 12px; }
.ladder-marker i {
  position: absolute; top: 0; width: 2px; height: 10px; background: var(--fg); border-radius: 1px;
  transform: translateX(-1px);
}
.ladder-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--fg-muted); margin-top: 2px; }

/* Bipolar direction bar */
.bipolar { position: relative; height: 26px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.bipolar .mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--fg-faint); }
.bipolar .fill { position: absolute; top: 5px; bottom: 5px; border-radius: 3px; }
.bipolar .fill.pos { background: var(--sys); }
.bipolar .fill.neg { background: var(--beh); }
.bipolar-legend { display: flex; justify-content: space-between; font-size: .75rem; color: var(--fg-muted); margin-top: 4px; }

/* ============================================================ CHARTS */

.chart { position: relative; margin: 0; }
.chart figcaption { margin-top: 10px; font-size: .875rem; color: var(--fg-muted); text-align: center; }
.radar { display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; }
.radar.compact { max-width: 460px; }
.scatter { display: block; width: 100%; height: auto; max-width: 680px; margin: 0 auto; }

.radar-grid circle { fill: none; stroke: var(--grid); stroke-width: 1; }
.radar-grid .radar-hole { fill: var(--surface); stroke: var(--grid); }
.radar-thresh { fill: none; stroke: var(--fg-muted); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .75; }
.radar-zero { fill: none; stroke: var(--fg); stroke-width: 1.8; opacity: .8; }
.radar-spokes line { stroke: var(--grid); stroke-width: 1; }
.radar-spokes line.hollow { stroke-dasharray: 2 4; opacity: .7; }
.radar-spokes .hollow-cap { fill: var(--surface); stroke: var(--fg-faint); stroke-width: 1.2; }
.radar-ticks text { font-size: 11px; fill: var(--fg-muted); }
.radar-ticks .tick-bg { fill: var(--surface); opacity: .9; }

.radar-bands circle { stroke: none; }
.band-e5 { fill: color-mix(in srgb, var(--good) 16%, var(--surface)); }
.band-e4 { fill: color-mix(in srgb, var(--good) 9%, var(--surface)); }
.band-e3 { fill: var(--surface-2); }
.band-e2 { fill: color-mix(in srgb, var(--warn) 9%, var(--surface)); }
.band-e1 { fill: color-mix(in srgb, var(--bad) 11%, var(--surface)); }

.radar-arcs .arc { stroke: none; fill-opacity: .16; }
.radar-arcs .arc-sym-0 { fill: var(--sym-0); } .radar-arcs .arc-sym-1 { fill: var(--sym-1); }
.radar-arcs .arc-sym-2 { fill: var(--sym-2); } .radar-arcs .arc-sym-3 { fill: var(--sym-3); }
.radar-arcs .arc-sym-4 { fill: var(--sym-4); } .radar-arcs .arc-sym-5 { fill: var(--sym-5); }
.radar-arcs .arc-sym-6 { fill: var(--sym-6); } .radar-arcs .arc-sym-7 { fill: var(--sym-7); }
.radar-arcs .arc-sym-8 { fill: var(--sym-8); } .radar-arcs .arc-sym-9 { fill: var(--sym-9); }
.arc-label { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; }
.arc-label-sym-0 { fill: var(--sym-0); } .arc-label-sym-1 { fill: var(--sym-1); }
.arc-label-sym-2 { fill: var(--sym-2); } .arc-label-sym-3 { fill: var(--sym-3); }
.arc-label-sym-4 { fill: var(--sym-4); } .arc-label-sym-5 { fill: var(--sym-5); }
.arc-label-sym-6 { fill: var(--sym-6); } .arc-label-sym-7 { fill: var(--sym-7); }
.arc-label-sym-8 { fill: var(--sym-8); } .arc-label-sym-9 { fill: var(--sym-9); }

.pat-tiger line { stroke: var(--sys); stroke-width: 1.5; }
.pat-shadow circle { fill: var(--beh); }
.radar-gapband { opacity: .55; }

.series { fill: none; stroke-width: 2.4; stroke-linejoin: round; }
.series.sys { stroke: var(--sys); stroke-dasharray: 7 3.5; }
.series.beh { stroke: var(--beh); }
.series.eff { stroke: var(--fg-muted); stroke-width: 1.5; stroke-dasharray: 2 3; }
/* Wave comparison: the previous wave is a faint dashed ghost, the current
   wave is drawn in ink so then-versus-now is the contrast the eye picks up. */
.series.alt { stroke: var(--fg-faint); stroke-width: 1.3; stroke-dasharray: 3 3; }
.series.now { stroke: var(--fg); stroke-width: 2.2; }
.series.style-fill.now { fill: var(--fg); fill-opacity: .07; }
.marker.now { fill: var(--fg); }
.series.style-fill.sys { fill: var(--sys); fill-opacity: .08; }
.series.style-fill.beh { fill: var(--beh); fill-opacity: .13; }
.series.style-fill.eff { fill: var(--fg-muted); fill-opacity: .10; }
.marker.sys { fill: var(--sys); }
.marker.beh { fill: var(--beh); }
.marker.eff { fill: var(--fg-muted); }

.radar-labels .axis-label { font-size: 11px; font-weight: 600; fill: var(--fg-muted); }
.radar-labels.mode-short .axis-label { font-size: 10.5px; font-weight: 500; }
.radar-labels .axis-label.hollow { opacity: .4; }
.radar-labels .axis-label.flagged { fill: var(--warn); }
.radar-labels .leader { stroke: var(--fg-faint); stroke-width: 1; opacity: .35; }

.radar-hits .hit { fill: transparent; cursor: pointer; }
.radar-hits .hit:hover, .radar-hits .hit:focus { fill: var(--fg); fill-opacity: .045; outline: none; }

.chart-tip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: .875rem; min-width: 160px; max-width: 260px;
  box-shadow: var(--shadow);
}
.chart-tip b { display: block; margin-bottom: 3px; }
.chart-tip .tip-row { display: flex; justify-content: space-between; gap: 12px; }
.chart-tip .tip-row span:first-child { color: var(--fg-muted); }

.scatter-quads rect { opacity: .5; }
.scatter-quads .q1 { fill: color-mix(in srgb, var(--q1) 9%, transparent); }
.scatter-quads .q2 { fill: color-mix(in srgb, var(--q2) 8%, transparent); }
.scatter-quads .q3 { fill: color-mix(in srgb, var(--q3) 8%, transparent); }
.scatter-quads .q4 { fill: color-mix(in srgb, var(--q4) 8%, transparent); }
.scatter .quad-label { font-size: 10.5px; }
.scatter .quad-label.q1 { fill: var(--q1); } .scatter .quad-label.q2 { fill: var(--q2); }
.scatter .quad-label.q3 { fill: var(--q3); } .scatter .quad-label.q4 { fill: var(--q4); }
.scatter-grid line { stroke: var(--grid); stroke-width: 1; }
.scatter-grid .tick { font-size: 10px; fill: var(--fg-faint); }
.scatter-theta line { stroke: var(--fg-muted); stroke-width: 1.4; stroke-dasharray: 4 4; }
.scatter-parity { stroke: var(--fg-faint); stroke-width: 1; stroke-dasharray: 2 4; }
.scatter .parity-label { font-size: 9.5px; fill: var(--fg-faint); }
.scatter .axis-title { fill: var(--fg-muted); }
.scatter-points .pt { stroke: var(--surface); stroke-width: 1.5; cursor: pointer; }
.scatter-points .pt.q1 { fill: var(--q1); } .scatter-points .pt.q2 { fill: var(--q2); }
.scatter-points .pt.q3 { fill: var(--q3); } .scatter-points .pt.q4 { fill: var(--q4); }
.scatter-points .pt:hover, .scatter-points .pt:focus { stroke: var(--fg); stroke-width: 2; outline: none; }
.scatter-points .pt-label { font-size: 9.5px; font-weight: 600; fill: var(--fg-muted); }

.dumbbell { width: 100%; height: auto; max-width: 300px; }
.db-track { stroke: var(--grid); stroke-width: 3; stroke-linecap: round; }
.db-theta { stroke: var(--fg-faint); stroke-width: 1; stroke-dasharray: 2 2; }
.db-link { stroke-width: 3.5; stroke-linecap: round; }
.db-link.tiger { stroke: var(--sys); opacity: .45; }
.db-link.shadow { stroke: var(--beh); opacity: .45; }
.db-dot { stroke: var(--surface); stroke-width: 1.5; }
.db-dot.sys { fill: var(--sys); }
.db-dot.beh { fill: var(--beh); }

.histo { width: 100%; height: auto; max-width: 200px; }
.histo-bar { fill: var(--fg-faint); }
.histo-bar.sys { fill: var(--sys); }
.histo-bar.beh { fill: var(--beh); }
.histo-bar.dk { fill: var(--fg-faint); opacity: .5; }
.histo-tick { font-size: 8px; fill: var(--fg-faint); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .875rem; color: var(--fg-muted); }
.legend i { display: inline-block; width: 22px; height: 0; border-top-width: 2.5px; border-top-style: solid; vertical-align: middle; margin-right: 6px; }
.legend .sys i { border-color: var(--sys); border-top-style: dashed; }
.legend .beh i { border-color: var(--beh); }
.legend .eff i { border-color: var(--fg-muted); border-top-style: dotted; }
.legend .was i { border-color: var(--fg-faint); border-top-style: dashed; }
.legend .now i { border-color: var(--fg); }
.legend .swatch { display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.legend .swatch.tiger { background: var(--sys); opacity: .5; }
.legend .swatch.shadow { background: var(--beh); opacity: .5; }

.chart-switcher { display: flex; flex-direction: column; gap: 4px; }
.chart-switcher .btn { width: 100%; justify-content: flex-start; text-align: left; }
.btn.faded { opacity: .5; }

/* Wave comparison: a movement inside the noise floor is shown, but shown
   quietly — it is not evidence of anything. */
tbody tr.faded td { opacity: .55; }
.wave-from { font-size: 1.125rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.wave-to { font-size: 1.5rem; font-family: var(--serif); font-variant-numeric: tabular-nums; }
.radar-labels .axis-label.moved { fill: var(--fg); font-weight: 700; }

/* Axis legend: the code-to-topic key that must travel with every 30-axis chart */
.axis-key { columns: 1; font-size: .875rem; }
.axis-key .key-row { display: flex; gap: 8px; padding: 2px 0; break-inside: avoid; }
.axis-key .key-row code { color: var(--fg-muted); min-width: 2.4em; font-weight: 600; }
.axis-key h4 { margin: 14px 0 5px; }
.axis-key h4:first-child { margin-top: 0; }
.axis-key .key-head {
  font-size: .8125rem; font-weight: 650; line-height: 1.3;
  border-left: 3px solid var(--line); padding-left: 8px;
}

/* ============================================================ TABLES */

.table-wrap { overflow-x: auto; }
thead th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody td { padding: 10px 10px; border-bottom: 1px solid var(--line-soft); font-size: .875rem; vertical-align: middle; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr.clickable { cursor: pointer; }
td.num, th.num { text-align: right; }

/* Diverging bar inside a table cell */
.dbar { position: relative; height: 16px; min-width: 120px; background: var(--surface-2); border-radius: 3px; }
.dbar .mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--fg-faint); }
.dbar i { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; }
.dbar i.pos { background: var(--sys); left: 50%; }
.dbar i.neg { background: var(--beh); right: 50%; }

/* ============================================================ SURVEY */

.survey-shell { max-width: 780px; margin: 0 auto; }
.progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.pbar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--fg-muted); transition: width .18s ease-out; }

.topic-card { padding: 26px 28px; }
.topic-card .eyebrow { margin-bottom: 8px; }
.topic-card h2 { font-size: 1.5rem; margin-bottom: 6px; }
.topic-card .definition { color: var(--fg-muted); font-size: .9375rem; max-width: 64ch; }

/* One question per block, five to a page. The parameter name is deliberately
   NOT shown: it appears on both halves of a pair, and printing it twice is
   exactly what would let a respondent reconstruct the pair. */
.qitem {
  margin-top: 20px; padding: 16px 18px;
  border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--surface-2);
  transition: border-color .12s, background .12s;
}
.qitem.focused { border-color: var(--fg-faint); background: var(--surface); }
.qitem.answered { background: var(--surface); }
.qitem-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.qitem .qnum { font-size: .75rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.qitem .qtext { font-size: 1.0625rem; line-height: 1.5; font-weight: 450; margin-bottom: 14px; max-width: 62ch; }
.kbd-target {
  margin-left: auto; font-size: .625rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-faint); border: 1px dashed var(--line); border-radius: 999px; padding: 1px 8px;
}


.pills { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pill {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm);
  padding: 10px 4px 8px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  transition: border-color .12s, background .12s;
}
.pill:hover { border-color: var(--fg-faint); background: var(--surface-2); }
.pill b { font-size: 1.0625rem; font-weight: 600; line-height: 1; }
.pill span { font-size: .75rem; line-height: 1.25; color: var(--fg-muted); }
.pill[aria-pressed="true"] { border-color: var(--fg); background: var(--surface-3); }
.qblock.sys .pill[aria-pressed="true"] { border-color: var(--sys); background: var(--sys-soft); }
.qblock.beh .pill[aria-pressed="true"] { border-color: var(--beh); background: var(--beh-soft); }
.dk-row { margin-top: 8px; display: flex; justify-content: flex-end; }
.dk-pill[aria-pressed="true"] { border-color: var(--fg-muted); background: var(--surface-3); font-weight: 600; }

.survey-nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.kbd-hint { font-size: .8125rem; color: var(--fg-muted); }
kbd {
  font-family: var(--mono); font-size: .75rem; padding: 1px 5px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2);
}

.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr)); gap: 8px; }
.map-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  cursor: pointer; text-align: left; font-size: .875rem;
}
.map-item:hover { background: var(--surface-2); }
.map-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); flex: none; }
.map-item.half .dot { background: var(--fg-faint); }
.map-item.full .dot { background: var(--good); }
.map-item.current { border-color: var(--fg); }

/* ---- symptom picker ---- */
/* min() so a container narrower than the 280px track floor does not force
   the track wider than the container. */
.symptom-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.symptom-option {
  text-align: left; cursor: pointer; padding: 14px 16px;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r);
  background: var(--surface); display: flex; flex-direction: column; gap: 6px;
  transition: background .12s, border-color .12s;
}
.symptom-option:hover { background: var(--surface-2); }
.symptom-option.on { background: var(--surface-2); border-color: var(--fg-faint); }
.symptom-option.on { border-left-width: 3px; }
.symptom-option b { font-size: .9375rem; }
/* Keep the code on the title line however long the name is. */
.symptom-option > .row.between { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.symptom-option > .row.between > .row { flex: 1 1 auto; align-items: flex-start; }
.symptom-option > .row.between > code { flex: 0 0 auto; padding-top: 2px; }
.tickbox {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 4px; flex: none;
  border: 1px solid var(--fg-faint); background: var(--surface);
  font-size: .6875rem; font-weight: 700; color: var(--surface);
}
.tickbox.on { background: var(--brand); border-color: var(--brand); }
.presenting-line { font-size: .875rem; font-style: italic; color: var(--fg-muted); margin: 0; }

/* ---- symptom diagnosis ---- */
.presenting {
  margin: 0; padding: 8px 0 8px 14px;
  border-left: 2px solid var(--line);
  font-family: var(--serif); font-size: 1.0625rem; font-style: italic;
  color: var(--fg-muted); max-width: 68ch;
}
.symptom-card { border-left: 3px solid var(--line); }
.sym-border-0 { border-left-color: var(--sym-0); }
.sym-border-1 { border-left-color: var(--sym-1); }
.sym-border-2 { border-left-color: var(--sym-2); }
.sym-border-3 { border-left-color: var(--sym-3); }
.sym-border-4 { border-left-color: var(--sym-4); }
.sym-border-5 { border-left-color: var(--sym-5); }
.sym-border-6 { border-left-color: var(--sym-6); }
.sym-border-7 { border-left-color: var(--sym-7); }
.sym-border-8 { border-left-color: var(--sym-8); }
.sym-border-9 { border-left-color: var(--sym-9); }

/* ---- the symptom card ("the distance card") ----------------------------
   One fixed axis column runs down the card: the symptom's own dumbbell in the
   head and each mechanism's directly beneath it, all on the same 0-100 domain,
   so the dashed threshold stacks into one continuous line and the reader can
   compare every mechanism with a single glance down the page.

   Everything here is scoped to .sx-* because .card, .row, .kv, .micro and the
   chip family are shared with five other views and must not shift. The card
   deliberately does NOT carry .stack: `.stack > * + *` is specificity (0,2,0)
   and would beat every single-class margin below. */

.sx-stack > * + * { margin-top: 18px; }
.sx-card { border-left: 3px solid var(--line); padding: 20px 22px; }
.sx-card > * + * { margin-top: 14px; }

.sx-head {
  display: grid; gap: 18px 24px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 300px 96px;
}
.sx-title {
  margin: 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 400;
  line-height: 1.2; letter-spacing: -.015em; color: var(--fg); max-width: 34ch;
}
.sx-said {
  margin: 6px 0 0; font-family: var(--serif); font-style: italic;
  font-size: .9375rem; line-height: 1.45; color: var(--fg-muted); max-width: 58ch;
}
.sx-meta { margin: 8px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--fg-muted); }

/* The axis column. Fixed width is the whole point — it is what makes the
   thresholds line up between the head and every row below it. */
.sx-axis { width: 300px; max-width: 100%; }
.sx-axis .dumbbell { width: 100%; max-width: 300px; display: block; }
.sx-scale {
  position: relative; height: 14px; font-size: .6875rem; line-height: 14px;
  color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.sx-scale .at-0 { position: absolute; left: 0; }
.sx-scale .at-100 { position: absolute; right: 0; }
.sx-scale .at-theta { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.sx-read {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px;
  font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}
.sx-read .sys { color: var(--sys); }
.sx-read .beh { color: var(--beh); }

.sx-verdict { text-align: right; }
.sx-verdict .n {
  display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 400;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fg);
}
.sx-verdict .k { display: block; margin-top: 2px; font-size: .6875rem; color: var(--fg-muted); }
.sx-verdict .band { display: block; margin-top: 3px; font-size: .6875rem; font-weight: 600; color: var(--fg-muted); }
.sx-verdict .band.bad { color: var(--bad); }
.sx-verdict .band.warn { color: var(--warn); }
.sx-verdict .band.good { color: var(--good); }

.sx-rows { border-top: 1px solid var(--line-soft); }
.sx-row {
  display: grid; gap: 8px 24px; align-items: center; padding: 5px 0;
  grid-template-columns: 22px minmax(0, 1fr) 300px 96px;
  border-bottom: 1px solid var(--line-soft);
}
.sx-row.r1 { align-items: start; padding: 10px 0 14px; }
.sx-rank { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--fg-muted); }
.sx-row.r1 .sx-rank { padding-top: 2px; }
.sx-col2 { min-width: 0; }
/* Ranks 2-3 put the figures on the name line rather than under it. The figures
   stay OUTSIDE the button so the row's accessible name is the mechanism, not the
   mechanism plus its numbers. */
.sx-row:not(.r1) .sx-col2 { display: flex; align-items: baseline; gap: 14px; }
.sx-row:not(.r1) .sx-body { flex: 1 1 auto; min-width: 0; }
.sx-row:not(.r1) .sx-figs { flex: 0 0 auto; margin-top: 0; white-space: nowrap; }

/* Stays a <button>: app.js keyboard activation is exact-target and gated to TR,
   so a div would lose keyboard access entirely. The figures live outside it so
   the accessible name is the mechanism, not the whole row. */
.sx-body {
  display: block; width: 100%; text-align: left; padding: 0;
  background: none; border: 0; cursor: pointer; color: inherit; font: inherit;
}
.sx-body code {
  font-family: var(--mono); font-size: .8125rem; color: var(--fg-muted); margin-right: 8px;
}
.sx-name { font-size: .9375rem; font-weight: 500; color: var(--fg-muted); }
.sx-name.narrow { display: none; }
.sx-row.r1 .sx-name { font-size: 1.0625rem; font-weight: 600; color: var(--fg); }
.sx-body:hover .sx-name, .sx-body:focus-visible .sx-name { text-decoration: underline; }
.sx-verdictline { margin-top: 3px; font-size: .8125rem; line-height: 1.4; color: var(--fg-muted); }
/* Ranks 2-3 fold the pattern onto the name line rather than stacking it. */
.sx-verdictline.inline { display: inline; margin-top: 0; }
.sx-verdictline b { font-weight: 600; color: var(--fg-muted); }
.sx-row.r1 .sx-verdictline b { color: var(--fg); }
.sx-figs {
  margin-top: 4px; font-size: .8125rem; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.sx-note { margin: 8px 0 0; font-size: .875rem; line-height: 1.5; color: var(--fg-muted); max-width: 62ch; }
.sx-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sx-flags .chip { font-size: .6875rem; padding: 1px 7px; }
.sx-row .banner { margin-top: 10px; }
.sx-eff {
  text-align: right; font-size: .9375rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--fg-muted);
}
.sx-row.r1 .sx-eff { font-size: 1.0625rem; color: var(--fg); }

.sx-move { margin: 0; font-size: .9375rem; line-height: 1.5; max-width: 78ch; color: var(--fg-muted); }
.sx-move b { font-weight: 600; color: var(--fg); }
.sx-move-wrap .anti { margin: 10px 0 0; }
.sx-empty { margin: 0; font-size: .875rem; color: var(--fg-muted); }

.sx-foot {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; font-size: .8125rem; color: var(--fg-muted);
}
.sx-details { margin-top: 12px; }

/* The appendix pairs each parameter's figures with its definition on the row
   beneath, so the definition survives on paper (print.css hides the drawer). */
.appendix-def td {
  padding-top: 0; border-top: 0; font-size: .8125rem; line-height: 1.45;
  color: var(--fg-muted); max-width: 0;
}

@media (max-width: 900px) {
  /* The axis column drops under the text rather than shrinking. It stays full
     width in every row, so the shared 0-100 domain — the reason the card works —
     survives the narrow layout. */
  .sx-head { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; }
  .sx-head .sx-axis { grid-column: 1 / -1; }
  .sx-axis { width: 100%; }
  .sx-row { grid-template-columns: 22px minmax(0, 1fr) 44px; gap: 4px 12px; }
  .sx-row .sx-axis { grid-column: 2 / -1; }
  /* There is no room to set the name beside its figures at this width, so ranks
     2-3 go back to stacking — the side-by-side rule is a wide-screen saving. */
  .sx-row:not(.r1) .sx-col2 { display: block; }
  .sx-row:not(.r1) .sx-figs { white-space: normal; margin-top: 2px; }
  .sx-verdictline.inline { display: block; margin-top: 2px; }
  .sx-verdictline.inline .lead-dash { display: none; }
  /* p.short is authored at <=18 chars for the radar axes; it is the right
     label at this width too, where the full name runs to three lines. */
  .sx-name.wide { display: none; }
  .sx-name.narrow { display: inline; }
  .sx-row:not(.r1) .sx-figs { font-size: .75rem; }
}

/* ---- bars fallback ---- */
.barchart { display: block; width: 100%; height: auto; max-width: 680px; margin: 0 auto; }
.bar.sys { fill: var(--sys); } .bar.beh { fill: var(--beh); } .bar.eff { fill: var(--fg-muted); }
.bar-label { font-size: 11px; fill: var(--fg); }
.bar-value { font-size: 10px; fill: var(--fg-muted); font-variant-numeric: tabular-nums; }

.seg.wrap { flex-wrap: wrap; }

/* ============================================================ DRAWER */

.scrim {
  position: fixed; inset: 0; background: rgba(35,28,18,.40); z-index: 60;
  animation: fade .15s ease-out;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  background: var(--surface); border-left: 1px solid var(--line); z-index: 61;
  box-shadow: var(--shadow);
  overflow-y: auto; padding: 22px 24px 60px;
  animation: slide .2s ease-out;
}
@keyframes slide { from { transform: translateX(16px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.drawer-head h2 { font-size: 1.375rem; margin: 0; }
.drawer .close { margin-left: auto; }

.playbook { border-left: 3px solid var(--line); padding-left: 14px; }
.playbook.q1 { border-color: var(--q1); }
.playbook.q2 { border-color: var(--q2); }
.playbook.q3 { border-color: var(--q3); }
.playbook.q4 { border-color: var(--q4); }
.anti {
  /* Was inheriting its colour from whatever it landed in, which measured 1.30:1
     inside a .faint parent. A warning must state its own colour. */
  color: var(--fg);
  font-weight: 650; font-size: .8125rem; letter-spacing: .01em;
  padding: 9px 12px; border-radius: var(--r-sm); margin-bottom: 10px;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 12px; }
.kv div { display: flex; flex-direction: column; gap: 2px; }
.kv .k { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); }
.kv .v { font-size: 1.25rem; font-weight: 500; }

.score-bar { position: relative; height: 22px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.score-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.score-bar i.sys { background: var(--sys); opacity: .72; }
.score-bar i.beh { background: var(--beh); opacity: .72; }
.score-bar .theta { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--fg); opacity: .55; }
.score-bar .ci { position: absolute; top: 50%; height: 1px; background: var(--surface); opacity: .9; }

/* ============================================================ HOME */

.hero {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 52px 44px; margin-bottom: 24px;
  position: relative; overflow: hidden;
}
/* A hairline rule in the three pillar colours, as a masthead would carry. */
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg,
    var(--sym-0) 0 20%, var(--sym-2) 20% 40%, var(--sym-4) 40% 60%,
    var(--sym-5) 60% 80%, var(--sym-8) 80% 100%);
}
.hero h1 { font-size: clamp(2.125rem, 4.6vw, 3.125rem); max-width: 21ch; letter-spacing: -.02em; }
.hero .lede { font-size: 1.0625rem; color: var(--fg-muted); max-width: 62ch; }
.symptom-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; margin-top: 26px; }
.symptom-strip .p { border-top: 3px solid var(--line); padding-top: 10px; }
.symptom-strip .p.muted-strip { border-color: var(--fg-faint); }
.symptom-strip .p b { display: block; font-size: .875rem; }
.symptom-strip .p span { font-size: .875rem; color: var(--fg-muted); }

.entry { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.entry .card { display: flex; flex-direction: column; gap: 8px; cursor: pointer; text-align: left; }
.entry .card:hover { border-color: var(--fg-faint); background: var(--surface-2); }
.entry .card h3 { margin: 0; font-size: 1.0625rem; }
.entry .card p { font-size: .875rem; color: var(--fg-muted); }

.drop {
  border: 1.5px dashed var(--line); border-radius: var(--r); padding: 26px;
  text-align: center; color: var(--fg-muted); font-size: .875rem; background: var(--surface-2);
}
.drop.over { border-color: var(--sys); background: var(--sys-soft); color: var(--fg); }

.pp-bar {
  position: sticky; top: 68px; z-index: 30;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 9px 14px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-3); font-size: .875rem;
}

/* ============================================================ REFERENCE */

.ref-topic { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.ref-topic:last-child { border-bottom: 0; }
.ref-topic .qs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.ref-topic .q { border-left: 2px solid var(--line); padding-left: 12px; font-size: .9375rem; }
.ref-topic .q.sys { border-color: var(--sys); }
.ref-topic .q.beh { border-color: var(--beh); }
.formula {
  font-family: var(--mono); font-size: .8125rem; line-height: 1.5; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px; overflow-x: auto;
}

/* ============================================================ TEST PAGE */

.test-page { padding: 32px 24px 80px; max-width: 900px; margin: 0 auto; }
.test-head h1 { font-size: 1.5rem; }
.test-summary { display: inline-block; padding: 8px 14px; border-radius: var(--r-sm); font-weight: 600; margin: 8px 0 20px; }
.test-summary.pass { background: color-mix(in srgb, var(--good) 15%, var(--surface)); color: var(--good); }
.test-summary.fail { background: color-mix(in srgb, var(--bad) 15%, var(--surface)); color: var(--bad); }
.test-group { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; margin-bottom: 12px; background: var(--surface); }
.test-group.has-fail { border-color: var(--bad); }
.test-group h2 { font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.test-group ul { list-style: none; margin: 0; padding: 0; font-size: .8125rem; }
.test-group li { padding: 2px 0; display: flex; gap: 8px; }
.test-group li.pass .mark { color: var(--good); }
.test-group li.fail { color: var(--bad); }
.test-group em { color: var(--fg-muted); font-style: normal; }

/* ============================================================ RESPONSIVE */

@media (max-width: 960px) {
  .grid.g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.g3 { grid-template-columns: 1fr; }
  .grid.pillar-row, .grid.workbench { grid-template-columns: 1fr; }
  .triad { grid-template-columns: 1fr; gap: 22px; }
  .ref-topic .qs { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .wrap { padding: 0 16px; }
  .grid.g2, .grid.g4 { grid-template-columns: 1fr; }
  .hero { padding: 28px 20px; }
  .topic-card { padding: 20px 18px; }
  .qblock.sys, .qblock.beh { margin-left: -18px; padding-left: 15px; }
  /* Five rungs still fit a 375px row once the anchor captions drop away. */
  .pills { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .pill span { display: none; }
  .pill { padding: 13px 2px; }
  .app-header .wrap { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .drawer { width: 100%; }
  /* A four-option segmented control does not fit 375px on one line. */
  .seg { flex-wrap: wrap; }
  .seg button { flex: 1 1 auto; }
  .seg button + button { border-left: 0; }
}

/* Below this the 30-axis radar stops being readable at all and the list view
   takes over. Pretending otherwise produces an illegible chart. */
.list-view { display: none; }
@media (max-width: 460px) {
  .chart-collapsible .chart { display: none; }
  .chart-collapsible.show-chart .chart { display: block; }
  .chart-collapsible .list-view { display: block; }
  .chart-collapsible.show-chart .list-view { display: none; }
}
.list-row { display: grid; grid-template-columns: 2.6em 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.list-row code { color: var(--fg-muted); font-weight: 600; font-size: .8125rem; }
.list-row .nm { font-size: .875rem; }
.list-row .gp { font-size: .8125rem; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}