/* Tournament Odds Design System v1, tokens and type scale.
   Tokens live on body.ui-new (set statically in index.html); components are scoped under #uiNew. */

body.ui-new {
  /* Primitive palette (doc §03) */
  --ink-900: oklch(0.18 0.015 265);
  --ink-700: oklch(0.30 0.015 265);
  --ink-500: oklch(0.45 0.012 265);
  --ink-300: oklch(0.78 0.005 265);
  --ink-200: oklch(0.88 0.005 265);
  --ink-150: oklch(0.92 0.004 265);
  --ink-100: oklch(0.96 0.003 265);
  --white: oklch(1 0 0);
  --cobalt-600: oklch(0.42 0.19 262);
  --cobalt-500: oklch(0.50 0.19 262);
  --cobalt-050: oklch(0.96 0.02 262);
  --vermilion-600: oklch(0.50 0.18 30);
  --vermilion-500: oklch(0.57 0.19 32);
  --vermilion-050: oklch(0.965 0.018 20);

  /* Semantic roles (doc §03) */
  --bg-page: var(--white);
  --bg-muted: var(--ink-100);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-disabled: var(--ink-300);
  --text-on-team: var(--white);
  --rule-strong: var(--ink-900);
  --rule: var(--ink-200);
  --rule-soft: var(--ink-150);
  --rule-on-team: rgb(255 255 255 / 0.35);
  --accent: var(--cobalt-500);
  --accent-hover: var(--cobalt-600);
  --accent-wash: var(--cobalt-050);
  --line: var(--cobalt-500);
  --move-up: var(--cobalt-500);
  --move-down: var(--vermilion-600);
  --alert: var(--vermilion-500);
  --focus: var(--cobalt-500);
  --elevation-shadow: 0 8px 24px oklch(0.18 0.015 265 / 0.12);
  --team-fallback: var(--ink-500);

  /* Spacing scale (doc §04) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 80px;
  --space-10: 104px;

  /* Fonts */
  --font-sans: Archivo, Helvetica, Arial, sans-serif;
  --font-serif: Newsreader, Georgia, serif;

  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* ---------- Geometry: radius 0 everywhere, box-sizing reset, scoped to the new UI only ---------- */
#uiNew, #uiNew * { box-sizing: border-box; border-radius: 0 !important; }
#uiNew button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
#uiNew a { color: var(--accent); text-decoration: none; }
#uiNew a:hover { color: var(--accent-hover); }

html { -webkit-text-size-adjust: 100%; }
body.ui-new { margin: 0; background: var(--bg-page); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Bare-element defaults the components were built on (formerly the classic stylesheet's).
   :where() keeps them at plain type-selector weight, so every class rule below still wins. */
:where(#uiNew) :where(p, h1, h2, h3) { margin: 0; }
:where(#uiNew) select { color: inherit; }
:where(#uiNew) small { display: block; color: var(--text-secondary); font-size: 12px; font-weight: 400; line-height: 1.4; }

/* The two explainer popovers in index.html (#popHow, #popSchedule): a floating layer (doc §06),
   square, 1px ink edge plus elevation, light-dismiss via the native Popover API. */
body.ui-new .pop { max-width: min(420px, calc(100vw - 32px)); margin: auto; padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rule-strong); border-radius: 0; background: var(--bg-page); color: var(--text-primary);
  font: 400 15px/1.5 var(--font-sans); box-shadow: var(--elevation-shadow); }
body.ui-new .pop::backdrop { background: transparent; }
body.ui-new .pop p { margin: 0; }
body.ui-new .pop p + p { margin-top: var(--space-2); }
body.ui-new .pop .x { float: right; margin: -10px -12px 0 8px; min-width: 44px; min-height: 44px; border: 0; padding: 0;
  background: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; }

/* ---------- Rule weights (doc §06) ---------- */
#uiNew .rule-section { border-top: 3px solid var(--rule-strong); }
#uiNew .rule-head { border-bottom: 1px solid var(--rule-strong); }
#uiNew .rule { border-top: 1px solid var(--rule); }
#uiNew .rule-soft { border-top: 1px solid var(--rule-soft); }
#uiNew .rule-focus { border-top: 3px solid var(--accent); }
#uiNew .the-line { border-top: 5px solid var(--line); }
#uiNew .team-tick { border-left: 6px solid var(--team-fallback); }

/* Floating layers: 1px ink edge + elevation shadow, never used elsewhere (doc §06). */
#uiNew .floating { background: var(--bg-page); box-shadow: 0 0 0 1px var(--rule-strong), var(--elevation-shadow); }

/* Out-state and unofficial outlines (doc §06) */
#uiNew .outline-out { outline: 2px solid var(--ink-900); outline-offset: -2px; }
#uiNew .outline-unofficial { outline: 1.5px dashed var(--ink-500); outline-offset: -1.5px; }

/* ---------- Type scale (doc §02). Compact value is the default; Wide applies at >=1024px. ---------- */
#uiNew .num-hero { font-family: var(--font-sans); font-weight: 800; font-stretch: 62%; font-size: 136px; line-height: .76; letter-spacing: -.03em; }
#uiNew .num-xl   { font-family: var(--font-sans); font-weight: 800; font-stretch: 62%; font-size: 64px;  line-height: .78; letter-spacing: -.03em; }
#uiNew .num-l    { font-family: var(--font-sans); font-weight: 800; font-stretch: 62%; font-size: 40px;  line-height: .80; letter-spacing: -.02em; }
#uiNew .num-m    { font-family: var(--font-sans); font-weight: 800; font-stretch: 62%; font-size: 24px;  line-height: .90; letter-spacing: -.01em; }
#uiNew .num-s    { font-family: var(--font-sans); font-weight: 800; font-stretch: 62%; font-size: 18px;  line-height: 1;   letter-spacing: 0; font-variant-numeric: tabular-nums; }

#uiNew .name-page { font-family: var(--font-sans); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 44px; line-height: .86; letter-spacing: -.03em; }
#uiNew .name-xl   { font-family: var(--font-sans); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 34px; line-height: .90; letter-spacing: -.025em; }
#uiNew .name-l    { font-family: var(--font-sans); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 26px; line-height: .92; letter-spacing: -.02em; }
#uiNew .name-m    { font-family: var(--font-sans); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 20px; line-height: .95; letter-spacing: -.01em; }
#uiNew .name-s    { font-family: var(--font-sans); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 16px; line-height: 1;   letter-spacing: 0; }

/* margin-top: Dave's report, 2026-09-29 - this sits right under the division
   title (.name-page) on the class page with no gap at all. */
#uiNew .serif-display { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 36px; line-height: 1;    letter-spacing: -.015em; margin-top: var(--space-5); }
#uiNew .serif-story    { font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1.05; letter-spacing: -.01em; }
#uiNew .serif-section  { font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1.1;  letter-spacing: 0; }
#uiNew .serif-dek      { font-family: var(--font-serif); font-weight: 400; font-size: 18px; line-height: 1.35; letter-spacing: 0; max-width: 860px; white-space: pre-line; }
#uiNew .serif-body     { font-family: var(--font-serif); font-weight: 400; font-size: 17px; line-height: 1.4;  letter-spacing: 0; max-width: 860px; }
#uiNew .serif-caption  { font-family: var(--font-serif); font-weight: 400; font-size: 15px; line-height: 1.2;  letter-spacing: 0; }

#uiNew .ui-text   { font-family: var(--font-sans); font-size: 15px; line-height: 1.35; }
#uiNew .ui-text-s { font-family: var(--font-sans); font-size: 14px; line-height: 1.35; }
/* Supporting numbers in a table (standings' Heal, Top 4, Top seed, Region, State, Proj.): "tabular UI at 700" per
   the doc's Standings pattern, so only the lead number (Makes it, num-m) uses the Numeral role. */
#uiNew .ui-num { font-family: var(--font-sans); font-size: 14px; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; }
#uiNew .meta-text { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; color: var(--text-secondary); }
#uiNew .label-text { font-family: var(--font-sans); font-weight: 900; text-transform: uppercase; font-size: 11px; letter-spacing: .14em; line-height: 1.2; }

/* Rank primitive (doc §15): its own responsive sizing, distinct from the generic "ui" token
   above (UI role weight 800, tabular, 15px Compact, 18px Wide). */
#uiNew .rank-num { font-family: var(--font-sans); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; }

@media (min-width: 640px) {
  #uiNew .label-text { font-size: 12px; }
}
@media (min-width: 1024px) {
  #uiNew .rank-num { font-size: 18px; }
}
/* Standings title row: "The tournament picture" with the class meta line ("12 teams · top 8
   make it · ...") beside it, right-aligned on the title's baseline where it fits and wrapping
   under it on a phone, with room before the column heads (Dave, 2026-09-30: it was
   cramping the table). */
#uiNew .standings-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--space-1) var(--space-4); margin: var(--space-6) 0 var(--space-4); }
@media (min-width: 1024px) {
  #uiNew .num-hero { font-size: 220px; }
  #uiNew .num-xl   { font-size: 96px; }
  #uiNew .num-l    { font-size: 56px; }
  #uiNew .num-m    { font-size: 28px; }
  #uiNew .num-s    { font-size: 20px; }
  #uiNew .name-page { font-size: 104px; }
  #uiNew .name-xl   { font-size: 64px; }
  #uiNew .name-l    { font-size: 40px; }
  #uiNew .name-m    { font-size: 24px; }
  #uiNew .name-s    { font-size: 18px; }
  #uiNew .serif-display { font-size: 64px; }
  #uiNew .serif-story    { font-size: 32px; }
  #uiNew .serif-section  { font-size: 30px; }
  #uiNew .serif-dek      { font-size: 24px; line-height: 1.35; }
  #uiNew .serif-body     { font-size: 19px; }
  #uiNew .serif-caption  { font-size: 16px; }
}

/* ---------- Layout grid (doc §05) ---------- */
#uiNew .page {
  max-width: 1440px; margin: 0 auto;
  padding: var(--space-8) 22px;
}
@media (min-width: 640px) {
  #uiNew .page { padding: var(--space-8) 40px; }
}
@media (min-width: 1024px) {
  #uiNew .page { padding: var(--space-9) 72px var(--space-10); }
}

/* Two content sections that read fine stacked on a phone but leave a lot of empty
   horizontal room at Wide once there's a full 1440px page to fill (Dave's call, on the
   class page's Latest results/In the news and the team page's What if/Root for). */
#uiNew .two-col { display: block; }
/* Class page lead: article beside Latest results at Wide, stacked under it below Wide. */
#uiNew .lead-grid { display: grid; gap: var(--space-6); margin-top: var(--space-4); }
@media (min-width: 1024px) {
  #uiNew .lead-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start; }
}
@media (min-width: 1024px) {
  #uiNew .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
}

/* Team page (Option A, cloud design session, 2026-09-30 - Dave meant A, not the
   dashboard-grid "Option B" shipped moments earlier): a persistent left identity rail
   next to a wide main column, instead of one stacked column. Compact/Medium are
   unaffected (.team-layout/.team-rail/.team-main are plain blocks there, so the rail's
   pieces and the main column's pieces just stack in DOM order, same as before). */
#uiNew .team-layout { }
@media (min-width: 1024px) {
  #uiNew .team-layout { display: flex; align-items: stretch; gap: var(--space-7); }
  #uiNew .team-main { flex: 1; min-width: 0; }
}

/* The rail: .team-header keeps its own dark background/padding unconditionally (it
   already looks right alone on a phone); the other 3 pieces (.rail-section) are plain
   page-colored sections there today. At Wide the rail becomes one continuous
   team-colored column - --rail-text/--rail-rule/--rail-accent flip each piece's colors
   without duplicating every function into a light and a dark version. */
#uiNew .team-rail {
  --rail-text: var(--text-secondary);
  --rail-rule: var(--rule);
}
@media (min-width: 1024px) {
  #uiNew .team-rail {
    width: 360px; flex: 0 0 360px; background: var(--team-fallback); color: var(--text-on-team);
    --rail-text: var(--text-on-team);
    --rail-rule: var(--rule-on-team);
    --rail-accent: var(--text-on-team);
  }
  #uiNew .team-rail .rail-section { background: var(--team-fallback); padding-left: var(--space-4); padding-right: var(--space-4); }
  #uiNew .team-rail .rule-focus { border-top-width: 1px; border-top-color: var(--rail-rule); }
  /* The type scale's Wide sizes (tuned for a full-width page) are much too large for a
     360px column - name-xl/num-hero/name-l get their own Wide sizes here instead. */
  #uiNew .team-rail .name-xl { font-size: 40px; }
  #uiNew .team-rail .num-hero { font-size: 108px; }
  #uiNew .team-rail .name-l { font-size: 20px; }
}

/* Caps a block's width so label/value rows don't stretch across the full Wide page
   width and leave a huge gap between a short label and a short number (Dave's report,
   2026-09-29). At Wide the main column has real width to fill instead, so the
   tournament-picture stat list becomes a horizontal strip (Option A, 2026-09-30). */
#uiNew .stat-list { max-width: 640px; display: flex; flex-direction: column; gap: var(--space-4); }
#uiNew .stat-pair { display: flex; justify-content: space-between; align-items: baseline; }
@media (min-width: 1024px) {
  #uiNew .stat-list { max-width: none; flex-direction: row; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--space-5) 0; }
  #uiNew .stat-pair { flex: 1; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 var(--space-5); border-right: 1px solid var(--rule-soft); }
  #uiNew .stat-pair:first-child { padding-left: 0; }
  #uiNew .stat-pair:last-child { border-right: 0; padding-right: 0; }
  #uiNew .stat-pair .num-l { font-size: 34px; }
}

/* "What if...?": one card per game on a phone; at Wide (real width in the main column
   now that the rail owns the identity/hero content) each becomes one compact row
   instead, table-like without the dual-mode CSS a literal <table> would need
   (Option A, 2026-09-30). */
#uiNew .whatif-list { list-style: none; padding: 0; margin: 0; }
@media (min-width: 1024px) {
  #uiNew .whatif-row { display: flex; align-items: baseline; gap: var(--space-4); }
  #uiNew .whatif-date { flex: 0 0 64px; }
  #uiNew .whatif-opp { flex: 0 0 220px; }
  #uiNew .whatif-odds { flex: 1; }
  #uiNew .whatif-actions { margin-left: auto; }
}

/* "Root for": a stacked list on a phone; a row of cards at Wide (Option A, 2026-09-30). */
#uiNew .rootfor-card { padding: var(--space-3) 0; border-top: 1px solid var(--rule-soft); }
@media (min-width: 1024px) {
  #uiNew .rootfor-list { display: flex; gap: var(--space-4); }
  #uiNew .rootfor-card { flex: 1; background: var(--bg-muted); padding: var(--space-4); border-top: 0; }
}

/* "Played games": a stacked list on a phone; wrapped inline chips at Wide, since this
   is a reference log rather than something that needs scanning row by row
   (Option A, 2026-09-30). */
#uiNew .played-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-top: 1px solid var(--rule-soft); }
@media (min-width: 1024px) {
  #uiNew .played-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  #uiNew .played-row { border-top: 0; padding: 0; justify-content: flex-start; gap: 4px; }
  #uiNew .played-total { text-align: right; }
}

/* ---------- Load states (Task 1 owns these; pages are added in Tasks 2/4) ---------- */
#uiNew .ui-loading { min-height: 72vh; display: grid; place-items: center; }
#uiNew .loader { width: min(440px, 100%); }
#uiNew .loader-mark { display: inline-block; padding-bottom: 4px; border-bottom: 3px solid var(--accent); color: var(--text-primary); }
#uiNew .loader-title { margin: var(--space-5) 0 var(--space-4); font: 800 44px/0.9 var(--font-sans); font-stretch: 62%; letter-spacing: -.02em; text-transform: uppercase; }
#uiNew .loader-step { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-5); font-size: 16px; font-weight: 600; color: var(--text-primary); }
#uiNew .loader-step::before { content: ""; flex: none; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--accent); border-right-color: transparent; animation: ui-spin .8s linear infinite; }
#uiNew .loader-bar { height: 4px; background: var(--bg-muted); overflow: hidden; }
#uiNew .loader-bar span { display: block; width: 40%; height: 100%; background: var(--accent); animation: ui-slide 1.3s ease-in-out infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { #uiNew .loader-step::before, #uiNew .loader-bar span { animation: none; } }
/* The loading screen itself never dims: body.busy is on while its simulation step runs. */
body.busy #uiNew .ui-new-content:has(.ui-loading) { opacity: 1; }
#uiNew .ui-error { border-top: 3px solid var(--alert); padding-top: var(--space-4); }
#uiNew .ui-error .msg { color: var(--text-secondary); margin: var(--space-2) 0; }
#uiNew .ui-empty { padding: var(--space-8) 0; }

/* body.busy is toggled by run() in index.html around every simulation: it drives the busy
   strip and 55% fade. The fade targets
   .ui-new-content, not #uiNew itself (Dave's report, 2026-09-30): #pinnedScoreboard is a
   sibling of .ui-new-content, not a descendant, specifically so a fixed bar doesn't go
   55% see-through - and read as having no background at all - every time a pick
   triggers a Monte Carlo re-run. */
body.busy #uiNew .ui-new-content { opacity: .55; pointer-events: none; transition: opacity 120ms; }
body.busy #uiNew::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--accent);
  z-index: 9999; opacity: 1;
}

/* ---------- Class page (Task 2): context bar, editorial lead, standings ---------- */
/* Each standings row is an <a> (rank/name/pct all in one link) so it needs its own color
   reset - #uiNew a's default `color: var(--accent)` would otherwise tint the whole row
   (rank, name, both percentages) cobalt instead of only the elements meant to carry accent. */
#uiNew .standings-row { color: var(--text-primary); }
#uiNew .standings-row:hover { background: var(--bg-muted); }
#uiNew .context-bar select { border: 1px solid var(--rule); background: var(--bg-page); padding: 0 var(--space-2); }

/* Standings row layout: Compact/Medium show rank, team, current Heal points and the lead
   "Makes it" stat as columns (Heal sits right next to Makes it, Dave's call, since it's
   the number he actually reads first) - the rest (Top 4/Region/State/projected Heal) wrap
   onto their own labeled, right-justified line below (.row-sub) rather than being hidden,
   so nothing needs horizontal scroll or a hidden column on a phone. Wide switches to a
   single-line 9-column grid instead. */
#uiNew .standings-row, #uiNew .rule-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 56px 72px;
  gap: var(--space-3);
}
#uiNew .row-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-4); margin-top: 2px; }
#uiNew .wide-only { display: none; }
@media (min-width: 1024px) {
  #uiNew .wide-only { display: block; }
  #uiNew .row-sub { display: none; }
  #uiNew .standings-row, #uiNew .rule-head { grid-template-columns: 56px minmax(160px, 420px) 84px 96px 84px 84px 84px 84px 96px !important; }
}

