version it replaces. Use this when you want native button semantics (Enter/Space, role, focus-visible) on a surface whose visual treatment lives in another class. Added 2026-06-05 with the Tier 3 button-vs-div conversion sweep — see pages.js for the 12 row-shaped surfaces that compose it. Companion class supplies the visible look. */ .btn-reset { /* Strip browser defaults */ border: 0; background: transparent; /* Inherit text context — the companion class can override if needed */ color: inherit; font: inherit; /* Native The element must be position:relative-able (the layer is an ::after overlay). Set --state-radius to match the host's radius so the veil's corners align; defaults to inherit-friendly 0. INK (required decision, per the Wave-0 convention in 00-settings): NEUTRAL surfaces (navy rows, cards, the Sound row) MUST set --state-ink:255,255,255 — a sage veil on navy reads as a color cast. Leave the sage default ONLY on genuinely-sage/accent surfaces. PRESS SCALE (optional companion): the veil alone now presses at 0.20 (Wave-0), enough for neutral rows. A host that also wants the M3-style depression adds, on its own :active: transform: scale(var(--state-press-scale)); transition: transform var(--dur-tap) var(--ease-ios); The veil and the scale are independent — use either or both. ─────────────────────────────────────────────────────────────── */ .state-target { position: relative; /* host opts a corner radius in so the overlay matches; harmless at 0 */ --state-radius: 0px; } /* The veil itself — a single compositing layer, opacity-animated. Pointer-events:none so it never eats the host's clicks. Uses the in-band --dur-state token + the workhorse ease, matching the rest of the interaction motion system. */ .state-target::after { content: ""; position: absolute; inset: 0; border-radius: var(--state-radius, 0px); background: rgb(var(--state-ink)); opacity: 0; pointer-events: none; transition: opacity var(--dur-state) var(--ease-standard); /* Sits BEHIND the host's own content (text/icons render at the default level 0) but in front of the parent canvas. This is why content stays fully legible while the veil tints the surface. Hosts with an opaque fill of their own should instead give content an explicit z-index; for transparent/translucent surfaces (the common case) --z-behind is correct and needs nothing from the host. */ z-index: var(--z-behind); } /* Resting → hover → focus → press. Each step reads its own token, so re-tuning the whole app's feedback intensity is a one-line change. */ @media (hover: hover) { .state-target:hover::after { opacity: var(--state-hover); } } .state-target:focus-visible::after { opacity: var(--state-focus); } .state-target:active::after { opacity: var(--state-press); } .state-target[data-dragging]::after { opacity: var(--state-drag); } /* Keyboard focus ring — aligned with the existing form-field convention in 99-utilities.css (2px sage outline, 2px offset, 3px sage-soft ring) so focus looks identical everywhere. */ .state-target:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; } /* DISABLED — scoped to .state-target only. Two-opacity model: content (the element's own text/icon) knocks back to the legibility floor; an inert surface veil is suppressed. Covers both the native :disabled attribute and the .is-disabled class convention already used elsewhere in the app, so either works on an opted-in element. */ .state-target:disabled, .state-target.is-disabled { opacity: var(--state-disabled-content); cursor: not-allowed; pointer-events: none; /* no hover/press feedback while inert */ } .state-target:disabled::after, .state-target.is-disabled::after { opacity: 0; } /* Respect reduced motion — the veil still appears, it just doesn't animate. Consistent with the app-wide reduced-motion policy. */ @media (prefers-reduced-motion: reduce) { .state-target::after { transition: none; } } /* =========================================================== breathing.css COMPONENT · BREATHING — orb stage, glow rings, phase label, timer chrome, cycle counter. ── Part of the Prana modular CSS. Edit partials, never the concatenated styles.css. Rebuild with: python3 build-css.py =========================================================== */ /* Orb stage: positions the orb and its three concentric glow rings. */ .orb-stage { position: relative; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; } /* Rings breathe WITH the phase — a peripheral breathing guide, not an ambient loop. Driven by the SAME --orb-*-dur the orb uses (mirrored onto .orb-stage so the rings, which are siblings of the orb, can read them; the phase class is patched onto .orb-stage alongside the orb in updateOrbAnimation). Inhale: bloom outward + brighten. Exhale: draw in + fade. HOLD / retention: FREEZE, held open + bright (mirrors the orb anchoring the eyes still). PUMP: hold steady (a calm anchor, not a frantic ripple over ~0.6s pumps). Reduced-motion is covered by the global 0.001ms animation kill-switch. */ @keyframes ring-inhale { from { transform: scale(.92); opacity: calc(var(--ring-opacity, .35) * .28); } to { transform: scale(1.05); opacity: var(--ring-opacity, .35); } } @keyframes ring-exhale { from { transform: scale(1.05); opacity: var(--ring-opacity, .35); } to { transform: scale(.92); opacity: calc(var(--ring-opacity, .35) * .28); } } .glow-ring { position: absolute; border-radius: 50%; border: 1px solid var(--orb-color); pointer-events: none; transition: border-color .5s ease; /* Settled baseline until a phase class drives it (first paint / between sessions). */ transform: scale(1); opacity: var(--ring-opacity, .35); will-change: transform, opacity; } /* Innermost ring is brightest. --ring-opacity is each ring's baseline; the keyframes ramp toward/away from it so the whole field breathes at three depths. */ .glow-ring.r1 { width: 320px; height: 320px; --ring-opacity: .55; } .glow-ring.r2 { width: 355px; height: 355px; --ring-opacity: .28; } .glow-ring.r3 { width: 390px; height: 390px; --ring-opacity: .12; } /* Phase-driven — class lives on .orb-stage (patched with the orb). */ .orb-stage.phase-INHALE .glow-ring { animation: ring-inhale var(--orb-inhale-dur, 4s) ease-in-out forwards; } .orb-stage.phase-EXHALE .glow-ring { animation: ring-exhale var(--orb-exhale-dur, 8s) ease-in-out forwards; } .orb-stage.phase-HOLD .glow-ring { animation: none; transform: scale(1.05); opacity: var(--ring-opacity, .35); } .orb-stage.phase-PUMP .glow-ring { animation: none; transform: scale(1); opacity: var(--ring-opacity, .35); } /* PAUSE / PRE-START FREEZE — hold the orb + rings at their CURRENT frame while the timer isn't running. Two callers add .is-frozen: pauseTimer (freeze mid-breath so resume CONTINUES instead of restarting at scale(.80) — the "orb + numerals shrink" jump on play/pause) and pgTimer's pre-start markup (the orb carries phase-INHALE, so without this it auto-plays its expand on mount and, animation:forwards, sits big — then the first play restarts it small: the "first inhale" snap-down jump). Stripped by updateOrbAnimation on play, so the animation runs from there. The phase classes are included ON PURPOSE: the .orb-inner.phase-INHALE/EXHALE animation SHORTHANDS reset animation-play-state to running, so this longhand must out-specify them (0,3,0 > 0,2,0) to win regardless of cascade order. HOLD/PUMP are animation:none, so there's nothing to freeze there. */ .orb-inner.phase-INHALE.is-frozen, .orb-inner.phase-EXHALE.is-frozen, .orb-stage.phase-INHALE.is-frozen .glow-ring, .orb-stage.phase-EXHALE.is-frozen .glow-ring { animation-play-state: paused; } /* The orb body itself: dark glass center, soft inner + outer glow tinted by --orb-color. Sits on top of the three rings. 2026-06-02 — children are now absolutely positioned so the BIG numeral (#t-num) always lands at the GEOMETRIC center of the orb, regardless of what sits below it. The previous flex layout centered the whole stack {numeral, unit, hint} as a group — which pushed the numeral above orb-center when the unit + hint were visible (most noticeable during RETENTION when all three render). Per user feedback "breath count — is it right in the center of the orb?" */ .orb-inner { position: relative; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(14,24,36,.95) 60%, transparent 100%); box-shadow: 0 0 60px rgba(var(--orb-color-rgb), .18) inset, 0 0 40px rgba(var(--orb-color-rgb), .10); transition: box-shadow .5s ease; } .orb-inner > #t-num { position: absolute; top: 50%; left: 50%; /* translateZ(0) promotes the numeral to its OWN compositing layer so a digit swap (textContent change) repaints in isolation. Without it, iOS Safari repaints the numeral on the orb's shared layer WHILE the orb is mid scale-animation (orb-inhale/orb-exhale) and leaves the previous digit ghosted behind the new one — "two digits overlapping" as the count ticks. backface-visibility:hidden kills the residual sub-pixel halo. Non-visual: position/size/scale are unchanged; this only isolates the repaint. */ transform: translate(-50%, -50%) translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; margin: 0; text-align: center; /* ONE numeral size for every technique + every mode — breath number, per-second countdown, and retention M:SS alike (2026-07-19). Moved off the old inline style (which set 60/88px dynamically) so it's token-based; the landscape / short-portrait media queries still resize it via their .countdown-numeral !important overrides. */ font-size: var(--fs-numeral-xl); /* 72px */ /* Regular, not Thin — a weight-200 hairline washed out at arm's length / in sunlight during a session (user 2026-08-04). 400 keeps the clean look but the digit stays legible at a glance. */ font-weight: 400; line-height: var(--lh-numeral-xl); color: var(--white); letter-spacing: -2px; } .orb-inner > #t-unit { /* Sits just below the numeral's optical baseline. 56px clears the 88px non-retention numeral's lower half (44) + a small gap; for the 60px retention numeral the gap reads slightly larger and that's fine — RETENTION already has the hint line below to re-balance the stack visually. */ position: absolute; top: calc(50% + 56px); left: 50%; transform: translateX(-50%); margin: 0; text-align: center; white-space: nowrap; } .orb-inner > #t-hint { position: absolute; top: calc(50% + 84px); left: 50%; transform: translateX(-50%); margin: 0; text-align: center; white-space: nowrap; } .orb-hint { font-size: var(--fs-micro); color: var(--orb-color); letter-spacing: 1.2px; min-height: 11px; transition: color var(--dur-page) ease; } /* 2026-06-02 — .orb-breath-line removed. Power Breath + Custom Session now render the BREATH NUMBER (just '4') in the big #t-num numeral itself (60px to match retention M:SS), so a separate small caption line above it would be redundant and visually noisy. The element used to live here; now there's nothing to style. */ /* Timer phase label (INHALE / EXHALE / HOLD / RETENTION) */ .timer-phase-label { margin: var(--s-5) 0 0; font-family: var(--font-body); font-size: var(--fs-h2); font-weight: 600; letter-spacing: 6px; /* text-indent == letter-spacing: uppercase tracking adds a trailing 6px after the last glyph, and text-align:center counts it, nudging the visible text LEFT of true center (~half the tracking). A matching leading indent balances it so the glyphs sit dead-center. (user spotted on RECOVERY HOLD / EXHALE) */ text-indent: 6px; text-transform: uppercase; line-height: 1; text-align: center; color: var(--orb-color); text-shadow: 0 0 18px rgba(var(--orb-color-rgb), .35); transition: color var(--dur-page) ease, text-shadow var(--dur-page) ease; } /* 2026-06-02 — phase label was relocated to the top slot inside .timer-progress (was below the orb). In that context the var(--s-5) top margin would push it down by ~22px, leaving an unwanted gap; pull it tight to the top-bar instead. */ .timer-progress .timer-phase-label { margin-top: 0; } /* The round counter moved INTO the orb area in place of the old phase label. Add the same top breathing room the phase label used to have so the counter sits where the eye expects. */ .timer-orb-area .timer-round { margin-top: var(--s-5); } /* Long-label variant used for Power Breath protocol phases — 'INHALE HOLD' (11), 'RECOVERY HOLD' (13), 'PREPARE FOR THE NEXT ROUND' (26). At the default h2 + 6px tracking these would overflow a phone viewport; the modifier shrinks the type and tightens the tracking while keeping the same amber color from --orb-color so the phase read stays consistent. JS toggles .is-protocol on #t-phase whenever S.protocolPhase is set. */ .timer-phase-label.is-protocol { font-size: var(--fs-md); /* lint-skip CAT-T4: per-state label size, not body */ letter-spacing: 2px; text-indent: 2px; /* balance the 2px trailing tracking (see base rule) */ } /* Timer chrome: technique caption + cycle text + play button */ /* The caption is absolutely centred (below), so its top-bar needs to be the positioning context. Scoped to .timer-screen so no other page's top-bar layout is touched. */ .timer-screen .top-bar { position: relative; } /* Technique caption in the session top-bar. The bar is a flex row with a 40px back button on the left and a wider "FINISH" pill on the right, so a caption left in normal flow gets shoved off-centre (it centres between the two unequal slots, not on the screen). We pin it to the true horizontal centre with absolute positioning so it sits on the SAME vertical axis as the breathing orb and the play button below — one strict centre line down the whole screen. pointer-events:none so it never intercepts taps meant for the buttons it overlaps. */ .timer-tech-caption { position: absolute; left: 50%; transform: translateX(-50%); max-width: 60%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; font-size: var(--fs-caption); /* lint-skip CAT-T2: uppercase tracked practice-screen title at 12px — not a .caption */ font-weight: 600; color: var(--text-2); /* cool muted grey — quiet chrome above the orb */ letter-spacing: 1.2px; text-transform: uppercase; } /* ── Timer-screen chrome — extracted from inline styles (pgTimer) ── Token-based so the design-token lints stay clean. Off-scale snaps: Finish-btn pad 9px→8px (--s-2), orb area pad 20px→22px (--s-5). */ /* Finish pill now uses the shared .session-finish-btn (03-primitives.css). */ /* Phase label centered in the band between the top bar and the orb (2026-06-10). Everything below the bar is absolutely positioned (orb at screen 50%, round counter + play btn bottom-anchored), so .timer-progress and .timer-orb-area are pure flow spacers — splitting them 1:4 lands the label in the visual gap above the orb, responsively (no magic px). */ .timer-progress { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s-1h) 0 0; } /* .timer-progress-label retired 2026-06-02 (SESSION PROGRESS eyebrow removed when the phase label took the top slot). */ .timer-round { font-family: var(--font-body); font-size: var(--fs-h2); font-weight: 600; } /* .timer-round-unit removed 2026-08-05 — the "LEFT" suffix after the X:XX session-time readout was dropped (user); the class is now unused. */ /* Round-progress pips — replaced the 'Round N / M' text (2026-06-22, built by constants.roundIndicatorHTML). One capsule per round: completed dim, the current one bright amber (the retention/hold accent, matches the HOLD label), upcoming faint. The active pip widens slightly so progress reads at a glance without any number. */ .round-pips { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); } .round-pip { width: 16px; height: 5px; border-radius: var(--r-pill); background: var(--text-3); opacity: .3; transition: opacity var(--dur-state) var(--ease-out-soft), width var(--dur-state) var(--ease-out-soft), background-color var(--dur-state) var(--ease-out-soft); } /* Completed rounds fill with the amber accent (recessive vs the current round); the active pip is full-strength + wider; upcoming stay faint grey. */ .round-pip--done { background: var(--amber); opacity: .55; } .round-pip--active { background: var(--amber); opacity: 1; width: 26px; } .round-pip--todo { background: var(--text-3); opacity: .3; } /* 2026-06-02 — orb area restructured so the ORB itself sits at the vertical center of the viewport (was sitting ~50px above center because the flex column centered the whole stack of {orb, cycle text, round counter, play button}). New layout: • .orb-stage is absolutely centered on the area's mid-axis. • Cycle text + round counter cascade directly below the orb (no floating gap — they hug the orb's bottom edge). • Play button is pinned near the bottom of the screen, out of the orb's balance equation. This gives the user the "orb at screen center" they asked for without leaving an empty band of space above it. */ /* .timer-orb-area stays flex: 1 (fills the column space) but is NOT set to position: relative — we want absolute children of it to resolve against the .screen wrapper (position: absolute from 01-base.css), so 50% means viewport-center, not area-center. */ .timer-orb-area { flex: 4; /* see .timer-progress — biases the flow split so the phase label lands in the gap above the orb, not at screen-center */ } /* Orb anchored to the SCREEN center, not the area center. */ .timer-screen .orb-stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Cycle text now stacks just ABOVE the round / time-left readout (both bottom- anchored) instead of orb-anchored. Orb-anchored (top:50% + 140px) overlapped the bottom-anchored .timer-round on shorter viewports — "cycle and time-left on one line". Bottom-stacking guarantees they never collide on any screen. bottom = .timer-round bottom + its line height + a gap. */ .timer-screen .timer-meta-row { position: absolute; /* One baseline in the gap between the orb's bottom and the play button — the round's old anchor. Cycle line + round/time now sit on this row. */ bottom: calc(var(--s-6) + 72px + var(--s-5)); left: 50%; top: auto; transform: translateX(-50%); margin: 0; /* Stacked (user 2026-08-14): the breath count sits ABOVE the round pips, both centred in one column. bottom-anchored, so the extra line grows UP into the orb gap rather than pushing the play button. */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1h); } /* Round counter is anchored ABOVE the play button (bottom-based positioning, not orb-based) so it always lands cleanly in the gap between orb-bottom and play-button-top, regardless of viewport height. Iterated 2026-06-02: • First pass used top: 50% + translate(140 + 180px) — measured from the orb's vertical center. Worked on tall phones, but on shorter viewports the offset could collide with the play button. • Second pass made it tiny ("more visible" / "stay in center" per user feedback). Reverted to a confident size and moved it INTO the gap between orb and play button. Sizing: --fs-h3 (18) + weight 600 + --text reads as supporting info that's actually legible — not a competing headline like the first --fs-h2 attempt, but not a near-invisible 14px body either. */ /* Cycle + round share one muted, secondary type inside .timer-meta-row — de-emphasized (was fs-h3 / 600 / near-black, which out-weighed the thin hero digit and inverted the hierarchy) so the orb numeral stays the clear hero. */ .timer-screen .timer-meta-row .timer-cycle-val, .timer-screen .timer-meta-row .timer-round { position: static; margin: 0; font-family: var(--font-body); font-size: var(--fs-md); /* lint-skip CAT-T4: secondary meta-row value, not a .lead-text block */ font-weight: 500; color: var(--text-2); letter-spacing: .2px; } /* The "·" inline divider was dropped 2026-08-14 — the cycle line + round pips now stack vertically (see .timer-meta-row), so no horizontal separator is needed. */ .timer-meta-row #t-breath:empty { display: none; } /* Play button anchored near the bottom of the viewport, out of the orb-balance equation. */ .timer-screen #t-playbtn { position: absolute; bottom: var(--s-6); left: 50%; transform: translateX(-50%); /* Promote to a stable compositor layer so the border-radius:50% mask is baked into the layer's backing store. Without this, iOS Safari re-rasterizes the transformed button WITHOUT the rounded clip whenever its child icons toggle (running↔paused, e.g. when the session stops for the WISDOM outro), leaving a SQUARE. Desktop never drops the mask; this is iOS-only insurance. */ will-change: transform; } .timer-unit-label { font-size: var(--fs-micro); color: var(--text-3); letter-spacing: 1.5px; margin-top: var(--s-1h); } /* Cycle counter — plain centered text under the orb (pill removed). Extra top margin clears the orb's outer glow rings (which extend to ~390px) so the text reads as sitting cleanly below the orb, strictly on the column's center axis. */ /* (.timer-cycle-text retired 2026-08-03 — the cycle line moved into the shared .timer-meta-row baseline; positioning now lives on .timer-screen .timer-meta-row.) */ .timer-cycle-lbl { font-size: var(--fs-micro); color: var(--text-3); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; } /* .timer-cycle-val composes .body-text in markup for the size. */ .timer-cycle-val { font-weight: 500; color: var(--text); letter-spacing: .2px; } .timer-play-btn { width: 72px; height: 72px; /* Sits inside the centered column now; top margin gives the phase label and button their own breathing room and keeps the cycle-text → phase-label → button stack on one rhythm. */ margin-top: var(--s-6); border-radius: 50%; background: var(--sage); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform var(--dur-tap) var(--ease-ios); /* 2026-06-02 — tap hygiene. Without these, iOS Safari produced two visible glitches the user reported as "messing up a bit": • The system grey tap-highlight flashed over the sage circle. • A 300ms double-tap-to-zoom delay made the press feel sluggish and could re-fire if the user tapped again before the delay. • Selecting the icon during the press changed text-cursor mid-tap. Together they kill the glitch entirely. */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; } /* 2026-06-02 — the original :active transform: scale(.96) overrode the .timer-screen #t-playbtn translateX(-50%) used to horizontally center the absolutely-positioned button, so on tap the button jumped right. Compose both transforms so the press shrinks IN PLACE. */ .timer-play-btn:active { transform: translateX(-50%) scale(.96); } /* 'Skip' control during the post-session WISDOM reflection — an understated text button. Absolutely anchored JUST ABOVE the bottom-pinned play button (which is position:absolute; bottom var(--s-6); 72px tall) — in normal flow it landed mid-screen where the now-blank round line sits, so it read as missing. Hidden via [hidden] until the reflection opens (engine reveals it). Generous tap padding keeps it a comfortable touch target despite the small type. */ .wisdom-skip { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--s-6) + 72px + var(--s-4)); /* play-btn bottom + its height + gap */ padding: var(--s-2) var(--s-4); background: transparent; border: 0; color: var(--text-3); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: color var(--dur-state) var(--ease-ios); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .wisdom-skip:hover, .wisdom-skip:focus-visible { color: var(--text-2); } .wisdom-skip:active { transform: translateX(-50%) scale(.96); opacity: .6; } .wisdom-skip[hidden] { display: none; } .timer-play-btn svg { fill: var(--on-sage); pointer-events: none; } /* Both icons are rendered once; pause/play is toggled via the .is-paused class rather than swapping innerHTML. iOS Safari dropped the border-radius:50% mask on this transformed, layered button whenever its content was mutated, leaving a SQUARE after a pause/resume tap. A class toggle never touches the content, so the rounded layer is never invalidated. */ .timer-play-btn .t-ico { display: flex; align-items: center; justify-content: center; } .timer-play-btn .t-ico-play { display: none; } /* running → show pause */ .timer-play-btn.is-paused .t-ico-pause { display: none; } .timer-play-btn.is-paused .t-ico-play { display: flex; } .seg-ctrl { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--r-pill); } .seg-btn { flex: 1; padding: var(--s-1h) var(--s-3h); border-radius: var(--r-pill); border: 1px solid transparent; background: transparent; color: var(--text-3); font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: .5px; cursor: pointer; transition: color var(--dur-state) var(--ease-ios), background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios); } .seg-btn:hover:not(.is-selected) { color: var(--text-2); } .seg-btn:active:not(.is-selected) { transform: scale(.96); transition: transform var(--dur-tap) var(--ease-ios); } .seg-btn.is-selected { /* 2026-06-02 — bumped active styling for redundant visibility: • background went from sage-50 (~8% opacity) to a higher opacity sage tint so the selected pill reads as a clear chip even without the border. The user reported the Power Breath protocol pill not appearing highlighted despite the underlying state being correct (headless verification confirmed the class WAS applied with proper computed style — cache must have been stale). Brighter fill + brighter border eliminates any ambiguity even on partial cache updates. • border-color stays at full-opacity var(--sage). */ background: rgba(125, 211, 232, 0.18); color: var(--sage); border-color: var(--sage); font-weight: 700; } .section-tabs { display: flex; gap: var(--s-6); padding: 0 var(--s-1); margin-bottom: var(--s-4h); border-bottom: 1px solid var(--border); flex-shrink: 0; } /* Underline-tab skeleton (transparent chrome, hover, sage indicator) from .tab-underline; below are only the bits unique to the feed tabs. */ .section-tab { padding: var(--s-2h) 0 var(--s-3); letter-spacing: .1px; } .section-tab.active { color: var(--text); } .section-tab.active::after { bottom: -1px; } /* straddle the container divider */ /* =========================================================== lists.css COMPONENT · LISTS — session-complete stat row, technique list item, row-list container, scroll content, session controls, hold phase, countdown numeral. ── Part of the Prana modular CSS. Edit partials, never the concatenated styles.css. Rebuild with: python3 build-css.py =========================================================== */ /* STAT ROW (session complete) */ .stat-row { display: flex; align-items: stretch; gap: 1px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden; margin: var(--s-4h) 0; } .stat-col { flex: 1; background: var(--surface-soft); padding: var(--s-4) var(--s-2h); display: flex; flex-direction: column; align-items: center; gap: var(--s-1); } .stat-val { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; /* lint-skip CAT-T3: sizes the numeric stat-val display, not a body title */ letter-spacing: -.5px; line-height: 1; } /* Time-segmented stat value (e.g. "1m 22s"). */ .stat-val-time { display: inline-flex; align-items: baseline; justify-content: center; white-space: nowrap; line-height: 1; letter-spacing: -.5px; } .stat-val-num { font-family: var(--font-display); font-weight: 500; letter-spacing: -.5px; line-height: 1; color: inherit; } .stat-val-unit { font-family: var(--font-display); font-size: var(--fs-md); /* lint-skip CAT-T4: .stat-val-unit base; the session.css lean compound overrides it for the lean variant */ font-weight: 500; margin-left: 2px; color: var(--text-2); line-height: 1; } .stat-val-num-sec { margin-left: var(--s-1h); } .stat-lbl { font-size: var(--fs-micro); color: var(--text-3); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; } /* ROUND ROW */ /* TECH LIST ITEM */ /* Recent technique row — FLAT treatment. Was a hero card with surface fill, border, radius and a soft shadow; now sits directly on the root navy background like every other Library row. A bottom hairline keeps it separated from the chip rail / All Techniques list below. Hover recolors the icon; no chrome to swap any more. */ .tech-item { display: flex; align-items: center; gap: var(--s-4); /* Vertical padding from the shared --row-pad-y token (8px = var(--s-2)). The Library Recent row was the first consumer — Profile + Settings list-row classes migrate to the same token as they're touched, so the rhythm across list surfaces stays unified from one source. */ padding: var(--row-pad-y) 0; background: transparent; border: 0; border-radius: 0; margin-bottom: 0; cursor: pointer; transition: all var(--dur-state) var(--ease-ios); } /* — Icon chip — squircle, sage-tinted fill, sage-bordered outline. */ .tech-icon-wrap { /* Bare line icon — no tinted box (onboarding look). Category color + soft glow, matching the Home icons. */ width: 48px; height: 48px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; border: none; color: var(--tint, var(--sage)); } .tech-icon-wrap svg { width: 28px; height: 28px; stroke-width: 1.7; fill: none; color: var(--tint, var(--sage)); filter: drop-shadow(0 0 8px rgba(var(--tint-rgb, 125,211,232), .5)); } .tech-info { flex: 1; min-width: 0; } /* min-width:0 lets long names truncate cleanly */ /* .tech-name composes .row-title in markup; only the bottom-gap to the sub stays. */ .tech-name { margin-bottom: var(--s-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* .tech-sub composes .sub-text in markup; companion brightens color --text-3 → --text-2 to match the main-view row-sub treatment. */ .tech-sub { color: var(--text-2); } /* .tech-chevron + its hover variants removed (2026-05-29) — the trailing chevron on the Library Recent card and All Techniques rows was dropped at the user's direction. Tap affordance now relies on the row's hover veil. */ /* ROW LIST CONTAINER (Library · All Techniques) — flat. No surface fill, no border, no radius — rows sit directly on the root navy background. The .tech-row + .tech-row hairline below still gives each pair an edge, so the rows read as a list without a wrapping box. */ .tech-list { background: transparent; border: 0; border-radius: 0; padding: 0; } /* Library results header — extra vertical breathing room around the eyebrow (chip rail → RESULTS → first row), per the zen-rhythm pass. Scoped with the --lib modifier so Community's shared .section-label-row is untouched. */ .section-label-row--lib { margin-top: var(--s-3); /* gap below the category chip rail */ margin-bottom: var(--s-4h); /* more room before the first result row */ } .tech-row { display: flex; align-items: center; gap: var(--s-4); /* +2px each side (--s-4 → --s-4h) so adjacent rows breathe a touch more. */ padding: var(--s-4h) 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; transition: background var(--dur-state) var(--ease-ios), transform var(--dur-tap) var(--ease-ios); } /* Hairline divider between adjacent rows — every .tech-row inside .tech-list gets a top border EXCEPT when it's the first row of the list. The wrinkle that needed fixing 2026-06-02: user-saved custom presets render wrapped in a .swipe-wrap container (so the swipe-to-delete pad can sit behind them). That breaks the old `.tech-row + .tech-row` adjacent-sibling selector — the two rows on either side of a wrapped preset aren't adjacent siblings at the DOM level, just visual neighbours. The descendant variant below catches the wrapped case too. */ .tech-list .tech-row { border-top: 1px solid var(--border); } .tech-list > .tech-row:first-child, .tech-list > .swipe-wrap:first-child .tech-row { border-top: 0; } .tech-row:hover { background: var(--white-mist); } .tech-row:active { transform: scale(.99); } .tech-row:hover .tech-icon-wrap { border-color: var(--border-warm); } /* Icon-tile per-category tint now comes from --tint-rgb (set inline from CAT_TINT), matching .home-row-icon — the old fixed [data-cat] tints were removed so the Library and Home tiles render identically. */ /* 8-TECHNIQUE LIBRARY GRID (Home page) */ /* — Fabulous-style play button — circular, glowing, sage-on-deep-navy The signature look: solid mint disc, dark play glyph, soft halo. */ /* 38px visual + 3px each side = 44px hit area. WCAG 2.5.5 / Apple HIG. */ /* nudge play glyph for optical center */ /* "Custom Session" card variant — amber accent, dashed-border feel */ /* SCROLL CONTENT */ .scroll-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 max(var(--gutter), var(--safe-right)) /* +--s-5 (was --s-4): a touch more clearance over the absolute bottom-nav (~82px real height vs --nav-h 72) so the last row never grazes it. */ calc(var(--nav-h) + var(--s-5) + var(--safe-bottom)) max(var(--gutter), var(--safe-left)); scrollbar-width: none; } .scroll-content::-webkit-scrollbar { display: none; } /* Top-padding modifiers — replace per-page inline `style="padding-top:Npx"` on .scroll-content with named, reusable classes. The base rule sets padding-top:0; these add a small breathing gap below a .top-bar when a screen wants it (Library, Community, Safety). Two steps cover every current use; add more only if a real new value appears. --pad-sm 4px (Community feed, Safety guidelines) --pad-md 8px (Library — slightly more air above the search field) */ .scroll-content--pad-sm { padding-top: var(--s-1); } .scroll-content--pad-md { padding-top: var(--s-2); } .scroll-content--pad-lg { padding-top: var(--s-5); } /* Drop the reserved bottom space when the page intentionally omits the bottom-nav. Used on drill-down screens accessed via the gear icon (Settings + its children — Safety Guidelines, etc.) so the back-chevron is the only escape hatch and the content can sit closer to the edge. Without this, .scroll-content's base padding-bottom (--nav-h + s-4 + safe-bottom) would leave a tall empty band where the nav used to be. */ .scroll-content--no-nav { padding-bottom: calc(var(--s-4) + var(--safe-bottom)); } /* SESSION CONTROLS */ .session-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-6); padding: 0 max(16px, var(--safe-right)) calc(38px + var(--safe-bottom)) max(16px, var(--safe-left)); flex-shrink: 0; } /* HOLD PHASE — breath-retention timer display. font-family was pinned to 'Inter' !important in 2026-04 as a guard against the (now retired) Cormorant brand serif and italic-cursive variants leaking in via inline styles or parent rules. With Google Sans the only display face today, the threat surface is gone — moved to var(--font-body) (which still falls back to Inter at the requested weight 300, since Google Sans ships only 400/ 500/700). The !important stays as belt-and-suspenders for any future inline-style override. */ .hold-time-display { font-family: var(--font-body) !important; font-size: var(--fs-numeral-xl); font-weight: 300; letter-spacing: -1.5px; color: var(--white); font-variant-numeric: tabular-nums; font-style: normal !important; line-height: 1; } /* ── COUNTDOWN NUMERAL — global guard ───────────────────────────── Every actively-counting numeral in the app (the orb's t-num and the breath-hold h-time) must render in a clean tabular-nums sans face. font-family is var(--font-body) (now 'Inter' → system sans; the old Google Sans face was dropped 2026-06-06), pinned !important as belt- and-suspenders against future inline-style overrides. font-style: normal !important is the original italic guard. Tabular-nums keeps the digits in fixed columns so the count doesn't twitch as digits change width. (Weights live at each call site: t-num 400, h-time 300.) */ .countdown-numeral { font-family: var(--font-body) !important; font-style: normal !important; font-variant-numeric: tabular-nums !important; font-feature-settings: 'tnum' 1; } /* ════════════════════════════════════════════════════════════════ LIBRARY screen (pgLibrary) — extracted from inline styles. Off-scale snaps: empty pad 28px→32px (--s-6), empty msg 13px→14px (--fs-body), Unlock pill pad 7/13→8/14, Unlock font 10.5px→11px (--fs-label), bottom spacer 20px→22px (--s-5). ════════════════════════════════════════════════════════════════ */ /* Canonical search bar (Library + Community). Was two parallel rule sets (.lib-search-wrap + .comm-search-wrap, .lib-search-clear + .comm-search-clear, .lib-search-clear-icon + .comm-search-clear-icon) that were byte-for-byte identical; unified 2026-05-31 alongside the pages.js searchBar() helper. The shared .search-input + .search-icon rules already live in modals.css and weren't duplicated. */ .search-bar { position: relative; margin-bottom: var(--s-4h); } /* 18px */ .search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-3); cursor: pointer; padding: var(--s-2); /* 8px */ display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .search-clear-icon { width: 14px; height: 14px; display: inline-flex; } /* RECENT one-card shelf */ .lib-recent-item { margin-bottom: var(--s-4h); } /* 18px */ /* Empty-search / empty-filter state — composes .empty-state; keeps only padding. */ .lib-empty { padding: var(--s-6) 0; } /* Locked catalog rows — dimmed, amber sub-line. */ .tech-row.is-locked { opacity: .5; } .tech-row.is-locked .tech-sub { color: var(--amber); } /* "Unlock" outline pill (locked rows) — composes .button-label--sm in markup for the full uppercase-tracked-button type role. Companion keeps only the chrome (padding, border, color, layout). */ .pill-outline { padding: var(--s-2) var(--s-3h); border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; background: transparent; border: 1px solid var(--border-warm); color: var(--text); } /* Saved-preset rows now delete via swipe-to-reveal-trash (.swipe-wrap / .swipe-del-pad, modals.css) — the old always-visible ✕ (.lib-preset-*) is gone; the row shows just the chevron like any other technique row. */ /* 2026-06-03 — height collapsed to 0. Bumped to var(--nav-h) earlier in the same session to fix a 'Tummo bleeding under the nav' bug report, but stacked on top of .scroll-content's base --nav-h + --s-4 + --safe-bottom padding-bottom, the resulting ~190px dead space below the last row read as too generous on subsequent audit. The base padding alone handles nav clearance; the spacer element is kept as a markup hook in case a future tweak needs it, but no longer contributes height. */ .lib-bottom-spacer { height: 0; } /* =========================================================== community.css COMPONENT · COMMUNITY — feed post, live feed rail, filter/chip rails, library section header, leaderboard, XP bar. ── Part of the Prana modular CSS. Edit partials, never the concatenated styles.css. Rebuild with: python3 build-css.py =========================================================== */ /* COMMUNITY POST (Feed) */ .post-card { /* Surface (2% fill + hairline + 18px) from .card; hover lifts the wash. */ padding: var(--s-3h) var(--s-4); margin-bottom: var(--s-2h); transition: background var(--dur-state), border-color var(--dur-state); } .post-card:hover { background: var(--white-mist); border-color: var(--white-line); } .post-header { display: flex; align-items: center; gap: var(--s-2h); margin-bottom: var(--s-2); } .avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 700; /* lint-skip CAT-T1: sizes the initial glyph inside the avatar circle, not body text */ color: var(--bg-0); background: linear-gradient(135deg, var(--sage), var(--sage-400)); letter-spacing: .3px; } .post-meta { flex: 1; min-width: 0; } /* Name + timestamp on the SAME line, separated by a middle-dot. Username can truncate; time stays right-aligned and never wraps. */ .post-byline { display: flex; align-items: baseline; gap: var(--s-1h); line-height: 1.3; /* .post-byline composes .caption in markup; lh:1.3 overrides .caption's 1.45. */ } .post-username { font-weight: 600; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .post-time { font-size: var(--fs-label); color: var(--text-3); flex-shrink: 0; font-weight: 400; } .post-time::before { content: '·'; margin-right: var(--s-1h); color: var(--text-3); opacity: .6; } /* .post-body composes .body-text in markup; lh:1.55 overrides body-text's 1.5 (posts breathe a bit looser). */ .post-body { color: var(--text-2); line-height: 1.55; margin-bottom: var(--s-2h); } .post-actions { display: flex; gap: var(--s-4h); } .post-action { display: flex; align-items: center; gap: var(--s-1h); font-size: var(--fs-caption); /* lint-skip CAT-T2: .post-action is a button — lh:1.45 would change button height */ color: var(--text-3); cursor: pointer; transition: color var(--dur-state); border: none; background: none; padding: 0; font-family: var(--font-body); } .post-action:hover, .post-action.liked { color: var(--sage); } /* PREVIEW BANNER — honest labeling. The feed posts and the "Practicing Now" rail render seeded sample data (see ensureFeedSeed in pages.js); the real community backend is not built yet. This muted note keeps that explicit so sample activity is never mistaken for live users — required for App Store review and basic trust. Remove this banner when the feed is backed by real data. */ .comm-preview-note { display: flex; align-items: center; gap: var(--s-2h); margin-bottom: var(--s-4); padding: var(--s-2h) var(--s-3h); border-radius: var(--r-lg); background: var(--white-wash); border: 1px dashed var(--white-edge); color: var(--text-3); line-height: 1.4; /* .comm-preview-note composes .caption in markup; lh:1.4 overrides .caption's 1.45. */ } .comm-preview-note svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-2); } .comm-preview-note span { flex: 1; min-width: 0; } .comm-preview-note b { color: var(--text-2); font-weight: 600; } .comm-preview-dismiss { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text-3); border-radius: var(--r-circle); cursor: pointer; transition: color var(--dur-state) var(--ease-ios); } .comm-preview-dismiss:hover { color: var(--text-2); } .comm-preview-dismiss svg { width: 14px; height: 14px; color: inherit; flex-shrink: 0; } /* LIVE FEED RAIL */ /* Composes .section-head; keeps only its margin. */ .live-rail-header { margin-bottom: var(--s-2h); } /* Type from .section-label (base 10px tier); keeps inline layout + lighter --text2. Zero section-label's bottom margin — this title is a flex item, not a stacked header. */ .live-rail-title { display: inline-flex; align-items: center; gap: var(--s-1h); color: var(--text-2); margin: 0; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); position: relative; flex-shrink: 0; } .live-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: var(--sage); opacity: .35; animation: livePulse 1.8s ease-out infinite; } @keyframes livePulse { 0% { transform: scale(.7); opacity: .45; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } } .live-rail-count { font-size: var(--fs-mini); color: var(--text-3); font-weight: 500; letter-spacing: .3px; } .live-rail { display: flex; gap: var(--s-4h); overflow-x: auto; /* Left pad is --s-4h (not --s-5) so the first AVATAR — centered 4px inside its 64px chip — lines up with the content gutter and the post cards below. */ padding: var(--s-1h) var(--s-5) var(--s-1h) var(--s-4h); scroll-padding: 0 var(--s-4h); margin: 0 calc(-1 * var(--gutter)) var(--s-4h); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* Right-edge fade — signals the row scrolls (swipe to reveal more). */ -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--s-6)), transparent); mask-image: linear-gradient(to right, black calc(100% - var(--s-6)), transparent); } .live-rail::-webkit-scrollbar { display: none; } .live-rail { scrollbar-width: none; } .live-chip { flex-shrink: 0; width: 56px; /* was 64 — lighter visual weight */ display: flex; flex-direction: column; align-items: center; gap: var(--s-2); scroll-snap-align: start; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); } .live-avatar-wrap { position: relative; width: 48px; height: 48px; /* was 56 — pulls the row up ~14% */ } /* Decorative no-op — kept so any stale markup doesn't paint a stray box. The avatar's chrome lives on .live-chip .avatar. */ /* Pulsing sage halo — ONLY for chips with .is-active, i.e. live sessions started within the last 5 minutes (set by the renderer in pages.js based on elapsedMin). */ @keyframes liveHaloPulse { 0%, 100% { box-shadow: 0 0 0 1px var(--sage-170), 0 0 6px var(--sage-130); } 50% { box-shadow: 0 0 0 1px var(--sage-glow), 0 0 10px var(--sage-170); } } .live-chip .avatar { width: 48px; height: 48px; /* was 56 — synced with -wrap */ font-size: var(--fs-body); /* was --fs-h3 — initial scales with the smaller disc */ /* lint-skip CAT-T1: sizes the initial glyph inside a 48px circle, not body text */ font-weight: 700; color: var(--bg-0); /* Solid sage fill stays — identity is the initials, not the */ background: var(--sage); box-shadow: 0 0 0 1px var(--white-mist); } /* Recent-cognition state — the only entries that earn the bright pulsing Sage ring + shadow token effect. */ .live-chip.is-active .avatar { animation: liveHaloPulse 3s ease-in-out infinite; } /* .live-chip-name composes .caption in markup for the size. */ .live-chip-name { font-weight: 600; color: var(--text); max-width: 56px; /* was 64 — matches new chip width */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .1px; } .live-chip-tech { font-size: var(--fs-mini); font-weight: 500; color: var(--text-3); letter-spacing: .2px; max-width: 56px; /* was 64 — matches new chip width */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Honor reduced-motion: stop the active-state halo pulse. The live-dot still loses its scale animation; its opacity remains so the "live" semantic survives without motion. */ @media (prefers-reduced-motion: reduce) { .live-chip.is-active .avatar { animation: none; } .live-dot::after { animation: none; opacity: .3; } } /* M-FILTER-RAIL · canonical chip rail */ .m-filter-rail { display: flex; gap: var(--s-2); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-left: var(--s-5); /* Pull the strip to the live screen edges so chips can scroll */ margin: 0 calc(-1 * var(--gutter)) var(--s-4h); padding: 0 var(--s-5) var(--s-1) var(--s-5); /* Defensive: prevents the strip from being mis-measured by a flex/grid ancestor and from forcing horizontal page scroll. */ max-width: 100vw; min-width: 0; /* Fade BOTH edges symmetrically (was right-only) — chips dissolve into the gutter on the left and right as the rail scrolls. The fade width matches the s-5 side padding so the first/last chip sits just past the fade at rest. */ -webkit-mask-image: linear-gradient( to right, transparent 0, #000 var(--s-5), #000 calc(100% - var(--s-5)), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 var(--s-5), #000 calc(100% - var(--s-5)), transparent 100% ); } .m-filter-rail::-webkit-scrollbar { display: none; } .m-filter-rail { scrollbar-width: none; } /* ── Search-owns-filter rule (Library only, 2026-06-04) ────────── When the user is searching, the text input owns the entire search logic. Pills hide so the user can't accidentally narrow a query to a category and get a confusing '0 results' state. Trigger: the search-input is focused, OR it has content (i.e. not its placeholder). Either condition collapses the pills. Scoped via :has(> .search-bar > .search-input ...) > .m-filter-rail — direct-child constraints on BOTH sides mean only the Library structure matches (scroll-content > searchBar + scroll-content > m-filter-rail as siblings). Community's friend-search and post- filter pills live in different parents so this doesn't touch them. :has support: iOS Safari 15.4+, Chrome 105+, Firefox 121+. Older browsers fall through to the pre-fix behavior (pills visible, no functional break), which is the right graceful degradation. */ .scroll-content:has(> .search-bar .search-input:focus) > .m-filter-rail, .scroll-content:has(> .search-bar .search-input:not(:placeholder-shown)) > .m-filter-rail { display: none; } /* M-AMB-CHIP · individual chip */ /* Resting surface + tap-scale from .chip; below are the ambient/filter chip's own bits (rounded-rect radius, scroll-snap, box-shadow on .on). */ .m-amb-chip { flex-shrink: 0; scroll-snap-align: start; display: inline-flex; align-items: center; gap: var(--s-1h); padding: var(--s-2) var(--s-3h); border-radius: var(--r-md); font-weight: 500; letter-spacing: .2px; white-space: nowrap; transition: background var(--dur-state) var(--ease-ios), border-color var(--dur-state) var(--ease-ios), color var(--dur-state) var(--ease-ios), box-shadow var(--dur-state) var(--ease-ios), transform var(--dur-tap) var(--ease-ios); } .m-amb-chip:hover { border-color: var(--white-line-2); color: var(--text-2); } .m-amb-chip svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.6; fill: none; flex-shrink: 0; } .m-amb-chip.on { background: var(--sage-soft); border-color: var(--sage); color: var(--sage); font-weight: 600; box-shadow: 0 0 18px var(--sage-130); } .m-amb-chip.on:hover { border-color: var(--sage); background: var(--sage-110); color: var(--sage); } /* COMMUNITY FILTER VARIANT · pill chips (2026-06-01 redesign) Previously this rail was a flat text-link strip that read as "second row of underline tabs", indistinguishable at a glance from the Feed/Friends/Compete row above. The pill treatment restores clear visual differentiation — rounded chrome with a sage-soft fill when active vs the underline-only tabs above. The default .m-amb-chip styles already encode the pill look (border-radius, sage-soft .on state). This variant only adds: • A resting border so unselected pills don't disappear into the navy canvas. • Slightly tighter padding to keep the rail compact alongside the avatar row above and the post stack below. */ .community-filter-rail .m-amb-chip { border: 1px solid var(--border); color: var(--text-2); padding: var(--s-1h) var(--s-3); } .community-filter-rail .m-amb-chip.on { border-color: var(--sage); } /* Section header row used by Library: "All Techniques" label on the left, count badge on the right. Mirrors the visual rhythm of the iOS-style list section header in the target screen. */ .section-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3h); } /* The row owns the bottom spacing, so the label inside resets its own. */ .section-label-row .section-label { margin-bottom: 0; } /* .section-label-count rule retired 2026-06-03 — the Library count badge ('ALL TECHNIQUES · 10') was the only consumer, dropped per user direction ('remove the number plese') in the same pass that shipped the Recent dedupe. No other surface ever used the class, so removing the markup made the rule orphan; dropping it here keeps the dead-CSS lint clean. Re-introduce if a future surface needs a small numeric tag next to a section eyebrow. */ .session-card { background: var(--sage-soft); border: 1px solid var(--border-warm); border-radius: var(--r-lg); padding: var(--s-3) var(--s-3h); margin-bottom: var(--s-2h); } .session-card-head { display: flex; align-items: center; gap: var(--s-2h); margin-bottom: var(--s-2h); } /* Extracted from inline styles (community feed). */ .comm-tabs-wrap { padding: var(--s-3h) var(--s-5) 0; flex-shrink: 0; } /* was 14px 22px 0 */ /* COMM-COMPOSE-INLINE · always-visible "Share your practice…" prompt (2026-06-01 redesign). Replaces the top-right .comm-compose-btn icon, which Fitts's-law-wise lived in the hardest-to-reach corner of the screen and read as a generic edit button rather than a posting CTA. The inline card sits directly under the filter pills, in the natural reading path, with the user's own avatar making the affordance read as "this is yours to post into" (LinkedIn / Facebook pattern). */ .comm-compose-inline { display: flex; align-items: center; gap: var(--s-2h); width: 100%; padding: var(--s-2h) var(--s-3); margin-bottom: var(--s-4); background: var(--flat-card); border: 1px solid var(--border); border-radius: var(--r-lg); font-family: var(--font-body); text-align: left; cursor: pointer; transition: border-color var(--dur-state) var(--ease-ios), background var(--dur-state) var(--ease-ios); } .comm-compose-inline:hover { border-color: var(--white-line-2); } .comm-compose-inline-prompt { flex: 1; color: var(--text-3); font-weight: 500; letter-spacing: .1px; /* .comm-compose-inline-prompt composes .body-text in markup for size. */ } .comm-compose-inline-icon { color: var(--text-3); display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; } .session-card-titlecol { min-width: 0; flex: 1; } .post-you-tag { font-size: var(--fs-mini); color: var(--sage); font-weight: 500; } .post-action-ico { width: 15px; height: 15px; } .session-card-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--sage-soft); display: flex; align-items: center; justify-content: center; color: var(--sage); flex-shrink: 0; } .session-card-icon svg { width: 16px; height: 16px; } /* .session-card-title composes .caption in markup; lh:1.2 overrides .caption's 1.45 (tighter title). */ .session-card-title { font-weight: 600; color: var(--white); line-height: 1.2; } .session-card-sub { font-size: var(--fs-mini); color: var(--text-3); margin-top: 2px; letter-spacing: .3px; } /* Metric row — Prana Design System v2.0. */ .session-card-stats { display: flex; align-items: baseline; gap: var(--s-4); padding-top: 2px; } .session-stat-flat { display: inline-flex; align-items: baseline; gap: var(--s-1); font-family: var(--font-display); font-variant-numeric: tabular-nums; line-height: 1; min-width: 0; } /* .session-stat-flat-val composes .body-text in markup for the size. */ .session-stat-flat-val { font-weight: 600; color: var(--text); /* Ivory — neutral primary text */ letter-spacing: -.2px; } .session-stat-flat-lbl { font-size: var(--fs-mini); font-weight: 500; color: var(--text-3); /* Quiet caption — meaning stays in the digit */ letter-spacing: .3px; text-transform: lowercase; } /* Best Hold — pushed to the far right, amber-only. Label sits BEFORE the value here (small uppercase caption, then the duration) so the eye lands on the digit at the edge. */ .session-stat-flat-hold { margin-left: auto; gap: var(--s-1h); } .session-stat-flat-hold .session-stat-flat-lbl { font-size: var(--fs-micro); letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-3); } .session-stat-flat-hold .session-stat-flat-val { color: var(--amber); /* #d4a574 — retention token */ font-size: var(--fs-md); /* lint-skip CAT-T4: .session-stat-flat-hold .session-stat-flat-val — compound stat value, numeric not body title */ font-weight: 600; letter-spacing: -.3px; } /* SHARE COMPOSER (bottom sheet) */ /* LEADERBOARD */ .lb-rank { font-size: var(--fs-caption); /* lint-skip CAT-T2: leaderboard rank per-context size override (12px here, 14px in .lb-item via body-text); not a generic caption */ font-weight: 600; color: var(--text-3); width: 24px; text-align: center; } .lb-rank.gold { color: var(--medal-gold); } .lb-rank.silver { color: var(--medal-silver); } .lb-rank.bronze { color: var(--medal-bronze); } /* =========================================================== COMMUNITY · FRIENDS TAB Extracted from inline style="" in pages.js communityFriends(). Only DYNAMIC values stay inline (avatar gradient, follow-state colors). Three off-scale one-offs were snapped to the nearest token during extraction: empty-state pad 28px→32px (--s-6), empty message 13px→14px (--fs-body), pill pad 7px→8px (--s-2). =========================================================== */ /* .comm-search-wrap / .comm-search-clear / .comm-search-clear-icon removed 2026-05-31 — these were byte-for-byte duplicates of the Library equivalents; both call sites now use the unified .search-bar component (lists.css) via the searchBar() helper in pages.js. */ /* Invite banner — flat. Was a sage-tinted card; now a chrome-less row sitting on the page background. The sage tint survives only on the icon chip + CTA pill, which is plenty of accent for the small banner. */ .comm-invite-card { background: transparent; border: 0; border-radius: 0; padding: var(--s-4) 0; margin-bottom: var(--s-4h); /* 18px */ display: flex; align-items: center; gap: var(--s-3h); /* 14px */ } .comm-invite-icon { width: 42px; height: 42px; border-radius: var(--r-circle); background: var(--sage-glow); display: flex; align-items: center; justify-content: center; color: var(--sage); } .comm-invite-text, .comm-friend-id { flex: 1; } /* .comm-invite-title composes .body-text in markup for the size. */ .comm-invite-title { font-weight: 600; margin-bottom: 2px; } /* .comm-invite-sub composes .sub-text in markup — canonical row-sub pattern. Only the color override (--text-3 → --text-2) is bespoke. */ .comm-invite-sub { color: var(--text-2); } .comm-invite-btn { background: var(--sage); color: var(--on-sage); border: none; border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); /* 8px 16px */ font-size: var(--fs-label); /* 11px */ font-weight: 700; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; font-family: var(--font-body); } /* Connection-count badge inside the section label */ .comm-conn-count { color: var(--text-3); font-weight: 400; font-size: var(--fs-mini); /* 10px */ margin-left: var(--s-1); /* 4px */ } /* Empty-search state — composes .empty-state (primitives); keeps only padding. */ .comm-empty { padding: var(--s-6) 0; } /* Friend + suggested rows */ .comm-friend-row { border-radius: var(--radius); padding: var(--s-3h) var(--s-4); /* 14px 16px */ margin-bottom: var(--s-2); /* 8px */ display: flex; align-items: center; gap: var(--s-3); /* 12px */ transition: border-color var(--dur-state); } .comm-suggested-row { border-radius: var(--radius); padding: var(--s-3h) var(--s-4); /* 14px 16px */ margin-bottom: var(--s-2); /* 8px */ display: flex; align-items: center; gap: var(--s-3); /* 12px */ } .comm-avatar { width: 42px; height: 42px; } /* .comm-friend-name composes .body-text in markup for the size. */ .comm-friend-name { font-weight: 600; } .comm-friend-meta { font-size: var(--fs-label); /* 11px */ color: var(--text-3); display: flex; align-items: center; gap: var(--s-1h); /* 6px */ margin-top: 2px; } .comm-friend-streak { display: inline-flex; align-items: center; gap: 3px; color: var(--amber); } .comm-flame-icon { width: 11px; height: 11px; display: flex; } .comm-friend-xp { font-size: var(--fs-label); /* 11px */ color: var(--sage); font-weight: 500; margin-top: 2px; } .comm-suggested-meta { font-size: var(--fs-label); /* 11px */ display: inline-flex; align-items: center; gap: var(--s-1); /* 4px */ margin-top: 2px; color: var(--amber); } .comm-subsection-label { margin-top: var(--s-3h); } /* 14px */ /* Pill CTAs — Follow (dynamic state colors stay inline), suggested Follow */ /* .comm-pill — the small inline community pill (Follow / Suggested / Join). Base is the quiet outline-less pill (used by Follow). --fill adds the solid sage treatment (Suggested, Join). Folded the duplicated .comm-follow-btn / .comm-suggested-btn (.comm-join-btn keeps only its wider padding). */ .comm-pill { border-radius: var(--r-pill); padding: var(--s-2) var(--s-3h); font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: .5px; cursor: pointer; } .comm-pill--fill { background: var(--sage); color: var(--on-sage); border: none; font-weight: 700; } /* =========================================================== COMMUNITY · COMPETE TAB Streak banner + challenges shelf extracted from inline styles in communityCompete(). Leaderboard (.lb-*) was already classes. Dynamic values stay inline: challenge progress-bar width, the joined-state footer margin, the streak-bar width (now derived from 14/30). Off-scale snaps during extraction: challenge title 15px→16px (--fs-md), streak headline 18px→19px (--fs-h3), two gaps 5px→6px (--s-1h), Join pad 7px→8px (--s-2). =========================================================== */ /* Streak banner */ /* Compete streak banner — flat. Was a sage-tinted card; the kicker class .comm-streak-kicker keeps the sage accent on text instead. */ .comm-streak-card { background: transparent; border: 0; border-radius: 0; padding: var(--s-4) 0; margin-bottom: var(--s-4h); /* 18px */ } /* Composes .section-head; keeps only its margin. */ .comm-streak-head { margin-bottom: var(--s-1h); } /* 6px */ /* Type from .section-label (base 10px tier); keeps only its sage accent color. */ .comm-streak-kicker { color: var(--sage); } /* .comm-streak-days composes .caption in markup for the size. */ .comm-streak-days { color: var(--amber); display: inline-flex; align-items: center; gap: var(--s-1h); /* was 5px → 6px */ } .comm-streak-headline { font-family: var(--font-display); font-size: var(--fs-h3); /* was 18px → 19px */ font-weight: 500; margin-bottom: var(--s-3); /* 12px */ } .comm-streak-caption { font-size: var(--fs-label); /* 11px */ color: var(--text-3); margin-top: var(--s-2); /* 8px */ } /* Shared 12px stat-icon wrapper (joined count, hourglass, streak flame) */ .comm-stat-icon { width: 12px; height: 12px; display: flex; } /* Challenge cards */ .comm-challenge-card { margin-bottom: var(--s-2h); /* 10px */ padding: var(--s-4) var(--s-4h); /* 16px 18px */ } .comm-challenge-head { display: flex; align-items: flex-start; gap: var(--s-3h); /* 14px */ margin-bottom: var(--s-3); /* 12px */ } .comm-challenge-icon { width: 44px; height: 44px; border-radius: var(--r-circle); background: var(--sage-soft); display: flex; align-items: center; justify-content: center; color: var(--sage); flex-shrink: 0; } .comm-challenge-body { flex: 1; } .comm-challenge-titlerow { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2); /* 8px */ } .comm-challenge-title { /* was 15px → 16px */ font-weight: 600; } /* .comm-challenge-desc composes .caption in markup; lh:1.5 overrides .caption's 1.45. */ .comm-challenge-desc { color: var(--text-2); margin-top: 3px; line-height: 1.5; } .comm-challenge-foot { display: flex; justify-content: space-between; align-items: center; } .comm-challenge-stat { font-size: var(--fs-label); /* 11px */ color: var(--text-3); display: inline-flex; align-items: center; gap: var(--s-1h); /* 6px */ } .comm-stat-dot { margin: 0 var(--s-1); } /* 4px */ /* Type/fill from .comm-pill.comm-pill--fill; keeps only its wider padding. */ .comm-join-btn { padding: var(--s-2) var(--s-4); } .comm-challenge-progress-label { font-size: var(--fs-label); /* 11px */ color: var(--text-3); margin-top: var(--s-1h); /* 6px */ } /* =========================================================== onboarding.css COMPONENT · ONBOARDING — onboarding wizard + session-complete (v1) + profile/achievements intro block. ── Part of the Prana modular CSS. Edit partials, never the concatenated styles.css. Rebuild with: python3 build-css.py =========================================================== */ /* .onboard-topbar / .onboard-back-btn / .onboard-wrap--top / .onboard-body--tight / .onboard-cta--name rules removed 2026-05-30 — the name-input step (step 1) was dropped from onboarding. Only the goal screen remains, and only its primitives stay below. */ .onboard-wrap { flex: 1; display: flex; flex-direction: column; /* 2026-06-05 — horizontal padding bumped --gutter (22px) → --s-6 (32px) per user audit. The 22px gutter is the app-wide content default and reads correctly on dense list/data pages; an onboarding HERO with a 32px display title hugging the left edge at 22px reads as cramped. The extra 10px each side gives the hero air without touching the rest of the app's gutter rhythm — this rule is scoped to .onboard-wrap. */ padding: 0 max(var(--s-6), var(--safe-right)) calc(var(--s-5) + var(--safe-bottom)) max(var(--s-6), var(--safe-left)); } /* 2026-06-05 — padding-top --s-2 (8px) → --s-5 (22px) for the same audit. 8px from the status bar to the H1 was tight; 22px lets the title sit deliberately. */ .onboard-wrap--lead { justify-content: flex-start; padding-top: var(--s-5); } /* ── Welcome step (2026-08-13) — a centered brand + value moment shown before the goal picker. Reuses .onboard-wrap; the two u-spacers centre the mark + copy block vertically with the CTA pinned to the thumb zone. ── */ .onboard-wrap--welcome { justify-content: center; align-items: center; text-align: center; } .onboard-welcome-logo { margin-bottom: var(--s-4); } .onboard-welcome-eyebrow { color: var(--sage); margin-bottom: var(--s-2h); } /* composes .section-label */ .onboard-welcome-title { margin-bottom: var(--s-3); } .onboard-welcome-sub { max-width: 340px; margin-left: auto; margin-right: auto; } /* .onboard-body composes .page-subtitle in markup; only the bottom-gap to the goal cards stays. */ .onboard-body { margin-bottom: var(--s-5); } /* Primary CTA — .btn-primary supplies the mint pill; this handles width + the disabled state for the goal-gated Continue. */ .onboard-cta { width: 100%; margin-top: var(--s-3); } .onboard-cta.is-disabled { opacity: .4; pointer-events: none; } /* Skip — quiet text button below the name-step CTA */ .onboard-skip-btn { width: 100%; margin-top: var(--s-2); padding: var(--s-3); background: none; border: none; color: var(--text-3); font-family: var(--font-body); font-size: var(--fs-caption); /* lint-skip CAT-T2: skip button — lh:1.45 would grow button height */ font-weight: 500; letter-spacing: .2px; cursor: pointer; } .onboard-skip-btn:hover { color: var(--text-2); } /* Goal card — FLAT (2026-05-29). The .flat-card composition was dropped from the markup; this rule no longer carries a surface. Hairlines between adjacent cards provide list rhythm. Selection affordance lives on .goal-check.checked (cyan square + check) — no surface tint or border glow on the card itself any more. */ .goal-card { display: flex; align-items: center; gap: var(--s-3h); padding: var(--s-4h) 0; margin: 0; cursor: pointer; transition: background var(--dur-state) var(--ease-ios); } .goal-card + .goal-card { border-top: 1px solid var(--border); } .goal-card:hover { background: var(--white-mist); } .goal-card.selected .goal-title { color: var(--sage); } .goal-info { flex: 1; } /* .goal-title composes .lead-text in markup (16px). Color/weight/ls/lh from the component class keep the title bold + primary against the 12px text-3 .goal-sub below — clean 16/12 hierarchy. */ .goal-title { line-height: 1.2; font-weight: 600; margin-bottom: 2px; letter-spacing: -.1px; } /* .goal-sub removed — onboarding cards now show only the goal title. */ /* Rounded-square CHECKBOX (was a circular radio) — goal selection is multi-select, and a square reads as "pick many" where a circle reads as "pick one". (2026-06-14.) */ .goal-check { width: 22px; height: 22px; border-radius: var(--r-xs); border: 1.5px solid var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur-state) var(--ease-ios); } .goal-check.checked { border-color: var(--sage); background: var(--sage); } .goal-check.checked svg { width: 12px; height: 12px; stroke: var(--on-sage); stroke-width: 3; fill: none; } /* SESSION COMPLETE */ @keyframes checkPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .check-circle { width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, var(--sage-170), rgba(11,19,28,.85)); /* de-navy'd slate stop (was navy rgba(11,26,46)) */ border: 1.5px solid var(--sage); display: flex; align-items: center; justify-content: center; margin: 0 auto; animation: checkPop var(--dur-page) var(--ease-out-soft) both; box-shadow: 0 0 40px var(--sage-290); } /* =========================================================== profile.css COMPONENT · PROFILE (achievements) — achievement grid, categorized scroll shelves, ghost/locked badges, tier glow. ── Part of the Prana modular CSS. Edit partials, never the concatenated styles.css. Rebuild with: python3 build-css.py =========================================================== */ /* PROFILE */ /* ACHIEVEMENTS */ /* Badge circle — shrunk from 56px → 44px (2026-05-29) at the user's direction; the dense uniform shelf was reading as visually crowded. SVG glyph proportionally trimmed 22 → 18. */ .achieve-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .achieve-icon svg { width: 18px; height: 18px; stroke-width: 1.6; fill: none; } .achieve-icon.earned { background: radial-gradient(circle at 50% 40%, var(--tier-glow, var(--sage-170)) 0%, rgba(20,32,46,.5) 70%); border: 1px solid var(--tier-c, var(--border-warm)); color: var(--tier-c, var(--sage)); } .achieve-icon.earned svg { stroke: currentColor; } .achieve-icon.locked { background: rgba(20,32,46,.18); /* Dashed ring lifted from --white-edge (14% white ≈ 1.43:1 — nearly invisible on the dark canvas, user) to a medium slate that clears the 3:1 non-text contrast bar (#5E6C84 ≈ 3.56:1). The glyph opacity is also raised below. Light keeps its own values. */ border: 1px dashed #5E6C84; /* lint-skip CAT-16: dark-only locked-state slate ring (3:1 AA non-text), no matching token */ } /* Locked stroke fully drawn but dimmed so the badge reads as attainable (the user can see the target). Was opacity .14 — invisible on a dark phone; .5 keeps it clearly locked vs the bright earned glyph but actually visible. */ .achieve-icon.locked svg { stroke: var(--text-2); opacity: .5; } /* .achieve-name composes .caption in markup; lh:1.25 overrides .caption's 1.45 (tighter labels). */ .achieve-name { text-align: center; line-height: 1.25; font-weight: 500; color: var(--text-2); } /* Earned vs locked label color (was inline in the markup). Dark-theme values match the previous inline behaviour exactly; light.css darkens both for contrast (earned → primary ink, locked → readable-but-muted). */ .achieve-name.is-earned { color: var(--text-2); } /* Locked label lifted --text-3 → medium slate so it clears AA comfortably on the dark canvas (7.37:1) while staying clearly inactive vs the teal earned labels. Light darkens it separately (light.css). (user 2026-08-06) */ .achieve-name.is-locked { color: #94A3B8; /* lint-skip CAT-16: dark-only AA locked-label slate, no matching token */ } .achieve-name.is-ghost { opacity: .8; } /* overflow-preview cells (was inline) */ /* CATEGORIZED ACHIEVEMENT SHELVES */ .shelf { position: relative; /* Consistent 24px rhythm between every category shelf (8px grid). */ margin-bottom: var(--s-5); } /* Composes .section-head--baseline; keeps only its margin. */ .shelf-head { margin-bottom: var(--s-4); } /* Category shelf title — regular weight (2026-05-29). Was display font + 500 which read as a heavy heading against the rest of the page; dropped the family override and the heavier weight so the title composes its .lead-text size (16px) with body Google Sans at 400. */ .shelf-title { font-weight: 400; letter-spacing: .1px; color: var(--text); } /* .shelf-blurb + .shelf-meta + .shelf-meta b removed 2026-06-05 (later) with the markup that consumed them. Shelf header is now just the category title — the page-level 'All badges N/24' count above each shelf carries the same aggregate information without per-shelf noise. cat.blurb in CATEGORIES is back to dead-data status it had before the morning's pass; if it ever lights up again, restore .shelf-blurb here. */ .shelf-track-wrap { position: relative; /* Tuck the side arrows into the gutter so they sit just outside the visible badge area without stealing horizontal space. */ } .shelf-track { /* The track is a CSS-only carousel: native horizontal overflow with scroll-snap keeps it native-smooth on touch, while the arrow buttons drive `scrollLeft` programmatically by one page-width. */ display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Hide the scrollbar — the arrows are the affordance. */ scrollbar-width: none; -ms-overflow-style: none; padding: 2px 0 var(--s-1); /* room for the focus glow not to clip */ } .shelf-track::-webkit-scrollbar { display: none; } .shelf-cell { flex: 0 0 calc((100% - 36px) / 4); /* 4 cells per page, 3×12px gaps */ scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); min-width: 0; } .shelf-arrow { position: absolute; /* Center on the icon row (track padding-top 2px + half of the 44px icon = 24px). Was 30px (when badges were 56px) — bumped down 2026-05-29 when the badge circle shrank to 44px. */ top: 24px; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--white-line); /* Background TRANSPARENT (2026-05-29) — matches the .icon-btn transparent-chrome treatment applied app-wide. The 1px ring + chevron glyph are the only visible chrome at rest; the backdrop blur went with the fill since there's nothing left to frost. */ background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); z-index: 2; transition: opacity var(--dur-state), transform var(--dur-state), border-color var(--dur-state), color var(--dur-state); } .shelf-arrow:hover { border-color: var(--sage); color: var(--sage); } .shelf-arrow:active { transform: translateY(-50%) scale(.92); } .shelf-arrow.disabled { opacity: 0; pointer-events: none; } /* Identical glyph sizing on both arrows so left/right read as a matched pair (both are chevrons now). */ .shelf-arrow svg { width: 16px; height: 16px; stroke-width: 2; fill: none; } .shelf-arrow.left { left: -10px; } .shelf-arrow.right { right: -10px; } /* Invisible touch-target — the visible arrow disc stays 28×28 so the shelf layout (offset -10px outside the track) is unaffected, but a 44×44 ::after extends the tap area to the WCAG 2.5.5 / iOS HIG floor. Important here because the small arrows on a 4-cell achievement shelf are easy to miss-tap with a thumb. */ .shelf-arrow::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } /* GHOST BADGES — locked variant inside a shelf cell */ /* The icon itself is dimmed via .achieve-icon.locked (low-opacity stroke). Here we only gently quiet the whole cell; no heavy grayscale that would crush the icon into "dead space". Hover lifts to hint interactivity. */ .ghost { opacity: .92; transition: opacity var(--dur-card) ease, transform var(--dur-state) ease; } .ghost:hover { opacity: 1; transform: translateY(-2px); } .ghost:hover .achieve-icon.locked svg { opacity: .3; } /* shelf-toggle kept for backwards-compat but no longer rendered */ /* Empty-shelf hint (no earned badges yet) */ .shelf-empty { font-size: var(--fs-label); color: var(--text-3); padding: var(--s-4) 0; text-align: center; } /* ── UX POLISH: Focus rings ───────────────────────────────────── Accessibility + premium feel: every interactive surface MUST show a visible focus indicator when reached via keyboard, screen reader, or external pointer. We use :focus-visible (not :focus) so the ring never appears on mouse/touch taps — only when the user actually needs the cue. Inputs/textareas additionally get a bordered focus state via their own rules below (.search-input:focus, .pc-note:focus, .reminder-name-input:focus); those rules are kept narrow and bordered to coexist with this outline ring, which still applies as a backstop via :focus-visible. Color: sage at full strength, offset 2–3px from the element edge so it reads as a halo rather than a clipped border. The soft sage glow (box-shadow) doubles the visual weight on primary controls without adding harshness. */ :focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 4px; } button:focus-visible, [role="button"]:focus-visible, a:focus-visible, .icon-btn:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; box-shadow: 0 0 0 4px var(--sage-soft); } .btn-primary:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; box-shadow: 0 0 0 5px var(--sage-soft), 0 0 30px var(--sage-210); } /* =========================================================== 99-utilities.css UTILITIES — focus rings, tactile button-active, loading skeleton, haptic ripple, orb-glow layers, XP shimmer, .help-* helpers. Highest specificity; loads last among the early layers. ── Part of the Prana modular CSS. Edit partials, never the concatenated styles.css. Rebuild with: python3 build-css.py =========================================================== */ /* Form fields: explicit :focus-visible backstop. The element-specific */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; box-shadow: 0 0 0 3px var(--sage-soft); } /* .u-sr-only — visually hide an element while keeping it announceable to screen readers. Used 2026-06-05 to mount a real

