/* HoopStreamLab styles: a scoreboard at night. Navy surfaces, court-line cream for text
   and game days, hardwood for the brand, basketball orange only for things you click,
   green only for games gained by pickups, red for drops.
   Colours, fonts and radii are tokens, so change them here rather than in templates.

   Type: Big Shoulders Display, in capitals, for headlines and big numbers; Hanken
   Grotesk for everything else. Small labels stay in sentence case. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Big Shoulders Display";
  src: url("fonts/big-shoulders-display.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest */
  --bg: #0e1a2b;
  --sunk: #0a1422;
  --panel: #15253b;
  --raised: #1c2f48;
  --line: #24384f;
  --line-strong: #34506e;

  /* Text */
  --ink: #efe6d2;
  --muted: #93a3b8;
  --faint: #7a8ca3;

  /* Brand, actions and status: each colour has one job */
  --brand: #c98d52;
  --accent: #ff6b2c;
  --accent-strong: #ff8650;
  --on-accent: #1b0b02;
  --good: #46d79a;
  --on-good: #06281a;
  --warn: #ff7a7a;

  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  color: var(--ink);
  background: var(--bg);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
a { color: var(--ink); text-decoration: none; }
h1, h2, h3 { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .9; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1920px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
svg { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: var(--r-sm); z-index: 50; }
.skip:focus { left: 12px; }

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(14, 26, 43, .88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* The top bar runs edge to edge, like an app's, while the page below stays centred */
.bar { display: flex; align-items: center; gap: 32px; height: 64px; padding: 0 32px; }
.logo { display: flex; align-items: center; gap: 10px; font: 800 25px/1 var(--display); letter-spacing: .01em; }
.logo svg { width: 28px; height: 28px; }
.logo b { font-weight: 800; color: var(--brand); }
.nav { display: flex; gap: 20px; }
.nav a { white-space: nowrap; color: var(--muted); font-size: 15px; font-weight: 500; padding: 4px 0; transition: color .15s; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: 0 2px 0 var(--accent); }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 15px; }
.bar-end > a:not(.btn) { color: var(--muted); }
.bar-end > a:not(.btn):hover { color: var(--ink); }

.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 22px; height: 22px; }
.menu[open] summary { background: var(--panel); }
.menu nav { position: absolute; right: 0; top: 52px; width: 240px; padding: 8px; display: grid; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.menu nav a { padding: 11px 12px; border-radius: var(--r-sm); font-size: 15px; }
.menu nav a:not(.btn):hover, .menu nav a[aria-current="page"] { background: var(--raised); }
.menu nav .btn { margin-top: 6px; }

/* ---- Buttons: orange is for actions only ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap;
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  transition: background-color .15s, border-color .15s;
}
.btn:hover { background: var(--panel); }
.btn.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.go:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.sm { min-height: 36px; padding: 0 16px; }

/* ---- Home ---- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.court { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--brand); opacity: .16; pointer-events: none; }
.hero-top { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; padding-top: 72px; padding-bottom: 40px; }
.hero h1 { font-size: clamp(52px, 7vw, 100px); line-height: .86; text-wrap: balance; }
.lede { font-size: 19px; color: var(--muted); max-width: 32em; margin-bottom: 28px; }
.lede b { color: var(--ink); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* This week's real plan, straight from the planner */
.sample { position: relative; margin: 0 0 72px; padding: 18px 22px 16px; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.sample-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sample-title { display: block; font: 800 26px/1 var(--display); text-transform: uppercase; }
.sample-link { display: inline-block; margin-top: 8px; color: var(--accent); font-size: 14px; font-weight: 600; }
.sample-link:hover { text-decoration: underline; }
.sample .tl-spot { background: var(--sunk); }
.sample figcaption { margin-top: 12px; color: var(--muted); font-size: 13px; }

/* The toolkit: the live planner as a feature, the tools in development beside it */
.toolkit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.feature { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px; background: var(--panel); border: 1px solid var(--brand); border-radius: var(--r-lg); }
.feature h3 { font: 900 44px/.92 var(--display); text-transform: uppercase; }
.feature p { color: var(--muted); font-size: 17px; }
.feature ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.feature li { position: relative; padding-left: 22px; }
.feature li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 3px; background: var(--brand); }
.live { flex: none; white-space: nowrap; padding: 3px 12px; border: 1px solid var(--ink); border-radius: 99px; color: var(--ink); font-size: 13px; font-weight: 600; }
.soon-tools { display: grid; gap: 24px; }
.tool-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tool-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tool-list a { display: grid; gap: 2px; }
.tool-list b { font: 800 22px/1.1 var(--display); text-transform: uppercase; }
.tool-list a:hover b { color: var(--brand); }
.tool-list a span { color: var(--muted); }
.dev { flex: none; color: var(--brand); font-size: 13px; font-weight: 600; white-space: nowrap; }
.waitlist h3 { font: 800 30px/1 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; padding: 0; border: 0; }
.picks label { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.picks input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Questions: plain rows that open */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 56px; align-items: start; }
.faq-grid h2 { margin-bottom: 0; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--muted); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 18px; color: var(--muted); max-width: 46em; }
.faq a { color: var(--accent); }

.closer { padding: 72px 0; }
.closer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.closer h2 { font-size: clamp(36px, 4.4vw, 56px); }

.sec { padding: 88px 0; border-bottom: 1px solid var(--line); }
.sec h2 { font-size: clamp(40px, 4.4vw, 56px); margin-bottom: 40px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; counter-reset: step; }
.steps li { border-top: 2px solid var(--brand); padding-top: 18px; }
.steps li::before { counter-increment: step; content: counter(step); display: block; margin-bottom: 10px; font: 800 40px/1 var(--display); color: var(--brand); }
.steps h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.steps p { color: var(--muted); }

.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; }
.plan { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; }
.plan.pro { background: var(--panel); border-color: var(--brand); }
.plan h3 { font: 800 32px/1 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.plan > p { color: var(--muted); }
.price { font: 800 56px/1 var(--display); margin: 16px 0 4px; }
.price small { font: 500 16px var(--sans); color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 10px; flex: 1; }
.plan li { position: relative; padding-left: 22px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 3px; background: var(--ink); }
.plan.pro li::before { background: var(--brand); }
.note { color: var(--muted); font-size: 14px; margin-top: 20px; }
.plans.single { grid-template-columns: minmax(0, 560px); justify-content: center; }
.trial { color: var(--ink); font-weight: 600; margin-top: 6px; }
/* The home page's plan: a small preview, not the whole tool */
.sample.teaser { padding: 14px 18px 12px; }  /* the full content width, on the same gutter as the headline */
.sample.teaser .sample-title { font-size: 22px; }
.sample.teaser .stats dd { font-size: 32px; }

/* ---- Page headings ---- */
.page-head { padding: 56px 0 28px; }
.page-head h1 { font-size: clamp(52px, 6.4vw, 80px); margin-bottom: 14px; }
.page-head p { color: var(--muted); font-size: 18px; max-width: 42em; }
.page-head.compact { padding: 28px 0 18px; }
.page-head.compact h1 { font-size: clamp(40px, 4.4vw, 60px); margin-bottom: 6px; }
.page-head.compact p { font-size: 17px; }
.status { display: inline-block; margin-bottom: 18px; padding: 3px 12px; border: 1px solid var(--brand); border-radius: 99px; color: var(--brand); font-size: 13px; font-weight: 600; }

/* ---- Pages in development: what's coming, and a waitlist ---- */
.soon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 8px; }
.features { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.features li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.features b { font: 800 21px/1.2 var(--display); text-transform: uppercase; color: var(--brand); }
.features span { color: var(--muted); }
.waitlist { background: var(--panel); border-radius: var(--r-lg); padding: 32px; }
.waitlist h2 { font-size: 36px; margin-bottom: 10px; }
.waitlist > p { color: var(--muted); margin-bottom: 22px; }
.waitlist .joined { color: var(--good); margin-bottom: 0; }
.join { display: flex; gap: 10px; }
.join input { flex: 1; min-width: 0; min-height: 44px; padding: 0 18px; font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 999px; }
.join input::placeholder { color: var(--faint); }
.join input[aria-invalid="true"] { border-color: var(--warn); }
.field-error { margin-top: 10px; color: var(--warn); font-size: 14px; }
.waitlist small { display: block; margin-top: 14px; color: var(--muted); font-size: 13px; }

/* ---- Connect your league ---- */
.connect { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 8px; }
.connect-box { background: var(--panel); border-radius: var(--r-lg); padding: 32px; }
.connect-box h2 { font-size: 36px; margin-bottom: 10px; }
.connect-box > p { color: var(--muted); margin-bottom: 22px; }
.connect-box > small { display: block; margin-top: 14px; color: var(--muted); font-size: 13px; }
.connect-box .league-facts { margin-bottom: 18px; }
.team-pick { margin: 0 0 20px; padding: 0; border: 0; display: grid; gap: 6px; }
.team-pick legend { margin-bottom: 10px; font-weight: 600; }
.team-pick label { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.team-pick label:has(input:checked) { border-color: var(--accent); }
.team-pick input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.tp-name { display: grid; flex: 1; min-width: 0; }
.tp-name small { color: var(--muted); font-size: 13px; }
.tp-moves { color: var(--muted); font-size: 13px; white-space: nowrap; }
.forget { margin-top: 14px; }
.forget button { padding: 0; font: inherit; font-size: 14px; color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linked { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.linked b { color: var(--ink); }
.linked a { color: var(--accent); }
.hold-pick { position: relative; display: flex !important; align-items: center; }
.hold-pick .spot-n { z-index: 1; }
.controls .hold-pick select { width: 196px; padding-left: 34px; }
@media (max-width: 860px) { .connect { grid-template-columns: 1fr; gap: 32px; } .connect-box { padding: 24px; } }

/* ---- Footer ---- */
.site-foot { margin-top: 96px; border-top: 1px solid var(--line); padding: 40px 0 32px; }
main:has(> .closer) + .site-foot { margin-top: 0; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.foot-brand { max-width: 360px; }
.foot-brand p { margin-top: 12px; color: var(--muted); font-size: 14px; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 32px 72px; }
.foot-links { display: grid; gap: 8px; align-content: start; font-size: 14px; }
.foot-links b { font-weight: 600; margin-bottom: 2px; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--ink); }
.foot-note { margin-top: 32px; color: var(--muted); font-size: 13px; }

/* ---- Streaming planner ---- */
.page-head.compact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; padding: 28px 0 18px; }
.page-head.compact h1 { font-size: 52px; margin: 0; white-space: nowrap; }
.page-head.compact p { font-size: 17px; }

/* Every control in one short row */
.controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; padding: 12px 16px; background: var(--panel); border-radius: 14px; }
.controls label { display: grid; gap: 3px; color: var(--muted); font-size: 12px; font-weight: 500; }
.controls select, .controls input {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 9px; height: 36px; padding: 0 10px;
}
.controls select:focus-visible, .controls input:focus-visible { outline: none; border-color: var(--accent); }
.stepper { display: flex; align-items: center; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.stepper:focus-within { border-color: var(--accent); }
.stepper button { width: 30px; height: 100%; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 16px; cursor: pointer; }
.stepper button:hover { color: var(--ink); }
.controls .stepper input { width: 30px; height: 34px; padding: 0; border: 0; background: none; text-align: center; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.divider { width: 1px; align-self: stretch; margin: 0 2px; background: var(--line); }

/* "Holding in spot N": type to search the teams */
.holding { display: grid; gap: 3px; }
.holding-title { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 500; }
.holding-spots { display: flex; flex-wrap: wrap; gap: 8px; }
.combo { position: relative; }
.combo-field { position: relative; display: flex; align-items: center; }
.spot-n { position: absolute; left: 8px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--raised); color: var(--muted); font-size: 11px; font-weight: 700; pointer-events: none; }
.combo-field .team-badge { position: absolute; left: 32px; width: 20px; height: 20px; font-size: 7px; box-shadow: none; pointer-events: none; }
.controls .combo input { width: 176px; padding-left: 34px; }
.controls .combo-field .team-badge + input { padding-left: 58px; }
.controls .combo input::placeholder { color: var(--faint); }
.combo-list {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 280px; margin: 0; padding: 6px; list-style: none;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow);
}
.combo-list li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; white-space: nowrap; border-radius: 7px; color: var(--ink); font-size: 14px; cursor: pointer; }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--raised); }
.combo-list .team-badge { width: 20px; height: 20px; font-size: 7px; box-shadow: none; }
.combo-list small { margin-left: auto; color: var(--muted); font-size: 12px; }
.combo-list mark { background: none; color: var(--accent); font-weight: 700; }
.tip { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 10px; font-weight: 700; color: var(--muted); cursor: help; }
.tip::after {
  content: attr(aria-label); position: absolute; z-index: 30; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  width: 260px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line-strong);
  color: var(--ink); font-size: 13px; font-weight: 400; line-height: 1.45; text-align: left; box-shadow: var(--shadow);
  display: none;
}
.tip:hover::after, .tip:focus::after { display: block; }

