/* look.css — KGYM's new interface (owner-approved proposal 2026-10-10, "same calm, smarter shape"; decisions 1 A: serif
   only on page titles and big numbers · 2 A: the website menu on the left · 3 B: three waves). Loaded LAST, after
   lawha.css (a shared copy, never edited), door.css, kgym.css and coach2.css, so its shapes win; every colour is a Lawha
   token or one of KGYM's own helper tokens below. Light and dark are drawn as equals. Start / end only (right-to-left
   ready). Wave 2: the design system (page 1: the five button kinds), the pinned back bar, the floating tab bar, the
   website side menu and top bar, the sheet and the side panel, the full-screen picker, Today and the workout. */

/* ═══ 1. Tokens ═══════════════════════════════════════════════════════════════════════════════════════════════════
   Five text sizes (34 · 22 · 17 · 15 · 13, and 16 inside inputs so the iPhone never zooms), three corners (cards 20,
   sheets 28, inputs 14; pills are round), three depths, and KGYM's five NEW helper colours (raised, sunk, edge, insight,
   low-bar) beside Lawha's paper / surface / ink / muted / line / sage / accent and the map's met / low / min. */
.lawha-theme{
  --t-page:34px;--t-card:22px;--t-name:17px;--t-body:15px;--t-small:13px;--t-input:16px;
  --r-card:20px;--r-sheet:28px;--r-input:14px;--r-tile:16px;--r-thumb:12px;--r-pill:999px;
  --kgym-raised:#ffffff;--kgym-sunk:#eeede5;--kgym-edge:#7d8b78;--kgym-insight:#e8eddf;--kgym-low-bar:#b07a14;
  --sh1:0 1px 2px rgba(38,61,52,.06),0 8px 22px -12px rgba(38,61,52,.22);
  --sh2:0 10px 30px -10px rgba(38,61,52,.30),0 1px 3px rgba(38,61,52,.08);
  --sh3:0 -10px 40px -12px rgba(38,61,52,.35);
  --glass:rgba(250,249,244,.86);
  --kgym-gutter:16px;
}
[data-theme='dark'] .lawha-theme{
  --kgym-raised:#26332c;--kgym-sunk:#141c18;--kgym-edge:#748a7c;--kgym-insight:#24352b;--kgym-low-bar:#e0b255;
  --sh1:inset 0 1px 0 rgba(255,255,255,.035),0 10px 24px -14px rgba(0,0,0,.7);
  --sh2:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px -12px rgba(0,0,0,.75);
  --sh3:0 -12px 40px -10px rgba(0,0,0,.8);
  --glass:rgba(38,51,44,.88);
}
@media (max-width:359px){.lawha-theme{--kgym-gutter:12px}}

/* ═══ 2. Type — the serif only on page titles and the big numbers (decision 1 A) ════════════════════════════════════ */
.tab-content h1,.title-line h1,.back-bar .bb-title.is-page,.top-bar h1{font:400 var(--t-page)/1.1 var(--lawha-display)}
.lawha-theme :is(.card h2,.today-card h2,.exercise-card h2,.sheet h2,.settings-group h2,.calendar-head h2,.body-today h2,
  .whoop-card h2,.muscle-details h2,.exercise-page .card h2,.glucose-card h2,.calendar-day h3,.advanced summary,.summary-head,
  .muscle-empty b,.fold-line .plan-name,.settings-page h2){font-family:var(--lawha-font)}
.big-number,.clock-time,.details-big b,.whoop-ring .ring-score,.ring-in b,.session-clock .clock-time{font-family:var(--lawha-display);font-weight:400}

/* ═══ 3. Page 1 of the design system: the five button kinds ═════════════════════════════════════════════════════
   Main (filled ink: the one thing the screen is for) · Second (outlined: the other choice beside it) · Soft (sage: what
   used to be underlined) · Round (a 44 px circle: close, back, edit — a picture says it) · Careful (red outline: deletes;
   the first tap arms "Tap again to …", filled red). Normal 48 px tall, small 44 px; words in full; a locked button turns
   grey with readable words (never a 45 % fade); a press shrinks it a little. Nothing you press is underlined. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:48px;min-width:44px;max-width:360px;margin:0;padding:0 22px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--lawha-ink);font:600 var(--t-body)/1.2 var(--lawha-font);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 120ms var(--lawha-ease),filter 120ms var(--lawha-ease),background-color 160ms var(--lawha-ease)}
.btn svg{flex:none}
.btn-sm{min-height:44px;padding:0 16px}
.btn-wide{width:100%}
.btn-main{background:var(--lawha-ink);color:var(--lawha-surface);box-shadow:0 6px 16px -8px rgba(0,0,0,.45)}
.btn-second{border:1.5px solid var(--lawha-ink);color:var(--lawha-ink)}
.btn-soft{background:var(--lawha-sage);color:var(--lawha-ink)}
.btn-round{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:var(--kgym-sunk);color:var(--lawha-ink)}
.btn-careful{border:1.5px solid var(--kgym-min);color:var(--kgym-min)}
.btn-careful.is-armed{background:var(--kgym-min);border-color:var(--kgym-min);color:var(--lawha-surface)}
.btn:active:not(:disabled){transform:scale(.96);filter:brightness(.9)}
[data-theme='dark'] .lawha-theme .btn:active:not(:disabled){filter:brightness(1.15)}
.lawha-theme .btn:disabled{opacity:1;background:var(--kgym-sunk);color:var(--lawha-muted);border-color:transparent;box-shadow:none;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
@media(hover:hover){.btn-main:hover:not(:disabled){background:var(--lawha-accent)}.btn-soft:hover:not(:disabled),.btn-round:hover:not(:disabled){filter:brightness(.96)}}

/* ═══ 4. Cards, chips, switches, rows ═══════════════════════════════════════════════════════════════════════════════
   Cards: soft layers instead of boxes — no 1 px border, 20 px corners, depth from shade; never a box inside a box. */
.card,.today-card,.exercise-card,.whoop-card,.map-card,.body-today,.muscle-list-card,.history-view>section,.plan-it,
.exercise-page .card,.my-workouts-card,.muscles-today,.calendar-month,
.calendar>.calendar-day,.soreness-card,.workout-card,.muscle-details{border:0;border-radius:var(--r-card);background:var(--lawha-surface);box-shadow:var(--sh1)}
.lawha-theme .card .card,.lawha-theme .card .today-card{box-shadow:none;background:transparent}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 11px;border-radius:var(--r-pill);background:var(--kgym-sunk);color:var(--lawha-ink);font:600 var(--t-small)/1.2 var(--lawha-font);white-space:nowrap}
.chip.is-up{background:var(--kgym-done);color:var(--kgym-met)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
/* the segmented switch (kg · lb, the History views): a sunk track, the chosen one raised */
.lawha-theme .segmented{display:inline-flex;gap:2px;padding:3px;border:0;border-radius:var(--r-pill);background:var(--kgym-sunk);overflow:visible}
.lawha-theme .segmented button{min-height:44px;min-width:44px;padding:0 16px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--lawha-muted);font:600 var(--t-body)/1.2 var(--lawha-font)}
.lawha-theme .segmented button[aria-pressed=true]{background:var(--kgym-raised);color:var(--lawha-ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.18)}
/* inputs: 16 px words, 14 px corners, a visible outline (edge) and a focus ring */
/* light on purpose (:where): any rule naming a box (the set box being entered, the picker's field) wins over this one */
.lawha-theme .tab-content :where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):not(:where(.glucose-area,.glucose-card,.glucose-form,.glucose-session,.glucose-prompt,.glucose-confirm) *),.lawha-theme .sub-sheet :where(input:not([type=checkbox]),select){min-height:48px;border:1.5px solid var(--kgym-edge);border-radius:var(--r-input);background:var(--kgym-sunk);color:var(--lawha-ink);font-size:var(--t-input)}
.lawha-theme :is(input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--lawha-focus) 35%,transparent);outline-offset:0;border-color:var(--lawha-focus)}

/* ═══ 5. The pinned back bar (on every inner page) ════════════════════════════════════════════════════════════════
   Principle 3: Back is always visible, says where it goes ("‹ Body"), never scrolls away — a sticky glass bar with the
   round back pill, the page's name (and a small line under it), and at most two round tools at its end. */
