/* CeciKnows web UI v2 (docs/web-ui-v2-manifest.md). Tokens live in tokens.css.
   Ported from web/app/index.html with the canvas "Redesign v1" changes. */
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
html,body{height:100%}
body{margin:0;background:var(--surface);color:var(--i);font:14px/1.45 var(--ui);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea,select{font-family:inherit}
a{color:var(--ac)}
/* --acb is the faint border accent, which made a focus ring visible only if you
   already knew where it was (review, 2026-09-26). Keyboard focus is the only way
   some people navigate, so it takes the full accent and a little more weight. */
:focus-visible{outline:2.5px solid var(--ac);outline-offset:2px}
#app{height:100%}

/* ---- the shell: rail | grip | chat column | grip | Monitor ---- */
.app{display:grid;height:100%;grid-template-rows:100%}
.app.resizing{user-select:none}
.grip{cursor:col-resize;background:transparent;position:relative;touch-action:none}
.grip:after{content:"";position:absolute;top:0;bottom:0;left:2px;width:2px;border-radius:1px;background:transparent;transition:background .12s ease}
.grip:hover:after,.grip.on:after,.grip:focus-visible:after{background:var(--acb)}
.griph{flex:none;height:8px;cursor:row-resize;position:relative;touch-action:none}
.griph:after{content:"";position:absolute;left:10px;right:10px;top:3px;height:2px;border-radius:1px;background:transparent;transition:background .12s ease}
.griph i{display:none}
.griph:hover:after,.griph.on:after,.griph:focus-visible:after{background:var(--acb)}
@media(prefers-reduced-motion:reduce){.grip:after,.griph:after{transition:none}}
.sidebtn{width:34px;height:34px;flex:none;border:0;border-radius:8px;background:transparent;color:var(--m);display:grid;place-items:center;cursor:pointer;padding:0}
.sidebtn:hover{background:var(--surface);color:var(--i)}

/* ---- col 1: the rail ---- */
.col1{grid-column:1;grid-row:1;position:relative;background:var(--ground);display:flex;flex-direction:column;padding:16px 12px 12px;min-height:0;min-width:0;overflow:hidden}
.brand{display:flex;align-items:center;gap:8px;padding:0 0 0 6px;min-height:36px}
.brand .logo{width:150px;height:28px;display:block;background:var(--wordmark) left center/contain no-repeat}
.brand .wm{font:600 18.5px var(--serif);color:var(--i)}
.rule{height:1px;background:linear-gradient(90deg,var(--ac),transparent);opacity:.7;margin:8px 6px 18px}
.csearch{display:flex;align-items:center;gap:7px;margin:0 0 8px;padding:0 9px;height:30px;border:1px solid var(--line);border-radius:6px;color:var(--f)}
.csearch:focus-within{border-color:var(--acb);color:var(--m)}
.csearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 12.5px var(--ui);color:var(--i);padding:0}
.csearch input::placeholder{color:var(--f)}
.csearch input::-webkit-search-cancel-button{display:none}
.csearch button{border:0;background:transparent;color:var(--f);font-size:15px;line-height:1;padding:0 2px;cursor:pointer}
.chats{flex:1;overflow-y:auto;min-height:0;margin:0 -4px;padding:0 4px}
.chat{position:relative;display:flex;align-items:flex-start;gap:6px;width:100%;color:var(--m);padding:6px 7px;border-radius:6px;font-size:13px;margin-top:7px}

/* Report channels (manifest, FROZEN 2026-09-28). A channel is not a conversation: no rename,
   no delete, and a dot that says what it is. Unread lifts the row's ink and colours the dot —
   and the COUNT is drawn beside it, because hover does not exist on a phone and a count only
   reachable by hovering is a count half the readers never see. */
