/* ── Session Classic (WS3) ────────────────────────────────────────────────
   Rebuilt to design-source/CoachSession.dc.html + screenshots 06 / 33 / 36.
   Scoped to #home-session[data-layout="classic"] so WS4 (Focus) and WS5
   (Timeline) can style the SAME mount off their own data-layout value without
   any of the three packages fighting over a selector.

   Tokens only - every colour reads css/workout.css :root, so all three themes
   (light / dark / notebook) come out right with no per-theme rule here.
   Motion comes from css/motion.css (wlOpen, .wl-chevron, .wl-press-*,
   .wl-drag-lift, .wl-drag-slide); nothing below redefines a curve or duration. */

#home-session[data-layout="classic"]{display:flex;flex-direction:column;gap:12px}

/* ── Session header: workout timer + running volume + rest ──────────────
   SPEC "Timers": the rest countdown is ALWAYS the loudest numeral - 30px bold
   mono accent in Classic. The workout elapsed stays small beside it. */
.wl-sess-hdr{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 14px;background:var(--s1);
  border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);
  margin:0 -16px;
}
.wl-sess-hdr-kicker{
  font-size:10px;font-weight:600;letter-spacing:.09em;color:var(--mut);
  display:flex;align-items:center;gap:8px;
}
/* The kicker text is its OWN flex item (js/workout/session.js wraps it in a span)
   rather than a bare text node. Two things follow: a flex item is a block box, so
   text-wrap:balance applies and the long date breaks as two EVEN lines instead of
   greedy-filling and orphaning a lone "9" onto line two (Brandon's phone note);
   and min-width:0 lets it shrink rather than push the gear around. The wording is
   unchanged. Progressive: a browser without text-wrap simply keeps today's wrap. */
.wl-sess-hdr-kicker-txt{min-width:0;text-wrap:balance}
/* The gear stays pinned to the FIRST line, top right of the kicker, when the text
   takes two. It is already flex:none, so it can never wrap onto a line of its own. */
.wl-sess-hdr-kicker .wl-sess-gear{align-self:flex-start}
/* D4: settings reachable mid-session. Sits on the kicker line, deliberately away
   from the rest numeral so it can never be fat-fingered instead of the clock. */
.wl-sess-gear{
  width:28px;height:28px;border-radius:50%;flex:none;padding:0;
  background:none;border:1px solid var(--b1);color:var(--mut2);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  position:relative;
}
.wl-sess-gear::after{content:"";position:absolute;inset:-8px}  /* >=44px touch target */
.wl-sess-gear svg{width:15px;height:15px}
.wl-sess-elapsed{font:600 22px/1.15 var(--font-num);color:var(--txt)}
.wl-sess-vol{font:600 10.5px var(--font-num);color:var(--mut2);margin-top:2px;white-space:nowrap}

.wl-rest-wrap{display:flex;align-items:center;gap:8px;flex:none}
.wl-rest-adj{
  width:40px;height:40px;border-radius:10px;background:var(--s2);border:none;
  display:flex;align-items:center;justify-content:center;
  font:600 12px var(--font-num);color:var(--mut2);cursor:pointer;
}
.wl-rest-mid{text-align:center;cursor:pointer;background:none;border:none;padding:0}
.wl-rest-lbl{font-size:10px;font-weight:700;letter-spacing:.09em;color:var(--mut)}
/* THE loudest numeral in Classic (SPEC "Timers": 30px classic). */
.wl-rest-num{font:700 30px/1.05 var(--font-num);color:var(--acc)}
.wl-rest-hint{font-size:9px;color:var(--mut)}
/* Rest over: warning-bg pill "REST OVER . GO" with a pulse. */
.wl-rest-over-pill{
  background:var(--org);color:var(--s1);padding:11px 16px;border-radius:12px;
  font:700 13px var(--font-num);letter-spacing:.04em;border:none;cursor:pointer;
  animation:wlRestOverPulse 1.1s ease-in-out infinite;
}
@keyframes wlRestOverPulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ── Exercise card ───────────────────────────────────────────────────── */
.wl-ex-card{
  position:relative;background:var(--s1);border:1px solid var(--b1);border-radius:18px;
  /* R2 "Layered": soft dual shadows on cards. */
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08);
  user-select:none;-webkit-user-select:none;
}
/* DELTA RE-AUDIT B3 (round 2): the card must NOT declare touch-action:none. It is
   about three quarters of a phone viewport on a very long page, so blocking touch
   here kills scrolling over most of the screen - and a descendant can never
   re-widen an ancestor's touch-action, so the per-child escape hatch that shipped
   with the first fix was inert. Only the narrow drag handle opts out now. */
