/* ============================================================================
   Lilt · visual system v2 — "warm night, alive"
   One deliberate warm-dark theme (in-bed, low-luminance use). Every colour is
   painted explicitly; nothing is inherited from the UA or the platform theme.

   Contrast (measured, WCAG 2.1 relative luminance, see report):
     on --bg #120d10 :  ink 17.8  ink-2 11.8  ink-3 6.5  apricot 9.7  dusk 8.6
                        calm 11.0  rise 7.6
     on a glass card :  ink 15.3  ink-2 10.2  ink-3 5.4  (all ≥ 4.5:1)
   --ink-3 is #a2938b rather than the brief's #8e7f78, which measures 5.00:1 on
   the base but only 4.42:1 on a glass surface — below the 4.5:1 acceptance bar.
   ============================================================================ */

@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-latin.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(../assets/fonts/Fraunces-latin.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}

:root{
  /* ground + ink */
  --bg:#120d10;
  --ink:#fff4eb;
  --ink-2:#d8c8bd;
  --ink-3:#a2938b;
  /* accents */
  --apricot:#f2a86a;
  --apricot-lo:#f7c396;
  --on-apricot:#1a1012;
  --dusk:#b9a3e3;
  /* Unwind runs warmer than the rest of the app: the same dusk lilac pulled toward rose so
     the wind-down screens read like lamplight, not like a cold purple UI. Scoped in via
     `body.unwind` below — Settle and every shared surface keep --dusk exactly as it was.
     Measured contrast on the base ground 9.5:1, on a glass card 8.3:1. */
  --dusk-warm:#d8a9c6;
  --calm:#4fd8c8;
  --rise:#ff7b6b;
  /* surfaces */
  --glass:rgba(255,244,235,.06);
  --glass-edge:rgba(255,244,235,.10);
  --glass-base:rgba(18,13,16,.38);
  --glass-hi:rgba(255,244,235,.14);
  /* geometry */
  --r-card:24px;
  --r-ctrl:16px;
  --pad:18px;
  --wrap:520px;
  /* motion */
  --t-page:260ms;
  --t-press:120ms;
  --e-out:cubic-bezier(.2,.7,.3,1);
  --pulse-dur:1.05s;
  /* type */
  --sans:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue","PingFang SC",sans-serif;
  --display:Fraunces,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Songti SC",serif;
}

/* Unwind screens (pre-rest, session and the now-playing card) borrow the warmer accent.
   The class is set by main.js for the whole time an Unwind session is on screen. */
body.unwind{--dusk:var(--dusk-warm)}

*{box-sizing:border-box}
html{overflow-x:hidden;background:var(--bg);color-scheme:dark}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;overflow-x:hidden;
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.45;font-weight:450;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--apricot);outline-offset:3px;border-radius:10px}
[hidden]{display:none!important}
::selection{background:rgba(242,168,106,.3)}
::placeholder{color:var(--ink-3);opacity:1}

/* ---------- the living ground ---------- */
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
/* The veil pins the ground luminance under text: without it the brightest orb
   (apricot at ~.30 alpha) lifts the ground to #553c2b and small ink-3 labels
   would drop to ~2.6:1. Lighter at the top where the display type lives. */
#veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(18,13,16,.28), rgba(18,13,16,.62) 62%),
    linear-gradient(180deg, rgba(18,13,16,.20), rgba(18,13,16,.50) 55%, rgba(18,13,16,.66));
  transition:opacity var(--t-page) var(--e-out);
}
body[data-view="session"] #veil{opacity:.55}
body[data-view="welcome"] #veil{opacity:.72}

/* ---------- shell ---------- */
.top{
  position:relative;z-index:3;
  display:flex;align-items:center;gap:6px;
  padding:6px var(--pad);max-width:var(--wrap);width:100%;margin:0 auto;
}
.brand{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;
  color:var(--ink-2);font-weight:700;font-size:14px;letter-spacing:.06em;
}
.brand svg{width:22px;height:22px;color:var(--apricot);flex:none}
.brand span{opacity:.92}
.grow{flex:1}
.navs{display:flex;gap:4px}
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;color:var(--ink-3);
  transition:color var(--t-press) var(--e-out),background var(--t-press) var(--e-out);
}
.iconbtn svg{width:22px;height:22px}
.iconbtn:hover{color:var(--ink);background:var(--glass)}
.iconbtn:active{transform:scale(.94)}
body[data-view="prerest"] .navs,
body[data-view="session"] .navs,
body[data-view="checkin"] .navs{opacity:0;pointer-events:none}

