/* 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. */

/* `hidden` always hides. Component display rules (.btn, .card, .inline-form…)
   otherwise override the browser's own [hidden] rule, so a control hidden for
   lack of permission stayed on screen. */
[hidden] { display: none !important; }

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* ── Looks ────────────────────────────────────────────────────────────────
   A look is a set of tokens; components only read tokens. The default look is
   built for reading: neutral greys that keep text the most saturated thing on
   screen, a 15px body, cards a step lighter (dark) or whiter (light) than the
   page, and primary buttons in the ink colour — the strongest contrast on the
   page marks the one thing to do. The indigo accent is for links, selection
   and focus. `html[data-skin="classic"]` restores the earlier indigo look
   exactly (Installation → Appearance → Style); each look has light and dark. */
:root {
  color-scheme: light dark; /* defeat Chrome force-dark by declaring both */
  --paper: #f8f8f9;
  --surface: #ffffff;
  --surface-2: #f3f3f5;
  --ink: #18181b;
  --ink-2: #4f4f58;
  --ink-3: #686872;
  --line: #e4e4e8;
  --line-strong: #d1d1d7;
  --accent: #5454d4;
  --accent-ink: #ffffff;
  --accent-weak: #ededfb;
  --working: #9a5a06;
  --working-weak: #f8eedd;
  --merged: #127a6c;
  --merged-weak: #dcf1ec;
  --danger: #b5322a;
  --danger-weak: #fbe7e4;
  --shadow: 0 1px 2px rgba(24, 24, 27, 0.05), 0 4px 16px rgba(24, 24, 27, 0.04);
  /* What needs you: the sidebar's For me counts, the inbox badge. */
  --attention: #e8962a;
  --attention-ink: #241500;
  --danger-ink: #ffffff;
  /* The one thing to do on a screen. */
  --primary: var(--ink);
  --primary-ink: #ffffff;
  --primary-hover: #34343b;
  /* The sidebar: the page's own colour, a hairline away from the content. */
  --rail-bg: var(--paper);
  --rail-current: #ebebee;
  /* Where you are in a list of places (sidebar, settings sections). */
  --current-ink: var(--ink);
  --current-ring: inset 0 0 0 1px var(--line);
  /* chart identity slots (validated for CVD separation on --surface) */
  --viz-1: #5b5bd6;
  --viz-2: #eb6834;
  --viz-3: #1baf7a;
  --viz-other: #b8bfcc;
  /* Conversation tints, mixed from the theme so light and dark follow. */
  --bubble: color-mix(in srgb, var(--accent) 7%, var(--surface));
  --tint: color-mix(in srgb, var(--ink) 5%, var(--surface));
  --read-width: 608px;
  --r: 12px;
  --r-sm: 8px;
  --r-btn: 999px;
  --r-field: 10px;
  --btn-line: var(--line-strong);
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
  /* Type: each step is named after the size the classic look gives it. */
  --fs-10: 11px; --fs-10h: 11.5px; --fs-11: 12px; --fs-11h: 12.5px; --fs-12: 13px; --fs-12h: 13.5px;
  --fs-13: 14px; --fs-13h: 14.5px; --fs-14: 15px; --fs-15: 16px;
  /* Headings, one size per level: the page, a section of it, a group in a section. */
  --h1: 24px; --h2: 18px; --h3: 16px;
  --setting-label: var(--ink); --setting-label-size: var(--fs-13); --setting-label-weight: 500; --setting-value: var(--ink-2);
}

html[data-theme="dark"],
:root.dark {
  --paper: #0f0f12;
  --surface: #16161a;
  --surface-2: #1d1d22;
  --ink: #ececef;
  --ink-2: #a8a8b2;
  --ink-3: #8d8d98;
  --line: #26262c;
  --line-strong: #36363e;
  --accent: #8e95ff;
  --accent-ink: #0c0d12;
  --accent-weak: #1f2035;
  --working: #e8a34c;
  --working-weak: #2c2416;
  --merged: #3cc9b0;
  --merged-weak: #112c28;
  --danger: #f0665d;
  --danger-weak: #311b1a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.25);
  --primary-ink: #0f0f12;
  --primary-hover: #ffffff;
  --danger-ink: #1a0a09;
  --rail-current: #232329;
  --viz-1: #7474e8;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-other: #4a5263;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --paper: #0f0f12;
    --surface: #16161a;
    --surface-2: #1d1d22;
    --ink: #ececef;
    --ink-2: #a8a8b2;
    --ink-3: #8d8d98;
    --line: #26262c;
    --line-strong: #36363e;
    --accent: #8e95ff;
    --accent-ink: #0c0d12;
    --accent-weak: #1f2035;
    --working: #e8a34c;
    --working-weak: #2c2416;
    --merged: #3cc9b0;
    --merged-weak: #112c28;
    --danger: #f0665d;
    --danger-weak: #311b1a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.25);
    --primary-ink: #0f0f12;
    --primary-hover: #ffffff;
    --danger-ink: #1a0a09;
    --rail-current: #232329;
    --viz-1: #7474e8;
    --viz-2: #d95926;
    --viz-3: #199e70;
    --viz-other: #4a5263;
  }
}

/* The classic look: indigo primary buttons, a white sidebar, a 14px body. */
html[data-skin="classic"] {
  --paper: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #fbfcfd;
  --ink: #15181e;
  --ink-2: #58616f;
  --ink-3: #626e7e;
  --line: #e5e8ed;
  --line-strong: #d4d9e1;
  --accent: #5b5bd6;
  --accent-ink: #ffffff;
  --accent-weak: #ecedfb;
  --working: #985c0b;
  --working-weak: #f8efdd;
  --merged: #128474;
  --merged-weak: #dcf1ec;
  --danger: #b5322a;
  --danger-weak: #fbe7e4;
  --shadow: 0 1px 2px rgba(20, 24, 34, 0.06), 0 8px 24px rgba(20, 24, 34, 0.06);
  --attention: var(--accent);
  --attention-ink: var(--accent-ink);
  --primary: var(--accent);
  --primary-ink: var(--accent-ink);
  --primary-hover: color-mix(in srgb, var(--accent) 88%, #fff);
  --rail-bg: var(--surface);
  --rail-current: var(--accent-weak);
  --current-ink: var(--accent);
  --current-ring: none;
  --viz-1: #5b5bd6;
  --viz-2: #eb6834;
  --viz-3: #1baf7a;
  --viz-other: #b8bfcc;
  --bubble: color-mix(in srgb, var(--accent) 9%, var(--surface));
  --r: 9px;
  --r-sm: 6px;
  --r-btn: 8px;
  --r-field: 8px;
  --btn-line: var(--line);
  --fs-10: 10px; --fs-10h: 10.5px; --fs-11: 11px; --fs-11h: 11.5px; --fs-12: 12px; --fs-12h: 12.5px;
  --fs-13: 13px; --fs-13h: 13.5px; --fs-14: 14px; --fs-15: 15px;
  --h1: 15px; --h2: 21px; --h3: 16px;
  --setting-label: var(--ink-3); --setting-label-size: var(--fs-12h); --setting-label-weight: 400; --setting-value: var(--ink);
}

html[data-skin="classic"][data-theme="dark"] {
  --danger-ink: #1a0a09;
  --paper: #111318;
  --surface: #181b22;
  --surface-2: #1f232c;
  --ink: #e7e9ef;
  --ink-2: #9aa4b2;
  --ink-3: #929dad;
  --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);
  --viz-1: #7474e8;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-other: #4a5263;
}

@media (prefers-color-scheme: dark) {
  html[data-skin="classic"]:not([data-theme="light"]) {
    --danger-ink: #1a0a09;
    --paper: #111318;
    --surface: #181b22;
    --surface-2: #1f232c;
    --ink: #e7e9ef;
    --ink-2: #9aa4b2;
    --ink-3: #929dad;
    --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);
    --viz-1: #7474e8;
    --viz-2: #d95926;
    --viz-3: #199e70;
    --viz-other: #4a5263;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rail-scrim { display: none; }
button, input, textarea, select { font: inherit; color: inherit; }
/* Touch screens: iOS zooms into any text field set below 16px, panning what is
   beside it (a message box's Send) off screen. */
@media (pointer: coarse) { input, textarea, select { font-size: max(16px, 1em); } }

/* 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, .rail-icon.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"; }
.nowrap { white-space: nowrap; }

/* ── layout shell ───────────────────────────────────────────── */
/* --visible-height is the part of the screen an on-screen keyboard leaves where
   the browser does not resize the page for it (fitToVisualViewport). */
#app { display: flex; flex-direction: column; height: 100vh; height: var(--visible-height, 100dvh); overflow: hidden; }
/* How far the page starts below the window's top: nothing on a computer, the
   phone's bar on a phone. */
:root { --shell-top: 0px; }
@media (max-width: 720px) { :root { --shell-top: 52px; } }

/* There is no top bar: the sidebar carries the logo, the person and the
   tools. A phone, whose sidebar slides over the page, keeps a slim bar with ☰,
   the mark and where you are. */
.mobile-bar {
  display: none; align-items: center; gap: 10px;
  height: 52px; padding: 0 12px;
  background: var(--rail-bg);
  border-bottom: 1px solid var(--line);
  z-index: 30;
}
.mobile-bar .mobile-menu { flex: none; position: relative; }
/* Something waits in the inbox, whose bell is in the folded-away sidebar. */
.mobile-bar .mobile-menu.has-unread::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--attention); box-shadow: 0 0 0 2px var(--rail-bg);
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--ink); text-decoration: none; border-radius: 7px; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The wordmark: Inter's display cut (optical size 32) — tighter, crisper
   letterforms than the text cut — set a touch heavier and tracked in, so the
   name reads as a mark rather than a label. */
.brand .wordmark {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 18px; line-height: 1; font-weight: 680; letter-spacing: -0.035em;
  font-variation-settings: "opsz" 32; font-optical-sizing: none;
  padding-bottom: 1px;
}
/* The open project's name beside the mark, where no sidebar shows it (a phone). */
.topbar-context { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.tab-narrow { display: none; }
/* 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: 24px; height: 24px; border-radius: 7px;
  display: block; object-fit: contain; flex: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.brand-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.brand-picker:not([hidden]) { margin-top: 10px; }
.brand-current { display: inline-flex; align-items: center; gap: 8px; }
.brand-current img { width: 24px; height: 24px; border-radius: 6px; }
.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: var(--fs-12);
}
.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;
}
.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; }
.has-badge .badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: var(--attention); color: var(--attention-ink);
  font-size: var(--fs-10); font-weight: 700; display: grid; place-items: center;
}
/* The shortcut echo: the keys for what you just did, fading after a moment
   (held while hovered; a pending chord prefix holds until it resolves). It
   floats at the window's top right, over whatever page is open. */
.key-echo {
  position: fixed; top: 12px; right: 16px; z-index: 60;
  font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.5; white-space: nowrap;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px;
  box-shadow: var(--shadow);
  animation: key-echo-fade 2.4s ease-in forwards;
}
.key-echo:empty { display: none; }
.key-echo.pending { animation: none; }
.key-echo:hover { animation-play-state: paused; }
@keyframes key-echo-fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .key-echo { animation-timing-function: step-end; } }

.body { flex: 1; min-height: 0; display: grid; grid-template-columns: 232px 1fr; overflow: hidden; }
/* Folding the rail (its ⇤ button on a wide screen): the column closes smoothly
   and the rail stops taking focus (inert) once it is out of sight; a button at
   the window's top left brings it back. */
.rail-expand {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 35;
  width: 34px; height: 34px; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-2);
  box-shadow: var(--shadow);
}
.rail-expand:hover { color: var(--ink); border-color: var(--line-strong); }
.rail-expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 721px) {
  html.rail-collapsed .rail-expand { display: grid; }
  .body { transition: grid-template-columns .18s ease; }
  .rail { transition: visibility 0s; }
  html.rail-collapsed .body { grid-template-columns: 0 1fr; }
  html.rail-collapsed .rail { visibility: hidden; overflow: hidden; min-width: 0; padding-left: 0; padding-right: 0; border-right-width: 0;
    transition: visibility 0s .18s, padding 0s .18s, border-width 0s .18s; }
  html.rail-collapsed .task-form-page { left: 0; }
}
@media (prefers-reduced-motion: reduce) { .body, html.rail-collapsed .rail { transition: none; } }

/* ── projects rail ──────────────────────────────────────────── */
.rail {
  background: var(--rail-bg); border-right: 1px solid var(--line);
  min-height: 0; overflow: hidden; display: flex; flex-direction: column;
}
/* Four bands: the logo; the organization (picker + its places); the project
   list scrolling between; and the foot — tools, then you and your inbox. */
.rail-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 52px; padding: 0 8px 0 14px; }
.rail-head .rail-icon { width: 32px; }
.rail-top { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 2px 10px 6px; }
.rail-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 4px 10px 10px; }
.rail-org-nav { display: flex; flex-direction: column; gap: 1px; }
/* The one thing to do from anywhere: a labelled button, not a field or an arrow. */
.rail-new-task { justify-content: center; width: 100%; min-height: 36px; margin: 2px 0 4px; }
.rail-new-task svg { flex: none; }
/* …whose right tip starts one from a template: one pill, split by a hairline. */
.rail-new { display: flex; margin: 2px 0 4px; }
.rail-new .rail-new-task { flex: 1; min-width: 0; margin: 0; border-radius: var(--r-btn) 0 0 var(--r-btn); }
.rail-new .btn.rail-new-template { flex: none; width: 40px; min-height: 36px; padding: 0 2px 0 0; justify-content: center;
  border-radius: 0 var(--r-btn) var(--r-btn) 0; border-left: 1px solid color-mix(in srgb, var(--primary-ink) 30%, transparent); }
.rail-new .btn:focus-visible { position: relative; z-index: 1; }
/* A place in the organization: icon and name, a full-width row. */
.rail-row {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px;
  border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; text-decoration: none;
  transition: color .12s, background .12s;
}
.rail-row svg { flex: none; color: var(--ink-3); transition: color .12s; }
.rail-row:hover { background: var(--surface-2); color: var(--ink); }
.rail-row:hover svg { color: var(--ink-2); }
.rail-row[aria-current="page"] { background: var(--rail-current); color: var(--current-ink); font-weight: 600; box-shadow: var(--current-ring); }
.rail-row[aria-current="page"] svg { color: var(--current-ink); }
.rail-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rail-row:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.rail-row:focus:not(:focus-visible):not(:hover) { outline: none; }
/* The foot: installation-wide tools sharing one row in equal cells (three for
   a member, four for an operator), then you and your inbox. */
.rail-foot { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 10px; border-top: 1px solid var(--line); }
.rail-tools { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.rail-tools .rail-icon { width: auto; }
.rail-person { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rail-profile {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 8px 0 6px;
  border-radius: var(--r-sm); color: var(--ink); font-weight: 550; text-decoration: none; transition: background .12s;
}
.rail-profile:hover { background: var(--surface-2); }
.rail-profile[aria-current="page"] { background: var(--rail-current); }
.rail-profile:focus-visible, .rail-profile:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.rail-profile:focus:not(:focus-visible):not(:hover) { outline: none; }
.rail-profile .avatar {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--accent), #8a6cf0); color: #fff; font-weight: 700; font-size: var(--fs-12);
}
.rail-profile .avatar img { width: 100%; height: 100%; object-fit: cover; }
.rail-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-icon {
  display: grid; place-items: center; width: 36px; height: 34px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer;
  transition: color .12s, background .12s;
}
.rail-icon:hover { background: var(--surface-2); color: var(--ink); }
.rail-icon[aria-current="page"], .rail-icon.active { background: var(--accent-weak); color: var(--accent); }
.rail-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rail-icon.has-badge { position: relative; flex: none; }
.rail-icon.has-badge .badge { top: 1px; right: 1px; }
@media (prefers-reduced-motion: reduce) { .rail-icon, .rail-row, .rail-row svg, .rail-profile { transition: none; } }
.rail .label { font-size: var(--fs-12); color: var(--ink-2); padding: 10px 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; }
/* Project search shares the rail's row geometry and quiet surface treatment. */
.rail-search-box {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  margin: 4px 0 8px; padding: 0 9px; min-height: 32px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-2); color: var(--ink-3); cursor: text;
  transition: border-color .12s, background .12s;
}
.rail-search-box:hover { border-color: var(--line-strong); }
.rail-search-box:focus-within {
  border-color: var(--accent); background: var(--surface);
  outline: 2px solid var(--accent-weak);
}
.rail-search-icon { width: 16px; height: 16px; flex: none; }
.rail-search-box:focus-within .rail-search-icon { color: var(--accent); }
.rail .rail-search {
  appearance: none; flex: 1; width: 100%; min-width: 0; margin: 0; padding: 6px 0;
  border: 0; border-radius: 0; outline: none; background: transparent;
  color: var(--ink); font: var(--fs-12)/18px var(--font-ui);
}
.rail .rail-search::placeholder { color: var(--ink-2); opacity: 1; }
.rail-search-empty { padding: 8px 10px; color: var(--ink-3); font-size: var(--fs-12); }
@media (prefers-reduced-motion: reduce) { .rail-search-box { transition: 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(--rail-current); color: var(--ink); font-weight: 600; box-shadow: var(--current-ring); }
.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: var(--fs-12); font-weight: 600; 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 var(--fs-14)/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: var(--fs-12)/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: var(--fs-10); line-height: 1.25; }
.rail .proj .count {
  flex: none; margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: var(--attention); color: var(--attention-ink);
  font-size: var(--fs-10); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Hovering a project swaps its number for its edit button, which floats at
   the row's end so the number can sit there. */
.rail .project-row { position: relative; }
.rail .project-row .rail-edit-action { position: absolute; right: 6px; top: 50%; margin: -11px 0 0; }
.rail .proj:is(:hover, :focus-within) .project-link:has(+ .rail-edit-action) .count { display: none; }
/* 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 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 { 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: var(--fs-15); }
.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: var(--fs-11); font-family: var(--font-ui); font-variant-numeric: tabular-nums; 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: var(--h1); font-weight: 650; margin: 0 0 14px; letter-spacing: -0.015em; line-height: 1.25; }
.scope-title code { font-family: var(--font-mono); font-size: .92em; font-weight: 600; letter-spacing: 0; padding: .1em .4em; border-radius: 5px; background: var(--tint); overflow-wrap: anywhere; }

/* new-task composer: one field whose right tip starts a task from a template. */
.composer {
  display: flex; margin-bottom: 18px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
.composer:hover { border-color: var(--line-strong); }
.new-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);
}
/* The new-task field is a stand-in: a button that looks like a field and opens the form. */
.composer .new-task-field { padding: 11px 14px; font: inherit; color: var(--ink-3); text-align: left; cursor: text;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.composer .new-task-template { flex: none; width: 48px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink-3); transition: background .12s, color .12s; }
.composer .new-task-template:hover { background: var(--surface-2); color: var(--ink); }
.composer .new-task-template svg { display: block; }
.composer :is(.new-task-field, .new-task-template):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── task row ───────────────────────────────────────────────── */
.task-row {
  display: grid; grid-template-columns: minmax(0, 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:has(> .series-caret) { grid-template-columns: auto minmax(0, 1fr) auto; }
.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-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-12); color: var(--ink-3); font-weight: 500; }
.task-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-12); color: var(--ink-3); margin-top: 3px; }
.task-sub > .chip { white-space: nowrap; }
/* A row's line under its title is as tall with tags as without. */
.task-main > .task-sub { min-height: 22px; }
/* A phone gives the title the row: the dot and stage chip already say where it is. */
@media (max-width: 700px) { .task-row > .task-right > .pipeline { display: none; } }
/* …and the whole title: on a phone it wraps instead of ending in "…". */
@media (max-width: 720px) { .task-row .task-title { white-space: normal; overflow-wrap: break-word; } }
/* 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 .branch { font-family: var(--font-mono); }
.task-right { display: flex; align-items: center; gap: 12px; }
.row-when { color: var(--ink-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 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: var(--fs-12); 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); }
/* The current stage in its status's colour (statusTone). */
.pipeline .seg.current.working { animation: pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pipeline .seg.current.working { animation: none; } }
.pipeline .seg.current.human { background: var(--working); }
.pipeline .seg.current.failed { background: var(--danger); }
.pipeline .seg.current:is(.stopped, .draft) { background: var(--line-strong); }
.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 .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); }

/* A notice on the bell's page (an ask that is not a task's) is a task row;
   row border, padding, and hover/focus treatments come from .task-row. */
.inbox-row { cursor: pointer; }
.inbox-row .task-sub { flex-wrap:wrap; }
/* An ask you have not opened yet: an accent edge, like an unread message. */
.task-row.unread { box-shadow: inset 3px 0 0 var(--accent); }
.task-row.unread .task-title { font-weight: 650; color: var(--ink); }
@media (max-width: 700px) {
  .inbox-row { grid-template-columns:minmax(0, 1fr); }
  .inbox-row .task-right { justify-content:flex-end; gap:10px; }
}
.priority-bars { letter-spacing:1px; }
.inbox-row .urgency-chip { white-space:nowrap; }
/* Priority uses labels and bars, so color is never the only cue. */
.urgency-chip {
  display:inline-block; padding:1px 7px; border-radius:999px;
  font-size:var(--fs-10); font-weight:600;
  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); }
.notify-row .urgency-chip { justify-self:start; font-family:var(--font-ui); font-size:var(--fs-11); text-transform:none; letter-spacing:0; }
.notify-off { display:inline-flex; align-items:center; gap:4px; }
/* Per-urgency behaviour: one row per level, one column per behaviour. */
.notify-grid { overflow-x:auto; display:grid; gap:2px; margin:6px 0 12px; }
.notify-row { display:grid; grid-template-columns:90px repeat(4,minmax(70px,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-2); font-size:var(--fs-12); font-weight:600; 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; }
/* Every page under the project tab bar shares one width, so switching tabs never moves the tabs. */
.main-inner:has(> .tabs) { 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:var(--nav-top); --nav-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-2); font-size:var(--fs-12); font-weight:600; padding:5px 10px 9px; }
.settings-nav a { position:relative; color:var(--ink-2); text-decoration:none; font-size:var(--fs-13); 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(--current-ink); background:var(--rail-current); font-weight:600; }
.settings-nav a.active::before { background:var(--current-ink); }
/* Under a project's sticky tabs (45px tall), a section nav sticks below them, not beneath them. */
/* Below the sticky tab bar: its padding, one line of tab text and its rule (45px in the classic look). */
.tabs ~ * .settings-nav { --nav-top:calc(23px + 1.5 * var(--fs-14) + 17px); }
/* 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:var(--h2); font-weight:650; letter-spacing:-.015em; }
.settings-section-title small { display:block; margin-top:3px; color:var(--ink-3); font-size:var(--fs-12h); font-weight:400; letter-spacing:0; line-height:1.45; }
.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-section h2 { margin:1px 0 2px; font-size:var(--h3); font-weight:650; letter-spacing:-.01em; }
.project-config-section p { margin:0; color:var(--ink-3); font-size:var(--fs-12); 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:var(--fs-12); 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:var(--fs-10h); 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; }
.resource-on-demand { display:inline-flex; align-items:center; gap:6px; flex:none; min-height:30px; margin-right:6px; font-size:var(--fs-13); color:var(--ink-2); white-space:nowrap; }
.form-row.form-row-toggle { flex-direction:row; align-items:center; gap:10px; }
.project-resource-main { flex:1; min-width:0; }
/* A phone: the resource's details take the row, its controls go below them. */
@media (max-width: 640px) { .project-resource-row { flex-wrap:wrap; } .project-resource-main { flex-basis:100%; } .resource-on-demand { margin-right:auto; } }
.project-resource-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:5px; color:var(--ink-3); font-size:var(--fs-11); }
.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:var(--fs-12); line-height:1.5; }
.project-help-callout b { color:var(--ink); }
.project-help-callout .callout-mark { color:var(--accent); font-weight:700; }
.vault-risk { display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; padding:10px 12px; border:1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); border-radius:10px; background:var(--danger-weak); color:var(--ink-2); font-size:var(--fs-12); line-height:1.5; }
.vault-risk b { color:var(--ink); }
.vault-risk ul { margin:4px 0; padding-left:18px; }
.vault-risk li + li { margin-top:3px; }
.vault-risk-mark { flex:none; display:grid; place-items:center; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--danger); color:#fff; font-weight:800; line-height:1; }
.vault-risk .info-dot { vertical-align:-1px; }
.vault-import-h { display:flex; align-items:center; gap:6px; margin:16px 0 2px; color:var(--ink-2); font-size:var(--fs-12h); font-weight:600; }
.vault-import-rows { margin-bottom:14px; }
.vault-import-rows .chip.ok { background:var(--merged-weak); color:var(--merged); border-color:transparent; }
.vault-import-rows .conn-secret { flex:1; min-width:140px; max-width:260px; }
.vault-policy-field { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-12); color:var(--ink-2); }
/* A label that is its own field row ("Card name<input>") reads like every other field label. */
.organization-settings:not(.installation-settings, .wiki-page) label.form-row:not(.switch) { color:var(--ink-2); font-size:var(--fs-12); font-weight:600; }
.organization-settings:not(.installation-settings, .wiki-page) label.form-row:not(.switch) > :is(input, select, textarea) { color:var(--ink); font-size:var(--fs-14); font-weight:400; }
#project-secret-paste .form-row > span { color:var(--ink-2); font-size:var(--fs-12); font-weight:600; }
.project-empty { margin:8px 0 14px; padding:14px; border:1px dashed var(--line-strong); border-radius:10px; color:var(--ink-3); font-size:var(--fs-12); 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; }
.git-repos { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.git-repo { display:flex; align-items:center; gap:10px; min-height:40px; padding:0 6px 0 12px; border-bottom:1px solid var(--line); }
.git-repo-icon { flex:none; display:grid; place-items:center; color:var(--ink-3); }
.git-repo-icon svg { width:15px; height:15px; }
.git-repo-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:var(--fs-13); font-weight:600; text-decoration:none; }
.git-repo-name span { color:var(--ink-3); font-weight:400; }
.git-repo-name.mono { color:var(--ink-2); font-size:var(--fs-12); font-weight:400; }
a.git-repo-name:hover { color:var(--accent); }
.git-repo-remove { flex:none; color:var(--ink-3); font-size:16px; }
.git-repo-add { display:flex; align-items:center; gap:6px; margin:0; padding:6px; background:var(--surface-2); }
.git-repo-add input { flex:1; min-width:0; padding:6px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface); outline:none; }
.git-repo-add input:focus { border-color:var(--accent); }
.git-repo-add input:disabled { background:transparent; }
.git-facts { margin-top:14px; }
/* The add-a-repository combobox: its menu is fixed, so .git-repos' rounded
   clipping never cuts it off. */