.back-bar{position:sticky;top:0;z-index:7;display:flex;align-items:center;gap:8px;min-height:60px;margin:0 calc(0px - var(--kgym-gutter)) 12px;padding:8px var(--kgym-gutter) 8px calc(var(--kgym-gutter) - 6px);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--lawha-line)}
.bb-back{display:inline-flex;align-items:center;gap:2px;flex:none;min-height:44px;min-width:44px;max-width:45%;padding:0 14px 0 4px;border:0;border-radius:var(--r-pill);background:var(--kgym-sunk);color:var(--lawha-ink);font:600 var(--t-body)/1.2 var(--lawha-font);cursor:pointer}
.bb-back .bb-arrow{display:grid;place-items:center;flex:none;width:36px;height:36px}
.bb-back .bb-word{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[dir=rtl] .bb-arrow svg,.lawha-theme:dir(rtl) .bb-arrow svg{transform:scaleX(-1)}
.bb-titles{flex:1;min-width:0;display:grid}
.bb-title{margin:0;font:600 var(--t-body)/1.25 var(--lawha-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-sub{font-size:var(--t-small);color:var(--lawha-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-tools{display:flex;align-items:center;gap:8px;flex:none}
@media (min-width:900px){.back-bar{margin:0 0 16px;padding:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;position:static}}

/* ═══ 6. The floating tab bar (the phone) ═════════════════════════════════════════════════════════════════════════
   The same four tabs and drawings, now a glass bar floating 12 px from the edges; the open tab is a sage pill. */
@media (max-width:899px){
.lawha-theme .tab-bar{inset-inline:12px;bottom:calc(10px + env(safe-area-inset-bottom));gap:4px;max-width:none;padding:6px;border:0;border-radius:32px;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--sh2)}
.lawha-theme .tab-bar button{min-height:56px;gap:1px;border-radius:26px;font:500 var(--t-small)/1.2 var(--lawha-font)}
.lawha-theme .tab-bar button[aria-current=page]{background:var(--lawha-sage);color:var(--lawha-ink);font-weight:700}
.lawha-theme .tab-content{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
#app:has(.workout-pill) .tab-content{padding-bottom:calc(172px + env(safe-area-inset-bottom))}
.lawha-theme .workout-pill{bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media (min-width:431px) and (max-width:899px){.lawha-theme .tab-bar{max-width:616px;margin-inline:auto}}

/* ═══ 7. Words for screen readers only; the quiet title line ═══════════════════════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.title-line[data-under-page]{display:none}
.tab-content:has(.screen>.back-bar)>.title-line{display:none}
.lawha-theme .theme-toggle{border:0;border-radius:50%;background:var(--kgym-sunk)}
.exercise-link{display:inline;min-height:44px;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer}
.set-table .last-fill{text-decoration:none;border-radius:var(--r-thumb)}
.lawha-theme .tab-content a{text-decoration:none}

/* ═══ 8. The website: a side menu on the left and a pinned top bar (decision 2 A) ═══════════════════════════════════ */
.rail-brand,.rail-week{display:none}
@media (max-width:899px){.side-rail{display:contents}}
@media (min-width:900px){
#app{display:block;padding-inline-start:216px}
.side-rail{position:fixed;inset-block:0;inset-inline-start:0;z-index:8;box-sizing:border-box;width:216px;display:flex;flex-direction:column;gap:18px;padding:22px 14px 92px;background:var(--lawha-surface);box-shadow:1px 0 0 var(--lawha-line);overflow-y:auto}
.rail-brand{display:grid;padding:0 10px}
.rail-brand b{font:400 var(--t-page)/1 var(--lawha-display)}
.rail-brand small{margin-top:4px;font-size:var(--t-small);color:var(--lawha-muted)}
.lawha-theme .tab-bar{position:static;order:0;display:grid;gap:4px;width:auto;max-width:none;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.lawha-theme .tab-bar button{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:48px;margin:0;padding:0 14px;border:0;border-radius:var(--r-pill);color:var(--lawha-muted);font:500 var(--t-body)/1.2 var(--lawha-font)}
.lawha-theme .tab-bar button[aria-current=page]{background:var(--lawha-sage);color:var(--lawha-ink);font-weight:700;border:0}
.rail-week:not([hidden]){display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--lawha-paper)}
.rail-week-words{display:grid;line-height:1.3}
.rail-week-words b{font-size:var(--t-body)}
.rail-week-words small{font-size:var(--t-small);color:var(--lawha-muted)}
.rail-week .ring-in b{font-size:var(--t-body)}
.lawha-theme .open-workouts{position:static;width:auto;max-width:none;margin:0}
.lawha-theme .workout-pill{position:static;width:100%;min-width:0;max-width:none;margin:0}
/* the title line's tools (light / dark, Saved) sit at the side menu's foot on every page */
.lawha-theme .title-line .title-tools,.lawha-theme .title-line[data-under-page] .title-tools{position:fixed;top:auto;bottom:22px;inset-inline-start:22px;inset-inline-end:auto;z-index:9;display:flex}
.lawha-theme .title-line .theme-toggle{display:inline-flex}
.title-line[data-under-page]{display:block;height:0;margin:0;padding:0;overflow:visible;box-shadow:none}
.title-line[data-under-page]>:not(.title-tools){display:none}
/* the pinned top bar: the date (or the trail) over the serif title, glass while the page scrolls under it */
.lawha-theme .tab-content{max-width:1280px;margin-inline:0;padding:0 28px var(--kgym-s6)}
.lawha-theme .title-line{position:sticky;top:0;z-index:6;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"date" "title";align-content:center;min-height:84px;margin:0 -28px 22px;padding:12px 28px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--lawha-line)}
.back-bar{position:sticky;top:0;z-index:6;min-height:84px;margin:0 -28px 22px;padding:12px 28px;gap:14px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--lawha-line)}
.back-bar .bb-titles{align-content:center}
.back-bar .bb-sub{order:-1}
.back-bar .bb-title{font:400 var(--t-page)/1.1 var(--lawha-display)}
.screen-history>.history-switch{top:22px}
}

/* ═══ 9. Today before Start (audit W3: Start comes first) ══════════════════════════════════════════════════════════ */
.screen-today{display:grid;gap:12px}
.screen-today>*,.today-col>*{margin:0}
@media (max-width:899px){.today-col{display:contents}}
.card-kicker{margin:0 0 2px;font:600 var(--t-small)/1.3 var(--lawha-font);color:var(--lawha-muted)}
.lawha-theme .today-card{display:block;padding:16px}
.lawha-theme .today-card>h2{margin:0;font:600 var(--t-card)/1.25 var(--lawha-font)}
.today-chips{margin:8px 0 0}
.today-chips .ui-glyph{width:14px;height:14px}
.lawha-theme .today-card .card-routine{margin:12px 0 0}
.lawha-theme .today-card .plan-length{margin:6px 0 0;font-size:var(--t-small);color:var(--lawha-muted)}
.lawha-theme .hero-cta{display:flex;justify-content:center;margin:14px 0 0}
.lawha-theme .hero-cta .start-today{max-width:360px}
/* the fold rows: one card, a 52 px row per piece; its piece opens under it */
.today-folds{padding:6px 14px}
.fold-item+.fold-item{border-top:1px solid var(--lawha-line)}
.fold-row{display:flex;align-items:center;gap:12px;width:100%;max-width:none;min-height:52px;padding:0;border:0;background:transparent;color:var(--lawha-ink);font:500 var(--t-body)/1.3 var(--lawha-font);text-align:start;cursor:pointer}
.lawha-theme .tab-content .fold-row{max-width:360px}
.fold-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--lawha-sage);color:var(--lawha-accent)}
.fold-label{flex:1;min-width:0}
.fold-value{flex:none;color:var(--lawha-muted)}
.fold-row .glyph-chevron{flex:none;color:var(--lawha-muted);transition:transform var(--lawha-duration) var(--lawha-ease)}
.fold-row[aria-expanded=true] .glyph-chevron{transform:rotate(90deg)}
.fold-panel{padding:0 0 12px}
.fold-panel>.card,.fold-panel>section{margin:0;padding:0;box-shadow:none;background:transparent}
.fold-panel .length-row{display:flex;gap:8px}
/* the coach card: the insight tint, a round spark, the first reason, the rest behind "Why?" */
.coach-card{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-card);background:var(--kgym-insight);box-shadow:var(--sh1)}
.coach-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lawha-accent);color:var(--lawha-surface)}
.coach-words{min-width:0;flex:1}
.coach-k{margin:0;font:600 var(--t-small)/1.3 var(--lawha-font);color:var(--lawha-accent)}
.coach-t{margin:0;font:600 var(--t-body)/1.35 var(--lawha-font)}
.coach-a{margin:6px 0 0}
.coach-card .why{margin:8px 0 0;padding:0;border:0;background:transparent;font-size:var(--t-small);color:var(--lawha-muted)}
.coach-card .why p{margin:2px 0}
/* the plan's rows: a 44 px picture, the name, the amount, × at the end */
.lawha-theme .plan-rows{padding:6px 14px}
.lawha-theme .plan-rows .plan-list{margin:0;gap:0}
.lawha-theme .plan-rows .plan-list li{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-areas:"pic name x" "pic detail x";column-gap:12px;align-items:center;min-height:60px;padding:8px 0;border-top:1px solid var(--lawha-line)}
.lawha-theme .plan-rows .plan-list li:first-child{border-top:0}
.lawha-theme .plan-rows .exercise-picture{grid-area:pic;width:44px;height:44px;border-radius:var(--r-thumb)}
.lawha-theme .plan-rows .plan-name{grid-area:name;font:600 var(--t-body)/1.3 var(--lawha-font)}
.lawha-theme .plan-rows .plan-detail{grid-area:detail;margin:0;font-size:var(--t-small);color:var(--lawha-muted)}
.lawha-theme .plan-rows .preview-remove{grid-area:x;background:transparent;color:var(--lawha-muted)}
@media (min-width:900px){
.lawha-theme .screen-today:not(:has(.exercise-card)){grid-template-columns:minmax(260px,300px) minmax(0,560px);gap:20px 24px}
.lawha-theme .screen-today:not(:has(.exercise-card))>.today-mid{grid-column:2;grid-row:1 / span 3;display:flex;flex-direction:column;gap:14px}
.lawha-theme .today-mid .plan-list li{grid-template-columns:44px minmax(0,1fr) auto 44px;grid-template-areas:"pic name detail x"}
.lawha-theme .today-mid .plan-list .plan-detail{text-align:end;white-space:nowrap}
}
@media (min-width:1200px){
.lawha-theme .screen-today:not(:has(.exercise-card)){grid-template-columns:280px minmax(0,560px) minmax(0,1fr)}
.lawha-theme .screen-today:not(:has(.exercise-card))>.today-right{grid-column:3;grid-row:1}
}