/* ---------- Class page (Task 3): rail, scenario bar, footer ---------- */
/* The "+ How the numbers work" disclosure: hidden body until its [data-disclosure]
   ancestor gets .open (Task 1's handleClick toggle action does that on click). */
#uiNew [data-disclosure].open .disclosure-body { display: block !important; }
/* "Show all" lists reuse the same [data-disclosure]/toggle mechanism: cap to N items,
   reveal the rest on .open. Three thresholds (5 results, 8 next games, 5 news items) get their own
   modifier class since nth-child can't take a variable cutoff. */
#uiNew [data-disclosure].results-disclosure li:nth-child(n+6) { display: none; }
#uiNew [data-disclosure].results-disclosure.open li:nth-child(n+6) { display: list-item; }
#uiNew [data-disclosure].next-disclosure li:nth-child(n+9) { display: none; }
#uiNew [data-disclosure].next-disclosure.open li:nth-child(n+9) { display: list-item; }
#uiNew [data-disclosure].news-disclosure li:nth-child(n+6) { display: none; }
#uiNew [data-disclosure].news-disclosure.open li:nth-child(n+6) { display: list-item; }

/* ---------- Task 7: accessibility (focus, reduced motion, touch targets, live region) ---------- */
#uiNew :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#uiNew .team-header :focus-visible { outline-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  #uiNew * { transition: none !important; animation: none !important; }
}