.repo-combo { flex:1; min-width:0; }
.repo-combo > input { padding-right:10px !important; }
.repo-combo-menu { position:fixed; right:auto; }
.combo-opt.repo-opt { display:flex; align-items:center; gap:8px; }
.repo-opt-icon { flex:none; display:grid; place-items:center; width:15px; color:var(--ink-3); }
.repo-opt-icon svg { width:14px; height:14px; }
.repo-opt-mark { color:var(--accent); font-weight:700; }
.repo-opt-mark::before { content:'+'; }
.repo-opt-fork .repo-opt-mark::before { content:'⑂'; font-weight:400; }
.repo-opt-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:550; }
.repo-opt-name > span { color:var(--ink-3); font-weight:400; }
.repo-opt-create .repo-opt-name, .repo-opt-fork .repo-opt-name { color:var(--accent); }
.repo-opt-note { flex:none; color:var(--ink-3); font-size:var(--fs-11); }
@media (max-width:560px) {
  .git-repo-add { flex-wrap:wrap; }
  .git-repo-add input { flex-basis:100%; }
}
.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:var(--fs-12); 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:var(--fs-13); }
.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(520px,calc(100vw - 28px)); max-height:calc(100vh - 40px); overflow-y:auto; box-sizing:border-box; }
.new-project-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-4px 0 18px; }
.new-project-head b { font-size:16px; letter-spacing:-.01em; }
.new-project-dialog .form-row > span, .np-h, .np-fold > summary { color:var(--ink-2); font-size:var(--fs-12); font-weight:600; }
.new-project-dialog .form-row input, .new-project-dialog textarea { width:100%; box-sizing:border-box; }
.new-project-dialog textarea { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); outline:none; resize:vertical; font:var(--fs-12)/1.5 var(--font-mono); }
.new-project-dialog textarea:focus { border-color:var(--accent); }
.np-h { margin-bottom:6px; }
.np-default { display:grid; gap:6px; margin:-4px 0 14px; }
.np-default-row { display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--ink-2); font-size:var(--fs-13); }
/* No GitHub: the code is kept on tavya — in a setting row, one paragraph with its tip at the end. */
.no-github { display:inline; }
.no-github .info-dot { vertical-align:baseline; }
/* No GitHub: the code is kept on tavya. One line, as the task form's readiness notice. */
.np-no-github { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:-6px 0 14px; padding:7px 10px;
  border-radius:8px; background:var(--working-weak); color:var(--working); font-size:var(--fs-13); }
.np-no-github[hidden] { display:none; }
.np-no-github .tf-ready-mark { background:var(--working); color:var(--surface); }
.np-no-github-connect { padding:0; border:0; background:none; color:inherit; font:inherit; font-weight:600; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; }
.np-default-row input { flex:none; margin:0; accent-color:var(--accent); }
.np-default-row code { padding:1px 6px; border-radius:5px; background:var(--surface-2); color:var(--ink); font:12px var(--font-mono); }
.np-default-blank { color:var(--ink-3); }
.np-default-blocked { cursor:default; color:var(--ink-3); }
.np-default-blocked .btn { margin-left:auto; }
.github-connect { display:grid; gap:10px; max-width:440px; }
.github-connect h2 { margin:0; }
.github-connect p { margin:0; line-height:1.5; }
.github-connect-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.np-repos[hidden], .np-default[hidden] { display:none; }
.np-loading { padding:10px 0; color:var(--ink-3); font-size:var(--fs-12); }
.np-github .setting-row { min-height:40px; }
.np-github .setting-label { width:auto; min-width:64px; }
.np-fold { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.np-fold > summary { display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none; }
.np-fold > summary::-webkit-details-marker { display:none; }
.np-fold > summary::before { content:'›'; width:10px; color:var(--ink-3); font-size:16px; line-height:1; transition:transform .12s; }
.np-fold[open] > summary::before { transform:rotate(90deg); }
.np-fold[open] > summary { margin-bottom:8px; }
.np-env .form-row { margin-bottom:10px; }
.new-project-error { margin-top:10px; color:var(--danger); font-size:var(--fs-12); }
.new-project-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
/* A long form scrolls under its actions, which stay in reach. */
.new-project-dialog .new-project-actions { position:sticky; bottom:-18px; margin-bottom:-18px; padding-bottom:18px; background:var(--surface); }
.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:var(--fs-12); 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:var(--fs-11); 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; } .settings-disclosure > summary span { display:none; } .settings-layout { grid-template-columns:1fr; gap:14px; } .settings-nav { position:sticky; --nav-top:0px; 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; } .tabs ~ * .settings-nav { --nav-top:calc(23px + 1.5 * var(--fs-14) + 1px); } }
@media (max-width: 560px) { .project-form-grid { grid-template-columns:1fr; } .project-form-grid .form-row.wide { grid-column:auto; } .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) */

/* ── badges / chips ─────────────────────────────────────────── */
/* A label in the UI face. Chips hold text only, so they are inline blocks and
   ::first-letter can give status chips sentence case (below). */
.chip {
  display: inline-block; vertical-align: middle; font-size: var(--fs-11); line-height: 14px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px; font-family: var(--font-ui); white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
/* Status chips read in sentence case whatever case the label arrives in;
   other chips (capabilities, tags, names) keep their exact text. */
.task-sub > .chip::first-letter, .task-title > .chip::first-letter, .run-row > .chip::first-letter,
.chip.active::first-letter, .chip.waiting::first-letter, .chip.blocked::first-letter,
.chip.failed::first-letter, .chip.done::first-letter, .chip.cancelled::first-letter,
.chip.approval-needed::first-letter { text-transform: uppercase; }
.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; }
/* A step under way (a pull request approved, landing): a pulsing dot says it is moving. */
.chip.live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px;
  border-radius: 50%; background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .chip.live::before { animation: none; } }
/* A task's status (statusHtml): a glyph and its label, no pill — pills are
   tags. The glyph's colour says whose move it is: a person's (amber), nobody's
   because the task carries on by itself (accent: working, or a clock while it
   waits for time, quota or a job), or nobody's because it is over (green,
   red; grey only for what is not alive: a draft, a cancelled task).
   Filled glyphs knock their mark out in the card's colour. */
.status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--fs-12); line-height: 16px;
  font-weight: 500; color: var(--ink-2); white-space: nowrap; --status: var(--ink-3); }
.status > svg { flex: none; color: var(--status); }
.status .mark { fill: none; stroke: var(--surface); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.status .mark-dot { fill: var(--surface); }
.status-label::first-letter { text-transform: uppercase; }
.status:is(.working, .waiting) { --status: var(--accent); }
.status.human { --status: var(--working); color: var(--ink); font-weight: 600; }
.status.done { --status: var(--merged); }
.status.failed { --status: var(--danger); color: var(--danger); font-weight: 600; }
.status.stopped, .status.draft { color: var(--ink-3); }
.status + .status { margin-left: 2px; }
/* The organization home names each row's project. */
/* A row's project: a plain monospace slug, not a chip — it says where a task
   lives, not how it is going, so it never looks like a status. */
.task-project {
  display: inline-block; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-11h); font-weight: 500; color: var(--ink-2);
}
.task-project-org { color: var(--ink-3); font-weight: 400; }

/* The project a new task goes to: its name, with a menu of the organization's
   projects (the task form's "← New task" bar). */
.project-pick-wrap { position: relative; display: inline-flex; flex: none; min-width: 0; }
.project-pick {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: 28px; padding: 0 7px;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer;
}
.project-pick:hover, .project-pick[aria-expanded="true"] { background: var(--surface-2); color: var(--ink-2); }
.project-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.project-pick .task-project { font-size: var(--fs-12h); color: var(--ink); }
.project-pick .project-name, .project-pick-opt .project-name { font-family: var(--font-ui); font-size: var(--fs-13); }
.project-pick.static { display: inline-flex; align-items: center; height: 28px; padding: 0 7px; cursor: default; }
.project-pick-caret { flex: none; }
.project-pick-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 200px; max-width: 320px; max-height: 300px;
  overflow-y: auto; display: grid; gap: 1px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow);
}
.project-pick-menu[hidden] { display: none; }
.project-pick-filter { margin: 0 0 4px; padding: 6px 8px; font-size: var(--fs-13); }
.project-pick-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer;
}
.project-pick-opt[hidden] { display: none; }
.project-pick-opt:hover, .project-pick-opt:focus-visible { background: var(--accent-weak); outline: none; }
.project-pick-opt .task-project { max-width: none; font-size: var(--fs-12h); }
.project-pick-opt[aria-selected="true"]::after { content: '✓'; color: var(--accent); font-size: var(--fs-12); }

/* 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: var(--fs-10); font-weight: 600;
  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: var(--fs-13);
  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-mark:empty { display: none; }
.checkout-row.landed .checkout-mark { color: var(--merged, var(--accent)); }
/* Pull requests to approve, as small boxes at the end of the conversation. */
.pr-asks { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pr-ask { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; font-size: var(--fs-13);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.pr-ask-target { color: var(--ink-3); }
.pr-ask-title { min-width: 0; max-width: 32ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }

/* ── buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-btn); border: 1px solid var(--btn-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(--primary); color: var(--primary-ink); border-color: transparent; }
.btn.primary:hover { background: var(--primary-hover); }
.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: var(--fs-13); }
/* Quiet toolbar action: icon + short label, no chrome until hovered. */
.btn.tool { height: 28px; padding: 0 9px; gap: 6px; border-color: transparent; border-radius: 7px; background: transparent; color: var(--ink-2); font-size: var(--fs-12h); font-weight: 500; white-space: nowrap; }
.btn.tool:hover:not(:disabled) { border-color: transparent; background: var(--surface-2); color: var(--ink); }
.btn.tool[aria-pressed="true"] { background: var(--accent-weak); color: var(--accent); }
.btn.tool svg { flex: none; display: block; }
.btn.tool.icon { width: 28px; padding: 0; justify-content: center; }

/* ── task page ──────────────────────────────────────────────── */
/* A task opens as a page of its own inside #main (.main-inner): fixed head
   (title + tabs) and foot (the workflow's declared actions, visible on every
   tab) around a scrollable body. The page owns the scrolling, so the shell's
   scroll container stops and the inner column unclamps to the full cell —
   tp-head/tp-content re-center their own 960px column against the full-bleed
   head/foot borders. */
.main:has(.task-page) { overflow: hidden; }
.main-inner:has(> .task-page) { max-width: none; padding: 0; height: 100%; }
.task-page { display: flex; flex-direction: column; height: 100%; }

/* Head, body content and foot all share ONE column: max-width 960 incl. 28px
   side padding, centered — so the title, meta, tabs, section content and the
   action buttons line up on the same left edge (the strips stay full-bleed). */
.tp-head { padding: 14px 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.tp-head > * { max-width: 960px; margin-left: auto; margin-right: auto; padding: 0 28px; }
.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: var(--fs-13); }
/* Where the task lives: project › parent task, one quiet line above the title. */
.tp-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-12); line-height: 18px; color: var(--ink-3); }
.tp-crumb {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0; border: 0; background: transparent; font: inherit; color: var(--ink-2); font-weight: 500;
  text-decoration: none; cursor: pointer; transition: color .12s;
}
.tp-crumb.tp-project { flex: none; max-width: 40%; }
.tp-crumb:hover { color: var(--accent); }
.tp-crumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.tp-crumb-sep { flex: none; color: var(--ink-3); }
.tp-crumb.tp-pr, .tp-crumb.tp-pr:hover { flex: none; cursor: default; color: var(--ink-3); font-weight: 400; }
.tp-head .meta { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: var(--fs-12); color: var(--ink-3); font-family: var(--font-ui); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.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; }

/* The task page proper: a top line (where it is · its stage · its pull
   requests), the title, then one toolbar (the two views, the conversation's
   tools, the details rail); under them the conversation column beside the
   details rail. The thread and its dock share one centred column. */
.tp-head.wide { padding: 6px 20px 8px; }
.tp-head.wide > * { max-width: none; padding: 0; }
.tp-topline { display: flex; align-items: center; gap: 10px; min-height: 24px; margin-bottom: 2px; font-size: var(--fs-12); }
.tp-head.wide > .tp-topline { padding-left: 44px; } /* the project lines up with the task number */
.tp-topline > .tp-crumbs { flex: 1 1 auto; }
.tp-status { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.tp-stage { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.tp-stage .pipeline .seg { width: 12px; height: 4px; }
.tp-stage .pipeline .ponr { width: 7px; height: 7px; }
/* Several pull requests fold into "PRs N"; the list drops below it. */
.tp-prs { position: relative; flex: none; }
.tp-prs > summary { list-style: none; cursor: pointer; }
.tp-prs > summary::-webkit-details-marker { display: none; }
.tp-prs-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 35;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  width: max-content; max-width: min(380px, calc(100vw - 24px)); padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow);
}
.tp-prs-menu .pr-link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 40px; padding: 5px 14px 5px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.tp-bar-fill { flex: 1; }
.tp-bar .ck-tools { margin-right: 0; }
.tp-bar .tool-sep { flex: none; width: 1px; height: 16px; background: var(--line); }
.tp-views { flex: none; }
.tp-views .tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 24px; padding: 0 10px; margin: 0; border: 0; border-radius: 6px; color: var(--ink-3); font-size: var(--fs-12h); font-weight: 500; text-decoration: none; }
.tp-views .tab svg { display: block; flex: none; }
.tp-views .tab:hover { color: var(--ink); }
.tp-views .tab.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
.tp-rail-toggle { flex: none; }
.task-page:not(.rail-closed) .tp-rail-toggle { color: var(--accent); }
.tp-main { flex: 1; min-height: 0; display: flex; position: relative; }
.tp-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-col .tp-content { max-width: 900px; padding: 20px 20px 48px; }
.tp-col .tp-foot-inner { max-width: 900px; padding: 0 20px; }
/* Under the conversation the actions join the composer's dock. */
.tp-body[data-tab="checkin"] + .tp-foot { border-top: 0; padding: 0 0 12px; background: var(--surface); }
/* Under the conversation the actions line up with its reading column. */
.tp-body[data-tab="checkin"] + .tp-foot > .tp-foot-inner { max-width: calc(var(--read-width) + 40px); }
.tp-foot:has(.tp-foot-inner:empty) { display: none; }

.tp-rail { width: 296px; flex: none; overflow-y: auto; border-left: 1px solid var(--line); background: var(--surface); }
.task-page.rail-closed .tp-rail { display: none; }
.rail-inner { display: flex; flex-direction: column; padding: 6px 0 16px; }
.rail-sec { padding: 12px 16px; border-top: 1px solid var(--line); }
.rail-inner > :first-child { border-top: 0; }
.rail-h, .tp-rail .section-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--ink-2); font-size: var(--fs-12); font-weight: 600; }
.rail-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 8px; color: var(--ink-3); font-size: var(--fs-12); }
.rail-meta .mono { font-family: var(--font-mono); }
.tp-rail .org-editor { margin-top: 0; }
#task-notes { width: 100%; box-sizing: border-box; min-height: 52px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--ink); font: var(--fs-13)/1.45 var(--font-ui); resize: vertical; }
#task-notes:focus { background: var(--surface); }
#tf-notes { width: 100%; box-sizing: border-box; }
.rail-links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px 0; border-top: 1px solid var(--line); }
.rail-link { justify-content: flex-start; }
.rail-link-count { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-11); color: var(--ink-3); }
.rail-link.pending, .rail-link.pending .rail-link-count { color: var(--working); font-weight: 600; }
/* The shell, last: a quiet row like the links above it. */
.rail-links .ck-terminal-item { align-self: stretch; margin: 0; border-radius: var(--r-sm); font-size: var(--fs-12h); }
.rail-links .ck-terminal-open { padding: 5px 6px 5px 4px; }
.rail-links .ck-terminal-open svg { color: var(--ink-3); }
/* Attempts head the rail, one per row. */
.tp-rail .attempts { flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
.tp-rail .attempts-list { flex-direction: column; gap: 4px; padding: 0; overflow: visible; }
.tp-rail .attempt-card { display: flex; width: 100%; box-sizing: border-box; }
.tp-rail .attempt-add { align-self: flex-start; }
.rail-new-attempt { padding-top: 8px; padding-bottom: 8px; }
/* The agents working in a shared conversation, each with its Stop. */
.ck-agent { gap: 5px; padding-right: 3px; }
.ck-agent .ck-stop { width: 18px; height: 18px; border-radius: 999px; }
.conversation-presence.queued .presence-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.ck-switch { width: auto; max-width: 220px; }
/* Delegated and forked work and branches: rail sections whose rows open the
   task; each row's chip is its status, as in the task list. */
.subtask-list, .fork-tree { margin: 0 -8px; }
.rail-count { color: var(--ink-3); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.rail-warn { color: var(--danger); }
.checkout-target { color: var(--ink-3); }
.checkout-row > .chip { margin-left: auto; }
.tp-rail .checkout-row { flex-wrap: wrap; gap: 6px 10px; font-size: var(--fs-12); }
.rail-widgets .task-sub { flex-wrap: wrap; font-size: var(--fs-12); }
details.rail-widgets > summary { cursor: pointer; list-style: none; margin: 0; }
details.rail-widgets > summary::-webkit-details-marker { display: none; }
details.rail-widgets > summary::after { content: '›'; margin-left: auto; font-size: var(--fs-15); line-height: 1; letter-spacing: 0; transition: transform .15s; }
details.rail-widgets[open] > summary { margin-bottom: 6px; }
details.rail-widgets[open] > summary::after { transform: rotate(90deg); }
.rail-count { font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.rail-widgets .wk-title { margin-top: 4px !important; }

.review-info iframe { display: block; width: 100%; height: 360px; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.review-warn { margin-top: 5px; color: var(--warn, #c60); font-weight: 600; font-size: var(--fs-12h); }
.msg.system.error { align-self: stretch; max-width: none; padding: 9px 12px; border: 1px solid var(--danger); border-radius: 8px; background: var(--danger-weak); color: var(--ink); font-style: normal; font-size: var(--fs-12h); }
.msg.system.error .msg-text { white-space: pre-wrap; font-size: var(--fs-13); line-height: 1.5; }
.palette.ah-dialog { width: min(720px, 94vw); }
.ah-dialog .ah-body { max-height: 70vh; overflow-y: auto; padding: 12px 16px 16px; }

/* Narrow windows: the rail floats over the conversation while open. */
@media (max-width: 1099px) {
  .tp-rail { position: absolute; inset: 0 0 0 auto; z-index: 30; width: min(320px, 88vw); box-shadow: var(--shadow); }
}

/* ── 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 projects rail
   (232px; on a phone, hidden behind its 52px bar) stays 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: var(--shell-top); 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: 8px 10px; }
.tf-head h2 { margin: 0; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.tf-crumb { color: var(--ink-3); font-size: var(--fs-13); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The save note, template and workflow sit at the end; the group (not the
   note, which is hidden while empty) holds them there, so they stay put. */
.tf-head-end { margin-left: auto; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.tf-savestate { flex: none; }
/* Attempt switcher in the Edit draft bar: the task page's cards, minus the crown. */
.tf-attempts { flex: 0 100 auto; margin-left: 4px; } /* scrolls before the crumb truncates */
.tf-attempts .attempt-card { padding-right: 10px; }
.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 { 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: var(--fs-12); 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: var(--fs-11); 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: var(--fs-12); }
/* What the task still needs to start (an agent account, a computer, compute), as links to set it up:
   one line at the top of the form, seen before anything is written. */
.tf-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 14px;
  padding: 8px 12px; border-radius: 8px; background: var(--working-weak); color: var(--working); font-size: var(--fs-13); }
.tf-ready[hidden] { display: none; }
.tf-ready a { color: var(--working); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tf-ready .tf-ready-mark { background: var(--working); color: var(--surface); }
.tf-ready-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--working-weak); font-size: var(--fs-11); font-weight: 700; }
/* A task waiting for approval: what it asks for, and Approve/Deny, above its form. */
.tf-approval { background: var(--working-weak); border-bottom: 1px solid var(--line); }
.tf-approval[hidden] { display: none; }
.tf-approval-row { max-width: 1120px; margin: 0 auto; padding: 11px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tf-approval-row + .tf-approval-row { border-top: 1px solid var(--line); }
.tf-approval-row .tf-ready-mark { color: var(--surface); background: var(--working); }
.tf-approval-main { flex: 1 1 320px; min-width: 0; }
.tf-approval-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 600; }
.tf-approval-what a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tf-approval-reason { margin-top: 2px; color: var(--ink-2); font-size: var(--fs-12h); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tf-approval-actions { display: flex; align-items: center; gap: 6px; }
@media (max-width: 900px) {
  .tf-columns { grid-template-columns: 1fr; }
  .tf-approval-row { padding-left: 16px; padding-right: 16px; }
  .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; }
  .tf-foot-inner { flex-wrap: wrap; }
  .tf-ready { gap: 4px 12px; }
  .tf-ready-sep { display: none; }
}
@media (max-width: 720px) {
  .task-form-page { left: 0; } /* the rail is hidden */
  /* A phone: the template and workflow wrap under the title, never off-screen. */
  .tf-head-inner { flex-wrap: wrap; }
  .tf-head .tf-crumb { display: none; }
}

/* Chat view: a chat-style pane — the thread scrolls, the compose box stays put.
   Its agents and the terminal are picked in the details rail. */
.tp-body[data-tab="checkin"] { overflow: hidden; }
.tp-body[data-tab="checkin"] > .tp-content { max-width: none; padding: 0; height: 100%; }
.ck-layout { height: 100%; }
.ck-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; cursor: pointer; color: var(--ink-2); font-size: var(--fs-13); }
.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-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-11); 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; position: relative; }
/* Find in conversation: a floating bar over the thread's top right, like a browser's. */
.ck-find { position: absolute; top: 10px; right: 18px; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.ck-find input { width: min(240px, 46vw); border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-14); }
.ck-find-count { min-width: 3.2em; padding: 0 6px; text-align: right; color: var(--ink-3); font: var(--fs-11)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.ck-find.empty .ck-find-count { color: var(--danger); }
.ck-find .btn.tool.icon { width: 28px; height: 28px; padding: 0; justify-content: center; }
.ck-find-prev svg { transform: rotate(-90deg); }
.ck-find-next svg { transform: rotate(90deg); }
::highlight(conversation-search) { background-color: color-mix(in srgb, var(--attention) 30%, transparent); color: inherit; }
::highlight(conversation-search-current) { background-color: var(--attention); color: var(--attention-ink); }
@media (max-width: 700px) { .ck-find { left: 12px; right: 12px; } .ck-find input { flex: 1; width: auto; } }
/* Conversation focus view stays below dialogs, menus and notifications. */
/* Full screen keeps the conversation, its toolbar and its composer. */
.task-page:has(.ck-pane.ck-fullscreen) { position: fixed; inset: 0; z-index: 40; height: var(--visible-height, 100%); background: var(--paper); }
.task-page:has(.ck-pane.ck-fullscreen) :is(.tp-head, .tp-rail, .tp-foot, .tp-views, .tp-rail-sep, .tp-rail-toggle) { display: none; }
.ck-pane-head { display: flex; align-items: center; gap: 10px; padding: 6px 20px; min-height: 40px; box-sizing: border-box; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.ck-tools { display: inline-flex; align-items: center; gap: 2px; margin-right: -6px; }
.ck-tools .tool-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--line); }
/* A phone: the tools as icons (each names itself in its tooltip), one line. */
@media (max-width: 700px) {
  .ck-tools .tool-label, .tp-views .tool-label { display: none; }
  .tp-views .tab { width: 32px; padding: 0; }
  .ck-tools .btn.tool { width: 32px; padding: 0; justify-content: center; }
  .ck-pane-head { padding: 4px 12px; }
  .tp-bar .ck-tools .btn.tool { width: 30px; }
  /* The stage on the top line already says it; the dot keeps the toolbar one line. */
  .tp-bar .conversation-presence { padding: 2px 4px; }
  .tp-bar .conversation-presence .presence-label { display: none; }
}
/* 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: 28px 24px 36px; background: var(--surface); }
.ck-thread:focus, .ck-thread:focus-visible { outline: none; }
.ck-thread > .thread { max-width: var(--read-width); margin: 0 auto; }
/* A long draft takes at most half the pane: the message box yields its height
   (it scrolls inside), so Send and the latest messages stay on screen however
   short the pane gets — a phone with its keyboard open, or turned sideways. A
   grid row, unlike a nested flex column, gives the box a definite height to yield. */
.ck-compose {
  flex: 0 1 auto; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-height: 0; max-height: 50%;
  border-top: 1px solid var(--line); padding: 10px 20px; background: var(--surface);
}
.ck-compose .followup-box { min-height: 0; width: 100%; margin-top: 0; max-width: var(--read-width); margin-left: auto; margin-right: auto; }
.ck-compose .followup-box > .prompt-field { align-self: stretch; min-height: 0; }
.ck-compose .prompt-field > .wiki-ref-editor { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 38px; }
.ck-compose .followup-input { flex: 0 1 auto; font-size: 16px; line-height: 1.5; }
.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-handoff-scrim pre.raw { white-space: pre-wrap; overflow-wrap: anywhere; }
.local-handoff-scrim .palette { display: flex; flex-direction: column; max-height: calc(100dvh - 14vh - 16px); }
.local-handoff-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; }
.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: var(--fs-12); color: var(--ink-2); font-weight: 600; margin: 18px 0 8px; }
.section-h:first-child { margin-top: 0; }

.subtask-row, .fork-row {
  appearance: none; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 10px; padding: 6px 8px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer;
  transition: background .12s, transform .04s;
}
.subtask-draft { display: flex; align-items: center; gap: 8px; }
.subtask-draft > .subtask-row { flex: 1; min-width: 0; }
.subtask-draft > .btn { flex: none; margin-right: 8px; }
.subtask-row:hover, .fork-row:hover { background: var(--surface-2); }
.subtask-row:active, .fork-row:active { transform: translateY(1px); }
.subtask-row:focus-visible, .fork-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.subtask-identity, .fork-identity { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.subtask-title, .fork-title { max-width: 100%; min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.subtask-title strong, .fork-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); font-weight: 600; }
.subtask-title .task-num, .fork-title .task-num { flex: none; font-size: var(--fs-11); }
.subtask-copy .chip, .fork-state .chip { padding: 0 6px; font-size: var(--fs-10); line-height: 16px; }
.subtask-copy .chip + .chip, .fork-state .chip + .chip { margin-left: 4px; }
.subtask-copy .status, .fork-state .status { font-size: var(--fs-11); }
.subtask-arrow, .fork-arrow { color: var(--ink-3); font-size: 16px; line-height: 1; transition: transform .12s, color .12s; }
.subtask-row:hover .subtask-arrow, .fork-row:hover .fork-arrow { color: var(--accent); transform: translateX(2px); }
/* Forks of forks nest under the task they were forked from. */
.fork-tree { list-style: none; padding: 0; }
.fork-tree .fork-tree { margin: 0 0 0 16px; padding: 0 0 0 8px; border-left: 1px solid var(--line); }
.fork-tree-item { margin: 0; padding: 0; }


/* thread — a reading surface (Gemini-like): the agent's answers are prose on
   the page, unboxed, at body size; a person's turn is a soft tinted bubble on
   the right. One measure (--read-width, ~80 characters of Inter at 16px) for the thread
   and the composer under it. Cards remain only for what asks for action
   (input requests, review, approvals) or is set apart (explanations). */
