/* ============ KEY DTx — design tokens (from the reference kit) ============ */
:root{
  --page:#F1EAE2; --page-ink:#4B3425; --page-ink-2:#736B66; --page-ink-3:#928D86;
  --page-card:#FFFFFF; --page-line:#E8DDD9; --page-seg:#EFE8E3; --page-frame:#FBF9F8; --page-frame-btn:#E9E2DE;
  --shadow:0 44px 90px rgba(75,52,37,.20), 0 14px 30px rgba(75,52,37,.12);
  --s:1;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --page:#17110E; --page-ink:#F7F4F2; --page-ink-2:#B9AEA6; --page-ink-3:#8E847C; --page-card:#241D19; --page-line:#392E28; --page-seg:#2F2621; --page-frame:#2D2420; --page-frame-btn:#3A302A; --shadow:0 44px 90px rgba(0,0,0,.55), 0 14px 30px rgba(0,0,0,.4); }
}
:root[data-theme="dark"]{ --page:#17110E; --page-ink:#F7F4F2; --page-ink-2:#B9AEA6; --page-ink-3:#8E847C; --page-card:#241D19; --page-line:#392E28; --page-seg:#2F2621; --page-frame:#2D2420; --page-frame-btn:#3A302A; --shadow:0 44px 90px rgba(0,0,0,.55), 0 14px 30px rgba(0,0,0,.4); }

/* app theme lives on .screen so the page chrome and the app can differ */
.screen{
  --screen:#F7F4F2; --card:#FFFFFF; --line:#E8DDD9; --line-2:#F2EDEB; --line-3:#FBF9F8;
  --ink:#4B3425; --ink-2:#736B66; --ink-3:#928D86; --ink-4:#CFC8C3;
  --brown:#4F3422; --brown-ink:#FFFFFF;
  --green:#9BB068; --green-2:#E5EAD7; --green-3:#5E7233;
  --orange:#FE814B; --orange-2:#FFE0D0; --orange-3:#A8481B;
  --yellow:#FFCE5C; --yellow-2:#FFF1CC; --yellow-3:#8F6A10;
  --purple:#A18FFF; --purple-2:#E7E2FF; --purple-3:#4B3CA8;
  /* the calm blue carries the large surfaces — night, sleep, breath; purple stays for accents */
  --blue:#7BA3C9; --blue-2:#E3EDF6; --blue-3:#2F5478;
  --taupe:#A6968B; --taupe-2:#EDE7E2; --taupe-3:#5E4F45;
  --brown-mood:#926247;
  --nav-shadow:0 -10px 30px rgba(75,52,37,.08);
  --nav-drop:0 -6px 20px rgba(75,52,37,.10); --nav-edge:rgba(75,52,37,.05); --nav-fill:var(--card); --nav-on:#7A9246;
  --fab-shadow:0 12px 26px rgba(79,52,34,.35);
  --card-shadow:none;
}
.screen.dark{
  --screen:#2B1F18; --card:#3A2B22; --line:#523F33; --line-2:#45342A; --line-3:#35281F;
  --ink:#F7F4F2; --ink-2:#C9BAAE; --ink-3:#A39488; --ink-4:#6E5C50;
  --brown:#F7F4F2; --brown-ink:#4B3425;
  --green-3:#9BB068; --orange-3:#FFA57D; --yellow-3:#FFD978; --purple-3:#C3B7FF; --blue-3:#A7C6E4; --taupe-3:#D3C5BA; --green-2:#3A4429; --orange-2:#55311F; --yellow-2:#54421F; --purple-2:#3A2F4F; --taupe-2:#4A392E; --blue-2:#2A3B4C;
  --nav-shadow:0 -10px 30px rgba(0,0,0,.35);
  --nav-drop:0 -6px 20px rgba(0,0,0,.45); --nav-edge:rgba(255,255,255,.16); --nav-fill:#3D2E25; --nav-on:var(--green);
  --fab-shadow:0 12px 26px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--page-ink);font-family:Urbanist,"Segoe UI",Helvetica,Arial,sans-serif;padding:28px 32px 36px;min-height:100dvh;-webkit-font-smoothing:antialiased;position:relative;isolation:isolate;transition:background .25s,color .25s}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(560px 460px at 6% 10%,rgba(155,176,104,.30),transparent 70%),
  radial-gradient(520px 460px at 95% 14%,rgba(254,129,75,.20),transparent 70%),
  radial-gradient(620px 520px at 82% 100%,rgba(161,143,255,.20),transparent 70%),
  radial-gradient(560px 460px at 10% 98%,rgba(255,206,92,.24),transparent 70%)}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
button:focus-visible,[contenteditable]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
svg{display:block}
a{color:inherit}