page heading on surfaces whose visible design has none (Home, Library tabs whose page-titles were intentionally dropped per the iOS-style 'quieter chrome' direction). A screen-reader user gets a clear page anchor; sighted users see no change. Standard 1-px clip recipe — works in every modern browser, doesn't create a focus trap, doesn't break copy-paste. / .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } / UX POLISH: Button active states (tactile press) / .tech-item:active { transform: scale(.99); transition: transform var(--dur-tap) var(--ease-ios); } .goal-card:active { transform: scale(.99); transition: transform var(--dur-tap) var(--ease-ios); } .icon-btn:active { transform: scale(.92); transition: transform var(--dur-tap) var(--ease-ios); } / UX POLISH: Loading skeleton / @keyframes skeleton-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .75; } } / UX POLISH: Haptic feedback visual ripple / @keyframes hapticRipple { 0% { transform: scale(1); opacity: .6; } 60% { transform: scale(1.2); opacity: .1; } 100% { transform: scale(1.3); opacity: 0; } } / Phase-change flash on the breathing orb / @keyframes phaseFlash { 0% { opacity: .7; } 100% { opacity: 0; } } .phase-flash { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--sage-210), transparent 70%); pointer-events: none; animation: phaseFlash .55s ease-out forwards; } / UX POLISH: Ghost badge tooltip / .shelf-cell { position: relative; } .shelf-cell.ghost::after { content: attr(data-hint); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(8,14,22,.96); / de-navy'd slate (was navy rgba(10,20,32)) / border: 1px solid var(--border-warm); border-radius: var(--r-sm); padding: var(--s-1h) var(--s-2h); font-size: var(--fs-mini); color: var(--text-2); white-space: normal; line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity var(--dur-state); z-index: var(--z-raised); text-align: center; width: 110px; } .shelf-cell.ghost:hover::after { opacity: 1; } / UX POLISH: Enhanced input focus / .search-input:focus { border-color: var(--border-warm); box-shadow: 0 0 0 3px var(--sage-soft); background: var(--sage-wash); } / UX POLISH: Nav tap ripple / .nav-item { position: relative; overflow: hidden; } .nav-item::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--sage-170) 0%, transparent 70%); opacity: 0; border-radius: var(--r-md); transition: opacity var(--dur-tap); } .nav-item:active::after { opacity: 1; } / Earned badge — refined tier-aware glow / / Subtle, static glow that respects the badge's tier color (set via / .achieve-icon.earned { box-shadow: 0 0 0 1px var(--tier-c, var(--sage-glow-45)), 0 2px 10px -2px var(--tier-glow, var(--sage-210)); transition: box-shadow var(--dur-state) ease, transform var(--dur-state) ease; } .achieve-icon.earned:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--tier-c, var(--sage-glow-peak)), 0 4px 16px -2px var(--tier-glow, var(--sage-glow-40)); } / UX POLISH: Shelf reveal stagger / @keyframes revealUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .shelf { animation: revealUp var(--dur-card) var(--ease-standard) both; } .shelf:nth-child(1) { animation-delay: 0ms; } .shelf:nth-child(2) { animation-delay: 70ms; } .shelf:nth-child(3) { animation-delay: 140ms; } / UX POLISH: Orb glow layers synced to breathing phase / @keyframes orbGlowInhale { from { filter: drop-shadow(0 0 8px rgba(var(--orb-color-rgb), .2)); } to { filter: drop-shadow(0 0 24px rgba(var(--orb-color-rgb), .6)); } } @keyframes orbGlowExhale { from { filter: drop-shadow(0 0 24px rgba(var(--orb-color-rgb), .6)); } to { filter: drop-shadow(0 0 8px rgba(var(--orb-color-rgb), .2)); } } / Layer the scale + glow animations together. HOLD stays still by design — no glow ramp, just the steady inset on .orb-inner. / .orb-inner.phase-INHALE { animation: orb-inhale var(--orb-inhale-dur, 4s) ease-in-out forwards, orbGlowInhale var(--orb-inhale-dur, 4s) ease-in-out forwards; } .orb-inner.phase-EXHALE { animation: orb-exhale var(--orb-exhale-dur, 8s) ease-in-out forwards, orbGlowExhale var(--orb-exhale-dur, 8s) ease-in-out forwards; } / Kapalabhati rapid pumping — the orb holds completely STEADY: fixed size, one sage colour, and a STEADY glow (no pulse). A per-pump glow breath drifts out of sync with the count + reads as too much movement at this tempo, so the orb just sits calmly lit while the count ticks. Replaces the jarring expand/contract+flash "blinking" the user flagged. / .orb-inner.phase-PUMP { transform: scale(1.04); filter: drop-shadow(0 0 18px rgba(var(--orb-color-rgb), .42)); } / UX POLISH: XP bar shimmer / @keyframes shimmer { from { background-position: -200% center; } to { background-position: 200% center; } } .progress-bar-fill { background: linear-gradient(90deg, var(--sage-400) 0%, var(--sage) 38%, var(--white-strong-2) 50%, var(--sage) 62%, var(--sage-400) 100%); background-size: 200% auto; animation: shimmer 3.5s linear infinite; transition: width .6s var(--ease-standard); } / Locked badge styling is defined once above (line ~791). .ghost wrapper handles the dimming for locked-in-shelf context. / / ─────────────────────────────────────────────────────────── ATOMIC UTILITIES Single-purpose helpers extracted from repeated inline styles in pages.js (style-extraction sprint). Each replaces a string that recurred 2+ times across screens. Add here only when a one-liner genuinely recurs — semantic blocks belong in their component partial. ─────────────────────────────────────────────────────────── / / Flex spacer: pushes following content to the bottom of a flex column. Was `
` in onboarding and elsewhere. / .u-spacer { flex: 1; } / Full-bleed screen: removes the default .screen gutter so a child (progress bar, hero) can manage its own edge padding. / .u-screen-flush { padding: 0; } / Heading-to-subhead rhythm used by display headers. / .u-mb-12 { margin-bottom: var(--s-3); } / ── Ring-fenced layout helpers (strict .u- namespace) ─────────────── These exist ONLY to clear the last static inline style="" attrs from the JS templates (the prerequisite for tightening style-src in the CSP). Components stay semantic; these are isolated single-purpose helpers. Spacing values are tokenized; element dimensions are literal. Reuse .u-spacer (above) for flex:1. / .u-pe-none { pointer-events: none; } .u-text-right { text-align: right; } .u-clickable { cursor: pointer; } .u-noshrink { flex-shrink: 0; } .u-amber { color: var(--amber); } .u-mb-22 { margin-bottom: var(--s-5); } .u-ico-14 { width: 14px; height: 14px; display: inline-flex; } .u-flex-center { display: flex; align-items: center; gap: var(--s-2); } / Vertical spacer divs (replace
). / .u-vspace-10 { height: var(--s-2h); } .u-vspace-14 { height: var(--s-3h); } .u-vspace-18 { height: var(--s-4h); } .u-vspace-24 { height: 24px; } / =========================================================== modals.css COMPONENT · MODALS & SHEETS — skills, search, heart/info buttons, technique modal overlay, pre-session tuning, settings list, language picker, reminder sheet scaffolding, toasts, hover polish. ── Part of the Prana modular CSS. Edit partials, never the concatenated styles.css. Rebuild with: python3 build-css.py =========================================================== / / SKILLS / / SEARCH / .search-input { / left pad = icon left (var(--s-4)=16) + icon width (var(--s-4)=16) + gap (var(--s-3h)=14) = 46px. Derived from .search-icon so text alignment tracks the icon if it ever resizes. / width: 100%; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + var(--s-4) + var(--s-3h)); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; color: var(--text); outline: none; transition: var(--dur-state); / 2026-06-04 — font-size pinned to --fs-md (16px). The markup still composes .body-text (14px) for font-family/line-height/letter- spacing, but iOS Safari auto-zooms into any input with font-size < 16px on focus — user audit: 'when I start tapping the name of technique the screen become closer ... zooming in'. Same rationale .field-input documented in 03-primitives.css ('font-size is --fs-md (16px) so focusing never triggers iOS auto-zoom. Search boxes are a separate pattern — not migrated.' — well, now they are). The override beats .body-text purely via source-cascade order: modals.css comes after 03-primitives.css in build-css.py's ORDER, so this rule wins. / font-size: var(--fs-md); / lint-skip CAT-T4: search input — 16px so iOS doesn't auto-zoom on focus, same carve-out as .field-input / } .search-input:focus { border-color: var(--border-warm); } .search-input::placeholder { color: var(--text-3); } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--text-3); fill: none; stroke-width: 1.8; } / TIME PICKER / / NOTIFICATION DOT / / SOUND CHIP / / HELPERS / / .h1-display composes .hero-title in markup; lh:1.1 and ls:-.5 match .hero-title's tokens. / .h1-display { font-family: var(--font-body); font-weight: 700; font-style: normal; } .h1-display .accent { font-style: normal; color: var(--sage); } NEVER a button. Per the one-accent rule, warm peach (--amber) carries status meaning only — it must never be tappable. This rule hardens that contract: no pointer cursor, no hover lift, no user-select shimmer. If a future surface needs a tappable streak control { display: flex; align-items: center; gap: var(--s-2); background: rgba(212,165,116,.1); border: 1px solid rgba(212,165,116,.22); border-radius: 999px; padding: var(--s-2) var(--s-3h); width: fit-content; cursor: default; user-select: none; } / Status-dot pulse: opacity-only breath, no scale oscillation. Reads as a "live" indicator without violating the no-oscillation rule. The dot itself doesn't grow; its glow fades in and out. / @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--sage); } 50% { opacity: .55; box-shadow: 0 0 10px var(--sage); } } / HEART / FAVORITE BUTTON / / heartPop: asymptotic settle — swells once and eases home with no bounce. Apple-style "the heart took notice" rather than a cartoon spring. Curve = iOS standard. / @keyframes heartPop { from { transform: scale(.88); } to { transform: scale(1); } } / DIFFICULTY CHIP / / INFO BUTTON / / Batch A #5 — Hit-area extension: 22px button gets a ~44px tap zone. / / TECHNIQUE MODAL OVERLAY / .tech-modal-overlay { / Frosted-navy surface comes from the shared .sheet-scrim alongside. / position: absolute; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; justify-content: flex-end; animation: overlayIn var(--dur-state) var(--ease-ios); } @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes sheetDown { from { transform: translateY(0); } to { transform: translateY(100%); } } / ─── REUSABLE BOTTOM-SHEET PRIMITIVES ─────────────────────────── ONE canonical definition for sheet titles and rows, shared by every bottom sheet (sound, reminders sub-sheets, save-preset, tech/tuning modal). New sheets compose these instead of forking per-sheet classes. .sheet-title — typography matches the tech-modal title (the reference the rest of the app aligns to). Alignment/margin are deliberately NOT baked in: a sheet centers its title with .sheet-title--center (reminders sub-sheets) without forking the type spec. .sheet-row — the standard row metric (= .settings-row): 14px gap, 14px/16px padding, 56px min-height. Surface/border/hover stay on the per-context class that sits alongside it in the markup. / .sheet-title { font-family: var(--font-body); font-size: var(--fs-h3); / 19px / font-weight: 700; letter-spacing: -.3px; line-height: 1.15; color: var(--text); margin: 0; } .sheet-title--center { flex: 1; text-align: center; } .sheet-row { display: flex; align-items: center; gap: var(--s-3h); / 14px / padding: var(--s-3h) var(--s-4); / 14px / 16px / min-height: 56px; } / .row-icon — the canonical BARE row glyph (no tile box): a 24px line icon sitting inline with the row text. Shared by every list/row icon (settings, modal-row, reminder-opt, stats milestones + calendar). Color is NOT set here — the context provides it (own color, .amber, or a .tile-sage class for the glyph hue). No background — the companion class resets any tile-* fill. (.tile-moon was the moon-tinted partner; removed 2026-06-04 when the wisdom sheet went; reintroduce as a pair if a moon site returns.) / .row-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .row-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.7; fill: none; } / .sheet-scrim — the canonical frosted-navy scrim behind every bottom sheet / modal / sub-sheet overlay. Reads as the blurred page canvas, NOT a black wash. The overlay class alongside owns position/inset/z-index/flex/animation; .sheet-scrim owns only the surface. / .sheet-scrim { background: rgba(6, 14, 26, 0.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .tech-modal-sheet { / CANONICAL SHEET BACKGROUND — page canvas, not navy. Every bottom sheet in the app rises from the page, so it must read as the same surface family as the canvas behind it, never as a competing navy slab. This is the DEFAULT so new sheets are correct by birth — no per-sheet override required. A sheet that genuinely wants a raised navy fill must opt IN explicitly (none currently do). Previously this defaulted to var(--grad-lift-v), which made every unstyled sheet (Edit Profile, Composer) navy until someone remembered to override it — the root cause of the recurring navy-sheet bug. --grad-sheet is the same dark premium gradient the Sound sheet uses, so every sheet now matches it by default. / background: var(--grad-sheet); border-top: 1px solid var(--white-veil); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 0 0 calc(28px + var(--safe-bottom)); / Sheet entry — iOS asymptotic curve. Settles, no overshoot. / animation: sheetUp var(--dur-card) var(--ease-ios); position: relative; overflow: hidden; / 2026-06-04 — will-change: transform per user audit ('there's a bit jumpy animation when I tap any breathing tech from library and home'). Same fix #reminders-sheet already had; the base .tech-modal-sheet was missing it. Without the hint, iOS Safari composites the sheet on the main thread for the first frame of the slide-up, then promotes it mid-animation — that compositor- layer handoff is exactly what reads as a 'jump' on the way up. Stamping will-change: transform here pre-promotes the sheet to its own GPU layer before the animation starts, so the slide is buttery from frame zero. / will-change: transform; / Never extend past the safe-area-top — keeps the rounded top edge of the sheet clear of any notch / status-bar chrome. / max-height: calc(100dvh - var(--safe-top) - 8px); } .tech-modal-sheet::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sage-290), transparent); } .modal-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--white-edge); margin: var(--s-3h) auto 0; } .modal-header { display: flex; align-items: flex-start; gap: var(--s-3h); padding: var(--s-4h) var(--s-5) var(--s-4h); } .modal-icon-wrap { width: 52px; height: 52px; border-radius: var(--r-lg2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; / Bare line icon — no tile; category color + glow (matches Library/Home). / color: var(--tint, var(--sage)); } .modal-icon-wrap svg { width: 38px; height: 38px; stroke-width: 1.6; fill: none; filter: drop-shadow(0 0 9px rgba(var(--tint-rgb, 125,211,232), .5)); } / PHASE BREAKDOWN STEPS / / Cycle-breakdown list — compact, hairline-separated rows. No own padding: the rows align to the modal-body gutter (like the eyebrows), and a 1px divider separates them. Vertical spacing comes from the tab-pane gap. / .phase-steps { display: flex; flex-direction: column; } .phase-step { display: flex; align-items: center; gap: var(--s-3h); padding: var(--s-2h) 0; } .phase-step:first-child { padding-top: 0; } .phase-step + .phase-step { border-top: 1px solid var(--border); } .phase-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--fs-caption); / lint-skip CAT-T2: sizes the number glyph inside a 32px phase-step circle, not body caption / font-weight: 700; font-family: var(--font-body); } .phase-label { font-weight: 500; letter-spacing: .1px; margin-bottom: 1px; } .phase-sub { font-size: var(--fs-label); color: var(--text-2); } .phase-dur { margin-left: auto; flex-shrink: 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.3px; line-height: 1; } .phase-dur-unit { font-size: var(--fs-mini); color: var(--text-3); font-family: var(--font-body); font-weight: 500; letter-spacing: .5px; } / Duration column → right-aligned flex column with a stable min-width. The display-font numerals aren't tabular, so "5.5" sits wider than "4"/"8"; anchoring the column to flex-end (+ a fixed min-width) keeps the right edge of the value and the SEC label below it aligned row-to-row, whatever the digit count. Scoped to .phase-step so the shared .u-text-right utility is untouched. (2026-06-13.) / .phase-step .u-text-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; min-width: 3ch; } / Loop indicator below the .phase-steps stack — used by Power Breath to signal that the 3 numbered stages repeat each round. Other techniques leave the slot empty (numbered cycles are obviously looped). / .phase-steps-loop { color: var(--text-3); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border); text-align: center; letter-spacing: .2px; } / BENEFIT PILLS / / No own padding — aligns to the modal-body gutter like the cycle list. / / 2-col grid (was flex-wrap): every technique carries exactly 4 benefits, so a greedy wrap left the 4th chip orphaned on its own row. A fixed 2×2 grid keeps the rows balanced and the block structurally even. Pills stretch to fill their column with centered content; min-width:0 + nowrap keep a long label (e.g. "Emotional regulation") from blowing out the column. (2026-06-13.) / .benefit-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1h); } .benefit-pill { / Checkmark removed 2026-08-06 (user) — label only; the pill chrome IS the "benefit" signal, so the tick was redundant. gap/svg rule dropped with it. / display: inline-flex; align-items: center; justify-content: center; min-width: 0; white-space: nowrap; padding: var(--s-1) var(--s-2h); border-radius: 999px; background: var(--sage-soft); border: 1px solid var(--sage-130); font-size: var(--fs-mini); font-weight: 600; color: var(--text-2); letter-spacing: .5px; } / The label truncates with an ellipsis inside its column (the pill's min-width:0 above lets it shrink); without this a long benefit like "Emotional regulation" spilled past the pill on a narrow phone — the older comment claimed nowrap alone truncated, but it doesn't. / .benefit-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } / EXPANDED DESCRIPTION PANEL / / MODAL ACTION BUTTONS / / PRE-SESSION TUNING CARDS / / Duration chips / / Soundscape chips / / SVG inside a soundscape chip — pulls currentColor from .snd-chip / / Small rounded square tile holding an SVG glyph in the audio sheet rows. Used by Background music / Breath cues / Voice guidance rows. Color & background are set inline so each row keeps its accent. / / Binaural chips / / Binaural chip selection: mint per the one-accent rule — / / Pre-session toggle pill / .ps-tog { width: 40px; height: 24px; border-radius: 999px; / Off-track: lighter than --white-line (0.10 hairline) so the pill reads against the navy canvas even in glare. --white-grip (0.22) is the handle/ affordance-rest token — right family for a switch track. / background: var(--white-grip); border: none; position: relative; cursor: pointer; padding: 0; flex-shrink: 0; transition: background var(--dur-state); } / Invisible 48×48 hit area (centered) so the small 40×24 pill still meets the mobile minimum touch target without changing its painted size. / .ps-tog::before { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); } .ps-tog.on { background: var(--sage); } .ps-tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; / OFF knob: soft cool-gray, not pure white — a bright white pip on a dark canvas pulls the eye toward things that are switched OFF. The knob brightens to full white only in the ON state below. / background: var(--toggle-off-knob); transition: left var(--dur-state), transform var(--dur-tap), background var(--dur-state); box-shadow: var(--elev-1); } .ps-tog.on::after { left: 19px; background: var(--white); } .ps-tog:active::after { transform: scale(.92); } / Disabled "coming soon" rows (Voice guidance, Haptic feedback). Dim the icon, sub-label and toggle to ~45% and mute the title so the whole control reads as non-interactive (prevents rage-clicks) — but keep the SOON badge at full strength. Per-element, NOT whole-row opacity: the badge lives inside the title, so a parent opacity would drag it down with the text. Title is dimmed via color (not opacity) for the same reason — the badge sets its own color. / .modal-row.is-disabled .modal-row-icon, .modal-row.is-disabled .modal-row-sub, .modal-row.is-disabled .ps-tog { opacity: .32; } .modal-row.is-disabled .modal-row-title { color: var(--text-3); } .modal-row.is-disabled .ps-tog { cursor: not-allowed; } / SETTINGS LIST · in-row hairline cell separators / .settings-row { display: flex; align-items: center; gap: var(--s-3h); padding: var(--s-3h) var(--s-4); min-height: 56px; transition: background var(--dur-state) var(--ease-ios); } / Cell separator — every row after the first carries its own 1px / .settings-row + .settings-row { border-top: 1px solid var(--white-mist); } / MIGRATED → .state-target primitive (Wave 1, modals state-layer pass). The interactive (action) row now carries `state-target` from the JS builder; the veil below owns the hover fill. Neutral white ink (a sage veil on this navy panel would read as a color cast) and a per-surface --state-hover:.03 override so the hover stays PIXEL-IDENTICAL to the old var(--surface-soft-hover) (rgba 255,255,255,.03) — mechanism migrated, look unchanged. --state-radius:0 because the row is square; the parent .settings-list (border-radius + overflow:hidden) clips the veil to the rounded panel corners. The old `.settings-row[onclick]:hover, [data-action]:hover { background: var(--surface-soft-hover) }` pair is gone: grep-verified the builder (pages.js) emits data-action only, never onclick, so the [onclick] half was dead. / .settings-row.state-target { --state-ink: 255,255,255; --state-hover: 0.06; / unified card/row hover = 6% white (was .03) / --state-radius: 0px; cursor: pointer; } .settings-row-icon { / 2026-06-03 — dial-back from the morning 'borrow Library's icon treatment' commit (3a4d146). User direction: 'the weight of the icons at profile and settings too much' → drop the sage glow, pull the SVG back from 28→24px. The 48x48 wrapper stays as a transparent hit area so the icon column geometry is unchanged (rows still align to the same icon-left edge), but the visual presence comes back down toward the pre-today baseline. Library .tech-icon-wrap keeps its 28px + glow — the louder treatment fits tile-like primary actions, not Settings rows like 'Push notifications · On'. Safety row's inline rose color override still wins via currentColor cascade. / width: 48px; height: 48px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--sage); } .settings-row-icon svg { width: 24px; height: 24px; stroke-width: 1.7; fill: none; } .settings-row-body { flex: 1; min-width: 0; } .settings-row-sub { margin-top: 2px; color: var(--text-2); } .settings-row-trail { display: flex; align-items: center; flex-shrink: 0; color: var(--text-3); } / Legacy divider node — kept as a no-op so any stale markup in downstream branches doesn't open a 1px line break inside the panel. New code should rely on the .settings-row + .settings-row border-top above. / / EDIT-ACCOUNT BUTTON (under identity block) / / LANGUAGE PICKER (inline expand) / .lang-list { border-top: 1px solid var(--border); max-height: 280px; overflow-y: auto; scrollbar-width: thin; } .lang-list::-webkit-scrollbar { width: 4px; } .lang-list::-webkit-scrollbar-thumb { background: var(--border-warm); border-radius: 4px; } .lang-option { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-8); background: transparent; border: none; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--dur-state); font-family: var(--font-body); text-align: left; } .lang-option:last-child { border-bottom: none; } .lang-option:hover { background: var(--sage-tint); } / 2026-06-02 — active row's sage-soft background removed. The fill spanned from beneath the Language parent row down through the active English row, reading visually as 'English belongs to the header, Spanish is separate' — a false grouping (user audit). Active state now travels through the label color (sage) + the trailing checkmark instead of a background highlight, so every language option sits on the same surface and the divider between them is unbroken. / .lang-option.active .lang-option-label { color: var(--sage); } / .lang-option-label composes .body-text in markup for the size. / .lang-option-label { font-weight: 500; color: var(--text); } / 2026-06-02 — native-language sub-text bumped --text-3 → --text-2. At --text-3 the Español / Français / Deutsch line was so dim against the dark navy canvas it failed WCAG AA contrast. --text-2 keeps the visual hierarchy (still quieter than the primary label) while crossing the legibility line. / .lang-option-native { font-size: var(--fs-label); color: var(--text-2); } / — Reminder row + swipe-to-reveal-delete — The row sits in a wrapper that holds a hidden delete pad behind it. On swipe-left, the row translates to reveal the pad. Tap pad → delete. / / Flattened set-list panel / .m-set-list { background: var(--surface-soft); border: 1px solid var(--white-mist); border-radius: var(--r-lg); overflow: hidden; / clip the inner rows to the panel radius / } / Hairline separators between adjacent entries inside the panel. / .m-set-list > + * { border-top: 1px solid var(--white-mist); } /* Inner rows render flat — no per-row background tint, no per-row border-radius. The panel itself owns those properties. / .m-set-list .reminder-row { background: transparent; border-radius: 0; } / MIGRATED → .state-target primitive (Wave 1, modals state-layer pass). The reminder-row carries `state-target` from the JS builder (ui.js); the veil owns the hover fill. Same recipe as the settings row: neutral white ink, --state-hover:.03 to hold the exact old var(--surface-soft- hover) look, --state-radius:0 (the row is square; first/last-child rounding + the list-wrap overflow:hidden clip the veil to the rounded list corners). The veil's ::after{inset:0} rides the row's swipe transform correctly, and the swipe class is `.swipe-dragging` (not the primitive's `.is-dragging`), so no drag-state collision. NOTE — intentionally NOT touched here (deferred to the dead-code sweep, not silently deleted): the standalone `.reminder-row:hover` fallback and the `.reminders-active-list:not(.reminders-active-list-soft) .reminder- row[:hover]` pair below. The live builder always emits the `-soft` variant, so those :not(-soft) rules never fire today; each needs its own zero-reference verification before removal. / .m-set-list .reminder-row.state-target { --state-ink: 255,255,255; --state-hover: 0.06; / unified card/row hover = 6% white (was .03) / --state-radius: 0px; } .m-set-list .reminder-row-wrap { border-radius: 0; } .reminders-active-list .reminder-row-wrap:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; } .reminders-active-list .reminder-row-wrap:first-child .reminder-row { border-top-left-radius: 14px; border-top-right-radius: 14px; } .reminders-active-list .reminder-row-wrap:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } .reminders-active-list .reminder-row-wrap:last-child .reminder-row { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } .reminder-row-wrap { position: relative; overflow: hidden; background: transparent; } .reminder-row-wrap + .reminder-row-wrap { border-top: 1px solid var(--white-mist); } .reminder-row { / Row metric (flex, 14px gap, 14/16 padding, 56px min-height) comes from the shared .sheet-row alongside this class in the markup. / cursor: pointer; transition: background var(--dur-state) ease, transform var(--dur-state) var(--ease-ios); position: relative; background: transparent; z-index: 1; touch-action: pan-y; } .reminders-active-list:not(.reminders-active-list-soft) .reminder-row { background: var(--surface); / was hardcoded #11203a — now the canonical card token / } .reminder-row:hover { background: var(--white-tint); } .reminders-active-list:not(.reminders-active-list-soft) .reminder-row:hover { background: var(--white-tint); / subtle hover, matching the base .reminder-row:hover (was the heavier raised --surface-raised fill). / } / ── Swipe-to-reveal-trash (reminder rows + library preset rows) ────── The row sits in a .swipe-wrap that holds a .swipe-del-pad (trash button) pinned to the right, behind the row. Swiping the .swipe-row left reveals the pad (which fades in); tapping it commits the delete. / .swipe-wrap { position: relative; overflow: hidden; } .swipe-del-pad { position: absolute; top: 0; right: 0; bottom: 0; width: 72px; display: flex; align-items: center; justify-content: center; background: var(--rose-50); color: var(--rose); border: none; cursor: pointer; padding: 0; opacity: 0; transition: opacity var(--dur-state) ease; -webkit-tap-highlight-color: transparent; } .swipe-del-pad svg { width: 20px; height: 20px; } .swipe-wrap.swiping .swipe-del-pad, .swipe-wrap:has(.swipe-row.swipe-open) .swipe-del-pad { opacity: 1; } .swipe-row { position: relative; z-index: 1; transition: transform var(--dur-card) var(--ease-ios); } .swipe-row.swipe-dragging { transition: none; } .swipe-row.swipe-open { transform: translateX(-72px); } / Opaque only while swiping/open so the pad doesn't bleed through the otherwise-translucent row; resting rows stay transparent (unchanged). / .swipe-row.swipe-dragging, .swipe-row.swipe-open { background: var(--bg-1); } .reminder-body { flex: 1; min-width: 0; } / .reminder-meta composes .caption in markup for the size (12px). Color --text-3 matches the canonical subtitle pattern across the app. / .reminder-meta { color: var(--text-3); display: flex; align-items: center; gap: var(--s-1h); flex-wrap: wrap; } .reminder-meta .dot-sep { opacity: .5; } .reminder-meta .countdown { color: var(--sage); font-weight: 500; } / Reminder row time-lead — the time is rendered large (≈22px, ivory) and tucks the count metadata directly under it as a quiet subline — matching the typographic rhythm used on Profile, Library, and Stats. The "All Reminders" master toggle banner is intentionally absent: a global kill-switch belongs in Profile → Settings, not as permanent chrome on the most-used surface. Master toggle is still wired (remindersToggleMaster) and can be re-surfaced via Profile when needed. ─────────────────────────────────────────────────────────────── / / Bell-master toggle (header right slot) / / The bell lives ONLY in .reminders-topbar and must read as the SAME glassy disc as the X (base .icon-btn) — identical size, fill, hairline and --elev-1 lift — in BOTH themes. So the on/off states tint ONLY the GLYPH (sage when on, muted when off) and inherit the disc chrome from .icon-btn. Previously each state redefined the disc fill/border/shadow, which silently drifted from the .icon-btn base once it became a raised glass disc (2026-08-05) — the bell then read flat beside the X, and its hardcoded gradient couldn't match the light-theme disc either. Keeping only `color` here means the disc can never diverge again. (2026-08-11) / .rem-bell-master { position: relative; } .rem-bell-master.is-on { color: var(--sage); } .rem-bell-master.is-off { color: var(--text-3); } .rem-bell-master.is-off:hover { color: var(--text-2); } / When master is off, ALL the in-page content reads as paused. Anchored on #reminders-sheet now that the bell lives in the top bar (a sibling of the composer), not inside .rem-composer. / #reminders-sheet:has(.rem-bell-master.is-off) .rem-history-eyebrow, #reminders-sheet:has(.rem-bell-master.is-off) .reminders-active-list-soft { opacity: 0.62; transition: opacity var(--dur-state) var(--ease-ios); } / Inline chip next to the "Repeat" label — surfaces the current day-set label (e.g. "Mon-Fri") as a sage pill when something is picked, or a quiet ghost pill ("Select days") when empty. / / — Permission warning (when notifications denied/needed) — / .reminder-perm-warn { margin: 0 var(--s-5) var(--s-3); padding: var(--s-2h) var(--s-3h); display: flex; align-items: flex-start; gap: var(--s-2h); border-radius: var(--r-md); background: rgba(212,165,116,.08); border: 1px solid rgba(212,165,116,.22); color: var(--text-2); line-height: 1.45; / .reminder-perm-warn composes .caption in markup for the size; lh:1.45 matches .caption. / } .reminder-perm-warn svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--amber); fill: none; stroke: currentColor; stroke-width: 1.8; } .reminder-perm-warn b { color: var(--amber); font-weight: 600; } .reminder-perm-warn button { / Per one-accent rule, the action CTA on a warning banner is sage, / background: var(--sage); color: var(--on-sage); border: none; padding: var(--s-1) var(--s-2h); border-radius: 999px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .3px; cursor: pointer; margin-left: auto; flex-shrink: 0; font-family: var(--font-body); } / — Edit-form view — / / Reminder name input now uses the shared .field-input (03-primitives). / / — Icon palette — / / — Time picker — / / Scroll-Wheel Drum Time Picker / / Wheel container — FLAT. The bordered rounded chrome (1px border, 14px radius) was stripped; the wheel now sits directly on the sheet canvas like every other row group. The selection band below carries the only remaining affordance for which value is centered. / .reminder-time-wheel-wrap { display: flex; align-items: center; justify-content: center; gap: 0; background: transparent; border: 0; border-radius: 0; padding: 0 var(--s-4h); position: relative; overflow: hidden; height: 140px; } / Selection band — a subtle semi-transparent highlight box behind the centered row (native iOS/Android picker feel), instead of bare hairlines. Kept faint (--white-mist over the raised wheel surface) so it reads as a soft window, not the sage "gradient" pill that was removed earlier. Sits BEHIND the digits (z-index 0; the columns + colon are lifted to z-index 1 below). / .reminder-time-wheel-wrap::before { content: ''; position: absolute; left: var(--s-2); right: var(--s-2); top: 50%; transform: translateY(-50%); height: 48px; background: var(--white-mist); border: 0; border-radius: var(--r-md); pointer-events: none; z-index: 0; } / Top & bottom fade masks — fade into page canvas, not card. / / No edge fade-mask: it painted var(--bg) (#040912) over the top/bottom, which read DARKER than the --grad-sheet page and made the wheel look like a gradient card. Edge numbers are already dimmed via --text4 on the items, so the wheel now blends flat into the sheet. (Override copy in home.css was also removed — the fade was defined in TWO places.) / .reminder-wheel-col { flex: 1; height: 140px; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; position: relative; z-index: 3; } .reminder-wheel-col::-webkit-scrollbar { display: none; } .reminder-wheel-item { height: 44px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-family: var(--font-display); font-weight: 300; color: var(--text-3); cursor: pointer; transition: color var(--dur-tap); user-select: none; letter-spacing: .5px; } / Padding items (top & bottom) for centering edge values / .reminder-wheel-item.pad { height: 48px; pointer-events: none; visibility: hidden; } .reminder-wheel-sep { font-family: var(--font-display); font-size: var(--fs-h2-lg); font-weight: 300; / lint-skip CAT-T3: .reminder-wheel-sep — sizes the wheel separator glyph, not a title / color: var(--text-3); padding: 0 var(--s-1); z-index: 3; position: relative; pointer-events: none; line-height: 1; } / — Day-of-week picker — / / — Haptic / channel toggles in edit form — / .reminder-opt-icon { / Layout + 24px glyph from the shared .row-icon; this companion only resets the tile-sage box fill. / background: transparent; border: none; } .reminder-opt-body { flex: 1; min-width: 0; } / .reminder-opt-label composes .row-title in markup (16px / 500) — same list-row title style as Profile / Settings, so the reminder rows read as harmoniously as the rest of the app. Companion only sets the colour. / .reminder-opt-label { color: var(--text); } / .reminder-opt-sub composes .sub-text in markup — canonical row-sub pattern (12px / lh 1.45 / ls .1px / weight 400). The companion only overrides color (--text-3 → --text-2) since draft editor subs read as values the user is reviewing, not whisper-quiet helper text. / .reminder-opt-sub { color: var(--text-2); margin-top: 1px; } / — Unified sheet: collapsed list above editor — / / — Fixed footer for Set Reminder — / / — Sheet body scroll container — NO SCROLL in edit view — / .reminders-sheet-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: calc(var(--s-5) + var(--safe-bottom)); / full-page bottom clearance / flex: 1; } .reminders-active-list { margin: 0 var(--s-5); } .reminders-active-list::-webkit-scrollbar { width: 4px; } .reminders-active-list::-webkit-scrollbar-thumb { background: var(--white-film); border-radius: 2px; } .reminders-sheet-scroll::-webkit-scrollbar { width: 4px; } .reminders-sheet-scroll::-webkit-scrollbar-thumb { background: var(--white-film); border-radius: 2px; } / Reminders as a FULL PAGE (2026-07-20) — was a bottom sheet. Fills the whole overlay with a flush top bar (X left, bell right), no rounded sheet corners / bottom padding; the composer + list scroll inside. / #reminders-overlay { justify-content: stretch; animation: none; } / the sheet carries the page-fade-in / .reminders-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); flex-shrink: 0; padding: calc(12px + var(--safe-top)) max(var(--gutter), var(--safe-right)) var(--s-2) max(var(--gutter), var(--safe-left)); } / 3-column grid: X pinned left, title dead-centre on the page, bell right. / .reminders-topbar > :first-child { justify-self: start; } .reminders-topbar > :last-child { justify-self: end; } / Composes .page-title (--fs-h2) so it matches every other page title (History, Statistics); centred, single line. / .reminders-topbar-title { justify-self: center; text-align: center; white-space: nowrap; } #reminders-sheet { height: 100%; max-height: none; border-radius: 0; border-top: none; padding-bottom: 0; display: flex; flex-direction: column; will-change: opacity, transform; / Same entrance as a routed page (was the bottom-sheet slide-up). / animation: page-fade-in var(--dur-page) var(--ease-out-soft) both; / Flat --bg-0 page canvas (2026-07-21) — reminders is a full PAGE now, so it must match the other pages' background, NOT the --grad-sheet gradient every bottom SHEET uses. Overrides .tech-modal-sheet's --grad-sheet. / background: var(--bg-0); } / Scope every surface inside the sheet so they can't inherit navy. Card fill matches the home-screen cards exactly — the faint 2% --surface-soft wash over the canvas (was --white-veil 4%, which read as visibly more opaque than every other page). Flat, no gradient. / / Flat list-panel surface (the old .settings-card recipe): 2% --surface-soft fill, 6% --white-mist edge, --r-lg radius. (Kept in sync with the inline !important block in index.html, which is what actually renders — see [[index-inline-style-override]].) / / New Reminder sheet — FLAT. The id-scoped overrides that used to revive the .rem-device-card and .reminder-time-wheel-wrap chrome (surface fill, 1px white-mist border, 14px radius) are gone so the partial-level transparent rules can finally read through. The wheel sits directly on the sheet canvas; the Date/Repeat/Push/ Haptic rows sit on the canvas with their own hairlines between them; the "Your reminders" history list does the same. / #reminders-sheet .rem-device-cell { background: transparent; } #reminders-sheet .rem-device-cell-tap:hover { background: var(--white-mist); } #reminders-sheet .reminders-sheet-scroll { flex: 1; max-height: none; overflow-y: auto; / Flex column + composer flex:1 pushes the sticky Save CTA to the very bottom of the page even when the composer is short (full-page 2026-07-21). / display: flex; flex-direction: column; } #reminders-sheet .rem-composer { flex: 1; } / The handle becomes the swipe-grab affordance — applies to every / .tech-modal-sheet .modal-handle { cursor: grab; width: 44px; height: 5px; margin-top: var(--s-2h); transition: background var(--dur-tap) ease, transform var(--dur-tap) ease; position: relative; } .tech-modal-sheet .modal-handle::before { content: ''; position: absolute; / Halo: invisible tappable region around the pill. / inset: -20px -40px; / Ensure pointer events land on the pill, not the body behind. / pointer-events: auto; } .tech-modal-sheet .modal-handle:hover { background: var(--white-grip); } .tech-modal-sheet .modal-handle:active { cursor: grabbing; background: var(--white-grip-2); } .tech-modal-sheet.dragging { transition: none; animation: none !important; } .tech-modal-sheet.dragging .modal-handle { background: var(--white-bright); } / Composer grab wrapper: invisible container that lets the JS / .composer-grab { cursor: grab; user-select: none; } .composer-grab:active { cursor: grabbing; } / Reminders-specific override kept for back-compat (no longer strictly necessary now that the rules above are universal, but preserved so any reminders-specific tuning can attach here). / #reminders-sheet .modal-handle { cursor: grab; } #reminders-sheet.dragging { transition: none; } #reminders-sheet .modal-handle:active { cursor: grabbing; } / — Fire/flash animation when a reminder fires (visual confirmation even before the OS push appears) — / @keyframes reminderFire { 0% { box-shadow: 0 0 0 0 var(--sage-glow-peak); } 60% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } / — Inline toast that confirms a reminder fired (sits under top nav) — / .reminder-toast { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); background: var(--grad-lift); border: 1px solid var(--sage); border-radius: 999px; padding: var(--s-2h) var(--s-4h) var(--s-2h) var(--s-3h); display: flex; align-items: center; gap: var(--s-2h); box-shadow: var(--elev-2), var(--elev-glow-sage); z-index: var(--z-toast); animation: toastIn var(--dur-card) var(--ease-out-soft), toastOut var(--dur-state) var(--ease-ios) 3.7s forwards; max-width: 86%; } @keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, -10px); } } .reminder-toast-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--sage-170); color: var(--sage); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .reminder-toast-icon svg { width: 12px; height: 12px; stroke-width: 2; fill: none; } / .reminder-toast-text composes .caption in markup; lh:1.3 overrides .caption's 1.45 (tighter toast). / .reminder-toast-text { color: var(--text); line-height: 1.3; } .reminder-toast-text b { color: var(--sage); font-weight: 600; } / — Achievement-unlock toast — reader for S._newAchievements, shown on the session-complete screen (renderAchievementToast in achievements.js). A tappable pill routing to the achievements grid; --tier / --tier-glow are set inline per badge tier. Reuses toastIn/toastOut from the reminder toast above so entry/exit motion matches. Eyebrow/label compose .caption/.body-text in markup, so no font-size lives here. — / .ach-toast { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); background: var(--grad-lift); border: 1px solid var(--tier, var(--sage)); border-radius: var(--r-pill); padding: var(--s-2h) var(--s-4h) var(--s-2h) var(--s-2h); display: flex; align-items: center; gap: var(--s-3); box-shadow: var(--elev-2), 0 0 24px var(--tier-glow, transparent); z-index: var(--z-toast); animation: toastIn var(--dur-card) var(--ease-out-soft), toastOut var(--dur-state) var(--ease-ios) 4.2s forwards; max-width: 86%; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; } .ach-toast-badge { width: var(--icon-xl); height: var(--icon-xl); border-radius: var(--r-circle); background: var(--tier-glow, var(--sage-170)); color: var(--tier, var(--sage)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ach-toast-badge svg { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2; fill: none; } .ach-toast-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .ach-toast-eyebrow { color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; white-space: nowrap; / keep the eyebrow on one line so the pill sizes to it, not the shorter label / } .ach-toast-label { color: var(--text); font-weight: 600; white-space: nowrap; } / — Share-results clipboard-confirm toast — fires on the desktop fallback path of shareSessionResults() (mobile gets the native OS share sheet, no toast needed). Single line of body text, no icon; reuses the toastIn/toastOut keyframes the reminder toast above defines so the entry/exit animation matches without duplicating motion. / .share-toast { position: absolute; bottom: calc(120px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); background: var(--grad-lift); border: 1px solid var(--border-warm); border-radius: 999px; padding: var(--s-2h) var(--s-4); font-family: var(--font-body); font-size: var(--fs-caption); / lint-skip CAT-T2: toast button-style text, lh:1.45 would grow it / font-weight: 500; color: var(--text); letter-spacing: .1px; white-space: nowrap; box-shadow: var(--elev-2); z-index: var(--z-toast); animation: toastIn var(--dur-card) var(--ease-out-soft), toastOut var(--dur-state) var(--ease-ios) 1.8s forwards; pointer-events: none; } .boot-splash { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 38%, var(--sage-90) 0%, transparent 55%), radial-gradient(ellipse at 50% 80%, rgba(125,142,176,0.06) 0%, transparent 60%), linear-gradient(180deg, var(--bg-0) 0%, var(--bg-2) 60%, var(--card-1) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: var(--z-top); / main.js wipes us by replacing #app.innerHTML, but if anything ever needs to fade us out manually, this transition handles it. / transition: opacity .5s ease, visibility .5s ease; } / The breathing aura behind the logo / .boot-splash-aura { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, var(--sage-170) 0%, var(--sage-wash) 55%, transparent 75%); filter: blur(8px); animation: splash-breathe 3.6s ease-in-out infinite; pointer-events: none; } @keyframes splash-breathe { 0%, 100% { transform: scale(0.92); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } } / The orb mark — a glowing filled circle that pops in, then gently breathes (scale + glow) in sync with the aura, echoing the app's breathing orb. Replaced the retired triquetra (three stroke-drawn circles). / .boot-splash-mark { position: relative; width: 92px; height: 92px; margin-bottom: var(--s-6); animation: splash-pop 900ms var(--ease-out-soft) both; } / overflow:visible so the breathing scale + glow aren't clipped by the box. / .boot-splash-mark svg { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: center; filter: drop-shadow(0 0 14px var(--sage-100)); animation: splash-orb-breathe 3.6s ease-in-out infinite; } @keyframes splash-orb-breathe { 0%, 100% { transform: scale(.84); opacity: .9; } 50% { transform: scale(1); opacity: 1; } } @keyframes splash-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } } .boot-splash-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; letter-spacing: 6px; text-transform: uppercase; color: var(--text); opacity: 0; animation: splash-fade-up .8s ease .55s forwards; } .boot-splash-tagline { margin-top: var(--s-2h); font-size: var(--fs-label); font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-2); opacity: 0; animation: splash-fade-up .8s ease .75s forwards; } @keyframes splash-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: .9; transform: translateY(0); } } / The shimmering progress bar — pure aesthetic, no progress data / .boot-splash-bar { position: relative; margin-top: var(--s-6); width: 140px; height: 2px; border-radius: 999px; background: var(--sage-soft); overflow: hidden; opacity: 0; animation: splash-fade-up .8s ease .95s forwards; } .boot-splash-bar::after { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent 0%, transparent 0%, var(--sage-shimmer) 50%, transparent 100%); border-radius: 999px; filter: blur(.2px); animation: splash-shimmer 1.6s cubic-bezier(.5,0,.5,1) 1.1s infinite; box-shadow: 0 0 12px var(--sage-glow-peak); } @keyframes splash-shimmer { 0% { left: -40%; } 100% { left: 100%; } } / ════════════════════════════════════════════════════════════════ Batch A #6 — Reduced-motion support ──────────────────────────────────────────────────────────────── When the user has set their OS to reduce motion (System Settings → Accessibility), disable purely decorative animations: – page fade-in on route changes – sheet/modal slide-in – pulse dots, shimmer, heart-pop, check-pop, reveal-up – live-feed ring pulse, haptic ripple, phase flash, skeleton pulse – glow rings around the orb (purely aesthetic) What we DO NOT disable: – orb-inhale / orb-exhale (the breath cue itself — carries timing information; disabling would break the technique) – orbGlowInhale / orbGlowExhale (paired with the breath cue, same justification) HOLD has no animation by design (the orb stays still during the hold phase — the stillness is the cue), so there is nothing to restore for HOLD under reduced-motion. Reference: WCAG 2.3.3 "Animation from Interactions" / Apple HIG. ════════════════════════════════════════════════════════════════ / @media (prefers-reduced-motion: reduce) { / Nuclear catch-all: kill every animation by default. We then restore the orb-breathing animations below since those carry the breath cue and qualify as essential motion under WCAG 2.3.3. / , ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Restore the orb's breath-cue animations. These are the content of a breathwork session, not decoration. INHALE and EXHALE only — HOLD is static by design. / .orb-inner.phase-INHALE { animation-duration: var(--orb-inhale-dur, 4s), var(--orb-inhale-dur, 4s) !important; animation-iteration-count: 1, 1 !important; } .orb-inner.phase-EXHALE { animation-duration: var(--orb-exhale-dur, 8s), var(--orb-exhale-dur, 8s) !important; animation-iteration-count: 1, 1 !important; } / Restore functional (non-decorative) animations: / .reminder-toast { animation-duration: 0.35s, 0.3s !important; animation-iteration-count: 1, 1 !important; } / Static fallback for the orb during a session: When the orb can't animate its scale, add a colour-only border cue so the phase (inhale/hold/exhale) is still distinguishable without any motion. Colors must match PHASE_COLORS in constants.js: INHALE=sage, HOLD=amber, EXHALE=lavender. / .orb-inner.phase-INHALE { border-color: var(--sage-phase-border) !important; } .orb-inner.phase-HOLD { border-color: rgba(212,165,116,0.9) !important; } .orb-inner.phase-EXHALE { border-color: rgba(168,156,217,0.9) !important; } / Boot splash under reduced motion: orb static, no breathe/pop. / .boot-splash-aura { animation: none !important; opacity: .8 !important; } .boot-splash-mark { animation: none !important; } .boot-splash-mark svg { animation: none !important; transform: scale(1) !important; } .boot-splash-title, .boot-splash-tagline, .boot-splash-bar { animation: none !important; opacity: .9 !important; } .boot-splash-bar::after { display: none !important; } } / ════════════════════════════════════════════════════════════════ HOME SCREEN v2 (redesign) ──────────────────────────────────────────────────────────────── The redesigned Home is built around a clear visual hierarchy: 1. Greeting header — eyebrow + display title + streak strip 2. Quick pill — 1-Min Anxiety Relief shortcut 3. FOR YOU section — hero card + two mini cards in a grid 4. Bottom nav — handled by global .nav All new classes are prefixed `home-` to avoid colliding with the existing .lib-card / .streak-pill / .h2-display rules that other pages still use. ════════════════════════════════════════════════════════════════ / / The .screen container already provides flex + padding; we only tighten vertical rhythm specifically for the home route. / .home-screen { padding-top: 0; } / ════════════════════════════════════════════════════════════════ SAFETY OVERLAY — pre-session safety notice (pgSafetyOverlay). Extracted from inline styles; the overlay is fully static. Two raw rgba values have no token home and are intentionally kept literal: the scrim rgba(8,16,28,.92) and the moon clinical-note tint rgba(125,142,176,.08) (a --moon-50 token would be the clean follow-up). Off-scale snaps during extraction: overlay/card/header 20px→22px (--s-5 / --r-2xl), card pad 28/24→32/22, header clearance 36px→32px (--s-6), warning text 13px→14px (--fs-body), note corners 8px→9px (--r-sm), three .2s→var(--dur-state) animations. ════════════════════════════════════════════════════════════════ / .safety-overlay { / Frosted-navy surface comes from the shared .sheet-scrim alongside — unified with every other overlay (was a heavier rgba(4,7,11,0.92)). / position: fixed; inset: 0; z-index: var(--z-top); display: flex; align-items: center; justify-content: center; padding: var(--s-5); / was 20px / animation: fadeIn var(--dur-state) ease; / was .2s / } .so-card { background: var(--card); border: 1.5px solid var(--rose-100); border-radius: var(--r-2xl); / was 20px / max-width: 320px; width: 100%; / compact popup, not a full card / max-height: 82vh; overflow-y: auto; padding: var(--s-5) var(--s-4h) var(--s-4h); / tighter than the old 28/24 / box-shadow: 0 0 40px var(--rose-50); position: relative; } .so-close { / top:27 vertically centres the 32px X on the 42px shield tile: the shield starts at the card's --s-5 (22px) top padding, so its centre is 22+21=43px; the X centre matches at 27+16=43px. right:14 keeps the corner inset. / position: absolute; top: 27px; right: 14px; width: 32px; height: 32px; border-radius: var(--r-circle); background: var(--white-veil); border: 1px solid var(--white-line); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 1; transition: background var(--dur-state), color var(--dur-state), border-color var(--dur-state); } .so-close:hover { background: var(--white-film); border-color: var(--white-rule-2); color: var(--text); } .so-close:active { transform: scale(.94); } .so-close svg { width: 15px; height: 15px; } / Invisible touch-target — bumps the close button's hit area from 32×32 to the WCAG 2.5.5 / iOS HIG 44×44 floor without growing the visible disc. Pseudo catches taps in the larger bounding box; the click bubbles to the parent