/* Form: one stylesheet, mobile first, in cascade layers so order (not selector weight) decides. Phone: top bar + bottom tab bar, single column. ≥ 640px: wider grids. ≥ 900px: sidebar, two-column pages. ≥ 1280px: superset pairs side by side. Design rules - Cards (.panel) are for things you act on: forms, workout blocks. Reference content sits flat on the paper (.flat). - One saturated surface per screen: the cobalt .hero for the thing to do next. - Numbers you read from a bench (weights, reps, timers, scores) are set large in Barlow Condensed (.num). */ @layer tokens, base, layout, components, pages, utilities; @font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("fonts/barlow-400.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); } /* ===================================================================== Tokens ===================================================================== */ @layer tokens { :root { --paper: #f4f2ed; --surface: #ffffff; --ink: #1b1e26; --muted: #5b6170; --line: #d9d6ce; --line-strong: #bdb9b0; --accent: #2b4fc0; --accent-deep: #1d377f; --on-accent: #ffffff; --tint: #dfe5f6; --hero: #2b4fc0; --on-hero: #ffffff; --on-hero-muted: #c9d4f5; --hero-line: rgb(255 255 255 / 0.24); --amber: #9a5a00; --amber-soft: #fbeed5; --signal: #b3261e; --signal-soft: #fbe6e3; --heat-1: #cbd6f2; --heat-2: #97ade8; --heat-3: #5577d4; --heat-4: #2b4fc0; --photo-ground: #ffffff; --placeholder: #6b7080; --shadow: rgb(27 30 38 / 0.14); --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif; /* Type scale, ratio 1.2 */ --t-xs: 0.8rem; --t-s: 0.9rem; --t-m: 1rem; --t-l: 1.2rem; --t-xl: 1.44rem; --t-2xl: 1.73rem; --t-3xl: 2.5rem; --t-4xl: 3rem; /* Space scale */ --s-1: 4px; --s-1h: 6px; --s-2: 8px; --s-2h: 10px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --radius-card: 14px; --radius: 8px; --radius-btn: 10px; --tabbar-h: 64px; --sidebar-w: 232px; color-scheme: light; } /* Dark palette: follows the system unless is set (a toggle can set it later) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #121418; --surface: #1b1e24; --ink: #e7e8ec; --muted: #9ba1ad; --line: #2d3138; --line-strong: #414651; --accent: #8fb0ff; --accent-deep: #b8caff; --on-accent: #0c1226; --tint: #1f2740; --hero: #24408f; --on-hero: #eef2ff; --on-hero-muted: #bccaf3; --hero-line: rgb(255 255 255 / 0.18); --amber: #f0b45a; --amber-soft: #3a2e1a; --signal: #f28b82; --signal-soft: #3b2220; --heat-1: #252d45; --heat-2: #2f4070; --heat-3: #4a6cc4; --heat-4: #8fb0ff; --photo-ground: #e6e7ea; --placeholder: #8b919d; --shadow: rgb(0 0 0 / 0.45); color-scheme: dark; } } :root[data-theme="dark"] { --paper: #121418; --surface: #1b1e24; --ink: #e7e8ec; --muted: #9ba1ad; --line: #2d3138; --line-strong: #414651; --accent: #8fb0ff; --accent-deep: #b8caff; --on-accent: #0c1226; --tint: #1f2740; --hero: #24408f; --on-hero: #eef2ff; --on-hero-muted: #bccaf3; --hero-line: rgb(255 255 255 / 0.18); --amber: #f0b45a; --amber-soft: #3a2e1a; --signal: #f28b82; --signal-soft: #3b2220; --heat-1: #252d45; --heat-2: #2f4070; --heat-3: #4a6cc4; --heat-4: #8fb0ff; --photo-ground: #e6e7ea; --placeholder: #8b919d; --shadow: rgb(0 0 0 / 0.45); color-scheme: dark; } } /* ===================================================================== Base ===================================================================== */ @layer base { * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-m)/1.5 var(--font-body); } a { color: var(--accent); text-underline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; margin: 0 0 var(--s-2); letter-spacing: 0.005em; } h1 { font-size: var(--t-3xl); font-weight: 700; } h2 { font-size: var(--t-xl); font-weight: 600; } h3 { font-size: var(--t-l); font-weight: 600; } h4 { font-size: var(--t-m); font-weight: 600; } p { margin: 0 0 var(--s-2); } ul, ol { margin: 0 0 var(--s-2); padding-left: 1.2rem; } strong { font-weight: 600; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } label { display: block; font-weight: 600; font-size: var(--t-s); margin: var(--s-3) 0 0; } /* :where keeps these at zero specificity, so any component class overrides them */ :where(input:not([type="checkbox"], [type="radio"]), select, textarea) { display: block; width: 100%; margin-top: var(--s-1); padding: 9px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: 400 var(--t-m)/1.3 var(--font-body); } :where(input:not([type="checkbox"], [type="radio"]), select, textarea):hover { border-color: var(--muted); } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } table { border-collapse: collapse; width: 100%; font-size: var(--t-s); } th, td { border-bottom: 1px solid var(--line); padding: 7px var(--s-2h) 7px 0; text-align: left; vertical-align: top; } th { color: var(--muted); font-weight: 600; white-space: nowrap; } td { font-variant-numeric: tabular-nums; } td.high { color: var(--signal); font-weight: 700; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } } /* ===================================================================== Layout: frame, navigation, page grids ===================================================================== */ @layer layout { body.app { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-4)); } .brand { display: inline-flex; gap: var(--s-2h); align-items: center; font: 700 var(--t-xl)/1 var(--font-display); color: var(--ink); text-decoration: none; } .brand img { border-radius: 7px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: calc(var(--s-2h) + env(safe-area-inset-top)) var(--s-4) var(--s-1h); } .live-workout { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 4px 12px; border-radius: 99px; background: var(--hero); color: var(--on-hero); font-weight: 600; font-size: var(--t-s); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-hero); flex: none; } .sidebar { display: none; } .skip-link { position: absolute; left: var(--s-2); top: -100px; z-index: 100; padding: var(--s-2) var(--s-3); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; } .skip-link:focus { top: var(--s-2); } /* Saves waiting on this phone (no signal): a pill above the tab bar, tap to retry */ .unsynced { position: fixed; left: 50%; transform: translateX(-50%); z-index: 21; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-3)); min-height: 36px; padding: var(--s-1h) 14px; border-radius: 99px; border: 1px solid var(--amber); background: var(--amber-soft); color: var(--amber); font: 600 var(--t-s)/1.2 var(--font-body); cursor: pointer; white-space: nowrap; box-shadow: 0 8px 24px var(--shadow); } .page { width: 100%; max-width: 720px; margin: 0 auto; padding-inline: var(--s-4); padding-block: var(--s-1) var(--s-4); } body.public .page { max-width: 440px; } .page-head { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: flex-end; justify-content: space-between; margin: var(--s-2) 0 var(--s-4); } .page-head h1 { margin-bottom: 2px; } .page-head p { margin: 0; } .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); text-decoration: none; font-size: var(--t-xs); font-weight: 600; min-width: 0; } .tab svg, .side-link svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .tab.active { color: var(--accent); } /* Split layout: .split-side flows inline on phones (display: contents keeps the action bar sticky to the form) */ .split-side { display: contents; } @media (min-width: 640px) { .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); } } @media (min-width: 900px) { body.app { padding-bottom: 0; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .topbar, .tabbar { display: none; } .unsynced { bottom: var(--s-4); } .sidebar { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: var(--s-5) 14px 20px; background: var(--surface); border-right: 1px solid var(--line); } .sidebar .brand { padding: 0 var(--s-2h); } .sidebar .live-workout { align-self: flex-start; margin: 0 var(--s-1h); } .sidebar-date { margin: 0; padding: 0 var(--s-2h); color: var(--muted); font-weight: 600; line-height: 1.3; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; } .side-link { display: flex; align-items: center; gap: var(--s-3); padding: 9px var(--s-2h); border-radius: var(--radius-btn); color: var(--ink); text-decoration: none; font-weight: 600; } .side-link:hover { background: var(--paper); } .side-link.active { background: var(--tint); color: var(--accent); font-weight: 600; } .side-more { padding-top: var(--s-3); border-top: 1px solid var(--line); } .side-more .side-link { padding: var(--s-1h) var(--s-2h) var(--s-1h) 44px; font-size: var(--t-s); color: var(--muted); } .side-more .side-link.active { color: var(--accent); } .sidebar-logout { margin-top: auto; padding: 0 var(--s-2h); } .page { max-width: 1200px; margin: 0; padding: 28px 40px 48px; } body.public .page { margin: 0 auto; } .page-head { margin: 0 0 var(--s-5); } .split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 20px; align-items: start; } .split-side { display: block; position: sticky; top: var(--s-5); } } @media (min-width: 1280px) { .split { grid-template-columns: minmax(0, 1fr) 360px; } } } /* ===================================================================== Components ===================================================================== */ @layer components { /* ---------- Text roles (first, so surfaces like .hero can recolour them) ---------- */ .subtle { color: var(--muted); } .lead { font-size: var(--t-l); max-width: 70ch; } .empty { color: var(--muted); } .target { color: var(--muted); font-weight: 600; font-size: var(--t-s); white-space: nowrap; font-variant-numeric: tabular-nums; } .error { color: var(--signal); font-weight: 600; } /* ---------- Numerals ---------- */ .num { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } input.num-input { font: 700 var(--t-xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; } input.num-input::placeholder { font: 400 var(--t-m) var(--font-body); } .big-number { margin-bottom: var(--s-1h); line-height: 1.1; } .big-number .num { font-size: var(--t-3xl); } .big-number > span:not(.num) { font-size: var(--t-s); color: var(--muted); margin-left: var(--s-1h); } /* ---------- Surfaces ---------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-4); margin-bottom: var(--s-3); min-width: 0; } .panel.compact { padding-block: var(--s-3); } .panel.compact h2 { font-size: var(--t-l); margin: 0; } .panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); } .panel-head p { margin: 0 0 var(--s-2); } .panel-head .btn { align-self: center; } .flat { padding-block: var(--s-4) var(--s-3); border-top: 1px solid var(--line-strong); margin-bottom: var(--s-2); min-width: 0; } .flat > h2:first-child, .flat > h3:first-child { margin-bottom: var(--s-3); } .hero { background: var(--hero); color: var(--on-hero); border-radius: var(--radius-card); padding: var(--s-5) var(--s-4); margin-bottom: var(--s-3); } .hero h2 { font: 700 var(--t-3xl)/1 var(--font-display); margin-bottom: var(--s-3); } .hero .kicker, .hero .subtle { color: var(--on-hero-muted); } .hero a:not(.btn) { color: var(--on-hero); } .hero .btn { background: transparent; border-color: var(--hero-line); color: var(--on-hero); } .hero .btn:hover { border-color: var(--on-hero); } .hero .btn.primary { background: var(--on-hero); border-color: var(--on-hero); color: var(--hero); } .hero .btn.primary:hover { background: var(--tint); border-color: var(--tint); color: var(--accent-deep); } .hero .meter { background: var(--hero-line); } .hero .meter::-webkit-progress-bar { background: var(--hero-line); } .hero .meter::-webkit-progress-value { background: var(--on-hero); } .hero .meter::-moz-progress-bar { background: var(--on-hero); } .hero .criteria li.met { color: var(--on-hero); } .hero .criteria li.unmet { color: var(--on-hero-muted); } .hero :focus-visible { outline-color: var(--on-hero); } .hero > :last-child { margin-bottom: 0; } .kicker { color: var(--accent); font-weight: 600; margin-bottom: var(--s-1); } .done-badge { font: 700 var(--t-xl)/1 var(--font-display); } .notice { background: var(--amber-soft); color: var(--ink); border-left: 4px solid var(--amber); border-radius: var(--radius); padding: var(--s-2h) 12px; } .notice.small { font-size: var(--t-s); padding: var(--s-1h) var(--s-2h); } .notice.subtle-notice { background: var(--surface); border-left-color: var(--line-strong); } .insight { border-left: 4px solid var(--muted); border-radius: var(--radius); background: var(--surface); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); } .insight h2 { font-size: var(--t-l); margin-bottom: var(--s-1); } .insight p { margin: 0; } .insight-ok { border-left-color: var(--accent); } .insight-adjust { border-left-color: var(--amber); background: var(--amber-soft); } .insight-warn { border-left-color: var(--signal); background: var(--signal-soft); } .insight-info { border-left-color: var(--line-strong); } /* Disclosures that aren't cards: a rule and a summary line */ .other-workouts, .checkin-table, .side-extra, details.danger { border-top: 1px solid var(--line-strong); padding: var(--s-3) 0; margin-bottom: var(--s-3); } .other-workouts > summary, .checkin-table > summary, .side-extra > summary, details.danger > summary { cursor: pointer; font-weight: 600; padding: var(--s-1) 0; } details[open] > summary { margin-bottom: var(--s-2); } details.danger > summary { color: var(--signal); } /* Two-step confirmation: a button-like summary reveals a checkbox and the real button */ .confirm > summary { list-style: none; } .confirm > summary::-webkit-details-marker { display: none; } .confirm[open] > summary { margin-bottom: var(--s-2); } .confirm .check { margin: 0 0 var(--s-2); font-size: var(--t-s); } .confirm form { display: block; } .side-extra ul { font-size: var(--t-s); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1h); min-height: 44px; padding: 9px 16px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 var(--t-m)/1.2 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; } .btn:hover { border-color: var(--accent); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn.danger { color: var(--signal); border-color: var(--signal); } .btn.small { min-height: 36px; padding: 5px 12px; font-size: var(--t-s); } .btn.wide { width: 100%; } .btn.disabled { opacity: 0.35; pointer-events: none; } summary.btn { list-style: none; } summary.btn::-webkit-details-marker { display: none; } details[open] > summary.btn { background: var(--tint); border-color: var(--accent); color: var(--accent); margin-bottom: 0; } .button-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } .link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; } /* ---------- Form bits ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-2h); max-width: 560px; } .inline-form { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; } .inline-form input[type="date"] { flex: 1 1 180px; width: auto; margin: 0; } .check { display: flex; gap: var(--s-2h); align-items: flex-start; font-weight: 400; font-size: var(--t-m); margin: 0; } .check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; } .check.big > span { display: flex; flex-direction: column; } .check.big strong { font-size: var(--t-l); font-family: var(--font-display); } .meter { display: block; width: 100%; height: 8px; margin: var(--s-1h) 0 var(--s-2h); appearance: none; border: 0; border-radius: 99px; overflow: hidden; background: var(--tint); } .meter::-webkit-progress-bar { background: var(--tint); } .meter::-webkit-progress-value { background: var(--accent); border-radius: 99px; } .meter::-moz-progress-bar { background: var(--accent); border-radius: 99px; } /* Scales (pain 0–10, energy 1–5, yes/partly/no): equal-width pills. Long scales wrap to 6 columns on narrow widths. */ .scale { border: 0; padding: 0; margin: var(--s-3) 0 0; min-width: 0; } .scale legend { font-weight: 600; font-size: var(--t-s); padding: 0; margin-bottom: var(--s-1h); } .scale legend .subtle { font-weight: 400; } .scale-options { display: flex; gap: var(--s-1); max-width: 560px; } /* Long scales (0–10): 6 columns on phones, one row from 640px, 6 columns again inside the narrow side panel */ .scale-options.long { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (min-width: 640px) { .scale-options.long { display: flex; } } @media (min-width: 900px) { .split-side .scale-options.long { display: grid; } } .pill { margin: 0; position: relative; flex: 1 1 0; min-width: 0; } .pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .pill span { display: flex; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font: 700 var(--t-l)/1 var(--font-display); font-variant-numeric: tabular-nums; } .pill:hover span { border-color: var(--accent); } .pill input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .pill.high input:checked + span { background: var(--signal); border-color: var(--signal); color: var(--surface); } .pill input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 1px; } .stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); overflow: hidden; background: var(--paper); } .stepper input[type="number"] { width: 46px; min-height: 44px; margin: 0; padding: 4px 2px; border: 0; border-radius: 0; background: transparent; text-align: center; font: 700 var(--t-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; } .step-btn { flex: none; min-width: 44px; padding: 0; border: 0; background: transparent; color: var(--accent); cursor: pointer; font: 700 var(--t-xl)/1 var(--font-display); touch-action: manipulation; } .step-btn:hover, .step-btn:active { background: var(--tint); } .save-status { color: var(--muted); } .save-status.ok { color: var(--accent); } .save-status.error { color: var(--signal); font-weight: 600; } .save-status.offline { color: var(--amber); font-weight: 600; } .save-status .link-button { color: var(--signal); font-weight: 600; } /* ---------- Chips, marks, tags ---------- */ .status-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-1h) 0 0; } .chip { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0 9px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font: 600 var(--t-s)/1.6 var(--font-display); white-space: nowrap; } .chip-increase { border-color: var(--accent); color: var(--accent); } .chip-hold { color: var(--ink); } .chip-deload, .chip-plateau, .chip-plateau2 { border-color: var(--amber); color: var(--amber); background: var(--amber-soft); } .chip-pain { border-color: var(--signal); color: var(--signal); background: var(--signal-soft); } .chip-first { border-style: dotted; color: var(--ink); } .chip-step { background: var(--tint); border-color: var(--tint); color: var(--accent); } .chip-swap { border-style: dashed; color: var(--ink); } .chip-ready { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .tags { display: flex; gap: var(--s-1); flex-wrap: wrap; margin: 0; } .tag { font-size: var(--t-xs); font-weight: 600; padding: 0 8px; border-radius: 99px; background: var(--tint); color: var(--accent); } .tag-fish, .tag-cholesterol, .tag-joint { background: var(--amber-soft); color: var(--amber); } .mark { display: inline-block; min-width: 22px; padding: 1px 5px; border-radius: 99px; text-align: center; font: 700 var(--t-xs)/1.5 var(--font-display); text-decoration: none; white-space: nowrap; } .mark.gym { background: var(--accent); color: var(--on-accent); } .mark.gym.partial { background: var(--tint); color: var(--accent); } .mark.prehab { background: var(--tint); color: var(--accent); } .mark.missed { color: var(--amber); padding-inline: 0; } .mark.food { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); } .mark.food.food-0, .mark.food.food-1, .mark.food.food-2 { background: var(--amber-soft); color: var(--amber); box-shadow: none; } .mark.food.food-3 { background: var(--surface); } .mark.food.food-4, .mark.food.food-5 { background: var(--tint); color: var(--accent); box-shadow: none; } /* ---------- Checklists, allowances, summaries ---------- */ .criteria { list-style: none; padding: 0; margin: var(--s-1) 0 var(--s-2h); } .criteria li { display: flex; gap: var(--s-2); margin: 3px 0; } .criteria li > span { flex: none; width: 1.1em; font-weight: 700; } .criteria li.met { color: var(--accent); } .criteria li.unmet { color: var(--muted); } .allowance { margin-top: var(--s-2h); } .allowance-head { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-s); } .allowance-head .num { font-size: var(--t-l); line-height: 1.1; } .allowance .meter { margin: var(--s-1) 0 0; } .allowance.over strong { color: var(--signal); } .allowance.over .meter { background: var(--signal-soft); } .allowance.over .meter::-webkit-progress-bar { background: var(--signal-soft); } .allowance.over .meter::-webkit-progress-value { background: var(--signal); } .allowance.over .meter::-moz-progress-bar { background: var(--signal); } .summary-list { display: grid; margin: 0 0 var(--s-2h); } .summary-list > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-2h); padding: 5px 0; border-bottom: 1px solid var(--line); } .summary-list dt { color: var(--muted); font-weight: 600; } .summary-list dd { margin: 0; } .summary-list dd.over { color: var(--signal); font-weight: 600; } .summary-advice { margin: 0; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-2h); } .stats div { background: var(--paper); border-radius: var(--radius); padding: var(--s-2h) 12px; } .stats dt { color: var(--muted); font-size: var(--t-s); } .stats dd { margin: 0; font: 700 var(--t-2xl)/1.15 var(--font-display); font-variant-numeric: tabular-nums; } .hero .stats div { background: var(--hero-line); } .hero .stats dt { color: var(--on-hero-muted); } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; } .prose table { display: block; overflow-x: auto; } /* ---------- Figures: start/end photos (tap to flip on compact figures) + diagrams ---------- */ .figure { display: grid; gap: var(--s-2h); margin: var(--s-2h) 0 12px; max-width: 560px; } .figure.compact { max-width: 360px; } .frames { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1h); } .frame { position: relative; margin: 0; min-width: 0; } .frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: var(--photo-ground); border: 1px solid var(--line); border-radius: var(--radius); } .frame figcaption { position: absolute; left: 8px; bottom: 8px; padding: 1px 9px; border-radius: 99px; background: rgb(21 32 27 / 0.78); color: #fff; font: 600 var(--t-xs)/1.6 var(--font-display); } .frames.flippable { grid-template-columns: 1fr; } .frames.flippable .frame { grid-area: 1 / 1; } .frames.flippable .frame-end, .frames.flippable.show-end .frame-start { visibility: hidden; } .frames.flippable.show-end .frame-end { visibility: visible; } .frame-toggle { position: absolute; right: 8px; bottom: 8px; z-index: 1; min-height: 36px; padding: 4px 12px; border-radius: 99px; border: 0; background: rgb(21 32 27 / 0.78); color: #fff; cursor: pointer; font: 600 var(--t-s)/1 var(--font-body); } .image-note { margin: 0; padding: var(--s-1h) var(--s-2h); border-radius: var(--radius); background: var(--amber-soft); border-left: 4px solid var(--amber); font-size: var(--t-s); } .diagram { padding: var(--s-2); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); } .diagram-svg { display: block; width: 100%; height: auto; max-height: 280px; } .diagram-svg .body { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } .diagram-svg .head { fill: currentColor; stroke: none; } .diagram-svg .ghost { opacity: 0.3; } .diagram-svg .env { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; opacity: 0.7; } .diagram-svg rect.env { fill: var(--paper); } .diagram-svg .divider { stroke-dasharray: 4 6; } .diagram-svg .prop { fill: var(--muted); } .diagram-svg .accent-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; } .diagram-svg .accent-fill { fill: var(--accent); } .diagram-svg .label { font: 12px var(--font-body); fill: var(--muted); } .diagram-svg .label.accent, .diagram-svg .accent { fill: var(--accent); font-weight: 600; } .howto > summary:not(.btn) { color: var(--accent); padding: var(--s-1) 0; cursor: pointer; font-weight: 600; font-size: var(--t-s); } .joint-note { background: var(--tint); padding: var(--s-1h) var(--s-2h); border-radius: var(--radius); } /* ---------- Charts ---------- */ .chart { position: relative; height: 240px; } .compact-select select { margin: 0 0 var(--s-2); min-height: 40px; padding: var(--s-1h) var(--s-2h); } @media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .panel { padding: 20px 24px; } .hero { padding: 28px 28px 24px; } .hero h2 { font-size: var(--t-4xl); } .chart { height: 260px; } } } /* ===================================================================== Pages ===================================================================== */ @layer pages { .narrow-panel { max-width: 560px; } /* ---------- Today ---------- */ .week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); margin-bottom: var(--s-2); } .day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-1h) 2px 8px; text-align: center; min-width: 0; } .day p { margin: 0; } .day.today { border: 2px solid var(--accent); } .day.future { background: transparent; } .day-name { color: var(--muted); font-size: var(--t-xs); font-weight: 600; } .day-name .long { display: none; } .day-num { font-size: var(--t-2xl); line-height: 1.05; } .day.today .day-num { color: var(--accent); } .day-plan { display: none; } .day-log { list-style: none; padding: 0; margin: var(--s-1) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 22px; } .strip-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-1h); font-size: var(--t-xs); margin: 0 0 var(--s-4); } .strip-legend .mark:not(:first-child) { margin-left: var(--s-2); } .counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-3); } .counter { display: flex; flex-direction: column; gap: var(--s-1); font-weight: 600; font-size: var(--t-s); min-width: 0; } .counter .stepper { align-self: flex-start; } .ticks { display: flex; flex-wrap: wrap; gap: var(--s-2) 22px; margin-top: var(--s-3); } .food-quick .scale-options { max-width: 360px; } .food-quick .save-status { margin: var(--s-2h) 0 0; } .weight-quick { margin-top: var(--s-3); padding-top: var(--s-1); border-top: 1px solid var(--line); } .weight-quick input { max-width: 160px; } .weight-quick p { margin: var(--s-1h) 0 0; } /* ---------- Workout ---------- */ .step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: var(--s-2); border-radius: 50%; background: var(--tint); color: var(--accent); font-size: var(--t-m); vertical-align: 3px; } .big-target { margin-bottom: var(--s-1); font-size: var(--t-m); } .big-target .num { font-size: var(--t-3xl); line-height: 1; } .exercise + .exercise { border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-4); } .exercise-head { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; } .exercise-head h3 { margin: 0; font-size: var(--t-xl); } .exercise-head h3 a { color: inherit; text-decoration: none; } .exercise-head h3 a:hover { color: var(--accent); text-decoration: underline; } .suggestion { margin: var(--s-2) 0 2px; padding: var(--s-2) var(--s-2h); border-radius: var(--radius); background: var(--tint); font-size: var(--t-s); } .status-word { font-weight: 700; color: var(--accent); margin-right: var(--s-1h); white-space: nowrap; } .suggestion.status-increase { font-weight: 600; } .suggestion.status-pain, .suggestion.status-deload, .suggestion.status-plateau, .suggestion.status-plateau2 { background: var(--amber-soft); } .suggestion.status-pain .status-word, .suggestion.status-deload .status-word, .suggestion.status-plateau .status-word, .suggestion.status-plateau2 .status-word { color: var(--amber); } .last-time { font-size: var(--t-xs); color: var(--muted); margin: 2px 0 var(--s-2) var(--s-2h); } .effort-cue { margin: 0 0 2px var(--s-2h); } .symmetry { margin: var(--s-1) 0 0; } .symmetry.met { color: var(--accent); } .symmetry.unmet { color: var(--muted); } /* A set row: number · weight · × · (− reps +). The number fills in once reps are logged. */ .sets { display: grid; gap: var(--s-1h); margin: var(--s-2) 0; } .set { display: grid; align-items: center; gap: var(--s-1h); grid-template-columns: 1.75rem minmax(0, 1fr) 0.75rem minmax(0, 1.35fr); } .sets.bodyweight .set { grid-template-columns: 1.75rem minmax(0, 280px); } .set-head { font-size: var(--t-xs); color: var(--muted); font-weight: 600; margin-bottom: -2px; } .set-head span { text-align: center; } .set-no { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--muted); font-size: var(--t-l); } .set-head .set-no { font: inherit; width: auto; height: auto; } .set:has(input[data-set-reps]:not(:placeholder-shown)) .set-no { background: var(--accent); color: var(--on-accent); } .times { color: var(--muted); text-align: center; } .field { position: relative; margin: 0; font-weight: 400; min-width: 0; } .field input { margin: 0; height: 52px; padding: 0 var(--s-2); text-align: center; font: 700 var(--t-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; } .field input::placeholder { color: var(--placeholder); opacity: 1; } .field.reps { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } .field.reps:hover { border-color: var(--muted); } .field.reps:focus-within { border-color: var(--accent); } .field.reps input { flex: 1; min-width: 0; border: 0; background: transparent; border-radius: 0; padding: 0; } .field.reps input:focus-visible { outline: none; } .plates { margin: -2px 0 var(--s-1h) 2.25rem; min-height: 1.2em; } .plates:empty { display: none; } .exercise-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-start; margin: var(--s-1) 0 var(--s-1h); } .exercise-tools details[open] { flex-basis: 100%; } .swap-options { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1h); margin-top: var(--s-1h); } .swap-options .btn { white-space: normal; text-align: left; justify-content: flex-start; } .howto-body { padding: var(--s-3) 0 0; font-size: var(--t-s); } .move-up { margin: var(--s-2) 0; padding: var(--s-2h) 12px; border-radius: var(--radius); background: var(--tint); border-left: 4px solid var(--accent); } .move-up p { margin-bottom: var(--s-2); } .action-bar { position: sticky; z-index: 5; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-2)); display: flex; align-items: center; gap: var(--s-2h); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-2); margin-bottom: var(--s-3); box-shadow: 0 8px 24px var(--shadow); } .action-bar .save-status { flex: 1; min-width: 0; font-size: var(--t-s); text-align: right; line-height: 1.2; overflow-wrap: anywhere; } .action-bar .btn.primary { flex: 1; } .btn.rest { --left: 100%; flex: 1.4; min-height: 56px; gap: var(--s-2); font-size: var(--t-s); } .btn.rest .num { font-size: var(--t-2xl); line-height: 1; } .btn.rest.running { border-color: var(--amber); background: linear-gradient(90deg, var(--amber-soft) var(--left), var(--surface) var(--left)); } .btn.rest.finished { background: var(--signal); color: var(--surface); border-color: var(--signal); } .finish { margin: 0 0 var(--s-4); } .finish p { margin: var(--s-1h) 0 0; text-align: center; } .circuit .exercise { min-width: 0; } /* ---------- Prehab ---------- */ .day-nav { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; } .day-nav .btn { min-width: 44px; padding: var(--s-1h) var(--s-2h); font-size: var(--t-xl); } .prehab-list { list-style: none; padding: 0; margin: 0; } .prehab-item .check { margin-bottom: var(--s-1h); } .prehab-item .howto { margin: var(--s-1) 0 var(--s-1h); } .prehab-item .inline { font-weight: 400; font-size: var(--t-s); color: var(--muted); } /* ---------- Food & diet ---------- */ .tip { max-width: 70ch; margin: 0 0 var(--s-4); padding: 2px 0 2px var(--s-3); border-left: 3px solid var(--accent); } .food-form .ticks { display: grid; gap: var(--s-2); } .form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; } .food-week { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); } .food-day > a, .food-day.future { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-1h) 2px; border-radius: var(--radius); min-width: 0; } .food-day > a { border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; } .food-day > a:hover { border-color: var(--accent); } .food-day.current > a { border: 2px solid var(--accent); } .food-day.future { opacity: 0.45; } .food-day-name { font-size: var(--t-xs); color: var(--muted); font-weight: 600; } .food-day-score { font-size: var(--t-l); line-height: 1.2; } .food-day-score.score-5, .food-day-score.score-4 { color: var(--accent); } .food-day-score.score-0, .food-day-score.score-1 { color: var(--amber); } .score-rules { list-style: none; padding: 0; margin: 0 0 var(--s-2h); } .score-rules li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-1h) 0; border-bottom: 1px solid var(--line); } .score-rules li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .chips { display: flex; gap: var(--s-1h); overflow-x: auto; padding: 2px 0 var(--s-2h); margin-bottom: var(--s-1); scrollbar-width: none; } .chips a { flex: none; padding: var(--s-1h) 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); text-decoration: none; font-weight: 600; font-size: var(--t-s); } .chips a:hover { border-color: var(--accent); } .prose > * { max-width: 72ch; } .prose h2 { margin-top: 1.4rem; } .prose h2:first-child { margin-top: 0; } .meals { list-style: none; padding: 0; margin: 0; } .meals li { border-top: 1px solid var(--line); padding: var(--s-2h) 0; } .meals li:first-child { border-top: 0; padding-top: 0; } .meal-head { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; margin-bottom: 2px; } .checklist { list-style: none; padding: 0; } .checklist .check { margin: var(--s-1h) 0; } .shopping h3 { margin-top: var(--s-2h); } .plain-list { padding-left: 1.2rem; } .plain-list li { margin-bottom: var(--s-1); } .plain-list .target { margin-left: var(--s-1h); } /* ---------- Plan ---------- */ .plan-jump { display: flex; gap: var(--s-1) var(--s-4); overflow-x: auto; scrollbar-width: none; margin: calc(-1 * var(--s-2)) 0 var(--s-4); padding-bottom: 2px; font-weight: 600; font-size: var(--t-s); white-space: nowrap; } .plan-jump a { text-decoration: none; } .plan-jump a:hover { text-decoration: underline; } .week-plan { display: grid; grid-template-columns: 1fr; gap: var(--s-1h); } .week-plan-day { display: grid; grid-template-columns: 100px 1fr; gap: var(--s-2); align-items: baseline; padding: var(--s-2) var(--s-2h); border-radius: var(--radius); background: var(--surface); } .week-plan-day p { margin: 0; } .week-plan-day.gym { background: var(--tint); } .week-plan-day .day-name { font-size: var(--t-s); color: var(--ink); } .week-plan-day .subtle { grid-column: 2; } .plan-blocks { list-style: none; padding: 0; margin: var(--s-2h) 0; } .plan-blocks > li { margin-bottom: var(--s-3); } .block-label { font-weight: 600; color: var(--muted); font-size: var(--t-s); margin-bottom: var(--s-1); } .plan-slot-list { list-style: none; padding: 0; margin: 0; } .plan-slot-list li { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); } .plan-slot-list a { font-weight: 600; } .rules li { margin-bottom: var(--s-1h); } .phase-table tr.current td { background: var(--tint); } .phase-table tr.current td:first-child { border-left: 4px solid var(--accent); padding-left: var(--s-1h); } .ladder-template { margin-top: 18px; } .ladder-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .ladder { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3) 14px; background: var(--surface); min-width: 0; } .ladder h4 { margin: 0 0 var(--s-1h); } .ladder-steps { list-style: none; padding: 0; margin: 0 0 var(--s-2); } .ladder-steps > li { position: relative; counter-increment: step; padding: var(--s-1h) 0 var(--s-1h) 30px; border-left: 2px solid var(--line); margin-left: var(--s-2h); } .ladder-steps > li::before { content: counter(step); position: absolute; left: -11px; top: var(--s-1h); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 var(--t-xs)/1 var(--font-display); background: var(--surface); border: 2px solid var(--line); color: var(--muted); } .ladder-steps { counter-reset: step; } .ladder-steps > li:last-child { border-left-color: transparent; } .ladder-steps > li.done::before { background: var(--tint); border-color: var(--accent); color: var(--accent); } .ladder-steps > li.current::before { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .ladder-steps > li.later { color: var(--muted); } .ladder-steps > li.this > strong { color: var(--accent); } .ladder-steps.compact > li { padding-top: 3px; padding-bottom: 3px; } .ladder-steps.compact > li::before { top: 3px; } .ladder-step-head { display: flex; flex-wrap: wrap; gap: var(--s-1h); align-items: baseline; } .ladder-step-head a { font-weight: 600; } .ladder-criteria { margin: var(--s-1) 0; padding-left: 1.1rem; font-size: var(--t-s); } .ladder-actions { margin-top: var(--s-1); } .plan-note { margin-top: var(--s-4); padding: var(--s-3) 14px; border-left: 4px solid var(--accent); background: var(--tint); border-radius: var(--radius); } .plan-note h3 { margin-bottom: var(--s-1); } .plan-note p { margin: 0; } .stage-list { list-style: none; padding: 0; margin: var(--s-3) 0; } .stage { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2h) 0; border-top: 1px solid var(--line); } .stage:first-child { border-top: 0; } .stage-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--t-l); border: 2px solid var(--line); color: var(--muted); background: var(--surface); } .stage.done .stage-num { border-color: var(--accent); color: var(--accent); background: var(--tint); } .stage.current .stage-num { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .stage.later .stage-body > p:first-of-type { color: var(--muted); } .stage-body h3 { margin-bottom: 2px; } .stage-body p { margin-bottom: var(--s-1); } .stage-form { margin-top: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-2h); align-items: center; } .bench-list { list-style: none; padding: 0; margin: 0; } .bench-list li { padding: var(--s-2) 0; border-top: 1px solid var(--line); } .bench-list li:first-child { border-top: 0; } .bench-list .target { margin-left: var(--s-1h); } .bench-list p { margin: 2px 0 0; } /* ---------- Benchmarks ---------- */ .bench-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2h); max-width: 420px; } .bench-inputs label { margin-top: var(--s-1h); } .bench .howto { margin: var(--s-2h) 0 var(--s-1); } .bench-history { margin-top: var(--s-2); } .bench-history td.met { color: var(--accent); font-weight: 700; } /* ---------- Exercise ---------- */ .page-head .ex-badges { display: flex; flex-wrap: wrap; gap: var(--s-1h); margin-top: var(--s-1h); } .cue-list { padding-left: 1.3rem; } .cue-list li { margin-bottom: var(--s-1h); } .credit { margin: var(--s-2) 0 0; } .record-card .big-number { margin-bottom: var(--s-1); } .usage + .usage { border-top: 1px solid var(--line); margin-top: var(--s-3); padding-top: var(--s-3); } .usage h3 { font-size: var(--t-m); margin-bottom: var(--s-2); } /* ---------- Workout summary ---------- */ .summary-hero h2 { margin-bottom: var(--s-3); } .next-list, .records-list { list-style: none; padding: 0; margin: 0; } .next-list li { padding: var(--s-2h) 0; border-top: 1px solid var(--line); } .next-list li:first-child { border-top: 0; padding-top: 0; } .next-list p { margin: var(--s-1) 0 0; } .next-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1h) var(--s-2h); } .next-head a { color: var(--ink); text-decoration: none; } .next-head a:hover { color: var(--accent); } .records-list li { padding: var(--s-1h) 0 var(--s-1h) 22px; position: relative; } .records-list li::before { content: "★"; position: absolute; left: 0; color: var(--amber); } .summary-actions { margin-bottom: var(--s-3); } /* ---------- Progress ---------- */ .tier-head { margin: var(--s-6) 0 var(--s-2); font-size: var(--t-2xl); } .run-status p:last-of-type { margin-bottom: var(--s-1h); } .calendar { display: flex; gap: var(--s-1h); margin: var(--s-2) 0; overflow-x: auto; } .cal-days, .cal-grid { display: grid; grid-template-rows: repeat(7, 16px); gap: 3px; } .cal-days { font-size: var(--t-xs); color: var(--muted); line-height: 16px; } .cal-grid { grid-auto-flow: column; grid-auto-columns: 16px; } .cal-cell { display: block; width: 16px; height: 16px; border-radius: 3px; background: var(--line); } .cal-grid .cal-cell { cursor: pointer; border: 0; padding: 0; font: inherit; } .cal-cell.level-0 { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); } .cal-cell.level-1 { background: var(--heat-1); } .cal-cell.level-2 { background: var(--heat-2); } .cal-cell.level-3 { background: var(--heat-3); } .cal-cell.level-4 { background: var(--heat-4); } .cal-cell.future { background: transparent; box-shadow: none; cursor: default; } .cal-cell:disabled { opacity: 1; } .cal-cell.picked { outline: 2px solid var(--ink); outline-offset: 1px; } .cal-legend { display: flex; align-items: center; gap: 3px; font-size: var(--t-xs); color: var(--muted); } .cal-legend span:first-child { margin-right: var(--s-1); } .cal-legend span:last-child { margin-left: var(--s-1); } .cal-legend .cal-cell { width: 12px; height: 12px; } .week-status { display: flex; gap: 6px; list-style: none; margin: var(--s-2) 0 0; padding: 0; font-size: var(--t-s); } .week-status li { color: var(--muted); } .week-status li.full { color: var(--accent); } .week-status li.held { color: var(--amber); } .week-status li.current { outline: 1px solid var(--line-strong); border-radius: 3px; padding: 0 2px; } .cal-caption { margin-top: var(--s-2); } .records td:first-child { white-space: normal; } .sessions a { font-weight: 600; } /* ---------- History, login ---------- */ .logout { text-align: center; margin: 20px 0; } .login { margin: 12vh auto 0; } .login img { border-radius: 12px; margin-bottom: var(--s-2); } .login .btn { margin-top: var(--s-4); } .saved-pages { text-align: left; padding-left: 1.2rem; } /* ---------- Wider screens ---------- */ @media (max-width: 349px) { .field input { font-size: var(--t-xl); } .field.reps .step-btn { min-width: 34px; } } @media (min-width: 640px) { .day-name .short { display: none; } .day-name .long { display: inline; } .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); } .week-plan { grid-template-columns: repeat(7, minmax(0, 1fr)); } .week-plan-day { display: block; padding: var(--s-2h); min-height: 110px; } .week-plan-day .day-name { margin-bottom: var(--s-1); } .shopping { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); } .ladder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cal-days, .cal-grid { grid-template-rows: repeat(7, 20px); } .cal-grid { grid-auto-columns: 20px; } .cal-cell { width: 20px; height: 20px; } .cal-days { line-height: 20px; } } @media (min-width: 900px) { h1 { font-size: var(--t-4xl); } .logout { display: none; } /* Today */ .week-strip { gap: var(--s-2); } .day { padding: var(--s-2h) var(--s-2) var(--s-3); text-align: left; } .day-name { font-size: var(--t-s); } .day-num { font-size: var(--t-3xl); } .day-plan { display: block; font-size: var(--t-s); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .day-log { justify-content: flex-start; margin-top: var(--s-2); } .mark { font-size: var(--t-s); padding: 1px var(--s-2); } .today-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 28px; align-items: start; } .today-side > .flat:first-child { border-top: 0; padding-top: 0; } /* Workout side panel */ .split .action-bar { position: static; box-shadow: none; } .split-side .pill span { height: 38px; font-size: var(--t-m); } .prehab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .prehab-list .panel { margin: 0; } .plan-workouts, .plan-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); align-items: start; } .diet-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s-5); align-items: start; } .diet-layout .chips { flex-direction: column; position: sticky; top: var(--s-5); overflow: visible; padding: 0; } .diet-layout .chips a { border: 0; background: none; border-radius: var(--radius); padding: 7px var(--s-2h); } .diet-layout .chips a:hover { background: var(--surface); } .diet-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); align-items: start; } .diet-content .prose, .diet-content #shopping { grid-column: 1 / -1; } .diet-content section { scroll-margin-top: 20px; } .exercise-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 var(--s-5); align-items: start; } .exercise-side { position: sticky; top: var(--s-5); } .progress-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 var(--s-5); align-items: start; } .chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; } .chart-grid.tier-two { gap: 0 var(--s-5); } .chart-wide { grid-column: 1 / -1; } .chart-wide .chart { height: 320px; } .summary-actions { flex-direction: column; align-items: stretch; } } @media (min-width: 1280px) { .shopping { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ladder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Exercises side by side only when each column still fits "− 12 +" at full numeral size */ @media (min-width: 1440px) { .pair, .circuit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; } .pair .exercise + .exercise, .circuit .exercise + .exercise { border-top: 0; padding-top: 0; margin-top: 0; } .circuit .exercise:nth-child(n + 3) { border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-4); } } } /* ===================================================================== Utilities: last layer, so they win over components ===================================================================== */ @layer utilities { .small { font-size: var(--t-s); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* Recovery controls remain available on every signed-in page. */ .sync-panel { position: fixed; z-index: 30; inset: auto 16px calc(var(--tabbar-h) + 64px) auto; width: min(480px, calc(100vw - 32px)); max-height: 65vh; overflow: auto; box-shadow: 0 8px 32px var(--shadow); } .sync-panel[hidden] { display: none; } .sync-panel ul { padding-left: 20px; } .sync-panel li { margin-bottom: 20px; overflow-wrap: anywhere; } .sync-panel li .btn { margin: 4px; } .workout-help { margin-bottom: 16px; } .workout-help summary { cursor: pointer; padding: 12px 0; } .partner-link { margin: 8px 0; } .exercise { scroll-margin-top: 16px; } @media (min-width: 1280px) { .partner-link { display: none; } } @layer pages { .welcome { padding: 16px 20px; margin-bottom: 20px; background: var(--tint); border-radius: var(--radius-card); } .welcome p { margin: 4px 0 0; } .day-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; min-height: 58px; justify-content: center; gap: 5px; } .day-activity { font: 600 11px/1.2 var(--font-body); overflow-wrap: anywhere; } .reference-section { margin: 16px 0; } .reference-section > summary { font: 600 var(--t-l)/1.4 var(--font-body); padding: 8px 0; cursor: pointer; } .reference-section[open] > summary { margin-bottom: 18px; } .reference-section h2 { margin-top: 12px; } .scale-anchors { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: var(--t-xs); margin: 6px 0 0; max-width: 560px; } .pill span { font: 600 var(--t-m)/1 var(--font-body); } .settings-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 8px 24px; } .settings-days select { width: 100%; } .food-feedback { display: flex; flex-wrap: wrap; gap: 6px 20px; background: var(--tint); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px; font-size: var(--t-s); } .food-feedback strong { flex-basis: 100%; color: var(--accent); } .event-hint { margin: 14px 0 8px; } .week-decisions .btn { white-space: normal; } .set { grid-template-columns: 44px minmax(0, 1fr) 0.6rem minmax(0, 1.35fr); } .sets.bodyweight .set { grid-template-columns: 44px minmax(0, 280px); } .set-complete { position: relative; width: 44px; height: 48px; margin: 0; } .set-complete input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .set-complete span { display: flex; align-items: center; justify-content: center; height: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--muted); font: 600 var(--t-m)/1 var(--font-body); } .set-complete input:checked + span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-size: 0; } .set-complete input:checked + span::after { content: '✓'; font-size: 22px; } .set-complete input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; } .set-is-done .field { background: var(--tint); } .current-block { border-color: var(--accent); } .workout-overview .button-row { gap: 8px; } [data-stage-label] { margin-top: 12px; } [data-workout-stage], #workout-review, .reference-section { scroll-margin-top: 20px; } .btn:disabled { opacity: .5; cursor: default; } @media (min-width: 900px) { .day-activity { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } } @layer pages { .diet-jumps { margin-bottom: 24px; flex-wrap: wrap; overflow: visible; } .plate-guide { display: grid; gap: 28px; } .plate-picture { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 230px; height: 230px; border-radius: 50%; background: conic-gradient(from 0deg, var(--tint) 0 25%, var(--paper) 25% 50%, var(--accent) 50% 100%); border: 8px solid var(--surface); outline: 1px solid var(--line); margin: 26px auto 8px; overflow: hidden; font-size: 14px; font-weight: 600; } .plate-picture span { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; } .plate-picture span:first-child { grid-row: 1 / 3; color: var(--on-accent); border-right: 3px solid var(--surface); } .plate-picture span:nth-child(2) { border-bottom: 3px solid var(--surface); padding-top: 30px; } .plate-picture span:nth-child(3) { padding-bottom: 30px; } .portion-list { margin: 0; } .portion-list > div { padding: 16px 0; border-bottom: 1px solid var(--line); } .portion-list > div:last-child { border: 0; } .portion-list dt { color: var(--accent); font-weight: 600; } .portion-list dd { margin: 4px 0 0; font-weight: 600; } .portion-list dd span { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-s); } .diet-reminders { display: grid; gap: 16px; margin: 24px 0 16px; } .diet-reminders > div { border-left: 3px solid var(--accent); padding-left: 14px; } .diet-reminders p { color: var(--muted); font-size: var(--t-s); margin: 4px 0 0; } .diet-clinical { margin-bottom: 28px; max-width: 85ch; } .meal-filters { display: grid; gap: 12px; margin-bottom: 16px; } .meal-filters label { margin: 0; } .meal-filters input, .meal-filters select { width: 100%; min-width: 0; } .meal-grid { display: grid; gap: 10px; margin: 16px 0 24px; } .meal-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); align-self: start; } .meal-card summary { padding: 16px; cursor: pointer; } .meal-card-title { font-weight: 600; } .meal-card-time { display: block; margin-top: 4px; color: var(--muted); font-size: var(--t-s); } .meal-card-body { padding: 0 16px 16px; } .meal-card[open] { border-color: var(--accent); } .snack-ideas { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; } .snack-ideas summary, .shopping-group summary, .guide-section summary { cursor: pointer; font-weight: 600; padding: 10px 0; } .snack-ideas ul { margin-top: 12px; } .shopping-group { border-top: 1px solid var(--line); min-width: 0; } .shopping-group .check { align-items: flex-start; } .shopping-group input:checked + span { text-decoration: line-through; color: var(--muted); } .diet-reference { margin-top: 32px; } .guide-section { margin: 10px 0; padding: 8px 20px; } .guide-section .prose { margin: 12px 0 20px; } .plate-guide, .meal-finder, #shopping, .diet-reference, .meal-category, .guide-section { scroll-margin-top: 24px; } @media (min-width: 640px) { .plate-guide { grid-template-columns: 1fr 1fr; } .diet-reminders { grid-template-columns: repeat(3, 1fr); } .meal-filters { grid-template-columns: 1fr 1.5fr 1fr; } .meal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } } /* Meal planning: compact daily cards, with editing tucked into each meal slot. */ @layer pages { .meal-plan-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:18px 0; } .meal-plan-controls label { flex:1 1 130px; min-width:0; } .meal-plan-controls input, .meal-plan-controls select { width:100%; } .meal-plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:16px; margin-top:20px; } .meal-plan-grid.single-day { grid-template-columns:1fr; } .meal-day { border:1px solid var(--line); border-radius:12px; padding:16px; min-width:0; } .meal-day.is-today { border-color:var(--accent); } .meal-day h3 { margin:0 0 14px; } .meal-slot { border-top:1px solid var(--line); padding:12px 0; } .meal-slot summary { cursor:pointer; overflow-wrap:anywhere; } .meal-slot summary > span { display:block; } .meal-slot-label { font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; } .meal-slot-form { display:grid; gap:10px; padding-top:12px; } .meal-slot-form select { width:100%; min-width:0; } .meal-slot-form input[type=number] { max-width:100px; } .recipe-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .recipe-detail-grid li { margin-bottom:8px; } .shopping-source { display:block; margin:0 0 10px 30px; font-size:.75rem; } .saved-recipes { list-style:none; padding:0; } .saved-recipes li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:12px 0; border-bottom:1px solid var(--line); } [data-recipe-form] { display:grid; gap:14px; } [data-recipe-form] input[type=number] { max-width:100px; } @media (max-width:600px) { .recipe-detail-grid { grid-template-columns:1fr; gap:8px; } } } @layer pages { .meal-slot summary { display:block; position:relative; padding-right:20px; list-style:none; } .meal-slot summary::-webkit-details-marker { display:none; } .meal-slot summary::after { content:'+'; position:absolute; right:0; top:0; color:var(--accent); } .meal-slot[open] summary::after { content:'−'; } } @layer pages { .planned-meal-summary { margin-bottom:var(--s-5); } .planned-meal-list { list-style:none; padding:0; margin:0 0 var(--s-3); } .planned-meal-list li { display:grid; gap:3px; padding:10px 0; border-bottom:1px solid var(--line); } .planned-meal-list li > a { font-weight:600; } }