/* ============================================================
   Tokens — mirror the existing Delivery design system.
   oklch throughout. Light + dark via [data-theme].
   ============================================================ */

:root {
  /* Brand — hue is account-configurable.
     Account → Appearance → Theme color writes --accent-h onto :root and
     persists it to localStorage('run-accent-h'). Default 155 = green.
     Every accent in the product reads from here, so the whole system
     recolours to the user's chosen theme. Status + stage hues stay fixed. */
  --accent-h:      155;
  --accent:        oklch(68% 0.115 var(--accent-h));
  --accent-2:      oklch(58% 0.115 var(--accent-h));
  --accent-ink:    oklch(27% 0.045 var(--accent-h));

  /* Semantic status — FIXED, never account-configurable. Deliberately more
     saturated than the muted brand accent (chroma ~0.16+ vs 0.115) and on
     hues held clear of the accent default, so a status never reads as the
     theme even when an account picks a green/amber/red theme color.
     --good sits at 145 (true success green), distinct from the 155 brand. */
  --good:          oklch(70% 0.16 145);
  --warn:          oklch(78% 0.155 82);
  --bad:           oklch(62% 0.20 27);
  --info:          oklch(66% 0.16 250);
  --debug:         oklch(64% 0.02 250);
  /* Querying (worker asking / waiting for input) is NOT its own colour — it
     maps to the semantic --good, like every other task status. */

  /* Surfaces — neutral foundation. Tinted on a fixed cool-neutral hue (250),
     NOT the brand hue, so the theme color never leaks into the base UI. */
  --bg:            oklch(98% 0.004 250);
  --bg-sunk:       oklch(96% 0.005 250);
  --surface:       oklch(99.5% 0.002 250);
  --surface-raised:oklch(100% 0 0);

  /* Ink */
  --ink:           oklch(20% 0.02 250);
  --ink-2:         oklch(40% 0.018 250);
  --ink-3:         oklch(58% 0.014 250);
  --ink-4:         oklch(72% 0.012 250);

  /* Lines */
  --line:          oklch(92% 0.008 250);
  --line-2:        oklch(88% 0.01 250);
  --line-3:        oklch(82% 0.012 250);

  /* Shadow */
  --shadow-1:      0 1px 0 oklch(80% 0.01 250 / .35), 0 1px 2px oklch(50% 0.02 250 / .06);
  --shadow-2:      0 1px 0 oklch(80% 0.01 250 / .35), 0 4px 12px oklch(40% 0.02 250 / .07);
  --shadow-3:      0 1px 0 oklch(80% 0.01 250 / .35), 0 10px 28px oklch(40% 0.02 250 / .10);

  /* Stage palette (lane top borders) */
  --stage-discovery: oklch(72% 0.13 270);
  --stage-planning:  oklch(72% 0.13 240);
  --stage-design:    oklch(72% 0.13 320);
  --stage-build:     oklch(72% 0.13 155);
  --stage-testing:   oklch(76% 0.13 75);
  --stage-review:    oklch(72% 0.13 200);
  --stage-release:   oklch(70% 0.13 130);
  --stage-learn:     oklch(72% 0.13 50);
  --stage-close:     oklch(58% 0.014 250);

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  /* Radius */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* Type */
  --font-sans:    'Inter Tight', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Inter Tight', system-ui, sans-serif;

  /* Scrollbar — the one cross-cutting element treatment that ships as a
     foundation, so every surface (docs + product) scrolls the same way.
     --scrollbar-size is the full track/grab width; the visible pill is inset
     from it by --scrollbar-inset so the hit area stays generous. */
  --scrollbar-size:         14px;
  --scrollbar-inset:        5px;  /* resting: thin, quiet 4px pill */
  --scrollbar-inset-hover:  2px;  /* engaged: full 10px pill */
  --scrollbar-track:        transparent;
  --scrollbar-thumb:        oklch(78% 0.016 250);
  --scrollbar-thumb-hover:  oklch(60% 0.02 250);
  --scrollbar-thumb-active: var(--accent-2);
}

/* ---- Custom scrollbar (global) ----------------------------------------
   Refined pill thumb on a transparent track. Comfortable 14px grab zone;
   at rest the thumb is a quiet 4px pill, and it grows to a full 10px pill
   and darkens when you hover it, then takes the brand accent while you drag.
   Firefox gets the thin native bar tinted to match. --------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--r-pill);
  border: var(--scrollbar-inset) solid transparent;
  background-clip: padding-box;
  min-height: 36px;
}
/* Hovering the thumb thickens + darkens it */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border-width: var(--scrollbar-inset-hover);
  background-clip: padding-box;
}
/* Dragging the thumb takes the brand accent. `:active` is the ideal hook but
   fires unreliably mid-drag in Chromium, so scrollbar.js also toggles
   `.is-sb-dragging` on the container being dragged — that's the dependable one. */
::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
  border-width: var(--scrollbar-inset-hover);
  background-clip: padding-box;
}
.is-sb-dragging::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-active) !important;
  border-width: var(--scrollbar-inset-hover) !important;
  background-clip: padding-box;
}

[data-theme="dark"] {
  /* Warm, soft dark. Hue shifted to a warm taupe (70) with a touch of
     chroma so surfaces feel charcoal rather than blue. Lighter base and
     gentler ink keep contrast comfortable — no harsh near-black/near-white. */
  --bg:            oklch(17% 0.008 70);
  --bg-sunk:       oklch(14.5% 0.008 70);
  --surface:      oklch(20.5% 0.009 70);
  --surface-raised:oklch(24% 0.01 70);

  --ink:           oklch(91% 0.008 70);
  --ink-2:         oklch(75% 0.009 70);
  --ink-3:         oklch(59% 0.01 70);
  --ink-4:         oklch(47% 0.01 70);

  --line:          oklch(28% 0.009 70);
  --line-2:        oklch(33% 0.01 70);
  --line-3:        oklch(40% 0.011 70);

  --shadow-1:      0 1px 0 oklch(100% 0 0 / .04), 0 1px 2px oklch(0% 0 0 / .35);
  --shadow-2:      0 1px 0 oklch(100% 0 0 / .04), 0 4px 12px oklch(0% 0 0 / .40);
  --shadow-3:      0 1px 0 oklch(100% 0 0 / .04), 0 10px 28px oklch(0% 0 0 / .50);

  --accent:        oklch(76% 0.115 var(--accent-h));
  --accent-2:      oklch(66% 0.115 var(--accent-h));
  --good:          oklch(76% 0.16 145);
  --warn:          oklch(82% 0.155 82);
  --bad:           oklch(70% 0.18 27);
  --info:          oklch(74% 0.16 250);

  /* Scrollbar — quiet on the dark surface, brightens toward the accent on drag */
  --scrollbar-thumb:        oklch(36% 0.01 70);
  --scrollbar-thumb-hover:  oklch(50% 0.011 70);
  --scrollbar-thumb-active: var(--accent);
}
/* ============================================================
   Delivery — Components (canonical)
   ------------------------------------------------------------
   The single source of truth for every reusable component in
   the product. Pairs with tokens.css (the foundations layer).

   RULES (keep these true so nothing drifts):
   • Every value references a token from tokens.css. No raw
     hex / px colours, no magic numbers for shared scales.
   • Components are self-contained: they do NOT depend on any
     page wrapper (.app-shell, .run-view, …). Drop the markup
     anywhere and it renders correctly.
   • One component = one block below. Variants are modifier
     classes (.btn.primary), states are real states / data-attrs
     (:hover, :disabled, [data-open], .is-invalid).

   Foundations.html previews tokens.css. Components.html previews
   THIS file. Prototype.html is the frozen behavioural reference.
   ============================================================ */


/* ============================================================
   1 · BUTTON  →  .btn  (+ .primary .accent .ghost .danger / .sm / .icon)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 13px var(--font-sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, opacity .12s, transform .08s;
}
.btn:hover { background: var(--surface-raised); color: var(--ink); border-color: var(--line-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid color-mix(in oklch, var(--accent) 45%, transparent); outline-offset: 2px; }
.btn svg { width: 15px; height: 15px; }

/* sizes */
.btn.sm { height: 28px; padding: 0 11px; font-size: 11.5px; }
.btn.sm svg { width: 13px; height: 13px; }
.btn.lg { height: 44px; padding: 0 20px; font-size: 14px; border-radius: var(--r-pill); }

/* variants */
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.primary:hover { background: color-mix(in oklch, var(--ink) 86%, var(--bg)); color: var(--bg); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.accent:hover { background: color-mix(in oklch, var(--accent) 88%, black); color: var(--accent-ink); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-raised); border-color: var(--line); }
.btn.danger { background: transparent; color: var(--bad); border-color: color-mix(in oklch, var(--bad) 40%, var(--line)); }
.btn.danger:hover { background: color-mix(in oklch, var(--bad) 10%, var(--surface)); color: var(--bad); }
.btn.danger.fill { background: var(--bad); border-color: var(--bad); color: var(--bg); }

/* icon-only */
.btn.icon { width: 34px; padding: 0; }
.btn.icon.sm { width: 28px; }
.btn.icon.lg { width: 44px; }

/* states */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid color-mix(in oklch, currentColor 0%, transparent);
  border-top-color: var(--ink-3); border-radius: 50%;
  animation: cmp-spin .6s linear infinite;
}
.btn.primary.is-loading::after, .btn.accent.is-loading::after { border-top-color: var(--bg); }
@keyframes cmp-spin { to { transform: rotate(360deg); } }


/* ============================================================
   2 · ICON BUTTON  →  .iconbtn  (+ .danger)
   Quiet 30×30 affordance — slide-over chrome, row actions, toolbars.
   ============================================================ */
.iconbtn {
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s, color .14s, border-color .14s;
}
@media (hover: hover) {
  .iconbtn:hover { background: var(--surface-raised); border-color: var(--line); color: var(--ink); }
  .iconbtn.danger:hover {
    background: var(--surface-raised);
    border-color: var(--line);
    color: var(--bad);
  }
}
.iconbtn:focus-visible { outline: 2px solid color-mix(in oklch, var(--accent) 45%, transparent); outline-offset: 1px; }
.iconbtn svg { width: 15px; height: 15px; }


/* ============================================================
   3 · SEGMENTED CONTROL  →  .seg > .seg-btn.on  (+ .seg-stop)
   Used for Transport (Run / Pause / Stop) and Mode pickers.
   ============================================================ */
.seg {
  position: relative;
  display: inline-flex;
  width: 100%;
  gap: 3px;
  padding: 3px;
  background: var(--bg-sunk);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
}
.seg.auto { width: auto; }
/* Sliding thumb — a real child element (<i class="seg-thumb">) positioned
   by JS with direct inline styles. A real element transitions reliably;
   a var()-driven pseudo-element does not interpolate consistently. */
.seg > .seg-thumb {
  position: absolute;
  top: 0; left: 0;
  border-radius: 7px;
  background: var(--ink);
  box-shadow: var(--shadow-1);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.seg-thumb.is-stop { background: var(--bad); }
.seg.is-ready > .seg-thumb { opacity: 1; }
.seg.is-anim > .seg-thumb {
  transition:
    transform .36s cubic-bezier(.34, 1.3, .46, 1),
    width     .36s cubic-bezier(.34, 1.3, .46, 1),
    height    .36s cubic-bezier(.34, 1.3, .46, 1),
    background .18s ease;
}
.seg-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font: 500 12px var(--font-sans);
  cursor: pointer;
  transition: color .2s ease;
}
.seg-btn:hover:not(.on) { color: var(--ink); }
.seg-btn.on { color: var(--bg); }
.seg-btn svg { width: 13px; height: 13px; }
/* No-JS / pre-init fallback: the active segment carries its own solid fill */
.seg:not(.is-ready) .seg-btn.on { background: var(--ink); box-shadow: var(--shadow-1); }
.seg:not(.is-ready) .seg-btn.seg-stop.on { background: var(--bad); }


/* ============================================================
   4 · FIELD  →  .field > .field-label + control + .field-hint
   Wraps input / textarea / select / dropdown / toggle / checkbox.
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label {
  display: flex; align-items: center; gap: 6px;
  font: 500 11px var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
.field-req { color: color-mix(in oklch, var(--bad) 62%, var(--ink-3)); font-weight: 600; }
.field-optional { margin-left: 4px; text-transform: none; letter-spacing: 0; color: var(--ink-4); font-weight: 400; }
.field-lock {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: auto;
  font: 9.5px var(--font-mono); color: var(--ink-4);
  text-transform: none; letter-spacing: 0;
}
.field-lock svg { width: 10px; height: 10px; }

/* inputs */
.input, .textarea, .select {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font: 13px var(--font-sans);
  line-height: 18px;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
  -moz-appearance: none;
       appearance: none; -webkit-appearance: none;
}
.input.mono, .textarea.mono {
  font-family: var(--font-mono); font-size: 12px; line-height: 18px;
  padding: 9px 11px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-2);
}
.input::-moz-placeholder, .textarea::-moz-placeholder { color: var(--ink-4); }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .textarea:focus, .select:focus {
  outline: 2px solid color-mix(in oklch, var(--accent) 28%, transparent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.select {
  cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
.select.placeholder, .input.placeholder { color: var(--ink-4); }

/* with leading icon */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input-ico {
  position: absolute; left: 11px; display: inline-flex;
  color: var(--ink-4); pointer-events: none;
}
.input-wrap .input-ico svg { width: 15px; height: 15px; }
.input-wrap .input { padding-left: 34px; }

/* states */
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--bg-sunk); color: var(--ink-3);
  border-color: var(--line); cursor: not-allowed;
}
.input.invalid, .textarea.invalid, .select.invalid, .field.invalid .input {
  border-color: color-mix(in oklch, var(--bad) 58%, var(--line));
  background: color-mix(in oklch, var(--bad) 5%, var(--surface));
}
.input.invalid:focus { outline-color: color-mix(in oklch, var(--bad) 30%, transparent); }

/* hint / error / valid */
.field-hint { font: 11px var(--font-mono); color: var(--ink-3); line-height: 1.5; }
.field-hint.sans { font-family: var(--font-sans); font-size: 11.5px; }
.field-hint b { color: var(--ink-2); font-weight: 600; }
.field-hint.error { display: flex; align-items: flex-start; gap: 5px; color: var(--bad); }
.field-hint.valid { display: flex; align-items: center; gap: 5px; color: var(--good); }
.field-hint.error svg, .field-hint.valid svg { width: 12px; height: 12px; flex: none; margin-top: 1px; }


/* ============================================================
   5 · DROPDOWN  →  .dropdown  (custom listbox enhancing a native
   <select>; behaviour from useDropdown.js). Static trigger styling here.
   ============================================================ */
.dropdown { position: relative; width: 100%; }
.dropdown-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%; box-sizing: border-box;
  min-height: 38px; padding: 8px 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  color: var(--ink);
  font: 13px var(--font-sans);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.dropdown-trigger:hover { border-color: color-mix(in oklch, var(--ink) 20%, var(--line)); background: var(--surface-raised); }
.dropdown.is-open .dropdown-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent);
}
.dropdown-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-trigger.is-placeholder .dropdown-value { color: var(--ink-4); }
.dropdown-chevron { flex: none; width: 16px; height: 16px; color: var(--ink-3); transition: transform .2s; }
.dropdown.is-open .dropdown-chevron { transform: rotate(180deg); color: var(--accent); }
/* menu */
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  display: none;
  min-width: 180px; max-height: 280px; overflow-y: auto;
  padding: 5px;
  background: var(--surface-raised);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
}
.dropdown.is-open .dropdown-menu { display: block; }
@media (min-width: 641px) and (hover: hover) {
  .dropdown.is-open .dropdown-menu { animation: dropdown-pop .14s ease; }
  @keyframes dropdown-pop { from { opacity: 0; transform: translateY(-4px); } }
}
.dropdown-option {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-1);
  font: 13px var(--font-sans); color: var(--ink-2); cursor: pointer;
}
.dropdown-option:hover, .dropdown-option.is-active { background: color-mix(in oklch, var(--accent) 13%, transparent); color: var(--ink); }
.dropdown-option[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.dropdown-option-check { flex: none; width: 15px; height: 15px; color: var(--accent); opacity: 0; }
.dropdown-option[aria-selected="true"] .dropdown-option-check { opacity: 1; }
.dropdown-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  font: 13px var(--font-sans);
  color: var(--ink-4);
  cursor: default;
}
.dropdown-empty-icon { flex: none; display: inline-flex; width: 15px; height: 15px; color: var(--ink-4); opacity: 0.8; }
.dropdown-empty-icon svg { width: 100%; height: 100%; }
.dropdown-empty-text { flex: 1; min-width: 0; }

/* touch / small screens → the menu becomes a bottom sheet that pops up from below
   (same motion as the slide-over), with a scrim-blur behind it. */
@media (max-width: 640px), (pointer: coarse) {
  .dropdown.is-open:not(.dropdown--demo)::before {
    content: ""; position: fixed; inset: 0; z-index: 60;
    background: color-mix(in oklch, var(--ink) 38%, transparent);
    backdrop-filter: blur(3px);
    animation: dropdown-scrim-in .26s ease;
  }
  .dropdown:not(.dropdown--demo) .dropdown-menu {
    position: fixed; z-index: 61;
    left: 0; right: 0; bottom: 0; top: auto;
    margin: 0; width: 100%;
    max-height: 70vh;
    padding: 14px 10px max(14px, env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid var(--line);
    border-radius: var(--r-3) var(--r-3) 0 0;
    box-shadow: 0 -24px 60px -30px color-mix(in oklch, var(--ink) 60%, transparent);
    animation: dropdown-sheet-in .3s cubic-bezier(.22,.7,.3,1);
  }
  /* grab handle */
  .dropdown:not(.dropdown--demo) .dropdown-menu::before {
    content: ""; display: block; width: 36px; height: 4px; margin: -4px auto 10px;
    border-radius: var(--r-pill); background: var(--line-3);
  }
  .dropdown:not(.dropdown--demo) .dropdown-option { padding: 13px 12px; min-height: 50px; font-size: 15px; border-radius: var(--r-2); }
  .dropdown:not(.dropdown--demo) .dropdown-option + .dropdown-option {
    border-top: 1px solid color-mix(in oklch, var(--line) 70%, transparent); border-radius: 0;
  }
  .dropdown:not(.dropdown--demo) .dropdown-option-check { width: 18px; height: 18px; }
  @keyframes dropdown-scrim-in { from { opacity: 0; } }
  @keyframes dropdown-sheet-in { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) {
  .dropdown.is-open:not(.dropdown--demo)::before, .dropdown:not(.dropdown--demo) .dropdown-menu { animation: none; }
}

/* ---- multi-select variant: .dropdown.multi ----
   Options toggle in place and the menu stays open; the trigger summarises
   the chosen set with a count pill, and a sticky bar offers select-all.
   Add .danger to recolour the whole control to the destructive palette. */
.dropdown-count {
  flex: none; min-width: 19px; height: 19px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 11px var(--font-sans); color: var(--accent);
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  border-radius: var(--r-pill);
}
.dropdown-trigger.is-placeholder .dropdown-count { display: none; }
.dropdown-multi-bar {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -5px -5px 4px; padding: 7px 9px 8px;
  background: var(--surface-raised); border-bottom: 1px solid var(--line);
}
.dropdown-multi-count { font: 500 11px var(--font-mono); letter-spacing: .01em; color: var(--ink-3); }
.dropdown-multi-all {
  border: 0; background: none; cursor: pointer; padding: 3px 6px;
  border-radius: var(--r-1); font: 600 11.5px var(--font-sans); color: var(--accent);
  transition: background .12s;
}
.dropdown-multi-all:hover { background: color-mix(in oklch, var(--accent) 13%, transparent); }
.dropdown.multi .dropdown-option[aria-selected="true"] { font-weight: 500; }
.dropdown-box {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border: 1.5px solid var(--line-3); border-radius: 5px;
  background: var(--surface); color: #fff; transition: background .12s, border-color .12s;
}
.dropdown-box svg { width: 12px; height: 12px; opacity: 0; transition: opacity .1s; }
.dropdown.multi .dropdown-option[aria-selected="true"] .dropdown-box {
  background: var(--accent); border-color: var(--accent);
}
.dropdown.multi .dropdown-option[aria-selected="true"] .dropdown-box svg { opacity: 1; }
.dropdown.danger { --accent: var(--bad); }
/* compact rows + static bar in the bottom sheet so a long multi list fits the drawer */
@media (max-width: 640px), (pointer: coarse) {
  .dropdown.multi:not(.dropdown--demo) .dropdown-multi-bar { position: static; margin: 0 -10px 4px; }
  .dropdown.multi:not(.dropdown--demo) .dropdown-option { min-height: 0; padding: 9px 12px; font-size: 14px; }
}


/* ============================================================
   6 · TOGGLE  →  .toggle > input[type=checkbox]
   Boolean switch. Accent track when on.
   ============================================================ */
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: relative; flex: none;
  width: 38px; height: 22px;
  background: var(--line-3);
  border-radius: var(--r-pill);
  transition: background .18s ease;
}
.toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
  transition: transform .18s cubic-bezier(.22,.7,.3,1);
}
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(16px); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid color-mix(in oklch, var(--accent) 45%, transparent); outline-offset: 2px; }
.toggle input:disabled + .toggle-track { opacity: .45; }
.toggle-label { font: 13px var(--font-sans); color: var(--ink-2); }
.toggle.sm .toggle-track { width: 32px; height: 18px; }
.toggle.sm .toggle-track::after { width: 14px; height: 14px; }
.toggle.sm input:checked + .toggle-track::after { transform: translateX(14px); }


/* ============================================================
   7 · CHECKBOX + GROUP  →  .check > input[type=checkbox] ; .check-group
   ============================================================ */
.check { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box {
  position: relative; flex: none;
  width: 18px; height: 18px; margin-top: 1px;
  background: var(--surface);
  border: 1px solid var(--line-3);
  border-radius: 5px;
  transition: background .14s, border-color .14s;
}
.check-box::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .12s;
}
.check input:checked + .check-box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check-box::after { opacity: 1; }
.check input:indeterminate + .check-box { background: var(--accent); border-color: var(--accent); }
.check input:indeterminate + .check-box::after {
  opacity: 1;
  background: no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.check input:focus-visible + .check-box { outline: 2px solid color-mix(in oklch, var(--accent) 45%, transparent); outline-offset: 2px; }
.check input:disabled + .check-box { opacity: .45; }
.check-text { display: flex; flex-direction: column; gap: 2px; }
.check-title { font: 13px var(--font-sans); color: var(--ink); }
.check-sub { font: 11.5px var(--font-sans); color: var(--ink-3); }
.check-group { display: flex; flex-direction: column; gap: 12px; }
.check-group.inline { flex-direction: row; flex-wrap: wrap; gap: 18px; }
/* Compact — dense surfaces (slide-overs, toolbars) */
.check.sm { gap: 7px; }
.check.sm .check-box { width: 15px; height: 15px; border-radius: 4px; margin-top: 0; }
.check.sm .check-box::after { background-size: 9px; }
.check.sm .check-title { font-size: 12px; }
.check.sm .check-sub { font-size: 11px; }
/* Danger — destructive confirmation (e.g. dry-run before a prune) */
.check.danger input:checked + .check-box,
.check.danger input:indeterminate + .check-box { background: var(--bad); border-color: var(--bad); }
.check.danger .check-title { color: color-mix(in oklch, var(--bad) 72%, var(--ink)); }


/* ============================================================
   8 · LABEL / PILL / CHIP / TAG  →  .pill  .chip  .tag
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  font: 500 11.5px var(--font-mono); letter-spacing: .01em;
  color: var(--ink-2);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.good { color: var(--good); border-color: color-mix(in oklch, var(--good) 40%, var(--line)); background: color-mix(in oklch, var(--good) 10%, var(--surface)); }
.pill.warn { color: color-mix(in oklch, var(--warn) 78%, var(--ink)); border-color: color-mix(in oklch, var(--warn) 42%, var(--line)); background: color-mix(in oklch, var(--warn) 12%, var(--surface)); }
.pill.bad  { color: var(--bad);  border-color: color-mix(in oklch, var(--bad) 40%, var(--line));  background: color-mix(in oklch, var(--bad) 10%, var(--surface)); }
.pill.info { color: var(--info); border-color: color-mix(in oklch, var(--info) 40%, var(--line)); background: color-mix(in oklch, var(--info) 10%, var(--surface)); }
.pill.solid { color: var(--bg); background: var(--ink); border-color: var(--ink); }
/* removable */
.pill.removable { padding: 3px 5px 3px 10px; }
.pill .pill-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  color: var(--ink-4); cursor: pointer;
}
.pill .pill-x:hover { background: color-mix(in oklch, var(--bad) 14%, transparent); color: var(--bad); }
.pill .pill-x svg { width: 9px; height: 9px; }

/* tag — square, quiet metadata label */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px;
  font: 600 9.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-sunk);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
}

/* chip — interactive filter / value chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.chip:hover { background: var(--surface-raised); border-color: var(--line-2); }
.chip.on { color: var(--accent-ink); background: color-mix(in oklch, var(--accent) 16%, var(--surface)); border-color: color-mix(in oklch, var(--accent) 38%, var(--line)); }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }


/* ============================================================
   9 · WORKER AVATAR  →  .avatar  (+ .sm .lg)  /  data-img | .is-empty
   ============================================================ */
.avatar {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 18%, var(--surface));
  color: color-mix(in oklch, var(--accent) 72%, var(--ink));
  border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
  font: 600 11px var(--font-mono); letter-spacing: .02em;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* uploaded image → selected colour shows as a framing border instead of a fill */
.avatar:has(img) {
  background: transparent;
  border: 2px solid var(--accent);
  box-shadow: inset 0 0 0 1px var(--surface);
}
.avatar.sm { width: 20px; height: 20px; font-size: 9px; }
.avatar.lg { width: 40px; height: 40px; font-size: 14px; }
/* unassigned / no worker */
.avatar.is-empty {
  background: transparent; color: var(--ink-4);
  border: 1px dashed var(--line-3); box-shadow: none;
}
/* worker chip = avatar + name */
.worker { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--font-sans); color: var(--ink-2); }
.worker.unassigned { color: var(--ink-4); }


/* ============================================================
   10 · SECTION PANEL  →  .panel  (+ [data-collapsible] / [data-open])
   ONE component for every content holder: New Task, Recent Activity,
   Machines, Workers, Repositories, Agents, Task Tuning.
   Props: data-collapsible (accordion vs static),
   header icon (slot) / title / subtitle / count / action.
   ============================================================ */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.panel + .panel { margin-top: var(--s-3); }
.panel-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  transition: background .1s;
}
.panel-icon {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-1);
  background: var(--bg-sunk); color: var(--ink-3);
}
.panel-icon svg { width: 16px; height: 16px; }
.panel-titles { flex: 1; min-width: 0; text-align: left; }
.panel-title { display: block; font: 600 13px var(--font-sans); letter-spacing: -0.005em; color: var(--ink); }
.panel-sub { display: block; margin-top: 1px; font: 10.5px var(--font-mono); color: var(--ink-3); }
.panel-count {
  flex: none; white-space: nowrap;
  padding: 1px 7px;
  font: 600 10.5px var(--font-sans);
  color: var(--ink-3);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.panel-caret { flex: none; color: var(--ink-4); display: none; }
.panel-caret svg { width: 16px; height: 16px; transition: transform .15s; }
.panel-action { flex: none; }
.panel-body { border-top: 1px solid var(--line-2); padding: var(--s-4); }

/* collapsible mode: header becomes a button, caret shows, body toggles */
.panel[data-collapsible] .panel-head { cursor: pointer; }
.panel[data-collapsible] .panel-head:hover { background: var(--surface-raised); }
.panel[data-collapsible] .panel-caret { display: inline-flex; }
.panel[data-collapsible]:not([data-open]) .panel-body { display: none; }
.panel[data-collapsible][data-open] .panel-caret svg { transform: rotate(180deg); }


/* ============================================================
   11 · LIST ROW  →  .row  (machines, workers, repositories, …)
   ============================================================ */
.row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-4);
  min-height: 52px;
  border-bottom: 1px solid var(--line-2);
  transition: background .12s;
}
.row:last-child { border-bottom: none; }
.row.clickable { cursor: pointer; }
.row.clickable:hover { background: color-mix(in oklch, var(--ink) 3%, var(--surface)); }
.row-main { flex: 1; min-width: 0; }
.row-name { font: 500 13px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font: 11px var(--font-mono); color: var(--ink-3); margin-top: 1px; }
.row-chevron { flex: none; color: var(--ink-3); opacity: .5; transition: opacity .12s, transform .12s; }
.row.clickable:hover .row-chevron { opacity: .9; transform: translateX(2px); }
.row-chevron svg { width: 16px; height: 16px; }


