/* 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 request starts here on the same frame as its click/change. The two-pixel
   trace is intentionally console-like: one clear latency signal shared by every
   surface, with the initiating control carrying the local spinner as well. */
.action-progress {
  position: fixed; inset: 0 0 auto; z-index: 99; height: 2px; overflow: hidden;
  pointer-events: none; background: color-mix(in srgb, var(--accent) 18%, transparent);
  transition: opacity .18s ease;
}
.action-progress[hidden] { display: none; }
.action-progress > span {
  display: block; width: 38%; height: 100%; background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 65%, transparent);
  animation: action-trace 1s cubic-bezier(.45, 0, .2, 1) infinite;
}
.action-progress[data-outcome="success"] > span { width: 100%; animation: none; background: var(--merged, var(--accent)); }
.action-progress[data-outcome="error"] > span { width: 100%; animation: none; background: var(--danger); }
@keyframes action-trace { from { transform: translateX(-115%); } to { transform: translateX(300%); } }

.action-pending { cursor: progress !important; }
button.action-pending, [role="button"].action-pending, a.action-pending {
  position: relative; opacity: .72;
}
.btn.action-pending:disabled { opacity: .72; }
button.action-pending::after, [role="button"].action-pending::after, a.action-pending::after {
  content: ''; flex: 0 0 auto; width: .72em; height: .72em; border-radius: 50%;
  border: 1.5px solid currentColor; border-right-color: transparent;
  animation: action-spin .65s linear infinite;
}
.icon-btn.action-pending::after, .msg-copy.action-pending::after {
  position: absolute; inset: 0; margin: auto; background: var(--surface);
}
.action-succeeded { animation: action-ok .55s ease; }
.action-failed { animation: action-error .45s ease; }
@keyframes action-spin { to { transform: rotate(360deg); } }
@keyframes action-ok { 45% { box-shadow: 0 0 0 2px var(--merged, var(--accent)); } }
@keyframes action-error { 40% { box-shadow: 0 0 0 2px var(--danger); } }
a { color: var(--accent); text-decoration: none; }
.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }

/* ── layout shell ───────────────────────────────────────────── */
#app { display: flex; flex-direction: column; 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); }
.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 { flex: 1; min-height: 0; 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; }
/* The section heading carries its own "+": creating a project belongs to the
   heading of the list it lands in, not to a pseudo-row at the list's end. */
.rail .rail-heading { display: flex; align-items: center; justify-content: space-between; padding-right: 4px; }
.rail .rail-add {
  display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 5px;
  background: transparent; color: var(--ink-3); cursor: pointer; transition: color .12s, background .12s;
}
.rail .rail-add:hover, .rail .rail-add:focus-visible { background: var(--surface-2); color: var(--accent); outline: none; }
.rail .proj {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px 7px calc(10px + 14px * var(--depth, 0));
  border-radius: 7px; cursor: pointer; color: var(--ink-2);
  /* Tree guides: one hairline per ancestor folder, under that folder's chevron
     (x = 15px, then every 14px of indent). Only the indent band is painted, so
     a top-level row draws nothing. */
  background-image: repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px 14px);
  background-size: calc(14px * var(--depth, 0)) 100%; background-position: 15px 0; background-repeat: no-repeat;
}
.rail .project-link, .rail .folder-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.rail .project-link { text-decoration: none; }
.rail .rail-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .proj:hover { background-color: var(--surface-2); color: var(--ink); }
.rail .proj.active { background-color: var(--accent-weak); color: var(--ink); font-weight: 600; }
.rail .glyph { flex: none; display: grid; place-items: center; width: 16px; height: 16px; }
.rail .proj .glyph { color: var(--accent); }
/* Folder rows group the projects beneath them. Nesting depth is the --depth
   custom property, not DOM structure — the rail stays a flat drag list.
   A folder is a heading, not an item: its name is set small, uppercase and
   muted like the rail's section labels (never bold — bold is the selected
   project's cue), and the chevron is the fold control: ">" shut, "v" open. */
.rail .proj.folder .rail-name { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.rail .proj.folder:hover .rail-name { color: var(--ink); }
.rail .proj.folder .glyph.chevron { width: 14px; margin-left: -2px; color: var(--ink-3); transition: transform .12s; }
.rail .proj.folder.open .glyph.chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .rail .proj.folder .glyph.chevron { transition: none; } }
.rail .rail-edit-action, .rail .rail-edit-confirm, .rail .rail-edit-cancel {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 5px;
  background: transparent; color: var(--ink-3); font: 600 14px/1 var(--font-ui); cursor: pointer;
}
.rail .rail-edit-action { margin: -3px -4px -3px auto; opacity: 0; transition: opacity .12s, color .12s, background .12s; }
/* A folder row has two actions ("+" then rename); only the first pushes right. */
.rail .rail-edit-action:has(+ .rail-edit-action) { margin-right: 0; }
.rail .rail-edit-action + .rail-edit-action { margin-left: 0; }
.rail .proj:hover .rail-edit-action, .rail .proj:focus-within .rail-edit-action { opacity: 1; }
.rail .rail-edit-action:hover, .rail .rail-edit-action:focus-visible,
.rail .rail-edit-confirm:hover, .rail .rail-edit-confirm:focus-visible,
.rail .rail-edit-cancel:hover, .rail .rail-edit-cancel:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.rail .proj.editing { align-items: flex-start; padding-top: 5px; padding-bottom: 5px; cursor: default; }
.rail .rail-inline-edit { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.rail .rail-edit-input {
  flex: 1; min-width: 0; height: 28px; padding: 4px 6px; border: 1px solid var(--accent); border-radius: 5px;
  background: var(--paper); color: var(--ink); font: 12px/1.2 var(--font-ui); outline: 2px solid var(--accent-weak);
}
.rail .rail-edit-input[aria-invalid="true"] { border-color: var(--danger); outline-color: var(--danger-weak); }
.rail .rail-edit-confirm { color: var(--accent); }
.rail .rail-edit-error { flex-basis: 100%; padding: 2px 0 1px; color: var(--danger); font-size: 10px; line-height: 1.25; }
.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 .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:has(> .project-link:focus), .rail .proj:has(> .folder-toggle:focus), .rail .rail-add:focus, .rail .nav-item:focus { outline: 2px solid var(--accent); outline-offset: -2px; background-color: var(--surface-2); }

/* ── main ───────────────────────────────────────────────────── */
.main { overflow-y: auto; padding: 0; }
.main-inner { max-width: 960px; margin: 0 auto; padding: 22px 28px 80px; }
.route-loading { min-height: 55vh; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--ink-3); }
.route-loading > b { color: var(--ink); font-size: 15px; }
.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); }
.tabs-spacer { flex: 1 1 12px; min-width: 12px; }
.tabs-action { flex: none; align-self: center; margin: 0 4px 0 0; }

.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.busy { opacity: .68; cursor: progress; }
.quick-task-field {
  display: flex; align-items: center; flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow);
}
.quick-task-field:focus-within { border-color: var(--accent); }
.composer input.title-in {
  flex: 1; min-width: 0; padding: 11px 14px; border: 0;
  background: transparent; outline: none; box-shadow: none;
}
.composer .btn.icon-only { width: 42px; padding-left: 0; padding-right: 0; justify-content: center; flex: none; }
.composer .attach-composer { cursor: pointer; }
.composer .quick-task-attach { width: 34px; height: 34px; margin-right: 4px; }
.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; }
/* The flex row above is for a strip of metadata (a div of chips). A <p> is prose:
   as a flex container every inline <a>/<span> in the sentence became its own item,
   gapped and wrapped away from the words around it. Prose flows as prose. */
