/* ════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — the 2026-10 redesign, from the Claude Design spec page
   ("מפרט עיצוב", 19.10). Loaded AFTER every screen stylesheet, so it is the
   last word on the shared variables every screen already paints with.

   Four rules (the spec's own):
   1. The interface is neutral. Cream and navy in light, night blue in dark.
      Background, card, line and the two text colours are the same five
      values on every screen and in every league.
   2. Colour is information. It appears only when it says something: live,
      warning, insight grade, or the team itself (crest, leading score, my
      team's scarf / tint / home card).
   3. One action colour. Every button is the text navy (white in dark). A
      league's colour is only a 12px square next to its name.
   4. A fixed scale: 7 text sizes, 7 display sizes, 5 corner shapes, 2 button
      heights.

   The screens still carry their own rules from before; each one is moved
   onto these tokens in its own step of the port.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette: light ── */
  --ds-bg:    #E9E4DA;
  --ds-card:  #F7F4EE;
  --ds-ink:   #0C1630;
  --ds-ink2:  #434A5C;
  --ds-line:  #D3CCBF;
  --ds-soft:  rgba(12, 22, 48, .05);
  /* Status. Darker than the spec's first draft so they also clear 4.5:1 on
     the page ground, not only on a card (designer's second pass, 19.10). */
  --ds-live:  #B71C2B;
  --ds-warn:  #8F5100;
  --ds-ok:    #126E37;

  /* League markers — the only place a league colour appears. */
  --ds-lg-nba: #1F5FD0;
  --ds-lg-el:  #B34700;
  --ds-lg-ec:  #A21CAF;
  --ds-lg-wl:  #0369A1;
  --ds-lg-bcl: #6D28D9;
  --ds-lg-nt:  #8B6900;

  /* ── Type ── */
  --ds-font:     'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ds-font-num: 'Barlow Condensed', 'Heebo', system-ui, sans-serif;
  --ds-fs-12: 12px;  /* micro: labels, legends */
  --ds-fs-13: 13px;  /* meta: times, secondary */
  --ds-fs-14: 14px;  /* UI: buttons, tabs, tables */
  --ds-fs-15: 15px;  /* body: the default */
  --ds-fs-17: 17px;  /* emphasis: row names, lead */
  --ds-fs-20: 20px;  /* card title */
  --ds-fs-24: 24px;  /* section title */
  --ds-fd-28: 28px;  /* display: numbers in a card */
  --ds-fd-32: 32px;  /* display: phone title */
  --ds-fd-40: 40px;  /* display: score */
  --ds-fd-48: 48px;  /* display: big time */
  --ds-fd-56: 56px;  /* display: tablet title */
  --ds-fd-64: 64px;  /* display: desktop title */
  --ds-fd-80: 80px;  /* display: headline number */

  /* ── Shape ── */
  --ds-r-0:     0;       /* cards, buttons, fields, tabs, panels — the default */
  --ds-r-pill:  999px;   /* status labels, counters, switches, drag handle */
  --ds-r-round: 50%;     /* crests, avatars */
  --ds-r-bubble: 18px;   /* chat bubbles only */
  --ds-r-sheet: 22px;    /* top corners of a phone bottom sheet */

  /* ── Controls ── */
  --ds-h-btn:   44px;    /* every button, chip and tab — phone included */
  --ds-h-btn-l: 52px;    /* full-width primary: sign-up, submit */
  --ds-h-field: 48px;    /* text fields, switch hit area */

  /* ── Motion ── */
  --ds-t-ctrl:  150ms;   /* switches, hover, press */
  --ds-t-layer: 250ms;   /* panel, sheet, card closing */
  --ds-t-team:  500ms;   /* switching team: background, scarf, home card */
}

/* ── Palette: dark. Every theme value, nothing structural. ── */
html[data-theme="dark"] {
  --ds-bg:    #0C111C;
  --ds-card:  #1B2538;
  --ds-ink:   #F4F6FA;
  --ds-ink2:  #BCC6DA;
  --ds-line:  #3A486A;
  --ds-soft:  rgba(255, 255, 255, .06);
  --ds-live:  #FF8A8A;
  --ds-warn:  #FBBF24;
  --ds-ok:    #4ADE80;
  --ds-lg-nba: #7FB0FF;
  --ds-lg-el:  #FF9A4D;
  --ds-lg-ec:  #F0ABFC;
  --ds-lg-wl:  #7DD3FC;
  --ds-lg-bcl: #C4B5FD;
  --ds-lg-nt:  #E6C85A;
}

/* ── The shared variables every screen already uses, pointed at the five
   neutral values. The selectors are written to outrank the old per-league
   and per-theme blocks (home.css: :root, [data-league=…],
   html[data-theme="light"], html[data-theme="light"] [data-league=…]) —
   same or higher specificity, and later in the cascade. ── */
