/* ── WS6 session sheets: Swap / Note+Injury / Drop Set ───────────────────
   Built to design-source/SwapSheet.dc.html, NoteSheet.dc.html and
   DropSetSheet.dc.html (screenshots 10, 11, 26). The overlay + panel chrome
   itself comes from .feedback-overlay / .feedback-sheet in css/workout.css -
   these rules only style the BODIES the sheets paint into, plus the shared
   sheet vocabulary (kicker / title / segmented control / CTA row) that all
   three use so they read as one family.

   Tokens only. Motion from css/motion.css (wlOpen, .wl-press-*). */

/* ── Shared sheet vocabulary ─────────────────────────────────────────── */
.wl-sheet-kicker{
  font-size:10.5px;font-weight:600;letter-spacing:.09em;color:var(--mut);
  text-transform:uppercase;
}
.wl-sheet-title{font-family:var(--font-heading);font-size:19px;font-weight:700;color:var(--txt);margin-top:3px}
.wl-sheet-sub{font-size:12px;color:var(--mut);margin-top:2px}
.wl-sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.wl-sheet-sub-inline{
  font-size:11.5px;color:var(--mut);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wl-sheet-body-text{font-size:13.5px;line-height:1.5;color:var(--mut2);margin-top:10px}

/* Segmented control (scope toggle, apply-to, drop mode). */
.wl-seg{display:flex;gap:5px;background:var(--s2);border-radius:11px;padding:3px}
.wl-seg button{
  flex:1;height:40px;border-radius:9px;background:none;border:none;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--mut2);font-family:var(--font-ui);
  transition:transform .1s ease;
}
.wl-seg button:active{transform:scale(.96)}
.wl-seg button.sel{background:var(--acc);color:var(--acc-text);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.15)}

/* The CTA row every sheet ends with: secondary left, primary right. */
.wl-sheet-cta{display:flex;gap:10px;margin-top:14px}
.wl-btn-secondary{
  width:110px;height:52px;border-radius:12px;background:var(--s2);border:none;
  font-size:14px;font-weight:600;color:var(--mut2);cursor:pointer;font-family:var(--font-ui);
}
.wl-btn-primary{
  flex:1;height:52px;border-radius:12px;background:var(--acc);border:none;
  color:var(--acc-text);font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font-ui);
}
.wl-btn-primary[disabled]{background:var(--s3);color:var(--mut);cursor:default}

/* A swipe-down that has peeked the sheet rather than closing it. */
.feedback-sheet.wl-sheet-peek{transform:translateY(55%)}

/* ── Swipe-grabber hit-target fix (phone report 2026-08-14) ──────────────
   Brandon's real Android thumb could not reliably start the swipe gesture.
   The painted grabber bar is 36x4 (Swap/Note/Drop Set - css/start.css,
   shared with the Start sheet, which is out of this fence) or 38x4
   (NameSheet, styled inline by wlNameSheet in js/workout/ui.js). Both are
   far under a usable touch target, so a real thumb regularly lands beside
   the bar on plain panel background where no listener exists at all.
   This adds an invisible ::before box that only widens the HIT area - the
   painted bar itself is untouched.
   The pseudo-element needs its OWN explicit touch-action:none: touch-action
   is not an inherited property, so without this the enlarged region falls
   back to "auto" and the browser can still claim it for native scrolling
   before wlAttachSwipeCollapse's touchstart handler ever runs - the same
   ancestor/descendant touch-action trap this codebase has been bitten by
   twice before, just showing up on a generated box instead of a real one. */
/* Batch B.2 serial pass: the B4 round fenced out two more grabbers that use the
   same 4px bar and the same wlAttachSwipeCollapse gesture - #start-sheet-grabber
   (the Start Session sheet, shell markup + css/start.css) and #wl-scheme-grabber
   (the set-scheme sheet, built by js/workout/plans.js). Brandon would have hit
   the identical "cannot grab it with a thumb" problem on both. Only the selector
   lists change here; neither owning file is touched. */
/* D6 (2026-08-14): the Discard sheet's own grabber joins this same selector list -
   its own class, not the shared .wl-sheet-grabber (which wlConfirmSheet's decorative,
   never-wired grabber also uses; keeping this one separate avoids widening that
   inert grabber's hit box as an unintended side effect of a name collision). */