/* One row: plan tabs, option pills, and the plan's numbers on the right */
.plan-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 32px; margin-top: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 24px; }
.tabs button {
  display: grid; gap: 1px; text-align: left; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--muted);
  padding: 0 0 10px; margin-bottom: -13px; background: none; border: 0; border-radius: 0;
}
.tabs button span { font-size: 12px; font-weight: 500; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.route-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
.route-tabs button {
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 4px 12px; border-radius: 99px; background: transparent; border: 1px solid var(--line);
}
.route-tabs button:hover { color: var(--ink); }
.route-tabs button[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
.stats { display: flex; gap: 30px; margin: 0 0 0 auto; }
.stats dt { color: var(--muted); font-size: 12px; }
.stats dd { margin: 0; font: 800 44px/.9 var(--display); }
.stats dd small { margin-left: 4px; font: 600 17px var(--display); color: var(--muted); }
.stats .gain dd { color: var(--good); }

/* The week as a timeline: one row per spot, one bar per pickup */
.table-scroll { overflow-x: auto; }
.timeline { --spot-w: 90px; min-width: calc(var(--spot-w) + var(--days) * 104px); padding: 4px 0 0; }
.tl-head, .tl-row { display: grid; grid-template-columns: var(--spot-w) repeat(var(--days), minmax(0, 1fr)); column-gap: 6px; align-items: stretch; }
.tl-head { padding: 8px 0 6px; }
.tl-day { text-align: center; line-height: 1.35; white-space: nowrap; }
.tl-day b { font-size: 13px; font-weight: 600; }
.tl-day small { margin-left: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-row { padding: 8px 0; }
.tl-row { border-top: 1px solid var(--line); }
.tl-spot { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; background: var(--bg); font: 800 20px/1 var(--display); text-transform: uppercase; }

.stint { position: relative; min-width: 0; display: grid; gap: 6px; padding: 8px 9px 7px; background: var(--panel); border-radius: 10px; }
.stint:not(:has(.hold)) { box-shadow: inset -3px 0 0 var(--warn); }
.stint.held { background: transparent; border: 1px dashed var(--line-strong); }
.stint-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stint-teams { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stint-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stint-games { margin-left: auto; flex: none; font-size: 12px; font-weight: 500; color: var(--muted); }
.stint.short .stint-name, .stint.short .stint-games { display: none; }
.stint.short .stint-foot { flex-direction: column; gap: 0; }
/* One segment per day held: cream for a player you already have, green for a game a
   pickup gains, an outline when there's no game */
.pips { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.pip { display: grid; place-items: center; height: 18px; border-radius: 5px; font-size: 0; overflow: hidden; }
.pip.game { background: var(--good); }
.pip.kept { background: var(--ink); }
.pip.rest { box-shadow: inset 0 0 0 1px var(--line-strong); }
.stint-foot { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.stint-foot .add { color: var(--accent); }
.stint-foot .drop { color: var(--warn); }
.stint-foot .hold, .stint-foot .keep { color: var(--muted); }
.gap { display: grid; place-items: center; min-height: 64px; font-size: 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-md); }

/* All the teams that fit a pickup: a dropdown on hover, a sheet from the bottom on phones */
.teams-pop { position: relative; min-width: 0; }
.teams-pop summary { list-style: none; cursor: pointer; border-radius: var(--r-sm); }
.teams-pop summary::-webkit-details-marker { display: none; }
.teams-pop summary .stint-name { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
/* Wide and short, above the badges with an arrow pointing at them (below if there's no
   room), every team as a chip in rows of up to seven; full names on hover */
.pop {
  position: absolute; z-index: 10; bottom: calc(100% + 12px); left: -10px; width: max-content; max-width: 620px;
  padding: 12px 14px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow);
  font-size: 13px; cursor: default;
}
.pop::after {
  content: ""; position: absolute; bottom: -7px; left: var(--arrow, 24px); width: 12px; height: 12px;
  background: var(--raised); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: rotate(45deg);
}
.teams-pop.below .pop { bottom: auto; top: calc(100% + 12px); }
.teams-pop.below .pop::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.pop p { margin: 0 0 10px; color: var(--muted); white-space: normal; }
.pop p b { color: var(--ink); font-weight: 600; }
.pop ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, auto); gap: 8px 14px; }
.pop li { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.pop li .team-badge { width: 20px; height: 20px; font-size: 7px; box-shadow: none; }
.teams-pop[open] .team-stack { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 99px; }

/* Team badges: a disc in the team's colour with its code on it */
/* Side by side, not overlapping, so no team code or count is covered */
.team-stack { display: inline-flex; flex: none; gap: 3px; }
.team-badge {
  position: relative; display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  background: var(--team); box-shadow: 0 0 0 2px var(--panel);
  font-size: 8px; font-weight: 700; letter-spacing: .02em; color: #fff;
}
.team-more { display: grid; place-items: center; height: 24px; min-width: 28px; padding: 0 6px; border-radius: 12px; background: var(--raised); box-shadow: 0 0 0 2px var(--panel); font-size: 11px; font-weight: 700; color: var(--ink); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 16px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.kept { background: var(--ink); }
.legend i.game { background: var(--good); }
.legend i.rest { box-shadow: inset 0 0 0 1px var(--line-strong); }
.legend i.drop { width: 3px; background: var(--warn); }
.footnote { margin-top: 28px; color: var(--muted); font-size: 13px; max-width: 60em; }

/* Moves, day by day */
.move-list { margin-top: 48px; }
.move-list h2 { font-size: 36px; margin-bottom: 18px; }
.move-list ol { list-style: none; margin: 0; padding: 0; }
.move-list ol > li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px; border-top: 1px solid var(--line); }
.md-day { padding: 14px 0; font: 800 23px/1 var(--display); text-transform: uppercase; }
.move-list ul { list-style: none; margin: 0; padding: 12px 0; display: grid; gap: 8px; }
.mv { display: flex; align-items: baseline; gap: 12px; color: var(--muted); }
.mv b { color: var(--ink); font-weight: 600; }
.mv-tag { flex: none; width: 52px; text-align: center; font-size: 12px; font-weight: 700; padding: 1px 0; border-radius: 99px; }
.mv.add .mv-tag { color: var(--accent); border: 1px solid var(--accent); }
.mv.drop .mv-tag { color: var(--warn); border: 1px solid var(--warn); }
.muted { color: var(--muted); }
.notice { padding: 18px 20px; background: var(--panel); border-radius: var(--r-lg); color: var(--muted); }

@media (min-width: 1000px) {
  .stream .table-scroll { overflow: visible; }  /* the timeline fits, so team lists can overflow it */
}
@media (max-width: 999px) {
  .pop, .teams-pop.below .pop { position: fixed; top: auto; left: 16px !important; right: 16px; bottom: 16px; width: auto; max-width: none; max-height: 60vh; overflow-y: auto; z-index: 40; }
  .pop::after { display: none; }
  .pop ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats { margin-left: 0; }
}

/* ---- Smaller screens ---- */
/* Injuries */
.board-bar { align-items: center; margin-bottom: 8px; }
.updated { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(239, 230, 210, .14); }
@media (prefers-reduced-motion: no-preference) { .dot { animation: pulse 2.4s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: .35; } }
.inj-sec { margin-top: 36px; }
.inj-sec h2 { font-size: 30px; margin-bottom: 14px; }
.pill { display: inline-block; padding: 2px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.pill.s-out, .pill.s-out-for-season, .pill.s-suspended { border-color: var(--warn); background: rgba(255, 122, 122, .16); color: var(--warn); }
.pill.s-doubtful { border-color: var(--warn); color: var(--warn); }
.pill.s-questionable, .pill.s-day-to-day { border-color: var(--brand); color: var(--brand); }
.to.s-out, .to.s-out-for-season, .to.s-suspended { color: var(--warn); }
.to.s-doubtful { color: var(--warn); }
.to.s-questionable, .to.s-day-to-day { color: var(--brand); }
.inj-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 0 32px; }
.calls, .changes { list-style: none; margin: 0; padding: 0; }
.calls li, .changes li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.calls li > span:not(.team-badge, .pill) { flex: 1; min-width: 0; display: grid; }
.calls small { color: var(--muted); font-size: 12px; }
.changes time { flex: none; width: 64px; color: var(--muted); font-size: 13px; }
.changes li:has(+ li.same-time) { border-bottom: 0; padding-bottom: 4px; }
.changes li.same-time { padding-top: 4px; }
.changes li.day-break { display: block; padding: 18px 0 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.changes li > span:last-child { flex: 1; min-width: 0; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* The injury report: one row a player */
.inj-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.inj-head, .inj-row { display: grid; grid-template-columns: minmax(200px, 1.7fr) 48px 128px 92px 92px 104px minmax(150px, 1.3fr) 20px; gap: 6px 16px; }
.inj-item { border-bottom: 1px solid var(--line); }
.inj-row { align-items: center; padding: 12px 0; cursor: pointer; list-style: none; }
.inj-row::-webkit-details-marker { display: none; }
.inj-row:hover .who b { color: var(--accent); }
.inj-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.chev { display: grid; place-items: center; color: var(--accent); transition: transform .15s; }
details[open] > .inj-row .chev { transform: rotate(180deg); }
.inj-more { display: grid; gap: 10px; padding: 0 0 14px; }
.inj-head { padding: 0 0 8px; border-bottom: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; color: var(--muted); }
.inj-head a { color: var(--muted); text-decoration: none; }
.inj-head a:hover { color: var(--accent); }
.inj-head a.sorted { color: var(--ink); }
.sort-mark { margin-left: 4px; color: var(--accent); }
.inj-sort { display: none; }
.inj-rows { border-top: 0; }
.since, .back { font-size: 14px; }
.back { color: var(--muted); }
.to { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 14px; min-width: 0; }
.to b { font-weight: 600; }
.to .num { color: var(--muted); }
.to small { flex-basis: 100%; color: var(--brand); font-size: 12px; }
.count { margin-left: 8px; font: 600 15px var(--sans); text-transform: none; color: var(--muted); vertical-align: middle; }
.face { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: var(--team); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; background: var(--raised); }
.face.lg { width: 64px; height: 64px; font-size: 21px; }
.who b { line-height: 1.25; }
.impact { display: inline-flex; align-items: center; gap: 7px; padding-top: 3px; font-size: 13px; font-weight: 600; color: var(--muted); }
.impact.i-high { color: var(--ink); }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.bars i { width: 4px; border-radius: 1px; background: var(--line-strong); }
.bars i:nth-child(1) { height: 5px; } .bars i:nth-child(2) { height: 8px; } .bars i:nth-child(3) { height: 12px; }
.i-low .bars i:nth-child(1), .i-medium .bars i:nth-child(-n+2), .i-high .bars i { background: currentColor; }
.state { display: grid; justify-items: start; gap: 4px; }
.state small { color: var(--muted); font-size: 12px; }
.what { font-size: 14px; color: var(--muted); }
.what time { color: var(--ink); font-weight: 600; }
.when { display: grid; justify-items: end; font-size: 13px; color: var(--muted); text-align: right; }
.when small { font-size: 12px; color: var(--faint); }
.gains { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, 1.1fr) 4fr; gap: 8px 20px; margin-top: 4px; padding: 12px 14px; background: var(--panel); border-radius: var(--r-md); }
.g-lead { font-size: 13px; font-weight: 600; }
.g-lead small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.gains ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; }
.gains li { display: flex; gap: 10px; font-size: 14px; }
.g-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.chip { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.g-starter { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; }
.g-starter .num { color: var(--muted); font-size: 13px; }
.gains li > span:last-child { display: grid; min-width: 0; }
.gains li small { color: var(--muted); font-size: 12px; }
.g-rank { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--raised); font-size: 12px; font-weight: 700; }
.who > span:last-child { display: grid; }
.who small { color: var(--muted); font-size: 12px; }

/* Buy low, sell high */
.window-bar { align-items: center; margin-bottom: 8px; }
.w-label { color: var(--muted); font-size: 14px; }
.seg { display: inline-flex; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; }
.seg a { padding: 5px 14px; border-radius: 99px; color: var(--muted); font-size: 14px; font-weight: 600; }
.seg a[aria-current] { background: var(--raised); color: var(--ink); }
.seg .off { padding: 5px 14px; color: var(--faint); font-size: 14px; font-weight: 600; opacity: .6; cursor: not-allowed; }
.capped .over:not(.in) { display: none; }
.view-more { display: block; width: 100%; margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.view-more:hover { border-color: var(--accent); }
.w-note { margin-left: auto; color: var(--muted); font-size: 13px; }
.notice.slim { margin-top: 16px; padding: 12px 16px; font-size: 14px; }
.trend-cols { display: grid; gap: 40px; margin-top: 28px; }
.trend-cols h2 { font-size: 34px; }
.t-lede { color: var(--muted); margin: 4px 0 10px; }
.trends { list-style: none; margin: 0; padding: 0; }
.trend { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.4fr) 120px minmax(240px, 1.6fr); align-items: center; gap: 12px 28px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.t-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.t-who > span:last-child { display: grid; }
.t-who small { color: var(--muted); font-size: 12px; }
.t-gap { display: grid; justify-items: end; }
.t-gap .num { font: 800 30px/1 var(--display); }
.t-gap small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.t-why { font-size: 14px; color: var(--muted); }
.bell { position: relative; height: 40px; margin: 0 28px; }
.b-line { position: absolute; top: 12px; height: 2px; background: var(--ink); opacity: .55; }
.b-dot, .b-usual { position: absolute; top: 12px; }
.b-dot::before { content: ""; position: absolute; left: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.b-dot.actual::before { border: 2px solid var(--ink); background: var(--bg); }
.b-dot.fair::before { background: var(--ink); }
.b-usual::before { content: ""; position: absolute; left: -1px; top: -9px; width: 2px; height: 20px; background: var(--brand); }
.bell small { position: absolute; top: 10px; transform: translateX(-50%); white-space: nowrap; color: var(--muted); font-size: 11px; }
.b-usual small { top: -24px; color: var(--brand); }
/* Labels point away from each other, so short lines don't overlap them */
.b-dot.low small { transform: translateX(calc(-100% + 8px)); }
.b-dot.high small { transform: translateX(-8px); }
.side-switch { display: none; }
.t-name { font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.t-name:hover { color: var(--accent); text-decoration-color: currentColor; }

/* A player's page */
.crumb { padding-top: 24px; font-size: 14px; }
.p-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 32px; padding: 14px 18px; background: var(--panel); border-radius: var(--r-md); font-size: 14px; }
.p-links span { font-weight: 600; }
.p-links a { color: var(--accent); }
.explain { margin-top: 40px; padding: 24px 28px; background: var(--panel); border-radius: var(--r-lg); max-width: 60em; }
.explain h2 { font-size: 30px; margin-bottom: 12px; }
.explain ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); }
.explain b { color: var(--ink); }
.crumb a { color: var(--accent); }
.p-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 0 22px; }
.p-head .team-badge { width: 52px; height: 52px; font-size: 15px; }
.p-head h1 { font-size: clamp(40px, 4.4vw, 60px); }
.p-head p { color: var(--muted); }
.p-injury { display: grid; gap: 4px; margin-left: auto; justify-items: end; }
.p-injury small { color: var(--muted); font-size: 13px; }
.verdict { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.6fr); gap: 16px 40px; align-items: center; margin-top: 16px; padding: 24px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.verdict h2 { font-size: 40px; }
.v-gap { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.v-gap .num { font: 800 44px/1 var(--display); }
.v-gap small { color: var(--muted); font-size: 14px; }
.v-why { color: var(--muted); }
.v-bell { grid-column: 1 / -1; padding-top: 26px; }
.v-bell .bell { margin: 0 60px; }
.p-sec { margin-top: 44px; }
.p-sec h2 { font-size: 30px; margin-bottom: 14px; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.charts .gc-note { grid-column: 1 / -1; }
.gc-note { margin-top: 10px; color: var(--muted); font-size: 13px; }
.games-chart { margin: 0; }
.games-chart figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.games-chart figcaption small { color: var(--brand); font-size: 13px; }
.gc-plot { position: relative; height: 180px; margin-left: 26px; border-bottom: 1px solid var(--line-strong); }
.gc-grid span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.gc-grid small { position: absolute; right: calc(100% + 6px); top: -9px; color: var(--faint); font-size: 11px; }
.gc-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; list-style: none; margin: 0; padding: 0; }
.gc-bars li { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.gc-bars li > span:first-child { width: 100%; max-width: 14px; border-radius: 4px 4px 0 0; background: var(--muted); opacity: .45; }
.gc-bars li.recent > span:first-child { background: var(--ink); opacity: 1; }
.gc-bars li:hover > span:first-child { opacity: .8; }
.gc-ref { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--brand); pointer-events: none; }
.gc-axis { display: flex; justify-content: space-between; margin: 6px 0 0 26px; color: var(--faint); font-size: 12px; }
.boosts { list-style: none; margin: 0; padding: 0; }
.boosts li { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 2px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.boosts li > span:first-child { display: flex; gap: 10px; align-items: center; }
.boosts small { grid-column: 2; color: var(--muted); font-size: 13px; }
.splits, .log { border-collapse: collapse; font-size: 14px; }
.splits { min-width: 520px; }
.log { width: 100%; min-width: 760px; }
.splits th, .splits td, .log th, .log td { padding: 8px 18px 8px 0; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.splits th:first-child, .log th:first-child, .log .opp { text-align: left; }
.splits thead th, .log thead th { color: var(--muted); font-size: 12px; font-weight: 500; }
.splits tbody th, .log tbody th { font-weight: 400; }
.splits .total th, .splits .total td { font-weight: 700; border-bottom: 0; }
.log .dnp { color: var(--muted); text-align: left; }
.splits .group th, .log .group th { padding-top: 18px; color: var(--muted); font-size: 13px; font-weight: 600; text-align: left; }
.splits .drive th:first-child { box-shadow: inset 3px 0 var(--brand); padding-left: 12px; }
.splits .drive td { color: var(--muted); }
.splits .drive td:nth-child(2) { color: var(--ink); font-weight: 700; }

/* The tool names are long, so the menu takes over well before phone widths */
@media (max-width: 1380px) {
  .bar-end > .opt { display: none; }
  .bar { gap: 24px; }
  .nav { gap: 16px; }
  .nav a { font-size: 14px; }
}
@media (max-width: 1180px) {
  .nav, .bar-end { display: none; }
  .menu { display: block; }
}
@media (max-width: 1080px) {
  .hero-top { grid-template-columns: minmax(0, 1fr); padding-top: 48px; }
  .toolkit, .faq-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .nav, .bar-end { display: none; }
  .menu { display: block; }
  .soon, .plans { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .side-switch { display: flex; gap: 4px; margin-top: 20px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; }
  .side-switch button { flex: 1; padding: 8px 0; border: 0; border-radius: 99px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; }
  .side-switch button[aria-selected="true"] { background: var(--raised); color: var(--ink); }
  .side-switch .num { margin-left: 4px; color: var(--muted); }
  .trend-cols { margin-top: 20px; }
  .trend-cols[data-show="buy"] .side-sell, .trend-cols[data-show="sell"] .side-buy { display: none; }
  .trend { grid-template-columns: 1fr auto; padding: 16px; margin-bottom: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .trend { grid-template-areas: "who gap" "bell bell" "why why"; }
  .t-who { grid-area: who; } .t-gap { grid-area: gap; } .bell { grid-area: bell; margin: 22px 28px 4px; } .t-why { grid-area: why; }
  .w-note { margin-left: 0; }
  .verdict { grid-template-columns: 1fr; padding: 20px; }
  .v-bell .bell { margin: 0 28px; }
  .charts { grid-template-columns: 1fr; }
  .boosts li { grid-template-columns: 1fr; }
  .boosts small { grid-column: 1; }
  .p-injury { margin-left: 0; justify-items: start; }
  .splits { width: 100%; min-width: 0; font-size: 13px; }
  .splits th, .splits td { padding-right: 10px; }
  .splits thead th { white-space: normal; vertical-align: bottom; }
  .log { min-width: 0; }
  .log .wide { display: none; }
  /* Tonight's calls first on phones: they matter most before lineups lock */
  #injury-board { display: flex; flex-direction: column; }
  .inj-cols { display: contents; }
  .sec-tonight { order: 1; } .sec-report { order: 2; } .sec-changes { order: 3; }
  .updated { margin-left: 0; }
  .inj-head { display: none; }
  .inj-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
  .sort-chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--accent); text-decoration: none; }
  .sort-chip.sorted { border-color: var(--accent); }
  .sort-chip .sort-mark { display: none; }
  .inj-rows { border-top: 1px solid var(--line); }
  .inj-row { grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "who state chev" "to impact ." "since back ."; align-items: center; gap: 4px 12px; }
  .inj-row .state::before, .inj-row .impact::before { display: none !important; }
  .inj-row .to::before { display: inline !important; content: "Minutes to "; margin: 0; }
  .inj-row .state, .inj-row .impact { justify-self: end; text-align: right; }
  .inj-row .since, .inj-row .back { display: none; }
  details[open] > .inj-row .since, details[open] > .inj-row .back { display: block; margin-top: 6px; }
  .inj-row .who { grid-area: who; } .inj-row .tm { display: none; } .inj-row .state { grid-area: state; } .impact { grid-area: impact; } .since { grid-area: since; } .back { grid-area: back; } .to { grid-area: to; } .chev { grid-area: chev; align-self: center; }
  .inj-row .to { display: block; } .inj-row .to small { display: inline; margin-left: 4px; }
  .inj-row [data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--faint); font-size: 12px; font-weight: 500; }
  .inj-row .state { display: block; } .inj-row .state small { display: block; margin-top: 4px; }
  .inj-row .impact { display: block; padding-top: 0; } .inj-row .impact .bars { display: inline-flex; margin-right: 6px; }
  .gains { grid-template-columns: 1fr; padding: 12px; }
  .gains ol { grid-template-columns: 1fr; }
  .g-starter { grid-column: 1; }
  .price small { display: block; margin-top: 8px; }
  .wrap, .bar { padding-left: 16px; padding-right: 16px; }
  .sec { padding: 56px 0; }
  .page-head { padding-top: 36px; }
  .page-head.compact h1 { white-space: normal; font-size: 44px; line-height: .95; }
  .sample { padding: 22px 20px 20px; margin-bottom: 48px; }
  .feature { padding: 24px; }
  .feature h3 { font-size: 36px; }
  .tool-list li { flex-direction: column; gap: 4px; }
  .page-head.compact h1 { font-size: 44px; }
  .divider { display: none; }
  .holding { width: 100%; }
  .holding-spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controls .combo input { width: 100%; font-size: 13px; }
  .hold-pick { min-width: 0; }
  .controls .hold-pick select { width: 100%; min-width: 0; font-size: 13px; }
  .tip::after { left: 0; transform: none; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; width: 100%; }
  .stats dd { font-size: 40px; }
  .tl-day small { display: block; margin: 0; }
  /* The home example: three stats in a row, and two spots so the week stays readable */
  .sample .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sample .stats dd { font-size: 32px; }
  .sample .tl-row:nth-child(n+4) { display: none; }
  /* The whole week fits: narrow day columns, pips only, details in the moves list */
  .timeline { --spot-w: 30px; min-width: 0; }
  .tl-head, .tl-row { column-gap: 3px; }
  .tl-day b { font-size: 12px; }
  .tl-day small { font-size: 10.5px; }
  .tl-spot { font-size: 17px; }
  .tl-spot b { display: none; }
  .stint { padding: 5px 4px 5px; gap: 5px; border-radius: 8px; }
  .stint:not(.held) { box-shadow: inset 2px 0 0 var(--accent); }
  .stint:not(.held):not(:has(.hold)) { box-shadow: inset 2px 0 0 var(--accent), inset -3px 0 0 var(--warn); }
  .stint.held:not(:has(.hold)) { box-shadow: inset -3px 0 0 var(--warn); }
  .stint-name, .stint-games, .stint-foot { display: none; }
  .team-stack > :nth-child(n+2) { display: none; }
  .team-badge { width: 20px; height: 20px; font-size: 7px; }
  .pips { gap: 3px; }
  .pip { height: 16px; border-radius: 4px; }
  .gap { min-height: 48px; font-size: 10px; }
  .move-list ol > li { grid-template-columns: 76px minmax(0, 1fr); }
  .md-day { font-size: 19px; }
  .features li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .join { flex-direction: column; }
  .waitlist, .plan { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* A pickup that any of many teams would do: the count, and the teams on a tap */
.many-teams { display: inline; }
.many-teams summary { display: inline; list-style: none; cursor: pointer; }
.many-teams summary::-webkit-details-marker { display: none; }
.many-teams summary u { text-decoration-color: var(--muted); text-underline-offset: 3px; }
.many-teams summary:hover u { text-decoration-color: var(--accent); }
.many-teams .team-codes { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }

/* Terms and privacy */
.legal { max-width: 46em; }
.legal h2 { margin: 36px 0 10px; font-size: 26px; }
.legal p, .legal li { color: var(--muted); }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.legal .legal-date { margin: 0 0 16px; font-size: 14px; }

/* Phones: the day columns are too narrow for the game counts */
@media (max-width: 600px) {
  .tl-day small { display: none; }
}