/* ---- Runyard brand system ----
 * Public product name: Runyard
 * Tagline: Durable agent work across your own machines
 * Palette: paper + ink + mineral, with violet running, cyan input,
 * amber retry/warning, red failure, and green completion.
 * Legacy SMITHERS_HUB_* env vars are still honored as fallbacks for back-compat.
 */
/* ============================================================================
 * DESIGN TOKENS — the single source of truth for the Runyard brand.
 * Every font-size, color, space, radius, and shadow in this stylesheet should
 * resolve to one of the variables below. The /brand page renders these tokens
 * directly and is the living contract: if it looks right there, it is correct.
 * Do NOT introduce ad-hoc px font sizes or raw hex colors outside this block.
 * ==========================================================================*/
:root {
  /* ---- Fonts ----------------------------------------------------------- */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, ui-monospace, Menlo, monospace;
  --font-runner: "RunYard Runner Glyph", "Noto Sans Egyptian Hieroglyphs", sans-serif;
  --font-agent-avatar: "RunYard Agent Hieroglyphs", "Noto Sans Egyptian Hieroglyphs", sans-serif;

  /* ---- Type scale (strict, 8 steps + display) -------------------------- *
   * Use --fs-* for size and the paired --lh-* for line-height. No size may
   * appear outside this scale. Display is reserved for marketing/hero only. */
  --fs-2xs: 11px;   --lh-2xs: 16px;   /* micro labels, pill text, timestamps */
  --fs-xs: 12px;    --lh-xs: 16px;    /* captions, secondary meta            */
  --fs-sm: 13px;    --lh-sm: 18px;    /* dense body, table cells             */
  --fs-base: 14px;  --lh-base: 20px;  /* default UI text, buttons, inputs    */
  --fs-md: 16px;    --lh-md: 24px;    /* lead paragraph, card titles         */
  --fs-lg: 18px;    --lh-lg: 26px;    /* section headings                    */
  --fs-xl: 22px;    --lh-xl: 28px;    /* page sub-titles                     */
  --fs-2xl: 28px;   --lh-2xl: 34px;   /* page H1                             */
  --fs-display: clamp(34px, 6vw, 64px); /* landing/hero only                 */

  /* ---- Font weights ---------------------------------------------------- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 720;   /* wordmark / hero only */

  /* ---- Letter-spacing -------------------------------------------------- *
   * Body, headings, and the Egyptian product/runner glyph stay at 0. */
  --tracking-label: 0.06em;
  --tracking-tight: 0.01em;

  /* ---- Spacing scale (4px base grid) ----------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radii ----------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- Borders --------------------------------------------------------- */
  --border-width: 1px;

  /* ---- Shadows (exceptional elevation only; Ledger surfaces are flat) --- */
  --shadow-xs: 0 1px 2px rgba(15, 25, 35, 0.08);
  --shadow-sm: 0 4px 16px rgba(15, 25, 35, 0.08);
  --shadow-md: 0 6px 20px rgba(15, 25, 35, 0.16);
  --shadow-lg: 0 12px 28px rgba(15, 25, 35, 0.18);

  /* ---- Color: background layers ---------------------------------------- */
  --bg: #f6f5ef;          /* app canvas (off-white)        */
  --surface: #ffffff;     /* panels, cards                 */
  --surface-2: #f4f7fb;   /* soft fills, hover, code wells */
  --surface-3: #eef3f8;   /* table headers, subtle stripe  */

  /* ---- Color: text ----------------------------------------------------- */
  --text: #15191f;            /* primary ink            */
  --text-strong: #1f2630;     /* slightly deeper ink    */
  --text-secondary: #475569;  /* secondary copy         */
  --text-muted: #637083;      /* muted / tertiary       */
  --text-on-accent: #ffffff;  /* text on solid fills    */

  /* ---- Color: borders -------------------------------------------------- */
  --border: #d9e0ea;
  --border-strong: #cbd5e1;

  /* ---- Color: accent (one green primary + one blue link) --------------- */
  --accent: #1f6f4a;          /* Runyard signal green (the ONE accent) */
  --accent-hover: #1a5e3e;
  --accent-tint: #e7f6ef;
  --accent-border: #b7e7df;
  --link: #2563eb;            /* single blue, links/highlights only    */

  /* ---- Color: semantic tones (meaning only, never decoration) ---------- */
  --success: #15803d;  --success-bg: #f0fdf4;  --success-border: #bbf7d0;
  --warn-fg: #b45309;  --warn-bg: #fffbeb;     --warn-border: #fed7aa;
  --danger-fg: #b91c1c; --danger-bg: #fef2f2;  --danger-border: #fecaca;
  --info-fg: #1d4ed8;  --info-bg: #eff6ff;     --info-border: #bfdbfe;

  /* ---- Console / log surface (dark, monospace) ------------------------- */
  --console-bg: #101820;
  --console-fg: #dbeafe;

  /* ---- Buttons (the full system) --------------------------------------- *
   * Two sizes, one radius. Height is canonical per size. Variants are colour
   * only (see the button rules below). Rule: at most ONE primary (solid-accent)
   * button per view; everything else is secondary/ghost. */
  --btn-height-sm: 30px;
  --btn-height-md: 36px;
  --btn-radius: var(--radius-sm);
  --btn-pad-sm: 0 var(--space-2-5);
  --btn-pad-md: 0 var(--space-3);
  --btn-font-sm: var(--fs-sm);
  --btn-font-md: var(--fs-base);
  --btn-gap: var(--space-2);

  /* ---- Motion ---------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;

  /* ---- Legacy aliases -------------------------------------------------- *
   * Older rules reference these names; they now resolve to the tokens above
   * so the whole stylesheet inherits the brand without a mass rename. */
  --ink: var(--text);
  --ink-soft: var(--text-strong);
  --off-white: var(--bg);
  --muted: var(--text-muted);
  --line: var(--border);
  --panel: var(--surface);
  --soft: var(--surface-2);
  --brand: var(--accent);
  --brand-2: var(--link);
  --warn: var(--warn-fg);
  --danger: var(--danger-fg);
  --ok: var(--success);
  --brand-tint: var(--accent-tint);
}

/* Ledger is the default product system, but it remains a real reversible
 * boundary. Keep the legacy root tokens intact so `?ledger=0` is an honest
 * fallback instead of the classic layout wearing half of the new theme. */
body.runners-ledger-active {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, ui-monospace, Menlo, monospace;
  --tracking-label: 0.04em;
  --tracking-tight: 0;
  --tracking-mark: 0;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --bg: #f7f5ee;
  --surface-2: #f0f2f4;
  --surface-3: #e8ecef;
  --accent: #6546d7;
  --accent-hover: #5538bd;
  --accent-tint: #f0edff;
  --accent-border: #c9bdfb;
  --link: #087f8c;
  --success: #2f7d4a;
  --success-bg: #edf8f1;
  --success-border: #b7dcc4;
  --warn-fg: #b46b12;
  --warn-bg: #fff7e8;
  --warn-border: #e8c991;
  --danger-fg: #bd3038;
  --danger-bg: #fff0f1;
  --danger-border: #edb7bc;
  --info-fg: #087f8c;
  --info-bg: #eaf7f8;
  --info-border: #a9dde2;
}

/* ---- Runner's Ledger Wave 1 ----------------------------------------------
 * Boundary: `data-ui-boundary="runners-ledger"` is applied by the React shell
 * by default. `?ledger=0`, `?runnersLedger=0`, or localStorage
 * `runyard.runnersLedger=0` keeps the classic fallback for this release.
 */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/public/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/public/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/public/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/public/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/public/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/public/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "RunYard Runner Glyph";
  font-style: normal;
  font-display: block;
  font-weight: 400;
  src: url("/public/fonts/noto-sans-egyptian-hieroglyphs-u130bd.ttf") format("truetype");
  unicode-range: U+130BD;
}

@font-face {
  font-family: "RunYard Agent Hieroglyphs";
  font-style: normal;
  font-display: block;
  font-weight: 400;
  src: url("/public/fonts/noto-sans-egyptian-hieroglyphs.ttf") format("truetype");
  unicode-range: U+13000-13017;
}

.rl-topbar,
.runners-ledger-shell {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, ui-monospace, Menlo, monospace;
  --rl-paper: #f7f8fb;
  --rl-surface: #ffffff;
  --rl-well: #eef1f5;
  --rl-ink: #20242a;
  --rl-muted: #68707b;
  --rl-rule: #dfe3e9;
  --rl-rule-strong: #afb6c0;
  --rl-violet: #6546d7;
  --rl-cyan: #087f8c;
  --rl-amber: #b46b12;
  --rl-green: #2f7d4a;
  --rl-red: #bd3038;
  --rl-radius: 4px;
  font-family: var(--font-sans);
  color: var(--rl-ink);
  background: var(--rl-paper);
  box-shadow: none;
}

.rl-topbar,
.runners-ledger-shell .content,
.runners-ledger-shell .panel,
.runners-ledger-shell .item,
.runners-ledger-shell .template-card,
.runners-ledger-shell .work-command,
.runners-ledger-shell .board-col {
  box-shadow: none;
  background-image: none;
}

.rl-topbar {
  border-bottom: 1px solid var(--rl-rule);
  background: rgba(247, 248, 251, 0.96);
}

.rl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rl-ink);
  font-weight: 600;
  letter-spacing: 0;
}

.rl-mark {
  color: var(--rl-violet);
  display: inline-block;
  min-width: 24px;
  font: 400 26px/1 var(--font-runner);
  letter-spacing: 0;
  transform: translateY(1px);
}

.rl-name {
  font-weight: 600;
}

.runners-ledger-shell .primary-nav a,
.runners-ledger-shell .dock-menu button,
.runners-ledger-shell .dock-menu a {
  border-radius: 0;
}

.runners-ledger-shell .primary-nav a.active,
.runners-ledger-shell .dock-menu button.active {
  border-color: var(--rl-violet);
  color: var(--rl-ink);
}

.rl-topbar .mobile-primary-nav {
  gap: 20px;
  padding: 0 6px;
}

.rl-topbar .mobile-primary-nav a {
  position: relative;
  min-height: 32px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rl-muted);
  font-weight: 500;
  text-decoration: none;
}

.rl-topbar .mobile-primary-nav a:hover,
.rl-topbar .mobile-primary-nav a:focus-visible {
  color: var(--rl-ink);
  text-decoration: underline;
  text-underline-offset: 7px;
}

.rl-topbar .mobile-primary-nav a.active {
  background: transparent;
  color: var(--rl-ink);
  font-weight: 600;
}

.rl-topbar .mobile-primary-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--rl-violet);
}

.rl-topbar .mobile-primary-nav .nav-badge {
  min-width: 7px;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  padding: 0;
  border-radius: 50%;
  background: var(--rl-red);
  color: transparent;
  overflow: hidden;
}

.rl-page {
  max-width: 1480px;
  margin: 0 auto;
}

.rl-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 36px;
}

.rl-page-head h1 {
  margin: 0 0 8px;
  color: var(--rl-ink);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0;
  font-weight: 600;
}

.rl-eyebrow,
.rl-count,
.rl-table th,
.rl-row-sub,
.rl-rail-label,
.rl-status {
  font-family: var(--font-mono);
}

.rl-eyebrow {
  margin-bottom: 8px;
  color: var(--rl-muted);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rl-sub {
  color: var(--rl-muted);
  margin: 0;
  max-width: 720px;
}

.rl-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.runners-ledger-shell button,
.runners-ledger-shell .button,
.runners-ledger-shell input,
.runners-ledger-shell select,
.runners-ledger-shell textarea {
  border-radius: var(--rl-radius);
  min-height: 40px;
}

.runners-ledger-shell button.primary,
.runners-ledger-shell .button.primary {
  background: var(--rl-violet);
  border-color: var(--rl-violet);
}

.runners-ledger-shell button.warning,
.runners-ledger-shell .button.warning {
  color: var(--rl-amber);
  border-color: var(--rl-amber);
  background: transparent;
}

.runners-ledger-shell button.danger,
.runners-ledger-shell .button.danger {
  background: var(--rl-red);
  border-color: var(--rl-red);
}

.runners-ledger-shell :focus-visible {
  outline-color: var(--rl-violet);
}

.runners-ledger-shell .panel,
.runners-ledger-shell .item,
.runners-ledger-shell .empty,
.runners-ledger-shell .toast,
.runners-ledger-shell .modal,
.runners-ledger-shell .drawer,
.runners-ledger-shell .approval-card,
.runners-ledger-shell .run-card,
.runners-ledger-shell .work-card,
.runners-ledger-shell .template-card,
.runners-ledger-shell .schedule-card,
.runners-ledger-shell .settings-card,
.runners-ledger-shell .secret-card,
.runners-ledger-shell .runner-card,
.runners-ledger-shell .repo-card {
  border-radius: var(--rl-radius);
  border-color: var(--rl-rule);
  background: var(--rl-surface);
  box-shadow: none;
}

.runners-ledger-shell .panel + .panel,
.runners-ledger-shell .item + .item,
.runners-ledger-shell .run-card + .run-card,
.runners-ledger-shell .work-card + .work-card {
  border-top-color: var(--rl-rule);
}

.runners-ledger-shell .badge,
.runners-ledger-shell .pill,
.runners-ledger-shell .tag,
.runners-ledger-shell .chip,
.runners-ledger-shell .status {
  border-radius: var(--rl-radius);
  box-shadow: none;
}

.runners-ledger-shell .status,
.runners-ledger-shell .status-pill,
.runners-ledger-shell [class*="status-"] {
  background-image: none;
}

/* Lifecycle state is punctuation, not a capsule. The legacy component keeps
 * its semantic classes; Ledger turns the decorative emoji into one quiet dot. */
.runners-ledger-shell .status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--rl-muted);
}

.runners-ledger-shell .status > span:first-child {
  width: 8px;
  height: 8px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: currentColor;
  color: transparent;
  font-size: 0;
}

.runners-ledger-shell .status.running,
.runners-ledger-shell .status.assigned,
.runners-ledger-shell .status.queued { color: var(--rl-violet); }
.runners-ledger-shell .status.waiting_approval,
.runners-ledger-shell .status.pending { color: var(--rl-cyan); }
.runners-ledger-shell .status.recovering,
.runners-ledger-shell .status.paused { color: var(--rl-amber); }
.runners-ledger-shell .status.succeeded,
.runners-ledger-shell .status.online,
.runners-ledger-shell .status.approved { color: var(--rl-green); }
.runners-ledger-shell .status.failed,
.runners-ledger-shell .status.error,
.runners-ledger-shell .status.cancelled,
.runners-ledger-shell .status.rejected { color: var(--rl-red); }

/* Peer settings/forms read as one open ledger band. Their internal code wells
 * and focal actions may still enclose themselves, but the columns do not become
 * cards inside a larger card-shaped page. */
.runners-ledger-shell .split {
  border-top: 1px solid var(--rl-rule-strong);
}

.runners-ledger-shell .split > .panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
}

.runners-ledger-shell .split > .panel + .panel {
  border-left: 1px solid var(--rl-rule);
  padding-left: 24px;
}

.runners-ledger-shell .ledger-settings-secrets > .panel {
  border: 0;
  border-top: 1px solid var(--rl-rule-strong);
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
}

.runners-ledger-shell .empty {
  border: 0;
  border-top: 1px solid var(--rl-rule);
  border-radius: 0;
  background: transparent;
}

.runners-ledger-shell .run-card.active,
.runners-ledger-shell .run-card.active.running,
.runners-ledger-shell .run-card.active.waiting_approval,
.runners-ledger-shell .run-card.done.failed,
.runners-ledger-shell .run-card.done.error,
.runners-ledger-shell .run-card.done.cancelled,
.runners-ledger-shell .run-card.done.rejected {
  background: var(--rl-surface);
  box-shadow: none;
}

.runners-ledger-shell .run-card.active,
.runners-ledger-shell .run-card.active.running {
  border-left: 3px solid var(--rl-violet);
}

.runners-ledger-shell .run-card.active.waiting_approval {
  border-left: 3px solid var(--rl-cyan);
}

.runners-ledger-shell .run-card.done.failed,
.runners-ledger-shell .run-card.done.error,
.runners-ledger-shell .run-card.done.cancelled,
.runners-ledger-shell .run-card.done.rejected {
  border-left: 3px solid var(--rl-red);
}

.runners-ledger-shell table,
.runners-ledger-shell .table,
.runners-ledger-shell .log-view,
.runners-ledger-shell .live-console,
.runners-ledger-shell pre {
  border-radius: var(--rl-radius);
  box-shadow: none;
}

.runners-ledger-shell th,
.runners-ledger-shell .table-head,
.runners-ledger-shell .list-header {
  background: var(--rl-well);
  color: var(--rl-ink);
  border-bottom-color: var(--rl-rule);
}

.rl-section {
  margin-top: 44px;
}

.rl-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rl-ink);
}

.rl-section-head h2 {
  margin: 0 0 8px;
  color: var(--rl-ink);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
}

.rl-count {
  color: var(--rl-muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.rl-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.rl-table {
  width: 100%;
  border-collapse: collapse;
}

.rl-table th {
  text-align: left;
  color: var(--rl-muted);
  padding: 11px 10px;
  border-bottom: 1px solid var(--rl-rule);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rl-table td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--rl-rule);
  vertical-align: middle;
}

.rl-row-move {
  min-width: 7.5rem;
  border: 0;
  border-bottom: 1px solid var(--rl-rule);
  border-radius: 0;
  background: transparent;
  color: var(--rl-ink);
  font: 500 0.75rem/1.3 var(--font-sans);
}

.rl-row-move:focus-visible {
  outline: 2px solid var(--rl-violet);
  outline-offset: 2px;
}

.rl-row-sub {
  color: var(--rl-muted);
  margin-top: 4px;
  font-size: 12px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rl-mobile-schedule-summary {
  display: none;
}

.rl-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.rl-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--rl-ink);
  font-size: 12px;
  font-weight: 500;
}

.rl-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rl-muted);
}

.rl-status-running .rl-status-dot,
.rl-tone-running .rl-mini-fill,
.rl-tone-running .rl-rail-progress {
  background-color: var(--rl-violet);
}

.rl-tone-running .rl-mini-runner,
.rl-tone-running .rl-rail-runner {
  color: var(--rl-violet);
}

.rl-status-input .rl-status-dot {
  background: var(--rl-cyan);
}

.rl-tone-input .rl-mini-fill,
.rl-tone-input .rl-rail-progress {
  background-color: var(--rl-green);
}

.rl-tone-input .rl-mini-runner,
.rl-tone-input .rl-rail-runner {
  color: var(--rl-violet);
}

.rl-status-retry .rl-status-dot,
.rl-tone-retry .rl-mini-fill,
.rl-tone-retry .rl-rail-progress {
  background-color: var(--rl-amber);
}

.rl-tone-retry .rl-mini-runner,
.rl-tone-retry .rl-rail-runner {
  color: var(--rl-amber);
}

.rl-status-complete .rl-status-dot,
.rl-tone-complete .rl-mini-fill,
.rl-tone-complete .rl-rail-progress {
  background-color: var(--rl-green);
}

.rl-tone-complete .rl-mini-runner,
.rl-tone-complete .rl-rail-runner {
  color: var(--rl-green);
}

.rl-status-failed .rl-status-dot,
.rl-tone-failed .rl-mini-fill,
.rl-tone-failed .rl-rail-progress {
  background-color: var(--rl-red);
}

.rl-tone-failed .rl-mini-runner,
.rl-tone-failed .rl-rail-runner {
  color: var(--rl-red);
}

.rl-focal {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--rl-rule-strong);
  border-left: 3px solid var(--rl-cyan);
  background: var(--rl-surface);
  padding: 24px;
}

.rl-focal-copy h2 {
  margin: 0 0 8px;
}

.rl-focal-copy p {
  color: var(--rl-muted);
  margin: 0;
}

.rl-stats {
  display: flex;
  gap: 0;
  margin: 0;
}

.rl-stats > div {
  min-width: 92px;
  padding: 0 16px;
  border-left: 1px solid var(--rl-rule);
}

.rl-stats dt {
  color: var(--rl-muted);
  font: 500 10px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rl-stats dd {
  margin: 4px 0 0;
  color: var(--rl-ink);
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
}

.rl-mini-rail {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 150px;
  height: 20px;
  vertical-align: middle;
}

.rl-mini-line,
.rl-mini-fill {
  position: absolute;
  left: 0;
  top: 9px;
}

.rl-mini-line {
  width: 100%;
  height: 1px;
  background: var(--rl-rule-strong);
}

.rl-mini-fill {
  height: 2px;
}

.rl-mini-runner {
  position: absolute;
  top: 1px;
  z-index: 2;
  background: var(--rl-paper);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 400 16px/1 var(--font-runner);
  letter-spacing: 0;
  transform-origin: 50% 72%;
}

.rl-mini-gate {
  position: absolute;
  top: 3px;
  z-index: 2;
  width: 2px;
  height: 14px;
  background: var(--rl-cyan);
}

.rl-mini-break {
  position: absolute;
  top: 2px;
  z-index: 3;
  width: 12px;
  height: 17px;
  background: var(--rl-paper);
  transform: skew(-18deg);
  border-left: 3px solid var(--rl-red);
  border-right: 3px solid var(--rl-red);
}

.rl-lifecycle {
  position: relative;
  margin: 42px 0 50px;
  padding: 0 4px;
}

.rl-rail-line {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 17px;
  height: 2px;
  background: var(--rl-rule-strong);
}

.rl-rail-progress {
  position: absolute;
  left: 4%;
  top: 17px;
  height: 2px;
}

.rl-rail-runner {
  position: absolute;
  top: 0;
  z-index: 2;
  background: var(--rl-paper);
  min-width: 22px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 400 20px/1 var(--font-runner);
  letter-spacing: 0;
  padding: 0 2px;
  transform-origin: 50% 72%;
  transition: left 240ms cubic-bezier(0.22, 0.75, 0.2, 1);
}

.rl-echo {
  color: var(--rl-amber);
  opacity: 0.45;
  margin-right: 10px;
}

.rl-rail-gate {
  position: absolute;
  top: 7px;
  z-index: 2;
  width: 3px;
  height: 23px;
  background: var(--rl-cyan);
}

.rl-rail-gate::after {
  content: "human";
  position: absolute;
  top: -17px;
  left: 6px;
  color: var(--rl-cyan);
  font: 500 9px/1 var(--font-mono);
}

.rl-rail-break {
  position: absolute;
  top: 10px;
  z-index: 3;
  width: 16px;
  height: 18px;
  background: var(--rl-paper);
  transform: skew(-18deg);
  border-left: 3px solid var(--rl-red);
  border-right: 3px solid var(--rl-red);
}

.rl-rail-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

.rl-rail-steps li {
  min-width: 0;
  text-align: center;
}

.rl-rail-node {
  display: block;
  width: 10px;
  height: 10px;
  margin: 13px auto 12px;
  border: 2px solid var(--rl-rule-strong);
  border-radius: 50%;
  background: var(--rl-paper);
}

.rl-rail-steps .is-done .rl-rail-node {
  border-color: var(--rl-green);
  background: var(--rl-green);
}

.rl-rail-steps .is-current .rl-rail-node {
  border-color: currentColor;
}

.rl-rail-label {
  color: var(--rl-muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.rl-rail-steps .is-done .rl-rail-label,
.rl-rail-steps .is-current .rl-rail-label {
  color: var(--rl-ink);
}

.rl-moving .rl-rail-runner,
.rl-tone-running .rl-mini-runner {
  animation: rl-gait 300ms steps(1) infinite;
  will-change: transform;
}

.rl-run-detail .run-banner,
.rl-run-detail .run-section,
.rl-decision-detail .panel,
.runners-ledger-shell .approval-filter-panel {
  border-radius: 0;
  box-shadow: none;
}

.rl-decision-detail .approval-main.rl-focal-action {
  border-left: 3px solid var(--rl-cyan);
}

@keyframes rl-gait {
  0%, 49% { transform: translateY(0) rotate(-2.5deg); }
  50%, 100% { transform: translateY(-2px) rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rl-moving .rl-rail-runner,
  .rl-tone-running .rl-mini-runner {
    animation: none;
    transform: none;
  }
  .rl-rail-runner,
  .rl-mini-runner {
    transition: none;
  }
}

@media (max-width: 800px) {
  .runners-ledger-shell {
    padding-left: 0;
    padding-right: 0;
  }
  .rl-page-head,
  .rl-focal {
    display: block;
  }
  .rl-actions {
    justify-content: flex-start;
    margin-top: 20px;
  }
  .rl-actions input[type="search"] {
    width: 100%;
  }
  .rl-page-head h1 {
    font-size: 25px;
  }
  .rl-stats {
    margin-top: 20px;
    flex-wrap: wrap;
  }
  .rl-stats > div {
    flex: 1 0 45%;
    margin-top: 12px;
  }
  .rl-table-wrap {
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .rl-table {
    min-width: 720px;
  }
  .rl-schedule-table-wrap {
    overflow: visible;
  }
  .rl-schedule-table {
    display: table;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  .rl-schedule-table th:nth-child(n+3),
  .rl-schedule-table td:nth-child(n+3) {
    display: none;
  }
  .rl-schedule-table th:first-child,
  .rl-schedule-table td:first-child {
    width: 104px;
  }
  .rl-schedule-table th,
  .rl-schedule-table td {
    padding-left: 6px;
    padding-right: 6px;
  }
  .rl-schedule-table .rl-row-title {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .rl-schedule-table .rl-row-sub,
  .rl-schedule-table .schedule-broken {
    display: none;
  }
  .rl-mobile-schedule-summary {
    display: block;
    margin-top: 4px;
    color: var(--rl-muted);
    font: 400 11px/1.45 var(--font-mono);
    overflow-wrap: anywhere;
  }
  .rl-work-table-wrap {
    overflow: visible;
  }
  .rl-work-table-wrap .rl-table {
    display: block;
    min-width: 0;
  }
  .rl-work-table-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .rl-work-table-wrap tbody,
  .rl-work-table-wrap tr {
    display: block;
  }
  .rl-work-table-wrap tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rl-rule);
  }
  .rl-work-table-wrap td {
    display: none;
    padding: 0;
    border: 0;
  }
  .rl-work-table-wrap td:nth-child(1),
  .rl-work-table-wrap td:nth-child(3),
  .rl-work-table-wrap td:nth-child(4),
  .rl-work-table-wrap td:nth-child(7) {
    display: block;
  }
  .rl-work-table-wrap td:nth-child(3) {
    align-self: start;
  }
  .rl-work-table-wrap td:nth-child(4),
  .rl-work-table-wrap td:nth-child(7) {
    grid-column: 1 / -1;
  }
  .rl-work-table-wrap .rl-row-sub {
    display: none;
  }
  .rl-work-table-wrap .rl-mini-rail {
    width: 100%;
  }
  .rl-work-table-wrap .rl-row-move {
    width: 100%;
    min-height: 44px;
  }
  .rl-lifecycle {
    padding-bottom: 10px;
  }
  .rl-rail-label {
    font-size: 8px;
  }
}

/* Respect users who ask for less motion: kill non-essential animation globally. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

/* ---- Typographic baseline ----------------------------------------------- *
 * Headings inherit the type scale by default so any view that does not set an
 * explicit size still lands on-grid. Components may step a heading up/down the
 * scale but must not invent sizes. */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-md);
  color: var(--text);
}
h1 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
h2 { font-size: var(--fs-xl); line-height: var(--lh-xl); }
h3 { font-size: var(--fs-md); line-height: var(--lh-md); }
h4 { font-size: var(--fs-base); line-height: var(--lh-base); }
h5, h6 { font-size: var(--fs-sm); line-height: var(--lh-sm); }

button,
input,
textarea,
select {
  font: inherit;
}

/* ============================================================================
 * BUTTON SYSTEM
 * Default (bare <button> / .button) = SECONDARY (outlined, neutral). Layer one
 * variant class for intent and one size class for scale. Rule of thumb: at
 * most ONE .primary per view — the single solid-accent call to action.
 * Sizes: .btn-sm (30px) and the default .btn-md (36px). Icon-only buttons add
 * .btn-icon for a square footprint.
 * ==========================================================================*/
button,
.button {
  border: var(--border-width) solid var(--border);
  background: var(--surface);
  color: var(--text);
  min-height: var(--btn-height-md);
  padding: var(--btn-pad-md);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-md);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

button:hover,
.button:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Primary — the single solid accent action. */
button.primary,
.button.primary {
  color: var(--text-on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: var(--fw-semibold);
}
button.primary:hover,
.button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Danger — destructive solid action. */
button.danger,
.button.danger {
  color: var(--text-on-accent);
  background: var(--danger-fg);
  border-color: var(--danger-fg);
  font-weight: var(--fw-semibold);
}
button.danger:hover,
.button.danger:hover {
  background: #a11717;
  border-color: #a11717;
}

button.warning,
.button.warning {
  color: var(--text-on-accent);
  background: var(--warn-fg);
  border-color: var(--warn-fg);
  font-weight: var(--fw-semibold);
}

/* Ghost — lowest-emphasis action (transparent until hover). For tertiary
 * actions and toolbar buttons that should recede. */
button.ghost,
.button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
button.ghost:hover,
.button.ghost:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

/* Size: small. */
button.btn-sm,
.button.btn-sm {
  min-height: var(--btn-height-sm);
  padding: var(--btn-pad-sm);
  font-size: var(--btn-font-sm);
}

/* Icon-only buttons: square footprint, centered glyph. */
button.btn-icon,
.button.btn-icon {
  padding: 0;
  width: var(--btn-height-md);
}
button.btn-icon.btn-sm,
.button.btn-icon.btn-sm {
  width: var(--btn-height-sm);
}

button:disabled,
.button:disabled,
button[disabled],
.button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
button:disabled:hover,
.button:disabled:hover {
  background: var(--surface);
  border-color: var(--border);
}

input,
textarea,
select {
  width: 100%;
  border: var(--border-width) solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  min-height: 38px;
  padding: var(--space-2) var(--space-2-5);
  font-size: var(--fs-base);
}

textarea {
  min-height: 110px;
  resize: vertical;
}

pre,
code {
  font-family: var(--font-mono);
}

/* ============================================================================
 * SHARED PRIMITIVES (Badge, OverflowMenu, Spinner, EmptyState extras)
 * Rendered verbatim on the /brand page; keep them token-pure.
 * ==========================================================================*/

/* Badge — neutral count/label pill. Tones carry meaning only. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  min-height: 18px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.badge-accent { background: var(--accent-tint); border-color: var(--accent-border); color: var(--accent); }
.badge-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.badge-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }
.badge-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
.badge-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-fg); }

/* Overflow (⋯) menu — collapses secondary actions behind one trigger; the
 * app's single <details> dropdown affordance. */
.overflow-menu {
  position: relative;
  display: inline-block;
}
.overflow-menu > summary {
  list-style: none;
  user-select: none;
  font-size: var(--fs-md);
}
.overflow-menu > summary::-webkit-details-marker {
  display: none;
}
.overflow-menu[open] > summary {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.overflow-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  display: grid;
  gap: var(--space-0-5);
  min-width: 180px;
  z-index: 30;
}
.overflow-menu-list button,
.overflow-menu-list a {
  width: 100%;
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
  min-height: 34px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-2-5);
  font-weight: var(--fw-normal);
}
.overflow-menu-list button:hover,
.overflow-menu-list a:hover {
  background: var(--surface-2);
  border-color: var(--border);
}
.overflow-menu-list .is-danger {
  color: var(--danger-fg);
}
.overflow-menu-list .is-danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

/* Spinner — the one loading affordance. */
.spinner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.spinner-inline { gap: var(--space-1-5); }
.spinner-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: spinner-rotate 0.7s linear infinite;
  flex: none;
}
@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

/* EmptyState extras (the base .empty card is defined further down). */
.empty-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
}

.topbar {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  font-weight: var(--fw-display);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--brand);
  font: 400 27px/1 var(--font-runner);
  letter-spacing: 0;
  flex: 0 0 auto;
}

