/* =================================================================== Blunt - "studio" theme. Soft-gray canvas, floating white cards, pastel color-pop surfaces, ink pill buttons, neon lime brand accent. Light & dark; mobile-first with a desktop sidebar. The attribute is set by a boot script before paint. =================================================================== */ :root { --bg: #f1f1f4; /* soft warm-gray canvas */ --surface: #ffffff; /* cards, sidebar */ --surface-2: #f4f4f7; /* insets, hover fills */ --border: #e9e9ee; --text: #101014; --muted: #75757f; /* neon lime is the brand, but it can't carry text on white (1.3:1), so the token used for text/icons is a deep lime and --lime is fill-only. */ --primary: #4d7c0f; /* deep lime - readable on white */ --primary-d: #3f6212; --primary-soft:#eef8db; --lime: #c6f03c; /* neon lime - fills only, always with dark text */ --on-lime: #14130f; --accent: #4e7cf6; /* pop blue */ --accent-soft: #e6edfd; --ink: #131316; /* solid buttons (inverts in dark) */ --on-ink: #ffffff; --tile: #131316; /* high-contrast stat tile (stays dark in both themes) */ --on-tile: #ffffff; --good: #2e9e5b; /* positive result (beat your last session) */ --danger: #e5484d; /* destructive actions + regression, semantic only */ --danger-soft: #fdebec; --warn: #d97706; --placeholder: #a3a3ad; --toast-bg: #131316; --toast-border:#2a2a32; /* pastel pop surfaces (cards that carry color) */ --pop-pink: #f3cdec; --pop-blue: #cddcf8; --pop-mint: #cfeeda; --pop-lime: #e2f7b0; --on-pop: #17111c; --on-pop-mut: rgba(23,17,28,.62); /* charts (validated categorical palette: lime, blue, amber, teal) */ --chart-1: #5e8c00; --chart-2: #4e7cf6; --chart-3: #d97706; --chart-4: #0e9aa7; --chart-1-soft:rgba(94,140,0,.16); --chart-2-soft:rgba(78,124,246,.16); --chart-grid: rgba(16,16,20,.055); --chart-tick: #8c8c96; --radius: 22px; --radius-sm: 14px; --shadow-sm: 0 1px 2px rgba(16,16,20,.04); --shadow: 0 1px 2px rgba(16,16,20,.03), 0 8px 24px rgba(16,16,20,.06); --shadow-lg: 0 4px 12px rgba(16,16,20,.08), 0 20px 48px rgba(16,16,20,.14); /* Safe-area docking. iOS only reports a non-zero inset when the page opts in with viewport-fit=cover (see the viewport meta) - without it these are 0px and anything docked to the bottom sits under the home indicator. --nav-h is the floating bottom nav's footprint: 0 on desktop where the sidebar is used instead. Everything bottom-docked stacks off --dock-b so the nav, the toast and the rest timer can never land on top of each other. */ --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --nav-h: 0px; --dock-b: calc(16px + var(--nav-h) + var(--safe-b)); color-scheme: light; } :root[data-theme="dark"] { --bg: #0b0b0e; --surface: #17171c; --surface-2: #212128; --border: #2a2a32; --text: #f2f2f5; --muted: #9c9ca6; --primary: #b8e62e; /* lime reads bright and safe on dark surfaces */ --primary-d: #cdf558; --primary-soft:rgba(184,230,46,.16); --lime: #c6f03c; --on-lime: #14130f; --accent: #7297f2; --accent-soft: rgba(114,151,242,.16); --ink: #f5f5f7; /* solid buttons invert in dark, Apple-style */ --on-ink: #0b0b0e; --tile: #2c2c35; /* elevated graphite, not inverted - a white card would glare */ --on-tile: #f4f4f7; --good: #35ae68; --danger: #f2555a; --danger-soft: rgba(242,85,90,.14); --warn: #e8a33d; --placeholder: #63636d; --toast-bg: #26262d; --toast-border:#3a3a44; --pop-pink: #3d2039; --pop-blue: #1d2a47; --pop-mint: #17301f; --pop-lime: #2a3a10; --on-pop: #f4eef6; --on-pop-mut: rgba(244,238,246,.62); --chart-1: #7a9f0b; --chart-2: #5a80ec; --chart-3: #c97f24; --chart-4: #189faf; --chart-1-soft:rgba(122,159,11,.2); --chart-2-soft:rgba(90,128,236,.2); --chart-grid: rgba(242,242,245,.07); --chart-tick: #85858f; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45); --shadow-lg: 0 6px 16px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.6); color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'Inter', -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-size: 15px; letter-spacing: -0.011em; } h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.03em; } h2 { font-size: 1rem; font-weight: 650; margin-bottom: .8rem; letter-spacing: -0.015em; } h3 { font-size: .92rem; font-weight: 600; } .muted { color: var(--muted); font-size: .85rem; } a { color: var(--accent); } /* ---- Icons ---- */ .icon { display: inline-flex; align-items: center; justify-content: center; flex: none; } .icon svg { width: 20px; height: 20px; } /* ---- Layout ---- */ /* 100dvh, not 100vh: on iOS Safari 100vh counts the area behind the collapsing URL bar, so the last card sits permanently under browser chrome. */ .app { display: flex; min-height: 100vh; min-height: 100dvh; } .sidebar { width: 244px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 24px 16px; position: sticky; top: 0; height: 100vh; height: 100dvh; } .brand { display: flex; align-items: center; gap: 11px; font-size: 1.22rem; font-weight: 700; letter-spacing: -0.03em; padding: 4px 10px 26px; } /* Neon lime tile with a dark glyph, matching the installed app icon. */ .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: var(--lime); color: var(--on-lime); box-shadow: 0 4px 14px rgba(198,240,60,.28); } :root[data-theme="dark"] .brand-mark { color: var(--on-lime); } .brand-mark svg { width: 24px; height: auto; } /* 0.659 of the tile, matching the artwork */ .nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 550; font-size: .94rem; transition: background .18s, color .18s; } .nav a .icon { color: var(--muted); transition: color .18s; } .nav a:hover { background: var(--surface-2); color: var(--text); } .nav a:hover .icon { color: var(--text); } .nav a.active { background: var(--primary-soft); color: var(--primary-d); font-weight: 650; } .nav a.active .icon { color: var(--primary); } .logout { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); } .logout .icon svg { width: 18px; height: 18px; } .main { flex: 1; min-width: 0; padding: 26px 30px calc(40px + var(--dock-b)); overflow-x: hidden; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .date-picker { display: flex; align-items: center; gap: 6px; } .date-picker input[type=date] { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px; max-width: 158px; box-shadow: var(--shadow-sm); font-weight: 550; } .view { display: flex; flex-direction: column; gap: 18px; } @media (prefers-reduced-motion: no-preference) { .view { animation: view-in .32s cubic-bezier(.22,1,.36,1); } @keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } } /* ---- Cards ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 720px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Color-pop cards: pastel surfaces that carry the accent color */ .card-pop { border: 0; } .card-pop, .card-pop h2 { color: var(--on-pop); } .card-pop .muted, .card-pop .label, .card-pop .sub { color: var(--on-pop-mut); } .card-pink { background: var(--pop-pink); } .card-blue { background: var(--pop-blue); } .card-mint { background: var(--pop-mint); } .card-lime { background: var(--pop-lime); } .card-ink { background: var(--tile); color: var(--on-tile); border: 0; } .card-ink h2 { color: var(--on-tile); } /* Chart container: fixed height so Chart.js (maintainAspectRatio:false) can't grow unbounded */ .chart-box { position: relative; height: 280px; width: 100%; } .chart-box canvas { position: absolute; inset: 0; } @media (max-width: 720px) { .chart-box { height: 240px; } } /* ---- Stat tiles ---- */ .stat { text-align: left; } .stat .label { color: var(--muted); font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; } .stat .value { font-size: 1.9rem; font-weight: 700; margin-top: 6px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .stat .sub { color: var(--muted); font-size: .8rem; margin-top: 3px; } .stat .value small { font-size: .88rem; color: var(--muted); font-weight: 500; letter-spacing: -0.01em; } /* progress bar */ .progress { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 14px; } .progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary) 0%, var(--lime) 100%); transition: width .45s cubic-bezier(.22,1,.36,1); } .progress.over > span { background: var(--warn); } .card-pop .progress { background: rgba(255,255,255,.45); } :root[data-theme="dark"] .card-pop .progress { background: rgba(0,0,0,.3); } /* ---- Ring gauge (calories hero) ---- */ .ring-wrap { display: flex; align-items: center; gap: 18px; } .ring { --pct: 0; --ring-color: var(--primary); --ring-track: var(--surface-2); width: 130px; height: 130px; border-radius: 50%; flex: none; background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--ring-track) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12.5px)); } .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; } .ring-center .big { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .ring-center .cap { font-size: .68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .ring-holder { position: relative; width: 130px; height: 130px; flex: none; } /* ---- Water gauge (segmented capsule) ---- */ .water-gauge { display: flex; gap: 5px; margin-top: 12px; } .water-seg { flex: 1; height: 34px; border-radius: 8px; background: var(--surface-2); transition: background .25s; } .card-pop .water-seg { background: rgba(255,255,255,.55); } :root[data-theme="dark"] .card-pop .water-seg { background: rgba(0,0,0,.3); } .water-seg.on, .card-pop .water-seg.on { background: var(--accent); } .water-seg:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; } .water-seg:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; } /* ---- Buttons ---- */ .btn { font: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .9rem; box-shadow: var(--shadow-sm); transition: filter .15s, background .15s, border-color .15s, transform .12s; } .btn:hover { background: var(--surface-2); } .btn:active { transform: scale(.97); } .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); } .btn-primary:hover { background: var(--ink); filter: brightness(1.18); } :root[data-theme="dark"] .btn-primary:hover { filter: brightness(.92); } .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-accent:hover { filter: brightness(1.08); } .btn-ghost { background: transparent; box-shadow: none; border-color: transparent; } .btn-ghost:hover { background: var(--surface-2); } .btn-sm { padding: 6px 13px; font-size: .82rem; } .btn-icon { padding: 8px; display: inline-flex; } .btn-icon svg { width: 18px; height: 18px; } .btn-block { width: 100%; } .btn-danger { color: var(--danger); border-color: transparent; background: transparent; box-shadow: none; } .btn-danger:hover { background: var(--danger-soft); } /* ---- Forms ---- */ label.field { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; font-weight: 550; color: var(--muted); } input, select, textarea { font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; width: 100%; transition: border-color .15s, box-shadow .15s; } input::placeholder, textarea::placeholder { color: var(--placeholder); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-soft); } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .row > * { flex: 1; min-width: 90px; } .row > .grow2 { flex: 2; } .inline-form { display: grid; gap: 10px; } /* Add-set / picker form - mobile-first responsive grid */ .set-form { display: grid; gap: 10px; align-items: end; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .set-form .btn { width: 100%; } @media (max-width: 560px) { .set-form { grid-template-columns: 1fr 1fr; } .set-form > .span-all { grid-column: 1 / -1; } } /* Number stepper - adjusting reps/weight should be a tap, not a keyboard */ .stepper { display: flex; align-items: center; gap: 6px; width: 100%; } .stepper input { flex: 1; min-width: 0; text-align: center; } .stepper .step { flex: none; width: 38px; height: 38px; border-radius: 999px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 1.15rem; font-weight: 700; line-height: 1; } .stepper .step:active { transform: scale(.94); } /* ---- Your split (weekday -> template) ---- */ .split-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; } .split-day { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 7px 5px; text-align: center; } .split-day.is-today { border-color: var(--primary); background: var(--primary-soft); } .split-dow { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; } .split-day.is-today .split-dow { color: var(--primary); } .split-day select { width: 100%; padding: 5px 4px; font-size: .74rem; border-radius: 9px; text-align: center; } @media (max-width: 560px) { .split-week { grid-template-columns: repeat(4, 1fr); } } /* ---- Body map ---- */ /* --bm-ink has to read against a card in both themes, so it is mixed from --muted rather than borrowing --border (which is nearly invisible on a card). */ .body-map { width: 190px; max-width: 100%; --bm-ink: var(--surface-2); } @supports (color: color-mix(in srgb, red 50%, blue)) { .body-map { --bm-ink: color-mix(in srgb, var(--muted) 38%, transparent); } } .body-map .bm-svg { width: 100%; height: auto; display: block; overflow: visible; } .body-map .bm-base > * { fill: var(--bm-ink); stroke: none; } .body-map .bm-limb { fill: none; stroke: var(--bm-ink); stroke-width: 17; stroke-linecap: round; } .body-map .bm-limb-thin { stroke-width: 14; } .body-map .bm-limb-thick { stroke-width: 26; } /* limbs are stroked and everything else is filled, so "hot" paints whichever property that shape actually uses */ .body-map .bm-base > .bm-hot { fill: var(--primary); opacity: calc(.35 + var(--heat, 0) * .65); } .body-map .bm-base > .bm-limb.bm-hot { fill: none; stroke: var(--primary); } .body-map .bm-hit > * { fill: transparent; stroke: none; transition: fill .15s ease; } .body-map .bm-hit > .bm-hot { fill: var(--danger); fill-opacity: var(--heat, .5); } .body-map .bm-hit > .bm-selected { stroke: var(--text); stroke-width: 2.5; fill: var(--danger); fill-opacity: .35; } .body-map .bm-side text { fill: var(--muted); font-size: 14px; font-weight: 700; } .body-map.bm-interactive .bm-hit > * { cursor: pointer; } .body-map.bm-interactive .bm-hit > *:hover { fill: var(--accent); fill-opacity: .3; } .body-map.bm-interactive .bm-hit > *:focus-visible { outline: none; stroke: var(--primary); stroke-width: 3; } .bm-back-chips { margin-top: 10px; justify-content: center; } .bm-back-chips .chip-hot { border-color: var(--danger); color: var(--danger); } /* ---- Tables ---- */ table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 650; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-size: .72rem; font-weight: 550; color: var(--muted); } /* ---- Tabs / pills ---- */ .tabs { display: flex; gap: 8px; flex-wrap: wrap; } .tabs button { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 8px 17px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .86rem; box-shadow: var(--shadow-sm); transition: background .15s, color .15s, border-color .15s, transform .12s; } .tabs button:hover { background: var(--surface-2); color: var(--text); } .tabs button:active { transform: scale(.97); } .tabs button.active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } /* ---- Login auth tabs ---- */ .auth-tabs { display: flex; gap: 8px; } .auth-tabs button { flex: 1; } /* ---- Lists ---- */ .list-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); } .list-item:last-child { border-bottom: 0; } .list-item .li-main { font-weight: 600; } .list-item .li-sub { color: var(--muted); font-size: .8rem; margin-top: 2px; } .empty { color: var(--muted); text-align: center; padding: 22px; font-size: .9rem; } /* ---- Login ---- */ .login-body { display: grid; place-items: center; min-height: 100dvh; background: var(--bg); } .login-card { width: min(380px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 34px 28px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px; } .login-logo { display: flex; align-items: center; gap: 12px; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.03em; } .login-logo .brand-mark { width: 42px; height: 42px; border-radius: 14px; } .login-logo .brand-mark svg { width: 28px; height: auto; } .login-err { color: var(--danger); font-size: .85rem; min-height: 1em; } /* ---- Toast ---- */ .toast { position: fixed; bottom: var(--dock-b); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--toast-bg); border: 1px solid var(--toast-border); color: #fff; padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: all .25s cubic-bezier(.22,1,.36,1); z-index: 50; font-weight: 600; font-size: .9rem; max-width: calc(100vw - 32px); text-align: center; } :root[data-theme="dark"] .toast { color: var(--text); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.err { background: var(--danger); border-color: var(--danger); color: #fff; } /* ---- Search picker (type-ahead food/exercise selector) ---- */ .picker { position: relative; } .picker .picker-search { padding-left: 38px; border-radius: 999px; } .picker .picker-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .picker .picker-icon svg { width: 17px; height: 17px; } .picker-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); max-height: 290px; overflow-y: auto; padding: 6px; } .picker-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: .9rem; } .picker-item .pi-sub { color: var(--muted); font-size: .76rem; white-space: nowrap; } .picker-item:hover, .picker-item.sel { background: var(--surface-2); } .picker-item.pi-action { color: var(--accent); font-weight: 600; } .picker-empty { padding: 12px; color: var(--muted); font-size: .85rem; text-align: center; } /* ---- Chips (one-tap recents, quantity presets) ---- */ .chips { display: flex; gap: 7px; flex-wrap: wrap; } .chip { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid transparent; color: var(--text); padding: 7px 13px; border-radius: 999px; font-size: .82rem; font-weight: 600; transition: background .15s, border-color .15s, transform .12s; } .chip:hover { border-color: var(--primary); background: var(--primary-soft); } .chip:active { transform: scale(.96); } .chip small { color: var(--muted); font-weight: 500; } .chip.chip-on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); } .chip.chip-on small { color: var(--on-ink); opacity: .7; } /* ---- Dashboard quick actions ---- */ .quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 720px) { .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .qa { font: inherit; cursor: pointer; text-decoration: none; display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 13px 15px; border-radius: 18px; font-weight: 600; font-size: .9rem; box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s, border-color .18s; } .qa:hover { box-shadow: var(--shadow); transform: translateY(-1px); } .qa:active { transform: scale(.97); } .qa .icon { width: 38px; height: 38px; border-radius: 12px; flex: none; background: var(--surface-2); color: var(--text); } .qa .icon svg { width: 19px; height: 19px; } .qa-pink .icon { background: var(--pop-pink); color: var(--on-pop); } .qa-blue .icon { background: var(--pop-blue); color: var(--on-pop); } .qa-mint .icon { background: var(--pop-mint); color: var(--on-pop); } .qa-lime .icon { background: var(--pop-lime); color: var(--on-pop); } /* ---- Rest timer (fixed pill, shown after logging a set) ---- */ .rest-timer { /* stacked one row above the toast so the two can never overlap on a phone */ position: fixed; right: 16px; bottom: calc(var(--dock-b) + 54px); z-index: 45; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); background: var(--toast-bg); color: #fff; border: 1px solid var(--toast-border); padding: 11px 16px; border-radius: 999px; box-shadow: var(--shadow-lg); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1rem; } :root[data-theme="dark"] .rest-timer { color: var(--text); } .rest-timer .icon { color: var(--good); } .rest-timer button { font: inherit; cursor: pointer; background: rgba(255,255,255,.14); color: inherit; border: 0; border-radius: 999px; padding: 5px 11px; font-size: .78rem; font-weight: 600; } .rest-timer button:hover { background: rgba(255,255,255,.24); } .rest-timer.done { background: var(--good); border-color: var(--good); color: #fff; } /* ---- Meal group header with subtotal ---- */ .meal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 16px; padding-bottom: 4px; } .meal-head h3 { color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .07em; } .meal-head .meal-kcal { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; } /* ---- Topbar extras (Today button + theme toggle) ---- */ .topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .today-btn { color: var(--primary-d); border-color: var(--primary); } /* ---- Focus-visible (keyboard) ---- */ :focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; } /* ---- Modal (profile onboarding etc.) ---- */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(8, 8, 12, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b)); overscroll-behavior: contain; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 24px; width: 100%; max-width: 540px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal h2 { font-size: 1.1rem; } @media (prefers-reduced-motion: no-preference) { .modal { animation: modal-in .28s cubic-bezier(.22,1,.36,1); } @keyframes modal-in { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } } } /* ---- Wide data tables (Insights) ---- */ .table-wrap { overflow-x: auto; } .data-table { font-size: .82rem; white-space: nowrap; } .data-table th, .data-table td { padding: 7px 10px; } /* ---- Bottom nav (mobile): floating glass pill ---- */ .bottom-nav { display: none; } @media (max-width: 860px) { :root { --nav-h: 68px; } .sidebar { display: none; } .main { padding: calc(18px + var(--safe-t)) 14px calc(24px + var(--dock-b)); } /* iOS zooms the whole page when a focused control is under 16px and never zooms back out - which is what makes everything look overlapped after the first tap on a reps field. 16px on every control is the only fix. */ input, select, textarea { font-size: 16px; } .bottom-nav { display: flex; position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid var(--border); border-radius: 999px; justify-content: space-around; padding: 8px 6px; box-shadow: var(--shadow-lg); } @supports not (background: color-mix(in srgb, red 50%, blue)) { .bottom-nav { background: var(--surface); } } .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: .64rem; font-weight: 650; padding: 5px 12px; border-radius: 999px; min-width: 48px; transition: color .18s, background .18s; } .bottom-nav a .icon svg { width: 22px; height: 22px; } .bottom-nav a.active { color: var(--primary-d); background: var(--primary-soft); } /* Let wide tables scroll horizontally. This must live on the TABLE, not on .card - overflow on the card makes it a scroll container, which clipped the absolutely-positioned type-ahead picker dropdown inside it. */ table { display: block; overflow-x: auto; max-width: 100%; white-space: nowrap; } h1 { font-size: 1.3rem; } .stat .value { font-size: 1.5rem; } .ring, .ring-holder { width: 112px; height: 112px; } .ring-center .big { font-size: 1.3rem; } } /* ---- Small phones (iPhone SE / Mini / compact Android, 320-430px) ---- The 720/860px breakpoints assume a roomy phone. Below 430px the two-up stat grids, the topbar controls and the set form all need one more step down. */ @media (max-width: 430px) { .main { padding-left: 11px; padding-right: 11px; } .card { padding: 16px 14px; border-radius: 18px; } .grid, .grid-2, .grid-3, .grid-4 { gap: 12px; } .view { gap: 14px; } /* topbar: title on its own line, then ALL controls on one row underneath. They have to actually fit at 320px or the theme button wraps alone. */ .topbar { gap: 8px; margin-bottom: 16px; } .topbar h1 { flex: 1 0 100%; font-size: 1.18rem; } .topbar-right { flex: 1 0 100%; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; } .topbar-right .btn-icon { flex: none; padding: 9px; } #globalDate { max-width: 142px; padding-left: 9px; padding-right: 9px; font-size: 15px; } .today-btn { padding: 8px 12px; font-size: .8rem; } .stat .value { font-size: 1.32rem; } .stat .label { font-size: .66rem; letter-spacing: .05em; } .btn { padding: 10px 15px; } .tabs { gap: 6px; } .tabs button { padding: 7px 13px; font-size: .8rem; } .chips { gap: 5px; } /* keep the weight input usable next to its kg/lb chips */ .set-form { gap: 10px; } .set-form input, .set-form select { min-width: 0; } .quick-actions { gap: 10px; } .qa { padding: 12px 10px; font-size: .78rem; } .rest-timer { padding: 10px 13px; font-size: .92rem; gap: 8px; } .toast { padding: 11px 16px; font-size: .85rem; } .modal { padding: 18px 16px; } .split-week { grid-template-columns: repeat(4, 1fr); } .body-map { width: 165px; } } /* Landscape on a short phone: the floating nav eats most of the screen. */ @media (max-width: 860px) and (max-height: 460px) { :root { --nav-h: 58px; } .bottom-nav { padding: 4px 6px; } .bottom-nav a { font-size: .6rem; padding: 4px 10px; } .bottom-nav a .icon svg { width: 18px; height: 18px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }