:root {
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --border: #E5E5E5;
  --border-soft: #EFEFEF;
  --text: #1A1A1A;
  --text-secondary: #6B6B6B;
  --line-pending: #A3A3A3;
  --accent: #1A1A1A;
  --accent-text: #FFFFFF;
  /* In-app brand exception (ANTI_SLOP.md): yellow means "your next action", primary button only. */
  --action: #FFD100;
  --action-text: #1A1A1A;
  --action-edge: #1A1A1A;
  --status-live-text: #1E5B3C;
  --status-live-mark: #2E8B57;
  --status-act-text: #94430A;
  --status-act-mark: #C25A0A;
  --status-error-text: #B3261E;
  --status-error-mark: #C8372D;

  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  --text-12: 12px;
  --text-13: 13px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-20: 20px;
  --text-28: 28px;
  --text-64: 64px;

  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --leading-100: 1;
  --leading-120: 1.2;
  --leading-130: 1.3;
  --leading-140: 1.4;
  --radius-8: 8px;
  --radius-12: 12px;
  --size-6: 6px;
  --size-10: 10px;
  --size-44: 44px;
  --size-28: 28px;
  --size-48: 48px;
  --size-64: 64px;
  --size-52: 52px;
  --size-96: 96px;
  --size-104: 104px;
  --size-150: 150px;
  --size-240: 240px;

  --scrim: rgb(26 26 26 / 30%);
  --sheet-shadow: 0 -8px 32px rgb(0 0 0 / 12%);

  /* Legacy aliases keep the older screens working while new UI uses v1.4. */
  --font-sans: -apple-system, system-ui, sans-serif;
  --font-score: ui-monospace, "SF Mono", Menlo, monospace;
  --text-display: var(--text-28);
  --text-score: var(--text-28);
  --text-stat: var(--text-20);
  --text-title: var(--text-17);
  --text-input: var(--text-16);
  --text-body: var(--text-15);
  --text-control: var(--text-15);
  --text-meta: var(--text-13);
  --text-label: var(--text-12);
  --text-micro: var(--text-12);
  --weight-thin: var(--weight-300);
  --weight-regular: var(--weight-400);
  --weight-medium: var(--weight-500);
  --weight-semibold: var(--weight-600);
  --weight-bold: var(--weight-600);
  --lh-display: var(--leading-100);
  --lh-tight: var(--leading-120);
  --lh-snug: var(--leading-130);
  --lh-body: var(--leading-140);
  --radius-control: var(--radius-12);
  --space-screen: var(--space-20);
  --size-target: var(--size-44);
  --tracking-label: 0.0625rem;
  --tracking-display: -0.01em;
  --shadow: none;
}

