/* =====================================================
   WLWYB — DATA FORK
   "Corporate Reversion" extended for internal,
   data-driven, screen-only surfaces:
   dashboards · data tables · internal tools.

   Builds on colors_and_type.css. Link BOTH:
     <link rel="stylesheet" href="colors_and_type.css">
     <link rel="stylesheet" href="data_system.css">

   Philosophy of the fork:
   - Readability first. The most obvious, intuitive schema wins.
   - These are work tools. They should not shine. They should
     feel above-average good to operate, all day.
   - Mono is the dominant working face. Numbers are tabular,
     aligned, and machined.
   - The yellow logo is present at normal corporate scale — not
     a tiny elegant mark. It anchors every layout.
   ===================================================== */


/* =====================================================
   INPUT MONO — the working typeface
   Three widths. Pick the tightest that stays readable.
   normal     → data body, UI chrome, controls (the default)
   narrow     → dense tables, number columns (more data, same space)
   condensed  → big numerals, ultra-dense grids, metric displays
   ===================================================== */

/* --- Input Mono (normal width) — only weights actually used (400/500/700), woff2 ---
   Dropped 2026-07-01: Light (300), Italic, and the never-used Narrow/Condensed
   families. --font-data-narrow / --font-data-condensed now gracefully fall back
   to 'Input Mono'. TTFs converted to woff2 (66% smaller). */
