/* Pixel-art theme. The palette is sampled from the owner's own pixel drawings
   (art/palette.txt holds the full sprite palette): the dark ground is the one
   they draw on, the accent blue is the jacket/jeans blue, green is the tree.
   Tiny5 is only for headings and buttons (chosen over Pixelify Sans, whose
   capital C closes up into an O). It has one weight -- never bold it.
   Numbers, inputs and the log textarea stay in Plex Mono, because this gets
   read in a gym under glare.
   Everything is square: hard 2px borders and a blur-free offset shadow. */
:root{
  --paper:#E9E6E1; --panel:#F5F3EF; --panel2:#FFFFFF;
  --ink:#1E1E1E; --ink2:#4F4A47; --rule:#B7B0A9; --rule2:#D8D3CD;
  --shade:#1E1E1E;
  --steel:#3D6190; --moss:#4A7A4E; --ochre:#8A5144; --signal:#A8323F;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1E1E1E; --panel:#27272B; --panel2:#2F2F35;
    --ink:#ECE6E0; --ink2:#A59E98; --rule:#44444D; --rule2:#34343B;
    --shade:#0E0E10;
    --steel:#7FA3D6; --moss:#86B684; --ochre:#CB917F; --signal:#E1737E;
  }
}
:root[data-theme="dark"]{
  --paper:#1E1E1E; --panel:#27272B; --panel2:#2F2F35;
  --ink:#ECE6E0; --ink2:#A59E98; --rule:#44444D; --rule2:#34343B;
  --shade:#0E0E10;
  --steel:#7FA3D6; --moss:#86B684; --ochre:#CB917F; --signal:#E1737E;
}
/* Style tokens: fonts, type, spacing, outlines. One value each, the same in
   light and dark. Kept out of the palette blocks above on purpose: tools/theme.py
   rewrites those, and pipeline/build_dashboard.py copies them into the
   dashboard, so these never reach the dashboard.
   Each token says its scope. "global" means every screen that uses the
   rule changes together; the screens are listed so a change can be aimed.
   No nested braces in this block. */
:root{
  /* -- fonts: the three families, then weight, case, letter spacing and line
     height. A family is a Google Fonts name plus a fixed fallback; Apply
     rewrites every page's font <link> to match. Weights are only ones the
     family ships (font-synthesis:none on body, so nothing is faked). -- */
  --disp:"Tiny5",ui-monospace,Menlo,monospace; /* global: page titles, headings, action buttons, Review progress count */
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif; /* global: body text, card copy, Review verdict buttons */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; /* global: numbers, inputs, labels, chips, the log textarea (read under gym glare) */
  --fw-disp:400;       /* global: every --disp heading and button (Tiny5 has one weight: never bold it) */
  --fw-strong:500;     /* global: emphasis in body and mono text: stat numbers, chip names, picked segment, bold words */
  --tt-title:uppercase;/* global: page titles, Home tile headings, question card heading, Workout exercise names */
  --tt-btn:uppercase;  /* global: big action buttons */
  --tt-label:uppercase;/* global: small mono labels: header sub, field labels, kinds, tags, stat labels, footer, back link */
  --ls-flat:0em;       /* global: page titles, Review progress count */
  --ls-head:.02em;     /* global: Home tile headings, question card heading, Claude's confidence note (Review) */
  --ls-pick:.04em;     /* global: segmented pickers (Log, Workout, Cues), Workout set buttons */
  --ls-btn:.05em;      /* global: big action buttons, Review nav */
  --ls-xs:.06em;       /* global: footer, chip labels, "Copied", Workout pain and notes summaries */
  --ls-s:.08em;        /* global: Home stat labels, question card details and verdict sublabels (Review) */
  --ls-progress:.09em; /* screen: review -- progress line */
  --ls-m:.1em;         /* global: back link, pending tile link (Home), facts, slice tags, h3 (Review), cue dates */
  --ls-label:.11em;    /* global: field labels (Log, Review), Workout mini labels */
  --ls-l:.12em;        /* global: header sub, card and question kinds, Review section heads, cue tags */
  --lh-title:.95;      /* global: page titles */
  --lh-stat:1;         /* screen: home -- stat numbers */
  --lh-head:1.1;       /* global: Home tile headings, Workout exercise names */
  --lh-qhead:1.15;     /* screen: review -- question card heading */
  --lh-tight:1.4;      /* global: Home stat labels, verdict buttons and Claude's recommendation (Review) */
  --lh-snug:1.5;       /* global: Home tile text, chips, cue text */
  --lh-body:1.55;      /* global: body text, inputs and textarea, card text, Review question and Claude's why */
  --lh-pre:1.6;        /* global: bird speech (Log), Workout Last/PR/Target/Cues block */
  --lh-hint:1.65;      /* global: hints under fields */
  --lh-loose:1.7;      /* global: notes, status box, template output */
  --lh-sub:1.8;        /* global: header sub line */
  --lh-foot:1.9;       /* global: footer */

  /* -- type: one token per size step, smallest first -- */
  --fs-micro:9.5px;    /* global: stat labels (Home), card/queue kind, facts, slice tags (Review), cue tags (Cues), pending pill */
  --fs-tiny:10px;      /* global: Review section heads, h3, small print; Workout mini labels */
  --fs-label:17px;   /* global: field labels (Log, Workout), Workout chip sublines, footer, cue dates */
  --fs-small:13px;     /* global: hints, notes, back link, header sub, Review progress/summary */
  --fs-data-s:11px;  /* global: Review facts/rows/pending, cue "was" */
  --fs-data:12px;      /* global: Workout chips, evidence, recognised list, Review nav/accept, Workout notes preview title */
  --fs-ui:12.5px;      /* global: segmented pickers (Log, Workout, Cues), status box, search results, template output */
  --fs-body-s:13.5px;  /* global: Home tile text, Claude's why (Review), Workout question card */
  --fs-input-s:16px;   /* global: compact inputs inside Log's check cards (16px minimum or iOS zooms on focus) */
  --fs-copy:14.5px;    /* global: card text, Review question and verdicts, cue text */
  --fs-input:16px;     /* global: text/date inputs and textarea (Log, Review); 16px minimum or iOS zooms on focus. Workout uses --fs-wk-input */
  --fs-lead:15.5px;    /* global: Claude's recommendation (Review) */
  --fs-base:16px;      /* global: body text everywhere; Workout add-exercise button */
  --fs-step:18px;      /* screen: workout -- the +/- step buttons */
  --fs-xl:20px;        /* global: action buttons, Home tile arrow, Workout exercise names */
  --fs-h-card:22px;    /* screen: review -- question card heading */
  --fs-h-tile:23px;    /* screen: home -- tile headings */
  --fs-stat:24px;      /* screen: home -- stat numbers */
  --fs-count:30px;     /* screen: review -- progress count */
  --fs-h1-min:30px;    /* global: smallest size of both page titles (they scale with screen width) */
  --fs-h1-max:50px;    /* screen: home -- largest size of the Home title */
  --fs-page-max:44px;  /* global: largest size of every sub-screen title (h1.page) */

  /* -- spacing: the layout-level gaps only; small one-off margins stay literal -- */
  --sp-gutter:8px;    /* global: left/right page margin */
  --sp-card-y:15px;    /* global: top/bottom padding of cards (Log, Cues, Workout), Home tiles, template output */
  --sp-card-x:25px;    /* global: side padding of cards, Home tiles, status box, template output */
  --sp-stack:18px;     /* global: gap above each card (Log, Cues), between Home tiles */
  --sp-field:11px;     /* global: space above each form field, the status box (every sub-screen) and Log's bird stage */
  --sp-label:0px;      /* global: space under a field label */
  --sp-input-y:0px;   /* global: top/bottom padding inside text/date inputs and textarea */
  --sp-input-x:14px;   /* global: side padding inside text/date inputs and textarea */
  --sp-btn:9px;       /* global: padding inside the big action buttons */
  --sp-btn-gap:16px;   /* global: space above the big action buttons */
  --sp-chip-y:13px;     /* global: chip top/bottom padding (Workout) */
  --sp-chip-x:10px;    /* global: chip side padding (Workout) */
  --sp-qcard-y:16px;   /* screen: review -- question card top/bottom padding */
  --sp-qcard-x:20px;   /* screen: review -- question card side padding */
  --sp-qcard-gap:12px; /* screen: review -- space above each question card */
  --sp-wk-y:12px;      /* screen: workout -- exercise card top/bottom padding */
  --sp-wk-x:10px;      /* screen: workout -- exercise card side padding */
  --sp-wk-gap:8px;    /* screen: workout -- gap between blocks inside an exercise card */
  --sp-wk-stack:17px;  /* screen: workout -- space above each exercise card */

  /* -- outlines: border weights and the hard offset shadow -- */
  --bw-hair:1px;       /* global: faint dividers and list grids */
  --bw:2px;            /* global: every standard box border (Workout uses --bw-wk instead); also the ink divider lines inside stats and segmented pickers */
  --bw-mid:3px;        /* screen: cues -- cue card left edge */
  --bw-thick:4px;      /* global: header floor (all screens), Log bird-stage floor, Review group left edge */
  --bw-accent:6px;     /* global: coloured left edge on cards, question cards, status box, Claude's box */
  --shadow:4px;        /* global: offset of the hard shadow under cards, tiles, buttons */
  --shadow-press:2px;  /* global: offset while pressed; the box moves by the difference so it sits into its shadow */

  /* -- Today's workout (body.wk-page), from the workout-formatting change.
     Scoped: only Today's workout reads these, so Log and the rest keep their
     own sizes. Inputs stay 16px+ or iOS zooms on focus. -- */
  --bw-wk:1.5px;        /* screen: workout -- every outline on the page, incl. chips, pickers, inputs */
  --shadow-wk:2px;      /* screen: workout -- raised offset under tap targets; pressed moves by the same */
  --fs-wk-chip:14px;    /* screen: workout -- recent-day chips */
  --fs-wk-chip-sub:12px;/* screen: workout -- chip subline */
  --fs-wk-tag:14px;     /* screen: workout -- set buttons (Warm/Set N, clean/barely/failed, L/R) */
  --fs-wk-effort:13px;  /* screen: workout -- effort picker */
  --fs-wk-num:19px;     /* screen: workout -- weight/reps boxes */
  --fs-wk-ctx:13px;     /* screen: workout -- Last/PR/Target/Cues block */
  --fs-wk-raw:12.5px;   /* screen: workout -- raw set text */
  --fs-wk-input:16px;   /* screen: workout -- text inputs, selects, set note (16px minimum) */
  --fs-wk-fold:15px;    /* screen: workout -- Pain/Setup/Cue/Other fold-out titles, folded-card set count */
}
/* Page overrides: one page's own value for a style token or colour, used on
   that page instead of the value above. Pages are named by data-page on each
   <body>. Written by the theme lab's "Applies to: Selected" picker through
   tools/overrides.py; edit them there, not by hand (the lab refuses a block
   it didn't write). Colours come per mode, each mode twice (system setting,
   then the data-theme toggle), and the two copies stay identical. Kept out
   of the palette blocks, so the dashboard never sees them. */
