/* karmax — operations console for autonomous agents.
   Identity: a calm dispatch board. Grotesque UI face + a monospace utility face
   for the board details (ids, stages, branches, SHAs). One confident accent
   (electric indigo). The signature is the stage pipeline. */

:root {
  color-scheme: light dark; /* defeat Chrome force-dark by declaring both */
  --paper: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #fbfcfd;
  --ink: #15181e;
  --ink-2: #58616f;
  --ink-3: #8b95a5;
  --line: #e5e8ed;
  --line-strong: #d4d9e1;
  --accent: #5b5bd6;
  --accent-ink: #ffffff;
  --accent-weak: #ecedfb;
  --working: #c77d1a;
  --working-weak: #f8efdd;
  --merged: #128474;
  --merged-weak: #dcf1ec;
  --danger: #c63a31;
  --danger-weak: #fbe7e4;
  --shadow: 0 1px 2px rgba(20, 24, 34, 0.06), 0 8px 24px rgba(20, 24, 34, 0.06);
  --r: 9px;
  --r-sm: 6px;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
}

html[data-theme="dark"],
:root.dark {
  --paper: #111318;
  --surface: #181b22;
  --surface-2: #1f232c;
  --ink: #e7e9ef;
  --ink-2: #9aa4b2;
  --ink-3: #6a7383;
  --line: #292e39;
  --line-strong: #353c49;
  --accent: #8b8bf0;
  --accent-ink: #0c0d12;
  --accent-weak: #23233a;
  --working: #e6a04a;
  --working-weak: #2e2616;
  --merged: #34c7ae;
  --merged-weak: #11302b;
  --danger: #f0635a;
  --danger-weak: #321c1a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --paper: #111318;
    --surface: #181b22;
    --surface-2: #1f232c;
    --ink: #e7e9ef;
    --ink-2: #9aa4b2;
    --ink-3: #6a7383;
    --line: #292e39;
    --line-strong: #353c49;
    --accent: #8b8bf0;
    --accent-ink: #0c0d12;
    --accent-weak: #23233a;
    --working: #e6a04a;
    --working-weak: #2e2616;
    --merged: #34c7ae;
    --merged-weak: #11302b;
    --danger: #f0635a;
    --danger-weak: #321c1a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mobile-menu, .rail-scrim { display: none; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }

/* ── layout shell ───────────────────────────────────────────── */
#app { display: grid; grid-template-rows: auto 1fr; height: 100vh; overflow: hidden; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  height: 52px; padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: -0.01em; }
/* The artwork carries its own background and rounded corners (see web/brand/),
   so the mark is just a sized image — no gradient plate behind it. */
.brand .mark {
  width: 22px; height: 22px; border-radius: 6px;
  display: block; object-fit: contain; flex: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.brand-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.brand-option {
  display: grid; justify-items: center; gap: 6px;
  padding: 10px; width: 88px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink-2); font-size: 12px;
}
.brand-option img { width: 44px; height: 44px; border-radius: 11px; }
.brand-option:hover { border-color: var(--ink-3); }
.brand-option[aria-pressed='true'] {
  border-color: var(--accent); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600;
}
.org-switcher { max-width: 230px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 7px; padding: 6px 28px 6px 9px; font-weight: 600; }
.topbar .search {
  flex: 1; max-width: 420px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink-2);
}
.topbar .search input { border: 0; background: transparent; outline: none; width: 100%; }
.topbar .spacer { flex: 1; }
.global-search-trigger {
  min-width: 230px; max-width: 320px; height: 34px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink-3); cursor: pointer; text-align: left;
}
.global-search-trigger:hover { border-color: var(--line-strong); color: var(--ink-2); background: var(--surface); }
.global-search-trigger .global-search-label { flex: 1; }
.global-search-trigger .kbd { margin-left: auto; background: var(--surface); }
.topbar .agent-chip {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-2);
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2);
}
.topbar .agent-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--merged); }
.topbar .agent-chip.mock .dot { background: var(--working); }
.icon-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; font-size: 16px;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.icon-btn.active { background: var(--accent-weak); color: var(--accent); }
.icon-btn.has-badge { position: relative; }
.icon-btn .badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
}
.topbar-user {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); cursor: pointer; font-weight: 600;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-user:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }

.body { display: grid; grid-template-columns: 232px 1fr; overflow: hidden; }

/* ── projects rail ──────────────────────────────────────────── */
.rail {
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 14px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}
.rail .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding: 8px 10px 4px; font-weight: 600; }
.rail .proj {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--ink-2);
}
.rail .proj:hover { background: var(--surface-2); color: var(--ink); }
.rail .proj.active { background: var(--accent-weak); color: var(--ink); font-weight: 600; }
.rail .proj .glyph { color: var(--accent); }
.rail .proj .count { margin-left: auto; font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
/* Drag a project up or down to set the sidebar order. The row itself is the
   handle — the list is short and every row is a link, so an extra grip glyph
   would be noise. The ghost stays faintly in place to mark where it came from. */
.rail .proj[draggable="true"]:active { cursor: grabbing; }
.rail .proj.dragging { opacity: 0.4; }
.rail .add { color: var(--ink-3); }
.rail .add:hover { color: var(--accent); }
.rail .grow { flex: 1; }
.rail .nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--ink-2); }
.rail .nav-item:hover { background: var(--surface-2); color: var(--ink); }
.rail .nav-item.active { background: var(--accent-weak); color: var(--ink); font-weight: 600; }
.rail .nav-item .count { margin-left: auto; font: 11px var(--font-mono); color: var(--ink-3); }
/* rail keyboard focus (g p → j/k/↵, Esc leaves). Plain :focus, not :focus-visible —
   moveRail() focuses programmatically and must stay visibly highlighted. */
.rail .proj:focus, .rail .nav-item:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface-2); }

/* ── main ───────────────────────────────────────────────────── */
.main { overflow-y: auto; padding: 0; }
.main-inner { max-width: 960px; margin: 0 auto; padding: 22px 28px 80px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; position: sticky; top: 0; background: var(--paper); z-index: 5; }
.tab { padding: 11px 14px; cursor: pointer; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tab .pill { margin-left: 6px; font-size: 11px; font-family: var(--font-mono); color: var(--ink-3); }

.page-title { font-size: 15px; font-weight: 650; margin: 0 0 14px; letter-spacing: -0.01em; }

/* new-task composer */
.composer { display: flex; gap: 8px; margin-bottom: 18px; }
.composer input.title-in {
  flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); outline: none; box-shadow: var(--shadow);
}
.composer input.title-in:focus { border-color: var(--accent); }
.composer select {
  padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); cursor: pointer;
}
.composer .btn.icon-only { width: 42px; padding-left: 0; padding-right: 0; justify-content: center; flex: none; }
.composer .btn.icon-only svg { display: block; }