/* ============================================================
   12 · TASK CARD  →  .tcard  (+ data-type=feature|bug|research)
   ============================================================ */
.tcard {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.tcard:hover { transform: translateY(-1px); border-color: var(--line-2); }
.tcard::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: var(--r-pill);
  background: var(--tcard-accent, var(--line-3));
}
.tcard[data-type="feature"]  { --tcard-accent: var(--info); }
.tcard[data-type="bug"]      { --tcard-accent: var(--bad); }
.tcard[data-type="research"] { --tcard-accent: var(--warn); }
.tcard-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 18px; }
.tcard-type {
  font: 500 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tcard-accent, var(--ink-3));
}
.tcard-title { font: 500 13px/1.3 var(--font-sans); color: var(--ink); }
.tcard-desc { font: 12px/1.45 var(--font-sans); color: var(--ink-3); }
.tcard-sep { height: 1px; margin: var(--s-1) 0; border: 0; background: var(--line); }
.tcard-meta { display: flex; align-items: center; gap: var(--s-2); font: 11px var(--font-mono); color: var(--ink-4); }
.tcard-meta .tcard-time { margin-left: auto; }


/* ============================================================
   13 · TABS  →  .tabs > .tab.on
   ============================================================ */
.tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tab {
  position: relative;
  padding: 10px 14px;
  background: none; border: 0;
  font: 500 12.5px var(--font-sans); color: var(--ink-3);
  cursor: pointer;
  transition: color .12s;
}
.tab:hover { color: var(--ink-2); }
.tab.on { color: var(--ink); }
.tab.on::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: var(--r-pill);
}
/* JS-enhanced groups use a single sliding indicator instead of per-tab underlines */
.tabs--ink .tab.on::after { display: none; }
.tabs--ink::after {
  content: ""; position: absolute; bottom: -1px; height: 2px;
  left: 0; width: 0; transform: translateX(var(--tab-ink-x, 0));
  width: var(--tab-ink-w, 0); opacity: var(--tab-ink-o, 0);
  background: var(--accent); border-radius: var(--r-pill);
  transition: transform .26s cubic-bezier(.4,0,.2,1), width .26s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.tab-count {
  margin-left: 6px; padding: 0 6px;
  font: 600 10px var(--font-mono); color: var(--ink-3);
  background: var(--bg-sunk); border-radius: var(--r-pill);
}


/* ============================================================
   13b · TAB BAR (closable + addable)  →  .tabbar > .tabbar-tab.on
   ============================================================ */
.tabbar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow-x: auto;
}
.tabbar-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 220px;
  padding: 6px 8px 6px 12px;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.tabbar-tab:hover { color: var(--ink-2); }
.tabbar-tab.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.tabbar-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tabbar-tab-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.tabbar-tab-label {
  font: 500 12.5px var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabbar-tab-meta {
  font: 11px var(--font-mono);
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabbar-tab-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.tabbar-tab-close:hover { background: var(--bg-sunk); color: var(--ink); }
.tabbar-tab-close svg { width: 12px; height: 12px; }
.tabbar-add {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  border: 1px dashed var(--line-3);
  border-radius: var(--r-2);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.tabbar-add:hover { border-color: var(--accent); color: var(--accent); }
.tabbar-add svg { width: 14px; height: 14px; }


/* ============================================================
   14 · INLINE ALERT / BANNER  →  .alert  (+ .good .warn .bad .info)
   ============================================================ */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  font: 12.5px/1.5 var(--font-sans); color: var(--ink-2);
}
.alert-ico { flex: none; margin-top: 1px; color: var(--ink-3); }
.alert-ico svg { width: 16px; height: 16px; }
.alert b { color: var(--ink); font-weight: 600; }
.alert.good { color: color-mix(in oklch, var(--good) 85%, var(--ink)); border-color: color-mix(in oklch, var(--good) 30%, var(--line)); background: color-mix(in oklch, var(--good) 7%, var(--surface)); }
.alert.warn { color: color-mix(in oklch, var(--warn) 82%, var(--ink)); border-color: color-mix(in oklch, var(--warn) 32%, var(--line)); background: color-mix(in oklch, var(--warn) 9%, var(--surface)); }
.alert.bad  { color: color-mix(in oklch, var(--bad) 80%, var(--ink));  border-color: color-mix(in oklch, var(--bad) 30%, var(--line));  background: color-mix(in oklch, var(--bad) 7%, var(--surface)); }
.alert.info { color: color-mix(in oklch, var(--info) 82%, var(--ink)); border-color: color-mix(in oklch, var(--info) 30%, var(--line)); background: color-mix(in oklch, var(--info) 7%, var(--surface)); }
.alert.good .alert-ico, .alert.warn .alert-ico, .alert.bad .alert-ico, .alert.info .alert-ico { color: currentColor; }


/* ============================================================
   15 · STAT TILE  →  .stat
   ============================================================ */
.stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-4); min-height: 88px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); border-color: var(--line-2); }
.stat-head { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.stat-pip { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.stat-value { font: 600 28px/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.stat-delta { font: 500 11px var(--font-mono); color: var(--ink-3); }
.stat-delta.up { color: var(--good); }
.stat-delta.down { color: var(--bad); }


/* ============================================================
   16 · TOOLTIP  →  [data-tip]  (hover)
   ============================================================ */
[data-tip] { position: relative; }
/* tooltips only on real pointers — on touch, :hover sticks after a tap and the dark
   bubble reads as a stray black button */
@media (hover: hover) {
  [data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 5px 9px;
    background: var(--ink); color: var(--bg);
    font: 500 12px var(--font-sans); letter-spacing: -0.01em;
    white-space: nowrap; border-radius: 7px; z-index: 90; pointer-events: none;
    box-shadow: 0 8px 22px -10px color-mix(in oklch, var(--ink) 70%, transparent);
  }
}


/* ============================================================
   17 · EMPTY STATE  →  .empty
   ============================================================ */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--s-8) var(--s-5); text-align: center;
}
.empty-ico {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-2);
  background: var(--bg-sunk); color: var(--ink-4);
}
.empty-ico svg { width: 22px; height: 22px; }
.empty-title { font: 600 14px var(--font-sans); color: var(--ink-2); }
.empty-sub { font: 12px/1.5 var(--font-sans); color: var(--ink-3); max-width: 320px; text-wrap: pretty; }


/* ============================================================
   18 · SLIDE-OVER  →  .slideover  (+ .open)
   Reusable right/left detail panel + scrim. Shared shell for task,
   archive, queue, machine, worker and repository detail.
   Compose: [-scrim] + [-panel > -bar (+ -actions) | -tabs | -body | -foot]
   Knobs:  data-side=right|left   data-width=sm|md|lg   data-loading
   ============================================================ */
.slideover { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
/* hidden slots/actions must collapse even though .iconbtn/.slideover-head set display */
.slideover [hidden] { display: none !important; }
.slideover[data-side="left"] { justify-content: flex-start; }
.slideover[hidden] { display: none; }
.slideover-scrim {
  position: absolute; inset: 0;
  background: color-mix(in oklch, var(--ink) 38%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .26s ease;
}
.slideover.open .slideover-scrim { opacity: 1; }
.slideover-panel {
  position: relative;
  width: min(620px, 94vw); height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  /* top inset so the bar / scrollable body begins below the top edge
     (and the mobile rounded corner) rather than touching it */
  padding-top: var(--s-4);
  box-shadow: -24px 0 60px -30px color-mix(in oklch, var(--ink) 60%, transparent);
  transform: translateX(100%); opacity: .4;
  transition: transform .3s cubic-bezier(.22,.7,.3,1), opacity .22s ease;
}
.slideover[data-side="left"] .slideover-panel {
  border-left: 0; border-right: 1px solid var(--line);
  box-shadow: 24px 0 60px -30px color-mix(in oklch, var(--ink) 60%, transparent);
  transform: translateX(-100%);
}
.slideover.open .slideover-panel { transform: none; opacity: 1; }
/* width variants */
.slideover[data-width="sm"] .slideover-panel { width: min(440px, 94vw); }
.slideover[data-width="lg"] .slideover-panel { width: min(820px, 96vw); }

/* header bar — eyebrow/breadcrumb + right-aligned action cluster */
.slideover-bar {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  transition: box-shadow .18s ease;
}
.slideover-panel.is-scrolled .slideover-bar {
  box-shadow: 0 6px 16px -12px color-mix(in oklch, var(--ink) 70%, transparent);
}
.slideover-eyebrow {
  flex: 1; min-width: 0;
  font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slideover-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.slideover-actions .iconbtn { width: 30px; height: 30px; }

/* header section — title + status + description, sits below the bar (above tabs).
   The structural home for every detail panel: task, machine, worker, repository.
   Optional — omit it for list/form-only slide-overs. */
.slideover-head {
  flex: none; background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 2px 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.slideover-head-row { display: flex; align-items: flex-start; gap: 12px; }
.slideover-title {
  flex: 1; min-width: 0; margin: 0;
  font: 600 18px var(--font-display); letter-spacing: -0.02em; line-height: 1.25;
  color: var(--ink); text-wrap: pretty;
}
.slideover-head .pill { flex: none; margin-top: 2px; }
.slideover-desc { font: 13px/1.5 var(--font-sans); color: var(--ink-3); text-wrap: pretty; }
/* bar + head read as one unit: drop the bar divider only while a head is actually shown */
.slideover-panel:has(.slideover-head:not([hidden])) .slideover-bar { border-bottom: 0; padding-bottom: 6px; }

/* sticky tab strip directly under the bar/head */
.slideover-tabs { flex: none; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.slideover-tabs .tabs { border-bottom: 0; }

/* body — the only scroll region */
.slideover-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }

/* first-paint loader — the panel's own data hasn't arrived yet. Centred in the
   body so it reads as the panel filling in, not as a row of content. */
.slideover-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 180px;
  height: 100%;
  color: var(--ink-3);
}
.slideover-loading-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--ink-3);
  animation: slideover-spin 0.7s linear infinite;
}
.slideover-loading-text { font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .slideover-loading-spinner { animation-duration: 2.4s; }
}
@keyframes slideover-spin { to { transform: rotate(360deg); } }

/* activity tab — simple event log */
.slide-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.slide-activity-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.slide-activity-row b { color: var(--ink); font-weight: 600; }
.slide-activity-row code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }
.slide-activity-time { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-4); }

/* footer — a free content slot; consumers fill it however they need.
   .slideover-foot-end is an optional helper that right-aligns a button cluster. */
.slideover-foot {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; min-height: 60px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  transition: box-shadow .18s ease;
}
.slideover-panel.can-scroll .slideover-foot {
  box-shadow: 0 -6px 16px -12px color-mix(in oklch, var(--ink) 70%, transparent);
}
.slideover-foot-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* mobile → bottom sheet */
@media (max-width: 520px) {
  .slideover { justify-content: stretch; align-items: flex-end; }
  .slideover-panel,
  .slideover[data-width="sm"] .slideover-panel,
  .slideover[data-width="lg"] .slideover-panel {
    width: 100%; height: auto; max-height: 92vh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: var(--r-3) var(--r-3) 0 0;
    /* clip the bar + body to the rounded top corners so the border stays
       visible while the body scrolls, and the scrollbar can't touch the edge */
    overflow: hidden;
    transform: translateY(100%);
  }
  .slideover.open .slideover-panel { transform: none; }
  .slideover-bar { padding-top: 10px; }
}


/* ============================================================
   19 · TOP BAR  →  .topbar  (+ logged-out / logged-in clusters)
   ============================================================ */
.topbar {
  display: flex; align-items: center; gap: var(--s-3);
  height: 60px; padding: 0 var(--s-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
/* hidden clusters must collapse even though they set display:inline-flex */
.topbar [hidden] { display: none !important; }
.topbar-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 16px var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.topbar-logo {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--accent); color: oklch(22% 0.04 155);
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-logo svg { width: 18px; height: 18px; }
.topbar-spacer { flex: 1; }
.topbar-nav { display: inline-flex; align-items: center; gap: 2px; }
.topbar-link { padding: 7px 12px; border-radius: var(--r-2); font: 500 13.5px var(--font-sans); color: var(--ink-3); cursor: pointer; }
.topbar-link:hover { color: var(--ink); background: color-mix(in oklch, var(--ink) 5%, transparent); }
.topbar-link.on { color: var(--ink); font-weight: 600; }
/* account cluster (logged in) */
.topbar-acct { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; }
.topbar-acct:hover { background: var(--surface-raised); }
.topbar-acct-name { font: 500 12.5px var(--font-sans); color: var(--ink-2); }
/* hamburger + drawer — appear when the marketing nav can't fit */
.topbar-burger { display: none; }
/* drawer: a bottom sheet that pops up from below with a scrim-blur — same motion
   as the slide-over's mobile sheet. Scoped to the demo stage via position:absolute;
   in the app make it position:fixed. */
.topbar-drawer { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: stretch; }
.topbar-drawer[hidden] { display: none; }
.topbar-drawer-scrim {
  position: absolute; inset: 0;
  background: color-mix(in oklch, var(--ink) 38%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .26s ease;
}
.topbar-drawer.open .topbar-drawer-scrim { opacity: 1; }
.topbar-drawer-panel {
  position: relative;
  width: 100%; height: 88%; max-height: 88%;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-radius: var(--r-3) var(--r-3) 0 0;
  box-shadow: 0 -24px 60px -30px color-mix(in oklch, var(--ink) 60%, transparent);
  transform: translateY(100%); opacity: 1;
  transition: transform .3s cubic-bezier(.22,.7,.3,1);
}
.topbar-drawer.open .topbar-drawer-panel { transform: none; }
/* grab handle */
.topbar-drawer-panel::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: var(--r-pill);
  background: var(--line-3);
}
.topbar-drawer-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 8px 12px 0 var(--s-4);
}
.topbar-drawer-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: var(--s-3); }
.topbar-drawer-link {
  padding: 12px 12px; border-radius: var(--r-2);
  font: 500 15px var(--font-sans); color: var(--ink-2); cursor: pointer;
}
.topbar-drawer-link:hover { color: var(--ink); background: color-mix(in oklch, var(--ink) 5%, transparent); }
.topbar-drawer-link.on { color: var(--ink); font-weight: 600; }
.topbar-drawer-foot { flex: none; padding: var(--s-3); border-top: 1px solid var(--line); padding-bottom: max(var(--s-3), env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) {
  .topbar-drawer-panel, .topbar-drawer-scrim { transition: none; }
}
@media (max-width: 640px) {
  .topbar-nav { display: none !important; }
  .topbar-signin { display: none !important; }
  .topbar-burger { display: inline-flex; }
  /* give the demo stage height so the drawer fills a realistic area */
  #topbar .demo-stage { position: relative; overflow: hidden; min-height: 340px; align-items: flex-start; }
  #topbar .topbar { width: 100%; }
}

/* ---- in-app header (logged in): page title + status + actions ---- */
/* shared shell header height so the sidenav account card's bottom border lines up
   continuously with the logged-in top bar's bottom border */
.appbar, .sidenav-acct { --shell-header-h: 72px; }
.appbar {
  display: flex; align-items: center; gap: var(--s-4);
  height: var(--shell-header-h); box-sizing: border-box;
  padding: 0 var(--s-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.appbar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.appbar-title { margin: 0; font: 700 22px var(--font-display); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
/* status: a free slot — holds a dot + text, a pill, a count, or a description */
.appbar-status { display: flex; align-items: center; gap: 8px; font: 12.5px var(--font-mono); color: var(--ink-3); flex-wrap: wrap; }
.appbar-status-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.appbar-status-dot.good { background: var(--good); }
.appbar-status-dot.warn { background: var(--warn); }
.appbar-status-dot.bad { background: var(--bad); }
.appbar-status-meta { color: var(--ink-4); }
.appbar-actions { flex: none; display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .appbar { gap: var(--s-3); }
}

/* ---- content page header --------------------------------------------- */
.page-headline {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.page-head-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.page-head-title {
  margin: 0;
  font: 600 22px/1.2 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.page-head-subtitle {
  display: none;
  margin: 0;
  font: 13px var(--font-sans);
  color: var(--ink-3);
}
@container (min-width: 480px) {
  .page-headline {
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
  }
  .page-head-titles {
    flex: 1;
  }
  .page-head-subtitle {
    display: block;
  }
}
@container (min-width: 768px) {
  .page-head-title {
    font-size: 26px;
  }
}


/* ============================================================
   20 · SIDE NAVIGATION  →  .sidenav
   Account card · OPERATE/CONFIGURE sections · machines card · collapse
   States: .collapsed (icon rail) · drawer on narrow viewports
   ============================================================ */
.sidenav {
  width: 264px; flex: none;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow: hidden;
  transition: width .2s ease;
}
.sidenav [hidden] { display: none !important; }

/* account card (top) */
.sidenav-acct {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  height: var(--shell-header-h); box-sizing: border-box;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.sidenav-acct:hover { background: color-mix(in oklch, var(--ink) 4%, transparent); }
.sidenav-acct-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 18%, var(--surface));
  color: color-mix(in oklch, var(--accent) 70%, var(--ink));
  border: 1px solid color-mix(in oklch, var(--accent) 34%, transparent);
  display: grid; place-items: center;
  font: 600 12px var(--font-mono); letter-spacing: .03em;
}
.sidenav-acct-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sidenav-acct-name { font: 600 13.5px var(--font-sans); color: var(--ink); }
.sidenav-acct-mail { font: 11px var(--font-mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidenav-acct-chev { flex: none; color: var(--ink-4); }
.sidenav-acct-chev svg { width: 17px; height: 17px; }

/* scrolling section region */
.sidenav-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-3) 0; overscroll-behavior: contain; }
.sidenav-section { padding: var(--s-3) var(--s-4) 6px; font: 600 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.sidenav-scroll > .sidenav-section:first-child { padding-top: 2px; }
.sidenav-list { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s-3); }
.sidenav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--r-2);
  font: 500 13.5px var(--font-sans); color: var(--ink-2); cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}
.sidenav-item:hover {
  background: var(--surface-raised); color: var(--ink);
  box-shadow: 0 1px 2px oklch(0% 0 0 / .05), 0 0 0 1px var(--line);
}
.sidenav-item:hover .sidenav-icon { color: var(--accent-2); }
.sidenav-item.active { background: color-mix(in oklch, var(--ink) 7%, transparent); color: var(--ink); font-weight: 600; }
.sidenav-item.active .sidenav-icon { color: var(--ink); }
.sidenav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidenav-icon { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.sidenav-icon svg { width: 18px; height: 18px; display: block; }
.sidenav-badge { flex: none; margin-left: auto; padding: 1px 8px; font: 600 10.5px var(--font-mono); color: var(--ink-3); background: var(--bg-sunk); border: 1px solid var(--line); border-radius: var(--r-pill); }

/* machines card (bottom) */
.sidenav-machines {
  flex: none; margin: 0 var(--s-3) var(--s-3);
  padding: 10px 12px 11px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.sidenav-machines-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sidenav-machines-title { font: 600 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.sidenav-machines-count { font: 600 11px var(--font-mono); color: var(--ink-3); }
.sidenav-machine { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.sidenav-machine-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.sidenav-machine-dot.off { background: var(--bad); }
.sidenav-machine-name { flex: 1; min-width: 0; font: 12.5px var(--font-sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-bar { flex: none; display: flex; gap: 3px; }
.cap-cell { width: 7px; height: 7px; border-radius: 2px; border: 1px solid var(--ink-4); background: transparent; }
.cap-cell.on { background: var(--ink-2); border-color: var(--ink-2); }

/* collapse footer */
.sidenav-foot { flex: none; padding: 9px var(--s-3); border-top: 1px solid var(--line); }
.sidenav-collapse {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px; border-radius: var(--r-2);
  font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); background: transparent; border: 0; cursor: pointer;
  transition: background .12s, color .12s;
}
.sidenav-collapse:hover { background: color-mix(in oklch, var(--ink) 5%, transparent); color: var(--ink); }
.sidenav-collapse svg { width: 13px; height: 13px; transition: transform .2s ease; }

/* collapsed icon-rail state */
.sidenav.collapsed { width: 68px; }
.sidenav.collapsed .sidenav-acct { justify-content: center; padding-inline: 0; }
.sidenav.collapsed .sidenav-acct-text,
.sidenav.collapsed .sidenav-acct-chev,
.sidenav.collapsed .sidenav-section,
.sidenav.collapsed .sidenav-label,
.sidenav.collapsed .sidenav-badge,
.sidenav.collapsed .sidenav-machines,
.sidenav.collapsed .sidenav-collapse-label { display: none; }
.sidenav.collapsed .sidenav-item { justify-content: center; padding-inline: 0; gap: 0; }
.sidenav.collapsed .sidenav-list { padding-inline: 12px; }
.sidenav.collapsed .sidenav-collapse svg { transform: rotate(180deg); }


/* reduced motion: kill non-essential transitions */
@media (prefers-reduced-motion: reduce) {
  .btn, .toggle-track, .toggle-track::after, .tcard, .stat, .row-chevron,
  .dropdown-chevron, .panel-caret svg, .slideover-panel, .slideover-scrim { transition: none; }
}
/* ============================================================
   Dropdown — one consistent <select> experience.
   A custom listbox rendered by the <Select> component: anchored
   popover on desktop, full-width bottom sheet on touch / small
   screens. A hidden native <select> is retained as the source of
   truth, so all existing change-handlers keep working.
   ============================================================ */

/* ---- Wrapper + hidden native control ---- */
.pdrop {
  position: relative;
  display: block;
  width: 100%;
}
.pdrop-native {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Trigger (looks like a field) ---- */
.pdrop-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  color: var(--ink);
  font: 13px var(--font-sans);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pdrop-trigger:hover {
  border-color: color-mix(in oklch, var(--ink) 20%, var(--line));
  background: var(--surface-raised);
}
.pdrop-trigger:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--accent) 30%, transparent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.pdrop.is-open .pdrop-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent);
}
.pdrop-trigger:disabled,
.pdrop-trigger[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
}
.pdrop-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdrop-trigger.is-placeholder .pdrop-value { color: var(--ink-4); }
.pdrop-chevron {
  flex: none;
  display: inline-flex;
  width: 16px; height: 16px;
  color: var(--ink-3);
  transition: transform .2s cubic-bezier(.22,.7,.3,1);
}
.pdrop-chevron svg { width: 100%; height: 100%; }
.pdrop.is-open .pdrop-chevron { transform: rotate(180deg); color: var(--accent); }

/* Invalid state mirrors the field-invalid look */
.pdrop.is-invalid .pdrop-trigger,
.field-invalid + .pdrop-trigger {
  border-color: color-mix(in oklch, var(--bad) 55%, var(--line));
  background: color-mix(in oklch, var(--bad) 4%, var(--surface));
}

/* ============================================================
   Popover menu (desktop / pointer)
   Lives at <body> level — positioned via fixed coords in JS.
   ============================================================ */
.pdrop-pop {
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  min-width: 160px;
  max-height: 300px;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-raised);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translateY(-4px) scale(.985);
  transform-origin: top center;
  transition: opacity .14s ease, transform .14s cubic-bezier(.22,.7,.3,1);
}
.pdrop-pop[data-placement="top"] { transform-origin: bottom center; transform: translateY(4px) scale(.985); }
.pdrop-pop.is-in { opacity: 1; transform: none; }

/* Optional visible search for long option lists. The no-value/default option
   remains in the filtered list so users can always return to automatic start. */
.pdrop-search {
  position: sticky;
  top: -5px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -5px -5px 4px;
  padding: 8px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}
.pdrop-search-icon {
  flex: none;
  display: inline-flex;
  width: 15px; height: 15px;
  color: var(--ink-3);
}
.pdrop-search-icon svg { width: 100%; height: 100%; }
.pdrop-search-input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font: 13px var(--font-sans);
}
.pdrop-search-input::-moz-placeholder { color: var(--ink-4); }
.pdrop-search-input::placeholder { color: var(--ink-4); }
.pdrop-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 13%, transparent);
}
.pdrop-search-empty {
  border-top: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
}

/* ---- Options ---- */
.pdrop-option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-1);
  font: 13px var(--font-sans);
  color: var(--ink-2);
  cursor: pointer;
  scroll-margin: 6px;
}
.pdrop-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdrop-option-check {
  flex: none;
  display: inline-flex;
  width: 15px; height: 15px;
  color: var(--accent);
  opacity: 0;
}
.pdrop-option-check svg { width: 100%; height: 100%; }
.pdrop-option[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
}
.pdrop-option[aria-selected="true"] .pdrop-option-check { opacity: 1; }
.pdrop-option.is-active {
  background: color-mix(in oklch, var(--accent) 13%, transparent);
  color: var(--ink);
}
.pdrop-option[aria-disabled="true"] {
  color: var(--ink-4);
  cursor: not-allowed;
}
.pdrop-option-placeholder { color: var(--ink-4); font-weight: 400; }

.pdrop-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  font: 13px var(--font-sans);
  color: var(--ink-4);
  cursor: default;
}
.pdrop-empty-icon {
  flex: none;
  display: inline-flex;
  width: 15px; height: 15px;
  color: var(--ink-4);
  opacity: 0.8;
}
.pdrop-empty-icon svg { width: 100%; height: 100%; }
.pdrop-empty-text { flex: 1; min-width: 0; }

/* ============================================================
   Bottom sheet (touch / small screens)
   ============================================================ */
.pdrop-scrim {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: color-mix(in oklch, var(--ink) 42%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .24s ease;
}
.pdrop-scrim.is-in { opacity: 1; }

.pdrop-pop.pdrop-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: auto;
  width: 100%;
  min-width: 0;
  max-height: min(72vh, 560px);
  padding: 6px 10px calc(10px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: var(--r-4) var(--r-4) 0 0;
  box-shadow: 0 -18px 50px -20px color-mix(in oklch, var(--ink) 60%, transparent);
  transform: translateY(100%);
  transform-origin: bottom center;
  transition: transform .28s cubic-bezier(.22,.7,.3,1), opacity .2s ease;
  opacity: 1;
}
.pdrop-pop.pdrop-sheet.is-in { transform: none; }
.pdrop-sheet.pdrop-searchable .pdrop-sheet-head { position: static; }
.pdrop-sheet .pdrop-search {
  top: -6px;
  margin: 0 -4px 5px;
  padding: 8px 6px;
}
.pdrop-sheet .pdrop-search-input { height: 42px; font-size: 15px; }

.pdrop-sheet-head {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 10px;
  background: var(--surface-raised);
  z-index: 1;
}
.pdrop-sheet-grip {
  width: 38px; height: 4px;
  border-radius: 999px;
  background: var(--line-3);
}
.pdrop-sheet-title {
  font: 500 10.5px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
.pdrop-sheet .pdrop-option {
  padding: 13px 12px;
  min-height: 50px;
  font-size: 15px;
  border-radius: var(--r-2);
}
.pdrop-sheet .pdrop-option + .pdrop-option {
  border-top: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
  border-radius: 0;
}
.pdrop-sheet .pdrop-option-check { width: 18px; height: 18px; }

/* ============================================================
   Multi-select variant
   Options toggle in place; the menu stays open. The trigger
   summarises the chosen set and shows a count pill.
   ============================================================ */
.pdrop-trigger-multi .pdrop-value { font-size: 13px; }
.pdrop-count {
  flex: none;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 11px var(--font-sans);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  border-radius: 999px;
}

/* Sticky toolbar at the top of a multi popover */
.pdrop-multi-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -5px -5px 4px;
  padding: 7px 9px 8px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}
.pdrop-multi-count {
  font: 500 11px var(--font-mono);
  letter-spacing: .01em;
  color: var(--ink-3);
}
.pdrop-multi-all {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: var(--r-1);
  font: 600 11.5px var(--font-sans);
  color: var(--accent);
  transition: background .12s ease;
}
.pdrop-multi-all:hover { background: color-mix(in oklch, var(--accent) 13%, transparent); }

/* Checkbox box on each multi option */
.pdrop-multi .pdrop-option { color: var(--ink); }
.pdrop-multi .pdrop-option[aria-selected="true"] { font-weight: 500; }
.pdrop-box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--line-3);
  border-radius: 5px;
  background: var(--surface);
  color: #fff;
  transition: background .12s ease, border-color .12s ease;
}
.pdrop-box svg { width: 12px; height: 12px; opacity: 0; transition: opacity .1s ease; }
.pdrop-multi .pdrop-option[aria-selected="true"] .pdrop-box {
  background: var(--accent);
  border-color: var(--accent);
}
.pdrop-multi .pdrop-option[aria-selected="true"] .pdrop-box svg { opacity: 1; }