/* End of page overrides. */

*{box-sizing:border-box}
/* No double-tap zoom on controls: tapping + twice would zoom the page in iOS.
   Pinch-zoom still works. */
a,button,input,select,textarea,.chip,summary{touch-action:manipulation}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:var(--fs-base);line-height:var(--lh-body);-webkit-text-size-adjust:100%;
  font-synthesis:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
/* Bare <b>/<strong> would ask for 700, which no family here loads. */
b,strong{font-weight:var(--fw-strong)}
.wrap{max-width:640px;margin:0 auto;padding:0 var(--sp-gutter) 56px}

/* The header's bottom border is the floor the sprite scene stands on.
   Every sprite here shows at a whole number of CSS px per art px (1x, 2x),
   never a fluid or fractional size: below that, art pixels get dropped. */
header{padding:34px 0 0;border-bottom:var(--bw-thick) solid var(--ink);display:flex;
  align-items:flex-end;justify-content:space-between;gap:12px;position:relative}
/* Home's top-right Sign in, for a signed-out visitor on the public app. */
.signin-link{position:absolute;top:8px;right:0;font-size:var(--fs-data);z-index:1}
.signin-link[hidden]{display:none}
header .words{padding-bottom:18px;min-width:0}
h1{font-family:var(--disp);font-weight:var(--fw-disp);text-transform:var(--tt-title);
  font-size:clamp(var(--fs-h1-min),9.5vw,var(--fs-h1-max));line-height:var(--lh-title);letter-spacing:var(--ls-flat);margin:0}
.cal-btn{display:block;flex:0 0 auto;margin-bottom:14px}
.cal-btn svg{display:block}
.scene{display:block;flex:0 0 auto;height:auto;width:auto;
  image-rendering:pixelated;margin-bottom:0}
/* Home: the owner on a treadmill. run_strip.svg is 8 frames of 64x70 art px
   side by side (the owner's run-cycle GIF, 100 ms a frame), shown at exactly
   2 CSS px per art px and stepped by background-position. Reduced motion
   gets frame 1 as a still. */
.runner{width:128px;height:140px;background:url(/sprites/run_strip.svg) 0 0/1024px 140px no-repeat;
  image-rendering:pixelated}
@media (prefers-reduced-motion:no-preference){
  .runner{animation:run .8s steps(8) infinite}
  @keyframes run{to{background-position:-1024px 0}}
}
.sprite{image-rendering:pixelated;display:block}
.sub{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:var(--ls-l);
  text-transform:var(--tt-label);color:var(--ink2);margin-top:12px;line-height:var(--lh-sub)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--bw);
  background:var(--ink);border:var(--bw) solid var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--shade);
  margin:22px 0 10px}
.stat{background:var(--panel);padding:11px 12px}
.stat b{display:block;font-family:var(--mono);font-weight:var(--fw-strong);font-size:var(--fs-stat);
  line-height:var(--lh-stat);font-variant-numeric:tabular-nums}
