/* BROVO: dark first (gyms are dim), light follows the phone or the setting. Palette and fonts are the chasedunham.com set.
   Layout rule: what you read sits at the top, what you tap sits in the bottom third, where a thumb reaches. */
:root {
  --bg: #1e1510; --surface: #2b2019; --surface-2: #35291f; --fg: #f4ede2; --muted: #b9a998;
  --line: rgba(244, 237, 226, .13); --accent: #e4572e; --on-accent: #1e1510; --hi: #e3df52; --on-hi: #1e1510;
  --good: #8fd19e; --glow: rgba(228, 87, 46, .4);
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4ede2; --surface: #eae0d0; --surface-2: #e2d6c3; --fg: #1e1510; --muted: #6b5c50; --line: rgba(30, 21, 16, .16);
  --accent: #c9431c; --on-accent: #fff8ef; --hi: #c9c12a; --on-hi: #1e1510; --good: #2f7d46; --glow: rgba(201, 67, 28, .22);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--sans); -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
h1, h2, h3, p, ul { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

.app { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 27rem; margin-inline: auto; overflow: hidden; }
@media (min-width: 600px) { .app { border-inline: 1px solid var(--line); } }
.app::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 14rem; background: radial-gradient(20rem 12rem at 90% 0%, var(--glow), transparent 70%); pointer-events: none; }
.screen { position: relative; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: var(--s4);
  padding: max(1.4rem, env(safe-area-inset-top)) 1.25rem calc(.8rem + env(safe-area-inset-bottom)); }
/* Older Home Screen installs still draw under a translucent status bar, and iOS 26 blurs that strip. app.js adds this class
   only when the page really starts under the status bar (a new install does not, so it gets no extra space). */
html.under-status .screen { padding-top: calc(env(safe-area-inset-top, 0px) + 1.9rem); }
.upper { display: grid; gap: var(--s3); align-content: start; }
.lower { margin-top: auto; display: grid; gap: var(--s3); padding-top: .6rem; }
.eyebrow { font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); font-size: .88rem; }
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); }
.top h1, .top h2 { font: 400 2.1rem/1 var(--serif); }
.chipp { display: inline-block; background: var(--hi); color: var(--on-hi); font-weight: 800; font-size: .72rem; padding: .25rem .65rem; border-radius: 999px; letter-spacing: .04em; white-space: nowrap; }