main{
  position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  max-width:var(--wrap);width:100%;margin:0 auto;padding:4px var(--pad) 22px;
}
.view{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0;position:relative}
.view>*{min-width:0}
.spacer{flex:1;min-height:8px}
.view.enter{animation:viewIn var(--t-page) var(--e-out) both}
@keyframes viewIn{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- type ---------- */
.display{
  font-family:var(--display);font-weight:380;font-optical-sizing:auto;
  font-variation-settings:"opsz" 72;
  font-size:clamp(28px,8.2vw,34px);line-height:1.06;letter-spacing:-.012em;
  margin:0;color:var(--ink);text-wrap:balance;
}
h2.display{font-size:clamp(24px,6.6vw,28px);margin:0 0 2px}
.eyebrow{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.4;
}
.lead{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.lead b{color:var(--ink);font-weight:650}
.lead.center{text-align:center;max-width:34ch;margin:0 auto}
.fine{margin:0;font-size:12px;line-height:1.45;color:var(--ink-3)}
.mt{margin-top:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- glass surface ---------- */
.glass,.panel,.pickcard,.switchrow,.hero,.dock-in,.sheet,.fit,.list .card,.facts>div,.lastline,.spot,.overlay-in{
  background-color:var(--glass-base);
  background-image:linear-gradient(180deg,var(--glass),rgba(255,244,235,.02));
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
}
.panel{border-radius:var(--r-card);padding:16px}
.group{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.group-h{padding:0 4px 2px}
.group-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.group-v{font-size:12px;color:var(--ink-2);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:0 22px;border-radius:18px;
  font-size:15.5px;font-weight:650;letter-spacing:.005em;
  transition:transform var(--t-press) var(--e-out),filter var(--t-press) var(--e-out),background var(--t-press) var(--e-out);
}
.btn svg{width:19px;height:19px;flex:none}
.btn:active{transform:scale(.97);filter:brightness(1.07)}
.btn.primary{
  background:linear-gradient(180deg,var(--apricot-lo),var(--apricot));
  color:var(--on-apricot);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 14px 30px -16px rgba(242,168,106,.75);
}
.btn.glassy{
  background-color:var(--glass-base);background-image:linear-gradient(180deg,var(--glass),rgba(255,244,235,.02));
  border:1px solid var(--glass-edge);color:var(--ink);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.btn.glassy.danger{color:var(--rise)}
.btn.glassy.end{color:var(--ink-2)}
.btn.text{color:var(--ink-3);min-width:96px;font-weight:600}
.btn.text:hover{color:var(--ink)}
.btn.text.sm{min-height:44px;min-width:64px;font-size:14px;padding:0 12px}
.btn.wide{width:100%}
.btn:disabled,.npbtn:disabled{opacity:.45;cursor:default}
.btn:disabled:active{transform:none;filter:none}
.barrow{display:flex;align-items:center;gap:10px}
.barrow.gap{gap:10px}
.barrow.col{flex-direction:column;align-items:stretch;gap:4px}
.barrow>.btn{flex:1}
.barrow.col>.btn{flex:none}

/* ---------- Nordic underline inputs ---------- */
.field{display:flex;flex-direction:column;gap:2px;min-width:0}
.fieldrow{display:flex;gap:16px}
.fieldrow .field{flex:1}
.input{
  width:100%;min-height:52px;padding:6px 2px;
  background:transparent;border:0;border-bottom:1px solid var(--glass-edge);border-radius:0;
  color:var(--ink);font-size:16px;font-weight:500;
  transition:border-color var(--t-press) var(--e-out);
}
.input:focus{outline:0;border-bottom-color:var(--apricot)}
.input:focus-visible{outline:0}
.field:focus-within .eyebrow{color:var(--apricot)}
textarea.input{min-height:120px;border:1px solid var(--glass-edge);border-radius:var(--r-ctrl);padding:10px 12px;resize:vertical}
.input.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;line-height:1.5}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- tags / status ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  padding:6px 11px;border-radius:999px;
  border:1px solid var(--glass-edge);background:var(--glass);color:var(--ink-2);
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.tag.quiet{color:var(--ink-3)}
.status{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.status.accent{color:var(--dusk)}
.follow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--ink-2);
}
.follow .dot{
  width:8px;height:8px;border-radius:50%;background:var(--apricot);flex:none;
  box-shadow:0 0 12px rgba(242,168,106,.9);
  animation:pulse var(--pulse-dur) ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(.72);opacity:.5}50%{transform:scale(1.15);opacity:1}}

/* ============================ Welcome ============================ */
.welcome{gap:16px;padding-top:8px}
.welcome .spacer{flex:0 0 auto;min-height:2px}
.wc-head{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.wc-dots{display:flex;gap:7px}
.wc-dots i{width:7px;height:7px;border-radius:50%;background:var(--glass-hi);transition:all var(--t-page) var(--e-out)}
.wc-dots i.on{background:var(--apricot);width:22px;border-radius:999px}
.wc-panel{display:flex;flex-direction:column;flex:1;min-height:0}
.wc-card{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;animation:viewIn var(--t-page) var(--e-out) both}
.wc-card .display{font-size:clamp(30px,8.8vw,38px)}
.wc-art{flex:1;min-height:140px;max-height:380px;position:relative}
.wc-orb{position:absolute;inset:0;display:grid;place-items:center}
.wc-orb::before{
  content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,168,106,.34),rgba(185,163,227,.12) 58%,transparent 72%);
  animation:breathe 8s ease-in-out infinite;
}
.wc-orb i{
  position:relative;width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,235,.92),rgba(242,168,106,.5) 68%,transparent 74%);
  animation:breathe 8s ease-in-out infinite reverse;
}
.wc-bar{display:flex;gap:10px;align-items:center;padding-top:4px}
.wc-bar .btn.primary{flex:1}