/* Brandon phone-test 2026-09-02: even the widened box was too small to swipe
   reliably, and five newer wired grabbers (assign-a-program, invite, remove
   coach, install, sign out) never joined this list at all. The zone is now
   near-full-sheet-width and ~42px tall, extending UP over the sheet's top edge
   (backdrop space, where a stolen tap only costs the tap-to-dismiss shortcut)
   and stopping just above the title row so no button or text ever sits under
   it. Same inert-grabber caveat as D6: .wl-sheet-grabber stays out. */
#swap-sheet-grabber, #note-sheet-grabber, #dropset-sheet-grabber, .wl-ns-grabber,
#start-sheet-grabber, #wl-scheme-grabber, .wl-discard-grabber,
#wl-assign-grabber, #invite-sheet-grabber, #removecoach-sheet-grabber,
#install-sheet-grabber, #signout-sheet-grabber{
  position:relative;
}
#swap-sheet-grabber::before, #note-sheet-grabber::before, #dropset-sheet-grabber::before, .wl-ns-grabber::before,
#start-sheet-grabber::before, #wl-scheme-grabber::before, .wl-discard-grabber::before,
#wl-assign-grabber::before, #invite-sheet-grabber::before, #removecoach-sheet-grabber::before,
#install-sheet-grabber::before, #signout-sheet-grabber::before{
  content:'';
  position:absolute;
  top:-24px;bottom:-14px;left:-140px;right:-140px;
  touch-action:none;
}

/* ── Dynamic confirm sheet (finishSession's "update workout?") ─────────
   Created in JS by wlConfirmSheet, so it carries its own overlay chrome
   rather than borrowing a shell skeleton. */
.wl-confirm-overlay{
  position:fixed;inset:0;z-index:900;display:flex;align-items:flex-end;
  background:rgba(10,12,16,.45);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .22s ease-out;
}
.wl-confirm-overlay.open{opacity:1;pointer-events:auto}
.wl-confirm-sheet{
  width:100%;max-width:480px;margin:0 auto;background:var(--s1);
  border-radius:20px 20px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.22);
  padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.wl-confirm-overlay.open .wl-confirm-sheet{transform:translateY(0)}

/* ── Swap sheet ──────────────────────────────────────────────────────── */
.wl-swap-list{background:var(--s2);border-radius:12px;padding:2px 12px;max-height:40vh;overflow-y:auto}
.wl-swap-row{
  display:flex;align-items:center;gap:10px;min-height:50px;width:100%;
  background:none;border:none;border-bottom:1px solid var(--b1);
  text-align:left;cursor:pointer;color:var(--txt);font-family:var(--font-ui);
  padding:6px 0;transition:transform .1s ease;
}
.wl-swap-row:last-child{border-bottom:none}
.wl-swap-row:active{transform:scale(.985)}
.wl-swap-row.sel{box-shadow:inset 0 0 0 1.5px var(--acc);border-radius:9px;padding-left:8px;padding-right:8px}
.wl-swap-name{font-size:13.5px;font-weight:650;color:var(--txt)}
.wl-swap-last{font:500 11px var(--font-num);color:var(--mut);margin-top:1px}
.wl-swap-last.never{color:var(--pencil);font-style:italic;font-family:var(--font-ui)}
.wl-swap-closest{
  padding:2px 8px;border-radius:999px;background:var(--gdim);color:var(--grn);
  font:700 10px var(--font-num);flex:none;
}
.wl-swap-empty{font-size:12.5px;color:var(--mut);padding:14px 0;text-align:center}

.wl-swap-search{display:flex;gap:6px;margin-top:10px}
.wl-swap-search input{
  flex:1;height:44px;border-radius:10px;background:none;
  border:1.5px dashed var(--b2);padding:0 12px;color:var(--txt);
  font-size:13px;font-family:var(--font-ui);outline:none;
}
.wl-swap-search input::placeholder{font-style:italic;color:var(--pencil)}
.wl-swap-search input:focus{border-style:solid;border-color:var(--acc)}
.wl-swap-custom{
  height:44px;padding:0 13px;border-radius:10px;background:var(--adim);
  border:1px solid var(--aglow);color:var(--acc);
  font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;font-family:var(--font-ui);
}