.stat span{display:block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--ls-s);
  text-transform:var(--tt-label);color:var(--ink2);margin-top:6px;line-height:var(--lh-tight)}
.stat.flagged b{color:var(--signal)}

.note{font-family:var(--mono);font-size:var(--fs-small);color:var(--ink2);line-height:var(--lh-loose);margin:10px 0 0}

nav{display:flex;flex-direction:column;gap:var(--sp-stack);margin-top:26px}
.tile{background:var(--panel);padding:var(--sp-card-y) var(--sp-card-x);display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  text-decoration:none;color:inherit;border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow) var(--shadow) 0 var(--shade)}
a.tile:active{background:var(--panel2);transform:translate(calc(var(--shadow) - var(--shadow-press)),calc(var(--shadow) - var(--shadow-press)));
  box-shadow:var(--shadow-press) var(--shadow-press) 0 var(--shade)}
.tile .sprite{width:32px;height:32px}
.tile h2{font-family:var(--disp);font-weight:var(--fw-disp);text-transform:var(--tt-title);
  font-size:var(--fs-h-tile);letter-spacing:var(--ls-head);margin:0 0 2px;line-height:var(--lh-head)}
.tile p{margin:0;font-size:var(--fs-body-s);color:var(--ink2);line-height:var(--lh-snug)}
.tile .go{font-family:var(--mono);font-size:var(--fs-xl);color:var(--steel)}
.tile.pending{opacity:.62}
.tile.pending .go{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--ls-m);
  text-transform:var(--tt-label);color:var(--ink2);border:var(--bw-hair) solid var(--rule2);
  padding:4px 7px;white-space:nowrap}

footer{margin-top:30px;padding-top:16px;border-top:var(--bw) solid var(--rule);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-xs);color:var(--ink2);
  line-height:var(--lh-foot);text-transform:var(--tt-label)}
/* The build line keeps its case so the commit matches GitHub's lowercase id. */
#build{text-transform:none}
a{color:var(--steel)}
a:focus-visible,.tile:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* -- shared page furniture (log / template / review screens) -- */
.back{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:var(--ls-m);text-transform:var(--tt-label);
  color:var(--ink2);text-decoration:none;display:inline-block;margin:22px 0 0}
.back:hover{color:var(--steel)}
h1.page{font-size:clamp(var(--fs-h1-min),9vw,var(--fs-page-max))}

.field{margin-top:var(--sp-field)}
.field label,.field .lbl{display:block;font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:var(--tt-label);color:var(--ink2);margin-bottom:var(--sp-label)}
input[type=text],input[type=date],textarea{width:100%;font-family:var(--mono);font-size:var(--fs-input);
  background:var(--panel2);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:0;
  padding:var(--sp-input-y) var(--sp-input-x);line-height:var(--lh-body);-webkit-appearance:none}
textarea{min-height:250px;resize:vertical;white-space:pre;overflow-wrap:normal;overflow-x:auto}
input:focus-visible,textarea:focus-visible,button:focus-visible,.seg button:focus-visible{
  outline:2px solid var(--signal);outline-offset:1px}

.seg{display:flex;gap:var(--bw);background:var(--ink);border:var(--bw) solid var(--ink)}
.seg button{flex:1;background:var(--panel);color:var(--ink2);border:0;padding:12px 8px;
  font-family:var(--mono);font-size:var(--fs-ui);cursor:pointer;letter-spacing:var(--ls-pick)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper);font-weight:var(--fw-strong)}

button.act{width:100%;margin-top:var(--sp-btn-gap);padding:var(--sp-btn);border:var(--bw) solid var(--ink);
  background:var(--ink);color:var(--paper);font-family:var(--disp);font-weight:var(--fw-disp);
  font-size:var(--fs-xl);text-transform:var(--tt-btn);letter-spacing:var(--ls-btn);cursor:pointer;
  border-radius:0;box-shadow:var(--shadow) var(--shadow) 0 var(--steel)}
button.act:active:not(:disabled){transform:translate(calc(var(--shadow) - var(--shadow-press)),calc(var(--shadow) - var(--shadow-press)));box-shadow:var(--shadow-press) var(--shadow-press) 0 var(--steel)}
button.act.ghost{background:var(--panel);color:var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--shade)}
button.act.ghost:active:not(:disabled){box-shadow:var(--shadow-press) var(--shadow-press) 0 var(--shade)}
button.act:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.row{display:flex;gap:10px}
.row button.act{margin-top:0}

.hint{font-family:var(--mono);font-size:var(--fs-small);color:var(--ink2);line-height:var(--lh-hint);margin:8px 0 0}
.hint.warn{color:var(--signal)}

.card{background:var(--panel);border:var(--bw) solid var(--ink);border-left:var(--bw-accent) solid var(--rule);
  padding:var(--sp-card-y) var(--sp-card-x);margin-top:var(--sp-stack);box-shadow:var(--shadow) var(--shadow) 0 var(--shade)}
.card.high{border-left-color:var(--signal)}
.card.low{border-left-color:var(--ochre)}
.card.info{border-left-color:var(--steel)}
.card .kind{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--ls-l);text-transform:var(--tt-label);
  color:var(--ink2);margin-bottom:6px}
.card p{margin:0 0 9px;font-size:var(--fs-copy);line-height:var(--lh-body)}
.card .ev{font-family:var(--mono);font-size:var(--fs-data);color:var(--ink2);background:var(--panel2);
  border:var(--bw-hair) solid var(--rule2);padding:7px 9px;margin:0 0 10px;overflow-x:auto;white-space:pre}
.card input[type=text]{font-size:var(--fs-input-s);padding:9px 10px}
.card.answered{border-left-color:var(--moss);opacity:.72}

.recog{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:var(--bw-hair) solid var(--rule);
  margin-top:12px}
.recog div{background:var(--panel);padding:9px 12px;display:flex;justify-content:space-between;
  gap:12px;font-family:var(--mono);font-size:var(--fs-data);align-items:baseline}
.recog b{font-weight:var(--fw-strong);color:var(--ink)}
.recog span{color:var(--ink2);white-space:nowrap}
.recog div.unsure b{color:var(--signal)}

.status{margin-top:var(--sp-field);padding:13px var(--sp-card-x);border:var(--bw) solid var(--ink);background:var(--panel);
  font-family:var(--mono);font-size:var(--fs-ui);line-height:var(--lh-loose);box-shadow:var(--shadow) var(--shadow) 0 var(--shade)}
.status.ok{border-left:var(--bw-accent) solid var(--moss)}
.status.ok::before{content:"";float:left;width:34px;height:34px;margin:0 12px 4px 0;
  background:url(/sprites/dumbbell_end.svg) center/34px no-repeat;image-rendering:pixelated}
