/* MASC v0.2: night session. See DESIGN.md. Single committed dark world. */
/* v0.59 privacy: the fonts are served from MASC itself, so opening the app never tells Google who you are (a German court fined a site for that under GDPR). Barlow is SIL Open Font License. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); }
@property --band { syntax: "<color>"; inherits: true; initial-value: #8FA8FF; }

:root {
  color-scheme: dark;
  --bg: #090A0D;
  --surface: #121419;
  --raised: #1A1D24;
  --line: rgba(255, 255, 255, .065);
  --line-2: rgba(255, 255, 255, .13);
  --text: #F2F4F7;
  --text-2: #A7AFBC;
  --text-3: #808898;
  --lit: inset 0 1px 0 rgba(255, 255, 255, .055);
  --drop: 0 18px 36px -24px rgba(0, 0, 0, .85);
  --ink: #0B0D11;
  --white: #F4F5F7;
  --green: #5BE49B;
  --amber: #FFB547;
  --red: #FF6B6B;
  --none: #8FA8FF;
  --band: #8FA8FF;
  --band-12: color-mix(in srgb, var(--band) 12%, transparent);
  --band-20: color-mix(in srgb, var(--band) 20%, transparent);
  --band-40: color-mix(in srgb, var(--band) 40%, transparent);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --r: 22px;
  --r-sm: 16px;
  --dock-h: 64px;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  accent-color: var(--band);
  caret-color: var(--band);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
::selection { background: var(--band-40); color: var(--text); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg { display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 18px; height: 18px; }

/* the light */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(120% 62% at 50% -14%, var(--band-40), color-mix(in srgb, var(--band) 9%, transparent) 48%, transparent 80%); transition: --band 700ms ease; }
.ambient::before { content: ""; position: absolute; left: 50%; top: -58vh; width: 150vw; height: 110vh; max-width: 900px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side at 32% 62%, color-mix(in srgb, var(--band) 20%, transparent), transparent), radial-gradient(closest-side at 70% 56%, color-mix(in srgb, var(--band) 13%, transparent), transparent); animation: drift 26s ease-in-out infinite alternate; transition: --band 700ms ease; }
@keyframes drift { from { transform: translateX(-50%) rotate(0deg) scale(1); } to { transform: translateX(-50%) rotate(16deg) scale(1.1); } }
html[data-night="1"] .ambient { opacity: .6; }
.ambient::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 40% at 50% 110%, rgba(255, 255, 255, .025), transparent 60%); }

#app { position: relative; z-index: 1; max-width: 430px; margin: 0 auto; min-height: 100dvh; padding-top: env(safe-area-inset-top, 0px); }
#view { position: relative; display: grid; }
.page { grid-area: 1 / 1; padding: 14px 20px calc(var(--dock-h) + 40px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 22px; align-content: start; transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
.page.onboard { min-height: 100dvh; align-content: center; padding-bottom: 32px; gap: 22px; }
.page-in-right { opacity: 0; transform: translateX(28px); }
.page-in-left { opacity: 0; transform: translateX(-28px); }
.page-out-left, .page-out-right { position: absolute; left: 0; right: 0; top: 0; opacity: 0; pointer-events: none; transition-duration: 160ms; transition-timing-function: var(--ease-in); }
.page-out-left { transform: translateX(-18px); }
.page-out-right { transform: translateX(18px); }
.page > * { animation: rise 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
.page.quick > * { animation: fadein 200ms var(--ease-out) both; animation-delay: 0ms; }
.page.still > * { animation: none; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* type */
.h1 { font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.h2 { font-weight: 600; font-size: 19px; line-height: 1.25; }
.sub { color: var(--text-2); }
.small { color: var(--text-3); font-size: 13px; }
.disp { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: .95; }
.num { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; }
.fine { color: var(--text-3); font-size: 13px; }

/* surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--lit), var(--drop); display: grid; gap: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rows { display: grid; }
.row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; min-height: 62px; padding: 8px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.tile { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--band-12); color: var(--band); overflow: hidden; transition: background-color 400ms ease, color 400ms ease, transform 120ms var(--ease-out); }
.tile img { width: 100%; height: 100%; object-fit: cover; }

/* controls */
.btn { min-height: 50px; padding: 0 20px; border-radius: 15px; border: 1px solid transparent; background: var(--raised); color: var(--text); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 120ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, opacity 150ms ease; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--white); color: var(--ink); }
.btn.primary:active { background: #E3E6EA; }
.btn.ghost { background: transparent; border-color: var(--line-2); }
.btn.small { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.btn.block { width: 100%; }
a.btn { text-decoration: none; }
.btn:disabled { opacity: .45; cursor: default; }
.link { background: none; border: 0; padding: 6px 0; min-height: 44px; color: var(--band); font-weight: 600; font-size: 14px; transition: color 400ms ease; }
:is(.btn, .chip, .tick, .rowbtn, .link, .dock button, .seg button, .option, .hold, details summary):focus-visible { outline: 2px solid var(--band); outline-offset: 3px; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.row-btns > .btn { flex: 1 1 140px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; transition: transform 120ms var(--ease-out), border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { border-color: var(--band); background: var(--band-20); color: var(--text); }
.chips.static .chip { min-height: 34px; font-size: 13px; padding: 0 12px; pointer-events: none; border-color: var(--line); color: var(--text-2); }
.input { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--bg); color: var(--text); transition: border-color 150ms ease, box-shadow 150ms ease; }
.input { font-size: 16px; font-weight: 400; }
.input::placeholder { color: var(--text-3); }
.input:focus-visible { outline: none; border-color: var(--band); box-shadow: 0 0 0 4px var(--band-20); }
textarea.input { resize: vertical; min-height: 96px; line-height: 1.45; }
select.input { appearance: none; -webkit-appearance: none; }
.field { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.seg.two { grid-template-columns: 1fr 1fr; }
.seg.three { grid-template-columns: 1fr 1fr 1fr; }
.seat-where { margin-top: 8px; }
.seg button { min-height: 56px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: transparent; color: var(--text); display: grid; justify-items: center; align-content: center; gap: 2px; padding: 6px 4px; transition: transform 120ms var(--ease-out), border-color 150ms ease, background-color 150ms ease; }
.seg button:active { transform: scale(.96); }
.seg button .num { font-size: 24px; }
.seg button small { font-weight: 500; font-size: 11px; color: var(--text-3); }
.seg button[aria-pressed="true"] { border-color: var(--band); background: var(--band-20); }
.seg button[aria-pressed="true"] small { color: var(--text); }
.options { display: grid; gap: 10px; }
.option { text-align: left; min-height: 64px; padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: transparent; color: var(--text); display: grid; gap: 2px; transition: transform 120ms var(--ease-out), border-color 150ms ease, background-color 150ms ease; }
.option:active { transform: scale(.98); }
.option[aria-pressed="true"] { border-color: var(--band); background: var(--band-20); }
.option small { color: var(--text-2); font-size: 13px; }
.option span { font-weight: 600; }

/* account and login */
.wm.sm { font-size: 34px; letter-spacing: .1em; }
.fld { position: relative; }
.fld .fld-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; display: grid; transition: color 150ms ease; }
.fld .input { padding-left: 44px; }
.fld.eye .input { padding-right: 52px; }
.fld:focus-within .fld-ic { color: var(--band); }
.fld .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: var(--text-3); display: grid; place-items: center; border-radius: 12px; }
.fld .eye[aria-pressed="true"] { color: var(--text); }
.field .hint { font-weight: 400; color: var(--text-3); font-size: 13px; }
.field .msg { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--ease-out); color: var(--red); font-size: 13px; font-weight: 500; }
.field .msg > span { overflow: hidden; }
.field[data-state="error"] .msg { grid-template-rows: 1fr; }
.field[data-state="error"] .input { border-color: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 20%, transparent); }
.field[data-state="error"] .fld { animation: shake 320ms var(--ease-out) 1; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.strength { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 4px; }
.strength i { border-radius: 2px; background: var(--line-2); transition: background-color 200ms ease; }
.strength[data-s="1"] i:nth-child(1) { background: var(--red); }
.strength[data-s="2"] i:nth-child(-n+2) { background: var(--amber); }
.strength[data-s="3"] i { background: var(--green); }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 4px 0; }
.srow .row-title { font-weight: 500; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-links .link { color: var(--text-2); }
.btn .icon.sm { margin-right: 2px; }

/* things that open */
button.ringwrap { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
button.rep-hero { background: none; border: 0; padding: 0; color: inherit; text-align: left; width: 100%; font: inherit; cursor: pointer; }
.rep-txt { display: grid; gap: 6px; }
.rep-title, .rep-txt .sub { display: block; }
.script[data-act] { cursor: pointer; }
button.stat { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lifts li { display: block; padding: 0; }
.liftrow { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 12px; width: 100%; padding: 12px 0; background: none; border: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; min-height: 52px; }
.liftrow .icon { color: var(--text-3); }
.exlink { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 500; display: inline-flex; align-items: center; gap: 2px; min-height: 32px; cursor: pointer; text-align: left; }
.exlink .icon { color: var(--text-3); }
a.row { text-decoration: none; color: inherit; }
.rowbtn.plain { grid-template-columns: 1fr; }
.group .row .rowbtn.plain { grid-column: 1; }
.hero-whoop { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--text-2); font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.hero-whoop .icon { color: var(--band); }

.hero-ask.reading .disp { animation: breathe-text 1.8s ease-in-out infinite; }
@keyframes breathe-text { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* onboarding */
.wm { font-family: var(--display); font-weight: 700; font-size: 84px; letter-spacing: .06em; line-height: .9; display: flex; }
.wm i { font-style: normal; display: inline-block; animation: letter 800ms var(--ease-out) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes letter { from { opacity: 0; transform: translateY(18px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
.tag { font-size: 20px; color: var(--text-2); margin-top: 10px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 28px; height: 3px; border-radius: 2px; background: var(--line-2); transition: background-color 300ms ease; }
.dots i.on { background: var(--band); }

/* today hero */
.top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.streak { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.streak .num { font-size: 22px; color: var(--band); transition: color 400ms ease; }
.streak .icon { color: var(--band); animation: flicker 1.1s ease-in-out 1; transition: color 400ms ease; }
.streak.pop { animation: streakpop 900ms var(--ease-out) 1; border-color: var(--band); }
@keyframes streakpop { 0% { transform: scale(1); } 35% { transform: scale(1.12); box-shadow: 0 0 0 8px var(--band-20); } 100% { transform: scale(1); } }
.stat .spark { margin-top: 6px; }
@keyframes flicker { 0%, 100% { transform: none; } 30% { transform: scale(1.12) rotate(-4deg); } 60% { transform: scale(.96) rotate(3deg); } }
.hero { display: grid; gap: 14px; padding: 2px 0 0; }
.hero-ask { display: grid; gap: 14px; }
.hero-ask .disp { font-size: 40px; }
.ask-q { color: var(--text); }
.hero-band { display: grid; justify-items: center; text-align: center; gap: 12px; }
.ringwrap { position: relative; width: min(60vw, 224px); aspect-ratio: 1; height: auto; border-radius: 50%; }
.ring { width: 100%; height: 100%; overflow: visible; }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 11; }
.ring-arc, .ring-glow { fill: none; stroke: var(--band); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 552.9; stroke-dashoffset: calc(552.9 * (1 - var(--p, 0))); transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1100ms var(--ease-out), stroke 600ms ease; }
.ring-glow { stroke-width: 22; opacity: .22; filter: blur(8px); }
.ringwrap::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, var(--band-12), transparent 70%); transition: background-color 600ms ease; }
.ring-mid .band-word { font-size: clamp(40px, 11.5vw, 50px); }
.ring-count { font-size: 13px; color: var(--text-2); font-weight: 500; letter-spacing: .01em; }
.ring-count .num { font-size: 16px; color: var(--text); margin-right: 1px; }
.hero-txt { display: grid; justify-items: center; gap: 2px; }
.hero-txt .hero-means { text-align: center; max-width: 30ch; margin-top: 0; font-size: 16px; color: var(--text-2); }
/* the morning question: four big answers, the tapped one fills with the colour it chose */
.sleep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sleep-tile { position: relative; min-height: 84px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--lit); color: var(--text); display: grid; align-content: center; justify-items: start; gap: 2px; padding: 12px 16px; text-align: left; transition: transform 140ms var(--ease-out), background-color 260ms ease, border-color 260ms ease, opacity 220ms ease, color 200ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sleep-tile .num { font-size: 30px; text-transform: uppercase; letter-spacing: .01em; }
.sleep-tile small { font-size: 12px; color: var(--text-3); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: color 200ms ease; }
.sleep-tile:active { transform: scale(.96); }
.sleep-tile.picked { background: var(--band); border-color: var(--band); color: var(--ink); transform: scale(1.02); }
.sleep-tile.picked small { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.sleep-tile.unpicked { opacity: .35; }
.hero-ask .sleep-tile { animation: rise 460ms var(--ease-out) backwards; animation-delay: calc(80ms + var(--i, 0) * 45ms); }
.page.still .hero-ask .sleep-tile { animation: none; }
.ask-sub { font-size: 15px; }
.chart-cap { margin-top: -2px; }
.hero.done .ring-arc { animation: ringpulse 700ms var(--ease-out) 1; }
@keyframes ringpulse { 0% { filter: drop-shadow(0 0 6px var(--band-40)); } 40% { filter: drop-shadow(0 0 18px var(--band)); } 100% { filter: drop-shadow(0 0 6px var(--band-40)); } }
.ring-mid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; }
button.streak { cursor: pointer; font: inherit; }
button.band-word { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.band-word { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: .9; font-size: 54px; color: var(--band); transition: color 600ms ease; }
.hero-means { margin-top: 8px; font-size: 17px; line-height: 1.4; max-width: 22ch; }
.hero.swap-out > * { transition: opacity 150ms var(--ease-in), transform 150ms var(--ease-in); opacity: 0; transform: translateY(-6px); }

/* plan */
.plan .row { grid-template-columns: 44px 1fr 44px; }
.rowbtn { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; text-align: left; background: none; border: 0; padding: 0; min-height: 44px; color: inherit; grid-column: 1 / 3; }
.row-title { font-weight: 500; display: block; transition: opacity 200ms ease; }
.row-meta { color: var(--text-2); font-size: 13px; display: block; }
.tick { width: 44px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; color: var(--band); transition: transform 120ms var(--ease-out); }
.tick:active { transform: scale(.88); }
.tick svg { width: 28px; height: 28px; overflow: visible; }
/* v0.99.39 save into place: the chip that flies from a tick into the ring */
.fly { position: fixed; z-index: 60; width: 28px; height: 28px; border-radius: 50%; background: var(--band); box-shadow: 0 0 0 6px var(--band-20), 0 10px 22px -10px rgba(0, 0, 0, .9); pointer-events: none; will-change: transform; display: grid; place-items: center; }
.fly svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tick .ring2 { fill: none; stroke: var(--line-2); stroke-width: 1.5; transition: stroke 200ms ease, fill 200ms ease; }
.tick .path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 320ms var(--ease-out) 40ms; }
.row[data-done="1"] .tick .ring2 { stroke: var(--band); fill: var(--band); }
.row[data-done="1"] .tick .path { stroke-dashoffset: 0; }
.row[data-done="1"] .row-title, .row[data-done="1"] .row-meta { opacity: .5; }
.row[data-done="1"] .tile { background: var(--band-20); }
.row.just .tile { animation: pulse 360ms var(--ease-out) 1; }
.row.just .tick svg { animation: tickpop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
@keyframes tickpop { 0% { transform: scale(.84); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
.bar { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--band); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 320ms var(--ease-out), background-color 400ms ease; }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--band-12); border: 1px solid var(--band-20); color: var(--text-2); font-size: 14px; }

/* coach */
.rep-hero { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.rep-n { font-size: 84px; color: var(--band); line-height: .85; transition: color 400ms ease; }
.rep-title { font-weight: 600; font-size: 22px; line-height: 1.2; }
.script { margin: 0; padding: 16px 18px 16px 20px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font-size: 19px; line-height: 1.35; font-weight: 500; position: relative; }
.script::before { content: "\201C"; position: absolute; left: 10px; top: 2px; font-family: var(--display); font-size: 40px; color: var(--band); line-height: 1; }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; }
.ladder li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; min-height: 48px; color: var(--text-3); font-size: 15px; }
.ladder li::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.ladder li:first-child::before { top: 50%; }
.ladder li:last-child::before { bottom: 50%; }
.ladder .dot { position: relative; z-index: 1; width: 14px; height: 14px; margin-left: 7px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--bg); transition: border-color 300ms ease, background-color 300ms ease, transform 300ms var(--ease-out); }
.ladder li[data-state="done"] .dot { background: var(--band); border-color: var(--band); }
.ladder li[data-state="done"] { color: var(--text-2); }
.ladder li[data-state="now"] { color: var(--text); font-weight: 600; }
.ladder li[data-state="now"] .dot { border-color: var(--band); transform: scale(1.35); box-shadow: 0 0 0 5px var(--band-20); }
details.lesson { border-top: 1px solid var(--line); }
details.lesson:first-of-type { border-top: 0; }
details.lesson > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; font-weight: 500; }
details.lesson > summary::-webkit-details-marker { display: none; }
details.lesson > summary .tagm { font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; }
details.lesson[open] > summary .tagm { color: var(--band); }
details.lesson > p { padding-bottom: 14px; color: var(--text-2); animation: rise 360ms var(--ease-out) both; }
.notes { display: grid; gap: 8px; }
.note { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); font-size: 15px; animation: rise 400ms var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
.note b { font-family: var(--display); font-size: 18px; text-transform: uppercase; letter-spacing: .04em; color: var(--band); }
.answer { padding: 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); color: var(--text-2); animation: rise 360ms var(--ease-out) both; }

/* progress */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 14px; display: grid; gap: 4px; box-shadow: var(--lit), var(--drop); }
.stat .num { font-size: 40px; }
.stat .num small { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--text-3); margin-left: 3px; letter-spacing: 0; }
.stat .lbl { color: var(--text-2); font-size: 13px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .dow { font-size: 11px; font-weight: 600; text-align: center; color: var(--text-3); letter-spacing: .04em; }
.cal .d { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--text-3); border: 1px solid transparent; font-variant-numeric: tabular-nums; }
.cal .d[data-s="done"] { background: var(--band); color: var(--ink); font-weight: 600; }
.cal .d[data-s="frozen"] { border-color: var(--band); border-style: dashed; color: var(--band); }
.cal .d[data-s="miss"] { background: var(--raised); }
.cal .d[data-s="none"] { color: var(--line-2); }
.cal .d[data-today="1"] { box-shadow: 0 0 0 2px var(--text); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.insight { padding: 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); display: grid; gap: 4px; }
.insight b { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 15px; color: var(--text-3); font-weight: 700; }
.insight .big { font-size: 18px; line-height: 1.3; font-weight: 500; }
.lifts { list-style: none; margin: 0; padding: 0; display: grid; }
.lifts li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.spark { width: 72px; height: 22px; overflow: visible; }
.spark .cline { stroke-width: 1.75; animation-duration: 900ms; }
.spark .cdot { animation-delay: 700ms; }
.ex-last { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; margin-top: -4px; }
.ex-last .link { min-height: 36px; font-size: 13px; padding: 0 4px; }
.row-btns.tight { gap: 6px; flex-wrap: nowrap; flex: none; }
.row-btns.tight > .btn { flex: none; padding: 0 12px; }
.lifts li:first-child { border-top: 0; }
.lifts .num { font-size: 22px; }
.lifts .pb { font-family: var(--display); color: var(--band); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-left: 8px; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo { display: grid; gap: 6px; }
.photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); max-width: 100%; }
.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 26px 18px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); }
.empty .icon { width: 30px; height: 30px; color: var(--text-3); }
.empty h3 { font-size: 16px; font-weight: 600; }
.empty p { color: var(--text-2); font-size: 14px; max-width: 32ch; }

/* you */
.group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .7); }
.group .row { padding: 10px 16px; grid-template-columns: 1fr auto; min-height: 58px; }
.group .row + .row { border-top: 1px solid var(--line); }
.group .row .row-meta { margin-top: 2px; }