html[data-theme],
html[data-theme] [data-league],
html[data-theme] body[data-league] {
  --bg:        var(--ds-bg);
  --bg-nav:    var(--ds-card);
  --bg-card:   var(--ds-card);
  --bg-card2:  color-mix(in srgb, var(--ds-ink) 5%, var(--ds-card));
  --border:    var(--ds-line);
  --text:      var(--ds-ink);
  --muted:     var(--ds-ink2);

  /* One action colour. --accent is the fill of every filled control and
     --accent-fg the text on it; --accent-ink is accent used AS text. */
  --accent:            var(--ds-ink);
  --accent-fg:         var(--ds-card);
  --accent-ink-light:  var(--ds-ink);
  --accent-ink-dark:   var(--ds-ink);
  --accent2-ink-light: var(--ds-ink);
  --accent2-ink-dark:  var(--ds-ink);
  --accent1:     var(--ds-ink);
  --accent2:     var(--ds-ink);
  --accent1-rgb: 12, 22, 48;

  --green:  var(--ds-ok);
  --yellow: var(--ds-warn);
  --orange: var(--ds-warn);
  --red:    var(--ds-live);

  --radius:     0;
  --transition: var(--ds-t-ctrl) ease;
}
html[data-theme="dark"],
html[data-theme="dark"] [data-league],
html[data-theme="dark"] body[data-league] {
  --accent1-rgb: 244, 246, 250;
}

/* League marker colour, per league, for the 12px square. */
[data-league="NBA"]           { --ds-lg: var(--ds-lg-nba); }
[data-league="EuroLeague"]    { --ds-lg: var(--ds-lg-el); }
[data-league="EuroCup"]       { --ds-lg: var(--ds-lg-ec); }
[data-league="WinnerLeague"]  { --ds-lg: var(--ds-lg-wl); }
[data-league="BCL"]           { --ds-lg: var(--ds-lg-bcl); }
[data-league="NationalTeams"] { --ds-lg: var(--ds-lg-nt); }

/* ── Base ── */
html[data-theme] body {
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--ds-font);
  font-size: var(--ds-fs-15);
  font-weight: 500;
}
/* The old screens painted a league glow behind everything (body::before). A
   neutral interface has none; the team tint below replaces it when on. */
html[data-theme] body::before { background: none !important; opacity: 0 !important; }

/* Keyboard focus: one visible ring everywhere, in the text colour. */
html[data-theme] :focus-visible {
  outline: 2px solid var(--ds-ink);
  outline-offset: 2px;
}

/* ── Header: neutral. The club's colour lives in the scarf under it, not in
   the bar itself (team-colours design, 19.10). ── */
html[data-theme] .app-header,
html[data-theme] body.team-themed .app-header {
  background: var(--ds-card);
  box-shadow: none;
  border-bottom: 1px solid var(--ds-line);
}
html[data-theme] .app-header .logo-title,
html[data-theme] body.team-themed .app-header .logo-title,
html[data-theme] .app-header .header-settings-btn,
html[data-theme] .app-header .header-search-btn,
html[data-theme] body.team-themed .app-header .header-settings-btn,
html[data-theme] body.team-themed .app-header .header-search-btn {
  color: var(--ds-ink);
}

/* ── My team: scarf + tint (Team colours design, 19.10). js/team_palette.js
   derives every value; auth.js writes them on <body> with .team-themed, and
   index.html's first-paint script writes the cached copy on <html> with
   .team-cached. Content, text and buttons keep the neutral palette. ── */
html[data-theme] :is(body.team-themed, html.team-cached > body) {
  background: var(--team-tint-l, var(--ds-bg));
  transition: background-color var(--ds-t-team) ease;
}
html[data-theme="dark"] :is(body.team-themed, html.team-cached > body) {
  background: var(--team-tint-d, var(--ds-bg));
}
/* The scarf: 6px at the very top of the screen, inside the sticky header so
   it stays with it; the header's own layout is untouched. */