.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(--bubble); color: var(--ink); border-radius: 20px; padding: 10px 18px; }
.msg.agent { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); }
.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-radius: 12px; padding: 12px 16px; }
.msg.explanation .role { color: var(--accent); }
.explanation-model { color: var(--ink-3); font: var(--fs-10)/1.2 var(--font-ui);  font-variant-numeric: tabular-nums; }
.msg.system { align-self: center; background: transparent; color: var(--ink-3); font-size: var(--fs-13); font-style: italic; }
.msg-text { white-space: pre-wrap; }
.msg-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.msg-meta-gap { flex: 1; }
.msg .role { font-size: var(--fs-12h); font-weight: 600; color: var(--ink-2); }
.msg.user .role { color: var(--ink-3); font-weight: 500; }
.msg.input-request { background: var(--accent-weak); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); border-inline-start: 3px solid var(--accent); }
.msg.input-request .msg-meta { margin-bottom: 7px; }
.msg.input-request .role { color: var(--accent); }
/* The conversation pane and the public shared page read at body size. */
.ck-thread > .thread, .shared-thread { gap: 22px; font-size: 16px; line-height: 1.6; }
.ck-thread .msg.agent:not(.input-request, .review-info, #task-approval-requests), .shared-thread .msg.agent { align-self: stretch; max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; }
.ck-thread .msg.user, .shared-thread .msg.user { max-width: min(85%, 600px); }
.ck-thread .msg.input-request, .ck-thread .msg.agent.review-info, .ck-thread #task-approval-requests { align-self: stretch; max-width: none; padding: 14px 18px; border-radius: 12px; }
.ck-thread .msg.system { font-size: var(--fs-13h); }
.ck-thread .msg.agent:not(.input-request) > .explain-tools, .shared-thread .explain-tools { margin-top: 4px; padding-top: 0; border-top: 0; }
/* Another agent speaking in a shared conversation: a quiet rule, not a box. */
.ck-thread .msg.agent.other-agent:not(.input-request) { padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.msg.review-info { padding: 7px 10px; font-size: var(--fs-12); }
.ck-thread .msg.review-info, .ck-thread #task-approval-requests { font-size: var(--fs-14); line-height: 1.5; }
@media (max-width: 700px) { .ck-thread { padding: 20px 16px 28px; } .ck-thread .msg.user { max-width: 88%; } }
.review-info-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; }
.review-info-line .role { flex-shrink: 0; }
.review-info-caption { white-space: pre-wrap; }
.review-info .review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.review-info #review-action-out { max-height: 180px; overflow: auto; margin: 5px 0 0; }
/* Review files: a gallery of thumbnails (images, videos) and file tiles. */
.review-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; width: 100%; margin: 4px 0 6px; }
.review-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.review-tile-media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); transition: border-color .15s, box-shadow .15s; }
.review-tile:hover .review-tile-media, .review-tile:focus-visible .review-tile-media { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.review-tile:focus-visible { outline: none; }
.review-tile-media > img, .review-tile-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.review-tile-file { color: var(--ink-3); font: 700 var(--fs-13)/1 var(--font-mono); letter-spacing: .06em; }
.review-tile-play { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; padding-left: 3px; border-radius: 50%;
  background: rgb(0 0 0 / .55); color: #fff; font-size: var(--fs-13); }
.review-tile-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12h); color: var(--ink-2); }
.review-tile:disabled { opacity: .6; cursor: progress; }
@media (max-width: 640px) { .review-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.msg time { color: var(--ink-3); font-size: var(--fs-12); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agent-activity time { color: currentColor; opacity: .58; font: var(--fs-10)/1.2 var(--font-ui); white-space: nowrap;  font-variant-numeric: tabular-nums; }

/* 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; }
.tex-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 24px; margin-left: 4px; padding: 2px 5px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ink-2); cursor: pointer; }
.tex-toggle:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tex-toggle[aria-pressed="true"] { color: color-mix(in srgb, var(--accent) 85%, var(--ink)); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.tex-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tex-toggle:disabled { opacity: .45; cursor: default; }
/* Outside a conversation the TeX button sits at the end of its row. */
.wiki-uncond-head .grow, .wiki-body-bar .grow { flex: 1; }
.inline-form > .tex-toggle { margin-left: auto; }
.tex-mark { font: var(--fs-15)/1 Georgia, 'Times New Roman', serif; letter-spacing: -.08em; padding-right: .08em; }
.tex-mark > span { display: inline-block; position: relative; top: .2em; font-size: .8em; margin-left: -.08em; margin-right: -.03em; }
.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 (messages, wiki pages). Spacing is in em so it follows
   the surface's size; the rhythm is one paragraph gap between blocks, more
   above a heading than below it so it binds to its own section. */
.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 .75em; text-wrap: pretty; }
.msg-text.md .md-h { margin: 1.25em 0 .45em; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; }
.msg-text.md h1.md-h { font-size: 1.4em; }
.msg-text.md h2.md-h { font-size: 1.25em; }
.msg-text.md h3.md-h { font-size: 1.1em; }
.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 .75em; 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: .25em 0; }
.msg-text.md .md-list li::marker { color: var(--ink-3); }
/* Nested lists hug their parent item; only the outermost list carries margin. */
.msg-text.md .md-list .md-list { margin: .25em 0 0; }
/* Loose lists (blank lines between items) breathe a little more. */
.msg-text.md .md-loose > li { margin: .5em 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 .75em; padding: 0 0 0 1em; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.msg-text.md .md-hr { border: 0; border-top: 1px solid var(--line); margin: 1.25em 0; }
.msg-text.md a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.msg.agent .msg-text.md a, .msg.user:not(.platform) .msg-text.md a, .wiki-md a { color: var(--accent); }
.msg-text.md .md-inline { font-family: var(--font-mono); font-size: .875em; padding: .1em .35em; border-radius: 5px; background: var(--tint); }
/* An agent's form (web/markdown.js renderForm): a box, because it asks for
   action. Labels above controls, one column, the submit at the end — the
   pattern people fill fastest. A quick question is a row of answers. */
.ask-form {
  display: grid; gap: 14px; margin: .5em 0 1em; padding: 16px 18px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface);
  font-size: var(--fs-14); line-height: 1.45;
}
.ask-form.quick { gap: 10px; padding: 0; border: 0; background: none; }
.ask-form.quick:not(.live) .ask-quick { opacity: .6; }
.ask-form:not(.live) { background: transparent; border-style: dashed; }
.ask-form:not(.live) :is(.ask-label, .ask-option, .ask-toggle) { color: var(--ink-3); }
.ask-title { font-weight: 650; font-size: var(--fs-15); }
.ask-field { display: grid; gap: 6px; min-width: 0; }
.ask-label { font-weight: 600; color: var(--ink); }
.ask-optional { font-weight: 400; color: var(--ink-3); font-size: var(--fs-12); }
.ask-hint { color: var(--ink-3); font-size: var(--fs-12); margin-top: -3px; }
.ask-input {
  width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-field);
  background: var(--surface-2); color: var(--ink); font: inherit;
}
textarea.ask-input { resize: vertical; min-height: 4.5em; }
.ask-input:focus { outline: 2px solid var(--accent-weak); border-color: var(--accent); background: var(--surface); }
.ask-input.ask-secret { font-family: var(--font-mono); letter-spacing: .04em; }
.ask-options { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-option { position: relative; display: inline-flex; cursor: pointer; }
.ask-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.ask-option > span {
  display: grid; gap: 1px; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink); font-weight: 500;
}
.ask-option small { color: var(--ink-3); font-size: var(--fs-11); font-weight: 400; }
.ask-option:hover > span { border-color: var(--ink-3); }
.ask-option input:checked + span { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--surface-2); font-weight: 600; }
.ask-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ask-option input:disabled + span { cursor: default; opacity: .7; }
.ask-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.ask-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-quick .btn { font-weight: 600; }
.ask-quick .btn:not(:disabled):hover { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.ask-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.ask-note { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--ink-2); font-size: var(--fs-12); }
.ask-note svg { flex: none; color: var(--merged); }
.ask-note b { font-weight: 600; color: var(--ink); }
.ask-error { color: var(--danger); font-size: var(--fs-12); }
.ask-form:not(.live) .ask-actions .btn { display: none; }
.ask-form:not(.live) .ask-actions:not(:has(.ask-note)) { display: none; }
/* A form the agent got wrong: what is wrong, its source one click away. */
.ask-form-problem { margin: .5em 0 1em; color: var(--ink-2); font-size: var(--fs-13); }
.ask-form-problem > summary { cursor: pointer; }
.msg-text.md .md-code { margin: .25em 0 1em; padding: 12px 16px; border-radius: 12px; overflow-x: auto; background: var(--tint); }
.msg-text.md .md-code code { font-family: var(--font-mono); font-size: max(12px, .82em); line-height: 1.6; white-space: pre; }
.msg.user .msg-text.md .md-code, .msg.user .msg-text.md .md-inline { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.msg-text.md .md-math { white-space: normal; }
/* Tables: horizontal rules only — the columns align the eye on their own. */
.msg-text.md .md-table { border-collapse: collapse; margin: .25em 0 1em; display: block; overflow-x: auto; max-width: 100%; font-size: .9375em; line-height: 1.5; }
.msg-text.md .md-table th, .msg-text.md .md-table td { border: 0; border-bottom: 1px solid var(--line); padding: .5em 1.25em .5em 0; text-align: left; vertical-align: top; }
.msg-text.md .md-table th { border-bottom-color: var(--line-strong); font-weight: 600; }
.msg-text.md .md-table tr:last-child td { border-bottom: 0; }

/* 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: var(--fs-12); }
.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: var(--fs-11)/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); }
.agent-activity.stopped .activity-icon { color: var(--ink-3); }
.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 { display: inline-block; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font: var(--fs-10)/1.5 var(--font-ui); }
.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: var(--fs-11); }
.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: var(--fs-11)/1.45 var(--font-mono); }
/* The conversation's outline: the work between what people said and the
   agent's answers to them folds into one line (web/app.js conversationOutline). */
.conv-fold { align-self: stretch; margin: -3px 0; }
.fold-head { display: flex; align-items: center; gap: 8px; width: min(92%, 760px); padding: 5px 10px; border-radius: 8px; color: var(--ink-3); font-size: var(--fs-13); cursor: pointer; list-style: none; user-select: none; }
.fold-head::-webkit-details-marker { display: none; }
.fold-head::after { content: "›"; flex: none; font-size: var(--fs-14); line-height: 1; transition: transform .15s; }
.conv-fold[open] > .fold-head::after { transform: rotate(90deg); }
.fold-head:hover { background: var(--surface-2); color: var(--ink-2); }
.fold-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fold-icon { width: 20px; flex: none; text-align: center; font: var(--fs-12)/1 var(--font-mono); }
.conv-fold.automatic .fold-icon { color: var(--working); }
.fold-label { flex: none; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.fold-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-gap { flex: 1; }
.fold-count { flex: none; font: var(--fs-10h)/1.2 var(--font-ui); white-space: nowrap; opacity: .85;  font-variant-numeric: tabular-nums; }
.fold-body { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px 19px; padding-left: 12px; border-left: 2px solid var(--line); }
/* The work between answers reads a step down from them. */
.ck-thread .fold-body { font-size: var(--fs-14); line-height: 1.55; }
/* Where a forked conversation branched off its source task: a rule naming it. */
.fork-point { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--ink-3); font-size: var(--fs-12); }
.fork-point::before, .fork-point::after { content: ""; flex: 1; border-top: 1px dashed var(--line-strong); }
.fork-point a { display: inline-flex; align-items: center; gap: 6px; max-width: 70%; color: inherit; text-decoration: none; }
.fork-point a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fork-point a:hover { color: var(--ink); }
.fork-point svg { flex: none; width: 13px; height: 13px; }
/* tavya's own prompts to the agent: part of the record, not someone speaking. */
.msg.user.platform { align-self: flex-start; background: transparent; color: var(--ink-2); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 10px 14px; font-size: var(--fs-14); line-height: 1.5; }
.msg.user.platform .role { color: var(--ink-3); }
/* Queued until the task can take it (wiki features/queued-messages). */
.msg.pending { background: transparent; border: 1px dashed var(--line-strong); }
.msg.pending .msg-text { color: var(--ink-2); }
.pending-mark.info-dot { width: auto; height: auto; background: transparent; color: var(--ink-3); }
.pending-mark svg { width: 13px; height: 13px; display: block; }
.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: var(--fs-11); }
.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; white-space: pre-line; }
.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-ui); font-variant-numeric: tabular-nums; }
.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; }
/* The buttons sit beside the text only while the text keeps a readable width; otherwise they wrap below it. */
.approval-request { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.approval-request-main { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.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; flex-wrap: wrap; gap: 6px; }
/* Four or more choices (a credential's Allow once / for this task / always / Deny)
   are a choice to read, not a button beside the text: they take their own line
   under it, so the question keeps the card's width. */
.approval-request-actions:has(> .btn:nth-of-type(4)) { flex-basis: 100%; }
.approval-request-actions .vreq-pick { gap: 8px; max-width: 260px; }
.approval-request-actions .vreq-pick .tf-vault-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-request-actions .vreq-add { font-size: var(--fs-12); white-space: nowrap; }
.approval-request-actions .connection-account { max-width: 200px; padding: 4px 8px; font-size: var(--fs-13); border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.approval-request-help { margin-top: 7px; color: var(--ink-2); font-size: var(--fs-12); }
.approval-request-warn { margin-top: 7px; color: var(--danger); font-size: var(--fs-12); }
.approval-request-warn.caution { color: var(--ink-2); }
.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); }
.diff { font-family: var(--font-mono); font-size: var(--fs-12); 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: var(--fs-12); 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; min-width: 0; }
.followup-box textarea { min-height: 38px; max-height: 40dvh; overflow-y: auto; }
/* 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: var(--fs-12); 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; }
.events.events-page { max-height: none; }
.events .ev-task { flex: none; color: var(--ink-3); }

/* 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: var(--fs-12); user-select: none; }
pre.raw { font-family: var(--font-mono); font-size: var(--fs-11); 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. */
body:has(#tf-page, .ck-compose) .hosted-onboarding { display: none; }
.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: var(--fs-12); font-weight: 750; }
.onboarding-controls { display: flex; flex: none; gap: 2px; margin: -7px -7px 0 0; }
.onboarding-controls .icon-btn { width: 28px; height: 28px; border-radius: 7px; color: var(--ink-3); }
.onboarding-controls .icon-btn:hover { color: var(--ink); }
.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: var(--fs-12); 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: var(--fs-13); }
.onboarding-step-copy { min-width: 0; }
.onboarding-step-title { display: flex; align-items: center; gap: 8px; min-height: 27px; color: var(--ink); font-size: var(--fs-13); 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: var(--fs-11); line-height: 1.45; }
.onboarding-options { display: grid; gap: 4px; }
.onboarding-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; }
.onboarding-option > div { display: grid; gap: 1px; min-width: 0; }
.onboarding-option b { color: var(--ink); font-size: var(--fs-12); font-weight: 650; }
.onboarding-option small { color: var(--ink-3); font-size: var(--fs-10h); line-height: 1.35; }
.onboarding-option .btn { flex: none; }
.onboarding-option.complete { border-color: transparent; background: var(--merged-weak); }
.onboarding-option.complete b > span { color: var(--merged); }
.onboarding-or { color: var(--ink-3); font-size: var(--fs-10); font-weight: 650; text-align: center; }
.onboarding-optional { display: inline-block; padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-3); font-size: var(--fs-10); font-weight: 600; }
.onboarding-foot { display: flex; align-items: center; gap: 12px; margin-top: 5px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-10); }
.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:not(.onboarding-complete):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-of-type { display: grid; gap: 1px; }
.onboarding-complete { cursor: default; }
.onboarding-complete .icon-btn { margin-left: auto; flex-shrink: 0; }
.onboarding-minimized b { font-size: var(--fs-12); }
.onboarding-minimized small { color: var(--ink-3); font-size: var(--fs-10); }
@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-2); font-size:var(--fs-12); font-weight:650; }
.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:var(--fs-12); }
.remote-state { display:inline-flex; padding:3px 9px; border-radius:999px; background:var(--working-weak); color:var(--working); font-size:var(--fs-11); font-weight:700; }
.remote-state.ready { background:var(--merged-weak); color:var(--merged); }
.phone-access-url { overflow-wrap:anywhere; font-size:var(--fs-12); }
.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:var(--fs-12); 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:var(--fs-12); }
.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:var(--fs-12); }
.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:var(--fs-11); }
.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:var(--fs-11); line-height:1.55; }
.phone-troubleshooting { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); color:var(--ink-2); font-size:var(--fs-12); }
.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:var(--fs-11); }
.phone-installed { color:var(--merged); font-weight:650; font-size:var(--fs-12); }
.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-ui); font-variant-numeric: tabular-nums; 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; }
/* Agent work (wiki features/quota-scheduling): sub-tasks nested in their tree, the held-back divider, pins. */
.work-subs { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.has-row-link .work-sub { position: relative; z-index: 2; }
.work-sub { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; font-size: var(--fs-13); color: var(--ink-2); }
.work-sub[draggable="true"] { cursor: grab; }
.work-sub.dragging { opacity: 0.4; }
.work-sub .work-sub-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-divider { margin: 10px 0 8px; font-size: var(--fs-12); color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.work-divider::before, .work-divider::after { content: ''; flex: 1; border-top: 1px dashed var(--line); }
.work-pin { border: 0; background: none; cursor: pointer; font-size: var(--fs-13); padding: 2px 4px; opacity: 0.8; }
.work-pin:hover { opacity: 1; }
.queue-actions { display: flex; gap: 6px; }
.queue-domain { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-12); 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-ui); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat .l { font-size: var(--fs-12); color: var(--ink-3); margin-top: 2px; }
/* ── insights: the organization's flow of work ───────────────── */
.main-inner:has(> .insights) { max-width: 1240px; }
.ins-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ins-head .page-title { margin: 0; }
.ins-seg { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.ins-seg button { border: 0; background: none; padding: 3px 10px; border-radius: 6px; font-size: var(--fs-12); font-weight: 550; color: var(--ink-3); cursor: pointer; font-family: var(--font-mono); }
.ins-seg.sm button { font-family: var(--font-ui); }
.ins-seg button:hover { color: var(--ink); }
.ins-seg button.on { background: var(--accent-weak); color: var(--accent); }
.ins-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The hero is the product's signature — the stage pipeline — at org scale:
   one continuous track, each stage's bar split into agent / person / queued,
   ending in what shipped. */
.ins-flow { padding: 18px 18px 12px; }
.ins-track { display: flex; gap: 3px; align-items: flex-end; }
.ins-node { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ins-node-n { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 650; letter-spacing: -0.03em; line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.ins-node.zero .ins-node-n { color: var(--ink-3); font-weight: 450; }
.ins-node-bar { height: 8px; display: flex; gap: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.ins-node:first-child .ins-node-bar { border-radius: 4px 2px 2px 4px; }
.ins-node-bar i { display: block; min-width: 3px; }
.ins-node-bar i.w { background: var(--accent); }
.ins-node-bar i.h { background: var(--working); }
.ins-node-bar i.q { background: var(--line-strong); }
.ins-node-name { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-11); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-node:not(.zero) .ins-node-name { color: var(--ink-2); }
.ins-node.shipped { flex: 1.25; margin-left: 10px; }
.ins-node.shipped .ins-node-bar { background: var(--merged); border-radius: 2px 4px 4px 2px; }
.ins-node.shipped .ins-node-n { color: var(--merged); }
.ins-node.shipped.zero .ins-node-bar { background: var(--line); }
.ins-node.shipped.zero .ins-node-n { color: var(--ink-3); font-weight: 450; }
.ins-node.shipped.zero .ins-node-name { color: var(--ink-3); font-weight: 500; }
.ins-node.shipped .ins-node-name { color: var(--merged); font-weight: 600; }
.ins-node.shipped .ins-delta { font-size: var(--fs-12); letter-spacing: 0; }
.ins-flow-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-12); color: var(--ink-2); }
.ins-flow-foot span { display: inline-flex; align-items: center; gap: 6px; }
.ins-flow-foot .warn { color: var(--danger); }
.ins-flow-foot .muted { color: var(--ink-3); }
.ins-key { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ins-key.w { background: var(--accent); }
.ins-key.h { background: var(--working); }

.ins-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ins-kpi { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 12px 14px; min-width: 0; }
.ins-kpi-l { font-size: var(--fs-12); color: var(--ink-3); }
.ins-kpi-n { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin: 2px 0 2px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ins-kpi-s { font-size: var(--fs-11); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-delta { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-11); color: var(--ink-3); font-weight: 500; }
.ins-delta.good { color: var(--merged); }
.ins-delta.bad { color: var(--danger); }

.ins-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ins-col { display: flex; flex-direction: column; min-width: 0; }
.ins-card { padding: 14px 16px; min-width: 0; }
.ins-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; min-height: 26px;
  font-size: var(--fs-13); color: var(--ink); font-weight: 600; }
.ins-count { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-12); color: var(--ink-2); letter-spacing: 0; }
.ins-more { font-weight: 500; font-size: var(--fs-12); color: var(--ink-3); text-decoration: none; }
.ins-more:hover { color: var(--accent); }
.ins-empty { font-size: var(--fs-12); color: var(--ink-3); padding: 4px 0; }

.ins-chart .ins-card-h { font-weight: 500; font-size: var(--fs-12); color: var(--ink-3); flex-wrap: wrap; }
.ins-plot { position: relative; height: 188px; }
.ins-svg { display: block; overflow: visible; touch-action: pan-y; }
.ins-svg .grid { stroke: var(--line); stroke-width: 1; }
.ins-svg .grid.base { stroke: var(--line-strong); }
.ins-svg .tick { fill: var(--ink-3); font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-10); }
.ins-svg .ins-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ins-svg .ins-hover { fill: var(--ink); opacity: .05; pointer-events: none; }
.ins-svg .ins-hover-dot { stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.ins-svg .ins-empty-t { fill: var(--ink-3); font-size: var(--fs-12); }
.ins-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-12); color: var(--ink-2); }
.ins-legend span { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-legend i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ins-legend i.line { height: 2px; width: 12px; border-radius: 1px; }
.ins-tip { position: absolute; top: 6px; min-width: 150px; pointer-events: none; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; font-size: var(--fs-12); z-index: 2; }
.ins-tip-h { font-weight: 600; margin-bottom: 4px; }
.ins-tip div:not(.ins-tip-h) { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.ins-tip div span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.ins-tip i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ins-tip b { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

.ins-task { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line); font-size: var(--fs-13); }
.ins-card-h + .ins-task { border-top: 0; padding-top: 0; }
.ins-dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.ins-dot.working { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.ins-dot.waiting { background: var(--working); }
.ins-dot.shipped { background: var(--merged); }
.ins-task-title { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ins-task-title:hover { color: var(--accent); }
.ins-num { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-11); color: var(--ink-3); }
.ins-task-meta { grid-column: 2; font-size: var(--fs-11); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-pr { grid-column: 3; grid-row: 1; font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-11); color: var(--ink-3); text-decoration: none; }
.ins-pr:hover { color: var(--accent); }

.ins-table { width: 100%; border-collapse: collapse; font-size: var(--fs-12); table-layout: fixed; }
.ins-table th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 0 0 6px; font-size: var(--fs-11); }
.ins-table td { padding: 5px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.ins-table .num { text-align: right; font-family: var(--font-ui); font-variant-numeric: tabular-nums; width: 64px; }
.ins-table th.num { font-family: var(--font-ui); }
.ins-table .ins-time-col { width: 76px; }
.ins-table th.ins-spark-col { width: 80px; }
.ins-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-name a { color: var(--ink); text-decoration: none; font-weight: 550; }
.ins-name a:hover { color: var(--accent); }
.ins-spark rect { fill: var(--merged); }
.ins-spark line { stroke: var(--line); }
.ins-model { font-family: var(--font-ui); font-variant-numeric: tabular-nums; display: block; overflow: hidden; text-overflow: ellipsis; }
.ins-unreported { color: var(--ink-3); cursor: help; }
.ins-share { display: block; height: 3px; margin-top: 4px; background: var(--line); border-radius: 2px; overflow: hidden; max-width: 140px; }
.ins-share i { display: block; height: 100%; border-radius: 2px; }

.ins-quota { padding: 6px 0; border-top: 1px solid var(--line); }
.ins-card-h + .ins-quota { border-top: 0; padding-top: 0; }
.ins-quota-name { display: flex; align-items: center; gap: 8px; font-size: var(--fs-12); margin-bottom: 4px; }
.ins-quota-state { font-size: var(--fs-11); color: var(--danger); }
.ins-quota-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) 36px 48px; align-items: center; gap: 8px; font-size: var(--fs-11); color: var(--ink-3); margin: 2px 0; }
.ins-quota-row b { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); text-align: right; }
.ins-quota-row.stale { opacity: .5; }
.ins-quota-bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.ins-quota-bar i { display: block; height: 100%; background: var(--merged); border-radius: 3px; }
.ins-quota-bar.warn i { background: var(--working); }
.ins-quota-bar.crit i { background: var(--danger); }
.ins-quota-reset { font-family: var(--font-ui); font-variant-numeric: tabular-nums; text-align: right; }

/* Limits (quota, credit, budgets, weekly pace) are ink, never a series color. */
.ins-svg .ins-limit line { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ins-svg .ins-limit text { fill: var(--ink-2); font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-10); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.ins-svg .ins-limit { cursor: help; }
.ins-legend i.limit, .ins-tip i.limit { width: 12px; height: 0; border-radius: 0; border-top: 1.5px dashed var(--ink-2); background: none; }
.ins-legend-slot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; justify-content: flex-end; }
.ins-split button { padding: 2px 8px; font-size: var(--fs-11); }
.ins-tip .ins-tip-total { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 3px; }
.ins-tip .ins-tip-extra { color: var(--ink-3); }
.ins-tip .ins-tip-note { display: block; margin-top: 4px; font-size: var(--fs-11); color: var(--ink-3); max-width: 220px; white-space: normal; }
.ins-tag { font-family: var(--font-ui); font-size: var(--fs-10); font-weight: 500; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 2px; cursor: help; }
.ins-foot { margin-top: 8px; font-size: var(--fs-11); color: var(--ink-3); display: flex; gap: 4px 8px; flex-wrap: wrap; }
.ins-foot .warn { color: var(--danger); }
.ins-count.over { color: var(--danger); }
.ins-compute .ins-card-h, .ins-logins .ins-card-h { flex-wrap: wrap; }
.ins-meter { display: flex; gap: 2px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 8px; }
.ins-meter i { display: block; min-width: 2px; }
.ins-kinds { margin-bottom: 6px; font-size: var(--fs-11); }
.ins-kinds span { cursor: help; }
.ins-stack { display: flex; gap: 1px; height: 6px; border-radius: 2px; overflow: hidden; }
.ins-stack i { display: block; min-width: 2px; }
.ins-storage .ins-table td.ins-name { width: 40%; }
.ins-mini { position: relative; margin: 2px 0 4px; }
.ins-mini svg { display: block; overflow: visible; touch-action: pan-y; }
.ins-mini .ins-mini-line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ins-mini .ins-mini-line.dash { stroke-dasharray: 2 3; opacity: .7; }
.ins-mini .ins-mini-limit { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 3; }
.ins-mini .ins-mini-hover { stroke: var(--ink-3); stroke-width: 1; }
.ins-mini .tick { fill: var(--ink-3); font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: 9px; }
.ins-mini .ins-tip { top: auto; white-space: nowrap; }
.ins-mini-key { font-size: var(--fs-10); gap: 2px 8px; margin-left: auto; }
.ins-login-share { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.ins-login-share .ins-share { width: 56px; margin: 0; }
.ins-login-share b { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-11); font-weight: 600; width: 32px; text-align: right; }
.ins-route { display: grid; grid-template-columns: minmax(0, 1fr) 80px 24px; gap: 8px; align-items: center; font-size: var(--fs-12); padding: 4px 0; cursor: help; }
.ins-route .ins-share { margin: 0; }
.ins-route b { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.ins-budget { padding: 4px 0; border-top: 1px solid var(--line); }
.ins-card-h + .ins-budget { border-top: 0; padding-top: 0; }
.ins-budget .ins-quota-name { justify-content: space-between; margin-bottom: 2px; }

.ins-start { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 16px; color: var(--ink-3); font-size: var(--fs-13); }
.ins-skeleton { height: 118px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .ins-enter .ins-node-bar { transform-origin: left; animation: ins-grow .6s cubic-bezier(.2, .7, .2, 1) both; }
  .ins-enter .ins-node:nth-child(2) .ins-node-bar { animation-delay: .05s; }
  .ins-enter .ins-node:nth-child(3) .ins-node-bar { animation-delay: .1s; }
  .ins-enter .ins-node:nth-child(4) .ins-node-bar { animation-delay: .15s; }
  .ins-enter .ins-node:nth-child(5) .ins-node-bar { animation-delay: .2s; }
  .ins-enter .ins-node:nth-child(6) .ins-node-bar { animation-delay: .28s; }
}
@keyframes ins-grow { from { transform: scaleX(0); } }
@media (max-width: 980px) {
  .ins-grid { grid-template-columns: minmax(0, 1fr); }
  .ins-col + .ins-col { order: -1; } /* one column: what needs you now comes first */
}
@media (max-width: 640px) {
  .ins-flow { padding: 14px 12px 10px; }
  .ins-node-n { font-size: 20px; }
  .ins-node.shipped { margin-left: 6px; }
  .ins-node.shipped .ins-delta { display: none; }
  .ins-period { display: none; }
  .ins-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-table .ins-spark-col { display: none; }
}
.form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-row-head { display: flex; align-items: center; gap: 4px; }
.form-row label, .form-row-head { font-size: var(--fs-12); 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: var(--r-field); background: var(--surface-2); outline: none;
}
.form-row input:focus, .form-row select:focus { border-color: var(--accent); }
/* Plan & billing: the plan, then each limit against its use (a thin meter, the
   figures, and the pack stepper that raises it). */
.plan-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:40px; padding-bottom:6px; }
.plan-name { font-size:17px; font-weight:650; letter-spacing:-0.01em; }
.plan-price { font-size:var(--fs-13); font-variant-numeric:tabular-nums; }
.plan-limits .setting-value { flex-wrap:nowrap; gap:10px; font-variant-numeric:tabular-nums; }
.plan-meter { flex:0 1 160px; min-width:64px; height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.plan-meter > i { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.plan-meter.near > i { background:var(--working); }
.plan-meter.over > i { background:var(--danger); }
.pack-stepper { display:inline-flex; align-items:center; gap:2px; font-variant-numeric:tabular-nums; }
.pack-stepper > b { min-width:20px; text-align:center; }
.pack-stepper .setting-muted { min-width:38px; margin-left:4px; font-size:var(--fs-12h); }
.plan-note { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:6px 0; font-size:var(--fs-13); color:var(--ink-2); }
.plan-note.danger { color:var(--danger); }
.plan-note.warn { color:var(--working); }
.plan-note.ok { color:var(--merged); }
.plan-choices { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin-top:14px; }
.plan-choice { display:flex; flex-direction:column; gap:8px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); }
.plan-choice-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.plan-choice-head > span { font-size:16px; font-weight:650; font-variant-numeric:tabular-nums; }
.plan-choice-head small { font-size:var(--fs-12); font-weight:400; color:var(--ink-3); }
.plan-choice ul { margin:0; padding:0; list-style:none; font-size:var(--fs-12h); color:var(--ink-2); display:grid; gap:3px; }
.plan-choice .btn { align-self:flex-start; margin-top:auto; }
.plan-terms { display:flex; align-items:center; gap:6px; margin-top:10px; font-size:var(--fs-12h); }
.plan-checkout-dialog { width: min(400px, calc(100vw - 28px)); display: grid; gap: 12px; }
.plan-checkout-dialog .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-checkout-dialog .plan-checkout-price { margin: 0; }
.plan-checkout-dialog .plan-terms { margin-top: 0; }
.plan-checkout-dialog .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.plan-operator { margin-top:12px; font-size:var(--fs-13); }
.plan-operator > summary { cursor:pointer; color:var(--ink-3); }
.plan-gift-count { width:6em; }
.plan-foot { margin:10px 0 0; font-size:var(--fs-12); }
.plan-limits .warn { color:var(--working); }
.switch { display: flex; align-items: center; gap: 10px; }
.switch input { width: 38px; height: 22px; }
.switch.disabled { opacity: .55; cursor: not-allowed; }
.switch[data-forced] [data-reset] { display: none; }
.policy-acceptance { display:flex; align-items:flex-start; gap:9px; margin:12px 0 14px; color:var(--ink-2); font-size:var(--fs-12); 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:var(--fs-10); color:var(--ink-3); }

/* profile page */
.profile-page { max-width: 720px; }
.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 var(--fs-11)/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:var(--fs-11); 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: 4px 0 20px; }
.profile-identity .page-title { margin: 0; }
.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: var(--fs-13); 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: var(--fs-13); }
.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 0 10px; padding: 16px;
  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: var(--fs-11); 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: var(--fs-12); }
