/* ── WS10: Workouts tab + Workout editor + Set-scheme editor + Program editor ──
   Every length/weight/radius here is lifted from the design sources, not eyeballed:
     design-source/LibraryTab.dc.html    -> .wl-prog-card / .wl-wk-card / badges / kickers
     design-source/LibraryEmpty.dc.html  -> .wl-empty
     design-source/NewCard.dc.html       -> .wl-screen / .wl-field / .wl-rows / .wl-search
     design-source/SchemeEditor.dc.html  -> .wl-sheet / .wl-step / .wl-chiprow
     design-source/ProgramEditor.dc.html -> .wl-dayrow / .wl-goal / .wl-danger
     design-source/NameSheet.dc.html     -> handled by wlNameSheet() in js/workout/ui.js
   ZERO hard-coded colours: every colour is a token from css/workout.css :root.
   Layered feel (SPEC R2): 16-18px radii, dual shadow 0 1px 2px + 0 8px 24px,
   press = scale(.975) on cards / scale(.88-.94) on buttons over 100-120ms. */

:root {
  /* The 11 muscle hues live in css/workout.css. FOREARMS appears in the v2 tag
     taxonomy (NewCard.dc.html) and OTHER is the catch-all for a custom tag, so the
     two missing hues are declared here rather than editing that shared file.
     Forearms sits between biceps (285) and cardio (310); other is deliberately grey-ish
     by way of a low-chroma override on the badge itself. */
  --hue-forearms: 300;
  --hue-other: 250;
}

/* ── shared page furniture ─────────────────────────────────────────────── */
.wl-sec-hdr { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 12px }
.wl-sec-hdr + .wl-sec-hdr, #programsList + .wl-sec-hdr { margin-top:16px }
.wl-kicker { font-family:var(--font-heading); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mut) }
:root[data-voice="handwritten"] .wl-kicker { font-size:20px; letter-spacing:0; text-transform:lowercase; font-weight:600 }
.wl-sec-note { font-size:11px; color:var(--mut) }

/* "+ New Workout" pill - LibraryTab.dc.html line 50 */
.wl-newbtn {
  display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:999px;
  background:color-mix(in srgb, var(--acc) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--acc) 35%, transparent);
  color:var(--acc); font-family:var(--font-ui); font-size:12px; font-weight:700;
  cursor:pointer; transition:transform .1s, background .1s;
}
.wl-newbtn:active { transform:scale(.92); background:color-mix(in srgb, var(--acc) 20%, transparent) }
.wl-newbtn svg { width:11px; height:11px; flex:none }

/* ── Programs ───────────────────────────────────────────────────────────── */
.wl-prog-card, .wl-wk-card {
  background:var(--s1); border:1px solid var(--b1); border-radius:16px; padding:14px 15px;
  margin-bottom:12px; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08);
  transition:transform .12s ease, box-shadow .12s ease; cursor:pointer;
}
.wl-prog-card:active, .wl-wk-card:active { transform:scale(.975); box-shadow:0 1px 2px rgba(0,0,0,.06) }
.wl-prog-card.active { border:1.5px solid var(--acc); box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.10) }
.wl-prog-top { display:flex; align-items:center; justify-content:space-between; gap:10px }
.wl-prog-name { font-family:var(--font-heading); font-size:14.5px; font-weight:650; flex:1; color:var(--txt) }
:root[data-voice="handwritten"] .wl-prog-name { font-size:22px; line-height:1 }
.wl-prog-card:not(.active) .wl-prog-name { font-size:14px; font-weight:600; color:var(--mut2) }
.wl-pill-active {
  padding:3px 9px; border-radius:999px; background:var(--acc); color:var(--acc-text);
  font-family:var(--font-num); font-size:10px; font-weight:700; letter-spacing:.05em;
  white-space:nowrap; flex:none;
}
.wl-prog-meta { font-family:var(--font-num); font-size:12px; font-weight:500; color:var(--mut2); margin-top:7px }
.wl-prog-card:not(.active) .wl-prog-meta { font-size:11.5px; color:var(--mut); margin-top:3px }
.wl-prog-bar { display:flex; align-items:center; gap:8px; margin-top:8px }
.wl-prog-track { flex:1; height:7px; border-radius:999px; background:var(--s3); overflow:hidden }
.wl-prog-fill { height:100%; background:var(--acc) }
.wl-prog-week { font-family:var(--font-num); font-size:11px; font-weight:600; color:var(--mut2) }
.wl-prog-next { font-size:12.5px; font-weight:650; color:var(--acc); margin-top:7px }
.wl-prog-inactive-row { display:flex; align-items:center; justify-content:space-between; gap:10px }
.wl-setactive {
  padding:8px 12px; border-radius:9px; background:var(--s2); border:none; color:var(--mut2);
  font-family:var(--font-ui); font-size:11.5px; font-weight:600; cursor:pointer; flex:none;
  transition:transform .1s;
}
.wl-setactive:active { transform:scale(.92) }
/* L2-D audit F6: labeled "Swap" chip on the coach program editor's filled day rows
   (COPY.md 15 line 107 "Row chips: Swap · ✕") - same small-pill idiom as
   .wl-setactive, sized down to sit beside the ✕ icon button. */