@font-face {
  font-family: 'Input Mono';
  src: url('../fonts/InputMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Input Mono';
  src: url('../fonts/InputMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Input Mono';
  src: url('../fonts/InputMono-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}


:root {

  /* ===================================================
     FONT ROLES — fork additions
     The base system keeps:
       --font-primary  (Archivo Narrow)  → prose, help text, longer reading
       --font-display  (Cabinet Grotesk) → display / hero moments only
       --font-mono     (JetBrains Mono)  → retained for legacy compatibility
     The fork promotes Input Mono to the dominant working face:
     =================================================== */
  --font-data:            'Input Mono', 'JetBrains Mono', monospace;
  --font-data-narrow:     'Input Mono Narrow', 'Input Mono', monospace;
  --font-data-condensed:  'Input Mono Condensed', 'Input Mono', monospace;

  /* tabular numerals everywhere data lives */
  --num-features: "tnum" 1, "zero" 1, "ss01" 1;

  /* focus ink — the "brand-yellow-as-ink" role: sorted-column indicator,
     active rail edge, selection edge. Brand yellow on the dark canvas;
     deepened to a legible amber in light high-contrast mode (see [data-theme="light"]). */
  --focus-ink: var(--color-accent-yellow);


  /* ===================================================
     SEMANTIC DATA COLORS — muted, tuned to the dark canvas
     Quiet by default; they report status, they don't shout.
     Each: base line/text · dim fill · border.
     =================================================== */

  --sem-success:        oklch(0.74 0.11 150);   /* muted green  */
  --sem-success-fill:   oklch(0.74 0.11 150 / 0.12);
  --sem-success-border: oklch(0.74 0.11 150 / 0.34);

  --sem-warning:        oklch(0.80 0.11 80);    /* amber (distinct from brand yellow) */
  --sem-warning-fill:   oklch(0.80 0.11 80 / 0.12);
  --sem-warning-border: oklch(0.80 0.11 80 / 0.34);

  --sem-error:          oklch(0.67 0.15 27);    /* muted red */
  --sem-error-fill:     oklch(0.67 0.15 27 / 0.13);
  --sem-error-border:   oklch(0.67 0.15 27 / 0.36);

  --sem-info:           oklch(0.73 0.08 245);   /* muted slate-blue */
  --sem-info-fill:      oklch(0.73 0.08 245 / 0.12);
  --sem-info-border:    oklch(0.73 0.08 245 / 0.34);

  --sem-neutral:        var(--color-dim);
  --sem-neutral-fill:   rgba(155,155,148,0.08);
  --sem-neutral-border: var(--color-border);

  /* directional deltas — green up / red down by convention,
     but the system lets you invert per metric (cost going down is good) */
  --delta-pos: var(--sem-success);
  --delta-neg: var(--sem-error);


  /* ===================================================
     CHART PALETTES — three documented modes
     Use the quietest mode the data allows.
     =================================================== */

  /* MODE 1 — STRICT GREYSCALE. One value per series, by luminance.
     Default for single-series and for print-of-screen clarity. */
  --chart-mono-1: #f0f0e8;
  --chart-mono-2: #b6b6ad;
  --chart-mono-3: #88887f;
  --chart-mono-4: #5e5e58;
  --chart-mono-5: #3f3f3b;
  --chart-mono-grid: #1f1f1d;
  --chart-mono-axis: #3d3d3a;

  /* MODE 2 — GREYSCALE + YELLOW FOCUS. Everything grey; the one
     series that matters is brand yellow. The most common dashboard mode. */
  --chart-focus:     var(--color-accent-yellow);
  --chart-focus-dim: oklch(0.78 0.16 80 / 0.16);
  --chart-context-1: #6f6f69;
  --chart-context-2: #4a4a46;
  --chart-context-3: #343431;

  /* MODE 3 — DATA-VIZ PALETTE. 6 muted hues, shared L≈0.73 / C≈0.085.
     Only when 3+ categorical series genuinely need distinct identity. */
  --cat-1: oklch(0.73 0.075 250);   /* slate blue   */
  --cat-2: oklch(0.75 0.085 190);   /* teal         */
  --cat-3: oklch(0.76 0.090 150);   /* green        */
  --cat-4: oklch(0.80 0.095 85);    /* amber        */
  --cat-5: oklch(0.71 0.100 45);    /* clay         */
  --cat-6: oklch(0.71 0.070 320);   /* mauve        */


  /* ===================================================
     DENSITY SYSTEM — comfortable (default) ↔ tight
     Driven by [data-density="tight"] on any container.
     =================================================== */
  --row-h:        38px;
  --cell-pad-y:   8px;
  --cell-pad-x:   14px;
  --data-size:    13px;
  --data-size-sm: 12px;
  --kpi-gap:      var(--space-5);

  /* contrast control — dashboards live for hours; let users dial text up/down.
     Override --data-text on a container to shift body legibility. */
  --data-text:    var(--color-primary);
}

[data-density="tight"] {
  --row-h:        27px;
  --cell-pad-y:   3px;
  --cell-pad-x:   10px;
  --data-size:    12px;
  --data-size-sm: 11px;
  --kpi-gap:      var(--space-3);
}


/* =====================================================
   DATA SURFACE BASE
   Apply .data-surface to a dashboard root to switch the
   default typeface to Input Mono and turn on tabular nums.
   ===================================================== */
.data-surface {
  font-family: var(--font-data);
  font-size: var(--data-size);
  color: var(--data-text);
  font-feature-settings: var(--num-features);
  letter-spacing: 0;
}
.data-surface h1, .data-surface h2, .data-surface h3,
.data-surface h4, .data-surface h5, .data-surface h6 {
  font-family: var(--font-data);
  letter-spacing: -0.01em;
}

/* width utilities */
.u-narrow    { font-family: var(--font-data-narrow); }
.u-condensed { font-family: var(--font-data-condensed); }
.u-num       { font-variant-numeric: tabular-nums; font-feature-settings: var(--num-features); }
.u-tnum      { font-feature-settings: var(--num-features); }

/* the procedural micro-label, restated for the data context */
.d-label {
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-dim);
}


/* =====================================================
   APP CHROME — rail, top bar, logo at corporate scale
   ===================================================== */
.app-rail {
  background: var(--color-depth);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
}
.app-rail__brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
/* the chip mark — present, normal size, not a tiny flourish */
.brand-chip { width: 40px; height: 40px; flex: none; display: block; }
.brand-chip--sm { width: 30px; height: 30px; }
.brand-chip--lg { width: 52px; height: 52px; }
.app-rail__word {
  font-family: var(--font-data);
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  color: var(--color-bright); line-height: 1;
}
.app-rail__sub {
  font-family: var(--font-data);
  font-size: 9px; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--color-dim); margin-top: 3px;
}

.topbar {
  height: 56px; background: var(--color-void);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--space-5);
  padding: 0 var(--space-6);
}

/* rail nav */
.rail-nav { display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); gap: 1px; }
.rail-nav__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 9px var(--space-3); color: var(--color-secondary);
  font-family: var(--font-data); font-size: var(--data-size);
  text-decoration: none; cursor: pointer; border-radius: var(--radius-sm);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.rail-nav__item:hover { background: var(--color-surface); color: var(--color-bright); }