/* lists: rows that open a sheet (chevron) or carry one control */
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--lit), var(--drop); }
.list .row { grid-template-columns: 44px 1fr auto; padding: 8px 14px 8px 12px; min-height: 64px; border-top: 0; }
.list .row + .row { border-top: 1px solid var(--line); }
.list .row[hidden] + .row { border-top: 0; }
.list .row.nav .rowbtn { grid-column: 1 / -1; grid-template-columns: 44px 1fr auto; min-height: 48px; }
.list .row.nav.ctl .rowbtn { grid-column: 1 / 3; grid-template-columns: 44px 1fr; }
.list .row-meta { margin-top: 1px; }
.chev { color: var(--text-3); display: grid; place-items: center; width: 22px; }
.rowbtn:active .tile { transform: scale(.94); }
.panel-body .list { background: var(--bg); box-shadow: none; }
.plan-card { padding: 4px 18px; }
.ck { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ck .btn { margin-bottom: 2px; }
.track { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; width: 100%; padding: 14px 14px 12px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: inherit; text-align: left; box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .7); transition: transform 120ms var(--ease-out); }
.track:active { transform: scale(.985); }
.dots12 { grid-column: 1 / -1; display: flex; gap: 4px; margin-bottom: 10px; }
.dots12 i { flex: 1; height: 6px; border-radius: 3px; background: var(--line-2); transition: background-color 400ms ease; }
.dots12 i[data-state="done"] { background: var(--band); }
.dots12 i[data-state="now"] { background: var(--band-40); box-shadow: inset 0 0 0 1px var(--band); }
.track-txt { display: grid; }
.statrow { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--lit), var(--drop); }
.statrow .stat { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 14px 16px 12px; }
.statrow .stat:nth-child(even) { border-left: 1px solid var(--line); }
.statrow .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.statrow .stat .num { font-size: 34px; }
.seg.mini { display: grid; flex: 1; gap: 4px; padding: 3px; border-radius: 13px; background: var(--bg); border: 1px solid var(--line); }
.seg.mini button { min-height: 34px; padding: 0 14px; font-size: 14px; font-weight: 600; border: 0; border-radius: 9px; color: var(--text-2); }
.seg.mini button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
.danger { border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); border-radius: var(--r); padding: 18px; display: grid; gap: 8px; margin-top: 8px; }
.danger h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 15px; color: var(--red); }
@property --hold { syntax: "<number>"; inherits: true; initial-value: 0; }
.hold { --hold: 0; --hold-dur: 0ms; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; min-height: 54px; border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); border-radius: var(--r-sm); background: transparent; color: inherit; user-select: none; -webkit-user-select: none; touch-action: none; justify-self: start; transition: --hold var(--hold-dur) linear, border-color 150ms ease, background-color 150ms ease; }
.hold-ring { position: relative; width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(var(--red) calc(var(--hold) * 360deg), color-mix(in srgb, var(--red) 22%, transparent) 0); display: grid; place-items: center; }
.hold-ring::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); }
.hold-ring svg { position: absolute; width: 12px; height: 12px; color: var(--red); }
.hold-label { display: grid; line-height: 1.2; text-align: left; font-weight: 600; }
.hold-label small { opacity: .6; font-size: .8em; font-weight: 500; }
.hold[data-state="holding"] { border-color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); }
.hold[data-state="done"] { border-color: var(--red); background: var(--red); color: #fff; }
.hold[data-state="done"] .hold-ring::after { background: var(--red); }
.hold[data-state="done"] .hold-ring svg { color: #fff; }

/* dock */
.dock { position: fixed; z-index: 20; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: calc(100% - 24px); max-width: 406px; height: var(--dock-h); border-radius: 22px; background: rgba(20, 23, 29, .72); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06); display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px; }
.dock .ind { position: absolute; top: 8px; bottom: 8px; left: 8px; width: calc((100% - 16px) / 5); border-radius: 15px; background: var(--band-20); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 460ms cubic-bezier(.2, .8, .2, 1), background-color 400ms ease; }
.dock button { position: relative; z-index: 1; border: 0; background: none; color: var(--text-3); display: grid; justify-items: center; align-content: center; gap: 3px; font-size: 11px; font-weight: 600; letter-spacing: .02em; min-height: 44px; border-radius: 15px; transition: color 240ms ease; }
.dock button .icon { transition: transform 360ms var(--ease-out), color 240ms ease; }
.dock button[aria-current="page"] { color: var(--text); }
.dock button[aria-current="page"] .icon { color: var(--band); transform: translateY(-3px); }
/* v0.99.39 liquid dock (lifted from the @codexure reel): the top edge swells up around the active tab with tangent fillets
   (reach = sqrt((r+f)^2 - (f+d)^2) with r 34, f 14, d 22, so the curve meets the edge flat). The swell is one static SVG, moved
   only with transform on a spring, and squashes while it travels: no path redraw per frame, no extra backdrop blur, so the
   iPhone pays nothing new. It sits above the edge and is drawn in the dock's own colour, the band tint on top. */
.dock .bulge { position: absolute; z-index: 0; left: 8px; top: -14px; width: calc((100% - 16px) / 5); height: 16px; pointer-events: none; transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 460ms cubic-bezier(.2, .8, .2, 1); }
.dock .bulge-in { position: absolute; left: 50%; top: 0; width: min(63.5px, calc(100% - 16px)); height: 16px; translate: -50% 0; transform-origin: 50% 100%; } /* narrower on a small phone so the end tabs never swell over the rounded corner */
.dock .bulge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dock .bulge-fill { fill: rgba(18, 21, 27, .94); }
.dock .bulge-edge { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.dock .ind { translate: 0 -3px; }
@supports (transition-timing-function: linear(0, 1)) {
  .dock .ind, .dock .bulge { transition-timing-function: linear(0, 0.042, 0.141, 0.267, 0.399, 0.526, 0.639, 0.735, 0.813, 0.875, 0.922, 0.957, 0.981, 0.997, 1.007, 1.012, 1.015, 1.015, 1.014, 1.012, 1.01, 1.008, 1.007, 1.005, 1.004, 1.002, 1.002, 1.001, 1.001, 1, 1); transition-duration: 600ms, 400ms; }
  .dock .bulge { transition-duration: 600ms; }
}

/* sheet */
.sheet { position: fixed; inset: 0; z-index: 30; }
.scrim { position: absolute; inset: 0; background: rgba(3, 5, 10, .62); opacity: 0; transition: opacity 260ms ease; }
.panel:focus { outline: none; }
.panel { position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 430px; max-height: 90dvh; transform: translate(-50%, 104%); background: var(--surface); border-radius: 24px 24px 0 0; border: 1px solid var(--line-2); border-bottom: 0; box-shadow: 0 -18px 50px -24px rgba(0, 0, 0, .9); display: grid; grid-template-rows: auto 1fr; transition: transform 460ms var(--ease-ios); will-change: transform; }
.sheet.is-open .scrim { opacity: 1; }
.sheet.is-open .panel { transform: translate(-50%, 0); }
.grab { touch-action: none; cursor: grab; padding: 8px 16px 4px; }
.handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 2px auto 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-head .x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--raised); color: var(--text-2); display: grid; place-items: center; box-shadow: var(--lit); }
.sheet-head .h2 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.panel-body { overflow: auto; overflow-anchor: none; padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 16px; align-content: start; }
.panel-body > * { animation: rise 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ex { list-style: none; margin: 0; padding: 0; display: grid; }
.ex li { padding: 11px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.ex li:first-child { border-top: 0; }
.ex .sets { color: var(--text-2); font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }

/* submit + toast */
.submit { position: relative; }
.submit .stack { display: grid; place-items: center; }
.submit .stack > * { grid-area: 1 / 1; transition: opacity 150ms ease, transform 150ms var(--ease-out); }
.submit .spin, .submit .did { opacity: 0; transform: translateY(4px); }
.submit[data-state="loading"] .lab, .submit[data-state="done"] .lab { opacity: 0; transform: translateY(-4px); }
.submit[data-state="loading"] .spin, .submit[data-state="done"] .did { opacity: 1; transform: none; }
.spin { width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid rgba(11, 13, 17, .25); border-top-color: var(--ink); animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; z-index: 50; left: 50%; bottom: calc(var(--dock-h) + 28px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 14px); opacity: 0; pointer-events: none; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: var(--raised); color: var(--text); border: 1px solid var(--line-2); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8); font-weight: 500; font-size: 15px; transition: transform 240ms var(--ease-out), opacity 240ms ease; box-shadow: var(--lit), 0 14px 30px -14px rgba(0, 0, 0, .8); padding-left: 20px; overflow: hidden; }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--band); }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; transition: transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 180ms ease; }

