/*
 * styles.css — design tokens lifted verbatim from the Claude artifact
 * mockups in ../design/*.dc.html, so the real app matches the approved
 * design rather than re-deriving it. Plain CSS, no build step: the whole
 * frontend is three static files the backend serves directly.
 */

:root {
  --white:#ffffff; --off:#F3FAF8; --black:#16241F; --dark:#24352F;
  --mid:#55685F; --muted:#87988E; --light:#D7E7E1; --lighter:#E9F5F1;
  --border:#DCEAE4; --primary:#0E9E8C; --primary-dark:#0A7A6C;
  --primary-tint:#E1F5F1; --secondary:#FF7A59; --secondary-tint:#FFE7DF;
  --tertiary:#6C63FF; --tertiary-tint:#ECEBFF;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --danger:#dc2626; --danger-tint:#fee2e2;
  --success:#16a34a; --success-tint:#dcfce7;
  --warn:#f59e0b; --warn-tint:#fef3c7;
}

* { box-sizing: border-box; }

body {
  margin:0; background:var(--white); color:var(--black);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:var(--sans); }
input, select { font-family:var(--sans); }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.hidden { display:none !important; }

/* ── Logo ─────────────────────────────────────────────── */
.logo { display:flex; align-items:center; gap:8px; }
.logo-dot { width:7px; height:7px; border-radius:50%; background:var(--primary); animation:blink 2.5s ease-in-out infinite; }
.logo-text { font-family:var(--serif); font-size:19px; letter-spacing:-0.02em; }
.logo-text b { font-weight:700; }
.logo-text span { font-weight:400; color:var(--muted); }

/* ── Login ────────────────────────────────────────────── */
#login-screen { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; }
.login-card { width:100%; max-width:380px; border:1px solid var(--border); border-radius:20px; padding:2.5rem 2rem; }
.login-card h1 { font-family:var(--serif); font-size:26px; font-weight:400; margin:0 0 0.4rem; text-align:center; }
.login-sub { font-size:13px; color:var(--muted); text-align:center; margin:0 0 2rem; }
label.field { display:block; font-size:12px; font-weight:500; color:var(--dark); margin-bottom:6px; }
.login-card input { width:100%; padding:11px 14px; border:1px solid var(--light); border-radius:100px; font-size:14px; margin-bottom:1.2rem; outline:none; }
.login-card input:focus { border-color:var(--primary); }
.version-tag { margin-top:1.2rem; font-size:11px; color:var(--muted); letter-spacing:0.02em; text-align:center; min-height:1em; }

.auth-tabs { display:flex; gap:4px; margin-bottom:1.8rem; background:var(--light); border-radius:100px; padding:4px; }
.auth-tab { flex:1; border:none; background:transparent; padding:8px; border-radius:100px; font-size:13px; font-weight:500; color:var(--mid); cursor:pointer; }
.auth-tab.active { background:var(--white); color:var(--dark); }
.auth-divider { display:flex; align-items:center; gap:10px; margin:1.4rem 0 1rem; font-size:12px; color:var(--muted); }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
#google-signin-button { display:flex; justify-content:center; }