/* ═══ 10. The workout (one Finish in the pinned header; a set answers with its toast) ══════════════════════════════ */
.tab-content:has(.screen-today .session-strip)>.title-line:not([data-under-page]){display:none}
@media (min-width:900px){.lawha-theme .tab-content:has(.screen-today .session-strip)>.title-line{display:block;height:0;min-height:0;margin:0;padding:0;box-shadow:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}.lawha-theme .tab-content:has(.screen-today .session-strip)>.title-line>:not(.title-tools){display:none}}
.lawha-theme .session-strip{position:sticky;top:0;z-index:7;display:flex;align-items:center;gap:8px;margin:0 calc(0px - var(--kgym-gutter));padding:8px var(--kgym-gutter);border:0;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--lawha-line)}
.lawha-theme .session-strip>.session-head{display:contents}
.lawha-theme .session-strip .routine-bar{display:none}
.session-titles{flex:1;min-width:0;display:grid;order:0}
.session-title{margin:0;font:600 var(--t-body)/1.25 var(--lawha-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lawha-theme .session-strip .session-clock{margin:0;font-size:var(--t-small);color:var(--lawha-muted)}
.lawha-theme .session-strip .session-clock .clock-time{font:600 var(--t-small)/1.2 var(--lawha-font);color:var(--lawha-muted)}
.lawha-theme .session-strip .session-clock .clock-cap{margin:0;font-size:var(--t-small)}
.lawha-theme .session-strip .session-clock.near-cap .clock-time,.lawha-theme .session-strip .session-clock.near-cap{color:var(--lawha-ink)}
.lawha-theme .session-strip .pause-link,.lawha-theme .session-strip .pause-box{order:1;margin:0}
.lawha-theme .session-strip{flex-wrap:wrap}
.lawha-theme .session-strip .pause-box{order:3;flex-basis:100%;display:flex;align-items:center;justify-content:space-between;gap:8px}
.lawha-theme .session-strip .pause-box .paused-line{margin:0;font-size:var(--t-small);color:var(--lawha-ink)}
.lawha-theme .session-strip .finish-button{order:2}
.lawha-theme .session-strip .whoop-chip{order:4;flex-basis:100%;margin:0}
.steps-prog{display:flex;align-items:center;gap:4px;margin:2px 0 0}
.steps-prog i{flex:1;height:5px;border-radius:3px;background:var(--kgym-sunk)}
.steps-prog i.is-done{background:var(--lawha-accent)}
.steps-prog i.is-now{background:linear-gradient(90deg,var(--lawha-accent) 50%,var(--kgym-sunk) 50%)}
[dir=rtl] .steps-prog i.is-now{background:linear-gradient(270deg,var(--lawha-accent) 50%,var(--kgym-sunk) 50%)}
.steps-prog span{flex:none;margin-inline-start:6px;font-size:var(--t-small);color:var(--lawha-muted)}
/* the exercise card: a 52 px picture tile, the name in bold sans, "helps ..." under it, Like round at the end */
.lawha-theme .exercise-card{padding:16px}
.lawha-theme .exercise-card .card-head{align-items:center}
.lawha-theme .exercise-card .card-head .exercise-picture{width:52px;height:52px;border-radius:var(--r-tile)}
.lawha-theme .exercise-card h2,.lawha-theme .exercise-card .card-name{margin:0;font:600 var(--t-name)/1.3 var(--lawha-font)}
.lawha-theme .exercise-card .muscles{font-size:var(--t-small);color:var(--lawha-muted)}
.lawha-theme .exercise-card .muscles span{display:inline}
.lawha-theme .exercise-card>.plan-detail{margin:8px 0 0;font-size:var(--t-small);color:var(--lawha-muted)}
.lawha-theme .exercise-card .segmented.unit-switch,.lawha-theme .exercise-card .segmented.effort-switch{background:var(--kgym-sunk)}
.lawha-theme .exercise-card .segmented.unit-switch button,.lawha-theme .exercise-card .segmented.effort-switch button{padding:0 16px;font-size:var(--t-body)}
/* the set table: a row per set, the boxes sunk with 12 px corners, the tick a 44 px circle that fills green */
.lawha-theme .set-table{gap:6px}
.lawha-theme .set-table .set-row{min-height:48px;padding:2px 4px;border-radius:var(--r-input)}
.lawha-theme .set-table .set-box{height:44px;border:1.5px solid transparent;border-radius:var(--r-thumb);background:var(--kgym-sunk);font-weight:600}
.lawha-theme .set-table .is-now .set-box{border-color:var(--kgym-edge);background:var(--kgym-raised)}
.lawha-theme .set-table .set-box:focus-visible{border-color:var(--lawha-focus);outline:3px solid color-mix(in srgb,var(--lawha-focus) 25%,transparent);outline-offset:0}
.lawha-theme .set-table .tick{border:1.5px solid var(--kgym-edge);border-radius:50%;color:var(--lawha-muted)}
.lawha-theme .set-table .tick.is-filled{border-color:var(--kgym-met);background:var(--kgym-met);color:var(--lawha-surface)}
.lawha-theme .set-table .is-done{background:var(--kgym-done)}
.lawha-theme .set-table .is-done .tick.is-filled{animation:kgym-tick 200ms var(--lawha-ease)}
@keyframes kgym-tick{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.lawha-theme .exercise-card .add-set{gap:6px}
.lawha-theme .exercise-card .box-hint{display:flex;gap:8px;align-items:center;margin:8px 0 0;padding:8px 12px;border-radius:var(--r-input);background:var(--kgym-insight);font-size:var(--t-small);color:var(--lawha-ink)}
/* the picture buttons (approved 9 Oct): only their corners softened, a sunk tile instead of a lined box */
.lawha-theme .icon-row{gap:6px;padding-top:10px;border-top:1px solid var(--lawha-line)}
.lawha-theme .icon-action{min-width:60px}
.lawha-theme .icon-action .icon-box{border:0;border-radius:14px;background:var(--kgym-sunk)}
.lawha-theme .icon-action[aria-expanded=true] .icon-box,.lawha-theme .icon-action.is-filled .icon-box{background:var(--lawha-ink);color:var(--lawha-surface)}
.lawha-theme .icon-action.is-off .icon-box{border:1.5px dashed var(--lawha-muted);background:transparent}
.lawha-theme .exercise-card.is-folded{padding:8px 14px}
.lawha-theme .fold-line .plan-name{font:600 var(--t-body)/1.3 var(--lawha-font)}
.lawha-theme .fold-line .exercise-picture,.lawha-theme .fold-done{border-radius:var(--r-tile)}
/* the rest timer: a floating ink pill, the time in a ring, what comes next, -15 / +15 / Skip */
.lawha-theme .rest-bar{inset-inline:12px;bottom:calc(92px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;max-width:520px;padding:8px 10px 8px 8px;border:0;border-radius:var(--r-pill);background:var(--lawha-ink);color:var(--lawha-surface);box-shadow:var(--sh2)}
.lawha-theme .rest-line{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.rest-ring{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px}
.rest-ring svg{position:absolute;inset:0}
.rest-ring-track{stroke:color-mix(in srgb,var(--lawha-surface) 22%,transparent)}
.rest-ring-fill{stroke:var(--lawha-surface)}
.lawha-theme .rest-ring .rest-time{position:relative;font:600 var(--t-small)/1 var(--lawha-font)}
.lawha-theme .rest-words{min-width:0;margin:0;font:600 var(--t-small)/1.3 var(--lawha-font)}
.lawha-theme .rest-actions{flex:none;gap:6px}
.lawha-theme .rest-button{min-width:48px;height:44px;padding:0 10px;border:1.5px solid color-mix(in srgb,var(--lawha-surface) 45%,transparent);border-radius:var(--r-pill);background:transparent;color:var(--lawha-surface);font:600 var(--t-body)/1 var(--lawha-font)}
.lawha-theme .rest-button.rest-skip{border:0;background:var(--lawha-surface);color:var(--lawha-ink);padding:0 14px}
.lawha-theme .rest-progress{display:none}
@media (max-width:374px){.lawha-theme .rest-words{display:none}}
@media (min-width:900px){
.lawha-theme .session-strip{margin:0 -28px 18px;padding:14px 28px;min-height:84px;box-sizing:border-box}
.lawha-theme .session-titles{display:flex;flex-direction:column-reverse}
.lawha-theme .session-title{font:400 var(--t-page)/1.1 var(--lawha-display)}
.lawha-theme .steps-prog{display:none}
.lawha-theme .today-side .rest-bar{flex-direction:column;align-items:center;gap:14px;padding:22px 18px;border-radius:var(--r-sheet);background:var(--kgym-raised);color:var(--lawha-ink);box-shadow:var(--sh2)}
.lawha-theme .today-side .rest-line{flex-direction:column}
.lawha-theme .today-side .rest-ring{width:150px;height:150px}
.lawha-theme .today-side .rest-ring svg{width:150px;height:150px}
.lawha-theme .today-side .rest-ring-track{stroke:var(--kgym-sunk)}
.lawha-theme .today-side .rest-ring-fill{stroke:var(--lawha-accent)}
.lawha-theme .today-side .rest-ring .rest-time{font:400 var(--t-page)/1 var(--lawha-display)}
.lawha-theme .today-side .rest-button{border-color:var(--lawha-ink);color:var(--lawha-ink)}
.lawha-theme .today-side .rest-button.rest-skip{background:var(--lawha-sage);color:var(--lawha-ink)}
.lawha-theme .workout-index-card{padding:16px;border-radius:var(--r-card)}
.lawha-theme .index-line{border-radius:12px}
.lawha-theme .index-line[aria-current=step]{background:var(--lawha-sage);box-shadow:none}
.lawha-theme .index-mark{border-radius:50%;border-color:var(--kgym-edge)}
}

/* ═══ 11. The picker: full screen on the phone, a side panel on the website (audit S3) ══════════════════════════════ */
.lawha-theme .add-sheet:not(.add-inline){position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;margin:0;padding:0;border:0;border-radius:0;background:var(--kgym-raised);box-shadow:none;overflow:hidden}
.pick-top{flex:none;display:grid;gap:10px;padding:max(10px,env(safe-area-inset-top)) 16px 12px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--lawha-line)}
.pick-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lawha-theme .add-sheet .pick-head h2{margin:0;font:600 var(--t-card)/1.25 var(--lawha-font)}
.lawha-theme .add-sheet .add-close{float:none;position:static}
.add-field{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border:1.5px solid var(--kgym-edge);border-radius:var(--r-input);background:var(--kgym-sunk);color:var(--lawha-muted)}
.add-field:focus-within{border-color:var(--lawha-focus);background:var(--kgym-raised);box-shadow:0 0 0 3px color-mix(in srgb,var(--lawha-focus) 25%,transparent)}
.lawha-theme .add-sheet .add-search{flex:1;min-width:0;max-width:none;min-height:48px;margin:0;padding:0;border:0;background:transparent;color:var(--lawha-ink);font-size:var(--t-input);outline:none}
.lawha-theme .add-chips{display:flex;flex-wrap:wrap;gap:6px}
.lawha-theme .add-chip{flex:none;min-height:44px;padding:0 16px;border:1.5px solid var(--kgym-edge);border-radius:var(--r-pill);background:transparent;color:var(--lawha-ink);font:600 var(--t-body)/1.2 var(--lawha-font);cursor:pointer}
.lawha-theme .add-chip[aria-pressed=true]{background:var(--lawha-ink);border-color:var(--lawha-ink);color:var(--lawha-surface)}
.add-list{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 120px;overscroll-behavior:contain}
.lawha-theme .add-sheet h3{margin:16px 0 6px;font:600 var(--t-small)/1.3 var(--lawha-font);letter-spacing:0;text-transform:none;color:var(--lawha-muted)}
.lawha-theme .add-sheet h4{margin:10px 0 4px;font:600 var(--t-small)/1.3 var(--lawha-font);color:var(--lawha-muted)}
.lawha-theme .add-sheet .swap-list{display:grid;margin:0;padding:4px 14px;border-radius:var(--r-card);background:var(--lawha-surface);box-shadow:var(--sh1)}
.lawha-theme .add-sheet .swap-list li{display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;gap:12px;align-items:center;min-height:60px;padding:6px 0;border-top:1px solid var(--lawha-line)}
.lawha-theme .add-sheet .swap-list li:first-child{border-top:0}
.lawha-theme .add-sheet .add-thumb{display:block;width:44px;height:44px;border-radius:var(--r-thumb);object-fit:cover;background:var(--lawha-sage)}
.lawha-theme .add-sheet .add-row{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;max-width:none;min-height:44px;padding:0;border:0;background:transparent;color:var(--lawha-ink);text-align:start;text-decoration:none;cursor:pointer}
.lawha-theme .add-sheet .add-row .plan-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 var(--t-body)/1.3 var(--lawha-font);text-decoration:none}
.lawha-theme .add-sheet .add-row .plan-detail{font-size:var(--t-small);color:var(--lawha-muted)}
.lawha-theme .add-sheet .add-row:disabled .plan-name{color:var(--lawha-muted)}
.lawha-theme .add-sheet .add-go{grid-column:4;background:transparent;border:1.5px solid var(--kgym-edge)}
.lawha-theme .add-sheet .add-go.is-on{background:var(--kgym-met);border-color:var(--kgym-met);color:var(--lawha-surface)}
.lawha-theme .add-sheet .add-in{grid-column:4;font-size:var(--t-small);color:var(--lawha-muted)}
.sheet-cta{position:absolute;inset-inline:0;bottom:0;display:flex;justify-content:center;padding:14px 16px max(18px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--kgym-raised) 35%)}
body:has(.add-sheet:not(.add-inline)){overflow:hidden}
@media (min-width:900px){
.lawha-theme .add-sheet:not(.add-inline){inset:0;inset-inline-start:auto;width:480px;max-width:100%;border-start-start-radius:var(--r-sheet);border-end-start-radius:var(--r-sheet);box-shadow:var(--sh3)}
.lawha-theme .add-sheet .swap-list li{grid-template-columns:44px minmax(0,1fr) auto 44px}
body:has(.add-sheet:not(.add-inline)){overflow:auto}
}
@media (prefers-reduced-motion:no-preference){.lawha-theme .add-sheet:not(.add-inline){animation:kgym-sheet-up 250ms var(--lawha-ease)}}
@keyframes kgym-sheet-up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.lawha-theme .add-inline .add-field{margin:8px 0}
.lawha-theme .add-inline .add-list{padding:0;overflow:visible}

/* ═══ 12. The sheet (phone) and the side panel (website): one shape for every "more about this" ═══════════════════ */
.lawha-theme .sheet:not(.add-sheet){border:0;border-radius:var(--r-card);background:var(--lawha-surface);box-shadow:var(--sh1)}
.grab{display:block;width:38px;height:5px;margin:0 auto 6px;border-radius:3px;background:var(--kgym-edge);opacity:.7}

/* ═══ 13. Every page: the inner pages' bodies, the plain rows ══════════════════════════════════════════════════════ */
.lawha-theme .sub-page{display:grid;gap:12px}
.lawha-theme .sub-page>*{margin:0}
.lawha-theme .exercise-page>.back-bar{grid-column:1/-1}
.lawha-theme .exercise-page h1{font:400 var(--t-page)/1.15 var(--lawha-display)}
.lawha-theme .video-box{border-radius:var(--r-card);box-shadow:var(--sh1)}
.lawha-theme .video-mark{background:var(--kgym-raised);color:var(--lawha-ink);box-shadow:var(--sh2)}
.lawha-theme .video-tag{border:0;background:var(--kgym-raised)}
.lawha-theme .settings-page>.back-bar{margin-bottom:4px}
@media (min-width:900px){.lawha-theme .tab-content>.settings-page>.settings-back .bb-back{display:none}.lawha-theme .tab-content>.settings-page>.settings-back{display:flex;position:static;min-height:0;margin:0 0 8px;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.lawha-theme .tab-content>.settings-page>.settings-back .bb-title{font:600 var(--t-card)/1.25 var(--lawha-font)}}

/* ═══ 14. Rings, the routine bar in the workout card, website columns ═════════════════════════════════════════════ */
.ring{position:relative;flex:none;display:inline-grid;place-items:center}
.ring svg{display:block}
.ring .ring-track{stroke:var(--kgym-sunk)}
.ring .ring-fill{stroke:var(--lawha-accent)}
.ring .ring-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.05}
.ring .ring-in b{font:400 var(--t-card)/1 var(--lawha-display)}
.ring .ring-in small{font-size:var(--t-small);line-height:1.2;color:var(--lawha-muted)}
/* the routine as soft blocks in the workout card: the warm-up cardio amber, the stretches sunk, the weights green */
.lawha-theme .card-routine .routine-bar{gap:4px;margin:0}
.lawha-theme .card-routine .rb-seg{min-width:0;min-height:32px;padding:0 6px;border:0;border-radius:10px;background:var(--kgym-sunk);color:var(--lawha-ink);font:600 var(--t-small)/1.2 var(--lawha-font);overflow:hidden;text-overflow:ellipsis}
.lawha-theme .card-routine .rb-seg[data-step=cardio-warm-up],.lawha-theme .card-routine .rb-seg[data-step=end-cardio]{background:color-mix(in srgb,var(--kgym-low) 32%,var(--lawha-surface))}
.lawha-theme .card-routine .rb-seg[data-step=weights]{background:color-mix(in srgb,var(--lawha-accent) 22%,var(--lawha-surface))}
.lawha-theme .routine-caption{margin:6px 0 0;font-size:var(--t-small);color:var(--lawha-muted)}
@media (max-width:420px){.lawha-theme .card-routine .rb-seg{flex:1 1 auto;min-width:max-content}.lawha-theme .card-routine .routine-bar{flex-wrap:wrap}}
@media (min-width:900px){
.lawha-theme .tab-bar{grid-template-columns:1fr}
/* a blur would make the side menu's tools (fixed) follow the bar: the bars are a solid paper */
.lawha-theme .title-line,.lawha-theme .back-bar,.lawha-theme .session-strip{background:var(--lawha-paper);-webkit-backdrop-filter:none;backdrop-filter:none}
.lawha-theme .screen-today:has(.exercise-card){grid-template-columns:220px minmax(0,1fr);column-gap:22px}
.lawha-theme .screen-today .workout-index{top:100px}
}
@media (min-width:1200px){
.lawha-theme .screen-today:not(:has(.exercise-card)){grid-template-columns:240px minmax(0,1fr) 270px}
.lawha-theme .screen-today:has(.exercise-card){grid-template-columns:220px minmax(0,1fr) 250px}
.lawha-theme .screen-today:has(.exercise-card)>.today-side{top:100px}
}
.lawha-theme .index-line[aria-current=step] .index-detail{color:var(--lawha-ink)}
.lawha-theme .card-routine .rb-seg{display:flex;align-items:center;justify-content:center}
@media (min-width:900px){.lawha-theme .title-line{z-index:9}}
@media (min-width:900px){.lawha-theme .side-rail .wp-words{display:grid;white-space:nowrap;line-height:1.25}.lawha-theme .side-rail .wp-head,.lawha-theme .side-rail .wp-tail{white-space:normal;overflow-wrap:anywhere}.lawha-theme .side-rail .wp-sets{display:none}.lawha-theme .side-rail .wp-tail{display:block;color:color-mix(in srgb,var(--lawha-surface) 82%,transparent)}.lawha-theme .side-rail .wp-sep{display:none}.lawha-theme .screen-history>.history-switch{z-index:10}}
/* the picker's search box: the field draws the outline, the input inside has none */
.lawha-theme .tab-content .add-field input.add-search,.lawha-theme .add-field input.add-search{min-height:44px;border:0;border-radius:0;background:transparent;outline:none}
/* a back bar always spans its page (a Settings page is a grid that would shrink it) */
.lawha-theme .settings-page>.back-bar,.lawha-theme .sub-page>.back-bar{justify-self:stretch}
/* the back bar's title is the bar's own (15 px bold) on the phone; the website's top bar makes it the serif page title */
.lawha-theme .tab-content .back-bar .bb-title{margin:0;font:600 var(--t-body)/1.25 var(--lawha-font)}
@media (min-width:900px){.lawha-theme .tab-content .back-bar .bb-title{font:400 var(--t-page)/1.1 var(--lawha-display)}}

/* ═══ 15. Body (wave 3): the week ring + chips, the map first, a tapped muscle in a sheet (phone) / panel (website) ═══
   The body drawing, its four colours, stripes, cross-hatch and resting clock are untouched (body-map.ts, kgym.css). */
.week-card{display:flex;align-items:center;gap:16px;margin:0 0 12px;padding:14px 16px}
.week-card .ring .ring-in b{font-size:var(--t-card)}
.week-words{min-width:0;display:grid;gap:4px}
.week-k{margin:0;font:600 var(--t-small)/1.3 var(--lawha-font)}
.week-range{margin:0;font-size:var(--t-small);color:var(--lawha-muted)}
.week-chips{margin:2px 0 0}
.week-chip{font-weight:500}
.week-chip b{font-weight:700}
.chip-dot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--kgym-none);box-shadow:inset 0 0 0 1px var(--lawha-line)}
.week-chip.is-met .chip-dot{background:var(--kgym-met);box-shadow:none}
.week-chip.is-low .chip-dot{background:var(--kgym-low);box-shadow:none}
.week-chip.is-min .chip-dot{background:var(--kgym-min);box-shadow:none}
.week-chip.is-rest .chip-dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--lawha-ink)}
.week-card.is-empty .summary-head{margin:0;font:600 var(--t-name)/1.3 var(--lawha-font)}
.week-card.is-empty .summary-sub{margin:0;font-size:var(--t-small);color:var(--lawha-muted)}
.lawha-theme .map-card{padding:14px 12px 12px}
.map-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px}
.lawha-theme .map-top .map-hint{margin:0;font-size:var(--t-small);color:var(--lawha-muted)}
/* review M1: the website shows the hint too ("Click a muscle…", as drawn) — it is the map card's focus fallback (R37) */
@media (min-width:900px){.lawha-theme .body-week .map-top .map-hint{display:block}}
.lawha-theme .map-top .muscle-toggle{flex:none}
.lawha-theme .map-legend{gap:6px 12px}
/* the tapped muscle: a half sheet sliding up over the map on the phone (the map stays in view above it) */
.lawha-theme .muscle-details{border-top:0}
.muscle-details .grab{display:none}
.lawha-theme .muscle-details h2{margin:2px 0 0;font:600 var(--t-card)/1.25 var(--lawha-font)}
.lawha-theme .details-status{gap:6px}
.lawha-theme .details-word,.lawha-theme .details-resting{min-height:28px;padding:3px 11px;border-radius:var(--r-pill);background:var(--kgym-sunk);font:600 var(--t-small)/1.2 var(--lawha-font)}
.lawha-theme .details-word b{font-weight:600}
.lawha-theme .details-status .bm-swatch{width:14px;height:14px}
.lawha-theme .details-big b{font:400 var(--t-page)/1 var(--lawha-display)}
.lawha-theme .details-big small{font-size:var(--t-body)}
.lawha-theme .details-facts dt,.lawha-theme .details-facts dd{border-top:1px solid var(--lawha-line)}
.lawha-theme .details-facts dd{font-weight:600}
.lawha-theme .muscle-details h3{margin:16px 0 4px;font:600 var(--t-small)/1.3 var(--lawha-font);color:var(--lawha-muted)}
.lawha-theme .exercise-top li{grid-template-columns:44px minmax(0,1fr) auto 12px;gap:12px;min-height:60px;border-top:1px solid var(--lawha-line)}
.row-thumb{display:block;width:44px;height:44px;border-radius:var(--r-thumb);object-fit:cover;background:var(--lawha-sage)}
.lawha-theme .exercise-top .exercise-link{font:600 var(--t-body)/1.3 var(--lawha-font)}
@media (max-width:899px){
.lawha-theme .muscle-details{position:fixed;inset-inline:0;bottom:0;z-index:25;max-height:62vh;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:8px 16px calc(24px + env(safe-area-inset-bottom));border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--kgym-raised);box-shadow:var(--sh3)}
.muscle-details .grab{display:block}
@media (prefers-reduced-motion:no-preference){.lawha-theme .muscle-details{animation:kgym-sheet-up 250ms var(--lawha-ease)}}
.lawha-theme .tab-content:has(.muscle-details){padding-bottom:62vh}
}
/* the website: the week card in the day's column; the tapped muscle in the week card's right zone as a raised panel */
@media (min-width:900px){
.lawha-theme .screen-body{grid-template-areas:"whoop week" "today week" "ring week" "side week" ". week";grid-template-rows:auto auto auto auto 1fr}
.lawha-theme .screen-body>.week-card{grid-area:ring;margin:0 0 var(--kgym-s4)}
/* Release C: #49's measurement pieces (the Body side parts) take their own row under the week card, never on top of it */
.lawha-theme .screen-body>.body-side-parts{grid-area:side}
.lawha-theme .body-week{border:0;border-radius:var(--r-card);box-shadow:var(--sh1)}
.lawha-theme .body-week>.muscle-details{padding:18px;border-radius:var(--r-sheet);background:var(--kgym-raised);box-shadow:var(--sh2)}
.lawha-theme .body-week .map-top{grid-column:1/-1}
}

