/* OddsBoss app design system. Same brand as the landing page (public/landing/DESIGN.md, BF097):
   white ground, I4 greens, one loud lime, Barlow Condensed 900 uppercase headings and buttons, Figtree body,
   10px buttons with hard offset shadows, square-ish tags. Token names are shared with every screen.
   Light theme = the landing page. Dark theme = the brand greens taken dark (pitch-deep sidebar, lime accents).
   Theme switching: js/theme.js sets <html data-theme="light|dark">; no attribute follows the system. */
:root {
  /* ---- brand (DESIGN.md §1). Same names and values as the landing page. ---- */
  --g: #0A3161; --deep: #071D45; --mint: #DCEBFF; --pitch: #123F7E; --pitch-deep: #0A1F44;
  --soft: #EEF4FD; --lime-shadow: #6F8FD3; --on-green-soft: #E3EDFA; --on-green-mute: #C8D3EA;
  --on-pitch-mute: #D5E2F2;
  /* Hero panels with body-size text (Daily welcome, Pricing hero): a touch deeper than --g so white is 5.4:1
     and --on-green-soft 4.8:1 (WCAG AA). Buttons keep --g. */
  --hero-g: #082A57;
  --flag: #E5484D;           /* Hank's challenge flag ONLY. Never on buttons, never as an app colour. */
  --white: #FFFFFF;
  --f-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* NOTE: DESIGN.md's --ink (#0A1530, body text) is --text here. In the app --ink has always meant the
     brand dark surface (sidebar, dark tags, toasts), so it keeps that meaning (aliases only, no renames). */
  --ink-text: var(--text);

  /* ---- app tokens (used by every screen) ---- */
  --ink: #071D45;            /* brand dark surface: dark tags, toasts, seg/chip on-state */
  --ink-2: #123F7E;
  --lime: #A9C6FF; --lime-2: #8DB0F5; --gold: #8A6A1E;
  --bg: #FFFFFF; --paper: #FFFFFF; --panel: #F3F7FD; --line: #D7DFEE; --line-2: #E8EFF9;
  --line-strong: #6F87A6;    /* control borders: >=3:1 against paper and panel (WCAG 1.4.11) */
  --text: #0A1530; --muted: #48546C; --accent: #071D45;
  --pos: #0B6B3A; --pos-bg: #E3F7EA; --neg: #B42318; --neg-bg: #FDECEA; --warn: #8A5A00; --warn-bg: #FDF3D7;
  --on-pos: #FFFFFF; --on-neg: #FFFFFF;   /* text on a solid --pos / --neg fill (e.g. Buy YES / Buy NO on-state) */
  --live: #C4261A;
  --callout-bg: #E4F0FF; --callout-line: var(--mint);   /* .callout.lime: mint panel with ink text */
  --hl: #E2EDFB;             /* highlighted / selected row or card (best book, fair line, "both win" band): mint tint.
                                Never a lime tint: lime stays on green grounds (DESIGN.md §1). */
  --best-bg: #E2EDFB; --best-text: #071D45; --best-line: #0A3161;   /* .price.best: mint chip, deep text, green outline */
  --btn: #0A3161;            /* large primary (Barlow 19px = large text, AA at 4.4:1, same as the landing) */
  --btn-sm: #082A57;         /* small primary (15px): darker green so white text passes AA (5.4:1) */
  --btn-text: #FFFFFF; --btn-shadow: #071D45;
  /* .btn.lime: lime only on green grounds. On white it renders as the green primary; green grounds and the
     dark theme switch these to real lime (see "green grounds" below). */
  --lime-btn: var(--btn); --lime-btn-sm: var(--btn-sm); --lime-btn-text: #FFFFFF; --lime-btn-shadow: var(--btn-shadow);
  --plan-on-shadow: var(--mint);
  --side-bg: #071D45; --side-text: #C8D3EA; --side-head: #93B0D6;
  --focus: #071D45;          /* deep green ring on white, lime on green grounds (DESIGN.md §6.2) */
  --shadow: none;
  --r: 14px; --side: 248px; --topbar-h: 58px;
  --sans: var(--f-body);
  --serif: var(--f-head);    /* headline + figure face (was Georgia) */
  --mono: var(--f-body);     /* no monospace in the brand: figures use tabular Figtree */

  /* ---- type scale (DESIGN.md §3, app density). Screens converge on these during their migration. ---- */
  --t-xs: 12px; --t-sm: 13px; --t-cell: 14px; --t-body: 15px; --t-md: 17px; --t-lg: 19px; --t-xl: 22px;
  --t-fig: 26px; --t-h3: 19px; --t-h2: 24px; --t-h1: clamp(36px, 4vw, 52px);

  /* ---- z-index scale: topbar < sticky toolbar < sticky thead < actionbar < nav scrim < sidebar < popover < drawer < toast ---- */
  --z-raised: 1; --z-topbar: 30; --z-toolbar: 31; --z-thead: 32; --z-actionbar: 34; --z-scrim: 35; --z-side: 40;
  --z-popover: 60; --z-drawer: 100; --z-toast: 200;
  color-scheme: light;
}
/* Dark theme. Keep the two blocks below identical: the first follows the system when no theme is chosen,
   the second is the explicit choice from the toggle / Settings. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #06101E; --paper: #0B1B30; --panel: #10243F; --line: #223C5E; --line-2: #182E4B; --soft: #132B4A;
    --line-strong: #5478A6;
    --text: #E9F0FA; --muted: #A6B9D2; --accent: #A9C6FF;
    --pos: #6FE0A0; --pos-bg: #0F3A24; --neg: #FF8F80; --neg-bg: #3D1712; --warn: #F2C35B; --warn-bg: #3A2A08;
    --on-pos: #06101E; --on-neg: #2A0B07;
    --live: #FF6B5E; --ink: #0A1F44; --ink-2: #123F7E; --gold: #E0BD62;
    --callout-bg: #132D4F; --callout-line: #2E5282; --hl: #17345A;
    --best-bg: #17345A; --best-text: #A9C6FF; --best-line: #3D6FB0;
    --btn-shadow: #030A14;
    --lime-btn: var(--lime); --lime-btn-sm: var(--lime); --lime-btn-text: var(--pitch-deep); --lime-btn-shadow: var(--lime-shadow);
    --plan-on-shadow: var(--pitch-deep);
    --side-bg: var(--pitch-deep); --side-head: #93B0D6; --focus: #A9C6FF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #06101E; --paper: #0B1B30; --panel: #10243F; --line: #223C5E; --line-2: #182E4B; --soft: #132B4A;
  --line-strong: #5478A6;
  --text: #E9F0FA; --muted: #A6B9D2; --accent: #A9C6FF;
  --pos: #6FE0A0; --pos-bg: #0F3A24; --neg: #FF8F80; --neg-bg: #3D1712; --warn: #F2C35B; --warn-bg: #3A2A08;
  --on-pos: #06101E; --on-neg: #2A0B07;
  --live: #FF6B5E; --ink: #0A1F44; --ink-2: #123F7E; --gold: #E0BD62;
  --callout-bg: #132D4F; --callout-line: #2E5282; --hl: #17345A;
  --best-bg: #17345A; --best-text: #A9C6FF; --best-line: #3D6FB0;
  --btn-shadow: #030A14;
  --lime-btn: var(--lime); --lime-btn-sm: var(--lime); --lime-btn-text: var(--pitch-deep); --lime-btn-shadow: var(--lime-shadow);
  --plan-on-shadow: var(--pitch-deep);
  --side-bg: var(--pitch-deep); --side-head: #93B0D6; --focus: #A9C6FF;
  color-scheme: dark;
}
/* Green grounds: lime buttons are real lime here, and focus rings turn lime (DESIGN.md §6.2/§6.3).
   Add .on-green to any new green surface instead of extending this list. */
.on-green, .side, .callout.dark, .toast, .pricing .hero, .daily .welcome, .pb .pb-hero {
  --lime-btn: var(--lime); --lime-btn-sm: var(--lime); --lime-btn-text: var(--pitch-deep); --lime-btn-shadow: var(--lime-shadow);
  --focus: var(--lime);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 500 var(--t-body)/1.45 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: .95; margin: 0; }
h1 { font-size: 40px; } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); line-height: 1; }
.bf-name { text-transform: none; } /* "OddsBoss" inside an uppercase heading keeps its capital F */
button, input, select, textarea { font: inherit; color: inherit; }
/* One focus style everywhere: 3px ring, deep green on white, lime on green grounds and in dark. Never removed. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--muted); }
.mono { font-family: var(--f-body); font-variant-numeric: tabular-nums; }
.num-cell, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- layout / shell (app.js) ---------- */
#app { display: flex; min-height: 100vh; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: var(--z-toast); background: var(--deep); color: #FFFFFF; padding: 10px 14px; border-radius: 10px; font-weight: 800; }
.skip-link:focus { top: 12px; text-decoration: none; }

