/* Components. One block per component, named after its JS factory in js/ui/. Views add no CSS. */

/* Layout responds to the width it is given (container queries), so a view laid out in the side panel or a narrow frame
   behaves as on a phone. #top and #main are the containers. */
#top,#main{container-type:inline-size}
:root{--bar-h:55px} /* the top bar with its border, until app.js measures it: phones wrap it and a tab's row adds to it */
@media (max-width:640px){:root{--bar-h:47px}}
#main{min-height:calc(100vh - var(--bar-h))}

/* redesign 2026-11-04 (Claude Design handoff, thread ui-redesign) */
/* ===== 1. shell: top bar — replaces lines "---- shell: top bar ----" to the end of the 640px container query ===== */
:root{--bar-h:53px}
@media (max-width:640px){:root{--bar-h:49px}}
.top{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:var(--s4);height:52px;padding:0 var(--s3) 0 var(--s4)}
.brand{display:flex;align-items:center;gap:8px;font-weight:var(--w-bold);font-size:15px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
/* consumer: tabs are a segmented control */
.tabs{display:flex;gap:2px;padding:3px;border-radius:var(--r-m);background:var(--sunken);overflow-x:auto;scrollbar-width:none;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:0;border-radius:var(--r-s);background:none;color:var(--ink-2);font-size:var(--fs-small);font-weight:var(--w-med);text-decoration:none;white-space:nowrap;cursor:pointer}
.tab:hover{color:var(--ink)}
.tab[aria-current=page]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 2px oklch(0% 0 0 / .05)}
.tab:focus-visible{outline-offset:-2px}
.tab-badge{min-width:16px;padding:0 5px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-ink);font-size:10.5px;font-weight:var(--w-bold);line-height:16px;text-align:center}
/* developer: plain tabs with an underline, many of them */
:root[data-dev] .tabs{background:none;padding:0;gap:0;align-self:stretch}
:root[data-dev] .tab{height:auto;border-radius:0;padding:0 10px}
:root[data-dev] .tab[aria-current=page]{background:none;box-shadow:none}
:root[data-dev] .tab[aria-current=page]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--ink)}
/* the right end: two pills and icon buttons */
.top-status{margin-left:auto;display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
.top-status>span{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-size:var(--fs-meta);font-weight:var(--w-med)}
.top-status>span b{color:var(--ink);font-weight:var(--w-bold)}
.top-status>span[data-tone=bad]{color:var(--bad-ink);border-color:color-mix(in oklch,var(--bad) 35%,var(--line))}
.top-ring{width:16px;height:16px;flex:none}                                  /* NEW: week used, as a ring */
.top-logins{display:inline-flex;align-items:flex-end;gap:2px;height:14px}    /* NEW: dev, one mark per login */
.top-logins>i{width:4px;border-radius:1px;background:var(--ink-2)}
.top-logins>i[data-tone]{background:var(--c)}
.top-route{font-size:var(--fs-meta);color:var(--ink-3)}
.top-sub{display:none}
.top-icons{display:flex;align-items:center;gap:2px;margin-left:4px}        /* NEW: settings, more, theme, full screen */
.top-in .fs,.theme{align-self:center}
@container (max-width:1040px){.top-status>span:not(:first-child){display:none}}
@container (max-width:780px){.top-in{gap:var(--s3);padding:0 var(--s2) 0 var(--s3)}.tab{padding:0 10px}}
@container (max-width:640px){
  .top-in{height:48px;gap:var(--s2);padding:0 6px}
  .brand>:not(svg){display:none}
  .top-status{display:none}
  .top-icons .theme,.top-icons .fs{display:none}
  .tabs{flex:1 1 auto}
  .tab{flex:1;justify-content:center;padding:0 8px}
}
/* inside a conversation on a phone the app bar folds away; the thread head carries back + title */
@container (max-width:640px){body:has(.cm[data-in]) .top{display:none}}

/* ===== More: an icon button with a menu — replaces the "---- More ----" block ===== */
.more{position:relative;display:flex}
.more>.btn[aria-expanded=true]{background:var(--hover);color:var(--ink)}
.more-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)} /* NEW: a view from More is open */
.more-c{display:none}
.more-m{position:absolute;top:calc(100% + 6px);right:0;left:auto;z-index:40;display:grid;min-width:240px;padding:6px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--e2)}
.more-i{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-s);color:var(--ink);font-size:var(--fs-small);text-decoration:none}
.more-i:hover,.more-i[aria-current]{background:var(--hover);color:var(--ink)}
.more-i b{font-weight:var(--w-med)}
.more-i span{display:none}             /* the one-line descriptions go: the names say it */
.more-h{padding:8px 10px 4px;font-size:var(--fs-meta);font-weight:var(--w-med);color:var(--ink-3)}
.more-m>.more-h:not(:first-child){margin-top:6px;border-top:1px solid var(--line);padding-top:10px}
/* ---- a tab's own pages, a row under the bar (core/nav.js) ---- */
.subtabs{display:flex;align-items:center;gap:2px;height:38px;padding:0 var(--s4);border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none;font-size:var(--fs-small)}
.subtabs::-webkit-scrollbar{display:none}
.subtab{flex:none;padding:4px 10px;border-radius:var(--r-m);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.subtab:hover{background:var(--hover);color:var(--ink)}
.subtab[aria-current=page]{background:var(--hover);color:var(--ink);font-weight:600}
@container (max-width:640px){.subtabs{padding:0 4px}}
/* ---- band: the hive has stopped, in words, under the bar ---- */
.band{display:flex;align-items:center;gap:8px;padding:6px var(--s4);border-top:1px solid var(--line);background:color-mix(in oklch,var(--bad) 9%,var(--surface));font-size:var(--fs-small);color:var(--ink)}
.band>span:not(.sd){flex:1;min-width:0;text-wrap:pretty}
.band>.sd{flex:none}
@container (max-width:640px){.band{padding:6px 12px;align-items:flex-start;font-size:var(--fs-meta)}.band>.sd{margin-top:4px}.more-m{position:fixed;left:8px;right:8px;top:46px;min-width:0}}
.subtabs{display:flex;align-items:center;gap:2px;height:44px;padding:0 var(--gutter);border-top:0;overflow-x:auto;scrollbar-width:none;font-size:var(--fs-small)}
.subtab{flex:none;height:28px;display:inline-flex;align-items:center;padding:0 10px;border-radius:var(--r-s);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.subtab:hover{background:var(--hover);color:var(--ink)}
.subtab[aria-current=page]{background:var(--hover);color:var(--ink);font-weight:var(--w-med)}
.band{display:flex;align-items:center;gap:10px;padding:10px var(--s4);border-top:1px solid var(--line);background:color-mix(in oklch,var(--bad) 7%,var(--surface));font-size:var(--fs-small);color:var(--ink)}
.page[data-width=narrow]{max-width:var(--page-narrow,1040px)}


/* ---- page + templates ---- */
.page{max-width:var(--page-max);margin:0 auto;padding:var(--s5) var(--gutter) var(--s7)}
@container (max-width:640px){.page{--gutter:14px;--fs-head:19px;--fs-lead:15.5px;--fs-figure:21px}}
.page[data-width=narrow]{max-width:820px}
.ov{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);margin-top:var(--s5)}
.after{margin-top:var(--s7);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:var(--s5) var(--s6);align-items:start}
@container (max-width:640px){.page{padding-top:var(--s4)}.ov{margin-top:var(--s4)}}

/* ---- pageHeader ---- */
.ph{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.ph-row{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.ph-title{font-size:var(--fs-head);font-weight:var(--w-bold);letter-spacing:-.012em;line-height:1.25;text-wrap:balance}
.ph-lead{font-size:var(--fs-lead);line-height:1.4;max-width:62ch;text-wrap:pretty}
.ph-lead[data-tone]{color:var(--ink)}
.ph-lead[data-tone]::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;vertical-align:.12em;border-radius:50%;background:var(--c)}
.ph-lead[data-tone=bad]::before{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);width:10px;height:9px}
.ph-lead[data-tone=warn]::before{border-radius:1.5px}
.ph-meta{font-size:var(--fs-small);color:var(--ink-2);text-wrap:pretty}
.ph-meta>span+span::before{content:"·";margin:0 8px;color:var(--ink-3)}
.ph-actions{margin-left:auto;display:flex;gap:var(--s2)}
.ph[data-size=display] .ph-title{font-size:var(--fs-display);letter-spacing:-.02em;line-height:1.15}
@container (max-width:640px){.ph[data-size=display] .ph-title{font-size:26px}}

/* ---- tally: counts by status ---- */
.tally{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);list-style:none;margin-top:var(--s2)}
.tally li{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.tally .sd{align-self:center}
.tally b{font-size:var(--fs-figure);font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.tally span{font-size:var(--fs-small);color:var(--ink-2)}
.tally li[data-zero] b{color:var(--ink-3);font-weight:500}
@container (max-width:640px){.tally{gap:var(--s1) var(--s4)}}

/* ---- section ---- */
.sec{min-width:0}
.sec-h{display:flex;align-items:baseline;gap:var(--s2) var(--s3);flex-wrap:wrap;margin-bottom:var(--s2)}
.sec-t{font-size:var(--fs-small);font-weight:var(--w-bold);letter-spacing:.005em}
.sec-n{font-size:var(--fs-meta);color:var(--ink-3)}
.sec-a{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.sec-more{margin-top:var(--s2)}
/* level 1: a part of a long page (Settings groups, the website, the guide). Level 2, the default, is a group inside a part. */
.sec[data-level="1"]>.sec-h{margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.sec[data-level="1"]>.sec-h .sec-t{font-size:var(--fs-title)}

/* ---- statusDot + statusLabel ---- */
.sd{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,var(--quiet))}
.wm{position:relative;display:inline-block;flex:none;width:10px;height:11px;background:var(--warden);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.wm::after{content:"";position:absolute;inset:1.6px;background:color-mix(in oklch,var(--warden) 16%,var(--surface));clip-path:inherit}
.wb{display:inline-flex;align-items:center;gap:5px;margin-left:var(--s2);padding:1px 8px;border-radius:999px;font-size:var(--fs-meta);font-weight:var(--w-med);letter-spacing:0;color:var(--warden);background:color-mix(in oklch,var(--warden) 12%,transparent);vertical-align:middle}
.sd[data-shape=square]{border-radius:1.5px}
.sd[data-shape=ring]{background:transparent;box-shadow:inset 0 0 0 1.6px var(--c)}
.sd[data-shape=half]{background:linear-gradient(90deg,var(--c) 50%,transparent 50%);box-shadow:inset 0 0 0 1.6px var(--c)}
.sd[data-shape=tri]{width:10px;height:9px;border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.sd[data-shape=diamond]{width:7px;height:7px;border-radius:1px;transform:rotate(45deg)}
.sd[data-live]{box-shadow:0 0 0 2.5px color-mix(in oklch,var(--c) 30%,transparent)}
.sd[data-live][data-shape=ring]{box-shadow:inset 0 0 0 1.6px var(--c),0 0 0 2.5px color-mix(in oklch,var(--c) 30%,transparent)}
.sl{display:inline-flex;align-items:center;gap:6px;color:var(--ci,var(--ink-2));font-size:var(--fs-small);font-weight:var(--w-med);white-space:nowrap;min-width:0}
.sl>span{overflow:hidden;text-overflow:ellipsis}

/* ---- refs: agent and thread ---- */
.ref{display:inline-flex;align-items:baseline;gap:6px;min-width:0;color:var(--ink);text-decoration:none;font-weight:600}
.ref:hover{color:var(--ink)}
.ref:hover .ref-n{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--ink-3)}
.ref-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref[data-kind=agent] .ref-n{overflow:visible}
.ref[data-kind=thread]{font-weight:400;color:var(--ink-2)}
.ref>.sd,.ref-sw{align-self:center}
.ref-sw{flex:none;width:6px;height:6px;border-radius:1px;background:var(--c)}
.ref-wrap{display:inline-flex;align-items:center;gap:2px;min-width:0}
.copy{flex:none;border:0;background:none;padding:0 3px;border-radius:var(--r-s);color:var(--ink-3);font-size:11px;line-height:18px;cursor:pointer;opacity:0}
.ref-wrap:hover .copy,.copy:focus-visible{opacity:1}
.copy:hover{color:var(--ink);background:var(--hover)}
@media (hover:none){.copy{opacity:1}}

/* ---- button, seg, field (redesign 2026-11-04) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--ctl);padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);color:var(--ink);font-size:var(--fs-small);font-weight:var(--w-med);line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color .12s,border-color .12s,color .12s}
.btn:hover{background:var(--hover);color:var(--ink)}
.btn svg{width:16px;height:16px;flex:none}
.btn[data-size=s]{height:var(--ctl-s);padding:0 10px;font-size:var(--fs-meta);border-radius:var(--r-s)}
.btn[data-size=l]{height:var(--ctl-l);padding:0 16px;font-size:var(--fs-body)}
.btn[data-kind=primary]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn[data-kind=primary]:hover{background:color-mix(in oklch,var(--ink) 86%,var(--surface))}
.btn[data-kind=quiet]{border-color:transparent;background:none;color:var(--ink-2)}
.btn[data-kind=quiet]:hover{background:var(--hover);color:var(--ink)}
.btn[data-kind=icon]{width:var(--ctl);padding:0;border-color:transparent;background:none;color:var(--ink-2)}       /* NEW */
.btn[data-kind=icon][data-size=s]{width:var(--ctl-s)}
.btn[data-kind=icon]:hover{background:var(--hover);color:var(--ink)}
.btn[data-kind=icon] svg{width:18px;height:18px}
.btn[data-kind=icon][data-size=s] svg{width:16px;height:16px}
.btn[data-kind=danger]{background:var(--surface);border-color:color-mix(in oklch,var(--bad) 40%,var(--line-2));color:var(--bad-ink)}  /* was filled red */
.btn[data-kind=danger]:hover{background:color-mix(in oklch,var(--bad) 8%,var(--surface))}
.btn[data-tone]{color:var(--ci)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-m);background:var(--sunken)}
.seg button{height:26px;padding:0 12px;border:0;border-radius:var(--r-s);background:none;color:var(--ink-2);font-size:var(--fs-small);font-weight:var(--w-med);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 2px oklch(0% 0 0 / .05)}
.field{display:grid;gap:6px;min-width:0}
.field-l{font-size:var(--fs-small);font-weight:var(--w-med)}
.field-h{font-size:var(--fs-meta);color:var(--ink-3);line-height:1.45}
.input{height:var(--ctl);width:100%;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);color:var(--ink);font-size:var(--fs-small)}
.input::placeholder{color:var(--ink-3)}
.input:hover{border-color:color-mix(in oklch,var(--ink-3) 60%,var(--line-2))}
.input:focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--accent-bg)}
textarea.input{height:auto;min-height:72px;padding:8px 10px;resize:vertical;line-height:var(--lh)}
select.input{padding-right:28px}

/* ---- stats: a strip of figures with hairlines between (no boxes) ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));overflow:hidden;margin:0 0 0 calc(-1 * var(--s4))}
.stat{padding:var(--s2) var(--s4) var(--s3);box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line);min-width:0}
.stat dt{font-size:var(--fs-small);color:var(--ink-2)}
.stat .stat-v{font-size:var(--fs-figure);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--ci,var(--ink));overflow-wrap:anywhere}
.stat .stat-n{font-size:var(--fs-meta);color:var(--ink-3);line-height:1.35;margin-top:2px}
.stat .meter{margin:6px 0 4px}
@container (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- meter ---- */
.meter{position:relative;height:6px;border-radius:3px;background:var(--line)}
.meter>i{position:absolute;left:0;top:0;bottom:0;width:var(--v);min-width:2px;border-radius:3px;background:var(--c,var(--info))}
.meter>u{position:absolute;top:-3px;bottom:-3px;left:var(--s);width:2px;margin-left:-1px;border-radius:1px;background:var(--ink)}

/* ---- gauge + gaugeRow: one limit, and one account's limits ---- */
.gauge{min-width:0}
.gauge-l{font-size:var(--fs-meta);color:var(--ink-2);font-weight:var(--w-med)}
.gauge-v{font-size:var(--fs-figure);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.gauge-v small{font-size:var(--fs-small);font-weight:400;color:var(--ink-3);margin-left:4px}
.gauge .meter{margin:6px 0 6px}
.gauge-n{font-size:var(--fs-meta);color:var(--ink-3);line-height:1.4}
.gauge-n b{font-weight:var(--w-med);color:var(--ink-2)}
.grs{border-bottom:1px solid var(--line)}
.grs-h{display:grid;grid-template-columns:var(--gr-cols);gap:var(--s5);padding:0 0 6px;font-size:var(--fs-meta);color:var(--ink-3)}
.grs{--gr-cols:minmax(130px,170px) minmax(0,1fr) minmax(170px,250px) minmax(110px,auto)}
.gr{display:grid;grid-template-columns:var(--gr-cols);gap:var(--s5);padding:var(--s4) 0;border-top:1px solid var(--line);align-items:start}
.gr-id{display:grid;gap:3px;min-width:0}
.gr-name{font-size:var(--fs-title);font-weight:var(--w-bold)}
.gr-tag{font-size:var(--fs-meta);color:var(--ink-3)}
.gr-note{font-size:var(--fs-meta);color:var(--ink-3);line-height:1.35}
.gr-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s5)}
.gr-g .gauge-n:empty{display:none}
.gr-hist{min-width:0;padding-top:2px}
.gr-hist-key{display:none;margin-bottom:4px}
.gr-a{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.gr[data-dim] .gr-g,.gr[data-dim] .gr-hist{opacity:.62}
.gr-msg{font-size:var(--fs-small);color:var(--ink-2);grid-column:2/-2}
@container (max-width:980px){
  .grs-h{display:none}
  .gr{grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s4)}
  .gr-id{grid-column:1}.gr-a{grid-column:2;grid-row:1;flex-direction:row;flex-wrap:wrap;justify-content:flex-end}
  .gr-g,.gr-hist,.gr-msg{grid-column:1/-1}
  .gr-hist-key{display:block}
}