/* Sheet (touch) tweaks for the multi variant. */
.pdrop-sheet .pdrop-multi-bar {
  position: static;
  margin: 0 -10px 4px;
  border-radius: 0;
}
.pdrop-sheet.pdrop-multi .pdrop-option {
  min-height: 0;
  padding: 9px 12px;
  font-size: 14px;
}
.pdrop-sheet.pdrop-multi .pdrop-box { width: 18px; height: 18px; }
.pdrop-sheet.pdrop-multi .pdrop-box svg { width: 12px; height: 12px; }

/* Danger tone — recolours the whole control to the destructive palette. */
.pdrop-danger { --accent: var(--bad); }
.pdrop-pop.pdrop-danger { --accent: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  .pdrop-pop, .pdrop-scrim, .pdrop-chevron, .pdrop-box { transition: none; }
}
/* ============================================================
   Workflow design system — ported from the "Delivery v6" design
   (workflow board + columns + cards + list, and the full
   TaskSlideOver: head, banner, tabs, now-card, steps, gates,
   brief, docs, messages, spawned child tasks).

   Loaded globally after components.css. The segmented-control
   base (.seg / .seg-btn / .seg-thumb) already lives in
   components.css and is reused as-is; only the workflow-specific
   additions (.seg-sm, .task-controls-row .seg) appear below.
   ============================================================ */

/* Board root — the .app-page wrapper supplies padding/max-width, so .wf only
   owns layout + the inline-size container the design's @container rules read. */
.wf {
  container-type: inline-size;
  font-family: var(--font-sans);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ---------- 01 Toolbar ---------- */
.wf-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}
.wf-toolbar-meta {
  flex: 1;
  min-width: 0;
  font: 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
}
/* Segmented control — the base .seg / .seg-btn / .seg-thumb rules live in
   components.css (reused by the SegmentedControl component). Only the two
   workflow-specific additions live here. */

/* Compact variant — workflow toolbar Board/List switch. */
.seg-sm .seg-btn { height: 26px; padding: 0 9px; }

/* Task control panel: each group's seg fills its column. */
.task-controls-row .seg { width: 100%; }

.wf-newtask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
}
.wf-newtask svg { width: 14px; height: 14px; }
.wf-newtask-label { display: none; }
@container (min-width: 480px) {
  .wf-newtask { width: auto; padding: 0 12px; }
  .wf-newtask-label { display: inline; font: 500 12px var(--font-sans); }
}

/* ---------- 02 Board carousel wrap (the FIX) ---------- */
.wf-board-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.wf-carousel-stage-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 500 11px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.wf-carousel-stage-label::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--lane-color, var(--accent));
}
.wf-carousel-stage-label-count {
  margin-left: auto;
  color: var(--ink-3);
}
.wf-board-carousel {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wf-board-carousel::-webkit-scrollbar { display: none; }
.wf-board-carousel > .wf-col {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.wf-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: var(--s-1);
}
.wf-carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line-3);
  transition: background .12s, transform .12s;
}
.wf-carousel-dot--active {
  background: var(--ink-2);
  transform: scale(1.2);
}

/* ---------- Board (desktop) ---------- */
.wf-board {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--s-2);
}
.wf-board > .wf-col { flex: 0 0 280px; }

/* ---------- Full-height board ----------
   In board mode the workflow fills the page so the lane columns stretch to the
   full page height; each column scrolls its own card list rather than the whole
   page scrolling. List mode is untouched — it keeps natural flow + page scroll. */
.app-page:has(> .wf[data-wf-mode="board"]) {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wf[data-wf-mode="board"] {
  flex: 1;
  min-height: 0;
}
.wf[data-wf-mode="board"] .wf-board {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.wf[data-wf-mode="board"] .wf-col {
  /* allow the column to shrink below content height so the list can scroll */
  min-height: 0;
}
.wf[data-wf-mode="board"] .wf-col-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ---------- 03 Column ---------- */
.wf-col {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  overflow: hidden;
  transition: background .15s ease, box-shadow .15s ease;
}
.wf-col::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lane-color, var(--accent));
}

/* Activity tints */
.wf-col[data-activity="running"] {
  background: color-mix(in oklch, var(--lane-color, var(--accent)) 4%, var(--surface));
  box-shadow: var(--shadow-1), 0 -1px 0 color-mix(in oklch, var(--lane-color, var(--accent)) 30%, transparent);
}
.wf-col[data-activity="blocked"]::before { background: var(--warn); }
.wf-col[data-activity="blocked"] {
  background: color-mix(in oklch, var(--warn) 5%, var(--surface));
}
.wf-col[data-activity="failed"]::before { background: var(--bad); }
.wf-col[data-activity="failed"] {
  background: color-mix(in oklch, var(--bad) 5%, var(--surface));
}

.wf-col-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}
.wf-col-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wf-col-name {
  font: 600 13px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wf-col-count {
  margin-left: auto;
  font: 12px var(--font-mono);
  color: var(--ink-2);
}

.wf-meter {
  display: flex;
  gap: 2px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-sunk);
}
.wf-meter > span { height: 100%; }
.wf-meter-run     { background: var(--lane-color, var(--accent)); }
.wf-meter-query   { background: var(--good); }
.wf-meter-user    { background: var(--info); }
.wf-meter-intr    { background: var(--warn); }
.wf-meter-pause   { background: var(--info); }
.wf-meter-done    { background: color-mix(in oklch, var(--lane-color, var(--accent)) 40%, var(--bg-sunk)); }
.wf-meter-blk     { background: var(--warn); }
.wf-meter-fail    { background: var(--bad); }
.wf-meter-pend    { background: var(--line-2); }

.wf-col-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font: 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.wf-col-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wf-col-stat::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
}
.wf-col-stat--run::before  { background: var(--lane-color, var(--accent)); }
.wf-col-stat--query::before { background: var(--good); }
.wf-col-stat--user::before { background: var(--info); }
.wf-col-stat--intr::before { background: var(--warn); }
.wf-col-stat--pause::before { background: var(--info); }
.wf-col-stat--done::before { background: color-mix(in oklch, var(--lane-color, var(--accent)) 60%, var(--ink-4)); }
.wf-col-stat--blk::before  { background: var(--warn); }
.wf-col-stat--fail::before { background: var(--bad); }

.wf-col-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}

/* ---------- Task card (compact for column) ---------- */
.tcard {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-3) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  /* Card is a <button>; reset its UA-default centered text to the left. */
  text-align: left;
  transition: transform .12s ease, border-color .12s ease;
}
.tcard:hover { transform: translateY(-1px); border-color: var(--line-2); }

/* Left edge accent — replaces the old type pill; colour-keyed by data-type. */
.tcard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tcard-accent, var(--line-3));
}
.tcard[data-type="feature"]  { --tcard-accent: var(--info); }
.tcard[data-type="bug"]      { --tcard-accent: var(--bad);  }
.tcard[data-type="research"] { --tcard-accent: var(--warn); }

/* Type kicker — small mono caps label at the top of the card. No pill,
   just coloured text matching the left edge. */
.tcard-type {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tcard-accent, var(--ink-4));
}

/* Header row: type kicker left, worker avatar right */
.tcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  min-height: 18px;
}
.tcard-header .tcard-worker {
  flex: none;
}

.tcard-title {
  font: 500 13px/1.3 var(--font-sans);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Long unbroken strings (URLs, ids) still break cleanly */
  overflow-wrap: anywhere;
}
.tcard-desc {
  font: 12px/1.4 var(--font-sans);
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}
.tcard-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.tcard-time {
  margin-left: auto;
  font: 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-4);
}
.tcard-worker {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink-2);
}
.tcard-worker-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 9px var(--font-mono);
  color: var(--bg);
  background: var(--ink-3);
  text-transform: uppercase;
}
.tcard-worker--unassigned {
  background: transparent;
  color: var(--ink-4);
}
.tcard-worker--unassigned .tcard-worker-avatar {
  background: transparent;
  border: 1px dashed var(--line-3);
  color: var(--ink-4);
}
.tcard-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.tcard-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 5px;
  font: 500 10px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.tcard-status--run {
  background: color-mix(in oklch, var(--good) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--good) 26%, transparent);
  color: var(--good);
}
.tcard-status--blk {
  background: color-mix(in oklch, var(--warn) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--warn) 28%, transparent);
  color: var(--warn);
}
.tcard-status--fail {
  background: color-mix(in oklch, var(--bad) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--bad) 28%, transparent);
  color: var(--bad);
}
.tcard-status--done {
  background: var(--bg-sunk);
  border-color: var(--line);
  color: var(--ink-3);
}
/* Extended task statuses (slide-over header pill) */
.tcard-status--pend {
  background: var(--bg-sunk);
  border-color: var(--line);
  color: var(--ink-3);
}
.tcard-status--query {
  background: color-mix(in oklch, var(--good) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--good) 30%, transparent);
  color: var(--good);
}
.tcard-status--query .tcard-dot-pulse { background: var(--good); }
.tcard-status--user {
  background: color-mix(in oklch, var(--info) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--info) 30%, transparent);
  color: var(--info);
}
.tcard-status--intr {
  background: color-mix(in oklch, var(--warn) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--warn) 30%, transparent);
  color: var(--warn);
}
/* Calmer than intr/blk on purpose — paused is operator-chosen, not a problem. */
.tcard-status--pause {
  background: color-mix(in oklch, var(--info) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--info) 26%, transparent);
  color: var(--info);
}
/* Same calm info hue as paused, and for the same reason: a task queued behind
   another task's lock isn't in trouble. It is tinted rather than left on the
   neutral "pend" treatment because, unlike a plain pending task, there is a
   stated reason worth opening the task for. */
.tcard-status--wait {
  background: color-mix(in oklch, var(--info) 8%, var(--surface));
  border-color: color-mix(in oklch, var(--info) 24%, transparent);
  color: color-mix(in oklch, var(--info) 82%, var(--ink-3));
}
.tcard-dot-pulse {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .tcard-status--run .tcard-dot-pulse,
  .tcard-status--query .tcard-dot-pulse { animation: tcard-dot-pulse 1.6s ease-in-out infinite; }
}
@keyframes tcard-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 3px transparent; opacity: 0.6; }
}

/* ---------- 04 Empty state (Components.html · .empty) ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: var(--s-5) var(--s-3); text-align: center;
}
.empty-ico {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--bg-sunk); color: var(--ink-4);
}
.empty-ico svg { width: 20px; height: 20px; }
.empty-title { font: 600 13px var(--font-sans); color: var(--ink-2); }
.empty-sub { font: 12px/1.5 var(--font-sans); color: var(--ink-3); max-width: 260px; text-wrap: pretty; }

.wf-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--s-3) var(--s-2);
  border: 1px dashed var(--line);
  border-radius: var(--r-2);
  font: 12px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-align: center;
}
.wf-empty-action {
  margin-left: 6px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- 05 List view ---------- */
.wf-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.wf-list-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.wf-stage-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 4px);
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.wf-stage-header::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--stage-c, var(--ink-4));
}
.wf-list-stage[data-active="true"] .wf-stage-header::before {
  box-shadow: 0 0 12px color-mix(in oklch, var(--stage-c, var(--accent)) 50%, transparent);
}
.wf-stage-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}
.wf-stage-name {
  font: 600 14px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wf-stage-count {
  font: 11px var(--font-mono);
  color: var(--ink-3);
}
.wf-stage-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wf-stage-preview {
  font: 11px var(--font-mono);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  display: none;
}
.wf-stage-chevron {
  width: 16px; height: 16px;
  color: var(--ink-3);
  transition: transform .15s ease;
}
.wf-list-stage[data-open="true"] .wf-stage-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .wf-stage-chevron { transition: none; }
}
.wf-stage-cards {
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
/* Collapsed stages hide their rows; the chevron flips via the existing rule. */
.wf-list-stage[data-open="false"] .wf-stage-cards { display: none; }
.wf-stage-preview--empty { color: var(--ink-4); font-style: italic; }

/* ---------- Board / List view switch ---------- */
.wf[data-wf-mode="board"] .wf-list  { display: none; }
.wf[data-wf-mode="list"]  .wf-board { display: none; }

/* ---------- 05b One-task-per-row (list view) ----------
   Reuses .tcard so the existing board card → slide-over delegation works
   unchanged; .wf-task-row re-lays the same card out as a horizontal row. */
.wf-task-row {
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3) 9px calc(var(--s-3) + 3px);
}
.wf-task-row:hover {
  transform: none;
  border-color: var(--line-2);
  background: color-mix(in oklch, var(--tcard-accent, var(--ink)) 5%, var(--surface-raised));
}
.wf-task-row-type {
  flex: none;
  width: 60px;
}
.wf-task-row-id {
  flex: none;
  font: 10.5px var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-4);
}
.wf-task-row .wf-task-row-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  font: 500 13px var(--font-sans);
}
.wf-task-row-worker,
.wf-task-row-status,
.wf-task-row-time { flex: none; }
.wf-task-row-worker { display: inline-flex; }
/* Vertical hairline dividing the task content from the status cluster. */
.wf-task-row-sep {
  flex: none;
  width: 1px;
  align-self: stretch;
  margin: 4px 2px;
  background: var(--line);
}
.wf-task-row .wf-task-row-time {
  margin-left: 0;
  width: 64px;
  text-align: right;
}

/* Hide the lowest-priority columns first as the panel narrows. */
@container (max-width: 720px) {
  .wf-task-row-id   { display: none; }
  .wf-task-row .wf-task-row-time { display: none; }
}
@container (max-width: 520px) {
  .wf-task-row-type { display: none; }
}

/* Container-query responsive */
@container (min-width: 480px) {
  .wf-stage-preview { display: block; }
}
@container (min-width: 768px) {
  .wf-stage-header { grid-template-columns: auto auto 1fr auto auto; }
}

/* ============================================================
   TaskSlideOver components
   ============================================================ */

.task-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.task-shell-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 4%, var(--surface)) 0%,
    var(--surface) 100%);
  border-bottom: 1px solid var(--line);
}

/* Topline: title in the former crumb slot, status pinned right. */
.task-topline {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
/* Legacy helper kept for any task-head actions that are rendered inside the
   shell head rather than the shared slide-over bar. */
.task-topline-actions { display: flex; gap: 4px; }
.task-iconbtn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.task-iconbtn svg { width: 14px; height: 14px; }
/* Both top-right buttons highlight on hover — neutral raise for close,
   danger tint for the destructive delete. */
.task-iconbtn:hover {
  background: var(--surface-raised);
  border-color: var(--line-2);
  color: var(--ink);
}
.task-iconbtn--danger:hover {
  background: color-mix(in oklch, var(--bad) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--bad) 40%, var(--line));
  color: var(--bad);
}

/* Title */
.task-slideover-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: 600 18px/1.2 var(--font-display);
  letter-spacing: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@container (min-width: 480px) { .task-slideover-title { font-size: 19px; } }
@container (min-width: 768px) { .task-slideover-title { font-size: 20px; } }

.task-summary {
  font: 13px var(--font-sans);
  color: var(--ink-2);
  line-height: 1.35;
}
.run-task-summary {
  margin: -2px 0 0;
  width: 100%;
  text-wrap: pretty;
}
.run-task-summary-text {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.run-task-summary.is-expanded .run-task-summary-text {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.run-task-summary-toggle {
  margin-top: 5px;
}
.run-task-summary-toggle svg {
  transition: transform 0.15s ease;
}
.run-task-summary.is-expanded .run-task-summary-toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .run-task-summary-toggle svg { transition: none; }
}

/* Machine info row (replaces inline-styled flex) */
.task-info-row,
.task-machine-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font: 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.task-info-row b {
  color: var(--ink-2);
  font-weight: 500;
}
.task-info-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}
.task-info-item svg {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--ink-4);
}
.task-info-item b {
  min-width: 0;
  overflow-wrap: anywhere;
}
.task-machine-row svg { width: 12px; height: 12px; color: var(--ink-4); }
.task-machine-row b { color: var(--ink-2); font-weight: 500; }
.task-machine-row .run-head-worker { flex: none; }
.task-machine-row .run-head-dot,
.task-info-row .run-head-dot,
.slide-breadcrumb .run-head-dot {
  color: var(--ink-4);
  margin: 0 1px;
}

/* Submitter line — who submitted the task (active / archive slide-over head) */
.task-submitter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -2px;
  font: 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.task-submitter-row b { color: var(--ink-2); font-weight: 500; }
.task-submitter-row .run-head-dot { color: var(--ink-4); }

.task-scope-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin-top: -2px;
}
.task-scope-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 10px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.task-scope-label svg { width: 11px; height: 11px; color: var(--ink-4); }
.task-scope-project,
.task-scope-repo {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 11px var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-scope-project {
  border-color: color-mix(in oklch, var(--accent) 24%, var(--line));
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  color: var(--ink);
}

/* Timing stats — sits below the machine row in the slide-over head.
   Shares the .slide-stat semantics from task-mockups.css but is named
   .task-stat to keep workflow-mockups.css self-contained. */
.task-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-1);
}
.task-time-row {
  margin-top: -1px;
}
.task-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.task-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 10px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.task-stat-label svg { width: 11px; height: 11px; color: var(--ink-4); }
.task-stat-value {
  font: 500 13px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* The "Running" stat is the live one — pulled forward with the accent colour
   on its glyph so it scans first. The pulse dot uses the existing tcard
   primitive so the reduce-motion guard already covers it. */
.task-stat--running .task-stat-label { color: var(--accent); }
.task-stat--running .task-stat-label svg { color: var(--accent); }
.task-stat--running .task-stat-value { color: var(--accent); }

/* 12 Operator banner */
.op-banner {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-2);
  border: 1px solid;
  background: var(--surface);
}
.op-banner-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-1);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-family: var(--font-mono);
}
.op-banner-icon svg { width: 18px; height: 18px; }
.op-banner-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.op-banner-eyebrow {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.op-banner-question {
  font: 500 14px/1.35 var(--font-sans);
  color: var(--ink);
}
.op-banner-actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
  flex-wrap: wrap;
}
.op-banner-actions .seg-btn {
  background: var(--surface-raised);
  border: 1px solid var(--line);
}
.op-banner-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-pill);
  font: 500 12px var(--font-sans);
  cursor: pointer;
}

/* Banner variants — token-mapped color-mix, dark-mode safe */
.op-banner.needs-user {
  background: color-mix(in oklch, var(--info) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--info) 28%, transparent);
}
.op-banner.needs-user .op-banner-icon {
  background: color-mix(in oklch, var(--info) 24%, var(--surface));
  color: var(--info);
}
.op-banner.needs-user .op-banner-eyebrow { color: var(--info); }

.op-banner.failed {
  background: color-mix(in oklch, var(--bad) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--bad) 28%, transparent);
}
.op-banner.failed .op-banner-icon {
  background: color-mix(in oklch, var(--bad) 24%, var(--surface));
  color: var(--bad);
}
.op-banner.failed .op-banner-eyebrow { color: var(--bad); }

.op-banner.blocked {
  background: color-mix(in oklch, var(--warn) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--warn) 28%, transparent);
}
.op-banner.blocked .op-banner-icon {
  background: color-mix(in oklch, var(--warn) 24%, var(--surface));
  color: var(--warn);
}
.op-banner.blocked .op-banner-eyebrow { color: var(--warn); }

.op-banner.interrupted {
  background: color-mix(in oklch, var(--warn) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--warn) 26%, transparent);
}
.op-banner.interrupted .op-banner-icon {
  background: color-mix(in oklch, var(--warn) 22%, var(--surface));
  color: var(--warn);
}
.op-banner.interrupted .op-banner-eyebrow { color: var(--warn); }

/* Paused is deliberately calmer than interrupted/blocked — it's an expected,
   operator-chosen state, not something that went wrong. */
.op-banner.paused {
  background: color-mix(in oklch, var(--info) 8%, var(--surface));
  border-color: color-mix(in oklch, var(--info) 24%, transparent);
}
.op-banner.paused .op-banner-icon {
  background: color-mix(in oklch, var(--info) 20%, var(--surface));
  color: var(--info);
}
.op-banner.paused .op-banner-eyebrow { color: var(--info); }

/* Waiting is the calmest banner of the set — most of its reasons carry no
   action button, because the task is queued behind something that clears
   itself (another task's lock, its place in a FIFO queue) and the operator
   has nothing to press. Amber would read as "needs attention"; it doesn't.
   An agent-capacity/transient wait is the one exception with a real button
   (see FORCEABLE_WAIT_REASONS in taskDetail.js); it reuses the shared
   .op-banner-actions .btn-primary styling below rather than getting its own
   color, on purpose — a manual retry here is exactly as calm an action as
   any other banner's, not an alarm. */
.op-banner.waiting {
  background: color-mix(in oklch, var(--info) 7%, var(--surface));
  border-color: color-mix(in oklch, var(--info) 22%, transparent);
}
.op-banner.waiting .op-banner-icon {
  background: color-mix(in oklch, var(--info) 18%, var(--surface));
  color: var(--info);
}
.op-banner.waiting .op-banner-eyebrow { color: var(--info); }

/* Controls row (replaces inline-styled wrapper) */
.task-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.task-control-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}
.task-control-eyebrow {
  flex: none;
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.task-control-dot,
.task-control-pipe {
  flex: none;
  font: 500 11px var(--font-mono);
  color: var(--ink-4);
}
.task-control-pipe { color: var(--line-2); }
.task-control-group .seg {
  flex: 1 1 auto;
  min-width: 0;
}
@container (max-width: 520px) {
  .task-controls-row {
    gap: 6px;
  }
  .task-control-group {
    gap: 5px;
  }
  .task-control-eyebrow { font-size: 9.5px; }
  .task-control-group .seg { width: 100%; }
  .task-control-pipe { display: none; }
}
.task-override-note {
  font: 12px var(--font-mono);
  color: var(--ink-3);
  padding-top: 4px;
}


/* 08 Tabs */
.task-shell-tabs {
  display: flex;
  gap: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.task-shell-tabs::-webkit-scrollbar { display: none; }
.task-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  min-height: 44px;
  background: transparent;
  border: 0;
  font: 500 13px var(--font-sans);
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
.task-tab:hover { color: var(--ink-2); }
.task-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.task-tab.is-active .task-tab-livedot { display: none; }
.task-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font: 500 10px var(--font-mono);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-3);
}
.task-tab--attention .task-tab-badge {
  background: color-mix(in oklch, var(--bad) 14%, var(--surface));
  border-color: color-mix(in oklch, var(--bad) 30%, transparent);
  color: var(--bad);
}
.task-tab-livedot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--good);
}
@media (prefers-reduced-motion: no-preference) {
  .task-tab-livedot { animation: tcard-dot-pulse 1.8s ease-in-out infinite; }
}

/* 10 Now-running card */
.task-now-card {
  margin: var(--s-3);
  padding: var(--s-3);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  /* Status-aware accent rail — matches the prototype's
     ".task-now-card[class*='proto-now--']" left border. The fallback
     (var(--good)) covers "running", the only status the prototype leaves
     unmodified since it's the default/expected state. */
  border-left: 3px solid var(--now-accent, var(--good));
}
/* Recolor the rail per status — mirrors the task's own status (not the
   current step's), same as the prototype. */
.task-now-card--fail  { --now-accent: var(--bad); }
.task-now-card--blk   { --now-accent: var(--warn); }
.task-now-card--intr  { --now-accent: var(--warn); }
.task-now-card--pause { --now-accent: var(--info); }
.task-now-card--user  { --now-accent: var(--info); }
.task-now-card--query { --now-accent: var(--good); }
.task-now-card--pend  { --now-accent: var(--ink-4); }
.task-now-card--wait  { --now-accent: var(--info); }
.task-now-card--done  { --now-accent: var(--ink-3); }
.now-card-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.now-card-stage .stage-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--stage-color, var(--accent));
}
.now-card-name {
  font: 600 clamp(16px, 4.4cqw, 20px)/1.2 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.now-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.now-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.now-card-meta-item b { color: var(--ink-2); font-weight: 500; }

.task-now-progress {
  position: relative;
  height: 4px;
  background: var(--bg-sunk);
  border-radius: 2px;
  overflow: hidden;
}
.task-now-progress > i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  width: 30%;
}
@media (prefers-reduced-motion: no-preference) {
  .task-now-progress > i { animation: indet 1.6s ease-in-out infinite; }
}
@keyframes indet {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* ---- Querying sub-job: the open query a now-card step is waiting on ----
   Reads as something the current step spawned off, via a quiet elbow
   connector. The active query is an info/good-tinted gate card; cleared
   queries collapse into a history accordion below. */
.task-now-card .run-subjob {
  position: relative;
  margin-top: 16px;
  padding-left: 20px;
}
.task-now-card .run-subjob::before {
  content: "";
  position: absolute;
  left: 3px; top: -8px;
  width: 13px; height: 34px;
  border-left: 2px solid var(--line-2);
  border-bottom: 2px solid var(--line-2);
  border-bottom-left-radius: 8px;
}
.task-now-card .run-subjob .task-gate-card {
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px 12px 11px 14px;
  background: color-mix(in oklch, var(--info) 4%, var(--surface));
  border-radius: var(--r-2);
}
.task-now-card .run-subjob .task-gate-card-icon { width: 28px; height: 28px; border-radius: var(--r-1); }
.task-now-card .run-subjob .task-gate-card-icon svg { width: 15px; height: 15px; }
.task-now-card .run-subjob .task-gate-card-name { font-size: 13px; }
.task-now-card .run-subjob.is-blocked .task-gate-card {
  background: color-mix(in oklch, var(--bad) 4%, var(--surface));
}
/* Reply gate reads as "waiting on a human" — tint with the good hue. */
.task-now-card .run-subjob .task-gate-card.run-gate-example[data-kind="reply"] {
  background: color-mix(in oklch, var(--good) 5%, var(--surface));
  border-color: color-mix(in oklch, var(--good) 22%, transparent);
}
.task-now-card .run-subjob .task-gate-card.run-gate-example[data-kind="reply"]::before {
  background: var(--good);
}
.task-now-card .run-subjob .task-gate-card.run-gate-example[data-kind="reply"] .task-gate-card-icon {
  background: color-mix(in oklch, var(--good) 18%, var(--surface));
  color: var(--good);
}
.task-now-card .run-subjob .task-gate-card.run-gate-example[data-kind="reply"] .task-gate-card-status {
  display: none;
}
.run-query-history { margin-top: 10px; }
.run-query-history-toggle {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; list-style: none;
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 2px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.run-query-history-toggle::-webkit-details-marker { display: none; }
.run-query-history-toggle:hover { color: var(--ink-2); }
.run-query-history-chev { display: inline-flex; width: 13px; height: 13px; transition: transform .15s ease; }
.run-query-history-chev svg { width: 13px; height: 13px; }
.run-query-history[open] .run-query-history-chev { transform: rotate(180deg); }
.run-query-history-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .run-query-history-chev { transition: none; }
}

/* 11 Awaiting reply pill */
.msg-await-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: color-mix(in oklch, var(--info) 10%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--info) 26%, transparent);
  border-radius: var(--r-pill);
  font: 500 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--info);
}
.msg-await-pill .tcard-dot-pulse { background: var(--info); }
@media (prefers-reduced-motion: no-preference) {
  .msg-await-pill .tcard-dot-pulse { animation: tcard-dot-pulse 1.6s ease-in-out infinite; }
}

