/* Stuck Not Broken — app prototype styles. Brand: bone surface, ink type, Inter,
   weight 400/500, no bordered cards (except where they read as figures), no
   gradients on UI, restrained motion. State palette is meaning-bearing only. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root{
  --bone:#FAF9F5; --bone-deep:#F0EEE7; --hairline:#D8D2C2; --ink:#1A1F2A;
  --ink-80:#3A3F4A; --muted:#5E5A4E; --link:#0645AD;
  --sky:#5891C5; --leaf:#5BA070; --amber:#D29A4A;
  --s-safety:#F4D58D; --s-fight:#E89B9B; --s-shutdown:#A3C0DD;
  --s-play:#E8A871; --s-still:#9FC498; --s-freeze:#B89AC4; --s-unlit:#D8D2C2;
  /* practice track colors: mindfulness = ink, connect-with-safety = sky/blue, self-regulation = amber */
  --track-mind:#1A1F2A; --track-safety:#5891C5; --track-self:#D29A4A;
  /* darker "ink" versions of the track colors for small text (the raw track
     colors sit under 4.5:1 on bone). 2026-07-02, Justin's call: the darker ink
     ambers/blues read as unpleasant — light mode now uses the raw track colors
     for ink too (he judges them still legible at these sizes).
     rather than the darker ochre — darkened amber reads brown; this stays warm. */
  --track-safety-ink:#5891C5; --track-self-ink:#D29A4A; --track-mind-ink:#1A1F2A;
  --field:#fff; --knob:#fff; --danger:#9A3B3B; --raised:#FAF9F5; --backdrop:#E7E3DA; --press:#EAE7DE; --scale-lo:#CEC8BB; --scale-hi:#3A3730; --link-soft:rgba(6,69,173,.4); --tg-dim:#C9C3B4;
  --btn-hover:#2A3040; --ease:cubic-bezier(.2,.6,.2,1);
  --ink-faded:rgba(26,31,42,.25);   /* untouched check-in rails: present, clearly not "done" */

  /* ---------- fluid interface tokens (Phase 1, 2026-07-10) ----------
     Mirrored from Web Designer's snb-web.css so the app and the site don't drift.
     Additive only: nothing below is consumed yet except the type ramp and heading
     weight. Phases 2-4 replace by-eye spacing with these roles. */

  /* spacing scale — 8px base, same numbers as the site */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:80px; --sp-10:96px;
  /* semantic roles — reach for these, not the raw scale */
  --space-bound:var(--sp-2);    /* label to its control */
  --space-snug:var(--sp-3);     /* tight pairs */
  --space-stack:var(--sp-4);    /* within a component */
  --space-group:var(--sp-5);    /* between components */
  --space-block:var(--sp-6);    /* between blocks */
  --space-sub:var(--sp-7);      /* between sub-sections */
  --space-section:var(--sp-8);  /* between sections */

  /* layout — clamp() is what makes it fluid instead of breakpoint-bolted */
  --page:1120px;                          /* focal content cap */
  --shell:1240px;                         /* shell cap (rail + content), Phase 2 */
  --pad-x:clamp(20px,5vw,40px);
  --gap:clamp(20px,4vw,32px);
  --section:clamp(64px,9vw,112px);
  --measure:66ch;                         /* reading line length; text is never full-bleed */

  /* type ramp — device-appropriate body (Justin, 2026-07-10): ~17px phone -> ~19px wide.
     Stepped by size class, not clamp(): CSS cannot derive a unitless ratio from vw,
     and the WHOLE scale (h1..h3 and ~213 calc sites) must ride the ramp together or
     the hierarchy inverts (h3 is 15px = body today).

     --type-user  = the person's own text-size setting (JS writes this; was --type-scale)
     --type-fluid = the device ramp
     --type-scale = the composed value every existing calc(Npx * var(--type-scale))
                    already reads — including the inline styles in app.js/player.html.
     Composing here means zero edits at the ~213 call sites, and the user's setting
     still multiplies on top of the device size exactly as before. */
  --type-user:1;
  --type-fluid:1.133;                     /* compact: 15 -> 17px */
  --type-scale:calc(var(--type-user) * var(--type-fluid));
  --fs-body:calc(15px * var(--type-scale));
}
@media (min-width:720px){ :root{ --type-fluid:1.2; } }    /* regular: ~18px */
@media (min-width:1120px){ :root{ --type-fluid:1.267; } } /* wide:    ~19px */
*{box-sizing:border-box}
html,body{margin:0;height:100%;touch-action:manipulation}
/* iOS paints a dark rectangle over tapped elements by default — our buttons
   carry their own press states, so the flash is just noise. */
*{-webkit-tap-highlight-color:transparent}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bone);color:var(--ink);
  font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;min-height:100svh;
}
button{font:inherit;color:inherit}

/* phone shell */
.phone{
  position:relative;width:min(390px,calc(100vw - 32px));height:min(844px,calc(100svh - 32px));
  border-radius:24px;
  background:var(--bone);overflow:hidden;display:flex;flex-direction:column;
}
@media (min-width:480px){
  /* framed (desktop/designer) view: contrast the backdrop and float the device so its edges read */
  body{ background:var(--backdrop); }
  .phone{ border-radius:44px; width:auto; height:min(860px,94svh); aspect-ratio:390/844; max-width:100vw;
    box-shadow:0 1px 0 rgba(0,0,0,.04), 0 22px 60px rgba(26,31,42,.18); border:1px solid rgba(26,31,42,.06); }
}
/* on a real phone, drop the device-frame margin and go edge-to-edge so the app uses the full screen */
@media (max-width:479px){ body{align-items:stretch;justify-content:stretch} .phone{ width:100vw; height:100svh; height:100dvh; border-radius:0; } }

/* boot: what shows between first paint and the app's first render (store/auth
   init). Bone screen; a quiet ring fades in only if boot takes longer than a
   beat, so fast launches never see it (HIG: launch screen ≈ first screen). */
.boot{flex:1;display:flex;align-items:center;justify-content:center}
.boot-ring{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--ink);opacity:0;animation:bootShow .5s .6s var(--ease) forwards,t-breathe 4s 1.1s var(--ease) infinite}
@keyframes bootShow{to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.boot-ring{animation:bootShow .5s .6s var(--ease) forwards}}

.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* app-like: content scrolls but never shows a scrollbar rail (matches the carousel) */
.scroll,.today,.gate{scrollbar-width:none}
.scroll::-webkit-scrollbar,.today::-webkit-scrollbar,.gate::-webkit-scrollbar{display:none}
/* +1px: every screen is always minutely scrollable, so iOS rubber-band overscroll
   works even when content fits — the native "screen gives when you pull" feel.
   overscroll-behavior:contain on .scroll keeps the bounce local (shell never moves). */
.view{min-height:calc(100% + 1px);display:flex;flex-direction:column;padding:22px 22px 26px}
/* reading screens keep a deliberately generous, book-like side margin */
.view.read{padding-left:30px;padding-right:30px}
.hidden{display:none !important}

/* type */
.eyebrow{font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
/* headings 600 (2026-07-10) — matches Web Designer so the app and the site read as
   one brand. Lowercase-500 UI labels elsewhere are unchanged; this is headings only. */
h1,h2,h3{font-weight:600;margin:0;letter-spacing:-.015em;text-wrap:pretty}
h1{font-size:calc(23px * var(--type-scale));line-height:1.2}
h2{font-size:calc(18px * var(--type-scale));line-height:1.28}
h3{font-size:calc(15px * var(--type-scale));line-height:1.3}
p{margin:0;text-wrap:pretty}
.muted{color:var(--muted)}
.lede{font-size:calc(15px * var(--type-scale));line-height:1.5;color:var(--ink-80)}
.tag{font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}

/* ---------- unified screen header ----------
   Every screen opens with the same block: a reserved eyebrow line (kept blank but
   present when a screen has no eyebrow, so the heading always lands at the same Y),
   one heading size, one lede. Same left edge, same rhythm, top-aligned everywhere. */
.scr-head{display:flex;flex-direction:column;margin:0 0 22px}
.scr-head .eyebrow{min-height:13px;margin:0 0 11px}
/* apple-style large title: the heading pins at the top of the scroller (so it
   holds still while the screen rubber-bands) and its content fades as you scroll
   into the page — JS sets --hfade from scrollTop (scroll-driven animations aren't
   on all cohort iOS versions yet). */
.scroll .scr-head{position:sticky;top:0;z-index:6;background:var(--bone);opacity:var(--hfade,1)}
/* the faded large title must not eat touches (Beth's day-1 bug, 2026-07-05):
   sticky at z6, it still intercepts taps at opacity 0 — the top check-in
   slider "stuck" under it. plain heads are display-only, so touches pass
   through; the reader head (archive button) re-enables while visible via
   the scroll fader in app.js. */
.scroll .scr-head{pointer-events:none}
.scroll .scr-head.read-head{pointer-events:auto}
/* the sticky strip spans the full screen width (cancels the .view side padding) so
   content slides cleanly under it instead of peeking through the gutters */
.scroll .scr-head{margin-left:-22px;margin-right:-22px;padding:0 22px 6px}
/* reader header keeps its own rhythm inside the shared sticky block */
.read .scr-head{margin-bottom:0}
.read .scr-head .read-time{margin-bottom:10px}
.scr-h{font-size:calc(22px * var(--type-scale));font-weight:500;line-height:1.24;letter-spacing:-.01em;color:var(--ink);margin:0;text-wrap:pretty}
.scr-lede{font-size:calc(15px * var(--type-scale));line-height:1.5;color:var(--ink-80);margin:11px 0 0;text-wrap:pretty}

/* in-screen prompt: one shared style for every short, sentence-case question/label
   that heads a group of controls — the check-in challenge, the practice builder's
   anchor/skill/silence. A leading hairline ties them together; sub to the heading. */
.dash-prompt{display:flex;align-items:center;gap:9px;font-size:calc(14.5px * var(--type-scale));line-height:1.35;font-weight:500;color:var(--ink-80);margin:0 0 14px;text-transform:none;letter-spacing:0;text-wrap:pretty}
.dash-prompt::before{content:'';flex:none;width:16px;height:1px;background:currentColor;opacity:.5}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  cursor:pointer;background:var(--ink);color:var(--bone);border:1px solid var(--ink);
  border-radius:10px;padding:13px 22px;font-weight:500;transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{background:var(--btn-hover)}
/* press state — a tap must acknowledge itself (HIG: always provide a press state) */
.btn:active{background:var(--btn-hover);transform:scale(.985)}
.btn.quiet:active{background:var(--press);transform:scale(.985)}
.btn.block{width:100%;padding:15px 20px;font-size:calc(15px * var(--type-scale));border-radius:12px;min-height:52px}
.btn.quiet{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.quiet:hover{border-color:var(--ink-80)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.linkbtn{background:none;border:0;color:var(--link);cursor:pointer;text-decoration:underline;
  text-decoration-color:var(--link-soft);text-underline-offset:2px;padding:6px 2px;font:inherit;font-size:calc(14px * var(--type-scale))}
.linkbtn:hover{text-decoration-color:var(--link)}
.backbtn{background:none;border:0;cursor:pointer;font:inherit;font-size:calc(14px * var(--type-scale));color:var(--muted);padding:6px 2px;display:inline-flex;align-items:center;gap:5px;transition:color .15s var(--ease)}
.backbtn::before{content:'';display:inline-block;width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);flex:none}
.backbtn:hover{color:var(--ink)}
.backbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}

/* dividers */
.hr{height:1px;background:var(--hairline);border:0;margin:22px 0}

/* ---------- auth / paywall ---------- */
.gate{justify-content:flex-start;gap:0;text-align:left;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.gate .mark{height:22px;margin-bottom:auto}
.gate-body{margin:auto 0}
/* T-1: the one-breath invitation on the sign-in gate */
.gate-breath{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;background:none;border:0;cursor:pointer;padding:6px 0 4px;margin:0 0 22px;color:inherit}
.gb-ring{width:104px;height:104px;border-radius:50%;border:1.5px solid var(--ink);opacity:.66;animation:t-breathe 9s var(--ease) infinite;will-change:transform,opacity}
.gb-txt{font-size:calc(13px * var(--type-scale));color:var(--muted)}
.gate-breath:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:12px}
@media (prefers-reduced-motion:reduce){.gb-ring{animation:none;opacity:.5}}
/* session-end: quiet links, no slab */
.endlink{display:block;margin:0 auto;background:none;border:0;cursor:pointer;color:var(--muted);font-size:calc(15px * var(--type-scale));padding:10px 6px}
.endlink.lead{color:var(--ink);font-weight:500;font-size:calc(18px * var(--type-scale));margin-bottom:4px}
.endlink:active{opacity:.55}
.endlink:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:calc(12.5px * var(--type-scale));font-weight:500;letter-spacing:.04em;color:var(--muted)}
.field input{font:inherit;font-size:calc(15px * var(--type-scale));padding:11px 13px;border:1px solid var(--hairline);
  border-radius:10px;background:var(--field);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--ink)}
.plan{border:1px solid var(--hairline);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:border-color .2s var(--ease)}
.plan:hover{border-color:var(--ink-80)}
.plan.on{border-color:var(--ink);border-width:2px;padding:17px}
.plan .price{font-size:calc(21px * var(--type-scale));font-weight:600;letter-spacing:-.02em}
.plan .price .per{font-size:calc(13px * var(--type-scale));font-weight:400;color:var(--muted);letter-spacing:0}
.plans{display:flex;flex-direction:column;gap:12px;margin:18px 0 22px}
.fineprint{font-size:calc(12.5px * var(--type-scale));color:var(--muted);margin-top:14px;line-height:1.5}
.fineprint a{color:var(--link);text-decoration:underline;text-decoration-color:var(--link-soft);text-underline-offset:2px}
.fineprint a:hover{text-decoration-color:var(--link)}
.autherr{font-size:calc(13.5px * var(--type-scale));color:var(--danger);margin:4px 0 0;line-height:1.45}