.seg { display: flex; background: var(--surface); border-radius: 999px; padding: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: .4rem .8rem; border-radius: 999px; font-weight: 700; font-size: .8rem; cursor: pointer; color: var(--muted); min-height: 2.4rem; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.seg.sm button { min-height: 2rem; padding: .3rem .6rem; font-size: .75rem; }

.lifts { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.lifts li { display: flex; justify-content: space-between; gap: var(--s4); background: var(--surface); border-radius: 16px; padding: .75rem 1rem; font-weight: 700; }
.lifts li span { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card { background: var(--surface); border-radius: 18px; padding: .9rem 1rem; display: grid; gap: var(--s1); }
.card b { font-size: .95rem; }
.cta { border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 1.35rem; letter-spacing: .06em; border-radius: 22px; min-height: 4rem; padding: 1rem; }
.cta.ghost { background: var(--surface); color: var(--fg); font-size: 1rem; letter-spacing: 0; min-height: 3.4rem; }
.cta[disabled] { opacity: .5; cursor: default; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: .85rem; justify-self: center; min-height: 2.2rem; }

.meta { display: flex; justify-content: space-between; gap: var(--s4); font-weight: 800; font-size: .8rem; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.big { font: 800 5.6rem/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-align: center; margin-top: 1.2rem; }
.big span { font-weight: 500; color: var(--muted); font-size: 3.4rem; padding-inline: .15em; }
.last { color: var(--muted); text-align: center; font-size: .88rem; }
.steppers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.step { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border-radius: 18px; padding: .35rem .5rem; }
.step button { width: 3.7rem; height: 3.7rem; border-radius: 14px; border: 0; background: var(--surface-2); font-weight: 800; font-size: 1.6rem; cursor: pointer; }
.step output { font-weight: 700; font-size: .9rem; color: var(--muted); }
.rpe { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.rpe button { min-height: 3.6rem; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; }
.rpe button[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }

.center { text-align: center; }
.clock { font: 800 6.4rem/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-align: center; margin-top: 2rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.stat { background: var(--surface); border-radius: 16px; padding: .8rem .4rem; text-align: center; }
.stat b { display: block; font: 800 1.55rem/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.stat span { font-size: .72rem; color: var(--muted); }
.next { list-style: none; padding: 0; display: grid; gap: var(--s2); font-size: .9rem; }
.next li { display: flex; justify-content: space-between; gap: var(--s3); }
.next span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero { background: var(--surface); border-radius: 22px; padding: 1.2rem 1rem; text-align: center; display: grid; gap: var(--s2); }
.hero b { font: 800 4rem/1 var(--sans); letter-spacing: -.03em; }
.hero em { font: 400 1.2rem var(--serif); color: var(--muted); font-style: normal; }
.dots { display: flex; gap: var(--s2); justify-content: center; align-items: center; }
.dots i { width: 1.5rem; height: 1.5rem; border-radius: 8px; background: var(--surface-2); }
.dots i.on { background: var(--accent); }
.bars { display: grid; gap: var(--s2); }
.bar { display: grid; grid-template-columns: 5rem 1fr 2rem; gap: var(--s3); align-items: center; font-size: .85rem; }
.bar .t { height: .6rem; border-radius: 99px; background: var(--surface-2); position: relative; overflow: hidden; }
.bar .t i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bar .t u { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; background: rgba(143, 209, 158, .25); }
.chart { background: var(--surface); border-radius: 18px; padding: .5rem; }
.chart svg { display: block; width: 100%; height: auto; }
.empty { text-align: center; padding: 1.2rem .5rem; color: var(--muted); }

.plan { display: grid; gap: var(--s2); }
.row { background: var(--surface); border-radius: 16px; padding: .7rem .9rem; display: grid; gap: var(--s2); }
.row .name { display: flex; justify-content: space-between; gap: var(--s3); font-weight: 700; }
.row .name span { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.row .controls { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; }
.mini { display: flex; align-items: center; background: var(--surface-2); border-radius: 12px; }
.mini button { width: 2.6rem; height: 2.6rem; border: 0; background: none; font-weight: 800; font-size: 1.2rem; cursor: pointer; }
.mini output { min-width: 3.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
details.more { background: var(--surface); border-radius: 16px; padding: .7rem .9rem; }
details.more summary { cursor: pointer; font-weight: 700; }
details.more .body { display: grid; gap: var(--s3); margin-top: .7rem; }

.tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--bg); padding-bottom: env(safe-area-inset-bottom); }
.tabs button { border: 0; background: none; padding: .9rem 0 1rem; font-weight: 700; font-size: .8rem; color: var(--muted); cursor: pointer; min-height: 3.6rem; }
.tabs button[aria-current="page"] { color: var(--fg); box-shadow: inset 0 3px 0 var(--accent); }
.toast { position: absolute; left: 1rem; right: 1rem; bottom: calc(1.2rem + env(safe-area-inset-bottom)); background: var(--fg); color: var(--bg); font-weight: 700; border-radius: 14px; padding: .7rem 1rem; text-align: center; z-index: 5; }
.note { padding: 2rem 1.25rem; text-align: center; }

.splash { margin: auto; font: 800 4.2rem/1 var(--sans); letter-spacing: -.05em; color: var(--fg); }
.splash span { color: var(--accent); }
/* design pass: pips, ring, week strip, celebration */
.sessbar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.sessbar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width var(--t-base) var(--ease); }
.pips { display: flex; gap: var(--s2); justify-content: center; margin-top: .2rem; }
.pips i { width: 2.4rem; height: .5rem; border-radius: 99px; background: var(--surface-2); }
.pips i.easy { background: var(--hi); } .pips i.good { background: var(--good); } .pips i.hard { background: var(--accent); }
.pips i.now { outline: 2px solid var(--fg); outline-offset: 2px; }
.ring { position: relative; width: 15.5rem; height: 15.5rem; margin: 1.2rem auto 0; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .bg { stroke: var(--surface-2); } .ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset var(--t-base) linear; }
.ring .clock { margin: 0; font-size: 4.6rem; }
.week { display: flex; justify-content: space-between; gap: var(--s1); }
.week span { flex: 1; text-align: center; font-weight: 700; font-size: .72rem; color: var(--muted); padding: .45rem 0; border-radius: 12px; background: var(--surface); }
.week span.on { background: var(--accent); color: var(--on-accent); }
.week span.today { box-shadow: inset 0 0 0 2px var(--fg); }
.quip { font: 400 1.5rem/1.15 var(--serif); text-align: center; text-wrap: balance; }
.rpe .dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; vertical-align: .05em; }
.rpe .dot.easy { background: var(--hi); } .rpe .dot.good { background: var(--good); } .rpe .dot.hard { background: var(--accent); }
.cta:active, .rpe button:active, .step button:active, .seg button:active { transform: scale(.97); }
.cta, .rpe button, .step button { transition: transform var(--t-press) var(--ease); }
canvas.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.shareov { position: absolute; inset: 0; z-index: 7; background: rgba(10, 6, 4, .94); display: flex; flex-direction: column; gap: var(--s4); padding: max(1.2rem, env(safe-area-inset-top)) 1.2rem calc(1.2rem + env(safe-area-inset-bottom)); justify-content: center; }
.shareov img { max-width: 100%; max-height: 66%; object-fit: contain; border-radius: 18px; align-self: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
a { color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[tabindex="-1"]:focus { outline: none; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
@media (forced-colors: active) {
  .seg button[aria-pressed="true"], .rpe button[aria-pressed="true"], .tabs button[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .cta, .card, .row, .lifts li, .stat, .hero, .chart { border: 1px solid CanvasText; }
}
/* accounts */
.field { font-weight: 700; font-size: .85rem; color: var(--muted); }
input[type="text"], input[type="email"], input:not([type]) { width: 100%; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: .8rem 1rem; min-height: 3rem; }
input:focus { border-color: var(--accent); outline: none; }
.row.histrow, .row.histset { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); text-align: left; }
button.histrow { width: 100%; }
.acct { display: grid; gap: var(--s3); }
@media (max-width: 380px) { .big { font-size: 4.8rem; } .clock { font-size: 5.2rem; } }
@media (max-height: 640px) { .big { font-size: 4.4rem; margin-top: .4rem; } .clock { margin-top: .8rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* options that are on or off (as opposed to the segmented choices): outlined chips with a check when on */
.tog { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tog button { border: 2px solid var(--line); background: transparent; border-radius: 999px; padding: .4rem .85rem; font-weight: 700; font-size: .78rem; color: var(--muted); min-height: 2.4rem; cursor: pointer; white-space: nowrap; }
.tog button[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); color: var(--fg); }
.tog button[aria-pressed="true"]::before { content: "\2713\00a0"; color: var(--accent); }

/* Reorder mode on Today, and the upright-only notice for phones held sideways */
.lifts li.reo { align-items: center; }
.lifts .mv { display: flex; gap: var(--s2); }
.lifts .mv button { min-width: 44px; min-height: 44px; border-radius: 12px; background: var(--bg, #1e1510); color: inherit; border: 1px solid currentColor; font-size: 1rem; }
.lifts .mv button:disabled { opacity: .3; }
.rotate { display: none; }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 520px) {
  .rotate { position: fixed; inset: 0; z-index: 99; display: grid; place-content: center; gap: var(--s2); text-align: center; background: var(--bg, #1e1510); color: inherit; padding: 1rem; }
  .rotate b { font-size: 1.4rem; }
  .rotate span { color: var(--muted); }
}

/* Today: lifts that open into their settings, and hold-to-drag */
.lifts li.liftrow { display: block; padding: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: box-shadow var(--t-press), background var(--t-press); }
.lifts li.liftrow .hd { display: flex; justify-content: space-between; gap: var(--s4); padding: .75rem 1rem; cursor: pointer; }
.lifts li.liftrow.open { background: var(--surface-2); }
.lifts li.liftrow.open .hd { padding-bottom: .5rem; }
.lifts li.liftrow .editor { display: grid; gap: var(--s2); padding: 0 .9rem .8rem; font-weight: 500; }
.lifts li.liftrow .editor .controls { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; }
.lifts li.liftrow .editor span { white-space: normal; }
.lifts li.liftrow.lifting { position: relative; z-index: 5; background: var(--surface-2); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); transition: none; }
#liftlist { touch-action: pan-y; }

/* Today header icons and the cards (bottom sheets) for progress and settings */
.eyebrow .chipp { margin-left: .4rem; vertical-align: 1px; }
.icons { display: flex; gap: var(--s1); margin-right: -.5rem; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--fg); border-radius: 50%; cursor: pointer; }
.iconbtn:active { background: var(--surface); }
.sheetwrap { position: absolute; inset: 0; z-index: 20; }
.sheetwrap[hidden] { display: none; }
.sheetwrap .backdrop { position: absolute; inset: 0; background: rgba(10, 6, 4, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--t-base) var(--ease); }
.sheetwrap.open .backdrop { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92%; display: flex; flex-direction: column; gap: var(--s3); background: var(--bg); border: 1px solid var(--line); border-bottom: 0; border-radius: 28px 28px 0 0;
  padding: .5rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform var(--t-base) cubic-bezier(.22, 1, .36, 1); }
.sheetwrap.open .sheet { transform: none; }
.sheet .grab { width: 2.6rem; height: 4px; border-radius: 4px; background: var(--line); margin: .15rem auto 0; touch-action: none; }
.sheet .sheethd { display: flex; justify-content: space-between; align-items: center; touch-action: none; }
.sheet .sheethd h2 { font: 400 2rem/1.1 var(--serif); outline: none; }
.sheet .sheetbody { overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; gap: var(--s3); align-content: start; min-height: 40vh; padding-bottom: .4rem; }
.sheet .sheetbody > .upper, .sheet .sheetbody > .lower { margin: 0; padding: 0; }
.sheet .sheetbody .top > div:first-child:not(:only-child) { display: none; }
.sheet .sheetbody .top:only-child > div:first-child { display: block; }
.sheet .sheetbody .top { justify-content: flex-end; }
.sheet .sheetbody .top h2 { font-size: 1.5rem; }
html[data-motion="off"] .sheet, html[data-motion="off"] .sheetwrap .backdrop { transition: none; }
@media (prefers-reduced-motion: reduce) { .sheet, .sheetwrap .backdrop { transition: none; } }

.more2 .body { display: grid; gap: var(--s4); }

.lifts li.liftrow .ttl { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1; }
.lifts li.liftrow .pencil { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; background: var(--surface); color: var(--muted); border-radius: 50%; cursor: pointer; padding: 0; }
.lifts li.liftrow .ttl input { width: 100%; min-height: 0; padding: 0 0 .1rem; background: transparent; border: 0; border-bottom: 2px solid var(--accent); border-radius: 0; font: inherit; font-weight: 700; color: var(--fg); }

/* No pinch or double-tap zoom, and no jump-zoom when a text box is focused (iPhone zooms any box under 16px) */
html { touch-action: manipulation; }
input, textarea, select, .lifts li.liftrow .ttl input { font-size: 16px; }

/* One page, one top bar: the wordmark on the left, progress and settings on the right at the same height. It stays put while the page scrolls under it. */
html, body { position: fixed; inset: 0; width: 100%; overflow: hidden; overscroll-behavior: none; }
.screen { overscroll-behavior-y: contain; }
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 1.5rem) 1.25rem 1.1rem; background: linear-gradient(to bottom, var(--bg) 82%, transparent); pointer-events: none; }
.topbar[hidden] { display: none; }
.topbar > * { pointer-events: auto; }
.wordmark { height: 44px; display: flex; align-items: center; font: 800 2.3rem/1 var(--sans); letter-spacing: -.05em; color: var(--fg); }
.wordmark span { color: var(--accent); }
.topbar .icons { margin-right: -.5rem; }
.screen.has-bar { padding-top: calc(env(safe-area-inset-top, 0px) + 5.3rem); padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
html.under-status .screen.has-bar { padding-top: calc(env(safe-area-inset-top, 0px) + 5.3rem); }
.seg.days button { color: var(--fg); position: relative; }
.seg.days button[aria-pressed="true"] { background: var(--hi); color: var(--on-hi); }
.seg.days .dd { position: absolute; top: 5px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ================= premium layer ================= */
:root { --r-lg: 28px; --r-md: 20px; --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.3, 1.5, .5, 1); }
.screen { z-index: 1; }
/* a fine dotted grain at the top of the page, the same texture as the images on chasedunham.com */
.app::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .75;
  background-image: radial-gradient(rgba(255, 240, 220, .07) 1px, transparent 1.3px); background-size: 6px 6px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 46%); mask-image: linear-gradient(to bottom, #000, transparent 46%); }
:root[data-theme="light"] .app::after { background-image: radial-gradient(rgba(60, 30, 10, .09) 1px, transparent 1.3px); }

.eyebrow { letter-spacing: .16em; font-size: .7rem; }
.card { border-radius: var(--r-md); border: 1px solid var(--line); }
.cta { border-radius: 999px; }
.cta.ghost { border: 1px solid var(--line); }
.hero { border-radius: var(--r-lg); }

/* ---- Today ---- */
.today { gap: var(--s4); }
.today-head { display: grid; gap: var(--s2); }
.today-head .hrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.htitle { font: 400 2.9rem/1 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.htitle em { font-style: italic; color: var(--accent); }

.seg.days { position: relative; padding: 4px; border: 1px solid var(--line); background: var(--surface); }
.seg.days::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 5)); border-radius: 999px; background: var(--hi);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform var(--t-slow) var(--spring); box-shadow: 0 6px 18px -8px var(--hi); }
.seg.days button { position: relative; z-index: 1; background: none !important; color: var(--fg); min-height: 2.6rem; transition: color var(--t-base) var(--ease); }
.seg.days button[aria-pressed="true"] { color: var(--on-hi); background: none !important; }
.seg.days .dd { position: absolute; top: 6px; right: 10px; width: 6px; height: 6px; }

.start { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); width: 100%; border: 0; cursor: pointer; text-align: left; min-height: 4.7rem;
  background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: .5rem .5rem .5rem 1.7rem;
  box-shadow: 0 16px 36px -16px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .24); transition: transform var(--t-press) var(--ease), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease); }
.start .t { display: grid; font: 800 1.3rem/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.start .t small { font: 600 .75rem/1.3 var(--sans); letter-spacing: .01em; text-transform: none; opacity: .74; margin-top: .2rem; }
.start .go { flex: none; width: 3.7rem; height: 3.7rem; border-radius: 50%; display: grid; place-items: center; background: #fff8ef; color: var(--accent); transition: transform var(--t-base) var(--spring); }
:root[data-theme="light"] .start .go { background: #fff8ef; }
.start:active { transform: scale(.975); }
.start:active .go { transform: translateX(4px) scale(.96); }
.start.soft { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.start.soft .go { background: var(--accent); color: var(--on-accent); }

.lifts { list-style: none; padding: .3rem; display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lifts li.liftrow { display: block; padding: 0; background: none; border-radius: var(--r-md); position: relative; transition: background-color var(--t-base) var(--ease), margin var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.lifts li.liftrow .hd { display: grid; grid-template-columns: 1.7rem 1fr auto; align-items: center; gap: var(--s3); padding: .85rem .75rem; border-radius: var(--r-md); cursor: pointer; }
.lifts li.liftrow.static .hd { cursor: default; }
.lifts li.liftrow:not(:first-child) .hd::before { content: ""; position: absolute; left: .75rem; right: .75rem; top: 0; height: 1px; background: var(--line); transition: opacity var(--t-base); }
.lifts li.liftrow.open .hd::before, .lifts li.liftrow.open + li.liftrow .hd::before { opacity: 0; }
.ix { font: italic 400 1.3rem/1 var(--serif); color: var(--muted); text-align: center; display: grid; place-items: center; }
.nm { display: grid; min-width: 0; gap: var(--s1); }
.nm b { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.nm small { color: var(--muted); font-size: .8rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.nm input { width: 100%; min-height: 0; padding: 0 0 .1rem; background: transparent; border: 0; border-bottom: 2px solid var(--accent); border-radius: 0; font: 700 16px/1.25 var(--sans); color: var(--fg); }
.wt { text-align: right; display: grid; gap: var(--s1); justify-items: end; }
.wt b { font: 800 1.45rem/1 var(--sans); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.wt small { color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .03em; }
.lifts li.liftrow .pencil { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 0; background: var(--bg); color: var(--muted); border-radius: 50%; cursor: pointer; padding: 0; }
.lifts li.liftrow.open { background: var(--surface-2); margin: .35rem -.15rem; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--line); animation: openUp .38s var(--spring) both; }
.lifts li.liftrow:not(.open):not(.static):active { background: var(--surface-2); }
.lifts li.liftrow .editor { animation: edIn .34s var(--ease) both; padding: 0 .85rem 1rem; }
.lifts li.liftrow.lifting { background: var(--surface-2); box-shadow: 0 18px 38px -12px rgba(0, 0, 0, .65); z-index: 5; transform-origin: center; }
.lifts li.liftrow.lifting .hd::before { opacity: 0; }
@keyframes openUp { from { transform: scale(.985); } to { transform: none; } }
@keyframes edIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.hint { color: var(--muted); font-size: .82rem; text-align: center; text-wrap: balance; padding-inline: .6rem; }
.hint.left { text-align: left; padding: 0; }
.tools { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
.tools.quiet { gap: var(--s5); }
.pill { display: inline-flex; align-items: center; gap: var(--s2); border: 1px solid var(--line); background: transparent; color: var(--fg); border-radius: 999px; padding: .55rem 1.05rem; font-weight: 700; font-size: .85rem; min-height: 2.7rem; cursor: pointer; transition: transform var(--t-press) var(--ease), background-color var(--t-base); }
.pill.soft { background: var(--surface); border-color: transparent; }
.pill:active { transform: scale(.95); }
.pill b { font-variant-numeric: tabular-nums; }

/* ---- the gym ---- */
.gymhead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); margin-top: .5rem; }
.lifttitle { font: 400 2.4rem/1.02 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.numcard { display: grid; gap: var(--s1); justify-items: center; text-align: center; padding: 1.2rem .8rem 1rem; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), rgba(0, 0, 0, 0) 150%); }
.numcard .big { margin: 0; font-size: 6.2rem; }
.numcard .big span { font-size: 3.2rem; }
.step { border-radius: 22px; border: 1px solid var(--line); }
.step button { border-radius: 16px; }
.step output { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rpe button { border-radius: 20px; border-width: 1.5px; transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-press) var(--ease); }
.rpe button[aria-pressed="true"][data-v="easy"] { border-color: var(--hi); background: color-mix(in srgb, var(--hi) 20%, var(--surface)); box-shadow: none; }
.rpe button[aria-pressed="true"][data-v="good"] { border-color: var(--good); background: color-mix(in srgb, var(--good) 20%, var(--surface)); box-shadow: none; }
.rpe button[aria-pressed="true"][data-v="hard"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--surface)); box-shadow: none; }
.start.done { min-height: 4.5rem; }
.start.done .t { font-size: 1.4rem; }
.start.done .go svg { width: 26px; height: 26px; }
.start.done .tick { stroke-dasharray: 24; stroke-dashoffset: 0; }
.start.done.popped { background: var(--hi); color: var(--on-hi); transform: scale(.98); box-shadow: 0 0 0 0 var(--hi); animation: ring .38s ease-out; }
.start.done.popped .go { background: var(--on-hi); color: var(--hi); transform: scale(1.14) rotate(-10deg); }
.start.done.popped .tick { animation: tick .22s ease-out; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hi) 70%, transparent); } 100% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--hi) 0%, transparent); } }
@keyframes tick { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.pips i { height: .42rem; transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--spring); }
.pips i.easy, .pips i.good, .pips i.hard { transform: scaleY(1.25); }
.sessbar { height: 5px; }
.sessbar i { transition: width var(--t-slow) var(--ease); }

/* ---- lists in cards (today's lifts during a workout) ---- */
.sl { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.sl li { display: flex; align-items: center; gap: var(--s2); background: var(--surface); border: 1.5px solid transparent; border-radius: var(--r-md); padding: .25rem .5rem .25rem .25rem; transition: border-color var(--t-base), opacity var(--t-base); }
.sl li.cur { border-color: var(--hi); }
.sl li.done { opacity: .62; }
.sl .slmain { flex: 1; min-width: 0; display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: var(--s3); padding: .6rem .5rem; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--r-md); }
.sl .slmain:active { background: var(--surface-2); }
.sl .ix svg { width: 18px; height: 18px; color: var(--good); }
.sl .mv { display: flex; gap: var(--s1); }
.sl .mv button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; font-size: .85rem; }
.sl .mv button:disabled { opacity: .25; }

/* ---- a little more air everywhere ---- */
.stats .stat, .next, .chart { border-radius: var(--r-md); }
.screen { gap: var(--s4); }
@media (prefers-reduced-motion: reduce) { .seg.days::before, .start, .start .go, .lifts li.liftrow { transition: none; } .lifts li.liftrow.open, .lifts li.liftrow .editor { animation: none; } }
html[data-motion="off"] .seg.days::before { transition: none; }
.lifts li.liftrow span { color: var(--fg); font-weight: inherit; white-space: normal; }
.lifts li.liftrow .ix { color: var(--muted); }

.restbar { width: 100%; text-align: left; align-items: center; margin-top: .2rem; }
.nextcard { display: grid; gap: var(--s1); justify-items: center; text-align: center; padding: .9rem 1.2rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); width: 100%; margin-top: .4rem; }
.nextcard .nt { font: 400 1.9rem/1.05 var(--serif); text-wrap: balance; }
.ring { margin-top: .4rem; }
.step { padding: .35rem .4rem; gap: var(--s1); }
.step button { width: 3.3rem; height: 3.5rem; }
.step output { flex: 1; text-align: center; }

/* session summary */
.quip { font: 400 1.9rem/1.1 var(--serif); }
.stat { border-radius: var(--r-md); border: 1px solid var(--line); padding: .95rem .4rem; }
.stat b { font-size: 1.75rem; }
.card .next { gap: 0; }
.next li { padding: .55rem 0; border-top: 1px solid var(--line); align-items: center; }
.next li:first-child { border-top: 0; }
.next li b { font-weight: 700; }
.next .d { font-style: normal; font-size: .62rem; margin-left: .55rem; vertical-align: .1em; }
.next .d.up { color: var(--hi); } .next .d.dn { color: var(--accent); } .next .d.same { color: var(--muted); }
/* every full screen clears the status bar's blur */
.screen { padding-top: calc(env(safe-area-inset-top, 0px) + 1.6rem); }
.screen.has-bar { padding-top: calc(env(safe-area-inset-top, 0px) + 5.3rem); }
html.under-status .screen { padding-top: calc(env(safe-area-inset-top, 0px) + 1.9rem); }
html.under-status .screen.has-bar { padding-top: calc(env(safe-area-inset-top, 0px) + 5.3rem); }

.startwith { justify-self: start; }

/* ================= elegance layer: air, quiet type, swipe to start ================= */
/* top bar 20% taller */
.wordmark { height: 53px; font-size: 2.76rem; }
.topbar .iconbtn { width: 53px; height: 53px; }
.topbar .iconbtn svg { width: 31px; height: 31px; }
.screen.has-bar, html.under-status .screen.has-bar { padding-top: calc(env(safe-area-inset-top, 0px) + 6rem); }

/* a quieter toast, as wide as its words */
.toast { left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 2.5rem); padding: .6rem 1.15rem; border-radius: 999px; font-size: .85rem; font-weight: 600; text-align: center; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55); }