/* Message thread — chat bubbles with sender meta + day separators.
   You on the right (accent ink), the worker on the left (neutral). */
.msg-thread {
  padding: 8px 12px 8px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msg-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 78%;
}
.msg-row--out { align-self: flex-end; align-items: flex-end; }
.msg-row--in  { align-self: flex-start; align-items: flex-start; }
.msg-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font: 13.5px/1.5 var(--font-sans);
  text-wrap: pretty;
}
.msg-row--in .msg-bubble {
  background: var(--surface-raised, var(--bg-sunk));
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}
.msg-row--out .msg-bubble {
  background: var(--ink);
  border: 1px solid transparent;
  color: var(--bg);
  border-bottom-right-radius: 5px;
}
.msg-meta {
  margin-top: 0;
  padding: 0 4px;
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--ink-4);
}
.msg-daysep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  color: var(--ink-4);
}
.msg-daysep::before,
.msg-daysep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.msg-daysep span {
  font: 600 10px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.msg-await-anchor {
  display: flex;
  justify-content: flex-end;
  padding-right: var(--s-1);
}

/* A sent/received bubble is the one place rendered rich text sits on an
   inverted (currentColor) surface — see .md-body/.md-pre in the shared
   "RICH TEXT" section below, and .msg-attach-chip right after this, which
   uses the same currentColor trick. */
.msg-bubble-body {
  --md-chip-bg: color-mix(in oklch, currentColor 12%, transparent);
  --md-chip-border: color-mix(in oklch, currentColor 20%, transparent);
}

/* Attachment chip inside a sent/received bubble. Uses currentColor so it
   reads correctly in both the dark "out" bubble and the light "in" bubble
   without a separate rule per side. */
.msg-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 9px;
  border-radius: 9px;
  background: color-mix(in oklch, currentColor 12%, transparent);
  border: 1px solid color-mix(in oklch, currentColor 20%, transparent);
  font: 500 11.5px var(--font-mono);
}
.msg-attach-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.msg-attach-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.msg-attach-chip-size { opacity: 0.7; flex-shrink: 0; }

/* Composer: pending attachment chip staged above the textarea, before send. */
.msg-composer { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.msg-attach-pending-list { display: flex; flex-direction: column; gap: 5px; }
.msg-attach-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  max-width: 100%;
  padding: 5px 6px 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--bg-sunk);
}
.msg-attach-pending[data-status="error"] { border-color: color-mix(in oklch, var(--bad) 40%, var(--line)); }
.msg-attach-pending[data-status="error"] .msg-attach-pending-ico { color: var(--bad); }
.msg-attach-pending-ico { display: inline-flex; color: var(--ink-3); flex-shrink: 0; }
.msg-attach-pending-ico svg { width: 13px; height: 13px; }
.msg-attach-pending-spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--ink-3) 30%, transparent);
  border-top-color: var(--ink-3);
  animation: cmp-spin .6s linear infinite;
}
.msg-attach-pending-name {
  font: 500 11.5px var(--font-mono);
  color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.msg-attach-pending-folder {
  flex-shrink: 0;
  font: 500 10px var(--font-mono);
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  cursor: pointer;
}
.msg-attach-pending-folder:hover { border-color: var(--ink-3); color: var(--ink); }
.msg-attach-pending-error { font: 10.5px var(--font-mono); color: var(--bad); flex-shrink: 0; }
.msg-attach-pending-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; border: 0;
  background: transparent; color: var(--ink-3); cursor: pointer; flex-shrink: 0;
}
.msg-attach-pending-remove svg { width: 11px; height: 11px; }
.msg-attach-pending-remove:hover { background: var(--surface-raised); color: var(--ink); }
.msg-attach-input { display: none; }

/* Stage colors — drive the lane accent (--lane-color), the list/step rail
   (--stage-c) and the now-card / step-stage dot (--stage-color) from one token. */
.stage-discovery { --lane-color: var(--stage-discovery); --stage-c: var(--stage-discovery); --stage-color: var(--stage-discovery); }
.stage-planning  { --lane-color: var(--stage-planning);  --stage-c: var(--stage-planning);  --stage-color: var(--stage-planning);  }
.stage-design    { --lane-color: var(--stage-design);    --stage-c: var(--stage-design);    --stage-color: var(--stage-design);    }
.stage-build     { --lane-color: var(--stage-build);     --stage-c: var(--stage-build);     --stage-color: var(--stage-build);     }
.stage-testing   { --lane-color: var(--stage-testing);   --stage-c: var(--stage-testing);   --stage-color: var(--stage-testing);   }
.stage-review    { --lane-color: var(--stage-review);    --stage-c: var(--stage-review);    --stage-color: var(--stage-review);    }
.stage-release   { --lane-color: var(--stage-release);   --stage-c: var(--stage-release);   --stage-color: var(--stage-release);   }
.stage-learn     { --lane-color: var(--stage-learn);     --stage-c: var(--stage-learn);     --stage-color: var(--stage-learn);     }
.stage-close     { --lane-color: var(--stage-close);     --stage-c: var(--stage-close);     --stage-color: var(--stage-close);     }

/* ============================================================
   No machines connected — full-width banner card
   ============================================================ */
.wf-nomachines {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-3);
  padding: var(--s-4);
  background: color-mix(in oklch, var(--warn) 10%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--warn) 28%, transparent);
  border-radius: var(--r-3);
  align-items: start;
}
.wf-nomachines-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-2);
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--warn) 24%, var(--surface));
  color: var(--warn);
}
.wf-nomachines-icon svg { width: 22px; height: 22px; }
.wf-nomachines-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.wf-nomachines-eyebrow {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
}
.wf-nomachines-headline {
  font: 600 16px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wf-nomachines-sub {
  font: 13px/1.45 var(--font-sans);
  color: var(--ink-2);
  margin: 0;
}
.wf-nomachines-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.wf-nomachines-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  border-radius: var(--r-pill);
  font: 500 13px var(--font-sans);
  cursor: pointer;
}
.wf-nomachines-cta svg { width: 14px; height: 14px; }
.wf-nomachines-secondary {
  font: 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.wf-nomachines-secondary:hover { color: var(--ink); }
@container (max-width: 479px) {
  .wf-nomachines { grid-template-columns: 40px 1fr; padding: var(--s-3); }
  .wf-nomachines-icon { width: 40px; height: 40px; }
  .wf-nomachines-actions { flex-direction: column; align-items: flex-start; }
}

/* When no machines, the queued board below dims to signal it's stalled */
.wf-board-dimmed { opacity: 0.55; pointer-events: none; }

/* ============================================================
   Equal-rows board grid (replaces horizontal scroll on tablet+)
   ============================================================ */
.wf-board-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.wf-board-grid > .wf-col {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  max-height: 360px;
}
.wf-board-grid > .wf-col .wf-col-head {
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 1;
}
.wf-board-grid > .wf-col .wf-col-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}
.wf-board-grid > .wf-col .wf-col-list::-webkit-scrollbar { width: 6px; }
.wf-board-grid > .wf-col .wf-col-list::-webkit-scrollbar-thumb {
  background: var(--line-3);
  border-radius: 3px;
}
@container (min-width: 768px) {
  .wf-board-grid { grid-template-columns: repeat(4, 1fr); }
  .wf-board-grid > .wf-col { max-height: 420px; }
}

/* ============================================================
   Runtime gate cards (revised — distinct from workflow steps)
   ============================================================ */

.task-gates {
  margin: 0 var(--s-3) var(--s-3);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-2);
}
.task-gates-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-1) var(--s-2);
}
.task-gates-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.task-gates-eyebrow-icon {
  width: 12px; height: 12px;
  display: inline-flex;
  color: var(--ink-3);
}
.task-gates-count {
  font: 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-4);
}
.task-gates-collapse {
  margin-left: auto;
  background: transparent;
  border: 0;
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r-1);
}
.task-gates-collapse:hover { color: var(--ink); background: var(--bg-sunk); }

.task-gates-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* ---- Passed gates: compact pill row ---- */
.task-gate-compact {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s-2);
  align-items: start;
  padding: 8px 12px 9px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.task-gate-compact-icon {
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--good) 14%, var(--surface));
  color: var(--good);
}
.task-gate-compact-icon svg { width: 11px; height: 11px; }
.task-gate-compact[data-status="needs_user"] .task-gate-compact-icon {
  background: color-mix(in oklch, var(--info) 14%, var(--surface));
  color: var(--info);
}
.task-gate-compact[data-status="blocked"] .task-gate-compact-icon,
.task-gate-compact[data-status="failed"] .task-gate-compact-icon {
  background: color-mix(in oklch, var(--bad) 12%, var(--surface));
  color: var(--bad);
}
.task-gate-compact[data-status="interrupted"] .task-gate-compact-icon {
  background: color-mix(in oklch, var(--warn) 14%, var(--surface));
  color: var(--warn);
}
.task-gate-compact-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.task-gate-compact-name {
  font: 500 12px var(--font-sans);
  color: var(--ink-2);
}
.task-gate-compact-summary {
  font: 11.5px/1.45 var(--font-sans);
  color: var(--ink-3);
  text-wrap: pretty;
}
.task-gate-compact-technical {
  margin-top: 3px;
}
.task-gate-compact-time {
  font: 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ---- Collapsed "all passed" row ---- */
.task-gates-all-clear {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: 8px 12px 8px 10px;
  background: color-mix(in oklch, var(--good) 6%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--good) 22%, transparent);
  border-radius: var(--r-2);
  cursor: pointer;
}
.task-gates-all-clear-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--good) 20%, var(--surface));
  color: var(--good);
}
.task-gates-all-clear-icon svg { width: 13px; height: 13px; }
.task-gates-all-clear-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.task-gates-all-clear-title {
  font: 500 13px var(--font-sans);
  color: var(--ink);
}
.task-gates-all-clear-sub {
  font: 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.task-gates-all-clear-toggle {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- Failed gate: prominent card ---- */
.task-gate-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 2px);
  background: color-mix(in oklch, var(--bad) 8%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--bad) 28%, transparent);
  border-radius: var(--r-2);
  position: relative;
}
.task-gate-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--bad);
  border-radius: var(--r-2) 0 0 var(--r-2);
}
.task-gate-card-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-2);
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--bad) 20%, var(--surface));
  color: var(--bad);
  flex-shrink: 0;
}
.task-gate-card-icon svg { width: 18px; height: 18px; }
.task-gate-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.task-gate-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.task-gate-card-name {
  font: 600 14px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.task-gate-card-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 5px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklch, var(--bad) 30%, transparent);
  background: color-mix(in oklch, var(--bad) 14%, var(--surface));
  color: var(--bad);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.task-gate-card-status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.task-gate-card-agent {
  margin-left: auto;
  font: 10.5px var(--font-mono);
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.task-gate-card-summary {
  font: 13px/1.5 var(--font-sans);
  color: var(--ink);
}
.task-gate-card-explain {
  font: 12px/1.45 var(--font-sans);
  color: var(--ink-2);
}
.task-gate-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font: 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding-top: 2px;
}
.task-gate-card-meta b { color: var(--ink-2); font-weight: 500; }

/* Collapsible technical block on a gate card. Default closed via <details>.
   Toggle styled like a chip; chevron rotates on open. */
.task-gate-card-details {
  margin-top: var(--s-1);
}
.task-gate-card-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--bad) 28%, transparent);
  color: var(--bad);
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.task-gate-card-details-toggle::-webkit-details-marker { display: none; }
.task-gate-card-details-toggle::before {
  content: "▸";
  display: inline-block;
  width: 8px;
  font-size: 9px;
  color: inherit;
  transition: transform .15s ease;
}
.task-gate-card-details[open] .task-gate-card-details-toggle::before { transform: rotate(90deg); }
.task-gate-card[data-state="running"] .task-gate-card-details-toggle {
  border-color: color-mix(in oklch, var(--info) 28%, transparent);
  color: var(--info);
}
.task-gate-card-details-toggle:hover {
  background: color-mix(in oklch, var(--bad) 12%, var(--surface));
}
.task-gate-card[data-state="running"] .task-gate-card-details-toggle:hover {
  background: color-mix(in oklch, var(--info) 10%, var(--surface));
}
@media (prefers-reduced-motion: reduce) {
  .task-gate-card-details-toggle::before { transition: none; }
}

.task-gate-card-technical {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: var(--s-2) var(--s-3);
  margin-top: 2px;
  font: 11px/1.55 var(--font-mono);
  color: var(--ink-2);
  white-space: pre-wrap;
}

/* ---- Pending / running gate ---- */
.task-gate-card[data-state="running"] {
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  border-color: color-mix(in oklch, var(--accent) 28%, transparent);
}
.task-gate-card[data-state="running"]::before { background: var(--accent); }
.task-gate-card[data-state="running"] .task-gate-card-icon {
  background: color-mix(in oklch, var(--accent) 20%, var(--surface));
  color: var(--accent);
}
.task-gate-card[data-state="running"] .task-gate-card-status {
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  border-color: color-mix(in oklch, var(--accent) 30%, transparent);
  color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .task-gate-card[data-state="running"] .task-gate-card-status-dot {
    animation: tcard-dot-pulse 1.6s ease-in-out infinite;
  }
}

/* ============================================================
   Brief tab — document accordion
   ============================================================ */
.task-brief {
  margin: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.task-doc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.task-doc[data-state="pending"] { opacity: 0.65; }
.task-doc-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  width: 100%;
  padding: var(--s-3);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.task-doc-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  font: 600 11px var(--font-mono);
  color: var(--ink-3);
}
.task-doc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-doc-title {
  font: 600 14px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.task-doc-meta {
  font: 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.task-doc-chevron {
  width: 14px; height: 14px;
  color: var(--ink-3);
  transition: transform .15s ease;
}
.task-doc[data-open="true"] .task-doc-chevron { transform: rotate(180deg); }
.task-doc-body {
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 22px + var(--s-3));
  border-top: 1px solid var(--line);
}
/* Element-level rendered-markdown styling (headings/lists/code/pre) lives on
   the shared .md-body/.md-pre classes — see the "RICH TEXT" section below.
   Both task-doc-body divs and message bubbles add md-body/md-pre alongside
   this class rather than re-declaring the same rules per surface. */
.task-doc-empty {
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 22px + var(--s-3));
  border-top: 1px solid var(--line);
  font: 12px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
/* Testing / Messages tabs when there's nothing to show yet. */
.task-tab-empty {
  padding: var(--s-5) var(--s-3);
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}

/* ============================================================
   RICH TEXT — shared primitives for HTML that lib/taskDetail.js
   produces from text: renderMarkdown() (documents, iterations, chat
   messages) and technicalHtml()/richProse()'s raw-block fallback
   (step technical details). One definition instead of a slightly
   different copy per surface — add `md-body` (element styling:
   headings/lists/code) and/or bare `.md-pre` (a fenced code block or
   raw dump) alongside a surface's own layout class.

   Colour is the one thing that legitimately varies: most surfaces
   sit on the normal page surface, but a sent chat bubble inverts to
   a solid dark background. Rather than a fixed color, .md-pre and
   .md-body code read `--md-chip-bg`/`--md-chip-border`, which default
   to the normal fixed tokens here and get overridden to a
   currentColor mix only where the surface is inverted (see
   .msg-bubble-body above).

   .md-prose is the opt-in base tone/size for surfaces that don't supply
   their own — add it alongside .md-body wherever nothing else already sets
   the paragraph color/font (accordion doc bodies, the research doc view).
   Message bubbles deliberately skip it: .msg-bubble already sets color per
   direction (inverted white text on the "sent" bubble), and .md-prose's
   fixed --ink-2 would stomp that if applied there too. */
.md-prose {
  font: 13.5px/1.6 var(--font-sans);
  color: var(--ink-2);
}
.md-body > :first-child { margin-top: 0; }
.md-body > :last-child { margin-bottom: 0; }
.md-body p { margin: 0 0 var(--s-3); }
.md-body ul, .md-body ol { margin: 0 0 var(--s-3); padding-left: 1.2em; }
.md-body li { margin-bottom: var(--s-1); }
.md-body li:last-child { margin-bottom: 0; }
/* Coloured/themed treatment (bullet dots, heading tint) is scoped under
   .md-prose, not bare .md-body — .md-body alone is structural (spacing,
   sizing) and stays consistent for every consumer including message
   bubbles, while colour is opt-in the same way .md-prose's base text tone
   already is (a "sent" bubble sets its own inverted colours and skips
   .md-prose entirely, so it keeps plain default bullets/heading colour
   rather than fighting these rules). */
.md-prose ul {
  padding-left: 0;
  list-style: none;
}
.md-prose ul li {
  position: relative;
  padding-left: 16px;
}
.md-prose ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.md-body h1, .md-body h2, .md-body h3 {
  margin: var(--s-4) 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.md-body h1 { font-size: 1.55em; }
.md-body h2 { font-size: 1.3em; }
.md-body h3 { font-size: 1.1em; }
.md-prose h1, .md-prose h2, .md-prose h3 { color: var(--ink); }
.md-body h4, .md-body h5, .md-body h6 {
  margin: var(--s-4) 0 var(--s-2);
  font: 600 12px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.md-body h1:first-child, .md-body h2:first-child, .md-body h3:first-child,
.md-body h4:first-child, .md-body h5:first-child, .md-body h6:first-child { margin-top: 0; }
.md-body code {
  background: var(--md-chip-bg, var(--bg-sunk));
  border: 1px solid var(--md-chip-border, var(--line));
  padding: 1px 5px;
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 0.88em;
}
.md-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: var(--s-3) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.md-body table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  background: var(--surface);
}
.md-body th,
.md-body td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.md-body th {
  background: var(--bg-sunk);
  color: var(--ink);
  font: 650 12px/1.4 var(--font-sans);
}
.md-body td {
  color: var(--ink-2);
  font: 12.5px/1.45 var(--font-sans);
}
.md-body th:last-child,
.md-body td:last-child { border-right: 0; }
.md-body tr:last-child td { border-bottom: 0; }
.md-pre {
  margin: var(--s-2) 0;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  background: var(--md-chip-bg, var(--bg-sunk));
  border: 1px solid var(--md-chip-border, var(--line));
  overflow-x: auto;
}
.md-pre code {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.85em;
  line-height: 1.55;
}

/* Docs tab reuses the brief accordion; file rows sit flush in the body */
.task-doc-body--files { padding: 0; }
.task-doc--files[data-open="false"] .task-doc-body { display: none; }
.task-doc--files .task-file:first-of-type { border-top: 0; }

/* ---- Testing tab: iteration documents (reuse the brief accordion) ---- */
.run-iters .task-doc-body { display: block; padding-top: 12px; }
.run-iters .task-doc[data-open="false"] .task-doc-body { display: none; }
/* Tone rail on each iteration doc — number colours pass/fail */
.run-iter[data-tone="pass"] .task-doc-num {
  color: var(--good);
  border-color: color-mix(in oklch, var(--good) 30%, transparent);
}
.run-iter[data-tone="fail"] .task-doc-num {
  color: var(--bad);
  border-color: color-mix(in oklch, var(--bad) 28%, transparent);
}
/* Body spacing rhythm */
.run-iters .md-body > :first-child { margin-top: 0; }
.run-iters .md-body h4 { margin-top: 16px; margin-bottom: 6px; }
.run-iters .md-body ul { margin-bottom: 0; }
.run-iters .md-body li { margin-bottom: 5px; }
.run-iters .md-body li:last-child { margin-bottom: 0; }
.run-iters .md-body p:last-child { margin-bottom: 0; }

/* ============================================================
   Docs tab — grouped file lists
   ============================================================ */
.task-files {
  margin: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.task-files-group {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.task-files-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--line);
  font: 500 11px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.task-files-group-count { color: var(--ink-4); }
/* Per-category empty notice in the Docs tab (Design / Assets). */
.task-files-empty {
  padding: var(--s-3);
  font-size: 12.5px;
  color: var(--ink-3);
}
.task-file {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.task-file:first-of-type { border-top: 0; }
.task-file:hover { background: color-mix(in oklch, var(--ink) 4%, var(--surface)); }
.task-file:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.task-file-icon {
  width: 28px; height: 28px;
  border-radius: var(--r-1);
  display: grid;
  place-items: center;
  font: 600 11px var(--font-mono);
  text-transform: uppercase;
}
.task-file-icon[data-kind="figma"]  { background: color-mix(in oklch, var(--stage-design) 18%, var(--surface));   color: var(--stage-design); }
.task-file-icon[data-kind="image"]  { background: color-mix(in oklch, var(--info) 14%, var(--surface));            color: var(--info); }
.task-file-icon[data-kind="md"]     { background: color-mix(in oklch, var(--accent) 16%, var(--surface));          color: var(--accent); }
.task-file-icon[data-kind="pdf"]    { background: color-mix(in oklch, var(--bad) 14%, var(--surface));             color: var(--bad); }
.task-file-icon[data-kind="zip"]    { background: var(--bg-sunk); color: var(--ink-3); }
.task-file-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-file-name {
  font: 500 13px var(--font-sans);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-file-path {
  font: 10.5px var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-file-size {
  font: 11px var(--font-mono);
  color: var(--ink-3);
}
.task-file-action {
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
  cursor: pointer;
}
.task-file-action:hover { color: var(--ink); border-color: var(--line-2); }
.task-file-action:disabled { opacity: 0.5; cursor: default; }
.task-file-action svg { width: 12px; height: 12px; }
.task-file[data-busy="true"] { opacity: 0.6; pointer-events: none; }
.task-file-preview-img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: var(--r-2);
}
.task-file-preview-text {
  margin: 0;
  padding: var(--s-3);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font: 12px var(--font-mono);
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.task-file-preview-markdown {
  padding: var(--s-3);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
/* PDFs preview inline in the modal (the blob renders in the browser's own
   viewer) instead of only being downloadable. */
.task-file-preview-pdf {
  display: block;
  width: 100%;
  height: 70vh;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--bg-sunk);
}
.task-file-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-6, 40px) var(--s-3);
  color: var(--ink-3);
  text-align: center;
}
.task-file-preview-empty svg { width: 32px; height: 32px; }

@container (max-width: 419px) {
  .task-file { grid-template-columns: 28px 1fr auto; }
  .task-file-size { display: none; }
}

/* ============================================================
   Step history (stage-grouped accordion on the Status tab)
   ============================================================ */
.task-steps {
  margin: 0 var(--s-3) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.task-step-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.task-step-stage-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 4px);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.task-step-stage-head::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--stage-color, var(--ink-4));
}
.task-step-stage[data-current="true"] .task-step-stage-head::before {
  box-shadow: 0 0 12px color-mix(in oklch, var(--stage-color, var(--accent)) 50%, transparent);
}
.task-step-stage-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}
.task-step-stage-name {
  font: 600 13px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.task-step-stage-counts {
  font: 11px var(--font-mono);
  color: var(--ink-3);
}
.task-step-stage-duration {
  font: 11px var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.task-step-stage-pills {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.task-step-stage-chevron {
  width: 14px; height: 14px;
  color: var(--ink-3);
  transition: transform .15s ease;
}
.task-step-stage[data-open="true"] .task-step-stage-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .task-step-stage-chevron { transition: none; }
}

.task-step-list {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.task-step-stage[data-open="false"] .task-step-list { display: none; }
.task-step {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  gap: 4px var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) + 4px);
  border-top: 1px solid var(--line);
  font: 13px var(--font-sans);
  color: var(--ink);
}
.task-step:first-child { border-top: 0; }
.task-step[data-status="running"] {
  background: color-mix(in oklch, var(--accent) 5%, var(--surface));
}
.task-step-glyph {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 600 9px var(--font-mono);
  /* Fallback for any step status the rules below don't name explicitly
     (orch's step_history vocabulary is bigger than done/running/failed/
     paused/pending/interrupted/needs_user) — a neutral filled dot beats no
     glyph at all, so the status pill always reads as "something happened
     here" even for a status this UI hasn't been taught yet. */
  background: var(--bg-sunk);
  color: var(--ink-3);
}
.task-step[data-status="done"]    .task-step-glyph { background: color-mix(in oklch, var(--good) 18%, var(--surface)); color: var(--good); }
.task-step[data-status="running"] .task-step-glyph { background: color-mix(in oklch, var(--accent) 22%, var(--surface)); color: var(--accent); }
.task-step[data-status="failed"]  .task-step-glyph { background: color-mix(in oklch, var(--bad) 18%, var(--surface)); color: var(--bad); }
.task-step[data-status="paused"]  .task-step-glyph { background: var(--bg-sunk); color: var(--ink-3); }
.task-step[data-status="interrupted"] .task-step-glyph { background: var(--bg-sunk); color: var(--ink-3); }
.task-step[data-status="needs_user"] .task-step-glyph { background: color-mix(in oklch, var(--info) 18%, var(--surface)); color: var(--info); }
.task-step[data-status="pending"] .task-step-glyph {
  background: transparent;
  border: 1px solid var(--line-3);
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .task-step[data-status="running"] .task-step-glyph {
    animation: tcard-dot-pulse 1.6s ease-in-out infinite;
  }
}
.task-step-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
/* Agent · worker footer — right-aligned, quiet metadata. In a flat row it
   spans a second grid row; in a rich row it sits at the bottom of the body,
   under the technical details. */
.task-step-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}
.task-step-body .task-step-footer {
  margin-top: 2px;
}
/* Agent (agent + model) the step ran on — quiet metadata, not a loud pill. */
.task-step-agent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 10.5px var(--font-mono);
  color: var(--ink-3);
}
.task-step-agent-dot {
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--ink-4);
  flex: none;
}
.task-step-agent[data-agent="anthropic"] .task-step-agent-dot { background: oklch(0.62 0.13 40); }
.task-step-agent[data-agent="openai"]    .task-step-agent-dot { background: oklch(0.62 0.13 165); }
.task-step-agent[data-agent="google"]    .task-step-agent-dot { background: oklch(0.62 0.13 255); }
.task-step[data-status="pending"] .task-step-name { color: var(--ink-3); font-weight: 400; }
.task-step[data-status="paused"]  .task-step-name { color: var(--ink-3); }
.task-step[data-status="interrupted"] .task-step-name { color: var(--ink-3); }
.task-step[data-status="running"] .task-step-name { color: var(--ink); }
.task-step-duration {
  font: 11px var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.task-step[data-status="pending"] .task-step-duration { color: var(--ink-4); }
.task-step-worker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 10.5px var(--font-mono);
  color: var(--ink-3);
}
.task-step-worker-avatar {
  width: 13px; height: 13px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-4);
  color: var(--bg);
  font: 600 7px var(--font-mono);
  text-transform: uppercase;
}

/* ============================================================
   Rich step — collapsible head + body with optional technical
   <details>. Used when a step carries summary or technical info.
   Flat .task-step rows (no body) keep the original layout.
   ============================================================ */