/* ── Buttons ──────────────────────────────────────────── */
.btn-primary { padding:12px 28px; background:var(--primary); color:var(--white); border:none; border-radius:100px; font-size:14px; font-weight:500; transition:background .15s; }
.btn-primary:hover:not(:disabled) { background:var(--primary-dark); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-block { width:100%; }
.btn-ghost { font-size:12.5px; color:var(--muted); background:none; border:none; padding:6px 4px; text-decoration:underline; }
.btn-sm { font-size:12px; padding:6px 14px; border-radius:100px; border:1px solid var(--border); background:var(--white); color:var(--dark); }
.btn-sm:hover { border-color:var(--primary); color:var(--primary); }

/* ── App shell ────────────────────────────────────────── */
#app-screen { min-height:100vh; display:flex; flex-direction:column; }
.topbar { border-bottom:1px solid var(--border); background:var(--off); display:flex; align-items:center; justify-content:space-between; padding:0 2rem; height:60px; flex-shrink:0; }
.topbar-left { display:flex; align-items:center; gap:2.2rem; }
.nav { display:flex; align-items:center; gap:4px; }
.nav button { display:flex; align-items:center; gap:7px; padding:7px 14px; border-radius:100px; font-size:13px; border:none; background:transparent; color:var(--mid); font-weight:400; }
.nav button.active { background:var(--white); color:var(--black); font-weight:500; box-shadow:0 1px 2px rgba(14,158,140,.08); }
.topbar-right { display:flex; align-items:center; gap:16px; }
.avatar { width:24px; height:24px; border-radius:50%; background:var(--lighter); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:var(--mid); }
.user-email { font-size:12px; }
.content { padding:2.5rem 3rem; flex:1; overflow-x:auto; }
/* Reclaim horizontal room on narrower windows before any grid gives up a column. */
@media(max-width:1200px){ .content { padding:2rem 1.5rem; } .topbar { padding:0 1.5rem; } }

.eyebrow { font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 .4rem; }
h1.page { font-family:var(--serif); font-size:30px; font-weight:400; margin:0 0 .6rem; }
h2.sub { font-family:var(--serif); font-size:20px; font-weight:400; margin:0 0 1.4rem; }
.lede { font-size:14px; color:var(--mid); margin:0 0 2rem; max-width:620px; }
.section-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--dark); margin:0 0 .8rem; }

/* ── Tabs & filters ───────────────────────────────────── */
.tabs { display:flex; gap:6px; margin-bottom:1.6rem; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.tabs button { padding:10px 4px; font-size:13px; background:transparent; border:none; border-bottom:2px solid transparent; color:var(--muted); margin-right:1.4rem; }
.tabs button.active { border-bottom-color:var(--black); color:var(--black); font-weight:500; }

.filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:1.2rem; }
.filters select, .filters input {
  font-size:12.5px; color:var(--dark); padding:7px 10px;
  border:1px solid var(--border); border-radius:100px; background:var(--white); outline:none;
}
.filters select:focus, .filters input:focus { border-color:var(--primary); }
.filter-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

/* ── Filter panel ─────────────────────────────────────────
   One shared component across Data / Studio / Dashboard, so the same
   dimension is filtered the same way everywhere. Deliberately reads as a
   control surface rather than content: tinted ground + a labelled header
   row, echoing the topbar's pill language without competing with the
   Data/Studio/Dashboard nav itself. */
.filter-panel {
  border:1px solid var(--border); border-radius:16px; background:var(--off);
  padding:.85rem 1.1rem 1rem; margin-bottom:1.6rem;
}
.filter-panel-head {
  display:flex; align-items:center; gap:10px; margin-bottom:.75rem;
}
.filter-panel-title {
  display:flex; align-items:center; gap:7px;
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--mid);
}
.filter-icon { width:13px; height:13px; flex-shrink:0; opacity:.65; }
.filter-count {
  font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:20px;
  background:var(--primary); color:var(--white);
}
.filter-panel-head .btn-ghost { margin-left:auto; }
.filter-fields { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter-field { display:flex; flex-direction:column; gap:4px; }
.filter-field > span {
  font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); padding-left:11px;
}
.filter-field select, .filter-field input {
  font-size:12.5px; color:var(--dark); padding:7px 12px; min-width:132px;
  border:1px solid var(--border); border-radius:100px; background:var(--white); outline:none;
}
.filter-field select:focus, .filter-field input:focus { border-color:var(--primary); }
/* An applied filter is visibly "on", so it's obvious why a view is narrowed. */
.filter-field select.on, .filter-field input.on {
  border-color:var(--primary); background:var(--primary-tint);
  color:var(--primary-dark); font-weight:500;
}