.chat.channel .rdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--f);margin-right:7px;vertical-align:1px;flex:none}
.chat.channel.alerts .rdot{background:var(--warn)}
.chat.channel.unread .rdot{background:var(--ac)}
.chat.channel.unread .tt{color:var(--i);font-weight:600}
.chat.channel .ncount{align-self:center;flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--ac);color:var(--surface);font:600 10.5px var(--ui);display:grid;place-items:center}
.chsep{margin:12px 7px 2px;font:600 10px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--f)}
.chats .chat+.chat:before{content:"";position:absolute;left:7px;top:-4px;width:38%;height:1px;background:var(--line)}
.chat .open{flex:1;min-width:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.chat .open .tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat .open .dd{font:400 10.5px var(--mono);color:var(--f)}
.chat .snip{display:-webkit-box;margin-top:2px;font-size:11.5px;line-height:1.35;color:var(--f);white-space:normal;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chat .snip i{font-style:normal;color:var(--ac);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;margin-right:6px}
.chat .ren,.chat .del{flex:none;opacity:0;border:0;background:transparent;color:var(--f);font-size:12px;cursor:pointer;padding:0 2px;line-height:1;margin-top:2px}
.chat:hover{background:var(--surface)}
.chat:hover .ren,.chat.on .ren{opacity:.7}.chat:hover .del,.chat .del:focus-visible,.chat .ren:focus-visible{opacity:1}
.chat .ren:hover{color:var(--ac);opacity:1}.chat .del:hover{color:var(--bad)}
@media (hover:none){.chat .ren,.chat .del{opacity:.45}}
.chat.on{background:var(--surface);color:var(--i)}
.chat input.rename{flex:1;min-width:0;border:1px solid var(--acb);border-radius:4px;background:var(--surface);color:var(--i);font:inherit;font-size:13px;padding:2px 6px;outline:0}
.chats .empty{padding:6px 7px;font-size:12.5px;color:var(--f)}
.divide{height:1px;background:var(--line);margin:16px 7px 14px}
.shdr{display:flex;align-items:center;padding:0 7px 8px;font:600 9.5px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--f)}
.insts .empty{padding:4px 7px;font-size:12.5px;color:var(--f)}
.inst{display:flex;align-items:center;gap:10px;padding:6px 7px;border-radius:6px;margin-bottom:1px;width:100%}
.inst .ic,.scope .ic{background:hsl(var(--h,40) 55% 45% / .22);border:1px solid hsl(var(--h,40) 55% 45% / .55);color:hsl(var(--h,40) 65% 66%)}
html[data-theme="light"] .inst .ic,html[data-theme="light"] .scope .ic{background:hsl(var(--h,40) 55% 45% / .18);border-color:hsl(var(--h,40) 50% 45% / .5);color:hsl(var(--h,40) 60% 30%)}
.inst .ic{width:22px;height:22px;border-radius:4px;display:grid;place-items:center;flex:none;font:600 9.5px var(--mono)}
.inst .txt{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.inst .nm{font-size:13px;color:var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inst .facts{font-size:10.5px;color:var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.inst .dot{margin-left:auto;width:5px;height:5px;border-radius:50%;background:var(--good);flex:none}
.inst.dead .dot{background:var(--bad)}
.inst.on{background:var(--surface)}.inst.on .nm{color:var(--i)}.inst.on .facts{color:var(--m)}
.inst .isw{flex:none;width:22px;height:20px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--f);font-size:11px;line-height:1;cursor:pointer;padding:0}
.inst .isw:hover{color:var(--ac);border-color:var(--acb)}
.inst.on .isw.sw{visibility:hidden}
.inst .isw.ctl.on{color:var(--ontext);background:var(--ac);border-color:var(--ac)}
/* The report channel, as an icon ON the chip (operator: "put it on the chip on the left side
   bar"). Unread colours it and shows a count on its corner — drawn, not hover-only, because a
   phone has no hover and a count you cannot reach is a count half the readers never see. */
.inst .isw.rep{position:relative;overflow:visible}
.inst .isw.rep.unread{color:var(--ac);border-color:var(--acb)}
.inst .isw.rep.on{color:var(--ontext);background:var(--ac);border-color:var(--ac)}
.inst .isw.rep .rn{position:absolute;top:-6px;right:-6px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;
  background:var(--ac);color:var(--surface);font:700 9px var(--ui);display:grid;place-items:center;pointer-events:none}

.you{display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);padding-top:12px;margin-top:10px}
.youin{display:flex;align-items:center;gap:10px;padding:4px 7px;border-radius:6px;cursor:pointer;border:0;background:transparent;flex:1;min-width:0;text-align:left;color:inherit;font:inherit}
.youin:hover{background:var(--surface)}
.youin .av{width:26px;height:26px;border-radius:50%;border:1px solid var(--acb);display:grid;place-items:center;font:600 11px var(--serif);color:var(--ac);flex:none}
.youin .t{min-width:0}
.youin .t b{display:block;font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.youin .t span{display:block;font:400 10.5px var(--mono);color:var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ybtn{flex:none;border:1px solid var(--line);background:transparent;border-radius:6px;padding:5px 10px;font:500 12px var(--ui);color:var(--i);cursor:pointer;line-height:1.4;display:grid;place-items:center}
.ybtn:hover{color:var(--ac);border-color:var(--acb)}
.ybtn.gear{padding:5px 7px;color:var(--f)}

/* ---- col 2 ---- */
.col2{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--ground);padding:8px}
.chatbox{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.chdr{display:flex;align-items:center;gap:12px;padding:13px 24px;border-bottom:1px solid var(--line);flex:none;min-height:51px}
.chdr .sidebtn{width:30px;height:30px;margin-left:-10px;border:1px solid var(--line)}
.scope{display:flex;align-items:center;gap:9px;font:500 13.5px var(--ui);min-width:0;white-space:nowrap}
.scope>span:last-child{overflow:hidden;text-overflow:ellipsis}
.chdr .tag{flex:none}
.scope .ic{width:19px;height:19px;border-radius:4px;display:grid;place-items:center;font:600 8.5px var(--mono);flex:none}
.chdr .tag{font:600 9px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--m);border:1px solid var(--line);border-radius:3px;padding:3px 7px}
.chdr .title{flex:1;min-width:0;font-size:13px;color:var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.montog{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:6px;padding:5px 11px;font:500 12px var(--ui);color:var(--m);background:transparent;cursor:pointer;flex:none}
.montog[aria-pressed="true"]{border-color:var(--acb);color:var(--ac);background:var(--acw)}
.sq{width:11px;height:11px;border:1.5px solid currentColor;border-radius:2px;position:relative;flex:none}
.sq:after{content:"";position:absolute;right:0;top:-1.5px;bottom:-1.5px;width:4px;background:currentColor;border-radius:0 1px 1px 0}
.menubtn{display:none}
/* What a channel is for, under the header: a quiet line, not a banner — it is a standing fact
   about where you are, so it must not compete with the reports themselves. */
.chnote{margin:0;padding:8px 24px;border-bottom:1px solid var(--line);font:400 12px var(--ui);color:var(--m);flex:none}
.stream{flex:1;overflow-y:auto;padding:28px 0 180px;min-height:0}
.turn{max-width:880px;margin:0 auto 26px;padding:0 32px}
.daychip{display:flex;justify-content:center;margin:6px auto 18px}
.daychip span{font:400 11.5px var(--msg);color:var(--f);background:var(--glass);border-radius:999px;padding:4px 12px;opacity:.75;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.q{display:flex;justify-content:flex-end}
.q .qw{display:flex;flex-direction:column;align-items:flex-end;max-width:78%;min-width:0}
.q .bub{background:var(--raised);border-radius:14px 14px 3px 14px;padding:8px 14px;font:400 13px/1.5 var(--msg);white-space:pre-wrap;word-break:break-word;max-width:100%}
.q .bub .ts{float:right;margin:8px -4px -4px 10px;font:400 11px/1 var(--msg);color:var(--f);white-space:nowrap}
.tail{display:flex;align-items:center;gap:4px;margin:4px 0 0 2px}
.q .qw>.tail{align-self:flex-start}
.ib{width:26px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--f);cursor:pointer;padding:0;line-height:1;flex:none}
.ib svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ib:hover{color:var(--ac);border-color:var(--acb)}
.ib.done{color:var(--ontext);background:var(--ac);border-color:var(--ac)}
.a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start}
.a>.body{min-width:0}
.a .pending{color:var(--f);font-size:12px;padding-top:4px}
.a .err{color:var(--bad);font-size:13px;padding-top:3px}

/* ---- the working mark and working line: VERBATIM from web/app/index.html (manifest V3) ---- */
.a .av{position:relative;width:40px;height:14px;margin-top:9px;border:0;border-radius:0;transform:translateZ(0);backface-visibility:hidden}
.a .av .body{position:absolute;inset:0;background:var(--mark) center/contain no-repeat;filter:saturate(.6) brightness(.72) contrast(1.25)}
.a .av .sw2,.a .av:before,.a .av:after{display:none}
.a .pending .draft{color:var(--m);animation:shimmer 1.6s ease-in-out infinite}
.a .thinking{display:flex;align-items:center;gap:8px;color:var(--f);font-size:11.5px;font-style:italic;padding-top:6px;min-height:28px}
/* the working line carries a light sweep too, in step with the mark's upper light */
.a .thinking>span{background:linear-gradient(105deg,var(--f) 0%,var(--f) 38%,var(--i) 50%,var(--f) 62%,var(--f) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:t-sweep 2.6s linear infinite}
@keyframes t-sweep{0%{background-position:220% 0}100%{background-position:-20% 0}}
.a .av.busy .body{will-change:transform,filter;animation:g-breathe 2.6s ease-in-out infinite,g-ember 2.6s ease-in-out infinite}
.a .av.busy:before{display:block;content:"";position:absolute;inset:-6px -10px;border-radius:50%;background:radial-gradient(ellipse,var(--acw),transparent 65%);animation:g-glow 2.6s ease-in-out infinite}
.a .av.busy:after{display:block;content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 0%,transparent 14%,rgba(255,255,255,.85) 20%,#fff 25%,rgba(255,255,255,.85) 30%,transparent 36%,transparent 64%,rgba(255,255,255,.85) 70%,#fff 75%,rgba(255,255,255,.85) 80%,transparent 86%,transparent 100%);background-size:200% 100%;-webkit-mask:var(--mark) center/contain no-repeat,linear-gradient(180deg,#000 0%,#000 30%,transparent 72%);-webkit-mask-composite:source-in;mask:var(--mark) center/contain no-repeat,linear-gradient(180deg,#000 0%,#000 30%,transparent 72%);mask-composite:intersect;animation:g-sweep 2.6s linear infinite}
.a .av.busy .sw2{display:block;position:absolute;inset:0;background:linear-gradient(105deg,transparent 0%,transparent 14%,rgba(255,255,255,.85) 20%,#fff 25%,rgba(255,255,255,.85) 30%,transparent 36%,transparent 64%,rgba(255,255,255,.85) 70%,#fff 75%,rgba(255,255,255,.85) 80%,transparent 86%,transparent 100%);background-size:200% 100%;-webkit-mask:var(--mark) center/contain no-repeat,linear-gradient(180deg,transparent 28%,#000 70%,#000 100%);-webkit-mask-composite:source-in;mask:var(--mark) center/contain no-repeat,linear-gradient(180deg,transparent 28%,#000 70%,#000 100%);mask-composite:intersect;animation:g-sweep2 3.9s linear infinite}
@keyframes g-breathe{0%,100%{transform:scale(.95)}50%{transform:scale(1.04)}}
@keyframes g-ember{0%,100%{filter:saturate(.6) brightness(.72) contrast(1.25)}50%{filter:saturate(1.3) brightness(1.0) contrast(1.15) sepia(.28)}}
@keyframes g-ember-silver{0%,100%{filter:saturate(.3) brightness(1.02) contrast(1.05)}50%{filter:saturate(1.0) brightness(1.3) contrast(1.0) sepia(.24)}}
html:not([data-theme="light"]) .a .av .body{filter:saturate(.3) brightness(1.08) contrast(1.05)}
html:not([data-theme="light"]) .a .av.busy .body{animation-name:g-breathe,g-ember-silver}
html:not([data-theme="light"]) .greet .mark{filter:saturate(.3) brightness(1.08) contrast(1.05)}
@keyframes g-glow{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes g-sweep{0%{background-position:200% 0}100%{background-position:0% 0}}
@keyframes g-sweep2{0%{background-position:200% 0}100%{background-position:0% 0}}
.a .thinking .dots:after{content:'…';animation:dots 1.6s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'…'}}
@media(prefers-reduced-motion:reduce){.a .av.busy .body,.a .av.busy:before,.a .av.busy:after,.a .av.busy .sw2,.a .thinking .dots:after,.a .thinking>span{animation:none}.a .thinking>span{color:var(--f);background:none}}
.a .thinking .dots:after{content:'…';animation:dots 1.6s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'…'}}
.a .draftbody{font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--m);padding-top:4px}
@keyframes shimmer{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.a .pending .draft{animation:none}}
/* ---- end verbatim ---- */

/* ---- composer ---- */
.comp{position:absolute;left:0;right:0;bottom:0;padding:12px 32px 20px;pointer-events:none}
.comp .cbox{pointer-events:auto;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.col2.fresh .stream{display:none}
.col2.fresh .comp{position:static;flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:12vh;pointer-events:auto}
.col2.fresh .comp .cbox{box-shadow:none}
.greet{max-width:720px;margin:0 auto 22px;padding:0 24px;color:var(--f);font-size:14px;text-align:center;line-height:1.55}
.greet .mark{display:block;width:180px;max-width:60%;aspect-ratio:898/311;margin:0 auto 18px;background:var(--mark) center/contain no-repeat}
html:not([data-theme="light"]) .greet .mark{filter:saturate(.3) brightness(1.08) contrast(1.05)}
.cbox{position:relative;width:100%;max-width:880px;margin:0 auto;border:1px solid var(--line);border-radius:11px;background:var(--input)}
/* the command palette (R3, MANIFEST_SLASH_COMMAND_SURFACE.md): typing "/" offers what can run.
   It sits above the box, never sends by itself, and a pick lands in the box to be read first. */
.pal{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:30;max-height:min(46vh,340px);overflow:auto;
  border:1px solid var(--line);border-radius:12px;background:var(--raised);box-shadow:0 12px 32px rgba(0,0,0,.35);padding:5px;pointer-events:auto}
.pal button{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--i);
  border-radius:8px;padding:7px 9px;cursor:pointer;font:inherit}
.pal button.on{background:var(--glass)}
.pal .c{font:500 12.5px var(--mono);white-space:nowrap;color:var(--ac)}
.pal .d{flex-grow:1;min-width:0;font-size:12.5px;color:var(--m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal .s{flex:none;font:600 9.5px var(--ui);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:2px 7px;color:var(--f)}
.pal .s.tap{color:var(--lock);border-color:rgba(143,180,232,.4)}
.pal .s.manage{color:var(--ac);border-color:var(--acb)}
.pal .palfoot{padding:6px 9px 4px;font:400 11px var(--mono);color:var(--f);border-top:1px solid var(--hairline);margin-top:4px}
@media(max-width:1000px){.pal .d{display:none}.pal .palfoot{display:none}}
.cbox:focus-within{border-color:var(--acb)}
.cbox textarea{display:block;width:100%;border:0;background:transparent;color:var(--i);font:400 15px/1.5 var(--ui);padding:16px 18px 10px;resize:none;outline:none;min-height:72px;max-height:260px;border-radius:11px 11px 0 0}
.cbox textarea::placeholder{color:var(--f)}
.ctools{display:flex;align-items:center;gap:7px;padding:8px 9px 9px 12px;border-top:1px solid var(--hairline)}
.tool{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:5px;padding:0 9px;height:28px;font:500 11.5px var(--ui);color:var(--m);background:transparent;white-space:nowrap;cursor:pointer;position:relative}
.tool .cv{color:var(--f);font-size:9px}
.tool.plus{padding:0 8px;font-size:14px;line-height:1;cursor:default}
.tool .dt{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}
.tool .dt.auto{background:var(--ac)}.tool .dt.hybrid{background:var(--m)}
/* the mode is not known yet: the default dot is green, which is the manual colour,
   so an unknown state has to be its own faint one rather than borrow the safest */
.tool .dt.unknown{background:transparent;box-shadow:inset 0 0 0 1px var(--f)}
.tool.monbtn{display:none}
.ctools .spacer{flex:1}
.tool.model{border-color:var(--acb);color:var(--ac);font-weight:600;cursor:default}
.modewrap{position:relative;display:flex}
.menu{position:absolute;bottom:calc(100% + 8px);left:0;width:260px;max-width:calc(100vw - 40px);background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.35);z-index:15}
.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--i);font:500 12.5px var(--ui);padding:8px 10px;border-radius:6px;cursor:pointer}
.menu button small{display:block;font:400 11px var(--ui);color:var(--f);margin-top:2px;white-space:normal}
.menu button:hover{background:var(--raised)}.menu button[aria-pressed="true"]{color:var(--ac)}
.snd{width:28px;height:28px;border-radius:6px;background:var(--ac);color:var(--ontext);display:grid;place-items:center;flex:none;margin-left:2px;border:0;cursor:pointer}
.snd[disabled]{opacity:.45;cursor:default}

/* ---- cards (drawn from the JSON blocks) ---- */
.card{margin-top:2px;overflow:hidden;max-width:100%;min-width:0;font-family:var(--msg);overflow-wrap:anywhere}
.card.box{background:var(--block);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:10px 14px 8px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.card+.card{margin-top:10px}
.card .h{display:flex;align-items:baseline;gap:10px;padding:6px 0 9px;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.turn.first .card[data-family="nl"] .h,.turn.first .card[data-family="other"] .h{display:none}
.card .h .v{font:600 9.5px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--ac)}
.card .h .s{font-size:12.5px;color:var(--m)}
.card .h .t{margin-left:auto;font:400 10.5px var(--mono);color:var(--f)}
.card .rl{margin:0;padding:11px 0 0;font:500 15px var(--ui)}
.card .rl.warn{color:var(--bad)}
.card b,.card strong{font-weight:600}
.card .blocks{padding:6px 0 0;font-size:13px;line-height:1.5}
.card .blocks>:first-child{margin-top:0}
.card .blocks>:last-child{margin-bottom:0}
.card p{margin:0 0 8px;white-space:pre-line}
.card .sec{padding:11px 0 0}
.card .sh{margin:0 0 7px;font:600 9px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--f)}
.card table{width:100%;border-collapse:collapse}
.card th{font:600 9px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--f);text-align:right;padding:6px 0;border-bottom:1px solid var(--line)}
.card th:first-child,.card td:first-child{text-align:left}
.card td{padding:8px 0;text-align:right;font:400 12.5px var(--mono);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--hairline);vertical-align:top}
.card tr:last-child td{border-bottom:0}
.card table.md,.card table.rich{margin:6px 0 12px;width:auto;max-width:100%}
.card table.md th,.card table.rich th{text-align:left;padding:6px 14px 6px 0;font:600 10.5px var(--ui);letter-spacing:.12em}
.card table.md td,.card table.rich td{text-align:left;font:400 13px var(--ui);padding:6px 14px 6px 0}
.card table.md td:first-child,.card table.rich td:first-child{font-weight:600;color:var(--i);white-space:nowrap}
.tscroll{overflow-x:auto;max-width:100%}
.card .cap{margin:6px 0 0;font-size:11.5px;color:var(--f)}
.card dl.kv{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 16px;font:400 12.5px var(--mono)}
.card dl.kv dt{color:var(--m)}.card dl.kv dd{margin:0}
.card ul.list{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6}
.card ol{margin:6px 0 10px;padding-left:22px}
.card ol li{margin:3px 0}
.card ul.dots{margin:6px 0 10px;padding-left:20px;list-style:none}
.card ul.dots li{position:relative;margin:4px 0;line-height:1.55}
.card ul.dots li:before{content:"";position:absolute;left:-16px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--ac)}
.card .callout{margin:10px 0;padding:10px 14px;border-left:3px solid var(--ac);background:var(--acw);border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.55;color:var(--i);white-space:pre-line}
.card blockquote{margin:8px 0;padding:8px 12px;border-left:2px solid var(--acb);background:var(--acw)}
.card blockquote.sum{margin:12px 0 0;padding:9px 12px;font-size:13.5px;line-height:1.55;white-space:pre-line}
.card .hd{margin:14px 0 6px;font:600 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.card .hd.l1{font-size:13px}.card .hd.l3,.card .hd.l4{font-size:11px;color:var(--m)}
.card hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.card code{font:400 .92em var(--mono);color:var(--i)}
.card pre{margin:0;padding:10px 12px;background:var(--raised);border-radius:6px;font:400 12px/1.5 var(--mono);overflow-x:auto;white-space:pre}
.card pre.ledger{margin:10px 0 0}
.card .cmd{margin:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--raised);overflow:hidden;max-width:100%}
.card .cmd .cmdh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px 7px 12px;border-bottom:1px solid var(--hairline);font:400 12px var(--msg);color:var(--m)}
.card .cmd .cmda{display:flex;gap:6px}
.card .cmd pre{margin:0;padding:10px 12px;background:transparent;border-radius:0;font:400 12.5px/1.5 var(--mono)}
.card .cmd.wrap pre{white-space:pre-wrap;word-break:break-all}
.card .keys{display:flex;flex-direction:column;gap:6px;padding:12px 0 2px}
.card .krow{display:flex;gap:6px}
.card .kb{flex:1 1 0;min-width:0;text-align:center;padding:11px 10px;border-radius:10px;font:600 13px var(--ui);letter-spacing:.02em;border:1px solid var(--glassline);background:var(--glass);color:var(--i);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;display:flex;align-items:center;justify-content:center}
.card .kb:hover{background:var(--glasshi)}
.card .kb[disabled]{opacity:.5;cursor:not-allowed}
.card .decided{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--hairline);font-size:13px;color:var(--m);line-height:1.5}
.card .decided .bad{color:var(--bad)}
.card .cfoot{display:flex;flex-direction:column;gap:6px;padding:12px 0 2px;margin-top:10px}
.card .pager{display:flex;gap:6px;align-items:stretch}
.card .pager button,.card .pager .pl{flex:1 1 0;display:flex;align-items:center;justify-content:center;font:600 13px var(--ui);padding:11px 10px;border-radius:10px;border:1px solid var(--glassline);background:var(--glass);color:var(--i);cursor:pointer}
.card .pager .pl{cursor:default;font:500 12.5px var(--mono)}
.card .pager button[disabled]{opacity:.4;cursor:default}
.card .ts{display:block;text-align:right;padding:4px 0 0;font:400 11px/1 var(--msg);color:var(--f);white-space:nowrap}
.legacy{font-size:13px;line-height:1.5}
.legacy .card{background:var(--block);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:10px 14px 8px}
.legacy .card[data-family="nl"]{background:none;border:0;padding:0}
.legacy .rd{margin:0;padding:6px 0 0;font-size:13px;color:var(--m);line-height:1.5}
.legacy .rich{padding:6px 0 0;white-space:pre-wrap}
.legacy .kb{pointer-events:none;opacity:.5}
.legacy .cmd .copy{display:none}
.pup,.card .pos{color:var(--good)}.pdown,.card .neg{color:var(--bad)}