/* ---- list: rows with hairlines, the default for anything listed ---- */
.list{list-style:none;border-bottom:1px solid var(--line)}
.lr{border-top:1px solid var(--line);min-width:0}
.lr-in{display:block;padding:9px 8px;margin:0 -8px;border-radius:var(--r-s);color:inherit;text-decoration:none;min-width:0}
a.lr-in:hover{background:var(--hover);color:inherit}
.lr-t{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);min-width:0}
.lr-t b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-t .meta{margin-left:auto;white-space:nowrap;flex:none}
.lr-x{font-size:var(--fs-small);color:var(--ink-2);margin-top:2px}
.lr-more{display:flex;padding:8px 0 0}
/* Extras: the names, the words and the buttons each keep their own column */
.mod-row{display:grid;grid-template-columns:9rem minmax(0,1fr) auto;column-gap:var(--s3);align-items:center}
.mod-name{overflow-wrap:anywhere}
.mod-where{display:block;font-size:var(--fs-small);margin-top:2px}
.mod-group+.mod-group{margin-top:var(--s4)}
.mod-gt{font-size:var(--fs-small);font-weight:600;margin:0 0 var(--s2);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:baseline}
.mod-gn{font-weight:400;color:var(--ink-2)}
.mod-none{font-size:var(--fs-small);margin:var(--s1) 0}
.mod-browse{margin-top:var(--s2)}
@container (max-width:640px){.mod-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}.mod-about{grid-column:1/-1;grid-row:2}}
.list[data-dense] .lr-in{padding:6px 8px}

/* ---- rank: ranked bars (costliest threads, models) ---- */
.rank{list-style:none}
.rank li{border-top:1px solid var(--line)}
.rank li:last-child{border-bottom:1px solid var(--line)}
.rank-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px var(--s3);padding:7px 8px;margin:0 -8px;border-radius:var(--r-s);color:inherit;text-decoration:none;font-size:var(--fs-small)}
a.rank-in:hover{background:var(--hover);color:inherit}
.rank-in>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-in>span:nth-child(2){color:var(--ink-2);font-variant-numeric:tabular-nums}
.rank-tr{grid-column:1/-1;height:3px;border-radius:2px;background:var(--line)}
.rank-tr>i{display:block;height:100%;width:var(--v);border-radius:2px;background:var(--c,var(--info))}

/* ---- share: one stacked bar and its legend ---- */
.share-bar{display:flex;gap:2px;height:8px;margin:2px 0 0}
.share-bar>i{display:block;min-width:2px;border-radius:2px;background:var(--c)}
.share-bar[data-of]{background:none}
.legend{display:flex;flex-wrap:wrap;gap:4px var(--s4);margin-top:var(--s2);font-size:var(--fs-meta);color:var(--ink-2)}
.legend>span{display:inline-flex;align-items:center;gap:6px}
.legend .sw{width:8px;height:8px;border-radius:2px;background:var(--c)}
.share-rows{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px var(--s3);align-items:center;font-size:var(--fs-meta)}
.share-rows .share-bar{margin:0}
.share-rows>.meta{text-align:right}

/* ---- table ---- */
.tbl-w{overflow-x:auto;margin:0 -8px}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.tbl th{padding:0 8px 6px;text-align:left;font-size:var(--fs-meta);font-weight:500;color:var(--ink-3);white-space:nowrap}
.tbl td{padding:6px 8px;border-top:1px solid var(--line);vertical-align:baseline;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:1px solid var(--line)}
.tbl .num{text-align:right}
.tbl .wrap{white-space:normal;overflow-wrap:anywhere;width:100%;min-width:14rem}
.tbl td.mono{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.tbl .clip{width:100%;max-width:0;overflow:hidden;text-overflow:ellipsis}
@container (max-width:640px){.tbl .clip{max-width:none;width:auto;overflow:visible}}
.tbl tbody tr:hover td{background:var(--hover)}

/* ---- chart (frame + plot) ---- */
.chart{min-width:0}
.chart-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:var(--s2);font-size:var(--fs-small)}
.chart-h b{font-weight:600}
.chart-h span{font-size:var(--fs-meta);color:var(--ink-3)}
.plot{position:relative;height:var(--h,96px);margin-right:38px;border-bottom:1px solid var(--line-2);cursor:crosshair}
.plot>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plot .p-area{fill:var(--c,var(--info));opacity:.14}
.plot .p-line{fill:none;stroke:var(--c,var(--info));stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.plot .p-line[data-k="1"]{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:3 2}
.plot .p-bar{fill:var(--c,var(--info))}
.plot .p-mark{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.plot .p-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.plot-y{position:absolute;left:100%;margin-left:6px;font-size:var(--fs-micro);color:var(--ink-3);transform:translateY(-50%);white-space:nowrap;font-variant-numeric:tabular-nums}
.plot-x{position:relative;height:16px;margin-right:38px;font-size:var(--fs-micro);color:var(--ink-3)}
.plot-x>span{position:absolute;top:3px;transform:translateX(-50%);white-space:nowrap}
.plot-x>span:first-child{transform:none}
.plot-cross{position:absolute;top:0;bottom:0;width:1px;background:var(--ink-3);pointer-events:none;display:none}
.chart[data-compact] .plot{margin-right:0;border-bottom-color:var(--line)}
.chart-key{display:flex;flex-wrap:wrap;gap:0 var(--s3);font-size:var(--fs-micro);color:var(--ink-3)}
.chart-key>span{white-space:nowrap}
.chart-key i{display:inline-block;width:14px;height:0;border-top:1.6px solid var(--info);vertical-align:middle;margin-right:4px}
.chart-key i[data-k="1"]{border-top:1.2px dashed var(--ink-3)}
.chart-key i[data-k=mark]{border-top:1px dashed var(--ink-2)}

/* ---- tooltip ---- */
.tip{position:fixed;z-index:60;pointer-events:none;max-width:360px;padding:6px 9px;border-radius:var(--r-m);background:var(--ink);color:var(--on-ink);font-size:var(--fs-meta);line-height:1.4;box-shadow:var(--e1);overflow-wrap:anywhere}

/* ---- empty / loading / error ---- */
.empty{padding:var(--s3) 0;font-size:var(--fs-small);color:var(--ink-3)}
.empty-t{color:var(--ink-2);font-weight:var(--w-med)}
.empty[data-kind=error]{color:var(--bad-ink)}
.empty[data-kind=loading]::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--ink-3);animation:pulse 1.2s ease-in-out infinite;vertical-align:.05em}
.empty[data-kind=page]{padding:var(--s7) 0;text-align:center}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.empty[data-kind=loading]::before{animation:none}}

/* ---- agentCard ---- */
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));column-gap:var(--s6)}
.ac{position:relative;min-width:0;padding:var(--s3) 0 14px;border-top:1px solid var(--line)}
.ac[data-attn]{border-top:2px solid var(--bad);padding-top:11px}
.ac-h{display:flex;align-items:center;gap:8px;min-width:0}
.ac-h .ref[data-kind=agent]{font-size:var(--fs-title)}
.ac-h>.ref-wrap,.ac-h>.ref[data-kind=agent]{flex:none}
.ac-h .ref[data-kind=thread]{min-width:3em}
.ac-h .ref[data-kind=thread]{font-size:var(--fs-small)}
.ac-st{margin-left:auto;padding-left:var(--s2);font-size:var(--fs-small);font-weight:var(--w-med);color:var(--ci);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ac-now{margin-top:6px;font-size:var(--fs-body);line-height:1.42;color:var(--ink)}
.ac-dl{display:grid;grid-template-columns:44px minmax(0,1fr);gap:3px 8px;margin-top:8px;font-size:var(--fs-small);line-height:1.4}
.ac-dl dt{font-size:var(--fs-meta);color:var(--ink-3);line-height:1.55}
.ac-dl dd{color:var(--ink-2)}
.ac-f{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;margin-top:8px;font-size:var(--fs-meta);color:var(--ink-3)}
.ac-f>span{white-space:nowrap}
.ac-f>span+span::before{content:"·";margin:0 6px}
.ac-f>span[data-tone]{color:var(--ci)}
.ac-kill{margin-left:auto;opacity:0}
.ac:hover .ac-kill,.ac:focus-within .ac-kill{opacity:1}
.ac-tap{display:none}
.ph-actions .ac-kill{opacity:1}
@media (hover:none){.ac-kill{opacity:1}}
@container (max-width:640px){
  .ac{padding:10px 0 11px}
  .ac-tap{display:block;position:absolute;inset:0;z-index:0;border:0;background:none;padding:0;cursor:pointer}
  .ac-h .ref,.ac-h .ref-wrap,.ac-f button{position:relative;z-index:1}
  .ac:not([data-open]) .ac-dl,.ac:not([data-open]) .ac-f{display:none}
  .ac:not([data-open]) .ac-now{-webkit-line-clamp:1;margin-top:3px;font-size:var(--fs-small);color:var(--ink-2)}
}

/* ---- dialog ---- */
.dlg{width:min(30rem,calc(100vw - 24px));padding:20px 22px 18px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--surface);color:var(--ink);box-shadow:var(--e2)}
.dlg::backdrop{background:oklch(0% 0 0 / .42)}
.dlg h2{font-size:var(--fs-title);font-weight:var(--w-bold);margin-bottom:var(--s2)}
.dlg p{margin:var(--s2) 0;color:var(--ink-2);text-wrap:pretty}
.dlg .field{margin-top:var(--s3)}
.dlg-err{min-height:1.2em;margin-top:var(--s2);font-size:var(--fs-small);color:var(--bad-ink)}
.dlg-err[data-ok]{color:var(--ink)}
.dlg-a{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s3)}
.dlg label.opt{display:flex;gap:8px;align-items:baseline;padding:4px 0;cursor:pointer}

/* ---- system page (the style guide) ---- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.swatch{display:grid;gap:4px;font-size:var(--fs-meta);color:var(--ink-2)}
.swatch i{display:block;height:36px;border-radius:var(--r-m);background:var(--c);box-shadow:inset 0 0 0 1px var(--line)}
.specimen{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s2) var(--s4);align-items:baseline}
.specimen>span{font-size:var(--fs-meta);color:var(--ink-3);font-family:var(--mono)}
.demo{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.rules{display:grid;gap:6px;font-size:var(--fs-small);color:var(--ink-2);max-width:72ch;list-style:disc;padding-left:1.2em}

/* ---- toolbar: filters and controls above a list or canvas ---- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s2)}
.toolbar .input{width:260px;max-width:100%}
.toolbar .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.toolbar .seg button{flex:none}
@container (max-width:640px){.toolbar .input{width:100%}}

/* ---- jobs-split: one usage bar with its label ---- */
.jobs-split{margin-bottom:var(--s3)}
.jobs-split-h{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;margin-bottom:4px;font-size:var(--fs-small)}
.jobs-split-h b{font-weight:var(--w-med)}

/* ---- lg: the ledger, one line per event ---- */
.lg{list-style:none;font-size:var(--fs-small)}
.lg-day{padding:var(--s3) 0 var(--s1);font-size:var(--fs-meta);font-weight:var(--w-med);color:var(--ink-2)}
.lg-r{display:flex;gap:var(--s3);align-items:baseline;padding:3px 0;border-top:1px solid var(--line)}
.lg-t{flex:none;width:4.6rem;white-space:nowrap;color:var(--ink-3);font-size:var(--fs-meta);font-variant-numeric:tabular-nums}
.lg-b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lg-b .ref{margin-inline:2px}
.lg-b .ref:first-child{margin-left:0}
.lg-q{color:var(--ink-2)}
.lg-r[data-kind=trouble] .lg-b{color:var(--bad-ink)}
.lg-r[data-fresh]{animation:lg-fresh 2.5s ease-out}
@keyframes lg-fresh{from{background:color-mix(in oklch,var(--good) 22%,transparent)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.lg-r[data-fresh]{animation:none}}
@container (max-width:640px){.lg-r{flex-wrap:wrap;gap:0 var(--s2);padding:6px 0}.lg-b{white-space:normal;width:100%}}


/* ---- forms: rows, grids, checks, sign-in (Settings, Start) ---- */
.frow{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:end;margin-top:var(--s3)}
.frow.fsplit{align-items:center;margin-top:0}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--s4);align-items:start}
.fgrid>.check{grid-column:1/-1}
.sec>.field{margin-top:var(--s3)}
.fmsg{font-size:var(--fs-small);color:var(--ink-2);margin:var(--s2) 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.fmsg[data-tone=good]{color:var(--good-ink)}
.fmsg[data-tone=bad]{color:var(--bad-ink)}
.fmsg[data-tone=warn]{color:var(--warn-ink)}
.signin{margin-top:var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--sunken)}
.steps{margin:0 0 var(--s2);padding-left:1.2em;display:grid;gap:var(--s1)}
ul.plain{margin:0;padding-left:1.2em;display:grid;gap:var(--s2)}

/* ---- defs: short label/value pairs ---- */
.defs{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0}
.defs dt{font-size:var(--fs-meta);color:var(--ink-3)}
.defs dd{margin:0;font-size:var(--fs-small);font-weight:var(--w-med);color:var(--ink);overflow-wrap:anywhere}

/* ---- refs in a wrapping row ---- */
.ref-row{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:var(--fs-small)}

/* ---- msg-col: posts in a section, left-aligned with its title ---- */
.msg-col>.msg{margin-left:-10px}

/* ---- stack: sections in a column ---- */
.stack{display:grid;gap:var(--s5);min-width:0}

/* ---- feed: tool calls and what an agent said ---- */
.feed{list-style:none;margin:0;padding:0;max-height:560px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.feed-r{display:flex;gap:var(--s2);align-items:baseline;padding:5px 0;border-top:1px solid var(--line);font-size:var(--fs-meta);line-height:1.4;overflow-wrap:anywhere}
.feed-r:first-child{border-top:0}
.feed-r>time{flex:none;color:var(--ink-3);font-variant-numeric:tabular-nums}
.feed-k{flex:none;padding:0 6px;border-radius:var(--r-s);font-size:var(--fs-micro);font-weight:var(--w-bold);line-height:1.5;color:var(--ci);background:color-mix(in oklch,var(--c) 14%,transparent);white-space:nowrap}
.feed-x{min-width:0;font-family:var(--mono);color:var(--ink-2)}
.feed-r[data-said] .feed-x{font-family:var(--font);font-size:var(--fs-small);color:var(--ink);white-space:pre-wrap;border-left:2px solid var(--info);padding-left:var(--s2)}

/* ---- ego: its corner of the hive, on the graph engine, in a page that scrolls ---- */
.ego-stage{position:relative;min-width:0}
.graph[data-inpage]{touch-action:pan-y}
.ego-bar{position:absolute;top:var(--s1);right:0;display:flex;gap:var(--s1)}
@media (hover:none){.ego-bar .btn{min-width:36px;height:36px}}

/* ---- panel: an agent's page beside any view. Its width keeps it under the phone breakpoint on purpose. ---- */
.panel{position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(var(--panel-w,640px),100%);overflow:auto;overscroll-behavior:contain;container-type:inline-size;background:var(--bg);border-left:1px solid var(--line-2);box-shadow:var(--e2);outline:none}
.panel-b{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;padding:var(--s1) var(--s2);background:var(--bg);border-bottom:1px solid var(--line)}
.panel-a{display:flex;gap:var(--s1)}

/* ---- canvas template: toolbar, full-bleed stage, side pane (Mesh, Timeline) ---- */
.cvp{display:flex;flex-direction:column;height:calc(100dvh - var(--bar-h));background:var(--surface)}
.cvp-bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line)}
#main:has(.cvp){min-height:0}
.cvp-ctl{display:contents}
.cvp-count{font-size:var(--fs-small);color:var(--ink-2);font-variant-numeric:tabular-nums}
.cvp-note{flex:none;display:grid;gap:2px;padding:6px var(--s4);border-bottom:1px solid var(--line);font-size:var(--fs-meta);color:var(--ink-3)}
.cvp-note .legend{margin-top:0}
.cvp-body{flex:1;min-height:0;display:flex}
.cvp-stage{position:relative;flex:1;min-width:0;min-height:0}
.cvp-grip{flex:none;width:7px;margin:0 -3px;z-index:2;cursor:col-resize;touch-action:none;background:linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat}
.cvp-grip:hover,.cvp-grip:focus-visible{background-size:3px 100%}
.cvp-side{flex:none;width:var(--side,340px);max-width:60%;overflow:auto;scrollbar-width:thin;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);background:var(--bg)}
.cvp-side>*{flex:none;min-width:0}
.cvp-side .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.cvp-side .stat{padding:6px var(--s2) var(--s2) var(--s4)}
.cvp-side .stat-v{font-size:var(--fs-title)}
.cvp-side-t{font-size:var(--fs-title);font-weight:var(--w-bold);overflow-wrap:anywhere}
.cvp-side-x{font-size:var(--fs-small);color:var(--ink-2)}
.cvp-chips{display:flex;flex-wrap:wrap;gap:4px var(--s3);font-size:var(--fs-small)}
.cvp-acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
button.lr-in{width:calc(100% + 16px);border:0;background:none;text-align:left;font:inherit;cursor:pointer}
@container (max-width:640px){
  .cvp[data-key=mesh]{height:auto}
  .cvp-bar{padding:var(--s2) 0 6px;gap:4px var(--s3)}
  .cvp-ctl{display:flex;flex:none;width:100%;align-items:center;gap:var(--s2);padding:0 var(--s3);overflow-x:auto;scrollbar-width:none}
  .cvp-ctl::-webkit-scrollbar{display:none}
  .cvp-ctl>*{flex:none}
  .cvp-count{padding:0 var(--s3);font-size:var(--fs-meta)}
  .cvp-count+.cvp-count{padding-left:0}
  .cvp-bar .seg button{height:40px;min-width:40px}
  .cvp-bar .btn{height:44px;min-width:44px}
  .cvp-note{display:none}
  .cvp-body:has(.cvp-side){flex-direction:column}
  .cvp-body:has(.cvp-side) .cvp-stage{flex:none;height:62dvh;border-bottom:1px solid var(--line)}
  .cvp-grip{display:none}
  .cvp-side{width:auto;max-width:none;overflow:visible}
}

