/* styles/speed.css -- SPEED (2026-10-14, SPEC_speed_v1): its own screens
   in the repeat sprints' design (the owner: "Same design as the
   repeatability") -- sprint.css's parts reused as they are, the 3-2-1, the
   rest ring, the head, the summary; here only what Speed adds: the run
   along the baseline and the athlete's start position on the court, the
   reps list, GO, the count at the end, and its prompt over the screen.
   Served at `/styles/speed.css`.

   NO NEW TOKEN: the surface's own (`--focal` -- the session's colour through
   `.rv` --, `--card-fill`, `--line`, `--dim`). Every class here is `spd-`:
   one stylesheet is one namespace. */

/* ---- the court: the run and the start position --------------------------- */
svg.spd-court { max-height: 40vh; }
.spd-run { stroke: var(--focal); stroke-width: 0.22; stroke-linecap: round; }
.spd-runhead { fill: var(--focal); }
.spd-fin { stroke: #e6edf6; stroke-width: 0.14; stroke-linecap: round; }
.spd-short { stroke: #e6edf6; stroke-width: 0.1; stroke-dasharray: 0.16 0.16;
             stroke-linecap: round; opacity: .75; }
.spd-me { fill: var(--focal); stroke: #fff; stroke-width: 0.08; }
.spd-nose { fill: #fff; }
.spd-turn { fill: none; stroke: #fff; stroke-width: 0.1;
            stroke-dasharray: 0.18 0.12; stroke-linecap: round; }
.spd-turnhead { fill: #fff; }
svg.spd-glyph { flex: none; width: 46px; height: 40px; }
.spd-glyphline { stroke: #4a6688; stroke-width: 0.1; }
svg.spd-glyph .spd-me { stroke-width: 0.07; }
svg.spd-glyph .spd-turn { stroke-width: 0.08; }

/* ---- the overview: today's reps -------------------------------------------- */
.spd-list { padding: 4px 14px; }
.spd-row { display: flex; align-items: center; gap: 12px; padding: 10px 0;
           border-bottom: 1px solid var(--line); }
.spd-row:last-child { border-bottom: 0; }
.spd-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column;
              gap: 2px; }
.spd-row .t b { font-size: 16px; }
.spd-row .t span { font-size: 13.5px; color: var(--dim); line-height: 1.35; }
/* A rep not completed, in a workout's record. */
.spd-row.off { opacity: .45; }
.spd-dim { color: var(--dim); }

/* ---- a rep: its type and its start position ------------------------------- */
.spd-type { margin: 0; }
.spd-startw { margin: -4px 0 0; font-size: 16px; line-height: 1.4;
              color: var(--dim); }
.spr-cd .spd-startw { margin: 0 16px; max-width: 30rem; }
.spd-go b { color: var(--accent-bright, #2196f3); }
.spd-next { display: flex; flex-direction: column; gap: 10px; }
.spd-next h2.spd-type { font-size: 24px; }
.spd-auto { padding: 0; }

/* ---- the summary: how many reps ------------------------------------------ */
.spd-count { text-align: center; }
.spd-count h3 { margin: 0 0 14px; font-size: 18px; }
.spd-step { display: flex; align-items: center; justify-content: center;
            gap: 22px; }
button.spd-stepb { display: flex; align-items: center;
                   justify-content: center; width: 56px; height: 56px;
                   min-height: 0; margin: 0; padding: 0; border-radius: 50%;
                   background: var(--panel); border: 1px solid var(--line);
                   color: var(--ink);
                   font-size: 28px; font-weight: 800; line-height: 1; }
button.spd-stepb:disabled { opacity: .35; }
.spd-n { min-width: 2ch; font-size: 64px; font-weight: 900; line-height: 1;
         font-variant-numeric: tabular-nums; }
.spd-of { margin: 8px 0 0; color: var(--dim); }

/* ---- the prompt over the screen (the aerobic one's look, today.css) ------ */
.c-svpop.spd-pop { transition: transform .38s cubic-bezier(.2, .9, .25, 1.12),
                               opacity .2s ease; }
.c-svpop.spd-pop.in { opacity: 1; transform: translateY(calc(-100% - 40px)); }
.c-svpop.spd-pop.out { opacity: 1; transform: translateY(calc(-100% - 40px));
  transition: transform .3s cubic-bezier(.5, 0, .75, 0); }
button.spd-popmore { width: auto; min-height: 0; margin: 0; padding: 0;
  border: 0; background: none; color: var(--ink); text-align: left; }
.spd-pop .c-svbtns button { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .c-svpop.spd-pop.in, .c-svpop.spd-pop.out { opacity: 0; transform: none; }
}