.wl-drag-handle{touch-action:none;cursor:grab}
.wl-drag-handle:active{cursor:grabbing}
.wl-ex-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 14px}
.wl-ex-name{font-size:16px;font-weight:650;line-height:1.2;color:var(--txt)}
.wl-ex-titles{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wl-ex-summary{font:500 11.5px var(--font-num);color:var(--mut);margin-top:3px}

.wl-ex-chip{
  font:600 9.5px var(--font-num);letter-spacing:.05em;padding:2px 7px;border-radius:999px;
  white-space:nowrap;flex:none;
}
/* D3: the muscle badge. With group section headers gone this is the only place
   the trainee sees which muscle a card trains, so it leads the chip row and takes
   the muscle hue from the shared --mc the rest of the app uses for badges. */
.wl-ex-muscle{
  font:700 9.5px var(--font-num);letter-spacing:.05em;padding:2px 7px;border-radius:999px;
  white-space:nowrap;flex:none;
  color:var(--mc);border:1px solid var(--mc);
  background:color-mix(in srgb, var(--mc) 12%, transparent);
}
.wl-ex-chip.main{border:1px solid var(--acc);color:var(--acc)}
.wl-ex-chip.first{border:1px solid var(--org);color:var(--org)}
.wl-ex-chip.bw{background:var(--s2);color:var(--mut2);border:1px solid transparent}

/* Combined card-header stat chip - R2 set-stat precedence: ONE chip carrying
   both the volume and the weight delta ("VOL up4% . +5 LB"), so neither delta
   can overwrite the other. Per-set rows keep their own independent deltas. */
.wl-ex-statchip{
  font:600 9.5px var(--font-num);letter-spacing:.02em;padding:4px 8px;border-radius:999px;
  white-space:nowrap;
}
.wl-ex-statchip.up{background:var(--gdim);color:var(--grn)}
.wl-ex-statchip.down{background:var(--rdim);color:var(--red)}
.wl-ex-statchip.held{background:var(--s3);color:var(--mut2)}

.wl-ex-actions{display:flex;align-items:center;gap:6px;flex:none}
.wl-ex-btn{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--b1);background:none;
  display:flex;align-items:center;justify-content:center;color:var(--mut2);cursor:pointer;
  padding:0;position:relative;
}
.wl-ex-btn svg{width:13px;height:13px}
/* >=44px hit target without a 44px box (SPEC R1: 34-42px visual, >=44px touch). */
.wl-ex-btn::after{content:"";position:absolute;inset:-5px}
.wl-ex-btn.active{border-color:var(--acc);color:var(--acc);background:var(--adim)}

.wl-ex-body{padding:0 14px 10px}

/* ── Last time chips + today's goal ──────────────────────────────────────
   R2 "Last time": per-set chips (135x6 . 125x8 ...) aligned with the goal
   line. Goal and last-time are built from the SAME source so they can never
   contradict each other (see wlClassicGoalLine in js/workout/session.js). */
.wl-lasttime{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.wl-lasttime-lbl{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--mut)}
.wl-lasttime-chip{
  font:600 11.5px var(--font-num);padding:3px 8px;border-radius:7px;
  background:var(--s2);color:var(--mut2);
}
.wl-lasttime-chip .x{color:var(--mut)}

/* B1-T4: SETUP row, a pixel-sibling of .wl-lasttime placed directly above it
   (same label + chip classes, reused as-is). This modifier only adds spacing +
   the tap affordance so SETUP never touches the LAST TIME row under it.
   F2 fix (audit B1-T4 round 1, reverted round 2): padding-block + a negative
   margin-block was tried to widen the hit area to 44px, but since this row is
   the first in-flow child of .wl-ex-body, the negative top margin collapsed
   through the parent and shifted the whole card body up, so a tap just below
   the exercise name hit SETUP instead of the collapse/drag-reorder surface.
   The negative bottom margin also collapsed with .wl-goal's own margin, so
   the LAST-TIME-absent gap doubled from 7px to 14px.
   fix2 (round 2 delta): no padding/margin tricks. Keep the painted row exactly
   as before (margin-bottom:7px only) and extend the tap target DOWNWARD only
   with an absolutely positioned pseudo-element, so it can never eat into the
   card head above and only ever overlaps the (non-tappable) LAST TIME / goal
   line below. Row paints at 21.2px with the production webfont (measured, audit round 3), so bottom:-23px gives a
   approximately 44px hit box. */
.wl-setup-row{position:relative;cursor:pointer;margin-bottom:7px}
.wl-setup-row::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-23px}
.wl-setup-val{color:var(--txt)}

.wl-goal{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:7px 0 9px;padding:7px 10px;border-radius:9px;background:var(--adim);
}
.wl-goal-lbl{font:700 10px var(--font-num);letter-spacing:.05em;color:var(--acc)}
.wl-goal-txt{font-size:12.5px;font-weight:650;color:var(--acc)}

/* Coach suggestion (accent) + target line (warn), per SPEC screen 3. */
.wl-coach-line{font-size:12px;font-weight:600;color:var(--acc);padding:2px 0 6px}
.wl-target-line{font-size:12px;font-weight:600;color:var(--org);padding:2px 0 6px}

/* ── The set grid ────────────────────────────────────────────────────────
   Design grid: SET . LB . x . REPS . RIR . actions.

   NOTE (deliberate, load-bearing): the DOM order inside a row is
   reps-input THEN lbs-input, while the VISUAL order is LB then REPS. Every
   column is placed explicitly with grid-column, so the two orders are
   independent. This is what lets the design's LB-first layout ship without
   breaking the existing `#sr-... input:nth-of-type(1|2)` selectors that
   propagateSetsFromTop / restoreStraightPrefill / toggleInj write through
   (reps = nth-of-type(1), lbs = nth-of-type(2)). Reordering the DOM instead
   would have silently swapped weight and reps in every propagation path. */
/* Scoped to the Classic layout, and styled off the class names the set list
   ALREADY used (.set-hdr / .set-row / .set-hdr-* / .set-input). Nothing had to be
   renamed to move onto the grid, so every selector the rest of the app and the
   test suite address these rows by keeps working. Focus (WS4) and Timeline (WS5)
   style the same markup off their own data-layout value. */
