/* Shipmux: quiet chrome on warm black, coral for the one thing that matters, after T3 Code's flows.
   Geist, self-hosted. The art (a dithered dusk sea) lives only on Home and the project overview. */

@font-face { font-family: Geist; src: url(/fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Geist Mono'; src: url(/fonts/geist-mono.woff2) format('woff2'); font-weight: 100 900; font-display: block; }

:root {
  color-scheme: dark;
  /* One warm neutral ramp: the sidebar sits darkest, pages on --bg, cards a step up, menus above. */
  --ink: #100f0e;
  --bg: #151413;
  --surface: #121110;
  --card: #1b1a18;
  --card-2: #22201d;
  /* Menus, toasts, and tooltips float above cards; dialogs sit on a scrim; consoles and code sink below. */
  --raised: #252320;
  --dialog: #1b1a18;
  --inset: #100f0e;
  --hover: rgb(255 246 235 / 0.04);
  --active: rgb(255 246 235 / 0.08);
  --border: rgb(239 233 222 / 0.08);
  --border-2: rgb(239 233 222 / 0.12);
  --input: rgb(239 233 222 / 0.12);
  --fg: #efe9de;
  --fg-2: #b3ab9f;
  --muted: #8a847a;
  --dim: #5d5851;
  /* The accent, from the logo: the primary action, the selection, production. */
  --primary: #ff805f;
  --primary-hi: #ff9a7e;
  /* Text on the primary color: coral is light, so it takes a dark of its own hue. */
  --on-primary: #2b130c;
  --success: #4cc38a;
  --warning: #e8a33d;
  --danger: #ef5b5f;
  --violet: oklch(0.7 0.17 295);
  --merged: oklch(0.67 0.2 305);
  --role-manager: oklch(0.8 0.13 75);
  --role-communication: oklch(0.76 0.12 200);
  --role-master: oklch(0.7 0.16 264);
  --role-change: oklch(0.74 0.15 152);
  --role-thinking: oklch(0.78 0.12 340);
  --role-staging: oklch(0.8 0.13 115);
  --role-production: oklch(0.71 0.16 32);
  --role-guide: oklch(0.8 0.08 245);
  /* The live states, everywhere a thread or change shows one: only what someone may act on gets a
     hue (working blue, waiting amber, failing red, validated together for color vision deficiencies on
     the card surface); review is a ring, done recedes. CI failing is also dashed on the tree. */
  --state-working: #3987e5;
  --state-waiting: var(--warning);
  --state-failing: var(--danger);
  --state-review: var(--fg-2);
  --state-done: var(--dim);
  /* Chart series, in this order. Validated for color vision deficiencies on the dialog surface. */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --radius: 8px;
  --radius-lg: 14px;
  --font: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --chat: 46rem;
  --panel: 17.5rem;
  --sidebar-w: 264px;
  --topbar: 56px;
  /* Glass, for cards over the art. */
  --glass: rgb(29 27 25 / 0.66);
  --glass-line: rgb(255 240 225 / 0.075);
  /* The color under a mark on glass, so marks on the work tree read apart. */
  --ring: #1d1b19;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 400 14px/20px var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'ss01' off; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--fg); }
p a, .md a, .muted a, .small a, dd a, .top-sub a, .origin a, figcaption a, .page-sub a { color: var(--fg-2); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.22); text-underline-offset: 3px; }
p a:hover, .md a:hover, .muted a:hover, dd a:hover, .top-sub a:hover, .page-sub a:hover { color: var(--fg); text-decoration-color: currentColor; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: 0; }
code, kbd, pre, .mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 70%, transparent); outline-offset: 1px; border-radius: 4px; }
::selection { background: color-mix(in oklab, var(--primary) 40%, transparent); }
* { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.1) transparent; }

.icon { flex-shrink: 0; display: block; }
.muted { color: var(--muted); }
.small { font-size: 12px; line-height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.center { text-align: center; }
.spacer, .grow { flex: 1; }
.hidden { display: none !important; }
.num, .tab-num { font-variant-numeric: tabular-nums; }

/* ---------- tones ---------- */
/* Tones color pills' dots, notices, toasts, and rows; each of those defaults to gray under :where(), so a tone always wins. */
.tone-primary { --tone: var(--state-working); }
.tone-success { --tone: var(--success); }
.tone-warning { --tone: var(--warning); }
.tone-danger { --tone: var(--danger); }
.tone-violet { --tone: var(--fg-2); }
.tone-merged { --tone: var(--dim); }
.tone-muted { --tone: var(--dim); }
.tone-info { --tone: var(--muted); }
.tone-error { --tone: var(--danger); }
.tone-text-danger { color: var(--danger); }
.tone-text-warning { color: var(--warning); }
.tone-text-success { color: var(--success); }
.tone-icon-merged { color: var(--merged); }
.tone-icon-closed { color: var(--muted); }
.tone-icon-open, .tone-icon-checking, .tone-icon-queued, .tone-icon-reviewing, .tone-icon-approved { color: var(--success); }
.tone-icon-ci_failed, .tone-icon-conflict { color: var(--danger); }
.tone-icon-changes_requested, .tone-icon-interrupted { color: var(--warning); }

/* State dots: one shape for a thread's or a change's state wherever it shows (StateDot). */
.dot { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--dim); }
.dot.lg { width: 8px; height: 8px; }
.dot.working { background: var(--state-working); }
.dot.waiting { background: var(--state-waiting); }
.dot.failing { background: var(--state-failing); }
.dot.good { background: var(--success); }
.dot.review { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg-2); }
.dot.idle { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dim); }
.dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--warning); }
.dot.done { background: var(--dim); }
.dot.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* The route: merged, on staging, in production. Production is the coral one. */
.route { display: inline-flex; align-items: center; flex: none; }
.route b { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px var(--dim); }
.route b.y { background: var(--fg-2); box-shadow: none; }
.route b.p { background: var(--primary); box-shadow: none; }
.route s { width: 8px; height: 1.25px; background: var(--dim); }
.route s.y { background: var(--fg-2); }

/* ---------- layout ---------- */
#root { height: 100%; }
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.boot { display: grid; place-items: center; height: 100vh; color: var(--muted); }
.banner { display: flex; align-items: center; justify-content: center; gap: 10px; background: color-mix(in oklab, var(--warning) 10%, var(--bg)); color: var(--warning); font-size: 12px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.banner .link-btn { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.banner a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.topbar { height: var(--topbar); flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--border); background: var(--bg); min-width: 0; position: relative; z-index: 3; }
.top-titles { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.top-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.top-title h1 { font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; min-width: 0; }
.top-sub a { text-decoration: none; color: var(--muted); }
.top-sub a:hover { color: var(--fg); }
.top-sub .sep { color: var(--dim); }
.origin { display: inline-flex; align-items: center; gap: 4px; }
.top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.thread-top .top-sub { padding-left: 16px; }
.top-state { color: var(--fg-2); }
.top-state.tone-warning, .top-state.tone-danger { color: var(--tone); }
.topbar > .tabs { flex-shrink: 1; min-width: 0; }

.page-wrap { display: flex; flex-direction: column; min-height: 0; height: 100%; position: relative; }
.page { --page-max: 1120px; flex: 1; overflow-y: auto; padding: 28px max(32px, calc((100% - var(--page-max)) / 2)) 48px; min-width: 0; }
.page > * + * { margin-top: 16px; }
.page.narrow { --page-max: 56rem; }
/* A project page's own title, under its tab row: Contracts, Hosting, Secrets, Code. */
.page-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.page-head-text { flex: 1; min-width: 0; }
.page-head-actions { display: flex; align-items: center; gap: 8px; flex: none; padding-bottom: 2px; }
.page-title { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px; }
.page-sub { margin: 4px 0 0; color: var(--fg-2); }
.page-head .top-actions { padding-bottom: 2px; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--border-2); background: rgb(255 246 235 / 0.05); color: var(--fg); font-size: 13px; line-height: 1; font-weight: 500; white-space: nowrap; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04); transition: background 0.15s var(--ease), border-color 0.15s var(--ease); }
.btn .icon { color: var(--fg-2); }
.btn:hover:not(:disabled) { background: rgb(255 246 235 / 0.09); border-color: rgb(239 233 222 / 0.16); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn-lg { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-primary { background: var(--primary); border-color: transparent; color: var(--on-primary); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28); }
.btn-primary .icon { color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hi); border-color: transparent; }
.btn-ghost, .btn.quiet { background: transparent; border-color: transparent; color: var(--fg-2); box-shadow: none; }
.btn-ghost:hover:not(:disabled), .btn.quiet:hover:not(:disabled) { background: var(--hover); border-color: transparent; color: var(--fg); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--muted); transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.icon-btn:hover:not(:disabled), .icon-btn.on { background: var(--hover); color: var(--fg); }
.icon-btn.on { background: rgb(255 246 235 / 0.09); }
.icon-btn.sm { width: 24px; height: 24px; border-radius: 6px; }
.link-btn { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.link-btn:hover { color: var(--fg); }
.link-btn.inline { display: inline; font-size: inherit; color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.input { width: 100%; background: rgb(255 246 235 / 0.03); border: 1px solid var(--input); border-radius: var(--radius); padding: 7px 10px; outline: none; transition: border-color 0.15s, background 0.15s; }
.input:focus { border-color: color-mix(in oklab, var(--primary) 65%, transparent); background: rgb(255 246 235 / 0.05); }
.input::placeholder, textarea::placeholder { color: var(--muted); }
textarea.input { resize: vertical; line-height: 20px; }
select.input { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
select.input option, select.input optgroup { background: var(--raised); }
.input.num { width: 80px; text-align: right; }
.price-input { display: inline-flex; align-items: center; gap: 6px; }
.price-input > .small:last-child { min-width: 84px; }
.link-inline { color: var(--fg-2); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.22); text-underline-offset: 3px; }
.link-inline:hover { color: var(--fg); text-decoration-color: currentColor; }
kbd, .kbd { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--border-2); background: transparent; font: 400 11px/1 var(--mono); color: var(--muted); }

.chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 12px; line-height: 1; color: var(--fg-2); background: rgb(255 246 235 / 0.04); border: 1px solid var(--border); white-space: nowrap; }
.chip.skill { color: color-mix(in oklab, var(--warning) 80%, white); background: color-mix(in oklab, var(--warning) 9%, transparent); border-color: color-mix(in oklab, var(--warning) 18%, transparent); }
.chip button { display: inline-grid; place-items: center; margin-right: -3px; opacity: 0.7; }
.chip button:hover { opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--border); background: rgb(255 246 235 / 0.04); color: var(--fg-2); font-size: 13px; line-height: 1; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.chip-btn:hover, .chip-btn.open { background: rgb(255 246 235 / 0.08); border-color: var(--border-2); color: var(--fg); }
.chip-btn .icon { color: var(--muted); }
.chip-btn.sq { width: 28px; padding: 0; justify-content: center; }

/* Pills say a state in words, quietly: a hairline, the words, and the state's dot. */
:where(.pill) { --tone: var(--dim); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--border); font-size: 12px; line-height: 1; font-weight: 400; white-space: nowrap; color: var(--fg-2); background: transparent; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tone); flex-shrink: 0; }

.spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border-2); border-top-color: var(--state-working); animation: spin 0.8s linear infinite; flex-shrink: 0; }
.spinner.xs { width: 11px; height: 11px; border-width: 1.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); padding: 32px 0; }
.error-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid color-mix(in oklab, var(--danger) 28%, transparent); background: color-mix(in oklab, var(--danger) 7%, transparent); color: color-mix(in oklab, var(--danger) 65%, white); }
.error-box span { flex: 1; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; text-align: center; color: var(--muted); }
.empty-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); color: var(--fg-2); }
.empty-title { color: var(--fg); font-weight: 500; }
.empty-body { max-width: 26rem; }

/* The page's kind, before its title: neutral, so the content carries the color. */
.role-badge { --role: var(--fg-2); display: inline-grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); }
.role-badge.lg { width: 36px; height: 36px; border-radius: 10px; }
.role-manager { --role: var(--role-manager); }
.role-communication { --role: var(--role-communication); }
.role-master { --role: var(--role-master); }
.role-change { --role: var(--role-change); }
.role-thinking { --role: var(--role-thinking); }
.role-staging { --role: var(--role-staging); }
.role-production { --role: var(--role-production); }
.role-guide { --role: var(--role-guide); }
.role-icon { color: var(--muted); }

/* ---------- sidebar ---------- */
/* Flat, after T3 Code and the Devin dashboard: the workspace, one New, search and home, the projects,
   then the work that's open (a state dot, its title, and a gray line), and what's done folded away. */