/* ---------- header ---------- */
.appbar{display:flex;align-items:center;justify-content:space-between;padding:max(20px,env(safe-area-inset-top)) 20px 8px;flex:none}
.appbar .mark{height:18px}
/* .appbar .who removed — name used contextually in content */

/* ---------- today: progressive stack of three daily wins ---------- */
/* ---------- today: one grounded column ---------- */
.today{height:100%;display:flex;flex-direction:column;gap:11px;padding:22px 22px 18px;overflow-y:auto}
.today-greet{display:flex;flex-direction:column;gap:2px}
.t-greet{font-size:calc(22px * var(--type-scale));font-weight:500;color:var(--ink);margin:0;line-height:1.2}
.wincard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;border:1px solid var(--hairline);border-radius:14px;padding:17px 18px;cursor:pointer;color:inherit;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),opacity .45s var(--ease),padding .45s var(--ease)}
.wincard:active{background:var(--bone-deep)}
@media(hover:hover){.wincard:hover{border-color:var(--ink-80)}}
.wincard:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* the breath ring lives in a contained, calm module so it leads without crowding the stack */
.breathhero{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;background:var(--bone-deep);border:0;border-radius:18px;cursor:pointer;color:inherit;text-align:left;padding:16px 19px 15px;transition:opacity .6s var(--ease),background .6s var(--ease)}
.bh-stage{display:flex;align-items:center;justify-content:center;width:100%;position:relative}
.bh-rowwrap{position:relative;width:100%;margin-top:12px}
.bh-row{display:flex;align-items:center;gap:14px;width:100%;transition:opacity .6s var(--ease)}
.bh-phase{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(19px * var(--type-scale));font-weight:500;color:var(--ink-80);letter-spacing:.08em;text-transform:lowercase;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.bh-phase.show{opacity:1}
.breathhero:active{background:var(--press)}
.breathhero:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.breathhero .wc-ring{width:clamp(74px,14vh,96px);height:clamp(74px,14vh,96px)}
.breathhero .wc-ring .t-core{width:7px;height:7px}
.bh-title{font-size:calc(16px * var(--type-scale));font-weight:500;color:var(--ink);text-wrap:pretty;margin:0;line-height:1.25}
.bh-hint{font-size:calc(12.5px * var(--type-scale));color:var(--muted);margin-top:5px;letter-spacing:.02em;transition:opacity .4s ease}
.breathhero.is-done .bh-hint{display:none}
/* breathing focus: every other element fades so only the ring remains, and the tile dissolves */
.today-greet,.from-justin,.appbar,.tabbar,.today > *{transition:opacity .9s var(--ease)}
body.breathing .appbar,
body.breathing .tabbar,
body.breathing .today:not(.tb) > :not(.breathhero){opacity:0;pointer-events:none}
body.breathing .breathhero{background:transparent}
body.breathing .breathhero .bh-row{opacity:0}
/* completed cards shrink and fade back */
.wincard.done{opacity:.65;padding:13px 18px}
/* From Justin as the 4th card: a note, not a task — text clamps so the column fits one screen */
.from-card{align-items:flex-start}
/* card body text — one rule shared by the recommended-practice reason and the From
   Justin note, so secondary body copy reads the same everywhere */
.wc-reason,.wc-fj-text{font-size:calc(13px * var(--type-scale));color:var(--ink-80);line-height:1.5;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* card-footer text link: shares .navlink, left-aligned to the card content, 6px lead-in */
.wc-fj-more{align-self:flex-start;margin-top:6px}
.wc-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.wc-title{font-size:calc(16px * var(--type-scale));font-weight:500;color:var(--ink);line-height:1.25;text-wrap:pretty}
.wc-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:500;margin-bottom:2px}
.wc-reason{margin-top:4px}
.wc-sub{font-size:calc(13px * var(--type-scale));color:var(--muted);line-height:1.3;text-wrap:pretty}
.wincard.done .wc-title{color:var(--muted);font-weight:400}
/* right affordance: chevron (to do) → check (done) */
.wc-aff{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--hairline)}
.wc-check{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center}
.wc-check::after{content:"\2713";color:var(--ink);font-size:11px;line-height:1;font-weight:500}
/* the breath card's affordance is a living ring — stays subtly alive, calmer once taken */
.wc-ring{flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;opacity:.6;animation:t-breathe 9s var(--ease) infinite;will-change:transform,opacity}
.wc-ring .t-core{width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.7}
.wincard.done .wc-ring{border-color:var(--muted);opacity:.45;animation-duration:13s}
@keyframes t-breathe{0%,100%{transform:scale(.86);opacity:.5}50%{transform:scale(1.06);opacity:.66}}
@media (prefers-reduced-motion:reduce){.wc-ring{animation:none;transform:scale(.96)}}
/* state label (current-tab timeline) */
.state-name{font-size:calc(13px * var(--type-scale));font-weight:500;letter-spacing:.04em;text-transform:lowercase;color:var(--ink-80)}
/* tappable today rows now carry a single right-chevron affordance (replaces blue links) */
.wc-go{flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:transform .18s var(--ease),color .2s var(--ease)}
.wc-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.wincard:hover .wc-go{color:var(--ink-80);transform:translateX(2px)}}
.from-card .wc-go{align-self:center}
.wincard.done .wc-go{color:var(--hairline)}

/* recommendation card (reads as a figure, light rule allowed) */
.reco{border:1px solid var(--hairline);border-radius:14px;padding:20px;margin-top:6px;display:flex;flex-direction:column;gap:12px}
.reco .why{font-size:calc(15px * var(--type-scale));line-height:1.55;color:var(--ink-80)}
.reco .head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.reco h3{font-size:calc(18px * var(--type-scale))}
.reco .meta{font-size:calc(13.5px * var(--type-scale));color:var(--muted);margin-top:-4px}
.reco .adapt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;vertical-align:baseline}

.section-label{margin:26px 0 12px}

/* mini trend strip */
.trendstrip{display:flex;gap:4px;align-items:flex-end;height:46px}
.trendstrip .bar{flex:1;border-radius:3px 3px 0 0;min-height:6px;opacity:.9}
.trend-cap{font-size:calc(12.5px * var(--type-scale));color:var(--muted);margin-top:8px}

/* ---------- check-in ---------- */
.sliders{display:flex;flex-direction:column;gap:16px;margin:8px 0 4px}
.slider{display:flex;flex-direction:column;gap:8px}
.slider .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.slider .nm{font-size:calc(14px * var(--type-scale));font-weight:500}
.slider .nm .sub{font-weight:400;color:var(--muted);font-size:calc(13px * var(--type-scale));margin-left:7px}
.slider .amt{font-size:calc(12px * var(--type-scale));color:var(--muted);letter-spacing:.04em;text-transform:lowercase}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;margin:0;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--bone-deep),var(--rail,var(--bone-deep)));transition:background .3s var(--ease)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--bone-deep),var(--rail,var(--bone-deep)));transition:background .3s var(--ease)}
.r-v{--rail:var(--s-safety)}
.r-sym{--rail:var(--s-fight)}
.r-dor{--rail:var(--s-shutdown)}
.r-freeze{--rail:var(--s-freeze)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--knob);border:2px solid var(--ink);margin-top:-11px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--knob);border:2px solid var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
/* current / checkin figures — full-bleed, breaks out of view padding */
.timeline-figure{flex:1;display:flex;flex-direction:column;justify-content:center;margin:18px 0 0}
.checkin-top{flex:1;display:flex;flex-direction:column}
.checkin-figure{flex:1;display:flex;flex-direction:column;justify-content:center;margin:36px 0 0}
.note-area{width:100%;font:inherit;font-size:calc(14px * var(--type-scale));padding:12px 13px;border:1px solid var(--hairline);border-radius:10px;background:var(--field);resize:none;min-height:70px;color:var(--ink)}
.note-area:focus{outline:none;border-color:var(--ink)}

/* ---------- current over time ---------- */
.timeline-figure{margin:6px 0 2px}
.playbar{display:flex;align-items:center;gap:14px;margin:14px 0 6px}
.period-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.period-pill{font:inherit;font-size:calc(12.5px * var(--type-scale));cursor:pointer;white-space:nowrap;background:transparent;color:var(--muted);border:1px solid var(--hairline);border-radius:999px;padding:5px 13px;line-height:1.4;transition:border-color .2s var(--ease),color .2s var(--ease),font-weight .1s}
.period-pill:hover{border-color:var(--ink-80);color:var(--ink-80)}
.period-pill.on{border-color:var(--ink);color:var(--ink);font-weight:500}
.period-pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:999px}
.playbtn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}

.playbtn svg{width:16px;height:16px;fill:var(--ink)}
.scrub{flex:1}
.scrub input{width:100%}
.scrub input::-webkit-slider-runnable-track{background:var(--hairline)}
.when{font-size:calc(12.5px * var(--type-scale));color:var(--muted);min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.river{display:flex;height:34px;border-radius:6px;overflow:hidden;margin-top:6px}
.river .seg{flex:1;min-width:3px}
.river-cap{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:7px}
.statelegend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:18px}
.statelegend .it{display:flex;align-items:center;gap:7px;font-size:calc(12.5px * var(--type-scale));color:var(--muted)}

/* empty states */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;flex:1;color:var(--muted);padding:30px 10px}

/* ---------- practice (weaver) ---------- */
.weaver-wrap{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.weaver-frame{flex:1;width:100%;border:0;min-height:0;background:var(--bone)}
/* quiet placeholder while the player document loads — never a blank screen after "begin" */
.weaver-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bone);z-index:1;transition:opacity .45s var(--ease)}
.weaver-loading.gone{opacity:0;pointer-events:none}
/* N-3 (light): the ring GROWS IN as the practice loads — the plan's ring becoming
   the player's circle, one continuous object from intention to practice */
.weaver-loading .wl-ring{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);opacity:.6;animation:wlIn .7s var(--ease) both,t-breathe 4s .7s var(--ease) infinite}
@keyframes wlIn{from{transform:scale(.45);opacity:0}to{transform:scale(1);opacity:.6}}
.weaver-loading .wl-txt{font-size:calc(13.5px * var(--type-scale));color:var(--muted)}
@media (prefers-reduced-motion:reduce){.weaver-loading .wl-ring{animation:none;opacity:.45}}

/* ---------- you / account ---------- */
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid var(--hairline)}
.row:last-child{border-bottom:0}
.row .k{font-size:calc(14px * var(--type-scale));color:var(--muted)}
.row .val{font-size:calc(15px * var(--type-scale));font-weight:500}
.name-input{font:inherit;font-size:calc(15px * var(--type-scale));color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--hairline);padding:2px 0;flex:1;text-align:right;min-width:0}
.name-input:focus{outline:none;border-bottom-color:var(--ink)}
.name-input::placeholder{color:var(--hairline)}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .big{font-size:calc(24px * var(--type-scale));font-weight:600;letter-spacing:-.02em}
.stat .lbl{font-size:calc(12px * var(--type-scale));color:var(--muted)}
.stats{display:flex;gap:22px;margin:16px 0}

/* current ("you") tab — stats playground: swipe carousel + scrollable deep stats */
.play-view{padding:0 22px 78px;display:flex;flex-direction:column;gap:0}
.play-filter{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin-bottom:16px}
.pf-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-right:4px}
/* swipe carousel */
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
/* 92% panels: the next card peeks in from the edge so the carousel is discoverable */
/* card type loosened per HIG dynamic-type ratios (2026-07-05): small text
   carries proportionally MORE leading (footnote 13/18, subhead 15/20) — subs
   moved up to subhead size, body lines to ~1.65, a step of air between lines. */