.wl-swap-chip {
  padding:6px 10px; border-radius:9px; background:var(--s2); border:none; color:var(--mut2);
  font-family:var(--font-ui); font-size:11px; font-weight:650; cursor:pointer; flex:none;
  transition:transform .1s;
}
.wl-swap-chip:active { transform:scale(.92) }

/* ── My Workouts card - LibraryTab.dc.html lines 52-69 ──────────────────── */
.wl-wk-top { display:flex; align-items:center; justify-content:space-between; gap:10px }
.wl-wk-info { flex:1; min-width:0 }
.wl-wk-name { font-family:var(--font-heading); font-size:14px; font-weight:650; color:var(--txt); overflow-wrap:anywhere }
:root[data-voice="handwritten"] .wl-wk-name { font-size:21px; line-height:1 }
.wl-wk-meta { font-family:var(--font-num); font-size:11.5px; font-weight:500; color:var(--mut); margin-top:3px }
.wl-wk-exline { font-size:11.5px; color:var(--mut2); margin-top:4px; line-height:1.45; overflow-wrap:anywhere }
.wl-wk-actions { display:flex; gap:6px; flex:none }
.wl-iconbtn {
  width:38px; height:38px; border-radius:9px; border:1px solid var(--b1); background:none;
  color:var(--mut2); display:flex; align-items:center; justify-content:center; cursor:pointer;
  padding:0; transition:transform .1s;
}
.wl-iconbtn:active { transform:scale(.9) }
.wl-iconbtn svg { width:14px; height:14px }
.wl-iconbtn.primary { background:var(--acc); border-color:var(--acc); color:var(--acc-text) }
.wl-iconbtn.primary svg { width:13px; height:13px }
.wl-iconbtn.sm { width:34px; height:34px; border-radius:8px; color:var(--mut) }
.wl-iconbtn.sm svg { width:12px; height:12px }

/* ── muscle badges - one hue table drives every muscle everywhere ───────── */
.wl-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; align-items:center }
.wl-badge {
  font-family:var(--font-num); font-size:9.5px; font-weight:600; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px; border:1px solid var(--mc); color:var(--mc);
  white-space:nowrap;
}
/* C3: "From Coach {name}" provenance chip (COMPONENTS.md "From Coach chip": accent
   14% tint pill, 11px 700 - same recipe as .wl-tag above, just not muscle-hued). */
.wl-fromcoach {
  display:inline-block; font-family:var(--font-ui); font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:999px; background:color-mix(in srgb, var(--acc) 14%, transparent);
  color:var(--acc); white-space:nowrap; margin-top:6px;
}
/* Editor variant - NewCard.dc.html lines 28-33: filled tint, 10px, parent chip is solid */
.wl-tagrow { display:flex; align-items:center; flex-wrap:wrap; gap:5px }
.wl-tag {
  font-family:var(--font-num); font-size:10px; font-weight:600; letter-spacing:.04em;
  padding:5px 10px; border-radius:999px; background:color-mix(in srgb, var(--mc) 16%, transparent);
  border:1px solid var(--mc); color:var(--mc); cursor:pointer; transition:transform .1s;
}
.wl-tag:active { transform:scale(.92) }
.wl-tag.parent { background:var(--txt); color:var(--bg); border-color:var(--txt); font-weight:700 }
.wl-tag.off { background:none; border-color:var(--b1); color:var(--mut) }
.wl-tag.add { border:1.5px dashed var(--b2); color:var(--mut); background:none }
.wl-tag-sep { color:var(--mut); font-size:11px }
.wl-help { font-size:11px; color:var(--mut); margin-top:5px; line-height:1.45 }