/* Standings rows and touch targets meet the 44px/52px minimums (doc §12 Mobile behavior). */
#uiNew .standings-row { min-height: 52px; }
#uiNew button, #uiNew select { min-height: 44px; }
@media (min-width: 1024px) {
  #uiNew .standings-row { min-height: 58px; }
}

#uiNew .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "Path to…" rows: stacked on a phone/tablet; at Wide, one line per game with the buttons on the right
   (and smaller than the 44px touch-target minimum, which is for fingers). */
#uiNew .path-row { padding: var(--space-3) 0; border-top: 1px solid var(--rule-soft); }
#uiNew .path-btns { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
#uiNew .path-btn { padding: 6px 10px; border: 1px solid var(--rule); }
#uiNew .path-btn[aria-pressed="true"] { background: var(--bg-muted); font-weight: 700; }
@media (min-width: 1024px) {
  #uiNew .path-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; }
  #uiNew .path-btns { flex-wrap: nowrap; margin-top: 0; }
  #uiNew .path-btn { min-height: 34px; min-width: 88px; padding: 4px 10px; }
}
#uiNew .path-vals { margin-top: 4px; }
@media (min-width: 1024px) { #uiNew .path-vals { margin-top: 0; text-align: right; } }


/* Tournament view (prototypes/navigation/recommended-playoffs.html is the visual reference) */
#uiNew .tb-seg { display: inline-flex; border: 1px solid var(--text-primary); }
#uiNew .tb-seg a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-4); color: var(--text-primary); font-weight: 600; text-decoration: none; }
#uiNew .tb-seg a[aria-current="page"] { background: var(--text-primary); color: var(--bg-page); font-weight: 800; }
#uiNew .tb-seg a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#uiNew .tb-strip { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); background: var(--accent-wash); border-left: 3px solid var(--accent); font-size: 14px; }
#uiNew .tb-time { font: 800 18px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; padding-top: var(--space-3); padding-bottom: var(--space-3); }
#uiNew .tb-grid { --gap: 28px; --line: color-mix(in srgb, var(--text-secondary) 45%, transparent); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-6); }
#uiNew .tb-region, #uiNew .tb-state { min-width: 0; display: flex; flex-direction: column; }
#uiNew .tb-region h2, #uiNew .tb-state h2 { margin: 0 0 var(--space-2); font: 700 14px var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--text-primary); }
#uiNew .tb-bracket h3, #uiNew .tb-state h3 { margin: 0 0 var(--space-2); font: 600 12px var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
#uiNew .tb-scroll { flex: 1; display: flex; overflow-x: auto; padding-bottom: 4px; }
/* Rows are equal (1fr) and a game spans 2^round of them, so each game sits midway between its two feeders: the 25%/75% lines below rely on that. */
#uiNew .tb-bracket { flex: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(150px, 1fr)); grid-template-rows: auto repeat(var(--rows), 1fr); column-gap: var(--gap); }
#uiNew .tb-cell { position: relative; display: flex; align-items: center; padding: 8px 0; min-width: 0; }
/* Bracket lines: a stub out of every game that feeds another, and on the receiving game a vertical joining its feeders plus a stub in (drawn as a background line). */
#uiNew .tb-cell.out::after { content: ""; position: absolute; inset-inline-start: 100%; top: 50%; width: calc(var(--gap) / 2); border-top: 2px solid var(--line); }
#uiNew .tb-cell.last::after { display: none; }
#uiNew .tb-cell:is(.in-a, .in-b)::before { content: ""; position: absolute; inset-inline-start: calc(var(--gap) / -2); width: calc(var(--gap) / 2); top: 25%; bottom: 25%;
  border-inline-start: 2px solid var(--line); background: linear-gradient(var(--line), var(--line)) no-repeat 0 50% / 100% 2px; }