.verify-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; font-size: var(--fs-13);
  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: var(--fs-14); 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; }
.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; }
.github-org-actions > .setting-rows { flex: 1; }
.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: var(--fs-12); 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: var(--fs-11); 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: var(--fs-12);
}
.combo-caret:hover { color: var(--ink); }
/* An audience box reads by name until it is focused (audienceComboHtml). */
.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 { display: block; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: var(--fs-13); color: inherit; text-decoration: none; }
.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: var(--fs-10); font-weight: 400;
  background: none; padding: 0;
}
.combo-opt-description {
  margin-top: 2px; color: var(--ink-3); font-size: var(--fs-11); line-height: 1.35;
  white-space: normal;
}
.combo-empty { padding: 7px 10px; font-size: var(--fs-12); 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: var(--fs-13); animation: rise .2s ease; display: flex; align-items: center; max-width: min(520px, calc(100vw - 32px)); }
.toast.err { background: var(--danger); color: var(--danger-ink); }
/* A task error's exact text, folded under its plain summary. */
.error-details { margin-top:6px; font-size:var(--fs-12); color:var(--ink-3); }
.error-details > summary { cursor:pointer; width:max-content; }
.error-details pre { margin:6px 0 0; padding:8px 10px; border-radius:7px; background:var(--surface-2); color:var(--ink-2); white-space:pre-wrap; word-break:break-word; font:var(--fs-11)/1.5 var(--font-mono); max-height:240px; overflow:auto; }
/* 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: var(--fs-15); }
.palette .opt { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.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: var(--fs-11); 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: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.pal-sub { margin-left: 8px; font-size: var(--fs-11); color: var(--ink-3); }
.pal-empty { padding: 14px 16px; color: var(--ink-3); font-size: var(--fs-13); }

/* 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. */
#gs-list { min-height: 180px; max-height: 52vh; overflow: auto; padding-bottom: 6px; }
.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; }
/* 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.unread.cursor { box-shadow: inset 3px 0 0 var(--accent), 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: var(--fs-10); 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: sections flow into two columns on a wide screen, one on a phone. */
.help-panel { width: min(780px, 94vw); max-height: 80vh; display: flex; flex-direction: column; }
.help-head { display: flex; align-items: center; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.help-grid { overflow: auto; padding: 14px 18px 16px; columns: 2 300px; column-gap: 32px; }
.help-section { break-inside: avoid; padding-bottom: 12px; }
.help-section .section-h { margin: 0 0 4px; }
.help-row { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 3px 0; font-size: var(--fs-13); align-items: baseline; }
.help-row .key { justify-self: start; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; min-width: 22px; text-align: center; white-space: nowrap; }
/* Chord hints: after a prefix key (g, v, .) each control the next key reaches
   wears that key at its top-right corner until the chord completes or lapses. */
#chord-hints { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.chord-hint { position: absolute; transform: translate(-35%, -55%); font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 600; line-height: 1.45;
  padding: 0 5px; min-width: 18px; text-align: center; border-radius: 5px; color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 1px 4px rgba(0,0,0,.25);
  animation: chord-hint-in .12s ease-out; white-space: nowrap; }
@keyframes chord-hint-in { from { opacity: 0; transform: translate(-35%, -25%); } }
@media (prefers-reduced-motion: reduce) { .chord-hint { animation: none; } }

/* ── public landing ─────────────────────────────────────────────────────────
   The landing, Docs, Pricing and Policies (.legal-shell) wear the console's look
   (light or dark, default or classic) through the shared --l-* tokens. The landing
   is quiet: the console's ink pill, its greys, its status colours, Inter. */
body.landing-active { color-scheme: light dark; background: var(--paper); color: var(--ink); overflow: auto; }
html[data-theme="light"] .legal-shell { color-scheme: light; }
html[data-theme="dark"] .legal-shell { color-scheme: dark; }
/* Public documents use normal page scrolling; the console keeps its fixed viewport. */
.landing-active #app, #app:has(> .legal-shell) { display: block; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
/* A public page's plain rendering (src/gateway/public-pages.ts), for readers that run no script.
   The console replaces it as it boots; until then a browser running script shows nothing, as before. */
#app:has(> .prerendered) { display: block; height: auto; overflow: visible; }
.prerendered { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; line-height: 1.6; }
.prerendered nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: 0; list-style: none; }
@media (scripting: enabled) { .prerendered { display: none; } }
.landing-page, .legal-shell {
  --l-bg: var(--paper);
  --l-surface: var(--surface);
  --l-surface-2: var(--surface-2);
  --l-line: var(--line);
  --l-line-strong: var(--line-strong);
  --l-ink: var(--ink);
  --l-ink-2: var(--ink-2);
  --l-ink-3: var(--ink-3);
  --l-accent: var(--accent);
  --l-accent-ink: var(--accent-ink);
  --l-accent-weak: var(--accent-weak);
  /* The analogy's past object: the accent, quieter, still 3:1 as large text. */
  --l-accent-muted: color-mix(in srgb, var(--accent) 78%, var(--paper));
  --l-merged: var(--merged);
  --l-merged-weak: var(--merged-weak);
  --l-attention: var(--attention);
  --l-attention-ink: var(--attention-ink);
  --l-primary: var(--primary);
  --l-primary-ink: var(--primary-ink);
  --l-primary-hover: var(--primary-hover);
  --l-frame-shadow: 0 1px 2px light-dark(rgba(21, 24, 30, .04), rgba(0, 0, 0, .3)), 0 24px 48px -24px light-dark(rgba(21, 24, 30, .16), rgba(0, 0, 0, .55));
  --l-nav: color-mix(in srgb, var(--paper) 85%, transparent);
  --l-wide: min(1120px, calc(100% - 48px));
}
.landing-page {
  --lp-wide: min(1120px, calc(100% - 48px));
  position: relative;
  min-height: 100vh;
  background: var(--l-bg);
  color: var(--l-ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:where(.landing-page) :where(h1, h2, h3, p, ol, ul, figure) { margin: 0; }
:where(.landing-page) :where(ol, ul) { padding: 0; list-style: none; }
:where(.landing-page a) { color: inherit; text-decoration: none; }
.landing-page :focus-visible { outline: 2px solid var(--l-accent); outline-offset: 3px; border-radius: 6px; }
.landing-skip {
  position: fixed; top: 8px; left: 8px; z-index: 98;
  padding: 9px 13px; border-radius: var(--r-btn); background: var(--l-primary); color: var(--l-primary-ink);
  transform: translateY(-150%); transition: transform .15s ease;
}
.landing-skip:focus { transform: translateY(0); }
.landing-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--l-ink); }
.landing-brand .mark { width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 1px 3px rgba(0, 0, 0, .16); }
/* The console's wordmark (.brand .wordmark): Inter's display cut, tracked in. */
.landing-brand span { font-size: 18px; line-height: 1; font-weight: 680; letter-spacing: -.035em; font-variation-settings: "opsz" 32; font-optical-sizing: none; }

/* Navigation: the page's own surface, a hairline under it. */
.landing-nav { position: sticky; top: 0; z-index: 40; background: var(--l-nav); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--l-line); }
.landing-nav-inner { width: var(--lp-wide); height: 64px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.landing-nav-actions { display: flex; align-items: center; gap: 2px; }
.landing-text-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; color: var(--l-ink-2); font-size: 15px; transition: color .15s ease; }
.landing-text-link:hover, .landing-footer a:hover { color: var(--l-ink); }
/* Buttons: the console's pills, ink filled for the one thing to do. */
.landing-sign-in, .landing-start, .lp-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.landing-sign-in, .lp-ghost { border: 1px solid var(--btn-line); background: var(--l-surface); color: var(--l-ink); }
.landing-sign-in { margin-left: 8px; }
.landing-sign-in:hover, .lp-ghost:hover { border-color: var(--l-ink-3); }
.landing-start { border: 1px solid transparent; background: var(--l-primary); color: var(--l-primary-ink); }
.landing-start:hover { background: var(--l-primary-hover); }
.lp-large { min-height: 46px; padding: 0 24px; font-size: 16px; }
.lp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Hero: the line, then the launch film in a quiet frame. */
.lp-hero { width: var(--lp-wide); margin: 0 auto; padding: 96px 0 0; text-align: center; }
.lp-hero h1 { max-width: 15ch; margin: 0 auto; font-size: clamp(40px, 6.4vw, 72px); line-height: 1.02; font-weight: 680; letter-spacing: -.035em;
  font-variation-settings: "opsz" 32; font-optical-sizing: none; text-wrap: balance; }
.lp-lede { max-width: 36em; margin: 22px auto 30px; color: var(--l-ink-2); font-size: clamp(17px, 2vw, 19px); line-height: 1.55; text-wrap: pretty; }
.lp-film { position: relative; max-width: 960px; margin: 56px auto 0; border: 1px solid var(--l-line); border-radius: calc(var(--r) + 6px); background: #0d0c13; box-shadow: var(--l-frame-shadow); overflow: hidden; }
.lp-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.lp-sound { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; white-space: nowrap; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 13px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #16161d; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
.lp-sound:hover { background: #fff; }
.lp-sound svg { width: 15px; height: 15px; fill: currentColor; }
.lp-sound small { color: #5c5c6b; font-size: var(--fs-13); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Sections: a plain heading, then their parts on the page's own surface. */
.lp-steps, .lp-features { width: var(--lp-wide); margin: 0 auto; padding: 120px 0 0; }
.lp-steps > h2, .lp-features > h2 { margin-bottom: 36px; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; font-weight: 680; letter-spacing: -.03em; text-align: center; }
.lp-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.lp-step { display: flex; flex-direction: column; counter-increment: step; }
.lp-step h3::before { content: counter(step); display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 999px;
  background: var(--l-surface-2); color: var(--l-ink-2); font-size: var(--fs-13); font-weight: 650; vertical-align: 2px; }
.lp-step h3, .lp-feature h3 { font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.lp-step p, .lp-feature p, .lp-feature li { margin-top: 8px; color: var(--l-ink-2); font-size: var(--fs-15); line-height: 1.55; }
.lp-feature ul { margin-top: 6px; }
.lp-feature li { position: relative; margin-top: 4px; padding-left: 16px; }
.lp-feature li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--l-ink-3); }
.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-feature { display: flex; flex-direction: column; padding: 22px 22px 0; border: 1px solid var(--l-line); border-radius: calc(var(--r) + 4px); background: var(--l-surface); overflow: hidden; }
/* A screenshot: the console's own screen, cropped, in the visitor's look. */
.lp-shot { position: relative; margin-top: 18px; aspect-ratio: 16 / 10; border: 1px solid var(--l-line); border-radius: var(--r); background: var(--l-surface-2); overflow: hidden; }
.lp-step .lp-shot { box-shadow: var(--l-frame-shadow); }
/* A card's picture fills what its words leave, so a row's pictures end together. */
.lp-feature .lp-shot { flex: 1 0 auto; min-height: 220px; aspect-ratio: auto; margin: 18px -1px -1px; border-radius: var(--r) var(--r) 0 0; }
/* At the console's own scale (a little smaller), from the top left, the frame cropping the rest. */
.lp-shot img { position: absolute; top: 18px; left: 18px; width: calc(var(--w) * .82px); max-width: none; height: auto;
  border: 1px solid var(--l-line); border-radius: 8px; box-shadow: var(--l-frame-shadow); }
.lp-shot[data-anchor="center"] img { left: 50%; transform: translateX(-50%); }
.lp-dark { display: none; }
html[data-theme="dark"] .lp-dark { display: block; }
html[data-theme="dark"] .lp-light { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .lp-dark { display: block; }
  html:not([data-theme="light"]) .lp-light { display: none; }
}
.lp-phones { position: absolute; inset: 18px 0 0; display: flex; justify-content: center; gap: 14px; }
.lp-phone { position: relative; width: 40%; border: 5px solid var(--l-ink); border-bottom: 0; border-radius: 26px 26px 0 0; background: var(--l-bg); overflow: hidden; }
.lp-phone img { inset: 0 auto auto 0; width: 100%; border: 0; border-radius: 0; box-shadow: none; }

/* The end: the mark, the brand's line, the one thing to do. */
.lp-end { width: var(--lp-wide); margin: 0 auto; padding: 140px 0 120px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.lp-end-mark .mark { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); }
.lp-end h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1.04; font-weight: 680; letter-spacing: -.035em; font-variation-settings: "opsz" 32; font-optical-sizing: none; }

.landing-footer { width: var(--lp-wide); min-height: 88px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px;
  border-top: 1px solid var(--l-line); color: var(--l-ink-3); font-size: 14px; }
.landing-footer p { margin: 0 auto 0 0; }
.landing-footer a { color: var(--l-ink-2); }
.landing-footer .landing-brand .mark { width: 20px; height: 20px; border-radius: 5px; }
.landing-footer .landing-brand span { font-size: 16px; }

@media (max-width: 960px) {
  .lp-steps ol, .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-step:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .landing-page { --lp-wide: calc(100% - 32px); }
  .landing-nav-inner { height: 58px; }
  .landing-text-link { display: none; }
  .landing-sign-in { margin-left: 0; }
  .landing-sign-in, .landing-start { padding: 0 14px; }
  .lp-hero { padding-top: 56px; }
  .lp-film { margin-top: 36px; border-radius: var(--r); }
  .lp-sound { bottom: 10px; min-height: 36px; font-size: 14px; }
  .lp-sound small { display: none; }
  .lp-steps ol, .lp-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-steps, .lp-features { padding-top: 80px; }
  .lp-end { padding: 96px 0 80px; }
  .landing-footer { padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-page *, .landing-page *::before, .landing-page *::after { transition: none !important; animation: none !important; }
}

/* Public policy, trust, and exact-price surfaces. They share the landing's
   tokens (so the console's look, light or dark) but stay quiet and
   document-like for long-form reading: body text at 16px / 1.7. */
.legal-shell { --l-text: color-mix(in srgb, var(--l-ink) 84%, var(--l-bg)); min-height:100vh; background:var(--l-bg); color:var(--l-ink); font-family:var(--font-ui); color-scheme:light dark; }
.legal-nav { min-height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100% - 920px)/2)); background:var(--l-bg); border-bottom:1px solid var(--l-line); }
.legal-nav > a:last-child { display:inline-flex; align-items:center; min-height:36px; padding:0 15px; border:1px solid var(--btn-line); border-radius:var(--r-btn); background:var(--l-surface); color:var(--l-ink); font-size:14px; font-weight:550; }
.legal-nav > a:last-child:hover { border-color:var(--l-ink-3); }
.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:var(--l-ink-3); font-size:13px; font-weight:600; line-height:1.3; }
.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:var(--l-ink-2); font-size:18px; line-height:1.6; }
.legal-draft { display:flex; gap:12px; margin:28px 0; padding:14px 16px; border:1px solid color-mix(in srgb, var(--working) 45%, transparent); border-radius:var(--r); background:var(--working-weak); color:var(--l-ink); font-size:14px; line-height:1.5; }
.legal-draft b { color:var(--working); }
.legal-draft b { flex:none; }
.legal-unresolved { padding:14px 16px; border-left:3px solid var(--danger); border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--l-surface); color:var(--l-ink); }
.legal-operator { padding:12px 0; color:var(--l-ink-2); }
.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:var(--l-text); font-size:16px; line-height:1.7; }
.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 var(--l-line); font-size:14px; }
.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 var(--l-line); border-radius:var(--r); background:var(--l-surface); color:var(--l-ink); transition:border-color .15s ease; }
.legal-grid a:hover { border-color:var(--l-line-strong); }
.legal-grid span { font-size:18px; font-weight:700; }
.legal-grid small { margin-top:8px; color:var(--l-ink-2); font-size:14px; line-height:1.5; }
.legal-grid i { margin-top:auto; padding-top:18px; color:var(--l-accent); font-style:normal; font-size:13px; font-weight:600; }
.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 var(--l-line); background:var(--l-bg); color:var(--l-ink-3); font-size:13px; }
.legal-footer a { color:var(--l-ink-2); }
.legal-footer a:hover { color:var(--l-ink); }
.pricing-addons { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; margin:14px 0 0; padding:16px 24px; border:1px solid var(--l-line); border-radius:var(--r); background:var(--l-surface); color:var(--l-ink-2); font-size:14px; }
.pricing-addons b { color:var(--l-ink); }
.pricing-addons small { color:var(--l-ink-3); flex-basis:100%; font-size:13px; }
.price-card { max-width:620px; margin-top:36px; padding:32px; border:1px solid var(--l-line); border-radius:var(--r); background:var(--l-surface); }
.price-value { font-size:30px; font-weight:750; letter-spacing:-.035em; }
.price-value small { font-size:14px; font-weight:500; letter-spacing:0; color:var(--l-ink-3); }
.price-name { font-size:18px; font-weight:750; margin-bottom:12px; }
.price-card p,.price-card li { color:var(--l-text); 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:var(--l-ink-3); font-size:13px; }
.pricing-terms { margin-top:28px; color:var(--l-ink-2); line-height:1.65; }
.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; } }
/* Docs, pricing and policies share one sidebar (renderPublicShell). */
.docs-shell .legal-nav { padding:0 max(24px,calc((100% - 1180px)/2 + 24px)); }
.docs-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:56px; max-width:1180px; margin:0 auto; padding:0 24px; }
.docs-nav { position:sticky; top:0; align-self:start; max-height:100vh; overflow-y:auto; display:flex; flex-direction:column; gap:20px; padding:44px 0 32px; font-size:14px; }
.docs-nav-group { display:flex; flex-direction:column; gap:1px; }
.docs-nav-group > span { padding:0 10px 6px; color:var(--l-ink-3); font-size:12.5px; font-weight:600; line-height:1.3; }
.docs-nav a { display:flex; align-items:center; min-height:32px; padding:0 10px; border-radius:var(--r-sm); color:var(--l-ink-2); font-weight:500; line-height:1.4; }
.docs-nav a:hover { background:var(--l-surface-2); color:var(--l-ink); }
.docs-nav a[aria-current="page"] { background:var(--rail-current); color:var(--current-ink); font-weight:600; box-shadow:var(--current-ring); }
.docs-nav a:focus-visible { outline:2px solid var(--l-accent); outline-offset:-2px; }
.docs-nav-sub { display:flex; flex-direction:column; gap:1px; margin:2px 0 0 10px; padding-left:6px; border-left:1px solid var(--l-line); font-size:13.5px; }
.docs-content { min-width:0; }
.docs-content > main { margin:0; padding:44px 0 96px; }
.docs-content .legal-document h1,.docs-content .legal-index h1,.docs-content .pricing-page h1,.docs-page h1 { margin:0 0 12px; font-size:clamp(30px,4vw,40px); line-height:1.1; letter-spacing:-.035em; }
.docs-content .legal-document h1,.docs-content .legal-index h1,.docs-content .pricing-page h1 { margin-top:12px; }
.docs-page { max-width:720px; color:var(--l-text); font-size:16px; line-height:1.7; }
.docs-page h1 { color:var(--l-ink); }
.docs-page h2 { margin:40px 0 10px; color:var(--l-ink); font-size:20px; line-height:1.3; letter-spacing:-.02em; scroll-margin-top:16px; }
.docs-page h3 { margin:28px 0 8px; color:var(--l-ink); font-size:16px; scroll-margin-top:16px; }
.docs-page h1 + .md-p { color:var(--l-ink-2); font-size:18px; }
.docs-page .md-p { margin:0 0 12px; }
.docs-page ul,.docs-page ol { margin:0 0 12px; padding-left:22px; }
.docs-page li + li { margin-top:4px; }
.docs-page strong { color:var(--l-ink); font-weight:600; }
.docs-page a { color:var(--l-accent); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--l-accent) 40%, transparent); text-underline-offset:2px; }
.docs-page a:hover { text-decoration-color:currentColor; }
.docs-page .md-inline { padding:1px 5px; border-radius:5px; background:var(--l-surface-2); color:var(--l-ink); font:.86em var(--font-mono); white-space:nowrap; }
.docs-code { position:relative; margin:4px 0 16px; }
/* Commands read best on a dark block in either theme; in dark it sits a step above the page. */
.docs-page pre { margin:0; padding:14px 48px 14px 16px; overflow-x:auto; border:1px solid var(--l-line); border-radius:var(--r); background:light-dark(#18181b, #1d1d22); color:#ececef; font:13.5px/1.65 var(--font-mono); }
.docs-page pre code { background:none; color:inherit; padding:0; }
.docs-copy { position:absolute; top:8px; right:8px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:7px; background:transparent; color:#a1a1aa; cursor:pointer; }
.docs-copy:hover,.docs-copy:focus-visible { background:#2c2c33; color:#fff; outline:none; }
.docs-copy.copied { color:#6fd59a; }
.docs-table { margin:4px 0 16px; overflow-x:auto; border:1px solid var(--l-line); border-radius:var(--r); background:var(--l-surface); }
.docs-page table { width:100%; border-collapse:collapse; font-size:14px; }
.docs-page th,.docs-page td { padding:9px 12px; border-bottom:1px solid var(--l-line); text-align:left; vertical-align:top; }
.docs-page th { background:var(--l-surface-2); color:var(--l-ink-2); font-size:13px; font-weight:600; }
.docs-page tr:last-child td { border-bottom:0; }
@media (max-width:760px) {
  .docs-layout { grid-template-columns:minmax(0,1fr); gap:0; padding:0 16px; }
  .docs-nav { position:static; max-height:none; flex-direction:row; gap:4px; overflow-x:auto; padding:10px 0; margin:0 -16px; padding-inline:16px; border-bottom:1px solid var(--l-line); scrollbar-width:none; }
  .docs-nav::-webkit-scrollbar { display:none; }
  .docs-nav-group,.docs-nav-sub { flex-direction:row; gap:4px; margin:0; padding:0; border:0; font-size:14px; }
  .docs-nav-group > span { display:none; }
  .docs-nav a { white-space:nowrap; }
  .docs-content > main { padding-top:28px; }
}
@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; } }

/* 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: var(--fs-12); }
.login-home:hover { color: var(--accent); }
/* Sign in and create account on one card: social buttons (either), "or", then
   the two forms side by side; stacked on a phone, the short one first. */
.login-wrap:has(.auth-card) { height: auto; min-height: 100dvh; padding: 24px 16px; }
.auth-card { width: min(720px, 100%); }
.auth-brand { margin-bottom: 18px; }
.auth-social { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.auth-social > * { width: 100%; margin: 0; }
.auth-social > .btn { justify-content: center; height: 40px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-3); font-size: var(--fs-12); }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-forms { display: grid; grid-template-columns: 1fr 1fr; }
.auth-form { display: flex; flex-direction: column; min-width: 0; padding: 0 28px; }
.auth-form:first-child { padding-left: 0; }
.auth-form + .auth-form { padding-right: 0; border-left: 1px solid var(--line); }
.auth-form h2 { margin: 0 0 12px; font-size: var(--fs-15); font-weight: 650; letter-spacing: -.01em; }
.auth-form > .btn { width: 100%; }
.auth-form .policy-acceptance { margin: 4px 0 14px; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.auth-label-row a { color: var(--ink-3); font-size: var(--fs-12); }
.auth-label-row a:hover { color: var(--accent); }
.auth-err { min-height: 0; margin-top: 8px; color: var(--danger); font-size: var(--fs-12); }
.auth-err:empty { display: none; }
@media (max-width: 640px) {
  .login-wrap:has(.auth-card) { place-items: start stretch; padding: 0; background: var(--surface); }
  .auth-card { border: 0; border-radius: 0; box-shadow: none; padding: 16px 20px 32px; }
  .auth-forms { grid-template-columns: 1fr; }
  .auth-form, .auth-form:first-child { padding: 0; }
  .auth-form + .auth-form { margin-top: 24px; padding-top: 20px; border-left: 0; border-top: 1px solid var(--line); }
}
.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 var(--fs-14)/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; }
}


/* 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: var(--fs-11h); 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: var(--fs-12); 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: var(--fs-12); 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: var(--fs-10); }
.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) {
  .mobile-bar { display:flex; gap: 8px; padding-left:max(10px, env(safe-area-inset-left)); padding-right:max(10px, env(safe-area-inset-right)); }
  .tab-wide { display:none; }
  .tab-narrow { display:inline; }
  #rail-help, .key-echo { display:none; } /* no keyboard to list or echo shortcuts for */
  .rail-collapse { display:none; }
  .body { grid-template-columns: 1fr; }
  .rail {
    display:flex; position:fixed; z-index:80; left:0; top:52px; bottom:0;
    width:min(82vw, 300px);
    transform:translateX(-105%); transition:transform .18s ease; box-shadow:var(--shadow);
  }
  .rail .rail-head { display:none; }
  .rail .rail-top { padding-top: 10px; }
  .rail.mobile-open { transform:translateX(0); }
  .rail-foot { padding-bottom:max(10px, env(safe-area-inset-bottom)); }
  .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; }
  .tp-head > * { padding: 0 16px; }
  .tp-content { padding: 16px 16px 40px; }
  .tp-foot { padding: 10px 0; }
  .tp-foot-inner { padding: 0 16px; }
  .tp-head.wide { padding: 6px 12px 8px; }
  .tp-head.wide h2 { font-size: 16px; }
  .tp-head.wide > .tp-topline { padding-left: 0; gap: 8px; }
  .tp-stage .pipeline { display: none; }
  .tp-bar { gap: 4px 6px; padding: 4px 8px 4px 12px; }
  /* Scrolling down the page tucks its top away (wireChromeTuck): the app bar
     slides up, the header and toolbar fold to nothing. */
  .mobile-bar { transition: margin-top .2s ease; }
  html.chrome-tucked #app:has(.task-page) > .mobile-bar { margin-top: -52px; }
  .tp-chrome { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease; }
  .tp-chrome-inner { min-height: 0; overflow: hidden; }
  .tp-chrome-inner:has(.tp-prs[open]) { overflow: visible; }
  html.chrome-tucked .tp-chrome { grid-template-rows: 0fr; }
  .tp-col .tp-content { padding: 16px 16px 40px; }
  .tp-col .tp-foot-inner { padding: 0 16px; }
}
@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: var(--fs-12); line-height: 1.6;
}
.cred-row.off { opacity: 0.5; }
.cred-row.signed-out .cred-label { color: var(--ink-3); }
.cred-signin {
  width: 16px; height: 16px; padding: 0; border-radius: 50%; flex: none; cursor: pointer;
  display: inline-grid; place-items: center; font: 800 var(--fs-11)/1 var(--font-ui);
  border: none; background: var(--warn, #e0b15a); color: #fff;
}
.cred-signin:hover { filter: brightness(1.1); }
.btn.cred-save {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 3px 10px 3px 4px; font-size: var(--fs-12); line-height: 1.6;
  border-radius: 999px; border-color: var(--warn, #e0b15a); color: var(--ink-1);
}
.btn.cred-save[hidden] { display: none; }
.cred-save svg { width: 14px; height: 14px; }
.cred-save-alert {
  width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center;
  font: 800 var(--fs-11)/1 var(--font-ui); background: var(--warn, #e0b15a); color: #fff;
}
.cred-login-flow { margin-top: 8px; font-size: var(--fs-12); overflow-wrap: anywhere; }
.cred-row.dragging { opacity: 0.4; }
.cred-drag { cursor: grab; color: var(--ink-3); user-select: none; font-size: var(--fs-11); line-height: 1; }
.cred-drag:active { cursor: grabbing; }
.cred-label { white-space: nowrap; }
.cred-row .info-dot { margin-left: -2px; }
.cred-rename, .cred-del, .cred-key-edit, .cred-key-del { cursor: pointer; color: var(--ink-3); font-size: var(--fs-11); }
.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)); }