/* ---- graph: canvas stage, with its legend and replay bar on top ---- */
.graph{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.graph:focus-visible{outline-offset:-2px}
.graph-legend{position:absolute;left:var(--s3);bottom:44px;display:grid;gap:1px;padding:4px 8px;border-radius:var(--r-m);background:color-mix(in oklch,var(--surface) 88%,transparent);pointer-events:none}
.graph-legend .legend{margin:0}
.graph-legend .legend>span{display:inline-flex;align-items:center;gap:5px}
.graph-replay{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s2);display:flex;align-items:center;gap:var(--s3);padding:2px 6px;border-radius:var(--r-m);background:color-mix(in oklch,var(--surface) 88%,transparent)}
.graph-replay input{flex:1;min-width:0;accent-color:var(--info)}
.graph-replay span{min-width:8.5em;text-align:right;font-size:var(--fs-meta);color:var(--ink-2);font-variant-numeric:tabular-nums}
.side-only{display:none}
@container (max-width:640px){
  .graph-legend{display:none}
  .side-only{display:block}
  .graph-replay .btn{height:36px}
  .graph-replay span{min-width:0}
}

/* ---- timeline: a row per thread, a bar per session ---- */
.tl-box{position:absolute;inset:0;overflow:auto;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.tl-box[data-drag]{cursor:grabbing}
.tl-axis{position:sticky;top:0;z-index:1;display:block;background:var(--surface);border-bottom:1px solid var(--line)}
.tl-body{display:block}
.tl-box text{font-family:var(--font);font-size:var(--fs-micro);fill:var(--ink-3)}
.tl-grid{stroke:var(--line);stroke-width:1}
.tl-rule{stroke:var(--line);stroke-width:1}
.tl-rule[data-live]{stroke:var(--ink-3)}
.tl-now{stroke:var(--good);stroke-width:1.5}
.tl-axis .tl-nowt{fill:var(--good-ink);font-weight:var(--w-bold)}
.tl-bg{fill:transparent}
.tl-lane{cursor:pointer}
.tl-lane:hover .tl-bg{fill:var(--hover)}
.tl-box .tl-name{font-size:var(--fs-meta);fill:var(--ink-2)}
.tl-box .tl-name[data-live]{fill:var(--ink);font-weight:var(--w-bold)}
.tl-lane a:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tl-bar{fill:color-mix(in oklch,var(--c) 30%,transparent);stroke:var(--c);stroke-width:1}
.tl-bar[data-ended]{fill:color-mix(in oklch,var(--c) 14%,transparent);stroke-dasharray:3 2}
.tl-hit:hover .tl-bar{stroke-width:2}
.tl-box .tl-barn{pointer-events:none;fill:var(--ink)}
.tl-box .tl-barn[data-ended]{fill:var(--ink-2)}
.tl-cap{fill:var(--c);stroke:var(--surface);stroke-width:1.5;pointer-events:none}
.tl-cap[data-hollow]{fill:var(--surface);stroke:var(--c)}
.tl-tick{fill:var(--ink);opacity:.6}
.tl-tickhit{fill:transparent}
.tl-sw{display:inline-block;width:22px;height:9px;border-radius:2px;vertical-align:-1px;margin-right:5px;background:color-mix(in oklch,var(--quiet) 30%,transparent);border:1px solid var(--quiet)}
.tl-sw[data-ended]{background:color-mix(in oklch,var(--quiet) 14%,transparent);border-style:dashed}
.tl-sw[data-tone]{background:color-mix(in oklch,var(--c) 14%,transparent);border:1px dashed var(--c)}


/* ---- markdown: a post's text. Single line breaks are kept, as the board means them. ---- */
.md{white-space:pre-wrap;overflow-wrap:anywhere}
.md p{margin:.45em 0}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{margin:.7em 0 .25em;line-height:var(--lh-tight);font-weight:var(--w-bold)}
.md h1{font-size:var(--fs-lead)}.md h2{font-size:var(--fs-title)}.md h3,.md h4{font-size:var(--fs-body)}.md h5,.md h6{font-size:var(--fs-body);color:var(--ink-2)}
.md ul,.md ol{margin:.35em 0;padding-left:1.5em}
.md li{margin:.12em 0}.md li>p{margin:0}.md li>p+*{margin-top:.25em}
.md code{font-family:var(--mono);font-size:.9em;padding:.05em .3em;border-radius:var(--r-s);background:var(--sunken)}
.md pre{margin:.45em 0;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sunken);overflow:auto;white-space:pre;overflow-wrap:normal}
.md pre code{padding:0;background:none;font-size:var(--fs-meta);line-height:1.4}
.md blockquote{margin:.45em 0;padding-left:10px;border-left:3px solid var(--line-2);color:var(--ink-2)}
.md hr{border:0;border-top:1px solid var(--line-2);margin:.7em 0}
.md-tw{overflow:auto;margin:.45em 0}
.md table{border-collapse:collapse;font-size:var(--fs-small);white-space:normal}
.md th,.md td{border:1px solid var(--line-2);padding:2px 8px;vertical-align:top;overflow-wrap:normal;text-align:left}
.md th{background:var(--sunken);font-weight:600}

/* ---- rich chat: js/rich/ (design_pack/chat/SPEC.md). Blocks are rc-*; everything sits inside .md or .msg. ---- */
/* ---- prose: closer to reading than to a log, at this system's density ---- */
.md[data-rich]{line-height:1.55;max-width:none}
.md[data-rich]>p,.md[data-rich] section>p,.md[data-rich] li,.md[data-rich] blockquote{max-width:var(--measure);text-wrap:pretty}
.md[data-rich] p{margin:.65em 0}
.md[data-rich] h1{font-size:var(--fs-lead);margin:.2em 0 .35em}
.md[data-rich] h2,.md[data-rich] summary{font-size:var(--fs-title);font-weight:var(--w-bold);line-height:var(--lh-tight)}
.md[data-rich] h3{font-size:var(--fs-body);margin:1em 0 .25em}
.md[data-rich] ul,.md[data-rich] ol{margin:.5em 0}
.md[data-rich] li{margin:.22em 0}
.md[data-rich] li>ul,.md[data-rich] li>ol{margin:.15em 0}
.md[data-rich] blockquote{margin:.65em 0}
.md[data-rich] table{font-variant-numeric:tabular-nums}
.md a{overflow-wrap:anywhere}
.rc-task{list-style:none;margin-left:-1.5em}
.rc-task>span{display:inline-block;width:1.5em;font-family:var(--mono);font-size:var(--fs-meta);color:var(--ink-3)}
.rc-task[data-done]>span{color:var(--good-ink);font-weight:var(--w-bold)}
.rc-fn{font-size:.75em;vertical-align:super;line-height:0;text-decoration:none;padding:0 1px}
.rc-fns{margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--line);font-size:var(--fs-meta);color:var(--ink-2)}
.rc-fns ol{margin:0;padding-left:1.5em}


.rc-more{position:relative}
.rc-menu{position:absolute;z-index:12;top:calc(100% + 2px);right:0;display:grid;min-width:190px;padding:4px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--e1)}
.rc-menu button{height:30px;padding:0 8px;border:0;border-radius:var(--r-m);background:none;color:var(--ink);font-size:var(--fs-small);text-align:left;cursor:pointer;white-space:nowrap}
.rc-menu button:hover{background:var(--hover)}
.rc-raw{margin:var(--s1) 0 0;padding:var(--s2) var(--s3);max-height:520px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sunken);font:var(--fs-meta)/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.rc-rawnote{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s1);font-size:var(--fs-meta);color:var(--ink-3)}
.rc-byline{font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap}
.rc-byline b{color:var(--ink-2);font-weight:var(--w-med)}

/* ---- block frame: code, figure, table and artifact card share one ---- */
.rc-block{position:relative;margin:var(--s3) 0;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);min-width:0;max-width:100%;overflow:hidden}
.rc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s1);min-height:30px;padding:2px 4px 2px 10px;border-bottom:1px solid var(--line);background:var(--sunken);font-size:var(--fs-meta);color:var(--ink-2)}
.rc-lang{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3);white-space:nowrap}
.rc-ttl{font-weight:var(--w-med);color:var(--ink);overflow-wrap:anywhere;min-width:0}
.rc-tools{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0}
.rc-t{height:24px;min-width:24px;padding:0 6px;border:0;border-radius:var(--r-s);background:none;color:var(--ink-2);font-size:var(--fs-meta);line-height:24px;white-space:nowrap;cursor:pointer;text-align:center}
.rc-t:hover{background:var(--hover);color:var(--ink)}
.rc-t[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line-2)}
.rc-t[data-ok]{color:var(--good-ink);font-weight:var(--w-med)}
@container (max-width:640px){.rc-t{height:36px;min-width:36px;line-height:36px;padding:0 8px;font-size:var(--fs-small)}.rc-bar{padding:2px 2px 2px 10px}}
@media (hover:none){.rc-t{min-height:44px;line-height:44px}}

/* ---- code ---- */
.rc-code{display:block;overflow:auto;margin:0;padding:6px 0;font:var(--fs-meta)/1.5 var(--mono);tab-size:4;background:var(--surface)}
.rc-ls{display:table;min-width:100%}
.rc-l{display:table-row}
.rc-lc{display:table-cell;padding:0 12px 0 8px;white-space:pre;width:100%}
.rc-code[data-wrap] .rc-lc{white-space:pre-wrap;overflow-wrap:anywhere}
.rc-ln{display:table-cell;width:1%;padding:0 8px 0 10px;border:0;background:none;color:var(--ink-3);font:inherit;font-size:var(--fs-micro);text-align:right;white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none;font-variant-numeric:tabular-nums}
.rc-ln:hover{color:var(--ink);background:var(--hover)}
.rc-l[data-k=add] .rc-lc,.rc-l[data-k=add] .rc-ln{background:color-mix(in oklch,var(--good) 13%,transparent)}
.rc-l[data-k=del] .rc-lc,.rc-l[data-k=del] .rc-ln{background:color-mix(in oklch,var(--bad) 12%,transparent)}
.rc-l[data-k=hunk] .rc-lc{color:var(--info-ink);background:color-mix(in oklch,var(--info) 8%,transparent)}
.rc-l[data-k=file] .rc-lc{font-weight:var(--w-bold)}
.hl-k{color:light-dark(oklch(45% .16 305),oklch(76% .13 305))}
.hl-s{color:light-dark(oklch(44% .11 155),oklch(79% .12 155))}
.hl-c{color:var(--ink-3);font-style:italic}
.hl-n{color:light-dark(oklch(48% .13 45),oklch(77% .12 55))}
.hl-f{color:light-dark(oklch(45% .14 255),oklch(77% .11 255))}
.an-r{color:var(--bad-ink)}.an-g{color:var(--good-ink)}.an-y{color:var(--warn-ink)}.an-b{color:var(--info-ink)}.an-d{color:var(--ink-3)}.an-B{font-weight:var(--w-bold)}
.rc-foldb{display:block;width:100%;height:30px;border:0;border-top:1px solid var(--line);background:var(--sunken);color:var(--ink-2);font-size:var(--fs-meta);cursor:pointer}
.rc-foldb:hover{color:var(--ink);background:var(--hover)}

/* ---- equations ---- */
.rc-eq{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s3);margin:var(--s3) 0;padding:var(--s2) 0}
.rc-eq-b{overflow-x:auto;text-align:center;padding:var(--s1) 0;font-size:1.1em;min-width:0}
.rc-eq-a{position:absolute;right:0;top:-10px;display:none;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:var(--e1);z-index:2}
.rc-eq:hover .rc-eq-a,.rc-eq:focus-within .rc-eq-a{display:flex}
@media (hover:none){.rc-eq-a{position:static;display:flex;grid-column:1/-1;justify-self:end;box-shadow:none;border:0;background:none}}

