/* OUNASS CSAT & VOC Command Centre — visual system
   Palette: validated categorical + status ramps (dataviz reference instance). */

:root {
  color-scheme: light;

  /* surfaces & ink */
  --plane:      #f4f3f0;
  --surface-1:  #fcfcfb;
  --surface-2:  #f7f6f3;
  --surface-3:  #eceae4;
  --ink:        #0b0b0b;
  --ink-2:      #52514e;
  --ink-3:      #898781;
  --grid:       #e1e0d9;
  --axis:       #c3c2b7;
  --hair:       rgba(11, 11, 11, .10);
  --hair-2:     rgba(11, 11, 11, .06);
  --shadow:     0 1px 2px rgba(11,11,11,.05), 0 8px 24px -12px rgba(11,11,11,.16);

  /* categorical series */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;

  /* status (fixed, never themed) */
  --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b;
  --good-ink: #006300; --critical-ink: #a82a2a;

  /* 5-point satisfaction scale: diverging red <-> blue, gray midpoint */
  --sc1: #c0392f; --sc2: #ec8b8b; --sc3: #b6b4ac; --sc4: #86b6ef; --sc5: #2a78d6;

  /* sequential blue ramp (heatmaps) */
  --q1: #cde2fb; --q2: #9ec5f4; --q3: #6da7ec; --q4: #3987e5; --q5: #256abf; --q6: #104281;

  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:      #0d0d0d;
  --surface-1:  #1a1a19;
  --surface-2:  #212120;
  --surface-3:  #2c2c2a;
  --ink:        #ffffff;
  --ink-2:      #c3c2b7;
  --ink-3:      #898781;
  --grid:       #2c2c2a;
  --axis:       #383835;
  --hair:       rgba(255, 255, 255, .12);
  --hair-2:     rgba(255, 255, 255, .07);
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);

  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;

  --good-ink: #0ca30c; --critical-ink: #e66767;

  --sc1: #c0392f; --sc2: #d96a6a; --sc3: #6e6d68; --sc4: #2a78d6; --sc5: #86b6ef;
  --q1: #12314f; --q2: #184f95; --q3: #1c5cab; --q4: #2a78d6; --q5: #5598e7; --q6: #9ec5f4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--plane); color: var(--ink);
  font-family: var(--font);
  font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
a { color: var(--s1); }

/* ─────────────────────────────────────────────── layout */

.app { max-width: 1560px; margin: 0 auto; padding: 0 22px 72px; }

header.masthead {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding: 26px 0 18px;
}
.brandmark {
  font-size: 21px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; line-height: 1;
}
.brandmark span { font-weight: 300; opacity: .5; }
.masthead .sub { color: var(--ink-2); font-size: 12.5px; margin-top: 6px; }
.masthead .spacer { flex: 1; }
.masthead .meta {
  text-align: right; font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.mock-flag {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hair); border-radius: 999px;
  padding: 3px 10px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); background: var(--surface-1);
}
.mock-flag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--warning);
}

/* ── programme switcher ───────────────────────────────────────── */

.progswitch {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--surface-3); border-radius: 11px; margin-left: 22px;
}
.progswitch button {
  border: 0; background: none; cursor: pointer; border-radius: 9px;
  padding: 6px 14px; display: flex; flex-direction: column; gap: 1px;
  line-height: 1.2; color: var(--ink-3); text-align: left;
}
.progswitch button b { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.progswitch button span { font-size: 10px; letter-spacing: .04em; opacity: .8; }
.progswitch button:hover { color: var(--ink); }
.progswitch button[aria-pressed="true"] {
  background: var(--surface-1); color: var(--ink);
  box-shadow: 0 1px 2px rgba(11,11,11,.08);
}
.progswitch button[aria-pressed="true"].prog-csat  { box-shadow: inset 0 -2px 0 var(--s1), 0 1px 2px rgba(11,11,11,.08); }
.progswitch button[aria-pressed="true"].prog-nps   { box-shadow: inset 0 -2px 0 var(--s7), 0 1px 2px rgba(11,11,11,.08); }
.progswitch button[aria-pressed="true"].prog-bridge{ box-shadow: inset 0 -2px 0 var(--s3), 0 1px 2px rgba(11,11,11,.08); }

/* the active programme tints only the tab indicator — never a chart series */
:root[data-prog="nps"] nav.tabs button[aria-selected="true"] { border-bottom-color: var(--s7); }
:root[data-prog="bridge"] nav.tabs button[aria-selected="true"] { border-bottom-color: var(--s3); }

.hero-tile .val { font-size: 42px; }
.prog-tint-csat { border-left: 3px solid var(--s1); }
.prog-tint-nps { border-left: 3px solid var(--s7); }

/* signed bar (NPS can go negative) */
.hb-track.signed { position: relative; background: var(--surface-3); }
.hb-track.signed .zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--axis); }
.hb-track.signed .fill { position: absolute; top: 0; bottom: 0; border-radius: 5px; min-width: 2px; }

/* compact score histogram inside expanded rows */
.mini-dist { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; align-items: end; }
.md-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.md-bar { height: 54px; width: 100%; display: flex; align-items: flex-end; background: var(--surface-3); border-radius: 3px; }
.md-bar i { display: block; width: 100%; border-radius: 3px; min-height: 1px; }
.md-pc { font-size: 9.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.md-s { font-size: 10px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.verbatim-box.pos { border-color: var(--good); }

.icon-btn {
  border: 1px solid var(--hair); background: var(--surface-1);
  border-radius: 8px; width: 34px; height: 34px; cursor: pointer;
  display: grid; place-items: center; color: var(--ink-2);
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn.on { background: var(--s1); border-color: var(--s1); color: #fff; }

/* ─────────────────────────────────────────────── tabs */

nav.tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--hair); margin-bottom: 0;
}
nav.tabs button {
  border: 0; background: none; cursor: pointer;
  padding: 10px 15px 12px; font-size: 13.5px; font-weight: 500;
  color: var(--ink-3); border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
}
nav.tabs button:hover { color: var(--ink); }
nav.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ─────────────────────────────────────────────── filter bar */

.filterbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--plane) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
  padding: 11px 0 11px;
  margin-bottom: 20px;
}
.filterbar .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin-right: 2px;
}

