/* Fitness: training for riding first, and running, swimming and strength alongside. In keeping with the site's other apps:
   the account page's sky (night in dark mode, dawn in light) with its three slow lights, one of them warmer here; iOS 27's
   Liquid Glass over it (clear panes on the sky, the stronger blurred glass for what floats: the tab bar, the buttons at
   the top, sheets, toasts); grouped rows as Settings has them; a large title that goes with the page; sheets that come
   up from below and step the page back. Its own colour is coral (a ride's evening sky), and effort is drawn in the
   seven zone colours Zwift and TrainerRoad have taught every rider to read: grey, blue, green, yellow, orange, red,
   purple. All of it still with Reduce Motion, solid with Reduce Transparency. */

:root {
  color-scheme: dark;
  --sky-a: #1a1a3e; --sky-b: #0d0f28; --sky-c: #05060e;
  --sky-top: #24224f;
  --aura-1: rgba(255, 110, 70, 0.4); --aura-2: rgba(160, 90, 255, 0.36); --aura-3: rgba(40, 190, 230, 0.3);
  --text: #f5f6fb; --text-2: rgba(235, 238, 250, 0.72); --text-3: rgba(235, 238, 250, 0.56);
  --glass: rgba(34, 38, 62, 0.5); --glass-strong: rgba(28, 31, 52, 0.86); --glass-ctl: rgba(255, 255, 255, 0.1); --cell: rgba(255, 255, 255, 0.07); --sheet: rgba(26, 29, 50, 0.94);
  --line: rgba(255, 255, 255, 0.1); --press: rgba(255, 255, 255, 0.07); --field: rgba(0, 0, 0, 0.24);
  /* (buttons and links in the site's blue, as the account page's, InFlight's and Weather's; coral is Fitness's own, for its icon and rides) */
  --tint: #5aa9ff; --tint-deep: #2a6ae6; --tint-text: #8cc2ff; --on-tint: #fff;
  --danger: #ff6a5f; --good: #4fdc8e; --good-text: #4fdc8e; --warn: #ffbd4a;
  /* effort, by zone (a share of FTP: workouts.js ZONES), and the lines of fitness, fatigue and form */
  --z1: #a3abc0; --z2: #4aa3ff; --z3: #3fd08f; --z4: #ffd23f; --z5: #ff9440; --z6: #ff5a5a; --z7: #c07bff;
  --fit: #4aa3ff; --fat: #ff6fae; --form-up: #3fd08f; --form-down: #ffb340;
  --hr: #ff5a7a; --pwr: #ffb340; --ele: rgba(160, 175, 210, 0.32); --spd: #4fd2ff;
  /* each sport's tile */
  --s-ride: linear-gradient(160deg, #ff9a6a, #ee4b2f); --s-run: linear-gradient(160deg, #4fdc8e, #1fa75a); --s-swim: linear-gradient(160deg, #5ad8f0, #1b8fc0);
  --s-strength: linear-gradient(160deg, #8a86ff, #5a4fe0); --s-walk: linear-gradient(160deg, #9aa3b8, #6b7389);
  --edge: inset 0 1px 0.5px rgba(255, 255, 255, 0.42), inset 0 -1px 0.5px rgba(255, 255, 255, 0.08), inset 0 0 22px rgba(255, 255, 255, 0.03);
  --lift: 0 0 0 0.5px rgba(0, 0, 0, 0.4), 0 22px 44px -18px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.16);
  --blur: blur(28px) saturate(180%);
  --sheen: radial-gradient(140% 90% at 12% -20%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 46%);
  --dim: rgba(0, 0, 0, 0.5);
  /* the motion every app on the site shares */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-glide: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: linear(0, 0.019, 0.067, 0.135, 0.214, 0.3, 0.388, 0.473, 0.553, 0.628, 0.695, 0.755, 0.807, 0.852, 0.89, 0.921, 0.947, 0.968, 0.984, 0.996, 1.005, 1.012, 1.016, 1.018, 1.02, 1.02, 1.019, 1.018, 1.017, 1.015, 1.013, 1.012, 1.01, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1);
  --dur-press: 0.1s; --dur-release: 0.45s; --dur-fast: 0.2s; --dur-base: 0.35s; --dur-sheet-in: 0.5s; --dur-sheet-out: 0.34s;
  --r-group: 26px; --r-hero: 34px; --r-sheet: 36px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-d: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-r: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;   /* (big figures, as Fitness has them) */
  --top: env(safe-area-inset-top, 0px);
}
@supports not (transition-timing-function: linear(0, 1)) { :root { --ease-spring: cubic-bezier(0.2, 1.1, 0.4, 1); } }
/* light: by the device's setting (Automatic), or chosen in Settings (data-theme, set by theme.js) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --sky-a: #fbe9e3; --sky-b: #f3f0fb; --sky-c: #f7f8fc; --sky-top: #f8e2da;
    --aura-1: rgba(255, 140, 100, 0.36); --aura-2: rgba(200, 150, 255, 0.32); --aura-3: rgba(90, 210, 240, 0.26);
    --text: #0d1020; --text-2: rgba(20, 24, 44, 0.68); --text-3: rgba(20, 24, 44, 0.62);
    --glass: rgba(255, 255, 255, 0.58); --glass-strong: rgba(250, 251, 255, 0.9); --glass-ctl: rgba(20, 30, 60, 0.06); --cell: rgba(255, 255, 255, 0.78); --sheet: rgba(244, 245, 251, 0.95);
    --line: rgba(20, 24, 44, 0.09); --press: rgba(20, 24, 44, 0.05); --field: rgba(20, 30, 60, 0.06);
    --tint: #2f7af0; --tint-deep: #1f5fd8; --tint-text: #1f63d6;
    --danger: #d12a1f; --good: #1f9d55; --good-text: #167a42; --warn: #945600;
    --z1: #8b93a8; --z2: #2f86f0; --z3: #1fae6b; --z4: #e8b400; --z5: #f27318; --z6: #e53935; --z7: #9b51e0;
    --fit: #2f86f0; --fat: #e0447f; --form-up: #1fae6b; --form-down: #e88a10;
    --hr: #e5395f; --pwr: #f08a10; --ele: rgba(90, 100, 140, 0.2); --spd: #1aa3d6;
    --edge: inset 0 1px 0.5px rgba(255, 255, 255, 0.95), inset 0 -1px 0.5px rgba(255, 255, 255, 0.4), inset 0 0 22px rgba(255, 255, 255, 0.3);
    --lift: 0 0 0 0.5px rgba(20, 30, 60, 0.08), 0 22px 44px -20px rgba(40, 50, 100, 0.28), 0 2px 6px rgba(40, 50, 100, 0.06);
    --sheen: radial-gradient(140% 90% at 12% -20%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 46%);
    --dim: rgba(10, 14, 30, 0.32);
  }
}
:root[data-theme="light"] {
    color-scheme: light;
    --sky-a: #fbe9e3; --sky-b: #f3f0fb; --sky-c: #f7f8fc; --sky-top: #f8e2da;
    --aura-1: rgba(255, 140, 100, 0.36); --aura-2: rgba(200, 150, 255, 0.32); --aura-3: rgba(90, 210, 240, 0.26);
    --text: #0d1020; --text-2: rgba(20, 24, 44, 0.68); --text-3: rgba(20, 24, 44, 0.62);
    --glass: rgba(255, 255, 255, 0.58); --glass-strong: rgba(250, 251, 255, 0.9); --glass-ctl: rgba(20, 30, 60, 0.06); --cell: rgba(255, 255, 255, 0.78); --sheet: rgba(244, 245, 251, 0.95);
    --line: rgba(20, 24, 44, 0.09); --press: rgba(20, 24, 44, 0.05); --field: rgba(20, 30, 60, 0.06);
    --tint: #2f7af0; --tint-deep: #1f5fd8; --tint-text: #1f63d6;
    --danger: #d12a1f; --good: #1f9d55; --good-text: #167a42; --warn: #945600;
    --z1: #8b93a8; --z2: #2f86f0; --z3: #1fae6b; --z4: #e8b400; --z5: #f27318; --z6: #e53935; --z7: #9b51e0;
    --fit: #2f86f0; --fat: #e0447f; --form-up: #1fae6b; --form-down: #e88a10;
    --hr: #e5395f; --pwr: #f08a10; --ele: rgba(90, 100, 140, 0.2); --spd: #1aa3d6;
    --edge: inset 0 1px 0.5px rgba(255, 255, 255, 0.95), inset 0 -1px 0.5px rgba(255, 255, 255, 0.4), inset 0 0 22px rgba(255, 255, 255, 0.3);
    --lift: 0 0 0 0.5px rgba(20, 30, 60, 0.08), 0 22px 44px -20px rgba(40, 50, 100, 0.28), 0 2px 6px rgba(40, 50, 100, 0.06);
    --sheen: radial-gradient(140% 90% at 12% -20%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 46%);
    --dim: rgba(10, 14, 30, 0.32);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* (at least the tallest the screen gets, its browser bars tucked away: a page shorter than that leaves Safari's fixed tab
   bar floating partway up, where the bars were) */
body { margin: 0; min-height: 100vh; min-height: 100lvh; font: 17px/1.35 var(--font); letter-spacing: -0.2px; color: var(--text); background: var(--sky-c);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
/* (no zooming: no pinch, and no double-tap; app.js stops Safari's pinch, which pays this no heed) */
html { touch-action: pan-x pan-y; }
button, a, input, select, label { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
dialog.sheet:focus, dialog.sheet:focus-visible { outline: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.noscript { text-align: center; padding: 80px 24px; color: var(--text-2); }
.num { font-variant-numeric: tabular-nums; }

/* ---- the sky: three slow lights drifting over the gradient (the account page's, one warmer) ---- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%, var(--sky-a), var(--sky-b) 52%, var(--sky-c)) var(--sky-top); }
@media (hover: none) {
  .sky { bottom: auto; height: calc(100% - 120px); -webkit-mask-image: linear-gradient(#000 calc(100% - 160px), transparent); mask-image: linear-gradient(#000 calc(100% - 160px), transparent); }
}
.aura { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: 0.9; will-change: transform; }
.a1 { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--aura-1) 73%, transparent), color-mix(in srgb, var(--aura-1) 66%, transparent) 20%, color-mix(in srgb, var(--aura-1) 49%, transparent) 40%,
  color-mix(in srgb, var(--aura-1) 29%, transparent) 60%, color-mix(in srgb, var(--aura-1) 12%, transparent) 80%, transparent); top: -32vmax; left: -22vmax; animation: drift1 38s steps(76) infinite alternate, aura-in 0.9s ease-out backwards; }
.a2 { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--aura-2) 73%, transparent), color-mix(in srgb, var(--aura-2) 66%, transparent) 20%, color-mix(in srgb, var(--aura-2) 49%, transparent) 40%,
  color-mix(in srgb, var(--aura-2) 29%, transparent) 60%, color-mix(in srgb, var(--aura-2) 12%, transparent) 80%, transparent); top: 10vmax; right: -34vmax; animation: drift2 46s steps(92) infinite alternate, aura-in 0.9s ease-out 0.1s backwards; }
.a3 { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--aura-3) 73%, transparent), color-mix(in srgb, var(--aura-3) 66%, transparent) 20%, color-mix(in srgb, var(--aura-3) 49%, transparent) 40%,
  color-mix(in srgb, var(--aura-3) 29%, transparent) 60%, color-mix(in srgb, var(--aura-3) 12%, transparent) 80%, transparent); bottom: -40vmax; left: 4vmax; animation: drift3 54s steps(108) infinite alternate, aura-in 0.9s ease-out 0.2s backwards; }
@keyframes aura-in { from { opacity: 0; } }
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-16vmax, 8vmax) scale(0.9); } }
@keyframes drift3 { to { transform: translate(10vmax, -12vmax) scale(1.08); } }
body.sheet-up .aura { animation-play-state: paused; }

/* ---- behind the status bar: glass, once the page has scrolled under it ---- */
.status { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: var(--top); pointer-events: none; opacity: var(--bar, 0);
  background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: opacity 0.2s linear; }
.page { transform-origin: 50% var(--sy, 0px); transition: transform var(--dur-sheet-out) var(--ease-glide); }
body.sheet-up .page { transform: scale(0.94) translateY(calc(var(--top) + 10px)); transition-duration: var(--dur-sheet-in); }
main { max-width: 680px; margin: 0 auto; padding: calc(var(--top) + 20px) max(16px, env(safe-area-inset-right, 0px)) calc(120px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
@media (min-width: 760px) { main { padding-top: calc(var(--top) + 48px); } }

/* ---- a screen's top: its large title, a line under it, and its buttons ---- */
.head { display: flex; align-items: center; gap: 10px; margin: 0 4px 18px; }
.head .t { flex: 1; min-width: 0; }
.head h1 { margin: 0; font: 700 34px/1.08 var(--font-d); letter-spacing: 0.4px; text-wrap: balance; }
.head .sub { margin-top: 4px; color: var(--text-2); font-size: 15px; }
.round { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; color: var(--text);
  background: var(--sheen), var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--edge), var(--lift);
  transition: transform var(--dur-release) var(--ease-spring); }
.round:active { transform: scale(0.92); transition-duration: var(--dur-press); }
.round.me { font: 600 18px/1 var(--font-d); color: #fff; background: linear-gradient(160deg, #ff9a6a, #ee4b2f 60%, #b8379a); }
.round.me { overflow: hidden; }
.round.me img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* your account's card, in You */
button.card.acct { padding: 14px 16px; }
.acct .wx .chev { margin-left: auto; color: var(--text-3); display: grid; }

/* ---- signed out: what Fitness is, and Sign in (the account's page does the rest) ---- */
body.out .tabbar, body.out .drop { display: none; }
/* signed out: the app's mark high on the page, Sign in at its foot (as InFlight's and Weather's are) */
body.out main { padding-bottom: 0; }
.welcome { min-height: calc(100svh - var(--top) - 20px); display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; max-width: 420px; margin: 0 auto;
  padding: 0 0 calc(55px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
/* (the mark and Sign in where InFlight's are: its logo's glow 32px about it, its "New here?" under its button) */
.w-top { margin-top: calc(max(16vh, 80px) + 12px); display: grid; justify-items: center; gap: 12px; }
.w-cta { width: 100%; box-sizing: border-box; padding: 0 4px; display: grid; justify-items: center; gap: 12px; }
.welcome .mark { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 18px 40px -16px rgba(238, 75, 47, 0.7), 0 0 0 0.5px rgba(255, 255, 255, 0.2); margin-bottom: 6px; }
.welcome h1 { margin: 0; font: 700 38px/1.05 var(--font-d); letter-spacing: 0.3px; }
.welcome .btn { max-width: 420px; }
.welcome .btn:disabled { opacity: 0.55; cursor: default; }
.welcome .small { margin: 0; font-size: 13px; color: var(--text-3); line-height: 1.4; }
.welcome .said { color: var(--text-2); }
.link.small { font-size: 14px; }

/* ---- glass ---- */
.glass { position: relative; background: var(--sheen), var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--edge), var(--lift); }
.rise { animation: rise 0.8s var(--ease-glide) backwards; animation-delay: calc(var(--i, 0) * 60ms + 40ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
/* (a screen changing: the new one coming up into place, quickly) */
.screen.in { animation: screen-in 0.42s var(--ease-out) backwards; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } }

/* ---- cards ---- */
.card { border-radius: var(--r-group); padding: 18px; margin-bottom: 16px; }
.card.hero { border-radius: var(--r-hero); padding: 20px; }
.card > h3, .k { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font: 600 13px/1.2 var(--font); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-3); }
.k svg { flex: none; }
.k .more { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 15px; color: var(--tint-text); background: none; border: 0; padding: 0; }
button.card { display: block; width: 100%; text-align: left; border: 0; color: inherit; font: inherit; transition: transform var(--dur-release) var(--ease-spring); }
button.card:active { transform: scale(0.985); transition-duration: var(--dur-press); }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.cards2 > .card { margin: 0; }

/* today's session */
.session .sport { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; background: var(--glass-ctl); font-size: 13px; font-weight: 600; color: var(--text-2); }
.session .sport i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #fff; }
.session h2 { margin: 12px 0 4px; font: 700 28px/1.1 var(--font-d); letter-spacing: 0.2px; text-wrap: balance; }
.session .meta { color: var(--text-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.session .about { margin: 10px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.4; }
.session .profile { margin: 16px -4px 4px; }
.session .acts { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.session.done h2 { display: flex; align-items: center; gap: 8px; }
.session.rest h2 { color: var(--text); }
.tick-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: linear-gradient(180deg, #5fe39a, #1fa75a); flex: none; }

/* sport tiles (an activity's, a workout's) */
.tile { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35); }
.tile.small { width: 30px; height: 30px; border-radius: 8px; }
.s-ride { background: var(--s-ride); } .s-run { background: var(--s-run); } .s-swim { background: var(--s-swim); } .s-strength { background: var(--s-strength); } .s-walk, .s-row, .s-other { background: var(--s-walk); }

/* the best time to ride, from Weather */
.wx { display: flex; align-items: center; gap: 14px; }
.wx .wxi { flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; }
.wx .wxi svg { display: block; }
.wx b { display: block; font-size: 17px; font-weight: 600; }
.wx > div { min-width: 0; }
.wx > div > span { display: block; color: var(--text-2); font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }

/* fitness, fatigue, form */
.figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.fig { min-width: 0; }
.fig small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.fig small i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fig b { display: block; margin-top: 2px; font: 600 30px/1.05 var(--font-r); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.fig .word { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; }
.dot-fit { background: var(--fit); } .dot-fat { background: var(--fat); } .dot-form { background: var(--form-up); }
.tone-fresh { color: var(--z2); } .tone-neutral { color: var(--text-2); } .tone-productive { color: var(--good-text); } .tone-high { color: var(--danger); }
.line-said { margin: 10px 0 0; font-size: 15px; color: var(--text-2); line-height: 1.4; }

/* the week, day by day */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
.wday { display: grid; justify-items: center; gap: 6px; min-width: 0; border: 0; background: none; padding: 0; color: inherit; }
.wday .bar { position: relative; width: 100%; max-width: 30px; height: 72px; border-radius: 9px; background: var(--glass-ctl); overflow: hidden; box-shadow: inset 0 0 0 0.5px var(--line); }
.wday .bar .plan { position: absolute; left: 0; right: 0; bottom: 0; border-top: 2px dashed color-mix(in srgb, var(--text) 30%, transparent); }
.wday .bar .done { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 9px 9px; background: linear-gradient(180deg, var(--tint), var(--tint-deep)); }
.wday .bar .done.over { border-radius: 9px; }
.wday .d { font-size: 12px; font-weight: 600; color: var(--text-3); }
.wday.today .d { color: var(--tint-text); }
.wday .mark { height: 16px; display: grid; place-items: center; color: var(--good); }
.wday .mark .o { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); opacity: 0.6; }
.week-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 14px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.week-sum b { color: var(--text); font-weight: 600; }

/* how you feel */
.feel { display: grid; gap: 10px; }
.feel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feel-row > span { font-size: 15px; color: var(--text-2); flex: none; width: 92px; }
.verdict { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; padding: 12px 14px; border-radius: 18px; background: var(--glass-ctl); }
.verdict b { display: block; font-size: 16px; }
.verdict p { margin: 2px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.4; }
.verdict .pill { margin-top: 10px; }

/* the demo's note */
.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 22px; margin-bottom: 16px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.note b { color: var(--text); }
.note .ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--s-ride); }
.note .gos { display: flex; gap: 18px; margin-top: 8px; }
.note .go { font-weight: 600; color: var(--tint-text); background: none; border: 0; padding: 0; font-size: 14px; }

/* ---- segmented control (as Weather's Temp / Rain / Wind) ---- */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); }
.seg button { position: relative; z-index: 1; border: 0; background: none; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; transition: color var(--dur-fast); }
.seg button[aria-pressed="true"] { color: var(--text); }
.seg::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 3)); border-radius: 999px; background: var(--sheen), var(--glass-strong);
  box-shadow: var(--edge), 0 1px 4px rgba(0, 0, 0, 0.18); translate: calc(var(--at, 0) * 100%) 0; transition: translate 0.5s var(--ease-spring); }
.seg.small button { padding: 5px 10px; font-size: 13px; }
.seg.none::before { opacity: 0; }
.seg.wide { display: grid; width: 100%; margin-bottom: 16px; }

/* ---- grouped rows, as Settings has them ---- */
.section { margin: 0 0 22px; }
.section > h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 18px 8px; font: 600 13px/1.2 var(--font); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.section > h3 .aside { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.section > .foot { margin: 8px 20px 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.section > .foot b { color: var(--text-2); font-weight: 600; }
.group { border-radius: var(--r-group); overflow: hidden; }
.row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 10px 18px; border: 0; background: none; text-align: left; color: inherit; text-decoration: none; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 68px; right: 0; height: 0.5px; background: var(--line); }
.row.plain + .row::before, .row.plain::before { left: 18px; }
button.row, a.row, label.row { cursor: pointer; transition: background-color var(--dur-fast); }
button.row:active, a.row:active { background-color: var(--press); }
@media (hover: hover) { button.row:hover, a.row:hover { background-color: var(--press); } }
.row .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row .tx b { font-weight: 500; font-size: 17px; overflow-wrap: break-word; }
.row .tx small { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.row .val { flex: 0 1 auto; max-width: 52%; color: var(--text-2); font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: break-word; }
.row .val small { display: block; font-size: 13px; color: var(--text-3); }
.row .chev { flex: none; display: grid; color: var(--text-3); }
.row .get { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--tint-text); background: color-mix(in srgb, var(--tint) 14%, transparent); }
.row.action { justify-content: center; min-height: 54px; color: var(--tint-text); font-weight: 500; }
.row.danger { color: var(--danger); }
.row .ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35); }
.ic.blue { background: linear-gradient(160deg, #5aa9ff, #2a6ae6); } .ic.indigo { background: linear-gradient(160deg, #8a86ff, #5a4fe0); }
.ic.green { background: linear-gradient(160deg, #4fdc8e, #1fa75a); } .ic.grey { background: linear-gradient(160deg, #9aa3b8, #6b7389); }
.ic.red { background: linear-gradient(160deg, #ff7b70, #e5372c); } .ic.teal { background: linear-gradient(160deg, #5ad8d0, #1b9e9a); }
.ic.coral { background: var(--s-ride); } .ic.amber { background: linear-gradient(160deg, #ffc65a, #f29a12); }
.ic.brand { background: #000; } .ic.brand.garmin { background: linear-gradient(160deg, #2b3440, #0b0f14); } .ic.brand.wahoo { background: linear-gradient(160deg, #3a8dff, #0c59d6); }
.ic.zwift { background: linear-gradient(160deg, #ff8a3d, #fc6719); } .ic.tr { background: linear-gradient(160deg, #e5484d, #b3141b); }
.row .badge { flex: none; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; color: var(--good-text); background: color-mix(in srgb, var(--good) 16%, transparent); }
.row .badge.plan { color: var(--tint-text); background: color-mix(in srgb, var(--tint) 14%, transparent); }
.row.done .tx b { color: var(--text); }
.row.past .tx b { color: var(--text-2); }
.row.today { background: color-mix(in srgb, var(--tint) 9%, transparent); }
.row .mini { flex: none; width: 76px; height: 28px; }
@media (min-width: 420px) { .row .mini { width: 92px; } }
/* (on a phone, a day that's done or missed says so rather than drawing its shape: there isn't room for both) */
@media (max-width: 459px) { .row:has(.badge) .mini { display: none; } }
.row .mini svg { display: block; width: 100%; height: 100%; }
.row .when { flex: none; width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.row .when b { display: block; font: 600 20px/1 var(--font-r); }
.row .when small { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3); margin-top: 3px; }
.row.today .when small { color: var(--tint-text); }

/* ---- buttons ---- */
.btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; font-size: 17px; font-weight: 600;
  color: var(--on-tint); background: linear-gradient(180deg, #5aa2ff, var(--tint-deep)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 26px -12px var(--tint-deep);
  transition: transform var(--dur-release) var(--ease-spring), filter var(--dur-fast); }
.btn:active { transform: scale(0.97); transition-duration: var(--dur-press); }
.btn.quiet { color: var(--text); background: var(--glass-ctl); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.22), 0 0 0 0.5px var(--line); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--glass-ctl); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.25), 0 0 0 0.5px var(--line); font-size: 15px; font-weight: 600; color: var(--text);
  transition: transform var(--dur-release) var(--ease-spring), background-color var(--dur-fast); }
.pill:active { transform: scale(0.95); transition-duration: var(--dur-press); }
.pill.primary { color: var(--on-tint); background: linear-gradient(180deg, var(--tint), var(--tint-deep)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px -10px var(--tint-deep); }
.pill.small { min-height: 32px; padding: 0 12px; font-size: 14px; }
.link { border: 0; background: none; padding: 0; color: var(--tint-text); font-size: 17px; font-weight: 500; }

/* ---- the tab bar: a capsule of glass at the foot, its highlight sliding like a drop (InFlight's) ---- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; justify-content: center; padding: 0 20px calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: none;
  transition: transform var(--dur-sheet-out) var(--ease-glide), opacity var(--dur-fast); }
body.sheet-up .tabbar { transform: translateY(20px); opacity: 0; }
/* (the scroll edge behind it: the page softens and fades as it goes under the bar, as Liquid Glass's do) */
.tabbar::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(100% + 30px); pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--sky-c) 0%, transparent), color-mix(in srgb, var(--sky-c) 60%, transparent));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(transparent, #000 55%); mask-image: linear-gradient(transparent, #000 55%); }
.tabs { position: relative; pointer-events: auto; display: flex; width: 100%; max-width: 380px; padding: 5px; border-radius: 999px;
  background: var(--sheen), var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--edge), var(--lift); transition: transform 0.5s var(--ease-spring); }
.tabs:has(.tab:active) { transform: scale(1.03); }
.tabs::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 999px; background: var(--glass-ctl);
  translate: calc(var(--tab, 0) * 100%) 0; transition: translate 0.55s var(--ease-spring); pointer-events: none; }
.tabs.moving::before { animation: squish 0.55s var(--ease-glide); }
@keyframes squish { 35% { scale: 1.18 0.9; } }
.tab { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; border: 0; border-radius: 999px; background: none;
  color: var(--text-2); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1px; transition: transform 0.45s var(--ease-spring), color 0.25s; }
.tab[aria-current="page"] { color: var(--tint-text); }
.tab:active { transform: scale(0.9); }

/* ---- charts ---- */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--text-3); font: 500 11px/1 var(--font); font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ftp { stroke: color-mix(in srgb, var(--text) 45%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.z1 { fill: var(--z1); } .z2 { fill: var(--z2); } .z3 { fill: var(--z3); } .z4 { fill: var(--z4); } .z5 { fill: var(--z5); } .z6 { fill: var(--z6); } .z7 { fill: var(--z7); }
.bg-z1 { background: var(--z1); } .bg-z2 { background: var(--z2); } .bg-z3 { background: var(--z3); } .bg-z4 { background: var(--z4); } .bg-z5 { background: var(--z5); } .bg-z6 { background: var(--z6); } .bg-z7 { background: var(--z7); }
.profile svg rect, .mini svg rect, .profile svg path.blk { shape-rendering: geometricPrecision; }
.l-fit { fill: none; stroke: var(--fit); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.l-fat { fill: none; stroke: var(--fat); stroke-width: 1.6; stroke-dasharray: 4 3; stroke-linecap: round; }
.b-up { fill: var(--form-up); opacity: 0.55; } .b-down { fill: var(--form-down); opacity: 0.55; }
.a-fit { fill: color-mix(in srgb, var(--fit) 16%, transparent); }
.end-dot { fill: var(--fit); stroke: var(--sky-c); stroke-width: 2; }
.s-pwr { fill: none; stroke: var(--pwr); stroke-width: 1.4; stroke-linejoin: round; }
.a-pwr { fill: color-mix(in srgb, var(--pwr) 14%, transparent); }
.s-hr { fill: none; stroke: var(--hr); stroke-width: 1.6; stroke-linejoin: round; }
.s-spd { fill: none; stroke: var(--spd); stroke-width: 1.4; stroke-linejoin: round; }
.a-ele { fill: var(--ele); }
.cursor { stroke: var(--text); stroke-width: 1; opacity: 0.7; }
.phase-b { fill: color-mix(in srgb, var(--z2) 70%, transparent); } .phase-u { fill: color-mix(in srgb, var(--z4) 80%, transparent); }
.phase-p { fill: color-mix(in srgb, var(--z5) 80%, transparent); } .phase-t { fill: color-mix(in srgb, var(--z3) 80%, transparent); }
.wk-done { fill: var(--tint); } .wk-plan { fill: var(--glass-ctl); stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 1; }
.wk-now { fill: none; stroke: var(--text); stroke-width: 1.5; }
.route { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.route-under { fill: none; stroke: color-mix(in srgb, var(--sky-c) 70%, transparent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.pin-start { fill: var(--good); stroke: #fff; stroke-width: 2; } .pin-end { fill: var(--danger); stroke: #fff; stroke-width: 2; }
.pin-here { fill: #fff; stroke: var(--tint-deep); stroke-width: 3; }
.st-z1 { stroke: var(--z1); } .st-z2 { stroke: var(--z2); } .st-z3 { stroke: var(--z3); } .st-z4 { stroke: var(--z4); } .st-z5 { stroke: var(--z5); } .st-z6 { stroke: var(--z6); } .st-z7 { stroke: var(--z7); }
.curve { fill: none; stroke: var(--tint); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.curve-a { fill: color-mix(in srgb, var(--tint) 15%, transparent); }
.curve-dot { fill: var(--tint); stroke: var(--sky-c); stroke-width: 1.5; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.lg-fit { background: var(--fit); } .lg-fat { background: var(--fat); } .lg-form { background: var(--form-up); height: 8px !important; } .lg-pwr { background: var(--pwr); } .lg-hr { background: var(--hr); } .lg-ele { background: color-mix(in srgb, var(--text) 30%, transparent); height: 8px !important; } .lg-spd { background: var(--spd); }
.readout { min-height: 20px; margin: 0 0 8px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.readout b { color: var(--text); font-weight: 600; }
.scrub { touch-action: pan-y; cursor: crosshair; }

/* the route, on its own pane (a map behind it is for later) */
.map { border-radius: 22px; overflow: hidden; max-width: 100%;
  background: radial-gradient(120% 100% at 30% 0%, color-mix(in srgb, var(--z2) 12%, transparent), transparent 70%), var(--field); box-shadow: inset 0 0 0 0.5px var(--line); }
.map svg { display: block; width: 100%; height: auto; }
.map .gridline { stroke: var(--line); stroke-width: 1; }
.map .scale-t { fill: var(--text-2); font: 600 11px/1 var(--font); }

/* figures in a grid (an activity's, a workout's) */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
.stat small { display: block; font-size: 12.5px; color: var(--text-3); }
.stat b { display: block; margin-top: 2px; font: 600 21px/1.15 var(--font-r); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat b u { text-decoration: none; font: 500 13px/1 var(--font); color: var(--text-2); margin-left: 2px; letter-spacing: 0; }
@media (max-width: 360px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* time in zones */
.zones { display: grid; gap: 7px; }
.zrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 66px; align-items: center; gap: 8px; font-size: 13px; }
.zrow > span:first-child { font-weight: 700; color: var(--text-2); }
.zrow .zbar { height: 18px; border-radius: 6px; background: var(--glass-ctl); overflow: hidden; }
.zrow .zbar i { display: block; height: 100%; border-radius: 6px; width: 0; transition: width 0.7s var(--ease-out); }
.zrow .zv { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.zone-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 7px; border-radius: 7px; font-size: 12px; font-weight: 700; color: #10131f; }

/* a workout's steps */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; }
.step + .step { border-top: 0.5px solid var(--line); }
.step > i { align-self: stretch; border-radius: 3px; }
.step b { display: block; font-size: 15px; font-weight: 600; }
.step small { display: block; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.step .v { max-width: 12em; text-align: right; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.step .v b { color: var(--text); }
.repeat { margin: 6px 0; padding: 4px 12px; border-radius: 16px; background: var(--glass-ctl); }
.repeat > .rh { display: flex; align-items: center; gap: 8px; padding: 6px 0 2px; font-size: 13px; font-weight: 700; color: var(--tint-text); letter-spacing: 0.3px; }

.stepper { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; background: var(--field); padding: 2px; }
.stepper button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--text); }
.stepper button:active { background: var(--press); }
.stepper output { min-width: 88px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper label { display: none; }
.field { display: block; width: 100%; min-height: 50px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--field); font-size: 17px; }
.field:focus { outline: 2px solid var(--tint); outline-offset: 0; }

/* the plan */
.phases { display: flex; gap: 3px; height: 10px; margin: 14px 0 8px; }
.phases i { border-radius: 4px; }
.phase-names { display: flex; gap: 3px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.phase-names span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase-names span.now { color: var(--text); }
.countdown { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.countdown b { font: 700 40px/1 var(--font-r); letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
.countdown span { color: var(--text-2); font-size: 15px; }

/* ---- sheets ---- */
dialog.sheet { position: fixed; padding: 0; border: 0; color: var(--text); width: calc(100% - 16px); max-width: 600px; max-height: calc(100vh - var(--top) - 24px); max-height: calc(100svh - var(--top) - 24px);
  margin: auto 8px 8px; margin-inline: auto; border-radius: var(--r-sheet); overflow: hidden; background: var(--sheen), var(--sheet);
  -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%); box-shadow: var(--edge), 0 30px 80px -10px rgba(0, 0, 0, 0.5); }
dialog.sheet.tall { height: calc(100svh - var(--top) - 24px); }
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheet-in var(--dur-sheet-in) var(--ease-glide); }
dialog.sheet::backdrop { background: var(--dim); }
dialog.sheet[open]::backdrop { animation: dim-in var(--dur-sheet-in) var(--ease-glide); }
@keyframes sheet-in { from { transform: translateY(calc(100% + 16px)); } }
@keyframes dim-in { from { opacity: 0; } }
dialog.sheet.closing { animation: sheet-out var(--dur-sheet-out) var(--ease-glide) forwards; pointer-events: none; }
dialog.sheet.closing::backdrop { animation: dim-out var(--dur-sheet-out) var(--ease-glide) forwards; }
dialog.sheet.dragging { animation: none; transition: none; }
@keyframes sheet-out { from { transform: var(--from-tf, none); } to { transform: translateY(calc(100% + 16px)); } }
@keyframes dim-out { to { opacity: 0; } }
@media (min-width: 700px) {
  dialog.sheet { margin: auto; }
  dialog.sheet.tall { height: min(860px, calc(100svh - 48px)); }
  @keyframes sheet-in { from { transform: translateY(26px) scale(0.97); opacity: 0; } }
  @keyframes sheet-out { from { transform: var(--from-tf, none); } to { transform: translateY(26px) scale(0.97); opacity: 0; } }
  body.sheet-up .page { transform: scale(0.97); }
}
.grab { flex: none; width: 40px; height: 5px; border-radius: 3px; background: var(--text-3); opacity: 0.6; margin: 8px auto 0; }
.grab, .sheet-head { touch-action: none; }
.sheet-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 14px 6px; }
.sheet-head h2 { margin: 0; font: 600 17px/1.2 var(--font); text-align: center; grid-column: 2; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-head .l { justify-self: start; }
.sheet-head .r { justify-self: end; grid-column: 3; }
.sheet-head .back { display: inline-flex; align-items: center; gap: 0; padding: 0 8px 0 0; margin-left: -6px; }
.sheet-head .link.done { font-weight: 600; }
/* (its title, where the sheet's own large one says the same: in only once that has scrolled away, as iOS's) */
.sheet-head h2 { transition: opacity var(--dur-fast), translate var(--dur-base) var(--ease-out); }
dialog.sheet.lt:not(.past) .sheet-head h2 { opacity: 0; translate: 0 5px; }
/* (the scroll edge: what's gone under the bar fades into it, as Liquid Glass bars have it, and the same at the foot) */
.sheet-body { -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
dialog.sheet.edge .sheet-body { -webkit-mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 22px), transparent); }
/* (each row as tall as what's in it: a grid that's fuller than the sheet would otherwise squash what clips its edges,
   the map and the groups, to nothing) */
.sheet-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 16px; align-content: start; }
.sheet-body > p { margin: 0 6px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.sheet-body .group, .sheet-body .card, .rh-daystep { background: var(--cell); box-shadow: inset 0 0 0 0.5px var(--line); }
.sheet-body .card { margin: 0; }
.sheet-body .section { margin: 0; }
.sheet-body.swap { animation: swap var(--dur-base) var(--ease-out) backwards; }
.sheet-body.swap.back { animation-name: swap-back; }
@keyframes swap { from { opacity: 0; transform: translateX(28px); } }
@keyframes swap-back { from { opacity: 0; transform: translateX(-28px); } }
.sheet-top { display: grid; gap: 4px; padding: 2px 6px 0; }
.sheet-top h1 { margin: 0; font: 700 26px/1.12 var(--font-d); text-wrap: balance; }
.sheet-top .sub { color: var(--text-2); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* the files a workout goes out as */
.dl-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--tint) 12%, transparent); font-size: 14px; line-height: 1.4; color: var(--text-2); }
.dl-note svg { flex: none; color: var(--tint-text); margin-top: 1px; }
.how { margin: 0; padding: 0 0 0 20px; display: grid; gap: 6px; font-size: 14px; color: var(--text-2); line-height: 1.4; }
.how b { color: var(--text); font-weight: 600; }
.how code { font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); background: var(--field); padding: 2px 6px; border-radius: 6px; }

/* importing: dropped anywhere on the page */
.drop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--sky-c) 55%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); }
.drop.on { opacity: 1; }
.drop > div { display: grid; justify-items: center; gap: 10px; padding: 40px 34px; border-radius: 32px; border: 2px dashed color-mix(in srgb, var(--tint) 70%, transparent); text-align: center; max-width: 420px; }
.drop b { font: 700 22px/1.2 var(--font-d); }
.drop span { color: var(--text-2); font-size: 15px; }
.drop svg { color: var(--tint-text); }
.imported { display: grid; gap: 10px; }
.skip { font-size: 13px; color: var(--text-3); }

/* ---- toasts ---- */
.toast { position: fixed; z-index: 60; top: calc(var(--top) + 10px); left: 50%; width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 22px;
  background: var(--sheen), var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--edge), var(--lift); font-size: 15px; font-weight: 500;
  transform: translate(-50%, -140%); opacity: 0; transition: transform var(--dur-fast) var(--ease-in), opacity var(--dur-fast) var(--ease-in); pointer-events: none; }
.toast.on { transform: translate(-50%, 0); opacity: 1; transition: transform 0.55s var(--ease-spring), opacity 0.3s var(--ease-out); }
.toast svg { flex: none; color: var(--good); }
.toast.bad svg { color: var(--danger); }

/* ---- waiting: a shimmer, only once it's taking a while ---- */
.wait { position: relative; overflow: hidden; border-radius: 12px; background: var(--glass-ctl); min-height: 20px; animation: sk-late 0.3s var(--ease-out) 0.4s backwards; }
.wait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); animation: shimmer 1.4s linear infinite; }
@keyframes sk-late { from { opacity: 0; } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- on a wide screen: two columns of cards on Today ---- */
@media (min-width: 1000px) {
  main { max-width: 1040px; }
  .cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
}

/* ---- Reduce Motion: things fade where they are; Reduce Transparency: solid glass ---- */
@media (prefers-reduced-motion: reduce) {
  .aura { animation: aura-in 0.9s ease-out backwards; }
  .rise, .screen.in { animation-name: fade; }
  @keyframes fade { from { opacity: 0; } }
  dialog.sheet[open], dialog.sheet.closing { animation-duration: 0.2s; animation-name: fade; }
  dialog.sheet.closing { animation-name: fade-out; }
  @keyframes fade-out { to { opacity: 0; } }
  body.sheet-up .page { transform: none; }
  .tabs::before, .seg::before { transition-duration: 0.15s; }
  .tabs.moving::before { animation: none; }
  .wait::after { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .status, .toast, dialog.sheet, .tabs, .round, .tabbar::before, .p-card, .p-mini.green { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass, .status, .toast, dialog.sheet, .tabs, .round:not(.me) { background: var(--glass-strong); }
}

/* ---- Activities, before the first: one button, and where the files are ---- */
.card.first { display: grid; gap: 12px; padding: 22px 16px 16px; }
.first-top { display: grid; gap: 6px; padding: 0 4px 2px; }
.first h2 { margin: 0; font: 700 24px/1.15 var(--font-d); }
.first p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
/* the two ways in: Garmin, ringed as the one to pick, and files */
.choice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 0; border-radius: 20px; text-align: left; color: inherit; background: var(--glass-strong); box-shadow: var(--edge); }
.choice.best { box-shadow: 0 0 0 2px var(--tint), 0 12px 26px -18px var(--tint-deep); }
.choice:active { transform: scale(0.985); }
.choice .tx { flex: 1; min-width: 0; display: grid; gap: 3px; }
.choice .tx > b { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.choice .tx > small { color: var(--text-2); font-size: 14px; line-height: 1.35; }
.choice .chev { color: var(--text-3); }
.choice .big { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35); }
.badge { padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--tint) 14%, transparent); color: var(--tint-text); font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; }
.row .ic.soft { box-shadow: none; }
.ic.soft.red { background: rgba(238, 75, 47, 0.14); color: #d6402a; } .ic.soft.blue { background: rgba(47, 122, 240, 0.14); color: var(--tint-text); }
.ic.soft.green { background: rgba(31, 167, 90, 0.14); color: var(--good-text); }
/* Garmin's six months, coming in */
.card.bringing { display: grid; gap: 12px; padding: 16px; }
.bringing-top { display: flex; align-items: center; gap: 12px; }
.bringing-top .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.bringing-top .tx { display: grid; gap: 2px; min-width: 0; } .bringing-top b { font-size: 16px; font-weight: 600; } .bringing-top small { color: var(--text-3); font-size: 13px; }
.bringing .bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bringing .bar i { display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--tint), var(--tint-deep)); animation: bring 1.6s var(--ease-spring, ease-in-out) infinite; }
@keyframes bring { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .bringing .bar i { animation: none; width: 100%; opacity: 0.5; } }
/* Upload files: the files chosen, and where each app keeps them */
.drop-zone { display: grid; justify-items: center; gap: 12px; margin-top: 8px; padding: 22px 16px; border-radius: 22px; border: 1.5px dashed color-mix(in srgb, var(--tint) 50%, transparent); background: color-mix(in srgb, var(--tint) 6%, transparent); text-align: center; }
.drop-zone .big { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; }
.drop-zone p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.4; text-wrap: pretty; }
.note-garmin { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 13px 14px; border-radius: 18px; background: color-mix(in srgb, var(--tint) 9%, transparent); font-size: 14px; line-height: 1.35; color: var(--text-2); }
.note-garmin .ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.note-garmin .link { font: inherit; font-weight: 600; padding: 0; }
.foot.none { text-align: center; padding: 28px 0; }

/* ---- uploading: each activity, with what it was, a tap to change ---- */
.row.up { align-items: center; }
.row.up .tx small.said { color: var(--text-3); font-size: 12.5px; }
.row.up.guess .tx small.said { color: #ffc65a; }
.pick { position: relative; flex: none; display: inline-flex; align-items: center; height: 34px; border-radius: 999px; background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); }
.pick select { appearance: none; -webkit-appearance: none; border: 0; background: none; height: 100%; padding: 0 28px 0 13px; font-size: 16px; font-weight: 600; color: var(--text); cursor: pointer; }
.pick svg { position: absolute; right: 10px; pointer-events: none; transform: rotate(90deg); color: var(--text-3); }
.row.up.guess .pick { box-shadow: inset 0 0 0 1.5px #f2a100; }
.sheet-body > .btn { margin-top: 6px; }
/* Garmin Connect: the key, pasted in */
.garmin-key { display: grid; gap: 10px; margin-top: 16px; }
.section > .garmin-key { margin-top: 0; }
.row .ic > b { font-size: 15px; font-weight: 700; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .row.up.guess .tx small.said { color: #a85f00; } }
:root[data-theme="light"] .row.up.guess .tx small.said { color: #a85f00; }

/* ---- Rhythm ---- */
.session .why, .session.rest .why { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.session .why b { color: var(--text); font-weight: 600; }
.session .extras { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 14px; color: var(--text-2); }
.session .extras > * { display: inline-flex; align-items: center; gap: 6px; }
.rhythm-intro h2 { margin: 0 0 8px; font: 700 24px/1.15 var(--font-d); text-wrap: balance; }
.rhythm-intro .btn { margin-top: 16px; }
.rb-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 12px; }
.rb-week { display: grid; gap: 6px; }
.rb-week i { height: 8px; border-radius: 4px; opacity: 0.35; }
.rb-week.past i { opacity: 0.6; }
.rb-week.now i { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 25%, transparent); }
.rb-week small { font-size: 12px; color: var(--text-3); }
.rb-week.now small { color: var(--text); font-weight: 600; }
.line-said.small { font-size: 13px; margin-top: 6px; }

/* ---- Rhythm, before it starts: the Plan tab's card, and the four steps ---- */
.rhythm-intro { display: grid; gap: 14px; }
.rhythm-intro h2 { margin: 0; }
.rhythm-intro .btn { margin-top: 4px; }
.rh-brand { display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--font); letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); }
.rh-brand .tile { width: 34px; height: 34px; }
.rh-example { display: grid; gap: 8px; padding: 14px; border-radius: 20px; background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); }
.rh-ex-head { display: flex; justify-content: space-between; font: 600 12px/1 var(--font); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-3); }
.rh-ex-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 84px; }
.rh-ex-bars > div { display: grid; justify-items: center; gap: 4px; align-content: end; }
.rh-ex-bars i { width: 100%; height: var(--h); border-radius: 6px; }
.rh-ex-bars i.rest { opacity: 0.35; border-radius: 3px; }
.rh-ex-bars small, .rh-day small { font-size: 11px; color: var(--text-3); font-weight: 600; }
.rh-ex-key { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--text-2); }
.rh-ex-key span { display: inline-flex; align-items: center; gap: 5px; }
.rh-ex-key i { width: 8px; height: 8px; border-radius: 2px; }
.rh-feat { display: flex; gap: 12px; align-items: flex-start; }
.rh-feat .ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.rh-feat b { display: block; font-size: 15px; font-weight: 600; }
.rh-feat span { display: block; font-size: 14px; line-height: 1.35; color: var(--text-2); }
.rh-note { margin: -4px 0 0; text-align: center; font-size: 13px; color: var(--text-3); }
.rh-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 6px; }
.rh-dots i { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: width var(--dur-base) var(--ease-out); }
.rh-dots i.done { background: var(--tint); }
.rh-dots i.now { width: 22px; background: var(--tint); }
.rh-next { margin-top: 8px; }
/* when you ride: a bar a day */
.rh-days { padding: 16px 14px 12px; display: grid; gap: 10px; background: var(--glass-strong); }
.rh-sum { display: flex; justify-content: space-between; align-items: baseline; }
.rh-sum b { font: 700 22px/1.1 var(--font-d); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.rh-sum span { font-size: 14px; color: var(--text-2); }
.rh-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.rh-day { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.rh-day .v { font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rh-day .track { position: relative; width: 100%; height: 210px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); touch-action: none; cursor: ns-resize; display: flex; align-items: flex-end; }
.rh-day .track:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
.rh-day .track i { display: block; width: 100%; height: var(--h, 30%); border-radius: 12px; background: linear-gradient(180deg, #5aa2ff, var(--tint)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: height 0.12s var(--ease-out); }
.rh-day .track i::before { content: ""; display: block; width: 16px; height: 3px; margin: 6px auto 0; border-radius: 2px; background: rgba(255, 255, 255, 0.75); }
.rh-day .track i.rest { background: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 25%, transparent); border-radius: 6px; min-height: 10px; }
.rh-day .track i.rest::before { display: none; }
.rh-presets { display: flex; flex-wrap: wrap; gap: 8px; }
/* how you like to ride */
.rh-choices, .rh-goals { display: grid; gap: 10px; }
.rh-choice, .rh-goal { display: flex; gap: 14px; align-items: center; text-align: left; padding: 14px; border: 0; border-radius: 22px; background: var(--glass-strong); box-shadow: inset 0 0 0 0.5px var(--line); color: var(--text); font: inherit; cursor: pointer; transition: box-shadow var(--dur-fast); }
.rh-choice.on, .rh-goal.on { box-shadow: inset 0 0 0 2px var(--tint); }
.rh-choice .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rh-choice b, .rh-goal b { font-size: 17px; font-weight: 600; }
.rh-choice small, .rh-goal small { font-size: 14px; line-height: 1.35; color: var(--text-2); }
.tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 25%, transparent); }
.on > .tick, .on .rh-goal-top .tick { background: var(--tint); box-shadow: none; }
.rh-pic { flex: none; width: 64px; height: 40px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; align-items: end; }
.rh-pic i { height: var(--h); border-radius: 2px; }
.rh-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rh-tile { display: grid; justify-items: start; gap: 8px; padding: 14px; border: 0; border-radius: 20px; background: var(--glass-strong); box-shadow: inset 0 0 0 0.5px var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rh-tile .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--text-3); background: var(--glass-ctl); }
.rh-tile b { font-size: 16px; font-weight: 600; }
.rh-tile small { font-size: 13px; color: var(--text-3); }
.rh-tile.on.run { box-shadow: inset 0 0 0 2px #1fa75a; }
.rh-tile.on.swim { box-shadow: inset 0 0 0 2px #1b8fc0; }
.rh-tile.on .ic { color: #fff; }
.rh-tile.on.run .ic { background: var(--s-run); }
.rh-tile.on.swim .ic { background: var(--s-swim); }
.rh-tile.on small { color: var(--text); font-weight: 600; }
/* build or hold */
.rh-goal { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; }
.rh-goal-top { display: flex; justify-content: space-between; align-items: center; }
.rh-goal-top b { font-size: 19px; font-weight: 700; }
.rh-goal svg { width: 100%; height: 64px; }
.rh-axis { stroke: var(--line); stroke-width: 1; }
.rh-line { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rh-line.up { stroke: var(--tint); }
.rh-line.level { stroke: color-mix(in srgb, var(--text) 45%, transparent); }
.rh-ftp { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--tint) 10%, transparent); font-size: 14px; line-height: 1.4; color: var(--text-2); }
.rh-ftp svg { flex: none; color: var(--tint-text); margin-top: 1px; }
.rh-ftp b { color: var(--text); }
/* the first week */
.rh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rh-stats > div { padding: 10px 12px; border-radius: 16px; background: var(--glass-strong); box-shadow: inset 0 0 0 0.5px var(--line); }
.rh-stats small { display: block; font: 600 11px/1.2 var(--font); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.rh-stats b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* ---- Rhythm's Plan tab: the week at a glance, today first ---- */
.rh-week { display: grid; gap: 12px; padding: 14px 12px 14px; }
.rh-week-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; font-size: 13px; color: var(--text-2); }
.rh-week-head > b { font: 700 13px/1 var(--font); letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); }
.rh-week-head span b { color: var(--text); }
.rh-circles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rh-circles button { display: grid; justify-items: center; gap: 6px; padding: 8px 0 6px; border: 0; border-radius: 14px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.rh-circles button.is-today { background: color-mix(in srgb, var(--tint) 12%, transparent); }
.rh-circles small { font-size: 10.5px; font-weight: 600; color: var(--text-3); letter-spacing: 0.2px; }
.rh-circles .is-today small { color: var(--tint-text); font-weight: 700; }
.rh-circles small.n { font-size: 12px; color: var(--text); }
.rh-circles .c { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--text-3); background: var(--glass-ctl); }
.rh-circles .c.done { background: #1fa75a; color: #fff; }
.rh-circles .c.today { background: none; box-shadow: inset 0 0 0 2.5px var(--tint); }
.rh-circles .c.today i { width: 10px; height: 10px; border-radius: 50%; background: var(--tint); }
.rh-circles .c.plan i { width: 9px; height: 9px; border-radius: 50%; background: var(--z2); }
.rh-circles .c.plan.hard i { background: var(--z4); }
.rh-circles .c.missed { box-shadow: inset 0 0 0 1.5px #f2a100; background: none; }
.rh-circles .c.missed i { width: 8px; height: 8px; border-radius: 50%; background: #f2a100; }
.rh-circles .c.pre { opacity: 0.4; }
.rh-balance { display: grid; gap: 6px; padding: 0 4px; font-size: 12.5px; color: var(--text-2); }
.rh-balance .bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--glass-ctl); }
.rh-balance .bar i { width: var(--w); }
.rh-balance .easy { background: var(--z2); } .rh-balance .hard { background: var(--z4); }
.rh-today { display: grid; gap: 10px; padding: 18px; text-align: left; color: var(--text); font: inherit; border: 0; width: 100%; }
.rh-today h2 { margin: 0; font: 700 26px/1.1 var(--font-d); letter-spacing: -0.4px; }
.rh-today .rh-chip + h2 { margin-top: 8px; }
.rh-today p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.rh-today-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.rh-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 5px; border-radius: 999px; background: var(--glass-ctl); font-size: 13px; font-weight: 600; color: var(--text); }
.rh-today.done .rh-chip, .rh-today.rest .rh-chip { padding-left: 10px; }
.rh-today .extras { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); }
.rh-today .extras span { display: inline-flex; align-items: center; gap: 6px; }
.rh-today .acts { display: flex; gap: 8px; }
.rh-heading { display: grid; gap: 12px; }
/* coming up: its title inside the card, as where it's heading has */
.rh-coming > .rh-week-head { padding: 20px 22px 6px; }
.rh-heading .rb-weeks { margin: 0; }
.rh-heading svg { width: 100%; height: 70px; }
.rh-line.ahead { stroke-dasharray: 2 7; }
.rh-now { fill: var(--tint); }
.rh-why { padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--tint) 9%, transparent); font-size: 15px; line-height: 1.45; color: var(--text-2); }
.rh-why b { color: var(--text); }
.rh-day-acts { display: flex; gap: 8px; }
.rh-day-acts .btn { flex: 1; }

/* ---- a session in full ---- */
.ss-steps { padding: 6px 14px; display: grid; }
.ss-step { display: grid; grid-template-columns: 36px 6px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; }
.ss-step + .ss-step { border-top: 0.5px solid var(--line); }
.ss-at { font: 600 12px/1.6 var(--font); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ss-step > i { align-self: stretch; border-radius: 3px; min-height: 30px; }
.ss-tx { display: grid; gap: 2px; min-width: 0; }
.ss-tx b { font-size: 15px; font-weight: 600; }
.ss-tx small { font-size: 13px; color: var(--text-2); }
.ss-tx small.cue { color: var(--text-3); line-height: 1.35; }
.ss-w { font: 600 14px/1.6 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-fuel { display: grid; gap: 12px; padding: 16px; }
.ss-fuel p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.ss-fuel p b { color: var(--text); }
.ss-feeds { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-feeds span { display: grid; gap: 1px; padding: 8px 12px; border-radius: 14px; background: var(--glass-ctl); font-size: 13px; color: var(--text-2); text-align: center; }
.ss-feeds b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- the day's check-in ---- */
.checkin { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.checkin:not(.done):not(.open) > div:first-child { display: grid; gap: 3px; }
.checkin b { font-size: 16px; font-weight: 600; }
.checkin small { font-size: 13px; color: var(--text-2); line-height: 1.35; }
.checkin.done { display: grid; gap: 14px; }
.checkin-top { display: flex; align-items: center; gap: 12px; }
.checkin-top .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35); }
.checkin-top .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.checkin-top .tx b { font-size: 17px; font-weight: 600; }
.checkin-top .tx small { font-size: 14px; line-height: 1.35; color: var(--text-2); }
.checkin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.checkin-chips .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px 0 9px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--glass-ctl); color: var(--text-2); }
.checkin-chips .chip svg { flex: none; }
.checkin-chips .tone-high { background: color-mix(in srgb, #1fa75a 14%, transparent); color: var(--good-text); }
.checkin-chips .tone-low { background: color-mix(in srgb, #f2a100 16%, transparent); color: var(--warn); }
.checkin-q { display: grid; gap: 10px; }
.checkin-q b { font-size: 16px; font-weight: 600; }
.rh-today .acts { flex-wrap: wrap; }

/* ---- from the look over every screen ---- */
.pill { white-space: nowrap; }
.rh-chip { white-space: nowrap; }
.row small.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .tx { min-width: 0; }
/* (a narrow phone: the day's shape left out of Coming up, so its name has the room) */
@media (max-width: 359px) { .rh-coming .mini { display: none; } }
.row .tx small[hidden] { display: none; }

/* ---- from the UX proposals ---- */
/* your numbers: worked out from your rides, or a starting guess, till you set them */
.row .tx small.est { color: var(--tint-text); font-weight: 600; }
/* Download: which device it's for; then saved, and how to get it on */
.dl-for { margin: 10px 0 0; font-size: 13px; color: var(--text-3); }
.dl-for .link.small { font-size: 13px; font-weight: 600; }
.saved { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--good) 14%, transparent); font-size: 15px; line-height: 1.35; }
.saved .ok { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--good); }
.row .ic.num { width: 26px; height: 26px; border-radius: 8px; }
.row .ic.num > b { font-size: 13px; }
.row .tx b.light { font-weight: 500; font-size: 15px; line-height: 1.4; }
/* signing in: a line about it, and a way in for someone new (below the button, so the button sits where InFlight's does) */
.welcome .tagline { margin: 4px 0 0; font-size: 16px; color: var(--text-2); }
.w-cta { position: relative; }
.welcome .new-here { position: absolute; top: 100%; left: 0; right: 0; margin: 8px 0 0; font-size: 15px; color: var(--text-2); }
.welcome .new-here .link { font-size: 15px; font-weight: 600; }
/* someone new: Garmin first */
.card.first-garmin { display: grid; gap: 14px; margin-top: 16px; padding: 18px; background: var(--glass-strong); box-shadow: 0 0 0 2px var(--tint), 0 14px 30px -22px var(--tint-deep); }
.first-garmin-top { display: flex; align-items: center; gap: 14px; }
.first-garmin-top .ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.first-garmin-top .tx { display: grid; gap: 2px; } .first-garmin-top b { font-size: 17px; font-weight: 600; } .first-garmin-top small { font-size: 14px; color: var(--text-2); }
.first-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--text-2); }
/* Rhythm's days: the tapped day, a quarter hour at a time */
.rh-day .track.sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 40%, transparent); }
.rh-daystep { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 18px; }
.rh-daystep > b { flex: 1; font-size: 16px; font-weight: 600; }
.rh-daystep .stepper button { width: 40px; height: 40px; }
.rh-daystep .stepper output { min-width: 72px; font-size: 15px; }
/* a row's route, drawn small */
.tile.route { background: color-mix(in srgb, var(--s-ride-solid, #ee4b2f) 12%, transparent); box-shadow: none; }
.tile.route.s-run { background: color-mix(in srgb, #1fa75a 12%, transparent); }
.tile.route svg { width: 100%; height: 100%; }
.tile.route path { fill: none; stroke: #ee4b2f; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.tile.route.s-run path { stroke: #1fa75a; } .tile.route.s-swim path { stroke: #1b8fc0; } .tile.route.s-walk path, .tile.route.s-other path { stroke: #6b7389; }
/* Plan's week: Your days, a tap from the top; the week's time under its balance */
.pill.tinted { color: var(--tint-text); background: color-mix(in srgb, var(--tint) 14%, transparent); }
.rh-week-head { align-items: center; }
.rh-balance > span { font-variant-numeric: tabular-nums; } .rh-balance > span b { color: var(--text); }
/* today, done: against the plan */
.session .sport.ok { color: var(--good-text); background: color-mix(in srgb, var(--good) 14%, transparent); }
.session .sport.ok i { background: var(--good); border-radius: 50%; }
.done-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.done-figs small { display: block; font-size: 12px; color: var(--text-3); }
.done-figs b { font-size: 19px; font-variant-numeric: tabular-nums; }
/* the morning reminder: what it'll say, and when */
.note-preview { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; padding: 12px 14px; border-radius: 18px; background: var(--glass-strong); box-shadow: var(--edge); }
.note-preview .ic { flex: none; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; }
.note-preview .ic img { width: 34px; height: 34px; }
.note-preview .tx { display: grid; gap: 2px; min-width: 0; } .note-preview b { font-size: 15px; font-weight: 600; } .note-preview small { font-size: 14px; color: var(--text-2); line-height: 1.35; }
.times { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Progress ---- */
.p-range { display: grid; width: 100%; margin: 0 0 16px; box-sizing: border-box; }
.p-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 22px 22px; text-align: center; }
.p-empty .big { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: #fff; }
.p-empty h2 { margin: 0; font: 700 22px/1.2 var(--font-d); } .p-empty p { margin: 0 0 6px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
/* the story: a deep card, its line glowing */
.p-hero { display: grid; gap: 6px; padding: 20px 20px 12px; margin-bottom: 12px; border-radius: 30px; color: #fff; overflow: hidden;
  background: linear-gradient(165deg, #2a4fd8 0%, #3c6af0 45%, #6a5cf0 100%); box-shadow: 0 24px 44px -26px rgba(42, 79, 216, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-hero { background: linear-gradient(165deg, #1c2f8a 0%, #2a3fb8 45%, #4a37b8 100%); } }
:root[data-theme="dark"] .p-hero { background: linear-gradient(165deg, #1c2f8a 0%, #2a3fb8 45%, #4a37b8 100%); }
.p-badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-size: 12px; font-weight: 700; }
.p-big { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.p-big b { font: 700 56px/1 var(--font-d); letter-spacing: -2px; font-variant-numeric: tabular-nums; } .p-big span { font-size: 17px; font-weight: 600; opacity: 0.85; }
.p-big .p-gain { margin-left: auto; padding: 4px 10px; border-radius: 10px; background: rgba(120, 255, 190, 0.2); color: #b8ffd9; font-size: 15px; font-weight: 700; opacity: 1; }
.p-hero > p { margin: 0; font-size: 15px; line-height: 1.4; opacity: 0.9; }
.p-hero-chart { display: block; margin: 6px 0 0; overflow: visible; }
.p-hero-chart .axis { stroke: rgba(255, 255, 255, 0.2); } .p-hero-chart .ln { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.p-hero-chart .proj { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 1 7; stroke-linecap: round; opacity: 0.8; }
.p-hero-chart .glow { fill: #fff; opacity: 0.5; } .p-hero-chart .dot { fill: #fff; }
.p-hero-chart text { font-size: 10px; fill: rgba(255, 255, 255, 0.75); } .p-hero-chart .lab { fill: rgba(255, 255, 255, 0.6); }
.p-hero-chart .m-off { fill: #ffd36b; } .p-hero-chart .m-best { fill: #b8ffd9; }
/* the tiles, each with its own small chart */
.p-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
.p-tile { display: grid; gap: 2px; padding: 14px 14px 10px; border: 0; border-radius: 22px; text-align: left; color: var(--text); font: inherit; background: var(--sheen), var(--glass); box-shadow: var(--edge), var(--lift); }
.p-tile > small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.p-tile > small i { width: 8px; height: 8px; border-radius: 50%; }
.p-tile > b { font: 700 26px/1.1 var(--font-d); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; } .p-tile > b u { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--text-3); }
.p-spark { display: block; height: 30px; } .p-spark svg { width: 100%; height: 30px; display: block; }
.c-ftp { color: #e3a20f; } i.c-ftp { background: #e3a20f; } .c-wkg { color: #7c5cf0; } i.c-wkg { background: #7c5cf0; } .c-wk { color: var(--tint); } i.c-wk { background: var(--tint); }
.p-bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.p-bars i { flex: 1; height: var(--h); border-radius: 2px; background: currentColor; opacity: 0.5; } .p-bars i.now { opacity: 1; }
.p-delta { font-size: 12px; font-weight: 700; color: var(--text-3); } .p-delta.up { color: var(--good-text); } .p-delta.down { color: var(--warn); }
.p-form { display: flex; align-items: center; gap: 12px; }
.p-form .tx { display: grid; gap: 1px; } .p-form .tx small { font-size: 12px; color: var(--text-2); } .p-form .tx small:first-child { font-weight: 600; } .p-form .tx b { font-size: 17px; }
.p-ring .bg { fill: none; stroke: var(--glass-ctl); stroke-width: 7; } .p-ring .fg { fill: none; stroke: var(--good); stroke-width: 7; stroke-linecap: round; }
.p-ring text { font-size: 14px; font-weight: 800; fill: var(--text); }
/* what stands out: cards to swipe through */
.p-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.p-cards::-webkit-scrollbar { display: none; }
.p-card { flex: none; width: min(290px, 80vw); scroll-snap-align: start; display: grid; gap: 8px; align-content: start; padding: 16px; border: 0; border-radius: 24px; text-align: left; font: inherit; }
.p-card-top { display: flex; align-items: center; gap: 10px; }
.p-card-top .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.p-card-top small { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.p-card > b { font: 700 21px/1.18 var(--font-d); letter-spacing: -0.3px; } .p-card > span { font-size: 14px; line-height: 1.4; }
/* (each in its colour: by night, tinted glass with light words; by day, as before, a pale wash with dark ones) */
.p-card, .p-mini.green { color: var(--text); background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 34%, transparent), color-mix(in srgb, var(--pc) 14%, transparent)), var(--glass);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--pc) 40%, transparent), var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.p-card small { color: color-mix(in srgb, var(--pc) 55%, #fff); } .p-card > span, .p-mini.green small { color: var(--text-2); }
.p-card.gold { --pc: #f2a516; } .p-card.red { --pc: #f0483d; } .p-card.blue { --pc: #3a86f5; } .p-card.green, .p-mini.green { --pc: #26b866; }
.p-card.gold .ic { background: linear-gradient(160deg, #ffc65a, #f29a12); } .p-card.red .ic { background: linear-gradient(160deg, #ff7b70, #e5372c); }
.p-card.blue .ic { background: linear-gradient(160deg, #5aa9ff, #2a6ae6); } .p-card.green .ic { background: linear-gradient(160deg, #4fdc8e, #1fa75a); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .p-card.gold { background: linear-gradient(160deg, #fff7e2, #ffe3a3); } :root:not([data-theme="dark"]) .p-card.gold .ic { background: linear-gradient(160deg, #ffc65a, #f29a12); } :root:not([data-theme="dark"]) .p-card.gold small { color: #8a5a00; } :root:not([data-theme="dark"]) .p-card.gold > span { color: rgba(60, 40, 0, 0.75); }
  :root:not([data-theme="dark"]) .p-card.red { background: linear-gradient(160deg, #ffeceb, #ffd0cc); } :root:not([data-theme="dark"]) .p-card.red .ic { background: linear-gradient(160deg, #ff7b70, #e5372c); } :root:not([data-theme="dark"]) .p-card.red small { color: #a3241a; } :root:not([data-theme="dark"]) .p-card.red > span { color: rgba(80, 10, 0, 0.72); }
  :root:not([data-theme="dark"]) .p-card.blue { background: linear-gradient(160deg, #e8f1ff, #cfe0ff); } :root:not([data-theme="dark"]) .p-card.blue .ic { background: linear-gradient(160deg, #5aa9ff, #2a6ae6); } :root:not([data-theme="dark"]) .p-card.blue small { color: #1f4fa8; } :root:not([data-theme="dark"]) .p-card.blue > span { color: rgba(10, 30, 80, 0.72); }
  :root:not([data-theme="dark"]) .p-card.green { background: linear-gradient(160deg, #e9fbf0, #c6f0d7); } :root:not([data-theme="dark"]) .p-card.green .ic { background: linear-gradient(160deg, #4fdc8e, #1fa75a); } :root:not([data-theme="dark"]) .p-card.green small { color: #127a40; } :root:not([data-theme="dark"]) .p-card.green > span { color: rgba(10, 60, 30, 0.72); }
}
:root[data-theme="light"] .p-card.gold { background: linear-gradient(160deg, #fff7e2, #ffe3a3); } :root[data-theme="light"] .p-card.gold .ic { background: linear-gradient(160deg, #ffc65a, #f29a12); } :root[data-theme="light"] .p-card.gold small { color: #8a5a00; } :root[data-theme="light"] .p-card.gold > span { color: rgba(60, 40, 0, 0.75); }
:root[data-theme="light"] .p-card.red { background: linear-gradient(160deg, #ffeceb, #ffd0cc); } :root[data-theme="light"] .p-card.red .ic { background: linear-gradient(160deg, #ff7b70, #e5372c); } :root[data-theme="light"] .p-card.red small { color: #a3241a; } :root[data-theme="light"] .p-card.red > span { color: rgba(80, 10, 0, 0.72); }
:root[data-theme="light"] .p-card.blue { background: linear-gradient(160deg, #e8f1ff, #cfe0ff); } :root[data-theme="light"] .p-card.blue .ic { background: linear-gradient(160deg, #5aa9ff, #2a6ae6); } :root[data-theme="light"] .p-card.blue small { color: #1f4fa8; } :root[data-theme="light"] .p-card.blue > span { color: rgba(10, 30, 80, 0.72); }
:root[data-theme="light"] .p-card.green { background: linear-gradient(160deg, #e9fbf0, #c6f0d7); } :root[data-theme="light"] .p-card.green .ic { background: linear-gradient(160deg, #4fdc8e, #1fa75a); } :root[data-theme="light"] .p-card.green small { color: #127a40; } :root[data-theme="light"] .p-card.green > span { color: rgba(10, 60, 30, 0.72); }
/* every day: a square each */
.p-cal { padding: 14px; }
.p-cal-grid { display: grid; grid-template-columns: repeat(var(--n, 26), minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 3px; }
.p-cal-grid i, .p-cal-key i { display: block; aspect-ratio: 1; border-radius: 2px; }
.p-cal-key i { width: 9px; }
.l0 { background: color-mix(in srgb, var(--tint) 9%, transparent); } .l1 { background: color-mix(in srgb, var(--tint) 25%, transparent); } .l2 { background: color-mix(in srgb, var(--tint) 45%, transparent); }
.l3 { background: color-mix(in srgb, var(--tint) 70%, transparent); } .l4 { background: var(--tint-deep); } .p-cal-grid i.future { background: none; }
.p-cal-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--text-3); }
.p-cal-months { position: relative; flex: 1; height: 14px; } .p-cal-months span { position: absolute; left: calc(var(--c) / var(--n, 26) * 100%); }
.p-cal-key { display: inline-flex; align-items: center; gap: 3px; }
/* the sheets: Power, Training, Engine */
.p-kick { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); }
.p-head { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 2px; flex-wrap: wrap; }
.p-head b { font: 700 44px/1 var(--font-d); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; } .p-head b u { text-decoration: none; font-size: 18px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.p-head > span { font-size: 16px; font-weight: 600; color: var(--text-2); }
.p-gain { padding: 3px 9px; border-radius: 9px; background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good-text); font-size: 13px; font-weight: 700; }
.p-head .p-gain { margin-left: auto; font-size: 14px; } .p-gain.down { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.p-when { display: block; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.p-curve, .p-ftp, .p-eff { display: block; margin: 8px 0 4px; overflow: visible; }
.p-curve .ftp { stroke: #e3a20f; stroke-dasharray: 4 4; } .p-curve .ftpl { font-size: 10px; fill: #b07a00; }
.p-curve .was { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 3 4; } .p-curve .now { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.p-curve .cross { stroke: var(--text); stroke-opacity: 0.25; stroke-dasharray: 2 3; } .p-curve .halo { fill: var(--tint); opacity: 0.2; } .p-curve .pt { fill: #fff; stroke: var(--tint); stroke-width: 3; }
.p-curve .lab, .p-ftp .lab, .p-eff .lab { font-size: 10px; fill: var(--text-3); }
.p-lens { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.p-lens button { min-height: 36px; border: 0; border-radius: 12px; background: var(--glass-ctl); color: var(--text-2); font: 600 13px/1 var(--font); }
.p-lens button.on { background: var(--tint); color: #fff; box-shadow: 0 6px 14px -8px var(--tint); }
.p-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.p-legend span { display: inline-flex; align-items: center; gap: 6px; } .p-legend i { width: 12px; height: 10px; border-radius: 3px; }
.p-legend i.now { height: 3px; width: 16px; background: linear-gradient(90deg, #7c5cf0, #1fa7c8); } .p-legend i.was { height: 0; width: 16px; border-top: 2px dashed var(--text-3); border-radius: 0; }
.p-legend i.easy, .p-wbar i.easy { background: linear-gradient(180deg, #6aa6ff, #2f7af0); } .p-legend i.mid, .p-wbar i.mid { background: #e9b52a; }
.p-legend i.hard, .p-wbar i.hard { background: linear-gradient(180deg, #ff7b70, #e5372c); } .p-legend i.unknown, .p-wbar i.unknown { background: color-mix(in srgb, var(--text) 18%, transparent); }
.p-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p-record { position: relative; display: grid; gap: 3px; justify-items: start; padding: 14px; border: 0; border-radius: 22px; text-align: left; font: inherit; color: var(--text); background: var(--sheen), var(--glass); box-shadow: var(--edge); }
.p-record > svg { color: var(--text-3); } .p-record small { font-size: 12px; font-weight: 700; color: var(--text-2); } .p-record small.d { font-weight: 500; }
.p-record b { font: 700 24px/1.1 var(--font-d); letter-spacing: -0.4px; }
/* (a new record: in the indigo of Progress's own card, by night and by day) */
.p-record.new { background: linear-gradient(160deg, rgba(94, 92, 230, 0.34), rgba(120, 86, 220, 0.2)), var(--glass); box-shadow: inset 0 0 0 0.5px rgba(160, 150, 255, 0.35); color: var(--text); }
.p-record.new > svg { color: #a9a4ff; } .p-record.new small { color: #bdb8ff; } .p-record.new small.d { color: var(--text-2); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .p-record.new { background: linear-gradient(160deg, #eef0ff, #dcd8ff); box-shadow: inset 0 0 0 0.5px rgba(88, 86, 214, 0.18); color: #0d1020; }
  :root:not([data-theme="dark"]) .p-record.new > svg { color: #5856d6; } :root:not([data-theme="dark"]) .p-record.new small { color: #4a46b8; } :root:not([data-theme="dark"]) .p-record.new small.d { color: rgba(30, 28, 80, 0.65); }
}
:root[data-theme="light"] .p-record.new { background: linear-gradient(160deg, #eef0ff, #dcd8ff); box-shadow: inset 0 0 0 0.5px rgba(88, 86, 214, 0.18); color: #0d1020; }
:root[data-theme="light"] .p-record.new > svg { color: #5856d6; } :root[data-theme="light"] .p-record.new small { color: #4a46b8; } :root[data-theme="light"] .p-record.new small.d { color: rgba(30, 28, 80, 0.65); }
.p-new { position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 999px; background: #1fa75a; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }
.p-rider { display: flex; align-items: center; gap: 14px; padding: 16px; }
.p-rider .tx { display: grid; gap: 6px; } .p-rider b { font: 700 20px/1.2 var(--font-d); } .p-rider span { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.p-radar { flex: none; } .p-radar .grid { fill: none; stroke: var(--line); } .p-radar .shape { stroke: var(--tint); stroke-width: 2.5; stroke-linejoin: round; }
.p-radar text { font-size: 10px; font-weight: 700; fill: var(--text-2); }
.p-train-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.p-train-head b { display: block; font: 700 28px/1.1 var(--font-d); letter-spacing: -0.6px; } .p-train-head b u { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
/* (the weeks' chart: hour lines with their hours on the right, the average dashed across, each week one rounded column
   split by zone, a dot for a week off, this week softer while it's still going, and the months under) */
.p-wchart { margin-top: 18px; }
.p-wbars { position: relative; display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 3px; align-items: end; height: 150px; padding-right: 30px; border-bottom: 1px solid color-mix(in srgb, var(--text) 16%, transparent); }
.p-wgrid, .p-wavg { position: absolute; left: 0; right: 30px; bottom: var(--y); height: 0; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); pointer-events: none; }
.p-wgrid u, .p-wavg u { position: absolute; right: -30px; width: 26px; text-align: right; top: -6px; font-size: 10px; line-height: 1; text-decoration: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.p-wavg { z-index: 2; border-top: 1.5px dashed color-mix(in srgb, var(--text) 55%, transparent); }
.p-wavg u { top: -7px; width: auto; padding: 1px 4px; border-radius: 5px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--text) 14%, transparent); }
.p-wbar { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.p-wcol { display: flex; flex-direction: column; width: 100%; max-width: 12px; height: var(--h); min-height: 4px; border-radius: 4px; overflow: hidden; gap: 1.5px; }
.p-wcol i { display: block; flex: var(--f) 1 0; min-height: 2px; }
.p-wbar.off::after { content: ""; width: 4px; height: 4px; margin-bottom: 3px; border-radius: 50%; background: color-mix(in srgb, var(--text) 18%, transparent); }
.p-wbar.now .p-wcol { opacity: 0.5; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 40%, transparent); }
.p-wmonths { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 3px; padding: 6px 30px 0 0; font-size: 10px; color: var(--text-3); }
.p-wmonths span { white-space: nowrap; overflow: visible; }
.p-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0 0; }
.p-mini { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 24px; }
.p-mini b { font-size: 16px; } .p-mini small { font-size: 13px; line-height: 1.35; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .p-mini.green { background: linear-gradient(160deg, #e9fbf0, #c9f2da); color: #0d1020; box-shadow: none; } :root:not([data-theme="dark"]) .p-mini.green small { color: rgba(10, 60, 30, 0.72); }
  :root:not([data-theme="dark"]) .p-mini.green .p-ring .bg { stroke: rgba(20, 120, 60, 0.15); } :root:not([data-theme="dark"]) .p-mini.green .p-ring text { fill: #0f5a31; }
}
:root[data-theme="light"] .p-mini.green { background: linear-gradient(160deg, #e9fbf0, #c9f2da); color: #0d1020; box-shadow: none; } :root[data-theme="light"] .p-mini.green small { color: rgba(10, 60, 30, 0.72); }
:root[data-theme="light"] .p-mini.green .p-ring .bg { stroke: rgba(20, 120, 60, 0.15); } :root[data-theme="light"] .p-mini.green .p-ring text { fill: #0f5a31; }
/* (the run of weeks: in Progress's indigo, as new records are, by night and by day) */
.p-mini.orange { background: linear-gradient(160deg, rgba(94, 92, 230, 0.34), rgba(120, 86, 220, 0.2)), var(--glass); box-shadow: inset 0 0 0 0.5px rgba(160, 150, 255, 0.35); color: var(--text); }
.p-mini.orange small { color: var(--text-2); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .p-mini.orange { background: linear-gradient(160deg, #eef0ff, #dcd8ff); box-shadow: inset 0 0 0 0.5px rgba(88, 86, 214, 0.18); color: #0d1020; }
  :root:not([data-theme="dark"]) .p-mini.orange small { color: rgba(30, 28, 80, 0.65); }
}
:root[data-theme="light"] .p-mini.orange { background: linear-gradient(160deg, #eef0ff, #dcd8ff); box-shadow: inset 0 0 0 0.5px rgba(88, 86, 214, 0.18); color: #0d1020; }
:root[data-theme="light"] .p-mini.orange small { color: rgba(30, 28, 80, 0.65); }
.p-steps { display: flex; gap: 4px; align-items: flex-end; height: 56px; }
.p-steps i { width: 12px; height: var(--h); border-radius: 4px; background: linear-gradient(180deg, #a9a4ff, #5e5ce6); opacity: var(--o); }
.p-mix { display: flex; align-items: center; gap: 16px; padding: 18px; }
.p-mix .tx { flex: 1; display: grid; gap: 8px; } .p-mix .tx small { font-size: 12px; line-height: 1.4; color: var(--text-2); }
.p-key { display: flex; align-items: center; gap: 8px; font-size: 14px; } .p-key span { flex: 1; } .p-key i { width: 10px; height: 10px; border-radius: 3px; }
.p-key i.easy { background: #2f7af0; } .p-key i.mid { background: #e9b52a; } .p-key i.hard { background: #e5372c; }
.p-donut circle { fill: none; stroke-width: 18; } .p-donut .easy { stroke: #2f7af0; } .p-donut .mid { stroke: #e9b52a; } .p-donut .hard { stroke: #e5372c; }
.p-donut .big { font-size: 22px; font-weight: 800; fill: var(--text); } .p-donut .sm { font-size: 11px; font-weight: 600; fill: var(--text-3); }
.p-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.p-month { display: grid; gap: 2px; padding: 14px; border-radius: 20px; background: var(--sheen), var(--glass); box-shadow: var(--edge); }
.p-month small { font-size: 12px; color: var(--text-2); } .p-month small:first-child { font-weight: 700; } .p-month b { font-size: 20px; }
.p-month i { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--tint) 0 var(--w), var(--glass-ctl) var(--w)); }
.p-month.now { box-shadow: var(--edge), 0 0 0 2px color-mix(in srgb, var(--tint) 35%, transparent); } .p-month.now small:first-child { color: var(--tint-text); }
/* (FTP's card: in Progress's indigo, as new records are, by night and by day) */
.p-ftpcard { display: grid; gap: 4px; padding: 20px; border-radius: 28px; color: var(--text);
  background: linear-gradient(165deg, rgba(94, 92, 230, 0.34) 0%, rgba(120, 86, 220, 0.16) 100%), var(--glass); box-shadow: inset 0 0 0 0.5px rgba(160, 150, 255, 0.35), 0 18px 36px -28px rgba(94, 92, 230, 0.6); }
.p-ftpcard .p-kick { color: #bdb8ff; } .p-ftpcard .p-head > span, .p-ftpcard .p-head b u { color: var(--text-2); } .p-ftpcard .p-when { color: var(--text-2); line-height: 1.4; }
.p-ftp .ln { fill: none; stroke: #a9a4ff; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } .p-ftp .est { fill: #a9a4ff; } .p-ftp .set { fill: var(--bg, #1a1c28); stroke: #a9a4ff; stroke-width: 2.5; } .p-ftp .lab { fill: var(--text-3); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .p-ftpcard { background: linear-gradient(165deg, #eef0ff 0%, #dcd8ff 100%); color: #0d1020; box-shadow: 0 18px 36px -28px rgba(80, 70, 200, 0.6); }
  :root:not([data-theme="dark"]) .p-ftpcard .p-kick { color: #4a46b8; } :root:not([data-theme="dark"]) :is(.p-ftpcard .p-head > span, .p-ftpcard .p-head b u, .p-ftpcard .p-when) { color: rgba(30, 28, 80, 0.66); }
  :root:not([data-theme="dark"]) .p-ftp :is(.ln, .set) { stroke: #5856d6; } :root:not([data-theme="dark"]) .p-ftp .est { fill: #5856d6; } :root:not([data-theme="dark"]) .p-ftp .set { fill: #fff; } :root:not([data-theme="dark"]) .p-ftp .lab { fill: rgba(30, 28, 80, 0.55); }
}
:root[data-theme="light"] .p-ftpcard { background: linear-gradient(165deg, #eef0ff 0%, #dcd8ff 100%); color: #0d1020; box-shadow: 0 18px 36px -28px rgba(80, 70, 200, 0.6); }
:root[data-theme="light"] .p-ftpcard .p-kick { color: #4a46b8; } :root[data-theme="light"] :is(.p-ftpcard .p-head > span, .p-ftpcard .p-head b u, .p-ftpcard .p-when) { color: rgba(30, 28, 80, 0.66); }
:root[data-theme="light"] .p-ftp :is(.ln, .set) { stroke: #5856d6; } :root[data-theme="light"] .p-ftp .est { fill: #5856d6; } :root[data-theme="light"] .p-ftp .set { fill: #fff; } :root[data-theme="light"] .p-ftp .lab { fill: rgba(30, 28, 80, 0.55); }
.p-effcard, .p-stay { display: grid; gap: 6px; padding: 20px; }
.p-row { display: flex; justify-content: space-between; align-items: center; }
.p-title { font: 700 21px/1.2 var(--font-d); letter-spacing: -0.3px; }
.p-eff .band { fill: color-mix(in srgb, #e5372c 14%, transparent); } .p-eff .trend { stroke: #e5372c; stroke-width: 3; stroke-linecap: round; }
.p-eff .pt { fill: #e5372c; } .p-eff .last { fill: var(--glass-strong); stroke: #d22a20; stroke-width: 3; }
.p-dials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0; }
.p-dials:has(> div:only-child) { grid-template-columns: minmax(0, 1fr); }   /* (one dial alone: in the middle, not off to one side) */
.p-dials > div { display: grid; justify-items: center; gap: 2px; text-align: center; } .p-dials b { font-size: 22px; } .p-dials small { font-size: 12px; line-height: 1.35; color: var(--text-2); }
.p-gauge .needle { stroke: var(--text); stroke-width: 3.5; stroke-linecap: round; } .p-gauge .hub { fill: var(--text); }
.p-arc .bg, .p-arc .fg { fill: none; stroke-width: 12; stroke-linecap: round; } .p-arc .bg { stroke: var(--glass-ctl); } .p-arc .fg { stroke: var(--tint); }
.p-arc text { font-size: 20px; font-weight: 800; fill: var(--text); }
/* nothing to select or copy, anywhere: an app's screens, not a page's text (what you type in is yours to select) */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, svg { -webkit-user-drag: none; }
/* a route on a real map (map.js): rounded like a card, its credit in a corner; the whole sheet, to explore */
.map-gl { position: relative; width: 100%; aspect-ratio: 1 / 0.66; border-radius: 22px; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: inset 0 0 0 0.5px var(--line); -webkit-tap-highlight-color: transparent; }
.map-gl .maplibregl-canvas { outline: none; }
.map-gl.big { aspect-ratio: auto; height: calc(100svh - 200px - env(safe-area-inset-bottom)); min-height: 360px; cursor: grab; }
/* (the map's credits: a ©, opening out to the left into the names when tapped, as on Weather's map) */
.map-credit { position: absolute; z-index: 3; right: 10px; bottom: 10px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 13px; cursor: pointer;
  color: #fff; font: inherit; font-size: 11px; line-height: 1; background: rgba(28, 30, 36, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.18); -webkit-tap-highlight-color: transparent; transition: transform 0.42s var(--spring, ease); }
.map-credit::after { content: ""; position: absolute; inset: -9px; border-radius: inherit; }
.map-credit > .mc-c { position: relative; z-index: 2; font-size: 13px; font-weight: 600; }
.map-credit .mc-t { position: absolute; right: 0; bottom: 0; z-index: 1; box-sizing: border-box; height: 26px; padding: 0 28px 0 10px; display: flex; align-items: center; border-radius: 13px; white-space: pre;
  color: inherit; background: rgba(28, 30, 36, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.18);
  clip-path: inset(0 round 13px); transition: clip-path 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s; pointer-events: none; }
.map-credit.folded .mc-t { clip-path: inset(0 0 0 calc(100% - 26px) round 13px); opacity: 0; }
.map-credit:active { transform: scale(0.88); transition-duration: 0.1s; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .map-credit { color: #1c1c1e; background: rgba(255, 255, 255, 0.78); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
  :root:not([data-theme="dark"]) .map-credit .mc-t { background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
}
:root[data-theme="light"] .map-credit { color: #1c1c1e; background: rgba(255, 255, 255, 0.78); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
:root[data-theme="light"] .map-credit .mc-t { background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
@media (prefers-reduced-motion: reduce) { .map-credit, .map-credit .mc-t { transition: none; } }
.map-open { position: absolute; z-index: 2; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--text);
  background: color-mix(in srgb, var(--glass-strong) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--edge); pointer-events: none; }

/* ---- Today, overhauled: the day first, at a glance ---- */
/* (the title, and under it the date, or where you are in Rhythm's block) */
.head.dated { align-items: flex-end; }
.head.dated .t { display: flex; flex-direction: column; gap: 4px; }
.head.dated .sub { order: 1; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.head.dated h1 { line-height: 1; letter-spacing: -0.4px; }
/* (a section of Today: its title a heading over it) */
.section.t-sec > h3 { margin: 22px 16px 10px; font: 700 20px/1.2 var(--font-d); letter-spacing: -0.2px; text-transform: none; color: var(--text); }
.section.t-sec > h3 .aside { font-size: 14px; font-weight: 500; color: var(--text-2); }
.section.t-sec > .card { margin: 0; }
/* the day's card: what kind of day, its name and how ready you are, side by side */
.hero-top { display: flex; align-items: center; gap: 16px; }
.hero-top .tx { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 10px; }
.hero-top h2 { margin: 0; }
.session .hero-top h2 { font-size: 26px; line-height: 1.12; letter-spacing: -0.3px; }
.ready { position: relative; flex: none; width: var(--s); height: var(--s); }
.ready svg { display: block; width: 100%; height: 100%; overflow: visible; }   /* (drawn to its box: a card that sets it smaller has the ring and its number together) */
.ready .trk { fill: color-mix(in srgb, var(--text) 4%, transparent); stroke: color-mix(in srgb, var(--text) 12%, transparent); stroke-width: 8; }
.ready .arc { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray 0.6s var(--glide, ease); }
.ready.good .arc { stroke: #4cd98a; } .ready.steady .arc { stroke: #6fa8ff; } .ready.easy .arc { stroke: #ffb547; }
.ready > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ready b { font: 700 26px/1 var(--font-r); font-variant-numeric: tabular-nums; }
.ready small { font-size: 11px; font-weight: 600; color: var(--text-2); }
.session.go .ready { --s: 72px !important; } .session.go .ready b { font-size: 21px; }
.hero-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.hero-figs small { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); }
.hero-figs b { display: block; margin-top: 2px; font: 700 20px/1.1 var(--font-r); font-variant-numeric: tabular-nums; }
.hero-figs b u { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--text-2); }
.session.rest .about, .session.rest .why { margin-top: 14px; }
/* the next session, with its shape */
.next-up { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; margin-top: 16px; padding: 12px 12px 12px 16px; border: 0; border-radius: 20px; text-align: left; font: inherit; color: inherit;
  background: color-mix(in srgb, #000 22%, transparent); box-shadow: inset 0 0 0 0.5px var(--line); cursor: pointer; }
.next-up .tx { flex: 1; min-width: 0; display: grid; gap: 3px; }
.next-up .tx b { font-size: 16px; font-weight: 600; } .next-up .tx small { font-size: 13px; color: var(--text-2); }
.next-up .tx small:first-child { font-size: 12px; font-weight: 600; }
.next-up .mini { flex: none; width: 96px; } .next-up .mini svg { display: block; width: 96px; height: 36px; }
.next-up .chev { color: var(--text-3); display: grid; }
.next-up:active { transform: scale(0.985); }
/* the best time to ride, in the session's card */
.best-time { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, #000 18%, transparent); }
.best-time .wxi { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 211, 107, 0.18); }
.best-time .wxi svg { width: 22px; height: 22px; }
.best-time .tx { display: grid; gap: 1px; } .best-time b { font-size: 15px; font-weight: 600; } .best-time small { font-size: 13px; color: var(--text-2); }
/* done: the ride on its map, planned against ridden, and a new best */
.done-map { position: relative; height: 172px; margin: -6px -6px 18px; border-radius: 18px; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 0.5px var(--line); }
.done-map .maplibregl-canvas { outline: none; }
.session .sport.ok { color: var(--good-text); background: color-mix(in srgb, var(--good) 16%, transparent); }
.vs { display: grid; gap: 10px; margin-top: 16px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--text) 4.5%, transparent); }
.vs-head { display: flex; justify-content: space-between; } .vs-head small { font-size: 13px; font-weight: 600; color: var(--text-2); } .vs-head small.ok { color: var(--good-text); }
.vs-row { display: grid; grid-template-columns: 62px 1fr 30px; align-items: center; gap: 10px; }
.vs-row small { font-size: 13px; color: var(--text-2); } .vs-row b { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.vs-bar { height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--text) 7%, transparent); }
.vs-bar i { display: block; height: 100%; border-radius: 4px; } .vs-bar i.plan { background: color-mix(in srgb, var(--text) 38%, transparent); } .vs-bar i.done { background: linear-gradient(90deg, #4cd98a, #2fbf71); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero-chips .rec { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 15px; font-size: 13px; font-weight: 600; color: #c4bfff; background: rgba(110, 100, 255, 0.2); box-shadow: inset 0 0 0 0.5px rgba(160, 150, 255, 0.35); }
/* tomorrow, and what today did */
.tomorrow { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: inherit; border: 0; cursor: pointer; }
.tomorrow .ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.tomorrow .tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .tomorrow .tx b { font-size: 16px; font-weight: 600; } .tomorrow .tx small { font-size: 13px; color: var(--text-2); }
.tomorrow .chev { color: var(--text-3); display: grid; }
.did { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.did .card { margin: 0; display: grid; gap: 3px; }
.did small { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); } .did small i { width: 8px; height: 8px; border-radius: 50%; }
.did .v { display: flex; align-items: baseline; gap: 8px; } .did b { font: 700 26px/1.1 var(--font-r); font-variant-numeric: tabular-nums; } .did em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--good-text); }
.did small.sub { font-size: 12px; color: var(--text-3); }
/* the check-in, there on the page: three rows of three, and what came of it */
.checkin.open { display: grid; gap: 10px; }
.checkin-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 4px; } .checkin-head b { font-size: 17px; font-weight: 600; }
.checkin-row { display: flex; align-items: center; gap: 10px; }
.checkin-row .lab { width: 112px; flex: none; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.checkin-row .ico { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--glass-ctl); color: var(--text-2); }
.seg3 { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: 13px; background: color-mix(in srgb, #000 22%, transparent); box-shadow: inset 0 0 0 0.5px var(--line); }
.seg3 button { min-height: 34px; padding: 0 2px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font: 600 14px/1 var(--font); cursor: pointer; transition: background 0.2s, color 0.2s; }
.seg3 button[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 16%, transparent); box-shadow: inset 0 0 0 0.5px var(--line), 0 1px 2px rgba(0, 0, 0, 0.25); }
.seg3 button.t0[aria-pressed="true"] { color: var(--warn); background: color-mix(in srgb, #ffb547 22%, transparent); }
.seg3 button.t2[aria-pressed="true"] { color: var(--good-text); background: color-mix(in srgb, #4cd98a 20%, transparent); }
.checkin-said { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; padding: 11px 12px; border-radius: 14px; font-size: 14px; line-height: 1.38; }
.checkin-said svg { flex: none; margin-top: 2px; } .checkin-said b { font-weight: 600; }
.checkin-said.amber { color: var(--warn); background: color-mix(in srgb, #ffb547 11%, transparent); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #ffb547 24%, transparent); }
.checkin-said.green { color: var(--good-text); background: color-mix(in srgb, #4cd98a 10%, transparent); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #4cd98a 22%, transparent); }
.checkin-hint { padding: 0 2px; font-size: 13px; color: var(--text-2); line-height: 1.35; }
.checkin.done { display: flex; align-items: center; gap: 12px; }
.checkin.done .ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.checkin.done .tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .checkin.done .tx b { font-size: 15px; } .checkin.done .tx small { font-size: 13px; color: var(--text-2); }
/* the week: a ring a day */
.week-card .week { align-items: start; gap: 2px; }
.week-card .wday { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 6px; border-radius: 14px; min-height: 44px; cursor: pointer; }
.week-card .wday.today { background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); }
.week-card .wday .d { font-size: 12px; font-weight: 600; color: var(--text-3); } .week-card .wday.today .d { color: var(--text); }
.week-card .wday small { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.week-card .wday svg { display: block; }
.r-did { fill: color-mix(in srgb, #4cd98a 18%, transparent); stroke: #4cd98a; stroke-width: 3; }
.r-tick { fill: none; stroke: var(--good-text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.r-missed { fill: none; stroke: color-mix(in srgb, #ffb547 50%, transparent); stroke-width: 3; } .r-dash { stroke: var(--warn); stroke-width: 2.6; stroke-linecap: round; }
.r-plan { fill: none; stroke-width: 3; stroke-dasharray: 3 3.8; } .r-plan.z2 { stroke: var(--z2); } .r-plan.z3 { stroke: var(--z3); } .r-plan.z4 { stroke: var(--z4); } .r-plan.z6 { stroke: var(--z6); } .r-plan.tint { stroke: var(--tint); } .wday.today .r-plan { stroke-dasharray: none; fill: color-mix(in srgb, var(--text) 8%, transparent); }
.r-rest { fill: color-mix(in srgb, var(--text) 22%, transparent); }
.week-bar { height: 6px; margin: 14px 6px 0; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); }
.week-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--tint), #8b7bff); }
.week-card .week-sum { margin: 8px 6px 0; font-size: 13px; }
.week-status { display: block; margin: 6px 6px 0; font-size: 12px; color: var(--text-3); }
/* fitness and form: form first, in words and on a band */
.form-card { display: grid; gap: 16px; text-align: left; }
.form-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.form-top small { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); }
.form-top b { font: 700 36px/1 var(--font-r); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.pill-word { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; font-size: 14px; font-weight: 600; background: color-mix(in srgb, currentColor 15%, transparent); }
.fband { position: relative; height: 40px; margin-bottom: 12px; }
.fband .track { position: absolute; left: 0; right: 0; top: 7px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #ff6b5f 0%, #ffb547 24%, #4cd98a 48%, #4cd98a 62%, #5aa2ff 80%, #8e94ad 100%); }
.fband .knob { position: absolute; top: 1px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--glass-strong), 0 2px 8px rgba(0, 0, 0, 0.35); }
.fband .lab { position: absolute; left: 0; right: 0; top: 25px; display: flex; justify-content: space-between; font-size: 11px; font-weight: 500; color: var(--text-3); }
.fit-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fit-tiles > div { display: grid; gap: 3px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--text) 4.5%, transparent); }
.fit-tiles small { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); } .fit-tiles small i { width: 8px; height: 8px; border-radius: 50%; }
.fit-tiles b { font: 700 24px/1.1 var(--font-r); font-variant-numeric: tabular-nums; } .fit-tiles small.sub { font-size: 12px; color: var(--text-3); }
.form-card .line-said { margin: 0; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.next-up, .best-time) { background: rgba(255, 255, 255, 0.7); }
  :root:not([data-theme="dark"]) .seg3 { background: rgba(13, 16, 32, 0.055); box-shadow: none; }
  :root:not([data-theme="dark"]) .seg3 button[aria-pressed="true"]:not(.t0):not(.t2) { background: #fff; box-shadow: 0 1px 3px rgba(13, 16, 32, 0.14); }
  :root:not([data-theme="dark"]) .hero-chips .rec { color: #4a46b8; background: #e6e3ff; box-shadow: none; }
  :root:not([data-theme="dark"]) .fband .knob { box-shadow: 0 0 0 1px rgba(13, 16, 32, 0.12), 0 2px 8px rgba(13, 16, 32, 0.3); }
}
:root[data-theme="light"] :is(.next-up, .best-time) { background: rgba(255, 255, 255, 0.7); }
:root[data-theme="light"] .seg3 { background: rgba(13, 16, 32, 0.055); box-shadow: none; }
:root[data-theme="light"] .seg3 button[aria-pressed="true"]:not(.t0):not(.t2) { background: #fff; box-shadow: 0 1px 3px rgba(13, 16, 32, 0.14); }
:root[data-theme="light"] .hero-chips .rec { color: #4a46b8; background: #e6e3ff; box-shadow: none; }
:root[data-theme="light"] .fband .knob { box-shadow: 0 0 0 1px rgba(13, 16, 32, 0.12), 0 2px 8px rgba(13, 16, 32, 0.3); }
.best-time.poor .wxi { background: var(--glass-ctl); color: var(--text-2); }
/* the efforts held: a chip on Today, and a bar each in the ride */
.hero-chips .held { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 15px; font-size: 13px; font-weight: 600; color: var(--warn); background: color-mix(in srgb, #ffb547 14%, transparent); }
.hero-chips .held.ok { color: var(--good-text); background: color-mix(in srgb, var(--good) 14%, transparent); }
.eff-head { display: grid; gap: 2px; margin-bottom: 12px; }
.eff-head b { font: 700 20px/1.2 var(--font-d); letter-spacing: -0.2px; } .eff-head b.ok { color: var(--good-text); } .eff-head b.part { color: var(--warn); }
.eff-head small { font-size: 13px; color: var(--text-2); }
.eff-strip { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 110px; margin: 0 0 12px; }
.eff-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--line); border-top: 1.5px dashed color-mix(in srgb, var(--text) 45%, transparent); pointer-events: none; }
.eff { flex: 1; min-width: 2px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.eff small { font-size: 11px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.eff i { display: block; width: 100%; max-width: 40px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #ffc978, #f29a12); }
.eff-strip.few .eff i { border-radius: 8px 8px 3px 3px; }
.eff.ok i { background: linear-gradient(180deg, #86ecb2, #2fbf71); }

/* ---- Today and the plan, one page ---- */
/* the day strip: the week, a day each, a tap to look at it */
.strip { margin: 0 0 12px; padding: 6px; border-radius: 22px; }
.strip-top { display: flex; align-items: center; gap: 4px; padding: 2px 4px 6px; }
.strip-top b { font-size: 14px; font-weight: 600; min-width: 82px; text-align: center; }
.strip-step { width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; color: var(--text-2); cursor: pointer; }
.strip-step:disabled { opacity: 0.3; cursor: default; }
.strip-step:not(:disabled):active { background: var(--glass-ctl); }
.strip-all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--glass-ctl); color: var(--text); font: 600 13px/1 var(--font); cursor: pointer; }
.strip-all.on { background: var(--tint); color: var(--on-tint); }
.strip-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.sday { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 44px; padding: 9px 0 8px; border: 0; border-radius: 16px; background: transparent; color: var(--text); font: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; }
.sday small { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: var(--text-3); }
.sday b { font: 600 17px/1 var(--font-r); font-variant-numeric: tabular-nums; }
.sday svg { display: block; }
.sday.today:not(.on) small, .sday.today:not(.on) b { color: var(--tint-text); }
.sday.on { background: var(--text); color: var(--bg-solid, #0b0c18); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45); }
.sday.on small { color: color-mix(in srgb, var(--bg-solid, #0b0c18) 70%, transparent); }
.sday.on .r-rest { fill: color-mix(in srgb, var(--bg-solid, #0b0c18) 35%, transparent); }
.sday .r-did, .sday .r-missed, .sday .r-plan { stroke-width: 2.4; }
/* both weeks as a list */
.agenda { margin-bottom: 4px; }
.agenda .section.t-sec > h3 { margin-top: 6px; }
.ag-row .when { width: 42px; height: 46px; flex: none; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--glass-ctl); }
.ag-row .when small { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-3); } .ag-row .when b { font: 700 18px/1.1 var(--font-r); }
.ag-row.today .when { background: var(--tint); } .ag-row.today .when small, .ag-row.today .when b { color: var(--on-tint); }
.ag-row.sel { background: color-mix(in srgb, var(--tint) 10%, transparent); }
.ag-row .mini { flex: none; width: 76px; } .ag-row .mini svg { display: block; width: 76px; height: 28px; }
.ag-ok { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--good); }
/* a day ahead: ways to change it */
.session.ahead { background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 22%, transparent), color-mix(in srgb, var(--tint) 8%, transparent)), var(--glass); }
.session .sport.miss { color: var(--warn); background: color-mix(in srgb, #ffb547 16%, transparent); }
.day-change { display: grid; gap: 8px; margin-top: 16px; }
.day-change > small { font-size: 12px; font-weight: 600; color: var(--text-2); }
.day-change .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--glass-ctl); color: var(--text); font: 600 14px/1 var(--font); cursor: pointer; }
.chip-btn:active { transform: scale(0.96); }
.chip-btn.undo { color: var(--tint-text); }
/* Rhythm says */
.says { display: grid; gap: 14px; }
.says-head { display: flex; align-items: center; gap: 8px; } .says-head .ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff; } .says-head b { font-size: 15px; }
.say { display: flex; gap: 12px; align-items: flex-start; }
.say .tx { display: grid; gap: 2px; } .say .tx b { font-size: 15px; font-weight: 600; } .say .tx small { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.say-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; }
.say-ic.green { color: var(--good-text); background: color-mix(in srgb, var(--good) 16%, transparent); }
.say-ic.amber { color: var(--warn); background: color-mix(in srgb, #ffb547 15%, transparent); }
.say-ic.blue { color: var(--tint-text); background: color-mix(in srgb, var(--tint) 16%, transparent); }
.say-ic.indigo { color: #a9a4ff; background: rgba(110, 100, 255, 0.18); }
/* where it's heading */
.heading { display: grid; gap: 12px; }
.heading .rb-weeks { margin: 0; }
.hd-top { display: flex; align-items: baseline; gap: 10px; } .hd-top b { font: 700 30px/1 var(--font-r); } .hd-top span { font-size: 15px; color: var(--text-2); }
.hd-top .hd-to { margin-left: auto; padding: 4px 10px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--good-text); background: color-mix(in srgb, var(--good) 15%, transparent); }
.heading svg { display: block; width: 100%; height: 106px; overflow: visible; }
.hd-ahead { fill: color-mix(in srgb, var(--text) 4%, transparent); }
.hd-lab { font-size: 10px; fill: var(--text-3); }
.heading .line-said { margin: 0; }
/* the week: hours, and easy against hard */
.wk-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-2); }
.wk-line b { font: 700 20px/1 var(--font-r); color: var(--text); } .wk-line.bal-head { margin-top: 16px; } .wk-line.bal-head b { font: 600 13px/1 var(--font); }
.week-card .week-bar { margin: 8px 0 0; height: 8px; border-radius: 4px; }
.bal { display: flex; gap: 3px; height: 8px; margin-top: 8px; } .bal i { display: block; border-radius: 2px; } .bal i:first-child { border-radius: 4px 2px 2px 4px; } .bal i:last-child { border-radius: 2px 4px 4px 2px; }
.bal i.easy { background: var(--z2); } .bal i.hard { background: var(--z6); }
.week-card .week-status { margin: 8px 0 0; }
/* moving a day */
.mv-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.mv-day { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 70px; padding: 10px 0; border: 0; border-radius: 14px; background: var(--glass-ctl); color: var(--text); font: inherit; cursor: pointer; }
.mv-day small { font-size: 11px; font-weight: 600; color: var(--text-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mv-day b { font: 600 18px/1 var(--font-r); }
.mv-day.best small.w { color: var(--good-text); }
.mv-day.on { background: color-mix(in srgb, var(--tint) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--tint); }
.mv-week { display: grid; gap: 8px; } .mv-week > small { font-size: 12px; font-weight: 600; color: var(--text-2); }
.mv-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 84px; }
.mv-bars > div { display: flex; flex-direction: column; align-items: center; gap: 4px; } .mv-bars small { font-size: 10px; color: var(--text-3); }
.mv-bars i { display: block; width: 100%; border-radius: 4px; } .mv-bars .moved small { color: var(--tint-text); font-weight: 700; }
.mv-bars i.rest { background: color-mix(in srgb, var(--text) 15%, transparent); } .mv-bars i.z2 { background: var(--z2); } .mv-bars i.z3 { background: var(--z3); } .mv-bars i.z4 { background: var(--z4); } .mv-bars i.z6 { background: var(--z6); } .mv-bars i.tint { background: var(--tint); }
.mv-week .line-said { margin: 0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sday.on { background: var(--tint-deep); color: #fff; } :root:not([data-theme="dark"]) .sday.on small { color: rgba(255, 255, 255, 0.8); } :root:not([data-theme="dark"]) .sday.on .r-rest { fill: rgba(255, 255, 255, 0.5); } }
:root[data-theme="light"] .sday.on { background: var(--tint-deep); color: #fff; } :root[data-theme="light"] .sday.on small { color: rgba(255, 255, 255, 0.8); } :root[data-theme="light"] .sday.on .r-rest { fill: rgba(255, 255, 255, 0.5); }
.r-later { fill: none; stroke: color-mix(in srgb, var(--text) 18%, transparent); stroke-width: 1.5; stroke-dasharray: 1 3; }
.ag-row.later .tx b { color: var(--text-2); font-weight: 500; }

/* ---- motion: Today's cards coming up in turn, the day looked at sliding in from its side, the ring and bars filling
   as they arrive, and a press felt; none of it with Reduce Motion (only on a fresh screen, or a new day: a redraw in
   place stays still) ---- */
.screen.in .cols > div > * { animation: rise 0.6s var(--ease-out) backwards; }
.screen.in .cols > div > :nth-child(2) { animation-delay: 60ms; } .screen.in .cols > div > :nth-child(3) { animation-delay: 120ms; }
.screen.in .cols > div > :nth-child(4) { animation-delay: 180ms; } .screen.in .cols > div > :nth-child(n + 5) { animation-delay: 240ms; }
.screen.in .cols > div:last-child > * { animation-delay: 160ms; }
.screen.in .strip { animation: rise 0.5s var(--ease-out) backwards; }
.day-in.next { animation: day-next 0.38s var(--ease-out) backwards; } .day-in.prev { animation: day-prev 0.38s var(--ease-out) backwards; }
@keyframes day-next { from { opacity: 0; transform: translateX(26px); } }
@keyframes day-prev { from { opacity: 0; transform: translateX(-26px); } }
.agenda.open-in .ag-row { animation: rise 0.42s var(--ease-out) backwards; }
.agenda.open-in .ag-row:nth-child(2) { animation-delay: 25ms; } .agenda.open-in .ag-row:nth-child(3) { animation-delay: 50ms; } .agenda.open-in .ag-row:nth-child(4) { animation-delay: 75ms; }
.agenda.open-in .ag-row:nth-child(5) { animation-delay: 100ms; } .agenda.open-in .ag-row:nth-child(6) { animation-delay: 125ms; } .agenda.open-in .ag-row:nth-child(n + 7) { animation-delay: 150ms; }
/* (the ring drawn round, the bars and the knob coming to where they are) */
:is(.screen.in, .day-in) .ready .arc { animation: ring-draw 0.9s var(--ease-out) 0.15s backwards; }
@keyframes ring-draw { from { stroke-dasharray: 0 999; } }
.screen.in :is(.week-bar i, .vs-bar i) { animation: bar-grow 0.8s var(--ease-out) 0.25s backwards; }
@keyframes bar-grow { from { width: 0; } }
.screen.in .bal i { animation: bal-grow 0.8s var(--ease-out) 0.3s backwards; }
@keyframes bal-grow { from { flex-grow: 0; } }
.screen.in .fband .knob { animation: knob-in 0.8s var(--ease-out) 0.3s backwards; }
@keyframes knob-in { from { left: 50%; opacity: 0; } }
:is(.screen.in, .day-in) .eff i { animation: eff-up 0.6s var(--ease-out) backwards; transform-origin: bottom; }
@keyframes eff-up { from { transform: scaleY(0); } }
/* (a press, felt) */
.sday, .strip-all, .chip-btn, .tomorrow, .mv-day, .ag-row, .strip-step { transition: transform 0.18s var(--ease-out), background 0.2s, color 0.2s; }
.sday:active { transform: scale(0.92); } .strip-all:active, .mv-day:active { transform: scale(0.95); } .tomorrow:active, .ag-row:active { transform: scale(0.985); }
.seg3 button:active { transform: scale(0.94); } .seg3 button { transition: background 0.2s, color 0.2s, transform 0.15s; }
@media (prefers-reduced-motion: reduce) {
  .screen.in .cols > div > *, .screen.in .strip, .day-in, .agenda.open-in .ag-row, .ready .arc, .week-bar i, .vs-bar i, .bal i, .fband .knob, .eff i { animation: none !important; }
  .sday:active, .strip-all:active, .mv-day:active, .tomorrow:active, .ag-row:active, .seg3 button:active { transform: none; }
}

/* ---- more motion: every screen's parts in turn, rows and sheets too, lines drawn, the tab's icon, the map ---- */
/* (each screen: its parts coming up in turn) */
.screen.in > * { animation: rise 0.6s var(--ease-out) backwards; }
.screen.in > :nth-child(2) { animation-delay: 50ms; } .screen.in > :nth-child(3) { animation-delay: 100ms; } .screen.in > :nth-child(4) { animation-delay: 150ms; }
.screen.in > :nth-child(5) { animation-delay: 200ms; } .screen.in > :nth-child(6) { animation-delay: 250ms; } .screen.in > :nth-child(n + 7) { animation-delay: 300ms; }
/* (a list's first rows, one after another) */
.screen.in .group > .row:nth-child(-n + 12) { animation: row-in 0.5s var(--ease-out) backwards; }
.screen.in .group > .row:nth-child(2) { animation-delay: 40ms; } .screen.in .group > .row:nth-child(3) { animation-delay: 80ms; } .screen.in .group > .row:nth-child(4) { animation-delay: 120ms; }
.screen.in .group > .row:nth-child(5) { animation-delay: 160ms; } .screen.in .group > .row:nth-child(6) { animation-delay: 200ms; } .screen.in .group > .row:nth-child(n + 7) { animation-delay: 240ms; }
@keyframes row-in { from { opacity: 0; transform: translateX(-10px); } }
/* (Rhythm's notes, in turn) */
:is(.screen.in, .day-in) .says .say { animation: rise 0.5s var(--ease-out) backwards; }
:is(.screen.in, .day-in) .says .say:nth-child(3) { animation-delay: 90ms; } :is(.screen.in, .day-in) .says .say:nth-child(4) { animation-delay: 180ms; }
/* (a sheet as it opens: its parts after it, in turn; a ride's figures one by one) */
dialog.sheet.fresh .sheet-body > * { animation: rise 0.55s var(--ease-out) backwards; animation-delay: 120ms; }
dialog.sheet.fresh .sheet-body > :nth-child(2) { animation-delay: 170ms; } dialog.sheet.fresh .sheet-body > :nth-child(3) { animation-delay: 220ms; }
dialog.sheet.fresh .sheet-body > :nth-child(4) { animation-delay: 270ms; } dialog.sheet.fresh .sheet-body > :nth-child(n + 5) { animation-delay: 320ms; }
dialog.sheet.fresh .stats .stat { animation: pop-in 0.45s var(--ease-out) backwards; }
dialog.sheet.fresh .stats .stat:nth-child(2) { animation-delay: 230ms; } dialog.sheet.fresh .stats .stat:nth-child(3) { animation-delay: 260ms; } dialog.sheet.fresh .stats .stat:nth-child(4) { animation-delay: 290ms; }
dialog.sheet.fresh .stats .stat:nth-child(5) { animation-delay: 320ms; } dialog.sheet.fresh .stats .stat:nth-child(6) { animation-delay: 350ms; } dialog.sheet.fresh .stats .stat:nth-child(n + 7) { animation-delay: 380ms; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94); } }
/* (lines drawn, left to right: fitness, FTP, where it's heading) */
:is(.screen.in, dialog.sheet.fresh) :is(.chart .l-fit, .p-hero-chart .ln, .p-ftp .ln, .heading .rh-line.up:not(.ahead)) { stroke-dasharray: 2400; animation: draw 1.2s var(--ease-out) 0.2s backwards; }
@keyframes draw { from { stroke-dashoffset: 2400; } }
:is(.screen.in, dialog.sheet.fresh) :is(.chart .a-fit) { animation: fade-up 1s var(--ease-out) 0.5s backwards; }
@keyframes fade-up { from { opacity: 0; } }
/* (a session's shape: its steps rising) */
:is(.screen.in, .day-in, dialog.sheet.fresh) .profile svg { animation: shape-up 0.7s var(--ease-out) 0.15s backwards; transform-origin: bottom; }
@keyframes shape-up { from { opacity: 0; transform: scaleY(0.4); } }
/* (the tab chosen: its icon, a little bounce) */
.tab[aria-current="page"] svg { animation: tab-pop 0.5s var(--ease-glide, var(--ease-out)); }
@keyframes tab-pop { 40% { transform: scale(1.18) translateY(-1px); } }
/* (the map, fading in as it's drawn) */
.maplibregl-canvas { animation: fade-up 0.7s var(--ease-out); }
/* (the check-in's answer, as it comes) */
.checkin-said, .screen.in .checkin.done { animation: pop-in 0.4s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .screen.in > *, .screen.in .group > .row, .says .say, dialog.sheet.fresh .sheet-body > *, dialog.sheet.fresh .stats .stat, .chart .l-fit, .p-hero-chart .ln, .p-ftp .ln, .heading .rh-line, .chart .a-fit,
  .profile svg, .tab[aria-current="page"] svg, .maplibregl-canvas, .checkin-said, .checkin.done { animation: none !important; }
}

/* (the check-in, open: the whole width, Done on the title's line, the answer a heading and its detail) */
.checkin.open { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 12px; }
.checkin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 2px; }
.checkin-head b { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
.checkin-done { flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--glass-ctl); color: var(--tint-text); font: 600 14px/1 var(--font); cursor: pointer; }
.checkin-done:active { transform: scale(0.95); }
.checkin-row { gap: 12px; } .checkin-row .lab { width: auto; flex: 0 0 104px; white-space: nowrap; }
.seg3 { flex: 1; } .seg3 button { min-width: 0; padding: 0 4px; white-space: nowrap; font-size: 14px; }
@media (max-width: 360px) { .checkin-row .lab { flex-basis: 34px; } .checkin-row .lab .lt { display: none; } }
.checkin-said { align-items: center; gap: 12px; padding: 12px 14px; }
.checkin-said .cs-ic { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.checkin-said.green .cs-ic { background: linear-gradient(160deg, #4fdc8e, #1fa75a); } .checkin-said.amber .cs-ic { background: linear-gradient(160deg, #ffc65a, #f29a12); }
.checkin-said .cs-tx { display: grid; gap: 1px; } .checkin-said .cs-tx b { font-size: 15px; } .checkin-said .cs-tx small { font-size: 13px; line-height: 1.35; color: var(--text-2); }
/* (the open check-in's head a row, the title and Done at its end: the old card's first-child grid kept from it) */
.checkin.open > .checkin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkin.open > .checkin-head .checkin-done { margin-left: auto; }

/* ---- iOS, in motion: springs, blur, and what changes gliding to where it goes ---- */
/* (things arrive out of a soft blur, as iOS's do) */
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.98); filter: blur(8px); } }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
@keyframes row-in { from { opacity: 0; transform: translateX(-10px); filter: blur(4px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.92); filter: blur(6px); } }
@keyframes day-next { from { opacity: 0; transform: translateX(28px) scale(0.98); filter: blur(8px); } }
@keyframes day-prev { from { opacity: 0; transform: translateX(-28px) scale(0.98); filter: blur(8px); } }
/* (and settle with a spring, a hair past and back) */
.screen.in > *, .screen.in .cols > div > *, .day-in, dialog.sheet.fresh .sheet-body > *, .agenda.open-in .ag-row, dialog.sheet.fresh .stats .stat, .says .say { animation-timing-function: var(--ease-spring); animation-duration: 0.7s; }
/* (what's chosen glides there: the day's pill, the day's card, the check-in's answers) */
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: var(--ease-spring); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
::view-transition-old(day-card) { animation: vt-out 0.22s var(--ease-out) both; }
::view-transition-new(day-card) { animation: vt-in 0.42s var(--ease-out) both; }
::view-transition-old(sday-on), ::view-transition-new(sday-on) { animation-duration: 0.3s; }
@keyframes vt-out { to { opacity: 0; filter: blur(10px); transform: scale(0.98); } }
@keyframes vt-in { from { opacity: 0; filter: blur(10px); transform: scale(1.02); } }
/* (a press: in quickly, back with a spring) */
:is(.pill, .btn, button.row, a.row, button.card, .next-up, .tomorrow, .chip-btn, .sday, .strip-all, .strip-step, .mv-day, .ag-row, .seg3 button, .checkin-done, .round.me, .p-card, .go, .choice) {
  transition: transform 0.55s var(--ease-spring), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), opacity 0.25s; }
:is(.pill, .btn, .chip-btn, .sday, .strip-all, .strip-step, .mv-day, .seg3 button, .checkin-done, .round.me, .go):active { transform: scale(0.93); transition-duration: 0.12s; }
:is(button.row, a.row, button.card, .next-up, .tomorrow, .ag-row, .p-card, .choice):active { transform: scale(0.975); transition-duration: 0.12s; }
/* (the readiness ring: drawn round with a spring) */
:is(.screen.in, .day-in) .ready .arc { animation-timing-function: var(--ease-spring); animation-duration: 1.1s; }
@media (prefers-reduced-motion: reduce) {
  :is(.pill, .btn, .chip-btn, .sday, .strip-all, .strip-step, .mv-day, .seg3 button, .checkin-done, .round.me, .go, button.row, a.row, button.card, .next-up, .tomorrow, .ag-row, .p-card, .choice):active { transform: none; }
}
.more-wrap { display: flex; justify-content: center; margin: 4px 0 8px; }
/* (every screen's title as Today's: the line under it in small spaced capitals) */
.head h1 { line-height: 1; letter-spacing: -0.4px; }
.head .sub { margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
/* (a run of the same steps, said once: how many, and the step or two each time) */
.repeat > .rh .rh-len { margin-left: auto; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.pattern { display: grid; gap: 8px; padding: 10px 0; }
.step + .pattern, .pattern + .step { border-top: 0.5px solid var(--line); }
.pt-head { display: flex; align-items: baseline; justify-content: space-between; }
.pt-head b { font: 700 20px/1 var(--font-r); } .pt-head small { font-size: 13px; color: var(--text-3); }
.pt-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.pt-part { display: flex; gap: 10px; align-items: stretch; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.pt-part > i { width: 5px; flex: none; border-radius: 3px; }
.pt-part span { display: grid; gap: 2px; } .pt-part b { font-size: 15px; font-weight: 600; } .pt-part small { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* (Step by step: in phases, the times as a range, the watts large with their share of FTP, the zone a chip) */
.ss-phase { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 0 6px; }
.ss-phase:first-child { padding-top: 8px; }
.ss-phase b { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-2); }
.ss-phase small { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ss-phase + .ss-step { border-top: 0; }
.ss-step + .ss-phase { border-top: 0.5px solid var(--line); margin-top: 2px; }
.ss-step { grid-template-columns: 40px 6px minmax(0, 1fr) auto; }
.ss-when { display: grid; gap: 1px; }
.ss-end { font: 500 11px/1.3 var(--font); color: var(--text-3); font-variant-numeric: tabular-nums; opacity: 0.75; }
.ss-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.zchip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 6px; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--glass-ctl); }
.zchip i { width: 8px; height: 8px; border-radius: 50%; }
.ss-w { display: grid; justify-items: end; gap: 1px; text-align: right; }
.ss-w b { font: 700 16px/1.25 var(--font-r); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-w small { font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-pat .ss-tx b { font-size: 15px; }
/* (a Rhythm says note's own action: FTP) */
.say .tx .say-act { justify-self: start; margin-top: 6px; }
/* Apple Health: its tile, and the key and address to copy */
.ic.brand.health { background: linear-gradient(160deg, #ff5a6e, #ff2d55); }
.hk-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--field); }
.hk-key { flex: 1; min-width: 0; font: 500 13px/1.35 ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.section > .hk-box + .foot { margin-top: 8px; }

/* ---- Last night: HRV, resting heart rate and sleep, each against your usual, from your Apple Watch or Garmin ---- */
:root { --hrv: #ad97ff; --sleep: #8c9cff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --hrv: #6847e0; --sleep: #4258e0; } }
:root[data-theme="light"] { --hrv: #6847e0; --sleep: #4258e0; }
.morning-card { display: grid; gap: 10px; padding: 16px; }
.nc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nc-more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--tint-text); }
.nt-row { padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 0.18s var(--ease-out); }
.nt-row:active { transform: scale(0.985); }
.nt-row.flat .nt { padding-bottom: 10px; }
/* (the check-in, in the same card: under a hairline, without a card of its own) */
.mc-sep { height: 0.5px; margin: 4px -16px 2px; background: var(--line); }
.morning-card .mc-check { padding: 0; background: none; box-shadow: none; }
.morning-card .mc-check.open > .checkin-head b { font-size: 16px; }
.nc-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 9px; border-radius: 13px; font-size: 13px; font-weight: 650; }
.nc-chip.green, .nc-effect.green { color: var(--good-text); background: color-mix(in srgb, var(--good) 15%, transparent); }
.nc-chip.amber, .nc-effect.amber { color: var(--warn); background: color-mix(in srgb, #ffb547 16%, transparent); }
.nc-chip.blue, .nc-effect.blue { color: var(--tint-text); background: color-mix(in srgb, var(--tint) 14%, transparent); }
.nc-said { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.nt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nt { display: grid; align-content: start; gap: 1px; min-width: 0; padding: 10px 10px 8px; border-radius: 16px; background: var(--field); }
.nt small { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.nt.hrv small svg { color: var(--hrv); } .nt.rhr small svg { color: var(--hr); } .nt.sleep small svg { color: var(--sleep); }
.nt b { font: 700 21px/1.2 var(--font-d); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt b u { text-decoration: none; font-size: 12px; font-weight: 600; color: var(--text-2); }
.nt-sub { overflow: hidden; font-size: 11.5px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.nt.low .nt-sub { color: var(--warn); } .nt.ok .nt-sub { color: var(--good-text); }
.nspark { width: 100%; height: 30px; margin-top: 5px; overflow: visible; }
.nspark.hrv { color: var(--hrv); } .nspark.rhr { color: var(--hr); } .nspark.sleep { color: var(--sleep); }
.nspark .nband { fill: currentColor; opacity: 0.15; }
.nspark .nl { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nspark .nd { fill: currentColor; stroke: var(--glass-strong); stroke-width: 1.5; }
.nspark .nb { fill: currentColor; opacity: 0.8; } .nspark .nb.short { fill: var(--warn); opacity: 0.9; }
.nspark .ng { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
.nc-effect { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.checkin-q b .from-watch { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--sleep); }
/* (the two months: HRV and its usual range, resting heart rate, sleep against seven hours) */
.nights-chart .n-band { fill: var(--hrv); opacity: 0.14; }
.nights-chart .n-hrv, .nights-chart .n-rhr, .nights-chart .n-trend { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nights-chart .n-hrv { stroke: var(--hrv); stroke-width: 2.2; } .nights-chart .n-rhr { stroke: var(--hr); stroke-width: 2; }
.nights-chart .n-trend { stroke: var(--hrv); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.75; }
.nights-chart .n-dot { stroke: var(--glass-strong); stroke-width: 2; } .n-dot.hrv { fill: var(--hrv); } .n-dot.rhr { fill: var(--hr); }
.nights-chart .n-sl { fill: var(--sleep); opacity: 0.78; } .nights-chart .n-sl.short { fill: var(--warn); opacity: 0.9; }
.nights-chart .n-7 { stroke: var(--text-3); stroke-dasharray: 3 3; opacity: 0.5; }
.nights-chart .n-h { fill: var(--text-2); font-size: 12px; font-weight: 600; } .nights-chart .n-v { fill: var(--text); font-size: 12px; font-weight: 700; }
.p-nights { display: block; width: 100%; padding: 14px 16px 12px; border: 0; color: var(--text); font: inherit; cursor: pointer; transition: transform 0.18s var(--ease-out); }
.p-nights:active { transform: scale(0.985); }
.n-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.n-key span { display: inline-flex; align-items: center; gap: 6px; }
.n-key i { width: 14px; height: 8px; border-radius: 3px; } .n-key .k-band { background: color-mix(in srgb, var(--hrv) 22%, transparent); }
.n-key .k-trend { height: 0; border-top: 2px dashed var(--hrv); border-radius: 0; } .n-key .k-short { background: var(--warn); }
.n-rule .n-today { font-size: 12px; font-weight: 650; color: var(--warn); } .n-rule.on .ic.green ~ .n-today { color: var(--good-text); }
.n-rule:not(.on) .tx b { color: var(--text-2); }
/* (in motion: the tiles one after another, lines drawn, bars rising, the last night's dot popping in) */
:is(.screen.in, .day-in) .morning-card .nt { animation: pop-in 0.5s var(--ease-out) backwards; }
:is(.screen.in, .day-in) .morning-card .nt:nth-child(1) { animation-delay: 120ms; } :is(.screen.in, .day-in) .morning-card .nt:nth-child(2) { animation-delay: 190ms; }
:is(.screen.in, .day-in) .morning-card .nt:nth-child(3) { animation-delay: 260ms; }
:is(.screen.in, .day-in) .morning-card .nc-chip { animation: pop-in 0.45s var(--ease-spring, var(--ease-out)) 80ms backwards; }
:is(.screen.in, .day-in, dialog.sheet.fresh) :is(.nspark .nl, .nights-chart .n-hrv, .nights-chart .n-rhr) { stroke-dasharray: 1; animation: n-draw 1.2s var(--ease-out) 0.3s backwards; }
@keyframes n-draw { from { stroke-dashoffset: 1; } }
:is(.screen.in, .day-in, dialog.sheet.fresh) :is(.nspark .nband, .nights-chart .n-band, .nights-chart .n-trend) { animation: fade-up 0.9s var(--ease-out) 0.5s backwards; }
:is(.screen.in, .day-in, dialog.sheet.fresh) :is(.nspark .nbars, .nights-chart .n-bars) { transform-box: fill-box; transform-origin: 50% 100%; animation: n-rise 0.8s var(--ease-out) 0.3s backwards; }
@keyframes n-rise { from { transform: scaleY(0); } }
:is(.screen.in, .day-in, dialog.sheet.fresh) :is(.nspark .nd, .nights-chart .n-dot) { transform-box: fill-box; transform-origin: center; animation: n-pop 0.5s var(--ease-spring, var(--ease-out)) 1.2s backwards; }
@keyframes n-pop { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) {
  .morning-card .nt, .morning-card .nc-chip, .nspark *, .nights-chart * { animation: none !important; }
  .nt-row:active, .p-nights:active { transform: none; }
}
/* (Fitness and form, from Progress's Form tile: the band and the two tiles, above the chart) */
.form-now { display: grid; gap: 6px; }
dialog.sheet.fresh .fband .knob { animation: knob-in 0.8s var(--ease-out) 0.35s backwards; }
@media (prefers-reduced-motion: reduce) { dialog.sheet.fresh .fband .knob { animation: none; } }

/* ---- your history on Progress: this year against last, all-time bests, each year's peak; a year in review ---- */
.p-history { display: grid; gap: 10px; width: 100%; padding: 16px 16px 12px; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 0.18s var(--ease-out); }
.p-history:active { transform: scale(0.985); }
.ph-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ph-top small { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); }
.ph-top b { font: 700 30px/1.1 var(--font-d); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; } .ph-top b u { text-decoration: none; font-size: 15px; color: var(--text-2); }
.ph-vs { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.ph-vs.up { color: var(--good-text); background: color-mix(in srgb, var(--good) 15%, transparent); } .ph-vs.down { color: var(--warn); background: color-mix(in srgb, #ffb547 16%, transparent); }
.years-chart .y-prev { fill: none; stroke: var(--text-3); stroke-width: 1.8; stroke-dasharray: 4 4; opacity: 0.6; }
.years-chart .y-cur { fill: none; stroke: var(--tint); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.years-chart .y-area { fill: color-mix(in srgb, var(--tint) 14%, transparent); }
.years-chart .y-now { fill: var(--tint); stroke: var(--glass-strong); stroke-width: 2; } .years-chart .y-then { fill: var(--text-3); }
.n-key .k-cur { background: var(--tint); height: 3px; } .n-key .k-prev { height: 0; border-top: 2px dashed var(--text-3); border-radius: 0; }
.ph-more { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--tint-text); }
.ph-bests .row { min-height: 56px; }
.ph-len { flex: none; width: 52px; font: 700 14px/1 var(--font-d); color: var(--text-2); }
.ph-yr { font-size: 13px; color: var(--text-2); white-space: nowrap; } .ph-yr.best { color: var(--good-text); font-weight: 650; }
.ph-peaks { display: grid; gap: 10px; padding: 16px; }
.pk-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 30px 32px; align-items: center; gap: 10px; }
.pk-row small { font-size: 13px; font-weight: 600; color: var(--text-2); } .pk-row b { font: 700 15px/1 var(--font-d); text-align: right; font-variant-numeric: tabular-nums; }
.pk-row .pk-when { font-weight: 500; color: var(--text-3); }
.pk-bar { height: 10px; border-radius: 5px; background: var(--field); overflow: hidden; } .pk-bar i { display: block; height: 100%; border-radius: 5px; background: color-mix(in srgb, var(--fit) 55%, transparent); }
.pk-row.now .pk-bar i { background: var(--fit); } .pk-row.now small:first-child { color: var(--text); }
.month-bars .mb { fill: color-mix(in srgb, var(--tint) 45%, transparent); } .month-bars .mb.top { fill: var(--tint); }
:is(.screen.in, dialog.sheet.fresh) .years-chart .y-cur { stroke-dasharray: 1; animation: n-draw 1.3s var(--ease-out) 0.25s backwards; }
:is(.screen.in, dialog.sheet.fresh) :is(.years-chart .y-area, .years-chart .y-prev) { animation: fade-up 1s var(--ease-out) 0.4s backwards; }
:is(.screen.in, dialog.sheet.fresh) .years-chart .y-now { transform-box: fill-box; transform-origin: center; animation: n-pop 0.5s var(--ease-spring, var(--ease-out)) 1.3s backwards; }
.screen.in .pk-bar i { animation: bar-grow 0.9s var(--ease-out) 0.3s backwards; }
dialog.sheet.fresh .month-bars .mbars { transform-box: fill-box; transform-origin: 50% 100%; animation: n-rise 0.8s var(--ease-out) 0.3s backwards; }
@media (prefers-reduced-motion: reduce) { .years-chart *, .pk-bar i, .month-bars * { animation: none !important; } .p-history:active { transform: none; } }

/* ---- your week, on Sundays ---- */
.review-card { display: grid; gap: 12px; padding: 16px; }
.rv-row { display: flex; align-items: flex-start; gap: 12px; }
.rv-row .ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.rv-row .tx { display: grid; gap: 2px; min-width: 0; } .rv-row .tx b { font-size: 15px; font-weight: 600; } .rv-row .tx small { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.rv-next { display: grid; gap: 10px; margin: 4px -16px -16px; padding: 14px 16px 16px; border-top: 0.5px solid var(--line); background: color-mix(in srgb, var(--tint) 6%, transparent); border-radius: 0 0 var(--r-hero, 28px) var(--r-hero, 28px); }
.rv-next-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .rv-next-top b { font-size: 16px; } .rv-next-top small { font-size: 13px; color: var(--text-2); text-align: right; }
.rv-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .rv-days::-webkit-scrollbar { display: none; }
.rv-day { flex: none; display: grid; gap: 2px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--glass-strong); box-shadow: var(--edge); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 0.18s var(--ease-out); }
.rv-day:active { transform: scale(0.96); } .rv-day small { font-size: 12px; font-weight: 600; color: var(--text-2); } .rv-day b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.rv-why { font-size: 13px; line-height: 1.4; color: var(--text-2); }
:is(.screen.in, .day-in) .review-card .rv-row { animation: rise 0.5s var(--ease-out) backwards; }
:is(.screen.in, .day-in) .review-card .rv-row:nth-child(2) { animation-delay: 70ms; } :is(.screen.in, .day-in) .review-card .rv-row:nth-child(3) { animation-delay: 140ms; }
:is(.screen.in, .day-in) .review-card .rv-row:nth-child(4) { animation-delay: 210ms; } :is(.screen.in, .day-in) .review-card .rv-next { animation: rise 0.55s var(--ease-out) 280ms backwards; }
@media (prefers-reduced-motion: reduce) { .review-card .rv-row, .review-card .rv-next { animation: none !important; } .rv-day:active { transform: none; } }
/* (Rhythm's setup: riding towards an event, its kind, then its day and name) */
.ev-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.ev-ic.none { background: linear-gradient(160deg, #9aa3b8, #6b7389); } .ev-ic.sportive { background: linear-gradient(160deg, #4fdc8e, #1fa75a); }
.ev-ic.race { background: linear-gradient(160deg, #ff8a7a, #e8453a); } .ev-ic.tt { background: linear-gradient(160deg, #5aa9ff, #2a6ae6); }
.ev-when { display: grid; gap: 10px; margin-top: 14px; animation: rise 0.45s var(--ease-out); }
.ev-when input[type="date"] { min-height: 48px; }
@media (prefers-reduced-motion: reduce) { .ev-when { animation: none; } }
.ph-vs:not(.up):not(.down) { color: var(--tint-text); background: color-mix(in srgb, var(--tint) 13%, transparent); }

/* ---- a picture to share: drawn, then shown, then shared ---- */
.share-frame { display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: 16px; border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, #1b1840, #0b0d20); box-shadow: var(--edge), 0 18px 50px rgba(0, 0, 0, 0.25); }
.share-img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(0.97); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-spring, var(--ease-out)); }
.share-img.in { opacity: 1; transform: none; }
.share-frame:has(.share-img:not(.in))::after { content: ""; width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: spin 0.8s linear infinite; grid-area: 1 / 1; }
.share-frame .share-img { grid-area: 1 / 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.share-said { text-align: center; margin-top: 10px; }
.btn svg { vertical-align: -3px; margin-right: 8px; }
.act-links { display: flex; gap: 18px; align-items: center; } .act-links .link svg { vertical-align: -2px; margin-right: 4px; }
.share-year { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .share-img { transition: none; } .share-frame::after { animation: none; } }

/* ---- signed out: the morning, and a course across it (app.js welcome, courseScene) ---- */
.welcome.dawn { position: relative; isolation: isolate; }
.welcome.dawn > :not(.course) { position: relative; z-index: 1; }
.welcome .course { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 48svh; z-index: 0; pointer-events: none; }
:root { --c-far: rgba(255, 150, 120, 0.16); --c-mid: rgba(190, 140, 255, 0.16); --c-near: rgba(110, 150, 255, 0.18); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --c-far: rgba(255, 140, 100, 0.16); --c-mid: rgba(180, 130, 240, 0.15); --c-near: rgba(90, 130, 240, 0.14); } }
:root[data-theme="light"] { --c-far: rgba(255, 140, 100, 0.16); --c-mid: rgba(180, 130, 240, 0.15); --c-near: rgba(90, 130, 240, 0.14); }
.course .c-far { fill: var(--c-far); } .course .c-mid { fill: var(--c-mid); } .course .c-near { fill: var(--c-near); }
.course .c-route { fill: none; stroke: url(#c-route); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; filter: drop-shadow(0 0 6px rgba(255, 170, 110, 0.45)); }
.course .c-dot { fill: #fff; } .course .c-halo { transform-box: fill-box; transform-origin: center; animation: c-beat 1.6s ease-in-out infinite; }
@keyframes c-beat { 0%, 100% { transform: scale(0.85); opacity: 0.7; } 14% { transform: scale(1.15); opacity: 1; } 28% { transform: scale(0.95); } 42% { transform: scale(1.08); } }
/* (in, in turn: the hills rising out of the haze, the route drawn along the ridge, then the rider) */
.welcome.dawn .course :is(.c-far, .c-mid, .c-near) { animation: c-rise 1.6s var(--ease-out) backwards; }
.welcome.dawn .course .c-mid { animation-delay: 0.12s; } .welcome.dawn .course .c-near { animation-delay: 0.24s; }
@keyframes c-rise { from { opacity: 0; transform: translateY(40px); } }
.welcome.dawn .course .c-route { animation: c-draw 2.4s var(--ease-out) 0.6s backwards; }
@keyframes c-draw { from { stroke-dashoffset: 1; } }
.welcome.dawn .course .c-rider { animation: fade-up 0.8s ease 2.4s backwards; }
/* the mark, out of the haze in a warm glow; the name a letter at a time; the line; then Sign in */
.welcome .wlogo { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin-bottom: -18px; }
.welcome .wlogo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 140, 90, 0.38), rgba(255, 120, 150, 0.12) 55%, rgba(255, 120, 150, 0)); animation: fade-up 2s ease 0.5s backwards; }
.welcome .wlogo .mark { position: relative; margin: 0; animation: w-logo 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s backwards; }
@keyframes w-logo { from { opacity: 0; filter: blur(14px); transform: scale(0.86); } 80% { filter: blur(0); } }
.welcome .wtitle { margin: 0; display: block; text-align: center; font: 750 40px/1.05 var(--font-d); letter-spacing: -0.4px; }
.welcome .wtitle span { display: inline-block; animation: w-letter 0.9s var(--ease-out) backwards; }
.welcome .wtitle span:nth-child(1) { animation-delay: 0.55s; } .welcome .wtitle span:nth-child(2) { animation-delay: 0.61s; } .welcome .wtitle span:nth-child(3) { animation-delay: 0.67s; }
.welcome .wtitle span:nth-child(4) { animation-delay: 0.73s; } .welcome .wtitle span:nth-child(5) { animation-delay: 0.79s; } .welcome .wtitle span:nth-child(6) { animation-delay: 0.85s; }
.welcome .wtitle span:nth-child(7) { animation-delay: 0.91s; }
@keyframes w-letter { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
.welcome.dawn .tagline { animation: fade-up 1.2s ease 1.3s backwards; }
.welcome.dawn .w-cta { animation: w-cta 0.9s var(--ease-out) 1.8s backwards; }
@keyframes w-cta { from { opacity: 0; transform: translateY(10px); } }
/* Sign in: warm, and pulsing as a heart does (two beats, a rest) */
.welcome .btn.wbeat { background: linear-gradient(135deg, #ff8a5b, #ff5e7e 55%, #c86bff); color: #fff; box-shadow: 0 10px 28px -10px rgba(255, 94, 126, 0.7); animation: w-beat 2.4s ease-in-out 2.6s infinite; }
@keyframes w-beat { 0%, 40%, 100% { box-shadow: 0 10px 28px -10px rgba(255, 94, 126, 0.7); } 8% { box-shadow: 0 10px 34px -6px rgba(255, 94, 126, 0.95), 0 0 0 4px rgba(255, 130, 140, 0.25); } 18% { box-shadow: 0 10px 28px -10px rgba(255, 94, 126, 0.7); } 26% { box-shadow: 0 10px 34px -8px rgba(255, 94, 126, 0.85), 0 0 0 3px rgba(255, 130, 140, 0.18); } }
.welcome .btn.wbeat:disabled { animation: none; }
/* (shown again, signed out: no slow start) */
.welcome.again :is(.wlogo .mark, .wlogo::before, .wtitle span, .tagline, .course *) { animation-delay: 0s !important; animation-duration: 0.5s; }
.welcome.again .w-cta { animation: fade-up 0.5s ease; }
.welcome.again .course .c-halo { animation: c-beat 1.6s ease-in-out infinite; }

/* ---- signing in and out, in motion (app.js handOff, arriving, dusk): the account page's sky, exactly ---- */
:root { --acct-sky: #f3f0fb; --acct-sky-a: #e9eefc; --acct-sky-c: #f7f8fc;
  --acct-heaven: radial-gradient(120% 80% at 50% -10%, var(--acct-sky-a), var(--acct-sky) 52%, var(--acct-sky-c));
  --dawn: radial-gradient(120% 50% at 50% 112%, rgba(255, 190, 150, 0.55), rgba(255, 160, 200, 0.22) 45%, transparent 72%), radial-gradient(110% 60% at 50% -12%, rgba(160, 200, 255, 0.22), transparent 62%); }
@media (prefers-color-scheme: dark) { :root { --acct-sky: #0a0f26; --acct-sky-a: #121a3c; --acct-sky-c: #05060e; } }
.handoff { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.handoff .hsky { position: absolute; inset: 0; background: var(--acct-heaven); opacity: 0; }
html.arriving body::after, .arrival .arv-sky { background: var(--dawn), var(--acct-heaven); }
html.arriving body::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; animation: arv-gone 0.4s ease 12s forwards; }
html.arriving.arv-face body::before, .arrival .arv-me { position: fixed; left: 50%; top: 30%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; }
html.arriving.arv-face body::before { content: var(--arv-i, ""); z-index: 101; pointer-events: none; display: grid; place-items: center; color: #fff; font: 600 32px/1 var(--font);
  background: var(--arv-p, none) center / cover no-repeat, linear-gradient(160deg, #ff8a5b, #ff5e7e 60%, #c86bff); box-shadow: 0 12px 30px -12px rgba(150, 50, 90, 0.5); animation: arv-gone 0.4s ease 12s forwards; }
.arrival { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.arrival .arv-sky { position: absolute; inset: 0; }
.arrival .arv-me { display: grid; place-items: center; overflow: hidden; z-index: 1; color: #fff; font: 600 32px/1 var(--font); background: linear-gradient(160deg, #ff8a5b, #ff5e7e 60%, #c86bff); box-shadow: 0 12px 30px -12px rgba(150, 50, 90, 0.5); }
.arrival .arv-me img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dusk { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.dusk-sky { position: absolute; inset: 0; opacity: 0; background: radial-gradient(120% 80% at 50% -10%, var(--sky-a), var(--sky-b) 52%, var(--sky-c)) var(--sky-top); }
@media (prefers-reduced-motion: reduce) {
  .welcome .course *, .welcome .wlogo .mark, .welcome .wlogo::before, .welcome .wtitle span, .welcome.dawn .tagline, .welcome.dawn .w-cta, .welcome .btn.wbeat { animation: none !important; }
  html.arriving body::after, html.arriving.arv-face body::before { animation: arv-gone 0.2s ease 12s forwards !important; }
}
@keyframes arv-gone { to { opacity: 0; } }

/* ---- Strava: its own orange, for its button, its tile and the link back to it (as its brand guidelines have them) ---- */
.ic.brand.strava, .ic.strava { background: linear-gradient(160deg, #ff7a3d, #fc5200); }
.btn.strava { background: #fc5200; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 26px -12px #fc5200; }
.link.strava { color: #fc5200; font-weight: 600; text-decoration: none; }
.foot.powered { margin: 4px 0 0; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; color: var(--text-3); }

/* ---- the first-use welcome: the sheet as the whole screen, over the sky (as signing in has it), its steps sliding ---- */
dialog.sheet.full { inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; border-radius: 0; box-shadow: none;
  background: radial-gradient(70vmax 70vmax at 0% -10%, color-mix(in srgb, var(--aura-1) 70%, transparent), transparent 70%),
    radial-gradient(60vmax 60vmax at 110% 40%, color-mix(in srgb, var(--aura-2) 60%, transparent), transparent 70%),
    radial-gradient(120% 80% at 50% -10%, var(--sky-a), var(--sky-b) 52%, var(--sky-c)) var(--sky-top);
  -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: var(--top); }
dialog.sheet.full::backdrop { background: var(--sky-c); }
dialog.sheet.full .grab, dialog.sheet.full .sheet-head h2 { visibility: hidden; }
dialog.sheet.full .sheet-body { width: 100%; max-width: 560px; margin: 0 auto; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
dialog.sheet.full .sheet-body .group, dialog.sheet.full .sheet-body .card { background: var(--glass); box-shadow: var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
body:has(dialog.sheet.full[open]) .page, body:has(dialog.sheet.full[open]) .tabbar { visibility: hidden; }
@keyframes onb-in { from { opacity: 0; transform: translateY(18px); } }
dialog.sheet.full[open] { animation: onb-in 0.6s var(--ease-out); }
.onb-hero { display: grid; gap: 16px; padding: 12px 4px 0; }
.onb-logo { width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; color: #fff; background: var(--s-ride); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.4), 0 14px 30px -14px #ee4b2f; }
.onb-title { margin: 0; font: 700 34px/1.08 var(--font-d); letter-spacing: -0.3px; text-wrap: balance; }
.onb-course { display: block; width: calc(100% + 32px); height: 120px; margin: 0 -16px; overflow: visible; }
.onb-course .road { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: 0.6; }
.onb-course .ridden { fill: none; stroke: #ff7a4f; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 30 700; animation: onb-ride 5s var(--ease-glide) 0.3s infinite alternate; filter: drop-shadow(0 4px 10px rgba(255, 122, 79, 0.5)); }
@keyframes onb-ride { to { stroke-dasharray: 360 700; } }
.onb-points { list-style: none; margin: 0; padding: 0 4px; display: grid; gap: 14px; }
.onb-points li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; }
.onb-points .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.onb-points .tx { display: grid; gap: 1px; } .onb-points b { font-size: 16px; font-weight: 600; } .onb-points small { font-size: 14px; color: var(--text-2); line-height: 1.35; }
.onb-choices { display: grid; gap: 10px; }
.onb-choice { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 14px 16px; border: 0; border-radius: 22px; text-align: left; color: inherit;
  background: var(--glass); box-shadow: var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: transform var(--dur-release) var(--ease-spring); }
.onb-choice:active { transform: scale(0.98); transition-duration: var(--dur-press); }
.onb-choice .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.onb-choice .tx { display: grid; gap: 2px; } .onb-choice b { font-size: 16px; font-weight: 600; } .onb-choice small { font-size: 13px; color: var(--text-2); line-height: 1.35; }
.onb-choice .chev { color: var(--text-3); }
.onb-choice.best { box-shadow: inset 0 0 0 1.5px #fc5200, 0 12px 28px -20px #fc5200; }
.onb-tag { display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; vertical-align: 2px; color: #fff; background: #fc5200; }
.onb-small { text-align: center; }
.onb-coming { display: inline-flex; align-items: center; gap: 9px; justify-self: start; padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--text-2); background: var(--glass); box-shadow: var(--edge); }
.onb-coming i { width: 8px; height: 8px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 25%, transparent); animation: onb-pulse 1.6s ease-in-out infinite; }
@keyframes onb-pulse { 50% { opacity: 0.35; } }
.onb-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onb-goal { display: grid; gap: 8px; align-content: start; padding: 14px; border: 0; border-radius: 22px; text-align: left; color: inherit; background: var(--glass); box-shadow: var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: transform var(--dur-release) var(--ease-spring), box-shadow var(--dur-fast); }
.onb-goal:active { transform: scale(0.97); transition-duration: var(--dur-press); }
.onb-goal.on { box-shadow: inset 0 0 0 2px var(--tint), var(--edge); }
.onb-goal .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.onb-goal b { font-size: 15px; font-weight: 600; } .onb-goal small { font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.onb-event { display: grid; gap: 10px; padding: 14px; margin: 0; }
.onb-kinds { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 999px; background: var(--glass-ctl); }
.onb-kinds button { min-height: 34px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font-size: 14px; font-weight: 600; }
.onb-kinds button.on { background: var(--glass-strong); color: var(--text); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.35); }
.onb-note { display: grid; gap: 4px; padding: 14px 16px; margin: 0; } .onb-note b { font-size: 15px; } .onb-note small { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.onb-switch { flex: none; position: relative; width: 51px; height: 31px; border: 0; border-radius: 16px; background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); transition: background-color var(--dur-fast); }
.onb-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); transition: translate 0.35s var(--ease-spring); }
.onb-switch.on { background: var(--good); } .onb-switch.on::after { translate: 20px 0; }
.onb-time { width: auto; min-width: 110px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .onb-course .ridden, .onb-coming i, dialog.sheet.full[open] { animation: none; } }
/* (a route, drawn here, and its map a tap away: OpenFreeMap sees where a map's shown, so only when asked for) */
.map { position: relative; }
.map-show { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--edge), 0 6px 16px -8px rgba(0, 0, 0, 0.4); }
.map-show svg { margin-right: -2px; }
.done-map.drawn { display: grid; place-items: center; background: color-mix(in srgb, var(--text) 4%, transparent); }
.done-map.drawn > * { width: 100%; height: 100%; }

/* ---- on a computer ----
   From 760px the tab bar is a sidebar down the left, icons only; from 1100px it has its names and shortcuts, and each
   screen is laid out across the width: Today's two weeks as a grid over the day and what decides it, Activities' list
   beside the one that's open, Progress on a twelve-column grid. A phone has none of this. */
.side-only, .tab kbd { display: none; }
.side-brand { align-items: center; gap: 10px; padding: 4px 8px 16px; font: 700 18px/1 var(--font-d); }
.side-brand img { flex: none; border-radius: 8px; }
.side-me { align-items: center; gap: 10px; margin-top: auto; padding: 8px; border: 0; border-radius: 16px; background: none; color: var(--text); text-align: left; }
.side-me .round.me { width: 36px; height: 36px; font-size: 15px; box-shadow: none; }
.side-me .tl { display: grid; gap: 1px; min-width: 0; } .side-me b { font-size: 14px; font-weight: 600; } .side-me small { font-size: 12px; color: var(--text-3); }
@media (min-width: 760px) {
  .tabbar { top: 0; right: auto; width: 100px; padding: 14px 0 14px 14px; justify-content: stretch; }
  .tabbar::before { display: none; }
  body.sheet-up .tabbar { transform: none; opacity: 1; }
  .tabs { flex-direction: column; gap: 4px; max-width: none; height: 100%; padding: 14px 10px; border-radius: 26px; }
  .tabs::before { display: none; }
  .tabs:has(.tab:active) { transform: none; }
  .side-only { display: flex; }
  .side-brand { justify-content: center; padding: 4px 0 14px; } .side-brand .tl { display: none; }
  .tab { flex: none; flex-direction: row; justify-content: center; gap: 12px; padding: 11px 12px; border-radius: 14px; font-size: 15px; }
  .tab .tl { display: none; }
  .tab[aria-current="page"] { background: var(--glass-ctl); }
  .side-me { justify-content: center; padding: 6px 0; } .side-me .tl { display: none; }
  .page { margin-left: 100px; }
  /* (the sidebar has you and Upload: the screens' tops don't, here) */
  .head .round.me, .head .round.up { display: none; }
}
@media (min-width: 760px) and (hover: hover) { .tab:hover:not([aria-current="page"]), .side-me:hover { background: var(--press); } }
@media (min-width: 1100px) {
  .tabbar { width: 252px; }
  .side-brand { justify-content: flex-start; padding: 4px 10px 18px; } .side-brand .tl { display: inline; }
  .tab { justify-content: flex-start; padding: 10px 12px; }
  .tab .tl { display: inline; flex: 1; text-align: left; }
  .tab kbd { display: inline-block; font: 600 11px/1 var(--font); color: var(--text-3); padding: 3px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
  .side-me { justify-content: flex-start; padding: 8px; } .side-me .tl { display: grid; }
  .page { margin-left: 252px; }
  main { max-width: 1560px; padding-left: 32px; padding-right: 32px; }

  /* Today: the two weeks across the top, the day under them, and a 360px column beside it */
  .t-today .cols { grid-template-columns: minmax(0, 1fr) 360px; }
  .wgrid { display: grid; gap: 14px; padding: 14px 16px 16px; margin-bottom: 18px; border-radius: var(--r-group); }
  .wg-week h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
  .wg-week .aside { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-2); }
  .wg-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .gday { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; min-height: 92px; padding: 10px 11px; border: 0; border-radius: 16px; background: var(--glass-ctl);
    color: var(--text); text-align: left; font: inherit; transition: transform var(--dur-release) var(--ease-spring), background-color var(--dur-fast), box-shadow var(--dur-fast); }
  .gday small { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
  .gday b { font-size: 14px; font-weight: 650; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gday em { font-style: normal; font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gday .mini { display: block; margin-top: auto; padding-top: 4px; height: 24px; } .gday .mini svg { display: block; width: 100%; height: 20px; }
  .gday .g-ok { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--good); }
  .gday.rest b { color: var(--text-2); font-weight: 600; }
  .gday.past:not(.on) { opacity: 0.72; }
  .gday.missed em { color: var(--warn, #d9822b); }
  .gday.today small { color: var(--tint-text); }
  .gday.did { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--good) 55%, transparent); }
  .gday.on { background: color-mix(in srgb, var(--tint) 12%, var(--glass-ctl)); box-shadow: inset 0 0 0 2px var(--tint); }
  .gday:active { transform: scale(0.97); transition-duration: var(--dur-press); }
  .gday[draggable="true"] { cursor: grab; }
  .gday.dragging { opacity: 0.4; }
  .gday.drop-on { background: color-mix(in srgb, var(--tint) 16%, transparent); outline: 2px dashed var(--tint); outline-offset: -2px; }

  /* Activities: four totals, then the list beside the one that's open (which scrolls by itself) */
  .a-tots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
  .a-tot { margin: 0; padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
  .a-tot > small:first-child { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
  .a-tot b { font: 700 28px/1.1 var(--font-r, var(--font-d)); letter-spacing: -0.02em; } .a-tot b u { text-decoration: none; margin-left: 3px; font-size: 14px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
  .a-vs { font-size: 12.5px; font-weight: 600; color: var(--good); } .a-vs.dn { color: var(--text-3); }
  .a-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: start; }
  .a-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
  .a-find { flex: 1; min-width: 0; min-height: 40px; border-radius: 999px; font-size: 15px; background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); }
  .a-find:focus { outline: 2px solid var(--tint); outline-offset: 1px; }
  .a-list .row.on { background: color-mix(in srgb, var(--tint) 14%, transparent); box-shadow: inset 3px 0 0 var(--tint); }
  .a-pane { position: sticky; top: 16px; max-height: calc(100svh - 32px); overflow: auto; overscroll-behavior: contain; border-radius: var(--r-group); padding: 18px; }
  .a-pane-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .a-pane .card, .a-pane .group { margin: 0; background: var(--cell); box-shadow: inset 0 0 0 0.5px var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .a-pane .section { margin: 0; }
  .a-pane .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .a-pane .map { border-radius: 18px; overflow: hidden; }

  /* Progress: twelve columns; fitness two-thirds and its four tiles beside it, then pairs, then the year in full */
  .t-progress { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 0 20px; align-items: start; }
  .t-progress > * { grid-column: 1 / -1; min-width: 0; }
  .t-progress > .head { grid-column: 1 / span 8; }
  .t-progress > .p-range { grid-column: 9 / -1; align-self: center; margin-bottom: 18px; }
  .t-progress > .p-hero { grid-column: 1 / span 8; margin-bottom: 20px; }
  .t-progress > .p-tiles { grid-column: 9 / -1; gap: 14px; margin-bottom: 20px; }
  .t-progress > .p-half { grid-column: span 6; }
  .p-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* (the tiles as tall as fitness beside them; what stands out as cards side by side, not a row to scroll) */
  .t-progress > .p-tiles { align-self: stretch; grid-auto-rows: 1fr; }
  .t-progress .p-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .t-progress .p-card { width: auto; }
}
/* the right-click menu on an activity */
.ctx-menu { position: fixed; z-index: 80; min-width: 200px; padding: 6px; display: grid; border-radius: 14px; background: var(--sheen), var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--edge), var(--lift); }
.ctx-menu button, .ctx-menu a { display: block; padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: var(--text); font-size: 14px; text-align: left; text-decoration: none; }
.ctx-menu button:hover, .ctx-menu a:hover, .ctx-menu button:focus-visible, .ctx-menu a:focus-visible { background: var(--tint); color: var(--on-tint); outline: none; }
.ctx-menu hr { margin: 4px 6px; border: 0; height: 1px; background: var(--line); }
.ctx-menu .del { color: var(--danger); }
@media (prefers-reduced-transparency: reduce) { .ctx-menu { -webkit-backdrop-filter: none; backdrop-filter: none; } }