#uiNew .tb-cell.in-a:not(.in-b)::before { bottom: 50%; background-position: 0 100%; }
#uiNew .tb-cell.in-b:not(.in-a)::before { top: 50%; background-position: 0 0; }
#uiNew .tb-box { position: relative; direction: ltr; width: 100%; min-width: 0; background: var(--bg-page); border: 1px solid var(--rule); box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
#uiNew .tb-head { padding: 4px 10px; font-size: 12px; line-height: 1.3; color: var(--text-secondary); background: var(--bg-muted); border-bottom: 1px solid var(--rule-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#uiNew .tb-team { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 6px; font-size: 15px; line-height: 1.25; }
#uiNew .tb-team + .tb-team { border-top: 1px solid var(--rule-soft); }
#uiNew .tb-team.won { font-weight: 700; background: color-mix(in srgb, var(--tc, var(--text-primary)) 12%, var(--bg-page)); }
#uiNew .tb-team.lost { color: var(--text-secondary); }
#uiNew .tb-team:is(.lost, .proj) .team-badge { opacity: .5; }
#uiNew .tb-team.proj { font-style: italic; color: var(--text-secondary); }
#uiNew .tb-team.tbd { font-style: italic; color: var(--text-secondary); }
#uiNew .tb-seed { flex: none; width: 1.3em; text-align: right; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
#uiNew .tb-name { flex: 1; min-width: 0; padding: 3px 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
#uiNew .tb-name a { color: inherit; }
#uiNew .tb-name a:hover { color: var(--accent-hover); text-decoration: underline; }
#uiNew .tb-pc { flex: none; font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
#uiNew .tb-team.won .tb-pc { color: inherit; }
/* Initials badge in the school color (teamBadge in ui-new.js), used in the bracket, the Chances table and the standings. */
#uiNew .team-badge { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--bg-muted);
  color: var(--text-secondary); font: 800 11px/1 var(--font-sans); font-style: normal; letter-spacing: .02em; text-transform: uppercase; }