/* ---- something that couldn't be drawn: its source, and a small quiet note ---- */
.rc-failnote{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s2);padding:4px 10px;border-bottom:1px solid var(--line);font-size:var(--fs-meta);color:var(--ink-3)}
.rc-failnote b{color:var(--ink-2);font-weight:var(--w-med)}
.rc-failsrc{margin:0;padding:8px 10px;overflow:auto;font:var(--fs-meta)/1.5 var(--mono);white-space:pre;background:var(--surface)}
.rc-failinl{font:.9em var(--mono);padding:.05em .3em;border-radius:var(--r-s);background:var(--sunken);text-decoration:underline dotted var(--ink-3);text-underline-offset:3px}
rc-lazy{display:contents}
rc-lazy[data-kind=code],rc-lazy.rc-eq-b{display:block}
rc-lazy[data-mode=inline]{display:inline}
.md pre.rc-code{margin:0;padding:6px 0;border:0;border-radius:0;background:var(--surface);overflow:auto}
.md pre.rc-code code{padding:0;background:none;font-size:var(--fs-meta);line-height:1.5;border-radius:0}
.md .rc-code .rc-pl{display:block;padding:0 12px 0 8px}
.md .rc-code[data-wrap] .rc-pl{white-space:pre-wrap;overflow-wrap:anywhere}
.rc-task{display:flex}
.rc-task>span{flex:none}
.rc-task>div{flex:1;min-width:0}
.md[data-rich] .rc-task>div>p{margin:0}
.rc-fn{border:0;background:none;color:var(--link,var(--info-ink));cursor:pointer}
.rc-sel{position:fixed;z-index:40;padding:2px;border-radius:var(--r-m);background:var(--ink);box-shadow:var(--e1)}
.rc-sel button{display:block;height:28px;padding:0 10px;border:0;border-radius:var(--r-s);background:none;color:var(--on-ink);font-size:var(--fs-small);font-weight:var(--w-med);cursor:pointer;white-space:nowrap}
.rc-sel button:hover{background:color-mix(in oklch,var(--on-ink) 16%,transparent)}
@media (pointer:coarse){.rc-sel button{height:44px;padding:0 16px}}
.rc-ask{display:none}
.msg .rc-ask{display:inline-block}
.rc-im{cursor:copy;border-radius:2px;white-space:normal}
.rc-im:hover{background:var(--hover)}
.rc-eq-b{white-space:normal}
.md .katex{overflow-wrap:normal}
.rc-moreb{opacity:0}
.msg:hover .rc-moreb,.rc-moreb:focus-visible,.rc-moreb[aria-expanded=true]{opacity:1}
@media (hover:none){.rc-moreb{opacity:1}}
.msg-b>pre.rc-raw{margin-top:0}
@media print{.rc-bar .rc-tools,.rc-eq-a,.rc-foldb,.rc-more{display:none}.rc-block{break-inside:avoid}.rc-code{overflow:visible;max-height:none}.rc-lc{white-space:pre-wrap}}
/* ---- message: one board post, as a chat message. Agents on the left, your own to the right. ---- */
/* ---- figures: one frame, one tool row, pan, zoom, full screen, source ---- */
.rc-fig{margin:var(--s3) 0}
.rc-fig[data-full]{position:fixed;inset:0;z-index:50;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;background:var(--surface)}
.rc-fig[data-full] .rc-stage{flex:1;max-height:none}
.rc-stage{overflow:auto;max-height:560px;padding:var(--s3);cursor:grab;background:var(--surface);overscroll-behavior:contain}
.rc-stage[data-drag]{cursor:grabbing}
.rc-stage[data-plain]{cursor:default}
.rc-zoom{transform-origin:0 0}
.rc-svg{display:block;max-width:none;overflow:visible}
.rc-fig-note{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s3);padding:4px 10px;border-top:1px solid var(--line);font-size:var(--fs-meta);color:var(--ink-3);min-height:28px}
.rc-read{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.rc-read b{color:var(--ink);font-weight:var(--w-med)}
.rc-swatch{display:inline-block;width:14px;height:0;border-top:2px solid var(--tier1);vertical-align:middle;margin-right:4px}
.rc-swatch[data-k="1"]{border-top-color:var(--tier2);border-top-style:dashed}
.rc-swatch[data-k=mark]{border-top:1px dashed var(--ink-2)}
/* csv table */
.rc-tw{overflow:auto;max-height:340px}
.rc-tbl{border-collapse:collapse;width:100%;font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.rc-tbl th,.rc-tbl td{padding:3px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.rc-tbl th{position:sticky;top:0;z-index:1;padding:0;background:var(--sunken);font-weight:600}
.rc-tbl th button{display:block;width:100%;height:28px;padding:0 10px;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;white-space:nowrap}
.rc-tbl th button:hover{color:var(--ink);background:var(--hover)}
.rc-tbl tbody tr:hover{background:var(--hover)}
.rc-tbl td:last-child,.rc-tbl th:last-child{width:1%;padding:0 4px}
.rc-tbl [data-t]{text-align:left}
.rc-tbl td{vertical-align:middle}
.msg .rc-tbl td .rc-t{display:block;margin:0 0 0 auto;height:22px;min-height:0;line-height:22px}
@container (max-width:640px){.msg .rc-tbl td .rc-t{height:32px;line-height:32px}}
@media (pointer:coarse){.msg .rc-tbl td .rc-t{height:44px;line-height:44px}}
.md .rc-tbl th,.md .rc-tbl td{border:0;border-bottom:1px solid var(--line);overflow-wrap:normal}
.md .rc-tbl th{padding:0}
.md .rc-tbl td{padding:3px 10px;text-align:right}
.md .rc-tbl td[data-t]{text-align:left}
.md .rc-tbl td:last-child{padding:0 4px}
.rc-filter{width:128px;height:24px;padding:0 6px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);font-size:var(--fs-meta)}
@container (max-width:640px){.rc-filter{width:96px;height:36px}}
/* plots: three series colours, checked for colour blindness on both themes; dashes give the second and third a second cue */
.rc-plotb{--g0:var(--tier1);--g1:light-dark(oklch(66% .16 45),oklch(65% .15 45));--g2:light-dark(oklch(62% .1 180),oklch(66% .1 180));min-height:220px;touch-action:pan-y;cursor:crosshair}
.rc-plotsvg{display:block;max-width:100%}
.g-frame{fill:none;stroke:var(--line-2);stroke-width:1}
.g-s0,.g-s1,.g-s2{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.g-s0{stroke:var(--g0)}.g-s1{stroke:var(--g1);stroke-dasharray:7 4}.g-s2{stroke:var(--g2);stroke-dasharray:2 4}
.g-f0{fill:var(--g0)}.g-f1{fill:var(--g1)}.g-f2{fill:var(--g2)}
.g-ring{stroke:var(--surface);stroke-width:2}
.rc-plotread{min-height:22px;padding:2px 10px 4px;font-size:var(--fs-meta);color:var(--ink-3);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* artifact */
.rc-art iframe{display:block;width:100%;border:0;background:transparent}
.rc-artc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s3);color:var(--ink-2);font-size:var(--fs-small)}
.rc-artc[hidden]{display:none}
.rc-art .rc-paramsn{padding:var(--s2) var(--s3);border-top:1px solid var(--line)}
.rc-art .rc-paramsn[hidden]{display:none}
.rc-artgo{height:30px;padding:0 var(--s4);border:0;border-radius:var(--r-s);background:var(--ink);color:var(--on-ink);font-size:var(--fs-small);font-weight:var(--w-med);cursor:pointer}
@media (pointer:coarse){.rc-artgo{height:44px}}
.rc-fig[data-full] .rc-own,.rc-fig[data-full] .rc-art{flex:1;min-height:0;display:flex;flex-direction:column}
.rc-fig[data-full] .rc-art iframe{flex:1;height:auto!important}
/* live parameters */
.rc-params{display:grid;gap:4px var(--s3);padding:6px 10px;border-top:1px solid var(--line);font-size:var(--fs-meta)}
.rc-param{display:grid;grid-template-columns:90px minmax(0,1fr) 72px;align-items:center;gap:var(--s2)}
.rc-param label{color:var(--ink-2);white-space:nowrap}
.rc-param input[type=range]{width:100%;height:24px;margin:0;accent-color:var(--tier1)}
.rc-param output{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--w-med)}
.rc-paramsn{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s2);color:var(--ink-3)}
/* drawing ink: figures follow the theme through classes, never through fills in the drawing */
.g-grid{stroke:var(--line);stroke-width:1;fill:none}
.g-axis{stroke:var(--line-2);stroke-width:1;fill:none}
.g-tick{fill:var(--ink-3);font:11px var(--font);font-variant-numeric:tabular-nums}
.g-lab{fill:var(--ink-2);font:12px var(--font)}
.g-l0{stroke:var(--tier1);stroke-width:1.8;fill:none;stroke-linejoin:round}
.g-l1{stroke:var(--tier2);stroke-width:1.6;fill:none;stroke-dasharray:6 3;stroke-linejoin:round}
.g-d0{fill:var(--tier1)}.g-d1{fill:var(--tier2)}
.g-mark{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:4 3;fill:none}
.g-cross{stroke:var(--ink-3);stroke-width:1;fill:none}
.g-region{fill:color-mix(in oklch,var(--focus) 16%,transparent);stroke:var(--focus);stroke-width:1.2}
.g-node{fill:var(--surface);stroke:var(--line-2);stroke-width:1.2}
.g-nodeb{fill:var(--sunken);stroke:var(--ink-3);stroke-width:1.2}
.g-t{fill:var(--ink);font:12.5px var(--font)}
.g-t2{fill:var(--ink-2);font:11px var(--font)}
.g-m{fill:var(--ink);font:11.5px var(--mono)}
.g-e{stroke:var(--ink-2);stroke-width:1.3;fill:none}
.g-ed{stroke:var(--ink-2);stroke-width:1.2;fill:none;stroke-dasharray:4 3}
.g-head{fill:var(--ink-2);stroke:none}
.g-dot{fill:var(--ink);stroke:none}
.g-bar0{fill:var(--tier1)}.g-bar1{fill:var(--tier2)}.g-bar2{fill:var(--held)}
.g-wave{stroke:var(--ink);stroke-width:1.4;fill:none}
.g-wavex{fill:var(--line);stroke:var(--ink-3);stroke-width:1}
.g-wavebus{fill:color-mix(in oklch,var(--tier1) 16%,transparent);stroke:var(--ink);stroke-width:1.2}
.g-wavebus2{fill:color-mix(in oklch,var(--tier2) 20%,transparent);stroke:var(--ink);stroke-width:1.2}
.g-wire{stroke:var(--ink);stroke-width:1.5;fill:none}

.rc-figl{display:block}
.rc-fig-src{margin:0;padding:var(--s3);max-height:420px;overflow:auto;font:var(--fs-small)/1.5 var(--mono);white-space:pre;background:var(--surface)}
.rc-fig-note[hidden]{display:none}
.rc-svgimg{display:block;max-width:100%;height:auto;padding:var(--s3)}
.rc-fig[data-full] .rc-figl{flex:1;min-height:0;display:flex;flex-direction:column}

.msg{position:relative;max-width:820px;margin:0 auto;padding:6px 10px 6px;border-radius:var(--r-l);min-width:0}
.msg+.msg{margin-top:6px}
.msg[data-cont]{margin-top:0;padding-top:1px}
.msg[data-who=sys]{color:var(--ink-3);font-size:var(--fs-small)}
.msg[data-who=me]{--mine:color-mix(in oklch,var(--info) 9%,var(--surface));display:flex;flex-direction:column;align-items:flex-end;padding:4px 0}
.msg[data-who=me]>.msg-b,.msg[data-who=me]>.msg-q,.msg[data-who=me]>.msg-files{max-width:min(78%,620px)}
.msg[data-who=me]>.msg-b{padding:7px 12px;border-radius:var(--r-l) var(--r-l) var(--r-s) var(--r-l);background:var(--mine);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--info) 14%,transparent)}
.msg[data-who=me][data-cont]>.msg-b{border-top-right-radius:var(--r-s)}
.msg[data-who=me]>.msg-h{justify-content:flex-end}
.msg[data-who=me][data-state=failed]>.msg-b{box-shadow:inset 0 0 0 1px var(--bad)}
.msg[data-who=me][data-state=sending]>.msg-b{opacity:.72}
.msg[data-flash]{animation:msg-flash 2.2s ease-out;outline:none}
@keyframes msg-flash{0%,55%{background:color-mix(in oklch,var(--accent) 8%,transparent);box-shadow:0 0 0 2px color-mix(in oklch,var(--accent) 45%,transparent)}to{background:transparent;box-shadow:0 0 0 2px transparent}}   /* a soft ring, not an orange wash (1104013027da) */
.msg-h{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:var(--fs-small);min-height:var(--ctl-s)}
.msg-me{font-weight:600}
.msg-src{padding:0 5px;border:1px solid var(--line-2);border-radius:var(--r-s);font-size:var(--fs-micro);line-height:1.5;color:var(--ink-3);white-space:nowrap}
.msg-to{color:var(--ink-3)}
.msg-r{color:var(--ci);font-size:var(--fs-meta)}
.msg-end{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.msg[data-who=me] .msg-h .msg-end{margin-left:6px;order:-1}
.msg-reply{opacity:0}
.msg:hover .msg-reply,.msg:focus-within .msg-reply{opacity:1}
.msg:hover .copy{opacity:1}
.msg[data-cont]>.msg-h{position:absolute;top:0;right:8px;min-height:0;z-index:1}
.msg[data-cont]>.msg-h>:not(.msg-end){display:none}
.msg[data-cont]>.msg-h .msg-end{opacity:0;background:var(--hover);border-radius:var(--r-s);padding:0 2px}
.msg[data-cont]:hover>.msg-h .msg-end,.msg[data-cont]:focus-within>.msg-h .msg-end{opacity:1}
.msg[data-who=me][data-cont]>.msg-h{right:auto;left:0}
@media (hover:none){.msg-reply{opacity:1}.msg[data-cont]>.msg-h{display:none}}
.msg-b{min-width:0;overflow-wrap:anywhere}
.msg-b>.md{display:block}
.msg-b[data-folded]>.md:last-child{margin-top:2px}
.msg-more{display:flex;margin:4px 0;text-decoration:underline;text-underline-offset:2px}
/* the developer log (handoff §5b): hover row, floating tools, faded cut, your posts in a grey box, chips in the head */
:root[data-dev] .msg:hover{background:var(--hover)}
:root[data-dev] .msg-more{gap:4px;padding-left:0;align-items:center;margin:2px 0 4px;text-decoration:none;color:var(--ink-2)}
:root[data-dev] .msg-more[aria-expanded=true] .ic{transform:rotate(180deg)}
.msg-tools{position:absolute;top:2px;right:6px;z-index:2;display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--e1);opacity:0;pointer-events:none}
.msg:hover>.msg-tools,.msg:focus-within>.msg-tools,.msg-tools:has([aria-expanded=true]){opacity:1;pointer-events:auto}
.msg-tools>.rc-more{display:flex}

.msg-tools .btn[data-done]{color:var(--good)}
.rc-menu a{display:flex;align-items:center;height:30px;padding:0 8px;border-radius:var(--r-m);color:var(--ink);font-size:var(--fs-small);text-decoration:none;white-space:nowrap}
.rc-menu a:hover{background:var(--hover)}
@media (hover:none) and (pointer:coarse){.msg-tools{display:none}}
.msg>.md[data-cut]{max-height:none;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 1.6em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 1.6em),transparent)}
.msg-chip{padding:0 6px;border-radius:999px;background:var(--sunken);font-size:var(--fs-meta)}
.msg-raw{margin:4px 0;padding:8px 10px;border-radius:var(--r-m);background:var(--sunken);font:var(--fs-small)/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
:root[data-dev] .msg[data-who=person]{margin-top:4px;margin-bottom:4px;background:var(--sunken)}
:root[data-dev] .msg[data-cont]>.msg-h{display:none}
.msg-q{display:grid;width:fit-content;gap:1px;margin:2px 0 4px;padding:3px 10px;border:0;border-left:2px solid var(--line-2);background:none;color:var(--ink-2);font-size:var(--fs-small);text-align:left;cursor:pointer;min-width:0;max-width:100%}
.msg-q:hover{border-left-color:var(--ink-3);color:var(--ink)}
.msg-q[data-static]{cursor:default}
.msg-q b{font-size:var(--fs-meta);font-weight:600;color:var(--ink-2)}
.msg-q span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-rc{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s3);font-size:var(--fs-meta);color:var(--ink-3)}
.msg-rc:empty{display:none}
.msg[data-who=me]>.msg-rc{justify-content:flex-end;margin-top:3px}
.msg-rc>span[data-tone]{display:inline-flex;align-items:center;gap:5px;color:var(--ci)}
.msg-rc>span[data-tone=good]{color:var(--ink-3)}
.msg-rc>span b{font-weight:var(--w-bold)}
.msg-files{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:6px}
.msg[data-who=me]>.msg-files{justify-content:flex-end}
.msg-thumb,.msg-file{border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;text-decoration:none;font-size:var(--fs-meta)}
span.msg-thumb,span.msg-file{cursor:default}
.msg-thumb:hover,.msg-file:hover{border-color:var(--ink-3);color:var(--ink)}
.msg-thumb{display:flex;flex-direction:column;gap:2px;padding:4px;width:164px}
.msg-thumb img{display:block;width:100%;height:112px;object-fit:contain;background:var(--sunken);border-radius:var(--r-s)}
.msg-thumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.msg-file{display:inline-flex;align-items:center;gap:var(--s2);padding:4px 10px 4px 6px;max-width:100%;min-width:0}
.msg-file>b{flex:none;padding:0 5px;border-radius:var(--r-s);background:var(--sunken);font-size:var(--fs-micro);font-weight:var(--w-bold);color:var(--ink-2);line-height:20px}
.msg-file>span{display:flex;flex-direction:column;min-width:0}
.msg-fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- viewer: a post's files, one at a time ---- */
.viewer{width:min(1100px,calc(100vw - 24px));height:calc(100dvh - 48px);max-height:none;padding:0;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--surface);color:var(--ink);box-shadow:var(--e2)}
.viewer[open]{display:flex;flex-direction:column}
.viewer::backdrop{background:oklch(0% 0 0 / .42)}
.viewer-b{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
.viewer-c{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.viewer-s{flex:1;min-height:0;overflow:auto;padding:var(--s3)}
.viewer-s img{display:block;max-width:100%;margin:0 auto;cursor:zoom-in}
.viewer-s img[data-full]{max-width:none;cursor:zoom-out}
.viewer-s pre{margin:0;font-family:var(--mono);font-size:var(--fs-meta);white-space:pre-wrap;overflow-wrap:anywhere}


/* ---- composer: one box with its tools inside. Popups (@ names, To) open above it. ---- */
.cp{position:relative;display:grid;gap:6px;padding:8px var(--s4) 12px;background:var(--surface)}
.cp-box{position:relative;display:grid;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--surface)}
.cp-box:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in oklch,var(--focus) 16%,transparent)}
.cp-t{display:block;width:100%;min-height:44px;max-height:40vh;padding:11px 12px 4px;border:0;background:none;color:var(--ink);resize:none;field-sizing:content;line-height:1.45}
.cp-t:focus-visible{outline:none}
.cp-t::placeholder{color:var(--ink-3)}
.cp-bar{display:flex;align-items:center;gap:2px;padding:2px 6px 6px}
.cp-model{height:var(--ctl-s);margin:0 4px;padding:0 4px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--sunken);color:inherit}
.cp-hint{margin-left:auto;padding:0 var(--s2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cp-send{flex:none;min-width:64px}
.cp-new{padding:0 6px}
.cp-to{display:inline-flex;align-items:center;gap:5px;height:var(--ctl-s);padding:0 8px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--sunken);color:var(--ink);font-size:var(--fs-small);cursor:pointer;white-space:nowrap;min-width:0}
.cp-to:hover{border-color:var(--ink-3)}
.cp-to b{font-weight:600}
.cp-menu,.cp-ac{position:absolute;z-index:20;bottom:calc(100% - 6px);left:var(--s4);width:min(380px,calc(100% - 2 * var(--s4)));padding:4px;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--e1)}
.cp-ac{bottom:calc(100% + 4px);left:6px}
.cp-opt{display:flex;align-items:center;gap:7px;width:100%;padding:6px 8px;border:0;border-radius:var(--r-m);background:none;color:var(--ink);font-size:var(--fs-small);text-align:left;cursor:pointer}
.cp-opt:hover,.cp-opt[aria-selected=true]{background:var(--hover)}
.cm-id{display:inline-flex;align-items:center;gap:4px;flex:none}
.cp-opt .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cp-menu-n{margin:4px 8px 4px;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.4;text-wrap:pretty}
.cp-reply{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 6px 4px 10px;border-left:2px solid var(--info);font-size:var(--fs-small)}
.cp-reply-x{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.cp-x{flex:none;width:24px;height:24px;border:0;border-radius:var(--r-s);background:none;color:var(--ink-3);font-size:15px;line-height:1;cursor:pointer}
.cp-x:hover{background:var(--hover);color:var(--ink)}
.cp-err{font-size:var(--fs-small);color:var(--bad-ink)}
.cp-files{display:flex;flex-wrap:wrap;gap:6px;padding:8px 8px 0}
.cp-file{display:inline-flex;align-items:center;gap:8px;max-width:240px;padding:4px 2px 4px 4px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg);font-size:var(--fs-meta)}
.cp-file img{width:40px;height:40px;object-fit:cover;border-radius:var(--r-s);flex:none}
.cp-file>b{flex:none;width:40px;line-height:40px;text-align:center;border-radius:var(--r-s);background:var(--sunken);font-size:var(--fs-micro);color:var(--ink-2)}
.cp-fn{display:grid;min-width:0}
.cp-fn>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-name-row{padding:8px 8px 0}
.cp-name{height:var(--ctl-s);font-size:var(--fs-small)}
@container (max-width:640px){.cp-hint{display:none}.cp-bar{justify-content:flex-start}.cp-send{margin-left:auto}.cp-t{font-size:16px}}

