/* Chrome: rail, tab dock, top bar, command bar (signature), timer pill/dock, time-up banner. */

/* ---------- Rail ---------- */
.rail {
  background: var(--nav-bg);
  color: var(--nav-text);
  border: 1px solid var(--nav-line);
  box-shadow: var(--shadow-3);
}
.rail__brand { display: flex; align-items: center; justify-content: center; padding: 0 0 18px; }
.rail__brand-mark { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 6px 12px var(--accent-glow)); }
.rail__brand-mark svg { width: 46px; height: 46px; animation: ball-spin 90s linear infinite; }
@keyframes ball-spin { to { transform: rotate(360deg); } }
.rail__nav { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
/* R4-08: nested radius (rail 32 - 8 inset ~ 24 -> --radius-2). */
.rail__nav-item, .rail__theme-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  width: 100%; min-height: 68px; padding: var(--space-2) var(--space-1); border-radius: var(--radius-2); color: var(--nav-text);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.rail__nav-item:hover, .rail__theme-btn:hover { background: var(--nav-line); }
.rail__nav-item:active, .rail__theme-btn:active { transform: scale(0.95); }
.rail__nav-label { font-family: var(--font-family-sans); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.02em; color: inherit; text-transform: none; }
.rail__nav-item--active { color: var(--lime-400); background: var(--nav-active-bg); }
.rail__nav-item--active::before {
  content: ''; position: absolute; left: -9px; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--lime-400); box-shadow: 0 0 16px var(--lime-400);
}
.rail__nav-icon { display: flex; }

/* ---------- Tab dock ---------- */
.tab-bar {
  background: var(--glass-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-full);
  box-shadow: var(--shadow-3); background-color: var(--surface);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--radius-full); color: var(--text2); font-size: var(--t-micro); font-weight: 700;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tab-item:active { transform: scale(0.94); }
.tab-item__icon { display: flex; }
.tab-item__label { font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.02em; color: inherit !important; }
/* R4-22: the rail's active treatment (lime tint + accent label/icon) at every size; the cream
   pill stays for segmented controls. */
.tab-item--active { background: var(--accent-soft); color: var(--accent); }