/* ---------- welcome: the ring mark draws in and cycles the three day colours ---------- */
.page.onboard.welcome { align-content: stretch; grid-template-rows: 1fr auto; min-height: 100dvh; padding-top: calc(env(safe-area-inset-top, 0px) + 40px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); }
.wl { align-self: center; display: grid; justify-items: start; gap: 0; }
.wl-ring { width: 76px; height: 76px; margin-bottom: 22px; overflow: visible; }
.wl-bg { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 10; }
.wl-arc { fill: none; stroke: var(--band); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314.2; stroke-dashoffset: var(--wl-off, 88); transform: rotate(calc(-90deg + var(--wl-rot, 0deg))); transform-origin: 50% 50%; filter: drop-shadow(0 0 8px var(--band-40)); animation: wldraw 1400ms var(--ease-out) 200ms backwards; transition: stroke 900ms ease, stroke-dashoffset 1100ms var(--ease-out), transform 1100ms var(--ease-out); }
/* the welcome ring moves with the colour: it fills to the band (green fullest, red least) and turns forward a third each change */
@keyframes wldraw { from { stroke-dashoffset: 314.2; } }
.wl-mark { overflow: visible; }
.move-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--text-2); font-size: 16px; }
.move-steps b { color: var(--text); font-weight: 600; }
.nowrap { white-space: nowrap; }
.wl-stem { stroke: var(--text); stroke-width: 135; stroke-linecap: round; }
.wl-arm { stroke: var(--band); stroke-width: 135; stroke-linecap: round; stroke-dasharray: 1; filter: drop-shadow(0 0 60px var(--band-40)); animation: wlarm 1100ms var(--ease-out) 200ms backwards; transition: stroke 900ms ease; }
@keyframes wlarm { from { stroke-dashoffset: 1; } }
.wl-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.wl-points li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; color: var(--text-2); font-size: 16px; animation: rise 460ms var(--ease-out) backwards; animation-delay: calc(700ms + var(--i, 0) * 90ms); }
.wl-points .icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--band-12); color: var(--band); transition: color 900ms ease, background-color 900ms ease; }
.wl-ring.sm { width: 48px; height: 48px; margin-bottom: 16px; }
.wl-actions { display: grid; gap: 10px; justify-items: center; }
.wl-actions .link { margin-top: 2px; }

/* amber day: the last set of each lift is optional, shown dashed and quiet */
.pill[data-opt="1"] { border-style: dashed; color: var(--text-3); }
.pill[data-opt="1"][aria-pressed="true"] { border-style: solid; color: var(--ink); }

/* segments: one dash per step, the same language as the ladder track */
.segs { display: flex; gap: 4px; }
.segs i { flex: 1; height: 6px; border-radius: 3px; background: var(--line-2); transition: background-color 400ms ease; }
.segs i[data-state="done"] { background: var(--band); }
.segs i[data-state="now"] { background: var(--band-40); box-shadow: inset 0 0 0 1px var(--band); }
.segs i[data-late="1"][data-state="next"] { background: color-mix(in srgb, var(--band) 14%, var(--line-2)); }

/* touch targets: every control reaches 44 pt, by padding or an invisible hit area, without changing how it looks */
.streak { min-height: 44px; }
.banner .link { padding: 6px 10px; margin: -6px -10px; }
.week { gap: 4px; }
.seg.mini button { position: relative; min-height: 38px; }
.seg.mini button::after { content: ""; position: absolute; inset: -4px 0; }
.switch { position: relative; }
.switch::after { content: ""; position: absolute; inset: -7px -4px; }

/* onboarding steps: the answer in the middle, the buttons in the thumb zone */
.page.onboard:not(.welcome) { display: flex; flex-direction: column; justify-content: flex-start; min-height: 100dvh; padding-top: calc(env(safe-area-inset-top, 0px) + 28px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
.page.onboard:not(.welcome) > :first-child { margin-top: auto; }
.page.onboard:not(.welcome) > .ob-nav { margin-top: auto; padding-top: 12px; }
.page.onboard:not(.welcome) > :last-child:not(.ob-nav) { margin-bottom: auto; }
/* selection is never colour alone: a drawn tick on chosen chips, a check dot on the chosen option */
/* the tick takes 15px, so the padding gives the same 15px back: tapping a chip never reflows the row */
.chip[aria-pressed="true"]:not(.chips.days .chip) { padding: 0 10px 0 7px; }
.chip[aria-pressed="true"]::before { content: ""; display: inline-block; width: 5px; height: 10px; margin: -3px 9px 0 -1px; border: solid var(--band); border-width: 0 2px 2px 0; transform: rotate(45deg); animation: tickin 220ms var(--ease-out) backwards; }
@keyframes tickin { from { opacity: 0; transform: rotate(45deg) scale(.6); } }
.option { position: relative; padding-right: 52px; }
.option::after { content: ""; position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.option[aria-pressed="true"]::after { border-color: var(--band); background: var(--band); box-shadow: inset 0 0 0 5px var(--bg); }
/* lights out picker */
.bed-pick { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lit); }
.bed-step { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--raised); color: var(--text); display: grid; place-items: center; transition: transform 120ms var(--ease-out), background-color 150ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bed-step:active { transform: scale(.92); background: var(--band-20); }
.bed-time { text-align: center; font-size: 46px; text-transform: uppercase; letter-spacing: .01em; }
.bed-hint { margin-top: -8px; }

/* ---------- v0.42 motion audit: things that happen get an answer ---------- */
/* rest timer: pinned to the bottom of the sheet, appears without pushing the set pills under the finger */
.rest { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 3; box-shadow: var(--lit), 0 -10px 30px -12px rgba(0, 0, 0, .9); }
.rest:not([hidden]) { animation: restin 260ms var(--ease-out) 1; }
@keyframes restin { from { opacity: 0; transform: translateY(12px); } }
/* a drawn check in a button that just became done */
.btn-tick { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-right: 2px; }
.btn-tick path { stroke-dasharray: 22; stroke-dashoffset: 0; animation: btndraw 320ms var(--ease-out) 40ms backwards; }
.btn-tick.drawn path { animation: none; }
@keyframes btndraw { from { stroke-dashoffset: 22; } }
/* Coach: the rung rolls up */
.rep-n.roll-out { transition: transform 160ms var(--ease-in), opacity 160ms var(--ease-in); transform: translateY(-.35em); opacity: 0; }
.rep-n.roll-in { animation: rollin 420ms var(--ease-out) 1; }
.rep-txt.roll-in, .script.roll-in { animation: fadein 240ms var(--ease-out) 80ms backwards; }
@keyframes rollin { from { transform: translateY(.35em); opacity: 0; } }
.dots12 i.grow { animation: dashgrow 360ms cubic-bezier(0.34, 1.56, 0.64, 1) 1; transform-origin: 50% 50%; }
@keyframes dashgrow { from { transform: scaleY(.4); } }
/* week strip: today's cell earns its dot when the day counts */
.wk[data-counted="1"] .wk-l::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--band); margin-right: 4px; vertical-align: 1px; }
.wk.pop .wk-l::before { animation: dotin 380ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms backwards; }
@keyframes dotin { from { transform: scale(0); } }
/* run timer: a phase change you can see from arm's length */
#run-phase.phase-in { animation: phasein 360ms var(--ease-out) 1; }
@keyframes phasein { from { opacity: 0; transform: translateY(10px) scale(.96); } }
/* a sheet that repaints after an action inside it does not replay its entrance */
.panel-body.still > * { animation: none; }
/* the row a save just landed in */
.list .row { position: relative; }
.row.fresh::after { content: ""; position: absolute; inset: 0; background: var(--band); opacity: 0; pointer-events: none; animation: fresh 900ms var(--ease-out) 1; }
.row.fresh .tile { animation: pulse 360ms var(--ease-out) 1; }
@keyframes fresh { from { opacity: .14; } to { opacity: 0; } }
/* roleplay: they are typing */
.dots3 { display: inline-flex; gap: 5px; padding: 6px 2px 2px; }
.dots3 i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); animation: typing 1000ms ease-in-out infinite; }
.dots3 i:nth-child(2) { animation-delay: 160ms; }
.dots3 i:nth-child(3) { animation-delay: 320ms; }
@keyframes typing { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* chart toggle: the first draw is slow on purpose, a swap between panes replays fast (it answers a tap) */
.chart-pane.swapped .cbar { animation-duration: 380ms; animation-delay: calc(var(--i, 0) * 12ms); }
.chart-pane.swapped .cline { animation-duration: 460ms; animation-delay: 0ms; }
.chart-pane.swapped .cdot { animation-delay: 300ms; }

/* Dan, v0.46: the days picker, a fixed row of seven; a chosen day is filled, not just outlined */
.chips.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.chips.days .chip { padding: 0; justify-content: center; min-height: 48px; font-size: 14px; font-weight: 600; }
.chips.days .chip[aria-pressed="true"] { background: var(--band); border-color: var(--band); color: var(--ink); }
.chips.days .chip[aria-pressed="true"]::before { display: none; }
.week-sum { font-weight: 500; color: var(--text); }
.br-why { color: var(--text-2); font-size: 15px; line-height: 1.45; padding: 12px 14px; border-radius: var(--r-sm); background: var(--band-12); border: 1px solid var(--band-20); }

/* Daily Drop: three short reads, one per card, the label in the day's colour */
.drop { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); }
.drop-tag { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--band); }
.drop h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.drop p { color: var(--text-2); font-size: 15px; line-height: 1.5; }

/* exercise swap */
.ex-right { display: inline-flex; align-items: baseline; gap: 10px; }
.swap-link { min-height: 44px; padding: 0 8px; margin: -12px -8px; font-size: 13px; }
.plain-tag { display: inline; font-size: 12px; font-weight: 500; color: var(--text-3); margin-left: 4px; }

/* ---------- the battery: the evening check-in ---------- */
.battery { --bc: var(--line-2); position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 5px; margin-right: 10px; border: 2px solid color-mix(in srgb, var(--bc) 70%, var(--line-2)); border-radius: 16px; background: var(--bg); transition: border-color 260ms ease; }
.bat-cap { position: absolute; right: -10px; top: 50%; width: 6px; height: 22px; margin-top: -11px; border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--bc) 70%, var(--line-2)); transition: background-color 260ms ease; }
.bat-cell { min-height: 52px; border: 0; padding: 0; border-radius: 10px; background: var(--raised); position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 120ms var(--ease-out); }
.bat-cell i { position: absolute; inset: 0; background: var(--bc); transform: scaleY(0); transform-origin: bottom; transition: transform 260ms cubic-bezier(0.34, 1.3, 0.64, 1) var(--d, 0ms), background-color 260ms ease; }
.bat-cell.on i { transform: scaleY(1); }
.bat-cell:active { transform: scale(.94); }
.bat-cell:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.bat-lbl { margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--text); }
.battery.nudge { animation: shake 320ms var(--ease-out) 1; }
/* the quiet offer on Today after a run of low days */
.list.soft { background: color-mix(in srgb, var(--surface) 88%, var(--red) 12%); border-color: color-mix(in srgb, var(--red) 22%, transparent); }
.list.soft .tile { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }

/* ---------- v0.35 feedback layer ---------- */
/* press (ui-signals 06): everything tappable answers the finger. Felt, not seen. */
:is(.rowbtn, .wk, button.d, .streak, .track, button.stat, .rep-hero, .ringwrap, .x, .liftrow, .exlink, .band-word, .hero-whoop) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:is(.rowbtn, .ringwrap, .rep-hero, .liftrow, .exlink, .x, .band-word, .hero-whoop) { transition: transform 120ms var(--ease-out); }
button.stat, .streak { transition: transform 120ms var(--ease-out), border-color 400ms ease; }
.wk { transition: border-color 400ms ease, background-color 400ms ease, transform 120ms var(--ease-out); }
:is(.wk, button.d, .streak, button.stat, .rep-hero, .ringwrap, .x, .liftrow, .exlink, .band-word, .hero-whoop):active { transform: scale(.96); }
.list .row.nav { transition: background-color 160ms ease; }
.list .row.nav:has(.rowbtn:active) { background: rgba(255, 255, 255, .045); transition-duration: 0ms; }
.rowbtn:active { transform: scale(.985); }
.link:active { opacity: .55; }
.hap { position: fixed; left: -200px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
/* counter bump */
.bump { display: inline-block; animation: bump 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.24); } 100% { transform: scale(1); } }
/* the page behind a sheet steps back (the iOS card stack) */
#view { transition: transform 460ms var(--ease-ios); }
.dock { transition: transform 460ms var(--ease-ios), opacity 260ms ease; }
html.sheet-up #view { transform: scale(.94); }
html.sheet-up .dock { transform: translateX(-50%) translateY(14px) scale(.96); opacity: 0; pointer-events: none; }
/* full day burst */
.ringwrap { position: relative; }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--band); box-shadow: 0 0 10px var(--band); transform: rotate(var(--a)) translateY(-96px) scale(1); opacity: 0; animation: burst 900ms var(--ease-out) forwards; }
.burst i:nth-child(even) { width: 5px; height: 5px; margin: -2.5px; animation-delay: 60ms; }
@keyframes burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-96px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-96px - var(--d))) scale(.4); } }


/* week strip */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk { display: grid; justify-items: center; gap: 1px; padding: 8px 0 7px; border-radius: 12px; border: 1px solid transparent; transition: border-color 400ms ease, background-color 400ms ease; }
.wk-d { font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: .04em; }
.wk-n { font-size: 19px; }
.wk-l { font-size: 11px; color: var(--text-2); }
.wk[data-s="today"] { border-color: var(--band); background: var(--band-12); }
.wk[data-s="today"] .wk-n, .wk[data-s="done"] .wk-n { color: var(--band); }
.wk[data-s="miss"] .wk-n, .wk[data-s="none"] .wk-n { color: var(--text-3); }
.wk[data-s="next"] .wk-n { color: var(--text-2); }
.wk[data-s="frozen"] { border-color: var(--band-40); border-style: dashed; }
.wk[data-s="frozen"] .wk-n { color: var(--band); }
.ladder .rung { background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; min-height: 44px; display: flex; align-items: center; width: 100%; }
.wk[data-s="done"] .wk-l::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--band); margin-right: 4px; vertical-align: 1px; }

button.wk, button.d { font: inherit; color: inherit; cursor: pointer; }
button.wk { background: transparent; }
.cal button.d { border: 1px solid transparent; background: transparent; padding: 0; width: 100%; }
.cal button.d[data-s="done"] { background: var(--band); }
.cal button.d[data-s="miss"] { background: var(--raised); }
.cal button.d[data-s="frozen"] { border-color: var(--band); border-style: dashed; }