/* ---- comms: conversations beside one conversation. On a phone they take turns (data-in: a conversation is open). ---- */
.cm{display:grid;grid-template-columns:var(--cm-w,320px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:calc(100dvh - var(--top-h,var(--bar-h)));min-height:0}
#main:has(>.cm){min-height:0}
.cm-show{grid-column:1/-1;display:flex;align-items:center;gap:var(--s2) var(--s3);min-width:0;padding:6px var(--s4);border-bottom:1px solid var(--line);background:var(--surface)}
.cm-show-l{font-size:var(--fs-small);font-weight:var(--w-med);color:var(--ink-2)}
.cm-picks{flex:none;display:flex;gap:var(--s1,4px)}
.cm-picks button{height:26px;padding:0 10px;border:1px solid var(--line-2);border-radius:999px;background:none;color:var(--ink-3);font-size:var(--fs-small);cursor:pointer;white-space:nowrap}
.cm-picks button:hover{color:var(--ink)}
.cm-picks button[aria-pressed=true]{background:var(--sunken);color:var(--ink);font-weight:var(--w-med)}
.cm-picks button[aria-pressed=true]::before{content:"✓ "}
.cm-show-says{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-side{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--line);background:var(--bg)}
.cm-filters{display:grid;justify-items:stretch;gap:10px;padding:var(--s4) var(--s4) var(--s2);border-bottom:1px solid var(--line)}
.cm-newbtn{height:38px;font-size:var(--fs-body)}
.cm-filters>.input{height:36px;font-size:var(--fs-body)}
.cm-scope{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:2px;font-size:var(--fs-meta);font-weight:var(--w-med);color:var(--ink-3)}
.cm-scope .seg{background:none;padding:0}
.cm-scope .seg button{height:24px;padding:0 8px;font-size:var(--fs-meta)}
.cm-scope .seg button[aria-pressed=true]{background:var(--sunken);box-shadow:none}
.cm-tl{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding:0 var(--s2)}
.cm-tl .list{border-bottom:0}
.cm-tl .lr:first-child{border-top:0}
.cm-tl .lr-in{margin:0;padding:11px var(--s2)}
.cm-tl .lr-in[aria-current]{background:var(--hover);box-shadow:inset 2px 0 0 var(--ink)}
.cm-tl .lr-t{font-size:var(--fs-body)}
.cm-tl .lr-t b{flex:1 1 auto;font-weight:600}
.cm-tl .lr-x{-webkit-line-clamp:2;margin-top:3px;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.4}
.cm-st{font-weight:var(--w-med);color:var(--ci)}
.cm-st[data-tone=ended]{color:var(--ink-3)}
.cm-side-f{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:6px var(--s3);border-top:1px solid var(--line)}
.cm mark{background:color-mix(in oklch,var(--warn) 40%,transparent);color:inherit;border-radius:2px}
.cm-convo{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}
.cm-head{display:grid;gap:var(--s2);padding:14px var(--s4);border-bottom:1px solid var(--line);background:var(--surface)}
.cm-tt{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s3);min-width:0}
.cm-title{flex:0 0 auto;font-size:var(--fs-lead);font-weight:var(--w-bold);overflow-wrap:anywhere;max-width:100%}
.cm-tier{display:inline-flex;align-items:center;gap:6px}
.cm-tools{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.cm-tools .input{width:210px;height:var(--ctl-s);font-size:var(--fs-small)}
.cm-menu{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);padding:6px 0 2px;border-top:1px solid var(--line);font-size:var(--fs-small)}
.cm-menu .check{align-items:center}
.cm-menu .check input{margin-top:0}
.cm-people{display:flex;flex-wrap:wrap;gap:2px var(--s3);font-size:var(--fs-meta)}
.cm-menu-find{display:none}
.cm-back{display:none}
.cm-mw{flex:1;min-height:0;display:flex}
.cm-msgs{position:relative;flex:1;min-width:0;overflow:auto;overscroll-behavior:contain;padding:var(--s2) var(--s4) var(--s3)}
.cm-msgs:focus-visible{outline-offset:-2px}
.cm-day{display:flex;align-items:center;gap:var(--s3);max-width:820px;margin:var(--s4) auto var(--s2);font-size:var(--fs-meta);font-weight:var(--w-med);color:var(--ink-3)}
.cm-day::before,.cm-day::after{content:"";flex:1;border-top:1px solid var(--line)}
.cm-ev{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;max-width:820px;margin:var(--s2) auto;padding:6px 10px;border-radius:var(--r-m);background:color-mix(in oklch,var(--c) 10%,transparent);font-size:var(--fs-small)}
.cm-ev b{font-weight:var(--w-med);color:var(--ci)}
.cm-older{display:flex;justify-content:center;padding:var(--s2)}
.cm-out:empty{display:none}
.cm-jump{position:sticky;bottom:8px;z-index:2;display:flex;margin:8px auto 0;height:30px;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-size:var(--fs-small);font-weight:var(--w-med);box-shadow:var(--e1);cursor:pointer;align-items:center}
.cm-strip{display:grid;gap:2px;padding:6px var(--s4) 0;border-top:1px solid var(--line)}
.cm-strip:empty{display:none}
.cm-line{display:flex;align-items:center;gap:8px;min-height:28px;font-size:var(--fs-small);color:var(--ink-2);min-width:0}
.cm-line>.sd{flex:none}
.cm-line-x{flex:1;min-width:0;text-wrap:pretty}
.cm-line[data-key^="run:"] .cm-line-x{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-line-x b{color:var(--ink);font-weight:600}
.cm-line-x q{color:var(--ink)}
.cm-line[data-tone=info] .cm-line-x,.cm-line[data-tone=bad] .cm-line-x{color:var(--ink)}
.cm-line-a{flex:none;display:flex;gap:4px}
.cm-hint{padding:8px var(--s4) 12px;border-top:1px solid var(--line)}
[data-file-over]{outline:2px dashed var(--focus);outline-offset:1px}
.cp[data-drag] .cp-box{outline:2px dashed var(--focus);outline-offset:1px}
.drop-say{position:fixed;left:50%;bottom:var(--s4);transform:translateX(-50%);z-index:1000;margin:0;padding:var(--s2) var(--s3);max-width:min(90vw,32rem);border-radius:var(--r-m);background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.cm-drop{display:none}
.cm-convo[data-drag] .cm-drop{position:absolute;inset:8px;z-index:30;display:flex;align-items:center;justify-content:center;border:2px dashed var(--focus);border-radius:var(--r-l);background:color-mix(in oklch,var(--surface) 86%,transparent);font-weight:var(--w-med);color:var(--ink);pointer-events:none}
/* home: start something, and what needs you */
.cm-home{flex:1;min-height:0;overflow:auto;padding:var(--s6) var(--gutter) var(--s7)}
.cm-new,.cm-needs{max-width:720px;margin:0 auto}
.cm-home-t{font-size:var(--fs-head);font-weight:var(--w-bold);letter-spacing:-.012em}
.cm-home-l{margin:4px 0 var(--s3);color:var(--ink-2);font-size:var(--fs-body);max-width:60ch;text-wrap:pretty}
.cm-home-warn{display:flex;align-items:center;gap:8px;margin-bottom:var(--s3);font-size:var(--fs-small);color:var(--ci)}
.cm-home .cp{padding:0;background:none}
.cm-home .cp-t{min-height:88px;font-size:var(--fs-body)}
.cm-home .cm-out{margin-top:var(--s3)}
.cm-needs{display:grid;gap:var(--s5);margin-top:var(--s7)}
.cm-needs-t{font-size:var(--fs-title);font-weight:var(--w-bold)}
.cm-needs .lr-x{-webkit-line-clamp:2}
.cm-home-all{display:flex;gap:var(--s2);margin-left:-8px}
@container (max-width:640px){
  .cm{grid-template-columns:minmax(0,1fr)}
  .cm[data-in] .cm-side{display:none}
  .cm:not([data-in]) .cm-convo{display:none}
  .cm-side{border-right:0}
  .cm-show{padding:4px 12px}
  .cm-picks{flex:1;min-width:0}
  .cm-picks button{flex:1;padding:0 4px}
  .cm-show-says{display:none}
  .cm-tl .lr-in{padding:10px 8px}
  .cm-back{display:inline-flex;margin-left:-8px;min-height:32px}
  .cm-head{padding:6px 12px 8px}
  .cm-tt{flex-wrap:nowrap;gap:var(--s2)}
  .cm-title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cm-count,.cm-id{display:none}
  .cm-tt[data-dev]{flex-wrap:wrap}
  .cm-tt[data-dev] .cm-title{order:9;flex:1 0 100%}
  .cm-tools{margin-left:auto;flex:none}
  .cm-tools .cm-find{display:none}
  .cm-head:not(:has(.cm-menu)) .cm-tools:not(:has(.btn)) .cm-find{display:block;width:140px}
  .cm-menu-find{display:block;flex:1 1 100%}
  .cm-people{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .cm-people>*{flex:none}
  .cm-msgs{padding:4px 8px var(--s3)}
  .msg[data-who=me]>.msg-b,.msg[data-who=me]>.msg-q{max-width:88%}
  .cm-strip{padding:4px 12px 0}
  .cm-line{align-items:flex-start;font-size:var(--fs-meta)}
  .cm-line>.sd{margin-top:5px}
  .cp{padding:6px 8px 8px}
  .cm-home{padding:var(--s4) 14px var(--s6)}
  .cm-needs{margin-top:var(--s6)}
}

/* ---- not built yet: a mark on designed features the server can't do yet ---- */
/* Neutral on purpose: amber means "in the job queue", and this is a note to the owner, not a state. */
.nb{display:inline-flex;align-items:center;padding:0 6px;border:1px dashed var(--ink-3);border-radius:var(--r-pill);color:var(--ink-2);font-size:var(--fs-micro);font-weight:var(--w-med);line-height:16px;white-space:nowrap;vertical-align:.08em}

/* ---- note: something to read before acting. One title line, then short points. tone: info | warn | bad ---- */
.note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--s3);padding:var(--s3) var(--s4);border:1px solid color-mix(in oklch,var(--c,var(--ink-3)) 40%,var(--line));border-radius:var(--r-m);background:color-mix(in oklch,var(--c,var(--ink-3)) 6%,var(--surface));font-size:var(--fs-small);color:var(--ink);max-width:var(--measure)}
.note>.sd{margin-top:6px}
.note-in{display:grid;gap:var(--s2);min-width:0}
.note-t{font-size:var(--fs-body);font-weight:var(--w-bold);text-wrap:pretty}
.note-b{display:grid;gap:var(--s2);text-wrap:pretty}
.note-b ul{list-style:disc;padding-left:1.1em;display:grid;gap:var(--s1)}
.note-a{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--s3)}
.notes>.note{max-width:none}

/* ---- block: one setting or account. A row with its state and action, its body below. Hairlines, not boxes. A <details> block folds. ---- */
.blks{display:grid;border-top:1px solid var(--line)}
.sec[data-level="1"]>.sec-h+.blks{border-top:0}
.sec[data-level="1"]>.sec-h+.list>.lr:first-child{border-top:0}
.blk{padding:var(--s3) 0;border-bottom:1px solid var(--line);min-width:0}
.blk-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);min-height:var(--ctl)}
.blk-t{font-size:var(--fs-body);font-weight:var(--w-bold)}
.blk-s{font-size:var(--fs-small);color:var(--ink-2)}
.blk-a{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.blk-b{display:grid;gap:var(--s2);margin-top:var(--s2);font-size:var(--fs-small);min-width:0}
.blk-b>p{max-width:var(--measure);color:var(--ink-2);text-wrap:pretty}
details.blk>summary{list-style:none;cursor:pointer;border-radius:var(--r-s)}
details.blk>summary::-webkit-details-marker{display:none}
details.blk>summary .blk-t::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 9px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg)}
details.blk[open]>summary .blk-t::after{margin-bottom:-1px;transform:rotate(225deg)}
.blk-save{font-size:var(--fs-meta);color:var(--ink-3)}

/* ---- cmd: a command to copy. It wraps rather than hide its end on a phone. ---- */
.cmd{display:flex;align-items:flex-start;gap:var(--s3);padding:7px 7px 7px var(--s3);border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface)}
.cmd+.cmd{margin-top:var(--s2)}
.cmd code{flex:1;min-width:0;padding:4px 0;font-family:var(--mono);font-size:var(--fs-small);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.cmd .btn{flex:none}
.linkbtn{padding:0;border:0;background:none;color:var(--link);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font:inherit}
.linkbtn:hover{color:var(--ink)}

/* ---- start: first run as a conversation ---- */
.st{padding-top:var(--s6)}
.st-log{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.st .msg{margin:0;max-width:none}
.st .msg+.msg{margin-top:0}
.st-hive{font-weight:var(--w-bold)}
.st-msg .msg-b{display:grid;gap:var(--s2)}
.st-msg .frow{margin-top:2px}
.st-msg pre{padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sunken);overflow:auto;font-size:var(--fs-meta)}
.st .signin{margin:0}
.st .cp{padding:0;background:none}
.st .cp-t{min-height:88px}
.st-wait{padding:var(--s3) 0}
.st-know{margin-top:var(--s5);display:grid;gap:var(--s2);justify-items:start;font-size:var(--fs-small);color:var(--ink-2)}
.st-know .btn{margin-left:-8px}

/* ---- knowledge: notes beside one note; on a phone they take turns ---- */
.kb{display:grid;grid-template-columns:340px minmax(0,1fr);height:calc(100dvh - var(--top-h,var(--bar-h)));min-height:0}
#main:has(>.kb){min-height:0}
.kb-side{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.kb-top{display:grid;gap:8px;padding:var(--s4) var(--s3) var(--s3);border-bottom:1px solid var(--line)}
.kb-top .seg{justify-self:start}
.kb-title{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.kb-title h1{font-size:var(--fs-title);font-weight:var(--w-bold)}
.kb-list{flex:1;min-height:0;overflow:auto;padding:0 var(--s2)}
.kb-list .list{border-bottom:0}
.kb-list .lr:first-child{border-top:0}
.kb-list .lr-in{margin:0}
.kb-list .lr-in[aria-current]{background:var(--hover);box-shadow:inset 2px 0 0 var(--ink)}
.kb-list .lr-x{font-size:var(--fs-meta);color:var(--ink-3)}
.kb-main{min-width:0;min-height:0;overflow:auto;background:var(--surface)}
.kb-none{padding:var(--s6) var(--gutter)}
.kb-note{max-width:760px;padding:var(--s5) var(--gutter) var(--s7);display:grid;gap:var(--s5)}
.kb-back{display:none;justify-self:start;margin-left:-8px}
.kb-h{display:grid;gap:4px}
.kb-t{font-size:var(--fs-head);font-weight:var(--w-bold);letter-spacing:-.012em}
.kb-h .meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px}
.kb-body{font-size:var(--fs-body);line-height:1.55}
.kb-body .md{white-space:normal}
.kb-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--s4) var(--s5)}
.kb-links{display:grid;gap:4px}
.kb-link{display:grid;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-m);color:var(--ink);text-decoration:none}
.kb-link:hover{border-color:var(--ink-3);color:var(--ink)}
.kb-link b{font-weight:600;font-size:var(--fs-small)}
.kb-crumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 5px;font-size:var(--fs-small);min-width:0;overflow-wrap:anywhere}
.kb-crumbs [aria-current]{font-weight:var(--w-bold)}
.kb-crumbs span[aria-hidden]{color:var(--ink-3)}
.kb-crumbs a{color:var(--ink-2);text-decoration:none}
.kb-crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.kb-sub{padding:var(--s3) var(--s2) 4px;font-size:var(--fs-meta);font-weight:600;color:var(--ink-3)}
.kb-more{margin:var(--s2)}
.kb-phone{display:none}
.kb-file{max-width:none}
.kb-file .kb-body,.kb-doc .kb-body{max-width:760px}
.kb-doc{display:grid;gap:var(--s2)}
.kb-edit{display:grid;gap:var(--s3)}
.kb-edit textarea{width:100%}
.kb-img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-m)}
.kb-codewrap{min-width:0}
.kb-code{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r-m);font-size:var(--fs-small);line-height:1.5;overflow:hidden}
.kb-code pre{margin:0;padding:var(--s2) var(--s3);font:inherit;font-family:var(--mono,monospace);line-height:1.5;white-space:pre;tab-size:4}
.kb-gutter{text-align:right;color:var(--ink-3);border-right:1px solid var(--line);user-select:none}
.kb-src{overflow-x:auto}
.kb-code-at{position:absolute;left:0;right:0;height:1.5em;background:var(--hover);box-shadow:inset 2px 0 0 var(--ink);pointer-events:none}
.kb-tl{list-style:none;display:grid}
.kb-tl li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:2px var(--s3);padding:7px 0;border-top:1px solid var(--line);font-size:var(--fs-small)}
.kb-tl li>.meta:last-child{grid-column:2}
@container (max-width:640px){
  .kb{grid-template-columns:minmax(0,1fr)}
  .kb[data-in] .kb-side{display:none}
  .kb:not([data-in]) .kb-main{display:none}
  .kb-side{border-right:0}
  .kb-back{display:inline-flex}
  .kb-phone{display:block}
  .kb-note{padding:var(--s3) 14px var(--s6)}
}

