/* styles/calm.css -- the shared parts (built for the parked Calm redesign,
   2026-10-07; brought onto main for the Today & Programme job, 2026-10-08,
   without Calm's screens). Built by screens/calm.js; every class here is
   `c-*`.

   Linked after index.html's inline <style>, so a rule here wins over the
   inline one of the same weight; the parts' stylesheets (start, today,
   workout, plan, you, squad) come after this one and win over it. Tokens
   only: the three below are the handoff's new ones; every other colour is
   index.html's `:root`. Mobile first; nothing wider than the body's 30 rem
   column. */

:root {
  --c-outline: #3a3d44;
  --c-ink-2: #c9ccd2;
  --c-tint: color-mix(in srgb, var(--accent) 8%, var(--bg));
  --c-gutter: 20px;
  /* THE SURFACE (CHANGE 2, 8 Oct; `reference/surface_today.html`): a card's
     fill and lift (level 1), a raised card's or sheet's (level 2), the
     quiet grey of trailing meta -- 4.67:1 on the card fill's lightest stop,
     over the 4.5:1 that 13 px text needs -- the page's low glow and grain,
     and the tab bar's frost. */
  --card-fill: linear-gradient(160deg, #15253a 0%, #101b2b 55%, #0d1622 100%);
  --card-lift: inset 0 1px 0 rgba(140, 196, 245, .12), 0 14px 34px rgba(0, 0, 0, .70);
  --raised-fill: linear-gradient(160deg, #182a40 0%, #12203a 55%, #0f1a29 100%);
  --raised-lift: inset 0 1px 0 rgba(160, 200, 245, .14), 0 18px 44px rgba(0, 0, 0, .75);
  --quiet: #848e9d;
  --page-glow: radial-gradient(130% 42% at 50% 104%, rgba(33, 150, 243, .38),
                               rgba(33, 150, 243, 0) 72%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  --frost: rgba(18, 28, 42, .55);
  --frost-solid: rgba(18, 28, 42, .94);
  --frost-line: rgba(140, 196, 245, .16);
  /* THE FIRST RUN (onboarding v1, 10 Oct, §2): an earned unlock segment and
     its tick (= --ok), its label, a segment not yet earned (= --line), and
     the tennis ball's yellow (WAS the welcome screen's ball, gone with the
     intro of 15 Oct 2026; the warm-up's eyebrow, warmup.css, still reads
     it). */
  --unlock: #63d29a;
  --unlock-text: #9be7c0;
  --unlock-off: #24364d;
  --ball: #d7f55a;
}

/* ---- the page ---------------------------------------------------------- */
/* The body already keeps 1 rem from the edge; the page adds the last 4 px of
   the handoff's 20 px gutter, and the gaps between its parts -- 24 px since
   CHANGE 2 (§6, "more space"; inside cards nothing changes). */
.c-page { display: flex; flex-direction: column; gap: 24px;
          padding: 0 calc(var(--c-gutter) - 1rem); }
.c-page > * { margin-top: 0; margin-bottom: 0; }

/* ---- words --------------------------------------------------------------- */
.c-titlerow { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.c-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 32px;
           font-weight: 800; line-height: 1.12; letter-spacing: -.01em;
           overflow-wrap: anywhere; }
.c-right { flex: none; color: var(--dim); font-size: 15px; font-weight: 600; }
.c-sub { margin: 0; color: var(--dim); font-size: 16.5px; line-height: 1.45; }
.c-label { margin: 0; color: var(--accent-soft); font-size: 14px;
           font-weight: 700; line-height: 1.3; letter-spacing: 0;
           text-transform: none; }

/* ---- cards ------------------------------------------------------------- */
.c-hero { background: var(--panel); border: 1.5px solid var(--accent-fill);
          border-radius: 26px; padding: 24px 22px;
          display: flex; flex-direction: column; gap: 14px; }
.c-card { background: var(--panel); border: 1px solid var(--line);
          border-radius: 24px; padding: 20px;
          display: flex; flex-direction: column; gap: 12px; }
.c-hero > *, .c-card > * { margin-top: 0; margin-bottom: 0; }
.c-nudget { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; }
.c-strip { margin: 0; padding: 12px 16px; border-radius: 16px;
           background: var(--c-tint); color: var(--c-ink-2);
           font-size: 15px; line-height: 1.45; }

/* ---- buttons ----------------------------------------------------------- */
/* THE blue button. One per screen (calm.js `calmCheck`). */
button.c-btn { display: flex; align-items: center; justify-content: center;
               gap: 10px; width: 100%; min-height: 60px; margin: 0;
               padding: 0 20px; border: 0; border-radius: 18px;
               background: var(--accent-fill); color: var(--accent-ink);
               font-size: 18px; font-weight: 700; text-align: center; }
button.c-btn:disabled { opacity: .55; }
button.c-btn-outline { display: inline-flex; align-items: center;
                       justify-content: center; gap: 8px; width: auto;
                       min-height: 48px; margin: 0; padding: 0 22px;
                       border: 1px solid var(--c-outline); border-radius: 999px;
                       background: transparent; color: var(--ink);
                       font-size: 16px; font-weight: 600; text-align: center; }
.c-ico { display: inline-flex; width: 22px; height: 22px; flex: none; }
.c-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
             stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
button.c-link, button.c-quiet { display: inline-flex; align-items: center;
                                width: auto; min-height: 44px; margin: 0;
                                padding: 0 2px; border: 0; background: none;
                                color: var(--accent-soft); font-size: 15.5px;
                                font-weight: 600; text-decoration: none;
                                text-align: left; }
button.c-quiet { color: var(--c-ink-2); }
/* In a column (a page, a card, a sheet) they keep their own width rather
   than stretch to the row's -- a caller centres one with `align-self`. */
button.c-btn-outline, button.c-link, button.c-quiet { align-self: flex-start; }
button.c-quiet.danger { color: var(--bad-ink); }
button.c-link:active, button.c-quiet:active { transform: none; opacity: .65; }

/* ---- rows and lists ---------------------------------------------------- */
.c-row { display: block; width: 100%; min-height: 52px; margin: 0;
         padding: 0; border: 0; border-radius: 0; background: none;
         color: var(--ink); text-align: left; }
button.c-row:active { transform: none; opacity: .7; }
button.c-row[data-tap]:active { opacity: 1; }
.c-rowin { display: flex; align-items: center; gap: 14px; min-height: 52px;
           padding: 10px 0; }
.c-rowl { flex: none; display: flex; align-items: center; }
.c-rowm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
          gap: 2px; }
.c-rowt { font-size: 16.5px; font-weight: 600; line-height: 1.3;
          overflow-wrap: anywhere; }
.c-rows { color: var(--dim); font-size: 14.5px; line-height: 1.35; }
.c-rowr { flex: none; color: var(--dim); font-size: 15px; }
.c-row .lchev { border-color: var(--rec); }
.c-list { display: flex; flex-direction: column; }
.c-list > .c-row + .c-row { border-top: 1px solid var(--grid); }
.c-list.boxed { background: var(--panel); border: 1px solid var(--line);
                border-radius: 22px; padding: 2px 18px; }

/* ---- choices ----------------------------------------------------------- */
button.c-choice { display: flex; align-items: center; gap: 14px; width: 100%;
                  min-height: 56px; margin: 0; padding: 14px 18px;
                  border: 1.5px solid var(--line); border-radius: 18px;
                  background: var(--panel); color: var(--ink);
                  text-align: left; }
button.c-choice.on { background: var(--chip-bg);
                     border-color: var(--accent-bright); }
button.c-choice:active { transform: scale(.985); }
.c-chm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
         gap: 2px; }
.c-cht { font-size: 17px; font-weight: 700; line-height: 1.3; }
.c-chs { color: var(--dim); font-size: 14.5px; line-height: 1.4; }
button.c-choice.on .c-chs { color: var(--c-ink-2); }
.c-chi { flex: none; position: relative; width: 24px; height: 24px;
         border-radius: 50%; border: 2px solid var(--c-outline); }
.c-choice.on .c-chi { border-color: var(--accent-bright); }
.c-choice.radio.on .c-chi::after { content: ""; position: absolute; inset: 4px;
                                   border-radius: 50%;
                                   background: var(--accent-bright); }
.c-choice.toggle .c-chi { width: 44px; height: 26px; border-radius: 999px;
                          border: 0; background: var(--panel-2); }
.c-choice.toggle .c-chi::after { content: ""; position: absolute; top: 3px;
                                 left: 3px; width: 20px; height: 20px;
                                 border-radius: 50%; background: var(--dim);
                                 transition: transform .18s ease; }
.c-choice.toggle.on .c-chi { background: var(--accent-fill); }
.c-choice.toggle.on .c-chi::after { background: #fff;
                                    transform: translateX(18px); }

/* ---- stepper ----------------------------------------------------------- */
.c-stepper { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; padding: 16px; background: var(--panel);
             border: 1px solid var(--line); border-radius: 24px; }
button.c-step { flex: none; width: 64px; height: 64px; min-height: 0;
                margin: 0; padding: 0; border: 0; border-radius: 50%;
                background: var(--panel-2); color: var(--ink);
                font-size: 30px; font-weight: 500; line-height: 1;
                text-align: center; }
button.c-step:active { transform: scale(.94); }
.c-stepv { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
           align-items: center; gap: 2px; }
.c-stepv b { font-size: 60px; font-weight: 800; line-height: 1;
             font-variant-numeric: tabular-nums; }
.c-stepv span { color: var(--dim); font-size: 15px; }

/* ---- THE BACK (2026-10-21, "One Back, same place everywhere") ---------- */
/* One arrow in one place: the top left of every screen that is not a tab's
   home, and of every sheet. A 44 px round on the panel's fill -- a target a
   thumb finds (WAS, among six styles, a 1.1 rem ✕ the owner "can't hit").
   The rule is the button's own, whatever row it sits in. */
button.c-back { flex: none; width: 44px; height: 44px; min-height: 0;
                margin: 0; padding: 10px; border: 0; border-radius: 50%;
                background: var(--panel); color: var(--ink);
                text-align: center; }
button.c-back svg { display: block; width: 100%; height: 100%; fill: none;
                    stroke: currentColor; stroke-width: 2.2;
                    stroke-linecap: round; stroke-linejoin: round; }
/* A screen's top row when it has no bar of its own; a sheet's, beside its
   grab bar (it rides up into the grab's band, so a sheet grows by little). */
.c-backbar { display: flex; align-items: center; gap: 12px; min-height: 44px;
             margin: 0 0 12px; }
.c-backbar .grow { flex: 1 1 auto; }
.c-sheethead { flex: none; display: flex; align-items: center;
               min-height: 44px; }
.sheet > .c-sheethead { margin: -14px 0 -4px; }
.sheet > .grab + .c-sheethead { margin-top: -18px; }

/* ---- top bar and progress ---------------------------------------------- */
.c-topbar { display: flex; align-items: center; gap: 14px; min-height: 44px;
            margin: 0 0 20px; padding: 0 calc(var(--c-gutter) - 1rem); }
button.c-round, .c-roundslot { flex: none; width: 44px; height: 44px;
                               min-height: 0; margin: 0; padding: 10px;
                               border: 0; border-radius: 50%; }
button.c-round { background: var(--panel); color: var(--ink); }
button.c-round svg { width: 100%; height: 100%; fill: none;
                     stroke: currentColor; stroke-width: 2.2;
                     stroke-linecap: round; stroke-linejoin: round; }
.c-topbar .grow { flex: 1 1 auto; }
.c-toplabel { flex: none; min-width: 44px; text-align: right;
              color: var(--dim); font-size: 15px; font-weight: 600;
              font-variant-numeric: tabular-nums; }
.c-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; overflow: hidden;
         background: var(--panel-2); }