.status.bad{border-left:var(--bw-accent) solid var(--signal)}
.status a{color:var(--steel)}
/* Loading: the owner's bouncing basketball (ball_strip.svg, 13 frames of
   128x96 art px, 70 ms a frame -- the GIF's timing), on its own little court
   above the status text so the whole arc fits. Shown at 1x: the art has
   single-pixel detail, so half size dropped pixels. Reduced motion holds
   frame 6, the ball on the floor. */
.spin{display:block;width:128px;height:96px;margin:0 0 6px;border-bottom:var(--bw) solid var(--rule);
  background:url(/sprites/ball_strip.svg) -640px 0/1664px 96px no-repeat;image-rendering:pixelated}
@media (prefers-reduced-motion:no-preference){
  .spin{animation:bounce .91s steps(13) infinite}
  @keyframes bounce{from{background-position:0 0}to{background-position:-1664px 0}}
}

/* -- template screen -- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;margin-top:8px;
  scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--panel);border:var(--bw) solid var(--ink);padding:var(--sp-chip-y) var(--sp-chip-x);
  font-family:var(--mono);font-size:var(--fs-data);color:var(--ink);cursor:pointer;text-align:left;
  line-height:var(--lh-snug);border-radius:0}
.chip b{display:block;font-weight:var(--fw-strong)}
.chip span{color:var(--ink2);font-size:var(--fs-label);letter-spacing:var(--ls-xs);text-transform:var(--tt-label)}
/* Today's Workout: "Start from my template" checklist */
.wk-mine{margin-top:8px;border:var(--bw) solid var(--ink);background:var(--panel)}
.wk-mine label{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:var(--bw) solid var(--rule);
  font-size:var(--fs-copy);cursor:pointer}
.wk-mine label:first-child{border-top:0}
.wk-mine label span{flex:1}
.wk-mine label em{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink2);font-style:normal}
.wk-mine input{width:20px;height:20px;margin:0;accent-color:var(--ink)}
.wk-mine + .row{margin-top:var(--sp-btn-gap)}
.chip:hover,.chip:focus-visible{border-color:var(--steel)}

.picker{position:relative;margin-top:10px}
.results{display:flex;flex-direction:column;gap:1px;background:var(--rule);
  border:var(--bw-hair) solid var(--rule);margin-top:8px;max-height:230px;overflow-y:auto}
.results:empty{display:none}
.results button{background:var(--panel);border:0;text-align:left;padding:10px 12px;
  font-family:var(--mono);font-size:var(--fs-ui);color:var(--ink);cursor:pointer;
  display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.results button:hover,.results button:focus-visible{background:var(--panel2)}
.results button em{font-style:normal;color:var(--ink2);font-size:var(--fs-small);white-space:nowrap}

/* Wrapped for reading on a phone, not for copying: the copy button writes the
   original string from JS, so the pasted note keeps its real line breaks. */
pre.out{font-family:var(--mono);font-size:var(--fs-ui);line-height:var(--lh-loose);background:var(--panel2);
  border:var(--bw) solid var(--ink);padding:var(--sp-card-y) var(--sp-card-x);margin:14px 0 0;
  white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);
  -webkit-user-select:all;user-select:all}
.copied{font-family:var(--mono);font-size:var(--fs-small);color:var(--moss);margin-top:8px;
  letter-spacing:var(--ls-xs);text-transform:var(--tt-label)}

/* -- review screen -- */
.progress{display:flex;align-items:baseline;gap:12px;margin-top:16px;
  font-family:var(--mono);font-size:var(--fs-small);letter-spacing:var(--ls-progress);text-transform:var(--tt-label);
  color:var(--ink2)}
.progress b{font-family:var(--disp);font-weight:var(--fw-disp);font-size:var(--fs-count);letter-spacing:var(--ls-flat);color:var(--ink);
  text-transform:none;font-variant-numeric:tabular-nums}
.bar{height:10px;background:var(--panel2);border:var(--bw) solid var(--ink);margin-top:10px}
.bar i{display:block;height:100%;background:var(--moss)}

.qcard{background:var(--panel);border:var(--bw) solid var(--ink);border-left:var(--bw-accent) solid var(--rule);
  padding:var(--sp-qcard-y) var(--sp-qcard-x);margin-top:var(--sp-qcard-gap);box-shadow:var(--shadow) var(--shadow) 0 var(--shade)}
.qcard.p1{border-left-color:var(--signal)}
.qcard.p2{border-left-color:var(--ochre)}
.qcard.p3,.qcard.p4{border-left-color:var(--steel)}
.qcard .kind{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--ls-l);
  text-transform:var(--tt-label);color:var(--ink2);display:flex;justify-content:space-between;gap:10px}
.qcard h2{font-family:var(--disp);font-weight:var(--fw-disp);text-transform:var(--tt-title);font-size:var(--fs-h-card);letter-spacing:var(--ls-head);
  margin:8px 0 4px;line-height:var(--lh-qhead);overflow-wrap:anywhere}
.qcard .ask{margin:0 0 12px;font-size:var(--fs-copy);color:var(--ink2);line-height:var(--lh-body)}
.facts{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:var(--bw-hair) solid var(--rule);
  margin:0 0 12px}
.facts div{background:var(--panel2);padding:7px 10px;font-family:var(--mono);font-size:var(--fs-data-s);
  flex:1 1 auto}
.facts span{display:block;color:var(--ink2);font-size:var(--fs-micro);letter-spacing:var(--ls-m);
  text-transform:var(--tt-label);margin-bottom:3px}
.qcard details{margin:0 0 12px}
.qcard summary{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:var(--ls-s);
  text-transform:var(--tt-label);color:var(--steel);cursor:pointer;padding:4px 0}
.qcard details .ev{margin-top:8px}

