/* styles/sprint.css -- REPEAT SPRINTS (2026-10-13, the owner's reference
   screens RS1-RS9, `docs design/repeatability/`): the overview, a new
   course, the 3-2-1, the stop screen, the rests, paused, the summary.
   Served at `/styles/sprint.css`.

   NO NEW TOKEN: the surface's own (`--card-fill`, `--raised-fill`,
   `--focal` -- the session's colour through `.rv`), the workout's `rv-`
   parts for the header, progress, pills and bar. Every class here is
   `spr-`: one stylesheet is one namespace. */

/* ---- the court ---------------------------------------------------------- */
svg.spr-court { display: block; width: 100%; height: auto; max-height: 46vh; }
svg.spr-court.sm { width: 54px; height: 64px; flex: none; border-radius: 8px;
                   background: #0b1320; border: 1px solid var(--line); }
/* Court lines a pixel or so whatever the drawing's size (a thumbnail is
   54 px across 13 m: a scaled line vanished, MEASURED). */
.spr-c-out { fill: #0b1320; stroke: #4a6688; stroke-width: 1.5px;
             vector-effect: non-scaling-stroke; }
.spr-c-ln { stroke: #4a6688; stroke-width: 1.5px;
            vector-effect: non-scaling-stroke; }
svg.spr-court.sm .spr-c-out, svg.spr-court.sm .spr-c-ln { stroke-width: 1px; }
.spr-c-net { stroke: #c9d6e6; stroke-width: 0.1; stroke-dasharray: 0.12 0.18;
             stroke-linecap: round; }
.spr-c-tx { fill: #6f86a3; font-size: 0.42px; font-weight: 700;
            letter-spacing: 0.06px; }
.spr-c-tx.b { fill: #e6edf6; font-size: 0.48px; }
.spr-c-disc { fill: #0b1320; stroke-width: 0.09; }
.spr-c-n { fill: #fff; font-size: 0.5px; font-weight: 800; }
.spr-c-x { fill: var(--focal); font-size: 1.5px; font-weight: 900; }
.spr-c-phone { fill: var(--accent-bright, #2196f3); stroke: #fff;
               stroke-width: 0.06; }
.spr-courtcard { border-radius: 22px; padding: 14px 12px 12px;
                 background: var(--card-fill); box-shadow: var(--card-lift); }
.spr-legend { display: flex; justify-content: center; gap: 16px;
              flex-wrap: wrap; margin-top: 8px; font-size: 13px;
              color: var(--dim); }
.spr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.spr-legend svg { width: 26px; height: 6px; }

/* ---- the overview (RS1) ------------------------------------------------- */
.spr-need { margin-top: 14px; padding-top: 12px; border-top: 1px solid
              var(--line); font-size: 15px; }
.spr-need span { display: block; font-size: 11px; font-weight: 800;
                 letter-spacing: .12em; text-transform: uppercase;
                 color: var(--quiet); margin-bottom: 4px; }
.spr-callout { display: flex; gap: 12px; align-items: flex-start;
               padding: 14px 16px; border-radius: 16px;
               border: 1px solid color-mix(in srgb, var(--accent) 45%,
                                            transparent);
               background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.spr-callout svg { flex: none; width: 20px; height: 20px; margin-top: 2px;
                   stroke: var(--accent-soft); fill: none; stroke-width: 2; }
.spr-callout p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.spr-how h3 { margin: 0 0 10px; font-size: 18px; }
.spr-how ol { margin: 0; padding: 0; list-style: none; counter-reset: spr; }
.spr-how li { counter-increment: spr; position: relative; padding-left: 36px;
              margin: 10px 0; line-height: 1.4; }
.spr-how li::before { content: counter(spr); position: absolute; left: 0;
                      top: 0; width: 24px; height: 24px; border-radius: 50%;
                      background: var(--focal); color: #fff; font-size: 13px;
                      font-weight: 800; display: flex; align-items: center;
                      justify-content: center; }
.spr-todayhead { display: flex; justify-content: space-between;
                 align-items: baseline; margin-top: 6px; }
.spr-todayhead h3 { margin: 0; font-size: 21px; }
.spr-todayhead span { font-size: 13px; color: var(--dim); }
.spr-cat { padding: 6px 14px 4px; }
.spr-cat.off { opacity: .55; }
.spr-cathead { display: flex; align-items: baseline; gap: 10px;
               padding: 10px 2px 8px; border-bottom: 1px solid var(--line); }
.spr-cathead b { font-size: 17px; }
.spr-cathead span { flex: 1; font-size: 13px; color: var(--dim); }
.spr-cathead em { font-style: normal; font-weight: 700; font-size: 14px; }
button.spr-row { display: flex; align-items: center; gap: 14px; width: 100%;
                 min-height: 0; margin: 0; padding: 12px 2px; background: none;
                 border: 0; border-bottom: 1px solid var(--line);
                 color: var(--ink); text-align: left; }
button.spr-row:last-child { border-bottom: 0; }
.spr-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column;
              gap: 2px; }
.spr-row .t b { font-size: 16px; }
.spr-row .t span { font-size: 13.5px; color: var(--dim); }
.spr-row .t span.d { color: var(--accent-soft); }
.spr-row .chev { color: var(--dim); font-size: 22px; }
.spr-gap { display: flex; justify-content: center; align-items: center;
           gap: 6px; font-size: 13.5px; color: var(--dim); }
.spr-gap svg { width: 16px; height: 16px; stroke: currentColor; fill: none;
               stroke-width: 2; }
.spr-sheet { height: auto; max-height: 92vh; padding: 18px 16px 22px;
             overflow-y: auto; gap: 12px; display: flex;
             flex-direction: column; }
.spr-sheet > .rv-x { align-self: flex-end; }

/* ---- a course: its words (RS2, RS7) -------------------------------------- */
.spr-cbody { display: flex; flex-direction: column; gap: 12px; }
.spr-each { margin: -4px 0 0; font-size: 16px; color: var(--dim); }
.spr-lines p { display: flex; gap: 12px; align-items: flex-start; margin: 0;
               padding: 12px 0; border-bottom: 1px solid var(--line);
               font-size: 16px; line-height: 1.4; }
.spr-lines p:last-child { border-bottom: 0; }
.spr-lines svg { flex: none; width: 22px; height: 22px; margin-top: 1px;
                 stroke: var(--accent-soft); fill: none; stroke-width: 2;
                 stroke-linecap: round; }

/* ---- the 3-2-1 (RS3), the stop screen (RS4) ------------------------------ */
.spr-cd { min-height: 86vh; display: flex; flex-direction: column;
          align-items: center; justify-content: center; text-align: center;
          gap: 8px; }
.spr-cd h2 { margin: 0; font-size: 22px; }
.spr-cd b { font-size: min(46vw, 260px); line-height: 1;
            font-weight: 900; color: var(--focal);
            font-variant-numeric: tabular-nums; }
button.spr-run { position: fixed; inset: 0; z-index: 60; width: 100%;
                 height: 100%; min-height: 0; margin: 0; border: 0;
                 border-radius: 0; padding: calc(28px
                   + env(safe-area-inset-top)) 20px calc(30px
                   + env(safe-area-inset-bottom));
                 background: radial-gradient(circle at 50% 42%, #2a8ce6,
                   #136bc0 75%); color: #fff; display: flex;
                 flex-direction: column; align-items: center; gap: 6px;
                 touch-action: manipulation; user-select: none;
                 -webkit-user-select: none; }
.spr-run .rv-eye { color: rgba(255, 255, 255, .78); }
.spr-run .nm { font-size: 21px; font-weight: 800; }
.spr-run .spr-runt { margin-top: auto; font-size: 30vw; font-weight: 900;
                     line-height: 1; letter-spacing: -.02em;
                     font-variant-numeric: tabular-nums; }
.spr-run .u { font-size: 17px; font-weight: 700; opacity: .8; }
.spr-run .stop { margin-top: auto; width: 116px; height: 116px;
                 border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9);
                 box-shadow: 0 0 0 14px rgba(255, 255, 255, .1);
                 display: flex; align-items: center; justify-content: center; }
.spr-run .stop i { width: 20px; height: 20px; border-radius: 4px;
                   background: #fff; }
.spr-run .tap { margin-top: 18px; font-size: 26px; font-weight: 900;
                letter-spacing: .04em; text-align: center; }
.spr-run .sm { font-size: 15px; opacity: .8; }

/* ---- the rest (RS5) ------------------------------------------------------ */
.spr-yt { text-align: center; }
.spr-yt b { display: block; font-size: 56px; font-weight: 900; line-height: 1.05;
            font-variant-numeric: tabular-nums; }
.spr-yt small { font-size: 22px; color: var(--dim); margin-left: 4px; }
.spr-ringwrap { position: relative; width: 210px; height: 210px;
                margin: 0 auto; }
.spr-ringwrap.sm { width: 112px; height: 112px; margin: 0; flex: none; }
svg.spr-ring { width: 100%; height: 100%; }
.spr-ringbg { fill: none; stroke: var(--grid, #1c2633); stroke-width: 6; }
.spr-ringfg { fill: none; stroke: var(--accent-bright, #2196f3);
              stroke-width: 6; stroke-linecap: round; }
.spr-ringwrap .in { position: absolute; inset: 0; display: flex;
                    flex-direction: column; align-items: center;
                    justify-content: center; text-align: center; }
.spr-ringwrap .in b { font-size: 50px; font-weight: 900; line-height: 1.05;
                      font-variant-numeric: tabular-nums; }
.spr-ringwrap.sm .in b { font-size: 26px; }
.spr-ringwrap .in span { font-size: 13px; color: var(--dim); }
.spr-tiles { display: grid; grid-template-columns: repeat(auto-fit,
               minmax(64px, 1fr)); gap: 8px; }
.spr-tile { border-radius: 14px; padding: 8px 4px; text-align: center;
            background: var(--card-fill); border: 1px solid var(--line); }
.spr-tile span { display: block; font-size: 12.5px; color: var(--dim); }
.spr-tile b { font-size: 18px; font-variant-numeric: tabular-nums; }
.spr-tile.cur { border-color: var(--accent); }
.spr-tile.todo { background: transparent; border-style: dashed; }
.spr-tile.nx span { color: var(--focal); font-weight: 700; }
.spr-up h3 { margin: 4px 0; font-size: 21px; }
.spr-up p { margin: 0; color: var(--dim); }
.spr-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.spr-bar button.rv-pill { flex: 1; justify-content: center; height: 52px;
                          border-radius: 16px; }
.spr-bar svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
               stroke-width: 2.4; stroke-linecap: round; }
.rv-seg.spr-faded { opacity: .35; }

/* ---- REDO, AND SAYING IT IS UNDER WAY (2026-10-22) ------------------------
   The small Redo, bottom left on a row of its own over a rest's bar; once
   tapped it stays pressed, in the session's colour, until that rep is
   saved -- and every screen the redo runs through carries the badge
   (power endurance's and Speed's too). */
.spr-redorow { flex: 0 0 100%; display: flex; }
/* the bar a row taller than the room `body.runmode` keeps under the page:
   the rest's last card ended 9 px under it (MEASURED, 375 x 812) */
.spr-restpage { padding-bottom: 48px; }
.spr-bar .spr-redorow button.rv-pill.spr-redo { flex: none; height: 38px;
  padding: 0 14px; border-radius: 19px; font-size: 14px; gap: 6px; }
.spr-bar .spr-redorow .spr-redo svg { width: 16px; height: 16px; }
button.rv-pill.spr-redo.on, button.rv-pill.spr-redo.on:disabled {
  opacity: 1; background: var(--focal, var(--accent));
  border-color: var(--focal, var(--accent)); color: #fff; }
.spr-redoing { display: inline-flex; align-items: center; gap: 10px;
  align-self: center; margin: 2px auto; padding: 8px 16px 8px 12px;
  border-radius: 999px; text-align: left;
  border: 1.5px solid var(--focal, var(--accent));
  background: color-mix(in srgb, var(--focal, var(--accent)) 18%,
                        transparent);
  color: var(--ink); }
.spr-redoing svg { flex: none; width: 20px; height: 20px; fill: none;
  stroke: var(--focal, var(--accent)); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.spr-redoing .t { display: flex; flex-direction: column; gap: 1px; }
.spr-redoing strong { font-size: 16px; font-weight: 800; line-height: 1.2; }
.spr-redoing small { font-size: 13px; color: var(--dim); }
.spr-redohead { display: flex; justify-content: center; }
/* on the run's blue, in white */
.spr-run .spr-redoing { border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .16); color: #fff; }
.spr-run .spr-redoing svg { stroke: #fff; }
.spr-tile.redo { border-color: var(--focal, var(--accent));
  border-style: solid; }
.spr-tile.redo span { color: var(--focal, var(--accent)); font-weight: 700; }

/* ---- THE OVERVIEW OVER A TIMED RUN (2026-10-22) ---------------------------
   The gym's pill and sheet (run.css's `rv-ovpill`, index.html's `run*`
   parts) over Speed and power endurance; here only the pill's place on a
   screen with no header (the 3-2-1, GO, the effort) -- the column's top
   right, taking no room from the screen's centre -- and a row stopped or
   out today. */
.spr-ovcorner { position: relative; z-index: 6; height: 0;
  display: flex; justify-content: flex-end; }
.runrow.spr-ovoff { opacity: .5; }
/* in a header, the list icon alone, in the gym pill's blue */
button.rv-x.spr-ovpill svg { color: var(--accent-soft); }

/* ---- the next course, the part rest (RS7, RS8) ---------------------------- */
.spr-next { position: relative; border-radius: 22px; overflow: hidden;
            background: var(--raised-fill); padding: 46px 12px 0; }
.spr-tag { position: absolute; top: 12px; left: 12px; z-index: 2;
           padding: 4px 10px; border-radius: 10px; font-size: 12px;
           font-weight: 900; letter-spacing: .08em; color: #1b0d05;
           background: var(--focal); }
.spr-nextb { margin: 0 -12px; padding: 14px 18px 16px;
             border-top: 1px solid var(--line); }
.spr-nextb h3 { margin: 4px 0 6px; font-size: 26px; }
.spr-next > button.c-btn { margin: 0 6px 14px; width: calc(100% - 12px); }
.spr-auto { margin: 0; padding: 0 18px 16px; color: var(--dim); }
svg.spr-i { width: 20px; height: 20px; flex: none; fill: none;
            stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
            stroke-linejoin: round; vertical-align: -4px; margin-right: 8px; }
/* The sheet's blue button lies outside the page's bar: sized here. */
.spr-sheet button.c-btn { display: flex; align-items: center;
                          justify-content: center; gap: 10px; margin-top: 10px; }
.spr-sheet .c-btn svg { width: 16px; height: 16px; flex: none; }
.spr-readyline { display: flex; align-items: center; gap: 8px;
                 padding: 0 8px 14px; color: var(--ok, #63d29a);
                 font-size: 14px; font-weight: 700; }
.spr-readyline svg { width: 18px; height: 18px; stroke: currentColor;
                     fill: none; stroke-width: 2.4; }
.spr-prtop { display: flex; gap: 16px; align-items: center; }
.spr-prtop h3 { margin: 4px 0; font-size: 21px; display: flex; gap: 8px;
                align-items: center; }
.spr-prtop h3 svg { width: 22px; height: 22px; stroke: #10251a;
                    background: var(--ok, #63d29a); border-radius: 50%;
                    padding: 3px; fill: none; stroke-width: 3; }
.spr-prtop p { margin: 0; color: var(--dim); }

/* ---- paused (RS6) -------------------------------------------------------- */
.spr-paused h2 { margin: 0; font-size: 32px; }
.spr-pl { margin: -6px 0 6px; color: var(--dim); }
button.spr-prow { display: flex; align-items: center; gap: 14px;
                  width: 100%; min-height: 0; margin: 0; padding: 14px 2px;
                  background: none; border: 0; border-top: 1px solid
                    var(--line); color: var(--ink); text-align: left; }
.spr-prow .ic { flex: none; width: 40px; height: 40px; border-radius: 12px;
                background: var(--panel); display: flex; align-items: center;
                justify-content: center; }
.spr-prow .ic svg { width: 20px; height: 20px; stroke: var(--accent-soft);
                    fill: none; stroke-width: 2.2; }
.spr-prow .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.spr-prow .t b { font-size: 17px; }
.spr-prow .t span { font-size: 14px; color: var(--dim); }
.spr-prow.end .t b { color: #f2938c; }
.spr-prow.end .ic { background: #3a1c1c; }
.spr-prow .sq { width: 12px; height: 12px; border-radius: 3px;
                background: #f2938c; }
.spr-prow .chev { color: var(--dim); font-size: 22px; }

/* ---- the summary (RS9) --------------------------------------------------- */
.spr-sumhead { display: flex; gap: 14px; align-items: center; }
.spr-sumhead > svg { flex: none; width: 52px; height: 52px; padding: 12px;
                     border-radius: 50%; border: 2px solid var(--ok, #63d29a);
                     stroke: var(--ok, #63d29a); fill: none;
                     stroke-width: 2.4; }
.spr-sumhead h2 { margin: 0; font-size: 28px; }
.spr-sumhead p { margin: 2px 0 0; color: var(--dim); }
.spr-sumr { display: flex; align-items: center; gap: 12px; padding: 12px 0;
            border-bottom: 1px solid var(--line); }
.spr-sumr:last-child { border-bottom: 0; }
.spr-sumr .c { width: 64px; flex: none; font-size: 12px; font-weight: 800;
               letter-spacing: .1em; color: var(--quiet); }
.spr-sumr .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spr-sumr .t b { font-size: 16px; }
.spr-sumr .t span { font-size: 13.5px; color: var(--dim); }
.spr-sumr .v { text-align: right; white-space: nowrap; }
.spr-sumr .v b { font-size: 18px; font-variant-numeric: tabular-nums; }
.spr-sumr .v small { margin-left: 4px; color: var(--dim); }
.spr-setnext { margin: -4px 0 0; text-align: center; color: var(--dim);
               font-size: 14px; }

/* R1 / R1b -- the run-throughs (2026-10-13, SPEC_warmup_v1): the first
   course, no clock; a banner when there was no warm-up. */
.spr-tbanner { margin: 0 0 12px; padding: 14px 16px; border-radius: 18px;
  border: 1px solid var(--accent-fill); background: var(--panel);
  font-size: 16px; line-height: 1.45; }
.spr-tbanner b { color: var(--ink); }
.spr .spr-teye { color: #ff9a62; }
.spr-trow { display: flex; align-items: center; gap: 10px; }
.spr-trow .rv-name { flex: 1; min-width: 0; }
.spr-tdots { display: flex; gap: 6px; }
.spr-tdots i { width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); }
.spr-tdots i.cur { border-color: #ff9a62;
  box-shadow: 0 0 0 3px rgba(255, 154, 98, .25); }
.spr-tdots i.done { background: var(--ok); border-color: var(--ok); }
.spr-thint { margin: 0; text-align: center; color: var(--quiet);
  font-size: 14px; }