p.task-sub { display: block; line-height: 1.55; }
p.task-sub > .mono, p.task-sub > code { word-break: break-word; }
.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; gap:12px; margin-bottom:12px; color:var(--ink-2); }
.inbox-controls { display:flex; align-items:center; gap:14px; }
.inbox-controls .switch { gap:7px; font-size:13px; }
.inbox-controls .switch input { width:30px; height:18px; }
/* The kind sub-tabs sit under the page title, so they are not the sticky bar. */
.inbox-tabs { position:static; }
.inbox-row { display:grid; grid-template-columns:auto minmax(0,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); }
.inbox-row.priority-high { border-left:4px solid var(--working); }
.inbox-row.priority-critical { border-left:4px solid var(--danger); }
.inbox-row.priority-critical.unread { background:color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.inbox-row b { overflow-wrap:anywhere; }
.priority-bars { letter-spacing:1px; }
.inbox-row .urgency-chip { white-space:nowrap; }
.inbox-row.priority-low .inbox-kind { color:var(--ink-3); }
/* Priority uses labels, bars and an edge accent, so color is never the only cue. */
.urgency-chip {
  display:inline-block; padding:1px 7px; border-radius:999px;
  font-family:var(--font-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  background:var(--working-weak); color:var(--working); vertical-align:middle;
}
.urgency-chip.critical { background:var(--danger-weak); color:var(--danger); }
.urgency-chip.normal, .urgency-chip.low { background:var(--surface-2); color:var(--ink-3); }
/* Trailing the task title in a list; leading its own row in the settings table,
   where a grid item would otherwise stretch to the full column instead of
   hugging the word. */
.inbox-row .urgency-chip { margin-left:8px; }
.notify-row .urgency-chip { justify-self:start; }
/* Per-urgency behaviour: one row per level, one column per behaviour. */
.notify-grid { display:grid; gap:2px; margin:6px 0 12px; }
.notify-row { display:grid; grid-template-columns:110px repeat(2,minmax(0,1fr)) auto; gap:12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); }
.notify-row:last-child { border-bottom:0; }
.notify-head { color:var(--ink-3); font-size:11px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--line); }
.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; }
.new-repository-dialog { width:min(470px,calc(100vw - 28px)); }
.new-repository-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-4px 0 18px; }
.new-repository-head b { font-size:16px; letter-spacing:-.01em; }
.new-repository-dialog .form-row > span { color:var(--ink-2); font-size:12px; font-weight:600; }
.new-repository-identity { display:grid; grid-template-columns:minmax(0,.85fr) auto minmax(0,1.15fr); gap:8px; align-items:end; margin-bottom:14px; }
.new-repository-identity .form-row { min-width:0; margin:0; }
.new-repository-identity select, .new-repository-identity input { width:100%; box-sizing:border-box; }
.new-repository-slash { padding-bottom:10px; color:var(--ink-3); font:600 14px var(--font-mono); }
.new-repository-private { width:max-content; margin:2px 0 18px; font-size:13px; }
.new-repository-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.new-project-dialog { width:min(460px,calc(100vw - 28px)); }
.new-project-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:-4px 0 18px; }
.new-project-head > div { display:grid; gap:4px; }
.new-project-head b { font-size:16px; letter-spacing:-.01em; }
.new-project-head span, .new-project-preview { color:var(--ink-3); font-size:12px; line-height:1.45; }
.new-project-dialog .form-row > span { color:var(--ink-2); font-size:12px; font-weight:600; }
.new-project-dialog .form-row input { width:100%; box-sizing:border-box; }
.new-project-preview { margin:8px 0 2px; }
.new-project-error { margin-top:10px; color:var(--danger); font-size:12px; }
.new-project-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.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; } .new-repository-identity { grid-template-columns:1fr; } .new-repository-slash { display:none; } }
@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.soft { border-color: transparent; background: var(--surface-2); color: var(--ink-2); }
.btn.soft:hover { border-color: transparent; background: var(--accent-weak); color: var(--accent); }
.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), .main:has(.task-file-page) { overflow: hidden; }
.main-inner:has(> .task-page), .main-inner:has(> .task-file-page) { max-width: none; padding: 0; height: 100%; }
.task-page { display: flex; flex-direction: column; height: 100%; }

/* Agent citations cross a real boundary: provider world → Git handoff → the
   developer's editor. The rail encodes that transfer; everything else stays
   deliberately quiet so this page feels like a utility, not a second product. */
