/* ChaseIQ: dark "boards navy" look from the rink palette (docs/brand.md). Navy surfaces, ice blue as the single accent
   for actions, selection and state, red line for brand moments only (logo, breaker accents, never data or verdicts),
   Inter for text, JetBrains Mono for numbers.
   Layout: top bar, page head, inputs strip, tabbed sortable tables, slide-in detail drawer.
   Every colour, font and radius is a token below. A light theme later = one more block,
   :root[data-theme="light"] { ... }, redefining the same tokens (nothing else needs to change). */
:root {
  /* rink palette (same names as welcome.html and guide.html) */
  --boards: #0C1B2A;        /* boards navy, the brand's base colour */
  --ice: #EEF4F8;           /* rink ice, light marketing pages */
  --redline: #C8203A;       /* brand moments on light backgrounds */
  --redline-dark: #E23A52;  /* the same red line on navy (3.6:1, marks and bars, not body text) */
  --blueline: #1F5FD6;      /* links and highlights on light backgrounds */

  /* surfaces */
  --bg: #0A1622;            /* page */
  --surface: #0F1E2D;       /* panels, tables, cards */
  --surface-2: #0C1926;     /* table heads, inset areas */
  --surface-3: #152738;     /* hover rows, chips */
  --input-bg: #08121B;      /* typed-in fields */
  --line: #1A2B3C;          /* hairlines */
  --line-strong: #26394C;   /* input borders, base segments */
  --scrim: rgba(3, 8, 14, .64);
  --shadow: 0 18px 50px rgba(0, 4, 10, .55), 0 0 0 1px var(--line);

  /* text */
  --ink: #E8EEF4;           /* 14.4:1 on surface */
  --ink-2: #C3CEDA;
  --muted: #8B9BAE;         /* 5.9:1 on surface */
  --faint: #8090A4;         /* 4.7:1 on surface-3, the lightest place it sits */

  /* the one accent */
  --accent: #7FD4FF;
  --accent-ink: #061220;    /* text on a solid accent */
  --accent-soft: rgba(127, 212, 255, .12);
  --accent-line: rgba(127, 212, 255, .38);

  /* verdicts */
  --steal: #5FE0A8;  --steal-bg: rgba(95, 224, 168, .12);
  --fair: #9FC9E8;   --fair-bg: rgba(159, 201, 232, .12);
  --pricey: #F5C26B; --pricey-bg: rgba(245, 194, 107, .12);
  --over: #FF8FA3;   --over-bg: rgba(255, 143, 163, .12);
  --violet: #B9A3FF; --violet-bg: rgba(185, 163, 255, .14);

  /* older names still used by the scripts (card-mix bars) */
  --good: var(--steal); --good-bg: var(--steal-bg);
  --warn: var(--pricey); --warn-bg: var(--pricey-bg);
  --bad: var(--over); --bad-bg: var(--over-bg);
  --blue: var(--accent);
  --chip-bg: var(--surface-3);

  /* product letters A, B, C… */
  --pl-0: #7FD4FF; --pl-1: #5FE0A8; --pl-2: #F5C26B; --pl-3: #FF8FA3;
  --pl-4: #B9A3FF; --pl-5: #5ED6D0; --pl-6: #FFA877; --pl-7: #A9B6C6;

  /* type */
  --f-body: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-display: var(--f-body);
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink); font: 14px/1.5 var(--f-body);
  font-feature-settings: "cv11", "ss01"; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Phones: hover styles only apply with a mouse (each :hover rule sits in a (hover: hover) query, so a tapped button
   doesn't stay lit). No grey flash on tap, no double-tap delay, no text selection on a long-pressed button, and buttons
   react the moment a finger lands. */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, select, [role="button"] { touch-action: manipulation; }
button, .btn, summary { -webkit-user-select: none; user-select: none; }
.btn, .pick, .pick-btn, .seg button, .filter-chip, .menu-btn, .chase-card, .help-link { transition-property: background-color, border-color, color, transform; transition-duration: .12s; }
.btn:active:not(:disabled), .pick:active, .pick-btn:active, .seg button:active, .filter-chip:active, .menu-btn:active, .chase-card:active, .help-link:active { transform: scale(.97); }
.menu-item:active, .rt-hit:active, .home-list a:active { background: var(--surface-3); }
/* Touch screens wider than a phone (iPad) have no hover to reveal the Taken button. */
@media (hover: none) { .taken-btn { opacity: 1; } }
::selection { background: var(--accent-soft); }
input, select, textarea { accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type=number] { font-family: var(--f-mono); font-size: .95em; }
select option { background: var(--surface); color: var(--ink); }

/* quiet small labels, used everywhere (sentence case) */
.field label, .stat span, .d-stat span, .picker-label, .d-eyebrow, .bk-products th, table.mini th, .best-list span {
  font-size: 10.5px; font-weight: 500; color: var(--muted);
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px max(20px, env(safe-area-inset-left)) 10px max(20px, env(safe-area-inset-right));
  background: rgba(10, 22, 34, .86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.brand-mark { width: 28px; height: 28px; display: block; }
.brand-name { font: 500 19px/1 var(--f-body); letter-spacing: -.01em; color: var(--ink); }
.brand-name em { font-style: normal; color: var(--accent); }
/* "For breakers" brand moment: a red line beside ink text (the red is never text, a fill or a verdict) */
.for-breakers { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.for-breakers::before { content: ""; width: 3px; height: 1.1em; border-radius: 2px; background: var(--redline-dark); }
.product-picker { flex: 1 1 220px; min-width: 0; }
.product-picker select { width: 100%; max-width: 420px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--input-bg); border: 1px solid var(--line-strong); }
.top-actions { display: flex; gap: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--surface-3); color: var(--ink); font-weight: 500; font-size: 13.5px; white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s, transform .12s;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { border-color: var(--faint); } }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .btn.primary:hover { background: #A3E0FF; border-color: #A3E0FF; } }
.btn.primary:disabled { opacity: .4; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .btn.ghost:hover { color: var(--ink); background: var(--surface-3); } }
.btn.small { padding: 4px 10px; font-size: 12.5px; }
.btn.big { padding: 11px 22px; font-size: 15px; }
.btn.danger { color: var(--over); border-color: rgba(255, 143, 163, .4); background: transparent; }
@media (hover: hover) and (pointer: fine) { .btn.danger:hover { background: var(--over-bg); } }
.icon-btn { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); border-radius: var(--r-sm); }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { color: var(--ink); } }

main { padding-block: 26px 70px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); max-width: 1500px; margin: 0 auto; }

/* ---------- empty ---------- */
.empty { max-width: 640px; margin: 10vh auto 0; text-align: left; }
.empty h1 { font: 600 40px/1.1 var(--f-display); letter-spacing: -.025em; text-wrap: balance; margin: 0 0 14px; }
.empty p { color: var(--muted); font-size: 16px; margin: 0 0 24px; }

/* ---------- headings ---------- */
.product-head, .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.title-block { min-width: 0; }
.title-block h1, .page-head h1 { font: 600 28px/1.15 var(--f-display); letter-spacing: -.022em; margin: 0 0 6px; text-wrap: balance; }
.title-block a { font-size: 12.5px; color: var(--muted); word-break: break-all; }
.sub { color: var(--muted); margin: 0; max-width: 78ch; }
.sub b, .foot-note b { color: var(--ink-2); font-weight: 600; }
.sub.small, .small { font-size: 12px; }
.muted { color: var(--muted); }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section-title { font: 500 11px/1 var(--f-body); color: var(--muted); margin: 30px 0 10px; }

/* stats: mono numbers over quiet labels */
.stats, .stats-row { display: flex; gap: 26px; flex-wrap: wrap; }
.stats-row { align-items: flex-end; margin: 12px 0 18px; }
.stat { display: flex; flex-direction: column; }
.stat b { font: 500 20px/1.1 var(--f-mono); letter-spacing: -.02em; color: var(--ink); }
.stat span { margin-top: 4px; }

/* ---------- break bar / fields ---------- */
.break-bar {
  display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 14px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field input { width: 120px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); font-family: var(--f-mono); font-size: 13px; }
.field input:focus, .cell-input:focus, .set-row input:focus, select:focus, textarea:focus, input[type=search]:focus, .note-input:focus { border-color: var(--accent-line); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.break-readout { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.break-readout b { color: var(--ink); font: 500 17px/1.1 var(--f-mono); letter-spacing: -.01em; text-transform: none; display: block; margin-bottom: 3px; }

.warn-box { background: var(--pricey-bg); color: var(--pricey); border: 1px solid rgba(245, 194, 107, .25); border-radius: var(--r-md); padding: 10px 13px; font-size: 13.5px; margin-bottom: 12px; }

/* ---------- tabs + toolbar ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tab {
  border: 0; background: none; cursor: pointer; padding: 9px 14px; margin-bottom: -1px; white-space: nowrap;
  font: 500 14px/1 var(--f-body); color: var(--muted); border-bottom: 2px solid transparent;
}
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--ink-2); } }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input[type=search] { flex: 1 1 240px; max-width: 360px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip { border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .filter-chip:hover { border-color: var(--faint); } }
.filter-chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.filters select { padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--input-bg); font-size: 12.5px; }
.toolbar-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.toggle { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; cursor: pointer; }

/* ---------- table ---------- */
.table-wrap { overflow: auto; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
.grid th, .grid td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  font: 500 10.5px/1.2 var(--f-body); color: var(--muted);
  cursor: pointer; user-select: none;
}
.grid th.sorted { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .grid th:hover { color: var(--ink); } }
.grid th.sorted::after { content: " ↓"; color: var(--accent); }
.grid th.sorted.asc::after { content: " ↑"; }
.grid th.num, .grid td.num { text-align: right; }
.grid td.num { font: 400 12.5px/1.4 var(--f-mono); color: var(--ink-2); }
.grid td.name { font-weight: 500; color: var(--ink); }
.grid th.sticky-col, .grid td.sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.grid th.sticky-col { z-index: 3; background: var(--surface-2); }
.grid tbody tr { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .grid tbody tr:hover td { background: var(--surface-3); } }
@media (hover: hover) and (pointer: fine) { .grid tbody tr.static:hover td, .grid tr.static:hover td { background: inherit; } }
@media (hover: hover) and (pointer: fine) { .grid tbody tr.static:hover td.sticky-col { background: var(--surface); } }
.grid td.muted { color: var(--muted); }
.grid td.zero { color: var(--faint); }
.grid input.cell-input {
  width: 78px; padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: 6px; text-align: right;
  background: var(--input-bg); color: var(--ink); font: 12.5px var(--f-mono);
}
.grid input.cell-input.star { width: 48px; }
.more-row td { text-align: center; color: var(--muted); }

.heat { position: relative; }
.score-bar { display: inline-flex; align-items: center; gap: 9px; justify-content: flex-end; width: 100%; }
.score-bar i { display: block; flex: none; height: 4px; border-radius: 2px; background: var(--accent); min-width: 2px; opacity: .85; }
.score-bar b { font: 500 12.5px var(--f-mono); color: var(--ink); min-width: 44px; text-align: right; }

/* ---------- chips ---------- */
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; line-height: 1.45; background: var(--surface-3); color: var(--ink-2); vertical-align: 1px; }
.chip.good { background: var(--steal-bg); color: var(--steal); }
.chip.warn { background: var(--pricey-bg); color: var(--pricey); }
.chip.bad { background: var(--over-bg); color: var(--over); }
.chip.rc { background: transparent; border: 1px solid var(--accent-line); color: var(--accent); padding: 0 6px; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.chip.tag { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); }
.chip.verdict { font-weight: 600; }
.chip.v-steal { background: var(--steal-bg); color: var(--steal); }
.chip.v-fair { background: var(--fair-bg); color: var(--fair); }
.chip.v-pricey { background: var(--pricey-bg); color: var(--pricey); }
.chip.v-over { background: var(--over-bg); color: var(--over); }
.chip.v-none { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); }
.tier { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font: 600 11px/1 var(--f-mono); }
.tier.A { background: var(--steal-bg); color: var(--steal); } .tier.B { background: var(--accent-soft); color: var(--accent); }
.tier.C { background: var(--pricey-bg); color: var(--pricey); } .tier.D { background: var(--surface-3); color: var(--muted); }

.foot-note { color: var(--muted); font-size: 12.5px; max-width: 900px; margin-top: 14px; }

/* ---------- player photos ---------- */
.av { position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); vertical-align: middle; }
/* Current NHL headshots: small head on white, upper middle of a square, so zoom in on the face.
   Legends' portraits ("latest" photos) are already tight on the face: only a light zoom. */
.av img { position: absolute; left: -40%; top: -27%; width: 180%; height: 180%; max-width: none; object-fit: cover; }
.av:has(img) .av-ini { visibility: hidden; }
.av:has(img:not(.legacy)) { background: radial-gradient(circle at 50% 35%, #34495F 0%, #1E3043 60%, #152738 100%); }
.av img.legacy { left: -9%; top: -6%; width: 118%; height: 118%; background: var(--surface-3); }
.av-ini { font: 600 10px/1 var(--f-body); color: var(--muted); letter-spacing: .02em; }
.av-sm { width: 30px; height: 30px; }
.av-md { width: 48px; height: 48px; } .av-md .av-ini { font-size: 13px; }
.av-lg { width: 96px; height: 96px; box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 4px var(--surface), 0 0 0 5px var(--accent-line); }
.av-lg .av-ini { font-size: 26px; font-weight: 500; }
.who { display: inline-flex; align-items: center; gap: 9px; }
.who-name { white-space: nowrap; }
.grid td.name .who { margin-block: -6px; }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 30; backdrop-filter: blur(2px); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; width: min(880px, 100%);
  background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow); overflow-y: auto;
  animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }
.drawer-inner { padding: 26px max(24px, env(safe-area-inset-right)) 44px 26px; position: relative; }
.drawer .close { position: absolute; top: 14px; right: 16px; z-index: 2; }
.d-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.d-head-text { min-width: 0; }
.drawer h2 { font: 600 28px/1.15 var(--f-display); letter-spacing: -.022em; margin: 4px 40px 10px 0; }
.d-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.d-faces { display: flex; margin-top: 12px; }
.d-faces > span { margin-right: -8px; }
.d-faces .av { box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1px var(--line-strong); }
.d-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 20px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.d-stat { background: var(--surface); padding: 12px 14px; }
.d-stat b { display: block; font: 500 20px/1.2 var(--f-mono); letter-spacing: -.02em; }
.d-section { margin: 22px 0 10px; font: 500 11px/1 var(--f-body); color: var(--muted); }
.d-mix { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--surface-3); margin: 6px 0 8px; gap: 2px; }
.d-mix i { display: block; height: 100%; }
.d-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.d-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--c); vertical-align: 0; }
.drawer .table-wrap { max-height: none; }
.d-price { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; }
.d-price .verdict-line { font-size: 13.5px; color: var(--muted); }
.d-price .verdict-line b { color: var(--ink); font-family: var(--f-mono); font-weight: 500; }