.verdicts{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.verdicts button{background:var(--panel2);border:var(--bw) solid var(--rule);color:var(--ink);
  font-family:var(--body);font-size:var(--fs-copy);text-align:left;padding:12px 13px;cursor:pointer;
  border-radius:0;line-height:var(--lh-tight)}
.verdicts button:hover,.verdicts button:focus-visible{border-color:var(--steel)}

.qnav{display:flex;gap:10px;margin-top:14px}
.qnav button{flex:1;background:transparent;border:var(--bw) solid var(--rule);color:var(--ink2);
  font-family:var(--mono);font-size:var(--fs-data);padding:11px 8px;cursor:pointer;border-radius:0;
  letter-spacing:var(--ls-btn)}
.qnav button:disabled{opacity:.35;cursor:not-allowed}

.pending{display:flex;flex-direction:column;gap:1px;background:var(--rule);
  border:var(--bw-hair) solid var(--rule);margin-top:8px;max-height:280px;overflow-y:auto}
.pending button{background:var(--panel);padding:9px 12px;font-family:var(--mono);font-size:var(--fs-data-s);
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;border:0;
  border-radius:0;color:var(--ink);text-align:left;cursor:pointer;width:100%}
.pending button:hover,.pending button:focus-visible{background:var(--panel2);outline:2px solid var(--steel);
  outline-offset:-2px}
.pending b{font-weight:var(--fw-strong);color:var(--moss);white-space:nowrap}
.pending em{font-style:normal;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

/* The card's sections: Claude's recommendation, the evidence, your answer.
 * Each is boxed and labelled so the machine's opinion never reads as data. */
.slice{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.slice span{font-family:var(--mono);font-size:var(--fs-data-s);background:var(--panel2);
  border:var(--bw-hair) solid var(--rule);padding:4px 8px}
.slice i{font-style:normal;color:var(--ink2);font-size:var(--fs-micro);letter-spacing:var(--ls-m);
  text-transform:var(--tt-label);margin-right:6px}
.qcard section{border:var(--bw) solid var(--rule);background:var(--panel2);padding:12px 13px;margin:0 0 12px}
.shead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;margin-bottom:8px;
  font-family:var(--mono);font-size:var(--fs-tiny);letter-spacing:var(--ls-l);text-transform:var(--tt-label)}
.shead span{color:var(--ink);font-weight:var(--fw-strong)}
.shead em{font-style:normal;color:var(--ink2);text-transform:none;letter-spacing:var(--ls-head);
  overflow-wrap:anywhere}
.qcard h3{font-family:var(--mono);font-weight:var(--fw-strong);font-size:var(--fs-tiny);letter-spacing:var(--ls-m);
  text-transform:var(--tt-label);color:var(--ink2);margin:12px 0 6px}
.qcard section h3:first-of-type{margin-top:0}

.claude{border-color:var(--steel)!important;border-left-width:var(--bw-accent)!important}
.claude .shead span{color:var(--steel)}
.claude.band-high .shead em{color:var(--moss)}
.claude.band-medium .shead em{color:var(--ochre)}
.claude.band-low .shead em{color:var(--signal)}
.claude .rec{margin:0 0 8px;font-size:var(--fs-lead);line-height:var(--lh-tight);color:var(--ink)}
.claude .why{margin:10px 0 8px;font-size:var(--fs-body-s);line-height:var(--lh-body);color:var(--ink)}
.meter{height:8px;background:var(--panel);border:var(--bw-hair) solid var(--rule)}
.meter i{display:block;height:100%;background:var(--rule)}
.claude.band-high .meter i{background:var(--moss)}
.claude.band-medium .meter i{background:var(--ochre)}
.claude.band-low .meter i{background:var(--signal)}
.claude .hint{font-size:var(--fs-data)}
.accept,.clear{width:100%;margin-top:6px;background:transparent;border:var(--bw) solid var(--steel);
  color:var(--steel);font-family:var(--mono);font-size:var(--fs-data);padding:10px 8px;cursor:pointer;
  border-radius:0;text-align:left;overflow-wrap:anywhere}
.clear{border-color:var(--rule);color:var(--ink2);margin-top:8px}

.groups{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.group{border:var(--bw-hair) solid var(--rule);border-left:var(--bw-thick) solid var(--ochre);background:var(--panel);
  padding:9px 10px}
.ghead{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.ghead b{font-weight:var(--fw-strong);font-size:var(--fs-copy)}
.ghead span,.gdates{font-family:var(--mono);font-size:var(--fs-data-s);color:var(--ink2)}
.gyms{list-style:none;margin:6px 0;padding:0;font-family:var(--mono);font-size:var(--fs-small)}
.gyms li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;padding:4px 0;
  border-top:var(--bw-hair) solid var(--rule2)}
.gyms b{font-weight:var(--fw-strong)}
.gyms span{color:var(--ink2)}
.gyms small{flex-basis:100%;color:var(--ink2);font-size:var(--fs-tiny)}
.gnames{font-size:var(--fs-data);color:var(--ink2);margin:4px 0;overflow-wrap:anywhere}
.gnames q{color:var(--ink)}
.gsamples div{font-family:var(--mono);font-size:var(--fs-small);padding:3px 0;overflow-wrap:anywhere}
.gsamples span{display:block;color:var(--ink2);font-size:var(--fs-tiny)}

.rows{width:100%;border-collapse:collapse;margin:0 0 6px;font-family:var(--mono);font-size:var(--fs-data-s)}
.rows td{padding:5px 6px;vertical-align:top;border-top:var(--bw-hair) solid var(--rule2)}
.rows tr:first-child td{border-top:0}
.rows td:first-child:not(.raw){white-space:nowrap;color:var(--ink2)}
.rows td.w{text-align:right;font-weight:var(--fw-strong);white-space:nowrap}
.rows td.raw{overflow-wrap:anywhere;width:100%}
.rows small{font-size:var(--fs-tiny)}
.rows tr.this td{background:var(--panel2)}
.ctx-header{font-family:var(--mono);font-size:var(--fs-data);margin:0 0 6px;overflow-wrap:anywhere}
.ctx-cues{margin:0 0 10px;padding-left:18px;font-size:var(--fs-data);overflow-wrap:anywhere}
.ctx-cues small{color:var(--ink2);font-size:var(--fs-tiny)}
.evidence mark{background:none;color:var(--signal);font-weight:var(--fw-strong);text-decoration:underline}

.yours .verdicts button.picked{border-color:var(--steel)}
.verdicts button small{display:block;font-family:var(--mono);font-size:var(--fs-tiny);letter-spacing:var(--ls-s);
  text-transform:var(--tt-label);color:var(--steel);margin-top:3px}
.yours input{width:100%;box-sizing:border-box}

/* -- cues screen -- */
.muted{color:var(--ink2)}
.cuelog{list-style:none;margin:10px 0 0;padding:0;border-left:var(--bw) solid var(--rule)}
.cuelog li{padding:0 0 16px 14px;position:relative}
.cuelog li::before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;
  background:var(--paper);border:var(--bw) solid var(--rule)}
.cuelog .when{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-m);
  text-transform:var(--tt-label);color:var(--ink2);margin-bottom:6px}
.cue{background:var(--panel);border:var(--bw-hair) solid var(--rule2);border-left:var(--bw-mid) solid var(--rule);
  padding:8px 11px;margin-top:6px;overflow-wrap:anywhere}
.cue.setup{border-left-color:var(--steel)}
.cue.template{border-left-color:var(--ochre)}
.cue.changed{border-left-color:var(--signal)}
.cue .tag{display:block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--ls-l);
  text-transform:var(--tt-label);color:var(--ink2);margin-bottom:3px}
.cue.changed .tag{color:var(--signal)}
.cue .txt{display:block;font-size:var(--fs-copy);line-height:var(--lh-snug)}
.cue .was{display:block;font-family:var(--mono);font-size:var(--fs-data-s);color:var(--ink2);
  margin-top:4px;text-decoration:line-through}

/* -- the gym duck, the crow, and Jimmy (app/duck.js) --
   duck_strip.svg: 29 frames of 42x72, idle 0-19, ask 20-23, alarm 24-27, blink 28.
   crow_strip.svg: the same layout without the alarm frames.
   Shown 1:1. Reduced motion holds the first frame of each mood. */
.bird{display:block;width:42px;height:72px;background:url(/sprites/duck_strip.svg) 0 0/1218px 72px no-repeat;
  image-rendering:pixelated;flex:0 0 auto}
