/* styles/run.css -- the workout, v2 (2026-10-10, the owner's in-session v2
   handoff, `docs design/in-session-v2/`): the overview before Start (O1)
   with its preview and swap sheets (O2, O3); the exercise screen (X1 set
   by set, X2 a round); the log page with the rest already running (L1);
   the four rest screens (R1-R4). Served at `/styles/run.css`.

   CHANGE 2's surface tokens, unchanged -- NO NEW TOKEN. The session's
   colour is `--sc` (today.css's `tp-c-*` class on the page root), carried
   as `--focal` through `.rv` -- the token CHANGE 2 already names for it.
   Every class here is `rv-`: one stylesheet is one namespace (index.html
   keeps the older `run*` parts the summary, the sheet, the video and the
   timed step still use). */

.rv { --focal: var(--sc, var(--accent));
      --rv-eye: color-mix(in srgb, var(--focal) 45%, #fff); }
.rv .c-focal { --focal: var(--sc, var(--accent)); }
.rv, .rv button { font-variant-numeric: tabular-nums; }
.rv-col { display: flex; flex-direction: column; gap: 16px; }
/* X's bar (what comes next, over Complete set) and O1's (Start session,
   what it starts with) are taller than the room `body.runmode` keeps under
   the page: the last row would end under them, MEASURED 12 px at 375 x 667. */
.rv-xs, .rv-ov { padding-bottom: 28px; }

/* ---- eyebrows, names ----------------------------------------------------- */
.rv-eye { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em;
          text-transform: uppercase; color: var(--rv-eye); line-height: 1.3; }
.rv-eye.blue { color: var(--accent-soft); text-align: center; }
.rv-eye.ok { color: var(--ok); }
h2.rv-name { margin: 0; font-size: 31px; font-weight: 800; line-height: 1.1;
             letter-spacing: -.01em; overflow-wrap: anywhere; }
.rv-instead { margin: -8px 0 0; font-size: 13px; color: var(--quiet); }

/* ---- the header: the X, the session and its count, the Overview pill ---- */
.rv-head { position: sticky; top: 0; z-index: 5; background: var(--bg);
           margin: calc(-1rem - env(safe-area-inset-top)) -1rem 4px;
           padding: calc(.75rem + env(safe-area-inset-top)) 1rem .75rem; }
.rv-top { display: flex; align-items: center; gap: 10px; }
button.rv-x { width: 44px; height: 44px; min-height: 0; flex: none; margin: 0;
              padding: 0; border-radius: 14px; background: var(--panel);
              border: 1px solid var(--line); color: #c9ccd2; display: flex;
              align-items: center; justify-content: center; }
.rv-mid { flex: 1; min-width: 0; text-align: center; }
h2.rv-session { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-count { font-size: 12.5px; color: var(--dim); margin-top: 2px;
            white-space: nowrap; }
button.rv-ovpill { height: 44px; min-height: 0; width: auto; flex: none;
                   margin: 0; padding: 0 14px; border-radius: 14px;
                   background: var(--panel); border: 1px solid var(--line);
                   color: var(--ink); display: flex; align-items: center;
                   gap: 7px; font-size: 14px; font-weight: 700; }
.rv-ovpill svg, .rv-x svg, .rv-pill svg { width: 20px; height: 20px; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
.rv-ovpill svg { color: var(--accent-soft); }
/* The progress: a segment an exercise, 3 px apart in a part and 8 px
   between parts; done blue, the current one the session's colour with a
   still glow, the rest the grid. A round part's exercise fills as its sets
   are done (`--f`). */
.rv-segs { display: flex; gap: 8px; margin-top: 12px; }
.rv-grp { flex: var(--n, 1); display: flex; gap: 3px; min-width: 0; }
.rv-seg { flex: 1; height: 4px; border-radius: 2px; min-width: 0;
          background: linear-gradient(90deg, var(--accent-bright)
            calc(var(--f, 0) * 100%), var(--grid) 0); }
.rv-seg.cur { background: linear-gradient(90deg, var(--accent-bright)
                calc(var(--f, 0) * 100%), var(--focal) 0);
              box-shadow: 0 0 8px color-mix(in srgb, var(--focal) 70%,
                                            transparent); }

/* ---- pills, buttons ------------------------------------------------------ */
.rv-pills { display: flex; gap: 10px; flex-wrap: wrap; }
button.rv-pill { width: auto; height: 44px; min-height: 0; margin: 0;
                 padding: 0 18px; border-radius: 22px; background: transparent;
                 border: 1px solid var(--line); color: var(--ink);
                 display: inline-flex; align-items: center; gap: 8px;
                 font-size: 15px; font-weight: 700; }
.rv-pill .play { width: 14px; height: 14px; fill: var(--accent-soft);
                 stroke: none; }
.rv-pill .swap { color: var(--accent-soft); }
/* The bar's blue button keeps its LOOK while a sheet is up -- the sheet has
   the screen's one blue button then (today.css's `tp-btnlook`, here). */
button.rv-look { display: flex; align-items: center; justify-content: center;
                 gap: 10px; width: 100%; min-height: 58px; margin: 0;
                 padding: 0 18px; border: 0; border-radius: 18px;
                 background: var(--accent-fill); color: var(--accent-ink);
                 font-size: 18px; font-weight: 700; }
.rv-bar { display: flex; flex-direction: column; gap: 10px; }
.rv-bar button.c-btn, .rv-bar button.rv-look { min-height: 58px;
  border-radius: 18px; white-space: nowrap; overflow: hidden; }
.rv-bar button.c-btn span, .rv-bar button.rv-look span {
  overflow: hidden; text-overflow: ellipsis; }
.rv-bar button svg { width: 20px; height: 20px; flex: none; }
.rv-bar svg.ic { fill: none; stroke: currentColor; stroke-width: 2.5;
                 stroke-linecap: round; stroke-linejoin: round; }
.rv-bar svg.play { width: 16px; height: 16px; fill: currentColor;
                   stroke: none; }
.rv-row3 { display: flex; gap: 10px; align-items: stretch; }
.rv-row3 > button.c-btn, .rv-row3 > button.rv-look { flex: 1; min-width: 0;
                                                     width: auto; gap: 8px;
                                                     padding: 0 12px;
                                                     font-size: 17px; }
/* WAS -15s and +15s beside it (`button.rv-step`), REMOVED 2026-10-21:
   the blue button has the row. A 375-px phone: the label whole. */
@media (max-width: 380px) {
  .rv-row3 { gap: 8px; }
  .rv-row3 > button.c-btn, .rv-row3 > button.rv-look { font-size: 16px;
                                                       padding: 0 10px; }
}
/* What comes after this set, over the button. */
/* (in-session v1 §2: "a small line above the button", one plain line --
   WAS a clock icon and a bold half) */
.rv-then { margin: 0 0 -4px; font-size: 13.5px; color: var(--quiet);
           text-align: center; line-height: 1.35; }

/* ---- the set dots -------------------------------------------------------- */
.rv-dots { display: flex; align-items: center; gap: 8px; }
.rv-dot { width: 22px; height: 22px; border-radius: 50%; flex: none;
          border: 2px solid var(--grid); display: flex; align-items: center;
          justify-content: center; }
.rv-dot.done { background: var(--ok); border-color: var(--ok); }
.rv-dot.done svg { width: 13px; height: 13px; fill: none; stroke: #05130c;
                   stroke-width: 3; stroke-linecap: round;
                   stroke-linejoin: round; }
.rv-dot.now { background: var(--focal); border-color: var(--focal);
              box-shadow: 0 0 0 5px color-mix(in srgb, var(--focal) 25%,
                                               transparent); }
.rv-dot.next { border-color: var(--focal); }
/* 2026-10-19: a station out of this round (its own sets ended) */
.rv-dot.off { opacity: .35; border-style: dashed; }
.rv-dots.small .rv-dot { width: 16px; height: 16px; }

/* ---- X: the current set card --------------------------------------------- */
.rv-card { border-radius: 24px; padding: 20px; display: flex;
           flex-direction: column; gap: 14px; }
.rv-card.flat { background: var(--card-fill); box-shadow: var(--card-lift);
                border: 1px solid var(--line); }
.rv-sethead { display: flex; align-items: center; gap: 10px; }
.rv-sethead .t { flex: 1; font-size: 26px; font-weight: 800; line-height: 1.1;
                 white-space: nowrap; }
.rv-sethead .rv-inturn { flex: 0 1 auto; min-width: 0; text-align: right; }
.rv-sethead .t i { font-style: normal; color: var(--quiet); }
.rv-inturn { display: flex; align-items: center; gap: 6px; font-size: 14px;
             font-weight: 700; color: #c3c8d1; }
.rv-inturn svg { width: 18px; height: 18px; fill: none;
                 stroke: var(--accent-soft); stroke-width: 2;
                 stroke-linecap: round; stroke-linejoin: round; }
.rv-hair { height: 1px; background: var(--line); margin: 2px 0; }
.rv-cap { font-size: 12px; font-weight: 800; letter-spacing: .12em;
          text-transform: uppercase; color: #9aa1ad; }
.rv-target { display: flex; align-items: flex-end; gap: 12px; }
.rv-target .num { flex: 1; min-width: 0; }
.rv-big { font-size: 54px; font-weight: 800; line-height: 1; }
.rv-unit { font-size: 18px; font-weight: 700; color: #9aa1ad; }
.rv-times { font-size: 30px; font-weight: 700; color: #4b5563; margin: 0 6px; }
.rv-load { margin-top: 6px; font-size: 17px; font-weight: 700; }
.rv-steps { text-align: right; flex: none; max-width: 48%; }
.rv-steps .v { font-size: 21px; font-weight: 800; line-height: 1.2; }
.rv-cue { margin: 0; font-size: 16px; line-height: 1.4; color: #c3c8d1; }
/* The station strip: a disc a station of the round, joined by a line. */
.rv-stations { display: flex; justify-content: space-between; position: relative;
               padding: 0 6px; }
.rv-stations::before { content: ""; position: absolute; left: 34px; right: 34px;
                       top: 18px; height: 2px; background: var(--grid); }
.rv-st { position: relative; display: flex; flex-direction: column;
         align-items: center; gap: 6px; min-width: 56px; }
.rv-disc { width: 36px; height: 36px; border-radius: 50%; display: flex;
           align-items: center; justify-content: center; font-size: 13px;
           font-weight: 800; background: var(--bg);
           border: 2px solid var(--grid); color: #c3c8d1; }
.rv-st.done .rv-disc { background: var(--ok); border-color: var(--ok); }
.rv-st.off { opacity: .35; }
.rv-st.done .rv-disc svg { width: 16px; height: 16px; fill: none;
                           stroke: #05130c; stroke-width: 3;
                           stroke-linecap: round; stroke-linejoin: round; }
.rv-st.now .rv-disc { background: var(--focal); border-color: var(--focal);
                      color: #0b0f14; box-shadow: 0 0 0 6px
                        color-mix(in srgb, var(--focal) 25%, transparent); }
.rv-st .lb { font-size: 13px; font-weight: 700; color: var(--quiet); }
.rv-st.now .lb { color: var(--rv-eye); }

/* ---- X1: your sets ------------------------------------------------------- */
.rv-sets { display: flex; flex-direction: column; }
.rv-setrow { display: flex; align-items: center; gap: 14px; min-height: 46px;
             border-bottom: 1px solid var(--grid); font-size: 16px; }
.rv-setrow:first-child { border-top: 1px solid var(--grid); }
.rv-setrow .n { font-weight: 800; width: 52px; flex: none; }
.rv-setrow .v { flex: 1; color: #c3c8d1; }
.rv-setrow.next .n, .rv-setrow.next .v { color: var(--quiet); }
.rv-setrow .now { color: var(--rv-eye); font-weight: 800; }
.rv-edit { width: auto; min-height: 44px; margin: 0; padding: 0 2px;
            border: 0; background: none; color: var(--accent-soft);
            font-size: 16px; font-weight: 700; display: inline-flex;
            align-items: center; gap: 2px; flex: none; }
.rv-edit .lchev { display: inline-block; width: 8px; height: 8px;
                  margin-left: 6px; border-color: currentColor; }
.rv-mark { width: 24px; height: 24px; border-radius: 50%; flex: none;
           border: 2px solid var(--grid); display: flex; align-items: center;
           justify-content: center; }
.rv-mark.done { background: var(--ok); border-color: var(--ok); }
.rv-mark.done svg { width: 14px; height: 14px; fill: none; stroke: #05130c;
                    stroke-width: 3; stroke-linecap: round;
                    stroke-linejoin: round; }
.rv-mark.now { background: var(--focal); border-color: var(--focal); }

/* ---- the ring: the rest, draining clockwise; at 0:00 it turns ok -------- */
.rv-ring { position: relative; flex: none; width: var(--rs, 220px);
           height: var(--rs, 220px); margin: 0 auto; }
.rv-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rv-ring circle { fill: none; stroke-width: var(--rw, 12px);
                  vector-effect: non-scaling-stroke; }
.rv-ring .track { stroke: var(--grid); }
/* "Max loves this timer; keep it exactly as drawn" (v2 §4 L1): today's
   ring -- the arc drains clockwise from the top, .9 s a step, and at 0:00
   it and the eyebrow turn green; the time stays as it is. */
.rv-ring .arc { stroke: var(--accent-bright); stroke-linecap: round;
                stroke-dasharray: 666.02;
                transition: stroke-dashoffset .9s linear; }
.rv-ring.done .arc { stroke: var(--ok); }
.rv-ring .mid { position: absolute; inset: 0; display: flex;
                flex-direction: column; align-items: center;
                justify-content: center; }
.rv-ring .time { font-size: var(--rt, 62px); font-weight: 800; line-height: 1; }
.rv-ring .of { font-size: 15px; color: #9aa1ad; margin-top: 6px; }
.rv-ring.r220 { --rs: 220px; --rw: 12px; --rt: 62px; }
.rv-ring.r210 { --rs: 210px; --rw: 12px; --rt: 60px; }
.rv-ring.r240 { --rs: 240px; --rw: 11px; --rt: 64px; }
.rv-ring.r132 { --rs: 132px; --rw: 10px; --rt: 34px; margin: 0; }
.rv-ring.r132 .of { font-size: 13px; margin-top: 4px; }
@media (max-height: 740px) {
  .rv-ring.r220, .rv-ring.r210 { --rs: 160px; --rt: 46px; }
  .rv-ring.r240 { --rs: 200px; --rt: 54px; }
}

/* ---- L1: the log ---------------------------------------------------------- */
.rv-logtop { display: flex; align-items: center; gap: 18px; }
.rv-logtop .side { flex: 1; min-width: 0; display: flex;
                   flex-direction: column; gap: 8px; }
.rv-next { font-size: 17px; line-height: 1.35; color: #c3c8d1; }
.rv-next b { color: var(--ink); }
.rv-ask { margin: 0; font-size: 23px; font-weight: 800; line-height: 1.2; }
.rv-hint { margin: -6px 0 0; font-size: 15px; color: var(--quiet);
           line-height: 1.4; }
.rv-stepper { display: grid; grid-template-columns: 76px 52px 1fr 52px;
              align-items: center; gap: 10px; padding: 12px 0;
              border-top: 1px solid var(--line); }
.rv-stepper .v { text-align: center; white-space: nowrap; }
.rv-stepper .v b { font-size: 32px; font-weight: 800; }
.rv-stepper .v span { font-size: 15px; font-weight: 700; color: #9aa1ad;
                      margin-left: 4px; }
.rv-stepper .v.changed b { color: var(--accent-soft); }
button.rv-pm { width: 52px; height: 52px; min-height: 0; margin: 0; padding: 0;
               border-radius: 50%; background: transparent;
               border: 1px solid var(--line); color: var(--ink);
               font-size: 26px; font-weight: 500; line-height: 1;
               display: flex; align-items: center; justify-content: center; }
button.rv-pm:disabled { opacity: .35; }
.rv-static { padding: 12px 0; border-top: 1px solid var(--line);
             display: flex; align-items: baseline; gap: 12px; }
.rv-static .v { font-size: 18px; font-weight: 700; }
.rv-instr { margin: 0; font-size: 14px; color: var(--quiet); line-height: 1.4; }
.rv-back { align-self: flex-start; }
/* WAS the rating's (R4): Good / Poor and pain -- removed 2026-10-19
   (⚠B-IC8). ⚠B-IC7: "Why are you ending early?" on a summary. */
.rv-stop { display: flex; flex-direction: column; gap: 12px; }
/* the extra-set offer's card (D1) */
.rv-offer { display: flex; flex-direction: column; gap: 10px; }
.rv-stop .t { font-size: 17px; font-weight: 800; }

/* ---- R: the rest screens ------------------------------------------------- */
.rv-rest { display: flex; flex-direction: column; gap: 18px; }
.rv-strip { display: flex; align-items: center; gap: 12px; min-height: 48px;
            padding: 8px 16px; border-radius: 18px; background: var(--row);
            border: 1px solid var(--line); font-size: 16px; }
button.rv-strip { width: 100%; min-height: 56px; margin: 0; color: var(--ink);
                  text-align: left; }
.rv-strip .grow { flex: 1; min-width: 0; }
.rv-strip .q { color: var(--quiet); }
.rv-strip .r { color: var(--quiet); font-weight: 700; font-size: 14px;
               flex: none; }
.rv-strip svg.loop { width: 20px; height: 20px; flex: none; fill: none;
                     stroke: var(--accent-soft); stroke-width: 2;
                     stroke-linecap: round; stroke-linejoin: round; }
.rv-strip .grow.fit { flex: 0 0 auto; white-space: nowrap; }
.rv-mini { display: flex; align-items: center; justify-content: flex-end;
           gap: 6px; flex: 1; min-width: 0; }
/* More than three stations: their dots alone -- the codes would not fit a
   phone's width beside the round. */
.rv-mini.many i { display: none; }
.rv-mini i { font-style: normal; font-size: 13px; font-weight: 800;
             color: var(--quiet); }
.rv-mini .rv-dot { width: 18px; height: 18px; }
.rv-mini .sep { width: 10px; height: 2px; background: var(--grid); }
.rv-up { overflow: hidden; padding: 0; gap: 0; }
.rv-up .pad { padding: 16px 18px 18px; display: flex; flex-direction: column;
              gap: 12px; }
.rv-up h3.rv-name { margin: 0; font-size: 28px; font-weight: 800;
                    line-height: 1.12; }
.rv-up .thumbbtn { position: relative; display: block; width: 100%;
                   height: 136px; min-height: 0; margin: 0; padding: 0;
                   border: 0; border-radius: 0; background: #0f1621;
                   border-bottom: 1px solid var(--line); }
.rv-up .thumbbtn .runart path { stroke: #22324a; }
.rv-tag { position: absolute; left: 12px; top: 12px; padding: 6px 12px;
          border-radius: 999px; background: var(--focal); color: #0b0f14;
          font-size: 11px; font-weight: 900; letter-spacing: .1em;
          text-transform: uppercase; }
.rv-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rv-fact .v { font-size: 20px; font-weight: 800; margin-top: 4px;
              line-height: 1.2; }
.rv-fact .v i { font-style: normal; font-size: 15px; font-weight: 600;
                color: var(--quiet); }
.rv-upsame, .rv-card.rv-upsame { display: flex; flex-direction: row;
                                 align-items: center; gap: 14px; }
.rv-upsame .grow { flex: 1; min-width: 0; display: flex;
                   flex-direction: column; gap: 4px; }
.rv-upsame .t { font-size: 22px; font-weight: 800; }
.rv-upsame .s { font-size: 16px; color: #c3c8d1; }
/* R2-R4: the up-next card rises in ONCE, on arrival -- never on the
   per-second redraw (the ring is rewritten in place). */
.rv-rise { animation: c-rise 260ms cubic-bezier(.2, .8, .2, 1) both; }

/* ---- O1: the overview ---------------------------------------------------- */
.rv-ovtop { display: grid; grid-template-columns: 44px 1fr 44px;
            align-items: center; gap: 8px; margin-bottom: 4px; }
.rv-ovtop .t { text-align: center; font-size: 15px; font-weight: 700;
               color: #c3c8d1; }
.rv-ovtop button { width: 44px; height: 44px; min-height: 0; margin: 0;
                   padding: 0; border-radius: 14px; background: var(--panel);
                   border: 1px solid var(--line); color: var(--ink);
                   display: flex; align-items: center; justify-content: center; }
.rv-ovtop button svg { width: 22px; height: 22px; fill: none;
                       stroke: currentColor; stroke-width: 2.2;
                       stroke-linecap: round; stroke-linejoin: round; }
.rv-hero { border-radius: 24px; padding: 20px; display: flex;
           flex-direction: column; gap: 10px; }
.rv-hero .eye { display: flex; align-items: center; gap: 8px; }
.rv-hero .eye i { width: 10px; height: 10px; border-radius: 50%;
                  background: var(--focal); box-shadow: 0 0 0 4px
                    color-mix(in srgb, var(--focal) 25%, transparent); }
.rv-hero h2 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.08;
              letter-spacing: -.01em; }
.rv-hero .sub { font-size: 16px; color: var(--quiet); margin-top: -4px; }
.rv-hero .coach { margin: 0; font-size: 17px; line-height: 1.4; }
.rv-stats { display: grid; grid-template-columns: 1fr 1fr 1fr;
            border-top: 1px solid var(--line); padding-top: 12px; }
.rv-stats > div { padding: 0 12px; border-left: 1px solid var(--line); }
.rv-stats > div:first-child { padding-left: 0; border-left: 0; }
.rv-stats b { font-size: 26px; font-weight: 800; }
.rv-stats b small { font-size: 15px; font-weight: 600; color: var(--quiet);
                    margin-left: 4px; }
.rv-stats .rv-cap { margin-top: 2px; }
.rv-howhead { display: flex; align-items: baseline; gap: 12px;
              margin-top: 10px; }
.rv-howhead h3 { flex: 1; margin: 0; font-size: 20px; font-weight: 800; }
.rv-howhead span { font-size: 14px; color: var(--quiet); }
.rv-tapline { margin: -10px 0 0; font-size: 15px; color: var(--quiet); }
.rv-part { border-radius: 24px; padding: 16px 16px 6px; display: flex;
           flex-direction: column; gap: 8px; }
.rv-parthead { display: flex; align-items: center; gap: 12px; }
.rv-parthead .no { width: 30px; height: 30px; border-radius: 50%; flex: none;
                   background: var(--bg); display: flex; align-items: center;
                   justify-content: center; font-size: 14px; font-weight: 800; }
.rv-parthead .nm { flex: 1; font-size: 18px; font-weight: 800; }
.rv-parthead .rt { display: flex; align-items: center; gap: 6px;
                   font-size: 14px; font-weight: 700; color: #c3c8d1; }
.rv-parthead .rt svg { width: 17px; height: 17px; fill: none;
                       stroke: var(--accent-soft); stroke-width: 2;
                       stroke-linecap: round; stroke-linejoin: round; }
.rv-partsays { margin: 0 0 4px 42px; font-size: 15px; line-height: 1.4;
               color: var(--quiet); }
.rv-clock { margin: 0 0 10px 42px; display: flex; gap: 10px; font-size: 15px;
            line-height: 1.4; }
.rv-clock svg { width: 18px; height: 18px; flex: none; margin-top: 2px;
                fill: none; stroke: var(--accent-soft); stroke-width: 2;
                stroke-linecap: round; }
button.rv-exrow { display: flex; align-items: center; gap: 14px; width: 100%;
                  min-height: 72px; margin: 0; padding: 10px 0; border: 0;
                  border-top: 1px solid var(--line); border-radius: 0;
                  background: none; color: var(--ink); text-align: left; }
.rv-thumb { width: 52px; height: 52px; border-radius: 14px; flex: none;
            background: #0b111a; border: 1px solid var(--line); display: flex;
            align-items: center; justify-content: center; }
.rv-thumb svg { width: 16px; height: 16px; fill: #e5e7eb; margin-left: 2px; }
.rv-exrow .m { flex: 1; min-width: 0; display: flex; flex-direction: column;
               gap: 2px; }
.rv-exrow .t { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.rv-exrow .t b { color: var(--rv-eye); margin-right: 4px; }
.rv-exrow .s { font-size: 14px; color: var(--quiet); }
.rv-exrow .n { font-size: 14px; color: var(--accent-soft); }
.rv-exrow .lchev { flex: none; }
.rv-ovfoot { margin: 6px 0 0; font-size: 14px; color: var(--quiet);
             text-align: center; }
.rv-wait { margin: 0; color: var(--quiet); }

/* ---- O2 / O3: the sheets ------------------------------------------------- */
.rv-sheethead { display: flex; align-items: flex-start; gap: 12px; }
.rv-sheethead .grow { flex: 1; min-width: 0; display: flex;
                      flex-direction: column; gap: 6px; }
.rv-sheethead h2 { margin: 0; font-size: 26px; font-weight: 800;
                   line-height: 1.15; }
button.rv-close { width: 44px; height: 44px; min-height: 0; flex: none;
                  margin: 0; padding: 0; border-radius: 50%;
                  background: transparent; border: 1px solid var(--line);
                  color: var(--ink); display: flex; align-items: center;
                  justify-content: center; }
.rv-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
                stroke-width: 2.2; stroke-linecap: round; }
.rv-demo { position: relative; height: 188px; border-radius: 22px;
           overflow: hidden; background: #0b111a; border: 1px solid var(--line); }
.rv-demo .runart path { stroke: #22324a; }
.rv-cues { display: flex; flex-direction: column; gap: 12px; margin: 0;
           padding: 0; list-style: none; }
.rv-cues li { display: flex; gap: 12px; align-items: center; font-size: 16px;
              line-height: 1.35; }
.rv-cues li i { width: 26px; height: 26px; border-radius: 50%; flex: none;
                background: var(--focal); color: #0b0f14; font-style: normal;
                font-size: 13px; font-weight: 800; display: flex;
                align-items: center; justify-content: center; }
.rv-swapfoot { display: flex; flex-direction: column; align-items: center;
               gap: 8px; }
.rv-swapfoot button.c-btn-outline { align-self: stretch; min-height: 52px;
                                    border-radius: 18px; }
.rv-swapfoot p { margin: 0; font-size: 14px; color: var(--quiet);
                 text-align: center; }
.rv-swapfoot button.c-quiet { align-self: center; }
.rv-alts { display: flex; flex-direction: column; gap: 10px;
           max-height: 46vh; overflow-y: auto; margin: 0 -2px; padding: 2px; }
button.rv-alt { display: flex; align-items: center; gap: 14px; width: 100%;
                min-height: 68px; margin: 0; padding: 10px 16px;
                border-radius: 18px; background: var(--row);
                border: 1px solid var(--line); color: var(--ink);
                text-align: left; }
button.rv-alt.on { background: var(--chip-bg);
                   border: 1.5px solid var(--accent-bright); }
.rv-alt .rd { width: 22px; height: 22px; border-radius: 50%; flex: none;
              border: 2px solid var(--line); }
.rv-alt.on .rd { border-color: var(--accent-bright);
                 box-shadow: inset 0 0 0 4px var(--row),
                             inset 0 0 0 12px var(--accent-bright); }
.rv-alt .m { flex: 1; min-width: 0; display: flex; flex-direction: column;
             gap: 2px; }
.rv-alt .t { font-size: 16.5px; font-weight: 800; line-height: 1.25; }
.rv-alt .s { font-size: 14.5px; color: var(--quiet); }

/* ---- the overview sheet, OV1-OV4 (in-session v1, 2026-11-03) ------------
   Calmer: the raised fill, a close × top right, the progress and the NOW
   row in the session's colour (`--sc`, its `tp-c-*` class on the wrap),
   done rows ticked green; the footer Pause session (outline) and End
   session (a quiet link) -- no blue. index.html keeps the older `run*`
   rules these sit over. */
.rv-ovsheet { --focal: var(--sc, var(--accent)); }
.rv-ovsheet .sheet.runsheet { background: var(--raised-fill);
  border: 1px solid var(--line); border-bottom: 0;
  height: min(600px, calc(100% - 24px)); }
.rv-ovsheet .runsheet .grabber { background: #3d5068; }
.rv-ovsheet .runsheethead { align-items: flex-start; }
.rv-ovsheet .runsheethead .small { margin-top: 3px; font-size: 14px;
  color: var(--quiet); }
.rv-ovsheet .runsheethead .c-back { width: 40px; height: 40px;
  border-radius: 20px; background: #1a2638; border: 0; }
.rv-ovsheet .runprog { height: 4px; border-radius: 2px; background: #1c2a3c;
  margin: 12px 20px 6px; }
.rv-ovsheet .runprog span { height: 4px; border-radius: 2px;
  background: var(--focal); }
.rv-ovsheet .runblock { font-size: 12px; font-weight: 800;
  letter-spacing: .13em; color: var(--quiet); padding: 14px 10px 2px;
  text-transform: uppercase; }
.rv-ovsheet .runrow { min-height: 60px; padding: 8px 10px; gap: 12px;
  border: 0; border-radius: 14px; color: var(--ink); text-align: left; }
.rv-ovsheet .runrow.cur { background: color-mix(in srgb, var(--focal) 9%,
  transparent); border: 0; }
.rv-ovsheet .runrow .nm { font-size: 15.5px; line-height: 1.25; }
.rv-ovsheet .runrow.done .nm { color: #c3c8d1; }
.rv-ovsheet .runrow .small { font-size: 13px; color: var(--quiet); }
.rv-ovsheet .runrow .rt { font-size: 14px; color: var(--quiet); }
.rv-ovsheet .runrow.done .rt { color: var(--quiet); }
.rv-ovsheet .runrow.cur .rt { font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--focal) 70%, #fff); }
.rv-ovsheet .runrow .lchev { border-color: var(--quiet); }
.rv-ovsheet .runrow .ring { width: 24px; height: 24px; border-radius: 12px;
  border: 2px solid #3d5068; box-sizing: border-box; }
.rv-ovsheet .runcheck { width: 24px; height: 24px; border-radius: 12px;
  background: var(--ok); color: #06150e; }
.rv-ovsheet .runcheck svg { width: 13px; height: 13px; stroke-width: 3.2; }
.rv-ovsheet .runnow { width: 24px; height: 24px; border-radius: 12px;
  border: 2.5px solid var(--focal); box-sizing: border-box; }
.rv-ovsheet .runnow i { background: var(--focal); }
.rv-ovsheet .runsheetfoot { border-top: 0; }
.rv-ovsheet .runask { align-items: center; gap: 12px; }
.rv-ovsheet button.rv-ovpause { height: 50px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15.5px; color: var(--ink); background: var(--panel); }
.rv-ovpause svg.ic { width: 15px; height: 15px; fill: none;
  stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.rv-ovsheet button.rv-ovend { align-self: center; padding: 0 14px;
  color: var(--quiet); font-weight: 700; }
/* OV3 */
.rv-endsheet .rv-endq { margin: 4px 0 0; font-size: 24px; font-weight: 800;
  line-height: 1.2; }
.rv-endsheet .rv-endl { margin: -4px 0 18px; font-size: 15px;
  line-height: 1.45; color: #c3c8d1; }
.rv-endsheet button.c-quiet { align-self: center; color: #c3c8d1;
  font-weight: 700; }
/* OV4 */
.rv-paused { align-items: center; text-align: center; gap: 0;
  padding-top: min(30vh, 220px); }
.rv-pauseic { width: 74px; height: 74px; border-radius: 37px;
  background: var(--panel); border: 1px solid var(--line); display: flex;
  align-items: center; justify-content: center; color: var(--ink); }
.rv-pauseic svg { width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; }
h2.rv-ptitle { margin: 22px 0 0; font-size: 30px; font-weight: 800; }
.rv-pline { margin: 8px 6px 0; font-size: 15px; line-height: 1.45;
  color: var(--quiet); }
.rv-bar button.c-quiet { align-self: center; }
@media (max-height: 700px) {
  .rv-paused { padding-top: 14vh; }
}

/* ==== in-session v1 (2026-11-03, the owner's 4 Nov design: IS1-IS6,
   PX1-PX3) -- the header's back + Overview + 4 px bar, the DO card, the
   log SHEET and the rest. New classes only where a rule above is shared
   with the PE / Speed / sprint / aerobic screens (rv-head, rv-top, rv-mid,
   rv-ovpill, rv-pill, rv-eye, rv-card ...). ==== */

/* ---- the header ---------------------------------------------------------- */
button.rv-ovpill.rv-ovbtn { width: 44px; padding: 0; justify-content: center; }
.rv-prog { height: 4px; border-radius: 2px; background: #1c2a3c;
           overflow: hidden; margin-top: 12px; }
.rv-prog i { display: block; height: 100%; border-radius: 2px;
             background: var(--focal); }

/* ---- DO (IS1-IS3, PX1-PX2) ----------------------------------------------- */
.rv-do { gap: 18px; }
.rv-dohead { display: flex; flex-direction: column; gap: 0; }
.rv-eye.rv-doeye { color: var(--quiet); font-size: 12.5px;
                   letter-spacing: .13em; }
.rv-do h2.rv-name { font-size: 32px; letter-spacing: -.015em;
                    line-height: 1.08; margin-top: 6px; }
.rv-do.pic h2.rv-name { font-size: 28px; }
.rv-do .rv-instead { margin: 4px 0 0; }
.rv-progline { display: flex; align-items: center; gap: 10px;
               margin-top: 10px; min-height: 22px; }
.rv-pl { flex: 1; min-width: 0; display: flex; align-items: center;
         gap: 10px; }
.rv-pdots { display: inline-flex; gap: 5px; align-items: center; flex: none; }
.rv-pdots i { width: 8px; height: 8px; border-radius: 4px;
              background: #2a3a4e; }
.rv-pdots i.done { background: var(--ok); }
.rv-pdots i.now { width: 20px; background: var(--focal); }
.rv-pdots i.off { background: transparent; border: 1.5px solid #2a3a4e;
                  box-sizing: border-box; }
.rv-pdots i.w { width: 6px; height: 6px; border-radius: 3px; }
.rv-pdots i.w.now { width: 14px; }
.rv-progline .t { font-size: 14px; font-weight: 700; color: #c3c8d1;
                  min-width: 0; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
/* no picture: Demo · Swap · Pain, an icon row */
.rv-tools { display: flex; gap: 18px; margin-top: 16px; }
button.rv-tool { display: flex; flex-direction: column; align-items: center;
                 gap: 4px; width: auto; min-height: 0; margin: 0; padding: 0;
                 background: none; border: 0; color: #c3c8d1; }
button.rv-tool .ic { width: 44px; height: 44px; border-radius: 22px;
                     background: var(--panel); border: 1px solid var(--line);
                     display: flex; align-items: center;
                     justify-content: center; }
button.rv-tool .lb { font-size: 11px; font-weight: 700; color: var(--quiet); }
.rv-tool svg, .rv-tpill svg { width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
.rv-tool svg .fill, .rv-tpill svg .fill { fill: currentColor; stroke: none; }
/* a picture: Swap · Pain as pills on the progress line */
.rv-tpills { display: flex; gap: 6px; flex: none; }
button.rv-tpill { height: 34px; min-height: 0; width: auto; margin: 0;
                  padding: 0 12px; border-radius: 17px;
                  background: var(--panel); border: 1px solid var(--line);
                  color: #c3c8d1; display: flex; align-items: center; gap: 6px;
                  font-size: 13px; font-weight: 700; }
/* the picture under the header */
.rv-do .rv-pic { margin: 0; }
/* THIS SET: the one focal card */
.rv-card.rv-this { gap: 0; padding: 20px; }
.rv-this .rv-target { align-items: baseline; gap: 10px; margin-top: 6px; }
.rv-this .rv-big { font-size: 60px; letter-spacing: -.03em; }
.rv-this .rv-unit { font-size: 20px; color: #c3c8d1; }
.rv-kit { margin: 10px 0 0; font-size: 15px; font-weight: 700;
          line-height: 1.35; }
.rv-kit + .rv-kit { margin-top: 4px; }
.rv-this .rv-cue { margin: 12px 0 0; font-size: 15.5px; }
/* IS2 / IS3: the lift's set list -- warm-ups, then the work sets */
.rv-slist { margin-top: 14px; padding-top: 6px;
            border-top: 1px solid rgba(255, 255, 255, .10);
            display: flex; flex-direction: column; }
.rv-srow { display: flex; align-items: center; gap: 12px; min-height: 40px;
           border-top: 1px solid rgba(255, 255, 255, .07); font-size: 14.5px;
           color: var(--quiet); }
.rv-srow:first-child { border-top: 0; }
button.rv-srow { width: 100%; margin: 0; padding: 0; background: none;
                 border-radius: 0; border-left: 0; border-right: 0;
                 border-bottom: 0; text-align: left; }
button.rv-srow:first-child { border-top: 0; }
.rv-srow .n { flex: 1; min-width: 0; font-weight: 600; }
.rv-srow .v { font-weight: 700; white-space: nowrap; }
.rv-srow .e { color: var(--accent-soft); font-weight: 700; margin-left: 4px; }
.rv-srow.now { color: var(--ink); }
.rv-srow.now .n { font-weight: 800; }
.rv-smark { width: 20px; height: 20px; border-radius: 10px; flex: none;
            box-sizing: border-box; border: 2px solid #3d5068;
            display: flex; align-items: center; justify-content: center; }
.rv-srow.now .rv-smark { border-color: var(--focal); }
.rv-srow.now .rv-smark::after { content: ""; width: 8px; height: 8px;
                                border-radius: 4px; background: var(--focal); }
.rv-srow.done .rv-smark, .rv-srow.wdone .rv-smark, .rv-srow.fold .rv-smark {
  border: 0; background: var(--ok); }
.rv-smark svg { width: 12px; height: 12px; fill: none; stroke: #0b0f14;
                stroke-width: 3; stroke-linecap: round;
                stroke-linejoin: round; }
.rv-srow.fold { display: none; }

/* ---- LOG (IS4 / IS4b): a sheet over the DO card -------------------------- */
.rv-logwrap .sheet.c-sheet { gap: 0; }
/* THE REST UNDER A SHEET (2026-11-04, Mid session 3.2): a slim line at the
   sheet's top -- REST, the time, "of 0:45" -- over a bar that empties. */
.rv-pill { display: grid; grid-template-columns: auto auto 1fr;
  align-items: baseline; column-gap: 10px; row-gap: 8px;
  margin: 0 0 14px; padding: 10px 14px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line, #1f3147); }
.rv-pill .pl { font-size: 12px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--quiet); }
.rv-pill b { font-size: 22px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: #eef1f5; }
.rv-pill .po { font-size: 13px; color: var(--quiet); }
.rv-pill .pb { grid-column: 1 / -1; display: block; height: 5px;
  border-radius: 3px; background: #1d2a3b; overflow: hidden; }
.rv-pill .pb > i { display: block; height: 100%; border-radius: 3px;
  background: var(--sc, var(--accent-soft, #8cc4f5));
  transition: width 1s linear; }
.rv-pill.done .pl, .rv-pill.done b { color: var(--ok); }
.rv-pill.done .pb > i { background: var(--ok); }
@media (prefers-reduced-motion: reduce) { .rv-pill .pb > i { transition: none; } }
.rv-logwrap .rv-eye { color: var(--quiet); font-size: 12.5px;
                      letter-spacing: .13em; }
.rv-logwrap h2.rv-ask { margin: 6px 0 0; font-size: 24px; }
.rv-logwrap .rv-hint { margin: 4px 0 0; font-size: 14px; }
.rv-steppers { display: flex; gap: 10px; margin-top: 16px; }
.rv-steppers .rv-stepper, .rv-steppers .rv-static {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  align-items: stretch; padding: 0; border: 0;
  grid-template-columns: none; }
.rv-steppers .rv-cap { color: var(--quiet); }
.rv-stepbox { display: flex; align-items: center;
              justify-content: space-between; height: 52px;
              border-radius: 14px; background: var(--panel);
              border: 1px solid var(--line); padding: 0 6px;
              box-sizing: border-box; }
.rv-stepbox button.rv-pm { width: 40px; height: 40px; border-radius: 12px;
                           background: #1a2638; border: 0; flex: none; }
.rv-stepbox button.rv-pm svg { width: 18px; height: 18px; fill: none;
  stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.rv-stepbox .v b { font-size: 20px; }
.rv-stepbox .v span { font-size: 13px; color: var(--quiet); }
.rv-steppers .rv-static .v { height: 52px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line);
  box-sizing: border-box; padding: 0 12px; display: flex;
  align-items: center; font-size: 15px; font-weight: 700; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.rv-changed { margin: 10px 0 0; display: flex; gap: 6px; align-items: center;
              font-size: 13.5px; color: var(--accent-soft); }
.rv-changed svg { width: 15px; height: 15px; flex: none; fill: none;
                  stroke: currentColor; stroke-width: 2;
                  stroke-linecap: round; stroke-linejoin: round; }
.rv-logwrap .rv-instr { margin: 10px 0 0; font-size: 13.5px; }
.rv-logwrap button.rv-logsave { margin-top: 18px; width: 100%;
  min-height: 58px; border-radius: 18px; display: flex; align-items: center;
  justify-content: center; gap: 10px; font-size: 17px; font-weight: 800; }
.rv-logwrap button.rv-logsave svg { width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---- REST (IS5 / IS6, PX3) ----------------------------------------------- */
.rv-restv1 { gap: 0; align-items: stretch; padding-bottom: 28px; }
.rv-eye.rv-resteye { color: var(--quiet); text-align: center;
                     letter-spacing: .14em; font-size: 12.5px;
                     margin-top: 10px; }
.rv-restv1 .rv-ring { margin: 16px auto 0; }
.rv-ring.r240 .of { font-size: 14px; color: var(--quiet); }
.rv-ring.sc .arc { stroke: var(--focal); }
.rv-addrow { display: flex; justify-content: center; gap: 8px;
             margin-top: 16px; }
button.rv-add { height: 38px; min-height: 0; width: auto; margin: 0;
                padding: 0 14px; border-radius: 19px;
                background: var(--panel); border: 1px solid var(--line);
                color: var(--ink); font-size: 14px; font-weight: 700; }
.rv-saved { margin: 18px 0 0; display: flex; align-items: center; gap: 8px;
            justify-content: center; font-size: 14px; color: #c3c8d1; }
button.rv-saved { width: auto; align-self: center; min-height: 44px;
                  margin-top: 10px; padding: 0 8px; background: none;
                  border: 0; color: #c3c8d1; }
.rv-saved .ok { flex: none; display: flex; color: var(--ok); }
.rv-saved .ok svg { width: 16px; height: 16px; fill: none;
                    stroke: currentColor; stroke-width: 2.6;
                    stroke-linecap: round; stroke-linejoin: round; }
.rv-saved .e { color: var(--accent-soft); font-weight: 700; }
.rv-restv1 .rv-card, .rv-restv1 .wu-band { margin-top: 16px; }
.rv-card.rv-upnext { flex-direction: row; align-items: center; gap: 14px;
                     padding: 14px 16px; border-radius: 18px; }
.rv-upimg { flex: none; width: 100px; height: 64px; box-sizing: border-box;
             padding: 4px 6px; border-radius: 14px;
             background: radial-gradient(120% 100% at 50% 100%, #14263b 0%,
                                         #0c1521 70%);
             border: 1px solid #1f3147; }
.rv-upimg > * { width: 100%; height: 100%; }
.rv-uptxt { flex: 1; min-width: 0; }
.rv-eye.rv-upeye { color: var(--quiet); font-size: 12px; }
.rv-upt { font-size: 19px; font-weight: 800; margin-top: 6px;
          line-height: 1.2; }
.rv-ups { font-size: 14px; color: #c3c8d1; margin-top: 2px; }

/* ---- a small phone (375 x 667) ------------------------------------------- */
@media (max-height: 700px) {
  .rv-do { gap: 12px; }
  .rv-do h2.rv-name { font-size: 28px; }
  .rv-this .rv-big { font-size: 50px; }
  .rv-card.rv-this { padding: 16px 20px; }
  .rv-this .rv-cue { margin-top: 8px; }
  .rv-kit { margin-top: 8px; }
  .rv-tools { margin-top: 12px; }
  .rv-slist:has(.fold) .rv-srow.wdone { display: none; }
  .rv-srow.fold { display: flex; }
  .rv-restv1 .rv-ring { margin-top: 10px; }
  .rv-upimg { width: 88px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-rise { animation: none; }
  .rv-ring .arc { transition: none; }
}

/* END SESSION IS RED (2026-11-04, owner, redesign list, Mid session 3.3:
   "End session buttons should be red"): all three -- the overview sheet's
   footer, the paused screen's, and the "End the session now?" sheet's
   confirm, which is the solid one. WAS a quiet grey link. Red is the
   app's `--bad`; nothing else in a session is red but a failure. */
button.rv-endbtn, .rv-ovsheet button.rv-ovend,
.rv-endsheet button.c-quiet.rv-endbtn, .rv-bar button.c-quiet.rv-endbtn {
  display: flex; align-items: center; justify-content: center;
  flex: none; width: 100%; height: 50px; min-height: 0; margin: 0;
  padding: 0 18px; border-radius: 15px; font-size: 15.5px; font-weight: 800;
  color: #ff938a; background: rgba(240, 115, 106, .14);
  border: 1px solid rgba(240, 115, 106, .65); align-self: stretch; }
.rv-ovsheet .runask button.rv-ovend { flex: 1 1 0; width: auto; }
.rv-endsheet button.c-quiet.rv-endbtn.sure { color: #fff;
  background: #d8453d; border-color: #d8453d; }