/* ── Note / Injury sheet ─────────────────────────────────────────────── */
.wl-note-field{
  width:100%;margin-top:12px;border-radius:12px;background:var(--s2);border:none;
  padding:12px 14px;min-height:72px;resize:vertical;outline:none;
  font:400 13.5px var(--font-ui);color:var(--txt);caret-color:var(--acc);
}
.wl-note-field::placeholder{font-style:italic;color:var(--pencil)}
.wl-note-field:focus{box-shadow:inset 0 0 0 1.5px var(--acc)}

.wl-note-injrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.wl-note-injttl{font-size:13px;font-weight:650;color:var(--txt)}
.wl-note-injsub{font-size:11.5px;color:var(--mut);margin-top:1px}
.wl-toggle{
  width:46px;height:28px;border-radius:999px;background:var(--s3);border:none;
  display:flex;align-items:center;padding:2px;cursor:pointer;flex:none;
  transition:background .15s ease;
}
.wl-toggle span{
  width:24px;height:24px;border-radius:999px;background:var(--s1);
  transition:transform .15s ease;
}
.wl-toggle.on{background:var(--org);justify-content:flex-end}
.wl-toggle.on span{transform:translateX(0)}

/* B1-T5: Warm-up ramp action row (Note sheet, own block). Preview numbers use
   --font-num (JetBrains Mono) per the design package's number rule. */
.wl-note-ramprow{align-items:center}
.wl-ramp-num{font-family:var(--font-num)}
.wl-note-rampbtn{
  min-height:44px;padding:0 16px;border-radius:10px;background:var(--s2);border:none;
  font-size:13px;font-weight:700;color:var(--acc);cursor:pointer;font-family:var(--font-ui);
  flex:none;transition:transform .1s ease;
}
.wl-note-rampbtn:active{transform:scale(.96)}
.wl-note-rampbtn.on{background:color-mix(in srgb,var(--org) 14%,transparent);color:var(--org)}

.wl-part-row{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}
.wl-part-chip{
  height:38px;padding:0 14px;border-radius:999px;background:var(--s2);border:1.5px solid transparent;
  font-size:12px;font-weight:600;color:var(--mut2);cursor:pointer;font-family:var(--font-ui);
  transition:transform .1s ease;
}
.wl-part-chip:active{transform:scale(.94)}
.wl-part-chip.on{background:var(--odim);border-color:var(--org);color:var(--org);font-weight:700}
.wl-part-chip.other{border:1.5px dashed var(--b2)}
.wl-other-field{
  width:100%;margin-top:8px;height:40px;border-radius:10px;background:var(--s2);
  border:1.5px solid var(--org);padding:0 12px;outline:none;
  font-size:13px;font-weight:650;color:var(--txt);caret-color:var(--org);font-family:var(--font-ui);
}
.wl-sev-row{display:flex;gap:5px;margin-top:10px}
.wl-sev-btn{
  flex:1;height:40px;border-radius:10px;background:var(--s2);border:none;
  font-size:12px;font-weight:600;color:var(--mut2);cursor:pointer;font-family:var(--font-ui);
  transition:transform .1s ease;
}
.wl-sev-btn:active{transform:scale(.96)}
.wl-sev-btn.on{background:var(--org);color:var(--s1);font-weight:700}

/* ── B1-T4: Machine setup section (note sheet, exercise scope only) ────────
   Siblings of the vocabulary above - .wl-seg for the machine letters, .wl-part-
   chip for the setting-name chips - sized up to a 44px target (AC-6) since the
   originals (.wl-seg button 40px, .wl-part-chip 38px) are a shade under phone
   minimum for this row's own controls. Zero new tokens: every value below is
   one of the CSS custom properties already used elsewhere in this file. */