/* ---------- selectable cards (welcome source + settings radios) ---------- */
.pickcard{
  display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;
  border-radius:var(--r-card);padding:16px;cursor:pointer;position:relative;
  transition:border-color var(--t-press) var(--e-out),transform var(--t-press) var(--e-out),background-color var(--t-press) var(--e-out);
}
.pickcard:active{transform:scale(.985)}
.pickcard input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pick-ic{
  display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:13px;
  background:var(--glass);border:1px solid var(--glass-edge);color:var(--ink-2);
}
.pick-ic svg{width:21px;height:21px}
.pick-tx{flex:1;min-width:0;display:block}
.pick-tx b{display:block;font-size:15px;font-weight:650;color:var(--ink);margin-bottom:3px}
.pick-tx small{display:block;font-size:12.5px;line-height:1.42;color:var(--ink-3)}
.pick-mark{
  width:22px;height:22px;flex:none;border-radius:50%;margin-top:9px;
  border:1.75px solid var(--glass-hi);position:relative;transition:all var(--t-press) var(--e-out);
}
.pickcard.on,.pickcard:has(input:checked){border-color:rgba(242,168,106,.55);background-color:rgba(242,168,106,.07)}
.pickcard.on .pick-ic,.pickcard:has(input:checked) .pick-ic{color:var(--apricot);border-color:rgba(242,168,106,.4)}
.pickcard.on .pick-mark,.pickcard:has(input:checked) .pick-mark{border-color:var(--apricot);background:var(--apricot)}
.pickcard.on .pick-mark::after,.pickcard:has(input:checked) .pick-mark::after{
  content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:var(--on-apricot);
}
.pickcard:has(input:disabled){opacity:.45}
.pickcard.off{opacity:.45}

/* ---------- iOS-style switch rows ---------- */
.switchrow{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border-radius:var(--r-card);padding:15px 16px;cursor:pointer;
  transition:border-color var(--t-press) var(--e-out),transform var(--t-press) var(--e-out);
}
.switchrow:active{transform:scale(.99)}
.switchrow input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sw-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:12px;background:var(--glass);border:1px solid var(--glass-edge);color:var(--ink-2)}
.sw-ic svg{width:19px;height:19px}
.sw-tx{flex:1;min-width:0}
.sw-tx b{display:block;font-size:14.5px;font-weight:650;color:var(--ink)}
.sw-tx small{display:block;font-size:12px;line-height:1.4;color:var(--ink-3);margin-top:2px}
.switch{
  width:50px;height:30px;flex:none;border-radius:999px;position:relative;
  background:rgba(255,244,235,.10);border:1px solid var(--glass-edge);
  transition:background var(--t-press) var(--e-out),border-color var(--t-press) var(--e-out);
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;
  background:rgba(255,244,235,.8);box-shadow:0 2px 6px rgba(0,0,0,.5);
  transition:transform 180ms var(--e-out),background var(--t-press) var(--e-out);
}
.switchrow.on .switch,.switchrow:has(input:checked) .switch{background:var(--apricot);border-color:var(--apricot)}
.switchrow.on .switch::after,.switchrow:has(input:checked) .switch::after{transform:translateX(20px);background:var(--on-apricot)}
.switchrow.on .sw-ic,.switchrow:has(input:checked) .sw-ic{color:var(--apricot)}