/* ── empty states - LibraryEmpty.dc.html ────────────────────────────────── */
.wl-empty { border:1.5px dashed var(--b2); border-radius:14px; padding:18px 16px; text-align:center; margin-bottom:12px }
.wl-empty-t { font-size:13px; font-weight:600; color:var(--mut2) }
.wl-empty-s { font-size:12px; color:var(--mut); margin-top:3px; line-height:1.45 }
.wl-empty.big { padding:26px 20px; display:flex; flex-direction:column; align-items:center; gap:10px }
.wl-empty.big .wl-empty-t { font-family:var(--font-heading); font-size:15px; font-weight:650 }
:root[data-voice="handwritten"] .wl-empty.big .wl-empty-t { font-size:24px; line-height:1.2 }
.wl-empty.big .wl-empty-s { font-size:12.5px; max-width:280px; margin-top:0 }

/* ── full-screen editor (Workout editor / Program editor) ───────────────── */
.wl-screen {
  position:fixed; inset:0; z-index:500; background:var(--bg); color:var(--txt);
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; font-family:var(--font-ui);
  animation:wlScreenIn .2s ease-out;
}
@keyframes wlScreenIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
.wl-screen-hdr { display:flex; align-items:center; gap:12px; padding:16px 16px 4px; flex:none }
.wl-screen-kicker { font-size:10px; font-weight:600; letter-spacing:.09em; color:var(--mut); text-transform:uppercase }
.wl-screen-title { font-family:var(--font-heading); font-size:20px; font-weight:700; margin-top:4px; color:var(--txt) }
:root[data-voice="handwritten"] .wl-screen-title { font-size:28px; line-height:1.1; margin-top:2px }
.wl-cancel-pill {
  padding:8px 14px; border-radius:999px; background:var(--s2); border:none; color:var(--mut2);
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; cursor:pointer; flex:none;
  transition:transform .1s;
}
.wl-cancel-pill:active { transform:scale(.92) }
.wl-back-btn {
  width:36px; height:36px; border-radius:10px; background:var(--s2); border:none; color:var(--mut2);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; padding:0;
  transition:transform .1s;
}
.wl-back-btn:active { transform:scale(.9) }
.wl-back-btn svg { width:14px; height:14px; transform:rotate(180deg) }
.wl-screen-body { display:flex; flex-direction:column; gap:12px; padding:12px 16px calc(20px + env(safe-area-inset-bottom,0px)); flex:1 }
.wl-spacer { flex:1; min-height:8px }

/* labels + fields - NewCard.dc.html lines 22-24 */
.wl-lbl { font-size:10.5px; font-weight:600; letter-spacing:.07em; color:var(--mut); margin-bottom:6px; text-transform:uppercase }
.wl-input {
  width:100%; height:48px; border-radius:12px; background:var(--s1); border:1px solid var(--b1);
  padding:0 14px; font-family:var(--font-ui); font-size:15px; font-weight:650; color:var(--txt);
  outline:none; caret-color:var(--acc);
}
.wl-input:focus { border-color:var(--acc) }

/* row list container - NewCard.dc.html line 39 */
.wl-rows { background:var(--s1); border:1px solid var(--b1); border-radius:14px; padding:2px 14px }
.wl-row { display:flex; align-items:center; gap:12px; min-height:56px; border-bottom:1px solid var(--b1) }
.wl-row:last-child { border-bottom:none }
.wl-row.editing { background:color-mix(in srgb, var(--acc) 5%, transparent); margin:0 -14px; padding:0 14px }
.wl-grip { color:var(--mut); font-size:15px; cursor:grab; touch-action:none; flex:none; padding:6px 2px; line-height:1 }
.wl-row-main { flex:1; min-width:0; cursor:pointer }
.wl-row-name { font-size:14px; font-weight:650; color:var(--txt); overflow-wrap:anywhere }
.wl-row-sub { font-family:var(--font-num); font-size:11.5px; font-weight:500; color:var(--mut); margin-top:2px; overflow-wrap:anywhere }
.wl-row-sub.acc { color:var(--acc) }
.wl-daynum { font-family:var(--font-num); font-size:11px; font-weight:600; color:var(--mut); width:38px; flex:none }
.wl-daynum.next { color:var(--acc) }
.wl-row.dragging { opacity:.5 }
/* C3 phone-test fix (item 2, screen 15.2): coach-context day expand panel - reuses
   --s2/--b1, no new tokens. */