/* ── task row ───────────────────────────────────────────────── */
.task-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); margin-bottom: 8px; cursor: pointer; transition: border-color .12s, transform .04s;
}
.task-row:hover { border-color: var(--line-strong); }
.task-row:active { transform: translateY(1px); }
.task-row.archived { opacity: 0.55; }
.task-row.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.status-dot.active { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-weak); }
.status-dot.waiting { background: var(--working); box-shadow: 0 0 0 4px var(--working-weak); }
.status-dot.blocked { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-weak); }
.status-dot.done { background: var(--merged); }
.status-dot.failed { background: var(--danger); }
.status-dot.cancelled { background: var(--ink-3); }
.task-main { min-width: 0; }
.task-title { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Human-facing sequential task id (SPEC §10.6): a quiet monospace tag before the title. */
.task-num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); font-weight: 500; }
.task-sub { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.task-sub .wf { font-family: var(--font-mono); color: var(--ink-2); }
.task-sub .branch { font-family: var(--font-mono); }
.principal-chip { display:inline-flex; align-items:center; border-radius:999px; padding:2px 7px; background:var(--accent-weak); color:var(--accent); font-weight:600; }
.task-right { display: flex; align-items: center; gap: 12px; }

/* ── real-link rows ─────────────────────────────────────────────
   Rows that open a task (task list, run history, merge/agent queues) are real
   links: wireTaskNav() lays an absolutely-positioned <a> across the row so the
   browser offers every native "open in new tab/window" gesture (Ctrl/⌘-click,
   middle-click, Shift-click, right-click → Open in new tab). A plain left-click
   is caught by installLinkRouter() and routed in place, so ordinary navigation
   stays instant — no page reload. The overlay is a positive-z layer that sits
   above the row's static text (so clicking anywhere navigates) but BELOW the
   row's own controls, which are lifted above it here so buttons, drag handles
   and drag-to-reorder keep working. */
.has-row-link { position: relative; }
.row-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.has-row-link button,
.has-row-link .queue-actions,
.has-row-link .drag-handle,
.has-row-link [data-move],
.has-row-link a:not(.row-link) { position: relative; z-index: 2; }
.icon-btn svg { display: block; } /* archive/unarchive glyphs sit flush in the icon button */

/* Undo action inside a toast — so an accidental archive is one click to reverse. */
.toast-action {
  margin-left: 14px; background: transparent; border: 1px solid var(--paper); color: var(--paper);
  padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.toast-action:hover { background: var(--paper); color: var(--ink); }

/* ── the signature: stage pipeline ─────────────────────────── */
.pipeline { display: flex; align-items: center; gap: 0; }
.pipeline .seg {
  position: relative; height: 6px; width: 22px; background: var(--line);
  display: flex; align-items: center;
}
.pipeline .seg:first-child { border-radius: 3px 0 0 3px; }
.pipeline .seg:last-child { border-radius: 0 3px 3px 0; }
.pipeline .seg.done { background: var(--accent); opacity: 0.45; }
.pipeline .seg.current { background: var(--accent); }
.pipeline .seg.current.working { animation: pulse 1.4s ease-in-out infinite; }
.pipeline .seg.current.waiting { background: var(--working); }
.pipeline .seg.current.blocked { background: var(--danger); }
.pipeline .seg.merged { background: var(--merged); opacity: 1; }
/* 'escalated' = blocked, awaiting a human — flag the whole track, don't fake a position. */
.pipeline.escalated .seg { background: var(--danger); opacity: 0.32; }
.pipeline-lg.escalated .bar { background: var(--danger); opacity: 0.4; }
.pipeline .ponr { width: 9px; height: 9px; transform: rotate(45deg); background: var(--line-strong); margin: 0 1px; flex: none; }
.pipeline .ponr.passed { background: var(--merged); }
.pipeline .ponr.current { background: var(--accent); }

.responsibility-editor { width:100%; display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:8px; padding-top:10px; border-top:1px solid var(--line); margin-top:10px; }
.responsibility-editor > label:not(.switch) { display:flex; flex-direction:column; gap:4px; color:var(--ink-3); font-size:11px; }
.responsibility-editor .switch, .responsibility-editor .pal-sub { align-self:end; margin:0; }
.inbox-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; color:var(--ink-2); }
.inbox-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin-bottom:7px; cursor:pointer; }
.inbox-row.unread { border-left:3px solid var(--accent); background:var(--surface-2); }
.inbox-kind { color:var(--accent); }
.delivery-card { margin-top:22px; }
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px 14px; }
.organization-settings { max-width:1080px; margin:0 auto; }
.main-inner:has(> .organization-settings) { max-width:1160px; }
.organization-settings .card { margin-bottom:12px; }
.organization-settings .settings-grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px 14px; }
.settings-intro { color:var(--ink-2); margin:-8px 0 14px; }
.settings-header { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.settings-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:38px; align-items:start; }
.settings-content { min-width:0; }
.settings-nav { position:sticky; top:24px; display:flex; flex-direction:column; gap:2px; padding:8px 14px 12px 0; border-right:1px solid var(--line); }
.settings-nav > span { color:var(--ink-3); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px 9px; }
.settings-nav a { position:relative; color:var(--ink-2); text-decoration:none; font-size:13px; padding:8px 10px; border-radius:8px; transition:background .15s,color .15s; }
.settings-nav a::before { content:''; position:absolute; left:-15px; top:8px; bottom:8px; width:2px; border-radius:2px; background:transparent; }
.settings-nav a:hover { color:var(--ink); background:var(--surface-2); }
.settings-nav a.active { color:var(--accent); background:var(--accent-weak); font-weight:600; }
.settings-nav a.active::before { background:var(--accent); }
/* One pane at a time: the rail chooses, the pane answers. */
.settings-pane { display:none; }
.settings-pane.active { display:block; animation:pane-in .16s ease; }
@keyframes pane-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.settings-section-title { margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--ink); font-size:21px; font-weight:700; letter-spacing:-.02em; }
.settings-section-title small { display:block; margin-top:3px; color:var(--ink-3); font-size:12.5px; font-weight:400; letter-spacing:0; line-height:1.45; }
.project-kind-guide { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0 0 12px; }
.project-kind-guide button { display:flex; flex-direction:column; gap:3px; min-width:0; padding:11px 12px; color:var(--ink); text-align:left; cursor:pointer; border:1px solid var(--line); border-radius:10px; background:var(--surface); transition:border-color .15s,transform .15s,background .15s; }
.project-kind-guide button:hover { border-color:var(--accent); background:var(--accent-weak); transform:translateY(-1px); }
.project-kind-guide b { font-size:12px; }
.project-kind-guide span { color:var(--ink-3); font-size:10.5px; line-height:1.35; }
.project-config-section { display:flex; gap:12px; align-items:flex-start; scroll-margin-top:20px; margin:30px 0 10px; }
.project-config-section:first-of-type { margin-top:0; }
.project-config-number { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--accent-weak); color:var(--accent); font:600 11px var(--font-mono); }
.project-config-section h2 { margin:1px 0 2px; font-size:16px; letter-spacing:-.01em; }
.project-config-section p { margin:0; color:var(--ink-3); font-size:12px; line-height:1.45; }
.project-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 14px; margin:14px 0; }
.project-form-grid .form-row { margin:0; }
.project-form-grid .form-row > span { color:var(--ink-2); font-size:12px; font-weight:600; }
.project-form-grid .form-row.wide { grid-column:1 / -1; }
.project-form-grid .switch { flex-direction:row; align-items:center; }
.project-form-grid .switch > span { display:flex; flex-direction:column; gap:3px; }
.field-help { color:var(--ink-3); font-size:10.5px; font-weight:400; line-height:1.4; }
.project-resource-row { display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.project-resource-row:last-child { border-bottom:0; }
.project-resource-main { flex:1; min-width:0; }
.project-resource-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:5px; color:var(--ink-3); font-size:11px; }
.project-resource-location { display:inline-flex; gap:5px; align-items:center; padding:3px 7px; border-radius:6px; background:var(--surface-2); }
.project-resource-location span { color:var(--ink-3); }
.project-resource-location code { color:var(--ink-2); font-family:var(--font-mono); }
.project-help-callout { display:flex; gap:10px; align-items:flex-start; margin:10px 0 14px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink-2); font-size:12px; line-height:1.5; }
.project-help-callout b { color:var(--ink); }
.project-help-callout .callout-mark { color:var(--accent); font-weight:700; }
.project-empty { margin:8px 0 14px; padding:14px; border:1px dashed var(--line-strong); border-radius:10px; color:var(--ink-3); font-size:12px; line-height:1.5; }
.project-form-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px; }
.service-fields[hidden] { display:none; }
.project-repository-field { align-items:flex-end; }
.project-repository-field .form-row { flex:1; margin:0; }
.btn.saved { color:var(--ok, #4ec9a3); border-color:currentColor; }
.settings-divider { height:1px; background:var(--line); margin:22px 0 18px; }
.proposal-card { margin:10px 0; padding:12px; display:flex; align-items:center; gap:12px; border:1px solid var(--accent); border-radius:10px; background:var(--accent-weak); }
.proposal-card > :first-child { flex:1; }
.settings-disclosure > summary { cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; list-style:none; }
.settings-disclosure > summary::-webkit-details-marker { display:none; }
.settings-disclosure > summary::after { content:'›'; color:var(--ink-3); font-size:20px; }
.settings-disclosure[open] > summary::after { transform:rotate(90deg); }
.settings-disclosure > summary span { color:var(--ink-3); font-size:12px; font-weight:400; margin-left:auto; }
.member-row { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); }
.person-name { display:flex; flex-direction:column; min-width:0; }
.person-name small { color:var(--ink-3); font-size:11px; font-weight:400; }
.team-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); }
.team-heading > span:first-child { display:flex; flex-direction:column; gap:2px; }
.team-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.team-rename-form[hidden] { display:none; }
.inline-form { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.inline-form input, .inline-form select { min-width:0; flex:1; padding:7px 9px; border:1px solid var(--line); background:var(--surface-2); border-radius:7px; }
@media (max-width: 850px) { .responsibility-editor { grid-template-columns:1fr; } .org-switcher { max-width:140px; } .settings-disclosure > summary span { display:none; } .settings-layout { grid-template-columns:1fr; gap:14px; } .settings-nav { position:sticky; top:0; z-index:4; flex-direction:row; overflow-x:auto; padding:8px 0; border:0; border-bottom:1px solid var(--line); background:var(--paper); } .settings-nav > span { display:none; } .settings-nav a { white-space:nowrap; } .settings-nav a::before { display:none; } .project-kind-guide { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .project-form-grid { grid-template-columns:1fr; } .project-form-grid .form-row.wide { grid-column:auto; } .project-kind-guide { grid-template-columns:1fr 1fr; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* big labeled pipeline on the task page (Overview tab) */
.pipeline-lg { display: flex; align-items: flex-start; gap: 0; margin: 4px 0 8px; flex-wrap: wrap; }
.pipeline-lg .node { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 52px; }
.pipeline-lg .node .bar { height: 5px; width: 100%; background: var(--line); border-radius: 3px; }
.pipeline-lg .node.done .bar { background: var(--accent); opacity: .45; }
.pipeline-lg .node.current .bar { background: var(--accent); }
.pipeline-lg .node.merged .bar { background: var(--merged); }
.pipeline-lg .node .name { font-size: 11px; font-family: var(--font-mono); color: var(--ink-3); }
.pipeline-lg .node.current .name { color: var(--accent); font-weight: 600; }
.pipeline-lg .node.done .name { color: var(--ink-2); }
.pipeline-lg .node .diamond { color: var(--ink-3); font-size: 10px; }
.pipeline-lg .node.merged .name, .pipeline-lg .node.merged .diamond { color: var(--merged); }

/* ── badges / chips ─────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px; font-family: var(--font-mono);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
.chip.active { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
.chip.waiting { background: var(--working-weak); color: var(--working); border-color: transparent; }
.chip.blocked, .chip.failed { background: var(--danger-weak); color: var(--danger); border-color: transparent; }
.chip.done { background: var(--merged-weak); color: var(--merged); border-color: transparent; }
.chip.approval-needed { background: var(--working-weak); color: var(--working); border-color: transparent; }

/* GitHub pull request, in the task byline: link + live state. */
.pr-link {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  color: var(--ink-2); border-bottom: 1px dotted var(--line);
}
.pr-link:hover { color: var(--accent); }
.pr-link .pr-state {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3);
}
.pr-link.open .pr-state { background: var(--accent-weak); color: var(--accent); }
.pr-link.merged .pr-state { background: var(--merged-weak); color: var(--merged); }
.pr-link.closed .pr-state { background: var(--danger-weak); color: var(--danger); }

/* ── multi-PR branches (one row per pull request the task is opening) ── */
.checkout-list { display: flex; flex-direction: column; gap: 2px; }
.checkout-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.checkout-row:last-of-type { border-bottom: 0; }
.checkout-mark { color: var(--ink-3); width: 12px; text-align: center; }
.checkout-row.approved .checkout-mark { color: var(--merged, var(--accent)); }

/* ── buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 550;
}
.btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { color: var(--danger); border-color: var(--danger-weak); }
.btn.danger:hover { background: var(--danger-weak); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.sm { padding: 5px 10px; font-size: 13px; }

/* ── task page ──────────────────────────────────────────────── */
/* A task opens as a page of its own inside #main (.main-inner): fixed head
   (title + tabs) and foot (the workflow's declared actions, visible on every
   tab) around a scrollable body. The page owns the scrolling, so the shell's
   scroll container stops and the inner column unclamps to the full cell —
   tp-head/tp-content re-center their own 960px column against the full-bleed
   head/foot borders. */
.main:has(.task-page) { overflow: hidden; }
.main-inner:has(> .task-page) { max-width: none; padding: 0; height: 100%; }
.task-page { display: flex; flex-direction: column; height: 100%; }
/* Head, body content and foot all share ONE column: max-width 960 incl. 28px
   side padding, centered — so the title, meta, tabs, section content and the
   action buttons line up on the same left edge (the strips stay full-bleed). */
.tp-head { padding-top: 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.tp-head > * { max-width: 960px; margin-left: auto; margin-right: auto; padding: 0 28px; }
/* No tabs (the repeatable-series config page) → the head needs its own bottom gap. */
.tp-head:not(:has(.tp-tabs)) { padding-bottom: 14px; }
.tp-head .row1 { display: flex; align-items: center; gap: 10px; }
.tp-head h2 { font-size: 17px; margin: 0; flex: 1; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-head .row1 .task-num { font-size: 13px; }
.tp-parent {
  width: 100%; display: flex; align-items: center; gap: 7px;
  padding: 0 28px 8px 72px; border: 0; background: transparent;
  color: var(--ink-3); text-align: left; cursor: pointer;
}
.tp-parent:hover .tp-parent-title { color: var(--accent); }
.tp-parent:focus-visible { outline: none; }
.tp-parent:focus-visible .tp-parent-title { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.tp-parent-kicker { font-size: 11px; letter-spacing: .02em; white-space: nowrap; }
.tp-parent-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 12px; font-weight: 600; transition: color .12s; }
.tp-parent-arrow { font-size: 16px; line-height: 1; color: var(--ink-3); }
.tp-head .meta { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); flex-wrap: wrap; }
/* margin-top/bottom longhands keep the parent rule's auto side margins (and kill
   the base .tabs 18px bottom margin — the head's border sits right under the tabs);
   the 14px side padding cancels the first tab's own padding so its LABEL sits on
   the column edge. */
.tp-tabs { margin-top: 10px; margin-bottom: 0; padding: 0 14px; border-bottom: none; position: static; background: transparent; }
.tp-tabs .tab { text-decoration: none; margin-bottom: 0; }
.tp-body { flex: 1; overflow-y: auto; }
/* Focused programmatically for keyboard scrolling — it's the whole active surface, not a control, so no outline. */
.tp-body:focus, .tp-body:focus-visible { outline: none; }
.tp-content { max-width: 960px; margin: 0 auto; padding: 20px 28px 48px; }
.tp-foot { border-top: 1px solid var(--line); padding: 12px 0; background: var(--surface-2); }
.tp-foot-inner { max-width: 960px; margin: 0 auto; padding: 0 28px; display: flex; gap: 8px; align-items: center; }
.tp-foot-inner > .actions { flex: 1; }

/* ── full-page task form (new task / edit draft, SPEC §10.4) ─────────────── */
/* The expanded form is a PAGE, not a dialog — GitHub-issue-creation shape: a
   head strip (back · title · workflow), a scrollable two-column body (the big
   prompt editor + workflow parameters left, organization metadata right) and a
   foot strip with the actions. It covers only the MAIN cell — the topbar (52px)
   and projects rail (232px, hidden ≤720px) stay visible and live; navigating
   closes the page (applyRoute clicks #tf-close, which flushes the draft).
   Shares the task page's column-and-strip language; sits under the topbar
   popover (z 50), toasts (z 60) and palettes/pickers (#modal-root, z 70). */
.task-form-page {
  position: fixed; top: 52px; left: 232px; right: 0; bottom: 0; z-index: 20;
  display: flex; flex-direction: column;
  background: var(--paper); outline: none;
  animation: pane-in .16s ease;
}
.tf-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 0; }
.tf-head-inner, .tf-foot-inner, .tf-columns { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.tf-head-inner { display: flex; align-items: center; gap: 10px; }
.tf-head h2 { margin: 0; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.tf-crumb { color: var(--ink-3); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-savestate { margin-left: auto; color: var(--ink-3); font-size: 12px; flex: none; }
.tf-savestate:not(:empty)::before { content: '✓ '; color: var(--merged); }
.tf-head select { flex: none; border: 1px solid var(--line); background: var(--surface-2); border-radius: 7px; padding: 6px 9px; font-weight: 550; }
.tf-scroll { flex: 1; overflow-y: auto; }
.tf-columns {
  padding-top: 26px; padding-bottom: 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px 44px;
  align-items: start;
}
.tf-main { min-width: 0; }
/* The prompt is the body of the "issue" — give it real room. */
.tf-main .prompt-field > textarea { min-height: 220px; }
.tf-main > .section-h { margin: 26px 0 14px; padding-top: 20px; border-top: 1px solid var(--line); }
/* Sidebar: hairline-separated metadata sections, GitHub-issue style. */
.tf-side { min-width: 0; display: flex; flex-direction: column; }
.tf-side .form-row { margin-bottom: 0; padding: 14px 0; }
.tf-side .form-row:first-child { padding-top: 2px; }
.tf-side .form-row + .form-row { border-top: 1px solid var(--line); }
.tf-side .org-editor { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 4px; }
/* Compact one-liner rows (Attempts: __) — the label sits inline with a short input. */
.tf-side .form-row.tf-inline { flex-direction: row; align-items: center; gap: 10px; }
.tf-side .tf-inline label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tf-side .tf-inline input { width: 68px; }
/* The credential chips wrap fine at sidebar width; just keep them off the hairline. */
.tf-side #cred-editor-newtask { margin-top: 2px; }
.tf-vault-button { width: 100%; justify-content: space-between; }
.tf-vault-count { color: var(--ink-3); font-size: 11px; font-weight: 500; }
.tf-foot { border-top: 1px solid var(--line); background: var(--surface); padding: 12px 0; }
.tf-foot-inner { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.tf-foot .tf-hint { margin-right: auto; color: var(--ink-3); font-size: 12px; }
@media (max-width: 900px) {
  .tf-columns { grid-template-columns: 1fr; }
  .tf-head-inner, .tf-foot-inner, .tf-columns { padding-left: 16px; padding-right: 16px; }
  .tf-columns { padding-top: 18px; padding-bottom: 40px; }
  .tf-side { margin-top: 10px; border-top: 1px solid var(--line); }
  .tf-foot .tf-hint { display: none; }
}
@media (max-width: 720px) { .task-form-page { left: 0; } } /* the rail is hidden */

/* Check-in tab: a fixed sidebar (agent conversations + the ephemeral terminal)
   beside a chat-style pane — the thread scrolls, the compose box stays put. */
.tp-body[data-tab="checkin"] { overflow: hidden; }
.tp-body[data-tab="checkin"] > .tp-content { max-width: none; padding: 0; height: 100%; }
.ck-layout { display: grid; grid-template-columns: 208px 1fr; grid-template-rows: 100%; height: 100%; }
.ck-side { border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto; padding: 14px 10px; }
.ck-side-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; margin: 0 10px 6px; }
.ck-side-h:not(:first-child) { margin-top: 16px; }
.ck-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; cursor: pointer; color: var(--ink-2); font-size: 13px; }
.ck-item:hover { background: var(--surface-2); color: var(--ink); }
.ck-item.sel { background: var(--accent-weak); color: var(--ink); font-weight: 600; }
.ck-item .ck-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-item .ck-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.ck-terminal-item { padding: 0; gap: 0; overflow: hidden; }
.ck-terminal-open {
  min-width: 0; flex: 1; align-self: stretch; display: flex; align-items: center; gap: 8px;
  padding: 7px 6px 7px 10px; border: 0; background: transparent; color: inherit;
  text-align: left; cursor: pointer; font-weight: inherit;
}
.ck-terminal-open:disabled { cursor: not-allowed; opacity: .55; }
.ck-terminal-copy {
  width: 30px; height: 30px; margin-right: 2px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer;
}
.ck-terminal-copy:hover { background: var(--surface); color: var(--ink); }
.ck-terminal-copy svg { display: block; }
.ck-live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); flex: none; animation: pulse 1.4s ease-in-out infinite; }
.ck-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.ck-pane-head { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
/* min-height:0 lets the thread SHRINK below its content (a flex item's default
   min-height is the content size) — without it a long conversation grows the
   pane instead of scrolling, pushing the compose box off-screen. */
.ck-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.ck-thread:focus, .ck-thread:focus-visible { outline: none; }
.ck-thread > .thread { max-width: 860px; margin: 0 auto; }
.ck-compose { border-top: 1px solid var(--line); padding: 10px 20px; background: var(--surface); }
.ck-compose .followup-box { margin-top: 0; max-width: 860px; margin-left: auto; margin-right: auto; }
.ck-term { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 16px; min-height: 0; }
.ck-term .term-screen { flex: 1; height: auto; max-height: none; outline: none; }
.ck-term .empty { margin: auto; }

.section-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; margin: 18px 0 8px; }
.section-h:first-child { margin-top: 0; }

/* Delegated work is one composed object, not a loose list of ids. The panel gives
   the parent an at-a-glance answer to three questions: what was delegated, where
   is each piece, and how close is the group to returning. */
.subtasks {
  margin: 24px 0 4px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: 0 1px 2px rgba(20, 24, 34, .035);
}
.subtasks-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 20px 13px; }
.subtasks-kicker { margin-bottom: 2px; color: var(--ink-3); font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.subtasks h3 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.015em; }
.subtasks-count { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.subtasks-count strong { color: var(--ink); font-size: 15px; font-weight: 650; }
.subtasks-progress { height: 3px; margin: 0 20px 5px; overflow: hidden; border-radius: 999px; background: var(--line); }
.subtasks-progress > span { display: block; width: var(--subtask-progress); height: 100%; border-radius: inherit; background: var(--merged); transition: width .25s ease; }
.subtask-list { padding: 0 8px 8px; }
.subtask-row {
  appearance: none; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 13px; min-height: 64px; padding: 10px 12px;
  border: 0; border-top: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  transition: background .12s, transform .04s;
}
.subtask-row:first-child { border-top-color: transparent; }
.subtask-row:hover { background: var(--surface-2); }
.subtask-row:active { transform: translateY(1px); }
.subtask-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.subtask-state { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 4px var(--surface-2); }
.subtask-state.active { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-weak); animation: pulse 1.4s ease-in-out infinite; }
.subtask-state.waiting { background: var(--working); box-shadow: 0 0 0 4px var(--working-weak); }
.subtask-state.blocked, .subtask-state.failed { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-weak); }
.subtask-state.done { background: var(--merged); box-shadow: 0 0 0 4px var(--merged-weak); }
.subtask-identity { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.subtask-title { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.subtask-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.subtask-title .task-num { flex: none; font-size: 11px; }
.subtask-copy { color: var(--ink-3); font-size: 11px; }
.subtask-pipeline .pipeline .seg { width: 16px; height: 4px; }
.subtask-pipeline .pipeline .ponr { width: 7px; height: 7px; }
.subtask-arrow { color: var(--ink-3); font-size: 20px; line-height: 1; transition: transform .12s, color .12s; }
.subtask-row:hover .subtask-arrow { color: var(--accent); transform: translateX(2px); }

@media (max-width: 700px) {
  .tp-parent { padding-left: 28px; }
  .subtask-pipeline { display: none; }
  .subtask-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .subtasks-head { align-items: center; }
}

/* thread */
.thread { display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 10px 13px; border-radius: 10px; max-width: 92%; word-break: break-word; }
.msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 3px; }
.msg.agent { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.msg.system { align-self: center; background: transparent; color: var(--ink-3); font-size: 12px; font-style: italic; }
.msg-text { white-space: pre-wrap; }
.msg-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.msg-meta-gap { flex: 1; }
.msg .role { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; font-family: var(--font-mono); }
.msg time, .agent-activity time { color: currentColor; opacity: .58; font: 10px/1.2 var(--font-mono); white-space: nowrap; }

/* A little copy control per message — faint until the bubble is hovered. */
.msg-copy { display: inline-flex; align-items: center; justify-content: center; padding: 2px; border: 0; background: transparent; color: currentColor; opacity: 0; cursor: pointer; border-radius: 5px; transition: opacity .12s, background .12s; }
.msg:hover .msg-copy, .msg-copy:focus-visible { opacity: .55; }
.msg-copy:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
.msg-copy.copied { opacity: 1; color: var(--ok, #2f9e44); }
.msg-copy.copied::after { content: "✓"; }
.msg-copy.copied svg { display: none; }

/* Rendered Markdown inside a message bubble: drop the raw pre-wrap and give the
   common block elements sane, compact spacing. */
.msg-text.md { white-space: normal; }
.msg-text.md > :first-child { margin-top: 0; }
.msg-text.md > :last-child { margin-bottom: 0; }
.msg-text.md .md-p { margin: 0 0 8px; }
.msg-text.md .md-h { margin: 10px 0 6px; line-height: 1.25; font-weight: 650; }
.msg-text.md h1.md-h { font-size: 1.3em; }
.msg-text.md h2.md-h { font-size: 1.18em; }
.msg-text.md h3.md-h { font-size: 1.06em; }
.msg-text.md h4.md-h, .msg-text.md h5.md-h, .msg-text.md h6.md-h { font-size: 1em; }
.msg-text.md .md-list { margin: 0 0 8px; padding-left: 1.5em; }
.msg-text.md ol.md-list { list-style: decimal; }
.msg-text.md ul.md-list { list-style: disc; }
.msg-text.md .md-list li { margin: 2px 0; }
/* Nested lists hug their parent item; only the outermost list carries margin. */
.msg-text.md .md-list .md-list { margin: 2px 0 0; }
/* Loose lists (blank lines between items) breathe a little more. */
.msg-text.md .md-loose > li { margin: 6px 0; }
/* A paragraph that is the sole/last child of a list item shouldn't add a gap. */
.msg-text.md .md-list li > .md-p:last-child { margin-bottom: 0; }
.msg-text.md .md-quote { margin: 0 0 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--line); opacity: .9; }
.msg-text.md .md-hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.msg-text.md a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msg-text.md .md-inline { font-family: var(--font-mono); font-size: .9em; padding: 1px 4px; border-radius: 4px; background: rgba(127, 127, 127, .16); }
.msg-text.md .md-code { margin: 0 0 8px; padding: 9px 11px; border-radius: 8px; overflow-x: auto; background: rgba(127, 127, 127, .14); }
.msg-text.md .md-code code { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: pre; }
.msg-text.md .md-math { white-space: normal; }
.msg-text.md .md-table { border-collapse: collapse; margin: 0 0 8px; display: block; overflow-x: auto; max-width: 100%; font-size: .95em; }
.msg-text.md .md-table th, .msg-text.md .md-table td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; vertical-align: top; }
.msg-text.md .md-table th { background: rgba(127, 127, 127, .12); font-weight: 600; }
.msg-text.md .md-table tr:nth-child(even) td { background: rgba(127, 127, 127, .05); }

/* Provider-native work items. Commands, file edits, tools, reasoning and turn
   lifecycle live inline with the messages, but stay visually quieter than chat. */
.agent-activity { width: min(92%, 760px); align-self: flex-start; display: flex; gap: 10px; padding: 7px 10px; margin: -2px 0; color: var(--ink-2); font-size: 12px; }
.activity-icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); font: 11px/1 var(--font-mono); }
.agent-activity.running .activity-icon, .agent-activity.started .activity-icon, .agent-activity.updated .activity-icon { color: var(--working); border-color: color-mix(in srgb, var(--working) 35%, var(--line)); }
.agent-activity.failed .activity-icon { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-weak); }
.agent-activity.completed .activity-icon { color: var(--merged); }
.activity-body { min-width: 0; flex: 1; }
.activity-head { min-height: 20px; display: flex; align-items: center; gap: 8px; }
.activity-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); color: var(--ink-2); }
.activity-state { padding: 1px 5px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font: 9px/1.5 var(--font-mono); text-transform: uppercase; }
.activity-head time { margin-left: auto; }
.activity-detail { margin-top: 3px; }
.activity-detail summary { width: max-content; color: var(--ink-3); cursor: pointer; font-size: 11px; }
.activity-detail pre { max-height: 260px; overflow: auto; margin: 5px 0 0; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); white-space: pre-wrap; word-break: break-word; font: 11px/1.45 var(--font-mono); }
.conversation-presence { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border-radius: 999px; color: var(--ink-2); background: var(--surface-2); font-size: 11px; }
.presence-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.conversation-presence.working .presence-dot { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.conversation-presence.waiting .presence-dot { background: var(--working); }
.conversation-presence.done .presence-dot { background: var(--merged); }
.conversation-presence.failed .presence-dot { background: var(--danger); }

/* review panel */
.review { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--surface-2); }
.review .summary { margin-bottom: 10px; }
.review .links { display: flex; flex-wrap: wrap; gap: 8px; }
.review .review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.review .review-actions .btn.review-action { font-family: var(--font-mono); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
#review-action-out { margin-top: 8px; }
.review iframe { width: 100%; min-height: 220px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.task-approvals { max-width: 980px; }
.approval-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.approval-page-head p { margin: 3px 0 0; }
.approval-list { display: flex; flex-direction: column; gap: 8px; }
.approval-request { display: flex; align-items: center; gap: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.approval-request-main { flex: 1; min-width: 0; }
.approval-request-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 650; margin-bottom: 4px; }
.approval-request-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.approval-request-actions select { max-width: 220px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.approval-request-help { margin-top: 7px; color: var(--ink-2); font-size: 12px; }
.approval-empty { padding: 24px 14px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--ink-3); text-align: center; }
.approval-history { margin-top: 14px; }
.approval-history-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
  .approval-request { align-items: stretch; flex-direction: column; }
  .approval-request-actions { justify-content: flex-start; }
  .approval-request-actions select { width: 100%; max-width: none; }
}
.diff { font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; overflow-x: auto; white-space: pre; }
.diff .add { color: var(--merged); }
.diff .del { color: var(--danger); }
/* tier-2 declarative widgets (host widget library) */
.wk-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0; display: block; overflow-x: auto; }
.wk-table th, .wk-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wk-table th { color: var(--ink-3); font-weight: 600; }
.wk-gauge { margin: 4px 0; }

