:root, [data-theme="light"] {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --text: #1A1C1E;
  --text-secondary: #5F6368;
  --border: #E3E5E8;
  --primary: #1B5E3F;
  --primary-soft: #E3EFE8;
  --on-primary: #FFFFFF;
  --live: #C0392B;
  --live-soft: #FBE7E4;
  --locked: #63676C;
  --locked-soft: #EEEFF1;
  --gain: #1B7F4D;
  --gain-soft: #E5F3EA;
  --loss: #B3261E;
  --loss-soft: #FDECE9;
  --warn: #8A5300;
  --warn-soft: #FBEEDA;
  --shadow: rgba(16,24,32,0.04);
}
[data-theme="dark"] {
  --bg: #14171A;
  --surface: #1E2226;
  --text: #F2F3F4;
  --text-secondary: #A3A9AE;
  --border: #30363B;
  --primary: #4BAE84;
  --primary-soft: #1F332A;
  --on-primary: #0B1F16;
  --live: #FF8657;
  --live-soft: #3D2A1E;
  --locked: #9BA1A6;
  --locked-soft: #262A2E;
  --gain: #4BAE84;
  --gain-soft: #1F332A;
  --loss: #E6685A;
  --loss-soft: #2E1D1B;
  --warn: #F0B357;
  --warn-soft: #3A2C16;
  --shadow: rgba(0,0,0,0.3);
}
/* CVD-safe theme: gain/loss/live use hues distinguishable under protanopia,
   deuteranopia and tritanopia (Okabe-Ito-derived blue/orange/purple triad)
   instead of the red/green pairing. Neutrals match the light theme. */
[data-theme="colorblind"] {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --text: #1A1C1E;
  --text-secondary: #5F6368;
  --border: #E3E5E8;
  --primary: #1B5E3F;
  --primary-soft: #E3EFE8;
  --on-primary: #FFFFFF;
  --live: #7A4FC0;
  --live-soft: #EFE7FA;
  --locked: #63676C;
  --locked-soft: #EEEFF1;
  --gain: #0072B2;
  --gain-soft: #E3F1F9;
  --loss: #B54D08;
  --loss-soft: #FDF3EA;
  --warn: #63676C;
  --warn-soft: #EEEFF1;
  --shadow: rgba(16,24,32,0.04);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary); }
