:root {
  color-scheme: light;

  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #f3f4f6;
  --panel-3: #e9ebef;
  --line: #e4e6eb;
  --line-soft: #ebedf1;
  --ink: #0f1420;
  --ink-2: #3f4756;
  --muted: #727a89;

  --accent: #2e6edf;
  --accent-2: #2e6edf;
  --accent-soft: rgba(46, 110, 223, 0.1);
  --accent-line: rgba(46, 110, 223, 0.3);
  --good: #15803d; --good-soft: rgba(21, 128, 61, 0.1);
  --caution: #b45309; --caution-soft: rgba(180, 83, 9, 0.1);
  --concern: #b91c1c; --concern-soft: rgba(185, 28, 28, 0.1);

  /* Chart and status hues: the dataviz light steps, validated against #ffffff.
     `-ink` is the readable step for text; the plain step is for fills only. */
  --blue: #2a78d6;    --blue-soft: rgba(42, 120, 214, 0.12);   --blue-ink: #1f5fa8;
  --orange: #eb6834;  --orange-soft: rgba(235, 104, 52, 0.13); --orange-ink: #b2461f;
  --aqua: #1baf7a;    --aqua-soft: rgba(27, 175, 122, 0.14);   --aqua-ink: #15795a;
  --yellow: #eda100;  --yellow-soft: rgba(237, 161, 0, 0.16);  --yellow-ink: #8a6a00;
  --magenta: #e87ba4; --magenta-soft: rgba(232, 123, 164, 0.16); --magenta-ink: #a83c69;
  --violet: #4a3aa7;  --violet-soft: rgba(74, 58, 167, 0.12);  --violet-ink: #4a3aa7;
  --red: #e34948;     --red-soft: rgba(227, 73, 72, 0.12);     --red-ink: #c23b3b;
  --slate: #64748b;   --slate-soft: rgba(100, 116, 139, 0.12); --slate-ink: #4a5666;

  /* Sequential ramp for attainment; validated ordinal against #ffffff. */

  --ok: var(--aqua-ink);
  --risk: var(--red-ink);
  --risk-soft: var(--red-soft);

  --radius: 12px;
  --radius-sm: 8px;
  --gap: 18px;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(16, 23, 32, 0.05), 0 10px 24px -16px rgba(16, 23, 32, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-lift: 0 2px 4px rgba(16, 23, 32, 0.06), 0 16px 32px -16px rgba(16, 23, 32, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --rail: #0f1420;
  --rail-2: #171d2b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.55 var(--sans);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent-2); }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Shell ---------- */

.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 14px;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.side-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 0; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.brand-text { display: grid; line-height: 1.2; }
.brand-text strong { font-size: 14px; }
.brand-text span { font-size: 11px; color: var(--muted); }

.viewnav { display: grid; gap: 3px; }

.viewnav-tab {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease;
}

.viewnav-tab svg { flex: none; opacity: 0.75; }
.viewnav-tab:hover { background: var(--panel-2); color: var(--ink); }
.viewnav-tab.is-active { background: var(--accent-soft); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent-line); }
.viewnav-tab.is-active svg { color: var(--accent-2); opacity: 1; }
.viewnav-tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.side-foot { margin-top: auto; display: grid; gap: 12px; }

.side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
}

.side-link:hover { background: var(--panel-2); color: var(--ink); }
.side-link svg { opacity: 0.7; }

.side-card {
  padding: 13px;
  border-radius: 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}

.side-card-title { color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }

/* ---------- Topbar ---------- */

.content { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 26px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}


.topbar-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }

.freshness {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 10px;
  margin: 0;
  font-size: 10.5px;
  text-align: right;
}

.freshness dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.freshness dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */

main { padding: 20px 22px; display: block; }

.view { display: none; }
.view.is-active { display: grid; gap: 14px; }

.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }

.kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 8px;
}

.view-head h1 { font-size: 24px; letter-spacing: -0.02em; }
.lede { margin-top: 9px; max-width: 76ch; color: var(--ink-2); font-size: 13.5px; }
.view-actions { display: flex; gap: 8px; align-items: center; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }

/* ---------- Panel ---------- */

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.panel-head h2 { display: flex; align-items: center; font-size: 15px; }
.panel-note { margin-top: 5px; max-width: 80ch; color: var(--muted); font-size: 12px; line-height: 1.55; }
.panel-body { padding: 14px 16px; display: grid; gap: 12px; }

.provenance { color: var(--muted); font-size: 12px; line-height: 1.6; }
.footnote { font-size: 11.5px; line-height: 1.6; }
.muted { color: var(--muted); }

.alert {
  color: var(--red-ink);
  background: var(--red-soft);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 12px;
}

/* ---------- Controls ---------- */

.ghost {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 130ms ease, color 130ms ease, background 130ms ease;
}

.ghost:hover:not(:disabled) { border-color: var(--accent-line); color: var(--ink); background: var(--accent-soft); }
.ghost:disabled { opacity: 0.4; cursor: default; }
.ghost:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.field { display: grid; gap: 5px; min-width: 0; }

.field > span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.field select,
.field input {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 12.5px;
  width: 100%;
  min-width: 0;
  max-width: 230px;
}

.field select {
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.field input[type="search"] { min-width: 190px; }
.field select:focus, .field input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.field select[aria-invalid="true"], .field input[aria-invalid="true"] { border-color: var(--red); }

.why {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: 1px;
}

.why:hover, .why[aria-expanded="true"] { color: var(--accent-2); border-color: var(--accent-line); background: var(--accent-soft); }
.why:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }

.popover {
  position: fixed;
  z-index: 60;
  max-width: 400px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #161c24;
  color: #e6ebf1;
  font-size: 12px;
  line-height: 1.6;
  box-shadow: 0 18px 40px rgba(16, 23, 32, 0.28);
  /* Tile tips are written as a meaning line then Did / So / Not, and a wall of
     prose is what they exist to avoid. */
  white-space: pre-line;
  max-height: 70vh;
  overflow-y: auto;
}

/* ---------- Figures ---------- */

.figures { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }

.figure {
  position: relative;
  padding: 18px 20px;
  display: grid;
  gap: 5px;
  align-content: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.figure::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--figure, var(--accent)); }
.figure h3 { display: flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.figure strong { font-size: 28px; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.figure p { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.figures .figure:nth-child(1) { --figure: var(--violet); }
.figures .figure:nth-child(2) { --figure: var(--magenta); }
.figures .figure:nth-child(3) { --figure: var(--orange); }
.figures .figure:nth-child(4) { --figure: var(--aqua); }
.figures .figure:nth-child(5) { --figure: var(--red); }
.figures .figure:nth-child(6) { --figure: var(--blue); }
.figures .figure:nth-child(1) strong { color: var(--accent-2); }
.figures .figure:nth-child(2) strong { color: var(--magenta-ink); }
.figures .figure:nth-child(3) strong { color: var(--orange-ink); }
.figures .figure:nth-child(4) strong { color: var(--aqua-ink); }
.figures .figure:nth-child(5) strong { color: var(--red-ink); }
.figures .figure:nth-child(6) strong { color: var(--blue-ink); }

/* ---------- Summary strip ---------- */

.summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

.summary-item {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 15px;
  display: grid;
  gap: 3px;
}

.summary-item span { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.summary-item strong { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- Exposure ---------- */

.exposure { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); align-items: start; gap: 26px; }
.exposure-headline { display: grid; gap: 8px; }
.exposure-label { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.exposure-headline > strong { font-size: 42px; font-weight: 600; letter-spacing: -0.04em; color: var(--red-ink); font-variant-numeric: tabular-nums; line-height: 1; }

.leaderboard { display: grid; gap: 8px; }

.leader-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  font-size: 12.5px;
}

.leader-row .rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 600;
}

.leader-row .amount { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--amber-ink); }
.leader-row .muted { font-size: 11px; }

/* ---------- Status grid ---------- */

.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }

.status-card {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 15px 13px 18px;
  display: grid;
  gap: 4px;
  overflow: hidden;
}

.status-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone, var(--slate)); }
.status-card span { font-size: 11px; color: var(--muted); line-height: 1.35; }
.status-card strong { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--tone-ink, var(--ink)); }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.grid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.grid tbody td { border-bottom: 1px solid var(--line-soft); padding: 11px 14px; vertical-align: top; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: var(--panel-2); }
.grid .num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
.grid .empty { text-align: center; color: var(--muted); padding: 34px 14px; }
.payout-table { min-width: 940px; }

.person { display: grid; gap: 2px; }
.person strong { font-weight: 600; word-break: break-word; }
.person span { color: var(--muted); font-size: 11px; line-height: 1.4; }

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pill[data-status], .pill.is-ok, .pill.is-warn {
  border-color: var(--tone);
  background: var(--tone-soft);
  color: var(--tone-ink, var(--tone));
}

.pill.is-ok { --tone: var(--aqua); --tone-soft: var(--aqua-soft); --tone-ink: var(--aqua-ink); }
.pill.is-warn { --tone: var(--red); --tone-soft: var(--red-soft); --tone-ink: var(--red-ink); }
.negative { color: var(--red-ink); }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 12px; color: var(--muted); }

/* ---------- Cards, plan, donut ---------- */

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.bench-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

.team-card, .bench-card {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 9px;
  overflow: hidden;
}

.team-card::before, .bench-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.team-card h3, .bench-card h3 { font-size: 13px; }
.team-line, .bench-metric { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-2); }
.team-line strong, .bench-metric strong { font-variant-numeric: tabular-nums; color: var(--ink); }
.hero-number { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.bar-track { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }



.empty { color: var(--muted); font-size: 12.5px; padding: 18px 0; text-align: center; }

/* ---------- Meaning tones ---------- */

[data-status] { --tone: var(--slate); --tone-soft: var(--slate-soft); --tone-ink: var(--slate-ink); }
[data-status="Accepted"] { --tone: var(--aqua); --tone-soft: var(--aqua-soft); --tone-ink: var(--aqua-ink); }
[data-status="Submitted"] { --tone: var(--blue); --tone-soft: var(--blue-soft); --tone-ink: var(--blue-ink); }
[data-status="Rejected"] { --tone: var(--yellow); --tone-soft: var(--yellow-soft); --tone-ink: var(--yellow-ink); }
[data-status="Failed"] { --tone: var(--orange); --tone-soft: var(--orange-soft); --tone-ink: var(--orange-ink); }
[data-status="Conflicting verdict"] { --tone: var(--magenta); --tone-soft: var(--magenta-soft); --tone-ink: var(--magenta-ink); }
[data-status="Running"] { --tone: var(--violet); --tone-soft: var(--violet-soft); --tone-ink: var(--violet-ink); }
[data-status="Queued"] { --tone: var(--magenta); --tone-soft: var(--magenta-soft); --tone-ink: var(--magenta-ink); }

[data-domain] { --tone: var(--slate); --tone-soft: var(--slate-soft); }
[data-domain="Code"] { --tone: var(--blue); }
[data-domain="General"] { --tone: var(--aqua); }
[data-domain="Health"] { --tone: var(--violet); }
[data-domain="Law"] { --tone: var(--magenta); }
[data-domain="Finance"] { --tone: var(--yellow); }
[data-domain="Business"] { --tone: var(--orange); }

[data-outcome="accepted"] { --tone: var(--aqua); }
[data-outcome="rejected"] { --tone: var(--red); }
[data-outcome="unsubmitted"] { --tone: var(--yellow); }

.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--tone); flex: none; }

/* ---------- Exposure chart ----------
   Two series, so the legend is always present and both segments are directly
   labelled: the aqua/red pair sits in the 6-8 CVD band and needs that
   secondary encoding. */

.exposure-chart { margin: 6px 0 0; display: grid; gap: 15px; }
.exposure-chart figcaption { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.bench-bar { display: grid; gap: 6px; }
.bench-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; }
.bench-bar-head span { color: var(--ink-2); font-weight: 500; }
.bench-bar-head b { font-variant-numeric: tabular-nums; font-weight: 600; }
.bench-bar-foot { font-size: 11px; color: var(--muted); }
.stack { display: flex; gap: 2px; height: 28px; min-width: 2%; }

.seg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 3px;
  padding: 0 8px;
  overflow: hidden;
  cursor: default;
}

.seg:first-child { border-radius: 6px 0 0 6px; }
.seg:last-child { border-radius: 0 6px 6px 0; }
.seg:only-child { border-radius: 6px; }
.seg.is-paid { background: var(--aqua-ink); }
.seg.is-pending { background: var(--amber); }
.seg i { font-style: normal; font-size: 10.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg:hover { filter: brightness(1.12); }

.chart-key { display: flex; flex-wrap: wrap; gap: 15px; font-size: 11.5px; color: var(--ink-2); }
.key-item { display: inline-flex; align-items: center; gap: 7px; }
.key-item::before { content: ""; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.key-item.is-paid::before { background: var(--aqua-ink); }
.key-item.is-pending::before { background: var(--amber); }

/* ---------- Responsive ---------- */

@media (max-width: 1400px) {
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .split { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exposure { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; gap: 14px; overflow-x: auto; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .viewnav { grid-auto-flow: column; gap: 4px; }
  .viewnav-tab { padding: 8px 12px; }
  .viewnav-tab span { display: none; }
  .side-foot { margin: 0; grid-auto-flow: column; align-items: center; }
  .side-card { display: none; }
  .side-link span { display: none; }
}

@media (max-width: 720px) {
  main { padding: 18px 14px 48px; }
  .topbar { padding: 12px 14px; flex-wrap: wrap; }
  .search { flex: 1 1 100%; }
  .view-head h1 { font-size: 25px; }
  .figures { grid-template-columns: 1fr; }
  .field, .field select, .field input, .field input[type="search"] { max-width: none; flex: 1 1 100%; }
  .panel-head, .panel-body { padding: 15px 14px; }
  .summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .popover { max-width: calc(100vw - 28px); }
}




/* ---------- Pipeline timeline ---------- */

.timeline { margin: 0; display: grid; gap: 12px; }
.timeline figcaption { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }

.timeline-plot {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(34px, 1fr);
  align-items: end;
  gap: 8px;
  height: 190px;
  padding-top: 18px;
}

.timeline-day { display: grid; align-content: end; gap: 6px; height: 100%; grid-template-rows: auto 1fr auto; }
.timeline-total { font-size: 10.5px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.timeline-column { display: flex; flex-direction: column-reverse; gap: 2px; align-self: end; width: 100%; border-radius: 6px; overflow: hidden; }
.timeline-seg { display: block; width: 100%; min-height: 2px; background: var(--tone, var(--slate)); cursor: default; }
.timeline-seg:hover { filter: brightness(1.2); }
.timeline-date { font-size: 10px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }

.chart-key .key-item[data-status] i { width: 9px; height: 9px; border-radius: 3px; background: var(--tone); flex: none; }
.chart-key .key-item[data-status] { display: inline-flex; align-items: center; gap: 7px; }
.chart-key .key-item[data-status]::before { content: none; }


/* ---------- Source provenance (PRD C2 / X2) ---------- */

.source-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }

.source-card {
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tone-line, var(--slate));
  border-radius: 13px;
  background: var(--panel-2);
}

.source-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.source-card h3 { font-size: 13.5px; margin-top: 2px; }
.source-card h3 a { text-decoration: none; }
.source-card h3 a:hover { text-decoration: underline; }
.source-kind { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.source-loc { font-size: 11.5px; color: var(--ink-2); word-break: break-all; }

.source-state { font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }

[data-tone="ok"] { --tone-line: var(--aqua); --tone: var(--aqua); --tone-soft: var(--aqua-soft); --tone-ink: var(--aqua-ink); }
[data-tone="snapshot"] { --tone-line: var(--blue); --tone: var(--blue); --tone-soft: var(--blue-soft); --tone-ink: var(--blue-ink); }
[data-tone="pending"] { --tone-line: var(--yellow); --tone: var(--yellow); --tone-soft: var(--yellow-soft); --tone-ink: var(--yellow-ink); }
[data-tone="warn"] { --tone-line: var(--red); --tone: var(--red); --tone-soft: var(--red-soft); --tone-ink: var(--red-ink); }
.pill[data-tone] { border-color: var(--tone); background: var(--tone-soft); color: var(--tone-ink); }

.sourcestrip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sourcestrip-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-2);
  font-size: 11.5px;
  text-decoration: none;
}

.source-chip:hover { border-color: var(--accent-line); color: var(--ink); }
.source-chip.is-flat { opacity: 0.72; cursor: default; }
.chip-state { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tone-ink, var(--muted)); }

/* ---------- Pipeline drill-down (PRD F1) ---------- */

.drill-head { cursor: pointer; }
.drill-head.is-open td { background: var(--panel-2); }
.drill-head td small { display: block; color: var(--red-ink); font-size: 10.5px; }

.drill-toggle {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.drill-head:hover .drill-toggle, .drill-head.is-open .drill-toggle { border-color: var(--accent-line); color: var(--accent-2); }

.drill td { background: var(--panel-2); border-bottom: 1px solid var(--line); }

.drill-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 16px;
  font-size: 12px;
  line-height: 1.55;
}

.drill-grid dt { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.drill-grid dd { margin: 0; color: var(--ink-2); }


/* ---------- Shared date range (PRD X1) ---------- */


.rangeecho {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-2);
}

.rangeecho-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }

.linky {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent-2);
  font-size: 11.5px;
  text-decoration: underline;
  cursor: pointer;
}


/* ---------- Console reconciliation ---------- */

.basis-lede { margin: 0 0 12px; font-size: 13px; color: var(--ink-1); }
.basis-lede b { color: var(--ink); }
.basis-table { font-variant-numeric: tabular-nums; }
.basis-table th[scope="row"] { font-weight: 600; }
.basis-total th, .basis-total td { border-top: 2px solid var(--line); font-weight: 700; }


/* ---------- Workbook tab deep links ---------- */

.source-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 2px; }
.source-tabs-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); margin-right: 2px;
}
.tab-chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 11px; color: var(--ink-1); text-decoration: none; white-space: nowrap;
}
a.tab-chip:hover { border-color: var(--accent-2); color: var(--accent-2); }
.tab-chip.is-flat { color: var(--muted); background: transparent; border-style: dashed; }
.source-alias { color: var(--muted); font-style: italic; }


/* ---------- Bucket explorer ---------- */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 12px; }
.crumb {
  border: 0; background: none; padding: 2px 4px; cursor: pointer;
  font-size: 12px; color: var(--accent-2); border-radius: 4px;
}
.crumb:hover { background: var(--surface-2); }
.crumb-sep { color: var(--muted); font-size: 12px; }

.explorer-grid { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 16px; }
@media (max-width: 860px) { .explorer-grid { grid-template-columns: 1fr; } }

.explorer-heading {
  margin: 0 0 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
.explorer-list { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow: auto; }
.explorer-list .empty { font-size: 12px; color: var(--muted); padding: 4px 0; }
.explorer-dir {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 5px 8px; border-radius: 5px; cursor: pointer;
  font-size: 12px; color: var(--ink-1); word-break: break-all;
}
.explorer-dir::before { content: "\1F4C1"; margin-right: 6px; }
.explorer-dir:hover { background: var(--surface-2); color: var(--ink); }
.explorer-files .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; word-break: break-all; }

