/* styles/today.css -- Today, its check-in pop-up and Just finished (the
   Today & Programme handoff §2-4, 2026-10-08; references in
   `docs design/today-programme/reference/`). Every size is the reference's;
   colours are the app's tokens, or the reference's own literal where the
   tokens have none (the road's blues, the secondary and faint greys).
   CHANGE 2 (8 Oct, `reference/surface_today.html`): the strip and Your day
   are cards, the hero the screen's one focal card, the meta quiet.
   2026-10-23 (the owner's Today screen, `docs design/today-screen/`): the
   header's event chip, the list's rows, the Now line, the next card --
   every size the references'; WAS the road strip and Your day. */

/* ---- a session's colour: one colour a category across the app -- the
   kit's quality table (`--q-*`, kernel.js `T_QUALITIES`; Td2 §2.1, Batch 6:
   the HANDOFF's call 6 "The colour tokens must change to table 2.1").
   WAS the Schedule's old category colours, each with an rgb triple for
   its glows (now `color-mix` over `--sc`). Tennis keeps its blue (outlined only);
   a competition is the reserved gold. ---------------------------------- */
.tp-c-SPEED { --sc: var(--q-speed); }
.tp-c-CONDITIONING { --sc: var(--q-court-endurance); }
.tp-c-EXPLOSIVENESS { --sc: var(--q-power); }
.tp-c-DURABILITY { --sc: var(--q-durability); }
.tp-c-MOBILITY { --sc: var(--q-mobility); }
.tp-c-TENNIS { --sc: #2196f3; }
.tp-c-COMP { --sc: var(--gold); }

/* ---- the page ------------------------------------------------------------ */
body:has(#app .tp-today) h1 { margin-bottom: 14px; }
body:has(#app .tp-today) h1 .brand { width: 26px; }
/* THE HEADER (the Today screen §2, 2026-10-23): the date and "Today" on
   the left, the event chip on the right, their feet on one line. */
.tp-head { display: flex; justify-content: space-between; align-items: flex-end;
           gap: 10px; }
.tp-headt { min-width: 0; flex: none; }
.tp-date { font-size: 15px; font-weight: 600; color: var(--dim); }
.tp-title { margin: 0; font-size: 40px; font-weight: 800;
            letter-spacing: -0.02em; line-height: 1.1; }
/* The event chip: gold rim and tint, the trophy, the name (cut to fit by
   the page -- and, should a phone be narrower still, by its ellipsis), the
   days in gold, a quiet chevron. */
button.tp-evchip { display: inline-flex; align-items: center; gap: 7px;
  min-width: 0; flex: 0 1 auto; width: auto; height: 40px; min-height: 0;
  margin: 0 0 2px; padding: 0 10px 0 12px; border-radius: 20px;
  border: 1.5px solid color-mix(in srgb, var(--gold) 50%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  color: var(--ink); font-size: 13.5px; font-weight: 800;
  white-space: nowrap; }
button.tp-evchip:active { transform: scale(.97); }
.tp-evi { display: flex; flex: none; width: 15px; height: 15px; }
.tp-evi svg { width: 15px; height: 15px; fill: none; stroke: var(--gold);
              stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-evn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tp-evd { flex: none; color: var(--gold); }
button.tp-evchip .lchev { flex: none; border-color: var(--quiet); }

/* ---- the next card (the Today screen §2; WAS Up next) -------------------- */
/* The default colour, at no weight (`:where`), so a session's class wins. */
:where(.tp-hero, .tp-jf) { --sc: #2f8ae0; }
:where(.tp-row) { --sc: #3a404b; }
/* ⚠ THE NEXT CARD IS THE SCREEN'S ONE FOCAL CARD (CHANGE 2 §3), in every
   state: raised, rimmed and glowing in `--focal` (calm.css's `.c-focal`)
   -- its session's colour ("Session colour shows only on the row circle
   and the next card's glow and border"), paused the accent, a rest day and
   done green. */
.tp-hero { --focal: var(--sc); position: relative; overflow: hidden;
           border-radius: 24px; padding: 20px 20px 4px; display: flex;
           flex-direction: column; gap: 14px; }
.tp-hero.tp-state { padding-bottom: 20px; }
.tp-hero.paused, .tp-hero.tp-state { --focal: var(--accent); }
.tp-hero.tp-rest, .tp-hero.tp-done { --focal: var(--ok); }
/* its glow, the reference's weight, over the raised fill */
.tp-hero.c-focal:not(.tp-state) {
  background: radial-gradient(120% 90% at 100% 0%,
                color-mix(in srgb, var(--focal) 20%, transparent) 0%,
                color-mix(in srgb, var(--focal) 4%, transparent) 45%,
                transparent 75%), var(--raised-fill); }
.tp-hero > * { margin: 0; }
.tp-eye { display: flex; align-items: center; gap: 8px; font-size: 12px;
          font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
          color: color-mix(in srgb, var(--sc) 45%, #fff); }
.tp-eye i { flex: none; width: 8px; height: 8px; border-radius: 4px;
            background: var(--sc);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 25%, transparent); }
/* the kicker: the circle filled, the time in the card's colour, then "IN
   1 H 20 MIN" / "NOW" in quiet capitals */
.tp-eye.tp-kick { gap: 10px; text-transform: none; letter-spacing: 0; }
.tp-kt { font-size: 18px; font-weight: 800;
         color: color-mix(in srgb, var(--sc) 55%, #fff);
         font-variant-numeric: tabular-nums; }
.tp-kin { font-size: 13px; font-weight: 800; letter-spacing: .12em;
          text-transform: uppercase; color: var(--quiet); }
.tp-sample { margin-left: auto; padding: 3px 8px; border-radius: 999px;
             background: rgba(255, 255, 255, .08); color: #c3c8d1;
             font-size: 11px; font-weight: 700; letter-spacing: .04em;
             align-self: flex-start; text-transform: none; }
.tp-name { font-size: 40px; font-weight: 800; letter-spacing: -0.02em;
           line-height: 1.05; overflow-wrap: anywhere; }
.tp-line { font-size: 16.5px; color: #c3c8d1; margin-top: 8px; }
.tp-hero > .tp-line { margin-top: -6px; }
.tp-coach { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
/* 2026-10-22: the court prep folded into the session -- "Warm up first:
   Tennis preparation, 12 min" -- a quiet strip in the Mobility green. */
.tp-warm { padding: 10px 12px; border-radius: 14px; font-size: 15px;
           font-weight: 600; line-height: 1.35; color: var(--ink);
           background: color-mix(in srgb, var(--ok) 10%, transparent);
           border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent); }
button.c-btn.tp-start, button.tp-btnlook {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 62px; height: 62px; margin: 4px 0 0; padding: 0 20px;
  border: 0; border-radius: 18px; background: var(--accent-fill);
  color: var(--accent-ink); font-size: 17px; font-weight: 800;
  box-shadow: 0 10px 24px rgba(20, 120, 204, .35); }
.tp-play svg { width: 18px; height: 18px; fill: #fff; stroke: none; }
/* What's in it: the card's foot, the whole width a tap */
button.c-link.tp-whats { align-self: stretch; justify-content: center;
                         min-height: 50px; margin-top: -14px;
                         font-size: 15.5px; font-weight: 700;
                         color: var(--accent-soft); }
.tp-foot { display: flex; justify-content: space-between; gap: 12px; }
.tp-ask p { margin: 0 0 4px; font-size: 15px; line-height: 1.45;
            color: #c3c8d1; }
.tp-statet { font-size: 26px; font-weight: 800; letter-spacing: -0.01em;
             line-height: 1.15; }
.tp-state .tp-line { margin-top: -4px; }
.tp-moon { width: 44px; height: 44px; border-radius: 22px;
           background: rgba(99, 210, 154, .12); display: flex;
           align-items: center; justify-content: center; }
.tp-moon svg { width: 22px; height: 22px; fill: none; stroke: var(--ok);
               stroke-width: 2; stroke-linejoin: round; }

/* ---- the list (the Today screen §2) ------------------------------------- */
/* "Each row: circle, time, name, length" -- a quiet card a row, 16 px
   apart; the next card in its place among them. */
.tp-list { display: flex; flex-direction: column; gap: 16px; }
.tp-row { display: flex; align-items: center; gap: 14px; width: 100%;
          min-height: 76px; margin: 0; padding: 8px 18px;
          box-sizing: border-box; border-radius: 18px;
          background: var(--row); border: 1px solid var(--grid);
          color: var(--ink); text-align: left; font: inherit; }
button.tp-row { transition: transform 120ms ease; }
button.tp-row:active { transform: scale(.98); }
/* the circle, in the session's colour -- its only place on a row */
.tp-circ { flex: none; width: 28px; height: 28px; border-radius: 14px;
           box-sizing: border-box; display: flex; align-items: center;
           justify-content: center;
           border: 2.5px solid color-mix(in srgb, var(--sc) 75%, var(--row)); }
.tp-circ.on { border-color: var(--sc); }
.tp-circ.on::after { content: ""; width: 12px; height: 12px;
                     border-radius: 6px; background: var(--sc); }
.tp-tick { flex: none; width: 28px; height: 28px; border-radius: 14px;
           background: var(--ok); display: flex; align-items: center;
           justify-content: center; }
.tp-tick svg { width: 16px; height: 16px; fill: none; stroke: #06150e;
               stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-ball { flex: none; width: 28px; height: 28px; display: flex;
           align-items: center; justify-content: center; color: var(--sc); }
.tp-ball svg { width: 26px; height: 26px; fill: none; stroke: currentColor;
               stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-rm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
         gap: 2px; }
/* the time and the name: a long name wraps under itself rather than be
   cut ("Strength & power" beside "1 h 15 min" and a lock at 375 px) */
.tp-rt { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.tp-rtime { font-weight: 700; color: #c3c8d1; margin-right: 4px;
            white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-rn { font-weight: 800; }
.tp-rs { font-size: 14px; font-weight: 600; color: var(--quiet); }
.tp-rs.go { font-weight: 700; color: var(--accent-soft); }
.tp-rl { flex: none; font-size: 15px; color: var(--quiet); white-space: nowrap; }
/* done: the green tick, the words quieter */
.tp-row.done .tp-rtime, .tp-row.done .tp-rn { color: var(--quiet); }
.tp-row.done .tp-rn { font-weight: 700; }
/* 2026-10-18 (C8): a session off today; and a practice not played */
.tp-row.off { opacity: .55; }
.tp-row.skip .tp-rn, .tp-row.skip .tp-rtime { color: var(--quiet); }
/* The Now line: "a thin blue line with the time". */
.tp-nowl { display: flex; align-items: center; gap: 8px; height: 16px;
           margin: -2px 0; }
.tp-nowl i { flex: none; width: 8px; height: 8px; border-radius: 4px;
             background: var(--accent); }
.tp-nowl b { font-size: 13px; font-weight: 800; color: var(--accent);
             font-variant-numeric: tabular-nums; }
.tp-nowl span { flex: 1 1 auto; height: 1.5px;
                background: linear-gradient(90deg, var(--accent),
                                            transparent); }

/* ---- special days (the Today screen §2: TR5, TR6) ------------------------ */
/* TR6: the rest day's card -- its moon and "REST DAY" in the rest green,
   "Rest counts" the next card's size, why under it; nothing to tap. */
.tp-restk { color: color-mix(in srgb, var(--ok) 70%, #fff); }
.tp-restm { display: flex; flex: none; width: 18px; height: 18px; }
.tp-restm svg { width: 18px; height: 18px; fill: none; stroke: var(--ok);
                stroke-width: 2; stroke-linejoin: round; }
.tp-restday .tp-line { margin-top: -4px; line-height: 1.45; }
/* TR5: "All done today. …" -- one quiet line after the ticks, a leaf;
   and (2026-10-24) TR7's day reason line, the same look */
.tp-alldone, .tp-dayline { display: flex; gap: 10px; align-items: flex-start;
              margin: -4px 4px; font-size: 15px; line-height: 1.45;
              color: #c3c8d1; }
/* TR7's match row: its own label on the right may be long -- it gives way */
.tp-row.tp-match .tp-rl { min-width: 0; max-width: 45%; overflow: hidden;
                          text-overflow: ellipsis; }
.tp-alli { flex: none; display: flex; width: 16px; height: 16px;
           margin-top: 3px; }
.tp-alli svg { width: 16px; height: 16px; fill: none;
               stroke: var(--accent-soft); stroke-width: 2.2;
               stroke-linecap: round; stroke-linejoin: round; }

/* ---- tomorrow, below the line (the Today screen §2) ---------------------- */
/* "A 1 px separator line", then one "Tomorrow" card: the calendar glyph,
   "Tomorrow", the date in quiet capitals; a row each, hairlines between. */
.tp-sep { height: 1px; margin: -2px 4px; background: #2a3a4e; }
.tp-tmrw { padding: 16px 18px 8px; border-radius: 22px;
           background: var(--card-fill); border: 1px solid var(--line);
           box-shadow: var(--card-lift); }
.tp-tmh { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }
.tp-tmi { flex: none; display: flex; width: 18px; height: 18px;
          color: var(--accent-soft); }
.tp-tmi svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
              stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-tmh h3 { flex: 1 1 auto; margin: 0; font-size: 18px; font-weight: 800; }
.tp-tmd { flex: none; font-size: 15px; font-weight: 700; color: var(--quiet);
          text-transform: uppercase; }
.tp-trow { display: flex; align-items: center; gap: 12px; width: 100%;
           min-height: 56px; margin: 0; padding: 0; border: 0;
           border-top: 1px solid #1e2c3e; border-radius: 0; background: none;
           color: var(--ink); text-align: left; font: inherit; }
button.tp-trow:active { opacity: .7; }
.tp-trow .tp-circ { width: 22px; height: 22px; border-radius: 11px;
                    margin: 0 1px; }
.tp-trow .tp-ball { width: 24px; height: 24px; }
.tp-trow .tp-ball svg { width: 22px; height: 22px; }
.tp-trow .tp-rt { flex: 1 1 auto; min-width: 0; font-size: 16px; }
/* a practice's row keeps the chevron's room, so its length lines up */
.tp-nochev { flex: none; width: .5rem; margin-right: .3rem; }
.tp-trow .lchev { border-color: var(--quiet); }
.tp-tmrest { margin: 0; padding: 14px 0 10px; border-top: 1px solid #1e2c3e;
             font-size: 16px; font-weight: 600; color: #c3c8d1; }

/* ---- the check-in lock (the Today screen §2; TR1, TR1b, TR1c) ------------ */
/* The check-in as the next card: the accent's ring and kicker, no What's
   in it under its button. */
.tp-hero.tp-ck { padding-bottom: 22px; }
.tp-ck .tp-kt { color: var(--accent); }
.tp-ckline { margin: -4px 0 0; font-size: 16.5px; line-height: 1.4;
             color: #c3c8d1; }
/* a locked row: its lock after its length */
.tp-lock { flex: none; display: flex; width: 16px; height: 16px;
           margin-left: -4px; color: var(--quiet); }
.tp-lock svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
               stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* TR1c: "Check in first", centred -- the lock in a round tile, the line,
   the blue Check in and a quiet Not now under it */
.tp-locksheet .sheet.c-sheet { text-align: center; align-items: stretch; }
.tp-locki { align-self: center; width: 48px; height: 48px; border-radius: 24px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(140, 196, 245, .10); color: var(--accent-soft); }
.tp-locki svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
                stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-locksheet .c-sub { font-size: 15px; }
.tp-locksheet button.c-quiet { align-self: center; color: var(--accent-soft);
                               font-weight: 700; }

/* ---- the week's row (asked 23 Oct, the handoff's flag 3: "A row under
   Tomorrow") -- one quiet row below the Tomorrow card, the warm-up
   routines row's look: its glyph in a tile, its eyebrow, its title, a ›;
   and its words in a sheet. -------------------------------------------- */
button.tp-weekrow { display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; margin: 0; padding: 10px 14px;
  box-sizing: border-box; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); color: var(--ink); text-align: left;
  font: inherit; }
button.tp-weekrow:active { transform: scale(.98); }
.tp-wki { flex: none; width: 32px; height: 32px; border-radius: 10px;
          display: flex; align-items: center; justify-content: center;
          background: rgba(140, 196, 245, .10); }
.tp-wki svg { width: 17px; height: 17px; fill: none;
              stroke: var(--accent-soft); stroke-width: 2.2;
              stroke-linecap: round; stroke-linejoin: round; }
.tp-wkm { flex: 1 1 auto; min-width: 0; display: flex;
          flex-direction: column; gap: 2px; }
.tp-wke { font-size: 11px; font-weight: 800; letter-spacing: .12em;
          text-transform: uppercase; color: var(--quiet); }
.tp-wkt { font-size: 15.5px; font-weight: 800; line-height: 1.25; }
button.tp-weekrow .lchev { flex: none; border-color: var(--quiet); }
.tp-wksh { display: flex; align-items: center; gap: 10px; margin-bottom: -6px; }
.tp-wksl { margin: 0; font-size: 16px; line-height: 1.45; color: #c3c8d1; }

/* ---- the building prompt ------------------------------------------------- */
button.c-row.tp-build { padding: 0 14px; border: 1px solid var(--line);
                        border-radius: 16px; background: var(--panel); }

/* ---- the sheets over the page ------------------------------------------- */
.tp-sheett { margin: 0; font-size: 24px; font-weight: 800;
             letter-spacing: -0.01em; line-height: 1.15; }
.tp-sheet .tp-eye { margin-bottom: -6px; }

/* ---- the check-in pop-up (screens/checkin.js) --------------------------- */
.sheetwrap.ck-wrap { background: rgba(2, 3, 5, .72);
                     -webkit-backdrop-filter: blur(1.5px);
                     backdrop-filter: blur(1.5px); }
.ck-wrap .sheet.c-sheet {
  background: var(--raised-fill); border-top: 1px solid var(--line);
  border-radius: 30px 30px 0 0; gap: 18px;
  padding: 0 20px calc(30px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .5); }
.ck-wrap .c-grab i { background: #3a404b; }
.ck-rise { animation: ckFade .2s ease-out both; }
.ck-rise .sheet { animation: ckUp .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ckFade { from { opacity: 0; } }
@keyframes ckUp { from { transform: translateY(100%); } }
.ck-head { display: flex; align-items: flex-start; justify-content: space-between;
           gap: 12px; }
.ck-label { font-size: 12px; font-weight: 800; letter-spacing: .12em;
            text-transform: uppercase; color: var(--warn); }
.ck-title { margin: 6px 0 0; font-size: 26px; font-weight: 800;
            letter-spacing: -0.01em; line-height: 1.15; }
.ck-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--dim); }
button.c-round.ck-x { width: 36px; height: 36px; padding: 11px;
                      background: var(--panel-2); color: #c3c8d1; }
.ck-item > * { margin: 0; }
.ck-ih { display: flex; justify-content: space-between; align-items: baseline;
         gap: 10px; margin-bottom: 8px; }
.ck-ih h3 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.3; }
.ck-ih span { flex: none; max-width: 45%; text-align: right; font-size: 13px;
              font-weight: 700; color: #5d6370; }
.ck-ih span.on { color: #8cc4f5; }
.ck-about { font-size: 12px; color: var(--dim); margin: -4px 0 8px; }
.ck-scale { display: grid; grid-template-columns: repeat(var(--cols), 1fr);
            gap: 6px; }
button.ck-opt { min-height: 0; height: 48px; width: auto; margin: 0;
                padding: 0 2px; border-radius: 14px; background: var(--panel-2);
                border: 1.5px solid var(--line); color: #c3c8d1;
                font-size: 12px; font-weight: 700; line-height: 1.15;
                letter-spacing: -0.01em; text-align: center; display: flex;
                align-items: center; justify-content: center;
                overflow-wrap: normal; word-break: normal; hyphens: auto; }
button.ck-opt.on { background: #13263a; border-color: #2f8ae0; color: #fff; }
button.ck-opt.half { height: 32px; margin: 0 12%; border-radius: 12px; }
button.ck-done { width: 100%; min-height: 0; height: 56px; margin: 0;
                 border: 0; border-radius: 18px; background: var(--panel-2);
                 color: #5d6370; font-size: 17px; font-weight: 700;
                 text-align: center; }
button.c-btn.ck-go { min-height: 56px; height: 56px; font-size: 17px; }
button.c-quiet.ck-skip { align-self: center; margin-top: -10px;
                         color: var(--dim); font-size: 14px; }
.ck-two { display: flex; justify-content: space-between; margin-top: -8px; }
.ck-two button.c-quiet { color: var(--dim); font-size: 14px; }

/* ---- the morning on 1-3 (2026-10-18, the volume screens' B0-B9) -------- */
.ck-sec > * { margin: 0; }
.ck-sh { display: flex; justify-content: space-between; align-items: baseline;
         gap: 10px; margin-bottom: 10px; }
.ck-sh h3 { margin: 0; font-size: 17px; font-weight: 800; }
.ck-sh span { font-size: 13px; color: var(--quiet); text-align: right; }
.ck-big { display: flex; gap: 8px; }
.ck-big button.ck-bopt, .ck-ropts button.ck-sopt {
  flex: 1; min-width: 0; width: auto; margin: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; background: #111b2a; border: 1px solid #24364d; color: #eef1f5;
  text-align: center; overflow-wrap: normal; word-break: normal; }
.ck-big button.ck-bopt { min-height: 80px; height: auto; border-radius: 16px;
                         padding: 6px; }
.ck-ropts button.ck-sopt { min-height: 0; height: 50px; border-radius: 12px;
                           padding: 0 2px; }
.ck-bopt .n { font-size: 21px; font-weight: 800; }
.ck-bopt .w { font-size: 14px; font-weight: 800; }
.ck-bopt .h { font-size: 11.5px; font-weight: 600; color: var(--quiet); }
.ck-sopt .n { font-size: 17px; font-weight: 800; line-height: 1.1; }
.ck-sopt .w { font-size: 12.5px; font-weight: 700; color: var(--quiet); }
.ck-big button.on, .ck-ropts button.on { background: rgba(47, 138, 224, .18);
                                         border: 1.5px solid #2f8ae0; color: #fff; }
.ck-big button.on .h { color: #8cc4f5; }
.ck-ropts button.on .w { color: #fff; }
.ck-reg { display: flex; gap: 10px; align-items: center; }
.ck-reg + .ck-reg { margin-top: 10px; }
.ck-rl { width: 84px; flex: none; }
.ck-rl b { display: block; font-size: 15.5px; font-weight: 800; }
/* 2026-10-20 (v2 A3, the design reference I3): the ⓘ beside a heading and
   each row's word -- an 18 px glyph in a 44 x 44 tap area that takes no
   room of its own (negative margins); the soreness key, once, above the
   rows; a fatigue button's sentence, its first sentence in bold. */
.ck-sht, .ck-rw { display: flex; align-items: center; gap: 2px; min-width: 0; }
button.ck-why { flex: none; width: 44px; height: 44px; min-height: 0;
                margin: -13px -13px -13px -10px; padding: 13px; border: 0;
                background: none; color: var(--quiet); }
button.ck-why svg { width: 18px; height: 18px; display: block; fill: none;
                    stroke: currentColor; stroke-width: 1.8;
                    stroke-linecap: round; }
.ck-key { margin: 0 0 12px; padding: 9px 12px; border-radius: 14px;
          background: #111b2a; border: 1px solid #24364d; }
.ck-krow { display: flex; gap: 10px; margin: 0; font-size: 13px;
           line-height: 1.35; color: var(--quiet); }
.ck-krow + .ck-krow { margin-top: 4px; }
.ck-krow .n { flex: none; width: 9px; font-weight: 800; color: #8cc4f5; }
.ck-krow b, .ck-bopt .s b { font-weight: 800; color: #eef1f5; }
.ck-bopt .s { font-size: 12.5px; font-weight: 600; line-height: 1.3;
              color: var(--quiet); }
.ck-big button.on .s { color: #8cc4f5; }
.ck-big button.on .s b { color: #fff; }
/* The sheet may rise to 16 px under the top (I3 at 375 x 667: "fits, 19-44
   px above Continue"), and nothing in it is squashed to fit: a phone too
   short for it scrolls the sheet instead. */
.ck-wrap .sheet.c-sheet { max-height: calc(100% - 16px - env(safe-area-inset-top)); }
.ck-wrap .sheet.c-sheet > * { flex: none; }
/* The morning's step, tighter -- the six sentences on screen (I3). */
.ck-wrap .sheet.c-sheet:has(> .ck-sec) {
  gap: 12px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.ck-sec .ck-sh { margin-bottom: 8px; }
.ck-big button.ck-bopt { min-height: 76px; padding: 6px 4px; }
.ck-bopt .n { line-height: 1.1; }
.ck-bopt .s { font-size: 12px; line-height: 1.25; text-wrap: pretty; }
.ck-key { margin-bottom: 10px; padding: 7px 12px; }
.ck-krow { font-size: 12px; line-height: 1.3; }
.ck-krow + .ck-krow { margin-top: 3px; }
.ck-ropts button.ck-sopt { height: 44px; }
.ck-sec .ck-reg + .ck-reg { margin-top: 8px; }
.ck-sh h3, .ck-rw b { line-height: 1.2; }
.ck-sec .ck-rl span { font-size: 10.5px; line-height: 1.2; }
.ck-wrap .sheet.c-sheet:has(> .ck-sec) {
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.ck-rl span { display: block; font-size: 11px; line-height: 1.25;
              color: var(--quiet); margin-top: 1px; }
.ck-ropts { flex: 1; display: flex; gap: 6px; min-width: 0; }
button.c-quiet.ck-ill { align-self: center; margin-top: -8px; color: #8cc4f5;
                        font-size: 16px; font-weight: 700; }
.ck-body { margin: 0; font-size: 16px; line-height: 1.45; color: #c9ccd2; }
.ck-body.dim { color: var(--quiet); font-size: 15px; }
.ck-tile { width: 56px; height: 56px; border-radius: 18px; background: #1d3047;
           display: flex; align-items: center; justify-content: center;
           color: #8cc4f5; }
.ck-tile svg { width: 26px; height: 26px; }
.ck-eye { font-size: 13px; font-weight: 800; letter-spacing: .12em;
          text-transform: uppercase; color: #8cc4f5; margin-bottom: -12px; }
.ck-rtitle { margin: 0; font-size: 28px; font-weight: 800;
             letter-spacing: -0.015em; line-height: 1.15; }
.ck-box { border: 1px solid #24364d; border-radius: 16px; padding: 14px 16px;
          background: rgba(255, 255, 255, .03); display: flex;
          flex-direction: column; gap: 4px; font-size: 15px; color: #c9ccd2; }
.ck-box b { color: #fff; }
.ck-boxh { font-size: 12px; font-weight: 800; letter-spacing: .12em;
           text-transform: uppercase; color: var(--quiet); margin-bottom: 4px; }
.ck-tips { display: flex; flex-direction: column; }
.ck-tip { display: flex; gap: 14px; padding: 14px 0;
          border-top: 1px solid rgba(140, 196, 245, .10); }
.ck-tip > span:last-child { display: flex; flex-direction: column; gap: 2px;
                            font-size: 15px; line-height: 1.4;
                            color: var(--quiet); }
.ck-tip b { font-size: 16px; font-weight: 800; color: #fff; }
.ck-ti { width: 36px; height: 36px; flex: none; border-radius: 10px;
         background: #1d3047; display: flex; align-items: center;
         justify-content: center; color: #8cc4f5; }
.ck-ti svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
             stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck-did { display: flex; align-items: center; gap: 8px; font-size: 14px;
          color: var(--quiet); margin-bottom: -6px; }
.ck-did b { color: #fff; font-weight: 700; }
.ck-tick { width: 20px; height: 20px; border-radius: 10px; background: #1f4a33;
           color: var(--unlock); display: flex; align-items: center;
           justify-content: center; flex: none; }
.ck-tick svg { width: 12px; height: 12px; }
/* H6 (v2 B6b): the height and the bodyweight, two short wheels side by
   side -- three values in sight, so the step fits 375 x 667. */
.ck-hw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ck-hcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ck-hl { font-size: 12px; font-weight: 800; letter-spacing: .08em;
         text-transform: uppercase; color: var(--quiet); text-align: center; }
.ck-hw .c-wpane { height: 132px; }
.ck-hw .c-wband { top: 44px; }
.ck-hw .c-wlist { padding: 44px 0; }

/* ---- just finished ------------------------------------------------------- */
body:has(#app .tp-jf) h1 { display: none; }
.tp-jf { position: fixed; inset: 0; z-index: 65; overflow-y: auto;
         background: radial-gradient(90% 60% at 50% 30%,
                       color-mix(in srgb, var(--sc) 22%, transparent) 0%, transparent 70%),
                     var(--bg);
         padding: calc(24px + env(safe-area-inset-top)) 22px
                  calc(34px + env(safe-area-inset-bottom));
         display: flex; flex-direction: column; align-items: center;
         text-align: center; gap: 18px; }
.tp-jf > * { margin: 0; }
.tp-jftop { align-self: stretch; display: flex; justify-content: space-between;
            align-items: center; }
.tp-jfclock { font-size: 13px; font-weight: 700; color: var(--dim);
              font-variant-numeric: tabular-nums; }
button.c-round.tp-jfx { width: 40px; height: 40px; padding: 12px;
                        border: 1px solid var(--line); }
.tp-ring { position: relative; width: 220px; height: 220px; margin-top: 16px;
           flex: none; }
.tp-ring svg { width: 220px; height: 220px; transform: rotate(-90deg); }
.tp-ring circle { fill: none; stroke-width: 16; stroke-linecap: round;
                  stroke: var(--sc); }
.tp-ring circle.todo { stroke: var(--grid); }
.tp-ring circle.new { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sc) 80%, transparent));
                      animation: tpSeg .6s cubic-bezier(.2, .8, .2, 1) .15s both,
                                 tpGlow .9s ease-out .75s 1; }
@keyframes tpSeg { from { stroke-dasharray: 0 999; } }
@keyframes tpGlow {
  50% { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--sc) 100%, transparent)); } }
.tp-ringin { position: absolute; inset: 0; display: flex; flex-direction: column;
             align-items: center; justify-content: center; }
.tp-ringn { font-size: 48px; font-weight: 800; line-height: 1;
            font-variant-numeric: tabular-nums; }
.tp-ringn span { color: #5d6370; }
.tp-ringsub { font-size: 13px; font-weight: 600; color: var(--dim);
              margin-top: 6px; }
.tp-jfwords { animation: tpUp .25s ease-out .3s both; }
.tp-jflabel { font-size: 13px; font-weight: 800; letter-spacing: .14em;
              text-transform: uppercase;
              color: color-mix(in srgb, var(--sc) 45%, #fff); }
.tp-jfhead { margin: 10px 0 0; font-size: 32px; font-weight: 800;
             letter-spacing: -0.02em; line-height: 1.1; }
.tp-jfline { margin: 10px 0 0; font-size: 16px; line-height: 1.45;
             color: #c3c8d1; }
.tp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tp-chip { height: 32px; padding: 0 12px; border-radius: 16px;
           background: var(--panel); border: 1px solid var(--line);
           font-size: 13px; font-weight: 700; display: flex;
           align-items: center; animation: tpUp .25s ease-out both; }
.tp-chip:nth-child(1) { animation-delay: .4s; }
.tp-chip:nth-child(2) { animation-delay: .5s; }
.tp-chip:nth-child(3) { animation-delay: .6s; }
@keyframes tpUp { from { opacity: 0; transform: translateY(8px); } }
.tp-grow { flex: 1 1 auto; }
.tp-jfnext { align-self: stretch; display: flex; align-items: center; gap: 12px;
             padding: 14px 16px; border-radius: 18px;
             background: var(--card-fill); box-shadow: var(--card-lift);
             border: 1px solid var(--line); text-align: left; font-size: 15px;
             color: #c3c8d1; }
.tp-jfnext b { color: var(--ink); }
.tp-jfdot { flex: none; width: 10px; height: 10px; border-radius: 5px;
            background: var(--sc); }
.tp-jf button.c-btn { align-self: stretch; min-height: 58px; }

/* ---- the aerobic session's prompt (2026-10-12, the owner's item 6: "a pop
   up that falls down from the top") -- the save card's look (calm.css,
   `c-svpop`), FALLING: drawn above the screen (`in`), it drops into place
   with the re-plan card's slight overshoot in 0.38 s, and rises away in
   0.3 s (`out`, `AERO_OUT_MS` in shape.js). Its words are a button: a tap
   opens the Schedule placing it (2026-10-13; WAS its sheet). Since
   2026-10-12 ("Any screen") it is on the page's body, over whatever screen
   is up -- WAS inside Today's. ---------------------------------------- */
.c-svpop.tp-aeropop { transition: transform .38s cubic-bezier(.2, .9, .25, 1.12),
                                  opacity .2s ease; }
.c-svpop.tp-aeropop.in { opacity: 1; transform: translateY(calc(-100% - 40px)); }
.c-svpop.tp-aeropop.out { opacity: 1; transform: translateY(calc(-100% - 40px));
  transition: transform .3s cubic-bezier(.5, 0, .75, 0); }
button.tp-aeromore { width: auto; min-height: 0; margin: 0; padding: 0;
  border: 0; background: none; color: var(--ink); text-align: left; }
.tp-aeropop .c-svbtns button { cursor: pointer; }
/* (Its sheet -- the seven days, their places, drawn over the screen --
   went on 2026-10-13 for the Schedule's placing, index.html.) */

/* ---- "How was tennis?" (2026-10-23, the Today screen handoff v1, TR2b;
   `screens/court.js`): ONE sheet -- the practice and its times, How long?
   two by two, the length when Shorter or Longer, How hard? as three
   choices with their bars, the note, Save. Over whatever screen is up
   (`ct-layer`, the body's `.st-svlayer` motion), and the same nodes in the
   check-in's sheet for yesterday's. WAS the F3 / F4 card on Train. ------ */
.sheetwrap.ct-layer { background: rgba(2, 3, 5, .72);
                      -webkit-backdrop-filter: blur(1.5px);
                      backdrop-filter: blur(1.5px); }
.ct-layer .sheet.c-sheet {
  background: linear-gradient(170deg, #15253a 0%, #101b2b 45%, #0d1622 100%);
  border-top: 1px solid var(--line); border-radius: 30px 30px 0 0; gap: 10px;
  max-height: calc(100% - 36px);
  padding: 0 20px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .5); }
.ct-layer .c-grab i { background: #3a404b; }
.ct-head { display: flex; align-items: center; gap: 8px; margin: 0; }
.ct-ball { display: flex; flex: none; width: 18px; height: 18px;
           color: #2196f3; }
.ct-ball svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
               stroke-width: 2.2; stroke-linecap: round;
               stroke-linejoin: round; }
.ct-eye { font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
          text-transform: uppercase; color: #8cc4f5;
          font-variant-numeric: tabular-nums; }
.ct-title { margin: 0; font-size: 26px; font-weight: 800;
            letter-spacing: -0.01em; line-height: 1.15; }
.ct-sec { margin: 4px 0 -4px; font-size: 12.5px; font-weight: 800;
          letter-spacing: .12em; text-transform: uppercase; color: #848e9d; }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
           margin: 0; }
button.ct-opt { min-width: 0; width: auto; min-height: 52px; margin: 0;
  padding: 4px 8px; border-radius: 14px; background: #111b2a;
  border: 1.5px solid #24364d; color: #eef1f5; font-size: 16.5px;
  font-weight: 700; display: flex; flex-direction: column; gap: 1px;
  align-items: center; justify-content: center; text-align: center; }
button.ct-opt.on { background: var(--chip-bg);
                   border-color: var(--accent-bright); }
.ct-os { font-size: 13.5px; font-weight: 600; line-height: 1.2; color: #848e9d;
         font-variant-numeric: tabular-nums; }
button.ct-opt.on .ct-os { color: #c3c8d1; }
.c-stepper.ct-pick { padding: 10px 12px; border-radius: 18px;
                     background: #111b2a; border-color: #24364d; }
.ct-pick button.c-step { width: 52px; height: 52px; font-size: 26px; }
.ct-pick .c-stepv b { font-size: 30px; }
.ct-loads { display: flex; flex-direction: column; gap: 10px; margin: 0; }
button.c-choice.ct-load { min-height: 54px; padding: 6px 14px; gap: 12px;
                          border-radius: 16px; background: #111b2a;
                          border-color: #24364d; }
.ct-load .c-cht { font-size: 16.5px; }
.ct-load .c-chs { font-size: 13px; line-height: 1.35; }
button.c-choice.ct-load.on { background: var(--chip-bg);
                             border-color: var(--accent-bright); }
.ct-bars { display: flex; flex: none; color: #5d6370; }
.ct-load.on .ct-bars { color: #8cc4f5; }
.ct-bars svg.evbars { width: 16px; height: 13px; }
.ct-note { margin: 0; font-size: 14px; line-height: 1.4; color: #848e9d; }
button.c-btn.ct-save { margin-top: 4px; }
.ck-wrap .ct-head, .ck-wrap .ct-title { margin: 0; }

/* ---- the tournament recap (2026-10-19, `screens/recap.js`;
   SPEC_tournament_recap): a FULL-SCREEN card the day after a competition
   ends -- its title and days, "[n] matches · [h] on court", a stepper for
   each, Save. The court confirm's palette; it rises once. -------------- */
.sheetwrap.rc-wrap { background: rgba(2, 3, 5, .86); }
.rc-wrap .sheet.c-sheet { height: 100%; max-height: 100%; border-radius: 0;
  border-top: 0; gap: 14px; justify-content: flex-start;
  padding: calc(14px + env(safe-area-inset-top)) 20px
           calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(170deg, #15253a 0%, #101b2b 45%, #0d1622 100%); }
.rc-wrap .c-grab { display: none; }
.rc-rise { animation: ckFade .2s ease-out both; }
.rc-rise .sheet { animation: ckUp .28s cubic-bezier(.2, .8, .2, 1) both; }
.rc-head { display: flex; align-items: center; gap: 8px; }
.rc-ico { display: flex; flex: none; width: 18px; height: 18px;
          color: var(--gold); }
.rc-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
              stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-eye { font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
          text-transform: uppercase; color: #8cc4f5; }
button.rc-x { width: 40px; height: 40px; min-height: 0; flex: none;
  margin: -8px -8px -8px auto; padding: 12px; border: 0; border-radius: 50%;
  background: none; color: #848e9d; }
button.rc-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
                  stroke-width: 2.2; stroke-linecap: round; }
.rc-title { margin: 6px 0 0; font-size: 28px; font-weight: 800;
            letter-spacing: -0.01em; line-height: 1.15; }
.rc-when { font-size: 14px; color: #c3c8d1; }
.rc-line { font-size: 20px; font-weight: 800; line-height: 1.25;
           font-variant-numeric: tabular-nums; }
.rc-part { display: flex; flex-direction: column; gap: 6px; }
.rc-label { font-size: 12px; font-weight: 800; letter-spacing: .12em;
            text-transform: uppercase; color: var(--dim); }
.rc-part .c-stepper { padding: 12px; border-radius: 20px;
                      background: #111b2a; border-color: #24364d; }
.rc-part button.c-step { width: 56px; height: 56px; }
.rc-part .c-stepv b { font-size: 40px; }
.rc-note { font-size: 13px; line-height: 1.4; color: #848e9d; }
.rc-wrap .sheet button.c-btn { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .rc-rise, .rc-rise .sheet { animation: ckFade .15s ease-out both; }
}

/* 2026-11-07 (Schedule 1c, board 66): the 1c look. The sheet's colour; the
   eyebrow blue at 12 px; the app's x a 44 px round at the TOP RIGHT (WAS
   the Back arrow at the left); the line at 24 px (one line at 375, as the board); each stepper
   a card, its - and + raised tiles (WAS round flat buttons on a panel); the
   note flat grey; Save the one bright button. The SHAPE stays full screen
   (the owner, 2026-10-19: "full screen pop up"; asked again 2026-11-08
   over board 66's sheet -- "Keep full screen"). */
.rc-wrap .sheet.c-sheet { position: relative; background: var(--c1-sheet); }
.rc-wrap .sheet > .c-sheethead { position: absolute; z-index: 2;
  top: calc(14px + env(safe-area-inset-top)); right: 16px; margin: 0; }
.rc-wrap button.c-back.c-close { flex: none; width: 44px; height: 44px;
  min-height: 0; margin: 0; padding: 12px; border-radius: 50%;
  background: #17233a; border: 1px solid #2f4262; color: #c3cddb; }
.rc-head { min-height: 44px; padding-right: 56px; }
.rc-eye { font-size: 12px; color: var(--c1-icon); }
.rc-title { margin: -6px 0 0; color: var(--c1-ink); }
.rc-line { font-size: 24px; color: var(--c1-ink); }
.rc-wrap .c-sub { color: var(--c1-hint); font-size: 15px; }
.rc-part { gap: 10px; padding: 14px; border-radius: 20px;
  background: var(--c1-card); border: 1px solid var(--c1-card-line); }
.rc-label { margin: 0; color: var(--c1-lab); }
.rc-part .c-stepper { padding: 0; background: none; border: 0;
  border-radius: 0; }
.rc-part button.c-step { border-radius: 16px; background: var(--c1-tile);
  border: 1px solid var(--c1-tile-line); box-shadow: var(--c1-tile-lift);
  color: var(--c1-ink); }
.rc-part button.c-step:disabled { opacity: .45; }
.rc-note { font-size: 15px; color: var(--c1-hint); }
.rc-wrap .sheet button.c-btn { min-height: 58px; border-radius: 18px;
  background: var(--c1-pri); box-shadow: var(--c1-pri-lift); color: #fff;
  font-size: 17px; font-weight: 800; }
.rc-wrap .sheet button.c-btn:disabled { opacity: 1;
  background: var(--c1-tile); box-shadow: none; color: var(--c1-hint); }

@media (prefers-reduced-motion: reduce) {
  button.tp-row:active, button.tp-evchip:active,
  button.tp-weekrow:active { transform: none; }
  .ck-rise, .ck-rise .sheet { animation: ckFade .15s ease-out both; }
  .tp-ring circle.new, .tp-jfwords, .tp-chip { animation: none; }
  /* The aerobic prompt fades only. */
  .c-svpop.tp-aeropop.in, .c-svpop.tp-aeropop.out { opacity: 0;
                                                    transform: none; }
}

/* ---- how today changed, and why (2026-10-20, the volume screens' C) ----- */
/* The one reason line: Up next's, and What's in it's at its top. */
.tp-why { display: flex; gap: 10px; align-items: flex-start;
          padding: 10px 12px; border-radius: 12px;
          background: rgba(140, 196, 245, .07);
          border: 1px solid rgba(140, 196, 245, .18); }
.tp-why p { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 14px;
            line-height: 1.4; color: #c3c8d1; }
.tp-whyi { flex: none; width: 16px; height: 16px; margin-top: 2px; }
/* 2026-10-24: a line's head -- a must-have moved, its title (C10) */
.tp-whyh { display: block; font-weight: 800; color: var(--ink); }
.tp-whye { display: block; font-size: 11px; font-weight: 800;
           letter-spacing: .12em; text-transform: uppercase;
           color: var(--quiet); }
.tp-whyi svg { display: block; width: 16px; height: 16px; fill: none;
               stroke: var(--accent-soft); stroke-width: 2.2;
               stroke-linecap: round; stroke-linejoin: round; }
/* C9's pips: the sessions counted, filled in the session's colour. */
.tp-pips { display: inline-flex; gap: 6px; margin-left: 8px;
           vertical-align: middle; }
.tp-pips i { width: 9px; height: 9px; border-radius: 5px; box-sizing: border-box;
             border: 1.5px solid #4b5566; }
.tp-pips i.on { background: var(--sc, var(--accent-soft));
                border-color: var(--sc, var(--accent-soft)); }
/* The week's state and a must-have moved: normal cards under Up next,
   never focal. */
.tp-note { display: flex; gap: 12px; align-items: flex-start; width: 100%;
           margin: 0; padding: 12px 14px; border-radius: 18px;
           box-sizing: border-box; text-align: left; color: var(--ink);
           font: inherit;
           background: linear-gradient(160deg, #15253a 0%, #101b2b 55%,
                                       #0d1622 100%);
           border: 1px solid #24364d;
           box-shadow: inset 0 1px 0 rgba(140, 196, 245, .10); }
.tp-notei { flex: none; width: 34px; height: 34px; border-radius: 11px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(140, 196, 245, .10); }
.tp-notei svg { width: 18px; height: 18px; fill: none;
                stroke: var(--accent-soft); stroke-width: 2.2;
                stroke-linecap: round; stroke-linejoin: round; }
.tp-notem { flex: 1 1 auto; min-width: 0; display: flex;
            flex-direction: column; gap: 3px; }
.tp-notee { font-size: 11px; font-weight: 800; letter-spacing: .12em;
            text-transform: uppercase; color: var(--quiet); }
.tp-notem b { font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.tp-notel { font-size: 13.5px; line-height: 1.4; color: #c3c8d1; }
button.tp-note .lchev { align-self: center; border-color: var(--rec); }
/* What's in it's rows: a cut's planned sets struck, an exercise out today
   struck and "not today", a step-up's quiet tag. */
.tp-was { margin-right: 6px; color: var(--quiet); }
.tp-out .c-rowt { text-decoration: line-through; color: var(--quiet); }
.tp-out .c-rowr { color: var(--quiet); }
.tp-rowwhy { font-size: 13px; }
.tp-tag { align-self: flex-start; margin-top: 4px; padding: 2px 8px;
          border-radius: 8px; font-size: 11.5px; font-weight: 800;
          letter-spacing: .04em; color: var(--accent-soft);
          background: rgba(140, 196, 245, .10);
          border: 1px solid rgba(140, 196, 245, .35); }

/* ---- THE SMALL PHONE (2026-10-24; the Today screen handoff §1: "All 390 ×
   844, each with a `_s` small-phone version (375 × 667)"). Every size
   above is the 390-wide references'; a phone narrower than 390 takes the
   `_s` references' -- the list's gap 9 and rows 54 high, the title 32, the
   next card's name 30, its Start 54 high, Tomorrow's rows 48 -- so the
   next card's Start and the rows under it stay above the tab bar on a 375
   x 667 screen. Layout only: every word and colour is as above. -------- */
@media (max-width: 389px) {
  .c-page.tp-today { gap: 12px; }
  .tp-date { font-size: 14px; }
  .tp-title { font-size: 32px; }
  .tp-list { gap: 9px; }
  .tp-row { min-height: 54px; padding: 6px 14px; border-radius: 14px; }
  .tp-circ, .tp-tick, .tp-ball { width: 24px; height: 24px; }
  .tp-circ { border-radius: 12px; }
  .tp-tick { border-radius: 12px; }
  .tp-tick svg { width: 14px; height: 14px; }
  .tp-ball svg { width: 22px; height: 22px; }
  .tp-rt { font-size: 16px; }
  .tp-rs { font-size: 13px; }
  .tp-rl { font-size: 14px; }
  .tp-nowl b { font-size: 12px; }
  .tp-hero { border-radius: 20px; padding: 14px 16px 4px; gap: 8px; }
  .tp-hero.tp-state, .tp-hero.tp-ck { padding-bottom: 14px; }
  .tp-eye.tp-kick .tp-circ.on::after { width: 10px; height: 10px;
                                       border-radius: 5px; }
  .tp-kt { font-size: 16px; }
  .tp-kin { font-size: 12px; }
  .tp-name { font-size: 30px; }
  .tp-line { font-size: 14.5px; margin-top: 5px; }
  .tp-hero > .tp-line { margin-top: -3px; }
  .tp-ckline { margin-top: 0; font-size: 14.5px; line-height: 1.45; }
  button.c-btn.tp-start, button.tp-btnlook { min-height: 54px; height: 54px;
                                             margin-top: 4px; }
  button.c-link.tp-whats { min-height: 42px; margin-top: -8px; }
  .tp-restday .tp-line { margin-top: 0; }
  .tp-alldone, .tp-dayline { font-size: 14px; margin: -2px 4px; }
  .tp-tmrw { padding: 12px 14px 6px; border-radius: 18px; }
  .tp-tmh { padding-bottom: 8px; }
  .tp-tmh h3 { font-size: 16px; }
  .tp-tmd { font-size: 14px; }
  .tp-trow { min-height: 48px; }
  .tp-trow .tp-rt { font-size: 15.5px; }
  .tp-tmrest { padding: 12px 0 8px; font-size: 15px; }
  button.tp-weekrow { min-height: 54px; padding: 8px 14px; border-radius: 14px; }
}

/* ───────────────────────── TODAY, Td2 (2026-11-02, Batch 6 Track T)
   `reference/Td2_T1h` ... `T11` (390 x 844): the header bar, the dots, ONE
   solid card, the list. Every number is the references'; the card colours
   are the kit's (`qHeroBg` over the visit's `builds`, kernel.js) and the
   reserved ones (index.html :root -- `--gold`, `--match-*`, `--rest-*`,
   `--done-blue`). WAS the X ball track over a raised card (2026-10-28). */
.c-page.tp-today { --td-tennis: #2196f3; --td-ink: #eef1f5;
  --td-body: #c3c8d1; --td-mute: #848e9d; --td-sky: #8cc4f5;
  gap: 14px; color: var(--td-ink);
  min-height: calc(100dvh - var(--tabspace, 0px) - 2rem
                  - env(safe-area-inset-top)); }
/* the header bar is the top of the screen (the references draw no logo
   over it -- the Phase page's own rule, programme.js) */
body:has(#app .tp-today) > h1 { display: none; }
body:has(#app .tp-today) { padding-bottom: 0;
  background: radial-gradient(130% 380px at 50% calc(100% + 40px),
              rgba(33, 150, 243, .30), rgba(0, 0, 0, 0) 72%) fixed, #050607; }
/* THE PAGE ENDS 16 PX ABOVE THE TAB BAR AND THE GLASS ENDS THERE TOO
   (2026-11-06, the owner: "same fitting issue on today tab that needs to
   be fixed too"): under the page, exactly the bar's room and the 16 px
   the page's `min-height` leaves above it -- so a day that fits does not
   scroll at all, and one that does not scrolls its last row clear of the
   bar. WAS the inset under the body and the bar's height and gap under
   #app: 24 px more than the glass on an iPhone (its inset 34, the bar 20
   off the foot), and the card's own size pushed the last row under the
   bar. The card gives up height first (today.js `todayFitNow`). */
body:has(#app .tp-today) #app { padding-bottom: calc(var(--tabspace) + 1rem); }
/* the ground is the screen's (above), not the page box's (`.tb-page`) */
.c-page.tp-today.tb-page { background: none; }

/* THE HEADER BAR -- 2026-11-04 (owner, redesign list, Phase and Today 1:
   "The top bar/title looks really bad. The tab bar with title for schedule
   looks great, how can we replicate this look?"). It is the Schedule's bar
   (styles/sched.css §1, `.calbar`): no glass, no rounded corners, no glow;
   the page's own black; the date small and quiet over "Today" at 32 / 800;
   the event chip on the right as one of the Schedule's 42 px card-style
   buttons. WAS (Td2 §4) rounded bottom 34 px, blue glass, a glow top left,
   a thin bright edge. */
.tp-today > .tp-head { margin: -1rem -20px 12px; padding: 18px 20px 8px;
  align-items: flex-end; gap: 8px; background: none; border: 0;
  border-radius: 0; box-shadow: none; }
/* the date keeps its whole line; the chip gives way (its name is cut) */
.tp-today .tp-headt { flex: 0 0 auto; min-width: 0; display: flex;
  flex-direction: column; margin-right: auto; }
.tp-today .tp-date { font-size: 14.5px; font-weight: 600; line-height: 1.3;
  color: var(--td-mute); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.tp-today .tp-title { margin: 0; font-size: 32px; font-weight: 800;
  line-height: 1.1; letter-spacing: -.02em; color: var(--td-ink); }
/* THE PHASE CHIP (2026-11-05, the owner's Today swipe v1 §6, board 8): the
   flag and the phase's name, white, filled in that phase's colour in the
   cards' glossy style -- the Phase tab's own fills and glows
   (`--phn-fill-*`, `--phn-glow-*`: "The app's colours win"). WAS the event
   chip, the Schedule's card-style button, its trophy and days in gold.
   (2026-11-06: the Phase tab and styles/phases.css are gone -- its fills
   and glows live here now, their one owner, still named for the phase.) */
:root {
  --phn-fill-prep: linear-gradient(150deg, #3f6cf2 0%, #2342c4 46%, #0c1658 100%);
  --phn-glow-prep: rgba(63, 108, 242, .35);
  --phn-fill-pre: linear-gradient(150deg, #58d2ff 0%, #1c8cf0 48%, #0a3f9a 100%);
  --phn-glow-pre: rgba(80, 200, 255, .35);
  --phn-fill-comp: linear-gradient(160deg, #ffd23f 0%, #f2a81d 38%, #b0670e 74%,
                   #3a1f10 100%);
  --phn-glow-comp: rgba(255, 199, 46, .35);
}
.tp-today button.tp-phchip { flex: 0 1 auto; min-width: 0; overflow: hidden;
  display: inline-flex; align-items: center; gap: 7px; width: auto;
  height: 42px; min-height: 0; margin: 0; padding: 0 12px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .22); color: #fff;
  font-size: 14.5px; font-weight: 800; white-space: nowrap;
  background: var(--phn-fill-prep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4),
              0 10px 28px var(--phn-glow-prep); }
.tp-today button.tp-phchip.pre { background: var(--phn-fill-pre);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4),
              0 10px 28px var(--phn-glow-pre); }
.tp-today button.tp-phchip.comp { background: var(--phn-fill-comp);
  text-shadow: 0 1px 2px rgba(58, 31, 16, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4),
              0 10px 28px var(--phn-glow-comp); }
.tp-today button.tp-phchip:active { transform: scale(.97); }
.tp-phi { display: flex; flex: none; width: 18px; height: 18px; }
.tp-phi svg { width: 18px; height: 18px; fill: none; stroke: #fff;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-phn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* THE DOTS BAR: one dot a session -- the shown one a white pill, a done
   one blue, the rest hollow. */
.td-dots { display: flex; justify-content: center; align-items: center;
  gap: 9px; margin: 12px 0 2px; }
.td-dot { display: block; flex: none; width: 7px; height: 7px;
  border-radius: 50%; box-sizing: border-box; border: 1.5px solid #4a5a70;
  transition: background-color .3s ease, border-color .3s ease,
              width .3s ease; }
.td-dot.done { background: #2f8ae0; border-color: #2f8ae0; opacity: .85; }
.td-dot.on { width: 22px; border-radius: 4px; border: 0; background: var(--td-ink);
  opacity: 1; }

/* THE CARD: the screen's one solid card. Its fill by skin -- `.td-q` the
   qualities' (`--td-bg`, `--td-glow`, set on it by today.js), `.td-match`
   gold, `.td-rest` steel grey, `.td-app` the app's blue, `.td-line` no
   fill: a blue outline (tennis, and a session that builds nothing). */
.tp-today .tp-hero.td-card { flex: 1 0 auto; display: flex;
  flex-direction: column; gap: 0; position: relative; overflow: hidden;
  border-radius: 30px; padding: 18px 20px 8px; color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4),
              inset 0 0 0 1px rgba(255, 255, 255, .04),
              0 18px 48px var(--td-glow, rgba(47, 138, 224, .3)); }
.tp-today .tp-hero.td-card::before { content: ""; position: absolute; left: 0;
  right: 0; top: 0; height: 46%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .17),
              rgba(255, 255, 255, 0)); }
.tp-today .tp-hero.td-card > * { position: relative; margin: 0; }
/* (2026-11-05: the skins below no longer ask for `.c-focal` -- the track's
   cards beside the shown one are not the screen's focal card, and must
   wear their colour as they slide in. WAS `.td-card.c-focal.td-q` ...) */
.tp-today .tp-hero.td-card.td-q { background: var(--td-bg); }
.tp-today .tp-hero.td-card.td-match {
  --td-glow: color-mix(in srgb, var(--gold) 30%, transparent);
  background: var(--match-bloom), var(--match-card);
  text-shadow: 0 1px 10px rgba(50, 22, 0, .55); }
.tp-today .tp-hero.td-card.c-focal.td-rest { padding: 20px 20px 18px;
  --td-glow: rgba(120, 145, 190, .28);
  background: var(--rest-bloom), var(--rest-card); }
.tp-today .tp-hero.td-card.c-focal.td-app { --td-glow: rgba(47, 138, 224, .3);
  background: radial-gradient(90% 60% at 0% 100%, rgba(80, 170, 250, .34) 0%,
              transparent 70%),
              linear-gradient(160deg, #3f9bef 0%, #1f6fc4 42%, #134a8a 78%,
              #0b2445 100%); }
.tp-today .tp-hero.td-card.td-line {
  background: radial-gradient(90% 60% at 0% 100%,
              color-mix(in srgb, var(--td-tennis) 14%, transparent) 0%,
              transparent 70%), rgba(255, 255, 255, .02);
  border: 1.5px solid color-mix(in srgb, var(--td-tennis) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--td-tennis) 10%, transparent),
              0 18px 48px color-mix(in srgb, var(--td-tennis) 14%, transparent); }
.tp-today .tp-hero.td-card.td-line::before { display: none; }
/* the grey cards (sessions off, nothing planned, a check-in rest day) */
.tp-today .tp-hero.td-card.tp-state:not(.td-rest):not(.td-line) {
  --td-glow: rgba(120, 145, 190, .18);
  background: linear-gradient(160deg, #2a3446 0%, #1b2333 60%, #111827 100%); }

/* the top line: the pill, the type, Skip */
.td-top { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 30px; }
.td-tl { display: flex; align-items: center; gap: 9px; min-width: 0; }
.td-pill { display: flex; align-items: center; height: 26px; padding: 0 11px;
  border-radius: 13px; background: #fff; color: #10241f; flex: none;
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; text-shadow: none; white-space: nowrap; }
.td-pill:empty { display: none; }
.td-type { font-size: 12.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255, 255, 255, .92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-tl .tp-sample { margin-left: 0; background: rgba(255, 255, 255, .2);
  color: #fff; text-shadow: none; }
.tp-today button.td-skip { flex: none; width: auto; min-height: 0; height: 30px;
  margin: 0; padding: 0 13px; border-radius: 15px; color: #fff;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12);
  font-size: 13px; font-weight: 700; }
/* 2026-11-05 (Today swipe v1 §2): the countdown where the type sat -- "in
   50 min", 15 px, 700, not in capitals */
.td-tl .td-cd { font-size: 15px; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: #fff; }
.td-tl .td-cd:empty { display: none; }
/* the name 46 px (WAS 42), two lines where it wraps ("Strength & power") */
.td-name { margin-top: 12px !important; font-size: 46px; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.06; overflow-wrap: anywhere; }
.td-rest .td-name, .td-was .td-name { font-size: 42px; }
/* the count, small on purpose ("low priority") */
.td-meta.td-count { margin-top: 5px !important; font-size: 15px;
  color: rgba(255, 255, 255, .72); }
.td-meta.td-count:empty { display: none; }
/* THE THREE TILES: STARTS, LENGTH, WHERE -- glass, the third wider so "On
   court" fits */
.td-tiles { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px;
  margin-bottom: 16px !important; container-type: inline-size; }
.td-tiles[data-n="2"] { grid-template-columns: 1fr 1fr; }
.td-tiles[data-n="1"] { grid-template-columns: 1fr; }
.td-tile { min-width: 0; padding: 11px 10px 12px 12px; border-radius: 18px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); text-shadow: none; }
.td-tile span { display: block; font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78); }
/* 21px is the board's size, but "60 min" and "Anywhere" do not fit it in a
   350px card: the value shrinks with the row (6cqi = 21px at a 350px row,
   18.6px on a 390 phone, 17.7px on a 375 one) and never grows past 21px. */
.td-tile b { display: block; margin-top: 5px; font-size: 19px;
  font-size: min(21px, 6cqi); font-weight: 800;
  letter-spacing: -.02em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-variant-numeric: tabular-nums; color: #fff; }
.td-rest .td-name { margin-top: 14px !important; font-size: 40px; }
.td-meta { margin-top: 4px !important; font-size: 16.5px;
  color: rgba(255, 255, 255, .9); }
.td-grow { flex: 1 1 auto; min-height: 10px; }
.td-card .tp-warm, .td-card .tp-why { margin-top: 12px !important;
  color: #fff; background: rgba(0, 0, 0, .22);
  border-color: rgba(255, 255, 255, .18); }
.td-card .tp-ckline { margin-top: 12px !important; color: #fff;
  background: none; }

/* the time ring and BUILDS */
.td-mid { display: flex; align-items: center; gap: 22px; }
.td-ring { position: relative; width: 96px; height: 96px; flex: none; }
.td-ring svg { position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg); }
.td-ring circle { fill: none; stroke-width: 8; }
.td-ring .td-rb { stroke: rgba(255, 255, 255, .26); }
/* its fill is the `stroke-dasharray` attribute today.js sets (a CSS
   value here would win over it) */
.td-ring .td-rf { stroke: #fff; stroke-linecap: round;
  transition: stroke-dasharray .6s ease; }
.td-rw { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; }
.td-rw b { font-size: 22px; font-weight: 800; line-height: 1.1; color: #fff;
  font-variant-numeric: tabular-nums; }
.td-rw span { margin-top: 2px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .88); }
.td-rw span:empty { display: none; }
.td-rring { width: 108px; height: 108px; }
.td-rring .td-rw b { font-size: 15px; letter-spacing: .1em;
  text-transform: uppercase; }
.td-bk { margin-bottom: 6px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8); }
/* (2026-11-05: BUILDS' chips, `.td-builds` / `.td-bl` / `.td-chip`, gone
   with the strip.) */
.td-why p { margin: 0; max-width: 170px; font-size: 17px; font-weight: 700;
  line-height: 1.3; }

/* Start: white; What's in it: white words -- on the card's colour. */
.tp-today .td-card button.c-btn.tp-start, .tp-today .td-card button.tp-btnlook {
  flex: none; height: 54px; min-height: 54px; margin: 0; border-radius: 18px;
  background: #fff; color: #0d2a3f; font-size: 18px; text-shadow: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.tp-today .td-card .tp-play { width: 13px; height: 13px; }
.tp-today .td-card .tp-play svg { width: 13px; height: 13px; fill: #0d2a3f; }
/* (2026-11-05: Start is the card's last line -- WAS What's in it under it,
   `.tp-whats`, removed: a tap on the card opens the brief) */
.tp-today .td-card > button.c-btn.tp-start,
.tp-today .td-card > button.tp-btnlook { margin-bottom: 12px; }
.tp-today .td-card.td-tap { cursor: pointer; }
/* THE GREYED START (§5): a later session's -- glass, its triangle at 72 %;
   the Schedule's session sheet draws it too (`.ss-later`) */
button.td-later { display: flex; align-items: center; justify-content: center;
  gap: 9px; flex: none; width: 100%; height: 54px; min-height: 54px;
  margin: 0 0 12px; border-radius: 18px; font-size: 18px; font-weight: 700;
  background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .3); box-shadow: none;
  text-shadow: none; }
button.td-later .tp-play { display: flex; width: 13px; height: 13px; }
button.td-later .tp-play svg,
.tp-today .td-card button.td-later .tp-play svg { width: 13px; height: 13px;
  fill: rgba(255, 255, 255, .72); }
.ss-foot button.td-later.ss-later { margin: 0; min-height: 58px; }
.tp-today .td-card .c-bar { margin-top: 12px; }
/* a card's quiet way out: View summary, How was it? */
.tp-today .td-card button.td-out { flex: none; width: 100%; height: 54px;
  min-height: 54px; margin: 0 0 10px; border-radius: 18px; color: #fff;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12);
  font-size: 17px; font-weight: 800; }
/* A DONE CARD (2026-11-05, Today swipe v1 §4): fully black, no top
   highlight, its one big blue tick glowing in the middle -- Day complete's,
   smaller. WAS its session's colour, dimmed. */
.tp-today .tp-hero.td-card.td-was { background: #000;
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 18px 48px rgba(47, 138, 224, .22); }
.tp-today .tp-hero.td-card.td-was::before { display: none; }
.td-card.td-was .td-name, .td-card.td-was .td-meta { opacity: .85; }
.td-mid.td-dmark { justify-content: center; }
.td-dtick { display: flex; align-items: center; justify-content: center;
  flex: none; width: 124px; height: 124px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4aa2f2, #2477d6 60%, #1b58a8);
  box-shadow: 0 0 0 10px rgba(47, 138, 224, .16),
              0 0 0 22px rgba(47, 138, 224, .07),
              0 14px 44px rgba(47, 138, 224, .5); }
.td-dtick svg { width: 74px; height: 74px; fill: none; stroke: #fff;
  stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-today .td-card.td-was button.td-out { margin-bottom: 12px; }

/* the rest day's boxes: This week; the TOMORROW tile */
.td-box { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; border-radius: 14px; background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(255, 255, 255, .14); }
.td-wk { margin-top: 12px !important; padding: 10px 14px; font-size: 14px;
  font-weight: 700; white-space: nowrap; }
.td-wk b { font-weight: 800; }
.tp-today .td-card > button.td-tmrw { width: 100%; min-height: 0; margin: 14px 0 0;
  padding: 13px 16px; border-radius: 18px; color: #fff; text-align: left; }
.td-tm { display: flex; flex-direction: column; min-width: 0; }
.td-tm .td-bk { margin: 0; color: rgba(255, 255, 255, .75); }
.td-tm b { margin-top: 3px; font-size: 18px; font-weight: 800; }
.td-tm span:last-child { margin-top: 2px; font-size: 14px;
  color: rgba(255, 255, 255, .85); }
.td-tmrw .lchev { border-color: #fff; }

/* THE SKIP QUESTION, in Start's place (2026-11-05, Today swipe v1 §7,
   board 9): the question centred over Keep it (white, Start's look) and
   Skip it (glass), side by side. WAS a paragraph over two plain buttons. */
.td-ask { display: flex; flex-direction: column; gap: 12px; }
.td-ask p { margin: 0; font-size: 16px; line-height: 1.4; }
.td-card .td-ask { margin-bottom: 12px; }
.td-card .td-ask p { text-align: center; font-size: 18px; font-weight: 700;
  line-height: 1.3; }
.td-askr { display: flex; gap: 10px; }
.td-card .td-askr button { flex: 1; min-width: 0; height: 54px;
  min-height: 54px; margin: 0; padding: 0 12px; border-radius: 18px;
  font-size: 17px; font-weight: 700; text-align: center; text-shadow: none; }
.td-card .td-askr button.td-keep { background: #fff; color: #0d2a3f; border: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.td-card .td-askr button.td-skipit { background: rgba(255, 255, 255, .14);
  color: #fff; border: 1px solid rgba(255, 255, 255, .4); box-shadow: none; }

/* "NOT YET" (§5, boards 4 and 7): centred over the screen dimmed -- an icon
   tile, the title, the line, one blue Got it. Over the session sheet too. */
.td-nywrap { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 0 30px;
  background: rgba(2, 3, 5, .72); }
.td-ny { width: 100%; max-width: 360px; box-sizing: border-box;
  padding: 26px 22px 22px; border-radius: 28px; border: 1px solid #24364d;
  background: linear-gradient(160deg, #182a40 0%, #12203a 55%, #0f1a29 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7); text-align: center;
  color: #eef1f5; }
.td-nyi { display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 18px;
  background: rgba(140, 196, 245, .12); }
.td-nyi svg { width: 26px; height: 26px; fill: none; stroke: #8cc4f5;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.td-ny h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.td-ny p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.4; color: #c3c8d1; }
.td-ny button.c-btn { width: 100%; min-height: 54px; margin: 20px 0 0;
  border-radius: 16px; font-size: 17px; }

/* THE TRACK (§3): the cards in one cell, the shown one drawn, the rest
   hidden till a swipe slides one in beside it. Edge to edge of the screen,
   so a card enters from its side; its shadows show above and below. A
   vertical drag is the page's scroll (`pan-y`). */
.tp-today .td-track { flex: 1 0 auto; display: grid;
  grid-template: 1fr / 1fr; margin: 0 -20px; padding: 0 20px;
  clip-path: inset(-30px 0 -60px 0); touch-action: pan-y; }
.tp-today .td-track > .td-card { grid-area: 1 / 1; min-width: 0;
  transform-origin: 50% 50%; will-change: transform; }
.tp-today .td-track > .td-card.td-off { visibility: hidden; }
body:has(#app .tp-today) #app { overflow-x: clip; }
@keyframes td-fade { from { opacity: 0; } to { opacity: 1; } }
.tp-today .td-card.td-fadein { animation: td-fade .15s ease-out both; }

/* DAY COMPLETE (Td2_T6d): the outline card, a glowing blue tick, the
   words, the day's sessions ticked. */
.tp-today section.td-day { flex: 1 0 auto; display: flex;
  flex-direction: column; border-radius: 30px; padding: 22px 24px;
  position: relative; overflow: hidden;
  background: radial-gradient(90% 55% at 50% 38%, rgba(47, 138, 224, .30) 0%,
              rgba(47, 138, 224, .07) 55%, transparent 80%),
              rgba(255, 255, 255, .02);
  border: 1px solid rgba(140, 196, 245, .28); box-shadow: none; }
.td-dmid { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; min-height: 300px; }
.td-big { display: flex; align-items: center; justify-content: center;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4aa2f2, #2477d6 60%, #1b58a8);
  box-shadow: 0 0 0 14px rgba(47, 138, 224, .14),
              0 0 0 32px rgba(47, 138, 224, .07),
              0 20px 60px rgba(47, 138, 224, .45); }
.td-big svg { width: 84px; height: 84px; fill: none; stroke: #fff;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.td-dh { margin: 46px 0 0; font-size: 42px; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.05; }
.td-ds { margin: 8px 0 0; font-size: 17px; color: var(--td-body); }
.td-dl { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 12px; }
.td-dr { display: flex; align-items: center; gap: 10px; min-height: 32px;
  font-size: 16px; font-weight: 600; color: var(--td-body); }
.td-dr svg { width: 16px; height: 16px; flex: none; fill: none;
  stroke: #5fa8ee; stroke-width: 3; stroke-linecap: round;
  stroke-linejoin: round; }

/* THE CARD GIVES UP HEIGHT FIRST (2026-11-06, the owner: "same fitting
   issue on today tab"): where the day is taller than the room above the
   tab bar, today.js (`todayFitNow`) takes these steps one at a time until
   it fits -- each keeps the ones before it. 1: the name smaller and the
   card's spare room gone; 2: the name smaller still, the tiles, Start and
   the dots tighter; 3: all of it tighter again, and the list's rows.
   Every word stays. */
.tp-today.td-fit1 .td-card .td-name { margin-top: 8px !important;
  font-size: 36px; }
.tp-today.td-fit1 .td-card .td-grow { min-height: 0; }
.tp-today.td-fit1 .td-tiles { margin-bottom: 12px !important; }
.c-page.tp-today.td-fit2 { gap: 10px; }
.tp-today.td-fit2 .td-dots { margin-top: 6px; }
.tp-today.td-fit2 .tp-hero.td-card { padding-top: 14px; }
.tp-today.td-fit2 .td-card .td-name { font-size: 30px; }
.tp-today.td-fit2 .td-tile { padding: 8px 10px 8px 12px; border-radius: 15px; }
.tp-today.td-fit2 .td-tile b { margin-top: 3px; }
.tp-today.td-fit2 .td-card button.c-btn.tp-start,
.tp-today.td-fit2 .td-card button.tp-btnlook,
.tp-today.td-fit2 .td-card button.td-later { height: 48px; min-height: 48px; }
.tp-today.td-fit3 .td-card .td-name { font-size: 26px; }
.c-page.tp-today.td-fit3 { gap: 8px; }
.tp-today.td-fit3 .tp-hero.td-card { padding-top: 12px; }
.tp-today.td-fit3 .td-tiles { margin-bottom: 8px !important; }
.tp-today.td-fit3 .td-card button.c-btn.tp-start,
.tp-today.td-fit3 .td-card button.tp-btnlook,
.tp-today.td-fit3 .td-card button.td-later { height: 44px; min-height: 44px; }
/* (a later session's row is also `td-later`, and so took the greyed
   Start's 54 px height -- here it takes its own words' height) */
.tp-today.td-fit3 button.td-row { height: auto; min-height: 42px; }
.tp-today.td-fit3 .td-lh { margin-bottom: 2px; }

/* THE LIST: its head, then a row a session -- time, circle, name and
   type, DONE / NEXT / OFF TODAY or a chevron. */
.td-list { padding: 0 6px; }
.td-lh { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--td-mute); }
.tp-today button.td-fw { display: flex; align-items: center; width: auto;
  min-height: 32px; margin: 0; padding: 0; background: none; border: 0;
  color: var(--td-sky); font-size: 14px; font-weight: 700;
  letter-spacing: 0; text-transform: none; }
.td-fw .lchev { border-color: var(--td-sky); }
.tp-today button.td-row { display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 48px; margin: 0; padding: 0; text-align: left;
  background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0; color: var(--td-ink); opacity: .8; }
.tp-today .td-lh + button.td-row { border-top: 0; }
.tp-today button.td-row.td-done { opacity: .5; }
/* THE PICKED ROW'S GLOW (2026-11-05, Today swipe v1 §3): its own layer,
   `.td-hi`, 8 px past the row each side -- lit on the picked row, and by
   the track's progress while it slides (an inline opacity). The row keeps
   its size, so the list never jumps. WAS the row itself grown 8 px each
   side, its background the glow. */
.tp-today button.td-row { position: relative; }
.tp-today button.td-row > :not(.td-hi) { position: relative; }
.td-hi { position: absolute; left: -8px; right: -8px; top: -1px; bottom: -1px;
  border-radius: 16px; border: 1px solid transparent; opacity: 0;
  pointer-events: none; }
.td-row.on .td-hi { opacity: 1; }
.tp-today button.td-row.on { opacity: 1; }
.tp-today button.td-row.on + button.td-row { border-top-color: transparent; }
.td-rt { flex: none; width: 48px; font-size: 16px; font-weight: 700;
  color: var(--td-body); font-variant-numeric: tabular-nums; }
.td-row.on .td-rt { color: #fff; }
.td-rc { display: flex; align-items: center; justify-content: center;
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  box-sizing: border-box; border: 2px solid #3d5068;
  transition: background-color .3s ease, border-color .3s ease; }
.td-rc i { display: none; }
.td-row.on .td-rc { border: 2.5px solid
                    color-mix(in srgb, var(--rq, #2f8ae0) 55%, #fff); }
.td-row.on .td-rc i { display: block; width: 10px; height: 10px;
  border-radius: 50%; background: color-mix(in srgb, var(--rq, #2f8ae0) 55%, #fff); }
.td-rc.done { border: 0; background: #2f8ae0; }
.td-rc svg { width: 16px; height: 16px; fill: none; stroke: #fff;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.td-rm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.td-rm b { font-size: 16.5px; font-weight: 700; overflow-wrap: anywhere; }
.td-rm span { font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--td-mute); }
.td-row.on .td-rm span { color: rgba(255, 255, 255, .7); }
.td-rr { flex: none; font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--td-sky); }
.td-row.on .td-rr { font-weight: 800;
  color: color-mix(in srgb, var(--rq, #2f8ae0) 55%, #fff); }
.td-row .lchev { flex: none; border-color: var(--td-mute); }

/* Today's blue tick, small -- for the Phase page's done step (`phBall`),
   the climb, and the Schedule's done block (`calDoneMark`): WAS the X
   ball / X logo, gone with Today's track (R5). */
.td-tickx { display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--done-blue); }
.td-tickx svg { width: 62%; height: 62%; fill: none; stroke: #fff;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cl-dot { display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid #3d5068; }
.cl-dot.next { border-color: #2f8ae0; }
.cl-dot.comp { border-color: var(--gold); }
.cl-dot.done { border: 0; background: var(--done-blue); }
.cl-dot svg { width: 60%; height: 60%; fill: none; stroke: #fff;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ───────────────────────── R5 "BLUE TICKS": the done move
   A session just done: its dot turns blue and its row ticks (`.td-just`,
   today.js `todayDoneFlow`), then the card for the next session slides in.
   The day's last: the big tick grows in, then the words. The resting state
   is the end state -- reduced motion sees only that. */
@keyframes td-tick { 0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; } 100% { transform: none; } }
@keyframes td-in { from { opacity: 0; transform: translateX(36px); }
  to { opacity: 1; transform: none; } }
@keyframes td-grow { 0% { transform: scale(.2); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes td-up { from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; } }
.td-flow .td-dot.td-just { animation: td-tick .45s ease-out both; }
.td-flow .td-row.td-just .td-rc { animation: td-tick .45s ease-out both; }
.td-flow .td-card { animation: td-in .45s cubic-bezier(.2, .8, .2, 1) .5s both; }
.td-dayin .td-big { animation: td-grow .7s cubic-bezier(.2, .8, .2, 1) both; }
.td-dayin .td-dh, .td-dayin .td-ds, .td-dayin .td-dl {
  animation: td-up .4s ease-out .55s both; }
@media (prefers-reduced-motion: reduce) {
  .td-flow .td-dot.td-just, .td-flow .td-row.td-just .td-rc,
  .td-flow .td-card, .td-dayin .td-big, .td-dayin .td-dh, .td-dayin .td-ds,
  .td-dayin .td-dl { animation: none; }
  .td-dot, .td-rc, .td-ring .td-rf { transition: none; }
}