.panel{flex:0 0 92%;scroll-snap-align:start;box-sizing:border-box;background:var(--bone);border:1px solid var(--hairline);border-radius:16px;padding:24px 22px;min-height:230px;display:flex;flex-direction:column}
.panel-title{font-size:calc(21px * var(--type-scale));font-weight:500;color:var(--ink);margin:0 0 7px;line-height:1.2}
.panel-sub{font-size:calc(14px * var(--type-scale));line-height:1.55;color:var(--muted);margin:0 0 18px;text-wrap:pretty}
.panel-empty{font-size:calc(14.5px * var(--type-scale));line-height:1.65;color:var(--muted);text-wrap:pretty;margin:8px 0 0}
/* safety hero + warmth bloom */
.safety-wrap{position:relative;display:flex;align-items:baseline;gap:12px;margin-top:2px}
.safety-num{font-size:calc(56px * var(--type-scale));font-weight:500;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.safety-num .pct{font-size:calc(24px * var(--type-scale));color:var(--muted);margin-left:1px}
.safety-trend{font-size:calc(14px * var(--type-scale))}
.safety-trend.rising{color:var(--leaf)}
.safety-trend.falling,.safety-trend.steady{color:var(--muted)}
.safety-meter{height:14px;background:var(--bone-deep);border-radius:7px;overflow:hidden;margin-top:18px}
.safety-meter-fill{display:block;height:100%;border-radius:7px;background:var(--s-safety);transition:width .6s var(--ease)}
.safety-foot{font-size:calc(14px * var(--type-scale));line-height:1.5;color:var(--muted);margin:12px 0 0;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.safety-foot b{font-weight:500;color:var(--ink-80)}
.safety-foot .st-marks{margin-left:1px}
.safety-range{font-size:calc(12.5px * var(--type-scale));color:var(--muted);margin:9px 0 0}
.bloom-line{font-size:calc(13.5px * var(--type-scale));color:var(--amber);margin:7px 0 0;opacity:0;animation:bloomline 1s .35s var(--ease) forwards}
@keyframes bloomline{to{opacity:1}}
.safety-num-val{display:inline-block}
/* legend */
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px}
.lg-it{display:flex;align-items:center;gap:6px;font-size:calc(12px * var(--type-scale));color:var(--muted);text-transform:lowercase}
.lg-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
/* does practice help */
.help-bars{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.help-row{display:flex;align-items:center;gap:11px}
.help-lbl{flex:none;width:100px;font-size:calc(14px * var(--type-scale));color:var(--ink-80)}
.help-track{flex:1;height:14px;background:var(--bone-deep);border-radius:7px;overflow:hidden}
.help-fill{display:block;height:100%;border-radius:7px;transition:width .6s var(--ease)}
.help-pct{flex:none;width:40px;text-align:right;font-size:calc(13.5px * var(--type-scale));color:var(--muted);font-variant-numeric:tabular-nums}
.help-verdict{font-size:calc(14px * var(--type-scale));line-height:1.55;color:var(--ink-80);margin:18px 0 0;text-wrap:pretty}
.help-verdict.good{color:var(--leaf)}
/* "how you come back" card: defense dot -> path draws itself -> safety dot */
.cb-viz{display:flex;align-items:center;gap:9px;margin:14px 0 16px}
.cb-dot{width:15px;height:15px;border-radius:50%;flex:none}
.cb-path{flex:1;height:2.5px;border-radius:2px;background:linear-gradient(90deg,#E89B9B,#F4D58D);transform-origin:left;animation:cbDraw 1.4s .4s var(--ease) both}
.cb-end{animation:cbPop .4s 1.6s var(--ease) both}
.cb-line{font-size:calc(15.5px * var(--type-scale));line-height:1.65;color:var(--ink-80);text-wrap:pretty;margin:0}
.cb-line+.cb-line{margin-top:12px}
.cb-line b{font-weight:600;color:var(--ink)}
@keyframes cbDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cbPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.cb-path,.cb-end{animation:none}}

/* dots — real buttons now (tap to jump to a card); the visible dot stays 7px,
   the touch zone is 38px per dot */
.dots{display:flex;justify-content:center;gap:0;margin:0}
.dot-i{width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dot-i::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--hairline);transition:background .2s var(--ease),transform .2s var(--ease)}
.dot-i.on::before{background:var(--ink);transform:scale(1.15)}
.dot-i:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:50%}
/* deep stats (scroll) */
.deep{display:flex;flex-direction:column;gap:6px;margin-top:10px;border-top:1px solid var(--hairline);padding-top:18px}
.deep-block{padding:2px 0 10px}
/* proper section subheads, not caps eyebrows (Justin 2026-07-05; HIG: content
   sections get real headers — eyebrows are for metadata, not structure) */
.deep-h{font-size:calc(16px * var(--type-scale));font-weight:500;color:var(--ink);text-transform:lowercase;letter-spacing:0;margin:0 0 8px}
.deep-block{padding:8px 0 14px}
.deep-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--bone-deep)}
.deep-row:last-child{border-bottom:0}
.deep-lbl{font-size:calc(13.5px * var(--type-scale));color:var(--ink-80);text-transform:lowercase}
.deep-val{font-size:calc(13.5px * var(--type-scale));color:var(--ink);display:flex;align-items:center;gap:7px;text-transform:lowercase}
.deep-none{color:var(--hairline)}
.deep-pct{font-size:calc(12px * var(--type-scale));color:var(--muted);font-variant-numeric:tabular-nums}
.deep-foot{font-size:calc(12px * var(--type-scale));color:var(--muted);margin:8px 0 0;text-transform:lowercase}
/* you-tab card visuals (2026-07-05): week strip + streak dots */
.wk-strip{display:flex;gap:8px;align-items:flex-end;margin:12px 0 16px}
.wk-cell{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-height:34px;justify-content:flex-end}
.wk-dot{width:13px;height:13px;border-radius:50%;background:var(--bone-deep)}
.wk-dot.on{width:20px;height:20px;background:var(--s-safety)}
.wk-lb{font-size:calc(10.5px * var(--type-scale));color:var(--muted)}
.streak{display:flex;gap:9px;align-items:center;margin:12px 0 16px;flex-wrap:wrap}
.streak-dot{width:14px;height:14px;border-radius:50%;background:var(--s-safety)}
.streak-more{font-size:calc(12px * var(--type-scale));color:var(--muted)}
.cb-glyphs .cb-g{flex:none;display:inline-flex}
.cb-glyphs .st-marks{display:inline-flex;gap:3px;align-items:center}
.cb-glyphs .st-mark{width:24px;height:24px}
.wk-mark{display:inline-flex;align-items:center;justify-content:center;height:20px}
.wk-mark .snb-ico{height:19px;width:auto;display:block}
.help-lbl .st-marks{display:inline-flex;gap:2px;vertical-align:-2px;margin-right:6px}
.help-lbl .st-mark{width:12px;height:12px}
.ctx-practice{font-size:calc(13.5px * var(--type-scale));line-height:1.55;color:var(--muted);margin:14px 0 0;text-wrap:pretty}
.dist-bars{display:flex;flex-direction:column;gap:14px}
.distrow{display:flex;flex-direction:column;gap:7px;width:100%;background:none;border:0;padding:2px 0;cursor:pointer;color:inherit;font:inherit;text-align:left}
.distrow-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.distrow-name{font-size:calc(15px * var(--type-scale));color:var(--ink-80);text-transform:lowercase}
.distrow-pct{font-size:calc(13.5px * var(--type-scale));color:var(--muted);font-variant-numeric:tabular-nums}
.distrow-track{height:12px;background:var(--bone-deep);border-radius:6px;overflow:hidden;width:100%}
.distrow-fill{display:block;height:100%;border-radius:6px;transition:width .55s var(--ease)}
.distrow:active .distrow-track{opacity:.7}
@media(hover:hover){.distrow:hover .distrow-name{color:var(--ink)}}
/* over time */
.overtime{margin-bottom:6px}
.ot-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.ot-readout{flex:1;font-size:calc(12.5px * var(--type-scale));color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.ot-play{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ot-play svg{width:13px;height:13px;fill:var(--ink)}
.ot-play:active{background:var(--bone-deep)}
.ot-strip{display:flex;align-items:flex-end;gap:4px;height:64px;overflow:hidden}
.ot-bar{flex:1;min-width:1px;border:0;border-radius:3px 3px 0 0;padding:0;cursor:pointer;opacity:.85;transition:opacity .2s var(--ease)}
.ot-bar.on{opacity:1;transform:scaleY(1.05);transform-origin:bottom}
.ot-strip:has(.ot-bar.on) .ot-bar:not(.on){opacity:.38}
/* play filter: full-width segmented control */
.play-filter.seg{display:flex;gap:3px;background:var(--bone-deep);border-radius:11px;padding:3px;margin-bottom:16px}
.play-filter.seg .period-pill{flex:1;border:0;border-radius:8px;padding:12px 0;font-size:calc(13px * var(--type-scale));color:var(--muted);background:transparent;white-space:nowrap}
.play-filter.seg .period-pill:hover{border:0;color:var(--ink-80)}
.play-filter.seg .period-pill.on{background:var(--raised);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.play-filter.seg .period-pill:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* share buttons on stat cards */
.panel{position:relative}
/* clear the share button fully: right padding for the title line AND a min-height
   so the subtitle starts BELOW the button (the sub has no right padding) */
.panel-title{padding-right:56px;min-height:38px;display:flex;align-items:flex-start}
.panel-share{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--hairline);background:var(--bone);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .18s var(--ease),color .18s,border-color .18s}
.panel-share svg{width:16px;height:16px}
.panel-share:hover{color:var(--ink);border-color:var(--ink-80);transform:translateY(-1px)}
.panel-share:active{transform:scale(.9)}
/* toast */
.app-toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,8px);background:var(--ink);color:var(--bone);font-size:calc(13.5px * var(--type-scale));padding:9px 17px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.app-toast.on{opacity:1;transform:translate(-50%,0)}
/* day-by-day: safety-warmth ribbon */
.arc-readout{font-size:calc(12.5px * var(--type-scale));color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;margin-bottom:11px}
.arc-wrap{position:relative;margin-bottom:26px}
.arc-ribbon{height:46px;border-radius:11px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.arc-axis{position:relative;height:13px;margin-top:8px}
.arc-tick{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--muted);white-space:nowrap}
.arc-tick:first-child{transform:translateX(0)}
.arc-tick:last-child{transform:translateX(-100%)}
.arc-scale{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted)}
.arc-scale-bar{flex:1;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--scale-lo),var(--scale-hi))}
@media (prefers-reduced-motion:no-preference){ .arc-ribbon{animation:growx .9s var(--ease);transform-origin:left center} }
/* day-by-day: line chart + safety/states toggle */
.chart-toggle{display:inline-flex;gap:2px;background:var(--bone-deep);border-radius:9px;padding:2px;margin:0 0 16px}
.ct-btn{border:0;background:transparent;border-radius:7px;padding:5px 14px;font:inherit;font-size:calc(12.5px * var(--type-scale));color:var(--muted);cursor:pointer}
.ct-btn.on{background:var(--raised);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.chart{display:block;width:100%;height:auto;margin:4px 0 10px;overflow:visible}
.chart .cx{font-size:9px;fill:var(--muted);font-family:inherit}
.cpt{cursor:pointer}
.cpt:hover{stroke-width:2.4}
/* sticky period filter + settings gear share the top row */
.filter-bar{position:sticky;top:0;z-index:6;background:var(--bone);margin:0 -22px 16px;padding:14px 22px 12px;display:flex;align-items:center;gap:12px}
.filter-bar .play-filter.seg{flex:1;margin-bottom:0}
.filter-bar .set-gear{flex:none;margin-left:0}
.ci-add svg{stroke-width:2}
/* floating new check-in */
.phone{position:relative}
.fab{position:absolute;left:22px;right:22px;bottom:78px;height:50px;border-radius:14px;border:1px solid var(--hairline);background:var(--bone);color:var(--ink);display:none;align-items:center;justify-content:center;gap:8px;cursor:pointer;z-index:40;box-shadow:0 4px 16px rgba(0,0,0,.10);transition:transform .16s var(--ease),box-shadow .16s}
body.show-fab .fab{display:flex}
.fab svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;flex:none}
.fab-lbl{font-size:calc(15px * var(--type-scale));font-weight:500;letter-spacing:.004em;white-space:nowrap}
.fab:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.14)}
.fab:active{transform:scale(.985)}
@media (prefers-reduced-motion:no-preference){ body.show-fab .fab{animation:fabIn .34s var(--ease)} }
@keyframes fabIn{from{transform:translateY(14px);opacity:0}55%{opacity:1}to{transform:none;opacity:1}}
/* share sheet (desktop / no native share) */
.share-sheet{position:absolute;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;background:rgba(40,38,32,0);transition:background .22s}
.share-sheet.on{background:rgba(40,38,32,.32)}
.ss-card{width:100%;max-width:360px;background:var(--bone);border-radius:18px 18px 0 0;padding:18px 18px calc(16px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .24s var(--ease);box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.share-sheet.on .ss-card{transform:translateY(0)}
.ss-h{font-size:calc(12px * var(--type-scale));text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:2px 2px 12px}
.ss-opt{display:block;width:100%;box-sizing:border-box;text-align:left;border:0;background:transparent;font:inherit;font-size:calc(16px * var(--type-scale));color:var(--ink);padding:13px 8px;cursor:pointer;text-decoration:none;border-radius:9px}
.ss-opt:hover{background:var(--bone-deep)}
.ss-cancel{display:block;width:100%;box-sizing:border-box;border:0;background:var(--bone-deep);font:inherit;font-size:calc(15px * var(--type-scale));color:var(--ink);padding:13px;margin-top:8px;border-radius:11px;cursor:pointer}
/* hopeful micro-animations */
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes riseIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes numRise{from{transform:translateY(6px)}to{transform:translateY(0)}}
@keyframes popIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .safety-meter-fill,.distrow-fill,.help-fill{transform-origin:left center;animation:growx .9s var(--ease)}
  .safety-num{animation:numRise .6s var(--ease)}
  .safety-foot,.safety-range,.bloom-line{animation:riseIn .7s var(--ease)}
  .distrow{animation:riseIn .55s var(--ease)}
  .wk-cell{animation:riseIn .5s var(--ease) both}
  .wk-mark{animation:popIn .6s var(--ease) both;animation-delay:.35s}
  .streak-dot{animation:popIn .5s var(--ease) both}
}
.ot-bar:active{opacity:1}
/* stats collapsible */
.stats-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;cursor:pointer;font:inherit;padding:12px 0;color:inherit}
.stats-tog-icon{font-size:calc(18px * var(--type-scale));color:var(--muted);line-height:1;transition:transform .2s var(--ease)}
.stats-toggle[aria-expanded="true"] .stats-tog-icon{transform:rotate(45deg)}
.stats-body{display:none}
.stats-body.open{display:block}
.stat-row-tap{width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--bone-deep)}
.stat-row-tap:last-child{border-bottom:0}
.stat-row-tap:active{opacity:.6}