.wl-setup-machine-seg{flex:none;width:auto}
.wl-setup-machine-seg button{flex:none;width:44px;height:44px;padding:0}
.wl-setup-rows{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.wl-setup-item{display:grid;grid-template-columns:minmax(0,1fr) 84px 44px;gap:6px;align-items:center}
.wl-setup-name-input,.wl-setup-val-input{
  height:44px;border-radius:10px;background:var(--s2);border:none;padding:0 12px;outline:none;
  font:600 13px var(--font-ui);color:var(--txt);
}
.wl-setup-val-input{font-family:var(--font-num);text-align:center;padding:0 6px}
.wl-setup-name-input::placeholder,.wl-setup-val-input::placeholder{font-style:italic;color:var(--pencil)}
.wl-setup-name-input:focus,.wl-setup-val-input:focus{box-shadow:inset 0 0 0 1.5px var(--acc)}
/* Remove control: same quiet-ghost style as .wl-ex-ft .wl-ft-rm in css/session.css,
   sized to this row's 44px target rather than that control's 36px. */
.wl-setup-rm{
  width:44px;height:44px;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;
}
.wl-setup-chip-row{margin-top:8px}
.wl-setup-chip,.wl-setup-add{height:44px}
.wl-setup-add{color:var(--acc);font-weight:700}

/* ── B2-T8: pin the note sheet's Cancel/Save row to the bottom ─────────────
   The Machine setup section (any number of rows, NG-1) can grow the note
   sheet taller than the viewport, but .feedback-sheet (css/workout.css, out
   of this fence) has no max-height or scroll of its own - a tall sheet just
   overflows above the top of the screen with the CTA unreachable. Scoped to
   #note-sheet-panel/#note-sheet-body by id (not .feedback-sheet or
   .wl-sheet-cta generally) so Swap and Drop Set, which never grow this tall,
   are untouched - matches the build's stop condition (note-sheet only,
   since covering every sheet with the SAME rule would mean touching the
   shared .feedback-sheet chrome, out of fence). Zero new tokens. */
#note-sheet-panel{
  max-height:88vh;
  display:flex;
  flex-direction:column;
}
#note-sheet-body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
}
#note-sheet-body .wl-sheet-cta{
  position:sticky;
  bottom:0;
  z-index:1;
  background:var(--s1);
  padding-top:12px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  margin-bottom:-12px;
}

