/* screens/player.css — le lecteur de drill.  Split out of app.css by S0. TOKENS ONLY.
   Owners after Wave 0: S5 (mode table) · S8 (la sparkline de scoreCard, .prog).
   NOTE: .chrono is also worn by the invite code in modals.js (openInvite) — it was already so
   before the split; changing it changes that sheet too. */

/* ── drill player ──────────────────────────────────────────────────────── */
.pl-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px 0; }
.pl-top .back { font-size: 22px; line-height: 1; color: var(--ink-muted); padding: 4px 8px; }
.pl-top h1 { font: 300 22px/1.2 var(--font); }
.pl-top h1 b { font-weight: 600; }
.pl-meta { font-size: 12px; color: var(--ink-muted); padding: 2px 20px 0 60px; }
.stage { margin: 14px 20px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.court svg { display: block; width: 100%; height: auto; }
.cap { padding: 12px 16px 4px; min-height: 58px; }
.cap .n { font: 600 10px/1 var(--mono); letter-spacing: .12em; color: var(--ink-muted); }
.cap .t { font: italic 400 15px/1.45 var(--serif); margin-top: 4px; }
.ctrl { display: flex; align-items: center; gap: 6px; padding: 10px 14px 14px; }
.ctrl .btn { padding: 9px 13px; }
.dots { flex: 1; display: flex; gap: 6px; justify-content: center; }
/* 10px visual dot inside a 30×44 touch box (S1 bonus, applied at merge — full 44px width
   would overflow 375px next to play/speed/Mode table). border-box: width includes padding. */
.dots button { width: 30px; height: 44px; border-radius: 50%; background: var(--surface-3); padding: 17px 10px; background-clip: content-box; }
.dots button.on { background: var(--sport); background-clip: content-box; }
.spd { font: 600 11px/1 var(--font); color: var(--ink-muted); padding: 8px 10px; }
.pl-cards { padding: 14px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.pl-cards ol { margin: 8px 0 0 18px; font-size: 13.5px; color: var(--ink-muted); }
.pl-cards ol li { margin-bottom: 5px; }
details.more { margin-top: 10px; }
details.more summary { font: 600 12px/1 var(--font); color: var(--ink-muted); cursor: pointer; list-style: none; }
details.more summary::before { content: "+ "; }
details.more[open] summary::before { content: "− "; }
details.more div { font-size: 13px; color: var(--ink-muted); margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
details.more b { color: var(--ink); font-weight: 600; }

/* ── le score : le chrono, l'entrée, l'historique ──────────────────────── */
/* .scoreRow and .rec were dead (rendered by nothing) since the S0 split — dropped by S8: the
   sparkline replaced the only thing they could have dressed (history.join(' → ')). */
.prog { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-top: 6px; }
.prog svg.spark { display: block; width: 100%; height: 32px; }
.chrono { font: 300 44px/1 var(--font); font-variant-numeric: tabular-nums; text-align: center; padding: 6px 0 2px; }
.chrono.hot { color: var(--sport-ink); }
.score-in { display: flex; gap: 9px; margin-top: 10px; }
.score-in input {
  width: 90px; font: 600 22px/1 var(--font); text-align: center; background: var(--field-bg);
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); padding: 10px;
}
.beat { font: italic 400 13.5px/1.4 var(--serif); color: var(--sport-ink); margin-top: 8px; }

/* ── mode table (S5) — le terrain plein écran, posé sur la table, à deux ─────────────────────
   .table-mode reuses .court / .cap by class — those nodes are MOVED here at runtime (see
   screens/player.js openTableMode), never rebuilt, so this file only needs to restyle them
   bigger inside the overlay. */
.table-mode {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 46%, var(--sky-2) 78%, var(--sky-3) 100%);
  animation: tm-in .3s ease both;
}
@keyframes tm-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .table-mode { animation: none; } }
:root[data-calme="1"] .table-mode { animation: none; } /* U2 — data-calme redit la règle */

.tm-exit {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; z-index: 3;
  font-size: 30px; line-height: 1; color: var(--ink-muted); padding: 12px 16px;
}

.tm-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: calc(56px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
}
.tm-body .court { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.tm-body .court svg { display: block; width: 100%; height: 100%; }
.tm-body .cap { flex: none; min-height: 0; text-align: center; padding: 18px 20px 4px; }
.tm-body .cap .n { font-size: 13px; letter-spacing: .16em; }
.tm-body .cap .t { font: italic 400 40px/1.3 var(--serif); margin-top: 12px; }

/* le rôle du parent obtient son propre temps avant le départ, plein écran, avant le terrain */
.tm-role {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px; padding: 40px 32px;
  background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 46%, var(--sky-2) 78%, var(--sky-3) 100%);
  opacity: 1; transition: opacity .25s ease;
}
.tm-role.out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .tm-role { transition: none; } }
:root[data-calme="1"] .tm-role { transition: none; } /* U2 — data-calme redit la règle */
.tm-role-lbl { font: 600 13px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--sport); }
.tm-role-txt { font: italic 400 34px/1.35 var(--serif); color: var(--ink); max-width: 32em; }
.tm-role-tap { font: 600 12px/1 var(--font); color: var(--ink-muted); margin-top: 6px; }