/* ═══ 16. The exercise page (wave 3): chips under the name, the muscles beside their words, three tiles, the trend ═══ */
.exercise-chips{margin:-4px 0 0}
.lawha-theme .exercise-muscles{display:flex;align-items:center;gap:14px}
.lawha-theme .exercise-muscles .small-body{flex:1;display:flex;align-items:center;gap:14px;margin:0}
.lawha-theme .exercise-muscles .sb-pair{flex:none}
.lawha-theme .exercise-muscles .small-body svg{height:120px}
.lawha-theme .exercise-muscles .sb-words{text-align:start;font-size:var(--t-body)}
.ex-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ex-tiles[hidden]{display:none}
.ex-tile{display:grid;gap:2px;min-width:0;padding:12px;border-radius:var(--r-tile);background:var(--lawha-surface);box-shadow:var(--sh1)}
.ex-tile small{font-size:var(--t-small);color:var(--lawha-muted)}
.ex-tile b{font:400 var(--t-card)/1.15 var(--lawha-display);overflow-wrap:anywhere}
.ex-trend[hidden]{display:none}
.ex-spark{display:block;width:100%;height:70px;margin-top:6px;overflow:visible}
.ex-spark polyline{stroke:var(--lawha-accent)}
.lawha-theme .exercise-steps ol{gap:6px}