.rail-nav__item[aria-current="page"],
.rail-nav__item.is-active {
  background: var(--color-surface); color: var(--color-white);
  box-shadow: inset 2px 0 0 var(--focus-ink);
}
.rail-nav__group {
  font-family: var(--font-data); font-size: 9px; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--color-muted);
  padding: var(--space-4) var(--space-3) var(--space-2);
}


/* =====================================================
   KPI / STAT CARDS
   ===================================================== */
.kpi-grid {
  display: grid; gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border);
}
.kpi {
  background: var(--color-surface);
  padding: var(--cell-pad-x);
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.kpi__label {
  font-family: var(--font-data); font-size: var(--size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-dim); display: flex; align-items: center; gap: 6px;
}
.kpi__value {
  font-family: var(--font-data-condensed);
  font-weight: 500; font-size: 34px; line-height: 1; color: var(--color-bright);
  font-feature-settings: var(--num-features);
}
.kpi__value .unit { font-size: 0.5em; color: var(--color-dim); margin-left: 2px; }
.kpi__foot { display: flex; align-items: center; gap: var(--space-3); }
.kpi__delta {
  font-family: var(--font-data); font-size: var(--data-size-sm);
  display: inline-flex; align-items: center; gap: 3px; font-feature-settings: var(--num-features);
}
.kpi__delta--up   { color: var(--delta-pos); }
.kpi__delta--down { color: var(--delta-neg); }
.kpi__delta--flat { color: var(--color-dim); }
.kpi__period { font-family: var(--font-data); font-size: 11px; color: var(--color-muted); }
[data-density="tight"] .kpi__value { font-size: 26px; }


/* =====================================================
   DATA TABLE — the centerpiece. Excel-grade legibility.
   <table class="dt"> ... numeric cells get .num (right-aligned, narrow)
   ===================================================== */
.dt-wrap {
  border: 1px solid var(--color-border); background: var(--color-depth);
  overflow: auto; position: relative;
}
table.dt {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: var(--font-data); font-size: var(--data-size);
  color: var(--data-text);
}
table.dt thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--color-elevation);
  text-align: left; font-weight: 500;
  font-size: var(--size-2xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-secondary);
  padding: var(--cell-pad-y) var(--cell-pad-x);
  height: var(--row-h); white-space: nowrap;
  border-bottom: 1px solid var(--color-muted);
  user-select: none; position: relative;
}
table.dt thead th.num { text-align: right; }
table.dt thead th.sortable { cursor: pointer; }
table.dt thead th.sortable:hover { color: var(--color-bright); }
table.dt thead th .sort-ind { color: var(--color-muted); margin-left: 5px; font-size: 10px; }
table.dt thead th[aria-sort="ascending"]  { color: var(--color-bright); }
table.dt thead th[aria-sort="descending"] { color: var(--color-bright); }
table.dt thead th[aria-sort="ascending"]  .sort-ind,
table.dt thead th[aria-sort="descending"] .sort-ind { color: var(--focus-ink); }

