/* One palette for every BC Team Portal report — the Pancham Intelligence palette (the user, 2026-10-10: align the
   design and colours), so Bookings, Quality, Schedule, Attendance, Insights, Lead response and the Agent scorecard
   all look like one product.

   Brand: DM Sans for text, DM Mono for small data labels, accent #00A882 for the interface (tabs, links, buttons,
   status), navy #0F1629 for the header. Charts draw in --mark, a sky blue (#37aecc; #2aa3c2 in dark), never the
   brand green; the categorical palette is the one validated with the dataviz checker for Intelligence.

   The modules grew three different names for the same colours. This file sets all three, so each page keeps its own
   stylesheet and simply inherits the shared palette:
     Intelligence / toolkit   --page --surface --line --ink-1..3 --accent --mark   (and every --rui-* token)
     style.css  (Bookings, Quality, Agent activity)   --bg --surface --border --text --text2 --text3 --header
     schedule.css (Schedule, Attendance)              --bg --card --line --ink --muted --light --navy
     insights / response / scorecard                  --surface-1 --surface-2 --line --ink-1..3 --track

   LOAD IT LAST, after the page's own stylesheet, so these win; a token a module defines and this file does not
   (--s-fast, --d-booked, --s-a …) keeps its own value. */

:root {
  color-scheme: light;

  /* ── the palette ─────────────────────────────────────── */
  --page: #f2f4f7; --surface: #ffffff; --surface-alt: #f7f8fa;
  --line-c: #e3e6eb; --grid-c: #e9ecf0; --axis-c: #c9ced6;
  --ink1: #0f1629; --ink2: #4a5468; --ink3: #6f7889;
  --navy-c: #0f1629; --navy-2: #1a2440;
  --accent-c: #00a882; --accent-deep: #00785d; --accent-soft: #e2f4ef;
  --mark-c: #37aecc;
  --good-c: #0ca30c; --good-deep: #006300; --good-soft: #e7f0ea;
  --warn-c: #b08a3e; --warn-deep: #7a5600; --warn-soft: #fdf3dc;
  --crit-c: #d03b3b; --crit-deep: #b02a2a; --crit-soft: #fbe9e7;
  /* categorical, validated for colour-vision deficiency and contrast */
  --k1: #37aecc; --k2: #2a78d6; --k3: #eda100; --k4: #e87ba4; --k5: #4a3aa7; --k6: #eb6834; --k7: #7c8597;
  /* the tints the module stylesheets wrote as fixed hexes (a hovered row, today's column, a bar's track, a chip).
     They are tokens now, so the rules at the end of this file flip them in the dark instead of leaving a white
     band across a dark table. */
  --row-soft: #fafbfd; --row-today: #f2fbf8; --track-soft: #f1f4f8;
  --chip-grey-bg: #f3f4f6; --chip-grey-ink: #6b7280;
  --chip-amber-bg: #fef3c7; --chip-amber-ink: #92400e;
  --chip-orange-bg: #ffedd5; --chip-orange-ink: #c2410c;
  --chip-pink-bg: #fce7f3; --chip-pink-ink: #be185d;
  --chip-green-bg: #d1fae5; --chip-green-ink: #047857;
  --chip-red-bg: #fee2e2; --chip-red-ink: #b91c1c;
  --field-bg: #ffffff; --dirty-bg: #fffbeb;

  /* ── the toolkit (report-ui.css) ─────────────────────── */
  --rui-surface: var(--surface); --rui-surface-2: var(--surface-alt);
  --rui-line: var(--line-c); --rui-grid: var(--grid-c); --rui-axis: var(--axis-c);
  --rui-ink-1: var(--ink1); --rui-ink-2: var(--ink2); --rui-ink-3: var(--ink3);
  --rui-accent: var(--accent-c); --rui-accent-ink: var(--accent-deep); --rui-accent-wash: var(--accent-soft);
  --rui-good-ink: var(--good-deep); --rui-warn-ink: var(--warn-deep); --rui-warn-wash: var(--warn-soft);
  --rui-crit-ink: var(--crit-deep); --rui-crit-wash: var(--crit-soft);
  --rui-navy: var(--navy-c); --rui-mark: var(--mark-c); --rui-muted-mark: var(--axis-c); --rui-heat: #2a78d6;
  --rui-c1: var(--k1); --rui-c2: var(--k2); --rui-c3: var(--k3); --rui-c4: var(--k4);
  --rui-c5: var(--k5); --rui-c6: var(--k6); --rui-c7: var(--k7);
  --rui-o1: #86b6ef; --rui-o2: #5598e7; --rui-o3: #2a78d6; --rui-o4: #1c5cab; --rui-o5: #0d366b;
  --rui-shadow: 0 1px 2px rgba(15, 22, 41, .05), 0 4px 16px rgba(15, 22, 41, .04);

  /* ── style.css: Bookings, Quality, Agent activity ────── */
  --bg: var(--page); --border: var(--line-c); --border2: var(--axis-c);
  --text: var(--ink1); --text2: var(--ink2); --text3: var(--ink3);
  --header: var(--navy-c);
  --green: var(--accent-c); --blue: var(--k2); --orange: var(--k6); --amber: var(--k3);
  --purple: var(--k5); --red: var(--crit-c); --cyan: var(--k1);

  /* ── schedule.css: Schedule, Attendance ──────────────── */
  --card: var(--surface); --ink: var(--ink1); --muted: var(--ink2); --light: var(--ink3);
  --navy: var(--navy-c); --accent-d: var(--accent-deep); --bad: var(--crit-c);
  --shadow: 0 1px 3px rgba(15, 22, 41, .08);

  /* ── insights / response / scorecard ─────────────────── */
  --surface-1: var(--surface);
  --surface-2: var(--page);            /* these pages use it as the page background */
  --line: var(--line-c);
  --ink-1: var(--ink1); --ink-2: var(--ink2); --ink-3: var(--ink3);
  --accent: var(--accent-c); --accent-bg: var(--accent-soft);
  --good: var(--good-c); --warn: var(--warn-c); --crit: var(--crit-c); --warn-ink: var(--warn-deep);
  --good-bg: var(--good-soft); --warn-bg: var(--warn-soft); --crit-bg: var(--crit-soft);
  --track: var(--grid-c); --focus: var(--accent-deep);
  /* Insights' two series: the main measure in the sky blue every chart uses, the second in the blue beside it */
  --s-a: var(--mark-c); --s-b: var(--k2);
  --mark: var(--mark-c);
  /* Lead response's speed bands, on the validated palette: fast sky, then amber, then magenta, then grey */
  --s-fast: var(--k1); --s-ok: var(--k3); --s-slow: var(--k4); --s-none: var(--k7);
  /* its disposition colours */
  --d-booked: var(--k1); --d-noanswer: var(--axis-c); --d-none: var(--k7);
}