.dropdown { position: relative; }
.dd-toggle {
  border: 1px solid var(--hair); background: var(--surface-1); cursor: pointer;
  border-radius: 8px; padding: 6px 11px; font-size: 12.5px; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.dd-toggle:hover { border-color: var(--axis); color: var(--ink); }
.dd-toggle.on { background: var(--ink); color: var(--surface-1); border-color: var(--ink); }
.dd-toggle .caret { opacity: .5; font-size: 9px; }
.dd-toggle .count {
  background: var(--surface-3); color: var(--ink); border-radius: 999px;
  padding: 0 6px; font-size: 10.5px; font-weight: 600;
}
.dd-toggle.on .count { background: rgba(255,255,255,.25); color: var(--surface-1); }

.dd-panel {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 60;
  min-width: 230px; max-height: 340px; overflow: auto;
  background: var(--surface-1); border: 1px solid var(--hair);
  border-radius: 10px; box-shadow: var(--shadow); padding: 6px;
}
.dd-panel .dd-search {
  width: 100%; border: 1px solid var(--hair); border-radius: 7px;
  padding: 6px 9px; margin-bottom: 5px; background: var(--surface-2);
}
.dd-opt {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: 7px; cursor: pointer; font-size: 12.5px;
}
.dd-opt:hover { background: var(--surface-3); }
.dd-opt input { accent-color: var(--s1); margin: 0; }
.dd-opt .n { margin-left: auto; color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.dd-actions { display: flex; gap: 6px; padding: 5px 4px 2px; border-top: 1px solid var(--hair-2); margin-top: 4px; }
.dd-actions button {
  flex: 1; border: 1px solid var(--hair); background: var(--surface-2);
  border-radius: 6px; padding: 4px; font-size: 11.5px; cursor: pointer; color: var(--ink-2);
}
.dd-actions button:hover { background: var(--surface-3); color: var(--ink); }

/* ── drill breadcrumb ─────────────────────────────────────────── */

.crumbs {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-top: 10px; padding: 7px 10px; border-radius: 9px;
  background: var(--surface-1); border: 1px solid var(--hair);
}
.crumb-lead {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin-right: 6px;
}
.crumb {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid transparent; background: var(--surface-2); border-radius: 7px;
  padding: 3px 9px; font-size: 12px; color: var(--ink-2);
}
.crumb:hover { border-color: var(--axis); color: var(--ink); }
.crumb b { font-weight: 600; color: var(--ink); }
.crumb .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.crumb .n {
  font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--ink-3);
  background: var(--surface-3); border-radius: 999px; padding: 0 6px;
}
.crumb.root { background: none; }
.crumb.up { margin-left: auto; background: none; color: var(--ink-3); font-size: 11.5px; }
.crumb-sep { color: var(--ink-3); font-size: 12px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-1); border: 1px solid var(--hair);
  border-radius: 999px; padding: 3px 5px 3px 10px; font-size: 11.5px; color: var(--ink-2);
}
.chip b { font-weight: 600; color: var(--ink); }
.chip .k { color: var(--ink-3); text-transform: uppercase; font-size: 9.5px; letter-spacing: .07em; }
.chip button {
  border: 0; background: var(--surface-3); color: var(--ink-2); cursor: pointer;
  width: 16px; height: 16px; border-radius: 50%; line-height: 1; font-size: 11px;
  display: grid; place-items: center; padding: 0;
}
.chip button:hover { background: var(--critical); color: #fff; }
.chip-clear {
  border: 0; background: none; color: var(--critical-ink);
  cursor: pointer; font-size: 11.5px; text-decoration: underline; padding: 2px 4px;
}
.scope-note { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.scope-note b { color: var(--ink); font-weight: 600; }

/* ─────────────────────────────────────────────── cards */

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 1100px) { .g3, .g4, .g-2-1, .g-1-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px)  { .grid { grid-template-columns: minmax(0,1fr) !important; } }

.card {
  background: var(--surface-1); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 16px 18px 18px;
}
.card.pad0 { padding: 0; overflow: hidden; }
.card-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; flex-wrap: wrap; }
.card-h h3 { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.card-h .hint { font-size: 11.5px; color: var(--ink-3); }
.card-h .spacer { flex: 1; }
.card-sub { font-size: 11.5px; color: var(--ink-3); margin: 0 0 14px; }

/* stat tiles */
.kpi { position: relative; }
.kpi .label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); display: flex; align-items: center; gap: 6px;
}
.kpi .val {
  font-size: 34px; font-weight: 600; letter-spacing: -.025em;
  line-height: 1.1; margin: 7px 0 2px;
}
.kpi .val small { font-size: 15px; font-weight: 500; color: var(--ink-3); margin-left: 1px; }
.kpi .sup { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kpi .delta { font-weight: 600; }
.kpi .delta.up { color: var(--good-ink); }
.kpi .delta.down { color: var(--critical-ink); }
.kpi .delta.flat { color: var(--ink-3); }
.kpi .meter { height: 4px; border-radius: 3px; background: var(--surface-3); margin-top: 11px; overflow: hidden; }
.kpi .meter i { display: block; height: 100%; border-radius: 3px; }

/* clickable KPI tiles — the entry point to the breakdown panel */
.kpi.clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.kpi.clickable:hover { border-color: var(--axis); box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi.clickable:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
.kpi .kpi-caret {
  font-style: normal; font-size: 9px; margin-left: auto; opacity: 0;
  transition: opacity .12s, transform .12s; color: var(--ink-3);
}
.kpi.clickable:hover .kpi-caret { opacity: .7; }
.kpi.active { border-color: var(--ink); }
.kpi.active .kpi-caret { opacity: 1; transform: rotate(180deg); color: var(--ink); }
.kpi.active::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px;
  background: var(--surface-1); border-left: 1px solid var(--ink); border-top: 1px solid var(--ink);
  transform: translateX(-50%) rotate(45deg); border-radius: 2px 0 0 0;
}
.kpi-panel { border-color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════
   INTERACTION AFFORDANCE SYSTEM

   One rule for the whole product: a dotted underline means it opens.
   Layer 1 — a resting marker, visible without hovering (and on touch,
             where hover does not exist).
   Layer 2 — hover and keyboard focus share one treatment: wash + arrow.
   Layer 3 — "Show what's clickable" outlines everything at once.
   ═══════════════════════════════════════════════════════════════ */

:root { --drill-ink: color-mix(in srgb, var(--ink-3) 65%, transparent); }

/* ── Layer 1 · resting marker on the label that identifies the group ── */
table.dt tbody tr.clickable td.name,
.hb-row.click .hb-label,
.imp-row.click .imp-label,
.tree-row .tr-name b,
.survey-item .si-open button {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--drill-ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── Layer 2 · hover + focus, one treatment, with a direction cue ── */
table.dt tbody tr.clickable td.name::after,
.hb-row.click .hb-label::after,
.imp-row.click .imp-label::after,
.tree-row .tr-name b::after {
  content: '→'; margin-left: 6px; opacity: 0; color: var(--ink-3);
  font-size: .9em; transition: opacity .12s, transform .12s;
  display: inline-block; transform: translateX(-3px);
}
table.dt tbody tr.clickable:hover td.name::after,
table.dt tbody tr.clickable:focus-visible td.name::after,
.hb-row.click:hover .hb-label::after,
.hb-row.click:focus-visible .hb-label::after,
.imp-row.click:hover .imp-label::after,
.imp-row.click:focus-visible .imp-label::after,
.tree-row:hover .tr-name b::after,
.tree-row:focus-visible .tr-name b::after { opacity: .75; transform: translateX(0); }

table.dt tbody tr.clickable:hover td.name,
.hb-row.click:hover .hb-label,
.imp-row.click:hover .imp-label,
.tree-row:hover .tr-name b {
  text-decoration-style: solid;
  text-decoration-color: var(--ink-2);
}

/* keyboard focus is never hidden behind hover */
[data-drillable]:focus-visible,
table.dt tbody tr.clickable:focus-visible,
.tree-row:focus-visible,
.hb-row.click:focus-visible,
.imp-row.click:focus-visible,
table.hm td[data-rv]:focus-visible {
  outline: 2px solid var(--s1); outline-offset: -2px; border-radius: 6px;
}

/* dense grids get a ring rather than an underline — 60 dotted cells is noise */
table.hm td[data-rv]:hover { outline: 2px solid var(--ink); outline-offset: -2px; }

.tag.click {
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--drill-ink); text-underline-offset: 2px;
}
.tag.click:hover { text-decoration: none; }

/* ── Layer 3 · the "show what's clickable" reveal ── */
:root[data-affordance="on"] [data-drillable] {
  outline: 1px dashed color-mix(in srgb, var(--s1) 70%, transparent);
  outline-offset: -1px;
  background-color: color-mix(in srgb, var(--s1) 7%, transparent) !important;
}
:root[data-affordance="on"] .drillable-mark > :first-child {
  stroke: var(--s1); stroke-width: 2.5; stroke-dasharray: 3 2;
}
:root[data-affordance="on"] .affordance-hint { display: inline-flex; }

@keyframes affordance-pulse {
  0%, 100% { outline-color: color-mix(in srgb, var(--s1) 25%, transparent); }
  50%      { outline-color: var(--s1); }
}
:root[data-affordance="on"] [data-drillable] { animation: affordance-pulse 1.6s ease-in-out 2; }

.affordance-hint {
  display: none; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--s1); margin-left: 8px;
}

/* the standing legend — states the convention once, so it is learned not guessed */
.click-legend {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-3); white-space: nowrap;
}
.click-legend u {
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--drill-ink); text-underline-offset: 2px;
  color: var(--ink-2);
}