/* ═══ 17. History (wave 3): rows that say what was trained, the calendar in round days ═════════════════════════════ */
.lawha-theme .history-list{gap:0;padding:4px 0}
.lawha-theme .history-row:has(.date-badge){display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 4px;border:0;border-radius:var(--r-input);background:transparent;font-size:var(--t-body)}
.lawha-theme .history-list li+li .history-row{border-top:1px solid var(--lawha-line);border-radius:0}
.date-badge{flex:none;display:grid;place-items:center;align-content:center;width:46px;height:46px;border-radius:14px;background:var(--kgym-sunk);line-height:1.05}
.date-badge small{font-size:var(--t-small);color:var(--lawha-muted)}
.date-badge b{font-size:var(--t-body)}
.row-words{flex:1;min-width:0;display:grid}
.lawha-theme .history-row .row-main{font:600 var(--t-body)/1.3 var(--lawha-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lawha-theme .history-row .row-meta{font-size:var(--t-small);color:var(--lawha-muted);overflow-wrap:anywhere}
.row-chevron{flex:none;color:var(--lawha-muted)}
.lawha-theme .history-row[aria-current=true]{background:var(--lawha-sage)}
.lawha-theme .history-row[aria-current=true] .row-meta{color:var(--lawha-ink)}
.lawha-theme .calendar-date{border-radius:50%;aspect-ratio:1;max-width:44px;justify-self:center;width:100%}
.lawha-theme .calendar-date.today{border:0;background:var(--lawha-ink);color:var(--lawha-surface);font-weight:700}
.lawha-theme .calendar-date[aria-pressed=true]{background:var(--lawha-sage);color:var(--lawha-ink);font-weight:700}
.lawha-theme .calendar-date.today[aria-pressed=true]{background:var(--lawha-ink);color:var(--lawha-surface);box-shadow:0 0 0 3px var(--lawha-sage)}
.lawha-theme .calendar-head h2{font:600 var(--t-name)/1.3 var(--lawha-font)}
.lawha-theme .calendar-step{border-radius:50%;background:var(--kgym-sunk)}
.lawha-theme .history-view>section h2{font:600 var(--t-name)/1.3 var(--lawha-font)}

/* ═══ 18. Settings (wave 3): iPhone-style groups with icon tiles; tick boxes become chips you tap on and off ═══════ */
.lawha-theme .settings-summary h2{margin:8px 4px 6px;font:600 var(--t-small)/1.3 var(--lawha-font);color:var(--lawha-muted)}
.lawha-theme .setting-lines{padding:2px 14px;border:0;border-radius:var(--r-card);background:var(--lawha-surface);box-shadow:var(--sh1)}
.lawha-theme .setting-lines li+li{border-top:1px solid var(--lawha-line)}
.lawha-theme .setting-line{gap:12px;min-height:56px;padding:0}
.s-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--lawha-sage);color:var(--lawha-accent)}
.lawha-theme .setting-name{flex:1}
.lawha-theme .setting-value{margin:0;min-width:0}
.lawha-theme .look-lines{padding:8px}
/* the tick boxes (priority muscles, chest focus, equipment): a chip you tap — sage with a ✓ when on; the real box is the
   chip's full size, invisible, so the tap target stays 44 px and the form is unchanged */
.lawha-theme .check-grid{display:flex;flex-wrap:wrap;gap:8px;padding:0;border:0}
.lawha-theme .check-grid legend{width:100%;margin:6px 0 4px;padding:0;font:600 var(--t-small)/1.3 var(--lawha-font);color:var(--lawha-muted)}
.lawha-theme .check-grid label{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1.5px solid var(--kgym-edge);border-radius:var(--r-pill);background:transparent;font:600 var(--t-body)/1.2 var(--lawha-font);cursor:pointer}
.lawha-theme .check-grid input{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);margin:0;opacity:0;cursor:pointer}
.lawha-theme .check-grid label:has(input:checked){border-color:var(--lawha-sage);background:var(--lawha-sage);color:var(--lawha-ink)}
.lawha-theme .check-grid label:has(input:checked)::before{content:"✓";font-weight:700;color:var(--lawha-accent)}
.lawha-theme .check-grid label:has(input:focus-visible){outline:3px solid var(--lawha-focus);outline-offset:2px}
.lawha-theme .settings-page .door-field{color:var(--lawha-muted)}
.lawha-theme .advanced summary{min-height:48px;font:600 var(--t-name)/1.3 var(--lawha-font)}
@media (min-width:900px){
.lawha-theme .tab-content>.settings-page{border:0;border-radius:var(--r-card);box-shadow:var(--sh1)}
.lawha-theme .setting-line[aria-current=true]{background:var(--lawha-sage);box-shadow:none;border-radius:12px}
}

/* ═══ 19. The sign-in door (wave 3): fields with their drawing, the show-password eye, one main pill, a quiet link ═══
   The door's words are unchanged; door.css (a shared copy) is untouched — these rules sit on top of it. */
/* the form's column is the screen's, never the field's natural width: at 320 px a field and Sign in stay inside the screen */
.door-form{grid-template-columns:minmax(0,1fr)}.door-form .door-field{min-width:0}
.door-field .field-box{min-width:0;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 4px 0 14px;border:1.5px solid var(--kgym-edge);border-radius:var(--r-input);background:var(--kgym-sunk);color:var(--lawha-muted)}
.door-field .field-box:focus-within{border-color:var(--lawha-focus);background:var(--kgym-raised);box-shadow:0 0 0 3px color-mix(in srgb,var(--lawha-focus) 25%,transparent)}
.lawha-theme .door-field .field-box input{flex:1;min-width:0;min-height:48px;padding:0;border:0;border-radius:0;background:transparent;color:var(--lawha-ink);font-size:var(--t-input);outline:none}
.field-ic{flex:none;display:grid;place-items:center}
.field-eye{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--lawha-muted);cursor:pointer}
.field-eye[aria-pressed=true]{color:var(--lawha-ink)}
.lawha-theme .door-form .shared-action.btn{width:100%;max-width:360px;justify-self:center;justify-content:center;gap:10px;min-height:52px;margin:8px 0 0;border:0;border-radius:var(--r-pill)}
.lawha-theme .recovery-help .door-switch{display:inline-flex;align-items:center;min-height:44px;color:var(--lawha-accent);font-weight:600;text-decoration:none}
.lawha-theme .entry-content .card{border-radius:var(--r-card);box-shadow:none;background:transparent}
@media (max-width:600px){
.lawha-theme .entry-shell{border:0;border-radius:var(--r-card);box-shadow:var(--sh2);overflow:hidden}
.lawha-theme .entry-content{background:var(--kgym-raised)}
}