/* 2026-09-10 (Brandon: "the UI still doesn't look centered"): the legacy
   `.sets-area{padding:10px 14px 12px}` in css/workout.css indented the set rows
   14px on each side INSIDE the card body, so the rows (and the dashed volume
   line under them) sat visibly narrower than the goal box and last-time chips
   directly above. The Classic layout drops that side padding: the rows now run
   the full body width, flush with everything else in the card, and gain 28px of
   room on every phone. */
#home-session[data-layout="classic"] .sets-area{padding:10px 0 12px}
/* Design pass 24 grid: SET(18) · LB(66) · ×(10) · REPS(52) · RIR(44) · tail(1fr).
   The DOM keeps reps-then-lbs order (propagation writes by nth-of-type); every
   cell is placed by an explicit grid-column, so LB paints first on screen.
   2026-09-10 (Brandon phone test): the tail holds three 34px buttons (~108px), so
   the fixed tracks + gaps + tail add up to ~340px and on a 360-384px phone the
   grid was WIDER than the row box: the last button(s) hung outside it and the
   warm-up / done tint stopped short of the check circle. LB, REPS and RIR are now
   minmax() tracks that sit at their design width when there is room and give up
   a few px each only when there is not, and the gap drops 6 -> 4, so the tint
   always reaches the check. The design widths are unchanged on any phone >= 400. */
#home-session[data-layout="classic"] .set-hdr,
#home-session[data-layout="classic"] .set-row{
  display:grid;
  grid-template-columns:18px minmax(50px,66px) 10px minmax(40px,52px) minmax(38px,44px) 1fr;
  gap:0 4px;align-items:center;
}
#home-session[data-layout="classic"] .set-hdr{
  font-size:9.5px;padding:0 7px 5px;font-weight:600;letter-spacing:.08em;color:var(--mut);
}
/* ROOT CAUSE FIX (hotfix/classic-setrow-grid): every cell below already carries the
   right grid-column, but none carried a grid-row - so the browser's sparse
   auto-placement cursor decided it for them. That cursor only ever moves FORWARD
   through a row; the markup emits columns out of left-to-right order (1,4,3,2,5,6 -
   reps-before-lbs in the DOM, LB-first on screen), so each time a cell's column was
   behind the cursor's current position the engine bumped it to a new row instead of
   backtracking. Pinning grid-row:1 on every header/main cell removes that
   order-dependence entirely; the column values (unchanged) still do 100% of the
   visual placement. */
#home-session[data-layout="classic"] .set-hdr .set-num{grid-column:1;grid-row:1}
#home-session[data-layout="classic"] .set-hdr .set-hdr-lbs{grid-column:2;grid-row:1;text-align:center}
#home-session[data-layout="classic"] .set-hdr .set-sep{grid-column:3;grid-row:1;visibility:hidden}
#home-session[data-layout="classic"] .set-hdr .set-hdr-reps{grid-column:4;grid-row:1;text-align:center}
#home-session[data-layout="classic"] .set-hdr .set-hdr-rir{grid-column:5;grid-row:1;text-align:center}
#home-session[data-layout="classic"] .set-hdr .set-hdr-tail{grid-column:6;grid-row:1}

/* Every row is a BAND (Brandon 2026-09-10): plain rows used to draw only a faint
   top rule, so beside a tinted warm-up or done row the 8px row gap plus the next
   row's padding read as "extra space under S2/S3" and the row looked off-centre,
   even though every row measures 44px with the inputs 3px from each edge. A faint
   surface wash on plain rows makes each row's real edges visible, so the centring
   reads the same on every row; warm-up / done rows still override it with their
   own tint. The legacy top rule and the legacy 8px margin (css/workout.css) are
   replaced by one explicit 6px row gap. */
#home-session[data-layout="classic"] .set-row{
  min-height:44px;border-top:none;margin:0 0 6px;padding:0 7px;border-radius:8px;
  background:color-mix(in srgb, var(--s2) 55%, transparent);
}
/* The set label and the action buttons span rows 1-2 and centre, so when the
   LBS | REPS | VOL strip (row 2) is present they sit in the middle of the tinted
   band rather than hugging its top edge (Brandon 2026-09-10). With no strip, row 2
   is empty and this is exactly row 1. */
#home-session[data-layout="classic"] .set-row .set-num{grid-column:1;grid-row:1/3;align-self:center;font:600 13px var(--font-num);color:var(--mut)}
#home-session[data-layout="classic"] .set-row .set-sep{grid-column:3;grid-row:1;font-size:13px;color:var(--mut)}
/* The two inputs are placed by POSITION, matching the nth-of-type selectors the
   propagation code writes through: input 1 is reps (visual column 4), input 2 is
   lbs (visual column 2). Keying the placement off the same ordinal the JS uses
   means the layout and the writes can never drift apart. */
#home-session[data-layout="classic"] .set-row input.set-input:nth-of-type(1){grid-column:4;grid-row:1}
#home-session[data-layout="classic"] .set-row input.set-input:nth-of-type(2){grid-column:2;grid-row:1}
/* Design pass 25.2: the RIR cell is a dashed pencil WELL (44px column). Tapping
   it opens an in-row chip strip rendered ON TOP of the tapped well. */
