/* ---------------------------------------------------------------------------
   Summer Body — app styles
   Tokens follow the data-viz reference palette so the charts and the UI chrome
   are drawn from one system in both light and dark.
   ------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --plane:        #f9f9f7;
  --surface:      #fcfcfb;
  --surface-2:    #f1f0ec;
  --surface-3:    #e8e7e1;

  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --ink-3:        #898781;

  --line:         #e1e0d9;
  --axis:         #c3c2b7;
  --ring:         rgba(11, 11, 11, .10);

  --accent:       #2570c9;
  --accent-soft:  #cde2fb;
  --accent-ink:   #ffffff;
  --warm:         #eb6834;

  --good:         #0ca30c;
  --good-text:    #006300;
  --warning:      #fab219;
  --serious:      #ec835a;
  --critical:     #d03b3b;

  /* Chart series. Chosen against a verifier rather than by eye: each one holds
     3:1 on --surface, s1..s3 hold 4.5:1 on --surface-2 because .pill uses them
     for small bold text, and every pair stays at least dE 15 apart under
     normal, protanopic, deuteranopic and tritanopic vision. Hue alone cannot
     do that — protan and deutan fold red-green, tritan folds blue-yellow — so
     the set is spread across lightness too, the one axis all three leave
     intact. Palettes below deliberately do not redefine these. */
  --s1: #2362a5;
  --s2: #793518;
  --s3: #10383b;
  --s4: #c96b92;
  --s5: #678942;
  --s6: #5e5e5e;

  /* Sizing. Density and text-size settings override these, so every rule
     below should reach for a token rather than hardcoding a pixel value. */
  --font-size: 16px;
  --pad-view-y: 18px;
  --pad-view-x: 16px;
  --pad-card:  16px;
  --gap:       14px;
  --gap-sm:     8px;
  --tap:       34px;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 1px 2px rgba(11,11,11,.05), 0 8px 24px -18px rgba(11,11,11,.35);

  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane:     #0d0d0d;
    --surface:   #1a1a19;
    --surface-2: #232322;
    --surface-3: #2c2c2a;
    --ink:       #ffffff;
    --ink-2:     #c3c2b7;
    --ink-3:     #898781;
    --line:      #2c2c2a;
    --axis:      #383835;
    --ring:      rgba(255,255,255,.10);
    --accent:      #3987e5;
    --accent-soft: #184f95;
    --accent-ink:  #04101f;
    --warm:        #d95926;
    --good-text:   #0ca30c;
    --s1: #61a2e9;
    --s2: #f1a078;
    --s3: #3de9fb;
    --s4: #c96b92;
    --s5: #9ef2b9;
    --s6: #c4c4c4;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:     #0d0d0d;
  --surface:   #1a1a19;
  --surface-2: #232322;
  --surface-3: #2c2c2a;
  --ink:       #ffffff;
  --ink-2:     #c3c2b7;
  --ink-3:     #898781;
  --line:      #2c2c2a;
  --axis:      #383835;
  --ring:      rgba(255,255,255,.10);
  --accent:      #3987e5;
  --accent-soft: #184f95;
  --accent-ink:  #04101f;
  --warm:        #d95926;
  --good-text:   #0ca30c;
  --s1: #61a2e9;
  --s2: #f1a078;
  --s3: #3de9fb;
  --s4: #c96b92;
  --s5: #9ef2b9;
  --s6: #c4c4c4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--font-size);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body { overflow-x: hidden; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.012em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); }

/* ---------------------------------------------------------------- shell -- */