/* ─────────────────────────────────────────────── tables */

.tbl-wrap { overflow-x: auto; }
table.dt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.dt th {
  text-align: right; font-weight: 500; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); padding: 9px 10px;
  border-bottom: 1px solid var(--hair); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface-1); z-index: 2;
}
table.dt th:first-child, table.dt td:first-child { text-align: left; }
table.dt th.sortable { cursor: pointer; user-select: none; }
table.dt th.sortable:hover { color: var(--ink); }
table.dt th .arrow { opacity: .35; margin-left: 3px; font-size: 9px; }
table.dt th.sorted { color: var(--ink); font-weight: 600; }
table.dt th.sorted .arrow { opacity: 1; }
table.dt td {
  padding: 8px 10px; border-bottom: 1px solid var(--hair-2);
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.dt tbody tr:hover { background: var(--surface-2); }
table.dt tbody tr.clickable { cursor: pointer; }
table.dt td.name { font-weight: 500; }
table.dt tfoot td {
  padding: 9px 10px; border-top: 1px solid var(--hair); font-weight: 600;
  text-align: right; font-variant-numeric: tabular-nums; background: var(--surface-2);
}
table.dt tfoot td:first-child { text-align: left; }

.bar-cell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.bar-cell .track { width: 62px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; flex: none; }
.bar-cell .track i { display: block; height: 100%; border-radius: 3px; }
.bar-cell .num { min-width: 46px; }

.pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; border: 1px solid transparent;
}
.pill.good     { color: var(--good-ink);     background: color-mix(in srgb, var(--good) 14%, transparent); }
.pill.warn     { color: #8a6100;             background: color-mix(in srgb, var(--warning) 22%, transparent); }
.pill.bad      { color: var(--critical-ink); background: color-mix(in srgb, var(--critical) 14%, transparent); }
.pill.neutral  { color: var(--ink-2);        background: var(--surface-3); }
:root[data-theme="dark"] .pill.warn { color: #f0c05a; }

.delta-txt { font-variant-numeric: tabular-nums; font-weight: 600; }
.delta-txt.up { color: var(--good-ink); }
.delta-txt.down { color: var(--critical-ink); }
.delta-txt.flat { color: var(--ink-3); }

.lowN { color: var(--ink-3); font-style: italic; }

/* ─────────────────────────────────────────────── legend */

.legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--ink-2); }
.legend .item { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legend .sw.line { height: 3px; border-radius: 2px; width: 15px; }

/* ═══════════════════════════════════════════════════════════════
   PART B · the report section
   Deliberately not another dashboard: a document rhythm — wider leading,
   a bounded prose measure, numbered questions, and labelled argument
   sections — so it reads as an answer rather than an instrument.
   ═══════════════════════════════════════════════════════════════ */

.progswitch button[aria-pressed="true"].prog-case { box-shadow: inset 0 -2px 0 var(--s2), 0 1px 2px rgba(11,11,11,.08); }
:root[data-prog="case"] nav.tabs button[aria-selected="true"] { border-bottom-color: var(--s2); }

#view.report { max-width: 1180px; margin: 0 auto; }
#view.report .card { padding: 20px 24px 22px; }

.q-head {
  display: grid; grid-template-columns: 78px 1fr; gap: 20px;
  padding: 8px 0 22px; margin-bottom: 4px; border-bottom: 2px solid var(--ink);
}
.q-num {
  font-size: 46px; font-weight: 600; line-height: .95; letter-spacing: -.03em;
  color: var(--s2); font-variant-numeric: tabular-nums;
}
.q-title h2 { margin: 0 0 10px; font-size: 25px; font-weight: 600; letter-spacing: -.022em; line-height: 1.2; }
.q-ask {
  margin: 0 0 10px; padding: 0 0 0 14px; border-left: 3px solid var(--surface-3);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2); max-width: 76ch;
}
.q-src { font-size: 11.5px; color: var(--ink-3); }
.q-src b { color: var(--ink-2); font-weight: 500; }

.q-sec { margin: 22px 0; display: grid; grid-template-columns: 108px 1fr; gap: 20px; align-items: start; }
.q-sec-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); padding-top: 3px; position: sticky; top: 12px;
}
.q-finding .q-sec-label { color: var(--s2); font-weight: 600; }
.q-implication .q-sec-label { color: var(--good-ink); font-weight: 600; }
.q-sec-body > p, .q-prose > p, .q-sec-body > ol, .q-sec-body > ul {
  max-width: 82ch; font-size: 14px; line-height: 1.68; margin: 0 0 12px;
}
.q-finding .q-sec-body {
  background: var(--surface-2); border-left: 3px solid var(--s2);
  padding: 16px 20px; border-radius: 0 10px 10px 0;
}
.q-implication .q-sec-body {
  background: var(--surface-2); border-left: 3px solid var(--good);
  padding: 16px 20px; border-radius: 0 10px 10px 0;
}
.q-sec-body ol, .q-sec-body ul { padding-left: 20px; }
.q-sec-body li { margin-bottom: 9px; }
.q-sec-body h4 { margin: 20px 0 8px; font-size: 14px; font-weight: 600; }
.q-ev-label { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.q-prose { max-width: 82ch; }
.q-prose ul { padding-left: 20px; }
.q-prose li { margin-bottom: 8px; font-size: 13.5px; line-height: 1.6; }
@media (max-width: 900px) {
  .q-head, .q-sec { grid-template-columns: 1fr; gap: 10px; }
  .q-sec-label { position: static; }
}

/* the plain-language answer, above every technical term */
.q-verdict {
  margin: 22px 0 26px; padding: 20px 24px;
  background: var(--surface-1); border: 1px solid var(--hair);
  border-left: 4px solid var(--s2); border-radius: 0 12px 12px 0;
}
.q-verdict-k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--s2); font-weight: 600; margin-bottom: 9px;
}
.q-verdict p {
  margin: 0; font-size: 19px; line-height: 1.5; letter-spacing: -.012em;
  color: var(--ink); max-width: 68ch; font-weight: 400;
}
.q-verdict p b { font-weight: 600; }
.q-verdict-stats {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--hair-2);
}
.vstat { display: flex; flex-direction: column; gap: 1px; }
.vstat b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vstat span { font-size: 11px; color: var(--ink-3); }