/* ═══ 20. Empty states (wave 3): a small drawing, one sentence, at most one button ═════════════════════════════════ */
.empty-state{display:grid;justify-items:center;gap:6px;padding:22px 16px;border:1.5px dashed var(--kgym-edge);border-radius:var(--r-card);text-align:center}
.e-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--lawha-sage);color:var(--lawha-accent)}
.e-title{margin:4px 0 0;font:600 var(--t-name)/1.3 var(--lawha-font)}
.lawha-theme .empty-state .e-words{margin:0;max-width:34ch}
.lawha-theme .today-empty{padding:12px}
.lawha-theme .today-empty .empty-state{border-color:transparent}
/* History — a day: the summary card, then the exercises with their sets as small chips */
.day-summary-title{margin:0 0 2px;font:600 var(--t-card)/1.25 var(--lawha-font)}
.lawha-theme .day-summary .form-note,.lawha-theme .day-summary .plan-detail{margin:0}
.lawha-theme .tab-content .exercise-card .sets{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.lawha-theme .tab-content .exercise-card .sets li{min-height:28px;padding:3px 11px;border-radius:var(--r-pill);background:var(--kgym-sunk);font:600 var(--t-small)/1.6 var(--lawha-font)}
/* Body on the website from 1200 px (as drawn: the day and the week on the left, the map in the middle, the tapped muscle in a
   side panel on the right) — the week zone's pieces placed straight in the screen's three columns */
@media (min-width:1200px){
.lawha-theme .screen-body{grid-template-columns:280px minmax(0,1fr) 300px;grid-template-areas:none;grid-template-rows:auto auto auto auto 1fr;column-gap:22px}
.lawha-theme .screen-body>.whoop-card{grid-area:auto;grid-column:1;grid-row:1}
.lawha-theme .screen-body>.body-today{grid-area:auto;grid-column:1;grid-row:2}
.lawha-theme .screen-body>.week-card{grid-area:auto;grid-column:1;grid-row:3}
.lawha-theme .screen-body>.body-side-parts{grid-area:auto;grid-column:1;grid-row:4}
.lawha-theme .screen-body>.body-week{display:contents}
.lawha-theme .body-week>.map-card{display:block;grid-column:2;grid-row:1 / span 5;align-self:start;margin:0;padding:16px;border-radius:var(--r-card);background:var(--lawha-surface);box-shadow:var(--sh1)}
.lawha-theme .body-week>:is(.muscle-details,.muscle-empty){grid-column:3;grid-row:1 / span 5;align-self:start;position:sticky;top:100px;margin:0}
.lawha-theme .body-week>:is(.muscle-list-card,.extra-work,.weeks-full,.priority-short,.body-parts){grid-column:2;grid-row:auto;margin:12px 0 0}
.lawha-theme .body-week .body-map{grid-column:auto;grid-row:auto}
.lawha-theme .body-week .bm-figure{height:420px}
.lawha-theme .body-week .map-top{grid-column:auto;grid-row:auto}
/* the sore-joint flag (W3): "Sore or hurting?" in the right-hand panel, under the muscle's details (or the hint) */
.lawha-theme .body-week>:is(.muscle-details,.muscle-empty):has(~ .joint-panel){grid-row:1}
.lawha-theme .body-week>.joint-panel{grid-column:3;grid-row:2 / span 4;align-self:start;margin:12px 0 0}
}
.lawha-theme .body-today>h2{margin:0 0 4px;font:600 var(--t-card)/1.25 var(--lawha-font)}
/* the door's shared header and footer links keep their words and look, with a 44 px tap target (the screen standard) */
.lawha-theme .entry-header .back-link,.lawha-theme footer a,.lawha-theme footer .theme-switch{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
/* the door's poster: its drawing stays inside the screen on a phone, and its small words read clearly on sage (ink, not muted) */
@media (max-width:600px){.lawha-theme #entry-art{right:0}}
.lawha-theme .entry-poster .poster-heading,.lawha-theme .entry-poster .poster-foot p{color:var(--lawha-ink)}
/* the chosen day's panel on a narrow website (900 px): its actions go under the day's name instead of past the screen */
.lawha-theme .day-card .calendar-day-head{flex-wrap:wrap}.lawha-theme .day-card .day-titles{flex:1 1 180px;min-width:0}.lawha-theme .day-card .day-acts{flex:0 0 auto;max-width:100%}
/* History on a wide website, as drawn (proposal 4a · 3): the month on the left, every workout in the middle, the chosen day
   on the right — three columns from 1200 px; narrower websites keep two (the month and the list, the day beside them). */
@media (min-width:1200px){
.lawha-theme .history-view[data-history-view=Workouts]:not([hidden]){grid-template-columns:minmax(300px,340px) minmax(0,1fr) minmax(320px,380px);column-gap:20px}
.lawha-theme .history-view .calendar-month{grid-column:1;grid-row:1}
.lawha-theme .history-view .calendar>.planned-days{grid-column:1;grid-row:2}
.lawha-theme .history-view[data-history-view=Workouts]>section.settings-group{grid-column:2;grid-row:1 / span 4}
.lawha-theme .history-view .calendar>.calendar-day{grid-column:3;grid-row:1 / span 4}
/* the day column is narrow: "What you did" and the WHOOP table stack instead of sharing it */
.lawha-theme .history-view .day-cols,.lawha-theme .history-view .day-card .edit-groups,.lawha-theme .history-view .day-card .log-later{grid-template-columns:minmax(0,1fr)}
}
/* History's title action (as drawn): "+" beside the title on the phone, "+ Add a workout for a past day" on the website;
   the view switch then sits over the calendar on the website, as drawn, instead of in the title bar */
.title-line>.title-act{grid-area:act;display:flex;align-items:center;gap:8px}
.lawha-theme .title-line:has(>.title-act){grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"date act status" "title act status"}
.lawha-theme .title-act :is(.add-past,.add-measure){display:inline-flex;align-items:center;gap:8px;margin:0}
@media (max-width:899px){
.lawha-theme .title-act :is(.add-past,.add-measure){justify-content:center;width:44px;min-width:44px;height:44px;padding:0;border-radius:50%}
.lawha-theme .title-act .act-words{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media (min-width:900px){
.lawha-theme .title-line:has(>.title-act){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"date act" "title act"}
.lawha-theme .screen-history>.history-switch{position:static;inset:auto;justify-self:start;width:max-content;margin:0 0 16px}
}
/* the rest day's "Tomorrow" line (review L6b) */
.lawha-theme .today-tomorrow h2{margin:0 0 6px;font:600 var(--t-small)/1.3 var(--lawha-font);color:var(--lawha-muted)}
.lawha-theme .today-tomorrow .tomorrow-row{margin:0;font:600 var(--t-body)/1.4 var(--lawha-font)}
/* History's "This week" (review L6a, as drawn): the words on the left, a bar per day on the right */
.lawha-theme .history-view>section.week-strip{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.lawha-theme .week-strip h2{margin:0;font:600 var(--t-small)/1.3 var(--lawha-font);color:var(--lawha-muted)}
.lawha-theme .week-strip-words{margin:2px 0 0;font:600 var(--t-body)/1.35 var(--lawha-font)}
.week-bars{display:flex;align-items:flex-end;gap:6px}
.week-bar{display:grid;justify-items:center;gap:4px}
.week-bar svg{display:block;fill:var(--kgym-sunk)}
.week-bar.is-trained svg{fill:var(--lawha-accent)}
.week-bar-day{font-size:var(--t-small);line-height:1;color:var(--lawha-muted)}
.week-bar.is-today .week-bar-day{color:var(--lawha-ink);font-weight:700}
@media (min-width:900px){.lawha-theme .history-view[data-history-view=Workouts]>section.week-strip{grid-column:1;grid-row:3;margin:0 0 var(--kgym-s4)}}
@media (min-width:900px) and (max-width:1199px){
.lawha-theme .history-view[data-history-view=Workouts]>section.settings-group{grid-row:4}
.lawha-theme .history-view .calendar>.calendar-day{grid-row:1 / span 4}
.lawha-theme .history-view .day-cols{grid-template-columns:minmax(0,1fr)}
}
/* the website's chosen day (review L6c, as drawn): its time line and each exercise's sets as chips */
.lawha-theme .day-meta.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.lawha-theme .did-list li{grid-template-columns:minmax(0,1fr);gap:6px}
.lawha-theme .did-name{font-weight:600;color:var(--lawha-ink)}
.lawha-theme .did-sets.chips{display:flex;flex-wrap:wrap;gap:6px;text-align:start}
/* a grouped row with nothing to open (Connections: "Nothing connected.", review L6d) */
.lawha-theme .setting-row{display:flex;align-items:center;gap:12px;min-height:56px;color:var(--lawha-muted)}
/* the exercise page's tiles, as drawn: the number big, its unit and reps small beside it */
.lawha-theme .ex-tile .tile-unit{font:600 var(--t-small)/1.2 var(--lawha-font);color:var(--lawha-muted)}
/* ═══ Release C: the WHOOP today card when it is narrow (owner screenshot 2026-10-10: the website's narrow column squeezed the
   rows beside the ring) — under 480 px the ring sits above the rows, centred, and the rows take the full width; the
   calories' period is a small second line under its label; the values stay at the end of their row ═══ */
.lawha-theme .whoop-card{container-type:inline-size}
.lawha-theme .whoop-stat-sep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lawha-theme .whoop-stat-note{display:block;margin-top:1px;font:400 var(--t-small)/1.3 var(--lawha-font);color:var(--lawha-muted)}
@container (max-width:479px){
.lawha-theme .whoop-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--kgym-s3)}
.lawha-theme .whoop-grid>.whoop-ring{justify-self:center}
/* the period's line may run on under the value (the value sits on the label's line only), never wider than the card */
.lawha-theme .whoop-stat-note{width:max-content;max-width:100cqi}
}
/* Release C (wave 3 re-review M3): the past-day form, scrolled to from the title line, stops clear of the sticky title line */
.lawha-theme .log-later{scroll-margin-top:100px}
/* Release C: #49's Weigh & measure form inside the new website frame (the left menu takes 216 px): its four columns as drawn
   need about 1,110 px, so they come only where they fit; under that the help moves under the boxes (1200 px) and the
   boxes take two columns (900 px) — the browser screens found the help and the third column past the screen */
@media (min-width:900px){
.lawha-theme .measure-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
}
@media (min-width:1200px){
.lawha-theme .measure-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr)}
.lawha-theme .measure-help{grid-column:1/-1;padding:16px 0 0;border-inline-start:0;border-top:var(--lawha-rule)}
}
@media (min-width:1500px){
.lawha-theme .measure-cols{grid-template-columns:minmax(230px,1fr) minmax(250px,1fr) minmax(280px,1.15fr) 220px;gap:0 28px}
.lawha-theme .measure-help{grid-column:auto;padding:0;padding-inline-start:20px;border-top:0;border-inline-start:var(--lawha-rule)}
}
/* Release C: the website at 900-1199 px inside wave 2's frame (the left menu takes 216 px) — the Step 2 screens found three
   pieces past the screen there (on wave 3's own head too): the Settings routine bar, History's day card while editing,
   and its KGYM / WHOOP table. The bar wraps, History shares its width between the month and the chosen day, the edit rows
   wrap their buttons under the boxes, and the table keeps to its column. */
@media (min-width:900px) and (max-width:1199px){
.lawha-theme .settings-page .routine-bar{flex-wrap:wrap}
.lawha-theme .history-view[data-history-view=Workouts]:not([hidden]){grid-template-columns:minmax(330px,1fr) minmax(250px,1fr)}
.lawha-theme .history-view .day-card .edit-groups .edit-boxes{flex-wrap:wrap}
.lawha-theme .history-view .day-card .compare-table{table-layout:fixed;overflow-wrap:anywhere}
.lawha-theme .history-view .day-card .btn{max-width:100%;white-space:normal}
}

/* ═══ Two accounts (proposal 2026-10-10, Lane 2) ═════════════════════════════════════════════════════════════════════
   The name on the date line ("Sunday 11 October · drs97"): a small round initial and the name, in the date's own size;
   shown for her always and for the owner only on a shared phone (src/client/account.ts). Tokens only. */
.title-who{display:inline-flex;align-items:center;gap:6px;margin-inline-start:6px;vertical-align:middle;white-space:nowrap}
.who-only .title-who{margin-inline-start:0}
.who-av{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--lawha-sage);color:var(--lawha-ink);font:700 11px/1 var(--lawha-font)}
.who-name{font-weight:600;color:var(--lawha-ink)}
/* Settings: "Who is signed in" — first on the phone's main page and on the website's list: the initial, the name and the
   account's kind, what waits on this phone, then Switch person · Sign out · Sign out and clear this phone (careful). */
.lawha-theme .acct-box{display:grid;gap:10px;padding:14px;border-radius:var(--r-card);background:var(--lawha-surface);box-shadow:var(--sh1)}
.acct{display:flex;align-items:center;gap:12px;min-width:0}
.acct-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lawha-sage);color:var(--lawha-ink);font:700 18px/1 var(--lawha-font)}
.acct-words{display:grid;gap:2px;min-width:0}
.acct-name{font-size:var(--t-name);overflow-wrap:anywhere}
.acct-role{font-size:var(--t-small);color:var(--lawha-muted)}
.lawha-theme .account-card .settings-note{margin:0}
.acct-actions{display:grid;gap:8px}
.lawha-theme .acct-actions .btn{width:100%;max-width:360px;white-space:normal}
.lawha-theme .account-note:empty{display:none}
/* the setup page's choice: Reset a password · Add a new person · Remove this person (wraps on a narrow phone) */
.lawha-theme .setup-choice{display:flex;flex-wrap:wrap;margin:0 0 14px;border-radius:24px}
/* the website: who is signed in, under the KGYM name in the side menu; a tap opens Switch person · Sign out */
.rail-who{display:none}
@media (min-width:900px){
.rail-who{display:grid;gap:8px}
.who-button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-pill);background:var(--lawha-paper);color:var(--lawha-ink);font:600 var(--t-body)/1.2 var(--lawha-font);text-align:start;cursor:pointer}
.who-button-name{overflow-wrap:anywhere}
.who-menu:not([hidden]){display:grid;gap:8px;padding:12px;border-radius:16px;background:var(--kgym-raised);box-shadow:var(--sh2)}
.who-menu-h{margin:0;font-size:var(--t-small);color:var(--lawha-muted)}
.who-menu-n{margin:0;font-weight:700;overflow-wrap:anywhere}
.who-note{margin:0;font-size:var(--t-small);color:var(--lawha-ink)}
.who-note:empty{display:none}
}
/* Settings › Look for her account: light or dark (this phone), then the palette (her account): four choices, each with its
   own swatch (themes.css gives the swatch colours), and the plain line that the body map never changes colour. */
