:root { --bg: #0b0d10; --surface: #16191f; --surface-2: #1e222a; --border: #2a2f38; --text: #eef1f5; --text-dim: #9aa3b1; --accent: #ff5a36; --accent-dim: #b3401f; --fresh: #3ddc84; --recovering: #f5b843; --fatigued: #ef4444; --error-text: #ff8a8a; --on-accent: #14100e; --radius: 16px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); color-scheme: dark; } /* * Light theme: same structure, swapped surfaces/text only. Status colors * (--fresh/--recovering/--fatigued) and --accent stay identical in both * themes -- they're already used as small saturated fills/text against a * DIFFERENT background (a colored chip, an accent button), not the page * background itself, so they don't need a light-mode variant to stay * readable. Toggled via a `data-theme` attribute on , set from * js/main.js's setTheme() (see index.html's inline script for why it * also gets set before this stylesheet loads). */ :root[data-theme='light'] { --bg: #f4f5f7; --surface: #ffffff; --surface-2: #edeff2; --border: #dde1e7; --text: #14181f; --text-dim: #667085; --error-text: #c92a2a; color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; height: 100%; overscroll-behavior-y: contain; } /* * This used to target "#app", an id that doesn't exist anywhere in * index.html (the real top-level wrapper is #app-shell) -- so this whole * rule was silently dead: #screen never got bounded to the viewport * height, so it never became its own scrolling container, so the WHOLE * PAGE scrolled instead of just this area. Anything relying on * `position: sticky` inside #screen (the rest-timer banner, the workout * clock) had no real scrolling ancestor to stick relative to, so it just * scrolled away with everything else -- confirmed directly: #screen's * scrollHeight and clientHeight were identical no matter how much * content was in it. #topbar/#bottomnav looked fine only by coincidence, * since they sit outside #screen and were already sticking relative to * the real (accidental) scrolling container, the document itself. */ #app-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; } /* * The safe-area-inset-top strip (the phone's own status bar area) is a * hard-coded dark slice of #topbar's background, NOT var(--bg) -- this is * deliberate, not an oversight. index.html sets * apple-mobile-web-app-status-bar-style="black-translucent", which always * draws WHITE status bar icons/time expecting a dark background under * them; iOS only reads that meta tag once at launch, so it can't be * flipped reactively when the in-app theme toggles (v1.11, device-level, * can change any time after launch). That's fine in dark theme (var(--bg) * IS dark there, so it already matched) but in light theme var(--bg) is * near-white, so the always-white icons/time landed on a near-white strip * and disappeared -- Max caught this directly ("all icons except the * battery indicator are hidden" in light mode; battery stayed faintly * visible because it's drawn with an outline, not a solid glyph, so it * doesn't fully vanish against a matching background the way a filled * icon does). Rather than fight iOS's one-shot meta tag, the safe-top * strip itself just always stays dark regardless of theme, so the * (always-white) icons are legible either way -- the rest of the topbar * still follows var(--bg) normally below that strip. The hard color stop * at var(--safe-top) is what keeps the two zones visually separate; if * that value is ever 0 (desktop browser, no notch), the dark sliver is * simply 0px tall and invisible, so this has no effect there. */ #topbar { padding: calc(14px + var(--safe-top)) 18px 14px; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to bottom, #0b0d10 0, #0b0d10 var(--safe-top), var(--bg) var(--safe-top), var(--bg) 100%); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } #topbar .subtitle { font-size: 13px; color: var(--text-dim); font-weight: 400; } #offline-pill { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); display: none; align-items: center; gap: 6px; } #offline-pill.show { display: inline-flex; } #offline-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--recovering); } #screen { flex: 1; overflow-y: auto; padding: 16px 16px calc(24px + var(--safe-bottom)); -webkit-overflow-scrolling: touch; } /* * `.authed` was already being toggled on #app-shell by main.js's * router() for every navigation (see routes' `auth` flag) -- but until * now nothing actually READ it, so the topbar and bottom nav sat there * fully visible on Login/Register too, including a Settings link and * five nav tabs that just redirect straight back to Login if tapped. * v1.26's login hero is also the fix for that: unauthenticated screens * now get the app's normal chrome hidden entirely in favor of their own * full-bleed content, and #screen.screen-bare (toggled alongside * .authed) drops #screen's own padding so that content can truly reach * every edge instead of sitting inset inside it. */ #app-shell:not(.authed) #topbar, #app-shell:not(.authed) #bottomnav { display: none; } #screen.screen-bare { padding: 0; } /* * Login/Register hero (v1.26). background-position's vertical value is * tuned to img/login-bg.jpg specifically (the weights/kettlebell sit in * the lower-middle third of that photo) -- if the photo is ever swapped, * re-check this against the new image rather than assuming it still * frames the interesting part. The gradient is closer to opaque black at * the BOTTOM (behind the tagline and card, where legibility matters * most) and lightest around the upper-middle, so the photo still reads * as a photo rather than disappearing under the overlay. */ .login-hero { min-height: 100%; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; background-image: linear-gradient(180deg, rgba(11, 13, 16, 0.55) 0%, rgba(11, 13, 16, 0.25) 26%, rgba(11, 13, 16, 0.72) 62%, rgba(11, 13, 16, 0.97) 90%), url('../img/login-bg.jpg'); background-size: cover; background-position: center 32%; padding: calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom)); } .login-hero-top { flex: 0 0 auto; } .login-hero-brand { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; } .login-hero-message { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 26px; } .login-hero-tagline { font-size: 28px; font-weight: 800; line-height: 1.2; color: #fff; margin: 0; max-width: 300px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); } .login-hero-sub { font-size: 14px; color: rgba(255, 255, 255, 0.8); margin: 10px 0 0; max-width: 300px; } /* * ".card.login-card", not just ".login-card": the element carries BOTH * classes (see auth.js), and plain .card's own `background: var(--surface)` * a hundred-odd lines below is equal specificity to a single-class * .login-card selector -- source order (later wins ties) would let .card * quietly win instead, which is exactly what happened here (this rule * originally lost that tie; caught by screenshotting a light-theme * device, where .card's white background showed through unmistakably -- * in dark mode it had accidentally looked right, since --surface's dark * value happens to be close to the color this was actually meant to be). * The doubled selector's higher specificity wins regardless of order. */ .card.login-card { flex: 0 0 auto; margin-bottom: 0; background: rgba(18, 20, 25, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* * Force a dark-card palette here regardless of the device's * light/dark theme setting. Theme is a per-device localStorage value * that survives logout (see v1.11), so a device last set to Light * would otherwise render this card with light-theme (dark-on-light) * text colors while its background stays forced dark for the photo * to show through -- unreadable. Redefining these variables locally * lets every existing var(--text)/var(--text-dim)/etc. rule below * (inputs, labels, .muted, links) resolve correctly here without * touching each one individually. */ --text: #f2f4f7; --text-dim: #b7bfc9; --surface-2: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.18); --error-text: #ff8a8a; color: var(--text); } .login-hero-version { flex: 0 0 auto; text-align: center; opacity: 0.6; color: #fff; margin: 10px 0 0; } #bottomnav { display: flex; border-top: 1px solid var(--border); background: var(--bg); padding-bottom: var(--safe-bottom); position: sticky; bottom: 0; z-index: 10; } #bottomnav a { flex: 1; text-align: center; padding: 10px 0 8px; color: var(--text-dim); text-decoration: none; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 3px; } #bottomnav a .icon { display: flex; } /* Inline SVG icons (see js/icons.js) default to baseline alignment, which sits a little low next to ordinary text -- this nudges them up so an icon+label button/link looks properly centered. Buttons that are ONLY an icon (e.g. delete/close) are unaffected either way. */ .icon-svg { vertical-align: -0.2em; flex-shrink: 0; } .empty-state .icon-svg { vertical-align: 0; } #bottomnav a.active { color: var(--accent); } /* * Floating glass dock (mobile only, <=640px): Max's ask, referencing a * site he uses, was a rounded, blurred "island" nav detached from the * screen edges -- like an iOS dock -- rather than the flush edge-to-edge * bar above. Same 5 links/icons/labels, restyled only. Deliberately * gated behind a max-width query ("obviously only on mobile devices," * Max's own words) -- this app has no desktop layout to design a * floating pill against, and a detached dock reads as a phone-native * pattern, not a desktop one, so anything wider keeps the plain sticky * bar defined above untouched. * * Uses color-mix() against --surface/--border (not a literal rgba()) * for the translucency, same reasoning as the v1.28 set-row fix: it * resolves theme-aware, and here the transparency is deliberate (it's * blending with the page content scrolling underneath, which is the * whole point of a glass dock) rather than an accidental blend with an * unwanted sibling layer. */ @media (max-width: 640px) { #bottomnav { position: fixed; left: 12px; right: 12px; bottom: calc(14px + var(--safe-bottom)); border-top: none; background: color-mix(in srgb, var(--surface) 40%, transparent); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius: 22px; padding: 6px 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); } #bottomnav a { position: relative; padding: 8px 0 6px; border-radius: 16px; transition: background-color 0.15s ease, color 0.15s ease; } /* v1.33: dropped the tinted highlight background behind the active tab (Max's direct feedback -- it read as a distracting block, especially now that the raised Train button is already the loudest thing in the dock). The active tab's accent-colored text/icon (from the shared, non-mobile `#bottomnav a.active { color: var(--accent); }` rule) plus the small dot below still say "you're here" without the background. */ /* Small active-state dot under the label, echoing the reference dock. */ #bottomnav a.active::after { content: ''; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } /* * Train (Workout) as a raised center FAB, matching the reference dock's * middle "+" button (Max's ask) but in our own accent color, not a copy * of that site's pink. `order` visually reorders the flex items -- the * DOM/HTML stays Home/Train/History/Progress/Library so the desktop bar * and the router (which matches on data-nav, not position) are both * unaffected -- so only the mobile dock's *visual* sequence becomes * Home, History, Train, Progress, Library, with Train dead center of 5. */ #bottomnav a[data-nav="home"] { order: 1; } #bottomnav a[data-nav="history"] { order: 2; } #bottomnav a[data-nav="workout"] { order: 3; } #bottomnav a[data-nav="progress"] { order: 4; } #bottomnav a[data-nav="library"] { order: 5; } #bottomnav a[data-nav="workout"] { flex: 0 0 auto; width: 56px; height: 56px; position: relative; top: -22px; justify-content: center; padding: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 55%, transparent); animation: train-pulse 2.4s ease-in-out infinite; } /* Icon-only -- a label under a raised circular button reads as a FAB, not a fifth tab, so the text is dropped here specifically (the other four keep theirs) rather than site-wide. */ #bottomnav a[data-nav="workout"] .nav-label { display: none; } #bottomnav a[data-nav="workout"] .icon-svg { width: 24px; height: 24px; color: var(--on-accent); } /* The shared active treatment (tinted pill background + dot) doesn't read on a solid circle that's already the loudest thing in the dock -- a small scale bump is enough to show "you're here" without fighting the pulse animation. */ #bottomnav a[data-nav="workout"].active { transform: scale(1.08); } #bottomnav a[data-nav="workout"].active::after { content: none; } @keyframes train-pulse { 0%, 100% { box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); } } /* Respect reduced-motion: the pulse is decorative, the button is fully usable (and still visually distinct via color/size/position) without it, so this is a straightforward opt-out rather than a tradeoff. */ @media (prefers-reduced-motion: reduce) { #bottomnav a[data-nav="workout"] { animation: none; } } /* #bottomnav left the normal flex flow (position:fixed), so #screen no longer automatically stops above it -- give it enough bottom padding to clear the dock's own height plus its margin off the screen edge, or the last card on any scrollable screen sits partly behind it. */ #screen { padding-bottom: calc(100px + var(--safe-bottom)); } /* .toast/.fab already anchored to the viewport bottom (not #screen's padding) to clear the old flush bar -- bumped by the same amount the dock now floats above the edge, keeping their original ~6px stagger from each other. */ .toast { bottom: calc(116px + var(--safe-bottom)); } .fab { bottom: calc(110px + var(--safe-bottom)); } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; } .card h2, .card h3 { margin-top: 0; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } button, .btn { font: inherit; border: none; border-radius: 12px; padding: 13px 18px; background: var(--surface-2); color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; } button:active, .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 700; } .btn-block { width: 100%; } .btn-ghost { background: transparent; border: 1px solid var(--border); } .btn-danger { background: transparent; color: var(--fatigued); border: 1px solid var(--fatigued); } .btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; } input, select, textarea { font: inherit; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); margin-bottom: 10px; } input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); } label { font-size: 12px; color: var(--text-dim); display: block; margin-bottom: 4px; } .field { margin-bottom: 14px; } .row { display: flex; gap: 10px; align-items: center; } .row.between { justify-content: space-between; } .muted { color: var(--text-dim); } .small { font-size: 12px; } a.link { color: var(--accent); text-decoration: none; } .error-banner { background: rgba(239,68,68,0.12); color: var(--error-text); border: 1px solid rgba(239,68,68,0.4); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; } .toast { position: fixed; left: 50%; bottom: calc(90px + var(--safe-bottom)); transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--border); padding: 10px 18px; border-radius: 999px; font-size: 13px; z-index: 50; animation: fadeUp 0.2s ease-out; } @keyframes fadeUp { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } .toast-undo { display: flex; align-items: center; gap: 14px; } .toast-undo .undo-btn { background: none; border: none; color: var(--accent); font-weight: 700; font-size: 13px; padding: 0; } /* ---- Body map ---- */ .bodymap-wrap { display: flex; justify-content: center; gap: 18px; margin-top: 10px; } /* 105px = 150px * 0.7 -- scaling the column's max-width down (rather than just its height) is what keeps the silhouette's own proportions intact; the SVG has no height attribute, so it follows its viewBox's aspect ratio automatically from whatever width it's given. Front/Back captions were dropped too -- which view is which is obvious at a glance. */ .bodymap-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; max-width: 105px; } .bodymap-svg { width: 100%; } .mm-region { cursor: pointer; transition: opacity 0.15s; } .mm-region:active { opacity: 0.7; } .section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .fatigue-summary { margin: 14px 0 10px; font-size: 15px; font-weight: 700; } .fatigue-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--surface-2); } .fatigue-bar .seg:first-child { border-radius: 999px 0 0 999px; } .fatigue-bar .seg:last-child { border-radius: 0 999px 999px 0; } .fatigue-legend-row { display: flex; gap: 16px; justify-content: center; margin-top: 12px; flex-wrap: wrap; } .fatigue-legend-row span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); } .fatigue-legend-row strong { color: var(--text); font-size: 13px; } .fatigue-legend-row .swatch { width: 9px; height: 9px; border-radius: 50%; } .readiness-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; } .readiness-tile { background: var(--surface-2); border-radius: 12px; padding: 10px 8px 8px; cursor: pointer; min-width: 0; /* let name/sub text actually truncate/wrap inside a narrower grid track instead of forcing it wide */ } .readiness-tile .name { font-size: 12px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .readiness-tile .pct { font-size: 19px; font-weight: 800; line-height: 1.1; } .readiness-tile.muted-tile .pct { color: var(--text-dim); } .readiness-tile .sub { font-size: 10px; color: var(--text-dim); margin: 2px 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .readiness-tile .bar { height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; } .readiness-tile .bar-fill { height: 100%; border-radius: 999px; } /* ---- Muscle detail screen (js/screens/muscle-detail.js) -- reached by tapping a Readiness tile or a body-map region. Replaces the old inline "Why?" breakdown that used to live on the tile itself. ---- */ .md-summary-card { text-align: center; } .md-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; } .md-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .md-pct { font-size: 46px; font-weight: 800; line-height: 1.1; margin-top: 14px; } .md-pct-sign { font-size: 22px; font-weight: 700; } .md-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 14px 0; } .md-bar-fill { height: 100%; border-radius: 999px; } .md-ready-row { display: flex; justify-content: space-between; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: 13px; margin-top: 4px; } .md-ready-row span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); } .md-ready-row strong { font-size: 14px; } .contrib-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .contrib-item:last-child { border-bottom: none; padding-bottom: 0; } .contrib-item:first-child { padding-top: 0; } .contrib-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contrib-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Exercise library / picker ---- */ .exercise-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border); } .exercise-item:last-child { border-bottom: none; } /* Library screen (v1.36): each muscle's block of exercises sits right under a .section-label heading in the same card -- a little breathing room so the heading doesn't crowd the first row. */ .section-label + .exercise-item { margin-top: 10px; } .exercise-item .meta { font-size: 12px; color: var(--text-dim); } .exercise-item .meta.secondary-meta { margin-top: 2px; } .search-box { position: sticky; top: 0; background: var(--bg); padding-bottom: 8px; z-index: 2; } .muscle-edit-row { padding: 8px 0; border-bottom: 1px solid var(--border); } .muscle-edit-row:last-child { border-bottom: none; } .muscle-edit-row[hidden] { display: none; } .level-btn.active { background: var(--accent); color: var(--on-accent); } .theme-toggle { display: flex; gap: 8px; margin-top: 10px; } .theme-btn { flex: 1; } .theme-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 700; } /* Initials avatar (js/personalize.js) -- background/width/height/font-size set inline per-account, this just handles the shape. */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; color: var(--on-accent); flex-shrink: 0; user-select: none; } .personalize-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .swatch-row { display: flex; gap: 10px; flex-wrap: wrap; } .swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; } .swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); } .session-fatigue-card { padding: 14px 16px; } .session-fatigue-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .fatigue-chip { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; min-width: 84px; flex: 1 1 84px; } .fatigue-chip-name { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fatigue-chip-bar { height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: 4px; } .fatigue-chip-fill { height: 100%; border-radius: 999px; transition: width 0.2s ease-out; } .fatigue-chip-pct { font-size: 13px; font-weight: 700; } /* ---- Post-workout summary (v1.27) ---- */ .summary-hero { text-align: center; } .summary-hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--fresh); color: #062; margin-bottom: 8px; } .summary-hero-total { font-size: 26px; font-weight: 800; margin: 14px 0 0; } .summary-pr-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; } .summary-pr-row:not(:last-child) { border-bottom: 1px solid var(--border); } .summary-pr-icon { color: var(--accent); flex-shrink: 0; margin-top: 2px; } .summary-muscle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; } .summary-muscle-row:not(:last-child) { border-bottom: 1px solid var(--border); } .summary-muscle-name { font-weight: 600; flex: 1 1 auto; } .summary-delta-up { color: var(--fresh); font-weight: 700; } .summary-delta-down { color: var(--fatigued); font-weight: 700; } /* ---- Live workout ---- */ .workout-exercise { margin-bottom: 18px; padding: 18px 16px; } /* Exercise name defaulted to a bare

's browser font-size, which -- combined with two pill buttons competing for the same row -- made longer names (e.g. "Decline Barbell Bench Press") wrap to 2 lines and crowd the header. Smaller, tighter line-height reads calmer and wraps less often; the header row also gets real breathing room below it before the first set row, instead of butting right up against it. / .exercise-name { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0; } .exercise-header { margin-bottom: 14px; align-items: flex-start; } / Drag-to-reorder (see workout.js's startDrag()). A dedicated handle rather than the whole card being draggable, so tapping the exercise name or the rest/suggest buttons next to it never gets mistaken for a drag. touch-action:none stops the browser's own scroll gesture from competing with pointermove once a drag starts on this element. / .drag-handle { background: transparent; padding: 4px 6px; margin: -4px 0 -4px -6px; cursor: grab; touch-action: none; color: var(--text-dim); flex-shrink: 0; } .drag-handle:active { cursor: grabbing; } .exercise-header .row.exercise-header-start { flex-shrink: 1; min-width: 0; } / The card being actively dragged: pulled out of #exercises and repositioned with position:fixed by JS (left/top/width set inline), so this only needs to look the part -- pointer-events:none so it can never itself become the drop target under the finger/cursor. / .workout-exercise.dragging-card { pointer-events: none; box-shadow: 0 12px 28px rgba(0,0,0,0.35); opacity: 0.97; } / Same footprint as the dragged card, standing in for it in the document flow so the other cards reflow smoothly around wherever it's about to drop. / .workout-exercise-placeholder { border: 2px dashed var(--border); border-radius: var(--radius); margin-bottom: 18px; box-sizing: border-box; } .rest-editor { background: var(--surface-2); border-radius: 10px; padding: 10px; } .rest-editor button.active { background: var(--accent); color: var(--on-accent); } / v1.27: a set row's delete action moved from an inline trash-can button (which ate one of six grid columns on an already-cramped row) to a left-swipe reveal, freeing that column back up. See wireSwipeRow() in workout.js -- .set-row-delete sits absolutely positioned underneath .set-row (which is the part that actually slides via transform: translateX()); overflow:hidden on the wrap keeps it clipped out of view until the content slides away from it. / .set-row-wrap { position: relative; overflow: hidden; border-radius: 10px; margin-bottom: 10px; } .set-row-delete { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; background: var(--fatigued); border-radius: 10px; } .set-row-delete button { background: none; border: none; color: #fff; display: flex; align-items: center; justify-content: center; width: 76px; height: 100%; cursor: pointer; } .set-row { position: relative; display: grid; grid-template-columns: 28px 1fr 1fr 70px 32px; gap: 6px; align-items: center; margin-bottom: 0; background: var(--bg); touch-action: pan-y; / keep normal vertical page scroll working; we handle horizontal drag ourselves / } .set-row:not(.dragging) { transition: transform 0.18s ease; } .set-row.dragging { transition: none; } .set-row input { margin-bottom: 0; text-align: center; padding: 10px 4px; } .set-row .set-num { text-align: center; color: var(--text-dim); font-size: 13px; } / Plain text stand-in for a done row's weight/reps/RIR when NOT being edited -- deliberately a , not a disabled : a disabled form control doesn't dispatch (or bubble) pointer events in Chromium, which would have made most of a done row a dead zone for the tap-to-edit gesture (see wireSwipeRow() in workout.js). / .set-row .set-val { display: flex; align-items: center; justify-content: center; padding: 10px 4px; font-size: 14px; } .set-row.done { / Opaque, not a translucent rgba() -- .set-row now paints directly over .set-row-delete's solid red background (same sibling stacking, see the v1.27 comment above .set-row-wrap), so a semi-transparent green here blended with the red underneath it and read as orange, with the delete button's trash icon visibly bleeding through. color-mix() against --bg produces the same muted-pastel look as a real solid color (and still respects the light/dark theme via the variable) instead of a true alpha blend with whatever's behind it. / background: color-mix(in srgb, var(--fresh) 18%, var(--bg)); border-radius: 10px; padding: 4px 6px; } .set-row.done input { background: transparent; } / v1.27: tapping a done (ticked) row now re-opens it for editing -- previously the only way to fix a mistyped weight/reps/RIR was to delete the set and re-log it, losing its place in the set order. / .set-row.done.editing { background: var(--surface-2); outline: 2px solid var(--accent); } .set-row.done.editing input { background: var(--bg); } / .check is used on both