html[data-theme] :is(body.team-themed, html.team-cached > body) .app-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--team-band);
  transform-origin: right center;
  animation: ds-scarf .55s cubic-bezier(.2,.7,.2,1) both;
  pointer-events: none;
  z-index: 3;
}
html[dir="ltr"] :is(body.team-themed, html.team-cached > body) .app-header::before { transform-origin: left center; }
@keyframes ds-scarf { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The same values under one name per theme, for the components that use them.
   Declared on <body>, not <html>: a custom property that points at another is
   resolved where it is declared, and the -l/-d values live on <body>. */
html[data-theme] body {
  --team-field: var(--team-field-l);
  --team-fg:    var(--team-fg-l);
  --team-trim:  var(--team-trim-l);
  --team-edge:  var(--team-edge-l);
}
html[data-theme="dark"] body {
  --team-field: var(--team-field-d);
  --team-fg:    var(--team-fg-d);
  --team-trim:  var(--team-trim-d);
  --team-edge:  var(--team-edge-d);
}

/* ── Buttons (opt-in classes for ported screens) ── */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ds-h-btn); padding: 0 18px;
  border: 1.5px solid var(--ds-ink); border-radius: 0;
  background: var(--ds-ink); color: var(--ds-card);
  font: 800 var(--ds-fs-14)/1 var(--ds-font);
  cursor: pointer;
  transition: background-color var(--ds-t-ctrl) ease, border-color var(--ds-t-ctrl) ease, color var(--ds-t-ctrl) ease;
}
.ui-btn:hover          { background: var(--ds-ink2); border-color: var(--ds-ink2); }
.ui-btn:disabled       { opacity: .45; cursor: default; }
.ui-btn--secondary     { background: transparent; color: var(--ds-ink); }
.ui-btn--secondary:hover { background: var(--ds-soft); border-color: var(--ds-ink); }
.ui-btn--quiet         { background: transparent; color: var(--ds-ink); border-color: var(--ds-line); }
.ui-btn--quiet:hover   { background: var(--ds-soft); border-color: var(--ds-line); }
.ui-btn--inverse       { background: #F4F6FA; color: #0C1630; border-color: #F4F6FA; }
.ui-btn--large         { min-height: var(--ds-h-btn-l); width: 100%; font-size: var(--ds-fs-15); }

/* League marker: the 12px square. */
.ui-lg-mark {
  flex: none; display: inline-block;
  width: 12px; height: 12px;
  background: var(--ds-lg, var(--ds-lg-nba));
}

/* Status pill (live / half / soon). */
.ui-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 0 10px;
  border-radius: var(--ds-r-pill);
  font: 800 var(--ds-fs-12)/1 var(--ds-font);
}
.ui-pill--live { background: var(--ds-live); color: #fff; }
html[data-theme="dark"] .ui-pill--live { color: #0C111C; }
.ui-pill--warn { background: var(--ds-warn); color: #fff; }
html[data-theme="dark"] .ui-pill--warn { color: #0C111C; }

/* ════════════════════════════════════════════════════════════════════════
   SHARED CHROME — header, league chips, date bar, results strip, nav
   (port step 2). Overrides home.css / dashboard.css on the same elements.
   ════════════════════════════════════════════════════════════════════════ */

/* Header: the wordmark in the body face, the two icon buttons 44px square. */
html[data-theme] .app-header .logo-title {
  font-family: var(--ds-font);
  font-size: var(--ds-fs-20);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}
html[data-theme] .app-header .header-search-btn,
html[data-theme] .app-header .header-settings-btn {
  inline-size: var(--ds-h-btn);
  block-size: var(--ds-h-btn);
  display: inline-grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
}
html[data-theme] .app-header .header-search-btn:hover,
html[data-theme] .app-header .header-settings-btn:hover { background: var(--ds-soft); }
html[data-theme] .app-header .live-pill {
  background: var(--ds-soft);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  color: var(--ds-ink);
}
/* Narrowest phones (320): the wordmark, the date pill and two 44px buttons do
   not fit beside the logo. The date is repeated in the date bar right below,
   so the pill is the one to go. */
@media (max-width: 360px) {
  html[data-theme] .app-header .live-pill { display: none; }
}
html[data-theme] .app-header .live-pill .live-text {
  color: var(--ds-ink);
  font-family: var(--ds-font-num);
  font-size: var(--ds-fs-14);
  font-weight: 700;
}

/* League selector (approved prototype): one native select — the phone's own
   picker, nothing to learn. On the home screen it sits in the controls card;
   the other league-aware screens keep it in the league bar under the header. */
html[data-theme] .league-bar {
  background: var(--ds-card);
  border-bottom: 1px solid var(--ds-line);
}
html[data-theme] .league-bar-inner {
  max-width: var(--app-max-width);
  height: auto;
  margin: 0 auto;
  padding: 8px clamp(12px, 3vw, 24px);
  display: flex;
  justify-content: flex-start;
}
html[data-theme] .lg-select {
  position: relative;
  display: inline-flex;
  min-width: 0;
}
html[data-theme] .lg-select select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 170px;
  min-height: var(--ds-h-field);
  margin: 0;
  padding: 0 14px;
  padding-inline-end: 40px;
  border: 1.5px solid var(--ds-line);
  border-radius: 0;
  background: var(--ds-card);
  color: var(--ds-ink);
  font: 800 var(--ds-fs-15)/1.2 var(--ds-font);
  cursor: pointer;
  transition: border-color var(--ds-t-ctrl) ease;
}
html[data-theme] .lg-select select:hover { border-color: var(--ds-ink); }
html[data-theme="dark"] .lg-select select { color-scheme: dark; }
/* the chevron, drawn so it looks the same on every phone */
html[data-theme] .lg-select::after {
  content: "";
  position: absolute;
  inset-inline-end: 17px;
  top: 50%;
  width: 8px;
  height: 8px;
  border: solid var(--ds-ink);
  border-width: 0 2px 2px 0;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Home controls card (approved prototype). Row 1: previous day, the date with
   its "today" tag, next day, the month calendar — one line from 560px; on a
   phone the date gets its own line and the three buttons sit under it.
   Row 2: the league, "★ my follows", and the "my teams only" switch at the
   far end (its own line on a phone). */
html[data-theme] .date-nav {
  background: var(--ds-card);
  border: 0;
}
html[data-theme] .date-nav-inner {
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
}
.dn-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 6px;
}
.dn-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
html[data-theme] .dn-date {
  margin: 0;
  font: 900 var(--ds-fs-24)/1.25 var(--ds-font);
  color: var(--ds-ink);
  letter-spacing: 0;
  text-transform: none;
}
.dn-today {
  flex: none;
  padding: 3px 8px;
  border: 1.5px solid var(--ds-ink);
  color: var(--ds-ink);
  font: 800 var(--ds-fs-12)/1.3 var(--ds-font);
}
.dn-today[hidden] { display: none; }
/* The date is a button into the month calendar (Calendar design), with a caret
   that turns while the calendar is open. */
.dn-h { margin: 0; min-width: 0; }
.dn-date-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: var(--ds-h-btn);
  margin: -6px -8px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--ds-t-ctrl) ease;
}
.dn-date-btn:hover { background: var(--ds-soft); }
.dn-caret { flex: none; color: var(--ds-ink2); transition: transform .2s; }
.dn-date-btn[aria-expanded="true"] .dn-caret { transform: rotate(180deg); }
html[data-theme] .dn-cal.is-open,
html[data-theme] .dn-cal.is-open:hover { background: var(--ds-ink); color: var(--ds-card); }
html[data-theme] .dn-sq {
  flex: none;
  width: var(--ds-h-btn);
  height: var(--ds-h-btn);
  min-width: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--ds-ink);
  border-radius: 0;
  background: var(--ds-card);
  color: var(--ds-ink);
  opacity: 1;
  cursor: pointer;
  transition: background-color var(--ds-t-ctrl) ease;
}
html[data-theme] .dn-sq:hover:not(:disabled) { background: var(--ds-soft); }
html[data-theme] .dn-sq:disabled { opacity: .4; cursor: default; }
.dn-bar2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
}
.dn-follow {
  flex: none;
  min-height: var(--ds-h-field);
  padding: 0 16px;
  border: 1.5px solid var(--ds-ink);
  border-radius: 0;
  background: var(--ds-card);
  color: var(--ds-ink);
  font: 800 var(--ds-fs-14)/1 var(--ds-font);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ds-t-ctrl) ease;
}
.dn-follow:hover { background: var(--ds-soft); }
/* The switch: the track sits at the far end, its label just before it. */
.dn-mine {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  min-height: var(--ds-h-btn);
  margin-inline-start: auto;
  font: 700 var(--ds-fs-14)/1.3 var(--ds-font);
  color: var(--ds-ink);
  cursor: pointer;
}
.dn-mine[hidden] { display: none; }
.dn-mine b { font-weight: 800; }
.dn-mine input {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: var(--ds-h-btn);
  height: var(--ds-h-btn);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.dn-mine i {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #7A8294;   /* 3:1 against the card in both themes */
  transition: background-color var(--ds-t-ctrl) ease;
}
.dn-mine i::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: inset-inline-start var(--ds-t-ctrl) ease;
}
.dn-mine input:checked + i { background: var(--ds-ink); }
.dn-mine input:checked + i::after { inset-inline-start: 23px; background: var(--ds-card); }
.dn-mine input:focus-visible + i { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
/* Wide screens: the two day arrows sit next to the date, the calendar button alone at the far end (owner, 26.10:
   the title stretched and pushed the arrows to opposite edges). */
@media (min-width: 560px) {
  .dn-title { flex: 0 1 auto; }
  .dn-date-row .dn-cal { margin-inline-start: auto; }
}
@media (max-width: 559px) {
  .dn-date-row { flex-wrap: wrap; gap: 10px 8px; padding: 12px 12px 4px; }
  .dn-title { order: -1; flex-basis: 100%; }
  html[data-theme] .dn-date { font-size: var(--ds-fs-20); }
  .dn-bar2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px 12px; }
  html[data-theme] .dn-bar2 .lg-select select { min-width: 0; }
  .dn-mine { grid-column: 1 / -1; justify-content: flex-start; margin-inline-start: 0; }
}
html[data-theme] .prev-season-btn {
  min-height: var(--ds-h-btn);
  padding: 0 12px;
  border: 1.5px solid var(--ds-line);
  border-radius: 0;
  background: transparent;
  color: var(--ds-ink);
  font: 800 var(--ds-fs-13)/1 var(--ds-font);
  cursor: pointer;
}