#home-session[data-layout="classic"] .set-row .set-rir{grid-column:5;grid-row:1;position:relative;display:flex;justify-content:center}
#home-session[data-layout="classic"] .set-row .wl-rir-well{
  width:100%;height:38px;padding:0;border-radius:9px;background:var(--s2);
  border:1px dashed var(--b1);
  font:650 13px var(--font-num);color:var(--pencil);text-align:center;
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
}
#home-session[data-layout="classic"] .set-row .wl-rir-well::after{content:"";position:absolute;inset:-3px}
/* Logged: solid border + full ink (never pencil, never a prefilled 0). */
#home-session[data-layout="classic"] .set-row .wl-rir-well.set{border-style:solid;color:var(--txt);font-weight:700}
/* The chip strip covers the row from the RIR well leftward while open. */
#home-session[data-layout="classic"] .set-row .set-rir.open{z-index:5}
#home-session[data-layout="classic"] .set-row .wl-rir-pop{
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  display:flex;gap:5px;padding:6px;border-radius:11px;
  background:var(--s1);border:1px solid var(--b2);box-shadow:0 10px 28px rgba(0,0,0,.35);
  z-index:6;
}
#home-session[data-layout="classic"] .set-row .wl-rir-chip{
  min-width:34px;height:38px;border-radius:9px;background:var(--s2);border:none;
  font:650 14px var(--font-num);color:var(--mut2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
#home-session[data-layout="classic"] .set-row .wl-rir-chip.sel{background:var(--acc);color:var(--acc-text)}
#home-session[data-layout="classic"] .set-row .wl-row-actions{grid-column:6;grid-row:1/3;align-self:center;display:flex;justify-content:flex-end;gap:4px}
/* The vs-last read sits under the numbers, spanning the data columns. Explicit
   grid-row (rather than letting auto-placement fall through) keeps it on its own
   line under row 1 regardless of the row-1 cells' out-of-order columns above. */
#home-session[data-layout="classic"] .set-row .set-cmp{
  grid-column:2/6;grid-row:2;font:500 10.5px var(--font-num);color:var(--mut);
  padding:2px 0 8px;white-space:nowrap;
}
/* LBS | REPS | VOL detail strip under a logged working set (Brandon 2026-09-10).
   Three fixed slots, label muted, value inked on its own direction with the same
   ok / dgr / neutral colours the badge grammar uses. Empty cell = nothing rendered. */
#home-session[data-layout="classic"] .set-row .set-cmp:empty{display:none}
#home-session[data-layout="classic"] .wl-set-detail{display:flex;gap:14px;align-items:baseline}
#home-session[data-layout="classic"] .wl-sd-cell{display:inline-flex;gap:5px;align-items:baseline;justify-content:center}
/* Where subgrid is available (Chrome 117+, Safari 16+) each delta sits directly
   under its own column: LBS under LB, REPS under REPS, VOL under the RIR well. */
@supports (grid-template-columns:subgrid){
  #home-session[data-layout="classic"] .wl-set-detail{display:grid;grid-template-columns:subgrid;grid-column:1/5;gap:0}
  #home-session[data-layout="classic"] .set-row .set-cmp{display:grid;grid-template-columns:subgrid}
  #home-session[data-layout="classic"] .wl-sd-cell:nth-child(1){grid-column:1}
  #home-session[data-layout="classic"] .wl-sd-cell:nth-child(2){grid-column:3}
  #home-session[data-layout="classic"] .wl-sd-cell:nth-child(3){grid-column:4}
}
#home-session[data-layout="classic"] .wl-sd-lab{font:600 9px var(--font-num);letter-spacing:.08em;color:var(--mut)}
#home-session[data-layout="classic"] .wl-sd-val{font:700 11px var(--font-num);color:var(--txt)}
#home-session[data-layout="classic"] .wl-sd-val.up{color:var(--grn)}
#home-session[data-layout="classic"] .wl-sd-val.down{color:var(--red)}
/* Carried along by the grid but not part of the visible column set. Its own row so
   it can never share a cell with .set-cmp when both are present at once. */
#home-session[data-layout="classic"] .set-row .set-rest{grid-column:2/6;grid-row:3;font-size:10px;color:var(--mut)}
#home-session[data-layout="classic"] .set-row .set-inj{grid-column:1/7;grid-row:4}

/* ── PER-SIDE PLATE CALCULATOR (F0905-T5, re-opened 2026-09-09) ───────────
   The pad used to be opened by a "PL" chip parked in the row's one spare grid
   cell (column 1, row 2). That cell only exists because .set-cmp lives on row 2,
   so on every row WITHOUT a comparison the chip forced a second grid line into
   being and the logging card stopped lining up; on a warm-up row it also sat
   outside the tinted band. The chip and all three of its rules are DELETED.
   The pad is now opened by pressing and holding the weight box itself, wired in
   attachClassicDrag (js/workout/session.js) with the same wlPressAndHold helper
   the scheme button and the card head use. Nothing about the pad, its markup or
   its maths changed. Zero new tokens: every colour here is an existing var. */
/* The weight box is the gesture surface, so iOS must not raise its own callout
   ("Select / Paste") on top of the hold. Scoped to the lbs input - visual column
   2, the same nth-of-type ordinal the propagation code writes by - so the reps
   box keeps stock behaviour. No touch-action here: that would kill scrolling. */