.sidebar { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--ink); border-right: 1px solid var(--border); }
.side-top { height: 52px; display: flex; align-items: center; gap: 4px; padding: 0 12px 0 20px; flex-shrink: 0; }
.side-top .mark { width: 20px; height: 20px; margin-right: 6px; color: var(--primary); flex: none; }
.mark svg { width: 100%; height: 100%; display: block; }
.mark-link { display: inline-flex; flex: none; border-radius: 6px; }
.mark-link:hover .mark { color: var(--primary-hi); }
.ws-btn { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 140px; height: 28px; padding: 0 6px; margin-left: -6px; border-radius: 8px; font-weight: 500; color: var(--fg); }
.ws-btn > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-btn .icon { color: var(--muted); }
.ws-btn:hover, .ws-btn.open { background: var(--hover); }
.side-top .menu-wrap { min-width: 0; }
.pip { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--ink); }
.side-new { padding: 4px 12px 8px; flex-shrink: 0; }
.side-new .menu-wrap { display: flex; }
.new-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: rgb(255 246 235 / 0.05); color: var(--fg); font-weight: 500; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03); transition: background 0.15s var(--ease); }
.new-btn .icon { color: var(--fg-2); }
.new-btn:hover, .new-btn.open { background: rgb(255 246 235 / 0.08); }
.new-btn .chev { margin-left: auto; color: var(--muted); }
.side-scroll { flex: 1; overflow-y: auto; padding: 0 12px 12px; min-height: 0; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 8px; border-radius: 8px; color: var(--fg-2); white-space: nowrap; text-align: left; min-width: 0; }
.nav-row > .icon { color: var(--muted); }
.nav-row:hover { background: var(--hover); color: var(--fg); }
.nav-row.active { background: var(--raised); color: var(--fg); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04); }
.nav-row.active > .icon { color: var(--fg-2); }
.nav-row .kbd, .nav-row kbd, .nav-row .count { margin-left: auto; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.count { font: 400 12px/16px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.count.warn { color: var(--warning); }
.sec { display: flex; align-items: center; gap: 4px; height: 24px; margin: 20px 0 4px; padding: 0 0 0 8px; font-size: 12px; line-height: 16px; color: var(--muted); }
.sec > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec .icon-btn { width: 24px; height: 24px; border-radius: 6px; }
.sec .icon-btn:first-of-type { margin-left: auto; }
.sec .icon-btn.on { color: var(--fg); }
.tile { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 6px; background: #2a2724; color: var(--fg-2); font: 500 11px/1 var(--font); }
.side-thread { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; padding: 6px 8px; border-radius: 8px; --depth: 0; padding-left: calc(8px + var(--depth) * 16px); }
.side-thread:hover { background: var(--hover); }
.side-thread .dot { align-self: center; justify-self: center; }
.side-thread .tt { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-thread .tm { grid-column: 2; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-thread.unseen .tt { color: var(--fg); font-weight: 500; }
.side-thread.active { background: var(--raised); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04); }
.side-thread.active .tt { color: var(--fg); }
.side-more { display: block; padding: 4px 8px 4px 32px; font-size: 12px; line-height: 16px; color: var(--muted); text-align: left; }
.side-more:hover { color: var(--fg); }
.side-empty { margin: 0; padding: 6px 8px; font-size: 12px; line-height: 16px; color: var(--muted); }
.side-foot { flex-shrink: 0; padding: 8px 12px 12px; border-top: 1px solid var(--border); }
.status-line { display: flex; align-items: center; gap: 6px; padding: 0 8px 6px; font-size: 12px; color: var(--danger); white-space: nowrap; overflow: hidden; }
/* Who is signed in, under everything else, and their credits; it opens a menu upward. */
.acct { display: flex; align-items: center; gap: 4px; }
.acct .menu-wrap { flex: 1; min-width: 0; display: flex; }
.account-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px; border-radius: 10px; color: var(--fg-2); text-align: left; }
.account-row:hover, .account-row.open { background: var(--hover); color: var(--fg); }
.avatar { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: #2d2a26; color: var(--fg-2); font: 500 11px/1 var(--font); }
.avatar.live::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--ink); }
.avatar.lost::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--ink); }
.account-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu .menu { width: 232px; }
.credits-btn { flex: none; height: 28px; padding: 0 8px; border-radius: 8px; font: 400 12px/16px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.credits-btn:hover { background: var(--hover); color: var(--fg); }
.credits-btn.sev-high, .credits-btn.sev-over { color: var(--sev); }
.sev-ok { --sev: var(--fg-2); }
.sev-high { --sev: var(--warning); }
.sev-over { --sev: var(--danger); }
/* The inbox menu: what waits on the account, everywhere. */
.inbox-menu .menu { width: 340px; max-height: min(480px, 70vh); overflow-y: auto; }
.inbox-menu .menu-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.drawer-toggle, .drawer-scrim { display: none; }

/* ---------- thread page ---------- */
.thread-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.thread-body { flex: 1; display: flex; min-height: 0; }
.thread-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.timeline-scroll { flex: 1; overflow-y: auto; position: relative; }
.timeline { max-width: var(--chat); margin: 0 auto; padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.show-earlier { align-self: center; }
.scroll-bottom { position: sticky; bottom: 12px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--border-2); color: var(--fg-2); box-shadow: 0 4px 16px rgb(0 0 0 / 0.5); }

.role-intro { border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, color-mix(in oklab, var(--role, var(--muted)) 5%, var(--card)), var(--card)); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.role-intro-head { display: flex; gap: 12px; align-items: flex-start; }
.role-intro-head h2 { font-size: 14px; }
.role-intro-head p { margin: 2px 0 0; color: var(--fg-2); }
.role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 8px; }
.role-card { display: flex; gap: 8px; padding: 9px 10px; border-radius: var(--radius); background: rgb(255 255 255 / 0.025); border: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.role-card .icon { margin-top: 2px; color: var(--role, var(--fg-2)); }
.role-card strong { display: block; color: var(--fg); font-weight: 500; font-size: 12.5px; }
.change-flow { display: flex; flex-direction: column; gap: 8px; }
.change-flow p { margin: 0; }
.examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Starting work by talking: the intro sits in the middle until the first message sends. */
.start-page .timeline { min-height: 100%; justify-content: center; }

.user-msg { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.bubble { max-width: 85%; background: var(--card-2); border: 1px solid var(--border); border-radius: 14px 14px 4px 14px; padding: 8px 12px; }
.msg-meta { font-size: 11px; color: var(--dim); padding-right: 4px; }
.handoff { border: 1px solid var(--border); border-left: 2px solid var(--role, var(--primary)); border-radius: var(--radius); background: var(--card); padding: 10px 12px; }
.handoff-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.handoff-head span { flex: 1; }
.handoff-head a { color: var(--fg-2); font-weight: 500; }
.assistant-msg { position: relative; color: var(--fg); }
.assistant-msg.commentary { color: var(--fg-2); }
.assistant-msg.streaming .md > :last-child::after { content: ''; display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--fg-2); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* The copy button hangs into the gap below the message instead of adding a row. */
.msg-actions { height: 10px; opacity: 0; transition: opacity 0.12s; }
.msg-actions .icon-btn { margin: 0 0 0 -5px; }
.assistant-msg:hover .msg-actions, .assistant-msg:focus-within .msg-actions { opacity: 1; }

:where(.notice) { --tone: var(--muted); }
.notice { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius); border: 1px solid color-mix(in oklab, var(--tone) 22%, transparent); background: color-mix(in oklab, var(--tone) 6%, transparent); font-size: 12.5px; }
.notice.tone-info { --tone: var(--muted); }
.notice-icon { color: var(--tone); margin-top: 2px; }
.notice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.notice > .ago { font-size: 11px; color: var(--dim); }
.clamp { max-height: 6.4em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.notice-body > .link-btn { align-self: flex-start; }
.link-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.entity-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 8px 3px 7px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--card); font-size: 12px; color: var(--fg-2); }
.entity-link:hover { background: var(--card-2); color: var(--fg); }
.entity-link .icon { color: var(--muted); }
.entity-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.entity-who { flex-shrink: 0; padding-left: 6px; border-left: 1px solid var(--border-2); font-size: 11px; color: var(--muted); white-space: nowrap; }
.entity-link.gone { color: var(--dim); }
.followup { border-top: 1px solid var(--border); padding-top: 6px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.followup-text { color: var(--fg-2); white-space: pre-wrap; }

.turn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 11.5px; line-height: 16px; color: var(--muted); padding: 0 2px; }
/* What the turn was and how it reasoned, on one line, a dot between each. */
.turn-kind, .turn-model { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.turn-kind { color: var(--fg-2); font-weight: 500; }
.turn-kind .icon, .turn-model .icon { flex-shrink: 0; opacity: 0.8; }
:is(.turn-kind, .turn-model) + :is(.turn-kind, .turn-model)::before { content: '·'; margin: 0 7px 0 2px; color: var(--dim); font-weight: 400; }
.turn-meta > .chip { margin-left: 8px; }
.turn-meta > .chip + .chip { margin-left: 5px; }
.turn-end { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

.plan-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 10px 12px; }
.panel .plan-card { padding: 0; border: 0; background: none; }
.panel .plan-head { display: none; }
.plan-head { display: flex; align-items: center; gap: 6px; font-weight: 500; margin-bottom: 6px; }
.plan-head .muted { font-weight: 400; font-size: 12px; margin-left: auto; }
.plan-expl { margin: 0 0 6px; color: var(--fg-2); }
.plan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.plan-steps li { display: flex; gap: 8px; align-items: flex-start; color: var(--fg-2); }
.plan-steps li.done { color: var(--muted); text-decoration: line-through; text-decoration-color: rgb(255 255 255 / 0.2); }
.plan-steps li.active { color: var(--fg); }
.plan-mark { display: grid; place-items: center; width: 14px; height: 18px; flex-shrink: 0; color: var(--dim); }
.plan-steps li.done .plan-mark { color: var(--success); }

.workgroup { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.workgroup-head { display: flex; align-items: center; gap: 7px; padding: 7px 10px; font-size: 12px; color: var(--fg-2); border-bottom: 1px solid var(--border); }
.workgroup-head .link-btn { margin-left: auto; }
.workgroup-more { display: block; width: 100%; text-align: left; padding: 5px 10px 5px 31px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); }
.workgroup-more:hover { color: var(--fg); background: var(--hover); }
.work-entry + .work-entry { border-top: 1px solid rgb(255 255 255 / 0.04); }
.work-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 5px 10px; text-align: left; font-size: 12.5px; color: var(--fg-2); min-height: 30px; }
.work-row:hover { background: var(--hover); }
.work-icon { display: grid; place-items: center; width: 13px; color: var(--muted); flex-shrink: 0; }
.work-entry.failed .work-icon { color: var(--danger); }
.work-entry.interrupted .work-title { color: var(--muted); }
.work-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-title.mono { font-size: 12px; }
.work-title.thinking { color: var(--muted); font-style: italic; }
.work-stat, .work-time, .work-exit { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.work-exit { color: var(--danger); }
.work-chevron { color: var(--dim); }
.work-detail { padding: 0 10px 10px 31px; display: flex; flex-direction: column; gap: 8px; }
.console { margin: 0; max-height: 22rem; overflow: auto; padding: 8px 10px; border-radius: 6px; background: var(--inset); border: 1px solid var(--border); font-size: 11.5px; line-height: 1.55; color: var(--fg-2); white-space: pre-wrap; word-break: break-word; }
.console .prompt { color: var(--success); }

.activity { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius); border: 1px dashed var(--border-2); color: var(--fg-2); font-size: 12.5px; flex-wrap: wrap; }
.activity.working { border-style: solid; border-color: color-mix(in oklab, var(--primary) 30%, transparent); background: color-mix(in oklab, var(--primary) 6%, transparent); }
.activity.failed { border-color: color-mix(in oklab, var(--danger) 30%, transparent); }
.activity.attention { border-style: solid; border-color: color-mix(in oklab, var(--warning) 30%, transparent); background: color-mix(in oklab, var(--warning) 5%, transparent); }
.activity.input { border-style: solid; border-color: color-mix(in oklab, var(--warning) 30%, transparent); background: color-mix(in oklab, var(--warning) 5%, transparent); }
.activity.input > .icon { color: var(--warning); }
.activity.paused { border-style: solid; border-color: color-mix(in oklab, var(--warning) 30%, transparent); background: color-mix(in oklab, var(--warning) 5%, transparent); }
.activity.paused > .icon { color: var(--warning); }
.activity .btn, .activity .link-btn { margin-left: auto; }
.activity.ready { border-style: solid; border-color: color-mix(in oklab, var(--success) 30%, transparent); background: color-mix(in oklab, var(--success) 5%, transparent); }
.activity.ready > .icon { color: var(--success); }
.activity-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.ready-nopreview { flex-basis: 100%; display: flex; align-items: baseline; gap: 6px; line-height: 1.5; }
.ready-nopreview > .icon { flex: none; position: relative; top: 2px; }
.activity-actions .btn { margin-left: 0; }
.toggle-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); margin: 0 0 10px; cursor: pointer; }
.toggle-line .switch { margin: 0; }
.working-dots { display: inline-flex; gap: 3px; }
.working-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary-hi); animation: bounce 1.2s ease-in-out infinite; }
.working-dots i:nth-child(2) { animation-delay: 0.15s; }
.working-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* ---------- composer ---------- */
.composer-wrap { flex-shrink: 0; max-width: var(--chat); width: 100%; margin: 0 auto; padding: 0 20px 14px; }
.composer { border: 1px solid var(--border-2); border-radius: 16px; background: var(--card); padding: 10px 10px 8px 14px; transition: border-color 0.12s; box-shadow: 0 -8px 24px rgb(0 0 0 / 0.6); }
.composer:focus-within { border-color: rgb(255 240 225 / 0.18); }
.composer textarea { width: 100%; resize: none; border: 0; outline: none; background: transparent; line-height: 1.5; min-height: 22px; max-height: 320px; padding: 0; font-size: 13.5px; }
.composer textarea::placeholder { color: var(--dim); }
.composer-bar { display: flex; align-items: center; gap: 2px; margin-top: 8px; margin-left: -6px; }
.pick { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 12px; color: var(--muted); }
.pick:hover { background: var(--hover); color: var(--fg); }
.pick.on { color: var(--primary-hi); background: color-mix(in oklab, var(--primary) 12%, transparent); }
.pick.on:hover { background: color-mix(in oklab, var(--primary) 18%, transparent); }
.agent-switch { border: 1px solid var(--border-2); color: var(--fg-2); }
.agent-switch.reading { color: var(--fg); border-color: color-mix(in oklab, var(--primary) 40%, var(--border-2)); background: color-mix(in oklab, var(--primary) 8%, transparent); }
.agent-switch-count { min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--active); font-size: 10.5px; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.reader-whose { color: var(--fg-2); }
.reader-bar > span { flex: 1; min-width: 0; }
.send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--on-primary); transition: background 0.12s, opacity 0.12s; }
.send:hover:not(:disabled) { background: var(--primary-hi); }
.send:disabled { background: var(--card-2); color: var(--dim); opacity: 1; }
.send.stop { background: var(--fg); color: var(--bg); }
.composer-hint { display: flex; gap: 12px; justify-content: space-between; padding: 6px 6px 0; font-size: 11px; color: var(--dim); }
.composer-hint.repo-block { justify-content: flex-start; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.kbd-hint { flex-shrink: 0; }
.composer-closed { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); color: var(--fg-2); }
.queue { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.queue-chip { display: flex; align-items: center; gap: 7px; padding: 4px 4px 4px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.queue-kind { color: var(--fg-2); font-weight: 500; }
.queue-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- side panels ---------- */
.panel { width: var(--panel); flex-shrink: 0; border-left: 1px solid var(--border); background: var(--surface); overflow-y: auto; }
.panel.wide { width: min(46rem, 48%); display: flex; flex-direction: column; overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.panel-head > div { flex: 1; min-width: 0; }
.panel-head h3 { font-size: 13px; }
.panel-scroll { flex: 1; overflow: auto; padding: 12px; }
.panel-section { padding: 14px 14px 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.panel-section h3 { font-size: 11.5px; font-weight: 500; color: var(--muted); display: flex; gap: 6px; }
.panel-text { margin: 0; color: var(--fg-2); font-size: 12.5px; }
.panel-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; font-size: 12.5px; }
.panel-links { display: flex; flex-direction: column; gap: 4px; }
.panel-links .entity-link { width: 100%; }
.panel-links .entity-label { flex: 1; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12.5px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--fg-2); }
.pr-mini { display: block; padding: 9px 10px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--card); }
.pr-mini:hover { background: var(--card-2); }
.pr-mini-top { display: flex; gap: 6px; align-items: center; font-weight: 500; font-size: 12.5px; }
.pr-mini-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-mini-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.pr-mini-meta span { display: inline-flex; align-items: center; gap: 3px; }
.skill-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.meter { height: 5px; border-radius: 999px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
.meter-fill { height: 100%; background: var(--primary-hi); border-radius: inherit; }

/* ---------- steps ---------- */
.steps { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
.step { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.step + .step::before { content: ''; width: 10px; height: 1px; background: var(--border-2); margin-right: 1px; }
.step-mark { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--dim); color: var(--bg); flex-shrink: 0; }
.step.done .step-mark { background: var(--success); border-color: var(--success); }
.step.done { color: var(--fg-2); }
.step.active { color: var(--fg); }
.step.active .step-mark { border-color: transparent; }
.step.active .step-mark .spinner { width: 13px; height: 13px; border-top-color: var(--primary-hi); }
.step.failed .step-mark { background: var(--danger); border-color: var(--danger); }
.step.failed { color: color-mix(in oklab, var(--danger) 75%, white); }
.step.warning .step-mark { background: var(--warning); border-color: var(--warning); }
.step.warning { color: color-mix(in oklab, var(--warning) 80%, white); }
.step.waiting .step-mark { border-color: var(--violet); color: var(--violet); }
.step.waiting { color: var(--fg-2); }
.step.skipped { color: var(--dim); text-decoration: line-through; }
.step-text { display: flex; flex-direction: column; }
.step-note { font-size: 11px; color: var(--muted); }
.steps.vertical { flex-direction: column; align-items: stretch; gap: 0; font-size: 12.5px; }
.steps.vertical .step { align-items: flex-start; gap: 9px; padding-bottom: 12px; position: relative; }
.steps.vertical .step::before { display: none; }
.steps.vertical .step:not(:last-child)::after { content: ''; position: absolute; left: 7px; top: 18px; bottom: 2px; width: 1px; background: var(--border-2); }
.steps.vertical .step-mark { margin-top: 1px; }

/* ---------- markdown ---------- */
.md { line-height: 1.6; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md .code-block, .md .md-table, .md hr { margin: 0 0 10px; }
.md h3, .md h4, .md h5, .md h6 { margin: 16px 0 6px; line-height: 1.35; }
.md h3 { font-size: 15px; }
.md h4 { font-size: 14px; }
.md h5, .md h6 { font-size: 13px; }
.md ul, .md ol { padding-left: 20px; }
.md li { margin: 2px 0; }
.md li > p { margin: 0; }
.md li > ul, .md li > ol { margin: 2px 0 4px; }
.md li::marker { color: var(--dim); }
.md blockquote { padding-left: 12px; border-left: 2px solid var(--border-2); color: var(--fg-2); }
.md hr { border: 0; border-top: 1px solid var(--border); }
.md code { font-size: 0.88em; padding: 1px 5px; border-radius: 4px; background: rgb(255 255 255 / 0.07); border: 1px solid var(--border); }
.md strong { font-weight: 600; color: var(--fg); }
.md-compact { line-height: 1.5; }
.md-compact p, .md-compact ul, .md-compact ol { margin-bottom: 4px; }
.md-table { overflow-x: auto; }
.md-table table { border-collapse: collapse; font-size: 12.5px; }
.md-table th, .md-table td { border: 1px solid var(--border-2); padding: 5px 9px; text-align: left; vertical-align: top; }
.md-table th { background: rgb(255 255 255 / 0.03); font-weight: 500; }
.code-block { border: 1px solid var(--border); border-radius: var(--radius); background: var(--inset); overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 2px 10px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border); font-family: var(--mono); -webkit-user-select: none; user-select: none; }
.code-block pre { margin: 0; padding: 10px 12px; overflow-x: auto; font-size: 12px; line-height: 1.55; }
.code-block code { padding: 0; border: 0; background: none; font-size: inherit; }
.code-block .add { color: var(--success); }
.code-block .del { color: var(--danger); }
.code-block .hunk { color: var(--violet); }

/* ---------- diffs ---------- */
.diff { display: flex; flex-direction: column; gap: 10px; }
.diff-summary { font-size: 12px; color: var(--muted); display: flex; gap: 8px; }
.num-add { color: var(--success); font-variant-numeric: tabular-nums; }
.num-del { color: var(--danger); font-variant-numeric: tabular-nums; }
.file-diff { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.file-diff-head { display: flex; align-items: center; background: rgb(255 255 255 / 0.02); }
.file-diff-head:hover { background: var(--hover); }
.file-diff-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12px; text-align: left; }
.file-diff-head > .icon-btn { margin-right: 4px; }
.file-diff-head .num-add, .file-diff-head .num-del { font-size: 11.5px; }
.file-path { flex: 1; min-width: 0; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-mark { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--mono); background: rgb(255 255 255 / 0.08); color: var(--fg-2); }
.file-mark.added { background: color-mix(in oklab, var(--success) 20%, transparent); color: var(--success); }
.file-mark.deleted { background: color-mix(in oklab, var(--danger) 20%, transparent); color: var(--danger); }
.file-mark.renamed { background: color-mix(in oklab, var(--violet) 20%, transparent); color: var(--violet); }
.diff-note { padding: 10px 12px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--border); }
.diff-table-wrap { overflow-x: auto; border-top: 1px solid var(--border); }
.diff-table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; }
.diff-table td { padding: 0 8px; white-space: pre; vertical-align: top; }
.diff-table .ln { width: 1%; min-width: 36px; text-align: right; color: var(--dim); user-select: none; padding: 0 6px; }
.diff-table .code { width: 100%; }
.diff-table .sign { display: inline-block; width: 12px; color: var(--dim); user-select: none; }
.diff-table tr.add { background: color-mix(in oklab, var(--success) 10%, transparent); }
.diff-table tr.add .sign { color: var(--success); }
.diff-table tr.del { background: color-mix(in oklab, var(--danger) 10%, transparent); }
.diff-table tr.del .sign { color: var(--danger); }
.diff-table tr.hunk td { background: color-mix(in oklab, var(--violet) 7%, transparent); color: var(--muted); padding-top: 2px; padding-bottom: 2px; }
.diff-table tr.meta td { color: var(--dim); }
.diff-more { display: block; width: 100%; padding: 6px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); }
.diff-more:hover { color: var(--fg); background: var(--hover); }