.c-bar > i { display: block; height: 100%; border-radius: inherit;
             background: var(--accent-bright); transition: width .3s ease; }
.c-bar.ok > i { background: var(--ok); }

/* ---- sheet ------------------------------------------------------------- */
/* Rides index.html's `.sheetwrap` / `.sheet` so the kernel's overlay motion
   raises and lowers it; this is only its Calm look. */
.sheetwrap.c-sheetwrap { background: rgba(2, 3, 5, .72); z-index: 75; }
.sheet.c-sheet { height: auto; max-height: 88vh; overflow-y: auto;
                 background: var(--raised-fill); border: 0;
                 border-top: 1px solid var(--line);
                 box-shadow: var(--raised-lift); border-radius: 26px 26px 0 0;
                 padding: 0 var(--c-gutter)
                          calc(24px + env(safe-area-inset-bottom));
                 gap: 14px; }
.sheet.c-sheet:focus { outline: none; }
.c-sheet > * { margin-top: 0; margin-bottom: 0; }
.c-grab { flex: none; display: flex; justify-content: center; padding: 10px 0 4px; }
.c-grab i { display: block; width: 40px; height: 5px; border-radius: 999px;
            background: var(--c-outline); }

/* ---- folds, icons, badges ---------------------------------------------- */
.c-more { margin: 0; padding: 0; border: 0; border-radius: 0;
          background: none; }
