/* ============================================================
   REFINED DARK — Option A design pass (Miro, 2026-08-28)
   ------------------------------------------------------------
   DESIGN ONLY. Loaded last, overrides visual tokens + chrome.
   No layout, wording, structure or logic is touched — the JSX
   is byte-identical. Scoped to data-theme="dark"; light theme
   is untouched.
   ============================================================ */

/* ── 1. Palette ────────────────────────────────────────────
   REMOVED. This block used to retint the whole dark ramp with its
   own third purple and its own signal colours, and because
   it loads late it was the ramp people actually saw — not the one in
   styles.css. Colour is now declared once, in styles-inroots.css.
   What remains below is this pass's CHROME: card surfaces, table
   rules, the gold detail. All of it reaches colour through tokens. */

/* ── 2. Cards — one consistent surface everywhere ──────────── */
html[data-theme="dark"] .card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
html[data-theme="dark"] .card:hover {
  border-color: var(--line-hi);
}

/* ── 3. Section headers — the organizing pattern ───────────── */
html[data-theme="dark"] .sh {
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
html[data-theme="dark"] .sh-title {
  font-weight: 600;
  letter-spacing: .1px;
}
html[data-theme="dark"] .sh-sub {
  font-size: 11px;
  letter-spacing: .3px;
}

/* ── 4. Sidebar — grouped, calm, purple active rail ────────── */
html[data-theme="dark"] .side {
  background: var(--bg-elev-1);
  border-right: 1px solid var(--line);
}
html[data-theme="dark"] .nav-section-label {
  color: var(--text-3);
  letter-spacing: 1.6px;
  font-size: 9.5px;
}
html[data-theme="dark"] .nav-item {
  border-radius: 8px;
  color: var(--text-2);
}
html[data-theme="dark"] .nav-item:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}
html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .sidebar-item.active {
  background: linear-gradient(90deg, var(--brand-soft), transparent 82%);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--brand);
  border-radius: 8px;
}

/* ── 5. Topbar — quieter chrome, sticky blur ───────────────── */
html[data-theme="dark"] .top {
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* ── 6. Tables — small-caps headers, hairline rows, hover ──── */
html[data-theme="dark"] table th {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] table td {
  border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
html[data-theme="dark"] table tr:hover td {
  background: color-mix(in oklab, var(--brand) 5%, transparent);
}

/* ── 7. KPI cards — numerals lead ──────────────────────────── */
html[data-theme="dark"] .kpi-value {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -.5px;
}
html[data-theme="dark"] .kpi-label {
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-3);
}
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .kpi {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
html[data-theme="dark"] .kpi-bar {
  background: var(--bg-elev-2);
  border-radius: 2px;
}
html[data-theme="dark"] .kpi-bar-fill {
  background: var(--brand);
}

/* ── 8. Buttons & inputs — one family ──────────────────────── */
html[data-theme="dark"] .btn {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-elev-2);
  font-weight: 600;
}
html[data-theme="dark"] .btn:hover { border-color: var(--line-hi); }
html[data-theme="dark"] .btn-pri {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
html[data-theme="dark"] .btn-pri:hover {
  background: color-mix(in oklab, var(--brand) 88%, #fff);
}
html[data-theme="dark"] .btn-ghost {
  background: transparent;
}
html[data-theme="dark"] .inp {
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
html[data-theme="dark"] .inp:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ── 9. Scrollbars + focus ring, to match ──────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--line-hi);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
html[data-theme="dark"] :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* ============================================================
   MIX PASS — blend of Option B (ops console) + C (editorial)
   on top of the Refined Dark base. Still design-only.
   ============================================================ */

/* B: faint engineering grid texture on the page canvas */
html[data-theme="dark"] body {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* C: gold editorial accent, used sparingly */
html[data-theme="dark"] {
  --gold: #d4a95c;
}

/* C: section headers get a gold tick + serif-adjacent weight */
html[data-theme="dark"] .sh {
  position: relative;
  padding-left: 12px;
}
html[data-theme="dark"] .sh::before {
  content: "";
  position: absolute;
  left: 0; top: 2px; bottom: 10px;
  width: 2px;
  background: var(--gold);
  opacity: .8;
  border-radius: 1px;
}

/* B: numerals are mono everywhere numbers live */
html[data-theme="dark"] .kpi-value,
html[data-theme="dark"] td.mono,
html[data-theme="dark"] .num,
html[data-theme="dark"] .count,
html[data-theme="dark"] .clock .t {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* B: micro-tags — bordered, uppercase, technical */
html[data-theme="dark"] .tag,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .beta-pill {
  border: 1px solid var(--line-hi);
  border-radius: 3px;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* B: sidebar footer reads like a status strip */
html[data-theme="dark"] .side-bottom {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .4px;
}

/* C: the page greeting keeps its serif italic voice, gold-tinted flourish */
html[data-theme="dark"] .greet em,
html[data-theme="dark"] h1 em {
  color: var(--gold);
}

/* B: KPI cards get a hairline top accent instead of heavy borders */
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .kpi {
  border-top: 2px solid color-mix(in oklab, var(--brand) 55%, transparent);
}