/* the one-page answer */
.answer-head { padding: 6px 0 30px; border-bottom: 2px solid var(--ink); margin-bottom: 18px; }
.answer-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--s2); font-weight: 600; margin-bottom: 16px;
}
.answer-hero {
  margin: 0 0 18px; font-size: 38px; line-height: 1.14;
  letter-spacing: -.032em; font-weight: 600; max-width: 20ch;
}
.answer-lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 76ch; }
.answer-lede b { color: var(--ink); font-weight: 600; }
.answer-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-top: 26px;
}
.astat {
  border: 1px solid var(--hair); border-radius: 10px; padding: 14px 16px;
  background: var(--surface-1); border-top: 3px solid var(--axis);
}
.astat.bad { border-top-color: var(--critical); }
.astat.good { border-top-color: var(--good); }
.astat b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.028em; line-height: 1.1; }
.astat span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

.answer-list { display: grid; gap: 4px; }
.answer-item {
  display: grid; grid-template-columns: 54px 1fr; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--hair-2);
}
.answer-item:last-child { border-bottom: 0; }
.answer-q {
  font-size: 20px; font-weight: 600; color: var(--s2);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.answer-line { margin: 0 0 7px; font-size: 16px; line-height: 1.45; letter-spacing: -.01em; max-width: 72ch; }
.answer-line b { font-weight: 600; }
.answer-detail { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--ink-2); max-width: 82ch; }
.answer-mini { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; font-size: 11.5px; color: var(--ink-3); }
.answer-mini b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.answer-where { margin-left: auto; font-style: italic; }
.answer-where b { font-style: normal; color: var(--ink-2); font-weight: 500; }
@media (max-width: 760px) {
  .answer-hero { font-size: 28px; max-width: none; }
  .answer-item { grid-template-columns: 1fr; gap: 6px; }
  .answer-where { margin-left: 0; }
}

/* "where to find this" — a written pointer back to the interactive sections.
   Static on purpose: the report is a fixed answer, so nothing here is a link. */
.q-explore {
  display: grid; grid-template-columns: 96px 1fr; gap: 4px 14px;
  margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--hair);
}
.q-explore-k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-3); padding-top: 3px;
}
.q-explore-item {
  grid-column: 2; display: grid; grid-template-columns: minmax(150px, auto) 1fr;
  gap: 10px; align-items: baseline; padding: 3px 0;
}
.q-path {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--hair);
  border-radius: 6px; padding: 3px 9px;
}
.q-path b { font-weight: 600; color: var(--ink); }
.q-path i { font-style: normal; color: var(--ink-3); font-size: 10px; }
.q-explore-note { font-size: 12px; color: var(--ink-3); line-height: 1.55; max-width: 78ch; }
.q-explore-note b { color: var(--ink-2); font-weight: 600; }
.q-explore.none { grid-template-columns: 130px 1fr; }
.q-explore.none .q-explore-k { color: var(--critical-ink); }
@media (max-width: 900px) {
  .q-explore, .q-explore.none { grid-template-columns: 1fr; }
  .q-explore-item { grid-column: 1; grid-template-columns: 1fr; gap: 4px; }
}

/* an inline reading rule — teaches a notation where it is first used */
.read-rule {
  display: grid; grid-template-columns: 130px 1fr; gap: 14px;
  margin: 16px 0 6px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px;
}
.rr-k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-3); padding-top: 2px;
}
.rr-b { display: grid; gap: 8px; }
.rr-b span { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); max-width: 80ch; }
.rr-b b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .read-rule { grid-template-columns: 1fr; gap: 8px; } }

/* error-type cards in Q2 */
.err-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px 0; }
.err-card { border: 1px solid var(--hair); border-radius: 10px; padding: 13px 15px; background: var(--surface-1); }
.err-card .k { font-size: 11.5px; font-weight: 600; margin-bottom: 6px; }
.err-card .v { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.err-card.fp { border-left: 3px solid var(--s2); }
.err-card.fn { border-left: 3px solid var(--critical); }
.err-card.bd { border-left: 3px solid var(--s4); }
.err-card.cv { border-left: 3px solid var(--s7); }

/* hypothesis blocks in Q3 */
.hyp-list { display: grid; gap: 11px; }
.hyp { border: 1px solid var(--hair); border-radius: 10px; background: var(--surface-2); padding: 14px 16px; }
.hyp-supported { border-left: 3px solid var(--good); }
.hyp-rejected { border-left: 3px solid var(--critical); }
.hyp-partial { border-left: 3px solid var(--warning); }
.hyp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hyp-n {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--surface-1);
  background: var(--ink); border-radius: 5px; padding: 2px 7px;
}
.hyp-title { font-size: 14px; font-weight: 600; }
.hyp-body p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); max-width: 84ch; }
.hyp-body p:last-child { margin-bottom: 0; }
.hyp-body b { color: var(--ink); }

/* can / cannot conclude */
.concl { border-radius: 10px; padding: 16px 18px; border: 1px solid var(--hair); }
.concl h4 { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; }
.concl ul { margin: 0; padding-left: 18px; }
.concl li { font-size: 12.5px; line-height: 1.6; margin-bottom: 9px; color: var(--ink-2); }
.concl li b { color: var(--ink); }
.concl.can { background: color-mix(in srgb, var(--good) 6%, var(--surface-1)); border-left: 3px solid var(--good); }
.concl.cannot { background: color-mix(in srgb, var(--critical) 6%, var(--surface-1)); border-left: 3px solid var(--critical); }

/* ─────────────────────────────────────────────── explorer tree */

.tree { --cols: minmax(200px, 2.6fr) repeat(7, minmax(52px, 0.62fr)) minmax(76px, 0.8fr); }
.tree-head, .tree-row {
  display: grid; grid-template-columns: var(--cols);
  align-items: center; gap: 6px;
}
.tree-head {
  position: sticky; top: 0; z-index: 3; background: var(--surface-1);
  border-bottom: 1px solid var(--hair); padding: 0 16px;
}
.th-sort {
  border: 0; background: none; cursor: pointer; padding: 10px 2px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); text-align: right; white-space: nowrap;
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
}
.th-sort:first-child { justify-content: flex-start; text-align: left; }
.th-sort:hover { color: var(--ink); }
.th-sort.on { color: var(--ink); font-weight: 600; }
.th-sort .arrow { font-size: 9px; opacity: .5; }
.th-sort.on .arrow { opacity: 1; }

