:root{--bg:#F2EFE9;--sf:#FFFFFF;--ink:#17191D;--mute:#5B6470;--dim:#8C949C;--line:#E7E3DB;--brand:#0E7C86;--c:#0E7C86;--tint:#E3F1F2;--deep:#0B5F66;--dark:#171A20;--amber:#996103;--amberbg:#FFF0D7;--rose:#B94642;--rosebg:#FEEBEA;--green:#317A45;--greenbg:#E0F7E4;--plum:#6D4FA3;--plumbg:#ECE6F6;--indigo:#4756C9;--indigobg:#E7E9FA}
/* motion tokens, the same ten as the shell's (server/src/views.js, docs/DESIGN.md Motion); the standalone showcase loads no other sheet */
:root{--ease:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(0,0,0,1);--ease-in:cubic-bezier(.3,0,1,1);--t-fast:80ms;--t:200ms;--t-slow:240ms;--t-beat:400ms;--t-loop:900ms;--t-drift:6s;--t-shimmer:1.4s}

body{margin:0 auto;max-width:390px;min-height:100vh;box-sizing:border-box;font-family:Geist,'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:14px}
.disp,h1,h2,.hook{font-family:Fraunces,Georgia,'Times New Roman',serif;font-variation-settings:'SOFT' 60,'opsz' 40;letter-spacing:-.012em}
.mono{font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace}
button{font-family:inherit}
/* ---------- shell ---------- */
.top{position:sticky;top:0;z-index:5;background:rgba(242,239,233,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.bar{height:50px;padding:10px 20px 0;display:flex;align-items:center;justify-content:space-between}
.wm{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;letter-spacing:-.02em}
.bar .r{display:flex;gap:10px;align-items:center}
.ico{width:34px;height:34px;border-radius:17px;background:#fff;box-shadow:0 1px 2px rgba(23,25,29,.08);display:flex;align-items:center;justify-content:center}
.avatar{width:34px;height:34px;border-radius:17px;background:linear-gradient(135deg,#F3C6A5 0%,#C97F5F 55%,#0E7C86 100%);box-shadow:inset 0 0 0 2px #fff,0 1px 2px rgba(23,25,29,.15)}
.chips{display:flex;gap:6px;padding:10px 16px 10px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chipA{flex:none;height:32px;padding:0 13px 0 10px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(23,25,29,.06);font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px;color:var(--mute);border:0;cursor:pointer}
.chipA i{width:9px;height:9px;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.chipA.on{background:var(--ink);color:#fff}
.hello{padding:14px 20px 4px}
.hello .eyebrow{color:var(--brand)}
.hello h1{margin:6px 0 0;font-size:34px;line-height:1.04;font-weight:600}
.hello p{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--mute);max-width:34ch}
.promise{margin:14px 20px 0;display:flex;gap:10px;align-items:center;background:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 1px 2px rgba(23,25,29,.05)}
.promise span{font-size:12.5px;line-height:1.35;color:var(--mute)}
.feed{display:flex;flex-direction:column;gap:14px;padding:8px 14px 120px}
.ah{display:flex;align-items:baseline;justify-content:space-between;padding:26px 6px 4px}
.ah h2{margin:0;font-size:26px;font-weight:600}
.ah h2 i{display:inline-block;width:10px;height:10px;border-radius:5px;background:var(--c);margin-right:8px;transform:translateY(-1px)}
.ah span{font-size:12px;color:var(--dim)}
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:390px;padding:16px 14px 26px;box-sizing:border-box;background:linear-gradient(180deg,rgba(242,239,233,0),rgba(242,239,233,.96) 45%);z-index:6;pointer-events:none}
.dock .in{pointer-events:auto;height:52px;border-radius:26px;background:#fff;box-shadow:0 2px 6px rgba(23,25,29,.06),0 14px 34px -18px rgba(23,25,29,.4);display:flex;align-items:center;gap:8px;padding:0 6px 0 18px}
.dock .in span{flex:1;font-size:15px;color:var(--dim)}
.dock .b{width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.dock .b.send{background:var(--ink)}
/* ---------- card ---------- */
.card{background:var(--sf);border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(23,25,29,.05),0 16px 36px -26px rgba(23,25,29,.35)}
/* the card's meta block under the stage (docs/DESIGN-PASS.md §2 A2): a column of eyebrow, hook, body and one footer line, on the 4 px grid; the footer is the
   connector line and the action on ONE line, the action a pill of its own (no browser bevel), never clipped by the card (render_metrics.py foot) */
.meta{display:flex;flex-direction:column;gap:8px;padding:16px}
.eyebrow{font-size:13px;font-weight:600;margin:0}
.hook,.body{margin:0}
.hook{font-weight:600}
.body{font-size:14px;line-height:20px;color:var(--mute)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.conn{display:flex;align-items:center;gap:4px;min-width:0;font-size:13px;line-height:18px;color:var(--dim)}
.conn svg{flex:none}
.cta{display:inline-flex;align-items:center;justify-content:center;flex:none;white-space:nowrap;box-sizing:border-box;height:36px;margin:0;padding:0 16px;border:0;border-radius:18px;font-family:inherit;font-size:14px;font-weight:600;line-height:1;-webkit-appearance:none;appearance:none}
/* ---------- the stage (docs/DESIGN-PASS.md §3): a fixed square frame on one light ground in both schemes; everything that moves moves inside it.
   15 px on the phone, 14 from 900 px, 16 for a title, nothing smaller; panels are one level (no border, no shadow); a hard ring marks the one selected thing */
.card{container-type:inline-size}
.stage{--sfs:15px;--stage:#FBF9F2;--stage-panel:#FFFFFF;--stage-ink:#23221D;--stage-mute:#615F58;--stage-rule:#E4DFD2;position:relative;aspect-ratio:1;contain:size layout paint;overflow:hidden;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--stage);color:var(--stage-ink);font-size:15px;line-height:20px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
@media(min-width:900px){.stage{--sfs:14px;font-size:14px}}
/* a card wider than 420 px (two columns beside the open sidebar at 1280, the tablet column) takes a 4:3 frame: the same height a 340 px square gives the scene, so a wide column never adds empty ground (render_metrics.py fit: fill, clipped 0) */
@container (min-width:420px){.stage{aspect-ratio:4/3}}
.stage small{font-size:var(--sfs)}
.stage .who{color:#fff}
.mute{color:var(--stage-mute)}
/* the crossfade's copy (.cf) takes the live stage's layout rule for rule, so the copy lies exactly over the finished frame (render_metrics.py cf_shift) */
.stage>.sc,.cf>.sc{flex:1 1 0;min-height:0;position:relative;justify-content:center;gap:8px}
/* a slot: elements that are never on screen together share one cell, so the scene is as tall as its busiest beat */
.slot{display:grid;align-items:center;min-width:0}
.slot>*{grid-area:1/1;min-width:0}
.slot>.bub.me{justify-self:end}
/* inside a slot the leaving element is gone before the arriving one shows: one picture at a time, never two half pictures */
.slot>.el.on{transition-delay:var(--t-beat)}
/* the caption: pinned under the scene, two lines; the beat pips show only on the stage that holds the turn */
.cap{flex:none;display:flex;flex-direction:column;gap:8px}
.pips{display:flex;gap:6px;height:6px;opacity:0;transition:opacity var(--t-beat) var(--ease)}
.stage.turn .pips{opacity:1}
.pips i{width:6px;height:6px;border-radius:3px;background:var(--stage-ink);opacity:.16;transition:opacity var(--t-beat) var(--ease),background-color var(--t-beat) var(--ease)}
.pips i.done{opacity:.4}
.pips i.now{opacity:1;background:var(--c)}
.capt{height:40px;overflow:hidden;color:var(--stage-mute)}
.capt b{color:var(--stage-ink);font-weight:600}
/* the return to beat 0: a copy of the finished frame over the stage, leaving alone (--ease-in, the leaving curve), so no single frame carries the change */
.cf{position:absolute;inset:0;z-index:3;box-sizing:border-box;padding:inherit;display:flex;flex-direction:column;gap:inherit;background:var(--stage);pointer-events:none;transition:opacity var(--t-loop) var(--ease-in)}
.cf.go{opacity:0}
/* under the copy, the beat-0 words that differ from the copy's are held back (engine.js loop: .dipt carries no colour), then arrive on --t-beat once the copy is gone (.undip): one sentence at a time, never two half sentences in one box */
.stage.dip .dipt{color:transparent!important;-webkit-text-fill-color:transparent}
.stage.undip>:is(.sc,.cap) *{transition:color var(--t-beat) var(--ease-out)}
.snap *,.still .stage *{transition:none!important}
.snap *{animation:none!important}
.stage:not(.turn) *{animation-play-state:paused!important}
/* ---------- motion inside the frame: opacity and transform only ---------- */
.el{opacity:0;transform:translateY(6px);transition:opacity var(--t-beat) var(--ease-out),transform var(--t-beat) var(--ease-out)}
.el.on{opacity:1;transform:none}
.el.out{opacity:0;transform:translateY(-6px);transition:opacity var(--t-beat) var(--ease-in),transform var(--t-beat) var(--ease-in)}
.txg{display:inline-grid;max-width:100%;vertical-align:top}
.txv{grid-area:1/1;min-width:0;opacity:0;transition:opacity var(--t-beat) var(--ease)}
.txv.on{opacity:1}
.tyr{opacity:0}
.caret{display:inline-block;width:2px;height:1em;margin-right:-2px;vertical-align:-2px;background:currentColor;opacity:0}
.typing .caret{animation:blink var(--t-shimmer) steps(2) infinite}
@keyframes blink{50%{opacity:.6}}
.cnt{display:inline-grid;font-variant-numeric:tabular-nums}
.cnt>*{grid-area:1/1}
.cns{visibility:hidden}
.fill{transform-origin:left;transition:transform var(--t-beat) var(--ease-out)}
.pw{position:absolute;inset:0;pointer-events:none;transition:transform var(--t-beat) var(--ease)}
.pw>*{pointer-events:auto}
/* ---------- primitives ---------- */
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:8px}
.spread>.press{margin-left:auto}
.col{display:flex;flex-direction:column;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:15px;font-size:inherit;font-weight:500;white-space:nowrap;max-width:100%;box-sizing:border-box}
.chip.wrap{height:auto;min-height:30px;padding:5px 12px;white-space:normal;line-height:20px;border-radius:12px}
.chip.c{background:var(--c);color:#fff}.chip.t{background:var(--stage-panel);color:var(--deep)}
.chip.amber{background:var(--amberbg);color:var(--amber)}.chip.rose{background:var(--rosebg);color:var(--rose)}.chip.green{background:var(--greenbg);color:var(--green)}.chip.plum{background:var(--plumbg);color:var(--plum)}
.chip.ghost{background:transparent;color:var(--stage-mute);border:1px solid var(--stage-rule)}.chip.ink{background:var(--stage-ink);color:#fff}
.chip .mono{font-size:inherit}
.mail{display:flex;gap:10px;align-items:center;background:var(--stage-panel);border-radius:12px;padding:8px 12px}
.mail svg{flex:none}
.mail .f{font-weight:600}
.mail .s{color:var(--stage-mute)}
.press{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:18px;background:var(--c);color:#fff;font-weight:600;white-space:nowrap;border:0}
.learn{display:inline-flex;align-items:center;gap:8px;color:var(--deep);min-width:0}
.learn .ck{width:20px;height:20px;border-radius:10px;background:var(--c);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.bub{background:var(--stage-panel);border-radius:16px 16px 16px 6px;padding:8px 12px;color:var(--stage-ink);max-width:92%;box-sizing:border-box}
.bub.me{background:var(--c);color:#fff;border-radius:16px 16px 6px 16px;align-self:flex-end}
.bub .tag{display:block;color:var(--deep);margin-bottom:2px;font-weight:600}
.bub.me .tag{color:#fff}
.note{color:var(--stage-mute);display:flex;gap:8px;align-items:center}
.note svg{flex:none}
.sheet{background:var(--stage-panel);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.sheet .t{font-weight:600;font-size:16px}
.sheet .sub{color:var(--stage-mute)}
.fld{display:flex;gap:8px;align-items:baseline}
.fld .k{color:var(--stage-mute);width:84px;flex:none}
.fld .v{font-weight:500;border-radius:4px;padding:0 4px;margin-left:-4px;min-width:0}
.fld.hl .v{background:var(--amberbg);color:var(--amber)}
.sig{margin-top:4px;border-top:1px dashed var(--stage-rule);padding-top:6px;display:flex;justify-content:space-between;align-items:center;color:var(--stage-mute)}
.sig .x{font-style:italic;color:var(--deep)}
.list{display:flex;flex-direction:column;gap:6px}
.gh{color:var(--stage-mute);font-weight:600}
.it{display:flex;gap:8px;align-items:center;background:var(--stage-panel);border-radius:10px;padding:6px 10px}
.it .bx{width:16px;height:16px;border-radius:5px;border:1.5px solid #9AA5AD;flex:none;box-sizing:border-box;transition:background-color var(--t-beat) var(--ease),border-color var(--t-beat) var(--ease)}
.it.done .bx{background:var(--c);border-color:var(--c)}
.it .r{margin-left:auto;color:var(--stage-mute);white-space:nowrap}
.it.strike{color:var(--stage-mute);text-decoration:line-through}
.who{width:24px;height:24px;border-radius:12px;color:#fff;font-size:inherit;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:1}
.av{width:40px;height:40px;border-radius:20px;color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;position:relative;flex:none;transition:transform var(--t-beat) var(--ease)}
.av.hi{box-shadow:0 0 0 3px var(--stage),0 0 0 5px var(--c);transform:scale(1.06)}
.avn{display:flex;flex-direction:column;align-items:center;gap:2px}
.avn .nm{color:var(--stage-mute);white-space:nowrap;font-weight:500;line-height:18px}
/* the learned line and its button share a line only when both fit whole; otherwise the button drops under it, kept right (the line never wraps beside a one-line button: render_metrics.py learn_wrapped) */
.act{gap:4px 10px;flex-wrap:wrap}.act .learn{flex:1 0 auto;max-width:100%}.act .press{flex:none}
/* the action band (design pass round 2, finding 14): the finished state's row, or the slot that holds it, sits at the foot of the scene and the scene
   starts at the top, so the press lands at one height in every card of a row whether or not the learned line wraps (render_metrics.py fit act_spread) */
:is(.stage,.cf)>.sc:has(>.act,>.slot>.act){justify-content:flex-start}
:is(.stage,.cf)>.sc>.act,:is(.stage,.cf)>.sc>.slot:has(>.act){margin-top:auto}
.slot>.act{align-self:end}
/* a kept scene (engine.js slots, design pass completeness finding 2): the action owns the foot of the frame and the body sits centred in the room above it,
   so what the finished frame leaves empty is split above and below the picture, never one band under it (render_metrics.py fit band_max, gap) */
:is(.stage,.cf)>.sc.kept>:first-child{margin-top:auto}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{padding:4px 10px;border-radius:10px;background:var(--stage-panel);color:var(--stage-mute)}
.tab.on{background:var(--stage-ink);color:#fff}
.bar2{height:8px;border-radius:4px;background:rgba(23,25,29,.1);overflow:hidden;flex:1}
.bar2 i{display:block;height:100%;width:100%;background:var(--c);border-radius:4px}
.hdr{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex:1;min-width:0}
.hdr b{font-weight:600;font-size:16px}
.hdr span{color:var(--stage-mute)}
.logl{display:flex;gap:8px;align-items:center;color:var(--stage-mute);padding:0 2px}
.logl .dot{width:6px;height:6px;border-radius:3px;background:var(--c);flex:none}
/* ---------- calendar: events are bars, their words live in the row under it (A6) ---------- */
.cal{background:var(--stage-panel);border-radius:12px;padding:8px 8px 6px}
.cal .mh{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 4px}
.cal .mh b{font-size:16px;font-weight:600}
.cal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal .h{color:var(--stage-mute);text-align:center;font-weight:600}
/* the day number keeps a 16 px line at the top of the cell and the two event bars sit under it (bottom 2 and 7), so no bar crosses a digit (render_metrics.py marks) */
.cal .c{position:relative;height:28px;border-radius:6px;background:var(--stage);color:var(--stage-mute);padding:1px 0 0 5px;box-sizing:border-box;line-height:16px}
.cal .c.today{background:var(--tint);color:var(--deep);font-weight:700}
.cal .c.out{background:transparent}
.cal .ev{position:absolute;left:3px;right:3px;bottom:2px;height:4px;border-radius:2px}
.cal .ev.two{bottom:7px}
.cal .c.clash{box-shadow:0 0 0 2px var(--rose)}
.res{display:flex;align-items:center;gap:8px;background:var(--stage-panel);border-radius:12px;padding:8px 10px}
.res .arr{color:var(--stage-mute)}
/* ---------- card studio ---------- */
.easel{position:relative;height:136px}
.dz{position:absolute;left:50%;top:4px;width:92px;height:124px;margin-left:-46px;border-radius:10px;overflow:hidden;box-shadow:0 8px 20px -10px rgba(23,25,29,.4);transition:transform var(--t-beat) var(--ease),opacity var(--t-beat) var(--ease-out)}
.dz::after{content:'';position:absolute;inset:0;background:var(--stage);opacity:0;transition:opacity var(--t-beat) var(--ease)}
.dz.dimmed::after{opacity:.6}
.dz.dimmed .dzt{opacity:0}
.dz .photo{position:absolute;left:12%;right:12%;top:12%;height:44%;border-radius:4px;background:linear-gradient(135deg,#F3C6A5,#C97F5F 60%,#5B4A8A);opacity:0;transition:opacity var(--t-beat) var(--ease-out)}
.dz .photo.hi{opacity:1}
.dz .dzt{position:absolute;left:0;right:0;bottom:8%;z-index:1;text-align:center;font-size:inherit;line-height:18px;font-weight:600;font-style:italic;padding:0 6px}
.dz.l{transform:translateX(-92px) rotate(-6deg)}.dz.r{transform:translateX(92px) rotate(6deg)}
.dz.sel{transform:scale(1.06);z-index:1}
.dz .dzt{transition:opacity var(--t-beat) var(--ease)}
.env{display:flex;align-items:center;gap:10px;background:var(--stage-panel);border-radius:12px;padding:8px 10px}
.env .stack{position:relative;width:44px;height:30px;flex:none}
.env .stack i{position:absolute;left:0;top:0;width:40px;height:26px;border-radius:3px;background:#FBF4E8;box-shadow:0 1px 2px rgba(23,25,29,.2)}
.env .stack i:nth-child(2){transform:translate(3px,2px) rotate(3deg)}.env .stack i:nth-child(3){transform:translate(6px,4px) rotate(6deg)}
.env .n{font-weight:600}.env .s{color:var(--stage-mute)}
/* ---------- aisles ---------- */
.store{display:flex;gap:3px;height:22px;align-items:flex-end}
.store i{flex:1;height:12px;border-radius:3px;background:rgba(23,25,29,.08)}
.store i.on{background:var(--c);height:22px}
/* aisle rows: the aisle number, then what is in it; a struck item stays in place */
.it.aisle{align-items:flex-start}
.it.aisle .who{margin-top:-2px}
.it.aisle span.strike{color:var(--stage-mute);text-decoration:line-through}
.it.aisle span.hi{background:var(--tint);color:var(--deep);border-radius:4px}
/* ---------- paper ---------- */
.doc{background:var(--stage-panel);border-radius:8px;padding:10px 12px;position:relative;overflow:hidden}
.doc::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.doc .lh{color:var(--stage-mute);font-weight:600}
.doc .ti{font-size:16px;font-weight:600;margin:2px 0 4px}
.doc .ln{display:flex;gap:8px;align-items:baseline;border-bottom:1px solid var(--stage-rule);padding:3px 0}
.doc .ln .k{color:var(--stage-mute);width:84px;flex:none}
.doc .ln .v{font-weight:500;border-radius:3px;padding:0 3px;margin-left:-3px;min-width:0}
.doc .ln .tyc{color:var(--deep)}
.ln.hi .v{background:var(--amberbg);color:var(--amber)}
.stamp{position:absolute;right:10px;bottom:10px;border:2px solid var(--deep);color:var(--deep);border-radius:6px;padding:0 6px;font-weight:700;transform:rotate(-8deg);background:var(--stage-panel)}
/* ---------- person ---------- */
.pc{display:flex;gap:12px;align-items:center;background:var(--stage-panel);border-radius:12px;padding:8px 12px}
.pc .av{width:44px;height:44px;border-radius:22px;font-size:17px}
.pc .n{font-weight:600;font-size:16px}
.pc .s{color:var(--stage-mute)}
.q{display:flex;gap:8px;align-items:flex-start;background:var(--stage-panel);border-radius:10px;padding:6px 10px}
.q .d{color:var(--stage-mute);white-space:nowrap;margin-left:auto}
.q .m{color:var(--deep);font-size:16px;font-style:italic}
/* ---------- binder ---------- */
.snap{display:flex;gap:10px;align-items:center}
.snap .pic{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,#D7D1C4,#9A917F);transform:rotate(-4deg);display:flex;align-items:center;justify-content:center;flex:none}
.snap .arrow{color:var(--stage-mute)}
.photo2{height:120px;border-radius:12px;background:linear-gradient(135deg,#6B6458,#3B3630);display:flex;align-items:flex-end;padding:10px 12px;color:#fff;box-sizing:border-box}
/* ---------- rota ---------- */
.rota{display:grid;grid-template-columns:76px repeat(7,1fr);gap:3px;background:var(--stage-panel);border-radius:12px;padding:8px}
.rota .h{color:var(--stage-mute);text-align:center;font-weight:600}
.rota .n{font-weight:500;display:flex;align-items:center;gap:4px;white-space:nowrap}
.rota .t{height:24px;border-radius:5px;background:var(--stage)}
.rota .t.on,.rota .t.go{background:var(--who)}
.rota .t.clash{background:var(--rosebg)}
/* ---------- vehicle ---------- */
.gauge{position:relative;width:84px;height:56px;flex:none}
.gauge svg{position:absolute;left:0;top:0;width:84px;height:48px}
.gauge .v{position:absolute;left:0;right:0;bottom:0;text-align:center;font-weight:600}
.due{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--stage-panel);border-radius:10px;padding:6px 10px}
.due .d{color:var(--stage-mute);white-space:nowrap}
.due2{flex-direction:column;align-items:flex-start;gap:0}.due .d.soon{color:var(--amber);font-weight:600}
/* ---------- timeline: markers on their own line, labels never under them (A6) ---------- */
.tl{position:relative;height:84px;margin:0 6px}
.tl .ax{position:absolute;left:0;right:0;top:48px;height:2px;background:rgba(23,25,29,.14);border-radius:1px}
.tl .today{position:absolute;top:40px;width:2px;height:18px;background:var(--stage-ink);transform:translateX(-50%);border-radius:1px}
.tl .tk{position:absolute;top:62px;white-space:nowrap;color:var(--stage-mute);transform:translateX(-50%)}
.tl .pt{position:absolute;top:42px;width:14px;height:14px;border-radius:7px;background:var(--c);box-sizing:border-box;transform:translateX(-50%)}
.tl .pt.ghost{background:var(--stage);border:2px dashed var(--amber)}
.tl .lb{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap;line-height:18px}
.tl .lb b{display:block;font-weight:600}
.tl .lb.soon b{color:var(--amber)}
/* ---------- statement: the scan runs in its own lane, the rows start after it (A6) ---------- */
.stmt{position:relative;background:var(--stage-panel);border-radius:12px;padding:6px 10px;overflow:hidden}
.stmt .l{display:flex;justify-content:space-between;gap:8px;padding:3px 4px;border-radius:4px;color:var(--stage-mute)}
.stmt .l.rec{color:var(--stage-ink);font-weight:600}
.stmt .l.hi{background:var(--tint)}
.stmt .scan{position:absolute;left:0;right:0;top:0;height:28px;background:linear-gradient(180deg,rgba(14,124,134,0),rgba(14,124,134,.12),rgba(14,124,134,0));animation:scan var(--t-shimmer) var(--ease) infinite alternate;pointer-events:none}
@keyframes scan{from{transform:translateY(-28px)}to{transform:translateY(120px)}}
.up{color:var(--rose);font-weight:600}
/* ---------- camera ---------- */
.cam{position:relative;height:128px;border-radius:12px;background:#2B2F36;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cam .corner{position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.8)}
.cam .c1{left:10px;top:10px;border-right:0;border-bottom:0}.cam .c2{right:10px;top:10px;border-left:0;border-bottom:0}.cam .c3{left:10px;bottom:10px;border-right:0;border-top:0}.cam .c4{right:10px;bottom:10px;border-left:0;border-top:0}
.rcpt{width:150px;background:#FBF8F1;color:#3A3A3A;padding:6px 10px 10px;line-height:18px;transform:rotate(-3deg);clip-path:polygon(0 0,100% 0,100% 96%,94% 100%,88% 96%,82% 100%,76% 96%,70% 100%,64% 96%,58% 100%,52% 96%,46% 100%,40% 96%,34% 100%,28% 96%,22% 100%,16% 96%,10% 100%,4% 96%,0 100%)}
.rcpt b{display:block;text-align:center}
.rcpt .r{display:flex;justify-content:space-between}
.rcpt .tot{border-top:1px dashed #8A8A8A;margin-top:2px;padding-top:2px;font-weight:700}
/* ---------- window ---------- */
.win{position:relative;height:56px;margin:0 8px}
.win .band{position:absolute;left:24%;right:20%;top:40px;height:12px;background:var(--amberbg);border-radius:6px}
.win .ax{position:absolute;left:0;right:0;top:45px;height:2px;background:rgba(23,25,29,.14)}
.win .m{position:absolute;top:38px;width:16px;height:16px;border-radius:8px;background:var(--c);transform:translateX(-50%)}
.win .m.amber{background:var(--amber)}
.win .lb{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap;line-height:18px}
.win .lb b{display:block;font-weight:600}
.win .bl{position:absolute;top:58px;left:24%;color:var(--amber);white-space:nowrap;font-weight:600}
/* ---------- itinerary ---------- */
.pass{background:var(--stage-panel);border-radius:12px;overflow:hidden;position:relative;transition:opacity var(--t-beat) var(--ease)}
.pass .hd{background:var(--deep);color:#fff;padding:4px 12px;font-weight:600;display:flex;justify-content:space-between}
.pass .bd{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.pass .ap{font-size:20px;font-weight:600;line-height:24px}
.pass .ap small{display:block;color:var(--stage-mute);font-weight:500;line-height:20px}
.pass .mid{flex:1;text-align:center;color:var(--stage-mute)}
.pass .ft{padding:0 12px 6px;display:flex;gap:12px;color:var(--stage-mute)}
.pass .ft b{color:var(--stage-ink);font-weight:600}
.pass.strike{opacity:.45}
/* ---------- deps ---------- */
.dep{position:relative;padding-left:24px}
.dep::before{content:'';position:absolute;left:8px;top:16px;bottom:-8px;width:2px;background:rgba(23,25,29,.12)}
.dep.last::before{display:none}
.dep .dot{position:absolute;left:2px;top:10px;width:14px;height:14px;border-radius:7px;background:var(--stage-panel);border:2px solid var(--c);box-sizing:border-box;transition:background-color var(--t-beat) var(--ease)}
.dep .dot.done{background:var(--c)}
.dep .dot.blocked{border-color:var(--amber);border-style:dashed}
.dep .it .r.warn{color:var(--amber)}
.dep .it span.strike{color:var(--stage-mute);text-decoration:line-through}
/* ---------- folders ---------- */
.fold{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;row-gap:12px;padding-top:6px}
.fold .f{position:relative;height:36px;border-radius:5px 5px 6px 6px;background:#E9DFC9;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;box-sizing:border-box;transition:background-color var(--t-beat) var(--ease)}
.fold .f::before{content:'';position:absolute;left:0;top:-5px;width:46%;height:7px;border-radius:3px 3px 0 0;background:inherit}
.fold .f span{color:#5E5038;font-weight:600}
.fold .f.full,.fold .f.sel{background:var(--deep)}.fold .f.full span,.fold .f.sel span{color:#fff}
.fold .f.clash{background:var(--amberbg)}.fold .f.clash span{color:var(--amber)}
/* ---------- split ---------- */
.owe{display:flex;align-items:center;gap:8px;background:var(--stage-panel);border-radius:10px;padding:4px 10px;transition:color var(--t-beat) var(--ease)}
.owe .amt{margin-left:auto;font-weight:600}
.owe .ar{color:var(--stage-mute)}
.owe.done{color:var(--stage-mute)}
/* ---------- lanes ---------- */
.lane{display:flex;flex-direction:column;gap:4px}
.msg{display:flex;align-items:center;gap:8px;background:var(--stage-panel);border-radius:10px;padding:4px 10px}
.msg .st{margin-left:auto;color:var(--deep);white-space:nowrap;font-weight:600}
.msg .st.wait{color:var(--amber)}
.msg.strike .mt{color:var(--stage-mute);text-decoration:line-through}
.msg .mt{min-width:0}
.msg .st.later{color:var(--stage-mute)}
/* ---------- extract ---------- */
.txt{background:var(--stage-panel);border-radius:12px;padding:8px 12px;color:var(--stage-mute)}
.txt mark{background:var(--tint);color:var(--deep);border-radius:3px;padding:0 2px;transition:background-color var(--t-beat) var(--ease),color var(--t-beat) var(--ease)}
.txt.off mark{background:transparent;color:inherit}
.txt .lbl{display:block;color:var(--stage-mute);margin-bottom:2px}
/* ---------- report ---------- */
.page{background:var(--stage-panel);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.page .pt{font-size:16px;font-weight:600}
.page .sec{display:flex;gap:8px}
.page .sec .k{width:64px;flex:none;color:var(--stage-mute);font-weight:600}
.page .sec .hl{background:var(--amberbg);color:var(--amber);border-radius:4px;padding:0 4px}
/* ---------- steps ---------- */
.steps{display:flex;flex-direction:column;gap:0}
.step{display:flex;align-items:center;gap:10px;padding:4px 0;position:relative}
.step .no{width:24px;height:24px;border-radius:12px;background:var(--stage-panel);border:1.5px solid rgba(23,25,29,.2);box-sizing:border-box;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;position:relative;z-index:1;transition:background-color var(--t-beat) var(--ease),color var(--t-beat) var(--ease),border-color var(--t-beat) var(--ease)}
.step .no.sel,.step .no.done{background:var(--c);border-color:var(--c);color:#fff}
.step .no.you{border-color:var(--c);color:var(--deep)}
.step .no.go{box-shadow:0 0 0 2px var(--stage),0 0 0 4px var(--c)}
.step .lbl{flex:1;min-width:0}
.step .bd{padding:0 8px;border-radius:6px;background:var(--stage-panel);color:var(--stage-mute);white-space:nowrap}
.step .bd.run{background:var(--tint);color:var(--deep)}.step .bd.you{background:var(--c);color:#fff}
.step:not(:last-child)::before{content:'';position:absolute;left:11px;top:28px;height:8px;width:2px;background:rgba(23,25,29,.12)}
/* ---------- expense ---------- */
.tiles{display:flex;gap:6px}
.tiles{justify-content:center;gap:10px}
.tiles .rc{width:60px;height:44px;display:flex;align-items:center;justify-content:center;background:#FBF8F1;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.15);transform:rotate(var(--r,0deg));padding:2px 4px;box-sizing:border-box;color:#3A3A3A;overflow:hidden;white-space:nowrap}
.tbl{background:var(--stage-panel);border-radius:12px;overflow:hidden}
.tbl .tr{display:grid;grid-template-columns:1fr auto auto;padding:4px 10px;border-bottom:1px solid var(--stage-rule);gap:10px;align-items:center}
.tbl .tr:last-child{border-bottom:0}
.tbl .tr.h{color:var(--stage-mute);font-weight:600}
.tbl.two .tr{grid-template-columns:1fr auto}
.tbl .tr.hi{background:var(--tint)}
.tbl .tr.tot{font-weight:600;background:var(--tint)}
.tbl .amt{text-align:right}
.tbl .cat{color:var(--deep);font-weight:600}
.tbl .flag{color:var(--amber);font-weight:600}
/* ---------- orbit ---------- */
.orbit{position:relative;height:150px}
.orbit .ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed rgba(23,25,29,.2);transform:translate(-50%,-50%)}
.orbit .me{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:18px;background:var(--stage-ink);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.orbit .avn{position:absolute;transform:translate(-50%,-16px)}
.orbit .av{width:32px;height:32px;border-radius:16px;font-size:inherit}
/* ---------- week ---------- */
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.wk .d{background:var(--stage-panel);border-radius:8px;padding:4px 0 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.wk .d small{font-size:inherit;color:var(--stage-mute);font-weight:600}
.wk .d .s{font-weight:500}
.wk .d .rd{width:8px;height:8px;border-radius:4px;background:var(--green)}
.wk .d .rd.lo{background:var(--amber)}.wk .d .rd.off{background:rgba(23,25,29,.15)}
.wk .d.you{box-shadow:0 0 0 2px var(--c)}
/* day rows (training, meals): the day, a readiness dot, the plan; a changed day is tinted, not ringed */
.it.day .dn{width:40px;flex:none;font-weight:600;color:var(--stage-mute)}
.it.day .rd{width:8px;height:8px;border-radius:4px;background:var(--green);flex:none}
.it.day .rd.lo{background:var(--amber)}.it.day .rd.off{background:rgba(23,25,29,.15)}
.it.day{transition:background-color var(--t-beat) var(--ease)}
.it.day.you,.it.day.hi{background:var(--tint)}.it.day.clash{background:var(--amberbg)}
/* ---------- meal grid ---------- */
.meals{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.meals .m{background:var(--stage-panel);border-radius:8px;padding:4px 2px;text-align:center;transition:background-color var(--t-beat) var(--ease)}
.meals .m small{display:block;font-size:inherit;color:var(--stage-mute);font-weight:600}
.meals .m .tx{display:block}
.meals .m.clash{background:var(--amberbg)}.meals .m.hi{box-shadow:0 0 0 2px var(--c)}
/* ---------- meds ---------- */
.meds{display:grid;grid-template-columns:1fr repeat(3,48px);gap:4px;background:var(--stage-panel);border-radius:12px;padding:8px}
.meds .h{color:var(--stage-mute);text-align:center;font-weight:600}
.meds .n{display:flex;align-items:center;font-weight:500}
.meds .p{height:26px;border-radius:6px;background:var(--stage);display:flex;align-items:center;justify-content:center}
.meds .p i{width:12px;height:12px;border-radius:6px;background:var(--c)}
.meds .p i.tkx.hi{background:var(--green);box-shadow:0 0 0 3px var(--greenbg)}
/* ---------- shelf ---------- */
.shelf{display:flex;gap:6px;justify-content:center;align-items:flex-end;height:100px;padding:0 4px;border-bottom:4px solid #B59A72}
.spine{width:30px;border-radius:3px 3px 0 0;position:relative;transition:transform var(--t-beat) var(--ease)}
.spine span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);white-space:nowrap;color:#fff;font-weight:600}
.spine.hi{transform:translateY(-8px)}
.spine::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--stage);opacity:0;transition:opacity var(--t-beat) var(--ease)}
.spine.dimmed::after{opacity:.65}
.spine span{transition:opacity var(--t-beat) var(--ease)}
.spine.dimmed span{opacity:0}
.search{display:flex;align-items:center;gap:8px;background:var(--stage-panel);border-radius:12px;padding:8px 12px;color:var(--stage-mute)}
.search b{color:var(--stage-ink);font-weight:500}
/* ---------- refill ring ---------- */
.ringwrap{display:flex;gap:14px;align-items:center}
.ring{position:relative;width:84px;height:84px;flex:none}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px;font-weight:600;line-height:24px}
.ring .v small{color:var(--stage-mute);font-weight:500;line-height:18px}
/* ---------- records ---------- */
.rec{display:flex;gap:10px;align-items:flex-start;padding:3px 0 3px 22px;position:relative}
.rec::before{content:'';position:absolute;left:4px;top:7px;width:10px;height:10px;border-radius:5px;background:var(--c)}
.rec::after{content:'';position:absolute;left:8px;top:19px;bottom:-5px;width:2px;background:rgba(23,25,29,.12)}
.rec.last::after{display:none}
.rec.ghost::before{background:transparent;border:2px dashed var(--amber);box-sizing:border-box}
.rec .d{color:var(--stage-mute);width:56px;flex:none}
.rec .ghosttxt{color:var(--amber);font-weight:500}
/* ---------- party ---------- */
.invite{background:var(--stage-panel);border-radius:12px;padding:10px 12px;text-align:center}
.invite .ti{font-size:18px;line-height:24px;font-weight:600;font-style:italic;color:var(--deep)}
.invite .s{color:var(--stage-mute)}
.tally{position:relative;height:10px;border-radius:5px;overflow:hidden;background:#D9D5CC}
.tally i{position:absolute;top:0;bottom:0;left:0;width:100%}
.tally .y{background:var(--green)}.tally .n{background:var(--rose);transform-origin:right}
.legend{display:flex;gap:10px;color:var(--stage-mute);flex-wrap:wrap}
.legend i{display:inline-block;width:8px;height:8px;border-radius:4px;margin-right:4px}
/* ---------- photo book ---------- */
.book{display:flex;gap:2px;perspective:600px;padding:0 6px}
.book .pg{flex:1;background:#fff;height:140px;border-radius:4px;box-shadow:0 4px 12px -6px rgba(23,25,29,.4);padding:8px;box-sizing:border-box;display:flex;flex-direction:column;gap:6px}
.book .pr{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.book .pr>.p:nth-child(-n+2){grid-area:1/1}
.book .cap2{font-style:italic;color:var(--stage-mute);text-align:center}
.book .pg.l{transform:rotateY(8deg);transform-origin:right}.book .pg.r{transform:rotateY(-8deg);transform-origin:left}
.book .pg .p{border-radius:3px;background:var(--g)}
.book .pg .p.big{flex:1}
.roll{display:flex;gap:3px}
.roll i{flex:1;height:24px;border-radius:3px;background:var(--g);opacity:.45;transition:opacity var(--t-beat) var(--ease)}
.roll i.sel{opacity:1}
.roll i.sel.dimmed{opacity:.2}
/* ---------- email ---------- */
.email{background:var(--stage-panel);border-radius:12px;overflow:hidden}
.email .sub{padding:6px 12px;border-bottom:1px solid var(--stage-rule);color:var(--stage-mute)}
.email .sub b{color:var(--stage-ink);font-weight:600}
.email .hero{height:40px;background:var(--deep);display:flex;align-items:center;padding:0 12px;color:#fff;font-size:16px;font-weight:600}
.email .blk{padding:5px 12px;color:var(--stage-mute)}
.email .blk b{color:var(--stage-ink);font-weight:600;margin-right:6px}
.email .btn{margin:2px 12px 8px;display:inline-block;background:var(--deep);color:#fff;border-radius:6px;padding:2px 10px;font-weight:600}
/* ---------- tables ---------- */
.room{position:relative;height:156px}
.tbl2{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:26px;background:var(--stage-panel);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--stage-mute)}
.tbl2 i{position:absolute;width:10px;height:10px;border-radius:5px;background:#D9D5CC;left:50%;top:50%;margin:-5px 0 0 -5px;transform:rotate(var(--a)) translateY(-32px);transition:background-color var(--t-beat) var(--ease)}
.tbl2.sel i{background:var(--who,#D9D5CC)}
.tbl2.sel i.moved{background:#D9D5CC}
.tbl2 i.arrived{background:var(--who)!important}
.tbl2.hi{box-shadow:0 0 0 2px var(--c)}
.tbl2.clash{background:var(--rosebg);color:var(--rose)}
/* ---------- index cards ---------- */
.ix{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 2px}
.ic{position:relative;box-sizing:border-box;background:#FFFDF7;border-radius:6px;padding:8px 10px;box-shadow:0 6px 16px -8px rgba(23,25,29,.45);line-height:20px;transition:transform var(--t-beat) var(--ease)}
.ic .nm{font-weight:600;font-size:16px;color:var(--deep);display:block;margin-bottom:2px}
.ic.a{transform:rotate(-2deg)}.ic.b{transform:rotate(2deg)}
.icl{border-radius:4px;transition:background-color var(--t-beat) var(--ease),color var(--t-beat) var(--ease)}
.icl.clash{background:var(--rosebg);color:var(--rose)}
.ic .fl{color:var(--rose);font-weight:600}
/* ---------- notes fan ---------- */
.nt{position:relative;background:#fff;border-radius:8px;padding:8px 12px;box-shadow:0 6px 16px -8px rgba(23,25,29,.4);transform-origin:bottom left;transition:transform var(--t-beat) var(--ease-out),opacity var(--t-beat) var(--ease-out)}
.nt .to{color:var(--stage-mute);font-weight:600;display:flex;justify-content:space-between;gap:8px}
.nt .hand{font-style:italic;color:var(--stage-ink);margin-top:2px}
/* ---------- garden ---------- */
.gard{display:grid;grid-template-columns:72px repeat(6,1fr);gap:3px;background:var(--stage-panel);border-radius:12px;padding:8px}
.gard .h{color:var(--stage-mute);text-align:center;font-weight:600}
.gard .n{display:flex;align-items:center;font-weight:500;white-space:nowrap}
.gard .t{height:24px;border-radius:5px;background:var(--stage);display:flex;align-items:center;justify-content:center;transition:background-color var(--t-beat) var(--ease),color var(--t-beat) var(--ease)}
.gard .t.sow{background:var(--greenbg);color:var(--green)}.gard .t.grow{background:#CFE8D8}.gard .t.pick{background:var(--deep);color:#fff}
.gard .t.dimmed{background:var(--stage);color:var(--stage-mute)}
/* ---------- budget ---------- */
.bud{display:flex;align-items:center;gap:8px}
.bud .n{width:60px;flex:none;font-weight:500}
.bud .amt{width:80px;flex:none;text-align:right;color:var(--stage-mute)}
/* ---------- aging ---------- */
.age{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.age .b{background:var(--stage-panel);border-radius:12px;padding:6px 8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.age .b small{font-size:inherit;color:var(--stage-mute);font-weight:600}
.age .b .sum{font-size:16px;font-weight:600}
.age .b.late .sum{color:var(--rose)}
.inv{background:var(--stage);border-radius:6px;padding:0 6px;display:flex;justify-content:space-between;gap:4px;transition:opacity var(--t-beat) var(--ease)}
.inv.late{background:var(--rosebg);color:var(--rose)}
.inv.moved{opacity:.3;text-decoration:line-through}
/* ---------- sequence ---------- */
.seq{display:flex;align-items:flex-start;padding:2px 0}
.seq .s{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;color:var(--stage-mute)}
.seq .s i{width:16px;height:16px;border-radius:8px;background:var(--stage-panel);border:2px solid rgba(23,25,29,.18);box-sizing:border-box;transition:background-color var(--t-beat) var(--ease),border-color var(--t-beat) var(--ease)}
.seq .s i.done,.seq .s i.sel{background:var(--c);border-color:var(--c)}.seq .s i.now,.seq .s i.hi{border-color:var(--c)}
.seq .s:not(:last-child)::after{content:'';position:absolute;left:calc(50% + 10px);right:calc(-50% + 10px);top:7px;height:2px;background:rgba(23,25,29,.12)}
.lead{display:flex;align-items:center;gap:8px;background:var(--stage-panel);border-radius:10px;padding:4px 10px;transition:color var(--t-beat) var(--ease)}
.lead .st{margin-left:auto;font-weight:600;color:var(--deep);white-space:nowrap}
.lead .st.cold{color:var(--stage-mute)}
.lead.done{color:var(--stage-mute)}.lead.done .st{color:var(--green)}
.lead.hi{box-shadow:0 0 0 2px var(--c)}
/* ---------- tickets ---------- */
.tk2{background:var(--stage-panel);border-radius:12px;padding:6px 10px;display:flex;flex-direction:column;gap:2px}
.tk2 .q{background:transparent;padding:0;border-radius:0}
.tk2 .a{color:var(--stage-mute);border-left:2px solid var(--c);padding-left:8px}
.tk2 .src{color:var(--deep);font-weight:600}
/* ---------- process map ---------- */
.flow{display:flex;flex-direction:column;gap:4px}
.pn{display:flex;justify-content:space-between;gap:8px;background:var(--stage-panel);border-radius:8px;padding:4px 10px;transition:background-color var(--t-beat) var(--ease),color var(--t-beat) var(--ease)}
.pn .h{color:var(--stage-mute)}
.pn.hi{background:var(--rosebg);color:var(--rose)}
.pn.hi .h{color:var(--rose)}
.pn.you{box-shadow:0 0 0 2px var(--c)}
/* ---------- quote ---------- */
.qdoc{background:var(--stage-panel);border-radius:10px;padding:10px 12px}
.qdoc .qh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;gap:8px}
.qdoc .qh b{font-size:16px;font-weight:600}
.qdoc .qh span{color:var(--stage-mute)}
.qdoc .li{display:flex;justify-content:space-between;gap:8px;padding:2px 0;border-bottom:1px solid var(--stage-rule)}
.qdoc .li span:last-child{font-weight:500;white-space:nowrap}
.qdoc .li.tot{border:0;font-weight:600;padding-top:4px}
.qdoc .li .pl{color:var(--deep);font-weight:600;margin-left:6px}
/* ---------- kanban ---------- */
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kb .col2{background:rgba(255,255,255,.45);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kb .col2 small{font-size:inherit;color:var(--stage-mute);font-weight:600;padding:0 2px}
.cand{background:var(--stage-panel);border-radius:8px;padding:4px 6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;transition:transform var(--t-beat) var(--ease),opacity var(--t-beat) var(--ease)}
.cand .who{width:22px;height:22px}
.cand.sel{background:var(--tint)}
.cand.moved{opacity:0;transform:scale(.96)}
.cand.hi{background:var(--amberbg)}
.cand .nt2{display:block;width:100%;font-size:inherit;color:var(--amber);font-weight:600}
/* ---------- reviews ---------- */
.rv{background:var(--stage-panel);border-radius:12px;padding:6px 10px;display:flex;flex-direction:column;gap:2px}
.rv .st{color:#8A6200;letter-spacing:1px}
.rv .st.low{color:var(--rose)}
.rv .rp{border-left:2px solid var(--c);padding-left:8px;color:var(--stage-mute)}
.rv.hi{box-shadow:0 0 0 2px var(--rose)}
/* ---------- numbers ---------- */
.bars{display:flex;align-items:flex-end;gap:6px;height:112px;padding:0 4px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;height:100%;justify-content:flex-end;min-width:0}
.bars .b i{display:block;width:100%;border-radius:5px 5px 2px 2px;background:#C9D6D8;transform-origin:bottom}
.bars .b i.el{transform:scaleY(0);transition:transform var(--t-beat) var(--ease-out),opacity var(--t-beat) var(--ease-out)}
.bars .b i.el.on{transform:none}
.bars .b.hi i{background:var(--c)}
.bars .b.dip i,.bars .b.clash i{background:var(--amber)}
.bars .b small{font-size:inherit;color:var(--stage-mute)}
.bars .b .v{font-weight:600}
.plain{background:var(--stage-panel);border-radius:12px;padding:8px 12px}
.plain b{font-weight:600}
/* ---------- single ---------- */
body.single,body.left{background:#fff;margin:0}body.left{background:var(--bg)}
body.single .top,body.single .hello,body.single .promise,body.single .dock,body.single .ah{display:none}
body.single .feed{padding:10px 16px 12px;gap:0}
/* ---------- states ---------- */
.hidden2{opacity:0!important}
.it.go{box-shadow:0 0 0 2px var(--c)}
.it.hi{background:var(--tint)}
.rota .t.go{background:var(--who)}
.chipA.on i{background:var(--c)}
.cal .c.sel{background:var(--tint)}
.fld.hi .v{background:var(--tint);color:var(--deep)}
.meds .p i.tkx{background:var(--c)}
.dep .dot.done{background:var(--c);border-color:var(--c)}
.step.hi .lbl{color:var(--deep)}
/* ---------- real setup sheet ---------- */
.sheetwrap{position:fixed;inset:0;z-index:20;display:flex;justify-content:center;align-items:flex-end;background:rgba(23,25,29,0);pointer-events:none;transition:background-color var(--t-slow,240ms) var(--ease,cubic-bezier(.2,0,0,1))}
.sheetwrap.open{background:rgba(23,25,29,.42);pointer-events:auto}
.sh{width:390px;max-width:100%;height:92vh;max-height:860px;background:var(--bg);border-radius:26px 26px 0 0;box-shadow:0 -10px 40px -20px rgba(23,25,29,.5);display:flex;flex-direction:column;transform:translateY(104%);transition:transform var(--t-slow,240ms) var(--ease-out,cubic-bezier(0,0,0,1));overflow:hidden;--c:#0E7C86;--tint:#E3F1F2;--deep:#0B5F66}
.sheetwrap.open .sh{transform:none}
body.single .sheetwrap,body.sheetonly .sheetwrap{position:static;background:none;pointer-events:auto;display:block}
body.sheetonly .sh{transform:none;height:auto;max-height:none;border-radius:0;box-shadow:none;margin:0 auto}
body.sheetonly .top,body.sheetonly .hello,body.sheetonly .promise,body.sheetonly .feed,body.sheetonly .dock{display:none}
.sh .hd{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.sh .hd .grab{position:absolute;left:50%;top:7px;width:36px;height:4px;border-radius:2px;background:rgba(23,25,29,.18);transform:translateX(-50%)}
.sh .hd .x{width:34px;height:34px;border-radius:17px;background:#fff;box-shadow:0 1px 2px rgba(23,25,29,.08);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;flex:none}
.sh .hd .ttl{flex:1;min-width:0}
.sh .hd .ttl b{display:block;font-family:Fraunces,serif;font-variation-settings:'SOFT' 60;font-size:17px;font-weight:600;line-height:1.1}
.sh .hd .ttl span{font-size:11.5px;color:var(--dim)}
.sh .steps2{display:flex;gap:4px;padding:0 16px 10px}
.sh .steps2 i{flex:1;height:3px;border-radius:2px;background:rgba(23,25,29,.12)}
.sh .steps2 i.done{background:var(--c)}.sh .steps2 i.now{background:var(--c);opacity:.5}
.sh .bd{flex:1;overflow-y:auto;padding:4px 16px 20px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.sh .ft{padding:10px 16px 22px;display:flex;gap:8px;align-items:center;background:linear-gradient(180deg,rgba(242,239,233,0),var(--bg) 30%)}
.sh .ft .primary{flex:1;height:48px;border-radius:24px;background:var(--c);color:#fff;font-weight:600;font-size:15px;border:0;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 12px 28px -14px var(--c);cursor:pointer;font-family:inherit}
.sh .ft .primary:disabled{opacity:.45;box-shadow:none;cursor:default}
.sh .ft .ghostb{height:48px;padding:0 16px;border-radius:24px;background:#fff;border:0;font-weight:500;font-size:14px;color:var(--mute);box-shadow:0 1px 2px rgba(23,25,29,.08);cursor:pointer;font-family:inherit}
.sh h3{font-family:Fraunces,serif;font-variation-settings:'SOFT' 60;font-size:22px;font-weight:600;line-height:1.12;margin:6px 0 0}
.sh p{margin:0;font-size:14px;line-height:1.5;color:var(--mute)}
.sh .card2{background:#fff;border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 2px rgba(23,25,29,.05),0 10px 24px -20px rgba(23,25,29,.3)}
.sh .crow{display:flex;align-items:center;gap:10px}
.sh .crow .ic2{width:36px;height:36px;border-radius:18px;background:var(--tint);display:flex;align-items:center;justify-content:center;flex:none;font-weight:700;color:var(--deep);font-size:13px}
.sh .crow .t{flex:1;min-width:0}
.sh .crow .t b{display:block;font-size:14px;font-weight:600}
.sh .crow .t span{font-size:12px;color:var(--mute);line-height:1.3;display:block}
.sh .st{font-size:11px;font-weight:600;padding:3px 8px;border-radius:8px;background:var(--bg);color:var(--mute);white-space:nowrap;flex:none}
.sh .st.ok{background:var(--greenbg);color:var(--green)}.sh .st.warn{background:var(--amberbg);color:var(--amber)}.sh .st.bad{background:var(--rosebg);color:var(--rose)}
.sh input[type=text],.sh textarea,.sh select{width:100%;box-sizing:border-box;font-family:inherit;font-size:14.5px;padding:11px 13px;border-radius:12px;border:0;background:#fff;box-shadow:inset 0 0 0 1px rgba(23,25,29,.1);color:var(--ink);outline:none}
.sh input[type=text]:focus,.sh textarea:focus{box-shadow:inset 0 0 0 2px var(--c)}
.sh textarea{min-height:64px;resize:vertical;line-height:1.4}
.sh label.l{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);display:block;margin:4px 0 -2px}
.sh .people{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sh .person{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 4px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(23,25,29,.08);font-size:13px;font-weight:500}
.sh .person .who{width:24px;height:24px;border-radius:12px;font-size:10px}
.sh .person button{border:0;background:transparent;color:var(--dim);font-size:15px;cursor:pointer;padding:0 4px;line-height:1}
.sh .addp{display:flex;gap:6px}
.sh .addp input{flex:1}
.sh .addp button{height:42px;padding:0 14px;border-radius:12px;border:0;background:var(--ink);color:#fff;font-weight:600;font-family:inherit;cursor:pointer}
.sh .mailrow{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 1px 2px rgba(23,25,29,.06);cursor:pointer}
.sh .mailrow .bx{width:20px;height:20px;border-radius:7px;border:1.5px solid #B9C3C9;flex:none;margin-top:2px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:#fff}
.sh .mailrow.on .bx{background:var(--c);border-color:var(--c)}
.sh .mailrow .f{font-size:13px;font-weight:600;line-height:1.25}
.sh .mailrow .s{font-size:12px;color:var(--mute);line-height:1.3;margin-top:2px}
.sh .mailrow .d{font-size:10.5px;color:var(--dim);white-space:nowrap;flex:none;padding-top:2px}
.sh .prop{background:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 1px 2px rgba(23,25,29,.06);display:flex;flex-direction:column;gap:6px}
.sh .prop.off{opacity:.5}
.sh .prop .top2{display:flex;gap:10px;align-items:flex-start}
.sh .prop .bx{width:20px;height:20px;border-radius:7px;border:1.5px solid #B9C3C9;flex:none;margin-top:1px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer}
.sh .prop.on .bx{background:var(--c);border-color:var(--c)}
.sh .prop .ti{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.25}
.sh .prop .meta2{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--mute)}
.sh .whochip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 3px;border-radius:12px;background:var(--bg);font-size:11.5px;font-weight:600;cursor:pointer;border:0;font-family:inherit;color:var(--ink)}
.sh .whochip .who{width:18px;height:18px;font-size:9px}
.sh .why{font-size:11.5px;color:var(--dim);line-height:1.3;font-style:italic}
.sh .clash2{display:flex;gap:8px;align-items:flex-start;background:var(--rosebg);color:var(--rose);border-radius:10px;padding:7px 9px;font-size:12px;line-height:1.35}
.sh .clash2 b{font-weight:700}
.sh .okline{display:flex;gap:8px;align-items:center;background:var(--greenbg);color:var(--green);border-radius:10px;padding:7px 9px;font-size:12px}
.sh .errbox{background:var(--rosebg);color:var(--rose);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.4}
.sh .errbox b{display:block;font-weight:700;margin-bottom:2px}
.sh .infobox{background:var(--amberbg);color:var(--amber);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.4}
.sh .spin{width:18px;height:18px;border-radius:9px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite;flex:none}
.sh .spin.dark{border-color:rgba(23,25,29,.15);border-top-color:var(--c)}
@keyframes spin{to{transform:rotate(360deg)}}
.sh .busy{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--mute);padding:6px 2px}
.sh .done2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px 10px 10px}
.sh .done2 .big{width:64px;height:64px;border-radius:32px;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center}
.sh .evlink{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:9px 12px;font-size:13px;box-shadow:0 1px 2px rgba(23,25,29,.06)}
.sh .evlink a{color:var(--c);font-weight:600;text-decoration:none;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:13px;padding:10px 16px;border-radius:14px;opacity:0;transition:opacity var(--t,200ms) var(--ease-out,cubic-bezier(0,0,0,1)),transform var(--t,200ms) var(--ease-out,cubic-bezier(0,0,0,1));z-index:30;pointer-events:none;max-width:320px;text-align:center;line-height:1.35}
.toast.on{opacity:1;transform:translateX(-50%)}
.cta.real{background:var(--c)}
/* ---------- theme (D22, docs/THEME.md): light-first. Cream ground, white cards, butter second surface, bubble-gum primary; dark is the warm night version.
   The same tokens and structure as server/src/views.js (the bare :root is light; dark under prefers-color-scheme guarded by data-theme, and under [data-theme=dark]);
   --sf, --deep and --brand are the showcase's older names for --card, --c-deep and --c. Stages keep their own scene tokens: they are pictures of other products. ---------- */
:root{--bg:#F4F2E6;--card:#FFFFFF;--sf:#FFFFFF;--card2:#F6F0DA;--line:#E3E0D0;--ink:#23221D;--mute:#615F58;--dim:#6F6D66;--c:#FFB8E0;--cink:#321727;--c-deep:#913670;--deep:#913670;--brand:#FFB8E0;--tint:rgba(255,184,224,0.22);--butter:#E7D07F;--butterbg:#FDF4D2;--green:#317A45;--greenbg:#E0F7E4;--amber:#996103;--amberbg:#FFF0D7;--rose:#B94642;--rosebg:#FEEBEA;--glass:rgba(244,242,230,0.84);--glow:rgba(231,208,127,0.55);--sceneink:#E8ECF0;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#12120E;--card:#201F1B;--sf:#201F1B;--card2:#2D2B26;--line:#393832;--ink:#F0EFE7;--mute:#B9B8AE;--dim:#949289;--c:#FFB8E0;--cink:#321727;--c-deep:#E8A7CC;--deep:#E8A7CC;--brand:#FFB8E0;--tint:rgba(255,184,224,0.16);--butter:#E0CA7D;--butterbg:#2C2612;--green:#63B376;--greenbg:rgba(99,179,118,0.15);--amber:#DA9E3F;--amberbg:rgba(218,158,63,0.15);--rose:#E97871;--rosebg:rgba(233,120,113,0.15);--glass:rgba(18,18,14,0.82);--glow:rgba(255,184,224,0.35);--sceneink:#E8ECF0;color-scheme:dark}}
:root[data-theme=dark]{--bg:#12120E;--card:#201F1B;--sf:#201F1B;--card2:#2D2B26;--line:#393832;--ink:#F0EFE7;--mute:#B9B8AE;--dim:#949289;--c:#FFB8E0;--cink:#321727;--c-deep:#E8A7CC;--deep:#E8A7CC;--brand:#FFB8E0;--tint:rgba(255,184,224,0.16);--butter:#E0CA7D;--butterbg:#2C2612;--green:#63B376;--greenbg:rgba(99,179,118,0.15);--amber:#DA9E3F;--amberbg:rgba(218,158,63,0.15);--rose:#E97871;--rosebg:rgba(233,120,113,0.15);--glass:rgba(18,18,14,0.82);--glow:rgba(255,184,224,0.35);--sceneink:#E8ECF0;color-scheme:dark}
/* second-order tokens on the base keys, the same as the shell's: washes of the ink, the ground at .94 for the tab bar, the primary 6% darker, the mark tile, the glow line, eight warm pastels for people */
:root{--hover:color-mix(in srgb,var(--ink) 6%,transparent);--shimmer:color-mix(in srgb,var(--ink) 7%,transparent);--edge:color-mix(in srgb,var(--ink) 8%,transparent);--tabglass:color-mix(in srgb,var(--bg) 94%,transparent);--c-hover:color-mix(in srgb,var(--c) 94%,var(--cink));--mark-tile:var(--c);--mark-ink:var(--cink);--glow-line:var(--butter);--who-0:#F6C9B4;--who-1:#F1DC9A;--who-2:#C9DDB8;--who-3:#BFD7EA;--who-4:#D4C6EC;--who-5:#F3B8C4;--who-6:#E6D3B3;--who-7:#BFE3D3;--who-ink:#3B2E2A;--card-edge:color-mix(in srgb,var(--ink) 16%,transparent)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--glow-line:var(--c);--card-edge:var(--edge)}}
:root[data-theme=dark]{--glow-line:var(--c);--card-edge:var(--edge)}
/* motion tokens, the same as the shell's (server/src/views.js): one easing family, three durations, plus the two stage durations (a beat inside the frame, the loop's crossfade) and the two named long ones (the primary's drift, the skeleton's sweep). Nothing writes its own curve or duration (docs/DESIGN.md Motion, D28 §6) */
:root{--ease:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(0,0,0,1);--ease-in:cubic-bezier(.3,0,1,1);--t-fast:80ms;--t:200ms;--t-slow:240ms;--t-beat:400ms;--t-loop:900ms;--t-drift:6s;--t-shimmer:1.4s}

body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',Inter,Geist,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
.disp,h1,h2,.hook{font-family:inherit;font-variation-settings:normal;letter-spacing:-.02em;font-weight:700}
/* the scene inside each card keeps the light palette it was drawn with */
.stage{--sf:#fff;--c-deep:#0B5F66;--c:#0E7C86;--brand:#0E7C86;--tint:#E3F1F2;--deep:#0B5F66;--ink:#23221D;--mute:#615F58;--dim:#6F6D66;--line:#E7E3DB;--bg:var(--stage);--amber:#996103;--amberbg:#FFF0D7;--rose:#B94642;--rosebg:#FEEBEA;--green:#317A45;--greenbg:#E0F7E4;--plum:#6D4FA3;--plumbg:#ECE6F6;--indigo:#4756C9;--indigobg:#E7E9FA;color-scheme:light}
.stage{color:var(--ink)}
.stage.dark,.stage.deep{color:var(--sceneink)}
.stage.white{border-bottom:0}
/* shell */
.top{background:var(--glass)}
.wm{color:var(--ink);font-weight:600;letter-spacing:calc(-.02em - 1px)}
/* the landing's wordmark carries the tagline under the name (D27, docs/COPY.md Name) */
.ld-wn{display:flex;flex-direction:column;line-height:1.1}.ld-tag{font-size:12px;font-weight:500;letter-spacing:0;color:var(--mute)}
.ico{background:var(--card2);box-shadow:none;color:var(--ink)}
.avatar{box-shadow:inset 0 0 0 2px var(--bg)}
.chipA{background:var(--sf);box-shadow:none;color:var(--mute)}
.chipA.on{background:var(--ink);color:var(--bg)}
.chipA i{box-shadow:none}
.hello .eyebrow{color:var(--c-deep)}
.hello h1{font-size:32px;line-height:1.08}
.hello p{color:var(--mute)}
.promise{background:var(--sf);box-shadow:none}
.promise svg path{fill:var(--tint);stroke:var(--c-deep)}
.ah h2{color:var(--ink);font-weight:700}
.ah h2 i{background:var(--cl,var(--c))}
.dock{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 0%,transparent),color-mix(in srgb,var(--bg) 96%,transparent) 45%)}
.dock .in{background:var(--sf);box-shadow:0 10px 30px -14px color-mix(in srgb,var(--ink) 45%,transparent)}
.dock .b{background:var(--card2)}
.dock .b.send{background:var(--c)}
/* card frame */
.card{background:var(--sf);box-shadow:none}
.meta .eyebrow{color:var(--mute)}
.meta .eyebrow::before{content:'';width:8px;height:8px;border-radius:4px;background:var(--cl);flex:none}
.meta .hook{color:var(--ink);font-size:20px}
.meta .body{color:var(--mute)}
.meta .conn{color:var(--dim)}
/* one action surface per page pair (Von Restorff, docs/knowledge/ux-laws.md): the quiet pill for every card, the bubble-gum primary on the one recommended pick (the first REAL setup); the area's hue stays on the eyebrow's dot. Both pass AA in both schemes (render_metrics.py contrast chrome) */
.cta,.cta.real{background:var(--card2);color:var(--ink)}
.cta.primary{background:var(--c);color:var(--cink)}
/* setup sheet */
.sheetwrap.open{background:rgba(0,0,0,.55)}
.sh{background:var(--bg);box-shadow:none}
.sh .hd .grab{background:var(--card2)}
.sh .hd .x{background:var(--card2);box-shadow:none;color:var(--ink)}
.sh .hd .x svg path,.sh .hd .x svg line{stroke:var(--ink)}
.sh .hd .ttl b{font-family:inherit;font-variation-settings:normal;font-weight:700}
.sh h3{font-family:inherit;font-variation-settings:normal;font-weight:700;letter-spacing:-.02em}
.sh .steps2 i{background:var(--card2)}
.sh .ft{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 30%)}
.sh .ft .primary{color:var(--cink);box-shadow:none}
.sh .ft .ghostb{background:var(--card2);color:var(--ink);box-shadow:none}
.sh .card2{background:var(--sf);box-shadow:none}
.sh .crow .ic2{color:var(--c)}
.sh .st{background:var(--card2);color:var(--mute)}
.sh input[type=text],.sh textarea,.sh select{background:var(--card2);box-shadow:none}
.sh .person{background:var(--card2);box-shadow:none;color:var(--ink)}
.sh .addp button{background:var(--c);color:var(--cink)}
.sh .mailrow,.sh .prop,.sh .evlink{background:var(--sf);box-shadow:none}
.sh .mailrow .bx,.sh .prop .bx{border-color:var(--dim)}
.sh .mailrow.on .bx,.sh .prop.on .bx{color:var(--cink)}
.sh .whochip{background:var(--card2);color:var(--ink)}
.sh .spin.dark{border-color:var(--card2)}
.sh .done2 .big{color:var(--cink)}
.toast{background:var(--ink);color:var(--bg)}
/* ---------- app surfaces: explore + landing ---------- */
.dock form,form.dock{margin:0}
.dock .in input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;font-size:16px;outline:none}
.dock .in input::placeholder{color:var(--dim)}
.dock .b.send{border:0;cursor:pointer}
body.inapp .dock{bottom:58px;padding-bottom:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 0%,transparent),color-mix(in srgb,var(--bg) 96%,transparent) 60%)}
body.inapp .feed{padding-bottom:110px}
body.inapp .feed:has(+.xend),body.inapp .feed:has(+.xend-q){padding-bottom:0}.bigcta.xend{margin:12px 16px 110px}.xend-q{margin:28px 20px 0;font-size:15px;line-height:1.45;color:var(--mute);text-align:center}
/* the tab bar's clearance belongs to the page's last feed, never to the Featured rail mid-page (round 2, finding 11: a 110 px band under the rail on the phone; render_metrics.py flow sec_gap) */
body.inapp .feed.featured{padding-bottom:18px}
.xh{padding:16px 20px 0}
.xh h1{margin:0;font-size:30px;line-height:1.08}
.xh p{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--mute)}
#results{margin:12px 20px 0;font-size:14px;color:var(--mute)}
#results b{color:var(--ink)}
#results a{color:var(--c-deep);font-weight:500}
.feed.featured{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:10px 20px 18px;scrollbar-width:none}
.feed.featured::-webkit-scrollbar{display:none}
.feed.featured .card{flex:none;width:340px;scroll-snap-align:center}
.ld{padding:8px 20px 0}
.ld h1{margin:14px 0 0;font-size:34px;line-height:1.06}
.ld .sub{margin:10px 0 0;font-size:16px;line-height:1.45;color:var(--mute);max-width:34ch}
.ask{margin:18px 0 0;background:var(--sf);border-radius:22px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}
.ask textarea{width:100%;box-sizing:border-box;background:none;border:0;color:var(--ink);font:inherit;font-size:17px;line-height:1.4;resize:none;outline:none;min-height:54px}
.ask textarea::placeholder{color:var(--dim)}
.ask .r{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ask .r span{font-size:12.5px;color:var(--dim)}
.ask .go{width:40px;height:40px;border-radius:20px;background:var(--c);color:var(--cink);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.quick{display:flex;gap:6px;overflow-x:auto;padding:10px 20px 0;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick a{flex:none;height:34px;padding:0 13px;border-radius:17px;background:var(--sf);color:var(--mute);font-size:13.5px;font-weight:500;display:flex;align-items:center;text-decoration:none}
.secl{display:flex;align-items:baseline;justify-content:space-between;padding:22px 20px 0}
.secl h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.secl a{font-size:14px;color:var(--c-deep);text-decoration:none;font-weight:500}
.pitch{margin:8px 20px 0;background:var(--sf);border-radius:22px;overflow:hidden}
.pitch .p{display:flex;gap:14px;padding:16px;align-items:flex-start}
.pitch .p+.p{border-top:1px solid var(--line)}
.pitch .pic{width:40px;height:40px;border-radius:12px;background:var(--tint);color:var(--c-deep);display:flex;align-items:center;justify-content:center;flex:none}
.pitch b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}
.pitch span{display:block;font-size:14px;line-height:1.45;color:var(--mute);margin-top:3px}
.bigcta{display:flex;align-items:center;justify-content:center;height:50px;margin:14px 20px 0;border-radius:25px;background:var(--c);color:var(--cink);font-weight:600;font-size:16px;text-decoration:none}
.bigcta.ghost{background:var(--sf);color:var(--ink)}
.signin{margin:14px 20px 0;background:var(--sf);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:10px}
.signin b{font-size:17px;font-weight:600}
.signin .in{display:flex;gap:8px}
.signin input{flex:1;min-width:0;background:var(--card2);border:0;border-radius:14px;padding:0 14px;height:46px;color:var(--ink);font:inherit;font-size:16px;outline:none}
.signin button{height:46px;padding:0 16px;border-radius:23px;background:var(--c);color:var(--cink);border:0;font:inherit;font-weight:600;font-size:15px;cursor:pointer}
.signin small{font-size:12.5px;color:var(--dim)}
.landfoot{padding:28px 20px 160px;text-align:center;font-size:12.5px;color:var(--dim);line-height:1.5}

/* design language, mirrored from server/src/views.js */
.glass{background:color-mix(in srgb,var(--sf) 72%,transparent);border:1px solid var(--edge);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.glow{position:relative}.glow::after{content:'';position:absolute;left:12%;right:12%;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--glow-line),transparent);box-shadow:0 0 18px 4px var(--glow);pointer-events:none}
/* arrival: 200ms rise, 10ms steps, the same as the shell; a screen is fully in by 240ms */
.rise{opacity:0;transform:translateY(6px);animation:rise var(--t) var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 10ms)}
@keyframes rise{to{opacity:1;transform:none}}
.rise.arrived{opacity:1;transform:none;animation:none}
.grad{background:linear-gradient(110deg,var(--c),var(--c-hover) 45%,var(--c) 90%);background-size:220% 100%;animation:drift var(--t-drift) var(--ease) infinite alternate;transition:transform var(--t-fast) var(--ease)}
@keyframes drift{to{background-position:100% 0}}
.grad:hover{transform:translateY(-1px)}
/* in the app, cards rise in as they enter the viewport (the slow duration: a card is bigger than a row) */
body.inapp .card{opacity:0;transform:translateY(8px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
body.inapp .card.in{opacity:1;transform:none}
body.inapp .ah{opacity:0;transform:translateY(6px);transition:opacity var(--t) var(--ease-out),transform var(--t) var(--ease-out)}
body.inapp .ah.in{opacity:1;transform:none}

/* ---------- desktop (>= 900px): sidebar + centred column; cards in a grid ---------- */
@media(min-width:900px){
body.inapp{max-width:none;padding-left:var(--sbw,280px)}html.sb-ready body.inapp{transition:padding-left var(--t) var(--ease)}
body.inapp .top{position:sticky;top:0}
body.inapp .bar{display:none}
/* signed out there is no sidebar: no room kept for it, and the bar carries the wordmark and Sign in (D27) */
body.inapp.ld-out{padding-left:0}body.inapp.ld-out .bar{display:flex;max-width:1180px;margin:0 auto;padding:10px 24px 0}
body.inapp .chips{max-width:1180px;margin:0 auto;padding:18px 24px 10px}
body.inapp .feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,400px));justify-content:center;gap:16px;max-width:1180px;margin:0 auto;padding:8px 24px 160px;align-items:start}
body.inapp .feed .ah{grid-column:1/-1;padding:26px 6px 2px}
/* featured: columns never narrower than 300px (the scenes were drawn for that), so two at 1024 and three from about 1280 */
body.inapp .feed.featured{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:10px 24px 18px;overflow:visible;max-width:1180px}
body.inapp .feed.featured .card{width:auto}
body.inapp .xh,body.inapp #results{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
body.inapp .dock{left:calc(50% + 140px);width:720px;bottom:0;padding:16px 0 28px}
body.inapp .ld{max-width:760px;margin:36px auto 0;padding:0 24px;text-align:center}
body.inapp .ld h1{font-size:40px}
body.inapp .ld .sub{margin-left:auto;margin-right:auto;max-width:50ch}
body.inapp .ask textarea{font-size:18px;min-height:60px;text-align:left}
body.inapp .quick{justify-content:center;flex-wrap:wrap;overflow:visible;max-width:760px;margin:0 auto;padding-top:14px;-webkit-mask-image:none;mask-image:none}
body.inapp .quick::after{display:none}
body.inapp .secl{max-width:1180px;margin:0 auto;padding:30px 24px 0}
body.inapp .pitch{margin:8px auto 0;border-radius:22px}
body.inapp .bigcta,body.inapp .signin{max-width:520px;margin-left:auto;margin-right:auto}
body.inapp .xend{margin:12px auto 60px}body.inapp .xend-q{max-width:1132px;margin:32px auto 0}
body.inapp .landfoot{padding-bottom:60px}
body.inapp .tabbar{display:none}
}

/* Explore search lives in the sticky header beside the chips, never floating over the cards */
.xtop{display:flex;flex-direction:column;gap:8px;padding:0 0 10px}
.xtop .chips{padding:10px 16px 0}
.xs{display:flex;align-items:center;gap:8px;margin:0 16px;height:40px;padding:0 12px;border-radius:14px;background:var(--sf);border:1px solid var(--edge);color:var(--mute)}
.xs:focus-within,.ask:focus-within{border-color:var(--c-deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-deep) 18%,transparent)}
.signin input:focus{box-shadow:0 0 0 2px var(--c-deep)}
.xs input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;font-size:15px;outline:none}
.xs input::placeholder{color:var(--dim)}
.xs input::-webkit-search-cancel-button{-webkit-appearance:none}
.xs kbd{font:inherit;font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:1px 6px;line-height:1.4}
@media(max-width:899px){.xs kbd{display:none}
body.inapp .top:has(.xtop){display:contents}body.inapp .xtop{display:contents}
body.inapp .xrail{position:sticky;top:0;z-index:5;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding-bottom:8px}
body.inapp .xtop .xs{margin-top:4px;margin-bottom:10px}}
.xrail{min-width:0}
@media(min-width:900px){
body.inapp .xtop{flex-direction:row;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto;padding:16px 24px 10px;gap:16px}
body.inapp .xtop .chips{padding:0;margin:0;flex:1;min-width:0}
body.inapp .xs{width:260px;flex:none;margin:0}
body.inapp .feed{padding-bottom:60px}
}
/* the narrow desktop (900 to 1279): a shorter search so the chips keep their room; they scroll under a fade either way */
@media(min-width:900px) and (max-width:1279px){body.inapp .xs{width:200px}}
/* chip rails fade out at their scroll end so a cut chip reads as "more", and leave room after the last chip so it can clear the fade */
.chips,.quick{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,1) calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,rgba(0,0,0,1) calc(100% - 40px),transparent)}
.chips::after,.quick::after{content:'';flex:none;width:28px}
/* a tablet, or a phone held sideways (600 to 899px): the phone shell in a centred 560px column; the tab bar is inset to it in TABS_CSS */
@media(min-width:600px) and (max-width:899px){body.inapp{max-width:560px}}
/* at 360 the promise line goes under the send button instead of wrapping against it */
@media(max-width:379px){.ask .r{flex-wrap:wrap}.ask .r span{order:2;flex:1 0 100%;margin-top:2px}.ask .go{margin-left:auto}}

/* ---------- 2026-10-29: the front door and Explore as a catalogue (docs/COPY.md) ---------- */
.bar .r a{text-decoration:none}
.ld-signin{color:var(--c-deep);font-weight:600;font-size:15px}
.ld-av{width:34px;height:34px;border-radius:17px;display:inline-flex;align-items:center;justify-content:center;background:var(--card2);background-image:none;box-shadow:none;color:var(--ink);font-weight:700;font-size:13px;line-height:1;text-decoration:none}
/* a person's initials on one of eight colours (the same tokens as the shell) */
.who{background:var(--who-0);color:var(--who-ink)}.who.w1{background:var(--who-1)}.who.w2{background:var(--who-2)}.who.w3{background:var(--who-3)}.who.w4{background:var(--who-4)}.who.w5{background:var(--who-5)}.who.w6{background:var(--who-6)}.who.w7{background:var(--who-7)}
.ld-back{display:inline-flex;align-items:center;gap:4px;color:var(--c-deep);text-decoration:none;font-size:16px;font-weight:500;margin-left:-4px}
.ld-flash{margin:12px 0 0;background:var(--tint);color:var(--c-deep);border-radius:14px;padding:12px 14px;font-size:15px}
.ld-flash.bad{background:var(--rosebg);color:var(--rose)}
.signin small a,.landfoot a{color:var(--c-deep)}
/* the eyebrow row carries the Runs-today badge */
.meta .eyebrow{display:flex;align-items:center;gap:8px}
/* the badge in sentence case like every other label, and no dot of its own: the eyebrow's line already carries the area's dot (design pass completeness, finding 13) */
.xp-real{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;background:var(--greenbg);color:var(--green);font-size:10.5px;font-weight:600}
body.inapp .meta .body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.inapp .meta .hook{font-size:19px}
/* the card is a product: lifts 2px with a shadow on hover, a visible ring on keyboard focus */
.card{border:1px solid var(--card-edge);transition:opacity var(--t-slow) var(--ease-out),transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease)}
@media(hover:hover){body.inapp .card.in:hover{transform:translateY(-2px);box-shadow:0 14px 34px -20px color-mix(in srgb,var(--ink) 40%,transparent),0 2px 6px color-mix(in srgb,var(--ink) 8%,transparent)}}
.stage{outline:none}
.stage:focus-visible{box-shadow:inset 0 0 0 2px var(--c-deep)}
/* the card's ring follows keyboard focus only (never a mouse click on the stage), and it stays when the pointer rests on the card: written after the hover lift, at its specificity */
.card:has(:focus-visible){box-shadow:0 0 0 2px var(--c-deep)}
@media(hover:hover){body.inapp .card.in:has(:focus-visible){box-shadow:0 0 0 2px var(--c-deep)}}
.cta:focus-visible,.chipA:focus-visible,.quick a:focus-visible,.bigcta:focus-visible,.ask .go:focus-visible,.signin button:focus-visible,.ld-back:focus-visible{outline:2px solid var(--c-deep);outline-offset:2px}
.cta{cursor:pointer;transition:transform var(--t-fast) var(--ease),filter var(--t-fast) var(--ease)}.cta:hover{filter:brightness(1.08)}.cta:active{transform:scale(.97)}
/* Explore: area chips are one segmented control */
.chips{gap:4px;padding:10px 16px 0}
.chipA{height:34px;padding:0 13px;border-radius:17px;background:transparent;color:var(--mute);font-size:13.5px;font-weight:500;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.chipA i{width:7px;height:7px;border-radius:4px;background:var(--c-deep);box-shadow:none;opacity:.8}
.chipA.on{background:var(--ink);color:var(--bg);box-shadow:none}
.chipA.on i{background:var(--bg);opacity:1}
.chipA[hidden]{display:none}.chipA.more{color:var(--ink)}
.chipA:hover{color:var(--ink)}
body.inapp .ah{display:flex;align-items:baseline;gap:10px;padding:24px 6px 2px}
body.inapp .ah h2{font-size:22px}
body.inapp .ah span{font-size:13px;color:var(--dim);margin-left:auto}
/* landing: the proofs and the three screens */
.pitch .p{align-items:flex-start}
.pitch b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ld-next{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;background:var(--amberbg);color:var(--amber);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-style:normal}
.ld-how{margin:8px 20px 0;display:flex;flex-direction:column;gap:12px}
/* a step is not a card of its own: the screenshot is the one framed surface and the composer or job card inside it the second level (two border levels, design pass completeness finding 16; render_metrics.py borders ld_nest) */
.ld-step{display:flex;flex-direction:column;gap:10px}
.ld-step>b{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.ld-step>b i{width:24px;height:24px;border-radius:12px;background:var(--c);color:var(--cink);font-style:normal;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ld-step>span{font-size:14px;line-height:1.45;color:var(--mute);margin-top:-4px}
.ld-shot{background:var(--sf);border-radius:16px;padding:16px 14px;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:10px;font-size:12.5px;line-height:1.35;color:var(--ink);border:1px solid var(--edge);overflow:hidden}
.ld-shot .ld-mark{width:30px;height:30px;border-radius:10px;background:var(--mark-tile);display:inline-flex;align-items:center;justify-content:center;align-self:center}
.ld-greet{font-family:ui-serif,'New York','Iowan Old Style',Georgia,serif;font-size:15px;text-align:center;color:var(--mute);line-height:1.25}
.ld-greet b{font-weight:500;color:var(--ink)}
.ld-box{background:var(--sf);border:1px solid var(--edge);border-radius:14px;padding:10px 10px 8px 12px;display:flex;flex-direction:column;gap:8px;position:relative}
/* the How it works shots are flat pictures of the chat: no halo and no glow line (one glow per screen, docs/DESIGN.md; the composer above carries it) */
.ld-box>span{color:var(--ink)}
.ld-row{display:flex;align-items:center;gap:6px}
.ld-row i{width:22px;height:22px;border-radius:11px;background:var(--card2);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:14px}
.ld-row em{height:20px;padding:0 8px;border-radius:10px;background:var(--card2);color:var(--mute);font-style:normal;font-size:11px;font-weight:500;display:inline-flex;align-items:center}
.ld-row b{margin-left:auto;width:24px;height:24px;border-radius:12px;background:var(--c);color:var(--cink);display:inline-flex;align-items:center;justify-content:center}
.ld-row b svg{width:13px;height:13px}
.ld-msg{background:var(--sf);border-radius:14px 14px 14px 5px;padding:9px 11px;color:var(--ink);max-width:94%}
.ld-job{background:color-mix(in srgb,var(--sf) 72%,transparent);border:1px solid var(--edge);border-radius:14px;padding:10px 11px;display:flex;flex-direction:column;gap:3px}
.ld-job b{font-weight:600}
.ld-job small{font-size:11px;color:var(--dim)}
.ld-acts{display:flex;align-items:center;gap:10px;margin-top:6px}
.ld-do{height:26px;padding:0 12px;border-radius:13px;background:var(--c);color:var(--cink);font-weight:600;font-size:12px;display:inline-flex;align-items:center}
.ld-not{color:var(--dim);font-weight:500;font-size:12px}
.ld-kept{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);font-weight:500;padding:0 2px}
.ld-kept i{height:20px;padding:0 8px;border-radius:10px;background:var(--greenbg);color:var(--green);font-style:normal;font-size:11px;font-weight:600;display:inline-flex;align-items:center}
.ld-ev{display:flex;align-items:center;gap:8px;background:var(--sf);border-radius:12px;padding:8px 10px}
.ld-ev .who{width:22px;height:22px;border-radius:11px;font-size:9.5px}
.ld-ev span:not(.who){flex:1;font-weight:500;color:var(--ink)}
.ld-ev small{font-size:11px;color:var(--dim);white-space:nowrap}
.ld-feedline{font-size:11px;color:var(--green);padding:0 2px}
/* ask for it: a pre-order, one screen */
.wt{padding:8px 20px 0}
.wt-feed{padding:0;gap:0}
body.inapp .wt-feed{padding-bottom:0}
.card.bare .stage{min-height:300px;border-radius:24px}
.wt-ask{margin:14px 0 0;background:var(--sf);border:1px solid var(--edge);border-radius:22px;padding:18px 16px 16px;display:flex;flex-direction:column;gap:10px}
.wt-ask .eyebrow{color:var(--c-deep)}
.wt-ask h1{margin:0;font-size:26px;line-height:1.1}
.wt-ask p{margin:0;font-size:15px;line-height:1.45;color:var(--mute)}
.wt-ask .wt-count{color:var(--ink);font-size:14px}.wt-ask .wt-count b{color:var(--c-deep)}
.wt-ask form{margin:0}
.wt-btn{margin:4px 0 0;width:100%;border:0;font:inherit;font-weight:600;font-size:16px;cursor:pointer}
.wt-ask small{font-size:12.5px;color:var(--dim);text-align:center}
@media(min-width:900px){
body.inapp .ld-how{margin:8px auto 0;display:grid;gap:16px}
body.inapp .wt{max-width:760px;margin:24px auto 0;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
body.inapp .wt-ask{margin:0}
body.inapp .wt-ask .bigcta{max-width:none;margin:4px 0 0}
body.inapp .feed.wt-feed{display:block;max-width:none;padding:0}
}
/* shadows and the toast are written on the ink and the ground, so both schemes carry them */
.card{box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent)}
.top,.dock,body.inapp .dock{background:var(--glass)}
.toast{background:var(--ink);color:var(--bg)}

/* ---------- 2026-10-31: the design pass (D28, B40), arm D2: Explore and the landing layout (docs/DESIGN-PASS.md §2 A2, A9, B1, B2, B5, B6, B7, Fitts; §4). Measured by tools/render_metrics.py and the edges number ---------- */
/* nothing a person reads is under 13 px (docs/DESIGN.md Density): the card's meta block, the badges, the notes */
.meta .eyebrow{font-size:13px;letter-spacing:0;height:22px;white-space:nowrap;overflow:hidden}
.xp-real{height:22px;font-size:13px;padding:0 9px;border-radius:11px}
/* the footer's connector line: up to two lines beside the action, centred on it (the footer is 36 px from 900 and 44 on the phone, so two 18 px lines fit
   and every card in a row keeps its height). One clamped line cut the reassurance short ("never your bank login": round 2, finding 13; render_metrics.py
   foot trunc, also read with every card at 340 px). Clamped, not nowrap: the words wrap inside the line's own box, so no text box runs under the button */
.meta .conn{font-size:13px;line-height:18px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;flex:1 1 auto;min-width:0;max-height:36px;text-wrap:pretty}
.meta .conn>span{display:inline-block;vertical-align:-1px;margin-right:5px}
.ld-tag,.ask .r span,.signin small,.landfoot,.wt-ask small,.xs kbd{font-size:13px}
.ld-next{height:22px;font-size:13px;letter-spacing:.04em;border-radius:11px}
.ld-step>b i{font-size:13px}
/* A2: the meta block has a fixed height, so every card in a row is the same height: eyebrow one line (22), hook up to two (19 on 22), body up to two (14 on 20), footer one (44 on the phone, 36 from 900); 16 padding, 8 gaps: 206 on the phone, 198 from 900.
   The lines take their own height and the footer sits at the block's foot (margin-top:auto), so a one-line title or body leaves no blank line under it: what is
   left over collects once, above the footer (design pass completeness, finding 3; render_metrics.py foot blank_lines) */
body.inapp .meta{padding:16px;gap:8px;box-sizing:border-box;height:206px}
body.inapp .meta .hook{font-size:19px;line-height:22px;max-height:44px;flex:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.inapp .meta .body{line-height:20px;max-height:40px;flex:none}
body.inapp .meta .foot{margin-top:auto;height:44px;flex:none}
body.inapp .cta{height:44px;border-radius:22px;padding:0 18px}
/* the slot that keeps a Featured card's place until the deferred card script runs (explore.js slots and BOOT): the card's own geometry, a square stage plus the meta block, on the card's surface, so the sections under the feed never move after paint (metric 1, cls_load) */
.ph{box-sizing:content-box;border-radius:24px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--edge)}
.feed.featured .ph{flex:none;width:340px;height:546px}
/* B1: the phone rail snaps a card to the 20 px gutter and lets each card keep its own height */
.feed.featured{scroll-padding-inline:20px;align-items:flex-start}
.feed.featured .card{scroll-snap-align:start}
/* the phone header's bottom edge is a fade, not a cut: words scrolling under the glass thin out over 12 px instead of losing their tops in one row
   (round 2, finding 20; render_metrics.py flow edge_step). The desktop header already fades (views.js) */
@media(max-width:899px){body.inapp .top:not(:has(.xtop))::after,body.inapp .xrail::after{content:'';position:absolute;left:0;right:0;top:100%;height:12px;background:linear-gradient(var(--glass),transparent);pointer-events:none}}
/* B2 on the phone, Explore: one 16 px gutter for the title, the results line, the chips, the search, the section headers and the cards (the iOS margin; a 20 px gutter made the card 320 wide at 360 and pushed the thank-you scene's third note 4 px past the screen, measured by render_widths.py; the scenes are drawn for about 336) */
body.inapp .ah{padding-left:0;padding-right:0}
.xs{height:44px}.xs input{align-self:stretch;height:44px}
@media(max-width:899px){
body.inapp .xh~.feed{padding-left:16px;padding-right:16px}
.xh{padding-left:16px;padding-right:16px}
#results{margin-left:16px;margin-right:16px}
.chips,.xtop .chips{padding-left:16px;padding-right:16px}
.xs{margin-left:16px;margin-right:16px}
}
/* titles never end on one word alone (round 2, finding 17; render_metrics.py flow orphans): titles balance their lines, the lead lines avoid a lone last word */
.meta .hook,.ld h1,.xh h1,.secl h2,.ah h2,.pitch b{text-wrap:balance}.ld .sub,.xh p{text-wrap:pretty}
/* Start here (Hick): the three picks above the areas; the header's dot in the deep accent, since the primary is a surface */
.ah.start h2 i{background:var(--c-deep)}
/* Fitts: every tappable element 44 x 44 on the phone; the send button and the search are 44 on every width (docs/DESIGN.md, the 4 px grid) */
.ask .go{width:44px;height:44px;border-radius:22px}
@media(max-width:899px){
.ld-av{width:44px;height:44px;border-radius:22px}
.quick a{height:44px;border-radius:22px;padding:0 16px}
.chipA{height:44px;border-radius:22px;padding:0 16px}
.secl a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:-12px -6px;position:relative;z-index:1}
/* a short link in a line of text: a 44 x 44 hit box that is its own layer, so the next line or the card under it never takes the finger (render_metrics.py targets hit) */
.landfoot a,.signin small a{display:inline-block;min-width:44px;text-align:center;padding:13px 6px;margin:-13px -6px;position:relative;z-index:1}
.ld-signin{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:0 -6px}
.ld-back{min-height:44px}
}
/* B7: the lower landing takes the stage scale fully (15 on the phone, 14 from 900; nothing smaller inside a shot) and the three shots are fixed square frames, the stage's own frame (§3): 4:3 was measured and does not hold the step-2 card at this scale */
.ld-shot{font-size:15px;line-height:1.35;aspect-ratio:1;box-sizing:border-box;min-height:0;padding:16px 14px}
.ld-greet{font-size:16px}
.ld-row i{font-size:inherit;width:24px;height:24px;border-radius:12px}
.ld-row em{font-size:inherit;height:24px;border-radius:12px}
.ld-row b{width:28px;height:28px;border-radius:14px}
.ld-job small,.ld-ev small,.ld-kept,.ld-kept i,.ld-feedline,.ld-not,.ld-do{font-size:inherit}
.ld-kept i{height:24px;border-radius:12px}
.ld-do{height:30px;border-radius:15px;padding:0 14px}
.ld-ev .who{width:24px;height:24px;border-radius:12px;font-size:inherit}
/* motion: nothing moves for people who asked it not to, on the card surfaces as on the shell (views.js): one block (D28 §6, D5's declaration); an un-shown slot stays hidden, the engine's still mode shows the final beat */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.rise{animation:none;opacity:1;transform:none}.grad,.sk::after,.press.on,.step .no.go,.stmt .scan,.ty::after{animation:none}body.inapp .card,body.inapp .ah{opacity:1;transform:none}.card:hover,.grad:hover,.cta:active,.chipA:active{transform:none}}
@media(min-width:900px){
/* one content column (B2, §4): the title, the results line, the chip row, the feeds, the section labels and the three screens share one box (1180 wide, 24 px padding, border-box) so their content edges match to the pixel; the pitch is a card, so it takes the same inner width by margin */
body.inapp .xtop,body.inapp .xh,body.inapp #results,body.inapp .feed,body.inapp .feed.featured,body.inapp .secl,body.inapp .ld-how,body.inapp.ld-out .bar{box-sizing:border-box;max-width:1180px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
body.inapp .pitch{max-width:1132px;margin-left:max(24px,calc((100% - 1132px) / 2));margin-right:max(24px,calc((100% - 1132px) / 2))}
/* the landing's section labels the same way: their box starts at the content edge (the edges number reads the label's box; with the column's 24 px padding it sat 24 px left of the cards) */
body.inapp .secl{max-width:1132px;margin-left:max(24px,calc((100% - 1132px) / 2));margin-right:max(24px,calc((100% - 1132px) / 2));padding-left:0;padding-right:0}
/* the grid starts at the column's edge, never centred; 340 is the least a scene was drawn for, so two columns at 1024 and 1280 and three from about 1380 (three from about 1170 with the sidebar collapsed). Three 304 px columns at 1280 were measured: 136 beat steps clipped up to 25 px (render_metrics.py fit), so the two wide columns stay and their stages take the 4:3 frame (style.css, a card over 420 px) */
body.inapp .feed,body.inapp .feed.featured{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));justify-content:start}
body.inapp .feed .ah,body.inapp .ah{padding-left:0;padding-right:0}
body.inapp .meta{height:198px}body.inapp .meta .foot{height:36px}
body.inapp .cta{height:36px;border-radius:18px;padding:0 15px}
body.inapp .feed.featured .ph{width:auto;height:auto;padding-bottom:198px;container-type:inline-size}body.inapp .feed.featured .ph>i{display:block;aspect-ratio:1}
@container (min-width:420px){body.inapp .feed.featured .ph>i{aspect-ratio:4/3}}
/* B5: the chips and the search share one grid row, the chips in a scrolling rail that stops 12 px before the search */
body.inapp .xtop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
body.inapp .xtop .chips{min-width:0;padding-left:0;padding-right:0}
body.inapp .xs{margin:0}
/* B5, round 2 (finding 10): the rail ends on whole chips. engine.js fitChips hides the chips that do not fit behind More, so nothing sits half under the
   rail's end or its fade; More opens the rail onto a second line with every chip (render_metrics.py edges cut_chips) */
body.inapp .xtop .chips.fit{-webkit-mask-image:none;mask-image:none;overflow:hidden}body.inapp .xtop .chips.fit::after{display:none}
body.inapp .xtop .chips.all{flex-wrap:wrap;row-gap:6px}
/* B6: five quick chips on one line */
body.inapp .quick a{height:36px;border-radius:18px}
body.inapp .ld-shot{font-size:14px}
/* the proofs and the steps: one column of rows between 900 and 1279 (three 220 px columns beside the sidebar were measured too narrow for the shots at 14 px), three columns from 1280 */
body.inapp .ld-step{display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:20px;row-gap:6px;align-items:center;align-content:center}
body.inapp .ld-step>.ld-shot{grid-row:span 2;width:280px}
body.inapp .ld-step>b{align-self:end}
body.inapp .ld-step>span{align-self:start;margin-top:0}
/* the landing ends on one call to action, on the column's left edge like the section labels above it (design pass completeness, finding 15) */
body.inapp .bigcta.ld-end{width:fit-content;box-sizing:border-box;padding:0 24px;margin-left:max(24px,calc((100% - 1132px) / 2));margin-right:auto}
}
@media(min-width:1280px){
body.inapp .pitch{display:grid;grid-template-columns:repeat(3,1fr)}
body.inapp .pitch .p+.p{border-top:0;border-left:1px solid var(--line)}
body.inapp .ld-how{grid-template-columns:repeat(3,1fr)}
body.inapp .ld-step{display:flex;flex-direction:column;gap:10px}
body.inapp .ld-step>.ld-shot{width:auto}
body.inapp .ld-step>span{margin-top:-4px}
/* in the column the label and its line start at the card's left edge (the row layout above sets them to the grid's end and start) */
body.inapp .ld-step>b,body.inapp .ld-step>span{align-self:stretch}
}