/* photo compare */
.compare { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); touch-action: none; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.compare img.top { clip-path: inset(0 0 0 var(--x)); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: var(--white); transform: translateX(-1px); }
.cmp-handle i { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; border-radius: 50%; background: var(--white); transform: translate(-50%, -50%); box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .8); }
.cmp-handle i::before, .cmp-handle i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 5px solid transparent; }
.cmp-handle i::before { left: 6px; border-right-color: var(--ink); transform: translateY(-50%); }
.cmp-handle i::after { right: 6px; border-left-color: var(--ink); transform: translateY(-50%); }
.cmp-lbl { position: absolute; bottom: 10px; padding: 4px 8px; border-radius: 8px; background: rgba(11, 13, 17, .7); color: var(--text); font-size: 12px; font-weight: 600; }
.cmp-lbl.left { left: 10px; }
.cmp-lbl.right { right: 10px; }

/* charts */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.ctxt { fill: var(--text-3); font-size: 11px; font-family: var(--body); font-weight: 500; }
.cgrid { stroke: var(--line); stroke-width: 1; }
.cgrid.dash { stroke: var(--line-2); stroke-dasharray: 3 4; }
.cstub { fill: var(--line-2); }
.cbar, .cdot { cursor: pointer; }
.cbar { transform-box: fill-box; transform-origin: bottom; animation: barup 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes barup { from { transform: scaleY(0); } }
.cline { fill: none; stroke: var(--band); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1200ms var(--ease-out) 150ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.cdot { fill: var(--band); stroke: var(--surface); stroke-width: 2; animation: rise 400ms var(--ease-out) 900ms both; }

/* roleplay */
.chat { display: grid; gap: 8px; }
.ai-hello { color: var(--text-2); line-height: 1.45; padding: 2px 2px 4px; }
.ai-hello b { color: var(--text); font-weight: 600; }
.bub { max-width: 86%; padding: 10px 14px; border-radius: 18px; background: var(--raised); line-height: 1.4; animation: rise 300ms var(--ease-out) both; }
.bub.them { justify-self: start; border-bottom-left-radius: 6px; }
.bub.me { justify-self: end; background: var(--band); color: var(--ink); border-bottom-right-radius: 6px; font-weight: 500; }
.bub small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; font-weight: 600; }
.chat-in { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.chat-in textarea.input { min-height: 52px; }
.chat-in .btn { min-height: 52px; }

/* look */
.ex .plain { font-family: var(--body); font-weight: 500; font-size: 15px; letter-spacing: 0; color: var(--text-2); text-align: right; max-width: 62%; white-space: normal; }
.ex.kv li { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: start; }
.ex.kv li > span:first-child { font-weight: 600; color: var(--text); }
.ex.kv .plain { text-align: left; max-width: none; font-weight: 400; }
.guide { display: grid; gap: 10px; animation: rise 400ms var(--ease-out) both; }
.guide strong { color: var(--text); font-weight: 600; }
details.lesson > ul.ex { padding-bottom: 8px; animation: rise 360ms var(--ease-out) both; }

/* in-session tools */
.rest { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--band-40); }
.rest .bar i { transition: transform 250ms linear, background-color 400ms ease; }
.rest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rest .num { font-size: 34px; color: var(--band); }
.setlist { list-style: none; margin: 0; padding: 0; display: grid; }
.setlist li { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.setlist li:first-child { border-top: 0; }
.ex-name { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 500; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { min-width: 52px; height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .02em; transition: transform 120ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.pill:active { transform: scale(.94); }
.pill[aria-pressed="true"] { background: var(--band); border-color: var(--band); color: var(--ink); }
.runner { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 8px 0 4px; }
.runner .phase { font-size: 40px; color: var(--text-2); transition: color 300ms ease; }
.runner[data-kind="run"] .phase { color: var(--band); }
.runner .big { font-size: 96px; line-height: .9; }
.runner .bar { width: 100%; margin-top: 12px; }
.runner .bar i { transition: transform 250ms linear, background-color 400ms ease; }
.breathe { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 18px 0 8px; }
.orb { width: 120px; height: 120px; border-radius: 50%; background: var(--band-20); border: 2px solid var(--band); transform: scale(.7); transition: transform 4000ms ease-in-out, background-color 300ms ease; }
.breathe[data-phase="go"] .orb { animation: orbpulse 900ms ease-in-out infinite; background: var(--band); }
.breathe[data-phase="over"] .orb { background: var(--band-20); }
@keyframes orbpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.breathe .disp { font-size: 44px; }
.breathe[data-phase="go"] .disp { color: var(--band); }
.livepill { position: fixed; z-index: 21; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + 26px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px; background: var(--band); color: var(--ink); font-weight: 600; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8); border: 0; animation: rise 360ms var(--ease-out) both; }
.livepill .num { font-size: 20px; }
.switch { width: 52px; height: 32px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--raised); position: relative; padding: 0; flex: none; transition: background-color 200ms ease, border-color 200ms ease; }
.switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--text-2); transition: transform 260ms var(--ease-out), background-color 200ms ease; }
.switch[aria-checked="true"] { background: var(--band-40); border-color: var(--band); }
.switch[aria-checked="true"] i { transform: translateX(20px); background: var(--band); }

/* wide screens: the phone, framed, on the desk. A fixed overlay masks everything outside the frame; the window still scrolls. */
@media (min-width: 700px) and (min-height: 600px) {
  #app { padding-top: 44px; }
  #app::before { content: ""; position: fixed; z-index: 15; left: 50%; top: 24px; width: 430px; height: calc(100dvh - 48px); transform: translateX(-50%); border-radius: 40px; border: 1px solid var(--line-2); box-shadow: 0 0 0 200vmax var(--bg), 0 40px 80px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06); pointer-events: none; }
  .page { padding-bottom: calc(var(--dock-h) + 72px); }
  .dock { bottom: 36px; }
  .toast { bottom: calc(var(--dock-h) + 60px); }
  .livepill { bottom: calc(var(--dock-h) + 58px); }
  .panel { max-height: calc(100dvh - 120px); border-radius: 24px 24px 32px 32px; bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .orb { transition-duration: 300ms !important; }
  .cbar, .cdot { animation: none; }
  .cline { animation: none; stroke-dashoffset: 0; }
  .breathe[data-phase="go"] .orb { animation: none; }
  .livepill { animation: none; }
  .page, .page-out-left, .page-out-right { transition: opacity 120ms ease; transform: none !important; }
  .page > *, .wm i, .panel-body > *, .note, .answer, details.lesson > p { animation: none; }
  .streak .icon, .row[data-done="1"] .tile, .hero.done .ring-arc { animation: none; }
  .ring-arc, .bar i, .tick .path { transition-duration: 1ms; }
  .panel { transition: opacity 200ms ease; transform: none !important; opacity: 0; }
  .sheet.is-open .panel { opacity: 1; }
  .dock .ind, .dock .bulge { transition-duration: 1ms; }
  .ambient { transition: none; }
  .hold { transition-duration: 1ms; }
  .field[data-state="error"] .fld { animation: none; }
  .hero-ask.reading .disp { animation: none; }
  html.sheet-up #view { transform: none; }
  html.sheet-up .dock { transform: translateX(-50%); }
  .bump, .row.just .tick svg, .row.just .tile, .burst { animation: none; }
  .page.quick > * { animation: none; }
  .ambient::before, .hero-ask .sleep-tile { animation: none; }
  .bat-cell i { transition-duration: 1ms; transition-delay: 0ms; }
  .wl-arc, .wl-arm, .wl-points li { animation: none; }
  .rest:not([hidden]), .btn-tick path, .rep-n.roll-in, .rep-txt.roll-in, .script.roll-in, .dots12 i.grow, .wk.pop .wk-l::before, #run-phase.phase-in, .row.fresh::after, .row.fresh .tile, .bub, .guide { animation: none; }
  .rep-n.roll-out { transform: none; transition: opacity 150ms ease; }
  .dots3 i { animation: none; opacity: .7; }
  .chip[aria-pressed="true"]::before { animation: none; }
  .battery.nudge { animation: none; }
}
@media (prefers-reduced-transparency: reduce) { .dock { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } .dock .bulge-fill { fill: var(--surface); } }
@media (prefers-contrast: more) { :root { --line: rgba(255, 255, 255, .18); --line-2: rgba(255, 255, 255, .32); --text-2: #C9D0DA; --text-3: #A3ABB8; } .dock { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } .dock .bulge-fill { fill: var(--surface); } .ambient { opacity: .6; } }

/* ---------- v0.50 training: the logger, the picker, "hit what you missed", sets per muscle ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wo { display: grid; gap: 12px; }
.woex { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px 4px; box-shadow: var(--lit); display: grid; gap: 4px; }
.woex-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -6px 0 0; }
.woex-head .exlink { font-size: 17px; font-weight: 600; min-height: 44px; }
.woex-more { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--text-3); transition: transform 120ms var(--ease-out), background-color 150ms ease, color 150ms ease; }
.woex-more:active { transform: scale(.92); background: var(--raised); color: var(--text); }
.woex-meta { font-size: 13px; color: var(--text-3); margin-top: -6px; }
.woex-last { font-size: 13px; color: var(--text-2); }
.sets { display: grid; gap: 8px; margin-top: 6px; }
.set-h, .set { display: grid; grid-template-columns: 26px 1fr 1fr 48px; gap: 8px; align-items: center; }
.woex[data-cols="1"] .set-h, .woex[data-cols="1"] .set { grid-template-columns: 26px 1fr 48px; }
.set-h { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); text-align: center; }
.set-h span:first-child, .setn { text-align: left; }
.setn { font-size: 18px; color: var(--text-3); transition: color 150ms ease; }
.sin { width: 100%; min-width: 0; height: 46px; padding: 0 6px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); text-align: center; font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: .02em; font-variant-numeric: tabular-nums; transition: border-color 150ms ease, background-color 200ms ease, box-shadow 150ms ease; }
.sin::placeholder { color: var(--text-3); }
.sin:focus-visible { outline: none; border-color: var(--band); box-shadow: 0 0 0 4px var(--band-20); }
.set[data-done="true"] .sin { background: var(--band-12); border-color: transparent; }
.set[data-done="true"] .setn { color: var(--band); }
.sin.nudge { border-color: var(--red); animation: shake 320ms var(--ease-out) 1; }
.stick { width: 48px; height: 46px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; transition: transform 120ms var(--ease-out), background-color 180ms ease, border-color 180ms ease; }
.stick:active { transform: scale(.9); }
.stick svg { width: 22px; height: 22px; fill: none; stroke: var(--text-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .45; transition: stroke 150ms ease, opacity 150ms ease; }
.stick[aria-pressed="true"] { background: var(--band); border-color: var(--band); }
.stick[aria-pressed="true"] svg { stroke: var(--ink); opacity: 1; stroke-dasharray: 22; animation: tickdraw 260ms var(--ease-out) both; }
@keyframes tickdraw { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
.set[data-opt="1"] .stick { border-style: dashed; }
.set[data-opt="1"] .setn::after { content: "opt"; display: block; font-family: var(--body); font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fresh-in { animation: rise 320ms var(--ease-out) both; }
.set-tools { display: flex; gap: 18px; align-items: center; }
.set-tools .link { display: inline-flex; align-items: center; gap: 4px; }
.link.quiet { color: var(--text-3); font-weight: 500; }
.btn .icon.sm, .add-ex .icon { margin-right: 6px; }
.wo-keep { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 18px; margin-top: -6px; }

/* the nudge towards what the last session missed */
.sg { border: 1px solid var(--band-40); background: var(--band-12); border-radius: var(--r-sm); padding: 12px 14px 14px; display: grid; gap: 8px; transition: border-color 700ms ease, background-color 700ms ease; }
.sg-h { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .07em; text-transform: uppercase; color: var(--band); transition: color 700ms ease; }
.sg-t { font-size: 15px; line-height: 1.4; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px 6px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); text-align: left; transition: transform 120ms var(--ease-out), border-color 150ms ease; }
.sg-chip:active { transform: scale(.96); border-color: var(--band); }
.sg-chip .icon { color: var(--band); flex: none; }
.sg-chip span { display: grid; font-weight: 600; font-size: 14px; line-height: 1.2; }
.sg-chip small { font-weight: 400; font-size: 12px; color: var(--text-3); }

/* the picker */
.pk-top { position: sticky; top: -8px; z-index: 2; margin: -8px -16px 0; padding: 8px 16px 10px; background: var(--surface); display: grid; gap: 10px; box-shadow: 0 10px 16px -14px rgba(0, 0, 0, .9); }
.panel-body > .pk-top { animation: none; }
.pk-search { position: relative; display: block; }
.pk-search .icon { position: absolute; left: 14px; top: 50%; margin-top: -8px; color: var(--text-3); pointer-events: none; }
.pk-search .input { padding-left: 40px; -webkit-appearance: none; appearance: none; }
.pk-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.pk-chips::-webkit-scrollbar { display: none; }
.pk-chips .chip { flex: none; min-height: 44px; scroll-snap-align: start; }
.pk-list { display: grid; }
.pk-sec { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 14px 0 4px; }
.pk-sec:first-child { padding-top: 2px; }
.pk-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 60px; padding: 9px 4px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; transition: background-color 150ms ease, transform 120ms var(--ease-out); border-radius: 0; }
.pk-list > .pk-row:first-child, .pk-sec + .pk-row { border-top: 0; }
.pk-row:active { background: var(--raised); transform: scale(.99); }
.pk-n { font-size: 16px; font-weight: 500; }
.pk-m { font-size: 13px; color: var(--text-3); grid-row: 2; }
.pk-row > .icon, .pk-tick { grid-column: 2; grid-row: 1 / span 2; color: var(--text-3); }
.pk-tick { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: background-color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out); }
.pk-tick svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pk-row[aria-pressed="true"] .pk-tick { background: var(--band); border-color: var(--band); transform: scale(1.06); }
.pk-row[aria-pressed="true"] .pk-tick svg { opacity: 1; stroke-dasharray: 22; animation: tickdraw 240ms var(--ease-out) both; }
.pk-row[aria-pressed="true"] .pk-n { color: var(--text); font-weight: 600; }
.pk-done { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 3; }
.pk-done .btn { box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .9); }