.tree-row {
  padding: 0 16px; cursor: pointer; border-bottom: 1px solid var(--hair-2);
  min-height: 38px;
}
.tree-row:hover { background: var(--surface-2); }
.tree-row.open { background: var(--surface-2); }
.tr-name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; }
.tr-name .caret { color: var(--ink-3); font-size: 10px; width: 10px; flex: none; }
.tree-row.open > .tr-name .caret { color: var(--ink); }
.tr-dim {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); flex: none;
}
.tr-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-name .lowN {
  font-size: 9.5px; background: var(--surface-3); border-radius: 999px;
  padding: 1px 6px; font-style: normal; flex: none;
}
.tr-v {
  text-align: right; font-size: 12px; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden;
}

.tree-kids { background: var(--surface-2); border-bottom: 1px solid var(--hair); }
.tree-kids .tree-row { background: transparent; }
.tree-kids .tree-row:hover { background: var(--surface-3); }
.tree-kids .tree-kids { background: color-mix(in srgb, var(--surface-3) 55%, var(--surface-2)); }

.tree-actions {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 16px 9px 0; font-size: 11.5px;
}
.tree-actions .ta-note { color: var(--ink-3); }
.tree-actions .ta-note b { color: var(--ink-2); }

.survey-list {
  display: grid; gap: 9px; padding: 4px 16px 16px 0;
  max-height: 620px; overflow: auto;
}
.survey-item {
  background: var(--surface-1); border: 1px solid var(--hair);
  border-radius: 9px; padding: 10px 12px;
}
.si-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.si-meta { font-size: 11.5px; color: var(--ink-3); }
.si-meta b { color: var(--critical-ink); }
.si-right { margin-left: auto; font-variant-numeric: tabular-nums; }
.si-novb { font-size: 12px; color: var(--ink-3); font-style: italic; }
.si-open { margin-top: 8px; }
.si-more { font-size: 11.5px; color: var(--ink-3); padding: 6px 0; display: flex; align-items: center; }

/* split-of-scale explainer */
.split-row { display: grid; grid-template-columns: 12px minmax(120px, 1.4fr) minmax(90px, 2fr) 86px; gap: 11px; align-items: center; padding: 7px 0; }
.split-row .sw { width: 12px; height: 12px; border-radius: 3px; }
.split-k { font-size: 12.5px; font-weight: 500; }
.split-k small { display: block; color: var(--ink-3); font-weight: 400; font-size: 10.5px; }
.split-tr { height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.split-tr i { display: block; height: 100%; border-radius: 5px; }
.split-v { text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.split-v small { display: block; color: var(--ink-3); font-weight: 400; font-size: 10.5px; }
.split-total {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair-2);
  font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.split-total b { color: var(--ink); font-weight: 600; }

/* regression coefficient plot */
.coef { display: flex; flex-direction: column; gap: 2px; }
.coef-head, .coef-row {
  display: grid; grid-template-columns: minmax(150px, 1.6fr) minmax(120px, 1fr) 116px minmax(180px, 2.4fr);
  align-items: center; gap: 12px;
}
.coef-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
  padding: 0 6px 7px; border-bottom: 1px solid var(--hair-2); margin-bottom: 5px;
}
.coef-row { padding: 5px 6px; border-radius: 7px; }
.coef-row:hover { background: var(--surface-2); }
.coef-row.ns .coef-label { color: var(--ink-3); }
.coef-label { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coef-fam { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.coef-fam i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.coef-sig { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.coef-sig b { color: var(--ink); font-weight: 600; letter-spacing: .04em; }
.coef-sig .ns-tag { font-style: italic; opacity: .8; }
@media (max-width: 900px) {
  .coef-head, .coef-row { grid-template-columns: minmax(110px, 1.4fr) 0 84px minmax(140px, 2fr); }
  .coef-fam { display: none; }
}

/* QA plan rows */
.qa-row {
  border: 1px solid var(--hair); border-radius: 10px; padding: 14px 16px;
  background: var(--surface-2); margin-bottom: 11px;
}
.qa-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.qa-attr { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.qa-driver { font-size: 11.5px; color: var(--ink-3); margin-bottom: 12px; }
.qa-driver b { color: var(--ink-2); font-weight: 500; }
.qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 20px; }
.qa-grid .k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); margin-bottom: 4px;
}
.qa-grid .v { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }

/* trend pickers */
.pick-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 16px; }
.pick-lead {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin-right: 4px;
}
.pick {
  border: 1px solid var(--hair); background: var(--surface-1); border-radius: 999px;
  padding: 3px 11px; font-size: 11.5px; cursor: pointer; color: var(--ink-2);
}
.pick:hover { border-color: var(--axis); color: var(--ink); }
.pick.on { background: var(--ink); color: var(--surface-1); border-color: var(--ink); }
.pick.alt { background: var(--surface-3); font-size: 11px; }
.seg button:disabled { opacity: .38; cursor: not-allowed; }
.seg button:disabled:hover { background: none; }

/* ─────────────────────────────────────────────── heatmap */

.hm-wrap { overflow: auto; }
table.hm { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
table.hm th {
  font-weight: 500; font-size: 10.5px; color: var(--ink-2); padding: 5px 8px;
  text-align: center; white-space: nowrap;
}
table.hm th.rowh { text-align: left; font-weight: 500; color: var(--ink); font-size: 12px; padding-right: 12px; }
table.hm td {
  text-align: center; padding: 9px 10px; border-radius: 6px; min-width: 74px;
  font-variant-numeric: tabular-nums; cursor: pointer; position: relative;
}
table.hm td .v { font-weight: 600; font-size: 13px; display: block; }
table.hm td .n { font-size: 10px; opacity: .72; display: block; margin-top: 1px; }
table.hm td:hover { outline: 2px solid var(--ink); outline-offset: -2px; }
table.hm td.empty { background: var(--surface-2); color: var(--ink-3); cursor: default; }
table.hm td.empty:hover { outline: none; }
table.hm td.tot { background: var(--surface-3) !important; color: var(--ink) !important; }

.ramp-legend { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-3); }
.ramp-legend .bar { display: flex; border-radius: 4px; overflow: hidden; }
.ramp-legend .bar i { width: 26px; height: 11px; }

/* ─────────────────────────────────────────────── controls */

.ctrl-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.ctrl { display: flex; flex-direction: column; gap: 4px; }
.ctrl label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.ctrl select, .ctrl input[type="text"], .ctrl input[type="number"] {
  border: 1px solid var(--hair); background: var(--surface-1); border-radius: 8px;
  padding: 7px 10px; font-size: 12.5px; min-width: 140px;
}
.ctrl select:focus, .ctrl input:focus { outline: 2px solid var(--s1); outline-offset: -1px; }

.seg { display: inline-flex; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; background: var(--surface-1); }
.seg button {
  border: 0; background: none; padding: 7px 12px; font-size: 12px; cursor: pointer;
  color: var(--ink-2); border-right: 1px solid var(--hair-2);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--surface-3); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface-1); }

.btn {
  border: 1px solid var(--hair); background: var(--surface-1); border-radius: 8px;
  padding: 7px 13px; font-size: 12.5px; cursor: pointer; color: var(--ink-2);
}
.btn:hover { background: var(--surface-3); color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--surface-1); border-color: var(--ink); }
.btn.primary:hover { opacity: .87; }

/* ─────────────────────────────────────────────── records */