/* Today: more breathing room, lighter weights */
.today { gap: var(--s5); }
.htitle { font-size: 2.6rem; }
.seg.days { padding: 3px; }
.seg.days::before { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 5)); box-shadow: none; }
.seg.days button { min-height: 2.35rem; font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.seg.days button[aria-pressed="true"] { font-weight: 800; }
.lifts { background: transparent; border: 0; padding: 0; }
.lifts li.liftrow .hd { padding: 1.15rem .2rem; gap: var(--s4); grid-template-columns: 1.4rem 1fr auto; }
.lifts li.liftrow:not(:first-child) .hd::before { left: .2rem; right: .2rem; opacity: .7; }
.nm b { font-weight: 600; font-size: 1.05rem; }
.nm small { font-size: .78rem; opacity: .85; }
.wt b { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.wt small { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.ix { font-size: 1.1rem; opacity: .7; }
.lifts li.liftrow.open { margin: .5rem -.6rem; padding: 0 .6rem; border-radius: 24px; }
.lifts li.liftrow.open .hd { padding-inline: .2rem; }
.hint { opacity: .75; font-size: .78rem; margin-top: .4rem; }
.tools { gap: var(--s3); }
.pill { font-weight: 600; font-size: .82rem; border-color: transparent; background: var(--surface); }
.today .tools .pill { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.today .tools .pill.soft { color: var(--fg); background: var(--surface); border-color: transparent; }

/* swipe to start */
.swipe { position: relative; height: 4.4rem; border-radius: 999px; overflow: hidden; background: var(--accent); color: var(--on-accent); isolation: isolate;
  box-shadow: 0 18px 40px -20px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .22); user-select: none; -webkit-user-select: none; }
.swipe.soft { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.swipe::before { content: ""; position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: calc(var(--x, 0) * 1px + 3.5rem + 10px); background: rgba(255, 255, 255, .2); border-radius: 999px; }
.swipe.soft::before { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.swl { position: absolute; z-index: 1; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; padding-left: 3.4rem; pointer-events: none; opacity: calc(1 - var(--p, 0) * 1.5); }
.swl b { font: 800 1.05rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.swl small { font: 600 .74rem/1.3 var(--sans); opacity: .72; margin-top: .1rem; }
.swipe::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); animation: sheen 3.4s ease-in-out 1s infinite; }
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.knob { position: absolute; z-index: 2; top: 5px; left: 5px; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: grab; touch-action: none;
  background: #fff8ef; color: var(--accent); transform: translateX(calc(var(--x, 0) * 1px)); transition: transform var(--t-slow) var(--spring); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.swipe.soft .knob { background: var(--accent); color: var(--on-accent); }
.swipe.drag .knob { transition: none; cursor: grabbing; }
.swipe.drag .swl { transition: none; }
.swipe.done .knob { background: var(--hi); color: var(--on-hi); transform: translateX(calc(var(--x, 0) * 1px)) scale(1.08); }
.swipe.nudge .knob { animation: nudge .6s var(--ease); }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(26px); } 60% { transform: translateX(10px); } }
.swipe::before { transition: width var(--t-slow) var(--spring); }
.swipe.drag::before { transition: none; }

/* hold and gather */
.lifts li.liftrow.grouped { background: color-mix(in srgb, var(--hi) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--hi); transform: scale(.985); transition: transform var(--t-base) var(--spring), background-color var(--t-base); }
.lifts li.liftrow.lifting::after { content: attr(data-n); position: absolute; right: .9rem; top: -.5rem; min-width: 1.7rem; height: 1.7rem; padding: 0 .45rem; border-radius: 999px; background: var(--hi); color: var(--on-hi); font: 800 .8rem/1.7rem var(--sans); text-align: center; }
.lifts li.liftrow.lifting:not([data-n])::after { display: none; }

/* one-handed workout: weight and reps in a rail under the thumb */
.gymmain { display: grid; grid-template-columns: 1fr 5.6rem; gap: var(--s3); align-items: stretch; }
.gymmain.left { grid-template-columns: 5.6rem 1fr; }
.gymmain.left .rail { order: -1; }
.gymmain .numcard { padding: .8rem .3rem; align-content: center; }
.gymmain .numcard .big { font-size: 4.4rem; }
.gymmain .numcard .big span { font-size: 2.3rem; }
.rail { display: grid; gap: var(--s3); }
.rg { display: grid; grid-template-rows: 1fr auto 1fr; gap: var(--s1); padding: .3rem; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; }
.rg button { border: 0; border-radius: 16px; background: var(--surface-2); font-weight: 800; font-size: 1.8rem; min-height: 3.4rem; cursor: pointer; transition: transform var(--t-press) var(--ease); }
.rg button:active { transform: scale(.94); }
.rg output { font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: .1rem 0; }
.tools.right { justify-content: flex-end; } .tools.left { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) { .swipe::after { animation: none; } .knob, .swipe::before { transition: none; } }
html[data-motion="off"] .swipe::after { animation: none; }
.tools.right, .tools.left { gap: var(--s2); flex-wrap: nowrap; }
.tools.right .pill, .tools.left .pill { padding: .5rem .8rem; font-size: .78rem; white-space: nowrap; }

/* ---- polish: days, buttons, the swipe control ---- */
.seg.days button { color: var(--fg); font-weight: 600; }
.seg.days button[aria-pressed="true"] { color: var(--on-hi); font-weight: 800; }
.cta { border-radius: 2rem; }
.cta.ghost { border-radius: 1.7rem; }
.row2 .cta { font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.row2 .cta.ghost { text-transform: none; letter-spacing: 0; }

.swipe { height: 4.4rem; }
.knob { top: .45rem; left: .45rem; width: 3.5rem; height: 3.5rem; will-change: transform; }
.knob svg { animation: arrowhint 2.8s ease-in-out 1.2s infinite; }
@keyframes arrowhint { 0%, 62%, 100% { transform: translateX(0); } 72% { transform: translateX(5px); } 82% { transform: translateX(0); } 90% { transform: translateX(3px); } }
.swipe.drag .knob svg, .swipe.done .knob svg { animation: none; }
/* the fill is one full-width layer slid into place, so dragging never re-lays-out the page */
.swipe::before { width: 100%; transform: translateX(calc(var(--x, 0) * 1px + 3.95rem - 100%)); transition: transform var(--t-slow) var(--spring); will-change: transform; }
.swipe.drag::before { transition: none; }
.swl { transform: translateX(calc(var(--p, 0) * 28px)); transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--spring); opacity: calc(1 - var(--p, 0) * 1.6); }
.swipe.drag .swl { transition: none; }
.swipe.done::before { transform: translateX(0); background: var(--hi); transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease); }
.swipe.done .knob { background: var(--on-hi); color: var(--hi); transform: translateX(calc(var(--x, 0) * 1px)) scale(1.06); transition: transform var(--t-base) var(--ease), background-color var(--t-base), color var(--t-base); }
.swipe.done .swl { opacity: 0; }
.swipe.soft.done::before { background: var(--hi); }
@media (prefers-reduced-motion: reduce) { .knob svg { animation: none; } }

/* arrows mode keeps the same rows: the weight steps aside for two quiet arrows, nothing else moves */
.lifts li.liftrow.reorder .hd { cursor: default; }
.lifts li.liftrow .mv { display: flex; gap: var(--s1); justify-self: end; animation: fadeIn .25s ease both; }
.lifts li.liftrow .mv button { min-width: 0; min-height: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0; background: var(--surface); color: var(--fg); font-size: .8rem; cursor: pointer; display: grid; place-items: center; transition: transform var(--t-press) var(--ease), background-color var(--t-base); }
.lifts li.liftrow .mv button:active { transform: scale(.9); background: var(--surface-2); }
.lifts li.liftrow .mv button:disabled { opacity: .22; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lifts li.liftrow.reorder .nm { overflow: hidden; }
.lifts li.liftrow.reorder .nm b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* one-handed workout: the number card stays as it is; the controls move to a column on your thumb's side */
.thumbcol { display: grid; gap: var(--s3); width: 80%; margin-left: auto; }
.thumbcol.left { margin-left: 0; margin-right: auto; }
.thumbcol .steppers.stack { grid-template-columns: 1fr; }
.thumbcol .step button { width: 4.2rem; height: 3.5rem; }
.thumbcol .tools { justify-content: flex-end; flex-wrap: wrap; gap: var(--s2); }
.thumbcol.left .tools { justify-content: flex-start; }
.thumbcol .tools.quiet { justify-content: center; }
.thumbcol .rpe button { min-height: 3.5rem; font-size: .9rem; padding-inline: .2rem; }
.thumbcol .rpe .dot { margin-right: .3rem; }

/* ================= one screen for the set and the rest ================= */
.numcard { position: relative; min-height: 12.4rem; align-content: center; transition: box-shadow var(--t-slow) var(--ease), background-color var(--t-slow) var(--ease); }
.numcard.resting { box-shadow: 0 0 46px -20px var(--glow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.edge path { fill: none; }
.edge .et { stroke: var(--line); stroke-width: 1.5; opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.edge .ef { stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: var(--eo, 100); opacity: 0;
  transition: stroke-dashoffset var(--t-base) linear, opacity var(--t-base) var(--ease); filter: drop-shadow(0 0 5px var(--glow)); }
.edge.on .et, .edge.on .ef { opacity: 1; }
.edge.draw .ef { transition: stroke-dashoffset .9s var(--ease), opacity var(--t-base) var(--ease); }
.big.warn { color: var(--accent); animation: tick 1s ease-in-out infinite; }
.big.rolling { animation: rollpulse .64s var(--ease); }
@keyframes rollpulse { 0% { transform: scale(.97); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
.big span:only-child { color: inherit; }
.restrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.restrow button { min-height: 4.2rem; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 1rem; cursor: pointer; animation: slotIn .32s var(--ease) both; transition: transform var(--t-press) var(--ease); }
.restrow button:active { transform: scale(.96); }
.lower .steppers .step, .lower .rpe button { animation: slotIn .3s var(--ease) both; }
@keyframes slotIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gymmain .numcard, .thumbcol { }
@media (prefers-reduced-motion: reduce) { .big.rolling, .restrow button, .lower .steppers .step, .lower .rpe button { animation: none; } .edge .ef, .edge.draw .ef { transition: none; } }
html[data-motion="off"] .big.rolling, html[data-motion="off"] .big.warn { animation: none; }

/* the reorder card: hold a row to drag it, tap others with a second finger to gather them */
.sl li.up { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; position: relative; }
.sl li.up .slmain { touch-action: none; }
.sl li.lifting { position: relative; z-index: 5; background: var(--surface-2); border-color: var(--line); box-shadow: 0 18px 38px -12px rgba(0, 0, 0, .65); transition: none; }
.sl li.grouped { background: color-mix(in srgb, var(--hi) 14%, var(--surface)); border-color: var(--hi); transform: scale(.985); transition: transform var(--t-base) var(--spring), background-color var(--t-base); }
.sl li.lifting::after { content: attr(data-n); position: absolute; right: .8rem; top: -.5rem; min-width: 1.7rem; height: 1.7rem; padding: 0 .45rem; border-radius: 999px; background: var(--hi); color: var(--on-hi); font: 800 .8rem/1.7rem var(--sans); text-align: center; }
.sl li.lifting:not([data-n])::after { display: none; }
.pill .rl { }

/* the reorder card is a copy of Today's list */
.lifts li.liftrow.done { opacity: .55; }
.lifts li.liftrow.cur { box-shadow: inset 0 0 0 1.5px var(--hi); border-radius: var(--r-md); background: color-mix(in srgb, var(--hi) 8%, transparent); }
.lifts li.liftrow.cur .hd::before, .lifts li.liftrow.cur + li.liftrow .hd::before { opacity: 0; }
.lifts li.liftrow .ix svg { width: 18px; height: 18px; color: var(--good); }
.sheet .sheetbody .today { gap: var(--s5); }

/* the reorder card reads like the front page */
.sheet.tall { min-height: 90%; }
.sheet.tall .sheethd h2 { font-size: 2.6rem; line-height: 1; }
.sheet .sheethd h2 em { font-style: italic; color: var(--accent); }
.sheet.tall .sheetbody { flex: 1; min-height: 0; }
.sheet .sheetbody .today { gap: var(--s5); }
.lifts li.liftrow.cur.up .hd { cursor: grab; }

/* ================= Settings: one clean list, like DUNCE ================= */
.settings { gap: var(--s5); }
.settings .acct { gap: var(--s2); }
.settings .acct b { font-size: 1.05rem; }
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill.accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.pill.danger { color: #f29a84; border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: transparent; }
:root[data-theme="light"] .pill.danger { color: var(--accent); }
a.pill { text-decoration: none; }
.slist { display: grid; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 1.05rem 0; border-top: 1px solid var(--line); }
.slist > .srow:first-child { border-top: 0; }
.stxt { display: grid; gap: var(--s1); min-width: 0; }
.stxt b { font-size: 1.05rem; font-weight: 700; }
.stxt span { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.sctl { flex: none; }
.sctl .seg { background: transparent; border: 1px solid var(--line); }
.sctl .seg button { min-height: 2.1rem; padding: .3rem .75rem; font-size: .78rem; }
.switch { position: relative; width: 3.4rem; height: 2.1rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; padding: 0; transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.switch i { position: absolute; top: 3px; left: 3px; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--fg); transition: transform var(--t-slow) var(--spring), background-color var(--t-base) var(--ease); }
.switch[aria-checked="true"] { background: var(--hi); border-color: var(--hi); }
.switch[aria-checked="true"] i { transform: translateX(1.3rem); background: var(--on-hi); }
.about { gap: var(--s3); }
.about .pills { margin-top: .2rem; }
@media (prefers-reduced-motion: reduce) { .switch, .switch i { transition: none; } }

/* ================= a calmer workout screen ================= */
.upper.gym { flex: 1; display: flex; flex-direction: column; gap: var(--s4); }
.upper.gym .numcard { margin-block: auto; }
.sessbar { height: 3px; opacity: .85; }
.gymhead { margin-top: .7rem; }
.lifttitle { font-size: 2.3rem; }
.numcard { border: 0; background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 55%, transparent)); }
.numcard.resting { box-shadow: 0 0 46px -20px var(--glow); }

/* one family of controls: soft pills, no outlines, no boxes inside boxes */
.lower { gap: var(--s3); }
.step { border: 0; background: var(--surface); border-radius: 999px; padding: .35rem; gap: var(--s1); }
.step button { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--surface-2); font-size: 1.5rem; }
.step output { font-size: .66rem; letter-spacing: .16em; }
.rpe { gap: var(--s3); }
.rpe button { border: 0; background: var(--surface); border-radius: 999px; min-height: 3.5rem; }
.rpe button[aria-pressed="true"][data-v="easy"] { background: color-mix(in srgb, var(--hi) 22%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--hi); }
.rpe button[aria-pressed="true"][data-v="good"] { background: color-mix(in srgb, var(--good) 22%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--good); }
.rpe button[aria-pressed="true"][data-v="hard"] { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.restrow { gap: var(--s3); }
.restrow button { border: 0; background: var(--surface); border-radius: 999px; min-height: 3.9rem; }
.thumbcol { gap: var(--s3); }
.thumbcol .step button { width: 3.6rem; height: 3.5rem; }
/* the small actions are quiet text, not a row of pills */
.lower .tools:not(.quiet) { gap: var(--s1) var(--s5); margin-top: .1rem; }
.lower .tools:not(.quiet) .pill { background: none; border: 0; padding: .4rem .2rem; min-height: 2.4rem; color: var(--muted); font-weight: 600; font-size: .85rem; }
.lower .tools:not(.quiet) .pill b { font-weight: 600; }
.lower .tools:not(.quiet) .pill:active { color: var(--fg); }
.tools.quiet { gap: var(--s5); }
.thumbcol .tools:not(.quiet) { justify-content: flex-end; }
.thumbcol.left .tools:not(.quiet) { justify-content: flex-start; }

/* the lift you are on: a pulsing lime dot and a lime line, no outline */
.lifts li.liftrow.cur { box-shadow: none; background: none; border-radius: 0; }
.nowdot { display: block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--hi); animation: nowpulse 1.9s ease-out infinite; }
@keyframes nowpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hi) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 .75rem color-mix(in srgb, var(--hi) 0%, transparent); } }
.lifts li.liftrow.cur .ix { opacity: 1; }
.lifts li.liftrow.cur .nm small { color: var(--hi); opacity: 1; font-weight: 800; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .nowdot { animation: none; } }
html[data-motion="off"] .nowdot { animation: none; }

/* ===== Settings, matched to DUNCE's own sheet ===== */
.btn { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; border: 0; cursor: pointer; padding: .8rem 1.15rem; border-radius: 999px; font-weight: 800; font-size: .92rem; background: var(--accent); color: var(--on-accent); transition: transform var(--t-press) var(--ease), opacity var(--t-base) var(--ease); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line); }
.settings { gap: var(--s4); }
.settings .acct { gap: var(--s2); padding: 1rem 1.1rem; border-radius: 18px; }
.settings .acct b { font-size: 1rem; }
.srow { padding: .85rem 0; gap: var(--s4); }
.stxt b { font-size: 1rem; font-weight: 700; }
.stxt span { font-size: .82rem; line-height: 1.35; }
.sctl .seg { display: inline-flex; padding: 3px; background: var(--surface); border: 1px solid var(--line); }
.sctl .seg button { flex: none; min-height: 0; padding: .35rem .8rem; font-size: .8rem; }
.switch { width: 3rem; height: 1.8rem; border: 0; background: var(--surface-2); }
.switch i { top: 3px; left: 3px; width: calc(1.8rem - 6px); height: calc(1.8rem - 6px); }
.switch[aria-checked="true"] i { transform: translateX(1.2rem); }
.settings .about { border-radius: 18px; }
.tools.quiet.foot { flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin-top: .4rem; }
.link.danger { color: #f29a84; }
:root[data-theme="light"] .link.danger { color: var(--accent); }


.about .pill { background: transparent; border: 0; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; font-size: .82rem; padding: .5rem .9rem; min-height: 0; }

/* the card scrolls edge to edge like the home page, so its scroll bar sits at the screen edge, not on top of the controls */
.sheet { padding-inline: 0; }
.sheet .grab { margin-inline: auto; }
.sheet .sheethd, .sheet #sheetseg { padding-inline: 1.25rem; }
.sheet .sheetbody { padding: 0 1.25rem .6rem; }

/* linked lifts */
.linkbtn { color: var(--hi); }
.lifts li.liftrow .editor > .pills { gap: var(--s2); margin-bottom: .1rem; }

.about .ver { font-size: .74rem; letter-spacing: .06em; opacity: .8; }

/* the highlight on a row you are dragging or have gathered reaches out past the text, so the weight has room */
.lifts li.liftrow.lifting, .lifts li.liftrow.grouped { margin-inline: -.75rem; padding-inline: .75rem; border-radius: 22px; }
.lifts li.liftrow.lifting::after { right: 1.4rem; }

/* swipe a lift left (like iOS Messages): the row slides as a soft card and a round red trash button waits behind it */
.lifts li.liftrow .hd { position: relative; z-index: 1; transition: transform var(--t-slow) var(--spring), background-color var(--t-base) var(--ease); }
.lifts li.liftrow.swiping .hd { transition: none; }
.lifts li.liftrow.swiping .hd, .lifts li.liftrow.delopen .hd { background: var(--surface-2); border-radius: 22px; margin-inline: -.7rem; padding-inline: .9rem; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7); }
.lifts li.liftrow.swiping .hd::before, .lifts li.liftrow.delopen .hd::before { opacity: 0; }
.del { position: absolute; right: .1rem; top: 50%; width: 3.4rem; height: 3.4rem; margin-top: -1.7rem; border-radius: 50%; border: 0; background: #e0402a; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0;
  opacity: var(--sp, 0); transform: scale(calc(.55 + var(--sp, 0) * .45)); pointer-events: none; transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--spring); }
.lifts li.liftrow.swiping .del { transition: none; }
.lifts li.liftrow.delopen .del { opacity: 1; transform: none; pointer-events: auto; }
.del:active { filter: brightness(.9); }
.toast { z-index: 30; }
.toast button { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 800; padding: .2rem .3rem .2rem .7rem; cursor: pointer; }
:root[data-theme="light"] .toast button { color: var(--accent); }

/* the number card and the timer stay exactly where they are between a set and a rest */
.upper.gym .numcard { margin-block: .6rem 0; min-height: 13.4rem; }

/* it is a tool, not a document: no text selection, no Copy / Look Up / Translate pop-up, no press-and-hold link menu (typing boxes still select) */
html, body, .app, .app * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
img, svg, a { -webkit-user-drag: none; }

/* the invisible switch over a button (iPhone haptics); it vanishes when haptics are off */
.hz { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 3; -webkit-appearance: auto; appearance: auto; cursor: pointer; }
html[data-haptics="off"] .hz { display: none; }
button:has(> .hz) { position: relative; }
.knob > .hz { border-radius: 50%; }

/* the day chips: lime marks the real weekday (today); a thin ring marks the day you are looking at; everything else is plain white */
.seg.days::after { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 5)); border-radius: 999px; background: var(--hi);
  transform: translateX(calc(var(--t, 0) * 100%)); z-index: 0; pointer-events: none; }