/* sets per muscle, last seven days */
.cov { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.cov-i { display: grid; grid-template-columns: 1fr auto; gap: 5px; align-items: baseline; }
.cov-l { font-size: 14px; font-weight: 500; }
.cov-n { font-size: 20px; }
.cov-i[data-zero="true"] .cov-l, .cov-i[data-zero="true"] .cov-n { color: var(--text-3); }
.cov-b { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.cov-b i { display: block; height: 100%; background: var(--band); border-radius: 4px; transform-origin: left; transform: scaleX(var(--p)); animation: covgrow 900ms var(--ease-out) both; animation-delay: calc(200ms + var(--i, 0) * 50ms); transition: background-color 700ms ease; }
@keyframes covgrow { from { transform: scaleX(0); } }
.panel-body.still .cov-b i { animation: none; }
.ex.hist .sets { font-family: var(--body); font-weight: 500; font-size: 14px; letter-spacing: 0; white-space: normal; text-align: right; max-width: 72%; }
@media (prefers-reduced-motion: reduce) {
  .fresh-in, .stick[aria-pressed="true"] svg, .pk-row[aria-pressed="true"] .pk-tick svg, .cov-b i, .sin.nudge { animation: none; }
  .pk-row[aria-pressed="true"] .pk-tick { transform: none; }
}

/* ---------- v0.52 (Dan, day 2): the session page, swipe and drag, small rings ---------- */
.wo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 -10px; }
.wo-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 10px 0 2px; margin-left: -6px; border: 0; border-radius: 12px; background: none; color: var(--band); font-weight: 600; font-size: 16px; transition: transform 120ms var(--ease-out), background-color 150ms ease, color 700ms ease; }
.wo-back .icon { transform: rotate(180deg); }
.wo-back:active { transform: scale(.96); background: var(--band-12); }
.wo-count { font-size: 14px; color: var(--text-2); }
.wo-count .num { font-size: 20px; color: var(--text); margin-right: 2px; }
.page.session .rest { bottom: calc(var(--dock-h) + 20px + env(safe-area-inset-bottom, 0px)); }
.rest-row.c { display: grid; grid-template-columns: 1fr auto 1fr; }
.rest-row.c .rest-t { display: inline-flex; align-items: baseline; gap: 6px; }
.rest-row.c .btn { justify-self: end; }
/* exercise cards: a grip to drag, the name row swipes left to show Remove */
.woex { position: relative; overflow: hidden; padding: 0; transition: transform 200ms var(--ease-out), opacity 200ms ease, box-shadow 200ms ease; }
.woex-in { position: relative; z-index: 1; background: var(--bg); padding: 6px 12px 4px; display: grid; gap: 4px; border-radius: inherit; transition: transform 240ms var(--ease-out); }
.woex.swiping .woex-in, .woex.lifting { transition: none; }
.woex-del { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 96px; border: 0; background: var(--red); color: var(--ink); font-weight: 700; font-size: 14px; padding: 0 8px; }
.woex-del:active { filter: brightness(.92); }
.woex.gone { transform: translateX(-110%); opacity: 0; }
.woex.lifting { z-index: 5; box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .9), 0 0 0 1px var(--band-40); }
.woex-head { touch-action: pan-y; margin: 0 -6px 0 -8px; }
.woex-head .exlink { flex: 1; min-width: 0; }
.woex-grip { width: 34px; height: 44px; flex: none; display: grid; place-items: center; border: 0; background: none; color: var(--text-3); touch-action: none; cursor: grab; }
.woex-grip .icon { width: 18px; height: 18px; }
.woex-more { background: var(--raised); color: var(--text-2); border: 1px solid var(--line-2); width: 40px; height: 36px; border-radius: 11px; }
html.dragging, html.dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing; }
/* three small rings under the big one */
.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: -8px; }
.mini { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 4px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--lit); color: var(--text); transition: transform 120ms var(--ease-out); }
.mini:active { transform: scale(.96); }
.mini svg { width: 64px; height: 64px; transform: rotate(-90deg); overflow: visible; }
.mini-bg { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 6; }
.mini-arc { fill: none; stroke: var(--band); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: calc(163.4 * (1 - var(--p, 0))); transition: stroke-dashoffset 1100ms var(--ease-out) 250ms, stroke 700ms ease; }
.mini-v { position: absolute; top: 10px; height: 64px; display: flex; align-items: center; justify-content: center; gap: 1px; }
.mini-v .num { font-size: 22px; }
.mini-v small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.mini-l { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .mini-arc, .woex, .woex-in { transition: none; } }
.woex-del { opacity: 0; transition: opacity 120ms ease; }
.woex.swiping .woex-del, .woex.open .woex-del { opacity: 1; }

/* ---------- v0.53: connected apps and imports ---------- */
.steps { margin: 0; padding: 0 0 0 22px; display: grid; gap: 8px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.steps li::marker { color: var(--band); font-family: var(--display); font-weight: 700; }
.steps strong { color: var(--text); font-weight: 600; }
.hk-pick { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.hk-load { display: grid; gap: 6px; padding: 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--band-40); }
.hk-load .bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.hk-load .bar i { display: block; height: 100%; background: var(--band); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 300ms linear; }
.hk-load .link { justify-self: start; }
.hk-err { padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--text); font-size: 15px; animation: rise 260ms var(--ease-out) both; }

/* ---------- v0.54: what to buy ---------- */
.buy { display: grid; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); box-shadow: var(--lit); }
.buy-row { display: grid; grid-template-columns: 74px 1fr 44px; gap: 10px; align-items: start; padding: 12px 10px 12px 14px; border-top: 1px solid var(--line); }
.buy-row:first-child { border-top: 0; }
.buy-step { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--band); padding-top: 2px; transition: color 700ms ease; }
.buy-main { display: grid; gap: 3px; min-width: 0; }
.buy-n { font-weight: 600; font-size: 15px; line-height: 1.3; }
.buy-why { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.buy-alt { font-size: 13px; color: var(--text-3); line-height: 1.4; margin-top: 3px; }
.buy-go { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-2); background: var(--raised); color: var(--text-2); transition: transform 120ms var(--ease-out), border-color 150ms ease; }
.buy-go:active { transform: scale(.92); border-color: var(--band); }
.buy-row.skip { grid-template-columns: 28px 1fr; }
.buy-row.skip .buy-step { color: var(--text-3); padding-top: 1px; }
.buy-gp { padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--band-40); background: var(--band-12); font-size: 15px; line-height: 1.45; }
.buy-gp b { font-weight: 700; }
.buy-target { display: grid; gap: 4px; padding: 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); }
.buy-target .num { font-size: 34px; color: var(--band); }
.buy-target .num small { font-family: var(--body); font-size: 14px; color: var(--text-3); margin-left: 6px; font-weight: 500; }

/* ---------- v0.55: the shelf, drawn products ---------- */
.pa { width: 48px; height: 80px; overflow: visible; }
.pa.big { width: 72px; height: 120px; }
.pa-s { fill: rgba(0, 0, 0, .55); }
.pa-b { fill: #2A2F3A; stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.pa-c { fill: #3A4150; stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.pa-l { fill: var(--band); opacity: .85; transition: fill 700ms ease; }
.shelf-wrap { display: grid; gap: 6px; }
.shelf-h { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; padding: 0 4px; border-bottom: 3px solid #2C313C; border-radius: 0 0 4px 4px; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .9); }
.prod { display: grid; justify-items: center; align-content: end; gap: 4px; padding: 8px 2px 10px; border: 0; background: none; color: var(--text); text-align: center; border-radius: 14px; transition: transform 160ms var(--ease-out), background-color 150ms ease; animation: rise 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.prod:active { transform: translateY(-4px) scale(.97); background: var(--band-12); }
@media (hover: hover) and (pointer: fine) { .prod:hover .pa { transform: translateY(-3px); } }
.prod .pa { transition: transform 200ms var(--ease-out); }
.prod-s { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--band); transition: color 700ms ease; }
.prod-n { font-size: 12px; line-height: 1.3; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.panel-body.still .prod { animation: none; }
.picks { display: grid; gap: 12px; }
.picks-head { display: flex; justify-content: space-between; align-items: center; }
.picks-head .link { min-height: 36px; }
.picks-offer { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-sm); border: 1px dashed var(--line-2); background: var(--bg); }
.picks-art { display: flex; align-items: flex-end; margin-left: -4px; }
.picks-art .pa { width: 30px; height: 50px; margin-right: -6px; }
.picks-t { font-weight: 600; font-size: 15px; }
.picks-offer .sub { font-size: 13px; margin: 2px 0 8px; }
.prod-hero { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: end; padding: 6px 0 4px; }
.prod-big { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin-top: 2px; }
.prod-sec { display: grid; gap: 4px; }
.prod-sec b { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.prod-sec p { font-size: 15px; line-height: 1.5; }
a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.tile .pa { width: 22px; height: 36px; }
@media (prefers-reduced-motion: reduce) { .prod { animation: none; } .prod .pa { transition: none; } }
/* a long sheet is a height-limited grid: rows take their content height and the body scrolls, so a clipped child (a list) never collapses */
.panel-body { grid-auto-rows: max-content; }

/* v0.56: the pact */
.code-wrap { display: grid; gap: 10px; justify-items: center; padding: 6px 0 14px; }
.code-big { font-size: 44px; letter-spacing: .14em; color: var(--band); }
.pact-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0 14px; margin-bottom: 12px; }
.pm { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; min-height: 60px; padding: 8px 0; }
.pm + .pm { border-top: 1px solid var(--line); }
.dots7 { display: flex; gap: 5px; }
.dots7 i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); display: block; }
.dots7 i.on { background: var(--band); }
.dots7 i.today { box-shadow: 0 0 0 2px var(--band-40); }

/* ---------- v0.57: custom length, tour, rehearse ---------- */
.seg.four { grid-template-columns: repeat(4, 1fr); }
.mins-box { display: grid; gap: 10px; }
.mins-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: center; padding: 8px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); animation: rise 260ms var(--ease-out) both; }
.mins-step .num { font-size: 22px; }
.mins-step span { color: var(--text-2); font-size: 14px; }
.tour { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 18px 6px 8px; }
.tour-tile { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px; background: var(--band-12); color: var(--band); animation: rise 360ms var(--ease-out) both; }
.tour-tile .icon { width: 34px; height: 34px; }
.tour-t { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.tour-p { color: var(--text-2); font-size: 16px; line-height: 1.5; max-width: 32ch; min-height: 4.5em; }
.tour-dots { display: flex; gap: 6px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: width 220ms var(--ease-out), background-color 220ms ease; }
.tour-dots i.on { width: 20px; border-radius: 4px; background: var(--band); }
.rh { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 18px 4px 6px; }
.rh-n { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.rh-w { font-size: 40px; line-height: 1.05; min-height: 1.05em; }
.rh-s { min-height: 3em; max-width: 30ch; }
.rh .bar { width: 100%; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin-top: 6px; }
.rh .bar i { display: block; height: 100%; background: var(--band); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 400ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .mins-step, .tour-tile { animation: none; } }

/* ---------- v0.58: one rule, four looks. The rail is the day, a strip opens a feature, a tile holds a number, a switch is a plain row ---------- */
/* the day rail */
.rail { position: relative; display: grid; gap: 8px; padding-left: 38px; --y0: 32px; --len: 0px; --fill: 0px; }
.rail::before, .rail::after { content: ""; position: absolute; left: 14px; top: var(--y0); width: 2px; border-radius: 2px; }
.rail::before { height: var(--len); background: var(--line-2); }
.rail::after { height: var(--fill); background: var(--band); box-shadow: 0 0 10px var(--band-40); transition: height 900ms var(--ease-out), background-color 700ms ease, box-shadow 700ms ease; }
.rail.jump::after { transition: none; }
.stop { position: relative; display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: center; padding: 8px 8px 8px 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lit); transition: background-color 300ms ease, border-color 300ms ease, transform 120ms var(--ease-out); }
.stop::before { content: ""; position: absolute; left: -31px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); box-sizing: border-box; z-index: 1; transition: background-color 300ms ease, border-color 300ms ease; }
.stop[data-done="1"]::before { background: var(--band); border-color: var(--band); }
.stop[data-state="now"]::before { border-color: var(--band); box-shadow: 0 0 0 4px var(--band-20); animation: v58nowdot 2.4s ease-in-out infinite; }
@keyframes v58nowdot { 0%, 100% { box-shadow: 0 0 0 4px var(--band-20); } 50% { box-shadow: 0 0 0 8px var(--band-12); } }
.stop-main { display: grid; gap: 2px; align-content: center; min-height: 44px; padding: 4px 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.stop .when { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); transition: color 700ms ease; }
.stop-t { font-weight: 500; font-size: 15px; line-height: 1.3; }
.stop-m { font-size: 13px; line-height: 1.35; color: var(--text-2); }
.stop[data-done="1"] .stop-t, .stop[data-done="1"] .stop-m { opacity: .5; }
.stop:has(.stop-main:active) { transform: scale(.985); }
.stop[data-state="now"] { grid-template-columns: 1fr 60px; padding: 16px 10px 16px 16px; background: var(--raised); border-color: var(--band-40); box-shadow: var(--lit), 0 22px 40px -22px rgba(0, 0, 0, .9), 0 0 0 1px var(--band-20); }
.stop[data-state="now"] .when { color: var(--band); }
.stop[data-state="now"] .stop-t { margin: 3px 0 2px; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: .98; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.stop[data-state="now"] .stop-m { font-size: 14px; }
.stop[data-state="now"] .tick { width: 60px; height: 60px; }
.stop[data-state="now"] .tick svg { width: 46px; height: 46px; filter: drop-shadow(0 0 10px var(--band-40)); }
.stop[data-state="now"] .tick .ring2 { stroke: var(--band); fill: var(--band-12); }
.tick[aria-pressed="true"] .ring2, .stop[data-state="now"] .tick[aria-pressed="true"] .ring2 { stroke: var(--band); fill: var(--band); }
.tick[aria-pressed="true"] .path { stroke-dashoffset: 0; }
.rail:not(.settled) .stop { animation: rise 420ms var(--ease-out) both; animation-delay: calc(140ms + var(--j, 0) * 45ms); }
.page.still .rail .stop, .page.quick .rail .stop { animation: none; }
.stop.arrive { animation: v58arrive 520ms var(--ease-out) both; }
@keyframes v58arrive { from { opacity: .35; transform: translateY(6px) scale(.97); } }
.stop.just .tick svg, .strip.just .tick svg { animation: tickpop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
/* scene strips */
.strips { display: grid; gap: 10px; }
.strip { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 44px; gap: 6px; align-items: center; min-height: 84px; padding: 8px 8px 8px 18px; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lit), var(--drop); transition: transform 120ms var(--ease-out), border-color 200ms ease; }
.strip.ctl { grid-template-columns: 1fr auto; }
.strip .scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.strip .wash { position: absolute; inset: 0; background: linear-gradient(100deg, var(--surface) 44%, color-mix(in srgb, var(--band) 13%, var(--surface)) 100%); transition: background 700ms ease; }
.strip .scene svg { position: absolute; top: 0; right: 40px; width: 56%; height: 100%; overflow: visible; }
.strip.ctl .scene svg { right: 66px; }
.scene .l { fill: none; stroke: var(--band); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 700ms ease; }
.scene .f { fill: var(--band); transition: fill 700ms ease; }
.strip-btn { display: grid; gap: 4px; align-content: center; min-height: 64px; padding: 6px 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.strip-t { max-width: 66%; font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.strip-m { max-width: 66%; font-size: 13px; line-height: 1.35; color: var(--text-2); }
.strip > .chev { justify-self: center; color: var(--text-2); }
.strip > .tick, .strip > .btn { justify-self: end; white-space: nowrap; }
.strip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--band-12); }
.strip-bar i { display: block; height: 100%; background: var(--band); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 900ms var(--ease-out), background-color 700ms ease; }
.strip[data-done="1"] .strip-t, .strip[data-done="1"] .strip-m { opacity: .55; }
.strip:has(.strip-btn:active) { transform: scale(.985); border-color: var(--line-2); }
.strips > .strip:nth-child(2) { --j: 1; } .strips > .strip:nth-child(3) { --j: 2; } .strips > .strip:nth-child(4) { --j: 3; } .strips > .strip:nth-child(5) { --j: 4; } .strips > .strip:nth-child(6) { --j: 5; } .strips > .strip:nth-child(7) { --j: 6; }
.page:not(.still):not(.quick) .strip .scene svg { animation: v58scenein 760ms var(--ease-out) both; animation-delay: calc(160ms + var(--j, 0) * 70ms); }
.page:not(.still):not(.quick) .strip-bar i { animation: v58barin 1000ms var(--ease-out) both; animation-delay: calc(300ms + var(--j, 0) * 70ms); }
@keyframes v58scenein { from { opacity: 0; transform: translateX(16px); } }
@keyframes v58barin { from { transform: scaleX(0); } }
/* Progress tiles */
.ptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ptile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 156px; padding: 14px 14px 13px; border-radius: 22px; border: 1px solid var(--line); background: var(--raised); box-shadow: var(--lit), var(--drop); color: var(--text); text-align: left; font: inherit; overflow: hidden; transition: transform 120ms var(--ease-out); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ptile:active { transform: scale(.97); }
.ptile.short { min-height: 118px; }
.ptile.wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; background: var(--surface); }
.ptile .pt-ic { display: flex; justify-content: space-between; align-items: flex-start; color: var(--band); transition: color 700ms ease; }
.pt-t { display: block; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
.ptile.wide .pt-t { font-size: 20px; }
.pt-m { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.pt-n { display: block; font-size: 40px; line-height: .9; }
.pt-n small { margin-left: 4px; font-family: var(--body); font-weight: 500; font-size: 13px; color: var(--text-3); }
.pt-due { padding: 3px 8px; border-radius: 999px; background: var(--band); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pt-dots { display: grid; grid-template-columns: repeat(7, 10px); gap: 4px; }
.pt-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.pt-dots i[data-s="on"] { background: var(--band); }
.pt-dots i[data-s="fz"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--band); }
.pt-dots i[data-s="miss"] { background: rgba(255, 255, 255, .14); }
.pt-dots i[data-today] { outline: 1.5px solid var(--text); outline-offset: 1.5px; }
.page:not(.still):not(.quick) .pt-dots i { animation: v58dotpop 360ms var(--ease-out) both; animation-delay: calc(200ms + var(--d, 0) * 14ms); }
@keyframes v58dotpop { from { opacity: 0; transform: scale(.4); } }
.pt-ring { width: 40px; height: 40px; transform: rotate(-90deg); }
.pt-ring-bg { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 5; }
.pt-ring-arc { fill: none; stroke: var(--band); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: calc(113.1 * (1 - var(--p, 0))); transition: stroke 700ms ease; }
.page:not(.still):not(.quick) .pt-ring-arc { animation: v58ring 1100ms var(--ease-out) 300ms both; }
@keyframes v58ring { from { stroke-dashoffset: 113.1; } }
:is(.stop-main, .strip-btn, .ptile):focus-visible { outline: 2px solid var(--band); outline-offset: 2px; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) {
  .stop::before, .stop[data-state="now"]::before, .streak.pop { animation: none !important; }
  .rail::after { transition: none; }
  .rail .stop, .stop.arrive, .strip .scene svg, .strip-bar i, .pt-dots i, .pt-ring-arc, .stop.just .tick svg, .strip.just .tick svg { animation: none !important; }
  .strip, .ptile, .stop { transition: none; }
}

/* ---------- v0.59: Budget or Premium. The switch sits on the shelf, the card shows both side by side ---------- */
.prod-p { font-family: var(--display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1; color: var(--text); }
.shelf.swap .prod, .panel-body.still .shelf.swap .prod { animation: rise 380ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.tier-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.tier-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--bg); color: var(--text); text-align: left; box-shadow: var(--lit); font: inherit; }
button.tier-card { cursor: pointer; transition: transform 120ms var(--ease-out), border-color 150ms ease, background-color 150ms ease; }
button.tier-card:active { transform: scale(.97); border-color: var(--band); }
@media (hover: hover) and (pointer: fine) { button.tier-card:hover { border-color: var(--band-40); } }
.tier-card[aria-current="true"] { border-color: var(--band); background: var(--band-12); }
.tier-l { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); transition: color 700ms ease; }
.tier-card[aria-current="true"] .tier-l { color: var(--band); }
.tier-n { font-size: 14px; font-weight: 600; line-height: 1.3; }
.tier-p { font-size: 26px; margin-top: 6px; }
.tier-u { font-size: 12px; line-height: 1.35; color: var(--text-3); }
.tier-go { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--band); }
.tier-card[aria-current="true"] .tier-go { color: var(--text-2); }
@media (prefers-reduced-motion: reduce) {
  .shelf.swap .prod, .panel-body.still .shelf.swap .prod { animation: none; }
  button.tier-card { transition: none; }
}

