/* =============================================================================
Mighty Vital — Stylesheet
A MightyJoe Project
-----------------------------------------------------------------------------
Restorative Plum: Mighty Vital's own place in the Mighty palette, matched
to the canonical heart-and-pulse icon's magenta/rose/plum identity (this
replaced the app's original teal/mint scheme in 1.1.3 — see the 1.1.3
release notes in README.md). Reset is soft frost blue and Focus is
electric cyan-violet; Vital sits apart from both on a near-black plum
ground with restrained magenta and rose illumination, softer geometry
than either — Focus is architectural, Vital is restorative.
Unlike its siblings, Vital ships a real light theme. A daytime wellness app
gets opened at 7am next to a window, and forcing dark there is the wrong
call. Dark is the default and the designed experience; light is a full
first-class palette, not an inversion.
1. Design tokens (dark)
2. Light theme
3. Base, resets, shell
4. Navigation (bottom bar → left rail)
5. Typography & utilities
6. Cards & panels
7. Buttons, chips, switches, fields
8. Signal meter (the check-in control)
9. Today
10. Vital Score
11. Vital Action card
12. Check-In
13. Action runner
14. Journey
15. Settings
16. Onboarding
17. Sheets, dialogs, toast
18. Responsive
19. Motion & print
20. Vital Core
21. Vital Pulse & reveal
22. Today hero, Quick Relief, favorites
23. Stretch, choices, feedback
24. Brand lockup & Mighty footer
25. Mighty Ecosystem
========================================================================== */
/* ─────────────────────────────────────────── 1. DESIGN TOKENS (DARK) ────── */
:root {
color-scheme: dark;
/* Restorative plum, matched to the canonical heart-and-pulse icon: a deep
near-black plum ground with restrained magenta and rose illumination.
Magenta carries every primary action; the secondary tints below (gold,
lavender, blush) are all subordinate to it and only ever mark state or
completion, never the dominant surface color. */
--accent: #E85A87; /* primary accent — 5.9:1 on --bg */
--accent-bright: #F6CBDE; /* pale rose, for accented text on dark */
--accent-deep: #9E2958; /* pressed and deep states */
--accent-soft: rgba(232, 90, 135, 0.12);
--accent-line: rgba(232, 90, 135, 0.30);
--gold: #D9AD73; /* completion, streaks, "done" states */
--gold-soft: rgba(217, 173, 115, 0.13);
--load: #D9A462; /* signals measuring load, not quality */
--load-soft: rgba(217, 164, 98, 0.13);
/* Vital State tints. Steady is the primary magenta; the rest are quiet,
restrained notes drawn around it rather than a competing palette —
lavender-blue for Restore, blush for Recharge, warm gold for Ready
(shared with the general "done"/completion tone above), muted lavender
for Unwind. */
--restore-tint: #9AA6D6; /* Restore */
--recharge-tint: #F2B7CB; /* Recharge */
--unwind-tint: #ABA0C6; /* Unwind */
--st-restore: var(--restore-tint);
--st-recharge: var(--recharge-tint);
--st-steady: var(--accent);
--st-ready: var(--gold);
--st-unwind: var(--unwind-tint);
/* Foundation — near-black plum. */
--bg: #0F0710;
--bg-glow-a: rgba(232, 90, 135, 0.12);
--bg-glow-b: rgba(158, 41, 88, 0.08);
--surface: #180D15;
--surface-2: #21111C;
--surface-3: #2B1723;
--surface-hi: rgba(255, 255, 255, 0.04);
--line: rgba(232, 90, 135, 0.14);
--line-strong: rgba(232, 90, 135, 0.30);
--line-soft: rgba(255, 255, 255, 0.06);
/* Type — every value below is AA or better on --bg and --surface. */
--text: #FFF3F7; /* ~18.4:1 */
--muted: #C5ABB5; /* ~9.3:1 */
--muted-dim: #9D7F8B; /* ~5.5:1 — the quietest text allowed */
--warn: #FF7A68; /* destructive actions only */
--ok: #D9AD73;
--on-accent: #2B0615;
/* Geometry — softer than Focus on purpose. */
--r-xs: 10px;
--r-sm: 14px;
--r-md: 20px;
--r-lg: 26px;
--r-xl: 32px;
--r-pill: 999px;
--pad: 20px;
--tap: 48px;
--shell: 460px;
--rail: 0px;
--shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 34px rgba(0, 0, 0, 0.38);
--shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 48px rgba(0, 0, 0, 0.5);
--glow-accent: 0 0 0 1px rgba(232, 90, 135, 0.26), 0 12px 38px rgba(232, 90, 135, 0.16);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);
--t-fast: 140ms;
--t: 240ms;
--t-slow: 460ms;
}
/* ─────────────────────────────────── 2. LIGHT THEME — PARKED ───────────── */
/* NOT IN USE. Dark is the required Mighty Vital theme on every surface, so
nothing sets data-theme="light" any more and this block cannot match.
It resolving against the device's prefers-color-scheme is what made an
installed PWA on a phone set to Light appearance render white while the
same app on a dark desktop rendered correctly. The palette is kept — it is
complete and contrast-checked — so re-enabling it later is a matter of
restoring three things rather than rebuilding it:
1. index.html — the pre-paint script, to resolve a stored preference
2. js/app.js — resolveTheme() and the system-appearance listener
3. js/storage.js— cleanSettings(), which currently pins theme to 'dark'
plus the Theme control in the Settings markup. */
:root[data-theme="light"] {
color-scheme: light;
--accent: #9E2958; /* 7.2:1 on white — safe for body-size text */
--accent-bright: #7A1F44;
--accent-deep: #5C1836;
--accent-soft: rgba(158, 41, 88, 0.10);
--accent-line: rgba(158, 41, 88, 0.32);
--gold: #7A5219;
--gold-soft: rgba(122, 82, 25, 0.11);
--load: #7A5219;
--load-soft: rgba(122, 82, 25, 0.11);
--restore-tint: #3F4F9E;
--recharge-tint: #A6355C;
--unwind-tint: #5C4A82;
--bg: #FBF2F5;
--bg-glow-a: rgba(232, 90, 135, 0.20);
--bg-glow-b: rgba(158, 41, 88, 0.14);
--surface: #FFFFFF;
--surface-2: #F7E9EE;
--surface-3: #F0DCE4;
--surface-hi: rgba(255, 255, 255, 0.75);
--line: rgba(158, 41, 88, 0.16);
--line-strong: rgba(158, 41, 88, 0.34);
--line-soft: rgba(20, 8, 14, 0.07);
--text: #2B0615;
--muted: #6B4552; /* 8.1:1 on --surface */
--muted-dim: #86636D; /* 5.2:1 on --surface */
--warn: #A6302A;
--ok: #7A5219;
--on-accent: #FFFFFF;
--shadow-card: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 20px rgba(43, 6, 21, 0.07);
--shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 16px 40px rgba(43, 6, 21, 0.12);
--glow-accent: 0 0 0 1px rgba(158, 41, 88, 0.22), 0 10px 30px rgba(158, 41, 88, 0.10);
}
/* ─────────────────────────────────────────── 3. BASE, RESETS, SHELL ─────── */
* { box-sizing: border-box; }
/* Screens, sheets and overlays are toggled with the hidden attribute, and
many of them are display:flex — which would otherwise beat hidden. */
[hidden] { display: none !important; }
/* The root element paints the canvas — the area behind everything, including
iOS rubber-band overscroll above and below the page, the space beside the
content on a short page, and the backdrop of an installed PWA before the
first frame. Without a background here the browser uses its own default,
which is white on a device set to Light appearance. This one declaration is
what keeps the standalone app dark edge to edge. */
html {
background-color: var(--bg);
min-height: 100%;
/* Belt and braces with the tag: scrollbars and
native form controls follow this. */
color-scheme: dark;
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
/* dvh so the body still fills the screen when a mobile browser's toolbar
collapses; the 100vh line before it is the fallback for older engines. */
min-height: 100vh;
min-height: 100dvh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
"Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
overscroll-behavior-y: none;
}
/* The one piece of atmosphere in the whole app. */
body::before {
content: "";
position: fixed;
inset: -30% -20% auto -20%;
height: 68vh;
background:
radial-gradient(58% 58% at 26% 16%, var(--bg-glow-a), transparent 70%),
radial-gradient(48% 48% at 82% 2%, var(--bg-glow-b), transparent 72%);
pointer-events: none;
z-index: 0;
}
#app {
position: relative;
z-index: 1;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding-left: var(--rail);
/* Deliberately transparent, not --bg. body::before paints the ambient
magenta/rose glow at z-index 0 and #app sits at z-index 1, so an opaque background
here would cover the one piece of atmosphere in the app. It is safe: html
and body both carry --bg underneath, so there are two opaque dark layers
behind this one and nothing white can show through. */
background-color: transparent;
}
/* Same reasoning — the screens are transparent so the glow reads through. */
#main { background-color: transparent; }
.shell {
width: 100%;
max-width: var(--shell);
margin: 0 auto;
padding-left: calc(env(safe-area-inset-left, 0px) + var(--pad));
padding-right: calc(env(safe-area-inset-right, 0px) + var(--pad));
}
.screen {
flex: 1 1 auto;
display: block;
padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
/* Room for the fixed bottom nav plus the phone's home indicator. */
padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
animation: screen-in var(--t-slow) var(--ease-out) both;
outline: none;
}
@keyframes screen-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: 50%;
top: 8px;
transform: translate(-50%, -220%);
background: var(--accent);
color: var(--on-accent);
padding: 10px 18px;
border-radius: var(--r-pill);
font-weight: 650;
text-decoration: none;
z-index: 90;
transition: transform var(--t) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 8px;
}
/* Screens take focus on navigation so screen readers land in the new context,
but they are containers — no visible ring. */
.screen:focus, .screen:focus-visible { outline: none; }
/* ─────────────────────────────────────────────────── 4. NAVIGATION ──────── */
.nav {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 40;
background: color-mix(in srgb, var(--bg) 86%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border-top: 1px solid var(--line);
padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}
/* Fallback for browsers without color-mix. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
.nav { background: var(--surface); }
}
.nav-inner {
max-width: var(--shell);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
}
.nav-btn {
appearance: none;
background: none;
border: 0;
min-height: var(--tap);
padding: 7px 2px;
border-radius: var(--r-sm);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--muted-dim);
font: inherit;
font-size: 10.5px;
font-weight: 650;
letter-spacing: 0.02em;
cursor: pointer;
position: relative;
transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn:hover { color: var(--muted); }
.nav-btn[aria-current="page"] { color: var(--accent); }
.nav-btn[aria-current="page"]::after {
content: "";
position: absolute;
top: 1px; left: 50%;
transform: translateX(-50%);
width: 18px; height: 2px;
border-radius: 2px;
background: var(--accent);
}
.nav-dot {
position: absolute;
top: 6px;
margin-left: 20px;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 2px var(--bg);
}
.nav-foot { display: none; }
/* ─────────────────────────────────────── 5. TYPOGRAPHY & UTILITIES ─────── */
h1, h2, h3 { letter-spacing: -0.018em; margin: 0; }
h1 { font-size: clamp(23px, 6.2vw, 27px); line-height: 1.18; font-weight: 700; }
h2 { font-size: 18px; font-weight: 660; }
h3 { font-size: 15.5px; font-weight: 640; }
p { margin: 0; }
svg { display: block; }
.icon {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
/* Every component below sizes its own icons; this is the floor so that an
icon dropped into new markup can never render at its intrinsic size. */
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.lockup { display: flex; flex-direction: column; line-height: 1; }
.lockup__parent {
font-size: 10.5px;
font-weight: 750;
letter-spacing: 0.42em;
color: var(--accent);
opacity: 0.9;
}
.lockup__product {
font-size: clamp(30px, 8.8vw, 38px);
font-weight: 800;
letter-spacing: -0.03em;
margin-top: 6px;
background: linear-gradient(170deg, var(--text) 0%, var(--accent) 128%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--accent);
}
.lockup__tagline {
margin-top: 9px;
font-size: 13.5px;
color: var(--muted);
}
.eyebrow {
font-size: 10.5px;
font-weight: 750;
letter-spacing: 0.17em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 7px;
}
.section-label {
font-size: 11px;
font-weight: 750;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted-dim);
margin: 28px 0 11px;
}
.section-label:first-child { margin-top: 0; }
.head { margin: 6px 0 22px; }
.head p { margin-top: 9px; color: var(--muted); font-size: 14.5px; }
.muted { color: var(--muted); }
.dim { color: var(--muted-dim); }
.small { font-size: 13px; }
.center { text-align: center; }
.strong { font-weight: 650; }
.stack > * + * { margin-top: 12px; }
.stack-lg > * + * { margin-top: 18px; }
.row { display: flex; gap: 10px; align-items: center; }
.row-between { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.wrap-anywhere { overflow-wrap: anywhere; }
.divider { height: 1px; background: var(--line-soft); border: 0; margin: 20px 0; }
.fine-print {
font-size: 12.5px;
color: var(--muted-dim);
text-align: center;
margin-top: 20px;
}
.text-link { color: var(--accent); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
/* ────────────────────────────────────────────── 6. CARDS & PANELS ──────── */
.card {
border: 1px solid var(--line-soft);
border-radius: var(--r-lg);
background: linear-gradient(180deg, var(--surface-hi), transparent 62%), var(--surface);
box-shadow: var(--shadow-card);
padding: 18px;
}
.card--flush { padding: 0; overflow: hidden; }
.card--tight { padding: 14px; }
.card--accent {
border-color: var(--accent-line);
background: linear-gradient(180deg, var(--accent-soft), transparent 72%), var(--surface);
}
.card--done {
border-color: var(--gold-soft);
background: linear-gradient(180deg, var(--gold-soft), transparent 72%), var(--surface);
}
.card__title { font-size: 16.5px; font-weight: 670; letter-spacing: -0.015em; }
.card__text { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.empty {
text-align: center;
padding: 26px 18px;
}
.empty__mark {
width: 56px; height: 56px;
margin: 0 auto 16px;
display: grid;
place-items: center;
border-radius: var(--r-md);
background: var(--accent-soft);
color: var(--accent);
}
.empty__mark svg { width: 26px; height: 26px; }
.empty h2 { margin-bottom: 8px; }
.empty p { color: var(--muted); font-size: 14px; max-width: 34ch; margin: 0 auto; }
/* ──────────────────────────────── 7. BUTTONS, CHIPS, SWITCHES, FIELDS ─── */
.btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: var(--tap);
padding: 12px 20px;
border: 1px solid transparent;
border-radius: var(--r-pill);
font: inherit;
font-size: 15px;
font-weight: 650;
letter-spacing: -0.005em;
cursor: pointer;
text-align: center;
transition: transform var(--t-fast) var(--ease),
background-color var(--t) var(--ease),
border-color var(--t) var(--ease),
opacity var(--t) var(--ease);
}
.btn svg { width: 19px; height: 19px; }
.btn:active { transform: scale(0.975); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--primary {
background: var(--accent);
color: var(--on-accent);
box-shadow: var(--glow-accent);
}
.btn--primary:hover { background: var(--accent-bright); }
:root[data-theme="light"] .btn--primary:hover { background: var(--accent-bright); }
.btn--quiet {
background: var(--surface-2);
color: var(--text);
border-color: var(--line-soft);
}
.btn--quiet:hover { border-color: var(--line); }
.btn--ghost {
background: none;
color: var(--muted);
border-color: transparent;
font-weight: 600;
}
.btn--ghost:hover { color: var(--text); background: var(--surface-hi); }
.btn--danger { color: var(--warn); border-color: var(--line-soft); background: var(--surface-2); }
.btn--danger:hover { border-color: var(--warn); }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 9px 15px; font-size: 13.5px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn { flex: 1 1 0; min-width: 0; }
/* The ecosystem page's two closing CTAs stack full-width on narrow phones —
"Follow the Ecosystem" and "Meet the Creator" are long enough to wrap
awkwardly side by side on a typical phone width — and sit side by side
once there is comfortable room for both, matching the approved Mighty
Money treatment (which uses this same 480px threshold). */
.eco-cta.btn-row .btn { flex: 1 1 100%; }
@media (min-width: 480px) {
.eco-cta.btn-row .btn { flex: 1 1 0; }
}
.chip {
appearance: none;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
padding: 8px 14px;
border: 1px solid var(--line-soft);
border-radius: var(--r-pill);
background: var(--surface-2);
color: var(--text);
font: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: all var(--t-fast) var(--ease);
}
.chip svg { width: 17px; height: 17px; color: var(--muted); }
.chip:hover { border-color: var(--line); }
.chip[aria-pressed="true"],
.chip.is-on {
background: var(--accent-soft);
border-color: var(--accent-line);
color: var(--accent-bright);
}
.chip[aria-pressed="true"] svg, .chip.is-on svg { color: var(--accent); }
:root[data-theme="light"] .chip[aria-pressed="true"],
:root[data-theme="light"] .chip.is-on { color: var(--accent); }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
/* Rows used in Settings and lists */
.rows { display: flex; flex-direction: column; }
.rows > * + * { border-top: 1px solid var(--line-soft); }
.set-row {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
min-height: 58px;
padding: 12px 18px;
background: none;
border: 0;
font: inherit;
color: var(--text);
text-align: left;
}
button.set-row { cursor: pointer; }
button.set-row:hover { background: var(--surface-hi); }
.set-row__label { font-size: 14.5px; font-weight: 600; }
.set-row__label small {
display: block;
font-size: 12.5px;
font-weight: 500;
color: var(--muted-dim);
margin-top: 2px;
letter-spacing: 0;
}
.set-row__value { margin-left: auto; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.set-row__value--accent { color: var(--accent); }
.set-row__value--warn { color: var(--warn); }
.set-row__icon { color: var(--accent); flex: 0 0 auto; }
.set-row__icon svg { width: 20px; height: 20px; }
/* The track is 30px tall for looks, but the label carries vertical padding so
the actual tap area is 48px — negative margins keep the row height unchanged. */
.switch {
margin: -9px 0 -9px auto;
padding: 9px 0;
position: relative;
flex: 0 0 auto;
display: inline-flex;
}
.switch input {
position: absolute;
inset: 0;
width: 100%; height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.switch__track {
width: 50px; height: 30px;
border-radius: var(--r-pill);
background: var(--surface-3);
border: 1px solid var(--line-soft);
display: block;
position: relative;
transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.switch__knob {
position: absolute;
top: 3px; left: 3px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--muted);
transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.switch input:checked + .switch__track {
background: var(--accent);
border-color: var(--accent);
}
.switch input:checked + .switch__track .switch__knob {
transform: translateX(20px);
background: var(--on-accent);
}
.switch input:focus-visible + .switch__track {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.field { display: block; }
.field__label {
display: block;
font-size: 12.5px;
font-weight: 650;
letter-spacing: 0.02em;
color: var(--muted);
margin-bottom: 8px;
}
.input, .select {
appearance: none;
width: 100%;
min-height: var(--tap);
padding: 12px 15px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text);
font: inherit;
font-size: 16px; /* 16px stops iOS zooming the viewport on focus */
}
.input::placeholder { color: var(--muted-dim); }
.input:focus, .select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.select {
padding-right: 40px;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
cursor: pointer;
}
.field__hint { margin-top: 8px; font-size: 12.5px; color: var(--muted-dim); }
.field__error { margin-top: 8px; font-size: 12.5px; color: var(--warn); font-weight: 600; }
/* Segmented control for small either/or choices */
.segmented {
display: flex;
gap: 4px;
padding: 4px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: var(--r-pill);
}
.segmented button {
flex: 1 1 0;
min-width: 0;
min-height: 44px;
border: 0;
border-radius: var(--r-pill);
background: none;
color: var(--muted);
font: inherit;
font-size: 13.5px;
font-weight: 640;
cursor: pointer;
transition: all var(--t-fast) var(--ease);
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] {
background: var(--accent);
color: var(--on-accent);
}
/* ───────────────────────────────────────────── 8. SIGNAL METER ─────────── */
/* The check-in control: five ascending bars. Tapping one fills up to it.
Bars always ascend with "more of the thing named", so a load signal like
stress is not visually flattered by being high — it just changes colour. */
.signal {
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: linear-gradient(180deg, var(--surface-hi), transparent 60%), var(--surface);
padding: 15px 15px 13px;
transition: border-color var(--t) var(--ease);
}
.signal.is-answered { border-color: var(--accent-line); }
.signal.is-answered.signal--load { border-color: var(--load-soft); }
.signal__head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.signal__icon {
width: 34px; height: 34px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 11px;
background: var(--accent-soft);
color: var(--accent);
}
.signal--load .signal__icon { background: var(--load-soft); color: var(--load); }
.signal__icon svg { width: 18px; height: 18px; }
.signal__q { font-size: 14.5px; font-weight: 640; letter-spacing: -0.01em; }
.signal__answer {
margin-left: auto;
flex: 0 0 auto;
font-size: 12.5px;
font-weight: 650;
color: var(--accent);
text-align: right;
max-width: 40%;
}
.signal--load .signal__answer { color: var(--load); }
.signal__answer--empty { color: var(--muted-dim); font-weight: 500; }
.meter {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
align-items: end;
}
.meter__opt {
appearance: none;
border: 0;
background: none;
padding: 6px 2px 4px;
min-height: 46px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 6px;
cursor: pointer;
border-radius: var(--r-xs);
transition: background var(--t-fast) var(--ease);
}
.meter__opt:hover { background: var(--surface-hi); }
.meter__bar {
display: block;
width: 100%;
border-radius: 4px;
background: var(--surface-3);
border: 1px solid var(--line-soft);
transition: background var(--t) var(--ease),
border-color var(--t) var(--ease),
transform var(--t-fast) var(--ease);
}
.meter__opt:nth-child(1) .meter__bar { height: 12px; }
.meter__opt:nth-child(2) .meter__bar { height: 18px; }
.meter__opt:nth-child(3) .meter__bar { height: 24px; }
.meter__opt:nth-child(4) .meter__bar { height: 30px; }
.meter__opt:nth-child(5) .meter__bar { height: 36px; }
.meter__opt.is-lit .meter__bar {
background: var(--accent);
border-color: var(--accent);
}
.signal--load .meter__opt.is-lit .meter__bar {
background: var(--load);
border-color: var(--load);
}
.meter__opt.is-selected .meter__bar { transform: scaleX(1.02); }
.meter__num {
font-size: 10.5px;
font-weight: 650;
color: var(--muted-dim);
letter-spacing: 0.02em;
}
.meter__opt.is-selected .meter__num { color: var(--accent); }
.signal--load .meter__opt.is-selected .meter__num { color: var(--load); }
.signal__clear {
appearance: none;
border: 0;
background: none;
color: var(--muted-dim);
font: inherit;
font-size: 12.5px;
font-weight: 600;
/* Sits below the meter, so it gets the full 44px of its own rather than
being a thin strip next to five large targets. */
padding: 12px 4px 2px;
min-height: 44px;
margin-top: 2px;
cursor: pointer;
text-align: left;
}
.signal__clear:hover { color: var(--text); }
/* ──────────────────────────────────────────────────────── 9. TODAY ─────── */
.greet { margin: 4px 0 20px; }
.greet__hello {
font-size: clamp(24px, 6.6vw, 29px);
font-weight: 700;
letter-spacing: -0.024em;
line-height: 1.15;
}
.greet__date {
margin-top: 7px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-dim);
}
.greet__summary {
margin-top: 12px;
font-size: 14.5px;
color: var(--muted);
line-height: 1.5;
max-width: 40ch;
}
/* Daily progress: three quiet pips for check-in, action, and a log. */
.progress {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
}
.pips { display: flex; gap: 6px; }
.pip {
width: 26px; height: 5px;
border-radius: 3px;
background: var(--surface-3);
border: 1px solid var(--line-soft);
transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pip.is-done { background: var(--gold); border-color: var(--gold); }
.progress__text { font-size: 12.5px; color: var(--muted-dim); font-weight: 600; }
.quick-row {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 2px 0 4px;
/* Bleed to the shell edge so the row reads as scrollable, without ever
making the page itself scroll sideways. */
margin: 0 calc(var(--pad) * -1);
padding-left: var(--pad);
padding-right: var(--pad);
}
.quick-row::-webkit-scrollbar { display: none; }
.quick-row .chip { flex: 0 0 auto; }
/* Today's answered signals, at a glance. */
.signal-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 8px;
}
.signal-pill {
border: 1px solid var(--line-soft);
border-radius: var(--r-sm);
background: var(--surface-2);
padding: 10px 8px;
text-align: center;
min-width: 0;
}
.signal-pill__icon { color: var(--muted); margin: 0 auto 6px; }
.signal-pill__icon svg { width: 16px; height: 16px; }
.signal-pill__val {
font-size: 12px;
font-weight: 680;
line-height: 1.25;
color: var(--text);
/* Two lines rather than an ellipsis: "Some soreness" is the answer, and
"Some so…" is not. The min-height keeps the row of pills even. */
min-height: 2.5em;
display: flex;
align-items: center;
justify-content: center;
overflow-wrap: anywhere;
}
.signal-pill__label {
font-size: 10px;
font-weight: 650;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted-dim);
margin-top: 3px;
}
/* ─────────────────────────────────────────────── 10. VITAL SCORE ───────── */
.score {
display: flex;
align-items: center;
gap: 18px;
}
.score__ring {
position: relative;
width: 92px; height: 92px;
flex: 0 0 auto;
}
.score__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score__track { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.score__value-arc {
fill: none;
stroke: var(--accent);
stroke-width: 9;
stroke-linecap: round;
transition: stroke-dashoffset var(--t-slow) var(--ease-out);
}
.score__num {
position: absolute;
inset: 0;
display: grid;
place-items: center;
flex-direction: column;
}
.score__num strong {
font-size: 27px;
font-weight: 720;
letter-spacing: -0.03em;
line-height: 1;
}
.score__body { min-width: 0; }
.score__band { font-size: 17px; font-weight: 680; letter-spacing: -0.018em; }
.score__line { margin-top: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.score__meta {
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 650;
color: var(--accent);
background: none;
border: 0;
padding: 6px 0;
min-height: 44px;
cursor: pointer;
font-family: inherit;
}
.score__meta svg { width: 15px; height: 15px; }
.score__meta:hover { text-decoration: underline; }
.score-hidden {
display: flex;
align-items: center;
gap: 14px;
}
.score-hidden__mark {
width: 46px; height: 46px;
flex: 0 0 auto;
border-radius: var(--r-sm);
background: var(--accent-soft);
color: var(--accent);
display: grid;
place-items: center;
}
.score-hidden__mark svg { width: 22px; height: 22px; }
.explain-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.explain-list li {
list-style: none;
padding-left: 22px;
position: relative;
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
.explain-list li::before {
content: "";
position: absolute;
left: 4px; top: 8px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
}
.explain-list ul { margin: 0; padding: 0; }
/* ────────────────────────────────────────── 11. VITAL ACTION CARD ─────── */
.action-card__top { display: flex; align-items: flex-start; gap: 13px; }
.action-card__icon {
width: 44px; height: 44px;
flex: 0 0 auto;
border-radius: var(--r-sm);
background: var(--accent-soft);
color: var(--accent);
display: grid;
place-items: center;
}
.action-card--done .action-card__icon { background: var(--gold-soft); color: var(--gold); }
.action-card__icon svg { width: 22px; height: 22px; }
.action-card__title {
font-size: 17px;
font-weight: 690;
letter-spacing: -0.02em;
line-height: 1.24;
}
.action-card__time {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
margin-top: 7px;
font-size: 12px;
font-weight: 650;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted-dim);
}
.action-card__time svg { width: 13px; height: 13px; stroke-width: 2.2; }
.action-card__blurb { margin-top: 13px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.action-card__actions { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.alt-list { display: flex; flex-direction: column; gap: 8px; }
.alt {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 13px 14px;
border: 1px solid var(--line-soft);
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease);
}
.alt:hover { border-color: var(--line-strong); }
.alt__icon { color: var(--accent); flex: 0 0 auto; }
.alt__icon svg { width: 20px; height: 20px; }
.alt__title { display: block; font-size: 14.5px; font-weight: 640; }
.alt__time { display: block; font-size: 12px; color: var(--muted-dim); margin-top: 2px; }
/* ──────────────────────────────────────────────────── 12. CHECK-IN ─────── */
.checkin-list { display: flex; flex-direction: column; gap: 11px; }
.checkin-bar {
position: sticky;
top: 0;
z-index: 20;
margin: 0 calc(var(--pad) * -1) 18px;
padding: 12px var(--pad);
background: color-mix(in srgb, var(--bg) 90%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line-soft);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
.checkin-bar { background: var(--bg); }
}
.checkin-bar__row { display: flex; align-items: center; gap: 12px; }
.checkin-bar__count { font-size: 13px; font-weight: 650; color: var(--muted); }
.checkin-bar__track {
flex: 1 1 auto;
height: 5px;
border-radius: 3px;
background: var(--surface-3);
overflow: hidden;
}
.checkin-bar__fill {
height: 100%;
width: 0;
border-radius: 3px;
background: var(--accent);
transition: width var(--t) var(--ease-out);
}
.checkin-foot {
position: sticky;
bottom: calc(96px + env(safe-area-inset-bottom, 0px));
z-index: 20;
margin: 18px calc(var(--pad) * -1) 0;
padding: 14px var(--pad) 6px;
background: linear-gradient(to top, var(--bg) 34%, transparent);
}
.summary__mark {
width: 62px; height: 62px;
margin: 0 auto 18px;
border-radius: var(--r-lg);
background: var(--accent-soft);
color: var(--accent);
display: grid;
place-items: center;
}
.summary__mark svg { width: 30px; height: 30px; }
.summary__headline {
text-align: center;
font-size: clamp(21px, 5.8vw, 25px);
font-weight: 700;
letter-spacing: -0.022em;
}
.summary__body {
margin: 12px auto 0;
text-align: center;
font-size: 15px;
color: var(--muted);
line-height: 1.55;
max-width: 34ch;
}
/* ─────────────────────────────────────────────── 13. ACTION RUNNER ─────── */
.runner {
position: fixed;
inset: 0;
z-index: 70;
background: var(--bg);
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
animation: runner-in var(--t) var(--ease-out) both;
}
@keyframes runner-in {
from { opacity: 0; transform: scale(0.985); }
to { opacity: 1; transform: none; }
}
.runner__inner {
flex: 1 0 auto;
min-height: 100%;
width: 100%;
max-width: var(--shell);
margin: 0 auto;
display: flex;
flex-direction: column;
padding:
calc(env(safe-area-inset-top, 0px) + 14px)
calc(env(safe-area-inset-right, 0px) + var(--pad))
calc(env(safe-area-inset-bottom, 0px) + 22px)
calc(env(safe-area-inset-left, 0px) + var(--pad));
}
.runner__bar {
display: grid;
grid-template-columns: var(--tap) 1fr var(--tap);
align-items: center;
gap: 8px;
}
.runner__title {
text-align: center;
font-size: 13px;
font-weight: 650;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.icon-btn {
appearance: none;
width: var(--tap); height: var(--tap);
border: 0;
border-radius: 50%;
background: none;
color: var(--muted);
display: grid;
place-items: center;
cursor: pointer;
transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { color: var(--text); background: var(--surface-hi); }
.icon-btn--ghost { pointer-events: none; }
.runner__stage {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 26px;
text-align: center;
padding: 20px 0;
}
.runner__h {
font-size: clamp(22px, 6vw, 26px);
font-weight: 700;
letter-spacing: -0.022em;
max-width: 22ch;
}
.runner__cue {
font-size: 15.5px;
color: var(--muted);
line-height: 1.55;
max-width: 28ch;
min-height: 3em;
}
.ring { position: relative; width: min(56vw, 210px, 32vh); aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.ring__prog {
fill: none;
stroke: var(--accent);
stroke-width: 6;
stroke-linecap: round;
transition: stroke-dashoffset 980ms linear;
}
.ring__inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.ring__time {
font-size: clamp(32px, 9vw, 42px);
font-weight: 700;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.ring__state {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-dim);
}
/* Breathing orb, used instead of a countdown for breath work. */
.orb { position: relative; width: min(58vw, 220px, 34vh); aspect-ratio: 1; display: grid; place-items: center; }
.orb__glow {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
}
.orb__core {
width: 46%;
aspect-ratio: 1;
border-radius: 50%;
background: linear-gradient(160deg, var(--accent), var(--accent-deep));
box-shadow: var(--glow-accent);
transition: transform 1s linear, opacity 1s linear;
}
.orb.is-in .orb__core { transform: scale(1.6); }
.orb.is-hold .orb__core { transform: scale(1.6); }
.orb.is-out .orb__core { transform: scale(1); }
.orb__count {
position: absolute;
bottom: -4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-dim);
}
.runner__steps { display: flex; gap: 5px; justify-content: center; }
.runner__step {
width: 26px; height: 4px;
border-radius: 2px;
background: var(--surface-3);
}
.runner__step.is-done { background: var(--accent); }
.runner__step.is-now { background: var(--accent-bright); }
.runner__controls { display: flex; flex-direction: column; gap: 10px; }
.done__mark {
width: 84px; height: 84px;
margin: 0 auto;
color: var(--gold);
}
.done__mark svg { width: 100%; height: 100%; }
.done__circle {
stroke-dasharray: 170;
stroke-dashoffset: 170;
animation: draw 620ms var(--ease-out) 60ms forwards;
}
.done__check {
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: draw 380ms var(--ease-out) 420ms forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
/* ─────────────────────────────────────────────────── 14. JOURNEY ──────── */
.streak {
display: flex;
align-items: center;
gap: 14px;
}
.streak__mark {
width: 50px; height: 50px;
flex: 0 0 auto;
border-radius: var(--r-sm);
background: var(--gold-soft);
color: var(--gold);
display: grid;
place-items: center;
}
.streak__mark svg { width: 24px; height: 24px; }
.streak__num {
font-size: 25px;
font-weight: 720;
letter-spacing: -0.03em;
line-height: 1.1;
}
.streak__label { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.streak__best {
margin-left: auto;
text-align: right;
font-size: 12px;
color: var(--muted-dim);
font-weight: 600;
flex: 0 0 auto;
}
.week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
align-items: end;
}
.week__day { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.week__track {
width: 100%;
height: 74px;
border-radius: var(--r-xs);
background: var(--surface-2);
border: 1px solid var(--line-soft);
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.week__fill {
width: 100%;
border-radius: calc(var(--r-xs) - 2px);
background: linear-gradient(0deg, var(--accent-deep), var(--accent));
min-height: 4px;
transition: height var(--t-slow) var(--ease-out);
}
.week__day.is-today .week__track { border-color: var(--accent-line); }
.week__day.is-empty .week__track { border-style: dashed; }
.week__dot {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 8px; height: 8px;
border-radius: 50%;
background: var(--muted-dim);
}
.week__num {
font-size: 11px;
font-weight: 700;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.week__day.is-empty .week__num { color: var(--muted-dim); }
.week__label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted-dim);
}
.week__day.is-today .week__label { color: var(--accent); }
.trend { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.trend + .trend { border-top: 1px solid var(--line-soft); }
.trend__icon { color: var(--muted); flex: 0 0 auto; }
.trend__icon svg { width: 18px; height: 18px; }
.trend__name { font-size: 14px; font-weight: 640; width: 74px; flex: 0 0 auto; }
.trend__spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; flex: 1 1 auto; }
.trend__bar {
flex: 1 1 0;
min-width: 3px;
border-radius: 2px;
background: var(--accent);
opacity: 0.85;
}
.trend__bar.is-blank { background: var(--surface-3); height: 3px !important; }
.trend__word {
flex: 0 0 auto;
font-size: 12px;
font-weight: 650;
color: var(--muted-dim);
text-align: right;
min-width: 62px;
}
.trend__word.is-up { color: var(--gold); }
.trend__word.is-down { color: var(--load); }
.log-list { display: flex; flex-direction: column; }
.log-list > * + * { border-top: 1px solid var(--line-soft); }
.log-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.log-item__icon { color: var(--accent); flex: 0 0 auto; }
.log-item__icon svg { width: 19px; height: 19px; }
.log-item__title { display: block; font-size: 14px; font-weight: 620; }
.log-item__meta { display: block; font-size: 12.5px; color: var(--muted-dim); margin-top: 2px; }
.log-item__when { margin-left: auto; font-size: 12px; color: var(--muted-dim); font-weight: 600; flex: 0 0 auto; }
.reflect {
border: 1px solid var(--accent-line);
border-radius: var(--r-lg);
background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface);
padding: 18px;
}
.reflect__label {
font-size: 10.5px;
font-weight: 750;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
.reflect__text { font-size: 15px; line-height: 1.55; }
.reflect__stats { display: flex; gap: 18px; margin-top: 16px; }
.reflect__stat strong {
display: block;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.02em;
}
.reflect__stat span {
font-size: 11px;
font-weight: 650;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted-dim);
}
/* ────────────────────────────────────────────────── 15. SETTINGS ──────── */
/* About's centered header: canonical mark, title, tagline — the same
hierarchy Mighty Money opens its About screen with. */
.head--about { text-align: center; }
.head--about .btn { margin-left: 0; }
.about__mark {
width: 56px; height: 56px;
border-radius: 17px;
margin: 14px auto 12px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}
.head--about h1 { font-size: clamp(21px, 5.6vw, 24px); }
.head--about .tagline {
margin-top: 6px;
font-size: 13px;
font-weight: 620;
color: var(--accent);
}
.link-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 44px;
margin-top: 10px;
padding: 11px 2px;
border-top: 1px solid var(--line-soft);
color: var(--text);
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.link-row:hover { color: var(--accent); }
.link-row__go { color: var(--muted-dim); }
.about__lede { font-size: 14.5px; line-height: 1.55; }
.about p + p { margin-top: 12px; }
.about p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.about__disclaimer {
margin-top: 14px;
padding: 13px 14px;
border-radius: var(--r-sm);
background: var(--surface-2);
border: 1px solid var(--line-soft);
font-size: 12.5px;
color: var(--muted);
line-height: 1.55;
}
.about__version { margin-top: 14px; font-size: 12px; color: var(--muted-dim); }
.disclaimer-inline {
display: flex;
gap: 11px;
align-items: flex-start;
padding: 13px 14px;
border-radius: var(--r-sm);
background: var(--surface-2);
border: 1px solid var(--line-soft);
}
.disclaimer-inline svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.disclaimer-inline p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* ───────────────────────────────────────────────── 16. ONBOARDING ─────── */
.onboard {
position: fixed;
inset: 0;
z-index: 80;
background: var(--bg);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.onboard__inner {
min-height: 100%;
width: 100%;
max-width: var(--shell);
margin: 0 auto;
display: flex;
flex-direction: column;
padding:
calc(env(safe-area-inset-top, 0px) + 26px)
calc(env(safe-area-inset-right, 0px) + var(--pad))
calc(env(safe-area-inset-bottom, 0px) + 26px)
calc(env(safe-area-inset-left, 0px) + var(--pad));
}
.onboard__steps { display: flex; gap: 5px; margin-bottom: 26px; }
.onboard__dot {
height: 4px;
flex: 1 1 0;
border-radius: 2px;
background: var(--surface-3);
transition: background var(--t) var(--ease);
}
.onboard__dot.is-on { background: var(--accent); }
.onboard__step { flex: 1 1 auto; display: flex; flex-direction: column; animation: screen-in var(--t) var(--ease-out) both; }
.onboard__body { flex: 1 1 auto; margin-top: 22px; }
.onboard__foot { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.onboard h1 { font-size: clamp(25px, 7vw, 31px); }
.onboard__lede { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.55; max-width: 32ch; }
.pick-list { display: flex; flex-direction: column; gap: 9px; }
.pick {
display: flex;
align-items: center;
gap: 13px;
width: 100%;
min-height: 60px;
padding: 14px 16px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--surface);
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pick:hover { border-color: var(--line); }
.pick[aria-pressed="true"], .pick.is-on {
border-color: var(--accent-line);
background: linear-gradient(180deg, var(--accent-soft), transparent 80%), var(--surface);
}
.pick__icon {
width: 36px; height: 36px;
flex: 0 0 auto;
border-radius: 11px;
background: var(--surface-2);
color: var(--muted);
display: grid;
place-items: center;
}
.pick[aria-pressed="true"] .pick__icon, .pick.is-on .pick__icon {
background: var(--accent-soft);
color: var(--accent);
}
.pick__icon svg { width: 19px; height: 19px; }
.pick__title { display: block; font-size: 15px; font-weight: 640; }
.pick__blurb { display: block; font-size: 12.5px; color: var(--muted-dim); margin-top: 3px; }
.pick__tick {
margin-left: auto;
flex: 0 0 auto;
width: 22px; height: 22px;
border-radius: 50%;
border: 1px solid var(--line);
display: grid;
place-items: center;
color: transparent;
}
.pick[aria-pressed="true"] .pick__tick, .pick.is-on .pick__tick {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
.pick__tick svg { width: 13px; height: 13px; stroke-width: 2.6; }
/* ────────────────────────────────────── 17. SHEETS, DIALOGS, TOAST ────── */
/* Stacking order, top to bottom: toast (95) → onboarding (80) → sheets (75)
→ action runner (70) → quick-log button (42) → nav (40). Sheets must sit
ABOVE the runner: the "leave this action?" confirmation is rendered while
the runner is still on screen, and at a lower z-index it would be dimmed
behind it and impossible to tap. */
.scrim {
position: fixed;
inset: 0;
z-index: 75;
background: rgba(10, 5, 11, 0.64);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex;
align-items: flex-end;
justify-content: center;
animation: fade-in var(--t-fast) var(--ease) both;
}
:root[data-theme="light"] .scrim { background: rgba(43, 6, 21, 0.38); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sheet {
width: 100%;
max-width: var(--shell);
max-height: 88vh;
max-height: 88dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--surface);
border: 1px solid var(--line);
border-bottom: 0;
border-radius: var(--r-xl) var(--r-xl) 0 0;
box-shadow: var(--shadow-lift);
padding:
12px
calc(env(safe-area-inset-right, 0px) + var(--pad))
calc(env(safe-area-inset-bottom, 0px) + 20px)
calc(env(safe-area-inset-left, 0px) + var(--pad));
animation: sheet-up var(--t) var(--ease-out) both;
}
@keyframes sheet-up { from { transform: translateY(14px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheet__grip {
width: 40px; height: 4px;
border-radius: 2px;
background: var(--line);
margin: 0 auto 16px;
}
.sheet__title { font-size: 19px; font-weight: 690; letter-spacing: -0.02em; }
.sheet__text { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.sheet__body { margin-top: 18px; }
.sheet__foot { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.log-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
}
.log-tile {
appearance: none;
min-height: 84px;
padding: 13px 8px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--surface-2);
color: var(--text);
font: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.log-tile:hover { border-color: var(--line-strong); }
.log-tile:active { transform: scale(0.97); }
.log-tile__icon { color: var(--accent); }
.log-tile__icon svg { width: 22px; height: 22px; }
.log-tile span { font-size: 12.5px; font-weight: 620; text-align: center; line-height: 1.25; }
.toast {
position: fixed;
left: 50%;
bottom: calc(118px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
z-index: 95;
max-width: min(360px, calc(100vw - 32px));
padding: 12px 18px;
border-radius: var(--r-pill);
background: var(--surface-3);
border: 1px solid var(--line);
color: var(--text);
font-size: 13.5px;
font-weight: 620;
text-align: center;
box-shadow: var(--shadow-lift);
animation: toast-in var(--t) var(--ease-out) both;
}
/* Raised while the check-in form's sticky footer is on screen, so a toast
never covers the button the person is reaching for. */
body.has-sticky-foot .toast { bottom: calc(178px + env(safe-area-inset-bottom, 0px)); }
/* While a guided session is running, the bottom of the screen belongs to its
controls — Back, Restart, Next, Pause, Finish. A toast down there covers the
very buttons someone is reaching for, so it moves to the top instead. */
body.is-running .toast {
bottom: auto;
top: calc(env(safe-area-inset-top, 0px) + 74px);
animation: toast-in-top var(--t) var(--ease-out) both;
}
@keyframes toast-in-top {
from { opacity: 0; transform: translate(-50%, -10px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toast-in {
from { opacity: 0; transform: translate(-50%, 10px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ────────────────────────────────────────────────── 18. RESPONSIVE ────── */
/* Very small phones (≤340px): the meter is the tightest thing in the app. */
@media (max-width: 344px) {
:root { --pad: 15px; }
.meter { gap: 4px; }
.meter__num { font-size: 10px; }
.nav-btn { font-size: 10px; }
.log-grid { grid-template-columns: repeat(2, 1fr); }
.signal__answer { max-width: 34%; }
}
/* Large phones — a little more breathing room, not a wider column. */
@media (min-width: 420px) {
:root { --pad: 22px; }
}
/* Tablet portrait: the column stays a column. Stretching a one-hand layout
to 768px is the classic way to make a phone app feel unfinished, so the
extra width becomes quiet margin and slightly larger type instead. */
@media (min-width: 600px) {
:root { --shell: 520px; }
.screen { padding-top: calc(env(safe-area-inset-top, 0px) + 28px); }
.log-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Desktop and tablet landscape: the bottom bar becomes a left rail, and the
content column is re-centred on the *viewport* rather than on the space
left over beside the rail. */
@media (min-width: 860px) {
:root { --rail: 240px; --shell: 560px; }
.nav {
top: 0; bottom: 0; left: 0; right: auto;
width: var(--rail);
border-top: 0;
border-right: 1px solid var(--line);
padding: 30px 16px calc(20px + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
}
/* The brand lockup is real markup (see index.html), not CSS content, so it
is readable by assistive technology and translatable. Its `display` is
set in section 24's media query, which comes after the base rule. */
.nav-inner { grid-template-columns: 1fr; gap: 4px; order: 2; }
.nav-btn {
flex-direction: row;
justify-content: flex-start;
gap: 13px;
padding: 12px;
font-size: 14px;
font-weight: 600;
border-radius: var(--r-sm);
}
.nav-btn[aria-current="page"] { background: var(--accent-soft); }
.nav-btn[aria-current="page"]::after {
top: 50%; left: 0;
transform: translateY(-50%);
width: 3px; height: 22px;
}
.nav-dot { position: static; margin-left: auto; }
.screen {
padding-top: 44px;
padding-bottom: 64px;
}
/* Centring in the leftover space alone would push the column right of the
screen. Shifting back by half the rail puts it on the viewport's optical
centre, so the empty area is shared evenly. */
.shell {
margin-left: max(0px, calc((100% - var(--shell)) / 2 - var(--rail) / 2));
margin-right: auto;
}
.scrim { align-items: center; padding: 28px; padding-left: calc(var(--rail) + 28px); }
.sheet { border-radius: var(--r-xl); border-bottom: 1px solid var(--line); max-height: 84vh; }
.toast { bottom: 34px; left: calc(50% + var(--rail) / 2); }
body.has-sticky-foot .toast { bottom: 34px; }
.runner__inner { padding-left: var(--pad); padding-right: var(--pad); }
.ring { width: min(38vw, 280px, 40vh); }
}
@media (min-width: 1280px) {
:root { --shell: 600px; --rail: 256px; }
}
/* Beyond this the column stops growing; extra width becomes quiet margin
rather than longer lines. */
@media (min-width: 1700px) {
:root { --shell: 640px; }
}
/* Short viewports — compress the runner, while keeping overflow scrollable so
every control remains reachable in parked landscape. */
@media (max-height: 680px) {
.ring, .orb { width: min(44vw, 168px, 30vh); }
.runner__stage { gap: 18px; }
.runner__cue { min-height: 2.6em; font-size: 14.5px; }
}
/* ───────────────────────────────────────────── 19. MOTION & PRINT ─────── */
/* Honoured from the OS and from the in-app setting. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
/* The countdown ring and the breathing orb still need to move — they are the
information, not decoration. They just do it without easing. */
body.reduce-motion .ring__prog { transition: stroke-dashoffset 980ms linear !important; }
body.reduce-motion .orb__core { transition: transform 1s linear !important; }
@media print {
.nav, .scrim, .toast, .runner, .onboard { display: none !important; }
body::before { display: none; }
}
/* ═════════════════════════════════════════════════ 20. VITAL CORE ═════════
Three arc segments of one ring — Energy, Body, Mind. Plain SVG with CSS
transitions: no canvas and nothing animating while the screen is idle, so
it stays cheap on a phone and on a car browser.
======================================================================== */
.core {
position: relative;
width: 168px;
aspect-ratio: 1;
margin: 0 auto;
}
.core--sm { width: 116px; }
.core--md { width: 152px; }
.core--lg { width: 190px; }
.core__svg { width: 100%; height: 100%; transform: rotate(0deg); }
.core__seg {
fill: none;
stroke: var(--surface-3);
stroke-width: 7;
stroke-linecap: round;
transition: stroke var(--t-slow) var(--ease-out),
stroke-width var(--t) var(--ease-out);
}
.core__seg.is-filled {
stroke: var(--accent);
stroke-width: 9;
}
/* The state tints the whole ring once the Pulse resolves. */
.core--state.is-restore .core__seg.is-filled { stroke: var(--st-restore); }
.core--state.is-recharge .core__seg.is-filled { stroke: var(--st-recharge); }
.core--state.is-steady .core__seg.is-filled { stroke: var(--st-steady); }
.core--state.is-ready .core__seg.is-filled { stroke: var(--st-ready); }
.core--state.is-unwind .core__seg.is-filled { stroke: var(--st-unwind); }
.core__center {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
padding: 18%;
}
.core__step {
font-size: 26px;
font-weight: 720;
letter-spacing: -0.03em;
line-height: 1;
color: var(--text);
}
.core__step small {
display: block;
font-size: 10px;
font-weight: 650;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-dim);
margin-top: 5px;
}
.core__state {
font-size: clamp(15px, 4.4vw, 19px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--text);
}
.core__hint { color: var(--accent); }
.core__hint .icon { width: 26px; height: 26px; }
.core__labels {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 12px;
}
.core__label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-dim);
transition: color var(--t) var(--ease);
}
.core__label.is-filled { color: var(--accent); }
/* A single soft breath when a segment fills. Removed under reduced motion by
the global rule in section 19. */
@keyframes core-fill {
0% { stroke-width: 7; }
60% { stroke-width: 11; }
100% { stroke-width: 9; }
}
.core__seg.is-filled { animation: core-fill 520ms var(--ease-out) 1; }
/* ═══════════════════════════════════════ 21. VITAL PULSE & REVEAL ═════════ */
.pulse { padding-top: 6px; }
.pulse__progress {
display: flex;
gap: 6px;
justify-content: center;
margin-bottom: 22px;
}
.pulse__pip {
width: 40px;
height: 4px;
border-radius: 2px;
background: var(--surface-3);
transition: background var(--t) var(--ease);
}
.pulse__pip.is-done { background: var(--accent); }
.pulse__pip.is-now { background: var(--accent-bright); }
.pulse__core { margin-bottom: 20px; }
.pulse__head { text-align: center; margin-bottom: 20px; }
.pulse__q {
font-size: clamp(22px, 6vw, 27px);
font-weight: 700;
letter-spacing: -0.022em;
line-height: 1.18;
margin-top: 4px;
}
.pulse-opts { display: flex; flex-direction: column; gap: 10px; }
.pulse-opt {
appearance: none;
min-height: 66px;
width: 100%;
padding: 14px 18px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: linear-gradient(180deg, var(--surface-hi), transparent 62%), var(--surface);
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
box-shadow: var(--shadow-card);
transition: border-color var(--t-fast) var(--ease),
background-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.pulse-opt:hover { border-color: var(--line); }
.pulse-opt:active { transform: scale(0.99); }
.pulse-opt.is-on {
border-color: var(--accent-line);
background: linear-gradient(180deg, var(--accent-soft), transparent 78%), var(--surface);
}
.pulse-opt__label { font-size: 16.5px; font-weight: 660; letter-spacing: -0.015em; }
.pulse-opt__blurb { font-size: 12.5px; color: var(--muted-dim); }
.pulse-opt.is-on .pulse-opt__label { color: var(--accent-bright); }
.pulse__foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 18px;
}
/* ── The reveal ─────────────────────────────────────────────────────────── */
.reveal { padding-top: 6px; text-align: center; }
.reveal__core { margin-bottom: 18px; }
.reveal__lead {
font-size: 16px;
line-height: 1.55;
max-width: 34ch;
margin: 0 auto;
}
.reveal__nudge {
margin-top: 10px;
font-size: 13.5px;
color: var(--muted-dim);
}
.reveal__why {
appearance: none;
border: 0;
background: none;
color: var(--accent);
font: inherit;
font-size: 13px;
font-weight: 650;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 8px;
margin-top: 6px;
cursor: pointer;
}
.reveal__why:hover { text-decoration: underline; }
.reveal__skipped {
margin-top: 10px;
font-size: 12.5px;
color: var(--muted-dim);
}
.reveal__context { margin-top: 20px; text-align: left; }
.reveal__score { margin-top: 18px; }
.reveal__actions { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.reveal .disclaimer-inline { margin-top: 22px; text-align: left; }
.pulse-sums {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 8px;
margin-top: 20px;
}
.pulse-sum {
border: 1px solid var(--line-soft);
border-radius: var(--r-sm);
background: var(--surface-2);
padding: 11px 8px;
min-width: 0;
}
.pulse-sum__icon { color: var(--muted); margin: 0 auto 6px; display: block; }
.pulse-sum__icon .icon { margin: 0 auto; }
.pulse-sum__val {
display: block;
font-size: 12.5px;
font-weight: 680;
line-height: 1.25;
overflow-wrap: anywhere;
}
.pulse-sum__label {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-dim);
margin-top: 3px;
}
/* ── "Add more context" ─────────────────────────────────────────────────── */
.disclose {
appearance: none;
width: 100%;
min-height: 56px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 10px;
border: 1px dashed var(--line);
border-radius: var(--r-md);
background: none;
color: var(--text);
font: inherit;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.disclose:hover { border-color: var(--line-strong); background: var(--surface-hi); }
.disclose__label { font-size: 14.5px; font-weight: 640; }
.disclose__meta { margin-left: auto; font-size: 12.5px; color: var(--muted-dim); }
.disclose .icon { color: var(--muted-dim); }
.ctx {
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--surface);
padding: 16px;
}
.ctx__head { display: flex; align-items: center; justify-content: space-between; }
.ctx__note { font-size: 12.5px; color: var(--muted-dim); margin: 8px 0 16px; }
.ctx-row + .ctx-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.ctx-row__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ctx-row__icon { color: var(--accent); flex: 0 0 auto; }
.ctx-row__label { font-size: 14px; font-weight: 620; }
.ctx-row__clear {
appearance: none;
margin-left: auto;
border: 0;
background: none;
color: var(--muted-dim);
font: inherit;
font-size: 12px;
font-weight: 600;
min-height: 44px;
padding: 0 4px;
cursor: pointer;
flex: 0 0 auto;
}
.ctx-row__clear:hover { color: var(--text); }
.ctx-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ctx-opt {
appearance: none;
min-height: 48px;
padding: 8px 4px;
border: 1px solid var(--line-soft);
border-radius: var(--r-xs);
background: var(--surface-2);
color: var(--muted);
font: inherit;
font-size: 11.5px;
font-weight: 620;
line-height: 1.2;
cursor: pointer;
transition: all var(--t-fast) var(--ease);
}
.ctx-opt:hover { border-color: var(--line); color: var(--text); }
.ctx-opt.is-on {
background: var(--accent-soft);
border-color: var(--accent-line);
color: var(--accent-bright);
}
/* ── The optional score row ─────────────────────────────────────────────── */
.scorerow {
appearance: none;
width: 100%;
display: flex;
align-items: center;
gap: 14px;
min-height: 60px;
padding: 12px 16px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--surface-2);
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease);
}
.scorerow:hover { border-color: var(--line); }
.scorerow__num {
font-size: 24px;
font-weight: 720;
letter-spacing: -0.03em;
color: var(--accent);
flex: 0 0 auto;
min-width: 2.2ch;
text-align: center;
}
.scorerow__body { flex: 1 1 auto; min-width: 0; }
.scorerow__band { display: block; font-size: 14px; font-weight: 650; }
.scorerow__meta { display: block; font-size: 11.5px; color: var(--muted-dim); margin-top: 2px; }
.scorerow .icon { color: var(--muted-dim); flex: 0 0 auto; }
/* ══════════════════════ 22. TODAY HERO, QUICK RELIEF, FAVORITES ══════════ */
.hero { text-align: center; }
.hero__core { margin-bottom: 16px; }
.hero__q {
font-size: clamp(19px, 5.2vw, 22px);
font-weight: 690;
letter-spacing: -0.02em;
line-height: 1.25;
}
.hero__sub { margin-top: 8px; font-size: 14px; color: var(--muted); }
.hero__welcome {
margin-top: 12px;
font-size: 13.5px;
color: var(--accent-bright);
line-height: 1.5;
}
.hero .btn { margin-top: 18px; }
.hero__lead {
font-size: 15.5px;
line-height: 1.55;
color: var(--text);
max-width: 34ch;
margin: 0 auto;
}
.hero__row {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.hero__link {
appearance: none;
border: 0;
background: none;
color: var(--accent);
font: inherit;
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 10px;
cursor: pointer;
}
.hero__link:hover { text-decoration: underline; }
.hero__score { margin-top: 14px; text-align: left; }
/* The state tints the hero's own border, very lightly. */
.hero--state.is-restore { border-color: rgba(154, 166, 214, 0.28); }
.hero--state.is-recharge { border-color: rgba(242, 183, 203, 0.28); }
.hero--state.is-steady { border-color: var(--accent-line); }
.hero--state.is-ready { border-color: rgba(217, 173, 115, 0.30); }
.hero--state.is-unwind { border-color: rgba(171, 160, 198, 0.30); }
.revisit {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--line-soft);
}
.revisit__q { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.revisit__row {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-top: 12px;
}
/* ── Section heads with a note or a link ────────────────────────────────── */
.shelf__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin: 28px 0 11px;
}
.shelf__note { font-size: 11.5px; color: var(--muted-dim); }
.shelf__link {
appearance: none;
border: 0;
background: none;
color: var(--accent);
font: inherit;
font-size: 12.5px;
font-weight: 650;
min-height: 44px;
padding: 0 2px;
cursor: pointer;
}
.shelf__link:hover { text-decoration: underline; }
/* ── Quick Relief shelf: five immediate tools ──────────────────────────── */
.relief {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 7px;
}
.relief__tile {
appearance: none;
min-height: 84px;
padding: 12px 4px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: linear-gradient(180deg, var(--surface-hi), transparent 60%), var(--surface);
color: var(--text);
font: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
box-shadow: var(--shadow-card);
transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.relief__tile:hover { border-color: var(--accent-line); }
.relief__tile:active { transform: scale(0.96); }
.relief__icon { color: var(--accent); }
.relief__icon .icon { width: 22px; height: 22px; }
.relief__label {
font-size: 11px;
font-weight: 640;
letter-spacing: -0.005em;
text-align: center;
line-height: 1.2;
}
/* ── Favorites ──────────────────────────────────────────────────────────── */
.fav-list { display: flex; flex-direction: column; gap: 8px; }
.fav {
appearance: none;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 56px;
padding: 12px 14px;
border: 1px solid var(--line-soft);
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease);
}
.fav:hover { border-color: var(--line-strong); }
.fav--manage { cursor: default; }
.fav__icon { color: var(--accent); flex: 0 0 auto; }
.fav__label { display: block; font-size: 14px; font-weight: 620; }
.fav__go { color: var(--muted-dim); flex: 0 0 auto; }
.fav-btn {
appearance: none;
width: 44px; height: 44px;
flex: 0 0 auto;
border: 0;
border-radius: 50%;
background: none;
color: var(--muted-dim);
display: grid;
place-items: center;
cursor: pointer;
transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.fav-btn:hover { color: var(--muted); background: var(--surface-hi); }
.fav-btn.is-on { color: var(--gold); }
.fav-btn.is-on .icon { fill: var(--gold-soft); }
.icon-btn.is-on { color: var(--gold); }
.icon-btn.is-on .icon { fill: var(--gold-soft); }
/* ── The weekly glance on Today ────────────────────────────────────────── */
.glance {
margin-top: 28px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--surface-2);
padding: 16px;
}
.glance__label {
font-size: 10.5px;
font-weight: 750;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted-dim);
}
.glance__text { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.glance__link {
appearance: none;
border: 0;
background: none;
color: var(--accent);
font: inherit;
font-size: 12.5px;
font-weight: 650;
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 44px;
padding: 0;
margin-top: 4px;
cursor: pointer;
}
.glance__link:hover { text-decoration: underline; }
.glance__link .icon { width: 15px; height: 15px; }
/* ── One contextual ecosystem suggestion ───────────────────────────────── */
.crosslink {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
padding: 13px 15px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--surface-2);
color: var(--text);
text-decoration: none;
transition: border-color var(--t-fast) var(--ease);
}
.crosslink:hover { border-color: var(--line); }
.crosslink__icon.mark { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; }
.crosslink__name { display: block; font-size: 13.5px; font-weight: 660; }
.crosslink__line { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.crosslink__go { color: var(--muted-dim); flex: 0 0 auto; width: 17px; height: 17px; }
/* ── The Vital Move card's "why" link ──────────────────────────────────── */
.action-card__reason {
appearance: none;
width: 100%;
margin-top: 12px;
padding: 11px 13px;
display: flex;
align-items: center;
gap: 9px;
border: 1px solid var(--line-soft);
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--muted);
font: inherit;
font-size: 12.5px;
font-weight: 620;
text-align: left;
cursor: pointer;
min-height: 44px;
}
.action-card__reason:hover { border-color: var(--line); color: var(--text); }
.action-card__reason .icon { color: var(--accent); flex: 0 0 auto; }
/* ══════════════════════════ 23. STRETCH, CHOICES, FEEDBACK ═══════════════ */
.choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.choice {
appearance: none;
min-height: 82px;
padding: 14px 8px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--surface-2);
color: var(--text);
font: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.choice:hover { border-color: var(--accent-line); }
.choice:active { transform: scale(0.97); }
.choice.is-default { border-color: var(--accent-line); background: var(--accent-soft); }
.choice__big { font-size: 15px; font-weight: 680; letter-spacing: -0.015em; text-align: center; }
.choice__note { font-size: 11px; color: var(--muted-dim); text-align: center; line-height: 1.25; }
.area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.area-tile {
appearance: none;
min-height: 92px;
padding: 14px 10px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: linear-gradient(180deg, var(--surface-hi), transparent 60%), var(--surface);
color: var(--text);
font: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.area-tile:hover { border-color: var(--accent-line); }
.area-tile:active { transform: scale(0.97); }
.area-tile__icon { color: var(--accent); }
.area-tile__icon .icon { width: 26px; height: 26px; }
.area-tile__label { font-size: 12.5px; font-weight: 640; text-align: center; line-height: 1.25; }
/* ── Runner extras ─────────────────────────────────────────────────────── */
.runner__meta {
font-size: 11.5px;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-dim);
text-align: center;
}
.runner__count {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
}
.runner__total { font-size: 12.5px; color: var(--muted-dim); }
.runner__safety {
font-size: 11.5px;
color: var(--muted-dim);
line-height: 1.45;
max-width: 34ch;
text-align: center;
}
/* Rest Eyes deliberately dims Mighty Vital's own interface. It cannot change
the device's brightness, and the copy says so. */
.runner--dim { background: #010507; }
.runner--dim .runner__inner { opacity: 0.42; transition: opacity 1.6s var(--ease-out); }
.runner--dim:hover .runner__inner,
.runner--dim:focus-within .runner__inner { opacity: 0.86; }
.runner__stage--dim { gap: 20px; }
.runner__h--quiet { font-weight: 600; color: var(--muted); }
.runner__cue--lg { font-size: 17px; max-width: 24ch; }
body.is-dimmed { background: #010507; }
/* ── Post-action feedback ──────────────────────────────────────────────── */
.feedback { margin-top: 8px; }
.feedback__q { font-size: 15px; font-weight: 650; }
.feedback__row {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-top: 14px;
}
.feedback__note { margin-top: 12px; font-size: 11.5px; color: var(--muted-dim); }
/* ── Journey: state chips and usage rows ──────────────────────────────── */
.week__cell {
width: 100%;
aspect-ratio: 1;
max-height: 44px;
border-radius: var(--r-xs);
background: var(--surface-2);
border: 1px solid var(--line-soft);
display: grid;
place-items: center;
position: relative;
}
.week__day.is-empty .week__cell { border-style: dashed; }
.week__day.is-today .week__cell { border-color: var(--accent-line); }
.week__state {
font-size: 10.5px;
font-weight: 750;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.week__state.is-restore { color: var(--st-restore); }
.week__state.is-recharge { color: var(--st-recharge); }
.week__state.is-steady { color: var(--st-steady); }
.week__state.is-ready { color: var(--st-ready); }
.week__state.is-unwind { color: var(--st-unwind); }
.week__state.is-legacy { color: var(--muted); }
.usage { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.usage + .usage { border-top: 1px solid var(--line-soft); }
.usage__label { font-size: 12.5px; color: var(--muted-dim); flex: 0 0 auto; max-width: 48%; }
.usage__value { font-size: 13.5px; font-weight: 640; margin-left: auto; text-align: right; }
/* ── Onboarding extras ────────────────────────────────────────────────── */
.onboard__core { margin-top: 26px; }
.onboard__count {
margin-top: 14px;
font-size: 12px;
font-weight: 650;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
.onboard .pick-list { margin-top: 14px; }
.sheet--wide { max-width: 560px; }
/* ══════════════════════ 24. BRAND LOCKUP & MIGHTY FOOTER ═════════════════
Adapted from Mighty Drive so the family shares one structural pattern.
Hidden on phones, where the nav is a bottom bar and these destinations live
inside Settings instead.
======================================================================== */
.nav-brand { display: none; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 22px; }
/* The canonical Mighty Vital artwork already carries its own frame and glow
(see assets/logos/mighty/), so the mark is just a clipped box — no
gradient plate layered on top of it. */
.nav-brand__mark.mark {
width: 42px; height: 42px;
border-radius: 13px;
box-shadow: 0 6px 20px rgba(232, 90, 135, 0.24);
}
.nav-brand__text {
display: block;
text-align: center;
line-height: 1.15;
letter-spacing: 0.15em;
font-size: 10px;
}
.nav-brand__text b { display: block; color: var(--muted); font-weight: 700; }
.nav-brand__text i { display: block; font-style: normal; font-weight: 800; color: var(--text); }
.nav-brand__tagline {
display: block;
font-size: 11px;
color: var(--muted-dim);
text-align: center;
letter-spacing: 0;
}
.mightyfoot {
display: none;
margin-top: auto;
width: 100%;
padding-top: 14px;
border-top: 1px solid var(--line);
/* The divider fades at the edges rather than cutting straight across. */
border-image: linear-gradient(90deg, transparent, var(--line-strong) 22%,
var(--line-strong) 78%, transparent) 1;
}
.mightyfoot__link {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 4px 6px;
border-radius: 11px;
font-size: 12px;
font-weight: 620;
color: var(--muted-dim);
text-decoration: none;
transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.mightyfoot__link:hover { color: var(--text); background: var(--surface-hi); }
.mightyfoot__link.is-active { color: var(--accent); background: var(--accent-soft); }
.mightyfoot__safety {
margin-top: 8px;
/* Drive's footer runs a little smaller; Vital's brief asks for nothing
unreadably small, so this is a step up from the source pattern. */
font-size: 10.5px;
line-height: 1.45;
color: var(--muted-dim);
text-align: center;
opacity: 0.9;
}
/* One short wellness line, a thin divider, then the signature — the same
order Mighty Money and Mighty Drive use for their own footer. */
.mightyfoot__rule {
width: 100%;
height: 0;
margin: 10px 0 0;
border: 0;
border-top: 1px solid var(--line-soft);
border-image: linear-gradient(90deg, transparent, var(--line-strong) 30%,
var(--line-strong) 70%, transparent) 1;
}
.mightyfoot__sig {
margin-top: 8px;
line-height: 1.6;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted-dim);
text-align: center;
opacity: 0.8;
}
/* ═════════════════════════════════════════ 25. MIGHTY ECOSYSTEM ══════════ */
/* The grouped presentation, matching Mighty Money's ecosystem page exactly:
four categories — Start and finish, Feel better connect more, See the
bigger picture, Access the Ecosystem — every card the same size and
weight. Mighty Vital lives inside its own category like every other
product; there is no separate "Where you are now" section and no flat
directory. Life OS renders at the same weight as its neighbours — no hero
card, which is what produced the duplicate in 1.1.0. */
/* ── Canonical Mighty artwork ─────────────────────────────────────────────
The supplied icons carry their own dark rounded frame, so a mark is just a
clipped box: no gradient plate, no recolouring. `.mark__fb` is the
readable initials fallback if an image ever fails to load — see the
boot-time error listener in app.js. */
.mark {
flex: 0 0 auto;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
}
.mark__img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.mark.is-fallback { background: var(--accent-soft); border: 1px solid var(--accent-line); }
.mark__fb { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--accent); }
.ecogroup { margin-top: 26px; }
.ecogroup__head { margin-bottom: 4px; }
.ecogroup__label {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
}
.ecogroup__line {
margin: 5px 0 0;
font-size: 12.5px;
color: var(--muted-dim);
line-height: 1.45;
}
.ecogroup__apps {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.ecoapp {
display: flex;
align-items: center;
gap: 13px;
padding: 13px 15px;
border: 1px solid var(--line-soft);
border-radius: var(--r-md);
background: var(--surface);
color: var(--text);
text-decoration: none;
min-height: 68px; /* comfortably past the 44px floor */
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
a.ecoapp:hover { border-color: var(--line); background: var(--surface-2); }
.ecoapp .eco-mark { width: 42px; height: 42px; border-radius: 12px; }
.ecoapp .eco-mark .mark__fb { font-size: 12.5px; }
.ecoapp__text { min-width: 0; }
.ecoapp__name { display: block; font-size: 14.5px; font-weight: 660; }
.ecoapp__desc { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.ecoapp__go { margin-left: auto; padding-left: 8px; color: var(--muted-dim); flex: 0 0 auto; font-size: 15px; }
a.ecoapp:hover .ecoapp__go { color: var(--muted); }
/* The current app's own row — Mighty Vital, inside "Feel better, connect
more" at its natural card size, tinted with Vital's own magenta/rose
instead of a neutral surface so it reads as a different kind of thing
without leaving its category or growing a separate section. Not a link:
a with aria-current="page", no hover state, no go arrow. */
.ecoapp--self {
border-style: dashed;
border-color: var(--accent-line);
background:
linear-gradient(135deg, rgba(246, 203, 222, 0.13), transparent 62%),
linear-gradient(180deg, var(--accent-soft), transparent 84%),
var(--surface);
}
.ecoapp__here {
margin-left: auto;
padding-left: 10px;
white-space: nowrap;
flex: none;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
opacity: 0.95;
}
/* ── Ecosystem closing CTAs ────────────────────────────────────────────── */
.eco-cta { margin-top: 30px; }
.eco-cta .btn { gap: 6px; }
.eco-cta__line { text-align: center; margin-top: 6px; }
.fine-print--quiet { margin-top: 18px; opacity: 0.85; }
/* ══════════════════════════ v1.1 RESPONSIVE ADJUSTMENTS ═════════════════ */
/* Very small phones: five relief tiles is the tightest row in the app. */
@media (max-width: 360px) {
.relief { gap: 5px; }
.relief__label { font-size: 10px; }
.relief__icon .icon { width: 20px; height: 20px; }
.choice-row { gap: 7px; }
.ctx-opts { gap: 4px; }
.ctx-opt { font-size: 10.5px; }
.core__labels { gap: 10px; }
.core__label { font-size: 9.5px; }
}
@media (min-width: 600px) {
.area-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pulse-opts { max-width: 460px; margin: 0 auto; }
}
@media (min-width: 860px) {
.area-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Two-column card grid on desktop, matching the Mighty Money ecosystem
page — a single column stays on mobile (the base rule above). 240px is
narrower than Money's own 288px minimum because it has to fit Vital's
narrower --shell (516–640px in this range, versus Money's 680px+), not
because the cards carry less — each still shows the icon, name and
one-line role at full size. */
.ecogroup__apps {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
/* The sidebar's brand lockup and shared Mighty footer appear only here.
These must sit after the base `display: none` in section 24, which is why
they live at the end of the file rather than in section 18. */
.nav-brand { display: flex; order: 0; }
.mightyfoot { display: block; order: 3; }
}
/* ═══════════════════════ 26. TODAY INTERFACE POLISH ═══════════════════════
The phone gets its own centered identity; the rail carries that identity
on desktop. The Pulse remains the first action in every layout. */
.today-brand { display: none; }
.today-main { min-width: 0; }
#screen-today .greet { position: relative; }
.today-quicklog {
position: absolute; top: 0; right: 0;
display: grid; place-items: center;
width: 44px; height: 44px;
border: 1px solid var(--accent-line); border-radius: 50%;
background: var(--surface-2); color: var(--accent-bright);
cursor: pointer;
}
.today-quicklog:hover { background: var(--accent-soft); }
.today-quicklog .icon { width: 20px; height: 20px; }
.onboard__identity { text-align: center; }
.onboard__mark.mark {
width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 19px;
}
.onboard__identity .lockup { align-items: center; }
.onboard__identity .lockup__parent { letter-spacing: 0.3em; }
.onboard__identity .lockup__tagline { margin-top: 10px; }
@media (max-width: 859px) {
#screen-today .greet { text-align: center; margin: 2px 0 16px; }
.today-brand {
display: flex; flex-direction: column; align-items: center; gap: 9px;
margin-bottom: 18px;
}
.today-brand img { width: 54px; height: 54px; border-radius: 16px; object-fit: cover; }
.today-brand span {
font-size: clamp(22px, 6vw, 27px); line-height: 1.15;
font-weight: 800; letter-spacing: 0.12em;
}
.today-brand em { font-style: normal; color: var(--accent); }
#screen-today .greet__hello { font-size: 18px; font-weight: 650; letter-spacing: 0; }
#screen-today .greet__date { margin-top: 4px; font-size: 11.5px; }
#screen-today .hero.card--accent { padding: 16px 18px 18px; }
#screen-today .hero.card--accent .core--md { width: 116px; }
#screen-today .hero.card--accent .hero__core { margin-bottom: 11px; }
#screen-today .hero.card--accent .core__labels { margin-top: 7px; }
#screen-today .hero.card--accent .btn { margin-top: 15px; }
}
@media (max-width: 859px) and (max-height: 700px) {
#screen-today .today-brand { flex-direction: row; justify-content: center; margin-bottom: 8px; }
#screen-today .today-brand img { width: 38px; height: 38px; border-radius: 12px; }
#screen-today .today-brand span { font-size: 18px; }
#screen-today .greet { margin-bottom: 10px; }
}
@media (min-width: 860px) {
:root { --rail: 248px; }
.nav-brand {
display: grid; grid-template-columns: 44px minmax(0, 1fr);
column-gap: 11px; row-gap: 3px; align-items: center;
width: 100%; margin-bottom: 20px;
}
.nav-brand__mark.mark { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; }
.nav-brand__text {
display: flex; align-items: baseline; gap: 5px;
grid-column: 2; grid-row: 1; text-align: left;
font-size: 14px; letter-spacing: 0.08em; white-space: nowrap;
}
.nav-brand__text b, .nav-brand__text i { display: inline; }
.nav-brand__tagline { grid-column: 2; grid-row: 2; text-align: left; font-size: 10.5px; }
}
@media (min-width: 860px) and (max-width: 1099px) {
#screen-today .shell {
max-width: min(680px, calc(100vw - var(--rail) - 48px));
margin-left: auto; margin-right: auto;
}
}
@media (min-width: 1100px) {
#screen-today .shell {
max-width: min(960px, calc(100vw - var(--rail) - 48px));
margin-left: auto; margin-right: auto;
}
#screen-today .today-main {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
gap: 10px 20px; align-items: start;
}
#screen-today .today-main > .hero { grid-column: 1; grid-row: 1 / span 2; }
#screen-today .today-main > .section-label {
grid-column: 2; grid-row: 1; margin: 0 0 1px;
}
#screen-today .today-main > .action-card { grid-column: 2; grid-row: 2; }
}
@media (min-width: 860px) and (max-height: 700px) {
#screen-today.screen { padding-top: 22px; }
#screen-today .greet { margin-bottom: 13px; }
#screen-today .hero.card--accent { padding: 15px 18px; }
#screen-today .hero.card--accent .core--md { width: 116px; }
#screen-today .hero.card--accent .hero__core { margin-bottom: 10px; }
#screen-today .hero.card--accent .core__labels { margin-top: 7px; }
#screen-today .hero.card--accent .btn { margin-top: 13px; }
}
/* ── 1.1.5 — first-run welcome ─────────────────────────────────────────────
The welcome centres its copy under the centred identity, and short
landscape screens (a parked car at 1280×600, a 720p laptop) keep both
actions above the fold. */
.onboard__steps:empty { display: none; }
.onboard__step--welcome .onboard__body { text-align: center; }
.onboard__step--welcome .onboard__lede { margin-left: auto; margin-right: auto; }
@media (orientation: landscape) and (max-height: 720px) {
.onboard__inner { padding-top: calc(env(safe-area-inset-top, 0px) + 16px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
.onboard__mark.mark { width: 48px; height: 48px; margin-bottom: 10px; border-radius: 15px; }
.onboard__body { margin-top: 12px; }
.onboard__core { margin-top: 14px; }
.onboard__foot { margin-top: 16px; }
}
@media (orientation: landscape) and (max-height: 640px) {
.onboard__step--welcome .onboard__core { display: none; }
}
/* A centred toast shrink-wraps to half the screen and breaks short messages
onto two lines; let it size to its text up to the max-width above. */
.toast { width: max-content; }
/* Short wide screens (a parked car at 1280×600): the four Pulse answers sit
two by two so every answer and Skip fit without scrolling. */
@media (min-width: 860px) and (max-height: 760px) and (orientation: landscape) {
.pulse-opts { display: grid; grid-template-columns: 1fr 1fr; max-width: 640px; margin: 0 auto; }
}
/* The welcome uses the same one-line MIGHTY VITAL wordmark as Today. */
.onboard__wordmark { margin: 0; font-size: clamp(22px, 6vw, 27px); line-height: 1.15; font-weight: 800; letter-spacing: 0.12em; color: var(--text); white-space: nowrap; }
.onboard__wordmark em { font-style: normal; color: var(--accent); }