/* ---------- Top bar ---------- */
.top-bar__title { font-size: var(--t-title-sm); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 0; }
.top-bar__context {
  margin-top: var(--space-1); font-family: var(--font-family-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-bar__btn {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch); padding: 0 var(--space-4); border-radius: var(--radius-full);
  border: 1px solid var(--line-strong); background: var(--glass-solid); background-color: var(--surface);
  font-weight: 700; font-size: var(--t-body); transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.top-bar__btn:hover { background: var(--glass-strong); }
.top-bar__btn:active { transform: scale(0.96); }
.top-bar__players { padding: 0 10px 0 var(--space-3); gap: var(--space-2); }
.top-bar__players-icon { display: flex; }
.top-bar__title-short, .top-bar__context-short { display: none; }
@media (max-width: 759px) {
  .top-bar__title-full, .top-bar__context-full { display: none; }
  .top-bar__title-short, .top-bar__context-short { display: inline; }
} /* R1-12, R2-13 */
.top-bar__more { width: var(--touch); padding: 0; justify-content: center; } /* R4-02: MORE_ICON, optically centred */

/* ---------- Timer pill ---------- */
.timer-pill {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch); padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-full);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.timer-pill:active { transform: scale(0.96); }
.timer-pill__icon { display: flex; color: var(--text2); }
.timer-pill__digits { font-weight: 800; font-size: var(--t-section); letter-spacing: -0.03em; min-width: 3.2ch; text-align: left; }
.timer-pill[data-status="running"] { border-color: var(--accent-line); box-shadow: var(--glow-lime); }
.timer-pill[data-status="running"] .timer-pill__icon { color: var(--accent); animation: live-dot var(--dur-pulse-slow) ease-in-out infinite; }
.timer-pill[data-status="paused"] { border-style: dashed; }
.timer-pill[data-status="paused"] .timer-pill__digits { opacity: 0.6; }
.timer-pill[data-critical="true"] { background: #000; border-color: var(--critical-ring); color: #fff; animation: red-pulse var(--dur-pulse) ease-in-out infinite; }
.timer-pill[data-critical="true"][data-flash="a"] .timer-pill__digits { color: var(--flash-yellow); }
.timer-pill[data-critical="true"] .timer-pill__icon { color: #fff; }
.timer-pill[data-status="expired"] { background: var(--time-up); border-color: transparent; color: #fff; animation: red-pulse var(--dur-pulse) ease-in-out infinite; } /* R4-23: in phase with every 1 Hz signal */
.timer-pill[data-status="expired"] .timer-pill__icon { color: #fff; }
@keyframes live-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes red-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--critical-ring) 60%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }

/* ---------- Time-up banner ---------- */
#banner-root:empty { display: none; }
.time-up-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-3) var(--radius-3);
  background: var(--time-up); color: #fff; box-shadow: 0 12px 40px color-mix(in srgb, var(--time-up) 50%, transparent), inset 0 -1px 0 var(--on-red-line);
  animation: banner-in var(--dur-slow) var(--ease-spring) both;
}
.time-up-banner__text {
  display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--t-title-sm); font-weight: 800; font-style: italic; letter-spacing: -0.02em; text-transform: uppercase;
}
.time-up-banner__text::before {
  content: ''; width: 44px; height: 44px; border-radius: 50%; background: #fff var(--icon-alarm) center / 26px no-repeat;
  animation: alarm-wobble calc(var(--dur-pulse) / 2) ease-in-out infinite alternate; /* one wobble cycle per 1 Hz pulse */
}
@keyframes alarm-wobble { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.time-up-banner__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.time-up-banner__btn { min-height: var(--btn-sm); padding: 0 20px; font-size: var(--t-btn-sm); background: transparent; color: #fff; border-color: var(--on-red-line-strong); }
.time-up-banner__btn--stop { background: #fff; color: var(--nub-ink); border-color: #fff; }
.time-up-banner__btn:hover:not(.time-up-banner__btn--stop) { background: var(--on-red-soft); }
.time-up-banner__btn--icon { gap: var(--space-2); }
.time-up-banner__icon { display: inline-flex; }
.time-up-banner__icon svg { width: 20px; height: 20px; }
@keyframes banner-in { from { transform: translateY(-100%); } to { transform: none; } }

/* ---------- Command bar (signature) ---------- */
.command-bar__inner {
  padding: 8px; border-radius: var(--radius-full); border: 1px solid var(--line-strong);
  background: var(--glass-solid); background-color: var(--surface); box-shadow: var(--shadow-3), 0 -1px 0 var(--accent-line);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
}
/* R4-07: the command bar is the lg step (64 / 19). R4-19: Back and the quiet Next draw their
   outline the same way (a --stroke-control border), so both render at one weight in any engine. */
.cmd-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--btn-lg);
  padding: 0 28px; border-radius: var(--radius-full); font-size: var(--t-btn-lg); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap;
  border: var(--stroke-control) solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.cmd-btn:active:not(:disabled) { transform: scale(0.96); }
.cmd-btn--back { justify-self: start; padding-left: 20px; border-color: var(--line-strong); color: var(--text); background: transparent; }
.cmd-btn--back:disabled { color: var(--text3); border-style: dashed; border-color: var(--line); }
.cmd-btn__arrow { display: inline-flex; } /* R4-05: CHEVRON_LEFT, not a text "‹" */
.cmd-btn--next {
  /* nub 44 sits 10px in (the lg inset); the label ends 16px before it */
  justify-self: end; min-width: 200px; background: var(--accent-fill); color: var(--on-accent); padding: 0 70px 0 28px;
  box-shadow: var(--accent-edge), var(--shadow-accent); /* R3-13: olive edge on cream */
  --done: 0; --ring-fill: var(--nub-ink); --ring-track: rgba(16, 21, 10, 0.18); /* R2-21: the lime primary in both themes */
}
.cmd-btn--next::before { /* progress ring: courts done / total */
  content: ''; position: absolute; right: 2px; top: 50%; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%;
  background: conic-gradient(var(--ring-fill) calc(var(--done) * 1turn), var(--ring-track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  transition: background var(--dur-slow) var(--ease-out);
}
.cmd-btn--next::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
  background: var(--nub-ink) var(--icon-arrow-ur) center / 22px no-repeat;
  transition: transform var(--dur-base) var(--ease-spring);
}
.cmd-btn--next:hover::after { transform: rotate(45deg); }
.cmd-btn--next[data-all-done="true"] { animation: next-ready var(--dur-ambient) ease-in-out infinite; }
@keyframes next-ready { 0%, 70%, 100% { box-shadow: var(--accent-edge), 0 0 0 0 rgba(var(--breathe-rgb), 0); } 85% { box-shadow: var(--accent-edge), 0 0 0 8px rgba(var(--breathe-rgb), 0.35); } }
.cmd-spacer { justify-self: end; }
/* R2-04: Play again on End takes the Next slot; no courts-done ring there. */
.cmd-btn--play-again::before { display: none; }
.cmd-btn--next:disabled { opacity: 0.45; }
.cmd-btn__label-short { display: none; } /* R3-09: Compact only, 4+ rounds */
/* R3-01 / R3-01b: quiet Next while the dock's Play is the primary (round ready to start):
   the Back button's outline language, same label and place, still one tap. The nub loses its
   ink disc and keeps the arrow in the text colour inside the (empty) courts-done ring. */
.cmd-btn--next.is-quiet {
  background: transparent; color: var(--text); border-color: var(--line-strong); box-shadow: none;
  --ring-fill: var(--text); --ring-track: var(--line-strong);
}
.cmd-btn--next.is-quiet::after {
  background: var(--text);
  -webkit-mask: var(--icon-arrow-ur-mask) center / 22px no-repeat; mask: var(--icon-arrow-ur-mask) center / 22px no-repeat;
}
/* The courts-done ring thins to the button's own 1.5px outline weight, so the nub reads as a
   quiet outlined disc (no scores yet = nothing to fill) rather than a heavy grey track. */
.cmd-btn--next.is-quiet::before {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
}
.cmd-btn--next.is-quiet:hover { background: var(--glass-strong); }
/* Leaving the ready state (first score, court done or clock start): Next fills with lime from
   the outline while the dock's Play fades to cream (overlays.css play-handoff). The nub pops in. */
@media (prefers-reduced-motion: no-preference) {
  .cmd-btn--next.is-handoff { animation: next-handoff var(--dur-enter) var(--ease-out) both; }
  .cmd-btn--next.is-handoff::after { animation: nub-in var(--dur-enter) var(--ease-spring) both; animation-delay: inherit; }
}
@keyframes next-handoff {
  from { background: transparent; color: var(--text); border-color: var(--line-strong); box-shadow: none; transform: scale(0.97); }
}
@keyframes nub-in { from { transform: scale(0.4) rotate(-45deg); opacity: 0; } }

.round-dots { display: flex; align-items: center; justify-content: center; gap: 0; min-width: 0; }
/* R2-06 (R1-05 made real): a fixed 48px-wide hit area per dot on Medium/Expanded, 44px on
   Compact. An explicit width (not just flex-basis) so the grid track sizes to it; if the dots
   do not fit, main.js shows the round picker instead of shrinking them. */
.round-dot { position: relative; flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); } /* R4-18: a round focus ring */
.round-dot__mark { display: block; width: 14px; height: 14px; border-radius: var(--radius-full); border: 2px solid var(--line-strong); transition: all var(--dur-slow) var(--ease-spring); }
.round-dot--done .round-dot__mark { background: var(--accent-fill); border-color: var(--accent-fill); opacity: 0.55; }
/* R1-06: lime on cream is ~1.1:1, so light theme marks done rounds in solid olive (--accent, ~8:1). */
:root[data-theme="light"] .round-dot--done .round-dot__mark { background: var(--accent); border-color: var(--accent); opacity: 1; }
.round-dot--skipped .round-dot__mark { border-style: dashed; border-color: var(--text3); }
.round-dot--current { flex: 0 0 56px; width: 56px; }
.round-dot--current .round-dot__mark {
  width: 46px; height: 28px; background: var(--accent-fill); border-color: transparent; box-shadow: 0 0 20px var(--accent-glow);
  display: flex; align-items: center; justify-content: center;
}
.round-dot--current .round-dot__mark::after {
  content: attr(data-n); font-family: var(--font-family-sans); font-size: var(--t-btn-sm); font-weight: 800; color: var(--on-accent); letter-spacing: -0.02em;
}
:root[data-theme="light"] .round-dot--current .round-dot__mark { box-shadow: 0 0 0 2px var(--accent); }
.round-dot--upcoming .round-dot__mark { background: transparent; }
.round-dot:hover .round-dot__mark { border-color: var(--text); }
.round-scrubber { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-family-sans); font-size: var(--t-btn-sm); font-weight: 700; min-height: var(--btn-sm); padding: 0 var(--space-4) 0 20px; border-radius: var(--radius-full); border: var(--stroke-control) solid var(--line-strong); white-space: nowrap; }
.round-scrubber__chevron { display: inline-flex; color: var(--text2); } /* R2-20; R4-05 CHEVRON_DOWN_SM */
@media (max-width: 759px) { .round-scrubber { min-height: var(--btn-md); padding: 0 var(--space-3) 0 var(--space-4); } }

@media (max-width: 759px) {
  /* R1-12/R1-14: the context line may take two lines on phones instead of truncating mid-word;
     12px is the informational minimum. */
  .top-bar__context { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; margin-top: 4px; }
  :root { --topbar-h: 64px; --tab-h: 56px; --toast-bottom: 162px; }
  /* R3-09 (UI leftover): a slimmer tab dock on phones - 48px items (the target minimum) in a
     4px frame, 8px off the bottom - hands ~10px back to the courts; labels stay 12px. */
  .tab-bar { padding: 4px; margin-bottom: calc(8px + var(--safe-bottom)); }
  .tab-bar .tab-item { min-height: 48px; gap: 1px; }
  .command-bar { padding: 0 16px 8px; }
  /* R4-07: on Compact all three command-bar controls are the md step (56 / 17). */
  .command-bar__inner { padding: var(--space-1); gap: var(--space-1); }
  .cmd-btn { min-height: var(--btn-md); padding: 0 var(--space-4); font-size: var(--t-btn-md); }
  .cmd-btn--back .cmd-btn__text { display: none; }
  .cmd-btn--back { width: var(--btn-md); padding: 0; }
  .cmd-btn--back:has(.cmd-btn__label) { width: auto; padding: 0 var(--space-4) 0 var(--space-3); }
  .cmd-btn--next { min-width: 0; padding: 0 64px 0 20px; }
  .cmd-btn--next::before { width: 52px; height: 52px; margin-top: -26px; right: 2px; }
  .cmd-btn--next::after { width: 40px; height: 40px; margin-top: -20px; right: 8px; }
  /* R3-09: Back and Next take only their own width on Compact (equal 1fr sides wasted ~55px
     beside Back), so the dots track gets the rest: 4 rounds fit at 390px, 5 from ~430px. */
  .command-bar__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .command-bar__inner > .round-scrubber { justify-self: center; }
  .cmd-btn__label-long { display: none; }
  .cmd-btn__label-short { display: inline; }
  .round-nav--end { visibility: hidden; } /* R3-09: on End, Back + Play again only */
  /* Compact: 44px-wide dots (48px tall); main.js falls back to the round picker when the
     track between Back and Next is too narrow for all of them. */
  .round-dot { flex: 0 0 44px; width: 44px; }
  .round-dot--current { flex: 0 0 48px; width: 48px; }
  .round-dot--current .round-dot__mark { width: 38px; height: 26px; }
  .top-bar { padding-left: 16px; padding-right: 16px; }
  .top-bar__players-label { display: none; }
  .top-bar__players { padding: 0 var(--space-2) 0 10px; gap: var(--space-2); }
  .time-up-banner__text { font-size: var(--t-lead); }
}
@media (max-width: 759px) {
  .time-up-banner { flex-wrap: nowrap; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); }
  .time-up-banner__text::before { width: 32px; height: 32px; background-image: var(--icon-alarm-sm); background-size: 20px; }
  .time-up-banner__actions { flex-wrap: nowrap; }
  .time-up-banner__btn--icon { width: 48px; padding: 0; }
  .time-up-banner__btn--icon .time-up-banner__label { display: none; }
  .time-up-banner__btn--stop { padding: 0 var(--space-4); }
}