.task-step--rich {
  display: block;
  grid-template-columns: none;
  padding: 0;
  gap: 0;
}
/* Live "now" step — top of the current stage gets an inset accent rail. */
.run-step-current {
  background: color-mix(in oklch, var(--now-accent, var(--accent)) 7%, transparent);
  box-shadow: inset 2px 0 0 var(--now-accent, var(--accent));
}
.task-step--rich + .task-step,
.task-step + .task-step--rich {
  /* Preserve the existing 1px divider between siblings */
}
.task-step-head {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 8px var(--s-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.task-step--rich .task-step-glyph,
.task-step--rich .task-step-name,
.task-step--rich .task-step-duration,
.task-step--rich .task-step-worker {
  /* These are inside the head button now */
}
.task-step-chevron {
  width: 14px; height: 14px;
  color: var(--ink-3);
  transition: transform .15s ease;
}
.task-step--rich[data-open="true"] .task-step-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .task-step-chevron { transition: none; }
}

.task-step--rich[data-open="false"] .task-step-body { display: none; }
.task-step-body {
  padding: 4px var(--s-3) var(--s-3) calc(var(--s-3) + 16px + var(--s-2));
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-top: 1px dashed var(--line-2);
  margin: 0 var(--s-3);
}
.task-step-summary {
  font: 12.5px/1.55 var(--font-sans);
  color: var(--ink-2);
  padding-top: var(--s-2);
}
.task-step-technical-wrap {
  margin-top: 2px;
}
.task-step-technical-toggle {
  cursor: pointer;
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.task-step-technical-toggle::-webkit-details-marker { display: none; }
.task-step-technical-toggle::before {
  content: "▸";
  display: inline-block;
  width: 8px;
  color: var(--ink-4);
  transition: transform .15s ease;
}
.task-step-technical-wrap[open] .task-step-technical-toggle { color: var(--ink); }
.task-step-technical-wrap[open] .task-step-technical-toggle::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .task-step-technical-toggle::before { transition: none; }
}
/* Technical details rendered as rich prose (the design's enhanceTechnical). */
.run-tech { font-family: var(--font-sans); }
.run-tech--rich {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-2, 8px);
}
.run-tech-h {
  font: 600 11px var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}
.run-tech-h:first-child { margin-top: 0; }
.run-tech--rich p { margin: 0; font: 13px/1.55 var(--font-sans); color: var(--ink-2); }
.run-tech-ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.run-tech-ul li {
  position: relative;
  padding-left: 16px;
  font: 13px/1.5 var(--font-sans);
  color: var(--ink-2);
  text-wrap: pretty;
}
.run-tech-ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.run-tech code {
  font: 11.5px var(--font-mono);
  background: color-mix(in oklch, var(--ink) 7%, transparent);
  padding: 1px 5px;
  border-radius: 5px;
  color: var(--ink);
}
.run-tech-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font: 600 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.run-tech-next span { color: var(--ink-4); }
.run-tech-next code {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  padding: 3px 8px;
  text-transform: none;
  letter-spacing: 0;
}
/* technicalHtml()'s raw-block fallback (a real diff/JSON/shell dump, kept
   verbatim rather than parsed as prose) renders as bare .md-pre — see the
   shared RICH TEXT primitives. .run-tech--rich already draws its own sunk
   box around the whole thing, so the inner .md-pre sits flush instead of
   nesting a second, identical-looking box. */
.run-tech--rich .md-pre {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* ============ Master reduce-motion guard ============ */
@media (prefers-reduced-motion: reduce) {
  .tcard-status--run .tcard-dot-pulse,
  .task-tab-livedot,
  .task-now-progress > i,
  .msg-await-pill .tcard-dot-pulse,
  .task-step[data-status="running"] .task-step-glyph { animation: none !important; }
  .task-now-progress > i { width: 30%; left: 0; }
  .task-doc-chevron { transition: none !important; }
}

/* ============================================================
   Spawned child tasks (delivery-developer) — update-v2 §1
   ============================================================ */

/* Operator banner — spawned-wait variant (tone: blocked → warn/amber, ⇄ icon) */
.op-banner.spawned-wait {
  background: color-mix(in oklch, var(--warn) 11%, var(--surface));
  border-color: color-mix(in oklch, var(--warn) 28%, transparent);
}
.op-banner.spawned-wait .op-banner-icon {
  background: color-mix(in oklch, var(--warn) 24%, var(--surface));
  color: var(--warn);
}
.op-banner.spawned-wait .op-banner-eyebrow { color: var(--warn); }
.op-banner-detail {
  font: 12.5px/1.5 var(--font-sans);
  color: var(--ink-3);
}
.op-banner.spawned-wait .btn-primary {
  background: var(--warn);
  color: #fff;
}
.op-banner.spawned-wait .btn-primary svg { width: 13px; height: 13px; }

/* Ghost button (shared by spawned UI) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 12px var(--font-sans);
  cursor: pointer;
}
.btn-ghost:hover { background: var(--surface-raised); }
.btn-ghost--sm { height: 26px; padding: 0 9px; font-size: 11.5px; }
.btn-ghost svg { width: 12px; height: 12px; }

/* Section kicker */
.section-kicker {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Live-state grid (replaces discrete live state items) */
.live-state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-2);
}
.live-state-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.live-state-card.is-wait {
  background: color-mix(in oklch, var(--warn) 9%, var(--surface));
  border-color: color-mix(in oklch, var(--warn) 26%, transparent);
}
.live-state-label {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.live-state-value { font: 600 14px var(--font-sans); color: var(--ink); }
.live-state-card.is-wait .live-state-value { color: color-mix(in oklch, var(--warn) 80%, var(--ink)); }
.live-state-meta { font: 11.5px var(--font-sans); color: var(--ink-3); }

/* Child outcomes highlight grid */
.child-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
}
.child-highlight {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
}
.child-highlight.tone-done {
  background: color-mix(in oklch, var(--good) 8%, var(--surface));
  border-color: color-mix(in oklch, var(--good) 24%, transparent);
}
.child-highlight.tone-failed,
.child-highlight.tone-interrupted {
  background: color-mix(in oklch, var(--bad) 8%, var(--surface));
  border-color: color-mix(in oklch, var(--bad) 24%, transparent);
}
.child-highlight.tone-needs-user {
  background: color-mix(in oklch, var(--info) 8%, var(--surface));
  border-color: color-mix(in oklch, var(--info) 24%, transparent);
}
.child-highlight.tone-blocked {
  background: color-mix(in oklch, var(--warn) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--warn) 26%, transparent);
}
.child-highlight-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.child-highlight-eyebrow {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.child-highlight-name { font: 600 13.5px var(--font-sans); color: var(--ink); }
.child-highlight-summary { font: 12.5px/1.5 var(--font-sans); color: var(--ink-2); }
.child-highlight-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: 2px;
}
.child-highlight-time { font: 11px var(--font-mono); color: var(--ink-3); }

/* Child wait audit note */
.child-audit-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-3) var(--s-4);
  border: 1px dashed color-mix(in oklch, var(--line) 60%, var(--ink-4));
  border-radius: var(--r-2);
  background: color-mix(in oklch, var(--ink) 2%, var(--surface));
}
.child-audit-line { font: 12.5px/1.5 var(--font-sans); color: var(--ink-2); }
.child-audit-time { font: 11px var(--font-mono); color: var(--ink-3); margin-top: 2px; }

/* Spawned task summary pills */
.spawned-task-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Spawned task list */
.spawned-task-list { display: flex; flex-direction: column; gap: var(--s-2); }
.spawned-task-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
}
.spawned-task-row.is-active {
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  border-color: color-mix(in oklch, var(--accent) 22%, transparent);
}
.spawned-task-row.is-archived {
  background: var(--bg-sunk);
  border-style: dashed;
}
.spawned-task-row.is-archived .step-name,
.spawned-task-row.is-archived .step-glyph { color: var(--ink-3); }
.step-glyph {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font: 600 12px var(--font-mono);
  color: var(--ink-3);
}
.spawned-task-row.done .step-glyph    { color: var(--good); }
.spawned-task-row.failed .step-glyph  { color: var(--bad); }
.spawned-task-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spawned-task-line1 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.step-name { font: 600 13px var(--font-sans); color: var(--ink); }
.step-agent-badge {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.step-summary { font: 11.5px var(--font-mono); color: var(--ink-3); }
.spawned-task-result { font: 12.5px/1.5 var(--font-sans); color: var(--ink-2); }
.spawned-task-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: 2px;
}
.step-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font: 11px var(--font-mono);
  color: var(--ink-2);
  white-space: nowrap;
}
.step-time .elapsed { color: var(--ink-3); }
.step-time .elapsed.archived { color: var(--ink-3); opacity: 0.8; }

@media (max-width: 480px) {
  .spawned-task-row { grid-template-columns: 18px 1fr; }
  .spawned-task-row .step-time {
    grid-column: 2;
    flex-direction: row;
    gap: var(--s-2);
    align-items: center;
  }
}

/* TaskCard spawned-wait headline (update-v2 §2) */
.tcard-headline {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font: 500 11.5px/1.45 var(--font-sans);
  color: color-mix(in oklch, var(--warn) 78%, var(--ink));
  margin-top: 2px;
}
.tcard-headline svg {
  width: 12px; height: 12px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--warn);
}


/* ============================================================
   TaskSlideOver chrome integration

   The generic SlideOver supplies .slideover-head / -tabs / -body with their
   own padding + borders. The design's .task-shell-head, .task-shell-tabs and
   the body sections (now-card, steps, brief, files…) own their spacing, so we
   collapse the generic chrome — but ONLY for the task slide-over, matched by
   the presence of .task-shell-head so the activity/worker/machine slide-overs
   keep their default chrome.
   ============================================================ */
/* Drop the panel's top inset for the task slide-over: it has no .slideover-bar,
   so the inset would leave a plain --surface strip above the head's gradient
   (and fill the mobile rounded corners with it). Zeroing it lets the head's
   gradient reach the top edge / rounded corners as one uniform background,
   matching the design's slide-head (which sits flush under the clipped corners). */
.slideover-panel:has(.task-shell-head) {
  padding-top: 0;
}
.slideover-panel:has(.task-shell-head) .slideover-head {
  padding: 0;
  border-bottom: 0;
}
.slideover-panel:has(.task-shell-head) .slideover-tabs {
  padding: 0;
  background: transparent;
  border-bottom: 0;
}
.slideover-panel:has(.task-shell-head) .slideover-body {
  padding: 0;
  /* Lets the design's @container rules (file columns, now-card clamp) resolve. */
  container-type: inline-size;
}
/* The head provides its own gradient + divider; give it the inline-size
   container the title's @container size step reads from. */
.task-shell-head {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  container-type: inline-size;
}

/* ---- Animated tab underline -------------------------------------------
   The design gives each active tab a static accent border-bottom. We keep
   the look but replace it with a single ink bar that slides + resizes
   between tabs (positions set from JS via --tt-x / --tt-w / --tt-o). */
.task-shell-tabs { position: relative; }
.task-shell-tabs .task-tab.is-active { border-bottom-color: transparent; }
.task-tab-ink {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: var(--tt-w, 0);
  border-radius: 1px;
  background: var(--accent);
  opacity: var(--tt-o, 0);
  transform: translateX(var(--tt-x, 0));
  transition:
    transform .28s cubic-bezier(.34, 1.1, .42, 1),
    width     .28s cubic-bezier(.34, 1.1, .42, 1),
    opacity   .15s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .task-tab-ink { transition: none; }
}
/* ============================================================
   tasks.css — Tasks page (TasksView), Queue + Archive slide-overs,
   and the Archive page. Ported verbatim from the "Delivery v6" design
   (task-mockups.css). Builds on tokens.css + components.css + workflow.css.

   Integration glue (below) adapts the design's standalone slide-over chrome
   (.slide-head / .slide-body / .slide-foot) to the shared <SlideOver> slots,
   whose wrappers (.slideover-head / -body / -foot) would otherwise add their
   own padding and borders.
   ============================================================ */

/* The page is the container query context the design's @container rules need. */
.tasks-page { container-type: inline-size; display: flex; flex-direction: column; gap: var(--s-4); }

/* Let the design slide-over chrome own its own padding/borders inside SlideOver. */
.slideover-head:has(> .slide-head) { padding: 0; border-bottom: 0; }
.slideover-body:has(> .slide-body) { padding: 0; }
.slideover-foot:has(> .slide-foot) { padding: 0; min-height: 0; border-top: 0; gap: 0; }
.slideover-foot:has(> .slide-foot) .slide-foot { width: 100%; }

/* All dropdowns use the <Select> component (.pdrop) — see dropdown.css. */

/* ============================================================
   Shared atoms
   ============================================================ */

/* Task-type pill — used in queue cards, archive rows, slide-overs */
.type-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  font: 500 10px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.type-pill[data-type="feature"] {
  background: color-mix(in oklch, var(--info) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--info) 30%, transparent);
  color: color-mix(in oklch, var(--info) 80%, var(--ink));
}
.type-pill[data-type="bug"] {
  background: color-mix(in oklch, var(--bad) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--bad) 30%, transparent);
  color: color-mix(in oklch, var(--bad) 80%, var(--ink));
}
.type-pill[data-type="research"] {
  background: color-mix(in oklch, var(--warn) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--warn) 30%, transparent);
  color: color-mix(in oklch, var(--warn) 85%, var(--ink));
}
.task-eyebrow-type {
  font-weight: 700;
}
.task-eyebrow-type[data-type="feature"] { color: color-mix(in oklch, var(--info) 80%, var(--ink)); }
.task-eyebrow-type[data-type="bug"] { color: color-mix(in oklch, var(--bad) 80%, var(--ink)); }
.task-eyebrow-type[data-type="research"] { color: color-mix(in oklch, var(--warn) 85%, var(--ink)); }
.task-eyebrow-dot {
  margin: 0 6px;
  color: var(--ink-4);
}

/* Eyebrow label (mono caps, ink-3) — used across slide-over body, composer */
.eyebrow {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.eyebrow-count {
  margin-left: 6px;
  padding: 1px 7px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 10px;
  color: var(--ink-2);
}
.section { display: flex; flex-direction: column; gap: 6px; }

/* Button family used in slide-over footers and composer */
.btn-ghost, .btn-primary, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font: 500 13px var(--font-sans);
  cursor: pointer;
  border: 1px solid;
  text-decoration: none;
}
.btn-ghost   { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-raised); border-color: var(--line-2); color: var(--ink); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-primary:disabled { opacity: 0.42; cursor: not-allowed; }
.btn-danger  {
  background: color-mix(in oklch, var(--bad) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--bad) 30%, transparent);
  color: var(--bad);
}

/* "View all" link — small arrow chip used in card heads */
.pagelink {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font: 500 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.pagelink-arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
}
.pagelink:hover { color: var(--ink); }
.pagelink:hover .pagelink-arrow { color: var(--ink); border-color: var(--line-2); }

/* ---------- 02 Composer ---------- */
.composer {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  overflow: hidden;
}
.composer-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 5%, var(--surface)),
    var(--surface));
  border-bottom: 1px solid var(--line);
}
.composer-head-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color: var(--accent);
  border-radius: var(--r-1);
}
.composer-head-icon svg { width: 16px; height: 16px; }
.composer-head-label {
  font: 600 14px var(--font-display);
  letter-spacing: -0.01em;
  flex: 1;
}
.composer-head-badge {
  padding: 2px 8px;
  background: color-mix(in oklch, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--accent) 26%, transparent);
  border-radius: var(--r-pill);
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.composer-body {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
}
.composer-left {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}
@container (min-width: 480px) {
  .composer-body { padding: var(--s-4) var(--s-5); }
  .composer-left { gap: var(--s-4); }
}
@container (min-width: 960px) {
  .composer-body {
    grid-template-columns: 1fr 300px;
    gap: var(--s-5);
    padding: var(--s-4) var(--s-5);
  }
  .composer-right { border-left: 1px solid var(--line); padding-left: var(--s-6); }
}
@container (max-width: 959px) {
  .composer-right { border-top: 1px solid var(--line); padding-top: var(--s-5); }
}

/* Type buttons — color-mix only */
.composer-type-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}
.composer-type-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  transition: background .15s, border-color .15s;
}
.composer-type-btn:hover { background: color-mix(in oklch, var(--ink) 3%, var(--surface)); border-color: var(--line-2); }
.composer-type-btn .icon {
  width: 24px; height: 24px;
  border-radius: var(--r-1);
  display: grid;
  place-items: center;
  background: var(--bg-sunk);
  color: var(--ink-3);
}
.composer-type-btn .icon svg { width: 14px; height: 14px; }
.composer-type-btn-label { font: 600 13px var(--font-sans); }
.composer-type-btn-sub { font: 11px var(--font-mono); color: var(--ink-3); letter-spacing: 0.04em; }

.composer-type-btn.feature.on  { background: color-mix(in oklch, var(--info) 8%, var(--surface)); border-color: color-mix(in oklch, var(--info) 30%, transparent); color: color-mix(in oklch, var(--info) 80%, var(--ink)); }
.composer-type-btn.feature.on .icon { background: color-mix(in oklch, var(--info) 14%, var(--surface)); color: color-mix(in oklch, var(--info) 90%, var(--ink)); }
.composer-type-btn.bug.on      { background: color-mix(in oklch, var(--bad)  8%, var(--surface)); border-color: color-mix(in oklch, var(--bad)  30%, transparent); color: color-mix(in oklch, var(--bad) 80%, var(--ink)); }
.composer-type-btn.bug.on .icon { background: color-mix(in oklch, var(--bad) 14%, var(--surface)); color: color-mix(in oklch, var(--bad) 90%, var(--ink)); }
.composer-type-btn.research.on { background: color-mix(in oklch, var(--warn) 8%, var(--surface)); border-color: color-mix(in oklch, var(--warn) 30%, transparent); color: color-mix(in oklch, var(--warn) 80%, var(--ink)); }
.composer-type-btn.research.on .icon { background: color-mix(in oklch, var(--warn) 14%, var(--surface)); color: color-mix(in oklch, var(--warn) 90%, var(--ink)); }

/* Below 480px: type buttons become a seg */
.composer-type-seg { display: none; width: 100%; }
@container (max-width: 479px) {
  .composer-type-row { display: none; }
  .composer-type-seg { display: flex; }
}

/* ── Field component aliases ─────────────────────────────────
   The canonical field classes are .form-field / .form-input / .form-textarea
   (defined in system.css). These composer-* aliases mirror them and add
   composer-specific sizing tweaks.
   ─────────────────────────────────────────────────────────── */
.composer-field        { display: flex; flex-direction: column; gap: 5px; }
.composer-field-label  { font: 500 10.5px var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.composer-field-req    { color: color-mix(in oklch, var(--bad) 60%, var(--ink-3)); font-weight: 500; margin-left: 1px; font-size: 10.5px; position: relative; top: -1px; }
.composer-input        { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px 10px; font: 14px var(--font-sans); color: var(--ink); }
.composer-textarea     { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px 10px; font: 13px var(--font-sans); color: var(--ink); resize: vertical; min-height: 80px; }
.composer-input:focus,
.composer-textarea:focus { outline: 2px solid color-mix(in oklch, var(--accent) 28%, transparent); outline-offset: -1px; border-color: var(--accent); }

/* Inline validation — surfaced on submit attempt */
.composer-field.invalid .composer-input,
.composer-field.invalid .composer-textarea {
  border-color: color-mix(in oklch, var(--bad) 55%, var(--line));
  background: color-mix(in oklch, var(--bad) 4%, var(--surface));
}
.composer-field-error {
  display: flex; align-items: center; gap: 5px;
  font: 11.5px var(--font-mono); color: var(--bad); margin-top: 1px;
}
.composer-field-error svg { width: 13px; height: 13px; flex: none; }
.composer-inline-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.composer-inline-link:hover { color: var(--ink); }

/* Type-specific field panels — one visible at a time */
.composer-type-fields { display: flex; flex-direction: column; gap: var(--s-4); }
.composer-type-fields[hidden] { display: none; }
.composer-type-fields--fill,
.composer-type-fields--fill .composer-field {
  flex: 1;
  min-height: 0;
}
.composer-type-fields--fill .composer-textarea {
  flex: 1;
  min-height: 160px;
}

/* Required asterisk — same weight as label, muted red, superscript */
.composer-field-req {
  color: color-mix(in oklch, var(--bad) 65%, var(--ink-3));
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 1px;
  font-size: 10.5px;
  position: relative;
  top: -1px;
}
.composer-req-note { display: none; }

/* Right column */
.composer-right { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.composer-right-section { display: flex; flex-direction: column; gap: var(--s-2); }
.composer-drop {
  width: 100%;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-2);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: var(--bg-sunk);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s, background 0.12s;
}
.composer-drop:hover { border-color: var(--ink-3); }
.composer-drop.is-dragover {
  border-color: var(--accent);
  border-style: solid;
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-sunk));
}
.composer-drop-input { display: none; }
.composer-drop-browse { color: var(--accent); }
.composer-drop-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.composer-drop-title { font: 500 13px var(--font-sans); color: var(--ink-2); }
.composer-drop-sub { font: 11px var(--font-mono); color: var(--ink-3); letter-spacing: 0.02em; }
.folder-hint-code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: var(--r-1);
  color: var(--ink-2);
}

/* Hold-in-queue toggle — sits under Attachments in the composer right column */
.composer-hold-section { gap: 0; }
.composer-dependency-section {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.composer-hold {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.composer-hold:hover { border-color: var(--line-2); }
.composer-hold-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.composer-hold-label { font: 500 12.5px var(--font-sans); color: var(--ink); }
.composer-hold-hint { font: 11px/1.45 var(--font-mono); color: var(--ink-3); letter-spacing: 0.01em; text-wrap: pretty; }
.composer-hold-switch {
  flex: none; margin-top: 1px;
  width: 38px; height: 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--bg-sunk);
  position: relative;
  transition: background .16s, border-color .16s;
}
.composer-hold-switch::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-4);
  transition: transform .16s, background .16s;
}
.composer-hold[aria-checked="true"] {
  border-color: color-mix(in oklch, var(--warn) 40%, transparent);
  background: color-mix(in oklch, var(--warn) 7%, var(--surface));
}
.composer-hold[aria-checked="true"] .composer-hold-switch {
  background: var(--warn);
  border-color: var(--warn);
}
.composer-hold[aria-checked="true"] .composer-hold-switch::after {
  transform: translateX(16px);
  background: var(--surface);
}
@media (prefers-reduced-motion: reduce) {
  .composer-hold-switch, .composer-hold-switch::after { transition: none; }
}

/* Held queue card — queued but cannot be consumed. It sinks to the bottom of
   the queue, is not draggable, and reads as paused: muted surface, a locked
   grip, and a small Held chip where the position number would be. */
.qcard[data-held="true"] {
  background: var(--bg-sunk);
  cursor: pointer;
}
.qcard[data-held="true"]::before { background: color-mix(in oklch, var(--warn) 55%, transparent); }
.qcard[data-held="true"]:hover { transform: none; box-shadow: none; border-color: var(--line); }
.qcard[data-held="true"] .qcard-title { color: var(--ink-2); }
.qcard[data-held="true"] .qcard-headline { color: var(--ink-3); }
.qcard[data-held="true"] .qcard-pos { color: var(--ink-4); }
.qcard[data-held="true"] .qcard-grip,
.qcard-grip--locked { cursor: default; color: color-mix(in oklch, var(--warn) 70%, var(--ink-4)); }
.qcard[data-held="true"]:hover .qcard-grip--locked { color: color-mix(in oklch, var(--warn) 70%, var(--ink-4)); }
/* Icon-only hold badge — matched to the remove button's 26px footprint so the
   side column (and its dashed separator) stays aligned whether held or not. */
.qcard-held {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--warn) 12%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--warn) 30%, transparent);
  color: var(--warn);
}
.qcard-held svg { width: 13px; height: 13px; }
.qcard-state-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.qcard-waiting {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--info) 12%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--info) 30%, transparent);
  color: var(--info);
}
.qcard-waiting svg { width: 13px; height: 13px; }
.qcard[data-waiting="true"][data-held="false"]::before { background: color-mix(in oklch, var(--info) 70%, transparent); }
.queue-head-pill.is-held {
  background: color-mix(in oklch, var(--warn) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--warn) 30%, transparent);
  color: var(--warn);
}

/* Drag-to-reorder affordances (pointer-based — works on touch + mouse) */
.qcard-grip svg { width: 12px; height: 12px; }
.qcard--reorderable .qcard-grip {
  cursor: grab;
  touch-action: none;            /* let the handle own touch gestures (no scroll) */
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.qcard--reorderable .qcard-grip:hover { color: var(--ink-2); }
.qcard--reorderable .qcard-grip:active { cursor: grabbing; }

/* The lifted card floats under the pointer. */
.qcard.qcard-dragging {
  border-color: color-mix(in oklch, var(--accent) 55%, var(--line));
  box-shadow: 0 18px 40px -14px color-mix(in oklch, var(--ink) 60%, transparent),
              0 2px 6px -2px color-mix(in oklch, var(--ink) 40%, transparent);
  transform: scale(1.02);
  cursor: grabbing;
  transition: none;
}
.qcard.qcard-dragging .qcard-grip { cursor: grabbing; color: var(--accent); }

/* The gap that shows where the card will land. */
.qcard-placeholder {
  border: 1.5px dashed color-mix(in oklch, var(--accent) 50%, var(--line-2));
  border-radius: var(--r-2);
  background: color-mix(in oklch, var(--accent) 7%, transparent);
  box-sizing: border-box;
}

/* While reordering, suppress hover lift on the resting cards. */
.qcard-list.is-dragging .qcard:not(.qcard-dragging):hover { transform: none; box-shadow: none; border-color: var(--line); }
.noselect, .noselect * { -moz-user-select: none !important; user-select: none !important; -webkit-user-select: none !important; }

/* Bigger grab target on touch screens. */
@media (pointer: coarse) {
  .qcard { grid-template-columns: 30px 1fr auto; }
  .qcard-grip { width: 30px; height: 100%; }
  .qcard-grip svg { width: 15px; height: 15px; }
}

/* Hold / Release actions in the queue slide-over */
/* Engaged (task is held) — the lock reads as "on" at rest. */
.slide-iconbtn--release {
  background: color-mix(in oklch, var(--warn) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--warn) 30%, transparent);
  color: var(--warn);
}
.slide-iconbtn--release:hover,
.slide-iconbtn--hold:hover {
  background: color-mix(in oklch, var(--warn) 18%, var(--surface));
  border-color: color-mix(in oklch, var(--warn) 38%, transparent);
  color: var(--warn);
}

/* Held presentation inside the queue slide-over */
.slide-held-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--warn) 12%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--warn) 30%, transparent);
  color: var(--warn);
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.slide-held-chip svg { width: 12px; height: 12px; }
.slide-waiting-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--info) 12%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--info) 30%, transparent);
  color: var(--info);
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.slide-waiting-chip svg { width: 12px; height: 12px; }
.slide-waiting-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-2);
  background: color-mix(in oklch, var(--info) 7%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--info) 26%, transparent);
}
.slide-waiting-note-icon {
  flex: none; margin-top: 1px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--info) 18%, var(--surface));
  color: var(--info);
}
.slide-waiting-note-icon svg { width: 14px; height: 14px; }
.slide-held-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-2);
  background: color-mix(in oklch, var(--warn) 7%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--warn) 26%, transparent);
}
.slide-held-note-icon {
  flex: none; margin-top: 1px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--warn) 18%, var(--surface));
  color: var(--warn);
}
.slide-held-note-icon svg { width: 14px; height: 14px; }
.slide-held-note-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slide-held-note-title { font: 600 12.5px var(--font-sans); color: var(--ink); }
.slide-held-note-text { font: 12px/1.5 var(--font-sans); color: var(--ink-2); text-wrap: pretty; }
.slide-head-note { padding: 10px 12px; }