/* action forms (the generic auto-render floor) */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.followup-box { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.followup-box .prompt-field { flex: 1; }
.followup-box textarea { min-height: 38px; }
/* The follow-up box now lives inside each conversation — set it apart from the thread above it. */

/* live event stream */
.events { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; }
.events .ev { display: flex; gap: 8px; }
.events .ev .t { color: var(--accent); flex: none; }

/* advanced disclosure */
details.advanced { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 12px; }
details.advanced summary { cursor: pointer; color: var(--ink-3); font-size: 12px; user-select: none; }
pre.raw { font-family: var(--font-mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; overflow-x: auto; max-height: 260px; }
/* The check-in terminal: a focusable screen the user types straight into. */
pre.term-screen { overflow-y: auto; white-space: pre-wrap; word-break: break-word; cursor: text; }
pre.term-screen:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }

/* ── queue / dashboard / settings ──────────────────────────── */
.card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 16px; margin-bottom: 12px; }
.phone-access-address { display:grid; gap:4px; margin-bottom:14px; }
.phone-access-address > span { color:var(--ink-3); font-size:11px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; }
.phone-access-address > b { color:var(--ink-2); font-size:16px; }
.phone-access-address.missing > b { color:var(--working); }
.phone-access-address.conflict > b { color:var(--working); }
.phone-access-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.phone-access-head > span:last-child { color:var(--ink-2); font-size:12px; }
.remote-state { display:inline-flex; padding:3px 9px; border-radius:999px; background:var(--working-weak); color:var(--working); font-size:11px; font-weight:700; }
.remote-state.ready { background:var(--merged-weak); color:var(--merged); }
.phone-access-url { overflow-wrap:anywhere; font-size:12px; }
.phone-setup { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); }
.phone-setup > summary { padding:11px 12px; cursor:pointer; color:var(--ink-2); font-size:12px; font-weight:650; user-select:none; }
.phone-setup[open] > summary { border-bottom:1px solid var(--line); }
.phone-setup-body { padding:12px; }
.phone-setup-body > p:first-child { margin:0 0 12px; color:var(--ink-2); font-size:12px; }
.phone-system-prompt { margin:8px 0 0; }
.phone-steps { margin:10px 0 14px; padding-left:22px; color:var(--ink-2); }
.phone-steps li + li { margin-top:5px; }
.phone-access-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.phone-setup-command { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0; padding:9px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); }
.phone-setup-command code { flex:1; min-width:220px; overflow-wrap:anywhere; font-family:var(--font-mono); font-size:12px; }
.phone-terminal-fallback { margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); }
.phone-terminal-fallback > summary { width:max-content; max-width:100%; cursor:pointer; color:var(--ink-3); font-size:11px; }
.phone-terminal-fallback pre { margin:9px 0 7px; padding:9px 10px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:11px; line-height:1.55; }
.phone-troubleshooting { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); color:var(--ink-2); font-size:12px; }
.phone-troubleshooting summary { width:max-content; cursor:pointer; color:var(--ink-2); font-weight:650; }
.phone-troubleshooting ol { margin:9px 0 0; padding-left:22px; }
.phone-troubleshooting li + li { margin-top:5px; }
.phone-security { margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); color:var(--ink-3); font-size:11px; }
.phone-installed { color:var(--merged); font-weight:650; font-size:12px; }
.queue-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: 8px; }
.queue-item .pos { font-family: var(--font-mono); font-weight: 700; color: var(--accent); width: 28px; }
.queue-item.current { border-color: var(--merged); background: var(--merged-weak); }
.queue-item.dragging { opacity: 0.4; }
.queue-item[draggable="true"] { cursor: grab; }
.queue-item .drag-handle { color: var(--ink-3); cursor: grab; width: 14px; text-align: center; user-select: none; }
.queue-item .drag-handle.placeholder { cursor: default; }
.queue-actions { display: flex; gap: 6px; }
.queue-domain { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin: 14px 0 6px; }
.queue-domain:first-child { margin-top: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.stat { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--surface); }
.stat .n { font-size: 26px; font-weight: 700; font-family: var(--font-mono); letter-spacing: -0.02em; }
.stat .l { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-row label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.form-row input, .form-row select, .form-row textarea {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); outline: none;
}
.form-row input:focus, .form-row select:focus { border-color: var(--accent); }
.switch { display: flex; align-items: center; gap: 10px; }
.switch input { width: 38px; height: 22px; }
.switch.disabled { opacity: .55; cursor: not-allowed; }