/* ---------- dialogs ---------- */
.dlg { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; width: min(640px, calc(100% - 32px)); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.dlg.wide { width: min(860px, calc(100% - 32px)); }
.dlg::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
.dlg-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.dlg h2 { font: 600 22px/1.2 var(--f-display); letter-spacing: -.02em; margin: 0; }
.dlg label { font-size: 13px; font-weight: 500; }
.dlg .row { display: flex; gap: 8px; margin-top: 6px; }
.dlg input[type=url], .dlg textarea, .dlg input:not([type]) { flex: 1; width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); min-width: 0; }
.hint { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.alt-import summary { cursor: pointer; font-weight: 500; font-size: 13.5px; }
.alt-import textarea { margin-top: 8px; font: 12px var(--f-mono); }
.file-btn { display: inline-block; margin-top: 8px; font-weight: 500 !important; color: var(--accent); cursor: pointer; }
.file-btn input { display: block; margin-top: 4px; font-size: 13px; }
.import-preview { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; font-size: 13.5px; }
.import-preview .err { color: var(--over); }
.import-preview input { width: 100%; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); margin-top: 4px; }
.colmap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.dlg-actions .danger { margin-right: auto; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.settings-grid fieldset, .team-rules { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.settings-grid legend, .team-rules legend { font: 500 10.5px var(--f-body); color: var(--muted); padding: 0 6px; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 400 !important; color: var(--ink-2); }
.set-row input { width: 74px; padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--input-bg); text-align: right; }
/* Sign in (website copy, account.js) */
.account-btn.signed-in { max-width: 160px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.account-btn.signed-in::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; }
.acct-form label { margin-bottom: -8px; }
.acct-form input { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font-size: 16px; }
.acct-tabs { align-self: flex-start; }
.share-url { width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: 13px var(--f-mono); }
.share-btns { display: flex; gap: 8px; margin-top: 12px; }
.acct-err { margin: 0; color: var(--over); font-size: 13.5px; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 50; background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-strong); padding: 10px 16px; border-radius: var(--r-md); box-shadow: var(--shadow); font-size: 13.5px; max-width: calc(100% - 32px); }

@media (max-width: 700px) {
  .title-block h1, .page-head h1 { font-size: 23px; }
  .break-readout { margin-left: 0; }
  .field input { width: 100px; }
  .toolbar-right { margin-left: 0; }
}

/* ================= pages ================= */
.nav { display: flex; gap: 2px; flex: 1 1 auto; flex-wrap: wrap; }
.nav a {
  color: var(--muted); text-decoration: none; padding: 6px 11px; border-radius: var(--r-sm);
  font: 500 13.5px/1 var(--f-body); transition: color .12s, background-color .12s;
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--ink); background: var(--surface-3); } }
.nav a.active { color: var(--ink); background: var(--surface-3); box-shadow: inset 0 -2px 0 var(--accent); }
.offline-note { background: var(--pricey-bg); color: var(--pricey); font-size: 13px; padding: 7px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
.loading { padding: 40px 0; }

.card-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.card-box h3 { margin: 0 0 6px; font: 500 11px/1 var(--f-body); color: var(--muted); }

/* checklist picker */
.picker { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.picker-label { margin-right: 4px; }
.pick, .pick-all { border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); border-radius: var(--r-sm); padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pick:hover { border-color: var(--faint); color: var(--ink); } }
.pick.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.pick-all { color: var(--muted); border-style: dashed; }

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--input-bg); padding: 2px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--muted); border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .seg button:hover { color: var(--ink); } }
.seg button.on { background: var(--surface-3); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }

/* library */
.lib-list { display: flex; flex-direction: column; gap: 12px; }
.lib-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.lib-main { min-width: 0; }
.lib-card h2 { font: 600 19px/1.25 var(--f-display); letter-spacing: -.015em; margin: 0 0 6px; }
.lib-meta { color: var(--muted); font-size: 12.5px; }
.lib-actions { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.lib-actions a.btn { text-decoration: none; }
.lib-product { display: grid; grid-template-columns: repeat(4, auto); gap: 10px 12px; align-content: start; }
.lib-product .field input { width: 108px; }
.lib-est { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); max-width: 470px; }
.rename-input { font: inherit; width: 100%; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); }
@media (max-width: 900px) { .lib-card { grid-template-columns: 1fr; } .lib-product { grid-template-columns: repeat(2, minmax(0, auto)); } }

/* compare */
table.cmp .row-label { text-align: left; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); cursor: default; position: sticky; left: 0; background: var(--surface); }
table.cmp thead th { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
table.cmp td.best { background: rgba(95, 224, 168, .06); color: var(--steal); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .grid tbody tr.static:hover td.best { background: rgba(95, 224, 168, .06); } }
.per-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.per-cell span { font-size: 11.5px; color: var(--muted); }

/* break builder */
.break-picker { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.break-picker select { padding: 6px 40px 6px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); max-width: 260px; -webkit-appearance: none; appearance: none;
  /* our own arrow, in from the edge and the same grey as the other icons (the browser's sat tight against the border) */
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238691A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px; }
.bk-setup { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.bk-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.bk-row .grow { flex: 1 1 220px; }
.bk-row .grow input { width: 100%; font-family: var(--f-body); }
.bk-products { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.bk-products th { text-align: left; padding: 4px 8px 6px 0; }
.bk-products td { padding: 4px 8px 4px 0; }
.bk-products select { padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--input-bg); max-width: 320px; width: 100%; }
.bk-products input { width: 100px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); }
.bk-products td.num, .bk-products th.num { text-align: right; font-family: var(--f-mono); font-size: 12.5px; }
.icon-btn.small { font-size: 20px; }
.bk-setup > .btn { align-self: flex-start; }
.best-list { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.best-list button { border: 0; cursor: pointer; }
table.mini { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
table.mini th { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); }
table.mini td { padding: 6px 6px; border-bottom: 1px solid var(--line); }
table.mini .num { text-align: right; font-family: var(--f-mono); font-size: 12.5px; }
.d-price { flex-direction: column; align-items: stretch; margin-bottom: 8px; }
.d-price .field input { width: 140px; }

/* player values: value chips by score band */
.tier-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-bottom: 16px; }
.tier-legend > div { display: flex; gap: 6px; align-items: center; }
.tier-legend p { flex-basis: 100%; margin: 4px 0 0; }
.chip.ptier { font: 600 11.5px/1.45 var(--f-mono); min-width: 30px; text-align: center; }
.chip.ptier.Icon { background: var(--violet-bg); color: var(--violet); }
.chip.ptier.Superstar { background: var(--accent-soft); color: var(--accent); }
.chip.ptier.Star { background: var(--fair-bg); color: var(--fair); }
.chip.ptier.Solid { background: var(--steal-bg); color: var(--steal); }
.chip.ptier.Depth { background: var(--surface-3); color: var(--muted); }
.chip.ptier.manual { box-shadow: inset 0 0 0 1px currentColor; }
.chip.gen { background: rgba(245, 194, 107, .14); color: #F7D08A; font-weight: 600; }
td.pv-off .chip { opacity: .4; }
.mode-field .seg button { white-space: nowrap; }
.tier-select { padding: 4px 6px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--input-bg); font-size: 12.5px; font-weight: 500; }
.note-input { width: 220px; padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--input-bg); font-size: 12.5px; }
.hype { cursor: pointer; font-size: 13px; }
.grid tr.static, .grid tbody tr.static { cursor: default; }

/* profiles */
.d-product { margin-top: 26px; }
.d-product-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.d-product-head h3 { margin: 0; font: 600 16px/1.25 var(--f-display); letter-spacing: -.01em; }
.d-product-stats { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.d-product-stats b { color: var(--ink); font: 500 12.5px var(--f-mono); }
.d-cards { margin-top: 12px; }
.d-cards summary { cursor: pointer; font-weight: 500; font-size: 13.5px; margin-bottom: 8px; color: var(--ink-2); }
.dlg .model-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.model-opt { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: var(--r-md); padding: 11px 13px; cursor: pointer; font-weight: 400 !important; position: relative; }
.model-opt.on { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); background: var(--accent-soft); }
.model-opt input { position: absolute; opacity: 0; }
.model-opt b { font: 600 14px var(--f-display); }
.model-opt span { font-size: 12.5px; color: var(--muted); }
.settings-grid .hint { margin: 0 0 4px; font-size: 12px; }
@media (max-width: 640px) { .dlg .model-pick { grid-template-columns: 1fr; } .nav a { font-size: 13px; padding: 5px 8px; } }
@media (max-width: 520px) { .d-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.team-rules { margin: 0 0 14px; gap: 6px; }
.check-row { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 400 !important; cursor: pointer; color: var(--ink-2); flex-wrap: wrap; }
.check-row input { margin-top: 2px; }

.formula-text { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.formula-text .team-rules { margin: 0; }
.formula-text input:not([type=checkbox]):not([data-setting]), .formula-text textarea { flex: none; width: 100%; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); font: 12.5px var(--f-mono); }
.formula-text label { font-size: 12px; font-weight: 400; }
@media (max-width: 700px) { .formula-text { grid-template-columns: 1fr; } }

.team-select { padding: 4px 6px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--input-bg); font-size: 12.5px; max-width: 170px; color: var(--muted); }
.team-select.set { color: var(--ink); font-weight: 500; border-color: var(--accent-line); }
.chip.key { background: var(--violet-bg); color: var(--violet); }

.how-ranked { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 16px; margin-bottom: 12px; font-size: 13.5px; }
.how-ranked summary { cursor: pointer; font-weight: 500; }
.how-steps { margin: 10px 0 6px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; max-width: 90ch; color: var(--ink-2); }
.how-products { margin: 4px 0 6px; padding-left: 20px; font-size: 13px; }
.optional-note { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }

/* product letters: tinted, each product its own colour */
.pl { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px; font: 600 11px/1 var(--f-mono); margin-right: 3px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.pl-0 { --c: var(--pl-0); } .pl-1 { --c: var(--pl-1); } .pl-2 { --c: var(--pl-2); } .pl-3 { --c: var(--pl-3); }
.pl-4 { --c: var(--pl-4); } .pl-5 { --c: var(--pl-5); } .pl-6 { --c: var(--pl-6); } .pl-7 { --c: var(--pl-7); }
.hit-values td, .hit-values th { white-space: nowrap; }
.pl-cell { display: flex; align-items: center; gap: 6px; }
.how-products { list-style: none; padding-left: 0; }
.how-products li { margin: 4px 0; }
.hit-table-box { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 14px; }
.hit-table-box summary { cursor: pointer; font-weight: 500; font-size: 13.5px; }

.lib-product .field.wide { grid-column: span 2; }
.lib-product .field.wide input { width: 100%; font-family: var(--f-body); }
.lib-box { grid-column: 1 / -1; font-size: 12px; color: var(--muted); max-width: 640px; line-height: 1.6; }
.lib-box b { color: var(--ink-2); font-weight: 500; }
.check-ok { color: var(--steal); }
.check-off { color: var(--pricey); }

.formula-lead { margin: 0 0 12px; font-size: 13.5px; max-width: 80ch; color: var(--ink-2); }
.formula-lead b { color: var(--ink); }
.hit-table-box.open { padding: 12px 14px; }
.hit-table-head { font-weight: 500; font-size: 13.5px; margin-bottom: 8px; }
.advanced { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.advanced > summary { cursor: pointer; font: 500 11px var(--f-body); color: var(--muted); margin-bottom: 12px; }
.adv-title { font: 600 14px var(--f-display); margin: 18px 0 4px; }
.check-row input[type=number] { padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--input-bg); font: 12.5px var(--f-mono); }
.toolbar select, .ex-pick { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: 13.5px var(--f-body); max-width: 100%; }
.ex-pick { font-weight: 500; min-width: 260px; }
.ex-top { align-items: flex-end; gap: 22px; }
.ex-stats { margin: 0; }
.ex-count { font-size: 12.5px; }

/* scrollbars, quiet */
* { scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-md); border: 2px solid var(--surface); }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 560px) {
  main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); padding-top: 18px; }
  .topbar { gap: 8px 12px; padding-inline: 14px; }
  .nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; margin-inline: -6px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .top-actions { margin-left: auto; }
  .ex-pick { min-width: 0; width: 100%; }
  .d-head { gap: 14px; }
  .av-lg { width: 64px; height: 64px; }
  .drawer-inner { padding: 20px 16px 40px; }
  .drawer h2 { font-size: 23px; }
}

/* ---------- dropdown menu (checklist picker) ---------- */
.menu { position: relative; }
.menu-btn { list-style: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); font-size: 13.5px; max-width: min(460px, 100%); user-select: none; }
.menu-btn::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { border-color: var(--faint); } }
.menu[open] .menu-btn { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.menu-label { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.menu-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.menu-caret { width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); flex: none; margin-left: 2px; }
.menu[open] .menu-caret { transform: translateY(1px) rotate(225deg); }
.menu-pop { position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; min-width: 300px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 6px; }
.menu-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; }
@media (hover: hover) and (pointer: fine) { .menu-item:hover { background: var(--surface-3); } }
.menu-foot { display: flex; gap: 6px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }

/* ---------- compare ---------- */
.cmp-toolbar { gap: 12px; }
.cmp-wrap { max-height: none; }
table.cmp { width: auto; min-width: 100%; }
table.cmp thead th.cmp-head { position: sticky; top: 0; cursor: default; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); vertical-align: top; padding: 16px 14px 14px; min-width: 170px; text-align: center; }
.cmp-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cmp-card .av-md { width: 64px; height: 64px; margin-bottom: 4px; }
.cmp-card .team-badge .av-ini { font-size: 18px; color: var(--accent); }
.cmp-name { border: 0; background: none; padding: 0; cursor: pointer; font: 600 14px/1.25 var(--f-body); color: var(--ink); text-align: center; white-space: normal; }
@media (hover: hover) and (pointer: fine) { .cmp-name:hover { color: var(--accent); } }
.cmp-meta { font-size: 12px; color: var(--muted); white-space: normal; }
.cmp-x { position: absolute; top: -8px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--faint); font-size: 17px; line-height: 1; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .cmp-x:hover { background: var(--surface-3); color: var(--ink); } }
.cmp-add-head { min-width: 190px; }
.cmp-add { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: text; }
.cmp-plus { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 26px; font-weight: 300; margin-bottom: 4px; }
@media (hover: hover) and (pointer: fine) { .cmp-add:hover .cmp-plus { border-color: var(--accent-line); color: var(--accent); } }
.cmp-add input { width: 160px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); font-size: 12.5px; text-align: center; }
.cmp-add input:focus { border-color: var(--accent-line); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
table.cmp th.cmp-corner { min-width: 150px; }
table.cmp td.num { text-align: center; }
.cmp-bar { display: block; height: 4px; width: 90px; margin: 2px auto 6px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.cmp-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
table.cmp tr.cmp-sub th, table.cmp tr.cmp-sub td { background: var(--surface-2); font-size: 10.5px; color: var(--muted); padding-block: 7px; }
table.cmp .per-cell { align-items: center; }
.per-cell .per-rank { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.cmp-add-col { background: transparent; }
@media (max-width: 560px) {
  table.cmp thead th.cmp-head { min-width: 130px; padding-inline: 8px; }
  table.cmp th.cmp-corner, table.cmp .row-label { min-width: 0; max-width: 110px; white-space: normal; }
  .cmp-add input { width: 120px; }
}

/* ---------- home ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 32px; align-items: center; padding: 34px 36px; margin-bottom: 18px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(127, 212, 255, .10) 0%, transparent 55%), var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 500; color: var(--accent); }
.hero h1 { font: 600 40px/1.08 var(--f-display); letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance; max-width: 18ch; }
.hero-sub { margin: 0 0 24px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 62ch; }
.v-txt { font-weight: 600; } .v-txt.steal { color: var(--steal); } .v-txt.fair { color: var(--fair); } .v-txt.pricey { color: var(--pricey); } .v-txt.over { color: var(--over); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-actions .btn { text-decoration: none; }
.hero-facts { margin: 16px 0 0; color: var(--muted); font-size: 13.5px; }
.hero-facts b { font: 500 13.5px var(--f-mono); color: var(--ink-2); }
.hero-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.hero-links .guide-link { margin: 0; }
.hero-links .guide-link + .guide-link { color: var(--ink-2); }
/* an example break being checked, where the logo art used to be */
.hero-demo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.hd-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.hd-head b { font-weight: 600; font-size: 14px; }
.hd-head span { color: var(--muted); font-size: 12.5px; }
.hd-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px 62px 96px; gap: 8px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13.5px; }
.hd-row.hd-cols { border-top: 0; padding-block: 8px 6px; color: var(--muted); font-size: 12px; }
.hd-row .num { text-align: right; font-family: var(--f-mono); }
.hd-row .chip { justify-self: end; }
.hd-team { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 30px; }
.kpi { background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.kpi b { font: 500 24px/1.1 var(--f-mono); letter-spacing: -.02em; }
.kpi span { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.home-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.home-head h2 { font: 600 17px/1.2 var(--f-display); letter-spacing: -.015em; margin: 0; }
.home-link { font-size: 13px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .home-link:hover { text-decoration: underline; } }
.chase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 30px; }
.chase-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; text-align: center; transition: border-color .12s, transform .12s; }
@media (hover: hover) and (pointer: fine) { .chase-card:hover { border-color: var(--accent-line); transform: translateY(-1px); } }
.chase-card .av-md { width: 64px; height: 64px; margin-bottom: 4px; }
.chase-rank { position: absolute; top: 9px; left: 11px; font: 500 11px var(--f-mono); color: var(--faint); }
.chase-name { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.chase-meta { font-size: 12px; color: var(--muted); min-height: 1em; }
.home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 30px; }
.home-box { padding: 18px 18px 8px; }
.home-list { list-style: none; margin: 0; padding: 0; }
.home-list li { border-top: 1px solid var(--line); }
.home-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .home-list a:hover .hl-name { color: var(--accent); } }
.hl-name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-meta { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); }
.hl-meta .pl { margin-right: 2px; }
/* Home products: one row per product line, its seasons as chips that open that checklist */
.prod-lines li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px; }
.prod-lines .hl-name { font-size: 13.5px; }
.prod-seasons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.home-list a.season-chip { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font: 500 11.5px/1.4 var(--f-mono); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .home-list a.season-chip:hover { background: var(--accent-soft); color: var(--accent); } }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.step { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.step b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 12px var(--f-mono); }
.step h3 { font: 600 14.5px var(--f-display); margin: 12px 0 6px; }
.step p { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero-demo { width: 100%; max-width: 520px; } .home-cols, .steps { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .hero { padding: 24px 20px; } .hero h1 { font-size: 30px; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-cols > * { min-width: 0; }
@media (max-width: 560px) {
  .home-list a { flex-wrap: wrap; row-gap: 4px; }
  .hl-name { white-space: normal; }
  .chase-card:nth-child(n+7) { display: none; }
}
.cmp-toolbar > #cmpPicker { min-width: 0; max-width: 100%; }
@media (max-width: 560px) {
  .bk-products { display: block; overflow-x: auto; max-width: 100%; }
  .bk-products select { min-width: 170px; }
  .bk-products input { width: 76px; }
}
@media (max-width: 700px) { .toolbar-right { flex-wrap: wrap; } }

/* ---------- Premium tag: a gold "P" (marks paid features; label only for now) ---------- */
:root { --vip: #F2C46D; --vip-2: #E0A84B; }
.vip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; margin-left: 8px; border-radius: 50%; vertical-align: middle;
  font: 800 11px/1 var(--f-body); letter-spacing: 0; color: #1A1304; cursor: help;
  background: linear-gradient(135deg, var(--vip) 0%, var(--vip-2) 100%); box-shadow: 0 0 0 1px rgba(242, 196, 109, .35), 0 2px 10px rgba(242, 196, 109, .18); }
.vip.sm { width: 15px; height: 15px; padding: 0; margin-left: 6px; font-size: 9px; border-radius: 50%; box-shadow: none; vertical-align: 1px; }
.nav a .vip.sm, .seg .vip.sm, .btn .vip.sm { opacity: .92; }
.seg button:not(.on) .vip.sm { filter: saturate(.7); opacity: .7; }
h1 .vip, h2 .vip { position: relative; top: -2px; }

/* ---------- searchable checklist picker ---------- */
.pick-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 340px; min-width: 200px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); cursor: pointer; text-align: left; font-size: 13.5px; }
.pick-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-btn::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .pick-btn:hover { border-color: var(--faint); } }
.pick-btn[aria-expanded="true"], .pick-btn:focus-visible { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.picker-pop { position: absolute; z-index: 40; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 6px; }
.picker-search { display: block; width: 100%; padding: 8px 10px; margin-bottom: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font-size: 13.5px; }
.picker-search:focus { border-color: var(--accent-line); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.picker-list { list-style: none; margin: 0; padding: 0; max-height: min(340px, 50vh); overflow-y: auto; }
.picker-list li[data-id] { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; }
.picker-list li.active { background: var(--surface-3); }
.picker-list li.current .pk-name { color: var(--accent); }
.picker-list li.taken { opacity: .45; cursor: not-allowed; }
.pk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-meta { flex: none; font-size: 11.5px; color: var(--muted); font-family: var(--f-mono); }
.pk-empty { padding: 10px; margin: 0; font-size: 13px; color: var(--muted); list-style: none; }
.menu-items { max-height: min(340px, 50vh); overflow-y: auto; }
.menu-item[hidden] { display: none; }

/* Read-only website copy (export_site.py) */
.offline-note.site-note { background: var(--accent-soft); color: var(--ink-2); }
.lib-product input:disabled, .cell-input:disabled, .team-select:disabled, #formulaBody input:disabled, #formulaBody textarea:disabled { opacity: 1; color: var(--ink-2); cursor: default; background: transparent; }
.hype input:disabled { cursor: default; }

/* ---------------- Library (admin): seasons, one even row per product ---------------- */
.admin-chip { font: 600 10.5px/1 var(--f-body); vertical-align: middle; color: var(--muted); border: 1px solid var(--line); background: var(--surface-2); padding: 4px 7px; border-radius: 999px; margin-left: 6px; }
.lib-season { margin-bottom: 22px; }
.lib-season-head { font: 600 15px/1.2 var(--f-display); margin: 0 0 8px; display: flex; gap: 10px; align-items: baseline; }
.lib-season-head .muted { font: 400 12px var(--f-body); }
.lib-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.lib-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) 92px 64px 52px 92px 90px minmax(120px, 1.6fr) 104px 22px; gap: 12px; align-items: center; padding: 11px 16px; font-size: 13px; }
.lib-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.lib-head { background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 500; padding-top: 9px; padding-bottom: 9px; }
details.lib-card { display: block; padding: 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
details.lib-card > summary { list-style: none; cursor: pointer; }
details.lib-card > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { details.lib-card > summary:hover { background: var(--surface-2); } }
.lib-name { font-weight: 600; color: var(--ink); }
.lib-chase { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.lib-open { color: var(--muted); transition: transform .15s; text-align: center; font-size: 15px; }
details.lib-card[open] .lib-open { transform: rotate(90deg); }
.lib-check { display: inline-block; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.lib-check.ok { color: var(--steal); background: var(--steal-bg); }
.lib-check.warn { color: var(--pricey); background: var(--pricey-bg); }
.lib-check.muted { color: var(--muted); background: var(--surface-2); }
.lib-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 28px; padding: 6px 16px 18px; background: var(--surface-2); border-top: 1px dashed var(--line); }
.lib-panel .lib-product { padding-top: 12px; }
.lib-notes { padding-top: 12px; min-width: 0; }
.lib-notes .lib-box, .lib-notes .lib-est { max-width: none; margin: 10px 0 0; }
@media (max-width: 900px) {
  .lib-head { display: none; }
  .lib-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; }
  .lib-row > span:nth-child(n+2):nth-child(-n+7) { display: none; }
  .lib-panel { grid-template-columns: 1fr; }
}

/* "How it works" link in page intros, and the help panel it opens */
.help-link { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 2px 9px 2px 3px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--accent); font: 500 12.5px var(--f-body); cursor: pointer; vertical-align: 1px; white-space: nowrap; }
.help-link span { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--accent-soft); font-size: 11px; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .help-link:hover { border-color: var(--accent-line); background: var(--accent-soft); } }
.help-body { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.help-body h3 { font: 600 14px var(--f-display); color: var(--ink); margin: 20px 0 6px; }
.help-body p { margin: 0 0 10px; }
.help-list { margin: 0; padding-left: 18px; }
.help-list li { margin-bottom: 6px; }

/* Big market-data numbers (Home, Player values, help panel) */
.data-stats { display: grid; grid-template-columns: repeat(var(--ds-cols, 2), minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px; }
.data-stats.home { --ds-cols: 4; margin-bottom: 34px; }
.data-stats .ds { background: var(--surface); padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 6px; }
.data-stats .ds b { font: 600 34px/1 var(--f-mono); letter-spacing: -.03em; color: var(--ink); }
.data-stats.home .ds b { font-size: 38px; }
.data-stats .ds:first-child b { color: var(--accent); }
.data-stats .ds span { font-size: 11px; font-weight: 500; color: var(--muted); }
.data-stats .ds-note { grid-column: 1 / -1; margin: 0; padding: 8px 20px; background: var(--surface-2); font-size: 11.5px; color: var(--muted); }
.data-stats.compact .ds { flex-direction: row; align-items: baseline; gap: 10px; padding: 12px 18px; }
.data-stats.compact .ds b { font-size: 24px; }
.data-stats.compact { --ds-cols: 2; margin-bottom: 12px; }
.pitch { margin-bottom: 34px; }
.pitch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pitch-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.pitch-num { font: 600 12px var(--f-mono); color: var(--accent); letter-spacing: .06em; }
.pitch-step h3 { font: 600 16px/1.25 var(--f-display); margin: 8px 0 6px; }
.pitch-step p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .data-stats.home { --ds-cols: 2; } .pitch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .data-stats .ds b, .data-stats.home .ds b { font-size: 28px; } .data-stats.compact { --ds-cols: 1; } .pitch-grid { grid-template-columns: 1fr; } }

/* Side panel: products fold open; phones get a tighter layout */
details.d-product > summary { list-style: none; cursor: pointer; padding: 12px 14px; margin: 0 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); position: relative; padding-right: 38px; }
details.d-product > summary::-webkit-details-marker { display: none; }
details.d-product > summary::after { content: "▸"; position: absolute; right: 14px; top: 13px; color: var(--muted); transition: transform .15s; }
details.d-product[open] > summary::after { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) { details.d-product > summary:hover { border-color: var(--line-strong); } }
.d-product { margin-top: 10px; }
.d-section .muted { text-transform: none; letter-spacing: 0; font-size: 12px; }
@media (max-width: 560px) {
  .m-hide { display: none; }
  .drawer { width: 100%; border-left: 0; }
  .d-head.with-photo { align-items: flex-start; }
  .d-head .av-lg { width: 56px; height: 56px; flex: none; }
  .drawer h2 { margin-right: 36px; }
  .d-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .d-stat { padding: 10px 8px; }
  .d-stat b { font-size: 16px; }
  .d-stat span { font-size: 10.5px; text-transform: none; letter-spacing: 0; line-height: 1.25; display: block; }
  .d-legend { gap: 6px 12px; font-size: 11.5px; }
  .d-product-stats { gap: 10px; font-size: 12px; }
  .drawer .grid td, .drawer .grid th { padding: 8px 9px; }
  .drawer .grid td.set-cell { white-space: normal; min-width: 0; line-height: 1.3; }
  .drawer .grid { min-width: 0; width: 100%; }
  .drawer .grid td, .drawer .grid th { font-size: 12.5px; }
  .drawer .grid .chip { font-size: 11px; padding: 2px 6px; }
  .d-price .field input { width: 100%; }
  .d-price table.mini { display: block; overflow-x: auto; }
}