/* ---------- v0.59: what he bought, and the Talk button ---------- */
.prod { position: relative; }
.prod-tick { position: absolute; top: 2px; right: 14%; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--band); fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); transition: background-color 700ms ease; z-index: 1; }
.prod-p.own { font-family: var(--display); font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--band); transition: color 700ms ease; }
.own-wrap { display: grid; gap: 4px; justify-items: center; }
.own-btn { border: 1px solid var(--line-2); background: transparent; }
.own-btn[aria-pressed="true"] { border-color: var(--band); background: var(--band-12); }
.own-ic { width: 18px; height: 18px; fill: none; stroke: var(--band); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.own-other { display: grid; gap: 10px; width: 100%; padding: 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); }
.own-other[hidden] { display: none; }
.top-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.talk { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; transition: transform 120ms var(--ease-out), border-color 150ms ease; }
.talk::after { content: ""; position: absolute; inset: -4px; }
.talk .icon { color: var(--band); transition: color 400ms ease; }
.talk .small { color: var(--text); font-size: 14px; font-weight: 600; }
.talk:active { transform: scale(.95); border-color: var(--band); }
@media (prefers-reduced-motion: reduce) { .talk { transition: none; } }

/* ---------- v0.59: the button that deletes is red and comes after the steps; the one that keeps is the white one ---------- */
.btn.wipe-go { background: transparent; border-color: color-mix(in srgb, var(--red) 55%, transparent); color: var(--red); }
.btn.wipe-go:not(:disabled):active { background: color-mix(in srgb, var(--red) 14%, transparent); }

/* v0.60 privacy: the parent or guardian tick on a consent sheet, the legal links on the welcome screen, the GP line under tabs */
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: 15px; line-height: 1.45; min-height: 44px; cursor: pointer; }
.check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--band); }
.legal-links { text-align: center; margin-top: 4px; }
.legal-links a, .fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.page-foot { text-align: center; margin-top: 8px; }

/* ---------- v0.61: meal prep. Protein is the big number, the steps are numbered, the shop ticks off ---------- */
.meals { display: grid; gap: 8px; }
.meal { display: grid; grid-template-columns: 62px 1fr 24px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--lit); color: var(--text); text-align: left; font: inherit; transition: transform 120ms var(--ease-out), border-color 150ms ease; animation: rise 360ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.meal:active { transform: scale(.98); border-color: var(--band); }
.panel-body.still .meal { animation: none; }
.meal-p { display: grid; justify-items: center; line-height: 1; }
.meal-p .num { font-size: 30px; color: var(--band); transition: color 700ms ease; }
.meal-p small { font-size: 11px; color: var(--text-3); margin-top: 4px; text-align: center; }
.meal-p.big .num { font-size: 56px; }
.meal-t { display: grid; gap: 3px; min-width: 0; }
.meal-n { font-weight: 600; font-size: 16px; line-height: 1.3; }
.meal-m { font-size: 13px; color: var(--text-3); }
.meal-tick { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--band); fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.meal-hero { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.meal-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.meal-facts span { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.meal-facts .num { font-size: 20px; }
.meal-facts small { font-size: 11px; color: var(--text-3); text-align: center; }
ol.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 12px; }
ol.steps li { counter-increment: st; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 15px; line-height: 1.5; }
ol.steps li::before { content: counter(st); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--bg); background: var(--band); transition: background-color 700ms ease; }
.shop { display: grid; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.shop-i { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; min-height: 52px; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; font: inherit; }
.shop-i:first-child { border-top: 0; }
.shop-box { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: background-color 150ms ease, border-color 150ms ease; }
.shop-box svg { width: 16px; height: 16px; fill: none; stroke: var(--bg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.shop-i[aria-pressed="true"] .shop-box { background: var(--band); border-color: var(--band); }
.shop-i[aria-pressed="true"] .shop-n { color: var(--text-3); text-decoration: line-through; }
.shop-a { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--text-2); text-align: right; }
@media (prefers-reduced-motion: reduce) { .meal { animation: none; transition: none; } .shop-box { transition: none; } }

/* ---------- v0.62: try a new cut. Cards to swipe, his own photo once he adds it ---------- */
.cuts { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; overscroll-behavior-x: contain; }
.cuts::-webkit-scrollbar { display: none; }
.cut-card { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--lit); color: var(--text); text-align: left; font: inherit; transition: transform 120ms var(--ease-out), border-color 150ms ease; }
.cut-card:active { transform: scale(.98); border-color: var(--band); }
.cut-pic { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--bg) center / cover no-repeat; border-bottom: 1px solid var(--line); }
.cut-pic svg { width: 58%; height: auto; }
.cut-pic svg .l { fill: none; stroke: var(--band); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 700ms ease; }
.cut-pic.has svg { display: none; }
.cut-body { display: grid; gap: 6px; padding: 12px 14px 14px; align-content: start; }
.cut-n { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.05; }
.cut-fit { justify-self: start; font-size: 12px; font-weight: 600; color: var(--band); padding: 3px 8px; border-radius: 999px; background: var(--band-12); transition: color 700ms ease, background-color 700ms ease; }
.cut-w { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.cut-hero { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.cut-pic.big { border-radius: var(--r-sm); border: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .cut-card { transition: none; } }

/* v0.63 focus, the sports week, recommendations */
.focus-g { gap: 6px; }
.focus-gt { display: block; margin-top: 4px; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.chips.nudge { animation: shake 380ms var(--ease-out); }
.seg.five button { min-height: 48px; font-size: 13px; font-weight: 600; padding: 4px 2px; line-height: 1.15; text-align: center; }
.h3 { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin: 18px 0 2px; }
.ex.recs li, .ex.fuel li, .ex.week-why li { display: block; color: var(--text); font-size: 15px; line-height: 1.45; }
.ex.recs li b, .ex.week-why li b { font-weight: 600; margin-right: 4px; }
.ex.recs li i { color: var(--text-2); font-style: normal; font-size: 14px; }
.ex.fuel li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; }
.ex.fuel li > span:first-child { color: var(--text-2); font-size: 13px; font-weight: 600; padding-top: 2px; }
.ex .sets.plain-sets { font-family: var(--body); font-size: 15px; font-weight: 500; letter-spacing: 0; white-space: normal; color: var(--text); }
.ex.week-why li small { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; }
.ex.week-why li.is-today { box-shadow: inset 3px 0 0 var(--band); padding-left: 12px; }
.focus-tabs { margin-bottom: 4px; }
.focus-tabs button { min-height: 44px; font-size: 14px; font-weight: 600; }
.sub.warn { color: var(--amber, var(--text)); }
.strip .strip-x { position: relative; z-index: 2; width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { .chips.nudge { animation: none; } }
details.guide > .ex, details.guide > .guide-k { animation: rise 360ms var(--ease-out) both; }
details.guide > .ex { padding-bottom: 12px; }
.guide-k { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 10px 0 0; }
.ex.recs li small { color: var(--text-3); font-size: 12px; }
.ex.recs li.is-today { box-shadow: inset 3px 0 0 var(--band); padding-left: 12px; }
@media (prefers-reduced-motion: reduce) { details.guide > .ex, details.guide > .guide-k { animation: none; } }
.fuel-chips { margin-bottom: 6px; }
.fuel-chips .chip { font-size: 14px; }
.chip.more { border-style: dashed; color: var(--text-2); }
ol.warm { counter-reset: warm; }
ol.warm li { counter-increment: warm; display: grid; grid-template-columns: 28px 1fr; gap: 8px; }
ol.warm li::before { content: counter(warm); font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--band); line-height: 1.3; }
.sheet-up .toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 14px); }

/* v0.81: the research behind a tip folds away so the tips read short (fifth usability test: focus sheets read like textbooks) */
.why-it { margin-top: 4px; }
.why-it summary { cursor: pointer; color: var(--text-3); font-size: 13px; list-style: none; display: inline-flex; min-height: 32px; align-items: center; }
.why-it summary::-webkit-details-marker { display: none; }
.why-it summary::after { content: ""; width: 6px; height: 6px; margin-left: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); transition: transform 150ms var(--ease-out); }
.why-it[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.why-it i { display: block; color: var(--text-3); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .why-it summary::after { transition: none; } }
/* Head game topics scroll sideways in one row instead of stacking four rows deep on small phones */
.chips.scroll-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x proximity; }
.chips.scroll-row::-webkit-scrollbar { display: none; }
.chips.scroll-row .chip { flex: 0 0 auto; scroll-snap-align: start; }
/* iOS 15.0 to 15.3 have no color-mix or dvh: a fixed tint and vh keep the sheet capped and the tints visible */
@supports not (color: color-mix(in srgb, red, blue)) { :root { --band-12: rgba(143, 168, 255, .12); --band-20: rgba(143, 168, 255, .2); --band-40: rgba(143, 168, 255, .4); } }
@supports not (height: 100dvh) {
  #app, .page.onboard, .page.onboard.welcome, .page.onboard:not(.welcome) { min-height: 100vh; }
  .panel { max-height: 90vh; }
}