/* Results strip (Live design): one cell per game, status on top, a row per side. */
html[data-theme] .dash-strip-bar {
  background: var(--ds-card);
  border-bottom: 1px solid var(--ds-line);
}
html[data-theme] .dash-strip-scroll { gap: 0; padding: 0; }
html[data-theme] .ds-card {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  inline-size: 128px;
  min-inline-size: 128px;
  block-size: 66px;
  min-block-size: 66px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 0;
  border-inline-end: 1px solid var(--ds-line);
  border-radius: 0;
  background: transparent;
  text-align: start;
  transition: background-color var(--ds-t-ctrl) ease;
}
@media (max-width: 559px) {
  html[data-theme] .ds-card { inline-size: 112px; min-inline-size: 112px; block-size: 62px; min-block-size: 62px; }
}
html[data-theme] .ds-card:hover { background: var(--ds-soft); }
html[data-theme] .ds-card:active { transform: none; }
html[data-theme] .ds-card.is-live { background: color-mix(in srgb, var(--ds-live) 7%, var(--ds-card)); }
html[data-theme] .ds-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
html[data-theme] .ds-code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-content: flex-start;
  font: 700 var(--ds-fs-15)/1 var(--ds-font-num);
  letter-spacing: .04em;
  color: var(--ds-ink);
}
html[data-theme] .ds-code.leading  { font-weight: 800; }
html[data-theme] .ds-code.trailing { font-weight: 600; color: var(--ds-ink2); }
html[data-theme] .ds-score {
  flex: none;
  margin-inline-start: auto;
  min-width: 0;
  font: 600 var(--ds-fs-17)/1 var(--ds-font-num);
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
html[data-theme] .ds-score.leading, html[data-theme] .ds-score.tie { font-weight: 800; }
html[data-theme] .ds-score.trailing { color: var(--ds-ink2); opacity: 1; }
/* The status line, per state (Live design). */
html[data-theme] .ds-status-txt {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font: 700 var(--ds-fs-12)/1 var(--ds-font);
  letter-spacing: 0;
  color: var(--ds-ink2);
}
html[data-theme] .ds-status-txt.ds-st--live,
html[data-theme] .ds-status-txt.ds-st--time { font: 700 14px/1 var(--ds-font-num); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
html[data-theme] .ds-status-txt.ds-st--live { color: var(--ds-live); }
html[data-theme] .ds-status-txt.ds-st--half { font-weight: 800; color: var(--ds-warn); }
html[data-theme] .ds-status-txt.ds-st--soon { color: var(--ds-warn); }
html[data-theme] .ds-status-txt.ds-st--cd { font-variant-numeric: tabular-nums; }
html[data-theme] .ds-status-txt.is-stale { color: var(--ds-ink2); }
html[data-theme] .ds-live-dot { width: 6px; height: 6px; background: var(--ds-live); }
html[data-theme] .ds-status-txt.is-stale .ds-live-dot { background: var(--ds-ink2); animation: none; }
html[data-theme] .ds-card.ds-more {
  display: flex;
  align-items: center;
  font-size: var(--ds-fs-14);
  font-weight: 800;
  color: var(--ds-ink);
}
/* Bar layout: [Live cell][scrolling games][arrows cell] — nothing floats over a game. */
html[data-theme] .dash-strip-bar {
  display: flex;
  align-items: stretch;
  overflow: visible;
}
html[data-theme] .dash-strip-scroll { flex: 1 1 auto; min-width: 0; }
html[data-theme] .ds-live-cell {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-inline-size: 72px;
  padding: 0 16px;
  border: 0;
  border-inline-end: 1px solid var(--ds-line);
  border-radius: 0;
  background: transparent;
  color: var(--ds-ink);
  font: 900 var(--ds-fs-17)/1 var(--ds-font);
  cursor: pointer;
  transition: background-color var(--ds-t-ctrl) ease;
}
html[data-theme] .ds-live-cell:hover { background: var(--ds-soft); }
html[data-theme] .ds-live-cell-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ds-live);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-live) 22%, transparent);
}
html[data-theme] .ds-live-cell-dot[hidden] { display: none; }
html[data-theme] .ds-arrows {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-inline-start: 1px solid var(--ds-line);
}
html[data-theme] .ds-arrows[hidden] { display: none; }
html[data-theme] .ds-arrow,
html[data-theme] .ds-arrow-l,
html[data-theme] .ds-arrow-r {
  position: static;
  transform: none;
  inline-size: var(--ds-h-btn);
  block-size: var(--ds-h-btn);
  display: inline-grid;
  place-items: center;
  border-radius: 0;
  background: var(--ds-card);
  border: 1.5px solid var(--ds-ink);
  color: var(--ds-ink);
  box-shadow: none;
  font-size: 22px;
}
html[data-theme] .ds-arrow:hover:not(:disabled) { background: var(--ds-soft); }
html[data-theme] .ds-arrow:disabled { border-color: var(--ds-line); opacity: .45; cursor: default; }
@media (hover: none) {
  html[data-theme] .ds-arrows { display: none; }
}