#uiNew .team-badge.empty { background: none; border: 1.5px dashed var(--rule); }
#uiNew .tb-team .team-badge { width: 24px; height: 24px; font-size: 9.5px; }
#uiNew .with-badge { display: flex; align-items: center; gap: 10px; }
#uiNew .tb-table .with-badge { gap: 8px; }
#uiNew .tb-table .team-badge { width: 22px; height: 22px; font-size: 9px; }
/* Stacked (below the three-across width): North, then South, then the State final at the bottom. */
#uiNew .tb-state { order: 3; }
#uiNew .tb-cell.champ .tb-box { border: 2px solid var(--accent); }
#uiNew .tb-cell.champ .tb-team { min-height: 44px; font-size: 16px; }
#uiNew .tb-statebody { flex: 1; display: flex; align-items: center; }
#uiNew .tb-state .tb-cell { flex-direction: column; align-items: stretch; gap: var(--space-3); }
#uiNew .tb-likely { font-size: 14px; line-height: 1.45; color: var(--text-primary); }
#uiNew .tb-tablewrap { overflow-x: auto; }
#uiNew .tb-table { border-collapse: collapse; width: 100%; margin-top: var(--space-2); }
#uiNew .tb-table th, #uiNew .tb-table td { padding: 8px; border-bottom: 1px solid var(--rule-soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#uiNew .tb-table th:nth-child(-n+3), #uiNew .tb-table td:nth-child(-n+3) { text-align: left; }
#uiNew .tb-table th { font: 700 11px var(--font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
#uiNew .tb-hi { font-weight: 800; }
#uiNew .tb-dead { color: var(--alert); }
/* This view is wider than the other pages (a 12-team North bracket, the State final and an 8-team South bracket side by side need
   about 1,400px); below that the three parts stack and each bracket scrolls sideways inside its own box. */
