/* Somi PWA prototype - app styles. Ported from design/themes-luxe2/src/css.py (frame templates) to a responsive, safe-area aware layout.
   Colours come ONLY from somi-themes.css custom properties. Flat: solid fills, no blur, no shadow, no gradient. */
@font-face{font-family:"Newsreader";src:url(fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--page);overscroll-behavior:none;touch-action:manipulation}
:root{--spring:cubic-bezier(.25,.3,.15,1);--exit:cubic-bezier(.4,0,1,1);--ease:var(--spring)} /* motion tokens: DESIGN_SPEC §8 */
@supports (transition-timing-function:linear(0, 1)){:root{--spring:linear(0, 0.054, 0.171, 0.307, 0.438, 0.555, 0.653, 0.734, 0.797, 0.847, 0.886, 0.915, 0.937, 0.954, 0.966, 0.975, 0.982, 0.987, 0.991, 0.993, 1)}}
/* camera ink / viewfinder (§7.14), used by the feature-intro rings */
:root,[data-theme="vodka"]{--cam-ink:#E3E6E9;--cam-bg:#0F1215}[data-theme="gin-tonic"]{--cam-ink:#D5DDD0;--cam-bg:#0E1713}[data-theme="primitivo-red"]{--cam-ink:#E6D7C6;--cam-bg:#160A0C}[data-theme="dark-stout"]{--cam-ink:#DDD2C0;--cam-bg:#0C0A09}
html:not(.ready) *,html:not(.ready) *::before,html:not(.ready) *::after{transition:none!important}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
svg{display:block;flex:none}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- app frame ---------- */
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--page);max-width:520px;margin:0 auto}
@media (min-width:521px){#app{border-left:var(--hair) solid var(--line);border-right:var(--hair) solid var(--line)}}
.top2{flex:none;position:relative;z-index:30;view-transition-name:top;background:var(--page);padding-top:env(safe-area-inset-top);border-bottom:var(--hair) solid var(--page)}
.scrolled .top2{border-bottom-color:var(--line)}
.hdr2{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.cbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--surface);border:var(--hair) solid var(--line)}
.wm{font:500 15px/1 var(--display);letter-spacing:.46em;text-transform:uppercase;padding:0 0 0 .46em;color:var(--ink)}
.main{flex:1;min-height:0;position:relative;overflow:hidden;view-transition-name:screen}
.view{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* ---------- thread ---------- */
.thread{min-height:100%;display:flex;flex-direction:column;padding:12px 24px 16px}
.thread.start{padding-top:26px}
.thread.hero-on{padding:26px 28px 16px}
.thread .sp{flex:0 0 0px}
.thread .sp-top{flex-grow:1}
.thread.start .sp-top,.thread.hero-on .sp-top{flex-grow:0}
.thread.start .sp-bot,.thread.hero-on .sp-bot{flex-grow:1}
.msgs{display:flex;flex-direction:column;position:relative}
.msg.mu{display:flex;flex-direction:column;align-items:flex-end}
.sm{font-family:var(--serif);color:var(--ink);font-optical-sizing:auto;overflow-wrap:break-word} /* size changes swap inside a fade (app.js swapClass), never tween */
.sm.big{font-size:31px;line-height:38px;font-weight:300;letter-spacing:-.012em;margin-top:24px}
.sm.mid{font-size:23px;line-height:31px;font-weight:300;color:var(--ink-2);margin-top:12px}
.sm.prev{font-size:20px;line-height:28px;font-weight:300;color:var(--ink-2);margin-top:12px}
.sm.same{margin-top:8px}
.hero-on .sm.big{font-size:38px;line-height:46px;margin-top:0}
.hero-on .sm.mid{margin-top:14px}
.sm em{font-style:italic}
.up{align-self:flex-end;margin-top:20px;max-width:82%;padding:10px 18px 11px;border-radius:24px;font:400 17.5px/23px var(--serif);background:var(--user);color:var(--on-user);border:var(--user-bw) solid var(--user-stroke);overflow-wrap:break-word}
.up.ph{padding:5px 5px 0;border-radius:26px;width:240px}
.up.ph .cap{padding:9px 12px 10px}
.up.ph .grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:20px;overflow:hidden}
.up.ph .grid.one{grid-template-columns:1fr}
.up.ph .grid div{position:relative;aspect-ratio:3/4;background:var(--surface)}
.up.ph .grid.one div{aspect-ratio:4/3}
.up.ph .grid img{width:100%;height:100%;object-fit:cover;display:block}
.up.ph .more{position:absolute;inset:0;display:grid;place-items:center;background:var(--scrim);color:#fff;font:600 17px/1 var(--sans)}
.up.ph .nocap{height:5px}
.ustat{align-self:flex-end;margin:6px 8px 0 0;font:500 11.5px/1 var(--sans);color:var(--ink-3)}
.ustat b{font-weight:600;color:var(--ink-2)}
.ustat:empty{display:none}
.msg.sys{align-self:center;margin-top:18px;max-width:92%;text-align:center;font:400 13.5px/19px var(--sans);color:var(--ink-2);padding:8px 14px;border-radius:14px;border:var(--hair) dashed var(--line-strong);background:var(--page)}
.sepl{align-self:center;margin:24px 0 0;font:500 11px/1 var(--sans);color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase}
.saved{align-self:flex-start;margin-top:14px;min-width:260px;max-width:100%;border-radius:20px;background:var(--surface);border:var(--hair) solid var(--line);padding:9px 14px 9px 10px;display:flex;gap:11px;align-items:center}
.saved .ml{width:38px;height:38px;border-radius:10px;flex:none;background:var(--surface-2);display:grid;place-items:center}
.saved .t{flex:1;min-width:0}
.saved .t1{font:600 18px/21px var(--display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved .t2{font:400 12.5px/17px var(--sans);color:var(--ink-2);white-space:nowrap}
.saved .ok{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--user);color:var(--on-user);border:var(--btn-bw) solid var(--btn-stroke)}
.ty2{margin-top:24px}
.ty2 .dline{display:flex;align-items:flex-end;gap:14px}
.ty2 .t1{font:300 31px/38px var(--serif);color:var(--ink)}
.ty2 .t2{font:italic 300 19px/26px var(--serif);color:var(--ink-2);margin-top:8px}
.dots{display:flex;gap:4px;align-items:flex-end;height:22px;margin-bottom:6px;flex:none}
.dots span{display:block;animation:bob 1.2s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ty2 .steps{display:flex;gap:6px;margin-top:14px;align-items:center}
.ty2 .steps i{display:block;width:30px;height:4px;border-radius:2px;background:var(--surface-2)}
.ty2 .steps i.on{background:var(--accent)}
.ty2 .steps span{font:500 12px/1 var(--sans);color:var(--ink-3);margin-left:6px}

/* ---------- pick cards ---------- */
.pk{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.card{position:relative;padding:12px 18px 12px;border-radius:var(--r-card);background:var(--surface);border:var(--hair) solid var(--line);color:var(--ink)}
.card.top{background:var(--card-fill);border:var(--card-bw) solid var(--card-stroke)}
.card.c{padding:8px 18px 12px}
.card .drp{position:absolute;top:12px;right:18px}
.card .lab{display:flex;align-items:center;gap:7px;font:500 11px/14px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
.card .lab .how{font-weight:400;color:var(--ink-2);text-transform:none;letter-spacing:.005em;font-size:12.5px}
.card .hd{display:flex;gap:10px;justify-content:space-between;align-items:baseline;margin-top:8px}
.card .nm{font:500 23px/25px var(--display);color:var(--ink);letter-spacing:.005em}
.card.top .nm{font-size:27px;line-height:29px}
.card .pr{font:500 16.5px/22px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.card .sub{font:400 13px/18px var(--sans);color:var(--ink-2);margin-top:3px}
.card .sens{font:300 16.5px/22px var(--serif);color:var(--ink);margin-top:6px}
.card.c .sens{font-size:16px;line-height:21px;margin-top:3px}
.card.c .toprow{display:flex;justify-content:space-between;align-items:center;min-height:34px}
.card.c .hd{margin-top:5px}
.card .unc2{display:flex;gap:7px;margin-top:9px;font:400 13px/18px var(--sans);color:var(--ink-2)}
.card .unc2 svg{color:var(--accent-text);margin-top:1px}
.card .drink{margin-top:10px;padding-top:9px;border-top:var(--hair) solid var(--line);font:500 13.5px/18px var(--sans);color:var(--ink-2)}
.card .dsum{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;font:inherit;color:inherit}
.card .dsum svg{transition:transform .32s var(--ease)}
.card .dsum.open svg{transform:rotate(180deg)}
.card .dbody p{font:300 16px/22px var(--serif);color:var(--ink);padding-top:6px}
.btn{display:grid;place-items:center;border-radius:var(--r-pill);background:var(--user);color:var(--on-user);border:var(--btn-bw) solid var(--btn-stroke);font:600 16px/1 var(--sans);width:100%}
.card .btn{margin-top:10px;height:42px}
.card .btn.sm{height:32px;font-size:13.5px;padding:0 14px;margin:0;width:auto}
.card .nm,.card .pr,.card .sens{transition:color .18s ease}
.card.chosen .nm,.card.chosen .pr,.card.chosen .sens{color:var(--ink-2)}
.btn .bl{display:inline-block}
.card .btn:disabled{background:var(--surface);color:var(--ink-3);border:var(--hair) solid var(--line)}

/* ---------- suggested replies ---------- */
.reps{position:relative;display:flex;flex-wrap:wrap;gap:8px;padding:4px 20px 10px;align-items:center}
.rp{height:40px;padding:0 18px;border-radius:var(--r-pill);display:flex;align-items:center;gap:7px;font:400 17px/1 var(--serif);color:var(--ink);white-space:nowrap;background:var(--surface);border:var(--hair) solid var(--line)}
.rp.go{background:var(--user);border:var(--btn-bw) solid var(--btn-stroke);font-weight:500;color:var(--on-user)}
.rp .ck{display:none}
.reps.multi .rp .ck{display:grid;place-items:center;width:0;margin-right:-7px;opacity:0;overflow:hidden;transition:width .355s var(--spring),margin .355s var(--spring),opacity .2s ease}
.reps.multi .rp.on .ck{width:13px;margin-right:0;opacity:1}
.reps.multi .rp.on{background:var(--user);border:var(--btn-bw) solid var(--btn-stroke);color:var(--on-user)}
.lnk{font:500 15.5px/1 var(--sans);color:var(--accent-text);padding:0 10px;height:40px;display:flex;align-items:center}

/* ---------- dock ---------- */
.dock{flex:none;position:relative;z-index:25;view-transition-name:dock;background:var(--page);border-top:var(--hair) solid var(--page);padding-bottom:max(8px,env(safe-area-inset-bottom))}
.scrolled .dock{border-top-color:var(--line)}
.tray{display:flex;gap:8px;align-items:center;padding:8px 16px 6px;overflow-x:auto}
.tlist{position:relative;display:flex;gap:8px;align-items:center}
.tray .th{position:relative;width:48px;height:62px;border-radius:11px;overflow:hidden;flex:none;border:var(--hair) solid var(--line-strong);background:var(--surface)}
.tray .th img{width:100%;height:100%;object-fit:cover}
.tray .th .rm{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:var(--page);color:var(--ink);display:grid;place-items:center;border:var(--hair) solid var(--line-strong)}
.tray .add{width:48px;height:62px;border-radius:11px;flex:none;border:var(--hair) dashed var(--line-strong);display:grid;place-items:center;color:var(--ink-2);overflow:hidden;transition:width .26s var(--ease),opacity .2s ease,margin .26s var(--ease),transform .3s var(--spring)}
.tray .add.gone{width:0;opacity:0;margin-left:-8px;border-width:0;pointer-events:none}
.tray .cnt{display:inline-block}
.tray .cnt{margin-left:4px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.inrow{display:flex;align-items:center;gap:10px;padding:4px 16px 0;min-height:58px}
.cam{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;background:var(--user);color:var(--on-user);border:var(--btn-bw) solid var(--btn-stroke)}
.cam::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;transform:scale(.92);transition:opacity .32s ease,transform .42s var(--ease)}
.cam::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1.5px solid var(--surface-2);opacity:0;transform:scale(.92);transition:opacity .32s ease,transform .42s var(--ease)}
.cam.pulse::before,.cam.pulse::after{opacity:1;transform:none}
.fld2{flex:1;min-width:0;height:52px;border-radius:var(--r-pill);display:flex;align-items:center;padding:0 6px 0 20px;background:var(--surface);border:var(--hair) solid var(--line)}
.fld2 input{flex:1;min-width:0;border:0;background:transparent;outline:0;font:400 17.5px/23px var(--serif);color:var(--ink);caret-color:var(--accent)}
.fld2 input::placeholder{font-style:italic;color:var(--ink-3);opacity:1}
.rnd{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);flex:none;background:var(--page);border:var(--hair) solid var(--line)}
.rnd{position:relative;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .3s var(--spring)}
.rnd.send{background:var(--user);color:var(--on-user);border:var(--btn-bw) solid var(--btn-stroke)}
.rnd .i-mic,.rnd .i-send{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .18s ease,transform .26s var(--ease)}
.rnd .i-send{opacity:0;transform:scale(.55) rotate(-25deg)}
.rnd.send .i-send{opacity:1;transform:none}
.rnd.send .i-mic{opacity:0;transform:scale(.55)}
.legal{text-align:center;font:400 11.5px/14px var(--sans);color:var(--ink-2);padding:7px 0 2px}
.nav{position:relative;margin:6px 22px 0;height:60px;border-radius:var(--r-pill);padding:5px;display:flex;gap:2px;background:var(--nav-fill);border:var(--nav-bw) solid var(--nav-stroke)}
.nav-ind{position:absolute;left:0;top:5px;bottom:5px;width:0;border-radius:var(--r-pill);background:var(--nav-active-fill);border:var(--nav-active-bw) solid var(--nav-active-stroke);pointer-events:none;will-change:transform;transition:transform .355s var(--spring),width .355s var(--spring)}
.no-anim,.no-anim *{transition:none!important}
.ni{position:relative;z-index:1;flex:1;border-radius:var(--r-pill);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:500 10px/12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);transition:none}
.ni:active:not(:disabled){transform:none}
/* segmented-control technique: an active-colour copy of the items clipped to the pill, moving with it (355ms spring) */
.nav-on{position:absolute;inset:5px;display:flex;gap:2px;pointer-events:none;z-index:2;clip-path:inset(0 calc(100% - var(--r,0px)) 0 var(--l,0px) round 999px);transition:clip-path .355s var(--spring)}
.nj{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:500 10px/12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
[data-mode="dark"] .nj{color:var(--on-user)}
.dock.tabs .inrow,.dock.tabs .legal,.dock.tabs .tray,.dock.tabs .reps,.dock.tabs .hint{display:none}

/* ---------- sheets (one question each) ---------- */
.dim{position:fixed;inset:0;background:var(--scrim);z-index:60;touch-action:none}
.sh2{position:fixed;left:0;right:0;bottom:0;z-index:70;max-width:520px;margin:0 auto;padding:0 24px max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-sheet) var(--r-sheet) 0 0;border:var(--hair) solid var(--line);border-bottom:0;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;contain:layout paint;translate:0 calc(-1 * var(--kb,0px));transition:translate .25s cubic-bezier(.32,.72,0,1)}
.sh2.moving{will-change:transform}
/* feature intro (frame 21): the sheet floats above the lifted nav */
.sh2.fi{bottom:var(--fi-b,0px);left:12px;right:12px;border-radius:var(--r-sheet);border-bottom:var(--hair) solid var(--line);padding-bottom:22px;max-height:calc(92dvh - var(--fi-b,0px))}
.newb{display:inline-flex;align-items:center;height:24px;padding:0 11px;margin-top:26px;border-radius:var(--r-pill);border:1px solid var(--ink);color:var(--ink);font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
[data-mode="dark"] .newb{background:var(--user);border-color:var(--user);color:var(--on-user)}
.newb+h2{margin-top:14px!important}
.fi-nav{position:fixed!important;z-index:66;pointer-events:none}
.fi-rings{position:fixed;z-index:65;pointer-events:none;overflow:visible}
.fi-rings circle{transform-box:fill-box;transform-origin:center}
.svp{position:relative;display:flow-root;overflow:hidden;margin:0 -24px;padding:0 24px}
.spage{display:flow-root}
.spage.incoming{position:absolute;left:24px;right:24px;top:0}
@keyframes fade{from{opacity:0}to{opacity:1}}
.grab{position:relative;width:auto;height:24px;margin:0 -24px -13px;flex:none;touch-action:none;cursor:grab;z-index:1}
.grab::after{content:"";position:absolute;left:50%;top:8px;width:32px;height:3px;margin-left:-16px;border-radius:3px;background:var(--line-strong)}
.sh2 .xb{position:absolute;z-index:2;right:16px;top:16px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:var(--page);transition:opacity .2s ease,transform .3s var(--spring)}
.sh2 .xb.off{opacity:0;pointer-events:none}
.sh2 h2{font:300 33px/40px var(--serif);color:var(--ink);margin-top:30px;letter-spacing:-.005em;padding-right:28px}
.sh2 .sub{font:400 15.5px/22px var(--sans);color:var(--ink-2);margin-top:10px}
.opt{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 0;font:450 17px/23px var(--sans);color:var(--ink);width:100%;text-align:left}
.opt+.opt{border-top:var(--hair) solid var(--line)}
.opt .sub2{display:block;font:400 13.5px/18px var(--sans);color:var(--ink-2);margin-top:2px}
.rad{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-strong);flex:none;display:grid;place-items:center;color:var(--on-accent);transition:background-color .18s ease,border-color .18s ease}
.rad svg{opacity:0;transform:scale(.4);transition:opacity .18s ease,transform .24s var(--ease)}
.rad.on svg{opacity:1;transform:none}
.rad.on{background:var(--accent);border-color:var(--accent)}
.cta{height:56px;border-radius:var(--r-pill);background:var(--user);color:var(--on-user);border:var(--btn-bw) solid var(--btn-stroke);font:600 17px/1 var(--sans);display:grid;place-items:center;width:100%;margin-top:26px;flex:none}
.cta{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .3s var(--spring)}
.cta.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.cta:disabled{background:var(--surface);color:var(--ink-3);border:var(--hair) solid var(--line)}
[data-mode="light"] .sh2 .cta:not(:disabled){background:var(--page)}
.qlink{text-align:center;font:500 16px/1 var(--sans);color:var(--accent-text);padding:20px 0 4px;width:100%}
.sfield{height:60px;width:100%;border-radius:var(--r-in);margin-top:22px;padding:0 22px;font:300 24px/30px var(--serif);color:var(--ink);background:var(--page);border:2px solid var(--accent);outline:0;caret-color:var(--accent)}
.sfield::placeholder{color:var(--ink-3);font-style:italic}
.locked{position:fixed;inset:0;z-index:55;background:var(--page)}

/* ---------- tabs ---------- */
.tab{padding:0 0 28px}
.tab h1{font:300 42px/48px var(--serif);color:var(--ink);padding:0 24px;margin-top:14px;letter-spacing:-.01em}
.tab h3{font:300 28px/34px var(--serif);color:var(--ink);padding:0 24px;margin-top:26px;display:flex;justify-content:space-between;align-items:baseline}
.tab h3 button{font:500 15px/1 var(--sans);color:var(--accent-text)}
.tab h4{font:300 22px/28px var(--serif);color:var(--ink);padding:0 28px;margin-top:24px}
.tab .lead{padding:0 24px;margin-top:6px;font:400 15px/21px var(--sans);color:var(--ink-2)}
.thero{margin:6px 24px 0;padding:6px 0 22px;border-bottom:var(--hair) solid var(--line)}
.thero h1{padding:0;margin-top:14px}
.thero .lead{padding:0;margin-top:8px}
.car{display:flex;gap:12px;padding:16px 24px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.car::-webkit-scrollbar{display:none}
.cc{width:236px;flex:none;border-radius:var(--r-card);padding:12px 12px 15px;background:var(--surface);border:var(--hair) solid var(--line);scroll-snap-align:start}
.tile{border-radius:16px;position:relative;overflow:hidden}
.pills{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.opill{height:26px;padding:0 10px;border-radius:var(--r-pill);border:var(--hair) solid var(--line-strong);font:500 12px/24px var(--sans);color:var(--ink-2);white-space:nowrap}
.opill.st{border-color:var(--accent-text);color:var(--accent-text)}
.opill.wait{border-style:dashed;border-color:var(--accent-text);color:var(--accent-text)}
.cc .ct{font:600 21px/25px var(--display);color:var(--ink);margin-top:10px}
.cc .cd{font:400 14px/20px var(--sans);color:var(--ink-2);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rrow{display:flex;gap:14px;align-items:center;padding:10px 0;margin:0 24px}
.rrow+.rrow{border-top:var(--hair) solid var(--line)}
.rrow .rt{flex:1;min-width:0}
.rrow .rn{font:600 20px/23px var(--display);color:var(--ink)}
.rrow .rm{font:400 13.5px/19px var(--sans);color:var(--ink-2);margin-top:1px}
.empty{padding:0 24px;margin-top:10px;font:400 16px/23px var(--sans);color:var(--ink-2)}
.emptyc{margin:20px 24px 0;border-radius:var(--r-card);padding:28px 24px;background:var(--surface);border:var(--hair) solid var(--line)}
.emptyc .e1{font:300 32px/38px var(--serif);color:var(--ink)}
.emptyc .e2{font:400 16px/23px var(--sans);color:var(--ink-2);margin-top:10px}
.emptyc .rp{margin-top:18px;display:inline-flex}
.tg2{position:relative;display:flex;gap:8px;flex-wrap:wrap;padding:0 24px;margin-top:14px}
.tg2 .w{height:40px;padding:0 17px;border-radius:var(--r-pill);display:flex;align-items:center;gap:6px;font:400 19px/1 var(--serif);color:var(--ink);background:var(--surface);border:var(--hair) solid var(--line)}
.tg2 .w.g1{background:var(--user);border:var(--btn-bw) solid var(--btn-stroke);font-weight:500;color:var(--on-user)}
.tg2 .w.off{color:var(--ink-2);background:var(--page);border:var(--hair) dashed var(--line-strong)}
.tg2 .add{height:40px;padding:0 14px;border-radius:var(--r-pill);border:var(--hair) dashed var(--accent-text);color:var(--accent-text);background:var(--page);font:500 14px/1 var(--sans)}
.tg2 .addin{height:40px;width:150px;padding:0 14px;border-radius:var(--r-pill);border:1.5px solid var(--accent);background:var(--page);font:400 17px/1 var(--serif);outline:0}
.tsent{width:100%;text-align:left}
.tg2 .chips{display:contents}
.lr .ltt{display:inline-block}
/* more list */
.lst{margin:12px 16px 0;border-radius:var(--r-card);background:var(--surface);border:var(--hair) solid var(--line);overflow:hidden}
.lr{display:flex;align-items:center;gap:14px;padding:13px 18px;min-height:58px;color:var(--ink);width:100%;text-align:left}
.lr+.lr{border-top:var(--hair) solid var(--line)}
.lr .li{color:var(--ink-2);flex:none}
.lr .lt{flex:1;min-width:0;font:400 19px/24px var(--serif)}
.lr .lt .ls{display:block;font:400 13px/18px var(--sans);color:var(--ink-2);margin-top:3px}
.lr .lv{font:400 15px/1 var(--sans);color:var(--ink-2);display:flex;gap:4px;align-items:center;white-space:nowrap}
.lr.dng .lt,.lr.dng .li{color:var(--danger)}
.dngbox{border-color:var(--danger)}
.sw{margin-left:auto;width:51px;height:31px;border-radius:16px;background:var(--page);border:1.5px solid var(--line-strong);position:relative;flex:none;transition:background-color .18s ease,border-color .18s ease}
.sw::after{content:"";position:absolute;left:2px;top:2px;width:24px;height:24px;border-radius:12px;background:var(--line-strong);transition:transform .3s var(--spring),width .2s var(--spring),background-color .18s ease}
.lr:active .sw::after{width:30px}
.lr:active .sw.on::after{transform:translateX(14px)}
.sw.on{background:var(--accent);border-color:var(--accent)}
.sw.on::after{transform:translateX(20px);background:var(--on-accent)}
.verl{text-align:center;font:400 12.5px/17px var(--sans);color:var(--ink-3);margin-top:18px}
.note{padding:0 28px;margin-top:12px;font:400 12.5px/17px var(--sans);color:var(--ink-2)}
.caps{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:14px 18px;font:400 13.5px/18px var(--sans);color:var(--ink-2)}
.caps b{font-weight:600;color:var(--ink)}
/* appearance */
.back{margin:4px 0 0 16px;height:42px;padding:0 16px 0 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:2px;background:var(--surface);border:var(--hair) solid var(--line);font:500 16px/1 var(--sans);color:var(--ink)}
.swrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 24px;margin-top:12px}
.swc{border-radius:var(--r-card);background:var(--surface);border:var(--hair) solid var(--line-strong);padding:8px 8px 11px;position:relative;text-align:left;transition:border-color .18s ease,transform .3s var(--spring)}
.swc::after{content:"";position:absolute;inset:calc(-1 * var(--hair));border-radius:inherit;border:2px solid var(--accent);opacity:0;transform:scale(.985);transition:opacity .18s ease,transform .22s var(--ease);pointer-events:none}
.swc.sel{border-color:var(--accent)}
.swc.sel::after{opacity:1;transform:none}
.swc .pv{height:104px;border-radius:15px;position:relative;overflow:hidden;background:var(--page)}
.swc .pv .hi{position:absolute;left:12px;top:8px;font:300 22px/26px var(--serif);color:var(--ink)}
.swc .pv .pu{position:absolute;right:10px;top:10px;width:46px;height:20px;border-radius:10px;background:var(--user);border:var(--user-bw) solid var(--user-stroke)}
.swc .pv .pc{position:absolute;left:8px;right:8px;bottom:-1px;height:54px;border-radius:14px 14px 0 0;background:var(--card-fill);border:var(--card-bw) solid var(--card-stroke);border-bottom:0}
.swc .pv .pc i{position:absolute;right:10px;top:14px;width:58px;height:26px;border-radius:13px;background:var(--block-user);border:var(--btn-bw) solid var(--btn-stroke)}
[data-theme="vodka"] .swc .pv .pc i,[data-theme="gin-tonic"] .swc .pv .pc i{background:var(--surface)}
.swc .pv .pc b{position:absolute;left:12px;top:15px;width:22px;height:22px;border-radius:50%;border:1.4px solid var(--block-accent)}
.swc .pv .pc b::after{content:"";position:absolute;left:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--block-accent)}
.swc .nm{display:flex;align-items:center;justify-content:space-between;margin:10px 4px 0;font:600 19px/22px var(--display);color:var(--ink)}
.swc .md{margin:2px 4px 0;font:400 12.5px/17px var(--sans);color:var(--ink-2)}
.swc .cb{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-strong);flex:none;display:grid;place-items:center;color:var(--on-accent);transition:background-color .18s ease,border-color .18s ease}
.swc .cb svg{opacity:0;transform:scale(.4);transition:opacity .18s ease,transform .24s var(--ease)}
.swc.sel .cb svg{opacity:1;transform:none}
.swc.sel .cb{background:var(--accent);border-color:var(--accent)}
.sect{display:flex;justify-content:space-between;align-items:baseline;padding:0 24px;margin-top:22px;font:300 26px/32px var(--serif);color:var(--ink)}
.sect small{font:500 12.5px/1 var(--sans);color:var(--ink-2);opacity:0;transition:opacity .2s ease}
.sect small.vis{opacity:1}

/* ---------- banners, hints, toasts ---------- */
.banner{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 8px);z-index:90;max-width:496px;margin:0 auto;border-radius:22px;background:var(--surface);border:var(--btn-bw,1px) solid var(--card-stroke);padding:12px 14px;display:flex;gap:11px;align-items:center;text-align:left;width:calc(100% - 24px)}
[data-mode="dark"] .banner{border:var(--hair) solid var(--line-strong)}
.banner img{width:38px;height:38px;border-radius:10px;flex:none}
.banner .bt{flex:1;min-width:0}
.banner .b0{font:500 11px/14px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.banner .b1{font:600 15.5px/20px var(--sans);color:var(--ink);margin-top:2px}
.banner .b2{font:400 14.5px/19px var(--sans);color:var(--ink-2)}
.hint{margin:0 16px 6px;border-radius:16px;background:var(--surface);border:var(--hair) solid var(--line-strong);padding:8px 8px 8px 14px;display:flex;gap:10px;align-items:center}
.hint .ht{flex:1;font:400 13px/18px var(--sans);color:var(--ink-2)}
.hint .ht strong{font-weight:600;color:var(--ink)}
.hint .ht b{display:block;font:500 11px/14px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.hint .ht svg{display:inline;vertical-align:-4px;color:var(--ink)}
.hint .x{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:var(--page);flex:none}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 150px);z-index:95;background:var(--surface);color:var(--ink);border:var(--hair) solid var(--line-strong);border-radius:var(--r-pill);padding:10px 18px;font:500 14px/18px var(--sans);max-width:86%;text-align:center}
.dropzone{position:fixed;inset:0;z-index:99;background:var(--scrim);display:grid;place-items:center}
.dropzone div{border:2px dashed var(--on-accent);border-radius:28px;padding:40px 48px;color:#fff;font:300 30px/36px var(--serif);text-align:center}
.camsheet .opt svg{color:var(--ink)}
[data-mode="light"] .card.top .btn:not(:disabled){background:var(--surface)}

/* ================= motion layer (v0.8) =================
   Durations/curves: see DESIGN_SPEC.md "Motion". Flat: only opacity/transform/colour move; never shadow, blur or gradient. */
.top2,.dock,.lst,.lr,.cc,.emptyc,.card,.rp,.opill,.tg2 .w,.hint,.cbtn,.back{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .3s var(--spring)}
/* press feedback: scale .97 over ~120ms */
:where(button){transition:transform .3s var(--spring),background-color .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease}
:where(button):active:not(:disabled){transform:scale(.97);transition-duration:60ms}
/* rows: no scale (it shrinks hairlines and fires as a scroll starts); a .pressed tint after 60ms, released over 250ms */
.lr:active,.opt:active,.dsum:active,.tsent:active{transform:none!important}
.lr,.opt,.dsum,.tsent{transition:background-color .25s ease}
.lr.pressed,.opt.pressed,.dsum.pressed,.tsent.pressed{background-color:var(--line);transition-duration:0s}
button,a,input,[role=button]{touch-action:manipulation}
/* theme switch: one composited snapshot cross-fade (View Transition), no per-element colour transitions */
html.vt-theme::view-transition-group(*){animation:none}
html.vt-theme::view-transition-old(*){animation:280ms ease both vt-fade-out}
html.vt-theme::view-transition-new(*){animation:280ms ease both vt-fade-in}
html.vt-theme.vt-rm::view-transition-old(*),html.vt-theme.vt-rm::view-transition-new(*){animation-duration:200ms}
/* while the snapshot fades, nothing animates colour per element (the live new image would show it); the toggle knob still slides */
html.vt-theme *,html.vt-theme *::before,html.vt-theme *::after{transition-duration:0s!important}
html.vt-theme .sw::after{transition-duration:.3s,.2s,0s!important}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
/* More > Appearance: a real push (tab to tab uses no View Transition, see app.js show()) */
html.vt-push::view-transition-group(*){animation-duration:500ms;animation-timing-function:var(--spring)}
html.vt-push::view-transition-old(screen){animation:500ms var(--spring) both vt-push-old}
html.vt-push::view-transition-new(screen){animation:500ms var(--spring) both vt-push-new}
html.vt-push[data-dir=back]::view-transition-old(screen){animation-name:vt-pop-old;z-index:2}
html.vt-push[data-dir=back]::view-transition-new(screen){animation-name:vt-pop-new}
html.vt-push::view-transition-old(dock),html.vt-push::view-transition-new(dock),html.vt-push::view-transition-old(top),html.vt-push::view-transition-new(top){animation:none}
::view-transition-old(screen),::view-transition-new(screen){block-size:100%;object-fit:none;object-position:50% 0}
@keyframes vt-push-old{to{transform:translateX(-30%);opacity:.6}}
@keyframes vt-push-new{from{transform:translateX(100%)}}
@keyframes vt-pop-old{to{transform:translateX(100%)}}
@keyframes vt-pop-new{from{transform:translateX(-30%);opacity:.6}}
/* reduced motion: fades or instant only */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color!important;transition-duration:.12s!important}
  :where(button):active:not(:disabled),.lr:active,.opt:active{transform:none!important}
  .dots span{animation:none}
  html:not(.vt-theme)::view-transition-group(*),html:not(.vt-theme)::view-transition-old(*),html:not(.vt-theme)::view-transition-new(*){animation:none!important}
  .nav-on,.nav-ind{transition-duration:.12s!important}
}