/* ============================ Home ============================ */
.home{gap:14px}
.greet{padding:6px 0 2px}
.greet .eyebrow{margin-bottom:6px}
.heroes{display:flex;flex-direction:column;gap:12px}
.home .heroes{flex:1;min-height:0}
.home .hero{flex:1;max-height:200px}
.home .spacer{flex:1;min-height:0;max-height:56px}
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-card);display:flex;
  width:100%;text-align:left;min-height:104px;
  transition:transform var(--t-press) var(--e-out),border-color var(--t-press) var(--e-out);
}
.hero:active{transform:scale(.985)}
.hero .mini{position:absolute;inset:0;width:100%;height:100%;display:block;filter:saturate(1.35) brightness(1.6)}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(102deg,rgba(18,13,16,.86),rgba(18,13,16,.66) 52%,rgba(18,13,16,.06) 98%);
}
.hero.settle::after{background:radial-gradient(74% 88% at 78% 26%,rgba(242,168,106,.22),transparent 66%),linear-gradient(102deg,rgba(18,13,16,.86),rgba(18,13,16,.66) 52%,rgba(18,13,16,.06) 98%)}
.hero.unwind::after{background:radial-gradient(74% 88% at 78% 26%,rgba(216,169,198,.24),transparent 66%),linear-gradient(102deg,rgba(18,13,16,.86),rgba(18,13,16,.66) 52%,rgba(18,13,16,.06) 98%)}
.hero-in{position:relative;z-index:1;flex:1;display:flex;align-items:center;gap:14px;padding:18px 16px}
.home .hero-in{align-items:flex-end}
.home .hero-go{margin-bottom:3px}
.hero-ic{
  display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:14px;
  background:rgba(255,244,235,.08);border:1px solid var(--glass-edge);
}
.hero-ic svg{width:23px;height:23px}
.hero-tx{flex:1;min-width:0}
.hero-tx b{display:block;font-family:var(--display);font-weight:400;font-variation-settings:"opsz" 40;font-size:23px;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.hero-tx small{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-2);margin-top:3px}
.hero-go{flex:none;color:var(--ink-3)}
.hero-go svg{width:20px;height:20px;display:block}
.hero.settle .hero-ic{color:var(--apricot)}
.hero.settle{border-color:rgba(242,168,106,.24)}
.hero.unwind .hero-ic{color:var(--dusk-warm)}
.hero.unwind{border-color:rgba(216,169,198,.26)}