.slide-iconbtn--danger {
  color: var(--ink-3);
}
.slide-iconbtn--danger:hover {
  background: color-mix(in oklch, var(--bad) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--bad) 28%, transparent);
  color: var(--bad);
}
.slide-foot-hint {
  margin-left: auto;
  font: 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* Configuration panel — Scope ↔ Tuning, lives in the composer-right column. */
.composer-config-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.composer-config-seg { width: 100%; }
.composer-config-seg .seg-btn { flex: 1; justify-content: center; }
.composer-config-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.composer-config-panel[hidden] { display: none; }
.composer-reasoning-seg { width: 100%; }
.composer-reasoning-seg .seg-btn { flex: 1; justify-content: center; }
.composer-force-row { align-items: flex-start; }
/* Lock fills its column and matches the Select trigger height so it lines up
   with the Agent/Model/Reasoning row (same as the per-step lock). */
.composer-lock-section .tuning-lock-toggle { width: 100%; height: 38px; }

/* ---- Full-width Configuration block (lives below the composer body) ---- */
.composer-config {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  border-top: 1px solid var(--line);
}
@container (min-width: 480px) { .composer-config { padding: var(--s-5); } }
@container (min-width: 960px) { .composer-config { padding: var(--s-5) var(--s-6); } }

/* In the full-width context the head reads as a row, seg sizes to content */
.composer-config .composer-config-head {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.composer-config .composer-config-seg { width: auto; flex: none; }
.composer-config .composer-config-panel { margin-top: 0; }

/* Scope — project + repositories side by side once there's room */
.composer-config-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@container (min-width: 720px) {
  .composer-config-cols { grid-template-columns: 260px 1fr; gap: var(--s-5); align-items: start; }
}
.composer-repos--grid { grid-template-columns: 1fr; }
@container (min-width: 560px) {
  .composer-repos--grid { grid-template-columns: 1fr 1fr; }
}

/* Tuning — defaults (Agent · Model · Reasoning · Lock) on one row, then the
   per-step overrides. The defaults grid mirrors .tuning-step-controls so the
   main row lines up exactly like every step row. */
.composer-tuning-defaults {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 108px;
  align-items: end;
  gap: 8px var(--s-3);
  padding: var(--s-4);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
@container (max-width: 519px) {
  .composer-tuning-defaults { grid-template-columns: 1fr 1fr; }
  .composer-tuning-defaults .composer-force-row { grid-column: 1 / -1; }
}
.composer-tuning-steps {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}

/* Attachment chips under the drop zone (right column) */
.composer-attach-list { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.composer-attach {
  display: grid;
  grid-template-columns: 24px 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.composer-attach[data-status="error"] {
  border-color: color-mix(in oklch, var(--bad) 40%, var(--line));
  background: color-mix(in oklch, var(--bad) 6%, var(--surface));
}
.composer-attach[data-status="error"] .composer-attach-ico { color: var(--bad); }
.composer-attach[data-status="error"] .composer-attach-meta { color: var(--bad); }
.composer-attach-spinner {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--ink-3);
  animation: composer-att-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .composer-attach-spinner { animation-duration: 2s; }
}
@keyframes composer-att-spin { to { transform: rotate(360deg); } }
.composer-attach-folder {
  padding: 1px 7px;
  border: 1px solid var(--line);
  background: var(--bg-sunk);
  border-radius: var(--r-pill);
  font: 10.5px var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.composer-attach-folder:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.composer-attach-folder:disabled { opacity: 0.5; cursor: default; }
.composer-attach-ico {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--r-1);
  background: var(--bg-sunk);
  color: var(--ink-3);
}
.composer-attach-ico svg { width: 13px; height: 13px; }
.composer-attach-name {
  font: 500 12.5px var(--font-sans);
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.composer-attach-meta { font: 10.5px var(--font-mono); color: var(--ink-4); letter-spacing: 0.03em; }
.composer-attach-remove {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  padding: 0; margin: 0;
  border: none; background: transparent;
  border-radius: var(--r-1);
  color: var(--ink-4); cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.composer-attach-remove svg { width: 12px; height: 12px; }
.composer-attach-remove:hover { background: var(--bg-sunk); color: var(--ink); }
.composer-tuning-note {
  margin: 0;
  font: 12px/1.5 var(--font-sans);
  color: var(--ink-3);
}

/* Project + repo selectors */
.composer-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 var(--s-2) 0 var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font: 500 13px var(--font-sans);
  color: var(--ink);
  cursor: pointer;
}
.composer-select svg { width: 12px; height: 12px; color: var(--ink-3); }
.composer-select:hover { border-color: var(--line-2); }

/* Repo picker toolbar — search + bulk select/clear keep long lists manageable */
.composer-repos-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.composer-repos-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 8px 0 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  color: var(--ink-3);
  transition: border-color .12s;
}
.composer-repos-search:focus-within { border-color: var(--ink-3); }
.composer-repos-search svg { width: 14px; height: 14px; flex: none; }
.composer-repos-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: 12.5px var(--font-sans);
  color: var(--ink);
  outline: none;
}
.composer-repos-search-input::-moz-placeholder { color: var(--ink-4); }
.composer-repos-search-input::placeholder { color: var(--ink-4); }
.composer-repos-search-clear {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  padding: 0; border: 0; background: transparent;
  border-radius: var(--r-1);
  color: var(--ink-4); cursor: pointer;
}
.composer-repos-search-clear svg { width: 12px; height: 12px; }
.composer-repos-search-clear:hover { background: var(--bg-sunk); color: var(--ink); }
.composer-repos-bulk {
  flex: none;
  height: 32px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font: 500 11.5px var(--font-sans);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.composer-repos-bulk:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.composer-repos-bulk:disabled { opacity: 0.45; cursor: default; }

/* Capped, scrollable list so 12+ repos never dominate the composer */
.composer-repos-scroll {
  max-height: 198px;
  overflow-y: auto;
  padding: 2px;
  margin: -2px;
}

/* Prettier repo selection — pill rows w/ checkmark */
.composer-repos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
}
.composer-repos-count {
  margin-left: 6px;
  padding: 1px 7px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font: 500 10px var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: none;
}
.composer-repo {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 12px 0 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font: 500 12.5px var(--font-mono);
  color: var(--ink-3);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.composer-repo:hover { border-color: var(--line-2); color: var(--ink); }
.composer-repo-check {
  width: 18px; height: 18px;
  border-radius: var(--r-1);
  background: var(--bg-sunk);
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.composer-repo-check svg { width: 12px; height: 12px; }
.composer-repo-name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-repo.on {
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  border-color: color-mix(in oklch, var(--accent) 28%, transparent);
  color: var(--ink);
}
.composer-repo.on .composer-repo-check {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* Footer */
.composer-foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-sunk);
  border-top: 1px solid var(--line);
}
.composer-foot-hint {
  flex: 1;
  font: 11px var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.composer-foot-actions { display: flex; gap: var(--s-2); }

/* ---------- 03 Queue cards ---------- */
.queue-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
}
.queue-head-title {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.queue-head-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font: 500 11px var(--font-mono);
  color: var(--ink-2);
}
.queue-head-summary {
  margin-left: auto;
  font: 11px var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.qcard-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.qcard {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: var(--s-3);
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  overflow: hidden;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.qcard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--line-3);
}
.qcard:hover { transform: translateY(-1px); border-color: var(--line-2); box-shadow: var(--shadow-1); }

.qcard-grip {
  align-self: center;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  color: var(--ink-4);
  cursor: default;
}
.qcard:hover .qcard-grip { color: var(--ink-3); }

.qcard-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qcard-row1 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 11px var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.qcard-row1-time { margin-left: auto; color: var(--ink-4); }
.qcard-id { color: var(--ink-3); }
.qcard-title {
  font: 500 14px/1.35 var(--font-sans);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qcard-headline {
  font: 13px/1.45 var(--font-sans);
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qcard-meta {
  display: flex;
  gap: var(--s-3);
  font: 10.5px var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.qcard-meta span:empty { display: none; }

.qcard-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-left: var(--s-2);
  border-left: 1px dashed var(--line-2);
  margin-left: var(--s-1);
}
.qcard-pos {
  font: 600 13px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* Refined remove button — ghost icon with red-on-hover affordance */
.qcard-remove {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-4);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.qcard-remove svg { width: 14px; height: 14px; }
.qcard-remove:hover {
  background: color-mix(in oklch, var(--bad) 8%, var(--surface));
  border-color: color-mix(in oklch, var(--bad) 28%, transparent);
  color: var(--bad);
}
.qcard-remove:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; }

/* Reduce-motion guard for transform/transition */
@media (prefers-reduced-motion: reduce) {
  .qcard, .qcard-remove { transition: none !important; }
}

/* ---------- 04 Empty queue (reassuring, no CTA) ---------- */
.queue-empty {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  border: 1px dashed var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
}
.queue-empty-glyph {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--good) 12%, var(--surface));
  color: var(--good);
  flex-shrink: 0;
}
.queue-empty-glyph svg { width: 16px; height: 16px; }
.queue-empty-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.queue-empty-title { font: 500 13px var(--font-sans); color: var(--ink-2); }
.queue-empty-sub { font: 12px var(--font-sans); color: var(--ink-3); }

/* ---------- 05 Archive row ---------- */
.arch-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
}
.arch-head-title {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.arch-head-count {
  font: 11px var(--font-mono);
  color: var(--ink-4);
}

.arch-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.arch-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 3px var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.arch-empty { padding: var(--s-4); font-size: 13px; color: var(--ink-3); }
.arch-row:first-child { border-top: 0; }
.arch-row:hover { background: color-mix(in oklch, var(--ink) 4%, var(--surface)); }
/* Leading worker avatar — who completed the task */
.arch-row-lead { display: inline-flex; align-items: center; justify-content: center; }
.arch-row-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 11px var(--font-mono);
  color: #fff;
  background: var(--ink-3);
  text-transform: uppercase;
}
.arch-row-lead--none {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px dashed var(--line-3, var(--line-2));
}
.arch-row-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.arch-row-title {
  font: 500 14px/1.3 var(--font-sans);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arch-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font: 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.arch-row-id { color: var(--ink-3); }
.arch-row-by { color: var(--ink-3); }
.arch-row-by--none { font-style: italic; color: var(--ink-4); }
.arch-row-time { color: var(--ink-4); }
/* Released time as its own right-aligned column (desktop only) */
.arch-row-released { display: none; }
.arch-row-chevron {
  width: 18px; height: 18px;
  color: var(--ink-4);
  display: inline-flex; align-items: center; justify-content: center;
}
.arch-row:hover .arch-row-chevron { color: var(--ink-2); }
.arch-status { display: none; }
@container (min-width: 768px) {
  .arch-row { grid-template-columns: auto 1fr auto auto; }
  .arch-row-released {
    display: inline-block;
    font: 10.5px var(--font-mono);
    letter-spacing: 0.04em;
    color: var(--ink-4);
    white-space: nowrap;
    text-align: right;
  }
  .arch-row-meta-mobileonly { display: none; }
  .arch-row-type-inline { display: none; }
}
@container (max-width: 767px) {
  .arch-row-status-col { display: none; }
}

/* ---------- Slide-over chrome (shared) ---------- */
.slide-head {
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg, var(--surface-raised), var(--surface) 80%);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.slide-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.slide-breadcrumb b { color: var(--ink); font-weight: 500; }
.slide-breadcrumb-actions { margin-left: auto; display: flex; gap: 4px; }
.slide-iconbtn {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  cursor: pointer;
}
.slide-iconbtn svg { width: 14px; height: 14px; }

.slide-status-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.slide-pos {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font: 500 11px var(--font-mono);
  color: var(--ink-2);
}

.slide-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: 600 18px/1.3 var(--font-display);
  letter-spacing: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slide-title--muted { opacity: 0.5; }
.slide-meta {
  font: 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* Stat row (shared across slide-overs) */
.slide-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: 4px;
}
.slide-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.slide-stat-label {
  font: 10px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.slide-stat-value {
  font: 500 13px var(--font-sans);
  color: var(--ink);
}

/* Body + footer */
.slide-body {
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.queue-attachments-section {
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line-2);
}
.task-delete-copy {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
}
.divider-dashed {
  border: 0;
  border-top: 1px dashed var(--line-2);
  margin: 0;
}

/* Queue text block (replaces arch-doc for queue inputs) */
.queue-text-block {
  background: var(--bg-sunk);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: 14px 16px;
  font: 13.5px/1.65 var(--font-sans);
  color: var(--ink-2);
  white-space: pre-wrap;
}
@container (max-width: 479px) {
  .queue-text-block { padding: 12px 14px; }
}

/* ── Queued slide-over: Scope / Tuning configuration ───────── */
.slide-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.slide-config-seg { flex: none; }
.slide-config-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.slide-config-panel[hidden] { display: none; }

.slide-config-block { display: flex; flex-direction: column; gap: 8px; }
.slide-config-sublabel {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.slide-config-count {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-sunk);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  letter-spacing: 0;
}
.slide-config-note {
  margin: 0;
  font: 12.5px/1.55 var(--font-sans);
  color: var(--ink-3);
}

/* Key/value rows */
.slide-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.slide-kv-grid {
  display: grid;
  gap: 0;
}
.slide-kv-grid .slide-kv:last-child { border-bottom: 0; }
.slide-kv-label {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.slide-kv-value {
  font: 13.5px var(--font-sans);
  color: var(--ink);
}

/* Repository rows */
.slide-repos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@container (max-width: 479px) {
  .slide-repos { grid-template-columns: 1fr; }
}
.slide-repo {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
  border-radius: var(--r-2);
}
.slide-repo-check {
  width: 18px; height: 18px;
  border-radius: var(--r-1);
  background: var(--ink);
  color: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.slide-repo-check svg { width: 12px; height: 12px; }
.slide-repo-name {
  font: 12.5px var(--font-mono);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Default / Custom badge on the tuning panel */
.slide-tuning-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font: 500 11px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.slide-tuning-badge--default {
  background: var(--bg-sunk);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.slide-tuning-badge--custom {
  background: color-mix(in oklch, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--accent) 36%, transparent);
  color: color-mix(in oklch, var(--accent) 88%, var(--ink));
}

/* Per-step override list on the tuning panel */
.slide-tuning-steps {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.slide-tuning-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 9px 12px;
  border-top: 1px solid var(--line);
}
.slide-tuning-step:first-child { border-top: 0; }
.slide-tuning-step-name {
  font: 500 12.5px var(--font-sans);
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slide-tuning-step-cfg {
  flex: none;
  font: 10.5px var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--ink-3);
}


/* Pill row for "related projects" etc */
.slide-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.slide-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font: 500 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* Attachment folder groups (design/ vs assets/) */
.slide-file-group { margin-top: var(--s-3); }
.slide-file-group:first-of-type { margin-top: var(--s-2); }
.slide-file-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.slide-file-folder {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font: 600 10px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.slide-file-folder[data-folder="design"] {
  background: color-mix(in oklch, var(--stage-design) 16%, var(--surface));
  border-color: color-mix(in oklch, var(--stage-design) 30%, transparent);
  color: var(--stage-design);
}
.slide-file-folder[data-folder="assets"] {
  background: color-mix(in oklch, var(--info) 14%, var(--surface));
  border-color: color-mix(in oklch, var(--info) 28%, transparent);
  color: var(--info);
}
.slide-file-folder-path { font: 11px var(--font-mono); color: var(--ink-3); letter-spacing: 0.02em; }
.slide-file-group-count {
  margin-left: auto;
  font: 500 11px var(--font-mono);
  color: var(--ink-4);
}

/* Compact file list inside a slide-over body */
.slide-files {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.slide-file {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  gap: var(--s-3);
  align-items: center;
  width: 100%;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.slide-file:first-of-type { border-top: 0; }
.slide-file:hover { background: color-mix(in oklch, var(--ink) 4%, var(--surface)); }
.slide-file:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.slide-file-download { text-decoration: none; }
/* No file-size column — the reference row is just icon, body, open-affordance. */
.research-reference-file { grid-template-columns: 24px minmax(0, 1fr) auto; border-top: 0; text-decoration: none; }
.slide-file-icon {
  width: 24px; height: 24px;
  border-radius: var(--r-1);
  display: grid;
  place-items: center;
  font: 600 10px var(--font-mono);
  text-transform: uppercase;
  flex-shrink: 0;
}
.slide-file-icon[data-kind="md"]    { background: color-mix(in oklch, var(--accent) 14%, var(--surface)); color: var(--accent); }
.slide-file-icon[data-kind="figma"] { background: color-mix(in oklch, var(--stage-design) 18%, var(--surface)); color: var(--stage-design); }
.slide-file-icon[data-kind="pdf"]   { background: color-mix(in oklch, var(--bad) 14%, var(--surface)); color: var(--bad); }
.slide-file-icon[data-kind="image"] { background: color-mix(in oklch, var(--info) 14%, var(--surface)); color: var(--info); }
.slide-file-icon[data-kind="zip"]   { background: var(--bg-sunk); color: var(--ink-3); }
.slide-file-icon[data-kind="file"]  { background: var(--bg-sunk); color: var(--ink-3); }
.slide-file-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.slide-file-name {
  font: 500 13px var(--font-sans);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slide-file-path {
  font: 10.5px var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slide-file-size {
  font: 10.5px var(--font-mono);
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}
/* Row-end affordance: an "open" chevron on navigation rows (research
   references) and a download button on attachment rows. */
.slide-file-open,
.slide-file-download {
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.slide-file-open:hover,
.slide-file-download:hover { color: var(--ink); border-color: var(--line-2); }
.slide-file-open svg,
.slide-file-download svg { width: 12px; height: 12px; display: block; }

@container (max-width: 419px) {
  .slide-file { grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s-2); }
  .slide-file-size { display: none; }
}

/* Attachment preview modal (uses the reusable Modal component) */
.file-modal-bar { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.file-modal-name {
  font: 600 14px var(--font-sans);
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-preview { display: flex; align-items: center; justify-content: center; }
.file-preview-img {
  max-width: 100%;
  max-height: 64vh;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--bg-sunk);
  -o-object-fit: contain;
     object-fit: contain;
}
.file-preview-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--s-5) var(--s-4);
  text-align: center;
}
.file-preview-glyph {
  width: 56px; height: 56px;
  border-radius: var(--r-2);
  display: grid; place-items: center;
  font: 700 18px var(--font-mono);
  text-transform: uppercase;
  background: var(--bg-sunk);
  color: var(--ink-3);
}
.file-preview-glyph[data-kind="md"]    { background: color-mix(in oklch, var(--accent) 14%, var(--surface)); color: var(--accent); }
.file-preview-glyph[data-kind="pdf"]   { background: color-mix(in oklch, var(--bad) 14%, var(--surface)); color: var(--bad); }
.file-preview-glyph[data-kind="figma"] { background: color-mix(in oklch, var(--stage-design) 18%, var(--surface)); color: var(--stage-design); }
.file-preview-name { font: 600 14px var(--font-sans); color: var(--ink); word-break: break-word; }
.file-preview-meta { font: 11px var(--font-mono); color: var(--ink-3); }
.file-preview-note { margin: 6px 0 0; font: 12.5px/1.5 var(--font-sans); color: var(--ink-3); max-width: 340px; }

/* ============================================================
   Tuning editor (replaces the toggle + per-step grid pattern)
   Used inside the composer; also previewed in the queue slide-over.
   ============================================================ */
.tuning {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tuning-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.tuning-head-title {
  font: 600 13px var(--font-sans);
  color: var(--ink);
}
.tuning-head-sub {
  font: 11px var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.tuning-head-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: 11px var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tuning-switch {
  position: relative;
  width: 30px;
  height: 18px;
  background: var(--line-2);
  border-radius: var(--r-pill);
  transition: background .15s;
}
.tuning-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--bg);
  border-radius: 50%;
  transition: left .15s;
  box-shadow: var(--shadow-1);
}
.tuning[data-overrides="true"] .tuning-switch { background: var(--ink); }
.tuning[data-overrides="true"] .tuning-switch::after { left: 14px; }

.tuning-defaults {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunk);
}
@container (min-width: 520px) {
  .tuning-defaults { grid-template-columns: repeat(3, minmax(0, 1fr)) 108px; gap: var(--s-3); }
  .tuning-defaults .tuning-force-row { grid-column: 1 / -1; }
}
.tuning-defaults .tuning-lock-toggle { height: 36px; }

/* ============================================================
   Reusable checkbox (force_agent etc.) — update-v2 §6
   ============================================================ */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.check-box {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  border: 1px solid var(--line-3);
  border-radius: 5px;
  background: var(--surface);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background .1s, border-color .1s;
}
.check-box svg { width: 11px; height: 11px; }
.check-box.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.check-row:hover .check-box:not(.is-on) { border-color: var(--ink-4); }
.check-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check-label { font: 500 13px var(--font-sans); color: var(--ink-2); }
.check-hint { font: 12px/1.5 var(--font-sans); color: var(--ink-3); }

/* Mini variant — per-step force toggle */
.check-row--mini { align-items: center; gap: 5px; }
.check-row--mini .check-box { width: 15px; height: 15px; border-radius: 4px; margin-top: 0; }
.check-row--mini .check-box svg { width: 9px; height: 9px; }
.check-label-mini {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tuning-force-row {
  padding-top: var(--s-2);
  margin-top: 2px;
  border-top: 1px solid var(--line-2);
}
@container (max-width: 479px) {
  .tuning-step .check-row--mini { justify-self: start; }
}
.tuning-field { display: flex; flex-direction: column; gap: 4px; }
.tuning-field-label {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tuning-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 var(--s-2) 0 var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font: 500 12.5px var(--font-mono);
  color: var(--ink);
  cursor: pointer;
}
.tuning-select svg { width: 12px; height: 12px; color: var(--ink-3); }
.tuning-select:hover { border-color: var(--line-2); }
.tuning-select-hint {
  font: 10.5px var(--font-mono);
  color: var(--ink-4);
  letter-spacing: 0.04em;
  padding-top: 2px;
}

/* Per-step overrides */
.tuning-overrides-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) 6px;
}
.tuning-overrides-title {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tuning-overrides-count {
  font: 10.5px var(--font-mono);
  color: var(--ink-4);
}
.tuning-overrides-reset {
  margin-left: auto;
  font: 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.tuning-overrides-reset:hover { color: var(--ink); }
.tuning-overrides-reset[disabled] { opacity: 0.4; pointer-events: none; }

/* Empty state when the backend hasn't published a step catalogue yet. */
.tuning-empty {
  margin: 0;
  padding: var(--s-4) var(--s-3);
  font-size: 13px;
  color: var(--ink-3);
}

.tuning-stages {
  display: flex;
  flex-direction: column;
}
.tuning-stage {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--line-2);
}
.tuning-stage:last-child { border-bottom: none; }
.tuning-stage-head {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
/* Row grid matches the System-page accordion rows */
.tuning-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  box-sizing: border-box;
  padding: 10px var(--s-4);
  min-height: 52px;
  transition: background .12s;
}
.tuning-stage-head:hover .tuning-stage-grid {
  background: color-mix(in oklch, var(--ink) 3%, var(--surface));
}
.tuning-stage-main {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.tuning-stage-dot {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--stage-c, var(--ink-4));
}
.tuning-stage-text { min-width: 0; }
.tuning-stage-name {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tuning-stage-sub {
  font: 500 11px var(--font-mono);
  color: var(--ink-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tuning-stage-summary {
  font: 11px var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tuning-stage-summary--customised { color: var(--accent); }
.tuning-stage-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  color: var(--ink-4);
  transition: transform .16s ease;
}
.tuning-stage:not([data-open="true"]) .tuning-stage-caret { transform: rotate(-90deg); }
.tuning-stage-head:hover .tuning-stage-caret { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .tuning-stage-caret { transition: none; } }

.tuning-step-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-sunk);
  border-top: 1px solid var(--line);
}
.tuning-step {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px var(--s-3) 12px var(--s-3);
  border-top: 1px solid var(--line);
}
.tuning-step:first-child { border-top: 0; }
.tuning-step-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.tuning-step-name {
  flex: 1;
  min-width: 0;
  font: 12.5px var(--font-sans);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tuning-step[data-customised="true"] .tuning-step-name { color: var(--ink); font-weight: 500; }
.tuning-step[data-customised="true"] {
  background: color-mix(in oklch, var(--accent) 5%, var(--bg-sunk));
}
.tuning-step-state {
  font: 500 9.5px var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.tuning-step[data-customised="true"] .tuning-step-state {
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 35%, transparent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
/* Tuning tab inside a slide-over (task / archive / queue). The panel reuses the
   composer's `mode="task"` layout, so this only supplies the surrounding pad,
   the explanatory note and the footer row. */
.task-tuning {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
}
.task-tuning-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.task-tuning-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
}
.task-tuning-foot-hint {
  flex: 1;
  min-width: 0;
  font: 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.tuning-defaults[data-readonly="true"],
.composer-tuning-defaults[data-readonly="true"] {
  opacity: 0.65;
}
.tuning-step-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 108px;
  align-items: end;
  gap: 8px var(--s-3);
}
.tuning-dd-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.tuning-dd-field-label {
  font: 10px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.tuning-dd { position: relative; }
.tuning-dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 30px;
  padding: 0 9px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  font: 11.5px var(--font-mono);
  color: var(--ink);
  cursor: pointer;
}
.tuning-dd-btn:hover { border-color: var(--ink-4); }
.tuning-dd-btn svg { width: 11px; height: 11px; color: var(--ink-3); flex: none; transition: transform 0.15s; }
.tuning-dd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuning-dd.is-open .tuning-dd-btn { border-color: var(--accent); }
.tuning-dd.is-open .tuning-dd-btn svg { transform: rotate(180deg); }
.tuning-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  z-index: 50;
}
.tuning-dd.is-open .tuning-dd-menu { display: flex; }
.tuning-dd-opt {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 7px 9px;
  border-radius: var(--r-1);
  font: 11.5px var(--font-mono);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.tuning-dd-opt:hover { background: var(--bg-sunk); color: var(--ink); }
.tuning-dd-opt.is-sel { color: var(--accent); }
.tuning-step-controls .check-row--mini {
  height: 30px;
  align-self: end;
  padding-bottom: 0;
}

/* Per-step "lock to agent" toggle — a labeled field that lines up with the
   three dropdowns above it (label on top, 30px control below). */
.tuning-lock-field { min-width: 0; }
.tuning-lock-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  font: 500 11px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.tuning-lock-toggle:hover { border-color: var(--ink-4); color: var(--ink-2); }
.tuning-lock-icon { display: inline-flex; }
.tuning-lock-icon svg { width: 13px; height: 13px; }
.tuning-lock-toggle.is-on {
  background: color-mix(in oklch, var(--accent) 10%, var(--surface));
  border-color: color-mix(in oklch, var(--accent) 45%, transparent);
  color: var(--accent);
}
.tuning-step-revert {
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink-4);
  border-radius: var(--r-pill);
  cursor: pointer;
  flex: none;
}
.tuning-step-revert:hover { color: var(--bad); background: var(--bg-sunk); }
.tuning-step-revert svg { width: 12px; height: 12px; }
.tuning-step[data-customised="false"] .tuning-step-revert { display: none; }

@container (max-width: 519px) {
  .tuning-step-controls {
    grid-template-columns: 1fr 1fr;
  }
  .tuning-step-controls .check-row--mini { grid-column: 1 / -1; height: auto; }
}
.tuning-card-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s-3);
  padding: 8px var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.tuning-card-row:first-child { border-top: 0; }
.tuning-card-label {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: center;
}
.tuning-card-value {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
}

.slide-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--bg-sunk);
  min-height: 64px;
}
.slide-foot .btn-ghost, .slide-foot .btn-danger { height: 40px; }
@container (max-width: 479px) {
  .slide-foot { flex-direction: column-reverse; align-items: stretch; }
  .slide-foot .btn-ghost, .slide-foot .btn-danger { width: 100%; height: 44px; }
}

/* ---------- Archive slide-over header skeleton (16) ---------- */
.slide-tabs-skel {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line);
  height: 44px;
}
.slide-tabs-skel-active {
  font: 500 13px var(--font-sans);
  color: var(--ink);
  height: 100%;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid var(--accent);
  margin-bottom: -1px;
}
.slide-body-skel {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.slide-skel-bar {
  height: 12px;
  border-radius: var(--r-1);
  background: linear-gradient(90deg, var(--bg-sunk) 0%, var(--surface) 50%, var(--bg-sunk) 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s linear infinite;
}
.slide-skel-bar[data-w="90"] { width: 90%; }
.slide-skel-bar[data-w="75"] { width: 75%; }
.slide-skel-bar[data-w="60"] { width: 60%; }
.slide-skel-bar[data-w="45"] { width: 45%; }
@media (prefers-reduced-motion: reduce) {
  .slide-skel-bar { animation: none; }
}
@keyframes sk-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ---------- ArchiveView page ---------- */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding-bottom: var(--s-3);
}
.page-breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px 0 4px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  text-decoration: none;
}
.page-breadcrumb-back:hover { background: var(--surface); color: var(--ink); }
.page-breadcrumb-sep { color: var(--ink-4); }
.page-breadcrumb-current { color: var(--ink); }
@container (max-width: 479px) {
  .page-breadcrumb-back { height: 44px; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.card-head h2 {
  margin: 0;
  font: 600 16px/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.h2-sub {
  font: 11px var(--font-mono);
  color: var(--ink-3);
  letter-spacing: 0.06em;
}

.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 44px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  font: 500 12px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
}
.load-more:hover { background: var(--bg-sunk); color: var(--ink); }
.load-more-count { color: var(--ink-4); font-weight: 400; }
/* ============================================================
   system.css — System Page v6 component styles, ported verbatim
   from the design (DesignSync "Delivery v6" → system-mockups.css).
   All values reference tokens.css. Prefix: .sy-* for system classes.

   Additions over the raw design file (clearly marked at the end):
   - .form-* form classes the design's slide-over forms reference
     (the design assumed these were globally available; the app never
     shipped them, so they're defined here).
   - .sy-so wrapper neutralizers so the design's .sy-so-head/-body/-foot
     drop into the shared <SlideOver> shell slots cleanly (mirrors the
     .slide-head pattern in tasks.css).
   ============================================================ */

/* ---- Accordion ---- */
.sy-accordion {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  margin-bottom: var(--s-2);
  box-shadow: var(--shadow-1);
}
.sy-accordion:last-child { margin-bottom: 0; }

.sy-acc-head-row {
  display: flex;
  align-items: center;
  transition: background .1s;
}
.sy-acc-head-row:hover { background: var(--surface-raised); }

.sy-acc-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.sy-acc-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-sunk);
  color: var(--ink-3);
}

.sy-acc-caret {
  color: var(--ink-4);
  flex-shrink: 0;
}

.sy-acc-titles {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.sy-acc-title {
  font-size: 13px;
  font-weight: 600;
  display: block;
  letter-spacing: -0.005em;
}
.sy-acc-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  display: block;
  margin-top: 1px;
}

.sy-count-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-3);
  flex-shrink: 0;
  white-space: nowrap;
}

.sy-acc-action {
  padding: 0 var(--s-3);
  flex-shrink: 0;
}

.sy-acc-body {
  border-top: 1px solid var(--line-2);
}

/* ---- List rows ---- */
.sy-list { padding: 0; }

.sy-row {
  display: flex;
  align-items: center;
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line-2);
  transition: background .12s;
  min-height: 52px;
}
.sy-row:last-child { border-bottom: none; }
.sy-row:hover { background: color-mix(in oklch, var(--ink) 3%, var(--surface)); }
/* Hovering an action button inside a row (e.g. Manage/Delete) should only
   highlight the button itself, not read as if the whole row is targeted. */
.sy-row:hover:has(.sy-remote-acts:hover) { background: transparent; }
.sy-row--machine { cursor: pointer; }
.sy-row--worker { cursor: pointer; }
.sy-row--remote { cursor: pointer; }
.sy-row-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  opacity: .5;
  transition: opacity .12s ease, transform .12s ease;
}
.sy-row--machine:hover .sy-row-chevron { opacity: .9; transform: translateX(2px); }
.sy-row--worker:hover .sy-row-chevron { opacity: .9; transform: translateX(2px); }
.sy-row--remote:hover .sy-row-chevron { opacity: .9; transform: translateX(2px); }
.sy-repo-row:hover .sy-row-chevron { opacity: .9; transform: translateX(2px); }

/* ---- Unified entity row (machines + workers share one layout) ---- */
.sy-entity-grid {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
}
.sy-entity-lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sy-row-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ---- Status dots ---- */
.sy-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
  display: inline-block;
  position: relative;
}
.sy-dot.live  { background: var(--good); }
.sy-dot.bad   { background: var(--bad); }
.sy-dot.warn  { background: var(--warn); }

@media (prefers-reduced-motion: no-preference) {
  .sy-dot.live::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--good);
    animation: sy-pulse 2.2s ease-in-out infinite;
  }
  @keyframes sy-pulse {
    0%,100% { opacity: 0; transform: scale(.8); }
    50%      { opacity: .3; transform: scale(1.6); }
  }
}

/* ---- Pills ---- */
.sy-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: nowrap;
  background: transparent;
  font-weight: 500;
}
.sy-pill.mono { font-family: var(--font-mono); font-size: 11px; }
.sy-pill.sm   { font-size: 10.5px; padding: 1px 6px; }

.sy-pill.running { color: var(--good); border-color: color-mix(in oklch, var(--good) 40%, var(--line)); background: color-mix(in oklch, var(--good) 10%, var(--surface)); }
.sy-pill.paused  { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 40%, var(--line)); background: color-mix(in oklch, var(--warn) 10%, var(--surface)); }
.sy-pill.stopped { color: var(--bad);  border-color: color-mix(in oklch, var(--bad)  40%, var(--line)); background: color-mix(in oklch, var(--bad)  10%, var(--surface)); }
.sy-pill.good    { color: var(--good); border-color: color-mix(in oklch, var(--good) 40%, var(--line)); background: color-mix(in oklch, var(--good) 10%, var(--surface)); }
.sy-pill.warn    { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 40%, var(--line)); background: color-mix(in oklch, var(--warn) 10%, var(--surface)); }
.sy-pill.bad     { color: var(--bad);  border-color: color-mix(in oklch, var(--bad)  40%, var(--line)); background: color-mix(in oklch, var(--bad)  10%, var(--surface)); }
.sy-pill.info    { color: var(--info); border-color: color-mix(in oklch, var(--info) 40%, var(--line)); background: color-mix(in oklch, var(--info) 10%, var(--surface)); }
.sy-pill.idle    { color: var(--ink-3); border-color: var(--line); background: var(--surface); }