#home-session[data-layout="classic"] .set-row input.set-input:nth-of-type(2){
  -webkit-touch-callout:none;
}
/* The pad is a SIBLING of the set row, so it is a plain block - not a grid cell. */
#home-session[data-layout="classic"] .plates-pad{
  margin:0 0 8px;padding:9px 10px;border-radius:10px;
  background:var(--s2);border:1px solid var(--b1);
  display:flex;flex-direction:column;gap:7px;
}
#home-session[data-layout="classic"] .plates-pad .plates-line{display:flex;align-items:center;gap:7px}
#home-session[data-layout="classic"] .plates-pad .plates-lab{
  font:600 9.5px var(--font-num);letter-spacing:.08em;color:var(--mut);flex:none;min-width:52px;
}
#home-session[data-layout="classic"] .plates-pad .plates-in{
  flex:1;min-width:0;height:34px;border-radius:8px;border:1px solid var(--b1);
  background:var(--s1);color:var(--txt);text-align:center;
  font:650 15px var(--font-num);outline:none;-moz-appearance:textfield;padding:0 6px;
}
#home-session[data-layout="classic"] .plates-pad .plates-in::-webkit-outer-spin-button,
#home-session[data-layout="classic"] .plates-pad .plates-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#home-session[data-layout="classic"] .plates-pad .plates-in:focus{box-shadow:inset 0 0 0 1.5px var(--acc)}
#home-session[data-layout="classic"] .plates-pad .plates-in::placeholder{font:italic 500 13px var(--font-num);color:var(--pencil)}
#home-session[data-layout="classic"] .plates-pad .plates-unit{font:600 11px var(--font-num);color:var(--mut);flex:none;width:16px}
#home-session[data-layout="classic"] .plates-pad .plates-clr{
  flex:none;width:16px;height:34px;border:none;background:none;color:var(--mut);
  font-size:15px;cursor:pointer;padding:0;
}
#home-session[data-layout="classic"] .plates-pad .plates-chips{display:flex;flex-wrap:wrap;gap:5px}
#home-session[data-layout="classic"] .plates-pad .plates-chip{
  height:32px;min-width:40px;padding:0 8px;border-radius:8px;
  border:1px solid var(--b1);background:var(--s1);color:var(--txt);
  font:650 12.5px var(--font-num);cursor:pointer;
}
#home-session[data-layout="classic"] .plates-pad .plates-chip:active{background:var(--adim);border-color:var(--acc)}
#home-session[data-layout="classic"] .plates-pad .plates-foot{display:flex;align-items:center;gap:7px}
#home-session[data-layout="classic"] .plates-pad .plates-total{
  flex:1;min-width:0;font:700 13px var(--font-num);color:var(--txt);white-space:nowrap;
}
#home-session[data-layout="classic"] .plates-pad .plates-total.bad{color:var(--red)}
#home-session[data-layout="classic"] .plates-pad .plates-cancel{
  height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--b1);
  background:none;color:var(--mut);font:600 12px var(--font-ui);cursor:pointer;flex:none;
}
#home-session[data-layout="classic"] .plates-pad .plates-ok{
  height:34px;padding:0 16px;border-radius:8px;border:1px solid var(--acc);
  background:var(--acc);color:var(--acc-text);font:700 12px var(--font-ui);cursor:pointer;flex:none;
}
#home-session[data-layout="classic"] .plates-pad .plates-ok:disabled{
  background:none;border-color:var(--b1);color:var(--mut2);cursor:default;
}

/* Current / suggested: pencil italic values in input wells (the soft-prefill
   model - muted until the user confirms or types, then solid ink). */
#home-session[data-layout="classic"] .set-row .set-input{
  height:38px;width:100%;border-radius:10px;background:var(--s2);border:none;
  text-align:center;font:650 17px var(--font-num);color:var(--txt);
  outline:none;-moz-appearance:textfield;
}
#home-session[data-layout="classic"] .set-row .set-input::-webkit-outer-spin-button,
#home-session[data-layout="classic"] .set-row .set-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#home-session[data-layout="classic"] .set-row .set-input:focus{box-shadow:inset 0 0 0 1.5px var(--acc)}
/* SOFT = the app's own guess: pencil, italic, lighter weight. Typing hardens it. */
#home-session[data-layout="classic"] .set-row .set-input.soft{font:italic 500 17px var(--font-num);color:var(--pencil)}
#home-session[data-layout="classic"] .set-row .set-input::placeholder{font:italic 500 15px var(--font-num);color:var(--pencil)}

/* Warm-up rows: subdued t3, with the W badge rendered active. */
#home-session[data-layout="classic"] .set-row.warmup{background:var(--adim);color:var(--mut)}
#home-session[data-layout="classic"] .set-row.warmup .set-input{font-size:15px;font-weight:500;color:var(--mut)}
#home-session[data-layout="classic"] .set-row.warmup .set-num{color:var(--acc);font-weight:600}

/* Done rows: solid success check + a faint green row wash. */
#home-session[data-layout="classic"] .set-row.done{background:var(--gdim)}

/* A regression is a FACT, not shame: danger-coloured value + a down tag. The
   flag sits on the ROW so the inputs' own class attribute stays reserved for
   the soft/hard model. */
#home-session[data-layout="classic"] .set-row.regress .set-input{color:var(--red)}
#home-session[data-layout="classic"] .set-row.regress .set-input.soft{color:var(--pencil)}
.wl-regress-tag{font:700 10px var(--font-num);color:var(--red);margin-left:3px;white-space:nowrap}