/* ── Drop Set sheet ──────────────────────────────────────────────────── */
.wl-drop-stepper{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.wl-drop-stepper button{
  width:48px;height:48px;border-radius:12px;background:var(--s2);border:none;
  font:600 18px var(--font-num);color:var(--mut2);cursor:pointer;
}
.wl-drop-val{text-align:center;min-width:90px}
.wl-drop-num{font:700 34px/1 var(--font-num);color:var(--txt)}
.wl-drop-cap{font-size:10px;color:var(--mut);margin-top:3px}

.wl-drop-lbwrap{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.wl-drop-lbfield{
  height:52px;width:120px;border-radius:13px;background:var(--s2);
  border:1.5px solid var(--acc);text-align:center;outline:none;
  font:700 22px var(--font-num);color:var(--txt);caret-color:var(--acc);
  -moz-appearance:textfield;
}
.wl-drop-lbfield::-webkit-outer-spin-button,
.wl-drop-lbfield::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wl-drop-lbcap{font-size:13px;font-weight:600;color:var(--mut2)}

.wl-drop-preview{background:var(--s2);border-radius:12px;padding:11px 14px;margin-top:14px}
.wl-drop-prevlbl{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--mut);text-align:center}
.wl-drop-prevrow{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:7px;flex-wrap:wrap;
}
.wl-drop-w{
  font:650 15px var(--font-num);padding:6px 12px;border-radius:9px;
  background:var(--s3);color:var(--txt);white-space:nowrap;
}
.wl-drop-w.top{background:var(--acc);color:var(--acc-text)}
.wl-drop-arrow{color:var(--mut);font-size:13px}
.wl-drop-none{font-size:12px;color:var(--pencil);font-style:italic}

.wl-check-row{
  display:flex;align-items:center;gap:9px;min-height:40px;margin-top:12px;
  background:none;border:none;cursor:pointer;padding:0;
  font-size:12.5px;font-weight:600;color:var(--mut2);font-family:var(--font-ui);
}
.wl-check{
  width:20px;height:20px;border-radius:6px;border:2px solid var(--b2);background:none;
  display:flex;align-items:center;justify-content:center;flex:none;color:var(--acc-text);
}
.wl-check.on{border-color:var(--acc);background:var(--acc)}
.wl-check svg{width:12px;height:12px}

/* ── Discard sheet (D6, design-source/DiscardSheet.dc.html) ──────────────
   Own overlay + panel, built in JS the same self-contained way wl-confirm-*
   and wl-namesheet-* are (no shell skeleton - the WS6 fence above only holds
   the three session sheets). Title/head/sub-inline reuse the shared sheet
   vocabulary above (.wl-sheet-title picks up the clean/handwritten voice
   switch and the handwritten 24px bump for free - css/workout.css + WS10's
   css/plans.css already style those by CLASS, not by which sheet uses them).
   This app's tokens have no var(--danger) - the design source's t.dgr maps
   to var(--red) here (WS1's own dgr->--red mapping, reused verbatim). */
.wl-discard-overlay{
  position:fixed;inset:0;z-index:920;display:flex;align-items:flex-end;
  background:rgba(0,0,0,.38);opacity:0;pointer-events:none;transition:opacity .22s ease-out;
}
.wl-discard-overlay.open{opacity:1;pointer-events:auto}
.wl-discard-sheet{
  width:100%;max-width:480px;margin:0 auto;background:var(--s1);
  border-top:1px solid var(--b1);border-radius:20px 20px 0 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.25);
  padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.wl-discard-overlay.open .wl-discard-sheet{transform:translateY(0)}
.wl-discard-grabber{width:36px;height:4px;border-radius:999px;background:var(--b2);margin:0 auto 12px}
.wl-discard-receipt{
  margin-top:12px;border-radius:12px;background:var(--s2);padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;
}
.wl-discard-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--mut2)}
.wl-discard-val{font:600 12.5px var(--font-num);color:var(--txt)}
.wl-discard-val.wl-discard-muted{color:var(--mut)}
.wl-discard-ctas{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.wl-discard-save{
  height:52px;border-radius:12px;background:var(--acc);color:var(--acc-text);border:none;
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;
  cursor:pointer;font-family:var(--font-ui);transition:transform .1s;
}
.wl-discard-save:active{transform:scale(.98)}
.wl-discard-danger{
  height:52px;border-radius:12px;background:color-mix(in srgb, var(--red) 10%, transparent);
  border:1.5px solid var(--red);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;
  cursor:pointer;font-family:var(--font-ui);transition:transform .1s;
}
.wl-discard-danger:active{transform:scale(.98)}
.wl-discard-caption{font-size:11.5px;color:var(--mut);text-align:center;margin-top:8px}
.wl-discard-keep{
  width:100%;height:46px;margin-top:10px;border-radius:12px;background:var(--s2);border:none;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--mut2);
  cursor:pointer;font-family:var(--font-ui);transition:transform .1s;
}
.wl-discard-keep:active{transform:scale(.98)}

/* ── The ONE add-exercise sheet (specs 26 + 27, T2) ──────────────────────────
   A full-height bottom sheet (top 64px) that serves session add, editor add and
   swap. Own overlay chrome (built in JS by _wlAddExOpen), tokens only, motion in
   line with the other sheets. Reuses .wl-swap-row / .wl-swap-name / .wl-swap-last
   for the list rows so every picker reads as one family. */
.wl-addex-overlay{
  position:fixed;inset:0;z-index:930;display:flex;align-items:flex-end;
  background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .22s ease-out;
}
.wl-addex-overlay.open{opacity:1;pointer-events:auto}
.wl-addex-sheet{
  position:relative;width:100%;max-width:480px;margin:0 auto;height:calc(100% - 64px);
  background:var(--s1);border-top:1px solid var(--b1);border-radius:20px 20px 0 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.28);display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .32s cubic-bezier(.22,1,.36,1);
  padding:0 0 calc(8px + env(safe-area-inset-bottom,0px));
}
.wl-addex-overlay.open .wl-addex-sheet{transform:translateY(0)}
.wl-addex-grab{width:36px;height:4px;border-radius:999px;background:var(--b2);margin:10px auto 6px;flex:none;position:relative}
/* Widened invisible hit target (same B.2 thumb fix as the WS6 grabbers). */
.wl-addex-grab::before{content:'';position:absolute;top:-20px;bottom:-12px;left:-32px;right:-32px;touch-action:none}
#addex-sheet-body{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 18px}

