/* KGYM's own rules, on top of the Lawha foundation (lawha.css) and the shared door look (door.css). Visual only. */
.door-form{display:grid;gap:14px;margin:0}
.door-field{display:grid;gap:6px;font-size:13px;color:var(--lawha-muted)}
.door-field :is(input,select){min-height:48px;padding:12px 14px;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-paper);color:var(--lawha-ink);font-size:16px}
.door-error{margin:0 0 14px;font-size:13px;font-weight:600;color:var(--lawha-ink)}
/* B11 follow-up (phone test 2026-10-05): while a message shows, a phone tightens the space above the heading, so the
   whole Sign in button stays on a 375x812 screen; the door without a message is unchanged. */
@media(max-width:600px){.entry-body:has(.door-error:not([hidden])){padding-top:0}.entry-body:has(.door-error:not([hidden])) h2{margin:8px 0 12px}}
.recovery-help a{color:var(--lawha-ink)}
.password-rule{margin:0}
/* Addendum 2 §1.1–1.3 (F2, frozen): two new tints, the iPhone font fallback, equal-width Western digits, the type scale
   and the spacing steps. Lawha's own values are unchanged (lawha.css is a verbatim shared copy). */
.lawha-theme{--kgym-done:#e2e9d9;--kgym-help:#a7c2ae;--kgym-t-page:30px;--kgym-t-card:20px;--kgym-t-big:28px;--kgym-t-label:15px;--kgym-t-body:15px;--kgym-t-input:16px;--kgym-t-small:13px;--kgym-s1:4px;--kgym-s2:8px;--kgym-s3:12px;--kgym-s4:16px;--kgym-s5:24px;--kgym-s6:32px;--kgym-gutter:14px;--kgym-pad:14px;font-family:'Segoe UI', system-ui, -apple-system, Arial, sans-serif;font-variant-numeric:tabular-nums;line-height:1.5}
/* PROVISIONAL (F2): #3e6650 measured 2.56; awaiting re-review */
[data-theme='dark'] .lawha-theme{--kgym-done:#263a2e;--kgym-help:#355744}
/* New interface (owner-approved proposal 2026-10-10): KGYM's own helper colours beside Lawha's (lawha.css is a shared copy,
   never edited). Wave 1 needs only "sunk" (the tint behind round buttons and inputs); wave 2 adds the rest. */
.lawha-theme{--kgym-sunk:#eeede5}
[data-theme='dark'] .lawha-theme{--kgym-sunk:#141c18}
@media (max-width:420px){.lawha-theme{--kgym-gutter:10px;--kgym-pad:12px}}
@media (min-width:900px){.lawha-theme{--kgym-t-page:36px}}
/* B1 (phone test 2026-10-05): nothing on any screen can make the page wider than the phone, so the fixed tab bar always
   fits it (clip keeps the page's own scrolling; hidden is the fallback where clip is unknown). */
#app{overflow-x:hidden;overflow-x:clip}
/* The app after sign-in: phone first, the tab bar at the bottom within thumb reach. */
/* Design fix (owner ruling 2026-10-09: match the 2026-10-05 proposal): no "KGYM" brand bar — the page starts with the date
   and the title, as the mockup draws it; the sync status stays at the end of the title line (Addendum 2 §1.4). */
/* New interface wave 1 (audit B4, owner-approved 2026-10-10): the status is quiet until it needs him — no box, a small
   green dot + "Saved"; while something waits, an amber pill "2 waiting — tap". Still a 44 px button (the sheet opens). */
.sync-status{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;min-width:44px;padding:0 8px;border:0;border-radius:999px;background:transparent;color:var(--lawha-muted);font:600 13px/1.2 var(--lawha-font);cursor:pointer}
.sync-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--kgym-met)}
.sync-status.needs-attention{padding:0 14px;background:color-mix(in srgb,var(--kgym-low) 22%,var(--lawha-surface));color:var(--lawha-ink)}
.sync-status.needs-attention .sync-dot{background:var(--kgym-low)}
.storage-warning{margin:12px 22px 0;padding:12px 16px;border:1px solid var(--lawha-ink);border-radius:var(--lawha-radius);background:var(--lawha-paper);color:var(--lawha-ink);font-size:13px;font-weight:600}
/* One line about the safety copies on the PC (src/client/pc-status.ts): red on a problem, a quiet green when all is well. */
.pc-status{margin:0 0 12px;font-size:13px;line-height:1.5}
.pc-status-alert{padding:10px 14px;border:1px solid var(--kgym-min);border-radius:var(--lawha-radius);color:var(--kgym-min);font-weight:600}
/* Wave 1 (audit W1): the plain headline, then the PC's own words folded under Details. */
.pc-status-alert p{margin:0}
.pc-status-details summary{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding-inline-end:6px;cursor:pointer;font-weight:600}
.pc-status-details p{font-weight:400;color:var(--lawha-ink);overflow-wrap:anywhere}
.pc-status-ok{color:var(--kgym-met)}
.pc-status-wait{color:var(--kgym-low);font-weight:600}
.sheet{margin:12px 22px 0;padding:16px;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.sheet h2,.settings-group h2{margin:0 0 8px;font:var(--kgym-t-card)/1.2 var(--lawha-display)}
.sheet p,.form-note{font-size:13px;line-height:1.6;color:var(--lawha-muted)}
.issue-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.issue-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13px}
.issue-list li span{flex-basis:100%}
.link-button{min-height:44px;min-width:44px;padding:0 4px;border:0;background:transparent;color:var(--lawha-ink);text-decoration:underline;cursor:pointer}
/* B8 (phone test 2026-10-05): a locked (disabled) button looks locked and never lights up under the finger. */
.lawha-theme button:disabled{opacity:.45;cursor:not-allowed}
.lawha-theme .shared-action:disabled:hover{background:var(--lawha-ink)}
.open-workouts{margin:12px 22px 0}
.workout-card{margin-top:12px;padding:16px;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-sage)}
.workout-card p{margin:0 0 4px;font-size:14px}
/* Task 20 browser check: the shell's "End this workout" card sits outside .tab-content, so it gets the standard here. */
.open-workouts .shared-action{max-width:360px;min-height:44px}
/* New interface wave 1 (audit N6, owner-approved 2026-10-10): an open workout is a slim ink pill on every tab but Today —
   on the phone it floats just above the tab bar, at most 360 px; on the website it sits at the top of the page. */
.open-workouts:empty{display:none}
.workout-pill{position:fixed;inset-inline:0;bottom:calc(68px + env(safe-area-inset-bottom));z-index:6;display:flex;align-items:center;gap:10px;box-sizing:border-box;width:calc(100% - 48px);max-width:360px;min-height:48px;margin-inline:auto;padding:0 6px 0 16px;border:0;border-radius:999px;background:var(--lawha-ink);color:var(--lawha-surface);font:400 13px/1.2 var(--lawha-font);text-align:start;box-shadow:0 10px 30px -10px rgba(0,0,0,.45);cursor:pointer}
.wp-live{flex:none;width:10px;height:10px;border-radius:50%;background:var(--kgym-met);box-shadow:0 0 0 3px color-mix(in srgb,var(--kgym-met) 35%,transparent)}
.wp-words{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-open{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:color-mix(in srgb,var(--lawha-surface) 16%,transparent);font-weight:600}
#app:has(.workout-pill) .tab-content{padding-bottom:144px}
.tab-content{flex:1;padding-block:20px 96px;padding-inline:var(--kgym-gutter)}
.tab-content h1{margin:0 0 16px;font:var(--kgym-t-page)/1.12 var(--lawha-display)}
/* Addendum 2 §1.4: the page title line — the screen's title, the sync status kept at its end. */
.title-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"date status" "title status";column-gap:var(--kgym-s3);align-items:center;margin-block-end:16px}
.title-line h1{grid-area:title;min-width:0;margin:0}
/* The design fix: the date sits ABOVE the title, small and muted, as the mockup draws it (Addendum 2 §2.1 item 1). */
.title-line .page-date{grid-area:date;margin:0;font-size:var(--kgym-t-small);color:var(--lawha-muted)}
/* The light / dark button and the sync status share one box at the line's end (owner, 2026-10-09: "dark mode need to
   be in first page"); on the phone the button shows on Body only. */
.title-line .title-tools{grid-area:status;display:flex;align-items:center;gap:var(--kgym-s2)}
.title-line:not([data-tab=body]) .theme-toggle{display:none}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-width:44px;padding:0;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface);color:var(--lawha-ink);cursor:pointer}
.theme-toggle svg{width:20px;height:20px}
.settings-group{margin:0 0 28px;padding-top:18px;border-top:var(--lawha-rule);display:grid;gap:12px}
/* N3 (phone re-test 2026-10-05): every Settings field fits a 320 px screen — the export file box (324 px) and the
   time-zone list (300 px) are wider on their own, and the page clips what sticks out (B1). */