/* Settings → Agents: the same rows as a list, one account per row (columns shared
   through subgrid so names, states and meters line up), details folded under. */
.cred-list.acct-list {
  display: grid; gap: 0; align-items: stretch;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  border-top: 1px solid var(--line);
}
.cred-row.acct {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
  column-gap: 12px; padding: 0 2px; min-height: 46px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
  font-size: var(--fs-13); line-height: 1.4;
}
.cred-row.acct.off { opacity: 1; }
.cred-row.acct.off :is(.cred-label, .acct-state, .acct-meter) { opacity: .45; }
.cred-row.acct .cred-drag { font-size: var(--fs-13); padding: 4px 0; }
.cred-row.acct .cred-label { overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.acct-state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--ink-2); font-size: var(--fs-12h); }
.acct-state.warn { color: var(--working); }
.acct-state.bad { color: var(--danger); }
.acct-state.off { color: var(--ink-3); }
.acct-state .status-dot.off { background: var(--ink-3); }
.acct-meter { display: inline-grid; grid-template-columns: 64px 34px auto; align-items: center; gap: 6px; font-size: var(--fs-11); color: var(--ink-3); }
.acct-meter b { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); text-align: right; }
.ins-quota-bar.crit i { background: var(--danger); }
.acct-expand { width: 26px; height: 26px; font-size: 17px; line-height: 1; color: var(--ink-3); transition: transform .15s; }
.cred-row.acct.open .acct-expand { transform: rotate(90deg); }
.cred-row.acct > .acct-detail { grid-column: 1 / -1; display: none; margin: 0 0 12px 30px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.cred-row.acct.open > .acct-detail { display: flex; }
.acct-detail.setting-rows.ruled { border-top: 1px solid var(--line); }
.acct-detail .setting-label { width: 128px; }
.acct-detail .setting-row { min-height: 40px; }
.acct-usage { display: grid; gap: 2px; width: 100%; max-width: 440px; padding: 4px 0; }
.acct-usage .ins-quota-row { grid-template-columns: 54px 120px 36px minmax(0, 1fr); font-size: var(--fs-12); }
.acct-reset-at { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-checked { font-size: var(--fs-11); color: var(--ink-3); }
.acct-conc { width: 88px; }
.acct-incident { display: grid; gap: 2px; font-size: var(--fs-12h); min-width: 0; width: 100%; overflow: hidden; }
.acct-incident > div:first-child::first-letter { text-transform: uppercase; }
.acct-incident-source a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0; margin-left: -10px; }
.acct-actions .btn { color: var(--ink-2); }
.acct-actions .btn.danger { color: var(--danger); border-color: transparent; }
.acct-until { width: 220px; }
.acct-detail .cred-login-flow { padding-bottom: 10px; margin-top: 0; }
.acct-detail .cred-login-flow[hidden] { display: none; }
.cred-row.acct .cred-signin:not(.btn) { width: 16px; height: 16px; }
.acct-list + .cred-save { margin-top: 10px; }
#accounts-card .usage-recheck-all[hidden] { display: none; }
@media (max-width: 640px) {
  .cred-list.acct-list { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .cred-row.acct { row-gap: 2px; padding: 8px 2px; }
  .cred-row.acct .cred-label { grid-column: 3; }
  .cred-row.acct .acct-state { grid-column: 3; grid-row: 2; }
  .cred-row.acct .acct-meter { grid-column: 3; grid-row: 3; }
  .cred-row.acct .acct-meter:empty, .cred-row.acct > span:empty { display: none; }
  .cred-row.acct .acct-expand { grid-column: 4; grid-row: 1; }
  .acct-detail { margin-left: 0; }
  .acct-detail .setting-row { flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; }
  .acct-detail .setting-label { width: 100%; }
  .acct-detail .setting-value { flex-basis: 100%; }
  .acct-usage .ins-quota-row { grid-template-columns: 54px minmax(0, 1fr) 36px; }
  .acct-usage .acct-reset-at { grid-column: 2 / -1; margin-bottom: 4px; }
}

/* ── 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);
  border-radius: 999px; padding: 2px 6px 2px 9px; font-size: var(--fs-12); white-space: nowrap;
}
.dep-chip .dep-x {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: var(--fs-11); line-height: 1; padding: 0; opacity: .65;
}
.dep-chip .dep-x:hover { opacity: 1; }
.dep-chip .task-project { color: inherit; opacity: .7; }
.label-row .hint { font-weight: 400; color: var(--ink-3); font-size: var(--fs-12); 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: var(--fs-12); 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: var(--fs-13); }
.pk-caret { color: var(--ink-3); font-size: var(--fs-12); }
.pk-sessions { margin: 0 0 4px 26px; border-left: 1px solid var(--line); padding-left: 8px; }
.pk-fork { color: var(--accent); }
.pk-attempt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 6px 10px; }
.pk-attempt-label { flex: 0 0 72px; color: var(--ink-3); font-size: var(--fs-12); }
.pk-agents { display: flex; flex: 1; flex-wrap: wrap; min-width: 0; gap: 4px; }
.pk-agent { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-12); gap: 6px; padding: 5px 8px; max-width: 100%; overflow-wrap: anywhere; }
.pk-agent .wf { color: var(--ink-3); font-size: var(--fs-11); }
.pk-agent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pk-agents .pk-empty { padding: 5px 0; font-size: var(--fs-12); }
.pick-row[aria-busy="true"] { cursor: progress; }
.pk-empty { padding: 10px; color: var(--ink-3); font-size: var(--fs-13); }

/* 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: var(--fs-12); 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-uploaded .af-resume-check { margin-top: 0; min-width: 0; }
.af-resume-upload-name, .af-resume-check.ok { display: flex; min-width: 0; }
.af-resume-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-resume-count { flex: none; white-space: pre; }
.af-resume-check { margin-top: 6px; overflow: hidden; color: var(--ink-3); font-size: var(--fs-12); text-overflow: ellipsis; white-space: nowrap; }
.af-resume-check[hidden] { display: none; }
.af-resume-check.err { color: var(--danger); }
.af-resume-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-12); 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; }
/* Fork options each occupy their own line under the source chip. */
.af-resume-reauth, .af-resume-dependency, .af-resume-model {
  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: var(--fs-12); cursor: pointer;
}
.af-resume-reauth[hidden], .af-resume-dependency[hidden] { display: none !important; }
.af-resume-reauth input, .af-resume-dependency input, .af-resume-model 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: var(--fs-11); 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: var(--fs-12); }
.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: var(--fs-13);
}
.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: flex-end; gap: 10px; margin-top: 14px; padding: 12px 0 2px;
  background: linear-gradient(180deg, transparent, var(--surface) 13px);
}
.params-save-bar .save-state[data-state="saved"] { animation: save-state-fade 2.4s ease forwards; }
.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: var(--fs-13);
}
.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; } }
/* Different branches per repo: the pair becomes one Base/Target row per repository. */
.rb-list { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; align-items: center; margin-bottom: 10px; }
.rb-row { display: contents; }
.rb-head label { font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.rb-repo { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-2); }
.rb-list input { width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); outline: none; }
.rb-list input:focus { border-color: var(--accent); }
.branch-pair-slot .form-row { margin-bottom: 10px; }
.rb-toggle-row { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.rb-toggle-row .switch { gap: 8px; cursor: pointer; }

/* ── 5-field cron grid (task form) ─────────────────────── */
/* 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: var(--fs-11); 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: var(--fs-13); text-align: center;
}
.cron-cell input:focus { border-color: var(--accent); outline: none; }
.cron-cell small { color: var(--ink-3); font-size: var(--fs-10); }

/* ── Repeatable series + runs (task list) ─────────────────────────────────── */
.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: var(--fs-13); }
.run-row::before {
  content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 1px; background: var(--line);
}
.run-row { position: relative; }

/* ── The Triggers block (task form, series page): framed like the agent and
   computer blocks; a small label column beside each control. ─────────────── */
.triggers-block {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 10px 14px;
  padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.triggers-block .tb-label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.triggers-block #trig-at { width: 100%; max-width: 260px; padding: 7px 10px; background: var(--surface); }
.triggers-block .tb-repeat {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; width: max-content;
  font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.triggers-block .tb-repeat input:not(.toggle) { width: auto; margin: 0; padding: 0; }
/* On event: the type, then its conditions and what a repeat does. */
.ev-trigger { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ev-trigger #ev-type, .ev-cond input, .ev-more #ev-key { padding:6px 9px; background:var(--surface); font-family:var(--mono, ui-monospace, monospace); font-size:var(--fs-12h); }
.ev-trigger #ev-type { max-width:320px; }
.ev-cond { display:grid; grid-template-columns:minmax(0, 1.2fr) auto minmax(0, 1fr) auto; gap:6px; align-items:center; max-width:560px; }
.ev-cond select, .ev-more select { padding:5px 8px; background:var(--surface); font-size:var(--fs-12h); }
.ev-more { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ev-more[hidden], .ev-more [hidden] { display:none; }
.ev-more #ev-key { width:180px; }
@media (max-width: 700px) {
  .triggers-block { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .triggers-block > :not(:first-child):is(.tb-label, .tb-repeat) { margin-top: 8px; }
}

/* ── Series row + runs (list + series page) ───────────────────────────────────── */
/* One more cell than a task row: the expand caret before the status dot. */
.series-row { grid-template-columns: auto auto 1fr auto; }
.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: var(--fs-13); 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: var(--fs-12); font-weight: 600; color: var(--ink-2); 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: var(--fs-12); }
/* ── 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: var(--fs-11); }
.attach-file-button {
  display: inline-flex; flex: none; align-items: center; width: max-content; cursor: pointer;
  color: var(--accent); font-size: var(--fs-12); 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; flex-wrap: wrap; align-items: center; gap: 6px 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: var(--fs-11h); font-weight: 600; color: var(--ink-3); cursor: default; user-select: none; }
.prompt-context-row > .info-dot { margin-left: -4px; }
.pc-chips { display: contents; }
.pc-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 1px 2px 1px 8px; border-radius: 999px; background: var(--accent-weak); color: var(--accent); font-size: var(--fs-12); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-chip-x { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: var(--fs-14); line-height: 1; cursor: pointer; opacity: .7; }
.pc-chip-x:hover, .pc-chip-x:focus-visible { opacity: 1; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.prompt-context { flex: 1; min-width: 80px; 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: var(--fs-12); line-height: 1.5; color: var(--accent); }
.prompt-context::placeholder { color: var(--ink-3); font-family: var(--font-sans, inherit); }
.form-row .prompt-context-row textarea.prompt-context { min-height: 0; border: 0; border-radius: 0; padding: 1px 0; background: transparent; box-shadow: none; }
.prompt-context-row > .wiki-ref-editor { flex: 1; min-width: 80px; }
.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: var(--fs-11); 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: var(--fs-12);
}
.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: var(--fs-10); }
.file-chip-x { flex: none; border: 0; padding: 2px; background: transparent; color: var(--ink-3); cursor: pointer; }
.file-chip-x:hover { color: var(--danger); }
/* An upload in flight: a dimmed preview under a ring that fills as it goes
   (spinning while a pasted picture is being made smaller). */
@property --progress { syntax: '<number>'; inherits: true; initial-value: 0; }
.img-chips [data-upload] { transition: --progress .25s linear; }
.img-chip[data-upload] img { opacity: .4; }
.upload-ring {
  --ring: 22px; flex: none; width: var(--ring); height: var(--ring); border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--progress) * 1turn), color-mix(in srgb, var(--accent) 20%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.img-chip .upload-ring { position: absolute; inset: 0; margin: auto; }
.file-chip .upload-ring { --ring: 14px; }
[data-state="preparing"] .upload-ring {
  background: conic-gradient(var(--accent) .3turn, color-mix(in srgb, var(--accent) 20%, transparent) 0);
  animation: action-spin .8s linear infinite;
}
.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 16px; 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: var(--fs-15); }
.search-pending { color: var(--ink-3); font-size: var(--fs-11); white-space: nowrap; }
.task-search {
  flex: 1; border: 0; outline: none; background: transparent; color: var(--ink);
  font-size: var(--fs-14); 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: var(--fs-13);
  padding: 2px 6px; border-radius: 6px;
}
.search-box .search-x:hover { background: var(--surface); color: var(--ink); }
/* Views on the left, the Filter/Group/Sort menus on the right, one line. */
.organizer-row { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.organizer-row .views-bar, .organizer-row .query-bar { margin: 0; }
.organizer-row .query-bar { margin-left: auto; }
.search-count { color: var(--ink-3); font-size: var(--fs-12); white-space: nowrap; }
@media (max-width: 700px) {
  .organizer-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .organizer-row .views-bar, .organizer-row .query-bar { flex-wrap: nowrap; }
  /* More chips past an edge: that edge fades (wireScrollFade). */
  .organizer-row.fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .organizer-row.fade-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
  .organizer-row.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
}

.views-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; }
.view-chip {
  font-size: var(--fs-12); 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; font-family: inherit; background: none; }
.view-chip.builtin { border-style: dotted; }
.view-chip.builtin.active { border-style: solid; }
.view-x { opacity: 0; font-size: var(--fs-10); 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: var(--fs-12); padding: 4px 8px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-family: var(--font-ui); width: auto; max-width: 150px; flex: none; field-sizing: content;
}
.q-sel:hover { border-color: var(--line-strong); }
.q-spacer { flex: 1; }
.queue-empty { padding: 12px 16px; color: var(--ink-3); font-size: var(--fs-13); }
.wiki-nav .wiki-new { align-self: flex-start; margin: 0 0 8px 10px; }

.group-h {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 4px;
  font-size: var(--fs-12); font-weight: 600; color: var(--ink-2);
}
.group-h .pill { font-family: var(--font-ui); font-variant-numeric: tabular-nums; 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: var(--fs-11); 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: var(--fs-14); 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: var(--fs-14); }
.tag-depth-3 > .tag-section-heading,
.tag-depth-4 > .tag-section-heading,
.tag-depth-5 > .tag-section-heading { margin-top: 18px; font-size: var(--fs-13); }
.tag-section-count { color: var(--ink-3); font-size: var(--fs-11); 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: var(--fs-11); 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: var(--fs-13); 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: var(--fs-11); 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: var(--fs-11); 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 header + task form. */
.org-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.org-editor .org-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.org-editor .org-priority { padding: 2px 6px; }
.org-editor .org-priority.unset { color: var(--ink-3); }
/* Borderless until hovered: an empty tag list costs one quiet word, not a button. */
.org-add-tag {
  padding: 2px 6px; border: 1px dashed transparent; border-radius: 999px; background: transparent;
  color: var(--ink-3); font: 12px var(--font-ui); cursor: pointer;
}
.org-add-tag:hover, .org-add-tag:focus-visible { border-color: var(--line-strong); color: var(--ink); }

/* Attempts: one line of single-line cards, then the New attempt action. */
.attempts { display: flex; align-items: center; gap: 6px; margin-top: 8px; min-width: 0; }
.attempts-list { display: flex; gap: 6px; min-width: 0; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.attempt-card { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--fs-12); white-space: nowrap; 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: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.attempt-note { color: var(--accent); font-size: var(--fs-11); font-weight: 600; }
.attempt-add { flex: none; }


.stage-picker { display: inline-flex; align-items: center; }
.stage-picker select {
  appearance: none; -webkit-appearance: none; /* the label carries its own ▾ */
  width: auto; max-width: 230px; margin: 0; padding: 3px 10px;
  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: var(--fs-11); font-weight: 600; cursor: pointer;
  field-sizing: content; /* the pill hugs its label, not its longest move */
}
.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: var(--fs-12); 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: var(--fs-13); }
.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: var(--fs-11); }
.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: var(--fs-11); 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: var(--fs-11); 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: var(--fs-11); 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: var(--fs-12); }
.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: var(--fs-11); }
.proc-table .proc-kill { white-space: nowrap; }
/* ── Installation cards: one setting per row (instRow), folds, copyable URLs ── */
.inst-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fs-12)/1.4 var(--font-mono); color: var(--ink-2); }
.tip-chip.info-dot { width: auto; height: auto; padding: 3px 8px; border: 1px solid var(--line); font-size: var(--fs-11); line-height: 14px; font-weight: 600; cursor: help; }
.tip-chip.info-dot.waiting, .tip-chip.info-dot.failed, .tip-chip.info-dot.done { border-color: transparent; }
.inst-h { display: flex; align-items: center; gap: 6px; margin-top: 22px; }
.inst-fold > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--ink-2); font-size: var(--fs-12h); }
.inst-fold > summary::-webkit-details-marker { display: none; }
.inst-fold > summary::before { content: '›'; width: 10px; color: var(--ink-3); font-size: 16px; line-height: 1; transition: transform .12s; }
.inst-fold[open] > summary::before { transform: rotate(90deg); }
.inst-fold > .setting-rows { border-top: 1px solid var(--line); }
.inst-checklist { border-bottom: 1px solid var(--line); }
.inst-checklist[open] { padding-bottom: 8px; }
.inst-steps { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); font-size: var(--fs-12h); line-height: 1.6; }
.inst-steps code { overflow-wrap: anywhere; font-size: var(--fs-11h); }
.inst-group { margin: 10px 0 2px; color: var(--ink-3); font-size: var(--fs-11h); font-weight: 600; }
.inst-check { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: var(--fs-13); cursor: pointer; }
.inst-check > input { flex: none; margin: 0; accent-color: var(--accent); }
.inst-check > a { color: var(--ink-3); text-decoration: none; }
.inst-check > a:hover { color: var(--accent); }
.inst-save { display: flex; justify-content: flex-end; align-items: center; margin-top: 14px; }
.setting-value > textarea.setting-input { resize: vertical; font: inherit; }
.setting-value > .setting-input:is(.host-capacity-input, #oe-port) { max-width: 96px; }
.installation-settings .setting-label { width: 172px; }
.oe-links { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-12); }
.phone-access-card .setting-rows + .phone-setup { margin-top: 8px; }
.phone-access-card .inst-fold { border-top: 1px solid var(--line); }
.phone-access-card .inst-fold .phone-steps { margin-top: 0; }
.phone-detail { margin: 0 0 10px; color: var(--ink-2); font-size: var(--fs-12); }
.health-gate { margin: 8px 0 0; font-size: var(--fs-12h); }
.proc-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.proc-toggle::before { content: '›'; width: 8px; color: var(--ink-3); font-size: var(--fs-15); line-height: 1; transition: transform .12s; }
.proc-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.proc-foot { padding: 8px 12px; color: var(--ink-3); }
.erasure-item { margin: 12px 0; padding-top: 10px; border-top: 1px solid var(--line); }
.erasure-item > p { margin: 0 0 4px; font-size: var(--fs-13); }
.computer-providers + .managed-off { margin-top: 8px; border-top: 1px solid var(--line); }
.managed-off > summary { min-height: 32px; }
.managed-off[open] > .computer-providers { margin-bottom: 4px; }
.installation-settings .card > .setting-rows.ruled:first-child { border-top: 0; margin-top: -6px; }
@media (max-width: 560px) {
  .installation-settings .setting-label { width: 100%; }
  :is(.installation-settings, .profile-page) .setting-row:has(> .setting-value:empty) > .setting-label { width: auto; flex: 1; }
  :is(.installation-settings, .profile-page) .setting-row > .setting-value:empty { display: none; }
  /* The urgency grid fits a phone instead of scrolling sideways with no hint. */
  .profile-page .notify-row { grid-template-columns: 58px repeat(4, minmax(38px, 1fr)) auto; gap: 6px; }
  .profile-page .notify-head { font-size: 9.5px; letter-spacing: 0; }
}

/* ── wiki (org/project skills, memories, prompts) ─────────────────────────── */
/* A long wiki scrolls its nav, sized to what the window leaves below the page's
   top (--shell-top), where it sticks, and a 16px margin; its rows keep their height
   instead of shrinking to fit. The left padding (offset by the margin) keeps
   the active entry's accent bar inside the scrolling box, not clipped by it. */
.wiki-nav { max-height: calc(var(--visible-height, 100dvh) - 16px - var(--shell-top) - var(--nav-top)); overflow-y: auto; margin-left: -15px; padding-left: 15px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.wiki-nav > * { flex-shrink: 0; }
.wiki-nav .wiki-sec { color: var(--ink-3); font-size: var(--fs-12); font-weight: 600; letter-spacing: 0; text-transform: none; padding: 7px 10px 2px; }
/* A tree of dozens of entries: tighter rows and a wider column than a settings
   nav. The name, not the link, is clipped: the link's accent bar sits outside it. */
.wiki-nav a { display: flex; gap: .35em; white-space: nowrap; padding-block: 5px; }
.wiki-nav a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 851px) { .wiki-page .settings-layout { grid-template-columns: 220px minmax(0,1fr); } }
/* A phone's nav is one scrolling row: the button sits in it like the links. */
@media (max-width: 850px) {
  .wiki-nav { max-height: none; margin-left: 0; padding-left: 0; }
  .wiki-nav .wiki-new { flex: none; align-self: center; margin: 0 4px 0 0; }
  .wiki-nav a { flex: none; } /* the row scrolls; names stay whole */
}
.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: var(--fs-11h); }
.wiki-view-picker select {
  width: min(330px, 36vw); padding: 7px 10px; border: 1px solid var(--line); text-overflow: ellipsis;
  border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit;
}
.wiki-view-picker select:focus { outline: 2px solid var(--accent-weak); border-color: var(--accent); }
.wiki-md { font-size: var(--fs-13); 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: var(--fs-14); letter-spacing: -.01em; }
.wiki-uncond .wiki-uncond-head .info-dot { margin-left: -4px; }
/* The Index's always-included entries: one folded row each. */
.wiki-always .wiki-uncond-head { margin-bottom: 0; }
.wiki-always-row { border-bottom: 1px solid var(--line); }
.wiki-always-row:last-child { border-bottom: 0; margin-bottom: -6px; }
.wiki-always-row > summary { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 9px 0; cursor: pointer; list-style: none; }
.wiki-always-row > summary::-webkit-details-marker { display: none; }
.wiki-always-row > summary::before { content: '▸'; flex: none; color: var(--ink-3); font-size: var(--fs-11); transition: transform .15s; }
.wiki-always-row[open] > summary::before { transform: rotate(90deg); }
.wiki-always-name { flex: none; font-size: var(--fs-13); font-weight: 550; color: var(--ink); }
.wiki-always-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12h); color: var(--ink-3); }
.wiki-always-row > .wiki-md { padding: 0 0 10px 19px; }
.wiki-always-foot { margin: 0 0 12px 19px; }