.lawha-theme .look-box{display:grid;gap:8px}
.lawha-theme .look-label{margin:4px 0 0;font:600 var(--t-small)/1.3 var(--lawha-font);color:var(--lawha-muted)}
.lawha-theme .palette-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lawha-theme .palette-choice button{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1.5px solid var(--kgym-edge);border-radius:var(--r-input);background:transparent;color:var(--lawha-ink);font:600 var(--t-body)/1.2 var(--lawha-font);text-align:start;cursor:pointer}
.lawha-theme .palette-choice button[aria-pressed=true]{border-color:var(--lawha-accent);background:var(--lawha-sage);box-shadow:inset 0 0 0 1px var(--lawha-accent)}
.pal-dot{flex:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--pal-p) 50%,var(--pal-a) 50%);box-shadow:inset 0 0 0 1.5px var(--pal-a)}
.lawha-theme .look-map-note{margin:0}
@media (min-width:900px){.lawha-theme .palette-choice{grid-template-columns:minmax(0,1fr)}}
/* Workout times (owner request 2026-10-12, approved proposal "a"): the row's time line in ink, the best lift / how it
   ended small under it; the workout page's start – end big with its length beside it; Edit times (two time boxes). */
.lawha-theme .history-row .row-meta{color:var(--lawha-ink);font-weight:600}
.lawha-theme .history-row .row-extra{font-size:var(--t-small);color:var(--lawha-muted);overflow-wrap:anywhere}
.lawha-theme .history-row[aria-current=true] .row-extra{color:var(--lawha-ink)}
.lawha-theme .day-summary .day-times{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:6px 0 2px}
.lawha-theme .day-summary .day-times b{font:400 30px/1.1 var(--lawha-display);white-space:nowrap}
.lawha-theme .day-summary .day-times span{font-size:var(--t-small);color:var(--lawha-muted)}
.lawha-theme .edit-times{display:grid;gap:10px;margin-block-start:4px;padding-block-start:12px;border-block-start:1px solid var(--lawha-line)}
.lawha-theme .edit-times-boxes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.lawha-theme .edit-times-boxes label{display:grid;gap:4px;font:600 var(--t-small)/1.3 var(--lawha-font);color:var(--lawha-muted)}
.lawha-theme .edit-times-boxes input{min-height:48px;width:100%;min-width:0;box-sizing:border-box;font-size:var(--t-input);color:var(--lawha-ink)}
.lawha-theme .edit-times .form-note{margin:0}
.lawha-theme .edit-times-open svg{flex:none}
@media (min-width:900px){.lawha-theme .edit-times{max-width:560px;margin-block-end:12px}.lawha-theme .edit-times-boxes{grid-template-columns:repeat(2,minmax(0,180px))}}
/* Workout times on Today (2026-10-12, approved proposal D1 / D2): "Started 18:42" after the clock on the phone; the
   finished line at the top of Today until midnight. */
.lawha-theme .session-clock-line{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;min-width:0}
.lawha-theme .session-started{font:700 var(--t-small)/1.2 var(--lawha-font);color:var(--lawha-accent);white-space:nowrap}
.lawha-theme .session-started::before{content:'·';margin-inline-end:6px;color:var(--lawha-muted);font-weight:400}
.lawha-theme .finished-line{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--kgym-done)}
.lawha-theme .finished-mark{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lawha-accent);color:var(--lawha-paper)}
.lawha-theme .finished-words{margin:0;min-width:0}
.lawha-theme .finished-title{display:block;font:600 var(--t-body)/1.3 var(--lawha-font)}
.lawha-theme .finished-times{font:700 var(--t-body)/1.3 var(--lawha-font)}
.lawha-theme .finished-sets{font-size:var(--t-small);color:var(--lawha-ink)}

/* ═══ 15. Stretches with videos and doses (owner-approved proposal 12 Oct 2026, "aaa") ═══════════════════════════
   A moves step: where it sits, the title and its minutes, one why line, each move with its dose in big words and ▶ Video
   (the exercise button); the warm-up ticks and one countdown; the end stretches' hold timer in a ring. */
.moves-card{display:grid;gap:10px;border:0;border-radius:var(--r-card,20px);background:var(--lawha-surface);box-shadow:var(--sh1,none)}
.moves-card .step-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.moves-card .step-kick{margin:0;font:600 13px/1.3 var(--lawha-font);color:var(--lawha-muted)}
.lawha-theme .moves-card .step-title,.screen-today .moves-card .step-title{margin:2px 0 0;font:600 22px/1.25 var(--lawha-font)}
.moves-card .step-chip{flex:none;display:inline-flex;align-items:center;min-height:28px;padding:3px 11px;border-radius:999px;background:var(--kgym-sunk,var(--lawha-paper));font:600 13px/1.2 var(--lawha-font);color:var(--lawha-ink);white-space:nowrap}
.step-why{margin:0;padding:9px 12px;border-radius:14px;background:var(--kgym-insight,var(--lawha-sage));font-size:13px;line-height:1.4;color:var(--lawha-ink)}
.step-why b{color:var(--lawha-accent)}
.moves-card .step-big{display:flex;align-items:baseline;gap:8px;margin:0}
.moves-card .step-big .step-left{display:inline;font:600 40px/1 var(--lawha-font);font-variant-numeric:tabular-nums}
.step-of{color:var(--lawha-muted);font-size:14px}
.move-list{list-style:none;margin:0;padding:0;display:grid}
.move-row{display:flex;align-items:center;gap:10px;min-height:66px;padding:6px 0;border-bottom:var(--lawha-rule)}
.move-row:last-child{border-bottom:0}
.move-row.is-now{margin:0 -10px;padding:6px 10px;border-radius:14px;border-bottom-color:transparent;background:color-mix(in srgb,var(--lawha-accent) 14%,var(--lawha-surface))}
.move-tick{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0 -7px;padding:0;border:0;background:transparent;cursor:pointer}
span.move-tick{cursor:default}
.tick-dot{display:grid;place-items:center;box-sizing:border-box;width:30px;height:30px;border:1.5px solid var(--kgym-edge,var(--lawha-muted));border-radius:50%;font:700 15px/1 var(--lawha-font)}
.move-row.is-done .tick-dot{background:var(--lawha-accent);border-color:var(--lawha-accent);color:var(--lawha-surface)}
.move-words{flex:1;min-width:0;display:grid;gap:1px;text-align:start}
button.move-words{min-height:44px;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.move-name{font:600 15px/1.25 var(--lawha-font);color:var(--lawha-ink)}
.move-row.is-done .move-name{color:var(--lawha-muted);text-decoration:line-through;text-decoration-thickness:1px}
.move-now{display:inline-block;margin-inline-start:6px;padding:1px 6px;border-radius:6px;background:var(--lawha-accent);color:var(--lawha-surface);font:700 11px/1.4 var(--lawha-font);vertical-align:1px}
.move-dose{font:700 14px/1.3 var(--lawha-font);color:var(--lawha-accent)}
.move-parts{font-size:12.5px;color:var(--lawha-muted)}
.move-row .icon-action{flex:none}
.moves-card .step-actions{display:flex;gap:8px}
.moves-card .step-actions>.btn,.moves-card .step-actions>span>.btn{flex:1;min-height:48px;max-width:none}
.moves-card .step-actions>span{display:flex;flex:1}
.hold-face{position:relative;justify-self:center;width:160px;height:160px}
.hold-ring{width:160px;height:160px;transform:rotate(-90deg)}
.hold-ring-track{fill:none;stroke:var(--kgym-sunk,var(--lawha-paper));stroke-width:12}
.hold-ring-fill{fill:none;stroke:var(--lawha-accent);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .9s linear}
.hold-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.hold-time{font:600 44px/1 var(--lawha-font);font-variant-numeric:tabular-nums;color:var(--lawha-ink)}
.hold-what{margin-top:4px;font-size:13px;color:var(--lawha-muted)}
.hold-title{display:grid;justify-items:center;gap:2px;margin:0;text-align:center}
.hold-name{font:600 19px/1.25 var(--lawha-font)}
.hold-dose{font:700 14px/1.3 var(--lawha-font);color:var(--lawha-accent)}
.hold-sides{display:flex;justify-content:center;gap:18px;margin:0;font-size:13px;color:var(--lawha-muted)}
.hold-side{display:inline-flex;align-items:center;gap:5px}
.hold-pip{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--kgym-edge,var(--lawha-muted))}
.hold-pip.is-done{background:var(--lawha-accent);border-color:var(--lawha-accent)}
.hold-pip.is-now{background:var(--kgym-low-bar,var(--lawha-accent));border-color:var(--kgym-low-bar,var(--lawha-accent))}
.hold-tone{margin:0;text-align:center;font-size:13px}
.hold-cue{margin:0;min-height:1.35em;text-align:center;font:600 14px/1.35 var(--lawha-font);color:var(--lawha-ink)}
.hold-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.moves-card .step-head:has(.hold-head)>div{flex:1}
.moves-card .phone-only .move-list{padding-top:4px;border-top:var(--lawha-rule)}
.side-stretches .move-list{margin-top:4px}
.side-why .form-note{margin:4px 0 0}
@media (min-width:900px){
  .moves-card{padding:18px 22px}
  .moves-card .move-row{min-height:74px}
  .moves-card .move-name{font-size:16px}
  .moves-card .hold-face,.moves-card .hold-ring{width:210px;height:210px}
  .moves-card .hold-name{font-size:22px}
  .moves-card .step-actions{max-width:520px;width:100%;justify-self:center}
}
/* the website: while the end stretches run, their card is the middle's card (as the warm-up's is) */
@media (min-width:900px){
  .screen-today:has(.routine-end .moves-card:is(.is-running,.is-paused)) .exercise-card{display:none}
  .screen-today:has(.routine-end .moves-card:is(.is-running,.is-paused)) .routine-end{display:grid!important}
}