/* profile page */
.profile-page { max-width: 620px; }
.profile-identity { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent), #8a6cf0); color: #fff;
  display: grid; place-items: center; font-size: 22px; font-weight: 700; overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.profile-email { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.profile-rows { display: flex; flex-direction: column; }
.profile-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.profile-row-label { color: var(--ink-3); font-size: 13px; }
.profile-row-value { font-weight: 600; text-align: right; word-break: break-word; }
.verify-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; font-size: 13px;
  background: var(--working-weak, #fdf6e3); color: var(--ink-1);
  border-bottom: 1px solid var(--line);
}
.verify-banner .btn { flex: 0 0 auto; }
.verify-dismiss {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--ink-3); font-size: 14px; padding: 4px 6px; line-height: 1;
}
.verify-dismiss:hover { color: var(--ink-1); }
.profile-orgs { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.profile-org {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink-1); text-decoration: none;
}
.profile-org:hover { border-color: var(--accent); background: var(--accent-weak); }
.profile-org-mark { color: var(--ink-3); }
.profile-org-name { font-weight: 600; flex: 1; }

/* confirm layers (SPEC §5.2): one bordered row per Review gate, played in order */
.cf-layer { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.cf-layer .cf-move, .cf-layer .cf-del { padding: 2px 8px; font-size: 12px; color: var(--ink-3); }
.cf-layer .cf-del:hover { color: var(--danger); border-color: var(--danger-weak); }

/* label + per-field "reset to default" affordance (SPEC §10.4/§10.5) */
.label-row { display: flex; align-items: center; gap: 8px; }
.label-row label { flex: 1; }
.field-reset {
  border: none; background: none; cursor: pointer; padding: 0;
  font-size: 11px; font-weight: 600; color: var(--accent);
}
.field-reset[hidden] { display: none; }
.field-reset:hover { text-decoration: underline; }

/* custom combobox (model picker): a real dropdown that opens on focus/caret,
   filters as you type, and still accepts free text (SPEC §10.5). */
.combo { position: relative; display: flex; align-items: stretch; }
.combo > input { flex: 1; width: 100%; padding-right: 30px !important; }
.combo-caret {
  position: absolute; top: 0; right: 0; height: 100%; width: 28px;
  border: none; background: none; cursor: pointer; color: var(--ink-3);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.combo-caret:hover { color: var(--ink); }
.combo-menu {
  position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 70;
  max-height: 220px; overflow: auto; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14); padding: 4px;
}
.combo-menu[hidden] { display: none; }
.combo-opt { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.combo-opt.active { background: var(--accent-weak); }
.combo-opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.combo-opt-head span { min-width: 0; font-weight: 550; }
.combo-opt-head code {
  flex: none; color: var(--ink-3); font-size: 10px; font-weight: 400;
  background: none; padding: 0;
}
.combo-opt-description {
  margin-top: 2px; color: var(--ink-3); font-size: 11px; line-height: 1.35;
  white-space: normal;
}
.combo-empty { padding: 7px 10px; font-size: 12px; color: var(--ink-3); }

/* empty states */
.empty { text-align: center; padding: 56px 20px; color: var(--ink-3); }
.empty .big { font-size: 17px; color: var(--ink-2); margin-bottom: 6px; font-weight: 550; }

/* toast */
/* Above every scrim (.palette-scrim 70, .rail 80, .wiki-mention-menu 90): modals
   use toasts as their only validation feedback, so a toast behind one is a
   silent failure. */
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 9px; box-shadow: var(--shadow); font-size: 13px; animation: rise .2s ease; display: flex; align-items: center; max-width: min(520px, calc(100vw - 32px)); }
.toast.err { background: var(--danger); color: #fff; }
/* Errors linger, so they need a way out that isn't waiting. */
.toast-dismiss { flex: none; margin: -4px -8px -4px 12px; padding: 0 6px; border: 0; background: none; color: inherit; opacity: .7; font-size: 16px; line-height: 1.4; cursor: pointer; border-radius: 5px; }
.toast-dismiss:hover { opacity: 1; }
.toast-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* command palette */
.palette-scrim { position: fixed; inset: 0; background: rgba(20,24,34,.3); z-index: 70; display: grid; place-items: start center; padding-top: 14vh; }
.palette { width: min(560px, 92vw); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.palette input { width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); outline: none; background: transparent; font-size: 15px; }
.palette .opt { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.palette .opt.active { background: var(--accent-weak); }
.palette .opt.danger { color: var(--danger); }
.palette .opt .key { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
#pal-list { max-height: 46vh; overflow: auto; }
.pal-group { padding: 8px 16px 2px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pal-sub { margin-left: 8px; font-size: 11px; color: var(--ink-3); }
.pal-empty { padding: 14px 16px; color: var(--ink-3); font-size: 13px; }

/* Global search is a finder, not a command surface. It reuses the palette shell
   but gives results a two-line identity with their project/status context. */
.global-search { width: min(680px, 92vw); }
.global-search-head { display: flex; align-items: center; gap: 4px; padding-left: 16px; border-bottom: 1px solid var(--line); }
.global-search-head > span { color: var(--ink-3); font-size: 17px; }
.global-search-head input { border: 0; min-width: 0; }
.global-search-head .icon-btn { flex: none; margin-right: 7px; }
.global-search-context, .global-search-foot { padding: 8px 16px; color: var(--ink-3); background: var(--surface-2); font-size: 11px; }
.global-search-context { border-bottom: 1px solid var(--line); }
.global-search-foot { border-top: 1px solid var(--line); }
.global-search-foot code { color: var(--ink-2); }
#gs-list { min-height: 180px; max-height: 52vh; overflow: auto; padding-bottom: 6px; }
.global-search-result { align-items: flex-start !important; }
.global-search-kind { width: 22px; color: var(--ink-3); text-align: center; font-size: 16px; line-height: 20px; flex: none; }
.global-search-copy { display: grid; gap: 2px; min-width: 0; }
.global-search-copy b { color: var(--ink); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.global-search-copy span { color: var(--ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.global-search-empty { min-height: 180px; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; color: var(--ink-3); text-align: center; }
.global-search-empty b { color: var(--ink-2); font-size: 14px; }
.global-search-loading::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); animation: pulse-dot 1s ease-in-out infinite alternate; }
.global-search-summary { padding: 8px 16px 3px; color: var(--ink-3); font-size: 11px; text-align: center; }
/* Distinct name: redeclaring the breathing-dot keyframe above would silently
   override it and freeze every "agent is working" indicator. */
@keyframes pulse-dot { to { opacity: .3; transform: scale(.75); } }

/* keyboard navigation: list cursor, digit hints on action buttons, "?" help */
.task-row.cursor, .queue-item.cursor { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.task-row:focus-visible, .queue-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kbd { margin-left: 7px; font-family: var(--font-mono); font-size: 10px; line-height: 1.5; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.btn.primary .kbd, .btn.danger .kbd { color: inherit; border-color: currentColor; opacity: .7; }
.help-row { display: flex; gap: 12px; padding: 4px 0; font-size: 13px; align-items: baseline; }
.help-row .key { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; min-width: 34px; text-align: center; white-space: nowrap; }

/* login */
.login-wrap { display: grid; place-items: center; height: 100vh; height: 100dvh; }
.login-card { width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); }

/* Authorization profiles: the finite capability surface is a discoverable
   checklist. Dynamic resource scopes remain tucked under one expert control. */
.authz-checklist { display: grid; gap: 6px; margin: 10px 0; }
.authz-all, .authz-cap-item { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.authz-all { padding: 10px; margin: 10px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2, var(--surface)); }
.authz-all span, .authz-cap-item span, .authz-cap-group summary span { display: grid; gap: 2px; min-width: 0; }
.authz-all small, .authz-cap-item small, .authz-cap-group summary small { color: var(--ink-3); font-weight: 400; }
.authz-cap-group { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.authz-cap-group > summary { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; cursor: pointer; list-style: none; }
.authz-cap-group > summary::-webkit-details-marker { display: none; }
.authz-cap-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.authz-cap-item { padding: 9px 10px; background: var(--surface); }
.authz-cap-item code { width: fit-content; font-size: 10px; color: var(--ink-2); }
.authz-cap-item input, .authz-all input, .authz-cap-group summary input { margin-top: 2px; flex: none; }
.authz-scoped { margin: 8px 0 12px; }



.hidden { display: none !important; }

@media (max-width: 720px) {
  #app { height: 100dvh; }
  .topbar { gap: 8px; padding-left:max(10px, env(safe-area-inset-left)); padding-right:max(10px, env(safe-area-inset-right)); }
  .mobile-menu { display:grid; flex:none; }
  .topbar .brand { font-size:0; gap:0; }
  .topbar #topbar-help, .topbar #topbar-palette { display:none; }
  .topbar-user { max-width:84px; padding:0 9px; }
  .org-switcher { max-width:105px; }
  .body { grid-template-columns: 1fr; }
  .rail {
    display:flex; position:fixed; z-index:80; left:0; top:52px; bottom:0;
    width:min(82vw, 300px); padding-bottom:max(14px, env(safe-area-inset-bottom));
    transform:translateX(-105%); transition:transform .18s ease; box-shadow:var(--shadow);
  }
  .rail.mobile-open { transform:translateX(0); }
  .rail-scrim { position:fixed; z-index:70; inset:52px 0 0; border:0; background:rgba(10,13,20,.38); }
  .rail-scrim.visible { display:block; }
  .main-inner { padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .tabs { overflow-x:auto; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { flex:none; white-space:nowrap; }
  .composer { display:grid; grid-template-columns:minmax(0, 1fr) repeat(3, 42px); }
  .composer input.title-in { grid-column:1 / -1; min-width:0; width:100%; }
  .composer select { min-width:0; width:100%; }
  .tp-head > * { padding: 0 16px; }
  .tp-tabs { padding: 0 2px; }
  .tp-content { padding: 16px 16px 40px; }
  .tp-foot { padding: 10px 0; }
  .tp-foot-inner { padding: 0 16px; }
  .ck-layout { grid-template-columns: 148px 1fr; }
  .global-search-trigger { min-width: 34px; width: 34px; padding: 0; justify-content: center; }
  .global-search-trigger .global-search-label, .global-search-trigger .kbd { display: none; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .global-search-trigger { min-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Unified credential manager (logins + ambient + API keys): compact inline chips —
   drag to set precedence, toggle On/Off to enable/disable. Global / project / task. */
.cred-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cred-row {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); font-size: 12px; line-height: 1.6;
}
.cred-row.off { opacity: 0.5; }
.cred-row.dragging { opacity: 0.4; }
.cred-drag { cursor: grab; color: var(--ink-3); user-select: none; font-size: 11px; line-height: 1; }
.cred-drag:active { cursor: grabbing; }
.cred-label { white-space: nowrap; }
.cred-toggle {
  font-size: 10px; font-weight: 700; padding: 0 7px; border-radius: 999px;
  cursor: pointer; border: 1px solid var(--line); text-transform: uppercase; flex: none;
}
.cred-toggle.on { background: var(--accent); color: #fff; border-color: transparent; }
.cred-toggle.off { background: transparent; color: var(--ink-3); }
.cred-rename, .cred-del { cursor: pointer; color: var(--ink-3); font-size: 11px; }
.cred-rename:hover, .cred-del:hover { color: var(--accent); }

/* ── Trigger dependency chip-input (task form) ────────────────────────────── */
.chip-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 5px 7px; background: var(--surface); min-height: 34px;
}
.chip-input:focus-within { border-color: var(--accent); }
.chip-input .chips { display: contents; }
.dep-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-weak); color: var(--accent-ink);
  border-radius: 999px; padding: 2px 6px 2px 9px; font-size: 12px; white-space: nowrap;
}
.dep-chip .dep-x {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 11px; line-height: 1; padding: 0; opacity: .65;
}
.dep-chip .dep-x:hover { opacity: 1; }
.label-row .hint { font-weight: 400; color: var(--ink-3); font-size: 12px; cursor: help; }

/* ── Overlay task picker (dependency search + fork-from search) ───────────── */
.palette.picker { width: min(720px, 94vw); }
.picker .organizer { margin: 10px 12px 0; }
.picker .pk-hint { padding: 8px 16px 0; font-size: 12px; color: var(--ink-3); }
.picker #pk-list { max-height: 52vh; overflow: auto; padding: 8px 12px 12px; }
.picker #pk-list .group-h { margin: 10px 0 4px; }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.pick-row:hover, .pick-row.hi { background: var(--accent-weak); }
.pick-row .task-main { min-width: 0; flex: 1; }
.pick-row .task-title { font-size: 13px; }
.pk-caret { color: var(--ink-3); font-size: 12px; }
.pk-sessions { margin: 0 0 4px 26px; border-left: 1px solid var(--line); padding-left: 8px; }
.pk-fork { color: var(--accent); }
.pk-session .task-sub .mono { font-size: 11px; }
.pk-empty { padding: 10px; color: var(--ink-3); font-size: 13px; }

/* the chosen fork source under "Fork a previous agent" (task form / task page) */
.af-resume-toggle {
  display: flex; align-items: center; gap: 6px; width: max-content; margin-top: 7px;
  color: var(--ink-3); font-size: 12px; cursor: pointer;
}
.af-resume-toggle input { width: auto; margin: 0; }
.af-resume-panel { margin: 6px 0 0 22px; }
.af-resume-panel[hidden] { display: none !important; }
.af-resume-session { width: 100%; margin-top: 6px; padding: 7px 10px; }
.agent-field.af-has-task-fork .af-provider { opacity: .6; cursor: not-allowed; }
.af-resume-chosen { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); margin-top: 6px; }
.af-resume-chosen:empty { display: none; }
.af-resume-clear { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 11px; padding: 0 2px; }
.af-resume-clear:hover { color: var(--danger); }

.agent-group { margin-bottom: 14px; }
.agent-separate-toggle {
  display: flex; align-items: center; gap: 6px; width: max-content; margin: 0 0 8px;
  color: var(--ink-3); font-size: 11px; cursor: pointer;
}
.agent-separate-toggle input { width: auto; margin: 0; }
.agent-group [hidden] { display: none !important; }
.profiles-group [hidden] { display: none !important; }
.profiles-group .agent-separate-toggle { margin: 2px 0 10px; }
.parameter-fields .agent-field {
  padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2);
}
.parameter-fields .agent-controls {
  display: grid; grid-template-columns: minmax(105px,.65fr) minmax(170px,1.6fr) minmax(115px,.75fr); gap: 8px;
}
.parameter-fields .agent-field .agent-controls > select,
.parameter-fields .agent-field .agent-controls input,
.parameter-fields .agent-field .af-resume-session {
  width: 100%; min-width: 0; height: 40px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  outline: none; font-size: 13px;
}
.parameter-fields .agent-field .agent-controls input:focus,
.parameter-fields .agent-field .agent-controls select:focus,
.parameter-fields .agent-field .af-resume-session:focus { border-color: var(--accent); }
.parameter-fields .agent-field .af-resume { margin: 8px 2px 0 !important; }
.agent-profile-controls {
  display: grid; grid-template-columns: minmax(105px,.65fr) minmax(170px,1.6fr) minmax(115px,.75fr) 90px; gap: 8px;
}
.agent-profile-controls > select, .agent-profile-controls > input, .agent-profile-controls .combo > input {
  width: 100%; min-width: 0; height: 40px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); outline: none; font-size: 13px;
}
.agent-profile-controls input:focus, .agent-profile-controls select:focus { border-color: var(--accent); }
@media (max-width: 700px) { .parameter-fields .agent-controls { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .agent-profile-controls { grid-template-columns: 1fr; } }
.branch-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.branch-pair.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.branch-pair .form-row { min-width: 0; }
@media (max-width: 700px) { .branch-pair, .branch-pair.cols-3 { grid-template-columns: 1fr; } }

/* ── Schedule builder + 5-field cron grid (task form) ─────────────────────── */
.sched-builder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.sched-extra { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.sched-extra input[type="time"], .sched-extra input[type="number"] {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 6px; background: var(--surface); color: var(--ink);
}
.dow-row { display: inline-flex; gap: 3px; }
.dow-chip {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--ink-2); cursor: pointer; font-size: 12px; padding: 0;
}
.dow-chip.on { background: var(--accent); color: #fff; border-color: transparent; }
/* Cron field values are a few characters — compact cells, and minmax(0,1fr) +
   width:100% so the inputs' intrinsic size can't overflow a narrow container. */
.cron-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 440px; }
.cron-cell { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ink-3); }
.cron-cell input {
  width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 6px;
  background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 13px; text-align: center;
}
.cron-cell input:focus { border-color: var(--accent); outline: none; }
.cron-cell small { color: var(--ink-3); font-size: 10px; }

/* ── Repeatable series + runs (task list) ─────────────────────────────────── */
.repeat-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.repeat-toggle input { margin: 0; }
.series-row .series-caret { margin-right: 2px; color: var(--ink-3); }
.run-row { padding-left: 34px; background: var(--surface-2); }
.run-row .task-title { font-size: 13px; }
.run-row::before {
  content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 1px; background: var(--line);
}
.run-row { position: relative; }

/* ── Repeatable toggle (prominent, task-level) ───────────────────────────── */
.repeat-row { margin-top: 12px; }
.repeat-toggle { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; background: var(--surface-2); }
.repeat-toggle input { margin: 2px 0 0; }
.repeat-toggle b { color: var(--ink); }

/* ── Series row + runs (list + series page) ───────────────────────────────────── */
.series-row .series-caret { margin-right: 2px; color: var(--ink-3); background: transparent; border: 0; cursor: pointer; }
.run-row { position: relative; padding-left: 40px; background: var(--surface-2); }
.run-row .task-title { font-size: 13px; font-weight: 500; }
.run-row::before { content: ""; position: absolute; left: 22px; top: -1px; bottom: 50%; width: 10px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-bottom-left-radius: 4px; }
.series-runs { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.series-runs-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 6px; }
.run-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: var(--r-sm); cursor: pointer; }
.run-row:hover { background: var(--surface-2); }
.run-row .run-when { margin-left: auto; color: var(--ink-3); font-size: 12px; }
/* ── Image attachments (paste/drag an image into a prompt field) ── */
/* A prompt box whose pasted-image chips sit inside it (below the text), so the
   whole field grows to fit them rather than shrinking the textarea or spilling
   into a separate section. The wrapper carries the border; the textarea is bare. */
.prompt-field { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.prompt-field:focus-within { border-color: var(--accent); }
.prompt-field > textarea { border: none; background: transparent; outline: none; box-shadow: none; resize: vertical; width: 100%; padding: 9px 12px; }
.prompt-field > .img-chips { margin: 0; padding: 0 10px 9px; }
/* The prompt's clean bottom row: the "wiki context" field — no border, just a
   faint hairline separating it from the prompt text above. */
.prompt-context-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px 8px; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.prompt-context-row .pc-prefix { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); cursor: default; user-select: none; padding-top: 2px; }
.prompt-context { flex: 1; border: none; background: transparent; outline: none; box-shadow: none; resize: none; overflow: hidden; width: 100%; padding: 1px 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--accent); }
.prompt-context::placeholder { color: var(--ink-3); font-family: var(--font-sans, inherit); }
.form-row .prompt-field { background: var(--surface-2); }
.img-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.img-chip { position: relative; display: inline-flex; }
.img-chip img {
  width: 52px; height: 52px; object-fit: cover;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2);
}
.img-chip-x {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-3); font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.img-chip-x:hover { color: var(--accent); border-color: var(--accent); }
.msg-images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-images img {
  max-width: 180px; max-height: 180px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2);
}

/* ── task search & organization (views bar, query toolbar, tags) ───────────── */
/* The task-list "organizer" panel: search box + saved views + query toolbar, grouped
   into one integrated surface at the top of the list. */
.organizer {
  margin: 10px 0 2px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-2);
}
.search-box { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.search-box .search-ic { color: var(--ink-3); font-size: 15px; }
.task-search {
  flex: 1; border: 0; outline: none; background: transparent; color: var(--ink);
  font-size: 14px; font-family: var(--font-ui); padding: 4px 0;
}
.task-search::placeholder { color: var(--ink-3); }
/* The input is deliberately borderless, so keyboard focus needs its own ring. */
.task-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.search-box .search-x {
  border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 13px;
  padding: 2px 6px; border-radius: 6px;
}
.search-box .search-x:hover { background: var(--surface); color: var(--ink); }
.organizer .views-bar { margin: 6px 0 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.organizer .query-bar { margin: 6px 0 0; }

.views-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; }
.view-chip {
  font-size: 12px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  user-select: none; white-space: nowrap;
}
.view-chip { display: inline-flex; align-items: center; gap: 6px; }
.view-chip:hover { border-color: var(--line-strong); color: var(--ink); }
/* Chips are rendered tabindex="0", so they must show keyboard focus. */
.view-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.view-chip.active { background: var(--accent-weak); color: var(--accent); border-color: transparent; font-weight: 600; }
.view-chip.add { color: var(--ink-3); border-style: dashed; }
.view-chip.builtin { border-style: dotted; }
.view-chip.builtin.active { border-style: solid; }
.view-x { opacity: 0; font-size: 10px; color: var(--ink-3); cursor: pointer; margin-left: -1px; transition: opacity .1s; }
.view-chip:hover .view-x { opacity: .65; }
.view-x:hover { opacity: 1; color: var(--danger); }

.query-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 2px; }
.q-sel {
  font-size: 12px; padding: 4px 8px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  font-family: var(--font-ui); max-width: 220px;
}
.q-sel:hover { border-color: var(--line-strong); }
.q-spacer { flex: 1; }

.group-h {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 4px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3);
}
.group-h .pill { font-family: var(--font-mono); font-weight: 400; }

/* Flat groupings (status, priority, workflow, …) use the same top-level document
   heading treatment as root tag sections. Compact pickers retain `.group-h`. */
.task-group-heading {
  display: flex; align-items: baseline; gap: 9px; margin: 30px 0 8px;
  padding: 0 0 6px; border-bottom: 1px solid var(--line); color: var(--ink);
  font-size: 20px; font-weight: 650; line-height: 1.3; letter-spacing: -.015em;
}
.task-group-count { color: var(--ink-3); font-size: 11px; font-weight: 400; letter-spacing: 0; }

/* Hierarchical group:tag sections read like a Markdown document: aligned headings
   establish the hierarchy through type scale alone, followed by an ordinary intro
   paragraph and the section's tasks. */
.tag-section { scroll-margin-top: 18px; }
.tag-section-children { margin: 0; padding: 0; border: 0; }
.tag-section-heading {
  display: flex; align-items: baseline; gap: 9px; margin: 22px 0 8px; padding: 0;
  color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.3;
  letter-spacing: -.015em; outline: none;
}
.tag-depth-0 > .tag-section-heading {
  margin-top: 30px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: 20px; font-weight: 650;
}
.tag-depth-1 > .tag-section-heading { margin-top: 25px; font-size: 16px; }
.tag-depth-2 > .tag-section-heading { margin-top: 21px; font-size: 14px; }
.tag-depth-3 > .tag-section-heading,
.tag-depth-4 > .tag-section-heading,
.tag-depth-5 > .tag-section-heading { margin-top: 18px; font-size: 13px; }
.tag-section-count { color: var(--ink-3); font-size: 11px; font-weight: 400; letter-spacing: 0; }
.tag-section-edit {
  opacity: 0; padding: 0; border: 0; background: none; color: var(--ink-3);
  font: inherit; font-size: 11px; font-weight: 400; cursor: pointer;
}
.tag-section-heading:hover .tag-section-edit,
.tag-section-heading:focus-within .tag-section-edit { opacity: 1; }
.tag-section-edit:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.tag-section-description {
  max-width: 74ch; margin: -1px 0 12px; padding: 0; color: var(--ink-2);
  font-size: 13px; line-height: 1.55; white-space: pre-wrap;
}
.tag-section-target > .tag-section-heading { color: var(--accent); }

/* Tag chips + priority flag on task rows and on the task page. */
.tag-chip {
  --tag: var(--accent);
  font-size: 11px; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--tag) 35%, var(--line));
  background: color-mix(in srgb, var(--tag) 12%, transparent);
  color: color-mix(in srgb, var(--tag) 72%, var(--ink));
  font-family: inherit; line-height: inherit;
}
/* topics: rounded pills with a leading # (an area). types: squared, heavier (a label). */
.tag-chip.topic { border-radius: 999px; }
.tag-chip.topic::before { content: '#'; opacity: .5; margin-right: 1px; }
.tag-chip.type { border-radius: 5px; font-weight: 500; }
/* flags: an operational marker — squared, bold, uppercase, with a leading pennant. */
.tag-chip.flag {
  border-radius: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  border-color: color-mix(in srgb, var(--tag) 55%, var(--line));
  background: color-mix(in srgb, var(--tag) 20%, transparent);
  color: color-mix(in srgb, var(--tag) 82%, var(--ink));
}
.tag-chip.flag::before { content: '⚑'; margin-right: 3px; opacity: .85; }
.tag-link { cursor: pointer; }
.tag-link:hover { filter: brightness(1.12); border-color: color-mix(in srgb, var(--tag) 60%, var(--line)); }
.tag-assignment { display: inline-flex; align-items: stretch; --tag: var(--accent); }
.tag-assignment .tag-chip { border-radius: 999px 0 0 999px; }
.tag-assignment .tag-chip.type, .tag-assignment .tag-chip.flag { border-radius: 5px 0 0 5px; }
.tag-remove {
  margin-left: -1px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--tag) 35%, var(--line));
  border-radius: 0 999px 999px 0; background: color-mix(in srgb, var(--tag) 12%, transparent);
  color: color-mix(in srgb, var(--tag) 72%, var(--ink)); cursor: pointer; font: inherit;
}
.tag-assignment:has(.tag-chip.type) .tag-remove, .tag-assignment:has(.tag-chip.flag) .tag-remove { border-radius: 0 5px 5px 0; }
.tag-remove:hover { color: var(--danger); background: var(--danger-weak); }

