/* Versioned public styling for the signed-in Ref/Watch surface. No private state is encoded here. */
body.official-live-mode .page { width: min(100%, 48rem); min-height: 100dvh; }
.official-live-shell { display: grid; gap: .9rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.official-live-heading { align-items: center; }
.official-live-heading h1 { max-width: none; margin: .15rem 0; }
.official-live-ref-chrome { display: grid; gap: .45rem; }
.official-live-top-actions {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem;
}
.official-live-top-action {
  min-width: 0; min-height: 44px; padding: .48rem .22rem;
  font-size: clamp(.68rem, 2.8vw, .82rem); line-height: 1; white-space: nowrap;
}
.official-live-ref-heading {
  display: grid; grid-template-columns: minmax(2.5rem, 1fr) auto minmax(5.5rem, 1fr);
  gap: .45rem; min-height: 2.5rem; align-items: center;
}
.official-live-ref-slot { color: var(--muted); font-size: .7rem; font-weight: 800; }
.official-live-ref-title {
  display: inline-flex; gap: .32rem; align-items: center; justify-content: center;
  margin: 0; color: var(--green); font-size: clamp(1.05rem, 4vw, 1.35rem);
  text-align: center; letter-spacing: -.012em;
}
.official-live-sync {
  display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem;
  min-height: 2rem; padding: .35rem .7rem; border: 1px solid currentColor;
  border-radius: 999px; font-size: .72rem; font-weight: 850; letter-spacing: .06em;
}
.official-live-ref-heading .official-live-sync {
  justify-self: end; min-width: 0; max-width: 100%; padding: .32rem .55rem;
  font-size: clamp(.62rem, 2.2vw, .72rem); letter-spacing: 0; line-height: 1.1;
  text-align: center;
}
.official-live-sync.sync { color: #075f39; background: #e8f8ef; }
.official-live-sync.saved { color: #285443; background: #edf3ef; }
.official-live-sync.local { color: #9a4d00; background: #fff2df; }
.official-live-sync.attention { color: var(--danger); background: #fff0f0; }
.official-live-board { padding: clamp(.9rem, 3vw, 1.35rem); }
.official-live-scoreboard {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, .72fr) minmax(0, 1fr);
  gap: .7rem; align-items: center;
}
.official-live-team { display: grid; justify-items: center; gap: .25rem; min-width: 0; }
.official-live-team-name { max-width: 100%; color: var(--muted); font-size: .82rem; font-weight: 800; overflow-wrap: anywhere; }
.official-live-score { font-size: clamp(3rem, 16vw, 5.8rem); line-height: .92; font-variant-numeric: tabular-nums; }
.official-live-clock { display: grid; justify-items: center; gap: .3rem; }
.official-live-clock strong { font-size: clamp(2rem, 9vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.official-live-clock span { color: var(--muted); font-size: .76rem; font-weight: 750; text-align: center; }
.official-live-facts {
  display: flex; justify-content: center; gap: .45rem; flex-wrap: wrap; margin-top: 1rem;
}
.official-live-fact { padding: .35rem .65rem; border-radius: 999px; background: var(--wash); font-size: .78rem; font-weight: 750; }
.official-live-controls { display: grid; gap: .8rem; }
.official-live-control-card { margin: 0; padding: .9rem; }
.official-live-control-card h2 { margin: 0 0 .7rem; }
.official-live-score-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.official-live-side-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.official-live-side-controls strong { grid-column: 1 / -1; text-align: center; }
.official-live-controls button { min-height: 52px; }
.official-live-controls button.primary-action { min-height: 62px; font-size: 1.05rem; }
.official-live-stepper { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.official-live-stepper output { min-width: 4rem; text-align: center; font-weight: 850; }
.official-live-bottom-controls {
  position: sticky; bottom: 0; z-index: 2; padding: .75rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--line); border-radius: 1rem; backdrop-filter: blur(10px);
  box-shadow: 0 -.3rem 1.2rem rgba(8, 36, 24, .08);
}
.official-live-bottom-controls .actions { margin: 0; }
.official-live-coin-result {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  margin: 0; padding: .5rem .7rem; text-align: center;
}
.official-live-coin-result .eyebrow { margin: 0; }
.official-live-coin-result output { color: var(--green); font-size: 1.2rem; font-weight: 900; }
.official-live-reference-panel { margin: 0; padding: .8rem; }
.official-live-panel-heading {
  display: flex; align-items: center; justify-content: space-between; gap: .65rem;
}
.official-live-panel-heading h2 { margin: 0; }
.official-live-game-log-list {
  display: grid; gap: .4rem; margin: .7rem 0 0; padding: 0; list-style: none;
}
.official-live-game-log-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem;
  align-items: baseline; padding: .48rem .55rem; border-radius: .7rem; background: var(--wash);
}
.official-live-log-status { font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.official-live-log-status.sync { color: #075f39; }
.official-live-log-status.local { color: #9a4d00; }
.official-live-empty { text-align: center; }
.official-live-empty .field { max-width: 16rem; margin: .8rem auto; text-align: left; }
.official-live-footnote { margin: .15rem 0; text-align: center; }
.official-live-assignment { display: grid; gap: .45rem; margin: 0; }
.official-live-assignment h2, .official-live-assignment p { margin: 0; }
.official-live-watch-code { display: grid; gap: .7rem; margin: 0; }
.official-live-watch-code h2 { margin: 0; }

@media (max-width: 32rem) {
  .official-live-scoreboard { grid-template-columns: minmax(0, 1fr) 5.8rem minmax(0, 1fr); gap: .35rem; }
  .official-live-score { font-size: clamp(2.65rem, 18vw, 4.4rem); }
  .official-live-clock strong { font-size: clamp(1.65rem, 9vw, 2.6rem); }
  .official-live-score-controls { gap: .5rem; }
  .official-live-ref-heading {
    grid-template-columns: minmax(2.2rem, .7fr) auto minmax(5rem, 1.3fr);
  }
  .official-live-team-name { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .official-live-shell * { scroll-behavior: auto !important; transition: none !important; }
}