/* ---- the instance panel ---- */
.ipanel{flex:none;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-height:170px}
.ipanel .ph{display:flex;align-items:center;gap:10px;padding:10px 14px 8px;flex:none;border-bottom:1px solid var(--hairline)}
.ipanel .ph .ic{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font:600 10px var(--mono);color:var(--ac);border:1px solid var(--acb);background:var(--acw);flex:none}
.ipanel .ph .nm{font:600 13.5px var(--ui);display:block}
.ipanel .ph .facts{font:400 11px var(--mono);color:var(--f)}
.ipanel .ph .sp{flex:1}
.pill{font:600 9.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:3px 9px;border:1px solid var(--line);color:var(--m);white-space:nowrap}
.pill.live{color:var(--good);border-color:var(--good)}.pill.dead{color:var(--bad);border-color:var(--bad)}
.iptabs{display:flex;gap:4px;margin:8px 12px;padding:4px;background:var(--raised);border-radius:12px;flex:none}
.iptab{flex:1;border:0;background:transparent;color:var(--m);font:800 13px var(--ui);padding:7px 4px;cursor:pointer;border-radius:9px;position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.iptab:hover{color:var(--i)}
.iptab[aria-selected="true"]{background:var(--surface);color:var(--ac);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.iptab[aria-selected="true"]:after{content:"";position:absolute;left:50%;bottom:3px;width:16px;height:2px;margin-left:-8px;border-radius:1px;background:var(--ac)}
.bd{width:5px;height:5px;border-radius:50%;background:var(--good);flex:none}
.bd.warn{background:var(--warn)}.bd.off{background:var(--f)}.bd.bad{background:var(--bad)}
.psubs{display:flex;padding:0 8px;border-bottom:1px solid var(--line);flex:none}
.psub{flex:1;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--m);font:700 11px var(--ui);letter-spacing:.02em;text-transform:uppercase;padding:9px 2px 8px;margin-bottom:-1px;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psub:hover{color:var(--i)}
.psub[aria-selected="true"]{color:var(--ac);border-bottom-color:var(--ac)}
.plocked{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;background:var(--acw);border-bottom:1px solid var(--hairline);font-size:12.5px;color:var(--m);flex:none}
.plocked>span{flex:1;min-width:200px}
.plocked>button,.plocked .pact{margin-left:auto;flex:none}   /* the action sits at the right end, in every panel (operator, 2026-09-21) */
.pview{flex:1;min-height:0;overflow-y:auto;padding:14px}
.why{font:400 12.5px var(--msg);color:var(--m);margin:0 0 13px;max-width:74ch}
.pcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px;align-items:start}
.pblk{min-width:0}   /* the tile surface: tokens.css (item 23) */
.lab{display:flex;align-items:center;gap:7px;font:600 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--f);margin-bottom:8px}
.lab .st{margin-left:auto;font:400 10px var(--mono);letter-spacing:0;text-transform:none;color:var(--m)}
.st.good{color:var(--good)}.st.warn{color:var(--warn)}.st.off{color:var(--f)}.st.bad{color:var(--bad)}
.pbig{font:500 23px var(--ui);letter-spacing:-.015em;font-variant-numeric:tabular-nums;margin:0 0 2px}
.pcap{font:400 11.5px var(--mono);color:var(--f);margin:0 0 12px}
.pkv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0 0 13px;font:400 12px var(--mono)}
.pkv dt{color:var(--f)}.pkv dd{margin:0;color:var(--i);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pacts{display:flex;flex-wrap:wrap;gap:6px}
.pact{font:500 11.5px var(--ui);border:1px solid var(--glassline);background:var(--glass);color:var(--btntext,var(--i));border-radius:7px;padding:5px 11px;cursor:pointer;white-space:nowrap}
.pact:hover{background:var(--glasshi)}
.pact.warn{color:var(--bad);border-color:var(--bad)}
.pact.go{background:var(--ac);border-color:var(--ac);color:var(--ontext);font-weight:600}
.pact[disabled]{color:var(--f);cursor:not-allowed;opacity:.55}
.pbar{height:5px;border-radius:3px;background:var(--raised);overflow:hidden;margin:1px 0 8px}
.pbar i{display:block;height:100%;border-radius:3px;background:var(--good)}
.pbar i.warn{background:var(--warn)}.pbar i.bad{background:var(--bad)}
.ptbl{width:100%;border-collapse:collapse;font:400 12px var(--mono);margin-bottom:13px}
.ptbl th{text-align:left;font:600 9px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--f);padding:0 10px 6px 0;white-space:nowrap}
.ptbl td{padding:6px 10px 6px 0;border-top:1px solid var(--hairline);color:var(--i);white-space:nowrap;font-variant-numeric:tabular-nums}
.ptbl td.m{color:var(--m);white-space:normal}
.ptbl th:last-child,.ptbl td:last-child{text-align:right;padding-right:0}
.pstars{color:var(--ac);letter-spacing:.09em}.pstars i{color:var(--line);font-style:normal}
.pmission{font:400 13px/1.62 var(--msg);color:var(--i);background:var(--ground);border:1px solid var(--hairline);border-left:2px solid var(--acb);border-radius:9px;padding:12px 14px;margin:0 0 14px}
.pmission em{display:block;font:400 9.5px var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--f);margin-bottom:6px}
.pchips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 13px}
.pchip{font:400 11.5px var(--mono);border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--m)}
.pchip.held{color:var(--i);border-color:var(--acb);background:var(--acw)}
.pempty{font-size:12.5px;color:var(--m);margin:0 0 12px}
.pfoot{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--hairline);font:400 11px var(--mono);color:var(--f);flex:none}
.pfoot .sp{flex:1}
.ed{border:1px solid var(--acb);background:var(--acw);border-radius:9px;padding:11px 12px 12px}
.ed .edl{font:600 9.5px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ac);margin-bottom:9px}
.ed .row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:9px;margin-bottom:10px}
.ed .fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.ed .fld span{font:400 10px var(--mono);color:var(--f)}
.ed input,.ed select,.ed textarea{min-width:0}   /* the field look: tokens.css (item 23) */
.ed .w4 input{width:76px}.ed .w6 input,.ed .w6 select{width:104px}.ed .w8 select{width:156px}.ed .grow{flex:1}.ed .grow input,.ed .grow select{width:100%}
.ed textarea{width:100%;min-height:74px;resize:vertical;line-height:1.5}
.ed .edacts{display:flex;gap:6px;flex-wrap:wrap}
.plist{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:9px;overflow:hidden;margin-bottom:12px}
.prow{display:flex;align-items:center;gap:10px;background:var(--surface);padding:7px 11px}
.prow .nm{font:400 12px var(--mono);color:var(--i);flex:none;width:132px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.prow .ds{flex:1;min-width:0;font-size:12px;color:var(--f);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .gp{font:600 8.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--f);border:1px solid var(--line);border-radius:4px;padding:2px 6px}
/* Report routing: a segmented control, one of three. These class names existed in the markup
   with NO css at all, so the three buttons rendered as one grey blob with no selected state
   and no disabled state (operator, with a screenshot, 2026-09-29).

   Built from the same tokens as .psub above, so it reads as part of this panel rather than a
   stray control. Disabled is dimmed AND keeps the not-allowed cursor, because Telegram is
   locked when nothing is linked and the reason is on the title. */
/* One block per idea, the same in the instance panel and the household panel — they used to
   differ only because each followed its own layout idiom rather than what this content needs
   (operator, 2026-09-29). */
.rblk{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 10px;background:var(--raised)}
.rhead{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.rhead .l{font:600 9.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--f)}
/* The switch is the shared .tog, so this is only its row. */
.rsw{display:flex;align-items:center;gap:10px;margin:10px 0 2px}
/* A decision as labelled rows — what it does, to what, when, and why (operator, 2026-09-29).
   Label left, value right, so the eye reads down the labels and stops at the one it wants.
   At phone width it stacks, because a 90px label column beside a sentence leaves the sentence
   two words wide. */
.lcrows{margin:8px 0 2px;display:grid;gap:6px 14px}
.lcrows>div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:4px 14px;align-items:baseline}
.lcrows dt{font:600 11px var(--ui);color:var(--f);letter-spacing:.02em}
.lcrows dd{margin:0;font:400 13px/1.45 var(--ui);color:var(--i);min-width:0}
@media(max-width:560px){.lcrows>div{grid-template-columns:minmax(0,1fr);gap:1px}}