/* Break builder on phones: settings two per row, each product as a small card */
@media (max-width: 560px) {
  .break-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .break-picker select { min-width: 0; width: 100%; max-width: none; grid-column: 1 / -1; }
  .bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .bk-row > .field { min-width: 0; }
  .bk-row .grow, .bk-row .mode-field, .bk-row > .field:has(#bkFormat) { grid-column: 1 / -1; }
  .bk-row > .field:has(#bkMarkup) { order: 1; }
  .bk-row .mode-field { order: 2; }
  .bk-row .seg { display: flex; width: 100%; }
  .bk-row .seg button { flex: 1; padding: 6px 4px; font-size: 12px; }
  .bk-row #bkMarkup { width: 100%; }
  .bk-products thead { display: none; }
  .bk-products, .bk-products tbody { display: block; }
  .bk-products tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 28px; gap: 8px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .bk-products td { padding: 0; min-width: 0; }
  .bk-products td.pl-cell { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
  .bk-products td.pl-cell .pick-btn { max-width: none; flex: 1; min-width: 0; }
  .bk-products td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
  .bk-products td input { width: 100%; }
  .bk-products td[data-cost] { grid-column: 1 / 4; text-align: left; font-family: var(--f-mono); }
  .bk-products td[data-cost]::before { display: inline; margin-right: 8px; }
  .bk-products td.rm-cell { grid-column: 4; grid-row: 2; align-self: end; }
}
@media (max-width: 560px) {
  .grid td.name .chip.gen { font-size: 0; padding: 2px 5px; }
  .grid td.name .chip.gen::first-letter { font-size: 11px; }
  .grid th.sticky-col, .grid td.sticky-col { max-width: 170px; }
  .grid td.name .who-name { white-space: normal; line-height: 1.25; }
  .team-select { max-width: 130px; font-size: 12px; }
  .toolbar { gap: 8px; }
  .toolbar-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  #main .table-wrap { max-height: none; }
  #main .grid th, #main .grid td { padding: 8px 7px; font-size: 12.5px; }
  #main .grid th { font-size: 10px; letter-spacing: .05em; }
  #main .grid td.num { font-size: 12px; }
  #main .grid .score-bar i { display: none; }
  #main .grid .who { gap: 7px; }
  #main .grid .who .av { width: 26px; height: 26px; font-size: 10px; }
  #main .grid td.sticky-col { max-width: 140px; }
  #main .grid .cell-input { width: 64px; }
}
@media (max-width: 560px) {
  #bkTable .grid .who .av { display: none; }
  #bkTable .grid td.sticky-col { max-width: 120px; }
  #bkTable .grid .chip { font-size: 10.5px; padding: 2px 6px; }
  #bkTable .grid .cell-input { width: 54px; }
}
@media (max-width: 560px) {
  #exTable .grid td.muted-set { white-space: normal; min-width: 0; line-height: 1.3; }
  #exTable .grid td.sticky-col { max-width: 130px; }
  #main table.cmp thead th.cmp-head { min-width: 104px; padding: 12px 8px 10px; }
  #main table.cmp td, #main table.cmp th { padding: 8px 8px; }
  .cmp-card .av-md { width: 44px; height: 44px; }
  .cmp-name { font-size: 12.5px; }
  #main table.cmp tbody th { position: sticky; left: 0; background: var(--surface); z-index: 1; white-space: normal; min-width: 84px; font-size: 11px; }
}
@media (max-width: 560px) {
  .tier-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 12px 14px; }
  .tier-legend > div { display: flex; align-items: center; gap: 5px; }
}

/* Phones: short names ("M. Celebrini"), small RC chip, Generational badge hidden in tables (it's a badge only) */
.fi { display: none; }
@media (max-width: 560px) {
  .grid .fn { display: none; }
  .grid .fi { display: inline; }
  .grid td.name .chip.gen { display: none; }
  .grid td.name .chip { font-size: 9.5px; padding: 1px 4px; vertical-align: 1px; }
  .grid td.name .who-name { white-space: nowrap; }
  .grid .who .av { width: 24px; height: 24px; }
  #main .grid td.sticky-col, #main .grid th.sticky-col, .drawer .grid td.name { max-width: none; }
  #main .grid td.name, .drawer .grid td.name { font-size: 12.5px; }
}
@media (max-width: 560px) {
  .grid td.name .who-name { white-space: normal; display: inline-block; max-width: 108px; line-height: 1.25; overflow-wrap: anywhere; }
  .drawer .grid td.name .who-name { max-width: 96px; }
}
@media (max-width: 560px) {
  .grid td.name .who-name { overflow-wrap: normal; word-break: normal; min-width: 84px; }
  .drawer .grid .who .av { display: none; }
  .drawer .grid td.name .who-name { max-width: 110px; }
}
@media (max-width: 560px) {
  .grid .chip.nodata { font-size: 0; padding: 2px 8px; }
  .grid .chip.nodata::after { content: "—"; font-size: 11px; }
}
/* Random team price: highlighted in the break summary */
.stats-row .stat.stat-key b { color: var(--accent); }
.stats-row .stat.stat-key { cursor: help; }

/* Team random: live board of the 32 teams with the next-slot value on top */
.rt { margin: 4px 0 22px; }
.rt-head { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; padding: 16px 18px; background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-lg); }
.rt-big { display: flex; flex-direction: column; min-width: 190px; }
.rt-eyebrow, .rt-facts span { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.rt-big b { font: 500 40px/1.1 var(--f-mono); letter-spacing: -.03em; color: var(--accent); margin: 2px 0; }
.rt-sub { font-size: 12.5px; color: var(--muted); }
.rt-facts { display: flex; gap: 14px 26px; flex-wrap: wrap; flex: 1; }
.rt-facts > div { display: flex; flex-direction: column; min-width: 0; }
.rt-facts b { font: 500 17px/1.2 var(--f-mono); color: var(--ink); white-space: nowrap; }
.rt-facts b small { font-size: 12px; color: var(--muted); }
.rt-facts span { margin-top: 3px; }
.rt-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 8px; }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rt-tile { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.rt-tile.top { border-color: var(--accent-line); }
.rt-hit { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: var(--r-md); font: inherit; min-height: 64px; }
@media (hover: hover) and (pointer: fine) { .rt-hit:hover { background: var(--surface-3); } }
.rt-hit .av { grid-row: 1 / 3; width: 40px; height: 40px; }
.rt-hit .av-ini { font-size: 11px; color: var(--accent); letter-spacing: .02em; }
.rt-name { font-weight: 500; font-size: 13.5px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.rt-meta { font: 400 11.5px/1.3 var(--f-mono); color: var(--muted); }
.rt-tile.taken { background: var(--surface-2); border-style: dashed; }
.rt-tile.taken .rt-name { text-decoration: line-through; color: var(--muted); }
.rt-tile.taken .rt-hit .av, .rt-tile.taken .rt-meta { opacity: .45; }
.rt-sold { margin: 0 10px 10px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: 12.5px var(--f-mono); min-width: 0; }
@media (max-width: 560px) {
  .rt-head { position: sticky; top: var(--rt-top, 0px); z-index: 10; gap: 8px; padding: 10px 12px; flex-direction: column; align-items: stretch; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
  .rt-big b { font-size: 32px; margin: 0; }
  .rt-sub { font-size: 11.5px; }
  .rt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
  .rt-facts b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
  .rt-facts span { font-size: 9.5px; letter-spacing: .06em; }
  .rt-facts > div:last-child { grid-column: 1 / -1; }
  .rt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .rt-hit { padding: 9px 8px; column-gap: 8px; min-height: 58px; }
  .rt-hit .av { width: 34px; height: 34px; }
  .rt-name { font-size: 13px; }
  .rt-meta { font-size: 11px; }
  .rt-sold { margin: 0 8px 8px; }
}

/* Team random: "Mine" toggle and trade-2-for-a-spin box */
.rt-taken-row { display: flex; gap: 6px; margin: 0 10px 10px; align-items: center; }
.rt-taken-row .rt-sold { margin: 0; flex: 1; width: 0; }
.rt-mine { border: 1px solid var(--line-strong); background: transparent; color: var(--muted); border-radius: 999px; padding: 4px 9px; font: 500 11.5px var(--f-body); cursor: pointer; white-space: nowrap; }
.rt-mine.on { color: var(--pricey); border-color: var(--pricey); background: var(--pricey-bg); }
.rt-tile.mine { border-color: var(--pricey); border-style: solid; }
.rt-tile.mine .rt-name { text-decoration: none; color: var(--ink); }
.rt-tile.mine .rt-hit .av, .rt-tile.mine .rt-meta { opacity: 1; }
.rt-trade { display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rt-trade.go { border-color: var(--steal); background: var(--steal-bg); }
.rt-trade.stop { border-color: var(--over); background: var(--over-bg); }
.rt-trade.hint { padding: 8px 14px; }
.rt-trade-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 220px; }
.rt-trade-main > b { font: 600 20px/1.2 var(--f-display); }
.rt-trade.go .rt-trade-main > b { color: var(--steal); }
.rt-trade.stop .rt-trade-main > b { color: var(--over); }
.rt-trade .rt-sub b { color: var(--ink); font-weight: 500; }
.rt-trade-opt { font-size: 12px; color: var(--ink-2); }
@media (max-width: 560px) { .rt-taken-row { margin: 0 8px 8px; } .rt-mine { padding: 4px 7px; } .rt-trade { padding: 10px 12px; } .rt-trade-main > b { font-size: 17px; } }
.rt-trade.ok { border-color: var(--pricey); background: var(--pricey-bg); }
.rt-trade.ok .rt-trade-main > b { color: var(--pricey); }
.rt-mine-line { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.rt-mine-line b { font-family: var(--f-mono); font-weight: 500; color: var(--ink); }

/* Serial number split (Pick your player spot panel) */
.serial-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.serial-head .seg button { font-size: 11.5px; padding: 4px 10px; text-transform: none; letter-spacing: 0; }
.ser-grid { display: grid; gap: 4px; margin: 8px 0; }
.ser-grid.n10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ser-grid.n100 { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.ser-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: var(--r-sm); border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) calc(var(--heat) * 28%), var(--surface)); }
.ser-cell.best { border-color: var(--accent); }
.ser-cell b { font: 600 18px/1.1 var(--f-mono); color: var(--ink); }
.ser-cell span { font: 400 11px var(--f-mono); color: var(--ink-2); }
.ser-cell em { font: 500 11.5px var(--f-mono); color: var(--accent); font-style: normal; }
.ser-grid.n100 .ser-cell { padding: 5px 1px; }
.ser-grid.n100 .ser-cell b { font-size: 11.5px; }
.ser-grid.n100 .ser-cell em { font-size: 9.5px; }
@media (max-width: 560px) {
  .ser-grid.n100 .ser-cell em { font-size: 8px; letter-spacing: -.02em; }
  .ser-grid.n100 .ser-cell b { font-size: 10.5px; }
}

/* Team random: serial-number teams (# toggle and 0–9 digit boxes) */
.rt-tile { position: relative; }
.rt-split { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 12px var(--f-mono); cursor: pointer; opacity: .55; }
.rt-split.on { opacity: 1; color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) { .rt-split:hover { opacity: 1; color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } }
.rt-tile.split { border-color: var(--accent-line); grid-column: span 2; }
.rt-hit.as-head { cursor: default; padding-bottom: 4px; }
@media (hover: hover) and (pointer: fine) { .rt-hit.as-head:hover { background: transparent; } }
.rt-digits { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; padding: 0 8px 8px; }
.rt-dg { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); cursor: pointer; font: inherit; min-width: 0; }
.rt-dg b { font: 600 13px var(--f-mono); }
.rt-dg em { font: 400 9.5px var(--f-mono); font-style: normal; color: var(--accent); white-space: nowrap; overflow: hidden; max-width: 100%; }
@media (hover: hover) and (pointer: fine) { .rt-dg:hover { border-color: var(--accent-line); } }
.rt-dg.gone { opacity: .35; border-style: dashed; }
.rt-dg.gone b { text-decoration: line-through; }
.rt-bar-actions { display: flex; gap: 6px; flex: none; }
@media (max-width: 560px) {
  .rt-tile.split { grid-column: 1 / -1; }
  .rt-bar { flex-wrap: wrap; }
  .rt-dg em { font-size: 8.5px; }
}

/* Team random: special-spin switch (Normal / See 2 / See 3 / Stash or pass) */
.rt-mode { margin-bottom: 8px; align-self: flex-start; }
.rt-mode button { font-size: 11.5px; padding: 4px 9px; }
.rt-special { font-size: 12.5px; color: var(--ink-2); max-width: 34ch; line-height: 1.4; margin-top: 2px; }
.rt-special b { color: var(--accent); font-weight: 600; }
@media (max-width: 560px) { .rt-mode { display: flex; width: 100%; } .rt-mode button { flex: 1; padding: 4px 2px; font-size: 11px; } }
.rt-big .rt-special b { font: 600 inherit; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: 0; margin: 0; color: var(--accent); }

/* Repacks in break setup and the Team random board */
.bk-add-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bk-repacks { margin-top: 10px; }
.bk-repacks input[type="text"] { width: 100%; min-width: 120px; font-family: var(--f-body); }
@media (max-width: 560px) {
  .bk-repacks tr { grid-template-columns: repeat(3, minmax(0, 1fr)) 28px; }
  .bk-repacks td[data-label="Repack"] { grid-column: 1 / 4; }
}

.bk-rp-note { margin: 6px 0 0; max-width: 70ch; }
.bk-repacks select { max-width: 220px; }
@media (max-width: 560px) { .bk-repacks td[data-label="Guaranteed"] { grid-column: 1 / 4; } .bk-repacks select { max-width: none; width: 100%; } }

/* Team logos inside the team bubble (NHL dark-background logos) */
.team-badge.has-logo { background: var(--surface-2); }
.team-badge .team-logo { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.team-badge.has-logo .av-ini { visibility: hidden; }
.team-badge.has-logo:not(:has(img)) .av-ini { visibility: visible; }

/* ================= phone shell (up to 700px): bottom tab bar, slim top bar, bottom sheets ================= */
.tabbar, .top-title, .sheet-grip { display: none; }
.more-list { display: grid; gap: 8px; margin-top: 6px; }
.more-item { display: grid; gap: 3px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; }
.more-item b { font-weight: 600; font-size: 15px; }
.more-item span { color: var(--muted); font-size: 13px; }
.more-item:active { background: var(--surface-3); }

@media (max-width: 700px) {
  :root { --tabbar-h: 58px; }
  /* Top bar: logo, page title, nothing else (pages are in the tab bar, Formula is under More) */
  .topbar { flex-wrap: nowrap; gap: 10px; padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); padding-top: max(8px, env(safe-area-inset-top)); }
  .topbar .nav, .topbar .top-actions { display: none; }
  .brand-name { font-size: 17px; }
  .top-title { display: block; margin-left: auto; font: 600 14px/1.2 var(--f-body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; opacity: 0; transition: opacity .15s; }
  body.scrolled .top-title { opacity: 1; }   /* only once the page's own heading has scrolled away */
  .top-title .vip { display: none; }

  /* Bottom tab bar */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: rgba(10, 22, 34, .94); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--line);
  }
  .tabbar a, .tabbar button {
    height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); text-decoration: none; font: 500 11px/1 var(--f-body); background: none; border: 0; padding: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar a.active, .tabbar button.active { color: var(--accent); }
  .tabbar a:active, .tabbar button:active { color: var(--ink); }
  main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px); }
  .toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }

  /* Side panel becomes a bottom sheet */
  .drawer {
    top: auto; left: 0; width: 100%; max-height: 90vh; max-height: 90dvh; border-left: 0; border-top: 1px solid var(--line-strong);
    border-radius: 18px 18px 0 0; animation: sheet-up .22s ease-out; overscroll-behavior: contain; z-index: 31;
  }
  .drawer.dragging { animation: none; transition: none; }
  .drawer.settle { transition: transform .18s ease-out; }
  .drawer-inner { padding: 6px max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .sheet-grip { display: block; position: sticky; top: 0; z-index: 3; height: 22px; margin: 0 -16px; background: var(--bg); cursor: grab; touch-action: none; }
  .sheet-grip::before { content: ""; position: absolute; left: 50%; top: 9px; width: 40px; height: 4px; margin-left: -20px; border-radius: 6px; background: var(--line-strong); }
  .drawer .close { top: 18px; right: 12px; }
  .drawer h2 { margin-top: 2px; }

  /* Phone basics: 16px fields so iPhones don't zoom in when you tap one; bigger tap targets */
  input, select, textarea { font-size: 16px; }
  .btn, .icon-btn, .filter-chip, .seg button { min-height: 40px; }
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: .5; } to { transform: none; opacity: 1; } }
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .drawer { animation: none; } }