/* Eat for your goal: the diet row folds away until he has one (regression test: 27 chips before any content) */
.diet-pick summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.diet-pick summary::-webkit-details-marker { display: none; }
.diet-pick .tagm { color: var(--text-3); font-size: 13px; }
/* v0.85 visual QA pass (research/visual-qa-2026-10-02.md) */
@media (max-width: 374px) { .strip .scene svg { width: 40%; right: 36px; } .strip-t, .strip-m { max-width: 56%; } }
ol.ex.warm li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; }
.chips.scroll-row { scroll-padding-inline: 16px; }
#ed-sport { display: grid; gap: 16px; }
details.guide:not([open]) { gap: 0; }
.wk { position: relative; }
.wk-l { white-space: nowrap; }
.wk[data-s="done"] .wk-l::before { position: absolute; top: 4px; left: 50%; margin: 0 0 0 -2.5px; }
.script + .script { margin-top: 8px; }
.ex li { align-items: baseline; }
.ex.kv li { align-items: baseline; }
.chips + .sub { margin-top: 10px; }
.seg.five button { white-space: nowrap; }
@media (max-width: 374px) { .seg.five button { font-size: 12px; } }
.strip-m, .row-meta { text-wrap: pretty; }
.strip .scene svg { top: 8%; height: 84%; }
/* one fold language: guide folds and the diet fold get the same chevron as Why it works */
details.guide > summary .tagm { font-size: 0; }
details.guide > summary .tagm::after, .diet-pick summary::after { content: ""; display: inline-block; width: 7px; height: 7px; border: solid var(--text-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); transition: transform 150ms var(--ease-out); }
details.guide[open] > summary .tagm::after, .diet-pick[open] summary::after { transform: rotate(225deg) translateY(-1px); }
@media (prefers-reduced-motion: reduce) { details.guide > summary .tagm::after, .diet-pick summary::after { transition: none; } }

.diet-pick .tagm { margin-left: auto; }

/* Watch it flow: example chats with the move named under each line */
.ex-chat { margin-top: 8px; }
.ex-chat .bub .move { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .02em; color: var(--band); opacity: .9; }
.ex-chat .bub.me .move { color: inherit; opacity: .75; }

/* back to the sheet he came from: the chevron points left */
.sheet-head .x.back { flex: 0 0 auto; }
.sheet-head .x.back svg { transform: rotate(180deg); }
.sheet-head .h2 { flex: 1 1 auto; min-width: 0; }

/* ---------- v0.99.36: hormone health. The habits read as a numbered list, each with its source underneath ---------- */
ol.steps.hh { gap: 14px; }
ol.steps.hh b { display: block; font-weight: 600; font-size: 16px; }
ol.steps.hh p { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
ol.steps.hh small { display: block; margin-top: 4px; font-size: 12px; color: var(--text-3); }

/* Your focus: one line per item, More for the rest (2 Oct) */
.rec-more-btn { background: none; border: 0; padding: 12px 8px; margin: -12px 0 -12px 2px; color: var(--band); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: color 400ms ease; }
.rec-more-btn:active { opacity: .55; }
.rec-all { display: block; margin: -4px 0 8px; }

/* the streak flame (3 Oct): top corner of every page. Lit flickers orange, frozen turns ice blue and stops, out is grey */
.flame-pill { position: fixed; z-index: 15; top: calc(env(safe-area-inset-top, 0px) + 12px); right: max(16px, calc((100vw - 430px) / 2 + 16px)); display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--text); font: inherit; cursor: pointer; transition: transform 120ms var(--ease-out), border-color 400ms ease; }
.flame-pill[hidden] { display: none; }
.flame-pill:active { transform: scale(.94); }
.flame-pill .num { font-family: var(--display); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes flamelick { 0% { transform: scale(1, 1) skewX(0deg); } 35% { transform: scale(.97, 1.05) skewX(-3deg); } 70% { transform: scale(1.02, .97) skewX(2deg); } 100% { transform: scale(.99, 1.04) skewX(-1deg); } }
.flame-pill[data-state="frozen"] { border-color: rgba(120, 190, 255, .45); }
.flame-pill[data-state="frozen"] .num { color: #8fd0ff; }
.flame-pill[data-state="out"] .num { color: var(--text-3); }
.flame-pill.pop { animation: flamepop 700ms var(--ease-out) 1; }
@keyframes flamepop { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .flame-pill.pop { animation: none !important; } }
/* Today: the Talk button moves left of the corner flame */
header.top .top-acts { margin-right: 70px; }

/* the streak flame, cartoon style (3 Oct, after WHOOP): lit is a flat layered fire, frozen is a faceted ice crystal in a flame shape with warm flashes inside, out is a grey fire */
.flame-svg { width: 24px; height: 28px; overflow: visible; }
.flame-svg .fl-ice { display: none; }
[data-state="frozen"] .flame-svg .fl-ice { display: inline; }
[data-state="frozen"] .flame-svg .fl-lit { display: none; }
.fl-lit path { transform-box: fill-box; transform-origin: 50% 100%; }
.fl-out { fill: #ff5b2e; } .fl-mid { fill: #ff9535; } .fl-in { fill: #ffc94d; } .fl-core { fill: #fff3d6; }
[data-state="lit"] .fl-out { animation: flamelick 1.6s ease-in-out infinite alternate; }
[data-state="lit"] .fl-mid { animation: flamelick 1.25s ease-in-out infinite alternate-reverse; }
[data-state="lit"] .fl-in { animation: flamelick 1s ease-in-out infinite alternate; }
[data-state="lit"] .flame-svg { filter: drop-shadow(0 0 6px rgba(255, 120, 40, .5)); }
[data-state="out"] .fl-out { fill: #555b66; } [data-state="out"] .fl-mid { fill: #6c727e; } [data-state="out"] .fl-in { fill: #858b96; } [data-state="out"] .fl-core { fill: #a3a8b1; }
.fl-ice path { stroke: rgba(255, 255, 255, .8); stroke-width: .45; stroke-linejoin: round; }
.cz-1 { fill: #e4f5ff; } .cz-2 { fill: #b6e0f8; } .cz-3 { fill: #7fc0ec; }
.cz-w1 { fill: #ffc6a8; } .cz-w2 { fill: #ffa3b6; }
.cz-core { fill: #8fd0ff; stroke: none !important; }
.cz-out { fill: none; stroke: #fff !important; stroke-width: .9 !important; }
.cz-hi { fill: none; stroke: #fff !important; stroke-width: .9 !important; stroke-linecap: round; opacity: .9; }
[data-state="frozen"] .flame-svg { filter: drop-shadow(0 0 7px rgba(140, 205, 255, .55)); }
[data-state="frozen"] .fl-ice { animation: icebob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
[data-thaw="1"] .cz-w1, [data-thaw="1"] .cz-w2 { animation: icewarm 1.8s ease-in-out infinite; }
@keyframes icebob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6px); } }
@keyframes icewarm { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fl-lit path, .fl-ice, .cz-w1, .cz-w2 { animation: none !important; } }
/* the streak sheet, WHOOP style */
.sk-hero { display: grid; justify-items: center; gap: 2px; margin: 0 0 16px; }
.sk-hero .flame-svg { width: 104px; height: 121px; margin-bottom: 8px; }
.sk-num { font-family: var(--display); font-size: 72px; font-weight: 700; line-height: 1; color: #ff9535; }
.sk-lab { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .12em; color: #ff9535; }
.sk-hero[data-state="frozen"] .sk-num, .sk-hero[data-state="frozen"] .sk-lab { color: #8fd0ff; }
.sk-hero[data-state="out"] .sk-num, .sk-hero[data-state="out"] .sk-lab { color: var(--text-3); }
.sk-card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 14px 16px; margin: 0 0 12px; }
.sk-thaw { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.sk-thaw .flame-svg { width: 36px; height: 42px; }
.sk-thaw b { display: block; font-size: 16px; font-weight: 600; }
.sk-thaw span { color: var(--text-2); font-size: 14px; }
.sk-bars { display: flex; gap: 6px; margin-top: 10px; }
.sk-bars i { flex: 1; height: 5px; border-radius: 999px; background: var(--line-2); }
.sk-bars i.on { background: #8fd0ff; }
.sk-week h4 { margin: 0 0 12px; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--text-2); }
.sk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sk-day { display: grid; justify-items: center; gap: 8px; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); }
.sk-day.today { color: var(--text); }
.sk-ic { width: 30px; height: 34px; display: grid; place-items: center; }
.sk-ic .flame-svg { width: 22px; height: 26px; }
.sk-ic .fl-lit path, .sk-ic .fl-ice, .sk-thaw .fl-lit path { animation: none !important; }
/* v0.99.56 kind streak: a quiet day is a small hollow dot, never a cross; the best run stays on its own card */
.sk-rest { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--text-3); opacity: .7; }
.sk-best { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.sk-best-n { font-size: 30px; color: #ff9535; text-align: center; }
.sk-best b { display: block; font-size: 16px; font-weight: 600; }
.sk-best span:not(.sk-best-n) { color: var(--text-2); font-size: 14px; }
.flame-pill .num:empty { display: none; }
.flame-pill:has(.num:empty) { padding: 0 12px; }
.sk-next { width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed var(--line-2); }

/* ---------- v0.99.45: one idea per card (Byron, 3 Oct: more engaging, not lots of words) ---------- */
.hero-line { display: grid; gap: 6px; margin: 6px 0 4px; }
.hero-line b { font-family: var(--display); font-size: 30px; line-height: 1.02; font-weight: 700; text-wrap: balance; }
.hero-line span { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.deck { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 8px -16px 0; padding: 2px 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.deck::-webkit-scrollbar { display: none; }
/* the sheet body is a one column grid; a deck nested in a block would otherwise size that column to every card side by side */
.panel-body > * { min-width: 0; }
.dk { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 4px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lit); }
.dk-n { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; color: var(--band); font-variant-numeric: tabular-nums; transition: color 700ms ease; }
.dk-tag { position: absolute; top: 18px; right: 16px; padding: 3px 9px; border-radius: 99px; background: var(--raised); font-size: 12px; font-weight: 600; color: var(--text-2); }
.dk-t { margin: 4px 0 0; font-size: 18px; line-height: 1.25; font-weight: 600; text-wrap: balance; }
.dk-l { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.dk-more { display: grid; gap: 10px; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--text-2); animation: rise 280ms var(--ease-out) both; }
.dk-more p { margin: 0; }
.dk-more b { color: var(--text); font-weight: 600; margin-right: 4px; }
.dk-eg { font-style: italic; }
.dk-chat { gap: 6px; }
.dk-chat .bub { font-size: 14px; padding: 8px 12px; animation: none; max-width: 92%; }
.dk-open { margin-top: auto; align-self: flex-start; }
.dk-dots { display: flex; justify-content: center; gap: 7px; margin: 12px 0 2px; }
.dk-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background 240ms ease, transform 240ms var(--ease-out); }
.dk-dots i.on { background: var(--band); transform: scale(1.35); }
.dk-say { gap: 12px; padding-bottom: 16px; }
.dk-place { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dk-say .chat { gap: 8px; }
.dk-say .bub { animation: none; max-width: 100%; font-size: 15px; }
.chips.talk-tabs { margin-bottom: 8px; }
/* Before you walk in: a four step play */
.play { list-style: none; margin: 14px 0 0; padding: 0; }
.play > li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; position: relative; padding-bottom: 18px; }
.play > li::before { content: ""; position: absolute; left: 14px; top: 36px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--band-20); }
.play > li:last-child { padding-bottom: 4px; }
.play > li:last-child::before { display: none; }
.play-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--band); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 17px; transition: background 700ms ease; }
.play h4 { margin: 3px 0 10px; font-size: 17px; font-weight: 600; }
.play .ex { margin: 0; }
.pk-say .bub { font-size: 16px; }
/* Hormone health: the basics as tiles */
.hh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.hh-tile { border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lit); transition: border-color 200ms ease; }
.hh-tile[open] { grid-column: 1 / -1; border-color: var(--band-40); }
.hh-tile > summary { list-style: none; cursor: pointer; display: grid; gap: 4px; align-content: start; min-height: 132px; padding: 14px; -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out); }
.hh-tile > summary::-webkit-details-marker { display: none; }
.hh-tile > summary:active { transform: scale(.985); }
.hh-tile[open] > summary { min-height: 0; }
.hh-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 6px; background: var(--band-12); color: var(--band); }
.hh-tile b { font-size: 16px; line-height: 1.2; font-weight: 600; }
.hh-k { font-size: 13px; line-height: 1.35; color: var(--text-2); }
.hh-tile > p { margin: 0; padding: 0 14px 8px; font-size: 15px; line-height: 1.5; color: var(--text-2); animation: rise 280ms var(--ease-out) both; }
.hh-tile > small { display: block; padding: 0 14px 14px; font-size: 12px; color: var(--text-3); }
/* Haircut: tap the outline */
.faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.face-t { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 88px; padding: 10px 0 8px; border-radius: 14px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out), border-color 200ms ease, background 200ms ease, color 200ms ease; }
.face-t svg { width: 30px; height: 39px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.face-t[aria-pressed="true"] { border-color: var(--band); background: var(--band-12); color: var(--text); font-weight: 700; }
.face-t[aria-pressed="true"] svg { stroke: var(--band); fill: var(--band-20); }
.face-t:active { transform: scale(.96); }
.cut-ask { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lit); }
.cut-ask-l { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.cut-ask .chat { gap: 6px; }
.cut-ask .bub { max-width: 100%; font-size: 16px; }
.cut-ask .sub { margin: 0; }
.cut-avoid { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.cut-avoid .icon { color: var(--text-3); margin-top: 2px; }
.cut-avoid b { color: var(--text); font-weight: 600; margin-right: 5px; }
/* What moves you: the numbers first */
.insight.has-vs { gap: 10px; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs.one { grid-template-columns: 1fr; }
.vs-c { display: grid; gap: 6px; align-content: start; }
.vs-n { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: .95; font-variant-numeric: tabular-nums; color: var(--text-2); }
.vs-n small { margin-left: 3px; font-size: 16px; font-weight: 600; color: var(--text-3); }
.vs-c.hi .vs-n { color: var(--text); }
.vs-c > i { display: block; height: 6px; border-radius: 6px; background: var(--line-2); transform-origin: left center; transform: scaleX(var(--p, 1)); animation: vs-grow 900ms var(--ease-out) both; }
.vs-c.hi > i { background: var(--band); }
.vs-l { font-size: 13px; line-height: 1.3; color: var(--text-2); }
@keyframes vs-grow { from { transform: scaleX(0); } }
/* What MASC knows: one row each */
.mem { margin-top: 10px; padding: 2px 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lit); }
.mem-row { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.mem-row:first-child { border-top: 0; }
.mem-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--raised); color: var(--band); }
.mem-t { display: grid; gap: 1px; min-width: 0; }
.mem-t small { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-3); }
.mem-t > span { font-size: 15px; line-height: 1.4; }
/* the focus picks: tiles, three to a row */
.chips.ftiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chips.ftiles .chip.ftile { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: start; align-content: start; gap: 10px; min-height: 96px; padding: 12px; border-radius: 16px; text-align: left; font-size: 14px; line-height: 1.2; white-space: normal; }
.chips.ftiles .chip.ftile[aria-pressed="true"] { padding: 12px; }
.ft-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--raised); color: var(--text-2); transition: background 200ms ease, color 200ms ease; }
.chips.ftiles .chip.ftile[aria-pressed="true"] .ft-ic { background: var(--band); color: var(--ink); }
.chips.ftiles .chip.ftile[aria-pressed="true"]::before { position: absolute; top: 14px; right: 14px; margin: 0; }
.ft-n { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .dk-more, .hh-tile > p, .vs-c > i { animation: none; }
  .dk-dots i, .face-t, .hh-tile, .hh-tile > summary { transition: none; }
}

/* v0.99.46: sheets are sub pages. Full screen, in from the right, a back button top left, the streak still top right.
   The page behind slides a little left and dims, the iOS push. Byron: "every single thing you click on it takes you
   to a sub page, i dont like the tabs that pop up, also make sure there are back buttons". */
/* v0.99.48.1: the page covers the whole screen on any width (Byron on a wide window: the 430 px panel with the page
   showing beside it still read as a pop up). The content keeps the 430 px phone column, centred. */
.panel { left: 0; right: 0; top: 0; bottom: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .95); transform: translateX(100%); transition: transform 420ms var(--ease-ios); }
.sheet.is-open .panel { transform: none; }
.grab { cursor: default; touch-action: auto; padding: calc(env(safe-area-inset-top, 0px) + 12px) max(16px, calc((100% - 430px) / 2 + 16px)) 6px; }
.panel-body { padding-left: max(16px, calc((100% - 430px) / 2 + 16px)); padding-right: max(16px, calc((100% - 430px) / 2 + 16px)); }
.handle { display: none; }
.sheet-head { justify-content: flex-start; padding-right: 70px; min-height: 44px; }
.sheet-head .h2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; overflow-wrap: anywhere; }
/* v0.99.47.1: a long title never widens the page (it did: "Rep 12: Suggest a group plan" made the column 416 px on a 375 px phone) */
.panel { grid-template-columns: minmax(0, 1fr); }
/* v0.99.48.2: sub pages keep the main pages' glassy look (Byron: "keep the smae glassy look for the pages"). The same
   ambient band glow sits behind each sub page, on the page background, and lists and cards are the raised glass ones. */