.app {
  min-height: 100dvh;
  display: grid;
  /* minmax(0,…) — without it the grid track sizes to the widest child and the
     whole document scrolls sideways on a phone. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  max-width: 1180px;
  margin-inline: auto;
}

.topbar, .nav, .view { min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-top));
  padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--plane) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.02rem;
  white-space: nowrap;
}
.topbar__brand span { overflow: hidden; text-overflow: ellipsis; }
.topbar__brand .mark { width: 22px; height: 22px; color: var(--accent); flex: none; }

.topbar__meta {
  margin-left: auto;
  min-width: 0;
  font-size: .8rem;
  color: var(--ink-2);
  text-align: right;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__meta b { color: var(--ink); font-weight: 650; }

.icon-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover { color: var(--ink); border-color: var(--axis); }

/* nav */

.nav {
  position: sticky;
  /* sits directly under the topbar (10px + 36px button + 10px) rather than
     sliding beneath it once the page scrolls */
  top: calc(56px + env(safe-area-inset-top));
  z-index: 30;
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--plane);
  border-bottom: 1px solid var(--line);
}
.nav::-webkit-scrollbar { display: none; }

.nav button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: .9rem;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}
.nav button:hover { background: var(--surface-2); color: var(--ink); }
.nav button[aria-current="page"] {
  background: var(--ink);
  color: var(--plane);
  border-color: var(--ink);
}
.nav button svg { width: 17px; height: 17px; }

/* view */

.view {
  padding: var(--pad-view-y) var(--pad-view-x) calc(64px + env(safe-area-inset-bottom));
  outline: none;
  animation: fade .18s ease-out;
}
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
  * { transition: none !important; }
}

/* ----------------------------------------------------------- primitives -- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad-card);
  box-shadow: var(--shadow);
}
.card + .card, .stack > * + * { margin-top: var(--gap); }
.stack-sm > * + * { margin-top: var(--gap-sm); }

.card__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.card__head h2, .card__head h3 { margin-right: auto; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: 6px; }
.spacer { margin-left: auto; }

.muted { color: var(--ink-3); }
.dim   { color: var(--ink-2); }
.small { font-size: .82rem; }
.tiny  { font-size: .74rem; }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero-num {
  font-size: clamp(2.5rem, 9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pill--accent { background: var(--accent-soft); border-color: transparent; color: var(--ink); }
.pill--sport  { color: var(--s3); }
.pill--sport2 { color: var(--s2); }
.pill--lift   { color: var(--s1); }
.pill--rest   { color: var(--ink-3); }

/* buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: 42px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--axis); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--ghost { background: transparent; }
.btn--sm { padding: 6px 11px; min-height: 34px; font-size: .82rem; border-radius: 9px; }
.btn--block { width: 100%; }
.btn--danger { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 35%, var(--line)); background: transparent; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* forms */