.settings-group>*{min-width:0}
.settings-group :is(input,select){max-width:100%;min-width:0;font-size:16px}
.tab-bar{position:fixed;inset-inline:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--lawha-rule);background:var(--lawha-surface);padding-bottom:env(safe-area-inset-bottom)}
.tab-bar button{min-height:56px;display:grid;justify-items:center;align-content:center;gap:var(--kgym-s1);border:0;background:transparent;color:var(--lawha-muted);font-size:var(--kgym-t-small);cursor:pointer}
/* Addendum 2 §1.4: KGYM's own 24-px line icon over each 13-px label. */
.tab-bar svg{width:24px;height:24px}
.tab-bar button[aria-current=page]{color:var(--lawha-ink);font-weight:700}
/* Today: the plan, the exercise cards, one-tap set rows. */
.plan-list{list-style:none;margin:16px 0;padding:0;display:grid;gap:10px}
.plan-list li{display:grid;grid-template-columns:64px 1fr;gap:2px 12px;align-items:center}
/* Today before Start (design fix 2026-10-09): one card — title, minutes, the plan rows with thin rules, Start + Why. */
.today-card{margin:0 0 var(--kgym-s3);padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.today-card h2{margin:0 0 var(--kgym-s1);font:var(--kgym-t-card)/1.2 var(--lawha-display)}
.today-card .plan-length{margin:0;font-size:14px;color:var(--lawha-muted)}
.today-card .plan-list{gap:0;margin:var(--kgym-s2) 0 0}
.today-card .plan-list li{padding:var(--kgym-s2) 0;border-top:var(--lawha-rule)}
.today-card .plan-list li:first-child{border-top:0}
.plan-list .exercise-picture{grid-row:span 2;width:64px;height:48px}
.plan-name{font-weight:600}
.plan-detail{font-size:13px;color:var(--lawha-muted);margin:0}
.exercise-picture{display:block;width:100%;max-height:180px;object-fit:cover;border-radius:var(--lawha-radius);background:var(--lawha-sage)}
/* New interface wave 1 (audit: "light sage photo tiles glare in dark mode"): at night the pictures are tinted down — the
   light placeholder drawing turns to its dark-sage twin, a photo is dimmed a little. Light mode is unchanged. */
[data-theme='dark'] .lawha-theme img[src$="placeholder.svg"]{filter:invert(.88) hue-rotate(180deg)}
[data-theme='dark'] .lawha-theme img.exercise-picture:not([src$="placeholder.svg"]){filter:brightness(.82)}
.exercise-card{margin:var(--kgym-s3) 0 0;padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.exercise-card h2{margin:12px 0 4px;font:var(--kgym-t-card)/1.2 var(--lawha-display)}
/* The picture buttons (owner-approved proposal 2026-10-09, "a a a"; views/actions.ts): a 44 x 44 box with KGYM's own
   drawing and ONE word under it; solid while the fold it opens is open; dashed with no signal; the full words in a bubble
   on hover (website), keyboard focus, and a long-press (phone). Tokens only, so light and dark both work. */
.icon-row{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:12px;padding-top:10px;border-top:var(--lawha-rule)}
.icon-action{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:56px;min-height:44px;padding:0;border:0;background:none;color:var(--lawha-ink);font:500 13px/1.2 var(--lawha-font);text-decoration:none;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.icon-action .icon-box{position:relative;display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface);color:var(--lawha-ink)}
.icon-action .action-glyph{width:22px;height:22px}
.icon-action .badge{position:absolute;top:2px;inset-inline-end:2px;width:11px;height:11px;color:var(--lawha-muted)}
.icon-action .icon-caption{color:var(--lawha-muted);font:500 13px/1.2 var(--lawha-font)}
.icon-action.act-play .icon-box{border-color:var(--lawha-ink)}
.icon-action[aria-expanded="true"] .icon-box,.icon-action.is-filled .icon-box{background:var(--lawha-ink);color:var(--lawha-surface);border-color:var(--lawha-ink)}
.icon-action[aria-expanded="true"] .icon-caption{color:var(--lawha-ink);font-weight:700}
.icon-action:disabled{cursor:default}
.icon-action.is-off .icon-box{border:1px dashed var(--lawha-muted);color:var(--lawha-muted)}
.icon-action.no-caption .icon-caption{display:none}
.icon-action::before,.icon-action::after{display:none;position:absolute;left:50%;z-index:6;pointer-events:none}
.icon-action::after{content:attr(data-tip);bottom:calc(100% + 9px);transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:min(260px,70vw);padding:7px 11px;border-radius:7px;background:var(--lawha-ink);color:var(--lawha-surface);font:600 13px/1.3 var(--lawha-font);text-align:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.45)}
.icon-action::before{content:"";bottom:calc(100% - 3px);margin-inline-start:-6px;border:6px solid transparent;border-top-color:var(--lawha-ink)}
.icon-row>.icon-action:first-child::after{left:auto;transform:none;inset-inline-start:0}
.icon-row>.icon-action:last-child:not(:first-child)::after{left:auto;transform:none;inset-inline-end:0}
.icon-action:focus-visible::after,.icon-action:focus-visible::before,.icon-action.tip-open::after,.icon-action.tip-open::before{display:block}
@media(hover:hover){.icon-action:hover::after,.icon-action:hover::before{display:block}}
/* Steps (proposal 2A) and Why (1c) fold open INSIDE their card, under their buttons. */
.steps-fold,.why{margin:10px 0 0;padding:12px 14px;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-paper);color:var(--lawha-ink);font-size:14px}
.steps-fold h3{margin:0 0 6px;font-size:15px;font-weight:700}
.steps-fold ol{margin:0;padding-inline-start:22px;font-size:14.5px;line-height:1.45}
.steps-fold li{margin:2px 0}
.why p{margin:4px 0}
.why[hidden],.steps-fold[hidden]{display:none}
/* The open card's picture opens the exercise page (1b: "a tap on the name or picture"). */
.picture-open{flex:none;display:block;width:52px;height:52px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:var(--lawha-radius);background:none;cursor:pointer}
.swap-actions{display:flex;gap:16px}
.swap-list{list-style:none;margin:0;padding:0}
.sets{list-style:none;margin:8px 0 0;padding:0}
.set-done{display:flex;align-items:center;justify-content:space-between;font-size:14px}
.set-label{margin:12px 0 0;font-size:13px;color:var(--lawha-muted)}
/* Addendum 2 §2.2 (Task 17): Today's open workout — the sticky header (m:ss clock · Finish), the one status line, the
   open card's head (52-px picture · name · Main/Also · Like), the kg · lb switch, and the folded one-line cards. */
.session-head{position:sticky;top:0;z-index:4;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kgym-s1) var(--kgym-s3);padding-block:var(--kgym-s1) var(--kgym-s2);border-bottom:var(--lawha-rule);background:var(--lawha-paper)}
.session-head .session-clock{margin:0;font-variant-numeric:tabular-nums}
.session-head .whoop-chip{order:3;flex-basis:100%;margin:0}
/* The design fix (2026-10-09, the mockup's workout header): the time as the big number (28 px Georgia, Addendum 2 type
   scale), "of 50 min" small and muted beside it; near the cap the small words turn ink and bold (CAP_WARNING_MIN). */
.session-clock .clock-time{font:var(--kgym-t-big)/1.1 var(--lawha-display);color:var(--lawha-ink)}
.session-clock .clock-cap{margin-inline-start:6px;font-size:var(--kgym-t-small)}
.card-head{display:flex;align-items:flex-start;gap:var(--kgym-s3)}
.card-head .card-title{flex:1;min-width:0}
.card-head h2{margin:0}
.card-head .muscles{margin:2px 0 0;line-height:1.35}
.card-head .exercise-picture,.fold-line .exercise-picture{flex:none;width:52px;height:52px;object-fit:cover;border-radius:var(--lawha-radius)}
.unit-switch{margin-block:var(--kgym-s3) var(--kgym-s1)}
/* The design fix (2026-10-09): kg / lb, and Easy / Right / Hard, are SMALL joined switches as wide as their words (the
   mockup's ~90 px kg · lb), not bars across the card; History's four views and Look keep the full-width form. */
.segmented.unit-switch,.segmented.effort-switch{display:inline-grid;grid-auto-columns:auto;width:auto;margin-bottom:0;background:var(--lawha-paper)}
.segmented.unit-switch button,.segmented.effort-switch button{padding:0 var(--kgym-s3);font-size:14px}
.exercise-card.is-folded{padding-block:var(--kgym-s2)}
.fold-line{display:flex;align-items:center;gap:var(--kgym-s3);width:100%;min-height:52px;padding:0;border:0;background:transparent;color:var(--lawha-ink);font:inherit;text-align:start;cursor:pointer}
/* As drawn (design fix 2026-10-09): the name in Georgia, the summary under it, a chevron at the end; a done exercise shows
   a green ✓ tile in place of its picture. */