.rec-row { cursor: pointer; }
.rec-detail td { padding: 0 !important; background: var(--surface-2); }
.rec-detail .inner { padding: 16px 18px 18px; border-bottom: 1px solid var(--hair); }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 18px; margin-bottom: 14px; }
.rec-grid .f .k { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.rec-grid .f .v { font-size: 12.5px; font-weight: 500; margin-top: 2px; word-break: break-word; }
.verbatim-box {
  border-left: 3px solid var(--s1); background: var(--surface-1);
  padding: 12px 14px; border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.55;
}
.verbatim-box.rtl { direction: rtl; text-align: right; border-left: 0; border-right: 3px solid var(--s1); border-radius: 8px 0 0 8px; }
.verbatim-box.neg { border-color: var(--critical); }
.verbatim-box.mix { border-color: var(--warning); }
.tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px;
  background: var(--surface-3); color: var(--ink-2); margin: 3px 4px 0 0;
  border: 1px solid var(--hair-2);
}
.tag.click { cursor: pointer; }
.tag.click:hover { background: var(--ink); color: var(--surface-1); }

/* Clamp to two lines so rows stay scannable — the full text is in the expanded detail. */
.vb-cell {
  max-width: 340px; min-width: 240px; white-space: normal !important;
  text-align: left !important; color: var(--ink-2); font-size: 12px;
}
.vb-cell span.clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4;
}
.vb-cell.rtl { direction: rtl; text-align: right !important; }

.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 16px; font-size: 12px; color: var(--ink-2); }

/* ─────────────────────────────────────────────── charts */