/* ---------- current: stats section ---------- */
.stat-rows{display:flex;flex-direction:column}
.stat-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--bone-deep)}
.stat-row:last-child{border-bottom:0}
.stat-row-lbl{font-size:calc(13px * var(--type-scale));color:var(--muted);flex:none;min-width:96px}
.stat-row-val{font-size:calc(13.5px * var(--type-scale));font-weight:500;color:var(--ink);display:flex;align-items:center;gap:7px;text-align:right;flex-wrap:wrap;justify-content:flex-end}
.safety-track{display:inline-block;width:48px;height:4px;background:var(--bone-deep);border-radius:2px;overflow:hidden;vertical-align:middle;flex:none}
.safety-fill{display:block;height:100%;background:var(--s-safety);border-radius:2px}
.stat-trend{font-size:calc(12px * var(--type-scale));color:var(--muted);font-weight:400}
.tabbar{display:flex;flex:none;justify-content:space-evenly;border-top:1px solid var(--hairline);background:var(--bone);padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{flex:none;background:none;border:0;cursor:pointer;padding:8px 18px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);transition:color .2s var(--ease);min-height:52px;position:relative}
.tabbar button .ic{display:flex}
.tabbar button .ic svg{width:23px;height:23px;display:block}
.tabbar button .lb{font-size:11.5px;letter-spacing:.01em;text-transform:lowercase}
.tabbar button.on{color:var(--ink);font-weight:500}
/* HIG tab bar: active = full-ink icon + label (no top indicator bar) */
.tabbar button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
/* hidden while a guided session is playing — nothing competes with the breath */
body.in-practice .tabbar{display:none}

/* fade for screen transitions — transform only, so content is never hidden if
   the renderer pauses the animation (e.g. a backgrounded tab at frame 0). */
.reflect-zone{padding:14px 20px 28px}
.reflect-eyebrow{margin-bottom:10px}
/* inline from-justin note */
.from-justin{margin-top:auto;padding:18px 0 4px;border-top:1px solid var(--hairline)}
.from-justin-text{font-size:calc(15px * var(--type-scale));line-height:1.65;color:var(--ink-80);text-wrap:pretty;margin-bottom:10px}
.from-justin-more{display:block;padding:4px 2px}
.refl-aa-fab{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));right:22px;width:44px;height:44px;border-radius:50%;border:0;background:transparent;font:inherit;font-size:calc(14px * var(--type-scale));font-weight:500;letter-spacing:.03em;color:var(--muted);cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;transition:color .2s var(--ease),opacity .2s var(--ease)}
.refl-aa-fab:hover{color:var(--ink)}
.refl-aa-fab:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:50%}
.refl-aa-fab.hidden{opacity:0;pointer-events:none}
/* flat settings bar — mirrors player .adj pills */
.refl-sheet{position:absolute;bottom:0;left:0;right:0;background:var(--bone);padding:16px 22px max(20px,env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .38s var(--ease);z-index:20;opacity:0;pointer-events:none}
.refl-sheet.open{transform:translateY(0);opacity:1;pointer-events:auto}
.refl-controlbar{display:flex;align-items:center;gap:12px}
.refl-adjstack{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.refl-adj{display:flex;align-items:center;gap:2px;height:44px;border:1px solid var(--hairline);border-radius:12px;background:transparent;font:inherit;font-size:calc(13px * var(--type-scale));letter-spacing:.04em;text-transform:lowercase;color:var(--muted);padding:0 4px 0 12px;transition:border-color .2s var(--ease)}
.refl-adj-label{color:var(--muted);flex:1}
.refl-adj-stepper{display:inline-flex;align-items:center;gap:0}
.refl-step{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--muted);font:inherit;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s var(--ease);flex:none}
.refl-step:hover{color:var(--ink)}
.refl-step:disabled{opacity:.3;cursor:default}
.refl-step:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:50%}
.refl-sval{color:var(--ink-80);font-variant-numeric:tabular-nums;min-width:2.2em;text-align:center;font-size:calc(13px * var(--type-scale))}
.refl-nav{flex:none;width:72px;align-self:stretch;border:1px solid var(--hairline);border-radius:12px;background:transparent;font:inherit;font-size:calc(12px * var(--type-scale));letter-spacing:.06em;text-transform:lowercase;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:border-color .2s var(--ease),color .2s var(--ease)}
.refl-nav-arrow{display:block;width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.refl-nav:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:12px}

/* ---------- practice (one page: heading → tuned-to-you card → option rows) ---------- */
.p-view{padding-bottom:24px}
.p-top{padding-top:0}
.p-hero{font-size:calc(24px * var(--type-scale));font-weight:500;color:var(--ink);line-height:1.2;margin:0 0 10px;text-wrap:pretty}
.p-lede{font-size:calc(15px * var(--type-scale));line-height:1.55;color:var(--muted);margin:0;text-wrap:pretty;max-width:30ch}
.p-bottom{display:flex;flex-direction:column}
/* the recommended practice — no fill; a track-colored corner badge ("for you") with a
   gentle sonar pulse, plus the kicker in the track color. delight without a slab. */
/* the tuned card leads the chooser: same card family as the options below
   (hairline border, bone surface). its one distinction: a hand-drawn pencil
   underline beneath the title, in the track's ink — someone wrote this for you */
.tuned-card{position:relative;overflow:visible;margin-bottom:18px;--tc:var(--track-mind);--tc-ink:var(--track-mind-ink);
  background:var(--bone);border:2px solid var(--tc);padding:18px 17px}
@media(hover:hover){.tuned-card:hover{border-color:var(--ink-80)}}
.tuned-card.track-safety{--tc:var(--track-safety);--tc-ink:var(--track-safety-ink)}
.tuned-card.track-self{--tc:var(--track-self);--tc-ink:var(--track-self-ink)}
.tuned-line{display:block;width:76px;height:6px;margin:5px 0 1px;color:var(--tc-ink)}
.tuned-line path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tuned-kicker{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;color:var(--tc-ink);margin-bottom:6px}
.tuned-card .wc-title{color:var(--ink);font-size:calc(18px * var(--type-scale))}
.tuned-meta{display:block;font-size:calc(12.5px * var(--type-scale));color:var(--muted);margin-top:8px}
.tuned-card:active{background:var(--press)}
/* arrival choreography: the words settle in, then the underline DRAWS itself
   beneath the title like a pencil stroke — handcraft on paper, no shine.
   runs once, on landing on the practice tab (.tc-in), never on re-renders. */
.tuned-card.tc-in .tuned-kicker{animation:tcRise .45s .1s var(--ease) both}
.tuned-card.tc-in .wc-title{animation:tcRise .45s .22s var(--ease) both}
.tuned-card.tc-in .tuned-line path{stroke-dasharray:1;stroke-dashoffset:1;animation:tcLine .55s .55s var(--ease) forwards}
.tuned-card.tc-in .wc-reason{animation:tcRise .45s .5s var(--ease) both}
.tuned-card.tc-in .tuned-meta{animation:tcRise .45s .62s var(--ease) both}
@keyframes tcRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes tcLine{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .tuned-card.tc-in .tuned-kicker,.tuned-card.tc-in .wc-title,.tuned-card.tc-in .wc-reason,
  .tuned-card.tc-in .tuned-meta{animation:none}
  .tuned-card.tc-in .tuned-line path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
}
/* option cards: today-row scale + collapse animation */
.p-opts{display:flex;flex-direction:column;gap:0;margin-bottom:8px}
.p-opt-ico{flex:none;width:30px;display:flex;align-items:center;justify-content:center;color:var(--ink-80);align-self:flex-start;margin:1px 4px 0 0}
.p-opt-ico svg{width:26px;height:26px;display:block}
/* the bolt + x pair (self-regulation): two smaller marks side by side */
.p-ico-pair{display:inline-flex;align-items:center;gap:1px}
/* on the practice cards the two-mark pair stacks vertically, matching the single icons' footprint */
.p-opt-ico .p-ico-pair{flex-direction:column;gap:1px}
.p-opt-ico .p-ico-pair svg{width:26px;height:26px}
/* the cap is an animation clamp (collapse/expand), not a design height — it has to
   ride --type-scale, or larger type (device ramp x the user's text-size setting)
   clips the reason line. 2026-07-10. */
.p-opt{max-height:calc(130px * var(--type-scale));overflow:hidden;margin-bottom:12px;padding:17px 18px;
  transition:max-height .35s var(--ease),margin .3s var(--ease),opacity .28s var(--ease),padding .28s var(--ease),border-color .2s var(--ease)}
.p-opt .wc-title{font-size:calc(17px * var(--type-scale))}
.p-opt .wc-reason{font-size:calc(14px * var(--type-scale));margin-top:5px}
.p-opts.has-sel .p-opt:not(.p-sel){
  opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-color:transparent;pointer-events:none}
/* on selection, color is earned sparingly: ONLY the chosen option's title carries the
   track color. the selected option stops being a bordered rectangle and becomes a
   left-aligned header that flows straight into the refine controls (one column). chips
   and the Begin button stay neutral/ink, like the rest of the app. */
.p-view{--tc:var(--track-mind)}
.p-view.track-safety{--tc:var(--track-safety)}
.p-view.track-self{--tc:var(--track-self)}
.p-opt.p-sel{border:0;border-radius:0;background:transparent;max-height:none;overflow:visible;padding:0 0 4px;margin-bottom:20px}
.p-opt.p-sel:active{background:transparent}
.p-opt.p-sel .wc-title{color:var(--tc);font-weight:500}
.p-opt.p-sel .wc-reason{color:var(--muted)}
.p-opt.p-sel .wc-go{transform:rotate(90deg);color:var(--muted)}
@media(hover:hover){.p-opt.p-sel:hover .wc-go{transform:rotate(90deg) translateY(2px);color:var(--ink-80)}}
/* refinement area */
@keyframes refineIn{from{transform:translateY(7px)}to{transform:none}}
.p-refine{display:flex;flex-direction:column;gap:18px;margin:18px 0 30px;animation:refineIn .28s .1s var(--ease) both}
.p-rgroup{display:flex;flex-direction:column;gap:0}
/* the builder reads like the reflections pages: reader-weight section headings,
   reader body rhythm, and the same breathe-in entrance the reader sections use.
   the drawn underline under the heading is the "made for you" line, in track color. */