.sy-pill.rm {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sy-pill.rm:hover {
  border-color: color-mix(in oklch, var(--bad) 40%, var(--line));
  background: color-mix(in oklch, var(--bad) 10%, var(--surface));
  color: var(--bad);
}

/* ---- Buttons ---- */
.sy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font: 500 12px var(--font-sans);
  padding: 0 10px;
  height: 28px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.005em;
}
.sy-btn.sm { height: 24px; font-size: 11px; padding: 0 8px; }
.sy-btn.danger  { color: var(--bad);  border-color: color-mix(in oklch, var(--bad)  40%, var(--line)); }
.sy-btn.danger.fill { background: var(--bad); color: var(--surface); border-color: var(--bad); }
.sy-btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.sy-btn.accent  { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.sy-btn.ghost   { background: transparent; }
.sy-btn:disabled { opacity: .38; cursor: not-allowed; }
.sy-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
  opacity: .7;
}
.sy-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  border-top-color: var(--ink-3);
  border-radius: 50%;
  animation: cmp-spin .6s linear infinite;
}
.sy-btn.primary.is-loading::after,
.sy-btn.accent.is-loading::after,
.sy-btn.danger.fill.is-loading::after { border-top-color: var(--surface); }
@keyframes cmp-spin { to { transform: rotate(360deg); } }
.sy-btn:hover:not(:disabled) { background: var(--surface-raised); }
.sy-btn.accent:hover:not(:disabled) { background: color-mix(in oklch, var(--accent) 88%, #000); }
.sy-btn.primary:hover:not(:disabled) { background: color-mix(in oklch, var(--ink) 88%, transparent); }
.sy-btn.danger:hover:not(:disabled) { background: color-mix(in oklch, var(--bad) 10%, var(--surface)); }
.sy-btn:focus-visible { outline: 2px solid color-mix(in oklch, var(--accent) 45%, transparent); outline-offset: 1px; }
.sy-btn-hint {
  font: 10.5px var(--font-sans);
  color: var(--ink-3);
  margin-top: 2px;
  display: block;
  text-align: right;
}

/* ---- Segmented control ---- */
.sy-seg {
  position: relative;
  display: inline-flex;
  background: var(--bg-sunk);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: 3px;
  gap: 3px;
}
.sy-seg-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  height: 30px;
  font: 500 12px var(--font-sans);
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .14s, color .14s;
}
.sy-seg:not(.sy-provider-seg) .sy-seg-btn { flex: 1; }
.sy-seg-btn svg { width: 13px; height: 13px; }
.sy-seg-btn:hover:not(.on):not(:disabled) { color: var(--ink); }
.sy-seg-btn.on { background: var(--ink); color: var(--bg); box-shadow: var(--shadow-1); }
.sy-seg-btn.stop.on { background: var(--bad); color: var(--surface); }
.sy-seg-btn:disabled { cursor: not-allowed; opacity: .45; }
.sy-seg-btn.is-loading { color: transparent; pointer-events: none; }
.sy-seg-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  border-top-color: var(--ink-3);
  border-radius: 50%;
  animation: cmp-spin .6s linear infinite;
}
.sy-seg-btn.on.is-loading::after { border-top-color: var(--bg); }

/* Provider tab strip in repo SO */
.sy-provider-seg {
  display: flex;
  width: 100%;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 3px;
  gap: 2px;
  box-sizing: border-box;
}
.sy-provider-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: calc(var(--r-2) - 2px);
  font: 500 12px var(--font-sans);
  color: var(--ink-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
  height: auto;
}
.sy-provider-btn:hover:not(:disabled) {
  color: var(--ink);
  background: color-mix(in oklch, var(--surface) 60%, transparent);
}
.sy-provider-btn.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.sy-provider-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.sy-provider-soon {
  font: 500 8.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 2px;
}

.sy-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 10px var(--font-mono);
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(0, 0, 0, 0.07),
    var(--shadow-1);
}

/* ---- Task status cell ---- */
.sy-task {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 11px var(--font-mono);
  color: var(--ink-3);
  min-width: 0;
  overflow: hidden;
}
.sy-task span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-task.attn { color: var(--warn); }

/* ---- Name / host ---- */
.sy-name {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sy-host {
  font: 500 11px var(--font-mono);
  color: var(--ink-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.sy-repo-url {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  text-decoration: none;
  color: var(--accent);
  cursor: pointer;
}
a.sy-repo-url:hover { text-decoration: underline; }

/* ---- Card ---- */
.sy-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
}
.sy-card.inert { opacity: .45; }
.sy-card + .sy-card { margin-top: var(--s-3); }

/* ---- Controls row (mode + transport side-by-side) ---- */
.sy-ctrl-row {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  flex-wrap: wrap;
}
.sy-ctrl-grp { display: flex; flex-direction: column; gap: 5px; }
.sy-so-body .sy-ctrl-row { flex-wrap: nowrap; }
.sy-so-body .sy-ctrl-grp { flex: 1; min-width: 0; }
.sy-so-body .sy-ctrl-grp .sy-seg { display: flex; }
.sy-eyebrow {
  font: 500 9.5px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- Status banner ---- */
.sy-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  border: 1px solid;
}
.sy-banner.on {
  color: color-mix(in oklch, var(--good) 82%, var(--ink));
  border-color: color-mix(in oklch, var(--good) 30%, var(--line));
  background: color-mix(in oklch, var(--good) 10%, var(--surface));
}
.sy-banner.off {
  color: color-mix(in oklch, var(--bad) 80%, var(--ink));
  border-color: color-mix(in oklch, var(--bad) 30%, var(--line));
  background: color-mix(in oklch, var(--bad) 10%, var(--surface));
}
.sy-banner.warn {
  color: color-mix(in oklch, var(--warn) 82%, var(--ink));
  border-color: color-mix(in oklch, var(--warn) 30%, var(--line));
  background: color-mix(in oklch, var(--warn) 10%, var(--surface));
}
.sy-banner-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sy-banner.on   .sy-banner-dot { background: var(--good); }
.sy-banner.off  .sy-banner-dot { background: var(--bad); }
.sy-banner.warn .sy-banner-dot { background: var(--warn); }

/* ---- Danger card ---- */
.sy-danger {
  background: color-mix(in oklch, var(--bad) 10%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--bad) 24%, transparent);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
}
.sy-danger-title {
  font-size: 12.5px;
  font-weight: 600;
  color: color-mix(in oklch, var(--bad) 80%, var(--ink));
  margin-bottom: 2px;
}
.sy-danger-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
  line-height: 1.5;
}

/* ---- Dividers ---- */
.sy-divider { height: 1px; background: var(--line-2); border: 0; margin: 0 var(--s-4); }

.sy-zone {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-1) 0;
}
.sy-zone-line  { flex: 1; height: 1px; background: color-mix(in oklch, var(--warn) 30%, var(--line)); }
.sy-zone-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 9px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--warn);
}

/* ---- Slide-over chrome (head / body / foot) ---- */
.sy-so-head {
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.sy-so-bc {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 10px var(--font-mono);
  color: var(--ink-3);
  margin-bottom: 4px;
  letter-spacing: .04em;
}
.sy-so-bc-sep { opacity: .45; }
.sy-so-titlerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}
.sy-so-title { font-size: 16px; font-weight: 600; letter-spacing: -.012em; margin: 0; }
.sy-so-sub { font: 11px var(--font-mono); color: var(--ink-3); margin-top: 3px; }
.sy-so-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.sy-so-actions { display: flex; align-items: center; gap: 4px; }
.sy-so-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
}
.sy-so-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--s-4);
  min-height: 60px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.sy-so-foot-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- Form section divider inside card ---- */
.sy-card-divider {
  height: 1px;
  background: var(--line-2);
  margin: var(--s-3) 0;
}

/* ---- Colour picker (worker SO) ---- */
.sy-color-picker { display: flex; flex-direction: column; gap: var(--s-2); }
.sy-hex {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 0.5;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke .2s ease, stroke-width .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.sy-hex:hover {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5;
  transform: scale(1.12);
}
.sy-hex.is-sel {
  stroke: #fff;
  stroke-width: 2.5;
  transform: scale(1.22);
}

/* ============================================================
   Per-section identity hue (evenly spaced, matched L/C).
   ============================================================ */
.sy-tone-machines { --sect: oklch(70% 0.13 240); }
.sy-tone-stream   { --sect: oklch(70% 0.13 40);  }
.sy-tone-workers  { --sect: oklch(70% 0.13 300); }
.sy-tone-remotes  { --sect: oklch(70% 0.13 155); }
.sy-tone-access   { --sect: oklch(76% 0.13 75);  }
.sy-tone-agents { --sect: oklch(72% 0.13 200); }
[data-theme="dark"] .sy-tone-machines { --sect: oklch(76% 0.13 240); }
[data-theme="dark"] .sy-tone-stream   { --sect: oklch(78% 0.13 40);  }
[data-theme="dark"] .sy-tone-workers  { --sect: oklch(78% 0.13 300); }
[data-theme="dark"] .sy-tone-remotes  { --sect: oklch(76% 0.13 155); }
[data-theme="dark"] .sy-tone-access   { --sect: oklch(80% 0.13 75);  }
[data-theme="dark"] .sy-tone-agents { --sect: oklch(78% 0.13 200); }

.sy-accordion[class*="sy-tone-"] .sy-acc-icon {
  background: var(--bg-sunk);
  color: var(--ink-3);
}
.sy-accordion[class*="sy-tone-"] .sy-acc-head-row {
  background: color-mix(in oklch, var(--sect) 4.5%, var(--surface));
}
.sy-accordion[class*="sy-tone-"] .sy-acc-head-row:hover {
  background: color-mix(in oklch, var(--sect) 8%, var(--surface));
}
.sy-accordion[class*="sy-tone-"] .sy-count-pill {
  background: color-mix(in oklch, var(--sect) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--sect) 30%, var(--line));
  color: color-mix(in oklch, var(--sect) 66%, var(--ink));
}
.sy-accordion[class*="sy-tone-"] .sy-acc-body {
  border-top-color: color-mix(in oklch, var(--sect) 16%, var(--line-2));
}

/* Status pills: consistent leading status-light dot */
.sy-pill.running::before,
.sy-pill.paused::before,
.sy-pill.stopped::before,
.sy-pill.good::before,
.sy-pill.warn::before,
.sy-pill.bad::before,
.sy-pill.info::before,
.sy-pill.idle::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.sy-row .sy-dot { box-shadow: 0 0 0 3px color-mix(in oklch, var(--bg) 60%, transparent); }

/* ---- Unified rows for repos / access / agents (no repeated lead icon) ---- */
.sy-entity-grid--nolead { grid-template-columns: minmax(0, 1fr) auto 16px; }
/* Agent rows open a slide-over (like machines/workers): name + status + chevron. */
.sy-row--agent { cursor: pointer; }
.sy-row--agent .sy-row-status .sy-pill { justify-self: start; }
.sy-row--agent:hover .sy-row-chevron { opacity: .9; transform: translateX(2px); }

/* Accordion rows (repositories + access) */
.sy-accrow { border-bottom: 1px solid var(--line-2); }
.sy-accrow:last-child { border-bottom: none; }
.sy-accrow-head { cursor: pointer; border-bottom: 0; }
.sy-accrow.open .sy-accrow-head { border-bottom: 1px solid var(--line-2); }
.sy-accrow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
}
.sy-accrow-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  transition: transform .16s ease;
}
.sy-accrow:not(.open) .sy-accrow-caret { transform: rotate(-90deg); }
.sy-accrow-head:hover .sy-accrow-caret { color: var(--ink-2); }
.sy-accrow-body { background: var(--bg-sunk); }
.sy-accrow-canvas {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.sy-stream-allowlist {
  border-top: 1px solid var(--line-2);
  padding-top: var(--s-4);
}
.sy-accrow-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) { .sy-accrow-caret { transition: none; } }

/* Repository tree — nested subtrees get an indent + hairline rail */
.sy-accrow-body > .sy-subtree {
  margin-left: var(--s-5);
  border-left: 1.5px solid var(--line-2);
}
.sy-accrow--proj > .sy-accrow-head .sy-name,
.sy-repo-leaf .sy-name { font-size: 13px; }
.sy-repo-leaf { cursor: pointer; }
.sy-subtree .sy-accrow-head:hover,
.sy-repo-leaf:hover { background: color-mix(in oklch, var(--ink) 3%, var(--surface)); }

/* Device leaves open the stream-device controls and details panel. */
.sy-device-leaf { cursor: pointer; }
.sy-device-leaf .sy-name { font-size: 13px; }
.sy-device-leaf .sy-host { font-family: var(--font-mono); font-size: 11px; }
.sy-device-leaf:hover .sy-row-chevron { opacity: .9; transform: translateX(2px); }

/* Remote-level actions (Discover / Manage / Add) */
.sy-remote-acts { display: inline-flex; align-items: center; gap: 6px; }
.sy-remote-acts .sy-grp-act svg { margin-right: 3px; }
.sy-grp-act {
  display: inline-flex;
  align-items: center;
}

/* Unify every small button in the System area to the Repository-row size */
.sy .sy-btn.sm {
  min-width: 30px;
  height: 30px;
  font-size: 12.5px;
  padding: 0 12px;
}
.sy .sy-btn.sm svg { margin-right: 3px; }
.sy .slide-iconbtn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
}
.sy .sy-seg-btn {
  min-height: 30px;
}
.sy .sy-provider-btn {
  min-height: 30px;
}

/* Slide-over and modal icon buttons / segmented controls are primary dialog
   chrome, not dense row actions — size them to a comfortable tap target
   instead of the System page's row-action size. Scoped to the shared
   SlideOver/Modal shells (slideover-body, slideover-foot, modal-body,
   modal-foot). Ordinary text buttons (Save/Cancel/Delete/Enable, etc.) no
   longer need a rule here: they're <BaseButton> instances now, sized by the
   canonical .btn component itself rather than a per-context .sy-btn override. */
.slideover-body .slide-iconbtn,
.slideover-foot .slide-iconbtn,
.slideover-body .sy-pw-reveal,
.slideover-body .sy-avatar-upload,
.modal-body .slide-iconbtn,
.modal-foot .slide-iconbtn {
  width: 36px;
  height: 36px;
}
.slideover-body .slide-iconbtn,
.slideover-foot .slide-iconbtn,
.slideover-body .sy-pw-reveal,
.slideover-body .sy-avatar-upload,
.slideover-body .sy-repo-proj-del,
.modal-body .slide-iconbtn,
.modal-foot .slide-iconbtn {
  min-width: 36px;
  min-height: 36px;
}
.slideover-body .sy-seg-btn,
.modal-body .sy-seg-btn {
  min-height: 36px;
}
.slideover-body .sy-provider-btn,
.modal-body .sy-provider-btn {
  min-height: 36px;
}

/* ---- Access masked-secret card extras ---- */
.sy-access-warn {
  font: 12px var(--font-sans);
  color: color-mix(in oklch, var(--warn) 70%, var(--ink));
  background: color-mix(in oklch, var(--warn) 10%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--warn) 25%, var(--line));
  border-radius: var(--r-1);
  padding: 7px 10px;
}

/* ── Repository slide-over helpers ── */
.sy-repo-mach-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 11px var(--font-mono);
  color: var(--ink-3);
  background: var(--surface);
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  flex-shrink: 0;
}
.sy-repo-field-note {
  font: 11.5px var(--font-sans);
  color: var(--ink-3);
  line-height: 1.5;
}
.sy-repo-prevbox {
  font: 11px var(--font-mono);
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--bg-sunk);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  padding: 7px 10px;
  word-break: break-all;
}
.sy-repo-prevbox .pv-label {
  display: block;
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 3px;
}
.sy-repo-prevbox .pv-lit { color: var(--ink-3); }
.sy-repo-prevbox .pv-val { color: var(--ink); }
.sy-repo-prevbox .pv-ph  { color: var(--ink-4); }

.sy-repo-proj-add-row { display: flex; align-items: stretch; gap: var(--s-2); margin-bottom: var(--s-2); }
.sy-repo-proj-add-row .form-input { flex: 1; }
.sy-repo-proj-add-row .sy-repo-proj-add { flex-shrink: 0; align-self: stretch; height: auto; padding: 0 16px; }
.sy-repo-proj-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sy-repo-proj-empty { font: 11.5px var(--font-sans); color: var(--ink-4); }
.sy-access-empty,
.sy-empty {
  padding: var(--s-3) var(--s-4) var(--s-4);
  font: 12.5px/1.5 var(--font-sans);
  color: var(--ink-3);
}
.sy-repo-proj-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font: 12px var(--font-mono);
  color: var(--ink);
}
.sy-repo-proj-del {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sy-repo-proj-del:hover { background: var(--line-2); color: var(--ink); }

/* password input w/ show-hide toggle */
.sy-pw-wrap { position: relative; display: flex; }
.sy-pw-wrap .form-input { padding-right: 40px; }
.sy-pw-reveal {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--r-1);
}
.sy-pw-reveal:hover { color: var(--ink); background: var(--surface-raised); }
.sy-pw-reveal svg { width: 15px; height: 15px; }

.field-validation-msg,
.sy-error-msg {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 11px var(--font-mono);
  color: var(--bad);
  margin-top: 3px;
}

/* ============================================================
   ADDITIONS (not in the raw design file)
   ============================================================ */

/* Page frame. The design renders into a .sy container; here it nests in
   the app-page. The design's .sy carries no max-width (the real shell sets
   `max-width: none`), so the page fills the shared .app-page frame — keeping
   section widths identical to Overview / Tasks / Activity / Tuning. */
.sy {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  container-type: inline-size;
  width: 100%;
}

/* Mobile: machine mode hint + worker transport collapse (container query) */
@container (max-width: 479px) {
  .sy-host { white-space: normal; }
}

/* ---- Form classes the design's slide-over forms reference.
   The design assumed .form-field / .form-input / .form-select /
   .form-textarea were globally available; the app never shipped them.
   Defined here token-for-token with the canonical .field / .input set
   so the system forms render correctly. ---- */
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field-label {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
}
.form-field-req {
  color: color-mix(in oklch, var(--bad) 60%, var(--ink-3));
  font-weight: 500;
  margin-left: 2px;
  font-size: 10.5px;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 8px 10px;
  font: 13.5px var(--font-sans);
  color: var(--ink);
}
.form-textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.form-input::-moz-placeholder, .form-textarea::-moz-placeholder { color: var(--ink-4); }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--ink-4); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: 2px solid color-mix(in oklch, var(--accent) 28%, transparent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.form-input.field-invalid { border-color: var(--bad); }
.form-input.field-invalid:focus { outline-color: color-mix(in oklch, var(--bad) 35%, transparent); }

/* ---- Slide-over wrapper neutralizers. The design's .sy-so-head /
   .sy-so-body / .sy-so-foot carry their own padding + borders; drop them
   into the shared <SlideOver> slot wrappers without doubling chrome
   (mirrors the .slide-head neutralizers in tasks.css). ---- */
.slideover-head:has(> .sy-so-head) { padding: 0; border-bottom: 0; background: transparent; }
.slideover-body:has(> .sy-so-body) { padding: 0; }
.slideover-foot:has(> .sy-so-foot) { padding: 0; min-height: 0; border-top: 0; gap: 0; }
.slideover-foot:has(> .sy-so-foot) .sy-so-foot { width: 100%; box-sizing: border-box; }

/* ---- Reusable checkbox (mirrors the canonical Checkbox component) ---- */
.sy-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 12px var(--font-sans);
  color: var(--ink-2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.sy-check input[type="checkbox"] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 1px solid var(--line-3);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background .14s, border-color .14s;
}
.sy-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.sy-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sy-check input[type="checkbox"]:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--accent) 45%, transparent);
  outline-offset: 2px;
}
.sy-check.danger { color: color-mix(in oklch, var(--bad) 72%, var(--ink-2)); }
.sy-check.danger input[type="checkbox"]:checked {
  background: var(--bad);
  border-color: var(--bad);
}

/* ---- Native input/select aliases used by the system slide-overs ---- */
.sy-input,
.sy-select {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 8px 10px;
  font: 13.5px var(--font-sans);
  color: var(--ink);
}
.sy-input:focus,
.sy-select:focus {
  outline: 2px solid color-mix(in oklch, var(--accent) 28%, transparent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.sy-input[readonly] { color: var(--ink-3); cursor: default; }
/* ============================================================
   base.css — global resets + app-shell-level layout.
   Component styling lives in components.css; design values in tokens.css.
   Nothing here introduces a raw colour/space value — everything reads tokens.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#delivery {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- app shell layout ------------------------------------------------- */
.app-shell {
  display: flex;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* the single page scroll region — one consistent background fills the viewport */
.app-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
}

/* per-view padding wrapper; views may opt for full-bleed by not using it */
.app-page {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-5) var(--s-8);
}

.app-page--wide {
  max-width: none;
}

/* ---- responsive navigation ------------------------------------------- */
/* Drawer scrim — only ever interactive on narrow viewports when open. */
.app-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: color-mix(in oklch, var(--ink) 36%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

/* Tablet & below: the sidenav becomes an off-canvas drawer. */
@media (max-width: 1100px) {
  .app-shell .sidenav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 70;
    width: min(286px, 86vw);
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.22, 0.7, 0.3, 1);
    /* No shadow while closed — the 18px positive X-offset would otherwise bleed
       past the off-screen edge and show a sliver in the viewport. */
    box-shadow: none;
  }
  .app-shell.nav-open .sidenav {
    transform: none;
    box-shadow: 18px 0 50px -24px color-mix(in oklch, var(--ink) 65%, transparent);
  }
  .app-shell.nav-open .app-nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }
  /* the rail collapse control is meaningless in drawer mode */
  .app-shell.is-drawer .sidenav-foot {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .sidenav,
  .app-nav-scrim {
    transition: none;
  }
}

/* ---- bottom nav (phones only) ----------------------------------------
   It sits in normal flow at the end of the .app-main column (after the
   scrolling .app-content), so the scroll region stops above the bar rather
   than running underneath it. No fixed positioning / scroll-padding hack. */
.bottom-nav {
  display: none;
  flex: none;
  z-index: 40;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around;
}

@media (max-width: 720px) {
  .bottom-nav {
    display: flex;
  }
}