/* 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: var(--fs-14); 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: var(--fs-12); 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: var(--fs-11h); 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: var(--fs-13); 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: var(--fs-12h); 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: var(--fs-12h); 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: var(--fs-13);
}
.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: var(--fs-12); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiki-mention-menu .wm-desc { color: var(--ink-3); font-size: var(--fs-11h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiki-mention-menu .wm-scope { flex: none; color: var(--ink-3); font-size: var(--fs-10h); }
.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); }
.summon-overlay { z-index: 80; padding: 14px; }
.summon-card { position: relative; width: min(440px, 100%); display: grid; gap: 12px; padding: 18px 18px 16px; }
.summon-head { display: flex; align-items: flex-start; gap: 8px; padding-right: 28px; }
.summon-head h2 { margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.summon-head .info-dot { flex: none; margin-top: 3px; }
.summon-close { position: absolute; top: 12px; right: 12px; }
.summon-missing-toggle { justify-self: start; margin-top: -6px; padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: var(--fs-12); cursor: pointer; }
.summon-missing-toggle::after { content: ' ▸'; }
.summon-missing-toggle[aria-expanded="true"]::after { content: ' ▾'; }
.summon-missing-toggle:hover { color: var(--ink); }
.summon-missing { display: flex; flex-wrap: wrap; gap: 4px; max-height: 120px; overflow: auto; }
.summon-actions { display: grid; gap: 8px; }
.summon-actions > .btn { justify-content: center; }
.summon-someone { position: relative; display: flex; gap: 6px; }
.summon-field { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.summon-field:focus-within { border-color: var(--accent); }
.summon-picked { display: contents; }
.summon-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 8px; border-radius: 999px; background: var(--accent-weak); color: var(--accent); font-size: var(--fs-12); }
.summon-chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 3px; font-size: var(--fs-13); }
.summon-input { flex: 1; min-width: 90px; border: 0 !important; outline: 0; background: transparent !important; padding: 4px 0 !important; font: inherit; box-shadow: none !important; }
.summon-menu { position: absolute; z-index: 2; top: calc(100% + 4px); left: 0; right: 0; max-height: 220px; overflow: auto; padding: 4px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.25)); }
.summon-option { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.summon-option:hover, .summon-option.active { background: var(--surface-2); }
.summon-option span:last-child { display: grid; min-width: 0; }
.summon-option b, .summon-option small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; }
.summon-option small { color: var(--ink-3); font-size: var(--fs-11); font-weight: 400; }
.summon-kind { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font: 650 11px var(--font-mono); }
.summon-kind.avatar { color: var(--accent); }
.summon-empty { padding: 8px; color: var(--ink-3); font-size: var(--fs-12); }
.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: var(--fs-12); }
.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: var(--fs-12); 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-item.active { background: var(--accent-weak); border-radius: 6px; scroll-margin: 8px 0; }
.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: var(--fs-12); }
.vault-grant-meta { color: var(--ink-3); font-size: var(--fs-11); overflow-wrap: anywhere; }
.vault-grant-policies { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vault-grant-policies label {
  display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: var(--fs-11); white-space: nowrap;
}
.vault-grant-policies select { max-width: 120px; font-size: var(--fs-11); }
.vault-grant-empty { display: block; padding: 18px 4px; color: var(--ink-3); font-size: var(--fs-12); text-align: center; }
.vault-grant-actions { display: flex; gap: 8px; justify-content: flex-end; }
.vault-manage-button {
  width: 100%; justify-content: flex-start; gap: 10px; margin-bottom: 14px; padding: 10px 12px;
}
.vault-manage-button > svg:first-child { color: var(--accent); }
.vault-manage-button > span:first-of-type { flex: 1; text-align: left; }
.vault-manage-count { color: var(--ink-3); font-size: var(--fs-12); font-weight: 500; }
.vault-manage-button .vm-chevron { color: var(--ink-3); font-size: 16px; line-height: 1; }

/* The vault manager: a table whose head is Select all + column names, and the
   bulk bar once something is ticked. One grid template keeps head and rows in line. */
.vault-manager-modal { width: min(960px, 94vw); max-height: min(760px, 88vh); min-height: min(420px, 80vh); display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; }
.vault-manager-head { display: flex; align-items: center; gap: 8px; }
.vm-title { margin: 0; font-size: var(--fs-15); font-weight: 650; }
.vm-total { font-size: var(--fs-11); font-weight: 600; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.vm-total:empty { display: none; }
.vm-spacer { flex: 1; }
.vault-manager-head .icon-btn { margin: -6px -6px -6px 0; }
.vm-toolbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.vm-toolbar .vault-search { flex: 1 1 260px; margin: 0; }
.vm-types { display: flex; flex-wrap: wrap; gap: 4px; }
.vm-types:empty { display: none; }
.vm-type { font: inherit; font-size: var(--fs-12); padding: 4px 10px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.vm-type span { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: 2px; }
.vm-type:hover { border-color: var(--line-strong); color: var(--ink); }
.vm-type.active { background: var(--accent-weak); border-color: transparent; color: var(--accent); font-weight: 600; }
.vm-type.active span { color: inherit; }
.vm-table { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.vm-row { display: grid; grid-template-columns: 18px 32px minmax(0, 1fr) 196px 98px; align-items: center; column-gap: 12px; padding: 9px 12px; }
.vm-row > input[type="checkbox"] { margin: 0; }
.vm-headrow { min-height: 42px; padding-top: 5px; padding-bottom: 5px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--fs-12); color: var(--ink-3); }
.vm-headlabel { grid-column: 2 / 4; font-weight: 600; }
.vm-headrow .vm-cols { grid-column: 4; padding-left: 2px; }
.vm-headrow:has(.vm-bulk:not([hidden])) { grid-template-columns: 18px minmax(0, 1fr) auto; background: var(--accent-weak); color: var(--accent); }
.vm-headrow:has(.vm-bulk:not([hidden])) .vm-headlabel { grid-column: 2; }
.vm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.vm-cols > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.vm-cols[hidden], .vm-bulk[hidden] { display: none !important; }
.vm-cols select { width: 100%; font-size: var(--fs-12); padding: 4px 6px; }
.vm-bulk { grid-column: 3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vm-bulk select { font-size: var(--fs-12); padding: 4px 6px; width: auto; }
.vm-bulk .icon-btn { width: 28px; height: 28px; color: inherit; }
.vault-manager-list { flex: 1; min-height: 90px; overflow-y: auto; }
.vault-manager-item { margin: 0; border-bottom: 1px solid var(--line); }
.vault-manager-item:last-of-type { border-bottom: 0; }
.vault-manager-item:hover { background: var(--surface-2); }
.vault-manager-item.selected { background: color-mix(in srgb, var(--accent-weak) 55%, transparent); }
.vault-manager-item.active { background: var(--accent-weak); scroll-margin: 6px 0; }
.vm-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); }
.vault-manager-item[data-type="login"] .vm-icon { color: var(--accent); background: var(--accent-weak); border-color: transparent; }
.vault-manager-item[data-type="api-key"] .vm-icon, .vault-manager-item[data-type="ssh-key"] .vm-icon { color: var(--working); background: var(--working-weak); border-color: transparent; }
.vault-manager-item[data-type="session"] .vm-icon, .vault-manager-item[data-type="passkey"] .vm-icon { color: var(--merged); background: var(--merged-weak); border-color: transparent; }
.vm-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-13); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.vm-source { flex: none; font-size: var(--fs-10); font-weight: 600; letter-spacing: .02em; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; line-height: 16px; }
.vm-meta { font-size: var(--fs-12); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-meta .mono { font-size: var(--fs-11); }
.vm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.vm-act { width: 30px; height: 30px; }
.vm-act:disabled { opacity: .35; cursor: default; }
.vm-act:disabled:hover { background: transparent; border-color: transparent; }
.vm-act.danger:hover:not(:disabled) { color: var(--danger); background: var(--danger-weak); border-color: transparent; }
.vm-act[aria-expanded="true"] { color: var(--accent); background: var(--accent-weak); }
.vm-exclusive { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: var(--fs-11); color: var(--ink-2); white-space: nowrap; cursor: pointer; vertical-align: middle; }
.vm-exclusive input { margin: 0; }
.vault-manager-item .vault-reveal-panel { grid-column: 3 / -1; margin-top: 8px; }
@media (max-width: 760px) {
  .vault-manager-modal { width: 100vw; height: 100dvh; max-width: none; border-radius: 0; padding: 14px 12px 10px; }
  .vm-row { grid-template-columns: 18px 32px minmax(0, 1fr) auto; row-gap: 8px; }
  .vault-manager-item .vm-cols { grid-column: 3 / -1; grid-row: 2; }
  .vm-headrow, .vm-headrow:has(.vm-bulk:not([hidden])) { grid-template-columns: 18px minmax(0, 1fr); }
  .vm-headlabel, .vm-headrow:has(.vm-bulk:not([hidden])) .vm-headlabel { grid-column: 2; }
  .vm-headrow .vm-cols { display: none !important; }
  .vm-bulk { grid-column: 1 / -1; justify-content: flex-start; }
  .vm-meta { white-space: normal; }
}
.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: var(--fs-10); 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: var(--fs-13); }
.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: var(--fs-10); 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. */
/* Live updates paused: a pill floating at the top of the window, over any page. */
.ws-offline {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: inline-flex; align-items: center; font-size: var(--fs-11); font-weight: 600;
  padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--working) 30%, transparent);
  background: var(--working-weak); color: var(--working); box-shadow: var(--shadow);
}
@media (max-width: 720px) { .ws-offline { top: 60px; } }

/* Avatars (wiki features/avatars): a task's setting at the bottom of the
   task form, like Repeatable; the risk it carries is said once, in red. */
.tf-avatar .form-row { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.tf-avatar-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.tf-avatar-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tf-avatar-toggle input:not(.toggle) { width: auto; margin: 0; padding: 0; }
.risk-chip { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: var(--danger-weak); color: var(--danger); font-size: var(--fs-11); font-weight: 700; white-space: nowrap; }
.tf-avatar-options { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 10px 14px; }
.tf-avatar-options .tb-label { font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.tf-avatar-options .audience-combo { max-width: 420px; }
.tf-avatar-roles { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-12); color: var(--ink-2); }
.tf-avatar-roles label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tf-avatar-roles input { width: auto; margin: 0; padding: 0; }
.tf-avatar-forks { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; width: max-content; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tf-avatar-forks input { width: auto; margin: 0; padding: 0; }
.avatar-chip { color: var(--accent); }
/* Permanent co-ordinator (wiki features/coordinator): the form's last row,
   shaped like the Avatār's; its interval sits on the same line. */
.tf-coordinator .form-row { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.tf-coordinator-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.tf-coordinator-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tf-coordinator-wake { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--fs-12); color: var(--ink-2); }
.tf-coordinator-wake[hidden] { display: none; }
.tf-coordinator-wake input { width: 72px; margin: 0; padding: 3px 6px; text-align: right; }
.pf-coordinator-wake { margin-left: 0; }
.coordinator-chip { color: var(--accent); }
.avatar-notice-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / .35); }
.avatar-notice { width: min(480px, calc(100vw - 28px)); display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.avatar-notice h2 { margin: 0; font-size: var(--fs-15); }
.avatar-notice p { margin: 0; color: var(--ink-2); font-size: var(--fs-13); line-height: 1.5; }
.avatar-notice-dismiss { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--ink-2); }
.avatar-notice-dismiss input { width: auto; margin: 0; }
.avatar-notice-actions { display: flex; justify-content: flex-end; gap: 8px; }

#bell-badge { background:#c62828; color:#fff; font-weight:800; }
#bell-badge { min-width:20px; height:20px; font-size:var(--fs-12); top:-2px; right:-2px; border:2px solid var(--rail-bg); }
/* Keep arrival alerts prominent while leaving error toasts and skip navigation above them. */
#notification-alerts { position:fixed; top:16px; right:16px; width:min(380px,calc(100vw - 32px)); z-index:95; display:grid; gap:8px; }
.notification-alert { display:flex; align-items:center; gap:12px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-left:4px solid #c62828; padding:12px; border-radius:8px; box-shadow:0 8px 28px #0003; }
.notification-open { flex:1; min-width:0; display:grid; gap:6px; text-align:left; border:0; background:transparent; color:inherit; cursor:pointer; overflow-wrap:anywhere; }

/* Review documents use the same Markdown typography as conversation messages. */
.artifact-reader { width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; color: var(--ink); }
.artifact-reader::backdrop { background: rgba(0, 0, 0, .45); }
.artifact-reader-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.artifact-reader-header h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.artifact-reader-content { padding: 20px; max-height: calc(100dvh - 150px); overflow: auto; }
.artifact-reader-content > pre { margin: 0; font-family: var(--font-mono); font-size: var(--fs-13); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Media fills the viewer without scrolling: a video or image is shown whole. */
.artifact-image, .artifact-video { width: fit-content; min-width: min(480px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.artifact-pdf, .artifact-page { width: min(1200px, calc(100vw - 32px)); }
.artifact-image .artifact-reader-content, .artifact-video .artifact-reader-content,
.artifact-audio .artifact-reader-content { display: grid; place-items: center; padding: 0; overflow: hidden; }
.artifact-video .artifact-reader-content { background: #000; }
.artifact-reader-content > img, .artifact-reader-content > video { display: block; max-width: 100%; max-height: calc(100dvh - 120px); }
.artifact-audio .artifact-reader-content { padding: 20px; }
.artifact-reader-content > audio { width: 100%; }
.artifact-pdf .artifact-reader-content, .artifact-page .artifact-reader-content { padding: 0; overflow: hidden; }
.artifact-reader-content > iframe { display: block; width: 100%; height: calc(100dvh - 120px); border: 0; background: #fff; }
.artifact-reader-content > .artifact-error { margin: 0; padding: 20px; color: var(--ink); }
.artifact-reader-tools:empty { display: none; }
.artifact-reader-tools { display: contents; }
.artifact-reader-steps { display: inline-flex; align-items: center; gap: 4px; }
.artifact-reader-steps .btn.icon { width: 30px; padding: 4px 0; font-size: 17px; line-height: 1; }
.artifact-reader-count { min-width: 44px; text-align: center; font-size: var(--fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.artifact-gallery { width: min(1100px, calc(100vw - 32px)); }

.authz-editor .authz-description { margin: 0; line-height: 1.45; }
.authz-warning { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 6px 10px; border-radius: 8px;
  background: var(--danger-weak); color: var(--danger); font-size: var(--fs-13); font-weight: 600; line-height: 1.4; }
.authz-warning[hidden] { display: none; }
.authz-warning .info-dot { color: inherit; }
.authorization-role { border-top: 1px solid var(--line); padding: 8px 0; }
.authorization-role > summary { display: list-item; cursor: pointer; }
.authorization-role > summary .chip { margin-left: 8px; }
.role-capability-group { margin: 8px 0 8px 12px; padding: 6px 0; }
.role-capability-group > summary { cursor: pointer; }
.role-capability-group ul { list-style: none; margin: 8px 0; padding-left: 16px; border-left: 1px solid var(--line); }
.role-capability-group li { display: flex; align-items: center; gap: 6px; padding: 6px 0; overflow-wrap: anywhere; }
.roles-fold[open] > summary { margin-bottom: 8px; }
.role-capability-group li b { font-weight: 500; }
.role-capability-group > summary .setting-muted { margin: 0 2px 0 4px; }
.role-capability-group code { display: block; color: var(--ink-3); font-size: var(--fs-11); }
.role-capability-group label { display: flex; align-items: center; gap: 8px; }
.role-capability-group p { margin: 3px 0; }

/* Tool connections follow the agent's existing form rhythm. */
.mcp-picker { display:flex; align-items:flex-start; gap:10px; margin:10px 0; position:relative; min-width:0; flex-wrap:wrap; }
.mcp-label-heading { font-size:var(--fs-12); padding-top:9px; color:var(--ink-3); }
.mcp-combo { position:relative; flex:1; min-width:180px; }
.mcp-input-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:5px 28px 5px 6px; min-height:36px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.mcp-input-wrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }
.mcp-chips { display:contents; }
.mcp-chip { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:2px 5px 2px 8px; border:1px solid var(--line); border-radius:5px; background:var(--surface-2); font-size:var(--fs-12); }
.mcp-chip>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcp-chip[data-unavailable] { color:var(--danger); }
.mcp-chip button,.mcp-caret { border:0; background:transparent; color:var(--ink-3); padding:0 3px; cursor:pointer; }
.mcp-chip button { font-size:16px; }
.mcp-caret { position:absolute; right:7px; top:9px; }
.mcp-picker .mcp-filter { flex:1; width:80px; min-width:80px; border:0; outline:none; box-shadow:none; padding:3px; background:transparent; font-size:var(--fs-12); }
.mcp-menu { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50; border:1px solid var(--line); border-radius:9px; background:var(--surface); box-shadow:0 8px 24px #0002; overflow:hidden; }
.mcp-menu.opens-up { top:auto; bottom:calc(100% + 4px); }
.mcp-options { max-height:var(--mcp-results-height,260px); overflow-y:auto; overscroll-behavior:contain; padding:4px; }
.mcp-option-row { display:flex; align-items:center; }
.mcp-option-row [role=option] { display:flex; align-items:center; justify-content:space-between; gap:10px; flex:1; min-width:0; width:100%; text-align:left; color:var(--ink); background:transparent; border:0; border-radius:5px; padding:8px; font:inherit; font-size:var(--fs-12); cursor:pointer; }
.mcp-option-row [role=option]:hover,.mcp-option-row [role=option].active { background:var(--surface-2); }
.mcp-option-row [aria-disabled=true] { opacity:.5; cursor:default; }
.mcp-option-row small { display:block; color:var(--ink-3); font-size:var(--fs-11); margin-top:2px; }
.mcp-option-row span { overflow-wrap:anywhere; }
.mcp-option-row .mcp-edit { flex:none; background:transparent; border:0; color:var(--ink-3); font-size:var(--fs-11); padding:8px; cursor:pointer; }
.mcp-install { color:var(--accent); font-size:var(--fs-11); flex-shrink:0; }
.mcp-group-label,.mcp-search-status { margin:0; padding:8px; font-size:var(--fs-11); color:var(--ink-3); }
.mcp-group-label { border-top:1px solid var(--line); margin-top:4px; }
.mcp-custom { display:block; width:100%; padding:10px 12px; text-align:left; border:0; border-top:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-12); cursor:pointer; }
.mcp-custom:hover { background:var(--surface-2); }
.mcp-picker-status:empty { display:none; }
.mcp-picker-status { width:100%; color:var(--danger); font-size:var(--fs-12); }
.mcp-dialog-header,.mcp-secret-row,.mcp-form-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mcp-enabled input { width:auto; }
.mcp-dialog { width:min(540px,calc(100vw - 24px)); max-height:88vh; padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); overflow:auto; }
.mcp-dialog::backdrop { background:rgba(0,0,0,.45); }
.mcp-dialog h2 { margin:0; }.mcp-dialog p { color:var(--ink-3); }.mcp-dialog-header { align-items:flex-start; }
.mcp-dialog input:not([type=checkbox]),.mcp-dialog select,.mcp-dialog textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:var(--fs-13); }
.mcp-dialog label { font-size:var(--fs-12); color:var(--ink-3); }
.mcp-dialog h2 { font-size:20px; }
.mcp-dialog .mcp-signin[hidden] { display:none; }
.mcp-message:empty { display:none; }
.mcp-form-actions { margin-top:18px; }
.mcp-dialog .mcp-form-actions .mcp-delete { color:var(--danger); }
.mcp-editor { margin-top:16px; }.mcp-connection-form>label,.mcp-process label,.mcp-registry-fields label { display:block; margin:12px 0; }.mcp-connection-form label>input,.mcp-connection-form label>select,.mcp-connection-form label>textarea { margin-top:5px; }
.mcp-secret-row { margin:8px 0; }.mcp-secret-row input { min-width:0; }.mcp-message { min-height:20px; }.mcp-callback { max-width:520px; margin:15vh auto; padding:24px; }
@media(max-width:540px) { .mcp-dialog { padding:16px; }.mcp-secret-row { flex-wrap:wrap; }.mcp-secret-row input { flex:1; min-width:120px; } }
/* Resource decisions belong to the active input request in the conversation. */
.input-request .resource-review-card { flex-direction: column; }
.input-request .resource-review-card > div { width: 100%; min-width: 0; }
.input-request .resource-review-card .inline-form { flex-wrap: wrap; }

/* Names stay readable while long organization directories scroll independently. */
.organization-combo { min-width: 0; max-width: 440px; }
.organization-combo .combo-menu { position: fixed; right: auto; min-width: 0; }
.organization-combo .combo-opt[aria-disabled="true"] { cursor: default; color: var(--ink-3); }
#org-switcher { width: 100%; max-width: none; }
/* The persistent picker heads the sidebar; it is not a browser-default form. */
#org-switcher > input {
  min-width: 0; height: 34px; padding: 0 30px 0 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink);
  font-size: var(--fs-13); font-weight: 600; text-overflow: ellipsis;
}
#org-switcher:hover > input { border-color: var(--line-strong); background: var(--surface); }
#org-switcher > input:focus {
  outline: 2px solid var(--accent-weak); outline-offset: 2px;
  border-color: var(--accent); background: var(--surface);
}
#org-switcher > input::placeholder { color: var(--ink-3); font-weight: 400; }
#org-switcher:focus-within > .combo-caret { color: var(--accent); }
#org-switcher .combo-menu { padding: 5px; border-color: var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
#org-switcher .combo-opt { padding: 9px 10px; }
#org-switcher .combo-opt-head { align-items: center; }
#org-switcher .combo-opt-head span { overflow-wrap: anywhere; }
#org-switcher .combo-opt[aria-selected="true"] { color: var(--accent); }
#org-switcher .combo-opt[aria-selected="true"] .combo-opt-head::after {
  content: ''; flex: none; width: 6px; height: 10px; margin: 0 3px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
#org-switcher .combo-opt[aria-disabled="false"]:hover { background: var(--accent-weak); }
#org-switcher[aria-busy="true"] { opacity: .65; }

.approval-request-dismissed { opacity: .55; }
.approval-request-dismissed:focus-within, .approval-request-dismissed:hover { opacity: .8; }

.attempt-item { position: relative; flex: 0 0 auto; }
.attempt-crown { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer; }
.attempt-crown svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.attempt-crown.principal { color: var(--accent); }
.attempt-crown.principal svg { fill: currentColor; }
.attempt-crown:hover:not(:disabled) { background: var(--accent-weak); color: var(--accent); }
.attempt-crown:focus-visible { outline: 2px solid var(--accent); }
.attempt-crown:disabled { cursor: default; }

/* Compact task payment controls; card entry follows the order on a physical card. */
.task-payments { display: grid; gap: 7px; margin: 12px 0; max-width: 440px; }
.payment-cards-label, .payment-budget-row label { font-size: var(--fs-12); font-weight: 600; }
.payment-picker { min-width: 0; }
.payment-search { flex: 1; min-width: 90px; width: 90px; border: 0; background: transparent; outline: none; padding: 5px; }
.payment-caret { position: absolute; right: 5px; top: 7px; border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 6px; }
.payment-budget-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.payment-budget { width: 100px; min-width: 0; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-12); }
.payment-currency { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-12); }
.payment-spent { color: var(--ink-3); font-size: var(--fs-11); font-variant-numeric: tabular-nums; }
.payment-save { justify-self: start; }
.payment-error { color: var(--ink-3); font-size: var(--fs-12); }
.payment-error:empty { display: none; }
.payment-empty { display: block; padding: 10px; color: var(--ink-3); }
.payment-card-form { max-width: 440px; display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.payment-card-form .form-row { margin: 0; min-width: 0; }
.payment-card-form input { width: 100%; }
.payment-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.payment-address { border: 0; border-top: 1px solid var(--line); padding: 12px 0 0; margin: 4px 0 0; display: grid; gap: 12px; }
.payment-address legend { padding-right: 8px; font-size: var(--fs-12); font-weight: 600; }
.payment-restrictions summary { font-size: var(--fs-12); color: var(--ink-3); cursor: pointer; margin-bottom: 6px; }
.task-payments :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.payment-add-card > summary { cursor: pointer; font-size: var(--fs-13); font-weight: 600; padding: 8px 0; }

/* Resource decisions share one compact list; saving a row never replaces its siblings. */
.resource-review-heading { display:flex; align-items:baseline; gap:10px; margin:12px 0 4px; }
.resource-review-list { border-top:1px solid var(--line); }
.resource-review-row { display:flex; align-items:center; gap:12px; min-height:42px; padding:5px 0; border-bottom:1px solid var(--line); }
.resource-review-name { display:flex; flex:1; min-width:0; flex-direction:column; }
.resource-review-name > * { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resource-review-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; }
@media (max-width:480px) { .resource-review-controls .resource-selection-state { display:none; } }

.text-prompt { width:min(480px,92vw); padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); }
.text-prompt::backdrop { background:rgba(0,0,0,.4); }

/* Organization storage: usage bar, over-limit note and what uses the space. */
.storage-over { color: var(--danger); }
/* What uses the space: one row per project (folded), its resources beneath;
   sizes line up in one column. */
.storage-contents { margin:4px 0 8px; border-top:1px solid var(--line); }
.storage-project { border-bottom:1px solid var(--line); }
.storage-project > summary, .storage-item { display:grid; grid-template-columns:minmax(0,1fr) 84px 132px; align-items:center; gap:10px; min-height:38px; }
.storage-project > summary { cursor:pointer; font-weight:600; list-style:none; }
.storage-project > summary::-webkit-details-marker { display:none; }
.storage-project > summary .storage-item-name::before { content:'▸'; display:inline-block; width:14px; text-align:center; color:var(--ink-3); transition:transform .12s; transform-origin:50% 50%; }
.storage-project[open] > summary .storage-item-name::before { transform:rotate(90deg); }
.storage-project .storage-item { padding-left:14px; font-size:var(--fs-13); color:var(--ink-2); min-height:34px; }
.storage-other .storage-item { padding-left:0; }
.storage-item-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.storage-size { text-align:right; font-variant-numeric:tabular-nums; }
.storage-item-action { display:flex; justify-content:flex-end; }
.storage-bucket { font-size:var(--fs-12); color:var(--ink-2); overflow-wrap:anywhere; }
.storage-connect { margin-top:8px; }