.task-file-page { min-height: 100%; overflow: auto; background: var(--surface); }
.fh-head { padding: clamp(30px, 7vw, 76px) clamp(24px, 8vw, 104px) 30px; border-bottom: 1px solid var(--line); }
.fh-back { display: inline-flex; margin-bottom: 42px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.fh-back:hover { color: var(--accent); }
.fh-kicker { display: block; margin-bottom: 10px; color: var(--accent); font: 600 11px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.fh-head h1 { margin: 0; max-width: 900px; font-size: clamp(32px, 6vw, 68px); line-height: .98; letter-spacing: -.055em; overflow-wrap: anywhere; }
.fh-head p { margin: 18px 0 0; max-width: 900px; color: var(--ink-2); font: 12px/1.6 var(--font-mono); overflow-wrap: anywhere; }
.fh-head p span { color: var(--accent); }
.fh-body { width: min(920px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 70px; }
.fh-rail { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto; align-items: start; margin-bottom: 30px; }
.fh-rail > div { display: grid; justify-items: center; gap: 7px; color: var(--ink-3); font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.fh-rail i { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); font-style: normal; }
.fh-rail b { height: 1px; margin-top: 13px; background: var(--line-strong); }
.fh-rail .done, .fh-rail .current { color: var(--ink); }
.fh-rail .done i { border-color: var(--merged); background: var(--merged); color: #fff; }
.fh-rail .done + b { background: var(--merged); }
.fh-rail .current i { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-weak); }
.fh-panel { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); box-shadow: var(--shadow); overflow: hidden; }
.fh-status { display: flex; gap: 14px; align-items: flex-start; padding: 22px; }
.fh-status > div { display: grid; gap: 4px; }
.fh-status span:not(.fh-pulse):not(.fh-mark) { color: var(--ink-2); font-size: 12px; }
.fh-status .btn { justify-self: start; margin-top: 8px; }
.fh-status.error { background: var(--danger-weak); }
.fh-pulse, .fh-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-weak); color: var(--accent); font: 700 12px/1 var(--font-mono); }
.fh-pulse::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.fh-status.ready .fh-mark { background: var(--merged-weak); color: var(--merged); }
.fh-status.error .fh-mark { background: var(--danger); color: white; }
.fh-command { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 18px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.fh-command > div:first-child { min-width: 0; display: grid; gap: 4px; }
.fh-command span { color: var(--ink-3); font: 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.fh-command code { font: 12px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.fh-actions { display: flex; flex: none; gap: 8px; }
.fh-copy { display: inline-flex; align-items: center; gap: 6px; }
.fh-script { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; max-height: 300px; }
.fh-footnote { margin: 15px 4px 0; color: var(--ink-3); font-size: 11px; }
@media (prefers-reduced-motion: no-preference) {
  .fh-pulse { animation: fh-breathe 1.4s ease-in-out infinite; }
  @keyframes fh-breathe { 50% { box-shadow: 0 0 0 7px var(--accent-weak); } }
}
@media (max-width: 640px) {
  .fh-head { padding: 24px 20px; }
  .fh-back { margin-bottom: 30px; }
  .fh-body { width: calc(100% - 28px); padding-top: 30px; }
  .fh-rail > div span { font-size: 8px; }
  .fh-command { align-items: stretch; flex-direction: column; }
  .fh-actions { flex-wrap: wrap; }
}
/* 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-loading { flex: 1; display: grid; place-items: center; color: var(--ink-3); }
.tf-loading.modal-loading { min-height: 180px; }
.task-load-error { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 420px; text-align: center; }
.task-load-error > span { color: var(--ink-3); }
.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,
.tf-main .prompt-field > .wiki-ref-editor > 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; }

/* A native session handoff is a small bundle: identity, exact bytes, then the
   command that consumes them. Keep each role together when a task has several
   agent conversations so the wrong JSONL cannot be paired with a command. */
.local-agent-forks { display: grid; gap: 10px; }
.local-agent-fork { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.local-agent-fork-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.local-agent-fork-head > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.local-agent-fork .raw { margin: 0 0 8px; background: var(--surface); }
@media (max-width: 560px) {
  .local-agent-fork-head { align-items: stretch; flex-direction: column; }
  .local-agent-fork-head .btn { text-align: center; }
}

.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); }

/* Forks belong to conversations rather than the workflow's parent/sub-task
   control flow. Their nested list keeps that distinction visible while using
   the same task-state language and full-row navigation as delegated work. */
.agent-forks {
  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);
}
.agent-forks-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 20px 10px; }
.agent-forks-kicker { margin-bottom: 2px; color: var(--ink-3); font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.agent-forks h3 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.015em; }
.agent-forks-count { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.fork-tree { list-style: none; margin: 0; padding: 0 8px 8px; }
.fork-tree .fork-tree { margin: 0 0 0 28px; padding: 0 0 0 14px; border-left: 1px solid var(--line); }
.fork-tree-item { margin: 0; padding: 0; }
.fork-row {
  appearance: none; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 13px; min-height: 54px; padding: 8px 12px;
  border: 0; border-top: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer;
  transition: background .12s, transform .04s;
}
.fork-tree > .fork-tree-item:first-child > .fork-row { border-top-color: transparent; }
.fork-row:hover { background: var(--surface-2); }
.fork-row:active { transform: translateY(1px); }
.fork-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fork-identity { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fork-title { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.fork-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.fork-title .task-num { flex: none; font-size: 11px; }
.fork-state { color: var(--ink-3); font-size: 11px; }
.fork-arrow { color: var(--ink-3); font-size: 20px; line-height: 1; transition: transform .12s, color .12s; }
.fork-row:hover .fork-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.explanation { align-self: flex-start; margin: -5px 0 2px 18px; background: color-mix(in srgb, var(--accent-weak) 55%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-top-left-radius: 3px; }
.msg.explanation .role { color: var(--accent); opacity: 1; }
.explanation-model { color: var(--ink-3); font: 10px/1.2 var(--font-mono); }
.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; }
.explain-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: 8px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.explain-run, .explain-more { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font: italic 11px/1.3 var(--font-ui); padding: 2px 3px; }
.explain-run:hover, .explain-more:hover { color: var(--accent); }
.explain-run:disabled, .explain-more:disabled { cursor: wait; opacity: .65; }
.explain-more { display: inline-flex; align-items: center; font-style: normal; }
.explain-more svg { width: 16px; height: 16px; }
.explain-error { flex-basis: 100%; color: var(--danger); font: normal 11px/1.45 var(--font-ui); padding: 5px 3px 0; }
.explain-error a { color: inherit; text-decoration: underline; }
.explanation-form { width: min(580px, calc(100vw - 28px)); }
.explanation-form textarea, .explanation-settings textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.explanation-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* 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; }

/* Hosted personal-workspace onboarding. Progress comes from the gateway; this
   floating surface only guides the user to the existing first-party controls. */
.hosted-onboarding { position: fixed; z-index: 60; right: 22px; bottom: 20px; width: min(390px, calc(100vw - 28px)); }
.onboarding-card {
  max-height: min(720px, calc(100vh - 82px)); overflow-y: auto;
  border: 1px solid var(--line-strong); border-radius: 14px; padding: 18px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
  box-shadow: 0 18px 50px rgba(16, 24, 40, .18), 0 2px 8px rgba(16, 24, 40, .08);
}
.onboarding-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.onboarding-head h2 { margin: 2px 0 0; color: var(--ink); font-size: 19px; line-height: 1.2; letter-spacing: -.015em; }
.onboarding-eyebrow { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.onboarding-dismiss { flex: none; margin: -7px -7px 0 0; font-size: 20px; }
.onboarding-progress { height: 4px; overflow: hidden; margin: 14px 0 0; border-radius: 999px; background: var(--line); }
.onboarding-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; }
.onboarding-intro { margin: 11px 0 14px; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.onboarding-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.onboarding-step { position: relative; display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 10px; padding: 8px 0 11px; }
.onboarding-step:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: 35px; bottom: -1px; width: 1px; background: var(--line); }
.onboarding-check {
  position: relative; z-index: 1; display: grid; place-items: center; width: 27px; height: 27px;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface);
  color: var(--ink-3); font: 650 11px var(--font-mono);
}
.onboarding-step.complete .onboarding-check { border-color: transparent; background: var(--merged-weak); color: var(--merged); font-family: var(--font-ui); font-size: 13px; }
.onboarding-step-copy { min-width: 0; }
.onboarding-step-title { display: flex; align-items: center; gap: 8px; min-height: 27px; color: var(--ink); font-size: 13px; font-weight: 680; }
.onboarding-step.complete .onboarding-step-title { color: var(--ink-2); }
.onboarding-step-copy p { margin: 0 0 8px; color: var(--ink-3); font-size: 11px; line-height: 1.45; }
.onboarding-optional { padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-3); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.onboarding-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.onboarding-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 5px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 10px; }
.onboarding-minimized {
  display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 9px 13px 9px 9px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink);
  box-shadow: 0 8px 28px rgba(16, 24, 40, .16); cursor: pointer; text-align: left;
}
.onboarding-minimized:hover { border-color: var(--accent); transform: translateY(-1px); }
.onboarding-minimized-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-weak); color: var(--accent); font-weight: 800; }
.onboarding-minimized > span:last-child { display: grid; gap: 1px; }
.onboarding-minimized b { font-size: 12px; }
.onboarding-minimized small { color: var(--ink-3); font-size: 10px; }
@media (max-width: 760px) {
  .hosted-onboarding { right: 14px; bottom: 14px; }
  .onboarding-card { max-height: calc(100vh - 80px); padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-progress > span, .onboarding-minimized { transition: none; }
}
.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; }
.policy-acceptance { display:flex; align-items:flex-start; gap:9px; margin:12px 0 14px; color:var(--ink-2); font-size:12px; line-height:1.45; }
.policy-acceptance input { margin-top:3px; flex:none; }
.policy-acceptance a, .price-policy a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.policy-acceptance .mono { font-size:10px; color:var(--ink-3); }
.billing-price { font-size:20px; font-weight:700; margin:6px 0; }

/* profile page */
.profile-page { max-width: 620px; }
.data-export-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:center; }
.data-export-mark { width:42px; height:50px; border:1px solid var(--line-strong); border-radius:5px 10px 5px 5px; display:grid; place-items:center; position:relative; color:var(--ink-2); background:var(--surface-2); }
.data-export-mark span { font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-1px; }
.data-export-mark i { position:absolute; right:-1px; top:-1px; width:12px; height:12px; border-left:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); background:var(--surface); border-radius:0 8px 0 3px; }
.data-export-copy .task-sub { margin:4px 0; line-height:1.45; }
.data-export-note { margin:0; color:var(--ink-3); font-size:11px; line-height:1.4; }
@media (max-width: 620px) { .data-export-card { grid-template-columns:44px 1fr; } .data-export-card > .btn { grid-column:1 / -1; width:100%; } }
.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; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 45px; padding: 8px 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; }
.profile-row-control { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 0; }
.profile-row-control .chip { white-space: nowrap; }
.profile-edit-toggle { margin-left: 3px; }
.profile-password-mask { color: var(--ink-2); font-family: var(--font-mono); letter-spacing: .08em; }
.profile-edit-panel {
  margin: 0 -4px 8px; padding: 18px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2);
}
.profile-edit-panel[hidden] { display: none; }
.profile-edit-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.profile-edit-heading .section-h { margin: 0 0 3px; }
.profile-edit-heading .task-sub { margin: 0; }
.profile-edit-panel .form-row { margin-bottom: 0; }
.profile-edit-help { color: var(--ink-3); font-size: 11px; line-height: 1.5; margin: 10px 0 0; }
.profile-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.profile-password-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.profile-password-fields .form-row:first-child { grid-column: 1 / -1; }
.profile-password-error { min-height: 17px; margin: 8px 0 -4px; color: var(--danger); font-size: 12px; }
.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);
}
.profile-org:hover { border-color: var(--accent); background: var(--accent-weak); }
.profile-org-link {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  color: inherit; text-decoration: none;
}
.profile-org-mark { color: var(--ink-3); }
.profile-org-name { font-weight: 600; flex: 1; }
.github-mark { width: 16px; height: 16px; flex: none; }
.github-account-list { display: grid; gap: 8px; margin-bottom: 10px; }
.github-account-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.github-account-label, .github-account-actions, .github-org-actions { display: flex; align-items: center; gap: 8px; }
.github-account-actions { justify-content: flex-end; flex-wrap: wrap; }
.github-account-row .icon-btn svg { width: 15px; height: 15px; }
.github-org-actions { flex-wrap: wrap; }
.git-identity-dialog { width: min(480px, calc(100vw - 28px)); }
.git-identity-dialog textarea { width: 100%; resize: vertical; }
@media (max-width: 560px) {
  .profile-row-action { align-items: flex-start; }
  .profile-row-control { flex-wrap: wrap; }
  .profile-row-value { max-width: 100%; }
  .profile-password-fields { grid-template-columns: 1fr; }
  .profile-password-fields .form-row:first-child { grid-column: auto; }
  .github-account-row { align-items: flex-start; flex-direction: column; }
  .github-account-actions { justify-content: flex-start; }
}