.rswl{font:400 13px var(--ui);color:var(--i)}

/* Three figures on one line. A <dl class="kv"> was used first, but that class is styled only
   under .mon and .card, so inside the panel it fell back to the browser default — term on one
   line, value indented under it — and spent three lines saying three numbers. */
.rstats{display:flex;gap:26px;margin:10px 0 6px;flex-wrap:wrap}
.rstats>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.rstats .l{font:600 9.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--f)}
.rstats b{font:500 19px var(--mono);font-variant-numeric:tabular-nums;color:var(--i);line-height:1.1}
.tog{flex:none;width:38px;height:20px;border-radius:999px;border:1px solid var(--line);background:var(--raised);position:relative;cursor:pointer;padding:0}
.tog:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--f);transition:transform .14s ease,background .14s ease}
.tog[aria-pressed="true"]{border-color:var(--acb);background:var(--acw)}
.tog[aria-pressed="true"]:after{transform:translateX(18px);background:var(--ac)}
.tog[disabled]{opacity:.5;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.tog:after{transition:none}}

/* ---- col 3: the Monitor pane (its own styles are in monitor.css) ---- */
.col3{background:var(--surface);display:flex;flex-direction:column;min-height:0;min-width:0}

/* ---- veils: settings, sign-in lock ---- */
.veil{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:60}
.veil.lock{background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.app.out{filter:blur(2px) saturate(.7);pointer-events:none;user-select:none}
.lockbox{width:min(560px,calc(100% - 32px));background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:36px 40px 32px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.lockbox .signin{display:inline-block;background:var(--ac);color:var(--ontext);font:600 14px var(--ui);padding:12px 26px;border-radius:8px;text-decoration:none}
.lockbox .lwm{display:block;font:500 15px var(--serif);color:var(--ac);letter-spacing:.02em;margin-bottom:14px}
.lockbox h2{margin:0 0 8px;font:500 24px var(--serif)}
.lockbox p{margin:0 0 24px;color:var(--m);font-size:14px}
.panel{position:relative;width:min(820px,calc(100% - 32px));height:min(600px,calc(100% - 48px));overflow:hidden;background:var(--ground);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.45);display:grid;grid-template-columns:170px minmax(0,1fr)}
.ptabs{display:flex;flex-direction:column;padding:22px 0;border-right:1px solid var(--line);background:var(--surface)}
.ptab{border:0;border-left:3px solid transparent;background:transparent;color:var(--m);font:500 13.5px var(--ui);padding:12px 16px;cursor:pointer;text-align:left}
.ptab+.ptab{border-top:1px solid var(--line)}
.ptab:hover{color:var(--i)}
.ptab[aria-selected="true"]{color:var(--ac);border-left-color:var(--ac)}
.pclose{position:absolute;right:16px;top:14px;z-index:2;border:1px solid var(--line);background:transparent;color:var(--m);border-radius:6px;width:30px;height:30px;font-size:16px;line-height:1;cursor:pointer}
.pbody{padding:22px 30px 24px;overflow-y:auto;min-height:0}
.pbody h2{margin:0 0 6px;font:500 24px var(--serif)}
.pbody h3{margin:22px 0 8px;font:600 9.5px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--f)}
.srow{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:14px}
.srow .k{color:var(--m);width:130px;flex:none}
.srow .v{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.srow input{border:1px solid var(--line);background:var(--surface);color:var(--i);font:400 13px var(--mono);padding:7px 10px;border-radius:6px;width:200px;max-width:60%}
.btns{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.sbtn{border:1px solid var(--line);background:transparent;color:var(--i);font:500 12.5px var(--ui);padding:8px 14px;border-radius:6px;cursor:pointer}
.sbtn.danger{color:var(--bad);border-color:var(--bad)}
.lnk{border:0;background:transparent;color:var(--ac);font:500 12.5px var(--ui);padding:0 4px;cursor:pointer}
.lnk.quiet{color:var(--f)}
.note{font-size:12.5px;color:var(--f);line-height:1.55;margin:4px 0 6px}
.hint{font-size:12.5px;color:var(--f)}
.tgl{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px}
.tgl button{width:26px;height:22px;border-radius:999px;display:grid;place-items:center;color:var(--f);border:0;background:transparent;cursor:pointer;padding:0}
.tgl button[aria-pressed="true"]{background:var(--ac);color:var(--ontext)}
.sw{position:relative;display:inline-block;width:38px;height:22px;vertical-align:middle}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw .knob{position:absolute;inset:0;border-radius:999px;background:var(--raised);border:1px solid var(--line);transition:background .2s;cursor:pointer}
.sw .knob:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background:var(--m);transition:transform .2s,background .2s}
.sw input:checked+.knob{background:var(--ac);border-color:var(--ac)}
.sw input:checked+.knob:before{transform:translateX(16px);background:var(--ontext)}
.sw input:focus-visible+.knob{outline:2px solid var(--acb);outline-offset:2px}
.req{padding:10px 0;border-bottom:1px solid var(--line)}
.req .who{font-weight:600}.req .when{margin-left:8px;font:400 11px var(--mono);color:var(--f)}
.invcode{font:500 15px var(--mono);letter-spacing:.06em;user-select:all;margin:0 8px 0 4px}
.drawerveil{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:49}   /* item 24: above a stacked panel (.ipanel is 40 on the phone) */

/* ---- phone ---- */
@media(max-width:700px){
  .veil{place-items:stretch}.veil.lock{place-items:center}
  .panel{width:100%;height:100%;border-radius:0;border:0;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .ptabs{flex-direction:row;padding:10px 56px 0 14px;border-right:0;border-bottom:1px solid var(--line);background:var(--ground)}
  .ptab{padding:10px 14px;font-size:13px;border-left:0;border-bottom:3px solid transparent}
  .ptab+.ptab{border-top:0;border-left:1px solid var(--line)}
  .ptab[aria-selected="true"]{border-bottom-color:var(--ac)}
  .pclose{top:8px;right:12px}
  .pbody{padding:16px 16px 24px}
  .srow{flex-direction:column;align-items:flex-start;gap:3px;border-bottom:1px solid var(--hairline)}
  .srow .k{width:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--f)}
  .srow input{width:100%;max-width:none}
}
@media(max-width:1000px){
  .app{grid-template-columns:minmax(0,1fr)!important}
  .col2{grid-column:1/-1!important}   /* the chat is the only column: its desktop place (3) would add empty columns on its left */
  .grip{display:none}
  /* the phone's drawer, as Terrynn's is (operator, 2026-09-23): a panel that leaves the chat visible
     behind it, never a near-full-width sheet. Terrynn: width min(86vw, 340px). */
  .col1{position:fixed;left:0;top:0;bottom:0;width:min(86vw,340px);z-index:50;transform:translateX(-104%);transition:transform .26s cubic-bezier(.3,.7,.3,1);box-shadow:12px 0 40px -10px rgba(0,0,0,.45);border-right:1px solid var(--line);padding:14px 14px 12px}
  .col1.drawer{transform:none}
  .col2{padding:0}
  .chatbox{border:0;border-radius:0}
  /* a stacked panel above the chat ends where this band is (operator, 2026-09-21: "where is that little gap") */
  /* item 21: on a phone the seam is a real handle — the Monitor sheet's centered pill, a thumb's height, draggable */
  .griph{height:18px;cursor:grab;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);touch-action:none;display:flex;align-items:center;justify-content:center}
  .griph:after{display:none}
  .griph i{display:block;width:40px;height:5px;border-radius:3px;background:var(--f);opacity:.6}
  .griph:active i,.griph.on i{opacity:1;background:var(--ac)}
  .ipanel{position:fixed;inset:0;z-index:40;border:0;border-radius:0;height:auto!important}
  .chdr{padding:10px 14px;gap:9px}.chdr .title{display:none}.chdr .montog{display:none}
  .chdr .sidebtn.fold{display:none}
  .menubtn{display:grid}
  .tool.monbtn{display:grid;place-items:center;width:28px;height:28px;padding:0}
  .tool.model{padding:0 7px;font-size:11px}
  .ctools{gap:6px;padding:6px 8px 8px}
  .cbox textarea{padding:12px 12px 8px}
  .col3{position:fixed;inset:0;z-index:40;transform:translateY(102%);transition:transform .25s ease}
  .col3.sheet{transform:none}
  .col3.dragging{transition:none}
  .col3.sheet.going{transform:translateY(102%)!important;transition:transform .22s ease-in}
  /* the handle: a short bar at the top of the sheet; drag it (or the title row) down to close */
  .col3 .grabber{display:flex;justify-content:center;align-items:center;flex:none;width:100%;height:22px;padding:0;border:0;background:var(--surface);cursor:grab;touch-action:none}
  .col3 .grabber i{width:40px;height:5px;border-radius:3px;background:var(--f);opacity:.6}
  .col3 .grabber:active i{opacity:1}
  .col3 .mon .head{touch-action:none}
  /* 12px was under the 16px side gutter this layout holds to everywhere else, and
     it is the width where a thumb is nearest the edge (review, 2026-09-26). The
     composer and the turns it sits under move together, or the text and the box
     it types into stop lining up. */
  .comp{padding:4px 16px 8px}.cbox{max-width:none}.stream{padding-top:12px}.turn{padding:0 16px;margin-bottom:22px}
  .a{grid-template-columns:1fr;gap:0}.a>.av{display:none}.a.busy{grid-template-columns:40px 1fr;gap:10px}.a.busy>.av{display:block}
  .card.box{padding:9px 12px 8px;border-radius:12px 12px 12px 4px}
  .q .bub{max-width:88%;font-size:16px;line-height:1.5;padding:12px 16px;border-radius:18px 18px 4px 18px}
  .card p,.card .blocks,.card ul.list,.card .decided{font-size:15.5px;line-height:1.6}
  .card .rl{font-size:16.5px}
  .card .h .v{font-size:10.5px}
  .card td,.card pre,.card dl.kv{font-size:13px}
  .a .thinking{font-size:13.5px}
  .ipanel .prow{flex-wrap:wrap;row-gap:4px;padding:9px 11px}
  .ipanel .prow .nm{flex:1;width:auto}
  .ipanel .prow .gp{display:none}
  .ipanel .prow .ds{order:3;flex:0 0 100%;white-space:normal;font-size:11.5px;line-height:1.4}
}
@media(min-width:1001px){.drawerveil{display:none}}
/* a send that got no answer: say so, offer to send it again */
.a .unsent{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:3px;font-size:13px;color:var(--warn)}
.a .unsent code{font:400 12px var(--mono);color:var(--i)}
.a .unsent .retry{font:500 12px var(--ui);border:1px solid var(--glassline);background:var(--glass);color:var(--i);border-radius:7px;padding:5px 11px;cursor:pointer}
.a .unsent .retry:hover{background:var(--glasshi)}
/* the record: a button's action or a page event, as a quiet divider in the day chip's register */
.rec{display:flex;align-items:center;gap:12px;max-width:880px;margin:2px auto 18px;padding:0 32px;font:400 11.5px var(--msg);color:var(--f)}
.rec:before,.rec:after{content:"";flex:1;min-width:24px;height:6px;background:var(--line);opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left center/12px 6px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left center/12px 6px}
.rec span{flex:none;max-width:70%;text-align:center;opacity:.9}
.rec time{opacity:.8}
@media(max-width:1000px){.rec{padding:0 12px}}
/* "From your daily digest" above a message nobody asked for (operator ruling, 2026-09-27).
   Same register as .rec — a caption, not a heading. */