.wl-day-expand { border-bottom:1px solid var(--b1) }
.wl-day-expand:last-child { border-bottom:none }
.wl-row.lifted { transform:scale(1.02); box-shadow:0 10px 26px rgba(0,0,0,.28); background:var(--s2); border-radius:10px; position:relative; z-index:2 }

/* dashed pencil slots + search - NewCard.dc.html line 57, ProgramEditor line 85 */
.wl-pencil-slot {
  flex:1; min-width:0; height:40px; border-radius:9px; border:1.5px dashed var(--b2);
  display:flex; align-items:center; padding:0 12px; font-family:var(--font-ui);
  font-style:italic; font-size:13px; color:var(--pencil); background:none; cursor:pointer;
  text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.wl-search {
  width:100%; background:var(--s1); border:1.5px dashed var(--b2); border-radius:12px;
  padding:0 14px; height:48px; font-family:var(--font-ui); font-size:13.5px; color:var(--txt);
  outline:none; caret-color:var(--acc);
}
.wl-search::placeholder { font-style:italic; color:var(--pencil) }
.wl-search:focus { border-style:solid; border-color:var(--acc) }
.wl-results { background:var(--s2); border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; gap:8px }
.wl-result { display:flex; align-items:center; justify-content:space-between; gap:10px; background:none; border:none; padding:0; cursor:pointer; text-align:left; transition:transform .1s }
.wl-result:active { transform:scale(.98) }
.wl-result-name { font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--txt); overflow-wrap:anywhere }
.wl-result-tag { font-family:var(--font-num); font-size:11px; font-weight:600; color:var(--mut); flex:none }
.wl-result.create { color:var(--acc); font-size:12.5px; font-weight:650; display:flex; gap:6px; align-items:center }
.wl-result.create .wl-result-name { color:var(--acc); font-weight:650; font-size:12.5px }
.wl-addday { display:flex; align-items:center; gap:8px; min-height:48px; color:var(--acc); font-size:13px; font-weight:650; background:none; border:none; cursor:pointer; width:100%; font-family:var(--font-ui); padding:0 }
.wl-foot-note { font-size:11.5px; color:var(--mut); text-align:center }

/* Batch D phone-test fix (e): the program editor's "add a day" Workout picker used
   .wl-result (plain text row, no card chrome) - design-handoff/selfcraft-build-handoff/
   screens/15-program-editor.html (lines ~148-149) draws this exact list as individual
   rounded cards (surface-2 fill, name + "N exercises" subline), matching the .card
   idiom used everywhere else on that screen. New classes rather than restyling
   .wl-result/.wl-results in place, because that pair is shared with the (deliberately
   plain-row) exercise-search picker elsewhere in this file. */
.wl-result-cards { display:flex; flex-direction:column; gap:8px }
.wl-result-card {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--s2); border:1px solid var(--b1); border-radius:14px; padding:13px 14px;
  cursor:pointer; text-align:left; transition:transform .1s; width:100%; font-family:var(--font-ui);
}
.wl-result-card:active { transform:scale(.98) }
.wl-result-card-name { font-size:14px; font-weight:650; color:var(--txt); overflow-wrap:anywhere }
.wl-result-card-tag { font-family:var(--font-num); font-size:11px; font-weight:600; color:var(--mut); flex:none }
.wl-result-card.create { border-style:dashed; color:var(--acc); justify-content:center }
.wl-result-card.create .wl-result-card-name { color:var(--acc); font-weight:650; font-size:13px }

/* Batch D (g), OPEN-QUESTIONS verdicts #3/#4: "Day N" as a standalone chip, not
   text baked into the name - wlDayChipHtml()/wlParseDayChip() (above). Mono pill,
   matches the app's existing small-tag idiom (screen 13's .daytag). NEW UI per the
   house rule (not drawn in any design-handoff screen) - see
   design/mockups-batch-d/day-chip.html for the reviewable mockup. */