/* ── Per-row action buttons (W / warn / done), >=44px hit area ─────────── */
#home-session[data-layout="classic"] .set-row .wu-btn,
#home-session[data-layout="classic"] .set-row .inj-btn{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--b1);background:none;
  display:flex;align-items:center;justify-content:center;
  font:600 11px var(--font-num);color:var(--mut);cursor:pointer;padding:0;position:relative;
}
#home-session[data-layout="classic"] .set-row .wu-btn svg,#home-session[data-layout="classic"] .set-row .inj-btn svg{width:13px;height:13px}
#home-session[data-layout="classic"] .set-row .wu-btn::after,
#home-session[data-layout="classic"] .set-row .inj-btn::after,
#home-session[data-layout="classic"] .set-row .set-done-btn::after{content:"";position:absolute;inset:-5px}
#home-session[data-layout="classic"] .set-row .wu-btn.on{background:var(--adim);border-color:var(--acc);color:var(--acc);font-weight:700}
#home-session[data-layout="classic"] .set-row .inj-btn.on{background:var(--odim);border-color:var(--org);color:var(--org)}

#home-session[data-layout="classic"] .set-row .set-done-btn{
  width:34px;height:34px;border-radius:999px;border:2px solid var(--b2);background:none;
  display:flex;align-items:center;justify-content:center;color:transparent;
  cursor:pointer;padding:0;position:relative;
  /* B2 (Brandon, binding 2026-08-14): "a plain transition from blank to green
     circle. Nothing else." transform is deliberately NOT transitioned here - the
     set check must not move, scale, pop or shake. */
  transition:border-color .12s ease,background .12s ease,color .12s ease;
}
#home-session[data-layout="classic"] .set-row .set-done-btn svg{width:15px;height:15px}
/* Press feedback is a colour change only, never a transform. */
#home-session[data-layout="classic"] .set-row .set-done-btn:active{border-color:var(--grn)}
#home-session[data-layout="classic"] .set-row .set-done-btn.done{
  background:var(--grn);border-color:var(--grn);color:var(--bg);
  /* R2 "Set completion feedback": filled ok check with a 3px glow ring. */
  box-shadow:0 0 0 3px var(--gdim);
}
/* B2: the ~250ms pop is REMOVED per Brandon's binding ruling. Kept as an explicit
   no-op rather than deleted silently, so that if .wl-pop is ever re-applied by JS
   the class still cannot animate anything. */
#home-session[data-layout="classic"] .set-row .set-done-btn.wl-pop{animation:none}

/* 360px-class phones (older Galaxy A/S): even at the minmax floors above the row is
   ~18px too wide, so here the W / note buttons drop to 28px, the check to 32px,
   the buttons close ranks, the grid gap and row padding tighten, and the number
   font steps 17 -> 15px so "42.5" still fits a 46px LB box. Measured in the
   harness 2026-09-10: 360 fits with room to spare; 384 and 412 never enter this
   block, so the design widths above are untouched there. */
@media (max-width:374px){
  #home-session[data-layout="classic"] .set-hdr,
  #home-session[data-layout="classic"] .set-row{
    grid-template-columns:18px minmax(46px,66px) 10px minmax(38px,52px) minmax(36px,44px) 1fr;
    gap:0 3px;
  }
  #home-session[data-layout="classic"] .set-row{padding:0 5px}
  #home-session[data-layout="classic"] .set-row .set-input{font-size:15px;padding:0}
  #home-session[data-layout="classic"] .set-row .set-input.soft{font-size:15px}
  #home-session[data-layout="classic"] .set-row .wl-row-actions{gap:2px}
  #home-session[data-layout="classic"] .set-row .wu-btn,
  #home-session[data-layout="classic"] .set-row .inj-btn{width:28px}
  #home-session[data-layout="classic"] .set-row .set-done-btn{width:32px;height:32px}
}

/* ── Per-exercise running volume + set controls ──────────────────────── */
.wl-ex-vol{
  display:flex;align-items:center;gap:6px;border-top:1px dashed var(--b2);
  padding:8px 2px;font:600 11.5px var(--font-num);color:var(--mut2);white-space:nowrap;
}
.wl-set-controls{display:flex;gap:10px;border-top:1px solid var(--b1);padding-top:10px}
.wl-set-controls button{
  flex:1;height:44px;border-radius:10px;background:var(--s2);border:none;
  font-size:13px;font-weight:600;color:var(--mut2);cursor:pointer;font-family:var(--font-ui);
}

/* Scheme control: TAP toggles Straight/Drop, PRESS-AND-HOLD opens the sheet. */
.wl-scheme-btn{
  height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--b1);background:none;
  font:600 11px var(--font-num);color:var(--mut2);cursor:pointer;white-space:nowrap;
}
.wl-scheme-btn.drop{border-color:var(--acc);color:var(--acc);background:var(--adim)}

/* ── Completed-exercise receipt line + "+ 1 more set" reopen ───────────
   SPEC "Reopening a finished exercise": you are never locked out. */
.wl-receipt{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:8px 14px 12px;
}
.wl-receipt-txt{font:500 11.5px var(--font-num);color:var(--mut)}
.wl-more-set{
  height:34px;padding:0 12px;border-radius:999px;background:var(--s2);border:1px solid var(--b1);
  font-size:12px;font-weight:650;color:var(--mut2);cursor:pointer;font-family:var(--font-ui);
}

/* Helper text under the card list - the ONE place both gestures are hinted,
   in the same style the scheme hold hint uses (SPEC "In-session drop-set
   control": hinted in the same helper-text style as reorder). */