label.field { display: block; }
.field > span {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 5px;
}
input[type="text"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
textarea { min-height: 76px; resize: vertical; font-variant-numeric: normal; }

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  font-size: .88rem;
}
.check input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.check--on { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.check span.sub { color: var(--ink-3); font-size: .76rem; }

.seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* stat tiles */

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
}
.stat__label { font-size: .74rem; font-weight: 600; color: var(--ink-3); }
.stat__value { font-size: 1.5rem; font-weight: 680; letter-spacing: -.02em; margin-top: 2px; }
.stat__value small { font-size: .72rem; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.stat__delta { font-size: .76rem; font-weight: 600; margin-top: 1px; color: var(--ink-2); }
.stat__delta.up { color: var(--good-text); }
.stat__delta.down { color: var(--critical); }

/* meters */

.meter {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .3s ease;
}
.meter--good > i { background: var(--good); }
.meter--warn > i { background: var(--warning); }
.meter--over > i { background: var(--serious); }

/* lists */

.list { list-style: none; margin: 0; padding: 0; }
.list > li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.list > li:first-child { border-top: 0; }
.list .k { font-weight: 600; }

.dayrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.dayrow--today { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.dayrow__day { width: 42px; flex: none; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.dayrow__body { min-width: 0; flex: 1; }
.dayrow__body .t { font-weight: 600; font-size: .92rem; }
.dayrow__body .s { font-size: .78rem; color: var(--ink-3); }

/* exercise logger */

.ex {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.ex + .ex { margin-top: 10px; }
.ex__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
  user-select: none;
}
.ex__head .name { font-weight: 640; font-size: .95rem; }
.ex__head .scheme { font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ex__head .chev { margin-left: auto; color: var(--ink-3); transition: transform .18s; flex: none; }
.ex[open] .ex__head .chev { transform: rotate(90deg); }
.ex__body { padding: 0 12px 12px; }

.setgrid {
  display: grid;
  grid-template-columns: 26px 1fr 1fr 44px;
  gap: 6px;
  align-items: center;
}
.setgrid .hd { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.setgrid input { min-height: 38px; padding: 6px 8px; text-align: center; }
.setgrid .idx { font-size: .8rem; font-weight: 700; color: var(--ink-3); text-align: center; }
.setdone {
  width: 38px; height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  display: grid; place-items: center;
}
.setdone[aria-pressed="true"] { background: var(--good); border-color: var(--good); color: #fff; }

.hint {
  font-size: .78rem;
  color: var(--ink-2);
  background: var(--surface-3);
  border-radius: 8px;
  padding: 7px 10px;
  margin-top: 9px;
}
.hint b { color: var(--ink); }

/* callouts */

.note {
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 11px 13px;
  font-size: .87rem;
  color: var(--ink-2);
}
.note b, .note strong { color: var(--ink); }
.note--warn { border-left-color: var(--warning); }
.note--warm { border-left-color: var(--warm); }
.note--good { border-left-color: var(--good); }

/* tables */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .86rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }

/* charts */

.chart-wrap { position: relative; }
.chart-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  min-width: 116px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.5);
  font-size: .78rem;
  color: var(--ink-2);
}
.chart-tip.on { opacity: 1; }
.chart-tip .hd { font-weight: 700; color: var(--ink); margin-bottom: 4px; font-size: .74rem; }
.chart-tip .k { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.chart-tip .k i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.chart-tip b { color: var(--ink); font-variant-numeric: tabular-nums; }

.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-family: var(--sans); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--ink-2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.chart-empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  color: var(--ink-3);
  font-size: .85rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 16px;
}

/* timer */

.timer {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--plane);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
}
.timer.on { display: flex; }
.timer .t { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 56px; text-align: center; }
.timer button { background: transparent; border: 0; color: inherit; font: inherit; font-weight: 650; cursor: pointer; opacity: .75; }
.timer button:hover { opacity: 1; }

/* toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(70px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  z-index: 80;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--plane);
  font-size: .86rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* details/accordion */

details.acc {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
details.acc + details.acc { margin-top: 8px; }
details.acc > summary {
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 620;
  font-size: .93rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .18s;
}
details.acc[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
details.acc > .acc__body { padding: 0 14px 14px; font-size: .89rem; color: var(--ink-2); }
details.acc > .acc__body b, details.acc > .acc__body strong { color: var(--ink); }
details.acc ul { margin: .4em 0; padding-left: 1.15em; }
details.acc li { margin-bottom: .3em; }

/* desktop */

@media (min-width: 860px) {
  .app { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .topbar { grid-column: 1 / -1; padding-inline: 22px; }
  .nav {
    position: sticky;
    top: calc(57px + env(safe-area-inset-top));
    align-self: start;
    flex-direction: column;
    gap: 2px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding: 16px 12px;
    height: calc(100dvh - 57px);
    overflow-y: auto;
  }
  .nav button { width: 100%; justify-content: flex-start; border-radius: 10px; }
  .view { padding: 24px 26px 60px; }
}

@media print {
  .nav, .topbar, .timer, .toast, .btn { display: none !important; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* ===========================================================================
   Exercise diagrams
   ========================================================================= */

.fig { display: block; width: 100%; height: auto; }
.fig__limb { stroke: var(--ink-2); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.fig__head { fill: none; stroke: var(--ink-2); stroke-width: 2.6; }
.fig__frame--start .fig__limb,
.fig__frame--start .fig__head { stroke: var(--ink-3); opacity: .45; }
.fig__ground { stroke: var(--axis); stroke-width: 2.4; stroke-linecap: round; }
.fig__pad { fill: var(--surface-3); stroke: var(--axis); stroke-width: 1.2; }
.fig__cable { stroke: var(--axis); stroke-width: 1.6; }
.fig__plate { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.6; }
.fig__frame--start .fig__plate { opacity: .4; }
.fig__frame--start .fig__pad,
.fig__frame--start .fig__cable,
.fig__frame--start .fig__ground { opacity: 0; }
.fig__arrow path { stroke: var(--accent); stroke-width: 2.2; fill: none; stroke-linecap: round; }

/* ===========================================================================
   Guidance panel
   ========================================================================= */

/* A bottom sheet on a phone, a centred card on anything wider. */
.sheet {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  color: var(--ink);
}
.sheet::backdrop { background: rgba(0, 0, 0, .5); }

.sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -12px 40px -20px rgba(0,0,0,.7);
  animation: sheet-in .18s ease-out;
}
@keyframes sheet-in { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet__panel { animation: none; } }

@media (min-width: 700px) {
  .sheet__panel {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, 92vw);
    max-height: 86dvh;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  @keyframes sheet-in { from { opacity: 0; } }
}

.sheet__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.sheet__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; }
.sheet__head .icon-btn { margin-left: auto; }

.sheet__body {
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheet__body > * + * { margin-top: 14px; }

.guide-sec h3 {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.guide-sec .list > li { padding: 6px 0; font-size: .87rem; }
.list--tight > li { border-top: 0; padding: 3px 0; }
.list--tight > li::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  margin: 8px 9px 0 2px;
  border-radius: 50%;
  background: var(--ink-3);
}

.guide-fig {
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 10px 8px;
}
.guide-fig .fig { max-width: 210px; margin-inline: auto; }
.guide-fig figcaption { margin-top: 4px; text-align: center; }

.mistake {
  border-left: 3px solid var(--axis);
  padding: 2px 0 2px 10px;
  font-size: .85rem;
}
.mistake b { display: block; color: var(--ink); }
.mistake span { color: var(--ink-2); }

.swapopt {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: .85rem;
}
.swapopt > div { flex: 1; min-width: 160px; }
.swapopt .btn { flex: none; }

/* the question-mark affordance in an exercise header */
.ex__how {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--ink-3);
  cursor: pointer;
}
.ex__how:hover { color: var(--accent); background: var(--surface-2); }
.ex__how:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===========================================================================
   Shopping list
   ========================================================================= */

.stat--win { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.stat--win .eyebrow { color: var(--good-text); }

.buyrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.buyrow:first-of-type { border-top: 0; }
.buyrow__main { flex: 1; min-width: 0; }
.buyrow__name { font-size: .9rem; font-weight: 600; }
.buyrow__cost { text-align: right; font-size: .88rem; font-variant-numeric: tabular-nums; flex: none; }
.buyrow__edit { width: 30px; height: 30px; flex: none; }
.buyrow--done { opacity: .45; }
.buyrow--done .buyrow__name { text-decoration: line-through; }

/* ===========================================================================
   Palettes
   A palette varies the chrome only — surfaces, ink, lines, accent. The six
   chart series (--s1…--s6) are deliberately NOT redefined here: they come
   from the base light set, or from the default dark blocks above when the
   root is dark. Keeping one verified series set per mode is what lets us
   guarantee the categorical colours stay distinguishable (including for
   colourblind readers) in every palette, rather than re-deriving six safe
   hues per palette and hoping.
   ========================================================================= */

/* ---------------------------------------------------------- graphite ---- */
:root[data-palette="graphite"] {
  --plane: #f7f7f8; --surface: #ffffff; --surface-2: #f0f0f2; --surface-3: #e5e5e9;
  --ink: #101012; --ink-2: #4b4b53; --ink-3: #75757e;
  --line: #e0e0e4; --axis: #b4b4bd; --ring: rgba(16,16,18,.10);
  --accent: #4f46e5; --accent-soft: #ddd9fb; --accent-ink: #ffffff; --warm: #c2410c;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="graphite"]:where(:not([data-theme="light"])) {
    --plane: #0c0c0e; --surface: #171719; --surface-2: #202024; --surface-3: #2a2a2f;
    --ink: #ffffff; --ink-2: #c2c2cb; --ink-3: #8b8b95;
    --line: #2a2a2f; --axis: #3a3a41; --ring: rgba(255,255,255,.10);
    --accent: #6d63e8; --accent-soft: #2e2880; --accent-ink: #ffffff; --warm: #e2643c;
  }
}
:root[data-palette="graphite"][data-theme="dark"] {
  --plane: #0c0c0e; --surface: #171719; --surface-2: #202024; --surface-3: #2a2a2f;
  --ink: #ffffff; --ink-2: #c2c2cb; --ink-3: #8b8b95;
  --line: #2a2a2f; --axis: #3a3a41; --ring: rgba(255,255,255,.10);
  --accent: #6d63e8; --accent-soft: #2e2880; --accent-ink: #ffffff; --warm: #e2643c;
}

/* ------------------------------------------------------------ forest ---- */
:root[data-palette="forest"] {
  --plane: #f5f8f3; --surface: #fdfefc; --surface-2: #e9f0e5; --surface-3: #dce6d7;
  --ink: #0d120b; --ink-2: #465043; --ink-3: #6f7a6c;
  --line: #dbe4d6; --axis: #aebaa8; --ring: rgba(13,18,11,.10);
  --accent: #2c6e49; --accent-soft: #c8e6d5; --accent-ink: #ffffff; --warm: #b45309;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="forest"]:where(:not([data-theme="light"])) {
    --plane: #0a0d09; --surface: #161a14; --surface-2: #1f241d; --surface-3: #2a3027;
    --ink: #ffffff; --ink-2: #bcc7b8; --ink-3: #838d80;
    --line: #2a3027; --axis: #3a4237; --ring: rgba(255,255,255,.10);
    --accent: #3f9d68; --accent-soft: #17462b; --accent-ink: #04140a; --warm: #d97706;
  }
}
:root[data-palette="forest"][data-theme="dark"] {
  --plane: #0a0d09; --surface: #161a14; --surface-2: #1f241d; --surface-3: #2a3027;
  --ink: #ffffff; --ink-2: #bcc7b8; --ink-3: #838d80;
  --line: #2a3027; --axis: #3a4237; --ring: rgba(255,255,255,.10);
  --accent: #3f9d68; --accent-soft: #17462b; --accent-ink: #04140a; --warm: #d97706;
}

/* ------------------------------------------------------------- ember ---- */
:root[data-palette="ember"] {
  --plane: #faf6f2; --surface: #fffdfb; --surface-2: #f3ebe4; --surface-3: #e9dfd5;
  --ink: #14100c; --ink-2: #524a42; --ink-3: #7f766c;
  --line: #e5dcd2; --axis: #bfb3a5; --ring: rgba(20,16,12,.10);
  --accent: #a83f1c; --accent-soft: #fad8c8; --accent-ink: #ffffff; --warm: #a16207;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="ember"]:where(:not([data-theme="light"])) {
    --plane: #0f0b08; --surface: #1c1613; --surface-2: #261e1a; --surface-3: #322822;
    --ink: #ffffff; --ink-2: #cbbfb4; --ink-3: #918479;
    --line: #322822; --axis: #43372f; --ring: rgba(255,255,255,.10);
    --accent: #e0703f; --accent-soft: #6b2c12; --accent-ink: #180b04; --warm: #d99022;
  }
}
:root[data-palette="ember"][data-theme="dark"] {
  --plane: #0f0b08; --surface: #1c1613; --surface-2: #261e1a; --surface-3: #322822;
  --ink: #ffffff; --ink-2: #cbbfb4; --ink-3: #918479;
  --line: #322822; --axis: #43372f; --ring: rgba(255,255,255,.10);
  --accent: #e0703f; --accent-soft: #6b2c12; --accent-ink: #180b04; --warm: #d99022;
}

/* ===========================================================================
   Density, text size and gym mode
   ========================================================================= */

:root[data-density="compact"] {
  --pad-view-y: 12px; --pad-view-x: 12px;
  --pad-card: 11px; --gap: 9px; --gap-sm: 6px;
  --radius: 11px; --radius-sm: 7px;
}

:root[data-text="s"]  { --font-size: 14px; }
:root[data-text="l"]  { --font-size: 18px; }
:root[data-text="xl"] { --font-size: 20px; }

/* Gym mode — a phone propped on a bench, read at arm's length with chalk on
   your hands. Bigger targets, stronger contrast, less chrome. Scoped to the
   logger because that is the only screen used mid-set. */
:root[data-gym="on"] {
  --tap: 46px;
}
[data-gym="on"] .setgrid input {
  min-height: var(--tap);
  font-size: 1.15rem;
  font-weight: 620;
}
[data-gym="on"] .setdone {
  min-width: var(--tap);
  min-height: var(--tap);
}
[data-gym="on"] .ex__head .name { font-size: 1.12rem; }
[data-gym="on"] .ex__head .scheme { font-size: .95rem; color: var(--ink-2); }
[data-gym="on"] .ex { border-width: 2px; }
[data-gym="on"] .btn { min-height: var(--tap); }
/* Chrome that only distracts when you are mid-set. */
[data-gym="on"] .topbar__meta { display: none; }

/* ===========================================================================
   Appearance and tab controls (Settings)
   ========================================================================= */

.palette {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.palette:hover { border-color: var(--axis); }
.palette--on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.palette__name { font-size: .88rem; font-weight: 650; }
.palette__note { font-size: .74rem; color: var(--ink-3); }
.palette__chips { display: flex; gap: 4px; margin-bottom: 3px; }
.palette__chips i {
  width: 15px; height: 15px;
  border-radius: 5px;
  border: 1px solid rgba(128,128,128,.35);
}

/* The swatches show each palette's own chrome, so they have to be spelled out
   rather than read from tokens — the tokens on this page belong to whichever
   palette is currently active. Light values; the dark block below swaps them. */
[data-preview="default"]  .c1 { background: #2570c9; } [data-preview="default"]  .c2 { background: #fcfcfb; } [data-preview="default"]  .c3 { background: #e8e7e1; }
[data-preview="graphite"] .c1 { background: #4f46e5; } [data-preview="graphite"] .c2 { background: #ffffff; } [data-preview="graphite"] .c3 { background: #e5e5e9; }
[data-preview="forest"]   .c1 { background: #2c6e49; } [data-preview="forest"]   .c2 { background: #fdfefc; } [data-preview="forest"]   .c3 { background: #dce6d7; }
[data-preview="ember"]    .c1 { background: #a83f1c; } [data-preview="ember"]    .c2 { background: #fffdfb; } [data-preview="ember"]    .c3 { background: #e9dfd5; }

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) [data-preview="default"] .c1 { background: #3987e5; }
  :root:where(:not([data-theme="light"])) [data-preview="default"] .c2 { background: #1a1a19; }
  :root:where(:not([data-theme="light"])) [data-preview="default"] .c3 { background: #2c2c2a; }
  :root:where(:not([data-theme="light"])) [data-preview="graphite"] .c1 { background: #6d63e8; }
  :root:where(:not([data-theme="light"])) [data-preview="graphite"] .c2 { background: #171719; }
  :root:where(:not([data-theme="light"])) [data-preview="graphite"] .c3 { background: #2a2a2f; }
  :root:where(:not([data-theme="light"])) [data-preview="forest"] .c1 { background: #3f9d68; }
  :root:where(:not([data-theme="light"])) [data-preview="forest"] .c2 { background: #161a14; }
  :root:where(:not([data-theme="light"])) [data-preview="forest"] .c3 { background: #2a3027; }
  :root:where(:not([data-theme="light"])) [data-preview="ember"] .c1 { background: #e0703f; }
  :root:where(:not([data-theme="light"])) [data-preview="ember"] .c2 { background: #1c1613; }
  :root:where(:not([data-theme="light"])) [data-preview="ember"] .c3 { background: #322822; }
}

:root[data-theme="dark"] [data-preview="default"] .c1 { background: #3987e5; }
:root[data-theme="dark"] [data-preview="default"] .c2 { background: #1a1a19; }
:root[data-theme="dark"] [data-preview="default"] .c3 { background: #2c2c2a; }
:root[data-theme="dark"] [data-preview="graphite"] .c1 { background: #6d63e8; }
:root[data-theme="dark"] [data-preview="graphite"] .c2 { background: #171719; }
:root[data-theme="dark"] [data-preview="graphite"] .c3 { background: #2a2a2f; }
:root[data-theme="dark"] [data-preview="forest"] .c1 { background: #3f9d68; }
:root[data-theme="dark"] [data-preview="forest"] .c2 { background: #161a14; }
:root[data-theme="dark"] [data-preview="forest"] .c3 { background: #2a3027; }
:root[data-theme="dark"] [data-preview="ember"] .c1 { background: #e0703f; }
:root[data-theme="dark"] [data-preview="ember"] .c2 { background: #1c1613; }
:root[data-theme="dark"] [data-preview="ember"] .c3 { background: #322822; }

.tabrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.tabrow__name { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; }
.tabrow--off { opacity: .55; }
.tabrow--off .tabrow__name { text-decoration: line-through; }

/* ===========================================================================
   Account
   ========================================================================= */

/* "or" between the email form and the Google button */
.authdivider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--ink-3);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.authdivider::before, .authdivider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ===========================================================================
   The gate
   The sign-in screen that stands in front of the app. It is a screen, not a
   card: full viewport, its own scroll, and the app shell hidden behind it —
   so nothing of the app is visible or tabbable until someone is through.
   ========================================================================= */

/* Hiding the shell with `display: none` rather than opacity or a z-index
   stack: a hidden-but-present shell keeps its focus order, so tabbing from
   the password field would walk invisibly into the nav. */
body[data-gated] .app { display: none; }
body:not([data-gated]) .gate { display: none; }

.gate {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background: var(--plane);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}

/* A wash of the palette accent behind the figure, so the screen picks up
   whichever palette is set instead of being the one grey screen in the app. */
.gate::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -18vh;
  width: min(620px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 68%);
  opacity: .55;
  pointer-events: none;
}

.gate__inner {
  position: relative;
  width: 100%;
  max-width: 340px;
}

/* The mark sits above the wordmark and carries the accent, so the accent
   appears once and strongly rather than being sprinkled about. */
.gate__art {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 22px;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 10px 30px -12px var(--accent);
}

.gate__mark { width: 42px; height: 42px; }

.gate__head { text-align: center; margin-bottom: 22px; }

.gate__word {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}

.gate__sub {
  margin: 6px 0 0;
  font-size: .88rem;
  color: var(--ink-2);
}

.gate__form { display: grid; gap: 12px; }

.gate__field { display: grid; gap: 5px; }

.gate__field > span {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
}

/* 16px minimum: anything smaller and iOS Safari zooms the page on focus, which
   throws the layout sideways mid-typing. */
.gate__field input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.gate__field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.gate__form .btn { margin-top: 4px; min-height: 44px; }

.gate__or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--ink-3);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.gate__or::before, .gate__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.gate__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  background: var(--surface);
}

.gate__foot { text-align: center; margin-top: 14px; }

.gate__msg { margin-top: 16px; }

/* Short screens — a landscape phone, or a keyboard eating half the viewport.
   The figure is the first thing to go: it is decoration, the form is not. */
@media (max-height: 620px) {
  .gate { align-items: flex-start; }
  .gate__art { display: none; }
  .gate::before { display: none; }
}