:root[data-theme="dark"],
body.dark {
  --bg: #0E0E0E;
  --surface: #1A1A1A;
  --border: #2C2C2C;
  --border-soft: #242424;
  --text: #EDEDED;
  --text-secondary: #9B9B9B;
  --line-pending: #5A5A5A;
  --accent: #F2F2F2;
  --accent-text: #0E0E0E;
  --action-edge: transparent;
  --status-live-text: #7FD3A1;
  --status-live-mark: #4CC37E;
  --status-act-text: #F7B076;
  --status-act-mark: #F59E42;
  --status-error-text: #FF8A80;
  --status-error-mark: #F0645A;
  --scrim: rgb(26 26 26 / 30%);
  --sheet-shadow: 0 -8px 32px rgb(0 0 0 / 40%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { font-size: 100%; } /* 1rem = 16px; respects user zoom */

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Suppress iOS double-tap-to-zoom on all interactive elements.
   touch-action: manipulation keeps pinch-to-zoom intact on the page. */
button, a, [role="button"] {
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible,
.player-chip:focus-visible,
.score-input:focus-visible,
.setting-input:focus-visible {
  outline-color: var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.screen-header .title {
  font-size: var(--text-title);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
}
.screen-header .header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.setup-intro { color: var(--text-secondary); margin: -4px 0 20px; }
.setup-free-count { margin: 8px 0 0; text-align: center; font-size: 13px; line-height: 1.3; color: var(--text-secondary); }
.setup-free-count.is-act { color: var(--status-act-text); }
.summary-plan-reminder { margin: 8px 0 0; font-size: 13px; line-height: 1.3; color: var(--status-act-text); }
.paywall-google { display: flex; justify-content: center; min-height: 44px; }
.theme-toggle-btn {
  font-size: var(--text-title); /* glyph, not text */
  line-height: var(--lh-display);
}

.label {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  line-height: var(--lh-tight);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin: 16px 0 8px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}
.card.card-hero {
  padding: 16px;
}

.adaptive-live-screen {
  display: grid;
  grid-template-rows: auto 1fr auto; /* spare height goes to the content row, never to the gaps */
  gap: var(--space-32);
  min-height: calc(100vh - var(--space-16));
  padding-inline: var(--space-4);
}
.adaptive-live-main { display: grid; align-content: start; gap: var(--space-32); }
.adaptive-now { display: grid; gap: var(--space-4); }
.adaptive-now--active { gap: var(--space-16); }
.adaptive-now-content { display: grid; gap: var(--space-12); min-width: 0; }
.adaptive-now--active .adaptive-now-content { gap: var(--space-16); }
.adaptive-paused-ready { margin-top: calc(var(--space-8) * -1); } /* 4 below the headline, like the matchup head */
.adaptive-now-content .app-button--change-matchup { justify-self: start; width: auto; }
.adaptive-matchup-stage { min-width: 0; }
.adaptive-reason,
.adaptive-change-hint,
.adaptive-change-note,
.adaptive-paused-ready,
.adaptive-roster-full {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-13);
  line-height: var(--leading-140);
}
.adaptive-reason { overflow-wrap: anywhere; }
.adaptive-matchup-stage.is-changing .app-matchup__team { animation: adaptive-name-fade 160ms ease-out both; }
.adaptive-score-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.app-score-column__team:has(.app-score-column__team-player) { margin-block: calc(var(--space-12) * -1); } /* names keep a 44 px tap area without adding space */
.scores-round:has(.scores-correction) .app-score-line__result { font-weight: var(--weight-600); } /* the round being corrected (R5) */
.adaptive-score-grid .app-up-next { grid-column: 1 / -1; }
.adaptive-paused-headline {
  margin: 0;
  color: var(--text);
  font-size: var(--text-28);
  font-weight: var(--weight-500);
  line-height: var(--leading-120);
}
.adaptive-timeline { display: flex; align-items: flex-start; gap: 0; min-width: 0; overflow: hidden; }
.adaptive-board { display: grid; gap: var(--space-24); }
.adaptive-board-group { display: grid; gap: 0; min-width: 0; }
.adaptive-roster-full { min-height: var(--size-44); padding-block: var(--space-8); }
.adaptive-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-inline: calc(var(--space-20) * -1);
  padding: var(--space-12) var(--space-20) var(--space-32);
  border-top: 1px solid var(--border-soft);
  background: var(--bg);
}
.adaptive-action-bar { display: grid; align-content: start; gap: var(--space-8); }
.adaptive-action-bar .app-text-link { justify-self: start; }
.adaptive-change-editor { display: grid; gap: var(--space-12); }
.adaptive-change-current { display: grid; gap: var(--space-12); }
.adaptive-change-team { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.adaptive-change-and { color: var(--text-secondary); font-size: var(--text-13); }
.adaptive-change-swap { margin: 0; color: var(--text-secondary); font-size: var(--text-13); line-height: var(--leading-130); }
.adaptive-change-waiting { display: flex; flex-wrap: wrap; gap: var(--space-8); }

@media (prefers-reduced-motion: no-preference) {
  .app-score-column__input.is-changing { animation: adaptive-score-roll 160ms ease-out both; }
}

@media (prefers-reduced-motion: reduce) {
  .adaptive-matchup-stage.is-changing .app-matchup__team,
  .app-score-column__input.is-changing { animation: none; }
}

@keyframes adaptive-name-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes adaptive-score-roll {
  from { opacity: 0; transform: translateY(var(--space-8)); }
  to { opacity: 1; transform: translateY(0); }
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-soft);
  transition: background-color 160ms ease-out;
}
.row:last-child { border-bottom: none; }
/* Roster-row tint: when the name input is being edited, the whole line
   lights up like a highlighted notebook entry. The input itself stays
   borderless; the tint is the affordance. */
.row:focus-within {
  background: var(--border-soft);
  border-radius: 8px;
  margin: 0 -8px;
  padding-left: 12px;
  padding-right: 12px;
}

.match-vs {
  color: var(--text-secondary);
  font-size: var(--text-meta);
  padding: 4px 4px;
}

.card-hero .row {
  padding: 4px 4px;
  border-bottom: none;
}

.btn {
  background: var(--action);
  color: var(--action-text);
  border: 1px solid var(--action-edge);
  border-radius: 8px;
  padding: 14px;
  font-size: var(--text-control);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 140ms ease-out;
}
.btn:disabled { opacity: 0.4; }

.btn.ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn.small {
  width: auto;
  padding: 6px 12px;
  font-size: var(--text-meta);
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: var(--text-stat); /* 20px — glyph, not text */
  line-height: var(--lh-display);
  padding: 8px;
  cursor: pointer;
  transition: opacity 120ms ease-out;
}


input[type="text"], input[type="number"] {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: var(--text-input); /* 16px floor — anything smaller triggers iOS Safari auto-zoom on focus */
  font-family: inherit;
  width: 100%;
}
input::placeholder {
  color: var(--text-secondary);
  opacity: 1; /* Firefox applies 54% opacity by default */
}
/* Replace the global heavy outline on boxed inputs with a border-darkening
   + soft glow pattern that integrates with the input's own border. */
input[type="text"]:focus-visible,
input[type="number"]:focus-visible {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}

/* Roster name input — inline, borderless, lives inside `.row`.
   Same notebook-line affordance as the score input: no outline box on focus,
   underline switches to ink, parent row gains a tonal tint. Tag-qualified
   selector beats the global `input[type="text"]` rule by source order. */
input.player-name {
  flex: 1;
  min-width: 0;
  width: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  padding: 6px 0;
  font-size: var(--text-input);
  font-family: inherit;
  color: var(--text);
  transition: border-color 160ms ease-out;
}
input.player-name:focus,
input.player-name:focus-visible {
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--text);
}

/* One-time scale hint above the roster card. Appears the moment the first
   player is added — the moment the dots become visible and need a key. */
.roster-hint {
  font-size: var(--text-meta);
  color: var(--text-secondary);
  margin: 0 0 8px;
}

/* Roster row siblings around the name input. */
.roster-row .skill-dots {
  cursor: pointer;
  align-items: center;
  flex: 0 0 auto;
}
.roster-row .remove-btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.skill-dots {
  display: flex;
  gap: 4px;
}
.skill-dots .dot {
  width: 14px;
  height: 14px;
  padding: 15px 6px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--border);
  background-clip: content-box;
  border: none;
  cursor: pointer;
}
.skill-dots .dot.filled { background: var(--text); background-clip: content-box; }

.stepper {
  display: flex;
  align-items: center;
  gap: 14px;
}
.stepper button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-input); /* glyph */
  cursor: pointer;
}
.stepper .val {
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.match-team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
}
.match-team .names { font-size: var(--text-body); }
.match-team .score {
  font-size: var(--text-score);
  font-weight: var(--weight-thin);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
}

/* Team name — used in Now Playing hero and the Final Score card.
   Allowed to wrap onto multiple lines so a long pair name (e.g. "Alessandra
   & Konstantinos") never pushes the score input off-row or out of the card. */
.team-name {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.score-team-name { letter-spacing: 0; }

/* Final Score card — borderless inputs, score reads as a display value.
   The card is the page's visual climax; padding is more generous than the
   Now Playing hero so the 32px numerals have room to breathe. */
.score-card { padding: 8px 20px; }
/* Stack name above score so a long pair name ("Alessandra & Konstantinos")
   never squeezes the 32px numeral on a 360px viewport. The score then sits
   on its own page-wide underline — the notebook fill-in-the-blank pattern
   at full width, with a generous tap target. */
.score-card .match-team {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border-soft);
  cursor: text;
}
.score-card .match-team:last-child { border-bottom: none; }
.score-card .team-name {
  flex: 0 0 auto;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  font-size: var(--text-input);
}
/* Final Score card's score input spans the full row to give the 32px
   numeral a page-wide underline. Compact inline editors (schedule rows)
   keep the global `width: auto` and stay right-aligned beside the name. */
.score-card input.score-input {
  width: 100%;
  flex: 1 1 auto;
}

/* Borderless score entry. Selector qualified with the tag
   (`input.score-input` = 0,1,1) to beat `input[type="number"]` and win by
   source order. The hairline underline is a notebook fill-in-the-blank
   line — the affordance the bare numeral was missing. */
input.score-input {
  width: auto;
  flex: 0 0 auto;
  min-width: 3ch;
  text-align: right;
  font-size: var(--text-score); /* 32px — matches the live-score display ramp */
  font-weight: var(--weight-thin);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
  padding: 0 2px 4px;
  background: transparent;
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-family: inherit;
  caret-color: var(--accent);
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
/* Unentered zero reads as a quiet placeholder — paper waiting for ink. */
input.score-input.is-empty { color: var(--text-secondary); }
input.score-input:focus {
  outline: none;
  color: var(--text);
  border-bottom-color: var(--text);
}
.score-card .match-team:focus-within {
  background: var(--border-soft);
  border-radius: 8px;
  margin: 0 -14px;
  padding-left: 14px;
  padding-right: 14px;
}
/* Schedule-row score editor stays denser — one step smaller. */
input.edit-score-input {
  font-size: 1.75rem; /* 28px */
  padding-right: 4px;
}
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.score-input { -moz-appearance: textfield; }
.score-input::selection {
  background: var(--border);
  color: var(--text);
}
.score-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.score-stepper input.score-input {
  flex: 1;
  width: auto;
  text-align: center;
}
.stepper-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms;
}
.stepper-btn:active { background: var(--border-soft); }

.next-block {
  font-size: var(--text-meta);
  color: var(--text-secondary);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.segmented {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: 12px;
  background: var(--border);
  border-radius: 10px;
}
.segment {
  flex: 1;
  padding: 8px 12px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-control);
  cursor: pointer;
}
.segment.is-active {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.schedule-hint {
  font-size: var(--text-meta);
  color: var(--text-secondary);
  margin: 0 0 8px;
  line-height: var(--lh-snug);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.label:has(+ .schedule-hint) {
  margin-bottom: 4px;
}
.now-pill {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.7em;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  vertical-align: middle;
  margin-right: 2px;
}
.text-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
  font-family: inherit;
}
.text-link:active {
  text-decoration-color: var(--text);
}
.text-link.quiet {
  color: var(--text-secondary);
  font-size: var(--text-meta);
}

.inline-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 14px;
}

.schedule-item {
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-meta);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  cursor: default;
  transition: background-color 220ms ease-out;
}
/* Dense list: truncate the row text rather than wrap. The full team names
   are revealed inline when the row is tapped to edit. */
.schedule-item > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schedule-item:last-child {
  border-bottom: none;
}
.schedule-item.editable {
  cursor: pointer;
}
.schedule-item.editable:active {
  background: var(--border-soft);
  border-radius: 8px;
  margin: 0 -8px;
  padding-left: 12px;
  padding-right: 12px;
  transition: none;
}
.schedule-item.is-current {
  font-weight: var(--weight-semibold);
}
.schedule-item-affordance {
  color: var(--text-secondary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: auto;
}
.schedule-item-affordance.edit {
  width: 15px;
  height: 15px;
  color: var(--text);
}
.schedule-item.completed,
.schedule-item.skipped {
  padding: 8px 4px;
  font-size: var(--text-label);
}
.schedule-item.completed > span { opacity: 0.4; }
.schedule-item.skipped > span { opacity: 0.35; }
.schedule-item.locked { font-weight: var(--weight-semibold); }
.schedule-item.edited > span::after { content: ' ✎'; color: var(--text-secondary); margin-left: 4px; }

.menu-sheet {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.menu-sheet .menu {
  background: var(--bg);
  width: 100%;
  max-width: 480px;
  border-radius: 12px 12px 0 0;
  padding: 12px;
}
.menu-sheet .menu > button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 14px;
  font-size: var(--text-body);
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  font-family: inherit;
}
.menu-sheet .menu > button:last-child { border-bottom: none; }

.sheet-view { padding: 4px 6px 6px; }
.sheet-view .sheet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.sheet-view .sheet-back {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: var(--text-title); /* chevron */
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: none;
  width: auto;
  text-align: left;
}
.sheet-view .sheet-title {
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  flex: 1;
}
.sheet-view .sheet-hint {
  font-size: var(--text-meta);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  margin: 0 0 12px;
}
.sheet-view input[type="text"] {
  margin-bottom: 14px;
}
.sheet-view .sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 14px;
}
.sheet-view .sheet-row-label {
  font-size: var(--text-label);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.sheet-view .sheet-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.sheet-view .sheet-actions .btn {
  flex: 1;
  width: auto;
  text-align: center;
  border-bottom: none;
}
.sheet-view .player-chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Session recap (shareable scorecard) ---------- */
.recap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 18px 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
.recap-stamp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.recap-mark {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text);
  font-weight: var(--weight-semibold);
}
.recap-date {
  font-size: var(--text-label);
  letter-spacing: 0.025em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.recap-hero {
  text-align: center;
  padding: 6px 0 4px;
}
.recap-kicker {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.recap-champion {
  font-size: var(--text-display);
  line-height: 1.05;
  font-weight: var(--weight-thin);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.recap-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 0;
}
.recap-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-left: 1px solid var(--border-soft);
}
.recap-strip-item:first-child { border-left: none; }
.recap-strip-item .n {
  font-size: var(--text-stat);
  font-weight: var(--weight-thin);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: var(--lh-display);
}
.recap-strip-item .u {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.roll {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.roll-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  min-height: 44px;
}
.roll-row:last-child { border-bottom: none; }
.roll-row:active {
  background: var(--border-soft);
  border-radius: 8px;
  margin: 0 -14px;
  padding-left: 18px;
  padding-right: 18px;
}
.roll-rank {
  flex: 0 0 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-meta);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.roll-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--text); line-height: var(--lh-tight); }
.roll-row.is-leader {
  background: var(--border);
  border-bottom: none;
  border-radius: 8px;
  padding: 16px 12px;
  margin: 4px -8px;
}
.roll-row.is-leader .roll-name { font-weight: var(--weight-semibold); }
.roll-record { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.roll-wl { font-size: var(--text-body); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.roll-diff { font-size: var(--text-micro); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.roll-chevron { color: var(--text-secondary); font-size: var(--text-body); margin-left: 0.5rem; flex: 0 0 auto; }

.recap-confirm { font-size: var(--text-meta); color: var(--text-secondary); margin: 0 0 0.25rem; }

.recap-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.recap-notes-label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.recap-note {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: var(--text-meta);
  line-height: var(--lh-body);
}
.recap-note-label {
  color: var(--text-secondary);
  flex: 0 0 auto;
}
.recap-note-body {
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.recap-note-tail {
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
  margin-left: 4px;
}

.recap-foot {
  font-size: var(--text-label);
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: 0.02em;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
}

.recap-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.schedule-item-editor {
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
}
/* Pair names wrap at word boundaries; the input is held to a tight width
   so the name claims the row. `<input type="number">` ignores `width: auto`
   and renders at a ~20ch user-agent intrinsic width, so without an explicit
   cap the input starves the name down to character-by-character wrapping. */
.schedule-item-editor .editor-team-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-meta);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.schedule-item-editor .match-team {
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.schedule-item-editor input.edit-score-input {
  width: 4ch;
  flex: 0 0 auto;
}
.editor-label {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.editor-section { margin-bottom: 10px; }
.editor-section-label {
  font-size: var(--text-micro);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: 4px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.player-chip {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 12px;
  font-size: var(--text-meta);
  font-family: inherit;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
.player-chip.selected {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.editor-lock-row {
  margin: 14px 0 6px;
}
.editor-lock-row .player-chip {
  width: 100%;
  text-align: center;
}
.editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.editor-actions .btn {
  flex: 1;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-soft);
}
.setting-row:last-child { border-bottom: none; }
.setting-meta { flex: 1; min-width: 0; }
.setting-name {
  font-size: var(--text-control);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
}
.setting-hint {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: var(--lh-snug);
}
.setting-input {
  flex: 0 0 92px;
  width: 92px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.preset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preset-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 14px 16px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background-color 140ms ease-out, border-color 140ms ease-out;
}
.preset-option.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.preset-option.is-active .preset-desc {
  color: var(--accent-text);
}
.preset-name {
  font-size: var(--text-control);
}
.preset-desc {
  font-size: var(--text-meta);
  color: var(--text-secondary);
  font-weight: 400;
}

.segmented.compact {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.segmented.compact .segment {
  padding: 8px 8px;
  min-height: 44px;
  font-size: var(--text-meta);
}
/* Single-line roster entry: the name flexes and the compact skill pill plus
   remove button sit to its right. The pill is narrow (one word) so even long
   names keep their room; no truncation in normal use, no second line. */
.roster-row .player-name { flex: 1 1 auto; min-width: 0; }

/* Tap-to-cycle skill pill: shows the current level, advances low -> mid ->
   high on tap. A fixed min-width keeps the row from shifting as the word
   changes length. */
.skill-pill {
  flex: 0 0 auto;
  min-width: 60px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-control);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.skill-pill:active { background: var(--border-soft); }
.skill-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 50%, transparent);
}

/* Undo affordance after removing a roster entry: names who left and offers a
   one-tap reversal, so the remove isn't a silent, unrecoverable splice. */
.undo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: var(--text-meta);
  color: var(--text-secondary);
}
.undo-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 14px;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-control);
  font-weight: 600;
  cursor: pointer;
}

.lock-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "glyph label" "glyph hint";
  column-gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.lock-toggle.is-locked {
  border-color: var(--text);
  background: var(--border-soft);
}
.lock-glyph { grid-area: glyph; width: 22px; height: 22px; }
.lock-label { grid-area: label; font-weight: 600; font-size: var(--text-control); }
.lock-hint { grid-area: hint; font-size: var(--text-meta); color: var(--text-secondary); }

/* Fix: .roll-row.is-leader { background } comes after .roll-row:active in source,
   winning on source-order tie (same specificity 0,2,0). Explicit rule restores
   active feedback for the leader row. */
.roll-row.is-leader:active {
  background: color-mix(in oklch, var(--border) 75%, var(--text) 8%);
}

/* ---- Hover states — pointer-capable devices only ---- */
@media (hover: hover) {
  .roll-row:hover {
    background: var(--border-soft);
    border-radius: 8px;
    margin: 0 -14px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .roll-row.is-leader:hover {
    background: color-mix(in oklch, var(--border) 88%, var(--text) 5%);
  }
  .schedule-item.editable:hover {
    background: var(--border-soft);
    border-radius: 8px;
    margin: 0 -8px;
    padding-left: 12px;
    padding-right: 12px;
    transition: none;
  }
  .btn:not(:disabled):hover {
    opacity: 0.82;
  }
  .btn.ghost:not(:disabled):hover {
    opacity: 1;
    background: var(--border-soft);
  }
  .segment:not(.is-active):hover {
    color: var(--text);
  }
  .stepper-btn:hover {
    background: var(--border-soft);
  }
  .player-chip:not(.selected):hover {
    background: var(--border-soft);
  }
  .skill-pill:not(:active):hover {
    background: var(--border-soft);
  }
  .preset-option:not(.is-active):hover {
    background: var(--border-soft);
  }
  .icon-btn:hover {
    opacity: 0.6;
  }
  .text-link:hover {
    text-decoration-color: var(--text);
  }
  .undo-btn:hover {
    opacity: 0.7;
  }
  .lock-toggle:not(.is-locked):hover {
    background: var(--border-soft);
  }
  .menu-sheet .menu > button:hover {
    background: var(--border-soft);
    border-radius: 8px;
    margin: 0 -8px;
    padding-left: 22px;
    padding-right: 22px;
  }
}
.setup-group-label { display:block; margin:12px 0 6px; font-size:var(--text-meta); color:var(--text-secondary); }
.setup-group-label span { font-weight:normal; }
#group-name { width:100%; box-sizing:border-box; margin-bottom:16px; }
/* v1.4 primitives. Screens can compose these classes without adding their
   own colors, sizes, radii, or motion values. */
.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--size-44);
  padding: var(--space-8) var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-12);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-15);
  font-weight: var(--weight-600);
  line-height: var(--leading-130);
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, opacity 160ms ease-out, transform 160ms ease-out;
}
.app-button--primary {
  width: 100%;
  min-height: var(--size-52);
  border-color: var(--action-edge);
  background: var(--action);
  color: var(--action-text);
}
.app-button--ghost {
  width: 100%;
  min-height: var(--size-52);
  border-color: var(--border);
  background: var(--surface);
}
.app-button--small {
  border-color: var(--border);
  background: var(--surface);
}
.app-button--text {
  border-color: transparent;
  background: transparent;
  color: var(--text);
}
.app-button--change-matchup {
  border-color: var(--border);
  background: var(--surface);
}
.app-button__icon { display: inline-flex; font-size: var(--text-16); line-height: var(--leading-100); }
.app-button:disabled { cursor: not-allowed; opacity: .4; }
.app-button--primary:disabled {
  border-color: transparent;
  background: var(--border-soft);
  color: var(--text-secondary);
  opacity: 1;
}
.app-button:not(:disabled):active,
.app-text-link:not(:disabled):active,
.app-name-pill:not(:disabled):active,
.app-level-control__option:not(:disabled):active,
.app-top-bar__menu:not(:disabled):active,
.app-stepper__button:not(:disabled):active,
.app-board-line__action .app-button:not(:disabled):active,
.app-add-player-line:not(:disabled):active,
.app-roster-line__remove:not(:disabled):active { transform: scale(.96); }

.app-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-44);
  padding: var(--space-8) 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-15);
  font-weight: var(--weight-600);
  line-height: var(--leading-130);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.app-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--size-48);
}
.app-top-bar__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-15);
  font-weight: var(--weight-600);
  line-height: var(--leading-130);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-top-bar__menu {
  flex: 0 0 var(--size-44);
  width: var(--size-44);
  min-height: var(--size-44);
  padding: 0;
  border: 0;
  border-radius: var(--radius-12);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-15);
  font-weight: var(--weight-600);
  line-height: var(--leading-100);
  cursor: pointer;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.app-status-line {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  color: var(--text);
  font-size: var(--text-17);
  font-weight: var(--weight-600);
  line-height: var(--leading-130);
}
.app-status-line--live { color: var(--status-live-text); }
.app-status-line--act { color: var(--status-act-text); }
.app-status-line--error { color: var(--status-error-text); }
.app-status-line__mark {
  flex: 0 0 var(--size-10);
  width: var(--size-10);
  height: var(--size-10);
  border-radius: 50%;
  background: currentColor;
}
.app-status-line--live .app-status-line__mark { background: var(--status-live-mark); }
.app-status-line--act .app-status-line__mark { background: var(--status-act-mark); }
.app-status-line--error .app-status-line__mark { background: var(--status-error-mark); }

.app-matchup {
  display: grid;
  gap: var(--space-2);
  color: var(--text);
  font-size: var(--text-28);
  font-weight: var(--weight-500);
  line-height: var(--leading-120);
}
.app-matchup__versus {
  color: var(--text-secondary);
  font-size: var(--text-13);
  font-weight: var(--weight-400);
  line-height: var(--leading-130);
}

.app-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--size-44);
}
.app-stepper__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--size-52);
  width: var(--size-52);
  min-height: var(--size-44);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-20);
  line-height: var(--leading-100);
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
}
.app-stepper__value {
  min-width: var(--size-44);
  color: var(--text);
  font-size: var(--text-20);
  font-weight: var(--weight-500);
  line-height: var(--leading-100);
  text-align: center;
}

.app-score-column {
  display: grid;
  justify-items: center;
  gap: var(--space-8);
  min-width: 0;
  color: var(--text);
}
.app-score-column__team {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: var(--text-15);
  font-weight: var(--weight-500);
  line-height: var(--leading-130);
  text-align: center;
}
.app-score-column__team-player {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-44);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.app-score-column__score {
  font-family: ui-rounded, -apple-system, system-ui, sans-serif;
  font-size: var(--text-64);
  font-weight: var(--weight-600);
  line-height: var(--leading-100);
  text-align: center;
}
input.app-score-column__input {
  appearance: textfield;
  width: 100%;
  height: var(--text-64);
  min-height: var(--text-64);
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  outline-offset: var(--space-2);
  background: transparent;
  color: var(--text);
  box-shadow: none;
  font-family: ui-rounded, system-ui, sans-serif;
  font-size: var(--text-64);
  font-weight: var(--weight-600);
  line-height: var(--leading-100);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
input.app-score-column__input:focus-visible {
  outline: var(--space-2) solid var(--accent);
  outline-offset: var(--space-2);
  border-radius: var(--radius-12);
  box-shadow: none;
}
input.app-score-column__input::-webkit-inner-spin-button,
input.app-score-column__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.app-inline-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  min-height: var(--size-44);
  margin: 0;
  padding: var(--space-8) 0;
  color: var(--status-error-text);
  font-size: var(--text-13);
  line-height: var(--leading-140);
}
.app-inline-error__mark { color: var(--status-error-mark); }

.app-up-next {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-13);
  line-height: var(--leading-140);
}
.app-up-next__label { color: var(--text-secondary); font-weight: var(--weight-600); }
.app-up-next__names { font-weight: var(--weight-400); }

.app-timeline-step {
  display: grid;
  grid-template-columns: var(--space-12) minmax(0, 1fr);
  grid-template-rows: var(--space-12) auto;
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-4);
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--size-44);
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.app-timeline-step__dot {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: var(--size-10);
  height: var(--size-10);
  border: 1px solid var(--text);
  border-radius: 50%;
  background: var(--text);
}
.app-timeline-step__line {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 1px;
  background: var(--text);
}
.app-timeline-step__dots {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  min-width: 0;
}
.app-timeline-step__dots span {
  display: block;
  width: var(--size-6);
  height: var(--size-6);
  border-radius: 50%;
  background: var(--text-secondary);
}
.app-timeline-step__dots span:last-child { width: var(--size-10); height: var(--size-10); background: var(--text); }
.app-timeline-step__copy { grid-column: 1 / -1; grid-row: 2; display: grid; gap: var(--space-2); min-width: 0; text-align: left; }
.app-timeline-step__label {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-12);
  line-height: var(--leading-130);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-timeline-step__value {
  color: var(--text);
  font-size: var(--text-15);
  font-weight: var(--weight-500);
  line-height: var(--leading-130);
}
.app-timeline-step--done .app-timeline-step__value,
.app-timeline-step--earlier .app-timeline-step__value,
.app-timeline-step--before-current .app-timeline-step__value { font-weight: var(--weight-400); }
.app-timeline-step--next .app-timeline-step__dot,
.app-timeline-step--live .app-timeline-step__dot,
.app-timeline-step--paused .app-timeline-step__dot {
  border-color: var(--line-pending);
  background: var(--bg);
}
.app-timeline-step--next .app-timeline-step__line,
.app-timeline-step--live .app-timeline-step__line,
.app-timeline-step--paused .app-timeline-step__line,
.app-timeline-step--before-current .app-timeline-step__line { background: var(--line-pending); }
.app-timeline-step--earlier { flex: 0 0 var(--size-104); grid-template-columns: auto minmax(0, 1fr); }

.app-board-line,
.setup-attendance-line {
  --board-status-cell: var(--size-150);
  --board-action-cell: var(--size-96);
}
.app-board-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--board-status-cell) var(--board-action-cell);
  align-items: baseline;
  align-content: center;
  min-height: var(--size-44);
  color: var(--text);
}
.app-board-line__main {
  display: grid;
  grid-column: 1 / 3;
  grid-template-columns: minmax(0, 1fr) var(--board-status-cell);
  align-items: baseline;
  align-content: center; /* one line stays centred in 44 px; a wrapped name grows the line */
  gap: var(--space-8);
  min-height: var(--size-44);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--text-16);
  line-height: var(--leading-130);
  padding-block: calc((var(--size-44) - 1lh) / 2); /* one name line fills exactly 44 px */
  text-align: left;
  cursor: pointer;
}
.app-board-line--static .app-board-line__main { cursor: default; }
.app-board-line.is-open .app-board-line__main { grid-column: 1 / -1; }
.app-board-line__name {
  min-width: 0;
  overflow-wrap: anywhere; /* names are never cut (DESIGN.md, CAN v2 F1) */
  font-size: var(--text-16);
  font-weight: var(--weight-500);
  line-height: var(--leading-130);
}
.app-board-line__status {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-13);
  line-height: var(--leading-130);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-board-line--away .app-board-line__name { color: var(--text-secondary); }