.c-more > summary { display: inline-flex; align-items: center; min-height: 44px;
                    color: var(--accent-soft); font-size: 15.5px;
                    font-weight: 600; cursor: pointer; list-style: none; }
.c-more > summary::-webkit-details-marker { display: none; }
.c-more > summary::after { content: ""; width: 7px; height: 7px; margin-left: 9px;
                           border-right: 2px solid currentColor;
                           border-bottom: 2px solid currentColor;
                           transform: translateY(-2px) rotate(45deg); }
.c-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.c-morein { display: flex; flex-direction: column; gap: 10px; padding: 4px 0;
            color: var(--c-ink-2); font-size: 15px; line-height: 1.45; }
.c-morein > * { margin: 0; }
.c-icon { display: inline-flex; align-items: center; justify-content: center;
          flex: none; border-radius: 50%; background: var(--panel-2);
          color: var(--ink); }
.c-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
              stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-done { display: inline-flex; align-items: center; justify-content: center;
          flex: none; border-radius: 50%; background: var(--ok-fill);
          color: var(--ok); }
.c-done svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
              stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- depth (CHANGE 2 §2): three levels, the same on every screen --------- */
/* LEVEL 1, A CARD: the blue-tinted fill, a 1 px rim, lifted off the page --
   the shared cards here and the older screens' (You's, Profile's, the
   workout's, every `.card`); Today's and Programme's own in their sheets. */
