/* HQ screen. Plain CSS, no build step. */
:root {
  --bg: #f4f5f7; --card: #fff; --ink: #1d2330; --muted: #6b7280; --line: #d9dde3;
  --accent: #2563eb; --ok: #16a34a; --warn: #b45309; --bad: #dc2626;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
button:hover { border-color: var(--accent); }
button.small { padding: .1rem .45rem; font-size: .8rem; }
button.danger { color: var(--bad); }
button.approve { background: var(--ok); color: #fff; border-color: var(--ok); }
input, select, textarea { font: inherit; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; width: 100%; }
label { display: block; margin: .4rem 0; font-size: .9rem; }
.muted { color: var(--muted); }
.small-text { font-size: .8rem; }
.error { color: var(--bad); }
.banner { margin: 0; padding: .6rem 1rem; background: #fde8e8; border-bottom: 1px solid #f5b5b5; }
.note { background: #fff7e6; border: 1px solid #f5d9a0; padding: .4rem; border-radius: 6px; }
.row { display: flex; gap: .4rem; flex-wrap: wrap; margin: .4rem 0; }

.top { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: var(--ink); color: #fff; }
.top h1 { margin: 0; font-size: 1.2rem; }
.top #logout { margin-left: auto; }
.live.on { color: #86efac; } .live.off { color: #fca5a5; }

.layout { display: grid; grid-template-columns: 1fr 420px; gap: 1rem; padding: 1rem; align-items: start; }
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } }

.ceo-row { display: flex; justify-content: center; margin-bottom: 1rem; }
.ceo-list, .members { list-style: none; margin: 0; padding: 0; }
.ceo-list .member { min-width: 240px; border-color: var(--accent); }
.branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.branch { background: #e9ecf1; border-radius: 10px; padding: .6rem; }
.branch-head { display: flex; justify-content: space-between; align-items: center; }
.branch h2 { font-size: 1rem; margin: 0; }
.members { min-height: 3rem; margin-top: .4rem; }
.member { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .5rem; margin-bottom: .4rem; cursor: grab; user-select: none; }
.member:focus { outline: 2px solid var(--accent); }
.member.kind-linked { border-left: 4px solid #8b5cf6; }
.member.kind-permanent { border-left: 4px solid var(--accent); }
.member.kind-readonly { border-left: 4px solid var(--muted); }
.member-head { display: flex; align-items: center; gap: .4rem; }
.member .state { font-size: .85rem; }
.member .activity { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sortable-ghost { opacity: .4; }
.sortable-fallback { opacity: .9; }
.dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--ok); } .dot.off { background: #cbd5e1; }
.flags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.flag { font-size: .75rem; background: #fef3c7; color: var(--warn); border-radius: 4px; padding: 0 .3rem; margin-left: .25rem; }
.add-branch { display: flex; gap: .4rem; margin-top: 1rem; max-width: 640px; }
.add-branch button { white-space: nowrap; }

#panels { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .6rem; }
.tabs { display: flex; gap: .3rem; margin-bottom: .6rem; }
.tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.panel { max-height: 75vh; overflow: auto; font-size: .9rem; }
.panel ul { padding-left: 1.1rem; }
.approval { border: 1px solid var(--line); border-radius: 8px; padding: .5rem; margin-bottom: .5rem; }
.approval.status-pending { border-color: var(--warn); }
.tool-input { background: #f1f3f6; padding: .4rem; border-radius: 6px; max-height: 14rem; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.workers { border-left: 2px solid var(--line); margin-left: .3rem; }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); overflow: auto; background: var(--card);
  border-left: 1px solid var(--line); box-shadow: -6px 0 20px rgba(0,0,0,.1); padding: 1rem; z-index: 10; }
.drawer-head { display: flex; align-items: baseline; gap: .6rem; }
.drawer-head h2 { margin: 0; }
.drawer-head .close { margin-left: auto; }
.drawer-section { border-top: 1px solid var(--line); padding-top: .4rem; margin-top: .6rem; }
.drawer-section h3 { font-size: .95rem; margin: .2rem 0 .4rem; }
.drawer-section h4 { font-size: .85rem; margin: .4rem 0 .2rem; color: var(--muted); }
.scope { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .6rem; margin: 0; }
.scope dt { font-weight: 600; }
.scope dd { margin: 0; }
table.usage { border-collapse: collapse; font-size: .85rem; }
table.usage td, table.usage th { padding: .1rem .5rem; text-align: left; }

.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-box { background: var(--card); padding: 2rem; border-radius: 12px; border: 1px solid var(--line); width: 320px; }
.login-box h1 { margin-top: 0; }
.login-box button { margin-top: .8rem; width: 100%; }

.thread-panel { margin: 0.3em 0 0.6em 1em; padding-left: 0.6em; border-left: 2px solid #8884; font-size: 0.92em; }
.thread-panel p { margin: 0.2em 0; }
button.link { background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; padding: 0 0.4em; font-size: 0.9em; }

/* Add member (card 8) */
.add-member-row { margin: .6rem 0; }
.setup { font-size: .8rem; }
dialog.add-member { width: min(560px, 96vw); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; }
dialog.add-member label { display: block; margin: .35rem 0; }
dialog.add-member input:not([type=checkbox]):not([type=radio]), dialog.add-member textarea, dialog.add-member select { width: 100%; box-sizing: border-box; }
dialog.add-member fieldset { margin: .5rem 0; border: 1px solid var(--line); border-radius: 6px; }
dialog.add-member label.check { display: block; }
dialog.add-member [hidden] { display: none; }

/* Org page (card 27) */
#org-link, .org-page .top a { color: #fff; }
.org-page .top { flex-wrap: wrap; }
.org-page main { padding: 1rem; }
.org-page #ceo { max-width: 360px; margin: 0 auto 1rem; }
.org-page #branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.org-branch { min-width: 0; padding: .6rem; border-radius: 10px; background: #e9ecf1; }
.org-page .person { min-width: 0; margin-bottom: .6rem; }
.org-page .box { display: block; max-width: 100%; min-width: 0; padding: .7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.org-page a.box:hover, .org-page a.box:focus { border-color: var(--accent); outline: 2px solid var(--accent); }
.org-page .box-head { display: flex; align-items: center; gap: .4rem; }
.org-page .dot { flex-shrink: 0; }
.org-page .dot.working { background: var(--ok); }
.org-page .dot.idle { background: var(--accent); }
.org-page .dot.paused { background: var(--warn); }
.org-page .dot.offline { background: #94a3b8; }
.org-page .doing-now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.org-page .missing { background: #f1f2f4; color: var(--muted); }
.org-page .missing-note { margin: .3rem 0 0; font-size: .85rem; }
.org-page .last-chat { display: inline-block; margin: .2rem .7rem 0; font-size: .8rem; color: var(--accent); }
.org-page .branch-lead { margin: .3rem .7rem 0; font-size: .85rem; overflow-wrap: anywhere; }
.org-page .branch-lead a { color: var(--accent); }
.org-page .lead-from { display: inline-block; max-width: 100%; border-radius: 4px; padding: 0 .3rem; background: #dbeafe; color: #1e40af; vertical-align: top; }
.org-page .also-leads { margin: .2rem .7rem 0; font-size: .8rem; overflow-wrap: anywhere; }

/* Reporting teams and draft review (card 28). */
.org-page .org-team { list-style: none; padding: 0 0 0 12px; margin: 0; min-height: 24px; }
.org-page .org-branch > .org-team { padding-left: 0; }
.org-page .org-member { min-width: 0; }
.org-page .person { position: relative; }
.org-page .person-controls { display: flex; justify-content: flex-end; gap: .3rem; margin-top: .2rem; }
.org-page .drag-handle { cursor: grab; touch-action: none; }
.org-page .setup { overflow-wrap: anywhere; }
.org-page dialog { max-height: 92vh; overflow-y: auto; }
.org-page dialog input[type=checkbox] { width: auto; }
.org-page dialog fieldset { min-width: 0; }
.org-page dialog .check { overflow-wrap: anywhere; }

/* Drawer lists (card 57) */
.drawer ul.compact { margin: .3rem 0; padding-left: 0; }
.drawer ul.compact li { font-size: .8rem; margin: .2rem 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: block; }
.drawer ul.full { max-height: 50vh; overflow: auto; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .drawer .list-toggle { min-height: 44px; }
}

/* Chat panel and gears (card 60) */
body.chat-open { --chat-height: 40vh; padding-bottom: var(--chat-height); }
body.chat-minimised { --chat-height: 44px; }
#chat-panel { position: fixed; inset: auto 0 0; height: var(--chat-height); z-index: 8; background: #161b22; border-top: 1px solid #59636f; color: #e6edf3; display: flex; flex-direction: column; min-width: 0; }
#chat-panel[hidden] { display: none; }
.chat-header, .chat-actions, .chat-compose { display: flex; gap: .4rem; align-items: center; min-width: 0; }
.chat-header { min-height: 44px; padding: 0 .4rem; }
.chat-tabs { flex: 1; display: flex; overflow-x: auto; min-width: 0; }
.chat-tab { display: flex; flex-shrink: 0; }
.chat-tab [aria-selected="true"] { border-color: #8cb4ff; }
.chat-body { overflow-y: auto; min-height: 0; padding: .5rem 1rem; }
.chat-actions { flex-wrap: wrap; }
.chat-actions select { max-width: min(100%, 24rem); min-width: 0; }
.chat-log { padding: .5rem 0; }
.chat-entry { border-bottom: 1px solid #30363d; padding: .5rem 0; }
.chat-entry div, .chat-approval pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-approval { padding: .5rem; border: 1px solid #9e762d; margin: .5rem 0; }
.chat-compose { position: sticky; bottom: -.5rem; padding: .5rem 0; background: #161b22; }
.chat-compose textarea { flex: 1; width: 100%; min-width: 0; resize: vertical; }
#chat-panel button, #chat-panel select, .gear { min-height: 44px; }
.gear { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; margin-left: auto; }
.chat-open .drawer { bottom: var(--chat-height); }
.chat-body, .chat-body * { box-sizing: border-box; }
@media (max-width: 600px) {
  .top { flex-wrap: wrap; }
  .layout > * { min-width: 0; }
  .branches { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .add-branch { flex-wrap: wrap; }
  .add-branch input { min-width: 0; flex: 1 1 120px; }
  .tabs { overflow-x: auto; }
  .member-head strong { min-width: 0; overflow-wrap: anywhere; }
  body.chat-open { --chat-height: 60vh; }
  body.chat-minimised { --chat-height: 44px; }
  .chat-body { padding: .4rem; }
  .chat-header { gap: .15rem; }
  .chat-open .drawer { bottom: 0; }
  .chat-compose button { padding-inline: .5rem; }
}

.org-page dialog .tools-after { overflow-wrap: anywhere; }

/* Command lines (card 56). */
.org-page #chart { position: relative; }
.org-page .line-help { margin-bottom: .4rem; }
.org-page .line-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: 0; font-size: .85rem; }
.org-page .line-sample { display: inline-block; width: 1.5rem; border-bottom: 2px solid; text-align: right; }
.org-page .line-sample.commands { color: #2563eb; }
.org-page .line-sample.reports_to { color: #7c3aed; }
.org-page .line-sample.advises { color: #64748b; border-bottom-style: dashed; }
.org-page #lines { position: absolute; top: 0; left: 0; max-width: 100%; z-index: 2; pointer-events: none; overflow: hidden; }
.org-page .command-line { color: #2563eb; }
.org-page .command-line.reports_to { color: #7c3aed; }
.org-page .command-line.advises { color: #64748b; }
.org-page .line-stroke { fill: none; stroke: currentColor; stroke-width: 2; }
.org-page .command-line.selected .line-stroke { stroke-width: 4; }
.org-page .command-line.advises .line-stroke { stroke-dasharray: 6 4; }
.org-page .arrow.commands { fill: #2563eb; }
.org-page .arrow.reports_to { fill: none; stroke: #7c3aed; stroke-width: 1.5; }
.org-page .arrow.advises { fill: #64748b; }
.org-page .line-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.org-page .line-hit:focus { stroke: #2563eb33; outline: none; }
.org-page .line-text { font-size: 12px; fill: currentColor; paint-order: stroke; stroke: #f4f5f7; stroke-width: 4; stroke-linejoin: round; }
.org-page .line-grip { fill: white; stroke: currentColor; stroke-width: 2; pointer-events: all; cursor: grab; touch-action: none; }
.org-page .line-preview { fill: none; stroke: #2563eb; stroke-width: 2; stroke-dasharray: 6 4; }
.org-page .box.line-target { outline: 3px solid #2563eb; outline-offset: 2px; }
.org-page .person-controls { justify-content: flex-start; flex-wrap: wrap; padding-right: 36px; }
.org-page .box:not([data-kind=ceo]) { padding-right: 46px; }
.org-page .line-handle { position: absolute; z-index: 3; right: 9px; top: 10px; width: 28px; height: 28px; padding: 0;
  border: 2px solid #2563eb; border-radius: 50%; background: white; color: #2563eb; cursor: crosshair; touch-action: none; font-size: 22px; line-height: 22px; }
.org-page #line-editor { position: fixed; inset: auto 1rem 1rem auto; margin: 0; width: min(430px, calc(100vw - 2rem)); z-index: 5;
  padding: 1rem; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 5px 25px #0003; }
.org-page #line-editor h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.org-page #line-editor fieldset { display: flex; flex-wrap: wrap; gap: .8rem; border: 1px solid var(--line); }
.org-page #line-editor input { width: auto; }
.org-page #line-editor p { overflow-wrap: anywhere; }
.org-page #all-lines { margin-top: 1rem; }
.org-page #all-lines ul { padding-left: 1.2rem; }
.org-page #all-lines li { overflow-wrap: anywhere; }
.org-page #line-pick { padding: .5rem; border: 1px solid #2563eb; border-radius: 6px; color: #1e40af; }

/* Model rows wrap in the drawer and in the org dialog on narrow screens. */
.model-fields, .model-group, .models-editor { min-width: 0; max-width: 100%; }
.model-group { margin: 12px 0; }
.model-row { border-bottom: 1px solid var(--line); padding: 8px 0; overflow-wrap: anywhere; }
.model-row label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.model-row input[type=checkbox] { width: auto; flex: none; }
.model-row select { width: auto; max-width: 100%; }
.model-row p, .default-models p { overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > * { min-width: 0; }
  .tabs, .add-branch { flex-wrap: wrap; }
  .add-branch input { min-width: 0; flex: 1; }
}