.fold-words{flex:1;min-width:0;display:grid}
.fold-line .plan-name{font:17px/1.25 var(--lawha-display)}
.fold-line .plan-detail{font-size:var(--kgym-t-small);color:var(--lawha-muted)}
.fold-chevron{flex:none;color:var(--lawha-muted)}
.fold-done{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:var(--lawha-radius);background:var(--kgym-met);color:var(--lawha-surface)}
@media (min-width:900px){.session-head{top:56px}}
.session-clock{font-size:13px;color:var(--lawha-muted)}
.session-clock.near-cap{color:var(--lawha-ink);font-weight:700}
.session-clock.near-cap .clock-time{font-weight:700}
/* New interface wave 1 (audit B2): the ONE Finish — a small outlined pill with a flag in the pinned workout header. */
.finish-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:44px;min-width:44px;padding:0 16px;border:1.5px solid var(--lawha-ink);border-radius:999px;background:transparent;color:var(--lawha-ink);font:600 15px/1.2 var(--lawha-font);white-space:nowrap;cursor:pointer}
.finish-button .finish-flag{flex:none}
/* New interface wave 1 (audit W7, owner-approved 2026-10-10): every tap answers — the toast ("✓ Set 2 saved · Undo"), a
   dark pill near the top that goes by itself (views/toast.ts). Today's one status line keeps saying the same words to a
   screen reader, drawn for screen readers only, so the eye sees the words once. */
.toast{position:fixed;top:calc(env(safe-area-inset-top) + 64px);left:50%;z-index:20;display:flex;align-items:center;gap:8px;box-sizing:border-box;max-width:calc(100% - 32px);min-height:48px;padding:2px 4px 2px 14px;border-radius:999px;background:var(--lawha-ink);color:var(--lawha-surface);font:600 13px/1.25 var(--lawha-font);box-shadow:0 10px 30px -10px rgba(0,0,0,.45);transform:translateX(-50%);animation:kgym-toast-in var(--lawha-duration) var(--lawha-ease)}
.toast[hidden]{display:none}
.toast-tick{flex:none}
.toast-words{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast-action{flex:none;min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--lawha-surface);font:600 13px/1.2 var(--lawha-font);text-decoration:none;cursor:pointer}
.toast:not(:has(.toast-action)){padding-inline-end:16px}
/* Re-review N1: a note (a failure, "it stays") has no tick and stays until he acts; it wraps onto two or three lines in
   the same dark shape (never cut with …), at most 360 px, its × at the end. */
.toast.is-note{align-items:center;width:max-content;max-width:min(360px,calc(100% - 32px));padding:8px 4px 8px 16px;border-radius:20px}
.toast.is-note .toast-words{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.toast-close{font-size:18px}
@keyframes kgym-toast-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translateX(-50%)}}
.today-status{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){.toast{top:68px}}
/* Body: the anatomy map (body-map.ts). Status colours: met = deep green, below target = amber + stripes, below
   minimum = rust + cross-hatching, not trained = pale sage; neutral anatomy is drawn in the paper colours. */