/* ---- slack door setup: guided steps ---- */
.slk{display:grid;gap:var(--s2);margin-top:var(--s3)}
.sl-steps{display:grid;gap:var(--s2);margin:0;padding-left:1.3em}
.sl-step{display:grid;gap:6px}
.sl-step:not([data-on]):not([data-done]) b{color:var(--ink-3);font-weight:var(--w-med)}
.sl-step[data-done] b{font-weight:var(--w-med)}
.sl-man{position:relative}
.sl-man pre{margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);font-size:var(--fs-micro);overflow:auto;max-height:160px}
.sl-man .copy{position:absolute;top:4px;right:4px;opacity:1}

/* ---- inbox ---- */
.inb-new{flex:none;padding:0 6px;border-radius:var(--r-s);font-size:var(--fs-micro);font-weight:var(--w-bold);color:var(--ci);background:color-mix(in oklch,var(--c) 14%,transparent)}

/* Deck: the DDJ-FLX4 remote. Cursor and hud sit outside the page, so morph leaves them alone. */
.top-deck{align-self:center;font-size:var(--fs-meta);padding:1px 8px;border-radius:var(--r-s);color:var(--ink-3);text-decoration:none;white-space:nowrap}
.top-deck[data-on]{color:var(--good-ink);background:color-mix(in oklch,var(--good) 14%,transparent)}
.top-deck[data-armed]{color:var(--on-ink);background:var(--bad);font-weight:var(--w-bold)}
.deck-cursor{position:fixed;z-index:55;pointer-events:none;border:2px solid var(--info,var(--ink));border-radius:var(--r-s);transition:left .07s,top .07s,width .07s,height .07s}
.deck-cursor[data-armed]{border-color:var(--bad)}
.deck-hud{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:61;pointer-events:none;max-width:min(40rem,90vw);padding:7px 14px;border-radius:var(--r-m);background:var(--ink);color:var(--on-ink);font-size:var(--fs-small);box-shadow:var(--e2)}
.deck-single{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:60;background:var(--bg,#fff)}
.deck-single-ask{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);border:0;cursor:pointer;color:#fff;font-size:1.6rem;font-weight:600;width:100%}
.deck-hud[hidden]{display:none}
.deck-hud[data-tone=bad]{background:var(--bad)}
.deck-hud[data-tone=warn]{background:var(--warn)}
.deck-arm{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3);border:1px solid var(--line-2);border-radius:var(--r-m)}
.deck-arm[data-armed]{border-color:var(--bad)}
.deck-ctl{white-space:nowrap}
.deck-ctl[data-hot]{color:var(--good-ink)}
.deck-page-raw{max-height:16rem;overflow:auto;font-size:var(--fs-meta);white-space:pre}
.deck-page-raw [data-miss]{color:var(--warn-ink)}

/* ==== redesign 2026-11-04: changed rules from the Claude Design handoff (~/designs/ui-redesign-pack/handoff). Same class names; later wins. ==== */
/* ===== check + switch — replaces the .check / .checks rules ===== */
.check{display:inline-flex;gap:8px;align-items:flex-start;cursor:pointer;font-size:var(--fs-small)}
.check input[type=checkbox]:not(.switch){appearance:none;flex:none;margin:2px 0 0;width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:4px;background:var(--surface);display:grid;place-content:center;cursor:pointer}
.check input[type=checkbox]:not(.switch):checked{background:var(--ink);border-color:var(--ink)}
.check input[type=checkbox]:not(.switch):checked::after{content:"";width:8px;height:4px;border-left:1.8px solid var(--on-ink);border-bottom:1.8px solid var(--on-ink);transform:translateY(-1px) rotate(-45deg)}
.check .field-h{display:block}
.checks{display:grid;gap:var(--s2);margin:var(--s3) 0}
/* NEW: a switch is a checkbox with class="switch" role="switch"; it saves itself */
.switch{appearance:none;margin:0;flex:none;position:relative;width:34px;height:20px;border-radius:var(--r-pill);background:var(--line-2);cursor:pointer;transition:background-color .15s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:light-dark(#fff,oklch(96% 0 0));box-shadow:0 1px 2px oklch(0% 0 0 / .25);transition:transform .15s}
.switch:checked{background:var(--ink)}
.switch:checked::after{transform:translateX(14px);background:var(--on-ink)}
.switch:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.switch,.switch::after{transition:none}}

/* ===== 3. chips, section heads, page header ===== */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink-2);font-size:var(--fs-meta);font-weight:var(--w-med);white-space:nowrap} /* NEW */
.chip[data-tone]{color:var(--ci);background:color-mix(in oklch,var(--c) 11%,transparent)}
.chip[data-out]{background:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.nb{display:inline-flex;align-items:center;height:18px;padding:0 7px;border:1px dashed var(--line-2);border-radius:var(--r-pill);color:var(--ink-3);font-size:10.5px;font-weight:var(--w-med);line-height:1;white-space:nowrap;vertical-align:.08em}
.sec-h{display:flex;align-items:baseline;gap:var(--s2) var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.sec-t{font-size:var(--fs-small);font-weight:var(--w-bold);letter-spacing:0}
.sec-n{font-size:var(--fs-meta);color:var(--ink-3)}
.sec[data-level="1"]>.sec-h{margin-bottom:var(--s3);padding-bottom:0;border-bottom:0}
.sec[data-level="1"]>.sec-h .sec-t{font-size:var(--fs-lead);letter-spacing:-.01em}
.ph-title{font-size:var(--fs-head);font-weight:var(--w-bold);letter-spacing:-.018em;line-height:1.25}
.ph-lead{font-size:var(--fs-lead);color:var(--ink-2);line-height:1.5}
.ph-lead[data-tone]::before{display:none}   /* the state goes in a small eyebrow above the title (.ph-state), not a square before the sentence */
.ph-state{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-meta);font-weight:var(--w-med);color:var(--ci)}  /* NEW */
.stat .stat-v{font-size:var(--fs-figure);font-weight:var(--w-bold);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.meter{height:6px;border-radius:var(--r-pill);background:var(--sunken)}
.meter>i{border-radius:inherit;background:var(--c,var(--ink-2))}
.card{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}  /* NEW, used by Settings blocks, Agents, Usage */
.empty{color:var(--ink-3);font-size:var(--fs-small)}

/* ===== 4. settings blocks — replaces the "---- block ----" section ===== */
/* A level-1 section's .blks become one card. Rows: name + hint stacked left, state and control right. */
.blks{display:grid;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden}
.sec[data-level="1"]>.sec-h+.blks{border-top:1px solid var(--line)}
.blk{padding:14px 20px;border-bottom:1px solid var(--line);min-width:0}
.blk:last-child{border-bottom:0}
.blk-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px var(--s4);min-height:var(--ctl)}
.blk-t{grid-column:1;font-size:var(--fs-body);font-weight:var(--w-med)}
.blk-s{grid-column:1;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.45}
.blk-a{grid-column:2;grid-row:1 / span 2;display:flex;gap:var(--s2);align-items:center}
.blk-a .input{width:240px}
.blk-b{display:grid;gap:var(--s3);margin-top:var(--s3);font-size:var(--fs-small)}
.blk-save{display:flex;align-items:center;gap:var(--s2);padding:12px 20px;border-top:1px solid var(--line);background:var(--bg);font-size:var(--fs-meta);color:var(--ink-3)} /* NEW use: the footer of a group of text fields */
.blk-save .btn{margin-left:auto}
.blk-saved{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-meta);color:var(--good-ink)}  /* NEW: "Saved" flash beside a switch, 1.5 s */
details.blk>summary .blk-t::after{border-color:var(--ink-3)}
.note{border-radius:var(--r-l);padding:var(--s4) var(--s5)}