/* ---------- Finalisation: evidence, chips, states ---------- */
.figure-card {
  text-align: left;
  cursor: pointer;
  font: inherit;
  border: 1px solid var(--line);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.figure-card:hover,
.figure-card:focus-visible { border-color: var(--accent-2); box-shadow: 0 1px 8px rgba(15, 23, 42, .08); }
.status-card-cue {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.evidence { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; margin: 0; font-size: 12.5px; }
.evidence dt { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.evidence dd { margin: 0; color: var(--ink-1); }
.evidence code { font-size: 11.5px; word-break: break-all; }

.chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.chip-warn { background: #fef3c7; color: #92400e; }

.state { font-weight: 600; }
.state-accepted { color: #047857; }
.state-legacy-accepted { color: #9a3412; }
.state-rejected { color: #b91c1c; }
.state-running { color: #1d4ed8; }
.state-error,
.state-no-QC-decision { color: var(--ink-2); }

.chip-alert { background: #fde2e1; color: #9f2c2b; }
.chip-good { background: #dcf3e4; color: #1d6b3d; }

.taskcell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.taskcell .taskname {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.taskcell .chip { flex: 0 0 auto; margin-left: 0; }
.taskcell { max-width: 330px; }

/* Embedded delivery dashboard: its own page, its own styles, kept isolated. */
.embed {
  display: block;
  width: 100%;
  height: 1400px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

/* ---------- Delivery task audit: share-of-total breakdowns ---------- */

.breakdowns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px 28px;
}
.breakdown { margin: 0; min-width: 0; }
.breakdown figcaption {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.bd-label {
  font-size: 12px;
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-track { height: 8px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.bd-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent-2); }
.bd-value {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  min-width: 2.5rem;
  text-align: right;
}

.state-accepted { color: #047857; }
.state-rejected { color: #b91c1c; }
.state-pending { color: var(--ink-2); }

/* ---------- Delivery manifest, shown only under the Ready filter ---------- */
.manifest-bar {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  background: var(--accent-soft);
}

.manifest-head h3 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
}

.manifest-head .panel-note { margin: 0 0 13px; }

.manifest-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}

.manifest-sizes { display: flex; gap: 6px; }
.manifest-sizes .size-chip { padding: 8px 13px; background: var(--panel); }
.manifest-sizes .size-chip[aria-pressed="true"] {
  border-color: var(--accent-2);
  background: var(--accent-2);
  color: #fff;
}

.manifest-bar .field { min-width: 0; }
.manifest-bar input[type="number"] { width: 92px; }
.manifest-bar input[type="file"] { font-size: 11.5px; max-width: 230px; }

.primary {
  border: 1px solid var(--accent-2);
  background: var(--accent-2);
  color: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 130ms ease;
}

.primary:hover:not(:disabled) { filter: brightness(1.08); }
.primary:disabled { opacity: 0.45; cursor: default; }
.primary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

#manifestSummary { margin: 13px 0 0; }
.chip-info { background: #e5e9fd; color: #3b3f8f; }

/* ---------- The delivered join's unaccounted tasks ---------- */
.linkish {
  border: 0;
  background: none;
  padding: 0 0 0 4px;
  font: inherit;
  color: var(--accent-2);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.linkish:hover { filter: brightness(1.15); }
.linkish:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 3px; }

.unmatched {
  margin: 0 0 18px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-2);
}

.unmatched .panel-note { margin: 0 0 12px; }
.unmatched .grid { font-size: 12.5px; }

/* ---------- Task flags: their own column, short codes ---------- */
/* The task name gets the room now; these are read via hover and the legend. */
.flagcell { white-space: nowrap; }

.flag {
  display: inline-block;
  min-width: 26px;
  margin-right: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
  cursor: help;
  vertical-align: middle;
}

.flag:last-child { margin-right: 0; }
.flag-good  { background: #dcf3e4; color: #1d6b3d; }
.flag-info  { background: #e5e9fd; color: #3b3f8f; }
.flag-warn  { background: #fdf0d5; color: #8a5a10; }
.flag-alert { background: #fde2e1; color: #9f2c2b; }
.flag-flat  { background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); }
.flag-none  { color: var(--muted); }

/* A DUP that opens something.
   The other flags are labels, so they take a help cursor and a title. This one
   is a control: it says how many folders the task sits under and opens them,
   which a title attribute cannot do. It has to read as clickable without
   becoming a second kind of button in the row. */
.flag-btn {
  border: 1px solid currentColor;
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  transition: filter .12s ease, box-shadow .12s ease;
}

/* The count rides on the badge's own colour. Not `background: currentColor`
   with a light `color`: currentColor resolves to the colour set on the SAME
   element, so the pill came out white on white. A translucent wash darkens
   whatever tone the badge already has and works in both themes. */
.flag-btn b {
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgb(0 0 0 / .13);
  color: inherit;
  font-size: 9.5px;
}
.flag-btn:hover { filter: brightness(.94); }
.flag-btn:focus-visible { outline: 2px solid var(--accent, #3b3f8f); outline-offset: 2px; }
.flag-btn.is-open { box-shadow: inset 0 0 0 2px currentColor; }

.dup-panel { padding: 4px 2px 2px; }

.dup-why {
  margin: 0 0 12px;
  max-width: 78ch;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.55;
}

.dup-why code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--panel-2);
  font-size: 11.5px;
}

.dup-grid { font-size: 12px; }
.dup-grid th { white-space: nowrap; }
.dup-grid td { vertical-align: middle; }
.dup-grid code { font-size: 11px; word-break: break-all; }

/* The row you opened it from, so the comparison has an anchor. */
.dup-grid tr.is-self { background: var(--panel-2); }
.dup-grid tr.is-self code { font-weight: 700; }


/* The task column is the one that must never be squeezed. */
.grid td .taskname { max-width: none; }

.flag-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin: 11px 0 0;
  font-size: 11.5px;
  color: var(--ink-2);
}

.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .flag { cursor: default; margin-right: 0; }


/* ---------- Line charts (PRD C6) ---------- */

.linechart { margin: 0; display: grid; gap: 12px; }
/* Axis labels sit outside the scaling plot at a fixed size. */
.linechart-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 210px auto; column-gap: 10px; }
.linechart-yaxis { grid-column: 1; grid-row: 1; position: relative; min-width: 34px; }
.linechart-yaxis span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.linechart-plot { grid-column: 2; grid-row: 1; position: relative; }
.linechart-plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.linechart-xaxis { grid-column: 2; grid-row: 2; position: relative; height: 20px; margin-top: 6px; }
.linechart-xaxis span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.linechart .grid { stroke: var(--line-soft); stroke-width: 1; }
.linechart .spark { stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.linechart .spark.is-quiet { stroke-width: 1; opacity: 0.7; }
.spark-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; cursor: help; transition: opacity 0.12s ease; }
.linechart-plot:hover .spark-dot { opacity: 1; }
.chart-key .key-item[data-series]::before { background: var(--tone); }
.chart-key .key-item.is-quiet { color: var(--muted); opacity: 0.75; }
.chart-key .key-item.is-quiet::before { background: var(--line); }

/* ---------- Shared scope chain ---------- */

.funnel { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.funnel li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.funnel li:last-child { border-bottom: 0; }
.funnel-count { text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.funnel-step { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ---------- Compact fact strip ---------- */

.peakstrip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 18px; font-size: 11.5px; color: var(--ink-2); }
.peakstrip-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.peakstrip-item { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.peakstrip-top { display: inline-flex; align-items: baseline; gap: 5px; }
.peakstrip-item i { width: 7px; height: 7px; border-radius: 2px; align-self: center; flex: none; }
.peakstrip-item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.peakstrip-item small { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* ---------- Source attribution, quietest element on the page (PRD X2) ---------- */

.figure-src { margin: 6px 0 0; font-size: 10px; line-height: 1.35; color: var(--muted); opacity: 0.85;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
.figure-src.is-panel { margin-top: 6px; }
.figure-src-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.figure-src-label::after { content: ':'; }
.figure-src-sep { color: var(--line); }
.figure-srclink { color: inherit; text-decoration: none; }
.figure-srclink:hover { color: var(--accent); text-decoration: underline; }
.figure-srclink.is-flat { cursor: help; }

@media (prefers-reduced-motion: reduce) { .spark-dot { transition: none; } }

/* ---------- Overview scopes (PRD C1) ---------- */
/* One page, two scopes. They read different sources and the date range reaches
   only the first, so the seam is stated rather than implied. */

/* ---------- Overview: executive grid ---------- */
/* Overview grid: four-card headline rows, equal halves below. */
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 -4px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.eyebrow span { font-weight: 400; letter-spacing: 0.01em; text-transform: none; font-size: 11.5px; opacity: 0.85; }
.eyebrow span:not(:empty)::before { content: '\00b7'; margin-right: 8px; }

.kpirow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.kpi {
  position: relative; display: grid; gap: 2px; align-content: start;
  padding: 15px 16px 14px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line);
}
.kpi::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--kpi-tone, var(--slate));
}
.kpi[data-tone="violet"]  { --kpi-tone: var(--violet); }
.kpi[data-tone="aqua"]    { --kpi-tone: var(--aqua); }
.kpi[data-tone="blue"]    { --kpi-tone: var(--blue); }
.kpi[data-tone="magenta"] { --kpi-tone: var(--magenta); }
.kpi[data-tone="yellow"]  { --kpi-tone: var(--yellow); }
.kpi[data-tone="red"]     { --kpi-tone: var(--red); }
.kpi[data-tone="slate"]   { --kpi-tone: var(--slate); }

.kpi h3 {
  display: flex; align-items: center; gap: 2px; margin: 0;
  font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.kpi > strong {
  font-size: 38px; font-weight: 600; letter-spacing: -0.04em;
  line-height: 1.05; font-variant-numeric: tabular-nums;
  color: var(--kpi-tone, var(--ink));
}
.kpi-note { margin: 0; font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.kpi .figure-src { margin-top: 6px; }

/* Exposure: bars and the leaderboard as a 7/5 split, both full height. */
.panel-body.exposure { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 20px; }

@media (max-width: 1250px) { .kpirow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .kpirow { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Compact date range in the page header ---------- */
.view-head { align-items: center; }
.daterange { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.daterange-label { display: flex; align-items: center; gap: 2px; margin-right: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.daterange select, .daterange input { height: 34px; padding: 0 10px; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.daterange select { padding-right: 28px; }
.daterange input[type="date"] { min-width: 138px; }
.daterange select:focus, .daterange input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.daterange input[aria-invalid="true"] { border-color: var(--red); }
.daterange-sep { color: var(--muted); }
.daterange .ghost { height: 34px; }


/* ---------- Visual system ---------- */

/* Rail */
.viewnav-tab { color: #aeb7c6; }
.viewnav-tab:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.viewnav-tab.is-active { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.viewnav-tab.is-active svg { color: #a793ff; }
.side-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); color: #8b95a7; }
.side-card-title { color: #c9d1dd; }

/* Headline cards: the one raised layer on the page */
.kpi { padding: 16px 16px 14px; border-radius: var(--radius); box-shadow: var(--shadow); gap: 8px; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kpi::before { inset: 0; height: auto; border-radius: 0; background: radial-gradient(120px 80px at 100% 0%, color-mix(in srgb, var(--kpi-tone) 16%, transparent), transparent 70%); pointer-events: none; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-chip { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--kpi-tone) 14%, var(--panel)); color: var(--kpi-tone); }
.kpi-chip svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.kpi > strong { font-size: 40px; font-weight: 650; letter-spacing: -0.045em; color: var(--ink); }
.kpi[data-tone="red"] > strong { color: var(--red); }
.kpi .figure-src { opacity: 0.9; }

/* Panels sit flatter than the cards */
.panel { box-shadow: 0 1px 2px rgba(16, 23, 32, 0.04); }
.subhead { margin: 0 0 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.summary-item, .bench-card { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.bench-card { border-top-width: 2px; }

/* Payout balance */
.panel-body.exposure { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.exposure-chart { margin: 0; gap: 14px; }
.leaderboard { gap: 8px; }
.leader-row { grid-template-columns: 22px minmax(0, 1fr) 90px auto; align-items: center; gap: 12px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-soft); }
.leader-row .rank { width: 22px; height: 22px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; }
.leader-row .person strong { display: block; font-size: 12.5px; }
.leader-row .person span { font-size: 11px; color: var(--muted); }
.leader-row .amount { font-weight: 650; color: var(--amber-ink); }
.bar-fill { background: var(--red-ink); }

/* Chart */
.linechart .spark-area { opacity: 0.12; }
.linechart .grid { stroke: var(--line-soft); }

/* Sources */
.source-card { background: var(--panel-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) { .kpi { transition: none; } }


/* ---------- Payouts ---------- */
.view-head .sourcestrip { justify-content: flex-end; }
.kpirow .kpi-note { color: var(--muted); }
.grid thead th { font-size: 10px; letter-spacing: 0.07em; }
.grid tbody td { padding: 10px 14px; vertical-align: middle; }
.grid td.negative { color: var(--red); font-weight: 600; }
.pill { font-size: 10.5px; }
.pager { padding-top: 4px; }
.pager .ghost { height: 30px; padding: 0 12px; }


/* ---------- Delivery ---------- */
.team-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.team-card { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px; }
.team-card .hero-number { font-size: 28px; letter-spacing: -0.035em; line-height: 1.05; }
.team-sub { display: block; font-size: 11px; color: var(--muted); margin: 0 0 10px; }
.team-line { padding: 3px 0; }
.team-line b { font-variant-numeric: tabular-nums; }
.team-line b.is-owed { color: var(--amber-ink); font-weight: 600; }

.plan-grid { display: grid; gap: 18px; }
.plan-bench { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto 150px; column-gap: 8px; }
.plan-head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.plan-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.plan-head span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding-bottom: 18px; }
.plan-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; border-left: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 0 6px 18px; position: relative; }
.plan-day { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; position: relative; cursor: help; }
.plan-bars { position: relative; height: 100%; }
.plan-bars i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 5px 5px 0 0; }
.plan-planned { background: var(--accent-soft); border: 1px solid var(--accent-line); border-bottom: 0; }
.plan-actual { left: 18% !important; right: 18% !important; background: linear-gradient(180deg, #1fbf88, var(--aqua)); box-shadow: 0 2px 6px -2px rgba(18, 168, 120, 0.6); }
.plan-x { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; text-align: center; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.key-item.is-plan::before { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.key-item.is-actual::before { background: var(--aqua); }


/* ---------- Finalisation ---------- */
.statusline { margin: -4px 0 0; font-size: 11.5px; color: var(--muted); }

/* The filters sit above the figures they drive, so they need to read as a
   control surface rather than as one more panel of results. Lighter fill and a
   softer border than .panel: it is the thing you set, not a thing you read. */
.filterbar {
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.filterbar-lead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.filterbar-lead span {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11.5px;
  color: var(--muted);
}

/* Opening "More" from the top of the tab drops the panel over the figures
   below, which carry their own stacking contexts. */
.filterbar .morefilters-body { z-index: 40; }

/* A grid rather than the flex row the toolbar uses inside a panel head: at full
   width the controls are the widest thing on the tab, and flex-wrap left the
   last line ragged against everything below it. Scoped to .filterbar so the
   toolbars on the other tabs keep their own layout. */
.filterbar .toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}

/* The shared rules size these to their content; in a grid track that is the
   child overflowing its column instead of filling it. */
.filterbar .field select,
.filterbar .field input { width: 100%; min-width: 0; }
/* Search takes two tracks: it is free text, and at one track the placeholder
   that says which fields it searches was being cut off. */
.filterbar .toolbar > label:first-child { grid-column: span 2; }

/* These are buttons, not fields - stretching them to a full track made them
   read as three more empty filters. */
.filterbar .morefilters,
.filterbar #tReset,
.filterbar #tExport { justify-self: start; }

/* More is styled as a fixed 34px summary elsewhere; sat next to Clear and
   Export it was 3px shorter than its neighbours. Take the ghost padding and
   let the height follow, so the three pills match whatever the type does. */
.filterbar .morefilters > summary { height: auto; padding: 8px 15px; }
.view-actions .sourcestrip { justify-content: flex-end; }
.kpirow-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-button { text-align: left; font: inherit; cursor: pointer; }
.kpi-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi-button[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--accent-line); }
.kpi-cue { font-size: 10px; color: var(--accent); font-weight: 500; }
.flagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.flagbtn { display: inline-flex; align-items: baseline; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; font: inherit; font-size: 12px; color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.flagbtn b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.flagbtn:hover { border-color: var(--accent-line); }
.flagbtn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); }

.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chain li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 0; }
.chain-count { text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink-2); }
.chain li.is-final .chain-count { color: var(--ink); font-weight: 700; }
.chain-body { display: grid; gap: 5px; }
.chain-step { font-size: 12.5px; color: var(--ink-2); }
.chain-bar { display: block; height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.chain-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #7b5cff); }
.chain li.is-final .chain-bar i { background: linear-gradient(90deg, #1fbf88, var(--aqua)); }

.daybars { margin: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; height: 190px; }
.daybars-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding-bottom: 18px; }
.daybars-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; align-items: end; border-left: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 0 6px 18px; }
.daybar { position: relative; height: 100%; display: flex; align-items: flex-end; }
.daybar-stack { display: flex; flex-direction: column-reverse; width: 100%; height: var(--h); min-height: 2px; border-radius: 5px 5px 0 0; overflow: hidden; cursor: help; }
.daybar-stack i { display: block; min-height: 1px; }
.daybar-stack:hover { filter: brightness(1.06); }
.daybar-x { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; text-align: center; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.key-button { cursor: pointer; font: inherit; background: none; border: 1px solid transparent; border-radius: 999px; padding: 2px 8px 2px 6px; }
.key-button:hover { border-color: var(--line); }
.key-button.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); }

.morefilters { position: relative; align-self: end; }
.morefilters > summary { list-style: none; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; cursor: pointer; }
.morefilters > summary::-webkit-details-marker { display: none; }
.morefilters[open] > summary { border-color: var(--accent-line); }
.morefilters-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 10px; min-width: 260px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); }

@media (max-width: 1250px) { .kpirow-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .kpirow-5 { grid-template-columns: minmax(0, 1fr); } }



/* ---------- Table paging ---------- */
.pager { justify-content: flex-end; gap: 10px; }
.pagesize { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 11px; color: var(--muted); }
.pagesize span { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 10px; }
.pagesize select { height: 30px; padding: 0 26px 0 9px; font: inherit; font-size: 12px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.grid td.serial { color: var(--muted); font-size: 11.5px; width: 44px; }


/* ---------- Overview: motion, range control, expandable cards, ranked bars ---------- */
:root { --ease: cubic-bezier(.2, .8, .2, 1); --t-fast: 160ms; --t-med: 240ms; --t-slow: 320ms; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rangectl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rangectl-label { display: flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px; }
.segbtn { height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.segbtn:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.segbtn:active { transform: translateY(1px); }
.segbtn.is-on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(16,23,32,.08), 0 0 0 1px var(--line); font-weight: 600; }
.segbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rangepop { position: relative; }
.rangepop > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.rangepop > summary::-webkit-details-marker { display: none; }
.rangepop > summary svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.rangepop.is-set > summary { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.rangepop[open] > summary { border-color: var(--accent-line); }
.rangepop-body { position: absolute; right: 0; top: calc(100% + 8px); z-index: 25; display: flex; align-items: end; gap: 10px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); animation: pop var(--t-med) var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.kpi { cursor: pointer; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.kpi:hover .figure-src { opacity: 1; }
.kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi[aria-expanded="true"] { border-color: var(--accent-line); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--accent-line); transform: none; }
.kpi > strong { transition: transform var(--t-med) var(--ease); transform-origin: left center; }
.kpi:hover > strong { transform: translateX(2px); }
.kpi-caret { position: absolute; right: 14px; bottom: 12px; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); opacity: .55; transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease); }
.kpi:hover .kpi-caret { opacity: 1; }
.kpi[aria-expanded="true"] .kpi-caret { transform: rotate(-135deg) translate(-2px, -2px); }
/* Height animates through grid rows, so no measuring and no jump. */
.kpi-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease); }
[data-expand][aria-expanded="true"] > .kpi-more, .kpi[aria-expanded="true"] .kpi-more { grid-template-rows: 1fr; }
.kpi-detail { overflow: hidden; display: grid; gap: 5px; min-height: 0; opacity: 0; transform: translateY(-4px); transition: opacity var(--t-med) var(--ease) 60ms, transform var(--t-med) var(--ease) 60ms; }
[data-expand][aria-expanded="true"] .kpi-detail { opacity: 1; transform: none; padding-top: 10px; margin-top: 4px; border-top: 1px dashed var(--line); }
.kpi-detail div { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--ink-2); }
.kpi-detail div span { min-width: 0; }
.kpi-detail div b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

.rankbars { display: grid; gap: 9px; }
.rankbars-total { margin: 0 0 4px; font-size: 11.5px; color: var(--muted); }
.rankbars-total b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rankbar { display: grid; grid-template-columns: 86px minmax(0, 1fr) 56px 40px; align-items: center; gap: 10px; font-size: 12px; cursor: help; }
.rankbar-label { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rankbar-track { height: 10px; border-radius: 5px; background: var(--panel-3); overflow: hidden; }
.rankbar-track i { display: block; height: 100%; border-radius: 5px; transform-origin: left; animation: grow var(--t-slow) var(--ease) both; transition: filter var(--t-fast) var(--ease); }
.rankbar:hover .rankbar-track i { filter: brightness(1.1); }
.rankbar-count { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rankbar-pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.panel { transition: box-shadow var(--t-med) var(--ease); }
.panel:hover { box-shadow: var(--shadow); }
.summary-item, .bench-card, .leader-row, .source-card { transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.summary-item:hover, .bench-card:hover, .leader-row:hover, .source-card:hover { transform: translateY(-1px); border-color: var(--line); }
.bench-stack { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .kpi, .kpi > strong, .kpi-caret, .kpi-more, .kpi-detail, .segbtn, .panel, .summary-item, .bench-card, .leader-row, .source-card { transition: none !important; }
  .rankbar-track i, .rangepop-body { animation: none !important; }
}

/* Only the opened card grows; date inputs keep a usable width in the popover. */
.kpirow { align-items: start; }
.rangepop-body .field { display: grid; gap: 5px; }
.rangepop-body input[type="date"] { min-width: 150px; height: 34px; padding: 0 10px; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.rangepop-body input[type="date"]:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.rangepop-body input[aria-invalid="true"] { border-color: var(--red); }
.rangepop-body .ghost { height: 34px; }


/* ---------- Fill the two-column panels; source rows ---------- */
.split > .panel { display: flex; flex-direction: column; }
.split > .panel > .panel-body { flex: 1; }
.rankbars { height: 100%; align-content: space-between; }
.panel-body.exposure { align-items: stretch; }
.panel-body.exposure > div { display: flex; flex-direction: column; }
.panel-body.exposure .exposure-chart { flex: 1; display: grid; align-content: space-evenly; gap: 10px; }

.srcrows { display: grid; gap: 6px; }
.srcrow { position: relative; padding: 10px 40px 10px 12px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--slate); cursor: pointer; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.srcrow:hover { background: var(--panel); border-color: var(--line); transform: translateX(2px); }
.srcrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.srcrow[aria-expanded="true"] { background: var(--panel); border-color: var(--accent-line); cursor: default; }
.srcrow-detail { padding-right: 4px; }
.srcrow[aria-expanded="true"] .srcrow-detail { margin-top: 8px; }
.srcrow[data-tone="ok"] { border-left-color: var(--aqua); }
.srcrow[data-tone="snapshot"] { border-left-color: var(--blue); }
.srcrow[data-tone="warn"] { border-left-color: var(--red); }
.srcrow[data-tone="pending"] { border-left-color: var(--yellow); }
.srcrow-head { display: grid; grid-template-columns: 92px minmax(0, 1.2fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; font-size: 12.5px; }
.srcrow-kind { white-space: nowrap; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.srcrow-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srcrow-name a { color: var(--accent); text-decoration: none; }
.srcrow-name a:hover { text-decoration: underline; }
.srcrow-loc { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srcrow .kpi-caret { right: 16px; bottom: auto; top: 50%; margin-top: -6px; }
.srcrow[aria-expanded="true"] .kpi-caret { transform: rotate(-135deg) translate(-2px, -2px); }
.srcrow-detail > div:not(.source-tabs) { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: start; }
.srcrow-detail > div:not(.source-tabs) > span { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.srcrow-detail > div:not(.source-tabs) > b { font-weight: 400; color: var(--ink-2); white-space: normal; line-height: 1.5; }
.srcrow-detail .source-tabs { justify-content: flex-start; gap: 6px; margin: 4px 0 0; padding-top: 8px; border-top: 1px dashed var(--line-soft); }
.srcrow-detail .source-tabs-label { white-space: nowrap; margin-right: 8px; }
@media (max-width: 900px) { .srcrow-head { grid-template-columns: 1fr auto; } .srcrow-kind, .srcrow-loc { display: none; } }

/* ---------- Overview: motion and interaction ---------- */
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ring { from { stroke-dasharray: 0 100; } }
@keyframes sheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(91,63,214,.45); } 60% { box-shadow: 0 0 0 7px rgba(91,63,214,0); } }

.summary-item, .bench-card, .leader-row, .bench-bar, .rankbar, .settle { animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }

/* KPI cards: a light sweep on hover */
.kpi { position: relative; }
.kpi::after { content: ""; position: absolute; inset: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-120%) skewX(-18deg); pointer-events: none; }
.kpi:hover::after { animation: sheen .9s var(--ease) 1; }

/* Where the work sits: tiles */
.summary-item { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 12px 14px; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.summary-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.summary-item[data-tone="aqua"]::before, .summary-item[data-tone="blue"]::before, .summary-item[data-tone="yellow"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--tone-bar, var(--slate)); opacity: .7; }
.summary-item[data-tone="aqua"] { --tone-bar: var(--aqua); }
.summary-item[data-tone="blue"] { --tone-bar: var(--blue); }
.summary-item[data-tone="yellow"] { --tone-bar: var(--yellow); }
.tile-share { display: grid; gap: 4px; }
.tile-share i { display: block; height: 4px; border-radius: 2px; background: var(--panel-3); position: relative; overflow: hidden; }
.tile-share i::after { content: ""; position: absolute; inset: 0; width: calc(var(--pct) * 1%); background: var(--tone-bar, var(--accent)); border-radius: 2px; transform-origin: left; animation: grow var(--t-slow) var(--ease) both; }
.tile-share em { font-style: normal; font-size: 10.5px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* Current evaluations: rows respond to hover and can be picked */
.rankbar { padding: 4px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; transition: background var(--t-fast) var(--ease), opacity var(--t-med) var(--ease), transform var(--t-fast) var(--ease); }
.rankbar:hover, .rankbar:focus-visible { background: var(--panel-2); transform: translateX(2px); }
.rankbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rankbar-track i { background: var(--c); animation-delay: calc(var(--i, 0) * 60ms); }
.rankbar:hover .rankbar-track i, .rankbar[aria-pressed="true"] .rankbar-track i { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }
.rankbar[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 10%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.rankbar[aria-pressed="true"] .rankbar-label { color: var(--ink); font-weight: 600; }
.rankbars.has-focus .rankbar:not([aria-pressed="true"]) { opacity: .45; }
.rankbars.has-focus .rankbar:not([aria-pressed="true"]):hover { opacity: .85; }
.rankbar-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); vertical-align: 1px; }
.rankbars-hint { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }

/* Bench podium */
.bench-card { position: relative; display: grid; gap: 8px; padding: 12px 14px 12px; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.bench-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.bench-card.bench-rank-1 { border-top-color: #d4a72c; }
.bench-card.bench-rank-2 { border-top-color: #9aa5b5; }
.bench-card.bench-rank-3 { border-top-color: #c58b5a; }
.bench-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bench-head h3 { margin: 0; }
.medal { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; background: var(--slate); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 1px 2px rgba(16,23,32,.15); }
.medal-1 { background: linear-gradient(160deg, #f3cf5c, #c9961a); color: #4a3600; }
.medal-2 { background: linear-gradient(160deg, #d9dee6, #98a3b3); color: #2c3441; }
.medal-3 { background: linear-gradient(160deg, #e0a97e, #b3743f); color: #3f2510; }
.bench-ring { display: flex; align-items: center; gap: 10px; }
.bench-ring svg { width: 46px; height: 46px; transform: rotate(-90deg); flex: none; }
.bench-ring .ring-bg { fill: none; stroke: var(--panel-3); stroke-width: 3.6; }
.bench-ring .ring-fg { fill: none; stroke: var(--aqua); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: calc(var(--pct) * 1) 100; animation: ring 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); transition: stroke-dasharray var(--t-slow) var(--ease); }
.bench-ring div { display: grid; line-height: 1.1; }
.bench-ring b { font-size: 18px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bench-ring span { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bench-metric.is-focus { padding: 6px 8px; margin: 2px -8px 0; border-radius: 8px; background: color-mix(in srgb, var(--c) 10%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.bench-metric.is-focus em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 6px; }
.bench-mix { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.mix-seg { display: block; min-width: 3px; background: var(--c); cursor: pointer; transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 200ms); transition: filter var(--t-fast) var(--ease), opacity var(--t-med) var(--ease), flex-grow var(--t-med) var(--ease); }
.mix-seg:hover, .mix-seg.is-focus { filter: brightness(1.12); }
.bench-stack.has-focus .mix-seg:not(.is-focus) { opacity: .3; }
.mix-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Payout balance */
.settle { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-soft); margin-bottom: 4px; }
.settle-head { display: flex; justify-content: space-between; align-items: baseline; }
.settle-head span { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.settle-head b { font-size: 22px; font-weight: 650; letter-spacing: -.03em; color: var(--aqua-ink); font-variant-numeric: tabular-nums; }
.settle-track { position: relative; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--amber) 28%, var(--panel-3)); overflow: visible; }
.settle-track i { position: absolute; inset: 0; width: calc(var(--pct) * 1%); border-radius: 5px; background: linear-gradient(90deg, var(--aqua-ink), var(--aqua)); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; }
.settle-track em { position: absolute; top: 50%; left: calc(var(--pct) * 1%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3px solid var(--aqua-ink); animation: pulse-dot 2.2s ease-out infinite; }
.settle-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.stack .seg { transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); transition: filter var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), opacity var(--t-med) var(--ease); }
.bench-bar { padding: 6px 8px; margin: 0 -8px; border-radius: 8px; transition: background var(--t-fast) var(--ease); }
.bench-bar.is-linked { background: var(--panel-2); }
.bench-bar.is-linked .seg { box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 2px 8px rgba(16,23,32,.18); }
.leader-row { cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.leader-row:hover, .leader-row.is-linked, .leader-row:focus-visible { transform: translateX(3px); border-color: var(--accent-line); background: var(--panel); box-shadow: var(--shadow); }
.leader-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.leader-row .rank.medal { border-radius: 50%; }
.leader-row .bar-fill { transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
.leader-row .amount { transition: transform var(--t-fast) var(--ease); }
.leader-row:hover .amount { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .summary-item, .bench-card, .leader-row, .bench-bar, .rankbar, .settle, .tile-share i::after, .ring-fg, .mix-seg, .settle-track i, .stack .seg, .leader-row .bar-fill, .rankbar-track i { animation: none !important; }
  .settle-track em { animation: none; }
  .kpi:hover::after { animation: none; }
}
.leader-row .rank.medal-1 { background: linear-gradient(160deg, #f3cf5c, #c9961a); color: #4a3600; }
.leader-row .rank.medal-2 { background: linear-gradient(160deg, #d9dee6, #98a3b3); color: #2c3441; }
.leader-row .rank.medal-3 { background: linear-gradient(160deg, #e0a97e, #b3743f); color: #3f2510; }
.rankbar { grid-template-columns: 124px minmax(0, 1fr) 56px 40px; }

/* ---------- Delivery: race lanes and daily bars ---------- */
.plan-bench { grid-template-rows: auto auto 150px; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.plan-head span b { font-weight: 600; color: var(--ink); }
.lane { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; gap: 8px; margin: 0 0 14px; }
.lane-track { position: relative; height: 14px; border-radius: 7px; background: repeating-linear-gradient(90deg, var(--panel-3) 0 10px, var(--panel-2) 10px 20px); }
.lane-fill { position: absolute; inset: 0; width: calc(var(--pct) * 1%); min-width: 6px; border-radius: 7px; background: linear-gradient(90deg, #2f7dd8, var(--aqua)); transform-origin: left; animation: grow 1.1s var(--ease) both; animation-delay: 200ms; box-shadow: 0 2px 8px -2px rgba(27,175,122,.6); }
.lane-runner { position: absolute; top: 50%; left: max(calc(var(--pct) * 1%), 6px); width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--aqua-ink); transform: translate(-50%, -50%); animation: runner 1.6s ease-in-out infinite; box-shadow: 0 0 0 4px var(--aqua-soft); }
.lane-flag svg { width: 22px; height: 22px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; }
.plan-day { border-radius: 6px 6px 0 0; transition: background var(--t-fast) var(--ease); }
.plan-day:hover { background: var(--panel-2); }
.plan-day .plan-bars i { transform-origin: bottom; animation: grow-y var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms + 150ms); }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.plan-val { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 2px; text-align: center; font-size: 10px; font-weight: 700; color: var(--aqua-ink); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.plan-day:hover .plan-val, .plan-day.is-hit .plan-val { opacity: 1; transform: none; }
.plan-day.is-today .plan-x { color: var(--accent); font-weight: 700; }
.plan-day.is-today::before { content: "today"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.plan-day.is-today .plan-bars { box-shadow: inset 0 0 0 1px var(--accent-line); border-radius: 6px 6px 0 0; background: var(--accent-soft); }
.plan-day.is-future .plan-planned { background: repeating-linear-gradient(135deg, var(--accent-soft) 0 4px, transparent 4px 8px); }
.plan-day.is-future .plan-x { opacity: .6; }
.plan-day.is-hit .plan-actual { box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(27,175,122,.7); }

/* ---------- Delivery: team podium ---------- */
.team-card { position: relative; cursor: pointer; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.team-card:hover, .team-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.team-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.team-card::before { display: none; }
.team-card.is-champion { border-color: transparent; background: linear-gradient(var(--panel-2), var(--panel-2)) padding-box, conic-gradient(from var(--angle, 0deg), #f3cf5c, #5b3fd6, #1baf7a, #f3cf5c) border-box; border: 2px solid transparent; }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.team-card.is-champion { animation: fade-up var(--t-slow) var(--ease) both, glow-spin 4s linear infinite; }
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-head h3 { margin: 0; }
.medal-4 { background: var(--panel-3); color: var(--muted); box-shadow: none; }
.team-race { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; margin: 0 0 8px; }
.team-race i { display: block; height: 100%; width: calc(var(--pct) * 1%); border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 200ms); }
.team-settle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-soft); font-size: 11px; color: var(--muted); }
.team-settle i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--red) 20%, var(--panel-3)); overflow: hidden; }
.team-settle em { display: block; height: 100%; width: calc(var(--pct) * 1%); background: var(--aqua); border-radius: 3px; transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: 350ms; }
.team-settle b { font-weight: 650; color: var(--aqua-ink); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) { .mission { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mission { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .plan-bench, .lane-fill, .lane-runner, .plan-day .plan-bars i, .team-card, .team-race i, .team-settle em { animation: none !important; }
}

/* ---------- Delivery: audit figures ---------- */
#auditFigures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 14px; }
#auditFigures .kpi { animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); text-align: left; font: inherit; }
#auditFigures .kpi-button { border-width: 1px; }
#auditFigures .kpi-button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent-line), var(--shadow-lift); transform: translateY(-2px); }
#auditFigures .kpi-static { cursor: default; }
#auditFigures .kpi-static:hover { transform: none; }
#auditFigures .kpi > strong { font-size: 30px; }
#auditFigures .tile-share i::after { background: var(--tone-bar, var(--accent)); }
#auditFigures .kpi[data-tone="aqua"] { --tone-bar: var(--aqua); } #auditFigures .kpi[data-tone="red"] { --tone-bar: var(--red); }
#auditFigures .kpi[data-tone="yellow"] { --tone-bar: var(--yellow); } #auditFigures .kpi[data-tone="blue"] { --tone-bar: var(--blue); }
#auditFigures .kpi[data-tone="violet"] { --tone-bar: var(--violet); } #auditFigures .kpi[data-tone="slate"] { --tone-bar: var(--slate); }
.kpi-cue { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); opacity: 0; transform: translateY(2px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.kpi-button:hover .kpi-cue, .kpi-button[aria-pressed="true"] .kpi-cue { opacity: 1; transform: none; }

/* ---------- Delivery: composition ---------- */
.lens .segbtn { font-size: 11.5px; }
.panel-body.comp { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
.comp .subhead { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.comp .subhead em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.waffle { display: grid; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 3px; padding: 10px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-soft); }
.sq { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--c); cursor: pointer; animation: pop .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 8ms); transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.sq:hover, .sq:focus-visible { transform: scale(1.35); filter: brightness(1.1); box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(16,23,32,.25); z-index: 1; position: relative; outline: none; }
.vbar { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; min-width: 0; }
.vbar i { display: block; min-width: 2px; transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); transition: filter var(--t-fast) var(--ease); }
.vbar i:hover { filter: brightness(1.15); }
.is-accepted { background: var(--aqua); } .is-rejected { background: var(--red); } .is-pending { background: var(--yellow); }

.glm-dots { display: inline-flex; align-items: center; gap: 3px; }
.glm-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line); }
.glm-dots i.is-on { background: var(--accent); box-shadow: none; }
.glm-dots b { margin-left: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Delivery: task inventory ---------- */
.chips-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chipbtn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 10px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--ink); font: inherit; font-size: 11.5px; cursor: pointer; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); animation: pop .35s var(--ease) both; }
.chipbtn span { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.chipbtn i { font-style: normal; color: var(--muted); font-size: 13px; line-height: 1; }
.chipbtn:hover { background: color-mix(in srgb, var(--accent) 18%, var(--panel)); transform: translateY(-1px); }
.chipbtn:hover i { color: var(--red-ink); }
.chipbtn.is-clear { background: transparent; border-color: var(--line); color: var(--ink-2); }
.chips-empty { font-size: 11.5px; color: var(--muted); }
.chips-row .footnote { margin: 0; }
.inv thead th { padding-top: 6px; padding-bottom: 6px; }
.inv .sort { border: 0; background: transparent; padding: 0; font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.inv .sort::after { content: "\2195"; font-size: 10px; opacity: .35; }
.inv .sort:hover { color: var(--ink); }
.inv .sort.is-on { color: var(--accent); }
.inv .sort.is-on[data-dir="asc"]::after { content: "\2191"; opacity: 1; }
.inv .sort.is-on[data-dir="desc"]::after { content: "\2193"; opacity: 1; }
.inv .drill-head { animation: fade-up var(--t-med) var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); transition: background var(--t-fast) var(--ease); }
.inv .drill-head:hover td { background: var(--panel-2); }
.inv .taskcell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.inv .taskname { max-width: 280px; }
.inv .flag-warn { background: var(--yellow-soft); color: var(--yellow-ink); }
.batch-chip { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--panel-3); font-size: 11px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.cat i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
.diff { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--panel)); }
.who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.who .avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 700; font-style: normal; color: #fff; background: linear-gradient(160deg, var(--accent), var(--blue)); flex: none; }
.who.is-none .avatar { background: var(--panel-3); color: var(--muted); }
.who.is-none span { color: var(--muted); }
.who span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.who em.chip { font-style: normal; }
.mb { display: inline-grid; grid-template-columns: 40px auto; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.mb i { display: block; height: 6px; border-radius: 3px; background: var(--panel-3); position: relative; overflow: hidden; }
.mb i::after { content: ""; position: absolute; inset: 0; width: calc(var(--pct) * 1%); background: linear-gradient(90deg, var(--blue), var(--accent)); border-radius: 3px; }
.inv .drill td { padding: 12px 14px 14px 56px; }
.inv .drill-grid code { font-size: 11px; background: var(--panel-3); padding: 1px 6px; border-radius: 4px; }
.pager-split { justify-content: space-between; }
.pager-split .pager { margin: 0; }
@media (max-width: 1100px) { .panel-body.comp { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sq, .dim-row, .dim-share i::after, .vbar i, .chipbtn, .inv .drill-head, #auditFigures .kpi { animation: none !important; } }

/* ---------- Delivery: composition list and map ---------- */
.dimlist { display: grid; gap: 4px; }
.dim-row { display: grid; grid-template-columns: 14px minmax(90px, 1.1fr) 44px minmax(60px, .9fr) 70px 58px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 12.5px; text-align: left; color: var(--ink-2); cursor: pointer; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.dim-row:hover, .dim-row:focus-visible { background: var(--panel-2); border-color: var(--line-soft); transform: translateX(2px); outline: none; }
.dim-row.is-on { background: color-mix(in srgb, var(--c) 12%, var(--panel)); border-color: color-mix(in srgb, var(--c) 45%, transparent); color: var(--ink); }
.dim-swatch i { display: block; width: 12px; height: 12px; border-radius: 4px; background: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent); }
.dim-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--ink); }
.dim-n { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.dim-share { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 6px; }
.dim-share i { display: block; height: 8px; border-radius: 4px; background: var(--panel-3); position: relative; overflow: hidden; }
.dim-share i::after { content: ""; position: absolute; inset: 0; width: calc(var(--pct) * 1%); border-radius: 4px; background: var(--c); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms + 100ms); }
.dim-share small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.dim-rate { text-align: right; font-size: 11.5px; color: var(--muted); display: inline-flex; justify-content: flex-end; align-items: center; gap: 3px; }
.dim-rate b { color: var(--aqua-ink); font-variant-numeric: tabular-nums; }
.dim-rate small { font-size: 10.5px; }
.trend { font-style: normal; font-weight: 700; }
.trend.up { color: var(--aqua-ink); } .trend.down { color: var(--red-ink); } .trend.flat { color: var(--muted); }
.comp-insight { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border-left: 3px solid var(--accent); font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.waffle { grid-template-columns: repeat(auto-fill, minmax(16px, 1fr)); gap: 4px; }
.waffle.is-dim .sq:not(.is-lit) { opacity: .15; filter: saturate(.3); }
.sq.is-lit { transform: scale(1.12); box-shadow: 0 0 0 1px #fff; }
@media (max-width: 1100px) { .dim-row { grid-template-columns: 14px minmax(80px, 1fr) 44px minmax(50px, 1fr) 60px 52px; } }

.panel-body.comp { align-items: start; }
.comp-map { min-width: 0; }
.sq { aspect-ratio: 1 / 1; }

/* ---------- Carried over ---------- */
.kpirow-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpirow-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split-wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
#carriedFigures .kpi { animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); text-align: left; font: inherit; }
#carriedFigures .kpi-button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent-line), var(--shadow-lift); transform: translateY(-2px); }
#carriedFigures .kpi-static { cursor: default; } #carriedFigures .kpi-static:hover { transform: none; }
#carriedFigures .kpi > strong { font-size: 30px; }
#carriedFigures .tile-share i::after { background: var(--tone-bar, var(--accent)); }
#carriedFigures .kpi[data-tone="aqua"] { --tone-bar: var(--aqua); } #carriedFigures .kpi[data-tone="blue"] { --tone-bar: var(--blue); }
#carriedFigures .kpi[data-tone="yellow"] { --tone-bar: var(--yellow); } #carriedFigures .kpi[data-tone="orange"] { --tone-bar: var(--orange); }
#carriedFigures .kpi[data-tone="slate"] { --tone-bar: var(--slate); }

/* settlement days: stacked columns with the cumulative dot above each */
.daychart-plot { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 220px; padding: 26px 4px 22px; border-bottom: 1px solid var(--line-soft); }
.daycol { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: end; justify-items: center; border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; border-radius: 8px; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); transition: background var(--t-fast) var(--ease); }
.daycol:hover, .daycol.is-on { background: var(--panel-2); }
.daycol.is-on { box-shadow: inset 0 0 0 1px var(--accent-line); }
.daycol-n { grid-row: 1; font-size: 10.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(3px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); margin-bottom: 2px; }
.daycol:hover .daycol-n, .daycol.is-on .daycol-n { opacity: 1; transform: none; }
.daycol-bar { grid-row: 2; width: 70%; min-height: 3px; display: flex; flex-direction: column-reverse; gap: 1px; border-radius: 6px 6px 2px 2px; overflow: hidden; transform-origin: bottom; animation: grow-y var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
.daycol-bar i { display: block; background: var(--c); min-height: 2px; transition: filter var(--t-fast) var(--ease); }
.daycol:hover .daycol-bar i { filter: brightness(1.1); }
.daycol-x { position: absolute; top: 100%; left: 0; right: 0; margin-top: 5px; text-align: center; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.daycol-dot { position: absolute; left: 50%; top: calc((100 - var(--cum)) * 1% * .78 + 4px); width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: pop .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 400ms); pointer-events: none; }
.daychart-plot::before { content: ""; position: absolute; inset: 26px 4px 22px; background: linear-gradient(180deg, transparent 0 1px, transparent), repeating-linear-gradient(180deg, var(--line-soft) 0 1px, transparent 1px 25%); opacity: .8; pointer-events: none; }
.chart-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.chart-key .key-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-key .key-item i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.chart-key .key-item .key-line { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }

/* attempts histogram */
.hist-plot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 220px; padding: 26px 6px 22px; border-bottom: 1px solid var(--line-soft); }
.histcol { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: end; justify-items: center; border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; border-radius: 8px; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); transition: background var(--t-fast) var(--ease); }
.histcol:hover, .histcol.is-on { background: var(--panel-2); }
.histcol.is-on { box-shadow: inset 0 0 0 1px var(--accent-line); }
.histcol.is-empty { cursor: default; }
.histcol-n { grid-row: 1; font-size: 11px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.histcol-bar { grid-row: 2; width: 62%; min-height: 3px; display: flex; flex-direction: column-reverse; gap: 1px; border-radius: 6px 6px 2px 2px; overflow: hidden; transform-origin: bottom; animation: grow-y var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms + 120ms); }
.histcol-bar i { display: block; background: var(--c); min-height: 2px; }
.histcol-x { position: absolute; top: 100%; left: 0; right: 0; margin-top: 5px; text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#carriedRunsInsight { margin-top: 30px; }

/* owners */
#carriedOwners .leader-row { border-width: 1px; font: inherit; text-align: left; width: 100%; }
#carriedOwners .leader-row.is-on { border-color: var(--accent-line); background: var(--accent-soft); }
#carriedOwners .amount.is-plain { color: var(--ink); }
#carriedOwners .bar-fill.is-split { position: relative; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
#carriedOwners .bar-fill.is-split i { position: absolute; inset: 0; width: 0; background: var(--aqua); border-radius: 3px; }
#carriedOwners .bar-fill.is-split::after { content: ""; position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); }

/* splits (shared with Delivery lenses if needed) */
.splits { display: grid; gap: 12px; }
.split-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; }
.split-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.split-bar { display: flex; gap: 3px; height: 32px; }
.split-seg { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 8px; padding: 0 9px; border: 0; border-radius: 7px; background: var(--c); color: #fff; font: inherit; font-size: 11px; cursor: pointer; overflow: hidden; transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: 150ms; transition: filter var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.split-seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.split-seg b { font-variant-numeric: tabular-nums; }
.split-seg:hover { filter: brightness(1.12); }
.split-seg.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); z-index: 1; }

/* runs as dots */
.runs-dots { display: inline-flex; align-items: center; gap: 2px; }
.runs-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .85; }
.runs-dots i.more { width: 10px; border-radius: 3px; background: var(--muted); }
.runs-dots b { margin-left: 6px; font-variant-numeric: tabular-nums; font-weight: 600; }
.inv .flag-good { background: var(--aqua-soft); color: var(--aqua-ink); }
.inv .flag-alert { background: var(--red-soft); color: var(--red-ink); }
@media (max-width: 900px) { .split-wide { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .daycol, .daycol-bar, .daycol-dot, .histcol, .histcol-bar, .split-seg, #carriedFigures .kpi { animation: none !important; } }

#carriedSplits { align-content: start; gap: 16px; }
.split-bar { overflow: hidden; border-radius: 7px; }

#carriedSplits .facet { margin-top: 6px; }
#carriedSplits .subhead { margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
#carriedSplits .subhead em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.minilist { display: grid; gap: 3px; }
.mini-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(50px, 1fr) 36px; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 12px; text-align: left; color: var(--ink-2); cursor: pointer; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.mini-row:hover { background: var(--panel-2); transform: translateX(2px); }
.mini-row.is-on { background: color-mix(in srgb, var(--c) 12%, var(--panel)); border-color: color-mix(in srgb, var(--c) 45%, transparent); color: var(--ink); }
.mini-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-track { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.mini-track i { display: block; height: 100%; width: calc(var(--pct) * 1%); border-radius: 3px; background: var(--c); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 100ms); }
.mini-row b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }


/* ---------- Pipeline: state partition, figure cards, stat strip ---------- */
.partition { display: flex; gap: 3px; height: 30px; margin: 0 0 12px; border-radius: 9px; overflow: hidden; }
.partition .part { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 6px; padding: 0 10px; border: 0; background: var(--c); color: #fff; font: inherit; font-size: 11.5px; cursor: pointer; overflow: hidden; transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); transition: filter var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.partition .part span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.partition .part b { font-variant-numeric: tabular-nums; opacity: .9; }
.partition .part:hover { filter: brightness(1.1); }
.partition .part.is-on, .partition .part[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff; }
#truthFigures .kpi { animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.statstrip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.statgroup { padding: 12px 14px 12px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.statgroup .eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.statgroup .eyebrow em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: auto; }
.stats { display: grid; gap: 8px; }
.stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* A tile that opens the list behind it, rather than a figure to read. */
.stat-opens { cursor: pointer; text-align: left; font: inherit; }
.stat-opens:hover { border-color: var(--accent-line); }
.stat-opens:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-soft); font: inherit; text-align: left; color: inherit; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
button.stat { cursor: pointer; }
button.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line); }
button.stat[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
.stat-n { font-size: 22px; font-weight: 650; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.stat-l { font-size: 11.5px; color: var(--ink-2); }
.stat-sub { font-size: 10.5px; line-height: 1.35; color: var(--muted); }

/* The GLM band is four characters and never wraps, so it does not need the
   padding a text column gets - without this the tenth column pushed the task
   table 18px past its wrapper and put a scrollbar under it. */
#truthRows .glmcell, #view-pipeline thead th.glmcol { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
#truthRows .glmcell .pill { padding: 1px 7px; font-variant-numeric: tabular-nums; }
/* Three tiles in the narrower column: keep the sub-line from forcing the
   strip taller than the flags beside it. */
.stats-3 .stat { align-content: start; }
.stat-bar { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 6px; margin-top: 2px; }
.stat-bar i { display: block; height: 5px; border-radius: 3px; background: var(--panel-3); position: relative; overflow: hidden; }
.stat-bar i::after { content: ""; position: absolute; inset: 0; width: calc(var(--pct) * 1%); border-radius: 3px; background: var(--c); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: 200ms; }
.stat-bar small { font-size: 10.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .statstrip { grid-template-columns: 1fr; }
  .stats-4, .stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .partition .part, #truthFigures .kpi, .stat-bar i::after { animation: none !important; } }

/* ---------- Payouts ---------- */
#payoutSummary .kpi { animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); text-align: left; font: inherit; }
#payoutSummary .kpi-button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent-line), var(--shadow-lift); transform: translateY(-2px); }
#payoutSummary .tile-share i::after { background: var(--tone-bar, var(--accent)); }
#payoutSummary .kpi[data-tone="aqua"] { --tone-bar: var(--aqua); } #payoutSummary .kpi[data-tone="blue"] { --tone-bar: var(--blue); }
#payoutSummary .kpi[data-tone="red"] { --tone-bar: var(--red); } #payoutSummary .kpi[data-tone="violet"] { --tone-bar: var(--violet); }
.stats-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 12px; }
.moneybar { display: grid; gap: 3px; min-width: 120px; }
.moneybar-track { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.moneybar-track i { display: block; min-width: 3px; transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms + 100ms); }
.moneybar-track .is-paid { background: var(--aqua-ink); } .moneybar-track .is-owed { background: var(--amber); }
.moneybar small { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.who-text { display: grid; line-height: 1.25; }
.who-text strong { font-weight: 600; font-size: 12.5px; }
.who-text small { color: var(--muted); font-size: 10.5px; }
.pulse-badge { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--aqua-soft); color: var(--aqua-ink); font-weight: 700; font-size: 11.5px; font-variant-numeric: tabular-nums; animation: pulse-dot 2.4s ease-out infinite; }
.inv .flag-info { background: var(--blue-soft); color: var(--blue-ink); text-decoration: none; }
.drill-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.drill-cols .subhead { display: flex; gap: 8px; align-items: baseline; margin: 0 0 8px; }
.drill-cols .subhead em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; }
.minitasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.minitasks li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line-soft); font-size: 12px; }
.minitasks .taskname { max-width: 300px; }
.minitasks b { font-variant-numeric: tabular-nums; }
.drill-grid.compact { margin-top: 12px; }
@media (max-width: 1100px) { .stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .drill-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { #payoutSummary .kpi, .benchring, .benchring .mring .ring-fg, .moneybar-track i, .pulse-badge { animation: none !important; } }

.benchrings { align-items: start; align-content: start; }
.benchring { align-content: start; }


/* ---------- Payouts: settlement by bench ---------- */
.settle-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.benchrings { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.benchring { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-soft); font: inherit; text-align: left; color: inherit; cursor: pointer; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.benchring:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.benchring.is-on { border-color: var(--accent-line); background: var(--accent-soft); }
.ring-big { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.ring-big svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-big .ring-bg { fill: none; stroke: var(--panel-3); stroke-width: 3.4; }
.ring-big .ring-fg { fill: none; stroke: var(--c); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: calc(var(--pct) * 1) 100; animation: ring 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
.ring-big b { position: relative; font-size: 24px; font-weight: 700; letter-spacing: -.04em; color: var(--aqua-ink); font-variant-numeric: tabular-nums; }
.benchring-body { display: grid; gap: 8px; min-width: 0; }
.benchring-body h3 { margin: 0; font-size: 14px; }
.benchring-body p { margin: -4px 0 0; font-size: 11.5px; color: var(--muted); }
.benchring-lines { display: grid; gap: 4px; }
.benchring-lines div { display: grid; grid-template-columns: 72px auto minmax(0, 1fr); align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.benchring-lines b { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }
.benchring-lines b.is-owed { color: var(--amber-ink); }
.benchring-lines small { color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap; }
.benchring-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.benchring-bar i { display: block; min-width: 3px; transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 200ms); }
.benchring-bar .is-paid { background: var(--aqua-ink); } .benchring-bar .is-owed { background: var(--amber); }
.teamstack { display: grid; gap: 8px; align-content: start; }
.teamstack .subhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0; }
.teamstack .subhead em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.team-rows { display: grid; gap: 6px; }
.team-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 96px; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--panel-2); font: inherit; text-align: left; color: var(--ink-2); cursor: pointer; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.team-row:hover { background: var(--panel); transform: translateX(2px); border-color: var(--line); box-shadow: var(--shadow); }
.team-row.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); }
.team-name { display: grid; line-height: 1.2; min-width: 0; }
.team-name { font-weight: 600; color: var(--ink); font-size: 13px; }
.team-name small { font-weight: 400; font-size: 11px; color: var(--muted); }
.team-bar { display: block; height: 22px; }
.team-bar-track { display: flex; gap: 2px; height: 100%; border-radius: 6px; overflow: hidden; }
.team-bar-track i { display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; min-width: 4px; font-size: 11px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 250ms); }
.team-bar-track .is-paid { background: var(--aqua-ink); } .team-bar-track .is-owed { background: var(--amber); }
.team-total { display: grid; text-align: right; line-height: 1.2; }
.team-total b { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); font-size: 13px; }
.team-total small { font-size: 11px; color: var(--muted); }
@media (max-width: 1100px) { .settle-body { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .benchring, .ring-big .ring-fg, .benchring-bar i, .team-row, .team-bar-track i { animation: none !important; } }

/* One height for every figure card in a row: the cue sits in reserved space */
#payoutSummary .kpi, #auditFigures .kpi, #carriedFigures .kpi, #truthFigures .kpi { position: relative; padding-bottom: 30px; }
#payoutSummary .kpi-cue, #auditFigures .kpi-cue, #carriedFigures .kpi-cue, #truthFigures .kpi-cue { position: absolute; left: 16px; bottom: 11px; }
#auditFigures .tile-share, #carriedFigures .tile-share { margin-bottom: 2px; }

.provenance.is-warn { color: var(--red-ink); padding: 8px 12px; border-radius: var(--radius-sm); background: var(--red-soft); }

/* Gym chips inside a pipeline row's evidence panel. */
.gymlist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.gymlist .chip { font-size: 10.5px; }

/* Domain split under the makeup strip: same row shape as the audit lens list. */
.statgroup-wide { grid-column: 1 / -1; }
.dimstrip { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; }
.dimstrip .dim-row {
  flex: 1 1 150px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  text-align: left;
}
.dimstrip .dim-row:hover { border-color: var(--c); }
.dimstrip .dim-swatch i { display: block; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.dimstrip .dim-label { font-size: 12px; color: var(--ink); }
.dimstrip .dim-n { font-size: 13px; font-weight: 700; color: var(--ink); }
.dimstrip .dim-share { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; }
.dimstrip .dim-share i {
  flex: 1; height: 4px; border-radius: 99px;
  background: linear-gradient(to right, var(--c) calc(var(--pct) * 1%), var(--line) 0);
}
.dimstrip .dim-share small { font-size: 10.5px; color: var(--muted); }
.dim-foot { flex: 1 1 100%; margin: 4px 0 0; font-size: 11.5px; color: var(--ink-2); }

/* The Payouts gate.
   Deliberately plain: it is a door, not a feature, and should read as the tab
   being withheld rather than as something that has gone wrong. */
/* The hidden attribute always wins over a display rule. */
[hidden] { display: none !important; }

.lockpanel {
  display: grid;
  place-items: center;
  min-height: 46vh;
  padding: 40px 16px;
}

.lockbox {
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 12px 32px rgb(16 24 40 / .06);
  text-align: center;
}

.lockmark {
  display: block;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: .38em;
  /* the letter-spacing pushes the group off-centre by half a gap */
  text-indent: .38em;
}

.lockbox h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 650;
}

.lockbox p {
  margin: 0 auto 20px;
  max-width: 34ch;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.6;
}

#payoutUnlock {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

#payoutUnlock .field { flex: 1; margin: 0; }

#payoutPass {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

#payoutPass:focus-visible {
  outline: 2px solid var(--brand, #4338ca);
  outline-offset: 1px;
}

#payoutUnlock .primary {
  padding: 9px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--brand, #4338ca);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#payoutUnlock .primary:hover { filter: brightness(1.07); }

.lockerr {
  margin: 12px 0 0;
  color: var(--red-ink, #9f2c2b);
  font-size: 12.5px;
}

.locknote {
  margin: 14px 0 0 !important;
  color: var(--muted);
  font-size: 11.5px;
}

/* A row whose person is withheld while Payouts is locked. It should read as
   deliberately held back, not as data that failed to load - so the row keeps
   its shape and only the name is replaced. */
.leader-row.is-masked { cursor: default; }
.leader-row.is-masked .person strong { font-weight: 500; }

.maskedname {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

.masknote {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 11.5px;
}
/* ---------- The segment split: switch in the top bar, tiles on the Overview ---------- */
.topbar { display: flex; align-items: center; gap: 18px; }
.segctl { display: flex; align-items: center; gap: 10px; }
.segctl-label { display: flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
/* Bench first, then type within it: each bench is a group whose head selects
   the whole bench and whose two small buttons narrow it to one type. */
#segmentSwitch .seggroup { display: inline-flex; align-items: center; gap: 1px; padding-left: 6px; margin-left: 4px; border-left: 1px solid var(--line); }
#segmentSwitch .seghead { font-weight: 600; }
#segmentSwitch .segsub { height: 24px; padding: 0 8px; font-size: 11px; color: var(--muted); }
#segmentSwitch .seggroup[data-bench="computer"] .segbtn.is-on { box-shadow: 0 1px 2px rgba(16,23,32,.08), 0 0 0 1px var(--blue); }
#segmentSwitch .seggroup[data-bench="company"] .segbtn.is-on { box-shadow: 0 1px 2px rgba(16,23,32,.08), 0 0 0 1px var(--violet); }
#segmentSwitch .seghead.is-within { color: var(--ink); background: rgba(255,255,255,.55); }
body[data-segment^="computer"] .topbar { box-shadow: inset 0 -2px 0 var(--blue); }
body[data-segment^="company"] .topbar { box-shadow: inset 0 -2px 0 var(--violet); }

.segstrip { margin: 0 0 18px; }
.segstrip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.segstrip-head .eyebrow { margin: 0; }
.segstrip-note { margin: 0; font-size: 12px; color: var(--muted); }
.segstrip-note b { color: var(--ink); }
.segtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .8fr); gap: 12px; }
@media (max-width: 1280px) { .segtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.segtile { position: relative; display: grid; gap: 10px; padding: 14px 16px 14px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow); font: inherit; text-align: left; color: inherit; cursor: pointer; overflow: hidden; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease), opacity var(--t-med) var(--ease); }
.segtile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }
.segtile::after { content: ""; position: absolute; inset: -40% auto auto -10%; width: 60%; height: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 14%, transparent), transparent); pointer-events: none; }
.segtile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.segtile.is-on { border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent), var(--shadow-lift); }
.segtiles:has(.segtile.is-on) .segtile:not(.is-on):not(.is-unknown) { opacity: .55; }
.segtiles:has(.segtile.is-on) .segtile:not(.is-on):hover { opacity: 1; }
.segtile.is-unknown { cursor: default; background: var(--panel-2); box-shadow: none; }
.segtile.is-unknown:hover { transform: none; }
.segtile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.segtile-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--ink); }
.segtile-name i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.segtile-main { display: flex; align-items: baseline; gap: 10px; }
.segtile-main b { font-size: 34px; font-weight: 700; letter-spacing: -.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.segtile-main span { display: grid; font-size: 11.5px; color: var(--ink-2); line-height: 1.2; }
.segtile-main small { color: var(--muted); font-size: 10.5px; }
.segtile-share { display: block; height: 5px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.segtile-share i { display: block; height: 100%; width: calc(var(--pct) * 1%); border-radius: 3px; background: var(--c); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.segtile .vbar { height: 6px; }
.segtile-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line-soft); }
.segtile-facts div { display: grid; line-height: 1.2; }
.segtile-facts b { font-size: 15px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.segtile-facts span { font-size: 10.5px; color: var(--muted); }
.segtile-why { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 1100px) { .segtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topbar { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .segtile, .segtile-share i { animation: none !important; } }

/* ---------- Sidebar: icons at rest, labels on hover ---------- */
.app { grid-template-columns: 72px minmax(0, 1fr); transition: grid-template-columns var(--t-med) var(--ease); }
.app:has(.sidebar:hover), .app:has(.sidebar :focus-visible) { grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { padding: 20px 12px; gap: 18px; overflow: hidden; }
.side-brand { padding: 4px 4px 0; }
.brand-mark { flex: none; }
.brand-text, .viewnav-tab span { white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.sidebar:hover .brand-text, .sidebar:hover .viewnav-tab span,
.sidebar:has(:focus-visible) .brand-text, .sidebar:has(:focus-visible) .viewnav-tab span { opacity: 1; transform: none; transition-delay: 60ms; }
.viewnav-tab { padding: 10px 12px; }
.viewnav-tab svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .app, .brand-text, .viewnav-tab span { transition: none !important; } }

/* ---------- Delivery: task inventory header and batch tabs ---------- */
.inventory > .panel-head { padding-bottom: 8px; }
.batchtabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 6px 20px 14px; border-bottom: 1px solid var(--line-soft); }
.batchtab { position: relative; display: grid; gap: 6px; padding: 12px 14px 11px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-soft); font: inherit; text-align: left; color: var(--ink-2); cursor: pointer; overflow: hidden; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease), background var(--t-med) var(--ease); }
.batchtab::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--line); transition: background var(--t-fast) var(--ease); }
.batchtab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line); background: var(--panel); }
.batchtab.is-on { background: var(--panel); border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); color: var(--ink); }
.batchtab.is-on::before { background: var(--accent); }
.batchtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.batchtab-name { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.batchtab.is-on .batchtab-name { color: var(--accent); }
.batchtab-n { font-size: 26px; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.batchtab .vbar { height: 6px; }
.batchtab-rate { font-size: 11.5px; color: var(--muted); }
.batchtab-rate b { color: var(--aqua-ink); font-variant-numeric: tabular-nums; }
.inventory .chips-row { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .batchtab { animation: none !important; } }

/* ---------- Pipeline: toned stat tiles, quiet status line ---------- */
:root { --green: #1a9c6b; --green-ink: #15795a; --amber: #d9911a; --amber-ink: #9a6410; }
.statusline:empty { display: none; }
.stat { position: relative; overflow: hidden; background: var(--panel); border-color: var(--line-soft); padding-left: 16px; box-shadow: var(--shadow); }
.stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); }
.stat-n { color: var(--ci, var(--ink)); font-size: 26px; }
.stat-l { color: var(--ink-2); font-weight: 500; }
.stat-sub { color: var(--muted); }
.stat-bar i { background: var(--panel-3); }
.stat-bar small { color: var(--ci, var(--ink-2)); font-weight: 600; }
button.stat:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent), var(--shadow-lift); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
button.stat[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 10%, var(--panel)); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.statgroup { position: relative; overflow: hidden; background: var(--panel-2); box-shadow: none; }
.statgroup .eyebrow { color: var(--ink-2); }

/* ---------- Pipeline: the tasks table ---------- */
.statepill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--c) 75%, var(--ink)); background: color-mix(in srgb, var(--c) 14%, var(--panel)); white-space: nowrap; }
.gate-chip { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--ink-2); background: var(--panel-3); white-space: nowrap; }
#truthTable .drill-head { animation: fade-up var(--t-med) var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
#truthTable .drill-head:hover td { background: var(--panel-2); }
#truthTable .taskname { max-width: 320px; }
#truthTable .who span { max-width: 220px; }
#truthTable .drill td { padding: 14px 16px 16px 56px; }
#truthTable .evidence { grid-template-columns: 120px 1fr; gap: 8px 18px; }
#truthTable .evidence dd { line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { #truthTable .drill-head { animation: none !important; } }

/* The join gap is explained by the "not found here" tile; the paragraph under the table is redundant. */
#truthJoinNote { display: none; }

/* ---------- Pipeline: a deck of panes with a pager fixed at the foot ---------- */
#view-pipeline.is-active, #view-payouts.is-active, #view-command.is-active { padding-bottom: 104px; }
.deck { position: relative; }
.deck-track { display: grid; }
.deck-pane { grid-area: 1 / 1; min-width: 0; display: grid; gap: 14px; align-content: start; }
.deck-pane:not(.is-active) { visibility: hidden; pointer-events: none; height: 0; overflow: hidden; }
.deck-pane.is-active { animation: pane-in var(--t-slow) var(--ease) both; }
@keyframes pane-in { from { opacity: 0; transform: translateX(var(--dir, 28px)); } to { opacity: 1; transform: none; } }
.deck-pane > .kpirow, .deck-pane > .partition, .deck-pane > .statstrip { margin: 0; }
.deck-pager { position: fixed; bottom: 0; left: calc(72px + (100vw - 72px) / 2); transform: translateX(-50%); z-index: 35; display: grid; justify-items: center; pointer-events: none; transition: left var(--t-med) var(--ease); }
.app:has(.sidebar:hover) .deck-pager { left: calc(232px + (100vw - 232px) / 2); }
@media (prefers-reduced-motion: reduce) { .deck-pane.is-active { animation: none !important; } }

/* Dock: one icon per pane, magnified under the pointer, folded to a notch at rest. */
.dock { grid-area: 1 / 1; display: flex; align-items: flex-end; gap: 2px; height: 56px; margin-bottom: 14px; padding: 0 6px; border-radius: 18px; background: color-mix(in srgb, var(--panel) 66%, transparent); border: 1px solid rgba(15, 20, 32, .08); box-shadow: 0 1px 2px rgba(16, 23, 32, .06), 0 18px 40px -20px rgba(16, 23, 32, .32), inset 0 1px 0 rgba(255, 255, 255, .85); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); pointer-events: auto; transition: opacity 260ms var(--ease), transform 320ms var(--ease); }
.dock-item { --s: 1; position: relative; width: 42px; height: 42px; margin: 0 0 7px; padding: 0; border: 0; border-radius: 12px; display: grid; place-items: center; color: var(--muted); cursor: pointer; background: transparent; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.dock-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transform: scale(var(--s)); transition: transform 120ms var(--ease); }
.dock-item:hover { color: var(--ink); background: rgba(15, 20, 32, .06); }
.dock-item:active { background: rgba(15, 20, 32, .1); }
.dock-item.is-on { color: var(--ink); background: var(--panel); box-shadow: 0 1px 2px rgba(16, 23, 32, .08), 0 6px 14px -8px rgba(16, 23, 32, .25), inset 0 0 0 1px rgba(15, 20, 32, .06); }
.dock-item::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 10px; height: 2px; border-radius: 1px; background: var(--accent); transform: translateX(-50%) scaleX(0); transition: transform var(--t-fast) var(--ease); }
.dock-item.is-on::after { transform: translateX(-50%) scaleX(1); }
.dock-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dock-label { position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 5px 9px; border-radius: 8px; background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; letter-spacing: .005em; opacity: 0; transform: translateX(-50%) translateY(3px); transform-origin: bottom center; pointer-events: none; border: 1px solid rgba(15, 20, 32, .08); box-shadow: 0 1px 2px rgba(16, 23, 32, .06), 0 10px 24px -14px rgba(16, 23, 32, .3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.dock-item:hover .dock-label, .dock-item:focus-visible .dock-label { opacity: 1; transform: translateX(-50%) translateY(0); }
.dock-notch { grid-area: 1 / 1; align-self: end; position: relative; display: flex; align-items: center; gap: 5px; height: 14px; margin-bottom: 8px; padding: 0 10px; border: 1px solid rgba(15, 20, 32, .08); border-radius: 999px; background: color-mix(in srgb, var(--panel) 72%, transparent); box-shadow: 0 1px 2px rgba(16, 23, 32, .06), 0 8px 18px -12px rgba(16, 23, 32, .3), inset 0 1px 0 rgba(255, 255, 255, .85); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); cursor: pointer; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 240ms var(--ease), transform 320ms var(--ease); }
.dock-notch::before { content: ""; position: absolute; inset: -28px -30px -8px; }
.dock-notch i { width: 4px; height: 4px; border-radius: 50%; background: rgba(15, 20, 32, .22); transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease); }
.dock-notch i.is-on { width: 12px; border-radius: 2px; background: var(--ink); }
.deck-pager.is-idle .dock { opacity: 0; transform: translateY(26px) scale(.9); pointer-events: none; }
.deck-pager.is-idle .dock-notch { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 900px) { .dock { gap: 0; padding: 0 4px; } .dock-item { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .dock, .dock-item, .dock-notch, .dock-label { transition: none !important; } }
@media (prefers-reduced-motion: reduce) { .deck-track { transition: none !important; } }

/* ---------- Pipeline: toned figure cards and tiles ---------- */
#truthFigures .kpi { position: relative; overflow: hidden; }
#truthFigures .kpi::after { content: ""; position: absolute; top: -40%; right: -15%; width: 55%; height: 130%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tc, var(--slate)) 26%, transparent), transparent 72%); pointer-events: none; }
#truthFigures .kpi > * { position: relative; z-index: 1; }
#truthFigures .kpi > strong { color: var(--tci, var(--ink)); }
#truthFigures .kpi[data-tone="aqua"] { --tc: var(--aqua); --tci: var(--aqua-ink); }
#truthFigures .kpi[data-tone="yellow"] { --tc: var(--yellow); --tci: var(--yellow-ink); }
#truthFigures .kpi[data-tone="orange"] { --tc: var(--orange); --tci: var(--orange-ink); }
#truthFigures .kpi[data-tone="violet"] { --tc: var(--violet); --tci: var(--violet-ink); }
#truthFigures .kpi[data-tone="blue"] { --tc: var(--blue); --tci: var(--blue-ink); }
#truthFigures .kpi[data-tone="green"] { --tc: var(--green); --tci: var(--green-ink); }
#truthFigures .kpi-button[aria-pressed="true"] { background: color-mix(in srgb, var(--tc) 10%, var(--panel)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 35%, transparent), var(--shadow-lift); }
.stat::after { content: ""; position: absolute; top: -40%; right: -15%; width: 55%; height: 130%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent 72%); pointer-events: none; }
.stat-l { color: var(--ink); }
.statgroup { background: var(--panel); border-color: var(--line-soft); box-shadow: var(--shadow); }
.statgroup .eyebrow::before { background: var(--accent); }

/* ---------- Pipeline: tinted tiles, no glow ---------- */
.stat::after, #truthFigures .kpi::before, #truthFigures .kpi::after { display: none; }
.stat { background: color-mix(in srgb, var(--c) 9%, var(--panel)); border-color: color-mix(in srgb, var(--c) 32%, var(--line-soft)); box-shadow: none; }
.stat-n { color: var(--ci, var(--ink)); }
.stat-l { color: var(--ink); font-weight: 600; }
.stat-sub { color: color-mix(in srgb, var(--ci, var(--ink-2)) 70%, var(--ink-2)); }
.stat-bar i { background: color-mix(in srgb, var(--c) 20%, var(--panel)); }
.stat-bar i::after { background: var(--c); }
.stat-bar small { color: var(--ci, var(--ink-2)); }
button.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 13%, var(--panel)); }
button.stat[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 18%, var(--panel)); border-color: color-mix(in srgb, var(--c) 65%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
#truthFigures .kpi { background: color-mix(in srgb, var(--tc, var(--slate)) 8%, var(--panel)); border-color: color-mix(in srgb, var(--tc, var(--slate)) 30%, var(--line-soft)); }
#truthFigures .kpi .kpi-note { color: var(--ink-2); }
.statgroup { background: var(--panel-2); border-color: var(--line-soft); box-shadow: none; }
.statgroup .eyebrow::before { display: none; }

/* ---------- Pipeline: filter card ---------- */
.filterbar { padding: 12px 16px 12px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 10px; }
.filterbar-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fsearch { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px; }
.fsearch svg { position: absolute; left: 12px; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.fsearch input { width: 100%; height: 34px; padding: 0 12px 0 34px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--panel-2); font: inherit; font-size: 12.5px; color: var(--ink); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.fsearch input:focus { outline: none; border-color: var(--accent-line); background: var(--panel); box-shadow: 0 0 0 3px var(--accent-soft); }
.filterbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.filterbar-actions .ghost { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 999px; }
.fcount { font-size: 12px; font-weight: 650; color: var(--ink); padding: 0 12px; height: 30px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--panel-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.filterbar:has(.fchip.is-on:not(:first-child)) .fcount, .filterbar:has(.chipbtn) .fcount { background: var(--accent-soft); color: var(--accent); }

.fgroup { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; }
.fgroup-label { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.fgroup:has(.fchip.is-on:not(:first-child)) .fgroup-label { color: var(--ink); }
.fgroup-label .why { width: 15px; height: 15px; font-size: 9.5px; }
.filterbar-grid { display: grid; grid-template-columns: minmax(0, auto) minmax(0, auto); justify-content: start; gap: 8px 40px; }
.filterbar-grid .fgroup { min-width: 0; }
.fgroup.is-primary { padding-bottom: 10px; border-bottom: 1px dashed var(--line-soft); }

.fseg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 3px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); justify-self: start; max-width: 100%; }
.fchip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 9px; border-radius: 9px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 12px; font-weight: 550; color: var(--ink-2); cursor: pointer; position: relative; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.fchip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent); flex: none; transition: box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.fchip b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 11.5px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.fchip:hover { background: color-mix(in srgb, var(--c) 12%, var(--panel)); color: var(--ink); }
.fchip:active { transform: scale(.97); }
.fchip.is-on { background: var(--c); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--c) 35%, transparent); }
.fchip.is-on::before { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.fchip.is-on b { background: rgba(255,255,255,.22); color: #fff; }
.fchip.is-on:hover { background: color-mix(in srgb, var(--c) 88%, #000); }
.fchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fgroup.is-primary .fchip { height: 32px; font-size: 12.5px; padding: 0 12px 0 11px; }

.fselects { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fselects .field { display: flex; align-items: center; gap: 0; }
.fselects .field > span { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 12px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line-soft); border-right: 0; border-radius: 999px 0 0 999px; }
.fselects .field select { min-width: 150px; height: 30px; padding: 0 30px 0 10px; font-size: 12px; border-radius: 0 999px 999px 0; border-color: var(--line-soft); background-color: var(--panel); }
.fselects .field:has(option:checked:not([value=""])) > span { background: var(--accent); color: #fff; border-color: var(--accent); }
.fselects .field:has(option:checked:not([value=""])) select { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.fselects .morefilters { align-self: center; }
.fselects .morefilters > summary { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 999px; }
.filterbar .morefilters-body { z-index: 40; }
.filterbar .chips-row { margin: 0; padding-top: 8px; border-top: 1px dashed var(--line-soft); }
.filterbar .chips-row:has(.chips:empty) { display: none; }
@media (max-width: 1100px) { .filterbar-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .fgroup { grid-template-columns: 1fr; gap: 6px; } }
.filterbar .chipbtn { --c: var(--accent); border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, var(--panel)); }
.filterbar .chipbtn span { color: color-mix(in srgb, var(--c) 80%, var(--ink)); }
.filterbar .chipbtn:hover { background: color-mix(in srgb, var(--c) 22%, var(--panel)); }
.filterbar .chipbtn.is-clear { --c: var(--slate); }

/* ---------- Payouts: toned summary tiles ---------- */
#payoutSummary .kpi::before, #payoutSummary .kpi::after { display: none; }
#payoutSummary .kpi { background: color-mix(in srgb, var(--tc, var(--slate)) 9%, var(--panel)); border-color: color-mix(in srgb, var(--tc, var(--slate)) 32%, var(--line-soft)); box-shadow: none; }
#payoutSummary .kpi > strong { color: var(--tci, var(--ink)); }
#payoutSummary .kpi .kpi-note { color: var(--ink-2); }
#payoutSummary .kpi[data-tone="green"] { --tc: var(--green); --tci: var(--green-ink); }
#payoutSummary .kpi[data-tone="aqua"] { --tc: var(--aqua); --tci: var(--aqua-ink); }
#payoutSummary .kpi[data-tone="blue"] { --tc: var(--blue); --tci: var(--blue-ink); }
#payoutSummary .kpi[data-tone="red"] { --tc: var(--red); --tci: var(--red-ink); }
#payoutSummary .kpi[data-tone="violet"] { --tc: var(--violet); --tci: var(--violet-ink); }
#payoutSummary .kpi-button:hover { background: color-mix(in srgb, var(--tc) 14%, var(--panel)); border-color: color-mix(in srgb, var(--tc) 55%, transparent); box-shadow: var(--shadow-lift); }
#payoutSummary .kpi-button[aria-pressed="true"] { background: color-mix(in srgb, var(--tc) 18%, var(--panel)); border-color: color-mix(in srgb, var(--tc) 65%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 30%, transparent); transform: none; }
#payoutDeck .deck-pane > .panel { margin: 0; }

/* ---------- Overview: the Payout balance panel follows the Payouts lock ---------- */
.kpirow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpirow-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.veil { display: flex; align-items: center; gap: 12px; margin: 0 20px; padding: 9px 14px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px dashed var(--line); font-size: 12px; color: var(--ink-2); }
.veil .lockmark { margin: 0; font-size: 9px; letter-spacing: .3em; color: var(--muted); }
.veil .ghost { margin-left: auto; height: 28px; padding: 0 12px; font-size: 12px; border-radius: 999px; }
.blurred { display: inline-block; filter: blur(5px); opacity: .8; user-select: none; pointer-events: none; }
.is-locked .leader-row.is-masked { cursor: default; }
.is-locked .settle-foot span, .is-locked .bench-bar-head b, .is-locked .leader-row .amount { color: var(--ink-2); }
#payoutSummary .kpi[data-tone="amber"] { --tc: var(--amber); --tci: var(--amber-ink); }
/* The generic status tones must not paint the legend labels. */
.key-item.is-paid, .key-item.is-pending { background: none; color: var(--ink-2); }
#truthFigures { align-items: stretch; }
#overviewDeck .deck-pane > .eyebrow { margin: 0; }
#overviewDeck .deck-pane > .segstrip { margin: 0; }

/* ---------- Overview: the Pipeline pane ---------- */
.summary-item[data-tone="green"] { --tone-bar: var(--green); }
.summary-item[data-tone="amber"] { --tone-bar: var(--amber); }
.summary-item[data-tone="green"]::before, .summary-item[data-tone="amber"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--tone-bar); }
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item { background: linear-gradient(160deg, color-mix(in srgb, var(--tone-bar) 15%, var(--panel)) 0%, color-mix(in srgb, var(--tone-bar) 5%, var(--panel)) 70%); border-color: color-mix(in srgb, var(--tone-bar) 38%, var(--line-soft)); }
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item::before { height: 4px; }
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item span { color: var(--ink); }
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item strong { color: color-mix(in srgb, var(--tone-bar) 80%, var(--ink)); font-size: 24px; }
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item .tile-share i::after { background: var(--tone-bar); }
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item:hover { box-shadow: 0 12px 26px color-mix(in srgb, var(--tone-bar) 22%, transparent); border-color: color-mix(in srgb, var(--tone-bar) 65%, transparent); }
.bench-card[data-bench="Computer"] { --bc: var(--aqua); --bci: var(--aqua-ink); }
.bench-card[data-bench="Company"] { --bc: var(--violet); --bci: var(--violet-ink); }
.bench-card[data-bench="Unassigned"] { --bc: var(--slate); --bci: var(--slate-ink); }
#overviewTrack .deck-pane[data-title="Pipeline"] .bench-card { background: linear-gradient(160deg, color-mix(in srgb, var(--bc) 15%, var(--panel)) 0%, color-mix(in srgb, var(--bc) 5%, var(--panel)) 70%); border-color: color-mix(in srgb, var(--bc) 38%, var(--line-soft)); border-top: 4px solid var(--bc); }
#overviewTrack .deck-pane[data-title="Pipeline"] .bench-card:hover { box-shadow: 0 12px 26px color-mix(in srgb, var(--bc) 22%, transparent); border-color: color-mix(in srgb, var(--bc) 65%, transparent); border-top-color: var(--bc); }
#overviewTrack .deck-pane[data-title="Pipeline"] .bench-head h3 { color: var(--ink); }
#overviewTrack .deck-pane[data-title="Pipeline"] .bench-ring .ring-fg { stroke: var(--bc); }
#overviewTrack .deck-pane[data-title="Pipeline"] .bench-ring .ring-bg { stroke: color-mix(in srgb, var(--bc) 18%, var(--panel)); }
#overviewTrack .deck-pane[data-title="Pipeline"] .bench-ring b { color: var(--bci); }
#overviewTrack .deck-pane[data-title="Pipeline"] .bench-metric b { color: var(--ink); }
#overviewTrack .deck-pane[data-title="Pipeline"] .rankbar-label { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, var(--panel)); color: color-mix(in srgb, var(--c) 72%, var(--ink)); font-weight: 600; font-size: 11.5px; justify-self: start; max-width: 100%; }
#overviewTrack .deck-pane[data-title="Pipeline"] .rankbar-count { color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
#overviewTrack .deck-pane[data-title="Pipeline"] .rankbar-track { background: color-mix(in srgb, var(--c) 12%, var(--panel-3)); }
#overviewTrack .deck-pane[data-title="Pipeline"] .rankbar { grid-template-columns: 118px minmax(0, 1fr) 56px 40px; }
#overviewTrack .deck-pane[data-title="Pipeline"] .rankbar[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 10%, var(--panel)); }

/* ---------- Overview: the Daily delta legend and busiest-day strip ---------- */
#overviewTrack .deck-pane[data-title="Daily delta"] .chart-key { gap: 8px; }
#overviewTrack .deck-pane[data-title="Daily delta"] .chart-key .key-item[data-series] { padding: 4px 11px 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); color: color-mix(in srgb, var(--tone) 72%, var(--ink)); font-weight: 600; font-size: 11.5px; text-transform: capitalize; }
#overviewTrack .deck-pane[data-title="Daily delta"] .chart-key .key-item[data-series]::before { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 25%, transparent); }
#overviewTrack .deck-pane[data-title="Daily delta"] .chart-key .key-item.is-quiet { --tone: var(--slate); opacity: 1; color: var(--muted); }
#overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip { align-items: center; gap: 10px 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px dashed var(--line-soft); }
#overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip-label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; margin-right: 4px; }
#overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip-label::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--accent); }
#overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip-item { flex-direction: row; align-items: center; gap: 8px; padding: 5px 10px 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); color: color-mix(in srgb, var(--tone) 72%, var(--ink)); font-weight: 600; text-transform: capitalize; }
#overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip-item i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 25%, transparent); }
#overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip-item b { color: var(--ink); font-size: 12.5px; }
#overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip-item small { padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 18%, var(--panel)); color: color-mix(in srgb, var(--tone) 70%, var(--ink)); font-weight: 600; }
.fchip.is-zero { opacity: .5; }
.fchip.is-zero:hover { opacity: 1; }

/* ---------- Delivery: batch rail, current view, charts ---------- */
.delivery-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.delivery-rail { position: sticky; top: 72px; display: grid; gap: 12px; align-content: start; max-height: calc(100vh - 88px); overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.rail-card { padding: 14px 14px 12px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 9px; }
.rail-card h2 { margin: 0; font-size: 14px; font-weight: 650; }
.rail-note { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.batchlist { display: grid; gap: 6px; }
.batchrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; align-items: center; padding: 9px 11px 8px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--panel-2); text-align: left; font: inherit; color: var(--ink); cursor: pointer; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.batchrow-name { font-weight: 650; font-size: 12.5px; }
.batchrow-n { grid-row: span 2; font-weight: 700; font-size: 17px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.batchrow-sub { font-size: 11px; color: var(--muted); }
.batchrow .vbar { grid-column: 1 / -1; height: 5px; margin-top: 6px; }
.batchrow:hover { transform: translateX(2px); border-color: var(--line); background: var(--panel); box-shadow: var(--shadow); }
.batchrow.is-on { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow-lift); }
.batchrow.is-on .batchrow-sub { color: rgba(255,255,255,.7); }
.batchrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.batchlist { gap: 4px; }
.batchrow { padding: 5px 10px 5px; gap: 0 10px; }
.batchrow-name { font-size: 12px; }
.batchrow-n { font-size: 14px; }
.batchrow-sub { font-size: 10.5px; }
.batchrow .vbar { height: 3px; margin-top: 3px; }
.delivery-rail .rail-card { padding: 12px 12px 10px; gap: 6px; }
.batchpager .ghost:disabled { opacity: .35; cursor: default; }
.coverbar { height: 8px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.coverbar i { display: block; height: 100%; width: calc(var(--pct) * 1%); border-radius: 4px; background: linear-gradient(90deg, var(--aqua-ink), var(--aqua)); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; transition: width var(--t-med) var(--ease); }
.rail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rail-chip { padding: 3px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-soft); font-size: 11px; color: var(--ink-2); }
.rail-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.delivery-main { display: grid; gap: 14px; min-width: 0; }
.viewstrip { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, .8fr)); gap: 10px; align-items: center; padding: 16px 18px; border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel)) 0%, color-mix(in srgb, var(--aqua) 12%, var(--panel)) 100%); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line-soft)); color: var(--ink); box-shadow: var(--shadow); }
.viewstrip-title b { display: block; font-size: 15px; font-weight: 650; }
.viewstrip-title span { font-size: 11.5px; color: var(--ink-2); }
.viewtile { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 82%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 28%, var(--line-soft)); display: grid; gap: 2px; box-shadow: var(--shadow); }
.viewtile b { font-size: 22px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--c, var(--accent)) 80%, var(--ink)); }
.viewtile span { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
#auditFigures { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#auditFigures .kpi::before, #auditFigures .kpi::after { display: none; }
#auditFigures .kpi { background: linear-gradient(160deg, color-mix(in srgb, var(--kpi-tone) 14%, var(--panel)) 0%, color-mix(in srgb, var(--kpi-tone) 4%, var(--panel)) 70%); border-color: color-mix(in srgb, var(--kpi-tone) 36%, var(--line-soft)); border-left: 4px solid var(--kpi-tone); box-shadow: none; }
#auditFigures .kpi > strong { color: color-mix(in srgb, var(--kpi-tone) 80%, var(--ink)); }
#auditFigures .kpi h3 { color: var(--ink); }
#auditFigures .kpi[data-tone="green"] { --kpi-tone: var(--green); }
#auditFigures .kpi:hover { box-shadow: 0 10px 22px color-mix(in srgb, var(--kpi-tone) 22%, transparent); }
.chart-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chartcard { padding: 14px 16px 16px; display: grid; gap: 12px; align-content: start; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.chart-head h2 { margin: 0; font-size: 14px; font-weight: 650; }
.chart-sub { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }
.chart-side { font-size: 11px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.hbars { display: grid; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 46px; align-items: center; gap: 10px; padding: 5px 8px; margin: 0 -8px; border-radius: 9px; border: 0; background: transparent; font: inherit; color: var(--ink-2); text-align: left; cursor: pointer; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.hbar:hover { background: var(--panel-2); color: var(--ink); }
.hbar.is-on { background: color-mix(in srgb, var(--c) 12%, var(--panel)); color: var(--ink); box-shadow: inset 3px 0 0 var(--c); }
.hbar-label { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.hbar-label .glm-k { font-weight: 650; min-width: 26px; }
.hbar-track { height: 12px; border-radius: 6px; background: var(--panel-3); overflow: hidden; }
.hbar-track i { display: block; height: 100%; width: calc(var(--pct) * 1%); border-radius: 6px; background: var(--c); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.hbar-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.heat { display: grid; gap: 4px; font-size: 12px; }
.heat-row { display: grid; grid-template-columns: minmax(90px, 1.2fr) repeat(var(--cols), minmax(0, 1fr)); gap: 4px; align-items: center; }
.heat-head { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.heat-label { color: var(--ink-2); padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-cell { border: 0; border-radius: 8px; padding: 9px 6px; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ink) 80%, var(--c)); background: color-mix(in srgb, var(--c) calc(var(--t) * 1%), var(--panel-2)); cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.heat-cell:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.heat-cell.is-on { box-shadow: 0 0 0 2px var(--c); }
.heat-cell.is-zero { color: var(--muted); font-weight: 500; }
/* No GLM run is not a score: kept in the grid, but set apart from 0/4 to 4/4. */
.heat-head.is-unset { text-transform: none; letter-spacing: 0; }
.heat-cell.is-unset { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(16,23,32,.04) 6px 8px); }
/* The row total reads as a total, not as one more shade of the heat map. */
.heat-head.is-sum { color: var(--ink-2); }
.heat-cell.is-sum { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.heat-cell.is-sum.is-on { box-shadow: 0 0 0 2px var(--c); }
.stacks { display: grid; gap: 8px; }
.stack-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 84px; gap: 12px; align-items: center; padding: 6px 8px; margin: 0 -8px; border: 0; border-radius: 9px; background: transparent; font: inherit; text-align: left; color: var(--ink-2); cursor: pointer; animation: fade-up var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); transition: background var(--t-fast) var(--ease); }
.stack-row:hover, .stack-row.is-on { background: var(--panel-2); color: var(--ink); }
.stack-label { font-weight: 650; font-size: 12.5px; }
.stack-row .vbar { height: 14px; border-radius: 7px; }
.stack-n { display: grid; text-align: right; line-height: 1.15; }
.stack-n b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stack-n small { font-size: 10.5px; color: var(--muted); }
.stack-toggle { justify-self: start; margin-top: 2px; font-size: 12px; padding: 4px 10px; }
.key-item.is-acc::before { background: var(--aqua); }
.key-item.is-rej::before { background: var(--red); }
.key-item.is-pen::before { background: var(--yellow); }
.fold { padding: 0; }
.fold > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold-title { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; }
.fold-sum { font-size: 12px; color: var(--muted); margin-left: auto; }
.fold-caret { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--t-fast) var(--ease); margin: 0 4px 3px 0; }
.fold[open] .fold-caret { transform: rotate(-135deg); margin-bottom: -3px; }
.fold-body { padding: 0 18px 18px; display: grid; gap: 12px; }
.fold-body .kpirow { margin: 0; }
@media (max-width: 1150px) { .delivery-layout { grid-template-columns: 1fr; } .delivery-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .chart-duo, .hbars.is-split { grid-template-columns: 1fr; } .viewstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .viewstrip-title { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .batchrow, .hbar, .stack-row, .hbar-track i, .coverbar i { animation: none !important; } }
.hbar-more { justify-self: start; margin-top: 4px; padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
.hbar-more:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.heat .hbar-more { margin-top: 6px; }
.heat-cell { padding: 7px 6px; }
.chartcard { align-content: start; }
.hbar { grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 56px; }
.heat-row { grid-template-columns: minmax(140px, 240px) repeat(var(--cols), minmax(0, 1fr)); }
.hbars.is-split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.hbars.is-split .hbar { grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 48px; }
.hbars.is-rail { gap: 4px; }
.hbars.is-rail .hbar { grid-template-columns: 64px minmax(0, 1fr) 36px; gap: 8px; padding: 5px 6px; margin: 0 -6px; }
.hbars.is-rail .hbar-label { font-size: 11.5px; }
.hbars.is-rail .glm-dots b { display: none; }
.hbars.is-rail .hbar-track { height: 9px; }
.hbars.is-rail .hbar-n { font-size: 12px; }
.inventory .chips-row:has(.chips:empty) { display: none; }

/* ---------- Delivery: export button and table colour ---------- */
.export-btn { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 35%, transparent); }
.export-btn:hover { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
.export-btn::before { content: "\2913"; margin-right: 6px; font-size: 13px; }
.inventory .grid thead th { background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); color: var(--ink); }
.inventory .grid tbody tr.drill-head:nth-child(4n+1) td { background: color-mix(in srgb, var(--accent) 3%, var(--panel)); }
.inventory .grid tbody tr.drill-head:hover td { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.batch-chip[data-series="batch"] { background: color-mix(in srgb, var(--blue) 14%, var(--panel)); color: var(--blue-ink); }
.batch-chip[data-series="company"] { background: color-mix(in srgb, var(--violet) 14%, var(--panel)); color: var(--violet-ink); }
.cat { padding: 2px 8px 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, var(--panel)); color: color-mix(in srgb, var(--c) 70%, var(--ink)); font-weight: 600; }
.cat i { box-shadow: none; }
.verdict { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 650; }
.verdict-accepted { background: color-mix(in srgb, var(--green) 14%, var(--panel)); color: var(--green-ink); }
.verdict-rejected { background: color-mix(in srgb, var(--red) 12%, var(--panel)); color: var(--red-ink); }
.verdict-pending { background: color-mix(in srgb, var(--yellow) 16%, var(--panel)); color: var(--yellow-ink); }
.verdict-none { color: var(--muted); }
.mb i::after { background: linear-gradient(90deg, var(--aqua-ink), var(--aqua)); }
.glm-dots i.is-on { background: var(--violet); }

/* ---------- Sidebar: Turing brand ---------- */
.sidebar { background: linear-gradient(180deg, #0b0f17 0%, #0e1420 100%); border-right: 1px solid rgba(255,255,255,.06); color: #aab4c5; }
.side-brand { display: flex; align-items: center; gap: 12px; padding: 6px 6px 2px; }
.brand-mark { width: 28px; height: 29px; flex: none; border-radius: 0; background: none; box-shadow: none; display: block; object-fit: contain; }
.brand-text { display: grid; gap: 3px; line-height: 1; }
.brand-word { display: block; height: 13px; width: auto; }
.brand-sub { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #00bbff; }
.sidebar .viewnav { gap: 4px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.06); margin-top: 4px; }
.sidebar .viewnav-tab { position: relative; color: #93a0b6; border-radius: 10px; }
.sidebar .viewnav-tab svg { opacity: .85; stroke: currentColor; }
.sidebar .viewnav-tab:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidebar .viewnav-tab.is-active { background: rgba(0,187,255,.10); color: #fff; box-shadow: none; }
.sidebar .viewnav-tab.is-active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: #00bbff; }
.sidebar .viewnav-tab.is-active svg { color: #00bbff; opacity: 1; }
.sidebar .viewnav-tab:focus-visible { outline: 2px solid #00bbff; outline-offset: 2px; }
.app:has(.sidebar:hover) .sidebar, .app:has(.sidebar :focus-visible) .sidebar { box-shadow: 8px 0 24px -12px rgba(0,0,0,.5); }

/* ---------- Boot screen and number veil ---------- */
.boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% -10%, #16233a 0%, #0b0f17 55%, #080b11 100%); color: #dfe6f0; transition: opacity 480ms var(--ease), visibility 0s linear 480ms; }
.boot.is-leaving { opacity: 0; visibility: hidden; }
.boot-card { width: min(360px, calc(100vw - 48px)); display: grid; gap: 22px; animation: bootIn 600ms var(--ease) both; }
.boot-brand { display: flex; align-items: center; gap: 16px; }
.boot-brand > img { animation: bootPulse 2.4s var(--ease) infinite; }
.boot-name { display: grid; gap: 5px; line-height: 1; }
.boot-name img { display: block; height: 16px; width: auto; }
.boot-name span { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #00bbff; }
.boot-track { position: relative; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.boot-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, #2e6edf, #00bbff); box-shadow: 0 0 14px rgba(0,187,255,.55); transition: width 360ms var(--ease); }
.boot-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: bootSheen 1.4s linear infinite; }
.boot-meta { display: flex; justify-content: space-between; font-size: 12px; color: #93a0b6; font-variant-numeric: tabular-nums; }
.boot-meta span:last-child { color: #fff; font-weight: 600; }
.boot-feeds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 11.5px; color: #6f7d93; }
.boot-feeds li { display: flex; align-items: center; gap: 8px; transition: color var(--t-med) var(--ease); }
.boot-feeds i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.14); flex: none; transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.boot-feeds li.is-done { color: #c6d0de; }
.boot-feeds li.is-done i { background: #00bbff; box-shadow: 0 0 8px rgba(0,187,255,.7); }
.boot-feeds li.is-skip { color: #8a94a6; }
.boot-feeds li.is-skip i { background: #eda100; }
@keyframes bootIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bootPulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(0,187,255,0)); } 50% { opacity: .85; filter: drop-shadow(0 0 10px rgba(0,187,255,.55)); } }
@keyframes bootSheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.is-booting .kpi > strong, .is-booting [data-count], .is-booting .num, .is-booting .figure-r strong {
  color: transparent !important; border-radius: 6px; background: linear-gradient(90deg, var(--panel-3) 25%, #dfe4ec 50%, var(--panel-3) 75%); background-size: 200% 100%; animation: veil 1.3s linear infinite; }
.is-booting .kpi > strong::after, .is-booting [data-count]::after { content: none; }
@keyframes veil { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .boot-card, .boot-brand > img, .boot-fill::after, .is-booting [data-count], .is-booting .kpi > strong, .is-booting .num, .is-booting .figure-r strong { animation: none !important; } }

/* ---------- Overview: calm summary ---------- */
#overviewTrack .deck-pane[data-title="Summary"] { gap: 20px; }
#overviewTrack .deck-pane[data-title="Summary"] > .eyebrow, #segmentStrip .segstrip-head .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#overviewTrack .deck-pane[data-title="Summary"] > .eyebrow::before, #segmentStrip .segstrip-head .eyebrow::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--accent); }
#overviewTrack .deck-pane[data-title="Summary"] > .eyebrow span, #segmentStrip .segstrip-head .eyebrow span { color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; }
#segmentStrip .segstrip-head { margin-bottom: 10px; }
#segmentStrip .segstrip-note { font-size: 12px; }

/* One card shell, one shadow, one radius. */
#segmentStrip .segtile, .calm .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; gap: 10px; overflow: hidden; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
#segmentStrip .segtile:hover, .calm .kpi:hover { transform: none; border-color: #cfd4dc; box-shadow: var(--shadow-lift); }
#segmentStrip .segtile::before, #segmentStrip .segtile::after, .calm .kpi::before, .calm .kpi::after { display: none; }
#segmentStrip .segtile.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--panel); }
#segmentStrip .segtiles:has(.segtile.is-on) .segtile:not(.is-on):not(.is-unknown) { opacity: .6; }
#segmentStrip .segtile.is-unknown { background: var(--panel-2); border-style: dashed; box-shadow: none; }
.calm .kpi[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Type scale: label 12/500, headline 28/600, secondary 15/600, note 12.5, meta 11. */
.calm .kpi h3, #segmentStrip .segtile-name { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
#segmentStrip .segtile-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.calm .kpi > strong, .calm .kpi .kpi-row strong, .calm .balance strong, #segmentStrip .segtile-main b { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.calm .kpi-note, #segmentStrip .segtile-main span { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
#segmentStrip .segtile-main { align-items: baseline; gap: 8px; }
#segmentStrip .segtile-facts { padding-top: 10px; border-top: 1px solid var(--line-soft); }
#segmentStrip .segtile-facts b { font-size: 15px; font-weight: 600; color: var(--ink); }
#segmentStrip .segtile-facts span { font-size: 11px; color: var(--muted); }
#segmentStrip .segtile .vbar { height: 5px; }
#segmentStrip .segtile-why { font-size: 12.5px; color: var(--ink-2); }
#overviewTrack .deck-pane[data-title="Summary"] .figure-src { font-size: 11px; color: var(--muted); opacity: 1; margin-top: 2px; }
.calm .kpi-caret { color: var(--muted); }
.kpi-tag { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-soft); font-size: 11px; font-weight: 500; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-tag:empty { display: none; }

/* Card structure follows the data: trend, ring, bar, balance. */
.kpirow.is-delivery { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: stretch; }
.kpirow.is-payouts { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; }
.calm .kpi { display: flex; flex-direction: column; align-items: stretch; }
.calm .kpi > .figure-src { margin-top: auto; }
.calm .kpi-more > div { min-height: 0; overflow: hidden; }
@media (max-width: 1250px) { .kpirow.is-delivery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpirow.is-payouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kpirow.is-delivery, .kpirow.is-payouts { grid-template-columns: minmax(0, 1fr); } }
.kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kpi-row > div:first-child { display: grid; gap: 2px; min-width: 0; }
.spark { margin: 0; width: 44%; max-width: 180px; height: 40px; flex: none; }
.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-area { fill: var(--accent); opacity: .08; stroke: none; }
.spark-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ring { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.2; }
.ring-track { stroke: var(--panel-3); }
.ring-fill { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: calc(var(--pct) * .9739) 100; transition: stroke-dasharray var(--t-slow) var(--ease); }
.ring b { position: relative; font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.track { display: block; height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.track i { display: block; height: 100%; width: calc(var(--pct) * 1%); border-radius: 3px; background: var(--ink); transition: width var(--t-slow) var(--ease); }
.track.is-split { background: var(--caution); }
.track.is-split i { border-radius: 3px 0 0 3px; }
.balance { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.balance-side.is-upcoming strong { color: var(--caution); }
.balance-side.is-upcoming { position: relative; padding-left: 16px; border-left: 1px solid var(--line-soft); }
.kpi-note.is-foot b { font-weight: 600; color: var(--ink); }
.calm .kpi-bar > strong { margin-bottom: -4px; }
.calm .kpi-more { gap: 0; }

/* Pipeline pane, Daily delta and Payout balance: neutral cards, colour only on the marks. */
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item { background: var(--panel); border-color: var(--line); }
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item::before { height: 3px; }
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item span { color: var(--muted); }
#overviewTrack .panel { border-radius: var(--radius); }

/* Pipeline pane: white cards, ink numbers, marks carry the colour. */
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item strong { color: var(--ink); font-size: 24px; }
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item::before { height: 2px; opacity: 1; }
#overviewTrack .deck-pane[data-title="Pipeline"] .bench-card { background: var(--panel); border: 1px solid var(--line); border-top-width: 1px; border-radius: var(--radius-sm); box-shadow: none; }
#overviewTrack .deck-pane[data-title="Pipeline"] .bench-card:hover { transform: none; border-color: #cfd4dc; box-shadow: var(--shadow-lift); }
#overviewTrack .deck-pane[data-title="Pipeline"] .bench-ring .ring-fg { stroke: var(--ink); }
#overviewTrack .deck-pane[data-title="Pipeline"] .bench-ring b { color: var(--ink); }
#overviewTrack .deck-pane[data-title="Pipeline"] .medal, #segmentStrip .medal { background: var(--panel-3); color: var(--ink-2); box-shadow: none; }
#overviewTrack .deck-pane[data-title="Pipeline"] .summary-item:hover, #overviewTrack .deck-pane[data-title="Pipeline"] .rankbar:hover { transform: none; }

/* Daily delta and Payout balance: outlined neutral chips with a coloured dot. */
#overviewTrack .deck-pane[data-title="Daily delta"] .chart-key .key-item[data-series], #overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip-item { background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); font-weight: 500; box-shadow: none; }
#overviewTrack .deck-pane[data-title="Daily delta"] .chart-key .key-item[data-series]::before, #overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip-item i { box-shadow: none; }
#overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip-item b { color: var(--ink); }
#overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip-item small { background: var(--panel-2); color: var(--muted); font-weight: 500; }
#overviewTrack .deck-pane[data-title="Daily delta"] .peakstrip { background: var(--panel-2); border: 1px solid var(--line-soft); }
#overviewTrack .deck-pane[data-title="Payout balance"] .settle { background: var(--panel-2); border: 1px solid var(--line-soft); }
#overviewTrack .deck-pane[data-title="Payout balance"] .settle b, #overviewTrack .deck-pane[data-title="Payout balance"] .settle strong { color: var(--ink); }
#overviewTrack .deck-pane[data-title="Payout balance"] .leader-row .rank { background: var(--panel-3); color: var(--ink-2); }
#overviewTrack .deck-pane[data-title="Payout balance"] .leader-row .amount { color: var(--caution); }

/* ---------- Pipeline: calm filter card and drawer ---------- */
#view-pipeline .filterbar { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 12px; }
#view-pipeline .filterbar-grid.is-two { display: flex; flex-wrap: wrap; align-items: start; gap: 12px 40px; }
#view-pipeline .filterbar-grid.is-two .fgroup { grid-template-columns: auto minmax(0, 1fr); }
#view-pipeline .fgroup.is-primary { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
#view-pipeline .fgroup-label { font-size: 12px; font-weight: 500; color: var(--muted); }
#view-pipeline .fseg { background: var(--panel-2); border-color: var(--line-soft); border-radius: 10px; }
#view-pipeline .fchip { color: var(--ink-2); border-radius: 7px; }
#view-pipeline .fchip::before { box-shadow: none; }
#view-pipeline .fchip b { background: var(--panel); border: 1px solid var(--line-soft); color: var(--ink-2); font-weight: 600; }
#view-pipeline .fchip:hover { background: var(--panel); color: var(--ink); }
#view-pipeline .fchip.is-on { background: var(--ink); color: #fff; box-shadow: none; }
#view-pipeline .fchip.is-on::before { background: var(--c); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
#view-pipeline .fchip.is-on b { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; }
#view-pipeline .fchip.is-on:hover { background: #1f2937; }
#view-pipeline .fcount { background: var(--panel-2); border: 1px solid var(--line-soft); font-weight: 600; color: var(--ink); }
#view-pipeline .fsearch input { border-radius: 8px; background: var(--panel); border-color: var(--line); }
#view-pipeline .fsearch input:focus { border-color: var(--accent); }

.fdrawer { margin: 0; }
.fdrawer > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 500; cursor: pointer; user-select: none; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.fdrawer > summary::-webkit-details-marker { display: none; }
.fdrawer > summary:hover { border-color: #cfd4dc; background: var(--panel-2); color: var(--ink); }
.fdrawer > summary svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; }
.fdrawer[open] > summary { border-color: var(--ink); color: var(--ink); background: var(--panel); }
.fdrawer.has-active > summary { border-color: var(--accent); color: var(--accent); }
.fmore-count { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.fmore-count:not(:empty) { display: inline-block; }
.fdrawer-caret { width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast) var(--ease); }
.fdrawer[open] .fdrawer-caret { transform: rotate(-135deg) translateY(-1px); }
.fdrawer-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin-top: 12px; padding: 16px 18px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-soft); animation: pop var(--t-med) var(--ease); }
@media (max-width: 1100px) { .fdrawer-body { grid-template-columns: minmax(0, 1fr); } }
.fdrawer-col { display: grid; gap: 12px; align-content: start; }
.fdrawer-head { margin: 0 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fdrawer-body .fgroup.is-stack { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fdrawer-body .fgroup.is-stack .fseg { background: var(--panel); }
.fdrawer-body .field { display: grid; gap: 6px; }
.fdrawer-body .field > span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
.fdrawer-body .field select { width: 100%; height: 32px; padding: 0 30px 0 10px; font-size: 12.5px; color: var(--ink); background-color: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.fdrawer-body .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fdrawer-body .field:has(option:checked:not([value=""])) select { border-color: var(--accent); color: var(--accent); font-weight: 500; }
.fdrawer-body .field:has(option:checked:not([value=""])) > span { color: var(--accent); }

/* ---------- Pipeline: calm cards ---------- */
#view-pipeline .partition { height: 10px; gap: 2px; margin: 0 0 4px; border-radius: 5px; }
#view-pipeline .partition .part span, #view-pipeline .partition .part b { display: none; }
#view-pipeline .partition .part { padding: 0; min-width: 4px; }
#truthFigures .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; gap: 8px; }
#truthFigures .kpi::after, #truthFigures .kpi::before { display: none; }
#truthFigures .kpi:hover { transform: none; border-color: #cfd4dc; box-shadow: var(--shadow-lift); }
#truthFigures .kpi-button[aria-pressed="true"] { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#truthFigures .kpi h3 { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
#truthFigures .kpi h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--slate)); }
#truthFigures .kpi > strong { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
#truthFigures .kpi .kpi-note { font-size: 12.5px; color: var(--ink-2); }
#truthFigures .kpi-track { margin-top: 2px; }
#truthFigures .kpi-track i { background: var(--tc, var(--ink)); }
#truthFigures .kpi-cue { color: var(--accent); }

#view-pipeline .statgroup { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 16px; }
#view-pipeline .statgroup .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#view-pipeline .statgroup .eyebrow::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--accent); }
#view-pipeline .statgroup .eyebrow em { font-size: 12px; font-weight: 400; color: var(--muted); }
#view-pipeline .stat { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px 14px; gap: 4px; box-shadow: none; }
#view-pipeline .stat::before { display: none; }
#view-pipeline .stat-n { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
#view-pipeline .stat-l { font-size: 12px; color: var(--ink-2); font-weight: 500; }
#view-pipeline .stat-sub { font-size: 11.5px; color: var(--muted); }
#view-pipeline .stat-bar i { background: var(--panel-3); height: 5px; }
#view-pipeline .stat-bar i::after { background: var(--c); }
#view-pipeline .stat-bar small { color: var(--muted); font-weight: 500; }
#view-pipeline button.stat:hover { transform: none; background: var(--panel); border-color: #cfd4dc; box-shadow: var(--shadow-lift); }
#view-pipeline button.stat[aria-pressed="true"] { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#view-pipeline .dimstrip .dim-row { background: var(--panel-2); border-color: var(--line-soft); }
#view-pipeline .dimstrip .dim-swatch i { border-radius: 50%; }
#view-pipeline .deck-pane[data-title="States"] { gap: 12px; }
#view-pipeline .statstrip { margin-top: 0; }

/* ---------- Pipeline: Delivery & makeup as three cards ---------- */
.makeup-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1100px) { .makeup-grid { grid-template-columns: minmax(0, 1fr); } }
.makeup-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 40px; align-items: start; }
@media (max-width: 1100px) { .makeup-split { grid-template-columns: minmax(0, 1fr); } }
#view-pipeline .statgroup.is-makeup { margin-top: 12px; }

.vrows { display: grid; gap: 4px; }
.vrow { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) 64px 40px; align-items: center; gap: 12px; padding: 7px 10px; margin: 0 -10px; border: 0; border-radius: 8px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: default; transition: background var(--t-fast) var(--ease); }
button.vrow { cursor: pointer; }
button.vrow:hover, .vrow[aria-pressed="true"] { background: var(--panel-2); }
.vrow[aria-pressed="true"] .vrow-label { color: var(--accent); }
.vrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vrow-label { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow-bar { display: block; height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.vrow-bar i { display: block; height: 100%; width: calc(var(--pct) * 1%); border-radius: 3px; background: var(--c); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; }
.vrow-n { font-size: 15px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.vrow-pct { font-size: 11.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.vrows-lead, .funnel-lead, .mix-lead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.vrows-lead b, .funnel-lead b, .mix-lead b { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.vrows-lead span, .funnel-lead span, .mix-lead span { display: grid; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.vrows-lead small, .funnel-lead small { font-size: 11.5px; color: var(--muted); }

.funnel-steps { display: grid; gap: 4px; }
.funnel-steps .vrow { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) 64px 40px; }

.mix { display: grid; gap: 12px; align-content: start; }
.mix-bar { display: flex; gap: 3px; height: 14px; border-radius: 7px; overflow: hidden; }
.mix-bar i { display: block; min-width: 4px; background: var(--c); transition: filter var(--t-fast) var(--ease); }
.mix-bar i:hover { filter: brightness(1.1); }
.mix-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mix-item { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-soft); }
.mix-item b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.mix-item span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.mix-item span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.mix-item small { font-size: 11.5px; color: var(--muted); }

/* ---------- Pipeline: segmented filters ---------- */
#view-pipeline .filterbar { gap: 14px; }
#view-pipeline .filterbar-top { display: flex; align-items: center; gap: 10px; }
#view-pipeline .fsearch { flex: 1 1 320px; max-width: 460px; }
#view-pipeline .fsearch input { height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; }
#view-pipeline .fsearch input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15, 20, 32, .06); }
#view-pipeline .filterbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#view-pipeline .fcount { background: transparent; border: 0; padding: 0 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
#view-pipeline .filterbar-actions .ghost { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
#view-pipeline .filterbar-actions .ghost:hover { background: var(--panel-2); color: var(--ink); border-color: #cfd4dc; }
#view-pipeline .fgroup.is-primary { padding-bottom: 0; border-bottom: 0; }
#view-pipeline .fseg { background: var(--panel-2); border: 0; padding: 3px; border-radius: 9px; gap: 2px; }
#view-pipeline .fchip { height: 30px; padding: 0 12px; border-radius: 7px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
#view-pipeline .fchip::before { width: 6px; height: 6px; box-shadow: none; }
#tDeliveredChips .fchip::before, #tConnectorChips .fchip::before, #tGateChips .fchip::before, #tDeliveryChips .fchip::before { display: none; }
#view-pipeline .fchip b { background: none; border: 0; padding: 0; color: var(--muted); font-weight: 500; font-size: 12px; }
#view-pipeline .fchip:hover { background: transparent; color: var(--ink); }
#view-pipeline .fchip.is-on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 23, 32, .08), 0 0 0 1px var(--line); }
#view-pipeline .fchip.is-on b { background: none; color: var(--ink-2); }
#view-pipeline .fchip.is-on::before { background: var(--c); box-shadow: none; }
#view-pipeline .fchip.is-on:hover { background: var(--panel); }
#view-pipeline .fgroup.is-primary .fchip { height: 32px; }
#view-pipeline .fdrawer > summary { height: 34px; }
.fdrawer-body .fgroup.is-stack .fseg { background: var(--panel-3); }

/* ---------- Pipeline: the state card ---------- */
.statecard { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.statecard-grid { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 12px 40px; align-items: center; }
@media (max-width: 1000px) { .statecard-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.donut { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.donut svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 3.4; }
.donut-track { stroke: var(--panel-3); }
.donut-arc { stroke: var(--c); transition: stroke-dasharray var(--t-slow) var(--ease), stroke-dashoffset var(--t-slow) var(--ease), stroke-width var(--t-fast) var(--ease); cursor: help; }
.donut-arc:hover { stroke-width: 4.4; }
.donut-center { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.donut-center b { font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.donut-center span { font-size: 12px; color: var(--ink-2); }
.donut-center small { font-size: 11.5px; color: var(--muted); }
.srows { display: grid; gap: 4px; }
.srow { display: grid; grid-template-columns: 8px minmax(0, 1fr) 96px 84px 44px; align-items: center; gap: 18px; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.srow:hover { background: var(--panel-2); }
.srow[aria-pressed="true"] { background: var(--panel-2); border-color: var(--line); }
.srow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.srow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.srow-main { display: grid; gap: 1px; min-width: 0; }
.srow-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.srow-main small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minibars { display: flex; align-items: flex-end; gap: 4px; height: 28px; }
.minibars i { display: block; flex: 1; height: calc(var(--h) * 1%); min-height: 3px; border-radius: 2px; background: var(--panel-3); transition: background var(--t-fast) var(--ease); }
.minibars i:last-child { background: #9aa3b2; }
.srow:hover .minibars i { background: #cfd4dc; }
.srow:hover .minibars i:last-child { background: var(--ink-2); }
.srow-n { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.srow-pct { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Pipeline: ring cards ---------- */
.ringcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; }
.ring.is-big { width: 96px; height: 96px; }
.ring.is-big circle { stroke-width: 3; }
.ring.is-big > div { position: relative; display: grid; justify-items: center; gap: 1px; text-align: center; }
.ring.is-big b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring.is-big small { font-size: 10px; color: var(--muted); max-width: 64px; line-height: 1.2; }
.kv { display: grid; }
.kv-sub { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-2); }
.kv-sub b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; font: inherit; color: inherit; text-align: left; width: 100%; }
button.kv-row { cursor: pointer; border-radius: 6px; }
button.kv-row:hover { color: var(--accent); }
.kv-row span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.kv-row span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.kv-row b { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.kv-row b small { font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* ---------- Pipeline: aligned filter rows, filled pill for the selection ---------- */
#view-pipeline .frows { display: grid; gap: 10px; }
#view-pipeline .frows .fgroup { grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; }
#view-pipeline .frows .fchips, .fdrawer-body .fchips { display: flex; flex-wrap: wrap; gap: 6px; background: none; border: 0; padding: 0; }
#view-pipeline .fchip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 500; gap: 6px; }
#view-pipeline .fchip::before { display: none; }
#tStateChips .fchip::before { display: inline-block; width: 7px; height: 7px; box-shadow: none; }
#view-pipeline .fchip b { padding: 0; border: 0; background: none; color: var(--muted); font-weight: 400; font-size: 12px; }
#view-pipeline .fchip:hover { background: var(--panel-2); color: var(--ink); border-color: #cfd4dc; }
#view-pipeline .fchip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: none; }
#view-pipeline .fchip.is-on b { color: rgba(255,255,255,.7); }
#view-pipeline .fchip.is-on::before { background: var(--c); }
#view-pipeline .fchip.is-on:hover { background: #1f2937; border-color: #1f2937; }
#view-pipeline .fchip.is-zero { opacity: .5; }
#view-pipeline .fgroup.is-primary .fchip { height: 30px; }
#view-pipeline .filterbar-actions .fmore { display: inline-flex; align-items: center; gap: 8px; }
#view-pipeline .fmore svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; }
#view-pipeline .fmore[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
#view-pipeline .fmore[aria-expanded="true"] .fdrawer-caret { transform: rotate(-135deg) translateY(-1px); }
#view-pipeline .fmore.has-active { border-color: var(--accent); color: var(--accent); }
#view-pipeline .fdrawer-body { margin-top: 0; }
#view-pipeline .fdrawer-body .fchip { height: 28px; font-size: 12px; }

/* ---------- Pipeline: state bars on one scale ---------- */
.statecard { display: grid; gap: 12px; }
.statecard-head { margin: 0 0 2px; font-size: 13px; color: var(--ink-2); }
.statecard-head b { font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-right: 6px; font-variant-numeric: tabular-nums; }
.statecard-head span { color: var(--muted); }
.srow { grid-template-columns: 8px minmax(180px, 240px) minmax(0, 1fr) 84px 44px; gap: 16px; }
.srow-bar { display: block; height: 10px; border-radius: 5px; background: var(--panel-3); overflow: hidden; }
.srow-bar i { display: block; height: 100%; width: calc(var(--pct) * 1%); min-width: 3px; border-radius: 5px; background: var(--c); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.srow-n { font-size: 16px; }

/* ---------- Pipeline: comparison bar and progress bar ---------- */
.barcard { display: grid; gap: 12px; }
.lead { display: flex; align-items: baseline; gap: 10px; }
.lead b { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.lead span { font-size: 12.5px; color: var(--ink-2); }
.splitbar { display: flex; gap: 3px; height: 14px; border-radius: 7px; overflow: hidden; }
.splitbar i { display: block; min-width: 6px; background: var(--c); }
.progress { height: 14px; border-radius: 7px; background: var(--panel-3); overflow: hidden; }
.progress i { display: block; height: 100%; width: calc(var(--pct) * 1%); min-width: 6px; border-radius: 7px; background: var(--ink); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; }
.bar-ends { display: flex; justify-content: space-between; gap: 16px; }
.bar-end { display: grid; gap: 2px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; justify-items: start; }
.bar-end:last-child { text-align: right; justify-items: end; }
.bar-end-top { display: inline-flex; align-items: baseline; gap: 6px; }
.bar-end-top b { font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-end-top small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.bar-end-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.bar-end-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bar-end:last-child .bar-end-label { flex-direction: row-reverse; }
button.bar-end { cursor: pointer; border-radius: 6px; }
button.bar-end:hover .bar-end-label { color: var(--accent); }
.bar-foot { margin: 0; font-size: 11.5px; color: var(--muted); }

#view-pipeline .fdrawer-body .fchip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
#view-pipeline .fdrawer-body .fgroup.is-stack { grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 10px; }
#view-pipeline .fdrawer-body .fgroup.is-stack .fgroup-label { padding-top: 6px; }

/* ---------- Pipeline: depth and polish ---------- */
body { background: linear-gradient(180deg, #f8f9fb 0%, var(--bg) 320px); }
#view-pipeline .filterbar, #view-pipeline .statecard, #view-pipeline .statgroup { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
#view-pipeline .statecard:hover, #view-pipeline .statgroup:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); border-color: #cfd4dc; }
#view-pipeline .filterbar { gap: 12px; }
#view-pipeline .statecard { gap: 14px; }
#view-pipeline .statgroup .eyebrow { margin: 0 0 14px; letter-spacing: .1em; color: var(--muted); }
#view-pipeline .statgroup .eyebrow::before { display: none; }
#view-pipeline .statgroup .eyebrow em { color: var(--muted); }
#view-pipeline .barcard { gap: 10px; }

/* Type ladder: headline, label, support. */
.statecard-head b, .lead b { font-size: 30px; font-weight: 650; letter-spacing: -.03em; }
.statecard-head, .statecard-head span, .lead span { color: var(--muted); }
.srow-label { color: var(--ink); font-weight: 500; }
.srow-main small, .srow-pct, .bar-end-top small, .bar-foot { color: var(--muted); }
.srow-n { font-size: 17px; font-weight: 650; color: var(--ink-2); transition: color var(--t-fast) var(--ease); }
.bar-end-top b { font-size: 19px; font-weight: 650; }
.bar-end-label { color: var(--ink); font-weight: 500; }

/* Rows: recessed on hover, bar brightens, count firms up. */
.srow { padding: 10px 12px; border-radius: 10px; }
.srow:hover { background: var(--panel-2); border-color: var(--line-soft); }
.srow:hover .srow-bar i { filter: brightness(1.08); }
.srow:hover .srow-n, .srow[aria-pressed="true"] .srow-n { color: var(--ink); }
.srow[aria-pressed="true"] { background: var(--panel-2); border-color: var(--line); box-shadow: inset 0 0 0 1px var(--panel); }
.srow-bar { height: 10px; background: var(--panel-3); box-shadow: inset 0 1px 1px rgba(16, 23, 32, .05); }
.srow-bar i { transition: filter var(--t-fast) var(--ease); }
.splitbar, .progress { height: 14px; box-shadow: inset 0 1px 1px rgba(16, 23, 32, .05); }
.progress { background: var(--panel-3); }
.bar-ends { margin-top: 2px; }
.bar-foot { margin-top: 2px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-soft); }
button.bar-end .bar-end-label { text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
button.bar-end:hover .bar-end-label { color: var(--accent); text-decoration-color: var(--accent); }

/* Filter pills: recessed neutrals, solid ink selection. */
#view-pipeline .fchip { background: var(--panel); border-color: var(--line); color: var(--ink-2); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
#view-pipeline .fchip:hover { background: var(--panel-2); border-color: #cfd4dc; color: var(--ink); }
#view-pipeline .fchip:active { transform: scale(.98); }
#view-pipeline .fchip.is-on { background: var(--ink); border-color: var(--ink); box-shadow: 0 1px 2px rgba(16, 23, 32, .2), inset 0 1px 0 rgba(255, 255, 255, .08); }
#view-pipeline .fchip.is-on:hover { background: #1a2130; border-color: #1a2130; }
#view-pipeline .fgroup-label { color: var(--muted); font-weight: 500; }
#view-pipeline .fsearch input { background: var(--panel-2); border-color: var(--line-soft); box-shadow: inset 0 1px 1px rgba(16, 23, 32, .04); }
#view-pipeline .fsearch input:focus { background: var(--panel); border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15, 20, 32, .06); }
#view-pipeline .filterbar-actions .ghost { box-shadow: 0 1px 1px rgba(16, 23, 32, .04); }
#view-pipeline .filterbar-actions .ghost:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(16, 23, 32, .06); }
#view-pipeline .fdrawer-body { margin-top: 4px; padding: 18px 20px; background: var(--panel-2); border: 1px solid var(--line-soft); box-shadow: inset 0 1px 2px rgba(16, 23, 32, .04); }
#view-pipeline .fdrawer-body .fchip { background: var(--panel); }
#view-pipeline .fdrawer-body .field select { box-shadow: 0 1px 1px rgba(16, 23, 32, .04); }

/* ---------- Pipeline: ranked list rows with badges ---------- */
.srows, .lrows { display: grid; gap: 0; }
.lrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 132px 92px 44px; align-items: center; gap: 16px; padding: 12px 8px; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: default; transition: background var(--t-fast) var(--ease); }
.lrow:first-child { border-top: 0; }
button.lrow { cursor: pointer; }
button.lrow:hover, .lrow[aria-pressed="true"] { background: var(--panel-2); border-radius: 10px; border-top-color: transparent; }
button.lrow:hover + .lrow, .lrow[aria-pressed="true"] + .lrow { border-top-color: transparent; }
.lrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.lbadge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--c) 14%, var(--panel)); color: color-mix(in srgb, var(--c) 78%, var(--ink)); font-size: 12px; font-weight: 700; letter-spacing: .04em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.lbadge.is-ring { position: relative; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-soft); }
.lbadge.is-ring svg { position: absolute; inset: 4px; width: auto; height: auto; transform: rotate(-90deg); }
.lbadge.is-ring circle { fill: none; stroke-width: 3.4; }
.lbadge.is-ring .ring-track { stroke: var(--panel-3); }
.lbadge.is-ring .ring-fill { stroke: var(--c); stroke-linecap: round; stroke-dasharray: calc(var(--pct) * .9739) 100; }
.lbadge.is-ring b { position: relative; font-size: 9.5px; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.lrow[style*="--ink"] .lbadge.is-ring .ring-fill { stroke: var(--ink); }
.lrow-main { display: grid; gap: 2px; min-width: 0; }
.lrow-label { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.lrow-main small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter { display: flex; gap: 3px; align-items: center; }
.meter i { display: block; width: 10px; height: 16px; border-radius: 3px; background: var(--panel-3); transition: background var(--t-fast) var(--ease); }
.meter i.on { background: var(--c); }
.lrow[style*="--ink"] .meter i.on { background: var(--ink); }
.lrow:hover .meter i.on { filter: brightness(1.08); }
.lrow-n { font-size: 18px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.lrow-pct { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.barcard .lrows { margin-top: 4px; }
.barcard .lrow { grid-template-columns: 40px minmax(0, 1fr) 132px 72px 40px; padding: 10px 8px; }
.barcard .lead { margin-bottom: 2px; }

/* ---------- Pipeline: the Overview card family ---------- */
.kpirow.is-states { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: stretch; }
.kpirow.is-states2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, .9fr); align-items: stretch; margin-top: 12px; }
.kpi-slots { display: contents; }
@media (max-width: 1250px) { .kpirow.is-states, .kpirow.is-states2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kpirow.is-states, .kpirow.is-states2 { grid-template-columns: minmax(0, 1fr); } }
.calm button.kpi { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.calm .kpi h3 { display: inline-flex; align-items: center; gap: 7px; }
.kpi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--slate)); }
.calm .kpi-ring .ring-fill { stroke: var(--c, var(--ink)); }
.calm .kpi-bar .track i { background: var(--c, var(--ink)); }
.calm .kpi-button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.calm .kpi .kpi-cue { display: none; }
.calm .balance-side.is-link { border: 0; background: none; padding-left: 16px; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
.calm .balance-side.is-link:hover .kpi-note { color: var(--accent); }
#view-pipeline .deck-pane[data-title="States"] { gap: 0; }

/* ---------- Pipeline: Delivery & makeup in the card family ---------- */
.kpirow.is-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.kpirow.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; margin-top: 12px; }
.kpirow.is-one { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
@media (max-width: 1100px) { .kpirow.is-two, .kpirow.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kpirow.is-two, .kpirow.is-four { grid-template-columns: minmax(0, 1fr); } }
#view-pipeline .deck-pane[data-title="Delivery & makeup"] { gap: 0; }
.tracks { display: grid; gap: 8px; margin-top: 4px; }
.tracks.is-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; }
@media (max-width: 1000px) { .tracks.is-cols { grid-template-columns: minmax(0, 1fr); } }
.trow { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) 64px 40px; align-items: center; gap: 12px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
button.trow { cursor: pointer; border-radius: 6px; }
button.trow:hover span:first-child { color: var(--accent); }
.trow > span:first-child { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .track { height: 6px; }
.trow .track i { background: var(--c); }
.trow b { font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.trow small { font-size: 11.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.calm .kpi-mix .mix-bar { margin-top: 2px; }
.calm .kpi-mix .mix-legend { gap: 10px; }
.calm .kpi-mix .mix-item { background: var(--panel-2); border-color: var(--line-soft); }

/* Delivery join: the two ends of the split sit over their bar segments. */
#truthJoin .balance { grid-template-columns: minmax(0, 1fr) auto; }
#truthJoin .balance-side.is-upcoming { border-left: 0; padding-left: 0; text-align: right; justify-items: end; }
#truthJoin .balance-side.is-upcoming strong, #truthJoin .balance-side.is-upcoming .kpi-note { text-align: right; }

/* ---------- Mini column charts beside a headline number ---------- */
.kpi-row.is-chart { align-items: flex-end; gap: 20px; }
.kpi-row.is-chart > div:first-child { flex: 0 1 auto; }
.cols { display: flex; align-items: stretch; gap: 12px; flex: 1 1 55%; max-width: 420px; height: 124px; padding: 0 4px 0 0; }
.kpi-row.is-wide .cols { max-width: 620px; flex: 1 1 60%; }
.col-bar { border-bottom: 1px solid var(--line); }
.col { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 4px; justify-items: center; }
.col b { font-size: 11.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.col-bar { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }
.col-bar i { display: block; width: 100%; max-width: 44px; height: calc(var(--h) * 1%); min-height: 4px; border-radius: 6px 6px 2px 2px; background: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); transform-origin: bottom; animation: grow-y var(--t-slow) var(--ease) both; transition: filter var(--t-fast) var(--ease); }
.col:hover .col-bar i { filter: brightness(1.08); }
.col small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.2; }
.col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.spark.is-tone .spark-line, .spark.is-tone .spark-dot { stroke: var(--c); }
.spark.is-tone .spark-dot { fill: var(--c); }
.spark.is-tone .spark-area { fill: var(--c); }
.calm .kpi-trend .kpi-row .spark { width: 40%; }
@media (prefers-reduced-motion: reduce) { .col-bar i { animation: none !important; } }

.kpi-row.is-chart > div:first-child { align-self: flex-end; padding-bottom: 18px; }

/* ---------- Pipeline: funnel, composition donut, full-width domain chart ---------- */
.funnel { display: grid; gap: 8px; flex: 1 1 60%; max-width: 520px; align-self: center; }
.fstep { display: grid; grid-template-columns: 76px minmax(0, 1fr) 56px; align-items: center; gap: 12px; }
.fstep-label { font-size: 12px; color: var(--muted); text-align: right; }
.fstep-bar { display: flex; justify-content: center; height: 22px; }
.fstep-bar i { display: block; width: calc(var(--w) * 1%); height: 100%; border-radius: 6px; background: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); transform-origin: center; animation: grow-x var(--t-slow) var(--ease) both; transition: filter var(--t-fast) var(--ease); }
.fstep:hover .fstep-bar i { filter: brightness(1.08); }
.fstep b { font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kpi-row.is-mix { align-items: center; justify-content: flex-start; gap: 28px; }
.donut.is-small { width: 132px; height: 132px; flex: none; }
.donut.is-small .donut-center b { font-size: 22px; }
.donut.is-small .donut-center span { font-size: 11px; }
.mix-legend.is-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 auto; max-width: 420px; }
.kpi-row.is-wide { gap: 40px; }
.kpi-row.is-wide .cols { max-width: none; flex: 1 1 auto; height: 132px; gap: 24px; }
.kpi-row.is-wide .col-bar i { max-width: 72px; }
.calm .kpi-row.is-chart > div:first-child { padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .fstep-bar i { animation: none !important; } }

/* ---------- Parts of a whole: one bar-list grammar ---------- */
.barlist { display: grid; gap: 9px; flex: 1 1 60%; max-width: 560px; align-self: center; }
.brow { display: grid; grid-template-columns: 96px minmax(0, 1fr) 56px 38px; align-items: center; gap: 12px; }
.brow-label { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow-bar { display: block; height: 14px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.brow-bar i { display: block; width: calc(var(--w) * 1%); height: 100%; border-radius: 4px; background: var(--c); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; transition: filter var(--t-fast) var(--ease); }
.brow:hover .brow-bar i { filter: brightness(1.08); }
.brow b { font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.brow small { font-size: 11.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
/* Column chart with a headline above it and quarter gridlines behind it. */
.kpi-head { display: flex; align-items: baseline; gap: 10px; margin: -4px 0 8px; }
.kpi-head strong { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-head .kpi-note { margin: 0; }
.cols.is-grid { max-width: none; flex: 1 1 auto; height: 150px; gap: 28px; padding: 0 8px; }
.cols.is-grid .col-bar { position: relative; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--line-soft) calc(25% - 1px) 25%); }
.cols.is-grid .col-bar i { max-width: 80px; border-radius: 5px 5px 0 0; box-shadow: none; }
.cols.is-grid .col small { color: var(--ink-2); font-size: 11px; }

/* Key rows in a bar list carry the weight; the rest recede. */
.brow.is-key .brow-label { color: var(--ink); font-weight: 600; }
.brow.is-key b { font-size: 15px; font-weight: 650; }
.brow:not(.is-key) b { color: var(--ink-2); font-weight: 500; }
/* Domain columns: one blue, deepening by rank. */
:root { --ramp-0: var(--blue); --ramp-1: color-mix(in srgb, var(--blue) 82%, var(--panel)); --ramp-2: color-mix(in srgb, var(--blue) 66%, var(--panel)); --ramp-3: color-mix(in srgb, var(--blue) 52%, var(--panel)); --ramp-4: color-mix(in srgb, var(--blue) 40%, var(--panel)); --ramp-5: color-mix(in srgb, var(--blue) 30%, var(--panel)); }

/* Outcomes by day: a real chart with room, legible axes and a legend that matches the rest. */
#view-pipeline .deck-pane[data-title="Outcomes by day"] .panel { padding: 0; }
#view-pipeline .deck-pane[data-title="Outcomes by day"] .panel-head { padding: 18px 20px 6px; align-items: flex-start; }
#view-pipeline .deck-pane[data-title="Outcomes by day"] .panel-head h2 { font-size: 13px; font-weight: 500; color: var(--muted); }
#view-pipeline .deck-pane[data-title="Outcomes by day"] #scopeNote { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
#view-pipeline .deck-pane[data-title="Outcomes by day"] #scopeNote b { display: inline-block; margin-right: 6px; font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
#view-pipeline .deck-pane[data-title="Outcomes by day"] .chart-key { gap: 8px; }
#view-pipeline .deck-pane[data-title="Outcomes by day"] .key-item { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: 12px; font-weight: 500; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
#view-pipeline .deck-pane[data-title="Outcomes by day"] .key-item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
#view-pipeline .deck-pane[data-title="Outcomes by day"] .key-item:hover { background: var(--panel-2); border-color: #cfd4dc; }
#view-pipeline .deck-pane[data-title="Outcomes by day"] .key-item.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
#view-pipeline .deck-pane[data-title="Outcomes by day"] .panel-body { padding: 8px 20px 34px; }
#view-pipeline .daybars { height: 280px; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; }
#view-pipeline .daybars-axis { font-size: 11.5px; color: var(--muted); }
#view-pipeline .daybars-track { gap: 8px; border-left-color: var(--line); border-bottom-color: var(--line); background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--line-soft) calc(25% - 1px) 25%); }
#view-pipeline .daycol-bar { width: 72%; border-radius: 5px 5px 0 0; }
#view-pipeline .daycol-x { font-size: 11px; margin-top: 8px; color: var(--muted); }
#view-pipeline .daycol-n { font-size: 12px; font-weight: 600; color: var(--ink); }

/* ---------- Delivery: the calm card family ---------- */
#view-delivery .view-head h1 { font-size: 24px; }
#view-delivery .rail-card, #view-delivery .viewstrip, #view-delivery .chartcard, #view-delivery .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
#view-delivery .chartcard:hover, #view-delivery .viewstrip:hover { border-color: #cfd4dc; box-shadow: var(--shadow-lift); }
/* Current view: one white strip, ink figures, quiet labels. */
#view-delivery .viewstrip { padding: 16px 20px; gap: 12px; }
#view-delivery .viewstrip-title b { font-size: 12px; font-weight: 500; color: var(--muted); }
#view-delivery .viewstrip-title span { font-size: 12.5px; color: var(--ink-2); }
#view-delivery .viewtile { background: var(--panel-2); border: 1px solid var(--line-soft); box-shadow: none; border-radius: 10px; padding: 10px 12px; }
#view-delivery .viewtile b { color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
#view-delivery .viewtile span { font-size: 11px; letter-spacing: .06em; }
/* Figure cards: white, ink number, dot and track carry the tone. */
#auditFigures .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; gap: 8px; }
#auditFigures .kpi:hover { transform: none; border-color: #cfd4dc; box-shadow: var(--shadow-lift); }
#auditFigures .kpi-button[aria-pressed="true"] { transform: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#auditFigures .kpi h3 { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
#auditFigures .kpi h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kpi-tone, var(--slate)); }
#auditFigures .kpi > strong { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
#auditFigures .kpi .kpi-note { font-size: 12.5px; color: var(--ink-2); }
#auditFigures .tile-share i { background: var(--panel-3); }
/* Batch rail: neutral rows, ink selection, a pending-only bar stays grey. */
#view-delivery .rail-card h2 { font-size: 12px; font-weight: 500; color: var(--muted); }
#view-delivery .rail-note { font-size: 12px; color: var(--muted); }
#view-delivery .batchrow { background: var(--panel); border-color: var(--line-soft); border-radius: 10px; }
#view-delivery .batchrow:hover { transform: none; background: var(--panel-2); border-color: #cfd4dc; box-shadow: none; }
#view-delivery .batchrow.is-on { background: var(--ink); border-color: var(--ink); box-shadow: none; }
#view-delivery .batchrow-name { font-weight: 600; }
#view-delivery .batchrow-n { font-weight: 600; }
#view-delivery .batchrow .vbar i.is-pending { background: var(--panel-3); }
#view-delivery .batchrow.is-on .vbar i.is-pending { background: rgba(255, 255, 255, .22); }
/* Chart cards: same header scale as the rest of the dashboard. */
#view-delivery .chartcard { padding: 18px 20px 20px; gap: 14px; }
#view-delivery .chart-head h2 { font-size: 13px; font-weight: 600; color: var(--ink); }
#view-delivery .chart-sub { font-size: 12px; color: var(--muted); }
#view-delivery .chart-side { font-size: 12px; }
#view-delivery .hbar-track { height: 10px; border-radius: 5px; }
#view-delivery .hbar-n { font-weight: 600; }
#view-delivery .hbar.is-on { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--c); }
#trainerBars .hbar-track i { background: var(--blue); }
#trainerBars .hbar:nth-child(n+2) .hbar-track i { background: color-mix(in srgb, var(--blue) 72%, var(--panel)); }
#trainerBars .hbar:nth-child(n+5) .hbar-track i { background: color-mix(in srgb, var(--blue) 48%, var(--panel)); }
#view-delivery .heat-cell { border-radius: 7px; }
#view-delivery .heat-cell.is-sum { background: var(--panel-2); }
#view-delivery .heat-head { font-size: 11px; letter-spacing: .06em; color: var(--muted); }
#view-delivery .key-item { font-size: 12px; color: var(--ink-2); }
#view-delivery .inventory .panel-head h2 { font-size: 13px; font-weight: 600; }
#view-delivery .export-btn { border-radius: 8px; box-shadow: var(--shadow); }

/* ---------- Global filter strip beside the segment switch ---------- */
.gfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.gf-label { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.gf-label.is-empty { font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 11.5px; color: var(--muted); opacity: .8; }
.gchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.gchip small { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.gchip i { font-style: normal; color: var(--muted); font-size: 13px; line-height: 1; }
.gchip:hover { background: var(--panel-2); border-color: #cfd4dc; }
.gchip:hover i { color: var(--concern); }
.gchip.is-clear { color: var(--ink-2); border-style: dashed; }
.gchip.is-clear:hover { color: var(--ink); }
.gchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1100px) { .gfilters { order: 3; flex-basis: 100%; } }


/* Delivery: page-wide search above the figures; export without a hairline. */
.dsearch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dsearch .fsearch { flex: 1 1 360px; max-width: 560px; }
.dsearch .fsearch input { height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; box-shadow: var(--shadow); }
.dsearch .fsearch input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15, 20, 32, .06); }
.dsearch .fcount { background: transparent; border: 0; padding: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.dsearch .fcount:empty { display: none; }
#view-delivery .export-btn { border: 0; box-shadow: 0 1px 2px rgba(16, 23, 32, .12); }
#view-delivery .export-btn:hover { box-shadow: 0 2px 6px rgba(16, 23, 32, .16); }

/* ---------- Staging banner: quiet strip in the dashboard's own voice ---------- */
body #stagingBanner { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 16px; background: var(--panel); color: var(--ink-2); border-bottom: 1px solid var(--line); font: 500 12px/1.4 var(--sans); letter-spacing: 0; text-align: left; }
body #stagingBanner .sb-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: var(--caution-soft); color: var(--caution); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
body #stagingBanner .sb-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--caution); }
body #stagingBanner .sb-meta { color: var(--muted); font-variant-numeric: tabular-nums; }
body #stagingBanner .sb-meta b { font-weight: 600; color: var(--ink); }
body #stagingBanner .sb-meta i { display: inline-block; width: 3px; height: 3px; margin: 0 8px 2px; border-radius: 50%; background: var(--line); vertical-align: middle; }
body #stagingBanner .sb-link, body #stagingBanner a { color: var(--accent); font-weight: 500; text-decoration: none; }
body #stagingBanner .sb-link:hover { text-decoration: underline; }

/* ---------- Payouts: the calm card family ---------- */
#payoutSummary .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; gap: 8px; }
#payoutSummary .kpi::before, #payoutSummary .kpi::after { display: none; }
#payoutSummary .kpi:hover, #payoutSummary .kpi-button:hover { transform: none; background: var(--panel); border-color: #cfd4dc; box-shadow: var(--shadow-lift); }
#payoutSummary .kpi-button[aria-pressed="true"] { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transform: none; }
#payoutSummary .kpi h3 { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
#payoutSummary .kpi h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--slate)); }
#payoutSummary .kpi > strong { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
#payoutSummary .kpi .kpi-note { font-size: 12.5px; color: var(--ink-2); }
#view-payouts .panel { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
#view-payouts .panel-head h2 { font-size: 13px; font-weight: 600; }
#view-payouts .medal, #view-payouts .leader-row .rank.medal { background: var(--panel-3); color: var(--ink-2); box-shadow: none; }
#view-payouts .team-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: none; }
#view-payouts .team-card::before { display: none; }
#view-payouts .team-card.is-champion { border-color: var(--line); background: var(--panel); }
#view-payouts .team-card:hover { transform: none; border-color: #cfd4dc; box-shadow: var(--shadow-lift); }
#view-payouts .leader-row { background: var(--panel); border-color: var(--line-soft); }
#view-payouts .leader-row:hover, #view-payouts .leader-row.is-linked { transform: none; background: var(--panel-2); border-color: #cfd4dc; }
#view-payouts .leader-row .amount { color: var(--caution); }
#view-payouts .settle { background: var(--panel-2); border-color: var(--line-soft); }
#view-payouts .settle-head b { color: var(--ink); }
#view-payouts .benchring { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: none; }
#view-payouts .benchring .ring-fg { stroke: var(--good); }
#view-payouts .benchring .ring-big { color: var(--ink); font-weight: 600; }
#view-payouts .benchring-lines .is-owed { color: var(--caution); }

/* ---------- Carried over: the calm card family ---------- */
#view-carried .provenance { font-size: 12.5px; color: var(--muted); }
#carriedFigures .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; gap: 8px; }
#carriedFigures .kpi::before, #carriedFigures .kpi::after { display: none; }
#carriedFigures .kpi:hover { transform: none; border-color: #cfd4dc; box-shadow: var(--shadow-lift); }
#carriedFigures .kpi-button[aria-pressed="true"] { transform: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#carriedFigures .kpi h3 { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
#carriedFigures .kpi[data-tone="aqua"] { --c: var(--aqua); } #carriedFigures .kpi[data-tone="blue"] { --c: var(--blue); }
#carriedFigures .kpi[data-tone="yellow"] { --c: var(--yellow); } #carriedFigures .kpi[data-tone="orange"] { --c: var(--orange); }
#carriedFigures .kpi[data-tone="slate"] { --c: var(--slate); }
#carriedFigures .kpi > strong { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
#carriedFigures .kpi .kpi-note { font-size: 12.5px; color: var(--ink-2); }
#carriedFigures .kpi .track i { background: var(--c, var(--ink)); }
#view-carried .panel { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
#view-carried .panel-head h2 { font-size: 13px; font-weight: 600; }
#view-carried .panel-note { font-size: 12px; color: var(--muted); }
#view-carried .medal, #view-carried .leader-row .rank.medal { background: var(--panel-3); color: var(--ink-2); box-shadow: none; }
#view-carried .leader-row { background: var(--panel); border-color: var(--line-soft); }
#view-carried .leader-row:hover, #view-carried .leader-row.is-on { transform: none; background: var(--panel-2); border-color: #cfd4dc; }
#view-carried .comp-insight { border-left: 0; border: 1px solid var(--line-soft); color: var(--ink-2); }
#view-carried .splits { gap: 16px; }
#view-carried .facet .subhead { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.barlist.is-where { max-width: none; gap: 6px; }
.barlist.is-where .brow { grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) 48px 36px; padding: 4px 6px; margin: 0 -6px; border: 0; border-radius: 8px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.barlist.is-where .brow:hover, .barlist.is-where .brow.is-on { background: var(--panel-2); }
.barlist.is-where .brow.is-on .brow-label { color: var(--ink); font-weight: 600; }
.barlist.is-where .brow-bar { height: 10px; }
.barlist.is-where .brow b { font-size: 13px; font-weight: 600; color: var(--ink); }
#view-carried .leaderboard { height: auto; align-content: start; gap: 6px; }
#view-carried .leader-row { align-self: start; padding: 8px 10px; }

/* Carried over: the two lower rows share heights; lists stay compact. */
#view-carried .split-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
#view-carried .split { align-items: stretch; }
#view-carried .splits { gap: 14px; }
#view-carried .leaderboard { gap: 6px; }
#view-carried .leader-row { padding: 7px 10px; }
#view-carried .minilist { gap: 4px; }
#view-carried .mini-row { padding: 6px 8px; margin: 0 -8px; border-radius: 8px; border: 0; background: transparent; }
#view-carried .mini-row:hover { transform: none; background: var(--panel-2); }
#view-carried .mini-row.is-on { background: var(--panel-2); border: 0; box-shadow: inset 3px 0 0 var(--c); }
#view-carried .mini-label { font-size: 12.5px; color: var(--ink-2); }
#view-carried .mini-row b { font-weight: 600; }
#carriedWhy .mini-row { padding: 10px 8px; }
#carriedWhy .minilist { gap: 6px; }

/* ---------- Pipeline: the More filters drawer continues the filter rows ---------- */
#view-pipeline .fdrawer-body { display: grid; grid-template-columns: none; gap: 10px; margin: 2px 0 0; padding: 12px 0 2px; background: none; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; box-shadow: none; animation: none; }
#view-pipeline .fdrawer-body .fgroup { grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; }
#view-pipeline .fdrawer-body .fchips { display: flex; flex-wrap: wrap; gap: 6px; }
#view-pipeline .fdrawer-body .fchip { height: 30px; }
#view-pipeline .fselects { display: flex; flex-wrap: wrap; gap: 8px; }
#view-pipeline .fselects .field { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); overflow: hidden; transition: border-color var(--t-fast) var(--ease); }
#view-pipeline .fselects .field:hover { border-color: #cfd4dc; }
#view-pipeline .fselects .field > span { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 12px; white-space: nowrap; border: 0; border-radius: 0; background: transparent; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
#view-pipeline .fselects .field > span .why { width: 14px; height: 14px; font-size: 9px; }
#view-pipeline .fselects .field select { height: 30px; min-width: 0; padding: 0 28px 0 8px; border: 0; border-left: 1px solid var(--line-soft); border-radius: 0; background-color: transparent; font-size: 12.5px; font-weight: 500; color: var(--ink); }
#view-pipeline .fselects .field select:focus { outline: none; background-color: var(--panel-2); }
#view-pipeline .fselects .field:has(option:checked:not([value=""])) { border-color: var(--ink); background: var(--ink); }
#view-pipeline .fselects .field:has(option:checked:not([value=""])) > span { color: rgba(255,255,255,.7); }
#view-pipeline .fselects .field:has(option:checked:not([value=""])) select { color: #fff; border-left-color: rgba(255,255,255,.2); }

/* The Drive layout switch sits on the Delivery tab only: it decides which Drive
   reading the delivered tasks come from, and nothing else on the page. */
.rail-drive { margin-bottom: 12px; }
.rail-drive .drive-switch { display: flex; width: 100%; margin-top: 8px; }
.rail-drive .drive-switch .segbtn { flex: 1; justify-content: center; text-align: center; }

/* Delivery header: Export CSV with Export manifest.json right below it. */
.export-row { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.export-row .export-btn { justify-content: center; text-align: center; white-space: nowrap; }