.app-board-line__action { grid-column: 3; display: flex; justify-content: flex-end; min-width: 0; }
.app-board-line__action .app-button { width: 100%; padding-inline: 0; justify-content: flex-end; }
.app-board-line__detail {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 0 var(--space-8);
  color: var(--text-secondary);
  font-size: var(--text-13);
  line-height: var(--leading-140);
}
.app-board-line__actions { grid-column: 1 / -1; display: flex; gap: var(--space-8); padding-bottom: var(--space-8); }
.app-board-line__actions .app-button { flex: 1; }

.app-group-label {
  margin: 0;
  padding: var(--space-8) 0 var(--space-4); /* 28 px row, text at the bottom (APP Group Label) */
  color: var(--text-secondary);
  font-size: var(--text-12);
  font-weight: var(--weight-600);
  line-height: var(--leading-130);
}

.app-add-player-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  min-height: var(--size-44);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-15);
  font-weight: var(--weight-600);
  line-height: var(--leading-130);
  text-align: left;
  cursor: pointer;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.app-add-player-line__icon { display: inline-flex; justify-content: center; width: var(--text-16); font-size: var(--text-16); font-weight: var(--weight-600); }
.app-add-player-line--open { gap: var(--space-8); padding-block: var(--space-4); cursor: default; } /* APP Add Player Line / Open: 44 px field, 4 above and below */
.app-add-player-line--open input {
  flex: 1;
  min-width: 0;
  min-height: var(--size-44);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-16);
}

.app-name-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-44);
  min-width: var(--size-44);
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-15);
  font-weight: var(--weight-600);
  line-height: var(--leading-130);
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
}
.app-name-pill.is-selected { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }

.app-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--scrim);
}
.app-sheet {
  width: 100%;
  max-width: 480px;
  padding: var(--space-20) var(--space-20) var(--space-32);
  border-radius: var(--radius-12) var(--radius-12) 0 0;
  background: var(--bg); /* frames: sheets use the page colour; controls inside keep --surface */
  color: var(--text);
  box-shadow: var(--sheet-shadow);
}
.app-sheet__title { margin: 0 0 var(--space-12); font-size: var(--text-20); font-weight: var(--weight-600); line-height: var(--leading-120); }
.app-sheet__body { margin: 0 0 var(--space-12); color: var(--text-secondary); font-size: var(--text-13); line-height: var(--leading-140); }
.app-sheet__actions { display: grid; gap: var(--space-12); }
.app-menu { display: grid; }
.app-sheet:has(> .app-menu) { padding-top: var(--space-8); }

.app-menu-item {
  display: grid;
  gap: var(--space-2);
  min-height: var(--size-44);
  width: 100%;
  padding: var(--space-16) 0;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.app-menu-item:last-child { border-bottom: 0; }
.app-menu-item__title { font-size: var(--text-15); font-weight: var(--weight-500); line-height: var(--leading-130); }
.app-menu-item__sub { color: var(--text-secondary); font-size: var(--text-12); line-height: var(--leading-130); }

.app-leave-sheet__scores { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); margin: 0 0 var(--space-12); }

.app-page-head { margin: 0; }
.app-page-head__label { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-12); font-weight: var(--weight-600); line-height: var(--leading-130); }
.app-page-head__title { margin: 0; color: var(--text); font-size: var(--text-28); font-weight: var(--weight-500); line-height: var(--leading-120); }
.app-page-head__line { margin: var(--space-8) 0 0; color: var(--text); font-size: var(--text-15); line-height: var(--leading-130); }
.app-page-head__note { margin: var(--space-8) 0 0; color: var(--text-secondary); font-size: var(--text-13); line-height: var(--leading-140); }

.summary-screen {
  display: grid;
  align-content: start;
  gap: var(--space-32);
  min-height: calc(100vh - var(--space-32));
}
.summary-screen .app-top-bar { padding-inline: var(--space-4); }
.summary-main {
  display: grid;
  align-content: start;
  gap: var(--space-32);
  min-width: 0;
  padding-inline: var(--space-4);
}
.summary-court-time,
.summary-standings,
.summary-notes {
  display: grid;
  align-content: start;
}
.summary-standings { gap: 0; } /* rows follow the 28 px label row directly */
.summary-standings-group { display: grid; align-content: start; }
.summary-standings-group--rest { margin-top: var(--space-24); }
.summary-standings-group--rest .app-standing-line__rank { color: var(--text-secondary); }
.summary-tie-rule {
  margin: var(--space-8) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-12);
  line-height: var(--leading-140);
}
.summary-notes { gap: var(--space-24); }
.summary-actions {
  display: grid;
  align-content: start;
  gap: var(--space-12); /* two stacked buttons, as in sheets */
  padding-bottom: var(--space-32);
}
.summary-actions .app-text-link { justify-self: start; }

.history-screen,
.player-screen {
  display: grid;
  align-content: start;
  gap: var(--space-32);
  min-height: calc(100vh - var(--space-16));
  padding-inline: var(--space-4);
}
.history-top,
.player-top { display: flex; align-items: center; }
.history-list { display: grid; align-content: start; gap: var(--space-8); min-width: 0; }
.history-list .app-score-line__score { color: var(--text-secondary); }
.history-standings { min-width: 0; }
.history-tie-rule {
  margin: var(--space-8) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-12);
  line-height: var(--leading-140);
}
.player-main { display: grid; align-content: start; gap: var(--space-32); min-width: 0; }
.player-groups { display: grid; align-content: start; gap: var(--space-24); min-width: 0; }
.player-group { display: grid; align-content: start; gap: var(--space-8); min-width: 0; }
.player-lines { display: grid; align-content: start; min-width: 0; }

.app-event-line { display: flex; align-items: center; gap: var(--space-8); margin: 0; color: var(--text-secondary); font-size: var(--text-13); line-height: var(--leading-140); }
.app-event-line__rule { flex: 0 0 var(--space-12); height: 1px; background: var(--line-pending); }

.app-score-line { display: grid; grid-template-columns: minmax(0, 1fr) var(--text-64); align-items: center; gap: var(--space-16); min-height: var(--size-44); padding: var(--space-8) 0; color: var(--text); }
.app-score-line--interactive { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.app-score-line__copy { display: grid; gap: var(--space-2); min-width: 0; }
.app-score-line__round { color: var(--text-secondary); font-size: var(--text-12); line-height: var(--leading-130); }
.app-score-line__result { overflow-wrap: anywhere; font-size: var(--text-15); font-weight: var(--weight-500); line-height: var(--leading-130); }
.app-score-line__note { color: var(--text-secondary); font-size: var(--text-13); line-height: var(--leading-140); }
.app-score-line__score { color: var(--text); font-size: var(--text-20); font-weight: var(--weight-300); line-height: var(--leading-100); text-align: right; }
.app-score-line--on-court .app-score-line__round,
.app-score-line--on-court .app-score-line__score { color: var(--text-secondary); }

.scores-screen { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: var(--space-32); min-height: calc(100vh - var(--space-16)); padding-inline: var(--space-4); }
.scores-top { min-height: var(--size-44); display: flex; align-items: center; }
.scores-list { display: grid; align-content: start; gap: var(--space-8); min-width: 0; }
.scores-list > .app-event-line { margin-block: var(--space-4); }
.scores-round { min-width: 0; }
.scores-round > .app-score-line { padding-block: 0; }
.scores-correction { display: grid; gap: var(--space-16); padding-top: var(--space-8); }
.scores-correction__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.scores-correction__effect { margin: 0; color: var(--text-secondary); font-size: var(--text-13); line-height: var(--leading-140); }
.scores-correction__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-8); }
.scores-correction__actions .app-text-link { padding-inline: var(--space-8); }
.scores-action-bar { position: sticky; bottom: 0; z-index: 2; padding: var(--space-12) 0 var(--space-20); border-top: 1px solid var(--border-soft); background: var(--bg); }