/* =====================================================================
   Persona "Do now" (UXR-01 / UXR-11)
   ===================================================================== */
/* UXR-01: time up and the buzzer is off - Next round is the natural next step (R2-15's
   promoted Next). The "every court done" halo, held on. No entry animation: the bar is rebuilt
   on every store change and it would replay on each score tap. */
.cmd-btn--next.is-promoted { animation: none; box-shadow: var(--accent-edge), 0 0 0 6px rgba(var(--breathe-rgb), 0.3), var(--shadow-accent); }
@media (max-width: 759px) {
  .top-bar__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* =====================================================================
   Phone timer placement (b): inline dock + top-bar round mini pill (<1024)
   ===================================================================== */
/* The mini exists on every live Round render but only shows below 1024 while the dock's digits
   are out of view (main.js toggles .is-dock-away on #top-bar). display:none keeps it out of the
   tab order and the accessibility tree while hidden. Always 48px tall (the .timer-pill base). */
.timer-pill--round-mini { display: none; }
@media (max-width: 1023px) {
  .top-bar.is-dock-away .timer-pill--round-mini { display: inline-flex; }
}
/* No fade-in: the top bar is rebuilt on every store change (each score tap), so an entry
   animation would replay and flicker the pill while the organiser scores. */
/* Time up while the buzzer sounds: "0:00 Stop"; its first tap silences (owner decision). */
.timer-pill--stop { background: var(--time-up); border-color: transparent; color: #fff; }
.timer-pill__stop { margin-left: var(--space-2); font-weight: 800; font-size: var(--t-body); letter-spacing: 0; }
/* UXR-01 on the mini: time up with the buzzer off - the dock's calm red outline, no pulse. */
.timer-pill--round-mini.timer-pill--silenced[data-status="expired"] {
  background: var(--surface); border: 2px solid var(--danger); color: var(--danger); animation: none;
}
.timer-pill--round-mini.timer-pill--silenced[data-status="expired"] .timer-pill__icon { color: var(--danger); }
@media (max-width: 759px) {
  /* UXR-11a treatment: digits only on phones. */
  .timer-pill--round-mini { gap: 0; padding: 0 var(--space-3); }
  .timer-pill--round-mini .timer-pill__icon { display: none; }
  /* "0:00 Stop" stays within ~100px so "Round 1" keeps its line down to 360px. */
  .timer-pill--round-mini.timer-pill--stop { padding: 0 10px; }
  .timer-pill--stop .timer-pill__digits { font-size: var(--t-btn-lg); min-width: 0; }
  .timer-pill--stop .timer-pill__stop { margin-left: var(--space-1); font-size: var(--t-btn-sm); }
  /* Short Round title while the mini shows: "Round 1" / "3 courts" (" of 5" is in the command bar). */
  .top-bar.is-dock-away .top-bar__title-tail,
  .top-bar.is-dock-away .top-bar__context-head { display: none; }
}
/* Below 375px "Doubles · 2 courts" wraps to two lines beside the Players button, and
   the bar would shrink 10px when the mini appears (courts jumping under the thumb): keep the
   short context there at all times so the top bar's height never changes on scroll. */
@media (max-width: 374px) { .top-bar__context-head { display: none; } }
/* Reduced motion: the critical / time-up pulse holds as a static ring. */
@media (prefers-reduced-motion: reduce) {
  .timer-pill[data-critical="true"], .timer-pill[data-status="expired"]:not(.timer-pill--silenced) { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical-ring) 55%, transparent); }
}

/* R4-06: the page title uses the title token from Medium up (24px on Compact). */
@media (min-width: 760px) { .top-bar__title { font-size: var(--t-title); } }