/* ===== 1. Design tokens (light + dark themes) ===== */ :root { /* Design tokens: warm-paper light theme + true-black dark theme. */ --bg: #faf4ed; --surface: #fffaf3; --surface-2: #f2e9e1; --surface-raised: #fffdf8; --ink: #1c1c1e; --ink-strong: #000000; --muted: #6c6c70; --line: #dfdad9; --line-strong: #cecacd; --switch-track: #a9a2a8; --accent: #2e7d32; --accent-hover: #256429; --accent-soft: #ddefdc; --pine: #2e7d32; --pine-soft: #ddefdc; --rose: #d7827e; --rose-soft: #f5dfdc; --gold: #ea9d34; --gold-soft: #fae9cc; --foam: #5da464; --danger: #d92d20; --danger-soft: #fbe3e1; /* #84 (v1.007): swipe-to-delete rail red, harmonized with the theme accent (danger 78% + accent 22%, mixed in sRGB). */ --swipe-rail-bg: #b33f24; --on-accent: #ffffff; /* #555: light-theme warning darkened to #9a5515 — the old #b86b20 was 3.0:1 on the light background (WCAG AA needs 4.5:1 for text). */ --warning: #9a5515; /* B27 (#99): swipe-to-delete rail width — the delete-action width and the open-state translation must stay in sync. */ --swipe-rail: 72px; --focus-ring: rgba(46,125,50,.22); --shadow-color: rgba(28,28,30,.10); --backdrop: rgba(0,0,0,.32); --theme-color: #faf4ed; --nav-bg: rgba(255,253,248,.82); --heat-0: #e7e3e1; --heat-1: #ddefdc; --heat-2: #b7dfb9; --heat-3: #86c98b; --heat-4: #5da464; --heat-5: #2e7d32; /* Phase 2 (v1.901) design tokens — lift verbatim from the visual-refresh mockup's "Design tokens" section: one shape per family, families complementary. Squared for structure and actions (cards, buttons, icon buttons, inputs); pill reserved for switch tracks and progress bars. */ --radius-xs: 4px; /* micro marks: heat swatches, chart dots */ --radius-sm: 8px; /* badges, tags, numeric keypad squares */ --radius-md: 12px; /* buttons (primary + secondary), icon buttons, inputs, rows */ --radius-lg: 16px; /* cards, dialogs, sheets */ /* switch tracks and progress bars only */ /* Motion (#620, v1.908): slight, research-backed spec — page/view changes fade at 120ms, sheet/dialog entrances settle at 180ms, exits leave at 120ms. Easings are the standard Material curves: standard for in-place changes, decelerate for entrances, accelerate for exits. Every animated surface uses these tokens; no surface invents its own duration or easing. */ --motion-page: 120ms; --motion-enter: 180ms; --motion-exit: 120ms; --motion-micro: 120ms; /* hover/press/chevron/switch micro-feedback */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* spacing */ --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; /* control sizes — complementary weights */ --icon-btn: 40px; /* every icon button, one box */ --btn-h: 44px; /* standard buttons & form actions */ --btn-h-lg: 52px; /* primary CTAs only: flat, no shadow */ --btn-h-sm: 40px; /* compact buttons, selector controls */ --input-h: 44px; /* inputs, selects, search */ --input-h-sm: 44px; /* dense inputs: set rows stay thumb-sized */ --card-pad: 16px; /* every card */ /* shadows — borders carry structure; shadows lift dialogs only */ --shadow: 0 2px 6px rgba(60,48,20,.05), 0 14px 32px rgba(60,48,20,.09); --shadow-soft: 0 1px 2px rgba(60,48,20,.04), 0 4px 14px rgba(60,48,20,.04); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Select chevron (#9): custom arrow so it's visible in every theme. */ --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } [data-theme="macchiato"], [data-theme="mocha"] { /* #99 B20: dark branch deleted — unreachable */ --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b6b6c0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* ===== Alt palettes: Catppuccin (verified: catppuccin/palette) + Rosé Pine Dawn (rosepinetheme.com) ===== */ [data-theme="rosepine"] { color-scheme: light; --bg: #faf4ed; --surface: #fffaf3; --surface-2: #f2e9e1; --surface-raised: #fffaf3; --ink: #575279; --ink-strong: #393552; --muted: #9893a5; --line: #dfdad9; --line-strong: #cecacd; --switch-track: #b9b0bd; --accent: #b4637a; --accent-hover: #a2546a; --accent-soft: rgba(180,99,122,.12); --pine: #286983; --pine-soft: rgba(40,105,131,.12); --rose: #d7827e; --rose-soft: rgba(215,130,126,.12); --gold: #ea9d34; --gold-soft: rgba(234,157,52,.14); --foam: #56949f; --danger: #b4637a; --danger-soft: rgba(180,99,122,.10); /* #84 (v1.007): rosepine danger already equals the accent — the rail is that rose, harmonized by construction. */ --swipe-rail-bg: #b4637a; --on-accent: #fffaf3; --warning: #ea9d34; --focus-ring: rgba(180,99,122,.25); --shadow-color: rgba(87,82,121,.12); --backdrop: rgba(87,82,121,.32); --theme-color: #faf4ed; --nav-bg: rgba(250,244,237,.82); --heat-0: #dfdad9; --heat-1: #f3e3e6; --heat-2: #e9c6cd; --heat-3: #d89cab; --heat-4: #c47384; --heat-5: #b4637a; } [data-theme="macchiato"] { color-scheme: dark; --bg: #24273a; --surface: #1e2030; --surface-2: #363a4f; --surface-raised: #1e2030; --ink: #cad3f5; --ink-strong: #ffffff; --muted: #a5adcb; --line: #363a4f; --line-strong: #494d64; --switch-track: rgba(255,255,255,.30); /* #220 (user 2026-09-22): the peach accent and brown/orange heat ramp felt jarring on the dark background — reworked to the app's green (Catppuccin macchiato green), cohesive with the light theme. */ --accent: #a6da95; --accent-hover: #b9e5ac; --accent-soft: rgba(166,218,149,.14); --pine: #8bd5ca; --pine-soft: rgba(139,213,202,.14); --rose: #f5bde6; --rose-soft: rgba(245,189,230,.14); --gold: #eed49f; --gold-soft: rgba(238,212,159,.14); --foam: #91d7e3; --danger: #ed8796; --danger-soft: rgba(237,135,150,.14); /* #84 (v1.007): swipe rail — macchiato danger warmed 22% toward the green accent. */ --swipe-rail-bg: #dd9996; --on-accent: #181926; --warning: #eed49f; --focus-ring: rgba(166,218,149,.30); --shadow-color: rgba(0,0,0,.35); --backdrop: rgba(17,17,27,.60); --theme-color: #24273a; --nav-bg: rgba(36,39,58,.82); --heat-0: #363a4f; --heat-1: #2e3d30; --heat-2: #3c573d; --heat-3: #527a4e; --heat-4: #77a868; --heat-5: #a6da95; } [data-theme="mocha"] { color-scheme: dark; --bg: #1e1e2e; --surface: #181825; --surface-2: #313244; --surface-raised: #181825; --ink: #cdd6f4; --ink-strong: #ffffff; --muted: #a6adc8; --line: #313244; --line-strong: #45475a; --switch-track: rgba(255,255,255,.30); --accent: #a6e3a1; --accent-hover: #b9ecb4; --accent-soft: rgba(166,227,161,.14); --pine: #94e2d5; --pine-soft: rgba(148,226,213,.14); --rose: #f5c2e7; --rose-soft: rgba(245,194,231,.14); --gold: #f9e2af; --gold-soft: rgba(249,226,175,.14); --foam: #89dceb; --danger: #f38ba8; --danger-soft: rgba(243,139,168,.14); /* #84 (v1.007): swipe rail — mocha danger warmed 22% toward the green accent. */ --swipe-rail-bg: #e29ea6; --on-accent: #11111b; --warning: #f9e2af; --focus-ring: rgba(166,227,161,.30); --shadow-color: rgba(0,0,0,.35); --backdrop: rgba(17,17,27,.60); --theme-color: #1e1e2e; --nav-bg: rgba(30,30,46,.82); --heat-0: #313244; --heat-1: #2c3d2c; --heat-2: #3f563d; --heat-3: #5a7d54; --heat-4: #7fb877; --heat-5: #a6e3a1; } * { box-sizing: border-box; } /* ===== 2. Base elements & resets ===== */ html { font-optical-sizing: auto; --bottom-nav-clearance: calc(82px + env(safe-area-inset-bottom)); --top-bar-clearance: calc(env(safe-area-inset-top) + 66px); background: var(--bg); color: var(--ink); scroll-padding-bottom: var(--bottom-nav-clearance); scroll-padding-top: var(--top-bar-clearance); } /* #162: focused/scrolled-to content clears the fixed top bar, mirroring the bottom-nav padding. */ /* Native-app feel (2026-09-11): on touch devices only (.is-touch, set by JS via pointer:coarse) — no pinch-zoom, no visible scrollbars, and no horizontal page panning (pan-y only: the page must never drift sideways; set-row swipe is JS-driven with its own touch-action). Desktop (fine pointer) is completely untouched. */ .is-touch { touch-action: pan-y; scrollbar-width: none; } /* #1: reorder-exercises modal (2026-09-11) — up/down arrows per row. */ .reorder-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .reorder-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); } .reorder-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .reorder-superset-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 2px 8px; } /* #448: the reorder row renders one superset block — the tag plus the member names on one row. */ .reorder-members { font-weight: 600; font-size: 12px; color: var(--muted); } .reorder-arrows { display: flex; gap: 4px; flex-shrink: 0; } .reorder-arrow { width: var(--icon-btn); height: var(--icon-btn); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); cursor: pointer; } .reorder-arrow:disabled { opacity: .3; cursor: default; } .reorder-arrow:not(:disabled):active { background: var(--surface-raised); } /* Always-on checkboxes in the reorder dialog (user 2026-09-22): each block row carries a checkbox on the left plus the reorder arrows. */ .dialog-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .reorder-row .reorder-name { flex: 1; } .reorder-check { flex: none; background: none; border: 0; padding: 8px 4px 8px 0; margin: 0; cursor: pointer; } .select-check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; color: transparent; } .select-check svg { width: 14px; height: 14px; display: block; } .select-check.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .reorder-select-foot { display: flex; flex-direction: column; gap: 2px; width: 100%; } .reorder-select-actions { display: flex; gap: 8px; } .reorder-select-actions .primary-button { flex: 1; } .reorder-confirm-body { margin: 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1.6; } .reorder-confirm-body b { color: var(--ink); } .is-touch::-webkit-scrollbar, .is-touch body::-webkit-scrollbar { display: none; } .is-touch body { scrollbar-width: none; } html, body { overflow-x: hidden; } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); background: var(--bg); scroll-padding-bottom: var(--bottom-nav-clearance); } button, input, textarea, select { font: inherit; } button { color: inherit; } a { color: inherit; } /* ===== 3. App shell, status scrim & page container ===== */ /* .app is a size container: on desktop the column is 393px, so all width breakpoints below key off the column (container queries), not the viewport — the desktop app behaves exactly like the iPhone viewport (user 2026-09-10: desktop is just the phone, centered, for testing). */ .app { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); container-type: inline-size; } /* Opaque backdrop behind the iOS status bar / Dynamic Island so scrolled content slides underneath it instead of colliding with the clock. Zero-height elsewhere. */ /* Q12: the scrim intentionally paints ABOVE the top bar (z-index 40 > 30) to tint the iOS status area; it stays safe only because of pointer-events: none — never make it interactive. */ .status-scrim { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--bg); z-index: 40; pointer-events: none; } .shell { width: min(1120px, 100%); margin: 0 auto; padding: var(--top-bar-clearance) 24px 112px; } /* Every view's first block starts at exactly the same offset below the top bar, so switching tabs never shifts content vertically. */ .shell > * > :first-child { margin-top: 0; } .add-exercise { min-height: var(--btn-h); padding: 0 18px; border: 0; border-radius: var(--radius-md); background: var(--accent); color: var(--surface-raised); font-weight: 750; cursor: pointer; white-space: nowrap; } .add-exercise:hover { background: var(--accent-hover); } /* ===== 4. Typography ===== */ h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 5px; font: 800 clamp(32px, 5vw, 44px)/1.05 var(--font-sans); letter-spacing: -.03em; } .lede { margin: 0; color: var(--muted); font-size: 15px; } /* ===== 5. Search & filter controls ===== */ .controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 16px; } .search-wrap { position: relative; } .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; } .search { width: 100%; height: var(--input-h); padding: 0 44px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); outline: none; transition: border-color var(--motion-micro) var(--ease-standard), box-shadow var(--motion-micro) var(--ease-standard); } /* C2 (pixel-peeper PP2): the custom .clear-search button is the only clear control — suppress the native search cancel button so the two never render side by side. #667: the picker search carries the same custom button, so its native cancel is suppressed too. */ .search::-webkit-search-cancel-button, .picker-search::-webkit-search-cancel-button { display: none; } .search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } /* #667 (user 2026-10-18): the clear button rendered low/off-center with a small washed-out glyph (top:4px inside a 44px field, no font-size so the × fell back to the tiny UA button font). Centered on the field like .search-icon (top:50% + translateY), glyph sized/weighted like the app's other × icon button (.dialog-close: 22px, line-height 1, muted). 44px tap target; the inputs reserve the space with permanent right padding, so showing/hiding never shifts layout. */ .clear-search { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: none; font-family: inherit; font-size: 22px; line-height: 1; } .clear-search.visible { display: grid; place-items: center; } .filter-button { min-width: 0; height: var(--input-h); min-height: var(--input-h); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .filter-button[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); } .filter-panel { display: none; grid-template-columns: minmax(0, 1.6fr) minmax(220px, .7fr); gap: 18px; margin-bottom: 18px; padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .filter-panel.open { display: grid; } /* #674 (user 2026-10-18): one prominent Clear-all for the whole panel — a real secondary button in the panel header row, shown whenever any filter is active. It replaces the tiny "Clear" text link that sat beside MUSCLES and (in the library) reset only the muscle picks. */ .filter-panel-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .filter-clear-all { min-height: var(--btn-h-sm); padding: 0 14px; font-size: 13px; } .filter-clear-all[hidden] { display: none; } .filter-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } /* #238 sub-issue (user 2026-09-12): the PROGRAM row's chip sat too close to the muscle list above it. */ .muscle-options + .filter-label-row { margin-top: 14px; } .filter-group label, .filter-label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; } .filter-clear { padding: 2px 0; border: 0; background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; } .muscle-options { display: flex; flex-wrap: wrap; gap: 7px; } /* #670 (user 2026-10-18): chips keep IDENTICAL geometry in both states. The #607 selected state bolds the label (font-weight 800), and bold text is wider — chips grew on selection and the grid reflowed. The label span reserves the bold footprint in both states (an invisible 800-weight ::after carrying the same text, stacked under the visible label at height 0), and the chip box itself is fixed-height with centered content, so selection changes color only — never size. */ .muscle-option { height: var(--btn-h-sm); min-height: var(--btn-h-sm); padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 12px; line-height: 1; text-transform: capitalize; display: inline-flex; align-items: center; justify-content: center; } .muscle-option-label { display: inline-flex; flex-direction: column; text-align: center; } .muscle-option-label::after { content: attr(data-label); font-weight: 800; height: 0; overflow: hidden; visibility: hidden; } .muscle-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .muscle-option:has(> svg) { display: inline-flex; align-items: center; gap: 6px; } .muscle-option > svg { width: 13px; height: 13px; fill: currentColor; flex: none; } select { width: 100%; min-height: var(--input-h); margin-top: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background-color: var(--surface); color: var(--ink); font: inherit; } /* Every dropdown gets the theme-aware chevron (#9): never a white-on-white native arrow. */ select { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 12px center; } .summary-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 2px 12px; } .library-section + .library-section { margin-top: 28px; } /* User 2026-09-12: a hairline separates Favorites from the Recents section below it. */ .library-hairline { border: 0; border-top: 1px solid var(--line); margin: 24px 0 0; } .library-heading { margin: 0 2px 10px; font-size: 15px; letter-spacing: -.01em; } .result-count { margin: 0; font-size: 13px; color: var(--muted); } .active-query { font-weight: 700; color: var(--ink); } /* ===== 6. Exercise library cards & tags ===== */ .exercise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .exercise-card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: transform var(--motion-micro) var(--ease-standard), box-shadow var(--motion-micro) var(--ease-standard), border-color var(--motion-micro) var(--ease-standard); } .exercise-card-main { display: block; width: 100%; min-height: 164px; padding: var(--card-pad); padding-right: 56px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } /* #491: the hover lift must only apply where hover really exists. iOS Safari keeps :hover stuck after a tap, so on touch the card jumped up 2px on tap and stayed shifted (same sticky-:hover family as the dash-period-tabs fix). Matches the @media (hover: hover) guards on .picker-item:hover / .suggestion-card:hover / .calendar-page:hover. */ @media (hover: hover) { .exercise-card:has(.exercise-card-main:hover) { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-soft); } } .exercise-card:has(.exercise-card-main:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .exercise-card-main:focus-visible { outline: none; } .exercise-card h2 { margin: 0 0 20px; font-size: 18px; line-height: 1.18; letter-spacing: -.02em; } /* Favorite star: hollow muted by default, filled accent when favorited. */ .fav-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; } .fav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } .fav-toggle:hover { background: var(--surface-2); } .fav-toggle[aria-pressed="true"] { color: var(--accent); } .fav-toggle[aria-pressed="true"] svg { fill: currentColor; } /* #390 (user 2026-09-13): the favorite star is part of the exercise header, not an afterthought — a bigger mark aligned with the title's first line. The 44px touch target is unchanged; the -6px nudge centers the star on the title text (30px title on phone, cap-height centered). */ .detail-header .fav-toggle { align-self: start; margin-top: -6px; } .detail-header .fav-toggle svg { width: 30px; height: 30px; } .exercise-card .fav-toggle { position: absolute; top: 8px; right: 8px; } .tag-row { display: flex; flex-wrap: wrap; gap: 6px; } .tag { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 11px; text-transform: capitalize; } .tag.primary { background: var(--accent-soft); color: var(--accent); font-weight: 700; border: 1px solid var(--accent); } .tag.custom { background: var(--gold-soft); color: var(--warning); font-weight: 700; } /* Phase 2 (v1.901): "Single side" is a capability, not metadata — its own badge kind: soft-green fill, green border, uppercase micro-label. A NEW element; the base .tag pill treatment above is unchanged. */ .tag.side { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-hover); font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; border-radius: var(--radius-sm); } .empty { padding: 60px 20px; text-align: center; color: var(--muted); grid-column: 1 / -1; } /* #504 (v1.8): shared empty states — the heading states the state, one short description, a primary action and an optional secondary link. Centered, quiet, and consistent across Library, Logs, Stats, and the program screens. */ .empty-state { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 34px 16px; } .empty-state-title { margin: 0; font: 700 22px/1.25 var(--font-sans); color: var(--ink); } .empty-state-sub { margin: 0; max-width: 340px; color: var(--muted); font-size: 13px; line-height: 1.5; } .empty-state-actions { display: grid; gap: 10px; justify-items: center; margin-top: 6px; } .empty-state-actions .primary-button { min-width: 210px; } /* #504: the Stats first-use state replaces the whole tab body. */ #statsView.stats-is-empty > :not(#statsEmpty) { display: none; } #statsEmpty[hidden] { display: none; } /* #504: the no-active-program state sits above the (hidden) setup form. */ #programEmpty { margin-bottom: 4px; } #programEmpty[hidden] { display: none; } /* #504: the workout-start hero speaks in the empty-state register — state-headed title, the pathways, a primary start action and a quiet secondary link into the saved list. */ .training-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 20px; } .training-hero-actions .primary-button { min-width: 200px; } /* ===== 7. Dialogs & forms ===== */ .custom-dialog { width: min(560px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow: auto; scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); } .custom-dialog::backdrop { background: var(--backdrop); } /* #620 (v1.908): sheet/dialog motion — the entrance is opacity plus a settle of at most 6px on the enter token (decelerate); the exit is opacity only on the exit token (accelerate), driven by the .is-closing class the dialog close path (programs.js) applies before the native close lands. Paint-only: the entrance animates an already-interactive dialog and never blocks input. */ .custom-dialog[open] { animation: dialog-enter var(--motion-enter) var(--ease-decelerate); } @keyframes dialog-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .custom-dialog.is-closing { animation: dialog-exit var(--motion-exit) var(--ease-accelerate); pointer-events: none; } @keyframes dialog-exit { from { opacity: 1; } to { opacity: 0; } } /* #179: share landing polish — a context line under the title, one primary action with a quiet text alternative (the twin full buttons read as redundant). #446 (user 2026-09-14): the #179 vertical centering is gone — it made the skeleton→hydrated swap jump, so the card is top-aligned and hydrates in place. */ .share-context { margin: 0 0 10px; color: var(--muted); font-size: 13px; } .share-actions { display: grid; gap: 2px; justify-items: center; } .share-actions .primary-button { width: 100%; min-height: 52px; } /* Share landing header (user 2026-09-12): green Start button (#297) plus the bookmark icon next to the ×, so the actions are one tap away without scrolling. */ .share-header-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .share-icon-button { display: grid; place-items: center; width: var(--icon-btn); height: var(--icon-btn); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); cursor: pointer; padding: 0; } .share-icon-button:hover { background: var(--surface-2); } .share-icon-button:active { opacity: .6; } /* #433 (user 2026-09-14): back chevron on the drilled-in program workout card — matches the top bar's back-chevron language. */ .share-back-btn { display: grid; place-items: center; width: var(--icon-btn); height: var(--icon-btn); margin-left: -12px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); cursor: pointer; padding: 0; flex: 0 0 auto; } .share-back-btn svg { width: 22px; height: 22px; } .share-back-btn:active { opacity: .6; } /* #297 (user 2026-09-12): the header Start is a compact green button, sized to sit with the icon buttons. */ .share-header-actions .share-start-btn { min-height: 40px; padding: 0 18px; font-size: 15px; } /* Share landing footer (user 2026-09-12): the full descriptive buttons — big primary pill + green text link + quiet grey note. */ .share-footer-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; } /* #212 (user 2026-09-14): on the workout landing the same descriptive actions sit directly under the title/meta instead of in the footer. */ .share-top-actions { margin: 2px 0 14px; display: flex; flex-direction: column; gap: 8px; } .share-alt-action { border: 0; background: none; padding: 10px 12px; min-height: 44px; color: var(--accent); font-size: 14px; font-weight: 700; cursor: pointer; } .share-alt-action:active { opacity: .6; } #sharePreviewBody { display: flex; flex-direction: column; min-height: calc(100dvh - var(--top-bar-clearance) - var(--bottom-nav-clearance)); } /* #446 (user 2026-09-14): the share card is top-aligned, not vertically centered. Centering made the skeleton→hydrated swap jump: the short skeleton rendered centered while the taller real card snapped to the top when its auto margins collapsed. Top-aligned, the card hydrates in place and only grows downward. */ #sharePreviewBody .completed-card { margin-top: 0; margin-bottom: 0; } /* #307 (user 2026-09-13): the share landing no longer shows a bare "Loading…" card while the payload resolves — it renders the real card layout immediately with shimmer skeleton placeholders that hydrate in place, so nothing jumps when the content arrives. */ @keyframes skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .skel { display: block; border-radius: 8px; background: linear-gradient(100deg, var(--surface-2) 40%, var(--line) 50%, var(--surface-2) 60%); background-size: 200% 100%; animation: skel-shimmer 1.4s linear infinite; pointer-events: none; user-select: none; } .skel-title { height: 34px; width: 62%; border-radius: var(--radius-md); } .skel-line { height: 14px; border-radius: 7px; } .skel-pill { height: 28px; width: 84px; border-radius: 999px; } .skel-row { min-height: 58px; border-radius: var(--radius-md); } .skel-btn { min-height: 52px; width: 100%; border-radius: var(--radius-md); } .skel-map { height: 190px; border-radius: var(--radius-md); margin-bottom: 12px; } .skel-circle { width: 40px; height: 40px; border-radius: 50%; } .skel-start { width: 88px; height: 40px; border-radius: var(--radius-md); } /* #409 (user 2026-09-14): skeleton sizes for the Stats view and the exercise-detail late-hydrating sections. Fixed heights match the real cards so hydration doesn't shift the layout. */ .skel-stat-card { display: flex; flex-direction: column; gap: 10px; min-height: 94px; } .skel-stat-num { height: 30px; width: 55%; } .skel-stat-label { height: 12px; width: 80%; } .skel-stat-value { height: 30px; width: 60%; } .skel-stat-sub { height: 12px; width: 75%; } .skel-chart { height: 180px; border-radius: var(--radius-md); } @media (prefers-reduced-motion: reduce) { .skel { animation: none; } } /* #307 (user 2026-09-13): pre-paint share boot. The head script adds .share-boot to when the URL is a share link, so the FIRST paint already shows the loading skeleton — the empty home dashboard never flashes before the scripts run. openSharePreviewLoading() removes the class when it renders the live skeleton (same synchronous task, so no paint lands between the static and live skeletons). Author styles beat the UA [hidden] rule, and the class is gone before any later show/hide, so the hidden attribute keeps working afterwards. */ html.share-boot #dashboardView { display: none; } html.share-boot #workoutView { display: block; } html.share-boot #workoutView > :not(#sharePreview) { display: none; } html.share-boot #sharePreview { display: block; } .custom-form { padding: var(--space-5); } .custom-form-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: var(--space-5); } .custom-form-head h2 { margin: 0 0 5px; font: 700 24px/1.15 var(--font-sans); letter-spacing: -.02em; } .custom-form-head p { margin: 0; color: var(--muted); font-size: 13px; } .dialog-close { flex: 0 0 auto; display: grid; place-items: center; width: var(--icon-btn); height: var(--icon-btn); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 22px; line-height: 1; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .field.wide { grid-column: 1 / -1; } .field label { color: var(--muted); font-size: 12px; font-weight: 700; } .field input, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); outline: none; } .field input { min-height: var(--input-h); padding: 0 14px; } .field textarea { min-height: 96px; padding: var(--space-3) 14px; resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .field-help { color: var(--muted); font-size: 11px; line-height: 1.35; } /* #160: helper copy must wrap, never clip mid-word. */ .field-help { overflow-wrap: break-word; } /* #205: reserve the tallest mode description (2 lines at 11px/1.35) so tapping a Progression mode pill swaps copy without a scroll jump. */ #settingsSchemeDesc { min-height: 2.7em; } .settings-grid > *, .workout-meta > * { min-width: 0; } /* #160: grid children may shrink below content width so long help text wraps instead of overflowing. */ fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; } fieldset.field legend { padding: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; } .form-pill-options { display: flex; flex-wrap: wrap; gap: 7px; } .form-pill { min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 750; text-transform: capitalize; } .form-pill[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .form-pill:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .form-error { min-height: 18px; margin: 12px 0 0; color: var(--danger); font-size: 12px; } /* #145: action rows must wrap — long button labels (e.g. the review-sets dialog's four actions) overflowed the dialog at phone width. */ .form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 5px; } /* #244 (user 2026-09-12): share dialogs use two centered buttons, no Done — centered in both the row and compact-column layouts. */ .form-actions.centered { justify-content: center; } .compact-dialog .form-actions.centered { flex-direction: row; align-items: center; } .compact-dialog .form-actions.centered .primary-button, .compact-dialog .form-actions.centered .secondary-button { flex: 1 1 0; } .builder-configure-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; } /* #343 (Phase 2, v1.901): dialog actions use ONE button family — .primary-button / .secondary-button (destructive = .primary-button .danger-button). #663: the .form-action legacy alias that survived here as a safety net was removed — no markup has used it since the #343 unification, and the versioned SW ships CSS + markup atomically, so no stray reference can exist. */ /* #288: stacked sign-in choice options — title + explanatory sub-line. */ .choice-list { display: grid; gap: 8px; margin: 12px 0 4px; } .choice-option { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; } .choice-option strong { font-size: 15px; } .choice-option span { color: var(--muted); font-size: 12.5px; line-height: 1.4; } .choice-option:active { transform: scale(.99); } /* #415 (user 2026-09-13): the account-data option leads the sign-in choice — accent border, tinted background, Recommended pill — with an "or" hairline separating it from the destructive choices. */ .choice-option.choice-recommended { position: relative; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); } .choice-option.choice-recommended strong { color: var(--accent); } /* #415 follow-up (user 2026-09-13): the Recommended pill sits badge-style on the option's top-right border edge, in the theme's readable on-accent color. */ /* #415a (user 2026-09-13): the badge text must stay light and legible in every theme. #415 ROOT CAUSE (user 2026-09-13, v1.645): three builds changed this rule's color value and the badge still rendered gray. The rule was never winning: `.choice-option span { color: var(--muted) }` (specificity 0,1,1) beats `.recommended-badge` (0,1,0), so the pill always showed --muted. Fixed with a 0,2,1 selector plus !important — robustness beats elegance on the fourth attempt. User wants plain white text, full stop. */ .choice-option span.recommended-badge { position: absolute; top: -11px; right: 12px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff !important; background: color-mix(in srgb, var(--accent) 55%, #000); text-shadow: 0 1px 2px rgba(0,0,0,.35); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .choice-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; } .choice-or::before, .choice-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); } .choice-confirm-copy { margin: 12px 0 4px; color: var(--muted); font-size: 13px; line-height: 1.5; } .choice-confirm-copy strong { color: var(--ink); } .choice-option.choice-danger { border: 2px solid var(--danger); } .choice-option.choice-danger strong { color: var(--danger); } .custom-tool { min-height: var(--btn-h-sm); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 700; } .custom-tool.danger { color: var(--danger); border-color: var(--danger); } .custom-tools-row { display: flex; gap: 10px; margin-top: 26px; } .custom-tools-row:empty { display: none; } .custom-tools-row .custom-tool { flex: 1; } .custom-delete-btn { width: 100%; min-height: 46px; font-size: 14px; } .empty strong { display: block; color: var(--ink); font: 700 22px/1.25 var(--font-sans); margin-bottom: 8px; } /* ===== 8. Exercise detail ===== */ .detail { display: none; } .detail.active { display: block; } .library.hidden { display: none; } .back { margin: 0 0 var(--space-5); min-height: var(--btn-h-sm); padding: 0 14px 0 10px; border: 0; border-radius: var(--radius-md); background: var(--surface-2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: 14px; font-weight: 700; } .back:hover { background: var(--surface-2); color: var(--ink); } /* Top-bar back button (2026-09-11, user): plain chevron, same 44px footprint as the gear — no more pill. It inherits .top-bar-btn. */ .detail-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; margin-bottom: var(--space-5); } .detail-title { font: 800 clamp(30px, 6vw, 44px)/1.02 var(--font-sans); letter-spacing: -.03em; margin-bottom: 16px; } .detail-tags { display: flex; flex-wrap: wrap; gap: 7px; } .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); } .stat { padding: var(--card-pad); border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-lg); } .stat-label { display: block; margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 700; } .stat-value { display: block; font-size: clamp(24px, 4vw, 34px); line-height: 1; font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .stat-sub { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; } .section { margin-bottom: var(--space-5); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .section h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; } .section-note { margin: 0; color: var(--muted); font-size: 12px; } /* #14: compact segmented toggles (top-exercises metric, muscle-map mode). Fixed button widths so tapping never shifts the surrounding layout. v1.906: segmented controls are squared to the radius-md token — the pill radius stays reserved for switch tracks and progress. */ .mini-segmented { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .mini-segmented button { min-width: 56px; min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted); font-size: 12px; font-weight: 750; cursor: pointer; box-shadow: none; } .mini-segmented button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: none; } /* #4: upcoming program workout shown when a future calendar date is tapped. */ .upcoming-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .upcoming-name { margin: 0 0 4px; font-size: 15px; } .upcoming-program .secondary-button { margin-top: 10px; } /* Exercise detail: stack section heads so notes never crowd the title on narrow screens. */ .detail .section-head { flex-direction: column; align-items: flex-start; gap: 3px; } .detail .chart-empty { min-height: 0; padding: 30px 18px; } .detail .chart-wrap { min-height: 0; } /* Phone QA 2026-09-11: uniform card spacing across the exercise page. */ #detailView > .dashboard-card { margin-bottom: 18px; } /* Detail sections are proper cards: heading lives inside, with real padding. */ .history-list.is-empty { border-top: none; } .detail .history-empty { background: none; border-radius: 0; padding: 6px 2px 0; font-size: 13px; } /* #204 (user 2026-09-14): expanded per-workout history polish. Each session is a real card; the head row carries only date + View workout (the best-estimate headline moved to its own sub-line so nothing wraps awkwardly); set rows are hairline-separated lines, not inset mini-cards. */ .history-list { border-top: none; display: grid; gap: 12px; align-content: start; } .history-list[hidden] { display: none; } .history-session { background: var(--surface); border-radius: var(--radius-lg); padding: 14px var(--space-4) var(--space-2); } .session-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .session-date { font-size: 14px; font-weight: 750; } .session-view { flex-shrink: 0; white-space: nowrap; } .session-sub { margin-top: 3px; font-size: 12px; color: var(--muted); } .history-list .exercise-tag-row { margin-top: 10px; } .history-list .sets { display: block; margin-top: 4px; } .set-row { display: grid; grid-template-columns: 48px 1fr 1fr 1fr; gap: 10px; align-items: center; min-height: 36px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--surface); font-variant-numeric: tabular-nums; } .set-num { color: var(--muted); font-size: 11px; font-weight: 700; } /* Exercise history toggle + compact set rows (user 2026-09-12): history starts collapsed; each set is one tidy line. */ .history-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 2px; background: none; border: 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; } .history-toggle:active { opacity: .6; } .history-list .set-row { grid-template-columns: 28px 1fr auto; gap: 8px; background: none; border-radius: 0; padding: 8px 0; min-height: 0; border-top: 1px solid var(--line); } .history-list .set-row:first-child { border-top: none; } .history-list .set-num { font-size: 12px; } .history-list .set-main { font-size: 14px; } .history-list .set-main strong { font-size: 15px; } .history-list .set-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .history-list .set-rpe strong { color: var(--ink); } .history-list .set-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 11px; text-transform: capitalize; } .history-empty { padding: 30px 16px; color: var(--muted); background: var(--surface); border-radius: var(--radius-lg); } .instructions { padding-left: 20px; margin: 0; color: var(--ink); font-size: 13px; line-height: 1.55; } .instructions li + li { margin-top: 9px; } .similar-grid { display: block; } .score { color: var(--muted); font-size: 11px; } .formula { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; } /* ===== 9. Workout builder & live workout ===== */ .workout-view, .program-view { display: none; } .workout-view.active, .program-view.active { display: block; } /* View transitions (#620, v1.908): opacity only — no translation or scaling on view switches (movement read as disorienting). The fade runs on the page token (120ms, standard easing) and never blocks input. The animation restarts every time the show function re-adds .active (hideAllViews removes it first); in-view sub-screens don't toggle .active, so they don't animate. Disabled for prefers-reduced-motion. */ @keyframes view-enter { from { opacity: 0; } to { opacity: 1; } } .dashboard-view.active, .stats-view.active, .workout-view.active, .program-view.active, .detail.active, .library:not(.hidden) { animation: view-enter var(--motion-page) var(--ease-standard); } @media (prefers-reduced-motion: reduce) { .dashboard-view.active, .stats-view.active, .workout-view.active, .program-view.active, .detail.active, .library:not(.hidden), .ob-screen, .of-body { animation: none; } } .workout-start { max-width: 680px; padding: clamp(24px, 5vw, 48px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .workout-start h2 { margin-bottom: 8px; font: 800 clamp(26px, 5vw, 34px)/1.08 var(--font-sans); letter-spacing: -.025em; } .workout-start p { max-width: 520px; margin-bottom: 24px; color: var(--muted); line-height: 1.5; } .workout-actions { display: flex; flex-wrap: wrap; gap: 9px; } /* Button variants — Phase 2 (v1.901) token taxonomy, superseding the v1.007 three-kinds note: (1) primary actions are squared radius-md at the tall 52px tier, flat (no shadow) — Finish, Start, Save, and EVERY dialog's main action (#343: one family in dialogs) (v1.906: primary buttons are no longer full pills); (2) secondary buttons are squared radius-md at the standard 44px tier — including every dialog's secondary action; (3) toggle/segmented controls (.form-pill, .step-pills, .reps-only-toggle) keep the prod pill treatment. CTA labels must fit: primary and secondary never wrap mid-label. */ .primary-button, .secondary-button { min-height: var(--btn-h); padding: 0 18px; cursor: pointer; font-weight: 750; white-space: nowrap; text-align: center; } .primary-button { min-height: var(--btn-h-lg); padding: 0 22px; border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); box-shadow: none; } .primary-button:hover { background: var(--accent-hover); } .secondary-button { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-strong); } .secondary-button:hover { filter: brightness(.96); } /* #112: bottom "Add exercise" button — full width like "Add set", with top spacing. */ .add-exercise-bottom { display: flex; align-items: center; justify-content: center; width: 100%; margin: 18px 0 0; } .primary-button.danger-button { border-color: var(--danger); background: var(--danger); color: var(--on-accent); } /* #633 (user 2026-10-18): paired controls share ONE height — the 44px standard tier. Inside a dialog every primary drops to var(--btn-h) so pairs like Later/Refresh now render equal; page-level primaries outside dialogs keep the 52px hero tier. The same rule applied to the page-level action rows that pair a primary with a 44px secondary: the session/builder footers (Discard + Finish / Save) and the prediction card (Use + Pick my own). */ .custom-dialog .primary-button { min-height: var(--btn-h); } .workout-actions .primary-button { min-height: var(--btn-h); } .predict-actions .primary-button { min-height: var(--btn-h); } .secondary-button.danger-button { border-color: var(--rose); color: var(--rose); } .workout-meta { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 22px; } /* #632 (user 2026-10-18): the meta fields' VALUES share one spec too — 14px / 700, the FOCUS summary's treatment (see .workout-focus-summary and .date-display). The workout-name input was regular weight while focus/date rendered bold. Covers the session and builder name fields (both render inside .workout-meta). */ .workout-meta .field input { background: var(--surface); font-size: 14px; font-weight: 700; } .workout-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; } .workout-toolbar h2 { margin: 0; font-size: 18px; } .workout-exercises { display: grid; gap: 14px; } .swipe-item { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); } .swipe-content { position: relative; z-index: 1; transform: translateX(0); transition: transform var(--motion-enter) var(--ease-decelerate); touch-action: pan-y; } /* #107: width overlap removed — testing if will-change was the artifact source. */ /* Delete rail: only the trailing 72px is red (user 2026-09-11) — the row slides left over it, iOS-Mail style. Icon-only, no text. #84 (user 2026-09-11, v1.007): the red is harmonized with the accent — --swipe-rail-bg is a per-theme explicit mix (danger 78% + accent 22%) so it reads destructive without clashing with the theme accent; the trash icon uses --on-accent (contrast >= 4:1 in every theme). */ .swipe-delete-action { position: absolute; top: 0; bottom: 0; right: 0; width: var(--swipe-rail); border: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: var(--surface); -webkit-appearance: none; appearance: none; color: var(--on-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: none; } /* #186: a closed rail sits behind the row content but still occupies its strip — without this it can win hit tests over a visible inline control at the same spot (e.g. the set-row ×). Only an open rail receives taps; the tabIndex is already managed the same way in setSwipeOpen(). */ .swipe-item.is-open .swipe-delete-action { pointer-events: auto; } /* #107: closed rail matches the row surface — even if iOS WebKit blends at the rounded clip edge, it blends surface-with-surface (invisible). Red appears only while actively dragging (.is-swiping) or open. */ .swipe-item.is-open .swipe-delete-action, .swipe-item.is-swiping .swipe-delete-action { background: var(--swipe-rail-bg); } .swipe-delete-action svg { width: 26px; height: 26px; display: block; } .workout-exercise { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .workout-exercise.swipe-content { border: 0; } /* Collapsible exercise cards in the live workout */ .workout-exercise.exercise-accordion { padding: 0; } /* #80 (user 2026-09-11 marathon): the collapse chevron sits to the LEFT of the exercise title, not in the top-right corner. */ .exercise-accordion-head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 15px 18px var(--space-4); cursor: pointer; list-style: none; } .exercise-accordion-head::-webkit-details-marker { display: none; } .exercise-accordion-title { display: grid; gap: 3px; min-width: 0; } .exercise-accordion-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; letter-spacing: -.01em; } .exercise-accordion-title small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .exercise-accordion-chevron { flex: none; color: var(--muted); font-size: 20px; line-height: 1; transition: transform var(--motion-micro) var(--ease-standard); } /* #12 (user 2026-09-11, reverted 2026-09-13): the info button sits in the card header row, in line with the title and the Warm-up pill. (user 2026-09-22/23: hidden on the collapsed summary via the :not([open]) rule below — the v1.886 removal killed it on expanded cards too.) */ .exercise-accordion.workout-exercise { position: relative; } .exercise-accordion.workout-exercise .exercise-accordion-head > .exercise-info-button { margin-left: auto; } /* (user 2026-09-13): when the Warm-up pill is present it takes the auto margin instead, so the pill sits snug against the info icon at the right edge — not floating mid-header wherever the title ends. When warm-ups exist the pill hides and the icon keeps its own auto margin. */ .exercise-accordion.workout-exercise .exercise-accordion-head > .warmup-corner { margin-left: auto; } .exercise-accordion.workout-exercise[open] .exercise-accordion-head > .warmup-corner + .exercise-info-button { margin-left: 0; } /* #616 reverted (user 2026-10-18): the builder header mirrors the live card — the notes pencil sits left of the info icon; the pencil takes the auto margin and the info icon snugs against it. */ /* The Warm-up pill and the info icon only make sense with the card open — hide them on the collapsed summary (user 2026-09-13 / 2026-09-22). */ .exercise-accordion.workout-exercise:not([open]) .warmup-corner { display: none; } .exercise-accordion.workout-exercise:not([open]) .exercise-info-button { display: none; } /* QA batch (user 2026-09-22): the "i" glyph is the Lucide-style info icon stolen from the Kohlrabi trainer work — circle outline, stroked "i". The button centers the SVG; text sizing is gone. */ /* FORK v1.953 (exercise-settings spec): ONE info-button spec — squared 40px, token radius. The 32px circle is retired everywhere; the settings-title-row keeps its smaller contextual override below. */ .exercise-info-button { position: relative; flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .exercise-info-button svg { width: 18px; height: 18px; display: block; } .exercise-info-button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .exercise-info-button:active { transform: scale(.94); } /* v1.906: card-header icon buttons (notes pencil + info) are squared radius-md boxes. Scoped to the card heads so toolbar and standalone info buttons keep their own sizes. #611: their HEIGHT matches the Warm-up button (.warmup-corner: 32px) — the 44px box towered over it. The base rule's 44px ::before tap target is unchanged. */ .exercise-card-head .exercise-info-button, .exercise-accordion-head .exercise-info-button { width: 40px; height: 40px; border-radius: var(--radius-md); } .exercise-accordion[open] .exercise-accordion-chevron { transform: rotate(90deg); } .exercise-accordion-body { padding: 2px 18px 18px; } /* v1.900 cleanup: LIVE workout cards are no longer accordions — plain always-expanded cards (the builder still uses the accordion rules above). Header holds the title, Warm-up pill, notes icon, info icon. */ /* v1.906: padding under the header row so the name/icon row breathes before the column labels / set rows — the builder summary head (.exercise-accordion-head) carries the same bottom padding. */ .exercise-card-head { display: flex; align-items: center; gap: 10px; padding-bottom: var(--space-4); } .exercise-card-title { display: grid; gap: 3px; min-width: 0; } .exercise-card-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; letter-spacing: -.01em; } .exercise-card-title small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .exercise-card-head > .warmup-corner { margin-left: auto; } .exercise-card-head > .exercise-info-button { margin-left: auto; } .exercise-card-head > .warmup-corner + .exercise-info-button { margin-left: 0; } /* The Exercise options disclosure takes the whole footer line; its body stacks inside the
, under the summary. */ .exercise-options-row { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: 12px; } .exercise-options-row > .advanced-options { flex: 1 1 auto; min-width: 0; margin-top: 0; } .exercise-card-body { padding-top: 2px; } /* v1.900: toolbar icon buttons are rounded squares (stroke icons). */ .exercise-info-button.toolbar-icon-btn { width: 40px; height: 40px; border-radius: 10px; color: var(--ink); } /* v1.900: workout-focus disclosure — a full-width tappable row in the app's disclosure style; the presets live inside. */ .workout-focus-disclosure { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .workout-focus-summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; } /* #613 (v1.907): floating legend on the field border, same notch pattern as .field > label (DATE / WORKOUT NAME) — the value sits inside the field, never a "Focus:" text prefix. #632 (user 2026-10-18): this legend's spec (12px / 700 / .04em, top -7px, left 8px, padding 0 6px, notch background) is now THE unified floating-legend spec — see the .field > label rule. */ .workout-focus-legend { position: absolute; top: -7px; left: 8px; z-index: 1; padding: 0 6px; background: var(--notch-bg, var(--bg)); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; } .workout-focus-summary::-webkit-details-marker { display: none; } .workout-focus-body { display: grid; gap: 8px; padding: 0 14px 12px; } /* v1.907: the Mixed marker — squared like the SINGLE SIDE badge family (.tag.side): soft accent fill, accent border, small uppercase label. Squared on purpose (radius token, never the pill radius); no chevron. */ .mixed-marker { flex: none; margin-left: auto; padding: 2px 8px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-hover); font: inherit; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; } /* v1.907: mixed-ranges dialog rows — exercise name left, its effective range and source right; the source is small muted text. */ .range-mix-list { display: grid; margin-bottom: 14px; } .range-mix-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); } .range-mix-row:first-child { border-top: 0; } .range-mix-name { min-width: 0; font-weight: 700; color: var(--ink); } .range-mix-detail { display: flex; align-items: baseline; gap: 8px; text-align: right; } .range-mix-range { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .range-mix-source { color: var(--muted); font-size: 11px; white-space: nowrap; } /* v1.900: warm-up ladder rung rows (tap-to-edit) in Settings. */ .warmup-rung-list { display: grid; gap: 8px; margin-top: 8px; } .warmup-rung { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .warmup-rung-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 650; color: var(--ink); cursor: pointer; text-align: left; } .warmup-rung-values { margin-left: auto; color: var(--muted); font-weight: 550; font-variant-numeric: tabular-nums; } .warmup-rung-editor { display: flex; gap: 12px; padding: 2px 14px 14px; } .warmup-rung-editor .rule-field { flex: 1; } /* v1.900: the review dialog's per-set checklist label. */ .review-list-label { margin: 2px 0 8px; font-size: 13px; font-weight: 650; color: var(--ink); } /* Pretty date display over a native date input */ .date-field { position: relative; } .date-display { width: 100%; min-height: var(--input-h); padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; text-align: left; } .date-display:hover { border-color: var(--line-strong); } /* The native date input covers the pretty display invisibly, so tapping the field opens the OS date picker directly (reliable on iOS, unlike showPicker on a 1px hidden input). */ .date-input-overlay { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; } /* v1.906: the native dropdown indicator is suppressed — no arrow is shown on the date field. Only the indicator is hidden; the overlay input itself still receives the tap and opens the picker. */ input[type="date"]::-webkit-calendar-picker-indicator { display: none; } /* #183: the action column fits both 44px targets (check + delete) with room to spare — the old 50px column overlapped them on narrow rows. */ .log-labels, .log-set { display: grid; grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 96px; gap: 6px; align-items: start; } .log-labels { margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 750; } .log-labels span { text-align: center; white-space: nowrap; } /* QA batch (user 2026-09-22): the RPE "?" is gone — rule retired. */ .log-set { padding: 12px 0; border: 0; background: transparent; } .log-set + .log-set { border-top: 1px solid var(--line); } .log-set-number { width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } .log-set-number:hover, .log-set-number:focus-visible { border-color: var(--line); background: var(--surface-2); color: var(--ink); outline: none; } .log-set-number.has-tags { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .weight-entry { min-width: 0; display: grid; gap: 3px; } /* #146: dumbbell total readout under the weight field — "2 x per-hand = total" so a per-hand entry is visibly wrong. */ .db-total-readout { font-size: 10.5px; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; } .db-total-readout[hidden] { display: none; } .log-input { width: 100%; min-width: 0; height: var(--input-h-sm); padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); outline: none; font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 700; /* #234 (user 2026-09-12): #218's caret removal looked clean, but bring the caret back very light and theme-matched — a translucent accent wash, not the default dark blink. */ caret-color: color-mix(in srgb, var(--accent) 45%, transparent); } .log-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } /* #218: values render heavy like the exercise name; placeholders stay light so hints remain readable. */ .log-input::placeholder { font-weight: 400; } .selected-set-tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 5px; min-height: 0; } .selected-set-tags:empty { display: none; } .set-tag-chip { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; } .set-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; } /* Set-complete is an open checkbox now (user 2026-09-11, Strong-style): empty rounded box; accent fill + check when the set is done. */ .complete-set { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; } .complete-set svg { width: 27px; height: 27px; display: block; } .complete-set .box { fill: none; stroke: var(--muted); stroke-width: 1.8; } .complete-set .tick { fill: none; stroke: transparent; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .complete-set[aria-pressed="true"] .box { fill: var(--accent); stroke: var(--accent); } .complete-set[aria-pressed="true"] .tick { stroke: var(--on-accent); } .log-set.is-complete .log-set-number { color: var(--accent); } /* Inline × delete (user 2026-09-11 marathon): quiet by default — small, muted, and visually subordinate to the checkbox; warms to a soft red only on hover/focus. Desktop keeps it; touch with swipe-to-delete on hides it (see the .is-touch.swipe-sets rule below). */ /* #94: the button itself is the 44px target — the old 32px button relied on a 44px ::before hit area that overflowed the card edge and got clipped. */ .delete-set-inline { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); opacity: .5; cursor: pointer; display: grid; place-items: center; transition: opacity var(--motion-micro) var(--ease-standard), background-color var(--motion-micro) var(--ease-standard), color var(--motion-micro) var(--ease-standard); } .delete-set-inline svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; display: block; } .delete-set-inline:hover, .delete-set-inline:focus-visible { opacity: 1; background: var(--rose-soft); color: var(--danger); outline: none; } /* Swipe-to-delete replaces the × on touch devices when the Settings toggle is on (user 2026-09-11). Desktop always keeps the ×. */ .is-touch.swipe-sets .delete-set-inline { display: none; } /* Program rows follow the same rule (user 2026-09-12): swipe-to-delete replaces the × when the Settings toggle is on; the × is the delete path when it's off. Desktop always keeps the ×. */ .is-touch.swipe-sets .program-workout-del { display: none; } /* #324: saved-workout × follows the same rule — swipe replaces it. */ .is-touch.swipe-sets .saved-workout-del { display: none; } .set-swipe { border-radius: 10px; } /* The delete action sits behind the row content: the row must be opaque (card surface), or the red rail bleeds through the row's transparent gaps and looks "stuck open" even when closed (user 2026-09-11). */ .set-swipe .swipe-content { background: var(--surface); } .add-set { margin: 12px 0 0 50px; padding: 7px 0; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 750; } .workout-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); } .workout-error { margin: 0; color: var(--danger); font-size: 12px; } .picker-search { width: 100%; height: var(--input-h); margin-bottom: 12px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md); outline: none; } /* Picker gets the library's search + filter interface (user 2026-09-10): circular icon-only filter button like the Exercises tab. */ .picker-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-bottom: 12px; align-items: center; } .picker-controls .picker-search { margin-bottom: 0; padding-left: 38px; padding-right: 44px; } .picker-filter-button { min-width: 0; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-md); } .picker-filter-button span { display: none; } .picker-filter-panel { margin-bottom: 12px; } /* #619 (v1.908): the results list is a column flex, not a grid. As a grid inside the sheet's height-constrained flex column, a card whose content (name + the wrapping Custom-chip sub-row) outgrew its track painted past the track's bottom edge, and the next card — painted later, with an opaque surface — covered the overflow, cutting the previous card's bottom edge and its Custom chip off. Column-flex items lay out sequentially at their full content height, so cards can never stack over each other. */ .picker-list { display: flex; flex-direction: column; gap: 7px; max-height: 48vh; overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: calc(82px + env(safe-area-inset-bottom)); scroll-padding-top: 2px; } /* #510 (user 2026-09-16): fixed-size modal — the dialog frame never grows or shrinks as search results change, so the header, search, and Done button never move. The template-mode rules block gets its own scroller instead of squeezing the footer out of the fixed frame. user 2026-09-17: the rules block must NEVER shrink below its content — the old flex: 0 1 auto let the long results list's flex pressure squash it into a ~45px scroll-slice (selected exercise name scrolled out of view, the × clipped at the box edge). flex: 0 0 auto keeps it sized to its rows; the max-height cap still scrolls it internally when many exercises are selected. #675 (user 2026-10-18): the original split — everything flex-shrink: 0 except the internally-scrolling results list — trapped the sheet when the filter panel expanded: the panel (single-column, taller than the whole sheet) could not shrink, had no scroll region, and squeezed the list to zero height inside the overflow:hidden frame, leaving the equipment selector and results unreachable. #678 (user 2026-10-19): the #675 fix first tried making the FORM the sheet's scroll container (list flex: 1 0 auto, overflow visible). It shipped broken: this comment's #675 paragraph was closed with a stray comment-close sequence that orphaned the user 2026-09-17 paragraph above as raw CSS text, which swallowed the #exercisePickerDialog frame rule below into an invalid selector — the sheet lost its fixed height, pins, and clip, and rendered as a lone floating footer. The model now: a dedicated .picker-scroll region between the fixed chrome (head, search, controls, rules block) and the footer is the sheet's one scroller, holding the filter panel + create-custom + results list. Its height comes from flexing inside the fixed frame (flex: 1 1 auto; min-height: 0), never from a percentage-height chain, and the list keeps its natural height inside it — so the expanded panel and the results scroll together and nothing is trapped (#675's outcome) without the form ever becoming a scroll container. */ #exercisePickerDialog { top: 14px; bottom: 14px; height: min(640px, calc(100dvh - 56px)); overflow: hidden; } #exercisePickerDialog .custom-form { display: flex; flex-direction: column; height: 100%; } #exercisePickerDialog .custom-form > :not(.picker-scroll):not(#pickerTemplateOptions) { flex-shrink: 0; } #exercisePickerDialog #pickerTemplateOptions { flex: 0 0 auto; min-height: 0; overflow-y: auto; } #exercisePickerDialog .picker-scroll { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 2px; scroll-padding-bottom: 12px; } #exercisePickerDialog .picker-list { flex: none; max-height: none; overflow: visible; } /* #619: scroll-edge breathing room so the first card's top border and the last card (incl. its Custom chip) sit fully inside the list at both scroll extremes — the bottom pad already cleared the footer; the top pad matches it at the other edge. */ #exercisePickerList { padding-top: 2px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); } .picker-section-label { margin: 8px 2px 2px; color: var(--muted); font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 5px; letter-spacing: .08em; text-transform: uppercase; } /* #167: tappability + selection-count affordance under the picker title. */ .picker-hint { margin: 3px 0 0; font-size: 11px; font-weight: 700; color: var(--muted); } .picker-hint strong { color: var(--accent); font-weight: 800; } /* #197 (user 2026-09-12):