/* CS2 pipeline dashboard. Look and component recipes adapted from shadcn/ui (MIT, (c) 2023 shadcn): zinc neutrals, one
   blue accent, hairline borders that do the separating, small radii, Geist type with tabular figures. Light is the default;
   dark follows the OS, and the theme toggle overrides both ways. Our variable names stay; their values are shadcn's. */

:root {
  color-scheme: light;
  --side-w: 244px;
  --top-h: 52px;

  --bg: oklch(1 0 0);                                  /* background */
  --frame: oklch(0.985 0 0);                           /* sidebar and top bar */
  --surface: oklch(1 0 0);                             /* card */
  --surface-2: oklch(0.967 0.001 286.375);             /* muted */
  --surface-3: oklch(0.92 0.004 286.32);
  --overlay: oklch(1 0 0);
  --border: oklch(0.92 0.004 286.32);
  --border-strong: oklch(0.871 0.006 286.286);         /* input */
  --text: oklch(0.141 0.005 285.823);                  /* foreground */
  --text-2: oklch(0.442 0.017 285.786);
  --text-3: oklch(0.552 0.016 285.938);                /* muted-foreground */

  --accent: oklch(0.488 0.243 264.376);                /* primary (blue) */
  --accent-hover: oklch(0.424 0.199 265.638);
  --accent-press: oklch(0.379 0.146 265.522);
  --accent-ink: oklch(0.97 0.014 254.604);
  --accent-text: oklch(0.488 0.243 264.376);
  --accent-soft: color-mix(in oklab, var(--accent) 9%, transparent);
  --accent-soft-2: color-mix(in oklab, var(--accent) 16%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 35%, transparent);
  --ring: color-mix(in oklab, var(--accent) 30%, transparent);

  --ok: oklch(0.508 0.118 165.612);
  --ok-dot: oklch(0.696 0.17 162.48);
  --ok-soft: color-mix(in oklab, var(--ok-dot) 14%, transparent);
  --warn: oklch(0.555 0.163 48.998);
  --warn-soft: color-mix(in oklab, oklch(0.769 0.188 70.08) 18%, transparent);
  --err: oklch(0.577 0.245 27.325);                    /* destructive */
  --err-ink: oklch(0.985 0 0);
  --err-soft: color-mix(in oklab, var(--err) 10%, transparent);
  --neutral-soft: oklch(0.967 0.001 286.375);
  --tone-blue: oklch(0.488 0.243 264.376);   --tone-blue-bg: color-mix(in oklab, var(--tone-blue) 9%, transparent);
  --tone-violet: oklch(0.541 0.281 293.009); --tone-violet-bg: color-mix(in oklab, var(--tone-violet) 9%, transparent);
  --tone-rose: oklch(0.586 0.253 17.585);    --tone-rose-bg: color-mix(in oklab, var(--tone-rose) 9%, transparent);
  --tone-teal: oklch(0.511 0.096 186.391);   --tone-teal-bg: color-mix(in oklab, var(--tone-teal) 10%, transparent);
  --tone-amber: oklch(0.555 0.163 48.998);   --tone-amber-bg: color-mix(in oklab, oklch(0.769 0.188 70.08) 16%, transparent);
  --tone-slate: oklch(0.442 0.017 285.786);  --tone-slate-bg: oklch(0.967 0.001 286.375);

  --series: oklch(0.546 0.245 262.881);                /* chart-3 */
  --grid: oklch(0.92 0.004 286.32);
  --focus: oklch(0.546 0.245 262.881);
  --scroll-shade: rgba(9, 9, 11, 0.12);
  --duel-home: var(--series); --duel-market: var(--tone-violet); --duel-away: var(--surface-3);
  --log-bg: oklch(0.21 0.006 285.885); --log-text: oklch(0.92 0.004 286.32); --log-dim: oklch(0.705 0.015 286.067); --log-err: #ff9492; --log-warn: #f3c46f;

  --tab-on: oklch(1 0 0);
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --card-highlight: 0 0 #0000;
  --shadow-2: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-3: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tab-on: oklch(0.37 0.013 285.805);
    --bg: oklch(0.141 0.005 285.823); --frame: oklch(0.21 0.006 285.885); --surface: oklch(0.21 0.006 285.885);
    --surface-2: oklch(0.274 0.006 286.033); --surface-3: oklch(0.37 0.013 285.805); --overlay: oklch(0.21 0.006 285.885);
    --border: oklch(1 0 0 / 10%); --border-strong: oklch(1 0 0 / 15%);
    --text: oklch(0.985 0 0); --text-2: oklch(0.871 0.006 286.286); --text-3: oklch(0.705 0.015 286.067);
    --accent: oklch(0.546 0.245 262.881); --accent-hover: oklch(0.623 0.214 259.815); --accent-press: oklch(0.488 0.243 264.376);
    --accent-ink: oklch(0.985 0 0); --accent-text: oklch(0.707 0.165 254.624);
    --accent-soft: color-mix(in oklab, var(--accent) 20%, transparent); --accent-soft-2: color-mix(in oklab, var(--accent) 30%, transparent);
    --accent-line: color-mix(in oklab, var(--accent) 50%, transparent); --ring: color-mix(in oklab, var(--accent) 45%, transparent);
    --ok: oklch(0.765 0.177 163.223); --ok-dot: oklch(0.765 0.177 163.223); --ok-soft: color-mix(in oklab, var(--ok) 16%, transparent);
    --warn: oklch(0.828 0.189 84.429); --warn-soft: color-mix(in oklab, var(--warn) 15%, transparent);
    --err: oklch(0.704 0.191 22.216); --err-ink: oklch(0.141 0.005 285.823); --err-soft: color-mix(in oklab, var(--err) 16%, transparent);
    --neutral-soft: oklch(1 0 0 / 7%);
    --tone-blue: oklch(0.707 0.165 254.624);   --tone-blue-bg: color-mix(in oklab, var(--tone-blue) 16%, transparent);
    --tone-violet: oklch(0.702 0.183 293.541); --tone-violet-bg: color-mix(in oklab, var(--tone-violet) 16%, transparent);
    --tone-rose: oklch(0.712 0.194 13.428);    --tone-rose-bg: color-mix(in oklab, var(--tone-rose) 15%, transparent);
    --tone-teal: oklch(0.777 0.152 181.912);   --tone-teal-bg: color-mix(in oklab, var(--tone-teal) 14%, transparent);
    --tone-amber: oklch(0.828 0.189 84.429);   --tone-amber-bg: color-mix(in oklab, var(--tone-amber) 14%, transparent);
    --tone-slate: oklch(0.705 0.015 286.067);  --tone-slate-bg: oklch(1 0 0 / 7%);
    --series: oklch(0.623 0.214 259.815); --grid: oklch(1 0 0 / 9%); --focus: oklch(0.707 0.165 254.624);
    --scroll-shade: rgba(0, 0, 0, 0.55); --log-bg: oklch(0.141 0.005 285.823); --log-text: oklch(0.92 0.004 286.32); --log-dim: oklch(0.705 0.015 286.067); --log-err: #ff8a88; --log-warn: #f0bd62;
    --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.3); --card-highlight: 0 0 #0000;
    --shadow-2: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); --shadow-3: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --tab-on: oklch(0.37 0.013 285.805);
  --bg: oklch(0.141 0.005 285.823); --frame: oklch(0.21 0.006 285.885); --surface: oklch(0.21 0.006 285.885);
  --surface-2: oklch(0.274 0.006 286.033); --surface-3: oklch(0.37 0.013 285.805); --overlay: oklch(0.21 0.006 285.885);
  --border: oklch(1 0 0 / 10%); --border-strong: oklch(1 0 0 / 15%);
  --text: oklch(0.985 0 0); --text-2: oklch(0.871 0.006 286.286); --text-3: oklch(0.705 0.015 286.067);
  --accent: oklch(0.546 0.245 262.881); --accent-hover: oklch(0.623 0.214 259.815); --accent-press: oklch(0.488 0.243 264.376);
  --accent-ink: oklch(0.985 0 0); --accent-text: oklch(0.707 0.165 254.624);
  --accent-soft: color-mix(in oklab, var(--accent) 20%, transparent); --accent-soft-2: color-mix(in oklab, var(--accent) 30%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 50%, transparent); --ring: color-mix(in oklab, var(--accent) 45%, transparent);
  --ok: oklch(0.765 0.177 163.223); --ok-dot: oklch(0.765 0.177 163.223); --ok-soft: color-mix(in oklab, var(--ok) 16%, transparent);
  --warn: oklch(0.828 0.189 84.429); --warn-soft: color-mix(in oklab, var(--warn) 15%, transparent);
  --err: oklch(0.704 0.191 22.216); --err-ink: oklch(0.141 0.005 285.823); --err-soft: color-mix(in oklab, var(--err) 16%, transparent);
  --neutral-soft: oklch(1 0 0 / 7%);
  --tone-blue: oklch(0.707 0.165 254.624);   --tone-blue-bg: color-mix(in oklab, var(--tone-blue) 16%, transparent);
  --tone-violet: oklch(0.702 0.183 293.541); --tone-violet-bg: color-mix(in oklab, var(--tone-violet) 16%, transparent);
  --tone-rose: oklch(0.712 0.194 13.428);    --tone-rose-bg: color-mix(in oklab, var(--tone-rose) 15%, transparent);
  --tone-teal: oklch(0.777 0.152 181.912);   --tone-teal-bg: color-mix(in oklab, var(--tone-teal) 14%, transparent);
  --tone-amber: oklch(0.828 0.189 84.429);   --tone-amber-bg: color-mix(in oklab, var(--tone-amber) 14%, transparent);
  --tone-slate: oklch(0.705 0.015 286.067);  --tone-slate-bg: oklch(1 0 0 / 7%);
  --series: oklch(0.623 0.214 259.815); --grid: oklch(1 0 0 / 9%); --focus: oklch(0.707 0.165 254.624);
  --scroll-shade: rgba(0, 0, 0, 0.55); --log-bg: oklch(0.141 0.005 285.823); --log-text: oklch(0.92 0.004 286.32); --log-dim: oklch(0.705 0.015 286.067); --log-err: #ff8a88; --log-warn: #f0bd62;
  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.3); --card-highlight: 0 0 #0000;
  --shadow-2: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); --shadow-3: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--bg); color: var(--text);
  font: 14px/20px var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.plain { overflow: auto; }
svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-text); }
p { margin: 0; }
::selection { background: var(--accent-soft-2); }
h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
h2 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 4px var(--ring); }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-2) 32%, transparent) transparent; }

.skip { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface); color: var(--text); }
.skip:focus { top: 12px; }
.icon { width: 16px; height: 16px; flex: none; }
.muted { color: var(--text-3); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12px; }
.nowrap { white-space: nowrap; }
.lede { margin-top: 4px; max-width: 90ch; color: var(--text-3); font-size: 14px; }

/* ------------------------------------------------------------ top bar */
.topbar {
  position: relative; z-index: 30; height: var(--top-h); flex: none; padding: 0 16px;
  display: flex; align-items: center; gap: 14px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.brand-slot { width: calc(var(--side-w) - 16px); flex: none; transition: width 0.2s var(--ease); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; border-radius: var(--r-sm); }
.brand-mark { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--r); background: var(--accent); }
.brand-mark svg { width: 15px; height: 15px; fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.brand-name span { color: var(--accent-text); }
.spacer { flex: 1; }
.conn {
  height: 32px; padding: 0 12px; flex: none; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); color: var(--text-2);
  font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.conn:hover { background: var(--surface-2); color: var(--text); }
.conn-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--text-3); }
.conn[data-state="ok"] .conn-dot { background: var(--ok-dot); box-shadow: 0 0 0 3px var(--ok-soft); }
.conn[data-state="warn"] .conn-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.conn[data-state="err"] .conn-dot { background: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }
.user-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.avatar {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 999px;
  background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; text-transform: uppercase;
}

/* ------------------------------------------------------------ sidebar */
.frame { height: calc(100vh - var(--top-h)); height: calc(100dvh - var(--top-h)); display: flex; }
.sidebar {
  width: var(--side-w); height: 100%; flex: none; padding: 12px 8px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  overflow-x: hidden; overflow-y: auto; background: var(--frame); border-right: 1px solid var(--border);
  transition: width 0.2s var(--ease);
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  padding: 16px 8px 6px; overflow: hidden; white-space: nowrap;
  color: color-mix(in oklab, var(--text-3) 85%, transparent); font-size: 12px; font-weight: 500;
}
.nav-label:first-child { padding-top: 4px; }
.side-nav a {
  height: 32px; padding: 0 8px; display: flex; align-items: center; gap: 10px; border-radius: var(--r);
  color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color 0.12s var(--ease), color 0.12s var(--ease);
}
.side-nav a:hover { background: var(--surface-2); color: var(--text); }
.side-nav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }   /* same weight as the others: choosing never moves text */
.side-nav a[aria-current="page"] .icon { color: var(--accent-text); }
.side-nav .icon { width: 16px; height: 16px; }
.nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-count { min-width: 20px; padding: 0 5px; border-radius: 999px; color: var(--text-3); font-size: 12px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.nav-count.alert { background: var(--err-soft); color: var(--err); font-weight: 600; }
.side-nav a[aria-current="page"] .nav-count:not(.alert) { color: inherit; }
.side-foot { display: flex; flex-direction: column; gap: 6px; }
.side-card {
  padding: 12px; display: block; border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); text-decoration: none;
}
.side-card.warn { border-color: color-mix(in oklab, var(--warn) 40%, transparent); background: var(--surface); }
.side-card.warn .side-card-head { color: var(--warn); }
.side-card-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.side-card p { margin-top: 4px; color: var(--text-3); font-size: 12px; line-height: 16px; }
.more-btn { display: none; }
.collapse-btn {
  height: 32px; padding: 0 8px; text-align: left; display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: var(--r); background: transparent; color: var(--text-3);
  font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color 0.12s var(--ease), color 0.12s var(--ease);
}
.collapse-btn:hover { background: var(--surface-2); color: var(--text); }
.collapse-btn .icon { transition: transform 0.2s var(--ease); }
@media (min-width: 721px) {
  html[data-sidebar="collapsed"] { --side-w: 60px; }
  html[data-sidebar="collapsed"] .nav-text, html[data-sidebar="collapsed"] .nav-count, html[data-sidebar="collapsed"] .side-card { display: none; }
  html[data-sidebar="collapsed"] .nav-label { height: 1px; margin: 10px 6px; padding: 0; background: var(--border); color: transparent; }
  html[data-sidebar="collapsed"] .side-nav a, html[data-sidebar="collapsed"] .collapse-btn { padding: 0; justify-content: center; }
  html[data-sidebar="collapsed"] .collapse-btn .icon { transform: rotate(180deg); }
  html[data-sidebar="collapsed"] .brand-slot { width: auto; }
}