/* Dark, the way Intelligence does it: the viewer's own system setting decides, unless they asked for one in the
   toggle (data-theme). The same declarations are written twice — once under the media query, guarded so an explicit
   "light" wins, and once for an explicit "dark" — because a CSS variable block cannot be reused. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0a0f1c; --surface: #121a2c; --surface-alt: #172036;
    --line-c: #232d44; --grid-c: #1e273b; --axis-c: #34405a;
    --ink1: #eef1f7; --ink2: #b4bccb; --ink3: #8a93a8;
    --navy-c: #0f1629; --navy-2: #1a2440;
    --accent-c: #19c29b; --accent-deep: #3fd3ae; --accent-soft: #0f2e2a;
    --mark-c: #2aa3c2;
    --good-c: #3fcf6b; --good-deep: #3fcf6b; --good-soft: #0f2e2a;
    --warn-c: #c9a45e; --warn-deep: #f2c14e; --warn-soft: #33290f;
    --crit-c: #f08a8a; --crit-deep: #f08a8a; --crit-soft: #3a1d1f;
    --k1: #2aa3c2; --k2: #3366dd; --k3: #c98500; --k4: #d55181; --k5: #9085e9; --k6: #d95926; --k7: #6b7590;
    --rui-heat: #3987e5;
    --rui-o1: #184f95; --rui-o2: #2a78d6; --rui-o3: #5598e7; --rui-o4: #86b6ef; --rui-o5: #b7d3f6;
    --rui-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 3px rgba(0, 0, 0, .35);
    --row-soft: #172036; --row-today: #112b2a; --track-soft: #1e273b;
    --chip-grey-bg: #222c42; --chip-grey-ink: #aab3c4;
    --chip-amber-bg: #3a2f12; --chip-amber-ink: #f2c14e;
    --chip-orange-bg: #3b2213; --chip-orange-ink: #f0a071;
    --chip-pink-bg: #3a1b2a; --chip-pink-ink: #f09ec2;
    --chip-green-bg: #10312a; --chip-green-ink: #4cd4a4;
    --chip-red-bg: #3a1d1f; --chip-red-ink: #f08a8a;
    --field-bg: #121a2c; --dirty-bg: #332a12;
  }
  /* the segmented and pressed buttons invert in the dark, as they do in Intelligence */
  :root:where(:not([data-theme="light"])) .btn[aria-pressed="true"],
  :root:where(:not([data-theme="light"])) .btn.primary,
  :root:where(:not([data-theme="light"])) .seg button[aria-pressed="true"] { background: var(--ink1); border-color: var(--ink1); color: var(--page); }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0a0f1c; --surface: #121a2c; --surface-alt: #172036;
  --line-c: #232d44; --grid-c: #1e273b; --axis-c: #34405a;
  --ink1: #eef1f7; --ink2: #b4bccb; --ink3: #8a93a8;
  --navy-c: #0f1629; --navy-2: #1a2440;
  --accent-c: #19c29b; --accent-deep: #3fd3ae; --accent-soft: #0f2e2a;
  --mark-c: #2aa3c2;
  --good-c: #3fcf6b; --good-deep: #3fcf6b; --good-soft: #0f2e2a;
  --warn-c: #c9a45e; --warn-deep: #f2c14e; --warn-soft: #33290f;
  --crit-c: #f08a8a; --crit-deep: #f08a8a; --crit-soft: #3a1d1f;
  --k1: #2aa3c2; --k2: #3366dd; --k3: #c98500; --k4: #d55181; --k5: #9085e9; --k6: #d95926; --k7: #6b7590;
  --rui-heat: #3987e5;
  --rui-o1: #184f95; --rui-o2: #2a78d6; --rui-o3: #5598e7; --rui-o4: #86b6ef; --rui-o5: #b7d3f6;
  --rui-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 3px rgba(0, 0, 0, .35);
  --row-soft: #172036; --row-today: #112b2a; --track-soft: #1e273b;
  --chip-grey-bg: #222c42; --chip-grey-ink: #aab3c4;
  --chip-amber-bg: #3a2f12; --chip-amber-ink: #f2c14e;
  --chip-orange-bg: #3b2213; --chip-orange-ink: #f0a071;
  --chip-pink-bg: #3a1b2a; --chip-pink-ink: #f09ec2;
  --chip-green-bg: #10312a; --chip-green-ink: #4cd4a4;
  --chip-red-bg: #3a1d1f; --chip-red-ink: #f08a8a;
  --field-bg: #121a2c; --dirty-bg: #332a12;
}