.panel { background: var(--bg); }
.panel > .ambient { z-index: 0; }
.panel > .grab, .panel > .panel-body { position: relative; z-index: 1; }
.panel-body .list { background: var(--surface); box-shadow: var(--lit), var(--drop); }
.grab, .sheet-head, .panel-body { min-width: 0; }
.edge { position: absolute; left: 0; top: 0; bottom: 0; width: 20px; z-index: 2; touch-action: none; }
html.sheet-up #view { transform: translateX(-22%); }
html.sheet-up .dock { transform: translateX(-50%); opacity: 0; pointer-events: none; }
html.sheet-up .flame-pill { z-index: 40; }
.panel-body.push > * { animation: subIn 340ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 24ms); }
.panel-body.pop > * { animation: subBack 340ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes subIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes subBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .panel, html.sheet-up #view { transition-duration: 1ms; }
  html.sheet-up #view { transform: none; }
  .panel-body.push > *, .panel-body.pop > * { animation: none; }
}
/* v0.99.46: the Notifications inbox */
.empty-note { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 16px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--text-2); }
.empty-note .icon { width: 28px; height: 28px; justify-self: center; color: var(--text-3); }
.empty-note b { display: block; color: var(--text); font-weight: 600; }
.empty-note span { font-size: 14px; }
.inbox .row-title { font-weight: 500; line-height: 1.35; }
.dot-new { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--band); margin-right: 6px; vertical-align: 1px; }
/* a sub page fills the screen, so its toasts sit low where thumbs are, clear of the back button */
.sheet-up .toast { top: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* v0.99.47: Mates groups. Your code, invites, the week's table, the vote card and the group chat. */
.mate-hero { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 18px 8px 6px; }
.mate-hero .icon { width: 44px; height: 44px; color: var(--band); margin-bottom: 4px; }
.mate-hero b { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.mate-hero span { color: var(--text-2); }
.mate-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mate-how li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--raised); box-shadow: var(--lit); font-weight: 500; }
.mate-how li .icon { color: var(--band); flex: 0 0 auto; }
.code-card { display: grid; justify-items: center; gap: 8px; padding: 18px 16px 16px; border-radius: var(--r); background: linear-gradient(160deg, var(--band-12), transparent 70%), var(--raised); border: 1px solid var(--band-20); box-shadow: var(--lit); }
.code-card.small { padding: 14px; }
.code-l { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.code-n { font-size: 46px; line-height: 1; letter-spacing: .08em; color: var(--band); font-variant-numeric: tabular-nums; }
.code-card.small .code-n { font-size: 32px; }
.code-card .btn .icon { margin-right: 6px; }
.code-in { font-family: var(--display); font-size: 30px; letter-spacing: .14em; text-align: center; font-variant-numeric: tabular-nums; }
.inv-card { display: grid; grid-template-columns: 44px 1fr; gap: 10px 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--band-40); box-shadow: var(--lit); }
.inv-card b { display: block; font-weight: 600; }
.inv-card div > span { color: var(--text-2); font-size: 14px; }
.inv-card .row-btns { grid-column: 1 / -1; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--band); color: var(--ink); font-size: 12px; font-weight: 700; vertical-align: 2px; }
.ch-card { display: grid; gap: 6px; padding: 16px; border-radius: var(--r); background: linear-gradient(150deg, var(--band-20), transparent 65%), var(--raised); border: 1px solid var(--band-20); box-shadow: var(--lit); }
.ch-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--band); }
.ch-n { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 28px; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.ch-n .icon { width: 26px; height: 26px; color: var(--band); flex: 0 0 auto; }
.ch-m { color: var(--text-2); font-size: 14px; }
.board { list-style: none; margin: 0; padding: 4px 0; display: grid; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.board li { display: grid; grid-template-columns: 32px minmax(0, 1fr) 72px 52px; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px; }
.board li + li { border-top: 1px solid var(--line); }
.board li.me { background: var(--band-12); }
.b-rank { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--text-3); text-align: center; }
.b-rank .icon { color: var(--amber); width: 20px; height: 20px; }
.b-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-bar { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.b-bar i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--band); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 600ms var(--ease-out); }
.b-score { font-size: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.last-win { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--raised); color: var(--text-2); font-size: 14px; }
.last-win .icon { color: var(--amber); flex: 0 0 auto; }
.chat { display: grid; gap: 8px; align-content: start; padding-bottom: 8px; }
.chat-sys { justify-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 92%; padding: 6px 12px; border-radius: 999px; background: var(--raised); color: var(--text-3); font-size: 13px; text-align: center; }
.chat-sys.res { color: var(--text); border: 1px solid var(--band-20); border-radius: 14px; padding: 8px 12px; }
.chat-sys.res .icon { color: var(--amber); flex: 0 0 auto; }
.bubble-row { display: grid; justify-items: start; gap: 3px; }
.bubble-row.me { justify-items: end; }
.bubble-row .bub { border: 0; color: inherit; font: inherit; text-align: left; border-bottom-left-radius: 6px; cursor: pointer; }
.bubble-row .bub.me { color: var(--ink); border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.b-from { font-size: 12px; font-weight: 600; color: var(--text-3); padding-left: 6px; }
.b-acts { display: flex; gap: 16px; padding-left: 6px; }
.b-acts .link { font-size: 13px; min-height: 32px; }
.vote-card { display: grid; gap: 8px; padding: 14px; border-radius: var(--r); background: var(--raised); border: 1px solid var(--band-40); box-shadow: var(--lit); margin: 4px 0; }
.vote-opt { position: relative; overflow: hidden; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; transition: border-color 150ms ease, transform 120ms var(--ease-out); }
.vote-opt:active { transform: scale(.98); }
.vote-opt[disabled] { cursor: default; opacity: .7; }
.vote-opt.mine { border-color: var(--band); }
.vote-opt > * { position: relative; }
.vote-opt .icon { color: var(--band); }
.vo-bar { position: absolute; inset: 0; background: var(--band-12); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 500ms var(--ease-out); }
.vote-opt.mine .vo-bar { background: var(--band-20); }
.vo-n { font-size: 18px; }
.vo-foot { font-size: 13px; color: var(--text-3); }
.composer { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; align-items: center; margin: 0 -16px calc(-24px - env(safe-area-inset-bottom, 0px)); padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); z-index: 2; }
.composer .input { flex: 1 1 auto; min-width: 0; border-radius: 999px; }
.composer .chat-send { flex: 0 0 auto; width: 48px; min-height: 48px; padding: 0; border-radius: 50%; }
.composer.quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.composer.quick::-webkit-scrollbar { display: none; }
.composer.quick .chip { flex: 0 0 auto; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .b-bar i, .vo-bar, .vote-opt { transition: none; } }
/* the chat page: messages sit at the bottom like any chat, the box stays pinned under them */
.panel-body:has(> .composer) { grid-template-rows: 1fr auto; grid-auto-rows: auto; align-content: stretch; padding-bottom: 0; }
.panel-body > .composer { bottom: 0; margin-bottom: 0; }
.panel-body:has(> .composer) > .chat { align-content: end; }

/* ---------- v0.99.48: the top of Coach, and a line on each page for the first few visits ---------- */
/* the rep card: the step number in a badge that says what it is, the title beside it */
.rep-a { grid-template-columns: 68px 1fr; gap: 16px; align-items: center; }
.rep-badge { width: 68px; height: 68px; border-radius: 20px; display: grid; place-content: center; justify-items: center; gap: 4px; background: var(--band-12); border: 1px solid var(--band-40); box-shadow: var(--lit); }
.rep-badge .rep-n { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: .85; color: var(--band); }
.rep-badge small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.rep-a .rep-title { font-size: 24px; line-height: 1.15; }
/* the line to say is a message he would send */
.rep-say { display: grid; margin-top: 2px; }
.rep-say .bub { justify-self: end; max-width: 88%; font: inherit; font-size: 17px; line-height: 1.4; font-weight: 500; text-align: left; border: 0; padding: 12px 16px; }
.rep-say button.bub { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out); }
.rep-say button.bub:active { transform: scale(.98); }
/* no quote mark in the corner of a quoted card (Byron: random quotation marks) */
.script::before { content: none; }
.script { padding: 16px 18px; }
/* page intros: one plain line under the title, not a banner */
.pg-intro { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; margin: -10px 0 8px; transition: opacity 180ms ease, transform 180ms var(--ease-out); }
.pg-intro p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.pg-x { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; color: var(--text-3); cursor: pointer; }
.pg-intro.going { opacity: 0; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .pg-intro, .rep-say button.bub { transition: none; } }

/* ---------- v0.99.49: the daily testosterone tip and fact on Today ---------- */
button.daily-t { position: relative; isolation: isolate; display: grid; gap: 8px; width: 100%; margin: 0; padding: 16px 18px 12px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(100deg, var(--surface) 52%, color-mix(in srgb, var(--band) 11%, var(--surface)) 100%); box-shadow: var(--lit), var(--drop); color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 120ms var(--ease-out), background 700ms ease; }
button.daily-t:active { transform: scale(.985); }
.dt-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--band); transition: color 700ms ease; }
.dt-tip { font-size: 18px; line-height: 1.35; font-weight: 600; text-wrap: pretty; }
.dt-fact { padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--text-2); }
.dt-fact b { color: var(--text); font-weight: 600; margin-right: 2px; }
.dt-p { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line-2); color: var(--text-2); }
.dt-src { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; font-size: 12px; color: var(--text-3); }
.dt-item { display: grid; gap: 8px; padding: 16px 18px 8px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lit); }
.dt-big { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 600; text-wrap: pretty; }
a.dt-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--band); font-weight: 600; font-size: 14px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { button.daily-t { transition: none; } }

/* ---------- v0.99.50: your day, picked at the start and in You ---------- */
.chips.day-tiles { grid-template-columns: 1fr 1fr; }
.chips.day-tiles .chip.ftile { grid-template-rows: auto auto 1fr; gap: 6px; min-height: 116px; }
.ft-s { font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--text-2); }
.chips.day-tiles + .fine { margin-top: 10px; }

/* ---------- v0.99.51: more than one sport ---------- */
.sp-extra { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sp-rm { justify-self: start; color: var(--text-2); }
.sp-add { margin-top: 12px; }

/* ---------- v0.99.52: Presence ---------- */
a.dk-src { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--band); font-size: 13px; font-weight: 600; text-decoration: none; }
.fuel-body > .sub:first-child { margin-top: 4px; }

/* ---------- v0.99.53: meal prep for gaining ---------- */
.seg.meal-goal { margin-bottom: 4px; }
.tips-w a.dk-src { min-height: 0; display: inline; font-size: 12px; }

/* ---------- v0.99.54: the focus audit ---------- */
.minis { grid-template-columns: repeat(2, 1fr); }
.sec-h { margin: 26px 4px 12px; }
.page > .sec-h:first-of-type { margin-top: 8px; }

/* ---------- v0.99.55: the wall stand on the Posture tab ---------- */
.ws-card { margin: 4px 0 16px; padding-bottom: 16px; }
.ws-how { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.ws-card .btn { margin-top: 4px; }

/* v0.99.56 honest AI waiting: a small orb in the band colour breathes beside a plain label; reduced motion keeps a still dot */
.ai-wait { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); }
.ai-orb { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0%, var(--band) 55%, color-mix(in srgb, var(--band) 60%, #000) 100%); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--band) 55%, transparent); animation: aiorb 1600ms ease-in-out infinite; }
.ai-orb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--band) 35%, transparent) 0%, transparent 70%); animation: aiglow 1600ms ease-in-out infinite; }
@keyframes aiorb { 0%, 100% { transform: scale(.85); opacity: .8; } 50% { transform: scale(1); opacity: 1; } }
@keyframes aiglow { 0%, 100% { transform: scale(.8); opacity: .4; } 50% { transform: scale(1.25); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .ai-orb, .ai-orb::after { animation: none; } .ai-orb::after { display: none; } }