.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { font-family: var(--font); }
.tick { font-size: 10.5px; fill: var(--ink-3); }
.axis-label { font-size: 10.5px; fill: var(--ink-3); }
.val-label { font-size: 11px; fill: var(--ink); font-weight: 600; }
.val-label-inv { font-size: 10.5px; fill: #fff; font-weight: 600; }

/* horizontal bar list */
.hbar { display: flex; flex-direction: column; gap: 7px; }
/* fr-based so the track never collapses inside a narrow card */
.hb-row {
  display: grid; grid-template-columns: minmax(52px, 1.15fr) minmax(40px, 1.7fr) 54px 38px;
  align-items: center; gap: 9px; padding: 2px 2px; border-radius: 6px;
}
.hb-row.click { cursor: pointer; }
.hb-row.click:hover { background: var(--surface-2); }
.hbar.compact .hb-row { grid-template-columns: minmax(52px, 1fr) minmax(48px, 1.9fr) 52px; }
.hb-label {
  font-size: 12.5px; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hb-track { height: 9px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.hb-track i { display: block; height: 100%; border-radius: 5px; }
.hb-val { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.hb-n { font-size: 11px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .hb-row { grid-template-columns: minmax(52px, 1.1fr) minmax(36px, 1.5fr) 52px; }
  .hb-n { display: none; }
}

/* impact chart: volume + diverging gap on one row */
.impact { display: flex; flex-direction: column; gap: 3px; }
.imp-head, .imp-row {
  display: grid; grid-template-columns: minmax(120px, 1.5fr) minmax(90px, 1.4fr) 56px minmax(150px, 2.2fr);
  align-items: center; gap: 12px;
}
.imp-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
  padding: 0 6px 7px; border-bottom: 1px solid var(--hair-2); margin-bottom: 5px;
}
.imp-head span:nth-child(2), .imp-head span:nth-child(3) { text-align: right; }
.imp-axis { display: flex; align-items: center; gap: 5px; justify-content: center; }
.imp-axis i { flex: 1; height: 1px; background: var(--grid); }
.imp-axis b { font-weight: 500; opacity: .75; }
.imp-row { padding: 5px 6px; border-radius: 7px; }
.imp-row.click { cursor: pointer; }
.imp-row.click:hover { background: var(--surface-2); }
.imp-label { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-vol { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 9px; align-items: center; }
.imp-vol .tr { height: 9px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.imp-vol .tr i { display: block; height: 100%; border-radius: 5px; background: var(--s1); }
.imp-vol b { font-size: 11.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.imp-val { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.imp-gap { position: relative; height: 20px; }
.imp-gap .zero { position: absolute; left: 50%; top: 1px; bottom: 1px; width: 1px; background: var(--axis); }
.imp-gap .fill { position: absolute; top: 6px; height: 9px; border-radius: 3px; min-width: 2px; }
.imp-gap b {
  position: absolute; top: 3px; font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 860px) {
  .imp-head, .imp-row { grid-template-columns: minmax(96px, 1.3fr) 1fr 50px minmax(110px, 1.6fr); gap: 8px; }
}

/* 5-point scale stack */
.stack5 { display: flex; width: 100%; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; }
.stack5 i {
  display: grid; place-items: center; min-width: 2px; position: relative;
  border-radius: 3px;
}
.stack5 i:first-child { border-radius: 6px 3px 3px 6px; }
.stack5 i:last-child { border-radius: 3px 6px 6px 3px; }
.stack5 b { font-size: 10.5px; font-weight: 600; font-style: normal; }
.stack5 b.on-dark { color: #fff; }
.stack5 b.on-light { color: #0b0b0b; }
:root[data-theme="dark"] .stack5 b.on-light { color: #0b0b0b; }
.stack5-empty { font-size: 12px; color: var(--ink-3); }
.stack5-row { display: grid; grid-template-columns: 118px 1fr 92px; gap: 12px; align-items: center; }
.stack5-row + .stack5-row { margin-top: 12px; }
.stack5-row .k { font-size: 12px; font-weight: 500; }
.stack5-row .k small { display: block; color: var(--ink-3); font-weight: 400; font-size: 10.5px; }
.stack5-row .agg { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.stack5-row .agg b { font-weight: 600; }
.stack5-row .agg small { display: block; color: var(--ink-3); font-size: 10.5px; }

.tooltip {
  position: fixed; z-index: 100; pointer-events: none; opacity: 0;
  background: var(--ink); color: var(--plane); border-radius: 8px;
  padding: 9px 11px; font-size: 12px; line-height: 1.5; max-width: 290px;
  box-shadow: 0 6px 22px rgba(0,0,0,.24); transition: opacity .09s;
}
.tooltip .tt-h { font-weight: 600; margin-bottom: 4px; }
.tooltip .tt-r { display: flex; gap: 12px; justify-content: space-between; }
.tooltip .tt-r span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.tooltip .tt-note { opacity: .65; margin-top: 5px; font-size: 11px; }

/* insight callouts */
.insights { display: grid; gap: 10px; }
.insight {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px;
  background: var(--surface-2); border-radius: 9px; border: 1px solid var(--hair-2);
  font-size: 12.5px; line-height: 1.5;
}
.insight .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.insight b { font-weight: 600; }
.insight.crit { border-left: 3px solid var(--critical); }
.insight.warn { border-left: 3px solid var(--warning); }
.insight.good { border-left: 3px solid var(--good); }
.insight .go { margin-left: auto; flex: none; }

.empty-state { padding: 44px 20px; text-align: center; color: var(--ink-3); font-size: 13px; }

.note-block {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.6;
  border-top: 1px solid var(--hair-2); padding-top: 11px; margin-top: 14px;
}
.note-block b { color: var(--ink-2); }

details.method { margin-top: 12px; }
details.method summary {
  cursor: pointer; font-size: 11.5px; color: var(--ink-3); list-style: none;
  display: inline-flex; align-items: center; gap: 5px;
}
details.method summary::-webkit-details-marker { display: none; }
details.method summary::before { content: '▸'; font-size: 9px; }
details.method[open] summary::before { content: '▾'; }
details.method summary:hover { color: var(--ink); }
details.method .body { font-size: 11.5px; color: var(--ink-3); line-height: 1.65; padding: 9px 0 0 13px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── recovery calculator ─────────────────────────────────────── */
table.calc-table tbody tr.calc-on { background: color-mix(in srgb, var(--s1) 6%, transparent); }
table.calc-table tbody tr.calc-on td.name { font-weight: 600; }
table.calc-table .calc-pick { accent-color: var(--s1); width: 15px; height: 15px; cursor: pointer; }
.calc-rate { display: grid; grid-template-columns: 1fr 52px 12px; gap: 7px; align-items: center; }
.calc-rate input[type="range"] { accent-color: var(--s1); width: 100%; cursor: pointer; }
/* An unselected row's controls stay live — dragging the slider is what includes
   the group. Dimming signals "not in the scenario yet"; a not-allowed cursor
   would read as "broken" when the control works perfectly well. */
.calc-rate.off input[type="range"], .calc-rate.off .calc-num { opacity: .42; }
.calc-rate.off:hover input[type="range"], .calc-rate.off:hover .calc-num { opacity: .75; }
.calc-rate .calc-num {
  border: 1px solid var(--hair); background: var(--surface-1); border-radius: 6px;
  padding: 3px 6px; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums;
}
.calc-rate .calc-num { cursor: text; }
.calc-rate .calc-pc { font-size: 11px; color: var(--ink-3); }
table.calc-table .calc-gain { font-variant-numeric: tabular-nums; }
table.calc-table tbody tr.calc-on .calc-gain { color: var(--good-ink); }

/* ── completeness against the brief ──────────────────────────── */
.q-deliv {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--hair);
  display: grid; grid-template-columns: 108px 1fr; gap: 12px;
}
.q-deliv-k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-3); padding-top: 2px;
}
.q-deliv ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.q-deliv li { display: grid; grid-template-columns: 16px 1fr; gap: 7px; font-size: 12.5px; line-height: 1.5; }
.q-deliv li i { color: var(--ink-3); font-style: normal; }
.q-deliv .tick, .answer-parts .tick { color: var(--good); font-weight: 700; }

.answer-parts {
  margin: 10px 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
}
.answer-parts li {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 11.5px; color: var(--ink-3); line-height: 1.4;
}
@media (max-width: 900px) { .q-deliv { grid-template-columns: 1fr; gap: 8px; } }

/* ── the guide ───────────────────────────────────────────────── */
.progswitch button[aria-pressed="true"].prog-guide { box-shadow: inset 0 -2px 0 var(--ink-3), 0 1px 2px rgba(11,11,11,.08); }
:root[data-prog="guide"] nav.tabs button[aria-selected="true"] { border-bottom-color: var(--ink-3); }

.guide-search { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.guide-search input {
  flex: 1; max-width: 460px; border: 1px solid var(--hair); background: var(--surface-1);
  border-radius: 8px; padding: 8px 12px; font-size: 13px;
}
.guide-search input:focus { outline: 2px solid var(--s1); outline-offset: -1px; }

.guide-grp {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3);
  margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--hair-2);
}
.guide-grp:first-of-type { margin-top: 16px; }

.guide-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 11px; }
.gm { border: 1px solid var(--hair); border-radius: 10px; padding: 13px 15px; background: var(--surface-2); }
.gm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.gm-head b { font-size: 13.5px; font-weight: 600; }
.gm-dir { font-size: 10.5px; color: var(--ink-3); margin-left: auto; }
.gm-dir.up { color: var(--good-ink); }
.gm-dir.down { color: var(--critical-ink); }
.gm-desc { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin-bottom: 10px; }
.gm-meta { display: grid; gap: 5px; font-size: 11.5px; }
.gm-meta span { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: baseline; }
.gm-meta i { font-style: normal; color: var(--ink-3); text-transform: uppercase; font-size: 9.5px; letter-spacing: .08em; }
.gm-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  background: var(--surface-1); border: 1px solid var(--hair-2); border-radius: 5px;
  padding: 1px 6px; color: var(--ink-2); word-break: break-word;
}

.method-card { padding: 14px 0; border-bottom: 1px solid var(--hair-2); }
.method-card:last-child { border-bottom: 0; padding-bottom: 0; }
.method-card h4 { margin: 0 0 7px; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.method-card .m-plain { margin: 0 0 9px; font-size: 14px; line-height: 1.6; max-width: 80ch; }
.method-card details.method .body { max-width: 82ch; font-size: 12.5px; }
.method-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background: var(--surface-2); border: 1px solid var(--hair-2); border-radius: 5px; padding: 1px 6px;
}
kbd {
  font-family: inherit; font-size: 11px; background: var(--surface-3); border: 1px solid var(--hair);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--ink-2);
}

/* ── narrow screens ───────────────────────────────────────────────
   The dashboard is built for a desktop, but a published link gets opened on a
   phone, and a page that scrolls sideways reads as broken. Three causes, all
   handled here:

   1. Grid and flex items default to `min-width: auto`, so one wide table inside
      a track stretches the whole track — and every sibling with it. Anything
      that holds tabular content gets `min-width: 0` so the track can shrink and
      the table scrolls inside its own wrapper instead.
   2. Rows built on fixed pixel columns need those columns released.
   3. The programme switcher has five positions and cannot shrink below its
      labels, so below the breakpoint it scrolls horizontally on its own. */

@media (max-width: 620px) {
  .progswitch {
    margin-left: 0; margin-top: 10px; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }
  .progswitch button { flex: 0 0 auto; padding: 6px 11px; }

  header.masthead { flex-wrap: wrap; }
  .masthead .meta { text-align: left; }

  .chips, .click-legend { flex-wrap: wrap; }
  .click-legend { width: 100%; }

  /* the promoter/passive/detractor split rows */
  .split-row { grid-template-columns: 12px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; }
  .split-v { min-width: 0; }

  /* Part B report layout — the label column already collapses at 900px; these
     let the body track actually shrink to the viewport once it has. */
  .q-sec, .q-head { min-width: 0; }
  .q-sec-body, .q-sec-label, .q-prose, .note-block, .q-explore, .q-explore-k, .q-path { min-width: 0; }
  .q-sec-body table, .q-prose table { max-width: 100%; }
}

/* Applies at every width, not just on phones: a grid or flex child that holds a
   table must never be the reason the page scrolls sideways. */
.q-sec-body, .q-sec-label, .card, .tbl-wrap, .grid > * { min-width: 0; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The impact chart needs a real minimum width to stay readable — four columns,
   one of them a diverging bar with a zero line. Crushing it into 375px would
   make it useless, so on a phone it scrolls inside its card like a wide table. */
@media (max-width: 620px) {
  .impact, .coef {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .imp-head, .imp-row { min-width: 440px; }
  .coef-head, .coef-row { min-width: 400px; }
}

/* ── Ask ──────────────────────────────────────────────────────────
   The question surface: a tab, and a bubble that follows the user across every
   tab. Both state plainly that the model call is not wired up — the "Not
   connected" badge is deliberately prominent rather than tucked away, because a
   feature that looks live and isn't is worse than one that says so. */

.ask-box { margin-top: 14px; }
.ask-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-1); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 14px 16px; cursor: pointer;
  box-shadow: var(--shadow); transition: border-color .12s, background .12s;
}
.ask-field:hover, .ask-field:focus-visible { border-color: var(--s1); background: var(--surface-2); }
.ask-field:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
.ask-icon { color: var(--s1); font-size: 15px; flex: none; }
.ask-ph { color: var(--ink-3); font-size: 13.5px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-badge {
  flex: none; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-2); background: var(--surface-3);
  border-radius: 20px; padding: 3px 9px;
}

.ask-why {
  margin-top: 12px; background: var(--surface-2); border: 1px solid var(--hair-2);
  border-left: 3px solid var(--s1); border-radius: var(--radius); padding: 15px 18px;
}
.ask-why h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ask-why p, .ask-why li { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 9px; }
.ask-why ol { margin: 0 0 9px; padding-left: 20px; }
.ask-why li { margin-bottom: 7px; }
.ask-why b { color: var(--ink); }
.ask-why code {
  font-size: 11.5px; background: var(--surface-3); border-radius: 4px; padding: 1px 5px;
}
.ask-why.compact { margin: 0; border-radius: 0; border-left: 0; border: 0;
  background: transparent; padding: 12px 16px; }
.ask-why.compact h4 { font-size: 12px; }
.ask-why.compact p, .ask-why.compact li { font-size: 12px; line-height: 1.6; }

.ask-ctx { display: flex; flex-direction: column; gap: 1px; }
.ask-ctx-row {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px;
  align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hair-2);
}
.ask-ctx-row:last-child { border-bottom: 0; }
.ask-ctx-row .k {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
}
.ask-ctx-row .v { font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.ask-ctx-row .v i { color: var(--ink-3); }
.ask-chip {
  display: inline-block; margin: 2px 5px 2px 0; padding: 2px 9px;
  background: var(--surface-3); border-radius: 20px; font-size: 11.5px; color: var(--ink-2);
}
.ask-chip.num { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.ask-grp { margin-bottom: 16px; }
.ask-grp:last-of-type { margin-bottom: 4px; }
.ask-grp-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.ask-grp-h b { font-size: 12.5px; color: var(--ink); }
.ask-grp-h span { font-size: 11.5px; color: var(--ink-3); }
.ask-qs { display: flex; flex-direction: column; gap: 1px; }
.ask-q {
  display: flex; align-items: baseline; gap: 9px; padding: 7px 11px;
  background: var(--surface-2); border-radius: 7px; font-size: 12.5px; color: var(--ink-2);
}
.ask-q-mark { color: var(--s1); font-weight: 700; flex: none; }

/* the bubble */
.ask-bubble {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--hair); background: var(--surface-1); color: var(--ink);
  border-radius: 24px; padding: 10px 17px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 6px rgba(11,11,11,.08), 0 12px 32px -14px rgba(11,11,11,.28);
  transition: transform .12s, border-color .12s;
}
.ask-bubble:hover { transform: translateY(-1px); border-color: var(--s1); }
.ask-bubble:focus-visible { outline: 2px solid var(--s1); outline-offset: 3px; }
.ask-bubble.on { border-color: var(--s1); }
.ask-bubble-icon { color: var(--s1); font-size: 14px; }

.ask-pop {
  position: fixed; right: 22px; bottom: 74px; z-index: 61;
  width: min(380px, calc(100vw - 44px)); max-height: min(560px, calc(100vh - 120px));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface-1); border: 1px solid var(--hair);
  border-radius: 13px; box-shadow: var(--shadow);
}
.ask-pop-h {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px 11px; border-bottom: 1px solid var(--hair-2);
  position: sticky; top: 0; background: var(--surface-1); border-radius: 13px 13px 0 0;
}
.ask-pop-h b { font-size: 13px; flex: 1; }
.ask-pop-x {
  border: 0; background: none; cursor: pointer; color: var(--ink-3);
  font-size: 19px; line-height: 1; padding: 0 2px; flex: none;
}
.ask-pop-x:hover { color: var(--ink); }
.ask-pop-scope {
  padding: 10px 16px; font-size: 11.5px; color: var(--ink-2);
  background: var(--surface-2); border-bottom: 1px solid var(--hair-2);
}
.ask-pop-scope b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ask-pop-go { margin: 0 16px 16px; }
.ask-pop .note-block { margin: 0 16px 16px; }

@media (max-width: 620px) {
  .ask-bubble { right: 14px; bottom: 14px; padding: 9px 14px; }
  .ask-pop { right: 14px; left: 14px; bottom: 64px; width: auto; }
  .ask-ctx-row { grid-template-columns: 1fr; gap: 3px; }
}

@media print { .ask-bubble, .ask-pop { display: none !important; } }

/* Recovery calculator — the target cell.
   Slider plus two linked number boxes: the NPS you want the group to reach and
   the share of its detractors that implies. Both write one stored value, so
   they cannot drift apart. Never disabled — typing or dragging is what includes
   the group, and a not-allowed cursor would read as "broken". */
.calc-set { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.calc-set input[type="range"] { accent-color: var(--s1); flex: 1 1 90px; min-width: 70px; cursor: pointer; }
.calc-set.off input[type="range"], .calc-set.off .calc-lab { opacity: .45; }
.calc-set.off:hover input[type="range"], .calc-set.off:hover .calc-lab { opacity: .8; }
.calc-lab {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 10.5px; color: var(--ink-3); cursor: pointer;
}
.calc-lab span { white-space: nowrap; }
.calc-lab i { font-style: normal; color: var(--ink-3); }
.calc-lab input {
  width: 54px; border: 1px solid var(--hair); background: var(--surface-1);
  border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 12px;
  color: var(--ink); text-align: right; font-variant-numeric: tabular-nums;
}
.calc-lab input:focus { outline: 2px solid var(--s1); outline-offset: 1px; border-color: var(--s1); }
.calc-over { font-size: 10.5px; color: var(--critical-ink); margin-top: 3px; min-height: 0; }
.calc-say {
  margin: 2px 0 14px; padding: 11px 14px; font-size: 13.5px; line-height: 1.6;
  color: var(--ink-2); background: var(--surface-2);
  border-left: 3px solid var(--s1); border-radius: 8px;
}
.calc-say b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .calc-set input[type="range"] { flex-basis: 100%; order: 3; } }

/* The row-dimension picker, repeated in the table header where the question
   actually occurs to the reader. */
.calc-dim-sel {
  border: 1px solid var(--hair); background: var(--surface-1); color: var(--ink);
  border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; margin-left: 2px;
}
.calc-dim-sel:hover { border-color: var(--s1); }
.calc-dim-sel:focus-visible { outline: 2px solid var(--s1); outline-offset: 1px; }