/* Type: DM Sans for everything, DM Mono for the small data labels every report uses. */
body { font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* DM Mono is for small data labels only — a column head, a chip, a timestamp — never for a sentence. */
.mono, table.rui-t th, table.tbl th, table.t th, .rui-heat th, .rui-hb .chip, .rui-hbhead, #who { font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; border-radius: 4px; }

/* A chart mark is never the brand green: the green belongs to the interface. */
:root .chart .ln, :root .chart polyline.ln { stroke: var(--mark-c); }
:root .chart .dot { stroke: var(--mark-c); }
:root .chart .dot:hover { fill: var(--mark-c); }
:root .chart .ln.b, :root .chart .dot.b { stroke: var(--k2); }

/* ─────────────────────────────────────────────────────────────────────────
   The components, as Pancham Intelligence draws them (the user, 2026-10-10:
   "the styles must come from the intelligence report, so BC portal is the one
   that has to change"). Only appearance is set here — never display, grid or
   flow — so each page keeps its own layout and simply looks like Intelligence.
   ───────────────────────────────────────────────────────────────────────── */

/* the navy header bar — `header#top` on the newer pages, a bare `header` on Bookings, Quality and Agent activity */
header#top, body > header { background: var(--navy-c); padding: 10px 24px; }
header#top .logo, body > header .logo { height: 24px; }
header#top .back, header#top #who, body > header .back, body > header #who { color: rgba(255, 255, 255, .78); font-size: 13px; }
header#top .back:hover, body > header .back:hover { color: #fff; }
:root header#top .btn, :root header#top button, :root body > header .btn, :root body > header button {
  background: transparent; border: 1px solid transparent; color: rgba(255, 255, 255, .78);
  border-radius: 6px; padding: 5px 9px; font-weight: 500;
}
:root header#top .btn:hover, :root header#top button:hover, :root body > header .btn:hover, :root body > header button:hover {
  border-color: rgba(255, 255, 255, .22); color: #fff; background: transparent;
}