.wl-addex-head{flex:none;padding:0 0 2px}
.wl-addex-title{font-family:var(--font-heading);font-size:18px;font-weight:700;color:var(--txt)}
.wl-addex-ctx{font-size:12px;color:var(--mut);margin-top:3px}

.wl-addex-search{
  display:flex;align-items:center;gap:8px;margin-top:10px;height:46px;flex:none;
  border-radius:12px;background:var(--s2);border:1px solid var(--b1);padding:0 13px;
}
.wl-addex-search.active{border-color:var(--b2)}
.wl-addex-search b{font-weight:400;color:var(--mut);font-size:15px}
.wl-addex-search input{
  flex:1;background:none;border:none;outline:none;font-size:14px;color:var(--txt);
  font-family:var(--font-ui);caret-color:var(--acc);
}
.wl-addex-search input::placeholder{font-style:italic;color:var(--pencil)}
.wl-addex-clear{color:var(--mut);font-size:12px;cursor:pointer;padding:0 2px}

.wl-addex-custom{
  flex:none;margin-top:10px;min-height:48px;border-radius:12px;background:var(--acc);
  color:var(--acc-text);border:none;display:flex;align-items:center;justify-content:center;
  gap:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font-ui);
  transition:transform .1s ease;
}
.wl-addex-custom:active{transform:scale(.985)}

.wl-addex-tiers{display:flex;gap:6px;margin-top:12px;flex:none}
.wl-addex-tier{
  flex:1;min-height:38px;border-radius:999px;border:1px solid var(--b1);background:none;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;
  color:var(--mut2);cursor:pointer;font-family:var(--font-ui);transition:transform .1s ease;
}
.wl-addex-tier:active{transform:scale(.97)}
.wl-addex-tier.on{
  background:color-mix(in srgb,var(--acc) 12%,transparent);
  border-color:color-mix(in srgb,var(--acc) 40%,transparent);color:var(--acc);font-weight:700;
}

.wl-addex-mgs{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;flex:none}
.wl-addex-mg{
  font:700 10px var(--font-num);letter-spacing:.05em;border-radius:999px;padding:6px 10px;
  border:1px solid var(--mc,var(--b1));color:var(--mc,var(--mut2));background:none;cursor:pointer;
  transition:transform .1s ease;
}
.wl-addex-mg:active{transform:scale(.94)}
.wl-addex-mg.dim{opacity:.5}

/* B2-T5: sub-muscle row (LEGS -> All/Quads/Hams/Glutes, BACK -> All/Lats/Mid
   back/Lower back, ...) - a smaller sibling of .wl-addex-mg one row down, no
   per-muscle color (that already reads on the Group chip above it). */
.wl-addex-submgs{margin-top:6px}
.wl-addex-submg{
  font-size:9.5px;padding:5px 9px;border-color:var(--b1);color:var(--mut2);
}
.wl-addex-submg.dim{opacity:.5}

/* B2-T5: equipment filter (All / Free weights / Machines / Other), the same
   .wl-seg vocabulary the sheet already uses elsewhere - a sibling row above
   the list. */
.wl-addex-equip{margin-top:10px;flex:none}

.wl-addex-list{flex:1;min-height:0;overflow-y:auto;margin-top:8px;padding-bottom:8px}
.wl-addex-yr{
  padding:10px 2px 2px;font:600 10px var(--font-num);letter-spacing:.08em;color:var(--mut);
}
.wl-addex-empty{font-size:12.5px;color:var(--mut);padding:18px 4px;text-align:center;font-style:italic}
/* B1-T5: Swap sheet "Show more" row (bug "[P2] Swap sheet caps library
   suggestions at 3" - reveals another page of the same ranked list). */
