/* FIRST-style theme: white surfaces, Roboto, FIRST blue and FTC orange. */
:root {
  --on-accent: #fff; /* text on a solid accent fill */
  --stage-glow: #10203a; /* deep navy behind the video play button, fading out to the page */
  --sorted-tint: color-mix(in srgb, var(--accent) 12%, transparent); /* the sorted column's strip */
  --page: #ffffff;
  --cyan: #0a9bd7; /* the block colour behind FIRST's hero media */
  --surface: #ffffff;
  --surface-2: #f6f6f6;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-border: #e2e2e2;
  --text: #231f20;
  --muted: #4f4c4d;
  --faint: #707070; /* 4.9:1 on white */
  --line: #e8e8e8;
  --hover: #f4f7fb;
  --accent: #0066b3; /* FIRST blue */
  --accent-soft: rgba(0, 102, 179, 0.09);
  --orange: #f57e25; /* FIRST Tech Challenge orange */
  --red: #ed1c24;
  --blue: #0066b3;
  --red-soft: rgba(237, 28, 36, 0.08);
  --blue-soft: rgba(0, 102, 179, 0.08);
  --good: #1e8a3e;
  --bad: #d4202a;
  --dot: #0066b3;
  --dot-off: #dfe6ee;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --pop-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  --radius: 8px;
  --zebra: rgba(0, 0, 0, 0.012); /* every other table row: barely there */
  --band: rgba(0, 0, 0, 0.028); /* alternate event bands in charts */
  /* side margin: grows gently with the window (5%), 48px to 120px; no hard content cap,
     which left wide empty bands beside full-width rows on big screens */
  --gutter: clamp(48px, 5vw, 120px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #121212;
  --cyan: #0a7fb3;
    --cyan: #0a7fb3;
    --surface: #1c1c1c;
    --surface-2: #232323;
    --glass: #1c1c1c;
    --glass-strong: #242424;
    --glass-border: #2e2e2e;
    --text: #ececec;
    --muted: #a8a5a6;
    --faint: #75726f;
    --line: #2c2c2c;
    --hover: #222831;
    --accent: #4da3ea;
    --accent-soft: rgba(77, 163, 234, 0.14);
    --orange: #f58a3a;
    --red: #ff5a5f;
    --blue: #4da3ea;
    --red-soft: rgba(255, 90, 95, 0.12);
    --blue-soft: rgba(77, 163, 234, 0.12);
    --good: #4cc276;
    --bad: #ff6b6b;
    --dot: #4da3ea;
    --dot-off: #2f3a46;
    --shadow: none;
    --zebra: rgba(255, 255, 255, 0.014);
    --band: rgba(255, 255, 255, 0.035);
    --pop-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #121212;
  --surface: #1c1c1c;
  --surface-2: #232323;
  --glass: #1c1c1c;
  --glass-strong: #242424;
  --glass-border: #2e2e2e;
  --text: #ececec;
  --muted: #a8a5a6;
  --faint: #75726f;
  --line: #2c2c2c;
  --hover: #222831;
  --accent: #4da3ea;
  --accent-soft: rgba(77, 163, 234, 0.14);
  --orange: #f58a3a;
  --red: #ff5a5f;
  --blue: #4da3ea;
  --red-soft: rgba(255, 90, 95, 0.12);
  --blue-soft: rgba(77, 163, 234, 0.12);
  --good: #4cc276;
  --bad: #ff6b6b;
  --dot: #4da3ea;
  --dot-off: #2f3a46;
  --shadow: none;
  --zebra: rgba(255, 255, 255, 0.014);
  --band: rgba(255, 255, 255, 0.035);
  --pop-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* Roboto, self-hosted: one Latin variable file covers every weight we use (400-900),
   so 550/650/750 render true instead of being faked. Rename the file if it ever changes:
   the server caches /fonts/ for a year. */
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/roboto-latin-var.woff2) format("woff2");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; /* footer stays at the bottom on short pages */ color: var(--text); background: var(--page);
  font: 14.5px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
td, .num, .stat b, .tile b { font-variant-numeric: tabular-nums; }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }

/* ---------- surfaces ---------- */
.glass {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}

