/* Harness tokens from the approved mockup, light and dark. */
:root{--bg:#f3f6fa;--tabbar:#ffffff;--surface:#ffffff;--surface-2:#eaf0f7;--line:#d6dfeb;--ink:#12203a;--muted:#5a6a82;--faint:#8b98ab;--brand:#0051af;--brand-soft:#e3edfa;--shared:#00838f;--shared-soft:#dff3f4;--l1:#607d8b;--l1-soft:#e9eef1;--l2:#b86200;--l2-soft:#fbefdf;--l3:#0051af;--l3-soft:#e3edfa;--risk:#b3261e;--risk-soft:#fbe9e7;--good:#1f7a3a;--good-soft:#e5f4ea;--wire:#0051af;--wire-2:#00838f;--preview:#6b3fa0;--preview-soft:#f1eafa;--attn:#9a4f00;--on-attn:#ffffff;--display:"Archivo",Arial,Helvetica,sans-serif;--body:"Public Sans",Arial,Helvetica,sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0c1424;--tabbar:#1f2f4f;--surface:#121d32;--surface-2:#18253e;--line:#26365a;--ink:#e5ebf5;--muted:#9aa9c2;--faint:#6c7c98;--brand:#6aa6ff;--brand-soft:#172c4f;--shared:#4fc6cf;--shared-soft:#12343a;--l1:#9fb4bf;--l1-soft:#1d2a35;--l2:#f0a443;--l2-soft:#3a2a14;--l3:#6aa6ff;--l3-soft:#172c4f;--risk:#ff8a80;--risk-soft:#3d1c1c;--good:#6fd08c;--good-soft:#15321f;--wire:#6aa6ff;--wire-2:#4fc6cf;--preview:#c9a6f5;--preview-soft:#2c1f40;--attn:#f0a443;--on-attn:#1a1204;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0c1424;--tabbar:#1f2f4f;--surface:#121d32;--surface-2:#18253e;--line:#26365a;--ink:#e5ebf5;--muted:#9aa9c2;--faint:#6c7c98;--brand:#6aa6ff;--brand-soft:#172c4f;--shared:#4fc6cf;--shared-soft:#12343a;--l1:#9fb4bf;--l1-soft:#1d2a35;--l2:#f0a443;--l2-soft:#3a2a14;--l3:#6aa6ff;--l3-soft:#172c4f;--risk:#ff8a80;--risk-soft:#3d1c1c;--good:#6fd08c;--good-soft:#15321f;--wire:#6aa6ff;--wire-2:#4fc6cf;--preview:#c9a6f5;--preview-soft:#2c1f40;--attn:#f0a443;--on-attn:#1a1204;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--brand)}a:hover{color:var(--ink)}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Dropdowns and text boxes keep their look when selected: no ring, no colour change (Gabriel, 2026-11-03). */
select:focus,select:focus-visible,input:not([type="checkbox"]):not([type="radio"]):focus,input:not([type="checkbox"]):not([type="radio"]):focus-visible,textarea:focus,textarea:focus-visible{outline:none}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.muted{color:var(--muted)}
.h-label{margin:0;font-size:13px;font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.h-big{margin:0;font-size:24px;font-family:var(--display);font-weight:800;font-stretch:88%;color:var(--ink)}

/* Header: one row */
header.top{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--bg)}
header.top .home{flex:none;display:flex;margin:-2px 0;border-radius:4px} /* The logo takes the same 43px of the header as before (47px less 2px each side), so the header keeps its 69px height, which the column heights assume. */
header.top .home:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
header.top img{flex:none;width:241px;height:47px;object-fit:contain} /* 20% smaller than 301 x 59 (PB-0319) */
header.top h1{position:relative;top:8px;margin:0 0 0 16px;font-family:var(--display);font-size:32px;font-weight:800;font-stretch:85%;letter-spacing:-.01em;line-height:1.05;white-space:nowrap} /* 16px from the logo, was 80px (Gabriel, 2026-11-07) */
html.local header.top h1::after{content:"LOCAL";margin-left:10px;color:#d81b1b;font-size:.45em;font-weight:800;letter-spacing:.06em;vertical-align:middle} /* the local copy only (theme.js sets the class) */
.top-right{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-left:auto}
@media (min-width:701px){ /* one line (Gabriel, 2026-11-07): the title shrinks and the name is cut with an ellipsis before anything wraps */
  header.top{flex-wrap:nowrap;gap:12px 16px}
  header.top h1{font-size:clamp(20px,2.3vw,32px);margin-left:0;flex:0 1 auto;min-width:0}
  .top-right{flex-wrap:nowrap;flex:1 1 0;min-width:0;justify-content:flex-end;gap:8px}
  .top-right>*{flex:none;white-space:nowrap}
  .top-right #whoami{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
.viewer{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.viewer select{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px}
.btn-outline{min-height:44px;padding:0 16px;border:1px solid var(--brand);border-radius:8px;background:var(--surface);color:var(--brand);font-size:14px}
/* Settings as a gear, right of the theme toggle (Gabriel, 2026-11-04) */
.gear-btn{width:44px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.gear-btn[aria-pressed="true"]{background:var(--brand);color:var(--surface)}
.gear-btn svg{transition:transform .3s}
.gear-btn:hover svg{transform:rotate(45deg)}
/* Something is waiting for Gabriel: amber, the same family as the approval card band. */
.btn-outline.attn{border-color:var(--attn);background:var(--attn);color:var(--on-attn);font-weight:700}
.seg{display:flex;padding:3px;gap:2px;border-radius:8px;background:var(--surface-2)}
.seg button{display:flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:13px;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink)}

/* Preview banner */
.preview-banner{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 24px;background:var(--preview);color:#fff;font-size:15px;font-weight:600}
:root[data-theme="dark"] .preview-banner{color:#1a0f2b}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .preview-banner{color:#1a0f2b}}
.preview-banner button{margin-left:auto;min-height:40px;padding:0 16px;border:2px solid currentColor;border-radius:8px;background:transparent;color:inherit;font-size:14px;font-weight:700}
body.previewing{box-shadow:inset 0 0 0 4px var(--preview)}

/* Module tabs */
nav.modules{display:flex;flex-wrap:wrap;padding:0 24px;background:var(--tabbar);border-bottom:1px solid var(--line)}
nav.modules button{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font-size:15px}
nav.modules button[aria-current="page"]{border-bottom-color:var(--brand);color:var(--ink)}
nav.modules button:not(.home-tab):not(.gs-hit):hover{background:color-mix(in srgb,var(--brand-soft) 55%,transparent);color:var(--ink)} /* a slight highlight on hover (Gabriel, 2026-11-07) */
nav.modules button.home-tab:not([aria-current="page"]):hover{background:color-mix(in srgb,var(--brand-soft) 80%,var(--brand) 20%)}
nav.modules button.home-tab{align-self:center;min-height:36px;margin-right:10px;padding:0 16px 0 14px;border:0;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:600} /* the home tab (Gabriel, 2026-11-04) */
nav.modules button.home-tab[aria-current="page"]{background:var(--brand);color:var(--surface)}
nav.modules button.home-tab[aria-current="page"] .badge{background:var(--surface);color:var(--brand)}
/* Count badges, Apple style: a 20px blue circle that stretches into a pill for two or more digits (the tabs here, the agent list's .pip below) */
.badge,.pip.attn,.pip.live,.pip.idle{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.badge{background:var(--brand);color:var(--surface)}
.badge.crit{background:var(--attn);color:var(--on-attn)} .subtabs .badge.crit{margin-right:-2px} /* the Admin tab and the sub-tab it comes from: critical items only, amber (Gabriel, 2026-11-03) */
.subtabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px 24px 0;border-bottom:1px solid var(--line)}
.subtabs button{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--surface-2);color:var(--muted);font-size:14px}
.subtabs.sub2{padding-top:8px} .subtabs.sub2 button{min-height:32px;font-size:13px} /* the ticket views under Admin > Tickets (Gabriel, 2026-11-07) */
.subtabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600}
main.module{flex-grow:1;display:flex;flex-direction:column}

/* Office */
.office{display:flex;flex-wrap:wrap;align-items:stretch;flex-grow:1}
/* Wide enough for the longest agent name on one line ("Knowledge Coordinator"), and 20% more (268px to 322px; Gabriel, 2026-11-03). */
.col-agents{flex:0 0 322px;min-width:0;padding:16px 12px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;height:calc(100vh - 158px);box-sizing:border-box}
/* Agents and Teams are two tabs over one list, which takes the whole column (Gabriel, 2026-11-03). */
.agents-list{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.groups-side{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.col-agents>.seg{flex:none}
/* Under the list: About this agent, or the open team's Members and Outputs (Gabriel, 2026-11-03). One height, 38%, shared
   with an agent's Outputs folder in the conversations column: 38% of the full column height in both, so the two are the
   same size and their tops line up though the conversations column now sits under the header. */
/* About this agent (or team) starts right under the last card and takes the rest of the column, never less than 20% of it;
   a list too long for the rest scrolls; and never taller than Outputs beside it (38%), so the list fills any space left above
   (Gabriel, 2026-11-04). */
/* The panel takes the free space first (grow 10000), the list only what is left once the panel is at its cap. */
.col-agents:has(>.nav-foot)>.agents-list,.col-agents:has(>.nav-foot)>.groups-side{flex:1 1 auto}
.nav-foot{flex:10000 1 0;min-height:calc((100vh - 158px) * .2);max-height:calc((100vh - 158px) * .38);overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:10px 4px 0;border-top:1px solid var(--line)}
.nav-foot .threads-list{flex:none}
/* Members: agent-card height, five in view, the rest scroll in the list; the panel grows to fit them (Gabriel, 2026-11-04). */
.nav-foot:has(>.member-list){max-height:none;flex:none}
.member-list{flex:none;max-height:calc(5 * 44px + 4 * 4px);overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.member-list>*{flex-shrink:0}
.member-card{position:relative;align-items:center;padding-right:44px;border:1px solid var(--line);cursor:default;box-sizing:border-box}
.member-card .agent-handle{cursor:default}
.member-card .sub.on{color:var(--brand)}.member-card .sub.need{color:var(--l2)}
.member-card.off{opacity:.6}
.agents-list>*,.groups-side>*{flex-shrink:0}
.groups-side>.org-toggle{flex:none} /* the Completed header keeps its own height, so a completed squad sits right under it (PB-0746) */
/* As wide as the Auto-approve toggle plus 10px, --col-w (Gabriel, 2026-11-03), for an agent's conversations and a team's column alike. */
.col-threads{flex:0 0 var(--col-w);min-width:0;padding:16px 12px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;height:calc(100vh - 158px);box-sizing:border-box}
.threads-list{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.threads-list>*,.outputs-side>*{flex-shrink:0}
/* Saved for later: its own group at the bottom of the list, just above Outputs, with half-height cards */
.later-list{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.later-list .h-label{margin:0 0 0 8px;font-size:11px}
.thread-btn.later{flex-direction:row;align-items:center;gap:8px;min-height:0;padding:9px 10px;background:var(--surface-2)}
.thread-btn.later .t{flex:1 1 auto;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-btn.later .w{flex:none;font-size:11px}
.col-chat{flex:999 1 460px;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line);height:calc(100vh - 158px)}
.col-chat>.log{flex:1 1 0;height:auto;min-height:240px}
.col-details{flex:1 1 260px;min-width:0;padding:16px 12px;display:flex;flex-direction:column;gap:8px;height:calc(100vh - 158px);box-sizing:border-box;overflow:hidden}
.col-details>.pane-top,.col-details>.pane-bottom{position:relative;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:0 8px}
.col-details>.pane-top{flex:0 1 auto}
.col-details>.pane-bottom{flex:1 1 0;min-height:130px;border-top:1px solid var(--line);padding-top:12px}
.col-details .howto{padding:12px}
.sub-pane .activity{flex:1 1 auto;min-height:0;overflow-y:auto}
/* The two lists of the details column fill its height: a short one keeps its size, the longer takes the rest (Gabriel, 2026-11-04). */
.col-details>.pane-top>.sp-hist,.col-details>.pane-top>.sp-act{flex:1 1 0;min-height:72px} /* sized after each draw (sizeDetails): half each when both are long (Gabriel, 2026-11-04) */
.activity+.more{align-self:flex-start;margin-top:4px}
.sub-pane{min-width:0;display:flex;flex-direction:column;gap:6px}
.activity.history summary{align-items:center}
.activity .st{flex:none;font-size:12px;padding:1px 8px;border-radius:10px;background:var(--surface-2);color:var(--ink)}
.activity .denied .st{background:var(--risk-soft);color:var(--risk)}
.activity .approved .st,.activity .auto .st{background:var(--good-soft);color:var(--good)}
.activity .pending .st{background:var(--l2-soft);color:var(--l2)}
.ap-body{display:flex;flex-direction:column;gap:6px;padding:0 0 8px;color:var(--ink)}
.h-sub{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--muted)}
.activity{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.activity li{border-bottom:1px solid var(--surface-2);font-size:13px;line-height:1.4;color:var(--muted)}
.activity li.blocked{color:var(--risk)}
.activity summary,.activity .row{display:flex;justify-content:space-between;gap:8px;padding:6px 0;cursor:default}
.activity summary{cursor:pointer}
.activity .t{min-width:0;overflow-wrap:anywhere}
.activity .when{flex:none;color:var(--faint);font-size:12px}
.activity pre{margin:0 0 8px;padding:8px;max-height:160px;overflow:auto;background:var(--surface-2);font-family:var(--mono);font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.col-details>*{flex-shrink:0}
.agent-btn{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:44px;padding:10px;border:0;border-radius:8px;text-align:left;background:var(--surface);color:var(--ink)}
.agent-btn .name-row{display:flex;align-items:center;gap:6px;min-width:0}.agent-btn .name{font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-btn[aria-pressed="true"]{background:var(--brand);color:var(--surface)}
.agent-btn[data-agent]{min-height:35px;padding-top:6px;padding-bottom:6px;align-items:center} /* agent cards about 20% thinner (Gabriel, 2026-11-03) */
.agent-btn .agent-handle{flex:none;align-self:center;padding:1px 6px;border-radius:5px;background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:700;line-height:1.4;cursor:pointer} /* the agent's @ handle next to its name; opens its profile (Gabriel, 2026-11-03) */
.agent-btn .agent-handle:hover{box-shadow:0 0 0 1px var(--brand)}
.agent-btn[aria-pressed="true"] .agent-handle{background:#fff;color:var(--brand)}
.undo-bar.archive{border-color:var(--l2);background:var(--l2-soft)} /* archived: amber, not red (Gabriel, 2026-11-03) */
.undo-bar.archive button{border-color:var(--l2);color:var(--l2)}
.agent-btn .sub{font-size:13px;line-height:1.2;color:var(--muted)}
.agent-btn[aria-pressed="true"] .sub{color:var(--surface)}
.dot{flex:none;margin-top:4px;width:10px;height:10px;border-radius:50%;border:2px solid var(--brand);background:var(--brand)}
.dot.probation{background:transparent}
.dot.leave{background:transparent;border-color:var(--muted)}
.dot.candidate{background:transparent;border-style:dashed}
.agent-btn[aria-pressed="true"] .dot{border-color:var(--surface)}
.agent-btn[aria-pressed="true"] .dot:not(.probation):not(.leave):not(.candidate){background:var(--surface)}
/* Groups, under the agents: a square with the member count instead of a status dot. */
.groups-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 4px 8px}
.group-mark{flex:none;display:grid;place-items:center;min-width:20px;height:20px;padding:0 3px;border:1.5px solid currentColor;font-size:11px;font-weight:700;line-height:1}
.new-group{display:flex;flex-direction:column;gap:10px;padding:16px;max-width:560px}
.new-group input[type="text"],.new-group input:not([type]){min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.new-group fieldset{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;border:0}
.new-group legend{margin-bottom:6px}
.new-group .pick{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 8px;border-radius:8px}
.new-group .pick:hover{background:var(--surface-2)}
.new-group .pick .muted{margin-left:auto;font-size:13px}
/* Agent list: no open conversations is quieter; new replies and waiting approvals stand out, with the reason in words too. */
.agent-btn.quiet:not([aria-pressed="true"]){background:transparent;color:var(--muted)}
.agent-btn.quiet:not([aria-pressed="true"]) .dot{opacity:.55}
.agent-btn.fresh:not([aria-pressed="true"]) .sub{color:var(--brand);font-weight:600}
.agent-btn.attn:not([aria-pressed="true"]){box-shadow:inset 3px 0 0 var(--attn)}
.agent-btn.attn:not([aria-pressed="true"]) .sub{color:var(--attn);font-weight:600}
.agent-btn.done-fresh:not([aria-pressed="true"]){border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,var(--surface));box-shadow:inset 3px 0 0 var(--good)} /* completed, unread (PB-0886) */
/* Beta: an orange tag that keeps its colors when the agent is selected, waiting or unread */
.agent-btn .sub.beta,.agent-btn[aria-pressed="true"] .sub.beta,.agent-btn.attn:not([aria-pressed="true"]) .sub.beta,.agent-btn.fresh:not([aria-pressed="true"]) .sub.beta{flex:none;align-self:center;padding:1px 6px;border-radius:4px;background:var(--l2-soft);color:var(--l2);font-size:12px;font-weight:600}
/* On leave: the same tag in grey */
.agent-btn .sub.beta.leave,.agent-btn[aria-pressed="true"] .sub.beta.leave,.agent-btn.attn:not([aria-pressed="true"]) .sub.beta.leave,.agent-btn.fresh:not([aria-pressed="true"]) .sub.beta.leave{background:var(--surface-2);color:var(--muted)}
.pip{flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}
.pip.fresh{width:10px;height:10px;background:var(--brand)}
/* Number badges sit at the right end of the card, inside it. */
.pips{flex:none;margin-left:auto;align-self:center;display:inline-flex;gap:4px}
.pips .pip.pip{margin-left:0}
.pip.attn,.pip.live,.pip.idle{margin-left:auto}
.pip.attn{background:var(--attn);color:var(--on-attn)} /* approvals waiting: orange, like the approval cards */
.pip.live{background:var(--brand);color:var(--surface)}
.pip.idle{background:var(--line);color:var(--muted)}
.pip.done{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:12px;font-weight:600;margin-left:auto;background:var(--good);color:var(--surface)} /* a member's tickets all done (Gabriel, 2026-11-04) */
/* The Agents and Squads tab sums (PB-0890): unread and approvals on top, the light count below, at the tab's right edge */
.tab-pips{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.tab-pips-row{display:flex;gap:3px}
.tab-pips-row:empty{display:none}
.tab-pips .pip{margin-left:0;min-width:17px;height:17px;padding:0 5px;font-size:11px}
.agent-btn[aria-pressed="true"] .pip.live{background:var(--surface);color:var(--brand)}
.agent-btn[aria-pressed="true"] .pip{box-shadow:0 0 0 2px var(--surface)}
.thread-btn.fresh .t{font-weight:700}
.thread-btn.fresh .w::before{content:"Unread · ";color:var(--brand);font-weight:700}
/* Right-click menu (conversation cards, agents) */
.ctx-menu{position:fixed;z-index:1000;display:flex;flex-direction:column;min-width:200px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.ctx-menu button{min-height:34px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--ink);font-size:14px;text-align:left}
/* Only the item under the mouse, or reached with the arrow keys, gets a light tint; nothing turns solid */
.ctx-menu button:focus{outline:none}
.ctx-menu button:hover,.ctx-menu button:focus-visible{background:var(--brand-soft);color:var(--ink)}
.ctx-menu:hover button:focus-visible:not(:hover){background:transparent}
.ctx-menu button.danger{color:var(--risk)}
.ctx-menu button.danger:hover,.ctx-menu button.danger:focus-visible{background:var(--risk-soft);color:var(--risk)}
.ctx-menu button:disabled{background:transparent;color:var(--faint);cursor:default}
.ctx-sep{height:1px;margin:4px 6px;background:var(--line)}
.threads-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 0 8px}
.btn-primary{min-height:36px;padding:0 12px;border:0;border-radius:8px;background:var(--brand);color:var(--surface);font-size:13px;white-space:nowrap}
.btn-primary:disabled{opacity:.5;cursor:default}
.filter-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:0 12px;border:1px solid var(--brand);border-radius:8px;background:var(--surface);color:var(--brand);font-size:13px;text-align:left}
.conv-search{width:100%;min-height:36px;font-size:13px}
.search-note{margin:0 4px;font-size:12px;color:var(--muted)}
.thread-btn .snip{font-size:12px;line-height:1.35;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pfx-row{display:flex;flex-wrap:wrap;gap:6px}
.pfx-chip{min-height:0;padding:2px 10px;line-height:1.3;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:600}
.pfx-clear{padding:2px 4px;border:0;background:none;color:var(--brand);font-size:12px;text-decoration:underline}
.pfx-chip.in{background:var(--brand);color:var(--surface);border-color:var(--brand)}
.pfx-chip.out{background:var(--surface-2);color:var(--muted);border-color:var(--line);text-decoration:line-through}
.filter-menu{border:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:2px;background:var(--surface)}
.filter-menu button{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 8px;border:0;border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px;text-align:left}
.filter-menu button[aria-pressed="true"]{background:var(--surface-2)}
.radio{flex:none;width:10px;height:10px;border-radius:50%;border:2px solid var(--brand)}
[aria-pressed="true"] > .radio{background:var(--brand)}
.thread-btn{display:flex;flex-direction:column;gap:4px;width:100%;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:8px;text-align:left;background:var(--surface);color:var(--ink)}
.thread-btn[aria-pressed="true"]{background:var(--surface-2);border-color:var(--brand)}
.thread-btn .t{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.thread-btn .w{font-size:12px;color:var(--muted)}
.thread-btn .s{font-size:12px;color:var(--muted)}
.thread-btn .s.on{color:var(--brand)}
.thread-btn .s.need{color:var(--brand);font-weight:700}
.chat-head{padding:16px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat-head>div:first-child{flex:1 1 0} /* the title takes what the buttons leave, so a Stop button never pushes them under it */
.chat-head>div+div{flex:none}
.chat-head p{margin:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-chip{display:inline-block;margin-top:4px;padding:3px 8px;font-size:12px;background:var(--l2-soft);color:var(--l2);border:1px solid var(--l2)}
.note-chip.private{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
.btn-ghost{min-height:40px;padding:0 14px;border:1px solid var(--ink);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px}
.log{position:relative;height:calc(100vh - 348px);min-height:380px;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;flex-direction:column;gap:4px;max-width:78%}
.msg .by{font-size:16px;color:var(--muted)}
.msg .by time{font-size:14px;margin-left:6px;opacity:.8}
.msg.cont{margin-top:-10px} /* a follow-up from the same sender in the same minute: no sender line, 4px under the one before */
.chat-time{align-self:center;font-size:14px;color:var(--muted);margin:8px 0 2px}
.chat-time b{font-weight:600}
.msg.user{align-self:flex-end;align-items:flex-end}
.msg.user .bubble{background:var(--brand);color:var(--surface);border:1px solid var(--brand);padding:10px 14px;font-size:19px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.user .bubble ::selection,.msg.user .bubble::selection{background:var(--surface);color:var(--brand)}
.msg.agent{align-self:flex-start}
.msg.agent .bubble{background:var(--surface-2);color:var(--ink);padding:10px 14px;font-size:19px;line-height:1.45;overflow-wrap:anywhere}
.msg .bubble{border-radius:20px;padding:10px 16px}
.msg.user .bubble{border-radius:20px 20px 6px 20px}
.msg.agent .bubble{border-radius:20px 20px 20px 6px}
.bubble p{margin:0 0 8px}.bubble p:last-child{margin-bottom:0}
/* Long lines wrap (PB-0312) and a long block scrolls up and down inside itself, at most 40% of the window tall (PB-0313). */
.bubble pre{background:var(--surface);padding:8px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:40vh;overflow-y:auto;font-family:var(--mono);font-size:16px}
.bubble code{font-family:var(--mono);font-size:17px}
.bubble .copyable{display:flex;flex-direction:column;margin:0 0 8px}.bubble .copyable:last-child{margin-bottom:0}
.bubble .copyable>pre,.bubble .copyable>blockquote{margin-top:4px;margin-bottom:0}
.bubble .copy-btn{align-self:flex-end}
/* Copy on the Markdown note pop-up sits on the note body's top right, like the Copy on a prompt (PB-0704) */
.note-copyable{display:flex;flex-direction:column}.note-copyable>.copy-btn{align-self:flex-end;margin-bottom:4px}
dialog.repo-file{width:min(1500px,calc(100vw - 32px));max-height:min(80vh,calc(100vh - 48px));border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:16px 20px}
dialog.repo-file[open]{display:flex;flex-direction:column;overflow:hidden}
dialog.repo-file>*{flex:none}
dialog.repo-file .diff{max-height:30vh;overflow:auto}
dialog.repo-file .rf-text{flex:1 1 auto;min-height:80px;overflow:auto;margin-bottom:0}
dialog.repo-file::backdrop{background:rgba(0,0,0,.45)}
dialog.repo-file .rf-head{display:flex;flex-direction:column;gap:10px;align-items:flex-start} /* the whole name on one or two rows, the buttons in one row under it (Gabriel, 2026-11-03) */
dialog.repo-file h2{margin:0;font-family:var(--mono);font-size:19px;overflow-wrap:break-word;width:100%}
dialog.repo-file p{font-size:16px}
dialog.repo-file pre{background:var(--surface-2);padding:12px;overflow-x:auto;font-family:var(--mono);font-size:17px;line-height:1.5;white-space:pre-wrap}
dialog.repo-file .diff .add{color:var(--good);background:var(--good-soft)}
dialog.repo-file .diff .del{color:var(--risk);background:var(--risk-soft)}
.fref{font-family:var(--mono);font-size:17px;color:var(--brand);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
button.fref{border:0;padding:0;background:transparent;cursor:pointer}
a.fref{display:inline-flex;align-items:center;gap:3px}
.fref.off{color:var(--muted);text-decoration:none}
span.fref{color:inherit;text-decoration:none} /* still looking, or not shown: plain text, never styled as a link that does nothing (Gabriel, 2026-11-04) */
.cref{font-family:var(--mono);font-size:.92em;color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.cref code{color:inherit}
.bubble table{border-collapse:collapse;font-size:17px;margin:6px 0}.bubble th,.bubble td{border:1px solid var(--line);padding:4px 6px;text-align:left}
.bubble ul,.bubble ol{margin:4px 0 8px;padding-left:20px}
.tool-line{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:17px;color:var(--muted);max-width:90%}
.tool-line span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.typing .bubble{display:flex;gap:5px;align-items:center;padding:14px 16px}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.35;animation:typing 1.2s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.6}}
.working{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:17px;color:var(--brand)}
/* Where unread messages start in a chat or team thread (Gabriel, 2026-11-04). */
.new-line{align-self:stretch;display:flex;align-items:center;gap:10px;margin:6px 0;color:var(--risk);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.new-line::before,.new-line::after{content:"";flex:1 1 auto;height:1px;background:var(--risk)}
.system{align-self:center;max-width:85%;text-align:center;font-size:17px;color:var(--muted);padding:6px 12px;border:1px solid var(--line)}
.system.squad-ctx{font-size:14px}
.system.squad-ctx summary{cursor:pointer}
.squad-ctx-body{margin-top:6px;text-align:left;white-space:pre-wrap;line-height:1.45}
.system.blocked{color:var(--risk);border-color:var(--risk);background:var(--risk-soft)}
.approval{align-self:flex-start;width:100%;max-width:560px;border:2px solid var(--brand)}
.approval .a-band{background:var(--l2-soft);color:var(--ink);padding:6px 14px;font-size:13px;font-weight:700}
.approval.decided .a-band{background:var(--surface-2)}
.approval .body{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.approval .title{font-size:16px}
.approval .multi-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.approval .multi-item{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--line)}
.approval .meta{font-size:12px;color:var(--muted)}
.approval .why{font-size:14px;line-height:1.4}
.approval .tech summary{font-size:13px;color:var(--muted);cursor:pointer}
.approval .tech[open]{display:flex;flex-direction:column;gap:6px}
.approval pre{margin:0;max-height:220px;overflow:auto;padding:8px;background:var(--surface-2);font-family:var(--mono);font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.approval .actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.approval .approve{min-height:44px;padding:0 20px;border:0;border-radius:8px;background:var(--brand);color:var(--surface);font-size:15px}
.approval .deny{min-height:44px;padding:0 20px;border:1px solid var(--ink);border-radius:8px;background:var(--surface);color:var(--ink);font-size:15px}
.composer{border-top:1px solid var(--line);padding:14px 24px 18px;display:flex;flex-direction:column;gap:6px}
.composer label{font-size:13px;color:var(--muted)}
#drop-veil{position:fixed;z-index:9999;pointer-events:none;box-sizing:border-box;border:2px dashed var(--brand);border-radius:10px;overflow:visible}
#drop-veil[hidden]{display:none}
#drop-veil span{position:absolute;white-space:nowrap;padding:4px 10px;border-radius:8px;background:var(--brand);color:#fff;font-weight:600;font-size:14px}
.composer .row{display:flex;gap:8px;align-items:flex-end}
/* @-mentions (Gabriel, 2026-11-04): a tag in a sent message, and a highlight behind the text while it is typed. */
.bubble .mention{display:inline-block;padding:1px 6px;border:0;border-radius:5px;background:#fff;color:var(--brand);font:inherit;font-size:.8em;font-weight:700;line-height:1.3;vertical-align:1px;cursor:pointer} /* smaller than the text around it (Gabriel, 2026-11-04) */
.bubble .mention:hover{background:rgba(255,255,255,.85)} /* white on your blue bubble, brand-blue text, for contrast (Gabriel, 2026-11-03) */
/* The agent card and quick chat (Gabriel, 2026-11-04). */
dialog.repo-file.note-card.agent-card{width:min(560px,calc(100vw - 32px))}
.agent-card .ac-head{display:flex;align-items:center;gap:14px}
.agent-card .ac-avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--brand);color:var(--surface);font-family:var(--display);font-size:20px;font-weight:700}
.agent-card .ac-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.agent-card .ac-who h2{margin:0;font-family:var(--display);font-size:22px}
.agent-card .ac-who .muted{font-size:13px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.agent-card .ac-tenure{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;line-height:1.3} /* tenure (Gabriel, 2026-11-03) */
.agent-card .ac-tenure b{font-family:var(--display);font-size:18px}
.agent-card .ac-tenure .muted{font-size:12px}
.agent-card .ac-mission{margin:12px 0 0;font-size:15px;line-height:1.45}
.agent-card .ac-line{margin:6px 0 0;font-size:13px}
.agent-card .ac-sec{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.agent-card .ac-sec .bignums b{font-size:22px}
.agent-card .ac-convs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.agent-card .ac-convs button{display:flex;justify-content:space-between;gap:10px;width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font-size:14px;text-align:left}
.agent-card .ac-convs button:hover{border-color:var(--brand)}
.agent-card .ac-convs .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-card .ac-actions{display:flex;gap:8px;margin-top:16px}
dialog.repo-file.note-card.quick-chat{width:min(620px,calc(100vw - 32px))}
.quick-chat .qc-log{flex:1 1 auto;min-height:160px;max-height:52vh;overflow-y:auto;padding:8px 0;display:flex;flex-direction:column;gap:10px}
.quick-chat .qc-wait{margin:6px 0 0;font-size:13px;color:var(--l2)}
.quick-chat .qc-form{padding:10px 0 0;border-top:1px solid var(--line)}
.msg.agent .bubble .mention,.bubble.quick .mention{background:var(--brand-soft);color:var(--brand)}
.mention-wrap{position:relative;display:flex;flex:1 1 auto;min-width:0;border-radius:8px;background:var(--surface)}
.mention-wrap>textarea{position:relative;z-index:1;background:transparent!important}
.mention-hl{position:absolute;inset:0;box-sizing:border-box;border:solid transparent;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;overflow:hidden;color:transparent;pointer-events:none}
.mention-hl mark{color:transparent;background:var(--brand-soft);border-radius:4px;box-shadow:0 0 0 2px var(--brand-soft),0 0 0 3px var(--brand)}
.composer textarea{flex-grow:1;min-width:0;min-height:48px;box-sizing:border-box;padding:10px 12px;border:1px solid var(--muted);border-radius:8px;font-size:19px;line-height:26px;color:var(--ink);background:var(--surface);resize:none;overflow-y:auto}
.msg.user .bubble.quick{background:none;border:0;padding:0}
/* Quick reply: a light blue suggestion that turns full blue, like a sent message, once pressed */
.bubble.quick .btn-primary{min-height:44px;padding:0 22px;border:1.5px solid var(--brand);border-radius:20px 20px 6px 20px;background:var(--brand-soft);color:var(--brand);font-weight:600;transition:background .12s,color .12s}
.bubble.quick .btn-primary{padding-top:10px;padding-bottom:10px;text-align:left;line-height:1.4;font-size:19px} /* the size of the messages around it (PB-0359) */
.bubble.quick .btn-primary:hover{background:color-mix(in srgb,var(--brand) 18%,var(--brand-soft))}
.bubble.quick .btn-primary:active,.bubble.quick .btn-primary[aria-pressed="true"],.bubble.quick .btn-primary[aria-pressed="true"]:disabled{background:var(--brand);color:var(--surface);opacity:1}
/* A choice: one reply bubble per path, or ticks and Send for three or more (Gabriel, 2026-11-04, PB-0686) */
.bubble.quick.qr-pair{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.bubble.quick.qr-multi{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bubble.quick.qr-multi fieldset{display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 14px;border:1.5px solid var(--brand);border-radius:16px 16px 6px 16px;background:var(--brand-soft);color:var(--ink);font-size:17px}
.bubble.quick.qr-multi legend{padding:0 4px;color:var(--brand);font-size:13px;font-weight:600}
.bubble.quick.qr-multi label{display:flex;align-items:center;gap:8px;cursor:pointer}
.bubble.quick.qr-multi input{width:18px;height:18px;accent-color:var(--brand)}
.composer .attach{flex:none;box-sizing:border-box;width:48px;height:48px;border:1px solid var(--muted);border-radius:8px;background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:13px}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip button{min-width:24px;min-height:24px;border:0;background:none;color:var(--ink);font-size:16px;line-height:1;cursor:pointer}
/* A waiting file's name opens its preview (PB-0800): it reads as the name, not as a big button. */
.chip .chip-pv{min-width:0;padding:0;font:inherit;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline dotted;text-underline-offset:3px}
.msg.user .att-img{display:block;max-width:100%}
.msg.user .att-img img{display:block;max-width:100%;max-height:360px;border-radius:18px;border:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.12),0 6px 18px rgba(0,0,0,.14)}
.msg.user .bubble .chip.sent{display:flex;margin:0 0 6px;background:var(--brand);color:var(--surface);border-color:var(--surface);overflow-wrap:anywhere;white-space:normal}
.msg.user .bubble .chip.sent.pv{width:100%;font:inherit;font-size:13px;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer;box-sizing:border-box}
.pv-text{flex:1;min-height:0;overflow:auto;margin:0;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font-family:var(--mono);font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
/* A card's Preview (PB-0903): each message as a light block, read only */
.pv-msg{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.pv-text-md{font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.pv-text-md p,.pv-text-md ul,.pv-text-md ol{margin:0 0 6px;white-space:normal}
.composer .mic.on{border-color:var(--risk);background:var(--risk-soft);color:var(--risk)}
.composer .dict-status{margin:0;font-size:13px;color:var(--muted)}
.composer .dict-status meter{width:160px;height:10px;vertical-align:middle}
.composer .send{flex:none;box-sizing:border-box;height:48px;padding:0 22px;border:0;border-radius:8px;background:var(--brand);color:var(--surface);font-size:15px}
.empty{margin:8px;font-size:14px;color:var(--muted);line-height:1.4}
dl.facts{margin:0;display:grid;gap:10px;font-size:14px}
dl.facts dt{color:var(--muted);font-size:12px}
dl.facts dd{margin:2px 0 0;line-height:1.4;overflow-wrap:anywhere}
.howto{display:flex;flex-direction:column;gap:10px;background:var(--surface-2);padding:16px}
.howto ol,.howto ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.4}
.actions-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.actions-list li{display:flex;justify-content:space-between;gap:8px;font-size:14px;padding-bottom:8px;border-bottom:1px solid var(--surface-2)}

/* Harness */
.harness{display:flex;flex-direction:column;flex-grow:1;padding:16px 24px 32px;gap:14px}
.stats{display:flex;flex-wrap:wrap;gap:8px 28px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{display:flex;align-items:baseline;gap:6px}.stats b{font-family:var(--display);font-size:22px}.stats span{font-size:13px;color:var(--muted)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.lenses{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* Harness: the numbers, Ask the map, search and the view switch on one row (it wraps only on a narrow window) */
.h-bar{justify-content:flex-start;gap:10px 14px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.h-bar .stats{gap:4px 10px;padding:0;border:0}
.h-bar .stats div{gap:5px}.h-bar .stats b{font-size:20px}.h-bar .stats span{font-size:14px} /* sized so the bar fits one row (Gabriel, 2026-11-03) */
.h-bar .lenses{gap:6px}
.h-bar .lens{min-height:32px;padding:0 8px}
/* Spacing comes from the three spacers, not the row gap. The 80px kept between the numbers and the Ask the map
   buttons (Gabriel, 2 Nov 2026) is split 40/40 before and after the numbers, and spare width goes a quarter before
   the numbers, a quarter after them and half before the search box: the buttons sit halfway to the search box and
   the numbers halfway to the buttons. The search box and view switch stay at the right end. */
.h-bar{column-gap:0}
.h-bar .h-gap{flex:1 1 8px;min-width:8px}
.h-bar .h-gap.wide{flex:2 1 14px}
.h-bar #h-search{width:180px}
.lens{min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px}
.lens[aria-pressed="true"]{background:var(--brand);color:var(--surface);border-color:var(--brand)}
.search{width:230px;max-width:100%;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--ink);background:var(--surface)}
.search[aria-invalid="true"]{border-color:var(--attn);box-shadow:0 0 0 1px var(--attn)}
.h-body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
/* The Ticket Map (Gabriel, 2026-11-03): the map scrolls sideways when its steps run wider than the page. */
.tm-wrap{overflow-x:auto;padding-bottom:4px}
.tm-graph{position:relative;height:calc(100vh - 300px);border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.fg-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.fg-canvas.still{position:absolute;inset:0;pointer-events:none}
/* The vault graph: a still copy at the top of Agent Knowledge that opens the full one in a card (Gabriel, 2026-11-03). */
.k-top{display:flex;gap:16px;align-items:stretch}
.k-top-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:16px}
.vg-card{flex:none;width:312px;display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;cursor:pointer;text-align:left}
.vg-card:hover{border-color:var(--brand)}
.vg-mini{position:relative;display:block;flex:1 1 auto;min-height:170px} /* about 30% bigger each way (Gabriel, 2026-11-03) */
.vg-cap{padding:6px 10px;border-bottom:1px solid var(--line);font-size:24px;font-weight:700;color:var(--ink);text-align:center} /* the name on top, centred, bold, twice the old size (Gabriel, 2026-11-03) */
.flash-note{position:fixed;z-index:2000;padding:4px 10px;border-radius:6px;background:var(--brand);color:var(--surface);font-size:13px;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.2);pointer-events:none;transition:opacity .3s}
.flash-note.out{opacity:0}
dialog.repo-file.note-card.vg-node{width:min(820px,calc(100vw - 32px))}
.vg-node-body{display:flex;flex-direction:column;min-height:0;overflow:auto}
dialog.repo-file .vg-node-body{flex:1 1 auto} /* the card scrolls to its end (PB-0820) */
.vg-linked[hidden]{display:none}
.vg-node-body>*{flex:none}
.vg-node-files{max-height:34vh}
.lv-tag.cr-tag.team-tag{background:var(--preview);color:var(--surface);border-color:var(--preview)} /* a TEAM thread's ID (Gabriel, 2026-11-04) */
.card.onb-cancelled{opacity:.7}
.pin-sep{display:flex;align-items:center;gap:8px;margin:6px 4px 2px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pin-sep::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.pin-sep:first-child{margin-top:0}
.team-drafts{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--attn);border-radius:8px;background:var(--l2-soft)}
.team-draft{display:flex;flex-direction:column;gap:6px} /* a cancelled onboarding, at the bottom of the board (Gabriel, 2026-11-04) */
.note-links{margin:0 0 10px}
.vg-filters{margin:6px 0 2px;gap:6px}
.vg-filters .vg-sep{width:1px;align-self:stretch;margin:0 4px;background:var(--line)}
.vg-node-text{max-height:40vh}
dialog.repo-file.note-card.vg-dialog{width:min(1170px,calc(100vw - 32px))} /* 30% wider than a note card (900px), Gabriel, 2026-11-03 */
.vg-host{height:min(72vh,760px);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
@media (max-width:700px){.vg-card{display:none}}
.tm-wrap .map{min-width:0}
.tm-sel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.node.tm .lbl>span:first-child{display:flex;align-items:center;gap:6px}
.h-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:14px}
.map{position:relative;min-width:640px}
.band{position:absolute;left:0;right:0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.band-label{position:absolute;left:2%;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.band-label.sub{font-size:12px}
.map svg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:1}
.node{position:absolute;z-index:2;height:44px;display:flex;align-items:center;gap:7px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);text-align:left;font-size:13px}
.node.agent{font-size:14px}
.node[aria-pressed="true"]{border:2px solid var(--ink)}
.node.dim{opacity:.25}
.node.lens-hit{border:2px solid var(--l2);background:var(--l2-soft);font-weight:600}
.node.leaf{height:32px}
.node.cat{font-weight:600;background:var(--surface-2)}
.node .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;gap:2px;min-width:0}
.acc{align-self:flex-start;padding:0 4px;font-size:10px;line-height:14px;border:1px solid}
.acc.read,.lv.L1{background:var(--l1-soft);color:var(--l1);border-color:var(--l1-soft)}
.acc.limited,.lv.L2{background:var(--l2-soft);color:var(--l2);border-color:var(--l2-soft)}
.acc.write,.lv.L3{background:var(--l3-soft);color:var(--l3);border-color:var(--l3-soft)}
.lv{display:inline-block;margin:0 1px;padding:2px 5px;font-size:10px;border:1px solid}
.gov li.issue.hl{background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.matrix tr.hl td{background:var(--l2-soft);box-shadow:inset 0 1px 0 var(--l2),inset 0 -1px 0 var(--l2)}
.matrix{overflow-x:auto;border:1px solid var(--line)}
.matrix table{border-collapse:collapse;width:100%;font-size:12px}
.matrix th,.matrix td{padding:6px;border-bottom:1px solid var(--surface-2);text-align:center}
.matrix thead th{font-weight:400;color:var(--muted);vertical-align:bottom;white-space:nowrap;border-bottom:1px solid var(--line)}
.matrix tbody th{text-align:left;background:var(--surface);position:sticky;left:0;padding:0}
.matrix tbody th button{width:100%;min-height:40px;padding:0 10px;border:0;background:transparent;color:var(--brand);font-size:13px;text-align:left;white-space:nowrap}
.panel{flex:1 1 340px;min-width:0;border:1px solid var(--line);display:flex;flex-direction:column;background:var(--surface)}
/* Beside the Tree, which takes only its own width, the details panel fills the rest of the row. */
.tree-mode .panel{flex:1 1 340px;zoom:1.2}
/* Matrix view: the matrix takes the whole width, the details card goes below it, and the text is larger */
.matrix-mode .h-main,.matrix-mode .panel{flex:1 1 100%}
.h-matrix table{font-size:15px}
.h-matrix th,.h-matrix td{padding-left:5px;padding-right:5px}
.h-matrix thead th{padding-top:10px;padding-bottom:10px;white-space:normal;min-width:60px} /* long system names wrap, so the table fits the width */
.h-matrix tbody th button{min-height:46px;font-size:16px}
.h-matrix .acc,.h-matrix .lv{padding:3px 8px;font-size:13px;line-height:18px}
.panel .ph{padding:16px 18px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.kind{align-self:flex-start;padding:3px 7px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--surface-2)}
.panel .pb{padding:14px 18px 20px;display:flex;flex-direction:column;gap:16px}
.panel h3{margin:0;font-size:12px;font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rows{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.rows li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4}
.rows li .lv{flex:none;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:12px}
.foot{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted)}

/* Knowledge */
.knowledge{display:flex;flex-wrap:wrap;align-items:stretch;flex-grow:1}
.k-tree{flex:1 1 322px;min-width:0;padding:16px 12px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 170px);overflow-y:scroll;scrollbar-width:auto;scrollbar-color:var(--faint) var(--surface-2)} /* scroll and scrollbar-color: always shown, never the fading overlay bar */
.k-row{display:flex;align-items:center;gap:2px;border-radius:8px;color:var(--ink)}
.k-row:has(> .k-node[aria-pressed="true"]){background:var(--brand);color:var(--surface)}
.k-tog{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:4px;padding:0;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:700;line-height:1}
.k-chev{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:4px;padding:0;border:0;border-radius:5px;background:transparent;color:inherit}
.k-chev svg{transition:transform .12s}
.k-chev[aria-expanded="false"] svg{transform:rotate(-90deg)}
.k-chev:hover{background:rgba(127,127,127,.18)}
.k-tog-none{flex:none;width:22px;height:22px;margin-left:4px} /* a folder with no subfolders: the space of a sign, no frame (Gabriel, 2026-11-03) */
button.k-tog:hover,.org-toggle:hover .k-tog{border-color:var(--brand);color:var(--brand)}
.k-node{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;min-height:36px;padding:0 10px 0 6px;border:0;border-radius:8px;background:transparent;color:inherit;font-size:14px;text-align:left}
.k-searchbar{display:flex;gap:8px;width:100%;max-width:640px}
.k-searchbar select{flex:none;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px}
.k-searchbar input{flex:1 1 auto;min-width:0;box-sizing:border-box}
.k-node .n{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-node .c{flex:none;margin-left:auto;font-size:12px;opacity:.75}
.k-node .k-lock{flex:none;display:inline-flex;margin-left:2px;opacity:.75} /* right of the name (Gabriel, 2026-11-04) */
/* The two vault roots: tinted blue, bold, with a blue edge, selected or not; a gap sets the personal vault apart */
.k-root{min-height:42px;font-weight:700;border-left:5px solid var(--brand);background:var(--brand-soft)}
.k-root.personal{margin-top:14px}
.k-root .k-node{font-weight:inherit;min-height:42px}
.k-main{flex:999 1 460px;min-width:0;padding:20px 24px;display:flex;flex-direction:column;gap:16px;border-right:1px solid var(--line)}
.k-side{flex:1 1 260px;min-width:0;padding:20px;display:flex;flex-direction:column;gap:18px}
.bignums{display:flex;flex-wrap:wrap;gap:24px}.bignums div{display:flex;flex-direction:column;gap:2px}.bignums b{font-family:var(--display);font-size:28px}.bignums span{font-size:12px;color:var(--muted)}
.files{margin:0;padding:0;list-style:none;border:1px solid var(--line);max-height:calc(100vh - 380px);overflow-y:auto}
.files li{border-bottom:1px solid var(--surface-2)}
.files li button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:transparent;color:inherit;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.files li button:hover{background:var(--surface-2)}
.files li button[aria-pressed="true"]{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--brand)}
.k-file{display:flex;flex-direction:column;gap:6px}
.k-file-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.k-file .cr-body{max-height:none}
/* An opened file reads at the same size as a conversation bubble (19px body, 17px code and tables, 16px code blocks). */
.k-file .cr-body,.cr-body.k-file{font-size:19px;line-height:1.45}
.k-file .cr-body h1,.cr-body.k-file h1{font-size:24px;margin:14px 0 6px}
.k-file .cr-body h2,.cr-body.k-file h2{font-size:21px;margin:14px 0 6px}
.k-file .cr-body h3,.cr-body.k-file h3{font-size:19px;margin:12px 0 6px}
.k-file .cr-body code,.cr-body.k-file code{font-family:var(--mono);font-size:17px}
.k-file .cr-body table,.cr-body.k-file table{font-size:17px}
.k-file pre{white-space:pre-wrap;word-break:break-word;margin:0;font-family:var(--mono);font-size:16px}
.k-file pre.fm{color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px}
.files li .n{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files li .d{flex:none;font-size:12px;color:var(--muted)}

/* Change requests */
.cr{display:flex;flex-wrap:wrap;align-items:flex-start;flex-grow:1}
.board{flex:999 1 640px;min-width:0;padding:16px 24px;display:flex;flex-wrap:wrap;gap:12px;border-right:1px solid var(--line)}
.board .colm{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:8px}
/* Handoffs: Open on top (70% of the height), Done below (30%), each full width. The page fits the window; Open, Done and the
   note beside them each scroll on their own, with the column headers kept in view. */
.cr-stack{flex-wrap:nowrap;align-items:stretch;height:calc(100vh - 350px);min-height:420px}
.cr-stack .cr-side{height:100%;box-sizing:border-box;overflow-y:auto}
.board.stack{flex-direction:column;flex-wrap:nowrap;gap:16px;height:100%;box-sizing:border-box}
.board.stack .colm{min-height:0;overflow-y:auto}
.board.stack .colm:first-child{flex:7 1 0}
.board.stack .colm:last-child{flex:3 1 0}
.board.stack .colm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start}
.board.stack .colm>h2,.board.stack .colm>.empty{grid-column:1/-1}
.board.stack h2{position:sticky;top:0;z-index:1}
/* Change requests: Open and Pending side by side on top (60% of the height), Applied and Declined below (40%), each column
   scrolling on its own. */
.board.quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:3fr 2fr;gap:16px;height:100%;box-sizing:border-box}
.board.quad .colm{min-height:0;overflow-y:auto}
.board.quad .colm>*{flex-shrink:0}
.board.quad h2{position:sticky;top:0;z-index:1}
/* 3 cards or fewer in Open and Pending: the top row is the height of its header and 3 cards, the bottom row takes the rest. */
.board.quad.compact{grid-template-rows:auto 1fr}
.board.quad.compact .colm:nth-child(-n+2){min-height:calc(33px + 3 * 99px)}
/* Handoff cards: the ID line on the left with From and Acts next stacked on the right, the title below across the card. */
.board.stack .card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id from" "id acts" "title title";gap:2px 12px;align-items:start}
.board.stack .card>:nth-child(1){grid-area:id}.board.stack .card>:nth-child(2){grid-area:title;margin-top:6px}
.board.stack .card>:nth-child(3){grid-area:from;text-align:right}.board.stack .card>:nth-child(4){grid-area:acts;text-align:right}
/* Onboarding: the hiring stages share the top row; Probation, Confirmed and On leave are full-width strips below, cards in up to 3 rows. */
.onb-board{align-content:flex-start}.onb-board .colm{flex-basis:120px}
.onb-board .colm-wide{flex-basis:100%;display:grid;grid-template-columns:repeat(var(--cols),minmax(200px,1fr));gap:8px;overflow-x:auto}
.onb-board .colm-wide>h2,.onb-board .colm-wide>.empty{grid-column:1/-1}
.board h2{margin:0;padding:8px 10px;background:var(--surface-2);font-size:13px;font-family:var(--display);font-weight:700;letter-spacing:.04em;text-transform:uppercase;display:flex;justify-content:space-between}
.card{display:flex;flex-direction:column;gap:6px;width:100%;padding:12px;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:8px;background:var(--surface);color:var(--ink);text-align:left}
.card[aria-pressed="true"]{border-color:var(--brand);background:var(--surface-2)}
.card.applied{border-left-color:var(--good)}.card.declined{border-left-color:var(--muted)}.card.pending{border-left-color:var(--l2)}
.card.draft{border-style:dashed;border-left-style:solid;border-left-color:var(--l2)}
.card .a{font-size:12px;color:var(--muted)}.card .t{font-size:14px;line-height:1.35}
/* Onboarding board: stage colours, and what waits for Gabriel (sign-off, overdue review) in amber. */
.card.onb-probation{border-left-color:var(--l2)}.card.onb-active{border-left-color:var(--good)}.card.onb-leave{border-left-color:var(--muted)}
.card.needs{border-left-color:var(--attn)}
.card.bl-open{border-left-color:var(--l2)}.card.bl-waiting{border-left-color:var(--attn)}.card.bl-done{border-left-color:var(--good)}
.card .a.due{color:var(--attn);font-weight:600}
.cr-side{flex:1 1 360px;min-width:0;padding:20px;display:flex;flex-direction:column;gap:14px}
.cr-body{font-size:13px;line-height:1.5;border:1px solid var(--line);padding:12px;max-height:calc(100vh - 340px);overflow-y:auto;background:var(--surface)}
.cr-body h1,.cr-body h2,.cr-body h3{font-size:15px;margin:12px 0 6px}
.cr-body table{border-collapse:collapse;font-size:12px}.cr-body th,.cr-body td{border:1px solid var(--line);padding:4px 6px}

/* Feature Request: a small margin, the form, a wide gap, then the requests, with room left on the right (Gabriel, 2026-11-02):
   at 1670px the form starts at 64px, its fields and note end at 642px, the requests (534px) start at 885px. Stacked when narrow. */
.fr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:24px 80px;align-items:start;padding:0 14% 0 40px}
.fr-grid .fr-field{width:78%}
/* A thin line between the request form and the cards, in the middle of the gap (PB-0332); above the cards when stacked. */
.fr-list{border-left:1px solid var(--line);margin-left:-40px;padding-left:40px;align-self:stretch}
@media (max-width:900px){.fr-grid{grid-template-columns:minmax(0,1fr);padding:0}.fr-grid .fr-field{width:100%;}.fr-list{border-left:0;margin-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:16px}}

/* Governance */
.gov{display:flex;flex-direction:column;flex-grow:1;padding:16px 24px 32px;gap:14px}
.gov-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.gov-body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
.gov-issues{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:8px}
.gov-detail{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:12px}
.gov-detail h2{margin-top:8px}
/* The register tab (BD-0103): tabs, the risk and control tree, and the design side panel on the right. */
.gov-tabs{display:flex;flex-wrap:wrap;gap:6px}
.gov-tabs .btn-ghost.on{background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.gov-tree{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:4px}
.gov-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;padding:6px 8px;text-align:left;background:none;border:1px solid var(--line, #0002);cursor:pointer;color:inherit;font:inherit}
.gov-row:hover{background:var(--brand-soft)}
.gov-row.ctl{margin-left:20px;width:calc(100% - 20px);border-style:dashed}
.gov-row.ctl.on{background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.gov-t{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.gov-twist{width:12px}
.gov-ctls{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.gov-panel{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:8px;position:sticky;top:8px;max-height:calc(100vh - 24px);overflow:auto;padding:12px;border-left:2px solid var(--brand)}
.gov-ev{margin:0;padding-left:18px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
/* Approval Cards: Most shown card types, then Always approved, share one screen height and scroll on their own. */
.cards-split{height:calc(100vh - 340px);min-height:440px}
.cards-half{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:6px}
.cards-split>.cards-half:first-child{flex-grow:4} /* Most shown card types: 80%, Always approved: 20% */
.cards-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}
.cards-scroll thead th{position:sticky;top:0;z-index:1;background:var(--surface)}
.issue{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--l1);background:var(--surface);font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.issue.high{border-left-color:var(--risk)}.issue.medium{border-left-color:var(--l2)}
.issue-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.issue-head .btn-ghost{min-height:32px;padding:0 10px;font-size:13px;flex-shrink:0}
.cr-tag{vertical-align:1px;font-weight:600}
.lv-tag.cr-tag{background:var(--brand);color:var(--surface);border-color:var(--brand)}
.composer.locked p{margin:0;font-size:14px;color:var(--muted)}
.composer.locked .btn-primary,.composer.locked .btn-outline{min-height:44px}
.btn-ghost.btn-small{min-height:32px;padding:0 10px;font-size:13px;white-space:nowrap}
.lv-tag{align-self:flex-start;display:inline-block;padding:1px 6px;font-size:11px;border:1px solid;font-variant-numeric:tabular-nums} /* equal-width digits, so IDs of one kind are one size (Gabriel, 2026-11-07) */
.lv-tag.risk{background:var(--risk-soft);color:var(--risk);border-color:var(--risk-soft)}
.lv-tag.l2{background:var(--l2-soft);color:var(--l2);border-color:var(--l2-soft)}
.lv-tag.l1{background:var(--l1-soft);color:var(--l1);border-color:var(--l1-soft)}
.lv-tag.l3{background:var(--l3-soft);color:var(--l3);border-color:var(--l3-soft)}
.card-week{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:inherit;font-size:14px;text-align:left}
.card-week[aria-pressed="true"]{border-color:var(--brand);background:var(--surface-2)}
.card-week > span:first-child{flex:0 0 120px}
.card-week .bar{flex:1 1 auto;height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.card-week .bar span{display:block;height:100%;background:var(--brand)}
.gov .matrix td{vertical-align:top;overflow-wrap:anywhere}
.gov .cr-body{max-height:320px}

@media (max-width:700px){
  header.top,nav.modules,.intro,.preview-banner{padding-left:16px;padding-right:16px}
  header.top h1{font-size:18px;white-space:normal;margin-left:0}
  .chat-head{flex-wrap:wrap}
  .chat-head>div:first-child{flex-basis:100%}
  .log{height:60vh}
  .col-agents,.col-details,.col-chat{height:auto}
  .col-details{overflow:visible}
  .col-details>.pane-top,.col-details>.pane-bottom{flex:none;overflow:visible}
  .col-agents{flex:1 1 100%}
  .agents-list,.groups-side{flex:none;overflow:visible}
  .col-chat>.log{flex:none;height:60vh}
  .map{min-width:0}
}
.outputs-side{flex:none;height:calc((100vh - 158px) * .38);min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
.outputs-side .h-label{margin:0 0 6px 4px}
.out-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:var(--ink);font-size:14px;text-align:left;cursor:pointer}
.out-btn:hover{background:var(--surface-2)}
.out-btn[aria-pressed="true"]{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.out-btn .n{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.out-btn .c{font-size:12px;color:var(--muted)}
.col-chat.has-out{height:calc(100vh - 158px);box-sizing:border-box}
.out-view{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:12px;padding:16px 24px 18px}
.out-head{flex:none}
.out-body{flex:1 1 0;min-height:0;overflow-y:auto}
.out-view .files{max-height:none}
.out-view .k-file{max-height:none;border:1px solid var(--line)}
.crumb-file{color:var(--ink);font-weight:600}
.out-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.crumb{border:0;background:transparent;padding:2px 0;color:var(--brand);font-size:14px;cursor:pointer}
.crumb:last-of-type{color:var(--ink);font-weight:600}
.files li a,.files li .file-off{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;color:inherit;font-size:14px;text-decoration:none;box-sizing:border-box}
.files li a:hover{background:var(--surface-2)}
.files li a .n,.files li .file-off .n{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files li a .n{color:var(--brand)}
.files li .file-off{color:var(--muted)}
/* The scroll areas holding these (.log, the details panes) are position:relative, so the span stays inside them and never makes the page scroll. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Knowledge: about 6 files visible (37px rows; the half row hints at more), leaving room to read an open file */
.k-main .files{max-height:242px}
.out-btn.sub{padding-left:28px}
.pend-card{align-self:stretch;flex-shrink:0;border:2px solid var(--attn);border-left-width:6px;border-radius:8px;background:var(--l2-soft);color:var(--ink);overflow:hidden}
.pend-card .pc-band{padding:6px 14px;font-size:13px;font-weight:700;border-bottom:1px solid var(--attn)}
.pend-card .pc-body{padding:10px 14px;display:flex;flex-direction:column;gap:6px;line-height:1.45}
.pend-card .pc-title{font-size:17px;font-weight:700}
.pend-card .pc-why{font-size:15px}
.pend-card .tech summary{font-size:13px;color:var(--muted);cursor:pointer}
.pend-card .tech[open]{display:flex;flex-direction:column;gap:6px}
.pend-card pre{margin:0;max-height:200px;overflow:auto;padding:8px;background:var(--surface);font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.pend-card .meta{font-size:12px;color:var(--muted)}
.pend-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.pend-card .approve{min-height:40px;padding:0 20px;border:0;border-radius:8px;background:var(--attn);color:var(--on-attn);font-size:15px;font-weight:700}
.pend-card .deny{min-height:40px;padding:0 20px;border:1px solid var(--ink);border-radius:8px;background:var(--surface);color:var(--ink);font-size:15px}
.tref{cursor:pointer;font:inherit;font-size:11px;padding:1px 6px;margin:0 1px;vertical-align:1px}
.tref:hover{filter:brightness(1.15);text-decoration:underline}
.auto-btn.on{background:var(--brand);color:var(--surface);border-color:var(--brand)}
.seg button.auto-on[aria-pressed="true"]{background:var(--brand);color:var(--surface)} /* Auto-approve On: no cards, shown in brand blue */
.seg button.auto-partial[aria-pressed="true"]{background:var(--surface);color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)} /* Partial: blue outline, plain fill */
/* The Undo bar after a delete (PB-0297): under the conversation header, in the risk tone (PB-0299, PB-0300), readable in both themes. */
.undo-bar{position:fixed;left:50%;top:170px;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:10px 12px 10px 16px;border-radius:8px;border:1px solid var(--risk);background:var(--risk-soft);color:var(--ink);font-size:14px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.undo-bar span{overflow-wrap:anywhere}
.undo-bar.note-bar{border-color:var(--line);background:var(--surface)}
.undo-bar.note-bar.good{border-color:var(--brand);background:var(--brand-soft)} /* a positive result, blue (Gabriel, 2026-11-04) */
/* A ticket's result for 5 seconds (PB-0774): approved green, declined or cancelled red, an error yellow. */
.undo-bar.note-bar.tk-ok{border-color:var(--good);background:var(--good-soft)}
.undo-bar.note-bar.tk-no{border-color:var(--risk);background:var(--risk-soft)}
.undo-bar.note-bar.tk-err{border-color:var(--l2);background:var(--l2-soft)}
.undo-bar button{flex:none;min-height:32px;padding:0 12px;border:1px solid var(--risk);border-radius:8px;background:var(--surface);color:var(--risk);font-size:14px;font-weight:600}
/* The card a right-click menu acts on (PB-0303): a 2px border in the card's own shape, nothing outside it to clip (PB-0305). */
.ctx-target{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--brand-soft)}
/* A folder right-clicked in Agent Knowledge keeps its own colours: an outline only, white on the selected folder (Gabriel, 2026-11-03). */
.k-node.ctx-target{background:transparent;box-shadow:inset 0 0 0 2px var(--brand)}
.k-node.ctx-target[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--surface)}
/* The one-line text dialog (PB-0306): Rename, in the page's own colors. */
dialog.ask-text{width:min(420px,calc(100vw - 32px));box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:20px;box-shadow:0 10px 28px rgba(0,0,0,.25)}
dialog.ask-text::backdrop{background:rgba(0,0,0,.45)}
dialog.ask-text form{display:flex;flex-direction:column;gap:14px;margin:0}
dialog.ask-text h2{margin:0}
dialog.ask-text .search{width:100%;box-sizing:border-box;min-height:40px}
dialog.ask-text .search:focus{outline:none}
dialog.ask-text .row{display:flex;justify-content:flex-end;gap:8px}
dialog.ask-text .btn-primary{min-height:40px;padding:0 16px;font-size:14px}
dialog.ask-text.good{border-top:4px solid var(--good)}
dialog.ask-text.good .btn-primary{background:var(--good);border-color:var(--good);color:var(--surface)}
/* A side Outputs folder that just got a new file (PB-0308): a short flash, then its badge stays until the file is opened. */
@keyframes out-flash{0%,60%{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}100%{background:transparent;box-shadow:none}}
.out-btn.flash{animation:out-flash 4s ease-out}
@media (prefers-reduced-motion: reduce){.out-btn.flash{animation:none;background:var(--brand-soft)}}
/* A team's column (PB-0327; Gabriel, 2026-11-03): the decision's pane, or a plain team's note, in the same 410px full-height
   column as an agent's conversation list (.col-threads), so a team and an agent lay out the page alike. It scrolls on its own. */
.thread-pane{flex:1 1 0;min-height:0;min-width:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;overflow-wrap:anywhere}
@media (max-width:760px){.thread-pane{flex:none;max-height:40vh}}
/* The step a decision thread is on (PB-0337): an orange tag beside its label. */
.lv-tag.current-tag{background:var(--attn);color:var(--on-attn);border-color:var(--attn)}
.lv-tag.waiting-tag{background:#f2c230;color:#1a1204;border-color:#f2c230}
/* An image waiting to be sent shows a small preview in its chip (PB-0345). */
/* The file's name and its remove button sit on top, above the preview (Gabriel, 2026-11-03). */
.chip.has-thumb{display:inline-grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 6px;padding:4px}
.chip.has-thumb>span,.chip.has-thumb>button{grid-row:1}
.chip.has-thumb .chip-thumb{grid-row:2;grid-column:1 / -1}
.chip-thumb{display:block;width:auto;height:auto;max-width:360px;max-height:210px;object-fit:contain;border-radius:6px;border:1px solid var(--line);flex:none} /* in the image's own proportions (PB-0346), 50% larger (PB-0348) */
/* A vault note in a pop-up card (PB-0350): narrower than the repo file viewer, for reading. */
dialog.repo-file.note-card{width:min(900px,calc(100vw - 32px))}
/* Block, not the flex column of .k-file: in a scrolling card, flex items shrank to slivers (the frontmatter, the title). */
dialog.note-card .rf-text{display:block;padding:12px 14px;font-family:var(--body)}
dialog.note-card .rf-text > *{flex:none}
/* A file that was new when its folder was opened (PB-0353): highlighted, with a New label. */
.files button[data-fresh]{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
/* The New badge sits right after the file name, the time stays at the right edge (Gabriel, 2026-11-03). */
.files button[data-fresh]::after{content:"New";order:1;flex:none;padding:1px 6px;border-radius:9px;background:var(--brand);color:var(--surface);font-size:11px;font-weight:700}
.files button[data-fresh] .n{flex-grow:0}
.files button[data-fresh] .d{order:2;margin-left:auto}
/* A working agent in a group chat: its bubble with its name beside it (PB-0355). */
.typing-row{display:flex;align-items:center;gap:8px}
.typing-name{font-size:13px;color:var(--muted)}
.typing-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.typing-group .msg.typing{margin:0}
/* Reply under an agent's message in a group chat (PB-0356): small, quiet until hovered. */
.msg.agent .reply-btn{align-self:flex-start;margin-top:4px;min-height:26px;padding:0 8px;font-size:12px;border-color:var(--line);color:var(--muted)}
.msg.agent .reply-btn:hover,.msg.agent .reply-btn:focus-visible{border-color:var(--ink);color:var(--ink)}
/* Reply threads in group chats (PB-0358), like Slack: a reply count under a message, the thread in a panel on the right. */
.msg-foot{display:flex;align-items:center;gap:8px;margin-top:-2px}
/* The buttons under a message belong to it: a follow-up from the same sender keeps the full gap below them (Gabriel, 2026-11-03). */
.msg:has(.msg-foot) + .msg.cont{margin-top:0}
.msg-foot .reply-btn{margin-top:0}
/* A message's hover bar (Gabriel, 2026-11-04): Reply in thread, Quote, Copy and More, at its top right while hovered or focused. */
.msg.agent,.msg.user{position:relative}
/* The bar sits on top of the bubble, at its top right, just above its edge, so it never covers the message text (Gabriel, 2026-11-06). */
.msg.agent>.msg-actions,.msg.user>.msg-actions{right:0;top:-36px}
.msg:has(>.by)>.msg-actions{top:-13px}
.msg-actions::before{content:"";position:absolute;left:0;right:0;top:100%;height:6px} /* keeps the hover while the pointer crosses the gap */
.msg.user:hover>.msg-actions,.msg.user:focus-within>.msg-actions{opacity:1;pointer-events:auto} /* your own messages too (PB-0770) */
.msg-actions{position:absolute;top:0;z-index:3;display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.15);opacity:0;pointer-events:none;transition:opacity .12s}
.msg.agent:hover>.msg-actions,.msg.agent:focus-within>.msg-actions,.msg.ctx-target>.msg-actions{opacity:1;pointer-events:auto}
/* A message whose More menu is open: no box around the whole row, a soft ring on its bubble, and its bar stays (Gabriel, 2026-11-04). */
.msg.ctx-target{border-color:transparent;box-shadow:none;background:transparent}
.msg.ctx-target>.bubble{box-shadow:0 0 0 2px var(--brand-soft),0 0 0 3px var(--brand)}
.msg-actions button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.msg-actions button:hover,.msg-actions button:focus-visible{background:var(--surface-2);color:var(--ink)}
.msg.flash-msg>.bubble{box-shadow:0 0 0 3px var(--brand)}
.pinned-pane{margin-bottom:10px}
.pinned{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pinned li{display:flex;align-items:flex-start;gap:4px}
.pinned li>button:first-child{flex:1 1 auto;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font-size:13px;line-height:1.35;text-align:left;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pinned li>button:first-child:hover{border-color:var(--brand)}
.pinned .pin-x{flex:none;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:16px}
.thread-link{align-self:flex-start;margin-top:4px;padding:2px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--brand);font-size:13px;font-weight:600;cursor:pointer}
.thread-link.fresh{border-color:var(--brand);background:var(--brand-soft)}
.thread-link .new-n{padding:0 6px;border-radius:4px;background:var(--brand);color:var(--surface);font-weight:700}
/* New replies above the view (PB-0879): a pill pinned to the top of the chat; the wrapper takes no height (the log's gap is undone) */
.above-wrap{position:sticky;top:-12px;z-index:3;height:0;margin-bottom:-14px;display:flex;justify-content:center;flex:none}
.above-wrap[hidden]{display:none}
.above-pill{margin-top:4px;height:fit-content;padding:6px 17px;border:0;border-radius:999px;background:var(--brand);color:var(--surface);font-size:18px;font-weight:600;box-shadow:0 3px 10px rgba(0,0,0,.2);cursor:pointer} /* double size, then 30% smaller (Gabriel, 2026-11-07) */
.thread-link:hover{border-color:var(--brand)}
.msg.user .thread-link{align-self:flex-end}
/* The reply thread as a pop-up card over the page (PB-0361): wide, most of the height, the page dimmed behind it. */
.thread-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
.thread-panel{width:min(1000px,100%);height:min(85vh,900px);display:flex;flex-direction:column;gap:8px;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.25);box-sizing:border-box}
.thread-log{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:4px}
.thread-log .bubble{font-size:15px}
.thread-count{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.thread-count::after{content:"";flex:1;border-top:1px solid var(--line)}
.thread-composer{padding:8px 0 0}
/* A thread's box is the size of the main one and grows the same way (PB-0786). */
/* Ticket tags by status (PB-0369): blue open (the default), green done, grey declined or withdrawn. */
.lv-tag.cr-tag.st-done{background:var(--good);border-color:var(--good);color:var(--surface)}
.lv-tag.cr-tag.st-closed{background:var(--faint);border-color:var(--faint);color:var(--surface)}
.lv-tag.cr-tag.st-working{background:var(--attn);border-color:var(--attn);color:var(--on-attn)} /* a decision approved, its work still open */
.done-mark{color:var(--good);font-weight:700}
.orgs-form{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end}
.orgs-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.orgs-form .search{width:auto;min-width:160px;font-weight:400}
/* The New organization and Invite forms: two even columns, the button on its own row (PB-0374). */
.orgs-form.orgs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 12px;align-items:end}
.orgs-form.orgs-grid label:has([name="role"]){grid-column:1/-1}
.orgs-form.orgs-grid .search{width:100%;min-width:0;box-sizing:border-box}
.orgs-form.orgs-grid button[type="submit"]{grid-column:1/-1;justify-self:start;min-height:36px;padding:0 18px}
.orgs-form.orgs-grid label:has([name="role"]) .search{width:calc(50% - 6px)}
.note-chip.acting{background:var(--risk-soft);color:var(--risk);border-color:var(--risk);font-weight:600}
.note-chip select{margin-left:4px;font-size:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
/* The act-as dropdown at the far right of the menu bar (HO-0051): 24px tall in a fixed 1px frame that never changes, open, focused or acting (Gabriel, 2026-11-03); its text turns red while an act-as is on. */
nav.modules .actas-tab{display:flex;align-items:center;gap:8px;margin-left:auto;min-height:48px;border-bottom:3px solid transparent}
nav.modules .actas-label{color:var(--muted);font-size:15px}
/* Organizations: one card per company, closed until clicked (Gabriel, 2026-11-03). */
.org-head{align-items:center}
.org-toggle{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;flex:1 1 auto;min-width:0;padding:0;border:0;background:transparent;color:var(--ink);font-size:16px;text-align:left;cursor:pointer}
.org-toggle .muted{font-size:14px}
.org-toggle strong,.note-chip{white-space:nowrap}
.org-toggle.steps-done{font-size:13px;gap:8px}
/* A sub-decision's thread, indented under its parent's card in the Teams list (Gabriel, 2026-11-03). */
.agent-btn.sub-team{margin-left:22px;width:calc(100% - 22px);min-height:0;padding-top:6px;padding-bottom:6px}
.agent-btn.sub-team .sub-arrow{flex:none;font-size:16px;opacity:.7}
.org-toggle.steps-done .muted{font-size:12px}
.btn-small.danger{color:var(--risk);border-color:var(--risk)}
/* An open organization (Gabriel, 2026-11-03): titled sections, two-column forms, one line per person that opens into panels. */
.org-body{display:flex;flex-direction:column;gap:18px;padding-top:12px;border-top:1px solid var(--line);margin-left:36px} /* each level under its + or - sign, in line with the name above (Gabriel, 2026-11-03) */
.org-sec>:not(.org-sec-head){margin-left:34px}
.person-panels{margin-left:32px}
.org-sec{display:flex;flex-direction:column;gap:8px;min-width:0}
.org-sec>.h-label{margin:0}
.org-toggle.org-sec-head{font-size:13px;gap:8px}
.org-toggle.org-sec-head .h-label{margin:0}
.org-hint{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.orgs-form.org-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;align-items:end;max-width:760px}
.orgs-form.org-fields label{min-width:0}
.orgs-form.org-fields .search{width:100%;min-width:0;box-sizing:border-box}
.orgs-form.org-fields textarea.search{height:auto;padding:8px 12px;resize:vertical}
.orgs-form.org-fields .wide,.orgs-form.org-fields .actions{grid-column:1/-1}
.orgs-form.org-fields .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.person{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:8px 10px}
.person.ended{opacity:.65}
.person-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.person-head .k-tog{margin-left:0}
.person-id{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 220px}
.person-id .muted{font-size:13px}
.person-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.person-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin-top:10px}
.person-panel{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.person-panel h4{margin:0;font-size:13px}
.person-panel .orgs-form.org-fields{max-width:none}
nav.modules .actas-tab select{height:24px;min-height:24px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);font-size:15px;font-family:inherit;cursor:pointer}
nav.modules .actas-tab select:focus,nav.modules .actas-tab select:focus-visible{outline:none;border-color:var(--line)}
nav.modules .actas-tab.acting select{color:var(--risk);font-weight:600}
/* A team's Outputs: the files its agents wrote, one a line (Gabriel, 2026-11-03). */
.team-outs{list-style:none;margin:0;padding:0 4px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.team-outs li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.col-threads{flex:1 1 100%}.nav-foot,.outputs-side{height:auto;max-height:50vh}}
/* A + that adds (a team, a member, an agent): square, the same size wherever it sits (Gabriel, 2026-11-03). */
/* A solid round add button, a white plus on teal (Gabriel, 2026-11-03: "an add button that looks like a +", not the badges' blue). */
.plus-btn{flex:none;width:32px;height:32px;min-width:0;min-height:0;padding:0;border:0;border-radius:50%;background:var(--shared);color:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer}
.plus-btn:hover,.plus-btn:focus-visible{filter:brightness(1.12)}
.plus-btn[aria-pressed="true"],.plus-btn[aria-expanded="true"]{box-shadow:0 0 0 3px var(--shared-soft)}
/* The count and add row over the Agents or Teams list stays put; only the list scrolls (Gabriel, 2026-11-03). */
.col-agents>.list-head{flex:none;margin:0 0 0 8px}
/* The footer's header (Members and its add button, or About this agent) stays put; what is under it scrolls (Gabriel, 2026-11-03). */
.nav-foot>:first-child{position:sticky;top:-10px;z-index:1;margin-top:-10px;padding-top:10px;background:var(--bg)}
/* Add members: a pop-up by its add button, over the page (Gabriel, 2026-11-03). */
.add-pop{position:fixed;z-index:60;width:300px;max-height:400px;overflow-y:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.add-pop .new-group{padding:12px !important}
/* Add and Cancel stay in view at the foot of the pop-up, however long the list (Gabriel, 2026-11-03). */
.add-pop .new-group{gap:10px}
.add-pop .new-group>div:last-child{position:sticky;bottom:0;margin:0 -12px -12px;padding:10px 12px 12px;background:var(--surface);border-top:1px solid var(--line)}
/* The conversation search fills its column; the filter (or the match count) shares its row with the add button, right
   above the list it adds to (Gabriel, 2026-11-03). */
.col-threads .conv-search{width:100%;box-sizing:border-box}
.list-tools{display:flex;align-items:center;gap:8px}
.list-tools>.filter-btn,.list-tools>.search-note{flex:1 1 auto;min-width:0}
.col-threads>.h-label{margin:0}
/* The header spans the 410px column and the chat, for an agent and a team alike (Gabriel, 2026-11-03): one wrapper with the
   header on top and the two columns under it, filling the height the columns used to. */
.col-main{flex:999 1 calc(var(--col-w) + 460px);min-width:0;display:flex;flex-direction:column;height:calc(100vh - 158px);border-right:1px solid var(--line)}
.main-row{flex:1 1 0;min-height:0;display:flex}
.main-row>.col-threads,.main-row>.col-chat{height:auto}
.main-row>.col-chat{flex:1 1 0;border-right:0}
.col-main>.chat-head .h-big{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.col-main{flex:1 1 100%;height:auto}.main-row{flex-direction:column}}
/* The conversations or This decision column is as wide as the Auto-approve toggle plus 10px (256 + 10; Gabriel, 2026-11-03),
   and the header's left slot sits right over it, holding the toggle with 5px on each side; the title starts over the chat. */
:root{--col-w:320px} /* 266px (the toggle plus 10px) and 20% more (Gabriel, 2026-11-03) */
.col-main>.chat-head{justify-content:flex-start;padding-left:0}
.col-main>.chat-head>.head-left{flex:none;width:var(--col-w);display:flex;align-items:center;justify-content:center} /* the toggle centred over the column (Gabriel, 2026-11-03) */
.col-main>.chat-head>.head-title{flex:1 1 auto;margin-left:12px}
.col-main>.chat-head>.head-actions{margin-left:auto;flex:none}
/* The toggle, the title and the actions sit at the top of the header, so the toggle is at the same height for an agent
   (whose header can carry a row of tags) and a team (Gabriel, 2026-11-03). */
.col-main>.chat-head{align-items:flex-start}
/* One header height for an agent and a team (Gabriel, 2026-11-03), so the columns under them start level. */
.col-main>.chat-head{height:86px;box-sizing:border-box;overflow:hidden}
.col-main>.chat-head .head-sub{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-main>.chat-head .head-sub .chip{vertical-align:middle}
/* An agent's own skill on the Harness map: a small card, the name only (Gabriel, 2026-11-03). */
.node.skill.own{height:32px}
.agent-btn .g-count{white-space:nowrap;text-align:right} /* a team's agent count, under its bubbles */

/* Settings page (BD-0049): the header button, the cost banner, notices, and one row per setting */
#settings-btn[aria-pressed="true"]{background:var(--brand);color:var(--surface)}
.cost-banner{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 24px;background:var(--attn);color:var(--on-attn);font-size:15px;font-weight:600}
.cost-banner.over{background:var(--risk);color:#fff}
.cost-banner .btn-ghost{margin-left:auto;min-height:36px;border-color:currentColor;background:transparent;color:inherit}
.toasts{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 40px))}
.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:8px;background:var(--surface);color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:14px;line-height:1.4}
.toast>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.toast span{color:var(--muted);overflow-wrap:anywhere}
.toast-x{flex:none;margin-left:auto;width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.settings{max-width:980px}
.set-lead{margin:0;font-size:14px;line-height:1.5}
.set-grp{display:flex;flex-direction:column;gap:2px;padding:14px 0 6px;border-top:1px solid var(--line)}
.set-intro{margin:4px 0 8px;font-size:14px;line-height:1.45}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line)}
.set-row.dim{opacity:.55}
.set-text{min-width:0;flex:1}
.set-label{font-size:15px;font-weight:600}
.set-help{margin:2px 0 0;font-size:13px;line-height:1.45}
.set-ctl{display:flex;align-items:center;gap:8px;flex:none}
.set-ctl input[type=number],.set-ctl select,.set-table input[type=number],.set-table select{min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px}
.set-ctl input[type=number],.set-table input[type=number]{width:120px}
.set-ctl select{max-width:280px}
.set-ctl :disabled{opacity:.6;cursor:not-allowed}
.set-ctl .unit,.set-table .unit{font-size:13px}
.scope{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600;vertical-align:middle;background:var(--surface-2);color:var(--muted)}
.scope.org{background:var(--l2-soft);color:var(--ink)}
.switch{position:relative;display:inline-block;width:44px;height:26px}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch .track{position:absolute;inset:0;border-radius:13px;background:var(--line);transition:background .12s}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);transition:transform .12s}
.switch input:checked+.track{background:var(--brand)}
.switch input:checked+.track::after{transform:translateX(18px)}
.switch input:focus-visible+.track{outline:2px solid var(--brand);outline-offset:2px}
.switch input:disabled{cursor:not-allowed}
.spend{margin:10px 0 4px}
.spend-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14px}
.lvl{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600;background:var(--surface-2);color:var(--muted)}
.lvl.ok{background:var(--good-soft);color:var(--good)}
.lvl.alert{background:var(--attn);color:var(--on-attn)}
.lvl.over{background:var(--risk-soft);color:var(--risk)}
.set-table{width:100%;border-collapse:collapse;font-size:14px}
.set-table th,.set-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.set-table thead th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.set-table td .unit{margin-left:4px}
.set-log{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:14px}
@media (max-width:720px){.set-row{flex-direction:column;align-items:flex-start}.set-ctl{flex-wrap:wrap}}

/* All Tickets (BD-0041-01, HO-0089) */
.tl-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}
.tl-filters select{min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px}
.tl-list{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.tl-row{display:grid;grid-template-columns:110px minmax(0,1fr) 120px 190px 150px 50px;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--surface-2);font-size:13px}
.tl-row:last-child{border-bottom:0}
.tl-head{font-size:12px;font-weight:600;color:var(--muted)}
.tl-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-state.draft,.tl-state.pending{color:var(--risk)}
.tl-state.done{color:var(--muted)}
/* The global search in the menu bar, left of the act-as dropdown (Gabriel, 2026-11-03): results drop down under it. */
nav.modules .menu-search{position:relative;display:flex;align-items:center;flex:1 1 0;min-width:0;min-height:48px;border-bottom:3px solid transparent}
nav.modules .menu-search .search{width:374px;max-width:100%;margin-left:auto;min-height:28px;height:28px;font-size:14px} /* 70% wider than the first 220px, right-aligned beside Act as (Gabriel, 2026-11-03) */
nav.modules .menu-search + .actas-tab{margin-left:16px}
.gs-results{position:absolute;top:100%;right:0;z-index:30;width:420px;max-height:60vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.gs-results[hidden]{display:none}
nav.modules .gs-hit{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:0;padding:8px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);text-align:left;font-size:14px}
nav.modules .gs-hit:hover,nav.modules .gs-hit:focus-visible{background:var(--tabbar)}
.gs-sub{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.gs-tag{padding:1px 7px;border:1px solid var(--line);border-radius:10px;font-size:11px;font-weight:600;line-height:1.5;color:var(--muted)}
.gs-tag.group{border-color:var(--brand);color:var(--brand)}
.gs-snip{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.gs-note{margin:0;padding:10px 12px;font-size:13px;color:var(--muted)}
#module [hidden]{display:none!important}
/* Forward, picked in place (Gabriel, 2026-11-04): the column to pick from is lit, the rest dims, and the forward rides
   above the box as a preview card, like a pasted image. */
.fwd-pick{position:relative;z-index:2;box-shadow:inset 0 0 0 3px var(--brand);background:var(--brand-soft)}
.office:has(.col-agents.fwd-pick) .col-main,.office:has(.col-agents.fwd-pick) .col-details,.office:has(.col-threads.fwd-pick) .chat-head,.office:has(.col-threads.fwd-pick) .col-chat,.office:has(.col-threads.fwd-pick) .col-details,.office:has(.col-threads.fwd-pick) .col-agents>:not(.seg):not(.agents-list):not(.groups-side){opacity:.3;transition:opacity .15s}
.fwd-bar{flex:none;display:flex;align-items:center;gap:6px;padding:8px 8px 8px 12px;border-radius:8px;background:var(--brand);color:var(--surface);font-size:13px;font-weight:600;line-height:1.35}
.fwd-bar span{flex:1;min-width:0}
.fwd-bar button{flex:none;min-height:30px;padding:0 10px;border:1px solid var(--surface);border-radius:6px;background:transparent;color:var(--surface);font-size:12px;font-weight:600;cursor:pointer}
.fwd-bar button:hover{background:var(--surface);color:var(--brand)}
.fwd-pick .fwd-off{opacity:.4;cursor:not-allowed}
.col-threads.fwd-pick .plus-btn[data-act="new"]{outline:2px solid var(--brand);outline-offset:2px;box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 25%,transparent);animation:fwd-pulse 1.6s ease-in-out infinite}
@keyframes fwd-pulse{50%{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 10%,transparent)}}
@media (prefers-reduced-motion:reduce){.col-threads.fwd-pick .plus-btn[data-act="new"]{animation:none}}
.fwd-chip{display:flex;align-items:flex-start;gap:8px;max-width:640px;padding:8px 6px 8px 10px;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:8px;background:var(--surface-2);color:var(--ink)}
.quote-chip .fwd-snip{white-space:pre-line;-webkit-line-clamp:3} /* a pasted quote in the message box (PB-0748) */
.quote-card{margin:4px 0;padding:8px 10px;border-left:3px solid currentColor;border-radius:6px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:15px;line-height:1.45;white-space:normal} /* a quote inside a sent bubble, like a forward card (PB-0748) */
.quote-card > :first-child{margin-top:0}
.quote-card > :last-child{margin-bottom:0}
.fwd-chip .fwd-ico{flex:none;color:var(--brand);font-size:16px;line-height:1.2}
.fwd-chip .fwd-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fwd-chip b{font-size:12px;color:var(--brand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwd-chip .fwd-snip{font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fwd-chip button{flex:none;min-width:28px;min-height:28px;border:0;border-radius:6px;background:none;color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.fwd-chip button:hover{background:var(--line)}
/* The Agents / Task Force switch, accentuated so it is easy to find (Gabriel, 2026-11-04): a brand-tinted track with an
   outline, the selected tab in solid brand like the Agent Office tab, the other one blue on hover. Only this switch. */
.col-agents>.seg{padding:4px;gap:4px;border-radius:10px;background:var(--brand-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 35%,transparent)}
.col-agents>.seg button{min-height:42px;border-radius:7px;color:var(--brand);font-size:14px;font-weight:700;cursor:pointer}
.col-agents>.seg button:hover:not([aria-pressed="true"]){background:var(--surface);box-shadow:inset 0 0 0 1px var(--brand)}
.col-agents>.seg button[aria-pressed="true"]{background:var(--brand);color:var(--surface);box-shadow:0 1px 3px color-mix(in srgb,var(--brand) 40%,transparent)}
.col-agents>.seg button[aria-pressed="true"] .pip.live{background:var(--surface);color:var(--brand)}
/* Records waiting for Gabriel as small cards; a click opens the full review with Approve and Decline in a pop-up (PB-0702). */
.rec-card{padding:0}
.rec-open{display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box;padding:12px 14px;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.rec-open:hover,.rec-open:focus-visible{background:var(--brand-soft)}
.rec-open .issue-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;justify-content:flex-start}
.rec-open .rec-snip{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--ink)}
.rec-pop{width:min(920px,94vw)}
.rec-pop .rec-detail{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0;overflow:auto}
/* The page behind does not scroll while a pop-up is open (Gabriel, 2026-11-04). */
html:has(dialog[open]),html:has(.thread-overlay),body:has(dialog[open]),body:has(.thread-overlay){overflow:hidden}
.rec-pop .rec-body{font-size:15px;line-height:1.5}
/* A squad request card, in sections (PB-0785). */
.rec-pop.sr h2{font-family:var(--body);font-size:20px;line-height:1.3;font-weight:700}
.rec-pop.sr .rec-detail{gap:14px}
.sr-meta{margin:0;color:var(--muted);font-size:14px}
.sr-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px 20px}
@media (max-width:720px){.sr-grid{grid-template-columns:1fr}}
.sr-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sr-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sr-chips{display:flex;flex-wrap:wrap;gap:6px}
.sr-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);font-size:14px;color:var(--ink)}
.sr-box{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-left:3px solid var(--brand);border-radius:6px;background:var(--brand-soft)}
.sr-box p{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.sr-brief{display:flex;flex-direction:column;gap:6px}
.sr-brief textarea{width:100%;max-width:none;box-sizing:border-box;height:auto;min-height:200px;padding:10px 12px;font-size:15px;line-height:1.5;font-weight:400;resize:vertical}
.sr-limits{display:flex;gap:12px;flex-wrap:wrap;align-items:end;font-size:13px}
.sr-limits label{display:flex;flex-direction:column;gap:2px;font-weight:600}
.sr-limits .sr-check{flex-direction:row;gap:6px;align-items:center;font-weight:400}
.rec-pop .rec-body h2{font-size:16px;margin:14px 0 4px}
/* Forward (PB-0703): the agent picked as the target is outlined with a To label; the source shows unselected, with From. */
.agent-btn.fwd-target{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--brand),0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.agent-btn.fwd-source{box-shadow:inset 0 0 0 1px var(--muted);outline:1px dashed var(--muted);outline-offset:-4px}
.fwd-lbl{flex:none;align-self:center;padding:0 6px;border-radius:5px;font-size:11px;font-weight:700;line-height:1.6;letter-spacing:.02em}
.fwd-lbl.to{background:var(--brand);color:var(--surface)}
.fwd-lbl.from{border:1px solid var(--muted);color:var(--muted);background:var(--surface)}
/* A forward carries its files (PB-0705): the preview lists them with ticks; a sent forward shows as a card in the bubble. */
.fwd-chip .fwd-files{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:4px;font-size:12px;color:var(--ink)}
.fwd-chip .fwd-files label{display:inline-flex;gap:4px;align-items:center;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwd-chip .fwd-files .muted{font-size:11px}
.fwd-note{margin-top:10px}
.fwd-files-sent{margin-top:6px}
.fwd-card{margin:2px 0 4px;padding:8px 10px;border-left:3px solid currentColor;border-radius:6px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:14px;line-height:1.45}
.fwd-card-head{font-size:12px;font-weight:700;opacity:.9;margin-bottom:4px}
.fwd-card-body{max-height:260px;overflow:auto}
.fwd-card-body > :first-child{margin-top:0}
.fwd-card-body > :last-child{margin-bottom:0}
.fwd-card-skip{margin:6px 0 0;font-size:12px;opacity:.85}
/* Forward (PB-0710): while picking, every agent that can receive a forward looks the same (the "no open chats" fading would
   read as "cannot be picked"), with a blue outline on hover; only one that cannot receive stays faded. */
.col-agents.fwd-pick .agent-btn.quiet:not(.fwd-off){background:var(--surface);color:var(--ink)}
.col-agents.fwd-pick .agent-btn.quiet:not(.fwd-off) .dot{opacity:1}
.col-agents.fwd-pick .agent-btn:not(.fwd-off):hover{box-shadow:inset 0 0 0 2px var(--brand)}
.col-agents.fwd-pick .agent-btn.fwd-off{background:transparent}
/* Squad Mission process flow (PB-0818): Start, one column per step, Done, joined by arrows; scrolls sideways when long. */
.flow-wrap{display:flex;flex-direction:column;gap:14px;overflow:auto;padding:4px 2px 8px}
.flow-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 6px} /* a shorter step sits in the middle of the row (Gabriel, 2026-11-07); rows wrap instead of scrolling sideways (Gabriel, 2026-11-07) */
.flow-hop{display:flex;align-items:center;gap:6px} /* an arrow and the step it points to stay on one row */
.flow-steps{position:relative;padding-right:14px}
.flow-link{position:absolute;left:0;top:0;overflow:visible;pointer-events:none} /* the line from a row's end to the next row's first arrow */
.flow-node{align-self:center;padding:8px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
.flow-node-on{border-color:var(--good);color:var(--good)}
.flow-arrow{align-self:center;color:var(--muted);font-size:20px;padding:0 2px}
.flow-col{display:flex;flex-direction:column;gap:8px;width:220px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.flow-current{border-color:var(--attn);box-shadow:0 0 0 1px var(--attn)}
.flow-wide{width:452px} /* a long step: two columns of cards (PB-0852) */
.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.flow-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.flow-box{display:flex;flex-direction:column;gap:3px;padding:8px;border:1px solid var(--line);border-radius:8px;font-size:12px}
.flow-done{opacity:.75}
.flow-to{font-weight:600}
.flow-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.flow-aside{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--line)}