table.dt tbody td {
  padding: var(--cell-pad-y) var(--cell-pad-x);
  height: var(--row-h);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap; vertical-align: middle;
}
table.dt tbody tr:hover td { background: var(--color-surface); }
table.dt tbody tr.is-selected td { background: var(--focus-fill, oklch(0.78 0.16 80 / 0.07)); box-shadow: inset 2px 0 0 var(--focus-ink); }
table.dt td.num {
  text-align: right; font-family: var(--font-data-narrow);
  font-feature-settings: var(--num-features); color: var(--color-bright);
}
table.dt td.muted { color: var(--color-dim); }
table.dt td.key { color: var(--color-bright); }
table.dt.zebra tbody tr:nth-child(even) td { background: rgba(255,255,255,0.014); }
table.dt.zebra tbody tr:nth-child(even):hover td { background: var(--color-surface); }

/* first column can stick for wide tables */
table.dt .stick-left { position: sticky; left: 0; z-index: 1; background: var(--color-depth); }
table.dt tbody tr:hover .stick-left { background: var(--color-surface); }

/* in-cell numeric bar (magnitude in place) */
.cellbar { position: relative; }
.cellbar > span { position: relative; z-index: 1; }
.cellbar::before {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: 60%; width: var(--bar, 0%); background: var(--color-muted); opacity: 0.5;
}

/* ---- RESIZABLE COLUMNS (v1.1) ----
   data_system.js upgrades each table.dt: it freezes column widths into a
   <colgroup>, switches the table to fixed layout, and drops a drag handle on
   the right edge of every header cell. The wrap (overflow:auto) scrolls when
   the columns total wider than the container. Widths persist per table. */
table.dt.is-resizable { table-layout: fixed; }
table.dt.is-resizable thead th,
table.dt.is-resizable tbody td { overflow: hidden; text-overflow: ellipsis; }
.dt-resizer {
  position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
  cursor: col-resize; z-index: 4; touch-action: none; user-select: none;
}
.dt-resizer::after {
  content: ""; position: absolute; top: 18%; bottom: 18%; left: 4px; width: 2px;
  background: transparent; transition: background var(--duration-fast) ease;
}
.dt-resizer:hover::after { background: var(--focus-ink); }
body.dt-col-resizing { cursor: col-resize; }
body.dt-col-resizing * { cursor: col-resize !important; user-select: none !important; }
body.dt-col-resizing .dt-resizer.is-active::after { background: var(--focus-ink); }


/* =====================================================
   STATUS — badges, dots, semantic cells
   ===================================================== */
.badge-d {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-data); font-size: var(--size-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--sem-neutral-border);
  color: var(--color-secondary); border-radius: var(--radius-xs);
  white-space: nowrap;
}
.badge-d--success { color: var(--sem-success); border-color: var(--sem-success-border); background: var(--sem-success-fill); }
.badge-d--warning { color: var(--sem-warning); border-color: var(--sem-warning-border); background: var(--sem-warning-fill); }
.badge-d--error   { color: var(--sem-error);   border-color: var(--sem-error-border);   background: var(--sem-error-fill); }
.badge-d--info    { color: var(--sem-info);     border-color: var(--sem-info-border);     background: var(--sem-info-fill); }

.dot-d { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sem-neutral); }
.dot-d--success { background: var(--sem-success); }
.dot-d--warning { background: var(--sem-warning); }
.dot-d--error   { background: var(--sem-error); }
.dot-d--info    { background: var(--sem-info); }
.dot-d--live { box-shadow: 0 0 0 0 currentColor; animation: pulse-d 2.4s ease-out infinite; color: var(--sem-success); }
@keyframes pulse-d {
  0% { box-shadow: 0 0 0 0 var(--sem-success-border); }
  70%,100% { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) { .dot-d--live { animation: none; } }


/* =====================================================
   CHART FRAME — wrappers, axes, legend, gridlines
   The fork draws charts with inline SVG; these styles
   standardize the surrounding furniture.
   ===================================================== */
.chart {
  background: var(--color-surface); border: 1px solid var(--color-border);
  display: flex; flex-direction: column;
}
.chart__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); padding: var(--cell-pad-x) var(--cell-pad-x) 0;
}
.chart__title { font-family: var(--font-data); font-size: var(--data-size); font-weight: 500; color: var(--color-bright); }
.chart__sub { font-family: var(--font-data); font-size: 11px; color: var(--color-dim); margin-top: 2px; }
.chart__body { padding: var(--space-3) var(--cell-pad-x) var(--cell-pad-x); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.chart-legend__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data); font-size: 11px; color: var(--color-secondary);
}
.chart-legend__swatch { width: 10px; height: 10px; flex: none; border-radius: var(--radius-xs); }