/* ------------------------------------------------------------ main column */
.main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.scroller { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
.view { max-width: 1440px; margin: 0 auto; padding: 20px 24px 56px; outline: none; container: view / inline-size; transition: opacity 0.14s var(--ease); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.eyebrow {
  margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
  color: var(--text-3); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
}
.eyebrow i { color: var(--ok-dot); font-size: 9px; font-style: normal; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: stretch; gap: 16px; }
@container view (max-width: 1000px) { .grid-main { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ buttons and forms */
.btn {
  height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1);
  color: var(--text); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color 0.12s var(--ease), border-color 0.12s var(--ease), color 0.12s var(--ease), transform 0.12s var(--ease);
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }
.btn .icon { width: 16px; height: 16px; }
.btn.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.block { width: 100%; }
.icon-btn {
  all: unset; box-sizing: border-box; width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center;
  border-radius: var(--r); color: var(--text-3); cursor: pointer; transition: background-color 0.12s var(--ease), color 0.12s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.theme-light, .theme-dark { display: none; }
:root:not([data-theme="dark"]) .theme-dark { display: block; }
:root[data-theme="dark"] .theme-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-dark { display: none; }
  :root:not([data-theme="light"]) .theme-light { display: block; }
}
.field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.field > span { color: var(--text); font-size: 14px; font-weight: 500; }
.field input {
  width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r);
  background: transparent; box-shadow: var(--shadow-1); color: var(--text); font-size: 14px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field input:hover { border-color: var(--border-strong); }
.field input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }

/* a switch is a form button, so it works without scripts and goes through the CSRF check */
.toggle { all: unset; box-sizing: border-box; position: relative; width: 34px; height: 20px; flex: none; border: 1px solid transparent; border-radius: 999px; background: var(--border-strong); box-shadow: var(--shadow-1); cursor: pointer; transition: background-color 0.15s var(--ease); }
.toggle::after { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: transform 0.15s var(--ease); }
.toggle[aria-checked="true"] { background: var(--accent); }
.toggle[aria-checked="true"]::after { transform: translateX(14px); background: var(--accent-ink); }
.toggle.danger[aria-checked="true"] { background: var(--err); }
.toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch-row { padding: 14px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.switch-row + .switch-row { border-top: 1px solid var(--border); }
.switch-row strong { display: block; font-weight: 500; }
.switch-row span { color: var(--text-3); font-size: 13px; }
.switch-row small { display: block; margin-top: 4px; color: var(--text-3); font-size: 12px; }

/* ------------------------------------------------------------ surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1), var(--card-highlight); }
.card-head { padding: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.card-head p { margin-top: 4px; color: var(--text-3); font-size: 13px; line-height: 18px; }
.card-body { padding: 16px; }
.badge {
  padding: 1px 8px; display: inline-flex; align-items: center; gap: 5px; vertical-align: 1px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--text-2);
  font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
button.badge { border: 0; font-family: inherit; cursor: pointer; }
button.badge:hover { color: var(--text-1, inherit); }
button.badge:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
.bankroll { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.bankroll input { width: 110px; padding: 4px 8px; border: 1px solid var(--border, currentColor); border-radius: 6px; background: transparent;
  color: inherit; font: inherit; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .card-head.with-control { flex-direction: column; align-items: stretch; gap: 10px; }
  .card-head.with-control .bankroll input { flex: 1; width: auto; }
}
/* a long description shows its first line and a "More" link that opens the rest (set by app.js, so without scripts it all shows) */
.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.more-link {
  all: unset; margin-top: 2px; display: inline-block; color: var(--text-2); font-size: 12.5px; font-weight: 500; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
}
.more-link:hover { color: var(--text); text-decoration-color: currentColor; }
.more-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.table a, .card-body a, .help-list a { text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 3px; }
.table a:hover, .card-body a:hover, .help-list a:hover { text-decoration-color: currentColor; }
/* help: a glossary, each term above its meaning with a hairline between entries; a term linked from elsewhere lights up */
.help-list { margin: 0; padding: 2px 20px 6px; }
.help-list dt { padding-top: 14px; color: var(--text); font-size: 14px; font-weight: 600; scroll-margin-top: 12px; }
.help-list dt + dd { margin: 4px 0 0; padding-bottom: 14px; max-width: 78ch; color: var(--text-2); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.help-list dd + dt { border-top: 1px solid var(--border); }
.help-list dt:target { color: var(--accent-text); }
.help-list dt:target + dd { color: var(--text); }
.grid-main.top { align-items: start; }
.grid-main.top > .stack > .card:last-child { flex: none; }
.badge.ok { border-color: transparent; background: var(--ok-soft); color: var(--ok); }
.badge.warn { border-color: transparent; background: var(--warn-soft); color: var(--warn); }
.badge.err { border-color: transparent; background: var(--err-soft); color: var(--err); }
.badge.info { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
.notice { padding: 12px 16px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text-2); }
.notice .icon { margin-top: 2px; color: var(--text-3); }
.notice strong { color: var(--text); font-weight: 600; }
.notice.ok { border-color: color-mix(in oklab, var(--ok) 30%, transparent); background: var(--surface); }
.notice.ok .icon, .notice.ok strong { color: var(--ok); }
.notice.warn { border-color: color-mix(in oklab, var(--warn) 35%, transparent); background: var(--surface); }
.notice.warn .icon { color: var(--warn); }
.notice.err { border-color: color-mix(in oklab, var(--err) 35%, transparent); background: var(--surface); }
.notice.err .icon, .notice.err strong { color: var(--err); }
.notice-body { flex: 1; min-width: 0; }
.notice ul { margin: 6px 0 0; padding-left: 18px; }
.notice li + li { margin-top: 3px; }

/* ------------------------------------------------------------ pipeline stages */
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@container view (max-width: 900px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stage { min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
a.stage:hover { border-color: var(--border-strong); }
.stage-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.stage-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--text-3); }
.stage[data-state="ok"] .stage-dot { background: var(--ok-dot); box-shadow: 0 0 0 3px var(--ok-soft); }
.stage[data-state="warn"] .stage-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.stage[data-state="err"] .stage-dot { background: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }
.stage[data-state="off"] { background: var(--surface-2); box-shadow: none; }
.stage-state { margin-left: auto; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-3); font-size: 12px; font-weight: 500; line-height: 18px; }
.stage[data-state="err"] .stage-state { color: var(--err); }
.stage[data-state="warn"] .stage-state { color: var(--warn); }
.stage-detail { color: var(--text-3); font-size: 13px; line-height: 18px; }

/* ------------------------------------------------------------ tiles */
/* a row of figures is one strip divided by hairlines (Kodachrome: hairlines instead of cards): a tracked-caps label, the
   figure, one line of context. The cells share the row when they fit and the strip scrolls sideways when they don't (14
   jobs, or a phone); text wraps and is never cut off. Colour marks only a problem (a red dot before the label). */
.kpis {
  display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1);
}
.kpis > .kpi { flex: 1 0 158px; scroll-snap-align: start; }
.kpis > .kpi.card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.kpis > .kpi + .kpi { box-shadow: inset 1px 0 0 var(--border); }
@container view (max-width: 640px) {
  .kpis > .kpi { flex-basis: 158px; }
  .kpi .k-value { font-size: 18px; line-height: 24px; }   /* beats the base rule below */
}
@media (max-width: 720px) {
  /* On a phone the cards wrap into two columns instead of a sideways scroll: every figure is on screen at once. */
  .kpis { flex-wrap: wrap; overflow-x: visible; }
  .kpis > .kpi { flex: 1 1 calc(50% - 1px); min-width: 140px; box-shadow: inset 1px 0 0 var(--border), inset 0 1px 0 var(--border); }
  .kpis > .kpi:first-child, .kpis > .kpi:nth-child(2) { box-shadow: inset 1px 0 0 var(--border); }

  /* A marked table becomes a list of cards: the match on its own line, the rest as "label value" chips. */
  .table[data-phone-cards] thead { display: none; }
  .table[data-phone-cards] tbody tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 11px 14px; border-top: 1px solid var(--border);
  }
  .table[data-phone-cards] tbody tr:first-child { border-top: 0; }
  .table[data-phone-cards] td { display: block; height: auto; padding: 0; border: 0; white-space: normal; }
  .table[data-phone-cards] td:empty { display: none; }
  .table[data-phone-cards] td.phone-title { flex: 1 1 100%; order: -1; margin-bottom: 2px; }
  .table[data-phone-cards] td[data-label]::before {
    content: attr(data-label) " "; color: var(--text-3); font-size: 11px; font-weight: 500; text-transform: none;
  }
  .table[data-phone-cards] td .t-sub { display: inline; margin-left: 4px; }
  .table[data-phone-cards] td.phone-title .t-sub { display: block; margin-left: 0; }
  .table[data-phone-cards] .table-scroll, .table-scroll:has(> .table[data-phone-cards]) { overflow-x: visible; }
  .table[data-phone-cards].frozen td:first-child, .table[data-phone-cards].frozen th:first-child { position: static; }

  /* Columns a phone can do without: the row still opens its full detail on a tap. Last, and named on the card rule too,
     so a card's cells cannot bring them back. */
  .table th.phone-hide, .table td.phone-hide, .table[data-phone-cards] td.phone-hide { display: none; }
}
.kpi { position: relative; min-width: 0; padding: 10px 14px 11px; display: flex; text-decoration: none; color: inherit; transition: background-color 0.12s var(--ease); }
a.kpi:hover { background: var(--surface-2); }
.kpis > .kpi[aria-current="true"] { background: var(--accent-soft); box-shadow: inset 1px 0 0 var(--border), inset 0 -2px 0 var(--accent); }   /* the chosen cell, same size */
.kpis.strip > .kpi { flex: 0 0 214px; }   /* the Jobs page's 14 jobs: equal cells */
.k-icon { display: none; }   /* decoration only; a problem shows as the red dot */
.k-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.k-label {
  display: flex; align-items: center; gap: 6px; color: var(--text-3);
  font-size: 11px; font-weight: 500; line-height: 15px; letter-spacing: 0.05em; text-transform: uppercase; overflow-wrap: anywhere;
}
.kpi[data-tone="teal"] .k-value { color: var(--ok); }
.kpi[data-tone="rose"] .k-value { color: var(--err); }
.kpi[data-tone="amber"] .k-value { color: var(--warn); }
.kpi[data-tone="blue"] .k-value { color: var(--accent-text); }
.kpi[data-tone="violet"] .k-value { color: var(--tone-violet); }
.kpi[data-tone="rose"] .k-label::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--err); }
.k-value { color: var(--text); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.k-sub { min-width: 0; color: var(--text-3); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.kpi[data-tone="blue"] { --tone-bg: var(--tone-blue-bg); --tone-fg: var(--tone-blue); }
.kpi[data-tone="violet"] { --tone-bg: var(--tone-violet-bg); --tone-fg: var(--tone-violet); }
.kpi[data-tone="rose"] { --tone-bg: var(--tone-rose-bg); --tone-fg: var(--tone-rose); }
.kpi[data-tone="teal"] { --tone-bg: var(--tone-teal-bg); --tone-fg: var(--tone-teal); }
.kpi[data-tone="amber"] { --tone-bg: var(--tone-amber-bg); --tone-fg: var(--tone-amber); }
.kpi[data-tone="slate"] { --tone-bg: var(--tone-slate-bg); --tone-fg: var(--tone-slate); }

/* ------------------------------------------------------------ tables */
.table-card { position: relative; overflow: clip; }
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table th {
  position: sticky; top: 0; z-index: 2; height: 40px; padding: 0 16px; text-align: left; white-space: nowrap;
  background: var(--surface); border-bottom: 1px solid var(--border);
  color: var(--text-3); font-size: 13px; font-weight: 500;
}
.table td { height: 44px; padding: 7px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color 0.12s var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.fig { font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.wrap-text { min-width: 260px; max-width: 520px; color: var(--text-2); white-space: normal; }   /* never squeezed to a sliver: a narrow screen scrolls the table instead */
.t-main { color: var(--text); font-weight: 500; line-height: 20px; white-space: nowrap; }
.table td:has(> .t-main) { min-width: 220px; }
.table td { max-width: 560px; }
.t-sub { margin-top: 1px; color: var(--text-3); font-size: 12.5px; line-height: 17px; }
.empty-row td { height: auto; padding: 48px 16px; text-align: center; color: var(--text-3); }
.move-up { color: var(--ok); } .move-down { color: var(--err); }
.limit-up { color: var(--accent-text); font-weight: 600; }

/* tabs: a muted track with the chosen tab raised and filled (shadcn Tabs), so a row of tabs reads as tabs */
.tabs {
  width: fit-content; max-width: 100%; padding: 3px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
}
.card > .tabs { max-width: calc(100% - 32px); margin: 12px 16px; }
.tab {
  height: 30px; flex: none; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border-radius: 7px;
  color: var(--text-3); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color 0.12s var(--ease), border-color 0.12s var(--ease);
}
.tab:hover { color: var(--text); }
.tab[aria-current="true"] { background: var(--tab-on); color: var(--text); box-shadow: var(--shadow-1), 0 0 0 1px var(--border); }   /* fill only, so the tabs never shift */
.tab .count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 500; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.tab[aria-current="true"] .count { background: var(--accent-soft); color: var(--accent-text); }
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ------------------------------------------------------------ charts */
.columns { height: 150px; padding: 8px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 3px; }
.column { position: relative; height: 100%; display: flex; align-items: flex-end; border-radius: 3px; }
.column > span {
  display: block; width: 100%; min-height: 2px; height: calc(var(--h) * 100%); border-radius: 4px 4px 0 0;
  background: var(--series); transform-origin: bottom; animation: col-in 0.35s var(--ease) both;
}
.column.zero > span { background: var(--grid); }
.column:hover > span { opacity: 0.8; }
.column:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@keyframes col-in { from { transform: scaleY(0); } }
.axis { margin-top: 6px; display: flex; justify-content: space-between; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart { width: 100%; height: auto; overflow: visible; display: block; }
.chart-line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-line.up { stroke: var(--ok); }
.chart-area { fill: color-mix(in oklab, var(--ok) 14%, transparent); stroke: none; }
.chart-zero { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.chart-dot { fill: var(--series); }
.chart-line.up ~ .chart-dot { fill: var(--ok); }
.fig .good, td .good { color: var(--ok); }
.fig .bad, td .bad { color: var(--err); }
.chart-note { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-3); font-size: 13px; }
.chart-note b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.meter { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.meter > span { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 999px; background: var(--accent); }
.meter.warn > span { background: var(--warn); }
.meter.err > span { background: var(--err); }

/* ------------------------------------------------------------ linking */
.table td.side { min-width: 230px; padding-top: 10px; padding-bottom: 10px; vertical-align: top; }
.cands { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }
.cands form { display: contents; }
.cands .btn .muted { font-weight: 500; font-size: 11px; }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; }
@container view (max-width: 640px) { .search-form { grid-template-columns: minmax(0, 1fr); } }
.facts { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fact-miss { background: var(--warn-soft); color: var(--warn); }
.inline-form { display: inline; }
.bar-row { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); align-items: center; gap: 12px; }
.bar-row + .bar-row { margin-top: 8px; }
.bar-label { overflow: hidden; color: var(--text-2); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ spreadsheet-style table */
.sheet { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sheet th, .sheet td { height: 32px; padding: 0 10px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left; background: var(--surface); }
.sheet th:last-child, .sheet td:last-child { border-right: 0; }
.sheet thead th { background: var(--surface-2); color: var(--text-3); font-size: 12px; font-weight: 500; }
.sheet thead tr.group th { height: 30px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; }
.sheet .n { text-align: right; }
.sheet td.n { font-size: 12.5px; }
.sheet tbody tr:nth-child(even of :not(.day-detail)) td { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.sheet tbody tr:not(.day-detail):hover td { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }   /* opaque, so the frozen column never shows cells beneath */
.sheet td:first-child, .sheet th:first-child { position: sticky; left: 0; z-index: 2; font-weight: 600; box-shadow: inset -1px 0 0 var(--border-strong); }
.sheet thead tr.group th { position: sticky; top: 0; z-index: 4; }
.sheet thead tr.cols th { position: sticky; top: var(--sheet-group-h, 29px); z-index: 4; }
.sheet thead th:first-child, .sheet tfoot td:first-child { z-index: 5; }
.sheet tfoot td { position: sticky; bottom: 0; z-index: 4; }
.sheet-scroll { max-height: min(62vh, 540px); overflow: auto; overscroll-behavior-x: contain; }
.sheet-more { position: sticky; left: 0; padding: 10px 16px; color: var(--text-3); font-size: 12px; text-align: center; }
.sheet tfoot td { background: var(--surface-2); border-top: 2px solid var(--border-strong); border-bottom: 0; font-weight: 700; }
.sheet .cell-ok { color: var(--ok); font-weight: 600; }
.sheet .cell-err { color: var(--err); font-weight: 600; }
.sheet .cell-warn { color: var(--warn); }
.sheet .cell-run { color: var(--accent-text); font-weight: 600; }
.sheet .cell-muted { color: var(--text-3); }

.dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.dl dt { color: var(--text-3); font-size: 12px; }
.dl dd { margin: 0; color: var(--text); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ cards side by side share a height; long lists scroll inside */
.grid-main > .card, .grid-main > .stack > .card { min-width: 0; display: flex; flex-direction: column; }
.grid-main > .stack > .card:last-child { flex: 1 1 auto; }
.scroll-body {
  max-height: var(--scroll-max, 420px); overflow: auto; overscroll-behavior-x: contain;
  /* a soft shadow at an edge with more rows beyond it */
  background:
    linear-gradient(var(--surface) 30%, transparent) center top / 100% 36px no-repeat local,
    linear-gradient(transparent, var(--surface) 70%) center bottom / 100% 36px no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--scroll-shade), transparent) center top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--scroll-shade), transparent) center bottom / 100% 10px no-repeat scroll;
  background-color: var(--surface);
}
.scroll-body.tall { --scroll-max: min(70vh, 640px); }
.scroll-body > .sheet-more { position: static; }
/* a .fill card takes the height its neighbour sets and scrolls the rest */
@container view (min-width: 1001px) {
  .grid-main > .fill, .grid-main > .stack > .fill { contain: size; min-height: var(--fill-min, 280px); }
  .grid-main > .stack > .fill { flex: 1 1 auto; }
  .grid-main .fill > .scroll-body { flex: 1 1 0; min-height: 0; max-height: none; }
}
.table.compact td { height: 38px; padding-top: 4px; padding-bottom: 4px; }

/* ------------------------------------------------------------ daily HLTV table: a row opens its day */
.sheet tr.day-row { cursor: pointer; }
.sheet tr.day-row:focus-visible { outline: none; }
.sheet tr.day-row:focus-visible td { box-shadow: inset 0 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
.sheet tr.day-row[aria-current="true"] td { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.sheet tr.day-row[aria-current="true"] td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset -1px 0 0 var(--border-strong); }
.day-chev {
  width: 6px; height: 6px; margin: 0 10px 2px 1px; display: inline-block; vertical-align: middle;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(-45deg);
}
.sheet tr.day-row[aria-current="true"] .day-chev { border-color: var(--accent-text); }
.sheet td.needs .badge + .badge { margin-left: 4px; }
.row-hint { margin-left: 4px; color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------ drawer: a day's details over the page, from the right */
.drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / 0.5); animation: fade-in 0.2s var(--ease) both; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(760px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-3); animation: drawer-in 0.22s var(--ease) both;
}
@keyframes drawer-in { from { opacity: 0; transform: translateX(28px); } }
html.drawer-open .scroller { overflow: hidden; }
.drawer-head { padding: 16px 16px 16px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.drawer-titles { min-width: 0; }
.drawer-context { color: var(--text-3); font-size: 12.5px; }
.drawer-head h2 { margin-top: 2px; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.drawer-summary { margin-top: 2px; color: var(--text-3); font-size: 13px; }
.drawer-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.drawer-chips:empty { display: none; }
.drawer-tools { flex: none; display: flex; gap: 2px; }
.drawer-tools .icon-btn:disabled { opacity: 0.35; cursor: default; }
.drawer-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.drawer-loading { padding: 18px 20px; color: var(--text-3); }
.drawer-section { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.drawer-section:last-child { border-bottom: 0; }
.drawer-section h3 { margin: 0 0 10px; color: var(--text); font-size: 14px; font-weight: 600; }
.section-note { margin: -4px 0 8px; color: var(--text-3); font-size: 12px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
@media (max-width: 560px) { .field-grid { grid-template-columns: minmax(0, 1fr); } }
.field-label { color: var(--text-3); font-size: 11.5px; }
.field-value { margin-top: 1px; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.run-log { margin-top: 8px; }
.run-log summary { color: var(--text-2); font-size: 12px; cursor: pointer; }
.run-log summary:hover { color: var(--text); }
.mini-row.three { grid-template-columns: 88px minmax(0, 0.8fr) minmax(0, 2fr); }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-backdrop { animation: none; } }
.fix { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.fix + .fix { margin-top: 8px; }
.fix.err { border-color: color-mix(in srgb, var(--err) 30%, transparent); background: var(--err-soft); }
.fix.warn { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-soft); }
.fix.ok { border-color: transparent; background: var(--ok-soft); }
.fix-title { color: var(--text); font-weight: 600; }
.fix.err .fix-title { color: var(--err); }
.fix.warn .fix-title { color: var(--warn); }
.fix.ok .fix-title { color: var(--ok); }
.fix p { max-width: 82ch; margin-top: 3px; color: var(--text-2); font-size: 12.5px; line-height: 18px; }
.fix-ids { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.fix-ids code {
  flex: 1 1 240px; min-width: 0; max-height: 76px; overflow: auto; padding: 6px 8px; border-radius: var(--r-xs);
  background: var(--surface); color: var(--text); font: 11.5px/17px var(--mono); word-spacing: 3px;
}
.fix-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.log-lines {
  max-height: 280px; margin-top: 8px; padding: 8px 10px; overflow: auto; border-radius: var(--r-xs);
  background: var(--log-bg); color: var(--log-text); font: 11.5px/17px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.log-lines > span { display: block; }
.log-lines:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.log-time { margin-right: 10px; color: var(--log-dim); }
.log-error { color: var(--log-err); }
.log-warning { color: var(--log-warn); }
.log-gap { color: var(--log-dim); font-style: italic; }
.log-note { margin-top: 4px; color: var(--text-3); font-size: 11px; }
.run-block + .run-block { margin-top: 12px; }
.run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; }
.run-msg { margin-top: 4px; color: var(--text-2); font-size: 12px; overflow-wrap: anywhere; }
.run-block .dl { margin-top: 6px; }
.dl.dl-left { grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; }
.dl.dl-left dd { text-align: left; }
.mini { margin-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
.mini-row { min-height: 28px; padding: 4px 2px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 124px; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.mini-head { color: var(--text-3); font-size: 11px; font-weight: 600; }
.mini .n { text-align: right; font-family: var(--mono); }

/* ------------------------------------------------------------ drilldown bar chart: months, then a month's weeks or days */
.seg { padding: 3px; flex: none; display: inline-flex; gap: 2px; border-radius: 10px; background: var(--surface-2); }
.seg button {
  all: unset; box-sizing: border-box; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--r-sm);
  color: var(--text-3); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 0.12s var(--ease), color 0.12s var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--tab-on); color: var(--text); box-shadow: var(--shadow-1), 0 0 0 1px var(--border); }
.seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.drill-tools { padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; border-bottom: 1px solid var(--border); }
.crumbs { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--text-3); font-size: 12.5px; }
.crumbs button { all: unset; border-radius: 4px; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.crumbs button:hover { text-decoration: underline; text-underline-offset: 2px; }
.crumbs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crumbs [aria-current] { color: var(--text); }
.drill-pick { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12px; }
.select {
  height: 32px; padding: 0 30px 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r); appearance: none; cursor: pointer;
  background: var(--surface) linear-gradient(45deg, transparent 50%, var(--text-3) 50%) no-repeat calc(100% - 15px) 13px / 5px 5px;
  color: var(--text); font-size: 12.5px; font-weight: 500;
}
.select:hover { border-color: var(--border-strong); }
.select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.drill-list { padding: 6px 8px; }
.drill-row {
  all: unset; box-sizing: border-box; width: 100%; min-height: 34px; padding: 4px 8px; display: grid; align-items: center; gap: 12px;
  grid-template-columns: 96px minmax(0, 1fr) 62px 104px; border-radius: var(--r-sm); cursor: pointer; transition: background-color 0.12s var(--ease);
}
.drill-row:hover { background: var(--surface-2); }
.drill-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.drill-label { overflow: hidden; color: var(--text); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.drill-track { height: 16px; overflow: hidden; border-radius: 4px; background: var(--surface-3); }
.drill-fill {
  height: 100%; width: calc(var(--w) * 100%); display: block; border-radius: 4px; background: var(--series);
  transform-origin: left; animation: bar-in 0.28s var(--ease) both;
}
.drill-row.has-miss .drill-fill { background: linear-gradient(to left, var(--warn) max(3px, calc(var(--m) * 100%)), var(--series) 0); }
.drill-row:hover .drill-fill { filter: brightness(1.08); }
.drill-value { color: var(--text); font-family: var(--mono); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.drill-sub { overflow: hidden; color: var(--text-3); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.drill-sub.warn { color: var(--warn); font-weight: 600; }
.drill-row.zero .drill-label { color: var(--text-3); font-weight: 500; }
.drill-note { margin-top: 0; padding: 10px 16px; border-top: 1px solid var(--border); }
.drill-note .warn-text b, .drill-note .warn-text { color: var(--warn); }
@keyframes bar-in { from { transform: scaleX(0); } }
@container view (max-width: 640px) { .drill-row { grid-template-columns: 76px minmax(0, 1fr) 54px; } .drill-sub { display: none; } }

/* ------------------------------------------------------------ rows and cards that open a drawer */
.table tr.match-row { cursor: pointer; }
.table tr.match-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.table tr.match-row:hover td { background: var(--surface-2); }
.table tr.match-row[aria-current="true"] td { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.table tr.match-row[aria-current="true"] td:first-child { --row-mark: inset 3px 0 0 var(--accent); box-shadow: var(--row-mark); }
.table tr.day-head td {
  position: sticky; top: 36px; z-index: 1; height: auto; padding: 14px 16px 6px; border-bottom: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700;
}
.chip, .tier-chip {
  padding: 0 7px; display: inline-flex; align-items: center; border-radius: var(--r-sm); background: var(--neutral-soft); color: var(--text-2);
  font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap;
}
.tier-chip { font-weight: 600; background: var(--tone-slate-bg); color: var(--tone-slate); }
.tier-chip.t1 { background: var(--tone-rose-bg); color: var(--tone-rose); }
.tier-chip.t2 { background: var(--tone-amber-bg); color: var(--tone-amber); }
.tier-chip.t3 { background: var(--tone-blue-bg); color: var(--tone-blue); }
.match-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.match-league { color: var(--text-3); }
.badge.sm { padding: 0 6px; font-size: 10.5px; line-height: 15px; }

/* model against Pinnacle: the left part of a bar is the home side's chance */
.duel-bar { position: relative; height: 10px; min-width: 60px; display: block; overflow: hidden; border-radius: 999px; background: var(--duel-away); }
.duel-bar > span { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 999px 0 0 999px; background: var(--duel-home); }
.duel-bar.market > span { background: var(--duel-market); }
.duel-bar.sm { height: 6px; min-width: 70px; }
.duel-bar.xs { width: 64px; min-width: 0; height: 4px; margin: 4px 0 0 auto; }
.duel-cell { vertical-align: middle; }
.mini-duels { max-width: 230px; margin-left: auto; display: grid; gap: 3px; }
.mini-duel { display: grid; grid-template-columns: 52px minmax(0, 1fr) 34px; align-items: center; gap: 6px; }
.mini-label { color: var(--text-3); font-size: 10.5px; }
.mini-num { color: var(--text-2); font-family: var(--mono); font-size: 11px; text-align: right; }
.drawer-flags { padding-top: 12px; padding-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.duel-teams { margin-bottom: 4px; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; font-weight: 600; }
.swatch-label { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; display: inline-block; border-radius: 3px; }
.swatch.home { background: var(--duel-home); }
.swatch.away { background: var(--duel-away); box-shadow: inset 0 0 0 1px var(--border-strong); }
.duel { padding: 10px 0; border-top: 1px solid var(--border); }
.duel-teams + .duel { border-top: 0; }
.duel-head { margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.duel-row { min-height: 22px; display: grid; grid-template-columns: 64px 42px minmax(0, 1fr) 42px; align-items: center; gap: 8px; }
.duel-name { color: var(--text-3); font-size: 12px; }
.duel-num { font-family: var(--mono); font-size: 12px; text-align: right; }
.duel-num.end { text-align: left; }
.duel-none { grid-column: 2 / -1; color: var(--text-3); font-size: 12px; }
.duel-foot { margin-top: 4px; color: var(--text-3); font-size: 11.5px; }

.series { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.series-cell { padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.series-cell.top { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.series-score { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.series-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.series-bar > span { height: 100%; width: calc(var(--w) * 100%); display: block; background: var(--duel-home); }
.series-cell.away .series-bar > span { background: var(--text-3); }
.series-p { color: var(--text-2); font-family: var(--mono); font-size: 12px; }

.fact-strip { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.fact-strip > div { display: flex; flex-direction: column; gap: 2px; }
.delta { font-family: var(--mono); font-weight: 600; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--err); }
.delta.up::before { content: "↑ "; }
.delta.down::before { content: "↓ "; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
@media (max-width: 560px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.two-col h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.notes { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.notes li { position: relative; padding: 6px 8px 6px 22px; border-radius: var(--r-xs); background: var(--surface-2); font-size: 12.5px; line-height: 17px; }
.notes li::before { content: ""; position: absolute; left: 8px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.notes li.good::before { background: var(--ok-dot); }
.notes li.bad::before { background: var(--err); }

.form-dots { display: inline-flex; gap: 3px; }
.form-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--err); }
.form-dots i.w { background: var(--ok-dot); }
.form-list { display: grid; gap: 2px; }
.form-row { min-height: 26px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 46px; align-items: center; gap: 8px; font-size: 12.5px; }
.form-mark { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: var(--err-soft); color: var(--err); font-size: 11px; font-weight: 700; }
.form-mark.w { background: var(--ok-soft); color: var(--ok); }
.form-opp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-score { font-family: var(--mono); font-size: 12px; }
.form-date { color: var(--text-3); font-size: 11.5px; text-align: right; }

.pool { display: grid; }
.pool-row { min-height: 34px; display: grid; grid-template-columns: 84px repeat(2, minmax(0, 1fr)); align-items: center; gap: 12px; border-bottom: 1px solid var(--border); }
.pool-head { min-height: 26px; color: var(--text-3); font-size: 11px; font-weight: 600; }
.pool-map { font-size: 12.5px; font-weight: 600; }
.pool-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.pool-bar { width: 56px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.pool-bar > span { height: 100%; width: calc(var(--w) * 100%); display: block; background: var(--duel-home); }
.pool-num { font-family: var(--mono); font-size: 11.5px; }

.price-row { min-height: 46px; display: grid; grid-template-columns: 56px minmax(120px, 1fr) auto auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); }
.price-row:last-child { border-bottom: 0; }
.price-label { font-size: 12.5px; font-weight: 600; }
.spark { width: 100%; height: 34px; overflow: visible; }
.spark path { fill: none; stroke: var(--duel-home); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark-empty { color: var(--text-3); font-size: 11.5px; }
.price-move, .price-limit { display: flex; flex-direction: column; font-size: 12px; text-align: right; }
@media (max-width: 560px) {
  .price-row { grid-template-columns: 56px minmax(0, 1fr); padding: 6px 0; }
  .price-move, .price-limit { grid-column: 2; text-align: left; }
}

.records { display: grid; }
.record { padding: 10px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; border-top: 1px solid var(--border); cursor: pointer; }
.record:first-child { border-top: 0; }
.record:hover { background: var(--surface-2); }
.record:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.record[aria-current="true"] { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.record-label { color: var(--text-2); font-size: 12px; }
.record-value { grid-row: span 2; align-self: center; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.record-sub { overflow: hidden; color: var(--text-3); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ login */
.login-wrap { min-height: 100%; padding: 24px; display: grid; place-items: center; }
.login { width: min(400px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.login .brand { margin-bottom: 4px; }
.login form { display: flex; flex-direction: column; gap: 14px; }
.login footer { color: var(--text-3); font-size: 11.5px; text-align: center; }

@media (max-width: 720px) {
  /* A phone fits about five things in the bottom bar, so it carries the four betting pages and a More button; More opens
     the same nav as a sheet, so nothing is duplicated and the pages that change in place keep updating one list. */
  .brand-slot { width: auto; }
  .brand-name, .conn .conn-text, .user-chip .name { display: none; }
  .topbar { gap: 8px; padding: 0 12px; }
  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; width: auto; height: auto;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); flex-direction: row; overflow: visible; border-right: 0; border-top: 1px solid var(--border);
  }
  .side-nav { flex: 1; flex-direction: row; justify-content: space-around; gap: 4px; overflow: visible; }
  .side-nav a { flex: none; height: 52px; min-width: 58px; padding: 0 8px; flex-direction: column; justify-content: center; gap: 3px; font-size: 10.5px; }
  .side-nav a:not([data-phone]) { display: none; }
  .nav-label, .nav-count, .side-foot { display: none; }
  .side-nav a .nav-text { flex: none; }
  .side-nav a[aria-current="page"] { box-shadow: none; }
  .more-btn {
    flex: none; height: 52px; min-width: 58px; padding: 0 8px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; border: 0; border-radius: var(--r); background: transparent; color: var(--text-2);
    font-size: 10.5px; font-weight: 500; cursor: pointer;
  }
  .more-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
  .more-btn.needs::after {
    content: ""; position: absolute; margin: -34px 0 0 26px; width: 7px; height: 7px; border-radius: 50%; background: var(--err);
  }
  .view { padding: 16px 14px calc(88px + env(safe-area-inset-bottom)); }

  /* More: the whole nav as a sheet over the page */
  html[data-nav="open"] .sidebar {
    max-height: 80vh; flex-direction: column; overflow-y: auto; gap: 10px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-2);
    animation: sheet-up 0.16s var(--ease) both;
  }
  html[data-nav="open"] .side-nav { flex-direction: column; justify-content: flex-start; gap: 2px; }
  html[data-nav="open"] .side-nav a { flex-direction: row; height: 42px; min-width: 0; justify-content: flex-start; gap: 10px; font-size: 14.5px; }
  html[data-nav="open"] .side-nav a:not([data-phone]) { display: flex; }
  html[data-nav="open"] .side-nav a .nav-text { flex: 1; }
  html[data-nav="open"] .nav-label, html[data-nav="open"] .nav-count { display: block; }
  html[data-nav="open"] .nav-count { flex: none; }
  html[data-nav="open"] .side-foot { display: flex; }
  html[data-nav="open"] .collapse-btn { display: none; }
  html[data-nav="open"] .more-btn { flex-direction: row; justify-content: center; gap: 8px; height: 42px; font-size: 14.5px; }
  html[data-nav="open"] .more-btn.needs::after { display: none; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 24; background: rgba(9, 11, 16, 0.45); animation: fade-in 0.16s var(--ease) both; }
}
@keyframes sheet-up { from { transform: translateY(14px); } }
@media (min-width: 721px) { .nav-backdrop { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .toggle::after, .sidebar, .brand-slot { transition: none; }
  .column > span, .drill-fill { animation: none; }
}
@keyframes fade-in { from { opacity: 0; } }

/* ------------------------------------------------------------ Overview tiles open a drawer that explains their state */
.stage[data-drawer-src] { cursor: pointer; transition: border-color 0.12s var(--ease); }
.stage[data-drawer-src]:hover { border-color: var(--border-strong); }
.stage[data-drawer-src]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.stage[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.stage-why h3 { display: flex; align-items: center; gap: 8px; }
.stage-why p { max-width: 68ch; margin: 0 0 8px; color: var(--text-2); font-size: 13px; line-height: 20px; }
.stage-why p:last-child { margin-bottom: 0; }
.stage-why[data-state="ok"] .stage-dot { background: var(--ok-dot); box-shadow: 0 0 0 3px var(--ok-soft); }
.stage-why[data-state="warn"] .stage-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.stage-why[data-state="err"] .stage-dot { background: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }
.stage-facts dd { overflow-wrap: anywhere; }
.drawer-table { margin: 0 -20px; overflow-x: auto; }
.drawer-table .table th { position: static; }
.drawer-table .table th:first-child, .drawer-table .table td:first-child { padding-left: 20px; }
.drawer-table .table th:last-child, .drawer-table .table td:last-child { padding-right: 20px; }
.drawer-table .table td.wrap-text { min-width: 220px; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notice-actions { margin-left: 6px; display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }

/* one job run */
.run-message { margin: 0 0 12px; color: var(--text); font-size: 13px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.run-strip { margin: 14px 0 6px; display: flex; flex-wrap: wrap; gap: 3px; }
.run-strip i { width: 10px; height: 18px; border-radius: 3px; background: var(--ok-dot); opacity: 0.5; }
.run-strip i.failed { background: var(--err); opacity: 0.9; }
.run-strip i.running { background: var(--accent); opacity: 0.9; }
.run-strip i.this { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); }

/* ------------------------------------------------------------ a workbook in the wide drawer (Reports) */
.drawer.wide { width: min(1240px, 100vw); }
.drawer-body:has(> .xsheet) { display: flex; flex-direction: column; overflow: hidden; }
.report-bar { padding-top: 12px; padding-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sheet-tabs { max-width: 100%; overflow-x: auto; }
.sheet-tabs .tab-count { margin-left: 6px; color: var(--text-3); font-family: var(--mono); font-size: 11px; }
.report-note { margin: 0; padding: 8px 20px; border-bottom: 1px solid var(--border); color: var(--text-3); font-size: 12px; }
.xsheet { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.xsheet:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.xtable { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; font-variant-numeric: tabular-nums; }
.xtable th, .xtable td {
  height: 28px; padding: 5px 8px; overflow: hidden; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface); color: var(--text); line-height: 17px; text-align: left; text-overflow: ellipsis; vertical-align: top; white-space: nowrap;
}
.xtable thead th {
  position: sticky; top: 0; z-index: 2; height: auto; padding: 7px 8px; background: var(--surface-2); color: var(--text-2);
  font-size: 11px; font-weight: 600; line-height: 14px; vertical-align: bottom; white-space: normal;
}
.xtable .stick { position: sticky; z-index: 1; box-shadow: inset -1px 0 0 var(--border-strong); }
.xtable thead th.stick { z-index: 3; }
.xtable tbody tr:hover td { background: var(--surface-2); }
.xtable td.num { font-family: var(--mono); font-size: 11.5px; text-align: right; }
.xtable td.err { color: var(--err); font-family: var(--mono); }
.xtable td[title] { cursor: help; }
.xtable .b { font-weight: 600; }
.xtable .i { font-style: italic; }
.xtable .wrap { white-space: normal; }
.xtable td.run-off { overflow: visible; text-overflow: clip; }
.xtable .x-title { font-size: 15px; font-weight: 700; }
.xtable td.x-section { padding-top: 14px; color: var(--accent-text); font-weight: 700; }
.xtable .x-note { color: var(--text-3); }
.xtable .x-input { color: var(--tone-blue); font-weight: 600; }
.xtable td.x-input-cell { background: var(--warn-soft); }
.xtable td.x-empty { padding: 16px 20px; color: var(--text-3); }

/* Signals: several rules */
.rule-list { margin: 6px 0 0; padding-left: 18px; }
.rule-list li { margin: 2px 0; }
.stack > .tabs, .view > .tabs { margin-bottom: 4px; }

/* ------------------------------------------------------------ the page's name in the top bar */
/* what the page shows and where its data comes from open under the (i); its badges sit beside the name, or in that
   panel when the bar is narrow */
.page-title { position: relative; min-width: 0; display: flex; align-items: center; gap: 2px; }
.page-title h1 {
  margin: 0; min-width: 0; overflow: hidden; color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.2; white-space: nowrap; text-overflow: ellipsis;
}
.page-info-btn { width: 28px; height: 28px; }
.page-info-btn .icon { width: 16px; height: 16px; }
.page-info-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.page-info {
  position: absolute; top: calc(100% + 12px); left: -8px; z-index: 60; width: min(460px, calc(100vw - 24px)); padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-3);
}
.page-info .eyebrow { margin-bottom: 8px; }
.page-info p { margin: 0; max-width: 60ch; color: var(--text-2); font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.page-info-actions { display: none; }
.head-actions { min-width: 0; display: flex; align-items: center; gap: 8px; }
.head-actions:empty { display: none; }
.head-actions .badge, .page-info-actions .badge { white-space: nowrap; }
@media (max-width: 1100px) {
  .head-actions { display: none; }
  .page-info-actions:not(:empty) { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 720px) {
  .page-title h1 { font-size: 14.5px; }
  .page-info { position: fixed; top: calc(var(--top-h) + 8px); left: 12px; right: 12px; width: auto; }
}

/* ------------------------------------------------------------ pages that change in place */
/* a link, tab or switch swaps only the content: it dims and a thin bar runs along the top only if the next page takes a
   moment, and comes back as soon as it is there */
.nav-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 2px; background: var(--accent); opacity: 0;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
html.navigating .nav-progress { animation: nav-progress 6s cubic-bezier(0.1, 0.8, 0.3, 1) 0.15s forwards; }
@keyframes nav-progress { 0% { opacity: 1; transform: scaleX(0.06); } 100% { opacity: 1; transform: scaleX(0.92); } }
.view[aria-busy="true"] { opacity: 0.55; transition: opacity 0.2s var(--ease) 0.18s; }
@media (prefers-reduced-motion: reduce) { html.navigating .nav-progress { animation: none; } }

/* ------------------------------------------------------------ tables: search, filters, sorting, frozen first column */
.table-tools { padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.tt-search { position: relative; flex: 1 1 180px; max-width: 280px; min-width: 0; }
.tt-search .icon { position: absolute; top: 50%; left: 10px; width: 15px; height: 15px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.tt-search input {
  width: 100%; height: 32px; padding: 0 10px 0 32px; border: 1px solid var(--border-strong); border-radius: var(--r);
  background: transparent; color: var(--text); font: inherit; font-size: 13px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.tt-search input::placeholder { color: var(--text-3); }
.tt-search input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }
.tt-facet {
  position: relative; height: 32px; max-width: 100%; display: inline-flex; align-items: center; border: 1px solid var(--border-strong);
  border-radius: var(--r); font-size: 13px; transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.tt-facet:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }
.tt-facet > span { padding-left: 10px; color: var(--text-3); white-space: nowrap; }
.tt-facet select {
  all: unset; box-sizing: border-box; height: 100%; min-width: 0; max-width: 200px; padding: 0 26px 0 6px; overflow: hidden;
  color: var(--text); font-weight: 500; line-height: 30px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.tt-facet .icon { position: absolute; right: 8px; width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
.tt-facet.on { border-color: var(--accent-line); background: var(--accent-soft); }
.tt-facet.on select, .tt-facet.on > span { color: var(--accent-text); }
.tt-count { margin-left: auto; color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-reset { height: 28px; padding: 0 10px; font-size: 12.5px; }
.tools-empty td { height: auto; padding: 32px 16px; color: var(--text-3); text-align: center; }
.tools-empty .btn { margin-left: 8px; }

/* a header you can sort by: click for lowest first, again for highest first, a third time for the page's own order */
.th-sort {
  all: unset; box-sizing: border-box; max-width: 100%; display: inline-flex; align-items: center; gap: 4px; color: inherit;
  cursor: pointer; border-radius: var(--r-xs);
}
.th-sort:hover { color: var(--text); }
.th-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
th.num .th-sort { flex-direction: row-reverse; }
.sort-caret { width: 12px; height: 12px; flex: none; fill: currentColor; opacity: 0.35; transition: opacity 0.12s var(--ease); }
.th-sort:hover .sort-caret, .th-sort:focus-visible .sort-caret { opacity: 0.75; }
.table th[aria-sort="ascending"], .table th[aria-sort="descending"] { color: var(--accent-text); }
.table th[aria-sort="ascending"] .sort-caret, .table th[aria-sort="descending"] .sort-caret { opacity: 1; }
.table th[aria-sort="ascending"] .sort-caret .down, .table th[aria-sort="descending"] .sort-caret .up { opacity: 0.2; }

/* the first column stays put while the rest scrolls sideways, as a frozen pane in Excel; its edge shows once scrolled */
.table.frozen > * > tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.table.frozen > thead > tr > :first-child { z-index: 3; }
.table.frozen > tbody > tr:hover > :first-child { background: var(--surface-2); }
.scrolled-x > .table.frozen > * > tr > :first-child {
  box-shadow: var(--row-mark, 0 0 0 transparent), inset -1px 0 0 var(--border), 10px 0 12px -10px var(--scroll-shade);
}
@container view (max-width: 640px) {
  .table.frozen > tbody > tr > td:first-child { max-width: 46vw; }
  .table.frozen td:first-child .t-main { overflow: hidden; text-overflow: ellipsis; }
  .table.frozen td:has(> .t-main) { min-width: 0; }
  .table-tools { padding: 10px 12px; }
  .tt-search { max-width: none; flex-basis: 100%; }
}

/* ------------------------------------------------------------ matches: an odds board, a block per match */
/* each team on its own line with its price in every market (Pinnacle's layout), the first price muted before the price now
   (OddsPortal's dropping odds), the start on the left (bo3.gg), and Pinnacle's price line since the first price (Polymarket) */
.board thead th { white-space: nowrap; }
.board .day-count { color: var(--text-3); font-weight: 500; }
.board tbody.match { cursor: pointer; }
.board tbody.match td { height: auto; padding: 3px 14px; border-bottom: 0; vertical-align: middle; }
.board tbody.match > tr:first-child > td { padding-top: 12px; }
.board tbody.match > tr.meta-row > td { padding-bottom: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.board tbody.match td[rowspan] { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.board tbody.match:hover > tr > td { background: var(--surface-2); }
.board tbody.match[aria-current="true"] > tr > td { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.board tbody.match[aria-current="true"] td.when { box-shadow: inset 3px 0 0 var(--accent); }
.board tbody.match:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.board td.when { width: 1%; padding-right: 4px; white-space: nowrap; }
.board .when-time { color: var(--text); font-size: 15px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; }
.board .when-rel { margin-top: 2px; color: var(--text-3); font-size: 12px; }
.board td.who { position: sticky; left: 0; z-index: 1; min-width: 210px; max-width: 320px; background: var(--surface); }
.board .team { color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.board td.odds { text-align: right; white-space: nowrap; }
.board .px { display: inline-flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
.board .px-open { color: var(--text-3); font-size: 12px; }
.board .px-to { color: var(--text-3); font-size: 11px; }
.board .px-now { color: var(--text); font-size: 14px; font-weight: 600; }
.board .px-now.move-up { color: var(--ok); }
.board .px-now.move-down { color: var(--err); }
.board td.mkt { text-align: right; white-space: nowrap; }
.board .mkt-limit { color: var(--text-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.board .mkt-moves { color: var(--text-3); font-size: 11.5px; line-height: 16px; }
.board .first-seen { margin-top: 4px; color: var(--text-3); font-size: 11.5px; }
.board .signal-chip { margin-top: 6px; margin-right: 4px; display: inline-flex; background: var(--accent-soft); color: var(--accent-text); text-decoration: none; }
.board .signal-chip:hover { background: var(--accent-soft-2); }
.board td.duel-cell { width: 1%; min-width: 180px; }
.board .mini-duels { margin-left: 0; }
.price-line { display: block; width: 132px; max-width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.price-line .pl-base { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 2 3; }
.price-line .pl-path { fill: none; stroke: var(--series); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.price-line .pl-end { fill: var(--series); }
.pl-cap { margin-top: 3px; overflow: hidden; color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.scrolled-x > .board td.who { box-shadow: inset -1px 0 0 var(--border), 10px 0 12px -10px var(--scroll-shade); }
.board thead th:nth-child(2) { position: sticky; left: 0; z-index: 3; }   /* the pinned team column keeps its header, */
.board .day-label { position: sticky; left: 16px; display: inline-block; }   /* and a day's heading stays in view sideways */
.scrolled-x > .board thead th:nth-child(2) { box-shadow: inset -1px 0 0 var(--border), 10px 0 12px -10px var(--scroll-shade); }
@container view (max-width: 640px) {
  .board td.who { min-width: 150px; max-width: 46vw; }
  .board .team { display: block; overflow: hidden; text-overflow: ellipsis; }
}

/* ------------------------------------------------------------ a page that is one big table (Matches, Jobs) */
/* its card fills the window and only the table scrolls; the page itself never does */
.view.fill-page { height: 100%; display: flex; flex-direction: column; padding-bottom: 20px; }
.view.fill-page > .stack { flex: 1 1 auto; min-height: 0; }
.view.fill-page > .card, .view.fill-page > .stack > .card:last-child { flex: 1 1 auto; min-height: 320px; display: flex; flex-direction: column; }
.view.fill-page .card > .scroll-body { flex: 1 1 0; min-height: 0; max-height: none; }
@media (max-width: 720px) { .view.fill-page { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } }

/* ------------------------------------------------------------ native controls follow the theme */
/* a dropdown's list of options is drawn by the browser: without these it opens white (with light text in dark mode) */
select option, select optgroup { background-color: var(--surface); color: var(--text); }
/* a field the browser fills in keeps the theme's colours instead of its own light blue */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 1000px var(--surface) inset; transition: background-color 9999s;
}

/* ------------------------------------------------------------ dropdowns: the app's own menu instead of the browser's list */
.dd-native {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; opacity: 0; pointer-events: none;
}
.dd-anchor { position: relative; }
.dd-btn {
  all: unset; box-sizing: border-box; height: 100%; min-width: 0; max-width: 200px; padding: 0 26px 0 6px; overflow: hidden;
  color: var(--text); font-weight: 500; line-height: 30px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.tt-facet:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }
.tt-facet .icon { transition: transform 0.15s var(--ease); }
.tt-facet:has(.dd-btn[aria-expanded="true"]) .icon { transform: rotate(180deg); }
.tt-facet.on .dd-btn { color: var(--accent-text); }
.select.dd-trigger { display: inline-flex; align-items: center; text-align: left; white-space: nowrap; }
.dd-menu {
  position: fixed; z-index: 95; max-width: min(360px, calc(100vw - 16px)); max-height: min(320px, 60vh); overflow-y: auto; padding: 4px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-3);
  animation: dd-in 0.12s var(--ease) both;
}
@keyframes dd-in { from { transform: translateY(-3px); } }   /* a slide only: the menu is visible from its first frame */
.dd-opt {
  position: relative; min-height: 32px; padding: 6px 10px 6px 30px; display: flex; align-items: center; gap: 12px;
  border-radius: var(--r-sm); color: var(--text); font-size: 13px; cursor: pointer; user-select: none;
}
.dd-opt .icon { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--accent-text); visibility: hidden; }
.dd-opt[aria-selected="true"] { font-weight: 600; }
.dd-opt[aria-selected="true"] .icon { visibility: visible; }
.dd-opt.active { background: var(--surface-2); }
.dd-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-count { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .dd-menu { animation: none; } .tt-facet .icon { transition: none; } }