/* Sidebar: the whole column scrolls (every tool reachable at any height); the plan CTA + compliance footer stays pinned. */
.side { width: var(--side); background: var(--side-bg); color: var(--side-text); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: var(--z-side);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.side-head { display: flex; align-items: center; gap: 8px; padding-right: 12px; flex: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 18px 20px 12px; margin-right: auto; text-decoration: none !important; line-height: 1; }
.brand img { width: 34px; height: 34px; flex: none; }
.bf-word { font: 900 25px/1 var(--f-body); letter-spacing: -0.035em; color: #FFFFFF; }
.bf-word span { color: var(--lime); }
.side-demo, .side-close { display: none; }
.side-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--side-head); padding: 4px 2px 6px; }
.side-nav { padding: 0 10px 12px; flex: 1 0 auto; }
.nav-group { margin: 0; }
.nav-h { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--side-head); padding: 12px 10px 5px; border-radius: 8px; }
.nav-h::-webkit-details-marker { display: none; }
.nav-h:hover { color: #FFFFFF; }
.nav-h .chev { opacity: .75; transition: transform .15s; flex: none; }
.nav-group:not([open]) > .nav-h .chev { transform: rotate(-90deg); }
.side-nav a { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 5px 10px; border-radius: 8px; color: var(--side-text); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.side-nav a .i { flex: none; opacity: .9; }
.side-nav a:hover { background: rgba(255,255,255,.08); color: #FFFFFF; }
.side-nav a.on { background: var(--lime); color: var(--pitch-deep); font-weight: 800; }
.side-nav a.on .i { opacity: 1; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { flex: none; min-width: 22px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.14); color: #FFFFFF; font-size: 11.5px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.side-nav a.on .nav-count { background: var(--pitch-deep); color: var(--lime); }
.side-foot { position: sticky; bottom: 0; flex: none; padding: 12px 12px 14px; background: var(--side-bg); border-top: 1px solid rgba(255,255,255,.12); }
.side-foot .compliance { margin: 10px 2px 0; font-size: 11.5px; line-height: 1.35; font-weight: 600; color: var(--side-text); }
.recent { display: none; }
.recent-row { display: flex; flex-wrap: wrap; gap: 6px; }
.recent-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.1); color: var(--side-text); font-size: 13px; font-weight: 700; text-decoration: none !important; }
.recent-chip:hover { background: rgba(255,255,255,.16); color: #FFFFFF; }

.main { flex: 1; margin-left: var(--side); min-width: 0; display: flex; flex-direction: column; }
/* Top bar: on desktop only the controls (the page H1 names the screen); phones add the mark + page title. */
.topbar { position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: 12px; min-height: var(--topbar-h); padding: 8px 24px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 2px solid var(--line); }
.top-mark, .top-title { display: none; }
.top-mark img { display: block; width: 24px; height: 24px; }
.top-title { flex: 1; min-width: 0; font: 900 20px/1 var(--f-head); text-transform: uppercase; letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top-field { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none !important; }
.top-field select { border: 2px solid var(--line-strong); background: var(--paper); border-radius: 8px; padding: 3px 6px; font-weight: 700; }
.top-field strong { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.top-chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 12px; border: 2px solid var(--line-strong); border-radius: 10px; background: var(--paper); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.top-chip:hover { border-color: var(--g); }
.top-chip strong { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.top-chip .short { display: none; }
.top-chip .chev { transition: transform .15s; }
.top-chip[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sizing { position: relative; }
.sizing-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; z-index: var(--z-popover); background: var(--paper); color: var(--text); border: 2px solid var(--line); border-top: 4px solid var(--g); border-radius: var(--r); box-shadow: 0 18px 36px -18px rgba(4, 14, 26, .5); padding: 14px 14px 12px; }
.sizing-pop[hidden] { display: none; }
.pop-title { font: 900 22px/1 var(--f-head); text-transform: uppercase; }
.pop-note { margin: 6px 0 12px; font-size: 13px; color: var(--muted); }
.pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.pop-wide { grid-column: 1 / -1; }
.pop-more { display: inline-block; margin-top: 12px; font-size: 14px; }
.icon-btn.bell { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none; color: var(--text); text-decoration: none !important; }
.bell .badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--deep); color: #FFFFFF; border: 2px solid var(--bg); font: 800 11px/16px var(--f-body); text-align: center; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .bell .badge { background: var(--lime); color: var(--pitch-deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .bell .badge { background: var(--lime); color: var(--pitch-deep); } }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--g); color: #FFFFFF; display: grid; place-items: center; font-weight: 800; font-size: 12px; text-decoration: none !important; flex: none; }
.side-head .side-avatar { display: none; background: var(--lime); color: var(--pitch-deep); }
.menu { display: none; }
#view { flex: 1; width: 100%; padding: 28px 28px 40px; max-width: 1400px; outline: none; }
.page-foot { padding: 14px 28px 22px; border-top: 2px solid var(--line); max-width: 1400px; }
.page-foot .compliance { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.loading { padding: 40px; color: var(--muted); }
.side-bg { display: none; }

/* Theme toggle (top bar, every width): sun in light, moon in dark. The icon follows the same rule as the
   tokens so it is right before JS runs; aria-pressed (set by theme.js) says whether dark is on. */
.icon-btn.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none; color: var(--text); }
.theme-toggle svg { display: block; }
.theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .ic-sun { display: none; }
  :root:not([data-theme]) .theme-toggle .ic-moon { display: block; }
}

/* ---------- page parts ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { color: var(--text); }
.page-head .sub { color: var(--muted); margin: 8px 0 0; max-width: 760px; font-size: 15px; }
.incl { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card { background: var(--paper); border: 2px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card.pad, .pad { padding: 16px; }
.card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 2px solid var(--line-2); }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.spacer { flex: 1; }

/* ---------- stats (DESIGN.md §6.6 figures) ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--paper); border: 2px solid var(--line); border-top: 4px solid var(--g); border-radius: var(--r); padding: 12px 14px; }
.stat span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.stat strong { display: block; font: 900 28px/1 var(--f-head); color: var(--accent); margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat strong.pos { color: var(--pos); } .stat strong.neg { color: var(--neg); }
.stat small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

/* ---------- tables (cells stay compact: 14px tabular) ---------- */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: var(--t-cell); }
.t th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; padding: 10px 12px; border-bottom: 2px solid var(--line); white-space: nowrap; background: var(--panel); position: sticky; top: 0; }
.t td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.t tr.click { cursor: pointer; }
.t tr.click:hover td { background: var(--panel); }
.t tr.hl td { background: var(--hl); } /* highlighted row: best book, fair line, "both win" band */
.t tr.flash td { animation: flash 1.2s ease; }
@keyframes flash { from { background: var(--hl); } to { background: transparent; } }
.legs { display: flex; flex-direction: column; gap: 4px; }
.leg { display: flex; gap: 8px; align-items: center; white-space: nowrap; }

/* ---------- atoms ---------- */
.book { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 7px 2px 5px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); white-space: nowrap; color: var(--text); }
.book i { width: 9px; height: 9px; border-radius: 3px; background: var(--bk); display: inline-block; }
.price { font-family: var(--f-body); font-weight: 800; font-variant-numeric: tabular-nums; }
/* Best price: mint chip with deep-green text and a green outline (lime fills stay on green grounds only). */
.price.best { background: var(--best-bg); color: var(--best-text); box-shadow: inset 0 0 0 1.5px var(--best-line); border-radius: 6px; padding: 1px 6px; }
.edge { font-weight: 800; font-variant-numeric: tabular-nums; padding: 2px 7px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; }
/* Negative edges / CLV are not P&L: muted text with the minus sign and an outline, never red text or a red fill
   (--neg is kept for negative P&L text only, item B7). */
.edge.pos { color: var(--pos); background: var(--pos-bg); } .edge.neg { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: var(--soft); border: 0; color: var(--accent); white-space: nowrap; text-decoration: none !important; }
.tag.sport { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.tag.plan { background: var(--soft); color: var(--accent); }
.tag.plan.aa { background: var(--deep); color: #FFFFFF; }
.tag.pos { background: var(--pos-bg); color: var(--pos); }
.tag.neg { background: transparent; color: var(--neg); box-shadow: inset 0 0 0 1px currentColor; } /* outline, never a red fill */
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.dark { background: var(--ink); color: var(--lime); }
.live-dot { display: inline-flex; align-items: center; gap: 5px; color: var(--live); font-weight: 800; font-size: 11px; letter-spacing: .05em; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.pill { font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.pill.demo { background: var(--soft); color: var(--accent); }
.meter { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; vertical-align: middle; }
.meter i { display: block; height: 100%; background: var(--g); }
.spark { display: block; }
.evt-name { font-weight: 700; }
.evt-meta { display: flex; gap: 6px; align-items: center; margin-top: 3px; font-size: 12px; flex-wrap: wrap; }
.empty { padding: 36px; text-align: center; color: var(--muted); border: 2px dashed var(--line); border-radius: var(--r); background: var(--paper); font-weight: 600; }

/* ---------- buttons (DESIGN.md §6.3: Barlow 900 uppercase, 10px radius, hard offset shadow, press moves down) ----------
   .btn            secondary: paper, strong border, 17px
   .btn.primary    the one green action: 19px on --g (large text = AA), 0 4px 0 deep shadow
   .btn.sm         table-row size: 15px; .btn.sm.primary sits on the darker --btn-sm green so 15px white text is AA
   .btn.outline    secondary with a green border (non-selected plan cards)
   .btn.ghost      text-only secondary (Calc · Log · Alert)
   .btn.lime       lime only on green grounds; on white it renders as the green primary
   Never pill-shaped, never red. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 2px solid var(--line-strong); background: var(--paper); color: var(--text); border-radius: 10px; font: 900 17px/1 var(--f-head); text-transform: uppercase; letter-spacing: .01em; cursor: pointer; text-decoration: none !important; white-space: nowrap; box-shadow: 0 3px 0 var(--line); transition: transform .08s, box-shadow .08s, border-color .1s; }
.btn:hover { border-color: var(--g); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn .book { font: 700 12px/1.2 var(--f-body); text-transform: none; letter-spacing: 0; }
.btn.primary { background: var(--btn); color: var(--btn-text); border-color: var(--btn); box-shadow: 0 4px 0 var(--btn-shadow); font-size: 19px; min-height: 44px; padding: 8px 18px; }
.btn.primary:active { box-shadow: 0 2px 0 var(--btn-shadow); }
.btn.primary .book, .btn.lime .book { background: rgba(255,255,255,.16); border-color: transparent; color: inherit; }
.btn.lime { background: var(--lime-btn); color: var(--lime-btn-text); border-color: var(--lime-btn); box-shadow: 0 4px 0 var(--lime-btn-shadow); font-size: 19px; min-height: 44px; padding: 8px 18px; }
.btn.lime:active { box-shadow: 0 2px 0 var(--lime-btn-shadow); }
.btn.outline { background: var(--paper); color: var(--accent); border-color: var(--g); box-shadow: 0 4px 0 var(--line); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent); }
.btn.ghost:hover { border-color: var(--line-strong); }
.btn.ghost:active { box-shadow: none; }
.btn.sm { min-height: 32px; padding: 4px 10px; font-size: 15px; }
.btn.sm, .btn.sm.outline { box-shadow: 0 2px 0 var(--line); }
.btn.sm.primary { background: var(--btn-sm); border-color: var(--btn-sm); box-shadow: 0 2px 0 var(--btn-shadow); }
.btn.sm.lime { background: var(--lime-btn-sm); border-color: var(--lime-btn-sm); box-shadow: 0 2px 0 var(--lime-btn-shadow); }
.btn.sm.ghost { box-shadow: none; }
.btn.sm:active { box-shadow: none; }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
@media (hover: hover) { .btn.primary:hover, .btn.lime:hover { filter: brightness(1.05); } }
/* ui.cta(): a primary with its terms line directly under it */
.cta { display: grid; gap: 8px; justify-items: stretch; max-width: 420px; }
.cta-terms { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.on-green .cta-terms, .callout.dark .cta-terms, .pricing .hero .cta-terms { color: var(--on-green-soft); }

/* ---------- controls (branded: strong borders, lime-on-deep on-states, no browser blue) ---------- */
.icon-btn { border: 2px solid var(--line-strong); background: var(--paper); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; color: var(--text); }
.icon-btn:hover { border-color: var(--g); }
.seg { display: inline-flex; background: var(--panel); border: 2px solid var(--line-strong); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; cursor: pointer; font-weight: 800; font-size: 13px; color: var(--muted); }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--ink); color: var(--lime); }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.field select, .field > input:not([type="range"]), .field .num, textarea.input, input.input { border: 2px solid var(--line-strong); background: var(--paper); border-radius: 10px; padding: 6px 10px; color: var(--text); font-size: 14px; font-weight: 600; min-width: 0; }
.field select:focus, .field > input:not([type="range"]):focus, .field .num:focus-within, textarea.input:focus, input.input:focus { border-color: var(--g); }
/* The number box draws the ring for its inner input (the input itself is borderless). */
.field .num:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.field .num input:focus-visible { outline: none; }
.field .num { display: flex; align-items: center; gap: 4px; padding: 0 10px; }
.field .num em { font-style: normal; color: var(--muted); }
.field .num input { border: 0; background: transparent; padding: 6px 0; width: 100%; min-width: 60px; font-variant-numeric: tabular-nums; }
select { accent-color: var(--g); }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.check input, input[type="checkbox"], input[type="radio"] { accent-color: var(--g); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 2px solid var(--line-strong); background: var(--paper); border-radius: 8px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--text); }
.chip:hover { border-color: var(--g); }
.chip.on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
:where(:root[data-theme="dark"]) .seg button.on, :where(:root[data-theme="dark"]) .chip.on { background: var(--pitch-deep); color: var(--lime); border-color: var(--lime); }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .seg button.on, :where(:root:not([data-theme="light"])) .chip.on { background: var(--pitch-deep); color: var(--lime); border-color: var(--lime); }
}
:where(:root[data-theme="dark"]) .seg button.on { box-shadow: inset 0 0 0 1px var(--lime); }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .seg button.on { box-shadow: inset 0 0 0 1px var(--lime); } }

/* Theme-scoped component rules use :where() for the theme part so a screen's own styles still win. */
/* Range sliders: --g fill (from --fill, kept in sync by app.js), deep thumb with a white ring. */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; accent-color: var(--g); }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--g) 0 var(--fill, 50%), var(--line) var(--fill, 50%) 100%); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--deep); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--deep); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--g); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--deep); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--deep); }
:where(:root[data-theme="dark"]) input[type="range"]::-webkit-slider-thumb { background: var(--lime); box-shadow: 0 0 0 2px var(--lime); }
:where(:root[data-theme="dark"]) input[type="range"]::-moz-range-thumb { background: var(--lime); box-shadow: 0 0 0 2px var(--lime); }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) input[type="range"]::-webkit-slider-thumb { background: var(--lime); box-shadow: 0 0 0 2px var(--lime); }
  :where(:root:not([data-theme="light"])) input[type="range"]::-moz-range-thumb { background: var(--lime); box-shadow: 0 0 0 2px var(--lime); }
}