#uiNew .page.tb-page { max-width: 1880px; padding-left: 24px; padding-right: 24px; }
#uiNew .tb-wrap { container-type: inline-size; container-name: tb; }
@container tb (min-width: 1400px) {
  /* North flows right, South is mirrored to flow left, and both regional finals feed the State final in the middle. */
  #uiNew .tb-grid { grid-template-columns: var(--tb-cols); column-gap: var(--gap); }
  #uiNew .tb-state { order: 0; }
  #uiNew .tb-region.south .tb-bracket { direction: rtl; }
  #uiNew .tb-region.south h2 { text-align: right; }
  #uiNew .tb-state h2, #uiNew .tb-state h3 { text-align: center; }
  #uiNew .tb-scroll { overflow: visible; }
  #uiNew .tb-cell.last::after { display: block; }
  #uiNew .tb-state .tb-cell::before, #uiNew .tb-state .tb-cell::after { content: ""; position: absolute; top: 50%; width: calc(var(--gap) / 2); border-top: 2px solid var(--line); }
  #uiNew .tb-state .tb-cell::before { right: 100%; }
  #uiNew .tb-state .tb-cell::after { left: 100%; }
  /* Taken out of the flow so the State final box stays level with the two regional finals its lines come from. */
  #uiNew .tb-likely { position: absolute; left: 0; right: 0; }
  #uiNew .tb-likely.north { bottom: 100%; margin-bottom: var(--space-3); }
  #uiNew .tb-likely.south { top: 100%; margin-top: var(--space-3); }
}