.wl-hint{font-size:10.5px;color:var(--mut);text-align:center;margin:-2px 0}

/* ── V1: only the active card is live (2026-08-26) ──────────────────────
   The ONE live card (first unfinished exercise, or any card the trainee
   expanded) renders full; everything else is a dimmed, collapsed header -
   small targets, short travel, which is what makes hold-drag reorder easy.
   Idle cards keep exactly two live controls: the drag handle and the
   chevron (expand). Swap/note wait until the card is live again. Tokens
   only; the accent ring reuses --acc like every other selected state. */
#home-session[data-layout="classic"] .wl-ex-card{transition:opacity .18s ease,border-color .18s ease}
#home-session[data-layout="classic"] .wl-ex-card[data-ex-state="idle"]{opacity:.55}
#home-session[data-layout="classic"] .wl-ex-card[data-ex-state="idle"] .wl-ex-btn:not(.wl-drag-handle):not(.wl-collapse-btn){display:none}
#home-session[data-layout="classic"] .wl-ex-card[data-ex-state="active"]{border-color:var(--acc)}

/* ── Hold-drag reorder ──────────────────────────────────────────────────
   The lift/slide visuals come from .wl-drag-lift / .wl-drag-slide in
   css/motion.css. This only suppresses text selection + native scrolling
   while a drag is actually in flight. */
#home-session[data-layout="classic"].wl-dragging{cursor:grabbing}
#home-session[data-layout="classic"].wl-dragging .wl-ex-card{transition:transform .18s ease}
#home-session[data-layout="classic"].wl-dragging .wl-ex-card.wl-drag-lift{transition:box-shadow .18s ease}
/* Batch B serial sweep (2026-08-13): .wl-ex-card declares its own resting shadow at the
   same specificity as .wl-drag-lift, and this stylesheet loads after css/motion.css, so
   the card's shadow won and the motion standard's drag lift never rendered. Re-assert it
   at higher specificity; the VALUE still lives in motion.css as --wl-drag-lift-shadow so
   the two can never drift. */
.wl-ex-card.wl-drag-lift{box-shadow:var(--wl-drag-lift-shadow)}

/* ── V2/V3: add exercises mid-workout + build-as-you-go (2026-08-26) ─────
   Deliberately UNSCOPED (no data-layout guard): all three session layouts
   render the same + Add exercise entry and the same empty state (SPEC
   "Session-layout parity"). Tokens only; the dashed border is the app's
   existing "pencil / not yet real" voice (soft prefills, search wells). */
.wl-add-ex-btn{
  display:block;width:100%;min-height:48px;border-radius:14px;
  border:1.5px dashed var(--b2);background:none;
  font-size:13.5px;font-weight:650;color:var(--mut2);cursor:pointer;
  font-family:var(--font-ui);
}
.wl-add-ex-btn:active{border-color:var(--acc);color:var(--acc)}
/* The smaller in-queue variant Focus renders at the tail of its queue list. */
.wl-add-ex-btn.wl-add-ex-inline{min-height:40px;font-size:12.5px;margin-top:6px}
/* Empty build-as-you-go session: a real empty state, not a bare header. */
.wl-session-empty{
  text-align:center;padding:26px 14px;border:1.5px dashed var(--b2);
  border-radius:18px;color:var(--mut);font-size:12.5px;line-height:1.6;
  margin-bottom:12px;
}
.wl-session-empty b{color:var(--txt);font-size:14px}
/* The muscle-group tag on an Add Exercise picker row (sheets.js). Lives here
   rather than css/sheets.css (outside this package's fence); the sheet's other
   classes are reused from there unchanged. */
.wl-addex-group{
  font:700 9.5px var(--font-num);letter-spacing:.05em;color:var(--mut);
  white-space:nowrap;flex:none;
}

/* ── Design pass 2026-08-30: logging card rebuild (specs 24 + 25) ─────────── */

/* Muscle badge is the tap target (no caret); a subtle press state cues it. */
.wl-ex-muscle[role="button"]{cursor:pointer}
.wl-ex-muscle[role="button"]:active{filter:brightness(1.15)}

/* Expanded head is name+badge+chips on the left, the live comparison on the
   right. The whole head is the tap(collapse)/hold(reorder) surface. */
.wl-ex-titles{flex:1;min-width:0}
/* Collapsed head: name + badge + one-line summary, no controls, no arrow chip. */
.wl-ex-head-coll{cursor:pointer}
.wl-ex-collsum{font:600 11.5px var(--font-num);color:var(--mut);margin-left:auto;white-space:nowrap}

/* N-11: header REPS/WEIGHT/VOL comparison block (three rows). Hidden by being
   empty until the first set logs. */
.wl-ex-cmp{flex:none}
.wl-vs{display:grid;grid-template-columns:auto auto;gap:1px 8px;text-align:right;align-items:center}
.wl-vs-l{font:600 9px var(--font-num);letter-spacing:.05em;color:var(--mut)}
.wl-vs-d{font:700 9.5px var(--font-num);white-space:nowrap}
.wl-vs-d.up{color:var(--grn)}
.wl-vs-d.down{color:var(--red)}
.wl-vs-d.nc{color:var(--mut2)}