/* ================= break page on phones: Setup steps / Live view (desktop ignores all of this) ================= */
.top-action, .bk-step-head, .bk-strip, .rt-hint, .rt-abbr, .rt-val { display: none; }
.bk-page .bk-sort, .bk-page .bk-fab, .bk-page .bk-golive, .bk-page .ph-row { display: none; }
.bk-step, .bk-step-body { display: contents; }
.sold-list { display: grid; gap: 6px; margin-top: 10px; }
.sold-row { display: grid; grid-template-columns: auto 1fr 110px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sold-row input { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font-family: var(--f-mono); }
.mine-star { color: var(--pricey); font-weight: 600; font-size: 12px; }
.ser-teams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.ser-team { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: 600 12px var(--f-body); cursor: pointer; }
.ser-team.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.ser-team:disabled { opacity: .35; cursor: default; }
.more-item.off { opacity: .5; }
.more-item.danger b { color: var(--over); }
@keyframes rt-pulse { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: none; } }

@media (max-width: 700px) {
  .top-action:not([hidden]) { display: inline-flex; align-items: center; flex: none; margin-left: 10px; padding: 0 14px; min-height: 34px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font: 600 13px/1 var(--f-body); cursor: pointer; }
  .top-action:not([hidden]) ~ .nav { display: none; }
  .top-title:empty + .top-action { margin-left: auto; }

  /* Setup: one card per step, each collapsing to a one-line summary */
  .bk-page .desk-row { display: none; }
  .bk-page .ph-row { display: flex; }
  .bk-setup.card-box { background: none; border: 0; padding: 0; gap: 10px; }
  .bk-step { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .bk-step[data-step="products"] { order: 1; } .bk-step[data-step="format"] { order: 2; } .bk-step[data-step="repacks"] { order: 3; } .bk-golive { order: 4; }
  .bk-step-body { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
  .bk-step:not(.open) .bk-step-body { display: none; }
  .bk-step-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t c" "n s c"; align-items: center; column-gap: 10px; row-gap: 2px; width: 100%; min-height: 54px; padding: 12px 14px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bk-step-head i { grid-area: n; font-style: normal; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--accent); font: 600 12px var(--f-mono); }
  .bk-step-head b { grid-area: t; font-weight: 600; font-size: 15px; white-space: nowrap; }
  .bk-step-head b small { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 4px; }
  .bk-step-head span { grid-area: s; min-width: 0; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bk-step-head span:empty { display: none; }
  .bk-step-head::after { grid-area: c; content: ""; flex: none; width: 7px; height: 7px; margin: -4px 4px 0 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
  .bk-step.open > .bk-step-head span { display: none; }   /* the summary is for collapsed steps */
  .bk-step.open > .bk-step-head::after { transform: rotate(-135deg); margin-top: 4px; }
  .bk-page .bk-golive { display: block; width: 100%; min-height: 50px; }
  .bk-golive:disabled { opacity: .4; }
  .bk-rp-note { font-size: 12px; }

  /* Which view shows what */
  .bk-page[data-view="live"] .page-head > div:first-child, .bk-page[data-view="live"] .break-picker .btn,
  .bk-page[data-view="live"] .bk-setup, .bk-page[data-view="live"] #bkWarn { display: none; }
  .bk-page[data-view="live"] .page-head { margin-bottom: 10px; }
  .bk-page[data-view="live"] .break-picker { display: block; }
  .bk-page[data-view="live"] .break-picker select { width: 100%; max-width: none; min-height: 42px; font-weight: 600; }
  .bk-page[data-view="setup"] #bkRandom, .bk-page[data-view="setup"] .toolbar, .bk-page[data-view="setup"] #bkTable,
  .bk-page[data-view="setup"] .bk-strip, .bk-page[data-view="setup"] .bk-sort, .bk-page[data-view="setup"] .bk-fab { display: none !important; }
  .bk-page #bkSummary { display: none; }
  .bk-page .toolbar-right { display: none; }
  .bk-page[data-view="live"] { padding-bottom: 60px; }

  /* Summary strip: three numbers, tap for the rest */
  .bk-strip { display: flex; align-items: center; width: 100%; margin: 0 0 12px; padding: 12px 4px 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .bk-strip span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .bk-strip b { font: 500 17px/1.15 var(--f-mono); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bk-strip small { margin-top: 3px; font-size: 10px; font-weight: 500; color: var(--muted); }
  .bk-strip i { font-style: normal; color: var(--muted); font-size: 24px; padding: 0 8px; }
  .bk-sheet-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .bk-sheet-stats .best-list { grid-column: 1 / -1; }

  /* Actions button, above the tab bar */
  .bk-page .bk-fab { display: inline-flex; align-items: center; position: fixed; z-index: 24; right: max(14px, env(safe-area-inset-right)); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); padding: 0 18px; min-height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-3); color: var(--ink); font: 600 14px/1 var(--f-body); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); cursor: pointer; }

  /* Team random board: 4 tiles a row, logo + short name + value; hold for Mine */
  .rt-head { position: sticky; top: var(--rt-top, 0px); z-index: 10; gap: 8px; padding: 10px 12px; flex-direction: column; align-items: stretch; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
  .rt-big b { font-size: 34px; margin: 0; }
  .rt-mode { display: flex; width: 100%; } .rt-mode button { flex: 1; padding: 7px 2px; font-size: 12px; }
  .rt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
  .rt-facts > div:nth-child(4), .rt-facts > div:nth-child(5) { display: none; }   /* worst left and paid: off the pinned box on phones */
  .rt-facts b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
  .rt-facts span { font-size: 9.5px; letter-spacing: .05em; }
  .rt-hint { display: block; margin: 10px 0 6px; font-size: 12px; color: var(--muted); text-align: center; }
  .rt-bar { display: none; }
  .rt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .rt-tile:not(.split) .rt-name, .rt-tile:not(.split) .rt-meta, .rt-tile .rt-split, .rt-taken-row { display: none; }
  .rt-tile:not(.split) .rt-hit { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 78px; padding: 8px 2px; text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .rt-tile:not(.split) .rt-hit .av { width: 32px; height: 32px; }
  .rt-abbr { display: block; font: 600 12.5px/1 var(--f-body); color: var(--ink); white-space: nowrap; }
  .rt-val { display: block; font: 500 11px/1 var(--f-mono); color: var(--muted); white-space: nowrap; }
  .rt-tile.top .rt-val { color: var(--accent); }
  .rt-tile.taken .rt-abbr { text-decoration: line-through; color: var(--muted); }
  .rt-tile.taken .rt-val { opacity: .45; }
  .rt-tile.mine { background: var(--pricey-bg); }
  .rt-tile.mine .rt-abbr { color: var(--pricey); text-decoration: none; }
  .rt-tile.pulse { animation: rt-pulse .35s ease-out; }
  .rt-tile.split { grid-column: 1 / -1; }
  .rt-tile.split .rt-hit { padding: 8px 10px; min-height: 0; }
  .rt-digits { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .rt-dg { min-height: 46px; justify-content: center; }
  .rt-dg b { font-size: 15px; }
  .rt-dg em { font-size: 10.5px; }

  /* Rankings as cards: rank, team or player, verdict / value share bar, price */
  .bk-page .bk-sort { display: flex; align-items: center; gap: 6px; margin: 0 -14px 10px; padding: 2px 14px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bk-sort::-webkit-scrollbar { display: none; }
  .bk-sort .filter-chip { flex: none; min-height: 36px; white-space: nowrap; }
  .bk-sort-label { flex: none; font-size: 10.5px; font-weight: 500; color: var(--muted); margin-right: 2px; }
  #bkTable .grid td.bk-metric-col { display: none; }
  #bkTable .grid .bk-metric { font: 500 12px var(--f-mono); color: var(--accent); white-space: nowrap; }
  #bkTable .grid .bk-share-sm { margin-left: 8px; font: 400 11px var(--f-mono); color: var(--muted); white-space: nowrap; }
  #bkTable.table-wrap { background: none; border: 0; border-radius: 0; overflow: visible; max-height: none; }
  #bkTable .grid { display: block; min-width: 0; width: 100%; }
  #bkTable .grid thead { display: none; }
  #bkTable .grid tbody { display: block; }
  #bkTable .grid tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "rank key price" "rank share verdict"; gap: 4px 10px; align-items: center; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
  #bkTable .grid tr.more-row { display: block; }
  #bkTable .grid td { padding: 0; border: 0; background: none; position: static; min-width: 0; max-width: none; }
  #bkTable .grid td[data-k="rank"] { grid-area: rank; align-self: start; padding-top: 7px; font: 600 14px var(--f-mono); color: var(--muted); text-align: left; }
  #bkTable .grid td[data-k="key"] { grid-area: key; }
  #bkTable .grid td[data-k="team"], #bkTable .grid td[data-k="pvalue"] { display: none; }
  #bkTable .grid td[data-k="valueShare"] { grid-area: share; }
  #bkTable .grid td[data-k="price"] { grid-area: price; }
  #bkTable .grid td[data-k="price"] input { width: 92px; min-height: 40px; }
  #bkTable .grid td[data-k="verdict"] { grid-area: verdict; text-align: right; }
  #bkTable .grid td[data-k="verdict"]:empty { display: none; }
  #bkTable .grid td[data-k="key"] { font-size: 14.5px; font-weight: 600; }
  #bkTable .grid td.sticky-col { max-width: none; }
  #bkTable .grid .who { gap: 10px; }
  #bkTable .grid .who .av { display: inline-grid; width: 30px; height: 30px; }
  #bkTable .grid td[data-k="valueShare"] { display: flex; align-items: center; padding-left: 40px; min-width: 0; overflow: hidden; }
  #bkTable .grid .score-bar { justify-content: flex-start; width: auto; flex: none; }
  #bkTable .grid .score-bar i { display: block; }
  #bkTable .grid .score-bar b { min-width: 0; text-align: left; color: var(--ink-2); }
}

/* ================= other pages on phones: Values, Explore, Home ================= */
.ph-filters, .hero-short, .ex-sets { display: none; }
.pv-line { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.pv-line b { color: var(--ink); font-weight: 600; }
.pv-cards { width: 100%; margin-top: 8px; }
.d-stat small { font-size: 12px; color: var(--muted); }
.more-item.opt.on { border-color: var(--accent-line); background: var(--accent-soft); }
.more-item.opt.on b { color: var(--accent); }
.big-check { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-size: 15px; }
.big-check input { width: 20px; height: 20px; }

@media (max-width: 700px) {
  /* Search pinned under the top bar; filters in a sheet */
  .pv-toolbar, .ex-toolbar { position: sticky; top: var(--top-h, 50px); z-index: 6; flex-wrap: nowrap; margin: 0 -14px 10px; padding: 8px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .pv-toolbar input[type=search], .ex-toolbar input[type=search] { flex: 1 1 auto; max-width: none; min-width: 0; min-height: 42px; }
  .ph-filters { display: inline-flex; flex: none; min-height: 42px; }
  .pv-toolbar .filters, .pv-toolbar .toolbar-right, .ex-toolbar select, .ex-toolbar .filters, .ex-toolbar #exReset, .ex-toolbar .ex-count { display: none; }
  .tier-legend { display: none; }

  /* Player values: compact rows (photo · name · team logo · value), tap for the value sheet */
  #pvTable.table-wrap { border-radius: var(--r-lg); }
  #pvTable .grid { min-width: 0; width: 100%; }
  #pvTable .grid td, #pvTable .grid th { padding: 10px 10px; }
  #pvTable .grid td.sticky-col, #pvTable .grid th.sticky-col { max-width: none; position: static; }
  #pvTable .grid .who .av { width: 34px; height: 34px; }
  #pvTable .grid td[data-k="curTeam"], #pvTable .grid th[data-sort="curTeam"] { width: 44px; text-align: center; }
  #pvTable .grid td[data-k="value"], #pvTable .grid th[data-sort="value"] { width: 56px; text-align: right; }
  #pvTable .grid tbody tr { cursor: pointer; }
  .pv-sheet-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Explore: one collapsible section per set */
  #exTable { display: none; }
  .ex-sets { display: grid; gap: 8px; }
  .ex-set { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .ex-set > summary { list-style: none; display: grid; gap: 2px; padding: 13px 40px 13px 14px; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
  .ex-set > summary::-webkit-details-marker { display: none; }
  .ex-set > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
  .ex-set[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
  .ex-set > summary b { font-weight: 600; font-size: 14.5px; }
  .ex-set > summary span { color: var(--muted); font-size: 12px; }
  .ex-set-body { display: grid; border-top: 1px solid var(--line); }
  .ex-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main tags" "meta tags"; gap: 2px 10px; align-items: center; width: 100%; padding: 10px 14px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .ex-card:last-child { border-bottom: 0; }
  .ex-card:active { background: var(--surface-3); }
  .ex-card-main { grid-area: main; min-width: 0; font-weight: 500; font-size: 14px; }
  .ex-card-main .av { width: 28px; height: 28px; }
  .ex-card-meta { grid-area: meta; color: var(--muted); font-size: 12px; padding-left: 37px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ex-card-tags { grid-area: tags; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 130px; }
  .ex-card-tags .chip { font-size: 11px; padding: 2px 6px; }
  .ex-top .ex-pick { min-height: 46px; font-weight: 600; }
  .ex-stats { gap: 14px; }

  /* Home: short intro, your breaks first, top players in a swipe row, then the market data */
  .home { display: flex; flex-direction: column; }
  .home > .hero { order: 1; } .home > .home-cols { order: 2; } .home > .home-head { order: 3; } .home > .chase-grid { order: 4; } .home > .data-stats { order: 5; } .home > .foot-note { order: 9; }
  .home > .pitch, .home > .steps, .home > .steps-head, .hero-demo { display: none; }
  .prod-lines .hl-name { flex: 0 0 96px; white-space: normal; line-height: 1.3; }
  .prod-seasons { flex: 1; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .prod-seasons::-webkit-scrollbar { display: none; }
  .home-list a.season-chip { flex: none; padding: 6px 10px; font-size: 12px; }
  .hero { padding: 22px 18px; }
  .hero-sub { margin-bottom: 18px; font-size: 15px; line-height: 1.5; }
  .hero h1 { font-size: 28px; margin-bottom: 10px; }
  .hero-actions .btn { flex: 1; justify-content: center; }
  .home-cols { grid-template-columns: 1fr; margin-bottom: 22px; }
  .chase-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px 24px; padding: 0 14px 6px; scrollbar-width: none; }
  .chase-grid::-webkit-scrollbar { display: none; }
  .chase-card { scroll-snap-align: start; }
}
.install-tip { display: none; }
@media (max-width: 700px) {
  .install-tip { order: 2; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 12px 12px 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-lg); }
  .install-tip img { flex: none; border-radius: var(--r-md); }
  .install-tip p { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
  .install-tip b { color: var(--ink); }
  .home > .home-cols { order: 3; } .home > .home-head { order: 4; } .home > .chase-grid { order: 5; }
}
@media (max-width: 700px) {
  #bkTable .grid .score-bar { gap: 6px; }
  #bkTable .grid .score-bar i { max-width: 36px; }
}
@media (max-width: 700px) {
  #bkTable .grid td[data-k="price"] input { width: 82px; }
  #bkTable .grid .bk-metric { font-size: 11.5px; }
}
@media (max-width: 700px) {
  .break-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .break-picker select { grid-column: 1 / -1; width: 100%; max-width: none; min-width: 0; }
  .break-picker .btn { padding-inline: 4px; font-size: 12.5px; }
}
.guide-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--accent); font-size: 14px; font-weight: 500; text-decoration: none; }
.guide-link span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); font-size: 9px; padding-left: 2px; }
@media (hover: hover) and (pointer: fine) { .guide-link:hover { color: var(--ink); } }
a.help-link { text-decoration: none; }

/* Team random: when to buy */
.rt-signal { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rt-signal.go { border-color: var(--steal); background: var(--steal-bg); }
.rt-signal.ok { border-color: var(--pricey); background: var(--pricey-bg); }
.rt-signal.stop { border-color: var(--line-strong); }
.rt-sig-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.rt-sig-main > b { font: 600 20px/1.2 var(--f-display); }
.rt-sig-main > b small { font-size: 13px; font-weight: 500; color: var(--muted); }
.rt-signal.go .rt-sig-main > b { color: var(--steal); }
.rt-signal.ok .rt-sig-main > b { color: var(--pricey); }
.rt-signal.stop .rt-sig-main > b { color: var(--ink-2); }
.rt-bids { display: flex; gap: 18px; }
.rt-bids div { display: flex; flex-direction: column; }
.rt-bids b { font: 500 18px/1.2 var(--f-mono); color: var(--ink); }
.rt-bids span { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.rt-risk { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
@media (max-width: 700px) {
  .rt-signal { padding: 10px 12px; gap: 6px 14px; }
  .rt-sig-main { min-width: 0; flex-basis: 100%; }
  .rt-sig-main > b { font-size: 17px; }
  .rt-bids b { font-size: 16px; }
  .rt-risk { font-size: 12px; }
}

/* When to buy: one row, details on hover / behind the i */
.rt-signal { flex-wrap: nowrap; align-items: center; gap: 12px 24px; padding: 10px 16px; cursor: help; }
.rt-sig-main { flex-direction: column; min-width: 0; }
.rt-sig-main > b { font-size: 18px; }
.rt-sig-main > b small { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px; background: var(--surface-3); color: var(--muted); vertical-align: 2px; margin-left: 4px; }
.rt-bids { margin-left: auto; }
.rt-sig-info { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: italic 600 13px Georgia, serif; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .rt-sig-info:hover { color: var(--ink); border-color: var(--accent-line); } }
@media (max-width: 700px) {
  .rt-signal { flex-wrap: wrap; gap: 6px 12px; }
  .rt-sig-main { flex-basis: auto; flex: 1; }
  .rt-bids { margin-left: 0; }
}
@media (max-width: 700px) {
  .rt-head .rt-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt-head .rt-facts > div:last-child { grid-column: auto; }
}
.rt-bids .rt-beat { padding-left: 18px; border-left: 1px solid var(--line-strong); }
.rt-bids .rt-beat b small { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) { .rt-bids .rt-beat { padding-left: 12px; } }
.paste-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-soft); }

/* Your spots: stars in the list, a box with what you paid vs what it's worth */
.mine-star { border: 0; background: none; padding: 0 6px 0 0; font-size: 17px; line-height: 1; color: var(--faint); cursor: pointer; vertical-align: -1px; }
@media (hover: hover) and (pointer: fine) { .mine-star:hover { color: var(--pricey); } }
.mine-star.on { color: var(--pricey); }
.grid td.rank-cell { white-space: nowrap; }
.bk-mine { margin: 0 0 14px; border-color: var(--pricey); display: grid; gap: 10px; }
.mine-head { display: flex; align-items: center; gap: 10px; }
.mine-head b { font: 600 18px var(--f-mono); color: var(--pricey); }
.mine-head .btn { margin-left: auto; }
.mine-list { display: grid; gap: 6px; }
.mine-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 96px 250px 28px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mine-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mine-name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-f { display: grid; gap: 2px; }
.mine-f span { font-size: 9.5px; font-weight: 500; color: var(--muted); }
.mine-f input { width: 100%; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font-family: var(--f-mono); }
.mine-worth { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.mine-worth b { font: 500 15px var(--f-mono); }
.mine-worth small { color: var(--muted); font-size: 11px; }
.mine-total { display: grid; grid-template-columns: repeat(7, minmax(0, auto)); gap: 6px 22px; padding-top: 4px; }
.mine-total div { display: flex; flex-direction: column; }
.mine-total b { font: 500 18px var(--f-mono); }
.mine-total b small { font: 400 11px var(--f-body); color: var(--muted); }
.mine-total span { font-size: 10px; font-weight: 500; color: var(--muted); margin-top: 2px; }
@media (max-width: 700px) {
  .mine-row { grid-template-columns: 64px 80px minmax(0, 1fr) 28px; grid-template-areas: "n n n x" "s p w w"; row-gap: 6px; align-items: end; }
  .mine-name { grid-area: n; } .mine-row .mine-f:nth-of-type(1) { grid-area: s; } .mine-row .mine-f:nth-of-type(2) { grid-area: p; }
  .mine-worth { grid-area: w; justify-content: flex-end; padding-bottom: 6px; } .mine-row [data-mineoff] { grid-area: x; }
  .mine-total { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #bkTable .grid td[data-k="rank"] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  #bkTable .grid .mine-star { padding: 0; font-size: 19px; }
}
.drawer .grid tr.has-odds { cursor: help; }
@media (hover: hover) and (pointer: fine) { .drawer .grid tr.has-odds:hover td { background: var(--surface-3); } }

/* Budget builder */
.bud-form { display: grid; gap: 14px; margin-bottom: 16px; }
.bud-form .field > span { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.bud-form .field small { text-transform: none; letter-spacing: 0; }
.bud-form #budAmt { width: 160px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: 500 18px var(--f-mono); }
.bud-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.bud-out { display: grid; gap: 12px; }
.bud-total { grid-template-columns: repeat(6, minmax(0, auto)); padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: var(--accent-soft); }
.bud-list { display: grid; gap: 4px; }
.bud-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 86px 72px 64px; gap: 4px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bud-row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bud-row small { color: var(--muted); font-size: 12px; }
.bud-num { text-align: right; font: 500 14px var(--f-mono); }
.bud-num em { font-style: normal; font-size: 10px; color: var(--pricey); margin-left: 3px; }
.bud-hit { text-align: right; font-size: 12px; color: var(--ink-2); }
@media (max-width: 700px) {
  .bud-total { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bud-row { grid-template-columns: auto minmax(0, 1fr) 70px 60px; grid-template-areas: "a n p f" "a t h h"; }
  .bud-row > .av, .bud-row > .team-badge { grid-area: a; } .bud-row b { grid-area: n; } .bud-row small { grid-area: t; }
  .bud-row .bud-num:not(.muted) { grid-area: p; } .bud-row .bud-num.muted { grid-area: f; } .bud-row .bud-hit { grid-area: h; text-align: left; }
}
.bud-row { grid-template-columns: auto minmax(0, 1fr) auto 86px 72px 64px auto; }
.bud-taken { min-height: 30px; padding: 0 10px; font-size: 12px; }
.bud-gone { margin: 0; }
.linkish { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
@media (max-width: 700px) {
  .bud-row { grid-template-columns: auto minmax(0, 1fr) 70px 60px; grid-template-areas: "a n p f" "a t h k"; }
  .bud-row .bud-taken { grid-area: k; justify-self: end; }
}
.bud-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.bud-check input { width: 18px; height: 18px; }
.mine-hit { font: 500 12px var(--f-mono); color: var(--ink-2); white-space: nowrap; }
.mine-row { grid-template-columns: minmax(0, 1fr) 84px 96px 310px 28px; }
@media (max-width: 700px) { .mine-row { grid-template-columns: 64px 80px minmax(0, 1fr) 28px; } }
@media (max-width: 700px) {
  .mine-row { grid-template-columns: 64px 84px minmax(0, 1fr) 28px; grid-template-areas: "n n n x" "s p . ." "w w w w"; }
  .mine-worth { justify-content: flex-start; padding-bottom: 0; flex-wrap: wrap; }
}

/* Your spots as one grid: rows and the total share columns */
.mine-grid { display: grid; }
.bk-mine .mine-row { grid-template-columns: minmax(0, 1fr) 84px 96px 110px 110px 96px 84px 28px; grid-template-areas: none; gap: 10px; align-items: center; padding: 7px 0; }
.bk-mine .mine-row > * { grid-area: auto; }
.mine-cols { padding: 0 0 4px !important; border-bottom: 1px solid var(--line-strong) !important; }
.mine-cols span { font-size: 9.5px; font-weight: 500; color: var(--muted); }
.mine-c input { width: 100%; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font-family: var(--f-mono); }
.mine-c.num, .mine-cols .num { text-align: right; font: 500 14px var(--f-mono); }
.mine-cols .num { font: 500 9.5px var(--f-body); }
.mine-c small { font: 400 11px var(--f-body); color: var(--muted); }
.mine-sum { border-bottom: 0 !important; border-top: 1px solid var(--line-strong); padding-top: 10px !important; }
.mine-sum .mine-c.num { font-size: 17px; color: var(--ink); }
.mine-sum .mine-name b { font-size: 14px; color: var(--muted); }
.mine-extra { margin: 4px 0 0; }
@media (max-width: 700px) {
  .mine-cols { display: none !important; }
  .bk-mine .mine-row { grid-template-columns: repeat(3, minmax(0, 1fr)) 28px; row-gap: 8px; }
  .bk-mine .mine-row .mine-name { grid-column: 1 / 4; }
  .bk-mine .mine-row [data-mineoff] { grid-column: 4; grid-row: 1; }
  .mine-c { display: grid; gap: 2px; }
  .mine-c::before { content: attr(data-label); font: 500 9.5px var(--f-body); color: var(--muted); text-align: left; }
  .mine-c.num { text-align: left; }
  .mine-sum > span:empty { display: none; }
  .mine-sum .mine-name { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .bk-mine .mine-row { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-mine .mine-row .mine-name { grid-column: 1 / -1; padding-right: 34px; }
  .bk-mine .mine-row [data-mineoff] { position: absolute; top: 6px; right: 0; grid-column: auto; grid-row: auto; }
}

/* Break builder (desktop): rank and name stay put when the table scrolls sideways */
@media (min-width: 701px) {
  #bkTable .grid th:first-child, #bkTable .grid td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); width: 68px; min-width: 68px; max-width: 68px; }
  #bkTable .grid th:first-child { z-index: 4; background: var(--surface-2); }
  #bkTable .grid th.sticky-col, #bkTable .grid td.sticky-col { left: 68px; box-shadow: 1px 0 0 var(--line-strong); }
  @media (hover: hover) and (pointer: fine) { #bkTable .grid tbody tr:hover td:first-child, #bkTable .grid tbody tr:hover td.sticky-col { background: var(--surface-3); } }
}

/* Taken spots (Pick your team / player): greyed out, kept in place */
.taken-btn { margin-left: 10px; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--muted); font: 500 11px var(--f-body); cursor: pointer; vertical-align: 1px; opacity: 0; }
.taken-btn:focus-visible, .taken-btn.on { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .grid tbody tr:hover .taken-btn { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .taken-btn:hover { color: var(--ink); border-color: var(--muted); } }
.taken-btn.on { background: var(--surface-3); color: var(--ink-2); }
#bkTable .grid tbody tr.taken td { background: var(--surface-2); color: var(--faint); }
#bkTable .grid tbody tr.taken td > *:not(.taken-btn) { opacity: .5; }
@media (max-width: 700px) {
  .taken-btn { opacity: 1; padding: 4px 10px; font-size: 11.5px; }
  #bkTable .grid tr.taken { background: var(--surface-2); border-style: dashed; }
}
.bud-mine { display: flex; flex-wrap: wrap; gap: 6px; }
.bud-mine .filter-chip.on { border-color: var(--pricey); color: var(--pricey); }
.bud-row.mine b { color: var(--pricey); }
.bud-yours { font-size: 11.5px; font-weight: 600; color: var(--pricey); white-space: nowrap; padding: 0 4px; }

/* Player wheel (Pick your player) */
.bk-wheel { margin: 0 0 14px; display: grid; gap: 4px; }
.wh-head { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; }
.bk-wheel .rt-big b { font-size: 34px; }
.bk-wheel .rt-signal { cursor: default; flex-wrap: wrap; }
.wh-price { display: flex; align-items: center; gap: 6px; font: 500 16px var(--f-mono); color: var(--muted); }
.wh-price input { width: 90px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: 500 16px var(--f-mono); }
.bk-wheel .rt-sig-main > b small { text-transform: none; letter-spacing: 0; font-size: 13px; padding: 0; background: none; }
@media (max-width: 700px) {
  .bk-wheel .rt-big b { font-size: 30px; }
  .wh-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .bk-wheel .rt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
  .bk-wheel .rt-facts b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .bk-wheel .rt-facts span { font-size: 9.5px; letter-spacing: .06em; }
  .bk-wheel .rt-signal { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main price" "bids info"; gap: 10px 12px; }
  .bk-wheel .rt-sig-main { grid-area: main; } .bk-wheel .wh-price { grid-area: price; }
  .bk-wheel .rt-bids { grid-area: bids; margin-left: 0; } .bk-wheel .rt-sig-info { grid-area: info; align-self: center; }
}
.bk-wheel { position: relative; }
.wh-off { justify-self: end; margin-top: 6px; }
/* Wheel check: the breaker's wheel list */
.wh-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.wh-list .sub { margin-right: auto; }
.wh-out { margin: 2px 0 0; font-size: 12.5px; color: var(--pricey); }
.wh-text { width: 100%; min-height: 180px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: 400 13.5px/1.5 var(--f-mono); resize: vertical; }
.wh-preview p { margin: 10px 0 0; font-size: 13px; }
.wh-preview .err { color: var(--pricey); }
.wh-actions { display: flex; gap: 8px; margin-top: 14px; }
@media (max-width: 700px) {
  .bk-wheel .rt-facts > div.wh-chaser { display: flex; }       /* chaser chance stays on phones */
  .bk-wheel .rt-facts > div.wh-chaser ~ div { display: none; }
}
/* See list: the wheel as read */
.wh-search { width: 100%; margin: 10px 0 8px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: inherit; }
.wh-table { width: 100%; }
.wh-table td { white-space: normal; }
.wh-table tr.gone td { opacity: .45; }
.wh-table tr.out td:nth-child(2) { color: var(--pricey); }
.wh-table .wh-outtag { color: var(--pricey); }
.wh-chaser-row td { background: var(--surface-3); }
/* Prices in CAD / USD */
.cur-switch { margin-right: 4px; }
.cur-switch button { padding: 5px 10px; font-size: 12px; }
.more-cur { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "b seg" "s seg"; align-items: center; gap: 2px 12px; cursor: default; }
.more-cur > b { grid-area: b; } .more-cur > span { grid-area: s; } .more-cur > .seg { grid-area: seg; }
/* Feedback */
.fb-text { width: 100%; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: inherit; resize: vertical; }
.fb-reply { display: grid; gap: 4px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.fb-reply input { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: inherit; }
.fb-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.acct-fb { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.acct-fb > div { display: flex; flex-direction: column; gap: 2px; }
.acct-fb .hint { margin: 0; }
/* Premium teaser (plans.js): where a Premium feature would be, for Free viewers */
.premium-teaser { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.premium-teaser > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.premium-teaser b { font-weight: 600; }
.premium-teaser span { color: var(--muted); font-size: 13px; }
.premium-teaser.sm { padding: 10px 14px; }
.seg button.locked { opacity: .6; }
/* Premium page */
.pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pm-col h2 { margin: 0 0 4px; }
.pm-price { font: 600 30px/1.2 var(--f-mono); margin: 4px 0 8px; }
.pm-price small { font-size: 14px; color: var(--muted); }
.pm-price span { font: 400 13px var(--f-body); color: var(--muted); margin-left: 8px; }
.pm-list { margin: 8px 0 16px; padding-left: 20px; display: grid; gap: 6px; }
.pm-premium { border-color: var(--accent-line); }
.pm-also { margin: 10px 0 0; font-weight: 600; }
.acct-preview input { width: 20px; height: 20px; }
.pv-mine { display: grid; gap: 6px; margin: 12px 0; font-size: 13px; }
.pv-mine small { color: var(--muted); }
.pv-mine input { width: 120px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: 500 16px var(--f-mono); }

/* Phones: no text under 12px (labels, chips, table heads, board captions). Avatar initials, product letters and the
   100-number serial grid keep their sizes, since they sit inside fixed-size badges. */
@media (max-width: 700px) {
  .field label,
  .stat span,
  .d-stat span,
  .picker-label,
  .d-eyebrow,
  .bk-products th,
  table.mini th,
  .best-list span,
  .section-title,
  .break-readout,
  .grid th,
  .chip,
  .chip.rc,
  .tier,
  .d-section,
  .d-legend,
  .settings-grid legend,
  .team-rules legend,
  .card-box h3,
  .per-cell span,
  .chip.ptier,
  .advanced > summary,
  .menu-label,
  table.cmp tr.cmp-sub th,
  table.cmp tr.cmp-sub td,
  .eyebrow,
  .kpi span,
  .pk-meta,
  .admin-chip,
  .lib-head,
  .lib-check,
  .data-stats .ds span,
  .data-stats .ds-note,
  .drawer .grid .chip,
  .bk-products td[data-label]::before,
  #main .grid th,
  #main .grid .who .av,
  #bkTable .grid .chip,
  #main table.cmp tbody th,
  .grid td.name .chip,
  .rt-eyebrow,
  .rt-facts span,
  .rt-sub,
  .rt-meta,
  .rt-mine,
  .serial-head .seg button,
  .rt-dg em,
  .tabbar a,
  .tabbar button,
  .bk-strip small,
  .rt-val,
  .bk-sort-label,
  #bkTable .grid .bk-metric,
  #bkTable .grid .bk-share-sm,
  .ex-card-tags .chip,
  .rt-sig-main > b small,
  .rt-bids span,
  .mine-f span,
  .mine-worth small,
  .mine-total b small,
  .mine-total span,
  .bud-form .field > span,
  .bud-num em,
  .mine-cols span,
  .mine-cols .num,
  .mine-c small,
  .mine-c::before,
  .taken-btn,
  .bud-yours,
  .bk-wheel .rt-facts span { font-size: 12px; }
}

/* Touch screens: every small control gets a tap area of at least 44px (an invisible ::after around it), so the star,
   Taken, info and close buttons are easy to hit mid-break without making them look bigger. */
@media (pointer: coarse) {
  .mine-star, .taken-btn, .rt-sig-info, .rt-mine, .icon-btn, .home-link, .season-chip { position: relative; }
  .mine-star::after, .taken-btn::after, .rt-sig-info::after, .rt-mine::after, .icon-btn::after, .wh-off::after, .cmp-x::after,
  .home-link::after, .season-chip::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
}

/* Less motion when the device asks for it: sheets, toasts, presses and pulses switch instantly. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Drawn icons (BR.icon): sized by the text around them. */
.ic { display: inline-block; flex: none; vertical-align: -.14em; }
.icon-btn .ic { width: .78em; height: .78em; vertical-align: -.1em; }
.rt-sig-info { display: inline-grid; place-items: center; font: 15px/1 var(--f-body); }
.help-link span .ic, .guide-link span .ic { width: 10px; height: 10px; margin-left: 1px; }
.seg button .ic-lock { width: 13px; height: 13px; margin-left: 2px; opacity: .8; }
.mine-star .ic { width: 1em; height: 1em; }
.d-for { margin: 2px 0 16px; color: var(--muted); font-size: 14px; }

/* ================= Break builder, tidied (2026-10-27): one header row, folded setup, summary cards, two toolbar buttons ================= */
.bk-page .page-head > div:first-child { display: flex; align-items: center; gap: 12px; }
.bk-page .page-head h1 { margin: 0; }
.bk-help { margin-left: 0; }
.btn.icon-only { padding-inline: 9px; }
.btn .ic-more { width: 18px; height: 18px; }
.btn .ic-down { width: 14px; height: 14px; margin-right: -3px; }
/* Pop-up menus (⋯ and Tools) */
.act-menu { position: relative; display: inline-flex; }
.act-pop { position: absolute; z-index: 22; top: calc(100% + 6px); right: 0; display: grid; min-width: 200px; padding: 6px; background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow); }
.act-pop[hidden] { display: none; }
.act-pop button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); font: 500 13.5px var(--f-body); text-align: left; white-space: nowrap; cursor: pointer; }
.act-pop button[hidden] { display: none; }
.act-pop button.danger { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--over); }
@media (hover: hover) and (pointer: fine) { .act-pop button:hover { background: var(--surface); color: var(--ink); } }
.toolbar-right .seg button { padding: 5px 12px; }

/* Setup folded to one line (desktop) */
.bk-fold { display: none; }
.bk-done { margin-left: auto; }
@media (min-width: 701px) {
  .bk-page[data-fold="1"] .bk-setup, .bk-page[data-fold="1"] #bkSummary { display: none; }
  .bk-page[data-fold="1"] .bk-fold { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .bk-page[data-fold="0"] .bk-fold { display: none; }
}
.bk-fold-what { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; min-width: 0; font-weight: 500; }
.bk-fold-prod { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bk-fold-fmt { color: var(--muted); font-weight: 400; }
.bk-fold-nums { display: flex; align-items: center; gap: 26px; margin-left: auto; padding: 4px 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bk-fold-nums span { display: flex; flex-direction: column; }
.bk-fold-nums b { font: 500 17px/1.2 var(--f-mono); letter-spacing: -.02em; white-space: nowrap; }
.bk-fold-nums small { font-size: 12px; color: var(--muted); }
.bk-fold-nums .acc b { color: var(--accent); }
.bk-fold-nums .ic { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .bk-fold-nums:hover { background: var(--surface-3); } }

/* Your spots and Player wheel: one-line cards; the full box opens as a panel */
.bk-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin: 0 0 14px; }
.bk-duo:not(:has(.bk-card:not([hidden]))) { display: none; }
.bk-card { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; min-width: 0; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bk-card[hidden] { display: none; }
.bk-card.mine { border-color: rgba(245, 194, 107, .4); }
.bk-card-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.bk-card-t .ic-star { color: var(--pricey); }
.bk-card-t b { font: 600 15px var(--f-mono); color: var(--pricey); }
.bk-card-nums { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-width: 0; }
.bk-card-nums > span { display: flex; flex-direction: column; }
.bk-card-nums b { font: 500 16px/1.2 var(--f-mono); letter-spacing: -.02em; white-space: nowrap; }
.bk-card-nums small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bk-card-nums .acc b { color: var(--accent); }
.wh-tier.go { color: var(--steal); } .wh-tier.ok { color: var(--fair); } .wh-tier.stop { color: var(--over); }
.bk-card-go { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .bk-card:hover { border-color: var(--line-strong); background: var(--surface-3); } .bk-card.mine:hover { border-color: var(--pricey); } }
.bk-scrim { position: fixed; inset: 0; z-index: 28; background: var(--scrim); backdrop-filter: blur(2px); }
.bk-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 29; width: min(940px, 100%); padding: 26px 26px 44px; overflow-y: auto; background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow); animation: slide .18s ease-out; }
.bk-panel > .close { position: absolute; top: 14px; right: 16px; z-index: 2; }
.bk-panel .bk-mine, .bk-panel .bk-wheel { margin: 0; }
.bk-panel .mine-head, .bk-panel .wh-head { padding-right: 44px; }
.bk-panel .mine-head .rt-eyebrow { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.bk-panel .mine-head b { font-size: 22px; }
.d-taken.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .bk-panel { animation: none; } }
@media (max-width: 700px) {
  .bk-duo { grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
  .bk-card { flex-wrap: nowrap; gap: 14px; padding: 12px 14px; }
  .bk-card-nums { flex-wrap: nowrap; gap: 14px; overflow: hidden; }
  .bk-card-nums b { font-size: 15px; }
  .bk-card-go { font-size: 0; }
  .bk-card[data-wheel] .bk-card-nums > span:nth-child(n+3), #bkMineCard .bk-card-nums > span:nth-child(n+4) { display: none; }   /* what fits on one line */
  .bk-card-go .ic { font-size: 18px; }
  .bk-page[data-view="setup"] .bk-duo { display: none; }
  .bk-panel { top: auto; left: 0; width: 100%; max-height: 88vh; max-height: 88dvh; padding: 18px max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-left: 0; border-top: 1px solid var(--line-strong); border-radius: 18px 18px 0 0; animation: sheet-up .22s ease-out; overscroll-behavior: contain; }
  .bk-panel > .close { top: 12px; right: 10px; }
  /* Taken lives in the spot panel on phones (tap a row); the row still greys out once taken */
  #bkTable .taken-btn { display: none; }
}

/* Spot panel top (2026-10-27): price and verdict on one row, the key numbers as tiles */
.d-deal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 18px; align-items: end; }
.d-deal .field input { width: 150px; }
.d-deal-v { min-width: 0; padding-bottom: 4px; }
.d-verdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d-verdict .chip { font-size: 14px; padding: 4px 12px; }
.d-verdict span { font: 500 15px var(--f-mono); color: var(--ink-2); }
.d-hint { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.d-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.d-tiles > div { padding: 11px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.d-tiles b { display: block; font: 500 18px/1.2 var(--f-mono); letter-spacing: -.02em; white-space: nowrap; }
.d-tiles span { font-size: 12px; color: var(--muted); }
.d-tiles .key b { color: var(--accent); }
table.mini th.num { font-family: var(--f-body); font-size: inherit; }
@media (max-width: 560px) {
  .d-deal { grid-template-columns: minmax(0, 1fr) auto; }
  .d-deal-v { grid-column: 1 / -1; grid-row: 2; padding-bottom: 0; }
  .d-deal .field input { width: 100%; }
  .d-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Spot panel on phones (2026-10-27): full width, no box in the sheet; numbers four a row; products as a list; card rows on two lines */
.d-plist { display: none; }
@media (max-width: 700px) {
  .drawer .d-head.with-photo { padding-top: 8px; }   /* the photo's outer ring sticks out 5px; clear the sheet's grab handle */
  .d-price { padding: 0; background: none; border: 0; border-radius: 0; gap: 14px; }
  .d-deal { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
  .d-deal-v { grid-column: 1 / -1; grid-row: 2; padding-bottom: 0; }
  .d-deal .field input { width: 100%; }
  .d-verdict span { font-size: 14px; }
  .d-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
  .d-tiles > div { padding: 9px 8px; }
  .d-tiles b { font-size: 15px; }
  .d-tiles span { display: block; font-size: 11px; line-height: 1.25; }
  .d-price table.mini { display: none; }
  .d-plist { display: grid; gap: 8px; }
  .d-prow { padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
  .d-prow-t { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .d-prow-t b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .d-prow-t span:not(.pl) { flex: none; color: var(--muted); font-size: 12.5px; }
  .d-prow-t em { margin-left: auto; flex: none; font: 500 14px var(--f-mono); font-style: normal; color: var(--accent); }
  .d-prow-n { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
  .d-prow-n b { font: 500 12.5px var(--f-mono); color: var(--ink); }
  /* The cards in a product: set name on its own line, type and numbering under it */
  .drawer .cards-grid { display: block; }
  .drawer .cards-grid thead { display: none; }
  .drawer .cards-grid tbody { display: block; }
  .drawer .cards-grid tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .drawer .cards-grid tr:last-child { border-bottom: 0; }
  .drawer .cards-grid td { padding: 0; border: 0; }
  .drawer .cards-grid td.name, .drawer .cards-grid td.set-cell { flex: 1 1 100%; }
  .drawer .cards-grid td.set-cell { font-weight: 500; font-size: 13.5px; color: var(--ink); }
  .drawer .cards-grid td.num { margin-left: auto; }
  .drawer .cards-grid td.m-hide { display: none; }
  /* A team's players table: names can wrap so it fits without scrolling sideways */
  .drawer .grid:not(.cards-grid) td, .drawer .grid:not(.cards-grid) th { padding-inline: 6px; }
  .drawer .grid:not(.cards-grid) td.name .who-name { white-space: normal; }
}

/* Breaker's wheels (2026-10-27): a card per wheel next to Your spots, plus "+ Add a wheel" */
.bk-wheels { display: contents; }
.bk-card.add { justify-content: center; flex-direction: column; gap: 2px; border-style: dashed; color: var(--accent); font-weight: 600; }
.bk-card.add small { color: var(--muted); font-weight: 400; font-size: 12px; }
.wh-name { display: grid; gap: 4px; margin: 0 44px 14px 0; }
.wh-name span { font-size: 12px; color: var(--muted); }
.wh-name input { width: min(100%, 320px); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: 600 20px/1.2 var(--f-body); letter-spacing: -.01em; }
.wh-name input:focus { border-color: var(--accent-line); }
.wh-namefield { display: grid; gap: 4px; margin: 12px 0; }
.wh-namefield span { font-size: 12px; color: var(--muted); }
.wh-namefield input { width: min(100%, 320px); padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: inherit; }
.wh-list .danger { color: var(--over); }
@media (max-width: 700px) { .bk-card.add { flex-direction: row; justify-content: flex-start; gap: 10px; } }

/* Back from a player to the team panel it was opened from */
.d-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px -6px; padding: 6px 10px 6px 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--accent); font: 500 14px var(--f-body); cursor: pointer; }
.d-back .ic { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .d-back:hover { background: var(--surface-3); } }
@media (max-width: 700px) { .d-back { min-height: 40px; margin-top: 4px; } }

/* ================= Breaker mode (2026-10-28): the seller's side, a price sheet with a plan beside it ================= */
.bk-mode { margin-right: 6px; }
.bk-mode button { padding: 5px 12px; }
.bk-page[data-mode="break"] .bk-duo, .bk-page[data-mode="break"] #bkRandom, .bk-page[data-mode="break"] .toolbar,
.bk-page[data-mode="break"] .bk-sort, .bk-page[data-mode="break"] #bkTable, .bk-page[data-mode="break"] #bkWarn { display: none !important; }
.bk-breaker { margin-bottom: 20px; }
/* Checklist check */
.bp-check { margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.bp-check.has-warn { border-color: rgba(245, 194, 107, .45); }
.bp-check-head { display: flex; align-items: center; gap: 8px; }
.bp-check-head .ic { width: 18px; height: 18px; color: var(--pricey); flex: none; }
.bp-check-head b { font-weight: 600; }
.bp-check ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 13.5px; }
.bp-check li { margin: 4px 0; }
.bp-check li b { color: var(--ink); font-weight: 500; }
.bp-check details { margin-top: 8px; font-size: 13px; color: var(--muted); }
.bp-check summary { cursor: pointer; }
.bp-check details ul { color: var(--muted); font-size: 13px; }
.bp-empty, .bp-random { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--muted); }
.bp-random b { display: block; font-size: 24px; color: var(--accent); }
/* Sheet + plan */
.bp-work { display: grid; grid-template-columns: minmax(0, 1fr) 340px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.bp-sheet { min-width: 0; }
.bp-sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; }
.bp-sheet-head h3, .bp-plan h3 { margin: 0; font-size: 15px; font-weight: 600; }
.bp-sheet-head .muted { font-size: 13px; }
.bp-grow { flex: 1; }
.bp-cols, .bp-row-spot { display: grid; grid-template-columns: minmax(0, 1fr) 110px 100px 84px 120px; align-items: center; gap: 0 12px; padding: 7px 18px; border-bottom: 1px solid var(--line); }
.bp-cols { font-size: 12px; color: var(--muted); padding-top: 8px; padding-bottom: 8px; }
.bp-cols span:not(:first-child) { text-align: right; }
.bp-who { display: contents; }
.bp-who b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-who small { text-align: right; color: var(--muted); font-size: 13px; }
.bp-who small .num { color: var(--ink-2); }
.bp-who small i { display: none; font-style: normal; }
.bp-row-spot:last-child { border-bottom: 0; }
.bp-tag { justify-self: start; font-size: 12px; font-weight: 500; }
.bp-tag.pair { color: var(--violet); } .bp-tag.wheel, .bp-tag.floor { color: var(--pricey); }
.bp-price { justify-self: end; display: flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--muted); }
.bp-price input { width: 76px; padding: 6px 0; border: 0; background: none; color: var(--ink); font: 14px var(--f-mono); text-align: right; outline: none; }
.bp-price:focus-within { border-color: var(--accent-line); }
.bp-row-spot.edited .bp-price { border-color: var(--accent-line); }
.bp-plan { padding: 14px 18px 20px; background: var(--surface-2); border-left: 1px solid var(--line); }
.bp-plan h3 { margin-bottom: 12px; }
.bp-group { padding: 12px 0; border-top: 1px solid var(--line); }
.bp-plan .bp-group:first-of-type, .bk-plan-body .bp-group:first-child { border-top: 0; padding-top: 0; }
.bp-label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--ink-2); }
.bp-label small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.bp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bp-field { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--muted); font-size: 13px; }
.bp-field input { width: 60px; border: 0; background: none; color: var(--ink); font: 15px var(--f-mono); text-align: right; outline: none; }
.bp-field:focus-within { border-color: var(--accent-line); }
.bp-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.bp-options { display: grid; gap: 6px; }
.bp-option { display: grid; grid-template-columns: 16px 1fr; gap: 1px 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bp-option i { grid-row: span 2; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.bp-option b { font-weight: 500; font-size: 13.5px; }
.bp-option span { font-size: 12.5px; color: var(--muted); }
.bp-option.on { border-color: var(--accent-line); }
.bp-option.on i { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .bp-option:hover { border-color: var(--line-strong); } }
.bp-floor { display: grid; gap: 8px; margin: 2px 0 4px 26px; }
.bp-floor[hidden] { display: none; }
.bp-floor .bp-field { justify-self: start; }
.bp-seg { display: flex; } .bp-seg button { flex: 1; white-space: nowrap; }
.bp-totals { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; font-size: 13.5px; }
.bp-totals span { color: var(--muted); }
.bp-totals b { font: 500 13.5px var(--f-mono); text-align: right; }
.bp-totals .bp-profit { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
.bp-totals b.bp-profit { color: var(--steal); }
.bp-totals b.bp-profit.loss { color: var(--over); }
.bp-sum, .bp-dock, .bp-panel-title { display: none; }
@media (max-width: 1000px) { .bp-work { grid-template-columns: minmax(0, 1fr) 300px; } .bp-cols, .bp-row-spot { grid-template-columns: minmax(0, 1fr) 96px 90px 70px 110px; } }
@media (max-width: 700px) {
  .bk-page[data-view="live"] .break-picker .bk-mode { display: flex; margin: 0 0 10px; }
  .bk-mode button { flex: 1; min-height: 40px; }
  .bk-page[data-mode="break"] .bk-fab { display: none !important; }
  .bk-page[data-mode="break"][data-view="live"] { padding-bottom: 90px; }
  .bp-work { display: block; border: 0; background: none; border-radius: 0; overflow: visible; }
  .bp-plan { display: none; }
  .bp-sum { display: flex; align-items: center; gap: 18px; width: 100%; padding: 12px 14px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .bp-sum span { display: grid; }
  .bp-sum b { font-size: 17px; font-weight: 500; }
  .bp-sum small { font-size: 12px; color: var(--muted); }
  .bp-sum .good b { color: var(--steal); }
  .bp-sum .bp-go { display: inline-flex; align-items: center; margin-left: auto; color: var(--accent); font-size: 14px; font-weight: 500; }
  .bp-sheet-head { padding: 4px 0 8px; }
  .bp-sheet-head [data-bpcopy] { display: none; }
  .bp-cols { display: none; }
  .bp-row-spot { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; }
  .bp-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; flex: 1; min-width: 0; }
  .bp-who b { flex: 1 1 100%; font-size: 15px; }
  .bp-who small { text-align: left; font-size: 12.5px; }
  .bp-who small i { display: inline; }
  .bp-tag:empty { display: none; }
  .bp-price input { width: 72px; min-height: 40px; font-size: 16px; }
  .bp-dock { display: flex; gap: 8px; position: fixed; z-index: 24; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding: 10px max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px)); background: var(--bg); border-top: 1px solid var(--line); }
  .bp-dock .btn { min-height: 46px; justify-content: center; font-size: 15px; }
  .bp-dock .btn.primary { flex: 1; }
  .bp-panel-title { display: block; margin: 0 40px 12px 0; font-size: 18px; font-weight: 600; }
  .bp-field input { font-size: 16px; }
  .bp-field { min-height: 44px; }
  .bp-option { min-height: 52px; }
  .bp-seg button { min-height: 40px; }
}
@media (max-width: 700px) { .break-picker .bk-mode { grid-column: 1 / -1; } }

/* Breaker mode: room for offers */
.bp-quick { flex: 1; min-width: 0; }
.bp-quick button { padding: 6px 6px; font-size: 12.5px; }
.bp-totals .bp-sub { color: var(--muted); font-size: 12.5px; }
.bp-totals b.bp-sub { color: var(--ink-2); font-weight: 400; }

/* Breaker mode: price spread, boosts, pairing, all columns (2026-10-29) */
.bp-range { width: 100%; margin: 4px 0 2px; accent-color: var(--accent); }
.bp-range-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.bp-field span { white-space: nowrap; }
.bp-colseg button { padding: 4px 10px; font-size: 12.5px; }
.bp-rows { overflow-x: auto; }
.bp-rows.all .bp-cols, .bp-rows.all .bp-row-spot { min-width: 1120px; grid-template-columns: minmax(180px, 1fr) 120px repeat(4, 54px) 72px 64px 96px 90px 70px 120px; }
.bp-rows.all.teams .bp-cols, .bp-rows.all.teams .bp-row-spot { min-width: 1000px; grid-template-columns: minmax(180px, 1fr) repeat(4, 54px) 72px 64px 96px 90px 70px 120px; }
.bp-who b .chip { margin-left: 4px; vertical-align: 1px; }
.bp-x { text-align: right; color: var(--muted); font-size: 13px; }
.bp-x.bp-team { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-x i { display: none; font-style: normal; }
@media (max-width: 700px) {
  .bp-colseg { order: 5; }
  .bp-rows { overflow: visible; }
  .bp-rows.all .bp-cols, .bp-rows.all .bp-row-spot { min-width: 0; }
  .bp-rows .bp-row-spot { display: flex; }
  .bp-x { text-align: left; font-size: 12.5px; }
  .bp-x i { display: inline; }
  .bp-who b { white-space: normal; }
}
/* All columns: the price stays in view while the card columns scroll */
@media (min-width: 701px) {
  .bp-rows.all .bp-price { position: sticky; right: 18px; z-index: 1; box-shadow: -14px 0 12px 4px var(--surface); }
  .bp-rows.all .bp-cols span:last-child { position: sticky; right: 18px; background: var(--surface); box-shadow: -14px 0 12px 4px var(--surface); }
}
/* Breaking: the plan's "Price by" replaces the setup's Player value switch */
.bk-page[data-mode="break"] .bk-setup .mode-field { display: none; }
/* Your cost (what the breaker paid a box) only matters when Breaking */
.bk-page:not([data-mode="break"]) .bk-mycost { display: none; }

/* Breaker mode: your wheels and serial spots (2026-10-29) */
.bp-who b { display: flex; align-items: center; gap: 8px; }
.bp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bp-name small { font-weight: 400; margin-left: 4px; }
.bp-sel { flex: none; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.bp-tag.serial { color: var(--accent); }
.bp-price { position: relative; }
.bp-price em { position: absolute; right: 0; top: 100%; font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.bp-row-spot:has(.bp-price em) { padding-bottom: 16px; }
.bp-selbar { position: sticky; top: var(--top-h, 50px); z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 18px; background: var(--surface-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bp-selbar[hidden] { display: none; }
.bp-selbar b { font-weight: 600; font-size: 13.5px; }
.bp-selbar .muted { font-size: 12.5px; }
.bp-sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; }
.bp-addwheel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12.5px; }
.bw-add { display: flex; gap: 8px; margin: 10px 0; }
.bw-add input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: inherit; }
.bw-paste { margin: 8px 0 12px; font-size: 13px; } .bw-paste summary { cursor: pointer; color: var(--ink-2); } .bw-paste .btn { margin-top: 8px; }
.bw-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.bw-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 700px) {
  .bp-sel { width: 22px; height: 22px; }
  .bp-who b { flex: 1 1 100%; }
  .bp-selbar { top: var(--top-h, 50px); margin: 0 -14px; padding: 10px 14px; }
  .bp-selbar .btn { min-height: 40px; }
  .bp-addwheel { padding: 12px 0; }
  .bw-add input { font-size: 16px; min-height: 44px; }
}

/* Breaker plan (plans.js) and the Home link to breakers.html */
.pm-breaker { border-color: var(--line-strong); }
.hero-breakers { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; }
.hero-breakers a { color: inherit; }
/* Breaker mode: Suggest wheels */
.bp-sugs { display: grid; gap: 8px; margin: 12px 0 18px; }
.bp-sug { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bp-sug b { font-weight: 600; } .bp-sug span { font-size: 13px; color: var(--ink-2); } .bp-sug small { font-size: 12.5px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .bp-sug:hover { border-color: var(--accent-line); } }
.bp-sug-h { margin: 0 0 8px; font-size: 15px; font-weight: 600; }

/* Admin page (website, admins only) */
.adm { max-width: 1120px; }
.adm .page-head { margin-bottom: 16px; }
.adm-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.adm-bar input { flex: 0 1 320px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: inherit; }
.adm-bar .muted { font-size: 13px; }
.adm-list { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.adm-row { display: grid; grid-template-columns: minmax(220px, 1fr) 140px 160px 250px 64px; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.adm-row:last-child { border-bottom: 0; }
.adm-head { padding-top: 10px; padding-bottom: 10px; background: var(--surface-2); font-size: 12px; color: var(--muted); }
.adm-head span:last-child { text-align: center; }
.adm-who { min-width: 0; }
.adm-who b { font-weight: 600; overflow-wrap: anywhere; }
.adm-who .chip { margin-left: 6px; vertical-align: 1px; }
.adm-who small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.adm-f { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.adm-f > span { display: none; }   /* the heading row names the columns on wide screens */
.adm-f select, .adm-f input[type=date] { width: 100%; min-height: 36px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: 13px var(--f-body); }
.adm-give-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; }
.adm-admin { justify-items: center; }
.adm-admin input { width: 18px; height: 18px; accent-color: var(--accent); }
.adm-note { margin-top: 12px; }
.adm-fb { display: grid; gap: 10px; }
.adm-fb-row { padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.adm-fb-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; font-size: 13px; }
.adm-fb-row p { margin: 8px 0; white-space: pre-wrap; }
@media (max-width: 960px) {
  .adm-head { display: none; }
  .adm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; align-items: end; }
  .adm-f input[type=date] { min-width: 0; max-width: 100%; }
  .adm-who, .adm-give { grid-column: 1 / -1; }
  .adm-f > span { display: block; }
  .adm-admin { display: flex; align-items: center; justify-content: flex-start; gap: 8px; grid-column: 1 / -1; color: var(--ink-2); font-size: 13px; }
  .adm-admin > span { display: inline; }
}
@media (max-width: 700px) {
  .adm-bar input { flex: 1 1 100%; font-size: 16px; min-height: 44px; }
  .adm-row { padding: 14px; }
  .adm-f select, .adm-f input[type=date] { min-height: 44px; font-size: 16px; }
  .adm-give-row .btn { min-height: 44px; }
}

/* Profile page (website, signed in) */
.pf { max-width: 760px; }
.pf-box { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.pf-row:last-child { border-bottom: 0; }
.pf-row.pf-col { flex-direction: column; align-items: stretch; gap: 12px; }
.pf-row h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.pf-row p { margin: 0; }
.pf-field { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.pf-field .seg { justify-self: start; }
.pf-field input { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); font: inherit; }
.pf-field input:focus { border-color: var(--accent-line); outline: none; }
.pf-pass { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-hint { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.pf-hint.err { color: var(--over); }
@media (max-width: 700px) {
  .pf-row { flex-direction: column; align-items: stretch; padding: 16px; }
  .pf-pass { grid-template-columns: 1fr; }
  .pf-field input { min-height: 44px; font-size: 16px; }
  .pf-row .btn { min-height: 44px; justify-content: center; }
}

/* Break builder on the website without an account */
.bk-gate { max-width: 560px; margin: 8vh auto 0; text-align: center; }
.bk-gate h1 { margin: 0 0 10px; }
.bk-gate-lead { margin: 0 auto 22px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.bk-gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
@media (max-width: 700px) { .bk-gate { margin-top: 4vh; } .bk-gate-actions .btn { flex: 1 1 100%; justify-content: center; } }