.pushfrom{max-width:880px;margin:2px auto 0;padding:0 32px;font:400 11.5px var(--msg);color:var(--f)}
@media(max-width:1000px){.pushfrom{padding:0 12px}}
/* the mode menu asks before it switches */
.menu.ask{padding:12px 12px 10px}
.menu.ask p{margin:0 0 4px;font:500 13px var(--ui);color:var(--i)}
.menu.ask small{display:block;font:400 11.5px var(--ui);color:var(--f);margin-bottom:10px}
.menu.ask .acts{display:flex;gap:6px}
.menu.ask .acts button{display:inline-block;width:auto;flex:1;text-align:center;border:1px solid var(--line);padding:7px 10px}
.menu.ask .acts button.go{background:var(--ac);border-color:var(--ac);color:var(--ontext);font-weight:600}
.menu.ask .acts button.go:hover{background:var(--ac);filter:brightness(1.06)}
/* a failed connect, in plain words, then the broker's own words */
.pexplain{font:400 12.5px/1.5 var(--msg);color:var(--i);margin:0 0 8px;max-width:60ch}
.preason{overflow-wrap:anywhere}
/* the rail's marks, beside the status dot: the arbiter's agent team and the calegent's timetable */
.inst .marks{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.inst .marks+.dot{margin-left:0}
.inst .mk{width:16px;height:16px;display:grid;place-items:center;flex:none}
.inst .mk svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.inst .mk svg circle.face{fill:var(--ground)}
.inst.on .mk svg circle.face{fill:var(--surface)}
.inst .mk.arb{color:var(--ac)}
.inst .mk.cal.running{color:var(--good)}
.inst .mk.cal.paused{color:var(--warn)}

/* ---- Help, the whole surface (the approved boards: home, a topic, phone) --------------------
   It covers the workspace, because reading help is what you are doing while it is open. */
.help2{position:absolute;inset:0;z-index:60;display:flex;background:var(--ground);color:var(--i)}
.help2 .hnav{width:268px;flex:none;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--ground)}
.help2 .hsearch{padding:16px;border-bottom:1px solid var(--hairline)}
.help2 .hfield{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 10px}
.help2 .hfield:focus-within{border-color:var(--acb)}
.help2 .hfield .i{color:var(--f);display:flex}
.help2 .hfield input{flex-grow:1;min-width:0;border:0;background:transparent;color:var(--i);font:400 13px var(--ui);outline:none}
.help2 .hfield input::placeholder{color:var(--f)}
.help2 .hsecs{flex-grow:1;overflow:auto;padding:10px 8px 20px}
.help2 .hsec{font:600 10.5px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--f);padding:14px 10px 6px}
.help2 .hlink{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;background:transparent;
  color:var(--m);font:500 13px var(--ui);padding:6px 10px;border-radius:7px;cursor:pointer}