/* ── Tables ───────────────────────────────────────────── */
.table-wrap { border:1px solid var(--border); border-radius:20px; overflow:hidden; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead tr { background:var(--off); }
th { text-align:left; padding:10px 14px; font-weight:500; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
tbody tr:last-child td { border-bottom:none; }
td.num { font-family:var(--serif); font-size:15px; }
.muted { color:var(--muted); }
.mid { color:var(--mid); }
.nowrap { white-space:nowrap; }
.count-line { font-size:12px; color:var(--muted); margin:0 0 .8rem; }

.badge { font-size:11px; padding:2px 8px; border-radius:20px; display:inline-block; white-space:nowrap; }
.badge-active { background:var(--success-tint); color:var(--success); }
.badge-idle { background:var(--lighter); color:var(--muted); }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }

/* ── Cards / KPI ──────────────────────────────────────── */
.cards { display:flex; gap:1.5rem; flex-wrap:wrap; }
.card { border:1px solid var(--border); border-radius:20px; padding:2rem; }
.card-center { display:flex; flex-direction:column; align-items:center; gap:1rem; min-width:220px; flex:1; }
.card-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0; }
.card-note { font-size:12px; color:var(--muted); margin:0; text-align:center; }
.big-num { font-family:var(--serif); font-size:40px; color:var(--black); }

.stat-row { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.stat { border:1px solid var(--border); border-radius:16px; padding:1rem 1.4rem; min-width:130px; }
.stat-value { font-family:var(--serif); font-size:24px; }
.stat-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

.donut { width:120px; height:120px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.donut-inner { width:86px; height:86px; border-radius:50%; background:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:22px; }

.bar-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.bar-name { font-size:13px; width:200px; flex-shrink:0; color:var(--dark); word-break:break-word; }
.bar-track { flex:1; height:10px; background:var(--border); border-radius:4px; }
.bar-fill { height:100%; border-radius:4px; background:var(--primary); }
.bar-value { font-size:12px; width:52px; text-align:right; color:var(--mid); }

.heat-cell { padding:7px 4px; border-radius:5px; text-align:center; font-size:11px; }

/* ── Studio ───────────────────────────────────────────────
   Prompt table on the left, run configuration in a card beside it (not
   below): the config is what you tune while reading the table, and the
   Run button lives in that same card so the whole decision — what, where,
   which stages, go — is one place. Sticky so it stays put while a long
   prompt list scrolls. */
.studio-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.85fr); gap:1.8rem; align-items:start; }
@media(max-width:900px){ .studio-grid { grid-template-columns:1fr; } .run-panel { position:static !important; } }
.run-panel {
  position:sticky; top:1.5rem;
  border:1px solid var(--border); border-radius:18px; background:var(--white);
  padding:1.3rem 1.4rem; box-shadow:0 1px 3px rgba(14,158,140,.05);
}
.run-panel .section-label { margin-top:1.3rem; }
.run-panel .section-label:first-child { margin-top:0; }

/* Three peer choices side by side — numbered so the order reads as a
   sequence, each with a live tally so nothing needs to be counted by eye.
   auto-fit rather than a hard `repeat(3, ...)` + breakpoint: the columns
   stay side by side whenever 250px each will fit and degrade to 2-up then
   1-up on their own, so a narrow window or an embedded browser panel can't
   silently collapse them to a vertical list. */
.config-blocks {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:1.1rem; margin-bottom:2rem; align-items:start;
}
.config-block {
  border:1px solid var(--border); border-radius:16px; background:var(--white);
  padding:1.1rem 1.2rem 1.2rem;
}
.config-block-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:.9rem; }
.config-step {
  width:20px; height:20px; border-radius:50%; flex-shrink:0; margin-top:1px;
  background:var(--primary-tint); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600;
}
.config-title { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--dark); margin:0; }
.config-hint { font-size:11.5px; color:var(--muted); margin:2px 0 0; }
.config-tally {
  margin-left:auto; flex-shrink:0; font-size:10.5px; font-weight:600;
  padding:2px 8px; border-radius:20px; background:var(--lighter); color:var(--mid);
}
.config-tally.on { background:var(--primary); color:var(--white); }

/* A filter panel nested in a config block is already inside a card — drop
   the second border/ground so it doesn't read as a box inside a box. */
.config-block .filter-panel {
  border:none; background:transparent; padding:0; margin-bottom:.9rem;
}
.config-block .filter-panel-head { margin-bottom:.55rem; }
.config-block .filter-field select { min-width:0; width:100%; }
.config-block .filter-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:8px; }

