/* Thread worksheet detail page: shared kit. Tokens come from tokens.css (real). Layout-only changes live in each mNN.html. */
:root{--ease-spring:cubic-bezier(.32,.72,0,1);--ease-out:cubic-bezier(.2,.7,.2,1);--t-fast:150ms;--t-mid:200ms;--t-slow:260ms;--tabbar-h:58px;--content-max:680px;--read:17px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
html{background:var(--bg)}
body{font-family:var(--font);color:var(--txt);background:var(--bg);font-size:var(--body-size);-webkit-font-smoothing:antialiased;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
svg{display:block}
.press{transition:transform var(--t-fast) var(--ease-spring),opacity var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.press:active{transform:scale(.96)}

/* app shell: sidebar on desktop, bottom tab bar below 1100 */
.app{height:100%;display:flex}
.side{display:none;flex:none;width:232px;background:var(--tbg);border-right:1px solid var(--bord);padding:18px 12px;flex-direction:column;gap:2px}
.side .brand{font-weight:700;font-size:17px;letter-spacing:-.3px;padding:2px 10px 16px;display:flex;align-items:center;gap:9px}
.side .brand i{width:22px;height:22px;border-radius:7px;background:var(--acc);display:block}
.side a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;color:var(--dim);font-size:14px;text-decoration:none}
.side a svg{width:20px;height:20px}
.side a.on{background:color-mix(in srgb,var(--acc) 13%,transparent);color:var(--acc);font-weight:600}
.screen{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;position:relative}
@media(min-width:1100px){.side{display:flex}}

/* top bar */
.topbar{flex:none;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;min-height:48px;position:relative;z-index:6;background:var(--bg)}
.topbar .back{display:flex;align-items:center;gap:2px;color:var(--faint);font-size:13px;min-height:44px;margin-left:-4px;padding-right:6px}
.topbar .back span{white-space:nowrap}
.topbar .back svg{width:22px;height:22px}
.topbar .sp{flex:1}
.ibtn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:99px;color:var(--acc);flex:none;position:relative}
.ibtn svg{width:21px;height:21px}
.ibtn.dim{color:var(--dim)}
.topbar .ibtn+.ibtn{margin-left:-6px}

/* scroll + content */
.scroller{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
.page{max-width:var(--content-max);margin:0 auto;padding:0 16px calc(var(--tabbar-h) + 90px)}
.h1{font-size:26px;font-weight:700;letter-spacing:-.6px;line-height:1.16;padding:2px 0 12px}
.lab{font-size:12px;color:var(--faint);font-weight:500;padding:16px 4px 7px}
.card{background:var(--surf);border-radius:var(--rad);box-shadow:var(--sh);overflow:hidden;border:1px solid var(--bord)}
:root[data-theme="light"] .card{border-color:transparent}
.sep{height:1px;background:var(--bord)}
.dot{width:8px;height:8px;border-radius:99px;flex:none}

/* tab bar (Information / Talk / Components) */
.tabbar{flex:none;display:flex;justify-content:space-around;align-items:center;padding:8px 0 10px;background:var(--tbg);border-top:1px solid var(--bord);min-height:var(--tabbar-h);position:relative;z-index:8}
:root[data-theme="light"] .tabbar{backdrop-filter:blur(30px)}
.tabbar-inner{display:flex;flex:1;max-width:var(--content-max);margin:0 auto;position:relative}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;line-height:1;flex:1;color:var(--faint);padding:4px 0}
.tab svg{width:23px;height:23px}
.tab.on{color:var(--acc)}
.tab-ind{position:absolute;top:-8px;left:0;width:33.333%;height:3px;display:flex;justify-content:center;transition:transform var(--t-slow) var(--ease-spring);pointer-events:none}
.tab-ind i{display:block;width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--acc)}
.tab .nb{position:absolute;top:-2px;left:calc(50% + 6px);min-width:15px;height:15px;border-radius:99px;background:var(--acc);color:var(--on-acc);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.panel{display:none}.panel.on{display:block}

/* avatars, project icon/pill, status/priority/date chips */
.avatar{border-radius:99px;background:var(--acc);color:var(--on-acc);display:flex;align-items:center;justify-content:center;font-weight:600;flex:none;line-height:1}
.pic{border-radius:7px;background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:-.3px;flex:none;line-height:1}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:3px 10px 3px 4px;border-radius:9px;background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc);line-height:1.2}
.schip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1;padding:5px 9px 5px 7px;border-radius:99px;white-space:nowrap;color:color-mix(in srgb,var(--sc) 78%,var(--txt));background:color-mix(in srgb,var(--sc) 14%,transparent);letter-spacing:.1px}
:root[data-theme="light"] .schip{color:color-mix(in srgb,var(--sc) 82%,#000);background:color-mix(in srgb,var(--sc) 12%,transparent)}
.schip-dot{width:7px;height:7px;border-radius:99px;background:var(--sc);flex:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--sc) 25%,transparent)}
.schip.md{font-size:13px;padding:6px 11px 6px 9px}
.ic{display:inline-flex;align-items:center;justify-content:center;border-radius:99px;flex:none;color:var(--dim);background:color-mix(in srgb,var(--txt) 7%,transparent)}
.ic svg{width:62%;height:62%}
.ic.sc{color:color-mix(in srgb,var(--sc) 80%,var(--txt));background:color-mix(in srgb,var(--sc) 16%,transparent)}
:root[data-theme="light"] .ic.sc{color:color-mix(in srgb,var(--sc) 85%,#000)}
.ic.pr{color:var(--pc);background:color-mix(in srgb,var(--pc) 15%,transparent)}
.sdot{width:10px;height:10px;border-radius:99px;background:var(--sc);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 25%,transparent);flex:none}
.pt{cursor:pointer;display:inline-flex;align-items:center;gap:7px}

/* details / markdown (class names mirror kit.css .md-*) */
.md{font-size:var(--read);line-height:1.58}
.md h3{font-size:1.06em;font-weight:700;letter-spacing:-.2px;margin:26px 0 8px;line-height:1.3}
.md h3:first-child{margin-top:4px}
.md p{margin:8px 0;overflow-wrap:anywhere}
.md ol{list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:7px;margin:6px 0}
.md ol li{display:flex;gap:10px;counter-increment:n}
.md ol li::before{content:counter(n)".";color:var(--dim);font-variant-numeric:tabular-nums;min-width:20px}
.md ul{list-style:none;margin:6px 0;display:flex;flex-direction:column;gap:5px}
.md ul li{position:relative;padding-left:17px;overflow-wrap:anywhere}
.md ul li::before{content:"";position:absolute;left:5px;top:.72em;width:4px;height:4px;border-radius:9px;background:var(--faint)}
.md b{font-weight:700}
.md .key{font-size:.82em;color:var(--dim);font-variant-numeric:tabular-nums}
.md .wl{padding:1px 7px;margin:0 1px;border-radius:6px;background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc);font-weight:500;font-size:1em}
.md blockquote{border-left:2px solid var(--acc);padding:2px 0 2px 14px;color:var(--dim);margin:10px 0}
.md blockquote p{margin:9px 0}
.md blockquote.draft{color:var(--txt)}
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);vertical-align:2px;margin-left:6px}