/* ---------- page chrome (around the phone) ---------- */
.stage{display:grid;grid-template-columns:minmax(250px,310px) auto minmax(220px,270px);grid-template-areas:"brand phone tools" "screens phone tools";grid-template-rows:auto 1fr;column-gap:56px;row-gap:22px;justify-content:center;align-items:start;max-width:1280px;margin:0 auto}
.brandbar{grid-area:brand;display:flex;align-items:center;gap:12px;padding-top:6px}
.logo{width:46px;height:46px;border-radius:15px;background:#9BB068;display:grid;place-items:center;box-shadow:0 8px 18px rgba(94,114,51,.28);flex:none}
.logo svg{color:#fff}
.bname{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.bname .brand{font-size:26px;font-weight:800;letter-spacing:-.01em}
.bname small{margin-top:3px;font-size:13px;font-weight:700;color:var(--page-ink-2)}
.ver{margin-left:auto;background:var(--page-card);border:1px solid var(--page-line);color:var(--page-ink-2);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;white-space:nowrap}
.pgh{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--page-ink-3)}
.screens{grid-area:screens}
.tools{grid-area:tools;display:flex;flex-direction:column;gap:14px;padding-top:6px}
.pgpanel{background:var(--page-card);border:1px solid var(--page-line);border-radius:24px;padding:16px 16px 14px;box-shadow:0 6px 18px rgba(75,52,37,.05)}
.pgrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;font-size:15px;font-weight:700}
.pgtxt{display:flex;flex-direction:column;min-width:0}
.pgtxt b{font-size:15px;font-weight:800}
.pgtxt small{margin-top:2px;font-size:12.5px;font-weight:600;color:var(--page-ink-2);line-height:1.3}
.pgseg{display:flex;width:152px;background:var(--page-seg);border-radius:999px;padding:3px;flex:none}
.pgseg button{flex:1;text-align:center;border:0;background:transparent;color:var(--page-ink-2);font-size:13px;font-weight:800;padding:7px 0;border-radius:999px;transition:background .2s,color .2s,box-shadow .2s}
.pgseg button[aria-pressed="true"]{background:var(--page-card);color:var(--page-ink);box-shadow:0 2px 8px rgba(75,52,37,.14)}
.pgswitch{position:relative;width:48px;height:28px;flex:none;border:0;border-radius:999px;background:var(--page-seg);padding:0;transition:background .2s}
.pgswitch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(75,52,37,.28);transition:transform .22s}
.pgswitch[aria-checked="true"]{background:#9BB068}
.pgswitch[aria-checked="true"] i{transform:translateX(20px)}
.pgreset{width:100%;margin-top:10px;border:1px solid var(--page-line);background:transparent;color:#C2410C;border-radius:14px;padding:10px 12px;font-size:13.5px;font-weight:800;transition:background .2s}
.pgreset:hover{background:rgba(254,129,75,.12)}
.pgnote{margin:2px 4px 0;font-size:12.5px;font-weight:600;color:var(--page-ink-3);line-height:1.4}

/* ---------- phone frame ---------- */
.phone-wrap{grid-area:phone;position:sticky;top:20px;height:calc(868px * var(--s));width:calc(414px * var(--s));display:flex;justify-content:center}
.phone{width:414px;height:868px;flex:none;border-radius:62px;background:var(--page-frame);padding:12px;box-shadow:var(--shadow);position:relative;transform:scale(var(--s));transform-origin:top center;transition:background .25s}
.phone::before,.phone::after{content:"";position:absolute;background:var(--page-frame-btn);border-radius:3px}
.phone::before{left:-3px;top:150px;width:3px;height:64px;box-shadow:0 84px 0 var(--page-frame-btn)}
.phone::after{right:-3px;top:210px;width:3px;height:96px}
.screen{position:relative;width:100%;height:100%;border-radius:50px;overflow:hidden;background:var(--screen);color:var(--ink);font-size:calc(16px*var(--fs,1));font-weight:600;line-height:1.35;transition:background .25s}
.status{position:absolute;inset:0 0 auto 0;height:54px;display:flex;align-items:flex-start;justify-content:space-between;padding:16px 30px 0;font-weight:700;font-size:calc(16px*var(--fs,1));z-index:30;pointer-events:none;color:var(--ink);transition:color .2s;font-variant-numeric:tabular-nums}
.status svg{height:14px;width:auto}
.status .right{display:flex;gap:6px;align-items:center}
.status::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--screen) 90%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);opacity:var(--sb,0)}
.screen.light-status .status{color:#fff}
.screen.scrolled .status{color:var(--ink)}
.island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:34px;border-radius:20px;background:#E8DDD9;z-index:31;pointer-events:none}
.screen.dark .island{background:#0E0B09}
.island::after{content:"";position:absolute;right:11px;top:10px;width:14px;height:14px;border-radius:50%;background:#6B584C;box-shadow:inset 0 0 0 3px #9B8578}
.home-ind{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--ink);z-index:30;pointer-events:none;opacity:.42}
.screen.light-status .home-ind{background:#fff}
#view{position:absolute;inset:0}

/* ---------- screen layout ---------- */
.scr{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:54px}
.scr.flush{padding-top:0}
.scr-body{flex:1;min-height:0;overflow-y:auto;padding:0 20px 28px;scrollbar-width:none}
.scr-body::-webkit-scrollbar{display:none}
.scr-body.flush{padding:0 0 28px}
.top{display:flex;align-items:center;gap:12px;padding:6px 20px 0;height:62px;flex:none}
.top h2{font-size:calc(20px*var(--fs,1));font-weight:800;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top.light{color:#fff}
.iconbtn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;display:grid;place-items:center;color:var(--ink);flex:none;padding:0}
.iconbtn svg{width:22px;height:22px}
.iconbtn.light{border-color:#fff;color:#fff}
.iconbtn.sm{width:40px;height:40px}
.iconbtn.sm svg{width:20px;height:20px}
.iconbtn.bare{width:36px;height:36px;border:0;border-radius:10px;margin-right:-6px}
.iconbtn.bare svg{width:22px;height:22px}
.iconbtn.fill{background:var(--card);border-color:var(--line)}
.stepchip{background:var(--line);color:var(--ink-2);font-size:calc(11px*var(--fs,1));font-weight:800;letter-spacing:.14em;padding:8px 12px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.stepchip.light{background:rgba(255,255,255,.28);color:#fff}
.q{font-size:calc(30px*var(--fs,1));font-weight:800;line-height:1.2;text-align:center;margin:22px 20px 0;text-wrap:balance;letter-spacing:-.01em}
.q.left{text-align:left;margin-inline:0}
.lead{margin:12px 24px 0;text-align:center;color:var(--ink-2);font-size:calc(16px*var(--fs,1));font-weight:600;text-wrap:balance}
.sec{font-size:calc(20px*var(--fs,1));font-weight:800;margin:26px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.sec:first-child{margin-top:8px}
.sec .link{font-size:calc(13px*var(--fs,1));font-weight:700;color:var(--ink-2);border:0;background:none;padding:6px 0;display:inline-flex;gap:4px;align-items:center}
.sec .link svg{width:16px;height:16px}
.sec > svg{width:22px;height:22px;color:var(--ink-2)}
.card{background:var(--card);border-radius:24px;padding:18px;border:1px solid var(--line-2);box-shadow:0 2px 12px rgba(75,52,37,.04)}
.card + .card{margin-top:12px}
.muted{color:var(--ink-2)}
.small{font-size:calc(13px*var(--fs,1));font-weight:600}
.round{width:56px;height:56px;border:0;border-radius:50%;display:grid;place-items:center;flex:none;padding:0}
.round.soft{background:var(--line-2);color:var(--ink)}
.round svg{width:24px;height:24px}
.empty{text-align:center;padding:28px 18px;border:1.5px dashed var(--line);border-radius:24px;color:var(--ink-2)}
.empty > svg{width:40px;height:40px;margin:0 auto 10px;color:var(--ink-4)}
.empty b{display:block;color:var(--ink);font-size:calc(17px*var(--fs,1));font-weight:800;margin-bottom:4px}
.empty .btn-primary,.empty .pill{margin-top:14px}

/* faces */
.face{width:48px;height:48px;color:var(--ink);flex:none}
.face.light{color:#fff}
.face-big{width:120px;height:120px;margin:16px auto 0;filter:drop-shadow(0 18px 28px rgba(0,0,0,.18))}
.fc{transition:fill .3s}

/* buttons */
.btn-primary{width:100%;height:58px;border:0;border-radius:999px;background:var(--brown);color:var(--brown-ink);font-size:calc(18px*var(--fs,1));font-weight:700;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 22px}
.btn-primary svg{width:22px;height:22px}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-primary.light{background:#fff;color:var(--brown)}
.btn-primary.orange{background:var(--orange);color:#fff}
.btn-primary.green{background:var(--green);color:#fff}
.btn-secondary{width:100%;height:58px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-size:calc(18px*var(--fs,1));font-weight:700;display:flex;align-items:center;justify-content:center;gap:12px}
.btn-secondary.light{border-color:#fff;color:#fff}
.btn-secondary svg{width:22px;height:22px}
.pill{border:0;border-radius:999px;padding:13px 22px;font-weight:700;font-size:calc(16px*var(--fs,1));display:inline-flex;gap:8px;align-items:center;justify-content:center}
.pill svg{width:18px;height:18px}
.pill.green{background:var(--green);color:#fff}
.pill.orange{background:var(--orange);color:#fff}
.pill.soft{background:var(--line-2);color:var(--ink)}
.pill.sm{padding:9px 14px;font-size:calc(13px*var(--fs,1))}
.pill.listening{background:var(--orange);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(254,129,75,.18)}}
/* return strip — the way back into an open programme session.
   A flex child of .scr, so it sits above the screen's own bottom chrome. On tab
   screens it clears the navbar's protruding check-in button. */
.score-hero .big-empty{position:relative;width:92px;height:92px;margin:26px auto 14px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;box-shadow:0 0 0 12px rgba(255,255,255,.1)}
.score-hero .big-empty svg{width:40px;height:40px;color:#fff}
.fab-float.fab-ci{background:var(--brown);color:var(--brown-ink);animation:ciPulse 2.4s ease-in-out 1s 3}
@keyframes ciPulse{0%,100%{box-shadow:0 10px 22px rgba(75,52,37,.28),0 0 0 0 rgba(155,176,104,.55)}50%{box-shadow:0 10px 22px rgba(75,52,37,.28),0 0 0 14px rgba(155,176,104,0)}}
.score-hero .he-t{position:relative;margin:0 0 4px;font-size:calc(24px*var(--fs,1));font-weight:800;color:#fff}
.score-hero .hero-pill{position:relative;margin:14px auto 0;background:#fff;color:#5E7233;border:0;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.retctx{flex:none;display:flex;align-items:center;gap:9px;margin:2px 20px 6px;padding:6px 8px 6px 6px;border:0;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,var(--card));color:var(--ink);text-align:left;font:inherit;position:relative;z-index:3;animation:rcIn .35s ease both}
.retctx > svg{width:14px;height:14px;color:var(--ink-3);flex:none;margin-left:4px}
.retctx .rb-disc{width:24px;height:24px}
.rc-txt{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;white-space:nowrap;overflow:hidden}
.rc-txt b{font-size:calc(12.5px*var(--fs,1));font-weight:800;flex:none}
.rc-txt span{font-size:calc(12px*var(--fs,1));font-weight:600;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.rc-go{flex:none;font-size:calc(12px*var(--fs,1));font-weight:800;color:#fff;background:var(--c);padding:5px 11px;border-radius:999px}
@keyframes rcIn{from{opacity:0;transform:translateY(-6px)}}
.rb-disc{display:block;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 40%,transparent)}
.rb-disc svg{display:block;width:100%;height:100%}
.retdone{flex:none;position:relative;z-index:6;transition:transform .26s ease,opacity .26s ease;touch-action:pan-x}
.retdone.float{position:absolute;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.retdone.float.above-nav{bottom:134px}
.retdone.in-cta{margin-bottom:2px}
.retdone.fresh{animation:rdIn .5s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes rdIn{from{opacity:0;transform:translateY(40px) scale(.96)}}
.rd-card{width:100%;display:flex;align-items:center;gap:12px;border:0;padding:10px 14px 10px 10px;border-radius:26px;font:inherit;text-align:left;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 88%,#fff 12%),color-mix(in srgb,var(--c) 92%,#000 8%));
  box-shadow:0 14px 30px color-mix(in srgb,var(--c) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.rd-ring{position:relative;width:48px;height:48px;flex:none;display:grid;place-items:center}
.rd-ring > svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rd-ring > svg circle{fill:none;stroke-width:3.2}
.rd-ring .bg{stroke:rgba(255,255,255,.3)}
.rd-ring .fg{stroke:#fff;stroke-linecap:round;stroke-dashoffset:0}
.retdone.fresh .rd-ring .fg{animation:rdRing .9s cubic-bezier(.6,0,.2,1) .25s both}
@keyframes rdRing{from{stroke-dashoffset:var(--L)}}
.rd-ring .rb-disc{width:36px;height:36px;box-shadow:none}
.rd-ok{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;background:#fff;color:var(--c);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.rd-ok svg{width:12px;height:12px;stroke-width:3}
.retdone.fresh .rd-ok{animation:rdPop .4s cubic-bezier(.3,1.6,.5,1) 1.05s both}
@keyframes rdPop{from{transform:scale(0)}}
.rd-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rd-txt small{font-size:calc(11.5px*var(--fs,1));font-weight:700;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-txt b{font-size:calc(15px*var(--fs,1));font-weight:800;line-height:1.2}
.rd-go{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.24);display:grid;place-items:center}
.rd-go svg{width:18px;height:18px}
.rd-grab{position:absolute;left:50%;top:5px;width:30px;height:3px;margin-left:-15px;border-radius:3px;background:rgba(255,255,255,.45);pointer-events:none}
.player-scr .retctx{background:rgba(255,255,255,.2);color:#fff}
.player-scr .retctx > svg,.player-scr .rc-txt span{color:rgba(255,255,255,.8)}
.player-scr .rc-go{background:#fff;color:var(--c)}
@media (prefers-reduced-motion:reduce){.retdone.fresh,.retdone.fresh .rd-ring .fg,.retdone.fresh .rd-ok,.retctx{animation:none}}
.cta{padding:12px 20px 30px;flex:none;display:flex;flex-direction:column;gap:10px}
.cta.row{flex-direction:row}
.cta.row > *{flex:1}
.link-btn{border:0;background:none;color:var(--ink-2);font-weight:700;padding:8px;text-decoration:underline;text-underline-offset:3px}

/* forms */
.field{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.field label{font-size:calc(13px*var(--fs,1));font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.input{width:100%;height:56px;border-radius:999px;border:1px solid var(--line);background:var(--card);padding:0 20px;font-weight:600;color:var(--ink)}
.input::placeholder{color:var(--ink-3)}
textarea.input{height:auto;min-height:120px;border-radius:24px;padding:16px 20px;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 26px) 24px,calc(100% - 20px) 24px;background-size:6px 6px;background-repeat:no-repeat;padding-right:48px}
.input-row{display:flex;gap:10px}
.input-row .input{min-width:0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:calc(12px*var(--fs,1));font-weight:700;color:var(--ink-2);display:inline-flex;gap:5px;align-items:center}
.chip svg{width:14px;height:14px}
.chipsel{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:11px 16px;font-weight:700;font-size:calc(15px*var(--fs,1));display:inline-flex;gap:8px;align-items:center;transition:.15s}
.chipsel svg{width:16px;height:16px}
.chipsel[aria-pressed="true"]{background:var(--brown);border-color:var(--brown);color:var(--brown-ink)}
.chipsel.orange[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.chipsel.green[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;background:var(--card);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg button{border:0;background:transparent;padding:10px 15px;border-radius:999px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.seg button[aria-selected="true"]{background:var(--brown);color:var(--brown-ink)}
.toggle{position:relative;width:52px;height:30px;border-radius:999px;background:var(--line);border:0;padding:0;flex:none;transition:background .2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.toggle[aria-checked="true"]{background:var(--green)}
.toggle[aria-checked="true"]::after{transform:translateX(22px)}
.checkbox{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink-4);background:transparent;display:grid;place-items:center;color:#fff;flex:none;padding:0;transition:.15s}
.checkbox svg{width:16px;height:16px;opacity:0}
.checkbox[aria-checked="true"]{background:var(--green);border-color:var(--green)}
.checkbox[aria-checked="true"] svg{opacity:1}
.checkbox.skipped{background:var(--line);border-color:var(--line);color:var(--ink-2)}
.checkbox.skipped svg{opacity:1}
.radio{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink-4);display:grid;place-items:center;flex:none}
.radio::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--brown);transform:scale(0);transition:.15s}
.row[aria-checked="true"] .radio{border-color:var(--brown)}
.row[aria-checked="true"] .radio::after{transform:scale(1)}
.daypick{display:flex;gap:6px;justify-content:space-between}
.daypick button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);font-weight:800;font-size:calc(13px*var(--fs,1));color:var(--ink-2);padding:0}
.daypick button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.swatches{display:flex;gap:10px}
.swatches button{width:36px;height:36px;border-radius:50%;border:3px solid transparent;padding:0}
.swatches button[aria-pressed="true"]{border-color:var(--ink)}
.timechips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.timechip{display:inline-flex;align-items:center;gap:6px;background:var(--line-2);border-radius:999px;padding:8px 8px 8px 14px;font-weight:800;font-variant-numeric:tabular-nums}
.timechip button{border:0;background:var(--line);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;padding:0;color:var(--ink-2)}
.timechip button svg{width:12px;height:12px}
input[data-tp].input{width:auto;padding-right:14px}

/* list rows */
.row{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:24px;padding:14px 16px;border:1px solid var(--line-2);margin-bottom:12px;text-align:left;width:100%;box-shadow:0 2px 12px rgba(75,52,37,.04)}
button.row{cursor:pointer}
/* the plate centres its icon wherever it is used — this rule used to live under
   .row, so every icon outside a list row sat in its top-left corner */
.ticon{display:grid;place-items:center;color:#fff;flex:none;border-radius:50%}
.row .ticon{width:52px;height:52px}
.row .ticon svg{width:24px;height:24px}
.ticon.green{background:var(--green)} .ticon.purple{background:var(--purple)} .ticon.blue{background:var(--blue)} .ticon.orange{background:var(--orange)} .ticon.yellow{background:var(--yellow);color:#4B3425} .ticon.taupe{background:var(--taupe)} .ticon.brown{background:var(--brown);color:var(--brown-ink)} .ticon.soft{background:var(--line-2);color:var(--ink)}
.ticon.sm{width:44px;height:44px}
.ticon.sm svg{width:20px;height:20px}
.row .txt{flex:1;min-width:0}
.row .txt b{display:block;font-size:calc(17px*var(--fs,1));font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .txt span{font-size:calc(13px*var(--fs,1));color:var(--ink-2);font-weight:600;display:block}
.row .right{flex:none;display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.row .right svg{width:20px;height:20px}
.row .right b{font-size:calc(15px*var(--fs,1));font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.group{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;margin-bottom:16px}
.group .row{border:0;border-radius:0;margin:0;background:transparent}
.group .row + .row{border-top:1px solid var(--line)}

/* ---------- bottom nav ---------- */
.nav{flex:none;position:relative;height:88px;z-index:5}
/* the nav floats over the page: content scrolls under it and shows through the scoop and around the pill */
.scr.hasnav > .nav{position:absolute;left:0;right:0;bottom:0}
.scr.hasnav > .scr-body{padding-bottom:116px;-webkit-mask-image:linear-gradient(#000 calc(100% - 15px),transparent calc(100% - 10px));mask-image:linear-gradient(#000 calc(100% - 15px),transparent calc(100% - 10px))}
.navshape{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(var(--nav-drop))}
.navrow{position:absolute;left:0;right:0;bottom:10px;height:78px}
.nav button{border:0;background:none;width:52px;height:52px;border-radius:50%;margin:0 auto;display:grid;place-items:center;color:var(--ink-4);padding:0}
.navrow button{position:absolute;top:13px;margin:0;transform:translateX(-50%);transition:color .2s}
.nav button svg{width:24px;height:24px}
.navrow button.on{color:var(--nav-on);background:none}
.navglass{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6)}
.navdot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--nav-on);box-shadow:0 0 0 2px var(--nav-fill);pointer-events:none;z-index:1;will-change:left,top,transform}
/* the nav FAB is the app's single global action (daily check-in) — green, identical on every screen.
   .fab-float is a screen's own "add" and is brown, so the two never read as the same button.
   bottom:54px puts its centre exactly on the pill's top edge, inside the scoop. */
.nav .fab{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);width:68px;height:68px;background:var(--green);color:#fff;box-shadow:0 5px 12px rgba(94,114,51,.28)}
.nav .fab svg{width:27px;height:27px}

/* ---------- home ---------- */
.hello{display:flex;align-items:center;gap:14px;padding-top:6px}
.avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(145deg,#F0E6E1,#C6B2A6);display:grid;place-items:center;font-weight:800;font-size:calc(20px*var(--fs,1));color:#4B3425;flex:none}
.avatar.lg{width:88px;height:88px;font-size:calc(32px*var(--fs,1));border:4px solid rgba(255,255,255,.6)}
.hello-text{flex:1;min-width:0}
.datechip{font-size:calc(11px*var(--fs,1));font-weight:800;letter-spacing:.08em;color:var(--ink-2);display:inline-flex;gap:6px;align-items:center;text-transform:uppercase}
.datechip svg{width:13px;height:13px}
.hello h1{font-size:calc(24px*var(--fs,1));margin:2px 0 8px;font-weight:800;letter-spacing:-.01em;line-height:1.1;overflow-wrap:anywhere}
.search{margin-top:18px;display:flex;align-items:center;gap:10px;height:52px;border-radius:999px;background:var(--card);border:1px solid var(--line);padding:0 18px;color:var(--ink-3)}
.search svg{width:20px;height:20px;flex:none}
.search input{border:0;background:none;font-weight:600;color:var(--ink);flex:1;min-width:0}
.search input::placeholder{color:var(--ink-3)}
.search input[type=search]{-webkit-appearance:none;appearance:none;outline:none;font:inherit;font-weight:600}
.search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin:0 4px 0 6px;cursor:pointer;background:var(--ink-3);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") center/contain no-repeat}
.metrics{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 8px;scrollbar-width:none}
.metrics::-webkit-scrollbar{display:none}
.mcard{flex:none;width:170px;height:188px;border-radius:32px;padding:18px 18px 16px;color:#fff;display:flex;flex-direction:column;scroll-snap-align:start;position:relative;overflow:hidden;border:0;text-align:left;font:inherit}
.mcard.green{background:var(--green)} .mcard.blue{background:var(--blue)} .mcard.orange{background:#F0774A} .mcard.purple{background:var(--purple)} .mcard.terra{background:#926247;color:#fff} .mcard.yellow{background:var(--yellow);color:#4B3425} .mcard.taupe{background:var(--brown-mood)} .mcard.brown{background:#4F3422}
.mcard .lbl{display:flex;gap:6px;align-items:center;font-size:calc(13px*var(--fs,1));font-weight:700}
.mcard .lbl svg{width:16px;height:16px}
.mcard .lbl .face{color:#fff}
.mcard.yellow .lbl .face{color:#4B3425}
.mcard .val{font-size:calc(26px*var(--fs,1));font-weight:800;margin-top:4px;line-height:1.1}
.mcard .sub{font-size:calc(12px*var(--fs,1));font-weight:700;opacity:.85;margin-top:2px}
.donut{position:relative;width:118px;height:118px;margin:14px auto 0}
.donut svg{width:100%;height:100%}
.donut .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.donut .num b{font-size:calc(30px*var(--fs,1));font-weight:800}
.donut .num span{font-size:calc(12px*var(--fs,1));font-weight:700;margin-top:3px}
.wave{margin-top:auto;display:flex;align-items:flex-end;gap:5px;height:88px}
.wave i{display:block;width:6px;border-radius:3px;background:currentColor;opacity:.95}
.dgrid{flex:1;min-height:0;margin-top:8px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(4,minmax(0,1fr));gap:3px 0}
.dgrid i{display:block;height:100%;max-height:13px;aspect-ratio:1;justify-self:center;align-self:center;border-radius:50%;background:rgba(255,255,255,.42)}
.dgrid i.on{background:#fff}
.mcard.yellow .dgrid i{background:rgba(75,52,37,.25)} .mcard.yellow .dgrid i.on{background:#4B3425}
.promo{border-radius:28px;padding:0 20px;min-height:96px;display:flex;gap:14px;align-items:center;color:#fff;border:0;width:100%;text-align:left;font:inherit;margin-top:12px}
.promo.blue{background:var(--blue)} .promo.taupe{background:var(--taupe)} .promo.yellow{background:var(--yellow);color:#4B3425} .promo.orange{background:var(--orange)} .promo.purple{background:var(--purple)} .promo.terra{background:#926247;color:#fff} .promo.green{background:var(--green)} .promo.brown{background:#4F3422}
.promo .txt{flex:1;min-width:0}
.promo .txt b{display:block;font-size:calc(17px*var(--fs,1));font-weight:800;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.promo .txt span{font-size:calc(12.5px*var(--fs,1));font-weight:600;opacity:.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;line-height:1.35}
.promo .go{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.28);display:grid;place-items:center;flex:none}
.promo.yellow .go{background:rgba(75,52,37,.14)}
.promo .go svg{width:20px;height:20px}
.promo .face{width:56px;height:56px}
.promo .ticon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none}
.promo .ticon svg{width:24px;height:24px}

/* ---------- full-colour hero screens ---------- */
.hero-scr{background:var(--hero,#FFCE5C);color:var(--hero-ink,#fff);transition:background-color .2s}
.hero-scr .top{color:inherit}
.hero-scr .iconbtn{border-color:currentColor;color:inherit}
.hero-scr .stepchip{background:rgba(255,255,255,.28);color:inherit}
.hero-scr .q{color:inherit}
.hero-scr .lead{color:inherit;opacity:.9}
.hero-scr .btn-primary{background:var(--hero-btn,#4B3425);color:var(--hero-btn-ink,#fff)}
.mood-label{margin:22px 0 0;text-align:center;font-size:calc(18px*var(--fs,1));font-weight:600;opacity:.9}
.chev{width:28px;height:28px;color:var(--ink-3);margin:18px auto 0}
.gauge{width:100%;height:300px;margin-top:auto;touch-action:none;user-select:none;cursor:grab}
.gauge:active{cursor:grabbing}
.gauge:focus{outline:none}
.gauge:focus-visible{outline:3px solid var(--purple);outline-offset:-3px;border-radius:24px}
.gauge.short{height:300px;margin-top:auto;display:block}
#wheel{transition:transform .42s cubic-bezier(.2,.8,.2,1)}

/* score hero */
/* one header shape for the whole app: the 44px rounded-bottom band.
   .score-hero is the coloured, value-led variant; .hero-band the plain one.
   (The dome/ellipse the score screens used is gone — it was the last place
   where two screens of the same kind looked like two different systems.) */
.score-hero{position:relative;background:var(--hero,var(--green));color:#fff;padding:60px 20px 34px;border-radius:0 0 44px 44px;overflow:hidden;text-align:center;flex:none;box-shadow:0 14px 34px rgba(75,52,37,.18)}
.contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.score-hero .top{padding:0;position:relative;color:#fff}
.score-hero .top h2{color:#fff}
.score-hero .big{position:relative;font-size:calc(130px*var(--fs,1));font-weight:800;line-height:1;margin:26px 0 6px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.score-hero .big small{font-size:calc(40px*var(--fs,1));letter-spacing:0;vertical-align:top;margin-left:4px;opacity:.9}
.score-hero p{position:relative;font-size:calc(17px*var(--fs,1));font-weight:600;max-width:260px;margin:0 auto;text-wrap:balance}
.fab-float{width:72px;height:72px;border:0;border-radius:50%;background:var(--brown);color:var(--brown-ink);margin:-36px auto 16px;display:grid;place-items:center;position:relative;z-index:2;box-shadow:var(--fab-shadow);padding:0}
.fab-float + .pad > .sec:first-child,.fab-float + .pad > *:first-child{margin-top:0}
.fab-float svg{width:28px;height:28px}
/* an "add" button shows what it adds (a pill, a book, a moon) with a small plus badge on its corner */
.fab-float .fab-plus{position:absolute;right:1px;top:1px;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;border:3px solid var(--screen);box-sizing:content-box;margin:-3px -3px 0 0}
.fab-float .fab-plus svg{width:14px;height:14px}
.hero-band + .fab-float{margin-top:-58px}
.pad{padding:0 20px}
.hcard{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:24px;padding:12px 14px;margin-bottom:12px;border:1px solid var(--line-2);width:100%;text-align:left;box-shadow:0 2px 12px rgba(75,52,37,.04)}
.hdate{width:58px;height:58px;border-radius:16px;background:var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;line-height:1;flex:none}
.hdate small{font-size:calc(10px*var(--fs,1));letter-spacing:.16em;color:var(--ink-2);font-weight:800;text-transform:uppercase}
.hdate b{font-size:calc(19px*var(--fs,1));margin-top:3px}
.htext{flex:1;min-width:0}
.htext b{display:block;font-size:calc(17px*var(--fs,1));font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htext span{font-size:calc(13px*var(--fs,1));color:var(--ink-2);font-weight:600}
.sdonut{width:50px;height:50px;position:relative;flex:none}
.sdonut svg{width:100%;height:100%}
.sdonut b{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(12px*var(--fs,1));font-weight:800}

/* charts */
.chart-card{margin-top:18px;position:relative}
.legend{display:flex;align-items:center;gap:14px;font-size:calc(13px*var(--fs,1));font-weight:700;color:var(--ink-2);flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.dot.green{background:var(--green)} .dot.blue{background:var(--blue)} .dot.orange{background:var(--orange)} .dot.purple{background:var(--purple)} .dot.yellow{background:var(--yellow)}
.ddown{margin-left:auto;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 12px;display:inline-flex;gap:6px;align-items:center;font-size:calc(12px*var(--fs,1));font-weight:700;color:var(--ink)}
.ddown svg{width:14px;height:14px}
.bars{width:100%;height:200px;margin-top:16px}
.bars g:hover rect{opacity:.85}
.axis{display:flex;justify-content:space-between;margin-top:10px}
.axis span{font-size:calc(11px*var(--fs,1));font-weight:800;color:var(--ink-2);background:var(--line-2);padding:5px 9px;border-radius:8px}
.tip{position:absolute;pointer-events:none;background:var(--brown);color:var(--brown-ink);font-size:calc(12px*var(--fs,1));font-weight:700;padding:6px 10px;border-radius:10px;transform:translate(-50%,-120%);white-space:nowrap;opacity:0;transition:opacity .12s;z-index:3}
.tip.show{opacity:1}
.moodrow{display:flex;justify-content:space-between}
.moodrow div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:calc(11px*var(--fs,1));font-weight:800;color:var(--ink-2)}
.moodrow .face{width:40px;height:40px}
.moodrow .face.empty-face{opacity:.35}
.linechart{margin-top:14px;position:relative}
.linechart svg{width:100%;height:auto;touch-action:pan-y;overflow:visible}
.xlabels{display:flex;justify-content:space-between;padding:0 10px;font-size:calc(12px*var(--fs,1));font-weight:800;color:var(--ink-2);margin-top:-6px}
.weekbars{display:flex;align-items:stretch;justify-content:space-between;height:140px;gap:10px;margin-top:16px}
.weekbars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.weekbars .track{flex:1;width:100%;max-width:20px;border-radius:10px;background:var(--line-2);display:flex;align-items:flex-end;overflow:hidden}
.weekbars .track i{display:block;width:100%;border-radius:10px;background:var(--fill,var(--green));transition:height .25s}
.weekbars span{font-size:calc(11px*var(--fs,1));font-weight:800;color:var(--ink-3);white-space:nowrap}
.weekbars div.today span{color:var(--ink)}
.weekbars div.today .track{box-shadow:inset 0 0 0 2px var(--line)}
.weekbars div.none .track{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--card);border:1px solid var(--line-2);border-radius:22px;padding:16px;box-shadow:0 2px 12px rgba(75,52,37,.04)}
.stat b{display:block;font-size:calc(26px*var(--fs,1));font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stat b svg{width:30px;height:30px}
button.stat{border:0;font:inherit;cursor:pointer}
.stat span{display:block;font-size:calc(12px*var(--fs,1));font-weight:700;color:var(--ink-2);margin-top:6px}
.stat.tint{border:0;color:#fff}
.stat.tint span{color:inherit;opacity:.85}

/* number picker (stress) */
.bignum{font-size:calc(120px*var(--fs,1));font-weight:800;text-align:center;line-height:1;margin:28px 0 8px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:color .2s}
.numpick{display:flex;justify-content:center;gap:8px;margin:22px auto 0;width:max-content;max-width:100%;border:1px solid var(--line);border-radius:999px;padding:8px;background:var(--card)}
.numpick button{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);font-weight:800;font-size:calc(18px*var(--fs,1));color:var(--ink-2);padding:0;transition:.15s}
.numpick button[aria-pressed="true"]{color:#fff;border-color:transparent;transform:scale(1.1)}

/* sleep slider */
.sleep{position:relative;height:470px;margin-top:22px;touch-action:none;user-select:none}
.strack{position:absolute;left:calc(50% - 6px);top:30px;width:12px;height:420px;border-radius:6px;background:var(--line)}
.sfill{position:absolute;left:0;right:0;bottom:0;border-radius:6px;background:var(--orange);transition:top .3s cubic-bezier(.2,.8,.2,1)}
.srow{position:absolute;left:32px;right:40px;height:64px;display:flex;align-items:center;justify-content:space-between;border:0;background:none;padding:0;text-align:left;color:var(--ink-2)}
.srow .lbl{font-size:calc(19px*var(--fs,1));font-weight:700;transition:color .2s}
.srow .hrs{display:flex;align-items:center;gap:6px;font-size:calc(11px*var(--fs,1));font-weight:800;letter-spacing:.14em;margin-top:4px;text-transform:uppercase}
.srow .hrs svg{width:14px;height:14px}
.srow.on{color:var(--ink)}
.srow .face{width:56px;height:56px}
.sthumb{position:absolute;left:calc(50% - 36px);width:72px;height:72px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 8px rgba(254,129,75,.28),0 10px 24px rgba(254,129,75,.35);display:grid;place-items:center;color:#fff;transition:top .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.sthumb svg{width:26px;height:26px}
.sleep{cursor:pointer}
.sthumb{pointer-events:auto;cursor:grab;touch-action:none}
.sleep.dragging,.sleep.dragging .sthumb{cursor:grabbing}
.sleep.dragging .sthumb,.sleep.dragging .sfill{transition:none}

/* expression editor */
.editor{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:24px 24px 18px;min-height:230px;display:flex;flex-direction:column;gap:18px}
.editor.sm{min-height:170px;padding:18px 20px 14px}
.edit{flex:1;font-size:calc(28px*var(--fs,1));font-weight:500;line-height:1.3;color:var(--ink-3);outline:none;white-space:pre-wrap;word-break:break-word;min-height:120px}
.editor.sm .edit{font-size:calc(20px*var(--fs,1));min-height:90px}
.edit:empty::before{content:attr(data-placeholder);color:var(--ink-4)}
.edit:focus-visible{outline:none}
.editor:focus-within{border-color:var(--ink-3)}
.edit mark{background:#FFD9C7;color:inherit;border-radius:3px;padding:2px 0;position:relative;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.screen.dark .edit mark{background:#5A2E1B}
.edit mark::before,.edit mark::after{content:"";position:absolute;top:-6px;bottom:-6px;width:8px;background:linear-gradient(var(--orange),var(--orange)) 50% 0/2px 100% no-repeat,radial-gradient(circle at 50% 4px,var(--orange) 3.5px,transparent 4px)}
.edit mark::before{left:-6px}
.edit mark::after{right:-6px;background:linear-gradient(var(--orange),var(--orange)) 50% 0/2px 100% no-repeat,radial-gradient(circle at 50% calc(100% - 4px),var(--orange) 3.5px,transparent 4px)}
.count{display:flex;gap:6px;align-items:center;justify-content:center;color:var(--ink-2);font-weight:700;font-size:calc(15px*var(--fs,1))}
.count svg{width:18px;height:18px}
.risk-note{margin-top:14px;background:var(--orange-2);border-radius:20px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;font-size:calc(14px*var(--fs,1));color:var(--ink)}
.risk-note svg{width:22px;height:22px;flex:none;color:var(--orange)}
.risk-note b{display:block;font-weight:800}
.risk-note button{margin-top:8px}

/* ---------- therapy ---------- */
.ring{position:relative;width:220px;height:220px;margin:26px auto 0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring .t b{font-size:calc(44px*var(--fs,1));font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ring .t span{font-size:calc(12px*var(--fs,1));font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:8px;opacity:.85}
.audio-chip{display:inline-flex;align-items:center;gap:8px;background:var(--line-2);color:var(--ink-2);border-radius:999px;padding:8px 14px;font-size:calc(13px*var(--fs,1));font-weight:700}
.audio-chip.ok{background:var(--green-2);color:var(--green-3)}
.audio-chip svg{width:16px;height:16px}
.audio-chip i{width:8px;height:8px;border-radius:50%;background:var(--orange);display:inline-block}
.audio-chip.ok i{background:var(--green)}
.scard{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line-2);box-shadow:0 2px 12px rgba(75,52,37,.04);border-radius:24px;padding:12px 14px;margin-bottom:12px;width:100%;text-align:left}
.scard .cover{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;color:#fff;flex:none}
.scard .cover svg{width:28px;height:28px}
.scard .txt{flex:1;min-width:0}
.scard .txt b{display:block;font-size:calc(17px*var(--fs,1));font-weight:800}
.scard .txt span{font-size:calc(13px*var(--fs,1));color:var(--ink-2);font-weight:600}
.scard .dur{font-size:calc(13px*var(--fs,1));font-weight:800;color:var(--ink-2);flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.scard .dur i{width:8px;height:8px;border-radius:50%;background:var(--orange);display:block}
.scard .dur i.ok{background:var(--green)}
.breath-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:0 20px}
.breath-circle{width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.55),rgba(255,255,255,.12));display:grid;place-items:center;transform:scale(var(--bs,.6));transition:transform var(--bt,4s) ease-in-out;box-shadow:0 0 0 24px rgba(255,255,255,.12),0 0 0 48px rgba(255,255,255,.06)}
.breath-circle b{font-size:calc(24px*var(--fs,1));font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.breath-time{font-size:calc(56px*var(--fs,1));font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.durpick{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.durpick button{width:64px;height:64px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);font-weight:800;font-size:calc(18px*var(--fs,1));color:var(--ink-2);padding:0}
.durpick button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.bigtime{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:30px}
.bigtime .box{width:118px;height:118px;border-radius:32px;display:grid;place-items:center;font-size:calc(52px*var(--fs,1));font-weight:800;font-variant-numeric:tabular-nums}
.bigtime .box.green{background:var(--green);color:#fff}
.bigtime .box.soft{background:var(--card);border:1px solid var(--line)}
.bigtime .colon{font-size:calc(44px*var(--fs,1));font-weight:800;color:var(--ink-3)}

/* ---------- SOS ---------- */
.sos-hero{background:var(--orange);color:#fff;padding:60px 20px 28px;border-radius:0 0 44px 44px;flex:none;position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(75,52,37,.18)}
.sos-hero .top{padding:0;color:#fff}
.sos-hero h1{font-size:calc(30px*var(--fs,1));font-weight:800;margin:20px 0 6px;letter-spacing:-.01em}
.sos-hero p{margin:0;font-size:calc(15px*var(--fs,1));font-weight:600;opacity:.92;max-width:300px}
.sos-hero .callbig{margin-top:18px;display:flex;align-items:center;gap:14px;background:#fff;color:var(--orange-3);border-radius:999px;padding:12px 14px 12px 12px;text-decoration:none;font-weight:800}
.sos-hero .callbig .ic{width:52px;height:52px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;flex:none}
.sos-hero .callbig .ic svg{width:24px;height:24px}
.sos-hero .callbig b{font-size:calc(22px*var(--fs,1));display:block;line-height:1.1}
.sos-hero .callbig span{font-size:calc(12px*var(--fs,1));font-weight:700;opacity:.8}
.callrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:12px 14px 12px 16px;margin-bottom:12px}
.callrow .txt{flex:1 1 150px;min-width:0}
.callrow .acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-items:center}
.callrow .txt b{display:block;font-size:calc(16px*var(--fs,1));font-weight:800}
.callrow .txt span{font-size:calc(12.5px*var(--fs,1));color:var(--ink-2);font-weight:600;display:block}
.callrow a{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;border-radius:999px;padding:11px 16px;text-decoration:none;font-weight:800;font-size:calc(14px*var(--fs,1));white-space:nowrap;font-variant-numeric:tabular-nums}
.callrow a.text{background:var(--purple)}
.callrow a svg{width:16px;height:16px}
.callrow.emg a{background:var(--orange)}
.steps{counter-reset:s}
.steps div{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:calc(15px*var(--fs,1))}
.steps div:last-child{border:0}
.steps div::before{counter-increment:s;content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--green-2);color:var(--green-3);font-weight:800;display:grid;place-items:center;flex:none}
.note{font-size:calc(12.5px*var(--fs,1));color:var(--ink-3);font-weight:600;text-align:center;margin:18px 0 0;line-height:1.4}

/* ---------- profile ---------- */
.grouplbl{font-size:calc(12px*var(--fs,1));font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:20px 0 10px}

/* ---------- sheets & toast ---------- */
.sheet-wrap{position:absolute;inset:0;z-index:50;display:flex;align-items:flex-end;background:rgba(30,20,15,.45);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;background:var(--card);border-radius:34px 34px 0 0;padding:14px 20px 34px;animation:up .25s ease}
@keyframes up{from{transform:translateY(40px)}}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 18px}
.sheet h3{margin:0 0 6px;font-size:calc(22px*var(--fs,1));font-weight:800}
.sheet p{margin:0 0 18px;color:var(--ink-2);font-size:calc(15px*var(--fs,1))}
.sheet .actions{display:flex;flex-direction:column;gap:10px}
.toast{position:absolute;left:50%;bottom:134px;transform:translate(-50%,10px);background:var(--brown);color:var(--brown-ink);font-size:calc(14px*var(--fs,1));font-weight:700;padding:10px 16px;border-radius:999px;opacity:0;transition:.25s;z-index:60;pointer-events:none;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- onboarding ---------- */
.ob-art{position:relative;height:300px;margin:10px -20px 0;overflow:hidden}
.ob-art svg{width:100%;height:100%}
.ob-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:14px}
.ob-dots i{width:6px;height:6px;border-radius:999px;background:var(--line);transition:width .3s cubic-bezier(.2,.8,.3,1),background .3s}
.ob-dots i.done{background:color-mix(in srgb,var(--brown) 35%,transparent)}
.ob-dots i.on{width:14px;background:var(--brown)}
.ob-dots i.grow{animation:dot-grow .55s cubic-bezier(.34,1.56,.64,1) .12s both}
.ob-dots i.was{animation:dot-shrink .45s cubic-bezier(.4,0,.2,1) both}
.ob-dots.fwd i.grow{transform-origin:left center}
.ob-dots.bwd i.grow{transform-origin:right center}
@keyframes dot-grow{0%{width:6px;background:var(--line);transform:scale(.6)}45%{background:var(--brown)}100%{width:14px;background:var(--brown);transform:none}}
@keyframes dot-shrink{0%{width:14px;background:var(--brown)}100%{width:6px}}
.choice{display:flex;align-items:center;gap:14px;background:var(--card);border:1.5px solid var(--line);border-radius:24px;padding:16px;margin-bottom:12px;width:100%;text-align:left;font-weight:700;font-size:calc(16px*var(--fs,1))}
.choice[aria-pressed="true"]{border-color:var(--green);background:var(--green-2)}
.choice .ticon{width:44px;height:44px}
.choice .ticon svg{width:20px;height:20px}
.choice .flag{font-size:calc(27px*var(--fs,1));width:calc(46px*var(--fs,1));display:grid;place-items:center;flex:none}
.choice .flag .flagsvg{vertical-align:baseline;margin-right:0}
.setrow .val .flagsvg,.stepchip .flagsvg{font-size:1.15em}

/* ---------- screen list ---------- */
.strip{display:flex;flex-direction:column;gap:2px}
.strip .sg{display:flex;flex-direction:column;gap:1px;margin-bottom:6px}
.strip .sgh{margin:6px 0 3px 10px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--page-ink-3)}
.strip button{--c:#9BB068;display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;color:var(--page-ink-2);border-radius:14px;padding:4px 12px 4px 6px;font-size:14.5px;font-weight:700;text-align:left;transition:background .18s,color .18s,box-shadow .18s}
.strip button[data-g="start"]{--c:#4F3422}
.strip button[data-g="safety"]{--c:#FE814B}
.strip button[data-g="records"]{--c:#7BA3C9}
.strip button[data-g="account"]{--c:#A18FFF}
.strip button b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--page-ink);transition:background .18s,color .18s}
.strip button:hover{background:color-mix(in srgb,var(--page-card) 70%,transparent);color:var(--page-ink)}
.strip button.on{background:var(--page-card);color:var(--page-ink);box-shadow:0 6px 18px rgba(75,52,37,.10),0 0 0 1px var(--page-line)}
.strip button.on b{background:var(--c);color:#fff}
.strip button[data-g="start"].on b{background:#4F3422}
:root[data-theme="dark"] .strip button[data-g="start"] b{background:color-mix(in srgb,#F7F4F2 22%,transparent)}
:root[data-theme="dark"] .strip button[data-g="start"].on b{background:#F7F4F2;color:#4B3425}

@media (prefers-reduced-motion: reduce){
  .scr{animation:none} #wheel,.sfill,.sthumb,.toast,.breath-circle{transition:none} .pill.listening{animation:none}
}
@media (max-width: 1179px){
  body{padding:22px 18px 32px}
  .stage{grid-template-columns:minmax(0,520px);grid-template-areas:"brand" "phone" "screens" "tools";row-gap:20px;justify-items:stretch}
  .phone-wrap{position:relative;top:auto;justify-self:center}
  .brandbar{justify-content:center}
  .ver{margin-left:0}
  .strip{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}
  .strip .sg{display:contents}
  .strip .sgh{display:none}
  .strip button{width:auto;gap:7px;padding:6px 14px 6px 6px;background:var(--page-card);border:1px solid var(--page-line);border-radius:999px;font-size:13.5px}
  .strip button b{width:24px;height:24px;font-size:11.5px}
  .screens .pgh{text-align:center}
  .tools{flex-direction:row;flex-wrap:wrap}
  .tools .pgpanel{flex:1 1 240px}
  .pgnote{flex-basis:100%;text-align:center}
}
@media (max-width: 520px){
  html,body{overflow-x:hidden;max-width:100vw}
  body{padding:0;background:var(--page);overflow:hidden}
  body::before{opacity:.6}
  .stage{display:flex;flex-direction:column;gap:0;max-width:none}
  /* on a real phone the app is the whole screen: no prototype strip, no fake status bar, island or home bar */
  .brandbar,.tools,.screens,.status,.island,.home-ind{display:none}
  .phone-wrap{height:100dvh;width:100%;position:relative;top:auto}
  .phone{width:100%;height:100%;padding:0;border-radius:0;box-shadow:none;transform:none}
  .phone::before,.phone::after{display:none}
  .screen{border-radius:0}
  .scr{padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
  .scr .cta{padding-bottom:max(30px,calc(env(safe-area-inset-bottom,0px) + 14px))}
  /* onboarding header sits at the same height as the check-in header (.scr gets safe-area + 12, .top adds 6) */
  .hero-band.ob-hero{padding-top:calc(env(safe-area-inset-top,0px) + 18px)}
}
}

/* ---------- v0.3: kit-faithful additions ---------- */
.hey{margin:0;text-align:center;font-size:calc(14px*var(--fs,1));font-weight:700;opacity:.85}
.hero-scr .q{margin-top:10px}
.hey.greet{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;margin:0 auto;padding:7px 16px 7px 11px;border-radius:999px;background:rgba(255,255,255,.2);opacity:1;font-weight:800}
.hey.greet svg{width:18px;height:18px;flex:none}
.mood-face{width:170px;height:170px;margin:26px auto 0;filter:drop-shadow(0 16px 24px rgba(0,0,0,.12))}
.arc-pick{width:100%;height:120px;margin-top:auto;touch-action:none;user-select:none;cursor:grab}
.arc-pick.dragging{cursor:grabbing}
.arc-pick svg{width:100%;height:100%;overflow:visible}
.arc-pick .node{cursor:pointer}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.tile{background:var(--card);border:1.5px solid var(--line-2);border-radius:24px;padding:18px 16px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;font-weight:700;font-size:calc(15px*var(--fs,1));line-height:1.25;color:var(--ink);box-shadow:0 2px 12px rgba(75,52,37,.04)}
.tile svg{width:24px;height:24px;color:var(--ink-2)}
.tile[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.tile[aria-pressed="true"] svg{color:#fff}
.choice.big{padding:18px 18px;font-size:calc(16px*var(--fs,1));border-color:var(--line-2);box-shadow:0 2px 12px rgba(75,52,37,.04)}
.choice.big svg{width:20px;height:20px;color:var(--ink-2)}
.choice.big[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.choice.big[aria-pressed="true"] svg{color:#fff}
.choice.big[aria-pressed="true"] .ticon{background:#fff}
.choice.big[aria-pressed="true"] .ticon svg{color:var(--green-3,#5E7233)}
.choice.big .x{margin-left:auto;opacity:.8}
.yesno{display:flex;gap:12px;margin-top:22px}
.yesno button{flex:1;height:56px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-weight:800;font-size:calc(17px*var(--fs,1));color:var(--ink)}
.yesno button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
/* player (kit: Mindfulness Meditation Intro) */
.player-scr{background:var(--hero,var(--green));color:#fff}
.player-scr .top{color:#fff}
.player-scr .iconbtn{border-color:#fff;color:#fff}
.player-scr .stepchip{background:rgba(255,255,255,.28);color:#fff}
.player-scr .contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.player-scr .top,.player-scr .sprog,.player-scr .cta{position:relative;z-index:2}
.player-scr h1{position:relative;font-size:calc(32px*var(--fs,1));font-weight:800;text-align:center;margin:26px 24px 0;line-height:1.15;text-wrap:balance}
.player-scr .cat{position:relative;text-align:center;font-size:calc(12px*var(--fs,1));font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.9;margin-top:8px}
/* player — kit layout: disc artwork, title, source chip, waveform scrubber, three controls */
.pdisc{position:relative;width:238px;height:238px;margin:22px auto 0;border-radius:50%;background:#fff;padding:9px;box-shadow:0 18px 40px rgba(0,0,0,.16)}
.pdisc .art{width:100%;height:100%;border-radius:50%;display:block}
.player-scr h1{margin-top:26px}
.pmode{position:relative;display:flex;justify-content:center;margin-top:14px}
.pchip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;padding:9px 16px;font-size:calc(12px*var(--fs,1));font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.pchip svg{width:16px;height:16px}
.prow{position:relative;display:flex;align-items:center;gap:14px;padding:0 24px;margin-top:26px;color:#fff}
.prow b{font-size:calc(13px*var(--fs,1));font-weight:800;font-variant-numeric:tabular-nums;opacity:.92;flex:none;width:38px}
.prow b:last-child{text-align:right}
.pwave{flex:1;min-width:0;display:flex;align-items:center;gap:2px;height:54px;cursor:pointer}
.pwave i{flex:1;min-width:3px;max-width:4px;border-radius:2px;background:rgba(255,255,255,.38);transition:background .18s}
.pwave i.on{background:#fff}
.pctrl{position:relative;display:flex;align-items:center;justify-content:center;gap:40px;margin-top:22px}
.pctrl .ghost{border:0;background:none;color:#fff;width:54px;height:54px;display:grid;place-items:center;padding:0;opacity:.92;border-radius:50%}
.pctrl .ghost svg{width:30px;height:30px}
.pbig{width:76px;height:76px;border-radius:50%;background:#fff;border:0;display:grid;place-items:center;box-shadow:0 12px 28px rgba(0,0,0,.2);padding:0}
.pbig svg{width:30px;height:30px}
.nextcard{position:relative;margin:auto 20px 0;background:var(--card);color:var(--ink);border-radius:26px;padding:14px 16px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 30px rgba(0,0,0,.14);text-align:left;border:0;width:calc(100% - 40px)}
.nextcard .cover{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;flex:none}
.nextcard .cover svg{width:24px;height:24px}
.nextcard .txt{flex:1;min-width:0}
.nextcard .txt small{display:block;font-size:calc(11px*var(--fs,1));font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.nextcard .txt b{display:block;font-size:calc(16px*var(--fs,1));font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextcard .txt span{font-size:calc(12px*var(--fs,1));color:var(--ink-2);font-weight:700}
.nextcard .go{width:40px;height:40px;border-radius:50%;background:var(--line-2);display:grid;place-items:center;flex:none;color:var(--ink)}
.nextcard .go svg{width:18px;height:18px}
.player-scr .cta .link-btn{color:#fff;opacity:.9}
/* session done (kit: Exercise Completed!) */
.done-art{position:relative;height:300px;margin:10px -20px 0;overflow:hidden}
.done-art svg{width:100%;height:100%}
.chip-lg{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:10px 16px;font-weight:800;font-size:calc(14px*var(--fs,1));background:var(--card)}
.chip-lg svg{width:18px;height:18px;color:var(--ink-2)}
/* notifications */
.ncard{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:24px;padding:14px 14px 14px 12px;margin-bottom:12px;border:1px solid var(--line-2);box-shadow:0 2px 12px rgba(75,52,37,.04)}
.ncard .sq{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;color:#fff;flex:none}
.ncard .sq svg{width:24px;height:24px}
.ncard .sq.yellow{color:#4B3425}
.ncard .txt{flex:1;min-width:0}
.ncard .txt b{display:block;font-size:calc(15.5px*var(--fs,1));font-weight:800}
.ncard .txt span{display:block;font-size:calc(12.5px*var(--fs,1));color:var(--ink-2);font-weight:600}
.ncard .txt .pill{margin-top:8px}
.ncard .right{color:var(--ink-3);flex:none}
.ncard .right svg{width:20px;height:20px}
.ncount{background:var(--orange);color:#fff;font-size:calc(12px*var(--fs,1));font-weight:800;padding:4px 9px;border-radius:999px;margin-left:8px;vertical-align:middle}
/* profile / settings (kit: brown header + overlapping avatar) */
.brown-hero{background:var(--brown-hero,#4F3422);color:#fff;padding:60px 20px 64px;border-radius:0 0 44px 44px;flex:none;position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(75,52,37,.18)}
.brown-hero .top{padding:0;color:#fff;position:relative}
.brown-hero .top h2{color:#fff}
.brown-hero .iconbtn{border-color:#fff;color:#fff}
.hero-avatar{position:relative;display:flex;justify-content:center;align-items:center;gap:22px;margin-top:-52px;z-index:2}
.hero-avatar .avatar.lg{width:104px;height:104px;font-size:calc(36px*var(--fs,1));border:5px solid var(--screen)}
.hero-avatar .round{width:48px;height:48px;color:#fff}
.hero-avatar .round svg{width:20px;height:20px}
.prof-name{text-align:center;margin-top:14px}
.prof-name h1{font-size:calc(24px*var(--fs,1));font-weight:800;margin:0 0 8px}
.prof-name .pill{padding:7px 14px;font-size:calc(12px*var(--fs,1))}
.prof-name p{margin:10px 0 0;font-size:calc(13px*var(--fs,1));color:var(--ink-2);font-weight:600}
.stats3{display:flex;justify-content:space-around;margin-top:20px;background:var(--card);border-radius:24px;padding:16px 8px;border:1px solid var(--line-2);box-shadow:0 2px 12px rgba(75,52,37,.04)}
.stats3 div{text-align:center;flex:1;position:relative}
.stats3 div + div::before{content:"";position:absolute;left:0;top:10%;height:80%;width:1px;background:var(--line)}
.stats3 small{display:block;font-size:calc(11px*var(--fs,1));font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.stats3 b{display:block;font-size:calc(22px*var(--fs,1));font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
.stats3 b em{font-style:normal;font-size:calc(13px*var(--fs,1));color:var(--ink-2);margin-left:2px}
.setrow{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:22px;padding:12px 14px;border:1px solid var(--line-2);margin-bottom:10px;width:100%;text-align:left;box-shadow:0 2px 12px rgba(75,52,37,.04)}
button.setrow{cursor:pointer}
.setrow .ic{width:44px;height:44px;border-radius:50%;background:var(--line-2);display:grid;place-items:center;color:var(--ink);flex:none}
.setrow .ic svg{width:20px;height:20px}
.setrow .lbl{flex:1;font-size:calc(16px*var(--fs,1));font-weight:800;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setrow .val{font-size:calc(13px*var(--fs,1));font-weight:700;color:var(--ink-2);white-space:nowrap}
.setrow > svg{width:20px;height:20px;color:var(--ink-3);flex:none}
.setrow.danger .ic{background:var(--orange-2);color:var(--orange-3)}
.setrow.danger .lbl{color:var(--orange-3)}
/* journal (kit: Health Journal brown hero + Your Entries) */
.jgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:14px}
.jgrid i{display:block;aspect-ratio:1;border-radius:50%;background:var(--line-2)}
.jlegend{display:flex;justify-content:center;gap:18px;margin-top:14px;font-size:calc(12px*var(--fs,1));font-weight:800;color:var(--ink-2)}
.jlegend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.jcards{display:flex;gap:12px;overflow-x:auto;margin:0 -20px;padding:4px 20px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.jcards::-webkit-scrollbar{display:none}
.jcard{flex:none;width:176px;background:var(--card);border-radius:24px;padding:16px;border:1px solid var(--line-2);scroll-snap-align:start;text-align:left;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 12px rgba(75,52,37,.04)}
.jcard .sq{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff}
.jcard .sq svg{width:20px;height:20px}
.jcard .tag{font-size:calc(10.5px*var(--fs,1));font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.jcard b{font-size:calc(15px*var(--fs,1));font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jcard span{font-size:calc(12px*var(--fs,1));color:var(--ink-2);font-weight:700}
/* sleep level bar */
.lvlbar{display:flex;gap:6px;justify-content:center;margin:14px auto 0;max-width:220px;position:relative}
.lvlbar i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.35)}
.lvlbar i.on{background:#fff}
/* small text-only button on colored screens */
.stat .ico{width:16px;height:16px;color:var(--ink-2)}
.stat .ticon.sm{width:40px;height:40px}
.stat .ticon.sm svg{width:18px;height:18px}
.jcard .ico{width:18px;height:18px;color:var(--ink-3)}

.seg.full{display:flex;width:100%}
.seg.full + .empty{margin-top:var(--sp-stack)}
.seg.full button{flex:1;padding:10px 4px;font-size:calc(13.5px*var(--fs,1));text-align:center}
.scard .dur svg{width:20px;height:20px;color:var(--ink-3)}
.scard .dur .stepchip{white-space:nowrap}

/* ---------- v0.5: home header card, metric cards, tracker rows (kit close-ups) ---------- */
.home-head{background:var(--card);border-radius:0 0 44px 44px;padding:62px 20px 22px;box-shadow:0 12px 34px rgba(75,52,37,.07);margin:0 0 22px;position:relative}
.home-head .toprow{display:flex;justify-content:space-between;align-items:center}
.home-head .hello{margin-top:16px;padding-top:0}
.home-head .hello .avatar{width:64px;height:64px;font-size:calc(22px*var(--fs,1))}
.bellwrap{position:relative}
.bellbadge{position:absolute;top:-4px;right:-4px;background:var(--orange);color:#fff;font-size:calc(11px*var(--fs,1));font-weight:800;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px;border:2px solid var(--card);line-height:1}
.chip.tint{background:var(--green-2);color:var(--green-3);padding:6px 12px;border-radius:999px}
.chip.tint svg{color:var(--green)}
.chip .face{width:16px;height:16px}
.search.kit{margin-top:18px;background:var(--line-3);border-color:transparent;height:54px}
.search.kit input{order:0}
.search.kit svg{order:1;color:var(--ink);width:22px;height:22px}
.sec .more{border:0;background:none;color:var(--ink-4);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;padding:0}
.sec .more svg{width:22px;height:22px;transform:rotate(90deg)}
.mcard .ring{position:relative;width:126px;height:126px;margin:8px auto 0}
.mcard .ring svg{width:100%;height:100%;transform:none}
.mcard .ring .t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.mcard .ring .t b{font-size:calc(22px*var(--fs,1));font-weight:800}
.mcard .ring .t span{font-size:calc(12px*var(--fs,1));font-weight:700;margin-top:4px;opacity:.95}
.wave.kit{gap:4px;height:84px;margin-top:auto;align-items:flex-end;margin-inline:-4px}
.wave.kit i{width:8px;flex:none;border-radius:4px;background:#fff}
.wave.kit i.dot{height:8px}
.tk{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:28px;padding:14px;margin-bottom:12px;box-shadow:0 2px 14px rgba(75,52,37,.05);width:100%;text-align:left;border:1px solid var(--line-3)}
.tk .box{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;flex:none}
.tk .box i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff}
.tk .box i svg{width:15px;height:15px}
.tk .box.green{background:var(--green-2)} .tk .box.green i{background:var(--green)}
.tk .box.purple{background:var(--purple-2)} .tk .box.purple i{background:var(--purple)}
.tk .box.blue{background:var(--blue-2)} .tk .box.blue i{background:var(--blue)}
.tk .box.orange{background:var(--orange-2)} .tk .box.orange i{background:var(--orange)}
.tk .box.yellow{background:var(--yellow-2)} .tk .box.yellow i{background:var(--yellow);color:var(--ink)}
.tk .box.taupe{background:var(--taupe-2)} .tk .box.taupe i{background:var(--taupe)}
.tk .txt{flex:1;min-width:0}
.tk .txt b{display:block;font-size:calc(17px*var(--fs,1));font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk .txt span{display:block;font-size:calc(14px*var(--fs,1));color:var(--ink-3);font-weight:600;margin-top:2px}
.tk .viz{width:80px;height:52px;flex:none;display:flex;align-items:center;justify-content:flex-end;gap:4px}
.tk .viz svg{width:100%;height:100%}
.tk .viz .face{width:22px;height:22px}
.mcard .ring .t span{text-transform:none;letter-spacing:0}

.checkbox.lg{width:38px;height:38px;border-width:2px}
.checkbox.lg svg{width:20px;height:20px}
.tk.dose.taken .txt b{color:var(--ink)}
.tk.dose.skipped .txt{opacity:.6}
.tk.dose .txt b{white-space:normal;line-height:1.2}
.tk.dose .pill.sm{padding:8px 11px;font-size:calc(12.5px*var(--fs,1))}

/* mood statistics bars (kit: pill columns with a face on top) */
.mbars{position:relative;height:190px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:0 2px}
.mbars .grid{position:absolute;inset:0;pointer-events:none}
.mbars .grid i{position:absolute;left:0;right:0;border-top:2px dashed var(--line);opacity:.9}
.mbar{position:relative;flex:0 0 38px;width:38px;border-radius:19px 19px 5px 5px;min-height:38px;display:flex;justify-content:center;padding:6px 0 0;transition:height .3s;border:0}
.mbar .face{width:26px;height:26px;max-width:100%}
.mbar.none{background:var(--line-2)}
.mbars-labels{display:flex;justify-content:space-between;padding:0 4px;margin-top:8px}
.mbars-labels{gap:8px;padding:0 2px}
.mbars-labels span{flex:0 0 38px;width:38px;text-align:center;font-size:calc(12px*var(--fs,1));font-weight:800;color:var(--ink-2)}
.sheet-wrap[hidden]{display:none!important}

/* full-bleed charts (kit: the mood curve runs edge to edge) */
.linechart.full{margin-inline:-20px;margin-top:10px}
.linechart.full .xlabels{display:flex;justify-content:space-around;padding:0 10px;margin-top:-2px}
.linechart.full .xlabels span{flex:1 1 0;text-align:center;font-size:calc(13px*var(--fs,1))}
/* mood statistics: edge-to-edge band, bars fill the screen width */
.card.mbars-card{margin-inline:-20px;border-radius:0;border-inline:0;padding:22px 6px 14px;box-shadow:none}
.card.mbars-card .mbars,.card.mbars-card .mbars-labels{gap:0;padding:0 8px}

/* ---------- v0.8: programmes, safety plan, clinician report, badges ---------- */
.ccard{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line-2);border-radius:28px;padding:16px;margin-bottom:14px;box-shadow:0 2px 12px rgba(75,52,37,.04)}
.ccard .head{display:flex;gap:14px;align-items:center}
.ccard .cover{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;color:#fff;flex:none}
.ccard .cover svg{width:26px;height:26px}
.ccard .txt{flex:1;min-width:0}
.ccard .txt b{display:block;font-size:calc(17px*var(--fs,1));font-weight:800}
.ccard .txt span{font-size:calc(12.5px*var(--fs,1));font-weight:700;color:var(--ink-2)}
.ccard .right svg{width:22px;height:22px;color:var(--ink-3)}
.ccard p{margin:12px 0 0;font-size:calc(13.5px*var(--fs,1));line-height:1.5;color:var(--ink-2);font-weight:600}
.cbar{height:8px;border-radius:4px;background:var(--line-2);margin-top:14px;overflow:hidden}
.cbar i{display:block;height:100%;border-radius:4px;background:var(--c,var(--green));transition:width .3s}
.cmeta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:calc(12px*var(--fs,1));font-weight:800;color:var(--ink-2)}
.cmeta svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px;color:var(--c,var(--green))}


.crow{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line-2);border-radius:22px;padding:12px 14px;margin-bottom:10px;width:100%;text-align:left;box-shadow:0 2px 12px rgba(75,52,37,.04)}
.crow .num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:calc(15px*var(--fs,1));background:var(--line-2);color:var(--ink-3);flex:none}
.crow .num svg{width:20px;height:20px}
.crow.done .num,.crow.now .num{background:var(--c,var(--green));color:#fff}
.crow.now{border-color:var(--c,var(--green))}
.crow .txt{flex:1;min-width:0}
.crow .txt b{display:block;font-size:calc(15.5px*var(--fs,1));font-weight:800}
.crow .txt span{font-size:calc(12.5px*var(--fs,1));font-weight:700;color:var(--ink-2)}
.crow .right svg{width:22px;height:22px;color:var(--ink-3)}

.chip-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip-row .chip{padding:6px 12px;border-radius:999px}
.chip-row .chip svg{width:15px;height:15px}
.lesson p{font-size:calc(15.5px*var(--fs,1));line-height:1.68;margin:0 0 16px;color:var(--ink);font-weight:600}
.pract{border-radius:28px;padding:20px;margin-top:10px;color:#fff}
.pract b{display:block;font-size:calc(11.5px*var(--fs,1));letter-spacing:.16em;text-transform:uppercase;opacity:.85;font-weight:800}
.pract p{margin:10px 0 16px;font-size:calc(17px*var(--fs,1));font-weight:800;line-height:1.4}
.pract .btn-primary{width:100%}
.hw{background:var(--yellow-2);border-radius:26px;padding:20px;margin-top:14px}
.hw b{display:block;font-size:calc(11.5px*var(--fs,1));letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:800}
.hw p{margin:10px 0 0;font-size:calc(15px*var(--fs,1));font-weight:700;line-height:1.55}
.done-art.tree svg{width:100%;height:auto}
.facerow{display:flex;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.facerow button{background:none;border:0;padding:4px;display:flex;flex-direction:column;align-items:center;gap:6px;width:60px}
.facerow .face{width:40px;height:40px}
.facerow span{font-size:calc(10.5px*var(--fs,1));font-weight:800;color:var(--ink-2);text-align:center;line-height:1.2}
.badge-won{display:flex;gap:14px;align-items:center;background:var(--card);border:1.5px solid var(--c,var(--green));border-radius:26px;padding:14px 16px;margin-top:20px}
.badge-won .bg{width:52px;height:52px;border-radius:50%;background:var(--c,var(--green));color:#fff;display:grid;place-items:center;flex:none}
.badge-won .bg svg{width:24px;height:24px}
.badge-won .txt small{display:block;font-size:calc(10.5px*var(--fs,1));letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--c,var(--green))}
.badge-won .txt b{display:block;font-size:calc(16px*var(--fs,1));font-weight:800;margin-top:2px}
.badge-won .txt span{font-size:calc(12.5px*var(--fs,1));font-weight:600;color:var(--ink-2)}

/* safety plan */
.sp-step{padding:16px}
.sp-head{display:flex;gap:14px;align-items:flex-start}
.sp-head .num{width:34px;height:34px;border-radius:50%;background:var(--green-2);color:var(--green-3);font-weight:800;display:grid;place-items:center;flex:none;font-size:calc(15px*var(--fs,1))}
.sp-head .txt b{display:block;font-size:calc(16px*var(--fs,1));font-weight:800}
.sp-head .txt span{display:block;font-size:calc(12.5px*var(--fs,1));font-weight:600;color:var(--ink-2);margin-top:3px;line-height:1.45}
.sp-items{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.sp-item{display:flex;align-items:center;gap:10px;background:var(--line-3);border-radius:16px;padding:9px 10px}
.sp-item span{flex:1;min-width:0;font-size:calc(14px*var(--fs,1));font-weight:700;word-break:break-word}
.sp-item .iconbtn{border-color:transparent;color:var(--ink-3);flex:none}
.sp-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* clinician report */
.rpcard{padding:16px}
.rphead{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.rphead .ticon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:var(--line-2);color:var(--ink);flex:none}
.rphead .ticon svg{width:22px;height:22px}
.rphead .txt{flex:1;min-width:0}
.rphead .txt b{display:block;font-size:calc(16px*var(--fs,1));font-weight:800}
.rphead .txt span{display:block;font-size:calc(12px*var(--fs,1));font-weight:600;color:var(--ink-2);line-height:1.4;margin-top:2px}
.rpkv{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:calc(14px*var(--fs,1))}
.rpkv:last-child{border-bottom:0;padding-bottom:0}
.rpkv span{color:var(--ink-2);font-weight:700;flex:1;min-width:0}
.rpkv b{font-weight:800;text-align:right;max-width:62%}
.rpkv b small{font-size:calc(11.5px*var(--fs,1));font-weight:800;color:var(--ink-3);margin-left:4px}
.deltachip{font-size:calc(12px*var(--fs,1));font-weight:800;padding:5px 10px;border-radius:999px;background:var(--line-2);color:var(--ink-2);flex:none}
.deltachip.down{background:var(--green-2);color:var(--green-3)}
.deltachip.up{background:var(--orange-2);color:var(--orange-3)}
.badge-strip{display:flex;gap:10px;flex-wrap:wrap}
.bmini{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--line-2);color:var(--ink-4)}
.bmini svg{width:22px;height:22px}
.bmini.on{background:var(--c);color:#fff}
.badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.badge{background:var(--card);border:1px solid var(--line-2);border-radius:24px;padding:16px;text-align:center;box-shadow:0 2px 12px rgba(75,52,37,.04)}
.badge .bg{width:56px;height:56px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;background:var(--line-2);color:var(--ink-4)}
.badge .bg svg{width:26px;height:26px}
.badge.on .bg{background:var(--c);color:#fff}
.badge b{display:block;font-size:calc(14.5px*var(--fs,1));font-weight:800}
.badge span{display:block;font-size:calc(11.5px*var(--fs,1));font-weight:600;color:var(--ink-2);margin-top:4px;line-height:1.35}
.badge:not(.on){opacity:.6}

/* guided-exercise step list inside the player */
.exsteps{position:relative;margin:22px 20px 0;background:var(--card);color:var(--ink);border-radius:26px;padding:16px 18px;text-align:left;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.exsteps h4{margin:0 0 8px;font-size:calc(11.5px*var(--fs,1));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:800;display:flex;justify-content:space-between;gap:10px}
.exsteps ol{margin:0;padding:0;list-style:none;counter-reset:x}
.exsteps li{display:flex;gap:12px;padding:7px 0;font-size:calc(14.5px*var(--fs,1));font-weight:700;color:var(--ink-3);line-height:1.45;transition:color .2s}
.exsteps li::before{counter-increment:x;content:counter(x);width:26px;height:26px;border-radius:50%;background:var(--line-2);color:var(--ink-3);font-size:calc(12.5px*var(--fs,1));font-weight:800;display:grid;place-items:center;flex:none;transition:.2s}
.exsteps li.on{color:var(--ink)}
.exsteps li.on::before{background:var(--exc,var(--green));color:#fff}
.exsteps li.past{color:var(--ink-2)}
.exsteps li.past::before{background:var(--line);color:var(--ink-2)}
.scard .dur .stepchip{padding:6px 10px;letter-spacing:.1em}

/* ---------- v1.0: one shared header band for every hub screen ----------
   tier 1 tab screens  → identity band (home white card / therapy tint / trends score hero / profile brown)
   tier 2 metric screens → .score-hero with the headline number
   tier 3 hub & tool screens → .hero-band (plain white, or tinted for a tab)
   tier 4 flow screens → bare .top bar                                        */
.hero-band{position:relative;flex:none;background:var(--card);color:var(--ink);padding:60px 20px 20px;border-radius:0 0 44px 44px;box-shadow:0 12px 34px rgba(75,52,37,.07);overflow:hidden;margin-bottom:22px}
.hero-band .top{padding:0;height:62px;position:relative;color:inherit}
.hero-band .top h2{color:inherit}
.hero-band > p{position:relative;margin:10px 0 0;font-size:calc(14.5px*var(--fs,1));font-weight:600;color:var(--ink-2);max-width:310px;line-height:1.45;text-wrap:pretty}
.hero-band .band-extra{position:relative;margin-top:18px}
.hero-band .band-extra .seg{display:flex;width:100%}
.hero-band .band-extra .seg button{flex:1;text-align:center}
.hero-band .cmeta{margin-top:8px}
.hero-band.tint{color:#fff;background:var(--hero,var(--green));box-shadow:0 14px 34px rgba(75,52,37,.18)}
.hero-band.tint > p{color:inherit;opacity:.9}
.hero-band.tint{padding-bottom:28px}
.hero-band.tint .stat{border:0;background:rgba(255,255,255,.94);color:#4B3425;box-shadow:0 6px 18px rgba(50,32,22,.14)}
.hero-band.tint .stat b{color:#4B3425}
.hero-band.tint .stat b svg{color:#4B3425}
.hero-band.tint .stat span{color:#736B66;opacity:1}
.hero-band.tint .cbar{background:rgba(255,255,255,.28)}
.hero-band.tint .cbar i{background:#fff}
.hero-band.tint .cmeta{color:rgba(255,255,255,.88)}
.hero-band .ncount{vertical-align:middle}
/* adherence read-out that sits inside the band */
.hero-band.tint .bandstat .txt span{color:inherit;opacity:.9}

/* the one goal bar every dome header uses, so the anatomy is identical everywhere:
   big value → one supporting line → optional progress toward a goal */
.score-hero .herobar{position:relative;width:184px;height:8px;border-radius:4px;background:rgba(255,255,255,.3);margin:18px auto 0;overflow:hidden}
.score-hero .herobar i{display:block;height:100%;border-radius:4px;background:#fff}

/* mood statistics dome — the kit's Mood screen, read-only (the picker lives in the check-in) */
.mood-hero{padding-bottom:30px}
.mood-hero .hey{font-size:calc(15px*var(--fs,1));font-weight:700;opacity:.9}
.mood-hero .big{letter-spacing:-.02em}
.mood-face.sm{width:104px;height:104px;margin:16px auto 0;color:inherit;filter:drop-shadow(0 12px 20px rgba(0,0,0,.14))}
.mood-hero > p{margin-top:14px;font-size:calc(14px*var(--fs,1));font-weight:700;opacity:.9}


/* ---------- header shape: it follows the colour ----------
   A coloured header gets the kit's dome — on colour the curve is visible and it is
   the kit's signature. A white header keeps the 44px card, because a white curve on
   the cream ground cannot be seen at all: it would cost ~50px of height and pinch
   left-aligned text and full-width controls to buy a shape nobody perceives.
   So the two shapes never appear side by side as "the same thing drawn twice". */
.score-hero,.sos-hero,.brown-hero,.hero-band.tint{border-radius:0 0 50% 50% / 0 0 var(--dome-ry,125px) var(--dome-ry,125px)}
.score-hero{padding-bottom:58px}
.mood-hero{padding-bottom:54px}
.sos-hero{padding-bottom:46px}
.brown-hero{padding-bottom:78px}
.hero-band.tint{padding-bottom:46px}

/* stressor frequency: each symptom named once, with its own count and bar */
.freqlist{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.freqlist .row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:calc(12.5px*var(--fs,1));font-weight:700;color:var(--ink)}
.freqlist .row1 b{font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums}
.freqlist i{display:block;height:6px;border-radius:3px;margin-top:4px;background:var(--orange)}

/* the resume card that now sits inside the therapy header */
.contcard{position:relative;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.96);color:#4B3425;border:0;border-radius:24px;padding:12px 14px;width:100%;text-align:left;box-shadow:0 8px 22px rgba(50,32,22,.16)}
.contcard .cover{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;color:#fff;flex:none}
.contcard .cover svg{width:24px;height:24px}
.contcard .txt{flex:1;min-width:0}
.contcard .txt small{display:block;font-size:calc(10.5px*var(--fs,1));font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8C7F77}
.contcard .txt b{display:block;font-size:calc(16.5px*var(--fs,1));font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contcard .txt span{font-size:calc(12.5px*var(--fs,1));font-weight:600;color:#736B66}
.contcard .go{width:40px;height:40px;border-radius:50%;background:#F2EDEB;display:grid;place-items:center;flex:none;color:#4B3425}
.contcard .go svg{width:18px;height:18px}

/* every header puts the screen name in the same place: top row, hard left */
.top h2{text-align:left}
.herochip{position:relative;display:flex;justify-content:center;margin-top:10px}

/* score details: navigation tiles that also report their current value */
.dgrid2{gap:var(--sp-stack)}
.dtile{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:14px;text-align:left}
.dtile .ticon.sm{width:42px;height:42px;border-radius:15px;margin-bottom:10px}
.dtile .ticon.sm svg{width:23px;height:23px}
.dtile span{font-size:calc(12px*var(--fs,1));font-weight:700;color:var(--ink-2);margin:0}
.dtile b{display:block;font-size:calc(17px*var(--fs,1));font-weight:800;margin-top:3px;line-height:1.2}

/* the round artwork thumbnail — same disc as the player, list-sized */
.cover.disc{background:#fff;padding:3px;border-radius:50%;box-shadow:0 2px 8px rgba(75,52,37,.10)}
.cover.disc .art{width:100%;height:100%;border-radius:50%;display:block}

/* ---------- protocol layer ---------- */
.rxwin{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 8px;color:#fff}
.rxwin b{font-size:calc(30px*var(--fs,1));font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rxwin span{opacity:.8;display:grid;place-items:center}
.rxwin span svg{width:20px;height:20px}
.crow.off{opacity:.5}
.crow.off .right{color:var(--ink-4)}
.exsteps-ol{margin:0;padding-left:20px}
.exsteps-ol li{margin:8px 0;font-size:calc(14.5px*var(--fs,1));font-weight:600;line-height:1.45}
.cta .note{margin-top:2px}
.gate-block{border-color:var(--orange-2);background:linear-gradient(var(--orange-2),var(--card) 60%)}

/* ---------- stress dial, stressor bubbles ---------- */
.stressdial{position:relative;margin:18px auto 0;max-width:320px;touch-action:none;user-select:none;cursor:grab}
.stressdial.dragging{cursor:grabbing}
.stressdial #skHalo,.stressdial #skDot{transition:fill .15s}
.stressdial #skHalo{cursor:grab}
.stressdial svg{width:100%;height:auto;overflow:visible}
.stressdial .hit{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 4px}
.stressdial .hit button{flex:1;height:100%;border:0;background:none;padding:0;cursor:inherit}
.stressdial .hit button:focus-visible{outline:3px solid var(--purple);outline-offset:-3px;border-radius:14px}
.bubbles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.bub{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:14px 20px;font-weight:700;font-size:calc(16px*var(--fs,1));transition:.15s}
.bub.b0[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.bub.b1[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.bub.b2[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.bub.b3[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:#4B3425}
.bubfield{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:8px 0}
.bubble{border-radius:50%;display:grid;place-items:center;color:#fff;text-align:center;line-height:1.1;flex:none;animation:bubin .4s var(--d,0ms) both}
.bubble b{font-size:calc(17px*var(--fs,1));font-weight:800;display:block;line-height:1}
.bubble span{font-size:calc(10.5px*var(--fs,1));font-weight:700;opacity:.92;display:block;padding:0 4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes bubin{from{transform:scale(.6);opacity:0}}

button.search{width:100%;border:1px solid var(--line);cursor:pointer;color:var(--ink-3);justify-content:space-between}
button.search span{font-weight:600}
.top .search{height:48px}
.search input:focus-visible{outline:none}
.search:focus-within{border-color:var(--ink-3);box-shadow:0 0 0 3px rgba(75,52,37,.06)}

/* ---------- journal stats + timeline ---------- */
.jbars{display:flex;align-items:flex-end;gap:14px;height:210px}
.jbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.jbar i{display:block;width:100%;max-width:56px;border-radius:18px;min-height:8px}
.jbar b{font-size:calc(18px*var(--fs,1));font-weight:800}
.jbar span{font-size:calc(11px*var(--fs,1));font-weight:700;color:var(--ink-2)}
.daystrip{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.daystrip::-webkit-scrollbar{display:none}
.daystrip button{flex:none;width:52px;height:64px;border-radius:20px;border:1px solid var(--line-2);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;color:var(--ink-2)}
.daystrip button small{font-size:calc(10px*var(--fs,1));font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.daystrip button b{font-size:calc(17px*var(--fs,1));font-weight:800;color:var(--ink)}
.daystrip button.on{background:var(--brown);border-color:var(--brown);color:#fff}
.daystrip button.on b{color:#fff}
.daystrip button i{position:absolute;bottom:7px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.tline{display:flex;gap:12px;width:100%;text-align:left;background:none;border:0;padding:0 0 18px;position:relative}
.tline::before{content:"";position:absolute;left:47px;top:26px;bottom:0;width:2px;background:var(--line-2)}
.tline:last-child::before{display:none}
.tl-time{width:44px;flex:none;font-size:calc(12px*var(--fs,1));font-weight:800;color:var(--ink-2);padding-top:14px;font-variant-numeric:tabular-nums}
.tl-body{flex:1;min-width:0;background:var(--card);border:1px solid var(--line-2);border-left:4px solid var(--c,var(--line));border-radius:20px;padding:12px 14px;box-shadow:0 2px 12px rgba(75,52,37,.04)}
.tl-head{display:flex;align-items:center;gap:8px}
.tl-head b{font-size:calc(16px*var(--fs,1));font-weight:800}
.tl-body p{margin:6px 0 0;font-size:calc(13.5px*var(--fs,1));color:var(--ink-2);font-weight:600;line-height:1.45}
.tl-body .chips{margin-top:8px}
.tl-body .chip{background:var(--line-2);border-radius:999px;padding:4px 10px;font-size:calc(11px*var(--fs,1));font-weight:700}

/* ---------- mindful breakdown ring ---------- */
.ringcard{display:flex;gap:18px;align-items:center}
.ringwrap{position:relative;width:150px;flex:none}
.ringwrap svg{width:100%;height:auto}
.ringmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.ringmid b{font-size:calc(22px*var(--fs,1));font-weight:800}
.ringmid span{font-size:calc(10px*var(--fs,1));font-weight:700;color:var(--ink-2);margin-top:3px}
.ringlegend{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.ringlegend div{display:flex;align-items:center;gap:8px;font-size:calc(13px*var(--fs,1));font-weight:700}
.ringlegend i{width:10px;height:10px;border-radius:50%;flex:none}
.ringlegend span{flex:1;color:var(--ink-2)}
.ringlegend b{font-variant-numeric:tabular-nums}
.scard[aria-pressed="true"]{border-color:var(--green);box-shadow:0 0 0 2px var(--green-2)}

/* ---------- sleep calendar ---------- */
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.calhead b{font-size:calc(17px*var(--fs,1));font-weight:800}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calgrid.head{margin-bottom:6px}
.calgrid.head i{text-align:center;font-size:calc(10.5px*var(--fs,1));font-weight:800;color:var(--ink-3);font-style:normal;text-transform:uppercase}
.calgrid .pad{display:block}
.calgrid .cell{aspect-ratio:1;border-radius:14px;border:1px solid var(--line-2);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;color:var(--ink-3)}
.calgrid .cell b{font-size:calc(13px*var(--fs,1));font-weight:700}
.calgrid .cell span{font-size:calc(9px*var(--fs,1));font-weight:800;opacity:.9}
.calgrid .cell.has{background:var(--c);border-color:var(--c);color:#fff}
.calgrid .cell.has b{color:#fff}
.calgrid .cell.today{box-shadow:0 0 0 2px var(--ink)}
.calgrid .cell:disabled{opacity:.35}

/* ---------- help centre, lock ---------- */
.faq{background:var(--card);border:1px solid var(--line-2);border-radius:22px;margin-bottom:10px;overflow:hidden;box-shadow:0 2px 12px rgba(75,52,37,.04)}
.faq button{width:100%;display:flex;align-items:center;gap:12px;padding:16px;border:0;background:none;text-align:left;font-weight:800;font-size:calc(15.5px*var(--fs,1));color:var(--ink)}
.faq button span{flex:1}
.faq button svg{width:20px;height:20px;color:var(--ink-3);transition:transform .2s;flex:none}
.faq.open button svg{transform:rotate(180deg)}
.faq p{margin:0;padding:0 16px 16px;font-size:calc(14px*var(--fs,1));font-weight:600;line-height:1.5;color:var(--ink-2)}
.lock-scr{background:var(--screen)}
.lockwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px 30px;text-align:center}
.pindots{display:flex;gap:16px;margin:26px 0 30px}
.pindots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink-4)}
.pindots i.on{background:var(--brown);border-color:var(--brown)}
.pinpad{display:grid;grid-template-columns:repeat(3,76px);gap:14px;justify-content:center}
.pinpad button{height:70px;border-radius:50%;border:0;background:var(--card);font-size:calc(26px*var(--fs,1));font-weight:700;color:var(--ink);box-shadow:0 2px 12px rgba(75,52,37,.06)}
.pinpad button:active{background:var(--line-2)}
.pinpad span{display:block}
.pinpad button svg{width:24px;height:24px;margin:0 auto}
.lockwrap .ticon svg{width:28px;height:28px}

/* ---------- in-session checklist practice ---------- */
.pchecks{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.pcheck{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.35);border-radius:16px;padding:11px 13px;color:#fff;font-weight:700;font-size:calc(14px*var(--fs,1));line-height:1.35}
.pcheck .box{width:22px;height:22px;border-radius:7px;border:2px solid rgba(255,255,255,.7);display:grid;place-items:center;flex:none;margin-top:1px}
.pcheck .box svg{width:14px;height:14px;opacity:0}
.pcheck.on{background:#fff;color:var(--ink);border-color:#fff}
.pcheck.on .box{background:var(--green);border-color:var(--green);color:#fff}
.pcheck.on .box svg{opacity:1}

/* ---------- guided course session ---------- */
.cs-player{display:flex;align-items:center;gap:18px;margin-top:6px}
.cs-disc{width:92px;height:92px;border-radius:50%;background:#fff;padding:5px;flex:none;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.cs-disc .art{width:100%;height:100%;border-radius:50%;display:block}
.cs-ctrl{flex:1;display:flex;align-items:center;justify-content:center;gap:20px}
.cs-mode{display:flex;justify-content:center;margin:-4px 0 6px}
.cs-mode .pill{font-size:calc(12px*var(--fs,1))}
.csteps{list-style:none;margin:0;padding:0;counter-reset:cs}
.csteps li{position:relative;padding:0 0 18px 30px}
.csteps li::before{counter-increment:cs;content:counter(cs);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--line-2);color:var(--ink-2);font-size:calc(11px*var(--fs,1));font-weight:800;display:grid;place-items:center}
.csteps li::after{content:"";position:absolute;left:9.5px;top:24px;bottom:2px;width:2px;background:var(--line-2)}
.csteps li:last-child::after{display:none}
.csteps li p{margin:0;font-size:calc(16px*var(--fs,1));line-height:1.55;color:var(--ink-2);font-weight:600}
.csteps li.past::before{background:var(--green);color:#fff}
.csteps li.on::before{background:var(--brown);color:#fff;transform:scale(1.15)}
.csteps li.on p{color:var(--ink)}
.hero-band.tint .prow b{color:#fff}
.hero-band.tint .pwave i{background:rgba(255,255,255,.4)}
.hero-band.tint .pwave i.on{background:#fff}
.cs-ctrl .ghost{border:0;background:none;color:#fff;width:48px;height:48px;display:grid;place-items:center;padding:0;opacity:.92;border-radius:50%;flex:none}
.cs-ctrl .ghost svg{width:26px;height:26px}
.cs-ctrl .pbig{width:64px;height:64px;flex:none;box-shadow:0 10px 22px rgba(0,0,0,.18)}
.cs-ctrl .pbig svg{width:26px;height:26px}

/* course session sits on the programme's colour, like the guided exercises do */
.player-scr .exsteps{margin:22px 20px 0}
.pract.on-color,.hw.on-color{position:relative}
.pract.on-color{background:#fff;color:var(--ink)}
.pract.on-color b{color:var(--ink-2)}
.pract.on-color p{color:var(--ink)}
.hw.on-color{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}
.hw.on-color b,.hw.on-color p{color:#fff}
.pchecks.dark .pcheck{background:var(--line-3);border-color:var(--line);color:var(--ink)}
.pchecks.dark .pcheck .box{border-color:var(--ink-4)}
.pchecks.dark .pcheck.on{background:var(--green-2);border-color:var(--green)}
.player-scr .cta .note{color:#fff}

/* ---------- the staged session: one thing on screen at a time ---------- */
.sess-scr .scr-body{padding-bottom:4px}
.sprog{position:relative;display:flex;gap:5px;padding:14px 24px 0}
.sprog i{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.28)}
.sprog i.on{background:#fff}
.sprog i.now{background:#fff;opacity:.85;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.sess-scr h1{margin-top:16px}
.sess-scr .pdisc{width:186px;height:186px;margin-top:14px}
.sess-scr h1.small{font-size:calc(24px*var(--fs,1));margin-top:18px}
.pdisc.small{width:150px;height:150px;margin-top:16px;padding:7px}
/* the session's listening stage is the app's player screen, one notch tighter */
.sess-scr .pdisc{width:196px;height:196px;margin-top:14px}
.sess-scr h1{font-size:calc(29px*var(--fs,1))}
.sess-scr .pmode{margin-top:12px}
.sess-scr .prow{margin-top:16px}
.sess-scr .pctrl{margin-top:14px}
.sess-scr .pbig{width:70px;height:70px}
/* a text step: no player furniture, just the idea and its example */
.sess-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px}
.sess-step .stepchip{background:rgba(255,255,255,.26);color:#fff}
.sess-step h1.small{margin:0 20px}
.sess-chips{position:relative;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 20px 0}
.sess-chips span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);border-radius:999px;padding:7px 13px;font-size:calc(12.5px*var(--fs,1));font-weight:800}
.sess-chips svg{width:14px;height:14px}
.sess-badge{margin-top:18px}
.sess-goal{position:relative;text-align:center;margin:10px 26px 0;font-size:calc(15.5px*var(--fs,1));font-weight:600;line-height:1.5;color:rgba(255,255,255,.92)}
.sess-badge{position:relative;width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;margin:22px auto 0;color:#fff}
.sess-badge svg{width:38px;height:38px}
.sess-badge.ok{background:#fff;color:var(--green)}
.sess-card{position:relative;margin:12px 20px 0;background:var(--card);color:var(--ink);border-radius:26px;padding:17px 18px;text-align:left;box-shadow:0 12px 30px rgba(0,0,0,.13)}
.sess-card > b{display:block;font-size:calc(11.5px*var(--fs,1));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:800}
.sess-card.lesson p{margin:0;font-size:calc(16px*var(--fs,1));font-weight:600;line-height:1.62;color:var(--ink)}
.sess-card.lesson > b + p{margin-top:10px}
.sess-card .hw-text{margin:10px 0 0;font-size:calc(15px*var(--fs,1));font-weight:700;line-height:1.55}
.sess-card.mini{padding:6px 18px}
.sess-card .kv{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;font-size:calc(13.5px*var(--fs,1));font-weight:700}
.sess-card .kv + .kv{border-top:1px solid var(--line-2)}
.sess-card .kv span{color:var(--ink-2);flex:none}
.sess-card .kv b{text-align:right;font-weight:800;line-height:1.35}
.ticks{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:calc(14.5px*var(--fs,1));font-weight:700;line-height:1.45}
.ticks li svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--green)}
.hows{margin:12px 0 0;padding-left:19px;display:flex;flex-direction:column;gap:9px}
.hows li{font-size:calc(14.5px*var(--fs,1));font-weight:600;line-height:1.5}
.hows li::marker{font-weight:800;color:var(--ink-3)}
.sess-tip{position:relative;display:flex;gap:12px;margin:12px 20px 0;background:var(--yellow-2);color:var(--ink);border-radius:22px;padding:14px;text-align:left;box-shadow:0 8px 22px rgba(0,0,0,.1)}
.sess-tip .ticon{width:34px;height:34px;flex:none;background:var(--yellow);color:var(--ink)}
.sess-tip .ticon svg{width:18px;height:18px}
.sess-tip .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sess-tip b{font-size:calc(11px*var(--fs,1));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:800}
.sess-tip span{font-size:calc(14px*var(--fs,1));font-weight:600;line-height:1.5;color:var(--ink)}
.note.on-color{position:relative;color:#fff;opacity:.78;margin:14px 24px 0}
.sess-opts{position:relative;display:flex;flex-direction:column;gap:12px;margin:14px 20px 0}
.sopt{display:flex;align-items:flex-start;gap:11px;text-align:left;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.34);color:#fff;border-radius:20px;padding:13px 14px;font-size:calc(14.5px*var(--fs,1));font-weight:700;line-height:1.4}
.sopt .mark{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.26);display:grid;place-items:center;flex:none;font-size:calc(12.5px*var(--fs,1));font-weight:800}
.sopt .mark svg{width:14px;height:14px}
.sopt.right{background:#fff;color:var(--ink);border-color:#fff}
.sopt.right .mark{background:var(--green);color:#fff}
.sopt.wrong{background:rgba(255,255,255,.9);color:var(--ink);border-color:#fff}
.sopt.wrong .mark{background:var(--orange);color:#fff}
.sopt.dim{opacity:.55}
.sess-why{position:relative;margin:12px 20px 0;background:var(--card);color:var(--ink);border-radius:22px;padding:15px 17px;text-align:left;border-left:5px solid var(--orange)}
.sess-why.ok{border-left-color:var(--green)}
.sess-why b{display:block;font-size:calc(12px*var(--fs,1));letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:800}
.sess-why p{margin:7px 0 0;font-size:calc(14.5px*var(--fs,1));font-weight:600;line-height:1.55}
.sess-status{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;margin:16px 20px 0;padding:13px;border-radius:20px;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.3);font-size:calc(14px*var(--fs,1));font-weight:800}
.sess-status svg{width:18px;height:18px}
.sess-status.ok{background:#fff;color:var(--green);border-color:#fff}
.reqs{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.reqs li{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:calc(14.5px*var(--fs,1));font-weight:700;color:var(--ink-3);line-height:1.4}
.reqs li + li{border-top:1px solid var(--line-2)}
.reqs li svg{width:18px;height:18px;flex:none;color:var(--ink-4)}
.reqs li span{flex:1}
.reqs li .link-btn{padding:4px 2px;font-size:calc(13px*var(--fs,1));color:var(--ink-2)}
.reqs li.ok{color:var(--ink)}
.reqs li.ok svg{color:var(--green)}
.sess-card .pchecks .pcheck{background:var(--line-3);border-color:var(--line);color:var(--ink)}
.sess-card .pchecks .pcheck .box{border-color:var(--ink-4)}
.sess-card .pchecks .pcheck.on{background:var(--green-2);border-color:var(--green)}
.sess-card .pchecks{margin-top:11px}

/* ---------- eligibility screening ---------- */
.elprog{display:flex;gap:4px;margin:4px 0 0}
.elprog i{flex:1;height:4px;border-radius:3px;background:var(--line-2)}
.elprog i.on{background:var(--green)}
.elprog i.now{background:var(--ink-4)}
.elmeta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.elrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:0;border-radius:22px;padding:14px 16px;margin-bottom:8px;box-shadow:0 2px 10px rgba(75,52,37,.05)}
.elrow .txt{flex:1;min-width:0}
.elrow .txt b{display:block;font-size:calc(14px*var(--fs,1));font-weight:700;line-height:1.4;color:var(--ink)}
.elrow .pill{flex:none}
.elrow > svg{width:16px;height:16px;color:var(--ink-4);flex:none}
.elrow.todo{border:1.5px solid var(--orange)}
.scr-body.elbody{display:flex;flex-direction:column}
.elbody .grow{flex:1;min-height:18px}
.elfoot{display:flex;gap:12px;align-items:flex-start;background:var(--card);border-radius:22px;padding:14px 16px;margin-bottom:4px}
.elfoot .ticon{width:34px;height:34px;flex:none}
.elfoot .ticon svg{width:17px;height:17px}
.elfoot p{margin:0;font-size:calc(12.5px*var(--fs,1));font-weight:600;line-height:1.5;color:var(--ink-2)}

/* ---------- eligibility result ---------- */
.resicon{position:relative;width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;margin:30px auto 18px}
.resicon svg{width:46px;height:46px;display:block}
.score-hero .resicon + p{max-width:270px;margin:0 auto;font-size:calc(17px*var(--fs,1));font-weight:600}
.reason{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line-2);border-radius:24px;padding:16px;margin-bottom:12px;box-shadow:0 2px 12px rgba(75,52,37,.04)}
.reason .ticon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.reason .ticon svg{width:20px;height:20px}
.reason .txt{flex:1;min-width:0}
.reason .txt b{display:block;font-size:calc(16px*var(--fs,1));font-weight:800;line-height:1.35;white-space:normal}
.reason .txt span{display:block;font-size:calc(13.5px*var(--fs,1));font-weight:600;color:var(--ink-2);line-height:1.45;margin-top:6px}
.reason.block{border-color:var(--orange-2);background:linear-gradient(var(--orange-2),var(--card) 55%)}

/* programme card inside the therapy hero: same white card language as .contcard */
.hero-band .ccard{background:rgba(255,255,255,.96);color:#4B3425;border:0;border-radius:24px;margin-bottom:0;padding:14px;box-shadow:0 8px 22px rgba(50,32,22,.16)}
.hero-band .ccard .cover{width:52px;height:52px;border-radius:17px}
.hero-band .ccard .txt b{font-size:calc(16.5px*var(--fs,1))}
.hero-band .ccard .txt span{color:#736B66}
.hero-band .ccard .right svg{color:#8C7F77}
.hero-band.tint .ccard .cbar{background:#EDE7E2;margin-top:12px}
.hero-band.tint .ccard .cbar i{background:var(--c,var(--green))}
.hero-band.tint .ccard .cmeta{color:#736B66}
.hero-band .contcard .cover svg{width:24px;height:24px}

.hero-band .hrow{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px;color:#fff}
.hero-band .hrow b{font-size:calc(20px*var(--fs,1));font-weight:800}
.hero-band .hrow .link{color:rgba(255,255,255,.92);font-weight:800;font-size:calc(14px*var(--fs,1));display:flex;align-items:center;gap:2px;background:none;border:0;padding:4px 0}
.hero-band .hrow .link svg{width:16px;height:16px}

/* flow header with an exit X: [title][badge] ........ [X] */
.top.tc{gap:12px}
.top.tc h2{flex:none;max-width:55%}
.top.tc .sp{flex:1}

.elmeta .elname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* =====================================================================
   SPACING SYSTEM — one rhythm for every screen
   gutter 20 · stack (between cards / rows / tiles) 12 · section 28 above / 12 below
   group label 24 / 12 · below the top bar 20 · after a header dome 24 · lead 20 · note 20
   inner padding: list rows 14 16 · content cards 18
   ===================================================================== */
:root{--sp-gutter:20px;--sp-stack:12px;--sp-sec:28px;--sp-top:20px;--sp-hero:24px}

/* headings */
.sec{margin:var(--sp-sec) 0 var(--sp-stack)}
.grouplbl{margin:24px 0 var(--sp-stack)}
.lead{margin:12px 24px 20px}
.note{margin-top:20px}
.cta .note{margin-top:2px}

/* first block under a plain top bar, and the end of every scroll */
.top + .scr-body{padding-top:var(--sp-top)}
.top + .scr-body > :first-child,
.top + .scr-body > .pad > :first-child,
.pad > .sec:first-child{margin-top:0}
.scr-body > :last-child,
.scr-body > .pad > :last-child{margin-bottom:0}

/* after a header dome */
.hero-band,.home-head{margin-bottom:var(--sp-hero)}
.fab-float{margin-bottom:20px}
.sos-hero + .promo{margin-top:var(--sp-hero)}

/* stacked cards: every list item sits 12 from the next */
.ccard,.setrow,.crow,.faq,.elrow,.group,.reason,.choice{margin-bottom:var(--sp-stack)}
.card + .hcard,.card + .row,.note + .row,.note + .card,.note + .group,.note + .hcard{margin-top:var(--sp-stack)}
.promo + :not(.promo,.sec,.grouplbl,.note,.pad){margin-top:var(--sp-stack)}

/* inner padding: two tiers */
.scard,.hcard,.setrow,.crow,.callrow,.ncard,.tl-body,.elrow,.elfoot{padding:14px 16px}
.ccard,.reason,.sp-step,.sess-card,.sess-why,.exsteps{padding:18px}
.setrow,.crow,.faq,.elrow{border-radius:24px}

/* left-aligned intro line: under the top bar, or under a left-aligned question */
.lead.left{text-align:left;margin:0 0 20px;text-wrap:pretty}
/* a short note under a centred question is centred with it */
.q:not(.left) + .lead.left{text-align:center;text-wrap:balance;margin-top:10px}
.q.left + .lead.left{margin:10px 0 20px}
#srchOut > .sec:first-child{margin-top:0}
.stat-grid + .promo,.dgrid2 + .promo{margin-top:var(--sp-stack)}

/* weekbars: the track is also matched by ".weekbars div" (a column flex box), so the fill sat at the
   top. The fill grows from the bottom of its track, like every other chart. */
.weekbars .track{flex-direction:column;justify-content:flex-end;align-items:stretch;gap:0}

/* mood wheel: two stacked chevrons point at the pointer, lighter label */
.chev2{display:flex;flex-direction:column;align-items:center;margin:14px auto 12px;color:var(--ink-4)}
.chev2 svg{width:26px;height:26px;margin-bottom:-13px}
.gauge-label,.mood-label#moodLabel{font-weight:500}

/* mood wheel: the disc bleeds off the bottom edge and the CTA rests on the white hub */
.gauge-scr .cta{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;padding-top:0}
.gauge-scr .cta > *{pointer-events:auto}
.gauge-scr .scr-body{padding-bottom:0;overflow:hidden}
.gauge-scr #moodFace{margin-top:20px;margin-bottom:14px}
.gauge-scr .chev2{margin:10px auto 0}
.gauge-scr .chev2 svg{margin-bottom:0;width:22px;height:22px}
.gauge-scr .gauge.short{margin-top:auto;height:auto;flex:1 1 0;min-height:0}
@media (max-width:520px){.gauge-scr .face-big{width:min(176px,19dvh);height:min(176px,19dvh)}}
.gauge-scr .cta .btn-primary{width:auto;align-self:center;height:54px;padding:0 30px}

/* accessibility: text size (Profil > Yazı boyutu) and reduced motion */
.nav *{font-size:11px !important}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}
.fs-preview{margin:12px 0 4px;padding:16px 18px;border-radius:20px;background:var(--card);font-size:calc(16px*var(--fs,1));line-height:1.45;color:var(--ink-2)}
.fs-preview b{display:block;font-size:calc(18px*var(--fs,1));color:var(--ink);margin-bottom:4px}
.card .cta.col{flex-direction:column}

/* header heights: one value per family, taken from the tallest header of that family.
   Square = .hero-band / .home-head; round = the dome heroes. Content grows past it only if it must. */
:root{--hdr-sq:279px;--hdr-dome:418px}
.hero-band:not(.tint),.home-head{min-height:var(--hdr-sq)}
.score-hero,.sos-hero,.brown-hero,.hero-band.tint{min-height:var(--hdr-dome)}

:root{--dome-ry:125px}
.wkcard{margin-bottom:var(--sp-stack)}
.wkcard .cbar{margin-top:0}
.hero-band.tint .band-extra{margin-top:8px}

/* Terapi header: the week's progress as an arc gauge with the value inside it */
.hero-band.tint{padding-bottom:46px}
.hero-band.tint .band-extra{margin-top:6px}
.wkg{position:relative;color:inherit;text-align:center}
.wkg-g{position:relative;width:238px;max-width:100%;margin:0 auto}
.wkg .arcg{display:block;width:100%;height:auto}
.wkg-c{position:absolute;left:0;right:0;top:68%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}
.wkg-v{display:flex;align-items:baseline;gap:5px;line-height:1}
.wkg-v b{font-size:calc(46px*var(--fs,1));font-weight:800;letter-spacing:-.02em}
.wkg-v span{font-size:calc(18px*var(--fs,1));font-weight:800}
.wkg-l{margin-top:6px;font-size:calc(12.5px*var(--fs,1));font-weight:700;opacity:.92;max-width:150px;line-height:1.25}
.wkg-sub{margin:12px auto 0;max-width:300px;font-size:calc(13.5px*var(--fs,1));font-weight:700;line-height:1.35;color:inherit;opacity:.95;text-align:center}

/* Profil: identity and stats live inside the header */
.brown-hero{padding-bottom:46px}
.brown-hero > :not(.contours){position:relative;z-index:1}
.brown-hero .hero-avatar{margin-top:6px}
.brown-hero .hero-avatar .avatar.lg{width:92px;height:92px;border:4px solid rgba(255,255,255,.55)}
.brown-hero .prof-name{margin-top:8px}
.brown-hero .prof-name h1{color:#fff;margin-bottom:8px}
.brown-hero .prof-name p{color:rgba(255,255,255,.8)}
.brown-hero .stats3{margin:14px auto 0;max-width:290px;padding:10px 6px;border-radius:22px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.brown-hero .stats3 small{color:rgba(255,255,255,.78)}
.brown-hero .stats3 b{color:#fff;font-size:calc(20px*var(--fs,1));margin-top:2px}
.brown-hero .stats3 b em{color:rgba(255,255,255,.8)}
.brown-hero .stats3 div + div::before{background:rgba(255,255,255,.26)}
.brown-hero{padding-bottom:36px}
.brown-hero .hero-avatar{margin-top:0}
.brown-hero .hero-avatar .avatar.lg{width:84px;height:84px}
.brown-hero .hero-avatar .round{width:44px;height:44px}

/* Segmented progress (scales): one segment per question */
.segprog{display:flex;gap:5px;margin:4px 0 0}
.segprog.dense{gap:3px}
.segprog i{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background .25s,opacity .25s}
.segprog i.on{background:var(--c,var(--green))}
.segprog i.cur{background:var(--c,var(--green));opacity:.4}

/* Onboarding: gender / age / weight */
.gcards{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.gcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;height:150px;border-radius:26px;background:var(--card);border:2px solid transparent;overflow:hidden;text-align:left;padding:16px 18px;box-shadow:0 2px 12px rgba(75,52,37,.05);transition:border-color .15s}
.gcard[aria-pressed="true"]{border-color:var(--green)}
.gcard .gl{display:block;font-weight:800;font-size:calc(20px*var(--fs,1));color:var(--ink)}
.gcard .gs{display:block;width:30px;height:30px;color:var(--ink)}
.gcard .gs svg{width:100%;height:100%}
.gcard > svg{position:absolute;right:0;bottom:0;height:100%;width:auto}
.wheel{position:relative;height:250px;margin:0 0 2px}
.wheel-list{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;padding:100px 0;outline:none}
.wheel-list::-webkit-scrollbar{display:none}
.wi{height:50px;display:grid;place-items:center;scroll-snap-align:center;font-size:calc(30px*var(--fs,1));font-weight:800;color:var(--ink-3);opacity:.12}
.wheel-pill{position:absolute;left:50%;top:50%;width:184px;height:62px;transform:translate(-50%,-50%);border-radius:999px;background:var(--green);box-shadow:0 0 0 8px rgba(155,176,104,.2);display:grid;place-items:center;pointer-events:none;z-index:1}
.wheel-pill b{font-size:calc(46px*var(--fs,1));font-weight:800;color:#fff;line-height:1}
.unitseg{display:flex;gap:6px;margin-top:0;padding:6px;border-radius:999px;background:var(--card)}
.unitseg button{border:0;flex:1;padding:14px;border-radius:999px;font-weight:800;font-size:calc(15px*var(--fs,1));color:var(--ink-2);background:transparent}
.unitseg button[aria-pressed="true"]{background:var(--orange);color:#fff}
.wval{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:10px 0 2px}
.wval b{font-size:calc(76px*var(--fs,1));font-weight:800;line-height:1;color:var(--ink)}
.wval span{font-size:calc(24px*var(--fs,1));font-weight:700;color:var(--ink-2)}
.ruler-wrap{position:relative;height:100px;margin:0 -20px}
.ruler{display:flex;height:100%;overflow-x:auto;scrollbar-width:none;outline:none}
.ruler::-webkit-scrollbar{display:none}
.ruler .rsp{flex:none;width:50%}
.ruler .rin{flex:none;padding-top:18px}
.ruler svg{display:block}
.rt-minor{stroke:var(--line);stroke-width:2;stroke-linecap:round;fill:none}
.rt-mid{stroke:#D9C7BD;stroke-width:2;stroke-linecap:round;fill:none}
.rt-major{stroke:#CDB3A6;stroke-width:3;stroke-linecap:round;fill:none}
.ruler text{font-size:13px;font-weight:700;fill:var(--ink-3)}
.rneedle{position:absolute;left:50%;top:0;width:12px;height:76px;margin-left:-6px;border-radius:6px;background:var(--green);pointer-events:none}
.screen.dark .screen.dark .gcard[aria-pressed="true"]{border-color:var(--green)}

/* Onboarding illustrations + pager */
.ob-ill{position:relative;border-radius:28px;overflow:hidden;background:var(--tint,var(--card));margin:6px 0 4px}
.hero-band .band-extra .ob-ill{background:transparent;border-radius:0;margin:0 -20px -28px;height:90px}
.hero-band .band-extra .ob-ill svg{height:100%}
.ob-ill svg{display:block;width:100%;height:auto}
.ob-ill.bleed{margin:10px -20px 0;border-radius:0;background:transparent}
.cta .ob-dots{margin:0 0 4px}
.wheel-list{touch-action:pan-y;cursor:grab}
.ruler{touch-action:pan-x;cursor:grab}
.wheel-list.dragging,.ruler.dragging{cursor:grabbing;user-select:none}
.wi{cursor:pointer}

/* Onboarding header = the consent header: back, topic, step chip, the question, a scene in the lower band */
.hero-band.ob-hero{display:flex;flex-direction:column;margin-bottom:14px;padding-bottom:14px}
.hero-band.ob-hero .top{height:56px}
.hero-band.ob-hero .top h2{flex:1;margin-left:12px}
.hero-band.ob-hero > p{font-size:calc(21px*var(--fs,1));font-weight:800;color:var(--ink);max-width:none;line-height:1.2;margin-top:2px;letter-spacing:-.01em}
.hero-band.ob-hero .band-extra{margin-top:auto;flex:1;display:flex;flex-direction:column;min-height:88px}
.hero-band.ob-hero .band-extra .ob-ill{height:auto;flex:1;min-height:0;margin:0 -20px -14px}
.hero-band.ob-hero .band-extra .ob-ill svg{position:absolute;inset:0;height:100%;width:100%}
.ob-pad{padding-top:2px}
.ob-pad .lead{margin-top:0}

/* Continue buttons hug their label instead of spanning the screen */
.cta.hug{align-items:center}
.cta.hug > .btn-primary{width:auto;padding:0 40px}

/* app header bands that carry a scene under their text (same language as the onboarding headers) */
.hero-band.ill-hero{display:flex;flex-direction:column;padding-bottom:14px;margin-bottom:14px}
.hero-band.ill-hero > p + .band-extra{margin-top:14px}
.hero-band.ill-hero .band-extra{margin-top:auto;flex:1;display:flex;flex-direction:column;min-height:96px}
.hero-band.ill-hero .band-extra > .seg,.hero-band.ill-hero .band-extra > .cbar,.hero-band.ill-hero .band-extra > .cmeta{flex:none}
.hero-band.ill-hero .band-extra > .cbar{margin-top:14px}
.hero-band.ill-hero .band-extra .ob-ill{height:auto;flex:1;min-height:104px;margin:6px -20px -14px}
.hero-band.ill-hero .band-extra .ob-ill svg{position:absolute;inset:0;height:100%;width:100%}

/* onboarding question: big, heavy, centred, straight under the header (as in the kit) */
.ob-pad .q{margin:4px 6px 22px;font-size:calc(29px*var(--fs,1));line-height:1.16;letter-spacing:-.015em}

/* name page: live greeting + privacy note under the field */
.hello-card{position:relative;margin-top:20px;padding:20px 20px 22px;min-height:112px;border-radius:26px;background:var(--card);box-shadow:0 2px 14px rgba(75,52,37,.06);overflow:hidden}
.hello-card .hl{display:block;font-size:calc(12.5px*var(--fs,1));font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#8C7F77)}
.hello-card b{display:block;margin-top:8px;max-width:64%;font-size:calc(26px*var(--fs,1));line-height:1.15;font-weight:800;letter-spacing:-.015em;overflow-wrap:anywhere}
.hello-card svg{position:absolute;right:-6px;bottom:-4px;width:120px;height:90px}
.name-note{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:16px 18px;border-radius:22px;background:var(--green-2);color:var(--green-3,#5E7233);font-weight:600;font-size:calc(14px*var(--fs,1));line-height:1.45}
.name-note svg{flex:none;width:22px;height:22px;margin-top:1px}

/* sleep diary: bed time and wake time sit side by side; the labels may wrap to two lines but the fields always line up */
.tpair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:end}
.tpair label{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.tpair .grouplbl{margin:0 0 8px;display:flex;align-items:flex-end;min-height:2.9em;line-height:1.4}
.tpair .ticon{margin-bottom:6px}
.tpair input[data-tp].input{padding-left:12px;padding-right:8px;min-width:0;font-size:calc(15px*var(--fs,1))}
.tpair input[data-tp]::-webkit-calendar-picker-indicator{margin-left:2px;padding:0}

/* stress levels: legend, bubble field, summary; and the tappable stat card */
button.stat.tap{width:100%;height:100%;text-align:left;color:inherit;position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
button.stat.tap:active{transform:scale(.98)}
.stat .more-i{margin-left:auto;opacity:.55}
.lvleg{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;margin:18px 0 0}
.lvleg span{display:inline-flex;align-items:center;gap:6px;font-size:calc(13px*var(--fs,1));font-weight:700;color:var(--ink-2)}
.lvleg i,.lvsum-h i{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.lvleg b{color:var(--ink)}
.lvfield{display:block;width:100%;height:auto;margin:18px 0 12px;overflow:visible}
.lvfield .lvb{cursor:pointer;outline:none}
.lvfield .lvb circle{transition:transform .2s;transform-box:fill-box;transform-origin:center}
.lvfield .lvb:active circle{transform:scale(.96)}
.lvfield .lvb:focus-visible circle{stroke:var(--purple);stroke-width:4}
.lvsum{margin-top:10px}
.lvsum-h{display:flex;align-items:center;gap:8px}
.lvsum-h i{width:14px;height:14px}
.lvsum-h b{font-size:calc(18px*var(--fs,1))}
.lvsum-h span{margin-left:auto;font-weight:800;color:var(--ink-2)}

/* kit-style stat cards on the stress page: bold title with its icon at the right, a quiet value line, then the chart */
.stat .stat-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.stat .stat-h b{display:block;font-size:calc(15px*var(--fs,1));font-weight:800;line-height:1.25;color:var(--ink);font-variant-numeric:normal}
.stat .stat-h svg{width:20px;height:20px;flex:none;color:var(--ink);margin-top:1px}
.stat .stat-v{margin:4px 0 0;font-size:calc(16px*var(--fs,1));font-weight:500;color:var(--ink-2)}
.impchart{display:block;width:100%;height:auto;margin:auto 0;padding-top:14px}
button.stat.tap .freqlist{margin-top:12px}
.freqlist.lg{gap:16px;margin-top:2px}
.freqlist.lg .row1{font-size:calc(15px*var(--fs,1))}
.freqlist.lg i{height:10px;border-radius:5px;margin-top:7px}

/* ---------- welcome: the first impression ---------- */
.wel-scr{background:var(--screen)}
.wel-scr .scr-body{padding:0;scrollbar-width:none;display:flex;flex-direction:column;overflow:hidden}
.wel-hero{position:relative;width:100%;flex:1 1 0;min-height:200px;max-height:calc(100% - 0px);overflow:hidden;
  background:radial-gradient(70% 55% at 50% 52%,var(--yellow-2) 0,transparent 70%),linear-gradient(180deg,var(--green-2) 0%,var(--yellow-2) 55%,var(--screen) 100%)}
/* the doctor stands in the waves: the bottom of the hero is waves running into the page (see .wl-waves) */
.wel-hero > svg{position:absolute;inset:0;width:100%;height:100%}
.wl-ring{transform-box:view-box;transform-origin:195px 232px;animation:wl-ring 5.5s ease-out infinite;animation-delay:var(--d,0s);opacity:0}
.wl-sun{transform-box:view-box;transform-origin:195px 232px;animation:wl-sun 1.1s cubic-bezier(.2,.9,.25,1.15) .05s both}
.wl-rays{transform-box:view-box;transform-origin:195px 232px;animation:wl-spin 70s linear infinite}
.wl-w1{animation:wl-drift 9s ease-in-out infinite alternate}
.wl-w2{animation:wl-drift 7s ease-in-out -2s infinite alternate-reverse}
.wl-w3{animation:wl-drift 11s ease-in-out -4s infinite alternate}
@keyframes wl-drift{from{transform:translateX(-22px)}to{transform:translateX(22px)}}
.wl-rise{animation:wl-rise .9s cubic-bezier(.2,.9,.25,1.1) var(--d,0s) both}
.wl-armL,.wl-armR{transform-box:view-box;animation:wl-arm 1s cubic-bezier(.2,.9,.3,1.25) .75s both}
.wl-armL{transform-origin:var(--ox) var(--oy)}
.wl-armR{transform-origin:var(--ox) var(--oy);animation-name:wl-armR}
.wl-palm{transform-box:fill-box;transform-origin:center;animation:wl-palm 2.4s ease-out 1.5s infinite;opacity:0}
.wl-tw{transform-box:fill-box;transform-origin:center;animation:wl-tw var(--t,2.6s) ease-in-out var(--d,0s) infinite}
.wl-float{transform-box:fill-box;transform-origin:center;animation:wl-pop .6s cubic-bezier(.2,.9,.3,1.4) var(--d,0s) both}
.wl-float > g{transform-box:fill-box;transform-origin:center;animation:wl-bob var(--t,5s) ease-in-out var(--d,0s) infinite alternate}
/* the four tiles leave the palms and float up into an arc around the head */
.wl-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.wl-feat{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 4px 10px;border-radius:20px;background:var(--card);box-shadow:0 8px 20px rgba(75,52,37,.10);will-change:transform}
.wl-feat .ticon{width:40px;height:40px}
.wl-feat .ticon svg{width:20px;height:20px}
.wl-feat span:last-child{font-size:calc(11.5px*var(--fs,1));font-weight:800;color:var(--ink);text-align:center;line-height:1.15}
.wel-text{position:relative;z-index:2;padding:0 24px 8px;margin-top:14px;flex:none}
.wel-text > .wl-h,.wel-text > .wl-sub{animation:wl-fade .7s ease 1.9s both}
.wl-brand{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--card);border:1px solid var(--line-2);font-size:calc(12.5px*var(--fs,1));font-weight:800;letter-spacing:.04em;color:var(--ink-2);box-shadow:0 4px 14px rgba(75,52,37,.06)}
.wl-brand i{width:26px;height:26px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff}
.wl-brand i svg{width:16px;height:16px}
.wl-brand b{color:var(--ink)}
.wl-h{margin:0;font-size:calc(31px*var(--fs,1));font-weight:800;line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
.wl-mark{position:relative;display:inline-block;white-space:nowrap;padding-bottom:.12em}
/* hand-drawn brush underline under "daha iyi hisset", drawn left to right once the title has faded in */
.wl-mark::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-.2em;height:.42em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M5 15C52 8 118 6 235 10' fill='none' stroke='%23FFCE5C' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M30 20C92 15 150 14 205 16' fill='none' stroke='%23FFCE5C' stroke-width='3.5' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") no-repeat center/100% 100%;clip-path:inset(0 100% 0 0);animation:wl-mark .9s cubic-bezier(.6,0,.2,1) 2.4s both;pointer-events:none}
.wl-sub{margin:10px 0 0;font-size:calc(15px*var(--fs,1));font-weight:600;line-height:1.45;color:var(--ink-2)}
.wel-text > .wl-h,.wel-text > .wl-sub{text-align:center}
.wel-text > .wl-sub{text-wrap:pretty;margin-inline:-6px}
.wel-scr .cta{position:relative;z-index:2;animation:wl-fade .6s ease 2.2s both}
.wel-scr .spl-waves{animation:none;height:60%;z-index:1}
.wel-scr .spl-waves .w1:not(.w0){opacity:.32}
.spl-waves .w1.w0{fill:var(--screen);opacity:1}
.wel-go{position:relative;overflow:hidden;box-shadow:0 12px 26px rgba(79,52,34,.28)}
.wel-go::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-120%);animation:wl-shine 3.4s ease-in-out 3s infinite}
.wel-go svg{transition:transform .2s}
.wel-go:hover svg{transform:translateX(4px)}
@keyframes wl-spin{to{transform:rotate(360deg)}}
@keyframes wl-ring{0%{opacity:.6;transform:scale(.8)}100%{opacity:0;transform:scale(1.35)}}
@keyframes wl-sun{from{opacity:0;transform:translateY(40px) scale(.7)}}
@keyframes wl-rise{from{opacity:0;transform:translateY(80px)}}
@keyframes wl-arm{from{transform:rotate(-38deg)}}
@keyframes wl-armR{from{transform:rotate(38deg)}}
@keyframes wl-palm{0%{opacity:.85;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}
@keyframes wl-fly{0%{opacity:0;transform:translate(calc(var(--fx) * 100cqw / 390),calc(var(--fy) * 100cqw / 390)) scale(.15) rotate(var(--r,0deg))}
  25%{opacity:1}100%{opacity:1;transform:none}}
@keyframes wl-hover{from{transform:translateY(-3px) rotate(-1.5deg)}to{transform:translateY(4px) rotate(1.5deg)}}
@keyframes wl-pop{from{opacity:0;transform:scale(.4)}}
@keyframes wl-bob{from{transform:translateY(-5px) rotate(-3deg)}to{transform:translateY(6px) rotate(3deg)}}
@keyframes wl-tw{0%,100%{opacity:.35;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
@keyframes wl-mark{to{clip-path:inset(0 0 0 0)}}
@keyframes wl-fade{from{opacity:0;transform:translateY(14px)}}
@keyframes wl-shine{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}

.rnhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rnhead b{font-size:calc(26px*var(--fs,1));font-weight:800;letter-spacing:-.01em}
.rnhead .small{margin-left:auto}
.rnrow{display:flex;gap:12px;align-items:flex-start;padding:9px 0}
.rnrow + .rnrow{border-top:1px solid var(--line-2)}
.rnrow .ticon{width:26px;height:26px;margin-top:1px}
.rnrow .ticon svg{width:14px;height:14px}
.rnrow p{margin:0;font-size:calc(14px*var(--fs,1));font-weight:600;line-height:1.45;color:var(--ink)}
/* ---------- splash ---------- */
.splash-scr .scr-body{padding:0;overflow:hidden}
.splash{--spl-glow:#FFF1CC;position:relative;height:100%;display:flex;flex-direction:column;align-items:center;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(120% 62% at 50% 38%,var(--spl-glow) 0,rgba(255,241,204,0) 64%),var(--screen)}
.screen.dark .splash{--spl-glow:rgba(255,206,92,.15)}
.spl-mid{position:absolute;z-index:1;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:center}
.spl-sub{position:absolute;top:100%;left:0;right:0;margin-top:22px;display:flex;flex-direction:column;align-items:center}
.spl-name{margin:0;line-height:0}
.spl-wm{display:block;width:300px;height:auto;margin:0 auto;fill:var(--ink)}
.spl-wm .dt{fill:var(--orange)}
.spl-tag{margin:0;font-size:16px;font-weight:700;letter-spacing:.01em;color:var(--ink-2);text-align:center}
.spl-by{position:relative;z-index:1;margin-top:auto;padding-bottom:44px;display:flex;flex-direction:column;align-items:center;gap:9px}
.spl-by span{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.spl-by .kd{display:block;width:124px;height:auto}
.screen.dark .spl-by .kd path{fill:#fff}
.spl-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;z-index:0;pointer-events:none}
.spl-waves path{fill:var(--green-2)}
.spl-waves .w1{opacity:.55;animation:spl-drift 26s linear infinite}
.spl-waves .w2{fill:var(--yellow-2);opacity:.7;animation:spl-drift 19s linear infinite reverse}
.spl-waves .w3{fill:var(--orange-2);opacity:.6;animation:spl-drift 33s linear infinite}
.spl-sweep{position:absolute;left:0;width:100%;top:0;height:112%;z-index:3;pointer-events:none;transform:translateY(104%);transition:transform .56s cubic-bezier(.55,0,.25,1)}

.splash.out .spl-sweep{transform:translateY(-8%)}
.splash.out .spl-mid,.splash.out .spl-by{opacity:0;transition:opacity .4s ease}
.spl-load{display:flex;gap:8px;margin-top:28px}
.spl-load i{display:block;width:8px;height:8px;border-radius:50%;background:var(--green);animation:spl-bounce 1.3s ease-in-out infinite}
.spl-load i:nth-child(2){background:var(--yellow);animation-delay:.16s} .spl-load i:nth-child(3){background:var(--orange);animation-delay:.32s}
@keyframes spl-bounce{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-6px);opacity:1}}
@keyframes spl-drift{to{transform:translateX(-390px)}}
@keyframes spl-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes spl-fade{from{opacity:0}to{opacity:1}}
.spl-wm .l{transform-box:fill-box;transform-origin:center;animation:spl-rise .8s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.25s + var(--i)*.1s)}
.spl-tag{animation:spl-fade .8s .95s backwards}
.spl-load{animation:spl-fade .6s 1.15s backwards}
.spl-by{animation:spl-fade .9s .9s backwards}
.spl-waves{animation:spl-fade 1s backwards}
@media (prefers-reduced-motion:reduce){.splash *{animation:none!important}.spl-sweep{transition:none}}


/* ---------- v0.2: everyday activities, illustrated, with a 30-day plan ---------- */
.aart{display:block;width:100%;height:100%}
.aart.aimg{object-fit:cover}
.liftchip{display:inline-flex;align-items:center;gap:4px;font-size:calc(11.5px*var(--fs,1));font-weight:800;padding:4px 8px;border-radius:999px;background:var(--line-2);color:var(--ink-2);white-space:nowrap;flex:none}
.liftchip svg{width:12px;height:12px}
.liftchip.up{background:var(--green-2);color:var(--green-3)}
.liftchip.down{background:var(--orange-2);color:var(--orange-3)}
.dayact{background:var(--card);border-radius:28px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 2px 14px rgba(75,52,37,.06);margin-bottom:var(--sp-stack);animation:daIn .35s ease both}
@keyframes daIn{from{opacity:0;transform:translateY(8px) scale(.985)}}
.da-art{position:relative;display:block;width:100%;aspect-ratio:16/8.5;border:0;padding:0;background:none;overflow:hidden}
.da-badge{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:#4B3425;font-size:calc(11.5px*var(--fs,1));font-weight:800;padding:6px 11px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.da-badge svg{width:14px;height:14px}
.da-min{position:absolute;right:12px;top:12px;background:rgba(75,52,37,.78);color:#fff;font-size:calc(11.5px*var(--fs,1));font-weight:800;padding:6px 10px;border-radius:999px}
.da-body{padding:14px 16px 16px}
.da-plan{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;padding:0 0 10px;margin:0 0 10px;border-bottom:1px solid var(--line-2);color:var(--green-3,#5E7233);font:inherit;font-size:calc(11px*var(--fs,1));font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer}
.da-plan svg{width:14px;height:14px;flex:none}
.da-plan.done > svg:first-child{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--green);color:#fff}
.da-plan span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.da-plan em{font-style:normal;color:var(--ink-3);letter-spacing:0}
.da-body b{display:block;font-size:calc(19px*var(--fs,1));font-weight:800;line-height:1.2}
.da-body > span{display:block;font-size:calc(13.5px*var(--fs,1));color:var(--ink-2);font-weight:600;margin-top:3px}
.da-acts{display:flex;gap:8px;margin-top:14px}
.da-acts .pill{flex:1}
.da-acts .pill svg{width:16px;height:16px}
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.atile{display:flex;flex-direction:column;text-align:left;background:var(--card);border:1px solid var(--line-2);border-radius:24px;overflow:hidden;padding:0;box-shadow:0 2px 12px rgba(75,52,37,.04)}
.at-art{position:relative;width:100%;aspect-ratio:16/11;overflow:hidden}
.at-art > .aart,.da-art > .aart{position:absolute;inset:0;width:100%;height:100%}
.at-txt{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.at-txt b{font-size:calc(14.5px*var(--fs,1));font-weight:800;line-height:1.25}
.at-txt span{font-size:calc(11.5px*var(--fs,1));color:var(--ink-2);font-weight:700}
.at-txt .liftchip{margin-top:4px}
.arow{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line-2);border-radius:24px;padding:10px 14px 10px 10px;margin-bottom:var(--sp-stack);width:100%;text-align:left;box-shadow:0 2px 12px rgba(75,52,37,.04)}
.arow .thumb{width:72px;height:72px;border-radius:18px;overflow:hidden;flex:none}
.arow .txt{flex:1;min-width:0}
.arow .txt b{display:block;font-size:calc(16px*var(--fs,1));font-weight:800}
.arow .txt span{display:block;font-size:calc(12.5px*var(--fs,1));color:var(--ink-2);font-weight:600;margin-top:2px}
.arow .txt em{display:block;font-style:normal;font-size:calc(11.5px*var(--fs,1));color:var(--ink-3);font-weight:700;margin-top:3px}
.actchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px 14px;padding:0 20px 4px}
.actchips::-webkit-scrollbar{display:none}
.actchips .chipsel{flex:none;padding:9px 14px;font-size:calc(14px*var(--fs,1))}
.adet-art{position:relative;height:350px;padding-top:50px;box-sizing:border-box;border-radius:0 0 44px 44px;overflow:hidden;margin-bottom:18px}
/* the picture starts below the status bar and island, the band above is painted in the scene's own top colour */
.adet-art .aart{height:300px}
@media (max-width: 520px){.adet-art{padding-top:env(safe-area-inset-top,0px);height:calc(300px + env(safe-area-inset-top,0px))}}
.adet-art.photo{padding-top:0!important}
.adet-art.photo .aart{height:100%}
.adet-art .iconbtn{position:absolute;left:20px;top:58px;background:rgba(255,255,255,.9);border-color:transparent;color:#4B3425}
.adet-chips .chip{padding:6px 11px;border-radius:999px}
.act-why{margin:0;font-size:calc(15.5px*var(--fs,1));line-height:1.6;color:var(--ink)}
.feelrow{display:flex;gap:10px;margin:4px 0 16px}
.feelrow button{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;border-radius:22px;border:1.5px solid var(--line);background:var(--card);font-weight:800;font-size:calc(14px*var(--fs,1));color:var(--ink)}
.feelrow .face{width:48px;height:48px}
.plancard{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line-2);border-radius:28px;padding:16px;margin-bottom:var(--sp-stack);box-shadow:0 2px 14px rgba(75,52,37,.06)}
.plancard .pc-head{display:flex;align-items:center;gap:14px}
.plancard .pc-head > svg{width:22px;height:22px;color:var(--ink-3);flex:none}
.pc-ring{width:62px;height:62px;border-radius:50%;flex:none;display:flex;align-items:baseline;justify-content:center;padding-top:19px;background:radial-gradient(closest-side,var(--card) 76%,transparent 78% 100%),conic-gradient(var(--green) calc(var(--p)*1%),var(--line-2) 0)}
.pc-ring b{font-size:calc(19px*var(--fs,1));font-weight:800;line-height:1}
.pc-ring small{font-size:calc(10px*var(--fs,1));font-weight:800;color:var(--ink-3)}
.pc-txt{flex:1;min-width:0}
.pc-txt small{display:block;font-size:calc(11px*var(--fs,1));font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pc-txt b{display:block;font-size:calc(17px*var(--fs,1));font-weight:800;margin-top:2px}
.pc-txt span{display:inline-flex;align-items:center;gap:4px;font-size:calc(12.5px*var(--fs,1));color:var(--ink-2);font-weight:700;margin-top:2px}
.pc-txt span svg{width:14px;height:14px;color:var(--orange)}
.pc-dots{display:grid;grid-template-columns:repeat(15,1fr);gap:5px;margin-top:14px}
.pc-dots i{aspect-ratio:1;border-radius:50%;background:var(--line-2)}
.pc-dots i.on{background:var(--green)}
.pc-dots i.now{box-shadow:inset 0 0 0 2px var(--green)}
.pc-dots i.miss{background:var(--line)}
.plancard.intro{display:flex;padding:0;overflow:hidden}
.plancard.intro .pc-art{width:118px;flex:none;position:relative;overflow:hidden;min-height:100%}
.plancard.intro .pc-art .aart{position:absolute;inset:0;width:100%;height:100%}
.plancard.intro .pc-body{padding:14px 16px;display:flex;flex-direction:column;align-items:flex-start}
.plancard.intro small{font-size:calc(11px*var(--fs,1));font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-3)}
.plancard.intro b{font-size:calc(17px*var(--fs,1));font-weight:800;margin-top:2px}
.plancard.intro span{font-size:calc(12.5px*var(--fs,1));color:var(--ink-2);font-weight:600}
.plancard.intro .pill{color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.pday{aspect-ratio:1;border-radius:16px;border:1.5px solid var(--line-2);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;color:var(--c)}
.pday svg{width:18px;height:18px}
.pday small{font-size:calc(10px*var(--fs,1));font-weight:800;color:var(--ink-3)}
.pday.done{background:var(--c);border-color:var(--c);color:#fff}
.pday.done small{color:rgba(255,255,255,.88)}
.pday.today{border:2.5px solid var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent)}
.pday.missed{opacity:.38}
.pday.future{color:var(--ink-4)}
/* today's plan step, done: the activity with a check badge, then tomorrow's step underneath */
.plan-ok{padding:12px}
.plan-ok button{display:flex;align-items:center;gap:14px;width:100%;border:0;background:none;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.po-thumb{position:relative;width:72px;height:72px;flex:none}
.po-thumb .aart{border-radius:18px;overflow:hidden}
.po-check{position:absolute;right:-5px;bottom:-5px;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;border:3px solid var(--card)}
.po-check svg{width:14px;height:14px}
.po-txt{flex:1;min-width:0;display:block}
.po-txt small{display:block;font-size:calc(10.5px*var(--fs,1));font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-3,#5E7233)}
.po-txt b{display:block;font-size:calc(16px*var(--fs,1));font-weight:800;line-height:1.25;margin-top:2px;color:var(--ink)}
.po-txt > span{display:block;font-size:calc(12.5px*var(--fs,1));color:var(--ink-2);font-weight:600;margin-top:2px}
.po-next{margin-top:12px;padding-top:12px!important;border-top:1px solid var(--line-2)!important}
.po-next .po-txt small{color:var(--ink-3)}
.po-nthumb{width:72px;height:72px;flex:none;border-radius:18px;overflow:hidden}
.po-next > svg{width:18px;height:18px;color:var(--ink-3);flex:none}
.po-last{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line-2);font-size:calc(13px*var(--fs,1));color:var(--ink-2);font-weight:600}
.atile.static{pointer-events:none}
.prow .txt small{display:block;font-size:calc(10.5px*var(--fs,1));font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pstat{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--line-2);color:var(--ink-3);flex:none}
.pstat svg{width:16px;height:16px}
.prow.done .pstat,.prow.today .pstat{background:var(--green);color:#fff}
.prow.today{border-color:var(--green);box-shadow:0 0 0 3px var(--green-2)}
.prow.missed{opacity:.55}
/* plan rows share the .prow name with the progress row in the hero bands; undo that row's white text and 38px number column */
.arow.prow{color:var(--ink);padding:10px 14px 10px 10px;margin-top:0}
.arow.prow .txt b{width:auto;flex:initial;opacity:1;text-align:left;color:var(--ink);font-size:calc(16px*var(--fs,1));line-height:1.25}
.pw-head{display:flex;justify-content:space-between;align-items:baseline;margin:16px 2px 10px}
.pw-head b{font-size:calc(15px*var(--fs,1));font-weight:800}
.pw-head span{font-size:calc(12.5px*var(--fs,1));color:var(--ink-2);font-weight:700}

/* the domes hold one arc gauge now (as Terapi): the same bottom room as Terapi, and the two text-led domes made as compact */
.score-hero{padding-bottom:46px}
.sos-hero h1{font-size:calc(26px*var(--fs,1));margin-top:14px}
.brown-hero{padding-bottom:28px}
.brown-hero .hero-avatar .avatar.lg{width:72px;height:72px;font-size:calc(28px*var(--fs,1))}
.brown-hero .hero-avatar .round{width:40px;height:40px}
.brown-hero .prof-name{margin-top:6px}
.brown-hero .prof-name h1{font-size:calc(22px*var(--fs,1));margin-bottom:6px}
.brown-hero .prof-name p{margin-top:6px}
.brown-hero .stats3{margin-top:10px;padding:8px 6px}
.brown-hero .hero-avatar{margin-top:-30px}
:root{--hdr-dome:369px}

/* round headers, second pass: smaller gauge, tighter gaps, one-line captions, compact SOS / safety heroes */
.wkg-g{width:210px}
.score-hero .dome-g{margin-top:2px}
.hero-band.tint .band-extra{margin-top:2px}
.wkg-sub,.score-hero .dome-g p.wkg-sub{margin-top:8px;max-width:none}
.wkg-v b{font-size:calc(42px*var(--fs,1))}
.sos-hero h1{margin:10px 0 4px}
.sos-hero p{max-width:none}
.sos-hero .callbig{margin-top:14px;padding:9px 14px 9px 9px}
.sos-hero .callbig .ic{width:46px;height:46px}
.sos-hero h1{margin-top:6px}
.sos-hero p{font-size:calc(14px*var(--fs,1));line-height:1.4}
.sos-hero .callbig{margin-top:12px}
.score-hero .resicon{width:92px;height:92px;margin:16px auto 12px}
.score-hero .resicon svg{width:42px;height:42px}

/* progress bars and range switches that used to sit inside a square header now open the page body, so every square header keeps the same height */
.hdr-under{margin:0 0 18px}
.hdr-under .cbar{margin-top:0}
.hdr-under .seg{display:flex;width:100%}
.hdr-under .seg button{flex:1;text-align:center}

/* square headers: one fixed height everywhere (the phone value is set below); the scene band takes what the text leaves and the drawing scales to fit it */
:root{--hdr-sq:337px}
.hero-band.ob-hero:not(.tint){height:307px}
.home-head{min-height:307px}
.hero-band:not(.tint){height:var(--hdr-sq);min-height:0}
.hero-band.ill-hero .band-extra,.hero-band.ob-hero .band-extra{min-height:0}
.hero-band.ill-hero .band-extra .ob-ill{min-height:0}
.hero-band.ill-hero > p{font-size:calc(13.5px*var(--fs,1));line-height:1.4;max-width:none}

/* therapy sound covers drawn as pictures (SOUND_IMG): the picture fills its round slot; its own white rim is zoomed past the edge
   so only the card's ring shows, and in lists the round slot is larger than the drawn discs */
.disc-img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;transform:scale(1.1)}
.cover.disc:has(.disc-img){overflow:hidden;padding:2px}
/* every card that leads with a picture (round cover or square activity photo) has the same 72px picture, the same 10px inset
   and so the same 94px height, whichever list it sits in */
.scard:has(.disc-img),.row:has(> .disc-ticon),.row:has(> .act-ticon){padding:10px 14px 10px 10px;min-height:94px}
.scard .cover.disc:has(.disc-img),.row > .ticon.disc-ticon,.row > .ticon.act-ticon{width:72px;height:72px;flex:none}
.row > .ticon.act-ticon{border-radius:18px}
.nextcard:has(.disc-img){padding:10px 14px 10px 10px;min-height:94px}
.nextcard > .cover.disc:has(.disc-img){width:72px;height:72px}
.arow .txt span,.scard:has(.disc-img) .txt span,.row:has(> .disc-ticon) .txt span,.row:has(> .act-ticon) .txt span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.arow .txt b,.scard:has(.disc-img) .txt b,.row:has(> .disc-ticon) .txt b,.row:has(> .act-ticon) .txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow{min-height:94px}
.ccard .cover.disc:has(.disc-img),.contcard .cover.disc:has(.disc-img){width:72px;height:72px}
.contcard:has(.disc-img){padding:10px 14px 10px 10px;min-height:94px}
.promo .ticon.disc-ticon{width:72px;height:72px;padding:2px;margin-left:-8px}
.pdisc:has(.disc-img){overflow:hidden}
.ticon.act-ticon{padding:0;overflow:hidden;border-radius:16px;background:none}
.ticon.act-ticon img{width:100%;height:100%;object-fit:cover;display:block}
.ticon.disc-ticon{background:#fff;padding:2px;border-radius:50%;overflow:hidden;box-shadow:0 2px 8px rgba(75,52,37,.10)}

/* live figures under a square header's subtitle */
.hchips{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hchip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 9px;border-radius:999px;background:var(--line-2);color:var(--ink);font-size:calc(12px*var(--fs,1));font-weight:800;white-space:nowrap}
.hchip svg{width:14px;height:14px;color:var(--ink-2)}
.hero-band.ill-hero > .hchips + .band-extra{margin-top:6px}

/* a medication taken several times a day: one card, its doses as time pills */
.med-card .txt{min-width:0}
.med-card .dpills{display:flex;flex-wrap:nowrap;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dpills::-webkit-scrollbar{display:none}
.dpill{flex:none;display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);font:inherit;font-size:calc(12px*var(--fs,1));font-weight:800;font-variant-numeric:tabular-nums}
.dpill svg{width:12px;height:12px}
.dpill.taken{background:var(--green);border-color:var(--green);color:#fff}
.dpill.skipped{color:var(--ink-3);text-decoration:line-through;opacity:.7}
.med-card .viz:empty{display:none}
.dpill.next{border-color:var(--ink);color:var(--ink)}

/* native controls (time / date pickers, selects, scrollbars) follow the app's theme, not the browser's */
#screen{color-scheme:light}
#screen.dark{color-scheme:dark}

/* icons on a yellow ground are always dark brown (white does not read on yellow, in either theme) */
.ncard .sq[style*="--yellow"],.ncard .sq[style*="FFCE5C"]{color:#4B3425}
.ncard .sq[style*="--brown"]{color:var(--brown-ink)}
.bmini.on[style*="FFCE5C"],.badge.on[style*="FFCE5C"] .bg{color:#4B3425}
.rphead .ticon[style*="#FFCE5C"]{color:#4B3425 !important}

/* the app's time picker (js/timepicker.js): two endless snapping wheels with a highlighted middle row */
input[data-tp]{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums}
input[data-tp]::-webkit-calendar-picker-indicator{display:none}
/* clock icon drawn in the field itself (native one is hidden); light/dark versions */
input[data-tp].input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736B66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:right 14px center;padding-right:40px}
#screen.dark input[data-tp].input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9AEA6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.tpair input[data-tp].input{padding-right:34px;background-position:right 10px center;background-size:16px}
.sheet .grab{cursor:grab;touch-action:none}
.sheet h3{touch-action:none}
.tp-wheel{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:4px;margin:4px 0 22px;padding-top:2px}
.tp-band{position:absolute;left:0;right:0;top:91px;height:64px;border-radius:18px;background:color-mix(in srgb,var(--green) 16%,transparent);border:1.5px solid color-mix(in srgb,var(--green) 45%,transparent)}
.tp-colw{display:flex;flex-direction:column;align-items:center}
.tp-col{position:relative;width:104px;height:232px;overflow-y:auto;scroll-snap-type:y mandatory;scroll-padding-top:90px;padding:90px 0;box-sizing:border-box;scrollbar-width:none;outline:none;
  -webkit-mask:linear-gradient(transparent,#000 32%,#000 68%,transparent);mask:linear-gradient(transparent,#000 32%,#000 68%,transparent)}
.tp-col::-webkit-scrollbar{display:none}
.tp-it{display:block;width:100%;height:52px;border:0;background:none;scroll-snap-align:start;font:inherit;font-size:calc(22px*var(--fs,1));font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;transition:color .15s,transform .15s,opacity .15s;opacity:.55;transform:scale(.86)}
.tp-it.near{opacity:.85;transform:scale(.94)}
.tp-it.on{color:var(--ink);font-weight:800;opacity:1;transform:scale(1.25)}
.tp-colon{position:relative;margin-top:96px;font-size:calc(30px*var(--fs,1));font-weight:800;color:var(--ink)}
.tp-unit{margin-top:6px;font-size:calc(11px*var(--fs,1));font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* on a phone every header band starts right under the status bar, so the back button and title sit at the same height as the
   check-in header (.scr: safe area + 12, .top adds 6). Kept at the end of the file so it wins over each band's own padding. */
@media (max-width: 520px){
  .hero-band.ob-hero{padding-top:calc(env(safe-area-inset-top,0px) + 18px)}
  .hero-band:not(.ob-hero),.score-hero,.sos-hero,.brown-hero{padding-top:calc(env(safe-area-inset-top,0px) + 15px)}
  .home-head{padding-top:calc(env(safe-area-inset-top,0px) + 20px)}
  /* square headers: one height for all, scaled to the phone's width so the scene inside keeps its proportions
     (title row + a scene band about 41% of the width tall: 234px on a 390px iPhone, 222px on a 360px Android) */
  :root{--hdr-sq:calc(env(safe-area-inset-top,0px) + 292px)}
  .hero-band.ob-hero,.home-head{height:auto;min-height:0}
  .hero-band.ob-hero{height:calc(env(safe-area-inset-top,0px) + 262px)}
  .home-head{min-height:calc(env(safe-area-inset-top,0px) + 262px)}
  /* round headers: all the height of the fullest one (Profil and SOS in English, 385px with no notch), so every tab's dome
     ends at the same line; text that is set larger still grows it */
  :root{--hdr-dome:calc(env(safe-area-inset-top,0px) + 324px)}
}

/* dome headers with the Terapi-style arc gauge (UI.domeGauge) instead of a big number and a bar */
.score-hero .dome-g{margin-top:6px}
.score-hero .dome-g .wkg-sub{max-width:280px}
.dome-g .wkg-v b{white-space:nowrap}
.dome-g .wkg-v small{font-size:calc(18px*var(--fs,1));font-weight:800;opacity:.85}
.dome-g .wkg-face{width:58px;height:58px;display:block;margin:0 auto 4px}
.dome-g .wkg-word{font-size:calc(26px*var(--fs,1));font-weight:800;line-height:1.05;letter-spacing:-.01em}
.score-hero .dome-g p.wkg-sub{font-size:calc(13.5px*var(--fs,1));font-weight:700;max-width:300px;line-height:1.35;margin:12px auto 0}
.dome-g .wkg-v.long b{font-size:calc(34px*var(--fs,1))}

/* Profil's dome: avatar, name and the three stats, at the shared dome height */
.brown-hero .stats3{margin-top:12px;max-width:270px}
.brown-hero{padding-bottom:50px}
/* Profil: SOS (left) and edit (right) sit on the dome's curve, the centre of the edge left empty */
.brown-hero{padding-bottom:64px}
.pf-fabs{position:relative;height:0;z-index:3}
.pf-fab{position:absolute;top:var(--pf-fab-top,-34px);left:calc(33% - 26px);width:52px;height:52px;border:0;padding:0;border-radius:50%;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(75,52,37,.22)}
.pf-fab + .pf-fab{left:auto;right:calc(33% - 26px)}
.pf-fab svg{width:22px;height:22px}


/* dark theme is brown now: brown cards and heroes are lifted so they still stand apart from the page */
.screen.dark .promo.brown,.screen.dark .brown-hero{background:#6B4A35}
.screen.dark .promo.terra{background:#A06C4E}
.screen.dark .strip button[data-g="start"]{--c:#8A6248}
.screen.dark .strip button[data-g="start"].on b{background:#8A6248}

/* dark theme: anything sitting on a dark-green tint reads in the primary green */
#screen.dark [style*="background:var(--green-2)"],#screen.dark [style*="background:var(--green-2)"] *{color:var(--green)}
#screen.dark .tp-it.on{color:var(--green)}

/* SOS dome: centred copy and a compact call pill that stays inside the curve */
.sos-hero{text-align:center}
.sos-hero h1{font-size:calc(24px*var(--fs,1));line-height:1.2;text-wrap:balance}
.sos-hero p{margin:0 auto;max-width:300px}
.sos-hero .callbig{display:inline-flex;margin:14px auto 0;padding:7px 22px 7px 7px;gap:12px;text-align:left;max-width:100%}
.sos-hero .callbig .ic{width:40px;height:40px}
.sos-hero .callbig .ic svg{width:20px;height:20px}
.sos-hero .callbig b{font-size:calc(19px*var(--fs,1))}
.sos-hero .callbig span{font-size:calc(11.5px*var(--fs,1))}

a.btn-primary,a.btn-secondary{text-decoration:none;display:flex;align-items:center;justify-content:center}

/* square headers: subtitle and live chips sit centred under the title row */
.hero-band:not(.tint):not(.ob-hero) > p{text-align:center;margin-left:auto;margin-right:auto;text-wrap:balance}
.hero-band:not(.tint):not(.ob-hero) .hchips{justify-content:center}
/* every dome reserves two lines for its sentence, so a one-line and a two-line header are the same height and the gauge sits at the same spot */
.dome-g .wkg-sub{min-height:2.8em;display:flex;align-items:center;justify-content:center;text-wrap:balance}
.sos-hero{display:flex;flex-direction:column;align-items:center}
.sos-hero > .top{align-self:stretch}
.sos-hero > h1{margin-top:auto}
.sos-hero > .callbig{margin-bottom:auto}

.btn-primary.orange{background:var(--orange);color:#fff}
/* the call pill stays white in both themes, so its text keeps the deep orange */
.sos-hero .callbig{color:#A8481B}

/* safety plan: people and professionals with a call button */
.sp-person{padding:7px 8px 7px 10px}
.sp-who{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:none;border:0;padding:0;text-align:left;color:inherit}
.sp-who b{font-size:calc(14px*var(--fs,1));font-weight:800;word-break:break-word}
.sp-who small{font-size:calc(12.5px*var(--fs,1));font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sp-call{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--green);color:#fff;border:0;text-decoration:none}
.sp-call svg{width:19px;height:19px}
.sp-call.off{background:var(--line-2);color:var(--ink-2)}
.sheet .sp-eg{max-height:132px;overflow-y:auto}
/* two-button sheets (Kaydet / Vazgeç and the like): side by side, the main action on the right */
.sheet .actions:has(> :nth-child(2):last-child){flex-direction:row-reverse;gap:10px}
.sheet .actions:has(> :nth-child(2):last-child) > *{flex:1 1 0;min-width:0;width:auto;padding:0 12px;font-size:calc(16.5px*var(--fs,1));line-height:1.15;text-align:center}
.sheet .sp-eg{position:relative;padding:2px 0;-webkit-mask:linear-gradient(transparent,#000 8px,#000 calc(100% - 10px),transparent);mask:linear-gradient(transparent,#000 8px,#000 calc(100% - 10px),transparent)}
/* a primary button painted in a programme's own colour keeps white text and icons (in dark mode --brown-ink is dark) */
.btn-primary[style*="background"]{color:#fff}
/* white answer / check surfaces keep dark text in dark mode (there --ink is near-white) */
#screen.dark .sopt.right,#screen.dark .sopt.wrong,#screen.dark .pcheck.on,#screen.dark .pract.on-color{color:#4B3425}
#screen.dark .pchecks.dark .pcheck.on,#screen.dark .sess-card .pchecks .pcheck.on{color:var(--ink)}