.bird.crow{background-image:url(/sprites/crow_strip.svg);background-size:1008px 72px}
.bird[data-mood=ask]{background-position:-840px 0}
.bird[data-mood=alarm]{background-position:-1008px 0}
@media (prefers-reduced-motion:no-preference){
  .bird[data-mood=idle]{animation:bird-idle 2s steps(20) infinite}
  .bird[data-mood=ask]{animation:bird-ask .4s steps(4) infinite}
  .bird[data-mood=alarm]{animation:bird-alarm .4s steps(4) infinite}
  @keyframes bird-idle{from{background-position:0 0}to{background-position:-840px 0}}
  @keyframes bird-ask{from{background-position:-840px 0}to{background-position:-1008px 0}}
  @keyframes bird-alarm{from{background-position:-1008px 0}to{background-position:-1176px 0}}
}

/* Home: the duck stands on the floor at the back of the treadmill. */
.stage{position:relative;display:block;width:158px;height:140px;padding:0;margin:0;border:0;
  background:none;cursor:pointer;flex:0 0 auto;-webkit-tap-highlight-color:transparent}
.stage .runner{position:absolute;left:30px;bottom:0;display:block}
.stage .bird{position:absolute;left:0;bottom:0}
/* Idle on Home: the duck faces away from the treadmill, small eyes, blinks, and every
   5 s turns to look at the runner with its eyes wide for 1 s.
   Strip frames: 4 left small eyes, 28 blink, 16 right wide eyes. */
.stage .bird[data-mood=idle]{background-position:-168px 0}
@media (prefers-reduced-motion:no-preference){
  .stage .bird[data-mood=idle]{animation:duck-watch 5s step-end infinite}
  @keyframes duck-watch{
    0%{background-position:-168px 0}
    30%{background-position:-1176px 0}
    33%{background-position:-168px 0}
    62%{background-position:-1176px 0}
    65%{background-position:-168px 0}
    80%,100%{background-position:-672px 0}
  }
}
.stage:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
/* The dropped dumbbell: 31x17 art px at 1x. Each leg of the fall steps in
   whole px (steps() per keyframe, sized to that leg's distance), so it never
   sits between pixels. */
.drop{position:absolute;width:31px;height:17px;background:url(/sprites/dumbbell.svg) 0 0/31px 17px no-repeat;
  image-rendering:pixelated;left:115px;top:66px;animation:drop 1.1s forwards;z-index:2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .drop{filter:brightness(1.9)}}
:root[data-theme="dark"] .drop{filter:brightness(1.9)}
@keyframes drop{
  0%{left:115px;top:66px;animation-timing-function:steps(43)}
  15%{left:115px;top:109px;animation-timing-function:steps(28)}
  60%{left:59px;top:109px;animation-timing-function:steps(14)}
  68%{left:45px;top:123px;animation-timing-function:steps(7)}
  74%{left:45px;top:116px;animation-timing-function:steps(7)}
  80%,100%{left:45px;top:123px}
}

/* Review: the duck stands beside the owner in the header scene. */
.scenebox{position:relative;display:flex;align-items:flex-end;gap:4px;flex:0 0 auto}

/* Log: the birds' stage at the top of the check results. A white page like
   the owner's own drawings, in both themes -- the crow is black. */