/* Footer: a quiet line at the end of the content, not a bar pinned over it
   (it hid the last rows of every list above the phone's bottom nav). */
html[data-theme] .app-footer {
  position: static;
  max-width: var(--app-max-width);
  margin: 0 auto;
  /* the body already keeps the phone's bottom nav clear (home.css) */
  padding: 18px clamp(12px, 3vw, 24px) 18px;
  background: transparent;
  border-top: 0;
  font: 600 var(--ds-fs-12)/1.5 var(--ds-font);
  letter-spacing: 0;
  color: var(--ds-ink2);
  text-align: center;
}
html[data-theme] #footer-accessibility { color: var(--ds-ink); text-underline-offset: 3px; }

/* Screen nav (top on wide screens, bottom bar on a phone). */
html[data-theme] .screen-nav {
  background: var(--ds-card);
  border-color: var(--ds-line);
}
html[data-theme] .sn-tab {
  color: var(--ds-ink2);
  font-family: var(--ds-font);
  font-size: var(--ds-fs-12);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 0;
  transition: color var(--ds-t-ctrl) ease, border-color var(--ds-t-ctrl) ease;
}
html[data-theme] .sn-tab:hover:not(.active) { color: var(--ds-ink); background: var(--ds-soft); }
html[data-theme] .sn-tab.active {
  color: var(--ds-ink);
  font-weight: 800;
  border-bottom-color: var(--ds-ink);
}
@media (max-width: 480px) {
  html[data-theme] .sn-tab.active { border-top-color: var(--ds-ink); }
}