/* pinned small items */
.pins{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.pins::-webkit-scrollbar{display:none}
.pin{flex:none;display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;border-radius:99px;background:var(--surf);border:1px solid var(--bord);font-size:13px;color:var(--txt);max-width:220px}
.pin svg{width:14px;height:14px;color:var(--acc);flex:none}
.pin span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* open questions with answer slots */
.qs{display:flex;flex-direction:column;gap:10px}
.q{background:var(--surf);border:1px solid var(--bord);border-radius:var(--rad);box-shadow:var(--sh);overflow:hidden;position:relative;padding:14px 14px 14px 17px}
:root[data-theme="light"] .q{border-color:transparent}
.q::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--acc);transition:background var(--t-mid)}
.q.done::before{background:var(--faint)}
.q-top{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:7px}
.q-n{font-weight:700;color:var(--faint);letter-spacing:.3px}
.q-state{display:inline-flex;align-items:center;gap:4px;font-weight:600;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc)}
.q.done .q-state{background:color-mix(in srgb,var(--txt) 8%,transparent);color:var(--dim)}
.q-t{font-size:var(--read);line-height:1.45;font-weight:600;letter-spacing:-.1px}
.opts{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--bord);background:color-mix(in srgb,var(--txt) 3%,transparent);font-size:15px;line-height:1.35;min-height:44px}
.opt b{width:22px;height:22px;border-radius:99px;border:1.5px solid var(--faint);flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--dim);font-weight:700}
.opt.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 11%,transparent)}
.opt.on b{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.slot{margin-top:9px;display:flex;gap:8px;align-items:flex-end;border-radius:12px;background:var(--field);padding:9px 12px}
.slot b{font-size:12px;color:var(--acc);font-weight:700;padding-top:3px}
.slot textarea{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--txt);font:inherit;font-size:15px;line-height:1.4;resize:none;height:22px;padding:0}
.slot textarea::placeholder{color:var(--faint)}
.slot .send{width:28px;height:28px;border-radius:99px;background:var(--acc);color:var(--on-acc);display:flex;align-items:center;justify-content:center;flex:none;opacity:.35;transition:opacity var(--t-fast)}
.slot .send svg{width:15px;height:15px}
.slot.has .send{opacity:1}
.qhead{display:flex;align-items:center;gap:8px;padding:22px 4px 9px}
.qhead h2{font-size:12px;color:var(--faint);font-weight:500}
.qhead .cnt{font-size:12px;font-weight:600;color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent);padding:2px 8px;border-radius:99px;font-variant-numeric:tabular-nums}