/* Content sheets span the full window: frosted, no side borders or rounding. */
/* Sections: white, separated by thin rules and space. */
.card {
  background: var(--surface);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
.card-pad, .card-head, .toolbar, .ev-head, #live-events .hl-row { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
.card td:first-child, .card th:first-child { padding-left: var(--gutter); }
.card td:last-child, .card th:last-child { padding-right: var(--gutter); }
.grid { gap: 0; }
.grid.cols-2 > .card + .card { border-left: 1px solid var(--glass-border); }
.grid.cols-2:has(> .card + .card) { gap: 0; } /* side-by-side cards share one rule, no gutter (the generic .grid gap below is 14px) */
.page-pad { padding: 0 32px; }
.tiles.section, .row.section { padding: 0 var(--gutter); }
.more { border-radius: 0; }

/* ---------- header: dark utility strip + white nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 8px; padding: 0 var(--gutter); height: 84px; }
/* the links, search and season picker sit out toward the right edge */
@media (min-width: 901px) { .nav-inner { padding-right: calc(var(--gutter) / 2); } }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; letter-spacing: -0.02em; white-space: nowrap; margin-right: auto; }
.logo i { font-style: italic; font-weight: 900; }
.logo svg { display: block; }
.nav-links { display: flex; gap: 6px; margin-right: 16px; }
.nav-links a { padding: 8px 14px; color: var(--text); font-weight: 500; font-size: 17px; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-side { display: flex; gap: 8px; align-items: center; }
/* season picker: button + popover list of season links */
.season-picker { position: relative; margin-left: 4px; }
.season-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border: 2px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.season-btn:hover { border-color: var(--muted); }
.season-btn .chev { color: var(--muted); transition: transform .15s; }
.season-btn[aria-expanded="true"] { border-color: var(--accent); }
.season-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.season-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.season-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 290px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--pop-shadow); }
.season-menu[hidden] { display: none; }
/* one row per season: check · years · "Latest" tag · game name, right-aligned */
.season-menu a { display: grid; grid-template-columns: 14px auto auto 1fr; align-items: center; column-gap: 8px; min-height: 38px; padding: 6px 12px 6px 8px; border-radius: 6px; color: var(--text); }
.season-menu a::before { content: ""; width: 4px; height: 9px; margin: -3px 0 0 4px; border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.season-menu a b { grid-column: 2; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.season-menu .now { grid-column: 3; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: color-mix(in srgb, var(--accent) 75%, var(--text)); background: var(--accent-soft); padding: 2px 6px; border-radius: 4px; }
.season-menu .game { grid-column: 4; justify-self: end; font-size: 11px; color: var(--muted); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.season-menu a:hover { background: var(--hover); color: var(--text); }
.season-menu a[aria-current] { background: var(--accent-soft); }
.season-menu a[aria-current] b { color: var(--accent); }
.season-menu a[aria-current]::before { border-color: var(--accent); }
.season-menu a:focus { outline: none; }
.season-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#theme { background: none; border: 0; color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 6px; font-weight: 700; font-size: 16px; border: 2px solid var(--text); white-space: nowrap; }
.btn-solid { background: var(--text); color: var(--page); }
.btn-solid:hover { color: var(--page); opacity: .88; }
.btn-outline { background: transparent; color: var(--text); }
.btn-outline:hover { background: var(--text); color: var(--page); }
.chip-btn, select.chip-btn {
  border-radius: var(--radius); padding: 7px 12px; font-weight: 500; font-size: 13.5px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
select.chip-btn { appearance: none; padding-right: 28px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.icon-btn { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; cursor: pointer; }
input, select, button { font: inherit; color: var(--text); }
input, select {
  background: var(--surface); border: 1px solid #cfcfcf; border-radius: var(--radius); padding: 8px 12px;
}
:root[data-theme="dark"] input, :root[data-theme="dark"] select { border-color: var(--line); }
button { cursor: pointer; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; }

/* ---------- search ---------- */
.search { position: relative; }
.search input { width: 260px; padding: 10px 14px 10px 38px; border: 2px solid var(--text); border-radius: 6px; font-weight: 500; font-size: 15px; background: var(--surface); }
.search svg { left: 14px !important; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 340px; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden; display: none; z-index: 30;
}
.search-results.open { display: block; }
.search-results a { display: flex; gap: 10px; align-items: baseline; padding: 9px 14px; }
.search-results a.sel, .search-results a:hover { background: var(--hover); color: var(--text); }
.search-results .kind { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; margin-left: auto; }

/* ---------- layout ---------- */
main { padding: 16px 0 48px; flex: 1 0 auto; }
.grid { display: grid; gap: 14px; }
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card-pad { padding: 18px 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.section { margin-top: 16px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.toolbar input { flex: 1; min-width: 180px; }
.toolbar .check { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.toolbar .check input { flex: none; min-width: 0; margin: 0; accent-color: var(--accent); }

.stat { padding: 14px 18px; }
.stat .label { font-size: 12px; color: var(--muted); font-weight: 550; }
.stat b { display: block; font-size: 24px; font-weight: 750; letter-spacing: -0.02em; margin-top: 2px; }
.stat .sub { font-size: 12px; color: var(--faint); }


.mobile-only { display: none; }
.hero-search input { width: 100%; font-size: 16px; padding: 12px 14px 12px 40px; }
/* ---------- home hero (FIRST-style: text left, card over a cyan block right) ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding: 64px 0 72px var(--gutter); margin-top: -16px; overflow: hidden; }
.hero-title { font-size: clamp(40px, 5.6vw, 76px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.06; margin: 14px 0 22px; }
.hero-sub { color: var(--muted); font-size: 20px; line-height: 1.6; max-width: 580px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 36px; }
.hero-stats b { display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.hero-stats span { font-size: 14px; color: var(--muted); }
.hero-media { position: relative; padding: 56px 0 56px 0; }
.hero-media::before { content: ""; position: absolute; top: 0; bottom: 0; left: 14%; right: 0; background: var(--cyan); border-radius: 18px 0 0 18px; }
.feature { position: relative; background: var(--surface); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.22); overflow: hidden; margin-right: var(--gutter); }
.feature-head { background: #231f20; color: #fff; padding: 14px 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.feature-head b { font-size: 15px; }
.feature-head span { font-size: 13px; opacity: .7; }
.feature-body { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; padding: 22px; align-items: center; }
.feature-side { display: flex; flex-direction: column; gap: 6px; }
.feature-side.blue { text-align: right; }
.feature-side a { font-weight: 700; font-size: 20px; }
.feature-side.red a { color: var(--red); }
.feature-side.blue a { color: var(--blue); }
.feature-side small { color: var(--muted); font-size: 12.5px; }
.feature-score { text-align: center; font-size: 40px; font-weight: 900; letter-spacing: -0.03em; white-space: nowrap; }
.feature-foot { padding: 0 22px 22px; }
.feature-foot .wp { display: flex; }
.feature-foot .wp-track { flex: 1; height: 12px; border-radius: 6px; }
.feature-foot .wp-label { font-size: 15px; }
.feature-foot p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.hero-below { padding: 0; }
.section-title { padding: 40px var(--gutter) 14px; }
.section-title h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 8px; }

.banner { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.banner a { color: var(--accent); font-weight: 600; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-weight: 650; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover, th.sorted { color: var(--accent); }
th.sorted::after { content: " ↓"; }
th.sorted.asc::after { content: " ↑"; }
td { padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: var(--zebra); }
tbody tr:hover td { background: var(--hover); }
/* the hovered row's team / event name lights up, since that's the link */
tbody tr:hover .team-cell .n, tbody tr:hover .team-cell .nm,
tbody tr:hover .ev-cell .n { color: var(--accent); }
tbody tr:hover .team-cell .nm, tbody tr:hover .ev-cell .n { text-decoration: underline; text-underline-offset: 3px; }
/* numbers sit centred under their headings */
td.r, th.r { text-align: center; }

td.c, th.c { text-align: center; }
.team-cell { display: flex; gap: 10px; align-items: baseline; }
/* team number: just bigger and bolder, tabular digits so a column of numbers lines up */
.team-cell .n { flex: none; min-width: 56px; font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.team-cell .nm { color: var(--text); white-space: normal; overflow-wrap: anywhere; } /* one huge word in a team name can't widen a phone table */
.ev-cell { display: flex; flex-direction: column; line-height: 1.3; }
.ev-cell .n { font-weight: 650; white-space: normal; min-width: 200px; }
.ev-cell .nm { white-space: normal; }
.ev-cell .nm { font-size: 12px; color: var(--muted); }

/* EPA chip: black for the top 1%, then FIRST blue fading down the distribution */
.epa { display: inline-block; min-width: 62px; text-align: center; font-weight: 650; padding: 3px 8px; border-radius: 6px; }
.epa.e99 { color: var(--page); background: var(--text); }
.epa.e90 { color: #fff; background: #0066b3; }
.epa.e75 { color: #00487e; background: #cfe3f4; }
.epa.e50 { color: var(--text); background: rgba(0, 102, 179, 0.07); }
.epa.e25 { color: var(--muted); background: transparent; }
:root[data-theme="dark"] .epa.e75 { color: #d6e9fa; background: rgba(77, 163, 234, 0.3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .epa.e75 { color: #d6e9fa; background: rgba(77, 163, 234, 0.3); } }
.trend-up { color: var(--good); }
.trend-down { color: var(--bad); }

/* dot meter */
.dots { display: inline-flex; gap: 2px; vertical-align: middle; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot-off); }
.dots i.on { background: var(--dot); }
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; }
.meter { display: grid; grid-template-columns: 110px 1fr 54px; align-items: center; gap: 10px; font-size: 12px; }
.meter .k { color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.meter .v { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }

/* rank tiles */
.tiles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tile {
  min-width: 120px; padding: 12px 16px; border-radius: 8px; text-align: center; color: #fff;
  background: var(--cyan);
}
.tile b { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; }
.tile .k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tile .s { font-size: 10.5px; opacity: .85; }

/* segmented control */
.seg { display: inline-flex; gap: 4px; border: 0; background: none; border-bottom: 1px solid var(--line); border-radius: 0; }
.seg a { padding: 8px 14px; font-weight: 500; font-size: 14.5px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.seg a:hover { color: var(--text); }
.seg a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- matches ---------- */
.mt td { padding: 7px 10px; }
.mt .lvl { font-weight: 650; color: var(--muted); }
.tn { display: inline-block; min-width: 46px; text-align: center; font-weight: 600; }
.tn.red { color: var(--red); }
.tn.blue { color: var(--blue); }
.tn.me { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 800; }
.tn:hover { filter: brightness(.8); }
.pscore { color: var(--muted); font-variant-numeric: tabular-nums; }
.final { font-variant-numeric: tabular-nums; font-weight: 650; }
.final .w { color: var(--good); font-weight: 800; font-size: 15px; }
.final .l { color: var(--muted); }
.rpd { display: inline-flex; gap: 2px; vertical-align: middle; }
.rpd i { display: inline-flex; opacity: .22; }
.rpd i.on { opacity: 1; }
.rpd svg { display: block; }
.rpd.red { color: var(--red); }
.rpd.blue { color: var(--blue); }
.wp { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.wp-track { position: relative; width: 72px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--blue); }
.wp-red { position: absolute; inset: 0 auto 0 0; background: var(--red); }
.wp-label { min-width: 34px; text-align: right; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.wp-label.red { color: var(--red); }
.wp-label.blue { color: var(--blue); }
.mark { font-weight: 800; }
.mark.ok { color: var(--good); }
.mark.no { color: var(--bad); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650;
  padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}
.pill.live { background: rgba(35, 130, 76, .14); color: var(--good); }
.pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* event card on team page */
.ev-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.ev-title h2 { margin: 0; }
.ev-award { font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--line); color: var(--text); white-space: nowrap; }

.ev-head { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px 10px; flex-wrap: wrap; }
.ev-box { display: grid; grid-template-columns: repeat(4, auto); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--glass-strong); }
.ev-box div { padding: 6px 14px; text-align: center; border-right: 1px solid var(--line); }
.ev-box div:last-child { border-right: 0; }
.ev-box .k { font-size: 10.5px; color: var(--muted); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.ev-box b { display: block; font-size: 16px; }

/* ---------- team / event header ---------- */
.page-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.kicker { font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.team-num { color: var(--accent); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; }
.big-epa { text-align: right; }
.big-epa b { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.big-epa .label { font-size: 12px; color: var(--muted); }

.tabs { display: flex; margin: 20px var(--gutter) 12px; }

/* ---------- charts ---------- */
.chart { position: relative; width: 100%; margin-top: 10px; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .tip {
  position: absolute; pointer-events: none; background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: 6px 10px; font-size: 12px; box-shadow: var(--shadow); white-space: nowrap; display: none; z-index: 5;
}
.chart text { fill: var(--faint); font-size: 11px; font-family: inherit; }
.chart .grid-line { stroke: var(--line); }
.series-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.chart .axis-title { fill: var(--muted); font-size: 12px; font-weight: 600; }
/* event pick list: one stacked auto / teleop / endgame bar per team */
.pick-list { display: grid; gap: 2px; margin-top: 14px; }
.pl-row { display: grid; grid-template-columns: 28px minmax(140px, 260px) 1fr 56px; align-items: center; gap: 12px; padding: 5px 8px; border-radius: 8px; color: inherit; }
.pl-row:hover { background: var(--surface-2); }
.pl-rank { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.pl-team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.pl-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: var(--line); }
.pl-bar i, .pl-legend i { display: block; height: 100%; }
.pl-epa { text-align: right; font-variant-numeric: tabular-nums; }
.pl-legend { display: flex; gap: 14px; color: var(--muted); }
.pl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pl-legend i { width: 10px; height: 10px; border-radius: 3px; }
.pick-list .auto, .pl-legend .auto { background: #f59e0b; }
.pick-list .teleop, .pl-legend .teleop { background: var(--accent); }
.pick-list .endgame, .pl-legend .endgame { background: #10b981; }
/* phones: the bar sits under the name instead of beside it, so names get the row's width ("Thomas Jefferson …" rather than "Thomas Je…") */
@media (max-width: 640px) {
  .pl-row { grid-template-columns: 22px minmax(0, 1fr) 48px; grid-template-areas: "rank team epa" "rank bar epa"; gap: 4px 8px; padding: 6px 8px; }
  .pl-rank { grid-area: rank; } .pl-team { grid-area: team; } .pl-bar { grid-area: bar; height: 8px; } .pl-epa { grid-area: epa; }
}
.col-pick { position: relative; }
.col-pick summary { list-style: none; cursor: pointer; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--glass-strong); }
.col-pick summary::-webkit-details-marker { display: none; }
.col-pick > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: 320px; max-width: calc(100vw - 32px); padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--pop-shadow); }
/* column toggles: an even grid of equal buttons; tinted with a check = shown, plain = hidden */
.col-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--line); background: transparent; color: var(--muted); transition: background .12s, color .12s, border-color .12s; }
.col-btn::after { content: ""; width: 14px; flex: none; text-align: right; }
.col-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--text); }
.col-btn[aria-pressed="true"]::after { content: "✓"; color: var(--accent); }
.col-btn:hover { border-color: var(--accent); }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.chart-pick { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.chart-pick a { padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); }
.chart-pick a.active { background: var(--accent); color: #fff; }
.vs-form { display: flex; gap: 6px; }
.vs-form input { width: 130px; }
#chart-note { margin: 10px 0 6px; }
.series-toggle button { font-size: 12px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-strong); }
.series-toggle button.off { opacity: 0.4; }
.series-toggle i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.loading { padding: 80px 0; text-align: center; color: var(--faint); font-weight: 500; }
.empty { padding: 30px; text-align: center; color: var(--muted); }
.more { display: block; width: 100%; padding: 12px var(--gutter); text-align: left; border: 0; border-top: 1px solid var(--line); color: var(--accent); font-weight: 650; background: transparent; border-radius: 0 0 var(--radius) var(--radius); }
.more:hover { background: var(--hover); }
.prose { max-width: 740px; }
.prose p { color: var(--muted); }
.link { color: var(--accent); font-weight: 600; }
footer { padding: 24px var(--gutter) 32px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
footer a { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-right: var(--gutter); }
  .hero-media::before { left: 8%; border-radius: 18px; }
  .nav-search input { width: 200px; }
}
@media (max-width: 900px) {
  .mobile-only { display: block; margin-bottom: 18px; }
  /* header wraps: logo + links on top, search + season + theme below */
  .nav-inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
  .nav-search { display: block !important; order: 10; flex: 1 1 100%; margin-left: 0; }
  .nav-search input { width: 100%; }
  .hero-search.mobile-only { display: none; }
  .grid.cols-2 > .card + .card { border-left: 0; }
  .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; }
  .cols-2 { grid-template-columns: 1fr; }
  .meters { grid-template-columns: 1fr; }
  .nav-search { display: none; }
}
@media (max-width: 640px) {
  .card-pad, .card-head, .toolbar, .ev-head, #live-events .hl-row { padding-left: 16px !important; padding-right: 16px !important; }
  /* five tabs do not fit a phone: the strip scrolls sideways under the screen edges instead of wrapping or
     widening the page. The baseline is an inset shadow so the tabs (3px underline, no negative margin) never
     overflow the strip vertically, which would make a vertical swipe on it scroll the strip instead of the page. */
  .tabs { margin: 12px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { padding: 8px 10px; margin-bottom: 0; white-space: nowrap; }
  footer { padding: 18px 16px 28px; }
  .card td:first-child, .card th:first-child { padding-left: 16px; }
  .card td:last-child, .card th:last-child { padding-right: 16px; }
  .tiles.section, .row.section { padding-left: 16px; padding-right: 16px; }
  .hero-inner { padding: 9vh 16px 0; }
  .grid.cols-2 > .card + .card { border-left: 0; }
  .nav-inner { padding: 8px 16px; gap: 4px; height: auto; }
  .season-picker { margin-left: 2px; }
  .season-btn { height: 34px; padding: 0 6px 0 9px; font-size: 13.5px; gap: 3px; border-width: 1px; }
  #theme { width: 30px; }
  .logo { font-size: 18px; }
  .nav-links { margin-right: 0; }
  .nav-links a { padding: 6px 7px; font-size: 15px; }
  .nav-links a[data-page="about"] { display: none; }
  .hero { padding: 32px 16px 40px; }
  .hero-sub { font-size: 17px; }
  .feature { margin-right: 0; }
  .feature-score { font-size: 28px; }
  .section-title { padding: 28px 16px 10px; }
  .icon-btn { width: 34px; height: 34px; }
  .ev-cell .n { min-width: 0; }
  .ev-cell .nm { display: none; }
  .nav-inner { gap: 6px; }
  .logo-text { display: none; }
  .nav-links a { padding: 7px 9px; font-size: 13px; }
  h1 { font-size: 22px; }
  .big-epa b { font-size: 30px; }
  .hide-sm { display: none; }
  td, th { padding: 7px 7px; }
  .meter { grid-template-columns: 84px 1fr 44px; }
  .tile { min-width: 0; flex: 1 1 40%; }
}

/* home: the two side-by-side lists end level, with their "All …" links at the bottom */
.hero-below .grid.cols-2 > div { display: flex; flex-direction: column; }
.hero-below .grid.cols-2 > div > .card { flex: 1; display: flex; flex-direction: column; }
.hero-below .grid.cols-2 .more { margin-top: auto; }

/* compact filter dropdowns */
.toolbar select, .card-pad select, .row select {
  appearance: none; cursor: pointer; font-size: 13.5px; font-weight: 500;
  padding: 7px 28px 7px 10px; border: 1px solid var(--line); border-radius: 6px; max-width: 220px;
  background: var(--surface) linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 14px) 52% / 4px 4px no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 10px) 52% / 4px 4px no-repeat;
}
.toolbar input { padding: 7px 12px; font-size: 14px; border: 1px solid var(--line); }
/* toolbar controls: one look (36px, radius 8, transparent with a 1px line, 13px/600; typed text stays 400) */
.toolbar input, .toolbar select, .toolbar .col-pick summary { box-sizing: border-box; min-height: 36px; border: 1px solid var(--line); border-radius: var(--radius); background-color: transparent; font-size: 13px; }
.toolbar select, .toolbar .col-pick summary { font-weight: 600; }
.toolbar .col-pick summary { display: inline-flex; align-items: center; }
.toolbar select:focus, .toolbar input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }

/* tables inside padded cards don't need the full-bleed gutter */
.card-pad table td:first-child, .card-pad table th:first-child { padding-left: 0; }
.card-pad table td:last-child, .card-pad table th:last-child { padding-right: 0; }
.prose ul { padding-left: 20px; margin: 8px 0 0; }
.prose li { margin: 6px 0; }


/* small change arrow next to "EPA out" in the team page event box */
.ev-box .delta { font-size: 11px; margin-left: 4px; vertical-align: 2px; }

/* team page header: details on the left, photo on the right */
.team-head { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.team-photo { position: relative; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.team-photo figure { display: none; margin: 0; }
.team-photo figure.on { display: block; }
.team-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.team-photo figcaption { font-size: 12px; color: var(--muted); padding: 8px 12px 0; }
.photo-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px 10px; }
.photo-next { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.empty-photo { border-style: dashed; }
.empty-photo a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 4 / 3; color: var(--muted); text-align: center; padding: 16px; }
.empty-photo a:hover { color: var(--accent); background: var(--hover); }
.empty-photo b { color: var(--text); font-size: 15px; }
@media (max-width: 900px) {
  .team-head { grid-template-columns: 1fr; gap: 16px; }
  .team-photo { max-width: 420px; }
  /* no photo yet: a slim row instead of a big empty box */
  .empty-photo { max-width: none; }
  .empty-photo a { aspect-ratio: auto; flex-direction: row; justify-content: flex-start; padding: 10px 14px; gap: 10px; text-align: left; }
  .empty-photo svg { width: 20px; height: 20px; }
}

/* About: keep the reading column centred instead of hugging the left edge */
.prose { margin-left: auto; margin-right: auto; max-width: 820px; }

/* photo upload dialog */
.upload-dialog { border: 1px solid var(--line); border-radius: 10px; padding: 22px; max-width: 440px; width: calc(100% - 32px); background: var(--surface); color: var(--text); }
.upload-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.upload-dialog form { display: grid; gap: 12px; }
.upload-dialog h2 { font-size: 19px; }
.upload-dialog input[type="text"] { border-radius: 6px; }
.upload-dialog .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.upload-dialog .row { justify-content: flex-end; }
.upload-dialog .msg:empty { display: none; }

/* rows that open an event or team when clicked */
#app tbody tr:has(a.ev-cell, a.team-cell) { cursor: pointer; }

/* instant hover explanations: column headings and RP dots */
[data-tip] { position: relative; cursor: help; }
.th-tip { border-bottom: 1px dotted var(--faint); }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; z-index: 40; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 260px; white-space: normal; text-align: left; text-transform: none; letter-spacing: 0;
  font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--page);
  background: var(--text); border-radius: 8px; padding: 8px 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* home: the two lists sit flush with one divider, and their rows line up */
.hero-below .grid.cols-2 { gap: 0; }
.hero-below .grid.cols-2 > div + div .card { border-left: 1px solid var(--line); }
.hero-below .grid.cols-2 td { height: 58px; }
@media (max-width: 900px) { .hero-below .grid.cols-2 > div + div .card { border-left: 0; } }

/* team page: trophy case (plaques, rank tiles, banners) */
.tiles-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; padding: 0 var(--gutter); }
.tiles-row .tiles { padding: 0; flex-wrap: nowrap; }
/* trophy case: plaques lean toward the tiles from the left, banners hang to the right */
.plaques, .banners { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; min-width: 0; }
.plaques { justify-content: flex-end; }
.banners { justify-content: flex-start; }
.plaque-icon, .banner-icon { display: block; line-height: 0; transition: transform .12s; }
.plaque-icon:hover, .banner-icon:hover { transform: translateY(-2px); }

@media (max-width: 900px) {
  .tiles-row { grid-template-columns: 1fr; padding: 0 16px; }
  .tiles-row .tiles { flex-wrap: wrap; }
  .plaques, .banners { justify-content: flex-start; }
}

/* Teams page: All events / Season only switch */
.toolbar .scope { border-bottom: 0; gap: 0; }
.toolbar .scope a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.plaque-icon svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* match videos */
.play { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; padding: 0; border-radius: 50%;
  border: 0; background: var(--accent); color: #fff; cursor: pointer; vertical-align: -4px; }
.play:hover { filter: brightness(1.15); }
.vid-cell { width: 56px; text-align: center; padding-right: 8px !important; }
.mt td.lvl, .mt th:nth-child(2) { min-width: 64px; }
.vid { display: inline-grid; place-items: center; padding: 3px; border: 0; border-radius: 50%; background: none;
  color: var(--accent); cursor: pointer; vertical-align: middle; line-height: 0; }
.vid:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.vid.none { color: var(--muted); opacity: .35; cursor: default; }
.vid.none:hover { background: none; }
.play svg { margin-left: 1px; }
button.pill { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 650; }
.video-dialog { padding: 0; border: 0; border-radius: 12px; width: min(calc(100vw - 48px), calc((100vh - 110px) * 16 / 9)); max-width: none; max-height: none; background: #000; color: #fff; overflow: hidden; }
.video-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.video-head { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #111; }
.video-head .link { color: #9cc8ff; margin-left: auto; }
.video-close { background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; padding: 2px 6px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* playoffs: alliances and bracket */
.seed { display: inline-block; min-width: 26px; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--muted);
  font-size: 11.5px; font-weight: 700; text-align: center; }
table.alliances tr.champ td { background: var(--accent-soft); }
.res-win { font-weight: 700; color: var(--text); }
.res-final { font-weight: 600; }
.playoffs-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.po-alliances { padding: 16px 0 16px; border-left: 1px solid var(--line); min-width: 300px; }
.po-alliances td:last-child { white-space: nowrap; }
.playoffs-card.wide { grid-template-columns: 1fr; }
.playoffs-card.wide .po-alliances { border-left: 0; border-top: 1px solid var(--line); min-width: 0; }
.playoffs-card.wide .po-alliances td.res { max-width: none; }
.po-h, .bsec-h { padding: 0 20px 8px; font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.card .po-alliances td:first-child, .card .po-alliances th:first-child { padding-left: 20px; }
.card .po-alliances td:last-child, .card .po-alliances th:last-child { padding-right: 20px; }
.po-alliances table { width: 100%; }
.po-alliances td { padding-top: 7px; padding-bottom: 7px; }
.al-teams { display: flex; gap: 8px; font-size: 13px; font-weight: 650; }
.al-teams .tn { min-width: 0; text-align: left; }
.po-alliances td.res { white-space: normal; max-width: 96px; line-height: 1.3; }
.al-name { font-size: 11.5px; color: var(--muted); max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-note { padding: 10px 20px 0; font-size: 11.5px; color: var(--faint); }
.po-bracket { display: flex; gap: 24px; align-items: flex-start; justify-content: safe center; padding: 24px 24px 28px; overflow-x: auto; min-width: 0; }
.po-stack { display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; min-width: 0; }
.bsec-h { padding: 0 0 6px; }
.po-final { display: flex; flex-direction: column; min-width: 232px; flex: 1; align-self: center; }
.bracket { display: grid; grid-template-columns: repeat(var(--cols), minmax(max-content, 1fr)); gap: 12px 24px; }
.bcol { display: flex; flex-direction: column; }
.bcol-h { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.bcol-b { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
/* short connector lines between rounds, and into the final */
.bslot { position: relative; }
.bracket .bcol:not(:last-child) .bslot::after, .bracket .bcol:not(:first-child) .bslot::before, .po-final .bslot::before, .po-stack .bracket .bcol:last-child .bslot::after {
  content: ""; position: absolute; top: 50%; width: 12px; border-top: 2px solid var(--line); }
.bslot::after { left: 100%; }
.bslot::before { right: 100%; }
.po-stack:only-child .bracket .bcol:last-child .bslot::after { display: none; }
.rr { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.bbox { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.bl { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-left: 3px solid transparent; }
.bl.red { border-left-color: var(--red); }
.bl.blue { border-left-color: var(--blue); }
.bl.won { background: var(--hover); }
.bl.won .bs { color: var(--text); }
.bl.lost { opacity: .55; }
.bt { flex: 1; display: flex; gap: 0 2px; font-size: 13px; white-space: nowrap; }
.bt .tn { min-width: 0; margin-right: 5px; }
.bs { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.bgames { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px 0; border-top: 1px solid var(--line); }
.bgame { font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--muted); }
.bgame.red { background: var(--red-soft); color: var(--red); }
.bgame.blue { background: var(--blue-soft); color: var(--blue); }
.bgame:hover { filter: brightness(1.15); }
.bgames + .bf { border-top: 0; }
.bf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 12px 5px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); }
.bk { font-weight: 650; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-r { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* FTC double elimination: round columns, upper bracket over lower, finals across both (manual fig. 13-6) */
.dgrid { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(max-content, 1fr)); column-gap: 36px; row-gap: 6px; }
.dgrid .bcol-h { margin-bottom: 2px; }
.dgrid .bsec-h { padding: 0; }
.dgrid .lower-h { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--line); }
.dcell { display: flex; flex-direction: column; justify-content: space-around; gap: 14px; min-width: 0; }
.dfinal { justify-content: center; }
.dgrid .bslot { z-index: 1; }
.dlines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.dlines path { fill: none; stroke: var(--faint); stroke-width: 1.5; opacity: .6; }
.bbox.pending { border-style: dashed; background: transparent; box-shadow: none; }
.bbox.pending .bl { min-height: 33px; font-size: 12px; }
/* the bracket needs the width: below 1200px the alliances move underneath it */
@media (max-width: 1200px) {
  .playoffs-card { grid-template-columns: 1fr; }
  .po-alliances { border-left: 0; border-top: 1px solid var(--line); min-width: 0; }
}
@media (max-width: 900px) {
  .po-bracket { flex-direction: column; align-items: stretch; }
  .po-final { max-width: none; align-self: stretch; }
  .po-final .bslot::before, .po-stack .bracket .bcol:last-child .bslot::after { display: none; }
}
/* home "Top teams" / "Recent events" cards: one line per field so both lists have equal row heights */
.home-list { table-layout: fixed; width: 100%; }
.home-list td:first-child:not(.num), .home-list td.num + td { width: auto; }
.home-list td.small { width: 90px; }
.home-list td.r { width: 90px; }
.home-list .ev-cell { min-width: 0; }
.home-list .ev-cell .n, .home-list .ev-cell .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* match page */
.red-text { color: var(--red); }
.blue-text { color: var(--blue); }
.good-text { color: var(--good); }
.bad-text { color: var(--bad); }
.match-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.match-nav .btn { padding: 7px 14px; font-size: 14px; }
.match-board { margin-right: 0; box-shadow: none; border: 1px solid var(--glass-border); }
.match-board .score.red, .stage-score .score.red { color: var(--red); }
.match-board .score.blue, .stage-score .score.blue { color: var(--blue); }
.match-board .score.lost, .stage-score .score.lost { opacity: .45; }
.match-board .pred-line { font-size: 13px; font-weight: 500; letter-spacing: 0; margin-top: 4px; }
.match-board .sat-out { opacity: .45; }
.breakdown td, .breakdown th { padding: 7px 8px; }
.breakdown tr.tot td { border-top: 2px solid var(--line); font-size: 16px; }
.bk-cell { width: 22%; min-width: 70px; }
.bk-bar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--surface-2); }
.bk-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; max-width: 100%; }
.bk-bar i.red { background: var(--red); }
.bk-bar i.blue { background: var(--blue); }
.bk-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); }
.match-teams tr.side-red td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.match-teams tr.side-blue td:first-child { box-shadow: inset 4px 0 0 var(--blue); }
.match-teams tr.side-red + tr.side-blue td { border-top: 2px solid var(--line); }
a.match-link { color: inherit; }
a.match-link:hover { color: var(--accent); text-decoration: underline; }
.mt tbody tr:has(a.match-link) { cursor: pointer; }
@media (max-width: 640px) { .match-nav { padding: 0 16px; } }

/* match page built around the video: player left, compact scoreboard right */
.watch-cta { align-self: center; font-size: 17px; padding: 14px 26px; border-radius: 999px; background: var(--accent); border-color: var(--accent); color: #fff; cursor: pointer; }
.watch-cta:hover { color: #fff; filter: brightness(1.1); opacity: 1; }
.watch-cta svg { width: 14px; height: 14px; }
/* the video gets its own row, centred and as big as fits; the scoreboard sits below */
/* with a video the video is the page: as big as the screen allows, centred, with a slim score strip right under it */
.match-stage { padding: 0 max(16px, calc(var(--gutter) / 2)); }
.match-stage .stage-video { width: min(100%, calc((100vh - 200px) * 16 / 9)); min-width: min(100%, 720px); margin: 0 auto; }
.stage-side .bug { padding: 14px 0 0; width: min(100%, calc((100vh - 200px) * 16 / 9)); min-width: min(100%, 720px); max-width: none; } /* same width as the video */
.stage-side .bug-row { gap: 24px; }
.stage-side .bug-score { font-size: 44px; }
.stage-side .bug-team b { font-size: 18px; }
.stage-side .bug-al { gap: 4px; }
.stage-side .bug-chance { margin-top: 12px; }
.stage-video { position: relative; aspect-ratio: 16 / 9; background: var(--page); border-radius: 12px; overflow: hidden; }
.stage-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stage-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  border: 0; cursor: pointer; color: #fff; font: inherit; background: radial-gradient(ellipse closest-side at 50% 45%, var(--stage-glow), var(--page) 100%); } /* reaches the page colour at every edge: no visible box */
.stage-play-icon { display: grid; place-items: center; width: 96px; height: 96px; transition: transform .15s; } /* the mascot, play triangle on its body */
.stage-play-icon svg { width: 96px; height: 96px; }
.wf-play { fill: var(--on-accent); }
.stage-play:hover .stage-play-icon .bot-g { animation: bot-strafe .9s ease-in-out; } /* it strafes, like the logo does */
.stage-play:hover .stage-play-icon { transform: scale(1.07); }
a.stage-play, a.stage-play:hover { color: #fff; text-decoration: none; }
a.stage-play small { max-width: 80%; text-align: center; }
.stage-play-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stage-play-text b { font-size: 20px; }
.stage-play-text small { font-size: 13px; opacity: .7; }
@media (max-width: 900px) {
  .stage-score { font-size: 36px; }
  .watch-cta { display: none; } /* the player is right below */
}
.po-bracket:has(.rr-standings) { flex-wrap: wrap; }
.rr-standings { flex: 0 0 100%; margin-top: 8px; }
.rr-standings table { max-width: 620px; }
.rr-standings td, .rr-standings th { padding: 6px 10px; }
.rr-standings .tn { min-width: 0; margin-right: 6px; }
.rr-standings tr.adv td { background: var(--accent-soft); }

/* team page: attribute radar (axes follow the season's game) */
.radar-box { aspect-ratio: 1; max-width: 320px; width: 100%; }
.radar { width: 100%; height: auto; display: block; overflow: visible; }
.rd-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.rd-shape { fill: var(--accent); fill-opacity: .22; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.rd-dot { fill: var(--accent); }
.rd-label { font-size: 11.5px; font-weight: 700; fill: var(--text); }
.rd-val { font-size: 10.5px; font-weight: 500; fill: var(--muted); }

/* team page header (ESPN-style): identity + EPA, then radar + stat cards */
/* the header card stays full width like every card; its contents keep to 1200px so they don't drift apart */
.team-hero > * { max-width: none; }
/* EPA keeps its own right-hand column; name and awards share the left, awards
   beside the name when there's room and wrapping under it when there isn't */
.th-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; }
.th-left { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; min-width: 0; }
.th-left .th-id { flex: 0 1 auto; min-width: 0; }
.th-id h1 { margin: 0 0 4px; }
.th-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.th-fact { font-size: 13px; color: var(--muted); padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.th-fact b { color: var(--text); font-weight: 750; }
a.th-add { color: var(--muted); border-style: dashed; background: transparent; }
a.th-add:hover { color: var(--accent); border-color: var(--accent); }
.th-epa { text-align: right; }
.th-epa .label { font-size: 12px; color: var(--muted); }
.th-epa > b { display: block; font-size: 56px; font-weight: 850; letter-spacing: -0.03em; line-height: 1; margin: 6px 0 10px; }
/* world / country / state ranks: each its own chip, number big, so they read at a glance */
.th-ranks { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--muted); }
.th-ranks > span { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 15px; }
.th-ranks b { color: var(--text); font-size: 30px; font-weight: 850; letter-spacing: -0.02em; line-height: 1; }
.th-ranks > span.gold-rank { border-color: color-mix(in srgb, #f2c94c 55%, transparent); background: color-mix(in srgb, #f2c94c 10%, var(--surface-2)); }
.th-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px 32px; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.th-body.has-photo { grid-template-columns: 250px minmax(0, 1fr) 260px; }
.th-h { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.stat-grid { display: grid; gap: 10px; }
.stat-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat-main .stat-card b { font-size: 34px; }
/* supporting numbers: one quiet row under the three periods */
.stat-minor { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 2px 4px; }
.stat-mini { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.stat-mini .k { font-weight: 600; }
.stat-mini b { color: var(--text); font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
.stat-mini .stat-pct { font-size: 10.5px; padding: 1px 7px; }
.stat-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.stat-card .k { font-size: 12px; font-weight: 650; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.stat-pct { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--hover); color: var(--muted); }
.stat-pct.warm { background: var(--accent-soft); color: var(--accent); }
.stat-pct.hot { background: var(--accent); color: #fff; }
/* gold: kept for the very best only (Top 1%, #1 ranks, event wins, win banners) */
.stat-pct.gold, .ev-award.win { color: #3d2a00; background: linear-gradient(110deg, #c8961a 0%, #f2c94c 40%, #f7d774 60%, #d4a72c 100%);
  box-shadow: 0 0 0 1px rgba(184, 134, 11, .35), 0 1px 6px rgba(242, 201, 76, .25); position: relative; overflow: hidden; isolation: isolate; }
/* the shine is a light band that starts and ends off the pill, so the loop restarting is invisible */
.stat-pct.gold::after, .ev-award.win::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 249, 220, .85) 50%, transparent 65%);
  transform: translateX(-120%); animation: gold-shine 5s ease-in-out infinite; }
@keyframes gold-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .stat-pct.gold::after, .ev-award.win::after { animation: none; display: none; } }
.gold-rank b { color: #b8860b; }
:root[data-theme="dark"] .gold-rank b { color: #f2c94c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gold-rank b { color: #f2c94c; } }
.th-photo .team-photo { width: 100%; }
/* one trophy shelf: banners first, then plaques, wrapping as a single row, bottoms aligned */
.th-awards { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; flex: 1 1 320px; justify-content: center; align-self: center; }
.th-awards .plaques, .th-awards .banners { display: contents; }
@media (max-width: 700px) { .th-awards { order: 3; justify-content: flex-start; } }
.th-awards .th-h { margin: 0 6px 0 0; }
.th-awards .plaques, .th-awards .banners { justify-content: center; }
.th-awards .plaque-icon svg { width: 60px; height: 76px; }
.th-awards .banner-icon svg { width: 56px; height: 78px; }
@media (max-width: 1000px) {
  .th-body, .th-body.has-photo { grid-template-columns: 1fr; }
  .th-body .radar-box { justify-self: center; }
}
@media (max-width: 700px) {
  .th-top { display: flex; flex-direction: column; }
  .th-left { display: contents; }
}
@media (max-width: 640px) {
  .th-epa { text-align: left; }
  .th-ranks { justify-content: flex-start; }
  .th-epa > b { font-size: 44px; }
  .stat-main { gap: 8px; }
  .stat-main .stat-card b { font-size: 22px; }
  .stat-card { padding: 9px 10px; }
  .stat-card b { font-size: 19px; margin: 2px 0 6px; }
  .stat-pct { font-size: 10.5px; padding: 1px 6px; }
}
.th-body .rd-label { font-size: 14px; }
.th-body .radar-box { max-width: 250px; }

/* ---------- compete ---------- */
.compete-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px var(--gutter) 0; }
.compete-bar .row { gap: 6px; }
.predictor { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; padding: 14px var(--gutter) 0; }
.predictor .side { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); }
.predictor .side.red { box-shadow: inset 4px 0 0 var(--red); }
.predictor .side.blue { box-shadow: inset -4px 0 0 var(--blue); }
.side-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.slot { position: relative; }
.slot input { width: 100%; font-size: 16px; border-radius: 10px; padding-right: 36px; }
.slot-x { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; }
.slot-x:hover { background: var(--surface-2); color: var(--text); }
.side .who { font-size: 12.5px; color: var(--muted); margin: 4px 0 10px 4px; min-height: 18px; }
.side .who a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); }
.add-slot { cursor: pointer; }
.vs { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vs > span { font-weight: 800; color: var(--faint); font-size: 20px; }
.vs #go { padding: 10px 22px; font-size: 15px; }
.vs #go:disabled { opacity: 0.45; cursor: not-allowed; }
#out.stale { opacity: 0.4; transition: opacity 0.15s; }
/* compete: while the predicted match plays out, hold back everything but the score */
#out .out-rest, #out .feature-foot p { transition: opacity 0.4s; }
#out.playing .out-rest, #out.playing .feature-foot p { opacity: 0; pointer-events: none; }
#out.playing .feature-foot .wp-red { transition: width 0.12s linear; }
#out.playing .match-board { cursor: pointer; }
#out .feature-score .score { font-variant-numeric: tabular-nums; }
.compete-note { padding: 10px var(--gutter) 0; margin: 0; }
#out .match-board { margin-right: 0; }
@media (max-width: 700px) {
  .predictor { grid-template-columns: 1fr; padding: 12px 16px 0; }
  .compete-bar { padding: 14px 16px 0; }
  .vs { justify-self: center; }
  .compete-note { padding: 10px 16px 0; }
  /* three nav links + season + theme on one row */
  .nav-links { gap: 0; }
  .nav-links a { padding: 7px 6px; }
}

/* home page lists: five big rows a side */
.hl { display: flex; flex-direction: column; }
.hl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 24px; border-bottom: 1px solid var(--line); color: var(--text); }
.hl-row:hover { background: var(--hover); color: var(--text); }
.hl-row:last-child { border-bottom: 0; }
#home-events .hl-row, #live-events .hl-row { grid-template-columns: minmax(0, 1fr) auto; }
.hl-rank { font-size: 26px; font-weight: 800; color: var(--faint); width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.hl-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hl-main b { font-size: 18px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-num { color: var(--accent); }
.hl-main small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-meta { color: var(--faint) !important; font-variant-numeric: tabular-nums; }
.hl-val { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 70px; }
.hl-val .epa { font-size: 17px; padding: 4px 12px; }
@media (max-width: 640px) {
  .hl-row { padding: 12px 16px; gap: 12px; }
  .hl-main b { font-size: 16px; }
  .hl-rank { font-size: 20px; width: 22px; }
}

/* home fills one screen on desktop: hero, then the two lists filling what's left; the footer
   sits just below the fold. refitHome() trims list rows to fit (sets --head-h);
   .home-scroll is the fallback when even 4 rows don't. */
@media (min-width: 901px) and (min-height: 520px) {
  body.home-fit:not(.home-scroll) main { flex: none; height: calc(100vh - var(--head-h, 64px)); min-height: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
  body.home-fit .hero { padding-top: clamp(16px, 4vh, 56px); padding-bottom: clamp(12px, 3vh, 40px); margin-top: 0; gap: 40px; }
  body.home-fit .hero-title { font-size: clamp(34px, min(5vw, 7.5vh), 72px); margin: 1vh 0 1.6vh; }
  body.home-fit .hero-sub { font-size: clamp(15px, 2.2vh, 19px); line-height: 1.5; }
  body.home-fit .hero-actions { margin-top: clamp(12px, 2.4vh, 28px); }
  body.home-fit .hero-stats { margin-top: clamp(12px, 2.6vh, 32px); }
  body.home-fit .hero-stats b { font-size: clamp(22px, 3.4vh, 32px); }
  body.home-fit .hero-media { padding: clamp(14px, 3.5vh, 48px) 0; }
  body.home-fit:not(.home-scroll) .hero-below { flex: 1 1 auto; min-height: 0; padding: 0; display: flex; flex-direction: column; }
  body.home-fit:not(.home-scroll) .hero-below .grid.cols-2 { flex: 1 1 auto; min-height: 0; }
  body.home-fit:not(.home-scroll) .hero-below .grid.cols-2 > div { min-height: 0; }
  body.home-fit .hero-below .section-title { padding-top: clamp(10px, 2vh, 28px); padding-bottom: 8px; }
  body.home-fit .hero-below .section-title h2 { font-size: clamp(22px, 3.2vh, 32px); margin-top: 2px; }
  body.home-fit:not(.home-scroll) .hero-below .card { min-height: 0; }
  body.home-fit:not(.home-scroll) #top-teams, body.home-fit:not(.home-scroll) #home-events { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  body.home-fit .hl-row { padding-top: clamp(8px, 1.4vh, 16px); padding-bottom: clamp(8px, 1.4vh, 16px); }
}
.hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 40px; }
@media (min-width: 901px) and (min-height: 520px) {
  body.home-fit .hero-title { font-size: clamp(32px, min(4.2vw, 6.5vh), 64px); }
  body.home-fit .hero-sub { max-width: 640px; }
  body.home-fit .hero-row .hero-stats { margin-top: clamp(12px, 2.4vh, 28px); }
  body.home-fit .hero-media .feature-body { padding-top: clamp(10px, 2vh, 22px); padding-bottom: clamp(10px, 2vh, 22px); }
  body.home-fit .hero-media .feature-foot { padding-bottom: clamp(10px, 2vh, 22px); }
  body.home-fit .hero-media .feature-score { font-size: clamp(28px, 5vh, 40px); }
  body.home-fit .hl-meta { display: none; }
}
@media (min-width: 901px) and (min-height: 860px) { body.home-fit .hl-meta { display: block; } }
@media (min-width: 901px) and (min-height: 520px) and (max-height: 800px) {
  body.home-fit .hero-sub { display: none; }
  body.home-fit .hero-below .more { padding-top: 9px; padding-bottom: 9px; }
}
/* compete: team picker (replaces the browser's datalist) */
.pick { position: absolute; top: calc(100% - 22px); left: 0; right: 0; z-index: 40; display: none; max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.28); padding: 4px; }
.pick.open { display: block; }
.pick-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pick-item b { font-variant-numeric: tabular-nums; }
.pick-item span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-item.sel, .pick-item:hover { background: var(--hover); }
.pick-empty { padding: 10px 12px; color: var(--muted); font-size: 13px; }
@media (min-width: 901px) and (min-height: 520px) and (max-height: 800px) {
  body.home-fit .hero { padding-top: 2.4vh; padding-bottom: 1.6vh; }
  body.home-fit .hero-media { padding: 1.6vh 0; }
  body.home-fit .hero-media .feature-head { padding-top: 10px; padding-bottom: 10px; }
}
body.home-fit .hero { flex-shrink: 0; }
@media (min-width: 901px) and (min-height: 520px) and (max-height: 800px) {
  body.home-fit .hl-row { padding-top: 7px; padding-bottom: 7px; }
  body.home-fit .hero-below .section-title { padding-top: 8px; padding-bottom: 6px; }
  body.home-fit:not(.home-scroll) footer { padding-top: 8px; padding-bottom: 8px; }
}
/* phones: the column picker spans the toolbar instead of hanging off the Columns button */
@media (max-width: 640px) {
  .toolbar:has(.col-pick) { position: relative; }
  .toolbar .col-pick { position: static; }
  .toolbar .col-pick > div { left: 14px; right: 14px; width: auto; max-width: none; top: calc(100% - 6px); }
}

/* compete modes (Predict a match | Head to head) sit at the right of the page head */
.mode-pick { align-self: center; }
/* head to head: tale of the tape, mirrored bars with the label in the middle */
.tape-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.tape-head a { color: inherit; }
.tape { display: grid; }
.tape-row { display: grid; grid-template-columns: 84px 1fr minmax(110px, 170px) 1fr 84px; align-items: center; gap: 12px; height: 42px; border-bottom: 1px solid var(--line); }
.tape-row:last-child { border-bottom: 0; }
.tape-v { font-variant-numeric: tabular-nums; font-size: 15px; }
.tape-v.r { text-align: right; }
.tape-v.muted { font-weight: 500; }
.tape-k { text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.tape-k small { display: block; font-weight: 500; font-size: 11px; }
.tape-bar { display: flex; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.tape-bar.left { justify-content: flex-end; }
.tape-bar i { display: block; height: 100%; }
.tape-bar i.red { background: var(--red); }
.tape-bar i.blue { background: var(--blue); }
@media (max-width: 640px) {
  .tape-row { grid-template-columns: 60px 1fr 84px 1fr 60px; gap: 6px; }
  .tape-v { font-size: 13px; }
  .tape-k { font-size: 12px; }
}
/* head to head meetings: long event names wrap instead of widening the table */
.meet td { white-space: normal; }
@media (max-width: 640px) { .meet td, .meet th { padding-left: 8px; padding-right: 8px; } }

/* ---------- teams list: table / chart switch, labelled pickers, charts ---------- */
:root { --gold: #c8961a; }
:root[data-theme="dark"] { --gold: #f2c94c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold: #f2c94c; } }
.view-pick { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.view-pick button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 6px; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; }
.view-pick button:hover { color: var(--text); }
.view-pick button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line); }
/* a select with its name inside the same box: "# of matches  Predicted ▾" */
.sel-label { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.sel-label > span { padding: 0 2px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.toolbar .sel-label select, .sel-label select { border: 0; background-color: transparent; padding-left: 6px; font-weight: 600; }
.sel-label:focus-within { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.sel-label select:focus { outline: none; }
/* predicted (hasn't played yet): an asterisk after the team name */
.pred-star { margin-left: 2px; font-weight: 800; color: var(--muted); cursor: help; }
.team-charts { padding-top: 18px !important; padding-bottom: 24px !important; }
.team-charts .chart-head { justify-content: flex-start; }
.chart-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.chart-controls .sel-label select { max-width: 200px; appearance: none; cursor: pointer; font-size: 13.5px; padding: 7px 28px 7px 6px;
  background: transparent linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 14px) 52% / 4px 4px no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 10px) 52% / 4px 4px no-repeat; color: var(--text); }
.chart-controls .swap { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 15px; }
.chart-controls .swap:hover { color: var(--accent); border-color: var(--accent); }
.chart-note { margin: 10px 0 4px; }
.team-charts .chart { margin-top: 6px; }
.team-charts .pick-list { margin-top: 6px; }
.chart .dot { fill: var(--accent); fill-opacity: .3; }
.chart .dot.top { fill: var(--gold); fill-opacity: .95; stroke: var(--surface); stroke-width: 1.5; }
.chart .dot-label { fill: var(--text); fill-opacity: .6; font-size: 11.5px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-opacity: .5; stroke-width: 3px; }
.chart .dot-ring { fill: none; stroke: var(--text); stroke-width: 2; pointer-events: none; }
.chart .fit-line { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: .7; }
.chart .corr { fill: var(--muted); font-size: 12px; font-weight: 600; }
.chart .bar { fill: var(--accent); fill-opacity: .75; transition: fill-opacity .1s; }
.chart .bar.on { fill-opacity: 1; }
.chart .mark-line { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart .mark { fill: var(--gold); font-size: 11.5px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
/* sits out in the left margin, so the search box keeps lining up with the table */
@media (min-width: 901px) { .toolbar .view-pick { margin-left: calc(var(--gutter) / -2); } }
@media (max-width: 640px) { .chart-controls { margin-left: 0; } .view-pick button { padding: 5px 9px; } }
button.pill { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
pre.code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; }
.prose code { font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.share-btn { color: var(--muted); }
.share-btn:hover { color: var(--accent); }
.th-facts .share-btn { font-size: 13px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.fc-from { display: grid; gap: 8px; }
.fc-from input[type="range"] { width: 100%; accent-color: var(--accent); }

/* SIM event: Compete's look - a bar of actions, then the team list as removable chips */
.sim-ev { width: 300px; }
.sim-ev input { font-size: 14px; padding: 7px 12px; border-radius: 999px; }
.sim-ev .pick { top: calc(100% + 4px); min-width: 420px; }
.ev-pick { grid-template-columns: minmax(0, 1fr) auto; }
.ev-pick b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-pick span { grid-column: 1; font-size: 12px; }
.ev-pick small { grid-column: 2; grid-row: 1 / span 2; }
.sim-per { gap: 10px; align-items: center; }
.sim-board { padding: 14px var(--gutter) 0; }
.sim-teams { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.sim-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin-bottom: 10px; }
.sim-chips:empty { display: none; }
.sim-chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 4px 3px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; }
.sim-chip a { color: inherit; display: flex; gap: 6px; flex: 1; min-width: 0; }
.sim-chip a span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-chip .epa { font-size: 11.5px; padding: 1px 7px; }
.sim-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; }
.sim-chip button:hover { background: var(--hover); color: var(--text); }
.sim-teams .slot .pick { top: calc(100% + 4px); }
@media (max-width: 900px) { .sim-board { padding: 14px 16px 0; } .sim-ev { width: 100%; } .sim-ev .pick { min-width: 0; } }
/* team with no matches this season: big notice, a robot crossing an empty field */
.no-matches { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 36px !important; padding-bottom: 40px !important; }
.no-matches h2 { font-size: 34px; font-weight: 850; letter-spacing: -0.02em; margin: 22px 0 4px; }
.no-matches p { font-size: 16px; margin: 0; }
.no-matches .nm-label { margin-top: 22px; }
.nm-seasons { gap: 6px; margin-top: 10px; justify-content: center; }
.wait-field { width: min(560px, 100%); height: auto; }
.wf-mat { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; }
.wf-line { stroke: var(--line); stroke-width: 1.5; }
.wf-path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .55; }
.wf-body { fill: var(--accent); }
.wf-wheel { fill: var(--text); opacity: .8; }
.wf-roller { stroke: var(--surface-2); stroke-width: 1.4; stroke-linecap: round; } /* mecanum rollers, in an X pattern */
/* mecanum drive: it strafes along the curve still facing forward, then spins on the spot */
.wf-bot { offset-path: path("M40 112 C 160 112, 200 38, 300 38 S 440 112, 560 112"); offset-rotate: 0deg; animation: wf-drive 9s ease-in-out infinite; }
@keyframes wf-drive {
  0% { offset-distance: 0%; rotate: 0deg; }
  38% { offset-distance: 100%; rotate: 0deg; }
  50% { offset-distance: 100%; rotate: 180deg; }
  88% { offset-distance: 0%; rotate: 180deg; }
  100% { offset-distance: 0%; rotate: 360deg; }
}
@media (prefers-reduced-motion: reduce) { .wf-bot { animation: none; offset-distance: 50%; rotate: 0deg; } }
@media (max-width: 640px) { .no-matches h2 { font-size: 24px; } }
/* three wide period cards: content centered so it doesn't sit in a corner */
.stat-main .stat-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat-minor { justify-content: center; }
/* teams that haven't played yet: the whole row a little greyed */
tr.pre-row td { opacity: .5; }
tr.pre-row:hover td { opacity: .85; }
/* event Teams tab: just the gear menu, on the right */
.col-pick summary svg { vertical-align: -2px; margin-right: 4px; }
.team-cell2 { align-items: center; }
.team-cell2 .tc-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.team-cell2 .nm { font-size: 15px; }
.team-cell2 .n { font-size: 18px; min-width: 64px; } /* the number is what people scan for: bigger than the name */
.team-cell2 .tc-loc { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tbody tr:hover .team-cell2 .tc-loc { text-decoration: none; }
/* gear-only column menu: no box, no label */
.gear-pick summary { border: 0; background: transparent; padding: 6px; color: var(--muted); border-radius: 8px; }
.gear-pick summary::after { content: none; }
.gear-pick summary:hover, .gear-pick[open] summary { color: var(--text); background: var(--surface-2); }
.gear-pick summary svg { width: 18px; height: 18px; margin: 0; vertical-align: middle; }
.tt-card { position: relative; }
.tt-gear { position: absolute; top: 4px; right: max(4px, calc(var(--gutter) / 2 - 16px)); z-index: 5; }
.tt-gear > div { right: 0; }
/* event pages: the open tab's card runs down to the footer instead of stopping short */
main:has(> #tab) { display: flex; flex-direction: column; padding-bottom: 0; }
main > #tab { flex: 1; display: flex; flex-direction: column; }
main > #tab > .card:last-child { flex: 1; }
.bt .tn { flex: none; }
/* ---- mobile: match tables ---- */
.show-sm { display: none; }
@media (max-width: 640px) {
  .show-sm { display: table-cell; }
  .mt td, .mt th { padding: 6px 4px; }
  .mt .vid-cell { width: 30px; padding-right: 4px !important; }
  .mt td.lvl, .mt th:nth-child(2) { min-width: 0; }
  .mt .lvl { white-space: nowrap; }
  .mt-al .tn { display: block; min-width: 0; line-height: 1.5; }
  .mt-wp .wp-track, .mt-final .rpd { display: none; }
  .mt-wp .wp-label { min-width: 0; }
  .mt-final { white-space: nowrap; }
}

/* ---- mobile: nav and home ---- */
.nav-search-btn { display: none; background: none; border: 0; color: var(--text); border-radius: 8px; }
@media (max-width: 900px) {
  /* one slim pinned row; the search box folds into an icon and drops down under the header when tapped */
  .nav .nav-inner { flex-wrap: nowrap; position: relative; height: 56px; padding-top: 0; padding-bottom: 0; }
  .nav .nav-search { display: none !important; }
  .nav.search-open .nav-search { display: block !important; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 8px var(--gutter) 10px;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 10px 20px rgba(0,0,0,.08); }
  .nav.search-open .nav-search svg { left: calc(var(--gutter) + 14px) !important; }
  .nav .nav-search input { width: 100%; font-size: 16px; } /* 16px: iOS zooms into smaller inputs */
  .nav.search-open .nav-search .search-results { top: calc(100% - 4px); left: var(--gutter); right: var(--gutter); min-width: 0; max-height: calc(100dvh - 140px); overflow-y: auto; }
  .nav-search-btn { display: grid; flex: none; width: 40px; height: 40px; }
  .nav-search-btn:hover, .nav.search-open .nav-search-btn { color: var(--accent); }
  .nav .nav-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .nav .season-btn, .nav #theme { height: 40px; }
}
@media (max-width: 640px) {
  .nav .nav-inner { padding: 0 12px; gap: 2px; }
  .nav.search-open .nav-search { padding: 8px 12px 10px; }
  .nav.search-open .nav-search svg { left: 26px !important; }
  .nav.search-open .nav-search .search-results { left: 12px; right: 12px; }
  .nav .logo svg { width: 28px; height: 28px; }
  .nav .nav-links a { padding: 0 5px; font-size: 14px; }
  .nav .season-picker { margin-left: 2px; }
  .nav .season-btn { padding: 0 6px 0 8px; }
  .nav-search-btn, .nav #theme { width: 36px; }
  .nav .season-menu { max-height: calc(100dvh - 72px); }

  /* hero: the three numbers sit as one even row */
  .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .hero-stats b { font-size: 24px; }
  .hero-stats span { display: block; font-size: 12.5px; line-height: 1.3; margin-top: 2px; }
  /* dream match card: the season is already in the eyebrow, so the head keeps just its title on one line */
  .feature-head { padding: 12px 16px; }
  .feature-head span { display: none; }
  .feature-body { gap: 8px; padding: 18px 16px; }
  .feature-side { min-width: 0; }
  .feature-side small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feature-foot { padding: 0 16px 18px; }
  .feature-foot p a { white-space: nowrap; } /* the arrow never wraps onto a line by itself */
  .hero-media { padding: 24px 0; }
  /* top teams: the record / auto / teleop / endgame line doesn't fit a phone row (it was cut off mid-word), so it goes,
     as it does on short desktop screens; the EPA and location stay */
  #top-teams .hl-meta { display: none; }
}
@media (max-width: 380px) {
  .nav .logo svg { width: 26px; height: 26px; }
  .nav .nav-links a { padding: 0 3px; font-size: 13px; }
  .nav .season-btn .chev { display: none; }
  .nav .season-btn { padding: 0 6px; font-size: 13px; }
  .nav-search-btn, .nav #theme { flex: none; }
  .hero-stats b { font-size: 22px; }
}

/* ---- mobile: team page and lists ---- */
@media (max-width: 640px) {
  /* team header: name, then EPA with the ranks as one even row, then one scrolling awards strip */
  .team-hero { padding-top: 16px !important; padding-bottom: 16px !important; }
  .th-top { gap: 12px; }
  .th-id h1 { font-size: 26px; }
  .th-facts { gap: 6px; margin-top: 10px; }
  .th-fact, .th-facts .share-btn { font-size: 12.5px; padding: 4px 10px; }
  .th-epa, .th-awards { align-self: stretch; min-width: 0; }
  .th-epa { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
  .th-epa .label { grid-column: 1 / -1; }
  .th-epa > b { font-size: 40px; margin: 2px 0 0; }
  .th-ranks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 2px; }
  .th-ranks > span { display: block; min-width: 0; padding: 5px 6px; border-radius: 10px; text-align: center; font-size: 11.5px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .th-ranks b { display: block; font-size: 18px; margin-bottom: 1px; }
  .th-awards { flex: none; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; padding: 2px 0 4px; margin: -2px 0 -4px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .th-awards::-webkit-scrollbar { display: none; }
  .th-awards > *, .th-awards a { flex: none; }
  .th-awards .plaque-icon svg { width: 38px; height: 48px; }
  .th-awards .banner-icon svg { width: 35px; height: 49px; }
  .th-body { gap: 12px; margin-top: 14px; padding-top: 14px; }
  .th-body .radar-box { max-width: 210px; }
  .stat-grid { gap: 8px; }
  .stat-minor { gap: 6px 14px; padding: 0; }
  .stat-mini { gap: 6px; font-size: 12.5px; }
  .stat-mini b { font-size: 15px; }
  /* Matches / Charts, graph picker, compare box */
  .chart-head { gap: 8px; }
  .chart-pick a { padding: 5px 12px; }
  .vs-form { flex: 1 1 100%; }
  .vs-form input { flex: 1; min-width: 0; padding: 7px 12px; }
  .vs-form .btn { padding: 7px 14px; font-size: 14px; }

  /* Teams / Events toolbars: search first, filters share rows, less padding */
  .toolbar { gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .toolbar input { min-width: 0; flex: 1 1 150px; }
  .toolbar > select { flex: 1 1 130px; min-width: 0; max-width: none; }
  .toolbar .scope a { padding: 6px 9px; font-size: 13px; }
  .toolbar .col-pick summary { padding: 6px 10px; }
  /* events: search on its own row, the four filters as a 2-column grid */
  .toolbar:not(:has(.view-pick)):has(#month) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar:not(:has(.view-pick)):has(#month) > input { grid-column: 1 / -1; }
  /* list team names stay on one line */
  .team-cell2 .tc-text { max-width: 150px; }
  .team-cell2 .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- match page: header actions, scoreboard, mirrored breakdown ---- */
.match-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.match-steps { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.match-steps .btn { padding: 6px 12px; font-size: 13px; }
/* scorebug: robots hug their score (no tinted boxes); the loser's score dims */
.bug { max-width: 960px; margin: 0 auto; padding: 8px 0 4px; }
.bug-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 32px; align-items: center; }
.bug-al { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bug-al.red { align-items: flex-end; text-align: right; }
.bug-team { display: flex; flex-direction: column; min-width: 0; color: var(--text); }
.bug-team b { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bug-team span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.bug-team:hover span { color: var(--text); }
.bug-team.sat-out { opacity: .5; }
.bug-score { display: flex; align-items: center; gap: 14px; font-size: 64px; font-weight: 850; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bug-n.lost { opacity: .35; }
.bug-n.pred { opacity: .6; }
.bug-dash { color: var(--faint); font-weight: 400; }
.bug-chance { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 12px; align-items: center; margin-top: 24px; font-size: 13px; font-weight: 700; }
.bug-chance > :last-child { text-align: right; }
.mb-bar { height: 6px; border-radius: 3px; background: var(--blue); overflow: hidden; }
.mb-bar i { display: block; height: 100%; background: var(--red); }
/* line score: one row per alliance, a column per period, then the bonus RPs; prediction small underneath */
.ls-card h2 { margin: 0 0 12px; }
.line-score { width: 100%; table-layout: fixed; }
.line-score td.ls-who, .line-score th:first-child { width: 96px; }
.line-score th { font-size: 12px; }
.line-score td, .line-score th { padding: 10px 18px; }
.line-score td:first-child { padding-left: 16px; }
.line-score td b { display: block; font-size: 20px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.line-score td small { display: block; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.line-score .ls-final b { font-size: 26px; font-weight: 850; }
.line-score th.ls-rp, .line-score td.ls-rp { border-left: 1px solid var(--line); }
.line-score th.ls-rp ~ th.ls-rp, .line-score td.ls-rp ~ td.ls-rp { border-left: 0; }
.line-score tr.side-red td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.line-score tr.side-blue td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.ls-note { margin: 8px 0 0; }
@media (max-width: 640px) {
  .match-actions { align-items: flex-start; }
  .match-steps { justify-content: flex-start; }
  .bug-row { gap: 12px; }
  .bug-score { font-size: 40px; gap: 6px; }
  .bug-team b { font-size: 17px; }
  .bug-team span { display: none; }
  .line-score { table-layout: auto; width: auto; min-width: 100%; } /* scrolls sideways in its card instead of squeezing the headers */
  .line-score td, .line-score th { padding: 8px 8px; }
  .line-score td b { font-size: 16px; }
  .line-score .ls-final b { font-size: 20px; }
}

/* ---- QA fixes ---- */
/* white text needs a deeper blue than the dark-mode accent (#4da3ea) to be readable */
:root { --accent-strong: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-strong: #1f6fb5; } }
:root[data-theme="dark"] { --accent-strong: #1f6fb5; }
.chart-pick a.active, .stat-pct.hot { background: var(--accent-strong); }
@media (max-width: 640px) {
  .more { padding-left: 16px; padding-right: 16px; }
  .po-alliances { min-width: 0; max-width: 100%; }
}

/* page switches: the old page dims while the next loads, then the new one fades in */
#app.routing { opacity: .55; pointer-events: none; transition: opacity .12s ease .08s; }
#app:not(.routing) > * { animation: page-in .16s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #app:not(.routing) > * { animation: none; } #app.routing { transition: none; } }

/* ==== Mobile experience (≤640px) ====
   Desktop-only extras are hidden on phones with .desk-only; each area keeps its
   phone rules in its own block below. */
@media (max-width: 640px) { .desk-only { display: none !important; } }
/* -- mobile: shell, header, home, global tokens -- */
/* dark --faint was 3.42:1 on the #202020 rows; #9a9590 is about 5.5:1 (could go global) */
@media (max-width: 640px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --faint: #9a9590; } }
@media (max-width: 640px) {
  :root[data-theme="dark"] { --faint: #9a9590; }

  /* header: 16px sides like the page, 40px tap targets, season list centred under the header */
  .nav .nav-inner { padding: 0 16px; gap: 0; }
  .nav .nav-links { gap: 0; } /* the links' own 3-5px padding keeps them apart; this pays for the wider buttons */
  .nav.search-open .nav-search { padding: 8px 16px 10px; }
  .nav.search-open .nav-search svg { left: 30px !important; }
  .nav.search-open .nav-search .search-results { left: 16px; right: 16px; }
  .nav .logo { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; }
  .icon-btn { width: 40px; height: 40px; }
  .nav-search-btn, .nav #theme { flex: none; width: 40px; height: 40px; }
  .nav .season-picker { margin-left: 0; }
  .nav .season-menu { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; max-width: none; max-height: calc(100dvh - 80px); }

  /* home: title, search, three numbers, then the lists (no blurb, buttons or dream-match card) */
  .hero { padding: 20px 16px 24px; }
  .hero-title { font-size: clamp(30px, 9vw, 40px); margin: 8px 0 0; }
  .hero-search.mobile-only { display: block; margin: 18px 0 0; }
  .hero-search .search-results { left: 0; right: 0; min-width: 0; }
  .hero-actions { display: none; }
  .hero-stats { margin-top: 18px; }
  .section-title { padding: 20px 16px 8px; }
  .section-title h2 { font-size: 22px; }
  #home-events .hl-meta { display: none; }
  #home-events .hl-val { min-width: 0; }
  #home-events .hl-val > :not(.live) { display: none; }
  /* two lines so "Robot Rumble at the Raceway - Division 1/2" can be told apart */
  #home-events .hl-main b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }

  /* methodology: the reference table's long date wraps instead of widening the page */
  .ref td { white-space: normal; }
  /* comparison and track-record tables fit the screen: headers wrap, cells tighten */
  .about-tbl th, .about-tbl td { white-space: normal; padding-left: 8px; padding-right: 8px; }

  /* shared controls: primary 40px, secondary 36px */
  a.pill, button.pill { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
  td .pill, .hl-val .pill, .ev-cell .pill { min-height: 0; padding: 3px 10px; }
  .seg a { min-height: 40px; display: inline-flex; align-items: center; }
  .chart-pick a { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
  .view-pick button { min-height: 36px; }
  .toolbar .scope a { min-height: 36px; display: inline-flex; align-items: center; }
  .col-pick summary { min-height: 36px; display: inline-flex; align-items: center; }
  .series-toggle button { min-height: 36px; padding: 0 12px; }
  .more { min-height: 44px; display: flex; align-items: center; }
}
/* 40px header buttons need the room: the 380px link sizes up to 424px, and below 380 the two
   icons give up 4px of width each (still 40px tall) so the row fits */
@media (max-width: 424px) {
  .nav .nav-links a { padding: 0 3px; font-size: 13px; }
}
@media (max-width: 380px) {
  .nav-search-btn, .nav #theme { width: 36px; }
}
/* -- end shell -- */
/* -- mobile: team page -- */
/* new classes (no effect on existing desktop markup): the phone-only awards count chip,
   and the "Not ranked yet" chip for teams with only off-season matches (all widths) */
.th-awards-sum { display: none; }
.th-ranks > span.th-unranked { padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) {
  /* header: smaller type; trophy case, radar and component stats are desk-only, so the
     body row only shows when there is a photo */
  .team-hero { padding-top: 14px !important; padding-bottom: 14px !important; }
  .th-id h1 { font-size: 24px; }
  .th-fact { min-height: 32px; display: inline-flex; align-items: center; gap: .3em; }
  .th-awards-sum { display: inline-flex; }
  .th-epa > b { font-size: 36px; }
  .th-ranks > span.th-unranked { grid-column: 1 / -1; padding: 8px 10px; font-size: 13px; }
  .th-body:not(.has-photo) { display: none; }
  .th-body.has-photo { grid-template-columns: 1fr; margin-top: 12px; padding-top: 12px; }
  .th-photo { justify-self: center; width: 100%; max-width: 420px; }
  /* #1 rank: darker gold on the light cream chip (QA 6: #b8860b was 2.89:1) */
  .gold-rank b { color: #7a5a06; }
  :root[data-theme="dark"] .gold-rank b { color: #f2c94c; }
  /* event cards on the Matches view */
  .ev-title h2 { font-size: 17px; }
  .ev-head { padding: 12px 16px 8px; gap: 8px; }
  .ev-box div { padding: 4px 10px; }
  .ev-box b { font-size: 14px; }
  .ev-award { font-size: 11px; padding: 2px 8px; }
  /* Charts tab: a lone series needs no toggle; tooltips wrap inside the chart */
  .team-hero ~ #view .series-toggle:has(> button:only-child) { display: none; }
  .team-hero ~ #view .chart .tip { white-space: normal; max-width: 100%; }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gold-rank b { color: #f2c94c; }
}
/* -- end team page -- */
/* -- mobile: event page -- */
/* FTCScout link, alliance strength / W-L, round-robin avg score, forecast RS columns and the
   long explanations are .desk-only in app.js; the Teams tab defaults to Rank, Team, Record, EPA. */
@media (max-width: 640px) {
  .page-head .row { gap: 6px; }
  /* tab strip: leave a little room past the active tab when it is scrolled into view */
  .tabs { scroll-padding-inline: 16px; }
  /* Teams tab gear: 40px target */
  .gear-pick summary { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; }
  .tt-gear { top: 2px; right: 4px; }
  /* Teams tab fits 360px: tighter cells, the header's last cell clears the gear, and long
     team names stop at two lines instead of setting the column's width */
  .tt-card td, .tt-card th, #fc td, #fc th { padding-left: 5px; padding-right: 5px; }
  .tt-card td:first-child, .tt-card th:first-child, #fc td:first-child, #fc th:first-child { padding-left: 16px; }
  .tt-card td:last-child, #fc td:last-child, #fc th:last-child { padding-right: 16px; }
  .tt-card th:last-child { padding-right: 44px; }
  #fc th { white-space: normal; line-height: 1.25; letter-spacing: .02em; }
  /* forecast: number on top, name under it on one line, so the five number columns keep their room */
  #fc .team-cell { flex-direction: column; align-items: flex-start; gap: 2px; }
  #fc .team-cell .nm { display: block; width: 0; min-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; line-height: 1.3; }
  .tt-card .team-cell, #fc .team-cell { gap: 6px; }
  .tt-card .team-cell .n, #fc .team-cell .n { min-width: 0; padding: 2px 6px; }
  .tt-card .team-cell .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.3; }
  /* match-table video button (also on team pages): 36px target in a 40px column */
  .mt .vid { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; }
  .mt .vid-cell { width: 40px; padding-right: 2px !important; }
  /* bracket: 30px play button, tighter boxes and gaps */
  .bbox .play { width: 30px; height: 30px; margin-left: 4px; vertical-align: middle; }
  .bf { padding: 4px 10px; }
  .po-bracket { padding: 14px 16px 18px; gap: 14px; }
  .dgrid { column-gap: 20px; }
  .bt { font-size: 12.5px; }
  .po-alliances td.res { max-width: none; white-space: normal; }
  /* Strength and W-L are desk-only, so the Teams column takes the spare width and the captain's name fills it
     (width 0 + min-width 100%: the name never sets the column's width, only fills it) */
  .po-alliances td:nth-child(2) { width: 100%; }
  .al-name { max-width: none; width: 0; min-width: 100%; }
  /* rankings forecast: six columns fit 360px */
  #fc .epa { min-width: 40px; padding: 2px 5px; }
}
/* -- end event page -- */
/* -- mobile: teams/events lists, compete -- */
/* Teams list: table only (no chart view); #, Team, EPA, Record by default (app.js).
   Events list: no Strength column (desk-only); Teams count shown; the location/Live line is back.
   Compete / Head to head / SIM: no intro paragraph (desk-only); bigger remove buttons, full-width actions. */
@media (max-width: 640px) {
  /* lists: the Teams list's name column takes whatever the other columns leave (so #, Team,
     EPA and Record fit at 360px; names wrap to two lines), never narrower than 80px when more columns are on */
  .toolbar:has(.view-pick) ~ #tbl td:has(> a.team-cell2) { width: 100%; }
  .toolbar:has(.view-pick) ~ #tbl .team-cell2 .tc-text { max-width: none; width: 0; min-width: 80px; flex: 1 1 auto; }
  .toolbar:has(.view-pick) ~ #tbl .team-cell2 .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .toolbar:has(.view-pick) ~ #tbl :is(th, td):not(:first-child) { padding-left: 5px; }
  .toolbar:has(.view-pick) ~ #tbl :is(th, td):not(:last-child) { padding-right: 5px; }
  .ev-cell .nm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }

  /* compete: remove buttons at 36px / 32px */
  .slot-x { width: 36px; height: 36px; right: 3px; top: 3px; font-size: 20px; }
  .slot input { padding-right: 44px; }
  .sim-chip button { width: 32px; height: 32px; flex: none; }

  /* compete: mode tabs and action row span the width, Predict is a full-width primary button */
  .mode-pick { width: 100%; display: flex; }
  .mode-pick a { flex: 1 1 auto; text-align: center; justify-content: center; white-space: nowrap; padding-left: 6px; padding-right: 6px; font-size: 13px; }
  .compete-bar .row { width: 100%; }
  .compete-bar .row > .pill { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
  .vs { width: 100%; }
  .predictor .vs #go { width: 100%; min-height: 44px; }
}
/* -- end lists -- */
/* -- mobile: match page -- */
/* Phones: FTCScout pill and the Teams-table explanation are .desk-only in app.js; the
   scoreboard, breakdown and bonus RPs stay. Bigger prev/next, solid Won badge, tighter breakdown. */
@media (max-width: 640px) {
  /* Won badge: solid, readable (~4.9:1 light) */
  .mb-won { background: var(--good); color: #fff; font-size: 11.5px; padding: 2px 9px; }
  :root[data-theme="dark"] .mb-won { color: #0b2a14; }
  /* prev / All matches / next: one full-width row of 40px buttons */
  .match-actions { width: 100%; align-items: stretch; }
  .match-steps { display: flex; width: 100%; gap: 6px; flex-wrap: nowrap; }
  .match-steps .btn { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; font-size: 13px; justify-content: center; }
  /* scoreboard */
  .mb-al { padding: 10px 12px; }
  .mb-team a { font-size: 17px; }
  .mb-team small { font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .mb-big { font-size: 40px; }
  /* breakdown fits at 360px */
  .bk2-head, .bk2-row { grid-template-columns: minmax(0, 1fr) 40px 64px 40px minmax(0, 1fr); gap: 4px; }
  .bk2-l { font-size: 12px; }
  .bk2-v small { font-size: 10px; }
  .bk2-head > :nth-child(3) { font-size: 10.5px; }
  .breakdown td, .breakdown th { padding: 6px 6px; }
  /* video dialog (match page, bracket and table play buttons) */
  .video-dialog { width: calc(100vw - 16px); }
  .video-head { padding: 8px 10px; gap: 8px; }
  .video-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .video-head .link { flex: none; white-space: nowrap; }
  .video-close { min-width: 36px; min-height: 36px; }
  /* teams table: number over a one-line name, so Team / EPA before / after / rank fit at 360 */
  .match-teams td, .match-teams th { padding: 7px 5px; }
  .match-teams td:first-child { width: 100%; padding-left: 10px; }
  .match-teams td.r { white-space: nowrap; }
  .match-teams .team-cell { flex-direction: column; align-items: flex-start; gap: 2px; }
  .match-teams .team-cell .n { min-width: 0; padding: 2px 6px; }
  .match-teams .team-cell .nm { display: block; width: 0; min-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; line-height: 1.3; }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mb-won { color: #0b2a14; }
}
/* -- end match page -- */
/* -- mobile: integration (lead) -- */
/* Teams list: number above a one-line name, forecast tables: more room for names, pick list: plain EPA bars */
@media (max-width: 640px) {
  /* Teams list: the number sits above a one-line name and location, so the name gets the column's full width
     (about 150px at 360) instead of wrapping to three lines beside the number */
  .toolbar:has(.view-pick) ~ #tbl .team-cell2 { flex-direction: column; align-items: flex-start; gap: 2px; }
  .toolbar:has(.view-pick) ~ #tbl .team-cell2 .n { min-width: 0; padding: 2px 6px; }
  .toolbar:has(.view-pick) ~ #tbl .team-cell2 .tc-text { width: 100%; min-width: 0; flex: none; }
  /* width 0 + min-width 100%: the lines contribute nothing to the column's minimum width and then fill it */
  .toolbar:has(.view-pick) ~ #tbl .team-cell2 .nm, .toolbar:has(.view-pick) ~ #tbl .team-cell2 .tc-loc { display: block; width: 0; min-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* rankings forecast: the team column absorbs the spare width; smaller headers, chips and edge padding
     free about 45px, so names read "Quantum Gears" rather than "Quantu…" even with the Actual rank column */
  #fc td:nth-child(2) { width: 100%; }
  #fc th { font-size: 10.5px; }
  #fc td:first-child, #fc th:first-child { padding-left: 10px; }
  #fc td:last-child, #fc th:last-child { padding-right: 10px; }
  #fc .epa { min-width: 36px; padding: 2px 4px; }
  /* event pick list: one plain EPA bar per team (no auto / teleop / endgame split, no legend) */
  #tab .pl-legend { display: none; }
  #tab .pick-list .auto, #tab .pick-list .teleop, #tab .pick-list .endgame { background: var(--accent); }
}
/* -- end integration -- */
/* -- mobile: QA round 2 (header at 320, match table width, tap targets, live jump) -- */
.season-cur .sc-short { display: none; }
.mt-jump { display: none; }
@media (max-width: 640px) {
  /* match tables: no Video column when nothing in the table has one (ui.js adds mt-novid); when there is one,
     the header cell is blank so the 40px column isn't widened by the "VIDEO" label. Fits 360 without sideways scroll. */
  .mt.mt-novid .vid-cell { display: none; }
  .card .mt.mt-novid .vid-cell + td, .card .mt.mt-novid .vid-cell + th { padding-left: 16px; } /* the hidden cell is still :first-child */
  /* headers may wrap: "Win prob" on two lines frees ~26px, so a table with the video column fits 360 (and 320) */
  .mt th { white-space: normal; line-height: 1.2; }
  /* live event: "20 of 36 played · Jump to Q-21" above the table */
  .mt-jump { display: flex; padding: 12px 16px 4px; }
  .mt-jump .pill { min-height: 40px; }
  /* tap targets: the home banner's "Switch to …" link, the h2h team-name links, "Add a photo" */
  .side .who { margin: 0 0 4px 4px; min-height: 0; }
  .side .who a { display: inline-flex; align-items: center; min-height: 36px; }
  .th-fact.th-add { min-height: 36px; }
}
/* narrowest phones (320): the header row needed 357px. Short season label ("25–26"), tighter links and a
   smaller logo bring it under 320 with the theme toggle still on screen. */
@media (max-width: 356px) {
  .season-cur .sc-long { display: none; }
  .season-cur .sc-short { display: inline; }
  .nav .logo { min-width: 32px; }
  .nav .logo svg { width: 24px; height: 24px; }
  .nav .nav-links a { padding: 0 2px; font-size: 12.5px; }
  .nav .season-btn { padding: 0 5px; }
  /* match table with a video column: smaller headers and no minimum on the team numbers bring it from 340 to 320 */
  .mt th { font-size: 10.5px; letter-spacing: .03em; }
  .mt-al .tn { min-width: 0; }
  .card .mt td:first-child, .card .mt th:first-child { padding-left: 10px; }
  .card .mt td:last-child, .card .mt th:last-child { padding-right: 10px; }
  .card .mt.mt-novid .vid-cell + td, .card .mt.mt-novid .vid-cell + th { padding-left: 10px; }
  /* about tables: smaller type and tighter cells so the track-record table fits 320 */
  .about-tbl table { font-size: 13px; }
  .about-tbl th, .about-tbl td { padding-left: 6px; padding-right: 6px; }
}
/* -- end QA round 2 -- */
/* methodology: the "why" detail sits collapsed under the model list */
.hero-stats i { font-style: normal; }
.about-more { margin-top: 16px; }
.about-more summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }
.about-more p { margin: 8px 0 0; }
/* ---- mobile cuts: home ---- */
@media (max-width: 640px) {
  /* hero: no headline or search (the header icon is the one search); the season line and the stats are one muted line each */
  .hero { padding: 0 16px; margin-top: 0; gap: 0; }
  .banner { margin: 0 0 8px; }
  .hero-row { display: block; }
  .hero-actions { display: none; }
  .hero-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 0; font-size: 13px; color: var(--muted); }
  .hero-stats > div { white-space: nowrap; }
  .hero-stats > div + div::before { content: "·"; padding: 0 8px; }
  .hero-stats b { display: inline; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--text); }
  .hero-stats span { display: inline; font-size: 13px; line-height: 1.5; margin: 0 0 0 4px; }
  .hero-stats .hs-x { display: none; }
  /* lists sit on the page, rows split by hairlines, no card box */
  .section-title { padding: 24px 16px 8px; }
  .section-title h2 { font-size: 20px; margin-top: 0; }
  .hero-below .card { background: none; border: 0; }
  .hl-val { min-width: 0; }
  .hl-row { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .hl-val .epa { font-size: 15px; padding: 4px 8px; }
  #top-teams .hl-main b { font-size: 15px; white-space: normal; line-height: 1.3; }
  main { padding-bottom: 16px; }
  footer { padding: 16px 16px 24px; }
  /* methodology: tables share one edge (16px gutter both sides), no boxes, 12px headers */
  .about-tbl.card, .about-ref.card, .about-intro.card { background: none; border: 0; }
  .about-intro.card-pad { padding-top: 8px; padding-bottom: 0; }
  .about-intro p { margin: 8px 0 0; }
  .about-ref.card-pad { padding-top: 0; padding-bottom: 0; }
  .about-list { margin: 0; padding-left: 16px; }
  .about-ref > h2 { margin: 8px 0 8px; }
  .about-tbl th { font-size: 12px; }
  .about-tbl th:first-child, .about-tbl td:first-child { padding-left: 16px; }
  .about-tbl th:last-child, .about-tbl td:last-child { padding-right: 16px; }
  .about-tbl :is(th, td):nth-last-child(1 of :not(.hide-sm)) { padding-right: 16px; }
  .ref td:first-child { padding-left: 0; }
  .ref td:last-child { padding-right: 0; }
}

/* ---------- the robot (mascot) ----------
   One drawing (ROBOT_PARTS in ui.js): the desktop logo, the loading state, empty pages and the
   no-matches field. Motion is rare: a one-time spin-in on the logo, a strafe on hover, a drive
   while loading. Reduced motion keeps it still. See STYLE.md "The robot". */
.bot { display: block; overflow: visible; }
.bot .bot-g { transform-box: view-box; transform-origin: 0 0; }
/* the logo drives in from off the left edge (strafing, still facing forward), then spins once on the spot */
.logo-bot { animation: bot-enter 1.3s cubic-bezier(.2, .7, .25, 1) .1s both; }
.logo-bot .bot-g { animation: bot-spin .55s ease-in-out 1.3s both; }
@keyframes bot-enter { from { transform: translateX(calc(-1 * var(--gutter) - 48px)); } to { transform: none; } }
@keyframes bot-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.logo:hover .logo-bot .bot-g { animation: bot-strafe .9s ease-in-out; }
@keyframes bot-strafe { 0%, 100% { transform: none; } 30% { transform: translateX(-5px); } 70% { transform: translateX(5px); } }
.loading { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bot-wait .bot-g { animation: bot-wait 2.6s ease-in-out infinite; }
@keyframes bot-wait {
  0% { transform: translateX(-16px); } 40% { transform: translateX(16px); }
  50% { transform: translateX(16px) rotate(180deg); } 90% { transform: translateX(-16px) rotate(180deg); }
  100% { transform: translateX(-16px) rotate(360deg); }
}
.bot-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px var(--gutter); text-align: center; }
.bot-empty .bot { margin-bottom: 8px; }
.bot-empty b { font-size: 20px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .bot, .bot .bot-g { animation: none !important; } }
/* phones: no logo; the nav links take its place */
@media (max-width: 640px) { .nav .logo { display: none; } }
.bot-inline { display: inline-flex; align-items: center; gap: 10px; }
/* ---- mobile cuts: lists ---- */
@media (max-width: 640px) {
  /* Teams list: number and name on one line, no location line (it's on the team page; Country/State are filters) */
  .toolbar:has(.view-pick) ~ #tbl .team-cell2 { flex-direction: row; align-items: baseline; gap: 8px; }
  .toolbar:has(.view-pick) ~ #tbl .team-cell2 .n { min-width: 5ch; padding: 0; }
  .toolbar:has(.view-pick) ~ #tbl .team-cell2 .tc-text { width: 0; min-width: 0; flex: 1 1 auto; }
  .toolbar:has(.view-pick) ~ #tbl .team-cell2 .tc-loc { display: none; }
  .toolbar:has(.view-pick) ~ #tbl .team-cell2 .nm { width: auto; min-width: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
  /* Teams toolbar: two rows on one 2-column grid; Columns is a gear at the end of the search row;
     the Season only / All events switch is desktop only */
  .toolbar:has(.view-pick) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "q q" "c m"; gap: 8px; }
  .toolbar:has(.view-pick):has(> #state:not([hidden])) { grid-template-areas: "q m" "c s"; }
  .toolbar:has(.view-pick) > #filter { grid-area: q; width: calc(100% - 44px); }
  .toolbar:has(.view-pick) > #country { grid-area: c; }
  .toolbar:has(.view-pick) > #state { grid-area: s; }
  .toolbar:has(.view-pick) > #minm { grid-area: m; }
  .toolbar:has(.view-pick) > .col-pick { grid-area: q; justify-self: end; }
  /* with a state picked, the gear moves to the end of the top row, beside the matches filter */
  .toolbar:has(.view-pick):has(> #state:not([hidden])) > #filter { width: auto; }
  .toolbar:has(.view-pick):has(> #state:not([hidden])) > #minm { width: calc(100% - 44px); }
  .toolbar:has(.view-pick):has(> #state:not([hidden])) > .col-pick { grid-area: m; }

  .toolbar .col-pick summary { width: 36px; padding: 0; justify-content: center; color: var(--muted); }
  .toolbar .col-pick summary .show-sm { display: inline-flex; }
  .toolbar .col-pick summary svg { width: 16px; height: 16px; margin: 0; }
  /* Events toolbar without a Status filter: search shares a row with Month, Type and Country below */
  .toolbar:has(#month) { gap: 8px; }
  .toolbar:has(#month):not(:has(#status)) { grid-template-areas: "q mo" "t c"; }
  .toolbar:has(#month):not(:has(#status)):has(> #state:not([hidden])) { grid-template-areas: "q q" "t c" "s mo"; }
  .toolbar:has(#month):not(:has(#status)) > #filter { grid-area: q; }
  .toolbar:has(#month):not(:has(#status)) > #type { grid-area: t; }
  .toolbar:has(#month):not(:has(#status)) > #country { grid-area: c; }
  .toolbar:has(#month):not(:has(#status)) > #state { grid-area: s; }
  .toolbar:has(#month):not(:has(#status)) > #month { grid-area: mo; }
  /* Events list: one-line event name and location, so every row is the same height */
  .toolbar:has(#month) ~ #tbl td:has(> a.ev-cell) { width: 100%; max-width: 0; }
  .toolbar:has(#month) ~ #tbl .ev-cell .n, .toolbar:has(#month) ~ #tbl .ev-cell .nm { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* line score: the alliance's robots (with a photo avatar when the team has one) instead of a bare "Red"/"Blue" */
.card .line-score td.ls-who { padding-left: 18px; padding-right: 8px; }
.ls-team { display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.ls-team b { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ls-team + .ls-team { margin-top: 4px; }
.ls-team.sat-out { opacity: .5; }
.ls-team:hover b { text-decoration: underline; }
.avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
/* advancement tables on phones: names stop at two lines so Total and Advanced stay on screen */
@media (max-width: 640px) { .adv-table .team-cell .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 46vw; } }
/* ---- team + compete cuts (all widths) ---- */
/* team header: no card border; record / win rate / awards and the ranks are plain lines, links are small text */
.team-hero.card { border-top: 0; border-bottom: 0; }
.th-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 8px; }
.th-line { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.th-links { display: inline-flex; align-items: baseline; gap: 16px; }
.th-facts .th-links a.th-add, .th-facts .th-links .share-btn { font-size: 13px; font-weight: 400; padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); }
.th-facts .th-links a.th-add:hover, .th-facts .th-links .share-btn:hover { color: var(--accent); }
.th-ranks { display: block; font-size: 15px; font-weight: 400; color: var(--muted); }
.th-ranks > span, .th-ranks > span.gold-rank, .th-ranks > span.th-unranked { display: inline; padding: 0; border: 0; border-radius: 0; background: none; font-size: 15px; font-weight: 400; }
.th-ranks > span + span::before { content: " · "; }
.th-ranks b { font-size: 15px; font-weight: 800; letter-spacing: 0; }
/* team events: one pane, a hairline between events, the event's numbers as one plain line */
.team-evs .ev + .ev { border-top: 1px solid var(--line); }
.team-evs .ev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-top: 24px; padding-bottom: 8px; }
.team-evs .ev-main { min-width: 0; }
.team-evs .ev-stats { display: none; } /* desktop: the numbers are in the box on the right */
@media (max-width: 640px) { .team-evs .ev-head { display: block; } .team-evs .ev-box { display: none; } .team-evs .ev-stats { display: block; } }
.team-evs .ev-head h2 { margin: 0; }
.ev-stats { margin-top: 4px; font-size: 15px; font-variant-numeric: tabular-nums; }
.ev-stats b { color: var(--text); font-weight: 600; }
.ev-awards { margin-top: 4px; }
.ev-win { color: var(--gold); font-weight: 600; }
.team-evs .ev-empty { padding-top: 16px; padding-bottom: 16px; font-size: 15px; color: var(--muted); }
.team-evs .ev-empty a { color: var(--text); font-weight: 600; }
.vid-lbl { display: none; }
/* team charts: plain-text legend, no empty note */
.team-chart .series-toggle { gap: 4px 16px; }
.team-chart .series-toggle button { padding: 4px 0; border: 0; border-radius: 0; background: none; font-size: 13px; }
#chart-note:empty { display: none; }
/* compete: alliances side by side marked by their heading only; Predict and its helpers in one row below */
.predictor { grid-template-columns: 1fr 1fr; }
.predictor .side.red, .predictor .side.blue { box-shadow: none; }
.compete-bar .row { gap: 8px; }
.compete-bar .btn { min-height: 32px; padding: 4px 16px; font-size: 13px; font-weight: 600; border-width: 1px; }
#go:disabled { opacity: 0.45; cursor: not-allowed; }
.match-board .feature-body { grid-template-columns: 1fr; padding-top: 16px; padding-bottom: 8px; }
.match-board .feature-score { font-size: 56px; font-weight: 800; }
/* ---- mobile cuts: team ---- */
@media (max-width: 640px) {
  /* header: EPA with the ranks as one plain line beside it */
  .th-ranks { display: block; margin-top: 0; }
  .th-ranks > span { display: inline; white-space: nowrap; line-height: 1.5; text-align: left; }
  .th-ranks b { display: inline; font-size: 15px; margin: 0; }
  .th-facts { margin-top: 8px; }
  .th-facts .th-links .share-btn { min-height: 36px; }
  /* event list: no Video column; the match label plays the video, rows without one show nothing extra */
  .team-evs .ev-head { padding-top: 16px; }
  .team-evs .ev-head h2 { font-size: 18px; }
  .team-evs .mt .vid-cell { display: none; }
  .card.team-evs .mt .vid-cell + td, .card.team-evs .mt .vid-cell + th { padding-left: 16px; }
  .team-evs .mt td.lvl:has(.vid-lbl) .match-link { display: none; }
  .team-evs .mt .vid-lbl { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
  /* charts: compare box at its natural width */
  .vs-form { flex: none; }
  .vs-form input { flex: none; width: 160px; }
  /* compete: alliances stacked; score at the phone display size */
  .predictor { grid-template-columns: 1fr; }
  .compete-bar .btn { min-height: 36px; padding: 4px 12px; }
  /* Robots table: number and name share one left edge */
  #out .match-teams td:first-child, #out .match-teams th:first-child { padding-left: 16px; }
  #out .match-teams .team-cell .n { padding-left: 0; padding-right: 0; }
  .match-board .feature-score { font-size: 32px; }
}
/* ---- event + match pages: plain header, one pane (all widths) ---- */
/* header on the page background: kicker, then the title with its links as small text and Share as an icon */
.head-plain { padding-top: 24px; padding-bottom: 8px; }
.head-plain .head-main { flex: 1 1 auto; min-width: 0; }
.head-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.head-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; }
button.link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.share-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.share-icon svg { width: 16px; height: 16px; }
/* match sections share the page: a hairline between them instead of a box each */
.match-sec.card { background: none; border-bottom: 0; border-top: 1px solid var(--line); }
.match-sec h2 { font-size: 20px; }
/* match tables: the winner's score is bold text, not green (green means up/down) */
.final .w { color: var(--text); }
/* playoffs: seeds and game scores as plain text, alliance shown by the team colours, plain section labels */
.seed { min-width: 0; padding: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 600; }
.bl, .bl.red, .bl.blue { border-left: 0; }
.bgame, .bgame.red, .bgame.blue { padding: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.bgame + .bgame::before { content: ", "; color: var(--muted); }
.po-h, .bsec-h { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
/* ---- mobile cuts: event ---- */
@media (max-width: 640px) {
  /* headers: tighter, links stay on the title row */
  .head-plain { padding-top: 16px; padding-bottom: 0; }
  .head-title { gap: 4px 16px; }
  /* event: a long name wraps beside its Share icon instead of leaving the icon alone on a line */
  .head-title-ev { flex-wrap: nowrap; align-items: flex-start; }
  .head-title-ev h1 { min-width: 0; }
  .head-title-ev .head-links { flex: none; }
  .head-links .show-sm { display: inline; }
  /* tabs: Picks is hidden and the labels are short, so every tab fits 360px without scrolling */
  .tabs a.hide-sm { display: none; }
  .tabs a { padding: 8px; font-size: 13px; }
  .head-links .link:not(.hide-sm) { display: inline-flex; align-items: center; min-height: 36px; }
  .share-icon { width: 36px; height: 36px; margin-right: -8px; }
  /* match: no video placeholder (Watch in the header opens the player); the score comes right after the header */
  .match-stage .stage-video { display: none; }
  .match-stage { gap: 0; }
  /* the Teams table below is the roster, so the scoreboard is just the score */
  .bug-al { display: none; }
  .bug-row, .stage-side .bug-row { grid-template-columns: 1fr; }
  .bug-score { justify-content: center; }
  .match-sec h2 { font-size: 18px; }
  /* line score: actual numbers only; the predicted total is under the big score */
  .line-score td small, .ls-note { display: none; }
  .line-score td:not(:first-child), .line-score th:not(:first-child) { padding-left: 4px; padding-right: 4px; }
  /* no video: the scoreboard keeps the page's 16px sides */
  .section > .bug { padding-left: 16px; padding-right: 16px; }
  /* event Matches: no video column (the match page has the video) */
  #tab .mt .vid-cell { display: none; }
  #tab .mt .vid-cell + td, #tab .mt .vid-cell + th { padding-left: 16px; }
  /* playoffs: the alliances and how they finished first; the bracket is the Matches tab's playoff rows */
  .po-alliances { order: -1; border-top: 0; }
  .po-bracket:not(:has(.rr-standings)) { display: none; }
  .po-bracket > :not(.rr-standings) { display: none; }
  .po-bracket { border-top: 1px solid var(--line); }
  /* forecast: short label, number and name on one line sharing a left edge, #1 as plain text */
  .fc-from .show-sm { display: inline; }
  #fc .team-cell { flex-direction: row; align-items: baseline; gap: 8px; }
  #fc .team-cell .n { padding: 0; }
  #fc .team-cell .nm { flex: 1 1 auto; width: 0; min-width: 0; }
  #fc td:nth-child(6) .epa { min-width: 0; padding: 0; background: none !important; color: var(--text) !important; font-weight: 600; }
}

/* ---- QA follow-ups (phones) ---- */
@media (max-width: 640px) {
  /* event names that differ only at the end stay tellable apart: 2 lines, then … */
  .toolbar:has(#month) ~ #tbl .ev-cell .n { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .toolbar .scope a { white-space: nowrap; }
  th span.show-sm { display: inline; }
  .card .line-score td.ls-who { padding-left: 12px; padding-right: 4px; }
  /* Points tab: plain "Advanced" text instead of a pill, so the table fits 360px */
  .adv-table .pill { background: none; border: 0; padding: 0; color: var(--good); font-weight: 600; }
  .adv-table td, .adv-table th { padding-left: 6px; padding-right: 6px; }
  /* match line score: bonus RPs move to a line under the table instead of off-screen columns */
  .line-score .ls-rp { display: none; }
  .line-score { table-layout: fixed; width: 100%; min-width: 0; }
  .ls-rp-line { margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
  /* compete result card keeps the page gutter */
  #out .match-board { margin-left: 16px; margin-right: 16px; }
}

/* phone header: season on the left, links, a real search bar on the right; a little taller than before */
@media (max-width: 640px) {
  .nav .nav-inner { height: 64px; gap: 8px; }
  .nav .nav-search, .nav.search-open .nav-search { display: block !important; position: static; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .nav .nav-search > svg { position: absolute; left: auto; top: auto; transform: none; margin: 12px 0 0 12px; }
  .nav.search-open .nav-search > svg, .nav .nav-search > svg { left: auto !important; }
  .nav .nav-search input, .nav.search-open .nav-search input { width: 100%; height: 40px; padding: 0 8px 0 32px; border: 1px solid var(--line); }
  .nav .nav-search input:focus { border-color: var(--text); }
  .nav .nav-search .search-results, .nav.search-open .nav-search .search-results { top: 100%; left: 16px; right: 16px; min-width: 0; max-height: calc(100dvh - 80px); overflow-y: auto; }
  .nav .season-picker { order: -1; }
  .nav-search-btn { display: none !important; }
  .nav .season-menu { top: 72px; }
}

/* head to head keeps its VS column between the two teams (the compete cut above made the grid two columns) */
@media (min-width: 701px) { .predictor:has(> .vs) { grid-template-columns: 1fr auto 1fr; } }
/* team match tables: the play button lines up with the event title on the left */
@media (min-width: 641px) {
  .mt th.vid-cell, .mt td.vid-cell { text-align: left; }
}

/* the sorted column is a light blue strip (it moves when you sort by another column); the teams and events lists
   show EPA there as plain numbers, no chips. The strip is a background image sized to the column, because the first
   and last cells carry the page gutter as padding (so zebra rows and hovers run edge to edge): on those the strip
   stops where a normal cell's 12px padding would start, instead of bleeding across the margin. */
th.col-sorted, td.col-sorted, tbody tr td.col-sorted { background-color: transparent; background-image: linear-gradient(var(--sorted-tint), var(--sorted-tint)); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; }
.card :is(th, td).col-sorted:first-child { background-size: calc(100% - var(--gutter) + 12px) 100%; background-position: right center; }
.card :is(th, td).col-sorted:last-child { background-size: calc(100% - var(--gutter) + 12px) 100%; background-position: left center; }
@media (max-width: 640px) { .card :is(th, td).col-sorted:first-child, .card :is(th, td).col-sorted:last-child { background-size: 100% 100%; } } /* phones: 16px gutter, the strip meets the edge */
td.epa-col .epa { background: none !important; color: var(--text) !important; padding: 0; min-width: 0; font-weight: 600; }
/* event Teams tab: the gear's middle on the header row's middle (the 40px phone tap target sat 6px low) */
@media (max-width: 640px) { .tt-gear { top: -4px; } }
/* phones: each team number in a match list is its own ~26px-tall, wider tap target (they were 21px slivers);
   the row keeps its height because the line is tighter */
@media (max-width: 640px) {
  .mt .mt-al .tn { display: block; line-height: 1.3; padding: 4px 12px; }
}
/* phones, small alignment fixes: methodology tables share column widths so Winner correct / Brier line up between them;
   season reference values sit on the right edge; match Teams table: number and name start on the same 16px line */
@media (max-width: 640px) {
  .about-tbl :is(th, td):nth-last-child(1 of :not(.hide-sm)) { width: 64px; }
  .about-tbl :is(th, td):nth-last-child(2 of :not(.hide-sm)) { width: 112px; }
  .ref td.r { text-align: right; }
  .card .match-teams td:first-child { padding-left: 16px; }
  .match-teams .team-cell .n { padding-left: 0; }
}
/* the EPA strip stays one even colour through the zebra rows; the season reference list has no zebra (it drew boxes
   inside the padded card); the match Teams table keeps the 16px margin on the right too */
@media (max-width: 640px) {
  .ref tbody tr td { background: none; }
  .card .match-teams :is(td, th):nth-last-child(1 of :not(.hide-sm)) { padding-right: 16px; } /* the hidden Record column is the real last child */
}
/* home: once refitHome has picked the row count, the rows stretch evenly to fill their card (no gap above the links) */
@media (min-width: 901px) and (min-height: 520px) {
  body.home-fit:not(.home-scroll) .hl.fitted { min-height: 100%; }
  body.home-fit:not(.home-scroll) .hl.fitted > .hl-row { flex: 1 1 auto; }
}
/* search results: a long event name stops at one line (…) so the date / season beside it never wraps */
.search-results a b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results a .muted { flex: none; white-space: nowrap; }
/* desktop header search: results wider than the box (opening leftwards), so division names fit */
@media (min-width: 901px) { .nav-search .search-results { left: auto; min-width: 480px; } }
/* teams list "Season only | All events": the same segmented switch as Table | Chart beside it */
.toolbar .scope { gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.toolbar .scope a { min-height: 32px; margin: 0; padding: 0 12px; border: 0; border-radius: 6px; color: var(--muted); }
.toolbar .scope a:hover { color: var(--text); }
/* the chosen side: solid blue with white text (Table | Chart matches) */
.toolbar .scope a.active, .toolbar .scope a.active:hover, .view-pick button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.toolbar .scope a.active::after { content: none; }
/* phones: the blue sorted column gets a little room either side of its numbers */
@media (max-width: 640px) { th.col-sorted, td.col-sorted { padding-left: 16px !important; padding-right: 16px !important; } }
/* sortable lists (teams, events, event Teams tab): number columns hug their content, with a floor so they stay evenly
   readable; the Team / Event column takes every leftover pixel, so a wide screen never stretches the last column */
@media (min-width: 641px) {
  :is(#tbl, .tt-card) table :is(th.num, th.r, th.c) { width: 1%; min-width: 96px; white-space: nowrap; }
  :is(#tbl, .tt-card) table th.num { min-width: 56px; }
  :is(#tbl, .tt-card) table :is(td.r, td.c) { white-space: nowrap; }
}
/* segmented switch (one blue pill marks the choice): which chart on the team page */
.seg-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.seg-switch a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg-switch a:hover { color: var(--text); }
.seg-switch a.active { background: var(--accent); color: var(--on-accent); }
/* team page: the switch and the compare box share the tabs row, right-aligned, all 38px tall */
.chart-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chart-side .vs-form { gap: 8px; }
.chart-side .vs-form input { box-sizing: border-box; width: 190px; height: 38px; padding: 0 12px; }
.chart-side .vs-form .btn { box-sizing: border-box; height: 38px; padding: 0 16px; }
@media (max-width: 640px) {
  .chart-side { flex: 1 1 100%; }
  .chart-side .vs-form { flex: 1 1 100%; }
  .chart-side .vs-form input { flex: 1 1 auto; width: auto; min-width: 0; }
}
/* match page: previous / next as one bordered pair of buttons, level with the title */
.page-head .match-nav-btns { align-self: center; display: inline-flex; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.match-nav-btns a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.match-nav-btns a + a { border-left: 1px solid var(--line); }
.match-nav-btns a:hover { background: var(--hover); text-decoration: none; }
@media (max-width: 640px) { .page-head .match-nav-btns { align-self: flex-start; } }
/* theatre (after play): the video fills the window below the 84px header with 16px margins; the score strip matches */
body.theatre .match-stage { padding: 0 16px; }
body.theatre .match-stage .stage-video, body.theatre .stage-side .bug { width: min(100%, calc((100dvh - 116px) * 16 / 9)); min-width: 0; }
/* loading: a mecanum wheel, side on, spinning (the robot itself is for empty states) */
.mw { display: block; overflow: visible; }
.mw .mw-g { transform-box: view-box; transform-origin: 0 0; animation: mw-spin 1.1s linear infinite; }
.mw-hub { fill: var(--accent); }
.mw-roller { fill: var(--accent); opacity: .85; }
.mw-ring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .35; }
@keyframes mw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mw .mw-g { animation: none; } }
/* match page: "Score & teams ↓" pill at the foot of the first screen while the video fills it; gone once you scroll */
.scroll-hint { position: fixed; left: 50%; bottom: 16px; z-index: 5; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .2s; }
.scroll-hint:hover { color: var(--text); }
.scroll-hint.gone { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .scroll-hint { display: none; } } /* phones: the score sits right under the title */
/* ---- one look for controls (the switch style): 8px corners, 1px line, surface-2, 13px/600; the chosen option or the
   primary action is solid accent with white text. Pill groups (Compete modes, This season | Career, Matches per team,
   the chart type picker) and the action buttons around them all follow it. ---- */
.chart-pick { gap: 2px; padding: 2px; border-radius: 8px; }
.chart-pick a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 6px; }
.chart-pick a:hover { color: var(--text); }
.chart-pick a.active { background: var(--accent); color: var(--on-accent); }
.compete-bar .btn, button.pill, .vs-form .btn { box-sizing: border-box; min-height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; }
.compete-bar .btn:hover, button.pill:hover, .vs-form .btn:hover { background: var(--hover); color: var(--text); opacity: 1; }
.compete-bar .btn-solid, .vs-form .btn-solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.compete-bar .btn-solid:hover, .vs-form .btn-solid:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.08); }
.sim-ev input { box-sizing: border-box; min-height: 38px; padding: 0 12px; border-radius: 8px; }