.lawha-theme{--kgym-met:#325c44;--kgym-low:#d79a2b;--kgym-min:#b4492f;--kgym-none:#d8dfcb;--kgym-skin:#fbfaf6;--kgym-skin-edge:#9fab99;--kgym-gap:#f3f2ec;--kgym-stripe:#faf9f4;--kgym-fibre:rgba(250,249,244,.5)}
[data-theme='dark'] .lawha-theme{--kgym-met:#6fb08a;--kgym-low:#e0b255;--kgym-min:#e5815f;--kgym-none:#46594d;--kgym-skin:#24302a;--kgym-skin-edge:#5f7366;--kgym-gap:#17211c;--kgym-stripe:#1f2a24;--kgym-fibre:rgba(23,33,28,.42)}
.body-map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px 6px;margin:var(--kgym-s2) 0 0}
.bm-defs{position:absolute;width:0;height:0;overflow:hidden}
.map-side{min-width:0;display:grid;justify-items:center;align-content:start;gap:4px}
.map-side .map-caption{order:1;margin:0;font-weight:400;font-size:var(--kgym-t-small);color:var(--lawha-muted)}
/* The design fix: the figures are about 300 px tall on a phone, as drawn (larger in the laptop column, §1.5). */
.bm-figure{display:block;width:auto;max-width:100%;height:300px;touch-action:manipulation;-webkit-user-select:none;user-select:none}
@media (min-width:900px){.bm-figure{height:400px}}
.bm-body-edge path{fill:var(--kgym-skin-edge);stroke:var(--kgym-skin-edge);stroke-width:2.2;stroke-linejoin:round}
.bm-body-fill path{fill:var(--kgym-skin);stroke:none}
.bm-tile-met{fill:var(--kgym-met)}
.bm-tile-below-target{fill:var(--kgym-low)}
.bm-tile-below-min{fill:var(--kgym-min)}
.bm-tile-untrained{fill:var(--kgym-none)}
.bm-stripe{fill:none;stroke:var(--kgym-stripe);stroke-width:1.1;opacity:.6}
.map-region{cursor:pointer;outline:none}
.map-region .bm-shape{stroke:var(--kgym-gap);stroke-width:1.1;stroke-linejoin:round;transition:opacity var(--lawha-duration) var(--lawha-ease)}
.map-region .bm-lines{fill:none;stroke:var(--kgym-fibre);stroke-width:.8;stroke-linecap:round;pointer-events:none}
.bm-hits path{fill:transparent;stroke:transparent;stroke-width:20;stroke-linejoin:round;pointer-events:all;cursor:pointer}
@media(hover:hover){.map-region:hover .bm-shape{opacity:.82}}
.bm-focus{display:none;pointer-events:none}
.map-region:focus-visible~.bm-focus{display:inline}
.bm-focus path{fill:none;stroke-linejoin:round}
.bm-focus-outer{stroke:var(--lawha-ink);stroke-width:3.4}
.bm-focus-inner{stroke:var(--lawha-surface);stroke-width:1.3}
/* B2 (phone test 2026-10-05): the chosen muscle — a light halo under a dashed ink line (unlike the solid focus ring). */
.bm-selected{pointer-events:none}
.bm-selected path{fill:none;stroke-linejoin:round}
.bm-sel-halo path{stroke:var(--lawha-surface);stroke-width:4}
.bm-sel-line path{stroke:var(--lawha-ink);stroke-width:1.8;stroke-dasharray:5 3}
.bm-clock{pointer-events:none}
.bm-clock circle{fill:var(--lawha-surface);stroke:var(--lawha-ink);stroke-width:1.2}
.bm-clock path{fill:none;stroke:var(--lawha-ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.bm-details{pointer-events:none}
.bm-detail-lines path,path.bm-detail-lines{fill:none;stroke:var(--kgym-skin-edge);stroke-width:.8;stroke-linecap:round}
.map-legend{grid-column:1/-1;list-style:none;margin:var(--kgym-s3) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;font-size:13px}
.map-legend li{display:flex;align-items:center;gap:9px;line-height:1.25}
.map-legend .bm-swatch{flex:none;width:20px;height:20px}
.map-legend .bm-shape{stroke:var(--lawha-line);stroke-width:1}
.map-legend .legend-clock{grid-column:1/-1}
/* F9 (Addendum 2): both sides side by side at every width. The stacked fallback (front above back) is written but off:
   the class is added only if the 320 px check finds side by side unusable (ruling 24) — never a switch. */
@media(max-width:339px){.body-map.stacked{grid-template-columns:1fr}}
@media(max-width:340px){.map-legend{grid-template-columns:1fr}}
/* === Body: the folded muscle list (F9's guaranteed route to every muscle: folded by default, never removed; owner-
   approved proposal 2026-10-09, kept by the map-first design 2026-10-10) === open, the 18 parts under his six groups as
   compact 44 px rows: the name (a clock while resting), "x of y", the status as a small mark WITH its word (never colour
   alone; the map's own colours). Every row is a button of at most 360 px (the .tab-content button rule). */
.muscle-list{margin:var(--kgym-s2) 0 0}
.muscle-list[hidden]{display:none}
.muscle-group h3{margin:var(--kgym-s3) 0 2px;font:600 var(--kgym-t-small)/1.3 var(--lawha-font);color:var(--lawha-muted)}
.muscle-rows{list-style:none;margin:0;padding:0}
.muscle-rows li{min-width:0}
.muscle-rows li+li{border-top:var(--lawha-rule)}
.muscle-row{display:grid;grid-template-columns:minmax(0,1fr) auto 12px 104px;grid-template-areas:"name amount mark state";column-gap:var(--kgym-s2);align-items:center;width:100%;min-height:44px;padding:0 var(--kgym-s1);text-align:start;border:0;border-radius:var(--lawha-radius);background:transparent;color:var(--lawha-ink);font-size:var(--kgym-t-body);cursor:pointer}
.muscle-name{grid-area:name;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muscle-amount{grid-area:amount;white-space:nowrap;text-align:end;font-variant-numeric:tabular-nums}
.muscle-mark{grid-area:mark;width:12px;height:12px;border-radius:2px}
.muscle-state{grid-area:state;white-space:nowrap;font-size:var(--kgym-t-small);color:var(--lawha-muted)}
.muscle-state.muscle-note{white-space:normal;overflow-wrap:anywhere;line-height:1.3;padding-block:4px} /* Step 1's "filled by …" notes wrap in the column */
.muscle-clock{flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.mark-met{background:var(--kgym-met)}
/* Today's "This workout" list: the website only (900 px and wider; below). */
.workout-index{display:none}
/* Settings' website list (one line per group, as drawn): the website only (below). */
.settings-web{display:none}
.workout-index-list{list-style:none;margin:var(--kgym-s1) 0 0;padding:0}
.workout-index-list li+li{border-top:var(--lawha-rule)}
.index-line{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:var(--kgym-s2);align-items:center;width:100%;min-height:52px;padding:4px 6px;border:0;border-radius:var(--lawha-radius);background:transparent;color:var(--lawha-ink);font-size:14px;text-align:start;cursor:pointer}
.index-line[aria-current=step]{background:var(--lawha-paper);box-shadow:inset 3px 0 0 var(--lawha-ink);font-weight:600}
.index-mark{display:grid;place-items:center;width:24px;height:24px;border:1.5px solid var(--lawha-line);border-radius:6px;box-sizing:border-box}
.index-mark.is-done{border:0;background:var(--kgym-met);color:var(--lawha-surface)}
.index-words{display:grid;min-width:0}
.index-detail{font-size:var(--kgym-t-small);font-weight:400;color:var(--lawha-muted)}
.calendar-day-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--kgym-s2)}
.day-actions:empty{display:none}
.mark-below-target{background:var(--kgym-low)}
.mark-below-min{background:var(--kgym-min)}
@media(max-width:350px){.muscle-row{grid-template-columns:minmax(0,1fr) auto 12px 92px;column-gap:6px}}
/* A muscle row hovered or focused on the website outlines its regions on the map (the map's own selected look; a click
   or tap selects it, so hover is never required). */
.map-region.is-hovered .bm-shape{stroke:var(--lawha-ink);stroke-width:2.2}
.muscle-row[aria-pressed=true]{font-weight:700;box-shadow:inset 0 0 0 2px var(--lawha-ink),inset 0 0 0 4px var(--lawha-surface)}
/* === Body map-first (owner-approved design 2026-10-10, Step 1c Phase A) === the phone: the map card (the summary line,
   the map and its legend, then the hint and "Show all muscles"), the tapped muscle's sheet right under it (a card with a
   thick ink top edge), the folded list card; each a card of its own, as drawn. The website: below (900 px and wider). */
.body-week{display:grid;gap:var(--kgym-s3);min-width:0}
.body-week>section{margin:0}
.summary-head{display:block;margin:0 0 2px;font:400 19px/1.25 var(--lawha-display)}
.summary-sub{color:var(--lawha-muted)}
.map-hint{margin:0;font-size:var(--kgym-t-small);color:var(--lawha-muted)}
.muscle-details{margin:0;padding:16px;border:var(--lawha-rule);border-top:3px solid var(--lawha-ink);border-radius:var(--lawha-radius);background:var(--lawha-surface);scroll-margin-bottom:calc(72px + env(safe-area-inset-bottom))}
.muscle-details h2{margin:2px 0 0;font:var(--kgym-t-card)/1.2 var(--lawha-display)}
.details-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.details-group{margin:0;font-size:var(--kgym-t-small);color:var(--lawha-muted)}
.details-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 12px;font-size:var(--kgym-t-body)}
.details-word,.details-resting{display:inline-flex;align-items:center;gap:7px}
.details-status .bm-swatch{flex:none;width:18px;height:18px}
.details-status .bm-shape{stroke:var(--lawha-line);stroke-width:1}
.details-big{margin:0}
.details-big b{font:600 var(--kgym-t-big)/1.1 var(--lawha-font)}
.details-big small{font-size:14px;color:var(--lawha-muted)}
.details-bar{display:block;width:100%;height:20px;margin:6px 0 0;overflow:visible}
.bar-track{fill:var(--lawha-paper);stroke:var(--lawha-line);stroke-width:1}
.bar-fill{stroke:var(--lawha-ink);stroke-width:1}
.bar-tick-halo{stroke:var(--lawha-surface);stroke-width:6}
.bar-tick{stroke:var(--lawha-ink);stroke-width:3}
.details-barlab{display:flex;justify-content:space-between;gap:10px;margin:5px 0 0;font-size:var(--kgym-t-small);color:var(--lawha-muted)}
.details-barlab span:only-child{margin-inline-start:auto}
.details-next{margin:8px 0 0;font-size:14px}
.details-facts{display:grid;grid-template-columns:auto minmax(0,1fr);margin:14px 0 0;font-size:14px}
.details-facts dt,.details-facts dd{margin:0;padding:8px 0;border-top:var(--lawha-rule)}
.details-facts dt{padding-inline-end:14px;color:var(--lawha-muted)}
.details-facts dd{text-align:end;overflow-wrap:anywhere}
.muscle-details h3{margin:16px 0 2px;font:600 var(--kgym-t-body)/1.3 var(--lawha-font)}
.exercise-top{list-style:none;margin:0;padding:0}
.exercise-top li{display:grid;grid-template-columns:minmax(0,1fr) auto 10px;gap:10px;align-items:center;min-height:44px;border-top:var(--lawha-rule);font-size:14px}
.exercise-top li:first-child{border-top:0}
.exercise-top .exercise-link{justify-self:start;text-align:start}
.exercise-role{font-size:var(--kgym-t-small);color:var(--lawha-muted)}
.muscle-chevron{display:block;color:var(--lawha-muted)}
.muscle-list-card{padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.muscle-list-card[hidden]{display:none}
.muscle-group h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.group-total{font-weight:400}
.list-foot{margin:var(--kgym-s2) 0 0}
.mark-untrained{background:var(--kgym-none);box-shadow:inset 0 0 0 1px var(--lawha-line)}
.muscle-empty{margin:var(--kgym-s3) 0;padding:22px 18px;border:1.5px dashed var(--lawha-line);border-radius:var(--lawha-radius);text-align:center;font-size:14px;color:var(--lawha-muted)}
.muscle-empty svg{display:block;width:34px;height:34px;margin:0 auto 8px;color:var(--lawha-muted)}
.muscle-empty b{display:block;margin:0 0 4px;font:400 19px/1.25 var(--lawha-display);color:var(--lawha-ink)}
/* Step 1c (D3): "new" beside Traps for 4 weeks — the approved proposal's tag, the existing sage and ink tokens */
.new-tag{display:inline-block;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:var(--lawha-sage);color:var(--lawha-ink);font-size:13px;font-weight:600;line-height:20px;vertical-align:middle}
/* === end Body map-first (phone) === */
.filters{display:flex;gap:8px;margin:8px 0}
.filters select{min-height:44px;font-size:16px;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-paper);color:var(--lawha-ink)}
.exercise-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.exercise-list li{display:grid}
/* Body (Addendum 2 §2.1): the date beside the title, and the today card — last on the page (F6). */
.page-date{margin:0 0 var(--kgym-s3);font-size:var(--kgym-t-small);color:var(--lawha-muted)}
.body-today{margin:var(--kgym-s4) 0 0;padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.body-today h2{margin:0 0 var(--kgym-s2);font:var(--kgym-t-card)/1.2 var(--lawha-display)}
.body-today h3{margin:var(--kgym-s4) 0 var(--kgym-s1);font:600 var(--kgym-t-label)/1.2 var(--lawha-font)}
.body-today p{margin:var(--kgym-s1) 0;font-size:var(--kgym-t-body);line-height:1.5}
.body-today .plan-list{gap:0;margin:var(--kgym-s2) 0 0}
.body-today .plan-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;align-items:baseline;padding:9px 0;border-top:var(--lawha-rule);font-size:14px}
.body-today .plan-list li:first-child{border-top:0}
.body-today .plan-list .plan-name{font-weight:400}
.body-today .plan-list .plan-detail{font-size:14px;text-align:end}
.body-today .plan-length{margin:var(--kgym-s1) 0 0;font-size:14px}
/* The design fix: a card's title line — the title at the start, a small note at the end ("tap a muscle", "updated 07:42"). */
.card-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--kgym-s1) var(--kgym-s3);margin:0 0 var(--kgym-s2)}
.card-line h2{margin:0;font:600 var(--kgym-t-body)/1.3 var(--lawha-font)}
.card-line-note{font-size:var(--kgym-t-small);color:var(--lawha-muted)}
.map-card{margin:0 0 var(--kgym-s3);padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
/* History: workouts, lifts, body weight, cardio and sport (Plan 3B). */
/* The segmented switch (Addendum 2 §1.4): two to four joined buttons, each at least 44 x 44, the chosen one in ink. */
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;max-width:100%;margin:0 0 var(--kgym-s4);border:var(--lawha-rule);border-radius:var(--lawha-radius);overflow:hidden}
.segmented button{min-height:44px;min-width:44px;padding:0 var(--kgym-s1);border:0;border-inline-start:var(--lawha-rule);border-radius:0;background:var(--lawha-surface);color:var(--lawha-ink);font-size:var(--kgym-t-body);cursor:pointer}
.segmented button:first-child{border-inline-start:0}
.segmented button[aria-pressed=true]{background:var(--lawha-ink);color:var(--lawha-surface);font-weight:700}
.history-list,.history-entries{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.history-row{width:100%;min-height:44px;padding:var(--kgym-s2) var(--kgym-s3);text-align:start;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface);color:var(--lawha-ink);font-size:13px;cursor:pointer}
.history-entries li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13px}
.history-entries li span{flex:1 1 60%}
.history-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:10px;align-items:end}
/* B1 (phone test 2026-10-05): every field stays inside its own column — a date-time box alone is about 213 px wide. */
.history-form>*{min-width:0}
.history-form :is(input,select){width:100%;min-width:0;font-size:16px}
.history-form label:has(>[type=datetime-local]){grid-column:1/-1}
.history-form .shared-action{margin:0}
/* Today (Plan 3B): the effort rating, the soreness question, the finisher line. A liked exercise's 👍 button (Today and
   Body, 2026-10-05) has the same pressed look as the chosen effort. */
