/* LiftReady typeface (rollout 16, R16-13): Inter, self-hosted. No request ever leaves for Google Fonts. One family, two files (SIL Open Font License 1.1, see /fonts/Inter-OFL.txt): inter-latin-opsz-normal.woff2 Latin, variable weight 100–900 AND optical size 14–32. Browsers pick the optical size from the font size (font-optical-sizing: auto), so big titles and numbers get Inter Display's tighter shapes and body text the text cut — no second family. inter-latin-ext-wght-normal.woff2 Latin Extended (names with ą, ő, ş…), variable weight only. The files never change under the same name (cached for a year, firebase.json /fonts/**): a new version gets a new file name. The app's stylesheet (app.css) starts with this file (tools/build.mjs); the website pages link it. */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/inter-latin-opsz-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================= Aurek — design system, rollout 18: "Calm Coach" (the whole app) + "Athletic Precision" (a layout and type mode for training screens). ONE token set for both. DESIGN.md is the guide. Light is the base (no attribute); dark comes from prefers-color-scheme or :root[data-theme='dark']. Accent via :root[data-accent=…] (gold is the brand default). The Inter @font-face rules come first in app.css (public/fonts/fonts.css, self-hosted — tools/build.mjs). Calm Coach: warm sand / ivory surfaces (warm charcoal in dark), ink text, soft rounded cards with a gentle shadow, pill buttons, one gold primary per area. Athletic Precision (.mode-precision on a screen): the same tokens, denser (smaller radius step, 8–12 px gaps), bolder (700), big tabular numbers, small-caps data labels. Tokens (old names stay — every feature stylesheet uses them; new ones marked *): surfaces --bg = --canvas (page) · --card (cards, sheets) · --card2 (inset fill on a card) · --surface-3 (pressed / stronger inset) · --fill / --fill-2 (translucent warm neutral fills that work on any surface: secondary buttons, inputs, steppers, icon tiles) · --bar (tab bar) · --tile* (Precision tiles = --card) lines --hairline (card edges) · --line (dividers) · --line-2 (chip outlines) · --track (empty bars/rings) · --grid (chart lines) ink --ink (primary) · --sub (secondary) · --faint (tertiary, still >= 4.5:1 on every surface) accent --accent (fills) · --accent-ink (accent text/icons) · --on-accent (text on accent fills) · --accent-soft* (the soft gold surface: "Why?" pills, the active tab pill, total rows, icon tiles of the day's hero) · --accent-hi / --accent-lo (legacy, = --accent) · --focus selection --sel / --on-sel (selected chips: ink fill, surface-colored text) semantic --good / --warn / --bad / --info (fills, icons; good = C's sage, warn = clay) · --good-ink / … (text) · --good-soft* / --warn-soft* / --bad-soft* / --info-soft* (tinted surfaces) type --display = --body = Inter. Scale: --t-large 30 · --t-title 22 · --t-headline 17 · --t-body 16 · --t-callout 15 · --t-footnote 13 · --t-caption 12 (old: --t-xs … --t-3xl). Numbers*: --t-num-sm 28 · --t-num-md 44 (Calm hero: readiness, kcal) · --t-num-lg 64 · --t-num-xl 84 (Precision: the working weight) — always tabular, tight tracking. space 4/8 grid: --sp-1 4 · --sp-2 8 · --sp-3 12 · --sp-4 16 · --sp-5 20 · --sp-6 24 · --sp-8 32 · --gutter (page side padding 18, 20 from 400 px) · --card-pad 20 · --tile-pad* 16 · --col radius ONE scale: --r-xs* 8 · --r-sm 12 · --r-ctl 16 (inputs, small controls) · --r-md 20 (banners, inner boxes, Precision tiles = --r-tile*) · --r-lg 26 (cards, groups) · --r-xl 32 (sheets) · --r-pill elevation --shadow-1 (cards: soft warm shadow in light, a 1 px inner highlight in dark) · --shadow-2 (raised: round header buttons, the selected segment) · --shadow-3 (sheets, toasts) · --hl / --glow (kept, transparent) controls* --btn-h 54 · --btn-h-sm 44 · --tap 44 (minimum target) motion --dur-1 120ms · --dur-2 180ms · --dur-3 240ms · --dur-sheet* 300ms · --ease-out · --ease-spring (all 0 with reduced motion) ========================================================================= */ :root { --bg: #f4eee6; --card: #fffcf8; --card2: #f4ede4; --surface-3: #ebe2d6; --ink: #2a241f; --sub: #675d54; --faint: #6c6157; --accent: #eaa50c; --accent-ink: #7a5005; --on-accent: #2b1c04; --accent-soft: color-mix(in srgb, var(--accent) 17%, var(--card)); --good: #4d6e49; --warn: #b35a14; --bad: #c8382c; --info: #2f63c7; --good-ink: #44633f; --warn-ink: #8f4510; --bad-ink: #a92a20; --info-ink: #2453ad; --good-soft: #e3eadb; --warn-soft: #f7e3d6; --bad-soft: #f8dfda; --info-soft: #e1e9f6; --on-good: #ffffff; --on-bad: #ffffff; --line: #ece3d8; --line-2: #ddd1c3; --track: #ece3d7; --grid: #ece3d8; --hairline: rgba(80, 55, 30, 0.06); --fill: rgba(90, 62, 30, 0.075); --fill-2: rgba(90, 62, 30, 0.13); --bar: #fffcf8; --tile: var(--card); --tile-2: var(--card2); --canvas: var(--bg); --accent-hi: var(--accent); --accent-lo: var(--accent); --sel: var(--ink); --on-sel: #fffcf8; --focus: color-mix(in srgb, var(--accent) 70%, var(--ink)); --scrim: rgba(42, 30, 18, 0.34); --grabber: rgba(42, 36, 31, 0.18); --shadow-1: 0 1px 2px rgba(80, 55, 30, 0.06), 0 8px 24px rgba(80, 55, 30, 0.06); --shadow-2: 0 1px 2px rgba(80, 55, 30, 0.08), 0 6px 18px rgba(80, 55, 30, 0.09); --shadow-3: 0 -2px 40px rgba(42, 30, 18, 0.16), 0 2px 8px rgba(42, 30, 18, 0.05); --hl: transparent; --glow: transparent; --seg-on: var(--card); --seg-shadow: var(--shadow-2); /* aliases */ --shadow: var(--shadow-1); /* type */ --body: 'Inter', -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif; --display: var(--body); --display-stretch: 100%; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --t-caption: 0.75rem; --t-footnote: 0.8125rem; --t-callout: 0.9375rem; --t-body: 1rem; --t-headline: 1.0625rem; --t-title: 1.375rem; --t-large: 1.875rem; --t-num-sm: 1.75rem; --t-num-md: 2.75rem; --t-num-lg: 4rem; --t-num-xl: 5.25rem; --t-xs: 0.75rem; --t-sm: 0.8125rem; --t-md: 0.9375rem; --t-base: 1rem; --t-lg: 1.0625rem; --t-xl: 1.25rem; --t-2xl: 1.5rem; --t-3xl: 1.875rem; /* space */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --gutter: 18px; --card-pad: 20px; --tile-pad: 16px; --col: 560px; /* radius: one scale for both modes */ --r-xs: 8px; --r-sm: 12px; --r-ctl: 16px; --r-md: 20px; --r-lg: 26px; --r-xl: 32px; --r-pill: 999px; --r-tile: var(--r-md); /* controls */ --btn-h: 54px; --btn-h-sm: 44px; --tap: 44px; /* motion */ --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-sheet: 300ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); --tabh: 56px; /* The tab bar sits closer to the iPhone home indicator than other footers (labels may overlap its clear zone; the buttons stay above it) so the bar takes ~72px instead of ~96px. */ --tab-pb: max(0px, calc(var(--safe-b) - 16px)); /* Bottom inset the footer bars and sheets pad by. --shim-pad / --gap-out come from initViewport() (ui.tsx): they correct iOS home-screen apps whose viewport stops short of the physical bottom edge. */ --safe-b: max(0px, calc(max(env(safe-area-inset-bottom, 0px), var(--shim-pad, 0px)) - var(--gap-out, 0px))); } @media (min-width: 400px) { :root { --gutter: 20px; } } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #151311; --card: #211e1b; --card2: #2b2723; --surface-3: #34302b; --ink: #f4eee6; --sub: #bcb1a5; --faint: #a69b8f; --accent: #f7b928; --accent-ink: #f6c25a; --on-accent: #2b1c04; --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--card)); --good: #a3c19c; --warn: #f0a07a; --bad: #ff7b6b; --info: #8fb3f0; --good-ink: #afcca8; --warn-ink: #f3ae8c; --bad-ink: #ff8d7f; --info-ink: #a5c2f4; --good-soft: #26302a; --warn-soft: #3a2820; --bad-soft: #3d221e; --info-soft: #1f2836; --on-good: #16210f; --on-bad: #2a0b07; --line: #34302b; --line-2: #46403a; --track: #38322c; --grid: #2e2a26; --hairline: rgba(255, 240, 220, 0.05); --fill: rgba(255, 240, 220, 0.07); --fill-2: rgba(255, 240, 220, 0.12); --bar: #211e1b; --on-sel: #151311; --focus: var(--accent); --scrim: rgba(0, 0, 0, 0.58); --grabber: rgba(244, 238, 230, 0.22); --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.03); --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 14px rgba(0, 0, 0, 0.25); --shadow-3: 0 -2px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); --seg-on: #3a3530; --seg-shadow: none; } } :root[data-theme='dark'] { color-scheme: dark; --bg: #151311; --card: #211e1b; --card2: #2b2723; --surface-3: #34302b; --ink: #f4eee6; --sub: #bcb1a5; --faint: #a69b8f; --accent: #f7b928; --accent-ink: #f6c25a; --on-accent: #2b1c04; --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--card)); --good: #a3c19c; --warn: #f0a07a; --bad: #ff7b6b; --info: #8fb3f0; --good-ink: #afcca8; --warn-ink: #f3ae8c; --bad-ink: #ff8d7f; --info-ink: #a5c2f4; --good-soft: #26302a; --warn-soft: #3a2820; --bad-soft: #3d221e; --info-soft: #1f2836; --on-good: #16210f; --on-bad: #2a0b07; --line: #34302b; --line-2: #46403a; --track: #38322c; --grid: #2e2a26; --hairline: rgba(255, 240, 220, 0.05); --fill: rgba(255, 240, 220, 0.07); --fill-2: rgba(255, 240, 220, 0.12); --bar: #211e1b; --on-sel: #151311; --focus: var(--accent); --scrim: rgba(0, 0, 0, 0.58); --grabber: rgba(244, 238, 230, 0.22); --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.03); --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 14px rgba(0, 0, 0, 0.25); --shadow-3: 0 -2px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); --seg-on: #3a3530; --seg-shadow: none; } :root[data-theme='light'] { color-scheme: light; } /* ---------- accents (light) — text contrast >= 4.5:1: accent-ink on --card2, on-accent on --accent ---------- */ :root[data-accent='blue'] { --accent: #2563eb; --accent-ink: #1d4ed8; --on-accent: #ffffff; } :root[data-accent='green'] { --accent: #15803d; --accent-ink: #166534; --on-accent: #ffffff; } :root[data-accent='red'] { --accent: #e11d48; --accent-ink: #be123c; --on-accent: #ffffff; } :root[data-accent='purple'] { --accent: #7c3aed; --accent-ink: #6d28d9; --on-accent: #ffffff; } :root[data-accent='orange'] { --accent: #f26a1b; --accent-ink: #b93c0a; --on-accent: #1f0a00; } :root[data-accent='teal'] { --accent: #0f766e; --accent-ink: #115e59; --on-accent: #ffffff; } :root[data-accent='pink'] { --accent: #db2777; --accent-ink: #be185d; --on-accent: #ffffff; } /* ---------- accents (dark) ---------- */ @media (prefers-color-scheme: dark) { :root[data-accent='blue']:not([data-theme='light']) { --accent: #5b8cff; --accent-ink: #86a9ff; --on-accent: #0b0c0f; } :root[data-accent='green']:not([data-theme='light']) { --accent: #34d27a; --accent-ink: #4ade80; --on-accent: #04210f; } :root[data-accent='red']:not([data-theme='light']) { --accent: #ff5c73; --accent-ink: #ff8394; --on-accent: #1f0208; } :root[data-accent='purple']:not([data-theme='light']) { --accent: #a78bfa; --accent-ink: #bba5ff; --on-accent: #130a2a; } :root[data-accent='orange']:not([data-theme='light']) { --accent: #fb8c3c; --accent-ink: #fd9f5c; --on-accent: #1f0a00; } :root[data-accent='teal']:not([data-theme='light']) { --accent: #2dd4bf; --accent-ink: #2dd4bf; --on-accent: #022420; } :root[data-accent='pink']:not([data-theme='light']) { --accent: #f472b6; --accent-ink: #f78bc3; --on-accent: #2a0717; } } :root[data-theme='dark'][data-accent='blue'] { --accent: #5b8cff; --accent-ink: #86a9ff; --on-accent: #0b0c0f; } :root[data-theme='dark'][data-accent='green'] { --accent: #34d27a; --accent-ink: #4ade80; --on-accent: #04210f; } :root[data-theme='dark'][data-accent='red'] { --accent: #ff5c73; --accent-ink: #ff8394; --on-accent: #1f0208; } :root[data-theme='dark'][data-accent='purple'] { --accent: #a78bfa; --accent-ink: #bba5ff; --on-accent: #130a2a; } :root[data-theme='dark'][data-accent='orange'] { --accent: #fb8c3c; --accent-ink: #fd9f5c; --on-accent: #1f0a00; } :root[data-theme='dark'][data-accent='teal'] { --accent: #2dd4bf; --accent-ink: #2dd4bf; --on-accent: #022420; } :root[data-theme='dark'][data-accent='pink'] { --accent: #f472b6; --accent-ink: #f78bc3; --on-accent: #2a0717; } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* The document never scrolls (no whole-page rubber-band on iPhone); only .scroller does. The html background is the "canvas" color iOS paints anywhere the app doesn't reach — including a strip under the viewport that some iOS versions leave at the bottom of home-screen apps. It always matches the footer (tab bar = --bar, sheet = --card, onboarding bar / plain pages = --bg), so that strip reads as part of the bar. */ html { --foot-bg: var(--bg); background: var(--foot-bg); } html:has(.tabbar) { --foot-bg: var(--bar); } html:has(.sheet-backdrop) { --foot-bg: var(--card); } html, body { height: 100%; overflow: hidden; overscroll-behavior: none; } body { background: transparent; } /* iPhone app (html.native, see initViewport): no home-screen strip exists there, and the keyboard plugin tints the area behind the keyboard from the body color — so body carries the same color as html. No long-press link/image menus (they offer "Open" inside a preview, which is not how an app behaves). */ html.native body { background: var(--foot-bg); } html.native a, html.native img { -webkit-touch-callout: none; } body { margin: 0; color: var(--ink); font-family: var(--body); font-size: var(--t-body); line-height: 1.4; letter-spacing: -0.011em; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-wrap: break-word; } #root { height: 100%; } img, svg { max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; } /* No double-tap zoom on fast repeated taps (steppers, checklists). */ button, a, label, input, select, textarea, summary, [role='button'] { touch-action: manipulation; } p, h1, h2, h3, ul, ol, figure { margin: 0; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); } /* Links inside text: ink, weight 600, a quiet underline (never gold or browser blue). Class-less anchors only, so buttons / rows rendered as keep their own look. */ :where(a:not([class])) { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); } :where(a:not([class])):active { opacity: 0.6; } /* ---------- app shell ---------- .shell fixed, full screen, column: [top bar] [main] [footer: tab bar / onboarding bar] .shell-main the only flexible row; holds the scroller .scroller the one scroll container (overscroll contained so the chrome never moves) */ /* Full screen: top/left/right 0 and the bottom pushed past the layout viewport by --shim-b when iOS reports a viewport shorter than what it actually shows (initViewport). min-height 100dvh covers the same bug where the dynamic viewport is taller than the layout one. Neither applies while the keyboard is up. */ .shell { position: fixed; top: 0; left: 0; right: 0; bottom: calc(0px - var(--shim-b, 0px)); min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } html.kb-open .shell, html.kb-open .sheet-backdrop { bottom: 0; min-height: 0; } .shell-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* No -webkit-overflow-scrolling: touch (rollout 20): every iOS the app supports scrolls smoothly without it, and with it WebKit could leave a just-switched tab unpainted (black) until you scrolled. */ .scroller { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-padding-top: 12px; scroll-padding-bottom: 24px; } .shell:not(:has(.tabbar, .onboard-bar)) .scroller { padding-bottom: var(--safe-b); } /* An open sheet locks the page behind it. */ body:has(.sheet-backdrop) .scroller { overflow: hidden; } /* ---------- page frame ---------- */ .page { position: relative; max-width: var(--col); margin: 0 auto; padding-inline: var(--gutter); padding-block: 12px 32px; min-height: 100%; } .page.with-tabs { padding-bottom: 32px; } .page-center { display: flex; flex-direction: column; justify-content: center; } /* Screen change (Shell adds .enter-*): a short fade + nudge; `top`/`left` (not transform) so fixed bars inside the page (rest timer) keep their place while it runs. Rollout 20: the fade starts at 40 %, not 0 — a busy phone that holds the first frame (or skips the animation) never shows a black page. */ .page.enter-tab { animation: page-in-tab var(--dur-3) var(--ease-out); } .page.enter-push { animation: page-in-push var(--dur-3) var(--ease-out); } .page.enter-pop { animation: page-in-pop var(--dur-3) var(--ease-out); } @keyframes page-in-tab { from { opacity: 0.4; top: 6px; } } @keyframes page-in-push { from { opacity: 0.4; left: 16px; } } @keyframes page-in-pop { from { opacity: 0.4; left: -16px; } } .stack { display: flex; flex-direction: column; gap: 14px; } .stack-sm { display: flex; flex-direction: column; gap: 8px; } .stack-xs { display: flex; flex-direction: column; gap: 4px; } .row { display: flex; align-items: center; } .grow { flex: 1; min-width: 0; } .grow2 { flex: 2; } .center { text-align: center; } .block { display: block; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* A titled group of content (C: "This week · 0 of 4 done"). Sections sit ~28 px apart (stack gap + margin); the title (17 w600 ink, sentence case) is 10 px above its content; `right` is one quiet value or tertiary link. */ .section { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; padding-inline: 6px; } .section-head .label { font-size: var(--t-headline); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; } .section-head > .small, .section-head > span:not(.label) { color: var(--sub); font-size: var(--t-callout); } .section-head .linkbtn { min-height: 44px; margin-block: -8px; } /* ---------- type ---------- Inter only. Big titles and numbers get Inter's display optical size automatically (font-optical-sizing). .display large title 30/35 w650 −0.03em (one per screen: the screen title) .h2 title 22/27 w650 (card heroes, sheet titles) .h3 headline 17/22 w600 (card titles, row titles that matter) .sub callout 15/21 w400 --sub (one-line supporting text) .small footnote 13/18 w400 --sub (meta lines, notes, disclaimers) .label section/field label, sentence case 13/18 w600 --sub .overline tiny caps 12/16 w600 --sub, tracked (max one per card; Precision data labels) .num-xl / .num-lg / .num-md / .num-sm big tabular numbers (84 / 64 / 44 / 28), w700 in Precision, w650 in Calm */ .display, .h2, .h3, .score, .bigtime, .restnum, .sheet h2 { font-family: var(--display); } .display { font-weight: 650; font-size: var(--t-large); line-height: 1.17; letter-spacing: -0.03em; text-wrap: balance; } .h2 { font-weight: 650; font-size: var(--t-title); line-height: 1.23; letter-spacing: -0.022em; } .h3 { font-weight: 600; font-size: var(--t-headline); line-height: 1.3; letter-spacing: -0.015em; } .unit { font-family: var(--body); font-size: 0.32em; font-weight: 600; letter-spacing: 0.02em; color: var(--sub); margin-left: 0.18em; } .label { font-size: var(--t-footnote); font-weight: 600; color: var(--sub); line-height: 1.38; letter-spacing: -0.003em; } .overline { font-size: var(--t-caption); font-weight: 600; color: var(--sub); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.33; } .sub { color: var(--sub); font-size: var(--t-callout); line-height: 1.4; } .small, .footnote { color: var(--sub); font-size: var(--t-footnote); line-height: 1.38; letter-spacing: -0.003em; } /* Numbers line up in columns and don't jitter as they tick. */ .num, .score, .bigtime, .restnum { font-variant-numeric: tabular-nums lining-nums; } .nowrap { white-space: nowrap; } .muted { color: var(--sub); } .accent-ink { color: var(--accent-ink); } .good-ink { color: var(--good-ink); } .danger-ink { color: var(--bad-ink); } .info-ink { color: var(--info-ink); } .warn-text { color: var(--warn-ink); font-size: var(--t-footnote); font-weight: 600; } .lr-title { font-weight: 500; } /* Empty state: icon tile, one line (optional title + action). */ .empty { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--sub); text-align: center; padding: 20px 12px; font-size: var(--t-callout); line-height: 1.4; text-wrap: balance; } .empty-title { color: var(--ink); font-weight: 600; font-size: var(--t-headline); } .empty-loading { display: flex; flex-direction: column; gap: 10px; } .empty-loading .skel:nth-child(2) { opacity: 0.6; } .empty-ico { width: 52px; height: 52px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--sub); } /* ---------- cards ---------- One surface level: ivory (light) / warm charcoal (dark), soft warm shadow, 26 px radius, 20 px padding. No card inside a card — inner groups are rows separated by hairlines (.listrow / .divider) or a --fill inset (.inset). */ .card { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--card-pad); box-shadow: var(--shadow-1); text-align: left; width: 100%; } .card.tight { padding: 14px 16px; gap: 6px; border-radius: var(--r-md); } /* A card's own title row: title (h3) left, one quiet value or link right (C: "Daily checklist · 1 of 6"). */ .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; } .card-head > .h3, .card-head > h2, .card-head > h3 { font-size: var(--t-headline); font-weight: 600; letter-spacing: -0.015em; min-width: 0; } .card-head > .sub, .card-head > .small { flex: none; } /* An inset box inside a card (C's load box, B's total row): --fill, no border. */ .inset { background: var(--fill); border-radius: var(--r-md); padding: 14px 16px; } button.card { border: 1px solid var(--hairline); font: inherit; color: inherit; } .tappable { transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) ease, border-color var(--dur-2) ease; } .tappable:active { transform: scale(0.985); } button.card.tappable:active { background: color-mix(in srgb, var(--ink) 3%, var(--card)); } @media (hover: hover) { button.card.tappable:hover { border-color: var(--line-2); } } /* Tones: accent = no tint (gold is for the hero only); bad = a quiet red tint (health and safety alerts); info = a quiet blue tint (notices). */ .card-accent { border-color: var(--hairline); } .card-bad { border-color: color-mix(in srgb, var(--bad) 26%, transparent); background: color-mix(in srgb, var(--bad) 6%, var(--card)); } .card-info { border-color: color-mix(in srgb, var(--info) 20%, transparent); background: color-mix(in srgb, var(--info) 5%, var(--card)); } /* ---------- buttons ---------- Pills (C · Calm Coach), in both modes. primary solid gold pill, 54 px (one per screen area) secondary soft neutral pill (--fill), ink text ghost = tertiary: text button in ink, weight 600 (no underline) danger destructive: soft neutral pill, red text (a confirm sheet's "Delete") .btn-sm 44 px · .btn-block full width · busy = spinner (Btn busy) · disabled 40 % */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 6px 22px; border-radius: var(--r-pill); border: 1px solid transparent; font-weight: 600; font-size: var(--t-body); letter-spacing: -0.012em; line-height: 1.2; text-decoration: none; text-align: center; user-select: none; -webkit-user-select: none; transition: transform var(--dur-1) var(--ease-out), filter var(--dur-2) ease, background-color var(--dur-2) ease, border-color var(--dur-2) ease, opacity var(--dur-2) ease; } .btn-block { font-size: var(--t-headline); } .btn:active { transform: scale(0.975); } .btn:disabled { opacity: 0.4; cursor: default; transform: none; } .btn[aria-busy='true'] { opacity: 1; } .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn-primary:active { filter: brightness(0.94); } .btn-secondary { background: var(--fill); color: var(--ink); } .btn-secondary:active { background: var(--fill-2); } .btn-ghost, .btn-tertiary { background: transparent; color: var(--ink); } .btn-ghost:active, .btn-tertiary:active { background: var(--fill); } .btn-danger { background: var(--fill); color: var(--bad-ink); } .btn-danger:active { background: color-mix(in srgb, var(--bad) 14%, transparent); } @media (hover: hover) { .btn-primary:hover:not(:disabled) { filter: brightness(1.04); } .btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled), .btn-danger:hover:not(:disabled) { background: var(--fill-2); } } .btn-sm { min-height: var(--btn-h-sm); font-size: var(--t-callout); padding: 4px 16px; gap: 6px; } .btn-block { width: 100%; } .btn-sm.btn-block { font-size: var(--t-callout); } /* Icon button: 44 px round, no fill, ink icon. In the screen header and the sheet head it gets a surface (.screen-head: a card-colored circle with a soft shadow; sheets: a --fill circle) — see below. */ .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); flex: none; text-decoration: none; transition: background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out); } .iconbtn.round, .iconbtn.filled { background: var(--fill); } .iconbtn.raised { background: var(--card); box-shadow: var(--shadow-2); } .iconbtn:active { background: var(--fill); transform: scale(0.94); } @media (hover: hover) { .iconbtn:hover:not(:disabled) { background: var(--fill); } } .iconbtn:disabled { opacity: 0.3; } /* The one icon-only ⓘ (ui.tsx InfoDot, rollout 20 — was the train "pinfo", the Settings "set-i" and daily WhyLinks): 44 px, quiet text color; negative margins so it sits in a title row without making the row taller. */ .iconbtn.info-dot { color: var(--sub); margin: -10px -8px -10px -4px; align-self: center; } .iconbtn.info-dot:hover, .iconbtn.info-dot:focus-visible { color: var(--ink); } /* Text link button: ink, weight 600 (navigating ones end in a chevron). */ .linkbtn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--ink); font-weight: 600; font-size: var(--t-callout); padding: 8px 2px; min-height: 44px; min-width: 44px; letter-spacing: -0.01em; } .linkbtn:active { opacity: 0.55; } .linkbtn svg { flex: none; } .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.75s linear infinite; flex: none; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- chips / inputs ---------- */ /* Chips: soft neutral pills (C); selected = ink fill (ivory text; light fill / dark text in dark mode). */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid transparent; background: var(--fill); color: var(--ink); font-size: var(--t-callout); font-weight: 500; text-align: left; overflow-wrap: anywhere; transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-1) var(--ease-out); } .chip.on { background: var(--sel); color: var(--on-sel); border-color: var(--sel); font-weight: 600; } .chip:active { transform: scale(0.96); } @media (hover: hover) { .chip:hover:not(.on) { background: var(--fill-2); } } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field > .label { padding-inline: 2px; } .field-wrap { position: relative; display: flex; } .field-wrap input { padding-right: 52px; } .field-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--sub); } .field-eye:active { background: var(--fill); } .field-err { color: var(--bad-ink); font-weight: 600; } .field-bad input, .field-bad textarea { border-color: var(--bad); } .field-bad input:focus, .field-bad textarea:focus { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 16%, transparent); } input, textarea, select { width: 100%; font-size: 1rem; background: var(--fill); border: 1px solid transparent; border-radius: var(--r-ctl); padding: 12px 16px; min-height: 52px; transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, background-color var(--dur-2) ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-edge, var(--accent)); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; } textarea { resize: vertical; line-height: 1.45; } input[type='time'], input[type='date'] { -webkit-appearance: none; appearance: none; } input.mini { width: 62px; min-height: 44px; padding: 6px; text-align: center; font-variant-numeric: tabular-nums; } input.mini.time { width: 124px; } .stepper { display: inline-flex; align-items: center; gap: 10px; } .stepper button { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fill); color: var(--ink); font-size: 1.375rem; font-weight: 400; line-height: 1; transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) ease; } .stepper button:active { background: var(--fill-2); transform: scale(0.92); } .stepper .num { min-width: 58px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em; white-space: nowrap; } .stepper .num small { font-family: var(--body); font-size: 0.8125rem; font-weight: 500; color: var(--sub); letter-spacing: 0; } /* Two steppers side by side (grid2 / pairs) must fit a 375 px phone. */ .grid2 > * { min-width: 0; } .grid2 .stepper { gap: 4px; } .grid2 .stepper .num { min-width: 36px; flex: 1; } .scale { display: flex; flex-direction: column; gap: 6px; } .scale-row { display: flex; gap: 6px; } .scale-row button { flex: 1; min-height: 48px; border-radius: var(--r-pill); border: 1px solid transparent; background: var(--fill); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 0; transition: background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out); } .scale-row button:active { transform: scale(0.95); } .scale-row button.on { background: var(--sel); color: var(--on-sel); border-color: var(--sel); } .toggle { display: flex; align-items: center; gap: 12px; min-height: 52px; } .toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch { width: 51px; height: 31px; border-radius: 99px; background: var(--fill-2); position: relative; flex: none; transition: background-color var(--dur-2) ease; } .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.2); transition: transform var(--dur-2) var(--ease-out); } .toggle input:checked + .switch { background: var(--accent); } .toggle input:checked + .switch::after { transform: translateX(20px); } .toggle input:focus-visible + .switch { outline: 2px solid var(--focus); outline-offset: 2px; } input.sw { width: 24px; height: 24px; min-height: 0; accent-color: var(--accent); flex: none; } .remrow { gap: 10px; min-height: 52px; } /* A field with its button on the same line: bottoms line up with the input, not the label. */ .inline-form { display: flex; align-items: flex-end; gap: 8px; } .inline-form > .btn { flex: none; min-width: 72px; } /* ---------- data bits ---------- */ .ring { position: relative; flex: none; } .ring svg { display: block; overflow: visible; } .ring-arc { transition: stroke-dashoffset 0.6s var(--ease-out); } .ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* Big metrics: Inter 700, tabular, tight; units ~45 % in --sub (Strava / Rise stat style). */ .score { font-weight: 650; font-size: 2rem; line-height: 1; letter-spacing: -0.04em; } .score.big { font-size: var(--t-num-md); } .bigtime { font-weight: 700; font-size: 2.125rem; line-height: 1.1; letter-spacing: -0.035em; white-space: nowrap; } .ampm { font-family: var(--body); font-size: 0.9375rem; font-weight: 500; margin-left: 3px; color: var(--sub); letter-spacing: 0; } /* Stat block (): value + unit + label. .stat-lg for a screen's hero number. */ .stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .stat-v { font-family: var(--display); font-weight: 650; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--ink); } .stat-u { font-family: var(--body); font-size: 0.45em; font-weight: 500; letter-spacing: -0.005em; color: var(--sub); margin-left: 3px; } .stat-l { font-size: var(--t-footnote); color: var(--sub); line-height: 1.35; } .stat-lg .stat-v { font-size: 2.75rem; letter-spacing: -0.035em; } .stat-sm .stat-v { font-size: 1.25rem; letter-spacing: -0.02em; } .stat-sm .stat-u { font-size: 0.65em; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 12px 16px; } .bar { background: var(--track); border-radius: 99px; overflow: hidden; width: 100%; } .bar > div { height: 100%; border-radius: 99px; transition: width 0.5s var(--ease-out); } .why { background: var(--fill); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .why ul { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--sub); font-size: var(--t-footnote); } .why li::marker { color: var(--faint); } /* Badges (Pill): small, sentence case, neutral unless the state needs a color. */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: var(--t-caption); font-weight: 600; letter-spacing: 0; white-space: nowrap; line-height: 1.34; } .pill-accent { background: var(--fill); color: var(--ink); } .pill-good { background: var(--good-soft); color: var(--good-ink); } .pill-warn { background: var(--warn-soft); color: var(--warn-ink); } .pill-bad { background: var(--bad-soft); color: var(--bad-ink); } .pill-info { background: var(--info-soft); color: var(--info-ink); } .pill-gold { background: var(--accent-soft); color: var(--accent-ink); } .pill-muted { background: var(--fill); color: var(--sub); } /* List rows: 56 px, optional leading icon tile, title + one line, value / chevron on the right. Inside a .card or a .group they divide with hairlines. */ .listrow { display: flex; align-items: center; gap: 14px; padding: 10px 0; min-height: 56px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); text-align: left; font-size: var(--t-body); } .listrow:last-child { border-bottom: 0; } button.listrow:active, a.listrow:active { background: color-mix(in srgb, var(--ink) 4%, transparent); } .listrow > svg:first-child { flex: none; color: var(--sub); } .lr-title { overflow-wrap: anywhere; } .lr-value { color: var(--sub); font-size: var(--t-callout); flex: none; max-width: 45%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lr-chev { color: var(--faint); flex: none; } /* Icon tile (lists only): 36 px soft rounded square (C). Neutral by default; t- for a solid tile with a white glyph (settings-style lists only); t-accent = the soft gold tile. */ .lr-ico { width: 36px; height: 36px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--fill); color: var(--ink); } .lr-ico.t-accent { background: var(--accent-soft); color: var(--accent-ink); } /* Calm Coach: tinted soft tiles (a 15 % wash of the hue on the card) with the hue's ink glyph — never a loud block. */ .lr-ico.t-blue { background: var(--info-soft); color: var(--info-ink); } .lr-ico.t-green { background: var(--good-soft); color: var(--good-ink); } .lr-ico.t-orange { background: var(--warn-soft); color: var(--warn-ink); } .lr-ico.t-red { background: var(--bad-soft); color: var(--bad-ink); } .lr-ico.t-purple { background: color-mix(in srgb, #8457e8 15%, var(--card)); color: color-mix(in srgb, #8457e8 75%, var(--ink)); } .lr-ico.t-teal { background: color-mix(in srgb, #12a3a0 15%, var(--card)); color: color-mix(in srgb, #12a3a0 70%, var(--ink)); } .lr-ico.t-gray { background: var(--fill); color: var(--sub); } /* Grouped list (iOS settings style): one card, rows inside, separators inset past the icon. */ .group { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; } .group > .listrow, .group > * > .listrow { padding: 10px 18px; border-bottom: 0; position: relative; } .group > .listrow + .listrow::before, .group > * + * > .listrow::before { content: ''; position: absolute; top: 0; right: 18px; left: 18px; height: 1px; background: var(--line); } .group > .listrow.has-ico + .listrow::before { left: 68px; } .group-head { padding: 0 18px 6px; } .group-foot { padding: 6px 18px 0; } .check { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; background: none; border: 0; color: var(--ink); text-align: left; padding: 6px 0; } .check-box { width: 26px; height: 26px; border-radius: 50%; border: 1.75px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out); } .check:active .check-box { transform: scale(0.9); } .check.done .check-box { background: var(--good); border-color: var(--good); color: var(--on-good); } .check.done .lr-title { color: var(--sub); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--sub) 60%, transparent); } .chart { width: 100%; height: auto; display: block; overflow: visible; } .chart text { font-family: var(--body); font-size: 0.875rem; font-variant-numeric: tabular-nums; } .steps { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--sub); } .resources { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-callout); user-select: text; } .thumbs { display: flex; gap: 8px; flex-wrap: wrap; } .thumbs button { padding: 0; border: 0; background: none; } .thumbs img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; display: block; } .thumbs.big img { width: 104px; height: 138px; } .thumbs figure { display: flex; flex-direction: column; gap: 2px; } /* Loading placeholder: a block with a moving sheen (Skeleton in ui.tsx). */ .skel { display: block; border-radius: var(--r-sm); background: var(--fill); background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--ink) 5%, transparent) 50%, transparent 80%); background-size: 220% 100%; background-repeat: no-repeat; animation: skel 1.4s ease-in-out infinite; } .skel.card { background-color: var(--card); border: 1px solid var(--hairline); } @keyframes skel { from { background-position: 160% 0; } to { background-position: -60% 0; } } /* Banner / notice (): icon, one line (+ optional action). Neutral by default; tone tints it quietly (tone="gold" = C's "Weights +2% for high readiness · Undo"). */ .banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 56px; border-radius: var(--r-md); background: var(--fill); color: var(--ink); font-size: var(--t-callout); line-height: 1.4; text-align: left; width: 100%; border: 0; } .banner > svg:first-child { flex: none; color: var(--sub); } .banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .banner-title { font-weight: 600; } .banner .linkbtn, .banner .btn { flex: none; } button.banner:active { background: var(--fill-2); } .banner-info { background: var(--info-soft); } .banner-info > svg:first-child { color: var(--info-ink); } .banner-warn { background: var(--warn-soft); } .banner-warn > svg:first-child { color: var(--warn-ink); } .banner-bad { background: var(--bad-soft); } .banner-bad > svg:first-child, .banner-bad .banner-title { color: var(--bad-ink); } .banner-good { background: var(--good-soft); } .banner-good > svg:first-child { color: var(--good-ink); } .banner-gold { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } .banner-gold > svg:first-child, .banner-gold .linkbtn { color: var(--accent-ink); } /* Disclosure (): "Learn more" text that stays out of the way until asked for. */ .disclosure > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; font-size: var(--t-callout); color: var(--ink); cursor: pointer; } .disclosure > summary::-webkit-details-marker { display: none; } .disclosure > summary svg { transition: transform var(--dur-2) var(--ease-out); color: var(--sub); } .disclosure[open] > summary svg { transform: rotate(90deg); } .disclosure-body { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; color: var(--sub); font-size: var(--t-callout); line-height: 1.45; } /* Inline tip row (): a quiet one-liner with a bulb, inside the flow (never floats over content). */ .tip { display: flex; align-items: flex-start; gap: 10px; color: var(--sub); font-size: var(--t-footnote); line-height: 1.4; } .tip > svg { flex: none; margin-top: 1px; color: var(--faint); } /* ---------- screen header ---------- (C): a top row — optional brand mark + the date (15 w500 --sub) on the left, round raised icon buttons on the right — then the large title under it. */ header.screen-head { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding-top: 2px; padding-bottom: 2px; } .screen-head-top { display: flex; align-items: center; gap: 10px; min-height: 48px; } .screen-head-top > .label, .screen-head-top > .overline { flex: 1; min-width: 0; margin: 0; font-size: var(--t-callout); font-weight: 500; color: var(--sub); letter-spacing: -0.01em; text-transform: none; } .screen-head-top > .mark { flex: none; } .screen-head .display { overflow-wrap: anywhere; } .screen-head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; } .screen-head-actions .iconbtn { background: var(--card); box-shadow: var(--shadow-2); } .screen-head-actions .iconbtn:active { background: var(--card2); } @media (hover: hover) { .screen-head-actions .iconbtn:hover:not(:disabled) { background: var(--card2); } } .screen-head .overline, .screen-head .label { margin-bottom: 0; } /* ---------- today (the shared parts; the Today screen's own layout is in styles/home.css) ---------- */ .readiness { flex-direction: row !important; align-items: center; gap: 18px !important; } .home-readiness { position: relative; } .rings { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 16px; } .ringcell { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; min-width: 0; min-height: 44px; color: var(--ink); transition: transform var(--dur-1) var(--ease-out); } .ringcell:active { transform: scale(0.94); } .ringcell .small { font-weight: 500; } .nudges { display: flex; flex-direction: column; gap: 8px; } .nudge { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--card); color: var(--ink); font-weight: 500; text-align: left; box-shadow: var(--shadow-1); } .nudge svg:first-child { color: var(--sub); flex: none; } .nudge svg:last-child { color: var(--faint); flex: none; } .nudge.lvl2 { background: color-mix(in srgb, var(--warn) 8%, var(--card)); color: var(--warn-ink); } .nudge.lvl2 svg:first-child { color: var(--warn-ink); } .nudge.lvl3 { background: color-mix(in srgb, var(--bad) 9%, var(--card)); border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad-ink); font-weight: 600; } .nudge.lvl3 svg:first-child { color: var(--bad-ink); } /* ---------- train ---------- */ .setrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); } .setrow.done .sub { color: var(--good-ink); } .setno { width: 18px; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; } .setcheck { width: 44px; height: 44px; border-radius: 50%; border: 1.75px solid var(--line-2); background: transparent; color: var(--sub); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out); } .setcheck:active { transform: scale(0.9); } .setrow.done .setcheck { background: var(--good); border-color: var(--good); color: var(--on-good); } .swap { border-top: 1px solid var(--line); padding-top: 10px; } .altrow { display: flex; align-items: center; gap: 8px; text-align: left; min-height: 56px; padding: 10px 14px; border-radius: var(--r-md); border: 0; background: var(--fill); color: var(--ink); } .restbar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabh) + var(--tab-pb) + 10px); max-width: 536px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-radius: var(--r-md); background: color-mix(in srgb, var(--ink) 95%, transparent); color: var(--bg); z-index: 30; box-shadow: var(--shadow-3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: rise var(--dur-3) var(--ease-out); } .restbar button { background: none; border: 0; color: var(--bg); font-weight: 700; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: var(--r-pill); } .restbar button:active { background: color-mix(in srgb, var(--bg) 14%, transparent); } .restbar .accent-ink { color: var(--accent); } .restnum { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.035em; } .small.inv { color: var(--bg); opacity: 0.78; } .fooditem { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); } .evtime { width: 128px; flex: none; } .testrow { min-height: 44px; gap: 10px; } .imp { width: 56px; text-align: right; } /* ---------- segmented control / squad / progress ---------- */ .seg { display: flex; background: var(--fill); border: 0; border-radius: var(--r-pill); padding: 4px; gap: 4px; } .seg button { flex: 1; min-height: 44px; border: 0; border-radius: var(--r-pill); background: none; color: var(--sub); font-weight: 500; font-size: var(--t-callout); transition: background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease; } .seg button:active:not(.on) { color: var(--ink); } .seg button.on { background: var(--seg-on); color: var(--ink); font-weight: 600; box-shadow: var(--seg-shadow); } .rank { width: 28px; height: 28px; border-radius: 50%; background: var(--fill); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem; flex: none; font-variant-numeric: tabular-nums; } .compare { display: flex; flex-direction: column; gap: 4px; } /* ---------- chrome ---------- */ .topbar { flex: none; z-index: 20; background: var(--bg); border-bottom: 1px solid transparent; } .backbtn { display: flex; align-items: center; gap: 2px; max-width: var(--col); margin: 0 auto; width: 100%; min-height: 52px; padding: 0 10px; border: 0; background: none; font-weight: 500; font-size: var(--t-headline); color: var(--ink); letter-spacing: -0.015em; } .backbtn svg { margin-right: 2px; } .backbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .backbtn:active { opacity: 0.55; } /* Tab bar (C): the card surface, a hairline on top, 24 px line icons, 12 px labels. Inactive = --faint; active = ink label (w600) and the icon in a soft gold pill (--accent-soft, --accent-ink glyph). The same bar in both modes. The footers' backgrounds keep going below their box (the offset box-shadow), so if iOS draws anything under the shell it is the bar's color, never a strip of page background. */ .tabbar { flex: none; position: relative; z-index: 25; display: flex; justify-content: center; background: var(--bar); border-top: 1px solid var(--line); padding-bottom: var(--tab-pb); box-shadow: 0 60px 0 60px var(--bar); } .tabbar button { position: relative; flex: 1; max-width: 112px; height: var(--tabh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; color: var(--faint); font-size: var(--t-caption); font-weight: 500; letter-spacing: 0; transition: color var(--dur-2) ease; } .tabbar button svg { position: relative; z-index: 1; transition: transform var(--dur-2) var(--ease-out); } .tabbar button:active svg { transform: scale(0.88); } .tabbar button.on { color: var(--ink); font-weight: 600; } .tabbar button.on svg { color: var(--accent-ink); } .tabbar button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 54px; height: 30px; margin: -26px 0 0 -27px; border-radius: 15px; background: var(--accent-soft); opacity: 0; transform: scale(0.7); transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease; } .tabbar button.on::before { opacity: 1; transform: scale(1); } .tabbar button:focus-visible { outline-offset: -4px; border-radius: 14px; } .onboard { display: flex; flex-direction: column; gap: 16px; } .onboard-bar { flex: none; z-index: 25; display: flex; flex-direction: column; gap: 8px; padding: 10px var(--gutter) calc(10px + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--hairline); box-shadow: 0 60px 0 60px var(--bg); } .onboard-bar > * { width: 100%; max-width: 528px; margin-inline: auto; } /* While typing on a phone the keyboard covers the bottom of the screen: hide the fixed bottom chrome instead of letting iOS push it around mid-screen. It comes back as soon as the keyboard closes. */ html.kb-open .tabbar, html.kb-open .onboard-bar, html.kb-open .restbar { display: none; } /* ---------- sheets ---------- */ .sheet-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: calc(0px - var(--shim-b, 0px)); min-height: 100dvh; z-index: 50; background: var(--scrim); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: var(--kb, 0px); overscroll-behavior: contain; animation: fade var(--dur-2) ease; } .sheet { position: relative; width: 100%; max-width: var(--col); max-height: min(100%, calc(var(--vvh, 100dvh) - env(safe-area-inset-top, 0px) - 12px)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; flex: none; background: var(--card); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 26px 22px calc(18px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; animation: sheet-up var(--dur-sheet) var(--ease-out); box-shadow: 0 80px 0 0 var(--card), var(--shadow-3); } /* Grabber: says "this slides up from the bottom" (and drags it down: useDragToClose). */ .sheet::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 99px; background: var(--grabber); z-index: 3; pointer-events: none; } .sheet.dragging { animation: none; transition: none; } .sheet.drag-release { transition: transform var(--dur-2) var(--ease-out); } .sheet .sheet-head .iconbtn, .sheet .is-x, .sheet .iconbtn[aria-label="Close"] { background: var(--fill); } .sheet > * { flex-shrink: 0; } html.kb-open .sheet { padding-bottom: 14px; } /* Long sheets: title/close stay on top, main actions stay reachable at the bottom. */ .sheet-head { position: sticky; top: -26px; z-index: 2; margin: -26px -22px 0; padding: 26px 22px 8px; background: var(--card); } .sheet-foot { position: sticky; bottom: calc(-18px - var(--safe-b)); z-index: 2; display: flex; gap: 10px; margin: 0 -22px calc(-18px - var(--safe-b)); padding: 12px 22px calc(18px + var(--safe-b)); background: var(--card); border-top: 1px solid var(--line); } html.kb-open .sheet-foot { bottom: -14px; margin-bottom: -14px; padding-bottom: 14px; } .sheet h2 { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; overflow-wrap: anywhere; } /* Confirm sheet (role=alertdialog): title, one paragraph, Cancel + the action side by side. */ .confirm-sheet { gap: 10px; padding-top: 28px; } .confirm-sheet .row { margin-top: 10px; } @keyframes sheet-up { from { transform: translateY(100%); } } @keyframes rise { from { transform: translateY(10px); opacity: 0; } } @keyframes drop { from { transform: translateY(-10px); opacity: 0; } } @keyframes fade { from { opacity: 0; } } @keyframes pop { from { transform: scale(0.96); opacity: 0; } } .toast { position: fixed; left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 12px); width: fit-content; max-width: min(460px, calc(100% - 32px)); margin: 0 auto; z-index: 60; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--ink) 94%, transparent); color: var(--bg); border-radius: var(--r-md); padding: 13px 18px; font-size: var(--t-callout); font-weight: 500; line-height: 1.35; box-shadow: var(--shadow-3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: drop var(--dur-3) var(--ease-out); pointer-events: none; } .splash { flex: 1; min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; } .splash .mark { animation: pop var(--dur-3) var(--ease-out); } .mark { position: relative; width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(180deg, #1c1c21 0%, #09090b 100%); color: #f7b928; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 2.375rem; letter-spacing: -0.04em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 10px 24px -12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.15); } /* ---------- "Why?" pattern (rollout 18 declutter): opens ---------- Every card leads with one line + the number; the reasons live one tap away. WhyLink variants: pill (default, C) soft gold pill "ⓘ Why 86?" — 44 px tall row (Precision) full-width --fill row "ⓘ Why this weight? ›" (B) text an inline ink link "ⓘ How it works" (inside dense rows / footnotes) */ .whylink { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--t-callout); font-weight: 600; letter-spacing: -0.01em; text-align: left; line-height: 1.25; transition: transform var(--dur-1) var(--ease-out), filter var(--dur-2) ease; } .whylink:active { transform: scale(0.97); filter: brightness(0.97); } .whylink > svg { flex: none; } .whylink-row { display: flex; align-self: stretch; width: 100%; justify-content: space-between; padding: 0 12px 0 14px; border-radius: var(--r-sm); background: var(--fill); color: var(--ink); font-weight: 700; font-size: var(--t-callout); } .whylink-row .whylink-t { display: inline-flex; align-items: center; gap: 10px; } .whylink-row > svg:last-child { color: var(--sub); } .whylink-text { padding: 0 2px; background: none; color: var(--ink); min-height: 44px; } .whylink-text > svg:first-child { color: var(--sub); } .whylink-quiet { background: var(--card); color: var(--ink); box-shadow: var(--shadow-2); } /* InfoSheet: eyebrow (14 w500 --sub) + title (26 w650), close in a --fill circle, then steps, an optional total row, a footnote, and up to two actions (secondary + primary). Steps come in three looks: numbered (C "Why 3,070 kcal?") number disc · label + sub-line · value chip (.up gold / .ok green) meter (C "Why 86?") label + share · value · bar · sub-line chart (B "Why 160 lb?", ) label + sub-line · value (+ small) · a bar drawn to scale with an accent dot where a step changed the number */ .info-sheet { gap: 0; padding-top: 22px; } .info-sheet .is-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 10px; top: -22px; margin-top: -22px; padding-top: 22px; } .info-sheet .is-head > .grow { padding-top: 6px; } .is-eyebrow { font-size: 0.875rem; font-weight: 500; color: var(--sub); line-height: 1.35; margin-bottom: 4px; } .info-sheet h2 { font-size: 1.625rem; letter-spacing: -0.03em; } .is-x { margin: 0 -8px 0 0; } .is-body { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; color: var(--sub); font-size: var(--t-callout); line-height: 1.45; } .is-body > .why { background: none; padding: 0; } .is-body ul, .is-body ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .is-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; } .is-step { display: flex; align-items: center; gap: 14px; padding: 12px 0; } .is-step + .is-step { border-top: 1px solid var(--line); } .is-n { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--sub); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; } .is-tx { flex: 1; min-width: 0; } .is-k { font-size: var(--t-body); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; } .is-k small { font-size: var(--t-footnote); font-weight: 500; color: var(--sub); margin-left: 6px; letter-spacing: 0; } .is-d { font-size: 0.875rem; color: var(--sub); margin-top: 2px; line-height: 1.4; } .is-v { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border-radius: 16px; background: var(--fill); color: var(--ink); font-size: var(--t-callout); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .is-v.up { background: var(--accent-soft); color: var(--accent-ink); } .is-v.ok { background: var(--good-soft); color: var(--good-ink); } .is-v.down { background: var(--warn-soft); color: var(--warn-ink); } .is-steps.meter .is-step { display: block; } .is-steps.meter .is-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .is-steps.meter .is-v { background: none; padding: 0; min-height: 0; font-size: 1.125rem; } .is-steps.meter .is-d { margin-top: 8px; } .is-steps.plain .is-step { align-items: flex-start; } .is-steps.plain .is-k { font-weight: 400; font-size: var(--t-callout); line-height: 1.45; } /* Precision sheets (B): neutral total row with a small-caps label, bolder numbers. */ .is-precision .is-eyebrow { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .is-precision h2 { font-weight: 700; } .is-precision .is-total { background: var(--fill); padding: 14px 16px; } .is-precision .is-total-k { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); } .is-precision .is-total-v { font-weight: 700; font-size: 2.5rem; letter-spacing: -0.045em; } .is-precision .is-total-v small { font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .is-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 16px 18px; border-radius: var(--r-md); background: var(--accent-soft); } .is-total-k { font-size: var(--t-callout); font-weight: 600; color: var(--accent-ink); } .is-total-v { font-family: var(--display); font-size: 2.125rem; font-weight: 650; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; } .is-total-v.text { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; } .is-total-v small { font-family: var(--body); font-size: 1rem; font-weight: 500; color: var(--sub); letter-spacing: 0; margin-left: 4px; } .is-foot { margin-top: 12px; font-size: 0.875rem; color: var(--sub); line-height: 1.45; } .is-acts { display: flex; gap: 10px; margin-top: 18px; } .is-acts > .btn { flex: 1 1 0; min-width: 0; padding-inline: 14px; font-size: var(--t-body); white-space: nowrap; } .is-acts > .btn-secondary { flex: 1 1 auto; } .is-acts > .btn-primary { min-width: 36%; } .is-acts > .btn span { overflow: hidden; text-overflow: ellipsis; } /* — the chart look (Athletic Precision): bold label, sub-line, value right; a 4 px track under each step with the step's number drawn to scale (ink), and an accent dot where the step changed it. */ .ws-steps { list-style: none; margin: 6px 0 0; padding: 0; } .ws-step { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 0 10px; border-top: 1px solid var(--line); } .ws-k { font-size: var(--t-body); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .ws-d { grid-column: 1; font-size: var(--t-footnote); font-weight: 500; color: var(--sub); line-height: 1.4; } .ws-v { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; } .ws-v small { display: block; font-family: var(--body); font-size: var(--t-caption); font-weight: 600; letter-spacing: 0; color: var(--sub); margin-top: 2px; } .ws-v.ok { color: var(--good-ink); font-size: var(--t-callout); display: inline-flex; align-items: center; gap: 4px; justify-self: end; } .ws-trk { grid-column: 1 / -1; position: relative; height: 10px; margin-top: 8px; } .ws-trk::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 1px; background: var(--track); } .ws-trk b { position: absolute; left: 0; top: 3px; height: 4px; border-radius: 2px; background: var(--ink); } .ws-trk i { position: absolute; top: 2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--accent); } /* ---------- Calm Coach pieces ---------- */ /* : the readiness ring (128 px, 12 px stroke, gold arc on --track), number 44 w650 + a small label. */ .score-ring .ring-inner b { font-family: var(--display); font-size: var(--t-num-md); font-weight: 650; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); } .score-ring .ring-inner span { font-size: var(--t-footnote); font-weight: 500; color: var(--sub); margin-top: 6px; } /* : a small ring with an icon + a number tile (C: "9,000 of 8,000 steps", "520 kcal Active"). */ .ringstat { display: flex; align-items: center; gap: 14px; padding: 16px; flex-direction: row; min-width: 0; } .ringstat .ring-inner { color: var(--ink); } .ringstat-v { font-family: var(--display); font-size: 1.375rem; font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; } .ringstat-v small { font-family: var(--body); font-size: var(--t-footnote); font-weight: 500; color: var(--sub); letter-spacing: 0; margin-left: 3px; } .ringstat-l { font-size: var(--t-footnote); color: var(--sub); font-weight: 500; line-height: 1.3; } .ringstats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Soft icon tile (C's 52 px session icon). */ .icon-tile { width: 52px; height: 52px; border-radius: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--ink); } .icon-tile.gold { background: var(--accent-soft); color: var(--accent-ink); } .icon-tile.good { background: var(--good-soft); color: var(--good-ink); } .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pair > .btn { min-width: 0; } /* ---------- Athletic Precision ---------- .mode-precision on a training screen's root: the same tokens, a denser grid and bolder type. Components below work anywhere, but belong to Precision screens (Train, workout, program, season, planner, builder, blocks, maxes, tests, together, Cardio). */ .mode-precision { gap: 10px; } .mode-precision .card { border-radius: var(--r-tile); padding: var(--tile-pad); gap: 12px; } .mode-precision .display { font-weight: 700; letter-spacing: -0.032em; } .mode-precision .h2, .mode-precision .h3 { font-weight: 700; } .mode-precision .section { margin-top: 10px; gap: 8px; } .mode-precision .section-head .label, .mode-precision .p-label { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); } .mode-precision .num, .mode-precision .stat-v { font-weight: 700; } .p-label { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); line-height: 1.33; } .p-grid { display: grid; gap: 8px; } .p-grid.g2 { grid-template-columns: 1fr 1fr; } .p-grid.g3 { grid-template-columns: repeat(3, 1fr); } .p-grid > * { min-width: 0; } /* : label (small caps) · big tabular number + unit · optional sub-line. Sizes sm 22 · md 30 · lg 44 · xl 84. */ .stat-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .stat-tile.tile { background: var(--card); border-radius: var(--r-tile); padding: 14px; box-shadow: var(--shadow-1); border: 1px solid var(--hairline); } .stat-tile.right { align-items: flex-end; text-align: right; } .st-v { font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--ink); font-size: 1.875rem; } .st-v .unit { font-size: max(0.8125rem, 0.28em); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .st-v em { font-style: normal; color: var(--sub); font-size: 0.42em; letter-spacing: -0.02em; margin-left: 0.15em; } .stat-tile.sm .st-v { font-size: 1.375rem; letter-spacing: -0.02em; } .stat-tile.lg .st-v { font-size: var(--t-num-md); } .stat-tile.xl .st-v { font-size: var(--t-num-xl); letter-spacing: -0.055em; } .stat-tile.xl .st-v .unit { font-size: 1.125rem; margin-left: 6px; } .st-s { font-size: var(--t-footnote); color: var(--sub); font-weight: 500; line-height: 1.35; } /* : a segmented bar (B's 20-set progress, readiness band). Filled segments = accent (or ink). */ .seggauge { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 8px; } .seggauge i { display: block; border-radius: 2px; background: var(--track); } .seggauge i.on { background: var(--accent); } .seggauge.ink i.on { background: var(--ink); } .seggauge.good i.on { background: var(--good); } .seggauge-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; } /* : Set · lb · Reps · ✓ (B). A header row of small caps, then 56 px rows divided by hairlines; the set you're on gets an accent edge on the left and a filled accent check; done rows a green check. Warm-ups sit in one quiet row ("W"). Rows are built by the screen (cells .st-n / .st-c / .st-ck); is the check button. */ .settable { display: flex; flex-direction: column; margin-top: 2px; } .st-headrow, .st-row { display: grid; grid-template-columns: 30px minmax(0, 1.1fr) minmax(0, 1fr) 48px; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; } .st-headrow { min-height: 30px; border-bottom: 1px solid var(--line); } .st-headrow > span { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); } .st-row { position: relative; min-height: 58px; padding: 6px 0; border-bottom: 1px solid var(--line); } .st-row:last-child { border-bottom: 0; } .st-n { font-size: var(--t-footnote); font-weight: 700; color: var(--sub); } .st-c { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); min-width: 0; } .st-c small { font-size: var(--t-footnote); font-weight: 600; color: var(--sub); letter-spacing: 0; margin-left: 2px; } .st-row.cur::before { content: ''; position: absolute; left: calc(-1 * var(--tile-pad)); top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); } .st-row.done .st-c { color: var(--sub); } .st-row.wu { min-height: 52px; } .st-row.wu .st-c { font-size: var(--t-callout); font-weight: 600; color: var(--sub); } .st-wide { grid-column: 2 / 4; min-width: 0; } .st-ck { justify-self: end; } .setcheck.sq { width: 44px; height: 44px; border-radius: var(--r-sm); border: 0; background: var(--fill); color: var(--faint); } .setcheck.sq.cur { background: var(--accent); color: var(--on-accent); } .st-row.done .setcheck.sq, .setrow.done .setcheck.sq { background: var(--good); color: var(--on-good); } /* : the bar end with the plates on one side, heaviest nearest the collar (B). Heights follow plate size. */ .platediag { display: flex; align-items: center; gap: 14px; min-width: 0; } .platediag svg { flex: none; overflow: visible; } .platediag .pd-bar { fill: var(--line-2); } .platediag .pd-collar { fill: var(--sub); } .platediag .pd-plate { fill: var(--ink); } .platediag .pd-plate.small { fill: color-mix(in srgb, var(--ink) 75%, var(--card)); } .pd-text { min-width: 0; font-size: var(--t-footnote); font-weight: 600; color: var(--sub); line-height: 1.45; font-variant-numeric: tabular-nums; } .pd-text > * { display: block; } .pd-text strong { color: var(--ink); font-weight: 600; } @media (min-width: 600px) { .display { font-size: 2rem; } } /* Desktop / tablet: the app is a centered column on a quiet canvas (it is a phone app; lines stay readable). */ @media (min-width: 760px) { html, html:has(.tabbar), html:has(.sheet-backdrop) { --foot-bg: color-mix(in srgb, var(--bg) 94%, var(--ink)); } .shell { left: calc(50% - 320px); right: calc(50% - 320px); border-inline: 1px solid var(--hairline); } .tabbar { box-shadow: none; } .sheet-backdrop { justify-content: center; padding-bottom: 24px; } .sheet { border-radius: var(--r-xl); max-height: min(86vh, 860px); padding-bottom: 20px; animation: pop var(--dur-3) var(--ease-out); box-shadow: var(--shadow-3); } .sheet::before { display: none; } .sheet-foot { bottom: -20px; margin-bottom: -20px; padding-bottom: 20px; border-radius: 0 0 var(--r-xl) var(--r-xl); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- account ---------- */ .page.page-auth { padding-top: 0; } .auth { padding-top: 0; } .auth-head { display: flex; flex-direction: column; gap: 4px; } .auth-head .h2 { font-size: var(--t-title); } .auth-rule { display: flex; align-items: center; gap: 6px; margin-top: -6px; font-size: 0.8125rem; font-weight: 500; color: var(--sub); } .auth-rule.ok { color: var(--good-ink); } .auth-err { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 12px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--bad) 9%, var(--card)); border: 0; color: var(--bad-ink); font-weight: 500; font-size: var(--t-callout); } .auth-err .linkbtn { padding: 4px 0; min-height: 44px; color: var(--bad-ink); } .auth-note { padding: 10px 12px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--good) 9%, var(--card)); border: 0; color: var(--good-ink); font-weight: 500; font-size: var(--t-callout); } .auth-link { align-self: center; } code.url { display: block; font-family: var(--mono); font-size: 0.75rem; background: var(--fill); border: 0; border-radius: 10px; padding: 10px 12px; word-break: break-all; user-select: all; } /* ---------- tester feedback ---------- The feedback control is a quiet row at the end of every page (FeedbackLayer → Shell `fab` slot, rendered inside the page after its content): it can never cover a button, a field or the last line of a screen. */ .fb-fab { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-height: 44px; margin: 28px auto 0; padding: 0 14px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--sub); font-size: var(--t-footnote); font-weight: 500; position: relative; } .fb-fab:active { background: var(--fill); } @media (hover: hover) { .fb-fab:hover { background: var(--fill); color: var(--ink); } } .fb-fab svg { color: var(--faint); flex: none; } .fb-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bad); color: var(--on-bad); font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .page:has(.restbar) { padding-bottom: 120px; } .fb-sheet textarea { min-height: 110px; } .fb-thumb { position: relative; align-self: flex-start; } .fb-thumb img { display: block; max-height: 140px; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); } .fb-thumb .iconbtn { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; } .fb-card { gap: 8px; cursor: pointer; } .fb-card.fb-new { border-color: var(--line-2); } .fb-text { white-space: pre-wrap; overflow-wrap: anywhere; } .fb-body { font-size: 1.0625rem; line-height: 1.5; } .clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .fb-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .fb-filters::-webkit-scrollbar { display: none; } .fb-filters .chip { flex: none; } .fb-vote { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 56px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-weight: 600; font-size: 0.875rem; color: var(--sub); } .fb-vote.on { background: var(--sel); border-color: var(--sel); color: var(--on-sel); } .fb-meta { display: inline-flex; align-items: center; gap: 4px; } .fb-who { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fb-img { padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card2); align-self: flex-start; max-width: 100%; } .fb-img img { display: block; max-width: 100%; max-height: 360px; } .fb-img-loading { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; } .fb-zoom { align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(var(--safe-b) + 12px); } .fb-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; } .fb-reply { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .fb-reply.mine { background: var(--card2); } .fb-reply.admin { border-color: var(--line-2); } .fb-admin-tag { margin-left: 6px; font-size: 0.75rem; font-weight: 600; color: var(--accent-ink); } .fb-x { border: 0; background: none; color: var(--sub); width: 44px; height: 44px; margin: -6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; } .fb-replybox { display: flex; gap: 8px; align-items: flex-end; } .fb-replybox textarea { min-height: 52px; } .fb-verify { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--info) 7%, var(--card)); border: 0; } .fb-verify .btn { margin-top: 2px; } .fb-report { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--sub); font-weight: 500; font-size: 0.8125rem; } .fb-card.fb-hidden { opacity: 0.6; border-style: dashed; } /* Accessibility (rollout 13) --------------------------------------------------------------------------------------- Text size: every font size is in rem (scripts/rem-type.mjs keeps it that way), so it follows the browser's default size, and on iPhone the Text Size / Dynamic Type setting: initViewport (ui.tsx) sets --type-scale from the system body size (1 at the default Large, up to ~1.35). Inputs never drop under 16 px (iOS zooms into those). */ html { font-size: calc(100% * var(--type-scale, 1)); } input, textarea, select { font-size: max(1rem, 16px); } /* Sheets and full-screen dialogs take focus themselves (so screen readers announce them) without a ring; everything inside keeps the normal :focus-visible ring. */ [role='dialog'][tabindex='-1']:focus, [role='alertdialog'][tabindex='-1']:focus { outline: none; } /* Contrast (WCAG AA). Text: --accent-ink / --sub / --faint are ≥ 4.5:1 on every light surface (scripts/ reliability-tests.ts checks the tokens). Controls: gold (#eaa50c) is only ~2.1:1 on white, so in light mode an on switch and the focused field get a darker gold edge (≥ 3:1, WCAG 1.4.11), and the keyboard focus ring uses the gold text color. Selected chips / scale buttons are ink (rollout 16), and the primary button is identified by its label, so neither needs the edge. Other accents and dark mode already pass with the accent itself. */ :root { --accent-edge: var(--accent); } :root:not([data-accent]), :root[data-accent='gold'] { --accent-edge: #a87100; --focus: var(--accent-ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --accent-edge: var(--accent); --focus: var(--accent); } } :root[data-theme='dark'] { --accent-edge: var(--accent); --focus: var(--accent); } .toggle input:checked + .switch { box-shadow: inset 0 0 0 1.5px var(--accent-edge); } /* A stepper at its limit says so (the button is disabled, not silently ignored). */ .stepper button:disabled { opacity: 0.4; } /* Rollout 15 · billing: the pricing heads-up sheet (screens/pricingnotice.tsx; the plan rows reuse .pw-plan from paywall.css), "Free for life" + history in Admin › Subscriptions, and Admin › Funnel (screens/admin.tsx). */ .pn-sheet { gap: 14px; } .pn-sheet h2 { margin: 2px 0 0; } .pn-text { margin: 0; font-size: 1rem; line-height: 1.5; } .pn-sheet .pw-plans { display: flex; flex-direction: column; gap: 10px; } .pn-terms { margin: 0; } .pn-legal { margin: 0; color: var(--sub); } .adm-life { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); } .adm-life p { margin: 0; } .adm-log { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-wrap: anywhere; } .ad-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .ad-funnel { min-width: 560px; } .ad-funnel td:first-child, .ad-funnel th:first-child { white-space: nowrap; } /* ========================================================================= Core and stretching blocks (rollout 15, C28): src/app/screens/blocks.tsx ========================================================================= */ /* "Core and stretching" (rollout 18): a small-caps title and a grouped list — one row per block (Remove) and an "Add core" / "Add stretching" row for each one missing. In the workout's Adjust sheet and the Train day's sheet. */ .blk-card { display: flex; flex-direction: column; gap: 8px; } .blk-title { margin: 0; } .blk-rows { display: flex; flex-direction: column; } .blk-row { gap: 14px; } .blk-row .small { margin: 0; } .blk-row .linkbtn { flex: none; min-height: 44px; font-weight: 600; color: var(--sub); } /* Header above a block (and "Main workout" after a start block) in the exercise list: a sentence-case section label. */ .blk-sep { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; margin: 8px 4px -6px; font-size: var(--t-callout); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .blk-sep .small { font-weight: 400; } /* Tag on a block exercise: a quiet neutral badge. */ .blk-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-right: 6px; border-radius: 99px; font-family: var(--body); font-size: var(--t-caption); font-weight: 600; vertical-align: 2px; background: var(--fill); color: var(--sub); } .blk-tag.stretch { background: var(--fill); color: var(--sub); } /* Hold timer on a timed block set: neutral; running = ink (selection state). */ .blk-hold { flex: none; min-width: 64px; min-height: 44px; padding: 0 12px; border-radius: 22px; border: 0; background: var(--fill); color: var(--ink); font: inherit; font-size: var(--t-footnote); font-weight: 600; font-variant-numeric: tabular-nums; } .blk-hold.on { background: var(--sel); color: var(--on-sel); } /* Program › Core and stretching: each choice row as equal pills on one line (a segmented look). */ .blk-prefs { display: flex; flex-direction: column; gap: 14px; } .blk-pref { padding-bottom: 14px; border-bottom: 1px solid var(--line); } .blk-pref:last-child { padding-bottom: 0; border-bottom: 0; } .blk-pref > .lr-title { font-weight: 600; } .blk-pref .chips { display: flex; flex-wrap: nowrap; gap: 6px; } .blk-pref .chips .chip { flex: 1 1 auto; min-width: 0; padding: 0 10px; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-footnote); } /* ========================================================================= Rollout 8 — body, fuel & sleep: weigh-in sheet, Weight screen, readiness inputs, naps, photos waiting for the AI ========================================================================= */ /* ---- Weigh-in sheet ---- */ .wt-big { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 4px; } .wt-step { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 0; background: var(--fill); color: var(--ink); font-size: 1.75rem; line-height: 1; font-weight: 500; } .wt-step:active { background: var(--fill-2); } .wt-val { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .wt-input { width: 3.9em; min-height: 64px; padding: 4px 6px; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: none; color: var(--ink); text-align: center; font-size: 2.75rem; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .wt-input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: none; background: none; } .wt-unit-label { font-weight: 500; color: var(--sub); font-size: 1.125rem; } .wt-unit { flex: none; min-width: 110px; } .wt-unit button { min-height: 44px; } .wt-sheet .warn-text { margin: 0; } /* ---- Weight screen ---- */ .wt-now .stat-l { order: -1; } .wt-now .row { align-items: center; } .wt-now .small { margin-top: 2px; } .wt-pace-v { font-weight: 600; font-size: var(--t-headline); letter-spacing: -0.015em; line-height: 1.3; font-variant-numeric: tabular-nums; } .wt-pace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wt-pace-grid .wt-pace-v { overflow-wrap: anywhere; } .wt-pace .sub { margin: 0; } .wt-pace .wg-toggle, .wg-card .wg-toggle { align-self: flex-start; margin: -6px 0 -8px; } .wt-range { margin-bottom: 4px; } .wt-list { gap: 0; } .wt-row { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); } .wt-row:last-of-type { border-bottom: 0; } .wt-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; } .wt-row-date { min-width: 0; } .wt-row-date .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wt-row-lb { font-weight: 600; white-space: nowrap; } .wt-row-chg { width: 44px; flex: none; text-align: right; color: var(--sub); } .wt-row .iconbtn { color: var(--sub); margin-right: -10px; } .wt-remcard { padding: 4px 18px; gap: 0; } .wt-chart { gap: 12px; } .wt-chart > .small { margin: 0; } .wt-more { align-self: stretch; justify-content: center; border-top: 1px solid var(--line); min-height: 52px; } .wt-now .btn { flex: none; } .wt-rem .toggle { min-height: 56px; } .wt-rem .remrow + .remrow { min-height: 44px; } .wt-day { min-height: 44px; flex: 1; min-width: 0; } .set-weight { gap: 8px; flex-wrap: wrap; } .set-weight > .grow { min-width: 120px; } /* ---- Readiness inputs ---- */ .rd-empty .score { color: var(--sub); } .rd-missing { gap: 4px; } .rd-miss-row { padding: 6px 0; border-bottom: 1px solid var(--line); } .rd-miss-row:last-child { border-bottom: 0; } .rd-miss-row .btn { flex: none; } .home-nutrition { gap: 4px; } .home-nutrition .sub { margin: 0; } /* ---- Naps ---- */ .nap-card { gap: 10px; } .nap-timer { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--info) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); } .nap-list, .nap-day { display: flex; flex-direction: column; gap: 2px; } .nap-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; width: 100%; } .nap-days { gap: 8px; } .nap-day { padding-bottom: 8px; border-bottom: 1px solid var(--line); } .nap-day:last-child { border-bottom: 0; padding-bottom: 0; } .nap-day .nap-row { min-height: 44px; padding-left: 10px; color: var(--sub); } .nap-quick { gap: 8px; } /* ---- Meal photos waiting for the AI ---- */ .pend-card { gap: 10px; } .pend-head { font-size: 1rem; } .pend-row { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--info) 25%, transparent); } .pend-thumb { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 10px; display: block; } .pend-row .btn { min-width: 0; } /* ---- Progress (progress.tsx; rollout 18, C · Calm Coach — like concepts/r18/png/c/progress-*) ---- */ .pg { gap: 14px; } /* Consistency */ .cal-card { gap: 12px; } .cal-card .cal-head { align-items: center; } .cal-nav { display: flex; align-items: center; gap: 0; margin: -10px -12px -10px 0; } .cal-nav .iconbtn { color: var(--sub); } .cal-nav .iconbtn:disabled { opacity: 0.3; } .cal-month { min-width: 4.5em; text-align: center; } .cal-card .cal-grid { gap: 6px; } .cal-card .cal-dow { font-weight: 600; font-size: var(--t-caption); } .cal-card .cal-day { border-radius: 14px; font-weight: 500; color: var(--sub); } .cal-card .cal-day.m-trained, .cal-card .cal-swatch.m-trained { background: var(--good-soft); color: var(--good-ink); font-weight: 600; } .cal-card .cal-swatch.m-trained { border-color: var(--good); } .cal-card .cal-day.m-partial, .cal-card .cal-swatch.m-partial { background: linear-gradient(135deg, var(--good-soft) 0 50%, transparent 50% 100%); border-color: var(--good); color: var(--ink); } .cal-card .cal-day.m-planned, .cal-card .cal-swatch.m-planned { border-color: var(--line-2); color: var(--ink); background: none; } .cal-card .cal-day.m-skipped, .cal-card .cal-swatch.m-skipped { border-style: dashed; border-color: var(--warn); color: var(--warn-ink); } .cal-card .cal-day.m-missed, .cal-card .cal-swatch.m-missed { background: var(--warn-soft); border-color: transparent; color: var(--warn-ink); } .cal-card .cal-day.m-rest, .cal-card .cal-swatch.m-rest { background: none; color: var(--faint); font-weight: 500; } .cal-card .cal-swatch.m-rest { background: var(--fill); } .cal-card .cal-day.is-extra::after { background: currentColor; } .cal-card .cal-day.is-today { background: var(--accent); color: var(--on-accent); font-weight: 700; border-color: transparent; box-shadow: none; } .cal-card .cal-day.is-picked { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); transform: none; } .cal-foot { display: flex; flex-direction: column; gap: 6px; min-height: 1.4em; } .cal-picked:empty { display: none; } .cal-card .cal-legend { gap: 6px 16px; color: var(--sub); } .cal-legend-all { margin-top: 4px; } .cal-card .cal-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; border-top: 0; } .cal-stats .inset { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-width: 0; } .cal-stats strong { font-family: var(--display); font-size: 1.375rem; font-weight: 650; letter-spacing: -0.02em; } .cal-card .cal-streak { color: var(--ink); } .cal-streak-tile { padding-right: 40px !important; } .cal-streak-tile .info-dot { position: absolute; top: 4px; right: 2px; margin: 0; } /* Max over time */ .pg-max { gap: 14px; } .pg-lift-seg button { min-width: 0; padding: 0 4px; font-size: var(--t-footnote); white-space: nowrap; } .pg-max-v { margin: 0; display: flex; align-items: baseline; gap: 4px; } .pg-max-v .num { font-family: var(--display); font-size: var(--t-num-md); font-weight: 650; letter-spacing: -0.04em; line-height: 1; } .pg-max-v small { font-size: var(--t-callout); font-weight: 500; color: var(--sub); } .pg-trends { gap: 12px; } .pg-trends > .small { margin: 0; } .pg-trends .card-head .linkbtn, .pg-max .card-head .linkbtn { margin-block: -10px; } /* Test results: tiles */ .pg-tests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pg-test { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; min-height: 0; border-radius: var(--r-md); } .pg-test-v { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; } .pg-test-v .num { font-family: var(--display); font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; } .pg-test-v small { font-size: var(--t-footnote); color: var(--sub); font-weight: 500; } .pg-test-v .imp { margin-left: 6px; } .pg-test-l { font-size: var(--t-footnote); color: var(--ink); font-weight: 500; line-height: 1.3; } .pg-test-s { line-height: 1.3; } /* Photos */ .pc-card-wrap { gap: 14px; } .pc-card-wrap .card-head .whylink { margin-block: -6px; } .pc-card { display: flex; flex-direction: column; gap: 12px; } .pc-one { margin: 0; } .pg-add { display: flex; } .pg-add .btn { flex: 1; } .is-body .pc-private { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .pc-private .lr-title { color: var(--ink); font-weight: 600; } .pc-private li { display: flex; align-items: center; gap: 14px; padding: 12px 0; } .pc-private li + li { border-top: 1px solid var(--line); } .pc-private .lr-ico { width: 40px; height: 40px; border-radius: 50%; } /* ---- Readiness screen (readiness.tsx; rollout 18, C · Calm Coach): ring + band + one line, today's change inset, the parts as one grouped list with meter bars ---- */ .rdx { gap: 14px; } .rdx-hero { display: flex; flex-direction: column !important; align-items: stretch !important; gap: 16px !important; } .rdx-top { display: flex; align-items: center; gap: 18px; } .rdx-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rdx-hero .h3 { font-size: 1.25rem; letter-spacing: -0.02em; } .rdx-line { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rdx-hero .small { margin: 0; } .rdx-hero.rd-empty .score-ring b { color: var(--faint); font-weight: 500; } .rdx-today { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; } .rdx-today-k { font-size: var(--t-callout); font-weight: 500; color: var(--sub); flex: none; } .rdx-today-v { text-align: right; min-width: 0; } strong.rdx-today-v { font-size: var(--t-body); font-weight: 600; } .rd-missing { gap: 0; } .rd-missing .rd-miss-row { padding: 12px 18px; min-height: 64px; border-bottom: 0; } .rd-missing .rd-miss-row + .rd-miss-row::before { content: ''; position: absolute; top: 0; right: 18px; left: 18px; height: 1px; background: var(--line); } .rd-miss-row .lr-title { font-weight: 500; } .rdx-parts { display: flex; flex-direction: column; } .rdx-part { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; position: relative; } .rdx-part + .rdx-part::before { content: ''; position: absolute; top: 0; right: 18px; left: 18px; height: 1px; background: var(--line); } .rdx-part-top { display: flex; align-items: baseline; gap: 8px; } .rdx-part .small { margin: 0; } .rdx-score { font-family: var(--display); font-weight: 650; font-size: 1.25rem; letter-spacing: -0.02em; min-width: 32px; text-align: right; } .rdx .section-head .whylink { margin-block: -8px; padding: 0 14px 0 10px; font-size: var(--t-footnote); } .rdx-how-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; } .rdx-chart { gap: 12px; } .rdx-hero.rd-empty .rdx-today { flex-direction: column; align-items: flex-start; gap: 4px; } .rdx-hero.rd-empty .rdx-today-v { text-align: left; } /* Connected devices (screens/devices.tsx): Apple Health; Oura and Garmin through it (rollout 15) */ .dv-scores { font-variant-numeric: tabular-nums; margin-top: -4px; } .dv-oura-note-actions { gap: 8px; } /* Rollout 18 (C · Calm Coach): Oura / Garmin as rows in one group, how to connect in a sheet */ .dv { gap: 14px; } .dv-group { display: flex; flex-direction: column; } .dv-row { position: relative; } .dv-row + .dv-row::before { content: ''; position: absolute; top: 0; right: 18px; left: 68px; height: 1px; background: var(--line); z-index: 1; } .dv-row > .listrow { padding: 12px 18px; min-height: 68px; border-bottom: 0; } .dv-row .lr-value { font-size: var(--t-footnote); } /* exercise stream styles: exercise sheet + animation, demos (rollout 24: the body map is gone) */ /* ---------- exercise animation ---------- */ .ex-fig { --ex-body: color-mix(in srgb, var(--ink) 80%, var(--card)); --ex-far: color-mix(in srgb, var(--ink) 40%, var(--card)); --ex-prop: color-mix(in srgb, var(--ink) 34%, var(--card)); --ex-prop2: color-mix(in srgb, var(--ink) 13%, var(--card)); --ex-steel: color-mix(in srgb, var(--ink) 58%, var(--card)); --ex-hi-n: color-mix(in srgb, var(--accent) 88%, var(--ex-body)); --ex-hi-f: color-mix(in srgb, var(--accent) 88%, var(--ex-far)); --ex-lo: color-mix(in srgb, var(--accent) 50%, var(--ex-far)); --ex-water: color-mix(in srgb, var(--info) 13%, var(--card2)); --ex-accent-soft: color-mix(in srgb, var(--accent) 22%, var(--card)); display: block; width: 100%; height: auto; overflow: hidden; } .ex-seg.n { fill: var(--ex-body); } .ex-seg.f { fill: var(--ex-far); } .ex-seg.n.hi { fill: var(--ex-hi-n); } .ex-seg.f.hi { fill: var(--ex-hi-f); } .ex-seg.lo { fill: var(--ex-lo); } .ex-ground { stroke: var(--line); stroke-width: 1.2; } .ex-prop { fill: var(--ex-prop); } .ex-prop2 { fill: var(--ex-prop2); stroke: var(--ex-prop); stroke-width: 0.8; } .ex-leg { fill: var(--ex-prop); } .ex-line { fill: none; stroke: var(--ex-prop); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .ex-line.thick { stroke-width: 2.6; } .ex-rail { fill: var(--ex-prop2); } .ex-mat { fill: var(--ex-accent-soft); } .ex-plate circle { fill: var(--ex-steel); } .ex-plate .ex-plate-in { fill: none; stroke: color-mix(in srgb, var(--ink) 32%, var(--card)); stroke-width: 0.9; } .ex-plate .ex-hub { fill: var(--ex-prop2); } .ex-plate path.ex-hub { fill: none; stroke: var(--ex-steel); stroke-width: 1.2; } .ex-plate.far circle { fill: color-mix(in srgb, var(--ink) 30%, var(--card)); } .ex-bar { fill: var(--ex-steel); } .ex-cable { stroke: var(--ex-steel); stroke-width: 0.9; fill: none; } .ex-band { stroke: var(--accent); stroke-opacity: 0.75; stroke-width: 1.8; stroke-linecap: round; fill: none; } .ex-bandend { fill: var(--accent); } .ex-belt { fill: var(--ex-prop); } .ex-dash rect { fill: var(--line); } .ex-cone { fill: var(--warn); } .ex-pack { fill: var(--ex-steel); } /* water: tinted body behind the swimmer, a translucent layer in front so submerged limbs read as underwater */ .ex-water { fill: var(--ex-water); } .ex-water.front { fill: var(--info); fill-opacity: 0.1; } .ex-surface { fill: none; stroke: var(--info); stroke-opacity: 0.7; stroke-width: 1.1; stroke-linejoin: round; } /* road bike */ .ex-tire { fill: none; stroke: var(--ex-steel); stroke-width: 2.4; } .ex-spoke { fill: none; stroke: var(--ex-prop); stroke-width: 0.5; } .ex-hubc { fill: var(--ex-steel); } .ex-frame { fill: none; stroke: var(--ex-steel); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; } .ex-frame.thin { stroke-width: 1.6; } .ex-bars { fill: none; stroke: var(--ex-steel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ex-saddle { fill: var(--ex-steel); } .ex-ring { fill: none; stroke: var(--ex-steel); stroke-width: 1.2; } .ex-crank { stroke: var(--ex-steel); stroke-width: 2; stroke-linecap: round; } .ex-crank.far { stroke: var(--ex-prop); } .ex-pedal { fill: var(--ex-steel); } /* soft tissue + walls */ .ex-roller circle { fill: var(--ex-prop2); stroke: var(--ex-prop); stroke-width: 0.8; } .ex-roller .ex-roller-in { fill: none; stroke: var(--ex-prop); stroke-width: 0.6; } .ex-roller-mark { stroke: var(--ex-prop); stroke-width: 1.1; stroke-linecap: round; } .ex-ball { fill: var(--accent); stroke: var(--ex-steel); stroke-width: 0.5; } .ex-wall { fill: var(--ex-prop2); stroke: var(--ex-prop); stroke-width: 0.8; } /* breathing pacer */ .ex-breath-max { fill: none; stroke: var(--line); stroke-width: 0.6; stroke-dasharray: 1.2 1.6; } .ex-breath-ring { fill: var(--ex-accent-soft); stroke: var(--accent); stroke-width: 1.2; } .ex-breath text { fill: var(--ink); font: 700 0.35rem var(--body); letter-spacing: 0.02em; } /* iOS 15.4–16.1 has no color-mix(): without this the figure falls back to black (invisible in dark mode). */ @supports not (color: color-mix(in srgb, red, blue)) { .ex-fig { --ex-body: var(--ink); --ex-far: var(--sub); --ex-prop: var(--sub); --ex-prop2: var(--line); --ex-steel: var(--sub); --ex-hi-n: var(--accent); --ex-hi-f: var(--accent); --ex-lo: var(--accent); --ex-water: var(--card2); --ex-accent-soft: var(--card2); } .ex-seg.lo { fill-opacity: 0.55; } .ex-seg.f.hi { fill-opacity: 0.8; } .ex-plate .ex-plate-in, .ex-plate.far circle { stroke: var(--sub); } .ex-plate.far circle { fill: var(--sub); } .ex-dot { background: var(--accent); opacity: 0.55; } .ex-dot.on { opacity: 1; } } .ex-stage { position: relative; display: block; flex: none; width: 100%; padding: 8px 12px 4px; border: 0; border-radius: var(--r-lg); background: var(--fill); cursor: pointer; -webkit-tap-highlight-color: transparent; } /* short phones: cap the figure so muscles + cues stay in reach; the SVG letterboxes inside */ .ex-stage .ex-fig { max-height: min(38vh, 300px); margin: 0 auto; } .ex-play { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); min-height: 44px; padding: 0 18px 0 14px; border-radius: 99px; display: flex; align-items: center; gap: 8px; background: var(--sel); color: var(--on-sel); font-weight: 600; font-size: var(--t-callout); white-space: nowrap; box-shadow: var(--shadow-2); } .ex-play svg { fill: currentColor; } .ex-stage.paused .ex-fig { opacity: 0.9; } .ex-pausehint { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 3px; background: color-mix(in srgb, var(--card) 70%, transparent); opacity: 0.75; } .ex-pausehint i { display: block; width: 3px; height: 10px; border-radius: 1px; background: var(--sub); } .ex-thumb { display: block; width: 100%; border-radius: 10px; background: var(--fill); padding: 2px 4px 0; overflow: hidden; } .ex-thumb .ex-fig { pointer-events: none; } /* ---------- exercise sheet ---------- */ .ex-sheet:focus { outline: none; } /* height cap + scrolling come from the shared .sheet rule (visual-viewport aware); the header stays pinned */ .ex-sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; gap: 14px; padding-top: 0; } .ex-head { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 2; margin: 0 -18px; padding: 18px 18px 8px; background: var(--card); } .ex-actions { padding-bottom: 2px; } html.ex-lock, html.ex-lock body { overflow: hidden; } .ex-note { background: var(--fill); border-radius: var(--r-ctl); padding: 10px 12px; } .ex-note p { margin: 2px 0 0; font-size: 0.9375rem; color: var(--ink); } .ex-head h2 { line-height: 1.1; } .ex-close { margin-right: -8px; } .ex-muscles { display: flex; align-items: center; gap: 14px; } .ex-mrow { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; } .ex-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--accent) 45%, var(--card)); } .ex-dot.on { background: var(--accent); } .ex-tags { display: flex; flex-wrap: wrap; gap: 6px; } .ex-tag { padding: 5px 11px; border-radius: 99px; background: var(--fill); border: 0; font-size: var(--t-footnote); font-weight: 500; } .ex-cues { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); font-size: 0.9375rem; } .ex-name { position: relative; display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 22%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Exercise names are text links: the tap area reaches 44 px tall without changing the line. */ .ex-name::after { content: ''; position: absolute; inset: -11px -6px; } /* ---------- train: day cards ---------- */ .tr-day { gap: 8px; } .tr-dayhead { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; margin: 0; border: 0; background: none; text-align: left; min-height: 44px; } .tr-dayhead .small { display: flex; align-items: center; gap: 4px; margin-top: 2px; } .tr-exlist { display: flex; flex-direction: column; } .tr-exrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 0; border-top: 1px solid var(--line); } .tr-exrow .ex-name { font-size: 0.9375rem; font-weight: 600; } .tr-exrow .small { flex: none; text-align: right; } .tr-altinfo { display: block; padding: 0; border: 0; background: none; text-align: left; min-height: 44px; } .altrow { gap: 10px; } /* ---------- demo affordances (recovery steps, sleep wind-down, fitness test) ---------- */ .ex-demo { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: -8px 0; padding: 0; border: 0; background: none; cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent; } .ex-demo-pill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 9px; border-radius: 99px; background: var(--fill); color: var(--ink); font-size: var(--t-footnote); font-weight: 600; white-space: nowrap; border: 0; } .ex-demo-pill svg { fill: currentColor; flex: none; } .ex-demo:active .ex-demo-pill { transform: scale(0.96); } .ex-steps { gap: 4px; padding-left: 22px; } .ex-steps li { padding: 2px 0; } .ex-steps li::marker { color: var(--sub); font-weight: 600; } .ex-step-text { color: var(--ink); } .ex-step-demos { display: inline-flex; flex-wrap: wrap; gap: 0 6px; margin-left: 8px; vertical-align: middle; } @supports not (color: color-mix(in srgb, red, blue)) { .ex-demo-pill { background: var(--card2); border-color: var(--line); } .ex-pausehint { background: var(--card); } } /* ---------- recovery screen: move thumbnails on each routine ---------- */ .rec-moves { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: -2px; } .rec-move, .rec-more { position: relative; min-width: 0; min-height: 48px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; } .rec-move .ex-thumb { height: 48px; display: flex; align-items: flex-end; padding: 2px 2px 0; } .rec-move::after { content: ''; position: absolute; right: 4px; top: 4px; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--sub); opacity: 0.9; } .rec-more { background: var(--fill); color: var(--sub); font-weight: 600; font-size: var(--t-footnote); } /* fitness test: demo link under the field */ .tst-demo-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; } .tst-demo-row .small { margin: 0; } /* Rollout 16: today's day card padding. */ /* Exercise sheet actions: all secondary (Close is not the screen's main action); they wrap instead of squeezing. */ .ex-actions { flex-wrap: wrap; } .ex-actions .btn { flex: 1 1 auto; padding: 0 14px; font-size: var(--t-callout); white-space: nowrap; } /* Social: the Squad tab (Friends & boards, rollout 16 round 2) and the feed (rollout 10): posts, cards, photos, comments, composer. Neutral surfaces; the accent is only the one primary action. */ /* ---------- Squad › Friends & boards ---------- */ .sq-join { gap: 8px; } .sq-join .h3 { font-size: var(--t-body); line-height: 1.4; } .sq-join .btn { margin-top: 4px; } .sq-why { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } /* Leaderboards: a segmented board picker, scope chips, ranked rows (rank 1 in ink, not gold). */ .sq-board button { padding-inline: 4px; white-space: nowrap; } .sq-scope .chip { min-height: 44px; padding: 0 14px; } .sq-challenge { gap: 10px; } .sq-challenge .small { margin-top: 2px; } .sq-standings { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .sq-new-opts { display: flex; flex-direction: column; gap: 8px; } .compare { padding-top: 8px; border-top: 1px solid var(--line); } .compare .row { min-height: 28px; } /* ---------- Feed ---------- */ /* Workout / cardio card inside a post: a quiet inset (no border, no second card). */ .fd-card-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: var(--card); } .fd-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: var(--t-callout); } .fd-top li { display: flex; gap: 8px; min-height: 30px; align-items: center; } .fd-top li + li { border-top: 1px solid var(--line); } .fd-top .num { font-weight: 600; font-variant-numeric: tabular-nums; } @keyframes fd-pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } } .fc-avatar.sm { width: 32px; height: 32px; font-size: 0.75rem; } /* Composer: "Add to your post" is a grouped list (photos, a workout, cardio). */ .fd-pick { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); padding: 12px 2px; font-size: var(--t-callout); min-height: 44px; } .fd-pick strong { font-weight: 600; } .fd-pick:last-child { border-bottom: 0; } .fd-pick:active { background: var(--fill); } .fd-share .sub { margin: 0; } .fd-blocked { padding: 8px 0; min-height: 56px; } .fd-blocked + .fd-blocked { border-top: 1px solid var(--line); } /* "Post this workout" (finished workout) and "Post" on the Train / Cardio tabs (postlatest.tsx): a neutral row. */ .fd-share { padding-block: 12px; } .fd-share .fd-card-icon { background: var(--fill); } .fd-share .lr-title { font-weight: 600; } .fd-share .btn { flex: none; } /* ---------- Rollout 18 · Calm Coach: Squad ---------- */ .sq-join { gap: 10px; } .sq-join .sub { margin: -4px 0 0; } .sq-join .whylink { margin-top: 2px; } .sq-join .btn { margin-top: 6px; } .sq-challenge .h3 { font-size: var(--t-headline); } /* App flow (rollout 12): workout-in-progress bar, offline strip, verify strip, notification prompt, morning check-in, tab headers with the Settings gear, Apple Health status line and a few small additions. */ /* ---------- tab headers: title + actions (gear) on one row ---------- */ /* Same rhythm as (styles.css .screen-head): large title left, plain icon actions right. */ .tab-head { align-items: center; gap: 4px; padding-top: 4px; min-height: 52px; } .tab-head .display { min-width: 0; } .tab-head > .iconbtn:last-child { margin-right: -10px; } .tr-head { gap: 8px; } /* ---------- "Workout in progress · Resume" above the tab bar (shared chrome, rollout 16: neutral bar, ink text, a small accent dot says "live") ---------- */ .wbar { flex: none; position: relative; z-index: 26; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px var(--gutter); border: 0; border-top: 1px solid var(--hairline); background: var(--bar); color: var(--ink); font: inherit; font-size: var(--t-footnote); text-align: left; } .wbar::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .wbar:active { background: color-mix(in srgb, var(--ink) 4%, var(--bar)); } .wbar > svg { color: var(--sub); flex: none; } .wbar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wbar-rest { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .wbar-go { flex: none; font-weight: 600; color: var(--ink); } /* ---------- offline / sync problem strip (top of the app) ---------- */ .sync-strip { flex: none; z-index: 21; padding: 6px var(--gutter); text-align: center; font-size: var(--t-footnote); font-weight: 500; color: var(--ink); background: color-mix(in srgb, var(--warn) 12%, var(--bg)); border-bottom: 1px solid var(--hairline); } /* ---------- one-line "Confirm your email" strip (a neutral banner) ---------- */ .vf-strip { display: flex; align-items: center; gap: 2px; border-radius: var(--r-md); padding-right: 2px; background: var(--fill); border: 0; } .vf-strip-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 4px 6px 12px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--t-footnote); text-align: left; border-radius: 12px; } .vf-strip-main > svg { color: var(--sub); flex: none; } .vf-strip-go { flex: none; font-weight: 600; color: var(--ink); } .vf-strip-x { flex: none; color: var(--sub); } /* ---------- first-run notification prompt ---------- */ .np { padding-top: 12px; } .np-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; background: var(--fill); color: var(--ink); } .np-picks { display: flex; flex-direction: column; gap: 4px; } .np-pick { min-height: 52px; } /* ---------- morning check-in (Readiness) ---------- */ .ci-card { scroll-margin-top: 12px; } .ci-done { gap: 6px; } /* ---------- onboarding: who's signed in, weight unit ---------- */ .ob-who { margin-top: 4px; overflow-wrap: anywhere; } .ob-unit { max-width: 360px; } .ob-event .chip { align-self: flex-start; } /* ---------- Program: your dates ---------- */ .pg-events { gap: 4px; } .pg-event { min-height: 44px; } .pg-event .grow { min-width: 0; overflow-wrap: anywhere; } .pg-mine .row { min-height: 40px; } /* ---------- Apple Health one-line status (Sleep tab, Run tab) ---------- */ .hs-line { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--card); color: var(--ink); font: inherit; font-size: var(--t-footnote); text-align: left; } .hs-line > svg { color: var(--bad); flex: none; } .hs-line .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .hs-toggle { padding-top: 4px; } .sl-manage { align-self: flex-start; text-align: left; } /* ---------- misc ---------- */ .home-event, .rr-card { cursor: pointer; } .home-injury .sub { margin: 0; } .act-run { gap: 10px; } .sq-unshared { margin: 0; } [data-section] { scroll-margin-top: 12px; } html.kb-open .wbar { display: none; } /* Fuel: the four ways to log food, named like the screens they open, on one line each at 375 px */ .fuel-log .btn { padding-left: 8px; padding-right: 8px; gap: 6px; font-size: 0.9063rem; white-space: nowrap; } .fuel-log .btn svg { width: 18px; height: 18px; } /* ---------- setup / onboarding (screens/onboarding.tsx, setup.tsx, setupsteps.tsx) — rollout 16 round 2 ---------- The base rules live in goals.css (shared with the goal picker); these load first, so they use the .ob / .page scope to win: neutral facts list and back chevron, a solid progress bar, quiet "More" sections. */ .ob .ob-progress { gap: 10px; } .ob .ob-progress-title { font-weight: 600; } .ob .ob-back { color: var(--ink); } .ob .ob-seg { gap: 4px; } .ob .ob-seg > span { height: 4px; } .ob .ob-seg > span.done, .ob .ob-seg > span.cur { background: var(--accent); } .ob .ob-skip { color: var(--sub); font-weight: 500; } .ob .ob-intro { gap: 16px; } .ob .ob-facts { padding: 4px 16px; gap: 0; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .ob .ob-facts li { padding: 12px 0; gap: 12px; font-size: var(--t-callout); line-height: 1.4; } .ob .ob-facts li + li { border-top: 1px solid var(--line); } .ob .ob-facts svg { color: var(--sub); margin-top: 1px; } .ob .ob-defaults { font-weight: 600; } .ob .ob-h2 { font-weight: 700; font-size: var(--t-title); letter-spacing: -0.02em; margin-top: 12px; } .ob .ob-title { gap: 6px; } .ob .ob-more { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-1); } .ob .ob-more > summary { font-weight: 600; min-height: 52px; padding: 0 16px; } .ob .ob-more > summary:active { background: var(--fill); } .ob .ob-more > .stack { padding: 2px 16px 16px; } .ob .ob-inline-err { border: 0; } .ob .ob-event { border-radius: var(--r-md); } .setup-flow .setup-actions { gap: 8px; margin-top: 8px; } .onboard-bar .ob-blocker { justify-content: center; text-align: center; } /* First-run notification prompt + the Today offer card (screens/notify.tsx) — rollout 16 round 2 */ .np-picks { gap: 0; } .np-pick + .np-pick { border-top: 1px solid var(--line); } .np-home { gap: 8px; } .np-home strong { font-weight: 600; } .np-card { gap: 10px; } .np-card .row strong { font-weight: 600; } /* Meal photos waiting for the AI (screens/pending.tsx, on Fuel): a plain card, rows divided by hairlines. */ .page .pend-row { border-top: 1px solid var(--line); } .page .pend-row strong.block { font-weight: 600; } /* ---------- Rollout 18 · Calm Coach: setup labels with an ⓘ ---------- */ .ob-lbl-row { display: flex; align-items: center; gap: 0; } .ob-lbl-row .info-dot { margin-block: -12px; } .ob .ob-facts li { align-items: center; min-height: 52px; padding-block: 8px; } .ob .ob-facts svg { margin-top: 0; } /* Rollout 18: the waiting photo's actions keep one line each (they wrap as a whole). */ .page .pend-row .row .btn { white-space: nowrap; padding-inline: 14px; } .page .pend-card > .small { margin: 0; color: var(--sub); } /* ========================================================================= Fuel (rollout 13): folded sections, one-tap water, log again, database badges, barcode scanning ========================================================================= */ /* ---------- Fuel tab (rollout 18, C · Calm Coach: like concepts/r18/png/c/fuel-*) ---------- */ .fuel { gap: 14px; } .fuel-targets { gap: 0; padding: 20px; } .fuel-hero { display: flex; align-items: center; gap: 20px; } .fuel-ring { flex: none; } .fuel-ring .score-ring .ring-inner b { font-size: 2.125rem; letter-spacing: -0.04em; } .fuel-ring .score-ring .ring-inner span { margin-top: 4px; } .fuel-hero-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .fuel-stat { flex-direction: column-reverse; gap: 2px; } .fuel-stat .stat-l { font-size: var(--t-callout); } .fuel-stat .stat-v { font-size: 1.375rem; letter-spacing: -0.02em; } .fuel-why { margin-top: 16px; } .fuel-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .fuel-macro { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fuel-macro-l { font-size: var(--t-footnote); color: var(--sub); font-weight: 500; } .fuel-macro-v { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } .fuel-macro-u { font-weight: 500; font-size: var(--t-footnote); color: var(--sub); letter-spacing: 0; } .fuel-macro .bar { margin-top: 6px; } .fuel-targets .fuel-check { margin-top: 14px; padding: 0; } /* "Show more" inside a card: a WhyLink pill (rollout 18) */ /* ---------- folded (non-core) sections: src/app/fuelsections.ts — rows in a grouped list ---------- */ .fuel-fold-head { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 18px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; } .fuel-fold-head:active { background: var(--fill); } .fuel-fold-head .lr-ico { width: 36px; height: 36px; } .fuel-fold-head .lr-value { color: var(--sub); font-size: var(--t-callout); } .fuel-fold-head .lr-chev { color: var(--faint); } /* ---------- calories follow your weight (§1.8): the change stays on the card; the next check is in the sheet ---------- */ .fuel-check { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; } .fuel-change { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-ctl); font-size: var(--t-footnote); font-weight: 500; line-height: 1.4; color: var(--ink); background: var(--fill); } .fuel-change svg { flex: none; margin-top: 1px; color: var(--sub); } .fuel-next { margin: 0; } .info-sheet .is-note + .fuel-next, .info-sheet .is-note + .is-note { margin-top: 6px; } /* ---------- log a meal (gold primary + four tiles) + log again ---------- */ .fuel-log { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .fuel-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 80px; padding: 10px 4px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-1); color: var(--ink); font: inherit; font-size: var(--t-footnote); font-weight: 500; text-align: center; transition: transform var(--dur-1) var(--ease-out); } .fuel-tile:active { transform: scale(0.97); } .fuel-tile svg { flex: none; color: var(--ink); } .fuel-tile span { max-width: 100%; overflow-wrap: anywhere; line-height: 1.2; } .recent-meals { display: flex; flex-direction: column; gap: 6px; } .recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .recent-row { display: flex; align-items: center; gap: 4px; padding: 6px 0; border-top: 1px solid var(--line); min-height: 64px; } .recent-row:first-child { border-top: 0; } .recent-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .recent-text .lr-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .recent-log { flex: none; width: 48px; height: 48px; } .recent-star { color: var(--faint, var(--sub)); } .recent-star.on { color: var(--ink); } .recent-star.on svg { fill: currentColor; } /* On the Fuel tab "Log again" is its own grouped list. */ /* ---------- today's food: one grouped list (meals + next meal) ---------- */ .fuel-food { display: flex; flex-direction: column; } .fuel-food .meal-row { gap: 0; padding: 4px 6px 4px 18px; border-bottom: 0; position: relative; } .fuel-food > * + *::before { content: ''; position: absolute; top: 0; right: 18px; left: 18px; height: 1px; background: var(--line); } .fuel-food .meal-open { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 8px 4px 8px 0; background: none; border: 0; color: var(--ink); text-align: left; font: inherit; } .meal-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .meal-text .lr-title { font-weight: 500; } .meal-kcal { font-size: var(--t-callout); color: var(--sub); font-variant-numeric: tabular-nums; flex: none; } .meal-items { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } .fuel-food .meal-row .iconbtn { color: var(--faint); } .fuel-food .empty { padding-block: 16px; } .fuel-food .fuel-fold-head { min-height: 64px; } .fuel-food .fuel-fold-head .small { font-size: var(--t-callout); } /* ---------- water (drops, C) ---------- */ .fuel-water { gap: 14px; } .fuel-water-head { align-items: center; flex-wrap: nowrap; } .fuel-water-l { display: inline-flex; align-items: center; gap: 0; min-height: 32px; margin: -6px 0 -4px; font-size: var(--t-callout); color: var(--sub); font-weight: 500; } .fuel-water-v { font-family: var(--display); font-weight: 650; font-size: 1.75rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; } .fuel-water-u { font-family: var(--body); font-weight: 500; font-size: var(--t-callout); color: var(--sub); letter-spacing: 0; } .water-quick { flex: none; min-width: 72px; } .info-dot.fuel-water-why { margin: -6px 0 -6px -4px; } .fuel-drops { display: flex; justify-content: space-between; gap: 2px; color: var(--track); } .fuel-drops span { display: inline-flex; } .fuel-drops .on { color: var(--info); } .fuel-drops .on svg { fill: currentColor; } /* ---------- AI result: where the numbers came from ---------- */ .src-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.03em; vertical-align: 1px; white-space: nowrap; } .src-usda { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-ink); } .src-ai { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn-ink); } .food-src-note { margin: 0; } /* ---------- barcode scanning ---------- */ .barcode-box { gap: 10px; } .scan-view { position: relative; display: flex; flex-direction: column; gap: 8px; } .scan-video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: #000; } .scan-frame { position: absolute; left: 12%; right: 12%; top: 30%; height: 24%; border: 3px solid var(--accent); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.25); pointer-events: none; } .product-form .card { margin: 0; } /* ---------- rollout 15: "Describe it instead" on the photo screen, correct an estimate in a sentence ---------- */ .food-fix { padding-top: 4px; } /* Meal picker on the logging screens: one segmented control (was a wrapping chip cluster). */ .meal-seg button { min-width: 0; padding: 0 4px; white-space: nowrap; } .food-recent .recent-meals > .label { color: var(--ink); font-size: var(--t-callout); } /* Friend codes (Squad + Settings) — rollout 16 round 2: neutral surfaces, ink text, one accent action per card. */ .fc-card { gap: 14px; } .fc-codebox { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fc-center { align-items: center; text-align: center; gap: 6px; } .fc-code { font-family: var(--display); font-weight: 700; font-size: 2.25rem; line-height: 1.1; letter-spacing: 0.02em; color: var(--ink); background: none; border: 0; padding: 2px 6px; margin: 0; border-radius: 10px; min-height: 44px; white-space: nowrap; font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; } .fc-code:active { background: var(--fill); } .fc-code-sm { font-size: 1.625rem; padding: 0; text-align: left; letter-spacing: 0.01em; } .fc-code-wait { color: var(--sub); font-size: var(--t-footnote); min-height: 44px; display: inline-flex; align-items: center; background: none; border: 0; padding: 0; text-align: left; } button.fc-code-wait { color: var(--ink); font-weight: 600; } .fc-btnlabel { display: inline-flex; align-items: center; gap: 6px; } /* Copy / Share next to the code: quiet neutral tiles (icon over a short label). */ .fc-iconbtn { flex: none; width: 56px; min-height: 52px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: var(--r-ctl); border: 0; background: var(--fill); color: var(--ink); font-size: var(--t-caption); font-weight: 600; padding: 0; transition: background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out); } .fc-iconbtn svg { width: 18px; height: 18px; } .fc-iconbtn:active { transform: scale(0.96); background: var(--fill-2); } .fc-iconbtn:disabled { opacity: 0.4; } .fc-compact .label { white-space: nowrap; } .fc-cancel { flex: none; } .btn .fc-btnlabel, .fc-add .btn > span { white-space: nowrap; } .fc-divider { height: 1px; background: var(--line); margin: 2px 0; } .fc-add { display: flex; flex-direction: column; gap: 10px; } .fc-add > .btn-ghost { align-self: center; } .fc-inputrow { display: flex; gap: 8px; align-items: stretch; } .fc-inputrow .btn { min-height: 50px; flex: none; padding: 0 18px; } .fc-input { flex: 1; min-width: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } .fc-input::placeholder { color: var(--faint); font-weight: 500; } .fc-msg { font-size: var(--t-footnote); font-weight: 600; color: var(--sub); margin: 0; } .fc-msg.fc-bad { color: var(--bad-ink); } .fc-found { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--fill); } /* Initials avatar: neutral (gold is never a decoration). */ .fc-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.01em; color: var(--ink); background: var(--fill-2); } .fc-friend { gap: 10px; } .fc-friend .iconbtn { color: var(--sub); margin: -8px -10px -8px 0; } .fc-friend > .small { margin: 0; } .fc-incoming { gap: 12px; } .fc-empty { gap: 6px; } .fc-empty .small { margin: 0; } /* Invite walkthrough (screens/invite.tsx, Squad with no friends yet): the two link buttons share one line. */ .inv-walk .inv-steps .btn-sm { padding-inline: 12px; } .inv-walk .inv-steps strong { font-weight: 600; } .inv-walk .inv-link { font-size: var(--t-caption); } /* ---------- Rollout 18 · Calm Coach ---------- */ .fc-label-row { display: inline-flex; align-items: center; gap: 0; } .fc-label-row .info-dot { margin-block: -12px; } .fc-friend > .compare { margin-top: 2px; } .fc-incoming .row:first-child { min-height: 44px; } .inv-walk { gap: 14px; } .inv-walk .card-head { margin-bottom: -4px; } .inv-walk .inv-steps { gap: 12px; } .inv-walk .inv-steps li { min-height: 28px; justify-content: center; } .inv-walk .inv-steps li::before { background: var(--fill); color: var(--sub); font-weight: 600; } .inv-walk .inv-link { font-family: inherit; font-size: var(--t-footnote); color: var(--sub); } /* ========================================================================= Fuel (stream C): bulking card, AI error card ========================================================================= */ /* ---------- bulking ---------- */ .bulk-card { gap: 10px; } .bulk-surplus { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .bulk-surplus-num { font-size: 2rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); } .bulk-target { display: flex; flex-direction: column; gap: 6px; } .bulk-meter { position: relative; height: 8px; border-radius: 99px; background: var(--track); margin-top: 2px; } .bulk-band { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: color-mix(in srgb, var(--good) 45%, transparent); } .bulk-dot { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid var(--card); background: var(--ink); box-shadow: var(--shadow-1); } .bulk-dot.on_track { background: var(--good); } .bulk-dot.slow, .bulk-dot.fast { background: var(--warn); } .bulk-dot.losing { background: var(--bad); } .bulk-scale { display: flex; justify-content: space-between; color: var(--sub); } .bulk-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bulk-style { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: var(--ink); padding: 10px 12px; border-radius: var(--r-md); background: var(--fill); border: 1.5px solid transparent; min-height: 44px; } .bulk-style.on { border-color: var(--sel); background: var(--card); } .bulk-style-name { font-weight: 600; font-size: 0.9375rem; } .bulk-style-kcal { font-weight: 600; font-size: 0.8125rem; color: var(--ink); } /* ---------- AI error ---------- */ .ai-err { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 9%, var(--card)); border: 0; } .ai-err-head { align-items: flex-start; } .ai-err-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-ink); } .ai-err-msg { font-weight: 600; font-size: 0.9375rem; line-height: 1.4; color: var(--ink); margin: 4px 0 0; } /* ========================================================================= Goals & onboarding (stream 2): goal picker, setup steps, setup reminder, mm:ss field ========================================================================= */ /* ---------- goal picker ---------- */ .goal-picker { display: flex; flex-direction: column; gap: 10px; } .goal-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 28px; } .goal-sum-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-callout); } .goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .goal-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 104px; padding: 12px 12px 12px 14px; text-align: left; font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-md, 14px); transition: transform 0.12s ease, border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease; } .goal-card:active { transform: scale(0.98); } .goal-card.on { border-color: var(--ink); background: var(--fill); box-shadow: 0 0 0 1px var(--ink) inset; } .goal-card.dim { opacity: 0.6; } .goal-card.wide { min-height: 64px; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; } .goal-card.wide { padding-right: 48px; } .goal-card.wide .goal-top { width: auto; margin-bottom: 0; } .goal-card.wide .goal-rank { position: absolute; right: 12px; top: 50%; margin-top: -13px; } .goal-card.wide .goal-hint { flex-basis: 100%; padding-left: 32px; margin-top: -2px; } .goal-card.goal-other:not(.on) { border-style: dashed; background: transparent; } .goal-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 4px; min-height: 26px; } .goal-ico { color: var(--sub); flex: none; } .goal-card.on .goal-ico { color: var(--ink); } .goal-title { font-weight: 600; font-size: var(--t-callout); line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; } .goal-hint { color: var(--sub); font-size: 0.8125rem; line-height: 1.3; } .goal-rank { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sel); color: var(--on-sel); font-weight: 700; font-size: var(--t-footnote); font-variant-numeric: tabular-nums; animation: goal-pop 0.18s ease-out; } .goal-rank.sm { width: 22px; height: 22px; font-size: 0.75rem; animation: none; } @keyframes goal-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .goal-other-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--fill); border: 0; border-radius: var(--r-md, 14px); } .goal-other-box input { background: var(--card); } .goal-other-box .chip { background: var(--card); } .goal-other-box .chip.on { background: var(--sel); color: var(--on-sel); } .goal-sugg { max-height: none; } .goal-note { margin-top: -6px; } /* ---------- onboarding ---------- */ .ob-progress { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; } .ob-progress-row { display: flex; align-items: center; gap: 4px; min-height: 44px; } .ob-progress-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ob-progress-title { color: var(--ink); font-weight: 600; } .ob-back { margin-left: -10px; color: var(--ink); } .ob-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; } .ob-seg > span { height: 5px; border-radius: 99px; background: var(--track); transition: background-color 0.25s ease; } .ob-seg > span.done { background: color-mix(in srgb, var(--ink) 35%, var(--track)); } .ob-seg > span.cur { background: var(--accent); } /* Skip is available on every step but deliberately quieter than Next. */ .ob-skip { flex: none; min-height: 44px; min-width: 56px; padding: 0 12px; margin-right: -8px; border: 0; border-radius: 999px; background: transparent; color: var(--sub); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; } .ob-skip:active { background: var(--fill); color: var(--ink); } .ob-intro { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; } .ob-facts { list-style: none; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); } .ob-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; line-height: 1.35; } .ob-facts svg { flex: none; color: var(--sub); margin-top: 1px; } .ob-defaults { align-self: flex-start; padding-inline: 0; text-align: left; font-size: 0.9375rem; } .ob-title { gap: 6px; } .ob-h2 { font-weight: 700; font-size: var(--t-title); line-height: 1.2; letter-spacing: -0.015em; margin-top: 8px; } .ob-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ob-pair > div:not(.stepper) { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ob-pair > .stepper { min-width: 0; } .ob-pair .stepper { gap: 4px; } .ob-pair .stepper .num { min-width: 0; flex: 1; font-size: 1.0625rem; white-space: nowrap; } .ob-pair .stepper { display: flex; } .ob-blocker { display: flex; align-items: flex-start; gap: 6px; color: var(--warn-ink); font-weight: 600; font-size: 0.875rem; line-height: 1.35; margin: 0; } .ob-blocker svg { flex: none; margin-top: 1px; } .ob-inline-err { color: var(--warn-ink); font-weight: 500; font-size: var(--t-footnote); padding: 10px 12px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--warn) 10%, var(--card)); border: 0; } .ob-more { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--card); } .ob-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px; list-style: none; cursor: pointer; font-weight: 600; font-size: 0.9375rem; border-radius: var(--r-md, 14px); } .ob-more > summary:active { background: var(--fill); } .ob-more > summary::-webkit-details-marker { display: none; } .ob-more-chev { color: var(--sub); transition: transform 0.15s ease; flex: none; } .ob-more[open] > summary .ob-more-chev { transform: rotate(90deg); } .ob-more > .stack { padding: 2px 14px 14px; } /* ---------- finish setup ---------- */ .setup-flow { padding-bottom: 8px; } .setup-actions { display: flex; gap: 10px; margin-top: 6px; } .setup-flow .ob-progress { margin-top: -4px; } .setup-done { padding-top: 24px; } /* ---------- mm:ss duration field ---------- */ .dur-row { display: flex; align-items: center; gap: 6px; } .dur-box { position: relative; display: block; width: 96px; } .dur-box input { width: 100%; min-height: 54px; padding: 8px 40px 8px 12px; text-align: right; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .dur-box input::placeholder { color: color-mix(in srgb, var(--sub) 55%, transparent); font-weight: 600; } .dur-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--sub); font-size: 0.8125rem; font-weight: 600; pointer-events: none; } .dur-colon { font-size: 1.625rem; font-weight: 600; color: var(--sub); line-height: 1; padding-bottom: 2px; } .dur-bad input[aria-invalid='true'] { border-color: var(--bad); } .ob-fast .btn { font-size: 0.9375rem; padding: 0 12px; } /* ---------- Rollout 13 · launch, billing, retention: Help & support, cancel sheet, invite friends, first-week preview on the paywall, "Set your starting maxes" on Today ---------- */ /* Settings › Help & support (screens/support.tsx) */ .sup-card { display: flex; flex-direction: column; gap: 12px; } .sup-addr { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -4px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .sup-mail { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .sup-faq { padding-top: 4px; padding-bottom: 4px; } .sup-q { padding: 4px 0; } .sup-q + .sup-q { border-top: 1px solid var(--line); } .sup-q summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; } .sup-q summary::-webkit-details-marker { display: none; } .sup-q summary::after { content: '+'; margin-left: auto; color: var(--faint); font-weight: 400; font-size: 1.25rem; } .sup-q[open] summary::after { content: '–'; } .sup-q p { margin: 0 0 10px; color: var(--sub); font-size: var(--t-callout); line-height: 1.45; } /* Paywall: "Your first week" (screens/paywall.tsx → FirstWeek; rows from src/app/firstweek.ts) */ .pw-week { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 14px 16px 12px; } .pw-week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .pw-week-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--sub); } .pw-week-list { list-style: none; margin: 0; padding: 0; } .pw-day { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; } .pw-day + .pw-day { border-top: 1px solid var(--line); } .pw-day-d { flex: none; width: 52px; font-weight: 500; font-size: var(--t-footnote); color: var(--sub); padding-top: 1px; } .pw-day.today .pw-day-d { color: var(--ink); font-weight: 700; } .pw-day-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pw-day-t { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pw-day.rest .pw-day-t { color: var(--sub); font-weight: 500; } .pw-day-test { padding: 1px 8px; border-radius: 999px; background: var(--fill); color: var(--ink); font-size: var(--t-caption); font-weight: 600; } .pw-day-x { font-size: var(--t-footnote); color: var(--sub); overflow-wrap: anywhere; } .pw-day-min { flex: none; font-size: var(--t-footnote); color: var(--sub); font-variant-numeric: tabular-nums; padding-top: 1px; } .pw-week-foot { margin: 6px 0 0; } /* Cancel flow (screens/cancelflow.tsx) and Settings › Subscription */ .subs-cancel { align-self: center; color: var(--sub); } .cf-sheet { gap: 12px; } .cf-head { display: flex; align-items: center; gap: 8px; } .cf-reasons { display: flex; flex-direction: column; gap: 0; } .cf-reason { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 2px; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; font: inherit; } .cf-reason:last-child { border-bottom: 0; } .cf-reason:active { background: var(--fill); } .cf-reason.on { font-weight: 600; } .cf-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--on-accent); } .cf-reason.on .cf-dot { background: var(--accent); border-color: var(--accent); } .cf-notewrap { display: flex; flex-direction: column; gap: 4px; } .cf-note { width: 100%; font: inherit; padding: 12px 14px; border-radius: var(--r-ctl); border: 1px solid transparent; background: var(--fill); color: var(--ink); resize: vertical; } .cf-offer { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--line); } .cf-offer strong { font-weight: 600; font-size: var(--t-headline); } .cf-offer .btn { margin-top: 6px; } .cf-offer p { margin: 0; } .cf-cancel { background: transparent; border-bottom: 0; } /* Admin › Subscriptions › Why people cancel (screens/adminretention.tsx) */ .adm-reasons { display: flex; flex-direction: column; gap: 8px; } .adm-reason-counts, .adm-reason-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .adm-reason-counts li { display: flex; gap: 8px; } .adm-reason-list li { padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; } /* Settings › Invite friends (screens/referral.tsx) */ .ref-card { display: flex; flex-direction: column; gap: 10px; } .ref-card p { margin: 0; } .ref-link { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: var(--r-ctl); background: var(--fill); color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all; } .ref-count { color: var(--sub); } /* Help & support — rollout 16 round 2 */ .sup-card > .row:first-child { align-items: flex-start; } .sup-card .sup-ico { margin-top: 2px; } .sup-card strong.block { font-weight: 600; } .sup-actions .btn { flex: 1 1 auto; white-space: nowrap; padding-inline: 14px; } .sup-faq { padding-block: 4px; gap: 0; } .sup-links { padding-inline: 4px; } /* ---------- Rollout 18 · Calm Coach ---------- */ .sup-title { display: flex; align-items: center; gap: 0; min-height: 28px; } .sup-title strong { font-weight: 600; } .sup-title .info-dot { margin-block: -10px; } .sup-card .sup-addr { margin: -4px 0 -2px; } .sup-card .small { margin: 0; color: var(--sub); } .set-list > .whylink.sup-q { border: 0; display: flex; width: 100%; align-self: stretch; justify-content: flex-start; gap: 14px; min-height: 56px; padding: 10px 18px; border-radius: 0; background: none; color: var(--ink); font-size: var(--t-body); font-weight: 500; text-align: left; line-height: 1.3; } .set-list > .whylink.sup-q > svg:first-child { color: var(--sub); } .set-list > .whylink.sup-q:active { transform: none; background: color-mix(in srgb, var(--ink) 4%, transparent); } .sup-faq > * + *::before { left: 52px !important; } .sup-links { text-align: center; color: var(--sub); } .sup-links a { color: var(--ink); font-weight: 600; } /* Paywall: "Your first week" — the title with its ⓘ */ .pw-week { padding: 16px 18px 10px; } /* Cancel sheet */ .cf-sheet .cf-reason { min-height: 52px; } .cf-offer strong { font-size: var(--t-headline); } .ref-card { gap: 12px; } .ref-card .row:first-child { min-height: 36px; } .ref-card > .small { margin: 0; color: var(--sub); } /* Rollout 14 — health data stays on the device: Settings → Your data "What's stored where" card, the sign-out choice and the one-time note (src/app/screens/healthdata.tsx). */ .hd-card .hd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 6px; } .hd-card .hd-cols > div { min-width: 0; } .hd-list { margin: 6px 0 0; padding-left: 18px; font-size: 0.875rem; line-height: 1.45; } .hd-list li { margin: 2px 0; overflow-wrap: anywhere; } .hd-move { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; } .hd-move .row { margin-top: 8px; } .hd-move label.btn { cursor: pointer; } .hd-move label.btn.is-disabled { opacity: 0.55; pointer-events: none; } .so-remove { margin: 8px 0 14px; align-items: flex-start; } .so-remove .switch { margin-top: 4px; flex: none; } .hd-note h2 { margin: 0; } .hd-note .sub { margin: 10px 0 16px; } @media (max-width: 380px) { .hd-card .hd-cols { grid-template-columns: 1fr; } } .hd-card { gap: 10px; } .hd-card > .row strong, .hd-move > strong { font-weight: 600; } .hd-card > .small { margin: 0; } .hd-card .hd-cols { margin: 2px 0 0; } .hd-list { color: var(--sub); font-size: var(--t-footnote); } /* Rollout 18: one line + "What's stored where" sheet */ .hd-card .card-head .lr-ico { width: 36px; height: 36px; } .hd-line { margin: 0; } .info-sheet .hd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0 0; } .info-sheet .hd-cols > div { min-width: 0; } .hd-links { margin: 0; } .hd-links a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; } @media (max-width: 380px) { .info-sheet .hd-cols { grid-template-columns: 1fr; } } /* ========================================================================= Apple Health sources (Garmin / Oura / Apple Watch via Health) + Today's steps line ========================================================================= */ .hs-list { display: flex; flex-direction: column; } .hs-row { padding: 8px 0; gap: 10px; min-height: 0; } .hs-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; flex: none; background: var(--fill); color: var(--ink); } .hs-help .steps { margin: 4px 0 0; font-size: 0.875rem; } .hs-help .btn { align-self: flex-start; margin-top: 10px; } /* Today → Today's training: steps / active calories + workouts from Apple Health */ .hs-today { display: flex; flex-direction: column; gap: 6px; } .hs-today-row { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--sub); font-variant-numeric: tabular-nums; } .hs-today-row strong { color: var(--ink); font-weight: 600; } .hs-today-row .hs-ico { width: 24px; height: 24px; } .rvo2 { margin-top: 10px; } .rvo2 strong { color: var(--ink); } /* Sleep tab › Apple Health: why last night isn't here (rollout 16, board #13). */ .hk-diag { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: var(--fill); border: 0; } .hk-diag .push-help { margin: 0; } /* "How did you sleep last night?" (Sleep tab and Today, rollout 16). */ .qs-card { display: flex; flex-direction: column; gap: 10px; } .qs-time { min-height: 44px; } /* Apple Health card (iPhone app): the cardio import reads as a line + its button under it; remove in red. */ .hs-card .hs-runs { flex-direction: column; align-items: stretch; gap: 8px; } .hs-card .hs-runs .btn { align-self: flex-start; } .hs-card .hs-remove { color: var(--bad-ink); } .hs-card .label { margin-top: 4px; } /* Rollout 18: card head (title + status), one line, "How it works" behind a text pill */ .hs-card { gap: 12px; } .hs-card .card-head { align-items: center; } .hs-card > .sub, .hs-card > .small { margin: 0; } .hs-card .whylink-text { align-self: flex-start; margin: -8px 0 -8px -2px; } .hs-card .sl-foot .whylink-text { margin: 0; } .hs-card .hs-runs .lr-title { font-weight: 500; } /* Rollout 20: the footer (How it works · Connected … · Remove imported data) wraps instead of squeezing the middle line to one letter per row on a 375–390 px phone. */ .hs-card .sl-foot { flex-wrap: wrap; row-gap: 2px; } .hs-card .sl-foot > .small.grow { min-width: 7.5rem; } /* home stream styles — Home (Today), Customize sheet, Appearance settings, brand */ /* ---------- brand ---------- */ .mark svg { display: block; } /* ---------- sign in ---------- */ .auth { gap: 18px; } .auth-hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 22px var(--gutter) 6px; overflow: hidden; isolation: isolate; } .auth-hero::before { content: ''; position: absolute; z-index: -1; inset: -40% -30% 10% 10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; } .auth-brand { display: flex; align-items: center; gap: 12px; } .auth-wordmark { font-weight: 750; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1; color: var(--ink); } .auth-title { font-family: var(--display); font-weight: 800; font-size: 2.75rem; line-height: 1; letter-spacing: -0.04em; margin-top: 18px; max-width: 9ch; text-wrap: balance; } .auth-lede { color: var(--sub); font-size: 1.0625rem; line-height: 1.45; max-width: 32ch; } .auth-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .auth-points li { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; } .auth-point-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); } .auth-card { gap: 16px; padding: 20px 18px; border-radius: var(--r-xl); box-shadow: var(--shadow-2), inset 0 1px 0 var(--hl); } @media (max-height: 740px) { /* Short phones: keep the form in view. */ .auth-hero { gap: 10px; padding-top: 12px; } .auth-title { font-size: 2.25rem; margin-top: 8px; } .auth-points { display: none; } } @media (min-width: 760px) { .auth-hero { padding-top: 40px; overflow: visible; } .auth-title { font-size: 3.25rem; } } /* ---------- home frame (Today: the reference screen for Calm Coach — DESIGN.md) ---------- */ .home { gap: 12px; } /* Header (ScreenHeader + mark): brand mark + date, round raised actions, then "Good afternoon, Alex". Cardio's header reuses .home-hello. */ .home-hello { padding-bottom: 4px; } .home-hello .display { overflow-wrap: anywhere; } .home-mark { box-shadow: none; } .home-slot { display: flex; flex-direction: column; } .home-slot > .section { margin-top: 8px; } .home-foot { display: flex; justify-content: center; padding-top: 6px; } .home-foot .btn { color: var(--sub); } .home-alert-icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--bad); color: var(--on-bad); flex: none; } /* Icon tile inside a card row (rest day, tonight, next event…): soft neutral. */ .home-tile-icon { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--fill); color: var(--ink); } .home-tile-icon.info { background: var(--fill); color: var(--ink); } .home-countdown { display: inline-flex; align-items: baseline; gap: 4px; } .home-countdown .num { font-weight: 650; font-size: 1.625rem; letter-spacing: -0.03em; color: var(--ink); } /* Readiness hero (C): the 128 px gold ring, band (21 w650) + one line, then the "Why 86?" pill; missing inputs as a quiet row of links (ux.css .rd-links). */ .home-readiness { gap: 16px; } .home-readiness .rd-open { gap: 18px; align-items: center; } .home-readiness .rd-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .home-readiness .h3 { font-size: 1.3125rem; font-weight: 650; letter-spacing: -0.022em; line-height: 1.2; } .home-readiness .rd-line { color: var(--sub); font-size: var(--t-callout); line-height: 1.42; } .home-readiness.rd-empty .score-ring b { color: var(--faint); font-weight: 500; } .home-readiness .whylink { margin-top: -2px; } @media (max-width: 359px) { .home-readiness .score-ring .ring { transform: scale(0.86); margin: -9px; } } /* Today's training (C): icon tile + title + meta, one gold "Start workout", then Change / Skip as soft pills. */ .home-train { gap: 10px; } .home-sess { display: flex; align-items: center; gap: 14px; min-width: 0; } .home-sess .h2 { font-size: 1.375rem; overflow-wrap: anywhere; } .home-sess .sub { margin-top: 2px; } .home-train .card { gap: 14px; } .home-train .pair .btn { padding-inline: 12px; } .home-train .pair .btn.home-change { display: inline-flex; min-height: var(--btn-h); align-self: stretch; padding-block: 6px; gap: 8px; } .home-change-link { align-self: flex-start; color: var(--sub); font-weight: 500; padding-inline: 6px; } /* Steps + Active: rollout 24 merged them into one "Steps and activity" card (screens/todaycards.tsx, r24-daily.css). */ /* Daily checklist (C): title + "1 of 6" inside the card; three across; soft circles, a gold arc as each fills, sage when done. */ .home-check { gap: 16px; } .home-check .rings { grid-template-columns: repeat(3, 1fr); row-gap: 16px; padding-block: 2px; } .home-check .ringcell { color: var(--sub); gap: 8px; } .home-check .ringcell .ring { color: var(--ink); border-radius: 50%; background: var(--fill); } .home-check .ringcell.done .ring { background: var(--good-soft); } .home-check .ringcell.done .ring-arc { opacity: 0 !important; } .home-check .ringcell .small { font-weight: 500; color: var(--sub); } .home-check .ringcell circle:first-child { stroke: transparent; } /* Quick question + rows (schedule) — C's plain card with chips, and a grouped list of one-line rows. */ .home-question .chips { gap: 10px; } .home-question .chip { min-height: 48px; padding: 0 18px; } .home-rows .listrow { min-height: 60px; } /* ---------- customize sheet ---------- */ .home-sheet { gap: 14px; } .home-sheet-head { display: flex; align-items: flex-start; gap: 8px; } .home-sheet-head .iconbtn { margin: -8px -8px 0 0; } .home-edit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--card); } .home-edit-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; min-height: 60px; border-bottom: 1px solid var(--line); background: var(--card); transition: opacity 0.15s ease; } .home-edit-row:last-child { border-bottom: 0; } .home-edit-row.off .home-edit-text, .home-edit-row.off .home-edit-icon { opacity: 0.45; } .home-edit-icon { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--fill); color: var(--ink); } .home-edit-text .lr-title { font-size: 0.9375rem; display: block; } .home-edit-text .small { font-size: 0.8125rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-edit-toggle { min-height: 44px; flex: none; gap: 0; } .home-edit-toggle.locked .switch { opacity: 0.45; } /* ---------- settings: appearance ---------- */ .appear-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; } .appear-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; } .appear-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; min-height: 44px; color: var(--sub); font-size: 0.8125rem; font-weight: 600; } .appear-dot { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); transition: box-shadow 0.15s ease, transform 0.12s ease; } .appear-swatch:active .appear-dot { transform: scale(0.94); } .appear-swatch.on { color: var(--ink); font-weight: 700; } .appear-swatch.on .appear-dot { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--sw); } .set-tabrow { display: flex; align-items: center; gap: 12px; } .set-tabrow .home-tile-icon { width: 36px; height: 36px; border-radius: 11px; } .auth-card .seg button { white-space: nowrap; font-size: 0.9375rem; min-width: 0; } /* ---------- settings: "More settings" disclosure ---------- */ .set-diag { padding: 4px 4px 0; font-size: 0.75rem; overflow-wrap: anywhere; } /* ---------- settings: notifications ---------- */ .push-result { padding: 10px 12px; border-radius: var(--r-sm); font-weight: 600; font-size: 0.875rem; } .push-result.ok { color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line)); } .push-result.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line)); } .push-help-toggle { align-self: flex-start; } .push-help { margin: -6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--sub); font-size: 0.875rem; } /* Settings › Notifications status steps (rollout 16, board #11). */ .push-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card2); } .push-step { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .push-step:last-child { border-bottom: 0; } .push-step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem; font-weight: 800; background: var(--surface-3); color: var(--sub); } .push-step.done .push-step-n { background: color-mix(in srgb, var(--good) 18%, var(--card)); color: var(--good); } .push-step.bad .push-step-n { background: color-mix(in srgb, var(--bad) 16%, var(--card)); color: var(--bad); } .push-step-t { display: block; font-weight: 700; font-size: 0.9375rem; } .push-step.bad .push-step-t { color: var(--bad-ink); } .push-devices { margin-top: -4px; } /* Leaflet 1.9.4 map styles (node_modules/leaflet/dist/leaflet.css), trimmed for the Run tab maps: no layers control, no default marker icons, no VML — so nothing here loads an image. BSD-2-Clause, (c) Vladimir Agafonkin, (c) CloudMade. */ /* required styles */ .leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { position: absolute; left: 0; top: 0; } .leaflet-container { overflow: hidden; } .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; } /* Prevents IE11 from highlighting tiles in blue */ .leaflet-tile::selection { background: transparent; } /* Safari renders non-retina tile on retina better with this, but Chrome is worse */ .leaflet-safari .leaflet-tile { image-rendering: -webkit-optimize-contrast; } /* hack that prevents hw layers "stretching" when loading new tiles */ .leaflet-safari .leaflet-tile-container { width: 1600px; height: 1600px; -webkit-transform-origin: 0 0; } .leaflet-marker-icon, .leaflet-marker-shadow { display: block; } /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ .leaflet-container .leaflet-overlay-pane svg { max-width: none !important; max-height: none !important; } .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer, .leaflet-container .leaflet-tile { max-width: none !important; max-height: none !important; width: auto; padding: 0; } .leaflet-container img.leaflet-tile { /* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */ mix-blend-mode: plus-lighter; } .leaflet-container.leaflet-touch-zoom { -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; } .leaflet-container.leaflet-touch-drag { -ms-touch-action: pinch-zoom; /* Fallback for FF which doesn't support pinch-zoom */ touch-action: none; touch-action: pinch-zoom; } .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { -ms-touch-action: none; touch-action: none; } .leaflet-container { -webkit-tap-highlight-color: transparent; } .leaflet-container a { -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); } .leaflet-tile { filter: inherit; visibility: hidden; } .leaflet-tile-loaded { visibility: inherit; } .leaflet-zoom-box { width: 0; height: 0; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 800; } /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ .leaflet-overlay-pane svg { -moz-user-select: none; } .leaflet-pane { z-index: 400; } .leaflet-tile-pane { z-index: 200; } .leaflet-overlay-pane { z-index: 400; } .leaflet-shadow-pane { z-index: 500; } .leaflet-marker-pane { z-index: 600; } .leaflet-tooltip-pane { z-index: 650; } .leaflet-popup-pane { z-index: 700; } .leaflet-map-pane canvas { z-index: 100; } .leaflet-map-pane svg { z-index: 200; } /* control positioning */ .leaflet-control { position: relative; z-index: 800; pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ pointer-events: auto; } .leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; } .leaflet-top { top: 0; } .leaflet-right { right: 0; } .leaflet-bottom { bottom: 0; } .leaflet-left { left: 0; } .leaflet-control { float: left; clear: both; } .leaflet-right .leaflet-control { float: right; } .leaflet-top .leaflet-control { margin-top: 10px; } .leaflet-bottom .leaflet-control { margin-bottom: 10px; } .leaflet-left .leaflet-control { margin-left: 10px; } .leaflet-right .leaflet-control { margin-right: 10px; } /* zoom and fade animations */ .leaflet-fade-anim .leaflet-popup { opacity: 0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { opacity: 1; } .leaflet-zoom-animated { -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } svg.leaflet-zoom-animated { will-change: transform; } .leaflet-zoom-anim .leaflet-zoom-animated { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); transition: transform 0.25s cubic-bezier(0,0,0.25,1); } .leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile { -webkit-transition: none; -moz-transition: none; transition: none; } .leaflet-zoom-anim .leaflet-zoom-hide { visibility: hidden; } /* cursors */ .leaflet-interactive { cursor: pointer; } .leaflet-grab { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .leaflet-crosshair, .leaflet-crosshair .leaflet-interactive { cursor: crosshair; } .leaflet-popup-pane, .leaflet-control { cursor: auto; } .leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive, .leaflet-dragging .leaflet-marker-draggable { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* marker & overlays interactivity */ .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container { pointer-events: none; } .leaflet-marker-icon.leaflet-interactive, .leaflet-image-layer.leaflet-interactive, .leaflet-pane > svg path.leaflet-interactive, svg.leaflet-image-layer.leaflet-interactive path { pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ pointer-events: auto; } /* visual tweaks */ .leaflet-container { background: #ddd; outline-offset: 1px; } .leaflet-container a { color: #0078A8; } .leaflet-zoom-box { border: 2px dotted #38f; background: rgba(255,255,255,0.5); } /* general typography */ .leaflet-container { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; font-size: 0.75rem; line-height: 1.5; } /* general toolbar styles */ .leaflet-bar { box-shadow: 0 1px 5px rgba(0,0,0,0.65); border-radius: 4px; } .leaflet-bar a { background-color: #fff; border-bottom: 1px solid #ccc; width: 26px; height: 26px; line-height: 26px; display: block; text-align: center; text-decoration: none; color: black; } .leaflet-bar a, .leaflet-control-layers-toggle { background-position: 50% 50%; background-repeat: no-repeat; display: block; } .leaflet-bar a:hover, .leaflet-bar a:focus { background-color: #f4f4f4; } .leaflet-bar a:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .leaflet-bar a:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; } .leaflet-bar a.leaflet-disabled { cursor: default; background-color: #f4f4f4; color: #bbb; } .leaflet-touch .leaflet-bar a { width: 30px; height: 30px; line-height: 30px; } .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } .leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } /* zoom control */ .leaflet-control-zoom-in, .leaflet-control-zoom-out { font: bold 18px 'Lucida Console', Monaco, monospace; text-indent: 1px; } .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { font-size: 22px; } /* attribution and scale controls */ .leaflet-container .leaflet-control-attribution { background: #fff; background: rgba(255, 255, 255, 0.8); margin: 0; } .leaflet-control-attribution, .leaflet-control-scale-line { padding: 0 5px; color: #333; line-height: 1.4; } .leaflet-control-attribution a { text-decoration: none; } .leaflet-control-attribution a:hover, .leaflet-control-attribution a:focus { text-decoration: underline; } .leaflet-attribution-flag { display: inline !important; vertical-align: baseline !important; width: 1em; height: 0.6669em; } .leaflet-left .leaflet-control-scale { margin-left: 5px; } .leaflet-bottom .leaflet-control-scale { margin-bottom: 5px; } .leaflet-control-scale-line { border: 2px solid #777; border-top: none; line-height: 1.1; padding: 2px 5px 1px; white-space: nowrap; -moz-box-sizing: border-box; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); text-shadow: 1px 1px #fff; } .leaflet-control-scale-line:not(:first-child) { border-top: 2px solid #777; border-bottom: none; margin-top: -2px; } .leaflet-control-scale-line:not(:first-child):not(:last-child) { border-bottom: 2px solid #777; } .leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { box-shadow: none; } .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { border: 2px solid rgba(0,0,0,0.2); background-clip: padding-box; } /* popup */ .leaflet-popup { position: absolute; text-align: center; margin-bottom: 20px; } .leaflet-popup-content-wrapper { padding: 1px; text-align: left; border-radius: 12px; } .leaflet-popup-content { margin: 13px 24px 13px 20px; line-height: 1.3; font-size: 13px; font-size: 1.08333em; min-height: 1px; } .leaflet-popup-content p { margin: 17px 0; margin: 1.3em 0; } .leaflet-popup-tip-container { width: 40px; height: 20px; position: absolute; left: 50%; margin-top: -1px; margin-left: -20px; overflow: hidden; pointer-events: none; } .leaflet-popup-tip { width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; pointer-events: auto; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: white; color: #333; box-shadow: 0 3px 14px rgba(0,0,0,0.4); } .leaflet-container a.leaflet-popup-close-button { position: absolute; top: 0; right: 0; border: none; text-align: center; width: 24px; height: 24px; font: 16px/24px Tahoma, Verdana, sans-serif; color: #757575; text-decoration: none; background: transparent; } .leaflet-container a.leaflet-popup-close-button:hover, .leaflet-container a.leaflet-popup-close-button:focus { color: #585858; } .leaflet-popup-scrolled { overflow: auto; } .leaflet-oldie .leaflet-popup-content-wrapper { -ms-zoom: 1; } .leaflet-oldie .leaflet-popup-tip { width: 24px; margin: 0 auto; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); } .leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip { border: 1px solid #999; } /* div icon */ .leaflet-div-icon { background: #fff; border: 1px solid #666; } /* Tooltip */ /* Base styles for the element that has a tooltip */ .leaflet-tooltip { position: absolute; padding: 6px; background-color: #fff; border: 1px solid #fff; border-radius: 3px; color: #222; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } .leaflet-tooltip.leaflet-interactive { cursor: pointer; pointer-events: auto; } .leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { position: absolute; pointer-events: none; border: 6px solid transparent; background: transparent; content: ""; } /* Directions */ .leaflet-tooltip-bottom { margin-top: 6px; } .leaflet-tooltip-top { margin-top: -6px; } .leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before { left: 50%; margin-left: -6px; } .leaflet-tooltip-top:before { bottom: 0; margin-bottom: -12px; border-top-color: #fff; } .leaflet-tooltip-bottom:before { top: 0; margin-top: -12px; margin-left: -6px; border-bottom-color: #fff; } .leaflet-tooltip-left { margin-left: -6px; } .leaflet-tooltip-right { margin-left: 6px; } .leaflet-tooltip-left:before, .leaflet-tooltip-right:before { top: 50%; margin-top: -6px; } .leaflet-tooltip-left:before { right: 0; margin-right: -12px; border-left-color: #fff; } .leaflet-tooltip-right:before { left: 0; margin-left: -12px; border-right-color: #fff; } /* Printing */ @media print { /* Prevent printers from removing background-images of controls. */ .leaflet-control { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* Admin tools → Accounts (rollout 13): looked-up account and the moderation log. */ .adm-account { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: var(--card2); } .adm-account strong { overflow-wrap: anywhere; } .adm-modlog { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; } .adm-modlog li { overflow-wrap: anywhere; } /* ---------- Feedback board + thread (screens/feedback.tsx) — rollout 16 round 2 ---------- Base rules are in styles.css (.fb-*); these refine them for the board: quiet cards, replies as plain rows, a neutral "official" tag. */ .fb-card { gap: 10px; } .fb-card .fb-text { font-size: var(--t-body); line-height: 1.45; } .fb-card.fb-new { border-color: var(--line-2); } .fb-sort { flex: none; } .fb-sort button { padding-inline: 14px; min-width: 64px; white-space: nowrap; } .fb-count { color: var(--sub); } .fb-count strong { color: var(--ink); font-weight: 600; } .fb-vote { font-size: var(--t-callout); } .fb-meta { color: var(--sub); } .fb-who { color: var(--sub); } .fb-body { font-size: var(--t-headline); line-height: 1.5; font-weight: 400; } .fb-replies { display: flex; flex-direction: column; padding-block: 4px; gap: 0; } .fb-replies .fb-reply { background: transparent; border: 0; border-radius: 0; padding: 12px 0; gap: 4px; } .fb-replies .fb-reply + .fb-reply { border-top: 1px solid var(--line); } .fb-replies .fb-reply.mine { background: transparent; } .fb-replies .fb-reply strong { font-weight: 600; } .fb-admin-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--fill); color: var(--ink); font-size: var(--t-caption); font-weight: 600; vertical-align: 1px; } .fb-replybox textarea { min-height: 52px; } .fb-replybox .btn { flex: none; } .fb-verify { background: var(--fill); } .fb-sheet .chips .chip { min-height: 44px; } .fb-sheet textarea { background: var(--fill); } /* ---------- Rollout 18 · Calm Coach ---------- */ .fb-head { display: flex; flex-direction: column; gap: 6px; } .fb-head .sub { margin: 0; color: var(--sub); } .fb-replies-h.label { font-size: var(--t-headline); font-weight: 600; color: var(--ink); padding-inline: 6px; margin-top: 6px; } .fb-card { padding-block: 16px; } /* Multisport: swim / bike / brick badges, set logging, "Which sports?" picker */ .ms-ico { flex: none; display: block; } .ms-dayline { flex-wrap: wrap; } .ms-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 6px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; line-height: 1.2; white-space: nowrap; margin-right: 2px; background: color-mix(in srgb, var(--badge) 16%, transparent); color: var(--badge); } .ms-badge-t { margin-left: 1px; } .ms-swim { --badge: var(--info-ink); } .ms-bike { --badge: var(--warn-ink); } .ms-run { --badge: var(--good-ink); } .ms-brick { --badge: var(--ink); } /* Day preview: brick parts */ .ms-exname { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; } .ms-part { font-size: 0.75rem; font-weight: 600; color: var(--sub); white-space: nowrap; } .ms-part.block { display: block; margin-bottom: 6px; } /* Set logging: target on top, inputs under it */ .ms-setrow { align-items: flex-start; padding: 10px 0; } .ms-setrow .setno { padding-top: 2px; } .ms-setrow .setcheck { margin-top: 4px; } .ms-inputs { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; } .ms-in { display: inline-flex; align-items: center; gap: 6px; } .ms-in input.mini { width: 76px; } .ms-in input.mini.time { width: 84px; } .ms-setrow.done .ms-in input { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); } /* "Which sports?" picker (GoalPicker) */ .ms-picker { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--fill); border: 0; } .ms-picker .goal-note { margin-top: -6px; } .ms-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ms-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 0.875rem; font-weight: 500; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .ms-chip.on { border-color: var(--sel); background: var(--sel); color: var(--on-sel); } .ms-chip.on .ms-ico { color: var(--on-sel); } .ms-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Rollout 8: email code entry, mail buttons, admin tools (App health, Usage, Pro grants), the Pro placeholder. */ /* 6-digit code: six boxes over one real input (iOS one-time-code autofill + paste). */ .otp { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; cursor: text; } .otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 1rem; color: transparent; background: transparent; caret-color: transparent; z-index: 1; } .otp-box { height: 52px; border-radius: var(--r-ctl); border: 1px solid transparent; background: var(--fill); display: flex; align-items: center; justify-content: center; font: 600 1.5rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; } .otp-box.full { border-color: var(--line-2); } .otp.focus .otp-box.cur { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .otp.off { opacity: 0.6; } @media (max-width: 360px) { .otp { gap: 5px; } .otp-box { height: 46px; font-size: 1.3125rem; } } .vf-code .btn { width: 100%; } .vf-spam { margin: 0; } .vf-mail { flex-wrap: wrap; } .vf-mail-btn { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .fb-verify .vf-code, .fb-verify .vf-mail { margin: 8px 0; } /* Admin tools */ .ad-list { display: grid; gap: 10px; } .ad-err { display: grid; gap: 4px; } .ad-err-msg { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.4; overflow-wrap: anywhere; color: var(--ink); } .ad-meta { color: var(--sub); font-size: 0.8125rem; } .ad-count { font: 700 1.25rem/1 var(--display); letter-spacing: -0.02em; color: var(--ink); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; } .ad-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ad-kpi { background: var(--fill); border-radius: var(--r-ctl); padding: 12px 10px; text-align: center; } .ad-kpi strong { display: block; font: 700 1.375rem/1.15 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .ad-kpi span { font-size: 0.75rem; color: var(--sub); } .ad-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .ad-table th { text-align: left; font-weight: 500; color: var(--sub); font-size: var(--t-caption); padding: 8px 6px; border-bottom: 1px solid var(--line); } .ad-table th.num, .ad-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ad-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; } .ad-table th button { all: unset; cursor: pointer; } .ad-table th button[aria-pressed='true'] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .ad-bar { height: 4px; border-radius: 2px; background: var(--ink); margin-top: 6px; opacity: 0.35; } /* The owner dashboard (rollout 16, liftready.app/admin — screens/owner.tsx). Desktop first: a wide page with KPI grids and two-column cards; on a phone everything stacks, the tab row scrolls sideways inside itself and wide tables scroll inside their card (never the page). */ .page-owner { max-width: 1180px; } /* The app is a 640 px column on wide screens; the dashboard uses the whole window. */ @media (min-width: 760px) { .shell:has(.page-owner) { left: 0; right: 0; border-inline: 0; box-shadow: none; } .page-owner { padding-inline: 32px; } } .ow { gap: 16px; } /* Rollout 16 redesign: a quiet top bar (brand · who's signed in · Sign out) over a hairline; on a phone the account line drops under the brand so Sign out stays on the first row. */ .ow-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 0 12px; border-bottom: 1px solid var(--hairline); } .ow-head .site-brand { order: 1; flex: 1 1 auto; } .ow-head-main { order: 3; flex: 1 1 100%; min-width: 0; } .ow-head-main .small { color: var(--sub); } .ow-head-main .display { font-size: 1.75rem; } .ow-head-actions { order: 2; display: flex; gap: 8px; flex-wrap: wrap; } @media (min-width: 760px) { .ow-head .site-brand { flex: none; } .ow-head-main { order: 2; flex: 1 1 260px; padding-left: 16px; border-left: 1px solid var(--line); } .ow-head-actions { order: 3; } } /* Rollout 16b, the admin console: a left navigation beside the panel on a wide window; on a phone the navigation is a row of tabs that scrolls sideways inside itself. */ .ow-console { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .ow-nav { min-width: 0; } .ow-tabs { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .ow-tabs::-webkit-scrollbar { display: none; } .ow-tabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--sub); font-weight: 500; font-size: 0.9375rem; white-space: nowrap; text-align: left; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .ow-tabs button:hover { color: var(--ink); } .ow-tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } .ow-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; } .ow-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--sel); color: var(--on-sel); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; } @media (min-width: 900px) { .ow-console { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: 32px; } .ow-nav { position: sticky; top: 16px; padding-top: 4px; } .ow-tabs { flex-direction: column; gap: 2px; overflow: visible; border-bottom: 0; margin: 0; padding: 0; } .ow-tabs button { width: 100%; justify-content: space-between; min-height: 44px; padding: 0 12px; border-bottom: 0; border-radius: var(--r-sm); } .ow-tabs button:hover { background: var(--fill); } .ow-tabs button.on { background: var(--fill); } .ow-tabs button.ow-group-start { margin-top: 12px; position: relative; } .ow-tabs button.ow-group-start::before { content: ''; position: absolute; left: 12px; right: 12px; top: -7px; border-top: 1px solid var(--line); } } /* The console's sign-in, confirm-your-email and waiting screens (screens/console.tsx): a centered card, nothing else. */ .console-gate { max-width: 440px; margin: 0 auto; padding-top: 24px; } .console-gate .site-intro { display: flex; justify-content: center; } .console-card { display: flex; flex-direction: column; gap: 12px; } .console-card .display { font-size: 1.5rem; } .console-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; } .console-links .linkbtn, .console-card > .linkbtn { min-height: 44px; } /* Console › Moderation (screens/consolepanels.tsx). */ .cm-post .fd-text { margin: 0; } .cm-comments { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .cm-comments li { border-top: 1px solid var(--grid); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; } .cm-comments li.cm-hidden .cm-text { color: var(--sub); } .cm-text { margin: 0; overflow-wrap: anywhere; } /* The "this is an admin account" screen in the app (main.tsx). */ .admin-account { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 420px; margin: 0 auto; } .ow-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .ow-h2 { font: 700 var(--t-title)/1.25 var(--display); letter-spacing: -0.02em; margin: 0; } .ow-h3 { font-size: var(--t-headline); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; } .ow-h4 { font-size: var(--t-footnote); font-weight: 600; color: var(--sub); margin: 16px 0 6px; } /* The Analytics / Feedback sub-screens keep their own page title: in the console it's a section title. */ .ow-panel .display { font-size: var(--t-title); line-height: 1.25; letter-spacing: -0.02em; } .ow-bar-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; } .ow-range { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; } .ow-seg { overflow-x: auto; scrollbar-width: none; } .ow-seg button { flex: none; padding: 0 12px; white-space: nowrap; min-height: 40px; font-size: 0.875rem; } /* Money out: Expenses / AI costs (rollout 20) — as wide as its two buttons. */ .ow-moneyout { align-self: flex-start; max-width: 100%; } .ow-code { white-space: nowrap; } .ow-custom { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; } .ow-custom .field { flex: 1 1 140px; } .ow-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .ow-kpi { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; box-shadow: var(--shadow-1); } .ow-kpi-label { font-size: var(--t-footnote); font-weight: 500; color: var(--sub); } .ow-kpi strong { font: 700 1.625rem/1.15 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-bottom: 2px; } .ow-kpi.ow-bad strong { color: var(--bad-ink); } .ow-kpi.ow-good strong { color: var(--good-ink); } .ow-def { font-size: var(--t-caption); color: var(--faint); line-height: 1.4; } .ow-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; align-items: start; } .ow-grid2 > * { min-width: 0; } .ow-chart { margin: 0; display: flex; flex-direction: column; gap: 6px; } .ow-chart figcaption { font-weight: 600; font-size: var(--t-callout); } .ow-chart-plot { position: relative; padding-top: 16px; } .ow-chart-plot svg { display: block; width: 100%; height: 140px; overflow: visible; } .ow-chart-max { position: absolute; top: 0; left: 0; font-size: 0.75rem; color: var(--sub); font-variant-numeric: tabular-nums; } .ow-chart-empty { position: absolute; inset: 16px 0 0; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; color: var(--sub); text-align: center; } .ow-chart-x { display: flex; justify-content: space-between; gap: 8px; font-size: 0.75rem; color: var(--sub); } .ow-grid { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; } .ow-axis { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; } .ow-bar { fill: var(--accent); } .ow-bar-neg { fill: var(--bad); } .ow-table-wrap { margin-inline: -4px; } .ow-table-wrap:focus-visible { outline: 2px solid var(--focus); border-radius: 8px; } .ow-table th { white-space: nowrap; } .ow-table td .pill { margin-left: 6px; } .ow-empty { padding: 8px 0; } .ow-email { overflow-wrap: anywhere; } .ow-statement { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .ow-statement th { text-align: left; font-weight: 400; padding: 8px 0; color: var(--ink); } .ow-statement td { text-align: right; padding: 8px 0 8px 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ow-statement tr { border-bottom: 1px solid var(--line); } .ow-statement tr.ow-strong th, .ow-statement tr.ow-strong td { font-weight: 600; } .ow-statement tr.ow-total th, .ow-statement tr.ow-total td { font-weight: 700; font-size: var(--t-headline); border-top: 1px solid var(--line-2); padding-top: 10px; } .ow-notes { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; } .ow-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .ow-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ow-chips .chip { min-height: 40px; padding: 0 14px; font-size: 0.875rem; } .ow-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; } .ow-filter-row .field { flex: 1 1 200px; } .ow-toggle { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; font-size: 0.9375rem; } .ow-toggle input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--accent); } .ow-toggles { display: flex; flex-direction: column; } .ow-form { display: flex; flex-direction: column; gap: 12px; } .ow-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px 12px; align-items: start; } .ow-receipt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .ow-receipt label.btn { cursor: pointer; } .ow-receipt-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); } .ow-receipt-sheet { max-width: 720px; } .ow-receipt-img { width: 100%; height: auto; border-radius: var(--r-sm); background: #fff; } .ow-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ow-row-actions { display: inline-flex; gap: 10px; white-space: nowrap; } .ow-row-actions .linkbtn, .ow-table .linkbtn { min-height: 36px; padding: 4px 2px; } .ow-danger { color: var(--bad-ink) !important; } .ow-sugs, .ow-admins, .ow-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .ow-sugs li, .ow-admins li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); } .ow-sugs .grow, .ow-admins .grow { flex: 1 1 220px; min-width: 0; } .ow-admins .pill { margin-left: 8px; } .ow-log li { padding: 8px 0; border-bottom: 1px solid var(--line); } .ow-sugs li:last-child, .ow-admins li:last-child, .ow-log li:last-child { border-bottom: 0; } .ow-change { color: var(--faint); overflow-wrap: anywhere; } .ow-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px 12px; margin: 8px 0; } .ow-cat { display: flex; gap: 6px; align-items: flex-end; } .ow-cat .field { flex: 1; } .ow-owners { margin-top: 10px; } .ow-owners summary { cursor: pointer; font-weight: 600; color: var(--ink); min-height: 44px; display: flex; align-items: center; } .ow-owner { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 8px; } .ow-owner .field { flex: 1 1 140px; } .ow-taxpick { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; } .ow-taxpick .field { width: 120px; } .ow-sync { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .ow-stripe-note strong { margin-bottom: 4px; } @media (max-width: 560px) { .ow-head-main .display { font-size: 1.5rem; } .ow-kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .ow-kpi { padding: 12px; } .ow-kpi strong { font-size: 1.25rem; } .ow-bar-top { align-items: stretch; flex-direction: column; } .ow-range .ow-seg { display: grid; grid-template-columns: 1fr 1fr; } } /* Print / save as PDF (Tax tab): just the report. */ @media print { .ow-noprint, .ow-tabs, .ow-nav, .ow-head-actions, .toast, .fab, .sheet-backdrop { display: none !important; } .shell, .shell-main, .scroller, .page { position: static !important; height: auto !important; max-height: none !important; overflow: visible !important; } .page-owner { max-width: none; padding: 0; } .ow-console { display: block; } .card, .ow-kpi { box-shadow: none !important; break-inside: avoid; } body, .page { background: #fff !important; color: #000 !important; } } /* Rollout 21 — the team switch (screens/consoleteam.tsx) and Optimize (screens/consoleoptimize.tsx). Tokens only, so light and dark both work; numbers stay in text, bars and heat are just emphasis. */ .ow-team { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--info-soft); border: 1px solid var(--hairline); } .ow-team.on { background: var(--warn-soft); } .ow-team-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; } .ow-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 0.9375rem; font-weight: 500; } .ow-switch input { width: 20px; height: 20px; accent-color: var(--accent); } .op-share { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; } .op-share-bar { flex: 1 1 60px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; min-width: 40px; } .op-share-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .op-share-num { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; } /* --h = share 0…1: the busier that part of the day, the stronger the tint. */ .op-heat { display: inline-block; min-width: 3.4em; padding: 2px 6px; border-radius: var(--r-xs); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--accent) calc(var(--h, 0) * 55%), transparent); } .op-kpis2 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .op-unseen { overflow-wrap: anywhere; color: var(--sub); } /* Optimize tables scroll sideways on a phone: the first column keeps whole words instead of breaking mid-word. */ .op .ow-table th:first-child, .op .ow-table td:first-child { min-width: 9.5em; overflow-wrap: normal; word-break: normal; } /* ---------- Paywall (src/app/screens/paywall.tsx) and Settings → Subscription (screens/subscription.tsx) ---------- */ .page-paywall { padding-bottom: calc(32px + var(--safe-b)); } .pw { display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin: 0 auto; width: 100%; } .pw-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 12px 4px 4px; } .pw-hero .display { font-size: var(--t-large); max-width: 17ch; } .pw-nowrap { white-space: nowrap; } .pw-hero .sub { max-width: 34ch; } .pw-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-ink); font-weight: 600; font-size: var(--t-footnote); } .pw-features { list-style: none; margin: 0; padding: 4px 16px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .pw-features li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; } .pw-features li + li { border-top: 1px solid var(--line); } .pw-features strong { font-size: var(--t-callout); font-weight: 600; line-height: 1.3; } .pw-ficon { flex: none; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--fill); color: var(--ink); } .pw-plans { display: flex; flex-direction: column; gap: 10px; } .pw-plan { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; min-height: 72px; border-radius: var(--r-lg); border: 1.5px solid var(--line); background: var(--card); color: var(--ink); transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out); } .pw-plan.on { border-color: var(--accent); border-width: 2px; padding: 13.5px 15.5px; } .pw-plan:active { transform: scale(0.995); } .pw-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--on-accent); } .pw-plan.on .pw-radio { background: var(--accent); border-color: var(--accent); } .pw-plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pw-plan-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: var(--t-body); } .pw-plan-sub { color: var(--sub); font-size: var(--t-footnote); } .pw-save { padding: 2px 8px; border-radius: 999px; background: var(--sel); color: var(--on-sel); font-size: var(--t-caption); font-weight: 600; line-height: 1.34; } .pw-plan-price { flex: none; text-align: right; display: flex; align-items: baseline; gap: 1px; } .pw-plan-price strong { font-family: var(--display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .pw-plan-price span { color: var(--sub); font-size: var(--t-footnote); font-weight: 500; } .pw-terms { margin: 0; text-align: center; font-size: var(--t-footnote); line-height: 1.45; color: var(--sub); } .pw-cta { min-height: 52px; font-size: var(--t-headline); } .pw-msg { margin: -4px 0 0; text-align: center; } .pw-bad { color: var(--bad-ink); } .pw-restore { align-self: center; } .pw-legal { text-align: center; margin: 0; } .pw-legal a { color: var(--ink); font-weight: 600; } .pw-account { display: flex; flex-direction: column; gap: 4px; } .pw-account .linkbtn { align-self: flex-start; } .pw-email { overflow-wrap: anywhere; } .pw-finishing { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; max-width: 420px; margin: 0 auto; } .pw-finishing .display { font-size: 1.625rem; } .pw-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); border-right-color: transparent; animation: spin 0.8s linear infinite; } @media (prefers-reduced-motion: reduce) { .pw-spin { animation-duration: 2.4s; } } /* Settings → Subscription */ .subs-card { display: flex; flex-direction: column; gap: 10px; } .subs-icon { flex: none; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--fill); color: var(--ink); } .subs-line { padding: 12px 14px; border-radius: var(--r-md); background: var(--fill); } .subs-line p { margin: 2px 0 0; } .subs-past_due { background: color-mix(in srgb, var(--bad) 9%, var(--card)); } .subs-past_due strong { color: var(--bad-ink); } /* Admin → Subscriptions */ .adm-subs .grid2 { align-items: end; } .adm-sources { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .adm-sources li { display: flex; gap: 8px; align-items: baseline; font-size: 0.875rem; } .adm-comps { display: flex; flex-direction: column; gap: 2px; } .adm-comps .lr-title { overflow-wrap: anywhere; } /* Sign-up: Terms + Privacy line under "Create account" (screens/account.tsx) */ .auth-legal { text-align: center; margin: 2px 0 0; } .auth-legal a { color: var(--ink); font-weight: 600; } /* ---------- Rollout 18 · Calm Coach ---------- */ .pw { gap: 14px; } .pw-hero { gap: 12px; padding-top: 16px; } .pw-kicker { background: var(--good-soft); color: var(--good-ink); } .pw-features { padding: 4px 18px; } .pw-features li { align-items: center; min-height: 52px; padding: 8px 0; } .pw-features strong { font-size: var(--t-body); font-weight: 500; } .pw-ficon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--fill); } .pw-plan { border-radius: var(--r-lg); border-color: var(--hairline); box-shadow: var(--shadow-1); } .pw-plan.on { border-color: var(--accent); } .pw-terms { font-size: var(--t-footnote); } .pw-card-account { padding-block: 14px; } .subs-card { gap: 12px; } .subs-icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink); } .subs-line { border-radius: var(--r-md); background: var(--fill); } .subs-line strong { font-weight: 600; } /* training calendar: rest days, block / week header, busy week, supersets, test days (rollout 8; restyled rollout 16) */ /* ---------- rest-day picker: rest days = selected (ink) ---------- */ .rd-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .rd-day { min-height: 44px; border-radius: var(--r-ctl); border: 0; background: var(--fill); color: var(--ink); font-weight: 600; font-size: var(--t-footnote); } .rd-day.on { background: var(--sel); color: var(--on-sel); } .rd-day:active { transform: scale(0.96); } /* ---------- this week's options (Train tab, rollout 18): rows of the grouped list under the day (season.css) ---------- */ .blk-hint { color: var(--ink); } .tr-est { white-space: nowrap; } .tr-phase { color: var(--sub); font-weight: 500; } /* ---------- supersets: a neutral A1 / A2 badge, the note in --sub ---------- */ .ss-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 7px; margin-right: 6px; border-radius: 7px; background: var(--fill-2); color: var(--ink); font-family: var(--body); font-size: var(--t-caption); font-weight: 600; vertical-align: 2px; font-variant-numeric: tabular-nums; } .ss-note { color: var(--sub); font-weight: 400; line-height: 1.35; margin-top: 2px; } /* ---------- test day ---------- */ .tst-card { display: flex; flex-direction: column; gap: 10px; } .tst-card > .row svg { color: var(--sub); } .tst-row { padding-top: 10px; border-top: 1px solid var(--line); } .tst-row:first-of-type { border-top: 0; padding-top: 0; } /* ---------- Program › Busy weeks ---------- */ .set-week { display: flex; flex-direction: column; gap: 4px; } .set-sug { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--fill); } /* Rollout 13 (W3a): undo on the toast, your weekly schedule, build-your-own workouts, hybrid lean, short first week. Restyled in rollout 16 (neutral rows, sentence case). */ /* ---------- toast with a button (Undo) ---------- */ .toast.has-act { gap: 14px; } .toast .toast-act { pointer-events: auto; flex: none; min-height: 36px; margin: -6px -8px -6px 0; padding: 6px 10px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); font: inherit; font-weight: 600; cursor: pointer; } .toast .toast-act:active { background: color-mix(in srgb, var(--bg) 28%, transparent); } /* ---------- your weekly schedule ---------- */ .wt-days { display: flex; flex-direction: column; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .wt-days .wt-day { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font: inherit; font-size: var(--t-body); cursor: pointer; flex: none; } .wt-days .wt-day:last-child { border-bottom: 0; } .wt-days .wt-day:active { background: var(--fill); } .wt-day.rest .wt-what { color: var(--sub); } .wt-dow { flex: none; width: 40px; font-weight: 600; color: var(--sub); } .wt-what { font-weight: 500; min-width: 0; } .wt-warn { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--warn) 10%, var(--card)); } .wt-warn p { margin: 0; display: flex; gap: 6px; align-items: flex-start; } .wt-warn svg { flex: none; margin-top: 2px; color: var(--warn-ink); } .wt-sheet .p-label { margin-top: 6px; } .wt-more summary { cursor: pointer; padding: 8px 0; } /* ---------- build your own workouts ---------- */ .ow-day { gap: 4px; } .ow-row { display: flex; align-items: center; gap: 8px; min-height: 52px; border-top: 1px solid var(--line); padding-top: 4px; } .ow-name { min-width: 0; } .ow-name .small { color: var(--sub); } .ow-btns { display: flex; flex: none; } .ow-btns .iconbtn { width: 44px; height: 44px; color: var(--sub); } .ow-role { display: block; color: var(--sub); font-weight: 500; font-size: var(--t-caption); } /* ---------- hybrid lean ---------- */ .hl { padding-bottom: 4px; } /* ---------- short first week (season started midweek) ---------- */ .ssn-short { margin: 0; } /* Profiles (rollout 16, board #1; round 2 redesign): src/app/screens/profile.tsx. One hero (the fitness score ring), numbers in the Stat style, everything else ink and neutral. */ .pf-avatar { flex: none; border-radius: 50%; object-fit: cover; background: var(--fill-2); } .fc-avatar.pf-avatar { font-weight: 600; letter-spacing: 0; } .pf-head { display: flex; flex-direction: column; gap: 14px; } .pf-name { margin: 0; overflow-wrap: anywhere; } .pf-bio { margin: 0; white-space: pre-line; line-height: 1.45; } .pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; } .pf-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; } .pf-stat strong { font-family: var(--display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; } .pf-stat .small { line-height: 1.25; } .pf-perf { display: flex; flex-direction: column; gap: 12px; } .pf-score { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.035em; } .pf-list { display: flex; flex-direction: column; gap: 0; } .pf-list > .label { padding-top: 8px; } .pf-row { min-height: 48px; border-bottom: 1px solid var(--line); gap: 12px; } .pf-row:last-child { border-bottom: 0; } .pf-row strong { font-weight: 600; } .fd-author { display: inline-flex; align-items: center; padding: 0; text-align: left; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Rollout 18 · Calm Coach ---------- */ .pf-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pf-title .display { min-width: 0; } .pf-title .btn { flex: none; margin-bottom: 2px; } .pf-head { gap: 16px; } .pf-stats { gap: 4px; } .pf-stat strong { font-weight: 650; font-size: var(--t-num-sm, 1.75rem); font-size: 1.5rem; } .pf-stat .small { color: var(--sub); } .pf-perf .ring + .grow .lr-title { font-weight: 600; } .pf-list-head { display: flex; align-items: center; gap: 0; padding-top: 8px; } .pf-list-head .info-dot { margin-block: -12px; } .pf-row { min-height: 52px; } .pf-shows .set-note { padding-block: 14px; } .pf-fields { gap: 16px; } .pf-edit > .card:first-of-type .small { margin: 0; color: var(--sub); } /* Rollout 22 · the Feed tab (FeedHome) and the Squad screen (SquadScreen) — screens/squad.tsx, screens/feed.tsx, screens/friends.tsx. Calm Coach; tokens only. Matches the chosen mockup (R21 version A's Feed, png/a/feed-*, boards-*). Gold: the share card's one Post button, the "trained today" ring (hero), your podium place and your challenge bar (selection / --accent-soft). */ /* ---- Feed header: Friends / Everyone on the left, invite + add friend on the right, then "Feed" ---------------- */ .fh { gap: 14px; } .fh-head .screen-head-top { gap: 12px; } .fh-kind { flex: none; padding: 3px; } .fh-kind button { flex: none; min-height: 44px; padding: 0 16px; font-size: var(--t-footnote); } .fh-refresh:focus { position: static; width: auto; height: auto; margin: 0; clip: auto; align-self: flex-start; padding: 8px 14px; border-radius: var(--r-pill); background: var(--fill); color: var(--ink); font-weight: 600; } /* Pull to refresh: the strip above the header grows with the pull; a spinner while it reloads. */ .fh-pull { display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--sub); flex: none; transition: height var(--dur-2) var(--ease-out); } .fh-pull.ready { color: var(--ink); } .fh-pull.ready svg { transform: rotate(180deg); } .fh-pull svg { transition: transform var(--dur-2) var(--ease-out); } /* ---- Faces row: you + friends; gold ring = trained today ----------------------------------------------------- */ .fh-faces { display: flex; gap: 10px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; } .fh-faces::-webkit-scrollbar { display: none; } .fh-face-item { flex: none; display: flex; } .fh-face { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 66px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; border-radius: var(--r-sm); } .fh-face:active .fh-ring { transform: scale(0.95); } .fh-ring { display: inline-flex; border-radius: 50%; padding: 3px; box-shadow: inset 0 0 0 2px var(--line-2); transition: transform var(--dur-1) var(--ease-out); } .fh-face.on .fh-ring { box-shadow: inset 0 0 0 2.5px var(--accent); } .fh-av.fc-avatar { width: 52px; height: 52px; font-size: 1.0625rem; font-weight: 650; } .fh-face-n { font-size: var(--t-caption); font-weight: 500; line-height: 1.3; color: var(--sub); max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fh-face.on .fh-face-n { color: var(--ink); } .fh-face-add .fh-ring { box-shadow: inset 0 0 0 1.5px var(--line-2); } .fh-face-add .fh-av { background: transparent; color: var(--sub); } /* ---- "Squad this week": top 3 + your challenge (one button) -------------------------------------------------- */ .fh-squad { gap: 10px; padding: 12px 14px 14px 16px; } .fh-squad-top { display: flex; align-items: center; gap: 8px; min-height: 28px; } .fh-squad-k { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-callout); font-weight: 600; color: var(--ink); } .fh-squad-k svg { color: var(--sub); flex: none; } .fh-squad-me { margin: 0; font-weight: 600; color: var(--sub); white-space: nowrap; } .fh-chev { color: var(--sub); flex: none; } .fh-squad-line { margin: 0; color: var(--sub); } .fh-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .fh-pod { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px; border-radius: var(--r-sm); background: var(--fill); } .fh-pod.me { background: var(--accent-soft); } .fh-pod-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card); font-size: var(--t-caption); font-weight: 700; color: var(--ink); } .fh-pod-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .fh-pod-name { font-size: var(--t-footnote); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fh-pod-pts { font-size: var(--t-caption); color: var(--sub); font-weight: 500; white-space: nowrap; } .fh-pod.me .fh-pod-pts { color: var(--ink); } .fh-squad-ch { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .fh-squad-ch.flat { border-top: 0; padding-top: 0; } .fh-ch-l { display: flex; flex-direction: column; min-width: 0; max-width: 46%; } .fh-ch-l .lr-title { font-size: var(--t-callout); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fh-ch-l .small { margin: 0; line-height: 1.25; color: var(--sub); } .fh-segs { flex: 1; min-width: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; height: 8px; } .fh-segs i { border-radius: 2px; background: var(--track); } .fh-segs i.on { background: var(--ink); } .fh-ch-v { flex: none; font-weight: 650; font-size: var(--t-callout); color: var(--ink); white-space: nowrap; } .fh-ch-of { font-weight: 500; color: var(--sub); } /* ---- "Share today's workout" ------------------------------------------------------------------------------- */ /* ---- Squad screen ------------------------------------------------------------------------------------------ */ .sq { gap: 14px; } .sq-lb { display: flex; flex-direction: column; gap: 12px; } .sq-board button { padding-inline: 6px; white-space: nowrap; } .sq-board-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sq-board-sub .chips { flex-wrap: nowrap; } .sq-board-list > .empty { padding: 20px 18px; } .sq-board-foot { margin: 0; padding: 10px 18px 14px; border-top: 1px solid var(--line); } .group > .sq-brow { gap: 12px; padding-left: 16px; } .group > .sq-brow + .sq-brow::before { left: 16px; } .sq-brow.me { background: var(--fill); } .sq-rank { width: 22px; flex: none; text-align: center; font-weight: 700; color: var(--sub); } .sq-rank.top { color: var(--ink); } .sq-av.fc-avatar { width: 36px; height: 36px; font-size: 0.8125rem; } .sq-bname { min-width: 0; } .sq-bname .lr-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .sq-brow.me .sq-bname .lr-title { font-weight: 600; } .sq-bname .small { color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sq-bv { display: inline-flex; align-items: baseline; gap: 3px; flex: none; } .sq-bv b { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .sq-bv small { font-size: var(--t-caption); color: var(--sub); font-weight: 600; } .sq-chs > .card + .card, .sq-chs > .card + .listrow, .sq-chs > .listrow + .card { margin-top: 0; } .sq-new-btn.linkbtn { gap: 6px; } .sq-ch-empty { margin: 0; padding-inline: 6px; color: var(--sub); } .sq-challenge { gap: 10px; } .sq-challenge .card-head strong { font-size: var(--t-headline); font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .sq-ch-meta { margin: -6px 0 2px; color: var(--sub); } .sq-standings { display: flex; flex-direction: column; border-top: 0; } .sq-ch-row { display: flex; align-items: center; gap: 10px; min-height: 40px; } .sq-ch-n { width: 76px; flex: none; font-weight: 500; font-size: var(--t-callout); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sq-ch-row.me .sq-ch-n { font-weight: 650; } .fh-segs.wide { height: 10px; } .sq-ch-row.me .fh-segs i.on { background: var(--accent); } .sq-ch-v { width: 32px; flex: none; text-align: right; font-weight: 650; } .sq-challenge > .btn { align-self: flex-start; } /* A challenge you're not looking at: one row in a card (tap to open it). */ .listrow.sq-ch-collapsed { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 12px 18px 12px 16px; } .sq-ch-collapsed .lr-title { font-weight: 600; overflow-wrap: anywhere; } .sq-ch-collapsed .small { color: var(--sub); } .sq-your .group .lr-value .pill { vertical-align: 1px; } .sq-friends { display: flex; flex-direction: column; gap: 12px; } .sq-friends > .section { margin: 0; } /* ---- Add a friend (sheet) ---------------------------------------------------------------------------------- */ .af-sheet { gap: 14px; } .af-code { display: flex; align-items: center; gap: 8px; } .af-code .label { color: var(--sub); } /* Rollout 22 · navigation redesign (version B, with version A's Feed): the 5-tab bar with the Feed raised in the centre, Today's "Next up" card and short cards, the You tab. Built from the shared tokens only (DESIGN.md); gold only for the one primary, the active tab pill, the current step and the level ring. Calm Coach throughout. */ /* ---------- Tab bar: 5 tabs, "You" = your initial, the Feed raised in the centre ---------- */ .tabbar button { max-width: 96px; } .tab-av { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fill-2); color: var(--ink); font-size: 0.75rem; font-weight: 650; line-height: 1; box-shadow: inset 0 0 0 1.5px var(--faint); } .tabbar button.on .tab-av { background: var(--ink); color: var(--card); box-shadow: none; } .tabbar-raised { overflow: visible; } .tabbar .tab-centre { overflow: visible; justify-content: flex-end; padding-bottom: 5px; } .tabbar .tab-centre::before { display: none; } .tab-disc { position: relative; z-index: 1; margin-top: -30px; margin-bottom: 2px; width: 56px; height: 56px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card); color: var(--ink); box-shadow: var(--shadow-2), 0 0 0 5px var(--bar); transition: background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out); } .tabbar .tab-centre:active .tab-disc { transform: scale(0.94); } .tabbar .tab-centre:active svg { transform: none; } .tabbar .tab-centre.on .tab-disc { background: var(--accent-soft); color: var(--accent-ink); } .tabbar .tab-centre.on { color: var(--ink); font-weight: 600; } .tabbar .tab-centre:focus-visible { outline: none; } .tabbar .tab-centre:focus-visible .tab-disc { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; } :root[data-theme='dark'] .tab-disc { background: var(--card2); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tab-disc { background: var(--card2); } } /* A bar above the tab bar (workout in progress · Resume): the Feed sits level, like the other tabs, so the disc never covers it. */ .shell:has(.wbar) .tabbar .tab-centre { justify-content: center; padding-bottom: 0; gap: 4px; } .shell:has(.wbar) .tabbar .tab-centre::before { display: block; } .shell:has(.wbar) .tab-disc, :root .shell:has(.wbar) .tab-disc { margin: 0; width: auto; height: auto; background: none !important; box-shadow: none; color: inherit; } .shell:has(.wbar) .tabbar .tab-centre.on .tab-disc { color: var(--accent-ink); } .shell:has(.wbar) .tab-disc svg { width: 24px; height: 24px; } html:has(.tabbar-raised) .restbar { bottom: calc(var(--tabh) + var(--tab-pb) + 32px); } /* ---------- Today · "Next up" card ---------- */ .nx-card { gap: 14px; } .nx-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: -6px; } .nx-k { font-size: var(--t-footnote); font-weight: 600; color: var(--accent-ink); } .nx-count { color: var(--sub); } .nx-title { margin: 0; overflow-wrap: anywhere; } .nx-head-block { display: flex; flex-direction: column; gap: 4px; } .nx-sub { margin: 0; } .nx-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: -2px; } .nx-lifts { margin: -4px 0 0; color: var(--sub); } .btn.nx-main { min-height: 56px; font-size: 1.0625rem; } .nx-link { align-self: center; min-height: 44px; margin: -8px 0 -6px; color: var(--sub); font-size: var(--t-footnote); font-weight: 600; } .nx-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin: -6px 0 -4px; } .nx-acts .btn { color: var(--ink); padding-inline: 8px; align-self: center; justify-content: center; min-height: 44px; } .nx-acts .btn svg { color: var(--sub); } .nx-track { list-style: none; margin: 2px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; } .nx-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; color: var(--sub); text-align: center; } .nx-step + .nx-step::before { content: ''; position: absolute; top: 15px; right: calc(50% + 21px); left: calc(-50% + 21px); height: 2px; border-radius: 1px; background: var(--track); } .nx-step.is-done + .nx-step::before, .nx-step.is-missed + .nx-step::before { background: var(--good); } .nx-step.is-missed + .nx-step::before { background: var(--track); } .nx-dot { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--sub); } .nx-step.is-done .nx-dot { background: var(--good-soft); color: var(--good-ink); } .nx-step.is-cur .nx-dot { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent); } .nx-step-l { font-size: var(--t-caption); font-weight: 600; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-step.is-todo .nx-step-l, .nx-step.is-missed .nx-step-l { color: var(--sub); font-weight: 500; } .nx-step-t { font-size: var(--t-caption); color: var(--sub); margin-top: -2px; white-space: nowrap; } /* ---------- Today · short cards (Last night, readiness, workout, Fuel) ---------- */ .card.home-short { flex-direction: row; align-items: center; gap: 14px; padding: 14px 14px 14px 14px; color: var(--ink); font: inherit; } .home-short-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .home-short-k { display: block; font-weight: 600; font-size: var(--t-body); letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; } .home-short-x { font-weight: 500; color: var(--sub); font-size: var(--t-callout); margin-left: 4px; } .home-short .small { margin: 0; } .home-short .bar { margin: 6px 0 4px; } .home-short > .lr-chev { margin-left: -2px; } .icon-tile.sm { width: 44px; height: 44px; border-radius: 14px; } .home-night-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 1px; font-size: 1.375rem; letter-spacing: -0.03em; line-height: 1.2; } .home-night-v b { font-weight: 700; } .home-night-v small { font-size: 0.8125rem; font-weight: 600; color: var(--sub); letter-spacing: 0; margin: 0 3px 0 1px; } .home-night-debt.pill { align-self: center; margin-left: 6px; letter-spacing: 0; } .home-bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; flex: none; } .home-bars i { width: 5px; border-radius: 3px; background: var(--track); } .home-bars i.on { background: var(--ink); } .rd-short { padding-right: 12px; } .rd-short .rd-short-n { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em; } .rd-short .whylink { align-self: center; flex: none; padding: 0 12px 0 10px; font-size: var(--t-footnote); } /* Narrow phones: the 7-night bars step aside so the hours and the debt stay on one line. */ @media (max-width: 389px) { .home-bars { display: none; } } /* ---------- You ---------- */ .you { gap: 12px; } .you-prof { gap: 16px; } .you-prof-top { display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; width: 100%; } .you-prof-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .you-prof-t .pf-name { margin: 0; overflow-wrap: anywhere; } .you-prof-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .you-prof-acts .btn { padding-inline: 10px; } .you-prog { gap: 14px; color: var(--ink); font: inherit; } .you-prog-top { display: flex; align-items: center; gap: 14px; } .you-prog-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .you-lvl { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; } .you-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .you-wd { display: flex; flex-direction: column; align-items: center; gap: 4px; } .you-wd i { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--good-ink); } .you-wd.m-trained i, .you-wd.m-partial i { background: var(--good-soft); } .you-wd.m-rest i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); } .you-wd.is-today small { color: var(--ink); font-weight: 650; } .you-wd small { font-size: var(--t-caption); color: var(--sub); } /* Rollout 22 (navigation redesign, TRAIN workstream): the Lift | Cardio switch on Train, the day card's Change · Move · Skip, the workout's three tool tiles and labelled Swap, the finish screen (Share to feed) and Fuel's "Log a meal" tiles. Version B of /home/claude/wt24-mock/concepts/r21 (mock/r21.css), on the app's own tokens. This file loads before training.css / season.css / workout.css (name order), so rules here use their own r22- classes. */ /* ---- Train: Lift | Cardio ----------------------------------------------------------------------------------------- */ .r22-trhead .screen-head-top { gap: 12px; align-items: center; } .seg.r22-lc { flex: 1; max-width: 260px; min-width: 0; } .r22-lc button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; white-space: nowrap; } .r22-lc button svg { flex: none; color: var(--sub); } .r22-lc button.on svg { color: var(--ink); } .r22-trhead .screen-head-actions { margin-left: auto; } /* The day card: Change · Move · Skip as buttons under the main action; the muscles behind ⓘ by the title. */ .r22-dayacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .r22-dayacts.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r22-dayacts.n1 { grid-template-columns: minmax(0, 1fr); } .tr-day .r22-dayacts .btn { padding-inline: 6px; gap: 6px; min-width: 0; font-size: var(--t-callout); } @media (max-width: 379px) { .tr-day .r22-dayacts .btn svg { display: none; } } .r22-dayacts .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Cardio inside Train: today's lift (on a lifting day) and the next planned run. */ .r22-todaylift, .r22-cnext { gap: 12px; } .r22-todaylift-row, .r22-cnext-row { display: flex; align-items: center; gap: 14px; min-width: 0; } .r22-todaylift-row .tr-daytitle, .r22-cnext-row .tr-daytitle { margin: 0; min-width: 0; } .rstart-sec .rstart { margin-top: 0; } /* ---- Workout: Short on time · At home · Something hurts; Swap ------------------------------------------------------ */ .tr-exbtns .btn.r22-swap { min-height: 44px; min-width: 0; padding: 0 14px 0 12px; gap: 6px; border-radius: var(--r-pill); } .tr-exbtns .btn.r22-swap svg { color: var(--ink); } .group > .listrow.r22-worow { padding: 0; gap: 0; } .r22-worow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 4px 10px 16px; min-height: 64px; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; } .r22-worow-main.done .lr-title { color: var(--sub); } .r22-rowswap.iconbtn { flex: none; margin-right: 8px; color: var(--sub); } .wo-rows > .listrow + .listrow::before { left: 16px; right: 16px; } /* ---- Workout finish ------------------------------------------------------------------------------------------------ */ .r22-finback { align-self: center; min-height: 44px; padding: 0 12px; color: var(--sub); font-size: var(--t-callout); font-weight: 500; } .r22-done-head { display: flex; align-items: center; gap: 14px; padding-top: 4px; } .r22-done-head .icon-tile { width: 56px; height: 56px; border-radius: 18px; } .r22-done-head .display { margin: 2px 0 0; } .r22-done-head .p-label { margin: 0; } .r22-done-stats .stat-tile.tile { padding: 12px 14px; gap: 2px; min-width: 0; } .r22-done-stats .st-v { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; } .r22-done-stats .unit { font-size: 0.8125rem; margin-left: 2px; color: var(--sub); font-weight: 600; letter-spacing: 0; } .r22-done-stats .st-s { font-size: var(--t-footnote); color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .r22-rate, .r22-post { gap: 12px; } .r22-rate .h3, .r22-post .h3 { margin: 0; font-weight: 600; } .r22-rate-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .r22-rate-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 64px; padding: 6px 2px; border: 0; border-radius: var(--r-sm); background: var(--fill); color: var(--ink); font: inherit; text-align: center; transition: background-color var(--dur-2) ease; } .r22-rate-b b { font-size: 1.125rem; font-weight: 700; } .r22-rate-b span { font-size: var(--t-caption); line-height: 1.15; color: var(--sub); } .r22-rate-b.on { background: var(--sel); color: var(--on-sel); } .r22-rate-b.on span { color: var(--on-sel); opacity: 0.85; } .r22-post .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .r22-post .card-head .small { margin: 0; } .r22-finish-acts { display: flex; flex-direction: column; gap: 4px; } .r22-finish-hint { margin: 0 0 4px; } /* ---- Fuel: Log a meal ---------------------------------------------------------------------------------------------- */ .r22-logmeal { gap: 12px; } .r22-logmeal .card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .r22-logmeal .card-head .h3 { margin: 0; } .seg.r22-mealslot { padding: 3px; gap: 2px; } .r22-mealslot button { flex: 0 1 auto; min-height: 44px; padding: 0 10px; font-size: var(--t-caption); white-space: nowrap; } .r22-tiles4.fuel-log { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .r22-tiles4 .fuel-tile { min-height: 76px; background: var(--fill); box-shadow: none; border: 0; cursor: pointer; } .r22-tiles4 .fuel-tile.r22-tile-hero { background: var(--accent-soft); } .r22-tiles4 .fuel-tile.r22-tile-hero svg { color: var(--accent-ink); } .r22-tiles4 .fuel-tile:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .r22-logmore { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; } .r22-logmore .small { margin: 0; } .r22-logmore .linkbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-footnote); color: var(--ink); font-weight: 600; } .r22-logmore .linkbtn svg { color: var(--sub); } .r22-recent-sheet .recent-meals { gap: 0; } .r22-todaylift .tr-dayhead, .r22-cnext .tr-dayhead { align-items: baseline; gap: 10px; min-height: 0; } .r22-todaylift .tr-dayhead .label, .r22-cnext .tr-dayhead .label { flex: 1; min-width: 0; margin: 0; } /* Rollout 23 · the X / Twitter-style Feed (screens/feed.tsx, the Feed header area in screens/squad.tsx, screens/feedavatar.tsx). Familiar layout, Aurek tokens: posts are rows on the page background separated by thin full-width lines (no cards), the avatar in a left column, "Name · Friends · 3h" and "…", the text, photos in a rounded grid of 1–4, the workout / run as an embedded bordered card (X's link-preview / quote card), then reply · like · share. Gold only for: the compose button (the screen's one primary), the selected tab's underline and a selected report reason (selection). A like is red (--bad), the colour everyone reads as "liked". */ /* ---- Avatars (photo or initials) ---------------------------------------------------------------------------- */ .fd-av.fc-avatar { overflow: hidden; flex: none; font-weight: 650; letter-spacing: 0; } .fd-av.has-photo { background: var(--fill); } .fd-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .fd-av-btn { display: inline-flex; align-self: start; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; } .fd-av-btn:active { opacity: 0.8; } .fh-face .fd-av.fh-av { width: 52px; height: 52px; } /* ---- Friends | Everyone: X-style underline tabs that stay at the top while you scroll ------------------------- */ .fh-tabs { position: sticky; top: 0; z-index: 6; display: flex; margin: 0 calc(-1 * var(--gutter)) -14px; padding: 0 var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line); } .fh-tabs button { flex: 1; min-height: 48px; padding: 0; border: 0; background: none; color: var(--sub); font: inherit; font-size: var(--t-callout); font-weight: 500; letter-spacing: -0.01em; display: flex; align-items: stretch; justify-content: center; transition: color var(--dur-2) ease, background-color var(--dur-2) ease; } .fh-tabs button > span { position: relative; display: inline-flex; align-items: center; padding: 0 2px; } .fh-tabs button.on { color: var(--ink); font-weight: 650; } .fh-tabs button.on > span::after { content: ''; position: absolute; left: -6px; right: -6px; bottom: -1px; height: 4px; border-radius: 2px; background: var(--accent); } .fh-tabs button:active { background: var(--fill); } .fh-tabs button:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -4px; border-radius: var(--r-xs); } .fh-tabs.fh-tabs-none { padding: 0; height: 1px; border-bottom: 0; background: var(--line); position: static; margin-bottom: -14px; } /* ---- The timeline ---------------------------------------------------------------------------------------- */ .fd-hub-x { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--gutter)); padding-bottom: 64px; } .fd-posts { position: relative; display: flex; flex-direction: column; } /* One post: the avatar column, then everything else. */ .fd-post { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 12px var(--gutter) 2px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color var(--dur-2) ease; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .fd-post:not(.fd-post-detail):hover { background: color-mix(in srgb, var(--ink) 2.5%, transparent); } } .fd-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .fd-hd { display: flex; align-items: center; gap: 4px; min-height: 22px; } .fd-hd-l { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; overflow: hidden; } .fd-author.linkbtn { display: inline-flex; align-items: baseline; gap: 5px; flex: 0 1 auto; min-width: 44px; min-height: 0; margin: -11px 0; padding: 11px 0; overflow: hidden; white-space: nowrap; font-size: var(--t-callout); font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; text-align: left; color: var(--sub); } .fd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--ink); } .fd-aud-l { flex: none; display: inline-flex; gap: 5px; } .fd-author.linkbtn:active { opacity: 0.6; } .fd-meta { flex: none; display: inline-flex; align-items: baseline; gap: 5px; color: var(--sub); font-size: var(--t-callout); line-height: 1.5; } .fd-time { min-width: 44px; margin: -11px 0; padding: 11px 0; border: 0; background: none; color: var(--sub); font: inherit; text-align: left; } .fd-time:active { color: var(--ink); } .fd-more { flex: none; width: 44px; height: 44px; margin: -11px -12px -11px 0; border: 0; border-radius: 50%; background: none; color: var(--sub); display: inline-flex; align-items: center; justify-content: center; } .fd-more:active { background: var(--fill); color: var(--ink); } .fd-status { display: flex; margin: 2px 0; } .fd-text { margin: 0; font-size: var(--t-body); line-height: 1.45; letter-spacing: -0.005em; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; } /* Photos: X's grid — 1 wide (up to 480 px tall), 2 side by side, 3 = one tall + two stacked, 4 = 2 × 2. */ .fd-photos { display: grid; gap: 2px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--line); isolation: isolate; } .fd-photos.g-one { grid-template-columns: 1fr; } .fd-photos.g-two { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 10; } .fd-photos.g-three { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 10; } .fd-photos.g-three > :first-child { grid-row: span 2; } .fd-photos.g-four { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 10; } .fd-photo { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: var(--fill); overflow: hidden; color: var(--sub); font: inherit; cursor: zoom-in; } .fd-photo:disabled { cursor: default; opacity: 1; } .fd-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .fd-photos.g-one .fd-photo { height: auto; min-height: 160px; } .fd-photos.g-one .fd-photo img { height: auto; max-height: 480px; } .fd-photo .small { color: var(--sub); margin: 0; } .fd-photo:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: -3px; } /* Workout / run: an embedded card (bordered, like a link preview), not a card inside a card. */ .fd-card { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 12px 14px 14px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--card); } .fd-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; } .fd-card-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: var(--fill); } .fd-card-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .fd-card-k { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-caption); font-weight: 500; color: var(--sub); } .fd-card-t .lr-title { font-size: var(--t-callout); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fd-card-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; font-size: var(--t-footnote); color: var(--sub); } .fd-card-stats strong { color: var(--ink); font-size: var(--t-headline); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .fd-card .fd-top { border-top: 1px solid var(--line); padding-top: 2px; } .fd-card .fd-top li { min-height: 32px; font-size: var(--t-footnote); } .fd-card .fd-top .num { font-weight: 650; } .fd-card > .pill, .fd-card-body > .pill { align-self: flex-start; } .fd-card-r { gap: 0; } .fd-card-r .fd-card-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; } .fd-card-r.with-route { flex-direction: row; padding: 0; overflow: hidden; } .fd-card-r.with-route .fd-card-body { padding: 12px 14px 14px; } .fd-route { flex: none; width: 104px; align-self: stretch; display: flex; align-items: center; justify-content: center; background: var(--fill); color: var(--ink); border-right: 1px solid var(--line); } .fd-cardtype svg { color: var(--sub); } /* Reply · like · share: icon + muted count, spread across the column (X). */ .fd-actions { display: flex; justify-content: space-between; align-items: center; margin: 2px -10px 0; } .fd-act { display: inline-flex; align-items: center; gap: 4px; min-width: 64px; height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: none; color: var(--sub); font: inherit; font-size: var(--t-footnote); font-weight: 500; transition: color var(--dur-2) ease, background-color var(--dur-2) ease; } .fd-act-share { min-width: 44px; justify-content: center; } .fd-act .num { min-width: 1.5ch; text-align: left; font-variant-numeric: tabular-nums; } .fd-act:active { background: var(--fill); } @media (hover: hover) { .fd-act:hover { color: var(--ink); background: var(--fill); } .fd-act-like:hover { color: var(--bad-ink); } } .fd-act-like.on { color: var(--bad-ink); } .fd-act-like.on svg path { fill: var(--bad); stroke: var(--bad); } .fd-act-like.on svg { animation: fd-pop 260ms ease-out; } @keyframes fd-pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .fd-act-like.on svg { animation: none; } } /* Editing your post (15 minutes) */ .fd-panel { display: flex; flex-direction: column; gap: 8px; margin: 4px 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--fill); } .fd-edit { width: 100%; min-height: 72px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--t-body); line-height: 1.45; resize: vertical; outline: none; } .fd-panel-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .fd-panel-acts .small { margin: 0 auto 0 0; color: var(--sub); } /* "New posts" (sticks under the tabs while you read further down) */ .fd-newpill-wrap { position: sticky; top: 50px; z-index: 7; height: 0; display: flex; justify-content: center; overflow: visible; } .fd-newpill { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-top: 10px; padding: 0 16px 0 12px; border: 0; border-radius: var(--r-pill); background: var(--sel); color: var(--on-sel); font: inherit; font-size: var(--t-footnote); font-weight: 650; box-shadow: var(--shadow-3); animation: drop var(--dur-3) var(--ease-out); } .fd-newpill:active { filter: brightness(0.9); } .fd-newpill-faces { display: inline-flex; } .fd-newpill-faces .fd-av { background: var(--card); color: var(--ink); box-shadow: 0 0 0 2px var(--sel); font-size: 0.75rem !important; font-weight: 700; } .fd-newpill-faces .fd-av + .fd-av { margin-left: -6px; } /* Loading, empty, the end */ .fd-skel { display: flex; flex-direction: column; } .fd-skel-row { display: flex; gap: 12px; padding: 14px var(--gutter); border-bottom: 1px solid var(--line); } .fd-skel-row .grow { display: flex; flex-direction: column; gap: 9px; padding-top: 3px; min-width: 0; } .fd-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px var(--gutter) 8px; text-align: center; } .fd-empty .empty { padding: 8px 0; } .fd-more-wrap { padding: 8px var(--gutter); } .fd-end { margin: 0; padding: 20px var(--gutter) 0; text-align: center; color: var(--sub); } .fd-guidelines > div { display: flex; flex-direction: column; gap: 12px; } .fd-guidelines .h3 { margin-bottom: 4px; } /* The compose button: bottom-right above the tab bar (and above a workout bar or the rest timer). */ .fd-fab { position: fixed; z-index: 24; right: max(var(--gutter), calc((100vw - var(--col)) / 2 + var(--gutter))); bottom: calc(var(--tabh) + var(--tab-pb) + 18px); width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-3); transition: transform var(--dur-1) var(--ease-out), filter var(--dur-2) ease; } .fd-fab:active { transform: scale(0.94); filter: brightness(0.94); } .fd-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .shell:has(.wbar) .fd-fab { bottom: calc(var(--tabh) + var(--tab-pb) + 18px + 49px); } html:has(.restbar) .fd-fab { bottom: calc(var(--tabh) + var(--tab-pb) + 32px + 64px + 14px); } /* ---- Sheets: "…" and Share (X's bottom action sheets) ------------------------------------------------------ */ .fd-mlist { display: flex; flex-direction: column; margin: 2px -22px 0; } .fd-mrow { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 54px; padding: 0 22px; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; text-align: left; } .fd-mrow svg { flex: none; color: var(--ink); } .fd-mrow:active { background: var(--fill); } .fd-mrow.danger, .fd-mrow.danger svg { color: var(--bad-ink); } .fd-sheet-note { margin: 10px 0 0; color: var(--sub); } .fd-report { display: flex; flex-direction: column; gap: 10px; } .fd-report > .sub { margin: 0; } .fd-reasons { display: flex; flex-direction: column; margin: 0 -22px; } .fd-reasons .fd-mrow { font-weight: 500; min-height: 50px; } .fd-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); transition: box-shadow var(--dur-2) ease; } .fd-mrow.on .fd-radio { box-shadow: inset 0 0 0 7px var(--accent); } .fd-report .pair { margin-top: 4px; } /* ---- Full-screen photo (a photo viewer is the one place the background is black, like every photos app) ---- */ .fd-viewer { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 64px) 0 calc(env(safe-area-inset-bottom, 0px) + 56px); background: color-mix(in srgb, #000 94%, transparent); animation: fade var(--dur-2) ease; outline: none; } .fd-viewer img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .fd-viewer-btn { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, #fff 16%, transparent); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .fd-viewer-btn:disabled { opacity: 0.3; } .fd-viewer-x { top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; } .fd-viewer-prev { left: 12px; top: 50%; margin-top: -22px; } .fd-viewer-next { right: 12px; top: 50%; margin-top: -22px; } .fd-viewer-n { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); text-align: center; color: #fff; font-size: var(--t-footnote); font-weight: 600; } /* ---- The post page: the post across the full width, the time, the counts, then replies; reply bar at the bottom */ .page:has(.fd-detail) { display: flex; flex-direction: column; } .fd-detail { flex: 1 0 auto; display: flex; flex-direction: column; margin: -12px calc(-1 * var(--gutter)) 0; } .fd-post-detail { display: flex; flex-direction: column; gap: 8px; padding: 12px var(--gutter) 0; cursor: auto; } .fd-dhead { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; } .fd-dhead .fd-hd { flex: 1; min-width: 0; align-items: center; } .fd-post-detail .fd-hd-l { flex-direction: column; align-items: flex-start; gap: 0; } .fd-post-detail .fd-author.linkbtn { flex-direction: column; align-items: flex-start; gap: 0; max-width: 100%; margin: -6px 0; padding: 6px 0; } .fd-post-detail .fd-name { font-size: var(--t-body); max-width: 100%; } .fd-post-detail .fd-aud-l { font-size: var(--t-footnote); line-height: 1.3; } .fd-post-detail .fd-meta { font-size: var(--t-footnote); line-height: 1.3; } .fd-post-detail .fd-text { font-size: var(--t-headline); line-height: 1.45; } .fd-stamp { margin: 6px 0 0; color: var(--sub); } .fd-counts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--t-callout); color: var(--sub); } .fd-counts b { color: var(--ink); font-weight: 700; } .fd-post-detail .fd-actions { justify-content: space-around; margin: 0; padding: 2px 0; border-top: 1px solid var(--line); } .fd-post-detail .fd-stamp + .fd-actions { margin-top: 4px; } .fd-replies { display: flex; flex-direction: column; } .fd-comment { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 12px var(--gutter) 10px; border-bottom: 1px solid var(--line); } .fd-ctext { margin: 0; font-size: var(--t-body); line-height: 1.45; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; } .fd-noreplies { margin: 0; padding: 24px var(--gutter); text-align: center; color: var(--sub); } .fd-reply { position: sticky; bottom: 0; z-index: 5; margin-top: auto; display: flex; align-items: flex-end; gap: 10px; padding: 10px var(--gutter); background: var(--bg); border-top: 1px solid var(--line); } /* The raised Feed tab's disc reaches 30 px above the tab bar: keep the field and Reply above it. */ html:has(.tabbar-raised) .fd-reply { padding-bottom: 40px; } .fd-reply > .fd-av-btn { align-self: center; cursor: default; } .fd-reply textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; padding: 11px 16px; border: 0; border-radius: 22px; background: var(--fill); color: var(--ink); font: inherit; font-size: var(--t-body); line-height: 1.375; resize: none; outline: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--dur-2) ease; } .fd-reply textarea::placeholder { color: var(--faint); } .fd-reply textarea:focus { box-shadow: inset 0 0 0 1.5px var(--accent); } .fd-reply .btn { flex: none; } .fd-detail > .card { margin: 12px var(--gutter) 0; } .fd-detail > .spacer { display: none; } /* ---- New post (X's composer): Post at the top, your avatar, who sees it, the text, photos / the attached card, the tools row ------------------------------------------------------------------------------------------------- */ .fd-compose { display: flex; flex-direction: column; gap: 12px; } .fd-c-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .fd-c-title { margin: 0; font-size: var(--t-title); font-weight: 650; letter-spacing: -0.02em; } .fd-c-head .btn { padding-inline: 22px; } .fd-c-body { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; } .fd-c-body > .fd-av-btn { cursor: default; } .fd-c-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; } .fd-aud.seg { align-self: flex-start; padding: 3px; gap: 2px; } .fd-aud.seg button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font-size: var(--t-footnote); } .fd-aud.seg button svg { color: var(--sub); } .fd-aud.seg button.on svg { color: var(--ink); } .fd-c-text { width: 100%; min-height: 96px; padding: 2px 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--t-headline); line-height: 1.45; resize: none; outline: none; } .fd-c-text::placeholder { color: var(--faint); } .fd-c-main .fd-photos { margin-top: 0; } .fd-c-main .fd-photo { cursor: default; } .fd-x { position: absolute; top: 4px; right: 4px; z-index: 2; width: 44px; height: 44px; padding: 7px; border: 0; border-radius: 50%; background: color-mix(in srgb, #000 62%, transparent); background-clip: content-box; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .fd-attached { position: relative; } .fd-attached .fd-card { margin-top: 0; } .fd-attached .fd-card-head, .fd-attached .fd-card-r.with-route .fd-card-body { padding-right: 36px; } .fd-attached > .fd-x { background: color-mix(in srgb, var(--ink) 72%, transparent); background-clip: content-box; color: var(--card); } .fd-c-aud { display: flex; align-items: center; gap: 0; margin: -2px 0 -6px 52px; color: var(--sub); } .fd-c-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); } .fd-c-tool { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border: 0; border-radius: var(--r-pill); background: var(--fill); color: var(--ink); font: inherit; font-size: var(--t-footnote); font-weight: 600; cursor: pointer; transition: background-color var(--dur-2) ease; } .fd-c-tool svg { flex: none; color: var(--sub); } .fd-c-tool:active { background: var(--fill-2); } .fd-c-tool.on { background: var(--sel); color: var(--on-sel); } .fd-c-tool.on svg { color: inherit; } .fd-c-tool:focus-within { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; } .fd-c-count { margin-left: auto; color: var(--sub); font-size: var(--t-footnote); font-weight: 600; } .fd-c-count.low { color: var(--warn-ink); } .fd-picklist { padding: 2px 16px; } .fd-picklist .empty { padding: 16px 0; } .fd-blocked { gap: 12px; } /* Rollout 23 · readiness (four parts): what each part is built from, the training-load info line and the check-in's optional "Where?" chips. Calm Coach tokens only (DESIGN.md). */ .rdx-subs { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; } .rdx-sub { display: grid; grid-template-columns: 1fr auto; align-items: baseline; align-content: start; column-gap: 8px; min-width: 0; } .rdx-sub-k { font-size: var(--t-callout); font-weight: 500; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rdx-sub-v { font-size: var(--t-callout); font-weight: 600; color: var(--ink); } .rdx-sub-d { grid-column: 1 / -1; color: var(--sub); margin: 0; overflow-wrap: anywhere; } .rdx-load { margin: 10px 4px 0; color: var(--sub); } .ci-areas { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .ci-areas .chips { display: flex; flex-wrap: wrap; gap: 8px; } .ci-areas .chip { min-height: 44px; } @media (max-width: 360px) { .rdx-subs { grid-template-columns: 1fr; } } /* Rollout 23 · SCORE: the Fitness Score (card, screen, graph), goals, the finish screen's "+N Fitness Score" and the profile's score. Calm Coach; tokens only (DESIGN.md). The graph follows the dataviz marks: a 2 px line, a ~10 % wash under it, hairline grid, an end dot with a 2 px surface ring, a crosshair. */ /* ---------- Fitness Score card ---------- */ .sc-card { gap: 6px; } .sc-card .card-head { margin-bottom: -6px; } .sc-card .card-head .info-dot { margin: -10px -10px -10px 0; } .sc-open { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; border-radius: var(--r-sm); min-height: 44px; } .sc-top { display: flex; align-items: center; gap: 14px; } .sc-total { font-size: var(--t-num-md); font-weight: 650; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: normal; } .sc-total.lg { font-size: var(--t-num-lg); } .sc-gains { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .sc-gain { font-size: var(--t-callout); font-weight: 600; color: var(--sub); } .sc-gain.up { color: var(--good-ink); } .sc-top .lr-chev { color: var(--sub); flex: none; } /* ---------- the graph ---------- */ .sc-chart { position: relative; } .sc-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; outline: none; border-radius: var(--r-xs); } .sc-svg:focus-visible { box-shadow: 0 0 0 2px var(--accent); } .sc-grid { stroke: var(--grid); stroke-width: 1; } .sc-tick { fill: var(--sub); font-size: 0.75rem; font-variant-numeric: tabular-nums; } .sc-area { fill: var(--accent); fill-opacity: 0.1; stroke: none; } .sc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .sc-cross { stroke: var(--line-2); stroke-width: 1; } .sc-dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; } .sc-chart.mini .sc-svg { pointer-events: none; } .sc-tip { position: absolute; top: 0; display: flex; flex-direction: column; gap: 0; padding: 6px 10px; border-radius: var(--r-sm); background: var(--card); box-shadow: var(--shadow-2); pointer-events: none; white-space: nowrap; } .sc-tip strong { font-size: var(--t-headline); font-weight: 650; } .sc-tip span { font-size: var(--t-footnote); color: var(--sub); } /* ---------- Fitness Score screen ---------- */ .sc-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sc-title .info-dot { margin-right: -10px; } .sc-hero { gap: 14px; } .sc-range { align-self: stretch; } .sc-range button { flex: 1; } .sc-parts .sc-part { align-items: stretch; } .sc-part-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-block: 4px; } .sc-part-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .sc-part-row strong { font-size: var(--t-headline); font-weight: 650; } .sc-bar { display: block; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; } .sc-bar-f { display: block; height: 100%; border-radius: 4px; background: var(--ink); } .sc-lift-n, .sc-ev-n { font-size: var(--t-headline); font-weight: 650; min-width: 44px; text-align: right; } .sc-ev-n { color: var(--good-ink); } .sc-ev-t { min-width: 0; } .sc-ev .small { overflow: hidden; text-overflow: ellipsis; } .sc-ev-sheet .group { box-shadow: none; } /* ---------- workout finish: "+4 Fitness Score" ---------- */ .r23-finish-pts { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border-radius: var(--r-md); background: var(--fill); color: var(--ink); font-weight: 600; } .r23-finish-pts strong { font-size: var(--t-headline); color: var(--good-ink); } .r23-finish-pts svg { color: var(--sub); } /* ---------- this year's goals ---------- */ .yg-card { gap: 10px; } .yg-card .card-head .linkbtn { margin-block: -10px; gap: 6px; } .yg-count { color: var(--sub); font-weight: 500; margin-right: 4px; } .yg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .yg-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; } .yg-row + .yg-row { border-top: 1px solid var(--line); } .yg-list > .yg-row:first-child { padding-top: 4px; } .yg-top { display: flex; align-items: flex-start; gap: 12px; } .yg-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .yg-name { font-weight: 600; font-size: var(--t-body); } .yg-sub { color: var(--sub); } .yg-row.is-met .yg-sub { color: var(--good-ink); font-weight: 500; } .yg-row.is-overdue .yg-sub { color: var(--warn-ink); } .yg-v { text-align: right; white-space: nowrap; flex: none; } .yg-v strong { font-size: var(--t-headline); font-weight: 650; } .yg-v .small { color: var(--sub); } .yg-bar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--track); } .yg-fill { display: block; height: 100%; border-radius: 4px; background: var(--ink); transition: width var(--dur-3) var(--ease-out); } .yg-fill.met { background: var(--good); } .yg-tick { position: absolute; top: -3px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 2px var(--card); } .yg-step { margin: -2px 0 0; color: var(--sub); } .yg-acts { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--fill); } .yg-acts .small { margin: 0; } .yg-acts .pair { display: flex; gap: 8px; } .yg-acts .pair .btn { flex: 1; } .yg-more { align-self: flex-start; } .yg-ask .sub { margin: -4px 0 0; } .yg-sugg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .yg-pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-radius: var(--r-md); background: var(--fill); color: var(--ink); font: inherit; text-align: left; } .yg-pick .small { color: var(--sub); } .yg-pick:not(.on) .yg-name { color: var(--sub); } .yg-ck { width: 24px; height: 24px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line-2); background: var(--card); color: var(--on-sel); } .yg-pick.on .yg-ck { background: var(--sel); border-color: var(--sel); } .yg-ask-more { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: -4px; } .yg-later { color: var(--sub); } .yg-editbtn { align-self: flex-start; gap: 6px; min-height: 44px; margin: -8px 0 -12px -2px; color: var(--sub); } .yg-note { color: var(--sub); } .yg-met-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .yg-met-head h2 { font-size: var(--t-title); font-weight: 650; letter-spacing: -0.02em; margin: 2px 0 0; } .yg-met-head .small { margin: 0; color: var(--good-ink); font-weight: 600; } .yg-met-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .yg-opt .lr-chev { color: var(--sub); } /* ---------- profile: the Fitness Score ---------- */ .pf-score-row { display: flex; align-items: center; gap: 16px; } .pf-score-v { display: flex; flex-direction: column; gap: 2px; min-width: 96px; } .pf-score-v .small { color: var(--sub); } .pf-score-v .pf-score { font-size: var(--t-num-sm); line-height: 1.05; } .pf-parts { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0; } .pf-part { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--fill); } .pf-part dt { margin: 0; color: var(--sub); } .pf-part dd { margin: 0; font-weight: 600; } /* Rollout 24 · DAILY (UX audit Oct 14): Today, Next up, readiness, check-in, Fuel, quick log, Sleep. Calm Coach. Tokens only (DESIGN.md); gold = the one primary, the readiness ring after check-in, the current step. */ /* ---------- The check-in (one form: Today, Readiness, Journal, the late check-in sheet) ---------- */ .ci-form { display: flex; flex-direction: column; gap: 12px; } .ci-rows { display: flex; flex-direction: column; gap: 12px; } .ci-row { display: flex; flex-direction: column; gap: 6px; } .ci-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ci-row-head .label { margin: 0; } .ci-ends { color: var(--sub); text-align: right; } .ci-row .scale-row button { min-height: 44px; } .ci-acts { display: flex; flex-direction: column; } .ci-acts.pair { flex-direction: row; gap: 8px; } .ci-acts.pair .btn { flex: 1; } .ci-left { margin: -4px 0 0; text-align: center; color: var(--sub); } .ci-head { display: flex; flex-direction: column; gap: 2px; } .ci-head .small { margin: 0; } .ci-sheet { gap: 12px; } .ci-sheet > .small { margin: -6px 0 0; } .jr-form .ci-rows { gap: 14px; } .nx-card .ci-form { gap: 12px; } .btn.ci-save { min-height: 56px; font-size: 1.0625rem; } .btn.ci-save:disabled { background: var(--fill); border-color: transparent; color: var(--sub); box-shadow: none; opacity: 1; } /* ---------- Readiness card: one fixed size, above Next up ---------- */ .card.rd-card { flex-direction: row; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; min-height: 84px; } .rd-card-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; min-height: 56px; } .rd-card-n { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em; } .rd-card-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rd-card-k { display: block; font-weight: 600; font-size: var(--t-body); letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rd-card-l { margin: 0; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rd-card .whylink { align-self: center; flex: none; padding: 0 12px 0 10px; font-size: var(--t-footnote); } .rd-partial .rd-card-n, .rd-none .rd-card-n { color: var(--sub); } .rd-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--fill); color: var(--ink); font: inherit; font-size: var(--t-footnote); font-weight: 600; } .rd-chip svg { color: var(--accent-ink); } .rd-chip:active { transform: scale(0.96); } /* ---------- Next up: late / missed, "Also today" ---------- */ .nx-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; } .nx-title .pill { font-size: var(--t-caption); letter-spacing: 0; } .nx-also { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: -4px 0 -6px; padding-top: 10px; border-top: 1px solid var(--line); } .nx-also-i { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 64px; padding: 2px 0; border: 0; background: none; color: var(--sub); font: inherit; border-radius: var(--r-sm); } .nx-also-i:active { background: var(--fill); } .nx-also-i .ring { color: var(--ink); } .nx-also-l { font-size: var(--t-caption); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-also-i.done .nx-also-l { color: var(--good-ink); } .nx-also-i.done .ring svg circle:first-child { stroke: var(--good-soft); } /* ---------- Getting started ---------- */ .gs-card { gap: 12px; } .gs-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: -4px; } .gs-k { font-size: var(--t-footnote); font-weight: 600; color: var(--accent-ink); } .gs-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .gs-bar span { height: 4px; border-radius: 2px; background: var(--track); } .gs-bar span.on { background: var(--good); } .gs-bar span.cur { background: var(--accent); } .gs-step { display: flex; align-items: center; gap: 12px; } .gs-step .h3 { margin: 0; } .gs-step .small { margin: 2px 0 0; } .gs-acts { display: flex; gap: 8px; margin: -4px 0 -6px; } .gs-acts .btn { flex: 1; } /* ---------- Steps and activity: one card ---------- */ .card.mv-card { gap: 10px; padding: 14px; } .mv-main { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; } .mv-steps { min-width: 0; } .mv-v { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; } .mv-steps .small, .mv-kcal .small { margin: 0; color: var(--sub); } .mv-kcal { flex: none; text-align: right; padding-left: 12px; border-left: 1px solid var(--line); } .mv-fix { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: var(--fill); color: var(--ink); font: inherit; font-size: var(--t-callout); font-weight: 600; text-align: left; } .mv-fix .small { font-weight: 500; color: var(--sub); } .mv-fix svg { flex: none; color: var(--sub); } .mv-fix > svg:first-child { color: var(--bad-ink); } .mv-src { margin: 0; color: var(--sub); } @media (max-width: 389px) { .mv-kcal { padding-left: 10px; } .mv-v { font-size: 1.25rem; } } /* ---------- Last night (one colour with the Sleep screen; the debt in words) ---------- */ .home-night-v { font-weight: 700; } .home-night-debt { color: var(--sub); } .home-bars { gap: 2px; } .home-bars i { width: 4px; } .home-bars i.on { background: var(--accent); } .home-bars i.none { background: var(--track); opacity: 0.55; } /* ---------- Customize home: one line, drag handle ---------- */ .home-edit-row { min-height: 52px; padding: 4px 10px 4px 2px; gap: 6px; touch-action: pan-y; } .home-edit-row.dragging { background: var(--surface-3); box-shadow: var(--shadow-2); position: relative; z-index: 1; } .home-edit-text { font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .home-edit-handle { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--faint); border-radius: 10px; cursor: grab; touch-action: none; } .home-edit-handle:active { cursor: grabbing; background: var(--fill); color: var(--ink); } .home-edit-handle.fixed { cursor: default; } .home-edit-handle:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .home-edit-always { flex: none; color: var(--sub); padding: 0 6px; } .home-grip-inline { display: inline-flex; vertical-align: -3px; color: var(--faint); } .home-grip-inline svg { width: 14px; height: 14px; } /* ---------- Fuel ---------- */ .fuel-nextmeal { display: flex; align-items: center; gap: 4px; min-height: 44px; margin: -4px 0 -8px; padding-top: 10px; border-top: 1px solid var(--line); } .fuel-nextmeal .small { margin: 0; color: var(--sub); } .fuel-nextmeal-k { color: var(--ink); font-weight: 600; margin-right: 4px; } .fuel-nextmeal .info-dot { margin: -8px -10px -8px 0; } .card.fuel-water { gap: 12px; } .fuel-water-head { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; gap: 0; text-align: left; } .water-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .water-btns .water-quick { min-width: 0; padding-inline: 6px; } .fuel-drops { position: relative; height: 44px; margin: 0 -2px; color: var(--track); } .fuel-drops-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; } .fuel-drop { display: inline-flex; } .fuel-drop.on { color: var(--info); } .fuel-drop.on svg { fill: currentColor; } .fuel-drops-range { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; opacity: 0; cursor: pointer; touch-action: pan-y; } .fuel-drops:has(.fuel-drops-range:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); } .water-sheet, .water-other { gap: 14px; } .water-sheet .sub { margin: 2px 0 0; } .water-sizes .chip { min-height: 44px; } .water-less { align-self: flex-start; min-height: 44px; } .fuel-food-card { gap: 4px; padding-bottom: 8px; } .fuel-food-card .card-head { margin-bottom: 2px; } .fuel-food-card .fuel-food { margin: 0 -8px; } .fuel-rows .lr-value { white-space: nowrap; } /* Meal pick: a small "Lunch ▾" chip (a native select underneath) */ .meal-pick { position: relative; display: inline-flex; align-items: center; flex: none; min-height: 36px; border-radius: var(--r-pill); background: var(--fill); color: var(--ink); } .meal-pick select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--t-footnote); font-weight: 600; min-height: 44px; margin: -4px 0; padding: 0 30px 0 14px; border-radius: var(--r-pill); cursor: pointer; } .meal-pick select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .meal-pick svg { position: absolute; right: 11px; pointer-events: none; color: var(--sub); } .recent-to, .food-to { align-items: center; } .recent-to .small, .food-to .small { margin: 0; color: var(--sub); } .food-log .card-head .h3 { margin: 0; } .food-also { margin-top: -6px; } .food-back { align-self: flex-start; min-height: 44px; } .food-servings { min-height: 48px; } .food-result > .small { margin: -6px 0 0; color: var(--sub); } .scan-choice { gap: 14px; } /* ---------- Quick log ---------- */ .ql-sheet .r22-tiles4 .fuel-tile { min-height: 72px; } .ql-meal { padding: 0 12px 0 14px; border: 0; background: var(--fill); color: var(--ink); font: inherit; font-weight: 600; font-size: var(--t-callout); } .ql-meal .small { margin: 0; color: var(--sub); font-weight: 500; } .ql-meal svg { flex: none; color: var(--sub); } .ql-meal-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ql-water svg { color: var(--info-ink); } .ql-water .small { margin: 0; } .ql-sheet .ql-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ql-sheet .ql-tile { flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 4px; color: var(--ink); } .ql-sheet .ql-ico { width: auto; height: auto; flex: none; background: none; } .ql-sheet .ql-tile-txt { font-weight: 500; font-size: var(--t-footnote); line-height: 1.2; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); } /* ---------- Readiness screen ---------- */ .rdx-add { display: flex; flex-wrap: wrap; gap: 8px; } .rdx-loadrow .rdx-load { margin: 0; padding: 0; } /* ---------- Sleep ---------- */ .btn.slp-log { min-height: 44px; } .gtb-sheet { gap: 14px; } .gtb-sheet .sub { margin: -6px 0 0; } /* ---------- Vitamins ---------- */ .vit-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; align-self: flex-start; } .info-sheet .vit-links { margin-top: 4px; } /* Rollout 24 · integration: the small pieces that join the streams' work. */ /* Today's Next up uses Train's Change · Move · Skip (screens/dayactions.tsx): the same pills, sized like the day card. */ .nx-card .r22-dayacts .btn { padding-inline: 6px; gap: 6px; min-width: 0; font-size: var(--t-callout); } @media (max-width: 379px) { .nx-card .r22-dayacts .btn { font-size: var(--t-footnote); gap: 4px; padding-inline: 4px; } } /* Program hub (TRAIN): the page name never shrinks under its value ("Focus & seasonSeason 1 · Base 1" ran together at 390 px); the value takes what's left and ends in "…". */ .pg-hub .pg-hubrow .lr-title { flex: 1 0 auto; } .pg-hub .pg-hubrow .lr-value { flex: 0 1 auto; max-width: none; } /* Rollout 24 — SECURITY stream: the sign-in screen's leftover health data line, the console's security pieces. */ .hd-leftover { max-width: 420px; margin: 16px auto 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md, 12px); color: var(--sub); } .hd-leftover p { margin: 0 0 8px; } .ow-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: all; } .r24-wrap, .row-wrap { display: flex; flex-wrap: wrap; gap: 6px; } /* Rollout 24 · SOCIAL (UX audit Oct 14: Feed, Squad, profiles, tab bar). Calm Coach, shared tokens only (DESIGN.md). Gold stays on the one primary (the compose button, Add friend on a stranger's profile), the active tab pill and the selected tab's underline; "trained today" is sage (DESIGN rule 1), status colours only as status. */ /* ---------- Tab bar ---------- */ /* You = your initials ("JI"), the same as every other avatar (UX audit tab bar 4). */ .tab-av.two { letter-spacing: -0.03em; } /* The raised Feed disc reaches ~35 px above the bar: every page ends far enough above it that its last row (a week strip's Thursday, Save on Log activity) is never under the disc (UX audit tab bar 1 / Top 19). */ html:has(.tabbar-raised) .page.with-tabs { padding-bottom: 72px; } html:has(.tabbar-raised) .scroller { scroll-padding-bottom: 64px; } html:has(.tabbar-raised) .page.with-tabs:has(.fd-detail) { padding-bottom: 0; } /* ---------- Feed: header, faces row, Squad tile ---------- */ .fh { gap: 14px; } /* Trained today: a sage ring (was gold). */ .fh-face.on .fh-ring { box-shadow: inset 0 0 0 2.5px var(--good); } .fh-face-squad .fh-ring { position: relative; box-shadow: inset 0 0 0 1.5px var(--line-2); } .fh-squad-av.fc-avatar { background: var(--fill); color: var(--ink); } .fh-face-squad .fh-face-n { color: var(--ink); font-weight: 600; } .fh-rank { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); min-width: 30px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--sel); color: var(--on-sel); font-size: var(--t-caption); font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--bg); white-space: nowrap; } /* The share strip (was the compose row): one slim row — the session, Post, and ✕. */ .fd-strip { display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 10px var(--gutter) 4px; padding: 8px 4px 8px 12px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-1); } .fd-strip-t { min-width: 0; line-height: 1.3; } .fd-strip-t .lr-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fd-strip-t .small { margin: 1px 0 0; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn.fd-strip-post { flex: none; padding-inline: 16px; } .fd-strip-x { flex: none; width: 44px; height: 44px; margin-left: -6px; border: 0; border-radius: 50%; background: none; color: var(--sub); display: inline-flex; align-items: center; justify-content: center; } .fd-strip-x:active { background: var(--fill); } .fd-strip + .fd-posts { border-top: 1px solid var(--line); margin-top: 10px; } /* "Squad this week" in the list, after the third post. */ .fd-squad-slot { padding: 12px var(--gutter); border-bottom: 1px solid var(--line); } .fd-squad-slot .fh-squad { margin: 0; } /* Your reply while it's checked: "Sending…" / "In review"; a refused one says so with Try again. */ .fd-rstate { color: var(--sub); } .fd-rstate.bad { color: var(--bad-ink); font-weight: 600; } .fd-comment-local .fd-ctext { color: var(--sub); } .fd-comment-local.failed .fd-ctext { color: var(--ink); } .fd-author-static { display: inline-flex; align-items: baseline; min-width: 0; font-size: var(--t-callout); line-height: 1.5; } .fd-rfail { display: flex; gap: 8px; margin-top: 6px; } /* ---------- Add friends sheet: the invite link first ---------- */ .af-invite { display: flex; flex-direction: column; gap: 10px; } .af-invite-t .small { margin: 2px 0 0; color: var(--sub); } .af-invite-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .af-invite-acts .btn { justify-content: center; } .af-sheet .af-code { margin-bottom: 4px; } /* ---------- Squad ---------- */ .sq-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sq-titlerow .display { min-width: 0; } .sq-lb { gap: 12px; } /* Friends / Everyone: the Feed's underline tabs (not chips), not sticky here. */ .fh-tabs.sq-scope { position: static; margin: 0 calc(-1 * var(--gutter)) 0; } .sq-board { width: 100%; } .sq-board button { flex: 1; } .sq-board-sub { justify-content: flex-start; gap: 0; margin: -4px 0 -6px; min-height: 44px; } .sq-board-what { flex: 1; min-width: 0; margin: 0; color: var(--sub); } .sq-board-sub .info-dot { flex: none; margin-right: -10px; } .group > .sq-brow { padding-right: 10px; } .sq-brow .lr-chev { color: var(--faint); flex: none; margin-left: -4px; } .sq-brow.none .sq-bname .small { color: var(--faint); } .sq-none { min-width: 22px; text-align: center; font-weight: 600; color: var(--faint); } .sq-brow .fd-av.sq-av { width: 36px; height: 36px; } .sq-board-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 18px 18px; text-align: center; } .sq-board-empty .empty { padding: 14px 0 6px; } .sq-board-foot { margin: -4px 0 0; padding: 0 6px; border: 0; color: var(--sub); } .sq-frow { gap: 12px; padding-left: 16px; } .card.sq-ch-empty-card { gap: 12px; align-items: flex-start; } .sq-ch-empty-card .sq-ch-empty { padding: 0; } .sq-new-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .sq-new-opts .label { margin: 4px 0 0; } .sq-new-opts .seg button { flex: 1; } .sq-new-note { margin: 12px 0 4px; color: var(--sub); } .sq-your { margin-top: 4px; } /* ---------- Profiles ---------- */ .pf-head-top { align-items: flex-start; } .pf-head-t { min-width: 0; padding-top: 6px; } .pf-head-t .small { margin: 2px 0 0; color: var(--sub); } .iconbtn.pf-more { flex: none; margin: -4px -8px 0 0; } .pf-acts { display: flex; flex-direction: column; gap: 8px; } .pf-acts .btn { width: 100%; } .pf-partner { margin: 0; color: var(--sub); text-align: center; } .pf-menu .fd-mrow svg { width: 20px; height: 20px; } /* Your posts (your own profile route) */ .pf-who { margin: -6px 0 0; padding: 0 2px; color: var(--sub); line-height: 1.5; } .pf-who .linkbtn { display: inline; min-height: 0; padding: 0; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pf-preview-btn { position: relative; } .pf-preview-btn::after { content: ''; position: absolute; inset: -12px -4px; } .card.pf-setup { gap: 12px; } .pf-setup .small { margin: 0; color: var(--sub); } .pf-setup .btn { align-self: flex-start; } /* Posts as a list (the Feed's rows), edge to edge like the Feed. */ .pf-posts .fd-posts, .pf-mine .pf-posts .fd-posts { margin: 0 calc(-1 * var(--gutter)); border-top: 1px solid var(--line); } .pf-posts-load { padding: 4px 0; } /* The Fitness Score: the total on one line, the four parts below in equal columns (they spilled before). */ .pf-score-row.pf-score-r24 { flex-direction: column; align-items: stretch; gap: 12px; } .pf-score-r24 .pf-score-v { min-width: 0; } .pf-score-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .pf-score-week { color: var(--good-ink); font-weight: 600; } .pf-score-r24 .pf-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .pf-score-r24 .pf-part { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 12px; } .pf-score-r24 .pf-part dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-score-r24 .pf-part dd { flex: none; font-size: var(--t-callout); font-weight: 650; } /* A friend's squad numbers */ .card.pf-squad-card { gap: 14px; } .pf-squad-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; padding-top: 0; } .pf-compare { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); } .pf-cmp-head, .pf-cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; align-items: baseline; gap: 8px; } .pf-cmp-head .small { margin: 0; color: var(--sub); text-align: right; } .pf-cmp-head .label { margin: 0; } .pf-cmp-row { min-height: 36px; align-items: center; font-size: var(--t-callout); } .pf-cmp-row .num { text-align: right; font-weight: 600; } .pf-cmp-row .num:last-child { color: var(--sub); } /* The You header (ProfileHeader): one button when your profile isn't set up yet. */ .you-prof-acts.one { grid-template-columns: 1fr; } .you-prof-top .pf-avatar { flex: none; } /* ---------- Desktop (≥ 1024 px): the tab bar becomes a side rail (UX audit tab bar 5) ---------- The app column (640 px, centered from 760 px) widens by the rail on its left; the rail sits inside it, full height, and the raised Feed disc goes level like the other tabs. Fixed pieces that line up with the page move with it. */ @media (min-width: 1024px) { html:has(.tabbar) { --rail: 96px; } .shell:has(.tabbar) { left: calc(50% - 320px - var(--rail) / 2); right: calc(50% - 320px - var(--rail) / 2); padding-left: var(--rail); } .tabbar { position: absolute; top: 0; bottom: 0; left: 0; width: var(--rail); flex-direction: column; justify-content: flex-start; gap: 4px; padding: 88px 0 24px; border-top: 0; border-right: 1px solid var(--line); box-shadow: none; } .tabbar button, .tabbar button.tab-centre { flex: none; max-width: none; width: 100%; height: 72px; padding: 0; justify-content: center; gap: 4px; } .tabbar .tab-centre::before { display: block; } .tabbar-raised .tab-disc, :root .tabbar-raised .tab-disc { margin: 0; width: auto; height: auto; background: none !important; box-shadow: none; color: inherit; } .tabbar .tab-centre.on .tab-disc { color: var(--accent-ink); } .tabbar-raised .tab-disc svg { width: 24px; height: 24px; } html:has(.tabbar-raised) .page.with-tabs, html:has(.tabbar-raised) .page.with-tabs:has(.fd-fab) { padding-bottom: 32px; } html:has(.tabbar-raised) .page.with-tabs:has(.fd-fab) { padding-bottom: 96px; } html:has(.tabbar-raised) .fd-reply { padding-bottom: 10px; } html:has(.tabbar-raised) .scroller { scroll-padding-bottom: 24px; } .fd-fab { right: calc(50% - var(--rail) / 2 - var(--col) / 2 + var(--gutter)); bottom: 28px; } .shell:has(.wbar) .fd-fab { bottom: calc(28px + 49px); } /* The rest bar is docked at the top (TRAIN, rollout 24): only its centring follows the column. */ html:has(.tabbar) .restbar { translate: calc(var(--rail) / 2) 0; } } /* ---------- The post page: the reply bar is the screen's bottom edge ---------- */ /* Replies fill the page so the reply bar sits at the bottom even on a short thread (it floated mid-page), and the feedback row steps aside here — the reply bar already owns the bottom of this screen. */ .fd-detail .fd-replies { flex: 1 0 auto; } .page:has(.fd-detail) > .fb-fab { display: none; } .fd-reply-send { flex: none; display: inline-flex; } /* The Feed's compose button sits ~74 px above the tab bar: the page's last row (the feedback row) ends above it. */ html:has(.tabbar-raised) .page.with-tabs:has(.fd-fab) { padding-bottom: 100px; } /* A challenge's bars: ink for everyone (your row is bold) — gold stays on the one primary (DESIGN rule 1). */ .sq-ch-row.me .fh-segs i.on { background: var(--ink); } /* Rollout 24 (TRAIN stream): set check-off, the docked rest bar with the effort question and Undo, the weight sheet, the Adjust sheet's tool rows, the finish screen (Save + "Also post"), the day card's muscle line and the Train / Program / Cardio / builder fixes from UX-AUDIT-OCT14. This file loads before training.css / workout.css / season.css / run.css (name order), so its rules are scoped one class deeper than the ones they change. */ /* ---- Set check-off: one calm done state --------------------------------------------------------------------------- Before: the current set's check was gold, and a tap animated it gold → green while the next set's check turned gold (two colour changes at once, a 180 ms blend). Now: no transition, done = the soft sage tile with a sage tick, the set you're on keeps the gold tick. A larger 48 px target; the row's hit area doesn't grow into the reps box. */ .mode-precision .setcheck.sq { width: 48px; height: 48px; transition: none; touch-action: manipulation; } .mode-precision .setcheck.sq:active { transform: none; background: var(--fill-2); } .mode-precision .st-row.done .setcheck.sq, .mode-precision .setrow.done .setcheck.sq { background: var(--good-soft); color: var(--good-ink); } .mode-precision .setcheck.sq.cur:active { background: var(--accent); } .mode-precision .st-headrow, .mode-precision .st-row { grid-template-columns: 30px minmax(0, 1.1fr) minmax(0, 1fr) 52px; } .mode-precision .st-plain .st-row { grid-template-columns: 30px minmax(0, 1fr) auto 52px; } .mode-precision .st-ck { display: flex; justify-content: flex-end; } /* Weight and reps look like something you can tap (a subtle fill, audit workout 8). */ .mode-precision .st-row .tr-wchip:not(:disabled) { background: var(--fill); } .mode-precision .st-row input.mini.tr-reps:not(:disabled) { background: var(--fill); } .mode-precision .st-row.done .tr-wchip, .mode-precision .st-row.done input.mini.tr-reps { background: transparent; } .mode-precision .st-row input.mini.tr-reps:not(:disabled):focus { background: var(--card); } /* A done set's effort answer, changed in place (only when you tap it). */ .workout .tr-effort.tr-effort-row { margin: 0 0 8px 38px; } /* ---- The rest bar: docked under the back bar (audit top 2, workout 1 / 16 / 18) ------------------------------------ */ html body .restbar.r24-top { position: fixed; top: calc(var(--rb-top, 52px) + 6px); bottom: auto; left: 12px; right: 12px; max-width: 536px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 8px 6px 16px; z-index: 30; border-radius: var(--r-md); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-3); -webkit-backdrop-filter: none; backdrop-filter: none; animation: drop var(--dur-2) var(--ease-out); } .restbar.r24-top .rb-row { display: flex; align-items: center; gap: 6px; min-height: 44px; } .restbar.r24-top .restnum { font-size: 1.5rem; } .restbar.r24-top .rb-l { color: inherit; opacity: 0.75; } .restbar.r24-top button { color: inherit; padding: 0 10px; } .restbar.r24-top .rb-undo { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .restbar.r24-top .rb-ask { display: flex; align-items: center; gap: 6px; padding-bottom: 2px; } .restbar.r24-top .rb-q { flex: none; color: inherit; opacity: 0.8; margin-right: 2px; } .restbar.r24-top .tr-effort { margin: 0; flex: 1; flex-wrap: nowrap; gap: 6px; } .restbar.r24-top .tr-effbtn { flex: 1 1 0; min-width: 0; padding: 0 8px; background: color-mix(in srgb, var(--bg) 14%, transparent); color: inherit; } .restbar.r24-top .tr-effbtn.on { background: var(--bg); color: var(--ink); } /* Dark: a dark tile (it was bright ivory). */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .restbar.r24-top { background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--line-2); } :root:not([data-theme='light']) .restbar.r24-top .tr-effbtn { background: var(--fill-2); } :root:not([data-theme='light']) .restbar.r24-top .tr-effbtn.on { background: var(--sel); color: var(--on-sel); } } :root[data-theme='dark'] .restbar.r24-top { background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--line-2); } :root[data-theme='dark'] .restbar.r24-top .tr-effbtn { background: var(--fill-2); } :root[data-theme='dark'] .restbar.r24-top .tr-effbtn.on { background: var(--sel); color: var(--on-sel); } /* The page under it: no extra bottom padding (the bar isn't at the bottom any more); the set you're on scrolls below it. */ .page:has(.restbar.r24-top) { padding-bottom: 32px; } .scroller:has(.restbar.r24-top) { scroll-padding-top: calc(var(--rb-h, 64px) + 18px); } html.kb-open .restbar.r24-top { display: none; } /* ---- The weight sheet ----------------------------------------------------------------------------------------------- */ .tr-wsheet .tr-wedit { margin: 0; padding: 0; background: none; gap: 12px; } .tr-wsheet .tr-wsheet-big { align-self: center; } .tr-wsheet .tr-plates { justify-content: center; } .tr-wsheet .tr-wstep { gap: 10px; } .tr-wsheet .tr-step { min-width: 72px; min-height: 52px; background: var(--fill); box-shadow: none; font-size: var(--t-body); } .tr-wsheet .tr-win input.mini { width: 96px; min-height: 52px; background: var(--fill); text-align: center; font-size: 1.25rem; } .tr-wsheet .tr-wacts .linkbtn:last-child { align-self: flex-start; padding: 0; background: none; box-shadow: none; border-radius: 0; } /* ---- Exercise card: the name opens your history (a chevron, not a link underline; audit workout 9) ---------------- */ .workout .tr-exname .ex-name.tr-exhist { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; } .workout .tr-exname .ex-name.tr-exhist svg { flex: none; color: var(--sub); } /* Warm-ups stay on one line at 375 px (audit workout 19): the chips scroll sideways instead of wrapping. */ .workout .tr-warm-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -4px; padding-right: 4px; } .workout .tr-warm-list::-webkit-scrollbar { display: none; } .workout .tr-warmchip { padding: 0 10px; } /* ---- Adjust sheet: the three tools as its first rows ---------------------------------------------------------------- */ .wt-menu .r24-tools .lr-value { color: var(--accent-ink); font-weight: 600; } .wt-menu .r24-toolrow.on .lr-ico { background: var(--accent-soft); color: var(--accent-ink); } .wt-menu .r24-toolrow .small { margin: 0; } .tr-howline { margin: 0; } /* ---- Finish screen -------------------------------------------------------------------------------------------------- */ .r24-post { gap: 12px; } .r24-alsopost { padding: 0; } .r24-alsopost .small { margin-top: 2px; } .r22-finish .fd-card .pill { white-space: normal; max-width: 100%; } .r23-finish-pts .r24-prline { margin-left: auto; color: var(--good-ink); font-size: var(--t-footnote); } .r22-finish .r22-done-stats .st-s { white-space: normal; overflow-wrap: anywhere; } .r24-finish-empty .r24-empty-card .small { margin: 0; } .r24-discard { align-self: center; min-height: 44px; padding: 0 12px; color: var(--bad-ink); font-weight: 600; } /* ---- Train: the day card ------------------------------------------------------------------------------------------- */ .tr-day .tr-muscleline { margin: -4px 0 0; color: var(--sub); } /* ---- Train: header (audit train 4) — the title, then Lift | Cardio full width under it, the selected side clear in dark */ .r24-trhead .screen-head-top { align-items: center; } .r24-trhead .screen-head-top .display { margin: 0; flex: 1; min-width: 0; } .r24-trhead .seg.r24-lc { max-width: none; width: 100%; margin-top: 12px; } .r24-trhead .r24-lc button { flex: 1 1 0; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .r24-trhead .r24-lc button.on { background: var(--surface-3); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line-2); color: var(--ink); } } :root[data-theme='dark'] .r24-trhead .r24-lc button.on { background: var(--surface-3); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line-2); color: var(--ink); } /* Week strip: a logged day shows its tick; days before your season are quiet, not crossed out (audit top 10). */ .tr .wk-day.st-done .wk-dot, .tr .wk-day.st-partial .wk-dot { color: var(--good-ink); } .tr .wk-day.sel.st-done .wk-dot, .tr .wk-day.sel.st-partial .wk-dot { color: var(--on-sel); } .tr .wk-day.st-before .wk-num { color: var(--sub); } /* Day card: Change · Move · Skip keep their icons at 375 px (audit train 3). */ @media (max-width: 379px) { .tr-day .r22-dayacts .btn svg { display: inline-block; } .tr-day .r22-dayacts .btn { font-size: var(--t-footnote); gap: 4px; padding-inline: 4px; } } .r24-moved { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 12px; border-radius: var(--r-sm); background: var(--fill); color: var(--sub); } .r24-moved .small { margin: 0; color: var(--ink); font-weight: 600; } .r24-moved .linkbtn { min-height: 44px; padding: 0 10px; } .tr-doneday .r24-donestats .stat-tile.tile { padding: 12px; min-width: 0; box-shadow: none; background: var(--fill); } .tr-doneday .r24-donestats .st-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .r24-prline-day { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; } .r24-prline-day .pill { white-space: normal; } .r24-prline-day .small { margin: 0; } .r24-skipped .tr-daytitle { color: var(--sub); } .lp-allon { margin: 0; color: var(--sub); } .cw-groups button { font-size: var(--t-footnote); padding: 0 6px; } /* ---- Program hub and pages (audit program 1–5) ---------------------------------------------------------------------- */ .pg-hub .pg-hubrow .lr-title { white-space: nowrap; } .pg-hub .pg-hubrow .lr-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pg-hubnote { margin: 0; padding: 0 4px; } .pg-page .pg-restrow, .pg-page .pg-adddate-row { padding-inline: 0; border-bottom: 0; } .pg-page .pg-adddate-row > svg:first-child { color: var(--sub); } .pg-page .pg-dateacts { display: flex; flex-direction: column; gap: 8px; } /* ---- Cardio (audit cardio 1–7, 10) ---------------------------------------------------------------------------------- */ .rl .rl-ap.r24-ap { flex-direction: column; gap: 0; font-size: var(--t-caption); line-height: 1.05; font-weight: 700; } .rl .rl-flag.r24-flag { align-self: center; margin: 4px 0 0; } .rl .rl-controls.r24-rfcontrols { flex-direction: column; align-items: stretch; gap: 2px; } .rl .r24-rfdiscard { align-self: center; min-height: 44px; padding: 0 16px; color: var(--bad-ink); font-weight: 600; } .r24-todayrow { display: flex; align-items: center; gap: 12px; } .r24-firstrun .small { margin: 0; } .r24-acts .listrow .lr-value { white-space: nowrap; } .rd .rd-titlerow { display: flex; align-items: flex-start; gap: 8px; } .rd .rd-headacts { display: inline-flex; gap: 6px; flex: none; margin-top: 2px; } .zn-dot.zr { background: transparent; box-shadow: inset 0 0 0 2.5px var(--z5); } .tr-swap-sheet .r24-alts { padding: 0; } .tr-swap-sheet .r24-altrow { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 0; } .tr-swap-sheet .tr-altuse { min-height: 64px; padding: 10px 6px 10px 16px; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; } .tr-swap-sheet .tr-altuse:active { background: var(--fill); } .tr-swap-sheet .r24-altrow + .r24-altrow { border-top: 1px solid var(--line); } .tg .tg-openrow { padding-inline: 0; min-height: 44px; } /* Rollout 24 · YOU stream: Goals (rework), You, Progress + maxes, My maxes, Settings split, Help, onboarding / sign-up, paywall, What's new. Tokens only (DESIGN.md). */ /* ---------- Goals: rows (tap to edit), pace pill, now / goal, checkpoint marks ---------- */ .yg-row { padding: 0; gap: 0; } .yg-row + .yg-row { border-top: 1px solid var(--line); } .yg-tap { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; margin: 0; padding: 12px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } button.yg-tap { padding-right: 26px; } .yg-tap.static { cursor: default; } .yg-list > .yg-row:first-child .yg-tap { padding-top: 4px; } .yg-list > .yg-row:last-child .yg-tap { padding-bottom: 4px; } .yg-chev { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--faint); } button.yg-tap:active { background: color-mix(in srgb, var(--ink) 3%, transparent); } .yg-top { align-items: center; } .yg-top .pill { flex: none; } .yg-nums { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .yg-nums strong { font-size: var(--t-headline); font-weight: 650; } .yg-nums .small { color: var(--sub); } .yg-goalv { text-align: right; } .yg-bar { overflow: visible; } .yg-cp { position: absolute; top: -2px; width: 3px; height: 12px; margin-left: -1.5px; border-radius: 2px; background: var(--line-2); box-shadow: 0 0 0 2px var(--card); } .yg-cp.hit { background: var(--good); } .yg-step { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--sub); } .yg-hit { color: var(--good-ink); font-weight: 500; } .yg-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .yg-title .display { margin: 0; } .yg-empty { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; color: var(--ink); font: inherit; } .yg-empty .lr-chev { color: var(--faint); } .yg-period { width: 100%; } .yg-period button { flex: 1; } .yg-card .card-head .linkbtn { gap: 4px; } /* the edit sheet */ .yg-edit h2 { margin: 0; } .yg-edit .sheet-head .small { margin: 2px 0 0; color: var(--sub); } .yg-edit-body { gap: 12px; } .yg-edit-body > .label { margin-bottom: -4px; } .yg-periods { flex-wrap: wrap; } .yg-by { margin: -4px 0 0; color: var(--sub); } .yg-sug { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; border-radius: var(--r-md); background: var(--fill); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .yg-sug .small { color: var(--sub); } .yg-sug strong { font-size: var(--t-headline); font-weight: 650; } .yg-sug .linkbtn { pointer-events: none; } .yg-warn { margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn-ink); } .yg-tie { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--sub); } .yg-tie svg { flex: none; margin-top: 2px; } .yg-cps { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--fill); } .yg-cps-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; } .yg-cps-head .small { color: var(--sub); } .yg-cps-head .linkbtn { min-height: 44px; margin: -6px 0; } .yg-cps > .small { margin: 0; color: var(--sub); } .yg-cp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .yg-cp-row { display: flex; align-items: center; gap: 8px; min-height: 52px; } .yg-cp-row + .yg-cp-row { border-top: 1px solid var(--hairline); } .yg-cp-row .input.mini { min-height: 40px; padding: 6px 10px; border-radius: var(--r-sm); border: 0; background: var(--card); color: var(--ink); font: inherit; font-size: var(--t-callout); } .yg-cp-date .input.mini { width: 9.5rem; max-width: 46vw; } .yg-cp-v { display: flex; align-items: center; gap: 6px; min-width: 0; } .yg-cp-v .input.mini { width: 100%; min-width: 0; max-width: 6.5rem; font-variant-numeric: tabular-nums; } .yg-cp-v .small { color: var(--sub); } .yg-cp-ok { color: var(--good-ink); flex: none; } .yg-cp-add { align-self: flex-start; gap: 6px; min-height: 44px; margin-bottom: -6px; } .yg-kinds .yg-kind-group { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .yg-kinds .yg-kind-group:first-of-type { margin-top: 0; } .yg-kinds .group { margin: 0; } .yg-opt:disabled { opacity: 0.55; } .yg-opt:disabled .lr-chev { visibility: hidden; } /* ---------- You: Progress card with the four maxes ---------- */ .card.you-prog { display: flex; flex-direction: column; gap: 14px; } .you-prog-btn { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .you-prog-maxes { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); } .you-prog-mh { display: flex; align-items: center; justify-content: space-between; } .mxs { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; } .mxs-i { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: var(--fill); color: var(--ink); font: inherit; text-align: left; } button.mxs-i { cursor: pointer; } .mxs-k { font-size: var(--t-footnote); font-weight: 600; color: var(--sub); } .mxs-v { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .mxs-v small { margin-left: 3px; font-size: 0.8125rem; font-weight: 600; color: var(--sub); } .mxs-s { color: var(--sub); max-width: 100%; line-height: 1.3; } .pg-maxes { gap: 12px; } .pg-maxes .card-head .linkbtn { margin-block: -10px; gap: 4px; } /* ---------- My maxes: a read-only list, edit in a sheet ---------- */ .mx-list .mx-lift { gap: 12px; min-height: 64px; } .mx-list .mx-lift .small { color: var(--sub); } .mx-list .mx-num { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; } .mx-list .mx-num small { margin-left: 2px; font-size: 0.8125rem; font-weight: 600; color: var(--sub); } .mx-list .lr-chev { color: var(--faint); } .mx-sheet h2 { margin: 0; } .mx-sheet .sheet-head .small { margin: 2px 0 0; color: var(--sub); } .mx-form { margin-bottom: 14px; } .mx-form .mx-detail { margin: 0; color: var(--sub); } .mx-sheet .btn.mx-save:disabled { opacity: 1; background: var(--fill); border-color: transparent; box-shadow: none; color: var(--faint); } /* ---------- Score: points by week ---------- */ .sc-ev.has-best .sc-best { color: var(--good-ink); font-weight: 500; } /* ---------- Settings: index + pages ---------- */ .set-index .set-idx { margin: 0; } .set-idx .lr-value { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .set-page-title { margin-bottom: 2px; } .set-page [data-section] { scroll-margin-top: 88px; } .set-email { display: inline; overflow-wrap: normal; word-break: normal; } .set-email-part { white-space: nowrap; } .set-me-t { min-width: 0; } .set-signout { justify-content: flex-start; } .set-push .set-row-t { min-width: 0; } .set-push .good-ink { color: var(--good-ink); } .set-push .danger-ink { color: var(--bad-ink); } .set-remgroup + .set-remgroup { border-top: 1px solid var(--line); } .set-remgroup > .set-row { border-top: 0; } .set-remgroup .set-row .set-remgroup-t { appearance: none; -webkit-appearance: none; box-shadow: none; border-radius: 0; width: auto; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; min-height: 44px; justify-content: center; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .set-remgroup-t .small { color: var(--sub); } .set-remgroup.open .set-remgroup-t .lr-title::after { content: ''; } .set-remlist { margin: 0 0 6px; padding: 0 4px; border-radius: var(--r-md); background: var(--fill); } .set-remlist .remrow { min-height: 52px; gap: 10px; } .set-remlist .remrow .lr-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .set-remlist .remrow + .remrow { border-top: 1px solid var(--hairline); } .set-timechip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 5.5rem; padding: 0 12px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-size: var(--t-callout); font-weight: 600; } .set-timechip > input.set-timechip-in { position: absolute !important; opacity: 0 !important; min-width: 0 !important; max-width: none !important; min-height: 0; appearance: none; -webkit-appearance: none; background: none; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 1rem; } .set-timechip:focus-within { box-shadow: 0 0 0 2px var(--accent); } .set-start-l { display: flex; align-items: center; gap: 12px; width: 100%; } .set-select { width: auto; min-width: 7.5rem; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--r-ctl); background: var(--fill); color: var(--ink); font: inherit; font-weight: 600; } .r24-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .set-danger-zone .set-sec-title { color: var(--bad-ink); } .set-danger-zone .small { color: var(--sub); } .set-foot { color: var(--sub); } .set-targets .stepper { flex: none; } .set-p-ai .tell-set { margin-top: 4px; } .aic-row .info-dot { flex: none; } .sup-diag .set-diag { margin: 0; overflow-wrap: anywhere; } /* ---------- Help ---------- */ .set-list > .whylink.sup-topic { border: 0; display: flex; width: 100%; align-self: stretch; justify-content: flex-start; gap: 14px; min-height: 56px; padding: 10px 18px; border-radius: 0; background: none; color: var(--ink); font-size: var(--t-body); font-weight: 500; text-align: left; line-height: 1.3; } .set-list > .whylink.sup-topic > svg:first-child { color: var(--sub); } .set-list > .whylink.sup-topic + .whylink.sup-topic { border-top: 1px solid var(--line); } .sup-links { color: var(--sub); } .sup-card .sup-addr { overflow-wrap: anywhere; } /* ---------- What's new ---------- */ .wn-more { align-self: flex-start; min-height: 44px; margin: -6px 0 4px; } .wn-foot { flex-wrap: wrap; } /* ---------- Setup: six goal tiles first (the picker is shared with Program) ---------- */ .ob-goals { display: flex; flex-direction: column; gap: 10px; } .ob-goals-short .goal-card:is([aria-label^="Gain weight"], [aria-label^="Sport performance"], [aria-label^="Mobility"], [aria-label^="Pass a fitness"], [aria-label^="Come back"], [aria-label^="Other"]):not(.on) { display: none; } .ob-goals-more { align-self: flex-start; gap: 6px; min-height: 44px; text-align: left; } .ob-height { align-items: start; } /* ---------- Sign-up: a compact header (the selling points only on wide screens; never in the app) ---------- */ .r24-auth-hero { gap: 8px; padding-top: 14px; padding-bottom: 2px; } .r24-auth-hero .auth-title { font-size: 2.25rem; margin-top: 6px; max-width: none; } .r24-auth-hero .auth-lede { margin: 0; } .r24-auth-hero.is-app .auth-title { font-size: 2rem; } @media (max-width: 759px) { .r24-auth-hero .auth-points { display: none; } } /* ---------- Paywall: plans first, an ink edge on the chosen plan (gold stays for the button) ---------- */ .pw-plan.on { border-color: var(--ink); } .pw-plan.on .pw-radio { background: var(--sel); border-color: var(--sel); color: var(--on-sel); } .pw-features li { align-items: flex-start; } .pw-ftext { display: flex; flex-direction: column; gap: 2px; } .pw-ftext .small { color: var(--sub); font-weight: 400; } /* Profile Performance chips (UX audit: they spilled out at 375 px): one fix, SOCIAL's 2 × 2 grid in r24-social.css (.pf-score-r24) — the integration dropped this stream's duplicate rules. */ /* Rollout 25 integration: the small hooks between the WEB and SWEEP streams. */ /* What's new: "and N more" and "See every release" (the website's changelog) share one row of quiet links. */ .wn-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin: -6px 0 4px; } .wn-links .wn-more, .wn-links .wn-all { margin: 0; min-height: 44px; } /* Help › Fitness Score: the calculator link under the sheet's footnote. */ .sup-web { display: inline-flex; align-items: center; min-height: 44px; } /* Invite friends: "How it works" (aurek.app/referrals) beside the one-line summary. */ .ref-how { align-self: flex-start; min-height: 44px; } /* Profile counts (Jacob's decision 1): three when the owner doesn't share the Fitness Score. */ .pf-stats.pf-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* You › Progress week row (Jacob's decision 2): a day you trained outside the plan is a small dot, not a check. */ .you-week .you-wd.is-extra i { background: var(--fill); } .you-week .you-wd.is-extra i::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--good-ink); } /* Rollout 25 · SWEEP (Jacob: "weird buttons or tabs that don't seem right"): small layout fixes found by walking every screen. Tokens only. */ /* Program hub: where each page stands sits under its name (it was cut to "Max-out in …" beside it at 390 px). */ .pg-hub .pg-hubrow .pg-hubrow-t { min-width: 0; } .pg-hub .pg-hubrow .pg-hubrow-t .lr-title { white-space: normal; } .pg-hub .pg-hubrow .pg-hubrow-v { color: var(--sub); } /* You › Goals with no goals yet: one row (icon · text · chevron) — `.card` stacked it into a column. */ .yg-empty { flex-direction: row; } /* Settings › Units: "Use metric for everything" reads as an action. */ .set-metric .set-metric-go { flex: none; padding: 6px 14px; border-radius: var(--r-pill); background: var(--fill); color: var(--ink); font-size: var(--t-footnote); font-weight: 600; } /* Settings › Appearance › Tabs: You is always on (no switch). */ .set-always .lr-value { color: var(--sub); font-size: var(--t-footnote); } /* Your workouts › New workout: "Save workout" wrapped onto two lines beside "Do it today" (390 px); one line each, the pair wraps to two rows when there isn't room. */ .bw-actions .btn { white-space: nowrap; } /* Today › Getting started: "Enter my maxes" wrapped onto two lines beside "Not now" at 375–390 px. */ .gs-acts .btn { white-space: nowrap; padding-inline: 12px; } /* The workout's room for the rest bar (train.tsx RestSpace sets its height, display and margin). */ .workout > .r25-restspace { flex: none; display: none; } /* Swap sheet: the name is part of the "use this one" row, not a link of its own — no link underline (UX audit workout 9 took it off the workout card; the swap sheet still had it). */ .tr-swap-sheet .altrow .ex-name { text-decoration: none; cursor: inherit; } /* The docked rest bar floats 6 px under the back bar; the page scrolling behind showed a cut-off sliver of text in that gap (e.g. half of "Upper A"). A band of the page colour fills it (a shadow of the tile, moved up). */ html body .restbar.r24-top { box-shadow: 0 -8px 0 0 var(--bg), var(--shadow-3); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .restbar.r24-top { box-shadow: 0 -8px 0 0 var(--bg), var(--shadow-3), inset 0 0 0 1px var(--line-2); } } :root[data-theme='dark'] .restbar.r24-top { box-shadow: 0 -8px 0 0 var(--bg), var(--shadow-3), inset 0 0 0 1px var(--line-2); } /* What's new: with "See your score" and "Set goals" beside it, the gold "Got it" was squeezed into a 52 px circle with its words on two lines. The links share the first row, Got it takes the whole second row. */ .wn-foot .btn { flex: 1 1 auto; white-space: nowrap; } .wn-foot .btn.grow { flex-basis: 100%; } /* Schedule: the space "Previous week" keeps on this week (the arrow isn't shown there), so the title stays centred. */ .sch-week .sch-navspace { flex: none; width: var(--tap); height: var(--tap); } /* A main button that can't be tapped yet is a quiet neutral pill everywhere — My maxes had this (rollout 24, UX audit You 10: the faded gold looked muddy in dark mode); Fitness test, New post, Find, Start challenge, What's new… still showed the faded gold. */ .btn.btn-primary:disabled { opacity: 1; background: var(--fill); border-color: transparent; box-shadow: none; color: var(--faint); } .btn.btn-primary:disabled svg { opacity: 0.7; } /* Help: "About Aurek · Terms and privacy" — the second is a button now, styled like the link beside it. */ .sup-links .linkbtn { font-size: inherit; padding: 0 2px; vertical-align: middle; } /* Admin console › App controls › Team accounts at phone width: "Alwa ys" broke mid-word and the email split at "example.co m". The status column stays one word; the email breaks after the @ when it has to. */ [data-testid='team-accounts'] .ow-table td:last-child { white-space: nowrap; } [data-testid='team-accounts'] .ow-email { overflow-wrap: normal; word-break: normal; } /* Settings › Your data: the legal links are a line of text beside the ⓘ (more.tsx). */ .set-legal > p { margin: 0; color: inherit; } /* R25 (website + social plan): the admin console's Optimize › Social view (src/app/screens/consolesocial.tsx) and the App use / Social switch above Optimize. Tokens only (DESIGN.md). */ .op-view { margin-bottom: var(--sp-3); align-self: flex-start; } .op-linkb { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: var(--sp-3) 0; } .op-linkb .field { display: grid; gap: var(--sp-1); } .op-linkb input, .op-linkb select { min-height: var(--tap); } .op-link { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--fill); color: var(--ink); font-size: var(--t-footnote); overflow-wrap: anywhere; } .op-actions { margin: var(--sp-1) 0 var(--sp-2); } .op-nowrap { white-space: nowrap; } /* ========================================================================= Run tab: tab bar with 6 tabs, maps, charts, the live run screen, finish + detail pages ========================================================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Six tabs fit a 375 px phone (the tab bar itself is in styles.css). */ .tabbar.many button { min-width: 0; } @media (max-width: 360px) { .tabbar.many button { letter-spacing: -0.01em; } } /* ---------- map (Leaflet + OpenStreetMap) ---------- */ .rmap { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--card2); } .rmap-el { position: absolute; inset: 0; background: var(--card2); font: 0.75rem/1.4 var(--body); } .rmap .leaflet-container { background: var(--card2); } .rmap path.rmap-line { stroke: var(--accent); } .rmap path.rmap-casing { stroke: #0b0c0f; stroke-opacity: 0.35; } .rmap path.rmap-start { stroke: #fff; fill: var(--good); fill-opacity: 1; } .rmap path.rmap-end { stroke: #fff; fill: #0f1115; fill-opacity: 1; } .rmap path.rmap-now { stroke: #fff; fill: var(--info); fill-opacity: 1; } .rmap .leaflet-control-attribution { font-size: 0.6875rem; line-height: 1.3; padding: 1px 6px; background: color-mix(in srgb, var(--card) 82%, transparent); color: var(--sub); border-top-left-radius: 8px; } .rmap .leaflet-control-attribution a { color: var(--ink); } .rmap .leaflet-bar { border: 1px solid var(--hairline); box-shadow: var(--shadow-1); border-radius: 10px; overflow: hidden; } .rmap .leaflet-bar a { background: var(--card); color: var(--ink); border-bottom-color: var(--line); } .rmap .leaflet-bar a.leaflet-disabled { background: var(--card2); color: var(--sub); } /* Dark theme: dim + invert the (light) street tiles so the map isn't a white slab at night. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .rmap .rmap-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7); } :root:not([data-theme='light']) .rmap path.rmap-casing { stroke: #000; stroke-opacity: 0.6; } } :root[data-theme='dark'] .rmap .rmap-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7); } :root[data-theme='dark'] .rmap path.rmap-casing { stroke: #000; stroke-opacity: 0.6; } .rthumb { display: block; color: var(--ink); } /* ---------- Cardio tab (rollout 16 redesign) ---------- */ .run { gap: 16px; } .run .rplan { gap: 10px; } .rplan-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--ink); } .rplan-targets { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; } .rstart { display: flex; flex-direction: column; gap: 10px; } /* Activity picker: neutral tiles, the pick in the selection colour (ink / white), like a segmented control. */ .cd-types .cd-type { min-height: 60px; border: 0; background: var(--card); box-shadow: var(--shadow-1); outline: 1px solid var(--hairline); outline-offset: -1px; font-weight: 500; font-size: var(--t-footnote); color: var(--ink); border-radius: var(--r-md); } .cd-types .cd-type svg { color: var(--sub); } .cd-types .cd-type.on { background: var(--sel); color: var(--on-sel); outline-color: var(--sel); box-shadow: none; font-weight: 600; } .cd-types .cd-type.on svg { color: var(--on-sel); } .rstart-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h); border-radius: var(--r-pill); border: 0; background: var(--accent); color: var(--on-accent); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; transition: transform var(--dur-1) var(--ease-out), filter var(--dur-2) ease; } .rstart-btn:active { transform: scale(0.98); filter: brightness(0.94); } .rstart-btn.secondary { min-height: var(--btn-h); font-size: var(--t-body); background: var(--fill); color: var(--ink); } .rstart .small { padding-inline: 8px; } .rstart-note { margin: -2px 0 0; text-wrap: balance; } /* Post your latest (postlatest.tsx): secondary here — Start is this screen's one primary. */ .run .pf-postlatest .btn-primary { background: var(--fill); color: var(--ink); border-color: transparent; } .rstats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .rstat { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rstat-v { font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); } .rstat-v small { font-family: var(--body); font-size: 0.5em; font-weight: 500; color: var(--sub); letter-spacing: 0; } .rstat.big .rstat-v { font-size: 1.75rem; } .rstat-l { font-size: var(--t-footnote); color: var(--sub); font-weight: 500; } .rweek, .rchart { display: flex; flex-direction: column; gap: 4px; } .rweek-head { padding-top: 12px; border-top: 1px solid var(--line); margin-bottom: -6px; } .rweek-read { min-height: 18px; } .rweek-read strong { color: var(--ink); font-weight: 600; } .rweek-bar, .rchart-pt { cursor: pointer; } /* Personal bests: one card, 2 × 2 stats split by hairlines (no tile per number). */ .rbests { display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; } .rbest { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 14px 16px; background: none; border: 0; border-top: 1px solid var(--line); min-width: 0; color: var(--ink); } .rbest:nth-child(-n + 2) { border-top: 0; } .rbest:nth-child(2n) { border-left: 1px solid var(--line); } .rbest:disabled { opacity: 1; } .rbest.tappable:active { background: var(--fill); } .rbest-l { font-size: var(--t-footnote); font-weight: 500; color: var(--sub); } .rbest-v { font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; } .rbest:disabled .rbest-v { color: var(--faint); font-weight: 500; } .rvo2 { padding-inline: 4px; } .rlist { padding-block: 4px; gap: 0; } .rrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink); min-height: 72px; } .rrow:last-child { border-bottom: 0; } .rrow:active { opacity: 0.7; } .rrow-thumb { flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--fill); display: flex; align-items: center; justify-content: center; } .rrow-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .rrow-main .lr-title { font-weight: 600; } .rrow-type { display: inline-flex; align-items: center; gap: 4px; } .rrow-type svg { flex: none; } .rrow-nums { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--t-footnote); color: var(--sub); font-variant-numeric: tabular-nums; } .rrow-nums strong { color: var(--ink); font-weight: 600; } /* splits: pace bar longer = faster */ .rsplits { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .rsplits th { text-align: left; font-size: var(--t-footnote); font-weight: 500; color: var(--sub); padding: 0 6px 6px 0; } .rsplits td { padding: 7px 6px 7px 0; border-top: 1px solid var(--line); white-space: nowrap; } .rsplits td:first-child, .rsplits th:first-child { width: 48px; } .rsplits td:nth-child(2) { width: 60px; } .rsplits .rsplits-barcol { width: 100%; } .rsplit-bar { display: block; height: 8px; border-radius: 4px; background: var(--line-2); min-width: 6px; } .rsplit-bar.best { background: var(--ink); } .rsplits td strong { font-weight: 600; } .rsplits td:last-child { text-align: right; padding-right: 0; } /* ---------- Settings / Train / Today entry points ---------- */ .tr-gps { gap: 10px; } /* ---------- Live run layer ---------- */ html.run-live .shell-main, html.run-live .tabbar, html.run-live .topbar { visibility: hidden; } .rl { position: fixed; inset: 0; bottom: calc(0px - var(--shim-b, 0px)); z-index: 45; display: flex; flex-direction: column; gap: 12px; background: var(--bg); padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 16px) calc(var(--safe-b) + 14px) calc(env(safe-area-inset-left, 0px) + 16px); overflow: hidden; overscroll-behavior: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; animation: fade 0.2s ease; } .rl > * { width: 100%; max-width: 560px; margin-inline: auto; flex: none; } .rl-top { display: flex; align-items: center; gap: 8px; min-height: 48px; } .rl-gps { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--fill); border: 0; font-size: var(--t-footnote); font-weight: 600; white-space: nowrap; } .rl-gps rect { fill: var(--track); } .rl-gps.q-good rect.on { fill: var(--good); } .rl-gps.q-ok rect.on { fill: var(--ink); } .rl-gps.q-poor rect.on { fill: var(--warn); } .rl-gps.q-none { color: var(--bad); } .rl-acc { color: var(--sub); font-weight: 600; } .rl-flag { padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-ink); font-size: var(--t-footnote); font-weight: 600; animation: rlblink 1.6s ease-in-out infinite; } .rl-icon { width: 48px; height: 48px; border-radius: var(--r-md); border: 0; background: var(--fill); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; } .rl-icon.on { background: var(--sel); color: var(--on-sel); } .rl-icon.off { color: var(--sub); } .rl-icon:disabled { opacity: 0.4; } .rl-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-footnote); line-height: 1.4; color: var(--sub); padding: 10px 12px; border-radius: var(--r-md); background: var(--fill); border: 0; } .rl-note svg { flex: none; margin-top: 1px; color: var(--info-ink); } .rl-guide { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--card); border: 1.5px solid var(--accent); } .rl-guide-step { font-size: var(--t-footnote); font-weight: 500; color: var(--sub); } .rl-guide-label { font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .rl-guide-pace { font-size: var(--t-callout); font-weight: 600; color: var(--ink); } .rl-guide-left { text-align: right; } .rl-guide-left .num { font-size: 1.875rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; } .rl-main-area { flex: 1 1 auto !important; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 18px; } .rl-map { flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column; } .rl-map .rmap { flex: 1 1 auto; height: auto !important; min-height: 150px; } .rl-hero { text-align: center; } .rl-big { font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(56px, min(27vw, 13.5vh), 136px); line-height: 0.92; letter-spacing: -0.045em; } .rl-big-l { font-size: var(--t-callout); font-weight: 500; color: var(--sub); margin-top: 4px; } .rl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .rl-metric { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 12px 14px; min-width: 0; } .rl-metric-v { font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(24px, min(10vw, 5.4vh), 42px); line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; } .rl-metric-v small { font-family: var(--body); font-size: 0.875rem; font-weight: 500; color: var(--sub); letter-spacing: 0; margin-left: 2px; } .rl-metric-l { font-size: var(--t-footnote); font-weight: 500; color: var(--sub); margin-top: 2px; } .rl.with-map .rl-main-area { justify-content: flex-start; gap: 10px; } .rl.with-map .rl-big { font-size: clamp(56px, 17vw, 80px); } .rl.with-map .rl-metric { padding: 8px 12px; } .rl.with-map .rl-metric-v { font-size: clamp(24px, 7.5vw, 32px); } .rl.is-paused .rl-big, .rl.is-paused .rl-metric-v { color: var(--sub); } .rl-controls { display: flex; gap: 12px; } .rl-btn { position: relative; overflow: hidden; flex: 1; min-height: 80px; border-radius: var(--r-lg); border: 0; background: var(--fill); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; touch-action: none; -webkit-touch-callout: none; } .rl-btn > * { position: relative; } .rl-btn:active { transform: scale(0.985); } .rl-main { flex: 1.25; background: var(--accent); color: var(--on-accent); } .rl-sec.wide { flex: 1; } .rl-finish-fill { position: absolute !important; inset: 0; background: color-mix(in srgb, var(--bad) 30%, transparent); transform: scaleX(0); transform-origin: left center; } .rl-finish.holding .rl-finish-fill { transform: scaleX(1); transition: transform 0.9s linear; } .rl-finish svg { color: var(--bad-ink); } .rl-state { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding-inline: 8px; overflow-y: auto; } .rl-state h2 { font-size: var(--t-title); font-weight: 700; letter-spacing: -0.02em; } .rl-state-icon { position: relative; width: 84px; height: 84px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--ink); } .rl-state-icon.bad { background: color-mix(in srgb, var(--bad) 14%, var(--card)); color: var(--bad-ink); } .rl-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line-2); animation: rlpulse 1.6s ease-out infinite; } .rl-steps { text-align: left; margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 0.9375rem; line-height: 1.45; max-width: 420px; } @keyframes rlpulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } } @keyframes rlblink { 50% { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .rl-pulse, .rl-flag { animation: none; } } @media (max-height: 700px) { .rl { gap: 8px; } .rl-note.ok { display: none; } .rl-guide { padding: 8px 12px; } .rl-guide-label { font-size: 1.125rem; } .rl-main-area { gap: 10px; } .rl-btn { min-height: 72px; } .rl-metric { padding: 9px 12px; } } /* finish screen: scrolls, buttons stay at the bottom */ .rl-finishscreen { gap: 0; padding-bottom: 0; user-select: text; -webkit-user-select: text; } .rf-scroll { flex: 1 1 auto !important; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; max-width: none !important; margin: 0 -16px !important; width: auto !important; } .rf-page { max-width: 560px; margin: 0 auto; padding: 4px 16px 20px; } .rf-controls { padding: 12px 0 calc(var(--safe-b) + 14px); border-top: 1px solid var(--line); background: var(--bg); } .rf-controls .btn { min-height: 56px; } html.kb-open .rf-controls { display: none; } /* ---------- run detail ---------- */ .rd-title { overflow-wrap: anywhere; margin-top: 2px; } .rd-tags { margin-top: 8px; } .rd-note { margin-top: 8px; white-space: pre-wrap; } .rd-more { padding-top: 14px; border-top: 1px solid var(--line); } .rd-privacy.card { flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; } .rd-type { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-footnote); font-weight: 500; color: var(--sub); } .rd-actions { display: flex; flex-direction: column; gap: 8px; } .rd-actions .rd-delete { color: var(--bad-ink); } .rd-stats .rstats3 { row-gap: 16px; } .rd-kcal { margin: 0; } .rd-efforts { padding-block: 4px; gap: 0; } .rd-effort { min-height: 52px; border-bottom: 1px solid var(--line); } .rd-effort strong { font-weight: 600; } .rd-effort:last-child { border-bottom: 0; } .rd-foot { display: flex; align-items: center; justify-content: center; gap: 6px; } .rd-hidden { flex-direction: row; align-items: center; gap: 12px; } .rd-hidden svg { flex: none; } .rstart-gps { display: flex; align-items: center; justify-content: center; gap: 10px; } .rstart-err { gap: 6px; } .rl-note.ok { background: var(--fill); } .rl-note.ok svg { color: var(--good-ink); } .rl-lost { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-footnote); font-weight: 500; line-height: 1.4; padding: 10px 12px; border-radius: var(--r-md); color: var(--warn-ink); background: color-mix(in srgb, var(--warn) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); } .rl-lost svg { flex: none; margin-top: 2px; } .rl-guide.k-recover, .rl-guide.k-cooldown, .rl-guide.k-warmup { border-color: var(--info); } .rl-guide.k-done { border-color: var(--good); } .rl-guide-next { font-size: var(--t-footnote); color: var(--sub); font-weight: 500; margin-top: 2px; } .rl-ap { display: inline-flex; align-items: center; gap: 1px; font-weight: 700; font-size: 0.9375rem; } .rl-state-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; margin-top: 6px; } .run .pf-postlatest .fd-card-icon { background: var(--fill); color: var(--ink); } /* Paused / auto-paused: the flag takes the room, the GPS pill keeps only its bars (the full status is its aria-label). */ .rl-top { gap: 6px; } .rl-top .rl-icon { width: 46px; height: 46px; } /* ---------- rollout 18 (Athletic Precision): small-caps labels over the numbers, quiet secondary numbers ---------- */ .run .rrow-nums span { font-weight: 500; } .rstat { gap: 4px; flex-direction: column-reverse; justify-content: flex-end; } .rstat .rstat-l { color: var(--sub); } .rbest { gap: 4px; } .rbest .rbest-l { color: var(--sub); } .rl-metric { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; } .rl-metric .rl-metric-l { margin: 0; color: var(--sub); } .rl-big-l { font-weight: 600; } .rf-page .card { gap: 10px; } .mode-precision .rsplits th { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .mode-precision .rl-big-l { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); margin-top: 8px; } /* 44 px targets: "No GPS" in the readable red; units under the stats ≥ 12 px. */ .rl-gps.q-none { color: var(--bad-ink); } .rstat-v small { font-size: 0.75rem; } /* Rollout 15 "safety": the AI consent sheet + Settings card (screens/aiconsent.tsx), the notice banner and the update-required screen (screens/notice.tsx), Admin › Ops (screens/adminmod.tsx). */ .aic-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 0; margin: 4px 0 2px; } .aic-list dt { font-weight: 700; font-size: 0.875rem; margin-top: 8px; } .aic-list dd { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--sub); overflow-wrap: anywhere; } .aic-actions { gap: 8px; } /* Notice banner (screens/notice.tsx): below the offline strip, above the page; never wider than the screen. */ .notice-strip { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px 10px var(--gutter); font-size: var(--t-footnote); font-weight: 500; line-height: 1.4; border-bottom: 1px solid var(--hairline); } .notice-strip.info { background: color-mix(in srgb, var(--info) 9%, var(--bg)); color: var(--ink); } .notice-strip.warn { background: color-mix(in srgb, var(--warn) 12%, var(--bg)); color: var(--ink); } .notice-strip p { margin: 0; min-width: 0; overflow-wrap: anywhere; } .notice-strip > svg { flex: none; margin-top: 2px; } .notice-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -12px -12px 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; } .notice-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Update required (iPhone app below config/public.minBuild). */ .upd-gate { max-width: 460px; margin: 0 auto; padding-top: 12vh; text-align: center; } .upd-hero { display: grid; justify-items: center; gap: 10px; } /* Admin tools › Ops (screens/adminmod.tsx) */ .ops-card { gap: 10px; } .ops-current { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-md, 12px); background: var(--card2); } .ops-current p { margin: 0; overflow-wrap: anywhere; } /* Rollout 16 round 2: the AI consent sheet's icon in ink; the terms list quieter. */ .aic-ico { color: var(--ink); flex: none; } .aic-list dt { font-weight: 600; } /* ---------- Rollout 18 · Calm Coach: the AI consent sheet's head ---------- */ .aic-head { align-items: center; gap: 12px; } .aic-head .aic-ico { width: 40px; height: 40px; } .aic-list dt { font-size: var(--t-callout); color: var(--ink); } .aic-list dd { font-size: var(--t-callout); } .upd-gate { padding-top: 14vh; } .notice-strip { align-items: center; } /* Train tab (rollout 11, redesigned in rollout 16): season card + timeline, week strip, selected day, lift plan, the "More" list and the Program screen. Neutral first: the accent marks only this week on the season timeline (the screen's hero progress), the selected day's edge and the one primary button. */ .ph-intro, .ph-base, .ph-build, .ph-peak, .ph-deload, .ph-max { --ph: var(--ink); } .tr-head { align-items: flex-end; } /* This week: small-caps title + "0 OF 4 DONE" + the two week arrows, then the 7 day tiles. */ .tr-week { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .tr-weeknav { display: flex; align-items: center; gap: 6px; padding-left: 4px; } .tr-weektitle { flex: 1; min-width: 0; margin: 0; } .tr-weekdone { color: var(--ink); white-space: nowrap; margin-right: 4px; } .tr-weeknav .iconbtn { color: var(--ink); } /* ---------- season card (concept B) ---------- */ .ssn { display: flex; flex-direction: column; gap: 14px; } .ssn-top { display: flex; flex-direction: column; gap: 4px; } .ssn-row { display: flex; align-items: baseline; gap: 10px; } .ssn-season { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ssn-maxout { flex: none; color: var(--ink); white-space: nowrap; } .ssn-headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .ssn-title { display: block; font-size: var(--t-title); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; } .ssn-headline .ssn-title { font-size: 1.75rem; } .ssn-week { font-size: var(--t-headline); font-weight: 500; color: var(--sub); letter-spacing: -0.01em; } .ssn-target { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; margin: 0; } .ssn-target svg { color: var(--sub); flex: none; } /* Timeline: one tile per week (this week gold, done weeks ink-tinted, the deload outlined), its tag under it. */ .ssn-bar { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; } .ssn-w { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; position: relative; } .ssn-wt { display: block; width: 100%; height: 22px; border-radius: 6px; background: var(--track); } .ssn-w.done .ssn-wt { background: color-mix(in srgb, var(--ink) 30%, var(--card)); } .ssn-w.dl .ssn-wt, .ssn-w.ph-max .ssn-wt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); } .ssn-w.cur .ssn-wt { background: var(--accent); box-shadow: none; } .ssn-w.busy .ssn-wt { background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--card) 70%, transparent) 4px 7px); } .ssn-w.short .ssn-wt { opacity: 0.55; } .ssn-wl { font-size: var(--t-caption); font-weight: 600; color: var(--sub); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .ssn-w.cur .ssn-wl { color: var(--ink); font-weight: 700; } /* This week's prescription: the big "4 × 6" and its one line. */ .ssn-rx { display: flex; align-items: baseline; gap: 12px; padding: 0; border: 0; } .ssn-rx-big { flex: none; font-size: var(--t-num-md); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink); white-space: nowrap; } .ssn-rx-sub { font-size: var(--t-headline); font-weight: 500; color: var(--sub); } .ssn-why-on { color: var(--ink); margin: 0; } .ssn .ssn-more { margin-top: 2px; } .ssn-short { margin: 0; color: var(--sub); } /* ---------- 7-day strip: a tile per day; selected = ink, today = a gold bar, sessions = a dash ---------- */ .wk-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .wk-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 74px; padding: 8px 0 8px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--card); box-shadow: var(--shadow-1); color: var(--ink); min-width: 0; transition: background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out); } .wk-day:active { transform: scale(0.96); } @media (hover: hover) { .wk-day:hover:not(.sel) { background: var(--card2); } } .wk-dow { font-size: var(--t-caption); font-weight: 600; color: var(--sub); } .wk-num { font-size: 1.375rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .wk-dot { height: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--good); } .wk-mark { display: block; width: 16px; height: 3px; border-radius: 2px; background: var(--ink); opacity: 0.85; } .wk-mark.rest { background: transparent; } .wk-day.today .wk-mark { background: var(--accent); opacity: 1; } .wk-day.test .wk-dot { color: var(--bad); } .wk-day.rest { background: transparent; box-shadow: none; border-color: var(--hairline); } .wk-day.rest .wk-num { color: var(--sub); font-weight: 600; } .wk-day.today .wk-dow { color: var(--ink); font-weight: 700; } .wk-day.sel { background: var(--sel); border-color: var(--sel); color: var(--on-sel); box-shadow: var(--shadow-2); } .wk-day.sel .wk-dow, .wk-day.sel .wk-num, .wk-day.sel .wk-dot { color: var(--on-sel); } .wk-day.sel .wk-mark { background: var(--on-sel); opacity: 0.85; } .wk-day.sel.today .wk-mark { background: var(--accent); opacity: 1; } .wk-day.sel .wk-mark.rest { background: transparent; } .wk-day.st-skipped .wk-num { color: var(--sub); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--sub) 60%, transparent); } .wk-day.st-skipped.sel .wk-num { color: var(--on-sel); } /* ---------- selected day ---------- */ .tr-sel { gap: 12px; } .tr-sel .tr-dayhead { display: flex; align-items: baseline; gap: 10px; min-height: 0; } .tr-sel .tr-dayhead .label { flex: 1; min-width: 0; margin: 0; } .tr-sel .tr-dayhead .tr-est { flex: none; } .tr-titlerow { display: flex; align-items: center; gap: 12px; margin-top: -6px; } .tr-titlerow .tr-daytitle { flex: 1; min-width: 0; margin: 0; font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.15; } .tr-restday .tr-titlerow { margin-top: 0; } .tr-restday .tr-titlerow .small { margin: 2px 0 0; } .tr-sel .ms-dayline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: none; } .tr-note { color: var(--sub); margin: 0; } .tr-exlist { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .tr-exlist .tr-exrow { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--line); } .tr-exlist .tr-exrow:last-child { border-bottom: 0; } .tr-extag { flex: none; width: 24px; font-size: var(--t-caption); font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; } .tr-exrow .ms-exname { min-width: 0; font-weight: 600; } .tr-exrow .ms-exname .ex-name { text-decoration: none; } .tr-exrow > .small { flex: none; margin: 0; max-width: 55%; text-align: right; color: var(--sub); font-variant-numeric: tabular-nums; } .tr-exrow > .small b { color: var(--ink); font-weight: 700; } .tr-exlist .tr-exrow > .small.tr-planw { max-width: 55%; font-weight: 500; color: var(--sub); } .tr-dayactions { display: flex; align-items: center; gap: 10px; margin-top: 2px; } .tr-dayactions > .btn { flex: 1; } .tr-daymore.iconbtn { width: var(--btn-h); height: var(--btn-h); border-radius: var(--r-pill); flex: none; } /* ---------- swap / pick sheets ---------- */ .swap-list { display: flex; flex-direction: column; } .swap-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font-size: var(--t-body); } .swap-row:last-child { border-bottom: 0; } .swap-row:active { background: var(--fill); } .swap-row svg { color: var(--sub); flex: none; } .swap-row.on { font-weight: 600; } .swap-row.on svg { color: var(--ink); } .swap-day { flex: none; min-width: 64px; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---------- PR goals: Lift · Max · Goal rows (details in the row's sheet) ---------- */ .lp { gap: 0; padding-block: 12px 6px; } .lp-headrow, .lp-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px 16px; align-items: center; column-gap: 10px; } .lp-headrow { padding-bottom: 8px; border-bottom: 1px solid var(--line); } .lp-headrow .p-label:nth-child(2), .lp-headrow .p-label:nth-child(3) { text-align: right; } .lp-row { width: 100%; min-height: 60px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font: inherit; } .lp-row:last-child { border-bottom: 0; } .lp-row:active { opacity: 0.7; } .lp-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .lp-name strong { font-size: var(--t-headline); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-status { margin: 0; font-weight: 500; } .lp-status.sub { color: var(--sub); } .lp-max, .lp-goal { text-align: right; font-size: 1.1875rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .lp-max { color: var(--sub); font-weight: 500; } .lp-goal { font-weight: 700; } .lp-row .lr-chev { color: var(--faint); } .lp-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; } .lp-bar { flex: 1; min-width: 0; border-radius: 4px 4px 2px 2px; background: var(--fill-2); } .lp-bar.done { background: color-mix(in srgb, var(--ink) 32%, var(--card)); } .lp-bar.cur { background: var(--accent); } .lp-barsl { margin: -4px 0 0; } .lp-empty { gap: 12px; padding-block: 16px; } .lp-emptyrow { display: flex; align-items: center; gap: 12px; } .lp-emptyrow .small { margin: 2px 0 0; } /* ---------- More: a 4-up grid of tiles ---------- */ .tr-tools.p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tr-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 4px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--card); box-shadow: var(--shadow-1); color: var(--ink); text-align: center; } .tr-tool svg { color: var(--ink); } .tr-tool-l { font-size: var(--t-footnote); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } .tr-tool:active { transform: scale(0.97); } @media (hover: hover) { .tr-tool:hover { background: var(--card2); } } .mode-precision .section-head .linkbtn { font-size: var(--t-callout); } /* ---------- Program screen (rollout 18, Athletic Precision): small-caps section titles with one ⓘ each, rows with values, controls in tiles; the explanations live in the ⓘ sheets. ---------- */ .mode-precision .section-head { align-items: center; min-height: 32px; } .pg-card { display: flex; flex-direction: column; gap: 12px; } .pg-row { align-items: center; min-height: 48px; gap: 12px; } .pg-row .lr-title { font-weight: 600; } .pg-row .small { margin: 1px 0 0; } .pg-sub { padding-top: 12px; border-top: 1px solid var(--line); } .pg-sub > .lr-title { font-weight: 600; } .pg-sub .small { margin: 0; } .pg-toggle { min-height: 52px; padding-top: 4px; border-top: 1px solid var(--line); } .pg-toggle .lr-title { font-weight: 600; } .pg-target { align-items: center; gap: 10px; padding: 8px 4px 8px 12px; border-radius: var(--r-sm); background: var(--fill); } .pg-target svg { color: var(--sub); flex: none; } .pg-events { padding-top: 10px; border-top: 1px solid var(--line); } .pg-event { min-height: 44px; } .pg-adddate { padding-top: 12px; border-top: 1px solid var(--line); } .pg-targetin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } @media (min-width: 520px) { .pg-targetin { grid-template-columns: 200px minmax(0, 1fr); } } .pg-dateacts { display: flex; flex-direction: column-reverse; gap: 8px; } .pg-dateacts .btn { width: 100%; } .pg-equip { min-height: 52px; padding-block: 12px 4px; } .pg-equip .lr-title { font-weight: 600; } .pg-equip .lr-value { color: var(--sub); } .set-week .blk-busy { min-height: 52px; } .set-week > .small { margin: 0; } .pg-newseason { align-self: flex-start; margin: -4px -10px -6px; } .pg-links { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .pg-links .listrow { min-height: 48px; padding-block: 4px; } .pg-links .lr-title { font-weight: 600; } /* Option tiles (training style, progression): neutral, selected = ink fill (selection state). */ .pg-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .pg-opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: transparent; color: var(--ink); text-align: left; min-width: 0; transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease; } .pg-opt strong { font-weight: 700; } .pg-opt .small { margin: 0; line-height: 1.3; } .pg-opt.on { background: var(--sel); border-color: var(--sel); color: var(--on-sel); } .pg-opt.on .small { color: var(--on-sel); opacity: 0.8; } .pg-opt:active { transform: scale(0.98); } .pg-day { gap: 2px; padding-block: 14px 6px; } .pg-day > strong { font-size: var(--t-headline); font-weight: 700; padding-bottom: 6px; } .pg-slot { align-items: center; min-height: 48px; border-top: 1px solid var(--line); padding-block: 2px; } .pg-role { flex: none; width: 84px; color: var(--sub); font-weight: 600; font-size: var(--t-footnote); margin: 0; white-space: nowrap; } .pg-ex { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pg-slot .linkbtn { font-weight: 600; color: var(--sub); } @media (max-width: 380px) { .pg-opts.three { grid-template-columns: 1fr; } } .pg-gain .stepper .num { min-width: 70px; } .lp-sheet .is-k { font-weight: 600; } .lp-sheet .lp-bars { margin-top: 4px; } .pg-card > .pg-toggle:first-child, .pg-card > .wt:first-child > .pg-toggle:first-child { border-top: 0; padding-top: 0; } .pg-days .pg-dayrow { gap: 12px; } .pg-days .pg-dayrow .lr-title { font-weight: 600; } .pg-days .pg-dayrow .small { margin: 1px 0 0; } .wt-menu .pg-day { display: flex; flex-direction: column; } .wt-menu .pg-day .pg-slot:first-child { border-top: 0; } .pg-opts.pg-style { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-opts.pg-style > .pg-opt:first-child { grid-column: 1 / -1; } .tr-daymore svg { color: var(--ink); stroke-width: 2.5; } .wo-acts .iconbtn svg { stroke-width: 2; } /* Security: verify-email card, delete-account card — and (rollout 16 round 2) the sign-in / create-account screen (screens/account.tsx). The sign-in base styles live in home.css; this file loads after it and makes the hero calm: no glow, no gradient, neutral feature icons, one accent ring. */ /* ---------- sign in / create account ---------- */ .auth { gap: 20px; } .auth-hero { gap: 14px; padding-top: 24px; } .auth-hero::before { content: none; display: none; } .auth-wordmark { font-weight: 700; } .auth-title { font-weight: 800; letter-spacing: -0.045em; } .auth-lede { font-size: var(--t-body); max-width: 34ch; text-wrap: pretty; } .auth-points { gap: 12px; margin-top: 6px; } .auth-points li { font-weight: 500; font-size: var(--t-callout); } .auth-point-ico { width: 32px; height: 32px; border-radius: 9px; color: var(--ink); background: var(--fill); box-shadow: none; } .auth-card { gap: 16px; padding: 20px 18px; border-radius: var(--r-xl); box-shadow: var(--shadow-1); } .auth-head .h2 { font-size: var(--t-title); } .auth-link { color: var(--sub); font-weight: 500; } .auth-legal a { color: var(--ink); font-weight: 600; } @media (min-width: 760px) { .auth-hero { padding-top: 40px; } } /* ---------- confirm your email ---------- */ .sec-verify { gap: 12px; } .sec-verify-head { align-items: flex-start; } .sec-verify .small { margin: 2px 0 0; } .sec-verify-icon, .sec-delete-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; } .sec-verify-icon { color: var(--ink); background: var(--fill); } .sec-email { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .sec-verify .btn { min-height: 44px; } .sec-verify .vf-tips { margin: -4px 0 0; padding-left: 18px; font-size: var(--t-footnote); color: var(--sub); } .sec-verify .vf-tips li:last-child { list-style: none; margin-left: -18px; } .sec-verify .vf-tips .linkbtn { min-height: 44px; padding-block: 4px; } .sec-msg { margin: 0; font-weight: 600; } .sec-bad { color: var(--bad-ink); } /* ---------- delete my account ---------- */ .sec-delete { gap: 12px; } .sec-delete .small { margin: 2px 0 0; } .sec-delete-icon { color: var(--bad-ink); background: color-mix(in srgb, var(--bad) 11%, transparent); } .sec-danger-ghost { color: var(--bad-ink); } .sec-delete-form { display: flex; flex-direction: column; gap: 12px; } .sec-cancel { flex: none; } /* ---------- Rollout 18 · Calm Coach ---------- */ .auth-hero { padding-top: 28px; gap: 12px; } .auth-title { font-size: 2.75rem; line-height: 1.02; letter-spacing: -0.045em; } .auth-lede { color: var(--sub); max-width: none; } .auth-points { gap: 10px; margin-top: 4px; } .auth-points li { gap: 14px; font-weight: 500; } .auth-point-ico { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--fill); color: var(--ink); } .auth-card { border-radius: var(--r-lg); padding: 20px; gap: 16px; } .auth-head .small { color: var(--sub); font-size: var(--t-callout); } .sec-verify-t { display: flex; align-items: center; gap: 0; min-height: 28px; } .sec-verify-t .info-dot { margin-block: -10px; } .sec-verify .sec-verify-head .small { margin-top: 0; } .sec-delete { gap: 14px; } .sec-delete-icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--bad-soft); } .sec-verify-icon { width: 36px; height: 36px; border-radius: var(--r-sm); } .vf-help { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; } .vf-help .vf-spam { margin: 0; color: var(--ink); } .sec-verify .vf-help .vf-tips { margin: 0; } .sec-verify .vf-help .vf-tips li:last-child { margin-left: -18px; } /* Settings (src/app/screens/more.tsx › Settings) and its cards: notifications (push.tsx), weekly recap (recapsetting.tsx), units (units.tsx), your data (privacy.tsx, aiconsent.tsx), and the shared Settings-style pieces in setparts.tsx (SetSection, SetToggle, InfoDot, SegRow, Facts) that Squad, profile and the account screens reuse. Rollout 18 · Calm Coach: iOS-style grouped lists — one card per group, 56 px rows with hairlines, title + value + ⓘ (the explanation lives in the InfoSheet), no subtitles. Built from system tokens only. */ /* ---------- grouped lists (SetSection) ---------- */ .set-sec { gap: 8px; margin-top: 10px; } .set-sec .section-head { min-height: 32px; } .set-sec-tl { display: inline-flex; align-items: center; gap: 2px; min-width: 0; } .set-sec-title.label { font-size: var(--t-headline); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; } .set-list { display: flex; flex-direction: column; } .set-list > :not(.sheet-backdrop) { position: relative; } .set-list > :not(.sheet-backdrop) + :not(.sheet-backdrop)::before { content: ''; position: absolute; top: 0; right: 0; left: 18px; height: 1px; background: var(--line); pointer-events: none; } .set-list > .has-ico + *::before, .set-list > .has-ico + .has-ico::before { left: 68px; } .group.set-list > .listrow { padding: 10px 18px; border-bottom: 0; } .group.set-list > .listrow::before, .group.set-list > * + .listrow::before { left: 18px; } .group.set-list > .listrow.has-ico + .listrow::before, .group.set-list > .has-ico + .listrow.has-ico::before { left: 68px; } .set-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 18px; color: var(--ink); } .set-row.has-ico { gap: 14px; } .set-row > .lr-title, .set-row .lr-title { font-weight: 500; } .set-row-t { display: inline-flex; align-items: center; gap: 2px; min-width: 0; flex-wrap: wrap; } .set-row-t .lr-title { overflow-wrap: anywhere; } .set-list .listrow .lr-title { font-weight: 500; } .set-list .lr-value { font-size: var(--t-callout); } .set-note { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-height: 0; padding-block: 12px; } .set-note .small, .set-note.small { margin: 0; color: var(--sub); } /* The ⓘ (InfoDot): an icon-only 44 px button that sits right after a title; the icon itself is quiet. */ .set-sec-tl .info-dot { margin-block: -8px; } /* Switch rows (SetToggle): the title is a