/* Reduced motion: every change at once. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* The wordmark sits next to the round logo in the corner, not at the edge of a centred column on a wide screen
   (owner, 27.10); the two icon buttons go to the other corner. */
html[data-theme] .app-header .header-inner { max-width: none; }

/* The round logo, the wordmark and the account menu follow the reading direction: right corner in Hebrew,
   left corner in English (owner, 27.10). */
html[data-theme] .logo-icon { right: auto; inset-inline-start: 10px; }
html[data-theme] .app-header .header-inner { padding-inline: 66px 16px; }
html[data-theme] .profile-menu { right: auto; inset-inline-start: 8px; }

/* A player or team page opened from inside the game page (a name in the box score) must sit ABOVE the game
   overlay (z-index 300); the stacked pages are at 100, so the tap seemed to do nothing (owner, 27.10). */
/* ...and it covers the whole screen, header and tabs included, closing with its own X (owner, 27.10). */
body:has(#game-detail-overlay.open) .stub-screen:not(.hidden) {
  z-index: 400; top: 0 !important; bottom: 0 !important; background: var(--ds-bg, var(--bg));
}

/* A game opened from a team page sits above that page (owner, 1.11): the game overlay goes over the stub screens. */
body.gd-from-stub #game-detail-overlay { z-index: 500; }
html[data-theme] body.gd-from-stub:has(#game-detail-overlay.open) .stub-screen:not(.hidden) { z-index: 100; }

/* iPhone, installed on the home screen: the screen is edge to edge, so the clock and battery sat on top of the
   header and the round logo could not be tapped (owner's friend, 28.10). The status bar is now opaque (index.html
   meta) and, where the system still reports a top inset, the header and everything pinned under it move down by it. */
html[data-theme] .app-header { padding-top: env(safe-area-inset-top, 0px); }
html[data-theme] .logo-icon { top: calc(6px + env(safe-area-inset-top, 0px)); }
html[data-theme] body:not(.lbar-over-stub) .stub-screen { top: max(calc(58px + 51px + env(safe-area-inset-top, 0px)), var(--stub-top, 0px)); }
html[data-theme] body.lbar-over-stub .stub-screen { top: calc(var(--stub-top, 153px) + env(safe-area-inset-top, 0px)); }

/* The team tint belongs to every screen, not only the home page: the other screens paint their own flat background over
   the body, so the colour showed only where a screen had none (owner, 29.10). */
html[data-theme] :is(body.team-themed, html.team-cached > body) :is([id^="screen-"], [id$="-screen"]) { background: var(--team-tint-l, var(--ds-bg)) !important; }
html[data-theme="dark"] :is(body.team-themed, html.team-cached > body) :is([id^="screen-"], [id$="-screen"]) { background: var(--team-tint-d, var(--ds-bg)) !important; }

/* The game page is a full screen over the app, so it carries the club's colour too: the tint as its ground and the
   scarf along the top of its bar (owner, 29.10). */
html[data-theme] :is(body.team-themed, html.team-cached > body) .game-detail-panel.gp { background: var(--team-tint-l, var(--ds-bg)); }
html[data-theme="dark"] :is(body.team-themed, html.team-cached > body) .game-detail-panel.gp { background: var(--team-tint-d, var(--ds-bg)); }
html[data-theme] :is(body.team-themed, html.team-cached > body) .gp-bar { background: var(--team-tint-l, var(--ds-bg)); }
html[data-theme="dark"] :is(body.team-themed, html.team-cached > body) .gp-bar { background: var(--team-tint-d, var(--ds-bg)); }
html[data-theme] :is(body.team-themed, html.team-cached > body) .gp-bar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--team-band); pointer-events: none;
}

/* iPhone / Android with a notch or a status bar: whatever sits at the very top of the screen must start below the
   system clock, or its close button cannot be tapped (owner, 29.10). A team or player page opened over the game page
   starts at the top, so it gets the inset; centred dialogs keep clear of both edges. */