.app-note-line { display: grid; align-content: start; gap: var(--space-4); min-width: 0; }
.app-note-line__label { margin: 0; color: var(--text-secondary); font-size: var(--text-12); font-weight: var(--weight-400); line-height: var(--leading-130); }
.app-note-line__body { margin: 0; color: var(--text); font-size: var(--text-15); line-height: var(--leading-140); }

.app-standing-line { display: grid; grid-template-columns: var(--space-20) minmax(0, 1fr) auto var(--size-44); align-items: baseline; align-content: center; gap: var(--space-12); min-height: var(--size-44); color: var(--text); }
.app-standing-line--interactive { grid-template-columns: var(--space-20) minmax(0, 1fr) auto var(--size-44) var(--space-12); width: 100%; padding: 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.app-standing-line__rank { font-size: var(--text-15); font-weight: var(--weight-600); font-variant-numeric: tabular-nums; }
.app-standing-line__name { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-16); font-weight: var(--weight-500); line-height: var(--leading-130); }
.app-standing-line__reason { display: inline; margin-inline-start: var(--space-8); color: var(--text-secondary); font-size: var(--text-13); white-space: nowrap; }
.app-standing-line__record, .app-standing-line__diff { font-size: var(--text-16); font-weight: var(--weight-500); font-variant-numeric: tabular-nums; text-align: right; }
.app-standing-line__diff { color: var(--text-secondary); font-size: var(--text-13); font-weight: var(--weight-400); }
.app-standing-line__chevron { color: var(--text-secondary); font-size: var(--text-16); line-height: var(--leading-100); text-align: right; }

.app-field { display: grid; gap: var(--space-8); color: var(--text-secondary); font-size: var(--text-13); font-weight: var(--weight-600); line-height: var(--leading-130); }
.app-field input { min-height: var(--size-44); width: 100%; padding: var(--space-8) var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-12); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-16); }
.app-field input::placeholder, .app-add-player-line--open input::placeholder { color: var(--text-secondary); opacity: 1; }

.app-roster-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: var(--size-44); color: var(--text); }
.app-roster-line__name--button { flex: 1; min-height: var(--size-44); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: text; }
.app-roster-line__name { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-16); font-weight: var(--weight-500); line-height: var(--leading-130); }
.app-roster-line__remove { flex: 0 0 var(--size-44); width: var(--size-44); min-height: var(--size-44); padding: 0; border: 0; border-radius: var(--radius-12); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-20); line-height: var(--leading-100); cursor: pointer; transition: opacity 160ms ease-out, transform 160ms ease-out; }

.app-level-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); width: var(--size-240); height: var(--size-44); padding: var(--space-4); border-radius: var(--radius-12); background: var(--border-soft); } /* 240 x 44 (Aldo, 2026-10-17: 44 px tap floor) */
.app-level-control__option { min-height: 0; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-8); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-13); font-weight: var(--weight-500); cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out; }
.app-level-control__option { position: relative; }
.app-level-control__option::after { content: ''; position: absolute; inset: calc(var(--space-4) * -1) 0; } /* tap area reaches the full 44 px control */
.app-level-control__option.is-selected { background: var(--surface); color: var(--text); font-weight: var(--weight-600); }
.app-level-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-12); min-height: var(--size-48); }
.app-level-line__name { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-16); font-weight: var(--weight-500); }

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

/* Setup keeps the five states as one compact, token-only flow. */
.setup-screen {
  min-height: calc(100vh - var(--space-32));
  margin-inline: var(--space-4);
}
.setup-background { display: grid; align-content: start; gap: var(--space-32); min-height: inherit; }
.setup-main {
  display: grid;
  align-content: start;
  gap: var(--space-32);
  min-width: 0;
}
.setup-head { display: grid; gap: var(--space-4); }
.setup-headline {
  margin: 0;
  color: var(--text);
  font-size: var(--text-28);
  font-weight: var(--weight-500);
  line-height: var(--leading-120);
}
.setup-meta,
.setup-minimum {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-13);
  line-height: var(--leading-140);
}
.setup-roster-group,
.setup-roster { display: grid; align-content: start; gap: 0; }
.setup-roster-group { gap: 0; }
.setup-head + .app-field { margin-top: calc(var(--space-20) * -1); } /* 12 below the head */
.setup-roster-group + .app-text-link { margin-top: calc(var(--space-32) * -1); } /* directly under Add player */
.setup-roster .app-roster-line { min-height: var(--size-44); }
.setup-attendance-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--board-status-cell) var(--board-action-cell);
  align-items: center;
  gap: 0;
  min-height: var(--size-44);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-16);
  font-weight: var(--weight-500);
  line-height: var(--leading-130);
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease-out, transform 160ms ease-out;
}
.setup-attendance-line:active { transform: scale(.98); }
.setup-attendance-line__name { min-width: 0; overflow-wrap: anywhere; }
.setup-attendance-line__state { grid-column: 2; justify-self: start; color: var(--text-secondary); font-size: var(--text-13); font-weight: var(--weight-400); }
.setup-attendance-line.is-away .setup-attendance-line__name { color: var(--text-secondary); }
.setup-action-bar { margin-top: calc(var(--space-12) * -1); } /* 20 below the last line, as in S1 and S3 */
.setup-action-bar .app-button { width: 100%; }
.setup-main > .app-text-link { justify-self: start; }
.setup-action-bar + .app-text-link { margin-top: calc((var(--space-32) - var(--space-4)) * -1); } /* S4: directly under the button */
.setup-level-sheet .app-sheet { max-height: calc(100vh - var(--space-40)); overflow: auto; overscroll-behavior: contain; }
.setup-level-lines { display: grid; align-content: start; gap: 0; margin-bottom: var(--space-16); }
.setup-level-sheet .app-level-line { min-height: var(--size-48); }