.c-card, .c-hero, .c-list.boxed, .card, .pgcard, .pfcard, .runcard,
.runnextcard {
  background: var(--card-fill); box-shadow: var(--card-lift); }
/* ⚠ NEVER CARD ON CARD: a card inside a card, a sheet or a popover is flat
   -- the outer one is the lift. */
:is(.c-card, .c-hero, .c-list.boxed, .card, .pgcard, .pfcard, .runcard,
.runnextcard, .sheet, .pop)
  :is(.c-card, .c-hero, .c-list.boxed, .card, .pgcard, .pfcard, .runcard,
.runnextcard) { box-shadow: none; }

/* ---- ONE FOCAL CARD A SCREEN (CHANGE 2 §3) ------------------------------ */
/* The screen's most important card, raised one level and glowing faintly in
   ITS OWN colour, `--focal`, set on the element (else the accent). At most
   one a screen: `calmCheck` says so. */
:where(.c-focal) { --focal: var(--accent); }
/* The workout's set being done: its session's colour (today.css's
   `tp-c-*` sets `--sc` on it). */
.runcard.c-focal { --focal: var(--sc, var(--accent)); }
.c-focal {
  background: radial-gradient(120% 90% at 100% 0%,
                color-mix(in srgb, var(--focal) 22%, transparent) 0%,
                color-mix(in srgb, var(--focal) 4%, transparent) 45%,
                transparent 75%), var(--raised-fill);
  border: 1px solid color-mix(in srgb, var(--focal) 45%, transparent);
  box-shadow: var(--raised-lift),
              0 0 40px color-mix(in srgb, var(--focal) 10%, transparent); }

/* ---- motion (CHANGE 2 §7) ------------------------------------------------ */
/* CARDS RISE IN when a screen ARRIVES -- a new view key, never a redraw of
   the same screen (the kernel redraws often: sheets, ticks). `calmArrive`
   adds `c-arrive` to the page and takes it off after 600 ms; the first six
   parts stagger 40 ms apart, the rest at 200 ms. */
@keyframes c-rise { from { opacity: 0; transform: translateY(8px); }
                    to { opacity: 1; transform: none; } }
.c-arrive > * { animation: c-rise 260ms cubic-bezier(.2, .8, .2, 1) 200ms both; }
.c-arrive > :nth-child(1) { animation-delay: 0ms; }
.c-arrive > :nth-child(2) { animation-delay: 40ms; }
.c-arrive > :nth-child(3) { animation-delay: 80ms; }
.c-arrive > :nth-child(4) { animation-delay: 120ms; }
.c-arrive > :nth-child(5) { animation-delay: 160ms; }
/* A PRESS: a tappable card or row gives a little under the finger. The blue
   button keeps its own press. */
.c-card[data-tap], button.c-row[data-tap] { transition: transform 120ms ease; }
.c-card[data-tap]:active, button.c-row[data-tap]:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .c-bar > i, .c-choice.toggle .c-chi::after { transition: none; }
  /* No rise and no press. */
  .c-arrive > * { animation: none; }
  .c-card[data-tap]:active, button.c-row[data-tap]:active { transform: none; }
}

/* ---- the first run's parts (onboarding v1, 10 Oct, section 3) ----------- */
/* calm.js's `onb*` and `savePop`; screens/start.js draws with them, and
   styles/start.css adds what only its screens need. Sizes are the handoff's
   references (`reference/Onb4_*.html`). */