/* ---------- cards and pages ---------- */
/* Solid cards hold a page's parts: a quiet head, then the body, with hairlines only between rows. */
.card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); min-width: 0; }
.card-head { display: flex; align-items: center; gap: 8px; min-height: 20px; padding: 14px 16px 4px; color: var(--fg-2); }
.card-head > .icon { color: var(--muted); }
.card-head h3 { font-size: 13px; color: var(--fg); }
.card-head .muted { font-weight: 400; }
.card-head .link-btn, .card-head .aside, .card-head .tools, .card-head .card-link { margin-left: auto; }
.card-head .aside { font: 400 12px/16px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-head .tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.card-head .card-link { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted); }
.card-head .card-link:hover { color: var(--fg); }
.card-body { padding: 10px 16px 16px; }
.card > .card-body + .card-body { border-top: 1px solid var(--border); padding-top: 12px; }
.card-body.list, .list { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lead { font-size: 14px; color: var(--fg-2); margin: 0 0 14px; }
.row-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; color: var(--fg-2); font-size: 12.5px; min-width: 0; }
a.row-link:hover { background: var(--hover); color: var(--fg); }
.row-link > span:not(.spacer) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-end { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.row-start { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.overview-grid, .pr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 16px; align-items: start; }
.overview-main, .overview-side, .pr-main, .pr-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ask-box { display: flex; flex-direction: column; gap: 8px; }
.ask-row { display: flex; gap: 8px; }
.ask-row .input { height: 34px; }
.ask-row .btn { height: 34px; }
.ask-box p { margin: 0; }

/* Glass: cards over the art, on Home and a project's overview. Each blurs what's behind it, which
   also makes it a layer of its own, so the one with an open menu or tooltip comes forward. */
.card.glass { position: relative; padding: 16px 20px; border-color: var(--glass-line); background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03); }
.card.glass:has(.menu, .chart-tip) { z-index: 5; }
.card.glass > .card-head { padding: 0; margin-bottom: 12px; font-size: 13px; line-height: 20px; font-weight: 500; }
.card.glass > .card-head .muted { font-size: 12px; }
.card.glass > .card-body { padding: 0; }
.card.glass > .card-body + .card-body { margin-top: 12px; }
.card-flex { display: flex; flex-direction: column; }
.card-empty { margin: 0; padding: 4px 0; color: var(--muted); }
.card-note { margin: 12px 0 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.card-actions, .card-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.empty-start { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.empty-start > span { margin-right: 4px; }
.more { display: inline-block; margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--muted); }
.more:hover { color: var(--fg); }

/* Rows: an icon or a state dot, a title over a gray line, and what's at the end. */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 6px 0; min-width: 0; }
a.row { margin: 0 -8px; padding: 6px 8px; border-radius: 8px; transition: background 0.15s var(--ease); }
a.row:hover { background: var(--hover); }
.row > .dot, .row > .icon { justify-self: center; align-self: start; }
.row > .dot { margin-top: 6px; }
.row > .icon { margin-top: 2px; color: var(--muted); }
.row-text { min-width: 0; }
.row .t { display: block; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Needs you sits in a narrow column on a project: its titles take two lines before they cut. */
.needs-card .row .t { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
a.t:hover { text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.3); text-underline-offset: 3px; }
.row .m { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .m a { color: var(--fg-2); }
.row .m a:hover { color: var(--fg); }
.row > .end { display: inline-flex; align-items: center; justify-self: end; gap: 6px; font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row > .btn { margin-left: 8px; }
.figure { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg); }
.figure.sev-high, .figure.sev-over { color: var(--sev); }
.card .sub { margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--fg-2); }
.card .sub.muted { margin-top: 0; color: var(--muted); }

/* The work tree (activity.mjs): main as one line, each change a loop off it once it's done or a lane
   while it's open, and deploys as diamonds on the staging and production rails. Only open work takes
   a state's hue; production is the coral one. */
.work-card .card-head { flex-wrap: wrap; row-gap: 8px; }
.tree-chart { position: relative; min-height: 40px; }
.tree-svg { display: block; overflow: visible; }
.tree-svg text { font: 400 11px/1 var(--mono); fill: var(--muted); }
.tree-svg text.row-label { font-family: var(--font); font-size: 12px; }
.tree-svg text.row-label.main { font-family: var(--mono); font-size: 11px; fill: var(--fg-2); }
.tree-svg text.tick.now { fill: var(--fg-2); }
.tree-svg text.name { font-family: var(--font); fill: var(--fg-2); }
.tree-svg line.grid { stroke: rgb(239 233 222 / 0.04); }
.tree-svg line.now-line { stroke: rgb(239 233 222 / 0.18); stroke-dasharray: 2 3; }
.tree-svg line.rail { stroke: rgb(239 233 222 / 0.06); }
.tree-svg line.tree-main { stroke: var(--fg-2); stroke-opacity: 0.55; stroke-width: 2; stroke-linecap: round; }
/* Where main began: a ring at the project's start, or at the import that brought earlier history,
   drawn as a dotted line before it. */
.tree-svg line.tree-main.before { stroke-opacity: 0.35; stroke-width: 1.5; stroke-dasharray: 1 4; }
.tree-begin { fill: var(--bg); stroke: var(--fg-2); stroke-width: 1.5; }
.tree-begin.import { stroke-dasharray: 2.4 1.6; }
.tree-begin.on { stroke: var(--fg); stroke-width: 2; }
.tree-svg rect.hit { fill: transparent; }
:where(.branch, .tree-key) { --c: var(--state-done); }
.tone-working { --c: var(--state-working); }
.tone-waiting { --c: var(--state-waiting); }
.tone-failing { --c: var(--state-failing); }
.tone-review { --c: var(--state-review); }
.tone-done { --c: var(--state-done); }
.branch-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.branch.loop .branch-line { stroke-width: 1.5; }
.branch.dashed .branch-line { stroke-dasharray: 4 3; }
.branch.on .branch-line { stroke-width: 2.5; }
.branch-end { fill: var(--c); }
.branch-cross { stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; }
.merge-dot { fill: var(--bg); stroke: var(--fg-2); stroke-width: 1.25; }
.lane-merge { fill: var(--bg); stroke: var(--c); stroke-width: 1.25; }
.branch-head { fill: var(--c); stroke: var(--ring); stroke-width: 2; }
.branch.tone-review .branch-head { fill: var(--ring); stroke: var(--c); stroke-width: 1.5; }
path.deploy { stroke: var(--ring); stroke-width: 1.5; stroke-linejoin: round; }
path.deploy.staging { fill: var(--fg-2); }
path.deploy.production { fill: var(--primary); }
path.deploy.on { stroke: var(--fg); }
.work-card .legend { gap: 8px 16px; margin: 12px 0 0; line-height: 16px; color: var(--muted); }
.work-card .legend li.push { margin-left: auto; }
.work-card .legend svg { display: block; overflow: visible; }
.tree-key { display: inline-block; flex: none; width: 14px; height: 0; border-top: 2px solid var(--c); margin-right: 6px; vertical-align: middle; }
.tree-key.dashed { border-top-style: dashed; }
.legend .tree-key { margin-right: 0; }
.chart-tip.tree-tip { display: block; min-width: 13rem; max-width: 22rem; }
.tree-tip-line { margin-top: 2px; color: var(--fg-2); overflow-wrap: anywhere; }
.tree-tip-line strong { color: var(--fg); font-weight: 500; }
.tree-table a { color: var(--fg); }
.work-card .usage-table-wrap { margin: 0 -4px; }

/* ---------- the art: Home and a project's overview ---------- */
/* The page scrolls inside .art, so the sea scrolls away with it and the project bar stays,
   clear until the page moves under it. */
.art { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; }
.sea { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.sea canvas { display: block; width: 100%; height: 100%; }
.sea::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(21 20 19 / 0) var(--fade, 56%), var(--bg) 100%); }
.art > .topbar.art-top { position: sticky; top: 0; z-index: 8; background: transparent; border-bottom-color: transparent; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.art > .topbar.art-top.scrolled { background: rgb(21 20 19 / 0.82); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-bottom-color: var(--border); }
.content { position: relative; max-width: 1040px; margin: 0 auto; padding: 0 32px 48px; container-type: inline-size; }
/* Full screen, the map leaves its card: neither the container nor the blur may hold it. */
.content:has(.map-stage.expanded) { container-type: normal; }
.card.glass:has(.map-stage.expanded) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: 1 / -1; }
@container (max-width: 880px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .span-2 { grid-column: span 1; }
}
@container (max-width: 520px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
}