.prio { font-size: 11px; font-weight: 600; padding: 0 5px; border-radius: 5px; white-space: nowrap; }
.prio.p1 { color: var(--ink-3); }
.prio.p2 { color: var(--merged); }
.prio.p3 { color: var(--working); }
.prio.p4 { color: var(--danger); background: var(--danger-weak); }

/* Organization row (priority + tags) — task page Parameters tab + task form. */
.org-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.org-editor .org-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.org-editor .org-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* On the task page the editor rides the meta line (workflow → target): no extra row,
   pushed to the right to fill the otherwise-empty horizontal space. */
.tp-head .meta .org-editor { margin: 0 0 0 auto; }

.attempts { margin-top: 10px; display: grid; gap: 5px; }
.attempts-head { display: flex; align-items: center; justify-content: space-between; color: var(--ink-3); font-size: 12px; }
.attempt-card { width: 100%; display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 12px; text-align: left; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.attempt-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface); }
.attempt-card.principal { border-style: solid; }
.attempt-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); box-shadow: inset 3px 0 var(--accent); }
.attempt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.attempt-check { width: 12px; flex: 0 0 12px; color: var(--accent); font-weight: 700; }
.attempt-stage { margin-left: auto; color: var(--ink-3); }
.attempt-current { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.stage-picker { display: inline-flex; align-items: center; }
.stage-picker select {
  width: auto; max-width: 230px; margin: 0; padding: 3px 24px 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 999px; background: var(--surface-2); color: var(--ink-2);
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.stage-picker select:hover { border-color: var(--accent); color: var(--ink); }
.stage-picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.stage-picker.compact select {
  max-width: 190px; padding-top: 2px; padding-bottom: 2px;
  border-color: transparent; background: transparent; color: var(--ink-3); font-weight: 500;
}
.stage-picker.compact select:hover { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Filter picker + tags manager modals (reuse .palette shell). */
.palette.fp { width: min(460px, 92vw); }
.palette.tagm { width: min(720px, 94vw); max-height: min(86vh, 780px); overflow: auto; }
.palette .fp-head { padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.palette.tagm .fp-head .icon-btn { margin-left: auto; }
.palette .fp-neg { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.palette #fp-list, .palette #tp-list, .palette #tagm-list { max-height: 46vh; overflow: auto; }
.fp-row { display: flex; gap: 6px; padding: 10px 16px 0; }
.palette .fp input[type="checkbox"], .palette .tagm input[type="checkbox"] { width: auto; padding: 0; border: 0; }
.palette .fp input.title-in, .palette .tagm input.title-in { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font-size: 13px; }
.palette .fp #fp-add, .palette .fp #tp-add { margin: 10px 16px 14px; }
.tp-create-meta { display: grid; gap: 8px; margin: 4px 16px 14px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.tp-create-meta[hidden] { display: none; }
.tp-create-row { display: flex; align-items: center; gap: 8px; }
.tp-create-row input[type="color"] { width: 32px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
.tp-create-row label { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 11px; }
.tp-create-meta textarea { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; background: var(--surface); color: var(--ink); font: inherit; }
.tagm-row { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.tagm-row.active { background: var(--accent-weak); }
.tagm-summary { min-width: 0; display: grid; gap: 2px; }
.tagm-description { max-width: 36ch; overflow: hidden; color: var(--ink-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tagm-form { display: grid; grid-template-columns: minmax(180px, 1.6fr) minmax(120px, .7fr) minmax(150px, .8fr); gap: 10px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tagm-form.tagm-edit { background: var(--accent-weak); }
.tagm-form-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tagm-form-head > div { display: flex; align-items: baseline; gap: 8px; }
.tagm-form label { display: grid; align-content: start; gap: 5px; color: var(--ink-3); font-size: 11px; font-weight: 600; }
.tagm-form input.title-in, .tagm-form select.q-sel, .tagm-form textarea { width: 100%; max-width: none; box-sizing: border-box; }
.tagm-form input.title-in, .tagm-form textarea { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: var(--surface); color: var(--ink); font: inherit; }
.tagm-form textarea { resize: vertical; line-height: 1.4; }
.tagm-form .tagm-description-field { grid-column: 1 / -1; }
.tagm-color-field { grid-template-columns: auto auto 1fr !important; align-items: center; }
.tagm-color-field input[type="color"] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
.tagm-color-field span { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; white-space: nowrap; }
.tagm-color-field span input { width: auto; }
.tagm-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.tagm-hint { padding: 0 16px 14px; font-size: 11px; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 620px) {
  .tagm-form { grid-template-columns: 1fr; }
  .tagm-form-head, .tagm-form .tagm-description-field, .tagm-actions { grid-column: 1; }
  .tagm-row { flex-wrap: wrap; }
  .tagm-summary { flex: 1; }
}

/* ── dashboard processes (task manager) ── */
.proc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.proc-table th, .proc-table td { text-align: left; padding: 5px 12px; border-bottom: 1px solid var(--line); }
.proc-table th { color: var(--ink-3); font-weight: 600; }
.proc-table th.num, .proc-table td.num { text-align: right; white-space: nowrap; }
.proc-table td.cmd { max-width: 0; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-table tr.proc-group td { background: var(--surface-2); font-weight: 600; }
.proc-table tr.proc-group td.cmd { font-family: var(--font-ui); }
.proc-table .proc-age { color: var(--ink-3); font-weight: 400; }
.proc-table .proc-kill { padding: 0 7px; line-height: 18px; }
.proc-table .proc-task { cursor: pointer; }
.proc-table .proc-task:hover { color: var(--accent); border-color: var(--accent); }
.proc-table .proc-lock { opacity: .55; cursor: help; font-size: 11px; }
.proc-table .proc-kill { white-space: nowrap; }

/* ── wiki (org/project skills, memories, prompts) ─────────────────────────── */
.wiki-nav { max-height: calc(100vh - 140px); overflow-y: auto; }
.wiki-nav .wiki-sec { color: var(--ink-3); font-size: 11px; font-weight: 650; letter-spacing: .04em; padding: 7px 10px 2px; }
.wiki-nav a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-page .settings-section-title .chip { vertical-align: 3px; margin-left: 6px; }
.wiki-view-picker { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 11.5px; }
.wiki-view-picker input {
  width: min(330px, 36vw); padding: 7px 30px 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit;
}
.wiki-view-picker input:focus { outline: 2px solid var(--accent-weak); border-color: var(--accent); }
.wiki-md { font-size: 13px; line-height: 1.55; }
.wiki-uncond .wiki-uncond-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.wiki-uncond .wiki-uncond-head b { font-size: 14px; letter-spacing: -.01em; }

/* The path-as-title control: parent sections shrink, the stem is the title. */
.wiki-title-row { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.wiki-path-edit { flex: 1; min-width: 0; font-family: var(--font-mono); caret-color: var(--accent); outline: none; padding: 4px 0; border-bottom: 1px solid transparent; white-space: nowrap; overflow-x: auto; }
.wiki-path-edit:focus { border-bottom-color: var(--accent); }
.wiki-path-edit .wiki-path-prefix { font-size: 14px; color: var(--ink-3); letter-spacing: 0; }
.wiki-path-edit .wiki-path-stem { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.wiki-path-edit .wiki-path-stem:empty::before { content: 'path/to-entry'; color: var(--ink-3); font-weight: 400; }
.wiki-warn { color: var(--working, #b58900); font-size: 12px; margin: 2px 0 8px; }

.wiki-editor .wiki-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 12px; }
.wiki-editor .wiki-fields label { display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.wiki-editor .wiki-fields input, .wiki-editor .wiki-fields select { padding: 7px 9px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 7px; font-size: 13px; color: var(--ink); font-weight: 400; }
.wiki-editor .wiki-body-bar { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.wiki-editor .wiki-body-tab { border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 12.5px; padding: 6px 10px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.wiki-editor .wiki-body-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.wiki-editor textarea { width: 100%; resize: vertical; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 7px; color: var(--ink); }
.wiki-editor .wiki-preview { min-height: 120px; padding: 4px 2px; }
@media (max-width: 850px) { .wiki-editor .wiki-fields { grid-template-columns: 1fr; } }

/* @-mention dropdown: tag wiki pages/labels/folders into a task prompt. */
.wiki-mention-menu {
  position: fixed; z-index: 90; width: min(360px, 90vw); max-height: 264px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(20, 24, 34, .18); padding: 5px; font-size: 13px;
}
.wiki-mention-menu .wm-opt {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; cursor: pointer;
}
.wiki-mention-menu .wm-opt.active { background: var(--accent-weak); }
.wiki-mention-menu .wm-glyph { flex: none; width: 16px; text-align: center; opacity: .85; }
.wiki-mention-menu .wm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wiki-mention-menu .wm-ref { font-family: var(--font-mono); font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiki-mention-menu .wm-desc { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiki-mention-menu .wm-scope { flex: none; color: var(--ink-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.wiki-mention-menu .wm-empty { padding: 9px 10px; color: var(--ink-3); }

/* Credential import modal + inline info dots (Passwords settings) */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 60; }
.modal-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.vault-grant-modal { width: min(720px, 92vw); }
.vault-grant-modal > .section-h { margin-bottom: 4px; }
.vault-grant-help { margin: 0 0 12px; color: var(--ink-2); font-size: 12px; }
.vault-search {
  width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2);
  color: var(--ink); font: inherit;
}
.vault-search:focus { outline: 2px solid var(--accent-weak); border-color: var(--accent); }
.vault-grant-box { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.vault-grant-head {
  display: flex; gap: 8px; align-items: center; padding: 9px 11px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer;
}
.vault-grant-selected { color: var(--ink-3); font-weight: 400; }
.vault-grant-tree { max-height: 44vh; overflow-y: auto; padding: 8px 10px; }
.vault-grant-item { display: flex; gap: 12px; align-items: center; padding: 7px 5px; }
.vault-grant-item[hidden], .vault-manager-item[hidden], .vault-grant-empty[hidden] { display: none !important; }
.vault-grant-item:hover { background: var(--surface-2); border-radius: 6px; }
.vault-grant-choice { display: flex; flex: 1; min-width: 180px; gap: 8px; align-items: flex-start; cursor: pointer; }
.vault-grant-choice > input { margin-top: 2px; }
.vault-grant-item-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.vault-grant-meta { color: var(--ink-3); font-size: 11px; overflow-wrap: anywhere; }
.vault-grant-policies { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vault-grant-policies label, .vault-manager-item > label {
  display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 11px; white-space: nowrap;
}
.vault-grant-policies select, .vault-manager-item select { max-width: 120px; font-size: 11px; }
.vault-grant-empty { display: block; padding: 18px 4px; color: var(--ink-3); font-size: 12px; text-align: center; }
.vault-grant-actions { display: flex; gap: 8px; justify-content: flex-end; }
.vault-manage-button {
  width: 100%; justify-content: space-between; margin-bottom: 14px; padding: 10px 12px;
}
.vault-manage-count { color: var(--ink-3); font-size: 11px; font-weight: 500; }
.vault-manager-modal { width: min(900px, 94vw); max-height: min(720px, 88vh); display: flex; flex-direction: column; }
.vault-manager-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vault-manager-list { min-height: 90px; max-height: 62vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.vault-manager-item { margin: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 10px; flex-wrap: wrap; }
.vault-manager-item:last-of-type { border-bottom: 0; }
@media (max-width: 650px) {
  .vault-grant-item { align-items: stretch; flex-direction: column; }
  .vault-grant-policies { padding-left: 25px; justify-content: flex-start; }
}
/* A real <button> so it is keyboard-reachable and announced; `border: 0`/`padding: 0`
   strip the native chrome that would otherwise show through the 15px dot. */
.info-dot { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: 10px; font-family: inherit; line-height: 1; cursor: pointer; user-select: none; }
.info-dot:hover { color: var(--accent); }
.vault-custom summary { color: var(--ink-2); font-size: 13px; }
.vault-custom summary:hover { color: var(--ink); }

/* Live-socket gap. The console is websocket-driven, so when the socket is down
   the page is frozen rather than empty — say so instead of showing stale state
   as if it were current. Reuses the "waiting" tone, not an error tone: nothing
   has failed, updates are just paused. */
.ws-offline {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; margin-right: 8px;
  background: var(--working-weak); color: var(--working);
}
@media (max-width: 640px) { .ws-offline { font-size: 0; padding: 5px; }
  .ws-offline::before { content: "⟳"; font-size: 12px; } }