.c-ontop { display: flex; align-items: center; justify-content: space-between;
           min-height: 44px; }
button.c-onback, .c-onslot { flex: none; width: 44px; height: 44px;
                             min-height: 0; margin: 0 0 0 -10px; padding: 11px;
                             border: 0; border-radius: 50%; background: none;
                             color: var(--ink); }
.c-onslot { margin: 0; }
button.c-onback svg { width: 22px; height: 22px; fill: none;
                      stroke: currentColor; stroke-width: 2.2;
                      stroke-linecap: round; stroke-linejoin: round; }
.c-onlogo { display: block; width: 26px; height: auto; }

.c-unlock { padding-top: 12px; }
.c-unhead { display: flex; justify-content: space-between; gap: 12px;
            margin-bottom: 8px; color: var(--quiet); font-size: 12px;
            font-weight: 700; font-variant-numeric: tabular-nums; }
.c-unrow { display: flex; gap: 6px; }
.c-unseg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
           gap: 6px; }
.c-unseg > i { display: block; height: 6px; border-radius: 3px;
               background: var(--unlock-off); }
.c-unseg.on > i { background: var(--unlock); }
.c-unseg.just > i { animation: c-unglow 1.2s ease-out both; }
@keyframes c-unglow { 0% { box-shadow: 0 0 0 rgba(99, 210, 154, 0); }
                      25% { box-shadow: 0 0 14px rgba(99, 210, 154, .85); }
                      100% { box-shadow: 0 0 6px rgba(99, 210, 154, .35); } }
.c-unlab { display: flex; align-items: flex-start; gap: 4px;
           color: var(--quiet); font-size: 11px; font-weight: 700;
           line-height: 1.15; }
.c-unseg.on .c-unlab { color: var(--unlock-text); }
.c-unico { flex: none; display: inline-flex; width: 11px; height: 11px;
           margin-top: 1px; }
.c-unico svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
               stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.c-unseg.on .c-unico { color: var(--unlock); }