/* svg primitives — reference via class on svg elements */
.cx-grid  { stroke: var(--chart-mono-grid); stroke-width: 1; }
.cx-axis  { stroke: var(--chart-mono-axis); stroke-width: 1; }
.cx-axis-text { font-family: var(--font-data); font-size: 10px; fill: var(--color-dim); }
.cx-line  { fill: none; stroke-width: 1.75; vector-effect: non-scaling-stroke; }
.cx-dot   { stroke: var(--color-surface); stroke-width: 1.5; }


/* =====================================================
   SPARKLINE — inline trend, sits in cards & table cells
   ===================================================== */
.spark { display: inline-block; vertical-align: middle; }
.spark path { fill: none; stroke: var(--color-secondary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark--focus path { stroke: var(--color-accent-yellow); }
.spark--up   path { stroke: var(--sem-success); }
.spark--down path { stroke: var(--sem-error); }


/* =====================================================
   HEATMAP / DISTRIBUTION
   ===================================================== */
.heat { display: grid; gap: 2px; }
.heat__cell { aspect-ratio: 1; border-radius: var(--radius-xs); background: var(--color-surface); }
/* intensity via inline --i (0..1) and a hue choice */
.heat__cell { background: oklch(0.80 0.14 80 / calc(var(--i, 0) * 0.92 + 0.02)); }
.heat--mono .heat__cell { background: rgba(240,240,232, calc(var(--i, 0) * 0.9 + 0.02)); }


/* =====================================================
   UPTIME BARS — status history strip
   ===================================================== */
.uptime { display: flex; gap: 2px; align-items: flex-end; }
.uptime__tick { width: 5px; height: 26px; border-radius: 1px; background: var(--sem-success); }
.uptime__tick--warn  { background: var(--sem-warning); }
.uptime__tick--down  { background: var(--sem-error); }
.uptime__tick--none  { background: var(--color-muted); }


/* =====================================================
   CONTROLS — search, segmented, select, chips, date range
   ===================================================== */
.field-d {
  background: var(--color-depth); border: 1px solid var(--color-border);
  padding: 8px var(--space-3); color: var(--color-primary);
  font-family: var(--font-data); font-size: var(--data-size);
  outline: none; border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) ease;
}
.field-d::placeholder { color: var(--color-muted); }
.field-d:focus { border-color: var(--color-dim); }

.search-d { display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-depth); border: 1px solid var(--color-border);
  padding: 0 var(--space-3); border-radius: var(--radius-sm); }
.search-d input { background: none; border: none; outline: none; color: var(--color-primary);
  font-family: var(--font-data); font-size: var(--data-size); padding: 8px 0; width: 100%; }
.search-d input::placeholder { color: var(--color-muted); }
.search-d svg { color: var(--color-dim); flex: none; }

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.seg button {
  font-family: var(--font-data); font-size: var(--data-size-sm);
  letter-spacing: 0.02em; color: var(--color-secondary);
  background: var(--color-depth); border: none; border-right: 1px solid var(--color-border);
  padding: 7px var(--space-4); cursor: pointer; transition: all var(--duration-fast) ease;
}
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--color-bright); background: var(--color-surface); }
.seg button.is-active { background: var(--color-elevation); color: var(--color-white); }