.home-ctl{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.dur{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 14px 0 12px;
  border-radius:999px;border:1px solid var(--glass-edge);background:var(--glass);
  color:var(--ink);font-size:15px;font-weight:650;
  transition:border-color var(--t-press) var(--e-out),transform var(--t-press) var(--e-out);
}
.dur:active{transform:scale(.97)}
.dur:hover{border-color:var(--glass-hi)}
.dur-ic{display:flex;color:var(--apricot)}
.dur-ic svg{width:19px;height:19px}
.dur-cv{display:flex;color:var(--ink-3)}
.dur-cv svg{width:18px;height:18px}
.dur-sleep{display:flex;color:var(--dusk)}
.dur-sleep svg{width:17px;height:17px}
.lastline{
  border-radius:var(--r-ctrl);padding:12px 14px;display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--ink-2);
}
.lastline .k{color:var(--ink-3)}
.lastline .v{margin-left:auto;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.lastline .v.calm{color:var(--calm)}
.lastline .v.rise{color:var(--rise)}

/* ---------- duration bottom sheet ---------- */
.sheetwrap{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet-scrim{position:absolute;inset:0;background:rgba(9,6,8,.6);opacity:0;transition:opacity var(--t-page) var(--e-out);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheetwrap.open .sheet-scrim{opacity:1}
.sheet{
  position:relative;width:100%;max-width:var(--wrap);
  border-radius:28px 28px 0 0;border-bottom:0;
  padding:10px var(--pad) calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;
  transform:translateY(101%);transition:transform var(--t-page) var(--e-out);
  box-shadow:0 -24px 60px -24px rgba(0,0,0,.85);
}
.sheetwrap.open .sheet{transform:none}
.grab{width:38px;height:4px;border-radius:999px;background:var(--glass-hi);margin:0 auto 4px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.chips button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:64px;border-radius:var(--r-ctrl);
  border:1px solid var(--glass-edge);background:var(--glass);color:var(--ink-2);
  transition:all var(--t-press) var(--e-out);
}
.chips button b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.chips button small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.chips button:active{transform:scale(.96)}
.chips button.on{background:var(--apricot);border-color:var(--apricot);color:var(--on-apricot)}
.chips button.on small{color:rgba(26,16,18,.72)}
.switchrow.asbtn{align-items:center}

/* ============================ Pre-rest ============================ */
.prerest{gap:14px;align-items:stretch}
.pre-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#preMode{color:var(--ink);border-color:rgba(242,168,106,.4)}
.arc{position:relative;width:168px;height:168px;margin:6px auto 2px;display:grid;place-items:center}
.arc svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.arc circle{fill:none;stroke-linecap:round;stroke-width:3}
.arc .arc-track{stroke:rgba(255,244,235,.09)}
.arc .arc-fill{
  stroke:var(--apricot);
  stroke-dasharray:339.29px;
  stroke-dashoffset:calc(339.29px - 3.3929px * var(--p));
  transition:stroke-dashoffset 900ms linear;
  filter:drop-shadow(0 0 6px rgba(242,168,106,.5));
}
.arc-c{position:relative;text-align:center}
.arc-c b{display:block;font-size:36px;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--ink)}
.arc-c small{display:block;margin-top:5px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- Nordic 0–10 scale ----------
   Eleven discrete buttons stay direct children of #scalePre / #scalePost so
   "#scalePre button:nth-child(n)" still addresses value n-1. They lay out as two
   ranks of six columns because eleven ≥44px-wide targets cannot fit one 375px
   row (11 × 44 = 484px); each rank carries the thin track so it still reads as a
   ruler rather than a grid of boxes. */
.scalewrap{display:flex;flex-direction:column;gap:8px}
.scale{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:0;row-gap:10px;margin:2px 0 0;position:relative;
}
.scale button{grid-column:span 2}
.scale button:nth-child(7){grid-column:2/span 2}
.scale button{
  position:relative;min-height:52px;min-width:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ink-3);background:none;border:0;border-radius:12px;
  transition:color var(--t-press) var(--e-out);
}
/* the track: a 1px rule running through every cell of a rank */
.scale button::before{
  content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1px;
  background:var(--glass-edge);
}
.scale button:first-child::before,.scale button:nth-child(7)::before{left:50%}
.scale button:nth-child(6)::before,.scale button:last-child::before{right:50%}
.scale button::after{
  content:"";position:absolute;top:50%;left:50%;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--glass-hi);transition:all 160ms var(--e-out);
}
.scale button span{position:relative;z-index:1;transform:translateY(-15px);transition:color var(--t-press) var(--e-out)}
.scale button.fill::before{background:rgba(242,168,106,.45)}
.scale button.fill::after{background:rgba(242,168,106,.7)}
.scale button.fill span{color:var(--ink-2)}
.scale button.on span{color:var(--apricot);font-weight:700}
.scale button.on::after{
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;background:var(--apricot);
  box-shadow:0 0 0 5px rgba(242,168,106,.15),0 6px 16px -7px rgba(242,168,106,.95);
}
.scale button:active::after{transform:scale(1.3)}
.scale-lab{display:flex;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ============================ Session ============================ */
.session{gap:10px}
.sess-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px}
.breath{
  width:min(62vw,230px);aspect-ratio:1;border-radius:50%;margin:0 auto;
  display:grid;place-items:center;position:relative;
  background:radial-gradient(circle,rgba(242,168,106,.16),rgba(185,163,227,.06) 58%,transparent 72%);
  animation:breathe 8s ease-in-out infinite;
}
.breath::before{
  content:"";position:absolute;inset:14%;border-radius:50%;
  border:1px solid rgba(255,244,235,.12);
}
.breath i{
  width:34%;aspect-ratio:1;border-radius:50%;display:block;
  background:radial-gradient(circle,rgba(255,244,235,.86),rgba(242,168,106,.42) 66%,transparent 74%);
  animation:breathe 8s ease-in-out infinite reverse;
}
@keyframes breathe{0%,100%{transform:scale(.86)}50%{transform:scale(1.08)}}

/* Unwind's session centre. Settle gets a breathing orb because paced breathing is the
   instruction there; Unwind gets an ambient bloom in the warm accent — something alive to
   rest your eyes on while the music plays, with nothing to obey. */
.nowbloom{
  width:min(58vw,214px);aspect-ratio:1;border-radius:50%;margin:0 auto;
  display:grid;place-items:center;position:relative;
  background:radial-gradient(circle,rgba(216,169,198,.20),rgba(242,168,106,.07) 56%,transparent 72%);
  animation:breathe 10s ease-in-out infinite;
}
.nowbloom::before{content:"";position:absolute;inset:16%;border-radius:50%;border:1px solid rgba(255,244,235,.10)}
.nowbloom-in{
  width:36%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  color:rgba(255,244,235,.55);
  background:radial-gradient(circle,rgba(255,244,235,.26),rgba(216,169,198,.15) 62%,transparent 74%);
  animation:breathe 10s ease-in-out infinite reverse;
}
.nowbloom-in svg{width:42%;height:42%}

.peek{position:relative;height:44px;display:grid;place-items:center;margin-bottom:2px}
.peek-timer,.peek-hint{
  grid-area:1/1;transition:opacity 240ms var(--e-out),transform 240ms var(--e-out);
}
.peek-timer{
  font-size:30px;font-weight:300;letter-spacing:.01em;font-variant-numeric:tabular-nums;
  color:var(--ink);opacity:0;transform:translateY(4px);
}
/* full opacity, not a faded --ink-3: at opacity .62 this measured 3.0:1 against the scene */
.peek-hint{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.session.peeking .peek-timer{opacity:1;transform:none}
.session.peeking .peek-hint{opacity:0}

.sess-bar{display:flex;gap:10px;padding-top:2px}
.sess-bar .btn{flex:1;border-radius:var(--r-ctrl)}
.sess-bar .btn.end{flex:0 0 34%}

.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:rgba(14,10,12,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.overlay-in{max-width:400px;width:100%;border-radius:var(--r-card);padding:26px 22px;display:flex;flex-direction:column;gap:14px;text-align:left}
.overlay-in .display{font-size:30px}

/* ============================ Check-in ============================ */
.checkin{gap:12px}
.fits{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fit{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  min-height:92px;border-radius:var(--r-card);padding:14px 8px;color:var(--ink-2);
  transition:all var(--t-press) var(--e-out);
}
.fit svg{width:24px;height:24px;color:var(--ink-3);transition:color var(--t-press) var(--e-out)}
.fit b{font-size:14px;font-weight:650}
.fit:active{transform:scale(.97)}
.fit.on{border-color:rgba(242,168,106,.55);background-color:rgba(242,168,106,.09);color:var(--ink)}
.fit.on svg{color:var(--apricot)}
.thanks{text-align:center;color:var(--ink-3);margin-bottom:2px}
#checkinDone{opacity:.82;transition:opacity var(--t-page) var(--e-out),box-shadow var(--t-page) var(--e-out);box-shadow:inset 0 1px 0 rgba(255,255,255,.42)}
#checkinDone.ready{opacity:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 14px 30px -16px rgba(242,168,106,.75)}

/* ============================ Result ============================ */
.result{gap:16px}
.result .spacer{min-height:10px}
.story-head{display:flex;flex-direction:column;gap:8px}
.headline{font-size:clamp(27px,7.6vw,33px);line-height:1.12}
.headline em{font-style:normal;color:var(--ink)}
.headline.teal em{color:var(--calm)}
.headline.coral em{color:var(--rise)}
.headline .n{font-variant-numeric:tabular-nums;font-weight:500}
.curvebox{margin:0;display:flex;flex-direction:column;gap:6px}
.curve{width:100%;height:auto;display:block;overflow:visible}
.curve-cap{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between}
.curve .line{fill:none;stroke:var(--calm);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.curve .line.rise{stroke:var(--rise)}
.curve .area{stroke:none}
.curve .base{stroke:rgba(255,244,235,.10);stroke-width:1;stroke-dasharray:2 4}
.curve .cap{fill:var(--calm)}
.curve .cap.rise{fill:var(--rise)}
.curve .capring{fill:none;stroke:var(--calm);stroke-opacity:.35;stroke-width:1.25}
.curve .capring.rise{stroke:var(--rise)}
.curve .mk{font-family:var(--sans);font-size:10px;font-weight:650;letter-spacing:.04em;fill:var(--ink-3)}
.curve .mk.hi{fill:var(--ink-2)}
.reveal .line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 600ms var(--e-out) 60ms forwards}
.reveal .area,.reveal .cap,.reveal .capring,.reveal .mk{opacity:0;animation:fadeIn 300ms var(--e-out) 460ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}

.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.facts>div{border-radius:var(--r-ctrl);padding:11px 13px}
.facts>div:last-child:nth-child(odd){grid-column:1/-1}
.facts b{display:block;font-size:17px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.25}
.facts b.calm{color:var(--calm)} .facts b.rise{color:var(--rise)}
.facts small{display:block;margin-top:3px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.usualrow{display:flex;align-items:center;gap:10px}
.usual-dots{display:flex;gap:5px;flex:none}
.usual-dots i{width:8px;height:8px;border-radius:50%;background:var(--glass-hi)}
.usual-dots i.on{background:var(--apricot)}
.usual-tx{font-size:12.5px;color:var(--ink-3)}
.footnote{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qbadge{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.qbadge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.qbadge.ok::before{background:var(--calm)}
.qbadge.poor::before{background:var(--rise)}
.footnote .meta{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink-3);margin-left:auto}

/* ============================ History ============================ */
.list{display:flex;flex-direction:column;gap:8px}
.list+.spacer{flex:1;min-height:10px}
.list .wk{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  padding:12px 2px 2px;
}
.list .wk:first-child{padding-top:2px}
.list .card{
  display:flex;align-items:center;gap:12px;border-radius:var(--r-ctrl);padding:12px 14px;
}
.list .h-tx{flex:1;min-width:0}
.list .h-tx b{display:block;font-size:14px;font-weight:650;color:var(--ink)}
.list .h-tx small{display:block;font-size:11.5px;line-height:1.35;color:var(--ink-3);margin-top:2px}
.list .spark{width:56px;height:22px;flex:none;overflow:visible}
.list .spark path{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.list .spark path.calm{stroke:var(--calm)}
.list .spark path.rise{stroke:var(--rise)}
.list .delta{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;flex:none;min-width:38px;text-align:right}
.list .delta.calm{color:var(--calm)}
.list .delta.rise{color:var(--rise)}
.list .delta.none{color:var(--ink-3);font-weight:500}

/* ============================ Now-playing card (Unwind) ============================
   Pre-rest and session share one card: cover placeholder, title/artist, the "why this
   track" line, four always-live controls, then the backend's own player underneath.
   Nothing here waits for a track to end — Next and Slower switch immediately. */
.dock{position:relative;z-index:3;max-width:var(--wrap);width:100%;margin:0 auto;padding:0 var(--pad) 14px}
.dock-in{border-radius:var(--r-card);padding:13px 13px 12px;display:flex;flex-direction:column;gap:10px}
.npcard{opacity:1;transition:opacity 320ms var(--e-out),transform 320ms var(--e-out)}
.npcard.fading{opacity:.35}
.npcard.arriving{animation:npIn 420ms var(--e-out) both}
@keyframes npIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.np{display:flex;gap:12px;align-items:center}
/* Cover placeholder, tinted with the scene's own accent rather than a stock grey square. */
.np .art{
  width:46px;height:46px;border-radius:14px;flex:none;position:relative;overflow:hidden;
  display:grid;place-items:center;color:rgba(255,244,235,.55);
  background:
    radial-gradient(120% 120% at 28% 22%, rgba(242,168,106,.55), transparent 62%),
    radial-gradient(120% 120% at 78% 86%, rgba(216,169,198,.5), transparent 64%),
    linear-gradient(150deg,#2a1c22,#170f14);
  box-shadow:inset 0 0 0 1px rgba(255,244,235,.14),0 8px 18px -12px rgba(0,0,0,.9);
}
.np .art svg{width:22px;height:22px}
.np-tx{flex:1;min-width:0}
.np-tx b{display:block;font-size:14.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-tx small{display:block;margin-top:2px;font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-why{
  margin:-2px 0 0;font-size:12px;line-height:1.4;color:var(--dusk);
  display:flex;align-items:center;gap:7px;
}
.np-why::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;flex:none}
.np-note{margin:-4px 0 0;font-size:11px;line-height:1.4;color:var(--ink-3)}

.npctl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.npbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:54px;padding:6px 2px;border-radius:15px;
  border:1px solid var(--glass-edge);background:var(--glass);color:var(--ink-2);
  transition:transform var(--t-press) var(--e-out),background var(--t-press) var(--e-out),border-color var(--t-press) var(--e-out),color var(--t-press) var(--e-out);
}
.npbtn svg{width:20px;height:20px;flex:none}
.npbtn span{font-size:10.5px;font-weight:650;letter-spacing:.06em;line-height:1}
.npbtn:hover{border-color:var(--glass-hi);color:var(--ink)}
.npbtn:active{transform:scale(.95)}
/* Like: the one warm fill in the card. */
#likeBtn[aria-pressed="true"]{
  background:rgba(242,168,106,.16);border-color:rgba(242,168,106,.55);color:var(--ink);
}
#likeBtn[aria-pressed="true"] svg{color:var(--apricot);fill:rgba(242,168,106,.85);stroke:var(--apricot)}
#shuffleBtn[aria-pressed="true"]{
  background:rgba(216,169,198,.15);border-color:rgba(216,169,198,.5);color:var(--ink);
}
#shuffleBtn[aria-pressed="true"] svg{color:var(--dusk)}
.npctl.off{opacity:.45;pointer-events:none}

.spot{border-radius:14px;overflow:hidden;min-height:76px}
/* The SDK and owned backends mount no player of their own, so the glass box would frame one
   line of text like an empty input. `bare` drops the chrome and lets the line just sit there. */
.spot.bare{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
.spot.bare,body.withdock .spot.bare{min-height:0}
.spot.bare .fb{padding:1px 2px 0}
.spot iframe{display:block;width:100%;border:0}
.spot .fb{padding:11px 12px;font-size:11.5px;line-height:1.5;color:var(--ink-2)}
.spot .fb a{color:var(--apricot)}
.spot .fb .btn{min-height:44px;margin-top:6px;font-size:13px;padding:0 16px}
.dock .fine{font-size:11px;line-height:1.4}

/* ============================ Breathing words (Unwind pre-rest) ============================ */
.breathwords{
  margin:0 auto;text-align:center;min-height:26px;
  font-family:var(--display);font-weight:340;font-variation-settings:"opsz" 40;
  font-size:19px;letter-spacing:.01em;color:var(--ink-2);
  opacity:1;transition:opacity 900ms var(--e-out);
}
.breathwords.out{opacity:.18}

/* ============================ Research forms ============================ */
.stai,.exp{
  border-radius:var(--r-ctrl);padding:13px 14px;display:flex;flex-direction:column;gap:9px;
  background-color:var(--glass-base);background-image:linear-gradient(180deg,var(--glass),rgba(255,244,235,.02));
  border:1px solid var(--glass-edge);
}
.stai .tx b,.exp .tx b{display:block;font-size:14px;font-weight:650;color:var(--ink)}
.stai .tx small,.exp .tx small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.stai .q,.exp .q{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.q button{
  min-height:46px;padding:6px 4px;border-radius:12px;line-height:1.25;
  border:1px solid var(--glass-edge);background:var(--glass);color:var(--ink-2);
  font-size:11.5px;font-weight:600;
  transition:all var(--t-press) var(--e-out);
}
.q button:active{transform:scale(.96)}
.q button.on{border-color:var(--apricot);background:rgba(242,168,106,.14);color:var(--ink)}

/* ---------- quiet disclosure ("Advanced") ---------- */
.disclose{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 2px;
  font-size:12.5px;font-weight:600;color:var(--ink-3);
  border-bottom:1px solid var(--glass-edge);border-radius:0;
  transition:color var(--t-press) var(--e-out),border-color var(--t-press) var(--e-out);
}
.disclose:hover{color:var(--ink-2);border-bottom-color:var(--glass-hi)}
.disclose::after{content:"+";font-size:14px;font-weight:600;line-height:1}
.disclose[aria-expanded="true"]::after{content:"–"}
.disclose[aria-expanded="true"]{color:var(--ink-2);border-bottom-color:var(--apricot)}
#spotifyAdv{display:flex;flex-direction:column;gap:8px;margin-top:2px}

/* ============================ Toast ============================ */
.toast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:60;max-width:min(92vw,460px);
  padding:12px 16px;border-radius:16px;font-size:13.5px;line-height:1.4;color:var(--ink);
  background-color:rgba(28,20,24,.92);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.9);
  animation:toastIn 220ms var(--e-out) both;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ============================ Fit / responsive ============================ */
/* Unwind keeps the dock in flow under main; let the view shrink to its content
   so the dock stays above the fold on a 375×812 phone. */
/* Unwind keeps the dock in flow under main. Only pre-rest has to give up height —
   arc + copy + the 0-10 scale is the tallest screen in the app and would otherwise push
   the dock below the fold on a 375x812 phone. The session view stays full height so its
   controls do not jam against the header. */
/* The now-playing card is the point of Unwind, so pre-rest is what gives up height for it:
   a smaller arc, tighter rhythm, a one-line lead (the breathing words carry the tone). */
body.withdock main{padding-bottom:6px;flex:1}
body.withdock .prerest{gap:9px}
/* Both spacers stay in play so spare height is shared above and below the arc — otherwise a
   tall phone leaves one dead void between the calm scale and the card. */
body.withdock .prerest>.pre-top+.spacer{display:block;flex:.8 1 0;min-height:0}
body.withdock .prerest .scalewrap+.spacer{flex:1 1 0;min-height:0}
body.withdock .prerest .lead{font-size:13px}
/* The arc takes whatever height the card leaves it, instead of the screen keeping a fixed
   void between the calm scale and the End button on a taller phone. */
body.withdock #preRing{width:104px;height:104px;margin:2px auto 0}
body.withdock .arc-c b{font-size:27px}
body.withdock .arc-c small{margin-top:3px;font-size:9.5px}
body.withdock .breathwords{font-size:17px;min-height:22px}
body.withdock .scalewrap{gap:6px}
body.withdock .scale{row-gap:8px}
body.withdock .scale button{min-height:46px}
body.withdock .dock{padding-bottom:10px}
body.withdock .dock-in{gap:9px;padding:11px 12px 10px}
body.withdock .breath{width:min(44vw,158px)}
body.withdock .nowbloom{width:min(46vw,176px)}
body.withdock .spot{min-height:56px}
/* Short phones (iPhone SE → 14): the card keeps every control, the chrome around it shrinks,
   and the embed drops to Spotify's compact one-row player — all a "tap play" surface needs
   once the card above already names the track and carries Like / Slower / Next / Shuffle. */
@media (max-height:845px){
  body.withdock .npbtn{min-height:46px;gap:4px}
  body.withdock .np .art{width:40px;height:40px}
  body.withdock .spot iframe{height:80px}
}
/* Taller phones can afford a bigger countdown, which is what the eye rests on for the minute. */
@media (min-height:830px){
  body.withdock #preRing{width:126px;height:126px}
  body.withdock .arc-c b{font-size:30px}
}

@media (max-width:359px){
  :root{--pad:14px}
  .facts{grid-template-columns:1fr}
  .fieldrow{gap:12px}
}
@media (min-height:800px){
  .greet{padding-top:16px}
  .hero{min-height:116px}
}

/* ============================ Reduced motion ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .breath,.breath i,.nowbloom,.nowbloom-in,.wc-orb::before,.wc-orb i,.follow .dot{animation:none;transform:none}
  .reveal .line{stroke-dasharray:none;stroke-dashoffset:0}
  .reveal .area,.reveal .cap,.reveal .capring,.reveal .mk{opacity:1}
}