.p-view.track-mind{--tc:var(--track-mind);--tc-ink:var(--track-mind-ink)}
.p-view.track-safety{--tc:var(--track-safety);--tc-ink:var(--track-safety-ink)}
.p-view.track-self{--tc:var(--track-self);--tc-ink:var(--track-self-ink)}
.p-adjust-line{display:block;width:86px;height:6px;margin:10px 0 0;color:var(--tc-ink,var(--ink-80))}
.p-adjust-line path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:tcLine .55s .35s var(--ease) forwards}
.p-refine .dash-prompt{font-size:calc(16px * var(--type-scale));font-weight:600;color:var(--ink)}
.p-refine .dash-prompt::before{display:none}
.p-refine .p-rgroup,.p-refine .p-surprise,.p-refine .p-expect{opacity:0;transform:translateY(9px);animation:secRise .6s var(--ease) both}
.p-refine .p-rgroup:nth-child(1){animation-delay:.08s}
.p-refine .p-rgroup:nth-child(2){animation-delay:.2s}
.p-refine .p-rgroup:nth-child(3){animation-delay:.32s}
.p-refine .p-expect{animation-delay:.44s}
.p-refine .p-surprise{animation-delay:.56s}
@keyframes secRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* the skill gloss reads like the reader's pull-quote, in the track color */
.p-refine .ch-cap{border-left:3px solid var(--tc-ink,#C9A24B);padding:2px 0 2px 14px;font-size:calc(15px * var(--type-scale));line-height:1.55;margin-top:14px}
.ch-cap.cap-in{animation:capFade .35s var(--ease) both}
@keyframes capFade{from{opacity:0}to{opacity:1}}
body.reduce-motion .p-refine .p-rgroup,body.reduce-motion .p-refine .p-surprise,body.reduce-motion .p-refine .p-expect{animation:none;opacity:1;transform:none}
body.reduce-motion .p-adjust-line path{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
body.reduce-motion .ch-cap.cap-in{animation:none}
@media (prefers-reduced-motion:reduce){
  .p-refine .p-rgroup,.p-refine .p-surprise,.p-refine .p-expect{animation:none;opacity:1;transform:none}
  .p-adjust-line path{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .ch-cap.cap-in{animation:none}
}
/* practice builder section labels now use the shared .dash-prompt style */
.p-chips{display:flex;flex-wrap:wrap;gap:8px}
/* true 44pt-tall chips (was 34px visual + invisible extension) */
.p-chip{font:inherit;font-size:calc(14px * var(--type-scale));cursor:pointer;white-space:nowrap;background:transparent;color:var(--muted);border:1px solid var(--hairline);border-radius:999px;padding:11px 17px;transition:border-color .2s var(--ease),color .2s var(--ease)}
.p-chip:hover{border-color:var(--ink-80);color:var(--ink-80)}
.p-chip.on{border-color:var(--ink);color:var(--ink);font-weight:500}
.p-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* the chosen practice, named in the adjust-screen heading, carries its track color */
.p-adjust-name{color:var(--tc)}
/* more meditations: plain ruled list */
.p-med-list{display:flex;flex-direction:column;margin-top:8px;margin-bottom:4px;border-top:1px solid var(--hairline)}
.p-med-row{display:flex;flex-direction:column;gap:2px;text-align:left;background:none;border:0;border-bottom:1px solid var(--hairline);padding:13px 0;cursor:pointer;color:inherit;font:inherit;width:100%;transition:opacity .2s var(--ease)}
.p-med-row:active{opacity:.6}
@media(hover:hover){.p-med-row:hover .p-med-title{text-decoration:underline}}
.p-med-row.on .p-med-title{font-weight:500;color:var(--ink)}
.p-med-row.on .p-med-meta{color:var(--ink-80)}
.p-med-title{font-size:calc(15px * var(--type-scale));font-weight:400;color:var(--ink);line-height:1.3}
.p-med-meta{font-size:calc(12.5px * var(--type-scale));color:var(--muted)}
.p-med-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* surprise me — thin pill button */
.p-surprise{font:inherit;font-size:calc(14px * var(--type-scale));color:var(--ink-80);background:none;border:1px solid var(--hairline);border-radius:999px;cursor:pointer;padding:12px 20px;text-align:center;align-self:flex-start;transition:border-color .2s var(--ease),color .2s var(--ease)}
.p-surprise:hover{border-color:var(--ink-80);color:var(--ink)}
.p-surprise:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:999px}
/* check-in screen layout — figure breathes, controls hug the bottom */
.checkin-view{justify-content:space-between;padding:22px 0 28px}
.checkin-bottom{padding:0 22px}
.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
/* back affordance in practice chooser */
.p-back{margin-bottom:6px}

/* toast confirmation */
.toast{position:absolute;bottom:max(80px,calc(env(safe-area-inset-bottom)+72px));left:50%;transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--bone);font-size:calc(14px * var(--type-scale));font-weight:500;padding:10px 20px;border-radius:10px;opacity:0;transition:opacity .28s var(--ease),transform .28s var(--ease);pointer-events:none;white-space:nowrap;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.view{animation:viewIn .35s var(--ease)}
@media (prefers-reduced-motion:reduce){.view{animation:none}}

/* ============================================================================
   Settings gear (you tab) · practice "for you" + plan reader · post-practice
   feedback · check-in v2 with challenge appetite.
   ========================================================================== */

/* ---- settings gear ---- */
.set-gear{margin-left:auto;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:color .2s var(--ease),background .2s var(--ease),transform .12s var(--ease)}
.set-gear svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.set-gear:hover{color:var(--ink);background:var(--bone-deep)}
.set-gear:active{transform:scale(.92)}
.set-gear:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* (the old practice "for you" pre-screen styles — .fy-* / .foryou-card — were
   dead along with renderForYou; removed.) */

/* ---- practice: plan reader ---- */
/* header now follows the unified .scr-head rhythm: a reserved eyebrow line and a heading
   on the same left edge as every other screen. the earned track color stays — as the
   eyebrow color and a thin rail hung in the left gutter (it never displaces the text). */
.plan-view{gap:0}
.plan-head{margin:0 0 22px}
.plan-head .eyebrow{min-height:13px;margin:0 0 11px}
.plan-titlerow{position:relative}
.plan-rail{position:absolute;left:-14px;top:1px;bottom:1px;width:3px;border-radius:3px;background:var(--track-mind)}
.plan-view.track-safety .plan-rail{background:var(--track-safety)}
.plan-view.track-self   .plan-rail{background:var(--track-self)}
/* plan (custom practice) reads like the blog reader: read-h1-size title, sec-h section
   headings, reader body register (Justin 2026-07-03) */
.plan-title{font-size:calc(23px * var(--type-scale));font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0;text-wrap:pretty}
.plan-sec{margin-bottom:22px}
.plan-sec .sec-h{margin:0 0 8px}
.plan-sec .dash-prompt{margin:0 0 10px}
.plan-sec .dash-prompt::before{display:none}
.plan-why{font-size:calc(15px * var(--type-scale));line-height:1.7;color:var(--ink-80);text-wrap:pretty;margin:0}
.plan-about{font-size:calc(15px * var(--type-scale));line-height:1.7;color:var(--ink-80);text-wrap:pretty;margin:0}
.plan-shaped{margin-top:10px}
.plan-hl{color:var(--ink);font-weight:500}
.plan-view.track-safety .plan-hl{color:var(--track-safety)}
.plan-view.track-self   .plan-hl{color:var(--track-self)}
.plan-shape{display:flex;flex-direction:column;border-top:1px solid var(--hairline);margin-bottom:28px}
.plan-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--bone-deep)}
.plan-k{font-size:calc(13px * var(--type-scale));color:var(--muted);text-transform:lowercase;letter-spacing:.02em;flex:none}
.plan-v{font-size:calc(14.5px * var(--type-scale));font-weight:500;color:var(--ink);text-transform:lowercase;text-align:right;white-space:nowrap}
/* primary actions sit in a sticky bar pinned to the bottom of the scrollport (above the
   tab bar) so they stay in thumb reach and never scroll out of view. content fades in
   under the bar. when content is short, margin-top:auto still pushes the bar to the foot. */
.actionbar{position:sticky;bottom:0;margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:stretch;background:var(--bone);padding:14px 0 6px}
.actionbar::before{content:'';position:absolute;left:0;right:0;top:-20px;height:20px;background:linear-gradient(to top,var(--bone),transparent);pointer-events:none}
/* secondary/escape action: quiet, left-aligned, sits ABOVE the primary button so the
   primary stays anchored at the bottom edge in firm thumb reach */
/* the secondary action in an action bar ("back", "change this practice") is a
   real quiet capsule button, not an underlined text link — reads as a control,
   easier to hit, and consistent with the chip/surprise-me vocabulary */
.actionbar-aux{align-self:flex-start;order:-1;border:1px solid var(--hairline);border-radius:999px;padding:10px 18px;text-decoration:none;color:var(--ink-80);transition:border-color .2s var(--ease),color .2s var(--ease),background .15s var(--ease)}
@media(hover:hover){.actionbar-aux:hover{border-color:var(--ink-80);color:var(--ink);text-decoration:none}}
.actionbar-aux:active{background:var(--press)}
.actionbar-aux:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:999px}
.plan-actions{position:sticky;bottom:0;margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:stretch;background:var(--bone);padding:14px 0 6px}
.plan-actions::before{content:'';position:absolute;left:0;right:0;top:-20px;height:20px;background:linear-gradient(to top,var(--bone),transparent);pointer-events:none}
/* consistent inline navigation link: link-blue, no underline, trailing arrow */
.navlink{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;color:var(--link);font:inherit;font-size:calc(14px * var(--type-scale));padding:6px 2px}
.navlink::after{content:"\2192";font-size:1em;line-height:1;transition:transform .18s var(--ease)}
.navlink:hover::after{transform:translateX(3px)}
.navlink:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.p-tohome{margin-bottom:10px}

/* ---- post-practice feedback (top-aligned, shared header) ---- */
.fb-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.fb-opt{display:flex;align-items:center;width:100%;text-align:left;background:transparent;border:1px solid var(--hairline);border-radius:13px;padding:16px 18px;font:inherit;font-size:calc(16px * var(--type-scale));color:var(--ink);cursor:pointer;transition:border-color .2s var(--ease),background .15s var(--ease)}
.fb-opt:active{background:var(--bone-deep)}
@media(hover:hover){.fb-opt:hover{border-color:var(--ink-80)}}
.fb-opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* v2: the body-feeling answer selects (continue advances), so it needs an on state */
.fb-opt.on{border-color:var(--ink);font-weight:500}
/* "did anything surface?" (post-practice) — plain-emotion chips (multi-select).
   deliberately no state colors: the chip mirrors what was felt, never claims a state. */
.fb-surf{margin-bottom:6px}
.fb-surf .dash-prompt{margin-bottom:2px}
.fb-surf .ch-cap{margin:0 0 10px}
.fb-after{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:6px}

/* ---- check-in v2 (no animated figure — the live readout is the system's answer; fits one screen) ---- */
.checkin2{display:flex;flex-direction:column;gap:12px;padding:22px 22px 14px}
.checkin2 .scr-head{margin-bottom:12px}
.ci-readout{display:flex;align-items:center;gap:9px;font-size:calc(14.5px * var(--type-scale));line-height:1.45;color:var(--ink-80);margin:6px 0 0;padding-top:12px;border-top:1px solid var(--bone-deep)}
.ci-readtext{text-align:left}
.ci-readout b{font-weight:500;color:var(--ink)}
.ci-dot{flex:none;width:11px;height:11px;border-radius:50%}
.ci-block{display:flex;flex-direction:column;gap:8px}
.checkin2 .sliders{gap:16px}
.checkin2 .slider{gap:6px}
.ci-label{font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0}
.ci-block .sliders{margin:0}
/* fixed-stem check-in: header carries "how easy would it be to…", each slider shows
   only its rotating scenario; anchors are constant (hard→easy) on every rail */
.ci-sub{font-size:calc(13px * var(--type-scale));color:var(--muted);margin:4px 0 0}
.checkin2 .slider .q{font-size:calc(14.5px * var(--type-scale));font-weight:500;line-height:1.35;margin:0;color:var(--ink)}
.slider .anchors{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);letter-spacing:.03em;margin-top:-1px}
.ci-shuffle{align-self:flex-start;font:inherit;font-size:calc(14px * var(--type-scale));color:var(--muted);background:none;border:none;padding:4px 0 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hairline)}
.ci-shuffle:hover{color:var(--ink)}
/* expert state override (edit-check-in only): quiet link -> chip panel */
.ci-ovr{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ci-ovr-link,.ci-ovr-clear{align-self:flex-start}
.ci-ovr-note{font-size:calc(13.5px * var(--type-scale));line-height:1.5;color:var(--muted);margin:0;text-wrap:pretty}
.ci-ovr-chips{display:flex;flex-wrap:wrap;gap:8px}
.ci-ovr-opt{display:inline-flex;align-items:center;gap:7px;width:auto;font:inherit;font-size:calc(14px * var(--type-scale));background:transparent;color:var(--ink-80);border:1px solid var(--hairline);border-radius:999px;padding:10px 15px;cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease)}
.ci-ovr-opt:hover{border-color:var(--ink-80)}
.ci-ovr-opt.on{border-color:var(--ink);border-width:1px;padding:10px 15px;color:var(--ink);font-weight:500}
.ci-ovr-opt .st-marks{display:inline-flex}
.ci-ovr-about{font-size:calc(14px * var(--type-scale));line-height:1.55;color:var(--ink-80);margin:2px 0 0;text-wrap:pretty;min-height:1em}
/* challenge appetite — set apart in a soft recessed panel so it reads as its own
   decision, not a continuation of the sliders above */
.ci-challenge{gap:0;margin-top:18px;border:1px solid var(--hairline);border-radius:16px;padding:16px 16px 18px}
.ci-challenge .dash-prompt{color:var(--ink)}
.ci-challenge .dash-prompt::before{display:none}
/* 2×2 grid (was 4-across — labels were crammed); caption below shows in full */
.ch-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.ch-auto{display:block;width:100%;margin:0 0 8px}
.ci-ctx .wr-chiprow{margin-top:4px}
.ci-ctx .ch-cap{min-height:0}
.ci-ctx-cap{color:var(--muted)}
.ci-ctx-opt{font-size:calc(11px * var(--type-scale));color:var(--muted);font-weight:400;margin-left:4px}
/* check-in fold rows (2026-07-05): optional sections tucked behind quiet
   one-row links — sliders + save reads as the whole ask. link text sits
   left (like "ask me differently"); the + sits at the row's right edge
   and rotates to x when open. no readouts on the collapsed rows. */
.ci-fold{gap:0}
.ci-fold-btn{display:flex;align-items:center;justify-content:space-between;gap:7px;width:100%;background:none;border:0;cursor:pointer;font:inherit;padding:8px 0;color:inherit;white-space:nowrap;min-width:0;position:relative;text-align:left}
.ci-fold-btn::before{content:'';position:absolute;inset:-6px -4px}
.ci-fold-btn .stats-tog-icon{flex:none}
.ci-fold-btn[aria-expanded="true"] .stats-tog-icon{transform:rotate(45deg)}
.ci-fold-lk{font-size:calc(14px * var(--type-scale));color:var(--ink-80);text-decoration:underline;text-decoration-color:rgba(58,63,74,.4);text-underline-offset:3px;transition:color .15s var(--ease),text-decoration-color .15s var(--ease)}
.ci-fold-btn:hover .ci-fold-lk{color:var(--ink);text-decoration-color:var(--ink)}
.ci-fold .stats-body.open{padding:6px 0 4px}
.ci-readout-idle{color:var(--muted);font-style:normal}
.ch-opt{font:inherit;font-size:calc(14px * var(--type-scale));cursor:pointer;background:transparent;color:var(--ink-80);border:1px solid var(--hairline);border-radius:11px;padding:13px 8px;text-align:center;line-height:1.25;transition:border-color .2s var(--ease),color .2s var(--ease)}
.ch-opt:hover{border-color:var(--ink-80)}
.ch-opt.on{border-color:var(--ink);border-width:2px;padding:12px 7px;color:var(--ink);font-weight:500}
.ch-opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ch-cap{font-size:calc(13.5px * var(--type-scale));line-height:1.5;color:var(--ink-80);margin:12px 0 0;text-wrap:pretty;min-height:2.9em}

/* ---------- settings ---------- */
/* match the today screen's heading-to-content rhythm (22px head margin + 11px gap = 33px)
   on the screens that don't carry the today view-gap: the chooser and settings. */
.p-view > .scr-head, .settings-view > .scr-head{margin-bottom:33px}
.set-rows{display:flex;flex-direction:column}
.set-group{margin:0 0 16px}
/* settings makeover: grouped inset cards (same family as today's foot card) */
.set-card{background:var(--bone-deep);border-radius:16px;padding:16px 16px 6px;margin:0 0 14px}
.set-card .set-group:last-child{margin-bottom:12px}
.set-card .set-rows{margin-bottom:6px}
.set-card .set-actions{padding-bottom:12px}
.set-card-h{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:0 0 13px}
.settings-view .hr{display:none}
/* inside a card, the seg track needs its own tone (it was bone-deep = card color) */
.set-card .set-seg{background:var(--press)}
/* six sense options were too tight on one row: an even 3x2 grid, full width */
#seg-sense{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* the dash lead-ins are redundant inside the visual card grouping */
.set-card .dash-prompt::before{display:none}
.set-card .dash-prompt{gap:0}