.c-onhead { padding-top: 22px; }
.c-oneye { margin: 0; color: var(--accent-soft); font-size: 12px;
           font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.c-oneye.ok { color: var(--unlock-text); }
.c-onstem { margin: 8px 0 0; font-size: 27px; font-weight: 800;
            letter-spacing: -.015em; line-height: 1.15; overflow-wrap: anywhere; }
.c-onsub { margin: 8px 0 0; color: var(--c-ink-2); font-size: 15px;
           line-height: 1.45; }
.c-onnote { margin: 0; color: var(--quiet); font-size: 13px; text-align: center; }

/* A register label: its head bold, its detail quiet, the dash hidden. */
.c-osep { display: none; }
.c-od { display: block; margin-top: 2px; color: var(--quiet); font-size: 13px;
        font-weight: 400; line-height: 1.35; }

button.c-ochoice { display: flex; align-items: center; gap: 12px; width: 100%;
                   min-height: 56px; margin: 0; padding: 12px 14px;
                   border: 1px solid var(--unlock-off); border-radius: 14px;
                   background: rgba(255, 255, 255, .025); color: var(--ink);
                   text-align: left; }
button.c-ochoice.compact { min-height: 48px; padding: 8px 14px; }
button.c-ochoice.on { background: rgba(47, 138, 224, .14);
                      border: 1.5px solid var(--accent-bright); }
button.c-ochoice:active { transform: scale(.985); }
.c-ochm { flex: 1 1 auto; min-width: 0; }
.c-ochm .c-oh { display: block; font-size: 15.5px; font-weight: 700;
                line-height: 1.3; }
.c-ori { flex: none; position: relative; width: 22px; height: 22px;
         border-radius: 50%; border: 2px solid #3d5068; }
.c-ochoice.on .c-ori { border-color: var(--accent-bright); }
.c-ochoice.on .c-ori::after { content: ""; position: absolute; inset: 4px;
                              border-radius: 50%;
                              background: var(--accent-bright); }

/* The tick row (onboarding v2's checklists): a square box, ticked when on. */
.c-obox { flex: none; display: inline-flex; width: 24px; height: 24px;
          padding: 3px; border-radius: 7px; border: 2px solid #3d5068; }
.c-ochoice.on .c-obox { border: 0; padding: 4.5px;
                        background: var(--accent-bright); color: #fff; }
.c-obox svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
              stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
button.c-ochoice:disabled, button.c-ochip:disabled { opacity: .75; }
button.c-ochoice:disabled:active { transform: none; }

.c-ochips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
button.c-ochip { display: flex; align-items: center; justify-content: center;
                 min-height: 48px; margin: 0; padding: 6px 8px;
                 border: 1px solid var(--unlock-off); border-radius: 12px;
                 background: rgba(255, 255, 255, .025); color: var(--c-ink-2);
                 font-size: 14.5px; font-weight: 700; text-align: center; }
button.c-ochip.on { background: rgba(47, 138, 224, .16);
                    border: 1.5px solid var(--accent-bright); color: #fff; }

button.c-oanswered { display: flex; align-items: center; gap: 10px;
                     width: 100%; min-height: 0; margin: 0; padding: 12px 14px;
                     border: 1px solid var(--unlock-off); border-radius: 14px;
                     background: var(--card-fill); color: var(--ink);
                     text-align: left; }
.c-oatick { flex: none; display: inline-flex; width: 16px; height: 16px;
            color: var(--unlock); }
.c-oatick svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
                stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-oam { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
         gap: 2px; }
.c-oas { color: var(--quiet); font-size: 12.5px; line-height: 1.3; }
.c-oav .c-oh { font-size: 15px; font-weight: 700; }
.c-oav .c-od { display: none; }
.c-oach { flex: none; color: var(--accent-soft); font-size: 13px;
          font-weight: 700; }

button.c-orow { display: flex; align-items: center; gap: 10px; width: 100%;
                min-height: 56px; margin: 0; padding: 10px 0; border: 0;
                border-radius: 0; background: none; color: var(--ink);
                text-align: left; }
button.c-orow + button.c-orow { border-top: 1px solid var(--grid); }
button.c-orow:active { transform: none; opacity: .7; }
.c-orm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
         gap: 2px; }
.c-orl { color: var(--quiet); font-size: 13px; line-height: 1.3; }
.c-orv { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.c-orv.accent { color: var(--accent-soft); font-weight: 600; }
.c-ors { color: var(--quiet); font-size: 12.5px; line-height: 1.35; }

.c-shtitle { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; }
.c-wpane { position: relative; height: 220px; }
.c-wband { position: absolute; left: 0; right: 0; top: 88px; height: 44px;
           border-radius: 12px; background: rgba(47, 138, 224, .14);
           border: 1px solid rgba(47, 138, 224, .4); pointer-events: none; }
.c-wheel { position: relative; height: 100%; overflow-y: auto;
           scroll-snap-type: y mandatory; scrollbar-width: none;
           -webkit-overflow-scrolling: touch; }
.c-wheel::-webkit-scrollbar { display: none; }
.c-wheel:focus { outline: none; }
.c-wlist { padding: 88px 0; }
.c-wv { height: 44px; display: flex; align-items: center; justify-content: center;
        scroll-snap-align: center; font-size: 20px; font-weight: 500;
        opacity: .25; font-variant-numeric: tabular-nums; cursor: pointer; }
.c-wv.near { opacity: .5; }
.c-wv.on { opacity: 1; font-size: 24px; font-weight: 800; }
.c-wu { display: none; }
.c-wv.on .c-wu { display: inline; white-space: pre; }

.c-ofield { display: flex; flex-direction: column; gap: 6px; }
.c-ofl { color: var(--c-ink-2); font-size: 13px; font-weight: 700; }
input.c-ofbox, button.c-ofbox {
  display: flex; align-items: center; width: 100%; min-height: 54px; margin: 0;
  padding: 0 14px; border: 1.5px solid var(--unlock-off); border-radius: 14px;
  background: var(--sunk); color: var(--ink); font-size: 17px;
  font-weight: 600; text-align: left; }
input.c-ofbox:focus { outline: none; border-color: var(--accent-bright); }
button.c-ofbox.empty { color: #5d6778; font-weight: 400; }
.c-ofield.bad .c-ofbox { border-color: #e5484d; }
.c-ofe { color: #ff8f8f; font-size: 13px; line-height: 1.35; }

.c-calhead { display: flex; align-items: center; justify-content: space-between; }
.c-calname { font-size: 16px; font-weight: 800; }
button.c-calnav { flex: none; width: 44px; height: 44px; min-height: 0;
                  margin: 0; padding: 11px; border: 0; border-radius: 50%;
                  background: var(--panel); color: var(--ink); }
button.c-calnav.next svg { transform: rotate(180deg); }
button.c-calnav svg { width: 100%; height: 100%; fill: none;
                      stroke: currentColor; stroke-width: 2.2;
                      stroke-linecap: round; stroke-linejoin: round; }
.c-calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
             text-align: center; }
.c-calwd { padding: 4px 0; color: var(--quiet); font-size: 12px;
           font-weight: 800; }
button.c-calday { height: 40px; min-height: 0; margin: 0; padding: 0;
                  border: 0; border-radius: 50%; background: none;
                  color: var(--ink); font-size: 15px; font-weight: 600;
                  text-align: center; font-variant-numeric: tabular-nums; }
button.c-calday.on { background: var(--comp); color: #241a05;
                     font-weight: 800; }
button.c-calday:disabled { opacity: .3; }

.c-otoast { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
            border-radius: 12px; background: rgba(99, 210, 154, .10);
            border: 1px solid rgba(99, 210, 154, .35);
            color: var(--unlock-text); font-size: 13.5px; font-weight: 700;
            animation: c-otin 320ms ease-out both; }
@keyframes c-otin { from { opacity: 0; } to { opacity: 1; } }
.c-otick { flex: none; display: inline-flex; width: 15px; height: 15px;
           color: var(--unlock); }
.c-otick svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
               stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.c-obuild { display: flex; flex-direction: column; gap: 4px;
            padding: 14px 18px; border-radius: 24px;
            border: 1px solid var(--unlock-off);
            background: var(--card-fill); box-shadow: var(--card-lift); }
.c-obl { display: flex; align-items: center; gap: 14px; min-height: 44px;
         color: var(--quiet); font-size: 16px; font-weight: 600; }
.c-obl.done { color: var(--c-ink-2); }
.c-obl.now { color: var(--ink); font-weight: 800; }
.c-obm { flex: none; position: relative; display: inline-flex;
         align-items: center; justify-content: center; width: 26px;
         height: 26px; border-radius: 50%;
         border: 2px solid var(--unlock-off); }
.c-obl.done .c-obm { border: 0; background: var(--unlock); color: #08240f;
                     padding: 5px; }
.c-obm svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
             stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-obl.now .c-obm { border: 3px solid var(--unlock-off);
                    border-top-color: var(--accent-soft);
                    animation: c-obspin .9s linear infinite; }
@keyframes c-obspin { to { transform: rotate(360deg); } }
.c-obm i { display: none; }

.c-ocoming { display: flex; flex-direction: column; gap: 8px; min-height: 138px;
             padding: 14px; border-radius: 18px; border: 1px solid var(--unlock-off);
             background: repeating-linear-gradient(135deg,
               rgba(255, 255, 255, .015) 0 8px, rgba(255, 255, 255, 0) 8px 16px),
               #0b1320; }
.c-ocet { display: flex; justify-content: space-between; align-items: center; }
.c-oceye { color: var(--oc, var(--accent-soft)); font-size: 10.5px;
           font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.c-ocl { display: inline-flex; width: 14px; height: 14px; color: var(--quiet); }
.c-ocl svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
             stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.c-octitle { font-size: 16px; font-weight: 800; }
.c-ocline { color: var(--c-ink-2); font-size: 13px; line-height: 1.4; }
.c-octag { margin-top: auto; align-self: flex-start; padding: 2px 8px;
           border-radius: 8px; background: rgba(255, 255, 255, .05);
           color: var(--quiet); font-size: 11px; font-weight: 800; }

/* THE SAVE CARD (section 4, `Onb5_T30`): under the status bar, 12 px from
   each side, frosted level 2; nothing behind it dimmed. It slides down
   12 px and fades in; it leaves sliding up. */
.c-svpop { position: fixed; z-index: 90; left: 12px; right: 12px;
           top: calc(env(safe-area-inset-top) + 12px);
           max-width: calc(30rem - 8px); margin: 0 auto;
           padding: 14px 14px 12px; border-radius: 20px;
           background: linear-gradient(160deg, rgba(24, 42, 64, .96),
                                       rgba(15, 26, 41, .96));
           -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
           border: 1px solid rgba(140, 196, 245, .28);
           box-shadow: var(--raised-lift);
           transition: transform 240ms ease, opacity 240ms ease; }
.c-svpop.in, .c-svpop.out { opacity: 0; transform: translateY(-12px); }
.c-svpop.ok { border-color: rgba(99, 210, 154, .45); }
.c-svtop { display: flex; align-items: flex-start; gap: 12px; }
.c-svico { flex: none; display: inline-flex; width: 36px; height: 36px;
           padding: 9px; border-radius: 50%; background: rgba(47, 138, 224, .18);
           color: var(--accent-soft); }
.c-svpop.ok .c-svico { background: var(--unlock); color: #08240f; padding: 8px; }
.c-svico svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
               stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.c-svm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
         gap: 3px; }
.c-svm b { font-size: 15.5px; font-weight: 800; }
.c-svm span { color: var(--c-ink-2); font-size: 13.5px; line-height: 1.4; }
button.c-svx { flex: none; width: 32px; height: 32px; min-height: 0;
               margin: -6px -6px 0 0; padding: 8px; border: 0;
               border-radius: 50%; background: none; color: var(--quiet); }
button.c-svx svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
                   stroke-width: 2.4; stroke-linecap: round; }
.c-svbtns { display: flex; gap: 8px; margin-top: 12px; padding-left: 48px; }
.c-svbtns button { flex: 1 1 0; min-height: 44px; margin: 0; padding: 0 10px;
                   border-radius: 12px; font-size: 15px; font-weight: 700;
                   text-align: center; }
button.c-svsave { border: 0; background: var(--accent-fill);
                  color: var(--accent-ink); }
button.c-svlater { border: 1px solid var(--unlock-off); background: none;
                   color: var(--c-ink-2); }

@media (prefers-reduced-motion: reduce) {
  /* No glow (the segment is simply green), no fade, no spinner -- a still
     dot on the line in progress -- and the save card fades only. */
  .c-unseg.just > i, .c-otoast { animation: none; }
  .c-obl.now .c-obm { animation: none; border: 2px solid var(--accent-soft); }
  .c-obl.now .c-obm i { display: block; width: 8px; height: 8px;
                        border-radius: 50%; background: var(--accent-soft); }
  .c-svpop, .c-svpop.in, .c-svpop.out { transform: none; }
}

/* 2026-11-03 THE EXERCISE PICTURES (the in-session handoff v1 §3; built by
   kernel.js's `pxPanel`, `pxSmall`, `pxThumb`). The pictures' own colours
   are CSS variables (the pictures branch's defaults below); `--kit` is set
   per panel to the session's colour. */
.px-panel, .px-small, .px-thumb {
  --fig: #e6ecf3; --fig-far: #8394aa; --fig-gap: #0e1826;
  --kit-soft: #3a4d64; --line: #33475e;
}
.px-panel {
  padding: 14px 0 12px; border-radius: 22px;
  background: radial-gradient(120% 100% at 50% 100%, #14263b 0%,
                              #0c1521 70%);
  border: 1px solid #1f3147;
}
.px-fig svg { display: block; width: 100%; height: 170px; }
.px-row { display: flex; align-items: center; justify-content: space-between;
          gap: 10px; padding: 0 12px 0 16px; margin-top: 4px; }
.px-pose { font-size: 12.5px; font-weight: 700; color: #848e9d;
           min-width: 0; overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; }
button.px-demo {
  /* min-height 0: the design's 34 px pill -- WAS 48 px under the app's
     button minimum (calm.css), 14 px the small phone's DO card needs */
  width: auto; margin: 0; height: 34px; min-height: 0;
  padding: 0 13px 0 8px; flex: none;
  border-radius: 17px; background: #16263a; border: 1px solid #2c4058;
  display: flex; align-items: center; gap: 6px; font-size: 13.5px;
  font-weight: 800; color: #eef1f5; box-shadow: none;
}
.px-play { width: 22px; height: 22px; border-radius: 11px;
           background: #eef1f5; color: #0c1521; display: flex;
           align-items: center; justify-content: center; }
.px-play svg { width: 14px; height: 14px; }
.px-small svg { display: block; width: 100%; height: 100%; }
.px-thumb {
  width: 52px; height: 52px; flex: none; border-radius: 12px;
  background: #0c1521;
  border: 1px solid #1f3147; display: inline-flex; align-items: center;
  justify-content: center; overflow: hidden;
}
.px-thumb svg { display: block; width: 100%; height: 100%; }
.px-thumb.none svg { width: 24px; height: 24px; fill: none;
                     stroke: #848e9d; stroke-width: 1.8;
                     stroke-linecap: round; }
/* a small phone: 116 px -- 2026-11-04 (the owner, the pictures v3
   handoff's "+20 px for the strip"): WAS 96 px, where 27 lying and
   airborne pictures (scale below 0.8) drew too small to read */
@media (max-height: 700px) {
  .px-fig svg { height: 116px; }
  .px-thumb { width: 46px; height: 46px; border-radius: 12px; }
}