html[data-theme] body:has(#game-detail-overlay.open) .stub-screen:not(.hidden) {
  top: env(safe-area-inset-top, 0px) !important; bottom: 0 !important;
}
html[data-theme] :is(#auth-modal, #auth-favorites-modal, .tm-modal, .cp-modal, .tb-overlay, #rl-paywall) {
  box-sizing: border-box;
  padding-top: max(18px, env(safe-area-inset-top, 0px));
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}
html[data-theme] :is(.au-dialog, .pm-modal) { max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
html[data-theme] .tb-dialog { max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
html[data-theme] .tm-modal-card { max-height: min(calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 720px); }
html[data-theme] .cp-modal-card { max-height: min(calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 640px); }
/* The player picker is a bottom sheet on a phone and its page sits in a stacking context under the bottom bar: the sheet has to
   stand above the bar, not behind it (owner, Android, 2.11: the list was cut off by the bar). The rule above had flattened
   compare.css's own bottom padding. */
@media (max-width: 559px) {
  html[data-theme] #cmp-modal { padding-bottom: var(--cp-nav, 72px); }   /* #id: the :is(#auth-modal, .cp-modal) rule above weighs as an id */
}

/* On a phone a team or player page covers the whole screen, header and results strip included, and closes with its own X.
   Starting under the strip left half of it showing and the page's X right under the clock (owner, iPhone, 29.10). */
@media (max-width: 768px) {
  html[data-theme] body #screen-team-hub:not(.hidden), html[data-theme] body #screen-player-profile:not(.hidden) {
    z-index: 400; top: env(safe-area-inset-top, 0px) !important; bottom: 0 !important;
  }
}

/* The search box: the old tokens it used (--bg-input, --text-primary) came out white-on-white in the dark theme, so the
   typed letters could not be seen (owner, Android, 30.10). */
html[data-theme] #global-search-modal .search-input {
  background: var(--ds-bg); color: var(--ds-ink); border: 1.5px solid var(--ds-line); border-radius: 0; caret-color: var(--ds-ink);
  min-height: var(--ds-h-field, 48px); font-family: var(--ds-font); font-size: 16px;
}
html[data-theme] #global-search-modal .search-input::placeholder { color: var(--ds-ink2); opacity: 1; }
html[data-theme] #global-search-modal .search-input:focus { outline: 2px solid var(--ds-ink); outline-offset: 2px; border-color: var(--ds-ink); }

/* A national team is its flag, with no disc around it: the flag is wider than a circle, so the disc cut it (owner, 31.10). */
html[data-theme] .team-crest--flag { border-radius: 0 !important; overflow: visible !important; box-shadow: none !important; background: none !important; }

/* A full screen is fixed between its top and the bottom of the window: its height is whatever is left. A screen that said
   "height: 100%" was as tall as the whole window, so it ran below the bottom edge by the height of the header and its
   last lines were cut off (Settings, owner, 31.10). */
html[data-theme] .stub-screen { height: auto !important; }

/* ── Site review (Claude Design, 30.10): the quick fixes ── */
/* The "ask the Professor" chips: square, 44px, on the design-system tokens - no capsules, no emoji. */
html[data-theme] .chat-chips { gap: 8px; }
html[data-theme] .chat-chip:not(.chat-chip--trade) {
  display: inline-flex; align-items: center; min-height: var(--ds-h-btn); padding: 0 14px;
  border: 1.5px solid var(--ds-line); border-radius: 0; background: var(--ds-card); color: var(--ds-ink);
  font: 700 var(--ds-fs-14)/1 var(--ds-font); white-space: nowrap;
}
html[data-theme] .chat-chip:not(.chat-chip--trade):hover { border-color: var(--ds-ink); background: var(--ds-card); transform: none; }
/* Team page, last ten: a win or a loss is a letter as well as a colour; names wrap instead of being cut. */
.th-l10-wl { font: 800 var(--ds-fs-12) var(--ds-font); color: var(--ds-ink2); }
.th-l10-name { max-width: none; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
/* Team page: the active tab is underlined in ink (the orange belongs to the EuroLeague only); a fade at the edge says it scrolls. */
.th-tab.active { box-shadow: inset 0 -3px 0 var(--ds-ink); }
/* The crest in a team-coloured header keeps its own ring so it is not swallowed by the same colour. */
.th-header.has-field .th-logo { box-shadow: 0 0 0 3px var(--ds-card), inset 0 0 0 2px var(--crest-ring, transparent); }
/* Academy: "where on the site" is read in full, not cut at the second line. */
.ac-g-tx span { display: block; overflow: visible; -webkit-line-clamp: unset; }
/* Compare: the explanation lines stay a readable width on a wide screen. */
#screen-compare li { max-width: 68ch; }
/* Trades: a disabled analyse button looks disabled on the dark hero - outlined, not a grey block. */
.tm-analyze[disabled] { background: transparent; border: 1.5px solid currentColor; color: inherit; opacity: .45; }
/* Polish: touch size of the name in the header and of "Reset", room for Hebrew descenders, one word never alone on a line. */
html[data-theme] .app-header .logo-title { display: flex; align-items: center; min-height: var(--ds-h-btn); }
.tm-link { min-width: 44px; padding-inline: 8px; margin-inline: -8px; }
.gr-name { line-height: 1.35; }
.st-sub, .cp-sub, .inj-team-name { text-wrap: balance; }

/* Home, "Ask the Professor" (Site review, 30.10): no black stripe beside the title; on a phone the picture is a small round
   portrait above the question box and the box takes the full width, with the Ask button against it. */
html[data-theme] .ask-section .section-bar { display: none; }
@media (max-width: 640px) {
  html[data-theme] .ask-section .chat-body { flex-direction: column; align-items: stretch; gap: 10px; }
  html[data-theme] .ask-section .chat-prof-panel { width: 64px; padding: 0; align-self: flex-start; }
  html[data-theme] .ask-section .chat-prof-large { width: 64px; height: 64px; border-radius: 50%; object-position: center 12%; }
  html[data-theme] .ask-section .chat-body.has-prof-msg .chat-prof-panel { padding: 0; }
  html[data-theme] .ask-section .ask-bar { gap: 0; }
  html[data-theme] .ask-section .ask-input { min-height: var(--ds-h-field, 48px); border-radius: 0; }
  html[data-theme] .ask-section .ask-btn { min-height: var(--ds-h-field, 48px); border-radius: 0; flex: none; }
}
html[data-theme] .chat-chip--trade { border-radius: 0; min-height: var(--ds-h-btn); }

/* ── Site review fixes (Claude Design, 1.11) ── */
/* the site name in the header links home but was 30px tall */
html[data-theme] .app-header .logo-title { display: flex; align-items: center; min-height: var(--ds-h-btn); }
/* trade machine: "Reset" was 37px wide */
.tm-link { min-width: 44px; padding-inline: 8px; margin-inline: -8px; }
/* home game rows: the clamp box was 2px shorter than the text */
.gr-name { line-height: 1.35; }
/* subtitles: one word alone on a line */
.st-sub, .cp-sub, .inj-team-name { text-wrap: balance; }
/* academy: "where on the site" was cut mid-sentence on a phone */
.ac-g-tx span { display: block; overflow: visible; -webkit-line-clamp: unset; }
/* compare: a line of ~139 characters on a desktop */
#screen-compare li { max-width: 68ch; }
/* theme switch: no half-second where text and backgrounds change at different speeds */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }
/* team and player page tabs: a fade at the end says the row scrolls */
.th-tab-bar { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent 100%); }
html[dir="ltr"] .th-tab-bar { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%); }