.seg.days.no-today::after { display: none; }
.seg.days::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg); z-index: 1; pointer-events: none; transition: transform var(--t-slow) var(--spring), opacity var(--t-base) var(--ease); }
.seg.days.on-today::before { opacity: 0; }
.seg.days button { position: relative; z-index: 2; color: var(--fg); font-weight: 600; }
.seg.days button[aria-pressed="true"] { color: var(--fg); font-weight: 800; }
.seg.days button.today, .seg.days button.today[aria-pressed="true"] { color: var(--on-hi); font-weight: 800; }

/* the lift you are on, when opened, is the same self-contained card as every other opened lift */
.lifts li.liftrow.cur.open { background: var(--surface-2); margin: .5rem -.6rem; padding: 0 .6rem; border-radius: 24px; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--line); }
.lifts li.liftrow.cur.open .hd { padding-inline: .2rem; }
.lifts li.liftrow.cur.open .nm small { color: var(--hi); }

/* ================= one page: Today and the workout share a stage ================= */
.stage > .layer.plan, .stage > .listwrap, .stage > .listwrap > .dockscroll { display: contents; }
.stage > .layer.work { display: none; }
.stage .dockbar { display: none; }
.stage[data-mode="work"] { --dock-h: calc(min(23dvh, 12.5rem) + env(safe-area-inset-bottom, 0px)); position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.stage[data-mode="work"] > .layer.plan { display: none; }
.stage[data-mode="work"] > .layer.work { display: flex; flex-direction: column; gap: var(--s4); flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: calc(var(--dock-h) + .5rem); scrollbar-width: none; }
.stage[data-mode="work"] > .layer.work::-webkit-scrollbar { display: none; }
#screen.working { padding-bottom: 0; overflow: hidden; }
.stage[data-mode="work"] > .listwrap { position: absolute; z-index: 6; left: -1.25rem; right: -1.25rem; bottom: 0; height: var(--dock-h); display: flex; flex-direction: column; background: var(--bg);
  border-radius: 26px 26px 0 0; box-shadow: 0 -16px 36px -20px rgba(0, 0, 0, .7), inset 0 1px 0 var(--line); transition: height var(--t-slow) var(--ease); }
.stage[data-mode="work"] > .listwrap[data-open="1"] { height: min(82dvh, 46rem); }
.stage[data-mode="work"] .dockbar { display: flex; flex: none; align-items: center; justify-content: center; flex-direction: column; gap: var(--s2); width: 100%; min-height: 2.9rem; padding: .55rem 1.25rem .3rem; border: 0; background: none; color: var(--muted); cursor: pointer; touch-action: none; }
.stage .dockbar .grip { width: 2.6rem; height: 4px; border-radius: 4px; background: var(--line); }
.stage .dockbar .dstat { font-weight: 700; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.stage[data-mode="work"] > .listwrap > .dockscroll { display: grid; gap: var(--s4); align-content: start; flex: 1; min-height: 0; position: relative; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: .1rem 1.25rem calc(.9rem + env(safe-area-inset-bottom, 0px)); }
.stage[data-mode="work"] > .listwrap > .dockscroll::-webkit-scrollbar { display: none; }
.stage[data-mode="work"]:has(> .listwrap[data-open="1"])::after { content: ""; position: absolute; z-index: 5; inset: -2rem -1.25rem 0; background: rgba(10, 6, 4, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: dockscrim .3s ease both; }
@keyframes dockscrim { from { opacity: 0; } to { opacity: 1; } }
/* while Today and the workout trade places, the layer that is leaving floats where it was */
.stage.swapping > .layer.leaving { position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none; gap: var(--s5); }
.stage.swapping > .layer.plan.leaving { display: grid; align-content: start; }
.stage.swapping > .layer.work.leaving { display: flex; flex-direction: column; bottom: 0; }
html[data-motion="off"] .stage[data-mode="work"] > .listwrap { transition: none; }
@media (prefers-reduced-motion: reduce) { .stage[data-mode="work"] > .listwrap { transition: none; } }
/* the workout has less height now that the dock takes the bottom: tighten the number card */
.stage[data-mode="work"] .upper.gym .numcard { min-height: clamp(8.5rem, 17.5dvh, 13.4rem); }
.stage[data-mode="work"] .lower { gap: var(--s3); padding-top: .2rem; }
.stage[data-mode="work"] .lower .tools.quiet { gap: var(--s4); flex-wrap: nowrap; }
.stage[data-mode="work"] .lower .tools.quiet .link { white-space: nowrap; min-height: 2rem; }
.stage[data-mode="work"] > .listwrap > .dockscroll .lifts { padding: .2rem; }
.stage[data-mode="work"] > .listwrap > .dockscroll .lifts li.liftrow .hd { padding-block: .5rem; }
.stage[data-mode="work"] .upper.gym { gap: var(--s3); }
@media (max-height: 720px) { .stage[data-mode="work"] { --dock-h: calc(7.4rem + env(safe-area-inset-bottom, 0px)); } }
/* one-handed layouts stack the steppers, so the dock shows just the lift you are on and the bar */
.stage[data-mode="work"][data-hand="left"], .stage[data-mode="work"][data-hand="right"] { --dock-h: calc(7.6rem + env(safe-area-inset-bottom, 0px)); }
.stage[data-mode="work"][data-hand="left"] .upper.gym .numcard, .stage[data-mode="work"][data-hand="right"] .upper.gym .numcard { min-height: clamp(7.8rem, 15dvh, 13.4rem); }

/* swipe to start: while the knob is dragged, Today lifts away with it (--scrub is 0 to 1 across the swipe) */
#app.sp-on .topbar { opacity: calc(1 - var(--scrub, 0) * 3); }
#app.sp-on .layer.plan > .today-head { transform: translateY(calc(var(--scrub, 0) * -34px)); opacity: calc(1 - var(--scrub, 0) * 2.4); }
#app.sp-on .layer.plan > .days { transform: translateY(calc(var(--scrub, 0) * -24px)); opacity: calc(1 - var(--scrub, 0) * 3); }
#app.sp-on .stage[data-mode="plan"] > .listwrap > .dockscroll > * { transform: translateY(calc(min(1, var(--scrub, 0) * 1.6) * var(--sd, 300px))); opacity: calc(1 - var(--scrub, 0) * .6); }
#app.sp-on:not(.scrubbing) .topbar, #app.sp-on:not(.scrubbing) .layer.plan > .today-head, #app.sp-on:not(.scrubbing) .layer.plan > .days,
#app.sp-on:not(.scrubbing) .stage[data-mode="plan"] > .listwrap > .dockscroll > * { transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease); }
html[data-motion="off"] #app.sp-on * { transition: none !important; }

/* rate to log: tapping Easy, Good or Hard logs the set */
.stage[data-mode="work"] .ratehd { text-align: center; margin-top: .2rem; }
.rpe.rate { gap: var(--s3); }
.rpe.rate button { min-height: 4.4rem; font-size: 1.05rem; font-weight: 800; border-radius: 22px; }
.rpe.rate button[data-v="easy"] { background: color-mix(in srgb, var(--hi) 20%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hi) 60%, transparent); }
.rpe.rate button[data-v="good"] { background: color-mix(in srgb, var(--good) 20%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--good) 60%, transparent); }
.rpe.rate button[data-v="hard"] { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 65%, transparent); }
.rpe.rate button.popped { transform: scale(.96); }
.sidebtns { display: flex; gap: var(--s3); }
.minibtn { flex: 1; min-height: 2.9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 700; font-size: .84rem; cursor: pointer; transition: transform var(--t-press) var(--ease), color var(--t-base); }
.minibtn:active { transform: scale(.97); color: var(--fg); }
.stage .endbtn { display: none; }
.stage[data-mode="work"] .endbtn { display: block; position: absolute; z-index: 5; right: 1rem; top: .55rem; min-height: 2.2rem; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 700; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base); }
.stage[data-mode="work"] .endbtn.sure { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* the rating buttons stay plain until pressed, then take their colour */
.rpe.rate button[data-v], .rpe.rate button[data-v] { background: var(--surface); box-shadow: none; }
.rpe.rate button[data-v="easy"]:active, .rpe.rate button[data-v="easy"].popped { background: color-mix(in srgb, var(--hi) 30%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--hi); }
.rpe.rate button[data-v="good"]:active, .rpe.rate button[data-v="good"].popped { background: color-mix(in srgb, var(--good) 30%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--good); }
.rpe.rate button[data-v="hard"]:active, .rpe.rate button[data-v="hard"].popped { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.minibtn.sure { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lifts li.liftrow.static.tap .hd { cursor: pointer; }

/* the workout drawn behind Today while you swipe: it arrives as the swipe goes */
.stage.previewing > .layer.work { display: flex; flex-direction: column; gap: var(--s3); position: absolute; z-index: 0; left: 1.25rem; right: 1.25rem; top: max(1.4rem, env(safe-area-inset-top, 0px)); bottom: 0; padding-bottom: calc(var(--dock-px, 12rem) + .5rem); overflow: hidden; pointer-events: none;
  opacity: calc((var(--scrub, 0) - .5) * 2.4); transform: translateY(calc((1 - var(--scrub, 0)) * 34px)); }
.stage.previewing > .layer.work .upper.gym { gap: var(--s3); }
.stage.previewing .upper.gym .numcard { min-height: clamp(8.5rem, 17.5dvh, 13.4rem); }
.stage.previewing .lower { gap: var(--s3); padding-top: .2rem; }
.stage.previewing .ratehd { text-align: center; margin-top: .2rem; }
.stage.previewing[data-hand="left"] .upper.gym .numcard, .stage.previewing[data-hand="right"] .upper.gym .numcard { min-height: clamp(7.8rem, 15dvh, 13.4rem); }
#app.sp-on:not(.scrubbing) .stage.previewing > .layer.work { transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
/* the swipe bar gives way to the workout in the second half of the swipe */
#app.sp-on .layer.plan > .swipe { opacity: calc(1 - max(0, var(--scrub, 0) - .3) * 3.3); }
#app.sp-on:not(.scrubbing) .layer.plan > .swipe { transition: opacity var(--t-base) var(--ease); }
#app.sp-on .stage[data-mode="plan"] > .listwrap > .dockscroll > * { opacity: calc(1 - var(--scrub, 0) * .2); }

/* account deletion with a shared login */
.delchoice { display: grid; gap: var(--s2); margin-top: var(--s2); }
.delchoice .pill { justify-content: center; text-align: center; }
.pill.sure { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Progress: the row of lift chips. Big touch targets, flick scrolling that settles on a chip, no scrollbar, and it never traps the page's own scroll. */
.seg[aria-label="Lift"] { overflow-x: auto; overflow-y: hidden; gap: 4px; padding: 4px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.seg[aria-label="Lift"]::-webkit-scrollbar { display: none; }
.seg.sm[aria-label="Lift"] button { flex: 0 0 auto; min-height: 2.75rem; padding: 0 1.1rem; font-size: .85rem; scroll-snap-align: center; }