/* chips / filter tokens */
.chip-d {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-data); font-size: var(--data-size-sm);
  color: var(--color-secondary); background: var(--color-surface);
  border: 1px solid var(--color-border); padding: 4px 6px 4px 10px;
  border-radius: var(--radius-pill);
}
.chip-d button { background: none; border: none; color: var(--color-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.chip-d button:hover { color: var(--color-bright); }

/* select */
.select-d {
  font-family: var(--font-data); font-size: var(--data-size);
  color: var(--color-primary); background: var(--color-depth);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 8px var(--space-4) 8px var(--space-3); cursor: pointer;
  appearance: none; background-image:
    linear-gradient(45deg, transparent 50%, var(--color-dim) 50%),
    linear-gradient(135deg, var(--color-dim) 50%, transparent 50%);
  background-position: calc(100% - 13px) 16px, calc(100% - 8px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* date-range pill */
.daterange {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-data); font-size: var(--data-size);
  color: var(--color-primary); background: var(--color-depth);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 7px var(--space-4);
}
.daterange .sep { color: var(--color-muted); }


/* =====================================================
   BUTTONS — data context (compact, mono, ALL CAPS retained)
   ===================================================== */
.btn-d {
  font-family: var(--font-data); font-size: var(--data-size-sm);
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px var(--space-4); border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--duration-fast) ease; border: 1px solid transparent;
}
.btn-d--primary { background: var(--color-primary); color: var(--color-void); }
.btn-d--primary:hover { background: var(--color-bright); }
.btn-d--ghost { background: transparent; border-color: var(--color-border); color: var(--color-primary); }
.btn-d--ghost:hover { border-color: var(--color-dim); color: var(--color-bright); }
.btn-d--yellow { background: var(--color-accent-yellow); color: #000; }
.btn-d--yellow:hover { filter: brightness(1.08); }


/* =====================================================
   PANEL / SECTION furniture
   ===================================================== */
.panel-d { background: var(--color-surface); border: 1px solid var(--color-border); }
.panel-d__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--cell-pad-x); border-bottom: 1px solid var(--color-border);
}
.panel-d__title { font-family: var(--font-data); font-size: var(--data-size); font-weight: 500; color: var(--color-bright); }
.divider-d { height: 1px; background: var(--color-border); border: none; }


/* =====================================================
   MODE TOGGLE — standard control (v1.1)
   Single button, stroke icon, 34px square (32 in tight).
   Icon depicts the mode it will switch INTO:
     dark active  → SUN  (click to go light)
     light active → MOON (click to go dark)
   PLACEMENT RULE: right-most control in the top bar
   (top-right of the app chrome). In left-rail layouts with
   no top bar, it lives in the rail foot. Declarative —
   any [data-mode-toggle] is upgraded by data_system.js.
   ===================================================== */
.mode-toggle {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-depth); color: var(--color-secondary);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  cursor: pointer; padding: 0;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.mode-toggle:hover { color: var(--color-bright); border-color: var(--color-dim); background: var(--color-surface); }
.mode-toggle:focus-visible { outline: 2px solid var(--focus-ink); outline-offset: 2px; }
.mode-toggle svg { width: 17px; height: 17px; display: block; }
[data-density="tight"] .mode-toggle { width: 30px; height: 30px; }
.mode-toggle .mt-moon { display: none; }
[data-theme="light"] .mode-toggle .mt-sun  { display: none; }
[data-theme="light"] .mode-toggle .mt-moon { display: block; }


/* =====================================================
   LIGHT HIGH-CONTRAST MODE — second theme (v1.1)
   Activated with  data-theme="light"  on the root <html>.
   A warm paper canvas that reads as "white" without being
   pure #fff, with the full scale inverted for all-day
   legibility. The semantic aliases in colors_and_type.css
   resolve var() lazily, so overriding the base scale here
   re-themes every component automatically.
   ===================================================== */
[data-theme="light"] {
  /* base scale — warm paper, inverted for contrast (light bg ↔ dark ink) */
  --color-void:        #e7e3d6;   /* page canvas — warm "white that isn't white" */
  --color-depth:       #efebe0;   /* secondary layer */
  --color-surface:     #f5f2ea;   /* cards, cells — raised above canvas */
  --color-elevation:   #fbf9f3;   /* hover / active surface — lightest */
  --color-border:      #c2bcab;   /* structural separators — crisp on paper */
  --color-muted:       #a59f8d;   /* disabled, ghost, secondary borders */
  --color-dim:         #6b6658;   /* tertiary text, labels (AA on paper) */
  --color-secondary:   #4d4839;   /* secondary body text */
  --color-primary:     #2a271d;   /* primary body text — dark warm */
  --color-bright:      #18160f;   /* headlines, high-emphasis */
  --color-white:       #0c0b07;   /* maximum contrast (now the darkest ink) */

  /* focus ink — deeper amber so the marker holds on paper (brand fill unchanged) */
  --focus-ink:  #8a5a00;
  --focus-fill: oklch(0.74 0.15 75 / 0.22);

  /* semantic data colors — darkened + slightly more saturated for light */
  --sem-success:        oklch(0.50 0.15 150);
  --sem-success-fill:   oklch(0.50 0.15 150 / 0.13);
  --sem-success-border: oklch(0.50 0.15 150 / 0.45);

  --sem-warning:        oklch(0.52 0.13 70);
  --sem-warning-fill:   oklch(0.52 0.13 70 / 0.13);
  --sem-warning-border: oklch(0.52 0.13 70 / 0.45);

  --sem-error:          oklch(0.51 0.20 27);
  --sem-error-fill:     oklch(0.51 0.20 27 / 0.12);
  --sem-error-border:   oklch(0.51 0.20 27 / 0.46);

  --sem-info:           oklch(0.50 0.13 250);
  --sem-info-fill:      oklch(0.50 0.13 250 / 0.12);
  --sem-info-border:    oklch(0.50 0.13 250 / 0.45);

  --sem-neutral:        var(--color-dim);
  --sem-neutral-fill:   rgba(70,66,52,0.07);
  --sem-neutral-border: var(--color-border);

  /* chart palettes — inverted luminance ramp + re-tuned hues for paper */
  --chart-mono-1: #18160f;
  --chart-mono-2: #4d4839;
  --chart-mono-3: #6b6658;
  --chart-mono-4: #948e7c;
  --chart-mono-5: #bdb7a5;
  --chart-mono-grid: #d8d2c2;
  --chart-mono-axis: #b0aa98;

  --chart-focus:     var(--color-accent-yellow);
  --chart-focus-dim: oklch(0.74 0.15 75 / 0.20);
  --chart-context-1: #4d4839;
  --chart-context-2: #7c7665;
  --chart-context-3: #a59f8d;

  --cat-1: oklch(0.52 0.12 250);
  --cat-2: oklch(0.53 0.11 190);
  --cat-3: oklch(0.52 0.12 150);
  --cat-4: oklch(0.55 0.13 75);
  --cat-5: oklch(0.50 0.15 40);
  --cat-6: oklch(0.49 0.12 320);
}

/* light-mode component touch-ups where dark-tuned constants are baked in */
[data-theme="light"] table.dt tbody tr.is-selected td { background: var(--focus-fill); }
[data-theme="light"] table.dt.zebra tbody tr:nth-child(even) td { background: rgba(0,0,0,0.022); }
[data-theme="light"] table.dt.zebra tbody tr:nth-child(even):hover td { background: var(--color-surface); }
[data-theme="light"] .heat__cell { background: oklch(0.55 0.15 75 / calc(var(--i, 0) * 0.92 + 0.04)); }
[data-theme="light"] .heat--mono .heat__cell { background: rgba(24,22,15, calc(var(--i, 0) * 0.9 + 0.04)); }
[data-theme="light"] .btn-d--yellow { color: #1a1305; }