/* ---------- drawer / toast ---------- */
.drawer-wrap { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer-bg { position: absolute; inset: 0; background: rgba(4, 14, 26, .45); opacity: 0; transition: opacity .2s; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--paper); border-left: 4px solid var(--g); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; }
.drawer.wide { width: min(820px, 100%); }
.drawer-wrap.open .drawer { transform: none; } .drawer-wrap.open .drawer-bg { opacity: 1; }
.drawer header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 2px solid var(--line); }
.drawer-body { padding: 18px; overflow-y: auto; flex: 1; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #FFFFFF; font-weight: 700; padding: 10px 16px; border-radius: 10px; opacity: 0; transition: all .25s; z-index: var(--z-toast); box-shadow: 0 4px 0 var(--pitch-deep); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- callouts ---------- */
.callout { border-radius: var(--r); padding: 12px 14px; background: var(--panel); border: 2px solid var(--line); }
.callout.lime { background: var(--callout-bg); border-color: var(--callout-line); color: var(--text); }
.callout.dark { background: var(--ink); color: var(--on-green-soft); border-color: var(--ink); }
.callout.dark a { color: var(--lime); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--muted); font-weight: 600; } .kv dd { margin: 0; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--g); }

/* ---------- landing components, ported from public/landing/landing.css (DESIGN.md §6.3, 6.8, 6.9, 6.13) ----------
   Same class names and geometry as the landing page; colours go through tokens so they also work in dark. */