/* ═══ Ten enhancements — the set card (owner-approved picture proposal 16 Oct 2026; items 1, 2, 5, 6, 7) ═══════════════
   1 "Screen stays on" in the workout header and the finished rest's soft-tone line · 2 the set check under the rows · 5 the
   warm-up worked out · 6 "New best" (the pop-up's medal, the card's quiet line) · 7 the plates under the weight box. */
.session-marks{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.lawha-theme .session-strip .session-marks{order:3;flex-basis:100%}
@media (min-width:900px){.lawha-theme .session-strip .session-marks{order:1;flex-basis:auto}}
.awake-mark{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:var(--r-pill,999px);background:var(--kgym-sunk);color:var(--lawha-muted);font-size:var(--t-small,13px);font-weight:600}
.awake-mark .ui-glyph{flex:none}
.rest-say{min-width:0;display:grid;gap:2px}
.rest-tone{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:12.5px;font-weight:600;color:color-mix(in srgb,var(--lawha-surface) 82%,transparent)}
.lawha-theme .rest-bar.is-done{flex-wrap:wrap;border-radius:var(--r-card,20px);padding:12px;box-shadow:var(--sh2),0 0 0 2px var(--kgym-met)}
.lawha-theme .rest-bar.is-done .rest-line{flex-basis:100%}
.lawha-theme .rest-bar.is-done .rest-actions{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.lawha-theme .rest-bar.is-done .rest-words{font-size:var(--t-body)}
@media (max-width:374px){.lawha-theme .rest-bar.is-done .rest-words{display:block}}
/* the card's aids: the warm-up and (website) the plates side by side above the rows; the phone puts the plates under them */
.card-aids{display:grid;gap:10px;margin-top:10px}
.warmup-box,.plate-box{margin:0;padding:10px 12px;border-radius:var(--r-input,14px);background:var(--kgym-sunk);color:var(--lawha-ink)}
.plate-box[hidden]{display:none}
.exercise-card>.plate-box{margin-top:10px}
.aid-title{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-weight:700;font-size:var(--t-body,15px)}
.aid-title .ui-glyph{flex:none;color:var(--kgym-met)}
.aid-note{margin:4px 0 0;font-size:var(--t-small,13px);color:var(--lawha-muted)}
.warmup-sets{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.warmup-sets li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-variant-numeric:tabular-nums}
.warmup-sets b{font-size:var(--t-name,17px)}
.warmup-side{font-size:var(--t-small,13px);color:var(--lawha-muted);white-space:nowrap}
.plate-words b{font-variant-numeric:tabular-nums}
.plate-art{display:block;margin:2px 0}
.plate-bar{fill:var(--lawha-muted)}
.plate-collar{fill:var(--lawha-ink)}
.plate-big{fill:var(--kgym-met)}
.plate-mid{fill:var(--kgym-low-bar)}
.plate-small{fill:var(--lawha-muted)}
[dir="rtl"] .plate-art{transform:scaleX(-1)}
@media (min-width:900px){
  .card-aids:has(>.plate-box:not([hidden])):has(>.warmup-box){grid-template-columns:1fr 1fr}
}
/* 2 · the set check: an amber box under the rows; the box it asks about outlined amber */
.lawha-theme .set-table .set-box.is-checking{border-color:var(--kgym-low-bar);background:color-mix(in srgb,var(--kgym-warn) 40%,var(--kgym-raised))}
.set-check{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;margin-top:10px;padding:12px;border:1.5px solid var(--kgym-low-bar);border-radius:var(--r-input,14px);background:color-mix(in srgb,var(--kgym-warn) 28%,var(--kgym-raised));color:var(--lawha-ink)}
.set-check-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--kgym-raised);color:var(--lawha-ink)}
.set-check-words{min-width:0}
.set-check-line,.set-check-why{margin:0;line-height:1.4}
.set-check-line b{font-weight:700}
.set-check-why{margin-top:2px;font-size:var(--t-small,13px)}
.set-check-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.set-check-actions .btn{min-height:44px;margin:0}
/* 6 · New best: the card's quiet line and the pop-up's medal */
.best-line{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:var(--t-small,13px);font-weight:600;color:var(--lawha-ink)}
.best-line .ui-glyph{flex:none;color:var(--kgym-low-bar)}
.toast-medal{color:var(--kgym-warn)}
/* a new best's pop-up keeps its whole sentence: it wraps to a second line (as drawn) instead of being cut */
.toast:has(.toast-medal){width:max-content;max-width:min(360px,calc(100% - 32px));border-radius:22px;padding-block:6px}
.toast:has(.toast-medal) .toast-words{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
/* 1 · 7 · Settings: the two switches under the rest (each its own row) and the bar weight's note */
.aid-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:4px 0;border-top:1px solid var(--lawha-line)}
.aid-row-words{display:inline-flex;align-items:center;gap:8px;min-width:0;font-weight:600;color:var(--lawha-ink)}
.aid-row-words .ui-glyph{flex:none;color:var(--lawha-muted)}
.aid-switch{flex:none;position:relative;width:56px;height:44px;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.aid-switch::before{content:"";position:absolute;inset:7px 0;border-radius:999px;background:var(--kgym-sunk);box-shadow:inset 0 0 0 1.5px var(--kgym-edge)}
.aid-switch[aria-checked="true"]::before{background:var(--kgym-met);box-shadow:none}
.aid-knob{position:absolute;top:11px;inset-inline-start:4px;width:22px;height:22px;border-radius:50%;background:var(--kgym-raised);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:inset-inline-start var(--lawha-duration,150ms) var(--lawha-ease,ease)}
.aid-switch[aria-checked="true"] .aid-knob{inset-inline-start:30px;background:var(--lawha-surface)}
.aid-switch:focus-visible{outline:3px solid var(--lawha-focus);outline-offset:2px;border-radius:999px}
.bar-setting .settings-note{margin:2px 0 0}
/* the website's Routine page lays its fields out in a grid by order: the switches come right after Rest between sets, full width */
.settings-page[data-group=Routine] .aid-row{order:5;grid-column:1/-1;max-width:680px}
/* 1 · 7 · a setting drawn as one line (pictures 1B, 7B, W2): its words (a note under them), its value and a chevron at the end;
   a tap opens its choices right under it */
.aid-kicker{margin:0 0 2px;font-size:var(--t-small,13px);font-weight:600;color:var(--lawha-muted)}
.value-line{display:grid}
.vl-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:0;padding:4px 0;border:0;background:transparent;color:var(--lawha-ink);text-align:start;font:inherit;cursor:pointer}
.vl-words{flex:1;min-width:0;display:grid;gap:2px}
.vl-label{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.vl-label .ui-glyph{flex:none;color:var(--lawha-muted)}
.vl-note{font-size:var(--t-small,13px);color:var(--lawha-muted)}
.vl-value{flex:none;font-size:var(--t-small,13px);color:var(--lawha-muted)}
.vl-row>.ui-glyph{flex:none;color:var(--lawha-muted)}
[dir="rtl"] .vl-row>.ui-glyph{transform:scaleX(-1)}
.vl-row[aria-expanded="true"]>.ui-glyph{transform:rotate(90deg)}
.vl-choices{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 10px}
.vl-choices[hidden]{display:none}
.vl-choice{min-width:64px;min-height:44px;padding:0 14px;border:1.5px solid var(--kgym-edge);border-radius:var(--r-pill,999px);background:var(--kgym-raised);color:var(--lawha-ink);font:600 var(--t-body,15px)/1 var(--lawha-font);cursor:pointer}
.vl-choice[aria-checked="true"]{border-color:var(--kgym-met);background:var(--kgym-met);color:var(--lawha-surface)}
.rest-setting>.value-line,.bar-setting>.value-line{border-bottom:1px solid var(--lawha-line)}
/* the website (picture W2): Routine and Training as one page of three columns — the groups, Routine, Training */
@media (min-width:900px){
  .tab-content:has(>.settings-page.is-paired:not([hidden])){grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(0,1fr)}
  .tab-content>.settings-page.is-paired[data-group=Routine]{grid-column:2}
  .tab-content>.settings-page.is-paired[data-group=Training]{grid-column:3}
  .settings-page.is-paired[data-group=Routine]:not([hidden]){grid-template-columns:minmax(0,1fr)}
  .settings-page.is-paired[data-group=Routine]>.settings-back{display:none}
  .settings-page.is-paired[data-group=Routine] .door-field{max-width:none}
  .settings-page.is-paired[data-group=Routine] .aid-kicker{order:-5}
  .settings-page.is-paired[data-group=Routine] .value-line[data-setting=restSeconds]{order:-4;grid-column:1/-1}
  .settings-page.is-paired[data-group=Routine] .aid-row{order:-3}
  .settings-page.is-paired[data-group=Routine] .rest-honesty{order:-2;max-width:none;margin:0 0 6px}
  .settings-page.is-paired[data-group=Training]:not([hidden]){display:flex;flex-direction:column;gap:6px}
  .settings-page.is-paired[data-group=Training]>.settings-back{order:-3}
  .settings-page.is-paired[data-group=Training]>.settings-back .bb-title,.settings-page.is-paired[data-group=Training]>.settings-back h2{margin:0;font:600 var(--t-small,13px)/1.3 var(--lawha-font);color:var(--lawha-muted)}
  .settings-page.is-paired[data-group=Training]>.bar-setting{order:-2}
  .settings-page.is-paired[data-group=Training]>.training-parts{order:-1}
}
.set-table .best-line{margin:2px 0 0}
.settings-kicker{display:block;margin:0 0 2px;font:400 var(--t-small,13px)/1.3 var(--lawha-font);color:var(--lawha-muted)}
.settings-kicker[hidden]{display:none}