.help2 .hlink:hover{background:var(--surface);color:var(--i)}
.help2 .hlink.on{background:var(--raised);color:var(--i)}
.help2 .hlink em{font-style:normal;font:400 11px var(--mono);color:var(--f)}
.help2 .hmain{flex-grow:1;min-width:0;overflow:auto;padding:0 40px 48px}
.help2 .htop2{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:14px 0 10px;background:var(--ground)}
.help2 .htop2 .sp{flex-grow:1}
.help2 .hmenu{display:none}
.help2 .hback,.help2 .hmenu{border:1px solid var(--line);background:transparent;color:var(--m);border-radius:8px;padding:5px 11px;font:600 11.5px var(--ui);cursor:pointer}
.help2 .hback:hover,.help2 .hmenu:hover{color:var(--i);border-color:var(--acb)}
.help2 .hx{border:0;background:transparent;color:var(--f);font-size:15px;line-height:1;padding:6px;cursor:pointer;border-radius:7px}
.help2 .hx:hover{color:var(--i);background:var(--surface)}
.help2 .hh1{margin:6px 0 0;font:500 30px/1.2 var(--serif);letter-spacing:-.01em}
.help2 .hcrumb{margin:0;font:500 11.5px var(--ui);color:var(--f)}
.help2 .hcrumb b{color:var(--m);font-weight:500}
.help2 .hlede{margin:8px 0 0;font-size:13.5px;color:var(--m);max-width:66ch;line-height:1.55}
.help2 .hhd{display:flex;align-items:baseline;gap:8px;margin:32px 0 12px}
.help2 .hhd h2,.help2 .hhd2{margin:0;font:600 12px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--f)}
.help2 .hhd2{margin:32px 0 10px}
.help2 .hhd .n{font:400 11px var(--mono);color:var(--f)}
.help2 .hcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.help2 .hcard{display:block;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px;cursor:pointer;color:inherit}
.help2 .hcard:hover{border-color:var(--acb);background:var(--raised)}
.help2 .hcard b{display:block;font:600 14px var(--ui)}
.help2 .hcard small{display:block;margin-top:5px;font-size:12px;color:var(--m);line-height:1.45}
.help2 .hcard .hsteps{display:block;margin-top:10px;font:500 11px var(--mono);color:var(--ac)}
.help2 .hrow{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:8px;overflow:hidden}
.help2 .hrow.flat{display:flex;align-items:center;gap:12px;padding:9px 12px}
.help2 .hrow.open{border-color:var(--acb)}
.help2 .htop{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;color:inherit;padding:10px 12px;cursor:pointer}
.help2 .htop:hover{background:var(--raised)}
.help2 .sig{font:500 12.5px var(--mono);color:var(--ac);white-space:nowrap;min-width:0}
.help2 .txt{flex-grow:1;min-width:0;font-size:12.5px;color:var(--m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.help2 .hchip{flex:none;font:600 10px var(--ui);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 8px;border:1px solid var(--line);color:var(--f)}
.help2 .hchip.tap{color:var(--lock);border-color:rgba(143,180,232,.4)}
.help2 .hchip.manage{color:var(--ac);border-color:var(--acb)}
.help2 .hbodyrow{border-top:1px solid var(--hairline);padding:12px;background:var(--block)}
.help2 .lbl{margin:0 0 7px;font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--f)}
.help2 .hex{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--ground);margin-bottom:6px}
.help2 .hex code{flex-grow:1;font:500 12px var(--mono);color:var(--i)}
.help2 .hacts{display:flex;gap:8px;margin-top:10px}
.help2 .hacts button,.help2 .hex button,.help2 .ins{border:1px solid var(--line);background:transparent;color:var(--m);border-radius:7px;padding:5px 11px;font:600 11.5px var(--ui);cursor:pointer;flex:none}
.help2 .hacts button:hover,.help2 .hex button:hover,.help2 .ins:hover{color:var(--i);border-color:var(--acb)}
.help2 .hacts .go{background:var(--acw);border-color:var(--acb);color:var(--ac)}
.help2 .hprose{font-size:13px;line-height:1.6;color:var(--m);max-width:66ch}
.help2 .hprose p{margin:0 0 10px}
.help2 .hdetails{font-size:13.5px;line-height:1.6;color:var(--m);max-width:72ch}
.help2 .hdetails b{color:var(--i);font-weight:600}
.help2 .hdetails i{font-style:normal;color:var(--m)}
.help2 .hdetails .ttl{font:600 15px var(--ui);color:var(--i);margin-bottom:2px}
.help2 .hdetails .tsub{color:var(--f);font-size:12.5px;margin:0 0 12px}
.help2 .hdetails h5{margin:20px 0 6px;font:600 10.5px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--f)}
.help2 .hdetails p{margin:0 0 10px}
.help2 .hdetails ul{list-style:none;margin:0 0 10px;padding:0}
.help2 .hdetails li{padding:8px 0;border-bottom:1px solid var(--hairline)}
.help2 .hdetails li:last-child{border-bottom:0}
.help2 .hdetails li .k{color:var(--i);font-weight:600}
.help2 .hdetails li .d{color:var(--m);font-size:12.5px;margin-top:3px}
.help2 .hdetails code{font-family:var(--mono);font-size:.92em;background:var(--raised);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
.help2 .hrel{display:flex;flex-wrap:wrap;gap:8px}
.help2 .hrel button{border:1px solid var(--line);background:transparent;color:var(--m);border-radius:999px;padding:5px 12px;font:500 12px var(--ui);cursor:pointer}
.help2 .hrel button:hover{color:var(--i);border-color:var(--acb)}
.help2 .hnew{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--hairline);font-size:12.5px}
.help2 .hnew b{flex:none;font-weight:600}
.help2 .hnew span{color:var(--m)}
.help2 .hterms{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 28px}
.help2 .hterm{padding:8px 0;border-bottom:1px solid var(--hairline);font-size:12.5px}
.help2 .hterm b{display:block;font-weight:600}
.help2 .hterm span{color:var(--m)}
.help2 .hempty{margin:24px 0;font-size:13px;color:var(--f)}
.help2 .hfoot{margin:28px 0 0;padding-top:14px;border-top:1px solid var(--hairline);font-size:12px;color:var(--f)}
.help2 .hveil{display:none}
@media(max-width:1000px){
  .help2 .hnav{position:absolute;inset:0 auto 0 0;z-index:3;transform:translateX(-102%);transition:transform .18s ease;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .help2.nav .hnav{transform:none}
  .help2 .hmain{padding:0 16px 40px}
  .help2 .hmenu{display:inline-block}
  .help2 .hveil{display:block;position:absolute;inset:0;z-index:2;border:0;background:rgba(0,0,0,.45)}
  .help2 .hh1{font-size:24px}
  /* a phone is narrower than most signatures: the row stacks, the command wraps whole, and the
     description, the scope and the actions sit under it where they can still be reached */
  .help2 .htop,.help2 .hrow.flat{flex-wrap:wrap;row-gap:7px}
  .help2 .sig{white-space:pre-wrap;overflow-wrap:anywhere;flex-basis:100%;line-height:1.45}
  .help2 .txt{flex-basis:100%;white-space:normal;overflow:visible;text-overflow:clip;order:3}
  .help2 .hchip{order:2}
  .help2 .ins{order:2}
  .help2 .hdetails{max-width:none}
}
@media(prefers-reduced-motion:reduce){.help2 .hnav{transition:none}}

/* ==========================================================================
   Phase 2 M2 — the rail's four tabs, the decision card, Approvals, watching
   (docs/phase2/M2_Web_UI_and_Telegram_Manifest.md: F2, F5, section 2, W4, W5)
   ========================================================================== */

/* F2: the tabs sit under the logo and above search. */
/* The sidebar's tabs are the Monitor's tabs in a narrower column: the same
   raised trough, the same surface-coloured selected pill, the same accent text
   and the same short bar under the selection. Only the type scale differs,
   because four tabs share ~246px here and the full width there. */
.tabs{display:flex;gap:4px;margin:0 0 10px;padding:4px;background:var(--raised);border-radius:12px}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;border:0;background:transparent;
  border-radius:9px;padding:7px 3px;font:700 11.5px var(--ui);color:var(--m);cursor:pointer;
  line-height:1.4;min-height:30px;position:relative}