.wl-day-chip { display:inline-block; font-family:var(--font-num); font-size:9.5px; font-weight:700; letter-spacing:.05em; padding:2px 7px; border-radius:999px; background:var(--s3); color:var(--mut2); flex:none; text-transform:uppercase }

/* footer CTA pair - NewCard.dc.html lines 65-68 */
.wl-cta-row { display:flex; gap:10px }
.wl-cta-sec {
  width:110px; height:52px; border-radius:12px; background:var(--s2); border:none; color:var(--mut2);
  font-family:var(--font-ui); font-size:14px; font-weight:600; cursor:pointer; transition:transform .1s;
}
.wl-cta-pri {
  flex:1; height:52px; border-radius:12px; background:var(--acc); border:none; color:var(--acc-text);
  font-family:var(--font-ui); font-size:15px; font-weight:700; cursor:pointer; transition:transform .1s;
}
.wl-cta-sec:active, .wl-cta-pri:active { transform:scale(.96) }

/* ── steppers + chip rows - SchemeEditor.dc.html / ProgramEditor.dc.html ── */
.wl-two { display:flex; gap:14px }
.wl-two > * { flex:1; min-width:0 }
.wl-step { display:flex; align-items:center; gap:8px }
.wl-step-btn {
  width:48px; height:48px; border-radius:10px; background:var(--s2); border:none; color:var(--mut2);
  font-family:var(--font-num); font-size:16px; font-weight:600; cursor:pointer; flex:none;
  transition:transform .1s;
}
.wl-step-btn.sm { font-size:13px }
.wl-step-btn:active { transform:scale(.9) }
.wl-step-btn:disabled { opacity:.35; cursor:default }
.wl-step-val { flex:1; text-align:center; font-family:var(--font-num); font-size:26px; font-weight:650; color:var(--txt) }
.wl-step-val.sm { font-size:24px }
.wl-step-well { flex:1; height:48px; border-radius:10px; background:var(--s2); display:flex; align-items:center; justify-content:center; font-family:var(--font-num); font-size:20px; font-weight:650; color:var(--txt); border:none; cursor:pointer }
.wl-derived { height:48px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--s2); gap:6px }
.wl-derived b { font-family:var(--font-num); font-size:18px; font-weight:650; color:var(--txt) }
.wl-derived span { font-size:11px; color:var(--mut) }

.wl-chiprow { display:flex; gap:5px }
.wl-chip {
  flex:1; min-width:0; height:44px; border-radius:10px; background:var(--s2); border:none;
  color:var(--mut2); font-family:var(--font-ui); font-size:12.5px; font-weight:600;
  cursor:pointer; transition:transform .1s; padding:0 4px;
}
.wl-chip.num { font-family:var(--font-num); font-size:13px }
.wl-chip.sel { background:var(--acc); color:var(--acc-text); font-weight:700 }
.wl-chip:active { transform:scale(.94) }
.wl-coach-well {
  width:120px; flex:none; height:48px; border-radius:10px; border:1.5px dashed var(--b2);
  background:none; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-ui); font-style:italic; font-size:12px; font-weight:500; color:var(--pencil);
  cursor:pointer; line-height:1.2; transition:transform .1s;
}
.wl-coach-well.sel { border-style:solid; border-color:var(--acc); color:var(--acc); font-style:normal; font-weight:650 }
.wl-coach-well:active { transform:scale(.94) }
.wl-preview { padding:10px 12px; border-radius:10px; background:var(--s2); font-family:var(--font-num); font-size:12.5px; font-weight:500; color:var(--mut2); line-height:1.5 }