/* Checkbox lists inside a config block: single column, comfortable hit area. */
.config-block .check-row { padding:5px 0; }
.config-block .check-row .badge { margin-left:auto; }
.run-panel-footer { margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--border); }
.pick-list { border:1px solid var(--border); border-radius:12px; max-height:520px; overflow-y:auto; }
.pick-list table td { padding:9px 10px; border-bottom:1px solid var(--border); }
.check-row { display:flex; align-items:center; gap:10px; font-size:13px; padding:6px 0; }
input[type=checkbox] { accent-color:var(--primary); }
.chip { font-size:11px; padding:4px 10px; border:1px solid var(--border); border-radius:20px; color:var(--mid); background:var(--off); cursor:pointer; }
.chip.on { background:var(--primary-tint); border-color:var(--primary); color:var(--primary-dark); font-weight:500; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }

.notice { display:flex; align-items:center; gap:8px; border-radius:12px; padding:10px 14px; font-size:12.5px; margin-bottom:1.2rem; }
.notice-warn { background:var(--warn-tint); color:#92400e; }
.notice-err { background:var(--danger-tint); color:var(--danger); }
.notice-info { background:var(--off); border:1px solid var(--border); color:var(--mid); }

/* ── Progress ─────────────────────────────────────────── */
.stage { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.stage:last-child { border-bottom:none; }
.stage-icon { width:18px; height:18px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; margin-top:2px; }
.stage-pending   { background:var(--lighter); color:var(--muted); }
.stage-running   { background:var(--primary-tint); color:var(--primary-dark); }
.stage-completed { background:var(--success-tint); color:var(--success); }
.stage-failed    { background:var(--danger-tint); color:var(--danger); }
.stage-body { flex:1; min-width:0; }
.stage-label { font-size:13px; color:var(--dark); }
.stage-detail { font-size:11.5px; color:var(--muted); margin-top:2px; word-break:break-word; }
.spinner { width:12px; height:12px; border:2px solid var(--primary-tint); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }

.log { background:var(--black); color:#d7e7e1; border-radius:12px; padding:1rem 1.2rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.7; max-height:320px; overflow:auto; white-space:pre-wrap; word-break:break-word; }

.empty { padding:2.5rem; text-align:center; color:var(--muted); font-size:13px; }

/* ── Basis line ───────────────────────────────────────────
   The denominator behind a chart's percentages. Sits directly under the
   chart title because a caveat placed anywhere else is a caveat nobody
   applies — and because a narrow filter makes a 3-answer figure look
   exactly like a 60-answer one. */
.basis {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; color:var(--muted); letter-spacing:.01em;
  margin:-.9rem 0 1.2rem; display:flex; flex-wrap:wrap; gap:.15rem .9rem;
}
.basis b { color:var(--mid); font-weight:600; }
/* Below this the sample is small enough that the figure is directional. */
.basis.thin { color:#92400e; }
.basis.thin b { color:#92400e; }

/* ── Drill-down drawer ────────────────────────────────────
   Row-level access to the answers behind any figure. Without it every
   percentage is unverifiable — you can read 35.9% but not ask which
   answers produced it. */
#drill-backdrop {
  position:fixed; inset:0; background:rgba(22,36,31,.32);
  z-index:80; animation:fadeIn .12s ease-out;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
#drill-drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(760px,94vw);
  background:var(--white); border-left:1px solid var(--border);
  box-shadow:-8px 0 28px rgba(22,36,31,.12);
  z-index:81; display:flex; flex-direction:column;
  animation:slideIn .16s ease-out;
}
@keyframes slideIn { from{transform:translateX(24px);opacity:.6} to{transform:none;opacity:1} }
.drill-head {
  display:flex; align-items:flex-start; gap:1rem; justify-content:space-between;
  padding:1.4rem 1.6rem 1rem; border-bottom:1px solid var(--border); flex-shrink:0;
}
.drill-title { font-family:var(--serif); font-size:22px; font-weight:400; margin:.1rem 0 .3rem; }
.drill-head .count-line { margin:0; }
.drill-body { overflow-y:auto; padding:1.2rem 1.6rem 2rem; flex:1; }
.drill-row { padding:.85rem 0; border-bottom:1px solid var(--border); }
.drill-row:last-child { border-bottom:none; }
.drill-meta { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin-bottom:.35rem; font-size:11.5px; color:var(--muted); }
.drill-prompt { font-size:13px; color:var(--black); margin:0 0 .4rem; }
.drill-detail { display:flex; flex-wrap:wrap; gap:.3rem .75rem; font-size:11.5px; }
.drill-detail span { color:var(--muted); }
.drill-detail b { color:var(--dark); font-weight:600; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* Anything that drills must look like it does — and nothing that doesn't
   may borrow the affordance. */
.drillable { cursor:pointer; }
.drillable:hover { opacity:.78; }
tr.drillable:hover td { background:var(--off); }
@media (prefers-reduced-motion: reduce) {
  #drill-backdrop, #drill-drawer { animation:none; }
}
.split { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
@media(max-width:1000px){ .split { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD MODULE SYSTEM
   A 12-column grid of self-describing modules (see dashboard.js). Density
   is deliberate: this is a professional analysis tool, and generous card
   padding pushes content below the fold — a reader who must scroll to
   compare two figures cannot compare them.
   ══════════════════════════════════════════════════════════════════════ */

.mgrid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; align-items:start; }
.mod {
  min-width:0;                    /* essential — without it long content blows out the column */
  border:1px solid var(--border); border-radius:14px; background:var(--white);
  padding:1rem 1.15rem 1.15rem; display:flex; flex-direction:column;
}
.mod-bare { border:none; background:none; padding:0; }
.mod-head { margin-bottom:.9rem; }
.mod-title { font-size:13.5px; font-weight:650; color:var(--black); margin:0; letter-spacing:-.005em; }
/* The subtitle is functional, not decorative — it carries the reading
   instruction ("read down a column") and the denominator. */
.mod-sub { font-size:11.5px; color:var(--muted); margin:.25rem 0 0; line-height:1.5; }
.mod-head .basis { margin:.5rem 0 0; }
.module-note { font-size:11px; color:var(--muted); margin:.6rem 0 0; }
@media(max-width:1100px){ .mgrid > .mod { grid-column:span 12 !important; grid-row:span 1 !important; } }

/* KPI row */
.kpi-row { display:grid; grid-template-columns:repeat(var(--kpi-cols,4),1fr); gap:12px; }
.kpi { border:1px solid var(--border); border-radius:14px; background:var(--white); padding:.95rem 1.1rem; min-width:0; }
.kpi-label { font-size:10px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.kpi-value {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums;
  font-size:26px; color:var(--black); margin:.35rem 0 .2rem; line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kpi-sub { font-size:11px; color:var(--muted); }
/* Alert is scarce by design: if it appears on every card it stops meaning
   "look here". Reserved for coverage, gaps and unmapped data. */
.kpi-alert .kpi-value { color:var(--danger); }
.kpi-alert { border-color:#f3c9c4; background:var(--danger-tint); }

/* Bars (label above) */
.bars { display:flex; flex-direction:column; gap:.7rem; }
.bar-item { border-radius:6px; padding:2px 4px; margin:-2px -4px; }
.bar-head { display:flex; justify-content:space-between; gap:1rem; font-size:12px; color:var(--dark); margin-bottom:4px; }
.bar-head span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-num, .rank-num, .sm-num, .grp-val, .legend-val, .legend-n, .div-num, .chipval {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; flex:none;
}
.bar-track { height:9px; background:var(--lighter); border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; border-radius:4px; }
.bar-sub { font-size:10.5px; color:var(--muted); margin-top:3px; }

/* Ranked rows (label inline) */
.ranks { display:flex; flex-direction:column; }
.rank-item { display:flex; align-items:center; gap:9px; padding:.42rem 4px; border-bottom:1px solid var(--border); }
.rank-item:last-child { border-bottom:none; }
.rank-i { font-size:10px; color:var(--faint,var(--muted)); width:14px; flex:none; text-align:right; }
.rank-label { font-size:12px; color:var(--dark); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-track { width:82px; height:7px; background:var(--lighter); border-radius:4px; flex:none; overflow:hidden; }
.rank-fill { display:block; height:100%; border-radius:4px; }
.rank-num { font-size:11.5px; color:var(--dark); width:48px; text-align:right; }
.rank-sub { font-size:10.5px; color:var(--muted); width:42px; text-align:right; }
.rank-emph { background:var(--primary-tint); border-radius:5px; }

/* Heatmap */
.heat { display:grid; gap:3px; }
.heat-corner { }
.heat-col { font-size:10.5px; color:var(--muted); text-align:center; padding-bottom:2px; }
.heat-row { font-size:11.5px; color:var(--dark); display:flex; align-items:center; padding-right:8px;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.heat .heat-cell {
  height:36px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; padding:0;
}
/* "No data" must not look like 0%. */
.heat-null { background:var(--off); border:1px dashed var(--rule,var(--border)); color:var(--muted); }
.heat-legend { display:flex; align-items:center; gap:8px; margin-top:.7rem; font-size:10px; color:var(--muted); }
.heat-ramp { flex:1; height:7px; border-radius:4px;
             background:linear-gradient(90deg,var(--lighter),var(--primary-dark)); }

/* Donut */
.donut-wrap { display:flex; align-items:center; gap:1.2rem; position:relative; flex-wrap:wrap; }
.donut-centre { position:absolute; left:80px; top:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; }
.donut-value { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:20px; color:var(--black); }
.donut-label { font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.donut-legend { flex:1; min-width:150px; display:flex; flex-direction:column; gap:.3rem; }
.legend-row { display:flex; align-items:center; gap:7px; font-size:11.5px; }
.legend-dot { width:9px; height:9px; border-radius:2px; flex:none; }
.legend-name { flex:1; color:var(--dark); }
.legend-val { color:var(--dark); }
.legend-n { color:var(--muted); width:34px; text-align:right; }

/* Diverging */
.diverge { display:flex; flex-direction:column; gap:.4rem; }
.div-row { display:flex; align-items:center; gap:6px; padding:2px 0; }
.div-label { font-size:11.5px; color:var(--dark); width:118px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.div-left { flex:1; display:flex; justify-content:flex-end; height:15px; }
.div-right { flex:1; display:flex; height:15px; }
.div-seg { height:100%; display:block; }
.div-axis { width:1px; background:var(--mid); height:19px; flex:none; }
.div-num { font-size:11px; color:var(--mid); width:44px; text-align:right; }
.diverge-legend, .grouped-legend { display:flex; gap:1rem; margin-top:.7rem; font-size:11px; color:var(--muted); }
.diverge-legend span, .grouped-legend span { display:inline-flex; align-items:center; gap:5px; }

/* Split bar */
.split-bar { display:flex; height:50px; border-radius:8px; overflow:hidden; }
.split-l { background:var(--primary); }
.split-r { background:var(--danger); }
.split-labels { display:flex; justify-content:space-between; margin-top:.7rem; }
.split-v { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:19px; color:var(--primary-dark); }
.split-k { font-size:11.5px; color:var(--dark); }
.split-n { font-size:10.5px; color:var(--muted); }

/* Grouped columns */
.grouped { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; }
.grp { flex:1 1 130px; min-width:0; }
.grp-bars { display:flex; gap:5px; align-items:flex-end; height:130px; }
.grp-bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; }
.grp-val { font-size:9.5px; color:var(--muted); margin-bottom:3px; }
.grp-fill { width:100%; border-radius:3px 3px 0 0; min-height:2px; }
.grp-name { font-size:11.5px; color:var(--dark); margin-top:.5rem; padding-top:.45rem;
            border-top:1px solid var(--border); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grp-sub { font-size:10px; color:var(--muted); }

/* Small multiples */
.smallmult { display:grid; grid-template-columns:repeat(var(--sm-cols,3),1fr); gap:12px; }
@media(max-width:1000px){ .smallmult { grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px){ .smallmult { grid-template-columns:1fr; } }
.sm-card { border:1px solid var(--border); border-radius:11px; padding:.8rem .9rem; min-width:0; }
.sm-head { display:flex; justify-content:space-between; gap:.5rem; align-items:flex-start; margin-bottom:.6rem; }
.sm-title { font-size:12px; font-weight:650; color:var(--black); }
.sm-sub { font-size:10px; color:var(--muted); }
.sm-badge { font-size:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
            padding:2px 7px; border-radius:20px; background:var(--primary-tint); color:var(--primary-dark); flex:none; }
.sm-row { display:grid; grid-template-columns:13px 1fr auto; gap:5px 7px; align-items:center; padding:.28rem 0; }
.sm-i { font-size:9.5px; color:var(--muted); }
.sm-label { font-size:11.5px; color:var(--dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sm-emph { font-weight:650; color:var(--primary-dark); }
.sm-num { font-size:11px; color:var(--mid); }
.sm-track { grid-column:2/4; height:5px; background:var(--lighter); border-radius:3px; overflow:hidden; }
.sm-fill { display:block; height:100%; border-radius:3px; }
.sm-empty { font-size:11px; color:var(--muted); padding:.5rem 0; }

/* Chips */
.chipcols { display:grid; grid-template-columns:repeat(var(--chip-cols,2),1fr); gap:1.2rem; }
.chipgroup-title { font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.45rem; }
.chiprow { display:flex; justify-content:space-between; gap:.6rem; font-size:11.5px; color:var(--dark);
           padding:.32rem 0; border-bottom:1px solid var(--border); }
.chiprow:last-child { border-bottom:none; }
.chipval { color:var(--mid); }

/* Data table */
.tablewrap { overflow-x:auto; }
table.dt { width:100%; border-collapse:collapse; font-size:12px; }
table.dt th {
  text-align:left; font-size:9.5px; font-weight:650; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); padding:.45rem .55rem; border-bottom:1px solid var(--border); white-space:nowrap; background:none;
}
table.dt td { padding:.45rem .55rem; border-bottom:1px solid var(--border); color:var(--dark); white-space:nowrap; vertical-align:top; }
table.dt td.wrap { white-space:normal; max-width:420px; }
table.dt tbody tr:last-child td { border-bottom:none; }
table.dt tr.row-emph td { background:var(--primary-tint); }
table.dt .yes { color:var(--primary-dark); font-weight:600; }

/* Definition cards */
.defs { display:grid; grid-template-columns:repeat(var(--def-cols,2),1fr); gap:12px; }
@media(max-width:900px){ .defs { grid-template-columns:1fr; } }
.def { border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:10px; padding:.9rem 1rem; }
.def-term { font-size:12.5px; font-weight:650; color:var(--black); }
/* The question is what makes a glossary usable — a reader scans for the
   question they arrived with, not for a term they may not know. */
.def-q { font-size:12px; color:var(--primary-dark); margin:.25rem 0 .45rem; font-style:italic; }
.def-text { font-size:12px; color:var(--mid); margin:0 0 .45rem; line-height:1.55; }
.def-formula { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--dark);
               background:var(--off); border-radius:5px; padding:.4rem .55rem; margin:0 0 .45rem; }
.def-watch { font-size:11px; color:#92400e; margin:0; }

/* Page chrome */
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; margin-bottom:1.3rem; }
.page-num { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--primary); }
.page-title { font-family:var(--serif); font-size:26px; font-weight:400; margin:.15rem 0 .2rem; }
.page-q { font-size:12.5px; color:var(--muted); margin:0; }
.page-scope { text-align:right; flex:none; }
.page-scope-n { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:20px; color:var(--black); }
.page-scope-l { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.page-blocked { border:1px dashed var(--rule,var(--border)); border-radius:14px; padding:2.5rem 2rem;
                text-align:center; background:var(--off); }
.page-blocked h3 { font-size:14px; margin:0 0 .5rem; color:var(--dark); }
.page-blocked p { font-size:12.5px; color:var(--muted); margin:0 auto; max-width:52ch; line-height:1.6; }