/* Installation → Service limits. One row per measure; every row shares the
   same columns so bars line up. The track is scored at 80% and 95%, where
   alerts fire, and a tick marks the 7-day high when it is above today. */
.service-limits { padding: 10px 16px 6px; container-type: inline-size; }
.limits-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.limits-head .info-dot { margin-left: 2px; vertical-align: -2px; }
.limits-head .btn { flex: none; white-space: nowrap; }
.limits-row { display: grid; grid-template-columns: 9rem minmax(10rem, 1fr) minmax(13rem, 1.45fr) 5.5rem;
  column-gap: 14px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--fs-13); line-height: 20px; }
.limits-row.cont { border-top-color: transparent; padding-top: 0; }
.limits-row > * { min-width: 0; }
.limits-service { overflow-wrap: anywhere; }
.limits-name.info-dot { color: var(--ink); font-weight: 600; }
.limits-off .info-dot { vertical-align: -2px; }
.limits-plan { display: block; color: var(--ink-3); font-size: var(--fs-11h); line-height: 16px; }
.limits-failed { display: block; color: var(--danger); font-size: var(--fs-11h); line-height: 16px; }
.limits-measure { color: var(--ink-2); }
/* The measure's own name opens its explanation (hover, or tap on a phone). */
.limits-label.info-dot { display: inline; width: auto; height: auto; border-radius: 0; background: none; color: inherit;
  font-size: inherit; line-height: inherit; text-align: left; cursor: help; }
.limits-label.info-dot:hover { color: var(--ink); }
/* Unconnected services: one folded row with a count; inside, each says how to connect. */
.limits-off-fold { border-top: 1px solid var(--line); }
.limits-off-fold > summary { display: flex; align-items: center; gap: 8px; padding: 7px 0; cursor: pointer; list-style: none; font-size: var(--fs-13); line-height: 20px; font-weight: 600; color: var(--ink); }
.limits-off-fold > summary::-webkit-details-marker { display: none; }
.limits-off-fold > summary::before { content: '›'; width: 10px; color: var(--ink-3); font-size: 16px; line-height: 1; transition: transform .12s; }
.limits-off-fold[open] > summary::before { transform: rotate(90deg); }
.limits-off-fold > summary .setting-muted { font-weight: 400; }
.limits-off-fold .limits-off { font-size: var(--fs-12h); }
.limits-link { font-weight: 600; }
.limits-usage, .limits-actions { min-height: 20px; }
.limits-usage { display: flex; align-items: center; gap: 8px; }
.limits-bar { position: relative; flex: 1 1 auto; min-width: 48px; height: 6px; border-radius: 999px; background: var(--line); }
.limits-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.limits-bar::before, .limits-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--surface); }
.limits-bar::before { left: calc(80% - 1px); }
.limits-bar::after { left: calc(95% - 1px); }
.limits-peak { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink-3); }
.limits-row[data-level="80"] .limits-bar > i { background: var(--working); }
.limits-row[data-level="95"] .limits-bar > i { background: var(--danger); }
.limits-numbers { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.limits-limit { color: var(--ink-2); }
.limits-limit.entered { text-decoration: underline dotted; text-underline-offset: 3px; }
.limits-level { min-width: 3.4em; padding: 1px 5px; border-radius: 4px; color: var(--ink-3); font-size: var(--fs-11);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.limits-level.warn { background: var(--working-weak); color: var(--ink); }
.limits-level.critical { background: var(--danger-weak); color: var(--ink); font-weight: 600; }
.limits-none, .limits-off { color: var(--ink-3); }
.limits-row.off { grid-template-columns: 9rem 1fr 5.5rem; }
.limits-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.limits-actions a { color: var(--accent); text-decoration: none; }
.limits-actions a:hover { text-decoration: underline; }
.limits-edit { padding: 0 2px; border: 0; background: none; color: var(--ink-3); font: inherit; cursor: pointer; }
.limits-edit:hover, .limits-edit:focus-visible { color: var(--accent); }
.limits-editor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 8px; padding: 10px 12px;
  border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-12h); }
.limits-editor label { display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); }
.limits-editor input, .limits-editor select { width: 11rem; }
.limits-editor [data-cloudflare-account] { width: 17rem; font-family: var(--font-mono); }
.limits-editor-actions { display: flex; gap: 6px; }
/* Narrow cards (a phone, or a narrow settings column): name and actions, then the measure, then its bar. */
@container (max-width: 600px) {
  .limits-row { grid-template-columns: 1fr auto; grid-template-areas: "service actions" "measure measure" "usage usage"; row-gap: 3px; }
  .limits-row.cont { grid-template-areas: "measure measure" "usage usage"; }
  .limits-row.cont .limits-service, .limits-row.cont .limits-actions { display: none; }
  .limits-row.off { grid-template-columns: 1fr auto; grid-template-areas: "service actions" "off off"; }
  .limits-service { grid-area: service; } .limits-measure { grid-area: measure; } .limits-actions { grid-area: actions; }
  .limits-usage { grid-area: usage; } .limits-off { grid-area: off; }
}

/* app sign-ins: /device, OAuth consent, Profile → Apps and tokens */
.grant-card { width: 360px; max-width: calc(100vw - 32px); }
.grant-brand { margin-bottom: 16px; }
.grant-title { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 17px; font-weight: 600; }
.grant-code { width: 100%; box-sizing: border-box; padding: 12px 8px; border: 1px dashed var(--line-strong); border-radius: var(--r);
  background: var(--surface-2); color: var(--ink); font-family: var(--font-mono); font-size: 26px; letter-spacing: .22em;
  text-align: center; text-transform: uppercase; }
.grant-code[readonly] { border-style: solid; border-color: var(--accent); background: var(--accent-weak); }
.grant-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 8px; }
.grant-who .task-sub { margin: 0; }
.grant-limit { margin: 8px 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.grant-limit summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: var(--fs-13); cursor: pointer; list-style: none; }
.grant-limit summary::-webkit-details-marker { display: none; }
.grant-limit summary::after { content: '▾'; color: var(--ink-3); }
.grant-limit[open] summary::after { content: '▴'; }
.grant-limit-label { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.grant-limit-value { margin-left: auto; font-weight: 500; text-align: right; }
.grant-limit-body { display: grid; gap: 8px; padding: 0 10px 10px; }
.grant-limit-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: var(--fs-13); }
.grant-limit-projects { display: grid; gap: 4px; max-height: 160px; margin: 0; padding: 0; overflow: auto; border: 0; font-size: var(--fs-13); }
.grant-limit-projects legend { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; padding: 0; color: var(--ink-2); }
.grant-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grant-actions[hidden] { display: none; }
.grant-continue { width: 100%; margin-top: 12px; }
.grant-continue[hidden] { display: none; }
.grant-msg { min-height: 16px; margin: 8px 0 0; color: var(--danger); font-size: var(--fs-12); }
.app-grant-row .task-sub { margin: 2px 0 0; }
.app-token-new:empty { display: none; }
.app-token-form, .app-token-once { display: grid; gap: 8px; margin: 10px 0; }
.app-token-value { display: flex; gap: 6px; }
.app-token-value input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-12); }
#app-token-open[hidden] { display: none; }
.grant-limit-row select, .app-token-form input[name=name] { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--ink); font-size: var(--fs-13); }
.grant-actions .btn, .grant-continue { justify-content: center; }
.grant-msg:empty { display: none; }
.app-token-form .grant-limit, .app-token-form .form-row { margin: 0; }
.app-token-once > .btn { justify-self: start; }

/* ── One conversation, several agents (software-dev ≥1.27) ───────────────── */
.msg-to { font-size: var(--fs-11); color: currentColor; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
.activity-speaker { flex: none; font: 600 var(--fs-11)/1.6 var(--font-ui); color: var(--accent); margin-right: 6px; }
.ck-stop { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer; }
.ck-stop:hover { background: var(--surface); color: var(--danger); }
.followup-stop { flex: none; display: grid; place-items: center; padding: 0 10px; min-height: 38px; color: var(--ink-2); }
.followup-stop:hover { color: var(--danger); }
.agent-mention-menu { min-width: 240px; }
.agent-mention-menu .am-key { flex: none; width: 26px; font: 11px var(--font-mono); color: var(--ink-3); }
.agent-mention-menu .am-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.agent-mention-menu .wm-main { flex-direction: row; align-items: baseline; gap: 8px; }
.agent-mention-menu .wm-ref { flex: none; max-width: 100%; }
.agent-mention-menu .wm-desc { flex: 1; min-width: 0; }
.followup-new-agent { margin-top: 8px; padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 8px; background: var(--surface); }
.followup-new-agent .parameter-fields .agent-field { margin: 0; }
.followup-new-agent .fna-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: var(--fs-12h); }
.followup-new-agent .fna-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.followup-new-agent .fna-fields select, .followup-new-agent .fna-fields input { flex: 1 1 120px; min-width: 0; }
.escalate-form { display: flex; flex-direction: column; gap: 10px; width: min(440px, 92vw); }

/* ── The Agent block (task form, Task defaults, Parameters, New agent…) ─────
   One compact control per agent: Instructions (agents other than the main one),
   harness · model · effort, Tools, Fork, and a collapsed Authorization row. */