/* tabs: a hairline rule with the accent under the one you are on */
.nav { border-bottom: 1px solid var(--line-c); gap: 2px; }
:root .nav button {
  border: 0; background: none; padding: 10px 14px; font-size: 14px; font-weight: 600;
  color: var(--ink3); border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0;
}
.nav button:hover { color: var(--ink2); border-color: transparent; }
.nav button[aria-current="page"], .nav button[aria-selected="true"], .nav button.on {
  color: var(--ink1); border-bottom-color: var(--accent-c); background: none;
}

/* buttons and segmented controls */
:root .btn {
  background: var(--surface); border: 1px solid var(--line-c); border-radius: 7px; padding: 6px 11px;
  font-size: 13px; font-weight: 500; color: var(--ink2);
}
:root .btn:hover { border-color: var(--axis-c); color: var(--ink1); }
:root .btn[aria-pressed="true"], :root .btn.primary { background: var(--navy-c); border-color: var(--navy-c); color: #fff; }
:root[data-theme="dark"] .btn[aria-pressed="true"], :root[data-theme="dark"] .btn.primary { background: var(--ink1); border-color: var(--ink1); color: var(--page); }
.btn.small { padding: 3px 9px; font-size: 12.5px; }
.seg { background: var(--surface); border: 1px solid var(--line-c); border-radius: 8px; padding: 2px; }
.seg .btn, .seg button { border: 0; background: transparent; border-radius: 6px; padding: 5px 11px; font-size: 13px; color: var(--ink2); font-weight: 500; }
.seg .btn[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--navy-c); color: #fff; }
:root[data-theme="dark"] .seg .btn[aria-pressed="true"], :root[data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--ink1); color: var(--page); }
/* Fields are NOT styled here. Several pages hide a real <select> behind a control of their own (absolutely
   positioned, a few pixels wide); giving it a background and a border draws a box over that control. Each page
   styles its own fields, with tokens that now flip. */

/* cards: 12px, a hairline and a soft shadow, with the title inside the body, not on a bar */
:root .panel, :root .card:not(.rui-card) {
  background: var(--surface); border: 1px solid var(--line-c); border-radius: 12px;
  box-shadow: var(--rui-shadow); margin-bottom: 16px;
}
:root .panel .phead { border-bottom: 0; padding: 14px 16px 0; align-items: flex-start; }
:root .panel h2, :root .panel h3 { font-size: 14px; font-weight: 700; letter-spacing: -.005em; color: var(--ink1); }
:root .panel .body { padding: 12px 16px 16px; }