.effort-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kgym-s1) var(--kgym-s2);margin-top:var(--kgym-s2)}
.effort-row .set-label{margin:0}
/* 👍 Like as drawn (design fix 2026-10-09): a 44-px outlined button; liked = ink outline, bold, a thick ink line at its foot. */
.like-button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--lawha-line);border-radius:var(--lawha-radius);background:transparent;color:var(--lawha-ink);font-size:14px;font-weight:500;line-height:1;cursor:pointer}
.like-button.is-liked{border-color:var(--lawha-ink);font-weight:700;box-shadow:inset 0 -3px 0 var(--lawha-ink)}
.like-compact{width:44px;padding:0;font-size:17px}
.like-icon{display:inline-block}
/* New interface wave 1 (owner-approved proposal 2026-10-10): the drawn thumb; the card's compact Like is a round 44 px
   button, liked = a sage disc with the thumb filled in accent (the fill is the shape cue, not colour alone). */
.like-icon .like-glyph{display:block}
.like-compact{border:0;border-radius:50%;background:var(--kgym-sunk);color:var(--lawha-ink)}
.like-compact.is-liked{background:var(--lawha-sage);color:var(--lawha-accent);box-shadow:none}
.soreness-card{margin:12px 0;padding:16px;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-sage)}
.soreness-card p{margin:0 0 4px;font-size:14px}
/* Settings (Plan 3B): notes, tick lists, the collapsed Advanced group, the file picker. */
.settings-note{margin:0;font-size:13px;line-height:1.6;color:var(--lawha-muted)}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px 12px;margin:0;padding:12px;border:var(--lawha-rule);border-radius:var(--lawha-radius)}
.check-grid legend{padding:0 6px;font-size:13px;color:var(--lawha-muted)}
.check-grid label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px}
/* Addendum 2 §1.8: a tick box is pressed, so the box itself is 44 x 44 (not only its row); the ink accent marks it. */
.check-grid input{flex:none;width:44px;height:44px;margin:0;accent-color:var(--lawha-ink);font-size:16px}
/* Settings in the new look (Addendum 2 §2.7): the main page's grouped lines, the value at the end of its line, and the
   detail page's "‹ Settings". Layout by start / end (right-to-left ready). */
.settings-summary{margin:0 0 var(--kgym-s5)}
.settings-summary h2{margin:0 0 var(--kgym-s2);font:600 var(--kgym-t-label)/1.2 var(--lawha-font);color:var(--lawha-muted)}
.setting-lines{list-style:none;max-width:360px;margin:0;padding:0;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface);overflow:hidden}
.setting-lines li+li{border-top:var(--lawha-rule)}
.setting-line{display:flex;align-items:center;gap:var(--kgym-s2);width:100%;max-width:360px;min-height:44px;padding:var(--kgym-s2) var(--kgym-s3);border:0;background:transparent;color:var(--lawha-ink);font-size:var(--kgym-t-body);text-align:start;cursor:pointer}
.setting-value{margin-inline-start:auto;color:var(--lawha-muted);text-align:end}
.setting-chevron{color:var(--lawha-muted)}
.setting-value+.setting-chevron{margin-inline-start:0}
.setting-name+.setting-chevron{margin-inline-start:auto}
.settings-page h2{margin:var(--kgym-s2) 0 var(--kgym-s3);font:var(--kgym-t-card)/1.2 var(--lawha-display)}
.settings-page .settings-group{margin:var(--kgym-s4) 0 0}
/* The design fix (2026-10-09): a detail page starts with "‹ Settings" at the START of the line (as every back link in the
   mockup), no rule above it; the Look group's switch sits in its own rounded box on the main page, as drawn. */
.settings-page{padding-top:0;border-top:0}
.settings-page>.settings-back{justify-self:start}
/* As the mockup's sub-pages (its exercise page: "‹ Back" first, then the page's own title) and the live exercise page
   (coordinator ruling, Addendum 2 §2.3): while a detail page is open the "Settings" title line steps aside and the page's
   own name is the title. */
@media (max-width:899px){.tab-content:has(>.settings-page:not([hidden]))>.title-line{display:none}}
.settings-page>h2{margin:var(--kgym-s3) 0 var(--kgym-s4);font:var(--kgym-t-page)/1.12 var(--lawha-display)}
.setting-chevron{flex:none}
.look-lines{padding:6px}
.look-switch{margin:0;background:var(--lawha-paper)}
.settings-page .settings-group h2{font:var(--kgym-t-label)/1.2 var(--lawha-font);font-weight:600}
.advanced summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:var(--kgym-t-card)/1.2 var(--lawha-display)}
.door-field input[type=file]{min-height:48px;font-size:16px}
/* Glucose (Plan 6B): drawn only once KGYM says glucose is switched on. The emergency is a red card and the warning an
   amber one; both keep their text contrast in light and dark (about 8:1 and 7:1 or more). */