/* first-week orienting line under the check-in heading */
.ci-orient{font-size:calc(14.5px * var(--type-scale));line-height:1.5;color:var(--muted);margin:8px 0 0;text-wrap:pretty}
.set-group:last-of-type{margin-bottom:0}
.set-group .dash-prompt{margin:0 0 10px}
/* on-system segmented control (matches the stats playground filter) */
.set-seg{display:flex;gap:3px;background:var(--bone-deep);border-radius:11px;padding:3px}
.set-seg button{flex:1;border:0;border-radius:8px;padding:9px 0;font:inherit;font-size:calc(14px * var(--type-scale));color:var(--muted);background:transparent;cursor:pointer;white-space:nowrap;transition:color .15s var(--ease)}
.set-seg button.on{background:var(--raised);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.set-seg button:hover{color:var(--ink-80)}
.set-seg button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* action tiers: export reads as a link (it produces something), sign out is a quiet
   neutral action, reset is a muted destructive option set apart below. */
.set-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
/* shared quiet text-action: replaces the retired blue/underline link + trailing-arrow
   style. used for the settings actions and the plan reader's "change this practice". */
.set-quiet{background:none;border:0;cursor:pointer;font:inherit;font-size:calc(14px * var(--type-scale));color:var(--ink-80);padding:6px 2px;text-decoration:underline;text-decoration-color:rgba(58,63,74,.4);text-underline-offset:3px;transition:color .15s var(--ease),text-decoration-color .15s var(--ease)}
.set-quiet:hover{color:var(--ink);text-decoration-color:var(--ink)}
/* settings pass 2026-07-05: on/off pairs are switches in list rows (HIG);
   destructive actions live in their own red-tinged card, apart from the rest */
.set-row-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0}
.set-sw-lbl{font-size:calc(14.5px * var(--type-scale));color:var(--ink)}
.set-sw{flex:none;width:46px;height:28px;border-radius:14px;background:var(--hairline);border:0;cursor:pointer;position:relative;padding:0;transition:background .2s var(--ease)}
.set-sw-knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--knob);box-shadow:0 1px 2px rgba(26,31,42,.18);transition:left .2s var(--ease)}
.set-sw.on{background:var(--ink)}
.set-sw.on .set-sw-knob{left:20px}
.set-sw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.set-danger{background:transparent;border:1px solid rgba(154,59,59,.3)}
.set-danger .set-actions{padding:6px 0}
.set-quiet-danger{color:var(--danger);text-decoration-color:rgba(154,59,59,.4)}
.set-quiet-danger:hover{color:var(--danger);text-decoration-color:var(--danger)}
.set-version{font-size:calc(11.5px * var(--type-scale));color:var(--muted);opacity:.7;text-align:center;margin:6px 0 10px}
/* practice-scene options (2026-07-05): a dedicated 2-column grid — never a
   wrapped pill row. an odd last option spans the full row so nothing dangles. */
.scene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.scene-grid .ch-opt:last-child:nth-child(odd){grid-column:1/-1}

/* small lifetime counts at the foot of the "you" tab (the stats home) */
.ystats{display:flex;gap:30px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline)}
.ystat{display:flex;flex-direction:column;gap:1px}
.ys-n{font-size:calc(18px * var(--type-scale));font-weight:500;color:var(--ink);letter-spacing:-.01em}
.ys-l{font-size:calc(12px * var(--type-scale));color:var(--muted)}

/* ---------- display preferences ---------- */
/* text-size scales the reading copy across screens; headings and tight UI labels
   (slider names, segmented controls, tab bar) stay fixed so the mobile layout and
   cross-screen heading alignment never shift. */
/* HIG-aligned bases (2026-07-02 audit vs Apple Music): body reading = 17px,
   secondary/subheadline = 15px, footnote = 13-14px. Everything here also follows
   the text-size setting, whose top step is now 1.25. */
.scr-lede,.lede{font-size:calc(16px * var(--type-scale))}
.sd-body{font-size:calc(17px * var(--type-scale))}
/* plan-why/plan-about removed from this 17px group: the plan screen now uses the
   reader's 15px body register (see .plan-why/.plan-about below) */
.wc-reason,.wc-fj-text{font-size:calc(14px * var(--type-scale))}
.ci-readout,.map-sub,.map-foot,.panel-sub,.panel-empty,
.deep-val,.deep-lbl,.ch-cap,.trend-cap,.settle-note,.set-quiet{font-size:calc(15px * var(--type-scale))}
.map-lede{font-size:calc(17px * var(--type-scale))}
.dash-prompt{font-size:calc(15px * var(--type-scale))}
.wc-title{font-size:calc(17px * var(--type-scale))}
.p-chip,.ch-opt{font-size:calc(15px * var(--type-scale))}
.btn.block{font-size:calc(17px * var(--type-scale))}
.checkin2 .slider .q{font-size:calc(15.5px * var(--type-scale))}
.ci-sub{font-size:calc(14px * var(--type-scale))}
.read-h1{font-size:calc(23px * var(--type-scale))}
.read-h2{font-size:calc(17.5px * var(--type-scale))}
.sec-h{font-size:calc(16px * var(--type-scale))}
/* today tab reading text follows the setting too (headings/labels stay fixed) */
.tb-hint{font-size:calc(14px * var(--type-scale))}
.tb-row-sub{font-size:calc(14.5px * var(--type-scale))}
.tb-refl,.tb-reason{font-size:calc(15px * var(--type-scale))}
/* you tab reading text — fuller coverage (this screen has the most reading) */
.help-lbl,.growth-cap,.bloom-line,.safety-foot,.safety-trend{font-size:calc(14px * var(--type-scale))}
.help-verdict{font-size:calc(14.5px * var(--type-scale))}
.distrow-name{font-size:calc(15px * var(--type-scale))}
.distrow-pct,.help-pct{font-size:calc(13.5px * var(--type-scale))}
.arc-readout{font-size:calc(13px * var(--type-scale))}
.lg-it{font-size:calc(12.5px * var(--type-scale))}

/* ---------- enlarged hit areas ---------- */
/* the visible control is unchanged; only the touchable zone grows to ~44pt
   (HIG minimum). done with an invisible ::after so layout never shifts. */
/* NOTE: .panel-share must NOT be in this list — it is position:absolute (top
   right of the card) and a position:relative here silently overrode that,
   dropping the button inline at the top left over the title. */
.p-chip,.period-pill,.set-gear,.p-surprise{position:relative}
.p-chip::after,.period-pill::after,.p-surprise::after{content:'';position:absolute;inset:-6px -2px;border-radius:999px}
.panel-share::after{content:'';position:absolute;inset:-7px;border-radius:50%}
.set-gear::after{content:'';position:absolute;inset:-3px;border-radius:50%}
/* the state symbols are visibly tappable pills (replaces the old trailing
   "tap a symbol to learn more" hint line) */
.deep-tap{position:relative;display:inline-flex;align-items:center;border:1px solid var(--hairline);border-radius:999px;padding:4px 11px;transition:border-color .2s var(--ease)}
@media(hover:hover){.deep-tap:hover{border-color:var(--ink-80)}}
.deep-tap:active{background:var(--press)}
.deep-tap::after{content:'';position:absolute;inset:-8px -4px;border-radius:999px}
/* text-link controls ("back", "change this practice", "skip", "change a recent
   check-in") — same treatment; ::before because .navlink's ::after is its arrow */
.set-quiet,.navlink,.change-link{position:relative}
.set-quiet::before,.navlink::before,.change-link::before{content:'';position:absolute;inset:-9px -4px}
/* motion: "calm" stills every decorative animation app-wide, including pseudo-element
   loops like the safety-ring sonar ripple. CSS transitions (hover, etc.) still run. */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after{animation:none !important}
body.reduce-motion .wc-ring{transform:scale(.96)}

/* ============================================================================
   BRAND ICON SYSTEM — the logo's three marks ARE the three nervous-system axes:
   heart = safety, bolt = fight-or-flight, x = shutdown. One vocabulary across
   the check-in, the you-tab map, and the post-practice close. heart holds the
   other two; none of the three is ever "wrong" or crossed out.
   ============================================================================ */
.snb-ico{display:inline-block;vertical-align:middle;width:20px;height:20px}

/* check-in: the axis mark anchors the row at the left; copy + slider stack beside it.
   the mark brightens + saturates as you raise that axis. --lvl (0–1) set live in app.js. */
.checkin2 .slider{display:flex;flex-direction:row;align-items:center;gap:15px}
.slider-ico-wrap{flex:0 0 30px;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.slider-ico{width:30px;height:30px;flex:0 0 auto;
  opacity:calc(.30 + var(--lvl,.18) * .70);
  filter:saturate(calc(.20 + var(--lvl,.18) * .80));
  transform:scale(calc(.86 + var(--lvl,.18) * .14));
  transition:opacity .22s var(--ease), filter .22s var(--ease), transform .22s var(--ease)}
.slider-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.checkin2 .slider .top{align-items:baseline;justify-content:flex-start;gap:6px;flex-wrap:nowrap;white-space:nowrap;min-width:0}
.checkin2 .slider .nm{white-space:nowrap}
.checkin2 .slider .sub{font-size:calc(12.5px * var(--type-scale));color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.checkin2 .amt{white-space:nowrap}
body.reduce-motion .slider-ico{transition:none}

/* state identity: every state is its 1–2 axis marks (blends show both), replacing
   the old colored dots wherever a state is named. */
.st-marks{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;flex:0 0 auto}
.st-mark{width:16px;height:16px;flex:0 0 auto}
.st-pair .st-mark{width:14px;height:14px}
.st-dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle}
.distrow-name{display:inline-flex;align-items:center;gap:8px}
.legend .lg-it{display:inline-flex;align-items:center;gap:6px}
.legend .st-mark{width:13px;height:13px}
.deep-val{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.deep-val .st-mark{width:14px;height:14px}
.statelegend .it{display:inline-flex;align-items:center;gap:6px}
.stat-row-val{display:inline-flex;align-items:center;gap:7px}
/* state detail — feels like the 'from justin' reader: flowing prose, generous margin,
   a hairline-divided section. marks sit in the heading's eyebrow slot (icons on top),
   so the heading lands on the same baseline as every other screen. */
.sd-head .sd-marks{display:flex;align-items:center;min-height:13px;margin:0 0 11px}
.sd-head .sd-marks .st-mark{width:15px;height:15px}
.sd-head .sd-marks .st-pair .st-mark{width:14px;height:14px}
.sd-body{font-size:calc(16px * var(--type-scale));line-height:1.65;color:var(--ink-80);text-wrap:pretty;margin:0}
.sd-when{border-top:1px solid var(--hairline);margin-top:22px;padding-top:20px}
.sd-when-label{font-size:calc(16px * var(--type-scale));font-weight:500;color:var(--ink);margin:0 0 10px}

/* you-tab empty state: teach the three-state map before any data exists */
.map-empty{display:flex;flex-direction:column;padding:30px 22px;flex:1}
.map-lede{font-size:calc(16px * var(--type-scale));line-height:1.5;color:var(--ink-80);margin:0 0 22px;max-width:30ch}
.map-rows{display:flex;flex-direction:column;margin-bottom:22px}
.map-row{display:flex;align-items:center;gap:15px;padding:14px 0;border-top:1px solid var(--bone-deep);width:100%;font:inherit;text-align:left;background:none;border-left:none;border-right:none;border-bottom:none;cursor:pointer;color:inherit}
.map-row .wc-go{margin-left:auto}
.map-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.map-row:last-child{border-bottom:1px solid var(--bone-deep)}
.map-ico{flex:0 0 26px;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.map-ico .snb-ico{width:26px;height:26px}
.map-text{display:flex;flex-direction:column;gap:2px}
.map-name{font-size:calc(15.5px * var(--type-scale));font-weight:500;color:var(--ink);text-transform:lowercase}
.map-sub{font-size:calc(13.5px * var(--type-scale));color:var(--muted)}
.map-foot{font-size:calc(13.5px * var(--type-scale));color:var(--muted);line-height:1.5;margin:0 0 22px;max-width:34ch}
.map-empty .btn{align-self:flex-start}

/* post-practice close: the three settle — bolt & x ease back, the heart holds them */
.fb-thanks{align-items:center;text-align:center}
.settle{display:flex;align-items:center;justify-content:center;gap:20px;margin:18px 0 26px;min-height:56px}
.settle-ico{display:flex;align-items:center;justify-content:center;opacity:.88;
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.settle-ico .snb-ico{height:34px;width:auto}
.settle-bolt .snb-ico,.settle-x .snb-ico{height:28px}
.settle-heart{transform:scale(.96)}
.settle.on .settle-bolt{opacity:.26;transform:scale(.72) translateX(-8px)}
.settle.on .settle-x{opacity:.26;transform:scale(.72) translateX(8px)}
.settle.on .settle-heart{opacity:1;transform:scale(1.16)}
.fb-thanks-head{margin-bottom:8px}
.settle-note{font-size:calc(13.5px * var(--type-scale));color:var(--muted);line-height:1.5;margin:0 0 26px;max-width:30ch}
.fb-thanks .fb-after{width:100%}
/* calm mode + reduced-motion: skip the transition, land on the settled end-state */
body.reduce-motion .settle-ico{transition:none}
@media (prefers-reduced-motion:reduce){.settle-ico{transition:none}}


/* ── PWA native-feel: install affordances + chrome polish ────────────── */
.set-row-inline{display:flex;align-items:center;min-height:22px}
.ios-hint{font-size:calc(13px * var(--type-scale));color:var(--muted);line-height:1.45}
.install-nudge{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--bone-deep);border:1px solid var(--hairline);border-radius:12px;padding:10px 12px;margin:0 0 14px;animation:nudgeIn .4s var(--ease)}
.install-nudge .in-txt{font-size:calc(13px * var(--type-scale));color:var(--ink-80);line-height:1.4}
.install-nudge .in-actions{display:flex;align-items:center;gap:6px;flex:none}
.install-nudge .in-go{font:inherit;font-size:calc(13px * var(--type-scale));font-weight:500;border:0;border-radius:8px;padding:7px 12px;background:var(--ink);color:var(--bone);cursor:pointer}
.install-nudge .in-x{font-size:calc(18px * var(--type-scale));line-height:1;border:0;background:none;color:var(--muted);cursor:pointer;padding:2px 6px}
@keyframes nudgeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.install-nudge{animation:none}}
.trial-banner{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--bone-deep);border:1px solid var(--hairline);border-radius:12px;padding:10px 12px;margin:0 0 14px;animation:nudgeIn .4s var(--ease)}
.trial-banner .tb-txt{font-size:calc(13px * var(--type-scale));color:var(--ink-80);line-height:1.4}
.trial-banner .tb-manage{font:inherit;font-size:calc(13px * var(--type-scale));font-weight:500;border:0;border-radius:8px;padding:7px 12px;background:var(--ink);color:var(--bone);cursor:pointer;flex:none}
.trial-banner.urgent{background:var(--ink);border-color:var(--ink)}
.trial-banner.urgent .tb-txt{color:var(--bone)}
.trial-banner.urgent .tb-manage{background:var(--bone);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.trial-banner{animation:none}}
/* non-selectable chrome; reader/blog prose + inputs stay selectable */
.phone{-webkit-user-select:none;user-select:none}
.view.read,.view.read *,input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}
/* drop pull-to-refresh / rubberband only in the installed app */
@media (display-mode:standalone){html,body{overscroll-behavior:none}}


