/* styles/warmup.css -- THE WARM-UPS (2026-10-13, screens/warmup.js): a gym
   session's part 1 (W1-W3), the band prep in a heavy rest (W4), the
   re-raise strip, the court prep page (C1-C3), match day's wait rules (M3)
   and the lead-in sheet (M1), and Today's match-day pieces (M2).

   ⚠ ONE STYLESHEET IS ONE NAMESPACE: every class here is `wu-` (Today's
   are `tp-`, the screen's own prefix), and the surface's tokens are read,
   never restated. */

/* ---------------------------------------------------------------- parts */
.wu { display: flex; flex-direction: column; gap: 14px; }
.wu-eye { color: var(--ball); text-align: left; }
.wu-title { margin: -4px 0 0; font-size: 34px; font-weight: 800;
  letter-spacing: -.01em; }
.wu-why { margin: 0; color: var(--quiet); font-size: 15px; line-height: 1.4; }
.wu-sub { margin: 0; color: var(--quiet); font-size: 14px; line-height: 1.45; }
.wu-quiet { margin: 0; color: var(--quiet); font-size: 13px;
  text-align: center; }
.wu-tag { margin: 6px 0 0; color: var(--accent-soft); font-size: 12px;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* The switch: the version shown, the one picked first. */
.wu-switch { display: flex; gap: 4px; padding: 4px; border-radius: 16px;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.wu-opt { flex: 1; min-height: 44px; border-radius: 12px; border: 1.5px solid
  transparent; background: none; color: var(--quiet); font-weight: 700;
  font-size: 15px; padding: 0 6px; }
.wu-opt.on { color: var(--ink); background: var(--panel-2);
  border-color: var(--accent); }

/* A step or a section: a card, numbered, its time at the right. */
.wu-card { background: var(--card-fill); box-shadow: var(--card-lift);
  border: 1px solid var(--frost-line); border-radius: 22px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 0; }
.wu-card.c-focal { background: var(--raised-fill); }
.wu-sh { display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 8px; }
.wu-sh h3 { margin: 0; flex: 1; min-width: 0; font-size: 19px;
  font-weight: 800; }
.wu-n { color: var(--ball); font-size: 15px; }
.wu-m { color: var(--quiet); font-size: 14px; font-weight: 600;
  white-space: nowrap; }
.wu-when { margin: 0 0 6px; color: var(--accent-soft); font-size: 14px;
  line-height: 1.4; }
/* A move, closed (2026-10-22): one tappable line -- its name, its dose, a
   › that turns when it is open; opened, its note and its demo frame under
   it. WAS `.wu-row`, every move written out. */
.wu-mv { border-top: 1px solid var(--frost-line); }
button.wu-mvh { display: flex; gap: 12px; align-items: center; width: 100%;
  min-height: 44px; margin: 0; padding: 8px 0; border: 0; border-radius: 0;
  background: none; color: inherit; text-align: left; font: inherit; }
.wu-mvh .t { flex: 1; min-width: 0; font-weight: 700; font-size: 16px;
  line-height: 1.3; }
.wu-mvh .d { white-space: nowrap; font-size: 15px; }
.wu-mvh .lchev { border-color: var(--rec); transition: transform .18s ease; }
.wu-mv.open .wu-mvh .lchev { transform: rotate(135deg); }
.wu-mvb { display: flex; flex-direction: column; gap: 10px;
  padding: 0 0 12px; }
.wu-mvb .s { margin: 0; color: var(--quiet); font-size: 14px;
  line-height: 1.45; }
.wu-demo { height: 150px; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) {
  .wu-mvh .lchev { transition: none; }
}

/* ------------------------------------- WU1-WU5 (in-session v1, 2026-11-03)
   The gym warm-up after Start: the list (WU1) -- eyebrow, title, the
   version in one line + Change, why it was picked, one focal card of its
   steps, what else is built in; the sheets (WU2 Change, WU5 Skip); guided,
   one move a screen (WU3 timed, WU4 reps). Sizes from the references. */
.wu-gym { gap: 0; padding-bottom: 28px; }
.wu-gym .wu-eye, .wu-guide .wu-eye { color: var(--quiet); font-size: 12.5px;
  letter-spacing: .13em; }
.wu-gym .wu-title { margin: 6px 0 0; font-size: 32px;
  letter-spacing: -.015em; }
.wu-verline { display: flex; align-items: center; gap: 10px;
  margin-top: 10px; }
.wu-verline b { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; }
button.wu-change { flex: none; width: auto; height: 34px; min-height: 0;
  margin: 0; padding: 0 14px; border-radius: 17px; background: var(--panel);
  border: 1px solid var(--line); color: var(--accent-soft); font-size: 14px;
  font-weight: 700; }
.wu-gym .wu-why { margin-top: 6px; font-size: 14px; color: var(--accent-soft);
  line-height: 1.4; }
.wu-ic { width: 14px; height: 14px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; vertical-align: -2px; }
.wu-why .wu-ic { margin-right: 6px; }
.wu-gcard { margin-top: 16px; padding: 6px 18px 14px; border-radius: 24px;
  gap: 0; }
.wu-gsh { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.wu-gsh b { flex: 1; font-size: 12.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--rv-eye, var(--ball)); }
.wu-gsh .wu-m { font-size: 13px; font-weight: 400; }
.wu-grow { display: flex; align-items: center; gap: 12px; min-height: 44px;
  border-top: 1px solid rgba(255, 255, 255, .07); }
.wu-gsh + .wu-grow { border-top: 0; }
.wu-grow .t { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600;
  line-height: 1.3; padding: 6px 0; }
.wu-grow .d { font-size: 15px; font-weight: 700; color: #c3c8d1;
  white-space: nowrap; }
.wu-built { margin: 14px 2px 0; font-size: 13.5px; line-height: 1.4;
  color: var(--quiet); }
.wu-bar button.c-quiet { align-self: center; color: #c3c8d1;
  font-weight: 700; }
.wu-bar .c-btn .wu-ic { width: 18px; height: 18px; }
.wu-hint { margin: 0 0 2px; text-align: center; font-size: 13.5px;
  color: var(--quiet); }

/* WU2 / WU5: the sheets */
.wu-shtitle { margin: 4px 0 0; font-size: 26px; font-weight: 800;
  line-height: 1.15; }
.wu-versheet .wu-sub, .wu-skipsheet .wu-sub { margin-top: -6px;
  font-size: 15px; }
button.wu-vcard { align-items: center; margin-top: 0; padding: 14px 16px;
  border-radius: 16px; min-height: 0; }
.wu-vcard .wu-lradio { margin-top: 0; }
.wu-vt { font-size: 16.5px; }
.wu-vt b { font-size: 16.5px; }
.wu-pk { color: var(--accent-soft); }
.wu-versheet .c-btn, .wu-skipsheet .c-btn { margin-top: 14px; }
.wu-short { margin: 0; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); font-size: 15px; line-height: 1.45;
  color: #c3c8d1; }
.wu-short .wu-ic { width: 20px; height: 20px; margin-top: 1px;
  color: var(--accent-soft); }
.wu-short b { color: var(--ink); }
.wu-skipsheet button.c-quiet { align-self: center; color: #c3c8d1;
  font-weight: 700; }

/* WU3 / WU4: one move a screen -- the picture panel (kernel's `px-`), or
   the no-picture layout's icon row; the move's place; the focal card. */
.wu-guide { gap: 0; padding-bottom: 28px; }
.wu-guide .px-panel { margin-bottom: 18px; }
.wu-gname { margin: 5px 0 0; font-size: 30px; font-weight: 800;
  letter-spacing: -.015em; line-height: 1.08; overflow-wrap: anywhere; }
.wu-prog { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.wu-dots { display: inline-flex; gap: 5px; align-items: center; }
.wu-dots i { width: 8px; height: 8px; border-radius: 4px; background: #2a3a4e; }
.wu-dots i.done { background: var(--ok); }
.wu-dots i.now { width: 20px; background: var(--focal); }
.wu-kn { flex: 1; font-size: 14px; font-weight: 700; color: #c3c8d1;
  white-space: nowrap; }
button.wu-tool { display: flex; flex-direction: column; align-items: center;
  gap: 4px; width: auto; min-height: 0; margin: 0; padding: 0; border: 0;
  background: none; color: var(--quiet); font-size: 11px; font-weight: 700; }
.wu-tool .o { width: 44px; height: 44px; border-radius: 22px;
  background: var(--panel); border: 1px solid var(--line); display: flex;
  align-items: center; justify-content: center; color: #c3c8d1; }
.wu-tool .o .wu-ic { width: 17px; height: 17px; }
.wu-tools { display: flex; gap: 18px; margin-top: 16px; }
button.wu-tool.wu-pill { flex-direction: row; gap: 6px; height: 34px;
  padding: 0 12px 0 10px; border-radius: 17px; background: var(--panel);
  border: 1px solid var(--line); color: #c3c8d1; font-size: 13px; }
.wu-guide .wu-demo { margin-top: 14px; }
.wu-dcard { margin-top: 16px; padding: 18px 20px; border-radius: 24px; gap: 0; }
.wu-timed { display: flex; align-items: center; gap: 18px; }
.wu-ring { width: 108px; height: 108px; flex: none; transform: rotate(-90deg); }
.wu-ring circle { fill: none; stroke-width: 8; }
.wu-ring .tr { stroke: #1d2a3b; }
.wu-ring .arc { stroke: var(--focal); stroke-linecap: round;
  stroke-dasharray: 263.89; transition: stroke-dashoffset 1s linear; }
.wu-tnum { min-width: 0; flex: 1 1 auto; }
/* Pause / Play beside the time (2026-11-04, Mid session 3.1): a round
   button, the session's blue; it dims when it is the Pause. */
button.wu-pp { flex: none; width: 56px; height: 56px; min-height: 0;
  margin: 0 0 0 auto; padding: 0; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  background: #1676d2; border: 0; color: #fff;
  box-shadow: 0 6px 18px rgba(22, 118, 210, .35); }
button.wu-pp.on { background: rgba(255, 255, 255, .08); color: #eef1f5;
  border: 1px solid var(--line, #1f3147); box-shadow: none; }
button.wu-pp .wu-ic { width: 24px; height: 24px; }
.wu-deye { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--rv-eye); }
.wu-left { margin: 4px 0 0; font-size: 52px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.wu-of { margin: 4px 0 0; font-size: 14px; color: var(--quiet); }
.wu-dose { margin: 6px 0 0; display: flex; align-items: baseline; gap: 10px; }
.wu-dose b { font-size: 60px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1; }
.wu-dose span { font-size: 20px; font-weight: 700; color: #c3c8d1; }
.wu-cue { margin: 12px 0 0; font-size: 15.5px; line-height: 1.4;
  color: #c3c8d1; }
@media (max-height: 700px) {
  .wu-gym .wu-title, .wu-gname { font-size: 26px; }
  .wu-gcard { margin-top: 12px; padding: 2px 16px 10px; }
  .wu-gsh { margin-top: 10px; }
  .wu-grow { min-height: 38px; }
  .wu-guide .px-panel { margin-bottom: 12px; }
  .wu-dcard { margin-top: 12px; padding: 14px 18px; }
  .wu-left, .wu-dose b { font-size: 44px; }
  .wu-ring { width: 88px; height: 88px; }
  button.wu-pp { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .wu-ring .arc { transition: none; }
}

/* W4: the band prep in a heavy rest. */
.wu-band { gap: 2px; }
.wu-bandeye { text-align: left; margin-bottom: 4px; }
.wu-band .wu-mv { border-top: 0; }
.wu-band .wu-sub { margin-top: 6px; }

/* The gap rule's strip, on the first exercise. */
.wu-reraise { display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 16px; background: var(--warn-fill);
  border: 1px solid var(--warn-line); color: var(--warn); }
.wu-reraise span { color: var(--ink); font-size: 14px; }

/* ------------------------------------------------------- the court prep */
.wu-court { padding: 12px 0 24px; }
.wu-head { display: flex; align-items: center; gap: 10px; }
.wu-htitle { flex: 1; margin: 0; text-align: center; font-size: 17px;
  font-weight: 700; }
.wu-hero { border-radius: 24px; padding: 16px; display: flex;
  flex-direction: column; gap: 10px; background: var(--raised-fill);
  --focal: var(--ok); }
.wu-heye { margin: 0; display: flex; align-items: center; gap: 8px;
  color: var(--ok); font-size: 12px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; }
.wu-heye i { width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--ok); box-shadow: 0 0 0 4px rgba(99, 210, 154, .2); }
.wu-hero h2 { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.1; }
.wu-hsub { margin: -4px 0 0; color: var(--quiet); font-size: 15px; }
.wu-note { margin: 0; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--accent-fill); background: var(--panel);
  font-size: 14px; line-height: 1.45; }
.wu-nocourt { margin: 0; color: var(--quiet); font-size: 14px;
  line-height: 1.45; }

/* A court prep's list (2026-10-22): the switch, its sections, its
   no-court line -- an overview's warm-up and Train's tennis card, each
   section closed: its head one tappable line, a › that turns open. */
.wu-list { display: flex; flex-direction: column; gap: 10px; }
.wu-fold { padding-top: 4px; padding-bottom: 4px; }
button.wu-shb { width: 100%; min-height: 44px; margin: 0; padding: 6px 0;
  border: 0; border-radius: 0; background: none; color: inherit;
  text-align: left; font: inherit; align-items: center; }
.wu-shb .wu-st { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; }
.wu-shb .lchev { border-color: var(--rec); transition: transform .18s ease; }
.wu-fold.open .wu-shb .lchev { transform: rotate(135deg); }
.wu-fold.open .wu-shb { padding-bottom: 8px; }
.wu-fold.open { padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
  .wu-shb .lchev { transition: none; }
}

/* Warm up first (2026-10-22): the court prep a session starts after, at
   the top of its overview -- the line, then the list under it. */
.wu-first { display: flex; flex-direction: column; gap: 14px; }
.wu-firstl { margin: 0; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 16px; font-size: 16px; font-weight: 700;
  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); }
.wu-firstl i { flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ok); }

/* Every routine, any time (2026-10-22): Train's row -- the building
   prompt's look, under Your day -- and its page: a row a routine, the
   version shown's name and length, a › that turns as it opens its list
   under it; the wait rules' row last. */
button.c-row.wu-rtrow { padding: 0 14px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--panel); }
.wu-rts { padding: 12px 0 24px; }
.wu-rt { display: flex; flex-direction: column; gap: 10px; }
button.c-row.wu-rth { padding: 0 16px; border: 1px solid var(--frost-line);
  border-radius: 22px; background: var(--card-fill);
  box-shadow: var(--card-lift); }
.wu-rth .c-rowt { font-size: 18px; font-weight: 800; }
.wu-rth .lchev { transition: transform .18s ease; }
.wu-rt.open > .wu-rth .lchev { transform: rotate(135deg); }
@media (prefers-reduced-motion: reduce) {
  .wu-rth .lchev { transition: none; }
}

/* --------------------------------------------- the sheets (M1, M3) */
.wu-layer .c-sheet { max-height: 88vh; overflow-y: auto; }
.wu-wtop { display: flex; align-items: flex-start; gap: 10px; }
.wu-wtop .grow { flex: 1; min-width: 0; }
.wu-weye, .wu-leye { margin: 0; color: var(--comp); font-size: 12px;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.wu-wtitle, .wu-ltitle { margin: 4px 0 0; font-size: 26px; font-weight: 800;
  line-height: 1.15; }
.wu-wband { border-radius: 18px; overflow: hidden; border: 1px solid
  var(--line); background: var(--panel); margin-top: 10px;
  /* DRIVEN 2026-10-22 at 375x812 (reached from Train's Warm-up routines):
     a flex item of the scrolling sheet, each band shrank to about half its
     lines (147 of 306 px) and the sheet never scrolled -- the lead sheet's
     cards' defect (.wu-lcard). It keeps its height; the sheet scrolls. */
  flex-shrink: 0; }
.wu-wbh { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); }
.wu-wbh b { font-size: 22px; }
.wu-wbh span { color: var(--quiet); font-weight: 700; }
.wu-wband.b0 .wu-wbh b { color: var(--ok); }
.wu-wband.b1 .wu-wbh b { color: var(--comp); }
.wu-wband.b2 .wu-wbh b { color: var(--bad); }
.wu-wband ul { margin: 0; padding: 10px 14px 12px 30px; display: flex;
  flex-direction: column; gap: 8px; }
.wu-wband li { line-height: 1.4; }
.wu-wband ul.sub { padding: 6px 0 0 18px; gap: 4px; color: var(--quiet); }

.wu-lcard { display: flex; gap: 12px; align-items: flex-start; width: 100%;
  text-align: left; padding: 14px; border-radius: 20px; margin-top: 10px;
  background: var(--panel); border: 1.5px solid var(--line); color: inherit;
  /* DRIVEN 2026-10-14 at 375x812: a flex item of the scrolling sheet, a
     button's min-height let it shrink below its timeline, which spilled
     out of the card -- it keeps its height and the sheet scrolls. */
  flex-shrink: 0; }
.wu-lcard.on { border-color: var(--accent); background: var(--panel-2); }
.wu-lradio { flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line); margin-top: 2px; }
.wu-lcard.on .wu-lradio { border-color: var(--accent);
  box-shadow: inset 0 0 0 5px var(--panel-2), inset 0 0 0 12px var(--accent); }
.wu-lbody { flex: 1; min-width: 0; display: flex; flex-direction: column;
  gap: 4px; }
.wu-lbody b { font-size: 18px; }
.wu-lbody .s { color: var(--quiet); font-size: 14px; line-height: 1.4; }
.wu-tl { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.wu-tlr { display: grid; grid-template-columns: 46px 14px 1fr; align-items:
  center; gap: 8px; font-size: 14px; }
.wu-tlr i { font-style: normal; color: var(--quiet);
  font-variant-numeric: tabular-nums; }
.wu-tlr u { width: 10px; height: 10px; border-radius: 50%;
  background: var(--quiet); }
.wu-tlr.match_warmup u, .wu-tlr.pre_match u { background: var(--ok); }
.wu-tlr.warmup_hit u { background: var(--accent); }
.wu-tlr.match u { background: var(--comp); }
.wu-tlr.match span { color: var(--comp); }
.wu-tlr.rest u { background: #3a4558; }

/* Board 71, "Which match lead-in?" (Schedule 1c, 2026-11-07): the
   sheet in the 1c colours, the × top right beside the title, each way a
   raised card -- solid blue when chosen, its round check at the right,
   white -- its timeline under a rule, every dot the same. Scoped to the
   lead-in sheet: the version sheet (`.wu-vcard`) and Today's match card
   (`.tp-lead`) share these parts and keep their look. WAS the radio at
   the left, an outlined card, a dot in each part's colour. */
.wu-leadsheet .sheet.c-sheet { position: relative;
  background: var(--c1-sheet); border-top: 1px solid var(--c1-sheet-line);
  border-radius: 28px 28px 0 0; }
.wu-leadsheet .c-grab i { background: #3d5170; }
.wu-leadsheet .c-sheet > .c-sheethead { position: absolute; top: 26px;
  right: 12px; z-index: 1; min-height: 0; margin: 0; }
.wu-leadsheet button.c-back.c-close { padding: 12px; background: #17233a;
  border: 1px solid #2f4262; color: #c3cddb; }
.wu-leadsheet .wu-leye { padding-right: 52px; color: var(--c1-icon);
  font-size: 12.5px; letter-spacing: .12em; }
.wu-leadsheet .wu-ltitle { margin-top: -8px; padding-right: 52px;
  font-size: 24px; line-height: 1.2; }
.wu-leadsheet .wu-sub { margin-top: -2px; color: var(--c1-sub);
  font-size: 15px; line-height: 1.5; }
.wu-leadsheet .wu-lcard { display: block; width: calc(100% + 8px);
  margin: 0 -4px; padding: 14px; border-radius: 20px;
  background: var(--c1-tile); border: 1px solid var(--c1-tile-line);
  box-shadow: var(--c1-tile-lift); color: var(--c1-ink); }
.wu-leadsheet .wu-lcard + .wu-lcard { margin-top: -2px; }
.wu-leadsheet .wu-lcard.on { background: var(--c1-on);
  border-color: var(--c1-on-line); box-shadow: var(--c1-on-lift); }
.wu-leadsheet .wu-lbody { display: block; }
.wu-lhead { display: flex; align-items: center; gap: 12px; }
.wu-lhead b { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; }
.wu-leadsheet .wu-lradio { display: flex; align-items: center;
  justify-content: center; box-sizing: border-box; width: 26px;
  height: 26px; margin: 0; border: 2px solid #6f86a6; }
.wu-leadsheet .wu-lradio svg { display: none; width: 16px; height: 16px;
  fill: none; stroke: #1f61a6; stroke-width: 3.4; stroke-linecap: round;
  stroke-linejoin: round; }
.wu-leadsheet .wu-lcard.on .wu-lradio { background: #fff;
  border-color: #fff; box-shadow: none; }
.wu-leadsheet .wu-lcard.on .wu-lradio svg { display: block; }
.wu-leadsheet .wu-lbody .s { display: block; margin-top: 8px;
  color: var(--c1-sub); font-size: 14px; line-height: 1.45; }
.wu-leadsheet .wu-lcard.on .wu-lbody .s { color: rgba(255, 255, 255, .92); }
.wu-leadsheet .wu-tl { gap: 0; margin-top: 12px; padding-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, .14); }
.wu-leadsheet .wu-tl .wu-tlr { grid-template-columns: 46px 8px 1fr;
  gap: 10px; margin-top: 7px; font-size: 14px; line-height: 1.25; }
.wu-leadsheet .wu-tl .wu-tlr i { color: var(--c1-ink); font-weight: 800; }
.wu-leadsheet .wu-tl .wu-tlr u { width: 8px; height: 8px;
  background: var(--c1-icon); }
.wu-leadsheet .wu-tl .wu-tlr span { color: #c9d3e0; }
.wu-leadsheet .wu-tl .wu-tlr.rest span { color: var(--c1-hint); }
.wu-leadsheet .wu-lcard.on .wu-tl .wu-tlr u { background: #fff; }
.wu-leadsheet .wu-lcard.on .wu-tl .wu-tlr span { color: #fff; }
.wu-leadsheet .wu-lcard.on .wu-tl .wu-tlr.rest span {
  color: rgba(255, 255, 255, .75); }
.wu-leadsheet .c-sheet > button.c-btn { min-height: 58px; margin-top: 8px;
  border-radius: 18px; background: var(--c1-pri);
  box-shadow: var(--c1-pri-lift); color: #fff; font-size: 17px;
  font-weight: 800; }
.wu-leadsheet .wu-quiet { color: #9aa6b6; font-size: 13.5px; }

/* ------------------------- the match lead-in, whole (2026-10-14) */
/* The Schedule's Match lead-in tile opened: the court prep page's head
   and hero, then its parts as rows -- the time, a dot in the part's
   colour (M1's timeline's), the name, its length, a › where it opens. */
.wu-lead { padding: 12px 0 24px; }
.wu-lplist { background: var(--card-fill); box-shadow: var(--card-lift);
  border: 1px solid var(--frost-line); border-radius: 22px; padding: 2px 16px;
  display: flex; flex-direction: column; }
.wu-lprow { display: grid; grid-template-columns: 46px 12px 1fr auto 14px;
  align-items: center; gap: 8px; width: 100%; min-height: 52px; margin: 0;
  padding: 8px 0; border: 0; border-top: 1px solid var(--frost-line);
  border-radius: 0; background: none; color: inherit; text-align: left;
  font: inherit; font-size: 16px; }
.wu-lprow:first-child { border-top: 0; }
.wu-lprow i { font-style: normal; color: var(--quiet);
  font-variant-numeric: tabular-nums; }
.wu-lprow u { width: 10px; height: 10px; border-radius: 50%;
  background: var(--quiet); }
.wu-lprow b { font-weight: 700; min-width: 0; }
.wu-lpm { color: var(--quiet); font-size: 14px; white-space: nowrap; }
.wu-lprow.match_warmup u, .wu-lprow.pre_match u { background: var(--ok); }
.wu-lprow.warmup_hit u { background: var(--accent); }
.wu-lprow.match u { background: var(--comp); }
.wu-lprow.match b { color: var(--comp); }
.wu-lprow.rest u, .wu-lprow.wait u { background: #3a4558; }
.wu-lead .c-link { align-self: center; }

/* ------------------------------------------------------- Today (M2) */
/* (2026-10-24: the match card -- `.tp-matchcard` -- went with TR7: the
   match is its row in Today's list.) */
.tp-lead { background: var(--card-fill); box-shadow: var(--card-lift);
  border: 1px solid var(--frost-line); border-radius: 22px; padding: 14px 16px; }
.tp-leadh { display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px; }
.tp-leadh h3 { margin: 0; flex: 1; font-size: 19px; }
.tp-lead .wu-tlr { font-size: 16px; padding: 4px 0; }
.tp-lead .wu-tlr.done u { box-shadow: none; }
.tp-lead .wu-tlr:not(.done) u { background: none; border: 2px solid
  var(--quiet); }
.tp-lead .wu-tlr.match_warmup:not(.done) u,
.tp-lead .wu-tlr.pre_match:not(.done) u { border-color: var(--ok); }
.tp-lead .wu-tlr.warmup_hit:not(.done) u { border-color: var(--accent); }
.tp-lead .wu-tlr.match:not(.done) u { border-color: var(--comp); }
.tp-waitbar { display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; padding: 12px 14px; border-radius: 18px;
  border: 1px solid var(--warn-line); background: var(--warn-fill);
  color: var(--ink); }
.tp-waitbar .grow { flex: 1; min-width: 0; }
.tp-waitbar b { display: block; font-size: 17px; color: var(--ink); }
.tp-waitbar span { color: var(--comp); font-size: 14px; }
.tp-waitbar.pinned { position: sticky; bottom: calc(96px
  + env(safe-area-inset-bottom)); z-index: 6; }