.screen { width: 390px; height: 844px; background: var(--bg); color: var(--text); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 20px 16px 14px 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.topbar-title { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; }
.topbar-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.icon-btn { width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; }
.content { flex: 1; overflow-y: auto; padding: 16px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: 0 1px 2px var(--shadow); }
.section-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.6px; margin: 4px 2px 2px 2px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 100px; background: var(--primary-soft); color: var(--primary); }
.chip.live { background: var(--live-soft); color: var(--live); }
.chip.locked { background: var(--locked-soft); color: var(--locked); }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.col { display: flex; flex-direction: column; }
.divider { height: 1px; background: var(--border); margin: 10px 0; }
.avatar { width: 40px; height: 40px; border-radius: 10px; background: var(--locked-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.btn-primary { background: var(--primary); color: var(--on-primary); border: none; border-radius: 12px; padding: 14px; font-size: 15px; font-weight: 700; text-align: center; }
.btn-secondary { background: var(--surface); color: var(--primary); border: 1.5px solid var(--primary); border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 700; text-align: center; }
.player-name { font-size: 14px; font-weight: 600; }
.player-meta { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.pts { font-size: 15px; font-weight: 700; }
.pts-sub { font-size: 11px; color: var(--text-secondary); text-align: right; }
.news-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* settings controls */
.toggle { width: 44px; height: 26px; border-radius: 13px; background: var(--locked-soft); border: 1px solid var(--border); position: relative; flex-shrink: 0; }
.toggle.on { background: var(--primary); }
.toggle-knob { width: 20px; height: 20px; border-radius: 10px; background: var(--locked); position: absolute; top: 2px; left: 2px; box-shadow: 0 1px 2px var(--shadow); }
.toggle.on .toggle-knob { left: 20px; background: var(--on-primary); }
.radio-ring { width: 20px; height: 20px; border-radius: 10px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.radio-ring.on { border-color: var(--primary); }
.radio-ring-dot { width: 10px; height: 10px; border-radius: 5px; background: var(--primary); }
.segmented { display: flex; background: var(--locked-soft); border-radius: 10px; padding: 3px; gap: 3px; }
.segmented-option { flex: 1; text-align: center; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--text-secondary); border-radius: 8px; }
.segmented-option.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px var(--shadow); }

/* bottom nav */
.bottomnav { flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--border); display: flex; padding: 8px 4px 10px 4px; }
.navitem { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.navitem svg { stroke: var(--text-secondary); }
.navitem span { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.navitem.active svg { stroke: var(--primary); }
.navitem.active span { color: var(--primary); font-weight: 700; }

/* ---------------------------------------------------------------------------
   Semantics & accessibility primitives
   The mockups use real landmarks/controls so the Compose build has a 1:1
   target for content descriptions, heading order and focus handling.
--------------------------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: inherit; font-size: inherit; }
button { font: inherit; color: inherit; background: none; border: none; text-align: left; }
button, a, [tabindex] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tap { min-height: 44px; }

/* Player designation badge (Q/D/O/IR/TS/SUS/BYE).
   The letter is the signal; colour and fill are reinforcement only. */
.status { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 16px; padding: 0 3px; border-radius: 4px; border: 1px solid var(--locked); color: var(--locked); background: transparent; font-size: 9.5px; font-weight: 800; letter-spacing: 0.2px; flex-shrink: 0; }
.status.q, .status.d { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.status.o, .status.ir, .status.sus { border-color: var(--loss); color: var(--loss); background: var(--loss-soft); }
.status.bye, .status.ts { border-color: var(--locked); color: var(--locked); background: var(--locked-soft); }

/* Theme preview swatch: carries its own data-theme so the tokens resolve to
   the theme being previewed, not the one the screen is currently in. */
.swatch { width: 9px; height: 9px; border-radius: 5px; display: inline-block; }
.swatch.bg { border: 1px solid var(--border); }

/* Trend glyph + signed value (free agents, ownership movement) */
.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; }
.trend.up { color: var(--gain); }
.trend.down { color: var(--loss); }

/* Standings table — columns are league-configured, so the markup is a real
   table with scoped headers rather than a fixed row layout. */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; text-align: right; padding: 0 0 8px 10px; }
.table th:first-child, .table td:first-child { text-align: left; }
.table th.num, .table td.num { text-align: right; white-space: nowrap; }
.table td { padding: 9px 0 9px 10px; border-top: 1px solid var(--border); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table tbody tr:first-child td { border-top: none; }
.table th[scope="row"] { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); text-align: left; }
.table-scroll { overflow-x: auto; }
.table caption { caption-side: bottom; text-align: left; font-size: 11px; color: var(--text-secondary); padding-top: 10px; }

/* Banners: offline / stale / error / info */
.banner { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.banner svg { flex-shrink: 0; margin-top: 1px; }
.banner.info { background: var(--locked-soft); color: var(--text-secondary); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.error { background: var(--loss-soft); color: var(--loss); }
.banner.ok { background: var(--gain-soft); color: var(--gain); }

/* Loading placeholders (no animation — Reduce Motion is a supported setting) */
.skel { background: var(--locked-soft); border-radius: 6px; height: 12px; }
.skel.lg { height: 18px; }
.skel.circle { border-radius: 10px; width: 40px; height: 40px; }

/* Tabs / filter row */
.tabs { display: flex; gap: 8px; overflow-x: auto; }
.tab { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 100px; background: var(--locked-soft); color: var(--text-secondary); white-space: nowrap; }
.tab[aria-selected="true"] { background: var(--primary-soft); color: var(--primary); }

/* Search field */
.search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; font-size: 14px; color: var(--text-secondary); }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 28px 16px; }
.empty-title { font-size: 15px; font-weight: 700; }
.empty-body { font-size: 13px; color: var(--text-secondary); line-height: 1.4; max-width: 260px; }

/* Page backdrop for browsing the mockups (not part of the app surface) */
html, body { height: 100%; }
body { background: #E9EBEE; min-height: 100vh; margin: 0; display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; }
.screen { margin: 0 auto; box-shadow: 0 8px 30px rgba(16,24,32,0.12); border-radius: 28px; overflow: hidden; }