.tab:hover{color:var(--i)}
/* No underline on the rail's selected tab: the highlight says it already, and a
   second marker in a 246px column is noise (operator, 2026-09-20). The Monitor
   keeps its bar — it has the width for it. */
.tab.on{background:var(--surface);color:var(--ac);box-shadow:0 1px 3px rgba(0,0,0,.25)}
/* The badge counts what needs you, so it is gold (F5) rather than the Monitor's
   red, which means a limit was hit. */
.tab .badge{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 4px;border-radius:8px;
  background:var(--ac);color:var(--ontext);font:700 9.5px var(--ui)}

/* The Life layer's rules (F5 cards, the Overview, the panes, Approvals, watching, the forms, the
   household panel, Spent cash, attachments) are in life.css, which loads after this file. */
/* V1: the households live under the Life tab. */
.insts .chip{margin-left:auto;font:400 10px var(--ui);padding:2px 6px;border-radius:4px;flex:none;
  max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insts .chip.amber{color:var(--warn);border:1px solid var(--warn)}
button.inst{width:100%;text-align:left;border:0;background:transparent;font:inherit}

@media (max-width:1000px){
  /* The chat header hides its title on a phone because the instance scope beside
     it already says where you are. On Life and Approvals the title is the only
     thing naming the screen, so it stays. */
  .chdr.lhdr .title{display:block;text-align:left;font-size:14px;color:var(--i)}
}

/* F3 · the Life sub tabs, and the W3/W6/W8 bodies. */
.subtabs{display:flex;gap:2px;padding:0 24px;border-bottom:1px solid var(--line);overflow-x:auto;flex:none;
  scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.stab{flex:none;border:0;background:transparent;padding:9px 11px;cursor:pointer;line-height:1.4;
  font:500 12.5px var(--ui);color:var(--f);border-bottom:2px solid transparent;margin-bottom:-1px}
.stab:hover{color:var(--m)}
.stab.on{color:var(--i);border-bottom-color:var(--ac)}

@media (max-width:1000px){
  .subtabs{padding:0 14px}
}

/* V2 · the dial carries all three positions, and shows the threshold on the
   button itself — not only inside the menu. */
.tool.dial{gap:6px}
.tool.dial .thr{font:400 10.5px var(--ui);color:var(--f);white-space:nowrap}
.modewrap .menu button em{display:block;font:400 10px var(--ui);font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:var(--f);margin-top:1px}

/* The sidebar's footer stays at the bottom whatever tab is showing — it used to
   ride up as the tab's content got shorter. */
.col1 .you{margin-top:auto}
.shint{margin:12px 7px 0;font:400 11.5px/1.5 var(--ui);color:var(--f)}
/* W4 / operator ruling: Approvals opens OVER the chat, like the instance
   control panel — it does not replace the chat. Its rules are with the rest of
   the overlay below ("W4 · the Approvals overlay in the Monitor's clothes"). */

/* Markets: the instances sit at the bottom of the rail, directly above who you
   are, as they did before the tabs. The spacer takes the free space, which also
   makes the footer's own auto margin a no-op rather than a competing push. */
.sgrow{flex:1;min-height:0}
/* the household block can grow (the Spent cash form opens under a row) and scrolls inside the column instead of being clipped by it (phone, operator 2026-09-21) */
.col1 .insts{overflow:auto;min-height:0;max-height:70vh;flex:none}

/* Help · a "Start here" guide, followed step by step. */
.hback{border:0;background:transparent;color:var(--ac);cursor:pointer;padding:0 0 10px;
  font:500 12.5px var(--ui);min-height:30px;display:inline-flex;align-items:center}
.hsteplist{list-style:none;counter-reset:hstep;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.hsteplist li{counter-increment:hstep;display:flex;align-items:flex-start;gap:12px}
.hsteplist li:before{content:counter(hstep);flex:none;width:22px;height:22px;margin-top:9px;border-radius:50%;
  border:1px solid var(--line);color:var(--f);font:600 11px var(--ui);display:grid;place-items:center}
.hsteplist li .hrow{flex:1;min-width:0}

/* A code block wraps long lines; it does not compact or extend. Those icons are
   the reply card's alone, and reusing them here said the wrong thing. */
.card .cmd .cmdwrap{border:1px solid var(--line);background:transparent;color:var(--f);
  border-radius:5px;padding:3px 8px;font:500 10.5px var(--ui);cursor:pointer;line-height:1.4}
.card .cmd .cmdwrap:hover{color:var(--m)}
.card .cmd .cmdwrap[aria-pressed="true"]{color:var(--ac);border-color:var(--acb)}

/* W1 · the chat header: a household pill instead of LIVE/PAPER, the gold dot on a chat */
.chdr .tag.household{color:var(--ac);border-color:var(--acb)}
.chat .ndot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ac);margin-right:6px;vertical-align:middle}

/* V2 · the dial: plain words, the harness name beneath, the threshold on the button
   (its 44px phone height is in the W10 media query) */
.tool.dial .dl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.tool.dial .dl em{font:400 9.5px var(--ui);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--f)}
.tool.dial .dl.one{flex-direction:row;align-items:center;font-weight:500}
.modewrap .menu small .thr{display:block;margin-top:2px;color:var(--f)}
.modewrap .menu .mnote{margin:6px 0 0;padding:8px 10px;border-radius:6px;background:var(--acw);border:1px solid var(--acb);font:400 12px/1.5 var(--msg);color:var(--i);white-space:normal}
.modewrap .menu .mnote.bad{background:transparent;border-color:var(--warn);color:var(--warn)}
.tool.plus{cursor:pointer}