.label-row:has(.label-row-fill) label { flex: 0 1 auto; }
.label-row-fill { flex: 1; }
.agent-block { display: grid; gap: 8px; }
.agent-block > .mcp-picker { margin: 0; }
.agent-block .ab-instructions { width: 100%; min-height: 44px; resize: vertical; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; font-size: var(--fs-13); }
.agent-block .ab-instructions:focus { border-color: var(--accent); outline: none; }
.agent-block .af-resume-toggle { margin: 0; }
.agent-authority { border-top: 1px dashed var(--line); padding-top: 6px; min-width: 0; }
.agent-authority[hidden] { display: none; }
.tp-follow-ups { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 10px; min-width: 0; }
.tp-follow-ups .params-save-bar { position: static; margin-top: 8px; padding-top: 4px; background: none; }
.tp-follow-ups > summary .pf-summary { color: var(--ink-3); font-weight: 400; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-authority > summary, .tp-follow-ups > summary {
  display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none;
  font-size: var(--fs-12); color: var(--ink-2); user-select: none; padding: 2px 0;
}
.agent-authority > summary::-webkit-details-marker, .tp-follow-ups > summary::-webkit-details-marker { display: none; }
.agent-authority > summary::before, .tp-follow-ups > summary::before { content: '▸'; color: var(--ink-3); font-size: var(--fs-10); width: 8px; transition: transform .12s; }
.agent-authority[open] > summary::before, .tp-follow-ups[open] > summary::before { transform: rotate(90deg); }
.agent-authority .aa-title { font-weight: 600; }
.agent-authority .aa-summary { color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-authority .aa-body { display: grid; gap: 8px; padding: 8px 0 2px 18px; }
.agent-authority .aa-body > .form-row { margin: 0; padding: 0; }
/* Level and projects side by side; the explanation is the select's tooltip. */
.agent-authority .authz-editor { grid-template-columns: minmax(150px, .8fr) minmax(0, 1.6fr); align-items: start; }
.agent-authority .authz-description { display: none; }
.agent-authority .authz-warning { grid-column: 1 / -1; }
.agent-authority .aa-resources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agent-authority .aa-resources > .form-row { margin: 0; padding: 0; }
.agent-authority .tf-vault-button { width: auto; gap: 10px; min-height: 36px; }
.agent-authority .aa-resources { flex-wrap: nowrap; }
/* Vault · Cards · Budget on one line: the payment controls join the row. */
.agent-authority .aa-resources > .task-payments { display: contents; }
.agent-authority .payment-cards-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.agent-authority .payment-picker { flex: 1 1 160px; min-width: 140px; }
.agent-authority .payment-budget { width: 90px; }
@media (max-width: 700px) { .agent-authority .aa-resources { flex-wrap: wrap; } }
.agent-authority .aa-reset { justify-self: start; }
@media (max-width: 700px) { .agent-authority .authz-editor { grid-template-columns: 1fr; } }

/* Responder and Review-route rows: kind · who on one line. */
.route-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.route-row > select { flex: 0 0 auto; width: auto; }
.route-row > .route-kind { flex: none; align-self: stretch; }
.route-row > .route-kind > button { display: flex; align-items: center; }
.route-row > .cf-human { flex: 1 1 auto; min-width: 0; }
.route-row .cf-layer-num { font-size: var(--fs-11); color: var(--ink-3); min-width: 14px; text-align: right; }
.route-row .cf-layer-tools { display: inline-flex; gap: 4px; margin-left: auto; }
/* A phone puts a review step's people on their own line under its kind and tools. */
@media (max-width: 560px) {
  .cf-layer-head.route-row { flex-wrap: wrap; }
  .cf-layer-head.route-row > .cf-human { order: 5; flex-basis: 100%; }
}
.cf-human[hidden], .cf-agent[hidden], .cf-empty[hidden] { display: none; }
.confirmer-field .cf-layer { padding: 8px 10px; }
.confirmer-field .cf-agent, .responder-field .cf-agent { margin-top: 8px; }
.confirmer-field .cf-agent { margin-left: 22px; }
.cf-empty { font-size: var(--fs-12); color: var(--ink-3); padding: 2px 0 6px; }

/* Task form main column: one section per agent, then where/when it runs. */
.tf-main > .tf-section { padding: 16px 0 4px; border-top: 1px solid var(--line); margin-top: 14px; }
.tf-main > .tf-section > .form-row { margin-bottom: 8px; }
/* Inside a form row the generic input rules would box the cards search again. */
.agent-authority .task-payments .payment-search { border: 0; background: transparent; box-shadow: none; padding: 5px; min-height: 0; height: auto; }
.agent-authority .payment-budget-row { flex-wrap: nowrap; }
.agent-authority .payment-budget-row label { white-space: nowrap; }
.agent-authority .payment-budget { height: 36px; }
/* A Reviewer's block sits inside its layer card; one frame is enough. */
.parameter-fields .cf-layer .agent-field { border: 0; padding: 0; background: none; }

/* Parameters tab: the task form's shape, frozen parts read-only in place. */
.tp-section { padding: 12px 0 2px; border-top: 1px solid var(--line); }
.tp-section:first-child { border-top: 0; padding-top: 4px; }
.tp-section > .form-row, .tp-section > .pf-edit-row { margin-bottom: 8px; }
.pf-lock { color: var(--ink-3); font-size: var(--fs-11); }
.pf-agent-state { font-size: var(--fs-10); text-transform: lowercase; }
.pf-ro { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ab-frozen, .pf-fieldset { border: 0; padding: 0; margin: 0; min-inline-size: auto; display: grid; gap: 8px; }
.ab-frozen > *, .pf-fieldset > * { opacity: .7; }
/* Who created the task: one quiet line above its parameters. */
.tp-creator { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 2px 0 10px; font-size: var(--fs-13); color: var(--ink-2); }
.tp-creator-label { font-size: var(--fs-12); font-weight: 600; color: var(--ink-3); }
.tp-creator-who { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.tp-creator-who a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.tp-creator-who a:hover { text-decoration-color: currentColor; }
.tp-creator-via, .tp-creator-at { color: var(--ink-3); }
.tp-creator-at::before { content: '·'; margin-right: 8px; }
.tp-creds-head { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.tp-creds-head label { font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.agent-authority #tp-auth { display: grid; gap: 8px; }
.agent-authority #tp-auth .params-save-bar { position: static; margin-top: 0; padding-top: 4px; background: none; }
/* The main agent's cards and budget save with its authorization. */
.agent-authority .payment-save { display: none; }
.agent-authority .aa-resources > .task-payments > .payment-spent { white-space: nowrap; }

/* Task defaults (organization and project): the task form's shape. */
.task-defaults { display: grid; gap: 0; }
.task-defaults > .td-section { padding: 14px 0 6px; border-top: 1px solid var(--line); }
.task-defaults > .td-section:first-child { border-top: 0; padding-top: 2px; }
.task-defaults .td-profile { margin-bottom: 8px; }
.task-defaults .td-actions { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
/* A long card keeps its Save in view while something is unsaved. */
.task-defaults .td-actions:has(> .save-state[data-state="dirty"]) {
  position: sticky; bottom: 0; z-index: 3; padding-bottom: 10px; margin-bottom: -10px; background: var(--surface);
}
.task-defaults .td-actions > .save-state + .btn { margin-left: 0; }
.task-defaults .td-actions .resource-error { color: var(--danger); font-size: var(--fs-12); }
.parameter-fields .agent-controls:has(.pf-maxturns) { grid-template-columns: minmax(105px,.65fr) minmax(170px,1.6fr) minmax(115px,.75fr) 90px; }
.parameter-fields .agent-field .agent-controls .pf-maxturns { width: 100%; }
.resource-defaults { display: grid; gap: 8px; }
.resource-defaults .resource-reset { justify-self: start; }
@media (max-width: 700px) { .parameter-fields .agent-controls:has(.pf-maxturns) { grid-template-columns: 1fr; } }

.cf-max-revisions { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fs-12); color: var(--ink-2); }
.cf-max-revisions input { width: 72px; }

/* ── The Computer block (task form, Task defaults, Parameters) ── */
.parameter-fields .computer-field { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); display: grid; gap: 8px; }
.computer-controls { display: grid; grid-template-columns: minmax(120px, 1.1fr) repeat(3, minmax(92px, .8fr)); gap: 8px; }
.computer-pick > select, .computer-size input, .computer-more input, .computer-more select {
  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: var(--fs-13);
}
.computer-pick > select:focus, .computer-size input:focus, .computer-more input:focus, .computer-more select:focus { border-color: var(--accent); }
.computer-size { position: relative; display: block; min-width: 0; margin: 0; }
.computer-size input { padding-right: 58px; font-variant-numeric: tabular-nums; }
.computer-size input::-webkit-inner-spin-button { opacity: .5; }
.computer-size > span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: var(--fs-11h); pointer-events: none; white-space: nowrap; }
.computer-more { border-top: 1px dashed var(--line); padding-top: 6px; min-width: 0; }
.computer-more > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; font-size: var(--fs-12); color: var(--ink-2); font-weight: 600; user-select: none; padding: 2px 0; }
.computer-more > summary::-webkit-details-marker { display: none; }
.computer-more > summary::before { content: '▸'; color: var(--ink-3); font-size: var(--fs-10); width: 8px; transition: transform .12s; }
.computer-more[open] > summary::before { transform: rotate(90deg); }
.computer-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 8px 0 2px 18px; }
.computer-more-grid > .form-row { margin: 0; gap: 4px; }
.computer-more-grid > .form-row > span { display: flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: var(--fs-12); }
.computer-more .cf-allowlist { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.computer-more .cf-allowlist[hidden] { display: none; }
.computer-field fieldset.ab-frozen { display: grid; gap: 8px; }
@media (max-width: 700px) {
  .computer-controls { grid-template-columns: 1fr 1fr; }
  .computer-more-grid, .computer-more .cf-allowlist { grid-template-columns: 1fr; padding-left: 0; }
}

/* ── Computers (Settings → Projects, Project → Computers) ── */
.computer-providers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.computer-providers > :is(.computer-provider, .computer-any) { min-width: 0; flex-wrap: wrap; }
.computer-add { position: relative; justify-self: start; }
.computer-add > summary { list-style: none; }
.computer-add > summary::-webkit-details-marker { display: none; }
.computer-add-menu { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; display: grid; min-width: 180px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.computer-add-menu > .computer-provider { min-height: 0; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: var(--fs-13); text-align: left; cursor: pointer; }
.computer-add-menu > .computer-provider:hover, .computer-add-menu > .computer-provider:focus-visible { background: var(--surface-2); }
.computer-provider { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.computer-provider > b { min-width: 72px; }
/* What provider "Any" can choose among: a summary row above the accounts. */
.computer-any { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.computer-any .computer-reach { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The provider and, for Any, what it can reach (ⓘ inside the select, before its arrow). */
.computer-pick { position: relative; display: block; min-width: 0; }
.computer-pick > .cf-reach { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); display: inline-flex; }
.computer-pick > .cf-reach[hidden] { display: none; }
.computer-provider .chip[title] { cursor: help; }
.computer-provider .computer-held-toggle { font: inherit; cursor: pointer; }
.computer-held { display: grid; gap: 4px; margin: -4px 0 4px 18px; }
.computer-held-row { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 10px; border-left: 2px solid var(--line); }
.computer-dialog { width: min(520px, calc(100vw - 28px)); display: grid; gap: 12px; }
.computer-dialog .modal-head { display: flex; align-items: center; gap: 8px; }
.computer-dialog .form-row { margin: 0; }
.computer-dialog .form-row > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: var(--fs-12); font-weight: 600; }
.computer-key-link { font-weight: 400; font-size: var(--fs-12); }
.computer-key-file { font-family: var(--mono, ui-monospace, monospace); font-size: var(--fs-12); resize: vertical; min-height: 4.5em; }
.computer-advanced > summary { cursor: pointer; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.computer-advanced .settings-grid { margin-top: 10px; }
.computer-dialog .modal-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.computer-dialog .modal-actions .label-row-fill { flex: 1; }
.computer-size input { -moz-appearance: textfield; appearance: textfield; }
/* A size above what the provider account allows (its hover text says how much). */
.computer-size input:invalid { border-color: var(--danger); }
/* Task header: the computer's disk in use, filled to its share (wiki features/computers). */
.disk-meter { font: inherit; color: var(--ink-3); cursor: help; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-2) var(--used, 0%), transparent var(--used, 0%)); font-variant-numeric: tabular-nums; }
.free-computer { font: inherit; cursor: pointer; }
/* Task header: where the computer is (provider · size); why, on hover. */
.runs-on { color: var(--ink-3); cursor: help; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-variant-numeric: tabular-nums; }
.disk-meter.warn { color: var(--danger); border-color: var(--danger); background: linear-gradient(90deg, var(--danger-weak) var(--used, 0%), transparent var(--used, 0%)); }
.computer-size input::-webkit-inner-spin-button, .computer-size input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Model field: one harness:model:effort input (web/app.js modelFieldHtml) ──
   At rest the typed value is drawn as a harness dot, the model's name and its
   effort; focusing the input shows the raw text to edit. */
[data-harness="codex"] { --harness: var(--viz-1); }
[data-harness="claude"] { --harness: var(--viz-2); }
[data-harness="opencode"] { --harness: var(--viz-3); }
.model-field { flex: 1; min-width: 180px; }
.model-field > input { padding-right: 58px !important; font-family: var(--font-mono); font-size: var(--fs-12h); }
.model-field:not(:has(.mf-chart)) > input { padding-right: 30px !important; }
.model-field > input:not(:focus):has(~ .mf-face:not(:empty)) { color: transparent; }
.model-field > input:focus ~ .mf-face { display: none; }
.mf-face {
  position: absolute; inset: 1px 58px 1px 1px; display: flex; align-items: center; gap: 7px;
  padding: 0 10px; pointer-events: none; overflow: hidden; white-space: nowrap; font-size: var(--fs-13);
}
.model-field:not(:has(.mf-chart)) .mf-face { right: 30px; }
.mf-harness { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--ink-2); font-size: var(--fs-11h); }
.mf-harness::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--harness, var(--viz-other)); }
.mf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 550; color: var(--ink); }
.mf-effort {
  flex: none; padding: 1px 7px; border-radius: 999px; background: var(--accent-weak);
  color: var(--ink-2); font-size: var(--fs-11); font-weight: 550;
}
.mf-chart {
  position: absolute; top: 0; right: 28px; height: 100%; width: 28px; border: 0; background: none;
  color: var(--ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mf-chart:hover, .mf-chart:focus-visible { color: var(--accent); }
.mf-menu { min-width: min(460px, 92vw); max-height: 300px; }
.mf-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; }
.mf-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.mf-row-name code { margin-left: 4px; color: var(--ink-3); font-size: var(--fs-10h); font-weight: 400; background: none; padding: 0; }
.mf-efforts { display: inline-grid; grid-auto-flow: column; grid-auto-columns: auto; gap: 2px; }
.mf-effort-gap { visibility: hidden; }
.mf-effort-chip {
  border: 1px solid transparent; border-radius: 999px; background: none; padding: 1px 6px;
  color: var(--ink-3); font: inherit; font-size: var(--fs-10h); cursor: pointer;
}
.mf-effort-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.mf-effort-chip.on { background: var(--surface); border-color: var(--accent); color: var(--ink); }
.parameter-fields .agent-controls:has(.model-field) { grid-template-columns: minmax(0, 1fr); }
.parameter-fields .agent-controls:has(.model-field):has(.pf-maxturns) { grid-template-columns: minmax(0, 1fr) 90px; }
.parameter-fields .agent-field .agent-controls .model-field > input { font-family: var(--font-mono); font-size: var(--fs-12h); }

/* Compare models: intelligence against cost or time (openModelChart). */
.model-chart { width: min(760px, 96vw); max-height: 94vh; overflow: auto; padding: 16px 18px 12px; }
.mc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.mc-head .section-h { margin: 0; flex: 1; }
.mc-metric { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); }
.mc-metric button { border: 0; background: none; padding: 4px 12px; border-radius: 6px; color: var(--ink-2); font: inherit; font-size: var(--fs-12h); cursor: pointer; }
.mc-metric button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.mc-plot { position: relative; min-height: 240px; }
.mc-svg { display: block; width: 100%; height: auto; font-family: var(--font-ui); }
.mc-grid { stroke: var(--line); stroke-width: 1; }
.mc-tick { fill: var(--ink-3); font-size: var(--fs-10h); }
.mc-axis { fill: var(--ink-2); font-size: var(--fs-11); font-weight: 600; }
.mc-ladder { fill: none; stroke: var(--harness); stroke-opacity: .35; stroke-width: 1.5; stroke-linejoin: round; }
.mc-frontier { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 0 4.5; stroke-linecap: round; opacity: .8; }
.mc-label { fill: var(--ink-2); font-size: var(--fs-10h); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.mc-point { cursor: pointer; outline: none; }
.mc-hit { fill: transparent; }
.mc-dot { fill: var(--harness); stroke: var(--surface); stroke-width: 2; }
.mc-current { fill: none; stroke: var(--ink); stroke-width: 2; }
.mc-point:hover .mc-dot, .mc-point:focus-visible .mc-dot { r: 7; }
.mc-point:focus-visible .mc-hit { stroke: var(--accent); stroke-width: 2; }
.mc-tip {
  position: absolute; z-index: 2; display: grid; gap: 2px; max-width: 280px; padding: 7px 9px; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); font-size: var(--fs-12);
}
.mc-tip[hidden] { display: none; }
.mc-tip code { color: var(--ink-3); font-size: var(--fs-11); background: none; padding: 0; }
.mc-tip span { color: var(--ink-2); }
.mc-empty { display: grid; place-items: center; min-height: 240px; color: var(--ink-3); font-size: var(--fs-13); }
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: var(--fs-12); color: var(--ink-3); }
.mc-legend { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.mc-key { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; color: var(--ink-2); font: inherit; cursor: pointer; }
.mc-key i { width: 9px; height: 9px; border-radius: 50%; background: var(--harness); }
.mc-key[aria-pressed="false"] { color: var(--ink-3); text-decoration: line-through; }
.mc-key[aria-pressed="false"] i { background: none; box-shadow: inset 0 0 0 1.5px var(--harness); }
.mc-key-frontier { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.mc-key-frontier i { width: 14px; height: 0; border-top: 2px dotted var(--ink-2); opacity: .8; }
.mc-source { display: inline-flex; align-items: center; gap: 4px; }
.mc-source a { color: var(--ink-2); }

/* ── Shared settings vocabulary ────────────────────────────────────────────
   A setting is one row: what it is, its current value, what you can do. */
.setting-rows { display:flex; flex-direction:column; }
.setting-rows > * + .setting-row, .setting-rows > .setting-row + * { border-top:1px solid var(--line); }
.setting-rows.ruled { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.setting-row { display:flex; align-items:center; gap:12px; min-height:44px; padding:5px 0; }
.setting-label { flex:none; display:flex; align-items:center; gap:6px; width:152px; color:var(--setting-label); font-size:var(--setting-label-size); font-weight:var(--setting-label-weight); }
.setting-value { flex:1; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:var(--fs-13); overflow-wrap:anywhere; color:var(--setting-value); }
.setting-value > .combo { flex:1; max-width:340px; }
.setting-muted { color:var(--ink-3); }
.setting-sep { color:var(--ink-3); }
.setting-warn { color:var(--warn); }
.setting-actions { flex:none; display:flex; align-items:center; gap:6px; }
/* A password store's items waiting to be written back: their own line under its row, never squeezed beside its actions. */
.setting-row:has(> .conn-pending) { flex-wrap:wrap; }
.conn-pending { flex-basis:100%; display:flex; flex-direction:column; gap:6px; padding-left:164px; font-size:var(--fs-13); }
.conn-pending > span { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
@media (max-width: 720px) { .conn-pending { padding-left:0; } }
.setting-row.danger .setting-label { color:var(--danger); }
.card > .section-h + .setting-rows { margin-top:-4px; }
@media (max-width:560px) {
  .setting-row { flex-wrap:wrap; gap:4px 12px; padding:8px 0; }
  .setting-label { width:100%; }
}
/* An on/off setting. */
input.toggle { appearance:none; -webkit-appearance:none; flex:none; position:relative; width:32px; height:18px; margin:0; padding:0; border:0; border-radius:999px; background:var(--line-strong); cursor:pointer; transition:background .15s; }
input.toggle::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgb(0 0 0 / .25); transition:transform .15s; }
input.toggle:checked { background:var(--accent); }
input.toggle:checked::after { transform:translateX(14px); }
input.toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input.toggle:disabled { opacity:.45; cursor:not-allowed; }
/* One of a few choices, all visible. */
.segmented { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }
.segmented button { padding:4px 12px; border:0; border-radius:6px; background:none; color:var(--ink-3); font-size:var(--fs-12h); cursor:pointer; }
.segmented button:hover { color:var(--ink); }
.segmented button[aria-pressed="true"] { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgb(0 0 0 / .1); }
/* Bare fields inside cards look like every other field; any class rule wins. */
:where(.card, .modal-card) :where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"], [type="hidden"]), select, textarea) {
  padding:7px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--ink); outline:none;
}
:where(.card, .modal-card) :where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"], [type="hidden"]), select, textarea):focus { border-color:var(--accent); }
.btn.ghost { border-color:transparent; background:none; }
.btn.ghost:hover { background:var(--surface-2); border-color:var(--line); }
/* Profile: GitHub accounts sit inside their setting row, unboxed. */
.profile-github-row { align-items:flex-start; }
.profile-github-row > .setting-label { min-height:32px; }
.profile-github { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; }
.profile-github .github-account-list { flex-basis:100%; gap:0; margin:0; }
.profile-github .github-account-list:empty { display:none; }
.profile-github .github-account-row { min-height:36px; padding:2px 0; border:0; border-radius:0; background:none; }
.profile-github .github-account-row b { font-size:var(--fs-13); }
.profile-github > .card { flex-basis:100%; }
.notify-grid input[type="checkbox"] { width:15px; height:15px; margin:0; accent-color:var(--accent); cursor:pointer; }
.notify-grid input[type="checkbox"]:disabled { cursor:not-allowed; }
.notify-head span[title] { cursor:help; }
.notify-sound-options { gap:8px; }
.notify-note { margin:10px 0 0; color:var(--ink-3); font-size:var(--fs-12); }
#notifications > #notify-permission { margin-top:12px; }
.section-h-action { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-h-action .btn { text-transform:none; letter-spacing:0; }
.app-grants-empty { margin:0; }
.profile-github > .setting-muted { font-size:var(--fs-13); }
.setting-value > .setting-input { flex:1; min-width:0; max-width:380px; }
.member-line .setting-value b { font-weight:600; }
.wf-pin { min-width:150px; }
/* A one-click action listed like the disclosures around it. */
.action-row { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:0; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.action-row::after { content:'›'; color:var(--ink-3); font-size:20px; }
.action-row > span { margin-left:auto; color:var(--ink-3); font-size:var(--fs-12); }
.action-row:hover b { color:var(--accent); }
.action-row:disabled { opacity:.6; cursor:progress; }
.settings-disclosure + .action-row, .action-row + div + .settings-disclosure { margin-top:10px; }
#environment-propose { margin-bottom:6px; }
@media (max-width: 850px) { .action-row > span { display:none; } }
/* Every on/off checkbox in a .switch reads as a toggle. */
.switch > input[type="checkbox"] { appearance:none; -webkit-appearance:none; flex:none; position:relative; width:32px; height:18px; margin:0; padding:0; border:0; border-radius:999px; background:var(--line-strong); cursor:pointer; transition:background .15s; }
.switch > input[type="checkbox"]::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgb(0 0 0 / .25); transition:transform .15s; }
.switch > input[type="checkbox"]:checked { background:var(--accent); }
.switch > input[type="checkbox"]:checked::after { transform:translateX(14px); }
.switch > input[type="checkbox"]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.switch > input[type="checkbox"]:disabled { opacity:.45; cursor:not-allowed; }
.section-h-action .btn.ghost { color:var(--accent); font-weight:600; }
/* People: a role's description is on hover (title), not under every select. */
.authz-member-row .authz-description, .authz-invite-row .authz-description { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.authz-member-row { align-items:flex-start; padding:8px 0; }
.authz-member-row > .icon-btn { margin-top:6px; }
.authz-member-row > .chip { margin-top:8px; }
.authz-invite-row { padding-top:12px; border-top:1px solid var(--line); }
.team-create { margin-top:8px; }
/* Agent accounts */
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none; }
.status-dot.ok { background:var(--ok, #4ec9a3); }
.status-dot.warn { background:var(--warn, #e0b15a); }
.status-dot.bad { background:var(--danger); }
.account-add .setting-value input.grow { flex:1; min-width:110px; }
.account-add .account-provider { width:120px; }
.account-add-note { font-size:var(--fs-12); color:var(--ink-3); }
.account-add-note:empty { display:none; }
.workflow-line .setting-value { flex-wrap:nowrap; }
.workflow-description { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-3); font-size:var(--fs-12); }
.workflow-line .setting-value > b { flex:none; white-space:nowrap; }
#accounts-card .section-h + .account-add { margin-top:0; }
/* Inline disclosures share one chevron instead of the browser triangle. */
:is(.payment-add-card, .pay-stripe, .pay-cardholder, .payment-restrictions, .vault-custom, .authorization-role) > summary { display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; font-weight:600; padding:6px 0; }
:is(.payment-add-card, .pay-stripe, .pay-cardholder, .payment-restrictions, .vault-custom, .authorization-role) > summary::-webkit-details-marker { display:none; }
:is(.payment-add-card, .pay-stripe, .pay-cardholder, .payment-restrictions, .vault-custom, .authorization-role) > summary::before { content:'›'; display:inline-block; width:10px; color:var(--ink-3); font-size:17px; line-height:1; transition:transform .15s; }
:is(.payment-add-card, .pay-stripe, .pay-cardholder, .payment-restrictions, .vault-custom, .authorization-role)[open] > summary::before { transform:rotate(90deg); }

/* A task's own command: one folded row under the task's settings. */
.tf-command > summary { cursor:pointer; color:var(--ink-2); font-size:var(--fs-13); padding:4px 0; list-style:none; }
.tf-command > summary::-webkit-details-marker { display:none; }
.tf-command > summary::before { content:'›'; display:inline-block; width:14px; color:var(--ink-3); transition:transform .15s; }
.tf-command[open] > summary::before { transform:rotate(90deg); }
.tf-command[open] > .form-row textarea { min-height:0; font-family:var(--mono, ui-monospace, monospace); font-size:var(--fs-12h); }

/* Project settings → Events: sources, then what recent events did. */
.pe-add { display:inline-flex; gap:4px; }
.pe-new, .pe-reveal { display:flex; flex-direction:column; gap:8px; padding:10px; margin:6px 0 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.pe-new.inline-form { flex-direction:row; flex-wrap:wrap; }
.pe-new input { min-width:0; flex:1 1 160px; }
.pe-starts { display:flex; align-items:center; gap:8px; font-size:var(--fs-13); }
.pe-reveal code { word-break:break-all; font-size:var(--fs-12); }
.pe-event > summary { list-style:none; cursor:pointer; }
.pe-event > summary::-webkit-details-marker { display:none; }
.pe-event code { font-size:var(--fs-12); }
.pe-payload { max-height:280px; overflow:auto; margin:0 0 8px; padding:8px 10px; font-size:var(--fs-11h); background:var(--surface-2); border-radius:8px; }
.setting-value .warn { color:var(--warn); }
.pe-new input.toggle { flex:none; min-width:0; }
.pe-sub > .setting-label { padding-left:16px; }
.pe-people .setting-value { display:flex; flex-wrap:wrap; gap:4px; }
.pe-person { display:inline-flex; align-items:center; gap:2px; }
.triggers-block label[for="ev-type"] { align-self:start; padding-top:8px; }

/* Task store rows (the Task store view and the default view's recommendations):
   ready-made tasks; a row opens the task form filled in from one. */
.store-need { font-size: var(--fs-12h); color: var(--ink-3); }
.store-installed { font-size: var(--fs-12h); color: var(--ok, #2f9e44); white-space: nowrap; }
.store-recs .task-group-heading { margin-top: 22px; font-size: var(--fs-15); }
.store-recs .task-group-heading a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.store-recs #store-recs-dismiss { margin-left: auto; align-self: baseline; }
.store-recs { margin-bottom: 24px; }
.store-recs-more { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 6px 2px 0; font-size: var(--fs-12h); color: var(--ink-3); }
.store-recs-more a { color: var(--ink-2); text-decoration: none; }
.store-recs-more a:hover { color: var(--accent); }

/* ── Save state ─────────────────────────────────────────────────────────────
   One note for every form whose edits wait to be saved: beside its Save
   button (settings cards, task Parameters) and, quieter, in the task form
   head. Amber only while something is unsaved; never a check mark then. */
.save-state {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font-size: var(--fs-12); line-height: 22px; color: var(--ink-3); white-space: nowrap;
}
.save-state:empty { display: none; }
.save-state::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.save-state[data-state="dirty"] {
  padding: 0 10px 0 9px; border-radius: 999px; font-weight: 600;
  color: color-mix(in srgb, var(--working) 72%, var(--ink));
  background: var(--working-weak);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--working) 32%, transparent);
}
.save-state[data-state="dirty"]::before {
  background: var(--working); box-shadow: 0 0 0 3px color-mix(in srgb, var(--working) 22%, transparent);
}
.save-state.quiet[data-state="dirty"] { padding: 0; background: none; box-shadow: none; font-weight: 500; }
.save-state[data-state="saving"]::before { background: var(--accent); animation: save-state-pulse 1s ease-in-out infinite; }
.save-state[data-state="saved"]::before {
  content: '✓'; width: auto; height: auto; border-radius: 0; background: none; color: var(--merged); font-weight: 700;
}
.save-state[data-state="error"] { color: var(--danger); }
.save-state + [data-unsaved-save] { margin-left: 8px; }
@keyframes save-state-pulse { 50% { opacity: .3; } }
@keyframes save-state-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .save-state::before, .params-save-bar .save-state { animation: none !important; }
}

/* ── Task templates ─────────────────────────────────────────────────────────
   The `n` picker and the project picker (a .numbered-picker), a template's number wherever it is listed, the
   Templates card in Task defaults, and the template form's head. */
.numbered-picker { width: min(440px, 92vw); }
.numbered-list { max-height: 50vh; overflow: auto; padding: 4px 0; }
.numbered-picker .opt { padding: 8px 16px; }
.tpl-num { flex: none; min-width: 20px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px;
  font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-11); text-align: center; color: var(--ink-2); background: var(--surface-2); }
.tpl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-manage { display: block; padding: 8px 16px; border-top: 1px solid var(--line); font-size: var(--fs-12); color: var(--ink-3); text-decoration: none; }
.tpl-manage:hover { color: var(--ink); background: var(--surface-2); }
.tpl-row .tpl-name { flex: 1; font-size: var(--fs-13); }
.tpl-row .tpl-where { font-size: var(--fs-12); text-decoration: none; }
.tpl-foot { justify-content: space-between; }
.tpl-foot a { font-size: var(--fs-12); text-decoration: none; }
.task-templates { margin-bottom: 12px; }
.tf-head .tf-template-name { flex: 1; min-width: 0; max-width: 360px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 550; }
.tf-head .tf-template-name:focus { outline: none; border-color: var(--accent); }
/* The form's template button reads as the workflow select's twin, beside it. */
.tf-head .tf-template { flex: 0 1 auto; min-width: 0; max-width: 220px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 7px; padding: 6px 9px;
  color: var(--ink-2); font: inherit; font-weight: 550; cursor: pointer; }
.tf-head .tf-template:hover { color: var(--ink); border-color: var(--ink-3); }
.tf-head .tf-template svg { flex: none; }
.tf-template-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.template-save .tpl-scope { display: flex; align-items: center; gap: 8px; margin: 2px 0 16px; }
.tf-foot #tf-save-template { gap: 6px; white-space: nowrap; }
@media (max-width: 560px) {
  .tf-foot .tf-save-template-label, .tf-template-label { display: none; }
}
.template-save .tpl-scope-label { font-size: var(--fs-13); color: var(--ink-2); }

/* A one-click way to the setting that unblocks a stopped or waiting task. */
.setup-fix { margin-left: 8px; vertical-align: baseline; }
.msg.system.error .setup-fix { display: flex; width: fit-content; margin: 8px 0 2px; }
.ins-unrecorded { color: var(--ink-3); font-size: var(--fs-12); cursor: help; }
.ins-unrecorded .ins-login-share b { width: auto; color: var(--ink-3); }
/* A wait's ways out sit on its line, upright like any button. */
.msg.system.wait-notice .setup-fix { font-style: normal; margin-left: 6px; vertical-align: baseline; }

/* ── Files (wiki features/project-files) ────────────────────────────────────
   One bar (up, address, where it comes from), then a folder's rows or a file. */
.files-page { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.files-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.files-page .btn.icon { width: 32px; height: 32px; padding: 0; justify-content: center; flex: none; }
.files-page .btn.icon.disabled { opacity: .4; pointer-events: none; }
.files-address {
  flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); cursor: text;
  overflow-x: auto; scrollbar-width: none;
}
.files-address::-webkit-scrollbar { display: none; }
.files-address:hover { border-color: var(--line-strong); }
.files-address.editing { padding: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.files-crumbs { display: flex; align-items: center; gap: 2px; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-12h); }
.files-crumb { padding: 3px 5px; border-radius: 5px; color: var(--ink-2); text-decoration: none; }
.files-crumb:hover { background: var(--surface-2); color: var(--ink); }
.files-crumb[aria-current="page"] { color: var(--ink); font-weight: 600; }
.files-crumb-root { color: var(--ink-3); }
.files-sep { color: var(--ink-3); opacity: .7; }
.files-path-input { width: 100%; height: 100%; padding: 0 12px; border: 0; border-radius: var(--r-field); background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-12h); outline: none; }
.files-source:empty { display: none; }
.files-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); font-size: var(--fs-12); white-space: nowrap; }
.files-chip code { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); }
.files-chip.data { color: var(--merged); border-color: color-mix(in srgb, var(--merged) 30%, var(--line)); }
.files-body { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.files-status { display: flex; align-items: center; gap: 10px; padding: 18px 16px; color: var(--ink-2); font-size: var(--fs-13); }
.files-status.muted { color: var(--ink-3); }
.files-status.error { color: var(--danger); }
.files-status code { font-family: var(--font-mono); font-size: var(--fs-12); }
.files-list { list-style: none; margin: 0; padding: 4px 0; }
.files-row { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 6px; }
.files-row + .files-row { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.files-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.files-link:hover .files-name { text-decoration: underline; text-underline-offset: 3px; }
.files-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.files-row:hover { background: var(--surface-2); }
.files-icon { position: relative; display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--ink-3); }
/* An image is its own icon once it loads. */
.files-thumb { position: absolute; left: -4px; top: -4px; width: 24px; height: 24px; object-fit: cover; border-radius: 4px; }
.files-icon.has-thumb svg { visibility: hidden; }
.files-icon.has-thumb .files-thumb { box-shadow: 0 0 0 1px var(--line); background: var(--surface-2); }
.files-row.kind-directory .files-icon, .files-row.kind-submodule .files-icon { color: var(--accent); }
.files-row.mount-data .files-icon { color: var(--merged); }
.files-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); }
.files-badge { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-11); }
.mount-data .files-badge { background: var(--merged-weak); color: var(--merged); }
.files-size { flex: none; color: var(--ink-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.files-file-head { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.files-file-name { font-weight: 600; font-size: var(--fs-13); overflow-wrap: anywhere; }
.files-file-meta { color: var(--ink-3); font-size: var(--fs-12); white-space: nowrap; }
.files-spacer { flex: 1; }
.files-file-head .btn.icon { width: 30px; height: 30px; }
.files-content { min-width: 0; }
.files-rendered.md { padding: 20px 28px; max-width: 900px; }
.files-code { padding: 8px 0; overflow-x: auto; font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.6; tab-size: 4; }
.files-line { display: flex; min-width: max-content; }
/* The line number's cell adds no box: the number stays a sticky flex item. */
.files-lnc { display: contents; }
.files-line.selected { background: color-mix(in srgb, var(--attention) 18%, transparent); }
.files-ln { position: sticky; left: 0; flex: none; width: 56px; padding-right: 14px; text-align: right; color: var(--ink-3); opacity: .65;
  background: var(--surface); text-decoration: none; user-select: none; cursor: pointer; }
.files-line.selected .files-ln { background: color-mix(in srgb, var(--attention) 18%, var(--surface)); opacity: 1; }
.files-ln::before { content: attr(data-line); }
.files-ln:hover { color: var(--ink); opacity: 1; }
.files-lc { white-space: pre; padding-right: 24px; }
.files-media { display: grid; place-items: center; padding: 20px; }
.files-media video { max-width: 100%; max-height: 70vh; }
.files-media audio { width: min(520px, 100%); }
.files-image { background-color: var(--surface-2); background-image: linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%),
  linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.files-image img { max-width: 100%; max-height: 75vh; }
.files-pdf { display: block; width: 100%; height: 78vh; border: 0; }
.files-table-wrap { overflow: auto; max-height: 75vh; }
.files-table { border-collapse: collapse; font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.files-table th, .files-table td { padding: 5px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid color-mix(in srgb, var(--line) 60%, transparent); text-align: left; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.files-table th { position: sticky; top: 0; background: var(--surface-2); font-weight: 600; }
/* Code colours from the look's own tokens, so light and dark follow it. */
.files-code .hljs-keyword, .files-code .hljs-selector-tag, .files-code .hljs-doctag, .files-code .hljs-meta .hljs-keyword { color: var(--accent); }
.files-code .hljs-string, .files-code .hljs-regexp, .files-code .hljs-addition, .files-code .hljs-meta .hljs-string { color: var(--merged); }
.files-code .hljs-number, .files-code .hljs-literal, .files-code .hljs-symbol, .files-code .hljs-bullet, .files-code .hljs-variable.constant_ { color: var(--working); }
.files-code .hljs-comment, .files-code .hljs-quote { color: var(--ink-3); font-style: italic; }
.files-code .hljs-title, .files-code .hljs-section, .files-code .hljs-name, .files-code .hljs-selector-id, .files-code .hljs-selector-class { color: color-mix(in srgb, var(--viz-2) 70%, var(--ink)); }
.files-code .hljs-built_in, .files-code .hljs-type, .files-code .hljs-title.class_ { color: color-mix(in srgb, var(--accent) 55%, var(--merged)); }
.files-code .hljs-attr, .files-code .hljs-attribute, .files-code .hljs-property, .files-code .hljs-template-variable { color: color-mix(in srgb, var(--accent) 60%, var(--ink)); }
.files-code .hljs-meta { color: var(--ink-3); }
.files-code .hljs-deletion { color: var(--danger); }
.files-code .hljs-emphasis { font-style: italic; }
.files-code .hljs-strong { font-weight: 700; }
@media (max-width: 720px) {
  .files-source { display: none; }
  .files-row { padding-right: 10px; }
  .files-ln { width: 40px; padding-right: 8px; }
  .files-rendered.md { padding: 14px 16px; }
  .files-file-meta { display: none; }
}

/* Share a public link (Files ▸ Share). */
.files-share-dialog { width: min(520px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 14px; }
.files-share-dialog::backdrop { background: rgb(0 0 0 / .35); }
.files-share-head { display: flex; align-items: center; gap: 8px; }
.files-share-head h2 { margin: 0; font-size: var(--fs-15); font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.files-share-head h2 code { font-family: var(--font-mono); font-size: .9em; }
.files-share-note { margin: 0; color: var(--ink-2); font-size: var(--fs-13); }
.files-share-link { display: flex; gap: 8px; }
.files-share-link input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-12); }
.files-share-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--fs-12); }
.files-share-dialog > .btn.primary { align-self: flex-start; }
.files-share-others summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-13); }
.files-share-others ul { list-style: none; margin: 8px 0 0; padding: 0; }
.files-share-others li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-family: var(--font-mono); font-size: var(--fs-12); }
.files-share-others li a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.files-share-others li a:hover { text-decoration: underline; }
/* The public page of a shared snapshot: the Files view, wider than a conversation. */
.shared-main.shared-files-main { max-width: 1160px; }
.shared-main.shared-files-main .shared-heading { margin-bottom: 16px; }

/* Files ▸ which tree: the default branches, a branch, or a task's world. */
.files-bar { position: relative; }
.files-view-button { display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 300px; height: 36px; padding: 0 10px 0 11px;
  border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); color: var(--ink); font-size: var(--fs-12h); cursor: pointer; }
.files-view-button:hover { border-color: var(--line-strong); }
.files-view-button[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.files-view-button svg { flex: none; color: var(--ink-3); }
.files-view-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.files-view-caret { color: var(--ink-3); font-size: 10px; }
.files-view-state { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-11); font-weight: 500; white-space: nowrap; }
.files-view-state.live { background: var(--merged-weak); color: var(--merged); }
.files-view-menu { position: absolute; z-index: 40; top: 42px; left: 40px; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow), 0 12px 32px rgb(0 0 0 / .12); overflow: hidden; }
.files-view-menu input { margin: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); color: var(--ink); font-size: var(--fs-13); }
.files-view-menu ul { list-style: none; margin: 0; padding: 0 6px 6px; max-height: min(60vh, 420px); overflow: auto; }
.files-view-menu li[role="option"] { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: var(--fs-13); }
.files-view-menu li[aria-selected="true"] { background: var(--surface-2); }
.files-view-menu li.current .files-view-option { font-weight: 650; }
.files-view-option { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-view-num { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.files-view-group { padding: 10px 10px 4px; color: var(--ink-3); font-size: var(--fs-11); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.files-view-note { color: var(--ink-3); font-size: var(--fs-12); white-space: nowrap; }
.files-view-menu > ul > .files-view-note { padding: 10px; }
/* Images in rendered Markdown (wiki pages, READMEs, agents' messages) fit their column. */
.md img { max-width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 720px) { .files-view-button { max-width: 40vw; } .files-view-state { display: none; } .files-view-menu { left: 0; } }

/* Labels and status words read in sentence case, never tracked capitals:
   the first letter of a lowercase value ("high", "open", "running") is raised. */
.urgency-chip::first-letter, .pr-link .pr-state::first-letter, .activity-state::first-letter, .onboarding-optional::first-letter,
.wiki-mention-menu .wm-scope::first-letter, .rail .label::first-letter, .section-h::first-letter, .group-h::first-letter { text-transform: uppercase; }
.pr-link .pr-state { display: inline-block; }

/* ── Target sizes (WCAG 2.2, 2.5.8) ─────────────────────────────────────────
   Every control is at least 24×24 px, toolbar buttons 32, and on a touch
   screen 44. Where the visible mark should stay small (an ⓘ), the control
   around it grows, not the mark, and negative margins keep the layout. */
.info-dot { width: 24px; height: 24px; margin: -4.5px; background: radial-gradient(circle, var(--surface-2) 7px, transparent 7.5px); }
.info-dot:is(.tip-chip, .limits-label, .limits-name) { margin: 0; }
.tip-chip.info-dot { background: var(--surface-2); }
.rail .rail-add { width: 28px; height: 28px; margin: -3px -3px -3px 0; }
.rail .rail-edit-action, .rail .rail-edit-confirm, .rail .rail-edit-cancel { width: 28px; height: 28px; }
.rail .project-row .rail-edit-action { margin-top: -14px; }
.rail .proj { padding-top: 0; padding-bottom: 0; min-height: 36px; }
.rail .project-link, .rail .folder-toggle { align-self: stretch; min-height: 36px; }
.btn.tool { height: 32px; }
.btn.tool.icon { width: 32px; }
.msg-copy { min-width: 24px; min-height: 24px; }
@media (pointer: coarse) {
  .icon-btn, .rail-icon, .btn.tool.icon, .rail .rail-add, .rail .rail-edit-action { min-width: 44px; min-height: 44px; }
  .rail-row, .rail .project-link, .rail .folder-toggle, .btn.tool, .btn { min-height: 44px; }
}

/* A For me row's own decision or quick question, answered in place. */
.row-ask { display: grid; gap: 6px; margin-top: 8px; }
.row-ask[data-loading] { display: none; }
.row-ask, .row-decision { min-width: 0; }
.row-decision, .row-ask[data-row-quick] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.row-ask-q { min-width: 0; color: var(--ink); font-size: var(--fs-13); }
.row-ask-q code { font-family: var(--font-mono); font-size: .92em; }
.row-ask-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* Never squeezed below their target size by a crowded row. */
.info-dot { flex: none; }
.search-box .search-x { min-width: 24px; min-height: 24px; }
.tp-views .tab { height: 28px; }
.prompt-attach-row { min-height: 30px; align-items: center; padding-top: 2px; }

/* A phone: a row's text and decisions get the full width; when it was, its
   stage and its archive button follow on one line beneath. */
@media (max-width: 720px) {
  .task-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .task-row .task-right { justify-content: flex-start; gap: 12px; }
  .row-ask-actions { margin-left: 0; }
  .task-search { min-width: 0; }
}