/* ── Five kinds of button (Claude Design review, 1.11) ──
   primary (filled) · secondary (outlined) · filter (chip, fills when on) · text · icon. The shared classes below are for
   new buttons; the older class names keep their own rules and are brought to the same height, square corner and weight. */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ds-h-btn); min-width: 44px; padding: 0 16px;
  border: 1.5px solid transparent; border-radius: var(--ds-r-0, 0); font: 800 var(--ds-fs-14)/1 var(--ds-font); cursor: pointer;
  transition: background var(--ds-t-ctrl), border-color var(--ds-t-ctrl), color var(--ds-t-ctrl); }
.ds-btn--primary { background: var(--ds-ink); color: var(--ds-card); }
.ds-btn--primary:hover { background: var(--ds-ink2); }
.ds-btn--secondary { background: transparent; border-color: var(--ds-ink); color: var(--ds-ink); }
.ds-btn--secondary:hover { background: var(--ds-soft); }
.ds-btn--filter { background: var(--ds-card); border-color: var(--ds-line); color: var(--ds-ink); font-weight: 700; }
.ds-btn--filter:hover { border-color: var(--ds-ink); }
.ds-btn--filter[aria-pressed="true"], .ds-btn--filter.active { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-card); }
.ds-btn--text { background: none; padding: 0 8px; color: var(--ds-ink2); font-weight: 700; }
.ds-btn--text:hover { color: var(--ds-ink); }
.ds-btn--icon { width: 44px; padding: 0; background: var(--ds-card); border-color: var(--ds-ink); color: var(--ds-ink); }
.ds-btn--block { width: 100%; min-height: var(--ds-h-btn-l); }
.ds-btn:disabled { opacity: .45; cursor: not-allowed; }
/* the old class names: one height, square corners */
html[data-theme] :is(.cs-btn, .tm-btn, .sx-btn, .cp-btn, .dn-follow, .inj-chip, .choice-btn, .st-filter, .chat-chip) { min-height: var(--ds-h-btn); border-radius: 0; }
html[data-theme] .sx-seg .choice-btn { min-height: var(--ds-h-btn); }          /* was 48 */
html[data-theme] :is(.tm-link, .sx-info) { min-width: 44px; }

/* ── Text sizes onto the scale (12, 13, 14, 15, 17, 20, 24; 28-80 for display) ── */
#screen-standings .st-num, .st-streak { font-size: var(--ds-fs-17); }
.st-streak i, .st-clinch { font-size: var(--ds-fs-12); }
@container ac (max-width: 559px) { .ac-sub-h { font-size: var(--ds-fs-20); } }
.th-team-name { font-size: clamp(var(--ds-fd-28), 6vw, var(--ds-fd-48)); }