.lawha-theme{--kgym-alarm:#8f2a1a;--kgym-alarm-ink:#ffffff;--kgym-warn:#f4dca8;--kgym-warn-ink:#263d34}
[data-theme='dark'] .lawha-theme{--kgym-alarm:#f08a6c;--kgym-alarm-ink:#17211c;--kgym-warn:#e0b255;--kgym-warn-ink:#17211c}
.glucose-area{margin:0 22px;scroll-margin-top:84px}
/* Review I1: while an emergency or a warning stands, a bar pinned to the top of the screen keeps it in view however far
   the page is scrolled (the tab bar alone was fixed); one tap brings the alert itself back into view. */
.glucose-bar{position:sticky;top:0;z-index:10;padding:max(8px,env(safe-area-inset-top)) 22px 8px;background:var(--lawha-paper)}
.glucose-bar button{width:100%;min-height:48px;padding:10px 14px;border-width:2px;border-style:solid;border-radius:var(--lawha-radius);font-size:15px;font-weight:700;text-align:start;cursor:pointer}
.glucose-bar .glucose-bar-emergency{background:var(--kgym-alarm);color:var(--kgym-alarm-ink);border-color:var(--kgym-alarm)}
.glucose-bar .glucose-bar-warning{background:var(--kgym-warn);color:var(--kgym-warn-ink);border-color:var(--kgym-warn-ink)}
.glucose-emergency{margin-top:12px;padding:18px;border-radius:var(--lawha-radius);background:var(--kgym-alarm);color:var(--kgym-alarm-ink)}
.glucose-emergency h2{margin:0 0 8px;font:28px/1.15 var(--lawha-display)}
.glucose-emergency p{margin:0 0 10px;font-size:15px;line-height:1.5}
.glucose-message{font-weight:700}
.glucose-calls{display:grid;gap:8px;margin:12px 0}
.glucose-emergency .shared-action{justify-content:center;width:100%;background:var(--kgym-alarm-ink);color:var(--kgym-alarm);border-color:var(--kgym-alarm-ink);font-weight:700}
.glucose-emergency :is(.link-button,.door-field,.form-note){color:var(--kgym-alarm-ink)}
.glucose-warning{margin-top:12px;padding:14px 16px;border:2px solid var(--kgym-warn-ink);border-radius:var(--lawha-radius);background:var(--kgym-warn);color:var(--kgym-warn-ink);font-size:15px}
.glucose-warning p{margin:0 0 6px}
.glucose-warning-title{font-weight:700}
.glucose-prompt,.glucose-card,.glucose-session{margin:12px 0 0;padding:16px;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.glucose-card h2{margin:0 0 8px;font:24px/1.2 var(--lawha-display)}
.glucose-prompt p,.glucose-card p,.glucose-session p{margin:0 0 8px;font-size:14px;line-height:1.5}
/* Review I4: "glucose checks are OFF" has the warning look, wherever it shows (top, Today, a workout, Settings). */
.glucose-off{margin:12px 0 0;padding:14px 16px;border:2px solid var(--kgym-warn-ink);border-radius:var(--lawha-radius);background:var(--kgym-warn);color:var(--kgym-warn-ink);font-size:15px;font-weight:700;line-height:1.5}
.glucose-note{margin:8px 0 0;font-size:13px;color:var(--lawha-muted)}
.glucose-sent{margin:12px 0 0;padding:12px 16px;border:1px solid var(--lawha-ink);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.glucose-sent p{margin:0 0 6px;font-size:14px;line-height:1.5}
.glucose-stale{font-style:italic}
.glucose-hold{font-weight:700}
.glucose-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px;align-items:end;margin:8px 0}
.glucose-form .door-field{min-width:0}
.glucose-form :is(input,select){width:100%;min-width:0;font-size:16px}
.glucose-form .form-note{grid-column:1/-1;margin:0}
.glucose-form .shared-action{margin:0}
.glucose-confirm{margin:8px 0;padding:12px;border:1px solid var(--lawha-ink);border-radius:var(--lawha-radius)}
.glucose-entry summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
/* WHOOP (Plan 5B): History's WHOOP days. The recovery colour is a side bar; the words say it too. */
.whoop-days li{gap:2px}
.whoop-recovery{padding-inline-start:8px;border-inline-start:4px solid var(--lawha-line)}
.whoop-recovery.whoop-green{border-inline-start-color:var(--kgym-met)}
.whoop-recovery.whoop-yellow{border-inline-start-color:var(--kgym-low)}
.whoop-recovery.whoop-red{border-inline-start-color:var(--kgym-min)}
/* WHOOP card (design fix 2026-10-09, the mockup's card): a plain card — no side stripe; the band is said by the ring's colour
   AND its word. The ring at the start, four rows beside it (value at the end, thin rules), the yellow / red line under. */
.whoop-card{margin:0 0 var(--kgym-s3);padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.whoop-card p{margin:0;font-size:14px}
.whoop-grid{display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--kgym-s1) var(--kgym-s3);align-items:center}
.whoop-stats{display:grid;gap:6px;min-width:0}
.whoop-stat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--kgym-s2);padding-bottom:5px;border-bottom:var(--lawha-rule);font-size:14px;line-height:1.35}
.whoop-stat:last-child{padding-bottom:0;border-bottom:0}
.whoop-stat-value{font-weight:600;text-align:end}
.whoop-of{font-weight:400;font-size:var(--kgym-t-small);color:var(--lawha-muted)}
.whoop-card .whoop-line{margin-top:var(--kgym-s2);font-size:var(--kgym-t-small);color:var(--lawha-muted)}
/* The exercise page (owner-approved proposal 2026-10-09, 2a-2d): KGYM's own photo IS the link — a big ▶ on it and a
   small tag saying where it goes ("YouTube ↗" / "Search YouTube"); no signal = a dashed ▶ and "Video needs internet".
   The box is the full column, 16:10 as drawn, never under 200 px tall. On the website (900 px and wider, 2d) the picture
   takes the left column and the name sits on the right. Tokens only. */
.exercise-page h1{margin:16px 0 0}
.page-back{margin:0 0 8px}
.video-box{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/10;min-height:200px;overflow:hidden;border-radius:var(--lawha-radius);background:var(--lawha-sage)}
.video-open{position:absolute;inset:0;display:grid;place-items:center;color:var(--lawha-ink);text-decoration:none;-webkit-touch-callout:none}
.video-box>*,.video-open>*{grid-area:1/1}
.video-box .exercise-picture{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover}
.video-mark{z-index:1;display:grid;place-items:center;box-sizing:border-box;width:72px;height:72px;border-radius:50%;background:var(--lawha-ink);color:var(--lawha-surface);box-shadow:0 8px 22px -8px rgba(0,0,0,.5)}
.video-mark .video-glyph{width:30px;height:30px;margin-inline-start:4px}
.video-mark.is-off{border:2px dashed var(--lawha-muted);background:var(--lawha-surface);color:var(--lawha-muted);box-shadow:none}
.video-tag{z-index:1;align-self:end;justify-self:end;display:inline-flex;align-items:center;gap:6px;margin:10px;padding:4px 10px;border:var(--lawha-rule);border-radius:999px;background:var(--lawha-surface);color:var(--lawha-ink);font-size:13px;font-weight:600}
.video-tag .badge{width:12px;height:12px}
.video-note{z-index:1;align-self:end;margin:10px;padding:6px 12px;border-radius:var(--lawha-radius);background:var(--lawha-surface);color:var(--lawha-ink);font-size:13px}
@media(hover:hover){.video-open:hover::after{content:attr(data-tip);position:absolute;top:10px;left:50%;z-index:2;transform:translateX(-50%);padding:7px 11px;border-radius:7px;background:var(--lawha-ink);color:var(--lawha-surface);font:600 13px/1.3 var(--lawha-font);white-space:nowrap}}
.video-below p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--lawha-muted)}
.video-below a{display:inline-flex;align-items:center;min-height:44px;color:var(--lawha-ink)}
.video-newtab{display:none}
@media (min-width:900px){.video-newtab{display:inline}.exercise-page{display:grid;grid-template-columns:minmax(0,560px) minmax(240px,1fr);column-gap:32px;align-items:start}.exercise-page>.page-back{grid-column:1/-1;justify-self:start}.exercise-facts>h1{margin-top:0}}
/* History calendar (Addendum 2 Rev A1 §2.4, F4): seven columns, every day a 44 px button; marks by SHAPE, not colour
   alone — a filled dot for a workout, a small square for sport or cardio; today outlined; the chosen day in ink. */
.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.calendar-head h2{margin:0;font:var(--kgym-t-card)/1.2 var(--lawha-display)}
.calendar-steps{display:flex;gap:var(--kgym-s1)}
.calendar-step{min-width:44px;min-height:44px;border:0;border-radius:var(--lawha-radius);background:transparent;color:var(--lawha-ink);font-size:20px;cursor:pointer}
.calendar-count{margin:0 0 var(--kgym-s2);font-size:var(--kgym-t-small);color:var(--lawha-muted)}
/* The design fix (2026-10-09): History's sections are cards (Addendum 2 §2.4 "today's sections in the new card look"; the
   mockup's calendar card). Below 360 px the calendar card reaches to 2 px from the screen edges with no side padding, so
   each day stays at least 44 px wide (review 2, L1: 7 × 44 + 6 × 1 = 314 px inside a 316 px card at 320 px). */
.history-view>section{margin:0 0 var(--kgym-s3);padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.history-view>section.settings-group{border-top:var(--lawha-rule)}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
/* Review 2, L1 (kept; the design fix moved the break-out from the grid to the calendar CARD): days stay at least 44 x 44
   with 1 px gaps up to 480 px; below 360 px the card reaches out to 2 px from the screen edges (the --kgym-gutter token)
   with no side padding, its title, count, key and chosen day keeping the card padding. No page overflow. */
@media(max-width:480px){.calendar-grid{gap:1px}}
@media(max-width:359px){.history-view>section.calendar{margin-inline:calc(2px - var(--kgym-gutter));padding-inline:0}.calendar>:not(.calendar-month),.calendar-month>:not(.calendar-grid){padding-inline:var(--kgym-pad)}}
.calendar-weekday{text-align:center;font-size:13px;color:var(--lawha-muted)}
.calendar-date{display:grid;justify-items:center;align-content:center;gap:2px;min-width:0;min-height:44px;padding:2px 0;border:1px solid transparent;border-radius:var(--lawha-radius);background:transparent;color:var(--lawha-ink);font-size:15px;font-variant-numeric:tabular-nums;cursor:pointer}
.calendar-date.today{border-color:var(--lawha-ink)}
.calendar-date[aria-pressed=true]{background:var(--lawha-ink);color:var(--lawha-surface)}
.calendar-marks{display:flex;gap:3px;min-height:7px}
.mark-workout,.mark-activity{display:inline-block;width:7px;height:7px;background:currentColor}
.mark-workout{border-radius:50%}
.calendar-legend .mark-workout,.calendar-legend .mark-activity{vertical-align:middle}
.calendar-day h3{margin:8px 0 4px;font:20px/1.2 var(--lawha-display)}
/* Addendum 1 Rev A2 U-3 and the KGYM screen standard (2026-10-05): a button is as wide as its words plus padding, at
   least 44 x 44 px to tap, never wider than 360 px; one set row is one line at 320 px; on a laptop one centred column. */
.tab-content button,.tab-content .shared-action{max-width:360px;min-height:44px;min-width:44px}
/* The design fix (owner ruling 2026-10-09; gap report 2.1): door.css (the sign-in page's shared copy, loaded on every page)
   makes every .shared-action 100 % wide and Lawha pushes its words to the start. In the app a MAIN button is as wide as
   its words plus 22 px each side, words centred, 15 px semibold, at least 48 px tall, never over 360 px (Addendum 2 §1.4).
   The glucose screens keep their reviewed look (§1.9), so they are left out. A SECOND button is the same, outlined, 44 px. */
.lawha-theme :where(.tab-content,.open-workouts) .shared-action:not(:is(.glucose-area,.glucose-form,.glucose-card,.glucose-prompt,.glucose-session,.glucose-confirm,.glucose-emergency) *){width:auto;max-width:360px;min-height:48px;padding:0 22px;justify-content:center;justify-self:start;font-size:var(--kgym-t-body);font-weight:600;text-align:center}
.second-action{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;max-width:360px;padding:0 14px;border:1px solid var(--lawha-ink);border-radius:var(--lawha-radius);background:transparent;color:var(--lawha-ink);font-size:14px;font-weight:600;cursor:pointer}
.actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kgym-s2) var(--kgym-s4);margin-top:var(--kgym-s3)}
.actions-row>.shared-action{margin:0}
.actions-row:has(>.icon-action){align-items:flex-start}
@media(max-width:360px){.exercise-card{padding:12px}}
/* Addendum 2 §1.5: 431–899 px, the phone layout in one centred column of at most 640 px; 900 px and wider (laptop), the
   same column with the tab bar at the TOP of the page (sticky), nothing edge to edge. */