/* ===== 5. comms: list, head, strip — replaces the matching rules in the "---- comms ----" block ===== */
.cm{grid-template-columns:var(--cm-w,272px) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.cm-show{display:none}                                   /* moves into the head's filter menu (.cm-menu) */
.cm-side{background:var(--bg);border-right:1px solid var(--line)}
.cm-filters{display:grid;gap:2px;padding:12px 10px 8px;border-bottom:0}
.cm-newbtn{justify-content:flex-start;gap:10px;height:34px;padding:0 10px;border:0;background:none;color:var(--ink);font-size:var(--fs-small)}
.cm-newbtn:hover{background:var(--hover)}
.cm-filters>.input{height:34px;border-color:transparent;background:none;padding-left:32px;font-size:var(--fs-small)}
.cm-filters>.input:focus-visible{background:var(--surface);border-color:var(--focus)}
.cm-scope{padding:14px 10px 6px;margin:0;font-size:var(--fs-meta);font-weight:var(--w-med);color:var(--ink-3)}
.cm-scope .seg{display:none}                              /* Recent / All: folded into search ("all" when you type) */
.cm-tl{padding:4px 10px}
.cm-tl .lr{border-top:0}
.cm-tl .lr-in{margin:0;padding:8px 10px;border-radius:var(--r-m)}
.cm-tl .lr-in:hover{background:var(--hover)}
.cm-tl .lr-in[aria-current]{background:var(--hover);box-shadow:none}
.cm-tl .lr-t{font-size:var(--fs-small)}
.cm-tl .lr-t b{font-weight:var(--w-med)}
.cm-tl .lr-t .meta{font-size:var(--fs-micro)}
.cm-tl .lr-x{-webkit-line-clamp:1;margin-top:1px;font-size:var(--fs-meta);color:var(--ink-3)}
.cm-st{font-weight:var(--w-med);color:var(--ci)}
.cm-side-f{display:none}                                  /* "All messages" moves into the search menu */
.cm-head{display:flex;align-items:center;gap:var(--s3);min-height:52px;padding:0 var(--s3) 0 var(--s5);border-bottom:0}
.cm-tt{flex:1;flex-wrap:nowrap;gap:var(--s2)}
.cm-title{font-size:var(--fs-body);font-weight:var(--w-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-count{display:none}                                   /* in the title menu */
.cm-tools{gap:2px}
.cm-tools .cm-find{display:none}                          /* opens from the search icon, over the head */
.cm-head[data-find] .cm-tools .cm-find{display:block;width:240px}
.cm-people{display:flex;flex-wrap:nowrap;gap:0;font-size:var(--fs-meta)}  /* becomes the avatar stack (.avs) */
.cm-menu{position:absolute;top:48px;right:12px;z-index:20;display:grid;min-width:240px;padding:6px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--e2);font-size:var(--fs-small)}
.cm-menu .check{height:34px;align-items:center;padding:0 10px;border-radius:var(--r-s)}
.cm-menu .check:hover{background:var(--hover)}
.cm-head{position:relative}
.cm-title-b{display:inline-flex;align-items:center;gap:4px;min-width:0;height:32px;padding:0 8px;margin-left:-8px;border:0;border-radius:var(--r-s);background:none;color:var(--ink);cursor:pointer}
.cm-title-b:hover,.cm-title-b[aria-expanded=true]{background:var(--hover)}
.cm-title-b .ic{flex:none;width:14px;height:14px;color:var(--ink-3)}
.cm-tools .btn[aria-expanded=true],.cm-tools .btn[aria-pressed=true]{background:var(--hover)}
.cm-tools .avs{margin-right:var(--s2)}
.cm-menu>.meta{padding:4px 10px;color:var(--ink-3)}
.cm-menu>.btn{justify-content:flex-start}
.cm-search{position:relative;display:grid}
.cm-search>.ic{position:absolute;left:10px;top:9px;width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.cm-search>.input{height:34px;border-color:transparent;background:none;padding-left:32px;font-size:var(--fs-small)}
.cm-search>.input:hover{background:var(--hover)}
.cm-search>.input:focus-visible{background:var(--surface);border-color:var(--focus)}
.cm-scope-b{height:22px;padding:0 6px;border:0;border-radius:var(--r-s);background:none;color:var(--ink-3);font:inherit;cursor:pointer}
.cm-scope-b:hover{background:var(--hover);color:var(--ink)}
.cm-newbtn{justify-content:flex-start}
.cm-msgs{padding:var(--s2) var(--s5) var(--s4)}
.cm-day{margin:var(--s5) auto var(--s3);justify-content:center}
.cm-day::before,.cm-day::after{display:none}
.cm-ev{background:none;color:var(--ink-3);font-size:var(--fs-meta)}
/* status strip: one tab on top of the composer card */
.cm-strip{display:flex;align-items:center;gap:var(--s3);min-height:34px;max-width:calc(var(--chat-col) - 28px);margin:0 auto;padding:0 6px 0 14px;border:1px solid var(--line);border-bottom:0;border-radius:var(--r-l) var(--r-l) 0 0;background:var(--bg);font-size:var(--fs-meta);color:var(--ink-2)}
.cm-strip[data-open]{display:grid;padding:6px 6px 4px 14px}
.cm-line{display:inline-flex;align-items:center;gap:7px;min-height:28px;min-width:0;font-size:var(--fs-meta)}
.cm-strip:not([data-open]) .cm-line:nth-child(n+3){display:none}   /* closed: two agents, then +N */
.cm-strip:not([data-open]) .cm-line:not([data-key=asks]) .cm-line-a,.cm-strip:not([data-open]) .cm-line[data-key=helper]{display:none}
.cm-line[data-key=asks] .cm-line-a{opacity:1}   /* a question's Answer is always there */
.cm-line-x{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-line-x b{font-family:var(--mono);font-size:11.5px}
.cm-line-a{margin-left:auto;opacity:0}
.cm-line:hover .cm-line-a,.cm-line:focus-within .cm-line-a{opacity:1}
@media (hover:none){.cm-line-a{opacity:1}}
.cm-strip-t{margin-left:auto;flex:none}                    /* the open/close chevron */
.cm-strip[data-open] .cm-strip-t{position:absolute;top:4px;right:6px}
.cm-strip{position:relative}
.cm-strip:not([data-open]) .cm-line{flex:0 1 auto}
.cm-strip:not([data-open]) .cm-line-m{display:none}
.cm-strip-n{flex:none;color:var(--ink-3)}
.cp>.cm-strip{width:calc(100% - 28px);max-width:calc(var(--chat-col) - 28px);margin:0 auto;box-sizing:border-box}
.cm-hint{display:none}
.cm-home-t{font-size:30px;letter-spacing:-.025em;text-align:center}
.cm-home-l{display:none}
.cm-needs-t{font-size:var(--fs-meta);font-weight:var(--w-med);color:var(--ink-3)}
@container (max-width:640px){
  .cm-tools .avs{display:none}
  .cm{grid-template-columns:minmax(0,1fr)}                 /* one pane: the list, or the open conversation */
  .cm-head{min-height:52px;padding:0 6px}
  .cm-back{display:inline-flex;width:44px;height:44px;margin:0}
  .cm-msgs{padding:8px 18px 12px}
  .cm-strip:not([data-open]) .cm-line:nth-child(n+2){display:none}   /* phone: one line, then +N */
}

/* ===== 6. composer — replaces the "---- viewer ----" .cp* rules (the viewer rules above them stay) ===== */
.cp{position:relative;display:grid;gap:0;padding:0 var(--s5) var(--s4);background:none}
.cp-box{position:relative;display:grid;max-width:var(--chat-col);width:100%;margin:0 auto;border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--e1)}
.cp-box:focus-within{border-color:color-mix(in oklch,var(--ink-3) 70%,var(--line-2));box-shadow:var(--e1),0 0 0 3px var(--accent-bg)}
.cp-t{min-height:52px;padding:14px 16px 4px;font-size:var(--fs-read);line-height:1.5}
.cp-bar{display:flex;align-items:center;gap:4px;padding:6px 8px 8px}
.cp-model{height:28px;margin:0;padding:0 6px;border:0;border-radius:var(--r-s);background:none;color:var(--ink-3);font-size:var(--fs-meta)}
.cp-model:hover{background:var(--hover);color:var(--ink)}
.cp-hint{display:none}                                     /* the words go to the send button's title */
.cp-send{margin-left:auto;flex:none;min-width:0;width:32px;height:32px;padding:0;border-radius:50%}
.cp-send:disabled{background:var(--line-2);border-color:var(--line-2);color:var(--surface);opacity:1}
.cp-to{height:28px;padding:0 8px 0 4px;border:0;border-radius:var(--r-pill);background:var(--sunken);font-size:var(--fs-meta);color:var(--ink-2)}
.cp-to:hover{background:var(--hover);color:var(--ink)}
.cp-to b{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.cp-reply{border-left:0;padding:8px 12px 0 16px;color:var(--ink-3);font-size:var(--fs-meta)}
.cp-file{border-radius:var(--r-m);background:var(--sunken);border:0}
@container (max-width:640px){.cp{padding:0 10px 12px}.cp-box{border-radius:22px}.cp-t{font-size:16px}}  /* 16px stops iOS zooming on focus */

/* ===== 7. messages — replaces the "---- message ----" rules .msg ... .msg-rc (files and viewer stay) ===== */
.msg{position:relative;max-width:var(--chat-col);margin:0 auto;padding:6px 0 4px;border-radius:var(--r-m);min-width:0}
.msg+.msg{margin-top:var(--s4)}
.msg[data-cont]{margin-top:var(--s2);padding-top:0}
.msg-h{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-bottom:6px;font-size:var(--fs-small);min-height:20px}
.msg-h .ref[data-kind=agent]{font-family:var(--mono);font-size:12.5px}
.msg-src{border:0;padding:0;color:var(--ink-3);font-size:var(--fs-meta)}
.msg-to{color:var(--ink-3);font-size:var(--fs-meta)}
/* time and actions leave the head: they sit under the message and show on hover/focus */
.msg-end{display:flex;align-items:center;gap:0;height:28px;margin:2px 0 -6px -6px;opacity:0;transition:opacity .12s}
.msg-end .btn[data-kind=icon]{width:28px;height:28px;color:var(--ink-3)}
.msg-end .btn[data-kind=icon]:hover{color:var(--ink)}
.msg-end .btn[data-done]{color:var(--good)}
.msg-time{margin-left:auto}
.msg-h .msg-time{margin-left:4px;color:var(--ink-3);opacity:0;transition:opacity .12s}
.msg:hover .msg-h .msg-time{opacity:1}
.msg>.msg-end time{display:none}
.msg[data-who=me]>.msg-end{margin:2px -6px -6px 0}
.msg[data-who=me]>.msg-end time{display:inline;order:-1;margin-right:6px;margin-left:0}
.msg-q .ic{width:14px;height:14px;color:var(--ink-3)}
.msg-q{display:flex;align-items:center;gap:6px;max-width:100%}
.cp-sp{flex:1}
.cp-send .ic{width:18px;height:18px}
.cp-send>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.msg:hover .msg-end,.msg:focus-within .msg-end{opacity:1}
.msg-end time{margin-left:6px}
.msg-reply{opacity:1}
.msg[data-cont]>.msg-h{position:static;min-height:0}
.msg[data-cont]>.msg-h{display:none}
@media (hover:none){.msg-end{opacity:1}}
.msg[data-who=me]{display:flex;flex-direction:column;align-items:flex-end;padding:4px 0}
.msg[data-who=me]>.msg-h{display:none}                     /* "You to a7c31" goes: the To is in the composer and in the hover row */
.msg[data-who=me]>.msg-b{max-width:min(78%,560px);padding:10px 16px;border-radius:var(--r-xl);background:var(--sunken);box-shadow:none}
.msg-q{border-left:0;padding:0;margin:0 0 8px;color:var(--ink-3);font-size:var(--fs-meta)}
.msg-rc{margin-top:6px;font-size:var(--fs-meta);color:var(--ink-3)}
.msg-thumb,.msg-file{border-color:var(--line);border-radius:var(--r-l)}
.msg-thumb img{border-radius:var(--r-s)}

/* ===== agents (Now) cards — replaces .ac rules ===== */
.agents{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s4)}
.ac{display:grid;gap:10px;padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.ac[data-attn]{border-color:color-mix(in oklch,var(--accent) 35%,var(--line))}
.ac-dl,.ac-f{display:none}            /* consumer: Asked / Said / model line fold behind the card's link to the agent page */
:root[data-dev] .ac{padding:var(--s3) var(--s4)}
:root[data-dev] .ac-dl,:root[data-dev] .ac-f{display:revert}
.ac-kill{opacity:0}
.ac:hover .ac-kill,.ac:focus-within .ac-kill{opacity:1}

/* ===== table — tighter heads, hover row ===== */
.tbl th{height:30px;font-size:var(--fs-micro);font-weight:var(--w-med);color:var(--ink-3)}
.tbl td{height:var(--row-tight)}
.tbl tbody tr:hover td{background:var(--hover)}

/* ===== icon: NEW, used by kit.js icon() ===== */
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.av{position:relative;display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-family:var(--mono);font-size:9.5px;font-weight:600} /* NEW: agent monogram */
.av>.sd{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;box-shadow:0 0 0 2px var(--surface)}
.av[data-size=s]{width:20px;height:20px;font-size:8.5px}
.avs{display:flex}
.av{text-decoration:none;font-family:var(--font);font-size:10px;letter-spacing:0}
.av>span{line-height:1}
.av>.sd{border-radius:50%;padding:0;margin:0}
.av>.sd::before,.av>.sd::after{display:none}
.av[data-hue="0"]{background:color-mix(in oklab,#6366f1 16%,var(--surface));color:#4338ca}
.av[data-hue="1"]{background:color-mix(in oklab,#0ea5e9 16%,var(--surface));color:#0369a1}
.av[data-hue="2"]{background:color-mix(in oklab,#10b981 16%,var(--surface));color:#047857}
.av[data-hue="3"]{background:color-mix(in oklab,#f59e0b 18%,var(--surface));color:#b45309}
.av[data-hue="4"]{background:color-mix(in oklab,#ec4899 14%,var(--surface));color:#be185d}
.av[data-hue="5"]{background:color-mix(in oklab,#8b5cf6 16%,var(--surface));color:#6d28d9}
:root[data-theme=dark] .av[data-hue]{color:var(--ink)}
.cm-tools .btn{position:relative}
.avs{gap:4px}
/* the avatar stack's hover list: every agent in the thread, each a link (the person, 2026-11-04, post 11040058518b) */
.avs-w{position:relative;display:inline-flex}
/* The list opens as pills dropping down in a line under the stack. The pop's padding-top is the bridge the pointer crosses;
   the scrolling is on the inner list so nothing clips the bridge. */
.avs-pop{position:absolute;top:100%;right:0;z-index:25;display:none;padding-top:6px}
.avs-w:hover>.avs-pop,.avs-w:focus-within>.avs-pop{display:block}
.avs-pop-l{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-height:min(60vh,420px);overflow-y:auto;padding:2px 4px 8px 12px;font-size:var(--fs-small)}
.avs-pop-h,.avs-pop-r{animation:avs-drop .18s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i) * 22ms)}
.avs-pop-h{padding:2px 10px;border-radius:var(--r-full,999px);background:var(--surface);border:1px solid var(--line);color:var(--ink-3);white-space:nowrap}
.avs-pop-r>.ref{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:var(--r-full,999px);background:var(--surface);box-shadow:var(--e1,0 1px 2px rgb(0 0 0/.08));color:var(--ink);text-decoration:none;white-space:nowrap}
.avs-pop-r>.ref:hover,.avs-pop-r>.ref:focus-visible{background:var(--hover);border-color:var(--line-2,var(--line))}
.avs-pop-r .sl{margin-left:6px;color:var(--ink-3);font-size:var(--fs-meta)}
@keyframes avs-drop{from{opacity:0;transform:translateY(calc(var(--i) * -8px - 6px)) scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.avs-pop-h,.avs-pop-r{animation:none}}

/* ---- the developer route keeps its dense log: app.js sets data-dev on the root when this route isn't the app ---- */
:root[data-dev] .msg{max-width:900px;padding:8px 10px;border-radius:var(--r-m)}
:root[data-dev] .msg+.msg{margin-top:0}
:root[data-dev] .msg:hover{background:var(--hover)}
:root[data-dev] .msg[data-who=person]{background:var(--sunken)}
:root[data-dev] .msg[data-who=sys]{font-size:inherit}
:root[data-dev] .msg-r{font-weight:var(--w-bold)}
:root[data-dev] .cm-day{display:block;max-width:900px;margin:var(--s3) auto var(--s1);padding:0 10px}
:root[data-dev] .cm-day::before,:root[data-dev] .cm-day::after{content:none}
:root[data-dev] .cm-tl .lr-t b{flex:initial;font-weight:var(--w-bold)}
:root[data-dev] .cm-tl .lr-x{-webkit-line-clamp:1;line-height:inherit}
/* Deck tour: floats above the page, and inside a modal window while one is open */
.deck-tour{position:fixed;left:16px;bottom:16px;z-index:62;width:min(560px,calc(100vw - 32px));padding:var(--s3);background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:0 8px 28px rgba(0,0,0,.28);text-align:left}
.deck-tour .dt-top{display:flex;align-items:center;gap:var(--s2);cursor:move;touch-action:none;user-select:none}
.deck-tour .dt-btns{margin-left:auto;display:flex;gap:2px}
.deck-tour .dt-btns button{background:none;border:0;color:var(--link);font:inherit;font-size:var(--fs-meta);padding:2px 6px;cursor:pointer;border-radius:var(--r-s)}
.deck-tour .dt-btns button:hover{background:var(--hover)}
.deck-tour .dt-t{margin:var(--s2) 0 2px;font-size:var(--fs-head)}
.deck-tour .dt-p{margin:0}
.deck-tour .dt-h{margin:var(--s1) 0 0;color:var(--warn-ink);font-size:var(--fs-meta)}
.deck-tour .dt-h[hidden]{display:none}
.dt-deck{display:block;width:100%;height:auto;margin-top:var(--s2)}
.dt-deck text{font:600 8.5px var(--font);fill:var(--quiet);text-anchor:middle;pointer-events:none}
.dt-deck .dt-body{fill:var(--sunken);stroke:var(--line-2)}
.dt-deck .dt-head{font-size:8px;letter-spacing:.04em}
.dt-c rect,.dt-c circle{fill:var(--surface);stroke:var(--line-2)}
.dt-c .dt-in{fill:var(--sunken)}
.dt-dim circle,.dt-dim rect{fill:none;stroke:var(--line)}
.dt-dim text{font-size:7px;opacity:.6}
.dt-c[data-hit] rect,.dt-c[data-hit] circle{fill:var(--line-2)}
.dt-c[data-want] rect,.dt-c[data-want] circle{fill:var(--info);stroke:var(--info);animation:dt-pulse 1s ease-in-out infinite}
.dt-c[data-want] .dt-in{fill:var(--surface)}
.dt-c[data-want] text{fill:var(--on-ink)}
@keyframes dt-pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.dt-c[data-want] rect,.dt-c[data-want] circle{animation:none}}
.dt-c[data-k=browse][data-want] text{fill:var(--info-ink)}
/* The app's tour: floats above the page, moves out of the way of what it marks */
.tour-w{position:fixed;z-index:62;width:min(360px,calc(100vw - 32px));padding:var(--s3) var(--s4);background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-l);box-shadow:0 8px 28px rgba(0,0,0,.28);text-align:left}
.tour-w .tw-top{cursor:move;touch-action:none;user-select:none}
.tour-w .tw-t{margin:2px 0 var(--s1);font-size:var(--fs-head)}
.tour-w .tw-p{margin:0 0 var(--s3)}
.tour-w .tw-btns{display:flex;gap:var(--s1);align-items:center}
.tour-w .tw-end{margin-right:auto}
.tour-w [hidden]{display:none}
.tour-ring{position:fixed;z-index:61;pointer-events:none;border:2px solid var(--info);border-radius:var(--r-m);animation:tour-pulse 1.2s ease-in-out infinite}
.tour-ring[hidden]{display:none}
@keyframes tour-pulse{50%{box-shadow:0 0 0 5px color-mix(in oklch,var(--info) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){.tour-ring{animation:none}}
button.more-i{background:none;border:0;font:inherit;text-align:left;cursor:pointer;width:100%}

/* Agents: every agent, one row; the headers sort */
.toolbar select.input{width:auto;min-width:0;max-width:100%}
.ag-w{margin-top:var(--s3)}
.ag .ag-s{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:baseline;border-radius:2px}
.ag .ag-s:hover{color:var(--ink)}
.ag .ag-s:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ag th[aria-sort] .ag-s{color:var(--ink);font-weight:600}
.ag th.num .ag-s{flex-direction:row-reverse}
.ag .ag-tm{min-width:9rem}
.ag .ag-m{max-width:7rem;overflow:hidden;text-overflow:ellipsis}
.ag th:first-child,.ag td:first-child{position:sticky;left:0;background:var(--bg,var(--surface));z-index:1}
/* The header stays in view. Narrow: the table is its own scroll box, sideways and down. Wide enough to fit: the page scrolls, under the top bar. */
.ag-w{--bar:var(--bar-h);position:sticky;top:var(--bar);max-height:calc(100dvh - var(--bar) - 56px);overflow:auto}
.ag th{position:sticky;top:0;z-index:2;background:var(--bg);padding-top:6px;box-shadow:inset 0 -1px 0 var(--line)}
.ag th:first-child{z-index:3}
@media (min-width:1340px){.ag-w{position:static;max-height:none;overflow:visible}.ag th{top:var(--bar-h)}}
.ag tbody tr:hover td:first-child{background:var(--hover)}

/* ---- consumer first run: three steps down the left, the log of what's happening beside them ---- */
.wt{max-width:1120px}
.wt-h{font-size:var(--fs-head);font-weight:var(--w-bold);margin:var(--s2) 0 var(--s1)}
.wt-lead{max-width:var(--measure);color:var(--ink-2);margin:0 0 var(--s4);text-wrap:pretty}
.wt-steps{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0 0 var(--s5);padding:0;font-size:var(--fs-small);color:var(--ink-3)}
.wt-steps li{display:flex;align-items:center;gap:var(--s2)}
.wt-n{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--line-2);border-radius:50%;font-size:var(--fs-meta);font-variant-numeric:tabular-nums}
.wt-steps [aria-current]{color:var(--ink);font-weight:var(--w-bold)}
.wt-steps [aria-current] .wt-n{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.wt-steps [data-done]{color:var(--ink-2)}
.wt-steps [data-done] .wt-n{border-color:var(--good-ink);color:var(--good-ink)}
.wt-g{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s5);align-items:start}
.wt-m{display:grid;gap:var(--s4);min-width:0}
.wt-card{display:grid;gap:var(--s3);min-width:0;padding:var(--s4) var(--s5) var(--s5);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.wt-card>p{max-width:var(--measure);color:var(--ink-2);text-wrap:pretty}
.wt-t{font-size:var(--fs-title);font-weight:var(--w-bold)}
.wt-card .signin{margin:0}
.wt-card .signin .signin{margin-top:var(--s2);padding:0;border:0;background:none}
.wt-foot{position:sticky;bottom:0;z-index:1;display:flex;align-items:center;gap:var(--s2);padding:var(--s3) 0;background:var(--bg);border-top:1px solid var(--line)}
.wt-next{margin-left:auto}
.wt>.wt-g>.alog{position:sticky;top:calc(var(--bar-h) + 17px)}
@media (max-width:900px){.wt-g{grid-template-columns:minmax(0,1fr)}.wt>.wt-g>.alog{position:static}.wt-card{padding:var(--s3) var(--s4) var(--s4)}}
.checks.cards{gap:var(--s2)}
.checks.cards>.check{padding:10px var(--s3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.checks.cards>.check:hover{border-color:var(--line-2)}
.checks.cards>.check:has(input:checked){border-color:var(--ink-3);background:var(--hover)}

/* ---- a button whose action is running ---- */
.btn[data-busy]{gap:6px}
.btn[data-busy]:disabled{opacity:.75;cursor:progress}
.btn[data-busy]::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---- the activity log: every click on the setup pages, and how it went ---- */
.alog{display:grid;gap:var(--s2);min-width:0;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-l);background:var(--sunken);font-size:var(--fs-small)}
.st .alog{margin-top:var(--s4)}
.alog-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:var(--ctl-s)}
.alog-e{color:var(--ink-3);text-wrap:pretty}
.alog-l{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);max-height:min(60vh,520px);overflow:auto}
.alog-r{display:grid;grid-template-columns:14px minmax(0,1fr);gap:0 var(--s2);align-items:baseline}
.alog-t{overflow-wrap:anywhere}
.alog-w{grid-column:2;font-size:var(--fs-micro);color:var(--ink-3);font-variant-numeric:tabular-nums}
.alog-i{justify-self:center;font-size:var(--fs-meta);line-height:1}
.alog-r[data-state=ok] .alog-i::before{content:"\2713";color:var(--good-ink)}
.alog-r[data-state=bad] .alog-i::before{content:"\2715";color:var(--bad-ink)}
.alog-r[data-state=bad] .alog-t{color:var(--bad-ink)}
.alog-r[data-state=info] .alog-i::before{content:"\2013";color:var(--ink-3)}
.alog-r[data-state=info] .alog-t{color:var(--ink-2)}
.alog-r[data-state=busy] .alog-i::before{content:"";display:inline-block;width:10px;height:10px;border:1.5px solid var(--ink-2);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.alog-r[data-state=busy] .alog-t{font-weight:var(--w-med)}
@media (prefers-reduced-motion:reduce){.btn[data-busy]::before,.alog-r[data-state=busy] .alog-i::before{animation-duration:3s}}

/* ---- Settings: a list of sections to jump to, each a heading over its cards ---- */
.set-b{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--s6,32px);align-items:start;margin-top:var(--s5)}
.set-n{position:sticky;top:calc(var(--bar-h) + 17px);display:grid;gap:2px}
.set-n button{display:flex;align-items:center;gap:var(--s2);padding:6px var(--s2);border:0;border-radius:var(--r-s);background:none;color:var(--ink-2);font:inherit;font-size:var(--fs-small);text-align:left;cursor:pointer}
.set-n button>span:first-child{flex:1;min-width:0}
.set-n button:hover{background:var(--hover);color:var(--ink)}
.set-rule{width:100%;margin:var(--s2) 0;border:0;border-top:1px solid var(--line)}
.set-s{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6,32px);min-width:0}
.set-s>.sec{scroll-margin-top:64px}
.set-s .blks+.blks{margin-top:var(--s3)}
.set-sub{margin:var(--s5) 0 var(--s2);font-size:var(--fs-body);font-weight:var(--w-semi,600);color:var(--ink)}
.set-logo-none{display:inline-block;width:40px;height:40px;border:1px dashed var(--line-2);border-radius:var(--r-m)}
.blk[data-key=api-keys] .signin>.frow:first-child{display:none}
.blk[data-key=codex-row] .signin{padding:0;border:0;background:none}
@media (max-width:760px){
  .set-b{grid-template-columns:minmax(0,1fr)}
  .set-n{position:static;display:flex;flex-wrap:wrap;gap:var(--s1)}
  .set-rule{display:none}
}
.share-text{font-size:var(--fs-small);color:var(--ink-2)}

/* ---- feedback: the screen frozen and grey, boxes drawn straight on it, a small card for the comment ---- */
dialog.fb[open] .tour-w{display:none}
dialog.fb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden}
dialog.fb::backdrop{background:rgb(0 0 0 / .38)}
.fb-s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.fb-c{display:block;max-width:100%;max-height:100%;cursor:crosshair;touch-action:none}
.fb-c.fb-full{width:100%;height:100%;max-width:none;max-height:none}
.fb-none{display:flex;flex-direction:column;align-items:center;gap:var(--s2);max-width:420px;padding:var(--s4);text-align:center;background:var(--surface);border-radius:var(--r-l);box-shadow:var(--e2)}
.fb-hint{position:absolute;top:16px;left:50%;translate:-50% 0;padding:6px 12px;border-radius:var(--r-m);background:rgb(0 0 0 / .72);color:#fff;font-size:var(--fs-small);pointer-events:none}
.fb-hint[hidden]{display:none}
.fb-card{position:absolute;right:16px;bottom:16px;width:min(380px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-l);box-shadow:var(--e2)}
.fb-card[data-left]{right:auto;left:16px}
.fb-title{flex:1}
.fb-gap{flex:1}
.fb-t{width:100%;min-height:72px;resize:vertical}
.fb-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fb-r:empty,.fb-r:has(>label[hidden]:only-child){display:none}
.fb-r>.meta{flex:1 1 240px;min-width:0}
.fb-card>.meta{margin:0}
.fb-sent,.new-ver{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:10px 12px;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-l);box-shadow:var(--e2)}

/* Design: the session's screen, as text */
.dscreen { height: 24rem; overflow: auto; margin: 0 0 var(--s2); padding: var(--s3); font-size: .78rem; line-height: 1.3; white-space: pre; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.dkeys { margin-top: var(--s2); }
.dpage > * + * { margin-top: var(--s5); }
/* Design page polish (the person, 2026-11-04, post 110401029c28): a readable width, closed accounts set back, designs as cards */
.dpage { max-width: 1080px; }
.dacct tr[data-closed] td { color: var(--ink-3); }
.dacct tr[data-closed] .meter { opacity: .55; }
.dacct td { vertical-align: middle; }
.dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); border: 0; }
.dcard { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s3); min-height: 120px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); transition: box-shadow .15s, border-color .15s; }
.dcard:hover { border-color: var(--line-2, var(--line)); box-shadow: var(--e2); }
.dcard-a { display: grid; gap: 4px; color: var(--ink); text-decoration: none; min-width: 0; }
.dcard-t { font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dcard-a:hover .dcard-t { text-decoration: underline; text-underline-offset: 2px; }
.dcard-f { display: flex; gap: var(--s2); align-items: center; justify-content: space-between; }
.dpage .ph-lead { margin-bottom: 0; }
.dpage .note { max-width: none; }
.dname { flex: 1; }
.dright { margin-left: auto; }
.dname { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.dfoot { margin-top: var(--s2); }
.dhere { display: block; }
.dacct .dacts { text-align: right; }
.dacct .dacts .frow { justify-content: flex-end; flex-wrap: nowrap; }
.dmeter { display: flex; align-items: center; gap: 8px; min-width: 7rem; }
.dmeter .meter { flex: 1; }
.dcode { margin-top: var(--s2); }
@media (max-width: 720px) {
  .dacct thead { display: none; }
  .dacct, .dacct tbody, .dacct tr { display: block; }
  .dacct tr { padding: 8px; border-top: 1px solid var(--line); }
  .dacct td, .dacct tr:last-child td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; white-space: normal; }
  .dacct td::before { content: attr(data-label); color: var(--ink-3); font-size: var(--fs-meta); }
  .dacct .dacts .frow { flex-wrap: wrap; }
  .dright { margin-left: 0; }
}
/* The hive's own name and logo, from Settings */
.brand,.dt-brand{min-width:0}
.dt-brand{display:inline-flex;align-items:center}
.brand-name{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-logo{height:34px;width:auto;max-width:120px;margin-right:var(--s2);object-fit:contain;flex:none}
.set-logo{height:40px;max-width:120px;margin-right:0}
/* /btw aside: a plain transcript above the composer, no boxes */
.ba{position:relative;display:grid;gap:4px;margin:0 var(--s4);padding:8px 0 4px;border-top:1px solid var(--line)}
.ba-top{position:absolute;top:6px;right:0;display:flex;gap:12px;font-size:var(--t-s,.8em)}
.ba-l{color:var(--ink-3);text-decoration:none}.ba-l:hover{color:var(--ink);text-decoration:underline}
.ba-m{max-height:min(32vh,280px);overflow:auto;overscroll-behavior:contain;display:grid;gap:8px}
.ba-p b{display:block}
.ba-p .md>:first-child,.ba-p p{margin-top:0}.ba-p .md>:last-child,.ba-p p{margin-bottom:0}
.ba-in{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:6px 0}
.ba-in:focus-visible{outline:none;border-bottom-color:var(--focus)}
.viewer-s>.md{max-width:110ch;margin:0 auto}
.viewer-s>.viewer-t{position:sticky;bottom:0;float:right}
.viewer-s>.md :is(p,li,td,th,blockquote){white-space:normal}   /* a file is written hard-wrapped: one newline is a space there, as in any Markdown reader */
.cp>.cp-err{width:100%;max-width:var(--chat-col);margin:0 auto 6px}

/* ---- top-bar pills that open a page (usage-total, ae5b4): the anchor covers the pill, so the pill keeps its look above ---- */
.top-pill{position:relative}
.top-pill-go{position:absolute;inset:-1px;border-radius:inherit}
.top-pill:has(.top-pill-go:hover){background:var(--hover)}
.top-pill-go:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
/* ---- Now page: running agents as rows (a7613, feedback) ---- */
.nowtbl td{vertical-align:middle;white-space:nowrap}
.nowtbl td.nt-do{white-space:normal}
.nowtbl tr[data-attn] td{background:color-mix(in srgb,var(--bad) 6%,transparent)}
.nowtbl tbody tr:hover td{background:var(--hover)}
.nowtbl .nt-a{font-weight:var(--w-med)}
.nowtbl .nt-th{max-width:12rem;overflow:hidden;text-overflow:ellipsis}
.nowtbl .nt-st{color:var(--ink-2)}
.nowtbl tr[data-tone=good] .nt-st{color:var(--good)}
.nowtbl tr[data-attn] .nt-st{color:var(--bad)}
.nowtbl .nt-do{width:100%;max-width:0}
.nowtbl .nt-now,.nowtbl .nt-ask{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nowtbl .nt-ask{margin-top:1px}
.nowtbl .nt-x{text-align:right;width:1%}
@media (max-width: 720px) {
  .nowtbl thead{display:none}
  .nowtbl,.nowtbl tbody,.nowtbl tr{display:block}
  .nowtbl tr{padding:8px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:2px 12px}
  .nowtbl td,.nowtbl tr:last-child td{padding:0;border:0;white-space:normal}
  .nowtbl .nt-do{grid-column:1/-1;max-width:none;width:auto}
  .nowtbl .nt-th,.nowtbl .nt-m{display:none}
}

.brand-hex{width:34px;height:34px;margin-right:var(--s2)}
.brand{font-size:18px;gap:2px}

/* threads: a3100 — Show toggles, list sections, kinds marked in messages, the "Open for you" card (comms-threads) */
.tm-show{display:flex;flex-wrap:wrap;gap:4px;padding:6px 10px 2px}
.tm-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:none;color:var(--ink-3);font:inherit;font-size:var(--fs-meta);font-weight:var(--w-med);cursor:pointer}
.tm-chip:hover{background:var(--hover);color:var(--ink)}
/* on vs off at a glance (110401319d61): on is filled with a check, off is an empty ring in grey text */
.tm-chip[aria-pressed=true]{background:color-mix(in oklch,var(--accent) 13%,transparent);border-color:color-mix(in oklch,var(--accent) 45%,transparent);color:var(--ink)}
.tm-chip[aria-pressed=true]:hover{background:color-mix(in oklch,var(--accent) 20%,transparent)}
.tm-chip i{position:relative;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line-2);flex:none}
.tm-chip[aria-pressed=true] i{background:var(--accent);border-color:var(--accent)}
.tm-chip[aria-pressed=true] i::after{content:"";position:absolute;left:3.2px;top:1px;width:3px;height:6px;border:solid var(--on-accent,#fff);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.tm-show-says{flex-basis:100%;margin:2px 2px 0}
.tm-sec+.tm-sec{margin-top:var(--s2)}
.tm-sec-h{display:flex;align-items:center;gap:4px;margin:0;padding:8px 10px 4px;font-size:var(--fs-meta);font-weight:var(--w-med);color:var(--ink-3)}
.tm-sec[data-sec=need]>.tm-sec-h{color:var(--accent-ink)}
.tm-arch-b,.tm-fold{width:100%;border:0;background:none;font:inherit;font-size:var(--fs-meta);text-align:left;cursor:pointer;border-radius:var(--r-s)}
.tm-arch-b:hover,.tm-fold:hover{background:var(--hover);color:var(--ink)}
.tm-arch-b .ic,.tm-fold .ic{width:14px;height:14px}
.tm-secs .empty:empty{display:none}

/* each message says what kind it is: For you has the accent bar, Agent comms is quieter and says so */
.msg[data-who=agent][data-show=you]::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--accent)}
.msg[data-show=comms]>.msg-b{color:var(--ink-2)}
.msg[data-show=comms]>.msg-h::after{content:"agent comms";margin-left:6px;padding:0 6px;border:1px dashed var(--line-2);border-radius:var(--r-pill);font-size:11px;line-height:16px;color:var(--ink-3);white-space:nowrap}
:root[data-dev] .msg[data-show=comms]>.msg-h::after{content:none}

/* the "Open for you" card, above the composer */
.tm-card{max-width:var(--chat-col);width:calc(100% - 2 * var(--s5));margin:var(--s2) auto var(--s2);padding:10px 12px;border-radius:var(--r-l);background:var(--accent-bg);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 35%,transparent);font-size:var(--fs-small)}
.tm-card-h{display:flex;align-items:center;gap:8px;color:var(--accent-ink)}
.tm-card-h .ic{width:16px;height:16px}
.tm-card-h .meta{color:var(--ink-3)}
.tm-done{margin-left:auto}
.tm-items{display:grid;gap:2px;margin:6px 0 0;padding:0;list-style:none}
.tm-items li{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;min-height:30px}
.tm-who{font-weight:var(--w-bold);color:var(--ink)}
.tm-say{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.tm-items li[data-ask] .tm-say{font-weight:var(--w-med)}
.tm-act{display:flex;gap:2px}
.tm-card>.meta{margin:4px 0 0}
@media (max-width:720px){
  .tm-card{width:calc(100% - 24px)}
  .tm-items li{grid-template-columns:1fr auto;row-gap:0}
  .tm-say{grid-column:1/-1;grid-row:2;white-space:normal}
}

.cm-grip{position:absolute;top:0;bottom:0;right:-4px;width:8px;cursor:col-resize;z-index:5;touch-action:none}
.cm-grip::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:var(--accent);opacity:0;transition:opacity .15s}
.cm-grip:hover::after,.cm-grip:focus-visible::after,.cm-grip[data-on]::after{opacity:.6}
@container (max-width:640px){.cm-grip{display:none}}

.panel-grip{position:fixed;top:0;bottom:0;right:min(var(--panel-w,640px),100%);width:8px;margin-right:-4px;z-index:41;cursor:col-resize;touch-action:none;outline:none}
.panel-grip::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:transparent;transition:background .12s}
.panel-grip:hover::after,.panel-grip:focus-visible::after,.panel-grip.on::after{background:var(--accent)}
@media (max-width:700px){.panel-grip{display:none}}
.viewer-s:has(.viewer-pdf){padding:0;overflow:hidden}
.viewer-pdf{display:block;width:100%;height:100%;border:0;background:var(--bg)}

/* Long reports and the on-demand contents rail. */
.rc-sec{margin:var(--s3) 0 0;border-top:1px solid var(--line)}
.rc-sec>summary::-webkit-details-marker{display:none}
.rc-sec>summary::before{content:"▾";flex:none;width:12px;color:var(--ink-3);font-size:var(--fs-meta);font-weight:400}
.rc-sec:not([open])>summary::before{content:"▸"}
.rc-rail-tabs{display:flex;gap:0;padding:6px var(--s2) 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.rc-rail-tabs button{position:relative;height:30px;padding:0 8px;border:0;background:none;color:var(--ink-2);font-size:var(--fs-meta);cursor:pointer;white-space:nowrap}
.rc-rail-tabs button:hover{color:var(--ink)}
.rc-rail-tabs button[aria-pressed=true]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.rc-rail-b{flex:1;min-height:0;overflow:auto;padding:var(--s2)}
.rc-ri{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 var(--s2);width:100%;min-height:28px;padding:4px 6px;border:0;border-radius:var(--r-s);background:none;color:var(--ink);font-size:var(--fs-small);line-height:1.3;text-align:left;cursor:pointer}
.rc-ri:hover{background:var(--hover)}
.rc-ri small{grid-column:1/-1;font-size:var(--fs-meta);color:var(--ink-3);overflow-wrap:anywhere}
.rc-find-q{width:100%;height:30px;margin-bottom:var(--s2)}
.rc-sec>summary{display:flex;align-items:baseline;gap:var(--s2);padding:7px 0 5px;cursor:pointer;list-style:none}
.rc-sec>summary> :is(h1,h2,h3,h4,h5,h6){margin:0}
.msg[data-report]>.msg-h,:root[data-dev] .msg[data-report]>.msg-h{display:flex;position:sticky;top:0;right:auto;left:auto;z-index:4;min-height:30px;background:var(--surface);padding:2px 0}
.msg[data-report][data-cont]>.msg-h>:not(.msg-end){display:revert}
.msg[data-report] :is(h1,h2,h3,h4,h5,h6,.rc-block,.rc-fig){scroll-margin-top:44px}
dialog.rc-rail{position:fixed;inset:0 0 0 auto;margin:0;width:min(360px,100%);height:100dvh;max-height:100dvh;max-width:100%;border:0;border-left:1px solid var(--line);background:var(--surface);color:var(--ink);padding:var(--s3);font-size:var(--fs-small)}
dialog.rc-rail[open]{display:flex;flex-direction:column;gap:var(--s2)}
.rc-rail-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.rc-ri{overflow-wrap:anywhere}
@media (hover:none){.rc-ri,.rc-rail-tabs button{min-height:44px}}