/* utility row helpers shared by views */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cluster {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
/* ============================================================
   public.css — Public (logged-out) pages: Home, Login, Forgot,
   Pricing, Contact. Shared public shell (nav + footer) + page
   components. Ported 1:1 from the design's public-pages.css.
   All values map to tokens.css. No app chrome.
   ============================================================ */

/* ---- Soft accent + ambient tokens -----------------------------------------
   The marketing pages need a few derived tints not in the core token set.
   Defined here so page markup never inlines a raw colour. tokens.css owns the
   base palette (light on :root, dark on [data-theme="dark"]). */
:root {
  --accent-soft:   color-mix(in oklch, var(--accent) 16%, var(--surface));
  --accent-soft-2: color-mix(in oklch, var(--accent) 8%, var(--surface));
  --bad-soft:      color-mix(in oklch, var(--bad) 9%, var(--surface));
  --good-soft:     color-mix(in oklch, var(--good) 12%, var(--surface));
  --info-soft:     color-mix(in oklch, var(--info) 10%, var(--surface));
  --ambient-tl:    oklch(0.82 0.09 168 / 0.28);
  --ambient-br:    oklch(0.75 0.08 235 / 0.18);
}
[data-theme="dark"] {
  --accent-soft:   color-mix(in oklch, var(--accent) 18%, var(--surface));
  --accent-soft-2: color-mix(in oklch, var(--accent) 10%, var(--surface));
  --bad-soft:      color-mix(in oklch, var(--bad) 14%, var(--surface));
  --good-soft:     color-mix(in oklch, var(--good) 16%, var(--surface));
  --info-soft:     color-mix(in oklch, var(--info) 16%, var(--surface));
  --ambient-tl:    oklch(0.72 0.13 155 / 0.12);
  --ambient-br:    oklch(0.60 0.08 235 / 0.10);
}

/* ===========================================================
   Page frame — a single rendered page, container-query driven.
   =========================================================== */
.pub-page {
  container-type: inline-size;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.pub-page * { box-sizing: border-box; }
.pub-page > * { flex: 0 0 auto; }
.pub-page .pub-footer { margin-top: auto; }
.pub-section { padding: 64px 40px; }

/* Shared button (mirrors app .btn) */
.pub-page .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink-2);
  font: 500 13px var(--font-sans); letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
}
.pub-page .btn:hover { background: var(--surface-raised); color: var(--ink); }
.pub-page .btn.ghost { background: transparent; }
.pub-page .btn.ghost:hover { background: var(--surface-raised); }
.pub-page .btn.accent { background: var(--accent); border-color: var(--accent); color: oklch(22% 0.04 155); }
.pub-page .btn.accent:hover { background: color-mix(in oklch, var(--accent) 88%, black); }
.pub-page .btn.outline { background: transparent; border-color: color-mix(in oklch, var(--accent) 50%, var(--line)); color: var(--accent); }
.pub-page .btn.outline:hover { background: color-mix(in oklch, var(--accent) 8%, var(--surface)); }
.pub-page .btn.lg { height: 44px; padding: 0 22px; font-size: 14px; border-radius: var(--r-2); }
.pub-page .btn.full { width: 100%; }
.pub-page .btn:disabled, .pub-page .btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.pub-page .btn svg { width: 15px; height: 15px; }
.pub-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in oklch, currentColor 32%, transparent);
  border-top-color: currentColor; animation: pub-spin .8s linear infinite;
}
@keyframes pub-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pub-spinner { animation-duration: 2.4s; } }

.pub-eyebrow {
  font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}

/* ===========================================================
   Public nav
   =========================================================== */
.pub-nav {
  position: relative; z-index: 5;
  height: 60px; display: flex; align-items: center; gap: 24px;
  padding: 0 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pub-nav.transparent { background: transparent; border-bottom-color: transparent; }
.pub-nav.solid { background: var(--surface); border-bottom-color: var(--line); box-shadow: var(--shadow-1); }

.pub-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.pub-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--accent); display: grid; place-items: center; flex: none;
}
.pub-mark svg { width: 19px; height: 19px; }
.pub-wordmark { font: 700 16px var(--font-sans); letter-spacing: -.02em; color: var(--ink); }

.pub-nav-links { display: flex; gap: 4px; align-items: center; }
.pub-nav-links a {
  text-decoration: none; padding: 7px 11px; border-radius: var(--r-2);
  font: 500 13.5px var(--font-sans); color: var(--ink-3);
  transition: color .14s, background .14s;
}
.pub-nav-links a:hover { color: var(--ink-2); }
.pub-nav-links a.active { color: var(--ink); font-weight: 600; }

.pub-nav-spacer { flex: 1; }
.pub-nav-actions { display: flex; align-items: center; gap: 8px; }

.pub-nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background .14s, border-color .14s;
}
.pub-nav-burger:hover { background: var(--surface-raised); }
.pub-nav-burger svg { width: 18px; height: 18px; }
.pub-nav-drawer { display: none; }

@container (max-width: 720px) {
  .pub-nav { padding: 0 20px; gap: 12px; }
  .pub-nav-links { display: none; }
  .pub-nav-actions .btn.accent { display: none; }
  .pub-nav-burger { display: inline-flex; }
  .pub-nav-drawer {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 2px;
    padding: 8px; z-index: 6;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
  }
  .pub-nav.menu-open .pub-nav-drawer { display: flex; }
  .pub-nav-drawer a {
    text-decoration: none; padding: 11px 12px; border-radius: var(--r-2);
    font: 500 14px var(--font-sans); color: var(--ink-2);
  }
  .pub-nav-drawer a:hover { background: var(--bg-sunk); color: var(--ink); }
  .pub-nav-drawer a.active { color: var(--ink); font-weight: 600; background: var(--bg-sunk); }
}

/* ===========================================================
   Public footer
   =========================================================== */
.pub-footer {
  padding: 40px; border-top: 1px solid var(--line);
  background: var(--bg-sunk);
  display: flex; flex-direction: column; gap: 20px;
}
.pub-footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
}
.pub-footer-brand { display: flex; flex-direction: column; gap: 8px; }
.pub-footer-brand .pub-brand { gap: 9px; }
.pub-footer-tag { font: 13px var(--font-sans); color: var(--ink-3); max-width: 30ch; }
.pub-footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.pub-footer-links a {
  text-decoration: none; font: 500 13px var(--font-sans); color: var(--ink-3);
  transition: color .14s;
}
.pub-footer-links a:hover { color: var(--ink); }
.pub-footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 16px; border-top: 1px solid var(--line);
  font: 12px var(--font-mono); color: var(--ink-4); letter-spacing: .03em;
}

/* ===========================================================
   Home — hero
   =========================================================== */
.hero {
  position: relative; overflow: hidden;
  min-height: 520px; display: flex; align-items: center; justify-content: center;
  padding: 72px 40px;
}
.hero-ambient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 12% 8%, var(--ambient-tl), transparent 70%),
    radial-gradient(60% 70% at 92% 96%, var(--ambient-br), transparent 70%);
}
.hero-inner { position: relative; z-index: 1; max-width: 700px; text-align: center; }
.hero-eyebrow { display: block; margin-bottom: 18px; }
.hero-heading {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 52px; line-height: 1.05; letter-spacing: -.03em; color: var(--ink);
  text-wrap: balance;
}
.hero-sub {
  margin: 20px auto 0; max-width: 520px;
  font: 18px/1.55 var(--font-sans); color: var(--ink-2); text-wrap: pretty;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

@container (max-width: 720px) {
  .hero { min-height: 0; padding: 48px 20px 56px; }
  .hero-heading { font-size: 36px; }
  .hero-sub { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
}

/* ===========================================================
   Home — feature strip
   =========================================================== */
.feature-strip { background: var(--bg-sunk); padding: 80px 40px; }
.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 960px; margin: 0 auto;
}
.feature-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.feature-icon svg { width: 20px; height: 20px; }
.feature-title { margin: 14px 0 6px; font: 600 16px var(--font-sans); color: var(--ink); }
.feature-body { margin: 0; font: 14px/1.6 var(--font-sans); color: var(--ink-3); }
@container (max-width: 720px) {
  .feature-strip { padding: 56px 20px; }
  .feature-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ===========================================================
   Home — workflow section
   =========================================================== */
.workflow-section { padding: 80px 40px; }
.workflow-grid {
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.workflow-copy h2 {
  margin: 14px 0 12px; font: 700 32px/1.1 var(--font-display);
  letter-spacing: -.02em; color: var(--ink);
}
.workflow-copy > p { margin: 0 0 22px; font: 15px/1.6 var(--font-sans); color: var(--ink-2); max-width: 42ch; }
.stage-list { display: flex; flex-direction: column; gap: 12px; }
.stage-row { display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: baseline; }
.stage-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.stage-name { font: 500 13px var(--font-sans); color: var(--ink); }
.stage-desc { font: 12px var(--font-sans); color: var(--ink-3); margin-left: 8px; }

.workflow-mockup {
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--shadow-3);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.wfm-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.wfm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wfm-stage {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}
.wfm-stage::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--stage, var(--accent)); }
.wfm-status { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--font-mono); color: var(--ink-3); }
.wfm-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st, var(--ink-4)); }
.wfm-title { font: 500 14px var(--font-sans); color: var(--ink); letter-spacing: -.01em; }

@container (max-width: 720px) {
  .workflow-section { padding: 56px 20px; }
  .workflow-grid { grid-template-columns: 1fr; gap: 32px; }
  .workflow-mockup { order: -1; }
}

/* ===========================================================
   Home — CTA
   =========================================================== */
.cta-section { padding: 80px 40px; background: var(--accent-soft); text-align: center; }
.cta-section h2 { margin: 0; font: 700 28px var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.cta-section p { margin: 12px auto 0; max-width: 420px; font: 15px/1.55 var(--font-sans); color: var(--ink-2); }
.cta-actions { display: flex; justify-content: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
@container (max-width: 720px) { .cta-section { padding: 56px 20px; } }

/* ===========================================================
   Pricing
   =========================================================== */
.pricing-hero { padding: 72px 40px 48px; text-align: center; }
.pricing-hero h1 { margin: 12px 0 0; font: 800 40px var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.pricing-hero p { margin: 12px auto 0; max-width: 480px; font: 16px/1.55 var(--font-sans); color: var(--ink-2); }

.pricing-grid {
  max-width: 1180px; margin: 0 auto; padding: 0 40px 28px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch;
}
.pricing-card {
  background: var(--surface-raised); border: 1.5px solid var(--line);
  border-radius: var(--r-3); padding: 28px 24px;
  display: flex; flex-direction: column; box-shadow: var(--shadow-1);
}
.pricing-card.pro {
  border-color: var(--accent); position: relative;
  box-shadow: var(--shadow-3), 0 0 0 1px var(--accent);
}
.pricing-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: oklch(22% 0.04 155);
  font: 500 11px var(--font-mono); border-radius: var(--r-pill); padding: 3px 12px;
  white-space: nowrap;
}
.pricing-tier { font: 600 13px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.pricing-tier.free { color: var(--ink-2); }
.pricing-amount { display: flex; align-items: baseline; gap: 5px; margin-top: 12px; }
.price-value { font: 800 36px var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.price-period { font: 14px var(--font-sans); color: var(--ink-3); }
.pricing-desc { margin: 10px 0 20px; font: 14px/1.5 var(--font-sans); color: var(--ink-3); min-height: 42px; }
.pricing-divider { height: 1px; background: var(--line-2); margin: 20px 0; }
.pricing-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-row { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start; }
.pf-row svg { width: 16px; height: 16px; color: var(--good); margin-top: 1px; }
.pf-row span { font: 13px/1.45 var(--font-sans); color: var(--ink-2); }

@container (max-width: 1000px) { .pricing-grid { grid-template-columns: 1fr 1fr; } }
@container (max-width: 600px) {
  .pricing-hero { padding: 56px 20px 40px; }
  .pricing-hero h1 { font-size: 32px; }
  .pricing-grid { grid-template-columns: 1fr; padding: 8px 20px 20px; }
  .pricing-card .btn { width: 100%; }
}

/* Pricing — how it works (machine + worker) */
.pricing-howit {
  max-width: 760px; margin: -8px auto 32px; padding: 0 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.howit-card {
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 20px 22px;
}
.howit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.howit-icon {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--accent-soft-2); color: var(--accent);
  display: grid; place-items: center;
}
.howit-icon svg { width: 17px; height: 17px; }
.howit-head h3 { margin: 0; font: 600 15px var(--font-sans); color: var(--ink); }
.howit-card p { margin: 0; font: 13.5px/1.6 var(--font-sans); color: var(--ink-3); text-wrap: pretty; }
@container (max-width: 600px) {
  .pricing-howit { grid-template-columns: 1fr; margin: -4px 20px 24px; padding: 0; }
}

/* Pricing — two-part billing callout (subtle, transparent) */
.pricing-note {
  max-width: 720px; margin: 0 auto; padding: 0 40px 76px;
  text-align: center; font: 13px/1.6 var(--font-sans); color: var(--ink-3); text-wrap: pretty;
}
@container (max-width: 600px) {
  .pricing-note { padding: 4px 20px 56px; }
}

/* Pricing — AI agent modes */
.pricing-agents { background: var(--bg-sunk); padding: 72px 40px 80px; }
.pricing-agents-head { text-align: center; margin: 0 auto 40px; }
.pricing-agents-head h2 {
  margin: 10px 0 0; font: 700 28px var(--font-display);
  letter-spacing: -.02em; color: var(--ink);
}
.agent-modes {
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.agent-mode {
  background: var(--surface-raised); border: 1.5px solid var(--line);
  border-radius: var(--r-3); padding: 24px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; align-items: flex-start;
}
.agent-mode-title { margin: 14px 0 6px; font: 600 16px var(--font-sans); color: var(--ink); }
.agent-mode-body { margin: 0 0 18px; font: 14px/1.6 var(--font-sans); color: var(--ink-3); }
.agent-mode-avail {
  margin-top: auto;
  font: 600 11px var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft-2);
  padding: 5px 10px; border-radius: var(--r-pill);
}
@container (max-width: 720px) {
  .pricing-agents { padding: 56px 20px; }
  .agent-modes { grid-template-columns: 1fr; gap: 16px; }
}

/* Pricing — tuning capability (distinct from agent modes) */
.agent-tuning {
  max-width: 960px; margin: 20px auto 0;
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 24px;
  border: 1.5px dashed var(--line-2); border-radius: var(--r-3);
  background: var(--accent-soft-2);
}
.agent-tuning-icon {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: var(--surface-raised); border: 1px solid var(--line);
  color: var(--accent); display: grid; place-items: center;
}
.agent-tuning-icon svg { width: 20px; height: 20px; }
.agent-tuning-body h3 {
  margin: 2px 0 6px; font: 600 16px var(--font-sans); color: var(--ink);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.agent-tuning-tag {
  font: 600 11px var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: 4px 9px; border-radius: var(--r-pill);
}
.agent-tuning-body p { margin: 0; font: 14px/1.6 var(--font-sans); color: var(--ink-3); text-wrap: pretty; }
@container (max-width: 720px) {
  .agent-tuning { flex-direction: column; gap: 12px; margin-top: 16px; }
}

/* Pricing FAQ — give the heading some breathing room above, keep it closer to
   the questions, and use an even, comfortable rhythm between each Q/A. */
.pricing-faq { max-width: 640px; margin: 0 auto; padding: 24px 40px 80px; }
.pricing-faq h2 { margin: 0 0 28px; text-align: center; font: 700 24px var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.faq-item { border-top: 1px solid var(--line); padding: 24px 0; }
.faq-item h3 { margin: 0 0 10px; font: 600 15px var(--font-sans); color: var(--ink); }
.faq-item p { margin: 0; font: 14px/1.6 var(--font-sans); color: var(--ink-3); }
@container (max-width: 600px) { .pricing-faq { padding: 16px 20px 64px; } }

/* ===========================================================
   Contact
   =========================================================== */
.contact-shell { max-width: 560px; margin: 0 auto; padding: 72px 40px 80px; width: 100%; }
.contact-shell h1 { margin: 12px 0 0; font: 800 36px var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.contact-intro { margin: 10px 0 40px; font: 15px/1.6 var(--font-sans); color: var(--ink-2); }
.contact-form { display: flex; flex-direction: column; gap: 20px; }

.pub-field { display: flex; flex-direction: column; gap: 6px; }
.pub-field-label { font: 500 10.5px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.pub-input, .pub-textarea, .pub-select {
  width: 100%; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 10px 12px; font: 14px var(--font-sans); color: var(--ink);
  transition: border-color .15s, box-shadow .15s; -moz-appearance: none; appearance: none; -webkit-appearance: none;
}
.pub-input::-moz-placeholder, .pub-textarea::-moz-placeholder { color: var(--ink-4); }
.pub-input::placeholder, .pub-textarea::placeholder { color: var(--ink-4); }
.pub-input:focus, .pub-textarea:focus, .pub-select:focus {
  outline: 2px solid color-mix(in oklch, var(--accent) 28%, transparent); outline-offset: -1px; border-color: var(--accent);
}
.pub-textarea { resize: vertical; min-height: 120px; }
.pub-field.valid .pub-input { border-color: color-mix(in oklch, var(--good) 55%, var(--line)); }
.pub-field-valid-ico { position: relative; }
.pub-field-valid-ico svg { position: absolute; right: 11px; top: 12px; width: 16px; height: 16px; color: var(--good); }
.pub-select {
  cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
.contact-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.contact-hint { margin: 0; text-align: left; font: 12.5px var(--font-sans); color: var(--ink-4); }

.pub-error {
  display: flex; align-items: center; gap: 9px;
  background: var(--bad-soft); border: 1px solid var(--bad); border-radius: var(--r-2);
  padding: 10px 14px; font: 13px var(--font-sans); color: var(--bad);
}
.pub-error svg { width: 16px; height: 16px; flex: none; }

.contact-loading .contact-form .pub-field { pointer-events: none; opacity: .65; }

/* Inline validation (live contact form) */
.pub-field.invalid .pub-input,
.pub-field.invalid .pub-textarea,
.pub-field.invalid .pub-select {
  border-color: color-mix(in oklch, var(--bad) 55%, var(--line));
  background: color-mix(in oklch, var(--bad) 4%, var(--surface));
}
.pub-field-error {
  display: flex; align-items: center; gap: 5px;
  font: 11.5px var(--font-mono); color: var(--bad); margin-top: 2px;
}
.pub-field-error svg { width: 13px; height: 13px; flex: none; }

.contact-success { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 0; }
.success-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--good-soft);
  color: var(--good); display: grid; place-items: center;
}
.success-icon svg { width: 26px; height: 26px; }
.contact-success h2 { margin: 0; font: 700 24px var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.contact-success p { margin: 0; font: 15px var(--font-sans); color: var(--ink-2); }

@container (max-width: 600px) {
  .contact-shell { padding: 48px 20px 64px; }
  .contact-shell h1 { font-size: 30px; }
  .contact-actions { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .contact-actions .btn { width: 100%; }
  .contact-hint { text-align: center; }
}

/* ===========================================================
   Login
   =========================================================== */
.login-shell {
  position: relative; overflow: hidden; flex: 1;
  min-height: 560px; display: flex; align-items: center; justify-content: center;
  padding: 56px 40px; background: var(--bg);
}
.login-ambient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 65% at 14% 10%, var(--ambient-tl), transparent 70%),
    radial-gradient(55% 65% at 88% 94%, var(--ambient-br), transparent 70%);
}
.login-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 400px; gap: 64px; align-items: center;
  width: 100%; max-width: 880px;
}
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }
.login-mark { width: 48px; height: 48px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; }
.login-mark svg { width: 27px; height: 27px; }
.login-brand-name { font: 700 17px var(--font-sans); letter-spacing: -.02em; color: var(--ink); }

.login-left h1 { margin: 0; font-family: var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.login-left .login-vp { font-size: 40px; font-weight: 800; line-height: 1.08; max-width: 13ch; }
.login-left .login-name { font-size: 44px; font-weight: 800; }
.login-tagline { margin: 16px 0 0; font: 16px/1.55 var(--font-sans); color: var(--ink-2); max-width: 38ch; }

.login-bullets { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.login-bullet { display: flex; align-items: center; gap: 12px; font: 14px var(--font-sans); color: var(--ink-2); }
.login-bullet-bar { width: 3px; height: 18px; border-radius: 2px; background: var(--accent); flex: none; }
.login-bullet-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--dot, var(--accent)); }

.login-card {
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-3); padding: 28px;
}
.login-title { margin: 0; font: 700 20px var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
.login-sub { margin: 6px 0 22px; font: 13px var(--font-sans); color: var(--ink-3); }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form .pub-field-label { color: var(--ink-3); }
.login-foot { margin-top: 18px; text-align: center; }
.login-foot a { font: 13px var(--font-sans); color: var(--ink-3); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.login-foot a:hover { color: var(--ink); }
.login-foot a svg { width: 15px; height: 15px; }
.login-forgot { align-self: flex-end; margin-top: 4px; font: 12px var(--font-sans); color: var(--accent); text-decoration: none; }
.login-forgot:hover { text-decoration: underline; }
.login-label-row { display: flex; align-items: baseline; justify-content: space-between; }

.login-loading .login-form .pub-field { opacity: .65; pointer-events: none; }

/* Forgot password — confirmation state */
.login-card--sent { text-align: center; }
.login-sent-icon {
  width: 52px; height: 52px; margin: 2px auto 16px;
  border-radius: 14px; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center;
}
.login-sent-icon svg { width: 26px; height: 26px; }
.login-card--sent .login-sub { margin: 6px 0 20px; text-wrap: pretty; }
.login-sent-addr { color: var(--ink); font-weight: 600; }
.login-card--sent .btn { gap: 7px; }
.login-resend { margin: 16px 0 0; font: 13px var(--font-sans); color: var(--ink-3); }
.login-resend a { color: var(--accent); text-decoration: none; }
.login-resend a:hover { text-decoration: underline; }

.login-brand-mobile { display: none; }

@container (max-width: 760px) {
  .login-shell { padding: 40px 20px; min-height: 0; }
  .login-inner { grid-template-columns: 1fr; gap: 0; max-width: 400px; }
  .login-left { display: none; }
  .login-card { width: 100%; }
  .login-brand-mobile { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; }
  .login-brand-mobile .login-mark { width: 56px; height: 56px; }
}

.panel-loading[data-v-fd5d55d7] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-3);
  color: var(--ink-3);
  font-size: 13px;
}
.panel-loading-spinner[data-v-fd5d55d7] {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--ink-3);
  animation: panel-spin-fd5d55d7 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.panel-loading-spinner[data-v-fd5d55d7] { animation-duration: 2s;
}
}
@keyframes panel-spin-fd5d55d7 {
to { transform: rotate(360deg);
}
}

.modal[data-v-424f5ac5] {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
.modal-scrim[data-v-424f5ac5] {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--ink) 42%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.modal.open .modal-scrim[data-v-424f5ac5] { opacity: 1;
}
.modal-panel[data-v-424f5ac5] {
  position: relative;
  width: min(560px, 96vw);
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3, 14px);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px color-mix(in oklch, var(--ink) 65%, transparent);
  outline: none;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.22s cubic-bezier(0.22, 0.7, 0.3, 1), opacity 0.18s ease;
}
.modal.open .modal-panel[data-v-424f5ac5] { opacity: 1; transform: none;
}
.modal[data-width="sm"] .modal-panel[data-v-424f5ac5] { width: min(420px, 94vw);
}
.modal[data-width="lg"] .modal-panel[data-v-424f5ac5] { width: min(880px, 96vw);
}
@media (prefers-reduced-motion: reduce) {
.modal-scrim[data-v-424f5ac5],
  .modal-panel[data-v-424f5ac5] { transition: none;
}
}
.modal-bar[data-v-424f5ac5] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.modal-eyebrow[data-v-424f5ac5] {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 14px var(--font-sans);
  color: var(--ink);
}
.modal-close[data-v-424f5ac5] {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.modal-close[data-v-424f5ac5]:hover { background: var(--bg-sunk); color: var(--ink);
}
.modal-close svg[data-v-424f5ac5] { width: 14px; height: 14px;
}
.modal-body[data-v-424f5ac5] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--s-4);
}
.modal-foot[data-v-424f5ac5] {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--bg-sunk);
}

.toast-host[data-v-de8cf6e2] {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  /* Must outrank every overlay (Modal/SlideOver are 80/60, dropdowns 999-1000)
     so a toast fired while one is open never renders behind its backdrop —
     ToastHost is teleported once at app-shell mount, ahead of any
     later-teleported Modal/SlideOver in DOM order, so equal z-index alone
     isn't enough; it has to outrank them numerically. */
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast[data-v-de8cf6e2] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px 9px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-pill);
  font: 500 12.5px var(--font-sans);
  box-shadow: 0 12px 30px -12px color-mix(in oklch, var(--ink) 70%, transparent);
  /* The host disables pointer events so it never blocks the page; re-enable
     them on the toast itself so the close button stays clickable. */
  pointer-events: auto;
}
.toast-close[data-v-de8cf6e2] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in oklch, var(--bg) 18%, transparent);
  color: inherit;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.14s ease, background 0.14s ease;
}
.toast-close[data-v-de8cf6e2]:hover {
  opacity: 1;
  background: color-mix(in oklch, var(--bg) 30%, transparent);
}
.toast-close[data-v-de8cf6e2]:focus-visible {
  outline: 2px solid var(--bg);
  outline-offset: 1px;
}
.toast-close svg[data-v-de8cf6e2] {
  width: 13px;
  height: 13px;
}
.toast--good[data-v-de8cf6e2] {
  background: var(--good);
  color: var(--bg);
}
.toast--bad[data-v-de8cf6e2] {
  background: var(--bad);
  color: var(--bg);
}
.toast-enter-active[data-v-de8cf6e2],
.toast-leave-active[data-v-de8cf6e2] {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast-enter-from[data-v-de8cf6e2],
.toast-leave-to[data-v-de8cf6e2] {
  opacity: 0;
  transform: translateY(16px);
}
@media (prefers-reduced-motion: reduce) {
.toast-enter-active[data-v-de8cf6e2],
  .toast-leave-active[data-v-de8cf6e2] {
    transition: none;
}
}

.bottom-tab[data-v-4f058cb3] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 2px;
  color: var(--ink-3);
  font: 500 10px var(--font-sans);
  background: none;
  border: none;
  cursor: pointer;
}
.bottom-tab.active[data-v-4f058cb3] {
  color: var(--accent);
}
.bottom-tab[data-v-4f058cb3] svg {
  width: 20px;
  height: 20px;
}

/* Right-aligned top-bar control: the burger (tablet, opens the drawer) or the
   account avatar shortcut (phone, where the bottom nav replaces the drawer). */
.appbar-menu[data-v-801bd7e1] {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.appbar-menu[data-v-801bd7e1]:hover {
  background: var(--surface-raised);
}
.appbar-menu[data-v-801bd7e1] svg {
  width: 19px;
  height: 19px;
}

/* Account shortcut: an avatar chip matching the sidebar account avatar. */
.appbar-acct[data-v-801bd7e1] {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
}
.appbar-acct-avatar[data-v-801bd7e1] {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 18%, var(--surface));
  color: color-mix(in oklch, var(--accent) 70%, var(--ink));
  border: 1px solid color-mix(in oklch, var(--accent) 34%, transparent);
  display: grid;
  place-items: center;
  font: 600 13px var(--font-mono);
  letter-spacing: 0.03em;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.appbar-acct:hover .appbar-acct-avatar[data-v-801bd7e1] {
  background: color-mix(in oklch, var(--accent) 26%, var(--surface));
}
/* Tablet: sidebar is a drawer → show the burger. */
@media (max-width: 1100px) and (min-width: 721px) {
.appbar-menu[data-v-801bd7e1] {
    display: inline-flex;
}
}
/* Phone: bottom nav is showing → swap the burger for the account avatar. */
@media (max-width: 720px) {
.appbar-acct[data-v-801bd7e1] {
    display: inline-flex;
}
}

/* display:contents removes the wrapper box so the surrounding container's
   `… svg { width/height }` rules (ported from the design) size the glyph
   exactly as in the spec. */
.pub-icon[data-v-9d713a33] {
  display: contents;
}