/* ── goal control - ProgramEditor.dc.html lines 26-44 ───────────────────── */
.wl-goal { border-radius:12px; background:var(--s1); border:1px solid var(--b1); overflow:hidden }
.wl-goal-head { height:48px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 14px; background:none; border:none; cursor:pointer; transition:background .1s; font-family:var(--font-ui); text-align:left }
.wl-goal-head:active { background:var(--s2) }
.wl-goal-name { font-size:14px; font-weight:650; color:var(--txt); white-space:nowrap; flex:none }
.wl-goal-rx { font-size:11px; color:var(--mut); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.wl-goal-chev { width:12px; height:12px; flex:none; color:var(--mut); transform:rotate(90deg); transition:transform .2s }
.wl-goal.open .wl-goal-chev { transform:rotate(270deg) }
.wl-goal-list { border-top:1px solid var(--b1); animation:wlOpen .18s ease-out }
.wl-goal-opt { display:flex; align-items:center; gap:10px; min-height:52px; width:100%; padding:6px 14px; background:none; border:none; cursor:pointer; transition:background .1s; text-align:left; font-family:var(--font-ui) }
.wl-goal-opt:active { background:var(--s2) }
.wl-goal-dot { width:18px; height:18px; border-radius:999px; border:2px solid var(--b2); display:flex; align-items:center; justify-content:center; flex:none }
.wl-goal-opt.on .wl-goal-dot { border-color:var(--acc) }
.wl-goal-opt.on .wl-goal-dot::after { content:''; width:8px; height:8px; border-radius:999px; background:var(--acc) }
.wl-goal-opt-n { font-size:13px; font-weight:650; color:var(--txt) }
.wl-goal-opt.on .wl-goal-opt-n { color:var(--acc) }
.wl-goal-opt-rx { font-size:11px; color:var(--mut); margin-top:1px }
@keyframes wlOpen { from { opacity:0; transform:translateY(-6px) } to { opacity:1; transform:none } }

/* ── destructive delete row - ProgramEditor.dc.html lines 95-101 ────────── */
.wl-danger { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--b1); border-radius:12px; padding:12px 14px; margin-top:4px }
.wl-danger-t { font-size:13px; font-weight:650; color:var(--red) }
.wl-danger-s { font-size:11px; color:var(--mut); margin-top:2px; line-height:1.4 }
.wl-danger-btn {
  padding:8px 12px; border-radius:9px; border:1.5px solid var(--red); background:none; color:var(--red);
  font-family:var(--font-ui); font-size:12px; font-weight:650; display:flex; align-items:center; gap:6px;
  cursor:pointer; flex:none; transition:transform .1s;
}
.wl-danger-btn:active { transform:scale(.92) }
.wl-danger-btn svg { width:12px; height:12px }

/* ── bottom sheet (Set-scheme editor) - SchemeEditor.dc.html lines 33-89 ── */
.wl-sheet-bg { position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.38); display:flex; align-items:flex-end; opacity:0; transition:opacity .22s ease-out }
.wl-sheet-bg.open { opacity:1 }
.wl-sheet {
  width:100%; max-height:92vh; overflow-y:auto; background:var(--s1); border-top:1px solid var(--b1);
  border-radius:20px 20px 0 0; padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 30px rgba(0,0,0,.25); transform:translateY(100%); transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.wl-sheet-bg.open .wl-sheet { transform:none }
.wl-grabber { width:36px; height:4px; border-radius:999px; background:var(--b2); margin:0 auto 12px; touch-action:none }
.wl-sheet-title { font-family:var(--font-heading); font-size:16px; font-weight:700; color:var(--txt) }
:root[data-voice="handwritten"] .wl-sheet-title { font-size:24px; line-height:1 }
.wl-sheet .wl-lbl { margin:14px 0 6px }

/* Mobile-first guard. The v1 plan builder overflowed the viewport horizontally because
   its rows were nowrap flex with fixed-width children (Section B bug 1). Nothing inside
   an editor is allowed to push the page sideways: rows wrap, text wraps, and any
   deliberately wide block scrolls inside itself. */
.wl-screen, .wl-sheet { max-width:100vw }
.wl-screen *, .wl-sheet * { max-width:100% }
.wl-chiprow { flex-wrap:wrap }
.wl-chiprow .wl-chip { flex:1 1 60px }
@media (max-width:360px) {
  .wl-two { flex-wrap:wrap }
  .wl-coach-well { width:100% }
}
@media (min-width:700px) {
  .wl-screen-hdr, .wl-screen-body { max-width:640px; width:100%; margin-left:auto; margin-right:auto }
  .wl-sheet { max-width:640px; margin:0 auto; border-radius:20px 20px 0 0 }
}