@media (prefers-reduced-motion: reduce) {
  .app-button,
  .app-text-link,
  .app-name-pill,
  .app-top-bar__menu,
  .app-stepper__button,
  .app-menu-item,
  .app-add-player-line,
  .app-roster-line__remove,
  .app-level-control__option { transition: none; }
  .app-status-line--live .app-status-line__mark { animation: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .app-status-line--live .app-status-line__mark { animation: app-status-pulse 2s ease-in-out infinite; }
}

@keyframes app-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Dev-only gallery layout. The primitive rules above remain theme-agnostic. */
.gallery-page { max-width: none; padding: var(--space-20); }
.gallery-page main { max-width: 1200px; margin: 0 auto; }
.gallery-page h1 { margin: 0 0 var(--space-8); font-size: var(--text-28); line-height: var(--leading-120); }
.gallery-page > main > p { margin: 0 0 var(--space-20); color: var(--text-secondary); font-size: var(--text-13); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); align-items: start; }
.gallery-theme { min-width: 0; padding: var(--space-20); border: 1px solid var(--border); border-radius: var(--radius-12); background: var(--bg); color: var(--text); }
.gallery-theme[data-theme="dark"] {
  --bg: #0E0E0E;
  --surface: #1A1A1A;
  --border: #2C2C2C;
  --border-soft: #242424;
  --text: #EDEDED;
  --text-secondary: #9B9B9B;
  --line-pending: #5A5A5A;
  --accent: #F2F2F2;
  --accent-text: #0E0E0E;
  --action-edge: transparent;
  --status-live-text: #7FD3A1;
  --status-live-mark: #4CC37E;
  --status-act-text: #F7B076;
  --status-act-mark: #F59E42;
  --status-error-text: #FF8A80;
  --status-error-mark: #F0645A;
  --scrim: rgb(26 26 26 / 30%);
  --sheet-shadow: 0 -8px 32px rgb(0 0 0 / 40%);
}
.gallery-theme__title { margin: 0 0 var(--space-16); font-size: var(--text-20); line-height: var(--leading-120); }
.gallery-section { display: grid; gap: var(--space-8); margin: 0 0 var(--space-24); }
.gallery-section__label { margin: 0; color: var(--text-secondary); font-size: var(--text-12); font-weight: var(--weight-600); line-height: var(--leading-130); }
.gallery-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.gallery-stack { display: grid; gap: var(--space-8); }
.gallery-timeline-row { display: flex; align-items: flex-start; gap: var(--space-8); }
.gallery-board { display: grid; gap: var(--space-4); }
.gallery-sheet-stage { position: relative; min-height: 260px; overflow: hidden; border-radius: var(--radius-12); }
.gallery-sheet-stage .app-sheet-scrim { position: absolute; }
@media (max-width: 720px) {
  .gallery-page { padding: var(--space-8); }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-theme { padding: var(--space-12); }
}

/* v1.4 screens start at the top edge, under the phone's status bar (frames: top bar at y 0). */
.adaptive-live-screen, .setup-screen, .summary-screen, .scores-screen, .history-screen, .player-screen {
  margin-top: calc(var(--space-16) * -1);
  padding-top: env(safe-area-inset-top, 0px);
}

/* v2 primitives (DESIGN.md, CAN v2) */
.app-forecast-line { display: grid; gap: var(--space-2); padding: var(--space-8) 0; color: var(--text); }
.app-forecast-line__round { color: var(--text-secondary); font-size: var(--text-12); line-height: var(--leading-130); }
.app-forecast-line__names { overflow-wrap: anywhere; font-size: var(--text-15); font-weight: var(--weight-400); line-height: var(--leading-130); }
.adaptive-coming-up { display: grid; align-content: start; min-width: 0; }
.app-table-header, .app-table-line { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-64) var(--size-64); gap: var(--space-12); color: var(--text); }
.app-table-header { align-items: end; height: var(--size-28); padding-bottom: var(--space-4); color: var(--text-secondary); font-size: var(--text-12); font-weight: var(--weight-600); line-height: var(--leading-130); text-align: right; }
.app-table-line { align-items: center; min-height: var(--size-44); font-size: var(--text-16); line-height: var(--leading-130); }
.app-table-line__name { overflow-wrap: anywhere; font-weight: var(--weight-500); }
.app-table-line__count { font-weight: var(--weight-400); font-variant-numeric: tabular-nums; text-align: right; }
.app-table-line__count.is-zero { color: var(--text-secondary); }
.player-table { display: grid; align-content: start; min-width: 0; }

.data-controls { display: grid; gap: 16px; padding-block: 24px; }
.data-controls label { display: block; line-height: 1.5; }
.data-controls input[type="checkbox"] { width: 24px; height: 24px; vertical-align: middle; margin-inline-end: 8px; }
.data-controls a { color: inherit; text-decoration: underline; }
.storage-notice { position: sticky; top: 0; z-index: 100; padding: 16px; color: var(--text); background: var(--surface); border-bottom: 2px solid currentColor; }
.storage-notice button { min-height: 44px; padding: 8px 16px; }

/* Scoreboard digits (ANTI_SLOP.md, in-app brand exception): only on always-numeric scores. */
.app-stepper__value, .app-score-column__score, .app-score-line__score,
.app-standing-line__record, .app-standing-line__diff,
.app-timeline-step__value.is-score { font-family: var(--font-score); }

/* Brand in the frame (ANTI_SLOP.md, in-app brand exception): a green area that
   re-maps the tokens, so primitives inside it need no extra rules. Used by the
   sign-in sheet and the live-score page header. */
.is-brand {
  --bg: #004225;
  --surface: transparent;
  --border: #7AA38E;
  --border-soft: #0B4E30;
  --text: #FFFFFF;
  --text-secondary: #C9DACF;
  --action-edge: transparent;
  --status-error-text: #FFB4A9;
  --status-error-mark: #FFB4A9;
  background: var(--bg);
  color: var(--text);
}
.brand-mark { display: block; width: 32px; height: 28px; color: #FFD100; }
.app-sheet.is-brand .brand-mark { margin-bottom: var(--space-16); }

/* Live-score page (watch.html) */
#watch-root { max-width: 480px; margin: 0 auto; }
.watch-head { padding: calc(env(safe-area-inset-top, 0px) + var(--space-24)) var(--space-20) var(--space-24); }
.watch-head .brand-mark { margin-bottom: var(--space-16); }
.watch-head__kicker { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-13); line-height: var(--leading-130); }
.watch-head__title { margin: 0 0 var(--space-8); font-size: var(--text-28); font-weight: var(--weight-600); line-height: var(--leading-120); overflow-wrap: anywhere; }
.watch-head__meta { margin: 0; color: var(--text-secondary); font-size: var(--text-15); line-height: var(--leading-140); }
.watch-main { padding: var(--space-24) var(--space-20) var(--space-40); }