.wl-addex-showmore{
  flex:none;min-height:44px;width:100%;border-radius:10px;border:1px solid var(--b1);
  background:none;display:flex;align-items:center;justify-content:center;margin-top:6px;
  font-size:13px;font-weight:600;color:var(--acc);cursor:pointer;font-family:var(--font-ui);
  transition:transform .1s ease;
}
.wl-addex-showmore:active{transform:scale(.98)}
.wl-hl{background:color-mix(in srgb,var(--acc) 30%,transparent);border-radius:3px;padding:0 1px}

/* List-row muscle tag as a hue-colored badge (overrides the plain session.css one
   only inside this sheet). Colour comes from the inline --mc. */
.wl-addex-sheet .wl-addex-group{
  font:700 9.5px var(--font-num);letter-spacing:.05em;white-space:nowrap;flex:none;
  color:var(--mc,var(--mut));border:1px solid var(--mc,var(--b1));border-radius:999px;
  padding:3px 8px;background:none;
}
.wl-addex-group.createbadge{
  align-self:flex-start;margin-top:4px;padding:8px 12px;font-size:11px;cursor:pointer;
}

/* Create-flavor fields + editor detail block. */
.wl-addex-lbl{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--mut);text-transform:uppercase;margin:12px 0 6px;flex:none}
.wl-addex-lblhint{font-weight:400;letter-spacing:0;text-transform:none;color:var(--pencil)}
.wl-addex-namefield{
  height:48px;border-radius:10px;background:var(--s1);border:1.5px solid var(--acc);
  padding:0 14px;font-size:15px;font-weight:650;color:var(--txt);outline:none;
  font-family:var(--font-ui);caret-color:var(--acc);flex:none;
}
.wl-addex-namefield::placeholder{font-style:italic;color:var(--pencil);font-weight:400}
.wl-addex-timedrow{
  display:flex;align-items:center;gap:10px;margin-top:16px;background:none;border:none;
  text-align:left;cursor:pointer;padding:0;width:100%;flex:none;
}
.wl-addex-cta{
  height:48px;border-radius:12px;background:var(--acc);color:var(--acc-text);border:none;
  display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:700;
  margin-top:16px;cursor:pointer;font-family:var(--font-ui);flex:none;transition:transform .1s ease;
}
.wl-addex-cta:active{transform:scale(.985)}
.wl-addex-hint{text-align:center;font-size:11px;color:var(--mut);margin-top:10px;flex:none}

.wl-addex-detail{border-top:1px solid var(--b1);background:var(--s2);border-radius:0 0 10px 10px;padding:12px 14px 16px;margin:0 0 8px}
.wl-addex-drow{display:flex;gap:24px;align-items:flex-start}
.wl-addex-chips{display:flex;gap:6px;flex-wrap:wrap}
.wl-addex-chip{
  font:600 12px var(--font-num);border:1px solid var(--b1);border-radius:999px;padding:8px 14px;
  color:var(--mut2);min-height:36px;display:inline-flex;align-items:center;justify-content:center;
  background:none;cursor:pointer;font-family:var(--font-num);
}
.wl-addex-chip.on{
  background:color-mix(in srgb,var(--acc) 12%,transparent);
  border-color:color-mix(in srgb,var(--acc) 40%,transparent);color:var(--acc);font-weight:700;
}
.wl-addex-step{display:flex;align-items:center;border:1px solid var(--b1);border-radius:10px;background:var(--s1);overflow:hidden;width:max-content}
.wl-addex-step button{min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;font:650 15px var(--font-num);color:var(--mut2);background:none;border:none;cursor:pointer}
.wl-addex-stepv{min-width:64px;height:44px;display:flex;align-items:center;justify-content:center;font:650 15px var(--font-num);color:var(--txt);border-left:1px solid var(--b1);border-right:1px solid var(--b1)}
.wl-addex-wrow{display:flex;gap:10px;align-items:center}
.wl-addex-perset{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.wl-addex-psn{font:600 11px var(--font-num);color:var(--mut)}
.wl-addex-pswell{
  height:40px;width:62px;border-radius:9px;background:var(--s1);border:1px solid var(--b1);
  text-align:center;font-family:var(--font-num);font-size:14px;color:var(--txt);outline:none;caret-color:var(--acc);
}
.wl-addex-pswell:focus{border-color:var(--acc)}