@media (min-width:431px){.open-workouts{box-sizing:border-box;width:calc(100% - 44px);max-width:640px;margin-inline:auto}.tab-content{max-width:640px;margin-inline:auto;width:100%;box-sizing:border-box}.tab-bar{max-width:640px;margin-inline:auto}}
/* === The website (owner-approved proposal 2026-10-09, "website is website, iPhone is iPhone"; Addendum 2 §1.5 as amended)
   === 900 px and wider: the tabs in a top bar (icon and word side by side, the current one underlined), the light /
   dark button and the sync status at the bar's end on every tab, and each tab laid out for the width — content stops at
   1216 px and centres. Buttons stay as wide as their words (most 360 px) and 44 px tall; nothing stretches edge to edge. */
@media (min-width:900px){
#app{display:flex;flex-direction:column}
.glucose-bar{order:-2}
.tab-bar{order:-1;position:sticky;top:0;bottom:auto;z-index:5;display:flex;justify-content:flex-start;gap:2px;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:0 max(32px,calc((100% - 1216px) / 2));border-top:0;border-bottom:var(--lawha-rule)}
.tab-bar button{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 16px;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-bar button[aria-current=page]{border-bottom-color:var(--lawha-ink)}
.tab-bar svg{width:20px;height:20px}
.tab-content{position:relative;max-width:1280px;width:100%;margin-inline:auto;box-sizing:border-box;padding:18px 32px var(--kgym-s6)}
.open-workouts{max-width:1216px;width:calc(100% - 64px)}
.workout-pill{position:static;margin:12px 0 0;width:auto;min-width:280px}
#app:has(.workout-pill) .tab-content{padding-bottom:var(--kgym-s6)}
.title-line{grid-template-columns:minmax(0,1fr);grid-template-areas:"date" "title";margin-block-end:14px}
.title-line .title-tools{position:fixed;top:6px;inset-inline-end:max(32px,calc((100% - 1216px) / 2));z-index:6}
.title-line:not([data-tab=body]) .theme-toggle{display:inline-flex}
/* Body, 900 px and wider (map-first, owner-approved design 2026-10-10): the day (WHOOP, today's workout) on the left; ONE
   week card on the right holding the map and the details zone — under the map until 1199 px, beside it from 1200 px. The
   always-open muscle table of PR #34 is gone; the folded list is the same F9 route as on the phone. */
.screen-body{display:grid;grid-template-columns:minmax(300px,340px) minmax(0,1fr);grid-template-areas:"whoop week" "today week" ". week";grid-template-rows:auto auto 1fr;column-gap:24px;align-items:start}
.screen-body>*{grid-column:1/-1}
.screen-body>.whoop-card{grid-area:whoop}
.screen-body>.body-today{grid-area:today;margin:0 0 var(--kgym-s4)}
.screen-body>.body-week{grid-area:week;min-width:0}
.body-week{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start;padding:18px 20px;border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.body-week>.map-card{display:contents}
.body-week>:is(.muscle-details,.muscle-list-card){margin:var(--kgym-s3) 0 0;padding:0;border:0;border-radius:0;background:transparent}
.body-week .bm-figure{height:420px}
.body-week>:is(.extra-work,.weeks-full,.priority-short,.body-parts){grid-column:1/-1}
.muscle-row:hover,.muscle-row:focus-visible{background:var(--lawha-paper);box-shadow:inset 3px 0 0 var(--lawha-ink)}
/* Today before Start: WHOOP on the left, today's plan in the middle at phone width. */
.screen-today:not(:has(.exercise-card)){display:grid;grid-template-columns:minmax(300px,340px) minmax(0,600px);grid-auto-flow:row dense;column-gap:24px;align-items:start}
.screen-today:not(:has(.exercise-card))>*{grid-column:1/-1}
.screen-today:not(:has(.exercise-card))>.whoop-card{grid-column:1}
.screen-today:not(:has(.exercise-card))>.today-card{grid-column:2;grid-row:span 3}
/* Today during a workout: the clock line across the top; "This workout" listed on the left (a click opens that card);
   the open card in the middle at phone width (the set boxes never stretch); the right column is kept for Step 1's
   how-to and last 3 times. */
.screen-today:has(.exercise-card){display:grid;grid-template-columns:240px minmax(0,600px);column-gap:24px;align-items:start}
.screen-today:has(.exercise-card)>*{grid-column:2}
.screen-today:has(.exercise-card)>.session-head{grid-column:1/-1;grid-row:1}
/* the list takes no height in the grid (its card hangs from it), so the middle column's rows never stretch to it */
.screen-today .workout-index{display:block;grid-column:1;grid-row:2 / span 40;align-self:start;height:0;position:sticky;top:72px;margin:0}
.workout-index-card{margin:0}
.screen-today:has(.exercise-card.is-open) .exercise-card.is-folded{display:none}
/* History: the month and every workout on the left, the chosen day as its own card on the right. */
.history-view[data-history-view=Workouts]:not([hidden]){display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);column-gap:24px;align-items:start}
.history-view[data-history-view=Workouts]>section.calendar{display:contents}
.calendar-month{grid-column:1;grid-row:1;margin:0 0 var(--kgym-s4);padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.calendar>.calendar-day{grid-column:2;grid-row:1 / span 2;margin:0;padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.history-view[data-history-view=Workouts]>section.settings-group{grid-column:1;grid-row:2;margin:0;padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.screen-history>.history-switch{position:absolute;top:30px;inset-inline-end:32px;margin:0}
/* Settings: the list stays on the left, the chosen page opens beside it (no "‹ Settings" back and forth). */
.tab-content:has(>.settings-home){display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);column-gap:24px;align-items:start}
.tab-content:has(>.settings-home)>*{grid-column:1/-1}
.tab-content>.settings-home{display:none!important}
.tab-content>.settings-web{display:block;grid-column:1;grid-row:2}
.tab-content>.settings-page{grid-column:2;grid-row:2 / span 3;margin:0;padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.tab-content>.settings-page>.settings-back{display:none}
.tab-content>.settings-page :is(select,input:not([type=checkbox])){max-width:360px;font-size:16px}
.tab-content>.settings-page>h2{margin-top:0}
.setting-line[aria-current=true]{background:var(--lawha-sage);box-shadow:inset 3px 0 0 var(--lawha-ink)}
.setting-line[aria-current=true] .setting-value{color:var(--lawha-ink)} /* muted on sage is under 4.5:1 */
}
@media (min-width:1200px){
/* Body, 1200 px and wider: three zones as live — the day on the left; in the week card the map (420 px tall) in its own
   column and the details zone on the right: the summary line, then the tapped muscle's details or "Click a muscle on the
   map", then "Show all muscles" and the list. The map spans the rows through the flexible last one, so the right column's
   items keep their own heights. */
.screen-body{grid-template-columns:360px minmax(0,1fr)}
.body-week{grid-template-columns:400px minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:28px}
.body-week .card-line{grid-column:1;grid-row:1}
.body-week .body-map{grid-column:1;grid-row:2 / 6}
.body-week>:is(.muscle-details,.muscle-empty){grid-column:2;grid-row:2}
.body-week>.muscle-details{margin:0}
.body-week>.muscle-list-card{grid-column:2;grid-row:4}
.screen-today:has(.exercise-card){grid-template-columns:280px minmax(0,600px) minmax(0,1fr)}
.history-view[data-history-view=Workouts]:not([hidden]){grid-template-columns:420px minmax(0,1fr)}
}
/* === whoop (Task 15) === */
/* Addendum 2 §1.4: the WHOOP recovery ring, the only ring in KGYM — 92 px, a 9 px stroke, the empty track in sage, the
   arc in WHOOP's band colour (met / low / min), the score 28 px Georgia with "recovery" under it; the band word beside it.
   §2.2: the one-line chip in a workout. */
.whoop-ring{flex:none;width:92px;height:92px}
.ring-track{fill:none;stroke:var(--lawha-sage);stroke-width:9}
.ring-arc{fill:none;stroke-width:9;stroke-linecap:round}
.band-green{stroke:var(--kgym-met)}
.band-yellow{stroke:var(--kgym-low)}
.band-red{stroke:var(--kgym-min)}
.whoop-ring text{fill:var(--lawha-ink)}
.whoop-ring .ring-score{font:var(--kgym-t-big) var(--lawha-display)}
.whoop-ring .ring-word{font-size:var(--kgym-t-small)}
.whoop-card .whoop-band{font-weight:700}
.whoop-chip{display:flex;align-items:center;gap:var(--kgym-s2);margin:0 0 var(--kgym-s3);font-size:var(--kgym-t-small);color:var(--lawha-muted)}
.whoop-dot{flex:none;width:10px;height:10px;border-radius:50%}
.whoop-dot.band-green{background:var(--kgym-met)}
.whoop-dot.band-yellow{background:var(--kgym-low)}
.whoop-dot.band-red{background:var(--kgym-min)}
/* === end whoop === */
/* === body 18 (Task 39) === */
.priorities{display:grid;gap:var(--kgym-s2)}
.priority-order{margin:var(--kgym-s2) 0 0;padding-inline-start:var(--kgym-s6)}
.priority-order li{display:flex;align-items:center;gap:var(--kgym-s3);min-height:44px}
.extra-work{margin:var(--kgym-s4) 0 0}
.weeks-full{margin:var(--kgym-s3) 0 0}
/* === end body 18 === */
/* === small-body (Task 28) === */
/* The small body picture (Coach Brain Rev 3 §1.5, Addendum 2 §2.3): front and back side by side, 150 px tall (≈ 59 px wide
   each, so both fit a 320 px screen with room to spare); if a screen is ever too narrow the back wraps under the front (F9's
   stacking fallback — never a side dropped). Tokens only, so light and dark both come from the theme: main = the accent
   fill, helpers = the helper tint with accent stripes, the rest = the skin — exactly the pairs measured in Task 12. */
.small-body{margin:var(--kgym-s2) 0;max-width:100%}
.sb-pair{display:flex;flex-wrap:wrap;gap:var(--kgym-s4);justify-content:center}
.small-body svg{display:block;height:150px;width:auto;max-width:100%;flex:none}
.sb-body-edge path{fill:var(--kgym-skin-edge);stroke:var(--kgym-skin-edge);stroke-width:2.2;stroke-linejoin:round}
.sb-body-fill path{fill:var(--kgym-skin);stroke:none}
.sb-none path{fill:var(--kgym-skin);stroke:var(--kgym-skin-edge);stroke-width:1;stroke-linejoin:round}
.sb-main path{fill:var(--lawha-accent);stroke:var(--lawha-accent);stroke-width:1;stroke-linejoin:round}
.sb-helper path{stroke:var(--lawha-accent);stroke-width:1.4;stroke-linejoin:round}
.sb-stripe-bg{fill:var(--kgym-help)}
.sb-stripe{fill:none;stroke:var(--lawha-accent);stroke-width:3}
.sb-details path{fill:none;stroke:var(--kgym-skin-edge);stroke-width:.8;stroke-linecap:round}
.sb-words{margin:var(--kgym-s1) 0 0;font-size:var(--kgym-t-body);color:var(--lawha-ink);text-align:center}
/* === end small-body === */
/* === exercise page (Task 29) === */
/* Addendum 2 §2.3 in the §1.3-1.4 look, on PR #16's classes and Task 12's tokens: one column of parts 12 px apart; the
   name in Georgia at the page-title size with Like at its end; each card on the surface with a 1 px line, 8 px corners
   and the card padding; the credit lines plain 13 px text. The video box, its frame and its fallbacks keep PR #16's rules
   above (accepted in Task 30). Start / end only (§1.7: ready for an Arabic page, which mirrors by itself). */
.exercise-page{display:grid;row-gap:var(--kgym-s3)} /* row-gap only: the website's two columns keep their own column gap */
.exercise-page>*{min-width:0;margin:0}
.exercise-media,.exercise-facts{display:grid;gap:var(--kgym-s3);min-width:0} /* the icons PR's two columns (proposal 2d); one column on the phone */
.exercise-page .page-back{justify-self:start}
.exercise-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kgym-s2)}
.exercise-page h1{min-width:0;margin:0;font:var(--kgym-t-page)/1.2 var(--lawha-display);overflow-wrap:anywhere}
.exercise-page .card{padding:var(--kgym-pad);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-surface)}
.exercise-page .card h2{margin:0 0 var(--kgym-s2);font:var(--kgym-t-card)/1.2 var(--lawha-display)}
.exercise-page .video-below{display:grid;gap:var(--kgym-s1)}
.exercise-page .video-below p,.photo-credit{margin:0;font-size:var(--kgym-t-small);line-height:1.5;color:var(--lawha-muted)}
.exercise-muscles .small-body{margin:0}
.exercise-steps ol{margin:0;padding-inline-start:var(--kgym-s5);display:grid;gap:var(--kgym-s1);font-size:var(--kgym-t-body)}
.history-times{list-style:none;margin:0;padding:0;display:grid;gap:var(--kgym-s1);font-size:var(--kgym-t-body)}
.history-best,.history-first{margin:var(--kgym-s2) 0 0;font-size:var(--kgym-t-body)}
.history-first{color:var(--lawha-muted)}
.exercise-thumb{flex:none;display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.card-title h2 .exercise-link{font:inherit;color:inherit;text-align:start;margin:0;padding:0;min-height:44px}
/* === end exercise page === */
/* === set-table (Task 17) === */
/* Addendum 2 §1.4: one line per set at 320 px — Set no. · Last time · weight box · reps box · ✓ (set-table.ts). Colours are
   tokens only, so light and dark both follow the theme; digits equal width; every box and button at least 44 x 44.
   These rules sit inside .set-table and so win over Task 8's flex .set-row rules above (lane 1 deletes those). The 6 px
   gap above 420 px is the spec's own number (§1.4), not a spacing step. */
.set-table{display:grid;gap:var(--kgym-s1);margin-block:var(--kgym-s2);font-variant-numeric:tabular-nums}
.set-table .set-head,.set-table .set-row{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(60px,74px) minmax(50px,56px) 44px;column-gap:6px;align-items:center}
.set-table.no-weight .set-head,.set-table.no-weight .set-row{grid-template-columns:24px minmax(0,1fr) minmax(50px,56px) 44px}
.set-table .set-head{margin:0;padding-inline:var(--kgym-s1);font-size:var(--kgym-t-small);color:var(--lawha-muted)}
.set-table .set-sep{display:none}
.set-table .no-box{margin:0;font-size:var(--kgym-t-body);color:var(--lawha-muted)}
.set-table .set-row{flex-wrap:nowrap;min-height:44px;margin:0;padding-inline:var(--kgym-s1);border-radius:var(--lawha-radius);font-size:var(--kgym-t-body);color:var(--lawha-ink)}
.set-table .set-no{text-align:center;color:var(--lawha-ink);font-weight:700}
.set-table .set-head span:nth-child(5),.set-table .set-head span:nth-child(7){text-align:center}
.set-table .last{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;color:var(--lawha-muted)}
.set-table .last-fill{display:block;width:100%;min-width:44px;min-height:44px;margin:0;padding:0 var(--kgym-s1);border:0;background:transparent;color:var(--lawha-ink);font:inherit;text-align:start;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.set-table .is-now .last-fill{color:var(--lawha-muted)}
.set-table .weight,.set-table .amount{text-align:center}
.set-table .set-box{box-sizing:border-box;width:100%;min-width:44px;height:44px;min-height:44px;margin:0;padding:0 var(--kgym-s1);border:var(--lawha-rule);border-radius:var(--lawha-radius);background:var(--lawha-paper);color:var(--lawha-ink);font-size:var(--kgym-t-input);font-variant-numeric:tabular-nums;text-align:center}
.set-table .tick{box-sizing:border-box;display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:1.5px solid var(--lawha-ink);border-radius:var(--lawha-radius);background:transparent;color:var(--lawha-ink);cursor:pointer}
.set-table .tick-mark{width:22px;height:22px}
.set-table .tick.is-filled{border-color:var(--kgym-met);background:var(--kgym-met);color:var(--lawha-surface)}
.set-table .tick:disabled{opacity:.45;cursor:default}
.set-table .tick-space{width:44px;height:44px}
.set-table .is-done{background:var(--kgym-done)}
.set-table .is-armed .undo-armed{color:var(--lawha-ink);font-weight:600}
.set-table .is-later{opacity:.7}
/* Pre-review P2-1/P2-2: muted on the done tint measures 4.41:1 (light), so these rows' cells are ink (ink on done 9.39 /
   9.94). Review 3 (2) amends Addendum 2's 62 %: rows still to come are at 70 %, the smallest opacity whose ink reaches
   4.5:1 in both themes (measured in Edge: 4.60 light / 6.79 dark; 69 % would be 4.47 light). */
.set-table .is-done .set-no,.set-table .is-done .last,.set-table .is-later .set-no,.set-table .is-later .last{color:var(--lawha-ink)}
.set-table .add-set{justify-self:start;min-width:44px;min-height:44px}
.exercise-card .same-as-last{margin-top:var(--kgym-s2)}
@media (max-width:420px){.set-table .set-head,.set-table .set-row{grid-template-columns:22px minmax(0,1fr) 62px 50px 44px;column-gap:var(--kgym-s1)}.set-table.no-weight .set-head,.set-table.no-weight .set-row{grid-template-columns:22px minmax(0,1fr) 50px 44px}}
/* === end set-table === */