/* 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-kind svg { vertical-align: -3px; }
.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; }

/* ── public landing ─────────────────────────────────────────────────────────
   A task list is the product and the visual system: ruled rows, status marks,
   one blue action colour. The serif italic is reserved for the change in idea
   (editor → list, manual work → managed outcomes), never used as decoration. */
body.landing-active {
  color-scheme: light;
  background: #f4f7fb;
  color: #10172a;
  overflow: auto;
}
.landing-active #app { display: block; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
.landing-page {
  --land-ink: #10172a;
  --land-muted: #647086;
  --land-blue: #315ee7;
  --land-blue-dark: #1d43bd;
  --land-ice: #e9efff;
  --land-cloud: #f4f7fb;
  --land-white: #ffffff;
  --land-line: #dfe5ef;
  --land-green: #20866d;
  min-height: 100vh;
  background: var(--land-cloud);
  color: var(--land-ink);
  font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
}
.landing-page *, .landing-page *::before, .landing-page *::after { box-sizing: border-box; }
.landing-page button, .landing-page a { font: inherit; }
.landing-page button { cursor: pointer; }
.landing-page a { color: inherit; }
.landing-skip {
  position: fixed; top: 8px; left: 8px; z-index: 98;
  padding: 9px 13px; border-radius: 7px; background: var(--land-ink); color: #fff !important;
  transform: translateY(-150%); transition: transform .15s ease;
}
.landing-skip:focus { transform: translateY(0); }
.landing-nav {
  width: min(1180px, calc(100% - 48px)); height: 78px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--land-line);
}
.landing-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 730; letter-spacing: -.03em; }
.landing-brand .mark { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 3px 10px rgba(16, 23, 42, .15); }
.landing-brand span { font-size: 18px; }
.landing-nav-actions { display: flex; align-items: center; gap: 9px; }
.landing-text-link { margin-right: 8px; color: var(--land-muted) !important; font-size: 14px !important; }
.landing-text-link:hover, .landing-footer a:hover { color: var(--land-blue) !important; }
.landing-sign-in, .landing-start {
  min-height: 39px; border: 1px solid var(--land-line); border-radius: 8px; padding: 0 15px;
  background: var(--land-white); color: var(--land-ink); font-size: 14px; font-weight: 650;
  box-shadow: 0 1px 1px rgba(16, 23, 42, .03); transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.landing-sign-in:hover { border-color: #aeb9ca; transform: translateY(-1px); }
.landing-start { border-color: var(--land-blue); background: var(--land-blue); color: #fff; }
.landing-start:hover { border-color: var(--land-blue-dark); background: var(--land-blue-dark); transform: translateY(-1px); }
.landing-page :is(button, a):focus-visible { outline: 3px solid rgba(49, 94, 231, .32); outline-offset: 3px; }

.landing-hero {
  width: min(1180px, calc(100% - 48px)); margin: 0 auto;
  min-height: 720px; padding: 82px 0 84px;
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(570px, 1.22fr); align-items: center; gap: 52px;
}
.landing-analogy { margin: 0; display: grid; gap: 14px; font-size: clamp(22px, 2.15vw, 31px); line-height: 1.08; letter-spacing: -.04em; font-weight: 450; }
.landing-analogy > span { display: block; color: #637086; white-space: nowrap; }
.landing-analogy > span > strong { margin-right: 12px; color: var(--land-ink); font: 700 .9em ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: -.05em; }
.landing-analogy > span > span { display: inline; }
.landing-analogy b { color: var(--land-blue); font-weight: 730; }
.landing-page em { font-family: "Iowan Old Style", "Baskerville", "Times New Roman", serif; font-weight: 400; }
.landing-intro em { color: var(--land-ink); }
.landing-intro { max-width: 590px; margin: 30px 0 0; color: var(--land-muted); font-size: 20px; line-height: 1.55; letter-spacing: -.015em; }
.landing-intro strong { color: var(--land-ink); font-weight: 680; }
.landing-intro s { text-decoration-color: #a9b3c4; text-decoration-thickness: 1.5px; }
.landing-hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.landing-start-large { min-height: 50px; padding: 0 21px; border-radius: 9px; font-size: 15px; }

.product-frame {
  position: relative; margin: 0; border: 1px solid #cbd4e3; border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 30px 70px rgba(34, 52, 91, .14), 0 3px 8px rgba(34, 52, 91, .08);
  transform: perspective(1200px) rotateY(-2.5deg) rotateX(1deg);
  animation: landing-frame-in .8s cubic-bezier(.2,.75,.2,1) both;
}
.product-frame::before {
  content: ''; position: absolute; inset: -30% auto auto -20%; width: 55%; height: 120%; z-index: 3;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.34) 50%, transparent 65%); pointer-events: none;
  animation: landing-sheen 1.2s .35s ease-out both;
}
.product-browserbar { height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 6px; background: #f4f6f9; border-bottom: 1px solid #dfe4ec; color: #8791a1; font: 10px ui-monospace, "SFMono-Regular", Consolas, monospace; }
.product-browserbar i { width: 7px; height: 7px; border-radius: 50%; background: #cad1dd; }
.product-browserbar span { flex: 1; text-align: center; }
.product-browserbar b { padding: 2px 6px; border: 1px solid #d8dee8; border-radius: 4px; font-weight: 500; }
.product-shell { height: 442px; display: grid; grid-template-columns: 126px 1fr; }
.product-rail { padding: 13px 9px 11px; display: flex; flex-direction: column; gap: 3px; background: #f8f9fb; border-right: 1px solid #e3e7ee; }
.product-wordmark { display: flex; align-items: center; gap: 6px; margin: 0 5px 15px; font-size: 11px; }
.product-wordmark .mark { width: 17px; height: 17px; border-radius: 5px; }
.product-rail small { margin: 0 7px 4px; color: #99a2b2; font: 7px ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .09em; }
.product-project { display: flex; gap: 7px; align-items: center; padding: 6px 7px; border-radius: 5px; color: #737e8f; font-size: 9px; }
.product-project.active { background: var(--land-ice); color: #27324a; font-weight: 650; }
.product-project span { color: var(--land-blue); }
.product-rail-spacer { flex: 1; }
.product-main { min-width: 0; padding: 0 17px; background: #fbfcfe; }
.product-topline { height: 48px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid #e4e8ef; color: #778294; font-size: 9px; }
.product-topline > span:first-child { height: 48px; display: flex; align-items: center; gap: 5px; border-bottom: 2px solid var(--land-blue); color: #263149; font-weight: 650; }
.product-topline b { padding: 1px 4px; border-radius: 5px; background: #edf0f5; color: #778294; font: 7px ui-monospace, "SFMono-Regular", Consolas, monospace; }
.product-topline > i { margin-left: auto; padding: 5px 8px; border-radius: 5px; background: var(--land-blue); color: #fff; font-size: 8px; font-style: normal; }
.product-compose { height: 38px; margin: 13px 0 17px; padding: 0 10px; display: flex; align-items: center; border: 1px solid #dfe4ec; border-radius: 6px; background: #fff; color: #9ca5b4; font-size: 9px; box-shadow: 0 2px 7px rgba(35,49,80,.04); }
.product-compose kbd { margin-left: auto; padding: 1px 4px; border: 1px solid #e0e5ed; border-radius: 3px; background: #fafbfc; font: 7px ui-monospace, "SFMono-Regular", Consolas, monospace; }
.product-list-head { display: flex; justify-content: space-between; margin-bottom: 6px; color: #929cac; font: 7px ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }
.product-list-head span:last-child { color: var(--land-green); text-transform: none; letter-spacing: 0; }
.product-task { min-height: 42px; padding: 6px 9px; display: grid; grid-template-columns: 17px minmax(0,1fr) auto; align-items: center; gap: 7px; border: 1px solid #e4e8ef; border-bottom: 0; background: #fff; }
.product-task:first-of-type { border-radius: 7px 7px 0 0; }
.product-task:last-of-type { border-bottom: 1px solid #e4e8ef; border-radius: 0 0 7px 7px; }
.product-check { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 4px; background: #e9f5f1; color: var(--land-green); font-size: 8px; font-weight: 800; }
.product-task strong { display: block; overflow: hidden; color: #273149; font-size: 8.5px; line-height: 1.25; font-weight: 620; }
.product-task code { font: inherit; }
.product-stage { display: flex; align-items: center; padding: 3px 7px; border-radius: 999px; font: 7px ui-monospace, "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.product-stage.done { background: #e9f5f1; color: #287b67; }

.landing-principles { padding: 110px max(24px, calc((100% - 1180px) / 2)); background: #fff; border-top: 1px solid var(--land-line); }
.landing-principles-content { max-width: 1000px; margin: 0 auto; }
.landing-principles h2, .landing-control h2, .landing-final h2 { margin: 0; font-size: clamp(37px, 4.3vw, 62px); line-height: 1.06; letter-spacing: -.048em; font-weight: 600; }
.landing-principles h2 em { color: var(--land-blue); }
.landing-checks { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--land-line); }
.landing-checks article { min-height: 144px; padding: 30px 28px 28px 0; border-bottom: 1px solid var(--land-line); }
.landing-checks article:nth-child(odd):not(.wide) { border-right: 1px solid var(--land-line); }
.landing-checks article:nth-child(even) { padding-left: 26px; }
.landing-checks h3 { margin: 0 0 9px; max-width: 450px; font-size: 18px; line-height: 1.4; letter-spacing: -.02em; }
.landing-checks p { max-width: 460px; margin: 0; color: var(--land-muted); font-size: 14px; line-height: 1.65; }
.landing-checks .wide { grid-column: 1 / -1; min-height: 132px; padding-right: 0; }

.landing-control { padding: 116px max(24px, calc((100% - 1180px) / 2)); display: grid; grid-template-columns: .88fr 1.12fr; gap: 90px; background: #182348; color: #fff; }
.landing-control h2 em { color: #9bb0ff; }
.landing-control-copy > p { max-width: 490px; margin: 28px 0 0; color: #b8c2da; font-size: 18px; line-height: 1.65; }
.landing-control-list { border-top: 1px solid rgba(255,255,255,.18); }
.landing-control-list article { min-height: 134px; padding: 30px 0; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.18); }
.landing-control-list p { max-width: 620px; margin: 0; color: #c1c9dc; font-size: 17px; line-height: 1.6; letter-spacing: -.01em; }
.landing-control-list strong { color: #fff; font-weight: 680; }

.landing-final { position: relative; padding: 128px 24px 140px; text-align: center; background: #edf2ff; overflow: hidden; }
.landing-final .landing-start { margin-top: 36px; }
.landing-orbit { position: absolute; left: 50%; top: 50%; width: 610px; height: 610px; border: 1px solid rgba(49,94,231,.09); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.landing-orbit::before, .landing-orbit::after { content: ''; position: absolute; inset: 80px; border: inherit; border-radius: inherit; }
.landing-orbit::after { inset: 180px; }
.landing-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(49,94,231,.25); }
.landing-orbit i:nth-child(1) { top: 74px; left: 110px; }
.landing-orbit i:nth-child(2) { right: 54px; top: 280px; }
.landing-orbit i:nth-child(3) { left: 190px; bottom: 24px; }
.landing-final > :not(.landing-orbit) { position: relative; z-index: 1; }
.landing-footer { min-height: 92px; padding: 0 max(24px, calc((100% - 1180px) / 2)); display: flex; align-items: center; gap: 34px; background: #fff; border-top: 1px solid var(--land-line); color: var(--land-muted); font-size: 13px; }
.landing-footer p { flex: 1; }

/* Public policy, trust, and exact-price surfaces. These intentionally share the
   landing typography but stay quiet and document-like for long-form reading. */
.legal-shell { min-height:100vh; background:#f7f8fb; color:#18203a; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.legal-nav { min-height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100% - 920px)/2)); background:#fff; border-bottom:1px solid #e2e5ed; }
.legal-nav > a:last-child { color:#536078; font-size:13px; }
.legal-document,.legal-index,.pricing-page { max-width:760px; margin:0 auto; padding:72px 24px 96px; }
.legal-index,.pricing-page { max-width:920px; }
.legal-kicker { color:#536078; font:600 12px/1.3 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.legal-document h1,.legal-index h1,.pricing-page h1 { margin:12px 0; font-size:clamp(34px,6vw,56px); line-height:1.02; letter-spacing:-.045em; }
.legal-summary { max-width:700px; color:#536078; font-size:18px; line-height:1.6; }
.legal-draft { display:flex; gap:12px; margin:28px 0; padding:14px 16px; border:1px solid #e2b35d; border-radius:10px; background:#fff8e7; color:#6e4c12; font-size:13px; line-height:1.45; }
.legal-draft b { flex:none; }
.legal-unresolved { padding:14px 16px; border-left:3px solid #c35b56; background:#fff; color:#773a37; }
.legal-operator { padding:12px 0; color:#536078; }
.legal-document section { margin-top:44px; }
.legal-document h2 { margin:0 0 14px; font-size:21px; letter-spacing:-.02em; }
.legal-document section p,.legal-document li { color:#39445a; font-size:15px; line-height:1.75; }
.legal-document li + li { margin-top:7px; }
.legal-contacts { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:48px; padding-top:20px; border-top:1px solid #dfe3eb; font-size:13px; }
.legal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:38px; }
.legal-grid a { min-height:150px; display:flex; flex-direction:column; padding:22px; border:1px solid #dfe3eb; border-radius:12px; background:#fff; box-shadow:0 8px 28px rgba(30,44,77,.04); }
.legal-grid span { font-size:18px; font-weight:700; }
.legal-grid small { margin-top:8px; color:#647086; line-height:1.5; }
.legal-grid i { margin-top:auto; padding-top:18px; color:#315ee7; font-style:normal; font:12px var(--font-mono); }
.legal-footer { min-height:80px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:24px; padding:20px 24px; border-top:1px solid #dfe3eb; background:#fff; color:#536078; font-size:12px; }
.price-card { max-width:620px; margin-top:36px; padding:32px; border:1px solid #dfe3eb; border-radius:16px; background:#fff; box-shadow:0 16px 45px rgba(30,44,77,.06); }
.price-value { font-size:30px; font-weight:750; letter-spacing:-.035em; }
.price-value small { font-size:14px; font-weight:500; letter-spacing:0; color:#647086; }
.price-name { font-size:18px; font-weight:750; margin-bottom:12px; }
.price-card p,.price-card li { color:#536078; line-height:1.6; }
.price-card .btn { margin-top:10px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:36px; }
.pricing-grid .price-card { min-width:0; margin:0; padding:24px; display:flex; flex-direction:column; }
.pricing-grid .price-card ul { padding-left:20px; }
.pricing-grid .price-card .btn,.pricing-grid .price-unavailable { margin-top:auto; align-self:flex-start; }
.price-unavailable { color:#7b8495; font-size:13px; }
.pricing-terms { margin-top:28px; color:#536078; line-height:1.6; }
.billing-commercial-terms { margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:8px; }
.price-policy { margin-top:24px; font-size:12px; }
@media (max-width:800px) { .pricing-grid { grid-template-columns:1fr; } }
@media (max-width:680px) { .legal-grid { grid-template-columns:1fr; } .legal-document,.legal-index,.pricing-page { padding-top:44px; } .legal-draft { flex-direction:column; gap:4px; } }

@keyframes landing-frame-in { from { opacity: 0; transform: perspective(1200px) rotateY(-2.5deg) rotateX(1deg) translateY(18px); } }
@keyframes landing-sheen { from { transform: translateX(-100%); } to { transform: translateX(280%); } }

@media (max-width: 960px) {
  .landing-hero { grid-template-columns: 1fr; gap: 58px; padding-top: 64px; }
  .landing-hero-copy { max-width: 720px; }
  .product-frame { width: min(680px, 100%); justify-self: center; transform: none; }
  .landing-control { grid-template-columns: 1fr; gap: 64px; }
}
@media (max-width: 680px) {
  .landing-nav { width: min(100% - 32px, 1180px); height: 68px; }
  .landing-text-link, .landing-sign-in { display: none; }
  .landing-hero { width: min(100% - 32px, 1180px); min-height: 0; padding: 54px 0 70px; gap: 46px; }
  .landing-analogy { font-size: 22px; gap: 10px; }
  .landing-analogy > span > strong { margin-right: 8px; }
  .landing-intro { font-size: 17px; }
  .landing-hero-actions { align-items: flex-start; flex-direction: column; }
  .product-frame { width: 100%; justify-self: start; transform: none; border-radius: 10px; }
  .product-shell { height: 425px; grid-template-columns: 88px 1fr; }
  .product-rail { padding-left: 5px; padding-right: 5px; }
  .product-project { padding-left: 4px; font-size: 7px; }
  .product-main { padding: 0 10px; }
  .product-topline { gap: 12px; }
  .product-topline > i { display: none; }
  .product-task { min-height: 42px; padding: 6px; }
  .product-task strong { font-size: 7.25px; }
  .product-stage { font-size: 6px; }
  .landing-principles, .landing-control { padding-top: 82px; padding-bottom: 82px; }
  .landing-principles h2, .landing-control h2, .landing-final h2 { font-size: 39px; }
  .landing-checks { grid-template-columns: 1fr; margin-top: 44px; }
  .landing-checks article, .landing-checks article:nth-child(even) { min-height: 0; padding: 24px 0; border-right: 0 !important; }
  .landing-checks .wide { grid-column: auto; }
  .landing-control-list article { min-height: 0; padding: 27px 0; }
  .landing-control-list p { font-size: 16px; }
  .landing-final { padding: 94px 24px 104px; }
  .landing-footer { min-height: 116px; flex-wrap: wrap; gap: 16px; padding-top: 24px; padding-bottom: 24px; }
  .landing-footer p { order: 3; flex-basis: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .product-frame, .product-frame::before { animation: none; }
  .landing-start, .landing-sign-in, .landing-skip { transition: none; }
}

/* 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); }
.login-home { display: inline-block; margin-bottom: 18px; color: var(--ink-3); font-size: 12px; }
.login-home:hover { color: var(--accent); }
.google-signin-btn {
  width: 100%; height: 40px; margin-top: 8px; padding: 0 12px;
  display: grid; grid-template-columns: 20px 1fr 20px; align-items: center; column-gap: 10px;
  border: 1px solid #747775; border-radius: 8px;
  background: #fff; color: #1f1f1f; cursor: pointer;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .01px;
}
.google-signin-mark { display: block; width: 18px; height: 18px; }
.google-signin-btn:hover { background: #f8faff; box-shadow: 0 1px 2px rgba(60, 64, 67, .18); }
.google-signin-btn:active { background: #f0f4f9; box-shadow: none; }
.google-signin-btn:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
html[data-theme="dark"] .google-signin-btn,
:root.dark .google-signin-btn {
  background: #131314; color: #e3e3e3; border-color: #8e918f;
}
html[data-theme="dark"] .google-signin-btn:hover,
:root.dark .google-signin-btn:hover { background: #1f1f20; }
html[data-theme="dark"] .google-signin-btn:active,
:root.dark .google-signin-btn:active { background: #2a2a2b; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .google-signin-btn {
    background: #131314; color: #e3e3e3; border-color: #8e918f;
  }
  html:not([data-theme="light"]) .google-signin-btn:hover { background: #1f1f20; }
  html:not([data-theme="light"]) .google-signin-btn:active { background: #2a2a2b; }
}

.github-signin-btn {
  width: 100%; height: 40px; margin-top: 8px; padding: 0 12px;
  display: grid; grid-template-columns: 20px 1fr 20px; align-items: center; column-gap: 10px;
  border: 1px solid #24292f; border-radius: 8px;
  background: #24292f; color: #fff; cursor: pointer;
  font: 600 14px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.github-signin-mark { display: block; width: 18px; height: 18px; }
.github-signin-btn:hover { background: #32383f; border-color: #32383f; }
.github-signin-btn:active { background: #1b1f23; border-color: #1b1f23; }
.github-signin-btn:focus-visible { outline: 2px solid var(--focus, #0969da); outline-offset: 2px; }
html[data-theme="dark"] .github-signin-btn,
:root.dark .github-signin-btn {
  background: #f0f6fc; color: #24292f; border-color: #f0f6fc;
}
html[data-theme="dark"] .github-signin-btn:hover,
:root.dark .github-signin-btn:hover { background: #d8dee4; border-color: #d8dee4; }
html[data-theme="dark"] .github-signin-btn:active,
:root.dark .github-signin-btn:active { background: #b1bac4; border-color: #b1bac4; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .github-signin-btn {
    background: #f0f6fc; color: #24292f; border-color: #f0f6fc;
  }
  html:not([data-theme="light"]) .github-signin-btn:hover { background: #d8dee4; border-color: #d8dee4; }
  html:not([data-theme="light"]) .github-signin-btn:active { background: #b1bac4; border-color: #b1bac4; }
}

/* 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; }

/* One authorization control everywhere: the level on its own line, then a single
   field where the scopes live — chosen scopes sit as chips beside the cursor, so
   there is one box to look at and one place to type. Stacking keeps it legible in
   the narrow task-form sidebar. Everything is qualified by `.authz-editor` on
   purpose: the generic `.form-row input/select` rules are more specific than a
   bare class and would otherwise repaint the field as a boxed input-in-a-box. */
.authz-editor { display: grid; gap: 6px; min-width: 0; max-width: 100%; }
.authz-editor .authz-level-select {
  width: 100%; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--surface); color: var(--ink); font-weight: 650; outline: 0;
  transition: border-color .14s, box-shadow .14s;
}
.authz-editor .authz-level-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.authz-scope-combo { position: relative; min-width: 0; }
.authz-scope-combo[hidden] { display: none; }
.authz-scope-field {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  min-height: 36px; padding: 4px 30px 4px 5px; cursor: text;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface);
  transition: border-color .14s, box-shadow .14s;
}
.authz-scope-field:hover { border-color: var(--ink-3); }
.authz-scope-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.authz-scope-chips { display: contents; }
.authz-scope-chip {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%;
  padding: 3px 5px 3px 9px; border-radius: 999px;
  background: var(--accent-weak); color: var(--accent); font-size: 11.5px; font-weight: 650;
}
.authz-scope-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authz-scope-chip button {
  display: grid; place-items: center; width: 15px; height: 15px; flex: none;
  border: 0; padding: 0; border-radius: 50%; background: transparent;
  color: inherit; font-size: 12px; line-height: 1; cursor: pointer; opacity: .55;
}
.authz-scope-chip button:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.authz-editor .authz-scope-input {
  flex: 1 1 60px; min-width: 44px; width: 0; border: 0; border-radius: 0;
  padding: 3px 4px; background: transparent; color: inherit; outline: 0;
}
.authz-editor .authz-scope-input::placeholder { color: var(--ink-3); }
.authz-scope-caret {
  position: absolute; right: 4px; top: 4px; display: grid; place-items: center;
  width: 24px; height: 26px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-3); font-size: 12px; cursor: pointer;
}
.authz-scope-caret:hover { color: var(--ink-2); }
.authz-scope-menu {
  position: absolute; z-index: 90; left: -1px; right: -1px; top: calc(100% + 5px);
  max-height: 230px; overflow: auto; padding: 5px; border: 1px solid var(--line-strong);
  border-radius: 9px; background: var(--surface); box-shadow: var(--shadow);
}
.authz-scope-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 6px; padding: 7px 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
/* --accent-ink is the ink for a SOLID accent fill; on the weak tint it reads as
   white-on-lavender. The tint takes the accent itself. */
.authz-scope-option:hover, .authz-scope-option.active { background: var(--accent-weak); color: var(--accent); }
.authz-scope-option small, .authz-scope-empty { color: var(--ink-3); font-size: 10px; }
.authz-scope-empty { display: block; padding: 8px; }
.authz-invite-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(260px, 1.5fr) auto; gap: 8px; align-items: start; margin-top: 10px; }
.authz-member-row .person-name { margin-right: auto; }
.authz-member-row .authz-editor { margin-left: auto; flex: 0 1 280px; }
@media (max-width: 760px) {
  .authz-invite-row { grid-template-columns: 1fr; }
  .authz-member-row { align-items: stretch; flex-wrap: wrap; }
  .authz-member-row .authz-editor { order: 3; width: 100%; margin-left: 0; }
}



.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); }
  .quick-task-field { grid-column:1 / -1; width:100%; }
  .composer #draft-task { grid-column:2; }
  .composer input.title-in { 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 —
   settings choose where keys may be used; Task forms stay binary On/Off. */
.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-mode {
  max-width: 108px; height: 22px; padding: 0 20px 0 7px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--ink-2);
  font: 700 10px/1 var(--font-ui); text-transform: uppercase; cursor: pointer;
}
.cred-mode.on { background: var(--accent); color: #fff; border-color: transparent; }
.cred-mode.explainer-only { background: var(--accent-weak); color: var(--accent-ink); border-color: transparent; }
.cred-rename, .cred-del, .cred-key-edit, .cred-key-del { cursor: pointer; color: var(--ink-3); font-size: 11px; }
.cred-rename:hover, .cred-del:hover, .cred-key-edit:hover, .cred-key-del:hover { color: var(--accent); }
.api-key-edit-form { width: min(440px, calc(100vw - 32px)); }

/* ── 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; }
.af-resume-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); margin-top: 6px; }
.af-resume-chosen:empty { display: none; }
.af-resume-label { min-width: 0; }
.af-resume-source { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.af-resume-source:hover { text-decoration-style: solid; }
/* the fork's "Re-authorize previous grants?" — its own line under the chip */
.af-resume-reauth {
  flex-basis: 100%; display: flex; align-items: center; gap: 6px; width: max-content; max-width: 100%;
  margin-top: 2px; color: var(--ink-3); font-size: 12px; cursor: pointer;
}
.af-resume-reauth[hidden] { display: none !important; }
.af-resume-reauth input { width: auto; margin: 0; }
.af-resume-reauth-summary { opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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); }
.af-resume-import-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 28px; }
.af-resume-upload { cursor: pointer; white-space: nowrap; }
.af-resume-uploaded { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--accent); font-size: 12px; }
.af-resume-uploaded:empty { display: none; }
.af-resume-uploaded:not(:empty) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-resume-upload-clear { flex: 0 0 auto; border: 0; padding: 0 2px; background: none; color: var(--ink-3); cursor: pointer; }
.af-resume-upload-clear:hover { color: var(--danger); }

.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; }
.pf-edit-row {
  position: relative; margin-left: -12px; padding-left: 10px;
  border-left: 2px solid transparent; border-radius: 2px;
  transition: border-color .16s ease, background-color .16s ease;
}
.pf-edit-row.param-row-dirty {
  border-left-color: var(--working);
  background: linear-gradient(90deg, color-mix(in srgb, var(--working) 8%, transparent), transparent 72%);
}
.params-save-bar {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; margin-top: 14px; padding: 12px 0 2px;
  background: linear-gradient(180deg, transparent, var(--surface) 13px);
}
.params-save-status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12px; }
.params-save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--merged); }
.params-save-bar[data-save-state="dirty"] .params-save-status { color: var(--working); font-weight: 650; }
.params-save-bar[data-save-state="dirty"] .params-save-dot {
  background: var(--working); box-shadow: 0 0 0 3px color-mix(in srgb, var(--working) 15%, transparent);
}
.params-save-bar[data-save-state="saving"] .params-save-dot { background: var(--accent); }
.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,
.prompt-field > .wiki-ref-editor > 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; }
.prompt-attach-row { display: flex; align-items: center; gap: 9px; padding: 0 12px 8px; color: var(--ink-3); font-size: 11px; }
.attach-file-button {
  display: inline-flex; align-items: center; width: max-content; cursor: pointer;
  color: var(--accent); font-size: 12px; font-weight: 600;
}
.attach-file-button:hover { text-decoration: underline; text-underline-offset: 2px; }
.attach-file-button:focus,
.attach-file-button:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* 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); }
.prompt-context-row > .wiki-ref-editor { flex: 1; }
.form-row .prompt-field { background: var(--surface-2); }

/* Wiki-reference editor: the textarea remains the sole editable control while
   an inert, pixel-aligned mirror underneath colors recognized references. */
.wiki-ref-editor { position: relative; display: block; width: 100%; min-width: 0; }
.wiki-ref-backdrop {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  white-space: pre-wrap; overflow-wrap: break-word; color: var(--ink);
  border-style: solid; border-color: transparent; background: transparent;
}
.wiki-ref-editor > textarea.wiki-ref-input {
  position: relative; z-index: 1; display: block; background: transparent !important;
  color: transparent !important; -webkit-text-fill-color: transparent;
  caret-color: var(--ink);
}
.wiki-ref-editor > textarea.wiki-ref-input::placeholder {
  color: var(--ink-3); -webkit-text-fill-color: var(--ink-3);
}
.wiki-ref-editor > textarea.wiki-ref-input::selection {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.wiki-ref-editor > textarea.wiki-ref-modifier { cursor: pointer; }
.wiki-ref-backdrop .wiki-ref {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent);
  border-radius: 3px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 2px;
}
.wiki-ref-backdrop .wiki-ref-label { color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, transparent); }
.wiki-ref-backdrop .wiki-ref-folder { color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, transparent); }
.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); }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 280px;
  height: 34px; padding: 0 7px; border: 1px solid var(--line-strong);
  border-radius: 7px; background: var(--surface-2); color: var(--ink-2); font-size: 12px;
}
.file-chip-icon { color: var(--accent); font-weight: 700; }
.file-chip-icon svg { display: block; width: 14px; height: 14px; }
.file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip-size { flex: none; color: var(--ink-3); font-size: 10px; }
.file-chip-x { flex: none; border: 0; padding: 2px; background: transparent; color: var(--ink-3); cursor: pointer; }
.file-chip-x:hover { color: var(--danger); }
.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);
}
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.msg-file {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 320px;
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
  color: var(--ink-2); background: var(--surface-2); text-decoration: none;
}
.msg-file > span:nth-child(1) { color: var(--accent); font-weight: 700; }
.msg-file > span:nth-child(1) svg { display: block; width: 14px; height: 14px; }
.msg-file > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-file small { color: var(--ink-3); white-space: nowrap; }
.msg-file:hover { border-color: var(--accent); color: var(--accent); }

/* ── 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; }
.search-pending { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.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: 12px; min-width: 0; }
.attempts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-2); font-size: 12px; }
.attempts-list { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 4px; scrollbar-width: thin; }
.attempt-card { flex: 0 0 auto; min-width: 136px; display: grid; align-content: start; gap: 3px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 12px; text-decoration: none; }
.attempt-card:hover { border-color: var(--line-strong); background: var(--surface-2); text-decoration: none; }
.attempt-card.selected { border-color: var(--accent); background: var(--accent-weak); }
.attempt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.attempt-name { font-weight: 600; }
.attempt-state { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.attempt-note { color: var(--ink-2); font-size: 11px; }
.attempt-current { color: var(--accent); background: var(--accent-weak); }

.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; } }

/* Wiki-reference dropdown for pages, labels, and folders in prompt editors. */
.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); }
.authorization-gap-overlay { z-index: 80; padding: 14px; }
.authorization-gap-card { position: relative; width: min(680px, 100%); max-height: min(820px, calc(100vh - 28px)); overflow: auto; padding: 0; }
.authorization-gap-head { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 24px 52px 20px 24px; border-bottom: 1px solid var(--line); }
.authorization-gap-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); font-size: 21px; }
.authorization-gap-head .section-h { margin: 0 0 5px; }
.authorization-gap-head h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.authorization-gap-head p { margin: 7px 0 0; color: var(--ink-3); line-height: 1.5; }
.authorization-gap-close { position: absolute; top: 14px; right: 14px; }
.authorization-gap-paths { padding: 10px 24px 4px; }
.authorization-gap-path { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 0; }
.authorization-gap-number { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font: 600 12px var(--font-mono); }
.authorization-gap-path-copy { display: grid; gap: 3px; }
.authorization-gap-path-copy > span { color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.authorization-gap-recipients { margin: 0 0 4px 40px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.authorization-gap-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 240px; overflow: auto; }
.authorization-gap-recipient { display: grid; grid-template-columns: auto 28px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.authorization-gap-recipient:hover { background: var(--surface); border-color: var(--line); }
.authorization-gap-recipient-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-2); color: var(--ink-2); font: 650 12px var(--font-mono); }
.authorization-gap-recipient-icon.avatar { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.authorization-gap-recipient span:last-child { display: grid; min-width: 0; }
.authorization-gap-recipient b, .authorization-gap-recipient small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.authorization-gap-recipient small { color: var(--ink-3); font-size: 11px; }
.authorization-gap-reason { display: grid; gap: 5px; margin: 12px 0; color: var(--ink-3); font-size: 12px; }
.authorization-gap-reason textarea { width: 100%; resize: vertical; }
.authorization-gap-empty { color: var(--ink-3); font-size: 13px; padding: 8px; }
.authorization-gap-details { margin: 4px 24px 22px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
.authorization-gap-details summary { cursor: pointer; margin-bottom: 9px; }
.authorization-gap-details .chip { margin: 2px 2px 0 0; }
@media (max-width: 620px) {
  .authorization-gap-head { grid-template-columns: 1fr; padding-left: 18px; }
  .authorization-gap-mark { display: none; }
  .authorization-gap-paths { padding-inline: 18px; }
  .authorization-gap-path { grid-template-columns: 24px 1fr; }
  .authorization-gap-path .btn { grid-column: 2; justify-self: start; }
  .authorization-gap-recipients { margin-left: 0; }
  .authorization-gap-list { grid-template-columns: 1fr; }
}
.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; }
.vault-reveal-panel { flex-basis: 100%; padding: 10px; border-radius: 7px; background: var(--surface-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vault-reveal-panel[hidden], .vault-reveal-value[hidden] { display: none !important; }
.vault-reveal-value { flex-basis: 100%; min-width: 0; }
.vault-reveal-value pre { margin: 0 0 8px; padding: 9px; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); user-select: text; }
@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); }
.totp-secret-control { position: relative; min-width: 0; }
.totp-secret-control .vi-totp-input { box-sizing: border-box; width: 100%; transition: padding-right .14s ease; }
.totp-secret-control.has-qr .vi-totp-input { padding-right: 136px; }
.totp-qr-preview {
  position: absolute; inset: 3px 3px 3px auto; display: flex; align-items: center; gap: 5px;
  max-width: 130px; padding: 2px 3px; overflow: hidden; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); color: var(--ink-2); box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}
.totp-qr-preview[hidden] { display: none; }
.totp-qr-preview img { width: 26px; height: 26px; flex: none; border-radius: 3px; object-fit: cover; image-rendering: pixelated; }
.totp-qr-status { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 650; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.totp-qr-preview[data-state="ready"] .totp-qr-status { color: var(--ok, #26865b); }
.totp-qr-preview[data-state="error"] .totp-qr-status { color: var(--danger); }
.totp-qr-remove {
  display: grid; width: 18px; height: 18px; flex: none; padding: 0; place-items: center;
  border: 0; border-radius: 4px; background: transparent; color: var(--ink-3); font: inherit; cursor: pointer;
}
.totp-qr-remove:hover, .totp-qr-remove:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
@media (max-width: 480px) {
  .totp-secret-control.has-qr .vi-totp-input { padding-right: 70px; }
  .totp-qr-status { display: none; }
}

/* 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; } }

/* Avatars — intentionally closer to the Wiki list than to a settings console. */
.avatars-page { width: min(980px, 100%); margin: 0 auto; padding: 28px 24px 72px; box-sizing: border-box; }
.avatar-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.avatar-risk-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 11px 12px; border: 1px solid var(--working); border-radius: 10px; background: var(--working-weak); color: var(--ink); font-size: 12px; line-height: 1.5; }
.avatar-risk-note .avatar-risk-mark { color: var(--working); font-size: 15px; line-height: 1.2; }
.settings-section-title + .avatar-risk-note { margin: 0 0 12px; }
.avatar-list { margin-top: 18px; border-top: 1px solid var(--line); }
.avatar-row { width: 100%; display: grid; grid-template-columns: 36px minmax(0,1fr) auto 18px; align-items: center; gap: 12px; padding: 15px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.avatar-row:hover { background: var(--surface-2); }
.avatar-mark { display: inline-grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: var(--accent-weak); color: var(--accent); font-size: 16px; }
.avatar-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.avatar-row-main > span { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.avatar-row-main small { color: var(--ink-3); }
.avatar-chevron { color: var(--ink-3); font-size: 20px; }
.avatar-empty { min-height: 280px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; color: var(--ink-2); text-align: center; }
.avatar-disabled { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; }
.avatar-disabled p { margin: 4px 0 0; color: var(--ink-2); }
.avatar-back { margin-bottom: 16px; }
.avatar-detail-head { display: flex; align-items: center; gap: 14px; }
.avatar-detail-head .avatar-mark { width: 44px; height: 44px; font-size: 21px; }
.avatar-identity { min-width: 0; flex: 1; }
.avatar-identity h1, .avatar-identity p { margin: 0; }
.avatar-identity p { margin-top: 3px; color: var(--ink-2); }
.avatar-actions { display: flex; gap: 8px; margin: 20px 0; }
.avatar-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 16px; align-items: start; }
.avatar-prompt { padding-top: 4px; }
.avatar-summary { display: flex; flex-direction: column; padding: 4px 14px; }
.avatar-summary > div { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.avatar-summary > div:last-child { border-bottom: 0; }
.avatar-summary span { color: var(--ink-3); font-size: 11px; }
.avatar-summary b { font-size: 12px; overflow-wrap: anywhere; }
.avatar-editor-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / 45%); }
.avatar-editor { width: min(720px, calc(100vw - 28px)); max-height: min(860px, calc(100vh - 32px)); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.avatar-editor-head, .avatar-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.avatar-editor-head h2, .avatar-editor-head p { margin: 0; }
.avatar-editor-head p { margin-top: 3px; color: var(--ink-2); font-size: 12px; }
.avatar-editor-scroll { overflow-y: auto; padding: 18px; }
.avatar-editor-actions { justify-content: flex-end; border-top: 1px solid var(--line); border-bottom: 0; }
.avatar-editor .form-row > span { margin-bottom: 5px; font-size: 12px; font-weight: 650; }
.avatar-editor textarea, .avatar-editor input, .avatar-editor select { box-sizing: border-box; max-width: 100%; }
.avatar-defaults { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 8px 0 16px; padding: 12px; border-radius: 9px; background: var(--surface-2); }
.avatar-defaults > div { min-width: 0; display: flex; flex-direction: column; }
.avatar-defaults span { color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.avatar-defaults b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.avatar-customize > summary { cursor: pointer; color: var(--ink-2); }
.avatar-custom-section { padding: 16px 2px; border-bottom: 1px solid var(--line); }
.avatar-custom-section:last-child { border-bottom: 0; }
.avatar-role-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 8px; font-size: 12px; }
.choice-row { display: flex; gap: 9px; padding: 8px 0; cursor: pointer; }
.choice-row > input { flex: none; }
.choice-row > span { display: flex; flex-direction: column; gap: 2px; }
.choice-row small { color: var(--ink-3); }
.choice-row.compact { padding: 6px 0; }
.af-avatar { width: 100%; margin-bottom: 7px; }
.af-avatar-note { margin: 0 0 7px; padding: 8px 10px; border-radius: 7px; background: var(--accent-weak); color: var(--ink-2); font-size: 11px; }
@media (max-width: 720px) {
  .avatars-page { padding: 20px 14px 60px; }
  .avatar-detail-grid { grid-template-columns: 1fr; }
  .avatar-list-head { align-items: center; }
  .avatar-row { grid-template-columns: 34px minmax(0,1fr) 18px; }
  .avatar-row > .chip { display: none; }
  .avatar-defaults { grid-template-columns: 1fr; }
  .avatar-role-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}