.brand-name {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: var(--fw-display);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: lowercase;
  white-space: nowrap;
}

/* Optional per-deployment logo: lets operators running several RunYard
   installations tell them apart at a glance. Hidden entirely when the
   deployment sets no logo. */
.brand-deployment-mark {
  height: 22px;
  width: auto;
  max-width: 108px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 4px;
  opacity: 0.95;
}

@media (max-width: 640px) {
  .brand-deployment-mark {
    height: 18px;
    max-width: 76px;
  }
}

.brand-pill {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--soft);
  white-space: nowrap;
}

/* ---- Environment chip (which hub am I on?) ----
 * Sourced from /api/setup so the header always tells operators whether they
 * are pointed at prod, staging, dev, or local. Color encodes severity:
 * prod = green ink, staging = amber, dev = blue, local = grey.
 */
.env-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px 2px 6px;
  background: var(--panel);
  white-space: nowrap;
  max-width: 36ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.env-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}

.env-chip-host {
  display: none;
  font-weight: var(--fw-semibold);
}

.env-chip-show-host .env-chip-host {
  display: inline;
}

.env-chip-tag {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  color: var(--muted);
}

.env-chip[data-env="prod"],
.env-chip[data-env="production"] { border-color: #bbf7d0; background: #f0fdf4; }
.env-chip[data-env="prod"] .env-chip-dot,
.env-chip[data-env="production"] .env-chip-dot { background: var(--ok); }
.env-chip[data-env="prod"] .env-chip-tag,
.env-chip[data-env="production"] .env-chip-tag { color: var(--ok); }

.env-chip[data-env="staging"] { border-color: #fde68a; background: #fffbeb; }
.env-chip[data-env="staging"] .env-chip-dot { background: var(--warn); }
.env-chip[data-env="staging"] .env-chip-tag { color: var(--warn); }

.env-chip[data-env="dev"] { border-color: #bfdbfe; background: #eff6ff; }
.env-chip[data-env="dev"] .env-chip-dot { background: #2563eb; }
.env-chip[data-env="dev"] .env-chip-tag { color: #2563eb; }

.env-chip[data-env="local"] { border-style: dashed; }
.env-chip[data-env="local"] .env-chip-dot { background: var(--muted); }

.env-chip-loading {
  opacity: 0.6;
}

/* Admin-only "update available" / update-outcome pill in the topbar. Modeled on
   the env-chip + status pill styling; hidden unless there is something to say. */
.update-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  cursor: pointer;
}
.update-badge[hidden] {
  display: none;
}
.update-badge[data-tone="danger"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Logged-out (login screen): keep only the orienting brand + env chip in the
 * topbar. The primary nav, admin menu, and Logout are meaningless without a
 * session, so hide them to keep the login screen focused on the token form.
 * !important overrides the mobile media query that flexes .mobile-primary-nav. */
body.logged-out .nav,
body.logged-out .mobile-primary-nav {
  display: none !important;
}

/* Primary navigation lives in the topbar at every width (the old desktop
 * sidebar is gone — the OperatorDock is the only secondary surface). On
 * desktop this is a centered row; below 900px it becomes the second topbar
 * row and scrolls within itself. */
.mobile-primary-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.mobile-primary-nav a {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 6px;
  min-height: 44px;
  padding: 8px 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.mobile-primary-nav a.active {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-tint);
}

.mobile-primary-nav .nav-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  text-align: center;
}

.mobile-primary-nav .nav-badge[hidden] {
  display: none;
}

.nav button,
.nav a {
  min-height: 32px;
  padding: 6px 9px;
  font-size: var(--fs-base);
}

.approval-notifications {
  position: relative;
  color: var(--ink);
}

.approval-notifications.active,
.approval-notifications:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-tint);
}

.rl-topbar .approval-notifications.active,
.rl-topbar .approval-notifications:hover {
  border-color: transparent;
  color: var(--rl-violet);
  background: transparent;
}

.approval-notifications-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--panel);
}

.approval-notifications-dot[hidden] {
  display: none;
}

.operator-notifications {
  position: relative;
}

.operator-notifications-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(520px, calc(100vw - 24px));
  max-height: min(680px, calc(100vh - 88px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  padding: 12px;
}

.operator-notifications-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.operator-notifications-head > div {
  display: grid;
  gap: 2px;
}

.operator-notifications-head strong {
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}

.operator-notifications-pool,
.operator-notifications-state {
  margin: 0;
}

.operator-notifications-empty {
  margin: 0;
}

.operator-notifications-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.operator-notification-item {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  border: var(--border-width) solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  padding: var(--space-3);
}

.operator-notification-item[data-notification-type="approval"],
.operator-notification-item[data-notification-type="waiting_approval_run"] {
  border-left-color: var(--brand);
}

.operator-notification-item[data-notification-type="paused_run"],
.operator-notification-item[data-notification-type="run_queue"] {
  border-left-color: #d97706;
}

.operator-notification-item[data-notification-type="budget_stopped_run"],
.operator-notification-item[data-notification-type="runner_pool"] {
  border-left-color: var(--danger);
}

.operator-notification-title {
  margin: 0 0 var(--space-1);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

.operator-notification-title a {
  color: inherit;
  text-decoration: none;
}

.operator-notification-title a:hover,
.operator-notification-title a:focus-visible {
  color: var(--accent);
}

.nav .operator-notifications-panel a {
  min-height: 0;
  padding: 0;
  font-size: inherit;
}

.operator-notification-reason {
  margin: 0;
  overflow-wrap: anywhere;
}

.operator-notification-meta {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  overflow-wrap: anywhere;
}

.operator-notification-side {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 120px;
}

.operator-notification-when {
  color: var(--muted);
  font-size: var(--fs-2xs);
  text-align: right;
}

.operator-notifications-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.nav .operator-notifications-actions a {
  min-height: 32px;
  padding: 6px 9px;
  font-size: var(--fs-base);
}

.runners-ledger-shell .operator-notifications-panel {
  border-color: var(--rl-rule);
  border-radius: 0;
  background: var(--rl-paper);
  box-shadow: 0 18px 44px rgb(18 24 38 / 0.22);
}

.runners-ledger-shell .operator-notification-item {
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 4px 16px;
  border: 0;
  border-top: 1px solid var(--rl-rule);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 12px 6px 12px 12px;
}

.runners-ledger-shell .operator-notification-item:hover {
  background: var(--rl-surface);
}

.runners-ledger-shell .operator-notification-item[data-notification-type="approval"],
.runners-ledger-shell .operator-notification-item[data-notification-type="waiting_approval_run"] {
  border-left-color: var(--rl-cyan);
}

.runners-ledger-shell .operator-notification-item[data-notification-type="paused_run"] {
  border-left-color: var(--rl-amber);
}

.runners-ledger-shell .operator-notification-item[data-notification-type="budget_stopped_run"],
.runners-ledger-shell .operator-notification-item[data-notification-type="runner_pool"] {
  border-left-color: var(--rl-red);
}

.runners-ledger-shell .operator-notification-item[data-notification-type="run_queue"] {
  border-left-color: var(--rl-violet);
}

.runners-ledger-shell .operator-notification-side {
  align-items: flex-start;
  min-width: 0;
  gap: 7px;
  padding-top: 2px;
}

.runners-ledger-shell .operator-notification-side .work-card-action span {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--rl-ink);
  font: 500 11px/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.runners-ledger-shell .operator-notification-when {
  color: var(--rl-muted);
  font: 400 11px/1.7 var(--font-mono);
  white-space: nowrap;
  padding-top: 3px;
}

.runners-ledger-shell .operator-notification-title {
  font-size: 15px;
}

.runners-ledger-shell .operator-notification-reason {
  font-size: 12.5px;
}

.runners-ledger-shell .operator-notification-meta {
  margin-top: 4px;
  font-size: 11px;
}

@media (max-width: 720px) {
  .operator-notifications {
    position: static;
  }

  .operator-notifications-panel {
    position: fixed;
    top: calc(104px + env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100vh - 118px - env(safe-area-inset-top));
  }

  .operator-notification-item,
  .runners-ledger-shell .operator-notification-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .operator-notification-side,
  .runners-ledger-shell .operator-notification-side {
    align-items: flex-start;
  }

  .operator-notification-when,
  .runners-ledger-shell .operator-notification-when {
    text-align: left;
    padding-top: 0;
  }
}

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - 58px);
}

/* Desktop: the open dock is a real grid column — content shrinks, nothing
 * overlaps and nothing is covered. */
@media (min-width: 1181px) {
  .shell.shell-dock-open {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

.content {
  padding: 22px;
  min-width: 0;
}

.hero {
  min-height: 92vh;
  display: grid;
  align-items: end;
  background:
    linear-gradient(rgba(10, 20, 28, 0.14), rgba(10, 20, 28, 0.72)),
    url("/public/hub-hero.svg") center/cover no-repeat;
  color: #fff;
  padding: 32px;
}

.hero-inner {
  max-width: 940px;
  padding-bottom: 7vh;
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: 0.95;
  margin: 0 0 18px;
  letter-spacing: 0;
}

.hero p {
  font-size: var(--fs-xl);
  line-height: 1.55;
  max-width: 760px;
  margin: 0 0 24px;
}

.band {
  padding: 52px 32px;
}

.band-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.item,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.item h3,
.panel h2,
.panel h3 {
  margin: 0 0 8px;
}

.agent-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.agent-card-title h3 {
  min-width: 0;
  margin: 0;
}

.agent-avatar {
  position: relative;
  display: inline-grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-strong);
  line-height: 1;
}

.agent-avatar-glyph {
  font: 400 34px/1 var(--font-agent-avatar);
  letter-spacing: 0;
  transform: translateY(1px);
}

.agent-avatar-fallback {
  position: absolute;
  right: 3px;
  bottom: 2px;
  min-width: 15px;
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text-muted);
  font: 600 8px/12px var(--font-mono);
  text-align: center;
}

/* Unresolved agent: dashed warning border + question glyph, so a workflow
   step whose `agent={…}` reference is not backed by a registered agent
   never picks up a palette glyph and instead reads as a real state. */