/* ── dark mode: warm-dark surfaces; state colors (--s-*) + sky/leaf/amber preserved (added 2026-06-27) ── */
@media (prefers-color-scheme: dark){
  :root:not(.theme-light){
  --bone:#1B1C1E; --bone-deep:#24262A; --hairline:#3A3C42; --ink:#ECEAE3;
  --ink-80:#C5C3BC; --muted:#928F87; --link:#8FB6EE;
  --btn-hover:#D7D5CE;
  --field:#27292E; --knob:#ECEAE3; --danger:#E8A0A0; --raised:#2F3137;
  --backdrop:#0D0E10; --press:#2C2E33; --scale-lo:#3A3C42; --scale-hi:#C5C3BC; --link-soft:rgba(143,182,238,.45); --tg-dim:#565961;
  --track-mind:#E7E5DE;
  /* on dark, the raw track colors themselves clear 4.5:1 — the ink variants map to them */
  --track-mind-ink:#ECEAE3; --track-safety-ink:#5891C5; --track-self-ink:#D29A4A;
  }
}
:root.theme-dark{
  --ink-faded:rgba(236,234,227,.25);
  --bone:#1B1C1E; --bone-deep:#24262A; --hairline:#3A3C42; --ink:#ECEAE3;
  --ink-80:#C5C3BC; --muted:#928F87; --link:#8FB6EE;
  --btn-hover:#D7D5CE;
  --field:#27292E; --knob:#ECEAE3; --danger:#E8A0A0; --raised:#2F3137;
  --backdrop:#0D0E10; --press:#2C2E33; --scale-lo:#3A3C42; --scale-hi:#C5C3BC; --link-soft:rgba(143,182,238,.45); --tg-dim:#565961;
  --track-mind:#E7E5DE;
  --track-mind-ink:#ECEAE3; --track-safety-ink:#5891C5; --track-self-ink:#D29A4A;
}


/* gentle update toast: persistent "a new version is ready" prompt (var-driven; themes in dark) */
.update-toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,8px);display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--bone);font-size:calc(13.5px * var(--type-scale));padding:8px 10px 8px 17px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:61;box-shadow:0 8px 24px rgba(0,0,0,.16);max-width:calc(100% - 32px)}
.update-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.update-toast button{font:inherit;font-size:calc(13px * var(--type-scale));font-weight:500;color:var(--ink);background:var(--bone);border:0;border-radius:999px;padding:6px 13px;cursor:pointer;flex:none}
@media (prefers-reduced-motion:reduce){.update-toast{transition:opacity .25s var(--ease)}}


/* delight: the safety line draws itself on a gain (a payoff); reduce-motion safe, gains only */
@keyframes chartDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes chartArea{from{opacity:0}to{opacity:.1}}
body:not(.reduce-motion) .chart.draw-gain .cline-path{stroke-dasharray:1;animation:chartDraw 1.05s var(--ease) forwards}
body:not(.reduce-motion) .chart.draw-gain .cline-area{animation:chartArea .85s var(--ease) .2s both}


/* brand logo as a live state read — color only, lockup fixed (added 2026-06-27) */
.triglyph{height:1em;width:auto;display:inline-block;vertical-align:middle;overflow:visible}
.tg-m{fill:var(--tg-dim);transition:fill .62s var(--ease)}
body.reduce-motion .tg-m{transition:none}
.sd-head .sd-marks .triglyph{height:46px}
.safety-foot{display:flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:nowrap}
.safety-foot .tg-host{flex:none;display:inline-flex}
.safety-foot .triglyph{height:30px}
.safety-foot .sf-txt{flex:1}


/* 'your growth' card headline */
.growth-head{display:flex;flex-direction:column;gap:5px;margin:4px 0 16px}
.growth-num{font-size:calc(30px * var(--type-scale));font-weight:500;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.growth-num.up{color:var(--leaf)}
.growth-num.down{color:var(--muted)}
.growth-cap{font-size:calc(14px * var(--type-scale));color:var(--ink-80);line-height:1.5;text-wrap:pretty}


/* change a recent check-in: picker list + entry link */
.change-link{display:block;margin:12px 0 2px;align-self:flex-start;text-align:left;background:none;border:0;color:var(--link);font:inherit;font-size:calc(13px * var(--type-scale));cursor:pointer;text-decoration:underline;text-decoration-color:var(--link-soft);text-underline-offset:3px}
.change-list{display:flex;flex-direction:column;gap:8px}
.change-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--bone-deep);border:1px solid var(--hairline);border-radius:12px;padding:13px 14px;cursor:pointer;color:var(--ink)}
.change-when{flex:1;font-size:calc(14px * var(--type-scale));font-weight:500}
.change-mark{display:flex;align-items:center;gap:7px;font-size:calc(13px * var(--type-scale));color:var(--ink-80)}
.change-row .wc-go{flex:none;display:flex}
.change-row .wc-go svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ci-when{font-size:calc(12.5px * var(--type-scale));color:var(--muted);margin:2px 0 0}


/* today redesign: breath ring on the left (row layout), affirming done-states, all left-aligned */
.breathhero{flex-direction:row;align-items:center;gap:15px}
.breathhero .bh-stage{width:auto;flex:none}
.breathhero .wc-ring{width:clamp(52px,11vh,62px);height:clamp(52px,11vh,62px)}
.breathhero .bh-rowwrap{flex:1;margin-top:0;min-width:0}
.wincard.done-rich{align-items:center;opacity:1;padding:15px 16px}
.done-rich .dr-logo{flex:none;display:flex}
.done-rich .dr-logo .triglyph{height:30px;width:auto}
.done-rich .dr-line{font-size:calc(13px * var(--type-scale));line-height:1.4;color:var(--ink-80);margin-top:3px;text-wrap:pretty}
.wincard.done-affirm{opacity:1}
.wincard.done-affirm .wc-title{color:var(--ink);font-weight:500}
.wincard.done-rich .wc-go,.wincard.done-affirm .wc-go{color:var(--muted)}