.bf2-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 22px; border-radius: 10px; font: 900 22px/1 var(--f-head); text-transform: uppercase; letter-spacing: .01em; text-decoration: none !important; text-align: center; border: 0; cursor: pointer; transition: transform .08s, box-shadow .08s; }
.bf2-cta:active { transform: translateY(2px); }
.bf2-cta-lime { background: var(--lime); color: var(--pitch-deep); box-shadow: 0 4px 0 var(--lime-shadow); }   /* green grounds only */
.bf2-cta-lime:active { box-shadow: 0 2px 0 var(--lime-shadow); }
.bf2-cta-green { background: var(--g); color: #FFFFFF; box-shadow: 0 4px 0 var(--btn-shadow); }
.bf2-cta-green:active { box-shadow: 0 2px 0 var(--btn-shadow); }
.bf2-cta-outline { background: var(--paper); color: var(--accent); border: 2px solid var(--g); box-shadow: 0 4px 0 var(--line); }
@media (hover: hover) { .bf2-cta:hover { filter: brightness(1.04); } }
.bf2-mid { display: grid; gap: 8px; justify-items: stretch; max-width: 420px; margin-top: 8px; }
.bf2-mid-terms, .bf2-plan-terms { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0; }
.bf2-tag { display: inline-block; font-size: 12px; font-weight: 800; color: var(--accent); background: var(--soft); border-radius: 6px; padding: 2px 8px; }
.bf2-tag.dark { background: var(--deep); color: var(--lime); }
/* bet slip */
.bf2-slip { margin: 0; background: var(--paper); color: var(--text); border: 2px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.bf2-slip figcaption { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 800; color: var(--accent); }
.bf2-slip figcaption span { flex: none; align-self: flex-start; font-size: 12px; font-weight: 800; color: var(--muted); background: var(--soft); border-radius: 6px; padding: 1px 7px; }
.bf2-slip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bf2-slip li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--soft); border-radius: 10px; }
.bf2-leg b { display: block; font-size: 16px; line-height: 1.2; }
.bf2-leg small { font-size: 13px; color: var(--muted); }
.bf2-odds { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.bf2-stake { font-weight: 800; font-size: 15px; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.bf2-result { margin: 0; font-size: 18px; font-weight: 900; color: var(--accent); }
.bf2-math { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
/* check-mark lists (steps, honesty, plan features): never numbers */
.bf2-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-weight: 600; }
.bf2-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.bf2-checks li::before { content: ""; width: 11px; height: 6px; margin-top: 8px; border-left: 3px solid var(--g); border-bottom: 3px solid var(--g); transform: rotate(-45deg); }
.bf2-steps { border-top: 4px solid var(--g); padding-top: 16px; gap: 12px; }
.on-green .bf2-checks li::before, .callout.dark .bf2-checks li::before { border-color: var(--lime); }
:where(:root[data-theme="dark"]) .bf2-checks li::before { border-color: var(--lime); }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .bf2-checks li::before { border-color: var(--lime); } }
/* plan cards */
.bf2-plans { display: grid; gap: 16px; margin-top: 8px; }
.bf2-plan { display: grid; gap: 10px; align-content: start; border: 2px solid var(--line); border-radius: 16px; padding: 20px; background: var(--paper); }
.bf2-plan.on { border-color: var(--g); box-shadow: 6px 6px 0 var(--plan-on-shadow); }
.bf2-plan-for { margin: 0; font-weight: 700; color: var(--muted); }
.bf2-price { margin: 0; font: 900 48px/1 var(--f-head); color: var(--accent); }
.bf2-price small { font: 700 16px var(--f-body); color: var(--muted); margin-left: 4px; }
.bf2-plan ul { font-size: 15px; gap: 8px; }
.bf2-needs { margin: 0; font-size: 14px; font-weight: 700; padding-top: 10px; border-top: 1px solid var(--line); }
.bf2-plan .bf2-cta, .bf2-plan .btn { margin-top: 6px; }
@media (min-width: 700px) { .bf2-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bf2-plans.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bf2-plans.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =====================================================================================================
   UI kit primitives (js/ui.js, documented in qa/ui-kit.md). Screens compose these; they don't restyle them.
   ===================================================================================================== */

/* ---------- page head (ui.pageHead / ui.header): static H1, live status on the title row, 1-line subtitle ---------- */
.page-head.ph { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 16px; margin-bottom: 14px; }
.ph-main { min-width: 0; }
.ph-title { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.ph-sub { display: flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 860px; margin-top: 6px; }
.page-head.ph .sub { margin: 0; }
.ph .sub.clamp { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph .sub.clamp.open { white-space: normal; overflow: visible; }
.sub-more { flex: none; border: 0; background: none; padding: 0; color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ph-details { margin-top: 4px; max-width: 760px; }
.ph-details > summary { cursor: pointer; color: var(--accent); font-weight: 700; font-size: 14px; width: max-content; }
.ph-details-body { padding-top: 6px; color: var(--muted); font-size: var(--t-body); }
.ph .incl { margin-top: 8px; }
.incl svg { flex: none; color: var(--muted); }
.page-head.ph .head-actions { align-self: center; justify-content: flex-end; }
.page-head.ph .head-actions:empty { display: none; }
.page-head.ph > .facts { grid-column: 1 / -1; }

/* Wide screens: when the title row has no actions and at most 4 facts, the facts strip sits beside the title
   (a scoreboard, as on Arbitrage), so results start one strip higher. */
@media (min-width: 1280px) {
  .page-head.ph:has(> .head-actions:empty):has(> .facts):not(:has(> .facts > .stat:nth-child(5))) { padding-bottom: 12px; border-bottom: 2px solid var(--line); }
  .page-head.ph:has(> .head-actions:empty) > .facts:not(:has(> .stat:nth-child(5))) { grid-column: 2; grid-row: 1; align-self: center; margin: 0; padding: 0; border: 0; }
  .page-head.ph:has(> .head-actions:empty) > .facts:not(:has(> .stat:nth-child(5))) .stat small { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- facts strip (ui.facts): flat ruled row, keeps .stats/.stat strong ---------- */
.stats.facts { display: flex; flex-wrap: nowrap; gap: 0; margin: 6px 0 2px; padding-bottom: 8px; border-bottom: 2px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.stats.facts::-webkit-scrollbar { display: none; }
.stats.facts[hidden], .facts[hidden] { display: none; }
.facts .stat { flex: 0 0 auto; background: none; border: 0; border-radius: 0; padding: 2px 20px 0 0; margin: 0 20px 0 0; border-right: 1px solid var(--line); text-align: left; font: inherit; color: inherit; min-width: 0; }
.facts .stat:last-child { border-right: 0; margin-right: 0; }
.facts .stat .fact-l { display: block; font-size: var(--t-xs); font-weight: 700; color: var(--muted); }
.facts .stat strong { font: 900 var(--t-fig)/1 var(--f-head); margin-top: 3px; color: var(--accent); }
.facts .stat small { font-size: var(--t-xs); margin-top: 2px; }
.facts .stat.click { cursor: pointer; text-decoration: none !important; border-radius: 0; }
.facts .stat.click:hover .fact-l { color: var(--accent); text-decoration: underline; }

/* ---------- live status (ui.liveStatus): Live / Paused / Stale / Feed down (warn, never red) ---------- */
.live-status { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 2px 0 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); font-size: var(--t-sm); font-weight: 700; color: var(--muted); }
.ls-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--pos); box-shadow: 0 0 0 3px var(--pos-bg); animation: pulse 1.4s infinite; }
.ls-text { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 15ch; }
.live-status .ls-pause { min-height: 30px; padding: 2px 8px; font-size: 14px; color: var(--accent); }
.live-status[data-state="paused"] .ls-dot { background: var(--muted); box-shadow: 0 0 0 3px var(--line-2); animation: none; }
.live-status[data-state="stale"] .ls-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); animation: none; }
.live-status[data-state="stale"] .ls-text, .live-status[data-state="down"] .ls-text { color: var(--warn); }
.live-status[data-state="down"] { border-color: var(--warn); background: var(--warn-bg); }
.live-status[data-state="down"] .ls-dot { background: var(--warn); box-shadow: none; animation: none; border-radius: 2px; }

/* ---------- mode switch (ui.modeSwitch) ---------- */
.mode-switch .ms-n { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; background: var(--soft); color: var(--accent); font: 800 11px/16px var(--f-body); font-variant-numeric: tabular-nums; }
.mode-switch button.on .ms-n { background: var(--lime); color: var(--pitch-deep); }

/* ---------- money actions (ui.betAction / ui.ghost / ui.actions / ui.heroFig) ---------- */
.bet-action b { font-variant-numeric: tabular-nums; }
.row-acts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: nowrap; }
.row-acts .btn.ghost { color: var(--muted); padding-inline: 6px; }
.row-acts .btn.ghost:hover { color: var(--accent); }
.hero-fig { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.hero-fig b { font: 900 var(--t-fig)/1 var(--f-head); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.hero-fig.pos b { color: var(--pos); }
.hero-fig.neg b { color: var(--neg); }   /* negative P&L text only */
.hero-fig small { margin-top: 3px; font: 600 var(--t-xs)/1.2 var(--f-body); color: var(--muted); white-space: nowrap; }

/* ---------- risk labels (ui.risk): one per opportunity, icon = non-colour cue, never red ---------- */
.risk { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; border: 1px solid transparent; font-size: 11.5px; font-weight: 800; white-space: nowrap; cursor: help; }
.risk svg { flex: none; }
.risk-hedged { background: var(--pos-bg); color: var(--pos); }
.risk-rollover { background: var(--soft); color: var(--accent); }
.risk-edge { background: var(--warn-bg); color: var(--warn); }
.risk-signal { background: transparent; color: var(--muted); border-color: var(--line-strong); }

/* ---------- glossary terms (ui.term) + popover ---------- */
.term { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: help; text-decoration: underline dotted; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.term:hover { text-decoration-color: var(--accent); }
.term-pop { position: fixed; z-index: var(--z-popover); background: var(--paper); color: var(--text); border: 2px solid var(--line); border-top: 4px solid var(--g); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; box-shadow: 0 14px 30px -16px rgba(4, 14, 26, .5); }
.term-pop[hidden] { display: none; }
.term-pop b { font-weight: 800; }
.term-pop p { margin: 4px 0 6px; color: var(--muted); font-weight: 500; }

/* ---------- empty / loading / error (ui.empty({…}) / ui.skeleton / ui.errorState) ---------- */
.empty.empty-x { display: flex; align-items: flex-start; gap: 16px 20px; flex-wrap: wrap; padding: 20px 22px; text-align: left; color: var(--text); font-weight: 500; }
.empty-x .empty-main { flex: 1; min-width: 220px; }
.empty-x h3 { font-size: var(--t-xl); margin-bottom: 6px; }
.empty-x p { margin: 0 0 12px; color: var(--muted); max-width: 62ch; }
.empty-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.empty-near { flex-basis: 100%; border-top: 2px solid var(--line-2); padding-top: 12px; }
.empty-near-h { font-size: var(--t-xs); font-weight: 800; color: var(--muted); margin-bottom: 6px; }
.empty-mate { flex: none; width: 96px; height: 96px; border-radius: 16px; background: var(--g); display: grid; place-items: center; }
.empty-mate img { width: 76px; height: 76px; }
.err-find { min-width: 200px; }
.skel { display: grid; padding: 4px 0; }
.skel-row { display: flex; gap: 16px; padding: 13px 4px; border-bottom: 1px solid var(--line-2); }
.skel-row i { display: block; height: 14px; width: 14%; border-radius: 6px; background: linear-gradient(90deg, var(--line-2) 0%, var(--panel) 50%, var(--line-2) 100%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
.skel-row i:nth-child(5n+1) { width: 36%; } .skel-row i:nth-child(5n+2) { width: 20%; } .skel-row i:nth-child(5n+4) { width: 10%; }
@keyframes skel { to { background-position: -200% 0; } }

/* ---------- paging (ui.more / ui.pager) + back to top ---------- */
.more-row { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0; flex-wrap: wrap; font-size: var(--t-sm); }
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-actionbar); width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--line-strong); border-radius: 10px; background: var(--paper); color: var(--text); cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.to-top[hidden] { display: none; }
body:has(#leg-banner) .to-top { bottom: 104px; }

/* ---------- drawer: accessible slip dialog (desktop) / bottom sheet (<860px) ---------- */
.drawer:focus { outline: none; }
.drawer-title { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.drawer header h2 { font-size: var(--t-xl); }
.drawer-kicker { font-size: var(--t-sm); color: var(--muted); font-weight: 600; }
.drawer-handle { display: none; }
.drawer-body { min-height: 0; }
.drawer-status { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 2px solid var(--line); font-size: 14px; font-weight: 700; }
.drawer-status svg { flex: none; }
.drawer-status.info { background: var(--callout-bg); color: var(--text); }
.drawer-status.warn { background: var(--warn-bg); color: var(--warn); }
.drawer-status.ok { background: var(--pos-bg); color: var(--pos); }
.drawer-status[hidden], .drawer-foot[hidden] { display: none; }
.drawer-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--line); background: var(--paper); }
.drawer-foot .btn.primary { flex: 1 1 auto; }
.drawer-body .fb-fields { display: grid; gap: 14px; }
.drawer-body .fb-fields .field, .drawer-body .fb-fields select { width: 100%; }
.drawer-body .fb-adv[open], .drawer-body .fb-adv-body { display: grid; gap: 14px; }
.drawer-body .fb-pop { position: static; width: auto; margin-top: 8px; box-shadow: none; }

/* ---------- two-step Bet both banner (ui.legFlow) ---------- */
.leg-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: var(--z-actionbar); width: min(760px, calc(100% - 24px)); display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--deep); color: #FFFFFF; box-shadow: 0 4px 0 var(--pitch-deep); }
.lb-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.lb-txt b { font-weight: 800; }
.lb-txt span { color: var(--on-green-soft); font-weight: 600; }
.lb-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.leg-banner .btn.outline, .leg-banner .btn.ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.leg-banner .btn.ghost { border-color: transparent; }

/* ---------- sticky action bar (ui.actionBar): decision screens only ---------- */
.actionbar { position: sticky; bottom: 0; z-index: var(--z-actionbar); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 2px solid var(--line); box-shadow: 0 -8px 20px -16px rgba(4, 14, 26, .45); transition: transform .2s, opacity .2s; }
.actionbar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }

/* ---------- surfaces (ui.sec): top-ruled sections, flat tables, asides on --panel ---------- */
.sec { border-top: 4px solid var(--g); padding-top: 14px; margin-top: 24px; }
.sec:first-child { margin-top: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.sec-head h2 { font-size: var(--t-fig); }
.sec-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aside, .sec.aside { background: var(--panel); border-radius: var(--r); padding: 16px; }

/* ---------- how this makes money (ui.how) ---------- */
.how-sec { padding-top: 10px; }
.how > summary { list-style: none; display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; cursor: pointer; min-height: 40px; }
.how > summary::-webkit-details-marker { display: none; }
.how > summary h2 { font-size: var(--t-xl); }
.how-sum { flex: 1; min-width: 200px; color: var(--muted); font-size: 14px; font-weight: 600; }
.how-chev { flex: none; transition: transform .15s; color: var(--accent); }
.how[open] .how-chev { transform: rotate(180deg); }
.how-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding-top: 12px; }

/* ---------- Hank tile (ui.mate): max one per screen, always on green ---------- */
.mate-tile { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: var(--g); color: var(--on-green-soft); }
.mate-tile img { width: 96px; height: 96px; flex: none; }
.mate-txt { min-width: 0; font-weight: 600; }
.mate-txt h2, .mate-txt h3, .mate-txt b { color: #FFFFFF; }

/* ---------- legs as slip lines (ui.slipLegs) + cash needed ---------- */
/* One grid for all legs so books, prices, sides and stakes line up in columns (each .sl is display:contents). */
.slip-lines { display: grid; grid-template-columns: auto auto minmax(64px, 1fr) auto; align-items: center; gap: 4px 8px; min-width: 0; font-size: var(--t-cell); }
.sl { display: contents; }
.sl > * { white-space: nowrap; }
.sl > .book { justify-self: start; }
.sl-side { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); max-width: 240px; }
/* "Denver Nuggets -4": the name gives way first, the line always shows. */
.sl-side.split { display: inline-flex; align-items: baseline; gap: 4px; text-overflow: clip; }
.sl-side.split .sl-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sl-side.split .sl-ln { flex: none; color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.sl-stake { justify-self: end; font-weight: 800; font-variant-numeric: tabular-nums; }
.cash-needed { margin: 0; font-size: var(--t-sm); font-weight: 700; color: var(--muted); }
.cash-needed span { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- colour discipline: status tags, direction cues, n/a, hatched losses, illegal books ---------- */
.st { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; border: 1px solid transparent; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.st-ok { background: var(--pos-bg); color: var(--pos); }
.st-bad { background: var(--panel); color: var(--text); border-color: var(--line-strong); }
.st-warn { background: var(--warn-bg); color: var(--warn); }
.st-info { background: var(--soft); color: var(--accent); }
.st-live { color: var(--live); border-color: currentColor; }
.st-muted { background: var(--panel); color: var(--muted); }
.dir { font-size: 10px; margin-left: 3px; }
.dir.up { color: var(--pos); } .dir.down { color: var(--warn); }
.na { color: var(--muted); }
.loss-hatch { background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 6px); }
.book.off { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--muted); text-decoration: line-through; }
.ev-line { margin: 3px 0 0; font-size: 13.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.related { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 14px; }
.related-l { font-weight: 700; color: var(--muted); }
.linkish { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- plan awareness: lock card, nav locks, sidebar plan ---------- */
.lock-card { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; margin: 12px 0; padding: 14px 16px; border: 2px solid var(--line); border-top: 4px solid var(--g); border-radius: var(--r); background: var(--panel); }
.lock-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--deep); color: var(--lime); }
.lock-txt { flex: 1; min-width: 200px; }
.lock-txt h3 { font-size: var(--t-lg); }
.lock-txt p { margin: 4px 0 0; color: var(--muted); font-weight: 600; }
.lock-txt p b { color: var(--text); }
.nav-lock { display: inline-flex; flex: none; opacity: .8; }
.nav-lock[hidden] { display: none; }
.side-plan .side-label { display: block; padding-top: 0; }
.side .btn.outline { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .45); box-shadow: none; }
.side .btn.outline:hover { border-color: var(--lime); }

/* ---------- first-run setup (ui.setupCard) ---------- */
.setup-card { margin: 0 0 16px; }
.setup { border: 2px solid var(--line); border-top: 4px solid var(--g); border-radius: var(--r); background: var(--paper); }
.setup > summary { list-style: none; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; }
.setup > summary::-webkit-details-marker { display: none; }
.setup > summary h2 { font-size: var(--t-lg); }
.setup-prog { display: inline-flex; gap: 4px; }
.setup-prog .sp { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; border: 2px solid var(--line-strong); color: var(--muted); }
.setup-prog .sp.on { background: var(--g); border-color: var(--g); color: #FFFFFF; }
.setup-hint { flex: 1; min-width: 200px; }
.sample-line { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.setup-acts { display: flex; gap: 6px; }
.setup[open] .setup-acts .btn.primary { display: none; }
.setup-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 18px; padding: 4px 14px 14px; border-top: 2px solid var(--line-2); }
.setup-step h3 { display: flex; align-items: center; gap: 6px; margin: 12px 0 8px; font-size: var(--t-md); }
.setup-step.done h3 svg { color: var(--g); }
.setup-step .field { margin-bottom: 8px; max-width: 160px; }
.setup-step .chips { margin-bottom: 8px; }
.chip.off { border-style: dashed; color: var(--muted); }
.setup-foot { grid-column: 1 / -1; padding-top: 6px; }

/* ---------- ui.table: keyed rows, sortable heads, sticky header, density, Columns menu ---------- */
.tbl { position: relative; }
.tbl-tools { display: flex; align-items: center; gap: 4px; padding: 0 0 6px; flex-wrap: wrap; }
.tbl-tools .btn.ghost { min-height: 30px; padding: 2px 8px; font-size: 14px; color: var(--muted); }
.tbl-tools .btn.ghost[aria-pressed="true"], .tbl-tools .btn.ghost[aria-expanded="true"] { color: var(--accent); border-color: var(--line-strong); }
/* Tools inside the actions column header (ui.table, desktop): icon buttons, names kept for screen readers + title. */
.ui-t th.act-h { text-align: right; }
.tbl-tools.in-head { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; padding: 0; text-transform: none; letter-spacing: 0; }
.tbl-tools.in-head .spacer { display: none; }
.tbl-tools.in-head .btn.ghost { min-height: 24px; padding: 0 6px; font-size: 13px; }
.tbl-tools.in-head .btn.ghost > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tbl-tools.in-head .tbl-pending { padding: 1px 8px; font-size: 12px; }
.tbl-tools.in-head .tbl-colmenu { text-align: left; font-weight: 600; font-size: var(--t-cell); color: var(--text); }
.tbl-pending { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 2px solid var(--g); border-radius: 8px; background: var(--soft); color: var(--accent); font: 800 13px/1.3 var(--f-body); cursor: pointer; }
.tbl-pending[hidden] { display: none; }
.tbl-cols { position: relative; }
.tbl-cols[hidden] { display: none; }
.tbl-colmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-popover); min-width: 210px; display: grid; gap: 4px; padding: 10px 12px; background: var(--paper); border: 2px solid var(--line); border-top: 4px solid var(--g); border-radius: 12px; box-shadow: 0 14px 30px -16px rgba(4, 14, 26, .5); }
.tbl-colmenu[hidden] { display: none; }
.tbl-colmenu .check { min-height: 30px; }
.tbl-scroll { overflow-x: clip; }
.tbl.scrolls .tbl-scroll { overflow-x: auto; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.tbl.scrolls .ui-t th:first-child, .tbl.scrolls .ui-t td:first-child { position: sticky; left: 0; z-index: var(--z-raised); background: var(--paper); }
.tbl-empty[hidden], .tbl-scroll[hidden] { display: none; }
.ui-t th { position: sticky; top: var(--topbar-h); z-index: var(--z-thead); }
/* In sideways-scroll mode the thead sticks inside the overflow scroller, not the page: top 0 there,
   or it is pushed down over the first row. */
.tbl.scrolls .ui-t th { top: 0; }
.ui-t th.r, .ui-t td.r { text-align: right; }
.ui-t th.c, .ui-t td.c { text-align: center; }
.th-sort { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.th-sort:hover { color: var(--text); }
.sort-ic::after { content: "\2195"; opacity: .45; font-size: 11px; }
.ui-t th[aria-sort="descending"] .sort-ic::after { content: "\25BC"; opacity: 1; font-size: 9px; }
.ui-t th[aria-sort="ascending"] .sort-ic::after { content: "\25B2"; opacity: 1; font-size: 9px; }
.ui-t th.sorted { color: var(--text); }
.ui-t td { font-variant-numeric: tabular-nums; }
.tbl[data-density="compact"] .ui-t th { padding: 8px 10px; }
.tbl[data-density="compact"] .ui-t td { padding: 7px 10px; }
.tbl[data-density="comfortable"] .ui-t td { padding: 12px 12px; font-size: var(--t-body); }
.ui-t tr[data-key]:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.ui-t tr.is-new td:first-child { box-shadow: inset 4px 0 0 var(--g); }
.ui-t tr.is-new td:first-child::after { content: "NEW"; display: inline-block; margin-left: 6px; padding: 0 4px; border-radius: 4px; background: var(--soft); color: var(--accent); font: 900 10px/14px var(--f-body); vertical-align: middle; }
.ui-t tr.gone td { color: var(--muted); text-decoration: line-through; }
.ui-t tr.gone td.act { text-decoration: none; }
.ui-t tr.gone { cursor: default; }
.ui-t td.tick-up { animation: tickUp 1.2s ease; }
.ui-t td.tick-down { animation: tickDown 1.2s ease; }
@keyframes tickUp { from { background: var(--pos-bg); } to { background: transparent; } }
@keyframes tickDown { from { background: var(--warn-bg); } to { background: transparent; } }
.tick-ar { font-style: normal; font-size: 10px; margin-left: 4px; }
td.tick-up .tick-ar { color: var(--pos); } td.tick-down .tick-ar { color: var(--warn); }
.ui-t td.act { width: 1%; white-space: nowrap; text-align: right; }
.tbl-more { display: none; }

/* ---------- ui.filterBar: fixed order, active count + Reset, Advanced, books popover ---------- */
.toolbar.fb { align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.fb-fields { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.fb-item { display: flex; align-items: flex-end; }
.fb-item .field select, .fb-item .field .num { min-height: 36px; }
.fb-item .field .num input { width: 80px; min-width: 0; }
.fb-toggle { min-height: 36px; }
.fb-open { display: none; }
.fb-open b:empty { display: none; }
.fb-reset-wrap { display: inline-flex; align-items: center; gap: 2px; align-self: center; font-size: var(--t-sm); font-weight: 700; color: var(--muted); }
.fb-reset-wrap[hidden] { display: none; }
.fb-chips { display: none; }
.fb-books { position: relative; }
.fb-books .btn b { font-variant-numeric: tabular-nums; }
.fb-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: var(--z-popover); width: min(360px, 86vw); padding: 12px 14px; background: var(--paper); border: 2px solid var(--line); border-top: 4px solid var(--g); border-radius: 12px; box-shadow: 0 14px 30px -16px rgba(4, 14, 26, .5); }
.fb-pop[hidden] { display: none; }
.fb-pop-h { font: 900 var(--t-lg)/1 var(--f-head); text-transform: uppercase; margin-bottom: 10px; }
.fb-books-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.fb-books-grid .check { min-height: 28px; }
.check.off { color: var(--muted); text-decoration: line-through; }
.fb-pop-note { margin: 10px 0 0; font-size: var(--t-sm); color: var(--muted); }
.fb-adv { align-self: center; }
.fb-adv > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; font-size: var(--t-sm); font-weight: 800; color: var(--accent); }
.fb-adv > summary::-webkit-details-marker { display: none; }
.fb-adv[open] { flex-basis: 100%; }
.fb-adv-body { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.fb-adv-n { padding: 0 6px; border-radius: 6px; background: var(--ink); color: var(--lime); font-size: 11px; line-height: 16px; }
.fb-adv-n[hidden] { display: none; }
.fb-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 3px 8px 3px 10px; border: 2px solid var(--line-strong); border-radius: 8px; background: var(--soft); color: var(--accent); font-size: 12.5px; font-weight: 800; cursor: pointer; }
@media (min-width: 861px) { .toolbar.fb.fb-sticky { position: sticky; top: var(--topbar-h); z-index: var(--z-toolbar); background: var(--bg); padding: 8px 0; } }

/* ---------- kit on phones ---------- */
@media (max-width: 860px) {
  .page-head.ph { grid-template-columns: minmax(0, 1fr); }
  .page-head.ph .head-actions { justify-content: flex-start; }
  /* Facts strip on phones: a 2-column grid instead of a sideways scroller, so no label is cut mid-word. */
  .stats.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 0; overflow: visible; }
  .facts .stat { padding-right: 10px; margin-right: 0; border-right: 0; min-width: 0; }
  .facts .stat:nth-child(odd):not(:last-child) { border-right: 1px solid var(--line); margin-right: 12px; }
  .facts .stat .fact-l, .facts .stat small { white-space: normal; }
  .facts .stat strong { font-size: var(--t-xl); }
  .live-status .ls-text { min-width: 0; }
  /* Drawer = bottom sheet: 92dvh, 18px radius, 4px green top rule, grab handle (swipe from the handle only). */
  .drawer, .drawer.wide { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92dvh; border-left: 0; border-top: 4px solid var(--g); border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .drawer-handle { display: block; flex: none; padding: 8px 0 2px; cursor: grab; touch-action: none; }
  .drawer-handle i { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--line-strong); }
  .drawer header { padding: 6px 16px 12px; }
  .drawer-body { padding: 16px; }
  .drawer-status { padding: 10px 16px; }
  .drawer-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .leg-banner { bottom: 8px; padding: 10px 12px; }
  .actionbar { margin-inline: -16px; }
  /* ui.table: one DOM, CSS grid rows (areas per table come from a generated <style>), extras behind Details. */
  .tbl-tools [data-tbl-density] { display: none; }
  .ui-t, .ui-t tbody { display: block; width: 100%; }
  .ui-t thead { display: none; }
  /* Compact phone rows (item A14: <=150px): tight padding, slim sport tags, one-line meta and EV lines. */
  .ui-t tbody tr { display: grid; gap: 3px 10px; align-items: center; padding: 8px 2px; border-bottom: 2px solid var(--line-2); }
  .ui-t .evt-meta { margin-top: 2px; }
  .ui-t .tag { padding-block: 0; line-height: 17px; }
  .ui-t .ev-line { margin-top: 1px; font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ui-t .hero-fig small { margin-top: 2px; }
  .ui-t .hero-fig b { font-size: var(--t-xl); }
  .ui-t .slip-lines { row-gap: 2px; }
  .ui-t .book { padding-block: 1px; }
  .ui-t .risk { padding-block: 0; }
  /* Narrow result cells on phones: the money figure and its "if it misses" / cost line say whether it can lose,
     so the risk chip moves to the slip (as on Arbitrage) and the row stays within 150px. */
  .tbl:is([data-tbl="middles"], [data-tbl="low-holds"], [data-tbl="boosts"]) td:is([data-col="avg"], [data-col="result"], [data-col="profit"]) .risk { display: none; }
  .bf-sharp .tbl[data-density] .ui-t tbody td { padding: 0; } /* grid rows use gaps; the desktop cell padding doesn't apply */
  .tbl[data-tbl="sharp-spikes"] .edge-c { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
  .ui-t tbody td, .tbl[data-density] .ui-t tbody td { display: block; min-width: 0; padding: 0; border: 0; font-size: var(--t-cell); }
  .ui-t tbody td[hidden] { display: none !important; }
  .tbl[data-density] .ui-t tbody td.act { width: auto; display: flex; justify-content: flex-end; }
  .ui-t td.act .row-acts { flex-wrap: wrap; }
  .ui-t td.mlabel::before { content: attr(data-label); display: block; font-size: var(--t-xs); font-weight: 700; color: var(--muted); }
  .tbl[data-density] .ui-t tbody td.x { display: none; grid-column: 1 / -1; }
  .tbl[data-density] .ui-t tbody tr.open td.x:not([hidden]) { display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .ui-t td.x::before { content: attr(data-label); font-size: var(--t-xs); font-weight: 700; color: var(--muted); text-align: left; }
  .ui-t tr.is-new td:first-child { box-shadow: none; }
  .ui-t tr.is-new { box-shadow: inset 4px 0 0 var(--g); }
  .tbl[data-extras="true"] .tbl-more { display: inline-flex; }
  .tbl-more svg { transition: transform .15s; }
  .tbl-more[aria-expanded="true"] svg { transform: rotate(180deg); }
  /* filterBar: [Mode] [Filters · n] [Sort] + removable chips; fields open in a bottom sheet. */
  .toolbar.fb { align-items: center; gap: 8px; }
  .fb > .fb-fields { display: none; }
  .fb-open { display: inline-flex; }
  .fb > .fb-sort .field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fb-chips { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 6px; }
  .fb-chips:empty { display: none; }
  .fb-reset-wrap .fb-count { display: none; }
  .setup-hint { flex-basis: 100%; order: 3; }
  .mate-tile img { width: 72px; height: 72px; }
}

/* ---------- deep-link target (ui.deepLink): the row / card a #/tool?id= link points at ---------- */
.ui-t tr.is-target td, .is-target:not(tr) { background: var(--hl); }
.ui-t tr.is-target td:first-child, .is-target:not(tr) { box-shadow: inset 4px 0 0 var(--g); }
@media (max-width: 860px) { .ui-t tr.is-target { background: var(--hl); box-shadow: inset 4px 0 0 var(--g); } .ui-t tr.is-target td { background: transparent; } }

/* ---------- locked preview (app.js lockPreview, item B10): first 3 results + a lock card, no blur ---------- */
body.bf-locked #view [data-bf-list]:not([data-bf-list] [data-bf-list]) > :nth-child(n+4) { display: none !important; }
.lock-card.lock-auto { margin-top: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  /* Off-canvas sidebar. app.js makes it inert while closed (Tab never enters it) and the page inert while open. */
  .side { width: min(304px, 88vw); transform: translateX(-100%); transition: transform .22s; }
  body.nav-open .side { transform: none; }
  body.nav-open .side-bg { display: block; position: fixed; inset: 0; background: rgba(4, 14, 26, .5); z-index: var(--z-scrim); }
  .side-head { flex-wrap: wrap; padding-right: 10px; }
  .brand { padding: 14px 16px 10px; }
  .side-close { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border-color: rgba(255,255,255,.4); color: #FFFFFF; }
  .side-demo { display: inline-block; order: 9; margin: 0 0 6px 16px; background: rgba(255,255,255,.12); color: #FFFFFF; }
  .recent:not([hidden]) { display: block; padding: 6px 14px 4px; }
  .main { margin-left: 0; }
  .menu { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: none; }
  .topbar { padding: 8px 16px; }
  .top-demo, .top-state { display: none; }
  #view { padding: 18px 16px 32px; }
  .page-foot { padding: 14px 16px 22px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  h1 { font-size: 32px; }
  /* Tables become cards on phones: add class "stack-sm" to a table and data-label to cells. */
  table.stack-sm thead { display: none; }
  table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td { display: block; width: 100%; }
  table.stack-sm tr { border: 2px solid var(--line); border-radius: var(--r); margin-bottom: 10px; background: var(--paper); padding: 6px 0; }
  table.stack-sm td { border: 0; padding: 6px 12px; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  table.stack-sm td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 700; text-align: left; }
  table.stack-sm td.num { justify-content: space-between; }
}
code { font-family: var(--f-body); font-weight: 700; background: var(--soft); border-radius: 6px; padding: 1px 6px; }
/* Phones: the 24px mark + page title on the left; "$5k" bankroll chip, bell, theme toggle and the menu
   button fit in 390px. The avatar moves into the sidebar so the toggle always fits. */
@media (max-width: 520px) {
  .topbar { gap: 8px; padding-inline: 12px; }
  .top-mark { display: block; flex: none; }
  /* The title only appears once the page's own H1 has scrolled out of view (app.js toggles body.h1-off),
     so the bar never repeats the H1 right above it. It keeps its flex space either way (no layout shift). */
  .top-title { display: block; visibility: hidden; opacity: 0; transition: opacity .15s; }
  body.h1-off .top-title { visibility: visible; opacity: 1; }
  .topbar .top-right { gap: 6px; margin-left: 0; }
  .top-chip { padding: 0 8px; gap: 4px; }
  .top-chip .lbl, .top-chip #top-bank { display: none; }
  .top-chip .short { display: inline; }
  .top-avatar { display: none; }
  .side-head .side-avatar { display: grid; }
  /* The popover becomes a full-width sheet under the top bar. */
  .sizing { position: static; }
  .sizing-pop { position: fixed; left: 8px; right: 8px; top: calc(var(--topbar-h) + 4px); width: auto; max-height: calc(100dvh - var(--topbar-h) - 16px); overflow-y: auto; }
}

/* ---------- command palette + keyboard cheat sheet (js/palette.js, item 45) ----------
   Outside #app, above drawers. Keys are Figtree in a square-cornered tile (no monospace, no pills). */
.side-search { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 2px 10px 6px; min-height: 36px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  background: rgba(255,255,255,.06); color: var(--side-text); font: 600 13.5px/1.2 var(--f-body); cursor: pointer; text-align: left; flex: none; }
.side-search:hover { background: rgba(255,255,255,.1); color: #FFFFFF; }
.side-search span { flex: 1; }
.side-search kbd { border-color: rgba(255,255,255,.25); background: transparent; color: var(--side-text); }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--paper); color: var(--text);
  font: 700 12px/1.5 var(--f-body); text-align: center; white-space: nowrap; }
.palette-wrap { position: fixed; inset: 0; z-index: calc(var(--z-drawer) + 10); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.palette-wrap[hidden] { display: none; }
.palette-bg { position: absolute; inset: 0; background: rgba(4, 14, 26, .45); }
.palette { position: relative; width: min(620px, 100%); max-height: min(560px, 76vh); display: flex; flex-direction: column; background: var(--paper); color: var(--text);
  border: 2px solid var(--line); border-top: 4px solid var(--g); border-radius: var(--r); box-shadow: 0 24px 48px -20px rgba(4, 14, 26, .6); overflow: hidden; outline: none; }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--line); color: var(--muted); }
.pal-in input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 600 17px/1.3 var(--f-body); padding: 6px 0; outline: none; }
.pal-in input::placeholder { color: var(--muted); }
.pal-esc { border: 0; background: none; padding: 4px; cursor: pointer; flex: none; }
.pal-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.pal-g { padding: 10px 10px 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pal-it { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; cursor: pointer; border-left: 4px solid transparent; }
.pal-it .i { flex: none; color: var(--muted); }
.pal-it[aria-selected="true"] { background: var(--panel); border-left-color: var(--g); }
.pal-it[aria-selected="true"] .i { color: var(--g); }
.pal-t { flex: 1; min-width: 0; display: grid; }
.pal-t b { font-size: 14.5px; font-weight: 700; }
.pal-t small { font-size: 12.5px; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-none { padding: 18px 12px; color: var(--muted); font-size: 14px; }
.pal-foot { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); font-weight: 600; }
.pal-foot span { display: inline-flex; gap: 4px; align-items: center; }
.kbd-sheet { padding: 14px 18px 16px; overflow-y: auto; }
.kbd-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.kbd-head h2 { font-size: 26px; }
.kbd-h3 { font: 800 13px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--muted); margin: 14px 0 6px; }
.kbd-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; align-items: center; }
.kbd-list dt { margin: 0; white-space: nowrap; }
.kbd-list dd { margin: 0; }
.kbd-go { grid-template-columns: repeat(2, max-content 1fr); }
.kbd-note { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
/* j / k: keep the focused row clear of the sticky top bar and table head. */
#view tr[data-key], #view [data-bf-list] > * { scroll-margin-top: calc(var(--topbar-h) + 48px); scroll-margin-bottom: 72px; }
:root[data-theme="dark"] .palette-bg { background: rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .palette-bg { background: rgba(0, 0, 0, .6); } }
@media (max-width: 860px) {
  .palette-wrap { padding: 8px; align-items: flex-start; }
  .palette { max-height: calc(100dvh - 16px); }
  .side-search kbd, .pal-foot { display: none; }
  .kbd-go { grid-template-columns: max-content 1fr; }
}
@media (pointer: coarse) { .side-search { min-height: 48px; } .pal-it { min-height: 48px; } }

/* ---------- touch: 16px inputs (no iOS zoom on focus) and >=44px tap targets ---------- */
@media (pointer: coarse) {
  /* !important on purpose: screens size their own inputs (13-14px), and anything under 16px makes iOS zoom in. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea, .field .num { font-size: 16px !important; }
  .btn, .btn.sm { min-height: 44px; }
  /* Row actions in dense result tables: 36px buttons with a 44px hit area (like chips), so rows stay compact. */
  .ui-t td.act .btn.sm { min-height: 36px; position: relative; }
  .ui-t td.act .btn.sm::after { content: ""; position: absolute; inset: -4px 0; }
  /* Compact 30px controls (table Columns menu, best-price Bet on the Screen cards) keep their size but get a 44px hit area. */
  .tbl-cols .btn.sm, .scr .bestc .btn.sm { position: relative; }
  .tbl-cols .btn.sm::after, .scr .bestc .btn.sm::after { content: ""; position: absolute; inset: -7px 0; }
  .icon-btn, .icon-btn.theme-toggle { width: 44px; height: 44px; }
  .chip, .seg button { min-height: 40px; position: relative; }
  .chip::after, .seg button::after { content: ""; position: absolute; inset: -2px 0; } /* 40px + hit area = 44 */
  .side-nav a { min-height: 48px; }
  .nav-h { min-height: 40px; padding-block: 10px 4px; }
  .recent-chip { min-height: 44px; }
  .top-chip, .icon-btn.bell { height: 44px; }
  .icon-btn.bell { width: 44px; }
  .avatar { width: 40px; height: 40px; }
  .top-field select { min-height: 40px; }
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
  .check input, input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
}
@media (pointer: coarse) and (max-width: 860px) { :root { --topbar-h: 62px; } }

/* ---------- reduced motion: no animations or transitions anywhere (live pulses, drawers, toasts, flashes) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}


/* ---------- OddsBoss brand layer (brands/oddsboss/app.css) ---------- */
/* OddsBoss app layer, appended after public/css/app.css by build/brand.mjs (see brands/oddsboss/DESIGN.md).
   brand.json `colors` already swapped every original green for its OddsBoss value (one value per hex, and this
   file is appended after that swap, so hex values written here are used as written). This file only sets:
   - tokens where one original hex plays roles that need different OddsBoss values,
   - fonts (Archivo at three widths, see below),
   - the one loud accent, Marquee Gold: "Boss" in the wordmark and the sidebar All-Access button (navy text),
   - selected chips/segments in Flag Blue with white text (light theme).
   No size or spacing changes. Status colours (--pos/--neg/--warn/--live) are not touched: they stay as in the original.
   (Don't write the old name or old green hex values in this file: the build's leftover check reads it.) */

/* FONTS:BEGIN */
/* Fonts: one Archivo variable file at three widths (the same woff2 files the Google Fonts link loads, so nothing
   extra downloads). A single font-stretch value in an @font-face descriptor pins the wdth axis for that face, which
   survives the `font:` shorthand the CSS uses everywhere (the shorthand resets font-stretch, so a plain
   font-stretch rule would be lost).
   One face per family and unicode-range (font matching picks stretch before weight, so several stretches in one
   family would hide every face but the 100% one and kill bold). Weight 500 to 900 varies freely in each face.
   - OddsBoss Head: wdth 62 (Extra Condensed) for headings, buttons, figures.
   - OddsBoss Word: wdth 81 for the wordmark (same width as the original wordmark at 25px: 107px).
   - OddsBoss Body: wdth 97, the single width whose line lengths come closest to the original body face
     across the weights the app uses (measured; see DESIGN.md section 2). */
@font-face { font-family: "OddsBoss Head"; font-style: normal; font-weight: 100 1000; font-stretch: 62%; font-display: swap; src: url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "OddsBoss Head"; font-style: normal; font-weight: 100 1000; font-stretch: 62%; font-display: swap; src: url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdfoLnnA.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "OddsBoss Word"; font-style: normal; font-weight: 100 1000; font-stretch: 81%; font-display: swap; src: url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "OddsBoss Body"; font-style: normal; font-weight: 100 1000; font-stretch: 97%; font-display: swap; src: url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "OddsBoss Body"; font-style: normal; font-weight: 100 1000; font-stretch: 97%; font-display: swap; src: url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdfoLnnA.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* FONTS:END */

:root {
  --f-head: "OddsBoss Head", "Archivo", "Arial Narrow", sans-serif;
  --f-body: "OddsBoss Body", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-word: "OddsBoss Word", "Archivo", system-ui, sans-serif;

  /* Roles that share an original hex but take a different OddsBoss value. */
  --btn-sm: #0A3161;         /* the original darker small-button value (= --hero-g) isn't needed: white on navy is 12.9:1 */
  --flag: #FFC93C;           /* Hank's flag ONLY (if a pose shows one), never an app colour */

  /* Marquee Gold, chrome only (wordmark "Boss", sidebar All-Access button). Never on data, never "selected". */
  --gold-on-navy: #FFC93C;   /* navy #0A1F44 text on it 10.58:1; 8.41:1 against Old Glory Blue */
  --gold-on-white: #9A6B00;  /* Brass: the gold for white grounds, 4.69:1 on white */
  --gold-shadow: #B8860B;    /* hard shadow under gold buttons */

  /* Selected (seg/chip on-state, pressed parlay outcome): Flag Blue with white text, 7.83:1. */
  --sel: #1E4FA0; --sel-text: #FFFFFF; --sel-line: #1E4FA0; --sel-solid: #1E4FA0;
}

/* Dark theme: keep the two blocks identical (same rule as app.css). Figures stay Floodlight #A9C6FF here: gold
   would sit 1.07:1 from the dark --warn #F2C35B. Selected keeps the original dark look (pitch-deep, Floodlight). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #1A3F70;          /* dark tags/on-states: a step lighter than --pitch-deep so they read on --paper */
    --btn: #3A6CD0; --btn-sm: #3A6CD0;   /* navy buttons vanish on a navy night ground: royal, white text 4.96:1 */
    --sel: var(--pitch-deep); --sel-text: var(--lime); --sel-line: var(--lime); --sel-solid: var(--ink);
  }
}
:root[data-theme="dark"] {
  --ink: #1A3F70;
  --btn: #3A6CD0; --btn-sm: #3A6CD0;
  --sel: var(--pitch-deep); --sel-text: var(--lime); --sel-line: var(--lime); --sel-solid: var(--ink);
}

/* Selected states: one rule for both themes, values from the tokens above. */
.seg button.on, .chip.on { background: var(--sel); color: var(--sel-text); border-color: var(--sel-line); }
:root .pb .pb-oc[aria-pressed="true"] { background: var(--sel-solid); border-color: var(--sel-solid); }

/* Wordmark: "Odds" white + "Boss" gold on the navy sidebar (both themes). */
.bf-word { font-family: var(--f-word); }
.bf-word span { color: var(--gold-on-navy); }

/* Sidebar All-Access button (shown on plans below All-Access): the one gold button in the app, navy text. */
.side {
  --lime-btn: var(--gold-on-navy); --lime-btn-sm: var(--gold-on-navy); --lime-btn-text: #0A1F44; --lime-btn-shadow: var(--gold-shadow);
}

/* The name keeps its camel case inside uppercase buttons too (brand.json `replace` routes button labels through
   headText(), which wraps it in .bf-name). ODDSBOSS reads, but mixed case keeps "Odds" and "Boss" apart. */
.btn .bf-name { text-transform: none; }

/* CH:BEGIN */
/* ch widths -> the same px as the original. `ch` is the width of "0", and Archivo's "0" is ~11% narrower than the
   original body face's, so every Nch measure shrank. Each rule below restates its original Nch as N x (1ch of the
   original font at that weight, in em): same px at every font size. `:root` lifts the page rules above the
   page's own <style>. Source rule in the comment. */
.ls-text { min-width: 9.72em; }   /* 15ch, css/app.css */
.empty-x p { max-width: 39.87em; }   /* 62ch, css/app.css */
:root .settings .sec-note { max-width: 39.87em; }   /* 62ch, pages/account.js */
:root .aic .aic-empty .mate-tile p { max-width: 36.01em; }   /* 56ch, pages/ai-chat.js */
:root .bf-calc .calc-for { max-width: 39.87em; }   /* 62ch, pages/calculators.js */
:root .daily .dh-sub { max-width: 39.87em; }   /* 62ch, pages/daily.js */
:root .gl .gl-item dd { max-width: 46.3em; }   /* 72ch, pages/glossary.js */
:root .pmm .scan-sub { max-width: 51.44em; }   /* 80ch, pages/pm-markets.js */
:root .pricing .hero-copy h2 { max-width: 6.43em; }   /* 14ch, pages/pricing.js */
:root .pricing .hero-lead { max-width: 33.54em; }   /* 52ch, pages/pricing.js */
:root .tk .health-note { max-width: 50.15em; }   /* 78ch, pages/tracker.js */
/* CH:END */

/* Pricing hero: Hank's touchdown pose fits the original box, so it keeps the original size (the first brand's
   taller pose needed scale(.89) here). */

/* Page-head subtitle: a one-line clamp that shows "More" when the text overflows. Archivo 500 at the app's body width
   runs ~3% shorter than the original, so some subtitles stopped overflowing and lost their "More" button. A hair of
   tracking gives the line the original length (measured), so the same pages clamp. */
.ph-sub .sub { letter-spacing: .014em; }

/* Sale (FINAL-SALE-SPEC; brands/oddsboss/sale.json, sale.js via patches.mjs): html.ob-sale while it runs. The sidebar
   plan button and the Pricing All-Access tile carry [data-sale] twins that swap with it; after the deadline the app is
   exactly the normal one. Pumpkin only on navy, never in data. */
:root { --pumpkin: #F57C1F; }
html:not(.ob-sale) [data-sale="on"], html.ob-sale [data-sale="off"] { display: none !important; }
.pricing .bf2-tag.ob-sale-tag { background: var(--pumpkin); color: #0A1F44; }
.pricing .price-tile .ob-then { margin: -4px 0 0; font-size: 15px; font-weight: 700; color: var(--lime); }
html.ob-sale #side-plan .btn { padding-inline: 10px; font-size: 17px; } /* the sale label fits the 248px sidebar on one line */
#side-plan .side-sale { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--side-text); }