.agent-avatar-unresolved {
  border-style: dashed;
  border-color: var(--warning, #d97706);
  background: color-mix(in srgb, var(--warning, #d97706) 12%, var(--surface, #fff));
  color: var(--warning, #b45309);
}

.agent-avatar-unresolved .agent-avatar-glyph {
  font: 700 22px/1 var(--font-sans, system-ui, sans-serif);
  transform: none;
  color: var(--warning, #b45309);
}

.agent-avatar-unresolved .agent-avatar-fallback {
  background: color-mix(in srgb, var(--warning, #d97706) 18%, transparent);
  color: var(--warning, #b45309);
}

.agent-avatar-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.agent-avatar-name {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  line-height: 1.2;
}

.agent-avatar-name-unresolved .agent-avatar-name-primary {
  color: var(--warning, #b45309);
  font-weight: 600;
}

.agent-avatar-name-raw {
  color: var(--muted, #6b7280);
  font-size: var(--fs-xs, 11px);
}

.agent-avatar-name-raw code {
  font-family: var(--font-mono);
  font-size: inherit;
}

/* Task-with-agent workflow node: shows the avatar chip inside the graph
   node so operators can distinguish resolved-agent steps from unresolved
   ones at a glance. */
.workflow-task-node {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workflow-task-node-label {
  font-size: 14px;
  line-height: 1.4;
}

.workflow-node-agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 6px 4px 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, #d9e0ea) 80%, transparent);
  min-width: 0;
}

.workflow-node-agent-name {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  font-size: 12px;
}

.workflow-node-agent-name-primary {
  font-weight: 600;
}

.workflow-node-agent-name-raw code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted, #6b7280);
}

.workflow-node-agent .agent-avatar {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}

.workflow-node-agent .agent-avatar-glyph {
  font-size: 22px;
}

.workflow-node-agent .agent-avatar-fallback {
  display: none;
}

.workflow-node-agent-unresolved {
  border-style: dashed;
  border-color: var(--warning, #d97706);
  background: color-mix(in srgb, var(--warning, #d97706) 10%, transparent);
  color: var(--warning, #b45309);
}

.workflow-task-node-unresolved {
  border-style: dashed !important;
  border-color: var(--warning, #d97706) !important;
}

.muted {
  color: var(--muted);
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar h1 {
  margin: 0;
  font-size: var(--fs-2xl);
  min-width: 0;
  overflow-wrap: anywhere;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumbs {
  margin: -4px 0 12px;
  font-size: var(--fs-sm);
  min-width: 0;
}

.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--muted);
}

.breadcrumbs li:first-child {
  flex: 0 0 auto;
}

.breadcrumbs li + li::before {
  content: "/";
  color: var(--muted);
  margin: 0 7px;
  flex: 0 0 auto;
}

.breadcrumbs a,
.breadcrumbs span {
  color: var(--muted);
  display: inline-block;
  max-width: min(30vw, 260px);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}

.breadcrumbs a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: var(--fw-semibold);
  max-width: min(42vw, 420px);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.stat strong {
  display: block;
  font-size: var(--fs-2xl);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.table th,
.table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-base);
}

.table th {
  background: #eef3f8;
  color: #334155;
}

/* Connections is a compact inventory, but each fact still needs a visible
   boundary. Without a flex gap, adjacent mono facts collapse into strings
   such as `0 repositories0 enabled`, which reads like corrupt data. */
.connections-table .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.connections-table .tag {
  display: inline-flex;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft);
  color: var(--ink);
  white-space: normal;
  overflow-wrap: anywhere;
}

.connections-table th:nth-child(2),
.connections-table td:nth-child(2) {
  min-width: 88px;
  white-space: nowrap;
}

.status {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  background: #fff;
}

.status.succeeded,
.status.recovered,
.status.approved,
.status.online {
  color: var(--ok);
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.status.failed,
.status.error,
.status.rejected,
.status.cancelled {
  color: var(--danger);
  border-color: #fecaca;
  background: #fef2f2;
}

.status.running,
.status.queued,
.status.pending,
.status.waiting_approval,
.status.paused,
.status.recovering {
  color: var(--warn);
  border-color: #fed7aa;
  background: #fffbeb;
}

.status.superseded {
  color: var(--muted);
  border-color: #cbd5e1;
  background: #f8fafc;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}

/* Balanced two-column split for peer panels (e.g. Tokens: Create | Existing).
 * The asymmetric 1fr/380px above is tuned for a main+sidebar layout; a fixed
 * 380px rail is too narrow for the Existing Tokens table and forced it to
 * overflow the panel (and the viewport) on desktop. Equal minmax(0,1fr)
 * tracks give each panel room and still collapse cleanly on phones. */
.split-even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split-even > .panel {
  min-width: 0;
}

.split-even .table {
  width: 100%;
  table-layout: fixed;
}

/* Long monospace ids (token ids, run ids) must wrap inside table cells rather
 * than push the table wider than its container. */
.table th,
.table td,
.table .muted {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.timeline {
  display: grid;
  gap: 8px;
}

.event {
  border-left: 3px solid var(--brand-2);
  padding: 8px 10px;
  background: #fff;
  overflow-wrap: anywhere;
}

.event time {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.json {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #101820;
  color: #dbeafe;
  border-radius: 8px;
  padding: 12px;
  max-height: 460px;
  overflow: auto;
}

.form-grid {
  display: grid;
  gap: 10px;
}

.form-grid label {
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: var(--fs-base);
}

.login {
  min-height: calc(100vh - 58px);
  display: grid;
  place-items: center;
  padding: 22px;
}

.login .panel {
  width: min(520px, 100%);
}

.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}

.hidden {
  display: none !important;
}

/* Toasts */
.toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  z-index: 100;
}

.toast {
  min-width: 220px;
  max-width: 360px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(15, 25, 35, 0.16);
  font-size: var(--fs-base);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: var(--ok);
}

.toast.error {
  border-color: #fecaca;
  background: #fef2f2;
  color: var(--danger);
}

/* Empty states */
.empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 22px;
  text-align: center;
}

.empty p {
  margin: 0 0 6px;
}

.empty p:last-child {
  margin-bottom: 0;
}

.admin-route-head {
  margin: 0 0 14px;
}

.admin-route-head h1 {
  margin: 0 0 6px;
  font-size: var(--fs-2xl);
  line-height: 1.2;
  letter-spacing: 0;
}

.admin-route-head p {
  margin: 0;
  color: var(--muted);
}

.runner-access-card {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.runner-access-card h2,
.runner-access-card p {
  margin: 0;
}

.runner-access-card .primary {
  justify-self: start;
}

.runner-access-summary {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.runner-access-health {
  display: grid;
  margin: 2px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.runner-access-health div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 10px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.runner-access-health div:last-child {
  border-bottom: 0;
}

.runner-access-health dt,
.runner-access-health dd {
  margin: 0;
}

.runner-access-health dt {
  color: var(--muted);
}

.runner-access-health dd {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
}

.runner-permission-panel {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding-top: 2px;
}

/* Runs-list empty state: same shape as .empty but with a clear headline + a
 * CTA row beneath. Keeps the content readable at 360px and ensures both
 * buttons hit the 44px tap-target rule on touch viewports. */
.empty-runs {
  padding: 24px 16px;
}

.empty-runs-headline {
  margin: 0 0 6px;
  font-size: var(--fs-lg);
}

.empty-runs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.empty-runs-actions .button {
  min-height: 36px;
}

@media (max-width: 640px) {
  .empty-runs-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .empty-runs-actions .button {
    min-height: 44px;
    width: 100%;
  }
}

/* Form helpers */
.field-hint {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
}

/* repoDir manual-override warning: the raw path escape hatch must read as
   "advanced / be careful" next to the friendly repo/project pickers. */
.field-hint.warn {
  color: var(--danger);
}

.req {
  color: var(--danger);
}

.field-error {
  color: var(--danger);
  font-size: var(--fs-xs);
  min-height: 0;
}

.field-error:empty {
  display: none;
}

label.inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

label.inline input {
  width: auto;
}

.notice {
  border: 1px solid #fed7aa;
  background: #fffbeb;
  color: var(--warn);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: var(--fs-base);
}

/* Rerun draft banner: surfaces the persisted edit so the operator never
 * loses an in-progress draft silently. Discard button aligns to the right
 * on wide viewports and drops below the text on narrow ones. */
.rerun-draft-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  justify-content: space-between;
}

.rerun-draft-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 220px;
}

.rerun-draft-banner-text strong { color: var(--ink); }

.rerun-draft-discard {
  flex: 0 0 auto;
  min-height: 36px;
}

/* The cross-page banner (runs list + source run detail) carries two actions
 * — Resume reopens the rerun editor, Discard wipes the draft. They share a
 * container so they stay aligned and wrap together at narrow widths. */
.rerun-draft-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.rerun-draft-banner-actions .button {
  min-height: 36px;
}

@media (max-width: 640px) {
  .rerun-draft-discard {
    width: 100%;
    min-height: 44px;
  }
  .rerun-draft-banner-actions {
    width: 100%;
  }
  .rerun-draft-banner-actions .button {
    flex: 1 1 auto;
    min-height: 44px;
  }
}

/* Token scope picker: preset buttons above collapsible scope groups. */
.scope-picker {
  display: grid;
  gap: 8px;
}

.scope-presets {
  flex-wrap: wrap;
}

.scope-picker .scope-preset-summary {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

details.scope-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--soft);
}

details.scope-group summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: #334155;
}

details.scope-group[open] summary {
  margin-bottom: 6px;
}

.form-grid label.scope-option,
.scope-option {
  display: block;
  margin: 4px 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.scope-option .scope-option-summary {
  display: block;
  margin-left: 22px;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

details.advanced {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--soft);
}

details.advanced summary {
  cursor: pointer;
  font-size: var(--fs-base);
  color: #334155;
}

details.advanced[open] summary {
  margin-bottom: 8px;
}

.copy-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.copy-row input {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  flex: 1;
  min-width: 0;
}

/* ---- Inline "copy share link" button (🔗) used across views ---- */
.share-link {
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  border-radius: 999px;
  min-height: 24px;
  padding: 0 7px;
  font-size: var(--fs-sm);
  line-height: 1;
  margin-left: 6px;
  cursor: pointer;
  vertical-align: middle;
}

.share-link:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-tint);
}

.deep-link-hint {
  margin: -6px 0 12px;
  font-size: var(--fs-sm);
}

/* Briefly highlight an item that was opened via deep link. */
.link-focus {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  transition: outline-color 0.3s ease;
  border-radius: 8px;
}

/* Mono pill for showing the absolute share URL inline. */
.kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.artifact-dl {
  font-size: var(--fs-2xs);
  text-decoration: underline;
}

/* ---- Workflow detail: tabs, code viewer, ReactFlow graph host ---- */
.workflow-tabs {
  margin-top: 6px;
}

.workflow-tab-body {
  margin-top: 4px;
}

.workflow-overview-body {
  max-width: 980px;
}

.subtabs {
  display: inline-flex;
  margin: 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.subtabs .tab {
  min-height: 30px;
  padding: 4px 10px;
  font-size: var(--fs-sm);
}

.workflow-code-panel,
.workflow-graph-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.workflow-code-header,
.workflow-graph-header,
.workflow-runs-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.workflow-code-actions,
.workflow-graph-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.learning-table td {
  vertical-align: top;
}

.confidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(80px, 1fr));
  gap: 4px 10px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.workflow-code-host {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
  overflow: hidden;
  max-height: 70vh;
}

.workflow-code {
  margin: 0;
  padding: 16px;
  overflow: auto;
  max-height: 70vh;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
  font-family: var(--font-mono);
  white-space: pre;
}

.workflow-code-host code.hljs {
  background: transparent;
  padding: 0;
}

.workflow-graph-host {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  min-height: 460px;
  height: clamp(420px, 60vh, 720px);
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  position: relative;
  overflow: hidden;
}

.workflow-graph-host.workflow-graph-mounted {
  background: #ffffff;
}

.workflow-graph-host .workflow-graph-loading {
  align-self: center;
  justify-self: center;
}

.workflow-graph-canvas {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 420px;
}

.workflow-graph-canvas .react-flow {
  min-height: 420px;
}

.workflow-graph-side {
  align-self: stretch;
  min-width: 180px;
  max-width: 220px;
  padding: 14px;
  border-left: 1px solid var(--line);
  background: var(--soft);
  overflow: auto;
  font-size: var(--fs-sm);
}

/* Desktop: the rail is rendered as a <details open> for mobile parity, but
   we hide the disclosure summary so it reads exactly like the pre-collapsible
   <aside>. The mobile breakpoint below re-enables the summary as a tap target. */
.workflow-graph-side > .workflow-graph-side-summary {
  display: none;
}

.workflow-graph-side ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}

.graph-side-pill {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-xs);
  width: fit-content;
}

.graph-side-agent { border-color: #c4b5fd; color: #4338ca; }
.graph-side-skill { border-color: #93c5fd; color: #1d4ed8; }
.graph-side-tag { border-color: #fcd34d; color: #92400e; }

.graph-fallback-note {
  margin: 8px 0 0;
}

.workflow-graph-static {
  width: 100%;
  height: auto;
  max-height: 70vh;
  background: #fff;
  border-radius: 8px;
}

.workflow-graph-canvas .react-flow__attribution {
  display: none;
}

.workflow-node {
  white-space: pre-line;
}

.workflow-node-agent,
.workflow-node-deploy {
  box-shadow: 0 8px 18px rgba(147, 51, 234, 0.12) !important;
}

.workflow-decision-node {
  width: 128px;
  height: 128px;
  position: relative;
  display: grid;
  place-items: center;
}

.workflow-decision-node::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1.5px solid #a16207;
  border-radius: 10px;
  background: #fffbeb;
  box-shadow: 0 10px 24px rgba(161, 98, 7, 0.14);
  transform: rotate(45deg);
}

.workflow-decision-inner {
  position: relative;
  z-index: 1;
  width: 94px;
  min-height: 74px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  text-align: center;
  color: #92400e;
  font-size: 11px;
  line-height: 1.12;
  pointer-events: none;
}

.workflow-decision-inner strong {
  font-size: 12px;
  line-height: 1.1;
  color: #78350f;
}

.workflow-decision-inner span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a16207;
}

.workflow-decision-inner small {
  max-width: 90px;
  max-height: 34px;
  overflow: hidden;
  color: #92400e;
}

/* Board operating graph — lane nodes. Left/Right handles are pinned by the
   LaneNode component at a fixed offset so cross-lane connectors stay level
   regardless of how many detail rows a lane carries. */
.workflow-lane-node {
  width: 220px;
  border-radius: 10px;
  border: 1px solid #d9e0ea;
  background: #ffffff;
  color: #15191f;
  box-shadow: 0 4px 12px rgba(15, 25, 35, 0.08);
  padding: 10px 12px 12px;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

.workflow-lane-inner {
  display: grid;
  gap: 8px;
}

.workflow-lane-head {
  display: grid;
  gap: 2px;
}

.workflow-lane-title {
  font-size: 14px;
  line-height: 1.2;
  color: #15191f;
}

.workflow-lane-owner {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #637083);
}

.workflow-lane-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 700;
}

.workflow-lane-count-value {
  font-size: 20px;
  line-height: 1;
  color: #0f172a;
}

.workflow-lane-count-unit {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #637083);
}

.workflow-lane-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.workflow-lane-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  line-height: 1.3;
}

.workflow-lane-row-key {
  color: var(--muted, #637083);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  font-weight: 600;
}

.workflow-lane-row-val {
  color: #15191f;
  overflow-wrap: anywhere;
}

.workflow-node-deploy.workflow-lane-node,
.workflow-node-deploy .workflow-lane-node {
  box-shadow: 0 8px 18px rgba(147, 51, 234, 0.12);
}

.workflow-graph-canvas .react-flow__edge-path {
  stroke-width: 2.2;
}

.workflow-graph-canvas .react-flow__edge-text {
  font-size: 11px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4px;
}

/* ---- Tabs (Agents sub-nav, workflow tabs) ---- */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tabs .tab {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  min-height: 38px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tabs .tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.tabs .tab:hover {
  color: var(--ink);
}

.agents-blurb {
  margin: 0 0 14px;
}

/* ---- Section heading (above run grids on home) ---- */
.section-heading {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 20px 0 10px;
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.section-heading .muted {
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-normal);
}

.run-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 14px;
  margin: 0;
}

.home-stats {
  margin-bottom: 6px;
}

/* ---- Run cards (Runs home view) ---- */
.run-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.run-grid.live .run-card.active {
  animation: card-rise 0.4s ease-out;
}

.run-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  display: grid;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.run-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 25, 35, 0.08);
}

.run-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.run-card-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.run-card-title {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.run-card-title a {
  text-decoration: none;
}

.run-card-title a:hover {
  color: var(--brand);
}

.run-card-sub,
.run-origin-detail {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.run-origin,
.run-origin-detail strong {
  color: #475569;
}

.run-origin::before {
  content: "from ";
  color: var(--muted);
}

.run-step {
  margin: 0;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.run-card.active {
  border-color: #fed7aa;
  border-top-color: var(--warn);
  background: linear-gradient(180deg, #fffbeb, #ffffff 70%);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.10);
}

.run-card.active.running {
  border-color: #bbf7d0;
  border-top-color: var(--ok);
  background: linear-gradient(180deg, #ecfdf5, #ffffff 70%);
  box-shadow: 0 4px 16px rgba(21, 128, 61, 0.10);
}

.run-card.active.waiting_approval {
  border-color: #fcd34d;
  background: linear-gradient(180deg, #fef3c7, #ffffff 70%);
}

.run-card.done {
  background: var(--panel);
}

.run-card.done.failed,
.run-card.done.error,
.run-card.done.cancelled,
.run-card.done.rejected {
  border-color: #fecaca;
  border-top-color: var(--danger);
  background: linear-gradient(180deg, #fef2f2, #ffffff 64%);
}

.run-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warn);
  display: inline-block;
  box-shadow: 0 0 0 0 currentColor;
  animation: run-pulse 1.4s ease-out infinite;
}

.run-card.active.running .run-pulse {
  background: var(--ok);
  color: var(--ok);
}

.run-card.active.waiting_approval .run-pulse,
.run-card.active.paused .run-pulse {
  background: var(--warn);
  color: var(--warn);
}

@keyframes run-pulse {
  0% { transform: scale(0.92); opacity: 1; }
  70% { transform: scale(1.3); opacity: 0.35; }
  100% { transform: scale(0.92); opacity: 1; }
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.run-folder {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.run-folder-icon {
  font-size: var(--fs-base);
}

.run-folder-banner {
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.run-card-foot {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.run-card-foot .button {
  min-height: 30px;
  padding: 4px 10px;
  font-size: var(--fs-sm);
}

.run-history-list {
  display: grid;
  gap: 14px;
  margin-bottom: 8px;
}

.run-history-day {
  display: grid;
  gap: 8px;
}

.run-history-day-runs {
  display: grid;
  gap: 8px;
}

.run-history-day-separator {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.run-history-day-separator::before,
.run-history-day-separator::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--line);
}

.run-history-day-separator > span:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  white-space: nowrap;
}

.run-history-day-summary {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: none;
  white-space: nowrap;
}

.runs-category-filter {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: max-content;
  padding: 0;
}

.runs-category-filter-label {
  margin-right: 4px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.runs-category-filter-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.runs-category-filter-option:hover {
  border-color: var(--brand-2, var(--brand));
  color: var(--ink);
}

.runs-category-filter-option.selected {
  border-color: color-mix(in srgb, var(--brand-2, var(--brand)) 62%, var(--line));
  background: color-mix(in srgb, var(--brand-2, var(--brand)) 12%, var(--panel));
  color: var(--ink);
  font-weight: var(--fw-semibold);
  box-shadow: inset 0 -2px 0 var(--brand-2, var(--brand));
}

.run-day-hidden-link {
  display: inline-flex;
  margin: 0;
  padding: 7px 12px;
  border: 0;
  color: var(--link, var(--accent));
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.run-day-hidden-link:hover {
  text-decoration: underline;
}

.run-history-row {
  display: grid;
  grid-template-columns: minmax(108px, auto) minmax(220px, 1.5fr) minmax(160px, 0.8fr) minmax(150px, auto);
  grid-template-areas:
    "status main chips actions"
    "status main meta actions"
    ". details details actions"
    ". digest digest actions";
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

.run-history-row.failed,
.run-history-row.error,
.run-history-row.cancelled,
.run-history-row.rejected {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, #fff7f7, var(--panel) 42%);
}

.run-history-row.succeeded,
.run-history-row.recovered,
.run-history-row.approved {
  border-left-color: var(--ok);
}

/* Active (in-flight) runs use the same row chrome as historical ones. A 2px
   solid accent left border and a flat, subtle tint mark them — no gradient —
   so the status badge stays the highest-contrast element in the row. */
.run-history-row.active {
  border-left-width: 2px;
  border-left-color: var(--brand-2, var(--brand, #2563eb));
  background: color-mix(in srgb, var(--brand-2, #2563eb) 4%, var(--panel));
}
.run-history-row.active.running { border-left-color: var(--ok); }
.run-history-row.active.waiting_approval { border-left-color: var(--warn); }
.run-history-row.active.paused { border-left-color: var(--warn); }
.run-history-row.active.queued { border-left-color: var(--muted); }

.run-history-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  grid-area: status;
}

.run-history-run-state {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
}

.run-history-outcome-detail,
.run-card-outcome-detail {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 0.82rem;
}

.run-card-outcome-detail { font-weight: 600; }

.run-pulse-row {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
}

.run-history-status,
.run-history-main,
.run-history-chips,
.run-history-meta,
.run-history-actions {
  min-width: 0;
}

.run-history-title {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.run-history-main { grid-area: main; }

.run-history-title a {
  color: var(--ink);
  text-decoration: none;
}

.run-history-title a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.run-history-sub {
  margin: 3px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
}

.run-history-signal {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.run-history-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  grid-area: chips;
}

.run-history-details {
  grid-area: details;
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.run-history-details > summary {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  cursor: pointer;
  color: var(--muted);
}

.run-history-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 4px;
}

.run-history-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3px 8px;
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
  grid-area: meta;
}

.run-history-meta span + span::before {
  content: "·";
  margin-right: 8px;
}

.run-history-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  grid-area: actions;
}

.run-history-actions .share-link,
.run-history-actions .btn-sm,
.run-history-actions .button.btn-sm,
.run-history-actions .overflow-menu > summary {
  min-height: 36px;
}

@media (max-width: 900px) {
  .run-history-row {
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto;
    grid-template-areas:
      "status main actions"
      "chips  chips actions"
      "meta   meta actions"
      "details details details"
      "digest digest digest";
  }

  .run-history-status { grid-area: status; }
  .run-history-main { grid-area: main; }
  .run-history-chips { grid-area: chips; }
  .run-history-meta {
    grid-area: meta;
    flex-direction: row;
    flex-wrap: wrap;
    white-space: normal;
  }
  .run-history-actions { grid-area: actions; }
}

@media (max-width: 640px) {
  .run-history-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "status actions"
      "main main"
      "meta meta"
      "chips chips"
      "details details"
      "digest digest";
    align-items: start;
    padding: 12px;
  }

  .run-history-actions .button,
  .run-history-actions .share-link,
  .run-history-actions .overflow-trigger {
    min-height: 44px;
  }

  .run-history-actions {
    justify-content: flex-end;
    width: auto;
  }

  .run-history-actions .share-link,
  .run-history-actions .btn-sm,
  .run-history-actions .button.btn-sm,
  .run-history-actions .overflow-menu > summary {
    min-height: 44px;
  }

  .run-history-actions > .btn-sm,
  .run-history-actions > .button.btn-sm {
    display: none;
  }

  .run-history-actions .overflow-menu-list button,
  .run-history-actions .overflow-menu-list a {
    min-height: 44px;
  }
}

.artifact-list {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: var(--fs-sm);
  display: grid;
  gap: 2px;
}

/* ---- Pills (skills/agents/tools) + chips (project/branch/version) ---- */
.pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pills .pill {
  background: var(--brand-tint);
  border: 1px solid #b7e7df;
  color: var(--brand);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.pills .pill a {
  color: inherit;
  text-decoration: none;
}

.pills .pill a:hover {
  text-decoration: underline;
}

.pills .pill.tag {
  background: var(--soft);
  border-color: var(--line);
  color: var(--ink);
}

.pill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  flex-wrap: wrap;
}

.pill-label {
  color: var(--muted);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-semibold);
  min-width: 70px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--ink);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inline currentColor icons (chips, buttons). Never let a flex container
 * squash the glyph when the label is long, and nudge baseline-positioned
 * uses (outside flex) up so they sit on the text's optical centre. */
.ic {
  flex: none;
  vertical-align: -0.125em;
}

.chip-project {
  background: #ecfeff;
  border-color: #bae6fd;
  color: #0369a1;
}

.chip-branch {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.chip-version {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #5b21b6;
}

.chip-runner {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}

.chip-queue {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.chip-queue.empty {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

/* "N files" chip — surfaces the real changed-file count on the runs list
 * next to the churn pill so operators can scan history without opening each
 * run. Tuned quieter than chip-branch/chip-project so it recedes when both
 * appear on the same row. */
.chip-files {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

/* Metered usage chip — "12.3k tok · $0.42". Quiet amber so cost is scannable
 * on the runs list without competing with status. */
.chip-usage {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
  font-variant-numeric: tabular-nums;
}

/* Paused chip on run lists: the run is parked on a recoverable interruption
 * and needs a human to resume it. Same amber family as the pause notice. */
.chip-paused {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}

/* Budget chips on run lists: near-limit warning while the run can still be
 * saved (warn), and the hard stop after (stop). */
.chip-budget-warn {
  background: #fffbeb;
  border-color: #fbbf24;
  color: #92400e;
  font-variant-numeric: tabular-nums;
}

.chip-budget-stop {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.chip-automation {
  background: #ecfdf5;
  border-color: #99f6e4;
  color: #115e59;
}

/* Needs-attention triage strip above the runs list: paused, waiting-approval,
 * and budget-stopped runs, each with its unblocking action inline. Amber
 * frame — parked work, not failure. Renders only when something needs a
 * human. */
.attention-strip {
  border: 1px solid #fcd34d;
  border-left: 4px solid #d97706;
  background: #fffbeb;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0;
}

.attention-strip-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.attention-strip-head strong {
  color: #78350f;
}

.attention-approvals-link {
  margin-left: auto;
}

.attention-group-heading {
  margin: 8px 0 2px;
  font-weight: var(--fw-bold);
  color: #92400e;
}

.attention-run-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.attention-run {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}

.attention-run-title {
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attention-run-detail {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attention-run-action {
  margin-left: auto;
}

/* Near-limit budget pairing on the run-detail meta strip. */
.run-meta-strip li[data-near-limit="true"] {
  color: #92400e;
  font-weight: var(--fw-bold);
}

/* Budget-stop callout on run detail: the run was terminated on purpose by its
 * spend ceiling — visually distinct from a generic failure banner. */
.run-budget-notice {
  border: 1px solid #fcd34d;
  border-left: 4px solid #d97706;
  background: #fffbeb;
  color: #78350f;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0;
}

/* Pause callout: recoverable interruption + the action that unblocks it.
 * Amber like waiting_approval (parked, not failed); the resume button rides
 * inside the notice. */
.run-pause-notice {
  border: 1px solid #fcd34d;
  border-left: 4px solid #d97706;
  background: #fffbeb;
  color: #78350f;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.run-pause-notice button {
  margin-left: auto;
}

/* ---- Semantic chip modifiers --------------------------------------------
 * Differentiate chips by role on the run-detail meta strip so the page is
 * easier to scan: status pops, IDs are quiet & monospaced (fingerprint, not
 * focal), timestamps fade to a tertiary muted treatment. The modifiers
 * compose with the existing .chip-* colour classes (e.g. chip-runner can
 * also be a chip--id). */
.chip--status {
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(15, 25, 35, 0.08);
}

.chip--id {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  background: var(--soft);
  border-color: var(--line);
  color: var(--ink-soft, var(--muted));
  /* Quieter than the coloured chips above so id-like values recede. */
  opacity: 0.92;
}

.chip--time {
  color: var(--muted);
}

.run-meta-strip li.chip--time {
  color: var(--muted);
}

/* ---- Runner pool / capacity affordances ---- */
.runner-pool-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px 0;
}

.runner-capacity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.runner-capacity.saturated .runner-capacity-count {
  color: var(--danger);
  font-weight: var(--fw-semibold);
}

.runner-slots {
  display: inline-flex;
  gap: 3px;
}

.runner-slot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #e5e7eb;
  border: 1px solid #d1d5db;
}

.runner-slot.filled {
  background: var(--ok, #16a34a);
  border-color: #15803d;
}

/* ---- Queued run banner on cards / detail ---- */
.run-card.queued {
  border-color: #fed7aa;
  border-top-color: #f59e0b;
  background: linear-gradient(180deg, #fff7ed, #ffffff 70%);
}

.run-queue-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: var(--fs-sm);
}

.run-queue-icon {
  font-size: var(--fs-md);
}

.run-queue-text {
  font-weight: var(--fw-semibold);
}

.run-queue-detail {
  font-size: var(--fs-xs);
}

.run-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 0;
}

.run-card-title a {
  text-decoration: none;
}

.run-card-title a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.run-desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  /* 2-line clamp keeps each card compact while giving substance. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.run-meta {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-xs);
}

.run-meta .run-step {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.run-meta .run-timing {
  flex: 0 0 auto;
  color: var(--muted);
  white-space: nowrap;
}

.run-cap-link {
  font-size: var(--fs-xs);
  color: var(--brand);
  text-decoration: none;
  background: var(--brand-tint);
  border: 1px solid #b7e7df;
  border-radius: 6px;
  padding: 1px 6px;
}

.run-cap-link:hover {
  text-decoration: underline;
}

/* ---- Run detail header sub-row ---- */
.run-detail-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -8px 0 8px;
  font-size: var(--fs-sm);
}

.run-detail-desc {
  margin: 0 0 10px;
  font-size: var(--fs-md);
  line-height: 1.5;
  /* 2-line clamp for the descriptive paragraph. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.run-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  /* Make sure the wrapping flex parent never grows past its container — long
   * runner ids or branch names previously pushed the row sideways on narrow
   * viewports. */
  min-width: 0;
  max-width: 100%;
}

/* Run-detail metadata: core timing strip (.run-detail-meta-core > .run-meta-strip)
 * stays visible above the fold so the operator can answer "what happened &
 * how long" with zero clicks. Verbose fingerprint chips (project, branch,
 * runner, workflow version) collapse into the <details> so they don't crowd
 * the page on every visit. Toggle state persists per run. */
.run-detail-meta-core {
  margin: 0 0 10px;
}

.run-detail-meta {
  margin: 4px 0 10px;
}

.run-detail-meta-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  margin: 0 0 6px;
  border-radius: 8px;
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  /* 44px tap target so the disclosure passes mobile touch heuristics. */
  min-height: 44px;
}

.run-detail-meta-summary::-webkit-details-marker {
  display: none;
}

.run-detail-meta-summary::before {
  content: "▸";
  display: inline-block;
  font-size: var(--fs-2xs);
  color: var(--muted);
  transition: transform 0.15s ease;
  width: 10px;
  text-align: center;
}

.run-detail-meta[open] > .run-detail-meta-summary::before {
  transform: rotate(90deg);
}

.run-detail-meta-summary:hover {
  color: var(--ink);
}

.run-detail-meta-body {
  /* The body inherits the existing run-meta-strip / run-detail-chips styles,
   * which already handle wrapping. Constrain max-width so it cannot bleed
   * past its container even when contents are long. */
  min-width: 0;
  max-width: 100%;
}

.run-detail-meta-body .run-meta-strip,
.run-detail-meta-body .run-detail-chips {
  margin-bottom: 6px;
}

.run-detail-meta-body .run-detail-chips:last-child,
.run-detail-meta-body .run-meta-strip:last-child {
  margin-bottom: 0;
}

.run-outcome-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.run-outcome-summary p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  min-width: 0;
}

.run-outcome-summary span,
.run-outcome-summary strong {
  display: block;
  min-width: 0;
}

.run-outcome-summary strong {
  margin-top: 3px;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

/* GitHub-style +added/-removed churn chip. Used inline in the outcome summary,
 * run cards, and history rows so operators can eyeball diff size at a glance.
 * Both halves stay on one line — the em-dash for deletions renders wider than a
 * hyphen, which keeps the numbers visually parallel. */
.code-churn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}
.code-churn-add {
  color: #1a7f37;
  font-weight: var(--fw-semibold, 600);
}
.code-churn-del {
  color: #cf222e;
  font-weight: var(--fw-semibold, 600);
}
/* When the chip renders inside .run-outcome-summary's strong slot it inherits
 * the tile's typographic scale — reset to match the surrounding number so the
 * green/red stays visually anchored to the tile. */
.run-outcome-summary strong .code-churn {
  font-size: var(--fs-sm);
}
/* Card / history-row usage sits alongside project & branch chips; the border
 * echoes .chip so churn doesn't visually collapse into the run title. */
.run-card-chips .code-churn,
.run-history-chips .code-churn {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft);
}

/* One-sentence outcome digest — mirrors the muted, two-line-clamped voice of
 * .run-desc so digests never blow out a card's height. Empty for old runs
 * (see runDigest); when present it sits below the chips row so the operator
 * has a plain-English readout without opening the run. */
.run-card-digest {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.run-history-digest {
  grid-area: digest;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.run-outcome-digest {
  margin: -4px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.run-narrative {
  display: grid;
  gap: 18px;
  margin: 0 0 24px;
  max-width: 86ch;
}
.run-narrative h2 {
  margin: 0 0 6px;
  font-size: var(--fs-lg);
  line-height: 1.25;
}
.run-narrative-prose {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.run-narrative-stop {
  border-left: 3px solid var(--warn);
  padding-left: 12px;
}
.run-original-request {
  margin-top: 8px;
}
.run-original-request summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.run-original-request pre {
  margin: 8px 0 0;
  max-height: 38vh;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.run-changed-file-list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.run-changed-file-list code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.run-id-mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Copy-on-click variant used in the run banner subtitle. <button> base styles
 * would override the chip look, so re-anchor font/color/border here and bump
 * the tap target on narrow viewports. */
button.run-id-mono,
.run-id-mono-copy {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  line-height: 1.4;
}

button.run-id-mono:hover,
.run-id-mono-copy:hover,
button.run-id-mono:focus-visible,
.run-id-mono-copy:focus-visible {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--brand);
}

@media (max-width: 640px) {
  .run-id-mono {
    max-width: min(220px, 70vw);
  }
  button.run-id-mono,
  .run-id-mono-copy {
    min-height: 44px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---- Workflow card (list) + detail page ---- */
.workflow-card .workflow-desc {
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.workflow-card .workflow-meta {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.workflow-detail-desc {
  font-size: var(--fs-md);
  line-height: 1.5;
  margin: 0 0 6px;
}

.workflow-start-summary {
  margin: -8px 0 8px;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.workflow-technical-details {
  margin-top: 12px;
}

.workflow-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  align-items: center;
}

.wf-run-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.wf-run-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.wf-run-row .wf-run-title {
  flex: 1 1 60%;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.wf-run-row .wf-run-title:hover {
  color: var(--brand);
  text-decoration: underline;
}

.wf-run-row .wf-run-when {
  font-size: var(--fs-xs);
}

.wf-run-failure-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 100%;
  min-width: 0;
  padding-left: 28px;
}

.wf-run-failure-cause {
  color: var(--danger);
  font-weight: var(--fw-semibold);
}

.wf-run-fix {
  margin-left: 2px;
}

/* ---- Agent cards ---- */
.agent-card .agent-desc {
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Approval inbox + detail ---- */
.approval-filter-panel {
  margin: 0 0 12px;
}

.approval-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.approval-filter-bar input,
.approval-filter-bar select {
  width: auto;
  min-width: 132px;
  max-width: 220px;
}

.approval-filter-bar input {
  flex: 1 1 140px;
}

.approval-groups {
  display: grid;
  gap: 16px;
}

.approval-group {
  display: grid;
  gap: 8px;
}

.approval-group h2 {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.35;
}

.approval-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.approval-card {
  display: grid;
  gap: 8px;
}

.approval-card h3 {
  margin: 0;
  overflow-wrap: anywhere;
}

.approval-card h3 a {
  text-decoration: none;
}

.approval-card h3 a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.approval-card-head,
.approval-detail-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.approval-card-desc {
  margin: 0;
  line-height: 1.45;
}

.approval-card-rows,
.approval-summary,
.approval-outcomes {
  display: grid;
  gap: 6px;
  margin: 0;
}

/* Named options. Each choice sits on its own row with the consequence beside
   it, because the label alone ("Fix blockers only") does not tell you what
   happens to the ticket — and a row of bare buttons invites guessing. */
.approval-option-actions {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.approval-option {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.approval-option button {
  flex: 0 0 auto;
  min-width: 160px;
}

.approval-option-effect {
  flex: 1 1 260px;
  font-size: 0.92em;
  line-height: 1.4;
}

.approval-card-rows div,
.approval-summary div,
.approval-outcomes div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.approval-card-rows dt,
.approval-summary dt,
.approval-outcomes dt,
.approval-facts dt {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.approval-card-rows dd,
.approval-summary dd,
.approval-outcomes dd,
.approval-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.approval-card-rows dd {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.approval-card-meta,
.approval-detail-sub {
  margin: 0;
  font-size: var(--fs-sm);
}

.approval-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
  align-items: start;
}

.approval-description {
  margin: 0 0 12px;
  line-height: 1.55;
}

.approval-proposed-change {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.approval-ask-line {
  margin: 8px 0 10px;
  font-size: var(--fs-lg);
  line-height: 1.45;
}

.approval-findings {
  margin: 10px 0 14px;
}

.approval-findings h3 {
  margin: 0 0 8px;
}

.approval-findings ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 28px;
}

.approval-finding-row {
  display: grid;
  grid-template-columns: 24px auto minmax(160px, 0.72fr) minmax(240px, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 8px;
  padding: 7px 10px;
}

.approval-finding-state {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  color: var(--muted);
}

.approval-finding-state input {
  margin: 0;
}

.approval-finding-title {
  font-weight: 700;
}

.approval-finding-summary {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-outcome-block {
  margin: 14px 0 0;
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 8px;
  padding: 12px;
}

.approval-outcome-block h3,
.approval-outcome-block p {
  margin: 0 0 8px;
}

.approval-brief-sections {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}

.approval-brief-section {
  display: grid;
  gap: 6px;
}

.approval-brief-section h3 {
  margin: 0;
}

.approval-brief-section p {
  margin: 0;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.approval-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.approval-facts > div,
.approval-summary,
.approval-outcomes {
  margin: 0;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  overflow-wrap: anywhere;
}

.approval-summary,
.approval-outcomes {
  margin: 12px 0;
}

.approval-run-id {
  display: inline-block;
  margin-left: 6px;
  overflow-wrap: anywhere;
}

.approval-decision {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.approval-decision label {
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: var(--fs-base);
}

.approval-resolved {
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 8px;
  padding: 12px;
}

.approval-side .json {
  max-height: 520px;
}

/* ---- Mobile tweaks for the new dense layouts ---- */
@media (max-width: 640px) {
  .breadcrumbs li + li::before {
    margin: 0 5px;
  }

  .breadcrumbs a,
  .breadcrumbs span {
    max-width: 28vw;
  }

  .breadcrumbs [aria-current="page"] {
    max-width: 38vw;
  }

  .approval-finding-row {
    grid-template-columns: 24px auto minmax(0, 1fr);
  }

  .approval-finding-summary {
    grid-column: 2 / -1;
    white-space: normal;
  }

  .pill-label {
    min-width: 56px;
  }

  .run-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .wf-run-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .wf-run-row .wf-run-title {
    white-space: normal;
  }
}

/* ---- Tablet / phone: stack the console and move primary nav into the topbar ---- */
@media (max-width: 900px) {
  .shell,
  .split,
  .approval-detail-grid {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 16px;
    /* Honour the home indicator / bottom browser chrome. */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .runners-ledger-shell .split > .panel + .panel {
    border-left: 0;
    border-top: 1px solid var(--rl-rule);
    padding-left: 0;
  }

  /* Two explicit rows: brand + account menu share the top row; the primary
     tabs get their own full-width row below — so "More / Logout" never eats a
     whole separate row of its own. Honour the notch / safe-area inset. */
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 58px;
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    gap: 8px 10px;
  }

  .brand {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
  }

  .nav {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    flex-wrap: nowrap;
    gap: 6px;
  }

  /* Dial the environment chrome down so HUB / host / PROD don't dominate the
     first screen — keep just the status dot + a compact tag. */
  .brand-pill {
    display: none;
  }

  .env-chip-host {
    display: none;
  }

  .env-chip {
    padding: 2px 6px;
  }

  .mobile-primary-nav {
    display: flex;
    grid-row: 2;
    grid-column: 1 / -1;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  /* Equal columns that never shrink below their label: with primary
     tabs the row scrolls within itself (overflow-x above) instead of
     clipping labels or forcing a horizontal page scrollbar. */
  .mobile-primary-nav a {
    flex: 1 0 auto;
    min-width: max-content;
    padding: 8px 6px;
    font-size: var(--fs-sm);
    justify-content: center;
    text-align: center;
  }

  .rl-topbar .mobile-primary-nav {
    gap: 18px;
  }

  .rl-topbar .mobile-primary-nav a {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 0;
  }

  /* The deep-link hint is desktop nicety chrome; hide it on phones so the first
     viewport leads with status, not instructions. */
  .deep-link-hint {
    display: none;
  }

  /* Touch-friendly targets. */
  button,
  .button,
  .nav button,
  .nav a,
  .mobile-primary-nav a,
  input,
  select {
    min-height: 44px;
  }

  .toolbar h1 {
    font-size: var(--fs-xl);
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .toolbar-actions {
    width: 100%;
  }

  /* Landing: dial the marketing hero down to phone scale. */
  .hero {
    min-height: 78vh;
    padding: 20px;
  }

  .hero h1 {
    font-size: var(--fs-display);
  }

  .hero p {
    font-size: var(--fs-md);
  }

  .band {
    padding: 28px 16px;
  }

  /* Toasts span the bottom of the viewport instead of a fixed 360px card. */
  .toasts {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .toast {
    max-width: none;
  }

  /* Run grid: single column on phones so cards keep readable width. */
  .run-grid {
    grid-template-columns: 1fr;
  }

  /* Workflow detail tabs: stack the visual graph side rail under the canvas. */
  .workflow-graph-canvas {
    grid-template-columns: minmax(0, 1fr);
  }

  .workflow-graph-side {
    border-left: 0;
    border-top: 1px solid var(--line);
    max-width: none;
  }

  .workflow-code-host,
  .workflow-code {
    max-height: 60vh;
  }
}

/* ---- Phone: data tables become stacked, labeled cards (no horizontal overflow) ----
   The column header is kept as an inline label on the LEFT of each value so
   the user never loses the meaning of a cell. Visually-hide thead (don't
   `display:none` it) so screen readers still announce row context. */
@media (max-width: 640px) {
  .table {
    border: 0;
    background: transparent;
  }

  /* Visually hide the header row but keep it in the accessibility tree. */
  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .table,
  .table tbody {
    display: block;
    width: 100%;
  }

  .table tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;
    padding: 4px 0;
  }

  .table td {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border: 0;
    padding: 8px 12px;
    overflow-wrap: anywhere;
  }

  .table td:empty {
    display: none;
  }

  /* Label sits to the LEFT of the value, capped so long values stay readable. */
  .table td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 38%;
    color: var(--muted);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  /* Cells with no label (action buttons) shouldn't reserve an empty label column. */
  .table td:not([data-label])::before {
    content: none;
    flex: 0;
  }
}

/* ---- Failure / cancellation diagnostics ---------------------------------- */
.run-reason-hint {
  margin: 6px 0 4px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--danger);
  font-size: var(--fs-sm);
  display: flex;
  gap: 6px;
  align-items: flex-start;
  overflow-wrap: anywhere;
}

.run-reason-hint span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-card.active.waiting_approval .run-reason-hint {
  background: #fffbeb;
  border-color: #fed7aa;
  color: var(--warn);
}

.diagnostics-panel {
  border-left: 4px solid var(--danger);
  background: linear-gradient(180deg, #fef2f2, #ffffff 70%);
  margin-bottom: 16px;
}

.diagnostics-panel.diagnostics-waiting_approval,
.diagnostics-panel.diagnostics-paused {
  border-left-color: var(--warn);
  background: linear-gradient(180deg, #fffbeb, #ffffff 70%);
}

.diagnostics-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.diagnostics-head h2 {
  margin: 0;
}

.diagnostics-intro {
  margin: 4px 0 8px;
}

.diagnostics-headline {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

.diagnostics-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0 0 12px;
  font-size: var(--fs-sm);
}

.diagnostics-facts dt {
  color: var(--muted);
  font-weight: var(--fw-medium);
}

.diagnostics-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.diagnostics-reason,
.diagnostics-logs,
.diagnostics-timeline,
.diagnostics-approval-quote,
.diagnostics-artifacts {
  margin-top: 12px;
}

.diagnostics-reason > summary {
  cursor: pointer;
  font-weight: var(--fw-semibold);
  margin-bottom: 4px;
}

.diagnostics-pre {
  background: #0f172a;
  color: #f8fafc;
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  font-size: var(--fs-xs);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 6px 0;
}

.diagnostics-approval-quote blockquote {
  margin: 6px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--warn);
  background: #fffbeb;
  border-radius: 0 8px 8px 0;
  font-size: var(--fs-sm);
}

.diagnostics-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.diagnostics-event-list li {
  display: grid;
  grid-template-columns: 150px 180px 1fr;
  gap: 8px;
  font-size: var(--fs-xs);
  padding: 4px 6px;
  border-radius: 6px;
}

/* Live indicator — sits at the top of the diagnostics event list while the
 * run is still streaming events so it's clear the list isn't terminal yet.
 * The pulsing dot uses a CSS animation rather than a JS interval so it
 * keeps animating with the page in the background. The li overrides the
 * three-column grid above because it carries no time/type/message pair. */
.diagnostics-event-list .diagnostics-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  width: max-content;
  grid-template-columns: none;
  background: rgba(21, 128, 61, 0.08);
  color: var(--ok);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 4px;
  border-radius: 999px;
}

/* Keep the rounded live-pill background even when it happens to sit in
 * an odd row position — the generic odd-row tint would otherwise blend
 * into the off-white panel and wash out the indicator. */
.diagnostics-event-list .diagnostics-live-indicator:nth-child(odd) {
  background: rgba(21, 128, 61, 0.08);
}

.diagnostics-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.6);
  animation: diagnosticsLivePulse 1.6s ease-out infinite;
}

@keyframes diagnosticsLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(21, 128, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .diagnostics-live-dot {
    animation: none;
  }
}

/* Visually hidden but still announced by screen readers — used for the
 * aria-live "Copied" announcement attached to clipboard actions. */
.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;
}

.diagnostics-event-list li:nth-child(odd) {
  background: rgba(15, 23, 42, 0.03);
}

.diagnostics-event-list time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.diagnostics-event-type {
  color: var(--brand);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.diagnostics-event-msg {
  overflow-wrap: anywhere;
}

.diagnostics-logs-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.diagnostics-logs-head h4,
.diagnostics-timeline h4,
.diagnostics-approval-quote h4,
.diagnostics-artifacts h4 {
  margin: 0;
  font-size: var(--fs-base);
}

.diagnostics-panel .copy-btn {
  font-size: var(--fs-xs);
  padding: 8px 12px;
}

/* Long event messages clamp to ~6 lines and surface a "Show full message"
 * affordance instead of dumping a 200-line stderr blob into the row.
 * The wrapper is the actual grid cell so the toggle sits below the text
 * without breaking the time/type/message column layout. */
.diagnostics-event-msg-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.diagnostics-event-msg {
  overflow-wrap: anywhere;
  display: block;
  width: 100%;
  max-height: 8.7em; /* ~6 lines at line-height 1.45 */
  overflow: hidden;
  position: relative;
  white-space: pre-wrap;
}

.diagnostics-event-msg::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1.6em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  pointer-events: none;
}

.diagnostics-event-msg.diagnostics-event-msg--expanded {
  max-height: none;
}

.diagnostics-event-msg.diagnostics-event-msg--expanded::after {
  display: none;
}

.diagnostics-event-toggle {
  font-size: var(--fs-2xs);
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand);
  cursor: pointer;
  min-height: 28px;
}

/* Expand-all / Collapse-all bar that sits above the stack of run-section
 * <details> blocks. The two buttons share full row width on mobile so
 * either is a comfortable tap target without horizontal scroll. */
.run-sections-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  align-items: center;
}

.run-sections-toolbar .button {
  min-height: 36px;
  font-size: var(--fs-sm);
  padding: 6px 12px;
}

.run-sections-toolbar .run-sections-toolbar-hint {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Tablet/intermediate breakpoint — between desktop and the 720px mobile
 * rules the run-log toolbar's totals + filter chips + search input crowd
 * together and the search box gets squeezed below ~240px. Stack the three
 * groups onto their own rows starting at 900px so each gets a full-width
 * row well before reaching phone widths. */
@media (max-width: 900px) {
  .run-log-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .run-log-toolbar .run-log-totals,
  .run-log-toolbar .run-log-controls {
    width: 100%;
  }
  .run-log-controls .button {
    flex: 1 1 auto;
    min-height: 44px;
  }
  .run-log-search {
    width: 100%;
  }
  .run-log-search input {
    width: 100%;
    /* 16px prevents iOS Safari from zooming on focus. */
    font-size: var(--fs-md);
    min-height: 44px;
    padding: 8px 12px;
  }
  .run-log-clear {
    width: 100%;
    min-height: 44px;
    justify-self: stretch;
  }
}

@media (max-width: 720px) {
  .diagnostics-event-list li {
    grid-template-columns: 1fr;
  }
  /* Stack the diagnostics "Recent log excerpts" header so the Copy button
   * sits beneath the heading instead of being squashed onto the same row.
   * Keep the heading at its desktop typography so it still dominates the
   * Copy button visually, and add breathing room before that button. */
  .diagnostics-logs-head {
    flex-direction: column;
    align-items: stretch;
  }
  .diagnostics-logs-head h4 {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    margin: 0 0 8px;
  }
  .diagnostics-logs-head .copy-btn {
    width: 100%;
  }
  .diagnostics-panel .copy-btn {
    /* 44px matches the run-log .button tap target and iOS guidance so a
     * thumb tap doesn't land on an adjacent log line. */
    min-height: 44px;
  }
  .run-log-filters {
    grid-template-columns: 1fr;
  }
  .run-sections-toolbar {
    flex-direction: row;
  }
  .run-sections-toolbar .button {
    flex: 1 1 0;
    min-height: 44px;
  }
  .run-sections-toolbar .run-sections-toolbar-hint {
    display: none;
  }
}

/* --- Structured run log view ---------------------------------------------- */
.run-log-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 8px;
}

.run-log-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}

.run-log-total dt {
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.run-log-total dd {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.run-log-total-error dd {
  color: #b91c1c;
}

.run-log-total-warn dd {
  color: #b45309;
}

.run-log-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.run-log-filters {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.run-log-search {
  display: flex;
  align-items: center;
  gap: 8px;
}

.run-log-search input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: var(--fs-sm);
}

.run-log-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.run-log-chip-label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.run-log-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.run-log-chip[aria-pressed="true"] {
  background: var(--brand-2);
  color: #fff;
  border-color: var(--brand-2);
}

.run-log-chip-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xs);
  color: inherit;
  opacity: 0.7;
}

.run-log-clear {
  justify-self: end;
  align-self: end;
}

.run-log-noisy-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 6px 0;
}

.run-log-section h3 {
  margin: 14px 0 6px;
  font-size: var(--fs-base);
}

.run-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.run-log-list li.run-log-event {
  display: grid;
  grid-template-columns: 170px 200px auto 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 6px 10px;
  border-left: 3px solid var(--line);
  background: #fff;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.run-log-list li.run-log-event time {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.run-log-type {
  font-size: var(--fs-xs);
  color: #334155;
  background: #eef2ff;
  padding: 1px 6px;
  border-radius: 4px;
  width: max-content;
}

.run-log-node-chip {
  font-size: var(--fs-2xs);
  color: #1e293b;
  background: #fef3c7;
  padding: 1px 6px;
  border-radius: 4px;
  width: max-content;
}

.run-log-msg {
  color: #0f172a;
  white-space: pre-wrap;
}

.run-log-sev-error {
  border-left-color: #dc2626;
}

.run-log-sev-warn {
  border-left-color: #d97706;
}

.run-log-cat-run {
  background: #f0fdf4;
}

.run-log-cat-node {
  background: #f8fafc;
}

.run-log-cat-approval {
  background: #fef3c7;
}

.run-log-cat-agent {
  background: #eff6ff;
}

.run-log-cat-noise {
  opacity: 0.85;
}

.run-log-hidden {
  display: none !important;
}

.run-log-full {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: #fff;
}

.run-log-full > summary {
  cursor: pointer;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: 4px 0;
}

.run-log-full-list {
  margin-top: 10px;
}

.run-log-event.run-log-noisy {
  background: #f1f5f9;
}

/* Emphasised events (errors, approvals, obstruction analysis) stand out in
 * the now-default-open full timeline so investigators don't lose them in the
 * heartbeat stream. */
.run-log-event.run-log-emphasised {
  font-weight: var(--fw-semibold);
  box-shadow: inset 2px 0 0 var(--danger);
}

.run-log-event.run-log-emphasised.run-log-cat-approval {
  box-shadow: inset 2px 0 0 var(--warn);
}

.run-stage-strip {
  list-style: none;
  margin: 10px 0 12px;
  padding: 0 0 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.run-stage-strip-item {
  flex: 0 0 min(220px, 56vw);
  min-width: 0;
  display: grid;
  grid-template-columns: 9px 1fr;
  gap: 3px 7px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.run-stage-strip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  grid-row: 1 / span 2;
}

.run-stage-strip-item.has-warn .run-stage-strip-dot { background: var(--warn-fg); }
.run-stage-strip-item.has-error .run-stage-strip-dot { background: var(--danger-fg); }

.run-stage-strip-main,
.run-stage-strip-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-stage-strip-main {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.run-stage-strip-meta {
  color: var(--muted);
  font-size: var(--fs-2xs);
}

.run-event-groups {
  display: grid;
  gap: 14px;
}

.run-event-group {
  min-width: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

.run-event-group:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.run-event-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
}

.run-event-group-kicker {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.run-event-group h4 {
  margin: 0;
  font-size: var(--fs-base);
  overflow-wrap: anywhere;
}

.run-event-group-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 8px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.run-event-group-error { color: var(--danger-fg); font-weight: var(--fw-semibold); }
.run-event-group-warn { color: var(--warn-fg); font-weight: var(--fw-semibold); }

@media (max-width: 720px) {
  .run-log-list li.run-log-event {
    grid-template-columns: 1fr;
  }
  .run-event-group-head {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }
  .run-event-group-facts {
    justify-content: flex-start;
  }
}

/* ---- Public landing & docs: Runyard brand surface ---------------------- */
.hero-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f1f5f9;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.hero-foot {
  margin: 0;
  color: #cbd5e1;
  font-size: var(--fs-sm);
}

.hero-foot code {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 1px 6px;
  color: #f8fafc;
}

.band-setup {
  background: var(--off-white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.band-foot {
  padding-top: 28px;
  padding-bottom: 36px;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.setup-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: grid;
  gap: 8px;
}

.setup-step h3 {
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
}

.setup-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.setup-step pre.json {
  margin: 0;
  max-height: none;
}

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--muted);
}

.status-dot-ok { background: var(--ok); }
.status-dot-warn { background: var(--warn); }
.status-dot-danger { background: var(--danger); }
.status-dot-info { background: var(--brand-2); }

.band-docs h1 {
  margin-top: 28px;
}

.band-docs h1:first-of-type {
  margin-top: 8px;
}

.band-docs h2 {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.band-docs ul,
.band-docs ol {
  padding-left: 22px;
  line-height: 1.55;
}

.band-docs li + li {
  margin-top: 4px;
}

.docs-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin: 0 0 24px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  font-size: var(--fs-sm);
}

.docs-toc strong {
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--fs-2xs);
}

.docs-toc a {
  color: var(--brand-2);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 6px;
}

.docs-toc a:hover {
  background: var(--brand-tint);
  color: var(--brand);
}

@media (max-width: 640px) {
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions .button {
    width: 100%;
    justify-content: center;
  }

  .band-docs h2 {
    padding-top: 14px;
  }
}

/* ---- Primary action bar (Runs / Dashboard, sticky at top of view) ----
 * Replaces the conditional next-best-action card. Always renders three CTAs
 * (Trigger run / Open last failed run / View runners) so a primary path is
 * visible above the fold in every dashboard state (empty, healthy, failing).
 * Buttons are disabled-but-present when state would otherwise hide them.
 */
.primary-action-bar {
  position: sticky;
  top: 58px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 20px rgba(15, 25, 35, 0.06);
}

.primary-action-bar[data-tone="danger"] {
  border-left: 4px solid var(--danger);
  background: #fef2f2;
}

.primary-action-bar[data-tone="warn"] {
  border-left: 4px solid var(--warn);
  background: #fffbeb;
}

.primary-action-bar[data-tone="ok"] {
  border-left: 4px solid var(--ok);
  background: #f0fdf4;
}

.primary-action-bar[data-tone="primary"] {
  border-left: 4px solid var(--brand);
}

.primary-action-headline {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--ink);
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.primary-action-headline small {
  font-weight: var(--fw-normal);
  color: var(--muted);
  font-size: var(--fs-xs);
}

.primary-action-bar .primary-action-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.primary-action-bar a.button,
.primary-action-bar button {
  min-height: 32px;
}

.primary-action-bar a.button[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

/* Quieter, text-style secondary action so the one recommended button stays the
   visual lead instead of competing with equally-loud CTAs. */
.primary-action-secondary {
  align-self: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--brand-2);
  text-decoration: none;
  padding: 6px 4px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.primary-action-secondary:hover { text-decoration: underline; }

/* Low-emphasis button variant used for tertiary actions (e.g. "Open run"). */
.button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.button.ghost:hover {
  border-color: var(--line);
  color: var(--ink);
}

/* ---- Failure banner above the run grid ---- */
.failure-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #fecaca;
  border-left: 4px solid var(--danger);
  background: #fef2f2;
  border-radius: 10px;
  margin: 0 0 16px;
}

.failure-banner-body {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.failure-banner-title {
  font-weight: var(--fw-bold);
  color: var(--danger);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.failure-banner-step {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: rgba(220, 38, 38, 0.08);
  border-radius: 4px;
  padding: 1px 6px;
}

.failure-banner-cause {
  color: var(--ink);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.failure-banner-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Incident card: plain-English failure summary on the Runs landing ---- */
.incident-card {
  padding: 0;
  border: 1px solid #fecaca;
  border-left: 4px solid var(--danger);
  background: #fef2f2;
  border-radius: 12px;
  margin: 0 0 16px;
}

/* The summary is the collapsed one-liner: cause label + impact on a single
   row, with the disclosure caret on the right so it reads as expandable. */
.incident-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}
.incident-summary::-webkit-details-marker { display: none; }
.incident-summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--danger);
  font-size: var(--fs-xs);
  transition: transform 0.15s ease;
}
.incident-card[open] > .incident-summary::after { transform: rotate(90deg); }

.incident-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
}

.incident-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.incident-cause-label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: #fff;
  background: var(--danger);
  border-radius: 6px;
  padding: 3px 9px;
}

.incident-impact {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--danger);
}

.incident-sentence {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.incident-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.incident-tech {
  border-top: 1px dashed #fecaca;
  padding-top: 8px;
}

.incident-tech > summary {
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--muted);
  list-style: revert;
}

.incident-tech-grid {
  margin: 8px 0 0;
  display: grid;
  gap: 6px 14px;
  font-size: var(--fs-xs);
}

.incident-tech-grid > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.incident-tech-grid dt {
  color: var(--muted);
  min-width: 52px;
  font-weight: var(--fw-semibold);
}

.incident-tech-grid dd {
  margin: 0;
  min-width: 0;
}

.incident-tech-grid code {
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
  word-break: break-all;
}

.incident-tech-raw dd {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1 100%;
}

.incident-copy {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 5px;
  padding: 0 6px;
  min-height: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  flex: 0 0 auto;
}
.incident-copy:hover { color: var(--ink); border-color: var(--brand-2); }

.supervised-child-summary {
  margin: -4px 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  font-size: var(--fs-sm);
}

/* ---- Per-run-card failure detail (step + cause snippet + timeline link) ---- */
.run-card-failure {
  border-top: 1px dashed #fecaca;
  margin-top: 8px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
}

.run-card-failure-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
}

.run-card-failure-step {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  background: rgba(220, 38, 38, 0.08);
  color: var(--danger);
  border-radius: 4px;
  padding: 1px 6px;
}

.run-card-failure-cause {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.run-card-failure-link {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* ---- Runs filter bar (Home: search + status + time range + workflows) ---- */
.runs-filter-panel {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.runs-filter-primary {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.runs-filter-primary::-webkit-scrollbar { display: none; }

.runs-filter-primary-label {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.runs-more-filters-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.runs-more-filters-button::after {
  content: "⌄";
  display: inline-block;
  margin-left: 5px;
  font-size: 14px;
  line-height: 0;
  transform: translateY(-1px);
}

.runs-more-filters-button:hover,
.runs-more-filters-button[aria-expanded="true"] {
  border-bottom-color: currentColor;
  color: var(--ink);
}

.runs-view-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.runs-view-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.runs-view-link:hover {
  color: var(--ink);
  background: var(--soft);
}

.runs-view-link.active {
  color: var(--ink);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.runs-filter-disclosure {
  display: grid;
  gap: 8px;
}

.runs-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 0 2px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: var(--fw-semibold);
  list-style: none;
}

.runs-filter-disclosure:not([open]) .runs-filter-bar {
  display: none;
}

.runs-filter-disclosure[open] .runs-filter-chips-summary {
  display: none;
}

.runs-filter-toggle::-webkit-details-marker { display: none; }
.runs-filter-toggle::marker { content: ""; }

.runs-filter-toggle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--brand-2, var(--brand));
  color: var(--text-on-accent);
  font-size: var(--fs-xs);
}

.runs-filter-chips-summary {
  display: none;
}

.runs-filter-none {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
}

.runs-filter-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.runs-filter-heading h2 {
  margin: 0;
  font-size: var(--fs-base);
}

.runs-filter-count {
  color: var(--brand-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.runs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

/* Single condensed totals strip — replaces the old runner-pool chip row plus
   the seven stat pills. Wraps on narrow screens but stays one logical line. */
.home-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 14px;
}
.home-stat-strip .hstat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
}
.home-stat-strip .hstat strong {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.home-stat-strip .hstat .hstat-label {
  font-size: var(--fs-2xs);
}
.home-stat-strip .hstat .ic {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}
.home-stat-strip .hstat.hot {
  border-color: var(--brand-2);
  background: color-mix(in srgb, var(--brand-2) 12%, var(--soft));
}
.home-stat-strip .hstat.hot strong { color: var(--brand-2); }

.runs-filter-bar input[type="search"] {
  flex: 1 1 320px;
  width: min(100%, 400px);
  max-width: 400px;
  min-width: 220px;
  min-height: 44px;
  padding: 8px 10px;
}

.runs-filter-bar select {
  flex: 0 1 172px;
  max-width: 220px;
  min-height: 44px;
  padding: 8px 10px;
}

.runs-filter-bar .button,
.runs-filter-bar button {
  min-height: 44px;
}

.runs-saved-views {
  position: relative;
  flex: 0 0 auto;
}

.runs-saved-views-summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--fs-sm);
  cursor: pointer;
  list-style: none;
}

.runs-saved-views-summary::-webkit-details-marker { display: none; }
.runs-saved-views-summary::marker { content: ""; }

.runs-saved-views-summary::after {
  content: "▾";
  margin-left: 8px;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.runs-saved-views[open] > .runs-saved-views-summary {
  border-color: var(--brand-2, var(--brand));
}

.runs-saved-views-menu {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  width: min(560px, calc(100vw - 32px));
  padding: 10px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(15, 25, 35, 0.12);
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 6;
}

.runs-saved-views-menu .runs-filter-none {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
}

.runs-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.runs-filter-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

/* Workflow filter now collapses to a single chip-style <details> button so the
   toolbar fits one row at >=1280px even with dozens of workflows. The panel
   floats above the rest of the filter bar when open. */
.runs-workflow-filter {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  align-self: flex-end;
}

.runs-workflow-filter-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.runs-workflow-filter-summary::-webkit-details-marker { display: none; }
.runs-workflow-filter-summary::marker { content: ""; }

.runs-workflow-filter-summary::after {
  content: "▾";
  margin-left: 2px;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.runs-workflow-filter[open] > .runs-workflow-filter-summary {
  border-color: var(--brand-2, var(--brand));
}

.runs-workflow-filter-summary:hover,
.runs-workflow-filter-summary:focus-visible {
  border-color: var(--brand-2, var(--brand));
}

.runs-workflow-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-2, #2563eb) 14%, var(--soft));
  color: var(--brand-2, var(--brand));
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.runs-workflow-filter-badge[data-default="true"] {
  background: var(--soft);
  color: var(--muted);
}

.runs-workflow-filter-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 8px;
  max-height: 240px;
  overflow: auto;
  padding: 8px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(15, 25, 35, 0.12);
  /* Float above the rest of the toolbar so opening the panel doesn't push the
     runs list down, but keep it narrow enough to stay visually attached to the
     Workflows control. */
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  width: min(320px, calc(100vw - 32px));
  min-width: 0;
  max-width: min(320px, calc(100vw - 32px));
}

.runs-filter-bar .runs-workflow-filter-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 30px;
  color: var(--ink);
  font-size: var(--fs-xs);
}

.runs-workflow-filter-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.runs-workflow-filter-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runs-filter-chips {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  gap: 6px;
  align-items: center;
}

.runs-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  min-height: 44px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
}

.runs-filter-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0 0 2px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.runs-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  gap: 12px;
  flex-wrap: wrap;
}

.runs-pagination .muted { margin: 0; }

@media (max-width: 640px) {
  .runs-filter-panel {
    padding: 10px;
  }

  .runs-filter-toggle {
    display: flex;
  }

  .runs-filter-chips-summary {
    display: flex;
  }

  .runs-filter-disclosure:not([open]) .runs-filter-bar {
    display: none;
  }

  .runs-filter-disclosure[open] .runs-filter-chips-summary {
    display: none;
  }

  .runs-filter-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .runs-filter-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .runs-filter-bar input[type="search"] {
    grid-column: 1 / -1;
    width: 100%;
  }

  .runs-filter-bar select,
  .runs-workflow-filter,
  .runs-filter-check,
  .runs-saved-views,
  .runs-filter-bar > .button {
    width: 100%;
    max-width: none;
  }

  .runs-saved-views-summary {
    width: 100%;
    justify-content: space-between;
  }

  .runs-saved-views-menu {
    grid-template-columns: 1fr;
    right: auto;
    left: 0;
  }

  .runs-workflow-filter-summary {
    width: 100%;
    justify-content: space-between;
  }

  /* On narrow viewports the popover spans the toolbar width instead of floating
     past the edge of the screen, and is taller to give the list room. */
  .runs-workflow-filter-list {
    grid-template-columns: 1fr;
    max-height: 240px;
    position: static;
    min-width: 0;
    max-width: 100%;
    box-shadow: none;
  }

  .runs-filter-chips {
    grid-column: 1 / -1;
    width: 100%;
  }

  .runs-filter-chip {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .runs-filter-chip button {
    width: auto;
  }
}

/* ---- Next-best-action (Home hero card) ---- */
.nba-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  margin: 0 0 18px;
  box-shadow: 0 6px 20px rgba(15, 25, 35, 0.06);
}

.nba-card.nba-primary { border-left: 4px solid var(--brand); }
.nba-card.nba-warn { border-left: 4px solid var(--warn); background: #fffbeb; }
.nba-card.nba-danger { border-left: 4px solid var(--danger); background: #fef2f2; }
.nba-card.nba-ok { border-left: 4px solid var(--ok); background: #f0fdf4; }

.nba-title { margin: 0 0 4px; font-size: var(--fs-lg); }
.nba-text { margin: 0; color: var(--muted); }
.nba-actions { display: flex; gap: 8px; }

/* ---- Workflow card chips (last-run, success-rate) ---- */
.workflow-run-chips {
  display: flex;
  gap: 6px;
  margin: 6px 0 8px;
  flex-wrap: wrap;
}

.chip-last-run,
.chip-success {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--soft);
}

.chip-success.ok { color: var(--ok); border-color: #bbf7d0; background: #f0fdf4; }
.chip-success.warn { color: var(--warn); border-color: #fde68a; background: #fffbeb; }
.chip-success.danger { color: var(--danger); border-color: #fecaca; background: #fef2f2; }

/* ---- Template cards on empty Workflows ---- */
.template-grid { margin-top: 8px; }

.template-card {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px;
  background: var(--soft);
}

.template-card h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.template-card .template-meta { font-size: var(--fs-xs); margin: 6px 0 10px; }

/* ---- Runners table extras ---- */
.runners-table .hb-cell {
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 4px;
}

.hb-ok { color: var(--ok); }
.hb-warn { color: var(--warn); background: #fffbeb; }
.hb-danger { color: var(--danger); background: #fef2f2; }

.runner-detail-row td {
  background: var(--soft);
}

.runner-detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 18px;
  margin: 6px 0;
  font-size: var(--fs-sm);
}

.runner-detail-grid dt { color: var(--muted); }
.runner-detail-grid dd { margin: 0; }

.runner-detail-auth {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.runner-detail-auth h4 {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
}

.runners-table td.runner-auth-cell {
  white-space: normal;
}

.runners-table td.runner-auth-cell .status {
  display: inline-flex;
  align-items: center;
  margin: 2px 4px 2px 0;
}

.runner-auth-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- Secret input (token mask + show/copy) ---- */
.secret-row input { font-family: var(--font-mono); letter-spacing: 0.03em; }

/* ---- Onboarding wizard ---- */
.onboarding-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.onboarding-step {
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  opacity: 0.55;
  transition: opacity 0.2s;
}

.onboarding-step.active {
  opacity: 1;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-tint);
}

.onboarding-step h2 {
  font-size: var(--fs-md);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboarding-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.ob-skip { text-align: center; margin-top: 16px; }
.ob-templates { margin-top: 10px; }

/* ---- Help tooltips ---- */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: var(--fs-2xs);
  color: var(--muted);
  cursor: help;
  vertical-align: middle;
}

.help-tip:hover,
.help-tip:focus { color: var(--ink); background: var(--brand-tint); border-color: var(--brand); outline: none; }

.help-tip-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--off-white);
  font-size: var(--fs-xs);
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 50;
}

.help-tip-bubble a { color: var(--brand-tint); }

.help-tip:hover .help-tip-bubble,
.help-tip:focus .help-tip-bubble { opacity: 1; pointer-events: auto; }

/* ---- Narrow viewport: sidebar collapses, tables scroll ---- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr !important; }
  /* The sidebar stays hidden on mobile (see the primary mobile block above);
     the .mobile-primary-nav row is the single source of primary navigation.
     Re-displaying it here is what caused the duplicate nav row. */
  .nba-card { flex-direction: column; align-items: flex-start; }
  .table { display: block; overflow-x: auto; }

  /* Workflow detail collapses to a tab-only layout: the ReactFlow side-rail
     becomes a closed <details> disclosure (it's a <details> element with a
     "Run details" summary) so the metadata is still reachable on a phone with
     one tap instead of being display:none'd. The four .workflow-tabs scroll
     horizontally so all of Overview / Graph / Code / Runs stay reachable on a
     phone without page reflow. */
  .workflow-graph-side {
    display: block;
    border-left: 0;
    border-top: 1px solid var(--line);
    max-width: none;
    padding: 10px 12px;
  }
  .workflow-graph-side > .workflow-graph-side-summary {
    display: list-item;
    cursor: pointer;
    font-weight: var(--fw-semibold);
    color: var(--ink);
    padding: 4px 0;
  }
  .workflow-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .workflow-tabs .tab { flex: 0 0 auto; }
  .workflow-graph-tab .workflow-graph-host { min-height: 320px; }
}

/* ---- Live run progress strip ---- */
.run-progress-strip {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 8px 0 6px;
  padding: 0;
}
.run-progress-phase {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  font-size: var(--fs-xs);
  color: var(--muted);
  position: relative;
}
.run-progress-phase + .run-progress-phase::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--line);
  margin-right: 4px;
}
.run-progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  display: inline-block;
  box-sizing: border-box;
}
.run-progress-phase.phase-pending .run-progress-dot { background: #fff; border-color: #d9e0ea; }
.run-progress-phase.phase-pending { color: #98a2b3; }
.run-progress-phase.phase-active .run-progress-dot {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
  animation: run-progress-pulse 1.4s ease-in-out infinite;
}
.run-progress-phase.phase-active { color: #1d4ed8; font-weight: var(--fw-semibold); }
.run-progress-phase.phase-stalled .run-progress-dot {
  background: #f59e0b;
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
  animation: run-progress-pulse 1.4s ease-in-out infinite;
}
.run-progress-phase.phase-stalled { color: #b45309; font-weight: var(--fw-semibold); }
.run-progress-phase.phase-done .run-progress-dot { background: #16a34a; border-color: #16a34a; }
.run-progress-phase.phase-done { color: #15803d; }
.run-progress-phase.phase-ok .run-progress-dot { background: #16a34a; border-color: #16a34a; }
.run-progress-phase.phase-ok { color: #15803d; font-weight: var(--fw-semibold); }
.run-progress-phase.phase-fail .run-progress-dot { background: #dc2626; border-color: #dc2626; }
.run-progress-phase.phase-fail { color: #b91c1c; font-weight: var(--fw-semibold); }
.run-progress-phase.phase-cancel .run-progress-dot { background: #94a3b8; border-color: #94a3b8; }
.run-progress-phase.phase-cancel { color: #475569; }
.run-progress-step-name {
  margin-left: 8px;
  font-size: var(--fs-xs);
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Per-phase wall-clock duration sits under the label so a stuck phase reads
   visibly different from a fast one. The active phase carries [data-live-start]
   and is rewritten once a second by the global ticker in app.js. */
.run-progress-phase-duration {
  margin-left: 6px;
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: 0.9;
}
.run-progress-phase.phase-active .run-progress-phase-duration,
.run-progress-phase.phase-stalled .run-progress-phase-duration {
  color: inherit;
  opacity: 1;
}

/* Compact stats strip — demoted from the lead position on Home so live runs
   take the visual weight; the totals now read as a secondary chip row. */
.home-stats.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
}
.home-stats.compact .stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  font-size: var(--fs-xs);
}
.home-stats.compact .stat strong {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.home-stats.compact .stat .muted {
  font-size: var(--fs-2xs);
}
.in-flight-heading {
  margin-top: 4px;
}

/* Workflow runs list — left-border accent + status glyph so triage-at-a-glance
   doesn't depend on reading the text pill. Colors map to the existing signal
   tokens; the glyph is a Unicode shape so high-contrast / mono themes still
   distinguish rows even when the accent color collapses. */
.wf-run-row {
  border-left: 4px solid var(--line);
  padding-left: 10px;
  margin-bottom: 6px;
}
.wf-run-row[data-status="running"],
.wf-run-row[data-status="assigned"],
.wf-run-row[data-status="pending"] { border-left-color: var(--ok); }
.wf-run-row[data-status="queued"] { border-left-color: var(--brand-2); }
.wf-run-row[data-status="waiting_approval"] { border-left-color: var(--warn); }
.wf-run-row[data-status="paused"] { border-left-color: var(--warn); }
.wf-run-row[data-status="succeeded"],
.wf-run-row[data-status="approved"] { border-left-color: var(--brand); }
.wf-run-row[data-status="failed"],
.wf-run-row[data-status="error"] { border-left-color: var(--danger); }
.wf-run-row[data-status="cancelled"],
.wf-run-row[data-status="rejected"] { border-left-color: #94a3b8; }
.wf-run-glyph {
  display: inline-block;
  width: 1.2em;
  margin-right: 4px;
  font-weight: var(--fw-bold);
  text-align: center;
  color: var(--ink);
}
.wf-run-row[data-status="running"] .wf-run-glyph,
.wf-run-row[data-status="assigned"] .wf-run-glyph,
.wf-run-row[data-status="pending"] .wf-run-glyph { color: var(--ok); }
.wf-run-row[data-status="queued"] .wf-run-glyph { color: var(--brand-2); }
.wf-run-row[data-status="waiting_approval"] .wf-run-glyph { color: var(--warn); }
.wf-run-row[data-status="paused"] .wf-run-glyph { color: var(--warn); }
.wf-run-row[data-status="succeeded"] .wf-run-glyph,
.wf-run-row[data-status="approved"] .wf-run-glyph { color: var(--brand); }
.wf-run-row[data-status="failed"] .wf-run-glyph,
.wf-run-row[data-status="error"] .wf-run-glyph { color: var(--danger); }
.wf-run-row[data-status="cancelled"] .wf-run-glyph,
.wf-run-row[data-status="rejected"] .wf-run-glyph { color: #475569; }
@media (prefers-reduced-motion: reduce) {
  .run-progress-phase.phase-active .run-progress-dot,
  .run-progress-phase.phase-stalled .run-progress-dot {
    animation: none;
  }
}
@keyframes run-progress-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* Expandable run rows in the workflow Runs tab. */
.wf-run-progress-details { width: 100%; }
.wf-run-progress-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  cursor: pointer;
}
.wf-run-progress-summary::-webkit-details-marker { display: none; }
.wf-run-progress-summary::marker { content: ""; }
.wf-run-progress-body { padding: 4px 0 2px 0; }

.requirements-summary {
  margin-top: -2px;
}

.requirements-pills .requirement-chip {
  padding: 0;
}

.requirements-pills .requirement-chip a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
}

.requirement-glyph {
  font-weight: var(--fw-bold);
}

.requirement-installed {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}

.requirement-missing {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--danger);
}

.requirement-unknown {
  background: var(--soft);
  border-color: var(--line);
  color: var(--muted);
}

.approval-mode-card {
  display: grid;
  gap: 8px;
}

.segmented-radio {
  display: inline-flex;
  width: fit-content;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.segmented-radio label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.segmented-radio label.selected {
  color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}

.segmented-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wf-run-list-latest .wf-run-row {
  display: block;
  padding: 0;
  border-left-width: 0;
}

.wf-run-card-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
  border-left: 4px solid transparent;
  border-radius: 6px;
}

.wf-run-card-link:hover {
  background: var(--soft);
  border-left-color: var(--line);
  cursor: pointer;
}

.wf-run-row[data-status="failed"] .wf-run-card-link,
.wf-run-row[data-status="error"] .wf-run-card-link,
.wf-run-row[data-status="blocked_by_preflight"] .wf-run-card-link {
  border-left-color: var(--danger);
}

.wf-run-card-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wf-run-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.wf-run-card-title .wf-run-title {
  flex: 0 1 auto;
  min-width: 0;
}

.wf-run-card-status {
  color: var(--danger);
  font-weight: var(--fw-semibold);
}

.wf-run-reason {
  color: var(--ink);
  font-size: var(--fs-sm);
}

.wf-run-dot {
  width: auto;
  margin: 1px 0 0;
  line-height: 1.2;
}

.wf-run-dot-failed {
  color: var(--danger);
}

/* ---- First-run onboarding card (empty Workflows view) ---- */
.onboarding-card {
  background: linear-gradient(180deg, #f8fafc, #ffffff 70%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 0 0 18px;
  box-shadow: 0 6px 22px rgba(15, 25, 35, 0.05);
}
.onboarding-card-head h2 { margin: 0 0 4px; }
.onboarding-card-head p { margin: 0 0 16px; }
.onboarding-card-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.onboarding-card-step {
  display: flex;
  gap: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 14px 16px;
}
.onboarding-card-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--off-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.onboarding-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.onboarding-card-body h3 { margin: 0; font-size: var(--fs-md); }
.onboarding-card-body p { margin: 0; font-size: var(--fs-sm); }
.onboarding-card-cta { margin-top: auto; padding-top: 6px; }
@media (max-width: 900px) {
  .onboarding-card-steps { grid-template-columns: 1fr; }
}

/* ---- Run detail: outcome-first banner ------------------------------------
 * The detail page leads with a banner that answers "did this succeed, how
 * long, and what broke" at a glance: large status pill + duration + started
 * relative + (for failures) headline error inline. Title and run id sit as
 * a smaller subtitle. Actions group sits to the right; primary Re-run is
 * always visible, secondary actions live behind a 44px "More" trigger so
 * mobile keeps the page scannable.
 */
.run-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "headline actions"
    "title    actions"
    "subtitle actions";
  gap: 6px 16px;
  align-items: start;
  padding: 14px 16px;
  margin: 0 0 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  border-left: 4px solid var(--brand);
}

.run-banner[data-status="failed"],
.run-banner[data-status="error"] {
  border-left-color: var(--danger);
  background: linear-gradient(180deg, #fef2f2, var(--panel) 70%);
}

.run-banner[data-status="cancelled"],
.run-banner[data-status="rejected"] {
  border-left-color: var(--warn);
  background: linear-gradient(180deg, #fffbeb, var(--panel) 70%);
}

.run-banner[data-status="succeeded"],
.run-banner[data-status="recovered"],
.run-banner[data-status="approved"] {
  border-left-color: var(--ok);
}

.run-banner[data-status="waiting_approval"] {
  border-left-color: var(--warn);
}

.run-banner[data-status="paused"] {
  border-left-color: var(--warn);
}

.run-banner-headline {
  grid-area: headline;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.run-banner-status .status {
  font-size: var(--fs-base);
  padding: 4px 12px;
  min-height: 28px;
}

.run-banner-duration,
.run-banner-time {
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.run-banner-error {
  flex: 1 1 320px;
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--danger);
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 4px 10px;
  /* Never truncate — wrap so operators can read the cause without hovering. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.run-banner-title {
  grid-area: title;
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.25;
  overflow-wrap: anywhere;
  min-width: 0;
}

.run-banner-subtitle {
  grid-area: subtitle;
  margin: 0;
  font-size: var(--fs-xs);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.run-banner-subtitle .run-id-mono {
  font-size: var(--fs-xs);
}

/* Long workflow slugs in the subtitle were able to push past their flex row
 * on narrow viewports; constrain so the pill wraps with everything else. */
.run-banner-subtitle .run-cap-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-banner-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.run-banner-actions button,
.run-banner-actions .button {
  min-height: 36px;
}

/* Overflow menu — built on <details> so keyboard, click-outside, and Esc
 * (wired in JS) all work without extra ARIA scaffolding. */
.run-action-overflow {
  position: relative;
}

.run-action-overflow-trigger {
  list-style: none;
  cursor: pointer;
}

.run-action-overflow-trigger::-webkit-details-marker {
  display: none;
}

.run-action-overflow-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(15, 25, 35, 0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.run-action-overflow-menu button,
.run-action-overflow-menu .button {
  width: 100%;
  justify-content: flex-start;
  border: none;
  background: transparent;
  min-height: 36px;
}

.run-action-overflow-menu button:hover,
.run-action-overflow-menu .button:hover {
  background: var(--soft);
}

.run-action-overflow-menu button.danger {
  color: var(--danger);
}

.run-action-overflow-menu button.danger:hover {
  background: #fef2f2;
}

/* ---- Compact meta strip --------------------------------------------------
 * Replaces the old grid of facts with a single middot-separated flex strip
 * of label→value pairs. Wraps to at most two lines on narrow viewports.
 */
.run-meta-strip {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: var(--fs-xs);
  color: var(--ink);
}

.run-meta-strip li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.run-meta-strip li + li::before {
  content: "·";
  color: var(--muted);
  margin-right: 8px;
}

/* ---- Collapsible run sections (I/O / log / artifacts / context) ---------
 * Replaces the old split panel. Each card is a <details> so toggle state is
 * native; JS persists the open/closed override per-run in sessionStorage.
 */
.run-section {
  margin: 0 0 12px;
  padding: 0;
}

.run-section[open] {
  padding-bottom: 4px;
}

.run-section-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px;
  border-radius: 8px;
  min-height: 44px;
}

.run-section-summary::-webkit-details-marker {
  display: none;
}

.run-section-summary::before {
  content: "▸";
  display: inline-block;
  color: var(--muted);
  font-size: var(--fs-xs);
  transition: transform 0.15s ease;
  width: 12px;
  text-align: center;
}

.run-section[open] > .run-section-summary::before {
  transform: rotate(90deg);
}

.run-section-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  min-width: 0;
  overflow-wrap: anywhere;
  flex: 0 0 auto;
}

/* Truncate the in-flight step name with an ellipsis instead of wrapping it
 * over multiple lines — the full value remains reachable via the title=
 * attribute set in JS, so nothing is lost. */
.run-section-meta {
  font-size: var(--fs-xs);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-section-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  /* Keep actions from being forced onto a second row when there is room. */
  flex: 0 0 auto;
}

.run-section-actions .button,
.run-section-actions button {
  min-height: 32px;
  padding: 4px 10px;
  font-size: var(--fs-sm);
}

.run-section-body {
  padding: 0 16px 12px;
}

.run-relationships {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.run-relationship-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.run-relationship-item > a,
.run-relationship-item > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  max-width: min(100%, 360px);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--subtle);
  color: inherit;
  text-decoration: none;
}

.run-relationship-item > a:hover {
  border-color: var(--accent);
}

.run-relationship-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--muted);
}

.run-relationship-main {
  display: grid;
  min-width: 0;
}

.run-relationship-label,
.run-relationship-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-relationship-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.run-relationship-meta {
  font-size: var(--fs-xs);
}

.run-child-runs {
  margin-top: 8px;
}

.run-child-runs:first-child {
  margin-top: 0;
}

.run-child-runs > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  list-style-position: inside;
}

.run-child-runs > summary:hover {
  background: var(--subtle);
}

.run-child-runs > summary .muted {
  font-size: var(--fs-sm);
}

.run-child-run-list {
  max-height: 320px;
  margin-top: 8px;
  padding: 2px;
  overflow-y: auto;
}

.run-io-section {
  border-color: #bfd2f4;
  background: linear-gradient(180deg, #f2f6fd, var(--panel) 42%);
}

.run-io-section > .run-section-summary {
  padding-top: 14px;
  padding-bottom: 14px;
}

.run-io-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.run-io-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.run-io-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.run-io-card h3 {
  margin: 0;
  font-size: var(--fs-base);
}

.run-io-card-meta {
  min-width: 0;
  font-size: var(--fs-xs);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-io-human {
  padding: 10px 12px;
}

.run-io-summary-list {
  margin: 0;
  display: grid;
  gap: 6px;
}

.run-io-summary-row {
  display: grid;
  grid-template-columns: minmax(100px, 0.36fr) minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.run-io-summary-row:last-child {
  border-bottom: 0;
}

.run-io-summary-row dt {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}

.run-io-summary-row dd {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.run-io-empty {
  margin: 0;
  padding: 4px 0;
}

.run-io-raw {
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.run-io-raw summary {
  cursor: pointer;
  min-height: 40px;
  padding: 9px 12px;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.run-io-raw .json {
  margin: 0;
  border: 0;
  border-radius: 0;
  max-height: 420px;
  overflow: auto;
}

.run-log-wrap-toggle {
  font-size: var(--fs-xs);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  min-height: 32px;
}

.run-log-wrap-toggle input {
  width: auto;
  min-height: 0;
  margin: 0;
}

/* When wrap is on, force pre/code blocks inside the log card to wrap. */
.run-section-body.run-log-wrap pre,
.run-section-body.run-log-wrap code,
.run-section-body.run-log-wrap .diagnostics-pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: hidden;
}

/* ---- Artifacts: typed rows with preview + open ---------------------------
 * Plain filename + size wasn't enough to tell a screenshot from a JSON blob.
 * Rows now carry a kind icon, human-readable size, a Preview button (for
 * images and small text/JSON), an Open ↗ link, and a share button.
 */
.artifact-list.rich {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.artifact-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.artifact-icon {
  font-size: var(--fs-xl);
  text-align: center;
}

.artifact-row-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.artifact-row-name {
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.artifact-row-meta {
  font-size: var(--fs-xs);
}

.artifact-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.artifact-row-actions .button,
.artifact-row-actions button {
  min-height: 32px;
  padding: 4px 10px;
  font-size: var(--fs-sm);
}

.artifacts-empty {
  margin: 0;
  padding: 12px;
  background: var(--soft);
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
}

/* ---- Artifact preview modal --------------------------------------------- */
.artifact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.artifact-modal-card {
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(15, 25, 35, 0.35);
  width: min(820px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.artifact-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.artifact-modal-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.artifact-modal-close {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  font-size: var(--fs-xl);
  line-height: 1;
  border-radius: 8px;
}

.artifact-modal-body {
  padding: 16px;
  overflow: auto;
  flex: 1 1 auto;
}

.artifact-modal-image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  margin: 0 auto;
}

.artifact-modal-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  background: #0f172a;
  color: #f8fafc;
  border-radius: 8px;
  padding: 12px;
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.artifact-modal-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- Narrow viewport tuning for run detail ------------------------------ */
@media (max-width: 640px) {
  .run-banner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "headline"
      "title"
      "subtitle"
      "actions";
  }

  .run-banner-actions {
    justify-content: flex-start;
  }

  .run-banner-title {
    font-size: var(--fs-xl);
  }

  .run-section-summary {
    padding: 10px 12px;
    min-height: 44px;
  }

  /* On narrow viewports allow the in-flight step name to wrap to multiple
   * lines — there isn't room to ellipsize meaningfully and the actions row
   * already drops below on its own line. */
  .run-section-meta {
    white-space: normal;
    overflow-wrap: anywhere;
    flex: 1 1 100%;
  }

  .run-section-actions {
    margin-left: 0;
    width: 100%;
  }

  .run-section-body {
    padding: 0 12px 12px;
  }

  .run-io-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .run-io-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .run-io-card-meta {
    text-align: left;
    white-space: normal;
  }

  .run-io-summary-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .run-detail-meta-summary {
    width: 100%;
    justify-content: flex-start;
  }

  .artifact-row {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas:
      "icon main"
      "actions actions";
    gap: 8px;
  }

  .artifact-icon { grid-area: icon; }
  .artifact-row-main { grid-area: main; }
  .artifact-row-actions {
    grid-area: actions;
    justify-content: flex-start;
  }

  .artifact-modal {
    padding: 8px;
  }

  .artifact-modal-card {
    width: 100%;
    max-height: calc(100vh - 16px);
  }

  /* Banner buttons follow the global 44px touch target rule already set in
   * the 850px breakpoint, but the overflow menu lives outside that rule so
   * we lift its trigger explicitly. The status pill bumps up too so the
   * "tap targets ≥44px" acceptance check holds for the pill itself. */
  .run-action-overflow-trigger,
  .run-banner-actions .primary {
    min-height: 44px;
  }

  .run-banner-status .status {
    min-height: 36px;
    padding: 6px 14px;
    font-size: var(--fs-base);
  }
}

/* ---- Schedules (cron jobs) ------------------------------------------------
 * Reuse the workflow-card grid/chip language; these add only the cron-specific
 * bits: a next-run chip tone, the preset chip row, the live preview box, and
 * the detail-page fact list + next-run list. */
.chip-next {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.chip-broken {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}

.schedule-broken {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
}

.cron-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}

button.cron-preset {
  cursor: pointer;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--ink);
}

button.cron-preset:hover {
  background: var(--brand-tint);
}

.schedule-preview {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--soft);
  font-size: var(--fs-sm);
}

.schedule-preview.valid {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.schedule-preview.invalid {
  border-color: #fecaca;
  background: #fef2f2;
  color: var(--danger);
}

.schedule-preview .schedule-next-list {
  margin: 6px 0 0;
}

.schedule-detail-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 4px 0 12px;
}

.schedule-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0 0 8px;
}

.schedule-facts dt {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.schedule-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.schedule-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
}

.schedule-next-list li {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Live event console (Run Detail SSE stream) ---------------------------- */
/* A terminal-style tail of run events streamed over SSE (TanStack events
   collection), with a moving auto-scroll body, status indicator, and a
   pause/resume control. New classes — additive to the existing run-log view. */
.live-console {
  border: 1px solid var(--border, #d7dbe3);
  border-radius: 10px;
  overflow: hidden;
  background: #0d1117;
  color: #d6deeb;
}
.live-console-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 12px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
  font-size: var(--fs-sm);
}
.live-console-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-semibold);
}
.live-console-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8b949e;
  flex: 0 0 auto;
}
.live-console-status-live .live-console-dot {
  background: #2ea043;
  box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.6);
  animation: live-console-pulse 1.6s infinite;
}
.live-console-status-polling .live-console-dot { background: #d29922; }
.live-console-status-reconnecting .live-console-dot { background: #d29922; }
@keyframes live-console-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(46, 160, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0); }
}
.live-console-count { margin-left: auto; color: #8b949e; }
.live-console-search {
  flex: 1 1 220px;
  min-width: min(220px, 100%);
}
.live-console-search input {
  width: 100%;
  min-width: 0;
}
.live-console-actions { display: inline-flex; gap: 8px; }
.live-console-actions .button {
  padding: 2px 10px;
  font-size: var(--fs-sm);
  background: #21262d;
  color: #d6deeb;
  border-color: #30363d;
}
.live-console-jump { background: #1f6feb !important; color: #fff !important; }
.live-console-body {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  scroll-behavior: smooth;
}
.live-console-empty { color: #8b949e; padding: 8px 0; }
.live-console-list { list-style: none; margin: 0; padding: 0; }
.live-console-line {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 1px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.live-console-list.run-log-wrap .live-console-line {
  white-space: pre-wrap;
}
.live-console-time { color: #6e7681; flex: 0 0 auto; }
.live-console-type { color: #79c0ff; }
.live-console-node {
  color: #d2a8ff;
  font-size: var(--fs-xs);
}
.live-console-msg { color: #d6deeb; }
.live-console-sev-error .live-console-msg,
.live-console-sev-error .live-console-type { color: #ff7b72; }
.live-console-sev-warn .live-console-msg { color: #e3b341; }
.live-console-cat-noise { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .live-console-body { scroll-behavior: auto; }
  .live-console-status-live .live-console-dot { animation: none; }
}

.node-execution-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.node-execution-item {
  border-left: 3px solid var(--line);
  padding: 8px 0 8px 12px;
  min-width: 0;
}
.node-status-succeeded,
.node-status-completed {
  border-left-color: var(--success, #22863a);
}
.node-status-running,
.node-status-active {
  border-left-color: #1f6feb;
}
.node-status-cancelled,
.node-status-failed,
.node-status-errored {
  border-left-color: var(--danger, #d73a49);
}
.node-execution-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.node-execution-main code {
  overflow-wrap: anywhere;
}
.node-execution-status,
.trace-completeness {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  font-size: var(--fs-xs);
  background: var(--soft);
}
.trace-final-only,
.trace-partial {
  border-color: #d29922;
  color: #8a5a00;
}
.node-execution-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: var(--fs-sm);
}
.node-execution-facts dt {
  color: var(--muted);
}
.node-execution-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.node-execution-evidence {
  margin-top: 8px;
}

/* ============================================================================
 * /brand — living style guide. Lays out the token sets the page renders.
 * ==========================================================================*/
.brand-page {
  max-width: 1080px;
}
.brand-lede {
  margin: 0 0 var(--space-8);
  max-width: 70ch;
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}
.brand-section {
  margin: 0 0 var(--space-10);
}
.brand-section-head {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--border);
}
.brand-section-head h2 {
  margin: 0;
}
.brand-section-head p {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
}
.brand-subhead {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}
.brand-token {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}

/* Type scale */
.brand-type {
  display: grid;
  gap: var(--space-4);
}

.brand-mark-specimen {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.brand-mark-specimen .brand-mark {
  width: 44px;
  height: 44px;
  font-size: 40px;
}

.brand-mark-specimen > span:last-child {
  display: grid;
  gap: var(--space-1);
}

.brand-mark-specimen strong {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}

.brand-type-row {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
}
.brand-type-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  font-size: var(--fs-xs);
}
.brand-type-sample {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Weights */
.brand-weights {
  display: grid;
  gap: var(--space-2);
}
.brand-weight-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.brand-weight-row > span:first-child {
  min-width: 120px;
}

/* Colors */
.brand-color-groups {
  display: grid;
  gap: var(--space-6);
}
.brand-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
}
.brand-swatch {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-2);
  align-items: center;
  padding: var(--space-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.brand-swatch-chip {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--border);
}
.brand-swatch-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.brand-swatch-hex {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}

/* Spacing */
.brand-spacing {
  display: grid;
  gap: var(--space-2);
}
.brand-space-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.brand-space-val {
  width: 48px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}
.brand-space-bar {
  height: 16px;
  background: var(--accent);
  border-radius: var(--radius-sm);
}

/* Radii & shadows */
.brand-rs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}
.brand-rs-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.brand-rs-tile {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
}
.brand-rs-box {
  width: 56px;
  height: 56px;
  background: var(--accent-tint);
  border: var(--border-width) solid var(--accent-border);
}
.brand-rs-shadow {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius-md);
}

/* Buttons */
.brand-rule {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
}
.brand-btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.brand-btn-col {
  display: grid;
  gap: var(--space-3);
}
.brand-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Badges & statuses */
.brand-badges {
  display: grid;
  gap: var(--space-6);
}
.brand-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Forms */
.brand-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  max-width: 720px;
}
.brand-field {
  display: grid;
  gap: var(--space-1-5);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.brand-state-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 38px;
}
.brand-console {
  margin: 0;
  max-width: 720px;
}

@media (max-width: 640px) {
  .brand-type-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* --- Overflow hardening (RunYard): run cards never exceed their grid track,
 * even with long unbreakable paths / run-ids on narrow viewports. The chain of
 * default `min-width:auto` on grid/flex children was blocking the existing chip
 * ellipsis + letting long strings stretch the track wider than the viewport. --- */
.run-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.run-card,
.run-card > *,
.run-card-head,
.run-card-sub,
.run-card-chips,
.run-card-failure,
.run-card-failure-row,
.run-history-row,
.run-history-row > *,
.run-history-sub,
.run-history-chips,
.run-history-actions,
.chip {
  min-width: 0;
}
.run-card-title a,
.run-history-title a,
.run-cap-link,
.run-desc,
.run-history-signal,
.run-card-failure-cause,
.run-reason-hint span,
.diagnostics-event-type,
.run-meta {
  overflow-wrap: anywhere;
}

/* ============================================================================
 * WORK BOARD (work items / tickets): the software-factory operating surface.
 * Command queue up top, horizontally scrolling kanban lanes, quiet dense
 * cards, a modal editor, and the ticket workbench (inspector) detail view.
 * Everything resolves to the design tokens at the top of this file.
 * ==========================================================================*/

/* ---- Board toolbar controls ---------------------------------------------- */
.work-filter { width: 200px; max-width: 200px; }
.work-project-filter { width: auto; max-width: 200px; }
.work-status-select,
.work-panel-head select { width: auto; max-width: 280px; }
.work-archived-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* ---- Command area: "What needs action" ----------------------------------- *
 * A command center, not a banner: a compact header with hairline-separated
 * stat clusters, then the operator queue as dense inbox rows. */
.work-command {
  margin: 0 0 var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.work-command-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-width) solid var(--border);
}
.work-command-copy h2 {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}
.work-command-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}
.work-command-stats {
  display: flex;
  margin: 0;
  flex: none;
}
.work-command-stats > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 var(--space-5);
  border-left: var(--border-width) solid var(--border);
}
.work-command-stats > div:last-child { padding-right: var(--space-1); }
.work-command-stats dd {
  margin: 0;
  order: -1;
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.work-command-stats dt {
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  white-space: nowrap;
}
.work-command-stats > div.is-signal dd { color: var(--warn-fg); }

.work-quick-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-4);
}
.work-quick-task input {
  width: 100%;
  min-width: 0;
}
.work-quick-task button {
  min-width: 84px;
}

/* Operator queue rows: label pill | title + detail | meta | chevron */
.work-operator-list { display: flex; flex-direction: column; }
.work-operator-item,
.work-operator-empty {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-2-5) var(--space-5);
  color: inherit;
  text-decoration: none;
}
.work-operator-item + .work-operator-item { border-top: var(--border-width) solid var(--border); }
.work-operator-item:hover,
.work-operator-item:focus-visible { background: var(--surface-2); }
.work-operator-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.work-operator-body { display: flex; flex-direction: column; min-width: 0; gap: var(--space-0-5); }
.work-operator-body strong {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-operator-detail {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-operator-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}
.work-operator-project {
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  line-height: 1.6;
}
.work-operator-go {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.work-operator-item:hover .work-operator-go { color: var(--text); transform: translateX(2px); }
.work-operator-label {
  justify-self: start;
  min-width: 88px;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-2xs);
}
.work-operator-empty {
  grid-template-columns: auto minmax(0, 1fr);
  padding: var(--space-4) var(--space-5);
}
.work-operator-empty .work-operator-detail { white-space: normal; }
.work-operator-clear {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--success-border);
  background: var(--success-bg);
  color: var(--success);
  font-size: var(--fs-sm);
}

/* Action tones shared by queue labels and card pills */
.tone-danger .work-operator-label,
.work-card-action.tone-danger span { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
.tone-warn .work-operator-label,
.work-card-action.tone-warn span { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }
.tone-success .work-operator-label,
.work-card-action.tone-success span { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.tone-info .work-operator-label,
.work-card-action.tone-info span { background: var(--info-bg); border-color: var(--info-border); color: var(--info-fg); }

/* ---- Empty board state ---------------------------------------------------- */
.work-empty-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-6);
}
.work-empty-state h2 { margin: var(--space-1) 0; font-size: var(--fs-lg); line-height: var(--lh-lg); }
.work-empty-state p { margin: 0; max-width: 60ch; }

.work-view-tabs {
  margin: 0 0 var(--space-3);
}

.work-mobile-lane-tabs {
  display: none;
}

.work-flow-view {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.work-flow-view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.work-flow-view-head h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
}

.work-flow-view-head p {
  margin: 0;
  max-width: 72ch;
}

.work-flow-view .workflow-graph-canvas {
  min-height: 620px;
}

.work-flow-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

.work-flow-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.legend-line {
  width: 24px;
  height: 0;
  border-top: 2px solid var(--text-muted);
}

.legend-line.human {
  border-color: #2563eb;
}

.legend-line.agent {
  border-color: #9333ea;
}

.legend-line.policy {
  border-color: #7c3aed;
  border-style: dashed;
}

.legend-line.automatic {
  border-color: #0f766e;
  border-style: dashed;
}

.legend-line.blocked {
  border-color: var(--danger-fg);
  border-style: dashed;
}

/* ---- Kanban lanes ---------------------------------------------------------- *
 * One horizontal row that scrolls inside its own container (the page never
 * scrolls sideways). Lanes are quiet tinted columns identified by a status
 * dot; cards are the only strong surfaces. */
.board-scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-0-5) var(--space-2) var(--space-3);
  scrollbar-width: thin;
}
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 20vw, 300px);
  gap: var(--space-3);
  align-items: start;
  min-width: min-content;
}
.board-col {
  min-width: 0;
  background: rgba(21, 25, 31, 0.03);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-2-5);
  scroll-snap-align: start;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.board-col.is-drop-target {
  background: color-mix(in srgb, var(--accent-bg) 62%, var(--surface));
  border-color: var(--accent-border);
  box-shadow: inset 0 0 0 1px var(--accent-border), var(--shadow-xs);
  transform: translateY(-1px);
}
.board-col-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1) 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.board-col-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-col-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}
.board-col[data-lane="triaged"] .board-col-dot { background: var(--text-muted); }
.board-col[data-lane="pick-next"] .board-col-dot { background: var(--warn-fg); }
.board-col[data-lane="ready"] .board-col-dot { background: var(--accent); }
.board-col[data-lane="running"] .board-col-dot { background: var(--info-fg); animation: work-flow-pulse 2s ease-in-out infinite; }
.board-col[data-lane="attention"] .board-col-dot { background: var(--warn-fg); }
.board-col[data-lane="review"] .board-col-dot { background: var(--link); }
.board-col[data-lane="shipped"] .board-col-dot { background: var(--success); }
.board-col[data-lane="attention"] .board-col-header { color: var(--warn-fg); }
.board-col-hint {
  margin: var(--space-0-5) var(--space-1) var(--space-2);
  min-height: calc(2 * var(--lh-2xs));
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  font-weight: var(--fw-normal);
}
.board-col-trigger {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - (2 * var(--space-1)));
  min-height: 24px;
  margin: calc(-1 * var(--space-1)) var(--space-1) var(--space-2);
  padding: 3px 8px;
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-col-trigger.mode-confirm {
  border-color: color-mix(in srgb, var(--info-fg) 26%, var(--border));
  background: color-mix(in srgb, var(--info-fg) 8%, var(--surface));
}
.board-col-trigger.mode-auto {
  border-color: color-mix(in srgb, var(--warn-fg) 32%, var(--border));
  background: color-mix(in srgb, var(--warn-fg) 9%, var(--surface));
}
.board-col-guard {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - (2 * var(--space-1)));
  min-height: 24px;
  margin: calc(-1 * var(--space-1)) var(--space-1) var(--space-2);
  padding: 3px 8px;
  border: var(--border-width) solid color-mix(in srgb, var(--danger-fg) 28%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--danger-fg) 8%, var(--surface));
  color: var(--danger-fg);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-col-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 92px;
}
.board-col-empty {
  margin: 0;
  padding: var(--space-2-5) var(--space-3);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
}

.runners-ledger-shell .rl-board-scroller {
  margin: 0;
  max-width: 100%;
  overflow-y: hidden;
  padding: 8px 0 16px;
}

.runners-ledger-shell .rl-board {
  align-items: stretch;
  grid-auto-columns: var(--board-lane-width, 320px);
  gap: 12px;
}

.runners-ledger-shell .rl-board-col {
  border-color: var(--rl-rule);
  border-radius: var(--rl-radius);
  background: var(--rl-well);
  padding: 0;
}

.runners-ledger-shell .rl-board-col .board-col-header {
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--rl-rule);
}

.runners-ledger-shell .rl-board-col .board-col-hint,
.runners-ledger-shell .rl-board-col .board-col-trigger,
.runners-ledger-shell .rl-board-col .board-col-guard {
  margin-left: 12px;
  margin-right: 12px;
}

.runners-ledger-shell .rl-board-col .board-col-trigger,
.runners-ledger-shell .rl-board-col .board-col-guard {
  border-radius: var(--rl-radius);
  background: transparent;
}

.runners-ledger-shell .rl-board-col .board-col-cards {
  gap: 0;
  min-height: 120px;
}

.rl-board-item-row {
  border-top: 1px solid var(--rl-rule);
}

.rl-board-item-row:first-child {
  border-top: 0;
}

.runners-ledger-shell .rl-board-item-row .work-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.runners-ledger-shell .rl-board-item-row .work-card:hover {
  transform: none;
  box-shadow: none;
}

.rl-board-item-ops {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 12px 12px;
}

.rl-board-item-ops .rl-mini-rail {
  width: 100%;
}

/* ---- Cards ----------------------------------------------------------------- */
.work-card {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-xs);
  cursor: grab;
  user-select: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}
.work-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.work-card:focus-within { border-color: var(--accent-border); }
.work-card:active { cursor: grabbing; }
.work-card.is-dragging {
  opacity: 0.46;
  transform: scale(0.985);
  box-shadow: var(--shadow-md);
}
.work-card[data-status="blocked"] { border-color: var(--danger-border); }
.work-card[data-status="waiting"] { border-color: var(--warn-border); }
.work-card[data-status="review"] { border-color: var(--accent-border); }
.work-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin: 0 0 var(--space-2);
}
.work-card-action span {
  display: inline-block;
  padding: var(--space-0-5) var(--space-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}
.work-card-age {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}
.work-card-title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.work-card-title a { color: inherit; text-decoration: none; }
.work-card-title a:hover,
.work-card-title a:focus-visible { color: var(--accent); }
.work-card-next,
.work-card-blocked {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.work-card-blocked { color: var(--danger-fg); }
.work-card-technical {
  margin: calc(-1 * var(--space-1)) 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
}
.work-card-technical summary {
  cursor: pointer;
  width: fit-content;
  color: var(--text-secondary);
}
.work-card-technical p {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
.work-card-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.work-card-chips .chip { font-size: var(--fs-2xs); line-height: var(--lh-2xs); padding: var(--space-0-5) var(--space-2); }
.work-claim-active { background: var(--info-bg); border-color: var(--info-border); color: var(--info-fg); }
.work-claim-expired { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }
.work-claim-released { background: var(--muted-bg); border-color: var(--border); color: var(--muted); }
.work-card-claim { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.work-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  align-items: center;
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
}
.work-card-runs { display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
.work-health-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}
.work-health-dot.health-ok { background: var(--success); }
.work-health-dot.health-info { background: var(--info-fg); animation: work-flow-pulse 2s ease-in-out infinite; }
.work-health-dot.health-warn { background: var(--warn-fg); }
.work-health-dot.health-danger { background: var(--danger-fg); }
.work-attention {
  background: var(--warn-bg);
  border: var(--border-width) solid var(--warn-border);
  color: var(--warn-fg);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  text-decoration: none;
}
a.work-attention:hover { text-decoration: underline; }
.work-card-transition {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
}

@media (prefers-reduced-motion: reduce) {
  .board-col,
  .work-card {
    transition: none;
  }
  .board-col.is-drop-target,
  .work-card:hover,
  .work-card.is-dragging {
    transform: none;
  }
}
.chip.work-priority-urgent { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); font-weight: var(--fw-semibold); }
.chip.work-priority-high { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }
.chip.work-priority-normal,
.chip.work-priority-low { color: var(--text-muted); }
.chip.work-overdue { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
.chip.work-type-bug { color: var(--danger-fg); }
.chip.work-type-release { color: var(--accent); }

/* ---- Editor modal ----------------------------------------------------------- */
.work-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(15, 25, 35, 0.44);
}
.work-modal {
  width: min(680px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
.work-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
.work-modal-head h2 { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); }
.work-modal-close { font-size: var(--fs-md); color: var(--text-muted); }
.work-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2-5) var(--space-3);
}
.work-editor-grid label { font-size: var(--fs-sm); }
.work-editor-grid .span-2 { grid-column: span 2; }
.work-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}

/* ---- Ticket workbench (detail) ---------------------------------------------- */
.work-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-4);
  align-items: start;
}
.work-detail-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.work-detail-rail { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.work-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2-5);
}
.work-panel-head h3 { margin: 0; }
.work-detail-chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); align-items: center; }
.work-description { margin: 0 0 var(--space-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.work-goal h4 {
  margin: var(--space-4) 0 var(--space-1-5);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.work-acceptance { margin: 0; font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.work-next-action {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.work-next-action strong,
.work-blocked-reason strong {
  display: inline-block;
  margin-right: var(--space-2);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.work-blocked-reason {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--danger-fg);
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger-fg);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

/* Rendered markdown (ticket descriptions). Hierarchy comes from spacing and
   weight, not size: these blocks sit inside a panel that already has an h3, so
   a heading here is a label for the group beneath it, not a second title. */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 var(--space-3); }
.md-heading {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.md-list {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.md-list > li { overflow-wrap: anywhere; }
.md-sublist {
  margin: var(--space-1-5) 0 0;
  padding-left: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  display: grid;
  gap: var(--space-1);
}
/* Long commit URLs are reference material, not reading material. */
.md a { overflow-wrap: anywhere; }
.md code {
  font-size: 0.92em;
  padding: 0.05em 0.3em;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
}

/* Origin rail — the signal a ticket was promoted from, and its citations. */
.work-origin-statement {
  margin: 0 0 var(--space-3);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.work-origin-citations {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-4);
  display: grid;
  gap: var(--space-1-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.work-origin-citations li { overflow-wrap: anywhere; }
.work-origin-merged { margin-top: var(--space-3); }
.work-origin-merged summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Signal-phase timeline entries, before the ticket existed. */
.work-activity-origin .work-activity-dot { background: var(--text-muted); }
.work-activity-origin .work-activity-type { color: var(--text-muted); }

.work-run-facts { margin: 0 0 var(--space-3); }
.work-run-error { color: var(--text-strong); overflow-wrap: anywhere; }

/* Properties rail */
.work-props-list { margin: 0; }
.work-prop {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-1-5) 0;
}
.work-prop + .work-prop { border-top: var(--border-width) solid var(--surface-3); }
.work-prop dt {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}
.work-prop dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  overflow-wrap: anywhere;
}
.work-prop-id {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
}

/* Activity rail */
.work-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.work-activity-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2-5);
  padding: var(--space-2) 0;
}
.work-activity-list li + li { border-top: var(--border-width) solid var(--surface-3); }
.work-activity-dot {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}
.work-activity-body { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); overflow-wrap: anywhere; }
.work-activity-type { font-weight: var(--fw-semibold); color: var(--text); }
.work-activity-time { display: block; margin-top: var(--space-0-5); color: var(--text-muted); font-size: var(--fs-2xs); }

/* Linked runs */
.work-run-narrative {
  margin: 0 0 var(--space-3);
}
.work-run-narrative h4 {
  margin: 0 0 var(--space-1);
}
.work-run-narrative p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.work-run-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.work-run-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
}
.work-run-row + .work-run-row { border-top: var(--border-width) solid var(--surface-3); }
.work-run-main { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.work-run-title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-run-title:hover { color: var(--accent); }
.work-run-sub { color: var(--text-muted); font-size: var(--fs-2xs); line-height: var(--lh-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-run-digest,
.work-run-caveat {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.work-run-caveat { color: var(--warn-fg); }
.work-run-warning {
  color: var(--warn-fg);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
}
.work-run-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.work-run-actions .btn-sm { max-height: 32px; }
@media (max-width: 480px) {
  .work-run-row {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--space-1-5);
  }
  .work-run-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}
.work-run-attach {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) dashed var(--border);
}
.work-run-launch { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.work-run-launch select { flex: 1; min-width: 0; }
.work-linked-block { margin-top: var(--space-4); }
.work-attach-hint {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}
.work-linked-block h4 {
  margin: 0 0 var(--space-1-5);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.work-approval-list,
.work-artifact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-5); font-size: var(--fs-sm); }
.work-approval-list li,
.work-artifact-list li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }

.work-quiet-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

/* ---- Execution flow: progress, not raw logs --------------------------------- */
.work-flow-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-2-5);
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--text-secondary);
}
.work-flow-name { font-weight: var(--fw-semibold); color: var(--text); }
.work-flow-run-link { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--link); text-decoration: none; }
.work-flow-run-link:hover { text-decoration: underline; }
.work-flow-status,
.work-flow-current,
.work-flow-counts { color: var(--text-muted); }
.work-flow-progress {
  display: flex;
  gap: var(--space-0-5);
  height: 6px;
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.work-flow-progress-seg { flex-basis: 0; min-width: 6px; border-radius: var(--radius-pill); background: var(--border); }
.work-flow-progress-seg.seg-done { background: var(--success); }
.work-flow-progress-seg.seg-active { background: var(--info-fg); animation: work-flow-pulse 1.6s ease-in-out infinite; }
.work-flow-progress-seg.seg-waiting { background: var(--warn-fg); }
.work-flow-progress-seg.seg-failed { background: var(--danger-fg); }
.work-flow-progress-seg.seg-cancelled,
.work-flow-progress-seg.seg-skipped { background: var(--border-strong); }
.work-flow-error { color: var(--danger-fg); font-size: var(--fs-sm); }
.work-flow-graph {
  height: 320px;
  margin-bottom: var(--space-2-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Step rail: connected glyph bullets down a hairline spine */
.work-flow-steps { position: relative; list-style: none; margin: 0; padding: 0; }
.work-flow-steps::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--border);
}
.work-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-2-5);
  align-items: start;
  padding: var(--space-1-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.work-flow-glyph {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin-left: -1px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  line-height: 1;
}
.work-flow-main { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.work-flow-label {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-sm);
  display: inline-flex;
  gap: var(--space-1-5);
  align-items: baseline;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.work-flow-kind { font-size: var(--fs-2xs); line-height: var(--lh-2xs); }
.work-flow-detail { font-size: var(--fs-2xs); line-height: var(--lh-2xs); color: var(--text-muted); overflow-wrap: anywhere; }
.work-flow-step.state-done .work-flow-glyph { border-color: var(--success-border); background: var(--success-bg); color: var(--success); }
.work-flow-step.state-active { background: var(--info-bg); }
.work-flow-step.state-active .work-flow-glyph { border-color: var(--info-border); background: var(--surface); color: var(--info-fg); animation: work-flow-pulse 1.6s ease-in-out infinite; }
.work-flow-step.state-failed { background: var(--danger-bg); }
.work-flow-step.state-failed .work-flow-glyph { border-color: var(--danger-border); color: var(--danger-fg); }
.work-flow-step.state-waiting { background: var(--warn-bg); }
.work-flow-step.state-waiting .work-flow-glyph { border-color: var(--warn-border); color: var(--warn-fg); }
.work-flow-step.state-pending .work-flow-main,
.work-flow-step.state-cancelled .work-flow-main,
.work-flow-step.state-skipped .work-flow-main { color: var(--text-muted); }
.work-flow-approval {
  margin: var(--space-2-5) 0 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--warn-border);
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-size: var(--fs-sm);
}
@keyframes work-flow-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- Responsive ------------------------------------------------------------- */
@media (max-width: 1180px) {
  .work-detail { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 980px) {
  .work-command-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .work-command-stats > div:first-child { border-left: 0; padding-left: 0; }
  .work-detail { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .runners-ledger-shell .rl-board-scroller {
    overflow-x: visible;
    overflow-y: visible;
  }

  .runners-ledger-shell .rl-board {
    display: block;
    min-width: 0;
  }

  .runners-ledger-shell .rl-board-col {
    display: none;
    width: 100%;
  }

  .runners-ledger-shell .rl-board-col[data-mobile-active="true"] {
    display: flex;
  }

  .board-scroller {
    overflow-x: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    scroll-snap-type: none;
  }
  .work-mobile-lane-tabs {
    display: flex;
    gap: var(--space-1);
    margin: 0 0 var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: thin;
  }
  .work-mobile-lane-tabs button {
    flex: 0 0 auto;
    min-height: 32px;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-secondary);
    padding: 0 var(--space-3);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
  }
  .work-mobile-lane-tabs button.active {
    border-color: var(--accent-border);
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: var(--fw-semibold);
  }
  .board {
    display: block;
    min-width: 0;
  }
  .board-col {
    display: none;
    width: 100%;
  }
  .board-col[data-mobile-active="true"] {
    display: block;
  }
  .work-operator-item,
  .work-operator-empty { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); }
  .work-operator-label { grid-row: 1; }
  .work-operator-body { grid-column: 1 / -1; grid-row: 2; }
  .work-operator-body strong,
  .work-operator-detail { white-space: normal; }
  .work-operator-meta { grid-row: 1; grid-column: 2; justify-self: end; }
  .work-operator-go { display: none; }
  .work-command-stats { flex-wrap: wrap; gap: var(--space-2) 0; }
  .work-command-stats > div { flex: 1 0 45%; }
  .work-command-stats > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .work-quick-task { grid-template-columns: 1fr; }
  .work-empty-state { align-items: stretch; flex-direction: column; }
  .work-run-attach { grid-template-columns: 1fr; }
  .work-editor-grid { grid-template-columns: 1fr; }
  .work-editor-grid .span-2 { grid-column: auto; }
  .work-filter { width: 100%; max-width: none; flex: 1; }
}

/* --- CI platform (repositories + pipelines; specs/ci-platform.md) --------- */
.ci-app-health,
.ci-repo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-3);
}
.ci-repo-actions { margin: 0 0 var(--space-3); }
.ci-config-status { margin: var(--space-2) 0 0; }
.ci-config-errors ul { margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.ci-config-errors li { margin-bottom: var(--space-1); overflow-wrap: anywhere; }
.ci-provenance {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-3);
}
.ci-provenance dt { color: var(--muted); font-size: 0.85rem; }
.ci-provenance dd { margin: 0; overflow-wrap: anywhere; }
.ci-job-list { list-style: none; margin: 0; padding: 0; }
.ci-job-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}
.ci-job-row:first-child { border-top: 0; }
.ci-job-name { font-weight: 600; min-width: 8rem; overflow-wrap: anywhere; }
.ci-job-meta { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.ci-check-chip.ci-check-lagging { border-color: var(--danger, #b3261e); color: var(--danger, #b3261e); }
@media (max-width: 700px) {
  .ci-provenance { grid-template-columns: 1fr; gap: 0 var(--space-2); }
  .ci-provenance dt { margin-top: var(--space-2); }
  .ci-job-name { min-width: 0; flex: 1 1 100%; }
}

/* ==== Operator dock ========================================================
 * The single secondary surface of the shell. Navigation ("Menu") and the
 * copilot are coordinated modes of this one fixture — never two drawers.
 * Desktop (>1180px): a docked grid column beside the content.
 * Tablet (721–1180px): a right-side overlay with a scrim — one focused surface.
 * Phone (<=720px): full screen.
 */
.operator-dock-holder {
  display: contents;
}

.operator-dock-scrim {
  display: none;
}

.operator-dock {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 58px;
  height: calc(100vh - 58px);
}

.operator-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.operator-dock-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.operator-dock-tab {
  border: 0;
  background: transparent;
  border-radius: 6px;
  min-height: 30px;
  padding: 4px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  cursor: pointer;
}

.operator-dock-tab.active {
  background: var(--brand-tint);
  color: var(--brand);
}

.operator-dock-title {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.operator-dock-tab:focus-visible,
.operator-dock-close:focus-visible {
  outline: 2px solid var(--brand-2, var(--brand));
  outline-offset: 2px;
}

.operator-dock-surface {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Shelf collapse/restore chrome lives with the Wave 2 rules at the end of
 * this file: a chevron in the shelf's top tab band when open, and a compact
 * top-right restore control when collapsed. (The old mid-edge slider is
 * gone.) */

.ledger-utility-holder {
  position: fixed;
  inset: 58px 0 0;
  z-index: 70;
  pointer-events: none;
}

.ledger-utility-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.ledger-utility-menu {
  position: absolute;
  top: 8px;
  right: 16px;
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100vh - 82px);
  overflow-y: auto;
  border: 1px solid var(--rl-rule);
  border-radius: var(--rl-radius);
  background: var(--rl-surface);
  color: var(--rl-ink);
  pointer-events: auto;
}

.ledger-utility-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rl-rule);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* Hamburger glyph — pure CSS, matches the btn-icon sizing. */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 16px;
}

.hamburger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* Dock menu (navigation mode) */
.dock-menu {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  overflow-y: auto;
}

.dock-menu-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.dock-menu-group:last-child {
  border-bottom: 0;
}

.dock-menu-group button,
.dock-menu-group a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-base);
  text-align: left;
  cursor: pointer;
}

.dock-menu-group button.active {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-tint);
}

.dock-menu-group .nav-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.dock-menu-group .nav-badge[hidden] {
  display: none;
}

.mobile-primary-nav .nav-badge[data-badge="runs"],
.rl-topbar .mobile-primary-nav .nav-badge[data-badge="runs"],
.dock-menu-group .nav-badge[data-badge="runs"] {
  display: inline;
  width: auto;
  min-width: 0;
  height: auto;
  margin-left: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
}

.mobile-primary-nav .nav-badge[data-badge="runs"][hidden],
.rl-topbar .mobile-primary-nav .nav-badge[data-badge="runs"][hidden],
.dock-menu-group .nav-badge[data-badge="runs"][hidden] {
  display: none;
}

.runners-ledger-shell .dock-menu-group button,
.runners-ledger-shell .dock-menu-group a {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
}

.runners-ledger-shell .dock-menu-group button:hover,
.runners-ledger-shell .dock-menu-group a:hover,
.runners-ledger-shell .dock-menu-group button:focus-visible,
.runners-ledger-shell .dock-menu-group a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Copilot panel */
.copilot-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.copilot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

.copilot-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.copilot-conversation-picker {
  max-width: 150px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--fs-sm);
}

.copilot-head-ledger {
  display: block;
  padding: 0;
}

.copilot-head-ledger .copilot-conversation-tabs {
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 0;
  min-height: 42px;
  min-width: 0;
  padding-left: 8px;
  background: var(--rl-well, var(--soft));
  border-bottom: 1px solid var(--line);
}

.copilot-head-ledger .copilot-conversation-tab-wrap {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 118px;
  border-bottom: 2px solid transparent;
}

.copilot-conversation-tab-wrap.active {
  border-bottom-color: var(--rl-violet, var(--brand));
}

.copilot-conversation-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 30px;
  padding: 4px 2px 4px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.copilot-tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copilot-tab-attention {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 999px;
  background: var(--rl-cyan, var(--info-fg));
}

.copilot-tab-close,
.copilot-tab-new {
  min-width: 28px;
  min-height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.copilot-tab-new {
  border-bottom: 2px solid transparent;
  color: var(--ink);
}

.copilot-tab-overflow select {
  max-width: 82px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--fs-sm);
}

.copilot-context-row {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 10px;
}

.copilot-conversation-tab:focus-visible,
.copilot-tab-close:focus-visible,
.copilot-tab-new:focus-visible,
.copilot-tab-overflow select:focus-visible {
  outline: 2px solid var(--rl-violet, var(--brand));
  outline-offset: 2px;
}

/* The signature move: a live chip naming what the copilot is watching. It
 * re-pulses once when the operator navigates. */
.copilot-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  animation: copilot-chip-pulse 0.9s ease-out 1;
}

.copilot-context-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.copilot-context-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand);
}

@keyframes copilot-chip-pulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 111, 74, 0.35); }
  100% { box-shadow: 0 0 0 8px rgba(31, 111, 74, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .copilot-context-chip { animation: none; }
}

.copilot-notice {
  padding: 8px 12px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line);
}

.copilot-notice-warn {
  background: var(--warn-bg, #fdf3e2);
  color: var(--warn-fg, #8a5a17);
}

.copilot-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.copilot-empty {
  margin: auto 0;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.copilot-starters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.copilot-msg {
  max-width: 92%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px;
  background: var(--panel);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.copilot-msg p {
  margin: 0 0 6px;
}

.copilot-msg p:last-child {
  margin-bottom: 0;
}

.copilot-msg-user {
  align-self: flex-end;
  background: var(--brand-tint);
  border-color: var(--brand);
}

.copilot-msg-assistant {
  align-self: flex-start;
}

.copilot-msg-blocked {
  border-color: var(--warn);
  background: var(--warn-bg, #fdf3e2);
}

.copilot-msg-error {
  border-color: var(--danger);
}

.copilot-msg-pending {
  opacity: 0.82;
}

.copilot-msg-failed {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--panel) 88%, var(--danger) 12%);
}

.copilot-msg-state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.copilot-msg-retry {
  padding: 2px 7px;
  min-height: 24px;
}

.copilot-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.copilot-action-used {
  opacity: 0.6;
}

/* Confirmation-gated action cards: target + plain-language consequence +
   explicit Confirm/Dismiss. Risk drives only the accent, not extra chrome. */
.copilot-action-card {
  align-self: stretch;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  background: var(--soft);
  padding: 10px 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-sm);
}

.copilot-action-risk-high {
  border-left-color: var(--warn);
}

.copilot-action-settled {
  opacity: 0.75;
}

.copilot-action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.copilot-action-label {
  font-weight: 600;
}

.copilot-action-risk-badge {
  color: var(--warn);
  font-size: var(--fs-xs);
}

.copilot-action-target {
  color: var(--muted);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.copilot-action-consequence {
  margin: 0;
}

.copilot-action-buttons {
  display: flex;
  gap: 6px;
}

/* One picker for one decision — see ActionChoiceCard. */
.copilot-action-choice {
  margin: 6px 0 8px;
}

.copilot-action-choice .input {
  width: 100%;
}

.copilot-action-outcome {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.copilot-code {
  background: var(--console-bg, #101820);
  color: #e6edf3;
  border-radius: 8px;
  padding: 8px 10px;
  overflow-x: auto;
  font-size: var(--fs-xs);
}

/* Run cards: deterministic queue state from the real run row. */
.copilot-run-card {
  align-self: stretch;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  background: var(--soft);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-sm);
}

.copilot-run-failed,
.copilot-run-timed_out,
.copilot-run-budget_exceeded {
  border-left-color: var(--danger);
}

.copilot-run-succeeded {
  border-left-color: var(--ok, var(--brand));
}

.copilot-run-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.copilot-run-step {
  color: var(--muted);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.copilot-run-error {
  color: var(--danger);
  margin: 0;
}

.copilot-run-actions {
  display: flex;
  gap: 6px;
}

.copilot-typing {
  display: inline-flex;
  gap: 4px;
  padding: 6px 10px;
}

.copilot-typing span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
  animation: copilot-typing-bounce 1s infinite;
}

.copilot-typing span:nth-child(2) { animation-delay: 0.15s; }
.copilot-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes copilot-typing-bounce {
  0%, 60%, 100% { transform: none; opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .copilot-typing span { animation: none; opacity: 0.6; }
}

.copilot-status {
  min-height: 18px;
  padding: 0 12px 4px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.copilot-status-warn { color: var(--danger); }

.copilot-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.copilot-input,
.runners-ledger-shell .copilot-input {
  flex: 1;
  min-width: 0;
  min-height: 92px;
  max-height: 180px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.45;
  background: var(--panel);
  overflow-y: hidden;
  transition: height 120ms ease, border-color 120ms ease;
}

.copilot-input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .copilot-input { transition: none; }
}

/* Tablet: the dock overlays from the right with a scrim — one focused
 * surface, content untouched underneath. */
@media (max-width: 1180px) {
  .operator-dock-holder {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
  }

  .operator-dock-scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 28, 0.35);
  }

  .operator-dock {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    width: min(420px, 92vw);
    box-shadow: var(--shadow-3, 0 18px 40px rgba(10, 20, 28, 0.25));
  }

  body.dock-open {
    overflow: hidden;
  }
}

@media (min-width: 1181px) {
  .runners-ledger-shell .operator-dock {
    width: 380px;
  }

}

/* Phone: full-screen dock — exactly one surface on screen. */
@media (max-width: 720px) {
  .operator-dock {
    width: 100%;
    border-left: 0;
  }

  .copilot-context-chip {
    max-width: 38vw;
  }

  .copilot-conversation-tab-wrap {
    max-width: 30vw;
  }

  .ledger-utility-holder {
    inset: 0;
  }

  .ledger-utility-scrim {
    background: rgba(10, 20, 28, 0.2);
  }

  .ledger-utility-menu {
    top: 0;
    right: 0;
    width: min(360px, 92vw);
    max-height: 100vh;
    height: 100%;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

/* Copilot model-policy panel (Settings) */
.copilot-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.copilot-role-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
}

.copilot-role-field select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 6px 8px;
}

@media (max-width: 640px) {
  .copilot-role-grid { grid-template-columns: 1fr; }
}

/* --- Run attempts (stable run identity) ------------------------------------
 * One logical run, one immutable row per execution try. The tabs are a real
 * tablist (roving focus in RunAttempts.jsx); prior failed/superseded tries
 * stay reachable without competing with the live state. Long identifiers
 * truncate inside their own cells so the page never scrolls horizontally. */
.run-attempts-lede {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
}

.run-attempts-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.run-attempt-tab {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: var(--fs-xs);
  padding: 3px 10px;
  cursor: pointer;
}

.run-attempt-tab.is-selected {
  color: var(--fg, #0f172a);
  border-color: #94a3b8;
  background: #f1f5f9;
  font-weight: var(--fw-semibold);
}

.run-attempt-tab.is-current {
  border-color: #bfdbfe;
}

.run-attempt-tab.is-current.is-selected {
  border-color: #60a5fa;
  background: #eff6ff;
}

.run-attempt-tab:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

.run-attempt-panel {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 0;
}

.run-attempt-headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
}

.run-attempt-kind {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.run-attempt-current-chip {
  font-size: var(--fs-xs);
}

.run-attempt-recovery,
.run-attempt-error {
  margin: 4px 0;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.run-attempt-error {
  color: var(--danger);
}

.run-attempt-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 16px;
  margin: 8px 0 0;
  padding: 0;
  font-size: var(--fs-xs);
}

.run-attempt-fact {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-alias-note {
  margin: 2px 0;
  font-size: var(--fs-xs);
}

.run-queue-banner[data-recovering="1"] {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

@media (max-width: 640px) {
  .run-attempt-facts {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
 * Runner's Ledger Wave 2 — composition pass.
 * Wave 1 swapped tokens; this wave recomposes the operational surfaces into
 * one continuous ledger: full-width bands separated by rules, a fixed margin
 * column carrying state, mono for machine facts, semantic color as edge marks
 * only. Everything here is scoped to the Ledger boundary so `?ledger=0`
 * renders the untouched classic fallback.
 * ==========================================================================*/

/* ---- Shared grammar ------------------------------------------------------ */

/* Machine facts read in mono; chips inside the boundary flatten into quiet
 * outlined tags. Semantic chips keep their meaning as text color, never as a
 * tinted wash. */
.runners-ledger-shell .chip {
  border-radius: 3px;
  border-color: var(--rl-rule);
  background: transparent;
  color: var(--rl-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  box-shadow: none;
}

.runners-ledger-shell .chip a {
  color: inherit;
}

.runners-ledger-shell .chip.chip-paused,
.runners-ledger-shell .chip.work-priority-high,
.runners-ledger-shell .chip.chip-budget-warn {
  color: var(--rl-amber);
  border-color: color-mix(in srgb, var(--rl-amber) 40%, var(--rl-rule));
}

.runners-ledger-shell .chip.chip-budget-stop,
.runners-ledger-shell .chip.work-priority-urgent,
.runners-ledger-shell .chip.work-overdue,
.runners-ledger-shell .chip.chip-broken {
  color: var(--rl-red);
  border-color: color-mix(in srgb, var(--rl-red) 40%, var(--rl-rule));
}

.runners-ledger-shell .pills .pill {
  border-radius: 3px;
  border: 1px solid var(--rl-rule);
  background: transparent;
  color: var(--rl-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  box-shadow: none;
}

.runners-ledger-shell .pills .pill a {
  color: inherit;
}

.runners-ledger-shell .pill-label {
  color: var(--rl-muted);
  font: 500 10px/1.6 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The ledger margin cell: fixed-width left column carrying state. */
.rl-margin {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.rl-mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.rl-when {
  color: var(--rl-muted);
  font: 400 12px/1.5 var(--font-mono);
  white-space: nowrap;
}

/* ---- Runs: the daybook --------------------------------------------------- */

/* Needs-a-human band replaces the yellow banner: an opening ledger band with
 * per-group semantic edge marks and inline actions. */
.runners-ledger-shell .attention-strip {
  border: 0;
  border-top: 2px solid var(--rl-ink);
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin: 4px 0 30px;
}

.runners-ledger-shell .attention-strip-head {
  align-items: baseline;
  padding: 12px 0 10px;
}

.runners-ledger-shell .attention-strip-head strong {
  color: var(--rl-ink);
  font-size: 16px;
  font-weight: 600;
}

.runners-ledger-shell .attention-strip-head > .muted {
  font: 500 11px/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.runners-ledger-shell .attention-approvals-link {
  font: 500 12px/1.6 var(--font-mono);
  color: var(--rl-cyan);
  text-decoration: none;
}

.runners-ledger-shell .attention-approvals-link:hover,
.runners-ledger-shell .attention-approvals-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.runners-ledger-shell .attention-group {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 4px 18px;
  border-top: 1px solid var(--rl-rule);
  border-left: 3px solid var(--rl-cyan);
  padding: 11px 0 11px 13px;
}

.runners-ledger-shell .attention-group[data-attention-group="paused"] {
  border-left-color: var(--rl-amber);
}

.runners-ledger-shell .attention-group[data-attention-group="budget"] {
  border-left-color: var(--rl-red);
}

.runners-ledger-shell .attention-group-heading {
  margin: 0;
  color: var(--rl-ink);
  font: 500 11px/1.7 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.runners-ledger-shell .attention-run {
  padding: 4px 0;
}

.runners-ledger-shell .attention-run-title {
  font-weight: 500;
  color: var(--rl-ink);
  text-decoration: none;
}

.runners-ledger-shell .attention-run-title:hover,
.runners-ledger-shell .attention-run-title:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.runners-ledger-shell .attention-run-detail {
  font-size: 12px;
}

.runners-ledger-shell .attention-run .btn-sm,
.runners-ledger-shell .attention-run .button.btn-sm {
  min-height: 30px;
}

/* Filter panel becomes a control line: one hairline-bounded row on the paper. */
.runners-ledger-shell .runs-filter-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0 0 8px;
}

.runners-ledger-shell .runs-filter-bar {
  border-top: 1px solid var(--rl-rule-strong);
  border-bottom: 1px solid var(--rl-rule);
  padding: 10px 0;
  background: transparent;
}

.runners-ledger-shell .runs-filter-bar input,
.runners-ledger-shell .runs-filter-bar select {
  min-height: 36px;
  border-color: var(--rl-rule);
  background: var(--rl-surface);
}

.runners-ledger-shell .runs-filter-bar button {
  min-height: 36px;
}

.runners-ledger-shell .runs-filter-bar button.danger {
  background: transparent;
  border-color: var(--rl-rule);
  color: var(--rl-red);
}

.runners-ledger-shell .runs-filter-bar button.danger:disabled {
  color: var(--rl-muted);
}

.runners-ledger-shell .runs-filter-chip {
  border-radius: 3px;
  border: 1px solid var(--rl-rule);
  background: transparent;
  color: var(--rl-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Day separators become left-anchored ledger date rules: "TODAY ────". */
.runners-ledger-shell .run-history-list {
  gap: 0;
  margin-top: 26px;
}

.runners-ledger-shell .run-history-day {
  gap: 0;
  margin-bottom: 30px;
}

.runners-ledger-shell .run-history-day-runs {
  gap: 0;
}

.runners-ledger-shell .run-history-day-separator {
  justify-content: flex-start;
  gap: 14px;
}

.runners-ledger-shell .run-history-day-separator::before {
  display: none;
}

.runners-ledger-shell .run-history-day-separator::after {
  background: var(--rl-ink);
  height: 2px;
}

.runners-ledger-shell .run-history-day-separator span {
  min-height: 0;
  padding: 0 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rl-ink);
  font: 500 11px/1.6 var(--font-mono);
  letter-spacing: 0.08em;
}

/* Run rows become ledger lines: no boxes, no washes — a hairline between
 * entries, a 3px semantic edge in the margin, dot-and-word state. */
.runners-ledger-shell .run-history-row {
  grid-template-columns: 148px minmax(220px, 1.55fr) minmax(150px, 0.85fr) minmax(130px, auto) auto;
  gap: 8px 18px;
  align-items: start;
  padding: 14px 6px 14px 13px;
  border: 0;
  border-bottom: 1px solid var(--rl-rule);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
}

.runners-ledger-shell .run-history-day-runs .run-history-row:last-child {
  border-bottom-color: var(--rl-rule);
}

.runners-ledger-shell .run-history-row:hover {
  background: var(--rl-surface);
}

.runners-ledger-shell .run-history-row.active {
  border-left-color: var(--rl-violet);
}

.runners-ledger-shell .run-history-row.active.running {
  border-left-color: var(--rl-violet);
}

.runners-ledger-shell .run-history-row.active.waiting_approval {
  border-left-color: var(--rl-cyan);
}

.runners-ledger-shell .run-history-row.active.paused {
  border-left-color: var(--rl-amber);
}

.runners-ledger-shell .run-history-row.active.queued {
  border-left-color: var(--rl-rule-strong);
}

.runners-ledger-shell .run-history-row.failed,
.runners-ledger-shell .run-history-row.error,
.runners-ledger-shell .run-history-row.cancelled,
.runners-ledger-shell .run-history-row.rejected {
  border-left-color: var(--rl-red);
  background: transparent;
}

.runners-ledger-shell .run-history-row.succeeded,
.runners-ledger-shell .run-history-row.recovered,
.runners-ledger-shell .run-history-row.approved {
  border-left-color: transparent;
}

.runners-ledger-shell .run-history-status {
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding-top: 2px;
}

.runners-ledger-shell .run-history-status .run-pulse,
.runners-ledger-shell .run-history-status .run-pulse-row {
  display: none;
}

.runners-ledger-shell .run-history-status .rl-mini-rail {
  width: 120px;
}

.runners-ledger-shell .run-history-status .rl-mini-runner {
  background: transparent;
}

.runners-ledger-shell .run-history-title {
  font-size: 15px;
  font-weight: 600;
}

.runners-ledger-shell .run-history-sub {
  color: var(--rl-muted);
}

.runners-ledger-shell .run-history-sub .run-cap-link {
  color: var(--rl-ink);
  font: 500 11px/1.7 var(--font-mono);
}

.runners-ledger-shell .run-origin {
  font: 400 11px/1.7 var(--font-mono);
  color: var(--rl-muted);
}

.runners-ledger-shell .run-history-signal {
  font-size: 12.5px;
}

/* Context chips become naked mono facts in the row's fact column. */
.runners-ledger-shell .run-history-chips {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-top: 2px;
}

.runners-ledger-shell .run-history-chips .chip {
  border: 0;
  padding: 0;
  min-height: 0;
  background: transparent;
}

.runners-ledger-shell .run-history-chips .code-churn {
  font-family: var(--font-mono);
  font-size: 11px;
}

.runners-ledger-shell .run-history-meta {
  font-family: var(--font-mono);
  padding-top: 2px;
  gap: 4px;
}

.runners-ledger-shell .run-history-meta a {
  color: var(--rl-muted);
}

.runners-ledger-shell .run-history-digest {
  border-top: 1px dashed var(--rl-rule);
  margin: 8px 0 0;
  padding-top: 8px;
  font-size: 12.5px;
  color: var(--rl-muted);
}

.runners-ledger-shell .runs-pagination {
  border-top: 1px solid var(--rl-rule-strong);
  padding-top: 12px;
}

.runners-ledger-shell .runs-pagination .muted {
  font-family: var(--font-mono);
  font-size: 12px;
}

.runners-ledger-shell .rerun-draft-banner {
  border: 1px solid var(--rl-rule-strong);
  border-left: 3px solid var(--rl-violet);
  border-radius: 0;
  background: var(--rl-surface);
  box-shadow: none;
}

/* Empty runs state reads as an open page, not a card. */
.runners-ledger-shell .empty-runs {
  border-top: 1px solid var(--rl-rule);
  padding: 40px 0;
}

/* ---- Register (Agents / Skills / Knowledge) ------------------------------ */

.runners-ledger-shell .rl-register {
  display: block;
  border-top: 2px solid var(--rl-ink);
}

.runners-ledger-shell .rl-register .agent-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2fr) auto;
  gap: 6px 28px;
  border: 0;
  border-bottom: 1px solid var(--rl-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 18px 6px;
}

.runners-ledger-shell .rl-register .agent-card:hover {
  background: var(--rl-surface);
}

.runners-ledger-shell .rl-register .agent-card-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.runners-ledger-shell .rl-register .agent-card h3 {
  margin: 0;
  font-size: 15px;
}

.runners-ledger-shell .rl-register .agent-card .toolbar-actions {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  align-self: start;
}

.runners-ledger-shell .rl-register .agent-card > :not(.agent-card-title):not(.toolbar-actions) {
  grid-column: 2;
  margin: 0;
}

.runners-ledger-shell .rl-register .agent-desc {
  font-size: 13.5px;
}

.runners-ledger-shell .rl-register .pill-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}

.runners-ledger-shell .tabs {
  border-bottom: 1px solid var(--rl-rule-strong);
  gap: 18px;
}

.runners-ledger-shell .tabs .tab {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--rl-muted);
  font-weight: 500;
  min-height: 36px;
  padding-inline: 2px;
}

.runners-ledger-shell .tabs .tab.active {
  border-bottom-color: var(--rl-violet);
  color: var(--rl-ink);
  font-weight: 600;
}

.runners-ledger-shell .agents-blurb {
  font-size: 13px;
  margin-top: 10px;
}

/* ---- Ledger tables (Schedules timetable, Decisions queue, CI registry) --- */

.rl-table .rl-row-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
}

.rl-table .rl-row-title a {
  color: var(--rl-ink);
  text-decoration: none;
}

.rl-table .rl-row-title a:hover,
.rl-table .rl-row-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rl-table td.rl-cell-mono,
.rl-table .rl-cell-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--rl-ink);
}

.rl-table .rl-cell-mono .muted,
.rl-table td .rl-when {
  color: var(--rl-muted);
}

.rl-table tr.rl-row-pending td:first-child {
  border-left: 3px solid var(--rl-cyan);
  padding-left: 10px;
}

.rl-table tr.rl-row-broken td:first-child {
  border-left: 3px solid var(--rl-red);
  padding-left: 10px;
}

.rl-table tr.rl-row-disabled .rl-row-title,
.rl-table tr.rl-row-disabled td {
  color: var(--rl-muted);
}

.rl-table tbody tr:hover {
  background: var(--rl-surface);
}

.rl-table .rl-row-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.rl-table .rl-row-actions button,
.rl-table .rl-row-actions .button {
  min-height: 30px;
  padding: 3px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.rl-table .rl-row-actions button.danger {
  background: transparent;
  border-color: var(--rl-rule);
  color: var(--rl-red);
}

.rl-table .schedule-broken {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--rl-red);
}

/* ---- Repos page: compact inventory with disclosed CI run history ---- */
.rl-repos-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 0 12px;
}

.rl-repos-filter input[type="search"] {
  flex: 1 1 260px;
  min-width: 220px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--rl-rule);
  background: var(--rl-surface);
  border-radius: 6px;
}

.rl-repos-table tr.rl-repo-row td {
  border-top: 1px solid var(--rl-rule-strong);
}

.rl-repos-table tr.rl-repo-row > td {
  white-space: nowrap;
}

.rl-repos-table .rl-row-title,
.rl-repos-table .rl-row-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rl-repos-table .rl-repo-identity {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 260px;
}

.rl-repos-table .rl-repo-identity .rl-row-sub {
  min-width: 0;
  margin-top: 0;
}

.rl-repo-row-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.rl-row-caret,
.rl-repo-group-toggle {
  min-height: 30px;
  border: 1px solid var(--rl-rule);
  background: transparent;
  color: var(--rl-ink);
  font: 600 12px/1 var(--font-mono);
}

.rl-row-caret {
  width: 30px;
  padding: 0;
}

.rl-repo-group-row td {
  border-top: 1px solid var(--rl-rule-strong);
  background: var(--rl-well);
}

.rl-repo-group-row-static td {
  color: var(--rl-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.rl-repo-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
}

.rl-repo-compact-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rl-repo-compact-line a {
  color: var(--rl-ink);
  font-weight: 600;
  text-decoration: none;
}

.rl-repos-table tr.rl-repo-child td {
  border-top: 0;
  background: color-mix(in srgb, var(--rl-surface) 60%, transparent);
  font-size: 12.5px;
}

.rl-repos-table tr.rl-repo-child .rl-repo-child-indent {
  width: 24px;
  color: var(--rl-muted);
  text-align: center;
  padding-right: 0;
}

.rl-repos-table tr.rl-repo-child .rl-repo-child-title a {
  color: var(--rl-ink);
  text-decoration: none;
  font-weight: 500;
}

.rl-repos-table tr.rl-repo-child .rl-repo-child-title a:hover,
.rl-repos-table tr.rl-repo-child .rl-repo-child-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rl-repos-table tr.rl-repo-child-suspicious td {
  background: color-mix(in srgb, var(--rl-red) 8%, var(--rl-surface));
}

.rl-repo-child-stale {
  color: var(--rl-red);
  font-weight: 500;
}

.rl-repos-table tr.rl-repo-child-empty td {
  color: var(--rl-muted);
  font-style: italic;
}

.ci-pipeline-id-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  min-height: 0;
  padding: 2px 7px;
}

@media (max-width: 640px) {
  .rl-repos-table {
    min-width: 0;
  }

  .rl-repos-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .rl-repos-table tbody,
  .rl-repos-table tr.rl-repo-row {
    display: block;
  }

  .rl-repos-table tr.rl-repo-row {
    position: relative;
    min-height: 78px;
    padding: 8px 44px 8px 0;
    border-top: 1px solid var(--rl-rule-strong);
  }

  .rl-repos-table tr.rl-repo-row td {
    display: block;
    border: 0;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rl-repos-table tr.rl-repo-row td:nth-child(1),
  .rl-repos-table tr.rl-repo-row td:nth-child(3),
  .rl-repos-table tr.rl-repo-row td:nth-child(5) {
    display: none;
  }

  .rl-repos-table tr.rl-repo-row td:nth-child(2) {
    line-height: 20px;
  }

  .rl-repos-table tr.rl-repo-row td:nth-child(4) {
    line-height: 18px;
    margin-top: 5px;
  }

  .rl-repos-table tr.rl-repo-row td:nth-child(6) {
    position: absolute;
    top: 8px;
    right: 0;
    width: 40px;
    padding: 0;
  }

  .rl-repos-table .rl-row-actions {
    display: none;
  }

  .rl-repos-table .rl-row-title {
    line-height: 20px;
  }

  .rl-repos-table .rl-repo-identity {
    display: block;
    min-width: 0;
  }

  .rl-repos-table .rl-row-sub {
    margin-top: 0;
    line-height: 18px;
  }

  .rl-repos-table tr.rl-repo-child,
  .rl-repos-table tr.rl-repo-child td,
  .rl-repos-table tr.rl-repo-group-row,
  .rl-repos-table tr.rl-repo-group-row td {
    display: block;
  }

  .rl-repos-table tr.rl-repo-child td,
  .rl-repos-table tr.rl-repo-group-row td {
    padding: 8px;
  }
}

/* Decision filters share the control-line grammar. */
.runners-ledger-shell .approval-filter-panel {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0 0 8px;
}

.runners-ledger-shell .approval-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--rl-rule-strong);
  border-bottom: 1px solid var(--rl-rule);
  padding: 10px 0;
}

.runners-ledger-shell .approval-filter-bar input,
.runners-ledger-shell .approval-filter-bar select {
  min-height: 36px;
  border-color: var(--rl-rule);
  background: var(--rl-surface);
}

.runners-ledger-shell .approval-filter-bar .button {
  min-height: 36px;
}

/* Decision detail: the form is the focal band. */
.rl-decision-detail .approval-detail-grid {
  align-items: start;
}

.rl-decision-detail .approval-main h2 {
  font-size: 18px;
}

.rl-decision-detail .approval-decision {
  border-top: 1px solid var(--rl-rule-strong);
  margin-top: 18px;
  padding-top: 14px;
}

.rl-decision-detail .approval-side {
  border: 0;
  border-top: 2px solid var(--rl-ink);
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
}

/* CI registry facts line. */
.runners-ledger-shell .ci-app-health {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
}

.rl-ci-empty {
  border-top: 1px solid var(--rl-rule);
  padding: 28px 0;
}

.rl-ci-empty code {
  font-family: var(--font-mono);
}

/* ---- Kanban exception (Work board) ---------------------------------------
 * The one place enclosure is load-bearing: lanes are real containers with a
 * lane-tone top rule and full borders; work items are real cards whose status,
 * rail, and move control live INSIDE the card as its footer. */
.runners-ledger-shell .rl-board-col {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rl-rule-strong);
  border-top: 2px solid var(--rl-rule-strong);
  border-radius: var(--rl-radius);
  background: var(--rl-well);
  padding: 0;
}

.runners-ledger-shell .rl-board-col[data-lane="ready"] { border-top-color: var(--rl-violet); }
.runners-ledger-shell .rl-board-col[data-lane="running"] { border-top-color: var(--rl-violet); }
.runners-ledger-shell .rl-board-col[data-lane="attention"] { border-top-color: var(--rl-amber); }
.runners-ledger-shell .rl-board-col[data-lane="review"] { border-top-color: var(--rl-cyan); }
.runners-ledger-shell .rl-board-col[data-lane="shipped"] { border-top-color: var(--rl-green); }

.runners-ledger-shell .rl-board-col .board-col-header {
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--rl-rule-strong);
  background: var(--rl-surface);
  border-radius: calc(var(--rl-radius) - 1px) calc(var(--rl-radius) - 1px) 0 0;
}

.runners-ledger-shell .rl-board-col .board-col-header .rl-count {
  margin-left: auto;
}

.runners-ledger-shell .rl-board-col .board-col-hint {
  margin: 8px 12px 6px;
  min-height: 0;
}

.runners-ledger-shell .rl-board-col .board-col-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  min-height: 120px;
  flex: 1;
}

.runners-ledger-shell .rl-board-col.is-drop-target {
  border-color: var(--rl-violet);
  background: color-mix(in srgb, var(--rl-violet) 6%, var(--rl-well));
  box-shadow: inset 0 0 0 1px var(--rl-violet);
  transform: none;
}

.runners-ledger-shell .rl-board-col .board-col-empty {
  margin: 0;
  border: 1px dashed var(--rl-rule-strong);
  border-radius: var(--rl-radius);
  background: transparent;
  color: var(--rl-muted);
  padding: 14px 12px;
}

/* The card: item boundary is unmistakable — surface, border, radius. The
 * status + rail + move select form the card footer. */
.runners-ledger-shell .rl-board-item-row {
  border: 1px solid var(--rl-rule-strong);
  border-radius: var(--rl-radius);
  background: var(--rl-surface);
  overflow: hidden;
}

.runners-ledger-shell .rl-board-item-row:focus-within {
  border-color: var(--rl-violet);
}

.runners-ledger-shell .rl-board-item-row .work-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 12px 12px 10px;
}

.runners-ledger-shell .rl-board-item-row .work-card:hover {
  transform: none;
  box-shadow: none;
}

.runners-ledger-shell .rl-board-item-row[data-item-status="blocked"] {
  border-left: 3px solid var(--rl-red);
}

.runners-ledger-shell .rl-board-item-row[data-item-status="waiting"] {
  border-left: 3px solid var(--rl-amber);
}

.runners-ledger-shell .rl-board-item-row[data-item-status="review"] {
  border-left: 3px solid var(--rl-cyan);
}

.runners-ledger-shell .rl-board-item-row[data-item-status="running"] {
  border-left: 3px solid var(--rl-violet);
}

.runners-ledger-shell .rl-board-item-ops {
  gap: 7px;
  padding: 9px 12px 11px;
  border-top: 1px solid var(--rl-rule);
  background: color-mix(in srgb, var(--rl-well) 55%, var(--rl-surface));
}

.runners-ledger-shell .rl-board-item-ops .rl-mini-rail {
  width: 100%;
}

.runners-ledger-shell .rl-board-item-ops .rl-mini-runner {
  background: transparent;
}

.runners-ledger-shell .rl-board-item-ops .rl-row-move {
  min-height: 30px;
}

.runners-ledger-shell .rl-board-scroller:focus-visible {
  outline: 2px solid var(--rl-violet);
  outline-offset: 2px;
}

/* Board focal band + view toggle. */
.runners-ledger-shell .rl-work-board-section .rl-section-head {
  border-bottom-width: 2px;
}

.runners-ledger-shell .work-view-tabs {
  margin: 18px 0 0;
}

/* ---- Copilot shelf chrome ------------------------------------------------ */

/* The collapse control is a chevron at the top of the shelf, sitting in the
 * conversation-tabs band. No more mid-edge slider. */
.copilot-shelf-handle {
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: var(--rl-ink, var(--ink));
}

.copilot-shelf-chevron {
  font: 600 16px/1 var(--font-mono, monospace);
  pointer-events: none;
}

.copilot-shelf-handle[data-shelf-open="true"] .copilot-shelf-label {
  font-size: 12px;
}

.operator-dock .copilot-shelf-handle {
  position: absolute;
  top: 5px;
  right: 6px;
  left: auto;
  z-index: 3;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: var(--rl-radius, 4px);
  background: transparent;
  transform: none;
}

.operator-dock .copilot-shelf-handle[data-shelf-open="true"] {
  width: auto;
  min-width: 78px;
  grid-auto-flow: column;
  gap: 6px;
  padding: 0 8px;
}

.operator-dock .copilot-shelf-handle:hover {
  border-color: var(--rl-rule, var(--line));
  background: var(--rl-surface, var(--panel));
}

/* Reserve room in the tabs band so the chevron never overlaps a tab. */
.copilot-head-ledger .copilot-conversation-tabs {
  padding-right: 44px;
}

/* Collapsed: a compact restore chevron pinned to the same top-right region
 * the shelf's tab band occupies when open — never mid-viewport. */
.copilot-shelf-handle[data-shelf-open="false"] {
  position: fixed;
  z-index: 40;
  top: 66px;
  right: 0;
  width: auto;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  border: 1px solid var(--rl-rule, var(--line));
  border-right: 0;
  border-radius: var(--rl-radius, 4px) 0 0 var(--rl-radius, 4px);
  background: var(--rl-surface, var(--panel));
  transform: none;
  grid-auto-flow: column;
  gap: 8px;
  padding: 0 12px;
}

.copilot-shelf-label {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.copilot-shelf-handle[data-shelf-open="false"]:hover {
  color: var(--rl-violet, var(--brand));
}

.copilot-shelf-handle:focus-visible {
  outline: 2px solid var(--rl-violet, var(--brand));
  outline-offset: 2px;
}

/* ---- Utility menu: an opaque, deliberate overlay ------------------------- */

.ledger-utility-holder {
  --rl-paper: #f7f8fb;
  --rl-surface: #ffffff;
  --rl-well: #eef1f5;
  --rl-ink: #20242a;
  --rl-muted: #68707b;
  --rl-rule: #dfe3e9;
  --rl-rule-strong: #afb6c0;
  --rl-violet: #6546d7;
  --rl-red: #bd3038;
  --rl-radius: 4px;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}

.ledger-utility-scrim {
  background: rgba(24, 28, 35, 0.34);
}

.ledger-utility-menu {
  border: 1px solid var(--rl-rule-strong);
  background: var(--rl-surface);
  color: var(--rl-ink);
  box-shadow: 0 18px 48px rgba(18, 22, 28, 0.22);
}

.ledger-utility-head {
  color: var(--rl-muted);
  font: 500 11px/1.6 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--rl-well);
}

.ledger-utility-menu .dock-menu {
  gap: 0;
  padding: 6px 0 8px;
}

.ledger-utility-menu .dock-menu-group {
  gap: 0;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--rl-rule);
}

.ledger-utility-menu .dock-menu-group:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ledger-utility-menu .dock-menu-label {
  padding: 8px 16px 4px;
  color: var(--rl-muted);
  font: 500 10px/1.6 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ledger-utility-menu .dock-menu-group button,
.ledger-utility-menu .dock-menu-group a {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rl-ink);
  font-size: 14px;
}

.ledger-utility-menu .dock-menu-group button:hover,
.ledger-utility-menu .dock-menu-group a:hover {
  background: var(--rl-well);
  text-decoration: none;
}

.ledger-utility-menu .dock-menu-group button:focus-visible,
.ledger-utility-menu .dock-menu-group a:focus-visible {
  outline: 2px solid var(--rl-violet);
  outline-offset: -2px;
  text-decoration: none;
}

/* ---- Ledger dl bands (Schedules detail, Decisions detail) ---------------- */

.runners-ledger-shell .schedule-facts dt,
.runners-ledger-shell .approval-facts dt,
.runners-ledger-shell .approval-summary dt,
.runners-ledger-shell .approval-outcomes dt {
  color: var(--rl-muted);
  font: 500 10px/1.7 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Responsive: ledger lines stack, margins hold ------------------------ */

@media (max-width: 900px) {
  .runners-ledger-shell .run-history-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "status actions"
      "main   main"
      "meta   meta"
      "chips  chips"
      "digest digest";
    padding-left: 13px;
  }

  .runners-ledger-shell .run-history-status {
    flex-direction: row;
    align-items: center;
  }

  .runners-ledger-shell .run-history-chips {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .runners-ledger-shell .attention-group,
  .runners-ledger-shell .operator-notification-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .runners-ledger-shell .operator-notification-side {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .runners-ledger-shell .operator-notification-when {
    padding-top: 0;
  }

  .runners-ledger-shell .rl-register .agent-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .runners-ledger-shell .rl-register .agent-card-title,
  .runners-ledger-shell .rl-register .agent-card .toolbar-actions,
  .runners-ledger-shell .rl-register .agent-card > :not(.agent-card-title):not(.toolbar-actions) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ---- Wave 2 refinements --------------------------------------------------- */

/* Row sub-lines are prose by default; only explicit identifier subs stay mono. */
.rl-row-sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
}

.rl-row-sub.mono {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Inline share links never inflate to full button height inside the boundary. */
.runners-ledger-shell .share-link {
  min-height: 0;
  min-width: 28px;
  vertical-align: middle;
}

/* Workflow links on run rows are mono facts, not tinted capsules. */
.runners-ledger-shell .run-cap-link {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--rl-ink);
}

/* Ledger tables read top-aligned so margin state and titles line up. */
.rl-table td {
  vertical-align: top;
}

.rl-table .rl-status {
  white-space: nowrap;
}

.rl-schedule-table th:nth-child(2) {
  min-width: 240px;
}

.rl-schedule-table th:nth-child(3) {
  min-width: 170px;
}

.rl-schedule-table th:nth-child(4),
.rl-decision-table th:nth-child(4) {
  min-width: 110px;
}

.rl-decision-table th:nth-child(2) {
  min-width: 260px;
}

/* Work board action pills flatten into labeled mono tags; tone lives in the
 * text, not a wash. */
.runners-ledger-shell .work-card-action span {
  border: 1px solid var(--rl-rule);
  border-radius: 3px;
  background: transparent;
  color: var(--rl-muted);
  font-family: var(--font-mono);
}

.runners-ledger-shell .work-card-action.tone-danger span {
  color: var(--rl-red);
  border-color: color-mix(in srgb, var(--rl-red) 40%, var(--rl-rule));
}

.runners-ledger-shell .work-card-action.tone-warn span {
  color: var(--rl-amber);
  border-color: color-mix(in srgb, var(--rl-amber) 40%, var(--rl-rule));
}

.runners-ledger-shell .work-card-action.tone-success span {
  color: var(--rl-green);
  border-color: color-mix(in srgb, var(--rl-green) 40%, var(--rl-rule));
}

.runners-ledger-shell .work-card-action.tone-info span {
  color: var(--rl-cyan);
  border-color: color-mix(in srgb, var(--rl-cyan) 40%, var(--rl-rule));
}

/* Status stays punctuation everywhere in the boundary: re-assert the flat
 * dot-and-word treatment at the end of the cascade so no legacy per-status
 * tint (same specificity, earlier in the file) can repaint a capsule. */
.runners-ledger-shell .status,
.runners-ledger-shell .status.running,
.runners-ledger-shell .status.queued,
.runners-ledger-shell .status.assigned,
.runners-ledger-shell .status.pending,
.runners-ledger-shell .status.waiting_approval,
.runners-ledger-shell .status.paused,
.runners-ledger-shell .status.recovering,
.runners-ledger-shell .status.succeeded,
.runners-ledger-shell .status.online,
.runners-ledger-shell .status.offline,
.runners-ledger-shell .status.approved,
.runners-ledger-shell .status.failed,
.runners-ledger-shell .status.error,
.runners-ledger-shell .status.cancelled,
.runners-ledger-shell .status.rejected,
.runners-ledger-shell .status.enabled,
.runners-ledger-shell .status.disabled {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

/* Utility menu rows are left-aligned despite the global button centering. */
.ledger-utility-menu .dock-menu-group button,
.ledger-utility-menu .dock-menu-group a {
  justify-content: flex-start;
  text-align: left;
}

/* ---- Run detail: editorial hero + technical disclosure -------------------
 * Replaces the old panel stack (banner + meta strip + chip strip + notices +
 * outcome + relationships + diagnostics + 8 <details>) with a single hero
 * region and one collapsible "Technical details" disclosure. The hero is
 * typography-forward — status verb → title → purpose → state-driven evidence
 * → primary action — so the operator can read what happened in one glance.
 * Cards, tiles, and box borders are gone; separation comes from whitespace,
 * hairlines, and headings.
 */
.run-hero {
  display: block;
  padding: 6px 4px 18px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--line);
}

.run-hero[data-status="failed"] .run-hero-verb,
.run-hero[data-status="error"] .run-hero-verb,
.run-hero[data-status="blocked_by_gate"] .run-hero-verb,
.run-hero[data-status="blocked_by_preflight"] .run-hero-verb,
.run-hero[data-status="provider_limited"] .run-hero-verb,
.run-hero[data-status="timed_out"] .run-hero-verb,
.run-hero[data-status="invalid_output"] .run-hero-verb,
.run-hero[data-status="infra_unavailable"] .run-hero-verb,
.run-hero[data-status="needs_human"] .run-hero-verb,
.run-hero[data-status="budget_exceeded"] .run-hero-verb {
  color: var(--danger);
}
.run-hero[data-status="cancelled"] .run-hero-verb,
.run-hero[data-status="rejected"] .run-hero-verb,
.run-hero[data-status="waiting_approval"] .run-hero-verb,
.run-hero[data-status="paused"] .run-hero-verb {
  color: var(--warn);
}
.run-hero[data-status="succeeded"] .run-hero-verb,
.run-hero[data-status="recovered"] .run-hero-verb,
.run-hero[data-status="approved"] .run-hero-verb {
  color: var(--ok);
}

.run-hero-status {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  font-size: var(--fs-sm);
}

.run-hero-verb {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  letter-spacing: 0.01em;
}

.run-hero-timing {
  font-size: var(--fs-sm);
  min-width: 0;
  overflow-wrap: anywhere;
}

.run-hero-title {
  margin: 4px 0 6px;
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.2;
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
  min-width: 0;
}

.run-hero-sub {
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  min-width: 0;
}

.run-hero-sub .run-cap-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-hero-purpose {
  margin: 0 0 12px;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
  max-width: 72ch;
  white-space: pre-wrap;
}

/* Smithers events folded onto the workflow graph. This stays in the readable
 * run surface, above Technical details. */
.run-flow-overview {
  margin: 4px 0 24px;
  padding: 20px 0 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.run-flow-overview-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.run-flow-overview-kicker {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.run-flow-overview h2 { margin: 0; font-size: var(--fs-xl); }
.run-flow-overview-position {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.run-flow-overview-position strong { color: var(--ink); font-size: var(--fs-sm); }
.run-flow-overview-graph {
  height: 300px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.run-flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.run-flow-legend li { display: inline-flex; align-items: center; gap: 5px; }
.run-flow-legend li > span { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.run-flow-legend .state-done > span { background: var(--success); }
.run-flow-legend .state-active > span { background: var(--info-fg); box-shadow: 0 0 0 3px var(--info-bg); }
.run-flow-legend .state-waiting > span { background: var(--warn-fg); }
.run-flow-legend .state-failed > span { background: var(--danger-fg); }
.run-flow-legend .state-pending > span { background: var(--border); }

.run-hero-evidence {
  margin: 12px 0 16px;
  display: block;
  min-width: 0;
}

.run-hero-evidence-inner {
  display: grid;
  gap: 10px;
}

.run-hero-evidence-fallback,
.run-hero-evidence-queue,
.run-hero-evidence-recovering {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.run-hero-diagnostics {
  border-left: 3px solid var(--danger);
  padding: 8px 12px;
  background: linear-gradient(180deg, #fef2f2, transparent 80%);
  border-radius: 0 6px 6px 0;
}

.run-hero-diagnostics.diagnostics-waiting_approval,
.run-hero-diagnostics.diagnostics-paused {
  border-left-color: var(--warn);
  background: linear-gradient(180deg, #fffbeb, transparent 80%);
}

.run-hero-diagnostics-headline {
  margin: 0 0 8px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  overflow-wrap: anywhere;
}

.run-hero-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0 0 8px;
  font-size: var(--fs-sm);
}
.run-hero-facts dt { color: var(--muted); font-weight: var(--fw-medium); }
.run-hero-facts dd { margin: 0; overflow-wrap: anywhere; }

.run-hero-log-excerpts {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
}
.run-hero-log-excerpts li { overflow-wrap: anywhere; }
.run-hero-log-excerpts time { color: var(--muted); margin-right: 6px; }
.run-hero-log-excerpts code { color: var(--brand); margin-right: 6px; }

.run-hero-diagnostics-actions {
  margin: 4px 0 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.run-hero-diagnostics-actions .link-btn {
  background: transparent;
  border: none;
  color: var(--brand);
  cursor: pointer;
  padding: 4px 0;
  font-size: var(--fs-sm);
}
.run-hero-diagnostics-actions .link-btn:hover,
.run-hero-evidence-fallback .link-btn:hover { text-decoration: underline; }
.run-hero-evidence-fallback .link-btn {
  background: transparent;
  border: none;
  color: var(--brand);
  cursor: pointer;
  padding: 4px 0;
  font-size: var(--fs-sm);
}

.run-hero-console {
  border-left: 3px solid var(--brand);
  padding: 0 0 0 12px;
  max-height: 40vh;
  overflow: hidden;
}
@media (min-width: 720px) {
  .run-hero-console { max-height: 55vh; }
}
.run-hero-console .live-console { border: 0; background: transparent; }

.run-outcome-inline {
  margin: 4px 0 0;
}
.run-outcome-inline .run-outcome-digest-inline {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink);
  max-width: 72ch;
}
.run-outcome-meta {
  margin: 0;
  font-size: var(--fs-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  overflow-wrap: anywhere;
}

.run-hero-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.run-hero-actions button,
.run-hero-actions .button {
  min-height: 36px;
}
.run-hero-primary {
  font-weight: var(--fw-semibold);
}

.run-alias-note {
  margin: -8px 0 12px;
  font-size: var(--fs-sm);
}
.run-focus-note {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
}

/* Technical-details disclosure — single collapsible box hiding all the
 * mechanical detail so the default view stays clean. Editorial: sub-sections
 * are separated by hairlines, not by borders/boxes. */
.run-technical {
  margin: 4px 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

.run-technical > .run-technical-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--soft);
  border: 1px solid var(--line);
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.run-technical > .run-technical-summary::-webkit-details-marker { display: none; }
.run-technical > .run-technical-summary::before {
  content: "▸";
  color: var(--muted);
  transition: transform 0.15s ease;
  display: inline-block;
  width: 12px;
  text-align: center;
}
.run-technical[open] > .run-technical-summary::before { transform: rotate(90deg); }
.run-technical-summary-label { font-weight: var(--fw-semibold); }
.run-technical-summary-hint { font-size: var(--fs-xs); }

@media (max-width: 700px) {
  .runners-ledger-shell .rl-board-scroller {
    overflow-x: visible;
    overflow-y: visible;
  }

  .runners-ledger-shell .rl-board {
    display: block;
    min-width: 0;
  }

  .runners-ledger-shell .rl-board-col {
    display: none;
    width: 100%;
  }

  .runners-ledger-shell .rl-board-col[data-mobile-active="true"] {
    display: flex;
  }
}

.run-technical-body {
  margin-top: 12px;
  padding: 0 4px;
}

.run-tech-section {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: transparent;
}
.run-tech-section-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 8px;
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}
@media (max-width: 720px) {
  .run-tech-section-head { position: static; }
}
.run-tech-section-head h3 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}
.run-tech-section-meta {
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
  min-width: 0;
}
.run-tech-section-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.run-tech-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 20px 0;
  opacity: 0.9;
}

.run-tech-list {
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  font-size: var(--fs-sm);
}
.run-tech-row {
  display: contents;
}
.run-tech-row dt {
  color: var(--muted);
  font-weight: var(--fw-medium);
}
.run-tech-row dd {
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
.run-tech-meta-strip { margin-top: 6px; }
.run-tech-meta-strip .run-meta-strip { margin: 0; }

/* Frameless IO blocks inside the technical disclosure. Reuses the existing
 * summary-list + raw-JSON details styles so the payload block still looks
 * like a payload block; only the outer card border is dropped. */
.run-io-block {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.run-io-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.run-io-block h4 {
  margin: 0;
  font-size: var(--fs-base);
}
.run-io-block-meta {
  min-width: 0;
  font-size: var(--fs-xs);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-io-block .run-io-raw {
  border-top: 1px solid var(--line);
  background: var(--soft);
  border-radius: 0 0 6px 6px;
  margin-top: 8px;
}

/* Diagnostics panel inside the technical disclosure — the border/panel styling
 * from the old top-of-page callout is overridden here to sit editorially. */
.run-technical .diagnostics-panel {
  border: 0;
  background: transparent;
  padding: 0;
}
.run-technical .diagnostics-panel.diagnostics-waiting_approval,
.run-technical .diagnostics-panel.diagnostics-paused {
  background: transparent;
}

/* Legacy .panel styling is dropped from the run-detail hero region so the
 * "Loading run…" / "Run not found" states still read clean without a border. */
.run-hero:has(> p.muted:only-child),
.run-hero:has(> h1:only-child) {
  border-bottom: 0;
}

/* Responsive: mobile pass for the hero + disclosure. Keep the CTA visible,
 * clamp large text, and drop container padding so 375px never overflows. */
@media (max-width: 600px) {
  .run-hero { padding: 2px 2px 14px; }
  .run-hero-status { gap: 6px 10px; font-size: var(--fs-xs); }
  .run-hero-purpose { font-size: var(--fs-sm); max-width: 100%; }
  .run-hero-actions { flex-wrap: wrap; gap: 6px; }
  .run-hero-actions .run-hero-primary { flex: 1 1 auto; }
  .run-io-grid { grid-template-columns: 1fr; }
  .run-technical-body { padding: 0 2px; }
  .run-hero-console { max-height: 40vh; }
  .run-flow-overview { padding-top: 16px; }
  .run-flow-overview-head { align-items: start; flex-direction: column; gap: 7px; }
  .run-flow-overview-position { justify-content: flex-start; }
  .run-flow-overview-graph { height: 260px; }
}

@media (max-width: 720px) {
  .run-io-grid { grid-template-columns: 1fr; }
}

/* ---- Runners (ledger boundary) -----------------------------------------
 * The Runners page renders inside LedgerPage; keep runner-specific chrome
 * consistent with Signals / Schedules / Repos. Compact tags, stacked auth
 * pills, sat-slot tint, and a right-aligned doctor line under the stats. */
.rl-runner-stats > div {
  min-width: 108px;
}

.rl-runner-stats dd .rl-stat-of {
  color: var(--rl-muted);
  font-size: 15px;
  font-weight: 500;
  margin-left: 4px;
}

.rl-runner-doctor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--rl-rule);
  color: var(--rl-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.runners-ledger-shell .rl-runner-table td .runner-slot {
  border-radius: 2px;
}

.runners-ledger-shell .rl-runner-table td .runner-capacity-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--rl-ink);
}

.runners-ledger-shell .rl-runner-table td .runner-capacity.saturated .runner-capacity-count {
  color: var(--rl-red);
}

.runners-ledger-shell .rl-runner-table .runner-auth-cell {
  min-width: 140px;
}

.rl-auth-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rl-runner-tag {
  display: inline-block;
  margin: 2px 4px 0 0;
  padding: 1px 6px;
  border: 1px solid var(--rl-rule);
  border-radius: 3px;
  font: 500 11px/1.5 var(--font-mono);
  color: var(--rl-muted);
}

.rl-runner-offline-actions {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

/* Detail expansion nests inside the ledger table — reuse the classic dl grid
 * but strip the soft-tinted td background so it reads as one ledger surface. */
.runners-ledger-shell .rl-runner-table .runner-detail-row td {
  background: var(--rl-well);
  border-bottom: 1px solid var(--rl-rule);
}

.runners-ledger-shell .rl-runner-table .runner-detail-grid dt {
  color: var(--rl-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.runners-ledger-shell .rl-runner-table .runner-detail-auth {
  border-top: 1px solid var(--rl-rule);
}

/* Saturation gets a cyan margin — same vocabulary as pending decisions. */
.runners-ledger-shell .rl-runner-table tr.rl-row-pending td:first-child {
  border-left-color: var(--rl-amber);
}

@media (max-width: 900px) {
  .rl-runner-table .runner-auth-cell {
    min-width: 0;
  }
  .rl-runner-stats > div {
    min-width: 88px;
    flex: 1 0 30%;
  }
}

/* ============================================================================
 * ACCESS TOKENS SURFACE (Connect / Tokens page)
 * A calmer two-panel layout: New token on the left, Existing tokens on the
 * right. The list surfaces "never used" and "stale" (>30d idle) keys first
 * with a summary strip so revoking abandoned credentials is a scannable job.
 * ==========================================================================*/
.tokens-layout > .panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.token-intro-panel {
  padding-block: var(--space-3);
}

.token-list-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.token-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-2);
}

.token-summary-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.token-summary-item strong {
  font-weight: var(--fw-semibold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.tokens-table .token-name {
  font-weight: var(--fw-semibold);
}

.tokens-table .token-id {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.tokens-table .token-grants {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
}

.tokens-table .token-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

/* Freshness highlighting: unused and stale rows get a subtle warning tint so
 * revoke candidates are visible without reading the badge column. Revoked /
 * expired rows are dimmed so they visually recede. */
.tokens-table tr[data-token-freshness="unused"],
.tokens-table tr[data-token-freshness="stale"] {
  background: var(--warn-bg, rgba(255, 196, 0, 0.08));
}

.tokens-table tr[data-token-freshness="inactive"] {
  opacity: 0.7;
}