/* edit popover + half-card sheet */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:80;opacity:0;pointer-events:none;transition:opacity var(--t-mid) var(--ease-out)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:81;margin:0 auto;max-width:var(--content-max);background:var(--surf2);border-radius:20px 20px 0 0;box-shadow:0 -8px 40px -12px rgba(0,0,0,.5);padding:6px 0 18px;transform:translateY(104%);transition:transform var(--t-slow) var(--ease-spring);max-height:78%;display:flex;flex-direction:column}
:root[data-theme="light"] .sheet{background:#fff}
.sheet.on{transform:none}
.grab{padding:6px 0 8px;display:flex;justify-content:center}.grab i{width:36px;height:4px;border-radius:9px;background:var(--bord)}
.sheet-h{display:flex;align-items:center;gap:10px;padding:2px 16px 8px;font-size:16px;font-weight:600}
.sheet-b{overflow-y:auto;padding:0 8px}
.orow{display:flex;align-items:center;gap:12px;padding:0 10px;min-height:48px;border-radius:12px;font-size:15px;width:100%}
.orow:active{background:color-mix(in srgb,var(--txt) 6%,transparent)}
.orow .tick{margin-left:auto;color:var(--acc);width:18px;height:18px}
.pop{position:fixed;z-index:81;width:236px;background:var(--surf2);border:1px solid var(--bord);border-radius:14px;box-shadow:0 18px 44px -12px rgba(0,0,0,.6);padding:5px;opacity:0;transform:scale(.97);transform-origin:top left;pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast) var(--ease-spring)}
:root[data-theme="light"] .pop{background:#fff;box-shadow:0 18px 44px -12px rgba(0,0,0,.25)}
.pop.on{opacity:1;transform:none;pointer-events:auto}
.pop .orow{min-height:38px;padding:0 9px;font-size:14px}
.pop .pop-h{font-size:11px;font-weight:600;color:var(--faint);padding:7px 10px 4px;letter-spacing:.3px}

/* talk + components panels (placeholders) */
.msg{display:flex;gap:9px;padding:6px 0}
.msg .avatar{width:26px;height:26px;font-size:12px}
.msg-main{min-width:0;max-width:86%;display:flex;flex-direction:column;gap:4px}
.msg-meta{font-size:12px;color:var(--faint);display:flex;gap:6px;flex-wrap:wrap}
.msg-meta b{color:var(--dim);font-weight:600}
.bubble{background:var(--surf);border:1px solid var(--bord);padding:9px 12px;border-radius:14px;line-height:1.42;font-size:15px}
:root[data-theme="light"] .bubble{border-color:transparent}
.bubble.me{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.msg.me{flex-direction:row-reverse}.msg.me .msg-main{align-items:flex-end}
.crow{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:56px}
.crow .ci{width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);display:flex;align-items:center;justify-content:center;flex:none}
.crow .ci svg{width:18px;height:18px}
.crow small{display:block;color:var(--faint);font-size:12px;margin-top:2px}
.fab{position:absolute;right:16px;bottom:calc(var(--tabbar-h) + 16px);width:54px;height:54px;border-radius:99px;background:var(--acc);color:var(--on-acc);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px -6px color-mix(in srgb,var(--acc) 60%,#000);z-index:7}
.fab svg{width:24px;height:24px}

/* mockup chrome (hidden when ?shot=1) */
.mchrome{position:fixed;left:10px;bottom:calc(var(--tabbar-h) + 8px);z-index:90;display:flex;gap:6px;opacity:.9}
.mchrome button,.mchrome a{height:26px;padding:0 9px;border-radius:99px;background:rgba(20,22,28,.78);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;text-decoration:none;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)}
.shot .mchrome{display:none}
@media(min-width:1100px){.mchrome{bottom:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* top segmented tabs (used by layouts that move Information/Talk/Components up on wide screens) */
.segs-top{display:none}
@media(min-width:900px){
  .segs-top.show,body.tabs-top .segs-top{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--bord);flex:none}
  body.tabs-top .tabbar{display:none}
  .seg-b{display:inline-flex;align-items:center;gap:7px;padding:10px 14px 11px;font-size:13px;color:var(--faint);position:relative}
  .seg-b.on{color:var(--acc);font-weight:600}
  .seg-b.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--acc);border-radius:2px 2px 0 0}
  body.tabs-top .fab{bottom:20px}
}