/* Footer: − Set · + Set · ⇄ Swap · ✎ · Straight/Drop · ✕ (24.15). One row. */
.wl-ex-ft{
  display:flex;align-items:center;gap:5px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--b1);
}
.wl-ex-ft .wl-ft-setbtn{
  height:36px;padding:0 9px;border-radius:999px;border:1px solid var(--b1);background:none;
  font:600 12px var(--font-ui);color:var(--mut2);cursor:pointer;white-space:nowrap;flex:none;
  display:inline-flex;align-items:center;gap:4px;
}
.wl-ex-ft .wl-ft-setbtn svg{width:13px;height:13px}
.wl-ex-ft .wl-ft-swap{gap:5px}
.wl-ex-ft .wl-ft-icon{
  width:36px;height:36px;flex:none;border-radius:999px;border:1px solid var(--b1);background:none;
  display:flex;align-items:center;justify-content:center;color:var(--mut2);cursor:pointer;padding:0;
}
.wl-ex-ft .wl-ft-icon svg{width:14px;height:14px}
.wl-ex-ft .wl-ft-icon.active{border-color:var(--acc);color:var(--acc);background:var(--adim)}
/* Straight/Drop segmented control (reuses .wl-seg scaffold from sheets.css). */
.wl-ex-ft .wl-ft-seg{margin-left:auto;flex:none;cursor:pointer}
.wl-ex-ft .wl-ft-seg span{
  font:600 11.5px var(--font-ui);color:var(--mut);border-radius:999px;padding:5px 11px;white-space:nowrap;
}
.wl-ex-ft .wl-ft-seg span.on{background:var(--s3);color:var(--txt)}
/* ✕ remove: a quiet ghost, never a trash can. */
.wl-ex-ft .wl-ft-rm{
  width:36px;height:36px;flex:none;border-radius:999px;border:1px solid var(--b1);background:none;
  display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:14px;cursor:pointer;padding:0;
}

/* 24.3: 4s swipeable Undo toast, accent bg + accent text. */
.wl-undo-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:var(--acc);color:var(--acc-text);border-radius:999px;
  padding:10px 18px;display:flex;align-items:center;gap:14px;
  font:600 12.5px var(--font-ui);box-shadow:0 8px 26px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:70;max-width:92vw;
}
.wl-undo-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.wl-undo-toast .wl-undo-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-undo-toast .wl-undo-btn{
  background:none;border:none;color:inherit;font:700 12.5px var(--font-ui);
  text-decoration:underline;cursor:pointer;flex:none;padding:0;
}

/* 25.1: badge picker popover (scrim + anchored card). */
.wl-pop-scrim{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:80}
.wl-badge-pop{
  position:fixed;width:250px;max-width:92vw;background:var(--s1);border:1px solid var(--b2);
  border-radius:14px;padding:12px;box-shadow:0 14px 40px rgba(0,0,0,.45);
}
.wl-pop-kick{font:600 10px var(--font-num);letter-spacing:.08em;color:var(--mut);margin-bottom:8px}
.wl-badge-grid{display:flex;flex-wrap:wrap;gap:7px}
.wl-badge-opt{
  font:700 10px var(--font-num);letter-spacing:.05em;border-radius:999px;padding:6px 10px;min-height:30px;
  display:inline-flex;align-items:center;cursor:pointer;
  color:var(--mc);border:1px solid var(--mc);background:color-mix(in srgb,var(--mc) 12%,transparent);
}
.wl-badge-opt.sel{background:var(--mc);color:var(--bg);font-weight:700}
.wl-pop-ft{display:flex;gap:8px;margin-top:12px}
.wl-pop-btn{
  flex:1;min-height:38px;border-radius:999px;border:1px solid var(--b1);background:none;
  font:600 12.5px var(--font-ui);color:var(--mut2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.wl-pop-btn.go{background:var(--acc);border-color:var(--acc);color:var(--acc-text);font-weight:700}

/* 25.3: timed-exercise timer row. */
.wl-timer{
  margin:4px 0 10px;border:1px solid var(--b1);border-radius:12px;background:var(--s2);
  display:flex;align-items:center;gap:8px;padding:12px;
}
.wl-timer.run{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.wl-timer-num{
  flex:1;min-width:0;background:var(--s1);border:1.5px solid var(--b2);border-radius:12px;
  padding:8px 6px;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.wl-timer.run .wl-timer-num{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.wl-timer-n{font:700 28px var(--font-num);color:var(--txt)}
.wl-timer.run .wl-timer-n{color:var(--acc)}
.wl-timer-hint{font:600 10px var(--font-num);letter-spacing:.02em;color:var(--mut)}
.wl-timer.run .wl-timer-hint{color:var(--acc)}
.wl-timer-chips{display:flex;gap:6px;flex:none}
.wl-tchip{
  min-height:44px;padding:0 11px;border-radius:999px;border:1px solid var(--b1);background:none;
  font:600 13px var(--font-num);color:var(--mut2);cursor:pointer;display:inline-flex;align-items:center;
}
.wl-tchip.on{background:var(--s3);color:var(--txt);border-color:var(--b2)}
.wl-tchip:disabled{opacity:.5;cursor:default}
.wl-timer-sub{font-size:11.5px;color:var(--mut);margin-left:auto}

/* AC-13: disabled Finish + hint until at least one set is logged. */
.finish-btn:disabled{opacity:.45;cursor:default;background:var(--s3);color:var(--mut2);box-shadow:none}
.wl-finish-hint{text-align:center;font-size:11.5px;color:var(--mut);margin-top:8px}