.birds{margin-top:var(--sp-field);background:#FFFFFF;color:#1E1E1E;border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow) var(--shadow) 0 var(--shade);padding:12px 14px 0}
.birds .said p{font-family:var(--mono);font-size:var(--fs-ui);line-height:var(--lh-pre);margin:0 0 6px}
.birds .said b{font-weight:var(--fw-strong);color:#C62828;text-shadow:-1px 0 #1E40AF}
.birds .crowline{color:#4F4A47}
.birds .floor{display:flex;align-items:flex-end;gap:10px;border-bottom:var(--bw-thick) solid #8F563B;
  margin:0 -14px;padding:0 14px}
.birds .jimmy{width:32px;height:112px;image-rendering:pixelated;margin-left:auto}

/* Review, queue cleared: the owner's "me and the boys" GIF (app/duck.js). */
.boys{display:block;margin-top:14px;border:var(--bw) solid var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--shade);
  background:#FFFFFF}
/* At 1x always (500x300 art with single-pixel detail): a phone shows the
   middle and crops the sides. The offset is rounded to whole px. */
.boys{overflow:hidden}
.boys img{display:block;width:100%;max-width:500px;height:300px;margin:0 auto;
  object-fit:none;object-position:50% 0;object-position:round(down,50%,1px) 0;image-rendering:pixelated}

/* ---- Today's Workout screen (todays-workout.html): one square card per exercise, one row
   per set. Every number box is Plex Mono at 16px+ (no iOS zoom) and wide
   enough for "182.5"; the row wraps rather than scrolls at phone width. ---- */
.wk-head{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wk-head .field{min-width:0}
#gym-other{margin-top:8px}
.wk-ex{background:var(--panel);border:var(--bw-wk) solid var(--ink);box-shadow:var(--shadow) var(--shadow) 0 var(--shade);
  padding:var(--sp-wk-y) var(--sp-wk-x);margin-top:var(--sp-wk-stack);display:flex;flex-direction:column;gap:var(--sp-wk-gap);min-width:0}
.wk-ex-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.wk-rail{display:none}
.wk-ex h2{font-family:var(--disp);font-weight:var(--fw-disp);text-transform:var(--tt-title);font-size:var(--fs-xl);
  line-height:var(--lh-head);margin:0;min-width:0;overflow-wrap:anywhere}
.wk-mini{display:block;font-family:var(--mono);font-size:var(--fs-tiny);letter-spacing:var(--ls-label);
  text-transform:var(--tt-label);color:var(--ink2);margin:0 0 5px}
.wk-ex select{width:100%;font-family:var(--mono);font-size:var(--fs-wk-input);background:var(--panel2);
  color:var(--ink);border:var(--bw-wk) solid var(--ink);border-radius:0;padding:10px;-webkit-appearance:none}
.wk-ex input[type=text]{font-size:var(--fs-wk-input);padding:9px 10px}
.wk-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wk-two>div{min-width:0}
pre.wk-ctx{margin:0;font-family:var(--mono);font-size:var(--fs-wk-ctx);line-height:var(--lh-pre);color:var(--ink2);
  background:var(--panel2);border:var(--bw-hair) solid var(--rule2);padding:8px 10px;
  white-space:pre-wrap;overflow-wrap:anywhere}
pre.wk-ctx b{font-weight:var(--fw-strong);color:var(--ink)}
.wk-sets{display:flex;flex-direction:column;gap:8px}
.wk-set{border:var(--bw-wk) solid var(--rule);background:var(--paper);padding:6px;display:flex;
  flex-direction:column;gap:7px}
.wk-set.warm{border-style:dashed}
.wk-setline{display:grid;grid-template-columns:auto minmax(0,1.2fr) auto minmax(0,1fr);
  gap:5px;align-items:center}
.wk-setopts{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto auto;gap:5px;align-items:center}
.wk-wide{grid-column:span 1}
/* Phone: five option buttons don't fit beside the effort picker, so it takes
   its own line and L/R, L/R wt, copy, note and delete share the next. */
@media (max-width:480px){
  .wk-setopts{display:flex;flex-wrap:wrap}
  .wk-setopts .wk-effort{flex:1 1 100%}
  .wk-setopts [data-act=copy-set]{margin-left:auto}
}
.wk-reps{display:flex;gap:4px;min-width:0}
.wk-num{width:100%;min-width:0;font-family:var(--mono);font-size:var(--fs-wk-num);font-variant-numeric:tabular-nums;
  background:var(--panel2);color:var(--ink);border:var(--bw-wk) solid var(--ink);border-radius:0;
  padding:8px 2px;text-align:center;-webkit-appearance:none;-moz-appearance:textfield}
.wk-num::-webkit-inner-spin-button,.wk-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.wk-num::placeholder{color:var(--rule)}
.wk-x{font-family:var(--mono);color:var(--ink2)}
.wk-tag,.wk-step{font-family:var(--mono);font-size:var(--fs-wk-tag);letter-spacing:var(--ls-pick);
  background:var(--panel);color:var(--ink);border:var(--bw-wk) solid var(--ink);border-radius:0;
  padding:8px 7px;cursor:pointer;min-height:40px}
.wk-step{width:36px;font-size:var(--fs-step);padding:0}
.wk-tag[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.wk-setline .wk-tag:first-child{min-width:3.9em;padding:8px 4px}
.wk-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;padding:0}
.wk-trash{margin-left:10px}
.wk-effort button{padding:9px 3px;font-size:var(--fs-wk-effort)}
.wk-note{font-size:var(--fs-wk-input)!important}
.wk-raw{font-family:var(--mono);font-size:var(--fs-wk-raw);color:var(--ink2)}
.wk-raw:empty{display:none}
/* Today's Workout redesign (2026-10-22): unit inside the weight box, typed
   entry only; the info block as rows; dates in monospace everywhere. */
.wk-wbox{position:relative;display:block;flex:1 1 0;min-width:0}
.wk-wbox .wk-num{padding-right:2.4em}
.wk-unit{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:12px;
  color:var(--ink2);pointer-events:none}
.wk-date{font-family:var(--mono);font-size:.9em}
.wk-variant{color:var(--ink2);font-size:.7em;white-space:nowrap}
.wk-variant-line{display:block}
.wk-ex-head h2{min-width:0}
.wk-ex.folded button.wk-title{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wk-ex.folded .wk-variant-line{overflow:hidden;text-overflow:ellipsis}
.wk-recent{margin:12px 0}
.wk-recent summary{cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wk-variant-row{display:flex;gap:8px;align-items:flex-end}
.wk-variant-pick{flex:1 1 auto;min-width:0}
.wk-single{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;white-space:nowrap}
.wk-single input{width:22px;height:22px;margin:0}
div.wk-ctx{font-family:var(--mono);font-size:var(--fs-wk-ctx);line-height:var(--lh-pre);color:var(--ink2);
  background:var(--panel2);border:var(--bw-hair) solid var(--rule2);padding:8px 10px;overflow-wrap:anywhere}
.wk-ctx b{font-weight:var(--fw-strong);color:var(--ink)}
.wk-ctx-line{padding-left:1.2em}
.wk-ctx-note{color:var(--ink2)}
.wk-ctx-tap{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
  text-decoration:underline dotted;text-underline-offset:3px}
.wk-hist summary,.wk-sec summary{cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wk-hist > div.wk-ctx{margin-top:4px}
.wk-sec + .wk-sec,.wk-sec + .wk-sec-empty,.wk-sec-empty + .wk-sec{margin-top:2px}
.wk-sec summary b,.wk-sec-empty b{display:inline-block;min-width:7.5em}
.wk-peek{color:var(--ink2)}
.wk-sec[open] > summary .wk-peek{display:none}
.wk-sec > .wk-ctx-row{padding-left:1.2em}
.wk-noteline{display:flex;align-items:baseline;gap:6px}
.wk-noteline .wk-note{flex:1 1 auto;min-width:0}
.wk-notelbl{font-size:13px;color:var(--ink2)}
.wk-subresults{display:flex;flex-direction:column;gap:1px;padding-left:16px}
.wk-subresult{font-size:14px}
.wk-hero{display:none}
/* SUMMARY fold and the save review (2026-10-22). */
.wk-summary summary{cursor:pointer}
.wk-summary summary::marker,.wk-summary summary::-webkit-details-marker{color:var(--moss)}
.wk-sumtext{white-space:pre-wrap;overflow-wrap:anywhere}
.wk-review{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:var(--paper)}
.wk-review[hidden]{display:none}
.wk-review-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px;
  border-bottom:var(--bw-thick) solid var(--ink);background:var(--paper)}
.wk-review-bar .act{margin:0}
.wk-review-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px 32px}
body.wk-reviewing{overflow:hidden}
.card.wk-q{margin-top:0;box-shadow:none;padding:9px 11px}
.card.wk-q p{margin:0;font-size:var(--fs-body-s)}
.wk-add{display:block;width:100%;margin-top:0;font-size:var(--fs-base);padding:10px}
.wk-boxbtn{display:flex;justify-content:center;align-items:center;gap:8px;width:100%}
.wk-danger{color:var(--signal)}
.wk-warn{position:fixed;left:16px;right:16px;top:50%;transform:translateY(-50%);z-index:50;max-width:420px;margin:0 auto;
  background:var(--panel2);border:var(--bw) solid var(--signal);color:var(--ink);padding:14px 16px;text-align:center;
  pointer-events:none;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.wk-warn b{display:block;margin-bottom:4px}
.wk-pain summary,.wk-fold summary,.wk-notes summary{font-family:var(--mono);font-size:var(--fs-data);letter-spacing:var(--ls-xs);cursor:pointer;
  padding:6px 0;color:var(--ink)}
.wk-pain summary,.wk-fold summary{font-size:var(--fs-wk-fold);padding:8px 0;overflow-wrap:anywhere}
.wk-fold input[type=text]{width:100%;margin-top:2px}
.wk-tabs{display:flex;gap:6px;margin-top:14px}
.wk-tab{flex:1 1 0;min-width:0;padding:8px 2px}
.wk-tab[aria-expanded=true]{background:var(--ink);color:var(--paper)}
.wk-dot{margin-left:3px}
.wk-tablines{font-family:var(--mono);font-size:var(--fs-data);color:var(--ink2);overflow-wrap:anywhere;margin-top:6px}
.wk-tabbox{margin-top:8px}
.wk-tabbox input[type=text]{width:100%}
/* Tap the name to fold the card to one line. */
button.wk-title{all:unset;cursor:pointer;display:block}
button.wk-title::before{content:'\25BE\00A0';font-family:var(--mono)}
button.wk-title[aria-expanded=false]::before{content:'\25B8\00A0'}
button.wk-title:focus-visible{outline:var(--bw-wk) solid var(--ink);outline-offset:2px}
.wk-ex-head{align-items:center}
.wk-ex-head h2{flex:1}
.wk-ex-sub{font-family:var(--mono);font-size:var(--fs-wk-fold);color:var(--ink2);white-space:nowrap}
/* Moving a card: hold a handle (owner, 2026-10-30). */
.wk-handle{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.wk-ex-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wk-ex-foot{display:flex;justify-content:flex-end}
.wk-ex.dragging{position:relative;z-index:2}
/* Delete an exercise? */
.wk-confirm{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.wk-confirm[hidden]{display:none}
.wk-confirm-box{max-width:360px;width:100%;background:var(--paper);border:var(--bw-wk) solid var(--ink);padding:16px}
.wk-confirm-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.wk-confirm-bar .act{margin:0}
.wk-sumseg{display:inline-flex}
.wk-pain-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.wk-pain-part{font-family:var(--mono);font-size:var(--fs-wk-tag);flex-basis:100%}
.wk-pain-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.wk-pain-group .hint{flex-basis:100%;margin:0}
.wk-sev{flex:0 1 9em}
@media (max-width:380px){.wk-head,.wk-two{grid-template-columns:1fr}}

/* Shared controls, scoped to Today's workout (body.wk-page) so Template and
   Log keep their own sizes: thinner outlines, bigger chips, 16px inputs. */
.wk-page .chip{border-width:var(--bw-wk);font-size:var(--fs-wk-chip)}
.wk-page .chip span{font-size:var(--fs-wk-chip-sub)}
.wk-page .seg{border-width:var(--bw-wk)}
.wk-page input[type=text],.wk-page input[type=date]{border-width:var(--bw-wk);font-size:var(--fs-wk-input)}

/* Interactable vs static (owner's pick, option B of three): tappable
   controls carry a hard offset shadow and press in; containers go flat on a
   quiet rule. Ink, not --shade: --shade vanishes against the dark panels.
   Pressed ([aria-pressed=true]) keeps its ink fill and sits pressed in. */
.wk-page :is(.wk-tag,.wk-step,.wk-num,.wk-ex select,
  .wk-ex input[type=text],.chip,.seg){box-shadow:var(--shadow-wk) var(--shadow-wk) 0 var(--ink)}
.wk-page .wk-tag[aria-pressed=true],
.wk-page :is(.wk-tag,.wk-step,.chip):active:not(:disabled){
  transform:translate(var(--shadow-wk),var(--shadow-wk));box-shadow:none}
.wk-page .wk-ex{box-shadow:none;border-color:var(--rule)}
.wk-page .wk-set{border-color:var(--rule2)}

/* lb | kg switch in every screen header (app/lib/units.js) */
.unit-switch{display:inline-flex;gap:var(--bw);margin-top:10px;background:var(--ink);
  border:var(--bw) solid var(--ink)}
.unit-switch button{background:var(--panel);color:var(--ink2);border:0;padding:4px 10px;
  font-family:var(--mono);font-size:var(--fs-small);cursor:pointer;letter-spacing:var(--ls-pick)}
.unit-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper);
  font-weight:var(--fw-strong)}
/* Exercises page (owner, 2026-10-22): the default list, this phone's own
   exercises, and the owner's edit suggestions. */
.ex-jump{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:var(--sp-field);font-family:var(--mono);font-size:var(--fs-small)}
.ex-jump a{color:var(--ink)}
.ex-group{margin-top:var(--sp-field);scroll-margin-top:12px}
.ex-group-head{font-family:var(--disp);font-size:var(--fs-h-card);margin:0 0 6px}
.ex-parent{border:var(--bw) solid var(--ink);background:var(--panel);margin-top:6px}
.ex-parent > summary{cursor:pointer;padding:10px 12px;font-size:var(--fs-body-s)}
.ex-name{font-weight:var(--fw-strong)}
.ex-meta{color:var(--ink2);font-size:var(--fs-small);white-space:nowrap}
.ex-variant{border-top:var(--bw) solid var(--rule);padding:10px 12px}
.ex-vhead{display:flex;gap:8px;align-items:baseline}
.ex-tag{font-family:var(--mono);font-size:var(--fs-small);color:var(--moss);border:var(--bw) solid var(--moss);padding:0 4px}
.ex-facts{font-family:var(--mono);font-size:var(--fs-small);color:var(--ink2);margin:2px 0 8px}
.ex-pending{font-family:var(--mono);font-size:var(--fs-small);color:var(--ochre);margin:0 0 6px}
.ex-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ex-actions button,.ex-hidden-row button{font-family:var(--mono);font-size:var(--fs-small);background:var(--panel);
  color:var(--ink);border:var(--bw) solid var(--ink);padding:8px 12px;cursor:pointer}
.ex-edit{display:grid;gap:8px;margin-top:10px}
.ex-edit label{display:grid;gap:2px;font-family:var(--mono);font-size:var(--fs-small);color:var(--ink2)}
.ex-fold{margin-top:var(--sp-field);border:var(--bw) solid var(--ink);padding:10px 12px;background:var(--panel)}
.ex-fold summary{cursor:pointer;font-weight:var(--fw-strong)}
.ex-hidden-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;
  border-top:var(--bw) solid var(--rule)}
.ex-more-cues summary{cursor:pointer;padding-left:1.2em;color:var(--ink2)}
.ex-add{margin-top:var(--sp-field)}
.ex-seg{flex-wrap:wrap}
.ex-seg button{flex:1 0 22%}
#add-name{margin-top:8px}
/* Web addresses in cues and notes (lib/linkify.js): wrap anywhere so a long
   video link never pushes the page sideways. */
a.ext{color:inherit;text-decoration:underline;overflow-wrap:anywhere;word-break:break-word}

/* The shared tooltip (app/lib/tooltip.js): "Term: definition" from the glossary. */
[data-term]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.term-tip{position:absolute;z-index:50;max-width:min(320px,calc(100vw - 16px));padding:8px 10px;
  background:var(--ink);color:var(--paper);font-size:var(--fs-small);line-height:var(--lh-hint);pointer-events:none}
.term-tip[hidden]{display:none}
/* Owner-only area at the foot of home: shown only after the owner check passes. */
.owner-area[hidden]{display:none}

/* 7.3 tips: the just-in-time tip pop-up, pinned to the foot of the screen. */
.tip-pop{position:fixed;left:8px;right:8px;bottom:12px;z-index:60;max-width:480px;margin:0 auto;padding:12px 14px;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:0 4px 16px rgba(0,0,0,.25)}
.tip-pop p{margin:0 0 8px}
.tip-pop-title{font-weight:var(--fw-strong)}
.tip-pop-def{color:var(--ink2);font-size:var(--fs-small)}
.tip-pop-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.tip-pop-actions :is(a,button){font:inherit;color:var(--ink);background:none;border:0;padding:6px 0;text-decoration:underline;cursor:pointer}
.tip-pop-actions > :first-child{font-weight:var(--fw-strong)}
.tip-target{outline:2px solid var(--accent,var(--ink));outline-offset:3px}