/* The ask box: what to start, on Home; a question for the guide, or a change, on a project. */
.ask { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 12px 12px 20px; border-radius: 18px; border: 1px solid rgb(255 240 225 / 0.1); background: rgb(24 22 20 / 0.66); -webkit-backdrop-filter: blur(28px) saturate(1.25); backdrop-filter: blur(28px) saturate(1.25); box-shadow: 0 32px 80px -32px rgb(0 0 0 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.05); transition: border-color 0.15s var(--ease); }
.ask:focus-within { border-color: rgb(255 240 225 / 0.18); }
.ask:has(.menu) { z-index: 6; }
.ask-input { display: block; width: 100%; min-height: 56px; max-height: 320px; padding: 0 8px 0 0; border: 0; outline: none; resize: none; background: transparent; color: var(--fg); font-size: 16px; line-height: 24px; }
.ask-input::placeholder { color: var(--muted); }
.ask-bar { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: -8px; }
.ask-bar .menu-wrap { min-width: 0; }
.ask-bar .chip-btn { max-width: 16rem; }
.ask-bar .chip-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ask-bar .pick { height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--border); font-size: 13px; color: var(--fg-2); }
.ask-bar .pick:hover { border-color: var(--border-2); }
.ask-bar .pick.on { border-color: color-mix(in oklab, var(--primary) 32%, transparent); color: var(--primary-hi); }
.ask-bar .send { flex: none; width: 32px; height: 32px; margin-left: auto; border-radius: 16px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); }
.ask-bar .send:disabled { box-shadow: none; }
.ask-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--muted); }
.ask-hint { display: flex; align-items: center; gap: 6px; margin: 8px 0 0 20px; font-size: 12px; line-height: 16px; color: var(--muted); }
.ask-hint .icon { flex: none; }