/* KPI tiles */
.kpis { gap: 12px; }
/* a page whose own #kpis is a grid, now filled with the toolkit's own grid of tiles: let the inner one lay them out */
:root #kpis:has(.rui-kpis) { display: block; }
:root .rui-kpis:only-child { margin-bottom: 0; }
:root .tile {
  background: var(--surface); border: 1px solid var(--line-c); border-radius: 12px;
  box-shadow: var(--rui-shadow); padding: 13px 15px 14px;
}
:root .tile .lab, :root .kpi .lab, :root .stat span { font-size: 12.5px; color: var(--ink2); font-weight: 500; text-transform: none; letter-spacing: 0; }
/* Intelligence sets a section heading in DM Mono small caps; the portal's own uppercase labels follow it */
:root .sub-h, :root .h3, :root .f label, :root .lbl {
  font-family: 'DM Mono', ui-monospace, monospace; font-weight: 500; font-size: 10.5px; letter-spacing: .06em; color: var(--ink3);
}
:root .tile .val, :root .kpi .val, :root .stat b { font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
:root .tile .sub, :root .kpi .sub { font-size: 12px; color: var(--ink3); }
.tile .val { font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.tile .sub { font-size: 12px; color: var(--ink3); }

/* tables: mono uppercase heads, hairline rows, numbers lined up */
table.tbl th, table.t th, table.data th {
  font-weight: 500; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink3); border-bottom: 1px solid var(--line-c);
}
table.tbl td, table.t td, table.data td { border-bottom: 1px solid var(--grid-c); font-size: 13px; }
table.tbl tr:last-child td, table.t tr:last-child td { border-bottom: 0; }

/* pills, chips and small notes */
.pill, .chip, .badge {
  border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600;
  background: var(--surface-alt); color: var(--ink2);
}
.pill.clear, .chip.good, .badge.good { background: var(--accent-soft); color: var(--accent-deep); }
.pill.strong { background: var(--accent-soft); color: var(--accent-deep); }
.pill.hint, .chip.warn, .badge.warn { background: var(--warn-soft); color: var(--warn-deep); }
.pill.crit, .chip.bad, .badge.bad { background: var(--crit-soft); color: var(--crit-deep); }
.notice, .caution { background: var(--surface-alt); border: 0; border-radius: 10px; color: var(--ink2); font-size: 13px; line-height: 1.5; }
.empty { color: var(--ink3); font-size: 13px; }
.meta { font-size: 11.5px; color: var(--ink3); letter-spacing: .02em; }


/* ─────────────────────────────────────────────────────────────────────────
   Phones. Every report is read on a phone, so nothing may scroll sideways and
   nothing may be tapped at less than ~40px. Tables keep their own horizontal
   scroll inside their card — that is deliberate, and the page itself stays put.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root header#top, :root body > header { padding: 8px 14px; flex-wrap: wrap; gap: 6px 10px; }
  :root header#top .logo, :root body > header .logo { height: 20px; }
  :root .ins, :root .rsp, :root .sc, :root main { padding-left: 14px !important; padding-right: 14px !important; }
  :root .rui-card > header, :root .panel .phead { padding: 12px 13px 0; }
  :root .rui-card .rui-body, :root .panel .body { padding: 10px 13px 13px; }
  :root .rui-kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 9px; }
  :root .rui-kpi { padding: 11px 12px 12px; }
  :root .rui-kpi .rui-val, :root .tile .val, :root .kpi .val { font-size: 23px; }
  :root .kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important; }
  /* a row of filter buttons scrolls on its own rather than stacking into a wall */
  :root .bar-row, :root .nav, :root .tabs, :root .panel .phead, :root .rui-card > header .rui-ctl {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  :root .bar-row::-webkit-scrollbar, :root .nav::-webkit-scrollbar, :root .phead::-webkit-scrollbar { display: none; }
  :root .bar-row > *, :root .nav button, :root .phead > * { flex: none; }
  /* a segmented control scrolls with its row rather than wrapping its words onto two lines */
  :root .seg { flex-wrap: nowrap; }
  :root .seg button, :root .seg .btn { white-space: nowrap; }
  :root .panel .phead h2 { width: 100%; }
  :root .btn, :root .seg button { min-height: 34px; }
  :root .rui-hb { grid-template-columns: minmax(84px, 42%) minmax(0, 1fr) auto; font-size: 12.5px; }
  :root .rui-sb { grid-template-columns: minmax(78px, 38%) minmax(0, 1fr) 44px; font-size: 12.5px; }
  :root .rui-grid2, :root .grid2 { grid-template-columns: 1fr !important; }
  :root .rui-scroll, :root .table-wrap { -webkit-overflow-scrolling: touch; }
  :root .rui-infobox { width: calc(100vw - 20px); }
}
@media (max-width: 420px) {
  :root .rui-kpis, :root .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  :root .rui-kpi .rui-val, :root .tile .val, :root .kpi .val { font-size: 20px; }
  :root .rui-card > header h3, :root .panel h2 { font-size: 13.5px; }
}
/* nothing anywhere may push the page sideways */
html, body { max-width: 100%; overflow-x: hidden; }


/* ─────────────────────────────────────────────────────────────────────────
   The tints the module stylesheets wrote as fixed hexes. Pointing them at the
   tokens above fixes the dark mode — a hovered or selected row used to stay
   near-white, with its near-white text on top — and leaves light untouched,
   because each token's light value is the hex that was there before.
   ───────────────────────────────────────────────────────────────────────── */
/* Attendance and Schedule: rows, totals, today, the coverage track */
:root .agrid tr:hover td,
:root .agrid td.tot,
:root .agrid.pay tr.d td,
:root .trend tr:hover td,
:root .lane-row:hover,
:root .grid tfoot td,
:root tbody tr:hover { background: var(--row-soft); }
:root .agrid tr.sel td,
:root .agrid td.today,
:root .pcell[data-act="day"]:hover,
:root .grid td.cell.today { background: var(--row-today); }
:root .cov-bar { background: var(--track-soft); }
:root .lane-row { border-bottom-color: var(--line-c); }
:root .adh.good { background: var(--chip-green-bg); color: var(--chip-green-ink); }
:root .adh.low { background: var(--chip-red-bg); color: var(--chip-red-ink); }
:root .pill.bad { background: var(--chip-red-bg); color: var(--chip-red-ink); }
:root .pill.gray { background: var(--chip-grey-bg); color: var(--chip-grey-ink); }

/* Agent activity: the channel chips */
:root .cb-Calling { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
:root .cb-Idle,
:root .cb-Notclockedin,
:root .cb-OTCalling { background: var(--chip-amber-bg); color: var(--chip-amber-ink); }
:root .cb-Off,
:root .cb-Offline,
:root .cb-Unknown,
:root .cb-Unavailable { background: var(--chip-grey-bg); color: var(--chip-grey-ink); }
:root .cb-TL { background: var(--chip-pink-bg); color: var(--chip-pink-ink); }

/* Admin and the portal's own cards */
/* only a field the page has given a visible border gets the dark surface, so a hidden one stays hidden */
:root input:not([type="checkbox"]):not([type="radio"]), :root textarea { color: var(--ink1); }
:root input[type="date"], :root input[type="search"], :root input[type="text"] { background: var(--field-bg); border-color: var(--line-c); }
:root .dirty, :root .dirty td { background: var(--dirty-bg); }
:root .card .mark.lock { background: var(--chip-red-bg); color: var(--crit-c); }
:root .admin .card, :root .wrap .card { background: var(--surface); }


/* The Bookings page keeps its chart palette in a `.viz` scope of its own, which redefined ink, surfaces and series
   colours locally — so a dark mode that comes from the system (no data-theme attribute) never reached it and the
   numbers went dark-on-dark. Pointing that scope at the shared tokens fixes both modes at once and leaves the
   page's own stylesheet alone. */
:root .viz {
  --surface-1: var(--surface); --surface-2: var(--surface-alt); --line: var(--line-c);
  --ink-1: var(--ink1); --ink-2: var(--ink2); --ink-3: var(--ink3);
  --track: var(--grid-c); --tip-bg: var(--navy-c); --tip-ink: #ffffff;
  --good: var(--good-c); --warn: var(--warn-c); --crit: var(--crit-c); --warn-ink: var(--warn-deep);
  --s-call: var(--k2); --s-msg: var(--k1); --seq: var(--k2);
  --s-made: var(--k1); --s-on: var(--k3); --s-show: var(--k1); --s-lost: var(--k4);
  --s-br: var(--k2); --s-sr: var(--k1); --s-rr: var(--k3); --s-neutral: var(--k7);
  --on-call: #ffffff; --on-msg: #06313d;
}


/* Insights draws its factor bars with --s-a; the 95% range behind it and the overall marker were ink at 35%, which
   disappears on a dark surface. */
:root .fbar { background: var(--grid-c); }
:root .fbar u { background: var(--axis-c); opacity: .9; }
:root .fbar b { background: var(--ink2); }


/* The portal's sidebar is navy against a light page by design; in the dark it was a *different* dark from the page,
   which read as a seam. One surface, separated by a hairline instead. (Set here so every page agrees on it.) */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { --sb-bg: #0a0f1c; --sb-bg-hover: #141d33; --sb-border: #232d44; }
}
:root[data-theme="dark"] { --sb-bg: #0a0f1c; --sb-bg-hover: #141d33; --sb-border: #232d44; }