/* V2 · what the harness said to a household dial change, beside the dial once the menu has closed */
.ctools .mnote.inline{font:400 11.5px/1.4 var(--ui);color:var(--m);padding:4px 8px;border-radius:6px;background:var(--acw);border:1px solid var(--acb);max-width:46ch;white-space:normal}
.ctools .mnote.inline.bad{background:transparent;border-color:var(--warn);color:var(--warn)}

/* Operator batch, 20 Sep 2026: the Life items are in life.css; the household row on the rail and the
   icon-only tools stay here. */

/* item 2 · a household's row on the rail: the Markets rows' marker, switch and gear */
.inst.hh .open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.inst.hh .chip{margin-left:0}
.inst.hh.sel .nm{color:var(--i)}
.inst.hh.sel .facts{color:var(--m)}

/* item 11 · the + (attach) and ? (help) tools are icon only: no border, same size and hit area */
.tool.plus,.tool.help{border-color:transparent;background:transparent}

/* the unfold control when it sits in a stacked panel header */
.hrow .sidebtn.fold,.ph .sidebtn.fold{width:30px;height:30px;border:1px solid var(--line);margin-right:6px}

/* a locked household action on the rail says so: dimmed, and a tap switches to the household instead (operator, 2026-09-21) */
.inst .isw.locked{opacity:.4}
.inst .isw.locked:hover{opacity:.7}

/* Notifications — the middle column and the rail's overall view (operator ruling, 2026-09-29).
   It is an INDEX of what arrived, so it reads as a list, not as a wall of cards: the reports
   themselves are in the stream below it. */
.npanel{display:flex;flex-direction:column;min-height:0;border-bottom:1px solid var(--line);flex:none}
.npanel .head{padding:13px 24px 0;flex:none}
.npanel .hrow{display:flex;align-items:center;gap:10px}
.npanel .title{margin:0;font:600 14px var(--ui);color:var(--f)}
.npanel .stamp{margin-left:auto;font:400 11.5px var(--ui);color:var(--m)}
.ntabs{display:flex;gap:6px;flex-wrap:wrap;padding:11px 0 12px}
.ntab{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 11px;
  font:500 12px var(--ui);color:var(--m);background:transparent;cursor:pointer}
.ntab.on{border-color:var(--acb);color:var(--ac);background:var(--acw)}
.ntab .n{font:600 11px var(--mono);opacity:.75}
.nbody{flex:1;overflow-y:auto;min-height:0;padding:0 24px 16px}
.nlist{list-style:none;margin:0;padding:0}
.nrow+.nrow{border-top:1px solid var(--line)}
.nrow>button{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;border:0;background:transparent;
  padding:9px 0;cursor:pointer;font:400 13px var(--ui);color:var(--f)}
.nrow>button:hover{color:var(--ac)}
.nrow .nt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nrow .ts{font:400 11px var(--mono);color:var(--m);flex:none}
/* the kind, said once, in a colour that matches how much it wants you */
.ntag{flex:none;font:600 9px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--m);
  border:1px solid var(--line);border-radius:3px;padding:2px 6px}
.ntag.g-needs_you{color:var(--ac);border-color:var(--acb)}
.ntag.g-stopped{color:var(--bad,#b3261e);border-color:currentColor}
.nsum{display:flex;flex-direction:column;gap:2px;padding:2px 0}
.nsrow{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;cursor:pointer;
  padding:7px 14px;font:500 12.5px var(--ui);color:var(--f);border-radius:6px}
.nsrow:hover{background:var(--acw)}
.nsrow .nsl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.nsrow .nsn{font:600 11.5px var(--mono);color:var(--m)}
.nsrow.g-needs_you .nsl{color:var(--ac)}

/* Pinned chats: fixed places above the conversations, not conversations themselves. */
.pins{padding:2px 0 6px;border-bottom:1px solid var(--line);margin-bottom:6px}
.chat.pin .tt{font-weight:600}
.chdr .scope.pinscope{font:600 13.5px var(--ui);color:var(--f)}
/* Approvals: one section at a time, chosen on the instance panel's own top menu (.iptabs), so
   the same control means the same thing wherever it appears. The count sits after the label. */
.lappr .iptabs{margin:8px 0 12px}
.iptab .ipn{font:700 11px var(--mono);opacity:.75}
.lapane{min-height:0}
/* Notifications rows: what it is, what it says, where from, when — and whether you have seen it. */
.nrow .ndot{width:6px;height:6px;border-radius:50%;background:transparent;flex:none}
.nrow.unseen .ndot{background:var(--ac)}
.nrow.unseen .nt{font-weight:600;color:var(--f)}
.nrow .nsrc{flex:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 11px var(--mono);color:var(--m)}
.ntab .nu,.nsrow .nu{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--ac);color:#fff;font:600 10px var(--ui)}
.tab.icon{display:inline-flex;align-items:center;gap:4px;padding-left:9px;padding-right:9px}
.tab.icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.nsumwrap{padding-top:2px}

/* The pin: what separates a fixed place from the conversations under it. Sized to the text
   beside it and carried in the header too, so the same mark means the same thing in both. */
.pinmk{display:inline-flex;align-items:center;margin-right:7px;color:var(--m);vertical-align:-1px}
.pinmk svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chat.pin.on .pinmk,.chdr .pinscope .pinmk{color:var(--ac)}