/* Home: the workspace's name, the ask box, and the cards. */
.home { padding-top: 136px; }
.home-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 16px 4px; font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -0.015em; }
.home-brand .mark { width: 26px; height: 26px; flex: none; color: var(--primary); }
.home .bento { margin-top: 56px; }
/* The heatmap: changes merged per day, a column per week. Narrow, it shows fewer weeks. */
.heat-card { container-type: inline-size; }
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); grid-auto-columns: 14px; gap: 4px; justify-content: space-between; }
.heat i { border-radius: 3px; background: rgb(255 246 235 / 0.05); }
.heat i.ahead { visibility: hidden; }
.heat i.l1, .heat-key i.l1 { background: #2e2723; }
.heat i.l2, .heat-key i.l2 { background: #4a3830; }
.heat i.l3, .heat-key i.l3 { background: #7a4b39; }
.heat i.l4, .heat-key i.l4 { background: #c0603f; }
.heat-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--muted); }
.heat-key { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.heat-key i { width: 10px; height: 10px; border-radius: 2px; background: rgb(255 246 235 / 0.05); }
.heat-card .weeks-21, .heat-card .weeks-15 { display: none; }
@container (max-width: 535px) {
  .heat i:nth-child(-n+63) { display: none; }
  .heat-card .weeks-30 { display: none; }
  .heat-card .weeks-21 { display: inline; }
}
@container (max-width: 373px) {
  .heat { grid-template-rows: repeat(7, 12px); grid-auto-columns: 12px; gap: 3px; }
  .heat-key { display: none; }
}
@container (max-width: 311px) {
  .heat i:nth-child(-n+105) { display: none; }
  .heat-card .weeks-21 { display: none; }
  .heat-card .weeks-15 { display: inline; }
}
/* Projects and organizations, one line each. */
.prows { display: flex; flex-direction: column; }
.prow { display: grid; grid-template-columns: 20px 148px minmax(0, 1fr) 132px 72px; column-gap: 12px; align-items: center; min-height: 40px; margin: 0 -8px; padding: 0 8px; border-radius: 8px; color: var(--fg-2); transition: background 0.15s var(--ease); }
.prow:hover { background: var(--hover); color: var(--fg-2); }
.prow .name { min-width: 0; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .sum { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .state { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--fg-2); white-space: nowrap; overflow: hidden; }
.prow .when { text-align: right; font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 640px) {
  .prow { grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: 2px; padding-block: 8px; }
  .prow > .tile { grid-row: span 2; align-self: start; margin-top: 2px; }
  .prow .sum { grid-column: 2 / -1; grid-row: 2; font-size: 12px; line-height: 16px; color: var(--muted); }
  .prow .state { grid-column: 3; grid-row: 1; }
  .prow .when { display: none; }
}

/* A project's overview: its name, what it's doing, the ask box, and the cards. */
.proj { padding-top: 40px; }
.proj > .warn-box, .proj > .import-strip { margin-bottom: 16px; }
.proj .title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.naming { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.proj .summary { max-width: 40rem; margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--fg-2); text-wrap: pretty; }
.proj .ask-wrap { margin-top: 28px; }
.proj .bento { margin-top: 24px; }

/* The details sheet: the repository, the agents, thinking, and the brief, over the overview's side. */
.sheet { position: absolute; top: 0; right: 0; bottom: 0; z-index: 12; display: flex; flex-direction: column; width: min(384px, 100%); background: var(--card); border-left: 1px solid var(--border-2); box-shadow: -24px 0 64px -24px rgb(0 0 0 / 0.6); animation: sheet-in 0.22s var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateX(16px); } }
.sheet-head { display: flex; align-items: center; gap: 8px; flex: none; height: var(--topbar); padding: 0 12px 0 20px; border-bottom: 1px solid var(--border); font-weight: 500; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px 24px; }
.sheet h4 { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted); }
.sheet h4.with-link .link-btn { margin-left: auto; }
.sheet-note { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: var(--fg-2); }
.sheet-empty { margin: 0; font-size: 13px; line-height: 20px; color: var(--muted); }
.sheet-sub { margin: 12px 0 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.sheet .facts { grid-template-columns: 88px minmax(0, 1fr); gap: 6px 12px; font-size: 13px; line-height: 20px; }
.sheet .facts .icon-link { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.facts dd > a > .icon { display: inline-block; vertical-align: -1px; }
.sheet .facts dd.mono { font-size: 12px; }
.repo-facts > .link-btn { margin-top: 12px; }
.agents { display: flex; flex-direction: column; margin: 0 -8px; }
.agents > .sheet-empty { padding: 0 8px; }
.agent { display: flex; align-items: center; gap: 10px; min-width: 0; height: 32px; padding: 0 8px; border-radius: 8px; color: var(--fg-2); }
.agent:hover { background: var(--hover); color: var(--fg); }
.agent > .icon { color: var(--muted); }
.agent-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent .m { flex: none; max-width: 45%; margin-left: auto; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .brief { font-size: 13px; line-height: 20px; color: var(--fg-2); }

.env-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
.env-dot.ready { background: var(--success); }
.env-dot.warn { background: var(--warning); }
.env-dot.down { background: var(--danger); }
.env-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.env-url { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: var(--fg); }
.env-url:hover { text-decoration: underline; }
.env-card p { margin: 0; }
.field-inline { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.field-inline .input { width: auto; }
.field-inline.head-field { margin: 0 0 0 auto; }
.input.input-sm { padding: 3px 8px; font-size: 12.5px; }
select.input.input-sm { padding-right: 26px; }
.warn-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid color-mix(in oklab, var(--warning) 30%, transparent); background: color-mix(in oklab, var(--warning) 8%, transparent); color: color-mix(in oklab, var(--warning) 75%, white); }
.env-facts { margin-top: 10px; }
.env-auto { display: flex; margin-top: 12px; }
.env-problems { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: color-mix(in oklab, var(--warning) 75%, white); }
.env-problems li { display: flex; gap: 6px; align-items: baseline; overflow-wrap: anywhere; }
.ship-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ship-list > li + li { padding-top: 12px; border-top: 1px solid var(--border); }
.ship-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ship-head .pill { margin-left: auto; }
.ship-why { margin: 4px 0 0; overflow-wrap: anywhere; }
.ship-commits { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.ship-commits li { overflow-wrap: anywhere; color: var(--fg-2); }
.ship-commits .mono { margin-right: 4px; }
.ship-commits details summary { cursor: pointer; }
.ship-box, .ship-held { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.ship-box h4, .ship-held h4 { margin: 0 0 8px; color: var(--muted); font-weight: 500; }
.bus-detail { margin-top: 10px; font-size: 12px; }
.env-domains { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.env-domains-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 500; }
.env-domains-head .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.domain-row { display: flex; flex-direction: column; gap: 6px; }
.domain-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.domain-line > .mono { overflow-wrap: anywhere; color: var(--fg); }
.domain-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.domain-dns { display: flex; flex-direction: column; gap: 6px; padding-left: 2px; }
.domain-dns td { overflow-wrap: anywhere; }
.domain-add { display: flex; gap: 6px; }
.domain-add .input { flex: 1; min-width: 0; }
/* the Move card: a live app moving in (web/lib/move.mjs) */
.move-body { display: flex; flex-direction: column; gap: 16px; }
.move-body > p, .move-section-body p, .move-live p { margin: 0; }
.move-section { display: flex; flex-direction: column; gap: 8px; }
.move-section + .move-section { padding-top: 14px; border-top: 1px solid var(--border); }
.move-section-head { display: flex; align-items: center; gap: 8px; }
.move-section-head h4 { margin: 0; font-size: 13px; font-weight: 500; color: var(--fg); }
.move-num { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-2); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.move-num.done { background: var(--success); border-color: var(--success); color: var(--bg); }
.move-section-body { display: flex; flex-direction: column; gap: 8px; padding-left: 26px; min-width: 0; }
.move-calloff { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.move-calloff .muted { max-width: 22rem; text-align: right; }
.move-live { display: flex; flex-direction: column; gap: 8px; }
.move-more > summary { cursor: pointer; color: var(--muted); }
.move-more > summary:hover { color: var(--fg-2); }
.move-more[open] > summary { margin-bottom: 12px; }
.move-run { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.move-run-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.move-run .steps.vertical .step:last-child { padding-bottom: 0; }
.move-run .step-note { overflow-wrap: anywhere; }
.move-db, .move-domain { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.move-db-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.move-survey { display: flex; flex-direction: column; gap: 4px; }
.move-line { display: flex; align-items: baseline; gap: 6px; overflow-wrap: anywhere; }
.move-line svg { flex-shrink: 0; transform: translateY(2px); }
.move-tables > summary { cursor: pointer; }
.move-tables > summary:hover { color: var(--fg-2); }
.move-tables[open] > summary { margin-bottom: 6px; }
.move-tables .table-scroll { max-height: 18rem; overflow-y: auto; }
.move-connect { display: flex; flex-direction: column; gap: 8px; }
.move-connect-row, .move-domain-add { display: flex; gap: 6px; flex-wrap: wrap; }
.move-connect-row .input, .move-domain-add .input { flex: 1 1 14rem; min-width: 0; }
.move-connect .form-error { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.move-upload { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.move-upload .import-meter { width: 9rem; }
.move-upload-error { flex-basis: 100%; overflow-wrap: anywhere; }
.move-steps { margin-top: 2px; }
.move-steps .step-text { gap: 4px; min-width: 0; }
.move-step-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.move-records td { overflow-wrap: anywhere; }
.move-records td:last-child { display: flex; align-items: center; gap: 4px; justify-content: space-between; }
.move-resolvers { display: flex; flex-wrap: wrap; gap: 4px; }
.move-resolvers .chip.move-ok { color: color-mix(in oklab, var(--success) 80%, white); border-color: color-mix(in oklab, var(--success) 25%, transparent); }
.move-access, .move-scheduled { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.move-access > svg, .move-scheduled > svg { color: var(--muted); flex-shrink: 0; }
.move-access > .small, .move-scheduled > .small { flex: 1 1 16rem; }
.move-secret { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.move-secret .mono { color: var(--fg); user-select: all; }
.move-plan { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--fg-2); }
.move-checklist { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 8px; }
.move-checklist legend { padding: 0 4px; color: var(--muted); }
.move-checklist .toggle-label { align-items: flex-start; }
.move-checklist .toggle-label input { margin-top: 2px; flex-shrink: 0; }
.move-when { width: auto; max-width: 16rem; color-scheme: dark; }
.bus-detail summary { cursor: pointer; color: var(--muted); }
.bus-detail summary:hover { color: var(--fg-2); }
.bus-detail table { margin-top: 6px; }
/* positioned, so a screen-reader-only header stays inside the scroller instead of widening the page */
.table-scroll { overflow-x: auto; position: relative; }
.hosting-table td { vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
.hosting-table td a { color: inherit; }
.hosting-table td a:hover { text-decoration: underline; }
.hosting-table .actions-col { width: 1%; }
.deployed { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.deployed a { color: var(--fg-2); }
.call-list { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.card-body > .row-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 12px; }

/* secrets and variables */
.tab-stack > * + * { margin-top: 16px; }
.card-head .head-btn { margin-left: auto; flex-shrink: 0; }
.warn-box > .btn { margin-left: auto; flex-shrink: 0; }
.warn-box a { color: inherit; text-decoration: underline; }
.strong-text { color: var(--fg); font-weight: 500; }
.secret-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--fg-2); }
.secret-state.missing, .secret-warning, .hosting-table td a.secret-warning { color: color-mix(in oklab, var(--warning) 80%, white); }
.secret-warning { display: flex; align-items: center; gap: 5px; width: fit-content; margin-top: 3px; font-size: 11.5px; text-decoration: none; }
.secret-warning:hover span { text-decoration: underline; }
.secret-warning svg { flex-shrink: 0; }
.card-body > .secret-warning { margin-top: 10px; }
.secret-value.masked { -webkit-text-security: disc; }
/* the vault: values shown only when revealed, requests to hand one over, and what happened to each */
.vault-value { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; vertical-align: middle; }
.vault-value code { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); background: rgb(255 255 255 / 0.04); color: var(--fg); max-width: 22rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.vault-value code.masked { color: var(--muted); letter-spacing: 1px; user-select: none; white-space: nowrap; }
.vault-value.compact code { max-width: 16rem; }
.vault-table td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.vault-table td a { color: inherit; }
.vault-table td a:hover { text-decoration: underline; }
.vault-table .actions-col { width: 1%; }
.vault-table .value-col { width: 24rem; }
.vault-table .chip { margin-top: 4px; }
.vault-note { margin-top: 4px; max-width: 26rem; overflow-wrap: anywhere; }
.vault-requests { display: flex; flex-direction: column; gap: 14px; }
.vault-request { display: flex; flex-direction: column; gap: 8px; }
.vault-request + .vault-request { border-top: 1px solid var(--border); padding-top: 14px; }
.vault-request a, .secret-card a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vault-log { list-style: none; margin: 0; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; max-height: 22rem; overflow-y: auto; }
.vault-log li { display: grid; grid-template-columns: minmax(8rem, auto) 1fr auto; gap: 10px; align-items: baseline; color: var(--fg-2); }
.vault-log a { color: inherit; text-decoration: underline; }
.question.secret-card.saved, .question.secret-card.given { --tone: var(--success); }
.check-row { display: flex; gap: 18px; flex-wrap: wrap; }
.field-head { display: flex; align-items: center; justify-content: space-between; }
.foot-start { margin-right: auto; }
.btn-danger { background: color-mix(in oklab, var(--danger) 85%, black); border-color: transparent; color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger); border-color: transparent; }
.variable-value { overflow-wrap: anywhere; max-width: 28rem; }
.logs-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.logs-part h4 { margin: 0 0 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.logs-part .console { max-height: 18rem; }
.toggle-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); }
.deploy-log { border-top: 1px solid var(--border); }
.deploy-log:first-of-type { border-top: 0; }
.deploy-log summary { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; list-style: none; min-width: 0; }
.deploy-log summary:hover { background: var(--hover); }
.deploy-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.deploy-what strong { color: var(--fg); font-weight: 500; }
.deploy-log summary::-webkit-details-marker { display: none; }
.deploy-log .console { margin: 0 14px 12px; }
.coord { width: 100%; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.coord:last-child { border-bottom: 0; padding-bottom: 0; }

.pr-status-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pr-desc { display: flex; flex-direction: column; gap: 14px; }
.pr-desc h4, .review-body h4, .blast h4 { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.bullets { margin: 0; padding-left: 18px; }
.bullets li { margin: 2px 0; }
.kv-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.kv-table td { border-top: 1px solid var(--border); padding: 6px 8px 6px 0; vertical-align: top; }
.kv-table td:first-child { width: 40%; color: var(--fg-2); }
.review.approved { border-color: color-mix(in oklab, var(--success) 28%, transparent); }
.review.approved > .card-head .icon { color: var(--success); }
.review.changes { border-color: color-mix(in oklab, var(--warning) 28%, transparent); }
.review.changes > .card-head .icon { color: var(--warning); }
.review-body { display: flex; flex-direction: column; gap: 14px; }
.findings { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bucket { width: 100%; border: 1px solid color-mix(in oklab, var(--tone) 22%, transparent); border-radius: var(--radius); overflow: hidden; }
.bucket-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: color-mix(in oklab, var(--tone) 6%, transparent); }
.finding { padding: 8px 10px; border-top: 1px solid var(--border); }
.finding-title { font-weight: 500; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.file-ref { font-size: 11px; color: var(--muted); font-weight: 400; }
.blast { padding: 10px 12px; border-radius: var(--radius); background: rgb(255 255 255 / 0.025); border: 1px solid var(--border); }
.blast-head { display: flex; align-items: center; gap: 8px; }
.blast-head h4 { margin: 0; }
.blast p { margin: 6px 0; }
.ci-output summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-top: 8px; }
.ci-output .console { margin-top: 6px; }
.events { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; }
.events li { display: flex; gap: 9px; }
.event-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--tone); flex-shrink: 0; }
.evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 12px; }
.evidence { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.evidence-img { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--inset); }
.evidence-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.evidence figcaption { padding: 8px 10px; font-size: 12px; color: var(--fg-2); }
.evidence-full { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: var(--radius); }

/* Tabs and segmented controls are pills: the open one a step lighter, with a hairline of light on top. */
.tabs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; flex: none; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; color: var(--muted); font-size: 13px; white-space: nowrap; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.tab:hover { color: var(--fg); background: var(--hover); }
.tab.active { color: var(--fg); background: rgb(255 246 235 / 0.09); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05); }
.project-bar .tab { height: 30px; border-radius: 15px; font-size: 14px; color: var(--fg-2); }
.project-bar .tab.active { color: var(--fg); }
.tab-count { font: 400 11px/16px var(--mono); padding: 0 6px; border-radius: 8px; background: rgb(255 255 255 / 0.08); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.seg, .segmented { display: inline-flex; align-items: center; flex: none; gap: 2px; padding: 2px; border-radius: 14px; border: 1px solid var(--border); background: rgb(255 246 235 / 0.04); }
.seg button, .segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 11px; color: var(--muted); font-size: 13px; line-height: 1; font-weight: 400; white-space: nowrap; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.seg button:hover:not(:disabled), .segmented button:hover:not(:disabled) { color: var(--fg); }
.seg button.on, .segmented button.on { background: rgb(255 246 235 / 0.1); color: var(--fg); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05); }
.seg.icons button { width: 30px; padding: 0; }
.segmented { margin-bottom: 12px; }
.segmented.sm { margin: 0; flex-shrink: 0; }
.segmented.sm button { height: 20px; padding: 0 8px; font-size: 12px; }
.top-actions .seg { border-radius: 16px; }
.top-actions .seg button { height: 26px; border-radius: 13px; }
.pr-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.pr-row + .pr-row { border-top: 1px solid var(--border); }
.pr-row:hover { background: var(--hover); }
.pr-row-main { flex: 1; min-width: 0; }
.pr-row-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.thread-row + .thread-row { border-top: 1px solid var(--border); }

.code-view { display: grid; grid-template-columns: 15rem minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; min-height: 24rem; background: var(--card); }
.file-tree { border-right: 1px solid var(--border); overflow: auto; max-height: 75vh; padding-bottom: 8px; }
.tree-head { display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--fg-2); position: sticky; top: 0; background: var(--card); }
.tree-dir, .tree-file { display: flex; align-items: center; gap: 6px; width: 100%; padding-top: 3px; padding-bottom: 3px; padding-right: 8px; font-size: 12.5px; color: var(--fg-2); text-align: left; white-space: nowrap; }
.tree-dir:hover, .tree-file:hover { background: var(--hover); color: var(--fg); }
.tree-file.active { background: var(--active); color: var(--fg); }
.tree-dir .icon, .tree-file .icon { color: var(--muted); }
.file-view { min-width: 0; display: flex; flex-direction: column; }
.file-view-head { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--fg-2); }
.file-md { padding: 16px 20px; }
/* Source as VS Code shows it: a gutter of line numbers that stays put while long lines scroll,
   tabs four wide, and the Dark+ colors below. */
.source { overflow: auto; max-height: 75vh; background: var(--inset); padding: 6px 0; }
.source table { border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; line-height: 19px; tab-size: 4; min-width: 100%; }
.source td { padding: 0 24px 0 0; white-space: pre; }
.source .ln { position: sticky; left: 0; background: var(--inset); color: #6e7681; text-align: right; padding: 0 18px 0 14px; user-select: none; min-width: 52px; font-variant-numeric: tabular-nums; }
.source .code { width: 100%; }
.source tr:hover .ln { color: #c6c6c6; }
.source tr.hit td, .source tr.hit .ln { background: color-mix(in oklab, var(--warning) 12%, var(--inset)); }
.source tr.hit .ln { color: #c6c6c6; }
.diff-table, .code-block pre { tab-size: 4; }

/* VS Code's Dark+ theme, on highlight.js's classes (see highlight.mjs). */
.hl .code, .hl code { color: #d4d4d4; }
.hl .hljs-comment, .hl .hljs-quote { color: #6a9955; }
.hl .hljs-keyword, .hl .hljs-literal, .hl .hljs-symbol, .hl .hljs-variable.language_, .hl .hljs-doctag, .hl .hljs-name, .hl .hljs-meta .hljs-keyword, .hl .hljs-selector-tag.hljs-keyword { color: #569cd6; }
.hl .hl-control { color: #c586c0; }
.hl .hljs-string, .hl .hljs-meta .hljs-string, .hl .hljs-link, .hl .hljs-code { color: #ce9178; }
.hl .hljs-number { color: #b5cea8; }
.hl .hljs-regexp { color: #d16969; }
.hl .hljs-char.escape_, .hl .hljs-selector-tag, .hl .hljs-selector-class, .hl .hljs-selector-id, .hl .hljs-selector-attr, .hl .hljs-selector-pseudo { color: #d7ba7d; }
.hl .hljs-title, .hl .hljs-title.function_, .hl .hljs-section.function_ { color: #dcdcaa; }
.hl .hljs-title.class_, .hl .hljs-title.class_.inherited__, .hl .hljs-type, .hl .hljs-built_in { color: #4ec9b0; }
.hl .hljs-params, .hl .hljs-variable, .hl .hljs-template-variable, .hl .hljs-attr, .hl .hljs-attribute, .hl .hljs-property { color: #9cdcfe; }
.hl .hljs-variable.constant_ { color: #4fc1ff; }
.hl .hljs-tag, .hl .hljs-punctuation, .hl .hljs-operator, .hl .hljs-subst { color: #d4d4d4; }
.hl .hljs-tag .hljs-name { color: #569cd6; }
.hl .hljs-tag .hljs-attr { color: #9cdcfe; }
.hl .hljs-meta { color: #569cd6; }
.hl .hljs-section { color: #569cd6; font-weight: 600; }
.hl .hljs-bullet { color: #6796e6; }
.hl .hljs-emphasis { font-style: italic; }
.hl .hljs-strong { font-weight: 600; }
.hl .hljs-addition { color: #b5cea8; }
.hl .hljs-deletion { color: #ce9178; }
.commit-list { display: flex; flex-direction: column; }
.commit-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.commit-row + .commit-row { border-top: 1px solid var(--border); }
.commit-row:hover { background: var(--hover); }
.commit-row .icon { color: var(--muted); }
/* Where an import's history begins, and the list's end, with older commits a page at a time. */
.commit-divider { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--border); background: rgb(239 233 222 / 0.03); color: var(--muted); font-size: 12px; }
.commit-divider + .commit-row { border-top: 1px solid var(--border); }
.commit-foot { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border); min-height: 44px; }
.commit-foot .btn { margin-left: auto; }
.commit-subject { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commit-head { margin: 10px 0 14px; }
.commit-title { font-size: 15px; }
.commit-body { white-space: pre-wrap; font-family: var(--font); color: var(--fg-2); margin: 8px 0; }

/* ---------- settings ---------- */
.settings-rows { display: flex; flex-direction: column; }
.settings-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.settings-row select.input { width: 13rem; }
.settings-label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-weight: 500; }
.settings-label-col { flex: 1; min-width: 0; }
.toggle-row { cursor: pointer; align-items: flex-start; }
.switch { appearance: none; width: 32px; height: 18px; border-radius: 999px; background: rgb(255 255 255 / 0.14); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.15s; margin: 2px 0 0; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(14px); }
.skill-catalog { margin-top: 12px; }
.skill-catalog summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.skill-catalog-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* ---------- menus, dialogs, palette, toasts ---------- */
.menu-wrap { position: relative; display: inline-flex; }
.menu { position: absolute; z-index: 40; min-width: 13rem; max-width: 22rem; max-height: 22rem; overflow-y: auto; padding: 4px; border-radius: 12px; background: var(--raised); border: 1px solid var(--border-2); box-shadow: 0 16px 40px -8px rgb(0 0 0 / 0.65); animation: menu-in 0.14s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes menu-up { from { opacity: 0; transform: translateY(4px); } }
.menu.bottom { top: calc(100% + 4px); }
.menu.top { bottom: calc(100% + 6px); animation-name: menu-up; }
.menu.align-start { left: 0; }
.menu.align-end { right: 0; }
.menu-section { padding: 8px 8px 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.menu-section:empty { height: 1px; padding: 0; margin: 4px -4px; background: var(--border); }
.menu-item { width: 100%; display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 8px; text-align: left; }
.menu-item > .icon { margin-top: 2px; color: var(--muted); }
.menu-item:hover:not(:disabled) { background: var(--hover); }
.menu-check { display: grid; place-items: center; width: 14px; height: 18px; flex-shrink: 0; color: var(--fg-2); }
.menu-text { display: flex; flex-direction: column; min-width: 0; }
.menu-label { font-size: 13px; line-height: 20px; }
.menu-desc { font-size: 12px; line-height: 16px; color: var(--muted); overflow-wrap: anywhere; }

.dialog { padding: 0; border: 1px solid var(--border-2); border-radius: 16px; background: var(--dialog); color: var(--fg); width: min(34rem, calc(100vw - 32px)); max-height: calc(100vh - 64px); box-shadow: 0 40px 100px -20px rgb(0 0 0 / 0.8); }
.dialog[open] { animation: dialog-in 0.18s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.dialog.wide { width: min(64rem, calc(100vw - 32px)); }
.dialog::backdrop { background: rgb(10 9 8 / 0.6); }
.dialog-inner { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.dialog-head { display: flex; gap: 12px; align-items: flex-start; }
.dialog-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--border); color: var(--fg-2); flex-shrink: 0; }
.dialog-titles { flex: 1; min-width: 0; }
.dialog-titles h2 { font-size: 15px; }
.dialog-titles p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form p { margin: 0; }
.field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.field > span { font-size: 12px; font-weight: 500; color: var(--fg-2); }
.field small { font-size: 11.5px; }
.field-row { display: flex; gap: 10px; }
.field > .segmented { align-self: flex-start; max-width: 100%; }
.segmented.kind-choices { flex-wrap: wrap; }
.form-error { color: color-mix(in oklab, var(--danger) 75%, white); font-size: 12.5px; }
/* The command bar (⌘K): search everything, act on it, and go. */
.dialog.palette-dialog { width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 24vh)); margin: 12vh auto auto; overflow: hidden; border-radius: 16px; background: rgb(27 25 23 / 0.94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 40px 100px -20px rgb(0 0 0 / 0.8); }
.dialog.palette-dialog[open] { display: flex; flex-direction: column; }
.pal-input { display: flex; align-items: center; gap: 12px; flex: none; height: 56px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--border); }
.pal-input > .icon { color: var(--muted); }
.pal-input input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; font-size: 16px; caret-color: var(--primary); }
.pal-input input::placeholder { color: var(--muted); }
.pal-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.pal-group { padding: 12px 12px 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.pal-group:first-child { padding-top: 4px; }
.pal-row { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--fg-2); text-align: left; }
.pal-row.on { background: var(--raised); color: var(--fg); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04); }
.pal-row > .icon { color: var(--muted); }
.pal-row.on > .icon { color: var(--fg-2); }
.pal-row > .dot { margin: 0 4px; }
.pal-label { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-label b { font-weight: 500; color: var(--fg); }
.pal-row .m { flex: 0 1 auto; min-width: 0; max-width: 50%; margin-left: auto; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-empty { margin: 0; padding: 24px 12px; text-align: center; color: var(--muted); }
.pal-foot { display: flex; align-items: center; gap: 16px; flex: none; height: 40px; padding: 0 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.pal-foot span { display: inline-flex; align-items: center; gap: 6px; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
:where(.toast) { --tone: var(--muted); }
.toast { display: flex; align-items: flex-start; gap: 8px; max-width: 24rem; padding: 9px 12px; border-radius: 12px; background: var(--raised); border: 1px solid color-mix(in oklab, var(--tone) 35%, var(--border-2)); box-shadow: 0 12px 32px rgb(0 0 0 / 0.6); font-size: 12.5px; pointer-events: auto; animation: toast-in 0.18s ease-out; }
.toast .icon { color: var(--tone); margin-top: 2px; }
.toast.tone-info { --tone: oklch(0.72 0.12 240); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- questions from the agent ---------- */
.question { --tone: var(--warning); display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid color-mix(in oklab, var(--tone) 32%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--tone) 6%, var(--card)), var(--card)); }
.question:not(.pending) { --tone: var(--muted); border-color: var(--border); background: var(--card); }
.question.answered { --tone: var(--success); }
.question-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--fg-2); }
.question-head > .icon { color: var(--tone); }
.question-head > :last-child { margin-left: auto; font-weight: 400; font-size: 11px; color: var(--muted); }
.question-head > .question-clock { color: color-mix(in oklab, var(--tone) 80%, white); font-variant-numeric: tabular-nums; }
.question-item { display: flex; flex-direction: column; gap: 8px; }
.question-item + .question-item { border-top: 1px solid var(--border); padding-top: 12px; }
.question-label { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.question-text { font-size: 13.5px; }
.question-options { display: flex; flex-direction: column; gap: 4px; }
.question-option { display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: rgb(255 255 255 / 0.02); cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.question-option:hover { background: var(--hover); border-color: var(--border-2); }
.question-option.on { border-color: color-mix(in oklab, var(--primary) 60%, transparent); background: color-mix(in oklab, var(--primary) 9%, transparent); }
.question-option input[type="radio"] { margin: 3px 0 0; accent-color: var(--primary-hi); flex-shrink: 0; }
.question-option.other { align-items: center; }
.question-option.other input[type="radio"] { margin-top: 0; }
.question-option.other .input { padding: 4px 8px; }
.question-option-text { display: flex; flex-direction: column; min-width: 0; }
.question-option-text small { font-size: 11.5px; color: var(--muted); }
.question-answer { display: flex; align-items: flex-start; gap: 7px; padding: 6px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: rgb(255 255 255 / 0.03); color: var(--fg-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.question-answer .icon { color: var(--success); margin-top: 4px; }
.question-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.question-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.question-end { margin-top: -4px; }

/* ---------- a plan proposed in plan mode ---------- */
.proposal { --tone: var(--primary); display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid color-mix(in oklab, var(--tone) 32%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--tone) 6%, var(--card)), var(--card)); }
.proposal:not(.ready):not(.writing) { --tone: var(--muted); border-color: var(--border); background: var(--card); gap: 8px; }
.proposal.built { --tone: var(--success); }
.proposal-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--fg-2); }
.proposal-head > .icon { color: var(--tone); }
.proposal-head > :last-child { margin-left: auto; font-weight: 400; font-size: 11px; color: var(--muted); }
.proposal-text { font-size: 13.5px; }
.proposal-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; }
.proposal-foot .btn { margin-left: auto; }
.proposal-end .link-btn { font-size: inherit; }

/* ---------- agents asking agents, environments, approvals ---------- */
.call-card { border: 1px solid var(--border); border-left: 2px solid var(--role, var(--primary)); border-radius: var(--radius); background: var(--card); padding: 9px 12px; display: flex; flex-direction: column; gap: 6px; }
.call-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.call-head a { color: var(--fg-2); font-weight: 500; }
.call-head a:hover { color: var(--fg); }
.call-status { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; white-space: nowrap; }
.call-card.answered .call-status { color: var(--success); }
.call-card.failed .call-status { color: var(--danger); }
.call-text { color: var(--fg-2); }
.call-answer { border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.call-answer > .link-btn { align-self: flex-start; }
.call-error { color: var(--danger); }
.env-call { border: 1px solid var(--border); border-left: 2px solid var(--role, var(--primary)); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.env-call.running .work-title { color: var(--fg); }
.question.approval.approved { --tone: var(--success); }
.approval-title { font-size: 13.5px; font-weight: 500; }
.approval-foot { display: flex; flex-direction: column; gap: 8px; }
.approval-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.approval-actions > .muted { flex: 1; min-width: 12rem; }

/* ---------- workspace files and images ---------- */
.file-panel .panel-head { gap: 4px; padding: 8px 8px 8px 10px; min-height: 45px; }
.crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1px; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 12px; scrollbar-width: none; }
.crumbs button { display: inline-flex; align-items: center; gap: 5px; padding: 2px 5px; border-radius: 5px; color: var(--muted); }
.crumbs button:hover { color: var(--fg); background: var(--hover); }
.crumbs .sep { color: var(--dim); }
.crumb-current { padding: 2px 5px; color: var(--fg); }
.dir-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dir-entry { width: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; font-family: var(--mono); font-size: 12px; color: var(--fg-2); text-align: left; }
.dir-entry:hover { background: var(--hover); color: var(--fg); }
.dir-entry .icon { color: var(--muted); }
.dir-entry span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-note { margin-bottom: 10px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: rgb(255 255 255 / 0.03); color: var(--muted); font-size: 12px; }
.panel-scroll.flush { padding: 0; }
.panel-scroll.flush .file-note { margin: 0; border-radius: 0; border-width: 0 0 1px; }
.panel-scroll.flush .source { max-height: none; overflow: visible; padding: 8px 0; }
.file-panel .file-md { padding: 4px 6px 16px; }
.file-image { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.file-image button, .md-image, .image-viewer { background: repeating-conic-gradient(var(--card-2) 0 25%, var(--card) 0 50%) 0 0 / 16px 16px; }
.file-image button { display: block; max-width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); cursor: zoom-in; }
.file-image img { display: block; max-width: 100%; max-height: 70vh; }
.md-file, .md-code-link { display: inline; padding: 0; text-align: left; cursor: pointer; }
.md-file { color: var(--fg-2); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.25); text-underline-offset: 2px; }
.md-file:hover { color: var(--fg); text-decoration-color: currentColor; }
.md-code-link code { text-decoration: underline dotted rgb(255 255 255 / 0.35); text-underline-offset: 3px; }
.md-code-link:hover code { color: var(--fg); background: rgb(255 255 255 / 0.1); border-color: var(--border-2); }
.md-image { display: inline-block; vertical-align: top; max-width: 100%; margin: 2px 4px 2px 0; padding: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); cursor: zoom-in; transition: border-color 0.12s; }
.md-image:hover { border-color: rgb(255 255 255 / 0.22); }
.md-image img { display: block; max-width: 100%; max-height: 26rem; height: auto; }
.bubble .md-image img { max-height: 16rem; }
.md-image-missing { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 8px; border-radius: 6px; border: 1px dashed var(--border-2); color: var(--muted); font-size: 12px; vertical-align: middle; }
.md-image-missing span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.md-image-missing:hover { color: var(--fg); border-color: rgb(255 255 255 / 0.22); }
.image-viewer { display: grid; place-items: center; min-height: 12rem; max-height: calc(100vh - 220px); overflow: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.image-viewer img { display: block; max-width: 100%; max-height: calc(100vh - 240px); }

/* ---------- usage and limits ---------- */
.s1 { --series: var(--series-1); }
.s2 { --series: var(--series-2); }
.s3 { --series: var(--series-3); }
.s4 { --series: var(--series-4); }
.s5 { --series: var(--series-5); }
.s1, .s2, .s3, .s4, .s5 { fill: var(--series); background: var(--series); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.usage { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.usage-windows { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 10px; }
.window-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }
.window-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.window-head .muted { font-size: 11.5px; }
.window-figure { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.window-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.window-meter { height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--sev) 20%, transparent); overflow: hidden; }
.window-meter i { display: block; height: 100%; min-width: 2px; background: var(--sev); border-radius: 0 999px 999px 0; }
.window-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.window-status .icon { color: var(--sev); }
.window-status > .muted:last-child { margin-left: auto; }
.window-foot { margin-top: auto; }
.usage-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.usage-filters .btn[aria-pressed="true"] { background: var(--active); color: var(--fg); }
.usage-report { display: flex; flex-direction: column; gap: 18px; transition: opacity 0.15s; }
.usage-report.refreshing { opacity: 0.55; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.now-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.now-rows li { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 8px; }
.usage-filters .segmented.sm + .segmented.sm { margin-left: 4px; }
.breakdown.spend-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spend-breakdown .usage-section.wide { grid-column: 1 / -1; }
.stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: rgb(255 255 255 / 0.02); }
.stat-label { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.stat-value { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 11px; color: var(--muted); text-wrap: pretty; }
.legend { list-style: none; margin: 0 0 -8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--fg-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.usage-charts { display: flex; flex-direction: column; gap: 16px; }
.chart-block h4, .usage-section h4 { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; font-size: 12.5px; font-weight: 500; }
.chart-block h4 .muted { font-size: 12px; font-weight: 400; }
.chart { position: relative; border-radius: 6px; outline: none; }
.chart:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 70%, transparent); outline-offset: 4px; }
.chart svg { display: block; overflow: visible; }
.chart line.grid { stroke: rgb(255 255 255 / 0.07); stroke-width: 1; shape-rendering: crispEdges; }
.chart line.baseline { stroke: rgb(255 255 255 / 0.22); stroke-width: 1; shape-rendering: crispEdges; }
.chart text.tick { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.chart rect.col-hover { fill: rgb(255 255 255 / 0.05); }
.chart rect.hit { fill: transparent; cursor: crosshair; }
/* One tooltip per column. Rows share the grid columns, so values line up. */
.chart-tip { position: absolute; top: 0; z-index: 5; pointer-events: none; display: grid; grid-template-columns: 10px auto auto; align-items: center; gap: 2px 8px; min-width: 11rem; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--raised); box-shadow: 0 8px 24px rgb(0 0 0 / 0.55); font-size: 12px; }
.chart-tip.flip { transform: translateX(-100%); }
.tip-title { grid-column: 1 / -1; margin-bottom: 3px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.tip-row { display: contents; }
.tip-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tip-label { color: var(--fg-2); white-space: nowrap; }
.tip-total > * { margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--border); }
.usage-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.usage-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.usage-table th { padding: 6px 10px; border-bottom: 1px solid var(--border); background: rgb(255 255 255 / 0.02); text-align: left; font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.usage-table td { padding: 5px 10px; border-top: 1px solid rgb(255 255 255 / 0.04); color: var(--fg-2); }
.usage-table tbody tr:first-child td { border-top: 0; }
.usage-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-table td.strong { color: var(--fg); font-weight: 500; }
.usage-table td.muted { color: var(--muted); }
.usage-table.compact th, .usage-table.compact td { padding: 4px 8px; }
.usage-table.compact th { background: none; }
.usage-table.compact :is(th, td):first-child { padding-left: 0; }
.usage-table.compact :is(th, td):last-child { padding-right: 0; }
.type-cell, .name-cell { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.name-cell { overflow: hidden; white-space: nowrap; }
.name-cell > :not(svg) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.name-cell a { color: var(--fg-2); }
/* The name column takes what the numbers leave, and long names end in an ellipsis. */
.usage-table.compact td:first-child { width: 100%; max-width: 0; }
/* Contracts: operations and events take the width; problems in traffic give it to what happened. */
.contract-problem { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--fg-2); }
.contract-problem .pill { flex-shrink: 0; }
.contract-sub { margin-bottom: 6px; }
.contract-table td { vertical-align: top; }
.contract-table .mono { font-size: 12px; overflow-wrap: anywhere; }
.contract-table.traffic td:first-child { width: auto; max-width: none; white-space: nowrap; }
.contract-message { min-width: 24ch; overflow-wrap: anywhere; }
.name-cell a:hover { color: var(--fg); text-decoration: underline; }
.usage-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.usage-section h4 { margin-bottom: 0; }
.share-rows { display: flex; flex-direction: column; gap: 8px; }
.share-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: 10px; font-size: 12px; }
.share-label { color: var(--fg-2); }
/* A 100% bar: square at the start, rounded at the end, 2px gaps between the parts. */
.share-bar { display: flex; gap: 2px; height: 14px; }
.share-bar span { flex-basis: 0; min-width: 2px; }
.share-bar span:last-child { border-radius: 0 4px 4px 0; }
.breakdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.usage-note { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .panel:not(.wide) { position: absolute; inset: var(--topbar) 0 0 auto; z-index: 20; box-shadow: -12px 0 32px rgb(0 0 0 / 0.6); }
  .overview-grid, .pr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .hide-sm { display: none; }
  .panel.wide { position: absolute; inset: var(--topbar) 0 0 auto; width: min(100%, 40rem); z-index: 20; box-shadow: -12px 0 32px rgb(0 0 0 / 0.6); }
}
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(18rem, 85vw); z-index: 60; transform: translateX(-100%); transition: transform 0.18s ease-out; }
  .drawer-open .sidebar { transform: none; }
  .drawer-open .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 0.55); }
  .drawer-toggle { display: grid; position: fixed; top: 11px; left: 8px; z-index: 30; }
  .topbar { padding-left: 46px; }
  /* A banner takes the top row, so the menu button sits in it, clear of its words. */
  .banner { min-height: var(--topbar); display: flex; align-items: center; justify-content: center; padding: 6px 12px 6px 46px; }
  .main:has(> .banner) .topbar { padding-left: 16px; }
  /* The title gets the room; status still shows in the sidebar and the activity line. */
  .topbar > .role-badge, .top-title .pill { display: none; }
  .env-grid { grid-template-columns: minmax(0, 1fr); }
  .page.narrow { padding-inline: 14px; }
  .kpis, .kpis.five, .kpis.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breakdown, .breakdown.spend-breakdown { grid-template-columns: minmax(0, 1fr); }
  .usage-table .wide-only { display: none; }
  .usage-table :is(th, td) { padding-inline: 7px; }
  .code-view { grid-template-columns: minmax(0, 1fr); }
  .file-tree { border-right: 0; border-bottom: 1px solid var(--border); max-height: 14rem; }
  .kbd-hint { display: none; }
  .page { padding: 16px 14px 40px; }
  .timeline { padding: 16px 12px 20px; }
  .composer-wrap { padding: 0 10px 10px; }
  .field-row, .ask-row { flex-direction: column; }
  .settings-row { flex-wrap: wrap; }
  /* A label keeps room for its words, and a control that doesn't fit beside it takes the next line. */
  .settings-label-col, .settings-row > .settings-label { min-width: min(100%, 11rem); }
  /* A card's description takes a line of its own under its title, and its button stays beside the title. */
  .card-head { flex-wrap: wrap; row-gap: 2px; }
  .card-head:has(> .head-btn) > .muted { order: 1; flex-basis: 100%; }
}
@media (max-width: 700px) {
  /* Top-bar buttons keep their icons and leave the title the room; screen readers still read their words. */
  .top-actions .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .top-actions .btn:has(.btn-text) { gap: 0; padding: 0 8px; }
}
@media (max-width: 600px) {
  .content { padding: 0 16px 32px; }
  .home { padding-top: 64px; }
  .home-brand { margin-bottom: 12px; font-size: 20px; }
  .home-brand .mark { width: 22px; height: 22px; }
  .home .bento { margin-top: 32px; }
  .proj { padding-top: 24px; }
  .proj .title { font-size: 26px; line-height: 32px; }
  /* Over the art here, so the title and summary carry a halo of the page's own black. */
  .proj .title, .proj .summary { text-shadow: 0 0 2px var(--bg), 0 0 6px var(--bg), 0 0 12px var(--bg), 0 0 20px var(--bg); }
  .proj .summary { font-size: 15px; line-height: 22px; }
  /* The tabs scroll sideways here; the fade says there are more. */
  .project-bar .tabs { padding-right: 20px; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .proj .ask-wrap { margin-top: 20px; }
  .ask { padding: 14px 10px 10px 16px; border-radius: 16px; }
  .ask-note { display: none; }
  .ask-hint { margin-left: 16px; }
  .card.glass { padding: 14px 16px; }
  .work-card .legend li.push { margin-left: 0; }
  .dialog.palette-dialog { margin-top: 8vh; }
  .pal-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* GitHub: CI jobs, the repository card, and links out */
.ci-jobs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.ci-jobs li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ci-jobs li > div { min-width: 0; overflow-wrap: anywhere; }
.ci-mark { display: inline-grid; place-items: center; flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; color: var(--tone, var(--muted)); background: color-mix(in oklab, var(--tone, var(--muted)) 16%, transparent); }
.icon-link { display: inline-flex; align-items: center; color: var(--muted); }
.icon-link:hover { color: var(--fg); }
.repo-name { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--fg); }
.repo-error { display: grid; gap: 8px; justify-items: start; margin-top: 8px; }
.repo-error p { margin: 0; }
.outside-pulls { display: grid; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.tree-empty { padding: 10px; margin: 0; }
.break { overflow-wrap: anywhere; }

/* Project map: services as boxes, connections as lines in the chart series colors. */
.map-card .card-head { flex-wrap: wrap; row-gap: 6px; }
.map-source { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.map-controls .segmented button:disabled { opacity: 0.45; cursor: default; }
.map-card, .map-bare { --map-public: var(--primary); --map-internal: var(--series-1); --map-private: var(--series-3); }
.map-stage { position: relative; }
.map-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.map-bare .map-frame { margin: 0; }
.map-bare .map-legend { padding: 8px 0 0; }
.map-bare .map-empty { padding: 8px 0 0; }
.map-stage.expanded { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg); }
.map-frame { position: relative; height: clamp(380px, 62vh, 640px); overflow: hidden; margin: 8px 14px 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background-color: var(--inset); background-image: radial-gradient(circle, rgb(255 240 235 / 0.09) 1px, transparent 1.3px);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.map-stage.expanded .map-frame { flex: 1; height: auto; margin: 12px 12px 0; }
.map-frame.pan-moving, .map-frame.box-moving, .map-frame.box-moving .map-node { cursor: grabbing; }
.map { display: block; font-family: var(--font); outline: none; }
.map .dim { opacity: 0.16; }
.map-edge, .map-node, .map-label { transition: opacity 0.12s; }
.map-legend-break { flex-basis: 100%; height: 0; }
.map-node { cursor: pointer; outline: none; }
.map-node .box { fill: var(--card-2); stroke: var(--border-2); transition: stroke 0.12s; }
.map-node .stripe { fill: var(--dim); }
.map-node.app .stripe { fill: var(--map-internal); }
.map-node.database .stripe { fill: var(--map-private); }
.map-node.internet .stripe, .map-node.exposed .stripe { fill: var(--map-public); }
.map-node.exposed .box { stroke: color-mix(in oklab, var(--map-public) 45%, transparent); }
.map-node:hover .box { stroke: rgb(255 255 255 / 0.3); }
.map-node.dragging .box { stroke: rgb(255 255 255 / 0.45); filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.5)); }
.map-node:focus-visible .box { stroke: var(--primary-hi); stroke-width: 2; }
.map-node.internet .box { fill: var(--card); stroke: color-mix(in oklab, var(--map-public) 60%, transparent); stroke-dasharray: 4 3; }
.map-icon { color: var(--fg-2); }
.map-node.internet .map-icon { color: var(--map-public); }
.map-node .name { fill: var(--fg); font-size: 12.5px; font-weight: 600; }
.map-node .kind, .map-node .state { fill: var(--muted); font-size: 11px; }
.map-dot { fill: var(--dim); }
.map-dot.ready { fill: var(--success); }
.map-dot.warn { fill: var(--warning); }
.map-dot.down { fill: var(--danger); }
/* Lines by how exposed they are: public bold, internal plain, private thin with a lock. */
.map-edge .line { fill: none; stroke-linecap: round; }
.map-edge.public .line, .map-key.public { stroke: var(--map-public); stroke-width: 3; }
.map-edge.internal .line, .map-key.internal { stroke: var(--map-internal); stroke-width: 1.8; }
.map-edge.private .line, .map-key.private { stroke: var(--map-private); stroke-width: 1.5; stroke-dasharray: 1.5 3.5; }
.map-edge.event .line, .map-key.event { stroke-dasharray: 7 4; }
.map-edge.stream .line, .map-key.stream { stroke-dasharray: 10 3 2 3; }
.map-edge.websocket .line, .map-key.websocket { stroke-width: 2.4; }
.map-arrow.public { fill: var(--map-public); }
.map-arrow.internal { fill: var(--map-internal); }
.map-arrow.private { fill: var(--map-private); }
.map-edge .hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.map-label rect { fill: var(--card); stroke: var(--border-2); }
.map-label.public rect { stroke: color-mix(in oklab, var(--map-public) 55%, transparent); }
.map-label.internal rect { stroke: color-mix(in oklab, var(--map-internal) 55%, transparent); }
.map-label.private rect { stroke: color-mix(in oklab, var(--map-private) 55%, transparent); }
.map-label text { fill: var(--fg-2); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.map-lock .icon { color: var(--map-private); }
.map-key { stroke-width: 2; }
.map-tools { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--raised); box-shadow: 0 4px 14px rgb(0 0 0 / 0.35); cursor: default; }
.map-zoom { min-width: 3.2em; text-align: center; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-hint { margin-left: auto; color: var(--dim); }
.map-tip { position: absolute; z-index: 5; pointer-events: none; width: max-content; max-width: 21rem; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--raised); box-shadow: 0 8px 24px rgb(0 0 0 / 0.55); font-size: 12px; }
.map-tip.flip { transform: translateX(-100%); }
.map-tip-title { font-weight: 600; color: var(--fg); }
.map-tip-sub { margin-top: 1px; color: var(--muted); font-size: 11.5px; }
.map-tip dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 7px 0 0; }
.map-tip dl:empty { display: none; }
.map-tip dt { color: var(--muted); white-space: nowrap; }
.map-tip dd { margin: 0; color: var(--fg-2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.map-tip dd.warn { color: var(--warning); }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 14px 12px; font-size: 11.5px; color: var(--muted); }
.map-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend svg { display: block; overflow: visible; }
.map-legend-gap { flex: 1; }
.map-empty { margin: 0; padding: 0 14px 12px; }
.map-list { display: grid; gap: 10px; }
/* Cells keep to one line and hug what they hold; the last column takes the rest. */
.map-table td { white-space: nowrap; }
.map-table :is(th, td):last-child { width: 100%; }
.map-state { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- accounts and credits ---------- */
.settings-value { color: var(--fg-2); font-size: 12.5px; overflow-wrap: anywhere; text-align: right; }
.input.name-input { width: 16rem; }
.sessions-row { align-items: flex-start; }
.sessions { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sessions li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; font-size: 12.5px; color: var(--fg-2); }
.password-form { padding: 2px 14px 14px; }
.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.credit-body { display: flex; flex-direction: column; gap: 10px; }
.credit-body p { margin: 0; }
.credit-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.credit-left.sev-high, .credit-left.sev-over { color: var(--sev); }
.credit-state { display: inline-flex; align-items: center; gap: 4px; }
.credit-state .icon { color: var(--sev); }
.statement { padding-top: 0; }
.statement .usage-table-wrap { max-height: 20rem; overflow-y: auto; }
.statement p { margin: 6px 0 0; }
.usage-table td.nowrap { white-space: nowrap; }
.usage-table td.credit-in { color: var(--success); }
.price-note { padding-bottom: 2px; }
.price-note p { margin: 0; }
.accounts-list { display: flex; flex-direction: column; }
.account-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); }
.account-item-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.account-item-names > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-item-name { font-weight: 500; }
.account-item-tags { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.account-item-credits { display: flex; flex-direction: column; align-items: flex-end; min-width: 8.5rem; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.money-input { display: flex; align-items: center; gap: 6px; }
.money-input .input.num { width: 9rem; text-align: left; }
.link-box { display: flex; align-items: center; gap: 6px; }
.link-box .input { flex: 1; }
/* Organizations: their heading in the sidebar, what each member works on, and choosing it. */
.sidebar-org { margin-top: 4px; }
.sidebar-org-name { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: inherit; }
.sidebar-org-name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-org-name:hover, .sidebar-org-name.active { color: var(--fg); }
.org-works-on { color: var(--fg-2); }
a.account-item.org-item { color: inherit; }
a.account-item.org-item:hover { background: var(--hover); }
.card > .accounts-list + .card-body { border-top: 1px solid var(--border); }
.org-new { display: flex; align-items: center; gap: 8px; }
.org-new .input { flex: 1; min-width: 0; }
.scope-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); max-height: 16rem; overflow-y: auto; }
.scope-project + .scope-project { border-top: 1px solid var(--border); padding-top: 6px; }
.scope-row { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 12.5px; color: var(--fg-2); cursor: pointer; }
.scope-row input { margin: 0; accent-color: var(--primary-hi); flex-shrink: 0; }
.scope-row strong { font-weight: 500; color: var(--fg); }
.scope-services { display: flex; flex-direction: column; padding-left: 22px; }
.top-sub .top-link { font-size: inherit; padding: 0; }
.move-facts { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--fg-2); font-size: 13px; }
@media (max-width: 820px) {
  .form-pair, .credit-figures { grid-template-columns: minmax(0, 1fr); }
  /* The name field keeps its width beside its label, and fills the line when it wraps under it. */
  .settings-row:has(> .name-input) > .settings-label-col { flex-grow: 999; }
  .settings-row > .input.name-input { flex: 1 1 auto; }
  .account-item { flex-wrap: wrap; }
  .account-item-names { flex-basis: calc(100% - 80px); }
  .account-item-tags { order: 1; margin-left: 34px; }
  .account-item-credits { order: 2; margin-left: auto; min-width: 0; }
}

/* ---------- sign-in ---------- */
.signin { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px 16px 18vh; }
.signin [hidden] { display: none !important; }
.signin-sea { position: fixed; inset: 0; --fade: 88%; }
.signin-brand { display: flex; align-items: center; gap: 12px; font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -0.015em; }
.signin-brand .mark { width: 28px; height: 28px; color: var(--primary); flex: none; }
.signin-card { width: min(24rem, 100%); padding: 24px; border-radius: 18px; border: 1px solid rgb(255 240 225 / 0.1); background: rgb(24 22 20 / 0.66); -webkit-backdrop-filter: blur(28px) saturate(1.25); backdrop-filter: blur(28px) saturate(1.25); box-shadow: 0 32px 80px -32px rgb(0 0 0 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.05); }
.signin-card h1 { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; }
.signin-titles p { margin: 4px 0 0; font-size: 13px; }
.signin-card .input { background: rgb(12 11 10 / 0.5); }
.signin-card .btn-lg { width: 100%; margin-top: 4px; }
.signin-card .error-box { margin: 0; font-size: 13px; }
.signin-card .link-btn { font-size: inherit; color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }

/* SSH keys (Settings) */
.terminal-panel { position: relative; flex-shrink: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border-2); background: var(--inset); }
.terminal-resize { position: absolute; top: -3px; left: 0; right: 0; height: 6px; cursor: ns-resize; z-index: 1; }
.terminal-resize:hover, .terminal-resize:active { background: color-mix(in oklab, var(--primary) 35%, transparent); }
.terminal-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: 12.5px; }
.terminal-head strong { font-weight: 600; color: var(--fg); }
.terminal-note { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-state { display: inline-flex; align-items: center; gap: 6px; }
.terminal-box { flex: 1; min-height: 0; padding: 6px 0 2px 10px; }
.terminal-box .xterm { height: 100%; }
.terminal-box .xterm-viewport { background: transparent !important; }

/* The start page's heading, and prices in Settings. */
.start-heading { margin: 18vh auto 0; text-align: center; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-2); }
.prices { display: flex; flex-direction: column; gap: 12px; }

/* Connect GitHub: in place of every page but Settings until the account's GitHub is connected. */
.connect-github { display: grid; place-items: center; min-height: 70vh; }
.connect-github-card { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 30rem; padding: 32px 28px; text-align: center; }
.connect-github-card h1 { margin: 0; font-size: 18px; font-weight: 600; }
.connect-github-card p { margin: 0; line-height: 1.5; }
.connect-github-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in oklab, var(--primary) 14%, var(--card)); color: var(--primary-hi); }

/* The review desk: everyone's pull requests at a service manager, in the order it takes them. */
.desk-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--radius); color: var(--fg); text-decoration: none; font-size: 13px; min-width: 0; }
.desk-row:hover { background: var(--hover); }
.desk-row.done { color: var(--fg-2); }
.desk-row.done .desk-mark { color: var(--merged); }
.desk-mark { width: 16px; display: inline-flex; justify-content: center; color: var(--muted); flex-shrink: 0; }
.desk-row.live .desk-mark { color: var(--primary); }
.desk-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.desk-row.mine .desk-title { font-weight: 600; }
.desk-who { white-space: nowrap; }
.desk-state { white-space: nowrap; font-size: 12.5px; color: var(--fg-2); }
.desk-row.live .desk-state { color: var(--fg); }
.review-watch.live { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.review-steps { display: flex; flex-direction: column; gap: 1px; }
.work-row.static { cursor: default; }

/* A change's preview, above the composer. */
.preview-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 auto 8px; width: 100%; max-width: calc(var(--chat) - 40px); padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--border-2); font-size: 12.5px; color: var(--fg-2); }
.preview-strip.live { border-color: color-mix(in oklab, var(--success) 30%, transparent); background: color-mix(in oklab, var(--success) 5%, transparent); }
.preview-strip.live > .icon { color: var(--success); }
.preview-strip.live.away { border-color: color-mix(in oklab, var(--warning) 30%, transparent); background: color-mix(in oklab, var(--warning) 5%, transparent); }
.preview-strip.live.away > .icon { color: var(--warning); }
.preview-url { color: var(--fg); font-weight: 500; }
.preview-error { flex-basis: 100%; white-space: pre-wrap; }

/* Where an import is (see importing.mjs): above the project manager's composer, and on the project's page. */
.import-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--border-2); font-size: 12.5px; color: var(--fg-2); }
.thread-main > .import-strip { margin: 0 auto 8px; width: calc(100% - 40px); max-width: calc(var(--chat) - 40px); }
.import-strip > .icon { flex-shrink: 0; color: var(--muted); }
.import-strip.failed { border-color: color-mix(in oklab, var(--warning) 30%, transparent); background: color-mix(in oklab, var(--warning) 5%, transparent); }
.import-strip.failed > .icon { color: var(--warning); }
.import-text { flex: 1 1 16rem; min-width: 0; }
.import-text > .muted { margin-left: 4px; }
.import-text a { color: var(--fg); font-weight: 500; }
.import-meter { display: inline-block; vertical-align: middle; width: 9rem; margin: 0 8px 0 10px; }
.import-meter .meter-fill { display: block; transition: width 0.2s; }
.import-note { flex-basis: 100%; white-space: pre-wrap; color: var(--muted); }

/* The new project page: importing existing code, under the heading. */
.start-import { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 14px auto 0; max-width: 34rem; }
.start-import .chip-btn { display: inline-flex; align-items: center; gap: 6px; }
.start-source { height: 26px; padding: 0 8px 0 10px; gap: 6px; font-size: 12.5px; color: var(--fg); }
.start-import-note { flex-basis: 100%; margin: 4px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* What an import left behind, on the repository card. */
.left-behind { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.left-behind summary { cursor: pointer; color: var(--fg-2); }
.left-behind ul { display: grid; gap: 3px; margin: 6px 0 0; padding: 0; list-style: none; max-height: 16rem; overflow-y: auto; font-size: 12px; }
.left-behind li { overflow-wrap: anywhere; }
.left-behind li > .muted { margin-left: 4px; }
.left-behind p { margin: 6px 0 0; }

/* A right-click menu, at the pointer (see ContextMenu). */
.menu.context-menu { position: fixed; z-index: 60; min-width: 11rem; }

.thread-main > .warn-box { margin: 0 16px 10px; }