/* superflash — calm, editorial. Tokens first. */
:root{--bg:#f8f3ea;--surface:#fffdf8;--surface-2:#f1e8d8;--border:#e3d5bd;--text:#1a120b;--claude:#0e0905;--muted:#6b5641;--faint:#a38f76;
 --accent:#a8801a;--accent-ink:#fff;--amber:#b8322a;--red:#b8322a;--idle:#cfc0a6;--shadow:0 1px 2px rgba(60,40,10,.08);--inset:inset 0 1px 3px rgba(60,40,10,.08);color-scheme:light;
 --ui:"Geist",-apple-system,system-ui,sans-serif;--mono:"Space Mono",ui-monospace,Menlo,monospace;--ease:cubic-bezier(.23,1,.32,1);--t:150ms var(--ease)}   /* cream, deep gold, dark brown, near-black text; red for "needs you" */
*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased}
body{margin:0 auto;max-width:880px;padding:24px 16px 64px;background:var(--bg);color:var(--text);font:450 15px/1.45 var(--ui)}
body::before{content:"";position:fixed;left:0;top:0;height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity var(--t)}
body.running::before{opacity:1;animation:slide 2.4s linear infinite}@keyframes slide{from{background-position:-880px 0}to{background-position:880px 0}}
.hid{display:none!important}
/* header */
header{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:0 0 8px}
h1{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0}h1 small{font-weight:400;font-size:12px;color:var(--faint)}
#bar{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin:0 0 16px}#bar .hint{display:none}
input,select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 10px;transition:border-color var(--t)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent)}textarea{width:100%;resize:vertical}
button{font:500 13px/1 var(--ui);color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;cursor:pointer;transition:background var(--t),border-color var(--t)}
button:hover{background:var(--border)}button.primary,.pane button{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}button.primary:hover,.pane button:hover{filter:brightness(1.08)}
#newf{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;margin:0 0 16px;display:grid;gap:8px;box-shadow:var(--shadow)}
#newf input,#newf select,#newf textarea{width:100%}#newf div{display:flex;align-items:center;gap:8px}
/* a parent section and its subsections share one outer box; morph() syncs its children in place */
.fam{margin:16px 0 0;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.fam:has(.sub){padding-bottom:10px}
#list .fam>h2:not(.sub),.fam>.s:not(.sub),.fam>.s:not(.sub)+.pane{margin:0;border-width:0 0 1px;border-radius:0;box-shadow:none}#list .fam>h2:last-child{border-bottom:0}
#list .fam>h2.sub,.fam>.s.sub,.fam>.s.sub+.pane{margin-left:10px;margin-right:10px}#list .fam>h2.sub{margin-top:10px}
.fam .fam{margin:10px 10px 0;box-shadow:none}
/* section cards: h2 + following rows share one card (no wrapper so rows keep DOM identity) */
:is(#list,.fam)>h2{margin:16px 0 0;padding:12px 16px 10px;background:var(--surface);border:1px solid var(--border);border-radius:10px 10px 0 0;font:600 11px/1.45 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;user-select:none;box-shadow:var(--shadow);transition:background var(--t)}
:is(#list,.fam)>h2:has(+h2),:is(#list,.fam)>h2:has(+.fam),:is(#list,.fam)>h2:last-child{border-radius:10px}
:is(#list,.fam)>h2:hover{background:var(--surface-2)}
:is(#list,.fam)>h2 .title{cursor:text;color:var(--text);letter-spacing:.06em}:is(#list,.fam)>h2 .title:focus{outline:0;border-bottom:1px solid var(--accent)}
:is(#list,.fam)>h2 .n{color:var(--faint);font-weight:500;margin-left:4px}:is(#list,.fam)>h2 .sum{display:block;margin-top:4px;font:400 italic 13px/1.45 var(--ui);letter-spacing:0;text-transform:none;color:var(--muted);max-width:72ch}
:is(#list,.fam)>h2 .ctl{float:right;letter-spacing:0;color:var(--faint);font-weight:400;opacity:0;transition:opacity var(--t)}:is(#list,.fam)>h2:hover .ctl{opacity:1}:is(#list,.fam)>h2 .ctl b{cursor:pointer;margin-left:8px;font-weight:400}:is(#list,.fam)>h2 .ctl b:hover{color:var(--text)}
#aq{display:block;margin:4px 16px 8px;width:calc(100% - 32px)}.s .menu.arch:hover{color:var(--green,#3a3)}
:is(#list,.fam)>h2.needs{color:var(--amber)}:is(#list,.fam)>h2.needs .title{color:var(--amber)}
.over{outline:1px dashed var(--accent);outline-offset:-1px}
/* rows */
.s{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-top:0;cursor:pointer;transition:background var(--t)}
.s:hover{background:var(--surface-2)}.s.open{background:var(--surface-2)}
.s:has(+h2),.s:last-child,.s:has(+#sugg),.s:has(+.pane:last-child){border-radius:0 0 10px 10px}
.s span{flex:1;font-size:15px;line-height:1.45;max-width:60ch}.s small{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.s em{font-style:normal;font-size:12px;color:var(--muted);flex:none}.s em.peer{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px 8px;color:var(--text)}
.chip{font-style:normal;font-size:10px;color:var(--faint);border:1px solid var(--border);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle}
.dot{width:8px;height:8px;border-radius:50%;background:var(--idle);flex:none}.dot.waiting{background:var(--amber)}
.dot.running{background:var(--accent);animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.45)}50%{box-shadow:0 0 0 5px rgba(201,162,39,0)}}
/* expanded pane */
.pane{contain:layout;background:var(--bg);border:1px solid var(--border);border-top:0;padding:12px 16px 16px;box-shadow:var(--inset)}
.pane:has(+h2),.pane:last-child,.pane:has(+#sugg){border-radius:0 0 10px 10px}
.pane .hd{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 8px;font-family:var(--mono)}.pane .hd .peer{color:var(--accent)}.pane .hd code{background:var(--surface-2);border-radius:6px;padding:2px 6px;cursor:pointer;color:var(--text)}
.pane .msgs{height:50vh;overflow:auto;font:400 14px/1.55 var(--mono);padding-right:6px}
.u{border-left:2px solid var(--accent);background:var(--surface);padding:8px 12px;margin:16px 0 8px;white-space:pre-wrap;word-break:break-word;border-radius:0 8px 8px 0}
.a{position:relative;padding:0 0 0 18px;margin:8px 0;white-space:pre-wrap;word-break:break-word;color:var(--claude)}
.a::before{content:"";position:absolute;left:4px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--muted)}
.a code,.u code{background:var(--surface-2);padding:1px 5px;border-radius:5px}.a pre{background:var(--surface);border:1px solid var(--border);padding:10px;border-radius:8px;overflow:auto;white-space:pre-wrap;word-break:break-word}.a b{font-weight:600}
.tg{color:var(--faint);padding:0 0 0 18px;margin:6px 0;cursor:pointer;font-size:13px;user-select:none}.tg::before{content:"▸ ";font-size:10px}.tg:not(.c)::before{content:"▾ "}.tg div{color:var(--faint);padding-left:14px}.tg.c div{display:none}
.ts{color:var(--faint);font-size:11px;float:right;font-variant-numeric:tabular-nums}
.skel{padding:0 0 0 18px;margin:12px 0;color:var(--faint);font-size:13px}.skel i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted);margin-right:4px;animation:blink 1.2s infinite}.skel i:nth-child(2){animation-delay:.2s}.skel i:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
.pane textarea{margin-top:12px;background:var(--surface)}.pane .send{display:flex;align-items:center;gap:10px;margin-top:8px}.note{color:var(--muted);font-size:12px}
.empty{color:var(--faint);padding:24px 16px;text-align:center;font-size:14px}
#sugg{margin:24px 0 0;font-size:12px;color:var(--muted)}#sugg .chip{font-size:12px;padding:3px 10px;margin:0 6px 6px 0;color:var(--text)}#sugg button{padding:3px 8px;font-size:11px;margin-left:4px;background:transparent}
@media(max-width:600px){body{padding:16px 16px 48px}.s{flex-wrap:wrap;row-gap:4px}.s span{flex-basis:100%;order:3;max-width:none}.s small{margin-left:auto}.s em:not(.peer){display:none}.pane .msgs{height:60vh}#bar{flex-wrap:wrap}:is(#list,.fam)>h2 .ctl{opacity:1}}
.s .menu{flex:none;color:var(--faint);font-weight:600;padding:0 4px;border-radius:6px;opacity:0;transition:opacity var(--t);cursor:pointer}.s:hover .menu,.s.open .menu{opacity:1}.s .menu:hover{color:var(--text);background:var(--border)}@media(max-width:600px){.s .menu{opacity:1}}
.rmenu{position:absolute;z-index:50;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);min-width:180px;max-height:60vh;overflow:auto;font-size:13px}.rmenu div{padding:8px 12px;cursor:pointer}.rmenu div:hover{background:var(--border)}
h2.over::after{content:attr(data-drop);float:right;font:500 11px/1 var(--ui);letter-spacing:0;text-transform:none;color:var(--accent)}
.pane{display:flex;flex-direction:column;height:calc(50vh + 170px)}.pane .msgs{flex:1;height:auto;min-height:0}.pane .hd{flex:none;max-height:3.2em;overflow:hidden}.pane textarea{resize:none;height:60px;flex:none}.pane .send{flex:none}@media(max-width:600px){.pane{height:calc(60vh + 170px)}}
.chip{cursor:pointer}.chip:hover,.chip.on{color:var(--text);border-color:var(--accent)}.chip.on{background:color-mix(in srgb,var(--accent) 15%,transparent)}
#views{display:flex;gap:6px;flex-wrap:wrap;margin-right:auto}.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 6px 4px 10px;cursor:pointer;transition:border-color var(--t)}.pill:hover,.pill.on{color:var(--text);border-color:var(--accent)}.pill b{font-weight:600;color:var(--faint);padding:0 4px;border-radius:999px}.pill b:hover{color:var(--text);background:var(--border)}
#bar #costb{margin-left:auto}
.s.draft{cursor:default}.s.draft .dbox{flex:1;min-width:0}.s.draft .att:not(:empty){padding-bottom:6px}.s.draft .att .thumb{cursor:pointer}.s.draft textarea{width:100%;resize:none;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:4px 0;font-size:15px}.s.draft textarea:focus{border-bottom-color:var(--accent)}
.s.draft em.peer{cursor:pointer}.s.draft .dh,.s.draft .dgo{display:none}h2 .title:empty::before{content:attr(data-ph);color:var(--faint)}
/* costs panel */
#costs{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin:0 0 16px;box-shadow:var(--shadow);font-size:13px}
#costs h3{font-size:15px;font-weight:600;margin:0 0 8px}#costs h3 small{font-weight:400;font-size:12px;color:var(--faint);margin-left:8px}
#costs h4{font:600 11px/1.45 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
#costs .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}#costs .cols>div>div{max-height:none}
#costs div:has(>b){display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px solid var(--border)}
#costs b{font-weight:500;font-variant-numeric:tabular-nums}#costs .t{cursor:pointer}#costs .t:hover span{color:var(--accent)}
#costs .days .day{display:grid;grid-template-columns:7.5em 1fr auto;align-items:center;gap:10px;padding:3px 0;border-bottom:1px solid var(--border)}#costs .days .day span{color:var(--muted);font:12px var(--mono)}#costs .days .day.now span{color:var(--text);font-weight:600}
#costs .days .day i{display:block;height:8px;border-radius:4px;background:var(--surface-2);min-width:2px}#costs .days .day.now i{background:var(--accent)}#costs .days .day:hover i{background:color-mix(in srgb,var(--accent) 55%,var(--surface-2))}
#costs h4.more{cursor:pointer}#costs h4.more:hover{color:var(--accent)}#costs .dmute{color:var(--faint);font-style:italic}
@media(max-width:600px){#costs .cols{grid-template-columns:1fr}}
.s em.peer[contenteditable]{outline:none;border-color:var(--accent);min-width:40px;cursor:text}.s em.peer:empty::before{content:attr(data-ph);color:var(--faint)}
.ask-pop{width:300px;padding:12px;z-index:20}.ask-pop p{margin:0 0 10px;color:var(--text);line-height:1.4}.ask-pop input{width:100%;box-sizing:border-box;margin-bottom:10px}.ask-pop span{display:flex;gap:8px;justify-content:flex-end}
.s small .meta{font-style:normal;opacity:0;transition:opacity var(--t)}.s:hover small .meta,.s.open small .meta,.s.sel small .meta{opacity:1}@media(hover:none){.s small .meta{opacity:1}}
/* /split: list left, the open thread right (index.html sets body.split) */
#lay{margin-left:auto;font-size:13px;color:var(--muted);text-decoration:none}#lay:hover{color:var(--text)}
body.split{max-width:none;margin:0;padding:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
body.split header{padding:14px 20px 0}body.split #bar{padding:0 20px;margin:8px 0 12px}body.split #costs{margin:0 20px 12px;max-height:40vh;overflow:auto;flex:none}
body.split #wrap{flex:1;min-height:0;display:grid;grid-template-columns:minmax(380px,34%) 1fr;border-top:1px solid var(--border)}
body.split #side{overflow:auto;padding:0 12px 32px;border-right:1px solid var(--border)}
body.split #main{display:flex;flex-direction:column;min-height:0;padding:16px 24px}
body.split #main .pane{flex:1;height:auto;min-height:0;border:0;box-shadow:none;background:transparent;padding:0}body.split #main .pane .hd{max-height:none}
body.split #list .s{flex-wrap:wrap;row-gap:4px}body.split #list .s span{flex-basis:100%;order:3;max-width:none;font-size:14px}body.split #list .s small{margin-left:auto}
body.split #list .s.open{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
@media(max-width:800px){body.split #wrap{grid-template-columns:1fr}body.split #main{display:none}}
/* split, pass 2: flat list, one-row top bar, readable thread */
.pane .ask{display:none}h2 .ctl .add-t{display:none}body.split h2 .ctl .add-t{display:inline}
body.split{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr}
body.split header{grid-row:1;grid-column:1;padding:10px 20px;margin:0;align-items:center}body.split h1{font-size:16px}body.split #lay{margin-left:12px}
body.split #bar{grid-row:1;grid-column:2;margin:0;padding:8px 20px}body.split #bar button{padding:6px 10px}
body.split #costs{grid-row:2;grid-column:1/-1}body.split #wrap{grid-row:3;grid-column:1/-1}
body.split .fam,body.split :is(#list,.fam)>h2,body.split #list .s,body.split .fam>.s{border:0!important;border-radius:6px!important;box-shadow:none!important;background:transparent;margin:0!important}
body.split .fam{padding:0!important;overflow:visible}body.split #list .fam>h2.sub,body.split #list .fam>.s.sub,body.split .fam .fam{margin-left:14px!important}
body.split :is(#list,.fam)>h2{padding:16px 8px 4px;margin-top:4px!important}body.split :is(#list,.fam)>h2.sub{padding-top:10px}body.split :is(#list,.fam)>h2 .sum{display:none}
body.split :is(#list,.fam)>h2 .ctl b:not(.add-t):not(.add-s){display:none}body.split :is(#list,.fam)>h2 .ctl :is(.add-t,.add-s){color:var(--faint)}body.split :is(#list,.fam)>h2 .ctl :is(.add-t,.add-s):hover{color:var(--accent)}body.split :is(#list,.fam)>h2:hover .ctl b{display:inline!important}
body.split #list .s{padding:7px 8px;min-height:0;gap:8px}body.split #list .s:hover{background:var(--surface-2)}
body.split #list .s em.peer{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;padding:0;font-size:14px;font-weight:500}
body.split #list .s span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;color:var(--muted);padding-left:16px}
body.split #list .s.open span{color:var(--text)}
body.split #main .pane .hd{font:inherit;color:inherit;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
body.split .pane .hd .ttl{font-size:18px;font-weight:600}body.split .pane .hd .pos{color:var(--text);margin-top:2px}body.split .pane .hd .where{font-size:12px;color:var(--faint);margin-top:4px}
body.split .pane .hd .menu{float:right;opacity:1;cursor:pointer;color:var(--faint);padding:0 6px}body.split .pane .hd .menu:hover{color:var(--text)}
body.split .pane .ask:not(:empty){display:block;flex:none;margin-top:10px;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--text);font-size:14px}
body.split .pane .msgs{font:400 15px/1.6 var(--ui)}body.split .pane :is(.u,.a,.tg){max-width:90ch}body.split .pane :is(code,pre){font-family:var(--mono);font-size:13px}
body.split :is(#list,.fam)>h2 .ctl b{text-transform:none;letter-spacing:0;font-weight:500}
body.split #list .s:not(.add):not(.draft){display:grid;grid-template-columns:8px minmax(0,1fr) auto auto auto auto auto;column-gap:8px;row-gap:2px;align-items:center}
body.split #list .s>.dot{grid-area:1/1}body.split #list .s>em.peer{grid-area:1/2;justify-self:start;max-width:100%}body.split #list .s>small{grid-area:1/3;margin:0}
body.split #list .s>.menu.flag{grid-area:1/4}body.split #list .s>.menu.arch{grid-area:1/5}body.split #list .s>.menu.top{grid-area:1/6}body.split #list .s>.menu:not(.arch):not(.flag):not(.top){grid-area:1/7}body.split #list .s>span{grid-area:2/2/3/-1;padding:0}
body.split #list .s:not(:hover):not(.open)>.menu{visibility:hidden}
body.split #list .s:not(:hover):not(.open) small{visibility:hidden}   /* row time + meta only on hover or the open row */
body.split :is(#list,.fam)>h2[data-id="h:new"]{border:1px solid var(--accent)!important;background:var(--surface)!important;padding:10px 12px!important;margin-top:12px!important}
body.split #list .s.draft{border:1px solid var(--accent)!important;background:var(--surface)!important;margin:4px 0!important}

h2 .car{display:inline-block;width:1.4em;margin-left:-.3em;text-align:center;cursor:pointer;opacity:.6}
h2 .car:hover{opacity:1}
.tls{padding-left:18px;margin:-6px 0 8px}.tls:not(.open) .tl{display:none}.tls.sys{padding-left:18px;margin:8px 0}.tls.sys::before{content:"▸ " attr(data-n) " system";color:var(--faint)}.tls.sys.open::before{content:"▾ " attr(data-n) " system"}.tls.sys:not(.open)>*{display:none}.tls.sys.open>.u{opacity:.75}.tls.sys.open>.a{opacity:.85}.tls::before{content:"▸ " attr(data-n) " steps";display:inline-block;font-size:12px;color:var(--faint);cursor:pointer;opacity:.7;transition:opacity var(--t)}.tls:hover::before{opacity:1}.tls.open::before{content:"▾ " attr(data-n) " steps"}.tls.live[data-gist]::after{content:"✻ " attr(data-gist);display:block;margin-top:2px;font-size:13px;color:var(--muted);font-style:italic;opacity:.75;transition:opacity .6s var(--ease)}.tls[data-n="1"]::before{content:"▸ 1 step"}.tls.open[data-n="1"]::before{content:"▾ 1 step"}
.ts{opacity:0;transition:opacity var(--t)}:is(.u,.a):hover .ts{opacity:1}
.thumb{display:inline-block;max-height:72px;max-width:160px;border-radius:6px;border:1px solid var(--border);margin:2px 6px 2px 0;vertical-align:middle;object-fit:cover}.u .thumb{max-height:120px;max-width:240px;cursor:zoom-in}
.compose{position:relative;margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:border-color var(--t)}.compose:focus-within{border-color:var(--accent)}
.pane .compose textarea{margin:0;border:0;background:transparent;padding:10px 48px 10px 12px}.compose .att{padding:0 10px}.compose .att:not(:empty){padding-top:8px}.compose .att .thumb{cursor:pointer}
.compose .go{position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%;padding:0;font-size:16px;line-height:1}.pane .send:has(.note:empty){display:none}
/* polish: lists, rhythm, centered column, quiet idle dots */
.li{display:block;position:relative;padding-left:1.3em;margin:2px 0}.li::before{content:"•";position:absolute;left:.35em;color:var(--faint)}.li[data-n]::before{content:attr(data-n);left:0;font-variant-numeric:tabular-nums}
.u{margin:28px 0 14px}.a{margin:0 0 14px}
body.split #main .pane>:not(.msgs),body.split .pane .msgs>*{width:100%;max-width:42rem;margin-left:auto;margin-right:auto}body.split .pane :is(.u,.a){max-width:42rem}   /* ~70 characters a line */
.dot:not(.waiting):not(.running){opacity:.5;transform:scale(.8)}
/* small tricks the polished apps use */
.u,.a,.li{text-wrap:pretty}.ttl,h1{text-wrap:balance}
::selection{background:color-mix(in srgb,var(--accent) 25%,transparent)}
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.msgs>.fresh{animation:rise .25s var(--ease)}@keyframes rise{from{opacity:0;transform:translateY(4px)}}
body{font-feature-settings:"ss01","cv11";letter-spacing:-.005em}
/* research pass: delayed spinner, motion, depth, targets */
.skel{animation:skel-in .15s var(--ease) .2s both}@keyframes skel-in{from{opacity:0}}   /* only show "thinking" if it takes >200ms */
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}
.compose{border-color:transparent;box-shadow:0 0 0 1px rgb(201 162 39/.18),0 1px 2px rgb(60 40 10/.05),0 4px 14px rgb(60 40 10/.06)}.compose:focus-within{box-shadow:0 0 0 1px var(--accent),0 1px 2px rgb(60 40 10/.05),0 6px 18px rgb(0 0 0/.08)}
.rmenu{border-color:transparent;box-shadow:0 0 0 1px rgb(201 162 39/.18),0 2px 4px rgb(60 40 10/.06),0 10px 28px rgb(60 40 10/.12)}
body.split #list .s.open{background:var(--surface-2)}body.split #list .s:hover:not(.open){background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
:is(.s .menu,.pane .hd .menu){min-width:24px;min-height:24px;display:inline-grid;place-items:center}.tl summary{min-height:24px;line-height:24px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.u{border-left-color:var(--accent)}h1,body.split .pane .hd .ttl{color:#120c07}a{color:var(--accent)}
#fontpick{font-size:13px;padding:6px 8px;background:var(--surface-2)}
body.split :is(#list,.fam)>h2{font-size:14px;color:var(--text)}body.split :is(#list,.fam)>h2.sub{font-size:12.5px;color:var(--muted)}body.split :is(#list,.fam)>h2.needs{color:var(--amber)}   /* sections read above thread names */
.crumb{display:none}body.split #list .s.strip>.crumb{display:block;grid-area:1/2/2/-1;font:600 10.5px/1.4 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-style:normal}
body.split #list .s.strip:has(>.crumb)>.dot{grid-area:2/1}body.split #list .s.strip:has(>.crumb)>em.peer{grid-area:2/2}body.split #list .s.strip:has(>.crumb)>small{grid-area:2/3}body.split #list .s.strip:has(>.crumb)>.menu.flag{grid-area:2/4}body.split #list .s.strip:has(>.crumb)>.menu.arch{grid-area:2/5}body.split #list .s.strip:has(>.crumb)>.menu.top{grid-area:2/6}body.split #list .s.strip:has(>.crumb)>.menu:not(.arch):not(.flag):not(.top){grid-area:2/7}body.split #list .s.strip:has(>.crumb)>span{grid-area:3/2/4/-1}
/* command module: instrument labels in mono */
body.split :is(#list,.fam)>h2,.crumb,body.split .pane .hd .where,#costb,.tls::before,.ts,.s small{font-family:var(--mono)!important}
body.split :is(#list,.fam)>h2{font-size:13px;letter-spacing:.12em}body.split .pane .hd .where{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.dot.running{box-shadow:0 0 6px var(--accent)}
/* title, settings, lighter headers */
h1{font:700 15px/1 var(--mono);letter-spacing:.22em;display:flex;align-items:center;gap:10px}
#settings{position:relative}#settings summary{list-style:none;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--muted);font-size:16px}#settings summary::-webkit-details-marker{display:none}#settings summary:hover{background:var(--surface-2);color:var(--text)}
#settings .panel{position:absolute;right:0;top:38px;z-index:20;display:flex;flex-direction:column;align-items:flex-start;gap:10px;white-space:nowrap;padding:10px 12px;background:var(--surface);border-radius:10px;font:12px var(--mono);color:var(--muted);box-shadow:0 0 0 1px rgb(201 162 39/.18),0 2px 4px rgb(60 40 10/.06),0 10px 28px rgb(60 40 10/.12)}
body.split :is(#list,.fam)>h2,body.split :is(#list,.fam)>h2 .title{font-weight:700}
#settings label{display:flex;align-items:center;gap:8px}#settings #lay{margin:0;font:12px var(--mono);color:var(--muted)}#settings #lay:hover{color:var(--accent)}
/* reply box: a writing surface */
.pane .compose textarea{font:inherit;font-size:15px;line-height:1.6;padding:14px 56px 4px 16px;caret-color:var(--accent);max-height:40vh;overflow:auto;transition:height .12s var(--ease)}
.pane .compose textarea::placeholder{color:var(--faint);font-style:italic}
.compose .hint{display:block;padding:2px 56px 10px 16px;font:11px var(--mono);letter-spacing:.03em;color:var(--faint);opacity:0;transition:opacity var(--t)}.compose:focus-within .hint{opacity:1}
.compose{border-radius:14px;background:linear-gradient(var(--surface),color-mix(in srgb,var(--surface) 92%,var(--accent)))}
.li{margin:3px 0}.li::before{color:var(--accent)}
/* done = hollow ring, so it never reads as "off" or "unknown" */
.dot.idle{background:transparent;box-shadow:inset 0 0 0 1.5px var(--idle)}.dot:not(.waiting):not(.running){opacity:1;transform:none}
.dot.wait{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent)}   /* hollow gold: busy, but out of its hands */
.dot.blocked{background:transparent;box-shadow:inset 0 0 0 1.5px var(--red)}   /* hollow red: blocked on someone else */
/* a decision asked with buttons: on a Needs-you card and above the reply box */
.opts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:2px 12px 10px 30px}.pane .ask .opts{padding:0}
.opts p{flex-basis:100%;margin:0 0 4px;font-size:14px;line-height:1.4;color:var(--text)}
.opts button{font-weight:600;color:var(--text);background:var(--surface);box-shadow:inset 0 1px 0 rgb(255 255 255/.7),0 0 0 1px var(--border),0 2px 0 #e0d1b6;border:0;transition:transform 70ms ease-out,box-shadow 70ms ease-out}
.opts button:hover{background:var(--surface);color:var(--accent)}.opts button:active,.opts button.picked{transform:translateY(2px);box-shadow:inset 0 1px 0 rgb(255 255 255/.7),0 0 0 1px var(--border),0 0 0 #e0d1b6}
.opts button:disabled{opacity:.55;cursor:default}.opts button.picked{color:var(--accent);opacity:1}.opts .other{font-weight:400;color:var(--muted)}
/* a stream's memory */
.snotes{margin-top:18px;max-width:calc(52rem + 24px)}.sgrp2{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 12px 6px}.sgrp2 small{font-weight:400;letter-spacing:0;text-transform:none;font-family:var(--ui);color:var(--faint);margin-left:8px}
.mem{display:grid;grid-template-columns:62px minmax(0,1fr) auto 18px;gap:10px;align-items:baseline;padding:6px 12px;border-radius:var(--r-sm);font-size:14px;line-height:1.5}.mem:hover{background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
.mem i{font:600 10.5px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-style:normal}.mem.decision i{color:var(--accent)}.mem.blocked i{color:var(--red)}.mem.done i{color:var(--muted)}
.mem.blocked span{color:var(--text)}.mem small{font:11px var(--mono);color:var(--faint);white-space:nowrap}.mem b{color:var(--faint);cursor:pointer;font-weight:400;opacity:0}.mem:hover b{opacity:1}.mem b:hover{color:var(--red)}
.snew{margin:6px 0 0}
/* Needs-you rows open in place: a quiet block under the row with the last message, its buttons and a one-line reply */
body.split #list .sx{margin:-2px 0 6px;padding:8px 12px 10px 30px;border-radius:0 0 var(--r-md) var(--r-md);background:color-mix(in srgb,var(--surface-2) 40%,transparent);font-size:13.5px;line-height:1.5}
body.split #list .s.strip:has(+.sx){border-radius:var(--r-md) var(--r-md) 0 0!important;margin-bottom:0!important}
.sx .peek{color:var(--text);max-height:9.5em;overflow:hidden;cursor:pointer;white-space:pre-wrap;position:relative}.sx .peek.cut::before{content:"…"; color:var(--faint)}
.sx .peek:hover{color:var(--muted)}.sx .peek .li{display:block}.sx .peek pre{font-size:12px;max-height:5em;overflow:hidden}
.sx .opts{padding:8px 0 2px}.sx .opts p{font-size:13.5px}.sx .opts button{padding:6px 11px;font-size:12.5px}
.sx textarea{margin-top:6px;padding:6px 10px;font-size:13.5px;min-height:0;height:32px;background:var(--surface)}
.sx .skel{display:inline-flex;gap:4px}.sx .skel i{width:6px;height:6px;border-radius:50%;background:var(--border);display:inline-block}
/* rails: a stream's steps on one line. Left: folded under the heading. Right: big, every line editable */
.srow3.sh{grid-template-columns:14px auto 1fr auto;padding-top:9px;padding-bottom:7px}.srow3.sh .car{font-size:9px;color:var(--faint);cursor:pointer;width:14px;text-align:center}.srow3.sh small .nd{font-style:normal;color:var(--red);font-weight:700;margin-left:4px}
.srow3.sh b{font:600 11px/1.45 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}   /* same voice as the section headings on / */
.srow3.sh .hctl{display:flex;gap:10px;opacity:0;transition:opacity var(--t)}.srow3.sh:hover .hctl{opacity:1}.srow3.sh .hctl i{font:400 11.5px var(--ui);color:var(--faint);font-style:normal;cursor:pointer}.srow3.sh .hctl i:hover{color:var(--accent)}
.rail{position:relative;margin:0 4px 6px calc(10px + var(--d,0) * 16px);padding:2px 0 2px 2px}.rail::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--border)}
.rail.bigr{margin:6px 0 0}.rail.bigr::before{left:9px}.rail:not(:has(.st))::before{display:none}
.st{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;column-gap:10px;align-items:baseline;padding:5px 8px 5px 0;border-radius:var(--r-md);cursor:pointer;transition:background var(--t)}
.st:hover{background:color-mix(in srgb,var(--surface-2) 45%,transparent)}.st.on{background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));box-shadow:inset 0 1px 0 rgb(255 255 255/.6),0 0 0 1px var(--border),0 2px 0 #e0d1b6}
.st.over{outline:1px dashed var(--accent);outline-offset:-1px}
.st .k{width:14px;height:14px;border-radius:50%;justify-self:center;align-self:center;background:var(--bg);box-shadow:inset 0 0 0 2px var(--border);display:grid;place-items:center;font-size:9px;color:#fff;position:relative;z-index:1}
.st.done .k{background:var(--accent);box-shadow:none}.st.done .k::after{content:"✓";font-weight:700}
.st.doing .k{box-shadow:inset 0 0 0 3px var(--accent)}.st.doing .k.live{animation:pulse 1.6s ease-in-out infinite}.st .k.needs{box-shadow:inset 0 0 0 3px var(--red)}
.st.blocked .k{box-shadow:inset 0 0 0 3px var(--red)}.st.next .k{box-shadow:inset 0 0 0 2px var(--idle)}
.st .t{font-size:13.5px;line-height:1.45;min-width:0;overflow-wrap:anywhere}.st.done .t{color:var(--muted)}.st.doing .t{font-weight:600}.st .t .on,.st>.on{color:var(--red);font-weight:600;font-size:13px}
.st>small{font:11px var(--mono);color:var(--faint);white-space:nowrap}.st .crumb{display:block!important;grid-column:2/-1;font:600 10.5px/1.4 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-style:normal}
.st .sctl{display:flex;gap:2px;opacity:0;transition:opacity var(--t)}.st:hover .sctl,.st.on .sctl{opacity:1}.st .sctl b{font-weight:400;color:var(--faint);padding:0 5px;cursor:pointer;font-size:13px}.st .sctl b:hover{color:var(--accent)}.st .sctl b:not(.words){display:none}   /* one ⋯ in words; the icon row read as noise */
.st .pl,.st .sub,.st .sopts{grid-column:2/-1}.st .pl{display:flex;flex-wrap:wrap;gap:6px;padding:3px 0 1px}
.pill2{font-size:12px;padding:2px 9px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--border);color:var(--muted);cursor:pointer;white-space:nowrap}.pill2:hover{color:var(--text)}
.pill2 i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:var(--idle);vertical-align:1px}.pill2.waiting i{background:var(--red)}.pill2.running i{background:var(--accent)}.pill2.wait i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent)}
.st .sopts .opts{padding:4px 0 2px}
.st.add{cursor:pointer}.st.add .k{box-shadow:inset 0 0 0 2px var(--border);opacity:.6}.st.add .t{color:var(--faint);font-size:13.5px}.st.add:hover .t{color:var(--accent)}
.st .newstep,.st .newnote{grid-column:2/-1;width:100%;padding:4px 8px;font-size:13.5px;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0}.st .newnote{font-size:12.5px;color:var(--muted);opacity:0;transition:opacity var(--t)}.st:hover .newnote,.st.on .newnote,.st .newnote:focus{opacity:1}
.fold{padding:3px 0 3px 30px;font:11px var(--mono);color:var(--faint);cursor:pointer}.fold:hover{color:var(--accent)}
.pview{display:block;width:100%;height:360px;border:0;border-radius:var(--r-md);background:transparent;margin:6px 0 14px}
.dot.page{border-radius:3px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent)}   /* a square-ish dot: this row is the project's page, not a thread */
body.split #list .s.pgrow>em.peer{color:var(--accent)}.pgpane .pgm{padding:0;overflow:auto}.pgpane .pview{height:100%;min-height:400px;margin:0}
.noview{margin:8px 0 14px;padding:10px 12px;border-radius:var(--r-md);border:1px dashed var(--border);font-size:13px;color:var(--faint)}
/* big rail on the right */
.rpage .where a,.ppage .where a{color:var(--accent);text-decoration:none}.rpage .goal{font-size:16px;line-height:1.5;margin:8px 0 14px;padding:8px 10px;border-radius:var(--r-sm);outline:none;white-space:pre-wrap}.rpage .goal:hover{background:color-mix(in srgb,var(--surface-2) 40%,transparent)}.rpage .goal:focus{background:var(--surface);box-shadow:0 0 0 1px var(--accent)}.rpage .goal.none:empty::before{content:attr(data-ph);color:var(--faint);font-style:italic}
.rpage .hd,.ppage .phead{max-height:none!important;overflow:visible!important}
.st.big{grid-template-columns:20px minmax(0,1fr) auto auto;padding:8px 10px 8px 0}.st.big .t{font-size:15px}.st.big .t[contenteditable]:focus{outline:none;border-bottom:1px solid var(--accent)}
.st.big .sub{display:block;font-size:13.5px;color:var(--muted);line-height:1.5;padding:2px 0}.st .sub .nt{display:block;font-style:normal;padding:1px 0 1px 12px;text-indent:-12px;position:relative}.st .sub .nt::before{content:"· ";color:var(--faint)}
.st .sub .nt b{font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-right:6px}.st .sub .nt.decision b{color:var(--accent)}.st .sub .nt small{font:11px var(--mono);color:var(--faint);margin-left:8px}
.st .sub .nt u{text-decoration:none;color:var(--faint);margin-left:8px;cursor:pointer;opacity:0}.st .sub .nt:hover u{opacity:1}.st .sub .nt u:hover{color:var(--red)}
.rail.one{margin-top:4px}.rail.one::before{display:none}.rail.one .st{cursor:default}
.ppage .prev{font-size:12px;color:var(--faint);padding:4px 0 0 30px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.ppage .pbody{flex:1;min-height:0;display:flex;flex-direction:column}.ppage .pbody .pane{flex:1;height:auto;min-height:0}
.startbox{margin-top:auto}.startbox .empty{margin:24px 0}
.to{display:flex;align-items:center;gap:8px;margin:10px 0 -4px;font:12px var(--mono);color:var(--faint)}.to b{font-weight:600;color:var(--text);padding:3px 10px;border-radius:999px;box-shadow:0 0 0 1px var(--border);background:var(--surface);cursor:pointer;font-family:var(--ui);font-size:12.5px}.to b:hover{color:var(--accent)}
.rpage .thr{margin-top:22px}.sstrip .onstep{margin-left:12px;font:12px var(--mono);color:var(--faint)}.sstrip .onstep a{color:var(--accent);cursor:pointer;margin-left:6px}
/* /streams: streams on the left as rows; a stream page on the right with its threads opening in place */
/* dense thread rows: the whole position, meta always on, the cause and the live line */
   /* every open thread has its own box; the stream's box at the bottom only starts threads */
/* threads unfolded under a stream on the left: a quiet box, full rows with every detail */
/* inbox */
.sdot.inbox{background:var(--accent)}.cause{display:none}
/* /inbox: items as rows above Needs you */
.dot.inbox{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}   /* hollow grey: nobody is on it */
:is(#list,.fam)>h2.inbh .title{color:var(--text)}h2.inbh .ctl .pz{font-family:var(--mono);font-size:10.5px}h2.inbh .ctl .pz.on{color:var(--red)}
body.split #list .s.irow:not(.new){opacity:.55}body.split #list .s.irow:not(.new):hover{opacity:1}
body.split #list .s.irow>span a{color:var(--faint);text-decoration:none;margin-left:4px}body.split #list .s.irow>span a:hover{color:var(--accent)}body.split #list .s.irow>span b{font-weight:600;color:var(--faint)}
body.split #list .s.irow>.menu.go{font:600 12px var(--ui);color:var(--accent);visibility:hidden}body.split #list .s.irow:hover>.menu.go,body.split #list .s.irow.open>.menu.go{visibility:visible}
body.split #list .s.idraft .dh{margin-left:auto;font:11px var(--mono);color:var(--faint)}body.split #list .s.idraft .dhead{display:flex;gap:8px;align-items:baseline}
body.split #list .s.empty-i{color:var(--faint);font-size:13px;cursor:default}body.split #list .s.empty-i:hover{background:var(--surface)}
.rmenu div i{font:500 11px var(--mono);color:var(--faint);cursor:pointer;font-style:normal}.rmenu div i.on{color:var(--accent)}
.intake{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0 4px;font-size:12px}.intake a{margin-left:auto;color:var(--faint);cursor:pointer;font-family:var(--mono);font-size:11px}.intake a:hover{color:var(--accent)}
.isrc{display:inline-flex;align-items:stretch;border-radius:999px;box-shadow:0 0 0 1px var(--border);overflow:hidden;color:var(--faint);background:var(--surface)}.isrc.on{color:var(--text)}
.isrc b,.isrc i{padding:4px 10px;cursor:pointer;font-weight:600;font-style:normal}.isrc i{font:500 11px/1.5 var(--mono);color:var(--faint);border-left:1px solid var(--border);background:var(--surface-2)}.isrc.on i{color:var(--muted)}.isrc:not(.on) i{display:none}
.isrc b:hover,.isrc i:hover{color:var(--accent)}.isrc.pause{padding:4px 10px;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--muted)}.isrc.pause.on{color:var(--red);box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 50%,var(--border))}
.item{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:10px 12px;margin:4px 0;border-radius:var(--r-md);transition:background var(--t),box-shadow 120ms ease-out}
.item:hover{background:color-mix(in srgb,var(--surface-2) 40%,transparent)}.item.open{background:var(--surface);box-shadow:inset 0 1px 0 rgb(255 255 255/.6),0 0 0 1px var(--border),0 2px 0 #e0d1b6,0 8px 18px rgb(60 40 10/.10)}
.item:not(.new){opacity:.6}.item:not(.new):hover{opacity:1}
.ibadge{font:600 10.5px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-style:normal;margin-top:2px}.item.mail .ibadge{color:var(--red)}.item.slack .ibadge{color:var(--muted)}
.ibody{min-width:0}.ibody>a,.ibody>span{font-weight:600;font-size:15px;color:var(--text);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibody>a:hover{color:var(--accent)}
.ibody small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}.ibody small b{font-weight:600;color:var(--faint)}.ibody small a{color:var(--text);cursor:pointer}.ibody .snip{color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iacts{display:flex;gap:6px;visibility:hidden}.item:hover .iacts,.item.open .iacts{visibility:visible}.iacts button{padding:6px 12px}
.iprompt{display:none;grid-column:2/-1}.item.open .iprompt{display:block;animation:rise .18s var(--ease)}.iprompt textarea{width:100%;margin-top:6px;font-size:14px;line-height:1.5}.iprompt .hint{display:block;font:11px var(--mono);color:var(--faint);margin-top:4px}
.s .menu.flag{color:var(--red);font-weight:700}.s .menu.flag.on{background:color-mix(in srgb,var(--red) 14%,transparent)}
#bolt{height:1.4em;width:auto;margin-right:-4px}
/* rich text: tables, quotes, headings */
.a table,.u table{border-collapse:collapse;margin:6px 0 10px;font-size:14px;white-space:normal;display:block;overflow-x:auto}.a :is(th,td),.u :is(th,td){border:1px solid var(--border);padding:5px 10px;text-align:left;font-variant-numeric:tabular-nums}.a th,.u th{background:var(--surface-2);font-weight:600}.a tr:nth-child(odd) td{background:var(--surface)}
.bq{display:block;border-left:2px solid var(--border);padding-left:10px;color:var(--muted)}b.h{display:block;font-size:1.05em;margin:10px 0 2px}hr{border:0;border-top:1px solid var(--border);margin:12px 0}.u a,.a a{text-underline-offset:2px}
/* wider chat, full-width thread names, resizable/collapsible sidebar */
body.split #main .pane>:not(.msgs),body.split .pane .msgs>*,body.split .pane :is(.u,.a){max-width:62rem}body.split #main{padding:16px 32px}
/* name gets the whole first line; the open row puts time/context/buttons on a line under it */
body.split #list .s:not(.add):not(.draft)>em.peer{grid-column:2/-1}body.split #list .s:hover:not(.open)>em.peer{grid-column:2/4}body.split #list .s:not(.open):not(:hover)>small{display:none}
body.split #list .s:is(.open,:hover)>small{grid-area:2/2;justify-self:start}body.split #list .s:is(.open,:hover)>.menu.flag{grid-area:2/4}body.split #list .s:is(.open,:hover)>.menu.arch{grid-area:2/5}body.split #list .s:is(.open,:hover)>.menu.top{grid-area:2/6}body.split #list .s:is(.open,:hover)>.menu:not(.arch):not(.flag):not(.top){grid-area:2/7}body.split #list .s:is(.open,:hover)>span{grid-area:3/2/4/-1}
body.split #list .s.strip:is(.open,:hover):has(>.crumb)>small{grid-area:3/2}body.split #list .s.strip:is(.open,:hover):has(>.crumb)>.menu.flag{grid-area:3/4}body.split #list .s.strip:is(.open,:hover):has(>.crumb)>.menu.arch{grid-area:3/5}body.split #list .s.strip:is(.open,:hover):has(>.crumb)>.menu.top{grid-area:3/6}body.split #list .s.strip:is(.open,:hover):has(>.crumb)>.menu:not(.arch):not(.flag):not(.top){grid-area:3/7}body.split #list .s.strip:is(.open,:hover):has(>.crumb)>span{grid-area:4/2/5/-1}
body.split #wrap{grid-template-columns:var(--sw,34%) 6px 1fr}body.split #side{border-right:0}
#grip{display:none}body.split #grip{display:block;cursor:col-resize;border-left:1px solid var(--border);transition:background var(--t)}body.split #grip:hover,body.resizing #grip{background:color-mix(in srgb,var(--accent) 25%,transparent)}
body.resizing{user-select:none;cursor:col-resize}body.noside #side,body.noside #grip{display:none!important}body.split.noside #wrap{grid-template-columns:1fr}
#sidet{display:none}body.split #sidet{display:grid;place-items:center;width:30px;height:30px;padding:0;margin-left:-8px;background:transparent;border-color:transparent;color:var(--muted)}body.split #sidet:hover{background:var(--surface-2);color:var(--text)}body.noside #sidet{color:var(--accent)}
@media(max-width:800px){body.split #wrap{grid-template-columns:1fr}body.split #grip{display:none}}
#list h2.emptyh{opacity:.55}#list h2.emptyh:hover{opacity:1}
/* subagents: a quiet fold under the parent, one line each, on a thin guide */
.kids-t{margin:-2px 0 2px 34px;padding:2px 0;font-size:12px;color:var(--faint);cursor:pointer;width:fit-content}
.kids-t:hover,.kids-t.on{color:var(--muted)}.kids-t b{font-weight:400;color:var(--accent)}.kids-t .car{display:inline-block;width:12px;font-size:10px}
body.split #list .s.kid,#list .s.kid{display:flex!important;align-items:center;gap:8px;min-height:0;margin:0 0 0 34px!important;padding:4px 8px 4px 12px!important;border:0!important;border-left:1px solid var(--border)!important;border-radius:0 6px 6px 0!important;background:transparent}
body.split #list .s.kid:hover,body.split #list .s.kid.open{background:var(--surface-2)}body.split #list .s.kid.open{border-left-color:var(--accent)!important}
body.split #list .s.kid>span{flex:1;order:0;font-size:13px!important;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.split #list .s.kid.open>span{color:var(--text)}
#list .s.kid>.dot{width:6px;height:6px}body.split #list .s.kid>small{display:block!important;font-size:11px;opacity:0;transition:opacity var(--t)}#list .s.kid:is(:hover,.open)>small{opacity:1}
.cst{font-weight:inherit;cursor:pointer;border-bottom:1px dotted currentColor}.cst:hover{color:var(--text)}
.costm{min-width:260px;font-size:12.5px}.costm div{display:flex;justify-content:space-between;gap:16px}.costm div:not([onclick]){cursor:default}.costm div:not([onclick]):hover{background:none}.costm b{font-weight:500;font-family:var(--mono)}.costm .tot{border-top:1px solid var(--border);color:var(--muted)}
.s .menu.arch.tidy{color:var(--green,#3a3);opacity:1}
body.split #list .s>.menu.arch.tidy{visibility:visible}
.kids-t{display:none}#list .s:is(:hover,.open)+.kids-t,#list .s.open+.pane+.kids-t,.kids-t:hover,.kids-t.on{display:block}   /* background work shows on hover, or once unfolded */
#list .s.kid .kind{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--faint);margin-right:6px}
.pane.ro .compose,.pane.ro .send{display:none}
.thumb.big{display:block;max-height:240px;max-width:min(100%,420px);object-fit:contain;cursor:zoom-in;margin:6px 0}
.hview{margin:8px 0}.hview a{font-size:12px}.hview iframe{display:block;width:100%;height:320px;border:1px solid var(--border);border-radius:8px;margin-top:4px;background:#fff}
.draw{margin:8px 0}.draw a{font-size:12px}.draw iframe{display:block;width:100%;height:520px;border:1px solid var(--border);border-radius:8px;margin-top:4px;background:#fff}
.pane .hd .ttl[onclick],.pane .hd .peer[onclick]{cursor:text}.pane .hd [contenteditable=true]{outline:none;border-bottom:1px solid var(--accent)}.pane .hd .ttl:empty::before{content:attr(data-ph);color:var(--faint)}
body.split #list .s.open>em.peer{cursor:text}
.mdf{margin:8px 0;border:1px solid var(--border);border-radius:8px;background:var(--surface);white-space:normal}.mdf summary{cursor:pointer;padding:6px 12px;font-size:12px;color:var(--muted)}.mdf .mdbody{padding:4px 16px 12px;white-space:pre-wrap;border-top:1px solid var(--border)}
.latest{display:inline-block;margin:6px 0;font-size:12px}
#acts{position:sticky;top:0;z-index:2;display:flex;gap:8px;padding:10px 0 8px;background:var(--bg)}#acts button{padding:6px 10px}.s.draft .dhead{display:flex;align-items:center;gap:8px;flex-basis:100%;min-width:0}.s.draft{flex-wrap:wrap}.s.draft .dbox{flex-basis:100%}
.dsec{cursor:pointer;font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--muted);text-transform:none}.dsec:hover{color:var(--accent)}h2[data-id="h:new"] .dsec{margin:0 6px 0 0}
.rmenu .sep{border-top:1px solid var(--border);color:var(--muted)}.rmenu .on{color:var(--accent)}body.split #list .s.draft{border-color:var(--border)!important}body.split #list .s.draft:focus-within{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))!important}
/* heavier clicks: what you press sinks and springs back */
button,.pill,.key{transition:transform 70ms ease-out,box-shadow 70ms ease-out,background var(--t),filter var(--t)}
button:not(.menu){box-shadow:0 2px 0 rgb(60 40 10/.18),inset 0 1px 0 rgb(255 255 255/.45)}button.primary,.pane button,.compose .go{box-shadow:0 2px 0 #7f600f,inset 0 1px 0 rgb(255 255 255/.3)}
button:not(:disabled):active,.pill:active{transform:translateY(2px);box-shadow:0 0 0 transparent,inset 0 1px 3px rgb(60 40 10/.25)!important}
#list .s{transition:transform 70ms ease-out,background var(--t)}
#list .s:active{transform:translateY(1px) scale(.995);background:var(--surface-2)}
/* since you looked: new-for-you rows and the divider */
#list .s.unseen>em.peer{font-weight:700}#list .s.unseen>.dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.sincel{display:flex;align-items:center;gap:10px;margin:18px 0;font:700 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}.sincel::before,.sincel::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--accent) 40%,transparent)}
/* come to life: arrivals glow, sends fly */
#list .s.arrive{animation:arrive 2.2s var(--ease)}@keyframes arrive{0%{transform:translateY(10px);background:color-mix(in srgb,var(--red) 20%,var(--surface));box-shadow:0 0 0 1px rgb(184 50 42/.45),0 0 22px rgb(184 50 42/.22)}25%{transform:none}100%{background:transparent;box-shadow:none}}
.u{box-shadow:0 1px 0 var(--border),0 3px 8px rgb(60 40 10/.05)}
.compose.thunk{animation:thunk .22s ease-out}@keyframes thunk{45%{transform:translateY(2px)}}
.fly{position:fixed;z-index:80;pointer-events:none;padding:9px 13px;border-left:2px solid var(--accent);border-radius:0 9px 9px 0;background:var(--surface);color:var(--text);font-size:15px;line-height:1.5;white-space:pre-wrap;max-height:110px;overflow:hidden;box-shadow:0 10px 26px rgb(60 40 10/.18)}
.u.echo.landed{animation:land .5s cubic-bezier(.2,1.3,.4,1) .12s both}@keyframes land{from{opacity:0;transform:translateY(18px) scale(.98)}}
/* your messages: picked in ⚙. ink = no background, your words in deep gold; bare = the same without the line; tint = a warm wash, no white */
body:not([data-msg=card]) .u{background:transparent;box-shadow:none}
body[data-msg=ink] .u,body[data-msg=bare] .u{color:var(--you);font-weight:500;padding-top:2px;padding-bottom:2px}
body[data-msg=bare] .u{border-left:0;padding-left:0}
body[data-msg=tint] .u{background:color-mix(in srgb,var(--accent) 9%,transparent);border-left-color:color-mix(in srgb,var(--accent) 70%,transparent)}
body:not([data-msg=card]) .u .ts{color:color-mix(in srgb,var(--you) 55%,transparent)}
body[data-msg=ink] .fly,body[data-msg=bare] .fly{background:transparent;box-shadow:none;color:var(--you);font-weight:500}body[data-msg=bare] .fly{border-left:0}
/* gold ink, refined: your words hang on the same line as Claude's, marked by a small gold diamond where Claude has a dot; more air before each of your turns */
body[data-msg=bare] .u{position:relative;padding:0 0 0 18px;margin:30px 0 12px;border:0;color:var(--you);font-weight:500;letter-spacing:-.003em}
body[data-msg=bare] .u::before{content:"";position:absolute;left:3px;top:.62em;width:6px;height:6px;background:var(--accent);transform:rotate(45deg);border-radius:1px}
body[data-msg=bare] .u .ts{color:color-mix(in srgb,var(--you) 50%,transparent)}
body[data-msg=bare] .fly{padding-left:18px}
/* your color: one gold for your words, in the thread and in the box you type in */
body{--you:#8a6212}
body:not([data-msg=card]) :is(.compose textarea,.s.draft textarea){color:var(--you);font-weight:500}
/* rows lift: hover raises a row a little, the open thread sits raised like a key */
body.split #list .s:not(.kid):not(.draft){transition:transform 90ms ease-out,box-shadow 90ms ease-out,background var(--t)}
body.split #list .s:not(.kid):not(.draft):hover:not(.open){background:color-mix(in srgb,var(--surface-2) 45%,transparent)!important;box-shadow:inset 0 1px 0 rgb(255 255 255/.8),0 1px 0 var(--border),0 3px 8px rgb(60 40 10/.07)!important;transform:translateY(-1px)}
body.split #list .s.open:not(.kid){background:color-mix(in srgb,var(--surface-2) 55%,var(--surface))!important;box-shadow:inset 0 1px 0 rgb(255 255 255/.6),0 0 0 1px var(--border),0 2px 0 #e0d1b6,0 6px 14px rgb(60 40 10/.10)!important;border-radius:8px!important}
body.split #list .s:not(.kid):active{transform:translateY(1px)}
/* the send key: a solid gold key in the app's corner style. It travels down when pressed, its edge disappears, a warm flash, then it springs back */
.compose .go{width:38px;height:38px;right:12px;bottom:12px;border:0;display:grid;place-items:center;padding:0;line-height:1;color:#fffaf0;font-size:17px;font-weight:700;border-radius:var(--r-md)!important;
 background:var(--accent);box-shadow:inset 0 1px 0 rgb(255 240 200/.45),0 3px 0 #7a5c10,0 4px 8px rgb(60 40 10/.18)!important;transition:transform 70ms ease-out,box-shadow 70ms ease-out,background 120ms}
.compose .go:hover{background:#b48a20}
.compose .go:active{transform:translateY(3px)!important;box-shadow:inset 0 2px 3px rgb(60 40 5/.35),0 0 0 #7a5c10!important}
.compose .go.fire{animation:key .5s ease-out}
@keyframes key{0%,30%{transform:translateY(3px);box-shadow:inset 0 2px 3px rgb(60 40 5/.35),0 0 0 #7a5c10,0 0 0 4px rgb(240 190 70/.35);background:#c99a26}
 100%{transform:none;box-shadow:inset 0 1px 0 rgb(255 240 200/.45),0 3px 0 #7a5c10,0 4px 8px rgb(60 40 10/.18),0 0 0 4px rgb(240 190 70/0);background:var(--accent)}}
.pane .compose textarea,.ppage .compose textarea{padding-right:64px}
/* corners: one scale (8 small · 12 rows and buttons · 18 big surfaces), nested corners concentric, smooth squircle curves where the browser has them */
:root{--r-sm:8px;--r-md:12px;--r-lg:18px}
button,input,select,.pill,#costb{border-radius:var(--r-md)}
.chip,.tagp{border-radius:999px}
body.split #list .s:not(.kid),body.split :is(#list,.fam)>h2,body.split #list .s.open:not(.kid){border-radius:var(--r-md)!important}
.compose{border-radius:var(--r-lg)}.pane .compose textarea{border-radius:var(--r-lg)}
.rmenu,#settings .panel,#costs{border-radius:var(--r-md)}.rmenu div:first-child{border-radius:calc(var(--r-md) - 2px) calc(var(--r-md) - 2px) 0 0}
.a pre,.u,.thumb,.mdf,.draw iframe,.pane .ask:not(:empty){border-radius:var(--r-sm)}
.a code,.u code{border-radius:6px}
@supports (corner-shape:squircle){button,.compose,.rmenu,#settings .panel,body.split #list .s:not(.kid),.pane .ask:not(:empty){corner-shape:squircle}
 :root{--r-md:16px;--r-lg:24px}}   /* squircles read smaller, so the same look needs a larger radius */
/* /streams: the left is a short list of streams; the right is one stream's page of thread cards */
.srow3{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;padding:8px 10px 8px calc(10px + var(--d,0) * 16px);margin:2px 0;border-radius:var(--r-md);cursor:pointer;transition:transform 90ms ease-out,box-shadow 90ms ease-out,background var(--t)}
.srow3 b{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.srow3[style*="--d:0"] b,.srow3.smart b{font-weight:700}.srow3 small{font:11px var(--mono);color:var(--faint)}
.srow3:hover:not(.on){background:color-mix(in srgb,var(--surface-2) 45%,transparent);transform:translateY(-1px)}
.srow3.on{background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));box-shadow:inset 0 1px 0 rgb(255 255 255/.6),0 0 0 1px var(--border),0 2px 0 #e0d1b6,0 6px 14px rgb(60 40 10/.10)}
.srow3.over{outline:1px dashed var(--accent);outline-offset:-1px}.srow3.smart:first-of-type{margin-top:6px}
.sdot{width:10px;height:10px;border-radius:3px;background:var(--idle)}.sdot.waiting{background:var(--red)}.sdot.running{background:var(--accent)}
.sgrp{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:16px 10px 4px}
.smore{font:400 11.5px var(--mono);color:var(--faint);padding:8px 10px;cursor:pointer}.smore:hover{color:var(--accent)}
.shead{position:relative}.smenu{position:absolute;right:0;top:14px;cursor:pointer;color:var(--faint);padding:2px 8px;font-weight:600;border-radius:var(--r-sm)}.smenu:hover{color:var(--text);background:var(--surface-2)}
.stitle[contenteditable]:focus{outline:none;border-bottom:1px solid var(--accent)}
.ssub{display:flex;align-items:baseline;gap:8px;margin:26px auto 6px;padding-bottom:6px;border-bottom:1px solid var(--border)}.ssub a{font:700 12.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);cursor:pointer}.ssub a:hover{color:var(--accent)}.ssub small{font:11px var(--mono);color:var(--faint)}
.smore2{font:400 11.5px var(--mono);color:var(--faint);padding:4px 10px 0;cursor:pointer}.smore2:hover{color:var(--accent)}
/* a thread card: the usual row, opening on hover to its last messages and a reply box */
.scard{margin:4px 0;border-radius:var(--r-md);transition:background var(--t),box-shadow 120ms ease-out}
.scard>.s{display:grid!important;grid-template-columns:8px minmax(0,1fr) auto auto auto auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:9px 12px;min-height:0;border:0!important;background:transparent!important;border-radius:var(--r-md)}
.scard>.s>.dot{grid-area:1/1}.scard>.s>em.peer{grid-area:1/2;font-style:normal;font-weight:600;font-size:15px;background:none;border:0;padding:0;justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scard>.s>small{grid-area:1/3}
.scard>.s>.menu.flag{grid-area:1/4}.scard>.s>.menu.arch{grid-area:1/5}.scard>.s>.menu.top{grid-area:1/6}.scard>.s>.menu:not(.arch):not(.flag):not(.top){grid-area:1/7}.scard>.s>span{grid-area:2/2/3/-1;font-size:13.5px;color:var(--muted);max-width:none}
.scard>.s>.menu{visibility:hidden}.scard:hover>.s>.menu,.scard.open>.s>.menu{visibility:visible}
.scard:hover{background:color-mix(in srgb,var(--surface-2) 40%,transparent)}
.scard.open{background:var(--surface);box-shadow:inset 0 1px 0 rgb(255 255 255/.6),0 0 0 1px var(--border),0 2px 0 #e0d1b6,0 8px 18px rgb(60 40 10/.10)}
.scard .sexp{display:none;padding:0 14px 12px 30px}.scard.open .sexp{display:block;animation:rise .18s var(--ease)}
.scard .speek{max-height:44vh;overflow:auto;padding:4px 6px 0 0;margin:0;border:0;white-space:pre-wrap;font-size:14.5px}.scard .speek .u{margin:12px 0 6px!important}.scard .speek .a{margin:0 0 8px}
.scard .kids-t,.scard .kid{margin-left:30px!important}
.spage{flex:1;min-height:0;display:flex;flex-direction:column}.sbody{flex:1;min-height:0;overflow:auto;padding:8px 4px 24px}.sbody>*,.spage>.compose{width:100%;max-width:52rem;margin-left:auto;margin-right:auto}
.spage .compose textarea{width:100%;margin:0;border:0;background:transparent;resize:none;font:inherit;font-size:15px;line-height:1.6;padding:14px 64px 4px 16px;caret-color:var(--accent);color:var(--you);font-weight:500}.spage .compose textarea:focus{outline:0}.spage .compose textarea::placeholder{color:var(--faint);font-style:italic;font-weight:400}
.spage .compose .hint{opacity:1;display:flex;gap:6px;align-items:center}.spage .compose .hint label{display:flex;gap:6px;align-items:center;color:var(--muted)}
.scrumb{font:400 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:14px}
.stitle{font:700 28px/1.15 var(--ui);letter-spacing:-.02em;color:#120c07;margin-top:4px}
.sdesc{margin-top:10px;padding:10px 12px;max-width:calc(52rem + 24px)!important;width:calc(100% + 24px)!important;border-radius:var(--r-md);font-size:15px;line-height:1.6;white-space:pre-wrap;outline:none;transition:background var(--t)}.sdesc:hover{background:color-mix(in srgb,var(--surface-2) 35%,transparent)}.sdesc:focus{background:var(--surface);box-shadow:0 0 0 1px var(--accent)}
.sdesc.none:empty::before{content:attr(data-ph);color:var(--faint);font-style:italic}
.sbody h3{font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:28px auto 10px}.sbody h3.red{color:var(--red)}.sbody h3 small{font-weight:400;letter-spacing:0;text-transform:none;color:var(--faint);margin-left:8px}
.sin{display:block;width:100%;margin-top:10px;border:0!important;border-bottom:1px dashed var(--border)!important;border-radius:0!important;background:transparent!important;padding:7px 0!important;font-size:14.5px;color:var(--you);font-weight:500}.sin::placeholder{color:var(--faint);font-style:italic;font-weight:400}.sin:focus{border-bottom-color:var(--accent)!important}
.speek{margin:2px 0 10px 24px;padding:6px 14px;max-height:40vh;overflow:auto;border-left:2px solid var(--border);white-space:pre-wrap;font-size:14px}.speek .u{margin:10px 0 6px!important}.speek .a{margin:0 0 8px}
.snone{color:var(--faint);font-size:14px;padding:4px 0}
.sstrip{flex:none;display:flex;align-items:center;gap:10px;margin:-16px -32px 12px;padding:10px 32px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 35%,transparent)}
.sstrip a{flex:none;font:600 13px var(--ui);color:var(--text);cursor:pointer}.sstrip a:hover{color:var(--accent)}
.ssib{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.ssib span{flex:none;font-size:12.5px;padding:3px 10px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--border);cursor:pointer;color:var(--muted)}.ssib span.on{color:var(--text);box-shadow:0 0 0 1.5px var(--accent)}
.ssib span i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:var(--idle);vertical-align:1px}.ssib span i.waiting{background:var(--red)}.ssib span i.running{background:var(--accent)}

.tl .k{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:6px}.tl pre.cmd{color:var(--muted);font-size:12px;margin:2px 0 0;white-space:pre-wrap;word-break:break-all}

.tl summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--faint);opacity:.85;min-height:22px;line-height:22px}.tl summary::-webkit-details-marker{display:none}.tl summary::before{content:"▸ "}.tl[open]>summary::before{content:"▾ "}.tl summary:hover{opacity:1;color:var(--muted)}.tl .k{opacity:.7}
.tl pre{font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--muted);margin:2px 0 8px 14px;padding:6px 10px;border-left:2px solid var(--border);background:transparent;white-space:pre-wrap;word-break:break-word;max-height:36vh;overflow:auto}.tl pre.cmd{color:var(--claude);border-left-color:var(--accent);opacity:.9}.tl pre.cmd+pre:not(.out){display:none}.tl pre.out{color:var(--muted)}.tl pre.out.err{color:var(--red);border-left-color:var(--red)}.tl pre.out:empty,.tl pre.out:only-child{display:none}

.a,.u{font-weight:500}.a b,.u b{font-weight:600}
/* /streams fixes: a stream heading is a heading, never a raised card; its parts stay on one line; the live line and cause sit under the position in the stream page too */

/* streams view, calmer: the left side is streams + what's going on in each; threads live on the right. One box: the open thread's. */
   /* needs-you strips sit before the running heading, so this hides only the running ones */

/* streams view, second pass: classic headings on the left, no white cards, no stray meta, compose stays inside its pane */
.ssub .addsub{margin-left:10px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);cursor:pointer;opacity:0;transition:opacity var(--t)}.ssub:hover .addsub{opacity:1}.ssub .addsub:hover{color:var(--accent)}
.rmenu.pick{max-width:360px}.rmenu.pick div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ears{display:inline-flex;gap:10px;margin:0 0 0 6px}#settings .prow{display:flex;align-items:center;gap:6px}#ears .ear{display:inline-flex;align-items:center;gap:5px;font:11px var(--mono);letter-spacing:.04em;color:var(--muted);cursor:pointer;font-style:normal}#ears .ear b,.ear-pop .hd b{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4a9a3a;box-shadow:0 0 0 2px color-mix(in srgb,#4a9a3a 22%,transparent)}#ears .ear.off b,.ear-pop .hd b.off{background:var(--red,#b0442f);box-shadow:0 0 0 2px color-mix(in srgb,#b0442f 20%,transparent)}#ears .ear.off{color:var(--faint)}
#bar #costb{margin-left:0}
.ear-pop{min-width:380px;max-width:430px;padding:4px 0}.ear-pop .it{font-size:13px;line-height:1.4;cursor:default;display:block}.ear-pop .it:hover{background:none}.ear-pop .it .w{color:var(--muted);font:12px var(--mono)}.ear-pop .it .r{display:block;font-size:12px;color:var(--faint)}.ear-pop .it .r a{color:var(--accent);cursor:pointer}.ear-pop .it .r .un{color:var(--red,#b0442f)}.rmenu.pick .w{font:11px var(--mono);color:var(--faint);margin-right:4px}.ear-pop .hd{font:600 12px var(--mono);letter-spacing:.04em;display:flex;align-items:center;gap:8px;cursor:default}.ear-pop .hd:hover{background:none}.ear-pop .ro{font-size:12.5px;color:var(--muted);cursor:default;line-height:1.45}.ear-pop .ro:hover{background:none}.ear-pop .act{color:var(--accent);font-size:13px;border-top:1px solid var(--border);margin-top:4px}
#list h2.inboxh,#list h2.inboxh .title,body.split #list h2.inboxh{color:#2f5f9e}#list h2.inboxh .car{color:#2f5f9e;opacity:.7;margin-right:6px}#list h2.runh,#list h2.runh .title,body.split #list h2.runh{color:var(--accent)}.dot.inb{background:transparent;border:1.5px solid var(--faint)}#list .s.inb span{color:var(--text)}#list .s.more span{color:var(--faint);font-size:12px}#list .s.more a{color:var(--accent);cursor:pointer}
body.split #list .s.strip.inb:has(>.crumb)>span{grid-area:2/2/3/6;padding-left:0;-webkit-line-clamp:2}body.split #list .s.strip.inb:has(>.crumb)>.menu.top{grid-area:2/6}body.split #list .s.strip.inb:has(>.crumb)>.menu:not(.arch):not(.flag):not(.top){grid-area:2/7}body.split #list .s.strip.inb>small{grid-area:1/3/2/-1;justify-self:end}
#list h2 .n.cw,#list h2 .n.cr,#list h2 .n.ci{margin-left:8px}#list h2 .n.cw{color:var(--amber)}#list h2 .n.cr{color:var(--accent)}#list h2 .n.ci{color:#2f5f9e}
#list h2.projh,#list h2.projh .title,body.split #list h2.projh{color:var(--text);font-weight:700}#list h2.projh .car{opacity:.6;margin-right:6px}
#list h2.needs .car,#list h2.runh .car{opacity:.6;margin-right:6px}
body.split #list>.fam[data-id="f:projects"]{margin-left:0!important}body.split #list>.fam[data-id="f:projects"]>h2,body.split #list>.fam[data-id="f:projects"]>.fam,body.split #list>.fam[data-id="f:projects"]>.s{margin-left:14px!important}
.note.rw{color:var(--accent)}.note.rw a{color:var(--accent);cursor:pointer;text-decoration:underline}
#list h2.archh,#list h2.archh .title,body.split #list h2.archh{color:#7b5e7b}#list h2.archh .car{opacity:.6;margin-right:6px}
body.split #list h2.archsec{padding-left:calc(8px + 28px + var(--d,0) * 14px)!important}#list h2.archsec .car{opacity:.6;margin-right:6px}body.split #list .s.sub[data-x]{margin-left:0!important;padding-left:calc(16px + 28px + var(--d,0) * 14px)!important}body.split #list #aq{margin-left:28px;width:calc(100% - 28px)}
body.split #list h2.archsec,body.split #list h2.archsec .title{font-size:12.5px;color:#7b5e7b}#list h2.archsec .when{margin-left:auto;font:400 11px var(--mono);letter-spacing:0;text-transform:none;color:var(--faint)}

#list .fam>h2.ecrumb{cursor:default;color:var(--faint)}#list .fam>h2.ecrumb:hover{background:var(--surface)}
/* phone (≤700px): one column. The list is one screen, an open thread is the other (body.m-thread); the reply box sits above the keyboard; every control is a tap target */
#back{display:none}
@media(max-width:700px){
 /* phone: one column; the list and the thread are two screens (body.m-thread); one header row with the bar on its right; a floating + for new threads */
 body.split{height:var(--vvh,100dvh);grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
 body.split header{grid-row:1;grid-column:1;padding:8px 12px 6px;min-height:48px;gap:4px}body.split h1{font-size:15px}
 body.split #bar{grid-row:1;grid-column:1;justify-self:end;align-self:center;padding:0 10px;gap:4px;flex-wrap:nowrap}body.split #bar #views{display:none}body.split #costs{grid-row:2;grid-column:1;margin:0 12px 8px}body.split #wrap{grid-row:3;grid-column:1;grid-template-columns:minmax(0,1fr)!important}body.split #main,body.split .pane,body.split .pane .ask{min-width:0;max-width:100%}   /* a nowrap strip or a wide <pre> must not widen the page */
 body.split #grip,body.split #sidet,body.split #acts{display:none!important}
 body.split #side{display:block!important;padding:0 8px calc(96px + env(safe-area-inset-bottom))}body.split #main{display:none}
 body.split.m-thread #side{display:none!important}body.split.m-thread #main{display:flex;padding:4px 12px calc(8px + env(safe-area-inset-bottom))}body.split.m-thread #bar,body.split.m-thread #costs{display:none}
 body.split.m-thread #back{display:grid;place-items:center;width:44px;height:44px;padding:0;margin-left:-10px;background:transparent;border-color:transparent;box-shadow:none;color:var(--accent);font-size:28px;line-height:1}
 /* thread header: title, a two-line gist (tap it to read all), where. With the keyboard up (body.kb) it folds to the title so the chat keeps the room */
 body.split #main .pane .hd{margin-bottom:8px;padding-bottom:8px}body.split .pane .hd .ttl{font-size:16px}body.split .pane .hd .menu{min-width:44px;min-height:44px;margin:-10px 0 0}
 body.split .pane .hd .pos{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}body.split .pane .hd.x .pos{display:block;-webkit-line-clamp:none}
 body.split .pane .ask:not(:empty):not(:has(.opts)){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px;padding:9px 12px}body.split .pane .ask.x{white-space:normal}   /* the red strip stays one line (tap it to read all), keyboard up or not */
 body.kb .pane .hd .pos,body.kb .pane .hd .where{display:none!important}body.kb #main .pane .hd{margin-bottom:4px;padding-bottom:4px}
 body.split .pane .msgs{font-size:15px}.pane .compose{margin-top:8px}.pane .compose textarea{font-size:16px;max-height:30vh}body.kb .pane .compose textarea{max-height:22vh}.compose .go{width:44px;height:44px;right:8px;bottom:8px}.compose .hint{display:none}
 /* rows: what the desktop shows on hover is always there. One ⋯ is the tap route to every row action (swipe left archives) */
 body.split #list .s>.menu,body.split #list .s:not(:hover):not(.open)>.menu{visibility:visible;min-width:40px;min-height:44px;color:var(--faint)}body.split #list .s>.menu.flag,body.split #list .s>.menu.arch,body.split #list .s>.menu.top{display:grid;place-items:center;min-width:30px;min-height:36px;font-size:13px}
 /* quiet on the phone: plain glyphs, no fills; the on state is colour only, so the title and summary lead (Nishanth, Oct 17) */
 body.split #list .s>.menu{min-width:30px;min-height:36px;padding:0 2px;font-weight:500;background:transparent!important;color:color-mix(in srgb,var(--faint) 75%,transparent)}
 body.split #list .s>.menu.flag.on{color:var(--red);font-weight:700}body.split #list .s>.menu.top.on{color:var(--accent)}body.split #list .s>.menu.top svg{width:12px;height:12px}
 body.split #list .s:not(.add):not(.draft){column-gap:4px}
 body.split #list .s>small,body.split #list .s:not(.open):not(:hover)>small{display:block;visibility:visible}body.split #list .s small .meta{opacity:1}
 body.split #list .s:not(.add):not(.draft)>em.peer{grid-area:1/2/2/4}body.split #list .s:not(.add):not(.draft)>small{grid-area:2/2/3/-1;justify-self:start}body.split #list .s:not(.add):not(.draft)>.menu.top{grid-area:1/6}body.split #list .s:not(.add):not(.draft)>.menu:not(.arch):not(.flag):not(.top){grid-area:1/7}body.split #list .s:not(.add):not(.draft)>span{grid-area:3/2/4/-1}
 body.split #list .s.strip:has(>.crumb)>em.peer{grid-area:2/2/3/4}body.split #list .s.strip:has(>.crumb)>small{grid-area:3/2/4/-1}body.split #list .s.strip:has(>.crumb)>.menu.top{grid-area:2/6}body.split #list .s.strip:has(>.crumb)>.menu:not(.arch):not(.flag):not(.top){grid-area:2/7}body.split #list .s.strip:has(>.crumb)>span{grid-area:4/2/5/-1}
 body.split #list .s.strip.inb:has(>.crumb)>span{grid-area:2/2/3/6}body.split #list .s.strip.inb:has(>.crumb)>.menu.top{grid-area:2/6}body.split #list .s.strip.inb:has(>.crumb)>.menu:not(.arch):not(.flag):not(.top){grid-area:2/7}body.split #list .s.strip.inb>small{grid-area:1/3/2/-1;justify-self:end}
 body.split #list .s{padding:8px 4px 8px 8px;min-height:44px;will-change:transform}body.split #list .s.strip{padding-top:10px}body.split #list .s:not(.kid):not(.draft):hover:not(.open){transform:none;box-shadow:none!important;background:transparent!important}
 body.split #list .s.swiping{background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important;border-radius:var(--r-md)}body.split #list .s.swiping.past{background:color-mix(in srgb,var(--accent) 32%,var(--surface))!important}
 body.split #list .s.kid{min-height:44px}#list .s.kid>small{opacity:1}.kids-t{display:block;min-height:44px;line-height:44px;margin-top:-6px}
 /* new-thread row: 16px so iOS doesn't zoom in, a ↑ to start it (Enter is the newline key on a phone), the folder on screen instead of in a tooltip */
 body.split #list .s.draft{padding:10px 8px}.s.draft .dhead{min-height:44px}.s.draft .dsec{min-height:44px;display:inline-flex;align-items:center;font-size:13px}.s.draft .dh{display:block;margin-left:auto;max-width:45%;font:11px var(--mono);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .s.draft .dbox{position:relative}.s.draft textarea{font-size:16px;line-height:1.4;padding:8px 52px 8px 0}.s.draft .dgo{display:grid;place-items:center;position:absolute;right:2px;bottom:4px;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:16px;line-height:1;box-shadow:0 2px 0 #7f600f}
 /* section headings: only + is on screen, in a 40px box */
 body.split :is(#list,.fam)>h2{display:flex;flex-wrap:wrap;align-items:center;padding:10px 8px 4px}:is(#list,.fam)>h2 .ctl{order:0;flex-basis:auto;float:none;display:flex;gap:0 2px;opacity:1;margin:0 0 0 auto}body.split :is(#list,.fam)>h2 .ctl b{display:inline-grid!important;place-items:center;min-height:40px;min-width:40px;margin:0;padding:0 6px;font-size:12px}body.split :is(#list,.fam)>h2 .ctl b:not(.add-t){display:none!important}:is(#list,.fam)>h2 .n{margin-left:6px}
 h2 .car{width:1.8em;min-height:44px;line-height:44px;margin:-10px 0 -6px -.3em}
 /* top bar */
 #bar{gap:6px}#ears{gap:7px;flex-wrap:wrap}#ears .ear{font-size:10.5px;letter-spacing:0;min-height:36px}#bar button,#bar select,#costb{min-height:36px}#costb{padding:4px 9px;font-size:11px;border-radius:999px}#settings summary{width:36px;height:36px;font-size:15px}#settings .panel{right:0;left:auto;max-width:calc(100vw - 24px);white-space:normal}
 .pill{min-height:36px;padding:4px 8px 4px 12px}.pill b{min-width:32px;min-height:32px;display:inline-grid;place-items:center}.chip{padding:4px 9px;font-size:11px}
 .rmenu div{min-height:44px;display:flex;align-items:center}.costm div{justify-content:space-between}.opts button,.ask-pop button{min-height:44px}.ask-pop input{font-size:16px;min-height:44px}
 .tl summary{min-height:36px;line-height:36px}.ts{opacity:1}.thumb.big{max-width:100%}.draw iframe{height:60vh}.a pre{max-width:100%}
 body.split:not(.m-thread) #fab{display:grid;place-items:center;position:fixed;right:18px;bottom:calc(20px + env(safe-area-inset-bottom));width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--accent);color:#fff;font:300 32px/1 var(--ui);box-shadow:0 6px 18px rgb(60 40 10/.25);z-index:40}
}
#fab{display:none}
/* touch. No grey tap flash; the list and the chat don't chain their scroll to the page; every popup is a bottom sheet (place() adds .sheet under 700px) */
*{-webkit-tap-highlight-color:transparent}body.split #side,.pane .msgs{overscroll-behavior:contain}#list .s{touch-action:pan-y}
.rmenu.sheet{position:fixed;top:auto!important;left:0!important;right:0;bottom:0;width:auto;max-width:none;min-width:0;max-height:70vh;border-radius:16px 16px 0 0;padding:6px 0 calc(8px + env(safe-area-inset-bottom));z-index:60;box-shadow:0 -8px 30px rgb(60 40 10/.22)}
.rmenu.sheet>div{min-height:46px;box-sizing:border-box;display:flex;align-items:center;padding:6px 18px;font-size:15px}.rmenu.sheet.ask-pop{padding:14px 16px calc(14px + env(safe-area-inset-bottom))}.rmenu.sheet.ask-pop p{font-size:15px}
body:has(.rmenu:not(.ask-pop)) #fab{display:none!important}
@media(hover:none){   /* a tap must not leave a hover state behind */
 .s:hover:not(.open){background:var(--surface)}body.split #list .s:hover:not(.open){background:transparent!important;transform:none;box-shadow:none!important}
 .s .menu:hover{color:var(--faint);background:transparent}.pane .hd .menu:hover{color:var(--faint)}:is(#list,.fam)>h2:hover{background:transparent}
 .pill:hover:not(.on),.chip:hover:not(.on){color:var(--muted);border-color:var(--border)}.dsec:hover{color:var(--muted)}#bolt:hover{filter:none}.rmenu div:hover{background:transparent}.tls:hover::before{opacity:.7}}
/* an ask's brief under its buttons: a collapsible sandboxed frame */
.ask .brief{margin:8px 0 2px}.ask .brief summary{cursor:pointer;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);list-style:none}.ask .brief summary::-webkit-details-marker{display:none}.ask .brief summary::before{content:'▸ brief · '}.ask .brief[open] summary::before{content:'▾ brief · '}.ask .brief summary a{color:var(--faint);text-decoration:none;margin-left:4px}.ask .brief iframe{display:block;width:100%;height:220px;border:0;border-radius:10px;background:var(--bg);margin-top:6px;box-shadow:0 0 0 1px var(--border)}
/* a long unwrapped line must never widen the transcript column */
.pane .msgs{min-width:0;overflow-x:hidden}.a pre,.a code,.u pre,.u code{overflow-wrap:anywhere;max-width:100%}.u pre{white-space:pre-wrap;word-break:break-word}
.pane .ask .brief iframe{max-height:min(42vh,480px)}.pane .ask:not(:empty),body.split .pane .ask:not(:empty){flex:0 1 auto;min-height:0;max-height:60vh;overflow:auto}.pane:has(.ask .brief) .msgs{min-height:26vh}   /* a tall brief scrolls inside its frame; the ask shrinks before the chat does; the composer stays on screen */
@media(max-width:700px){.pane .ask .brief iframe{max-height:30vh}body.split .pane .ask:not(:empty){max-height:40vh}}   /* phone: the brief starts folded and never takes more than the top half */
/* bucket colours: Running gold, Waiting brown (out of its hands), Blocked red-brown; dots match */
#list h2.runh.onjob,#list h2.runh.onjob .title,body.split #list h2.runh.onjob{color:var(--muted)}.dot.wait{box-shadow:inset 0 0 0 1.5px var(--muted)}
#list h2.runh.blocked,#list h2.runh.blocked .title,body.split #list h2.runh.blocked{color:color-mix(in srgb,var(--red) 65%,var(--muted))}.dot.blocked{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--red) 65%,var(--muted))}

/* /front: one column, the list is the page; click a row and the one box at the bottom writes to it; open ↗ (or ⌘↩) shows the whole session as a sheet */
body.front #wrap{grid-template-columns:1fr}body.front #main{display:none}body.front #side{border-right:0;max-width:none;padding-left:max(12px,calc((100% - 1040px)/2));padding-right:max(12px,calc((100% - 1040px)/2));padding-bottom:120px}
body.front #list .s:has(>.dot.waiting)>span{-webkit-line-clamp:unset}
body.front #list .s:has(+.sfront){margin-bottom:0}
body.front .sfront{margin:0 0 4px;padding:0 10px 2px 34px}body.front .sfront .opts{padding:4px 0 4px}body.front .sfront .opts p{font-size:13.5px;color:var(--text)}
body.front #list .s:not(.add):not(.draft){grid-template-columns:8px minmax(0,1fr) auto auto auto auto auto}body.front #list .s>.menu.fo{grid-area:1/7!important;opacity:1;visibility:visible!important;font:500 11.5px var(--ui);color:var(--faint);align-self:start;padding:2px 6px;min-height:0!important;min-width:0!important}body.front #list .s>.menu.fo:hover{color:var(--accent);background:var(--surface-2)}
#fbot{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:8px max(12px,calc((100% - 1040px)/2)) 14px;background:linear-gradient(transparent,var(--bg) 30%);pointer-events:none}
#fbot .compose{pointer-events:auto;margin:0;opacity:.85}#fbot.aimed .compose,#fbot .compose:focus-within{opacity:1}
body.front.fopen #main{display:flex;position:fixed;inset:4vh 6vw;z-index:60;background:var(--bg);border:1px solid var(--border);border-radius:14px;box-shadow:0 30px 80px -20px rgb(60 40 10/.45);padding:16px 24px}
body.front.fopen::after{content:"";position:fixed;inset:0;z-index:55;background:rgb(60 40 10/.18)}
body.front.fopen #main::before{content:"Esc closes";position:absolute;top:10px;right:16px;font:11px var(--mono);color:var(--faint)}

#list h2.toph,#list h2.toph .title,body.split #list h2.toph{color:var(--accent)}#list h2.toph{cursor:default}

/* right-hand doc pane: a shared markdown file beside the thread */
#docpane,#grip2{display:none}body.split.hasdoc #wrap{grid-template-columns:var(--sw,34%) 6px 1fr 6px var(--dw,38%)}body.split.noside.hasdoc #wrap{grid-template-columns:1fr 6px var(--dw,38%)}
body.split.hasdoc #grip2{display:block;border-left:1px solid var(--border);cursor:col-resize;transition:background var(--t)}body.split.hasdoc #grip2:hover,body.resizing #grip2{background:color-mix(in srgb,var(--accent) 25%,transparent)}body.split.hasdoc #docpane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
#dochd{display:flex;gap:10px;align-items:center;padding:6px 12px;border-bottom:1px solid var(--border);font:12px var(--mono);color:var(--faint)}#dochd span{flex:1;color:var(--muted)}#dochd a{color:var(--accent);text-decoration:none}#dochd b{cursor:pointer;font-weight:400;font-size:15px;color:var(--faint)}#dochd b:hover{color:var(--red)}
#docfr{flex:1;border:0;width:100%;min-height:0}
@media(max-width:800px){#docpane,#grip2{display:none!important}body.split.hasdoc #wrap{grid-template-columns:1fr}}
/* voice: a mic beside the send button; quiet until it listens, then red */
.compose .mic,.pane .compose .mic,.dbox .mic{position:absolute;right:58px;bottom:12px;width:38px;height:38px;border-radius:var(--r-md);padding:0;border:1px solid var(--border);background:transparent!important;box-shadow:none!important;color:var(--faint);display:grid;place-items:center;cursor:pointer;transition:color var(--t),border-color var(--t)}
.compose .mic:hover,.pane .compose .mic:hover{color:var(--accent);border-color:var(--accent);filter:none}
.compose .mic.on,.pane .compose .mic.on{color:#fff;background:#b3261e!important;border-color:#b3261e;animation:micpulse 1.2s ease-in-out infinite}
.compose .mic svg{width:17px;height:17px}
.pane .compose.has-mic textarea,.compose.has-mic textarea{padding-right:104px}.dbox.has-mic textarea{padding-right:96px}
textarea.listening{box-shadow:inset 0 0 0 1px #b3261e}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgb(179 38 30/.45)!important}50%{box-shadow:0 0 0 7px rgb(179 38 30/0)!important}}
@media (pointer:coarse){.compose .mic,.pane .compose .mic{width:44px;height:44px;right:60px;bottom:8px}}
/* voice mode: a thin red bar up top while it's on; the mic shows it's armed */
#voicebar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:10px;padding:6px 14px;background:#b3261e;color:#fff;font:600 12px var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
#voicebar .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:micpulse 1.2s ease-in-out infinite}#voicebar b{margin-left:auto;font-weight:700;text-decoration:underline}
body.voice{padding-top:28px}.compose.vmode .mic,.pane .compose.vmode .mic{border-color:#b3261e;color:#b3261e}
.compose .vhint,.dbox .vhint{position:absolute;left:16px;bottom:-18px;font:11px var(--mono);color:#b3261e;letter-spacing:.03em}
/* voice pad: on a phone in voice mode the screen below the bar is the talk button; the chat stays readable underneath, a strip at the bottom shows your words */
#voicepad{position:fixed;top:28px;left:0;right:0;bottom:0;z-index:55;background:transparent;pointer-events:none;-webkit-user-select:none;user-select:none}#voicepad .vp-strip{pointer-events:auto}
@media (pointer:coarse){body.voice{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}   /* a hold to talk is not a hold to select text */
#voicepad .vp-strip{position:absolute;left:0;right:0;bottom:0;padding:12px 18px calc(14px + env(safe-area-inset-bottom));background:rgb(250 246 238/.94);border-top:1px solid var(--border);box-shadow:0 -6px 18px rgb(60 40 10/.08)}
#voicepad .vp-hint{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}#voicepad.hot .vp-hint{color:#b3261e}#voicepad.hot .vp-hint::before{content:"● ";animation:micpulse 1.2s infinite}
#voicepad .vp-said{font:500 19px/1.35 var(--ui);color:var(--text);min-height:1.4em;margin-top:6px;max-height:30vh;overflow:auto}#voicepad .vp-said.sent{color:var(--muted);font-size:14px}
#voicepad.hot{background:rgb(179 38 30/.05)}

/* the server is down: a zen garden fills the screen (sand canvas), glass cards float on it: the wait, where things stand, write-anyway. Coming back never yanks the page */
#down{position:fixed;inset:0;z-index:200;background:var(--bg);color:var(--text);touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none;animation:downin .6s var(--ease)}
@keyframes downin{from{opacity:0}to{opacity:1}}#down.out{animation:downout .6s var(--ease) forwards}@keyframes downout{to{opacity:0;transform:scale(1.015)}}
#down #sand{position:absolute;inset:0;cursor:crosshair}
#down .dcard{position:absolute;background:rgb(255 253 248/.78);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgb(255 255 255/.7);box-shadow:inset 0 1px 0 rgb(255 255 255/.9),0 0 0 1px rgb(201 162 39/.12),0 18px 44px -14px rgb(60 40 10/.22);border-radius:16px;padding:14px 16px;user-select:text;-webkit-user-select:text;touch-action:auto}
#down .dhead{left:24px;top:calc(20px + env(safe-area-inset-top));display:flex;gap:12px;align-items:center;padding:12px 18px 12px 14px}
#down .bolt{width:36px;height:36px;animation:breathe 2.6s ease-in-out infinite}#down.back .bolt{animation:none}@keyframes breathe{0%,100%{opacity:.4;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
#down h2{margin:0;font:600 17px/1.3 var(--ui);letter-spacing:-.01em}#down .sub{font:11.5px var(--mono);color:var(--faint);letter-spacing:.04em;margin-top:2px}
#down .dt{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}#down .dt small{font-weight:400;text-transform:none;letter-spacing:0;color:var(--faint);margin-left:6px}
#down .dstand{right:24px;top:calc(20px + env(safe-area-inset-top));width:min(380px,40vw);max-height:calc(100vh - 60px);overflow:auto;padding-bottom:10px}
#down .dstream{margin:8px 0 12px}#down .dtag{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 4px}
#down .dstep{font:13px/1.4 var(--ui);color:var(--muted);padding:2px 0 2px 16px;position:relative}#down .dstep i{position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--faint)}#down .dstep i.doing{border-color:var(--accent);background:var(--accent)}
#down .dth{display:grid;grid-template-columns:10px 1fr;column-gap:8px;padding:5px 0 5px 0;font-size:13px;line-height:1.4}#down .dth i{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--idle)}#down .dth i.red{background:var(--red)}#down .dth i.gold{background:var(--accent)}
#down .dth b{font-weight:600;color:var(--text)}#down .dth span{grid-column:2;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#down .dmute{font:13px var(--ui);color:var(--faint);font-style:italic}
#down .dwrite{left:24px;bottom:calc(24px + env(safe-area-inset-bottom));width:min(400px,40vw)}
#down .dwrite select{width:100%;margin:0 0 8px;font:13px var(--ui);padding:7px 10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
#down .dwrite textarea{width:100%;resize:none;font:14px/1.45 var(--ui);padding:9px 11px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--you,var(--text))}#down .dwrite textarea:focus{outline:0;border-color:var(--accent)}
#down .drow{display:flex;align-items:center;gap:10px;margin-top:8px}#down .drow button{min-height:34px;padding:0 14px;border-radius:10px;font:600 13px var(--ui)}#down .dq{font:11.5px var(--mono);color:var(--accent)}
#down .dhint{position:absolute;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom));text-align:center;font:11.5px var(--mono);color:var(--faint);letter-spacing:.03em;pointer-events:none}#down .dhint.pv{bottom:calc(26px + env(safe-area-inset-bottom));pointer-events:auto;cursor:pointer;color:var(--muted)}#down .dhint kbd{font:inherit;color:var(--text);background:var(--surface-2);border-radius:4px;padding:1px 5px}
#down .chip{position:absolute;left:50%;top:calc(24px + env(safe-area-inset-top));transform:translateX(-50%);font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--surface);border:1px solid var(--accent);border-radius:999px;padding:8px 16px;box-shadow:var(--shadow);animation:downin .4s var(--ease);cursor:pointer}#down .chip:hover{background:var(--surface-2)}
@media(max-width:700px){#down .dhead{left:12px;right:12px;top:calc(12px + env(safe-area-inset-top))}#down .dstand{left:12px;right:12px;width:auto;top:calc(84px + env(safe-area-inset-top));max-height:38vh}#down .dwrite{left:12px;right:12px;width:auto;bottom:calc(34px + env(safe-area-inset-bottom))}#down .dwrite textarea{font-size:16px}#down .chip{top:auto;bottom:calc(200px + env(safe-area-inset-bottom))}#down .dhint{display:none}#down .dhint.pv{display:block;bottom:calc(10px + env(safe-area-inset-bottom))}}
/* life: the pixel-plant layer sits over the page, never catches a pointer; sits under popups (z 50+) */
#life{position:fixed;inset:0;z-index:30;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges}
#lifeback{position:fixed;inset:0;z-index:0;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges}
body.split>:is(#costs,#wrap){position:relative;z-index:1}body.split>:is(header,#bar){position:relative;z-index:5}   /* header and bar above the page body so the ⚙ panel's clicks reach it */   /* page content sits above the back layer, the back layer above the cream */
#settings #lifepick{width:110px;accent-color:var(--accent)}

/* the rail where he looks: live steps under a section heading, and the whole rail as a popup */
:is(#list,.fam)>h2 .live{display:block;margin-top:5px;font:400 13px/1.45 var(--ui);letter-spacing:0;text-transform:none;color:var(--text);max-width:72ch;cursor:pointer}
:is(#list,.fam)>h2 .live .lv{display:block;font-style:normal;padding-left:12px;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#list,.fam)>h2 .live .lv::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
:is(#list,.fam)>h2 .live .lv.blocked::before{background:var(--red)}:is(#list,.fam)>h2 .live .lv.blocked{color:var(--red)}
:is(#list,.fam)>h2 .live .lv.needs::before{box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 30%,transparent)}
:is(#list,.fam)>h2 .live:hover .lv{text-decoration:underline;text-decoration-color:var(--border)}
body.split :is(#list,.fam)>h2 .live{display:block;margin-top:3px}

.rmenu.railpop{min-width:340px;max-width:min(560px,92vw);max-height:72vh;font-size:13.5px;letter-spacing:0;text-transform:none}
.railpop>div{cursor:default}.railpop>div:hover{background:transparent}
.railpop .rh{padding:12px 14px 8px;border-bottom:1px solid var(--border)}.railpop .rh b{font-size:15px;color:var(--text)}.railpop .rh .n{color:var(--faint);margin-left:6px}.railpop .rh p{margin:6px 0 0;color:var(--muted)}.railpop .rh .hint{font-size:12px;color:var(--faint)}
.railpop .rg{padding:10px 14px 2px;font:600 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.railpop .rs{display:grid;grid-template-columns:30px 70px minmax(0,1fr);gap:0 8px;padding:6px 14px;align-items:baseline}.railpop .rs.doing{background:color-mix(in srgb,var(--accent) 9%,transparent)}.railpop .rs.blocked{background:color-mix(in srgb,var(--red) 9%,transparent)}
.railpop .rs .num{color:var(--faint);font-variant-numeric:tabular-nums}.railpop .rs .st{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.railpop .rs.done .tt{color:var(--muted)}
.railpop .rs .who{display:block;color:var(--faint);font-size:12px;margin-top:2px}.railpop .rs .who .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 4px 1px 0}
.railpop .rns{grid-column:3;margin-top:3px}.railpop .rn{font-size:12.5px;color:var(--text);padding:2px 0}.railpop .rn b{font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-right:4px}.railpop .rn.decision b{color:var(--red)}.railpop .rn .src{display:block;color:var(--faint);font-style:italic}
.rmenu.sheet.railpop{max-height:80vh}.rmenu.sheet.railpop>div{display:block;min-height:0;padding:6px 14px}

/* a pin that looks like a pin */
.s .menu.top{font-size:13px;line-height:1}.s .menu.top svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.s .menu.top.on{color:var(--accent);opacity:1}.s .menu.top.on svg{fill:var(--accent)}

#spend{align-self:stretch;padding:0 0 8px;border-bottom:1px solid var(--border);color:var(--muted)}#spend .sp1{font-size:12px}#spend .sp1 b{font-size:14px;color:var(--text)}
#spend .spd{display:grid;grid-template-columns:4.6em 90px auto;align-items:center;gap:8px;padding:2px 0;font-size:11px;color:var(--faint)}#spend .spd.now span{color:var(--text);font-weight:600}#spend .spd i{display:block;height:6px;border-radius:3px;background:var(--surface-2);min-width:2px}#spend .spd.now i{background:var(--accent)}#spend .spd b{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
#spend .spmore{display:inline-block;margin-top:4px;font-size:11px;color:var(--accent);text-decoration:none}#spend .spmore:hover{text-decoration:underline}

/* threads with goals (Oct 17): the goal is the row's line; decisions/facts as a quiet chip; a not-started thread is a hollow grey dot with ▶ */
.s b.goal{font-weight:600;color:var(--text)}.s .nchip{font:500 11px var(--mono);color:var(--faint);margin-left:6px;white-space:nowrap}
.dot.unstarted{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}.s.unstarted{opacity:.75}.s.unstarted:hover{opacity:1}.s.unstarted b.menu.wake{opacity:1;color:var(--accent)}

/* the thread card in the pane header: collapsed = goal + state line; .x = the eight fields */
body.split .pane .hd .pos{display:block;-webkit-line-clamp:none;overflow:visible;cursor:pointer}
.pane .hd .cgoal b{font-weight:600;color:var(--text);font-family:-apple-system,Segoe UI,sans-serif;font-size:14px}.pane .hd .cgoal .cprev{display:none;font-style:normal;color:var(--faint);margin-left:8px;font-size:11px}
.pane .hd .cstate{color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pane .hd .cstate.waiting{color:var(--red)}.pane .hd .cstate.running{color:var(--accent)}
.pane .hd .cmore{display:none;margin-top:6px;border-top:1px solid var(--border);padding-top:6px}.pane .hd.x .cmore,.pane .hd.x .cgoal .cprev{display:block}.pane .hd.x .cstate{white-space:normal}
.pane .hd .cf{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:3px 0;font-family:-apple-system,Segoe UI,sans-serif;font-size:12.5px;line-height:1.4}.pane .hd .cf i{font-style:normal;color:var(--faint);font-family:var(--mono);font-size:11px;padding-top:2px}
.pane .hd .cf small{color:var(--faint)}.pane .hd .cf ul{margin:4px 0 0;padding-left:16px}.pane .hd .cf li.decision b{color:var(--accent)}.pane .hd .cf li b{font-weight:600;margin-right:4px}.pane .hd .cf em{font-style:normal;color:var(--accent)}.pane .hd .cf a{color:var(--text);text-decoration:underline dotted}
body.split .pane .hd{max-height:none}

.s.backlog{opacity:.6;cursor:pointer}.s.backlog:hover{opacity:1}.s.backlog span{color:var(--muted)}.s.backlog .car{font-style:normal;color:var(--faint);margin-left:4px}.s.backlog.on{opacity:.85}