/* ---- moment timeline (reflections system, daily altitude) ---- */
.mtl{margin:6px 0 2px}
.mtl-svg{display:block;width:100%;height:auto}
.mtl-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:6px}
.mtl-key{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.mtl-sw{width:9px;height:9px;border-radius:50%;display:inline-block}
.mtl-ring{width:11px;height:11px;border-radius:50%;border:1.5px solid #C9A24B;display:inline-block}
.md-row{display:inline-flex;align-items:center;gap:6px;margin-top:9px}
.md-dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.md-dot.md-new{box-shadow:0 0 0 3px var(--bone),0 0 0 5px rgba(94,90,78,.28)}

/* ---- reflections archive (past minted reflections) ---- */
.arch-link{font-size:calc(13.5px * var(--type-scale));color:var(--link);align-self:flex-start}
/* shelf rows: FILLED (card grammar: filled = place to go), not divider lines —
   little bound volumes on the shelf; a filled row also fades like an object */
.arch-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--bone-deep);border:none;border-radius:12px;padding:13px 14px;margin:0 0 7px;cursor:pointer;color:var(--ink);transition:background .18s var(--ease)}
.arch-row:active{background:var(--press)}
.arch-row-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.arch-date{font-size:calc(13px * var(--type-scale));font-weight:500;color:var(--ink)}
.arch-snip{font-size:calc(13.5px * var(--type-scale));line-height:1.45;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.arch-row .wc-go{color:var(--muted);flex:0 0 auto}

/* ---- manage practices (delete a logged session) ---- */
.pr-row{display:flex;align-items:center;gap:12px;width:100%;border-top:0.5px solid var(--hairline);padding:14px 2px}
.pr-row:first-of-type{border-top:none}
.pr-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.pr-label{font-size:calc(14px * var(--type-scale));color:var(--ink);line-height:1.4}
.pr-del{flex:0 0 auto;background:none;border:0.5px solid var(--hairline);border-radius:var(--radius,8px);padding:6px 12px;font-size:calc(12.5px * var(--type-scale));color:var(--danger,#9A3B3B);cursor:pointer}
.pr-del:active{transform:scale(0.98)}

/* ---- weekly share card + archive weekly tag ---- */
.arch-tag{display:inline-block;margin-left:8px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);border:0.5px solid var(--hairline);border-radius:999px;padding:1px 7px;vertical-align:middle}
/* in-app share-card preview removed (Justin QA 2026-07-05) — the dark branded
   card lives only in the shared canvas image now */
.week-win{position:relative;border:1px solid var(--hairline);border-radius:14px;padding:17px 18px 15px;margin:2px 0 18px}
.ww-eyeb{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 10px}
.ww-line{font-size:calc(17px * var(--type-scale));line-height:1.45;font-weight:500;color:var(--ink);margin:0;padding-right:40px;text-wrap:pretty}
.ww-foot{display:flex;align-items:center;gap:9px;margin-top:14px}
.ww-foot .triglyph{height:24px;width:auto;animation:wwIn .55s .15s var(--ease) both}
.ww-name{font-size:calc(13.5px * var(--type-scale));font-weight:500;color:var(--muted)}
.ww-share{top:12px;right:12px}
@keyframes wwIn{from{opacity:0;transform:scale(1.28)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ww-foot .triglyph{animation:none}}
body.reduce-motion .ww-foot .triglyph{animation:none}

/* ---- change-a-check-in row: tappable edit + a remove button ---- */
.ci-row{display:flex;align-items:center;gap:8px;border-top:0.5px solid var(--hairline)}
.ci-row:first-of-type{border-top:none}
.ci-row .change-row{flex:1;min-width:0;border-top:none}
.ci-row .ci-del{flex:0 0 auto}

/* ---- for-you reader section visuals ---- */
.sec-viz{margin:12px 0 2px}
.vz-svg{display:block;width:100%;height:auto}
.vz-cap{font-size:10.5px;color:var(--muted);margin-bottom:4px}
.mix-bar{display:flex;height:24px;border-radius:6px;overflow:hidden}
.mix-bar>div{height:100%}
.vz-legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:8px}
.vz-key{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.vz-sw{width:9px;height:9px;border-radius:50%;display:inline-block}
.sec-glyph .triglyph{height:40px;width:auto}

/* ---- reader section heading: flows with the body, not the uppercase eyebrow ---- */
.sec-h{font-size:calc(15px * var(--type-scale));font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;line-height:1.3}
/* reader headings — the blog space never uses the uppercase eyebrow style;
   proper-case titles in the reading register instead */
.read-h1{font-size:calc(23px * var(--type-scale));font-weight:500;letter-spacing:-.01em;line-height:1.2;color:var(--ink);margin:0 0 14px;text-wrap:pretty}
.read-h2{font-size:calc(17px * var(--type-scale));font-weight:600;line-height:1.3;color:var(--ink);margin:0 0 9px}
.read-date{font-size:calc(13px * var(--type-scale));color:var(--muted);margin:0 0 10px}
.read-time{font-size:calc(12px * var(--type-scale));color:var(--muted);margin:-8px 0 16px}
/* reader-beauty pass: pull-quote (gold rail cut per Justin 2026-07-03) + minted seal (watermark cut) */
.read-pq{margin:18px 0 14px;padding:3px 0;border-left:none;font-size:calc(18px * var(--type-scale));line-height:1.55;font-weight:500;color:var(--ink);text-wrap:pretty;font-style:normal}
/* reader body copy — classes so the text-size setting reaches it (was inline px in app.js) */
.read-p{font-size:calc(15px * var(--type-scale));line-height:1.7;color:var(--ink-80);text-wrap:pretty;margin:0 0 12px}
/* fresh (data-driven) reader sections: accent hairline in the issue's state color +
   quiet eyebrow — the "what's new this week" scent trail (2026-07-05) */
.sec-fresh{border-left:2px solid var(--fresh-col,var(--s-safety));border-radius:0;padding-left:14px}
.fresh-eyeb{font-size:calc(10.5px * var(--type-scale));text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 6px}
.sec-share{margin-top:10px;font-size:calc(13px * var(--type-scale))}
.read-lead{font-size:calc(16px * var(--type-scale));line-height:1.65;color:var(--ink-80);text-wrap:pretty;margin:0 0 12px}
.read-dek{font-size:calc(16px * var(--type-scale));line-height:1.6;color:var(--muted);text-wrap:pretty;margin:8px 0 0}
/* reader TOC: ink text with a quiet ">" marker, inset like a list (blue links cut per Justin) */
.read-toc{margin:0;padding-left:14px;list-style:none}
.read-toc li{margin:0 0 8px;line-height:1.5;font-size:calc(15px * var(--type-scale))}
.read-toc li::before{content:">";color:var(--muted);margin-right:9px}
.read-toc a{color:var(--ink);text-decoration:none}
.arch-link{color:var(--ink);text-decoration-color:var(--muted)}
/* mint-seal removed (Justin 2026-07-04: "minted" won't make sense to the reader;
   the stamp was visually foreign to the app) */

/* ---- visiting reader sections: week-in-review + quarter/year (2026-07-04) ---- */
.wr-eyeb{font-size:calc(11px * var(--type-scale));letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 6px}
.wr-list{margin:2px 0 12px;padding-left:17px}
.wr-list li{margin:0 0 7px;line-height:1.6;color:var(--ink-80);font-size:calc(15px * var(--type-scale))}
.wr-ctx{margin:14px 0 4px}
.wr-ctx-q{font-size:calc(14px * var(--type-scale));color:var(--muted);margin:0 0 9px}
.wr-chiprow{display:flex;flex-wrap:wrap;gap:7px}
.wr-chiprow[hidden]{display:none}  /* class-selector display:flex would otherwise beat [hidden] UA rule; needed for the check-in context tabs */
.wr-chip{position:relative;border:0.5px solid var(--hairline);border-radius:999px;background:none;padding:8px 13px;font:inherit;font-size:calc(13px * var(--type-scale));color:var(--ink-80);cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease)}
.wr-chip::after{content:"";position:absolute;inset:-6px}   /* ~44pt hit area */
.wr-chip:active{background:var(--press)}
.wr-chip.on{background:var(--bone-deep);border-color:var(--ink-30,var(--muted));font-weight:500}
.wr-foot{font-size:calc(12.5px * var(--type-scale));color:var(--muted);margin:14px 0 0}

/* archive entry from the reader's large title (Justin QA: easier to find) */
.read-arch{position:absolute;top:4px;right:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--hairline);background:var(--bone);color:var(--muted);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:color .18s,border-color .18s}
.read-arch::after{content:"";position:absolute;inset:-6px}
.read-arch svg{width:16px;height:16px}
.read-arch:hover{color:var(--ink);border-color:var(--ink-80)}
.read-arch:active{transform:scale(.92)}
.read-head .read-h1{padding-right:48px}
.arch-snip{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ---- past reflections: pruned shelf, quiet groups, the quarter-turn fade ---- */
.arch-eyeb{font-size:calc(11px * var(--type-scale));letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:18px 0 8px}
.arch-eyeb:first-of-type{margin-top:4px}
.arch-sub{display:block;font-size:calc(12.5px * var(--type-scale));color:var(--muted);margin-top:3px}
.arch-note{font-size:calc(13px * var(--type-scale));color:var(--muted);margin:0 0 12px}
/* ghosts: ink fading on paper — no dialogs, no undo; witnessing it is a bonus */
.arch-ghost{transition:opacity 1.6s var(--ease),transform 1.6s var(--ease)}
.arch-ghost.gone{opacity:.06;transform:translateY(4px)}
.arch-ghost.fold{overflow:hidden;max-height:0 !important;margin:0;padding-top:0;padding-bottom:0;border-width:0;opacity:0;transition:all .8s var(--ease)}
/* the new quarterly settles in FIRST (arrival before departure) */
.arch-in{overflow:hidden;max-height:0;opacity:0}
.arch-in.here{opacity:1;transition:max-height 1.1s var(--ease),opacity 1.1s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .arch-ghost,.arch-in{transition:none}
}
/* reader sections breathe in on scroll (only when .read-anim is set by JS) */
.read-anim section{opacity:0;transform:translateY(9px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.read-anim section.sec-in{opacity:1;transform:none}

/* ============================================================================
   TODAY — breath-first, state-aware redesign
   One calm centerpiece: a breathing ring whose halo carries the current state
   color. Check-in readout above (outlined full-width when checked in, filled CTA
   when not), practice + reflections quiet at the foot. After a breath the
   instruction recedes, the ring quiets, and the cards open into the freed space.
   ============================================================================ */
.today.tb{display:flex;flex-direction:column;gap:0;padding:22px 22px 18px;height:100%;overflow-y:auto}
.tb-head{margin:2px 0 0;transition:opacity .6s var(--ease)}
.tb-greet{font-size:calc(17px * var(--type-scale));font-weight:500;color:var(--ink);letter-spacing:-.005em;text-wrap:pretty}

.tb-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;transition:flex-basis .6s var(--ease),gap .6s var(--ease),padding .6s var(--ease)}
/* check-in readout sits just under the greeting (a header row); the ring owns the centered hero below */
.tb-cluster{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;margin-top:14px;transition:opacity .6s var(--ease)}

.tb-state{display:inline-flex;align-items:center;gap:10px;width:100%;justify-content:flex-start;background:transparent;border:0;color:inherit;font-size:calc(15px * var(--type-scale));font-weight:500;cursor:pointer;padding:14px 2px}
.tb-state .triglyph{height:18px;width:auto;flex:none}
.tb-state-txt{color:var(--ink-80)}
.tb-state .tb-chev{margin-left:auto;display:inline-flex;color:var(--muted)}
.tb-chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tb-state:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* checked in → outlined full-width (matches the divider language) */
.tb-state-line{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
@media(hover:hover){.tb-state-line:hover .tb-state-txt{color:var(--ink)}}
/* not checked in → filled full-width CTA (the check-in is the priority) */
.tb-state-cta{background:var(--bone-deep);border-radius:14px;padding:15px 16px}
.tb-state-cta .tb-state-txt{color:var(--ink);font-weight:600}
.tb-state-cta .tb-chev{color:var(--ink-80)}

.tb-breath{display:flex;flex-direction:column;align-items:center;gap:18px;background:transparent;border:0;cursor:pointer;color:inherit}
.tb-breath:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:16px}
/* invisible counterweight above the ring, same height as the hint text below it,
   so the RING (not the ring+text block) is the optical center between the
   check-in divider and the cards. collapses with the hint when settled. */
.tb-breath::before{content:"";height:46px;flex:none;transition:height .6s var(--ease)}
.today.tb.breathed .tb-breath::before{height:0}
.tb-stage{position:relative;width:222px;height:222px;display:flex;align-items:center;justify-content:center;transition:width .6s var(--ease),height .6s var(--ease)}
.tb-halo{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid var(--halo);opacity:.5;animation:bloom 9s var(--ease) infinite;will-change:transform,opacity}
.tb-halo.b{width:86%;height:86%;animation-delay:.6s;opacity:.32}
.tb-ring{width:170px;height:170px;border-radius:50%;border:1.5px solid var(--ink);opacity:.72;display:flex;align-items:center;justify-content:center;animation:t-breathe 9s var(--ease) infinite;transition:width .6s var(--ease),height .6s var(--ease);will-change:transform,opacity}
.tb-core{width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.7}
.tb-below{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;overflow:hidden;transition:opacity .4s var(--ease),max-height .6s var(--ease),margin .6s var(--ease);max-height:calc(80px * var(--type-scale))}
.tb-txt{display:flex;flex-direction:column;gap:6px;transition:opacity .4s var(--ease)}
.tb-line{font-size:calc(19px * var(--type-scale));font-weight:500;color:var(--ink)}
.tb-hint{font-size:calc(13px * var(--type-scale));color:var(--muted)}
.tb-phase{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font-size:calc(22px * var(--type-scale));font-weight:500;color:var(--ink-80);letter-spacing:.12em;text-transform:lowercase;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.tb-phase.show{opacity:1}

/* two separate filled cards with air between them (was one grouped card with an
   inset hairline) — each action is content-rich enough to be its own destination.
   card language across the app: FILLED = a place to go (today, settings),
   BORDERED = an option to pick (practice chooser). */
.tb-foot{display:flex;flex-direction:column;gap:10px;background:transparent;border-radius:0;overflow:visible;margin-top:16px;transition:margin .6s var(--ease)}
.tb-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--bone-deep);border:0;border-radius:16px;padding:15px 16px;cursor:pointer;color:inherit;transition:padding .6s var(--ease)}
.tb-row:active{background:var(--press)}
.tb-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tb-row-ico{flex:none;width:20px;display:flex;align-items:center;justify-content:center;color:var(--muted);align-self:flex-start;margin-top:2px}
.tb-row-ico svg{width:19px;height:19px;display:block}
.tb-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* the practice name carries its track color (dark "ink" variants for contrast) */
.tb-prac{font-weight:500}
.tb-prac.track-mind{color:var(--track-mind-ink)}
.tb-prac.track-safety{color:var(--track-safety-ink)}
.tb-prac.track-self{color:var(--track-self-ink)}
.tb-row-title{font-size:calc(16px * var(--type-scale));font-weight:500;color:var(--ink);line-height:1.25}
.tb-row-sub{font-size:calc(13.5px * var(--type-scale));color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tb-refl{font-size:calc(14px * var(--type-scale));color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.tb-reason{font-size:calc(14px * var(--type-scale));color:var(--muted);line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .45s var(--ease),margin .45s var(--ease)}
.tb-row .wc-go{flex:none;display:flex;align-items:center;color:var(--muted)}
.tb-row .wc-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* breathing: the ring is the whole screen — everything else clears, incl. the tab bar */
body.breathing .tabbar{opacity:0;pointer-events:none}
.today.tb.breathing .tb-head,
.today.tb.breathing .tb-cluster,
.today.tb.breathing .tb-foot,
.today.tb.breathing .tb-txt{opacity:0;pointer-events:none}
.today.tb.breathing .tb-ring{animation:none}
.today.tb.breathing .tb-halo{animation:none;opacity:.42}

/* settled (breath taken): instruction gone, ring quiets — but the hero keeps
   filling so the cards stay anchored (no bottom void); reason shows in full */
.today.tb.breathed .tb-stage{width:132px;height:132px}
.today.tb.breathed .tb-ring{width:104px;height:104px;animation-duration:13s;opacity:.5}
.today.tb.breathed .tb-halo{animation-duration:13s;opacity:.4}
.today.tb.breathed .tb-below{opacity:0;max-height:0;min-height:0;margin:0}
.today.tb.breathed .tb-foot{margin-top:8px}
/* settled: the quieted ring hands its space to the two actions — roomier rows, larger text */
.today.tb.breathed .tb-row{padding:22px 18px}
.today.tb.breathed .tb-row-title{font-size:calc(17px * var(--type-scale))}
.today.tb.breathed .tb-row-sub{font-size:calc(14.5px * var(--type-scale))}
.today.tb.breathed .tb-refl{-webkit-line-clamp:3;font-size:calc(14.5px * var(--type-scale))}
.today.tb.breathed .tb-reason{max-height:200px;opacity:1;margin-top:5px}

/* a visible way out of the breath: a faint line fades in a moment after the
   breath starts (tap-anywhere-to-cancel is wired in runBreath) */
.tb-esc{font-size:calc(12px * var(--type-scale));color:var(--muted);opacity:0;transition:opacity .8s var(--ease);pointer-events:none;margin-top:4px}
.today.tb.breathing .tb-esc{opacity:.6;transition-delay:2.2s}

/* post-breath micro offer: the slot is COLLAPSED at rest (the ring keeps that
   space) and opens with the settle transition — it is already full-height by
   the time the button fades in, so the button itself never pushes anything */
.tb-more-slot{min-height:0;flex:none;display:flex;align-items:center;justify-content:center;transition:min-height .6s var(--ease)}
.today.tb.breathed .tb-more-slot{min-height:50px}
.tb-more{display:none;font:inherit;font-size:calc(13.5px * var(--type-scale));color:var(--ink-80);background:none;border:1px solid var(--hairline);border-radius:999px;cursor:pointer;padding:10px 18px;margin:0;transition:border-color .2s var(--ease),background .15s var(--ease)}
.today.tb.breathed .tb-more{display:inline-flex;animation:tcRise .5s .3s var(--ease) both}
@media(hover:hover){.tb-more:hover{border-color:var(--ink-80);color:var(--ink)}}
.tb-more:active{background:var(--press)}
.tb-more:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:999px}
.today.tb.breathing .tb-more{display:none}
@media (prefers-reduced-motion:reduce){.today.tb.breathed .tb-more{animation:none}}

/* first-week accounts: the settled ring keeps its faint hint so a returning
   new user still knows the circle is tappable */
.today.tb.breathed.young .tb-below{opacity:1;max-height:calc(46px * var(--type-scale));min-height:0;margin:0}
.today.tb.breathed.young .tb-txt{opacity:1}
.today.tb.breathed.young .tb-line{display:none}
.today.tb.breathed.young .tb-hint{opacity:.55}

@keyframes bloom{0%,100%{transform:scale(.96);opacity:.30}50%{transform:scale(1.05);opacity:.55}}
@media (prefers-reduced-motion:reduce){.tb-halo,.tb-ring{animation:none;transform:scale(.98)}}