@layer sd-tokens, sd-shell, sd-layout-primitives, sd-components, sd-screen-surfaces;

/* @console-layer: tokens
   Owns fonts, variables, theme values, density, motion, and type scale.
   Keep route-specific selectors out of this layer.
*/

/* ---------------------------------------------------------------------------
   Typography — self-hosted fonts (latin subset). woff2 files and the SIL OFL
   license live in ./fonts/. Manifesto §4: Bricolage Grotesque = display
   (front-door headline, page/section titles), Hanken Grotesk = body/UI
   (Geist variable kept as the first fallback), JetBrains Mono = labels /
   IDs / costs / code.
--------------------------------------------------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-600.woff2") format("woff2");
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-700.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/hanken-grotesk-400.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/hanken-grotesk-500.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/hanken-grotesk-600.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/hanken-grotesk-700.woff2") format("woff2");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/geist-variable-latin.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono-variable-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Typeface stacks */
  --sd-font-sans: "Hanken Grotesk", "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Display voice — Bricolage 700 on the front door, 600 everywhere else. */
  --sd-font-display: "Bricolage Grotesque", var(--sd-font-sans);
  --sd-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Warm paper canvas — cards stay pure white so they float; the dark theme
     keeps its cool zinc. Warm light / cool dark is the app's signature. */
  --sd-paper: #f5f4f1;
  --sd-paper-strong: #ffffff;
  --sd-surface: #ffffff;
  --sd-surface-panel-2: #faf9f7;
  --sd-surface-muted: #eeede9;

  /* Page-level background regions (rail/edge fills) and the second-tier
     surface that nests one level below --sd-surface. Both previously rode on
     fallback-bearing var() references and silently resolved to dark hexes in
     LIGHT mode; defined here so they track the theme. See ADR 0039. */
  --sd-page-bg: var(--sd-paper);
  --sd-surface-2: color-mix(in oklch, var(--sd-surface-muted) 70%, var(--sd-paper-strong));

  /* Code regions — a touch cooler/darker than the surrounding surface so code
     reads as a distinct material without flipping to dark in light mode. */
  --sd-code-bg: var(--sd-surface-muted);
  --sd-code-ink: var(--sd-ink-muted);

  /* Ink — warm near-black family (AA-verified on the warm paper) */
  --sd-ink: #1d1c19;
  --sd-ink-muted: #44423d;
  --sd-muted: #57544e;
  --sd-subtle: #6b6862;
  --sd-text-mono: #44423d;

  /* Hairlines */
  --sd-line: #ddd9d3;
  --sd-line-strong: #c9c5bd;
  --sd-line-stronger: #a5a098;

  /* Single blue accent — the one brand accent */
  --sd-accent: #2563eb;
  --sd-accent-soft: #e7eefe;
  --sd-accent-hover: #1d4ed8;
  --sd-accent-ink: #1d4ed8;
  --sd-accent-strong: var(--sd-accent-ink);
  --sd-on-accent: #ffffff;
  --sd-on-danger: #ffffff;

  /* Iris — the builder agent's signature accent (manifesto §4: #8b7bff).
     Builder surfaces ONLY; everything else stays grayscale + status. Light
     theme darkens the signature hue so white-on-iris actions keep the same
     contrast bar as the blue accent; dark theme uses the hue directly. */
  --sd-accent-iris: #6d5ae8;
  --sd-accent-iris-soft: #edebfd;
  --sd-accent-iris-hover: #5b48d6;
  --sd-accent-iris-ink: #5747cf;

  /* Status hues + soft fills */
  --sd-info: #2f6fed;
  --sd-sage: #15803d;
  --sd-warning: #b45309;
  --sd-danger: #dc2626;
  --sd-ok-soft: #e7f6ec;
  --sd-warn-soft: #fbf0dd;
  --sd-error-soft: #fceaea;
  --sd-info-soft: #e7eefe;

  /* Legacy aliases — --sd-teal and --sd-blue both meant "info blue" */
  --sd-teal: var(--sd-info);
  --sd-blue: var(--sd-info);

  /* Legacy aliases — pre-re-skin token names still referenced by the 03/04
     layers. Aliased onto current cool-minimal tokens; `var()` re-resolves per
     active theme at use-time, so one definition here covers both themes. */
  --sd-border: var(--sd-line);
  --sd-border-subtle: var(--sd-line);
  --sd-line-soft: var(--sd-line);
  --sd-link: var(--sd-accent);
  --sd-success: var(--sd-tone-ok-fg);
  --sd-success-soft: var(--sd-ok-soft);
  --sd-surface-strong: var(--sd-paper-strong);
  --sd-surface-raised: var(--sd-surface);
  --sd-paper-soft: var(--sd-surface-muted);
  --sd-text-muted: var(--sd-muted);
  --sd-text-caption: var(--sd-text-label);
  --sd-accent-border: color-mix(in oklch, var(--sd-accent) 38%, var(--sd-line));
  /* Warm sand from the artifact-paper palette — used only as a low-% tint. */
  --sd-warm: var(--sd-artifact-grad-b);

  /* Canonical neutral fills — the two recipes the card zoo converged on.
     well = sunken neutral region inside a card; glass = translucent panel
     over blurred/backdrop chrome. Use these instead of bespoke color-mix %s. */
  --sd-fill-well: color-mix(in oklch, var(--sd-surface-muted) 80%, var(--sd-paper-strong));
  --sd-fill-glass: color-mix(in oklch, var(--sd-paper-strong) 88%, transparent);

  /* Radius scale — crisp, cool-minimal */
  --sd-radius-xs: 3px;
  --sd-radius-sm: 4px;
  --sd-radius: 6px;
  --sd-radius-lg: 9px;
  --sd-radius-pill: 999px;

  /* Motion + focus */
  --sd-focus: var(--sd-accent);
  --sd-duration-fast: 120ms;
  --sd-duration-base: 160ms;
  --sd-duration-panel: 200ms;
  --sd-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sd-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  /* Decelerating ease for things entering/leaving the screen (overlays). */
  --sd-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Elevation tiers — four steps, theme-tinted so cards lift off the warm
     paper (ADR 0039). Pick the tier that matches the surface's role; do not
     hand-roll bespoke box-shadows.
       flat  — flush/inset regions (list rows inside a panel, table cells)
       soft  — resting cards that want a hair of separation
       (default --sd-shadow) — standard cards and panels
       raised — overlays, popovers, toasts, hover-lifted surfaces */
  --sd-shadow-flat: 0 0 #0000;
  --sd-shadow: 0 1px 2px rgb(30 28 24 / 6%), 0 2px 8px rgb(30 28 24 / 5%);
  --sd-shadow-raised: 0 8px 24px rgb(30 28 24 / 10%);
  --sd-shadow-soft: 0 2px 8px rgb(30 28 24 / 6%);
  /* Inner top-edge catch-light on dark cards (machined feel); transparent
     no-op shadow in light so it can sit first in any box-shadow list. */
  --sd-bevel: 0 0 #0000;

  /* Spacing scale — 4px base, theme-invariant. Every gap/padding uses a rung,
     never an ad-hoc px. Fit to the existing 22/28 rhythm to avoid panel jolt. */
  --sd-space-1: 2px;
  --sd-space-2: 4px;
  --sd-space-3: 8px;
  --sd-space-4: 12px;
  --sd-space-5: 16px;
  --sd-space-6: 22px;
  --sd-space-7: 28px;
  --sd-space-8: 40px;
  --sd-space-9: 56px;

  /* Density — primary surfaces get a touch more breathing room (ADR 0039);
     compact data-dense regions (tables, diagnostics) opt in via [data-density]
     below and keep the tighter 0.78. */
  --sd-density: 0.96;
  --sd-gap-stack: calc(var(--sd-space-4) * var(--sd-density));
  --sd-gap-cluster: calc(var(--sd-space-3) * var(--sd-density));
  /* Panel padding ~= current 15px, snapped to the scale; roomier surfaces opt up. */
  --sd-pad-panel: calc(var(--sd-space-5) * var(--sd-density));

  /* Glass blur radii (Phase 4). Theme-invariant — defined once here, never in the
     dark blocks. Match the appbar (10px) and modal backdrops (8px) to the existing
     .sd-run-pulse glass recipe. */
  --sd-blur-bar: 10px;
  --sd-blur-overlay: 8px;
  /* Sticky frosted appbar height — other sticky elements and scroll-padding
     offset by this so content pins/lands just below the bar, never under it.
     Headers vary (compact workbench 48px … kicker+title+body ~80px); biased
     toward the tall case because hiding anchored content is the worse failure. */
  --sd-appbar-h: 72px;

  /* Type scale. Display + section are the same sans at heavier weight + tighter
     tracking (no serif). Tuned dense for a professional console. */
  --sd-text-display: 2rem;
  --sd-text-section: 1.375rem;
  /* Page-chrome h1 + overlay/document headlines — the display voice at
     in-page scale; sits between section and display. */
  --sd-text-page-title: 1.45rem;
  --sd-text-title: 1.0625rem;
  --sd-text-heading: 0.9375rem;
  --sd-text-body: 0.875rem;
  --sd-text-body-sm: 0.8125rem;
  --sd-text-label: 0.75rem;
  --sd-text-eyebrow: 0.6875rem;
  --sd-leading-tight: 1.1;
  --sd-leading-snug: 1.18;
  --sd-leading-body: 1.5;
  --sd-leading-paper: 1.6;
  --sd-tracking-display: -0.026em;
  --sd-tracking-section: -0.022em;
  --sd-tracking-tight: -0.008em;
  --sd-tracking-label: 0.01em;
  --sd-tracking-eyebrow: 0.06em;

  /* Status tones — alias the theme status hues; `var()` re-resolves per active
     theme at use-time, so these are defined once here (no dark-block copy). */
  /* Light theme: tone TEXT runs one notch deeper than the hue so 12px status
     copy clears AA on tints and muted wells (the raw hues stay on dots,
     borders, and fills). Dark blocks alias these back to the dark hues. */
  --sd-tone-ok-fg: #166534;
  --sd-tone-active-fg: #1d4ed8;
  --sd-tone-warn-fg: #92400e;
  --sd-tone-stopped-fg: #b91c1c;
  --sd-tone-neutral-fg: var(--sd-muted);

  /* Artifact "paper" preview — ALWAYS light in BOTH themes (theme-INVARIANT).
     Defined once here only; never copied into either dark block, so the
     output-preview card never flips to dark. Hex lifted from prior light
     hardcodes, so light mode is visually identical; only dark mode changes. */
  --sd-artifact-paper: #f3eee4;
  --sd-artifact-paper-card: color-mix(in oklch, #faf8f4 88%, white);
  --sd-artifact-paper-chrome: #fbf8f1;
  --sd-artifact-ink: #2c2519;
  --sd-artifact-ink-stage: #241f18;
  --sd-artifact-ink-muted: #574b3f;
  --sd-artifact-ink-faint: #726756;
  --sd-artifact-ink-eyebrow: #8a6d2f;
  --sd-artifact-line: #e3dac9;
  --sd-artifact-divider: #d7cec0;
  /* Link ink for the always-light artifact paper — a deeper blue than the
     console accent so it clears AA on #f3eee4 (the regular accent is tuned
     for the warm paper, not the sand). See ADR 0039. */
  --sd-artifact-link: #315fba;
  --sd-artifact-link-underline: color-mix(in oklch, #315fba 50%, transparent);
  /* Stronger hairline for dividers/borders on the warm artifact paper (the
     base --sd-artifact-line is quite faint). See ADR 0039. */
  --sd-artifact-line-strong: #c9c0ae;
  --sd-artifact-grad-a: #d3ad70;
  --sd-artifact-grad-b: #e1c99e;
  --sd-artifact-webpage: #f4efe5;

  font-family: var(--sd-font-sans);
  background: var(--sd-paper);
  color: var(--sd-ink);
}

/* Compact density — opt-in per region (diagnostics, dense tables). */
[data-density="compact"] {
  --sd-density: 0.78;
}

/* ---------------------------------------------------------------------------
   Theme. The console requires JavaScript (Phoenix LiveView), so the inline
   <head> script always resolves and sets data-theme before first paint. The
   prefers-color-scheme block below is a pre-script / no-JS safety net so the
   OS preference still works if the script never runs.
--------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sd-paper: #0c0c0e;
  --sd-paper-strong: #18181b;
  --sd-surface: #1f1f23;
  --sd-surface-panel-2: #131316;
  --sd-surface-muted: #131316;
  /* Page/second-tier surface/code regions in dark — see ADR 0039. The code
     block keeps the slightly-deeper zinc it always rendered as in dark mode,
     now via a real token instead of a fallback literal. */
  --sd-page-bg: #0c0c0e;
  --sd-surface-2: color-mix(in oklch, var(--sd-surface-muted) 72%, var(--sd-paper-strong));
  --sd-code-bg: #131316;
  --sd-code-ink: var(--sd-ink-muted);
  --sd-ink: #f4f4f5;
  --sd-ink-muted: #d4d4d8;
  --sd-muted: #a1a1aa;
  --sd-subtle: #8b8b94;
  --sd-text-mono: #d4d4d8;
  --sd-line: #323238;
  --sd-line-strong: #4b4b53;
  --sd-line-stronger: #52525b;
  --sd-accent: #6699f7;
  --sd-accent-soft: #16243f;
  --sd-accent-hover: #84b0fa;
  --sd-accent-ink: #93b4f7;
  /* Inverted fill: the dark accents are LIGHT, so filled controls take near-black
     ink (6.9:1 on #6699f7) instead of the light theme's white (2.8:1). */
  --sd-on-accent: #0c0c0e;
  --sd-on-danger: #0c0c0e;
  /* Dark tone text re-aliases to the dark hues (they already clear AA). */
  --sd-tone-ok-fg: var(--sd-sage);
  --sd-tone-active-fg: var(--sd-info);
  --sd-tone-warn-fg: var(--sd-warning);
  --sd-tone-stopped-fg: var(--sd-danger);
  --sd-accent-iris: #8b7bff;
  --sd-accent-iris-soft: #241f47;
  --sd-accent-iris-hover: #a294ff;
  --sd-accent-iris-ink: #b3a8ff;
  --sd-info: #5b8def;
  --sd-sage: #4ade80;
  --sd-warning: #fbbf24;
  --sd-danger: #f87171;
  --sd-ok-soft: #0e2417;
  --sd-warn-soft: #2a1f08;
  --sd-error-soft: #2c1414;
  --sd-info-soft: #16243f;
  --sd-shadow: 0 1px 2px rgb(0 0 0 / 40%);
  --sd-shadow-raised: 0 8px 24px rgb(0 0 0 / 50%);
  --sd-shadow-soft: 0 2px 8px rgb(0 0 0 / 40%);
  --sd-bevel: inset 0 1px 0 rgb(255 255 255 / 4%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --sd-paper: #0c0c0e;
    --sd-paper-strong: #18181b;
    --sd-surface: #1f1f23;
    --sd-surface-panel-2: #131316;
    --sd-surface-muted: #131316;
    /* Page/second-tier/code regions in dark — see ADR 0039. */
    --sd-page-bg: #0c0c0e;
    --sd-surface-2: color-mix(in oklch, var(--sd-surface-muted) 72%, var(--sd-paper-strong));
    --sd-code-bg: #131316;
    --sd-code-ink: var(--sd-ink-muted);
    --sd-ink: #f4f4f5;
    --sd-ink-muted: #d4d4d8;
    --sd-muted: #a1a1aa;
    --sd-subtle: #8b8b94;
    --sd-text-mono: #d4d4d8;
    --sd-line: #323238;
    --sd-line-strong: #4b4b53;
    --sd-line-stronger: #52525b;
    --sd-accent: #6699f7;
    --sd-accent-soft: #16243f;
    --sd-accent-hover: #84b0fa;
    --sd-accent-ink: #93b4f7;
    --sd-on-accent: #0c0c0e;
    --sd-on-danger: #0c0c0e;
    --sd-tone-ok-fg: var(--sd-sage);
    --sd-tone-active-fg: var(--sd-info);
    --sd-tone-warn-fg: var(--sd-warning);
    --sd-tone-stopped-fg: var(--sd-danger);
    --sd-accent-iris: #8b7bff;
    --sd-accent-iris-soft: #241f47;
    --sd-accent-iris-hover: #a294ff;
    --sd-accent-iris-ink: #b3a8ff;
    --sd-info: #5b8def;
    --sd-sage: #4ade80;
    --sd-warning: #fbbf24;
    --sd-danger: #f87171;
    --sd-ok-soft: #0e2417;
    --sd-warn-soft: #2a1f08;
    --sd-error-soft: #2c1414;
    --sd-info-soft: #16243f;
    --sd-shadow: 0 1px 2px rgb(0 0 0 / 40%);
    --sd-shadow-raised: 0 8px 24px rgb(0 0 0 / 50%);
    --sd-shadow-soft: 0 2px 8px rgb(0 0 0 / 40%);
    --sd-bevel: inset 0 1px 0 rgb(255 255 255 / 4%);
  }
}

:root[data-theme="dark"] .sd-sidebar,
:root[data-theme="dark"] .sd-workspace-card,
:root[data-theme="dark"] .sd-workspace-switcher-panel,
:root[data-theme="dark"] .sd-workspace-choice,
:root[data-theme="dark"] .sd-workspace-create-panel,
:root[data-theme="dark"] .sd-panel,
:root[data-theme="dark"] .sd-bounded,
:root[data-theme="dark"] .sd-page-attention-rail,
:root[data-theme="dark"] .sd-page-side-rail,
:root[data-theme="dark"] .sd-page-diagnostics-region,
:root[data-theme="dark"] .sd-run-pulse,
:root[data-theme="dark"] .sd-preview-rail,
:root[data-theme="dark"] .sd-filter-bar {
  background: color-mix(in oklch, var(--sd-paper-strong) 92%, transparent);
}

:root[data-theme="dark"] .sd-nav-icon,
:root[data-theme="dark"] .sd-nav a:hover,
:root[data-theme="dark"] .sd-pill-row span:not(.sd-status),
:root[data-theme="dark"] .sd-filter-actions {
  background: color-mix(in oklch, var(--sd-surface-muted) 88%, transparent);
}

:root[data-theme="dark"] .sd-nav a.is-active {
  background: var(--sd-accent-soft);
  box-shadow: inset 2px 0 0 var(--sd-accent);
  color: var(--sd-accent-ink);
}

:root[data-theme="dark"] .sd-nav a.is-active .sd-nav-icon {
  border-color: color-mix(in oklch, var(--sd-accent) 38%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent) 18%, var(--sd-surface));
  color: var(--sd-accent);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--sd-paper);
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-family: var(--sd-font-sans);
  font-size: 14px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* The base anchor reset lives in 01-shell (layered sd-shell) — this file is
   UNLAYERED, so an `a { color: inherit }` here would outrank every layered
   component color (e.g. .sd-button's on-accent text) by cascade-layer
   precedence regardless of specificity. */

::selection {
  background: color-mix(in oklch, var(--sd-accent-soft) 74%, var(--sd-accent));
  color: var(--sd-ink);
}

h1,
h2,
h3,
p {
  margin: 0;
}

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

@media (prefers-reduced-motion: no-preference) {
  .sd-console,
  .sd-sidebar,
  .sd-sidebar-toggle-button,
  .sd-nav a,
  .sd-button,
  .sd-session-form button,
  .sd-filter-pill,
  .sd-chip,
  .sd-list-row,
  .sd-table-row,
  .sd-v4-capability-chip,
  .sd-v4-artifact-list a,
  .sd-decision-row,
  .sd-filter-pill,
  .sd-setup-nav-item,
  .sd-workspace-card,
  .sd-workspace-choice,
  .sd-fl-pick,
  .sd-fl-seg-btn,
  .sd-fl-chip,
  .sd-run-lens,
  .sd-launch-context-tab,
  .sd-factory-tab,
  .sd-v4-diff-tab,
  .sd-workbench-mode-option,
  .sd-disclosure > summary,
  .sd-disclosure summary::after {
    transition:
      background-color var(--sd-duration-fast) var(--sd-ease-standard),
      border-color var(--sd-duration-fast) var(--sd-ease-standard),
      color var(--sd-duration-fast) var(--sd-ease-standard),
      box-shadow var(--sd-duration-fast) var(--sd-ease-standard),
      transform var(--sd-duration-panel) var(--sd-ease-standard);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 80ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 80ms !important;
  }

  .sd-status[data-live="true"] .sd-status-dot {
    animation: none;
  }
}
@layer sd-shell {
/* @console-layer: shell
   Owns the app frame, sidebar, topbar, page chrome, navigation, and global
   scrolling behavior. Route-specific workrooms belong in screen-surfaces.
*/

/* Base anchor reset. Lives in this LAYERED file (not unlayered 00-tokens) so
   component colors — e.g. .sd-button's on-accent text on <a> buttons — win
   by cascade-layer precedence. */
a {
  color: inherit;
}

/* Anchored/focused content lands clear of the frosted sticky appbar. */
html {
  scroll-padding-top: calc(var(--sd-appbar-h) + 8px);
}

/* Themed thin scrollbars — quiet token-tinted thumb, invisible track, both
   themes via --sd-muted. Layered, so any container can still override. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--sd-muted) 32%, transparent) transparent;
}

.sd-console {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
  /* Warm-gold control-room glow, anchored upper-right over the warm paper.
     Composed from theme-varying tokens so it resolves per theme with no dark-block
     duplication; near-invisible in light (cream carries the warmth), soft in dark. */
  background:
    radial-gradient(
      900px 480px at 70% 8%,
      color-mix(in oklch, var(--sd-accent) 9%, transparent),
      transparent 55%
    ),
    var(--sd-paper);
}

.sd-sidebar-toggle {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sd-console:has(.sd-sidebar-toggle:checked) {
  grid-template-columns: 68px minmax(0, 1fr);
}

.sd-sidebar {
  position: sticky;
  top: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  height: 100vh;
  border-right: 1px solid var(--sd-line);
  background: color-mix(in oklch, var(--sd-paper-strong) 94%, transparent);
  padding: 16px;
  overflow: auto;
}

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

.sd-sidebar-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-paper-strong);
  color: var(--sd-muted);
  cursor: pointer;
  padding: 0;
}

.sd-sidebar-toggle-button:hover {
  border-color: var(--sd-line-strong);
  color: var(--sd-ink);
}

.sd-mobile-menu-button,
.sd-sidebar-backdrop {
  display: none;
}

@media (min-width: 761px) {
  .sd-sidebar-head {
    justify-content: flex-start;
  }

  .sd-sidebar-toggle-button {
    display: none;
  }
}

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

.sd-console:has(.sd-sidebar-toggle:checked) .sd-sidebar {
  padding: 12px;
}

.sd-console:has(.sd-sidebar-toggle:checked) .sd-sidebar-head {
  justify-content: center;
}

.sd-console:has(.sd-sidebar-toggle:checked) .sd-brand-name,
.sd-console:has(.sd-sidebar-toggle:checked) .sd-workspace-switcher,
.sd-console:has(.sd-sidebar-toggle:checked) .sd-nav-label,
.sd-console:has(.sd-sidebar-toggle:checked) .sd-nav a span:not(.sd-nav-icon),
.sd-console:has(.sd-sidebar-toggle:checked) .sd-session-form {
  display: none;
}

.sd-console:has(.sd-sidebar-toggle:checked) .sd-nav a {
  justify-content: center;
  padding: 9px;
}

.sd-console:has(.sd-sidebar-toggle:checked) .sd-brand {
  display: none;
}

/* ---------------------------------------------------------------------------
   Flash toasts — rendered once by the live app layout, top-right over the
   chrome. Info notices auto-dismiss (delayed JS transition); errors persist
   until dismissed.
--------------------------------------------------------------------------- */
.sd-flash-group {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 95;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}

.sd-flash {
  animation: sd-reveal var(--sd-duration-base) ease-out;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius);
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  box-shadow: var(--sd-shadow-raised);
  padding: 10px 12px;
  pointer-events: auto;
  cursor: pointer;
}

.sd-flash p {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}

.sd-flash.is-info {
  border-color: color-mix(in oklch, var(--sd-info) 38%, var(--sd-line));
}

.sd-flash.is-error {
  border-color: color-mix(in oklch, var(--sd-danger) 48%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-danger) 9%, var(--sd-paper-strong));
}

.sd-flash-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--sd-radius-xs);
  background: transparent;
  color: var(--sd-muted);
  cursor: pointer;
  padding: 0;
}

.sd-flash-dismiss:hover {
  color: var(--sd-ink);
}

.sd-flash-dismiss .sd-icon {
  width: 14px;
  height: 14px;
}

/* Click-dismiss: a short fade. */
.sd-flash-leave {
  transition: opacity 0.18s ease;
}

.sd-flash-leave-start {
  opacity: 1;
}

.sd-flash-leave-end {
  opacity: 0;
}

/* Auto-dismiss: hold ~5s (transition delay), then fade out. */
.sd-flash-autodismiss {
  transition: opacity 0.4s ease 5s;
}

.sd-flash-autodismiss-start {
  opacity: 1;
}

.sd-flash-autodismiss-end {
  opacity: 0;
}

/* ---------------------------------------------------------------------------
   Live-app chrome (injected from app.js): a 2px accent bar while a LiveView
   navigation/patch is in flight (>120ms), and a reconnect pill when the
   socket drops.
--------------------------------------------------------------------------- */
.sd-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 100%;
  height: 2px;
  z-index: 120;
  background: var(--sd-accent);
  opacity: 0;
  pointer-events: none;
}

.sd-loading-bar.is-loading {
  opacity: 1;
  right: 12%;
  transition: right 6s cubic-bezier(0.1, 0.6, 0.2, 1), opacity 120ms ease;
}

.sd-reconnect-pill {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translate(-50%, 8px);
  z-index: 120;
  border: 1px solid color-mix(in oklch, var(--sd-warning) 42%, var(--sd-line));
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-warn-soft) 80%, var(--sd-paper-strong));
  color: var(--sd-ink);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  box-shadow: var(--sd-shadow-raised);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sd-duration-base) ease, transform var(--sd-duration-base) ease;
}

.sd-reconnect-pill.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------ */
/* Command palette (⌘K) — see ADR 0039. The trigger lives in the sidebar */
/* head (desktop) and topbar (narrow); the palette itself is a centered  */
/* dialog over a scrim. All colors/shadows/elevation come from tokens.   */
/* ------------------------------------------------------------------ */

/* Trigger — a quiet search affordance. The sidebar variant is icon-only   */
/* (space-constrained); the topbar variant shows a label + ⌘K hint.        */
.sd-command-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius);
  background: var(--sd-surface-muted);
  color: var(--sd-muted);
  font: inherit;
  font-size: var(--sd-text-body-sm);
  padding: 4px 8px;
  cursor: pointer;
  transition: border-color var(--sd-duration-fast) ease, color var(--sd-duration-fast) ease;
}

.sd-command-trigger:hover {
  border-color: var(--sd-line-strong);
  color: var(--sd-ink);
}

.sd-command-trigger:focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}

.sd-command-trigger-kbd {
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  color: var(--sd-subtle);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-xs);
  background: var(--sd-paper-strong);
  padding: 1px 4px;
}

/* Sidebar variant: icon + kbd only, fills available head width quietly. */
.sd-command-trigger--sidebar {
  margin-left: auto;
  margin-right: 4px;
}

/* Palette root — always in the DOM, hidden until .is-open. */
.sd-command-palette {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 12vh, 120px) 16px 16px;
}

.sd-command-palette.is-open {
  display: flex;
}

.sd-command-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--sd-ink) 45%, transparent);
  backdrop-filter: blur(2px);
}

.sd-command-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: min(60vh, 460px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
  box-shadow: var(--sd-shadow-raised);
  overflow: hidden;
}

.sd-command-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--sd-line);
  padding: 10px 12px;
}

.sd-command-input-row .sd-icon {
  color: var(--sd-subtle);
  flex: none;
}

.sd-command-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--sd-ink);
  font: inherit;
  font-size: var(--sd-text-body);
  padding: 4px 0;
}

.sd-command-input:focus {
  outline: none;
}

.sd-command-esc {
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  color: var(--sd-subtle);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-xs);
  padding: 1px 5px;
  flex: none;
}

.sd-command-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
}

.sd-command-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--sd-radius);
  padding: 8px 10px;
  color: var(--sd-ink-muted);
  text-decoration: none;
  transition: background var(--sd-duration-fast) ease, color var(--sd-duration-fast) ease;
}

.sd-command-item:hover,
.sd-command-item.is-active {
  background: var(--sd-surface-muted);
  color: var(--sd-ink);
}

.sd-command-item.is-active {
  background: var(--sd-accent-soft);
  color: var(--sd-accent-ink);
}

.sd-command-item .sd-icon {
  color: var(--sd-subtle);
  flex: none;
}

.sd-command-item-label {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: var(--sd-text-body);
}

.sd-command-item-group {
  font-size: var(--sd-text-label);
  color: var(--sd-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: none;
}

.sd-command-empty {
  margin: 0;
  padding: 20px;
  text-align: center;
  color: var(--sd-subtle);
  font-size: var(--sd-text-body-sm);
}

}
@layer sd-components {
/* @console-layer: components
   Owns reusable controls and content containers: buttons, nav rows, cards,
   tabs, disclosures, forms, badges, lists, and shared workroom building blocks.
*/

/* CARD MATERIAL — the one hairline-card declaration for this layer.
   Every bordered container below shares this border + radius; per-class rules
   keep only their own layout (grid/gap/padding) and surface fill. Variants
   and nested-quiet rules later in the file override as before. */
.sd-list-row,
.sd-field input,
.sd-field textarea,
.sd-field select,
.sd-workspace-card,
.sd-panel,
.sd-empty,
.sd-bounded,
.sd-workspace-switcher-panel,
.sd-filter-bar,
.sd-check,
.sd-callout,
.sd-metric,
.sd-playbook-option,
.sd-model-route-selected,
.sd-api-access-presets,
.sd-code-block {
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius);
}

.sd-brand,
.sd-nav a,
.sd-button,
.sd-session-form button,
.sd-back-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Reusable buttons
   Primary, secondary, danger, hover, and disabled states used across console
   screens. Screen-owned CSS should only handle placement and local sizing. */

.sd-button {
  min-height: 38px;
  justify-content: center;
  border: 1px solid var(--sd-accent);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-accent);
  color: var(--sd-on-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 8px 12px;
}

.sd-button-secondary {
  border-color: var(--sd-line);
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
}

.sd-button-danger {
  border-color: var(--sd-danger);
  background: var(--sd-danger);
  color: var(--sd-on-danger);
}

/* Ghost — the tertiary tier for low-emphasis actions that still need to read
   as a control (cancel, "show more", secondary sheet-openers). Transparent
   fill with muted ink that strengthens to full ink on hover; no border until
   hover so a row of ghosts stays quiet. Fills the gap between `secondary`
   (solid hairline card) and raw text links. See ADR 0039. */
.sd-button-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--sd-muted);
}

.sd-button-ghost:hover {
  border-color: var(--sd-line);
  background: var(--sd-surface-muted);
  color: var(--sd-ink);
}

.sd-button:hover {
  box-shadow: 0 1px 0 color-mix(in oklch, var(--sd-ink) 8%, transparent);
}

.sd-button:not(.sd-button-secondary):not(.sd-button-danger):not(.sd-button-ghost):hover {
  border-color: var(--sd-accent-hover);
  background: var(--sd-accent-hover);
}

.sd-button-secondary:hover {
  border-color: var(--sd-line-strong);
  background: color-mix(in oklch, var(--sd-surface-muted) 74%, var(--sd-paper-strong));
}

/* Disabled reads as an inactive neutral control, not a ghosted primary —
   a half-faded accent button looks broken rather than unavailable. */
.sd-button-disabled,
.sd-button:disabled,
.sd-button-disabled:hover,
.sd-button:disabled:hover {
  cursor: not-allowed;
  border-color: var(--sd-line);
  background: var(--sd-surface-muted);
  color: var(--sd-subtle);
  box-shadow: none;
}

/* Pressed: every button responds to the click itself, not just the hover. */
.sd-button:active:not(:disabled):not(.sd-button-disabled) {
  box-shadow: none;
  filter: brightness(0.97);
}

/* In-flight: LiveView tags the trigger with phx-click-loading/phx-submit-loading
   while an event round-trips — lock it and spin so nothing is double-clickable.
   The spinner is an ::after (ordinary buttons carry no child span). */
.sd-button.phx-click-loading,
.sd-button.phx-submit-loading {
  pointer-events: none;
  opacity: 0.65;
}

.sd-button.phx-click-loading::after,
.sd-button.phx-submit-loading::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  margin-left: 7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--sd-radius-pill);
  animation: sd-button-spin 0.7s linear infinite;
}

.sd-link-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: inherit;
  text-decoration: none;
}

.sd-link-button:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.sd-back-link {
  width: fit-content;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  font-weight: 700;
}

.sd-back-link:hover {
  color: var(--sd-ink);
}

/* Reusable list rows
   Shared by Runs, Library, agent setup, artifacts, project panels, and workroom
   evidence lists. Screen-specific row grids remain qualified in surface CSS. */

.sd-list {
  display: grid;
  gap: 8px;
}

.sd-list-compact .sd-list-row {
  padding: 10px;
}

.sd-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  padding: 12px;
  text-decoration: none;
}

.sd-list-row > * {
  min-width: 0;
}

.sd-list-row:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
}

.sd-list-row.is-selected {
  border-color: color-mix(in oklch, var(--sd-accent) 38%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent) 8%, var(--sd-paper-strong));
}

.sd-list-row.is-disabled {
  background: var(--sd-surface-muted);
  color: var(--sd-muted);
}

.sd-list-row.is-disabled:hover {
  border-color: var(--sd-line);
}

.sd-list-row strong,
.sd-list-row p {
  overflow-wrap: anywhere;
}

.sd-list-row p {
  color: var(--sd-muted);
  line-height: 1.45;
}

/* Reusable form fields
   Label/input stacks used across launch, setup, library, runs, approvals,
   builder, and artifact forms. Form-row composition remains layout-owned. */

.sd-field {
  display: grid;
  gap: 6px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  font-weight: 700;
}

.sd-field input,
.sd-field textarea,
.sd-field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 42px;
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  padding: 9px 10px;
}

/* Radios/checkboxes are native controls — opt them out of the text-input box
   styling above so they keep their intrinsic size instead of stretching. */
.sd-field input[type="radio"],
.sd-field input[type="checkbox"] {
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* Hint + error support for .sd-field (ADR 0039). Hint is quiet supporting
   copy; error announces the field's bad state in the stopped tone and flips
   the input border so the state is visible without reading the message. */
.sd-field-hint {
  color: var(--sd-subtle);
  font-weight: 400;
  font-size: var(--sd-text-body-sm);
  line-height: var(--sd-leading-body);
}

.sd-field-error {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sd-tone-stopped-fg);
  font-weight: 600;
  font-size: var(--sd-text-body-sm);
  line-height: var(--sd-leading-body);
}

.sd-field-error .sd-icon {
  flex: none;
}

.sd-field-has-error input,
.sd-field-has-error textarea,
.sd-field-has-error select {
  border-color: var(--sd-danger);
}

@media (max-width: 900px) {
  .sd-list-row {
    grid-template-columns: 1fr;
  }
}

.sd-brand {
  gap: 10px;
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  font-weight: 700;
  letter-spacing: 0;
}

.sd-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--sd-radius-sm);
  background: linear-gradient(145deg, var(--sd-accent), color-mix(in oklch, var(--sd-accent) 82%, black));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
}

.sd-workspace-card,
.sd-panel,
.sd-empty,
.sd-bounded {
  background: color-mix(in oklch, var(--sd-surface) 94%, var(--sd-paper));
  box-shadow: var(--sd-bevel), var(--sd-shadow);
}

.sd-workspace-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  border-color: color-mix(in oklch, var(--sd-line) 58%, transparent);
  background: color-mix(in oklch, var(--sd-paper-strong) 58%, transparent);
  box-shadow: none;
  padding: 9px 10px;
  color: var(--sd-muted);
  cursor: pointer;
  overflow-wrap: anywhere;
  list-style: none;
}

.sd-workspace-card strong {
  color: var(--sd-ink);
}

.sd-workspace-card::-webkit-details-marker {
  display: none;
}

.sd-workspace-card small {
  display: block;
  color: var(--sd-subtle);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  margin-top: 2px;
}

.sd-workspace-card-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-sm);
  color: var(--sd-muted);
  transition:
    transform var(--sd-duration-fast) var(--sd-ease-standard),
    color var(--sd-duration-fast) var(--sd-ease-standard);
}

.sd-workspace-switcher[open] .sd-workspace-card-caret {
  transform: rotate(180deg);
  color: var(--sd-ink);
}

.sd-workspace-switcher:not([open]) > .sd-workspace-switcher-panel {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sd-workspace-switcher[open] > .sd-workspace-switcher-panel {
    animation: sd-reveal var(--sd-duration-base) ease-out;
  }
}

.sd-workspace-switcher-panel {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  background: color-mix(in oklch, var(--sd-paper-strong) 94%, transparent);
  box-shadow: var(--sd-shadow);
  padding: 10px;
}

.sd-workspace-switcher-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border-radius: var(--sd-radius-sm);
  color: var(--sd-ink);
  font-weight: 700;
  padding: 8px;
  text-decoration: none;
}

.sd-workspace-switcher-link:hover {
  background: var(--sd-surface-muted);
}

.sd-team-workspace-form {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--sd-line);
  padding-top: 10px;
}

.sd-team-workspace-form label {
  display: grid;
  gap: 5px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
}

.sd-team-workspace-form input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-surface);
  color: var(--sd-ink);
  font: inherit;
  padding: 7px 9px;
}

.sd-team-workspace-form button {
  min-height: 34px;
  border: 1px solid var(--sd-accent);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-accent);
  color: var(--sd-on-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.sd-team-workspace-form p {
  color: var(--sd-subtle);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
  margin: 0;
}

/* Reusable filter and selection controls
   Migrated from the legacy layout tail; used across Library, Outputs, Learning,
   Launch model routing, Playbook Builder, and run setup sheets. */

.sd-empty-inline {
  border: 1px dashed var(--sd-line);
  border-radius: var(--sd-radius);
  color: var(--sd-muted);
  padding: 10px;
}

.sd-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  align-items: end;
  background: color-mix(in oklch, var(--sd-surface) 88%, var(--sd-paper));
  padding: 12px;
}

.sd-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
}

.sd-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sd-check-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.sd-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  background: var(--sd-paper-strong);
  color: var(--sd-muted);
  font-size: var(--sd-text-heading);
  font-weight: 600;
  padding: 10px;
}

.sd-check input {
  margin-top: 3px;
  accent-color: var(--sd-teal);
}

.sd-check strong {
  display: block;
  color: var(--sd-ink);
}

@media (max-width: 900px) {
  .sd-filter-bar,
  .sd-check-grid {
    grid-template-columns: 1fr;
  }

  .sd-filter-actions {
    justify-content: flex-start;
  }
}

/* Reusable callout blocks
   Shared across run summaries, setup, launch, learning, agent detail, and
   approval surfaces. Route-specific positioning remains screen-owned. */

.sd-callout {
  display: grid;
  align-content: start;
  gap: 8px;
  background: var(--sd-paper-strong);
  min-width: 0;
  padding: 12px;
  overflow-wrap: anywhere;
}

.sd-callout strong {
  font-size: var(--sd-text-title);
  line-height: 1.3;
}

.sd-callout p {
  color: var(--sd-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sd-callout > * {
  min-width: 0;
}

/* Nested-quiet: a callout inside a panel is a filled well, not a second
   bordered box. Toned variants below re-add their left status bar. */
.sd-panel .sd-callout {
  border-width: 0;
  background: var(--sd-fill-well);
}

.sd-callout.is-warning {
  border-color: color-mix(in oklch, var(--sd-warning) 42%, var(--sd-line));
  border-left: 4px solid var(--sd-warning);
  background: color-mix(in oklch, var(--sd-warn-soft) 62%, var(--sd-paper-strong));
}

.sd-callout.is-success {
  border-color: color-mix(in oklch, var(--sd-sage) 42%, var(--sd-line));
  border-left: 4px solid var(--sd-sage);
  background: color-mix(in oklch, var(--sd-ok-soft) 62%, var(--sd-paper-strong));
}

.sd-callout.is-danger {
  border-color: color-mix(in oklch, var(--sd-danger) 42%, var(--sd-line));
  border-left: 4px solid var(--sd-danger);
  background: color-mix(in oklch, var(--sd-error-soft) 62%, var(--sd-paper-strong));
}

.sd-callout.is-muted {
  border-color: var(--sd-line);
  background: color-mix(in oklch, var(--sd-surface-muted) 58%, var(--sd-paper-strong));
}

/* Reusable label/value data rows
   Shared by artifact readers and screen-owned fact strips. */

.sd-data-row {
  display: grid;
  gap: 4px;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  padding-top: 10px;
}

.sd-data-row span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
}

.sd-data-row strong {
  overflow-wrap: anywhere;
  font-size: var(--sd-text-heading);
  line-height: 1.35;
}

/* Reusable metric cards
   Owned by ConsoleComponents.metric/1; route-specific metric tweaks stay
   qualified in screen-owned CSS. */

.sd-metric {
  display: grid;
  gap: 4px;
  background: var(--sd-paper-strong);
  min-width: 0;
  padding: 12px;
}

.sd-metric span,
.sd-metric small {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
}

.sd-metric span {
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  text-transform: uppercase;
}

.sd-metric strong {
  font-family: var(--sd-font-sans);
  font-weight: 700;
  font-size: clamp(0.98rem, 1vw, 1.12rem);
  line-height: 1.18;
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.sd-metric small {
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Reusable chips
   Small inline labels used across Library, run filters, launch resources,
   artifacts, and agent version links. Route-specific chip placement stays
   qualified in screen-owned CSS. */

.sd-chip {
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 8px;
}

.sd-chip.is-active {
  border-color: color-mix(in oklch, var(--sd-accent) 48%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent) 12%, var(--sd-paper-strong));
  color: var(--sd-ink);
}

.sd-chip[data-tone="ok"] {
  border-color: color-mix(in oklch, var(--sd-tone-ok-fg) 42%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-tone-ok-fg) 11%, var(--sd-paper-strong));
  color: var(--sd-ink);
}

.sd-chip[data-tone="active"] {
  border-color: color-mix(in oklch, var(--sd-tone-active-fg) 42%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-tone-active-fg) 11%, var(--sd-paper-strong));
  color: var(--sd-ink);
}

.sd-chip[data-tone="warn"] {
  border-color: color-mix(in oklch, var(--sd-tone-warn-fg) 46%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-tone-warn-fg) 13%, var(--sd-paper-strong));
  color: var(--sd-ink);
}

.sd-chip[data-tone="neutral"] {
  border-color: color-mix(in oklch, var(--sd-tone-neutral-fg) 38%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-tone-neutral-fg) 10%, var(--sd-paper-strong));
  color: var(--sd-ink);
}

/* Reusable status badge
   Owned by ConsoleComponents.status_badge/1 and risk_badge/1. One status
   system drives text, border, fill, dot, and live animation through data-tone. */

.sd-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  min-width: 0;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-surface-muted) 64%, var(--sd-paper-strong));
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.15;
  padding: 3px 8px;
  white-space: nowrap;
}

.sd-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-muted);
}

.sd-status[data-tone="ok"] {
  border-color: color-mix(in oklch, var(--sd-sage) 32%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-sage) 11%, var(--sd-paper-strong));
  color: var(--sd-tone-ok-fg);
}

.sd-status[data-tone="active"] {
  border-color: color-mix(in oklch, var(--sd-blue) 34%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-blue) 10%, var(--sd-paper-strong));
  color: var(--sd-tone-active-fg);
}

.sd-status[data-tone="neutral"] {
  border-color: var(--sd-line);
  background: color-mix(in oklch, var(--sd-surface-muted) 64%, var(--sd-paper-strong));
  color: var(--sd-muted);
}

.sd-status[data-tone="warn"] {
  border-color: color-mix(in oklch, var(--sd-warning) 42%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-warning) 12%, var(--sd-paper-strong));
  color: var(--sd-tone-warn-fg);
}

.sd-status[data-tone="stopped"] {
  border-color: color-mix(in oklch, var(--sd-danger) 42%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-danger) 10%, var(--sd-paper-strong));
  color: var(--sd-tone-stopped-fg);
}

.sd-status[data-tone="ok"] .sd-status-dot {
  background: var(--sd-sage);
}

.sd-status[data-tone="active"] .sd-status-dot {
  background: var(--sd-blue);
}

.sd-status[data-tone="neutral"] .sd-status-dot {
  background: var(--sd-muted);
}

.sd-status[data-tone="warn"] .sd-status-dot {
  background: var(--sd-warning);
}

.sd-status[data-tone="stopped"] .sd-status-dot {
  background: var(--sd-danger);
}

.sd-status[data-live="true"] .sd-status-dot {
  animation: sd-status-pulse 1.4s ease-in-out infinite;
}

@keyframes sd-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (max-width: 720px) {
  .sd-status {
    white-space: normal;
  }
}

/* Reusable action row
   Generic inline command groups used inside cards, rails, panels, and route
   surfaces. Qualified placement overrides stay with their owning surface. */

.sd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

@media (max-width: 720px) {
  .sd-actions {
    justify-content: flex-start;
  }
}

/* Reusable saved-agent picker
   Migrated from the legacy layout tail; keep shared Launch/run-sheet agent
   selection controls here instead of route-specific screen surfaces. */

.sd-playbook-picker {
  display: grid;
  gap: 10px;
  padding: 10px 0 12px;
}

.sd-playbook-picker.is-compact {
  padding: 0;
}

.sd-playbook-picker-head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-playbook-picker-head strong {
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

.sd-playbook-picker-head p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.42;
}

.sd-playbook-recommended {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.sd-playbook-section-head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-playbook-section-head strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

.sd-playbook-section-head p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.38;
}

.sd-playbook-list {
  display: grid;
  gap: 8px;
}

.sd-playbook-option {
  min-width: 0;
  background: var(--sd-paper-strong);
}

.sd-playbook-option > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px;
}

.sd-playbook-option strong {
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

.sd-playbook-option p {
  margin: 3px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
}

.sd-playbook-option.is-selected {
  border-color: color-mix(in oklch, var(--sd-accent) 42%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent) 10%, var(--sd-paper-strong));
}

.sd-playbook-other {
  margin-top: 2px;
}

.sd-playbook-other > summary {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.sd-playbook-other .sd-playbook-list {
  margin-top: 10px;
}

.sd-playbook-list-scroll {
  max-height: min(58vh, 620px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-color: color-mix(in oklch, var(--sd-muted) 38%, transparent) transparent;
  scrollbar-width: thin;
}

.sd-playbook-option-state {
  justify-self: end;
}

.sd-playbook-picker.is-compact .sd-playbook-option > div,
.sd-model-runtime-disclosure .sd-playbook-option > div {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.sd-playbook-picker.is-compact .sd-playbook-option .sd-stack,
.sd-model-runtime-disclosure .sd-playbook-option .sd-stack {
  align-items: stretch;
}

.sd-playbook-picker.is-compact .sd-playbook-option .sd-button,
.sd-model-runtime-disclosure .sd-playbook-option .sd-button {
  justify-content: center;
  width: 100%;
}

@media (max-width: 520px) {
  .sd-playbook-option > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reusable provider/model profile picker
   Launch uses this beside the saved-agent picker, but the control itself is
   shared component chrome owned by LaunchProfileComponents. */

.sd-model-runtime-disclosure .sd-profile-picker {
  padding-top: 8px;
}

.sd-profile-picker {
  display: grid;
  gap: 10px;
}

.sd-profile-picker-head {
  display: grid;
  gap: 4px;
}

.sd-profile-picker-head strong {
  font-size: var(--sd-text-title);
  line-height: 1.3;
}

.sd-profile-picker-head p {
  color: var(--sd-muted);
  line-height: 1.42;
}

.sd-profile-route-finder {
  display: grid;
  gap: 10px;
}

.sd-model-route-results {
  display: grid;
  gap: 8px;
}

.sd-model-route-results-head {
  color: var(--sd-muted);
  font-size: var(--sd-text-heading);
}

.sd-model-route-select {
  display: grid;
  gap: 6px;
}

.sd-model-route-selected {
  display: grid;
  gap: 4px;
  background: var(--sd-paper-strong);
  padding: 10px;
}

.sd-model-route-selected {
  border-color: color-mix(in oklch, var(--sd-accent) 55%, var(--sd-line));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--sd-accent) 25%, transparent);
}

.sd-model-route-selected p,
.sd-model-route-selected small,
.sd-model-route-select small {
  color: var(--sd-muted);
  line-height: 1.35;
}

.sd-model-runtime-disclosure .sd-profile-picker-head p,
.sd-model-runtime-disclosure .sd-profile-picker-head .sd-eyebrow,
.sd-model-runtime-disclosure .sd-pill-row {
  font-size: var(--sd-text-body);
}

/* API access (Setup): one-time key reveal, friendly preset radios, curl block. */
.sd-secret {
  display: inline-block;
  max-width: 100%;
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-heading);
  line-height: 1.4;
  padding: 8px 10px;
  border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius);
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}

.sd-api-access-presets {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin: 0;
}

.sd-api-access-presets > legend {
  font-weight: 600;
  padding: 0 4px;
}

.sd-api-access-preset {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.sd-api-access-preset > input {
  margin-top: 3px;
}

.sd-api-access-preset span {
  display: grid;
  gap: 2px;
}

.sd-api-access-preset small {
  color: var(--sd-muted);
  line-height: 1.4;
}

.sd-code-block {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 12px 14px;
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
}

.sd-code-scroll {
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--sd-radius);
}

.sd-code-scroll .sd-code-block {
  min-width: max-content;
}

.sd-code-block code {
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-body);
  line-height: 1.5;
  white-space: pre;
}

/* Quiet hover grammar (shared primitives). */
.sd-workspace-card:hover {
  color: var(--sd-ink);
  border-color: color-mix(in oklch, var(--sd-line-stronger) 70%, transparent);
}

a.sd-chip:hover,
button.sd-chip:hover {
  border-color: var(--sd-line-stronger);
  color: var(--sd-ink);
}

}
@layer sd-screen-surfaces {
/* @console-layer: screen-surfaces
   Owns route-specific workrooms and page compositions: Workbench, Run Detail,
   Diagnostics, Library, Agent Builder, Setup, and related console surfaces.
*/

/* CARD MATERIAL — the one hairline-card declaration for this layer.
   Every bordered container below shares this border + radius; per-class rules
   keep only their own layout (grid/gap/padding) and surface fill. Variants
   and nested-quiet rules later in the file override as before. */
.sd-run-summary-shell,
.sd-run-result-panel,
.sd-run-output-proof,
.sd-run-result-callout,
.sd-run-next-action,
.sd-run-output-state,
.sd-run-proof-note,
.sd-diag-usage-row,
.sd-fl-lead-feature,
.sd-fl-lead-mini,
.sd-fl-recent,
.sd-workspace-choice,
.sd-workspace-create-panel,
.sd-session-form button,
.sd-theme-toggle,
.sd-context-block {
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius);
}

.sd-run-summary-shell-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: min(430px, 100%);
}

.sd-run-summary-section-map {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 460px;
}

.sd-run-summary-section-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 24px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 84%, transparent);
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-surface-muted) 55%, transparent);
  color: var(--sd-muted);
  font-size: var(--sd-text-caption);
  line-height: 1;
  padding: 0 8px;
  white-space: nowrap;
}

.sd-run-summary-section-pill > span {
  color: var(--sd-ink-muted);
  font-weight: 600;
}

.sd-run-summary-section-pill > small {
  color: var(--sd-subtle);
  font: inherit;
}

.sd-run-summary-body-plan,
.sd-run-summary-body-block {
  display: contents;
}

.sd-run-summary-surface,
.sd-run-summary-shell-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-run-summary-shell {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--sd-accent) 6%, transparent), transparent 58%),
    var(--sd-paper-strong);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--sd-line) 48%, transparent);
}

.sd-run-summary-shell-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-run-summary-shell-eyebrow {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.1;
}

.sd-run-summary-shell h2 {
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.18;
}

.sd-run-summary-shell p {
  max-width: 72ch;
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.sd-run-summary-shell-state {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-surface-muted);
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.sd-run-summary-shell-state[data-tone="active"] {
  border-color: color-mix(in oklch, var(--sd-accent) 40%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent-soft) 72%, var(--sd-paper));
  color: var(--sd-accent-ink);
}

.sd-run-summary-shell-state[data-tone="done"] {
  border-color: color-mix(in oklch, var(--sd-sage) 32%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-ok-soft) 78%, var(--sd-paper));
  color: var(--sd-sage);
}

.sd-run-result-workroom {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-run-result-panel,
.sd-run-output-proof {
  display: grid;
  gap: 14px;
  min-width: 0;
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--sd-line) 48%, transparent);
}

.sd-run-result-panel,
.sd-run-output-proof {
  padding: 16px;
}

.sd-run-output-proof.is-summary {
  border-color: color-mix(in oklch, var(--sd-accent) 38%, var(--sd-line));
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--sd-accent) 10%, transparent), transparent 52%),
    color-mix(in oklch, var(--sd-paper-strong) 94%, var(--sd-sage) 6%);
  box-shadow: var(--sd-shadow-soft);
  gap: 14px;
  padding: 18px;
}

.sd-run-output-proof.is-summary .sd-run-proof-head {
  align-items: center;
}

.sd-run-detail-page .sd-page-meta-strip dt,
.sd-run-detail-page .sd-run-facts-list dt,
.sd-run-detail-page .sd-run-provenance-row span,
.sd-run-detail-page .sd-run-output-preview-topbar span {
  color: var(--sd-muted);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-run-detail-page #run-decision [data-testid="run-decision-status"],
.sd-run-detail-page .sd-run-rail-details > summary .sd-workbench-rail-state {
  display: none;
}

.sd-run-output-proof.is-summary .sd-run-proof-head h2 {
  font-size: var(--sd-text-title);
}

.sd-run-output-proof.is-summary .sd-run-visual-evidence,
.sd-run-output-proof.is-summary .sd-run-output-expectations {
  display: none;
}

.sd-run-output-proof.is-summary .sd-run-proof-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.sd-run-output-proof.is-summary .sd-run-proof-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 0;
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
}

.sd-run-output-proof.is-summary .sd-run-proof-group-head {
  grid-column: 1 / -1;
  padding-bottom: 2px;
}

.sd-run-output-proof.is-summary [data-testid="artifact-provenance-bar"] {
  display: none;
}

.sd-run-output-proof.is-summary .sd-run-proof-body p {
  font-size: var(--sd-text-body-sm);
  line-height: 1.32;
}

.sd-run-output-proof.is-summary .sd-run-proof-actions {
  grid-column: auto;
  align-self: center;
  justify-content: flex-end;
  max-width: none;
}

.sd-run-output-proof.is-summary .sd-output-destination-label {
  display: none;
}

.sd-run-output-proof.is-summary .sd-output-destination-controls .sd-status {
  display: none;
}

.sd-run-output-proof.is-summary .sd-run-proof-actions .sd-button {
  min-height: 32px;
  padding: 6px 10px;
}

.sd-run-result-state {
  font-size: var(--sd-text-label);
}

.sd-run-summary-output-hero {
  display: grid;
  gap: 14px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 38%, var(--sd-line));
  border-radius: var(--sd-radius);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--sd-paper-strong) 94%, var(--sd-warm) 6%), var(--sd-paper-strong));
  box-shadow: inset 3px 0 0 color-mix(in oklch, var(--sd-accent) 82%, var(--sd-line));
  padding: 14px;
}

.sd-run-summary-output-hero > .sd-run-proof-type {
  width: 46px;
  height: 46px;
  border-color: color-mix(in oklch, var(--sd-accent) 42%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent) 14%, var(--sd-surface-muted));
  color: var(--sd-ink);
}

.sd-run-proof-primary {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-run-summary-output-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-run-summary-output-copy strong {
  color: var(--sd-ink);
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.22rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.sd-run-summary-output-copy p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sd-run-result-head,
.sd-run-proof-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.sd-run-result-head h2,
.sd-run-proof-head h2 {
  margin: 0;
  font-size: var(--sd-text-title);
  line-height: 1.2;
}

.sd-run-proof-head p {
  max-width: 68ch;
  margin: 4px 0 0;
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-run-result-callout,
.sd-run-next-action,
.sd-run-output-state,
.sd-run-proof-note {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  background: var(--sd-paper);
}

.sd-run-result-callout {
  border-left: 4px solid var(--sd-sage);
}

.sd-run-result-callout.is-attention,
.sd-run-proof-note.is-warning {
  border-left-color: var(--sd-warning);
}

/* Nested-quiet: inside the result panel these are filled wells with a status
   bar, not a second bordered box. Width-only override keeps the tone colors. */
.sd-run-result-panel .sd-run-result-callout,
.sd-run-result-panel .sd-run-next-action,
.sd-run-result-panel .sd-run-output-state {
  border-width: 0;
  border-radius: var(--sd-radius-sm);
  background: var(--sd-fill-well);
}

.sd-run-result-panel .sd-run-result-callout {
  border-width: 0 0 0 3px;
}

.sd-run-result-callout strong,
.sd-run-next-action strong,
.sd-run-output-state strong,
.sd-run-proof-note strong {
  color: var(--sd-ink);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sd-run-result-callout p,
.sd-run-next-action p,
.sd-run-output-state p,
.sd-run-proof-note p {
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Content beside its action(s). Flex-wrap (not a 2-col grid) so a multi-button
   action row drops below the copy in the half-width Summary pane instead of
   crushing the copy column to one character per line. */
.sd-run-next-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 14px;
  row-gap: 10px;
}

.sd-run-next-action > :first-child {
  flex: 1 1 15rem;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.sd-run-next-action > .sd-actions,
.sd-run-next-action > .sd-button {
  flex: 0 0 auto;
}

/* "What's next" attention strips (incomplete result / stopped run) carry the
   same warning edge as the result callout so the eye lands on them first. */
.sd-run-output-state.is-attention,
.sd-run-next-action.is-attention {
  border-left: 4px solid var(--sd-warning);
}

@media (max-width: 860px) {
  .sd-run-summary-shell-side {
    justify-items: stretch;
    min-width: 0;
  }

  .sd-run-summary-section-map {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .sd-run-summary-output-hero {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .sd-run-output-proof.is-summary .sd-run-summary-output-hero .sd-run-proof-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    width: 100%;
  }

  .sd-run-output-proof.is-summary .sd-run-summary-output-hero .sd-run-proof-actions .sd-button {
    flex: 1 1 136px;
  }

  .sd-run-result-head,
  .sd-run-proof-head,
  .sd-run-next-action {
    display: grid;
    justify-items: start;
  }
}

/* Run Detail Summary document, facts, and press-sheet surfaces.
   Migrated from the legacy layout tail; keep .sd-run-* route composition here. */
.sd-run-result-summary { min-width: 0; }

/* The one consolidated run-facts line under the tabs (every tab): cost · duration
   + Playbook · Model · Approval, with a disclosure for IDs and rarer facts.
   Replaces the header meta chips + the Summary provenance strip + the tall rail. */
.sd-run-facts-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sd-line);
}
.sd-run-facts-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 14px;
  min-width: 0;
  flex: 1;
}
.sd-run-fact {
  font-size: var(--sd-text-body-sm);
  color: var(--sd-ink-muted);
  white-space: nowrap;
}
.sd-run-fact.is-cost { font-weight: 700; color: var(--sd-ink); }
.sd-run-fact.is-prov {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.sd-run-fact-key {
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sd-subtle);
}
.sd-run-facts-disclosure {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--sd-text-label);
}
.sd-run-facts-disclosure > summary {
  cursor: pointer;
  color: var(--sd-accent-ink);
  list-style: none;
}
.sd-run-facts-disclosure > summary::-webkit-details-marker { display: none; }
.sd-run-facts-disclosure[open] {
  flex-basis: 100%;
}
.sd-run-facts-disclosure[open] > summary { margin-bottom: 8px; }
.sd-run-facts-disclosure dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 8px 18px;
  margin: 0;
  min-width: 0;
}
.sd-run-facts-disclosure dl > div { min-width: 0; }
.sd-run-facts-disclosure dt {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sd-subtle);
}
.sd-run-facts-disclosure dd {
  margin: 0;
  font-size: var(--sd-text-body-sm);
  color: var(--sd-ink-muted);
  overflow-wrap: anywhere;
}

/* Results tab: files-as-tabs over ONE warm doc + a compact action row beneath.
   Single column — the press-sheet is the page, not a sliver beside a card list. */
.sd-run-output-paper { border-radius: var(--sd-radius); overflow: hidden; }
.sd-run-output-paper .sd-fl-doc { max-width: none; }
.sd-run-output-doc-meta {
  margin: 14px 0 0;
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sd-artifact-ink-muted);
}
.sd-run-output-doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sd-artifact-line);
}

/* Right pane, single press-sheet: ONE output as a clean document. The summary
   pane is half the page, so the multi-column hero grid (icon | copy | actions)
   would squeeze the headline into a vertical sliver ("Fin / al / Re / por / t")
   on multi-output runs. Here the hero stacks and the headline gets the full pane
   width; the document preview + paper-tabs keep a readable floor. */
.sd-run-output-proof.is-press-sheet {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.sd-run-output-proof.is-press-sheet .sd-run-summary-output-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.sd-run-output-proof.is-press-sheet .sd-run-summary-output-copy strong {
  overflow-wrap: anywhere;
  word-break: normal;
}
.sd-run-output-proof.is-press-sheet .sd-run-proof-actions {
  justify-content: flex-start;
}
.sd-fl-doc-stage { min-width: 0; }
.sd-fl-doc-stage .sd-fl-masthead-rule { margin: 0 0 14px; }
.sd-run-press-sheet-actions {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-artifact-line) 82%, transparent);
}
.sd-run-press-sheet-actions .sd-output-destination-controls {
  justify-content: flex-end;
}
.sd-run-press-sheet-actions .sd-button {
  border-color: color-mix(in oklch, var(--sd-artifact-line) 82%, var(--sd-artifact-ink-muted));
  background: color-mix(in oklch, var(--sd-artifact-paper-card) 88%, white 12%);
  color: var(--sd-artifact-ink);
}
.sd-run-press-sheet-actions .sd-button:hover {
  border-color: var(--sd-artifact-ink-muted);
  background: var(--sd-artifact-paper-card);
}
.sd-run-summary-document {
  display: grid;
  gap: 18px;
  min-width: 0;
  color: var(--sd-artifact-ink);
}
.sd-run-summary-document-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  /* Press masthead: double rule closes the head block, newspaper-style. */
  border-bottom: 4px double var(--sd-artifact-line);
  padding-bottom: 14px;
}
.sd-run-summary-document-head h2 {
  margin: 8px 0 4px;
  color: var(--sd-artifact-ink);
  font-family: var(--sd-font-display);
  font-size: clamp(1.7rem, 1.1vw + 1.35rem, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.08;
}
.sd-run-summary-document-head h2 a,
.sd-run-summary-document-head h2 .sd-link-button {
  color: inherit;
  text-decoration: none;
}
.sd-run-summary-document-head h2 a:hover,
.sd-run-summary-document-head h2 .sd-link-button:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.sd-run-summary-document-head p {
  margin: 0;
  color: var(--sd-artifact-ink-muted);
  font-size: var(--sd-text-body);
}
.sd-run-summary-document-file {
  /* Section slug over the headline — mono small-caps, the .sd-fl-by voice. */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  color: var(--sd-artifact-ink-faint);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}
.sd-run-summary-document-file .sd-icon {
  flex: none;
  font-size: var(--sd-text-body);
}
.sd-run-summary-document-body {
  min-width: 0;
  color: var(--sd-artifact-ink);
}
.sd-run-summary-document-body > img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border: 1px solid var(--sd-artifact-line);
  border-radius: var(--sd-radius);
  background: var(--sd-artifact-paper-card);
}
.sd-run-summary-markdown .sd-markdown-outline {
  display: none;
}
.sd-run-summary-markdown .sd-markdown-preview {
  max-width: none;
  gap: 11px;
  color: var(--sd-artifact-ink);
}
.sd-run-summary-markdown .sd-markdown-preview h3 {
  color: var(--sd-artifact-ink);
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-title);
  line-height: 1.18;
}
.sd-run-summary-markdown .sd-markdown-preview p,
.sd-run-summary-markdown .sd-markdown-preview strong,
.sd-run-summary-markdown .sd-markdown-preview em {
  color: var(--sd-artifact-ink);
}
.sd-run-summary-markdown .sd-markdown-list-item {
  color: var(--sd-artifact-ink);
}
.sd-run-summary-markdown .sd-markdown-list-item::before,
.sd-run-summary-markdown .sd-markdown-list-item.is-ordered::before {
  color: var(--sd-artifact-ink-muted);
}
.sd-run-summary-markdown .sd-markdown-fact {
  border-bottom-color: var(--sd-artifact-line);
}
.sd-run-summary-markdown .sd-markdown-fact span {
  color: var(--sd-artifact-ink-muted);
}
.sd-run-summary-markdown .sd-markdown-blockquote,
.sd-run-summary-markdown .sd-markdown-preview code,
.sd-run-summary-markdown .sd-pre {
  background: var(--sd-artifact-paper-card);
  border-color: var(--sd-artifact-line);
  color: var(--sd-artifact-ink);
}
.sd-run-summary-document-note {
  margin: -6px 0 0;
  color: var(--sd-artifact-ink-faint);
  font-size: var(--sd-text-body-sm);
}
.sd-run-full-result {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklch, var(--sd-artifact-line) 75%, transparent);
  color: var(--sd-artifact-ink-muted);
}
.sd-run-full-result .sd-markdown-outline {
  display: none;
}
.sd-run-full-result .sd-markdown-preview {
  max-width: none;
  gap: 8px;
}

/* Full-width panes, bounded prose: the pane keeps the space ("use the space"
   decision) but paragraphs hold a readable measure. Tables, code, and media
   still take the full width. */
.sd-run-output-paper .sd-fl-doc p,
.sd-run-output-paper .sd-fl-doc ul,
.sd-run-output-paper .sd-fl-doc ol,
.sd-run-summary-markdown .sd-markdown-preview p,
.sd-run-summary-markdown .sd-markdown-preview ul,
.sd-run-summary-markdown .sd-markdown-preview ol,
.sd-run-full-result .sd-markdown-preview p,
.sd-run-full-result .sd-markdown-preview ul,
.sd-run-full-result .sd-markdown-preview ol {
  max-width: 76ch;
}
.sd-run-full-result .sd-markdown-preview h3,
.sd-run-full-result .sd-markdown-preview p,
.sd-run-full-result .sd-markdown-preview strong,
.sd-run-full-result .sd-markdown-preview em,
.sd-run-full-result .sd-markdown-list-item {
  color: var(--sd-artifact-ink-muted);
}

.sd-run-result-paper .sd-run-full-result {
  color: var(--sd-artifact-ink);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-preview,
.sd-run-result-paper .sd-run-full-result .sd-markdown-preview h3,
.sd-run-result-paper .sd-run-full-result .sd-markdown-preview p,
.sd-run-result-paper .sd-run-full-result .sd-markdown-preview strong,
.sd-run-result-paper .sd-run-full-result .sd-markdown-preview em,
.sd-run-result-paper .sd-run-full-result .sd-markdown-fact strong,
.sd-run-result-paper .sd-run-full-result .sd-markdown-list-item {
  color: var(--sd-artifact-ink);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-fact {
  border-bottom-color: var(--sd-artifact-line);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-fact span,
.sd-run-result-paper .sd-run-full-result .sd-markdown-list-item::before,
.sd-run-result-paper .sd-run-full-result .sd-markdown-list-item.is-ordered::before {
  color: var(--sd-artifact-ink-muted);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-table-wrap {
  border-color: var(--sd-artifact-line);
  background: var(--sd-artifact-paper-card);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-table th,
.sd-run-result-paper .sd-run-full-result .sd-markdown-table td {
  border-bottom-color: var(--sd-artifact-line);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-table th {
  color: var(--sd-artifact-ink);
  background: color-mix(in oklch, var(--sd-artifact-paper-card) 84%, var(--sd-warm) 16%);
  letter-spacing: 0;
  text-transform: none;
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-blockquote,
.sd-run-result-paper .sd-run-full-result .sd-markdown-preview code,
.sd-run-result-paper .sd-run-full-result .sd-pre {
  border-color: var(--sd-artifact-line);
  background: var(--sd-artifact-paper-card);
  color: var(--sd-artifact-ink);
}

.sd-run-result-paper .sd-run-output-proof.is-summary:not(.is-press-sheet) {
  border-color: var(--sd-artifact-line);
  background: transparent;
  box-shadow: none;
  color: var(--sd-artifact-ink);
  padding: 0;
}

.sd-run-result-paper .sd-run-output-proof.is-summary:not(.is-press-sheet) .sd-run-output-state,
.sd-run-result-paper .sd-run-output-proof.is-summary:not(.is-press-sheet) .sd-run-proof-note {
  border-color: var(--sd-artifact-line);
  background: var(--sd-artifact-paper-card);
  color: var(--sd-artifact-ink);
  box-shadow: none;
}

.sd-run-result-paper .sd-run-output-proof.is-summary:not(.is-press-sheet) .sd-run-output-state strong,
.sd-run-result-paper .sd-run-output-proof.is-summary:not(.is-press-sheet) .sd-run-proof-note strong {
  color: var(--sd-artifact-ink);
}

.sd-run-result-paper .sd-run-output-proof.is-summary:not(.is-press-sheet) .sd-run-output-state p,
.sd-run-result-paper .sd-run-output-proof.is-summary:not(.is-press-sheet) .sd-run-proof-note p,
.sd-run-result-paper .sd-run-output-proof.is-summary:not(.is-press-sheet) > .sd-muted {
  color: var(--sd-artifact-ink-muted);
}

.sd-run-result-paper .sd-run-output-proof.is-summary:not(.is-press-sheet) > .sd-actions {
  gap: 8px;
}

.sd-run-result-paper .sd-run-output-proof.is-summary:not(.is-press-sheet) > .sd-actions .sd-button {
  border-color: color-mix(in oklch, var(--sd-artifact-line) 82%, var(--sd-artifact-ink-muted));
  background: color-mix(in oklch, var(--sd-artifact-paper-card) 88%, white 12%);
  color: var(--sd-artifact-ink);
}

.sd-run-result-paper .sd-run-output-proof.is-summary:not(.is-press-sheet) > .sd-actions .sd-button:hover {
  border-color: var(--sd-artifact-ink-muted);
  background: var(--sd-artifact-paper-card);
}
.sd-run-press-sheet-more { margin: 0; font-size: var(--sd-text-body-sm); }
.sd-run-press-sheet-more a { color: var(--sd-artifact-ink); text-decoration: none; }
.sd-run-press-sheet-more a:hover { text-decoration: underline; }

/* Run Diagnostics support trail and execution summary.
   Migrated from the legacy layout tail; keep diagnostics route composition here. */
.sd-diagnostics-overview {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: transparent;
  padding: 0 0 12px;
}

.sd-diagnostics-overview h3 {
  margin: 6px 0 4px;
  font-size: var(--sd-text-title);
  line-height: 1.25;
}

.sd-diagnostics-overview p {
  max-width: 60ch;
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.4;
}

.sd-diagnostics-overview .sd-actions {
  justify-content: flex-end;
  align-content: flex-start;
  min-width: 180px;
}

.sd-diagnostics-exec {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 0 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-diagnostics-exec-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  min-width: 0;
}

.sd-diag-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.sd-diag-stat strong {
  font-size: var(--sd-text-title);
  font-variant-numeric: tabular-nums;
  color: var(--sd-ink);
}

.sd-diag-stat span {
  font-size: var(--sd-text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--sd-muted);
}

.sd-diag-stat.is-attention strong {
  color: var(--sd-danger);
}

.sd-diagnostics-exec-ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: var(--sd-text-body-sm);
  color: var(--sd-muted);
  font-variant-numeric: tabular-nums;
}

.sd-diagnostics-exec-ledger span:not(:first-child)::before {
  content: "·";
  margin-right: 8px;
  color: var(--sd-line-stronger);
}

.sd-diagnostics-exec-usage {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 60%, transparent);
}

.sd-diag-usage-tokens {
  margin: 0;
  font-size: var(--sd-text-body-sm);
  color: var(--sd-muted);
  font-variant-numeric: tabular-nums;
}

.sd-diag-usage-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.sd-diag-usage-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--sd-text-body-sm);
  padding: 3px 8px;
  background: var(--sd-surface-muted);
  font-variant-numeric: tabular-nums;
}

.sd-diag-usage-row strong {
  font-weight: 600;
}

.sd-diag-usage-cost {
  color: var(--sd-muted);
}

.sd-diagnostics-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
}

.sd-diagnostics-state::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-muted) 54%, transparent);
}

.sd-diagnostics-state.is-ok::before {
  background: var(--sd-sage);
}

.sd-diagnostics-state.is-active::before {
  background: var(--sd-blue);
}

.sd-diagnostics-state.is-attention::before,
.sd-diagnostics-state.is-degraded::before {
  background: var(--sd-warning);
}

.sd-diagnostics-workroom {
  container-type: inline-size;
  display: block;
  min-width: 0;
  margin-top: 14px;
}

.sd-diagnostics-tree-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sd-diagnostics-tree-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 80%, transparent);
  border-radius: var(--sd-radius);
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: color-mix(in oklch, var(--sd-surface-muted) 74%, var(--sd-paper));
}

.sd-diagnostics-tree-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-diagnostics-tree-head h3 {
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.18;
}

.sd-diagnostics-tree-head p {
  max-width: 62ch;
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.4;
}

.sd-diagnostics-mode-note {
  flex: 0 0 auto;
  justify-self: end;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-align: right;
  text-transform: none;
}

.sd-diagnostics-tree {
  display: grid;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-diagnostics-tree-card {
  overflow: hidden;
  min-width: 0;
}

button.sd-fl-erow {
  width: 100%;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  appearance: none;
}

.sd-diagnostics-tree .sd-fl-erow {
  min-width: 0;
  max-width: 100%;
}

.sd-diagnostics-tree .sd-fl-ename {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-diagnostics-inspector {
  position: static;
  top: auto;
  align-self: start;
}

.sd-diagnostics-technical {
  margin-top: 14px;
}

@media (max-width: 720px) {
  .sd-diagnostics-overview {
    flex-direction: column;
  }

  .sd-diagnostics-overview .sd-actions {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }

  .sd-diagnostics-workroom {
    grid-template-columns: 1fr;
  }

  .sd-diagnostics-tree-head {
    grid-template-columns: 1fr;
  }

  .sd-diagnostics-mode-note {
    flex: 1 1 auto;
    justify-self: start;
    text-align: left;
  }

  .sd-diagnostics-inspector {
    position: static;
    order: 2;
    border-top: 0;
  }
}

/* Workbench front-door hero composer.
   Migrated from the legacy layout tail; keep plain-language launch composition here. */
.sd-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;
}

.sd-fl-frontdoor {
  display: block;
  max-width: 100%;
  min-width: 0;
}
.sd-fl-frontdoor > * {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.sd-fl-compose-wrap { margin-top: 8px; text-align: center; }

.sd-fl-fd-eyebrow {
  font-size: var(--sd-text-label);
  color: var(--sd-subtle);
  letter-spacing: 0.02em;
}
.sd-fl-fd-display {
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-display);
  font-weight: 700;
  letter-spacing: var(--sd-tracking-display);
  line-height: 1.04;
  margin: 12px 0 8px;
}
.sd-fl-fd-lede {
  color: var(--sd-ink-muted);
  font-size: var(--sd-text-title);
  line-height: 1.5;
  margin-bottom: 18px;
}

.sd-fl-composer {
  background: var(--sd-surface);
  border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius-lg);
  padding: 14px 14px 10px;
  text-align: left;
  box-shadow: var(--sd-bevel), var(--sd-shadow-raised);
}
.sd-fl-composer-input {
  width: 100%;
  background: transparent;
  border: 0;
  resize: none;
  color: var(--sd-ink);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-heading);
  line-height: 1.5;
  outline: none;
  min-height: 44px;
}
.sd-fl-composer-input::placeholder { color: var(--sd-subtle); }

.sd-fl-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 13px; }
/* Config row — "how this run starts" actions, deliberately quieter than the
   attachments row above it: no top margin (it hugs the attachment row's
   bottom) and tighter bottom margin so the composer's primary action still
   dominates. See ADR 0039. */
.sd-fl-chiprow--config { margin-top: 0; margin-bottom: 8px; }
.sd-fl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--sd-line-strong);
  background: var(--sd-surface);
  border-radius: var(--sd-radius-pill);
  padding: 6px 12px;
  font-size: var(--sd-text-body-sm);
  color: var(--sd-ink);
  font-weight: 600;
  text-decoration: none;
}
.sd-fl-chip .sd-icon { font-size: var(--sd-text-body); color: var(--sd-muted); }
.sd-fl-chip-add {
  border-style: dashed;
  color: var(--sd-muted);
  cursor: pointer;
  background: transparent;
  font-family: var(--sd-font-sans);
}
.sd-fl-chip-add:hover { color: var(--sd-ink); border-color: var(--sd-line-stronger); }
/* The builder's signature iris — reserved for builder-only affordances
   (ADR 0039 single-accent rule). The workbench "Build an agent" chip no longer
   carries iris; this style stays available for playbook-wizard surfaces. */
.sd-fl-chip-iris {
  color: var(--sd-accent-iris-ink);
}
.sd-fl-chip-iris .sd-icon { color: var(--sd-accent-iris); }
.sd-fl-chip-iris:hover {
  color: var(--sd-accent-iris-ink);
  border-color: color-mix(in oklch, var(--sd-accent-iris) 45%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent-iris-soft) 40%, transparent);
}
.sd-fl-chip-x {
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--sd-subtle);
  cursor: pointer;
  padding: 0;
  margin-left: 1px;
}
.sd-fl-chip-x:hover { color: var(--sd-ink); }
.sd-fl-chip-x .sd-icon { font-size: var(--sd-text-body-sm); color: inherit; }

/* Mode helper line — quiet explanation of the selected run mode, lifted out
   of the action row so the Run button is the unambiguous hero (ADR 0039). */
.sd-fl-mode-help {
  margin: 6px 0 0;
  font-size: var(--sd-text-body-sm);
  line-height: var(--sd-leading-body);
}

.sd-fl-barrow {
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--sd-line);
  padding-top: 11px;
}
.sd-fl-barrow .sd-fl-grow { flex: 1; }

.sd-fl-playbook-picker { position: relative; }
.sd-fl-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--sd-line-strong);
  background: var(--sd-surface);
  border-radius: var(--sd-radius-sm);
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sd-ink);
  cursor: pointer;
  max-width: 220px;
}
.sd-fl-pick .sd-icon { color: var(--sd-muted); flex: none; }
.sd-fl-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-fl-playbook-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  max-height: 320px;
  overflow: auto;
  background: var(--sd-surface);
  border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius);
  box-shadow: var(--sd-shadow-raised);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sd-fl-playbook-search {
  width: 100%;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-sm);
  padding: 7px 9px;
  font-size: var(--sd-text-body-sm);
  background: var(--sd-surface-muted);
  color: var(--sd-ink);
  margin-bottom: 4px;
}
.sd-fl-playbook-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sd-fl-playbook-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: var(--sd-radius-sm);
  padding: 7px 9px;
  cursor: pointer;
  color: var(--sd-ink);
}
.sd-fl-playbook-option:hover { background: var(--sd-surface-muted); }
.sd-fl-playbook-option.is-selected {
  background: color-mix(in oklch, var(--sd-accent-soft) 30%, var(--sd-paper-strong));
  box-shadow: inset 2px 0 0 var(--sd-accent);
}
.sd-fl-playbook-option strong { font-size: var(--sd-text-body-sm); font-weight: 600; }
.sd-fl-playbook-option small { font-size: 11.5px; color: var(--sd-muted); }
.sd-fl-playbook-empty { padding: 8px 9px; font-size: 12.5px; }

.sd-fl-seg {
  display: inline-flex;
  border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius-sm);
  overflow: hidden;
  background: var(--sd-surface-muted);
}
.sd-fl-seg-btn {
  border: 0;
  background: transparent;
  color: var(--sd-muted);
  font-family: var(--sd-font-sans);
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sd-fl-seg-btn .sd-icon { font-size: var(--sd-text-body); }
.sd-fl-seg-btn.is-on {
  background: var(--sd-surface);
  color: var(--sd-ink);
  box-shadow: var(--sd-shadow-soft);
}

.sd-fl-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  flex: none;
  border-radius: var(--sd-radius-pill);
  border: 0;
  background: var(--sd-accent);
  color: var(--sd-on-accent);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--sd-text-body);
}
.sd-fl-send:hover { background: var(--sd-accent-hover); }
.sd-fl-send-kbd {
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  line-height: 1.2;
  opacity: 0.72;
  border: 1px solid color-mix(in oklch, currentColor 35%, transparent);
  border-radius: var(--sd-radius-xs);
  padding: 1px 4px;
}

/* No hardware keyboard, no shortcut hint. */
@media (hover: none) {
  .sd-fl-send-kbd {
    display: none;
  }
}

.sd-fl-send:active {
  filter: brightness(0.94);
}

.sd-fl-send.phx-click-loading,
.sd-fl-send.phx-submit-loading {
  pointer-events: none;
  opacity: 0.65;
}
.sd-fl-send .sd-icon { color: var(--sd-on-accent); }

/* Workbench front-door preflight: ONE quiet meta strip — shield + the
   reassurance + the live spend figure + inline setting links. Replaces the
   permanent preflight card and the separate budget line. */
.sd-fl-preflight-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  text-align: left;
  color: var(--sd-subtle);
  font-size: var(--sd-text-body-sm);
}
.sd-fl-preflight-strip .sd-icon {
  font-size: var(--sd-text-body);
  color: var(--sd-muted);
  flex: none;
}
.sd-fl-preflight-strip .sd-fl-metric {
  color: var(--sd-muted);
  font-family: var(--sd-font-mono);
}
.sd-fl-strip-sep { color: var(--sd-line-stronger); }
.sd-fl-strip-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--sd-muted);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.sd-fl-strip-link:hover { color: var(--sd-ink); }

@media (max-width: 900px) {
  .sd-fl-barrow { flex-wrap: wrap; }
}

/* Workbench front-door secondary sections: starter links and recent runs.
   Migrated from the legacy layout tail; keep task-starting route content here. */
.sd-fl-fd-rule {
  height: 1px;
  background: var(--sd-line);
  margin: 28px auto;
}
.sd-fl-fd-section { margin-top: 20px; }
.sd-fl-fd-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sd-fl-fd-section-head h3 {
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: var(--sd-text-title);
  letter-spacing: -0.012em;
}
.sd-fl-fd-section-head .sd-muted { font-size: 12.5px; display: block; margin-top: 2px; }
.sd-fl-fd-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sd-muted);
  text-decoration: none;
  border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius-sm);
  padding: 5px 10px;
  flex: none;
}
.sd-fl-fd-link:hover { color: var(--sd-ink); border-color: var(--sd-line-stronger); }
.sd-fl-fd-link .sd-icon { font-size: var(--sd-text-body); }
.sd-fl-fd-empty {
  border: 1px dashed var(--sd-line-strong);
  border-radius: var(--sd-radius);
  padding: 18px;
  font-size: var(--sd-text-body-sm);
  color: var(--sd-muted);
}

.sd-fl-leadstory { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.sd-fl-lead-col { display: flex; flex-direction: column; gap: 12px; }
.sd-fl-lead-feature,
.sd-fl-lead-mini {
  display: flex;
  flex-direction: column;
  background: var(--sd-surface);
  text-decoration: none;
  color: var(--sd-ink);
  box-shadow: var(--sd-bevel);
  transition: border-color var(--sd-duration-fast, 120ms);
}
.sd-fl-lead-feature { padding: 18px; }
.sd-fl-lead-mini { padding: 14px; flex: 1; }
.sd-fl-lead-feature:hover,
.sd-fl-lead-mini:hover { border-color: var(--sd-line-stronger); }
.sd-fl-lead-ico {
  width: 30px;
  height: 30px;
  border-radius: var(--sd-radius-sm);
  background: var(--sd-surface-muted);
  border: 1px solid var(--sd-line);
  display: grid;
  place-items: center;
  color: var(--sd-accent-ink);
  margin-bottom: 12px;
}
.sd-fl-lead-ico-sm { width: 26px; height: 26px; margin-bottom: 8px; }
.sd-fl-lead-feature strong { font-weight: 600; font-size: var(--sd-text-heading); margin-bottom: 5px; letter-spacing: -0.01em; }
.sd-fl-lead-feature p { color: var(--sd-muted); font-size: var(--sd-text-body-sm); line-height: 1.5; }
.sd-fl-lead-mini strong { font-weight: 600; font-size: var(--sd-text-body-sm); margin-bottom: 4px; }
.sd-fl-lead-mini p { color: var(--sd-muted); font-size: 12px; line-height: 1.4; }

.sd-fl-recent {
  overflow: hidden;
}
.sd-fl-rrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--sd-surface);
  font-size: var(--sd-text-body-sm);
  border-bottom: 1px solid var(--sd-line);
  text-decoration: none;
  color: var(--sd-ink);
}
.sd-fl-rrow:last-child { border-bottom: 0; }
.sd-fl-rrow:hover { background: var(--sd-surface-muted); }
.sd-fl-rrow .sd-fl-rrow-status { flex: none; }
.sd-fl-rrow .sd-fl-rrow-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-fl-rrow .sd-fl-rrow-meta {
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  color: var(--sd-subtle);
  flex: none;
}

@media (max-width: 900px) {
  .sd-fl-leadstory { grid-template-columns: 1fr; }
}
.sd-workspace-chooser-page {
  display: block;
  min-height: 100vh;
}

.sd-workspace-chooser-main {
  display: grid;
  gap: 18px;
  width: min(1080px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 28px 0 56px;
}

.sd-chooser-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--sd-ink);
  font-weight: 700;
}

.sd-workspace-chooser-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  min-width: 0;
  border-bottom: 1px solid var(--sd-line);
  padding: 22px 0;
}

.sd-workspace-chooser-hero h1 {
  max-width: 760px;
  color: var(--sd-ink);
  font-family: var(--sd-font-display);
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.98;
  margin: 4px 0 10px;
  overflow-wrap: anywhere;
}

.sd-workspace-chooser-hero p {
  max-width: 620px;
  color: var(--sd-muted);
  font-size: var(--sd-text-title);
  line-height: 1.55;
  margin: 0;
}

.sd-workspace-chooser-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.sd-workspace-choice-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-workspace-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  background: var(--sd-surface);
  box-shadow: var(--sd-shadow);
  color: var(--sd-muted);
  min-width: 0;
  padding: 14px;
  text-decoration: none;
}

.sd-workspace-choice span {
  min-width: 0;
}

.sd-workspace-choice:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
}

.sd-workspace-choice.is-current {
  border-color: color-mix(in oklch, var(--sd-accent) 32%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent-soft) 22%, var(--sd-surface));
}

.sd-workspace-choice strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  overflow-wrap: anywhere;
}

.sd-workspace-choice small {
  display: block;
  color: var(--sd-subtle);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  margin-top: 4px;
}

.sd-workspace-choice > span:last-child {
  flex: 0 0 auto;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  padding: 6px 10px;
}

.sd-workspace-create-panel {
  display: grid;
  gap: 12px;
  background: var(--sd-fill-glass);
  box-shadow: var(--sd-shadow);
  padding: 16px;
}

.sd-workspace-create-panel h2 {
  color: var(--sd-ink);
  font-size: 1.2rem;
  letter-spacing: 0;
  margin: 0;
}

.sd-workspace-create-panel p {
  color: var(--sd-muted);
  line-height: 1.45;
  margin: 6px 0 0;
}

.sd-nav {
  display: grid;
  gap: 4px;
}

.sd-nav-secondary {
  border-top: 1px solid var(--sd-line);
  padding-top: 12px;
}

/* Prominent "Build an agent" entry: bordered card that leans into the accent.
   The accent family resolves to iris here — the builder agent's signature
   color (manifesto §4) — so only the icon chip (and hover/active accents)
   carry the iris note, never the whole row. */
.sd-nav a.sd-nav-build {
  --sd-accent: var(--sd-accent-iris);
  --sd-accent-soft: var(--sd-accent-iris-soft);
  --sd-accent-hover: var(--sd-accent-iris-hover);
  --sd-accent-ink: var(--sd-accent-iris-ink);

  margin-top: 4px;
  border: 1px solid var(--sd-line-strong, var(--sd-line));
  background: var(--sd-surface);
  color: var(--sd-ink);
}

.sd-nav a.sd-nav-build:hover {
  border-color: var(--sd-accent);
  color: var(--sd-accent-ink, var(--sd-accent));
}

.sd-nav a.sd-nav-build .sd-nav-icon {
  border-color: var(--sd-accent);
  background: var(--sd-accent);
  color: var(--sd-on-accent);
}

/* ---------------------------------------------------------------------------
   Agent builder — iris identity (manifesto §4). One signature note of color,
   iris, belongs to the builder agent and ONLY the builder agent. Inside the
   builder surface the accent family resolves to iris, so the wizard kicker,
   the active step (bar, dot, number), and generic primary actions read as
   "talking to the thing that makes agents" — a tint, a border, a dot, not a
   purple page. Amber (--sd-warning) and danger (--sd-danger) semantics keep
   their own tokens, so risk styling always wins over iris.
--------------------------------------------------------------------------- */
.sd-builder-iris {
  --sd-accent: var(--sd-accent-iris);
  --sd-accent-soft: var(--sd-accent-iris-soft);
  --sd-accent-hover: var(--sd-accent-iris-hover);
  --sd-accent-ink: var(--sd-accent-iris-ink);
  /* Aliases below bake in the blue accent when computed at :root, so they
     must be re-declared here to pick up iris inside the builder scope. */
  --sd-accent-strong: var(--sd-accent-iris-ink);
  --sd-accent-border: color-mix(in oklch, var(--sd-accent-iris) 38%, var(--sd-line));
  --sd-focus: var(--sd-accent-iris);
  --sd-link: var(--sd-accent-iris);
}

.sd-nav a {
  gap: 10px;
  min-height: 36px;
  border-radius: var(--sd-radius-lg);
  color: var(--sd-muted);
  font-weight: 700;
  padding: 9px 10px;
}

.sd-nav a.is-active {
  background: color-mix(in oklch, var(--sd-accent-soft) 58%, var(--sd-paper-strong));
  /* Left accent rule + accent-ink text match the dark-mode active affordance
     so "where am I" reads at equal strength in both themes (ADR 0039). */
  box-shadow: inset 2px 0 0 var(--sd-accent);
  color: var(--sd-accent-ink);
}

.sd-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  border-radius: var(--sd-radius-sm);
  background: color-mix(in oklch, var(--sd-surface) 72%, transparent);
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1;
  flex: 0 0 auto;
}

/* Open-decisions count on the Approvals nav item. */
.sd-nav-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-accent);
  color: var(--sd-paper);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

/* Nav items show their real glyph instead of a featureless dot: a plain inline
   icon, muted by default, ink on hover, accent when active. */
.sd-nav a .sd-nav-icon {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sd-subtle);
}

.sd-nav a .sd-nav-icon .sd-icon {
  display: block;
  width: 17px;
  height: 17px;
}

.sd-nav a:hover .sd-nav-icon {
  background: transparent;
  color: var(--sd-ink);
}

.sd-nav a.is-active .sd-nav-icon,
:root[data-theme="dark"] .sd-nav a.is-active .sd-nav-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--sd-accent);
}

.sd-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.sd-nav-label {
  color: var(--sd-subtle);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  margin: 9px 0 2px;
  padding: 0 10px 2px;
  text-transform: uppercase;
}

.sd-nav a:hover {
  background: var(--sd-fill-well);
  color: var(--sd-ink);
}

.sd-session-form {
  margin-top: 10px;
}

.sd-session-form button {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  background: transparent;
  color: var(--sd-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.sd-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-sidebar-footer .sd-session-form {
  flex: 1 1 auto;
  margin-top: 0;
}

.sd-console:has(.sd-sidebar-toggle:checked) .sd-sidebar-footer {
  justify-content: center;
}

.sd-theme-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  color: var(--sd-muted);
  cursor: pointer;
  transition:
    background-color var(--sd-duration-fast) var(--sd-ease-standard),
    border-color var(--sd-duration-fast) var(--sd-ease-standard),
    color var(--sd-duration-fast) var(--sd-ease-standard);
}

.sd-theme-toggle:hover {
  border-color: var(--sd-line-strong);
  background: var(--sd-fill-well);
  color: var(--sd-ink);
}

.sd-theme-toggle .sd-nav-icon {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: inherit;
}

.sd-theme-toggle-sun {
  display: none;
}

:root[data-theme="dark"] .sd-theme-toggle-moon {
  display: none;
}

:root[data-theme="dark"] .sd-theme-toggle-sun {
  display: inline-flex;
}

.sd-main {
  display: grid;
  gap: 12px;
  align-content: start;
  width: 100%;
  padding: 16px 18px 24px;
}

.sd-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 66%, transparent);
  padding-bottom: 8px;
}

.sd-topbar-identity {
  display: flex;
  align-items: center;
  min-width: 0;
}

.sd-topbar-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

/* Context title — shown only where the topbar is visible (narrow viewports,
   where there is no sidebar to anchor "where am I"). Centers between the
   workspace chip and the account context, muted so it never competes with
   the page's own H1. See ADR 0039. */
.sd-topbar-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  font-weight: 700;
}

@media (max-width: 520px) {
  .sd-topbar-title {
    display: none;
  }
}

.sd-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 240px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-paper-strong) 86%, transparent);
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  overflow: hidden;
  padding: 7px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-context-chip-wide {
  max-width: min(360px, 42vw);
}

.sd-context-block {
  display: grid;
  min-width: 132px;
  max-width: 230px;
  gap: 2px;
  background: var(--sd-fill-glass);
  padding: 8px 10px;
}

.sd-context-block span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
}

.sd-context-block strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-context-block-wide {
  min-width: 190px;
}

/* One quiet kicker primitive — the de-facto muted sentence-case treatment
   formerly re-declared per surface. Accent stays reserved for actions. */
.sd-eyebrow {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Quiet hover grammar (front-door controls). */
.sd-fl-pick:hover {
  border-color: var(--sd-line-stronger);
  background: color-mix(in oklch, var(--sd-surface-muted) 52%, transparent);
}

.sd-fl-seg-btn:not(.is-on):hover {
  color: var(--sd-ink);
  background: color-mix(in oklch, var(--sd-surface-muted) 60%, transparent);
}

a.sd-fl-chip:hover,
button.sd-fl-chip:hover {
  border-color: var(--sd-line-stronger);
  color: var(--sd-ink);
}

}
/* @console-layer: layout-primitives
   Owns reusable type utilities, stack/cluster/grid primitives, page rhythm,
   and layout rails. Route-specific composition belongs in screen-surfaces.
*/

/* Type utilities — bundle the type tokens; apply in HEEx instead of inline sizes. */
/* CARD MATERIAL — the one hairline-card declaration for this layer.
   Every bordered container below shares this border + radius; per-class rules
   keep only their own layout (grid/gap/padding) and surface fill. Variants
   and nested-quiet rules later in the file override as before. */
.sd-home-current-step,
.sd-home-journey-spine,
.sd-home-loop-disclosure summary,
.sd-loop-strip,
.sd-workbench-access-item,
.sd-workbench-template-grid,
.sd-home-health-facts,
.sd-home-receipt-list,
.sd-home-output-preview,
.sd-home-output-preview-media,
.sd-home-artifact-list,
.sd-side-summary,
.sd-mobile-filter-summary,
.sd-mobile-review-summary,
.sd-launch-mode-option,
.sd-launch-task-example,
.sd-credential-vault-row,
.sd-credential-row,
.sd-vault-credential-row,
.sd-credential-field-note,
.sd-execution-service-card,
.sd-setup-fact-strip,
.sd-setup-budget-current,
.sd-setup-decision-card,
.sd-setup-link-grid,
.sd-browser-mode-card,
.sd-browser-session-row,
.sd-browser-action-row,
.sd-browser-live-shot,
.sd-access-briefing-card,
.sd-setup-access-card,
.sd-setup-browser-flow article,
.sd-launch-resource-brief,
.sd-launch-resource-brief-card,
.sd-approval-queue-note,
.sd-decision-row,
.sd-decision-row-icon,
.sd-decision-summary,
.sd-evidence-list,
.sd-browser-viewer iframe,
.sd-run-input-brief,
.sd-run-sheet-section,
.sd-agent-recent-receipts,
.sd-run-sheet-disclosure,
.sd-status-card,
.sd-watch-sidebar-item,
.sd-run-steps-metrics > div,
.sd-run-step-item,
.sd-action-log-item article,
.sd-action-log-facts div,
.sd-run-workroom-card,
.sd-run-visual-evidence,
.sd-run-visual-primary,
.sd-run-visual-thumb,
.sd-run-visual-primary-image,
.sd-run-visual-image,
.sd-run-proof-row,
.sd-run-proof-type,
.sd-run-io-chip,
.sd-run-receipt-actions,
.sd-run-started-facts div,
.sd-run-output-preview-card,
.sd-run-rail-details,
.sd-action-log-table,
.sd-run-current-focus,
.sd-run-work-metrics > div,
.sd-run-progress-steps li,
.sd-run-parallel-metrics > div,
.sd-run-parallel-lane dl > div,
.sd-run-agent-counts > div,
.sd-run-agent-activity-list > li,
.sd-run-output-chip,
.sd-run-activity-digest li,
.sd-watch-tool-facts > div,
.sd-watch-event-markdown-body,
.sd-preview-rail,
.sd-checkline,
.sd-launch-consequence-card,
.sd-capability-card,
.sd-form-section,
.sd-usage-breakdown-row,
.sd-playbook-overview-card,
.sd-playbook-promotion-card,
.sd-worker-summary,
.sd-worker-prompt-card,
.sd-worker-io-card,
.sd-worker-policy-card,
.sd-worker-access-card,
.sd-channel-row,
.sd-channel-icon,
.sd-schedule-preset,
.sd-capability-band,
.sd-proposal-decision-header,
.sd-disclosure,
.sd-template-card,
.sd-inventory-card,
.sd-save-playbook-summary-grid > div,
.sd-auto-agent-priority-strip,
.sd-priority-row,
.sd-worker-preview-hero,
.sd-worker-preview-section,
.sd-worker-preview-list,
.sd-now-progress-strip,
.sd-setup-lane-list,
.sd-setup-scenario-list,
.sd-operations-worker-row,
.sd-admin-policy-card,
.sd-admin-audit-row,
.sd-admin-member-row,
.sd-admin-route-row,
.sd-library-area-icon,
.sd-fl-learning-card,
.sd-learning-metric,
.sd-learning-proposal-card,
.sd-learning-more[open] .sd-fl-learning-grid,
.sd-fl-output-preview-card,
.sd-fl-output-preview-media,
.sd-agent-index-intro,
.sd-agent-readiness-list,
.sd-agent-filter-rail,
.sd-launch-context-compact,
.sd-launch-context-tabs,
.sd-v4-object-header,
.sd-v4-agent-card,
.sd-v4-run-package,
.sd-v4-approval-card,
.sd-v4-readiness,
.sd-v4-promotion-dialog,
.sd-v4-promotion-receipt,
.sd-v4-version-diff,
.sd-v4-context-rail,
.sd-v4-attention-rail,
.sd-v4-attention-item,
.sd-v4-approval-source,
.sd-v4-approval-evidence,
.sd-v4-output-preview-item,
.sd-v4-output-preview-media,
.sd-v4-artifact-list a,
.sd-v4-diagnostics,
.sd-work-table,
.sd-run-toolbar-search,
.sd-run-filters-popover > summary,
.sd-run-deferred-stops,
.sd-guide-steps li,
.sd-artifact-image,
.sd-artifact-media-frame,
.sd-artifact-media-control,
.sd-markdown-outline,
.sd-readiness-hero,
.sd-work-stage,
.sd-subagent-row,
.sd-activity-row,
.sd-factory-stage,
.sd-factory-message,
.sd-resource-draft,
.sd-proposal-section,
.sd-subagent-card,
.sd-factory-tab,
.sd-fw-summary,
.sd-proposal-preview,
.sd-proposal-proof-fact,
.sd-proposal-decision-fact,
.sd-auto-agent-published-facts div,
.sd-wizard-step,
.sd-fl-directory,
.sd-fl-drow .sd-fl-drow-ico,
.sd-fl-target-strip,
.sd-fl-kpi-lead,
.sd-fl-spec-card,
.sd-builder-console,
.sd-builder-chat-msg.is-bot,
.sd-builder-assist-form input,
.sd-builder-assist-form textarea,
.sd-builder-test-loop,
.sd-builder-definition pre,
.sd-builder-review-row,
.sd-fl-chat,
.sd-fl-codewell,
.sd-fl-worksum,
.sd-fl-inset {
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius);
}

/* Layout primitives — vertical section rhythm + horizontal control clusters. */
.sd-section {
  display: grid;
  gap: var(--sd-space-6);
}

.sd-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-gap-cluster);
}

.sd-session-chip {
  max-width: 340px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
  color: var(--sd-muted);
  overflow: hidden;
  padding: 7px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-grid {
  display: grid;
  gap: var(--sd-space-5);
}

.sd-grid.two {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.4fr);
  align-items: start;
}

.sd-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sd-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sd-stack {
  display: grid;
  gap: var(--sd-gap-stack);
}

.sd-stack-tight {
  gap: var(--sd-space-3);
}

.sd-stack-loose {
  gap: var(--sd-space-6);
}

.sd-fieldset-reset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sd-page-chrome {
  display: grid;
  gap: var(--sd-space-4);
  min-width: 0;
  container-type: inline-size;
}

.sd-page-chrome > * {
  min-width: 0;
}

.sd-page-meta-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.sd-page-meta-strip > div {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  align-items: baseline;
  min-height: 26px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-paper-strong) 62%, transparent);
  padding: 4px 7px;
}

.sd-page-meta-strip dt {
  color: var(--sd-subtle);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sd-page-meta-strip dd {
  margin: 0;
  color: var(--sd-ink);
  max-width: 18ch;
  overflow: hidden;
  font-size: var(--sd-text-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cost reads in warm gold in the run header as an economic-honesty cue. Color
   only, no pill; theme-invariant tone alias. */
.sd-page-meta-strip dd[data-cost] {
  color: var(--sd-tone-warn-fg);
}

.sd-page-tabs {
  min-width: 0;
}

.sd-worker-tabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--sd-line);
  padding: 0 2px;
  scrollbar-width: thin;
}

.sd-worker-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.15;
  padding: 7px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.sd-worker-tab:hover {
  border-bottom-color: var(--sd-line-strong);
  background: color-mix(in oklch, var(--sd-surface-muted) 52%, transparent);
  color: var(--sd-ink);
}

.sd-worker-tab.is-active {
  border-bottom-color: var(--sd-accent);
  background: color-mix(in oklch, var(--sd-accent-soft) 16%, transparent);
  color: var(--sd-ink);
}

.sd-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  /* Frosted glass appbar (Phase 4): pins to the top, content blurs behind it.
     z-index stays well below the overlay backdrops (80/90). */
  position: sticky;
  top: 0;
  z-index: 20;
  border: 1px solid var(--sd-line);
  border-width: 0 0 1px;
  border-radius: 0;
  background: color-mix(in oklch, var(--sd-paper-strong) 78%, transparent);
  backdrop-filter: blur(var(--sd-blur-bar));
  -webkit-backdrop-filter: blur(var(--sd-blur-bar));
  box-shadow: none;
  padding: 0 2px 14px;
}

.sd-page-object-header {
  /* Re-assert sticky here: this selector is on the same element as
     .sd-page-header and, being later/equal-specificity, would otherwise win with
     position:relative and kill the frosted appbar's pinning. */
  position: sticky;
  top: 0;
  z-index: 20;
  overflow: hidden;
  /* Keep the frosted-glass fill from .sd-page-header (don't cancel it). */
  background: color-mix(in oklch, var(--sd-paper-strong) 78%, transparent);
  padding: 0 2px 14px;
}

.sd-page-object-header::before {
  display: none;
}

.sd-page-header-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-page-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.sd-page-status-live {
  display: inline-flex;
}

.sd-page-title-row :is(h1, h2) {
  /* Pages lead in the display voice — confident, not card-heading scale. */
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: var(--sd-text-page-title);
  line-height: 1.15;
  letter-spacing: -0.018em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sd-page-header-copy p:not(.sd-eyebrow) {
  max-width: 62ch;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sd-action-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
}

.sd-page-header .sd-button,
.sd-page-header button {
  min-height: 30px;
  padding: 6px 9px;
  font-size: var(--sd-text-body-sm);
}

.sd-page-title-row .sd-page-status-live .sd-status {
  min-height: 18px;
  border-color: transparent;
  background: transparent;
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  padding: 1px 3px;
}

.sd-page-title-row .sd-page-status-live .sd-status-dot {
  width: 6px;
  height: 6px;
}

.sd-page-attention-rail,
.sd-page-side-rail,
.sd-page-diagnostics-region {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-page-attention-rail {
  border: 1px solid color-mix(in oklch, var(--sd-warning) 28%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-accent-soft) 16%, var(--sd-paper-strong));
  padding: 12px;
}

.sd-home-current-step,
.sd-home-journey-spine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.32fr) auto;
  gap: 10px;
  align-items: center;
  background: var(--sd-surface);
  box-shadow: var(--sd-bevel), var(--sd-shadow);
  padding: 11px;
}

.sd-home-current-step > .sd-home-attention-overflow {
  grid-column: 1 / -1;
}

.sd-home-journey-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sd-home-journey-copy h2 {
  color: var(--sd-ink);
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-title);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sd-home-journey-copy p:not(.sd-eyebrow) {
  color: var(--sd-muted);
  line-height: 1.36;
  overflow-wrap: anywhere;
}

.sd-home-current-context {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
  min-width: 0;
}

.sd-home-current-context span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-fill-well);
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1;
  min-height: 24px;
  padding: 4px 7px;
}

.sd-home-current-context strong {
  color: var(--sd-ink);
  font-variant-numeric: tabular-nums;
}

.sd-home-loop {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-home-loop-disclosure {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sd-home-loop-disclosure summary {
  align-items: center;
  background: var(--sd-fill-well);
  cursor: pointer;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 9px;
}

.sd-home-loop-disclosure summary span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-transform: none;
}

.sd-home-loop-disclosure summary strong {
  color: var(--sd-ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-home-loop-disclosure[open] .sd-home-loop {
  padding-top: 2px;
}

.sd-home-loop-disclosure:not([open]) > .sd-home-loop {
  display: none;
}

.sd-home-loop li {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-fill-well);
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.1;
  padding: 5px 8px;
  white-space: normal;
}

.sd-home-journey-action {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 0;
}

.sd-loop-strip {
  align-items: center;
  background: var(--sd-paper-strong);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 1.1fr) auto;
  min-width: 0;
  padding: 12px;
}

.sd-loop-strip-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-loop-strip-copy strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.25;
  overflow-wrap: break-word;
}

.sd-loop-strip-copy p {
  color: var(--sd-muted);
  line-height: 1.38;
  margin: 0;
  overflow-wrap: break-word;
}

.sd-loop-strip-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.sd-loop-strip-step {
  align-items: center;
  background: var(--sd-fill-well);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  display: inline-flex;
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.1;
  min-height: 26px;
  padding: 5px 8px;
  white-space: normal;
}

.sd-loop-strip-step.is-complete {
  background: color-mix(in oklch, var(--sd-success) 10%, var(--sd-paper-strong));
  color: color-mix(in oklch, var(--sd-success) 60%, var(--sd-ink));
}

.sd-loop-strip-step.is-current {
  background: color-mix(in oklch, var(--sd-accent) 13%, var(--sd-paper-strong));
  border-color: color-mix(in oklch, var(--sd-accent) 34%, var(--sd-line));
  color: var(--sd-ink);
}

.sd-loop-strip-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
  min-width: 0;
}

.sd-loop-strip-actions .sd-actions {
  justify-content: flex-end;
}

.sd-loop-strip.is-compact {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

.sd-loop-strip.is-compact .sd-loop-strip-copy p,
.sd-loop-strip.is-compact .sd-loop-phase {
  display: none;
}

@media (max-width: 760px) {
  .sd-loop-strip {
    grid-template-columns: 1fr;
  }

  .sd-loop-strip-actions {
    align-items: stretch;
    justify-items: stretch;
  }

  .sd-loop-strip-actions .sd-actions {
    justify-content: stretch;
  }

  .sd-loop-strip-actions .sd-button,
  .sd-loop-strip-actions button {
    flex: 1 1 140px;
  }
}

.sd-loop-strip.is-compact .sd-loop-strip-actions {
  justify-items: end;
}

.sd-loop-strip.is-compact .sd-loop-strip-actions .sd-actions {
  justify-content: flex-end;
}

[data-testid="auto-agent-current-focus"] .sd-loop-strip {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

[data-testid="auto-agent-current-focus"] .sd-loop-strip-actions {
  justify-items: stretch;
}

[data-testid="auto-agent-current-focus"] .sd-loop-strip-actions .sd-actions {
  justify-content: flex-start;
}

[data-testid="auto-agent-current-focus"] .sd-loop-strip-actions .sd-button,
[data-testid="auto-agent-current-focus"] .sd-loop-strip-actions button {
  max-width: 100%;
  white-space: normal;
}

@media (max-width: 760px) {
  .sd-loop-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sd-loop-strip-actions {
    align-items: stretch;
    justify-items: stretch;
  }

  .sd-loop-strip-actions .sd-actions {
    justify-content: stretch;
  }

  .sd-loop-strip-actions .sd-button,
  .sd-loop-strip-actions button {
    flex: 1 1 140px;
    max-width: 100%;
  }

  .sd-loop-strip.is-compact {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sd-loop-strip.is-compact .sd-loop-strip-actions {
    justify-items: end;
  }

  .sd-loop-strip.is-compact .sd-loop-strip-actions .sd-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .sd-loop-strip.is-compact .sd-loop-strip-actions .sd-button,
  .sd-loop-strip.is-compact .sd-loop-strip-actions button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.sd-loop-phase {
  align-items: center;
  background: var(--sd-paper);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  display: inline-flex;
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1;
  min-height: 24px;
  padding: 5px 8px;
  text-transform: uppercase;
}

.sd-home-activity {
  display: grid;
  gap: var(--sd-space-6);
  min-width: 0;
}

.sd-home-activity-lane {
  display: grid;
  gap: var(--sd-space-4);
  min-width: 0;
}

.sd-home-activity-lane + .sd-home-activity-lane {
  padding-top: var(--sd-space-6);
  border-top: 1px solid var(--sd-border-subtle);
}

.sd-home-activity-quiet {
  margin: 0;
  color: var(--sd-text-muted);
  font-size: var(--sd-text-body-sm);
}

.sd-workbench-entry {
  display: grid;
  gap: 20px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  /* Glow now lives on the app shell (.sd-console); stay transparent so the
     Workbench doesn't stack a second radial over it. */
  background: transparent;
  padding: 12px 0 4px;
  box-shadow: none;
}

.sd-workbench-lede {
  display: grid;
  gap: 10px;
  justify-items: center;
  max-width: 760px;
  min-width: 0;
  margin: 0 auto;
  text-align: center;
}

.sd-workbench-page .sd-page-header {
  min-height: 50px;
  align-items: center;
  border-width: 0 0 1px;
  border-radius: 0;
  /* Inherit the frosted-glass appbar fill (was transparent). */
  background: color-mix(in oklch, var(--sd-paper-strong) 78%, transparent);
  box-shadow: none;
  padding: 0 4px 9px;
}

.sd-workbench-page .sd-page-object-header::before,
.sd-workbench-page .sd-page-header-copy > .sd-eyebrow,
.sd-workbench-page .sd-page-header-copy > p:not(.sd-eyebrow) {
  display: none;
}

.sd-workbench-page .sd-page-title-row :is(h1, h2) {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-title);
  font-weight: 700;
  line-height: 1.15;
}

.sd-workbench-lede h2 {
  color: var(--sd-ink);
  font-family: var(--sd-font-display);
  font-size: clamp(2.4rem, 5vw, 3.95rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.98;
}

.sd-workbench-lede p {
  color: var(--sd-muted);
  font-size: var(--sd-text-heading);
  line-height: 1.5;
}

.sd-workbench-lede > .sd-eyebrow {
  display: none;
}

.sd-workbench-grid {
  display: grid;
  grid-template-columns: minmax(460px, 780px) minmax(290px, 320px);
  gap: 22px;
  align-items: start;
  justify-content: center;
  min-width: 0;
}

.sd-workbench-main {
  display: grid;
  gap: var(--sd-space-5);
  min-width: 0;
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

.sd-workbench-launch-check > summary {
  cursor: pointer;
}

.sd-workbench-launch-check[open] > summary {
  margin-bottom: 10px;
}

.sd-workbench-composer,
.sd-workbench-side {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

/* The whole Workbench lives in one centered column so the hero and the
   activity/health below it read as a single surface, not unrelated slabs. */
.sd-workbench-canvas {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

/* The composer is ONE elevated card; the capability + quick-start rows fold in
   beneath the input, divided by hairlines — not three separate bordered boxes. */
.sd-workbench-composer {
  display: grid;
  gap: var(--sd-space-5);
  border: 1px solid color-mix(in oklch, var(--sd-line-strong) 68%, transparent);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-fill-glass);
  box-shadow: 0 30px 90px color-mix(in oklch, var(--sd-shadow) 20%, transparent);
  padding: var(--sd-space-6);
}

.sd-workbench-side {
  border: 1px solid color-mix(in oklch, var(--sd-line-strong) 62%, transparent);
  border-radius: var(--sd-radius-lg);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--sd-paper-strong) 82%, transparent),
      color-mix(in oklch, var(--sd-paper) 86%, transparent)
    );
  box-shadow: 0 22px 70px color-mix(in oklch, var(--sd-shadow) 13%, transparent);
  padding: 14px;
}

.sd-workbench-readiness-disclosure {
  background: color-mix(in oklch, var(--sd-paper-strong) 76%, transparent);
  box-shadow: none;
}

.sd-workbench-readiness-disclosure summary small {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
}

.sd-workbench-readiness-disclosure > .sd-panel {
  margin-top: 0;
  box-shadow: none;
}

.sd-workbench-side-head {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
}

.sd-workbench-side-head strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.22;
}

.sd-workbench-side-head p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.38;
}

.sd-workbench-composer-box {
  display: grid;
  gap: var(--sd-space-4);
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.sd-workbench-composer label {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-workbench-composer textarea {
  width: 100%;
  min-height: 98px;
  resize: vertical;
  border: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 86%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.45;
  padding: 4px 0 16px;
}

.sd-workbench-composer textarea::placeholder {
  color: var(--sd-subtle);
}

.sd-workbench-starters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  border-radius: 0;
  background: transparent;
  padding-top: var(--sd-space-4);
}

.sd-workbench-starters-head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  align-items: baseline;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.3;
  padding: 8px 10px;
}

.sd-workbench-starters-head span,
.sd-workbench-starter span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-workbench-starters-head strong {
  color: var(--sd-ink);
  font-weight: 700;
}

.sd-workbench-starter {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-right: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: transparent;
  color: inherit;
  padding: 10px;
  text-decoration: none;
}

.sd-workbench-starter:last-child {
  border-right: 0;
}

.sd-workbench-starter:hover {
  background: color-mix(in oklch, var(--sd-accent-soft) 16%, transparent);
}

.sd-workbench-starter strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.2;
}

.sd-workbench-starter p {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.32;
}

.sd-workbench-mode-row,
.sd-workbench-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.sd-workbench-mode-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--sd-line) 82%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-paper-strong) 58%, transparent);
  padding: 0;
}

.sd-workbench-mode-head {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  align-items: baseline;
  grid-column: 1 / -1;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.3;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  padding: 8px 10px;
}

.sd-workbench-mode-head span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-workbench-mode-head strong {
  color: var(--sd-ink);
  font-weight: 700;
}

/* In the narrow Run-options sheet the 4-up mode row stacks for readability. */
.sd-overlay--sheet .sd-workbench-mode-row {
  grid-template-columns: 1fr;
}

.sd-overlay--sheet .sd-workbench-mode-option {
  border-right: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-workbench-mode-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border-right: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: transparent;
  cursor: pointer;
  padding: 9px 10px;
  text-transform: none;
}

.sd-workbench-mode-option:last-child {
  border-right: 0;
}

.sd-workbench-mode-option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.sd-workbench-mode-option strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  line-height: 1.18;
  white-space: nowrap;
}

.sd-workbench-mode-option p {
  display: none;
}

.sd-workbench-mode-option.is-selected {
  background: color-mix(in oklch, var(--sd-accent-soft) 16%, transparent);
  box-shadow: inset 0 2px 0 color-mix(in oklch, var(--sd-accent) 72%, transparent);
}

.sd-workbench-capability-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  gap: var(--sd-space-2);
  min-width: 0;
  border: 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  border-radius: 0;
  background: transparent;
  padding-top: var(--sd-space-4);
}

.sd-workbench-advanced {
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 82%, transparent);
  border-radius: var(--sd-radius-lg);
  background: color-mix(in oklch, var(--sd-surface-muted) 48%, transparent);
  padding: 0;
}

.sd-workbench-advanced > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
}

.sd-workbench-advanced > summary::-webkit-details-marker {
  display: none;
}

.sd-workbench-advanced > summary span {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.2;
}

.sd-workbench-advanced > summary strong {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

.sd-workbench-advanced[open] > summary {
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-workbench-advanced-body {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px 14px;
}

.sd-workbench-advanced:not([open]) > .sd-workbench-advanced-body {
  display: none;
}

@media (max-width: 820px) {
  .sd-workbench-mode-row {
    grid-template-columns: 1fr;
  }

  .sd-workbench-mode-option {
    border-right: 0;
    border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  }

  .sd-workbench-mode-option:last-child {
    border-bottom: 0;
  }

  .sd-workbench-starters {
    grid-template-columns: 1fr;
  }

  .sd-workbench-starter {
    border-right: 0;
    border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  }

  .sd-workbench-starter:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 820px) {
  .sd-workbench-capability-strip {
    grid-template-columns: 1fr;
  }

}

.sd-workbench-context {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 82%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-paper-strong) 56%, transparent);
  padding: 0;
}

.sd-workbench-risk-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: start;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 22%, var(--sd-line));
  border-radius: var(--sd-radius-lg);
  background: color-mix(in oklch, var(--sd-paper-strong) 66%, transparent);
  padding: 13px 14px;
}

.sd-workbench-risk-preview strong {
  display: block;
  margin-top: 3px;
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.2;
}

.sd-workbench-risk-preview p {
  margin-top: 5px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.42;
}

.sd-workbench-risk-aside {
  border: 1px solid color-mix(in oklch, var(--sd-accent) 42%, var(--sd-line));
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-accent-soft) 22%, transparent);
  color: var(--sd-accent);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1;
  padding: 8px 10px;
  white-space: nowrap;
}

.sd-workbench-risk-detail {
  grid-column: 1 / -1;
  min-width: 0;
}

.sd-workbench-risk-detail summary {
  color: var(--sd-accent);
  cursor: pointer;
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
}

.sd-workbench-risk-detail:not([open]) > .sd-workbench-estimate-grid {
  display: none;
}

.sd-workbench-integrations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
  padding: 9px 0;
}

.sd-workbench-integrations a {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sd-accent);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.2;
  padding: 0;
  text-decoration: none;
}

.sd-workbench-integrations a:hover {
  text-decoration: underline;
}

.sd-workbench-context-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 10px;
}

.sd-workbench-context-head strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.2;
}

.sd-workbench-context-head p {
  margin-top: 4px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
}

.sd-workbench-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-workbench-context-column {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 10px;
}

.sd-workbench-context-column + .sd-workbench-context-column {
  border-left: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-workbench-context-column-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.sd-workbench-context-column-head strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  line-height: 1.2;
}

.sd-workbench-context-column-head a,
.sd-workbench-context-empty a {
  color: var(--sd-accent);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-decoration: none;
}

.sd-workbench-context-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
  border: 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  background: transparent;
  cursor: pointer;
  padding: 8px 0 0;
  text-transform: none;
}

.sd-workbench-context-option input {
  margin-top: 2px;
}

.sd-workbench-context-option strong {
  color: var(--sd-ink);
  display: block;
  font-size: var(--sd-text-body-sm);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sd-workbench-context-option p {
  margin-top: 3px;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.3;
}

.sd-workbench-context-empty {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  padding: 10px;
}

.sd-workbench-estimate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--sd-line) 82%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-paper-strong) 56%, transparent);
}

.sd-workbench-estimate-item {
  min-width: 0;
  border-right: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: transparent;
  padding: 10px;
}

.sd-workbench-estimate-item:last-child {
  border-right: 0;
}

.sd-workbench-estimate-item span {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-workbench-estimate-item strong {
  display: block;
  margin-top: 4px;
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  line-height: 1.2;
}

.sd-workbench-estimate-item p {
  margin-top: 4px;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.34;
}

.sd-workbench-actions .sd-button {
  gap: 8px;
  min-height: 38px;
  border-radius: var(--sd-radius-pill);
  padding-inline: 12px;
}

.sd-workbench-actions .sd-icon {
  width: 18px;
  height: 18px;
}

.sd-project-context-card,
.sd-project-context-picker {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-project-context-picker {
  margin: 0;
  border: 0;
  padding: 0;
}

.sd-project-context-card {
  border: 1px solid color-mix(in oklch, var(--sd-accent) 24%, var(--sd-line));
  border-radius: var(--sd-radius-lg);
  background:
    linear-gradient(
      145deg,
      color-mix(in oklch, var(--sd-accent-soft) 22%, transparent),
      transparent 58%
    ),
    var(--sd-paper);
  padding: 12px;
}

.sd-workbench-rail-card {
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line-strong) 58%, transparent);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-fill-glass);
  padding: 14px;
}

.sd-workbench-side .sd-project-context-card,
.sd-workbench-side .sd-workbench-rail-card {
  border-width: 0 0 1px;
  border-color: color-mix(in oklch, var(--sd-line) 64%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 2px 0 12px;
}

.sd-workbench-side .sd-workbench-rail-card:last-child,
.sd-workbench-side .sd-workbench-access-grid:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.sd-workbench-rail-card > strong {
  display: block;
  margin-top: 4px;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.24;
}

.sd-workbench-rail-card > p {
  margin-top: 8px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.42;
}

.sd-workbench-risk-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.sd-workbench-risk-rail > div {
  min-width: 0;
}

.sd-workbench-risk-rail strong {
  display: block;
  margin-top: 4px;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.22;
}

.sd-workbench-risk-rail p {
  margin-top: 6px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.4;
}

.sd-workbench-risk-rail > span:last-child {
  border: 1px solid color-mix(in oklch, var(--sd-accent) 36%, var(--sd-line));
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-accent-soft) 18%, transparent);
  color: var(--sd-accent);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1;
  padding: 7px 9px;
  white-space: nowrap;
}

.sd-workbench-tool-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}

.sd-workbench-tool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
}

.sd-workbench-rail-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.22;
  white-space: nowrap;
}

.sd-workbench-rail-state::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--sd-radius-pill);
  background: currentColor;
  opacity: 0.68;
}

.sd-workbench-tool-row .sd-workbench-rail-state {
  justify-self: end;
}

.sd-workbench-rail-card > .sd-workbench-rail-state {
  margin-top: 8px;
}

/* One status system: the data-tone rail-state groups (Phase 5). The legacy
   .sd-workbench-rail-state.is-* groups were removed once every emitter migrated
   to data-tone={PublicLabels.tone(...)}. */
.sd-workbench-rail-state[data-tone="ok"] {
  color: var(--sd-sage);
}

.sd-workbench-rail-state[data-tone="active"] {
  color: var(--sd-info);
}

.sd-workbench-rail-state[data-tone="neutral"] {
  color: var(--sd-tone-neutral-fg);
}

.sd-workbench-rail-state[data-tone="warn"] {
  color: var(--sd-warning);
}

.sd-workbench-rail-state[data-tone="stopped"] {
  color: var(--sd-danger);
}

.sd-workbench-rail-detail {
  min-width: 0;
}

.sd-workbench-rail-detail summary {
  color: var(--sd-accent);
  cursor: pointer;
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
}

.sd-workbench-rail-detail:not([open]) > :not(summary) {
  display: none;
}

.sd-workbench-rail-detail .sd-project-context-includes {
  margin-top: 10px;
}

.sd-workbench-rail-detail .sd-project-context-facts {
  margin-top: 10px;
}

.sd-project-context-head,
.sd-project-context-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.sd-project-context-head strong,
.sd-project-context-option strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.24;
}

.sd-project-context-head p,
.sd-project-context-option p {
  margin: 4px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.42;
}

.sd-project-context-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr));
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.sd-project-context-facts > div {
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 80%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 62%, var(--sd-paper));
  padding: 8px;
}

.sd-project-context-facts dt {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-project-context-facts dd {
  margin: 3px 0 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sd-project-context-includes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.sd-project-context-includes > div,
.sd-project-context-option {
  border: 1px solid color-mix(in oklch, var(--sd-line) 82%, transparent);
  border-radius: var(--sd-radius);
  background: var(--sd-fill-glass);
  padding: 9px;
}

.sd-project-context-option {
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.sd-project-context-option input {
  align-self: start;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--sd-accent);
}

.sd-project-context-includes strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  line-height: 1.2;
}

.sd-project-context-includes p {
  margin: 3px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.35;
}

.sd-project-context-option.is-selected {
  border-color: color-mix(in oklch, var(--sd-accent) 34%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent) 10%, var(--sd-paper-strong));
}

.sd-project-context-option.is-disabled {
  opacity: 0.72;
}

.sd-project-context-option.is-disabled {
  cursor: not-allowed;
}

.sd-projects-home {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sd-projects-instruction-box {
  display: grid;
  gap: 16px;
  min-height: 128px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 86%, transparent);
  border-radius: var(--sd-radius);
  background: var(--sd-fill-glass);
  padding: 18px;
}

.sd-projects-instruction-box p {
  max-width: 68ch;
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  font-weight: 700;
  line-height: 1.42;
}

.sd-projects-instruction-box span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.35;
}

.sd-projects-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  min-width: 0;
}

.sd-projects-summary-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 84%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 62%, var(--sd-paper));
  color: inherit;
  padding: 14px;
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    transform 0.16s ease;
}

a.sd-projects-summary-card:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
}

.sd-projects-summary-card h3 {
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-weight: 700;
  line-height: 1.2;
}

.sd-projects-summary-card p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.36;
  overflow-wrap: anywhere;
}

.sd-projects-summary-card span {
  align-self: end;
  color: var(--sd-accent);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.2;
}

[data-testid="projects-overview"] .sd-page-meta-strip dt,
[data-testid="projects-overview"] .sd-projects-playbook-facts dt,
[data-testid="projects-overview"] .sd-data-grid dt {
  color: var(--sd-muted);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.sd-projects-controls {
  margin-top: 2px;
}

.sd-projects-controls-grid {
  margin-top: 14px;
}

.sd-list .sd-projects-playbook-row {
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.32fr) auto;
  align-items: center;
}

.sd-projects-playbook-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-projects-playbook-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.sd-projects-playbook-facts dt {
  color: var(--sd-subtle);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.sd-projects-playbook-facts dd {
  margin: 4px 0 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.2;
}

.sd-projects-run-list .sd-list-row {
  align-items: center;
}

.sd-project-state {
  justify-self: end;
}

.sd-projects-run-list .sd-list-row p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sd-projects-warning {
  border: 1px solid color-mix(in oklch, var(--sd-warning) 52%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-warning) 12%, var(--sd-paper-strong));
  color: color-mix(in oklch, var(--sd-warning) 56%, var(--sd-ink));
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.4;
  padding: 14px;
}

.sd-project-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-project-form textarea {
  min-height: 88px;
  resize: vertical;
}

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

.sd-form-error {
  margin: 0;
  border: 1px solid color-mix(in oklch, var(--sd-danger) 46%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-danger) 10%, var(--sd-paper-strong));
  color: color-mix(in oklch, var(--sd-danger) 58%, var(--sd-ink));
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.36;
  padding: 10px;
}

.sd-management-gate {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.sd-management-gate-lede {
  max-width: 76ch;
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-heading);
  line-height: 1.5;
}

.sd-management-gate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.sd-management-gate-grid article {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 86%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 64%, var(--sd-paper));
  padding: 14px;
}

.sd-management-gate-grid strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.2;
}

.sd-management-gate-grid p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.38;
}

.sd-workbench-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.sd-workbench-side .sd-workbench-access-grid {
  grid-template-columns: 1fr;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 64%, transparent);
  padding-bottom: 12px;
}

.sd-workbench-access-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  align-items: center;
  min-width: 0;
  background: var(--sd-fill-well);
  padding: 9px;
}

.sd-workbench-access-label {
  grid-column: 1 / -1;
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-workbench-access-item strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-workbench-access-item > .sd-workbench-rail-state {
  justify-self: end;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
}

/* data-tone mirror for access items (no active group — they never show in-flight). */
.sd-workbench-access-item > .sd-workbench-rail-state[data-tone="ok"] {
  color: var(--sd-sage);
}

.sd-workbench-access-item > .sd-workbench-rail-state[data-tone="neutral"] {
  color: var(--sd-tone-neutral-fg);
}

.sd-workbench-access-item > .sd-workbench-rail-state[data-tone="warn"] {
  color: var(--sd-warning);
}

.sd-workbench-access-item > .sd-workbench-rail-state[data-tone="stopped"] {
  color: var(--sd-danger);
}

.sd-workbench-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  overflow: hidden;
  background: color-mix(in oklch, var(--sd-paper-strong) 66%, transparent);
}

.sd-workbench-examples {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin-top: 2px;
}

.sd-workbench-examples-head {
  color: var(--sd-subtle);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  text-align: center;
}

.sd-workbench-template {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: transparent;
  color: inherit;
  padding: 10px 11px;
  text-decoration: none;
}

.sd-workbench-template:nth-child(odd) {
  border-right: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-workbench-template:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.sd-workbench-template:hover {
  background: color-mix(in oklch, var(--sd-accent-soft) 14%, transparent);
}

.sd-workbench-template strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-workbench-template p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
}

.sd-home-health-facts {
  display: grid;
  gap: 0;
  background: color-mix(in oklch, var(--sd-paper-strong) 74%, transparent);
  overflow: hidden;
}

.sd-home-health-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  padding: 9px 10px;
}

.sd-home-health-facts > div:last-child {
  border-bottom: 0;
}

.sd-home-health-facts > div > span:first-child {
  grid-column: 1 / -1;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-home-health-facts strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-home-receipt-list {
  display: grid;
  gap: 0;
  min-width: 0;
  background: color-mix(in oklch, var(--sd-paper-strong) 76%, transparent);
  overflow: hidden;
}

.sd-home-receipt-package {
  display: grid;
  gap: 10px;
  min-width: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  padding: 12px;
}

.sd-home-receipt-package:last-child {
  border-bottom: 0;
}

.sd-home-receipt-package header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.sd-home-receipt-package header > div:first-child {
  min-width: 0;
}

.sd-home-receipt-package h3 {
  color: var(--sd-ink);
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-title);
  font-weight: 600;
  line-height: 1.24;
}

.sd-home-receipt-package h3 a {
  color: inherit;
  text-decoration: none;
}

.sd-home-receipt-package h3 a:hover {
  color: var(--sd-accent);
}

.sd-home-receipt-package p {
  color: var(--sd-muted);
  line-height: 1.4;
}

.sd-home-output-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  background: color-mix(in oklch, var(--sd-surface-muted) 62%, transparent);
  padding: 10px;
}

.sd-home-output-preview-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.sd-home-output-preview-head span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

.sd-home-output-preview-head strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.2;
  text-align: right;
}

.sd-home-output-preview-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  min-width: 0;
}

.sd-home-output-preview-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.sd-home-output-preview-media {
  display: grid;
  width: 54px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  background: var(--sd-paper-strong);
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}

.sd-home-output-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-home-output-preview-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sd-home-output-preview-copy strong,
.sd-home-output-preview-copy small {
  overflow-wrap: anywhere;
}

.sd-home-output-preview-copy strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.24;
}

.sd-home-output-preview-copy small {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.25;
}

.sd-home-artifact-list {
  display: grid;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}

.sd-home-artifact-list a {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  color: inherit;
  padding: 8px 10px;
  text-decoration: none;
}

.sd-home-artifact-list a:last-child {
  border-bottom: 0;
}

.sd-home-artifact-list strong,
.sd-home-artifact-list span {
  overflow-wrap: anywhere;
}

.sd-home-artifact-list strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.25;
}

.sd-home-artifact-list span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.25;
  text-align: right;
}

.sd-home-receipt-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 0;
}

.sd-home-receipt-facts dt {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.sd-home-receipt-facts dd {
  margin: 2px 0 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-variant-numeric: tabular-nums;
  line-height: 1.24;
}

.sd-home-receipt-package .sd-output-destination-controls {
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  padding-top: 9px;
}

.sd-home-receipt-package .sd-output-destination-label {
  font-weight: 700;
  text-transform: none;
}

.sd-home-attention-overflow {
  margin-top: 4px;
}

.sd-page-work-area {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sd-page-work-area.has-side-rail {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
  align-items: start;
}

.sd-page-chrome-index .sd-page-work-area.has-side-rail {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.3fr);
}

/* Inspect-detail surfaces (run detail, agent detail): when a tab hides the side
   rail, the primary fills the width — aligning with the full-width header/tabs —
   up to a readable ceiling, instead of the old narrow centered column that left
   a large gutter and sat inset from its own tabs. Switching to/from a tab that
   has the side rail changes the content measure (the rail trades ~26% of the
   width); that small reflow is accepted in favour of using the space. Scoped to
   the two inspect surfaces by page class — Manage surfaces stay full width. */
.sd-run-detail-page .sd-page-work-area:not(.has-side-rail) .sd-page-primary,
.sd-agent-detail-page .sd-page-work-area:not(.has-side-rail) .sd-page-primary {
  max-width: 1600px;
}

.sd-page-primary {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sd-page-side-rail {
  position: sticky;
  top: 18px;
  align-self: start;
}

.sd-page-side-rail-review-first {
  order: 0;
}

.sd-side-disclosure {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-side-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.sd-side-summary {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  padding: 11px 12px;
}

.sd-page-side-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-mobile-filter-drawer,
.sd-mobile-review-panel,
.sd-mobile-review-disclosure {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-mobile-draft-submit {
  display: none;
}

.sd-mobile-filter-summary,
.sd-mobile-review-summary {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  cursor: pointer;
  list-style: none;
  padding: 11px 12px;
}

.sd-mobile-filter-summary::-webkit-details-marker,
.sd-mobile-review-summary::-webkit-details-marker {
  display: none;
}

.sd-mobile-filter-summary > span,
.sd-mobile-review-summary > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sd-mobile-filter-summary small,
.sd-mobile-review-summary small {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 600;
  line-height: 1.3;
}

.sd-mobile-filter-count {
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-surface) 78%, var(--sd-paper-strong));
  color: var(--sd-muted);
  flex: 0 0 auto;
  font-size: var(--sd-text-label);
  font-weight: 700;
  padding: 4px 8px;
}

.sd-mobile-filter-content,
.sd-mobile-review-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-mobile-review-actions-slot {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-mobile-filter-drawer:not([open]) > .sd-mobile-filter-content,
.sd-mobile-review-disclosure:not([open]) > .sd-mobile-review-content {
  display: grid;
}

/* On desktop the drawer/disclosure summary toggle is hidden, so the <details>
   stays closed even though its rail content should show. The display:grid above
   gives that content a layout box, but modern engines still skip painting a
   closed <details>'s slot — reveal it explicitly. The ≤1050px (mobile) rules
   collapse the content child with display:none, so this stays desktop-only. */
.sd-mobile-filter-drawer::details-content,
.sd-mobile-review-disclosure::details-content {
  content-visibility: visible;
}

.sd-mobile-review-panel {
  position: sticky;
  top: 18px;
  align-self: start;
}

.sd-launch-side-disclosure[open] > .sd-page-side-content {
  max-height: min(760px, calc(100vh - 180px));
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.sd-page-side-rail .sd-list-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.sd-page-side-rail .sd-actions,
.sd-page-side-rail .sd-page-actions {
  justify-content: flex-start;
}

.sd-page-side-rail > .sd-panel,
.sd-page-side-rail > .sd-v4-context-rail {
  background: color-mix(in oklch, var(--sd-surface) 92%, var(--sd-paper));
}

.sd-page-diagnostics-region {
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 74%, transparent);
  padding-top: 2px;
}

.sd-composer-layout,
.sd-workroom-layout {
  display: grid;
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.sd-composer-layout > *,
.sd-workroom-layout > * {
  min-width: 0;
}

.sd-composer-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.36fr);
}

.sd-launch-recipe.is-choosing-agent {
  grid-template-columns: minmax(0, 1fr);
}

.sd-launch-task-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-launch-task-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 82%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-paper-strong) 86%, transparent);
}

.sd-launch-task-step span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-ink);
  color: var(--sd-paper);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1;
}

.sd-launch-task-step strong {
  min-width: 0;
  font-size: var(--sd-text-body);
  line-height: 1.2;
}

.sd-launch-task-step p {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sd-launch-task-step.is-active {
  border-color: color-mix(in oklch, var(--sd-accent) 34%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent) 11%, var(--sd-paper-strong));
}

.sd-launch-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.sd-launch-mode-option {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  background: var(--sd-paper-strong);
  cursor: pointer;
}

.sd-launch-mode-option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.sd-launch-mode-option strong {
  font-size: var(--sd-text-heading);
  line-height: 1.2;
}

.sd-launch-mode-option p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.36;
}

.sd-launch-mode-option.is-selected {
  border-color: color-mix(in oklch, var(--sd-accent) 42%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent) 12%, var(--sd-paper-strong));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sd-accent) 26%, transparent);
}

.sd-launch-task-examples {
  background: color-mix(in oklch, var(--sd-surface-muted) 46%, transparent);
  box-shadow: none;
  gap: 0;
  min-width: 0;
  padding: 10px 12px;
}

.sd-launch-task-examples summary {
  gap: 8px;
}

.sd-launch-task-examples summary strong {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  margin-left: auto;
  text-align: right;
}

.sd-launch-task-example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}

.sd-launch-task-example {
  display: grid;
  gap: 4px;
  min-width: 0;
  width: 100%;
  padding: 10px;
  background: var(--sd-fill-glass);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.sd-launch-task-example:hover,
.sd-launch-task-example:focus-visible {
  border-color: var(--sd-line-stronger);
  box-shadow: var(--sd-shadow-soft);
}

.sd-launch-task-example.is-selected {
  border-color: color-mix(in oklch, var(--sd-accent) 46%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent) 11%, var(--sd-paper-strong));
}

.sd-launch-task-example strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.sd-launch-task-example span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.34;
  overflow-wrap: anywhere;
}

.sd-access-briefing-grid,
.sd-setup-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  min-width: 0;
}

.sd-access-workroom {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.sd-access-workroom > * {
  min-width: 0;
}

.sd-access-workroom .sd-panel {
  align-content: start;
}

.sd-access-workroom .sd-access-briefing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sd-access-workroom .sd-access-briefing-card {
  min-height: 132px;
}

.sd-access-workroom .sd-access-briefing-card dl {
  display: none;
}

.sd-access-more > .sd-grid {
  margin-top: 14px;
}

.sd-setup-subarea .sd-page-attention-rail {
  display: none;
}

[data-testid="setup-repair"]:not(.sd-setup-subarea) .sd-page-meta-strip dt,
[data-testid="setup-repair"]:not(.sd-setup-subarea) .sd-setup-node-main span,
[data-testid="setup-repair"]:not(.sd-setup-subarea) .sd-setup-node-meta small {
  color: var(--sd-muted);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-credential-vaults-workroom {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.82fr);
  min-width: 0;
}

.sd-credential-vaults-workroom > * {
  min-width: 0;
}

.sd-credential-vaults-workroom .sd-panel {
  align-content: start;
}

.sd-credential-scope-warning {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in oklch, var(--sd-warning) 46%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-warn-soft) 86%, transparent);
  color: var(--sd-ink);
  padding: 13px;
}

.sd-credential-scope-warning strong,
.sd-credential-field-note strong,
.sd-section-heading h3 {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

.sd-credential-scope-warning p,
.sd-credential-field-note p,
.sd-section-heading p {
  color: var(--sd-muted);
  line-height: 1.42;
}

.sd-credential-vault-table,
.sd-credential-table {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sd-credential-table-head,
.sd-credential-vault-row,
.sd-credential-row,
.sd-vault-credential-row {
  display: grid;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sd-credential-table-head {
  grid-template-columns: minmax(0, 1.5fr) minmax(110px, 0.76fr) minmax(90px, 0.5fr) auto;
  padding: 0 12px;
  color: var(--sd-subtle);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sd-credential-vault-row,
.sd-credential-row,
.sd-vault-credential-row {
  grid-template-columns: minmax(0, 1.5fr) minmax(110px, 0.76fr) minmax(90px, 0.5fr) auto;
  background: var(--sd-fill-glass);
  padding: 12px;
}

.sd-credential-vault-table .sd-credential-table-head,
.sd-credential-vault-row,
.sd-vault-credential-table .sd-credential-table-head,
.sd-vault-credential-row {
  grid-template-columns:
    minmax(0, 1.36fr) minmax(94px, 0.52fr) minmax(118px, 0.62fr)
    minmax(112px, 0.52fr) auto;
}

.sd-credential-vault-table .sd-credential-table-head,
.sd-credential-vault-row {
  grid-template-columns:
    minmax(190px, 1fr) minmax(72px, 0.32fr) minmax(82px, auto)
    minmax(74px, 0.32fr) minmax(72px, max-content);
  gap: 8px;
}

.sd-vault-credential-table .sd-credential-table-head,
.sd-vault-credential-row {
  grid-template-columns:
    minmax(116px, 1fr) minmax(72px, 0.34fr) minmax(94px, 0.44fr)
    minmax(64px, auto) minmax(64px, max-content);
  gap: 6px;
}

.sd-credential-vault-row > *,
.sd-credential-row > *,
.sd-vault-credential-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sd-credential-vault-row > span,
.sd-credential-row > span,
.sd-vault-credential-row > span {
  line-height: 1.25;
  white-space: normal;
}

.sd-credential-vault-row > span,
.sd-credential-vault-row .sd-button {
  white-space: nowrap;
}

.sd-vault-credential-row > span,
.sd-vault-credential-row .sd-button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-credential-vault-row strong,
.sd-credential-row strong,
.sd-vault-credential-row strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-credential-vault-row p,
.sd-credential-row p,
.sd-vault-credential-row p {
  margin-top: 3px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.36;
}

.sd-section-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-section-heading-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-section-heading.has-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sd-credential-action-rail {
  align-content: start;
}

.sd-credential-action-rail > .sd-panel:first-child {
  border-color: color-mix(in oklch, var(--sd-accent) 30%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-paper-strong) 92%, var(--sd-accent) 8%);
}

.sd-credential-inline-more,
.sd-credential-named-setup,
.sd-credential-field-more {
  box-shadow: none;
}

.sd-credential-inline-more {
  background: color-mix(in oklch, var(--sd-surface-muted) 54%, transparent);
}

.sd-credential-inline-more > summary,
.sd-credential-named-setup > summary,
.sd-credential-field-more > summary {
  gap: 8px;
}

.sd-credential-state {
  justify-content: flex-start;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sd-panel-actions .sd-credential-state,
.sd-credential-inline-more > summary .sd-credential-state,
.sd-credential-named-setup > summary .sd-credential-state,
.sd-credential-field-more > summary .sd-credential-state,
.sd-credential-vaults-more > summary .sd-credential-state {
  justify-content: flex-end;
  margin-left: auto;
  text-align: right;
}

.sd-credential-inline-more > .sd-stack,
.sd-credential-named-setup > .sd-stack,
.sd-credential-field-more > .sd-credential-form-fields {
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 66%, transparent);
}

.sd-credential-action-rail .sd-credential-field-more {
  background: color-mix(in oklch, var(--sd-surface-muted) 50%, transparent);
  padding: 10px;
}

.sd-credential-action-rail .sd-credential-form-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sd-credential-action-rail .sd-credential-field-more .sd-credential-form-fields {
  grid-template-columns: 1fr;
}

.sd-credential-create-form .sd-actions {
  justify-content: flex-end;
}

.sd-credential-form-fields,
.sd-credential-form-notes {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.sd-credential-form-fields > *,
.sd-credential-form-notes > * {
  min-width: 0;
}

.sd-credential-form-field,
.sd-credential-form-field select {
  min-width: 0;
}

.sd-credential-form-field.is-tier select {
  width: 100%;
}

.sd-credential-form-fields > :last-child {
  grid-column: 1 / -1;
}

.sd-credential-field-note {
  display: grid;
  gap: 3px;
  background: var(--sd-paper-strong);
  padding: 11px;
}

.sd-credential-vaults-more > .sd-grid {
  margin-top: 12px;
}

.sd-execution-workroom {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.38fr);
}

.sd-execution-workroom > * {
  min-width: 0;
}

.sd-execution-service-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  min-width: 0;
}

.sd-execution-service-card {
  align-content: start;
  background: var(--sd-fill-glass);
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
}

.sd-execution-service-card header {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.sd-execution-service-card h3 {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.25;
  margin: 2px 0 0;
}

.sd-execution-service-card p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.36;
  margin-top: 4px;
}

.sd-execution-service-facts {
  border-top: 1px solid var(--sd-line);
  display: grid;
  gap: 8px;
  margin: 0;
  padding-top: 10px;
}

.sd-execution-service-facts div {
  display: grid;
  gap: 3px;
}

.sd-execution-service-facts dt {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-execution-service-facts dd {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.34;
  margin: 0;
  overflow-wrap: anywhere;
}

.sd-execution-service-form {
  gap: 9px;
}

.sd-execution-service-card > form:last-child .sd-button,
.sd-execution-service-form .sd-button {
  justify-content: center;
  width: 100%;
}

.sd-execution-credentials-detail > .sd-stack {
  margin-top: 10px;
}

.sd-setup-tail-workroom {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.38fr);
}

.sd-setup-tail-workroom > * {
  min-width: 0;
}

.sd-setup-posture-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  min-width: 0;
}

.sd-setup-posture-summary strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.3;
}

.sd-setup-posture-summary p {
  color: var(--sd-muted);
  line-height: 1.45;
  margin: 0;
}

.sd-setup-fact-strip {
  background: color-mix(in oklch, var(--sd-paper-strong) 92%, transparent);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 14px;
  overflow: hidden;
}

.sd-setup-fact-strip .sd-data-row {
  border: 0;
  border-right: 1px solid var(--sd-line);
  border-radius: 0;
  background: transparent;
}

.sd-setup-fact-strip .sd-data-row:last-child {
  border-right: 0;
}

.sd-setup-budget-current {
  display: grid;
  gap: 0;
  margin-bottom: 12px;
  overflow: hidden;
}

.sd-setup-budget-current .sd-data-row {
  border: 0;
  border-bottom: 1px solid var(--sd-line);
  border-radius: 0;
}

.sd-setup-budget-current .sd-data-row:last-child {
  border-bottom: 0;
}

.sd-setup-decision-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 14px 0;
  min-width: 0;
}

.sd-setup-decision-card {
  background: var(--sd-fill-glass);
  color: inherit;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  text-decoration: none;
}

.sd-setup-link-card {
  border: 0;
  border-bottom: 1px solid var(--sd-line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  text-decoration: none;
}

.sd-setup-link-card:nth-child(2n + 1) {
  border-right: 1px solid var(--sd-line);
}

.sd-setup-link-card:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.sd-setup-decision-card strong,
.sd-setup-link-card strong {
  color: var(--sd-ink);
  line-height: 1.28;
}

.sd-setup-decision-card p,
.sd-setup-link-card p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.36;
  margin: 0;
}

.sd-setup-link-card:hover {
  background: var(--sd-fill-glass);
  color: var(--sd-ink);
}

.sd-setup-link-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  min-width: 0;
  overflow: hidden;
}

.sd-browser-sessions-workroom {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.04fr) minmax(380px, 0.86fr);
  min-width: 0;
}

.sd-browser-sessions-workroom > * {
  min-width: 0;
}

.sd-browser-sessions-workroom .sd-panel {
  align-content: start;
}

.sd-browser-mode-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  margin-top: 14px;
  min-width: 0;
}

.sd-browser-mode-card {
  align-content: start;
  background: var(--sd-fill-glass);
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
}

.sd-browser-mode-card.is-primary {
  background: color-mix(in oklch, var(--sd-accent) 11%, var(--sd-paper-strong));
  border-color: color-mix(in oklch, var(--sd-accent) 36%, var(--sd-line));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sd-accent) 18%, transparent);
}

.sd-browser-mode-card header {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sd-browser-state-label {
  justify-self: start;
}

.sd-browser-mode-card strong {
  color: var(--sd-ink);
  line-height: 1.25;
}

.sd-browser-mode-card p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.36;
  margin-top: 4px;
}

.sd-browser-mode-card .sd-button {
  justify-content: center;
  width: 100%;
}

.sd-browser-mode-meta {
  border-top: 1px solid var(--sd-line);
  color: var(--sd-subtle);
  display: grid;
  gap: 5px;
  font-size: var(--sd-text-body-sm);
  line-height: 1.3;
  padding-top: 9px;
}

.sd-browser-connector-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  min-width: 0;
}

.sd-browser-connector-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.sd-browser-connector-summary {
  min-width: 0;
}

.sd-browser-connector-summary strong {
  display: block;
  overflow-wrap: break-word;
}

.sd-browser-connector-summary p {
  margin-top: 4px;
  overflow-wrap: normal;
}

.sd-browser-connector-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.sd-browser-connector-rename {
  min-width: min(100%, 260px);
}

.sd-browser-connector-rename[open] {
  flex-basis: 100%;
}

.sd-browser-connector-rename .sd-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.sd-browser-connector-actions input[name="browser_connector[display_name]"] {
  min-width: 0;
  width: 100%;
}

.sd-browser-pairing-status {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  min-width: 0;
}

.sd-browser-pairing-status[data-state="working"] {
  color: var(--sd-ink);
}

.sd-browser-pairing-status[data-state="ok"] {
  color: var(--sd-sage);
}

.sd-browser-pairing-status[data-state="error"] {
  color: var(--sd-danger);
}

.sd-browser-handoff-detail {
  margin-top: 12px;
}

.sd-browser-handoff-detail .sd-browser-action-log {
  margin-top: 10px;
}

.sd-browser-session-table {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sd-browser-session-head,
.sd-browser-session-row {
  display: grid;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sd-browser-session-head {
  grid-template-columns:
    minmax(0, 1.38fr) minmax(84px, 0.52fr) minmax(100px, 0.54fr)
    minmax(110px, 0.62fr) auto;
  padding: 0 12px;
  color: var(--sd-subtle);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sd-browser-session-row {
  grid-template-columns:
    minmax(0, 1.38fr) minmax(84px, 0.52fr) minmax(100px, 0.54fr)
    minmax(110px, 0.62fr) auto;
  background: var(--sd-fill-glass);
  padding: 12px;
}

.sd-browser-session-row > * {
  min-width: 0;
}

.sd-browser-session-row p {
  margin-top: 3px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.34;
}

.sd-browser-action-log {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sd-browser-action-log h3 {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.25;
}

.sd-browser-action-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  background: var(--sd-paper-strong);
  padding: 11px;
}

.sd-browser-action-row > span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 36%, var(--sd-line));
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-accent) 12%, transparent);
  color: var(--sd-accent-ink);
  font-size: var(--sd-text-label);
  font-weight: 700;
}

.sd-browser-action-row strong {
  color: var(--sd-ink);
}

.sd-browser-action-row p {
  color: var(--sd-muted);
  line-height: 1.38;
}

.sd-browser-live-shot {
  overflow: hidden;
  background: var(--sd-fill-glass);
  min-width: 0;
}

.sd-browser-urlbar {
  min-height: 34px;
  border-bottom: 1px solid var(--sd-line);
  background: color-mix(in oklch, var(--sd-ink) 8%, var(--sd-paper-strong));
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
  padding: 9px 12px;
}

.sd-browser-webpage {
  display: grid;
  gap: 11px;
  min-height: 330px;
  padding: 28px 20px;
  background: var(--sd-artifact-webpage);
}

.sd-browser-hero-block,
.sd-browser-webpage > span {
  display: block;
  border-radius: var(--sd-radius);
}

.sd-browser-hero-block {
  min-height: 128px;
  background: linear-gradient(135deg, var(--sd-artifact-grad-a), var(--sd-artifact-grad-b));
}

.sd-browser-webpage > span {
  height: 10px;
  background: var(--sd-artifact-divider);
}

.sd-browser-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.sd-browser-profile-more > .sd-grid {
  margin-top: 12px;
}

.sd-browser-profile-form-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.sd-browser-profile-form-fields > * {
  min-width: 0;
}

.sd-browser-profile-form-fields > :nth-child(3),
.sd-browser-profile-form-fields > :nth-child(4) {
  grid-column: 1 / -1;
}

@media (max-width: 1240px) {
  .sd-credential-vaults-workroom {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .sd-setup-tail-workroom,
  .sd-execution-workroom,
  .sd-browser-sessions-workroom {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .sd-credential-table-head {
    display: none;
  }

  .sd-credential-vault-row,
  .sd-credential-row,
  .sd-vault-credential-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-setup-fact-strip,
  .sd-setup-decision-list,
  .sd-setup-link-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-setup-link-card,
  .sd-setup-link-card:nth-child(2n + 1),
  .sd-setup-link-card:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--sd-line);
  }

  .sd-setup-link-card:last-child {
    border-bottom: 0;
  }

  .sd-setup-fact-strip .sd-data-row {
    border-right: 0;
    border-bottom: 1px solid var(--sd-line);
  }

  .sd-setup-fact-strip .sd-data-row:last-child {
    border-bottom: 0;
  }

  .sd-credential-form-fields,
  .sd-credential-form-notes {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-credential-form-fields > :last-child {
    grid-column: auto;
  }

  .sd-execution-service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-execution-service-card header {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-browser-session-head {
    display: none;
  }

  .sd-browser-session-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-browser-live-shot {
    max-width: 100%;
  }

  .sd-browser-webpage {
    min-height: 260px;
    padding: 18px 14px;
  }

  .sd-browser-profile-form-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-browser-profile-form-fields > :nth-child(3),
  .sd-browser-profile-form-fields > :nth-child(4) {
    grid-column: auto;
  }

  .sd-credential-create-form .sd-actions {
    justify-content: stretch;
  }

  .sd-credential-create-form .sd-button {
    width: 100%;
    justify-content: center;
  }
}

.sd-access-briefing-card,
.sd-setup-access-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  background: var(--sd-paper-strong);
  padding: 11px;
}

.sd-access-briefing-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.sd-access-briefing-head .sd-status,
.sd-launch-review-rail .sd-status {
  white-space: normal;
  overflow-wrap: anywhere;
}

.sd-access-state {
  justify-content: flex-end;
  margin-left: auto;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sd-access-briefing-head > .sd-access-state:first-child {
  margin-left: 0;
  text-align: left;
}

.sd-launch-review-rail .sd-row-between {
  align-items: start;
  flex-wrap: wrap;
}

.sd-access-briefing-card strong,
.sd-setup-access-card strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.sd-access-briefing-card p,
.sd-setup-access-card p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.sd-setup-browser-flow {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.sd-setup-browser-flow article {
  background: var(--sd-paper-strong);
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
}

.sd-setup-browser-flow strong {
  color: var(--sd-ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-setup-browser-flow p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.sd-access-briefing-card dl {
  display: grid;
  gap: 5px;
  margin: 2px 0 0;
}

.sd-access-briefing-card dl div {
  display: grid;
  gap: 2px;
}

.sd-access-briefing-card dt {
  color: var(--sd-subtle);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-access-briefing-card dd {
  min-width: 0;
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sd-launch-resource-brief {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 10px;
  background: var(--sd-paper-soft);
  padding: 12px;
}

.sd-launch-resource-brief-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.sd-launch-resource-brief-head strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

.sd-launch-resource-brief-head p {
  margin: 4px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.4;
}

.sd-launch-resource-brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  min-width: 0;
}

.sd-launch-resource-brief-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  background: var(--sd-paper-strong);
  padding: 10px;
}

.sd-launch-resource-brief-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.sd-launch-resource-brief-card-head strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.sd-launch-resource-brief-card p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sd-setup-access-card a {
  color: var(--sd-link);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  text-decoration: none;
}

.sd-launch-review-rail {
  position: sticky;
  top: 18px;
  align-self: start;
}

.sd-launch-review-rail .sd-preview-rail {
  position: static;
}

.sd-launch-review-detail {
  gap: 0;
  border-color: color-mix(in oklch, var(--sd-line) 76%, transparent);
  background: color-mix(in oklch, var(--sd-surface-muted) 54%, transparent);
  box-shadow: none;
}

.sd-launch-review-detail > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.sd-launch-review-detail-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.sd-launch-review-detail-facts {
  min-width: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sd-launch-review-detail > summary strong {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

.sd-launch-review-detail-body {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.sd-launch-review-detail-body > .sd-panel {
  box-shadow: none;
}

.sd-launch-review-detail [data-testid="launch-preview-rail"] .sd-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  border-radius: var(--sd-radius);
}

.sd-launch-review-detail [data-testid="launch-preview-rail"] .sd-data-row {
  grid-template-columns: minmax(96px, 0.38fr) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  border-top: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 66%, transparent);
  padding: 7px 9px;
}

.sd-launch-review-detail [data-testid="launch-preview-rail"] .sd-data-row:last-child {
  border-bottom: 0;
}

.sd-launch-review-detail [data-testid="launch-preview-rail"] .sd-data-row strong {
  font-size: var(--sd-text-body-sm);
  line-height: 1.24;
}

.sd-launch-review-detail .sd-workbench-rail-state {
  justify-self: end;
  white-space: normal;
  text-align: right;
}

.sd-launch-checkpoint-panel {
  display: grid;
  gap: 0;
  overflow: hidden;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 82%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-paper-strong) 56%, transparent);
}

.sd-launch-checkpoint-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 10px;
}

.sd-launch-checkpoint-head h2 {
  margin: 3px 0 0;
  color: var(--sd-ink);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.sd-launch-checkpoint-head p {
  margin: 5px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.36;
}

.sd-launch-checkpoint-list {
  display: grid;
  gap: 0;
  min-width: 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-launch-review-detail .sd-launch-checkpoint-list {
  max-height: min(62vh, 620px);
  overflow: auto;
  scrollbar-color: color-mix(in oklch, var(--sd-muted) 38%, transparent) transparent;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.sd-launch-checkpoint-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 10px;
}

.sd-launch-checkpoint-row + .sd-launch-checkpoint-row {
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
}

.sd-launch-checkpoint-row strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.24;
}

.sd-launch-checkpoint-row p {
  margin: 4px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.34;
}

.sd-launch-checkpoint-row .sd-data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
  border-radius: var(--sd-radius);
}

.sd-launch-checkpoint-row .sd-data-grid > div {
  display: grid;
  grid-template-columns: minmax(80px, 0.44fr) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 64%, transparent);
  padding: 7px 8px;
}

.sd-launch-checkpoint-row .sd-data-grid > div:last-child {
  border-bottom: 0;
}

.sd-launch-review-detail .sd-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  border-radius: var(--sd-radius);
}

.sd-launch-review-detail .sd-list-row {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 9px 10px;
}

.sd-launch-review-detail .sd-list-row + .sd-list-row {
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 66%, transparent);
}

.sd-launch-review-detail .sd-access-briefing-card dl {
  display: none;
}

.sd-launch-options-disclosure .sd-access-briefing-card dl {
  display: none;
}

.sd-launch-review-detail .sd-launch-consequence-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  border-radius: var(--sd-radius);
  max-height: min(62vh, 620px);
  overflow-y: auto;
  scrollbar-color: color-mix(in oklch, var(--sd-muted) 38%, transparent) transparent;
  scrollbar-width: thin;
}

.sd-launch-review-detail .sd-launch-consequence-card {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sd-launch-review-detail .sd-launch-consequence-card + .sd-launch-consequence-card {
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 66%, transparent);
}

@media (max-width: 820px) {
  .sd-launch-checkpoint-head,
  .sd-launch-checkpoint-row {
    grid-template-columns: 1fr;
  }

  .sd-launch-review-detail .sd-workbench-rail-state {
    justify-self: start;
    text-align: left;
  }

  .sd-launch-checkpoint-row .sd-data-grid {
    grid-template-columns: 1fr;
  }

  .sd-launch-checkpoint-row .sd-data-grid > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.sd-grid.two.sd-launch-playbook-route-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.sd-workroom-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
}

.sd-workroom-layout.is-full-width,
.sd-workroom-layout.is-run-steps {
  grid-template-columns: minmax(0, 1fr);
}

.sd-approval-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sd-approval-queue-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  background: color-mix(in oklch, var(--sd-accent-soft) 22%, var(--sd-paper-strong));
  padding: 14px;
}

.sd-approval-queue-note strong {
  display: block;
  margin-top: 2px;
}

.sd-approval-queue-note p {
  margin-top: 5px;
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-approval-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sd-approval-filters > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sd-approval-filters span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Status renders as one joined segmented control instead of loose pills. */
.sd-approval-status-toggle {
  display: inline-flex;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
  overflow: hidden;
}

.sd-approval-status-toggle .sd-filter-pill {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sd-approval-status-toggle .sd-filter-pill + .sd-filter-pill {
  border-left: 1px solid var(--sd-line);
}

.sd-approval-status-toggle .sd-filter-pill.is-active {
  background: color-mix(in oklch, var(--sd-accent-soft) 38%, var(--sd-paper-strong));
  color: var(--sd-ink);
}

.sd-approval-filters form .sd-field {
  min-width: 0;
}

[data-testid="approvals-page-chrome"] .sd-page-meta-strip dt,
[data-testid="approvals-page-chrome"] .sd-v4-meta dt,
[data-testid="approvals-page-chrome"] .sd-v4-approval-source span,
[data-testid="approvals-page-chrome"] .sd-v4-approval-evidence > span,
[data-testid="approvals-page-chrome"] .sd-v4-private-disclosure > span,
[data-testid="approvals-page-chrome"] .sd-v4-revision-path > span,
[data-testid="approvals-page-chrome"] .sd-approval-filters span {
  color: var(--sd-muted);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-filter-pill {
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  font-weight: 700;
  padding: 6px 10px;
  text-decoration: none;
}

.sd-filter-pill:hover {
  border-color: var(--sd-line-stronger);
  color: var(--sd-ink);
}

.sd-filter-pill.is-active {
  border-color: color-mix(in oklch, var(--sd-accent) 48%, var(--sd-line));
  color: var(--sd-ink);
}

.sd-filter-pill.is-active {
  background: color-mix(in oklch, var(--sd-accent-soft) 38%, var(--sd-paper-strong));
}

.sd-approval-inbox-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.sd-approval-inbox-layout.is-decision-first {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
}

.sd-decision-queue {
  display: grid;
  gap: 8px;
}

.sd-decision-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  padding: 11px;
  text-decoration: none;
}

.sd-decision-row:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
}

.sd-decision-row.is-selected {
  /* Selection uses the accent affordance, matching the tab/filter-pill
     selection elsewhere — not the legacy info-blue --sd-teal alias. */
  border-color: color-mix(in oklch, var(--sd-accent) 44%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent-soft) 24%, var(--sd-paper-strong));
}

.sd-decision-row strong,
.sd-decision-row p,
.sd-decision-row small {
  overflow-wrap: anywhere;
}

.sd-decision-row small {
  display: block;
  margin-top: 2px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
}

.sd-decision-row p {
  margin-top: 6px;
  color: var(--sd-muted);
  line-height: 1.4;
}

.sd-decision-row .sd-approval-row-state {
  justify-self: start;
}

.sd-decision-row-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  background: var(--sd-fill-well);
  color: var(--sd-teal);
}

.sd-decision-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  background: var(--sd-fill-well);
  padding: 12px;
}

.sd-decision-summary span,
.sd-evidence-list > span,
.sd-decision-rail span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-decision-summary p,
.sd-evidence-list p,
.sd-decision-rail p {
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-decision-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sd-evidence-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.sd-evidence-list ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sd-action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sd-comment-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.sd-comment-mentions .sd-chip {
  border-color: color-mix(in oklch, var(--sd-blue) 35%, var(--sd-line));
  color: color-mix(in oklch, var(--sd-blue) 75%, var(--sd-ink));
}

.sd-decision-rail {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 28%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-accent-soft) 24%, var(--sd-paper-strong));
  padding: 12px;
}

.sd-decision-answer-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: end;
  width: 100%;
}

/* Revision unavailable: a plain inline reason, not a dead disabled button. */
.sd-decision-revise-note {
  margin: 8px 0 0;
  font-size: var(--sd-text-body-sm);
  color: var(--sd-muted);
}

/* A run-level question (ask_user_question) reads as a question, not an approval. */
.sd-elicitation {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.sd-elicitation-copy,
.sd-v4-approval-copy,
.sd-v4-approval-detail-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-height: min(42vh, 360px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  white-space: pre-wrap;
}

.sd-elicitation h3 {
  margin: 0;
  font-size: var(--sd-text-title);
  line-height: 1.3;
}

.sd-elicitation-copy p {
  margin: 0;
}

.sd-bounded-private-detail {
  max-height: 320px;
  overflow: auto;
}

.sd-private-detail {
  gap: 12px;
}

.sd-v4-approval-card,
.sd-v4-approval-card > *,
.sd-v4-approval-card header > div:first-child,
.sd-v4-approval-detail,
.sd-v4-approval-evidence,
.sd-v4-approval-evidence li,
.sd-elicitation,
.sd-elicitation *,
.sd-private-detail,
.sd-private-detail > * {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.sd-private-detail .sd-pre {
  max-width: 100%;
}

.sd-private-detail__header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.sd-private-detail__header > div {
  display: grid;
  gap: 4px;
  min-width: min(100%, 260px);
}

.sd-private-detail__header strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

.sd-private-detail__header p {
  max-width: 62ch;
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-heading);
  line-height: 1.45;
}

.sd-browser-viewer {
  display: grid;
  gap: 12px;
}

.sd-browser-viewer iframe {
  width: 100%;
  min-height: 520px;
  background: var(--sd-paper-strong);
}

.sd-panel {
  display: grid;
  gap: var(--sd-space-4);
  min-width: 0;
  padding: var(--sd-pad-panel);
}

.sd-panel-subtle {
  /* Quiet tinted region, not a card — the fill does the grouping, so the
     border and lift go (transparent border keeps the 1px box: no layout shift). */
  background: var(--sd-fill-well);
  border-color: transparent;
  box-shadow: none;
}

.sd-panel-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.sd-panel-heading > * {
  min-width: 0;
}

.sd-panel-heading h2 {
  font-size: var(--sd-text-heading);
  line-height: var(--sd-leading-snug);
  letter-spacing: 0;
}

.sd-panel-actions,
.sd-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.sd-launch-review-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.sd-launch-review-actions .sd-button:first-child {
  justify-content: center;
}

.sd-launch-inline-mobile-actions {
  display: none;
}

.sd-launch-disabled-inline {
  border: 1px solid color-mix(in oklch, var(--sd-warning) 34%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-warning) 13%, var(--sd-paper-strong));
  color: var(--sd-muted);
  line-height: 1.45;
  margin: 0;
  padding: 10px 12px;
}

.sd-launch-default-path {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 34%, var(--sd-line));
  border-radius: var(--sd-radius);
  background:
    linear-gradient(
      135deg,
      color-mix(in oklch, var(--sd-accent) 12%, transparent),
      transparent 68%
    ),
    color-mix(in oklch, var(--sd-paper-strong) 94%, transparent);
}

.sd-launch-default-path strong {
  font-size: var(--sd-text-heading);
  line-height: 1.24;
}

.sd-launch-default-path p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.44;
}

.sd-launch-default-path .sd-actions {
  align-items: stretch;
}

.sd-launch-default-path .sd-actions .sd-button {
  justify-content: center;
}

.sd-launch-primary-form .sd-form-section {
  box-shadow: none;
}

[data-testid="launch-page-chrome"] .sd-page-meta-strip {
  display: none;
}

.sd-launch-map-disclosure,
.sd-launch-options-disclosure {
  gap: 0;
  margin: 10px;
  border-color: color-mix(in oklch, var(--sd-line) 76%, transparent);
  border-radius: var(--sd-radius-lg);
  background: color-mix(in oklch, var(--sd-surface-muted) 56%, transparent);
  box-shadow: none;
}

.sd-launch-map-disclosure > summary,
.sd-launch-options-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.sd-launch-map-disclosure > summary strong,
.sd-launch-options-disclosure > summary strong {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

.sd-launch-map-disclosure .sd-launch-task-map {
  margin-top: 12px;
  padding: 12px 0 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
  border-bottom: 0;
}

.sd-launch-options-body {
  display: grid;
  gap: 0;
  min-width: 0;
  margin-top: 12px;
  overflow: hidden;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
}

.sd-launch-options-body .sd-form-row {
  padding-inline: 0;
}

.sd-compact-launch-disclosure {
  background: color-mix(in oklch, var(--sd-paper-strong) 96%, transparent);
}

.sd-compact-launch-disclosure > summary {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.sd-compact-launch-disclosure > summary span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sd-launch-playbook-prompt {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 28%, var(--sd-line));
  border-radius: var(--sd-radius);
  background:
    linear-gradient(
      135deg,
      color-mix(in oklch, var(--sd-accent) 10%, transparent),
      transparent 62%
    ),
    color-mix(in oklch, var(--sd-paper-strong) 94%, transparent);
}

.sd-launch-playbook-prompt-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-launch-playbook-prompt-copy strong {
  font-size: var(--sd-text-title);
  line-height: 1.25;
}

.sd-launch-playbook-prompt-copy p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.45;
}

@media (max-width: 1050px) {
  .sd-launch-task-map,
  .sd-launch-mode-grid,
  .sd-project-context-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .sd-launch-task-map,
  .sd-launch-mode-grid,
  .sd-project-context-facts,
  .sd-project-context-includes {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-launch-task-step p {
    grid-column: 1 / -1;
  }
}

.sd-launch-disabled-inline strong {
  color: var(--sd-ink);
}

.sd-panel-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-journey-summary {
  color: var(--sd-ink);
  line-height: 1.5;
}

.sd-guide-notice {
  border: 1px solid color-mix(in oklch, var(--sd-accent) 28%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-accent-soft) 24%, var(--sd-paper-strong));
  color: var(--sd-muted);
  line-height: 1.45;
  padding: 10px;
}

.sd-console a:focus-visible,
.sd-console button:focus-visible,
.sd-console input:focus-visible,
.sd-console textarea:focus-visible,
.sd-console select:focus-visible,
.sd-console summary:focus-visible,
.sd-button:focus-visible,
.sd-nav a:focus-visible,
.sd-sidebar-toggle-button:focus-visible,
.sd-filter-pill:focus-visible,
.sd-chip:focus-visible,
.sd-list-row:focus-visible,
.sd-section-tabs a:focus-visible,
.sd-disclosure summary:focus-visible,
.sd-v4-diagnostics summary:focus-visible,
.sd-field input:focus-visible,
.sd-field textarea:focus-visible,
.sd-field select:focus-visible,
.sd-elicitation-copy:focus-visible,
.sd-v4-approval-copy:focus-visible,
.sd-v4-approval-detail-copy:focus-visible,
.sd-session-form button:focus-visible {
  outline: 2px solid var(--sd-focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Overlay — the one sheet/dialog primitive (OverlayComponents.overlay/1).
   Variant --sheet docks right; --dialog centers. Replaces the bespoke
   run-sheet / v4-dialog / proposal-revision backdrops.
--------------------------------------------------------------------------- */
.sd-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  overflow: hidden;
  background: color-mix(in oklch, var(--sd-ink) 38%, transparent);
  backdrop-filter: blur(var(--sd-blur-overlay));
  -webkit-backdrop-filter: blur(var(--sd-blur-overlay));
  animation: sd-overlay-fade 160ms ease-out;
}

.sd-overlay--sheet {
  justify-items: end;
}

.sd-overlay--dialog {
  place-items: center;
  overflow-y: auto;
  padding: 24px;
}

.sd-overlay-dismiss {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.sd-overlay-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--sd-paper);
  border: 1px solid var(--sd-line);
}

.sd-overlay--sheet .sd-overlay-panel {
  width: min(560px, calc(100vw - 24px));
  height: 100dvh;
  max-height: 100dvh;
  border-width: 0 0 0 1px;
  box-shadow: var(--sd-shadow-raised);
  animation: sd-overlay-slide-in 220ms var(--sd-ease-out);
}

.sd-overlay--dialog .sd-overlay-panel {
  width: min(640px, 100%);
  max-height: calc(100dvh - 48px);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow);
  animation: sd-overlay-pop-in 200ms var(--sd-ease-out);
}

.sd-overlay--wide.sd-overlay--dialog .sd-overlay-panel {
  width: min(980px, 100%);
}

.sd-overlay-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid var(--sd-line);
  background: var(--sd-paper-strong);
  padding: 18px 20px;
}

.sd-overlay-header-copy {
  min-width: 0;
}

.sd-overlay-header h2 {
  margin: 0;
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-page-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--sd-ink);
  overflow-wrap: anywhere;
}

.sd-overlay-close {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper);
  color: var(--sd-muted);
  cursor: pointer;
}

.sd-overlay-close:hover {
  color: var(--sd-ink);
  border-color: var(--sd-line-strong);
}

.sd-overlay-body {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px;
  overscroll-behavior: contain;
  scroll-padding-top: 8px;
}

.sd-overlay-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--sd-line);
  background: var(--sd-paper-strong);
  padding: 14px 20px;
}

.sd-overlay--artifact .sd-overlay-panel {
  background: var(--sd-artifact-paper);
  color: var(--sd-artifact-ink);
}

.sd-overlay--artifact .sd-overlay-header {
  border-bottom-color: var(--sd-artifact-divider);
  background: var(--sd-artifact-paper-chrome);
  padding: 20px 24px;
}

.sd-overlay--artifact .sd-overlay-header h2,
.sd-overlay--artifact .sd-artifact-reader-title h3,
.sd-overlay--artifact .sd-markdown-preview,
.sd-overlay--artifact .sd-markdown-preview p,
.sd-overlay--artifact .sd-markdown-preview strong,
.sd-overlay--artifact .sd-markdown-preview em {
  color: var(--sd-artifact-ink);
}

.sd-overlay--artifact .sd-overlay-close {
  border-color: var(--sd-artifact-divider);
  background: var(--sd-artifact-paper-card);
  color: var(--sd-artifact-ink-muted);
}

.sd-overlay--artifact .sd-overlay-body {
  gap: 18px;
  background: var(--sd-artifact-paper);
  padding: 22px 28px 34px;
}

.sd-overlay--artifact .sd-artifact-reader {
  gap: 18px;
}

.sd-overlay--artifact .sd-artifact-reader-header {
  gap: 16px;
}

.sd-overlay--artifact .sd-artifact-reader-title {
  gap: 6px;
}

.sd-overlay--artifact .sd-artifact-reader-title .sd-eyebrow,
.sd-overlay--artifact .sd-artifact-reader-title p,
.sd-overlay--artifact .sd-output-destination-label,
.sd-overlay--artifact .sd-bounded-heading,
.sd-overlay--artifact .sd-markdown-fact span {
  color: var(--sd-artifact-ink-faint);
}

.sd-overlay--artifact .sd-artifact-reader-title h3 {
  font-size: 1.6rem;
  line-height: 1.12;
}

.sd-overlay--artifact .sd-output-destination-controls {
  gap: 8px;
  border: 1px solid var(--sd-artifact-line);
  border-radius: var(--sd-radius);
  background: var(--sd-artifact-paper-card);
  padding: 10px;
}

.sd-overlay--artifact .sd-output-destination-controls .sd-button {
  border-color: var(--sd-artifact-divider);
  background: var(--sd-artifact-paper-chrome);
  color: var(--sd-artifact-ink);
}

.sd-overlay--artifact .sd-artifact-reader-meta {
  border: 1px solid var(--sd-artifact-line);
  border-radius: var(--sd-radius);
  background: var(--sd-artifact-paper-card);
  padding: 10px;
}

.sd-overlay--artifact .sd-bounded {
  border-color: var(--sd-artifact-line);
  background: var(--sd-artifact-paper-card);
  box-shadow: none;
}

.sd-overlay--artifact .sd-bounded-heading {
  border-bottom-color: var(--sd-artifact-line);
  background: var(--sd-artifact-paper-chrome);
}

.sd-overlay--artifact .sd-bounded-body {
  max-height: none;
  overflow: visible;
  padding: 24px;
}

.sd-overlay--artifact .sd-markdown-document {
  gap: 20px;
}

.sd-overlay--artifact .sd-markdown-preview {
  gap: 14px;
  max-width: 72ch;
  font-size: var(--sd-text-title);
  line-height: 1.68;
}

.sd-overlay--artifact .sd-markdown-preview h3 {
  color: var(--sd-artifact-ink);
  font-size: 1.22rem;
}

.sd-overlay--artifact .sd-markdown-list-item {
  padding-left: 18px;
}

.sd-overlay--artifact .sd-markdown-list-item::before,
.sd-overlay--artifact .sd-markdown-list-item.is-ordered::before {
  color: var(--sd-artifact-ink-eyebrow);
}

.sd-overlay--artifact .sd-markdown-inline-link {
  color: var(--sd-artifact-link);
  text-decoration-color: var(--sd-artifact-link-underline);
}

.sd-overlay--artifact .sd-markdown-fact {
  border-bottom-color: var(--sd-artifact-line);
}

.sd-overlay--artifact .sd-markdown-blockquote,
.sd-overlay--artifact .sd-markdown-preview code,
.sd-overlay--artifact .sd-pre {
  border-color: var(--sd-artifact-line);
  background: var(--sd-artifact-paper-chrome);
  color: var(--sd-artifact-ink);
}

@media (max-width: 760px) {
  .sd-overlay--wide.sd-overlay--dialog {
    padding: 12px;
  }

  .sd-overlay--wide.sd-overlay--dialog .sd-overlay-panel {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  .sd-overlay--artifact .sd-overlay-header,
  .sd-overlay--artifact .sd-overlay-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .sd-overlay--artifact .sd-bounded-body {
    padding: 18px;
  }

  .sd-overlay--artifact .sd-markdown-preview {
    font-size: var(--sd-text-heading);
    line-height: 1.62;
  }
}

@keyframes sd-overlay-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sd-overlay-slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes sd-overlay-pop-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Leave choreography — phx-remove applies .sd-overlay-leave for 180ms while
   LiveView tears the overlay down, mirroring the entry animations. */
.sd-overlay-backdrop.sd-overlay-leave {
  animation: sd-overlay-fade-out 180ms ease-in forwards;
}

.sd-overlay--sheet.sd-overlay-leave .sd-overlay-panel {
  animation: sd-overlay-slide-out 180ms var(--sd-ease-out) forwards;
}

.sd-overlay--dialog.sd-overlay-leave .sd-overlay-panel {
  animation: sd-overlay-pop-out 160ms ease-in forwards;
}

@keyframes sd-overlay-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes sd-overlay-slide-out {
  to {
    transform: translateX(100%);
  }
}

@keyframes sd-overlay-pop-out {
  to {
    opacity: 0;
    transform: scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-overlay-backdrop,
  .sd-overlay-backdrop.sd-overlay-leave,
  .sd-overlay--sheet .sd-overlay-panel,
  .sd-overlay--sheet.sd-overlay-leave .sd-overlay-panel,
  .sd-overlay--dialog .sd-overlay-panel,
  .sd-overlay--dialog.sd-overlay-leave .sd-overlay-panel {
    animation: none;
  }
}

.sd-run-sheet-guidance {
  background: color-mix(in oklch, var(--sd-paper-strong) 94%, var(--sd-surface-muted));
  border: 1px solid color-mix(in oklch, var(--sd-accent) 16%, var(--sd-line));
  border-radius: var(--sd-radius);
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
}

.sd-run-sheet-guidance strong {
  color: var(--sd-ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-run-sheet-guidance p {
  color: var(--sd-muted);
  line-height: 1.4;
  margin: 0;
  overflow-wrap: anywhere;
}

.sd-run-sheet-guidance.is-compact {
  padding-block: 10px;
}

.sd-overlay--sheet .sd-field textarea {
  min-height: 88px;
  max-height: 26dvh;
  resize: vertical;
}

.sd-run-input-brief {
  display: grid;
  gap: 12px;
  min-width: 0;
  background: var(--sd-paper);
  padding: 12px;
}

.sd-run-input-head {
  display: flex;
  gap: 10px;
  align-items: start;
  justify-content: space-between;
  min-width: 0;
}

.sd-run-input-head strong {
  display: block;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.sd-run-input-head p {
  margin-top: 4px;
  color: var(--sd-muted);
  line-height: 1.42;
}

.sd-run-input-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.sd-run-input-field {
  min-width: 0;
}

.sd-run-input-field textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
}

.sd-run-sheet-section {
  display: grid;
  gap: 6px;
  min-width: 0;
  background: var(--sd-paper-strong);
  padding: 12px;
}

.sd-run-sheet-section strong {
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sd-run-sheet-section p {
  color: var(--sd-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sd-run-recipe {
  background: color-mix(in oklch, var(--sd-paper-strong) 92%, var(--sd-surface-muted));
  border: 1px solid color-mix(in oklch, var(--sd-accent) 16%, var(--sd-line));
  border-radius: var(--sd-radius);
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
}

.sd-agent-recent-receipts {
  background: var(--sd-paper-strong);
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.sd-agent-recent-receipts .sd-list-row {
  align-items: center;
}

.sd-run-recipe-head {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.sd-run-recipe-head strong {
  display: block;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.sd-run-recipe-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.sd-agent-runs-history {
  background: color-mix(in oklch, var(--sd-surface-muted) 64%, transparent);
  box-shadow: none;
}

.sd-agent-runs-history summary p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 3px;
}

.sd-agent-runs-history .sd-list-row {
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-paper-strong) 72%, transparent);
  padding: 10px;
}

.sd-agent-runs-history .sd-actions {
  gap: 6px;
}

.sd-agent-quality-summary {
  border-radius: var(--sd-radius-lg);
}

.sd-agent-quality-summary > div:first-child {
  align-content: center;
}

.sd-agent-quality-facts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
}

.sd-agent-quality-facts div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-paper-strong) 62%, transparent);
  padding: 9px;
}

.sd-agent-quality-facts dt {
  color: var(--sd-subtle);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.sd-agent-quality-facts dd {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-weight: 700;
  line-height: 1.18;
}

.sd-agent-quality-proof-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.sd-agent-quality-detail {
  background: color-mix(in oklch, var(--sd-surface-muted) 64%, transparent);
  box-shadow: none;
}

.sd-agent-steps-detail {
  background: color-mix(in oklch, var(--sd-surface-muted) 58%, transparent);
  box-shadow: none;
}

.sd-agent-steps-detail > .sd-run-recipe {
  margin-top: 0;
}

.sd-agent-steps-detail .sd-run-recipe {
  box-shadow: none;
}

.sd-agent-output-package {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line-strong) 72%, transparent);
  border-radius: var(--sd-radius-lg);
  background: color-mix(in oklch, var(--sd-paper-strong) 74%, transparent);
  padding: 14px;
}

.sd-agent-output-package header {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  min-width: 0;
}

.sd-agent-output-package h3 {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.18;
  margin: 2px 0 0;
}

.sd-agent-output-package p {
  color: var(--sd-muted);
  line-height: 1.4;
  margin-top: 4px;
}

.sd-agent-output-preview-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.sd-agent-output-preview-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 76%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 62%, transparent);
  color: var(--sd-ink);
  padding: 10px;
  text-decoration: none;
}

.sd-agent-output-preview-card span {
  color: var(--sd-subtle);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.sd-agent-output-preview-card strong,
.sd-agent-output-preview-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-agent-output-preview-card small {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
}

.sd-agent-output-package-meta {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.sd-agent-output-package-meta div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-agent-output-package-meta dt {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  text-transform: none;
}

.sd-agent-output-package-meta dd {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-weight: 700;
}

.sd-agent-output-detail {
  background: color-mix(in oklch, var(--sd-surface-muted) 58%, transparent);
  box-shadow: none;
}

[data-testid="agent-outputs-tab"] .sd-home-output-preview-head span,
[data-testid="agent-outputs-tab"] .sd-v4-output-preview-head span,
[data-testid="agent-outputs-tab"] .sd-output-destination-label {
  color: var(--sd-muted);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-agent-output-detail > .sd-v4-run-package {
  margin-top: 0;
}

.sd-agent-output-detail summary p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 3px;
}

.sd-agent-steps-detail summary p,
.sd-agent-quality-detail summary p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 3px;
}

.sd-agent-quality-detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.sd-agent-quality-detail-grid > .sd-run-recipe,
.sd-agent-quality-detail-grid > [data-testid="agent-quality-known-limits"] {
  grid-column: 1 / -1;
}

.sd-run-sheet-disclosure {
  display: grid;
  gap: 0;
  min-width: 0;
  background: var(--sd-paper-strong);
}

.sd-run-sheet-disclosure > summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  cursor: pointer;
  list-style-position: inside;
  padding: 11px 12px;
}

.sd-run-sheet-disclosure > summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-run-sheet-disclosure > summary strong {
  color: var(--sd-ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-run-sheet-disclosure[open] {
  gap: 10px;
  padding-bottom: 12px;
}

.sd-run-sheet-disclosure > :not(summary) {
  margin-inline: 12px;
}

.sd-run-sheet-disclosure > .sd-actions {
  justify-content: flex-start;
}

.sd-run-sheet-expected .sd-plain-list {
  max-height: 132px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

[data-testid="run-outcome-evaluation"] .sd-metric span,
[data-testid="run-outcome"] .sd-metric span,
[data-testid="run-outcome"] .sd-data-row span,
[data-testid="run-outcome-evaluation"] .sd-data-row span {
  color: var(--sd-muted);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-status-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sd-status-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  background: var(--sd-paper-strong);
  padding: 12px;
}

.sd-status-card span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
}

.sd-status-card strong {
  display: block;
  margin-top: 4px;
  font-size: var(--sd-text-section);
  line-height: 1.05;
}

.sd-status-card small {
  display: block;
  margin-top: 4px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
}

.sd-watch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1100px) {
  .sd-watch-layout {
    grid-template-columns: 1fr;
  }
}

.sd-watch-feed {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sd-watch-events {
  display: grid;
  gap: 12px;
}

.sd-watch-sidebar {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.sd-watch-sidebar-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
}

.sd-watch-sidebar-head {
  display: grid;
  gap: 6px;
}

.sd-watch-sidebar-step {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sd-watch-sidebar-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sd-watch-sidebar-count {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-variant-numeric: tabular-nums;
}

.sd-watch-sidebar-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 0;
}

.sd-watch-sidebar-stats > div {
  display: grid;
  gap: 2px;
}

.sd-watch-sidebar-stats dt {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sd-watch-sidebar-stats dd {
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sd-watch-sidebar-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-watch-sidebar-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  background: var(--sd-paper);
}

.sd-watch-sidebar-item strong {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.sd-watch-sidebar-sub {
  margin: 2px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  overflow-wrap: anywhere;
}

.sd-run-steps-view {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-run-steps-summary {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
}

.sd-run-steps-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.sd-run-steps-head h2 {
  margin: 0;
}

.sd-run-steps-head p:not(.sd-eyebrow) {
  margin: 6px 0 0;
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-run-steps-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.sd-run-steps-metrics > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  background: var(--sd-paper);
}

.sd-run-steps-metrics dt {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sd-run-steps-metrics dd {
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sd-run-steps-empty {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
}

.sd-run-steps-empty p {
  margin: 0;
  color: var(--sd-muted);
}

.sd-run-step-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
}

.sd-run-step-chip {
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 9px 11px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
  color: inherit;
  scroll-snap-align: start;
  text-decoration: none;
}

.sd-run-step-chip span {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.sd-run-step-chip strong {
  overflow: hidden;
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-run-step-chip.is-running,
.sd-run-step-chip.is-queued,
.sd-run-step-chip.is-awaiting_user {
  border-color: color-mix(in srgb, var(--sd-blue) 42%, var(--sd-line));
}

.sd-run-step-chip.is-warning,
.sd-run-step-chip.is-failed {
  border-color: color-mix(in srgb, var(--sd-warning) 46%, var(--sd-line));
}

.sd-run-step-chip.is-done,
.sd-run-step-chip.is-available {
  border-color: color-mix(in srgb, var(--sd-sage) 46%, var(--sd-line));
}

.sd-run-steps-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-run-step {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.sd-run-step-marker {
  width: 12px;
  height: 12px;
  margin-top: 18px;
  border: 2px solid var(--sd-paper-strong);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-muted);
  box-shadow: 0 0 0 1px var(--sd-line);
}

.sd-run-step.is-running .sd-run-step-marker,
.sd-run-step.is-queued .sd-run-step-marker,
.sd-run-step.is-awaiting_user .sd-run-step-marker {
  background: var(--sd-blue);
}

.sd-run-step.is-warning .sd-run-step-marker,
.sd-run-step.is-failed .sd-run-step-marker {
  background: var(--sd-warning);
}

.sd-run-step.is-done .sd-run-step-marker,
.sd-run-step.is-available .sd-run-step-marker {
  background: var(--sd-sage);
}

.sd-run-step-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--sd-line);
  border-left-width: 4px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
}

.sd-run-step-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.sd-run-step-head h3 {
  margin: 0;
  font-size: var(--sd-text-title);
}

.sd-run-step-card > p {
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sd-run-step-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding-right: 2px;
}

.sd-run-step-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 9px 11px;
  background: var(--sd-paper);
  color: inherit;
  text-decoration: none;
}

.sd-run-step-item strong,
.sd-run-step-item p {
  overflow-wrap: anywhere;
}

.sd-run-step-item p {
  margin: 2px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.35;
}

.sd-run-step-item[aria-disabled="true"] {
  cursor: default;
}

.sd-run-step-link,
.sd-run-step-primary {
  width: fit-content;
  color: var(--sd-accent);
  font-weight: 700;
  text-decoration: none;
}

.sd-run-step-primary {
  justify-self: start;
  padding: 9px 12px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
}

.sd-action-log-scroll {
  display: grid;
  gap: 0;
  max-height: min(68vh, 680px);
  margin: 0;
  overflow-y: auto;
  padding: 0;
  padding-right: 4px;
  scrollbar-color: color-mix(in oklch, var(--sd-line) 82%, var(--sd-muted)) transparent;
  scrollbar-width: thin;
  list-style: none;
}

.sd-action-log-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.sd-action-log-head p {
  min-width: 0;
  max-width: 68ch;
}

.sd-action-log-head .sd-btn {
  flex: 0 0 auto;
}

.sd-browser-viewer {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-browser-viewer-frame {
  width: 100%;
  min-height: min(70vh, 720px);
  border: 1px solid var(--sd-line);
  background: var(--sd-paper);
}

.sd-action-log-workroom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.43fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
}

.sd-action-log-workroom.is-detailed {
  grid-template-columns: minmax(0, 1fr);
}

.sd-action-log-main-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-action-log-detailed {
  min-width: 0;
}

.sd-action-log-filters {
  gap: 8px 14px;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  background: transparent;
  padding: 0 0 10px;
}

.sd-action-log-filters .sd-chip {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  padding: 0;
}

.sd-action-log-filters .sd-chip.is-active {
  color: var(--sd-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.sd-action-log-count-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin: 0;
  min-width: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  padding: 0 0 10px;
}

.sd-action-log-count-strip > div {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.sd-action-log-count-strip dt,
.sd-action-log-count-strip dd {
  margin: 0;
}

.sd-action-log-count-strip dt {
  color: var(--sd-muted);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-action-log-count-strip dd {
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sd-action-log-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.sd-action-log-item + .sd-action-log-item {
  margin-top: 4px;
}

.sd-action-log-marker {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 26px;
  height: 26px;
  margin-top: 12px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
  box-shadow: var(--sd-shadow);
  color: var(--sd-muted);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  line-height: 1;
  z-index: 1;
}

.sd-action-log-marker::before {
  content: "M";
}

.sd-action-log-marker::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 50%;
  width: 1px;
  height: calc(100% + 24px);
  background: var(--sd-line);
  transform: translateX(-50%);
  z-index: -1;
}

.sd-action-log-item:last-child .sd-action-log-marker::after {
  display: none;
}

.sd-action-log-item article {
  display: grid;
  gap: 8px;
  min-width: 0;
  background: color-mix(in oklch, var(--sd-surface) 92%, var(--sd-paper));
  padding: 12px;
}

.sd-action-log-item header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.sd-action-log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  min-width: 0;
}

.sd-action-log-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-action-log-meta .sd-action-log-time {
  font-family: var(--sd-font-mono);
  font-variant-numeric: tabular-nums;
}

.sd-action-log-meta .sd-action-log-actor {
  max-width: 12rem;
}

.sd-action-log-meta .sd-action-log-event {
  width: fit-content;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-surface-muted);
  color: var(--sd-ink);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  padding: 3px 7px;
}

.sd-action-log-item strong,
.sd-action-log-item p {
  overflow-wrap: anywhere;
}

.sd-action-log-item p {
  color: var(--sd-muted);
  line-height: 1.42;
}

.sd-action-log-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 2px 0 0;
}

.sd-action-log-workroom .sd-action-log-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 3px;
}

.sd-action-log-facts div {
  min-width: 0;
  background: var(--sd-surface-muted);
  padding: 8px;
}

.sd-action-log-workroom .sd-action-log-facts div {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.sd-action-log-facts dt {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-transform: none;
}

.sd-action-log-facts dd {
  margin: 2px 0 0;
  color: var(--sd-ink);
  overflow-wrap: anywhere;
}

.sd-action-log-workroom .sd-action-log-facts dd {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
}

.sd-action-log-item.is-tool .sd-action-log-marker,
.sd-action-log-item.is-tool_call_request .sd-action-log-marker,
.sd-action-log-item.is-tool_result .sd-action-log-marker,
.sd-action-log-item.is-mcp .sd-action-log-marker,
.sd-action-log-item.is-browser .sd-action-log-marker,
.sd-action-log-item.is-message .sd-action-log-marker,
.sd-action-log-item.is-user_message .sd-action-log-marker,
.sd-action-log-item.is-assistant_message .sd-action-log-marker,
.sd-action-log-item.is-provider_frame .sd-action-log-marker {
  border-color: color-mix(in oklch, var(--sd-blue) 36%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-blue) 12%, var(--sd-paper-strong));
  color: var(--sd-blue);
}

.sd-action-log-item.is-file .sd-action-log-marker,
.sd-action-log-item.is-artifact .sd-action-log-marker,
.sd-action-log-item.is-subagent .sd-action-log-marker {
  border-color: color-mix(in oklch, var(--sd-teal) 36%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-teal) 12%, var(--sd-paper-strong));
  color: var(--sd-teal);
}

.sd-action-log-item.is-approval .sd-action-log-marker {
  border-color: color-mix(in oklch, var(--sd-warning) 42%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-warning) 14%, var(--sd-paper-strong));
  color: var(--sd-warning);
}

.sd-action-log-item.is-model .sd-action-log-marker::before {
  content: "AI";
}

.sd-action-log-item.is-tool .sd-action-log-marker::before {
  content: "T";
}

.sd-action-log-item.is-tool_call_request .sd-action-log-marker::before,
.sd-action-log-item.is-tool_result .sd-action-log-marker::before {
  content: "T";
}

.sd-action-log-item.is-mcp .sd-action-log-marker::before {
  content: "CT";
  font-size: 0.58rem;
}

.sd-action-log-item.is-user_message .sd-action-log-marker::before,
.sd-action-log-item.is-assistant_message .sd-action-log-marker::before {
  content: "M";
}

.sd-action-log-item.is-provider_frame .sd-action-log-marker::before {
  content: "P";
}

.sd-action-log-item.is-browser .sd-action-log-marker::before {
  content: "B";
}

.sd-action-log-item.is-file .sd-action-log-marker::before,
.sd-action-log-item.is-artifact .sd-action-log-marker::before {
  content: "F";
}

.sd-action-log-item.is-approval .sd-action-log-marker::before {
  content: "A";
}

.sd-action-log-item.is-subagent .sd-action-log-marker::before {
  content: "S";
}

/* Reuse-a-saved-output rows fold the old Reuse tab's follow-up package under
   the suggested-reuse toolbar, separated by a hairline rule. */
.sd-run-reuse-outputs {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--sd-line);
}

.sd-run-workroom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: 8px;
  min-width: 0;
}

.sd-run-workroom-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: color-mix(in oklch, var(--sd-paper-strong) 88%, white);
  color: inherit;
  text-decoration: none;
}

.sd-run-workroom-card:hover {
  border-color: var(--sd-line-stronger);
  box-shadow: var(--sd-shadow-soft);
}

.sd-run-workroom-card.is-current {
  border-left: 3px solid var(--sd-sage);
}

.sd-run-workroom-kicker,
.sd-run-workroom-action {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-run-workroom-card strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.sd-run-workroom-card p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.36;
  overflow-wrap: anywhere;
}

.sd-run-workroom-action {
  align-self: end;
  color: var(--sd-link);
  letter-spacing: 0;
  text-transform: none;
}

.sd-run-proof-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sd-run-visual-evidence {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--sd-link) 8%, transparent), transparent 42%),
    var(--sd-paper);
}

.sd-run-visual-evidence-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.sd-run-visual-evidence-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-run-visual-evidence-head strong {
  display: block;
  color: var(--sd-ink);
  line-height: 1.25;
}

.sd-run-visual-evidence-head p {
  max-width: 62ch;
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.sd-run-visual-evidence-head a {
  flex: 0 0 auto;
  color: var(--sd-link);
  font-size: var(--sd-text-body);
  font-weight: 700;
  text-decoration: none;
}

.sd-run-visual-evidence-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.8fr);
  gap: 8px;
  min-width: 0;
}

.sd-run-visual-primary,
.sd-run-visual-thumb {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  background: var(--sd-surface-muted);
  color: inherit;
  text-decoration: none;
}

.sd-run-visual-primary {
  grid-template-columns: minmax(0, 1.2fr) minmax(190px, 0.78fr);
  align-items: stretch;
  min-height: 238px;
}

.sd-run-visual-primary-image,
.sd-run-visual-image {
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  background: var(--sd-paper-strong);
}

.sd-run-visual-primary-image {
  min-height: 220px;
  color: inherit;
  text-decoration: none;
}

.sd-run-visual-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-run-visual-primary-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sd-run-visual-primary-image.is-website,
.sd-run-visual-image.is-website {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--sd-link) 12%, transparent), transparent 36%),
    var(--sd-paper);
}

.sd-run-visual-primary-image.is-report,
.sd-run-visual-image.is-report {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--sd-success) 10%, transparent), transparent 40%),
    var(--sd-paper);
}

.sd-run-visual-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 100%;
  padding: 18px;
  color: var(--sd-ink);
  text-align: center;
}

.sd-run-visual-placeholder span,
.sd-run-visual-file-mark {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid color-mix(in oklch, var(--sd-link) 28%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: var(--sd-paper-strong);
  color: var(--sd-link);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1;
}

.sd-run-visual-placeholder strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.2;
}

.sd-run-visual-placeholder small {
  max-width: 34ch;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
}

.sd-run-visual-primary-copy,
.sd-run-visual-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sd-run-visual-primary-copy {
  align-content: space-between;
  padding: 2px;
}

.sd-run-visual-primary-copy > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sd-run-visual-primary-copy strong,
.sd-run-visual-copy strong,
.sd-run-visual-copy small,
.sd-run-visual-mini-badge {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-run-visual-primary-copy strong,
.sd-run-visual-copy strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.2;
}

.sd-run-visual-primary-copy strong {
  font-size: var(--sd-text-title);
}

.sd-run-visual-primary-copy p,
.sd-run-visual-copy small {
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sd-run-visual-primary-copy a {
  justify-self: start;
  color: var(--sd-link);
  font-size: var(--sd-text-body);
  font-weight: 700;
  text-decoration: none;
}

.sd-run-visual-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.sd-run-visual-badges span,
.sd-run-visual-mini-badge {
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper);
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
}

.sd-run-visual-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.sd-run-visual-rail .sd-run-visual-thumb {
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
}

.sd-run-visual-rail .sd-run-visual-image {
  aspect-ratio: 1.22 / 1;
}

.sd-run-proof-list.is-rolled-up {
  padding-top: 4px;
}

.sd-run-proof-group-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  color: var(--sd-muted);
}

.sd-run-proof-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  background: var(--sd-paper);
}

.sd-run-proof-row.is-rolled-up {
  background: var(--sd-surface-muted);
}

.sd-run-proof-type {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--sd-surface-muted);
  color: var(--sd-muted);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
}

.sd-run-proof-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-run-proof-body strong,
.sd-run-proof-body p {
  overflow-wrap: anywhere;
}

.sd-run-proof-body p {
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.38;
}

.sd-run-proof-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 20rem;
}

.sd-output-destination-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-content: start;
  align-items: center;
}

.sd-output-destination-label {
  flex-basis: 100%;
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.sd-run-output-state-label {
  justify-content: flex-start;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sd-run-output-checklist > summary .sd-run-output-state-label {
  justify-content: flex-end;
  margin-left: auto;
  text-align: right;
}

.sd-run-output-checklist {
  background: color-mix(in oklch, var(--sd-surface-muted) 64%, transparent);
  box-shadow: none;
}

.sd-run-output-expectations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.sd-run-io-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 8px;
  background: var(--sd-surface-muted);
}

.sd-run-io-chip span {
  min-width: 0;
  overflow: hidden;
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-run-receipt-actions {
  align-items: center;
  background: var(--sd-paper-strong);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 14px 16px;
}

.sd-run-receipt-actions strong {
  display: block;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.sd-run-receipt-actions p {
  color: var(--sd-muted);
  line-height: 1.4;
  margin: 3px 0 0;
}

.sd-run-receipt-actions .sd-actions {
  justify-content: flex-end;
}

.sd-run-receipt-actions .sd-button {
  white-space: nowrap;
}

.sd-run-receipt-actions.is-toolbar {
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  padding: 10px 12px;
}

.sd-run-receipt-actions-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sd-run-receipt-actions-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.sd-run-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.sd-filter-chip {
  align-items: center;
  background: var(--sd-paper-strong);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  display: inline-flex;
  font-size: var(--sd-text-body);
  font-weight: 700;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  text-decoration: none;
}

.sd-filter-chip:hover {
  background: var(--sd-surface-muted);
  border-color: var(--sd-line-stronger);
  color: var(--sd-ink);
}

.sd-filter-chip.is-active {
  background: color-mix(in oklch, var(--sd-accent-soft) 34%, var(--sd-paper-strong));
  border-color: color-mix(in oklch, var(--sd-accent) 42%, var(--sd-line));
  color: var(--sd-ink);
}

.sd-run-started-strip {
  align-items: center;
  background: color-mix(in oklch, var(--sd-paper-strong) 96%, var(--sd-surface-muted));
  border: 1px solid color-mix(in oklch, var(--sd-accent) 20%, var(--sd-line));
  border-radius: var(--sd-radius);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto) auto;
  min-width: 0;
  padding: 14px 16px;
}

.sd-run-started-copy,
.sd-run-started-actions {
  min-width: 0;
}

.sd-run-started-copy strong {
  display: block;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.sd-run-started-copy p {
  color: var(--sd-muted);
  line-height: 1.4;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.sd-run-started-facts {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  min-width: 0;
}

.sd-run-started-facts div {
  background: var(--sd-paper);
  min-width: 0;
  padding: 8px 10px;
}

.sd-run-started-facts dt {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-run-started-facts dd {
  margin: 3px 0 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sd-run-started-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.sd-run-facts-rail {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-run-output-preview-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  /* Always-light paper in both themes; pin text to the artifact ink so the card
     doesn't inherit the (light) dark-theme ink onto its light surface. */
  color: var(--sd-artifact-ink);
  text-decoration: none;
  background: var(--sd-artifact-paper-card);
  /* The preview is the document hero — one consistent elevation token, not the
     old oversized 18px/44px literal shadow. See ADR 0039. */
  box-shadow: var(--sd-shadow-raised);
  transition: box-shadow var(--sd-duration-base) ease, border-color var(--sd-duration-fast) ease;
}

.sd-run-output-preview-card:hover {
  border-color: color-mix(in oklch, var(--sd-accent) 56%, var(--sd-line));
  box-shadow: var(--sd-shadow-raised);
}

/* Saved text/markdown outputs read as a flat filed document: a ruled left
   edge instead of a full frame, a content-height stage (no forced 312px
   void), and a display-font masthead headline. Image/screenshot artifacts
   keep the framed thumbnail + raised shadow. */
.sd-run-output-preview-card.is-document {
  border-color: color-mix(in oklch, var(--sd-line) 80%, transparent);
  border-left: 3px solid color-mix(in oklch, var(--sd-artifact-ink-faint) 55%, transparent);
  box-shadow: var(--sd-shadow-soft);
}

.sd-run-output-preview-card.is-document:hover {
  box-shadow: var(--sd-shadow);
}

.sd-run-output-preview-card.is-document .sd-run-output-preview-stage {
  min-height: 0;
}

.sd-run-output-preview-card.is-document .sd-run-output-preview-document {
  padding: 24px;
}

.sd-run-output-preview-card.is-document .sd-run-output-preview-document strong {
  font-family: var(--sd-font-display, inherit);
  font-size: var(--sd-text-page-title);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--sd-artifact-ink);
}

.sd-run-output-preview-topbar {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sd-artifact-line, var(--sd-line));
  background: var(--sd-artifact-paper-chrome, var(--sd-surface-muted));
  color: var(--sd-artifact-ink-muted, var(--sd-muted));
  font-size: var(--sd-text-body-sm);
}

.sd-run-output-preview-topbar span {
  color: var(--sd-artifact-ink-muted, var(--sd-muted));
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sd-run-output-preview-topbar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sd-artifact-ink, var(--sd-ink));
  font-weight: 700;
}

.sd-run-output-preview-stage {
  display: grid;
  min-height: 312px;
  background: var(--sd-artifact-paper);
  color: var(--sd-artifact-ink-stage);
}

.sd-run-output-preview-stage img {
  width: 100%;
  height: 100%;
  min-height: 312px;
  object-fit: cover;
}

.sd-run-output-preview-document {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 22px;
  min-width: 0;
}

.sd-run-output-preview-document span {
  color: var(--sd-artifact-ink-faint);
  font-size: var(--sd-text-label);
  overflow-wrap: anywhere;
}

.sd-run-output-preview-document strong {
  font-size: var(--sd-text-title);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sd-run-output-preview-document p {
  margin: 0;
  color: var(--sd-artifact-ink-muted);
  line-height: 1.35;
}

/* Real, bounded excerpt of the saved output, rendered on the light paper stage. */
.sd-run-output-preview-excerpt {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sd-run-output-preview-excerpt em {
  color: var(--sd-artifact-ink-eyebrow);
  font-size: var(--sd-text-eyebrow);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sd-run-output-preview-excerpt pre {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--sd-radius);
  background: var(--sd-artifact-paper-chrome);
  border: 1px solid var(--sd-artifact-line);
  color: var(--sd-artifact-ink);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-body-sm);
  line-height: var(--sd-leading-snug);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 188px;
  overflow: hidden;
}

.sd-run-output-preview-excerpt small {
  color: var(--sd-artifact-ink-faint);
  font-size: var(--sd-text-label);
}

/* Table-output preview reuses the shared inline chip; keep it legible on paper. */
.sd-run-output-preview-document .sd-artifact-inline-preview {
  margin-top: 0;
}

.sd-run-rail-details {
  min-width: 0;
  background: var(--sd-paper);
}

.sd-run-rail-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  color: var(--sd-ink);
  cursor: pointer;
  font-weight: 700;
}

.sd-run-rail-detail-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0 10px 10px;
}

.sd-run-facts-list,
.sd-run-provenance-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.sd-run-facts-list > div,
.sd-run-provenance-row {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 0;
  border-top: 1px solid var(--sd-line);
}

.sd-run-facts-list > div:first-child,
.sd-run-provenance-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.sd-run-facts-list dt,
.sd-run-provenance-row span {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-run-facts-list dd,
.sd-run-provenance-row strong,
.sd-run-provenance-row a {
  min-width: 0;
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sd-run-provenance-row a {
  color: var(--sd-accent);
  text-decoration: none;
}

.sd-run-project-context-panel {
  gap: 12px;
}

.sd-run-project-context-panel > strong {
  min-width: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.sd-run-project-context-panel > p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.45;
}

.sd-run-project-context-panel > a {
  color: var(--sd-accent);
  font-size: var(--sd-text-body);
  font-weight: 700;
  text-decoration: none;
}

.sd-run-project-context-facts {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.sd-run-project-context-facts > div {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.sd-run-project-context-facts dt,
.sd-run-project-context-facts dd {
  margin: 0;
  min-width: 0;
  font-size: var(--sd-text-body-sm);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sd-run-project-context-facts dt {
  color: var(--sd-muted);
  font-weight: 600;
}

.sd-run-project-context-facts dd {
  color: var(--sd-ink);
  font-weight: 700;
  text-align: right;
}

.sd-run-project-context-includes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sd-run-project-context-includes span {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper);
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
}

.sd-action-log-table {
  display: grid;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--sd-paper);
}

.sd-action-log-workroom .sd-action-log-table {
  gap: 10px;
  border: 0;
  background: transparent;
}

.sd-action-log-table-head,
.sd-action-log-table .sd-action-log-item {
  display: grid;
  grid-template-columns: minmax(74px, 0.7fr) minmax(120px, 1fr) minmax(100px, 0.9fr) minmax(220px, 2.6fr) minmax(96px, 0.8fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.sd-action-log-table-head {
  padding: 9px 12px;
  border-bottom: 1px solid var(--sd-line);
  background: var(--sd-surface-muted);
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-action-log-workroom .sd-action-log-table-head {
  display: none;
}

.sd-action-log-table .sd-action-log-scroll {
  display: grid;
  gap: 0;
}

.sd-action-log-workroom .sd-action-log-table .sd-action-log-scroll {
  gap: 10px;
}

.sd-action-log-table .sd-action-log-item {
  padding: 11px 12px;
  border-bottom: 1px solid var(--sd-line);
}

.sd-action-log-workroom .sd-action-log-table .sd-action-log-item {
  grid-template-areas:
    "time event status"
    "actor actor status"
    "summary summary summary";
  grid-template-columns: minmax(58px, auto) minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 13px 2px;
  border: 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 76%, transparent);
  border-radius: 0;
  background: transparent;
}

.sd-action-log-workroom .sd-action-log-table .sd-action-log-item:not(.has-row-status) {
  grid-template-areas:
    "time event"
    "actor actor"
    "summary summary";
  grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
}

.sd-action-log-table .sd-action-log-item:last-child {
  border-bottom: 0;
}

.sd-action-log-workroom .sd-action-log-table .sd-action-log-item:last-child {
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 76%, transparent);
}

.sd-action-log-table .sd-action-log-item + .sd-action-log-item {
  margin-top: 0;
}

.sd-action-log-table .sd-action-log-time {
  grid-area: time;
  color: var(--sd-muted);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  font-variant-numeric: tabular-nums;
}

.sd-action-log-table .sd-action-log-event {
  grid-area: event;
  width: fit-content;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sd-subtle);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-label);
  font-weight: 700;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-action-log-table .sd-action-log-actor {
  grid-area: actor;
  min-width: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-action-log-summary {
  grid-area: summary;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-action-log-workroom .sd-action-log-table .sd-action-log-summary {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.sd-action-log-summary strong,
.sd-action-log-summary p {
  overflow-wrap: anywhere;
}

.sd-action-log-summary p {
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.38;
}

.sd-action-log-status {
  grid-area: status;
  display: grid;
  justify-items: start;
  gap: 5px;
  min-width: 0;
}

.sd-action-log-workroom .sd-action-log-status {
  justify-items: end;
}

.sd-action-log-inspector {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 86%, transparent);
  border-radius: var(--sd-radius);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--sd-sage) 7%, transparent), transparent 48%),
    var(--sd-paper);
}

.sd-action-log-inspector header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.sd-action-log-inspector header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-action-log-inspector-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
}

.sd-action-log-inspector-state::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-muted) 54%, transparent);
}

.sd-action-log-inspector-state.is-ok::before {
  background: var(--sd-sage);
}

.sd-action-log-inspector-state.is-active::before {
  background: var(--sd-blue);
}

.sd-action-log-inspector-state.is-attention::before,
.sd-action-log-inspector-state.is-degraded::before {
  background: var(--sd-warning);
}

.sd-action-log-inspector h3 {
  margin: 0;
  color: var(--sd-ink);
  font-size: clamp(1.06rem, 0.8vw + 0.9rem, 1.34rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.sd-action-log-inspector p {
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sd-action-log-inspector-facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.sd-action-log-inspector-facts div {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 66%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 0 0 8px;
}

.sd-action-log-inspector-facts dt {
  color: var(--sd-muted);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-action-log-inspector-facts dd {
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sd-action-log-support-note {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--sd-warning) 34%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-warning) 8%, var(--sd-paper));
}

.sd-action-log-support-note strong {
  color: var(--sd-ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-action-log-status span:not(.sd-status) {
  color: var(--sd-muted);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
}

.sd-run-collaboration-workroom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.48fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
}

.sd-run-collaboration-main,
.sd-run-collaboration-rail {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-run-collaboration-rail {
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 104px);
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.sd-run-collaboration-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 84%, transparent);
  border-radius: var(--sd-radius);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--sd-sage) 5%, transparent), transparent 52%),
    color-mix(in oklch, var(--sd-paper) 92%, var(--sd-surface) 8%);
}

.sd-run-collaboration-section.is-warning {
  border-color: color-mix(in oklch, var(--sd-warning) 38%, var(--sd-line));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--sd-warning) 10%, transparent), transparent 58%),
    color-mix(in oklch, var(--sd-paper) 92%, var(--sd-surface) 8%);
}

.sd-run-collaboration-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.sd-run-collaboration-state {
  flex: 0 0 auto;
  margin-top: 2px;
}

.sd-run-collaboration-section-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-run-collaboration-section-head h3 {
  margin: 0;
  color: var(--sd-ink);
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.3rem);
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.sd-run-collaboration-section-head p {
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.sd-run-collaboration-participant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  min-width: 0;
}

.sd-run-collaboration-role-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.sd-run-collaboration-role-path {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-paper) 82%, var(--sd-surface-muted) 18%);
}

.sd-run-collaboration-role-path strong {
  color: var(--sd-ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-run-collaboration-role-path p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.sd-run-collaboration-person-card,
.sd-run-collaboration-reviewer-row,
.sd-run-collaboration-comment,
.sd-run-collaboration-rail-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 78%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 82%, var(--sd-paper) 18%);
}

.sd-run-collaboration-person-card,
.sd-run-collaboration-comment {
  justify-content: flex-start;
}

.sd-run-collaboration-person-card > div,
.sd-run-collaboration-reviewer-row > div,
.sd-run-collaboration-comment > div,
.sd-run-collaboration-rail-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-run-collaboration-person-card strong,
.sd-run-collaboration-reviewer-row strong,
.sd-run-collaboration-comment strong,
.sd-run-collaboration-rail-row strong {
  color: var(--sd-ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-run-collaboration-person-card p,
.sd-run-collaboration-reviewer-row p,
.sd-run-collaboration-comment p,
.sd-run-collaboration-rail-row p,
.sd-run-collaboration-note {
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.sd-run-collaboration-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 40%, var(--sd-line));
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-accent) 18%, var(--sd-paper));
  color: var(--sd-ink);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
}

.sd-run-collaboration-comment-form {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-run-collaboration-comment-form textarea {
  min-height: 92px;
}

.sd-run-collaboration-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.sd-run-collaboration-rail-row {
  flex-wrap: wrap;
}

.sd-run-collaboration-rail-row .sd-actions {
  justify-content: flex-start;
}

.sd-run-collaboration-more {
  margin-top: 14px;
}

.sd-run-collaboration-more > summary {
  font-weight: 700;
}

.sd-run-collaboration-more > .sd-list {
  margin-top: 12px;
}

.sd-run-work-graph {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-run-pulse {
  position: sticky;
  /* Clear the sticky frosted appbar so this run-progress card pins below it. */
  top: calc(var(--sd-appbar-h) + var(--sd-space-2));
  z-index: 4;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: color-mix(in oklch, var(--sd-surface) 94%, transparent);
  box-shadow: var(--sd-shadow);
  backdrop-filter: blur(10px);
}

.sd-run-pulse-head,
.sd-run-current-focus,
.sd-run-child-context,
.sd-run-work-alert,
.sd-run-board-section-head,
.sd-run-agent-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.sd-run-pulse-head h2 {
  margin: 0;
  font-size: var(--sd-text-title);
  line-height: 1.18;
}

.sd-run-pulse-head p:not(.sd-eyebrow),
.sd-run-current-focus p,
.sd-run-child-context p,
.sd-run-work-alert p,
.sd-run-agent-current p,
.sd-run-agent-alerts p,
.sd-run-activity-digest p,
.sd-run-output-chip span,
.sd-run-team-empty p {
  color: var(--sd-muted);
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.sd-run-current-focus {
  align-items: center;
  padding: 10px 12px;
  background: var(--sd-paper);
}

.sd-run-current-focus strong {
  min-width: 150px;
  font-size: var(--sd-text-heading);
}

.sd-run-current-focus p {
  flex: 1;
}

.sd-run-work-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  margin: 0;
}

.sd-run-work-graph-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.sd-run-work-metrics > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  background: var(--sd-paper);
}

.sd-run-work-metrics dt,
.sd-run-agent-counts dt {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.sd-run-work-metrics dd,
.sd-run-agent-counts dd {
  margin: 0;
  color: var(--sd-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sd-run-progress-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-run-progress-steps li {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px 10px;
  background: var(--sd-paper);
}

.sd-run-progress-steps li > span {
  display: block;
  height: 4px;
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-muted) 24%, transparent);
}

.sd-run-progress-steps strong {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.1;
}

@media (prefers-reduced-motion: no-preference) {
  .sd-run-progress-steps li > span {
    transition:
      background-color var(--sd-duration-base) var(--sd-ease-standard),
      border-color var(--sd-duration-base) var(--sd-ease-standard),
      color var(--sd-duration-base) var(--sd-ease-standard);
  }
}

.sd-run-progress-steps li.is-on > span {
  background: linear-gradient(90deg, var(--sd-accent), var(--sd-sage));
}

.sd-run-progress-steps li.is-on strong {
  color: var(--sd-ink);
}

.sd-run-progress-steps li.is-current {
  border-color: color-mix(in oklch, var(--sd-accent) 42%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent-soft) 28%, var(--sd-paper));
}

.sd-run-child-context {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--sd-blue) 32%, var(--sd-line));
  border-radius: var(--sd-radius-lg);
  background: color-mix(in srgb, var(--sd-blue) 6%, var(--sd-paper-strong));
}

.sd-run-child-context a,
.sd-run-agent-link,
.sd-run-work-primary {
  flex: 0 0 auto;
  width: fit-content;
  color: var(--sd-accent);
  font-weight: 700;
  text-decoration: none;
}

.sd-run-team-board,
.sd-run-subagent-board,
.sd-run-parallel-board,
.sd-run-workflow-plan,
.sd-run-output-strip,
.sd-run-activity-digest,
.sd-run-work-alerts,
.sd-run-team-empty {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-run-live-workroom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.sd-run-live-workroom > * {
  min-width: 0;
}

.sd-run-live-rail {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.sd-run-live-rail-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
  box-shadow: var(--sd-shadow);
}

.sd-run-live-rail-card strong {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-run-live-rail-card p {
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.sd-run-live-rail .sd-run-output-strip,
.sd-run-live-rail .sd-run-activity-digest,
.sd-run-live-rail .sd-run-work-alert {
  box-shadow: none;
}

.sd-run-live-rail .sd-status {
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sd-run-subagent-board {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

.sd-run-parallel-board {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--sd-blue) 24%, var(--sd-line));
  border-radius: var(--sd-radius-lg);
  background: color-mix(in srgb, var(--sd-blue) 4%, var(--sd-paper-strong));
  box-shadow: var(--sd-shadow);
}

.sd-run-workflow-plan {
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--sd-teal) 24%, var(--sd-line));
  border-radius: var(--sd-radius-lg);
  background: color-mix(in srgb, var(--sd-teal) 4%, var(--sd-paper-strong));
  box-shadow: var(--sd-shadow);
}

.sd-run-workflow-plan.is-diagnostics {
  margin-bottom: 12px;
  background: var(--sd-paper-strong);
}

.sd-run-workflow-head,
.sd-run-workflow-run > header,
.sd-run-workflow-phase-body > header,
.sd-run-workflow-items > li {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.sd-run-workflow-head h3,
.sd-run-workflow-run h4 {
  margin: 0;
  line-height: 1.18;
}

.sd-run-workflow-head p,
.sd-run-workflow-run p,
.sd-run-workflow-phase-body p,
.sd-run-workflow-items p {
  margin: 4px 0 0;
  color: var(--sd-muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sd-run-workflow-runs,
.sd-run-workflow-run,
.sd-run-workflow-phase-body,
.sd-run-workflow-items {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-run-workflow-run {
  padding: 12px;
  border: 1px solid var(--sd-line);
  border-left: 4px solid var(--sd-teal);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
}

.sd-run-workflow-run.is-running,
.sd-run-workflow-run.is-active,
.sd-run-workflow-run.is-queued {
  border-left-color: var(--sd-blue);
}

.sd-run-workflow-run.is-warning,
.sd-run-workflow-run.is-failed,
.sd-run-workflow-run.is-cancelled,
.sd-run-workflow-run.is-pending_recovery {
  border-left-color: var(--sd-warning);
}

.sd-run-workflow-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 126px), 1fr));
  gap: 8px;
  margin: 0;
}

.sd-run-workflow-metrics > div {
  min-width: 0;
  padding: 8px 10px;
  background: var(--sd-paper);
}

.sd-run-workflow-metrics dt {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.sd-run-workflow-metrics dd {
  margin: 2px 0 0;
  color: var(--sd-ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sd-run-workflow-phases {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-run-workflow-phase {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.sd-run-workflow-phase-marker {
  position: relative;
  width: 18px;
  min-height: 100%;
}

.sd-run-workflow-phase-marker::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 8px;
  bottom: -10px;
  border-left: 1px solid var(--sd-line-strong);
}

.sd-run-workflow-phase:last-child .sd-run-workflow-phase-marker::before {
  bottom: calc(100% - 20px);
}

.sd-run-workflow-phase-marker::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 4px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--sd-teal);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
}

.sd-run-workflow-phase.is-running .sd-run-workflow-phase-marker::after,
.sd-run-workflow-phase.is-active .sd-run-workflow-phase-marker::after {
  border-color: var(--sd-blue);
}

.sd-run-workflow-phase.is-warning .sd-run-workflow-phase-marker::after,
.sd-run-workflow-phase.is-failed .sd-run-workflow-phase-marker::after,
.sd-run-workflow-phase.is-cancelled .sd-run-workflow-phase-marker::after,
.sd-run-workflow-phase.is-pending_recovery .sd-run-workflow-phase-marker::after {
  border-color: var(--sd-warning);
}

.sd-run-workflow-phase-body {
  padding: 9px 0 12px;
}

.sd-run-workflow-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-run-workflow-items > li {
  padding: 10px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius);
  background: var(--sd-paper);
}

.sd-run-workflow-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  min-width: min(180px, 38%);
}

.sd-run-workflow-overflow {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
}

.sd-run-parallel-head,
.sd-run-parallel-lane > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.sd-run-parallel-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.sd-run-parallel-head h3,
.sd-run-parallel-lane h4 {
  margin: 0;
  line-height: 1.18;
}

.sd-run-parallel-head p,
.sd-run-parallel-lane p {
  margin: 4px 0 0;
  color: var(--sd-muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sd-run-parallel-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
  gap: 8px;
  margin: 0;
}

.sd-run-parallel-metrics > div,
.sd-run-parallel-lane dl > div {
  min-width: 0;
  padding: 8px 10px;
  background: var(--sd-paper);
}

.sd-run-parallel-metrics dt,
.sd-run-parallel-lane dt {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.sd-run-parallel-metrics dd,
.sd-run-parallel-lane dd {
  margin: 2px 0 0;
  color: var(--sd-ink);
  font-weight: 700;
}

.sd-run-parallel-workroom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.4fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.sd-run-parallel-main,
.sd-run-parallel-rail {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-run-parallel-rail {
  align-content: start;
}

.sd-run-parallel-control-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
}

.sd-run-parallel-control-card > div {
  min-width: 0;
}

.sd-run-parallel-control-card strong {
  display: block;
  color: var(--sd-ink);
  line-height: 1.22;
}

.sd-run-parallel-control-card p {
  margin: 3px 0 0;
  color: var(--sd-muted);
  line-height: 1.36;
}

.sd-run-parallel-control-card .sd-progress {
  margin-top: 8px;
}

.sd-run-parallel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 8px;
}

.sd-run-parallel-lane {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--sd-line);
  border-left: 4px solid var(--sd-sage);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
}

.sd-run-parallel-lane.is-running,
.sd-run-parallel-lane.is-active,
.sd-run-parallel-lane.is-queued,
.sd-run-parallel-lane.is-awaiting_user {
  border-left-color: var(--sd-blue);
}

.sd-run-parallel-lane.is-warning,
.sd-run-parallel-lane.is-failed,
.sd-run-parallel-lane.is-exhausted,
.sd-run-parallel-lane.is-budget_exhausted,
.sd-run-parallel-lane.is-killed,
.sd-run-parallel-lane.is-cancelled {
  border-left-color: var(--sd-warning);
}

.sd-run-parallel-lane.is-synthesis {
  border-left-color: var(--sd-teal);
  background: color-mix(in srgb, var(--sd-teal) 5%, var(--sd-paper-strong));
}

.sd-run-parallel-synthesis-card {
  min-height: 260px;
}

.sd-run-parallel-lane dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.sd-run-parallel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.sd-run-agent-grid {
  display: grid;
  gap: 8px;
}

.sd-run-board-section-head {
  align-items: center;
  min-width: 0;
}

.sd-run-board-section-head strong {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
}

.sd-run-agent-card,
.sd-run-team-empty,
.sd-run-output-strip,
.sd-run-activity-digest,
.sd-run-work-alert {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--sd-line);
  border-left-width: 4px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
  box-shadow: var(--sd-shadow);
}

.sd-run-agent-card.is-primary {
  border-left-color: var(--sd-teal);
  background: color-mix(in srgb, var(--sd-teal) 4%, var(--sd-paper-strong));
}

.sd-run-agent-card.is-running,
.sd-run-agent-card.is-active,
.sd-run-agent-card.is-queued,
.sd-run-agent-card.is-awaiting_user {
  border-left-color: var(--sd-blue);
}

.sd-run-agent-card.is-warning,
.sd-run-agent-card.is-failed,
.sd-run-agent-card.is-exhausted,
.sd-run-agent-card.is-budget_exhausted,
.sd-run-agent-card.is-killed,
.sd-run-agent-card.is-cancelled,
.sd-run-work-alert.is-warning,
.sd-run-work-alert.is-failed {
  border-left-color: var(--sd-warning);
}

.sd-run-agent-card.is-done,
.sd-run-agent-card.is-ready,
.sd-run-agent-card.is-available {
  border-left-color: var(--sd-sage);
}

.sd-run-agent-card > header h3 {
  margin: 0;
  font-size: var(--sd-text-title);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.sd-run-agent-current {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.sd-run-agent-current strong {
  font-size: var(--sd-text-heading);
}

.sd-run-agent-alerts {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.sd-run-agent-alerts p {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--sd-warning) 40%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in srgb, var(--sd-warning) 7%, var(--sd-paper));
}

.sd-run-agent-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 7px;
  margin: 12px 0 0;
}

.sd-run-agent-counts > div {
  min-width: 0;
  padding: 7px 8px;
  background: var(--sd-paper);
}

.sd-run-agent-activity {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.sd-run-agent-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.sd-run-agent-activity-head a {
  flex: 0 0 auto;
  color: var(--sd-accent);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  text-decoration: none;
}

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

.sd-run-agent-activity-list > li,
.sd-run-output-chip,
.sd-run-activity-digest li {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  min-width: 0;
  padding: 8px 10px;
  border-left: 2px solid color-mix(in oklch, var(--sd-blue) 30%, var(--sd-line));
  background: var(--sd-paper);
}

.sd-run-output-chip,
.sd-run-activity-digest li {
  gap: 3px;
  grid-template-columns: minmax(0, 1fr);
  border-left-width: 1px;
  border-left-color: var(--sd-line);
}

.sd-run-agent-activity-list strong,
.sd-run-agent-activity-list p {
  overflow-wrap: anywhere;
}

.sd-run-agent-activity-list p {
  margin: 2px 0 0;
  color: var(--sd-muted);
  line-height: 1.35;
}

.sd-run-agent-activity-more {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
}

.sd-run-agent-link {
  display: inline-flex;
  margin-top: 10px;
}

.sd-run-output-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 8px;
}

.sd-run-output-chip {
  color: inherit;
  text-decoration: none;
}

.sd-run-activity-digest ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-run-activity-digest span {
  color: var(--sd-ink);
  font-weight: 700;
}

.sd-run-work-primary {
  padding: 9px 12px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
}

@media (max-width: 900px) {
  .sd-page-meta-strip {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .sd-page-meta-strip > div {
    flex: 1 1 calc(50% - 5px);
    min-width: min(100%, 112px);
  }

  .sd-run-step-head {
    display: grid;
  }

  .sd-run-steps-head {
    display: grid;
  }

  .sd-run-steps-metrics,
  .sd-run-work-metrics,
  .sd-run-parallel-metrics,
  .sd-run-workflow-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-run-pulse {
    position: static;
  }

  .sd-run-live-workroom {
    grid-template-columns: 1fr;
  }

  .sd-run-parallel-workroom {
    grid-template-columns: 1fr;
  }

  .sd-run-live-rail {
    position: static;
  }

  .sd-run-pulse-head,
  .sd-run-current-focus,
  .sd-run-child-context,
  .sd-run-work-alert,
  .sd-run-parallel-head,
  .sd-run-parallel-lane > header,
  .sd-run-workflow-head,
  .sd-run-workflow-run > header,
  .sd-run-workflow-phase-body > header,
  .sd-run-workflow-items > li {
    display: grid;
  }

  .sd-run-work-graph-actions,
  .sd-run-workflow-item-actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .sd-run-progress-steps {
    grid-template-columns: repeat(5, minmax(96px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .sd-run-step-chip {
    min-width: 132px;
  }
}

.sd-watch-event {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--sd-line);
  border-left-width: 4px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
  animation: sd-reveal var(--sd-duration-panel) ease-out;
}

/* The one open/appear choreography: fade + 3px rise. Consumed by watch
   events, disclosure bodies, the workspace switcher, and flash entrance. */
@keyframes sd-reveal {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sd-watch-event.is-user {
  border-left-color: var(--sd-accent);
  background: color-mix(in oklch, var(--sd-accent) 4%, var(--sd-paper-strong));
}

.sd-watch-event.is-assistant {
  border-left-color: var(--sd-teal);
}

.sd-watch-event.is-tool {
  border-left-color: var(--sd-blue);
}

.sd-watch-event.is-tool[data-status="ready"] {
  border-left-color: var(--sd-sage);
}

.sd-watch-event.is-tool[data-status="error"] {
  border-left-color: var(--sd-danger);
  background: color-mix(in oklch, var(--sd-danger) 5%, var(--sd-paper-strong));
}

.sd-watch-event.is-system {
  border-left-color: var(--sd-muted);
}

.sd-watch-event.is-approval {
  border-left-color: var(--sd-warning);
  background: color-mix(in oklch, var(--sd-warning) 8%, var(--sd-paper-strong));
}

.sd-watch-event.is-note {
  border-left-color: var(--sd-line);
}

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

.sd-watch-event-speaker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sd-watch-event-avatar {
  width: 8px;
  height: 8px;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-muted);
  flex-shrink: 0;
}

.sd-watch-event.is-user .sd-watch-event-avatar { background: var(--sd-accent); }
.sd-watch-event.is-assistant .sd-watch-event-avatar { background: var(--sd-teal); }
.sd-watch-event.is-tool .sd-watch-event-avatar { background: var(--sd-blue); }
.sd-watch-event.is-tool[data-status="ready"] .sd-watch-event-avatar { background: var(--sd-sage); }
.sd-watch-event.is-tool[data-status="error"] .sd-watch-event-avatar { background: var(--sd-danger); }
.sd-watch-event.is-system .sd-watch-event-avatar { background: var(--sd-muted); }
.sd-watch-event.is-approval .sd-watch-event-avatar { background: var(--sd-warning); }

.sd-watch-event-label {
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sd-watch-event-meta-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sd-watch-event-duration {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-variant-numeric: tabular-nums;
}

.sd-watch-tool-name {
  background: color-mix(in oklch, var(--sd-blue) 10%, transparent);
  border-radius: var(--sd-radius);
  padding: 2px 8px;
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-body);
  font-weight: 700;
  color: var(--sd-blue);
}

.sd-watch-tool-hint {
  margin: 0;
  color: var(--sd-muted);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-body);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sd-watch-event-result-callout {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--sd-radius);
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-body);
  line-height: 1.4;
  overflow-wrap: anywhere;
  border-left: 3px solid var(--sd-line);
}

.sd-watch-event-result-callout.is-ready {
  background: color-mix(in oklch, var(--sd-sage) 8%, var(--sd-paper));
  border-left-color: var(--sd-sage);
}

.sd-watch-event-result-callout.is-error {
  background: color-mix(in oklch, var(--sd-danger) 8%, var(--sd-paper));
  border-left-color: var(--sd-danger);
}

.sd-watch-event-body {
  margin: 0;
  color: var(--sd-ink);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* When the event body wraps a parsed markdown document, the inner elements
   already encode their own block structure; reset pre-wrap so HEEx-template
   whitespace doesn't render as huge vertical gaps. */
.sd-watch-event-body > .sd-markdown-document {
  white-space: normal;
}

.sd-watch-event-body > .sd-markdown-document .sd-markdown-preview > * {
  margin: 0 0 6px;
}

.sd-watch-event-body > .sd-markdown-document .sd-markdown-preview > *:last-child {
  margin-bottom: 0;
}

.sd-watch-event-details,
.sd-watch-event-markdown {
  display: grid;
  gap: 8px;
}

.sd-watch-event-details summary,
.sd-watch-event-markdown summary {
  cursor: pointer;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
}

.sd-watch-tool-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.sd-watch-tool-facts > div {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  background: var(--sd-paper);
  min-width: 0;
}

.sd-watch-tool-facts dt {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sd-watch-tool-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--sd-text-body-sm);
}

.sd-watch-event-detail-block {
  display: grid;
  gap: 6px;
}

.sd-watch-event-detail-block > span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sd-watch-event-details pre {
  margin-top: 6px;
  max-height: 260px;
  overflow: auto;
}

.sd-watch-event-preview {
  color: var(--sd-muted);
}

.sd-watch-event-markdown-body {
  padding: 10px 12px;
  background: var(--sd-paper);
}

@media (max-width: 760px) {
  .sd-watch-tool-facts {
    grid-template-columns: 1fr;
  }
}

.sd-jump-latest {
  display: none;
  justify-self: center;
  margin-top: 6px;
  padding: 8px 14px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
  cursor: pointer;
}

.sd-watch-events[data-followed="false"] ~ .sd-jump-latest {
  display: inline-flex;
}

.sd-preview-rail {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
  background: color-mix(in oklch, var(--sd-surface) 94%, var(--sd-paper));
  box-shadow: var(--sd-shadow);
  padding: 15px;
}

.sd-preview-heading h2 {
  font-size: var(--sd-text-title);
  line-height: 1.2;
}

.sd-preview-list,
.sd-checklist {
  display: grid;
  gap: 8px;
}

.sd-preview-item {
  display: grid;
  gap: 4px;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 75%, transparent);
  padding-top: 9px;
}

.sd-preview-item span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-preview-item strong {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.sd-preview-item p {
  color: var(--sd-muted);
  line-height: 1.4;
}

.sd-checkline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  background: var(--sd-paper-strong);
  padding: 9px;
}

.sd-checkline span:not(.sd-status):last-child {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.35;
}

.sd-preview-notice {
  border: 1px solid color-mix(in oklch, var(--sd-accent) 26%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-accent-soft) 25%, var(--sd-paper-strong));
  color: var(--sd-muted);
  line-height: 1.45;
  padding: 10px;
}

.sd-launch-consequence-grid {
  display: grid;
  gap: 10px;
}

.sd-launch-consequence-card {
  display: grid;
  gap: 10px;
  background: var(--sd-paper-strong);
  padding: 11px;
}

.sd-launch-consequence-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.sd-launch-consequence-head p {
  color: var(--sd-muted);
  line-height: 1.42;
}

.sd-launch-consequence-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px;
  margin: 0;
}

.sd-launch-consequence-card dt {
  color: var(--sd-subtle);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-launch-consequence-card dd {
  margin: 2px 0 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sd-launch-upload {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.sd-launch-upload input[type="file"] {
  width: 100%;
}

.sd-launch-upload-list {
  gap: 8px;
}

.sd-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sd-capability-card {
  display: grid;
  gap: 12px;
  align-content: space-between;
  background: var(--sd-paper-strong);
  min-height: 150px;
  padding: 12px;
}

.sd-capability-card h3 {
  margin-top: 4px;
  font-size: var(--sd-text-title);
  line-height: 1.25;
}

.sd-capability-card p {
  margin-top: 4px;
  color: var(--sd-muted);
  line-height: 1.43;
}

.sd-row-between {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.sd-row-between a {
  color: var(--sd-accent);
  font-size: var(--sd-text-body);
  font-weight: 700;
  text-decoration: none;
}

.sd-form-section {
  display: grid;
  min-width: 0;
  overflow: hidden;
  background: var(--sd-paper-strong);
}

.sd-form-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.28fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
  padding: 14px;
}

.sd-form-section > *,
.sd-form-row > * {
  min-width: 0;
  max-width: 100%;
}

.sd-form-row + .sd-form-row {
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-form-row-label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-form-row-label strong {
  font-size: var(--sd-text-heading);
  line-height: 1.3;
}

.sd-form-row-label p {
  color: var(--sd-muted);
  line-height: 1.42;
}

.sd-form-row-control {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* Theme-correct error/success notices — token fills (the old hard-coded
   oklch pink rendered as a light slab in dark mode), ink body text with the
   tone carried by the left bar + border, matching the callout recipe. */
.error {
  border: 1px solid color-mix(in oklch, var(--sd-danger) 50%, var(--sd-line));
  border-left-width: 4px;
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-error-soft) 62%, var(--sd-paper-strong));
  color: var(--sd-ink);
  padding: 10px;
  overflow-wrap: anywhere;
}

.success {
  border: 1px solid color-mix(in oklch, var(--sd-sage) 42%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-ok-soft) 62%, var(--sd-paper-strong));
  color: var(--sd-ink);
  padding: 10px;
}

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

.sd-usage-breakdown {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.sd-usage-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  background: color-mix(in oklch, var(--sd-paper-strong) 90%, var(--sd-surface-muted));
  padding: 12px;
}

.sd-usage-breakdown-row > * {
  min-width: 0;
}

.sd-usage-breakdown-row strong {
  display: block;
  margin-top: 2px;
  font-size: var(--sd-text-title);
  line-height: 1.3;
}

.sd-usage-breakdown-row p {
  margin-top: 4px;
  color: var(--sd-muted);
  line-height: 1.4;
}

.sd-usage-breakdown-row > span {
  color: var(--sd-ink);
  font-weight: 700;
  white-space: nowrap;
}

.sd-worker-home {
  min-width: 0;
}

.sd-playbook-home-grid {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.24fr) minmax(320px, 0.76fr);
  min-width: 0;
}

.sd-playbook-home-rail {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sd-playbook-overview-card,
.sd-playbook-promotion-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  background: var(--sd-fill-glass);
  padding: 16px;
}

.sd-playbook-overview-card h3 {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.sd-playbook-overview-card .sd-list-row {
  align-items: center;
}

.sd-playbook-overview-card .sd-list-row p {
  margin-top: 3px;
}

.sd-playbook-promotion-card {
  border-color: color-mix(in oklch, var(--sd-warning) 44%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-warning) 11%, var(--sd-paper-strong));
}

.sd-playbook-promotion-card.is-ready,
.sd-playbook-promotion-card.is-active,
.sd-playbook-promotion-card.is-published {
  border-color: color-mix(in oklch, var(--sd-teal) 34%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-sage) 10%, var(--sd-paper-strong));
}

.sd-playbook-promotion-card.is-blocked,
.sd-playbook-promotion-card.is-setup_required,
.sd-playbook-promotion-card.is-degraded {
  border-color: color-mix(in oklch, var(--sd-warning) 50%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-warning) 12%, var(--sd-paper-strong));
}

.sd-playbook-promotion-card strong {
  color: var(--sd-ink);
  line-height: 1.3;
}

.sd-playbook-promotion-card p,
.sd-playbook-overview-card p {
  color: var(--sd-muted);
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
}

.sd-progress-bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-surface-muted) 80%, var(--sd-paper-strong));
}

.sd-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sd-accent), var(--sd-teal));
  transition: width 320ms var(--sd-ease-standard);
}

.sd-worker-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  background: var(--sd-paper-strong);
  padding: 14px;
}

.sd-worker-summary > * {
  min-width: 0;
}

.sd-worker-summary strong {
  display: block;
  margin-top: 3px;
  font-size: var(--sd-text-title);
  line-height: 1.28;
}

.sd-worker-summary p {
  margin-top: 5px;
  color: var(--sd-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sd-capability-panel-summary {
  align-items: stretch;
  background:
    linear-gradient(
      135deg,
      color-mix(in oklch, var(--sd-accent-soft) 14%, var(--sd-paper-strong)),
      var(--sd-paper-strong) 52%
    );
}

.sd-capability-summary-strip,
.sd-capability-preview-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sd-capability-summary-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: stretch;
  min-width: min(420px, 100%);
}

.sd-capability-summary-item,
.sd-capability-preview-card {
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 50%, var(--sd-paper-strong));
  color: inherit;
  text-decoration: none;
}

.sd-capability-summary-item {
  display: grid;
  gap: 4px;
  padding: 9px;
}

.sd-capability-summary-item span {
  color: var(--sd-muted);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.sd-capability-summary-item strong,
.sd-capability-preview-card strong {
  color: var(--sd-ink);
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.sd-capability-preview-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sd-capability-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 10px;
}

.sd-capability-preview-card > * {
  min-width: 0;
}

.sd-capability-preview-card p {
  margin-top: 5px;
  color: var(--sd-muted);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.sd-capability-more {
  box-shadow: none;
  background: var(--sd-fill-well);
}

.sd-worker-overview-grid,
.sd-worker-run-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.sd-worker-run-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sd-worker-contract-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 10px;
  min-width: 0;
}

.sd-worker-contract-grid > * {
  min-width: 0;
}

.sd-worker-prompt-card,
.sd-worker-io-card,
.sd-worker-policy-card,
.sd-worker-access-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  background: var(--sd-paper-strong);
  padding: 12px;
}

.sd-worker-prompt-card strong,
.sd-worker-io-card strong,
.sd-worker-policy-card strong,
.sd-worker-access-card strong {
  display: block;
  margin-top: 3px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.sd-worker-prompt-card p,
.sd-worker-io-card p,
.sd-worker-policy-card p,
.sd-worker-access-card p {
  margin-top: 4px;
  color: var(--sd-muted);
  line-height: 1.44;
  overflow-wrap: anywhere;
}

.sd-prompt-excerpt {
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
}

.sd-io-strip,
.sd-policy-strip,
.sd-capability-overview-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sd-io-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sd-io-strip > div,
.sd-known-limits,
.sd-policy-item,
.sd-capability-overview-row {
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 76%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 56%, var(--sd-paper-strong));
  padding: 10px;
}

.sd-io-strip span,
.sd-policy-item span {
  color: var(--sd-info);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-token-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.sd-token-list li {
  max-width: 100%;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
  padding: 5px 8px;
}

.sd-known-limits {
  display: grid;
  gap: 6px;
}

.sd-worker-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.sd-worker-card-head > * {
  min-width: 0;
}

.sd-profile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 4px 0 0;
}

.sd-profile-facts div {
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 78%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 54%, var(--sd-paper-strong));
  padding: 7px;
}

.sd-profile-facts dt {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
}

.sd-profile-facts dd {
  margin: 2px 0 0;
  color: var(--sd-ink);
  font-weight: 700;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.sd-policy-item strong {
  display: block;
  margin-top: 4px;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.sd-capability-overview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.sd-capability-overview-row span {
  min-width: 0;
}

.sd-capability-overview-row small,
.sd-capability-meta,
.sd-capability-consequence {
  color: var(--sd-muted);
  line-height: 1.36;
}

.sd-capability-overview-row small {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.sd-capability-meta {
  margin-top: 3px;
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
}

.sd-capability-consequence {
  margin-top: 4px;
  font-size: var(--sd-text-body);
}

.sd-channel-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sd-channel-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: var(--sd-paper-strong);
  padding: 12px;
}

.sd-channel-row > * {
  min-width: 0;
}

.sd-channel-row.is-disabled {
  background: var(--sd-fill-well);
}

.sd-channel-row strong {
  display: block;
  line-height: 1.28;
}

.sd-channel-row p {
  margin-top: 3px;
  color: var(--sd-muted);
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.sd-channel-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--sd-fill-well);
  color: var(--sd-muted);
}

.sd-channel-state {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.sd-schedule-guide,
.sd-schedule-receipt {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 16%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-paper-strong) 94%, var(--sd-surface-muted));
  padding: 12px;
}

.sd-schedule-receipt {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  background: color-mix(in oklch, var(--sd-success-soft) 30%, var(--sd-paper-strong));
  border-color: color-mix(in oklch, var(--sd-success) 28%, var(--sd-line));
}

.sd-schedule-receipt > * {
  min-width: 0;
}

.sd-schedule-receipt strong,
.sd-schedule-guide-head strong {
  display: block;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.sd-schedule-receipt p,
.sd-schedule-guide-head p {
  color: var(--sd-muted);
  line-height: 1.42;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.sd-schedule-guide-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.sd-schedule-guide-head > * {
  min-width: 0;
}

.sd-schedule-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-schedule-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}

.sd-schedule-presets legend {
  grid-column: 1 / -1;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.sd-schedule-preset {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  background: var(--sd-paper-strong);
  cursor: pointer;
  padding: 10px;
}

.sd-schedule-preset:has(input:checked) {
  border-color: color-mix(in oklch, var(--sd-accent) 42%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent-soft) 22%, var(--sd-paper-strong));
}

.sd-schedule-preset.is-disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.sd-schedule-preset input {
  margin-top: 2px;
}

.sd-schedule-preset span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sd-schedule-preset strong,
.sd-schedule-preset small {
  overflow-wrap: anywhere;
}

.sd-schedule-preset small {
  color: var(--sd-muted);
  line-height: 1.32;
}

.sd-schedule-inputs {
  background: var(--sd-paper-strong);
}

.sd-schedule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.sd-schedule-actions .sd-action-disabled-note {
  flex: 1 1 220px;
}

.sd-capability-band {
  display: grid;
  gap: 10px;
  min-width: 0;
  background: var(--sd-paper-strong);
  padding: 12px;
}

.sd-capability-band-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.sd-capability-band-head > * {
  min-width: 0;
}

.sd-capability-band-head strong {
  display: block;
  margin-top: 3px;
}

.sd-row-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.sd-source-run-callout {
  border-color: color-mix(in oklch, var(--sd-accent) 24%, var(--sd-line));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--sd-accent-soft) 18%, var(--sd-paper-strong)),
      var(--sd-paper-strong)
    );
}

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

.sd-source-run-id {
  max-width: 100%;
  border: 1px solid color-mix(in oklch, var(--sd-line) 78%, transparent);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  line-height: 1.2;
  overflow: hidden;
  padding: 5px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-proposal-decision-header {
  align-items: start;
  background: var(--sd-paper-strong);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.28fr);
  padding: 13px;
}

.sd-proposal-decision-header strong {
  display: block;
  font-size: var(--sd-text-title);
  line-height: 1.3;
  margin-top: 4px;
}

.sd-proposal-revise {
  border-top: 1px solid var(--sd-line);
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.sd-proposal-decision-header p,
.sd-proposal-decision-meta span {
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-proposal-decision-meta {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.sd-disclosure {
  display: grid;
  gap: 12px;
  background: var(--sd-paper-strong);
  box-shadow: var(--sd-shadow);
  padding: 12px;
}

.sd-disclosure summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--sd-ink);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  min-width: 0;
}

.sd-disclosure summary > * {
  min-width: 0;
}

details.sd-disclosure:not([open]) > :not(summary) {
  display: none;
}

.sd-disclosure summary::-webkit-details-marker {
  display: none;
}

.sd-disclosure summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform 140ms ease;
}

.sd-disclosure[open] summary::after {
  transform: rotate(225deg);
}

@media (prefers-reduced-motion: no-preference) {
  .sd-disclosure[open] > :not(summary) {
    animation: sd-reveal var(--sd-duration-base) ease-out;
  }
}

.sd-disclosure > p {
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-mcp-visibility-detail,
.sd-setup-source-management {
  background: color-mix(in oklch, var(--sd-paper-strong) 72%, transparent);
  box-shadow: none;
  padding: 10px 12px;
}

.sd-mcp-visibility-detail .sd-list,
.sd-setup-source-management .sd-list {
  margin-top: 2px;
}

.sd-setup-source-detail-list,
.sd-setup-source-action-list {
  max-height: min(58vh, 620px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-color: color-mix(in oklch, var(--sd-line) 82%, var(--sd-muted)) transparent;
  scrollbar-width: thin;
}

.sd-setup-source-action-list {
  max-height: min(62vh, 700px);
}

.sd-setup-source-detail-list:focus-visible,
.sd-setup-source-action-list:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--sd-accent) 60%, white);
  outline-offset: 3px;
}

.sd-setup-step-tag,
.sd-setup-bundle-status {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.sd-setup-step-tag {
  align-self: center;
}

.sd-tool-source-state,
.sd-setup-bundle-state {
  justify-content: flex-start;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sd-panel-actions .sd-tool-source-state,
.sd-setup-source-management > summary .sd-tool-source-state,
[data-testid="setup-mcp-cached-tools"] > summary .sd-tool-source-state {
  justify-content: flex-end;
  margin-left: auto;
  text-align: right;
}

.sd-setup-bundle-status {
  color: var(--sd-accent);
}

.sd-setup-capability-bundle {
  background: color-mix(in oklch, var(--sd-paper-strong) 76%, var(--sd-surface-muted) 24%);
  box-shadow: none;
}

.sd-setup-capability-bundle summary {
  align-items: start;
}

.sd-setup-capability-summary {
  display: grid;
  gap: 4px;
}

.sd-setup-capability-summary strong {
  color: var(--sd-ink);
}

.sd-setup-capability-summary small {
  color: var(--sd-muted);
  display: -webkit-box;
  font-size: var(--sd-text-body);
  font-weight: 500;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.sd-agent-runs-history > summary,
.sd-agent-steps-detail > summary,
.sd-agent-output-detail > summary,
.sd-agent-quality-detail > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.sd-agent-runs-history > summary::after,
.sd-agent-steps-detail > summary::after,
.sd-agent-output-detail > summary::after,
.sd-agent-quality-detail > summary::after {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.sd-advanced-controls {
  background: var(--sd-fill-well);
  min-width: 0;
  max-width: 100%;
}

.sd-template-grid,
.sd-inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.sd-template-card,
.sd-inventory-card {
  display: grid;
  gap: 8px;
  min-height: 142px;
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  padding: 12px;
  text-align: left;
  text-decoration: none;
}

.sd-template-card {
  cursor: pointer;
}

.sd-template-card:hover,
.sd-inventory-card:hover {
  border-color: var(--sd-line-stronger);
  box-shadow: var(--sd-shadow-soft);
}

.sd-template-card strong,
.sd-inventory-card strong {
  line-height: 1.25;
}

.sd-template-card p,
.sd-inventory-card p {
  color: var(--sd-muted);
  line-height: 1.42;
}

.sd-template-section {
  border-top: 1px solid var(--sd-line);
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.sd-template-section > summary {
  cursor: pointer;
  font-weight: 700;
}

.sd-agent-wizard {
  display: grid;
  gap: 12px;
}

.sd-create-worker-builder {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.05fr);
}

.sd-auto-research-page .sd-page-work-area {
  max-width: 100%;
}

.sd-auto-research-page .sd-page-primary {
  display: grid;
  gap: 12px;
}

.sd-create-worker-builder.is-save-playbook {
  grid-template-columns: minmax(420px, 0.9fr) minmax(420px, 1.1fr);
}

.sd-create-worker-brief-pane,
.sd-create-worker-preview-pane,
.sd-factory-preview-pane,
.sd-factory-progress-rail {
  min-width: 0;
}

.sd-create-worker-preview-pane {
  position: sticky;
  top: 18px;
}

.sd-auto-agent-brief-actions {
  align-items: stretch;
  background: var(--sd-fill-glass);
  border: 1px solid color-mix(in oklch, var(--sd-accent) 20%, var(--sd-line));
  border-radius: var(--sd-radius);
  display: grid;
  gap: 8px;
  padding: 10px;
}

.sd-auto-agent-brief-actions:not(.is-started) {
  display: none;
}

.sd-auto-agent-brief-actions .sd-loop-strip {
  grid-template-columns: minmax(0, 1fr);
}

.sd-auto-agent-brief-actions .sd-loop-strip-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sd-auto-agent-primary-row {
  align-items: center;
  background: color-mix(in oklch, var(--sd-paper-strong) 96%, transparent);
  border: 1px solid color-mix(in oklch, var(--sd-accent) 16%, var(--sd-line));
  border-radius: var(--sd-radius);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 8px;
}

.sd-auto-agent-primary-row.is-ready {
  border-color: color-mix(in oklch, var(--sd-teal) 28%, var(--sd-line));
}

.sd-auto-agent-primary-submit {
  justify-content: center;
  min-height: 44px;
  min-width: 148px;
}

.sd-save-playbook-snapshot {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 28%, var(--sd-line));
  border-radius: var(--sd-radius-lg);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--sd-accent) 7%, transparent), transparent 54%),
    color-mix(in oklch, var(--sd-paper-strong) 94%, var(--sd-surface) 6%);
}

.sd-save-playbook-snapshot-head,
.sd-save-playbook-source {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.sd-save-playbook-snapshot-head > div,
.sd-save-playbook-source > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sd-save-playbook-snapshot h3 {
  margin: 0;
  color: var(--sd-ink);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.65rem);
  line-height: 1.12;
}

.sd-save-playbook-snapshot p {
  max-width: 64ch;
  margin: 0;
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-save-playbook-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sd-save-playbook-summary-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  background: color-mix(in oklch, var(--sd-paper) 88%, transparent);
}

.sd-save-playbook-summary-grid span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-save-playbook-summary-grid strong {
  color: var(--sd-ink);
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.sd-save-playbook-warning {
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--sd-warning) 46%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-warning) 12%, var(--sd-paper));
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 600;
  line-height: 1.45;
}

.sd-save-playbook-source {
  padding-top: 2px;
}

.sd-save-playbook-source .sd-actions {
  justify-content: flex-end;
  min-width: 220px;
}

.sd-auto-research-setup-details {
  margin-top: 0;
}

.sd-auto-research-setup-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
  margin-top: 10px;
  min-width: 0;
}

.sd-auto-research-setup-grid > .sd-panel:last-child {
  grid-column: 1 / -1;
}

.sd-action-disabled-note {
  display: grid;
  gap: 3px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
  min-width: 0;
  white-space: normal;
}

.sd-action-disabled-note strong {
  color: var(--sd-ink);
  font-weight: 700;
}

.sd-action-disabled-note a {
  color: var(--sd-accent-strong);
  font-weight: 700;
}

.sd-configurator-chat-lede,
.sd-configurator-question {
  align-items: start;
  background: color-mix(in oklch, var(--sd-paper-strong) 92%, transparent);
  border: 1px solid color-mix(in oklch, var(--sd-sage) 24%, var(--sd-line));
  border-radius: var(--sd-radius);
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 12px 14px;
}

.sd-configurator-chat-lede {
  background: color-mix(in oklch, var(--sd-sage) 10%, var(--sd-paper-strong));
}

.sd-configurator-question {
  border-color: var(--sd-line);
}

.sd-configurator-avatar {
  align-items: center;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--sd-accent), color-mix(in oklch, var(--sd-accent) 62%, var(--sd-teal)));
  border-radius: var(--sd-radius-pill);
  color: var(--sd-on-accent);
  display: inline-flex;
  font-size: var(--sd-text-label);
  font-weight: 700;
  justify-content: center;
  margin-top: 1px;
  width: 28px;
}

.sd-configurator-avatar.is-question {
  background: color-mix(in oklch, var(--sd-sage) 22%, var(--sd-paper-strong));
  border: 1px solid color-mix(in oklch, var(--sd-sage) 32%, var(--sd-line));
  color: var(--sd-ink);
}

.sd-configurator-chat-lede strong,
.sd-configurator-question strong {
  display: block;
  font-size: var(--sd-text-heading);
  line-height: 1.3;
}

.sd-configurator-chat-lede p,
.sd-configurator-question p {
  color: var(--sd-muted);
  line-height: 1.4;
  margin-top: 3px;
}

.sd-live-playbook-summary {
  display: grid;
  gap: 12px;
}

.sd-live-summary-card {
  background: var(--sd-fill-glass);
  border: 1px solid color-mix(in oklch, var(--sd-sage) 18%, var(--sd-line));
  border-radius: var(--sd-radius);
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px 16px;
}

.sd-live-summary-card strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

.sd-live-summary-card p {
  color: var(--sd-muted);
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
}

.sd-auto-agent-priority-strip {
  align-items: stretch;
  background: var(--sd-paper-strong);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 0.42fr) repeat(auto-fit, minmax(220px, 1fr));
  padding: 12px;
}

.sd-priority-strip-copy,
.sd-priority-row {
  min-width: 0;
}

.sd-priority-strip-copy strong {
  display: block;
  line-height: 1.25;
}

.sd-priority-row {
  align-items: start;
  color: var(--sd-ink);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 11px;
  text-decoration: none;
}

.sd-priority-action {
  color: var(--sd-accent-strong);
  display: block;
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.sd-priority-row p {
  color: var(--sd-muted);
  line-height: 1.4;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.sd-agent-plan-inline {
  border-top: 1px solid var(--sd-line);
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.sd-worker-preview-hero {
  background: color-mix(in oklch, var(--sd-surface-muted) 64%, var(--sd-paper-strong));
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px;
}

.sd-worker-preview-hero strong {
  display: block;
  font-size: var(--sd-text-title);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sd-worker-preview-hero p {
  color: var(--sd-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sd-worker-preview-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.sd-worker-preview-section,
.sd-worker-preview-list {
  align-content: start;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.sd-worker-preview-section {
  background: var(--sd-paper-strong);
}

.sd-worker-preview-list {
  background: color-mix(in oklch, var(--sd-paper-strong) 84%, var(--sd-surface-muted));
}

.sd-worker-preview-why {
  display: grid;
  gap: 10px;
}

.sd-worker-preview-why[open] > summary {
  margin-bottom: 10px;
}

.sd-worker-preview-list-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.sd-worker-preview-row,
.sd-proof-row {
  align-items: start;
  background: var(--sd-paper-strong);
  border: 1px solid color-mix(in oklch, var(--sd-line) 74%, transparent);
  border-radius: var(--sd-radius);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 10px;
}

.sd-worker-preview-row strong,
.sd-proof-row strong {
  display: block;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.sd-worker-preview-row p,
.sd-proof-row p,
.sd-proof-row small {
  color: var(--sd-muted);
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.sd-now-progress-strip {
  background: color-mix(in oklch, var(--sd-paper-strong) 88%, var(--sd-surface-muted));
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.sd-auto-agent-live-status {
  align-items: flex-start;
  background: color-mix(in oklch, var(--sd-accent) 8%, var(--sd-paper-strong));
  border: 1px solid color-mix(in oklch, var(--sd-accent) 26%, var(--sd-line));
  border-radius: var(--sd-radius);
  display: grid;
  gap: 9px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  padding: 10px 12px;
}

.sd-auto-agent-live-status strong {
  display: block;
  font-size: var(--sd-text-body);
  line-height: 1.28;
}

.sd-auto-agent-live-status p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.36;
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.sd-auto-agent-live-status .sd-auto-agent-live-activity {
  color: color-mix(in oklch, var(--sd-muted) 86%, var(--sd-ink));
  font-size: var(--sd-text-label);
  font-weight: 600;
}

.sd-auto-agent-live-dot {
  background: var(--sd-accent);
  border-radius: var(--sd-radius-pill);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--sd-accent) 18%, transparent);
  display: block;
  height: 9px;
  margin-top: 5px;
  width: 9px;
}

.sd-auto-agent-live-status.is-running .sd-auto-agent-live-dot {
  animation: sd-status-pulse 1.4s ease-in-out infinite;
}

.sd-auto-agent-live-status.is-awaiting_user {
  background: color-mix(in oklch, var(--sd-warning) 8%, var(--sd-paper-strong));
  border-color: color-mix(in oklch, var(--sd-warning) 28%, var(--sd-line));
}

.sd-auto-agent-live-status.is-awaiting_user .sd-auto-agent-live-dot,
.sd-auto-agent-live-status.is-blocked .sd-auto-agent-live-dot {
  background: var(--sd-warning);
}

.sd-auto-agent-live-status.is-ready .sd-auto-agent-live-dot,
.sd-auto-agent-live-status.is-done .sd-auto-agent-live-dot {
  background: var(--sd-sage);
}

.sd-now-progress-head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-now-progress-head strong {
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.sd-now-progress-items {
  display: grid;
  gap: 7px;
}

.sd-now-progress-item {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.sd-now-progress-dot {
  background: var(--sd-line-strong);
  border-radius: var(--sd-radius-pill);
  height: 9px;
  margin-top: 5px;
  width: 9px;
}

.sd-now-progress-item.is-running .sd-now-progress-dot {
  background: var(--sd-accent);
}

.sd-now-progress-item.is-done .sd-now-progress-dot {
  background: var(--sd-sage);
}

.sd-now-progress-item.is-blocked .sd-now-progress-dot {
  background: var(--sd-warning);
}

.sd-now-progress-item strong {
  display: block;
  font-size: var(--sd-text-body);
  line-height: 1.3;
}

.sd-now-progress-item p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.36;
  margin: 1px 0 0;
  overflow-wrap: anywhere;
}

.sd-proof-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sd-grid.two-even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.sd-setup-nav-scroll {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-gutter: stable;
  padding-bottom: 2px;
}

.sd-setup-nav {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 12px 0 18px;
  min-width: 100%;
  width: max-content;
}

.sd-setup-nav-item {
  align-items: center;
  background: var(--sd-paper-strong);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  display: inline-flex;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  text-decoration: none;
}

.sd-setup-nav-item:hover {
  border-color: var(--sd-line-stronger);
  color: var(--sd-ink);
}

.sd-setup-nav-item-active {
  border-color: color-mix(in oklch, var(--sd-accent) 45%, var(--sd-line));
  color: var(--sd-ink);
}

.sd-setup-nav-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.sd-setup-nav-state::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-muted) 54%, transparent);
}

.sd-setup-nav-state.is-ready::before {
  background: var(--sd-sage);
}

.sd-setup-nav-state.is-attention::before,
.sd-setup-nav-state.is-warning::before {
  background: var(--sd-warning);
}

.sd-setup-nav-state.is-deferred::before {
  background: var(--sd-blue);
}

[data-testid="setup-repair"]:not(.sd-setup-subarea) [data-testid="setup-repair-spotlight"] {
  border-color: color-mix(in oklch, var(--sd-sage) 34%, var(--sd-line));
  background:
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--sd-sage) 12%, var(--sd-paper-strong)) 0,
      color-mix(in oklch, var(--sd-paper-strong) 92%, transparent) 48%
    );
  box-shadow: none;
  padding: 10px 12px;
}

[data-testid="setup-repair"]:not(.sd-setup-subarea) .sd-setup-spotlight-row {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0;
}

[data-testid="setup-repair"]:not(.sd-setup-subarea) [data-testid="setup-consequences"],
[data-testid="setup-repair"]:not(.sd-setup-subarea) [data-testid="setup-readiness"],
[data-testid="setup-repair"]:not(.sd-setup-subarea) [data-testid="setup-scenarios"],
[data-testid="setup-repair"]:not(.sd-setup-subarea) [data-testid="setup-readiness-lanes"] {
  border-color: color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: color-mix(in oklch, var(--sd-paper-strong) 68%, transparent);
  box-shadow: none;
}

[data-testid="setup-repair"]:not(.sd-setup-subarea) [data-testid="setup-repair-queue"] > .sd-empty {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 2px 0 4px;
}

[data-testid="setup-repair"]:not(.sd-setup-subarea) .sd-setup-scenario-list,
[data-testid="setup-repair"]:not(.sd-setup-subarea) .sd-setup-lane-list,
[data-testid="setup-repair"]:not(.sd-setup-subarea) .sd-readiness-hero {
  border-color: color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: color-mix(in oklch, var(--sd-paper-strong) 58%, transparent);
}

.sd-setup-subarea .sd-page-meta-strip {
  display: none;
}

.sd-setup-subarea .sd-page-tabs {
  min-width: 0;
  overflow: hidden;
}

.sd-setup-subarea .sd-setup-nav {
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.sd-setup-subarea .sd-setup-nav-item {
  flex: 0 0 auto;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  font-size: var(--sd-text-body-sm);
}

.sd-setup-subarea .sd-setup-nav-item:not(.sd-setup-nav-item-active) .sd-status {
  width: 9px;
  height: 9px;
  min-height: 9px;
  min-width: 9px;
  overflow: hidden;
  gap: 0;
  padding: 0;
  color: transparent;
}

.sd-setup-subarea .sd-setup-nav-item:not(.sd-setup-nav-item-active) .sd-status-dot {
  display: none;
}

.sd-setup-subarea .sd-page-primary .sd-status {
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 6px;
  min-height: auto;
  padding: 0;
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
}

.sd-setup-subarea .sd-page-primary .sd-status-dot {
  width: 7px;
  height: 7px;
}

.sd-setup-subarea .sd-credential-vault-table,
.sd-setup-subarea .sd-credential-table {
  gap: 0;
}

.sd-setup-subarea .sd-credential-vault-row,
.sd-setup-subarea .sd-credential-row,
.sd-setup-subarea .sd-vault-credential-row {
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 2px;
}

.sd-setup-subarea .sd-credential-vault-row:last-child,
.sd-setup-subarea .sd-credential-row:last-child,
.sd-setup-subarea .sd-vault-credential-row:last-child {
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-setup-subarea .sd-credential-table-head {
  padding-inline: 2px;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.sd-setup-lane-list {
  display: grid;
  gap: 0;
  background: var(--sd-fill-glass);
  overflow: hidden;
}

.sd-setup-lane {
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: transparent;
  overflow: clip;
}

.sd-setup-lane:last-child {
  border-bottom: 0;
}

.sd-setup-lane summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 12px;
}

.sd-setup-lane summary::-webkit-details-marker {
  display: none;
}

.sd-setup-lane summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sd-setup-lane summary strong {
  overflow-wrap: anywhere;
}

.sd-setup-lane summary small {
  color: var(--sd-muted);
  font-weight: 700;
}

.sd-setup-lane[open] summary {
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-setup-lane .sd-list {
  padding: 10px;
}

.sd-setup-graph-intro {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 28%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-accent) 8%, var(--sd-paper-strong));
  padding: 12px;
}

.sd-setup-graph-intro strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
}

.sd-setup-graph-intro p {
  color: var(--sd-muted);
  margin: 0;
}

.sd-setup-scenario-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
  background: var(--sd-fill-glass);
  overflow: hidden;
}

.sd-setup-scenario {
  display: grid;
  gap: 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: transparent;
  padding: 13px;
}

.sd-setup-scenario:last-child {
  border-bottom: 0;
}

.sd-setup-scenario header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sd-setup-scenario h3 {
  margin: 2px 0 4px;
  font-size: var(--sd-text-title);
  line-height: 1.2;
}

.sd-setup-scenario header p {
  color: var(--sd-muted);
  line-height: 1.4;
  margin: 0;
}

.sd-setup-flow {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sd-setup-node {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
  background: transparent;
  padding: 11px;
}

.sd-setup-node:last-child {
  border-bottom: 0;
}

.sd-setup-node::before {
  position: absolute;
  top: -9px;
  left: 18px;
  width: 1px;
  height: 8px;
  background: var(--sd-line);
  content: "";
}

.sd-setup-node:first-child::before {
  display: none;
}

.sd-setup-node-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-setup-node-main span,
.sd-setup-node-meta small {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sd-setup-node-main strong {
  color: var(--sd-ink);
}

.sd-setup-node-main p {
  color: var(--sd-muted);
  line-height: 1.4;
  margin: 0;
}

.sd-setup-node-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 132px;
}

.sd-setup-overview-state {
  white-space: normal;
  overflow-wrap: anywhere;
}

.sd-actions .sd-setup-overview-state,
.sd-setup-node-meta .sd-setup-overview-state,
.sd-access-briefing-head .sd-setup-overview-state {
  justify-content: flex-end;
  text-align: right;
}

.sd-setup-node-meta a {
  color: var(--sd-accent-strong);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  text-decoration: none;
}

.sd-setup-node-meta a:hover {
  text-decoration: underline;
}

.sd-operations-page .sd-page-attention-rail {
  border-color: var(--sd-line);
  background: color-mix(in oklch, var(--sd-paper-strong) 84%, var(--sd-surface) 16%);
  padding: 10px;
}

.sd-operations-overview-deck,
.sd-operations-kpi-strip {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.sd-operations-kpi-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-width: 0;
}

.sd-operations-kpi-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: start;
  min-width: 0;
  padding: 3px 10px 3px 0;
  border-right: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
}

.sd-operations-kpi-item:last-child {
  border-right: 0;
  padding-right: 0;
}

.sd-operations-kpi-item span:first-child {
  display: block;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.sd-operations-kpi-item strong {
  display: block;
  margin-top: 5px;
  font-size: 1.2rem;
  line-height: 1.05;
}

.sd-operations-kpi-item small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-top: 5px;
  color: var(--sd-muted);
  line-height: 1.25;
}

.sd-operations-kpi-item .sd-operations-kpi-state {
  align-self: start;
  justify-self: end;
  margin-top: 1px;
}

.sd-operations-kpi-state,
.sd-operations-roster-state,
.sd-operations-signal-state,
.sd-operations-detail-state {
  justify-self: end;
}

.sd-operations-workroom {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.58fr);
  align-items: start;
  min-width: 0;
}

.sd-operations-workroom > * {
  min-width: 0;
}

.sd-operations-roster-column,
.sd-operations-insight-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-operations-roster-head,
.sd-operations-worker-row {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(142px, max-content);
  align-items: start;
  min-width: 0;
}

.sd-operations-roster-head {
  grid-template-columns: minmax(0, 1fr) minmax(142px, max-content);
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  padding: 0 12px 2px;
  text-transform: none;
}

.sd-operations-roster-head span:nth-child(2) {
  justify-self: end;
}

.sd-operations-roster-head span:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}

.sd-operations-roster-head span:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

.sd-operations-roster-list {
  max-height: min(72vh, 680px);
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.sd-operations-worker-row {
  background: var(--sd-paper-strong);
  grid-template-areas:
    "name status"
    "metrics actions";
  padding: 12px;
}

.sd-operations-worker-row > *,
.sd-operations-worker-name,
.sd-operations-worker-metrics {
  min-width: 0;
}

.sd-operations-worker-name {
  display: grid;
  gap: 5px;
  grid-area: name;
}

.sd-operations-worker-name p {
  color: var(--sd-muted);
  line-height: 1.35;
}

.sd-operations-worker-name > div > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sd-operations-worker-state-cell {
  grid-area: status;
  justify-self: end;
  min-width: 0;
}

.sd-operations-worker-metrics {
  display: grid;
  gap: 6px;
  grid-area: metrics;
  grid-template-columns: repeat(4, minmax(84px, 1fr));
}

.sd-operations-worker-metrics span {
  display: grid;
  gap: 2px;
}

.sd-operations-worker-metrics small {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

.sd-operations-worker-metrics strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.15;
}

.sd-operations-roster-list .sd-actions {
  align-content: start;
  display: grid;
  grid-area: actions;
  gap: 7px;
  justify-content: stretch;
  min-width: 142px;
}

.sd-operations-roster-list .sd-actions .sd-button {
  justify-content: center;
  width: 100%;
}

.sd-operations-signal-strip {
  display: grid;
  gap: 0;
}

.sd-operations-signal-card {
  align-items: center;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 66%, transparent);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 10px 0;
}

.sd-operations-signal-card:first-child {
  border-top: 0;
  padding-top: 0;
}

.sd-operations-signal-card:last-child {
  padding-bottom: 0;
}

.sd-operations-signal-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-operations-signal-card span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.15;
}

.sd-operations-signal-card strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-section);
  line-height: 1;
}

.sd-operations-signal-card small {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
  line-height: 1.35;
}

.sd-operations-action-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.sd-operations-action-grid .sd-button {
  justify-content: center;
  width: 100%;
}

.sd-operations-detail-drawer {
  background: var(--sd-fill-well);
  box-shadow: none;
}

.sd-operations-detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4px;
  max-height: min(68vh, 680px);
  min-width: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.sd-operations-detail-grid .sd-panel {
  background: var(--sd-paper-strong);
  box-shadow: none;
  padding: 12px;
}

.sd-operations-detail-grid .sd-list {
  max-height: min(58vh, 520px);
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.sd-operations-detail-state {
  font-size: var(--sd-text-label);
}

.sd-admin-governance-panel,
.sd-admin-posture-body,
.sd-admin-route-grid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-admin-workroom {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.sd-admin-workroom > * {
  min-width: 0;
}

.sd-admin-column {
  align-content: start;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-admin-member-table,
.sd-admin-policy-grid,
.sd-admin-audit-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sd-admin-member-head,
.sd-admin-member-row,
.sd-admin-policy-card,
.sd-admin-audit-row {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-admin-member-head {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0 12px;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-admin-member-head span:nth-child(2) {
  display: none;
}

.sd-admin-member-head span:nth-child(3) {
  justify-self: end;
}

.sd-admin-member-row {
  grid-template-areas:
    "identity status"
    "role status";
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 5px;
}

.sd-admin-policy-card,
.sd-admin-audit-row,
.sd-admin-member-row {
  align-items: center;
  background: var(--sd-paper-strong);
  padding: 11px;
}

.sd-admin-policy-card {
  grid-template-columns: minmax(0, 1fr);
}

.sd-admin-audit-row {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 4px;
}

.sd-admin-audit-row > .sd-status,
.sd-admin-audit-row > .sd-admin-audit-state {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.sd-admin-member-row > *,
.sd-admin-policy-card > *,
.sd-admin-audit-row > * {
  min-width: 0;
}

.sd-admin-member-identity {
  grid-area: identity;
}

.sd-admin-member-identity strong {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sd-admin-member-role {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 600;
  grid-area: role;
  letter-spacing: 0;
  justify-self: start;
  border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius-xs);
  padding: 2px 8px;
}

.sd-admin-member-state-cell {
  grid-area: status;
  justify-self: end;
  min-width: 0;
}

.sd-admin-member-state,
.sd-admin-policy-state,
.sd-admin-disclosure-state,
.sd-admin-audit-state {
  font-size: var(--sd-text-label);
}

.sd-admin-count-label {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.22;
  white-space: nowrap;
}

.sd-admin-member-row p,
.sd-admin-policy-card p,
.sd-admin-audit-row p {
  color: var(--sd-muted);
  line-height: 1.35;
  margin-top: 3px;
}

.sd-admin-audit-row > span {
  grid-column: 1;
  grid-row: 2;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-admin-security-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.sd-admin-governance-panel > section {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.sd-admin-subhead {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.sd-admin-subhead h3,
.sd-admin-route-row h3 {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.2;
}

.sd-admin-subhead span {
  color: var(--sd-subtle);
  flex: 0 0 auto;
  font-size: var(--sd-text-label);
  font-weight: 700;
}

.sd-admin-posture-drawer {
  background: var(--sd-fill-well);
  box-shadow: none;
}

.sd-admin-route-row {
  align-items: center;
  background: var(--sd-paper-strong);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.sd-admin-route-row > * {
  min-width: 0;
}

.sd-admin-route-row p {
  color: var(--sd-muted);
  line-height: 1.4;
  margin-top: 3px;
}

.sd-admin-controls > .sd-stack {
  margin-top: 12px;
}

.sd-admin-member-control-list,
.sd-admin-api-key-list,
.sd-admin-audit-scroll {
  max-height: min(62vh, 620px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.sd-admin-audit-scroll {
  display: grid;
  gap: 7px;
  max-height: min(62vh, 560px);
  min-width: 0;
}

@media (max-width: 1240px) {
  .sd-operations-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sd-operations-kpi-item:nth-child(3n) {
    border-right: 0;
    padding-right: 0;
  }

  .sd-admin-workroom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .sd-operations-workroom {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-admin-workroom {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-operations-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-operations-roster-head {
    display: none;
  }

  .sd-operations-worker-row {
    grid-template-areas:
      "name"
      "status"
      "metrics"
      "actions";
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-operations-worker-state-cell {
    justify-self: start;
  }

  .sd-operations-worker-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-operations-roster-list .sd-actions {
    justify-content: flex-start;
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .sd-operations-page .sd-page-attention-rail {
    padding: 10px;
  }

  .sd-operations-kpi-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .sd-operations-kpi-item {
    grid-template-columns: minmax(0, 1fr);
    padding: 2px 8px 8px 0;
  }

  .sd-operations-kpi-item:nth-child(3n) {
    border-right: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
    padding-right: 8px;
  }

  .sd-operations-kpi-item:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
  }

  .sd-operations-kpi-item small {
    display: none;
  }

  .sd-operations-kpi-item .sd-operations-kpi-state {
    justify-self: start;
  }

  .sd-admin-member-head {
    display: none;
  }

  .sd-admin-member-row,
  .sd-admin-policy-card,
  .sd-admin-audit-row,
  .sd-admin-security-grid,
  .sd-admin-route-row,
  .sd-operations-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-admin-member-row {
    grid-template-areas:
      "identity"
      "role"
      "status";
  }

  .sd-admin-member-state-cell {
    justify-self: start;
  }

  .sd-admin-audit-row > span {
    white-space: normal;
  }
}

.sd-contract-map {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sd-contract-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--sd-radius);
  color: var(--sd-ink);
  padding: 9px 10px;
  text-decoration: none;
}

.sd-contract-map-row:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
}

.sd-contract-map-row .sd-contract-map-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sd-contract-map-row strong {
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sd-contract-map-row p {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sd-contract-map-count {
  justify-self: end;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.2;
  min-width: 2ch;
  text-align: right;
}

.sd-fl-map-disclosure {
  margin-top: 2px;
}

.sd-fl-map-disclosure > .sd-stack {
  margin-top: 14px;
}

.sd-library-overview {
  gap: 14px;
}

[data-testid="library-overview"] {
  border-color: color-mix(in oklch, var(--sd-line) 70%, transparent);
  background: color-mix(in oklch, var(--sd-paper-strong) 68%, transparent);
  gap: 14px;
  padding: 20px 22px;
  box-shadow: none;
}

[data-testid="library-overview"] .sd-panel-heading {
  display: none;
}

.sd-library-organizer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.sd-library-organizer-copy {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.sd-library-organizer-copy h3 {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.18;
  margin: 0;
}

.sd-library-organizer-copy p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.45;
  margin: 0;
  max-width: 62ch;
}

.sd-library-next-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  min-width: 0;
}

.sd-library-next-card {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 78%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 40%, transparent);
  color: var(--sd-ink);
  text-decoration: none;
}

.sd-library-next-card:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
}

.sd-library-next-card-label {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
}

.sd-library-next-card strong {
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

.sd-library-next-card span:last-child {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.35;
}

.sd-library-area-nav {
  display: block;
  min-width: 0;
}

.sd-library-area-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 4px;
  min-width: 0;
}

.sd-library-area-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 62px;
  padding: 10px 11px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  border-radius: var(--sd-radius);
  background: var(--sd-fill-glass);
  color: var(--sd-ink);
  text-decoration: none;
}

.sd-library-area-card:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
}

.sd-library-area-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
}

.sd-library-area-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sd-library-area-copy b {
  font-size: var(--sd-text-body);
  line-height: 1.2;
}

.sd-library-area-copy span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-library-area-count {
  color: var(--sd-muted);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  font-weight: 700;
  min-width: 2ch;
  text-align: right;
}

[data-testid="library-page-chrome"] .sd-fl-output-preview-copy > span,
[data-testid="library-page-chrome"] .sd-fl-output-document-preview em,
[data-testid="library-page-chrome"] .sd-fl-output-table-preview-head em,
[data-testid="library-page-chrome"] .sd-fl-output-table-preview-grid > .is-header {
  color: var(--sd-muted);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

[data-testid="runs-page-chrome"] .sd-page-meta-strip dt,
[data-testid="launch-page-chrome"] .sd-page-meta-strip dt,
[data-testid="access-governance"] .sd-page-meta-strip dt {
  color: var(--sd-muted);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-fl-search-bar {
  align-items: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 6px;
  grid-template-columns: 1fr;
  margin-top: 4px;
  padding: 0;
}

[data-testid="library-asset-browser"] {
  border-color: color-mix(in oklch, var(--sd-line) 70%, transparent);
  background: color-mix(in oklch, var(--sd-paper-strong) 72%, transparent);
  gap: 12px;
  padding: 22px;
  box-shadow: none;
}

[data-testid="library-asset-browser"] .sd-panel-heading {
  display: none;
}

.sd-fl-primary-filters {
  align-items: end;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(220px, 2.2fr) minmax(118px, 0.56fr) minmax(128px, 0.6fr) auto;
  min-width: 0;
}

.sd-fl-primary-filters .sd-field input,
.sd-fl-primary-filters .sd-field select {
  background: color-mix(in oklch, var(--sd-paper-strong) 82%, var(--sd-surface-muted));
  min-height: 38px;
  padding: 7px 9px;
}

.sd-fl-primary-filters .sd-filter-actions {
  gap: 6px;
  min-height: 38px;
}

.sd-fl-primary-filters .sd-filter-actions .sd-button {
  min-height: 38px;
  padding-inline: 12px;
}

.sd-fl-filter-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sd-fl-advanced-filters {
  border: 0;
  color: var(--sd-muted);
  margin-top: 1px;
  min-width: 0;
  padding: 0;
}

.sd-fl-advanced-filters summary {
  align-items: center;
  border: 1px solid color-mix(in oklch, var(--sd-line) 74%, transparent);
  border-radius: var(--sd-radius-pill);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
}

.sd-fl-advanced-filters[open] {
  background: color-mix(in oklch, var(--sd-surface-muted) 46%, transparent);
  border: 1px solid color-mix(in oklch, var(--sd-line) 62%, transparent);
  border-radius: var(--sd-radius);
  margin-top: 3px;
  padding: 8px;
}

.sd-fl-advanced-filters[open] summary {
  margin-bottom: 8px;
}

.sd-fl-advanced-filters summary:hover,
.sd-fl-advanced-filters summary:focus-visible {
  background: var(--sd-surface-muted);
  color: var(--sd-ink);
}

.sd-fl-advanced-filters:not([open]) > .sd-fl-advanced-filter-grid {
  display: none;
}

.sd-fl-advanced-filter-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
  min-width: 0;
}

.sd-fl-archive-toggle {
  align-self: stretch;
  min-height: 42px;
  padding: 8px 10px;
}

.sd-fl-archive-toggle small {
  color: var(--sd-muted);
  display: block;
  font-size: var(--sd-text-label);
  font-weight: 600;
  line-height: 1.25;
  margin-top: 2px;
}

.sd-fl-featured-header {
  align-items: end;
  border-top: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 2px;
  min-width: 0;
  padding-top: 0;
}

.sd-fl-featured-header > div {
  display: none;
}

.sd-fl-featured-header h3 {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  letter-spacing: 0;
  line-height: 1.18;
  margin: 2px 0 0;
}

.sd-fl-featured-header p {
  color: var(--sd-muted);
  display: block;
  font-size: var(--sd-text-label);
  gap: 0;
  justify-self: end;
  line-height: 1.32;
  margin: 0;
  max-width: 520px;
  text-align: right;
}

.sd-fl-featured-header p strong {
  color: var(--sd-ink);
  display: none;
}

.sd-fl-featured-header p span {
  color: var(--sd-muted);
}

[data-testid="library-asset-browser"] .sd-fl-directory {
  border-color: color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: var(--sd-fill-glass);
}

[data-testid="library-asset-browser"] .sd-fl-drow {
  min-height: 74px;
  background: transparent;
}

[data-testid="library-asset-browser"] .sd-fl-drow:hover {
  background: color-mix(in oklch, var(--sd-accent-soft) 24%, var(--sd-paper-strong));
}

[data-testid="library-asset-browser"] .sd-fl-drow .sd-fl-drow-body b {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

[data-testid="library-asset-browser"] .sd-fl-permpill {
  background: var(--sd-fill-glass);
}

.sd-fl-more-assets {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-top: 6px;
  padding: 0;
}

.sd-fl-more-assets > summary {
  color: var(--sd-muted);
  justify-content: center;
  min-height: 30px;
  padding: 0;
}

.sd-fl-learning-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  min-width: 0;
}

.sd-fl-learning-card {
  align-content: start;
  background: var(--sd-paper-strong);
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
}

.sd-fl-learning-card em {
  align-items: center;
  background: var(--sd-surface-muted);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  display: inline-flex;
  font-size: var(--sd-text-label);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
  padding: 0 7px;
}

.sd-fl-learning-card strong {
  color: var(--sd-ink);
  line-height: 1.25;
}

.sd-fl-learning-card p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.38;
}

.sd-learning-workroom {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  min-width: 0;
}

.sd-learning-workroom > * {
  min-width: 0;
}

.sd-learning-review-note {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.42;
  margin: 0;
}

.sd-learning-review-note span {
  color: var(--sd-muted);
  display: block;
  font-size: var(--sd-text-body);
  margin-top: 4px;
}

.sd-learning-review-lede {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 250px), 0.42fr);
  margin-bottom: 14px;
  min-width: 0;
}

.sd-learning-review-lede p {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.48;
}

.sd-learning-review-lede span {
  color: var(--sd-muted);
  display: block;
  margin-top: 6px;
}

.sd-learning-review-promise {
  background: color-mix(in oklch, var(--sd-accent-soft) 44%, var(--sd-paper-strong));
  border: 1px solid color-mix(in oklch, var(--sd-accent) 24%, var(--sd-line));
  border-radius: var(--sd-radius);
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
}

.sd-learning-review-promise strong {
  color: var(--sd-accent-strong);
  line-height: 1.2;
}

.sd-learning-review-promise span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  margin-top: 0;
}

.sd-learning-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0;
  min-width: 0;
}

.sd-learning-metric {
  background: var(--sd-paper-strong);
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
}

.sd-learning-metric span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}

.sd-learning-metric strong {
  color: var(--sd-ink);
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sd-learning-metric em {
  color: var(--sd-accent-strong);
  font-size: var(--sd-text-body-sm);
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}

.sd-learning-filter-bar {
  grid-template-columns: minmax(min(100%, 220px), 1fr) minmax(min(100%, 220px), 1fr) auto;
}

.sd-learning-result-meta {
  align-items: center;
  color: var(--sd-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
  margin: 12px 0;
  min-width: 0;
}

.sd-learning-result-meta span {
  color: var(--sd-ink);
  font-weight: 700;
}

.sd-learning-result-meta em {
  font-style: normal;
}

.sd-learning-proposal-list {
  display: grid;
  gap: 10px;
  max-height: min(48vh, 460px);
  min-width: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-color: color-mix(in oklch, var(--sd-line) 82%, var(--sd-muted)) transparent;
  scrollbar-width: thin;
}

.sd-learning-proposal-list:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--sd-accent) 60%, white);
  outline-offset: 3px;
}

.sd-learning-batch-form {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-learning-batch-bar {
  align-items: center;
  background: color-mix(in oklch, var(--sd-paper-strong) 82%, var(--sd-accent-soft));
  border: 1px solid color-mix(in oklch, var(--sd-accent) 28%, var(--sd-line));
  border-radius: var(--sd-radius);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
  padding: 11px 12px;
}

.sd-learning-batch-bar strong {
  color: var(--sd-ink);
  display: block;
  font-size: var(--sd-text-body);
  line-height: 1.25;
}

.sd-learning-batch-bar p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.4;
  margin: 3px 0 0;
  max-width: 42rem;
}

.sd-learning-proposal-card {
  align-items: start;
  background: var(--sd-paper-strong);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 210px), auto);
  min-width: 0;
  padding: 14px;
}

.sd-learning-proposal-card:has(.sd-learning-select input:checked) {
  border-color: color-mix(in oklch, var(--sd-accent) 52%, var(--sd-line));
  box-shadow: inset 3px 0 0 var(--sd-accent);
}

.sd-learning-proposal-card:hover {
  border-color: var(--sd-line-stronger);
}

.sd-learning-select {
  align-items: center;
  color: var(--sd-muted);
  display: inline-flex;
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  gap: 8px;
  min-width: 0;
}

.sd-learning-select input {
  accent-color: var(--sd-accent);
}

.sd-learning-proposal-main {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.sd-learning-proposal-main strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-learning-proposal-main p {
  color: var(--sd-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sd-learning-proposal-type {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.sd-learning-proposal-icon {
  align-items: center;
  background: color-mix(in oklch, var(--sd-info-soft) 62%, var(--sd-paper-strong));
  border: 1px solid color-mix(in oklch, var(--sd-info) 24%, var(--sd-line));
  border-radius: var(--sd-radius);
  color: var(--sd-info);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--sd-text-label);
  font-weight: 700;
  height: 30px;
  justify-content: center;
  line-height: 1;
  width: 34px;
}

.sd-learning-proposal-actions {
  align-content: start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.sd-learning-workroom .sd-learning-proposal-card {
  grid-template-columns: 1fr;
}

.sd-learning-workroom .sd-learning-proposal-actions {
  justify-content: flex-start;
}

.sd-learning-how-grid,
.sd-learning-control-grid {
  display: grid;
  gap: 0;
  min-width: 0;
}

.sd-learning-control-grid {
  margin-top: 10px;
}

.sd-learning-side-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--sd-line);
  border-radius: 0;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 0;
}

.sd-learning-side-card:first-child {
  border-top: 0;
  padding-top: 0;
}

.sd-learning-side-card:last-child {
  padding-bottom: 0;
}

.sd-learning-side-card strong {
  color: var(--sd-ink);
  line-height: 1.25;
}

.sd-learning-side-card p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.38;
}

.sd-learning-more > .sd-grid {
  margin-top: 14px;
}

.sd-learning-more-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.sd-learning-more[open] > .sd-learning-more-layout {
  gap: 14px;
}

.sd-learning-more[open] .sd-panel {
  background: transparent;
  border-color: color-mix(in oklch, var(--sd-line) 82%, transparent);
  box-shadow: none;
}

.sd-learning-more[open] .sd-fl-learning-grid {
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  max-height: min(58vh, 560px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.sd-learning-more[open] .sd-fl-learning-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--sd-line);
  gap: 6px;
  padding: 12px;
}

.sd-learning-more[open] .sd-fl-learning-card:first-child {
  border-top: 0;
}

.sd-learning-more[open] .sd-fl-learning-card em {
  background: transparent;
  border: 0;
  color: var(--sd-muted);
  min-height: 0;
  min-width: 0;
  padding: 0;
}

.sd-learning-more[open] .sd-fl-learning-card .sd-button {
  align-self: start;
  justify-self: start;
  margin-top: 2px;
}

.sd-fl-learning-facts,
.sd-fl-learning-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.sd-fl-learning-facts span {
  background: var(--sd-surface-muted);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 8px;
}

.sd-fl-output-preview-card {
  align-items: center;
  background: linear-gradient(135deg, var(--sd-paper-strong), var(--sd-surface-muted));
  color: inherit;
  display: grid;
  gap: 10px;
  grid-template-columns: 68px minmax(0, 1fr);
  margin-top: 10px;
  min-width: 0;
  padding: 8px;
  text-decoration: none;
}

.sd-fl-output-preview-card:hover {
  border-color: var(--sd-accent-border);
  box-shadow: var(--sd-shadow-soft);
}

.sd-fl-output-preview-media {
  align-items: center;
  aspect-ratio: 4 / 3;
  background: var(--sd-paper);
  color: var(--sd-ink);
  display: flex;
  font-size: var(--sd-text-label);
  font-weight: 700;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.sd-fl-output-preview-media.is-image {
  background: var(--sd-paper-strong);
}

.sd-fl-output-preview-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.sd-fl-output-preview-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-fl-output-preview-copy > span {
  color: var(--sd-blue);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.sd-fl-output-preview-copy strong,
.sd-fl-output-preview-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-fl-output-preview-copy strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.2;
}

.sd-fl-output-preview-copy small {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
  line-height: 1.25;
}

.sd-fl-output-document-preview {
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  color: inherit;
  display: grid;
  gap: 4px;
  margin-top: 4px;
  min-width: 0;
  padding-top: 7px;
  text-transform: none;
}

.sd-fl-output-document-preview em {
  color: var(--sd-blue);
  font-size: var(--sd-text-eyebrow);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.sd-fl-output-document-preview p {
  color: var(--sd-ink);
  display: -webkit-box;
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.sd-fl-output-table-preview {
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  color: inherit;
  display: grid;
  gap: 6px;
  margin-top: 4px;
  min-width: 0;
  padding-top: 7px;
  text-transform: none;
}

.sd-fl-output-table-preview-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: space-between;
  min-width: 0;
}

.sd-fl-output-table-preview-head em {
  color: var(--sd-blue);
  font-size: var(--sd-text-eyebrow);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.sd-fl-output-table-preview-head small {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  line-height: 1.2;
}

.sd-fl-output-table-preview-grid,
.sd-fl-output-table-preview-grid .is-row {
  display: grid;
  grid-template-columns: repeat(var(--sd-table-preview-columns, 3), minmax(0, 1fr));
  min-width: 0;
}

.sd-fl-output-table-preview-grid {
  border-top: 1px solid var(--sd-line);
  overflow: hidden;
}

.sd-fl-output-table-preview-grid .is-row {
  display: grid;
  grid-column: 1 / -1;
}

.sd-fl-output-table-preview-grid > .is-header,
.sd-fl-output-table-preview-grid .is-row > span {
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 76%, transparent);
  color: var(--sd-ink);
  font-size: var(--sd-text-label);
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  padding: 5px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-fl-output-table-preview-grid > .is-header {
  background: color-mix(in oklch, var(--sd-surface-muted) 74%, transparent);
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .sd-fl-primary-filters,
  .sd-fl-advanced-filter-grid,
  .sd-fl-search-bar {
    grid-template-columns: 1fr;
  }

  .sd-fl-search-bar .sd-field:first-child {
    grid-column: auto;
  }

  .sd-learning-more-layout,
  .sd-fl-learning-grid {
    grid-template-columns: 1fr;
  }

  .sd-library-organizer {
    grid-template-columns: 1fr;
  }

  .sd-library-area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-fl-featured-header {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  [data-testid="library-asset-browser"] {
    gap: 10px;
    padding: 12px;
  }

  [data-testid="library-overview"] {
    gap: 12px;
    padding: 12px;
  }

  .sd-library-next-actions,
  .sd-library-area-grid {
    grid-template-columns: 1fr;
  }

  .sd-library-next-card {
    min-height: auto;
  }

  [data-testid="library-asset-browser"] .sd-panel-heading {
    align-items: start;
    display: none;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  [data-testid="library-asset-browser"] .sd-panel-actions {
    justify-content: end;
  }

  [data-testid="library-asset-browser"] .sd-panel-actions .sd-button {
    min-height: 36px;
    padding-inline: 11px;
    white-space: nowrap;
  }

  [data-testid="library-asset-browser"] .sd-panel-body > p:first-child {
    display: none;
  }

  .sd-fl-search-bar {
    gap: 8px;
    margin-top: 0;
    padding: 8px;
  }

  .sd-fl-primary-filters {
    align-items: end;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-fl-primary-filters .sd-field {
    gap: 4px;
    font-size: var(--sd-text-body-sm);
  }

  .sd-fl-primary-filters .sd-field:first-child,
  .sd-fl-primary-filters .sd-filter-actions {
    grid-column: 1 / -1;
  }

  .sd-fl-primary-filters .sd-field input,
  .sd-fl-primary-filters .sd-field select {
    min-height: 38px;
    padding: 7px 9px;
  }

  .sd-fl-primary-filters .sd-filter-actions {
    align-items: stretch;
    display: flex;
    gap: 8px;
  }

  .sd-fl-primary-filters .sd-filter-actions .sd-button {
    flex: 1 1 0;
    justify-content: center;
    min-height: 38px;
  }

  .sd-fl-advanced-filters {
    padding-top: 6px;
  }

  .sd-fl-featured-header p span {
    display: none;
  }

  .sd-fl-featured-header {
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
  }

  .sd-fl-featured-header p {
    justify-self: start;
    max-width: 100%;
    text-align: left;
  }
}

.sd-agent-index-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  background:
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--sd-accent-soft) 24%, transparent),
      transparent 48%
    ),
    var(--sd-paper-strong);
  box-shadow: var(--sd-shadow);
  padding: 16px;
}

/* On the index itself the intro is one sentence — a plain section heading,
   not a gradient hero box (quickstart/wizard keep the framed variant). */
[data-testid="agents-index-page-chrome"] .sd-agent-index-intro {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 4px 0 0;
}

.sd-agent-index-intro > div:first-child {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sd-agent-index-intro h2 {
  color: var(--sd-ink);
  font-family: var(--sd-font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.65rem);
  font-weight: 600;
  font-variation-settings: "opsz" 56;
  letter-spacing: 0;
  line-height: 1.12;
}

.sd-agent-index-intro p:not(.sd-eyebrow) {
  max-width: 76ch;
  color: var(--sd-muted);
  line-height: 1.45;
}

[data-testid="agents-index-page-chrome"] .sd-v4-meta dt,
[data-testid="agents-index-page-chrome"] .sd-v4-evidence-row dt {
  color: var(--sd-muted);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

[data-testid="agent-detail-main-surface"] .sd-agent-quality-facts dt,
[data-testid="agent-detail-main-surface"] .sd-metric span,
[data-testid="agent-detail-main-surface"] .sd-v4-meta dt,
[data-testid="agent-detail-main-surface"] .sd-v4-evidence-row dt,
[data-testid="agent-detail-main-surface"] .sd-data-row span {
  color: var(--sd-muted);
  font-family: var(--sd-font-sans);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sd-agent-index-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: 360px;
}

.sd-agent-index-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-surface) 86%, var(--sd-paper));
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  letter-spacing: 0;
  padding: 6px 10px;
}

.sd-create-choice-grid {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.16fr) minmax(260px, 0.84fr);
}

.sd-create-choice-card .sd-panel-body {
  align-content: start;
}

.sd-create-choice-card.is-guided {
  border-color: color-mix(in oklch, var(--sd-accent) 28%, var(--sd-line));
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--sd-accent-soft) 24%, transparent),
    var(--sd-shadow);
}

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

.sd-create-choice-details {
  background: color-mix(in oklch, var(--sd-surface-muted) 70%, var(--sd-paper-strong));
  box-shadow: none;
}

.sd-agent-contract-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-agent-index-summary {
  display: grid;
  min-width: 0;
}

.sd-agent-readiness-list {
  display: grid;
  gap: 0;
  background: var(--sd-fill-well);
  overflow: hidden;
}

.sd-agent-readiness-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
  padding: 10px 12px;
}

.sd-agent-readiness-row:last-child {
  border-bottom: 0;
}

.sd-agent-readiness-row > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sd-agent-readiness-row span:not(.sd-workbench-rail-state) {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
}

.sd-agent-readiness-row strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.08;
}

.sd-agent-readiness-row small {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.3;
}

.sd-agent-index-state,
.sd-agent-proposal-state,
.sd-v4-agent-state {
  justify-self: end;
}

.sd-agent-index-controls {
  background: color-mix(in oklch, var(--sd-surface-muted) 62%, var(--sd-paper-strong));
}

.sd-agent-index-controls > summary {
  min-height: 38px;
}

.sd-agent-filter-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
  background: color-mix(in oklch, var(--sd-surface) 90%, var(--sd-paper));
  box-shadow: var(--sd-shadow);
  padding: 14px;
}

.sd-agent-filter-rail > div:first-child {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
  align-self: center;
  min-width: 0;
}

.sd-agent-filter-rail .sd-field,
.sd-agent-filter-rail input,
.sd-agent-filter-rail select {
  min-width: 0;
}

.sd-agent-filter-rail input,
.sd-agent-filter-rail select {
  width: 100%;
}

.sd-agent-filter-rail .sd-button {
  white-space: nowrap;
}

.sd-agent-filter-rail > div:first-child strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.2;
}

.sd-agent-filter-rail > div:first-child p:not(.sd-eyebrow) {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
}

.sd-agent-group {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-agent-group > header {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--sd-line-soft);
  padding: 2px 2px 10px;
}

.sd-agent-group h3 {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.sd-agent-group p:not(.sd-eyebrow) {
  max-width: 76ch;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.4;
}

.sd-launch-context,
.sd-agent-contract {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-agent-launch-profile-primary {
  margin-top: 2px;
}

.sd-agent-launch-profile-row.is-featured {
  background: color-mix(in oklch, var(--sd-surface-muted) 68%, var(--sd-paper-strong));
}

.sd-agent-launch-profile-disclosure {
  margin-top: 8px;
}

.sd-agent-launch-profile-scroll {
  display: grid;
  gap: 7px;
  max-height: min(58vh, 620px);
  min-width: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-color: color-mix(in oklch, var(--sd-line) 82%, var(--sd-muted)) transparent;
  scrollbar-width: thin;
}

.sd-agent-contract-capability-list {
  max-height: min(50vh, 380px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: color-mix(in oklch, var(--sd-line) 82%, var(--sd-muted)) transparent;
  scrollbar-width: thin;
}

.sd-agent-contract-state {
  justify-self: end;
}

.sd-launch-context .sd-list-row,
.sd-launch-context .sd-callout,
.sd-launch-context .sd-artifact-run-package {
  min-width: 0;
}

.sd-launch-context strong,
.sd-launch-context p,
.sd-launch-context a,
.sd-launch-context small {
  overflow-wrap: anywhere;
}

.sd-launch-context-compact {
  display: grid;
  gap: 10px;
  min-width: 0;
  background: var(--sd-paper-strong);
  padding: 12px;
}

.sd-launch-context-compact-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.sd-launch-context-compact-head strong {
  display: block;
  line-height: 1.28;
}

.sd-launch-context-compact-head p {
  margin-top: 4px;
  color: var(--sd-muted);
  line-height: 1.42;
}

.sd-launch-context-compact-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.sd-launch-context-selected,
.sd-launch-context-errors {
  gap: 8px;
}

#launch-context-overlay .sd-overlay-panel {
  width: min(680px, calc(100vw - 24px));
}

.sd-launch-context-sheet-body {
  display: grid;
  gap: var(--sd-space-5);
  min-width: 0;
}

.sd-launch-context-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  background: var(--sd-paper-strong);
  padding: 5px;
}

.sd-launch-context-tab {
  min-width: 0;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--sd-radius);
  background: transparent;
  color: var(--sd-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--sd-text-body);
  font-weight: 700;
  padding: 7px 8px;
}

.sd-launch-context-tab.is-active {
  border-color: var(--sd-line);
  background: var(--sd-paper);
  color: var(--sd-ink);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--sd-ink) 4%, transparent);
}

.sd-launch-context-sheet-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-launch-context-row {
  align-items: center;
}

.sd-launch-context-row-actions {
  align-items: end;
  gap: 6px;
}

.sd-launch-context-secondary-links,
.sd-launch-context-secondary-link {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
}

.sd-launch-context-secondary-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sd-bucket-head,
.sd-artifact-run-actions,
.sd-row-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.sd-bucket-head,
.sd-artifact-run-actions {
  justify-content: space-between;
}

.sd-row-links {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  margin-top: 6px;
}

.sd-row-links a {
  color: var(--sd-accent);
  text-decoration: none;
}

.sd-row-links a:hover {
  text-decoration: underline;
}

.sd-v4-object-header,
.sd-v4-agent-card,
.sd-v4-run-package,
.sd-v4-approval-card,
.sd-v4-readiness,
.sd-v4-promotion-dialog,
.sd-v4-promotion-receipt,
.sd-v4-version-diff,
.sd-v4-context-rail,
.sd-v4-attention-rail {
  background: color-mix(in oklch, var(--sd-surface) 94%, var(--sd-paper));
  box-shadow: var(--sd-shadow);
}

/* Nested-quiet: a card may contain rows, never another bordered card. When a
   v4 card renders inside a panel, the panel is the box — the card flattens to
   hairline-divided regions instead of drawing a second concentric border. */
.sd-panel .sd-v4-approval-card,
.sd-panel .sd-v4-agent-card,
.sd-panel .sd-v4-run-package {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.sd-panel .sd-v4-approval-card .sd-v4-approval-source {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--sd-line);
  border-bottom: 1px solid var(--sd-line);
  background: transparent;
  padding: 10px 0;
}

.sd-panel .sd-decision-rail {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--sd-line);
  background: transparent;
  padding: 12px 0 0;
}

.sd-v4-object-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 22px;
}

.sd-v4-object-header > div:first-child,
.sd-v4-agent-card,
.sd-v4-run-package,
.sd-v4-approval-card,
.sd-v4-readiness,
.sd-v4-promotion-dialog,
.sd-v4-promotion-receipt,
.sd-v4-version-diff,
.sd-v4-attention-rail,
.sd-v4-context-rail {
  display: grid;
  gap: 12px;
}

.sd-v4-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: color-mix(in oklch, var(--sd-ink) 34%, transparent);
  backdrop-filter: blur(var(--sd-blur-overlay));
  -webkit-backdrop-filter: blur(var(--sd-blur-overlay));
  padding: 24px;
}

.sd-v4-promotion-dialog {
  display: grid;
  gap: 0;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  padding: 0;
  width: min(720px, 100%);
}

.sd-v4-promotion-dialog > header {
  padding: 22px 22px 12px;
}

.sd-v4-promotion-form {
  display: grid;
  gap: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.sd-v4-promotion-dialog-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding: 0 22px 12px;
}

.sd-v4-promotion-actions {
  background: color-mix(in oklch, var(--sd-surface) 96%, var(--sd-paper));
  border-top: 1px solid var(--sd-line);
  justify-content: flex-end;
  padding: 12px 22px 18px;
}

.sd-v4-promotion-dialog > header,
.sd-v4-promotion-receipt > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.sd-v4-promotion-review,
.sd-v4-promotion-confirm {
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-surface-muted);
  padding: 12px;
}

.sd-v4-promotion-review strong,
.sd-v4-promotion-confirm strong {
  display: block;
  margin-bottom: 4px;
}

.sd-v4-promotion-receipt {
  border-color: color-mix(in oklch, var(--sd-sage) 45%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-sage) 10%, var(--sd-surface));
  padding: 18px;
}

.sd-v4-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 0;
}

.sd-v4-agent-card.is-compact .sd-v4-meta {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

.sd-v4-meta dt,
.sd-v4-context-rail dt {
  color: var(--sd-subtle);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sd-v4-meta dd,
.sd-v4-context-rail dd {
  margin: 3px 0 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.sd-v4-attention-rail,
.sd-v4-context-rail {
  padding: 16px;
}

.sd-v4-attention-item {
  display: grid;
  gap: 8px;
  background: color-mix(in oklch, var(--sd-accent-soft) 18%, var(--sd-paper-strong));
  padding: 12px;
}

.sd-v4-agent-card,
.sd-v4-run-package,
.sd-v4-approval-card {
  padding: 16px;
}

.sd-v4-agent-card.is-compact {
  gap: 10px;
  padding: 13px;
}

.sd-v4-agent-card h3,
.sd-v4-run-package h3,
.sd-v4-approval-card h3,
.sd-v4-version-diff h3 {
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  font-size: var(--sd-text-title);
  line-height: 1.24;
}

.sd-v4-agent-card p,
.sd-v4-run-package p,
.sd-v4-approval-card p,
.sd-v4-version-diff p {
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-v4-approval-card h3,
.sd-v4-approval-card p,
.sd-v4-approval-card a,
.sd-v4-approval-card .sd-v4-approval-title,
.sd-v4-approval-detail summary,
.sd-v4-approval-evidence li span,
.sd-v4-approval-evidence li strong,
.sd-elicitation h3,
.sd-elicitation p {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.sd-v4-approval-copy h3,
.sd-v4-approval-copy p,
.sd-elicitation-copy h3,
.sd-elicitation-copy p,
.sd-v4-approval-card .sd-v4-approval-detail-copy {
  white-space: pre-wrap;
}

.sd-v4-agent-card.is-compact p {
  font-size: var(--sd-text-body);
  line-height: 1.38;
}

.sd-v4-approval-card .sd-v4-approval-title {
  margin: 2px 0 6px;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-weight: 600;
}

.sd-v4-approval-card .sd-approval-card-state {
  justify-self: start;
  margin-top: 2px;
}

.sd-v4-approval-card.is-compact {
  gap: 12px;
}

.sd-v4-approval-card .sd-actions .sd-button,
.sd-v4-approval-card .sd-actions button,
.sd-elicitation ~ .sd-actions .sd-button,
.sd-elicitation ~ .sd-actions button {
  height: auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

.sd-v4-approval-source {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  background: var(--sd-fill-well);
  padding: 10px 12px;
}

.sd-v4-approval-source div {
  min-width: 0;
}

.sd-v4-approval-source span {
  display: block;
  color: var(--sd-subtle);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-v4-approval-source strong,
.sd-v4-approval-source a {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  overflow-wrap: anywhere;
}

.sd-v4-approval-detail {
  background: var(--sd-fill-glass);
}

.sd-v4-agent-card header,
.sd-v4-run-package header,
.sd-v4-approval-card header,
.sd-v4-version-diff header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: flex-start;
}

.sd-v4-approval-evidence {
  display: grid;
  gap: 8px;
  background: var(--sd-paper-strong);
  padding: 12px;
}

.sd-v4-approval-evidence > span {
  color: var(--sd-subtle);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sd-v4-approval-evidence ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-v4-approval-evidence li {
  display: grid;
  gap: 2px;
}

.sd-v4-approval-evidence li strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
}

.sd-v4-private-disclosure,
.sd-v4-revision-path {
  display: grid;
  gap: 4px;
  border: 1px dashed var(--sd-line-strong);
  border-radius: var(--sd-radius);
  background: var(--sd-paper);
  padding: 10px 12px;
}

.sd-v4-private-disclosure > span,
.sd-v4-revision-path > span {
  color: var(--sd-subtle);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sd-v4-private-disclosure strong,
.sd-v4-revision-path strong {
  color: var(--sd-ink);
}

.sd-v4-private-disclosure p,
.sd-v4-revision-path p {
  margin: 0;
}

.sd-v4-private-disclosure.is-available,
.sd-v4-revision-path.is-supported {
  border-style: solid;
  background: color-mix(in oklch, var(--sd-warning) 10%, var(--sd-paper));
}

.sd-v4-agent-card header > div:first-child,
.sd-v4-run-package header > div:first-child,
.sd-v4-approval-card header > div:first-child,
.sd-v4-version-diff header > div:first-child {
  min-width: 0;
}

.sd-v4-agent-card header > .sd-status,
.sd-v4-agent-card header > .sd-workbench-rail-state,
.sd-v4-run-package header > .sd-status,
.sd-v4-approval-card header > .sd-status,
.sd-v4-version-diff header > .sd-status {
  justify-self: start;
}

.sd-v4-diff-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--sd-line);
  padding-bottom: 10px;
}

.sd-v4-diff-tab {
  display: inline-grid;
  gap: 2px;
  min-width: 92px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius) var(--sd-radius) 0 0;
  background: var(--sd-paper-strong);
  color: var(--sd-muted);
  cursor: pointer;
  padding: 8px 10px;
  text-align: left;
}

.sd-v4-diff-tab span {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
}

.sd-v4-diff-tab small {
  color: var(--sd-subtle);
  font-size: var(--sd-text-label);
  font-variant-numeric: tabular-nums;
}

.sd-v4-diff-tab.is-active {
  border-color: color-mix(in oklch, var(--sd-accent) 42%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent-soft) 24%, var(--sd-paper-strong));
  color: var(--sd-ink);
}

.sd-v4-diff-area,
.sd-v4-diff-summary,
.sd-v4-diff-pane,
.sd-v4-diff-lines {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-v4-diff-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.sd-v4-diff-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sd-v4-diff-pane {
  align-content: start;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-paper-strong);
  overflow: hidden;
}

.sd-v4-diff-label {
  border-bottom: 1px solid var(--sd-line);
  background: var(--sd-surface-muted);
  color: var(--sd-subtle);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  padding: 9px 10px;
  text-transform: uppercase;
}

.sd-v4-diff-lines {
  gap: 0;
  max-height: 420px;
  overflow: auto;
}

.sd-v4-diff-line {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  color: var(--sd-muted);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-body-sm);
  line-height: 1.45;
  padding: 7px 10px;
}

.sd-v4-diff-line:last-child {
  border-bottom: 0;
}

.sd-v4-diff-line span {
  color: var(--sd-subtle);
  font-weight: 700;
}

.sd-v4-diff-line p {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.sd-v4-diff-line.is-added {
  background: color-mix(in oklch, var(--sd-sage) 14%, transparent);
  color: var(--sd-ink);
}

.sd-v4-diff-line.is-added span {
  color: var(--sd-sage);
}

.sd-v4-diff-line.is-removed {
  background: color-mix(in oklch, var(--sd-danger) 10%, transparent);
  color: var(--sd-ink);
}

.sd-v4-diff-line.is-removed span {
  color: var(--sd-danger);
}

.sd-v4-diff-empty {
  color: var(--sd-subtle);
  padding: 12px;
}

.sd-v4-contract-question {
  display: grid;
  gap: 3px;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 30%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-accent-soft) 26%, var(--sd-paper-strong));
  padding: 10px 12px;
}

/* Nested-quiet: guidance copy inside a bordered card needs no box of its own
   (and no accent — accent stays on actions). */
.sd-v4-agent-card .sd-v4-contract-question {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.sd-v4-contract-question span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.42;
}

.sd-v4-evidence-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-paper-strong);
  padding: 12px;
}

/* Nested-quiet: inside a bordered v4 card the evidence row is a region,
   not a second box — hairline divider instead of a concentric border. */
.sd-v4-agent-card .sd-v4-evidence-row,
.sd-v4-run-package .sd-v4-evidence-row {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--sd-line);
  background: transparent;
  padding: 12px 0 0;
}

.sd-v4-evidence-row.is-compact {
  grid-template-columns: minmax(0, 1.2fr) minmax(150px, 0.55fr) auto;
  gap: 10px;
  padding: 10px;
}

.sd-v4-evidence-row > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-v4-evidence-row strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
}

.sd-v4-evidence-row p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.38;
}

.sd-v4-evidence-row.is-compact p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sd-v4-evidence-row dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}

.sd-v4-evidence-row dt {
  color: var(--sd-subtle);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sd-v4-evidence-row dd {
  margin: 2px 0 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.sd-v4-capability-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sd-v4-capability-details {
  background: color-mix(in oklch, var(--sd-surface-muted) 78%, var(--sd-paper-strong));
  box-shadow: none;
  padding: 10px;
}

.sd-v4-agent-card.is-compact .sd-v4-capability-details {
  padding: 8px 10px;
}

.sd-v4-capability-chip {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
  padding: 6px 10px;
  color: var(--sd-ink);
  text-decoration: none;
}

.sd-v4-capability-chip:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-fill-well);
}

.sd-v4-capability-chip span:last-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sd-v4-capability-chip strong,
.sd-v4-capability-chip small {
  overflow-wrap: anywhere;
}

.sd-v4-capability-chip small,
.sd-v4-provenance-bar {
  color: var(--sd-muted);
}

.sd-consequence-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-surface-muted);
  color: var(--sd-muted);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sd-consequence-writes_externally {
  border-color: color-mix(in oklch, var(--sd-warning) 38%, transparent);
  background: var(--sd-warn-soft);
  color: var(--sd-tone-warn-fg);
}

.sd-consequence-updates_memory {
  border-color: color-mix(in oklch, var(--sd-info) 38%, transparent);
  background: var(--sd-info-soft);
  color: var(--sd-tone-active-fg);
}

.sd-v4-provenance-bar {
  border-left: 3px solid var(--sd-accent);
  border-radius: 0 var(--sd-radius-sm) var(--sd-radius-sm) 0;
  background: color-mix(in oklch, var(--sd-accent-soft) 24%, var(--sd-surface-muted));
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: var(--sd-text-body-sm);
  line-height: 1.45;
}

.sd-v4-provenance-bar a,
.sd-v4-run-package h3 a {
  color: var(--sd-ink);
  font-weight: 700;
  text-decoration-color: color-mix(in oklch, var(--sd-accent) 45%, transparent);
  text-underline-offset: 3px;
}

.sd-v4-output-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-info) 20%, var(--sd-line));
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-info-soft) 22%, var(--sd-paper-strong));
  padding: 10px;
}

.sd-v4-output-preview-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  min-width: 0;
}

.sd-v4-output-preview-head span {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.sd-v4-output-preview-head strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.2;
}

.sd-v4-output-preview-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 7px;
  min-width: 0;
}

.sd-v4-output-preview-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  background: var(--sd-paper);
  color: inherit;
  padding: 6px;
  text-decoration: none;
}

.sd-v4-output-preview-item:hover {
  border-color: color-mix(in oklch, var(--sd-info) 34%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-info-soft) 18%, var(--sd-paper));
}

.sd-v4-output-preview-media {
  display: grid;
  place-items: center;
  width: 54px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sd-paper-strong);
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  line-height: 1;
}

.sd-v4-output-preview-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-v4-output-preview-item.is-image .sd-v4-output-preview-media {
  background: var(--sd-ink);
}

.sd-v4-output-preview-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sd-v4-output-preview-copy strong,
.sd-v4-output-preview-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-v4-output-preview-copy strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.22;
}

.sd-v4-output-preview-copy small {
  color: var(--sd-subtle);
  font-size: var(--sd-text-label);
  font-weight: 600;
  line-height: 1.2;
}

.sd-v4-artifact-list {
  display: grid;
  gap: 7px;
}

.sd-v4-artifact-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: var(--sd-paper-strong);
  padding: 8px 10px;
  color: var(--sd-ink);
  text-decoration: none;
}

.sd-v4-artifact-list a:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
}

.sd-v4-artifact-list span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
}

.sd-v4-readiness {
  padding: 14px;
}

.sd-v4-readiness.is-error {
  border-color: color-mix(in srgb, var(--sd-danger), var(--sd-line) 50%);
}

.sd-v4-readiness.is-warn,
.sd-v4-readiness.is-warning {
  border-color: color-mix(in srgb, var(--sd-warning), var(--sd-line) 50%);
}

.sd-v4-diagnostics {
  background: var(--sd-surface-muted);
}

.sd-v4-diagnostics summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  list-style: none;
}

.sd-v4-diagnostics summary::-webkit-details-marker {
  display: none;
}

.sd-v4-diagnostics summary::after {
  content: "Open";
  float: right;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
}

.sd-v4-diagnostics[open] summary::after {
  content: "Close";
}

.sd-v4-diagnostics > div {
  border-top: 1px solid var(--sd-line);
  padding: 14px;
}

.sd-plain-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--sd-muted);
  line-height: 1.42;
}

.sd-plain-list li {
  overflow-wrap: anywhere;
}

.sd-work-table {
  display: grid;
  overflow: hidden;
  background: var(--sd-paper-strong);
}

.sd-table-heading,
.sd-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(120px, 0.38fr) minmax(120px, 0.38fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}

.sd-table-heading {
  border-bottom: 1px solid var(--sd-line);
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sd-table-row {
  color: var(--sd-ink);
  text-decoration: none;
}

.sd-table-row > :not(:first-child) {
  font-variant-numeric: tabular-nums;
}

.sd-table-row + .sd-table-row {
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-table-row:hover {
  background: color-mix(in oklch, var(--sd-surface-muted) 60%, transparent);
}

.sd-table-row strong,
.sd-table-row p {
  overflow-wrap: anywhere;
}

.sd-table-row p {
  color: var(--sd-muted);
  margin-top: 3px;
}

.sd-run-lens-toggle {
  display: inline-flex;
  gap: 2px;
  width: fit-content;
  padding: 3px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper-strong);
}

.sd-run-lens {
  padding: 5px 14px;
  border-radius: var(--sd-radius-pill);
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1;
  color: var(--sd-muted);
  text-decoration: none;
}

.sd-run-lens.is-active {
  background: color-mix(in oklch, var(--sd-accent) 16%, var(--sd-paper));
  color: var(--sd-ink);
}

.sd-run-index-status {
  min-width: 0;
}

.sd-run-index-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

[data-testid="runs-page-chrome"] .sd-page-attention-rail,
[data-testid="agents-index-page-chrome"] .sd-page-attention-rail {
  border: 0;
  background: transparent;
  padding: 0;
}

.sd-run-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1;
  padding: 2px 0;
}

.sd-run-status-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--sd-radius-pill);
  background: currentColor;
  opacity: 0.68;
}

.sd-run-status-chip strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-variant-numeric: tabular-nums;
}

.sd-run-status-chip.is-awaiting_user,
.sd-run-status-chip.is-warning,
.sd-run-status-chip.is-failed {
  color: var(--sd-warning);
}

.sd-run-status-chip.is-running {
  color: var(--sd-info);
}

.sd-run-status-chip.is-completed {
  color: var(--sd-sage);
}

/* Quiet inline pointer to the single review queue (Needs you). */
.sd-needs-you-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  border: 1px solid color-mix(in oklch, var(--sd-warning) 34%, var(--sd-line));
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-warning) 8%, var(--sd-paper-strong));
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1;
  padding: 6px 11px;
  text-decoration: none;
}

.sd-needs-you-chip:hover {
  border-color: color-mix(in oklch, var(--sd-warning) 55%, var(--sd-line));
}

.sd-needs-you-chip .sd-needs-you-dot {
  color: var(--sd-warning);
  font-size: 0.6rem;
  line-height: 1;
}

.sd-run-ledger-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  padding: 0 2px 11px;
}

.sd-run-ledger-heading-row > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-run-ledger-heading-row h2 {
  color: var(--sd-ink);
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-title);
  font-weight: 600;
  font-variation-settings: "opsz" 56;
  letter-spacing: 0;
  line-height: 1.18;
}

.sd-run-ledger-heading-row p:not(.sd-eyebrow) {
  max-width: 78ch;
  color: var(--sd-muted);
  line-height: 1.36;
}

.sd-run-filter-chips .sd-filter-chip {
  min-height: 28px;
  border-color: color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: transparent;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  padding: 5px 9px;
}

/* Runs toolbar — quick chips on the left, inline search + a "Filters"
   popover on the right. Replaces the permanent "Find work" side rail so the
   ledger takes the full width. */
.sd-run-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.sd-run-toolbar-controls {
  display: flex;
  flex: 1 1 320px;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.sd-run-toolbar-search {
  flex: 0 1 280px;
  min-width: 160px;
  min-height: 34px;
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  padding: 5px 10px;
}

.sd-run-toolbar-search::placeholder {
  color: var(--sd-subtle);
}

.sd-run-filters-popover {
  position: relative;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.sd-run-filters-popover > summary {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  background: var(--sd-paper-strong);
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  font-weight: 700;
  padding: 5px 12px;
  white-space: nowrap;
}

.sd-run-filters-popover > summary:hover {
  border-color: var(--sd-line-stronger);
  color: var(--sd-ink);
}

.sd-run-filters-popover[open] > summary {
  border-color: color-mix(in oklch, var(--sd-accent) 42%, var(--sd-line));
  color: var(--sd-ink);
}

.sd-run-filters-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: min(380px, 92vw);
  display: grid;
  gap: 12px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
  box-shadow: var(--sd-shadow);
  padding: 14px;
}

.sd-run-empty-quiet-link {
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sd-run-empty-quiet-link:hover {
  color: var(--sd-ink);
}

@media (max-width: 900px) {
  .sd-run-toolbar-controls {
    flex: 1 1 100%;
    justify-content: stretch;
  }

  .sd-run-toolbar-search {
    flex: 1 1 auto;
  }

  .sd-run-filters-popover {
    flex: 1 1 100%;
  }

  .sd-run-filters-panel {
    position: static;
    width: 100%;
  }
}

.sd-ledger {
  display: grid;
  gap: 16px;
}

.sd-ledger-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.sd-ledger-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.sd-ledger-heading > * {
  min-width: 0;
}

.sd-ledger-heading h3 {
  font-size: var(--sd-text-title);
  line-height: 1.2;
}

.sd-ledger-heading h3,
.sd-ledger-heading h4,
.sd-ledger-heading p {
  overflow-wrap: anywhere;
}

.sd-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
}

.sd-pill-row span:not(.sd-status) {
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-fill-well);
  padding: 5px 8px;
}

.sd-run-ledger-count {
  justify-self: end;
  margin-bottom: 3px;
}

.sd-run-deferred-stops {
  background: color-mix(in oklch, var(--sd-paper-strong) 78%, transparent);
  padding: 0;
}

.sd-run-deferred-stops > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  list-style-position: inside;
  min-width: 0;
  padding: 11px 12px;
}

.sd-run-deferred-stops > summary span {
  min-width: 0;
}

.sd-run-deferred-stops > summary small {
  display: block;
  margin-top: 2px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
}

.sd-run-deferred-stops > summary > span:last-child {
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper);
  color: var(--sd-muted);
  flex: 0 0 auto;
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  padding: 4px 8px;
}

.sd-run-deferred-stops[open] {
  padding-bottom: 10px;
}

.sd-run-stale-list {
  padding: 0 10px;
}

.sd-empty {
  /* Possibility, not absence: centered, dashed boundary, no card material. */
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 28px 18px;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.sd-empty .sd-empty-glyph {
  width: 38px;
  height: 38px;
  margin-bottom: 2px;
  color: var(--sd-line-stronger);
}

.sd-empty h3 {
  font-size: var(--sd-text-title);
}

.sd-empty p {
  max-width: 46ch;
  color: var(--sd-muted);
  line-height: 1.5;
}

.sd-empty-action {
  margin-top: 4px;
}

.sd-guide-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-guide-steps li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  background: var(--sd-paper-strong);
  padding: 10px;
}

.sd-guide-steps p {
  color: var(--sd-muted);
  line-height: 1.42;
  margin-top: 3px;
}

.sd-guide-step-marker {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-line);
}

.sd-guide-step-current {
  border-color: color-mix(in oklch, var(--sd-teal) 42%, var(--sd-line));
  background: var(--sd-paper-strong);
}

.sd-guide-step-current .sd-guide-step-marker {
  background: var(--sd-teal);
}

.sd-guide-step-completed .sd-guide-step-marker {
  background: var(--sd-sage);
}

/* Compact first-use guide — supporting context on secondary screens. Keep it
   with the shared guide rules so mobile guide layout has one owner. */
.sd-first-use-compact {
  width: 100%;
  max-width: 720px;
  margin: var(--sd-space-6) auto 0;
}

.sd-first-use-compact .sd-panel-heading {
  align-items: center;
}

.sd-first-use-compact .sd-panel-body {
  display: grid;
  gap: var(--sd-space-4);
}

.sd-first-use-compact .sd-panel-body > p {
  margin: 0;
  color: var(--sd-ink-muted);
}

.sd-first-use-compact .sd-guide-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sd-first-use-compact .sd-guide-steps li {
  padding: 9px;
}

.sd-bounded {
  overflow: hidden;
}

.sd-bounded-heading {
  border-bottom: 1px solid var(--sd-line);
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  letter-spacing: 0;
  padding: 9px 12px;
  text-transform: none;
}

.sd-bounded-body {
  min-width: 0;
  max-width: 100%;
  max-height: var(--sd-max-height);
  overflow: auto;
  overflow-wrap: anywhere;
  padding: 12px;
}

.sd-bounded-body > *,
.sd-timeline,
.sd-timeline li,
.sd-timeline li > *,
.sd-timeline p {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.sd-agent-contract .sd-bounded-heading {
  letter-spacing: 0;
  text-transform: none;
}

[data-testid="agent-manifest-disclosure"] .sd-bounded-heading {
  letter-spacing: 0;
  text-transform: none;
}

.sd-agent-contract .sd-consequence-chip {
  height: auto;
  border: 0;
  background: transparent;
  color: var(--sd-muted);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  padding: 1px 0;
  text-transform: none;
}

.sd-agent-contract .sd-consequence-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  flex: 0 0 auto;
  border-radius: var(--sd-radius-pill);
  background: currentColor;
  opacity: 0.68;
}

.sd-pre {
  margin: 0;
  border-radius: var(--sd-radius);
  border: 1px solid var(--sd-line);
  background: var(--sd-code-bg);
  color: var(--sd-code-ink);
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

.sd-artifact-image {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  background: var(--sd-paper-strong);
}

.sd-artifact-media-frame {
  display: block;
  width: 100%;
  min-height: 560px;
  background: var(--sd-paper-strong);
}

.sd-artifact-media-control {
  display: block;
  width: 100%;
  max-height: 560px;
  background: var(--sd-paper-strong);
}

.sd-artifact-reader {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sd-artifact-reader-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.sd-artifact-reader-header .sd-actions {
  justify-content: flex-start;
}

.sd-artifact-reader-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-artifact-reader-title h3 {
  font-size: 1.15rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sd-artifact-reader-title p {
  color: var(--sd-muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sd-artifact-reader-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sd-markdown-preview {
  display: grid;
  gap: 10px;
  max-width: 76ch;
  line-height: var(--sd-leading-paper, 1.6);
  color: var(--sd-ink);
}

/* Heading hierarchy — a real document rhythm, not a flat grid. Each level
   drops one type rung and tightens leading; h1 is the document title, h2 a
   section, h3+ subsections. Margins come from the parent grid gap plus an
   extra top margin so headings breathe away from the preceding block. */
.sd-markdown-preview :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: 14px;
  line-height: var(--sd-leading-snug);
  color: var(--sd-ink);
  letter-spacing: -0.01em;
}

.sd-markdown-preview h1 {
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-page-title);
  font-weight: 700;
  margin-top: 8px;
}

.sd-markdown-preview h2 {
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-section);
  font-weight: 700;
  margin-top: 6px;
}

.sd-markdown-preview h3 {
  font-size: var(--sd-text-title);
  font-weight: 700;
  margin-top: 4px;
}

.sd-markdown-preview h4 {
  font-size: var(--sd-text-heading);
  font-weight: 700;
}

.sd-markdown-preview h5,
.sd-markdown-preview h6 {
  font-size: var(--sd-text-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sd-muted);
}

.sd-markdown-preview p {
  margin: 0;
  color: var(--sd-ink);
}

/* Fenced code block — the single code-block style inside rendered markdown.
   Lives on the code tokens (--sd-code-bg / --sd-code-ink) so it tracks the
   theme instead of the old hardcoded dark-green `.sd-pre` literal. */
.sd-markdown-preview pre {
  margin: 2px 0;
  padding: 12px 14px;
  border-radius: var(--sd-radius);
  border: 1px solid var(--sd-line);
  background: var(--sd-code-bg);
  color: var(--sd-code-ink);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-body-sm);
  line-height: var(--sd-leading-snug);
  overflow-x: auto;
  max-width: 100%;
}

.sd-markdown-preview pre code {
  /* Undo inline-code styling when a code span sits inside a fenced block. */
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

.sd-markdown-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-paper-strong);
}

.sd-markdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sd-text-body-sm);
  line-height: var(--sd-leading-body);
}

.sd-markdown-table th,
.sd-markdown-table td {
  padding: var(--sd-space-3) var(--sd-space-4);
  border-bottom: 1px solid var(--sd-line);
  text-align: left;
  vertical-align: top;
  /* Allow wrapping so wide tables don't clip — the wrap itself scrolls. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.sd-markdown-table th {
  color: var(--sd-ink);
  background: var(--sd-surface-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sd-markdown-table tr:last-child td {
  border-bottom: 0;
}

/* Lists render as real <ul>/<ol> with <li> (proper list semantics, not a run
   of <p> siblings). The wrapper owns the spacing + marker color; items inherit
   the body text color. See ADR 0039 markdown cleanup. */
.sd-markdown-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}

.sd-markdown-list.is-ordered {
  list-style: decimal;
}

.sd-markdown-list:not(.is-ordered) {
  list-style: disc;
}

.sd-markdown-list li::marker {
  color: var(--sd-muted);
}

.sd-markdown-list.is-ordered li::marker {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.sd-markdown-list-item {
  color: var(--sd-ink);
}

/* Blockquote: a single grouped quotation (multi-line quotes join into one).
   Subtle inset + muted ink so it reads as quoted material, not an alert. */
.sd-markdown-blockquote {
  margin: 0;
  border-left: 3px solid var(--sd-line-strong);
  padding: 4px 14px;
  color: var(--sd-ink-muted);
  background: var(--sd-surface-muted);
  border-radius: 0 var(--sd-radius) var(--sd-radius) 0;
}

.sd-markdown-rule {
  border: 0;
  border-top: 1px solid var(--sd-line);
  margin: 8px 0;
}

.sd-markdown-preview strong {
  color: var(--sd-ink);
  font-weight: 700;
}

.sd-markdown-preview em {
  color: var(--sd-ink);
}

.sd-markdown-preview code {
  background: var(--sd-surface-muted);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-sm);
  padding: 1px 5px;
  font-family: var(--sd-font-mono);
  font-size: 0.9em;
}

.sd-markdown-document {
  display: grid;
  gap: 16px;
}

.sd-markdown-outline {
  display: grid;
  gap: 8px;
  background: var(--sd-paper-strong);
  padding: 10px;
}

.sd-markdown-outline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sd-markdown-outline-list a {
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  padding: 5px 8px;
  text-decoration: none;
}

.sd-markdown-outline-list a:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
}

.sd-markdown-inline-link {
  color: var(--sd-blue);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-decoration-color: color-mix(in oklch, var(--sd-blue) 50%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sd-markdown-inline-link:hover {
  color: var(--sd-accent);
  text-decoration-color: var(--sd-accent);
}

.sd-markdown-fact {
  display: grid;
  grid-template-columns: minmax(120px, 0.26fr) minmax(0, 1fr);
  gap: 10px;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  padding: 8px 0;
}

.sd-markdown-fact span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-markdown-fact strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* The run summary paper is the warm press-sheet — the document hero. Markdown
   rendered inside it (the chat answer folded under "Full answer", or any
   rootless run's full-result) uses artifact-ink tokens so it reads as document
   text on warm paper, not console ink. This is a single contextual recolor:
   the base primitive's spacing/type/code styling all apply unchanged. */
.sd-run-result-paper .sd-run-full-result .sd-markdown-preview,
.sd-run-result-paper .sd-run-full-result .sd-markdown-preview :is(h1, h2, h3, h4, h5, h6),
.sd-run-result-paper .sd-run-full-result .sd-markdown-preview p,
.sd-run-result-paper .sd-run-full-result .sd-markdown-preview strong,
.sd-run-result-paper .sd-run-full-result .sd-markdown-preview em,
.sd-run-result-paper .sd-run-full-result .sd-markdown-fact strong,
.sd-run-result-paper .sd-run-full-result .sd-markdown-list-item {
  color: var(--sd-artifact-ink);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-fact {
  border-bottom-color: var(--sd-artifact-line);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-fact span,
.sd-run-result-paper .sd-run-full-result .sd-markdown-list-item::before,
.sd-run-result-paper .sd-run-full-result .sd-markdown-list-item.is-ordered::before {
  color: var(--sd-artifact-ink-muted);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-table-wrap {
  border-color: var(--sd-artifact-line);
  background: var(--sd-artifact-paper-card);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-table th,
.sd-run-result-paper .sd-run-full-result .sd-markdown-table td {
  border-bottom-color: var(--sd-artifact-line);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-table th {
  color: var(--sd-artifact-ink);
  background: color-mix(in oklch, var(--sd-artifact-paper-card) 84%, var(--sd-warm) 16%);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-preview code,
.sd-run-result-paper .sd-run-full-result .sd-pre {
  border-color: var(--sd-artifact-line);
  background: var(--sd-artifact-paper-chrome);
  color: var(--sd-artifact-ink);
}

.sd-run-result-paper .sd-run-full-result .sd-markdown-blockquote {
  border-left-color: var(--sd-artifact-line-strong, var(--sd-line-strong));
  background: var(--sd-artifact-paper-chrome);
  color: var(--sd-artifact-ink-muted);
}

.sd-table-preview {
  max-width: 100%;
  overflow: auto;
}

.sd-table-preview table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--sd-text-body);
}

.sd-table-preview th,
.sd-table-preview td {
  border-bottom: 1px solid var(--sd-line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.sd-table-preview th {
  position: sticky;
  top: 0;
  background: var(--sd-paper-strong);
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-table-preview td {
  color: var(--sd-ink);
  max-width: 18rem;
}

.sd-table-preview-cell {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.sd-artifact-create-panel.is-secondary {
  border-style: dashed;
  background: color-mix(in oklch, var(--sd-paper-strong) 88%, transparent);
}

.sd-timeline {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-section-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--sd-line);
  padding: 0 2px;
}

.sd-section-tabs.has-details {
  gap: 10px 16px;
  overflow-x: visible;
}

.sd-section-tabs-primary {
  display: flex;
  flex: 1 1 auto;
  gap: 18px;
  min-width: 0;
  overflow-x: auto;
}

.sd-section-tabs a,
.sd-section-tabs span,
.sd-tab-more summary {
  position: relative;
  flex: 0 0 auto;
  color: var(--sd-muted);
  font-size: var(--sd-text-heading);
  font-weight: 700;
  padding: 10px 0 11px;
  text-decoration: none;
  white-space: nowrap;
}

.sd-section-tabs .is-active,
.sd-section-tabs a:hover,
.sd-tab-more summary:hover {
  color: var(--sd-ink);
}

.sd-section-tabs .is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-accent);
  content: "";
}

/* A drill-down surface (work map, browser, …) reached from a cross-link, shown
   as an active chip so the nav still reads as "you are here" — prefixed to
   signal it sits below the five core tabs. */
.sd-section-tabs .sd-section-tab-detail::before {
  margin-right: 6px;
  color: var(--sd-muted);
  content: "›";
}

.sd-tab-more {
  position: relative;
  flex: 0 0 auto;
}

.sd-tab-more summary {
  cursor: pointer;
  list-style: none;
}

.sd-tab-more summary::-webkit-details-marker {
  display: none;
}

.sd-tab-more summary::before {
  display: inline-block;
  margin-right: 6px;
  color: var(--sd-muted);
  content: "+";
}

.sd-tab-more[open] summary::before {
  content: "-";
}

.sd-tab-more:not([open]) .sd-tab-more-menu {
  display: none;
}

.sd-tab-more-menu {
  position: absolute;
  z-index: 30;
  right: 0;
  display: grid;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-surface);
  box-shadow: var(--sd-shadow);
}

.sd-tab-more-menu a,
.sd-tab-more-menu span {
  padding: 9px 10px;
  border-radius: var(--sd-radius);
}

.sd-tab-more-menu .is-active::after {
  display: none;
}

.sd-readiness-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: var(--sd-paper-strong);
  padding: 16px;
}

.sd-readiness-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: var(--sd-radius-pill);
  background:
    radial-gradient(circle at center, var(--sd-paper-strong) 0 58%, transparent 59%),
    conic-gradient(var(--sd-accent) var(--sd-readiness), var(--sd-line) 0);
  color: var(--sd-ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.sd-readiness-copy {
  display: grid;
  gap: 8px;
}

.sd-readiness-copy h3 {
  font-size: var(--sd-text-title);
  line-height: 1.2;
}

.sd-readiness-copy p {
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-health-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sd-timeline li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
}

.sd-timeline-point {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-teal);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--sd-teal) 16%, transparent);
}

.sd-timeline p {
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-work-map,
.sd-subagent-list,
.sd-activity-list {
  display: grid;
  gap: 10px;
}

.sd-work-stage {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  background: var(--sd-paper-strong);
  padding: 12px;
}

.sd-stage-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-accent-soft) 58%, var(--sd-paper-strong));
  color: var(--sd-accent);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
}

.sd-work-stage-heading,
.sd-resource-draft-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.sd-work-stage-heading h3,
.sd-proposal-section h3,
.sd-resource-draft h3 {
  font-size: var(--sd-text-title);
  line-height: 1.25;
}

.sd-work-stage-heading p,
.sd-subagent-row p,
.sd-activity-row p,
.sd-factory-stage p,
.sd-factory-message p,
.sd-resource-draft p,
.sd-proposal-section p {
  color: var(--sd-muted);
  line-height: 1.45;
  margin-top: 4px;
}

.sd-subagent-row,
.sd-activity-row,
.sd-factory-stage,
.sd-factory-message,
.sd-resource-draft,
.sd-proposal-section {
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  min-width: 0;
  padding: 12px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.sd-subagent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.sd-subagent-group {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.sd-subagent-group:first-of-type {
  margin-top: 0;
}

.sd-subagent-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.sd-subagent-group-count {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-variant-numeric: tabular-nums;
}

.sd-subagent-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 10px 14px;
  border-left-width: 4px;
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  text-decoration: none;
}

.sd-subagent-card:hover {
  border-color: var(--sd-line-stronger);
}

.sd-subagent-card.is-running { border-left-color: var(--sd-blue); }
.sd-subagent-card.is-ok { border-left-color: var(--sd-sage); }
.sd-subagent-card.is-failed { border-left-color: var(--sd-danger); }

.sd-subagent-card-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-subagent-card-main strong {
  overflow-wrap: anywhere;
}

.sd-subagent-card-main p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sd-activity-row {
  display: grid;
  gap: 4px;
}

.sd-activity-row span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
}

.sd-activity-row strong {
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.sd-factory-workbench {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 0.34fr) minmax(360px, 0.42fr) minmax(260px, 0.24fr);
  align-items: start;
}

.sd-factory-conversation,
.sd-factory-pane,
.sd-factory-preview-pane,
.sd-factory-progress-rail {
  min-width: 0;
}

.sd-factory-pane {
  grid-column: 1 / -1;
}

.sd-factory-progress-rail {
  position: sticky;
  top: 18px;
}

.sd-factory-tabs {
  display: grid;
  gap: 12px;
  padding: 2px 0 8px;
}

.sd-factory-tab-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sd-factory-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sd-factory-tab {
  align-items: center;
  background: var(--sd-paper-strong);
  color: var(--sd-muted);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 9px 11px;
  text-decoration: none;
}

.sd-factory-tab.is-active {
  border-color: var(--sd-accent);
  color: var(--sd-ink);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--sd-accent) 16%, transparent);
}

.sd-factory-tab small {
  background: var(--sd-paper);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  padding: 1px 6px;
}

.sd-fw-focus,
.sd-fw-question,
.sd-fw-outputs {
  min-width: 0;
}

.sd-fw-collapsible {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-fw-collapsible-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-fw-summary {
  align-items: center;
  background: var(--sd-paper-strong);
  color: var(--sd-ink);
  cursor: pointer;
  display: flex;
  font-weight: 700;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  padding: 11px 12px;
}

.sd-fw-summary::-webkit-details-marker {
  display: none;
}

.sd-fw-summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--sd-muted);
  border-bottom: 2px solid var(--sd-muted);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.sd-fw-collapsible[open] > .sd-fw-summary::after {
  transform: rotate(-135deg);
}

.sd-fw-collapsible:not([open]) > .sd-fw-collapsible-content {
  display: none;
}

.sd-journey-rail {
  display: block;
  width: 100%;
}

.sd-journey-disclosure {
  border: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface) 92%, white);
}

.sd-journey-disclosure:not([open]) > :not(summary) {
  display: none;
}

.sd-journey-summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  list-style: none;
  min-height: 58px;
  padding: 9px 12px;
}

.sd-journey-summary::-webkit-details-marker {
  display: none;
}

.sd-journey-summary-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sd-journey-kicker {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
}

.sd-journey-summary-copy strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.2;
}

.sd-journey-summary-copy small {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
  line-height: 1.25;
  max-width: 68ch;
}

.sd-journey-progress {
  align-items: center;
  color: var(--sd-muted);
  display: inline-flex;
  gap: 8px;
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  white-space: nowrap;
}

.sd-journey-chevron {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  height: 7px;
  transform: rotate(45deg);
  width: 7px;
}

.sd-journey-disclosure[open] .sd-journey-chevron {
  transform: rotate(-135deg);
}

.sd-journey-rail ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  padding: 0 12px 12px;
  list-style: none;
}

.sd-journey-disclosure[open] ol {
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 66%, transparent);
  padding-top: 10px;
}

.sd-journey-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
}

.sd-journey-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--sd-radius-pill);
  border: 2px solid var(--sd-line);
  background: transparent;
  flex: 0 0 auto;
}

.sd-journey-step.is-done {
  color: var(--sd-ink);
}

.sd-journey-step.is-done .sd-journey-dot {
  background: var(--sd-sage);
  border-color: var(--sd-sage);
}

.sd-journey-step.is-running {
  color: var(--sd-ink);
}

.sd-journey-step.is-running .sd-journey-dot {
  background: var(--sd-accent);
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--sd-accent) 22%, transparent);
}

.sd-journey-substate {
  margin: 0;
  padding: 0 12px 12px;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
}

.sd-factory-stage-rail,
.sd-factory-thread,
.sd-resource-drafts,
.sd-resource-group {
  display: grid;
  gap: 10px;
}

.sd-factory-stage {
  align-items: flex-start;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr auto;
}

.sd-stage-dot {
  background: var(--sd-muted);
  border-radius: var(--sd-radius-pill);
  display: block;
  height: 9px;
  margin-top: 5px;
  width: 9px;
}

.sd-factory-stage.is-running,
.sd-factory-stage.is-done {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sd-accent) 20%, transparent);
}

.sd-factory-stage.is-running .sd-stage-dot,
.sd-factory-stage.is-done .sd-stage-dot {
  background: var(--sd-accent);
}

.sd-proposal-package-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sd-proposal-package-disclosures {
  display: grid;
  gap: 10px;
}

.sd-proposal-detail-disclosure > summary {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.sd-proposal-detail-disclosure .sd-proposal-package-grid {
  margin-top: 12px;
}

.sd-proposal-preview {
  background: color-mix(in oklch, var(--sd-paper-strong) 92%, var(--sd-surface-muted));
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
}

.sd-proposal-preview-head {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.sd-proposal-preview-head h3 {
  font-size: var(--sd-text-title);
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
}

.sd-proposal-preview-head p {
  color: var(--sd-muted);
  line-height: 1.45;
  margin-top: 5px;
}

.sd-proposal-contract-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sd-proposal-decision-rail {
  display: grid;
  gap: 12px;
}

.sd-proposal-proof-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sd-proposal-proof-fact {
  background: var(--sd-paper-strong);
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
}

.sd-proposal-proof-fact strong {
  font-size: var(--sd-text-heading);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sd-proposal-proof-fact p {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.sd-proposal-decision-strip {
  align-items: start;
  background: color-mix(in oklch, var(--sd-paper-strong) 96%, var(--sd-surface-muted));
  border: 1px solid color-mix(in oklch, var(--sd-accent) 22%, var(--sd-line));
  border-radius: var(--sd-radius);
  box-shadow: var(--sd-shadow);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.44fr);
  padding: 12px;
  position: sticky;
  top: 10px;
  z-index: 5;
}

.sd-proposal-decision-strip.is-request-recommended {
  border-color: color-mix(in oklch, var(--sd-warning) 44%, var(--sd-line));
  box-shadow: var(--sd-shadow-soft);
}

.sd-proposal-decision-strip-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-proposal-decision-strip > .sd-loop-strip {
  box-shadow: none;
  grid-column: 1 / -1;
}

.sd-proposal-decision-strip-main strong {
  font-size: var(--sd-text-title);
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.sd-proposal-decision-strip-main p:not(.sd-eyebrow) {
  color: var(--sd-muted);
  line-height: 1.42;
}

.sd-proposal-decision-facts {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.sd-proposal-decision-fact {
  background: var(--sd-paper);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}

.sd-proposal-decision-fact span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-proposal-decision-fact strong {
  font-size: var(--sd-text-body);
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: normal;
}

.sd-proposal-decision-strip-actions {
  align-items: start;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-proposal-decision-strip-actions .sd-actions {
  justify-content: stretch;
}

.sd-proposal-decision-strip-actions .sd-actions .sd-button,
.sd-proposal-decision-strip-actions .sd-actions button {
  flex: 1 1 120px;
  min-width: 0;
}

.sd-proposal-approve-form {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sd-proposal-approve-form .sd-button {
  width: 100%;
}

.sd-proposal-waiver-check {
  align-items: start;
  background: color-mix(in oklch, var(--sd-warning) 8%, var(--sd-paper));
  border: 1px solid color-mix(in oklch, var(--sd-warning) 36%, var(--sd-line));
  border-radius: var(--sd-radius);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 9px;
}

.sd-proposal-waiver-check input {
  margin-top: 2px;
}

.sd-proposal-waiver-check span {
  color: var(--sd-muted);
  display: grid;
  font-size: var(--sd-text-body-sm);
  gap: 2px;
  line-height: 1.35;
}

.sd-proposal-waiver-check strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.25;
}

.sd-proposal-decision-request {
  box-shadow: none;
}

.sd-auto-agent-published-handoff {
  align-items: start;
  background: color-mix(in oklch, var(--sd-sage) 9%, var(--sd-surface));
  border: 1px solid color-mix(in oklch, var(--sd-sage) 42%, var(--sd-line));
  border-radius: var(--sd-radius);
  box-shadow: var(--sd-shadow);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 16px;
}

.sd-auto-agent-published-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-auto-agent-published-main strong {
  font-size: var(--sd-text-title);
  line-height: 1.28;
}

.sd-auto-agent-published-main p {
  color: var(--sd-muted);
  line-height: 1.42;
  margin: 0;
  overflow-wrap: anywhere;
}

.sd-auto-agent-published-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.sd-auto-agent-published-actions .sd-button,
.sd-auto-agent-published-actions a,
.sd-auto-agent-published-actions button {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sd-auto-agent-published-facts {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
}

.sd-auto-agent-published-facts div {
  background: var(--sd-paper);
  min-width: 0;
  padding: 9px 10px;
}

.sd-auto-agent-published-facts dt {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-auto-agent-published-facts dd {
  line-height: 1.3;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.sd-auto-agent-published-advanced {
  grid-column: 1 / -1;
  margin: 0;
}

.sd-auto-agent-published-advanced .sd-auto-agent-published-actions {
  justify-content: flex-start;
  margin-top: 10px;
}

.sd-revision-categories {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.sd-revision-categories legend {
  flex: 0 0 100%;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-revision-category {
  align-items: center;
  background: var(--sd-paper);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
}

.sd-revision-category span {
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sd-resource-group {
  border-top: 1px solid var(--sd-line);
  padding-top: 10px;
}

.sd-resource-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.sd-worker-overview-details[open] > summary,
.sd-run-operational-details[open] > summary {
  margin-bottom: 12px;
}

.sd-worker-overview-details .sd-worker-contract-grid,
.sd-run-operational-details > .sd-stack {
  margin-top: 0;
}

.sd-resource-group-head {
  display: grid;
  gap: 5px;
}

.sd-resource-group-head strong {
  display: block;
  line-height: 1.3;
}

.sd-resource-file summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.sd-artifact-inline-preview {
  border-top: 1px solid var(--sd-line);
  margin-top: 14px;
  padding-top: 14px;
}

.sd-artifact-context {
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
}

.sd-artifact-context > * {
  min-width: 0;
  max-width: 100%;
}

.sd-artifact-context.is-secondary {
  order: 3;
}

.sd-artifact-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sd-artifact-context .sd-mobile-deferred-metrics {
  border-color: color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: color-mix(in oklch, var(--sd-paper-strong) 72%, transparent);
  box-shadow: none;
}

[data-testid="artifacts-page-chrome"] .sd-panel-subtle:has(.sd-artifact-summary-grid) {
  border-color: color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: color-mix(in oklch, var(--sd-paper-strong) 72%, transparent);
  box-shadow: none;
}

.sd-artifact-context .sd-mobile-deferred-metrics .sd-panel-body {
  display: grid;
  gap: 12px;
}

.sd-artifact-summary-grid .sd-metric {
  border-color: color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: var(--sd-fill-glass);
  box-shadow: none;
  padding: 10px 12px;
}

.sd-artifact-source-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 8px;
}

.sd-artifact-workspace {
  display: grid;
  gap: 14px;
  align-items: start;
  grid-template-areas: "main" "side";
  min-width: 0;
  max-width: 100%;
}

.sd-artifact-workspace > *,
.sd-artifact-run-package {
  min-width: 0;
  max-width: 100%;
}

.sd-artifact-run-package {
  border: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  border-radius: var(--sd-radius);
  background: var(--sd-fill-glass);
  overflow: hidden;
  padding: 10px;
}

.sd-artifact-run-package[open] {
  gap: 12px;
}

.sd-artifact-run-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  min-width: 0;
  overflow: hidden;
}

.sd-artifact-run-summary::-webkit-details-marker {
  display: none;
}

.sd-artifact-run-summary > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-artifact-run-summary strong,
.sd-artifact-run-summary small {
  overflow-wrap: anywhere;
}

.sd-artifact-run-summary small {
  color: var(--sd-muted);
  line-height: 1.35;
}

.sd-artifact-library-panel,
.sd-artifact-reader-main {
  grid-area: main;
  min-width: 0;
}

.sd-artifact-inspector {
  grid-area: side;
  min-width: 0;
}

.sd-artifact-filter-drawer .sd-filter-bar,
.sd-artifact-library-panel > .sd-panel,
.sd-artifact-inspector > .sd-panel {
  border-color: color-mix(in oklch, var(--sd-line) 72%, transparent);
  background: color-mix(in oklch, var(--sd-paper-strong) 70%, transparent);
  box-shadow: none;
}

.sd-artifact-filter-drawer .sd-filter-bar {
  padding: 10px 12px;
}

.sd-artifact-workspace.is-previewing .sd-artifact-inspector .sd-bounded-body {
  max-height: min(72vh, var(--sd-max-height));
}

.sd-artifact-workspace.is-previewing .sd-list-row.is-selected {
  border-color: color-mix(in oklch, var(--sd-accent) 35%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent-soft) 28%, var(--sd-paper-strong));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sd-accent) 22%, transparent);
}

.sd-artifact-output-row {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.36fr);
}

.sd-artifact-related-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.sd-artifact-related-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sd-artifact-related-row strong,
.sd-artifact-related-row p {
  overflow-wrap: break-word;
  word-break: normal;
}

.sd-artifact-output-row a:not(.sd-button),
.sd-artifact-related-row a:not(.sd-button),
.sd-artifact-run-package .sd-v4-provenance-bar a {
  color: var(--sd-accent-strong);
  font-weight: 700;
  text-decoration: none;
}

.sd-artifact-output-row a:not(.sd-button):hover,
.sd-artifact-related-row a:not(.sd-button):hover,
.sd-artifact-run-package .sd-v4-provenance-bar a:hover {
  text-decoration: underline;
}

.sd-artifact-related-row .sd-actions {
  justify-content: flex-start;
}

.sd-artifact-inline-preview {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
}

.sd-artifact-inline-document-preview,
.sd-artifact-inline-table-preview {
  background: color-mix(in oklch, var(--sd-paper-strong) 82%, var(--sd-surface-muted));
  border: 1px solid color-mix(in oklch, var(--sd-line) 82%, transparent);
  border-radius: var(--sd-radius);
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
}

.sd-artifact-inline-document-preview em,
.sd-artifact-inline-table-preview-head em {
  color: var(--sd-blue);
  font-size: var(--sd-text-eyebrow);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.sd-artifact-inline-document-preview p {
  color: var(--sd-ink);
  display: -webkit-box;
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.sd-artifact-inline-table-preview-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: space-between;
  min-width: 0;
}

.sd-artifact-inline-table-preview-head small {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  line-height: 1.2;
}

.sd-artifact-inline-table-preview-grid,
.sd-artifact-inline-table-preview-grid .is-row {
  display: grid;
  grid-template-columns: repeat(var(--sd-table-preview-columns, 3), minmax(0, 1fr));
  min-width: 0;
}

.sd-artifact-inline-table-preview-grid {
  border-top: 1px solid var(--sd-line);
  overflow: hidden;
}

.sd-artifact-inline-table-preview-grid .is-row {
  grid-column: 1 / -1;
}

.sd-artifact-inline-table-preview-grid > .is-header,
.sd-artifact-inline-table-preview-grid .is-row > span {
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 76%, transparent);
  color: var(--sd-ink);
  font-size: var(--sd-text-label);
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  padding: 5px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-artifact-inline-table-preview-grid > .is-header {
  background: color-mix(in oklch, var(--sd-surface-muted) 74%, transparent);
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
}

.sd-artifact-row-actions,
.sd-artifact-related-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sd-artifact-row-destinations,
.sd-artifact-related-destinations {
  justify-content: flex-start;
}

@container (max-width: 880px) {
  .sd-artifact-output-row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1280px) {
  .sd-artifact-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.36fr);
    grid-template-areas: "main side";
  }

  .sd-artifact-workspace.is-previewing {
    grid-template-columns: minmax(640px, 1fr) minmax(300px, 0.32fr);
  }

  .sd-artifact-workspace.is-previewing .sd-artifact-inspector {
    position: sticky;
    top: 18px;
    max-height: 82vh;
    overflow: auto;
  }
}

@container (max-width: 1040px) {
  .sd-home-current-step,
  .sd-home-journey-spine {
    grid-template-columns: 1fr;
  }

  .sd-workbench-access-grid,
  .sd-workbench-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-home-journey-action {
    justify-items: start;
  }

  .sd-page-chrome-index .sd-page-work-area.has-side-rail,
  .sd-page-work-area.has-side-rail {
    grid-template-columns: 1fr;
  }

  .sd-page-side-rail {
    position: static;
  }

  .sd-side-summary {
    display: flex;
  }

  .sd-side-toggle:not(:checked) ~ .sd-page-side-content {
    display: none;
  }

  .sd-side-toggle:checked ~ .sd-page-side-content {
    max-height: min(720px, 72vh);
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
  }
}

@container (min-width: 920px) {
  .sd-run-detail-page .sd-page-work-area.sd-page-side-desktop-expanded.has-side-rail {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  }

  .sd-page-work-area.sd-page-side-desktop-expanded .sd-side-summary {
    display: none;
  }

  .sd-page-work-area.sd-page-side-desktop-expanded .sd-page-side-content {
    display: grid;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@container (max-width: 900px) {
  .sd-workbench-grid {
    grid-template-columns: 1fr;
  }
}

@container (max-width: 720px) {
  .sd-workbench-entry {
    padding: 12px;
  }

  .sd-workbench-access-grid,
  .sd-project-context-facts,
  .sd-project-context-includes,
  .sd-projects-summary-grid,
  .sd-projects-controls-grid,
  .sd-list .sd-projects-playbook-row,
  .sd-management-gate-grid,
  .sd-workbench-context-grid,
  .sd-workbench-estimate-grid,
  .sd-workbench-template-grid {
    grid-template-columns: 1fr;
  }

  .sd-workbench-context-column + .sd-workbench-context-column {
    border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
    border-left: 0;
  }

  .sd-workbench-estimate-item {
    border-right: 0;
    border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  }

  .sd-workbench-estimate-item:last-child {
    border-bottom: 0;
  }

  .sd-workbench-template:nth-child(odd) {
    border-right: 0;
  }

  .sd-workbench-template:nth-last-child(-n + 2) {
    border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  }

  .sd-workbench-template:last-child {
    border-bottom: 0;
  }

  .sd-projects-playbook-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-project-state {
    justify-self: start;
    white-space: normal;
  }

  .sd-workbench-actions .sd-button {
    flex: 1 1 160px;
  }
}

@container (min-width: 1120px) {
  .sd-page-work-area.sd-page-side-desktop-expanded.has-side-rail {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
    align-items: start;
  }

  .sd-run-detail-page .sd-page-work-area.sd-page-side-desktop-expanded.has-side-rail {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.44fr);
  }

  .sd-page-work-area.sd-page-side-desktop-expanded .sd-page-side-rail {
    position: sticky;
    top: 18px;
  }

  .sd-page-work-area.sd-page-side-desktop-expanded .sd-side-summary {
    display: none;
  }

  .sd-page-work-area.sd-page-side-desktop-expanded .sd-page-side-content {
    display: grid;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 1050px) {
  .sd-create-worker-builder,
  .sd-create-worker-builder.is-save-playbook,
  .sd-auto-agent-priority-strip,
  .sd-create-choice-grid,
	  .sd-factory-workbench,
	  .sd-proposal-proof-strip,
	  .sd-proposal-contract-grid,
	  .sd-proposal-package-grid,
	  .sd-proposal-decision-header,
  .sd-approval-inbox-layout,
  .sd-approval-inbox-layout.is-decision-first,
  .sd-composer-layout,
  .sd-action-log-workroom,
  .sd-run-collaboration-workroom,
  .sd-access-workroom,
  .sd-learning-workroom,
  .sd-playbook-home-grid,
  .sd-page-chrome-index .sd-page-work-area.has-side-rail,
  .sd-page-work-area.has-side-rail,
  .sd-setup-browser-flow,
  .sd-workroom-layout {
    grid-template-columns: 1fr;
  }

  .sd-learning-summary-grid,
  .sd-fl-learning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-learning-review-lede,
  .sd-learning-proposal-card {
    grid-template-columns: 1fr;
  }

  .sd-learning-proposal-actions {
    justify-content: flex-start;
  }

  .sd-run-collaboration-rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .sd-proposal-decision-strip {
    left: 8px;
    right: 8px;
    bottom: 0;
    grid-template-columns: minmax(0, 1fr);
    max-height: min(340px, 44vh);
    overflow: auto;
    position: fixed;
    top: auto;
    z-index: 30;
  }

  .sd-proposal-decision-strip-main p:not(.sd-eyebrow) {
    display: none;
  }

	  .sd-proposal-decision-strip .sd-disclosure {
	    padding: 9px 10px;
	  }

  .sd-auto-agent-primary-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-auto-agent-primary-row.is-started {
    bottom: 10px;
    box-shadow: 0 -10px 28px color-mix(in oklch, var(--sd-shadow) 18%, transparent);
    position: sticky;
    z-index: 24;
  }

  .sd-auto-agent-primary-submit {
    width: 100%;
  }

  .sd-auto-agent-brief-actions.is-started {
    padding: 8px 10px;
  }

  .sd-auto-agent-brief-actions.is-started .sd-loop-strip-copy p,
  .sd-auto-agent-brief-actions.is-started .sd-loop-strip-actions .sd-actions {
    display: none;
  }

  .sd-auto-agent-brief-actions.is-started .sd-loop-strip-actions {
    justify-content: flex-start;
  }

	  .sd-action-disabled-note {
	    white-space: normal;
	  }

	  /* Auto Agent workbench: lead with the operator decision, demote the rest. */
  .sd-factory-conversation {
    display: contents;
  }

  .sd-fw-question {
    order: 0;
  }

  .sd-fw-focus {
    order: 1;
  }

  .sd-fw-outputs {
    order: 3;
  }

  .sd-fw-notes {
    order: 3;
  }

  .sd-factory-preview-pane {
    order: 1;
  }

  .sd-factory-progress-rail {
    order: 4;
  }

  .sd-factory-pane {
    order: 5;
  }

  .sd-worker-preview-grid,
  .sd-worker-preview-row,
  .sd-proof-row,
  .sd-proposal-decision-facts,
  .sd-run-recipe-grid,
  .sd-run-input-fields,
  .sd-schedule-presets,
  .sd-access-briefing-grid,
  .sd-setup-access-grid,
  .sd-run-receipt-actions,
  .sd-run-started-strip,
  .sd-schedule-receipt,
  .sd-auto-agent-published-handoff,
  .sd-proposal-preview-head {
    grid-template-columns: 1fr;
  }

  .sd-schedule-guide-head {
    display: grid;
    justify-items: start;
  }

  .sd-fw-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius);
    background: var(--sd-paper-strong);
    color: var(--sd-ink);
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    padding: 11px 12px;
  }

  .sd-fw-summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--sd-muted);
    border-bottom: 2px solid var(--sd-muted);
    transform: rotate(45deg);
    flex: 0 0 auto;
  }

  .sd-fw-collapsible[open] > .sd-fw-summary::after {
    transform: rotate(-135deg);
  }

  .sd-fw-collapsible:not([open]) > .sd-fw-collapsible-content {
    display: none;
  }

  .sd-side-summary {
    display: flex;
  }

  .sd-side-toggle:not(:checked) ~ .sd-page-side-content {
    display: none;
  }

  .sd-side-toggle:checked ~ .sd-page-side-content {
    max-height: min(720px, 72vh);
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
  }

  .sd-mobile-primary-first {
    grid-template-columns: 1fr;
  }

  .sd-mobile-primary-first > .sd-page-primary {
    order: 0;
  }

  .sd-mobile-primary-first > .sd-mobile-details-after-decision {
    order: 2;
  }

  .sd-mobile-filter-summary,
  .sd-mobile-review-summary {
    display: flex;
  }

  .sd-mobile-filter-drawer:not([open]) > .sd-mobile-filter-content,
  .sd-mobile-review-disclosure:not([open]) > .sd-mobile-review-content {
    display: none;
  }

  .sd-mobile-filter-drawer[open] > .sd-mobile-filter-content,
  .sd-mobile-review-disclosure[open] > .sd-mobile-review-content {
    max-height: min(720px, 72vh);
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
  }

  .sd-mobile-review-panel,
  .sd-launch-review-rail {
    position: static;
    bottom: auto;
    order: 2;
    z-index: auto;
  }

  .sd-launch-recipe {
    padding-bottom: 0;
  }

  .sd-launch-recipe .sd-launch-review-rail {
    position: static;
    max-height: none;
  }

  .sd-mobile-review-panel .sd-mobile-review-disclosure {
    border-radius: var(--sd-radius-lg);
    background: color-mix(in oklch, var(--sd-paper-strong) 90%, transparent);
    box-shadow: 0 14px 36px color-mix(in oklch, var(--sd-shadow) 42%, transparent);
  }

  .sd-mobile-review-actions-slot {
    padding: 0 12px 12px;
  }

  .sd-mobile-review-actions-slot .sd-panel {
    box-shadow: none;
  }

  .sd-mobile-draft-submit {
    display: grid;
    gap: 8px;
    order: 1;
  }

  .sd-mobile-draft-submit .sd-button {
    justify-content: center;
    width: 100%;
  }

  .sd-mobile-deferred-metrics {
    order: 4;
  }

  .sd-agent-index-filter-drawer {
    order: 0;
    position: sticky;
    top: 8px;
    z-index: 8;
    border-radius: var(--sd-radius-lg);
    background: color-mix(in oklch, var(--sd-surface) 92%, transparent);
  }

  .sd-agent-index-summary {
    order: 1;
  }

  .sd-agent-contract-list {
    order: 2;
  }

  .sd-artifact-workspace {
    order: 1;
  }

  .sd-artifact-context {
    order: 2;
  }

  .sd-agent-index-intro {
    order: 3;
  }

  .sd-mobile-primary-first > .sd-page-side-rail-review-first {
    order: -1;
  }

  .sd-run-detail-page .sd-mobile-primary-first > .sd-page-primary {
    order: 0;
  }

  .sd-run-detail-page .sd-mobile-primary-first {
    display: flex;
    flex-direction: column;
  }

  .sd-run-detail-page .sd-mobile-primary-first > .sd-page-side-rail {
    order: 3;
  }

  .sd-launch-review-rail,
  .sd-launch-recipe > aside {
    order: 2;
  }

  .sd-launch-review-actions {
    grid-template-columns: 1fr;
  }

  .sd-launch-inline-mobile-actions {
    display: grid;
    gap: 8px;
    position: sticky;
    bottom: 10px;
    z-index: 16;
  }

  .sd-launch-inline-mobile-actions .sd-button {
    justify-content: center;
    box-shadow: 0 10px 26px color-mix(in oklch, var(--sd-shadow) 28%, transparent);
  }

  .sd-launch-review-rail .sd-launch-review-actions {
    display: none;
  }

  .sd-agent-index-intro,
  .sd-agent-filter-rail,
  .sd-run-ledger-heading-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .sd-agent-index-meta {
    justify-content: flex-start;
    max-width: none;
  }

  .sd-agent-index-summary .sd-status-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 2px;
  }

  .sd-agent-index-summary .sd-status-card {
    flex: 0 0 156px;
    gap: 6px;
    padding: 9px 10px;
  }

  .sd-agent-index-summary .sd-status-card strong {
    margin-top: 2px;
    font-size: var(--sd-text-title);
  }

  .sd-agent-index-summary .sd-status-card small {
    display: none;
  }

  .sd-agent-readiness-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .sd-agent-index-state,
  .sd-agent-proposal-state,
  .sd-v4-agent-state {
    justify-self: start;
    white-space: normal;
  }

  .sd-run-visual-evidence-head {
    display: grid;
    justify-items: start;
  }

  .sd-run-visual-evidence-grid,
  .sd-run-visual-primary {
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-run-visual-primary {
    min-height: auto;
  }

  .sd-run-visual-primary-image {
    min-height: 180px;
  }

  .sd-run-visual-rail .sd-run-visual-thumb {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .sd-run-proof-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .sd-run-proof-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
  }

  .sd-action-log-table {
    border: 0;
    background: transparent;
  }

  .sd-action-log-table-head {
    display: none;
  }

  .sd-action-log-table .sd-action-log-item {
    grid-template-areas:
      "event status"
      "time time"
      "actor actor"
      "summary summary";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-bottom: 0;
    padding: 12px 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
    border-radius: 0;
    background: transparent;
  }

  .sd-action-log-workroom .sd-action-log-table .sd-action-log-item {
    grid-template-areas:
      "event status"
      "time time"
      "actor actor"
      "summary summary";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 12px 0;
  }

  .sd-action-log-table .sd-action-log-item:not(.has-row-status) {
    grid-template-areas:
      "event"
      "time"
      "actor"
      "summary";
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-action-log-workroom .sd-action-log-table .sd-action-log-item:not(.has-row-status) {
    grid-template-areas:
      "event"
      "time"
      "actor"
      "summary";
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-action-log-table .sd-action-log-time,
  .sd-action-log-table .sd-action-log-event,
  .sd-action-log-table .sd-action-log-actor {
    width: fit-content;
    max-width: 100%;
  }

  .sd-action-log-status {
    justify-items: start;
  }

  .sd-auto-research-setup-grid {
    grid-template-columns: 1fr;
  }

  .sd-auto-research-setup-grid > .sd-panel:last-child {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .sd-management-gate-grid {
    grid-template-columns: 1fr;
  }

  .sd-run-collaboration-role-guide {
    grid-template-columns: 1fr;
  }

  .sd-save-playbook-snapshot-head,
  .sd-save-playbook-source {
    flex-direction: column;
  }

  .sd-save-playbook-summary-grid {
    grid-template-columns: 1fr;
  }

  .sd-save-playbook-source .sd-actions {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }
}

@media (max-width: 900px) {
  .sd-console,
  .sd-console:has(.sd-sidebar-toggle:checked) {
    display: block;
    min-height: 100vh;
  }

  .sd-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    width: min(320px, calc(100vw - 32px));
    height: 100dvh;
    gap: 14px;
    border-right: 1px solid var(--sd-line-strong);
    box-shadow: 0 24px 80px color-mix(in oklch, var(--sd-ink) 18%, transparent);
    padding: 14px;
    transform: translateX(-105%);
    transition: transform 160ms ease;
    visibility: hidden;
    pointer-events: none;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .sd-console:has(.sd-sidebar-toggle:checked) .sd-sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .sd-sidebar-head,
  .sd-console:has(.sd-sidebar-toggle:checked) .sd-sidebar-head {
    justify-content: space-between;
  }

  .sd-brand,
  .sd-console:has(.sd-sidebar-toggle:checked) .sd-brand {
    display: inline-flex;
  }

  .sd-workspace-switcher,
  .sd-console:has(.sd-sidebar-toggle:checked) .sd-workspace-switcher {
    display: block;
  }

  .sd-workspace-card,
  .sd-console:has(.sd-sidebar-toggle:checked) .sd-workspace-card {
    display: flex;
  }

  .sd-session-form,
  .sd-console:has(.sd-sidebar-toggle:checked) .sd-session-form {
    display: block;
  }

  .sd-brand-name,
  .sd-nav-label,
  .sd-nav a span:not(.sd-nav-icon),
  .sd-console:has(.sd-sidebar-toggle:checked) .sd-brand-name,
  .sd-console:has(.sd-sidebar-toggle:checked) .sd-nav-label,
  .sd-console:has(.sd-sidebar-toggle:checked) .sd-nav a span:not(.sd-nav-icon) {
    display: inline;
  }

  .sd-nav {
    grid-template-columns: 1fr;
  }

  .sd-nav a,
  .sd-console:has(.sd-sidebar-toggle:checked) .sd-nav a {
    justify-content: flex-start;
    min-height: 40px;
    padding: 9px 10px;
  }

  .sd-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: color-mix(in oklch, var(--sd-ink) 28%, transparent);
    cursor: pointer;
  }

  .sd-console:has(.sd-sidebar-toggle:checked) .sd-sidebar-backdrop {
    display: block;
  }

  .sd-mobile-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius-sm);
    background: var(--sd-fill-glass);
    color: var(--sd-ink);
    cursor: pointer;
    font-size: var(--sd-text-body);
    font-weight: 700;
    padding: 5px 9px 5px 6px;
  }

  .sd-main {
    padding: 14px;
    gap: 14px;
  }

  .sd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
  }

  .sd-topbar-identity {
    gap: 8px;
  }

  .sd-topbar-context {
    display: none;
  }

  .sd-action-rail {
    justify-content: flex-start;
  }

  .sd-topbar-identity .sd-context-chip,
  .sd-topbar-context .sd-context-chip {
    max-width: 100%;
  }

  .sd-page-header,
  .sd-page-object-header {
    grid-template-columns: 1fr;
  }

  .sd-grid.two,
  .sd-grid.two-even,
  .sd-grid.three,
  .sd-grid.four,
  .sd-worker-overview-grid,
  .sd-worker-run-grid,
  .sd-worker-contract-grid,
  .sd-io-strip,
  .sd-capability-summary-strip,
  .sd-capability-preview-list,
  .sd-agent-quality-facts,
  .sd-agent-quality-proof-grid,
  .sd-agent-quality-detail-grid,
  .sd-agent-output-package header,
  .sd-agent-output-preview-grid,
  .sd-agent-output-package-meta,
  .sd-status-strip,
  .sd-approval-summary,
  .sd-approval-queue-note,
  .sd-approval-filters,
  .sd-decision-facts,
  .sd-v4-approval-source,
  .sd-decision-answer-form,
  .sd-capability-grid {
    grid-template-columns: 1fr;
  }

  .sd-worker-prompt-card {
    grid-row: auto;
  }

  .sd-learning-summary-grid {
    grid-template-columns: 1fr;
  }

  .sd-artifact-reader-header,
  .sd-artifact-reader-meta,
  .sd-artifact-source-facts,
  .sd-artifact-summary-grid,
  .sd-markdown-fact {
    grid-template-columns: 1fr;
  }

  .sd-worker-summary,
  .sd-capability-preview-card,
  .sd-channel-row,
  .sd-decision-row,
  .sd-decision-summary,
  .sd-subagent-row,
  .sd-setup-node,
  .sd-table-heading,
  .sd-table-row,
  .sd-readiness-hero,
  .sd-form-row {
    grid-template-columns: 1fr;
  }

  .sd-setup-scenario header {
    display: grid;
  }

  .sd-setup-node-meta {
    justify-items: start;
    min-width: 0;
  }

  .sd-run-index-status {
    display: flex;
  }

  .sd-ledger-heading {
    display: grid;
    align-items: start;
  }

  .sd-ledger-heading .sd-actions {
    justify-content: flex-start;
  }

  .sd-guide-steps li {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .sd-first-use-compact {
    margin-top: var(--sd-space-4);
  }

  .sd-first-use-compact .sd-panel-body {
    gap: var(--sd-space-3);
  }

  .sd-first-use-compact .sd-guide-steps {
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
    max-height: min(38vh, 320px);
    overflow: auto;
    padding-right: 2px;
    scrollbar-width: thin;
  }

  .sd-first-use-compact .sd-guide-steps li {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    padding: 8px;
  }

  .sd-first-use-compact .sd-guide-steps p {
    display: none;
  }

  .sd-first-use-compact .sd-guide-step-marker {
    width: 8px;
    height: 8px;
    margin-top: 0;
  }

  .sd-work-stage {
    grid-template-columns: 1fr;
  }

  .sd-work-stage-heading {
    display: grid;
  }

  .sd-action-log-head,
  .sd-run-agent-activity-head {
    display: grid;
    justify-items: start;
  }

  .sd-action-log-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .sd-action-log-meta .sd-action-log-event {
    max-width: 100%;
  }

  .sd-v4-diff-body {
    grid-template-columns: 1fr;
  }

  .sd-channel-state {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .sd-workspace-chooser-main {
    width: min(100vw - 28px, 100%);
    gap: 14px;
    padding: 18px 0 36px;
  }

  .sd-workspace-chooser-hero,
  .sd-workspace-chooser-grid {
    grid-template-columns: 1fr;
  }

  .sd-workspace-chooser-hero {
    align-items: start;
    gap: 14px;
    padding: 14px 0 18px;
  }

  .sd-workspace-chooser-hero .sd-button {
    width: 100%;
  }

  .sd-workspace-choice {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
  }

  .sd-workspace-choice > span:last-child {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 520px) {
  [data-testid="learning-page"] .sd-page-header {
    gap: 10px;
    padding: 14px;
  }

  [data-testid="learning-page"] .sd-page-header-copy {
    gap: 5px;
  }

  [data-testid="learning-page"] .sd-page-header-copy p:not(.sd-eyebrow) {
    line-height: 1.34;
  }

  [data-testid="learning-page"] .sd-action-rail .sd-button {
    flex: 1 1 138px;
    justify-content: center;
  }

  .sd-learning-workroom {
    gap: 10px;
  }

  .sd-learning-workroom .sd-panel {
    gap: 10px;
    padding: 12px;
  }

  .sd-learning-review-note {
    font-size: var(--sd-text-heading);
    line-height: 1.34;
  }

  .sd-learning-review-note span {
    display: none;
  }

  .sd-learning-summary-grid {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 10px 0;
  }

  .sd-learning-metric {
    gap: 4px;
    min-height: 66px;
    padding: 9px;
  }

  .sd-learning-metric span {
    font-size: var(--sd-text-eyebrow);
  }

  .sd-learning-metric strong {
    font-size: var(--sd-text-section);
  }

  .sd-learning-metric em {
    font-size: var(--sd-text-label);
  }

  .sd-learning-filter-bar {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }

  .sd-learning-filter-bar .sd-field {
    gap: 5px;
  }

  .sd-learning-filter-bar .sd-filter-actions {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .sd-learning-filter-bar .sd-filter-actions .sd-button {
    flex: 1 1 120px;
    justify-content: center;
  }

  .sd-learning-result-meta {
    gap: 4px 8px;
    margin: 8px 0;
  }

  .sd-learning-result-meta em {
    font-size: var(--sd-text-body-sm);
  }

  .sd-learning-batch-bar {
    align-items: stretch;
    display: grid;
  }

  .sd-learning-batch-bar .sd-actions {
    width: 100%;
  }

  .sd-learning-batch-bar .sd-button {
    justify-content: center;
  }

  .sd-learning-proposal-list {
    max-height: min(52vh, 420px);
  }

  .sd-learning-proposal-card {
    gap: 10px;
    padding: 11px;
  }
}

@media (max-width: 520px) {
  .sd-console,
  .sd-console:has(.sd-sidebar-toggle:checked) {
    display: block;
  }

  .sd-sidebar {
    width: min(320px, calc(100vw - 24px));
    padding-inline: 12px;
  }

  .sd-main {
    padding: 12px 8px 14px;
  }

  .sd-topbar {
    align-items: flex-start;
  }

  .sd-topbar-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  .sd-topbar-context {
    flex: 1 1 auto;
  }

  .sd-topbar-identity .sd-context-chip-wide {
    max-width: none;
  }

  .sd-topbar,
  .sd-page-header,
  .sd-home-current-step,
  .sd-home-journey-spine,
  .sd-page-attention-rail,
  .sd-page-side-rail,
  .sd-page-work-area,
  .sd-workroom-layout,
  .sd-composer-layout,
  .sd-artifact-context,
  .sd-artifact-workspace {
    max-width: 100%;
    min-width: 0;
  }

  .sd-panel-heading {
    display: grid;
    justify-content: stretch;
  }

  .sd-panel-actions,
  .sd-page-actions {
    justify-content: flex-start;
  }

  .sd-v4-approval-card h3,
  .sd-v4-approval-card p,
  .sd-v4-approval-card .sd-v4-approval-title,
  .sd-v4-approval-source strong,
  .sd-v4-approval-source a,
  .sd-private-detail__header p,
  .sd-v4-approval-card .sd-actions > span {
    overflow-wrap: anywhere;
  }

  .sd-v4-approval-source {
    grid-template-columns: 1fr;
  }

  .sd-v4-approval-card .sd-actions {
    align-items: stretch;
  }

  .sd-v4-approval-card .sd-actions .sd-button,
  .sd-v4-approval-card .sd-actions button,
  .sd-v4-approval-card .sd-actions a {
    flex: 1 1 148px;
    justify-content: center;
  }

  .sd-v4-approval-card .sd-actions > span {
    flex: 1 1 100%;
  }

  .sd-home-loop {
    gap: 5px;
  }

  .sd-home-loop li {
    min-height: 26px;
    font-size: var(--sd-text-label);
    padding: 4px 7px;
  }

  .sd-home-health-facts > div {
    grid-template-columns: 1fr;
  }

  .sd-auto-agent-brief-actions {
    position: static;
  }

  .sd-section-tabs {
    flex-wrap: wrap;
    gap: 6px 14px;
    overflow-x: visible;
    padding-bottom: 8px;
  }

  .sd-section-tabs-primary {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 4px 12px;
    overflow-x: visible;
  }

  .sd-section-tabs a,
  .sd-section-tabs span,
  .sd-tab-more summary {
    font-size: var(--sd-text-body);
    padding: 7px 0 8px;
  }

  .sd-tab-more {
    flex: 1 1 100%;
  }

  .sd-tab-more summary {
    width: fit-content;
  }

  .sd-worker-tabs {
    gap: 4px;
  }

  .sd-worker-tab {
    min-height: 32px;
    font-size: var(--sd-text-body-sm);
    padding: 6px 8px;
  }

  .sd-worker-card-head,
  .sd-profile-facts,
  .sd-capability-overview-row {
    grid-template-columns: 1fr;
  }

  .sd-launch-context-compact-head {
    grid-template-columns: 1fr;
  }

  .sd-launch-context-compact-actions {
    justify-content: flex-start;
  }

  [data-testid="launch-page-chrome"] .sd-page-meta-strip,
  [data-testid="launch-page-chrome"] .sd-launch-task-map {
    display: none;
  }

  .sd-launch-context-tabs {
    grid-template-columns: 1fr;
  }

  .sd-run-sheet-guidance,
  .sd-run-recipe,
  .sd-run-input-brief,
  .sd-run-sheet-section,
  .sd-run-sheet-disclosure > summary {
    padding: 10px;
  }

  .sd-run-sheet-guidance.is-compact p {
    display: none;
  }

  .sd-run-sheet-disclosure[open] {
    padding-bottom: 10px;
  }

  .sd-run-sheet-disclosure > :not(summary) {
    margin-inline: 10px;
  }

  .sd-run-input-field textarea {
    min-height: 92px;
  }

  .sd-run-receipt-actions.is-toolbar {
    grid-template-columns: 1fr;
  }

  .sd-run-receipt-actions-toolbar {
    justify-content: flex-start;
  }

  .sd-v4-agent-card header,
  .sd-v4-run-package header,
  .sd-v4-version-diff header,
  .sd-v4-artifact-list a,
  .sd-usage-breakdown-row {
    grid-template-columns: 1fr;
  }

  .sd-v4-evidence-row {
    grid-template-columns: 1fr;
  }

  .sd-agent-index-filter-drawer {
    top: 6px;
  }

  .sd-agent-filter-rail {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sd-agent-filter-rail > div:first-child {
    display: none;
  }

  .sd-agent-filter-rail .sd-field span {
    font-size: var(--sd-text-label);
  }

  .sd-v4-agent-card.is-compact {
    gap: 8px;
    padding: 10px;
  }

  .sd-v4-card-primary-actions {
    margin-top: -2px;
  }

  .sd-v4-card-primary-actions .sd-button,
  .sd-v4-card-primary-actions button {
    min-height: 34px;
  }
}

/* ===========================================================================
   Cool-minimal shared component kit (design system Phase 1).
   Token-driven, theme-invariant in structure — colors resolve per theme.
   =========================================================================== */

/* Button loading spinner — inherits currentColor (on-accent or ink). */
.sd-button-spinner {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.45em;
  border-radius: 50%;
  border: 2px solid color-mix(in oklch, currentColor 32%, transparent);
  border-top-color: currentColor;
  animation: sd-button-spin 0.7s linear infinite;
  vertical-align: -0.1em;
}

@keyframes sd-button-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-button-spinner {
    animation: none;
  }
}

/* Meta pill — cost · tokens · duration (mono value). */
.sd-meta-pill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sd-space-2);
  padding: 4px 10px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-surface);
}

.sd-meta-pill-label {
  font-size: var(--sd-text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking-label);
  color: var(--sd-muted);
}

.sd-meta-pill-value {
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-body-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sd-ink);
}

.sd-meta-pill[data-cost="true"] .sd-meta-pill-value {
  color: var(--sd-accent-strong);
}

/* KPI strip — headline operator metrics. */
.sd-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sd-space-4);
}

.sd-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-1);
  padding: var(--sd-pad-panel);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-surface);
}

.sd-kpi-label {
  font-size: var(--sd-text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking-eyebrow);
  color: var(--sd-muted);
}

.sd-kpi-value {
  font-family: var(--sd-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--sd-text-section);
  font-weight: 600;
  color: var(--sd-ink);
}

.sd-kpi-detail {
  font-size: var(--sd-text-label);
  color: var(--sd-muted);
}

/* Template / example card. */
.sd-example-card {
  display: block;
  padding: var(--sd-space-5);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-surface);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--sd-duration-fast) var(--sd-ease-standard),
    box-shadow var(--sd-duration-fast) var(--sd-ease-standard);
}

a.sd-example-card:hover {
  border-color: var(--sd-accent);
  box-shadow: var(--sd-shadow-soft);
}

a.sd-example-card:focus-visible {
  outline: 2px solid var(--sd-focus);
  outline-offset: 2px;
}

.sd-example-card-title {
  margin: 0 0 var(--sd-space-2);
  font-size: var(--sd-text-body);
  font-weight: 600;
  color: var(--sd-ink);
}

.sd-example-card-body {
  margin: 0 0 var(--sd-space-4);
  font-size: var(--sd-text-body-sm);
  color: var(--sd-muted);
}

.sd-example-card-foot {
  display: flex;
  gap: var(--sd-space-4);
  font-family: var(--sd-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--sd-text-eyebrow);
  color: var(--sd-muted);
}

/* Inspector / context rail. */
.sd-inspector-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-4);
  padding: var(--sd-pad-panel);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-surface);
}

.sd-inspector-rail-head h3 {
  margin: 0;
  font-size: var(--sd-text-heading);
  font-weight: 600;
  color: var(--sd-ink);
}

.sd-inspector-rail-body {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-3);
}

/* Playbook builder wizard (stepper + footer). */
.sd-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-wizard-steps > li {
  min-width: 0;
  margin: 0;
}

.sd-wizard-step {
  display: inline-flex;
  align-items: center;
  gap: var(--sd-space-3);
  padding: var(--sd-space-3) var(--sd-space-4);
  background: var(--sd-surface);
  color: var(--sd-muted);
  cursor: pointer;
  font: inherit;
  min-width: 0;
  text-align: left;
  transition:
    border-color var(--sd-duration-fast) var(--sd-ease-standard),
    background var(--sd-duration-fast) var(--sd-ease-standard);
}

.sd-wizard-step:hover:not(:disabled) {
  border-color: var(--sd-line-strong);
}

.sd-wizard-step:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sd-wizard-step.is-current {
  border-color: var(--sd-accent);
  background: var(--sd-accent-soft);
  color: var(--sd-accent-ink);
}

.sd-wizard-step.is-done {
  color: var(--sd-ink);
}

.sd-wizard-step-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: var(--sd-text-label);
  font-variant-numeric: tabular-nums;
}

.sd-wizard-step.is-current .sd-wizard-step-num {
  background: var(--sd-accent);
  border-color: var(--sd-accent);
  color: var(--sd-on-accent);
}

.sd-wizard-step-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.sd-wizard-step-text strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sd-wizard-step-text small {
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
}

.sd-wizard-step.is-current .sd-wizard-step-text small {
  color: var(--sd-accent-ink);
}

.sd-wizard-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--sd-gap-stack);
}

/* The class display above overrode the [hidden] attribute, so every step
   fieldset rendered stacked at once (the wizard's "cluttered" feel). Restore
   one-step-at-a-time by honoring hidden. */
.sd-wizard-step-body[hidden] {
  display: none;
}

.sd-wizard-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sd-space-3);
  margin-top: var(--sd-space-3);
  padding-top: var(--sd-space-5);
  border-top: 1px solid var(--sd-line);
}

.sd-wizard-footer-spacer {
  flex: 1;
}

/* ============================================================================
   THE FILED LEDGER (sd-fl-*) — additive design primitives layered on the
   existing --sd-* tokens. Every class is namespaced sd-fl-* so it never collides with the incumbent
   sd-v4-* generation or shared primitives like .sd-eyebrow/.sd-status.
   Reuses tokens only; all motion is gated under prefers-reduced-motion below.
   ============================================================================ */

/* -- The Ledger Column: fixed-width right-aligned mono numerics rail -------- */
.sd-fl-ledger {
  display: inline-grid;
  grid-template-columns: 7ch 7ch;
  gap: 16px;
  justify-items: end;
  align-items: baseline;
  font-family: var(--sd-font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--sd-text-mono);
  border-left: 1px solid var(--sd-line);
  padding-left: 16px;
  font-size: var(--sd-text-body-sm);
}
.sd-fl-ledger--small {
  grid-template-columns: 6ch 6ch;
  gap: 12px;
  padding-left: 12px;
  font-size: var(--sd-text-label);
}
.sd-fl-ledger .sd-fl-frac { color: var(--sd-subtle); }
.sd-fl-ledger .sd-fl-dur { color: var(--sd-muted); }
.sd-fl-ledger-head {
  display: inline-grid;
  grid-template-columns: 7ch 7ch;
  gap: var(--sd-space-4);
  justify-items: end;
  padding-left: var(--sd-space-4);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sd-subtle);
}
.sd-run-ledger-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
.sd-run-ledger-index {
  color: var(--sd-text-mono);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
}
.sd-run-ledger-columns {
  color: var(--sd-muted);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-label);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* -- The clean run row: spine + status pill + summary + out-tag + ledger ---- */
.sd-fl-run-list {
  /* Single source of truth for the right-aligned action column width, so the
     header and every row agree without a brittle calc() coupling the two. */
  --sd-run-action-width: 7.5rem;
  display: grid;
  gap: 0;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-surface);
  box-shadow: var(--sd-bevel), var(--sd-shadow);
  overflow: hidden;
}
.sd-fl-run-list .sd-fl-ledger-head {
  justify-self: end;
  /* Align with the action column: its width plus the row's right padding. */
  margin-right: calc(var(--sd-run-action-width) + var(--sd-space-4));
  padding: var(--sd-space-2) var(--sd-space-4) var(--sd-space-2) 0;
  border-bottom: 1px solid var(--sd-line);
}
.sd-fl-run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--sd-line);
  background: var(--sd-surface);
  color: var(--sd-ink);
  text-decoration: none;
}
.sd-fl-run-row:last-child { border-bottom: 0; }
.sd-fl-run-row:hover { background: var(--sd-surface-muted); }
.sd-fl-run-row:focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: -2px;
}
.sd-fl-run-row.is-softened {
  background: color-mix(in oklch, var(--sd-surface-muted) 64%, var(--sd-paper-strong));
  color: var(--sd-muted);
}
.sd-fl-run-status { flex: none; }
.sd-fl-run-summ {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.sd-fl-run-summ strong {
  color: var(--sd-ink);
  font-weight: 600;
  font-size: var(--sd-text-heading);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.sd-fl-run-title-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.sd-run-origin-chip {
  flex: none;
  align-self: center;
  font-family: var(--sd-font-mono, monospace);
  font-size: var(--sd-text-eyebrow);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sd-muted);
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  padding: 1px 7px;
  white-space: nowrap;
}
.sd-fl-run-work {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* The status pill + left spine already carry the row's tone; the secondary
   work-text stays muted so the description doesn't scream on warn/stopped
   rows. The status is what's attention-worthy, not the body copy. */
.sd-fl-run-out-tag {
  flex: none;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  color: var(--sd-muted);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-surface-muted) 70%, var(--sd-paper-strong));
  padding: 3px 9px;
}
.sd-fl-run-action {
  flex: none;
  width: var(--sd-run-action-width);
  text-align: right;
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
  color: var(--sd-muted);
  white-space: nowrap;
}

/* The action link earns its accent on row intent — except "Open decision",
   which stays accent so needs-you rows pop in a scan. */
.sd-fl-run-row:hover .sd-fl-run-action,
.sd-fl-run-row:focus-visible .sd-fl-run-action,
.sd-fl-run-action.is-decision {
  color: var(--sd-accent-ink);
}
.sd-fl-run-row .sd-fl-cost { font-variant-numeric: tabular-nums lining-nums; }

/* -- The Status Spine: tone-driven inset left rail on any run container ----- */
.sd-fl-spine { box-shadow: inset 2px 0 0 var(--sd-fl-spine, transparent); }
.sd-fl-spine[data-tone="ok"] { --sd-fl-spine: var(--sd-sage); }
.sd-fl-spine[data-tone="active"] { --sd-fl-spine: var(--sd-info); }
.sd-fl-spine[data-tone="warn"] { --sd-fl-spine: var(--sd-warning); }
.sd-fl-spine[data-tone="stopped"] { --sd-fl-spine: var(--sd-danger); }
.sd-fl-spine[data-tone="neutral"] { --sd-fl-spine: var(--sd-line-stronger); }
.sd-fl-spine[data-tone="active"] { animation: sd-fl-breathe 2.4s var(--sd-ease-standard) infinite; }

/* Per-node health dot: inherits the spine's tone variable so a run/sub-run's
   status reads at a glance down the trail. */
.sd-fl-tdot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-fl-spine, var(--sd-muted));
}

/* Standalone dot tone (timeline rows aren't inside a .sd-fl-spine). */
.sd-fl-tdot[data-tone="ok"] { background: var(--sd-sage); }
.sd-fl-tdot[data-tone="active"] { background: var(--sd-blue); }
.sd-fl-tdot[data-tone="warn"] { background: var(--sd-warning); }
.sd-fl-tdot[data-tone="stopped"] { background: var(--sd-danger); }
.sd-fl-tdot[data-tone="neutral"] { background: var(--sd-accent); }

/* Diagnostics trail bar controls: List/Timeline segment + Show-internals. */
.sd-diagnostics-trail-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.sd-diagnostics-tool-trace {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  min-width: 0;
  border-bottom: 1px solid var(--sd-line-strong);
  background: color-mix(in oklch, var(--sd-surface) 72%, var(--sd-surface-muted));
}

.sd-diagnostics-tool-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  border-right: 1px solid var(--sd-line);
}

.sd-diagnostics-tool-metric {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-diagnostics-tool-metric:last-child { border-right: 0; }
.sd-diagnostics-tool-metric span,
.sd-diagnostics-tool-metric em {
  overflow: hidden;
  color: var(--sd-subtle);
  font-size: var(--sd-text-eyebrow);
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-diagnostics-tool-metric strong {
  overflow: hidden;
  color: var(--sd-ink);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-heading);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Per-tool profile strip: one row per distinct tool, with a relative-duration
   bar so the slowest tools lead at a glance. Bars reuse the gauge fill classes
   (.sd-fl-dbar > i) so the palette stays shared with the timeline gauges. */
.sd-diagnostics-tool-profile {
  display: grid;
  gap: 1px;
  min-width: 0;
  margin: 0;
  padding: 8px 12px;
  list-style: none;
}

.sd-diagnostics-tool-profile-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(60px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 7px;
  border-radius: var(--sd-radius-sm);
  background: color-mix(in oklch, var(--sd-surface) 86%, transparent);
}

.sd-diagnostics-tool-profile-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.sd-diagnostics-tool-profile-name strong {
  overflow: hidden;
  color: var(--sd-ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-diagnostics-tool-profile-name em {
  overflow: hidden;
  color: var(--sd-subtle);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-diagnostics-tool-profile-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sd-line-stronger);
}
.sd-diagnostics-tool-profile-dot[data-tone="ok"] { background: var(--sd-sage); }
.sd-diagnostics-tool-profile-dot[data-tone="active"] { background: var(--sd-accent); }
.sd-diagnostics-tool-profile-dot[data-tone="stopped"] { background: var(--sd-danger); }

.sd-diagnostics-tool-profile-bar {
  position: relative;
  display: block;
  height: 7px;
  min-width: 40px;
  border-radius: 0;
  background: color-mix(in oklch, var(--sd-line) 60%, transparent);
}
.sd-diagnostics-tool-profile-bar > i {
  display: block;
  height: 7px;
  border-radius: 0;
}
.sd-diagnostics-tool-profile-bar > i.is-fast { background: var(--sd-line-stronger); }
.sd-diagnostics-tool-profile-bar > i.is-failed { background: var(--sd-danger); }

.sd-diagnostics-tool-profile-time {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--sd-text-mono);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  white-space: nowrap;
}
.sd-diagnostics-tool-profile-time em {
  color: var(--sd-subtle);
  font-style: normal;
}

.sd-diagnostics-tool-profile-status {
  flex: none;
  padding: 2px 6px;
  border-radius: var(--sd-radius-sm);
  background: color-mix(in oklch, var(--sd-sage) 18%, transparent);
  color: var(--sd-ink);
  font-size: var(--sd-text-eyebrow);
  line-height: 1.3;
  white-space: nowrap;
}
.sd-diagnostics-tool-profile-status.is-attention {
  background: color-mix(in oklch, var(--sd-danger) 16%, transparent);
}
.sd-diagnostics-tool-profile-status.is-active {
  background: color-mix(in oklch, var(--sd-accent) 16%, transparent);
}

/* Timeline view: chronological stream grouped by model turn. */
.sd-diagnostics-timeline {
  display: grid;
  gap: 1px;
  min-width: 0;
  align-content: start;
}

.sd-fl-tlrow {
  width: 100%;
  border-radius: var(--sd-radius);
}

.sd-fl-tltime {
  flex: none;
  width: 58px;
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  color: var(--sd-text-mono);
  white-space: nowrap;
}

/* Model-turn group: a header row (turn index, parallel count, wall-time) with
   its tool-call rows indented beneath a left rule. Interstitial events render
   as flush rows between turns. */
.sd-fl-turn {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 6px 0 2px;
}
.sd-fl-turn-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 4px 10px;
  border-radius: var(--sd-radius-sm);
  background: color-mix(in oklch, var(--sd-surface-muted) 80%, transparent);
}
.sd-fl-turn-index {
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  font-weight: 600;
  color: var(--sd-ink);
  letter-spacing: 0.02em;
}
.sd-fl-turn-parallel {
  padding: 1px 6px;
  border-radius: var(--sd-radius-sm);
  background: color-mix(in oklch, var(--sd-accent) 14%, transparent);
  color: var(--sd-accent-ink);
  font-size: var(--sd-text-eyebrow);
}
.sd-fl-turn-wall {
  margin-left: auto;
  color: var(--sd-text-mono);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
}
.sd-fl-turn-rows {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding-left: 18px;
  border-left: 2px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  margin-left: 6px;
}
@keyframes sd-fl-breathe {
  0%, 100% { box-shadow: inset 2px 0 0 var(--sd-blue); }
  50% { box-shadow: inset 3px 0 0 color-mix(in oklch, var(--sd-blue) 58%, transparent); }
}

/* -- Numbered section spine: mono index rail + vertical tick rule ----------- */
.sd-fl-lsec {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 20px;
  margin-bottom: 34px;
}
.sd-fl-lsec > .sd-fl-sp { position: relative; text-align: right; padding-top: 1px; }
.sd-fl-lsec > .sd-fl-sp .sd-fl-ix {
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  font-weight: 600;
  color: var(--sd-subtle);
}
.sd-fl-lsec > .sd-fl-sp::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 24px;
  bottom: -30px;
  width: 1px;
  background: var(--sd-line);
}
.sd-fl-lsec:last-child > .sd-fl-sp::after { display: none; }
.sd-fl-lsec.is-active > .sd-fl-sp .sd-fl-ix { color: var(--sd-accent-ink); }
.sd-fl-lsec > .sd-fl-fl { min-width: 0; }
.sd-fl-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--sd-line-strong);
  padding-bottom: 9px;
  margin-bottom: 16px;
}
.sd-fl-section-head h2,
.sd-fl-section-head .sd-fl-h2 {
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.012em;
}
.sd-fl-section-head .sd-fl-sub { color: var(--sd-subtle); font-size: var(--sd-text-body-sm); }
.sd-fl-section-head .sd-fl-grow { flex: 1; }

/* -- Origin-tick eyebrow (standalone; does NOT touch .sd-eyebrow) ----------- */
.sd-fl-eyebrow {
  font-size: var(--sd-text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.085em;
  color: var(--sd-subtle);
  font-weight: 600;
  position: relative;
  padding-left: 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sd-fl-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 9px;
  background: var(--sd-accent);
  opacity: 0.7;
}

/* -- Live cost tick (run-detail cost_updated) ------------------------------ */
.sd-fl-metric {
  font-family: var(--sd-font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--sd-text-mono);
}
.sd-fl-metric .sd-fl-frac { color: var(--sd-subtle); }
.sd-fl-metric.is-tick { animation: sd-fl-tickflash var(--sd-duration-base) var(--sd-ease-standard); }
@keyframes sd-fl-tickflash {
  from { color: var(--sd-accent-ink); }
  to { color: var(--sd-text-mono); }
}

/* -- Press-sheet: the warm artifact pane as a pinned plate ------------------ */
.sd-fl-paper {
  background: var(--sd-artifact-paper);
  color: var(--sd-artifact-ink);
  border-left: 2px solid var(--sd-artifact-line);
}
.sd-fl-masthead-rule { height: 1px; background: var(--sd-artifact-line); margin: 0 0 4px; }
.sd-fl-doc { padding: 26px 32px; font-size: var(--sd-text-heading); line-height: var(--sd-leading-paper, 1.6); max-width: 660px; }
.sd-fl-doc h2,
.sd-fl-doc .sd-fl-doc-title {
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: -0.012em;
  margin-bottom: 6px;
}
.sd-fl-doc .sd-fl-by {
  color: var(--sd-artifact-ink-muted);
  font-size: var(--sd-text-eyebrow);
  margin: 6px 0 18px;
  font-family: var(--sd-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.sd-fl-doc h3 { font-size: var(--sd-text-heading); font-weight: 700; margin: 20px 0 7px; }
.sd-fl-doc p { margin-bottom: 11px; }
.sd-fl-doc .sd-fl-delta {
  background: var(--sd-artifact-paper-card);
  border: 1px solid var(--sd-artifact-line);
  box-shadow: inset 3px 0 0 var(--sd-warning);
  border-radius: var(--sd-radius);
  padding: 11px 13px;
  margin-bottom: 9px;
}

/* -- Directory list (Setup areas + the CapabilityPicker share this row) ----- */
.sd-fl-directory {
  overflow: hidden;
  background: var(--sd-surface);
}
.sd-fl-drow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--sd-line);
  color: inherit;
  text-decoration: none;
}
.sd-fl-drow:last-child { border-bottom: 0; }
.sd-fl-drow .sd-fl-drow-ico {
  width: 32px;
  height: 32px;
  background: var(--sd-surface-muted);
  display: grid;
  place-items: center;
  color: var(--sd-ink);
  flex: none;
}
.sd-fl-drow .sd-fl-drow-body { flex: 1; min-width: 0; }
.sd-fl-drow .sd-fl-drow-body b { font-weight: 600; font-size: var(--sd-text-body); }
.sd-fl-drow .sd-fl-drow-body .sd-fl-d {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.35;
  margin-top: 1px;
}
.sd-fl-drow:hover {
  background: color-mix(in oklch, var(--sd-surface-muted) 58%, transparent);
  text-decoration: none;
}
.sd-fl-drow .sd-fl-endpoint { font-family: var(--sd-font-mono); font-size: var(--sd-text-eyebrow); color: var(--sd-subtle); }
.sd-fl-permpill {
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  color: var(--sd-subtle);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-sm);
  padding: 1px 6px;
}
.sd-fl-builtin {
  font-size: var(--sd-text-eyebrow);
  color: var(--sd-subtle);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-sm);
  padding: 1px 6px;
}
.sd-fl-drow.sd-fl-add { cursor: pointer; color: var(--sd-muted); }
.sd-fl-drow.sd-fl-add:hover { background: var(--sd-surface-muted); color: var(--sd-ink); }
.sd-fl-drow.sd-fl-add .sd-fl-drow-ico { border-style: dashed; }
.sd-fl-attach {
  width: 20px;
  height: 20px;
  border-radius: var(--sd-radius-sm);
  border: 1.5px solid var(--sd-line-stronger);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: transparent;
  flex: none;
}
.sd-fl-attach.is-on { background: var(--sd-accent); border-color: var(--sd-accent); color: var(--sd-on-accent); }

/* -- CapabilityPicker target strip (run vs agent) -------------------------- */
.sd-fl-target-strip {
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--sd-text-body-sm);
  background: var(--sd-surface-muted);
  box-shadow: inset 2px 0 0 var(--sd-accent);
}
.sd-fl-target-strip b { font-weight: 600; }
/* Section anchors for the capability picker's deep-focus (OverlayFocus hook
   scrolls these into view). The wrapper is its own grid so the eyebrow→list gap
   matches the .sd-overlay-body grid it used to inherit (14px); scroll-margin
   keeps the heading off the sheet's top edge when scrolled to. */
.sd-fl-capability-section {
  display: grid;
  gap: 14px;
  align-content: start;
  scroll-margin-top: 14px;
}
.sd-fl-sheet-sec { padding: 14px 4px 4px; }
.sd-fl-sheet-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  font-size: var(--sd-text-body-sm);
  color: var(--sd-muted);
}

/* -- KPI lead (one dominant figure + smaller secondaries) ------------------ */
.sd-fl-kpi-lead {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  overflow: hidden;
}
.sd-fl-kpi-cell { padding: 16px 18px; border-right: 1px solid var(--sd-line); }
.sd-fl-kpi-cell:last-child { border-right: 0; }
.sd-fl-kpi-cell.is-dominant { background: var(--sd-surface-muted); }
.sd-fl-kpi-cell .sd-fl-k { font-size: var(--sd-text-label); color: var(--sd-muted); margin-bottom: 8px; }
.sd-fl-kpi-cell .sd-fl-v {
  font-family: var(--sd-font-display);
  font-weight: 700;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
}
.sd-fl-kpi-cell.is-dominant .sd-fl-v { font-size: 2.1rem; }
.sd-fl-kpi-cell .sd-fl-v .sd-fl-frac { font-size: 0.55em; color: var(--sd-subtle); font-weight: 500; }
.sd-fl-kpi-cell .sd-fl-of { font-family: var(--sd-font-mono); font-size: var(--sd-text-label); color: var(--sd-subtle); margin-top: 4px; }

/* -- Library area tabs (shared pill-tab nav) ------------------------------- */
.sd-fl-areatabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-fl-areatab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
}
.sd-fl-areatab:hover { color: var(--sd-ink); background: var(--sd-surface-muted); }
.sd-fl-areatab.is-active {
  color: var(--sd-accent-ink);
  background: var(--sd-accent-soft);
  border-color: color-mix(in oklch, var(--sd-accent) 30%, var(--sd-line));
}
.sd-fl-areatab .sd-fl-metric { font-family: var(--sd-font-mono); font-size: var(--sd-text-eyebrow); color: var(--sd-subtle); }
.sd-fl-areatab.is-active .sd-fl-metric { color: var(--sd-accent-ink); }

/* -- Builder: 3-column ledger spread --------------------------------------- */
.sd-fl-builder-grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 360px);
  gap: 18px;
  align-items: start;
}
.sd-fl-chapter-rail { position: sticky; top: calc(var(--sd-appbar-h) + 16px); }
.sd-fl-chapter {
  display: flex;
  gap: 11px;
  padding: 9px 0 9px 11px;
  font-size: var(--sd-text-body-sm);
  color: var(--sd-subtle);
  cursor: pointer;
  border-left: 1px solid var(--sd-line);
}
.sd-fl-chapter .sd-fl-cx { font-family: var(--sd-font-mono); font-size: var(--sd-text-eyebrow); font-weight: 600; flex: none; }
.sd-fl-chapter.is-done { color: var(--sd-ink); }
.sd-fl-chapter.is-done .sd-fl-cx { color: var(--sd-sage); }
.sd-fl-chapter.is-cur { color: var(--sd-ink); border-left: 2px solid var(--sd-accent); margin-left: -1px; }
.sd-fl-chapter.is-cur .sd-fl-cx { color: var(--sd-accent-ink); }
.sd-fl-spec-card {
  position: sticky;
  top: 72px;
  background: var(--sd-surface);
  overflow: hidden;
}
.sd-fl-spec-card[data-tone] { box-shadow: inset 2px 0 0 var(--sd-fl-spine, transparent); }
.sd-fl-spec-card[data-tone="warn"] { --sd-fl-spine: var(--sd-warning); }
.sd-fl-spec-head {
  padding: 13px 15px;
  border-bottom: 1px solid var(--sd-line-strong);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.sd-fl-spec-head .sd-fl-ttl { font-family: var(--sd-font-display); font-weight: 600; font-size: var(--sd-text-heading); }
.sd-fl-spec-head .sd-fl-ref { font-family: var(--sd-font-mono); font-size: var(--sd-text-eyebrow); color: var(--sd-subtle); }

/* -- Builder: Managed-agent-style quickstart console ------------------------ */
.sd-agent-quickstart-page .sd-page-work-area {
  grid-template-columns: minmax(0, 1fr);
}

.sd-agent-quickstart-page .sd-page-primary {
  max-width: min(1320px, 100%);
}

.sd-builder-console {
  display: grid;
  grid-template-columns: minmax(430px, 0.5fr) minmax(0, 1fr);
  min-height: min(920px, calc(100vh - 210px));
  background: var(--sd-surface);
  overflow: hidden;
}

.sd-builder-console.is-chat-only {
  grid-template-columns: minmax(0, 780px);
  justify-content: center;
  min-height: auto;
  background:
    radial-gradient(
      circle at 50% 0,
      color-mix(in oklch, var(--sd-accent-soft) 20%, transparent),
      transparent 42%
    ),
    var(--sd-surface);
}

.sd-builder-console.is-publish-focus {
  grid-template-columns: minmax(0, 1fr);
  min-height: auto;
}

.sd-builder-console-rail {
  display: grid;
  align-content: start;
  min-width: 0;
  border-right: 1px solid var(--sd-line);
  background: color-mix(in oklch, var(--sd-surface-muted) 36%, var(--sd-page-bg, #0b0c0e));
}

.sd-builder-console.is-chat-only .sd-builder-console-rail {
  border-right: 0;
  background: transparent;
}

.sd-builder-console-main,
.sd-builder-form,
.sd-builder-editor {
  min-width: 0;
}

.sd-builder-form {
  display: grid;
  min-height: 100%;
  background: var(--sd-surface);
}

.sd-builder-editor {
  padding: 22px;
}

.sd-agent-quickstart-page .sd-wizard-step-body {
  gap: 18px;
}

.sd-agent-quickstart-page .sd-agent-index-intro {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sd-agent-quickstart-page .sd-agent-index-intro > div:first-child {
  gap: 7px;
}

.sd-agent-quickstart-page .sd-agent-index-intro h2 {
  max-width: 24ch;
  font-size: 1.24rem;
  font-weight: 700;
  font-variation-settings: normal;
  line-height: 1.18;
}

.sd-agent-quickstart-page .sd-agent-index-intro p:not(.sd-eyebrow) {
  max-width: 64ch;
  font-size: var(--sd-text-body);
}

.sd-builder-step-start {
  padding-bottom: 4px;
}

.sd-builder-secondary-drawer {
  display: grid;
  min-width: 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-builder-secondary-drawer > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 0;
  color: var(--sd-ink);
  cursor: pointer;
  list-style: none;
}

.sd-builder-secondary-drawer > summary::-webkit-details-marker {
  display: none;
}

.sd-builder-secondary-drawer > summary span {
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.25;
}

.sd-builder-secondary-drawer > summary small {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

.sd-builder-secondary-drawer[open] > summary {
  color: var(--sd-accent-ink);
}

.sd-builder-manual-fields {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 4px 0 12px;
}

.sd-builder-assist {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 22px;
  border-bottom: 1px solid var(--sd-line);
}

.sd-builder-assist.is-primary {
  gap: 18px;
  border-bottom: 0;
  padding: clamp(22px, 4vw, 36px);
}

.sd-builder-assist-copy {
  display: block;
  min-width: 0;
}

.sd-builder-assist-icon {
  display: none;
}

.sd-builder-assist-copy strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  font-weight: 700;
  line-height: 1.18;
}

.sd-builder-assist-copy p {
  margin: 6px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body);
  line-height: 1.45;
}

.sd-builder-assist-route {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.sd-builder-assist-route span {
  color: var(--sd-subtle);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
}

.sd-builder-assist-route span + span::before {
  content: "/";
  padding-right: 6px;
  color: var(--sd-line-strong);
}

.sd-builder-intent {
  background: var(--sd-surface-muted);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius);
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
}

.sd-builder-intent h2 {
  color: var(--sd-ink);
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

.sd-builder-intent p:last-child {
  color: var(--sd-muted);
  line-height: 1.4;
  margin-bottom: 0;
}

.sd-builder-assist-form {
  display: grid;
  gap: 13px;
  min-width: 0;
}

.sd-builder-chat-thread {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-builder-chat-msg {
  min-width: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.45;
}

.sd-builder-chat-msg.is-bot {
  padding: 12px 13px;
  background: color-mix(in oklch, var(--sd-surface) 64%, var(--sd-paper));
}

.sd-builder-chat-msg.is-plan {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--sd-accent) 13%, var(--sd-surface)) 0%,
      color-mix(in oklch, var(--sd-surface) 70%, var(--sd-paper)) 100%
    );
  border-color: color-mix(in oklch, var(--sd-accent) 34%, var(--sd-line));
}

.sd-builder-chat-msg strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-weight: 700;
  line-height: 1.2;
}

.sd-builder-chat-msg p {
  margin: 6px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.45;
}

.sd-builder-chat-composer {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sd-builder-chat-composer > span,
.sd-builder-chat-refine summary,
.sd-builder-chat-plan-grid section > span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.sd-builder-chat-composer textarea {
  min-height: 78px;
  font-size: var(--sd-text-heading);
  line-height: 1.42;
}

.sd-builder-chat-plan-grid {
  display: grid;
  gap: 11px;
  margin-top: 12px;
}

.sd-builder-chat-plan-grid section {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sd-builder-chat-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
}

.sd-builder-chat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.sd-builder-chat-pills.is-answers {
  gap: 8px;
  margin: 0 0 12px;
}

.sd-builder-chat-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  background: color-mix(in oklch, var(--sd-surface-raised) 72%, transparent);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
}

.sd-builder-chat-pill.is-selected {
  background: color-mix(in oklch, var(--sd-accent) 17%, var(--sd-surface));
  border-color: color-mix(in oklch, var(--sd-accent) 42%, var(--sd-line));
  color: var(--sd-ink);
}

.sd-builder-chat-pill.is-warn {
  background: color-mix(in oklch, var(--sd-warning) 14%, var(--sd-surface));
  border-color: color-mix(in oklch, var(--sd-warning) 44%, var(--sd-line));
  color: color-mix(in oklch, var(--sd-warning) 74%, white);
}

.sd-builder-chat-pill strong {
  margin-right: 5px;
  color: var(--sd-muted);
  font-size: var(--sd-text-eyebrow);
}

.sd-builder-chat-pills.is-answers .sd-builder-chat-pill {
  max-width: 100%;
  border-radius: var(--sd-radius);
  white-space: normal;
}

.sd-builder-intake-questions {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.sd-builder-intake-question {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sd-builder-intake-question p {
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-weight: 700;
  line-height: 1.35;
}

.sd-builder-intake-question > span {
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
}

.sd-builder-intake-answer-form {
  display: grid;
  gap: 8px;
}

.sd-builder-chat-assumption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--sd-line);
}

.sd-builder-recommendation {
  display: grid;
  gap: 13px;
  min-width: 0;
}

.sd-builder-recommendation-head {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sd-builder-recommendation-head > span,
.sd-builder-recommendation-row > span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.sd-builder-recommendation-head strong {
  max-width: 58ch;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-weight: 700;
  line-height: 1.22;
}

.sd-builder-recommendation-head p {
  max-width: 66ch;
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.45;
}

.sd-builder-recommendation-decisions {
  display: grid;
  gap: 0;
  min-width: 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 76%, transparent);
}

.sd-builder-recommendation-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.32fr) minmax(0, 0.68fr);
  gap: 8px 14px;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
}

.sd-builder-recommendation-row strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.25;
}

.sd-builder-recommendation-row p {
  grid-column: 2;
  margin: -3px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.38;
}

.sd-builder-recommendation-alternatives {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.sd-builder-recommendation-alt {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 6px 10px;
  background: color-mix(in oklch, var(--sd-surface-raised) 72%, transparent);
  border: 1px solid color-mix(in oklch, var(--sd-line) 82%, transparent);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-ink);
  cursor: pointer;
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
}

.sd-builder-recommendation-alt:hover {
  background: var(--sd-surface-muted);
  border-color: var(--sd-line-stronger);
  color: var(--sd-ink);
}

.sd-builder-recommendation-alt.is-selected {
  background: color-mix(in oklch, var(--sd-accent-soft) 20%, var(--sd-surface));
  border-color: color-mix(in oklch, var(--sd-accent) 44%, var(--sd-line));
  color: var(--sd-accent-ink);
}

.sd-builder-chat-refine {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0;
}

.sd-builder-chat-refine summary {
  cursor: pointer;
  list-style: none;
}

.sd-builder-chat-refine summary::-webkit-details-marker {
  display: none;
}

.sd-builder-chat-refine[open] {
  gap: 11px;
}

.sd-builder-chat-refine[open] summary {
  margin-bottom: 10px;
  color: var(--sd-ink);
}

.sd-builder-assist-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sd-builder-assist-field span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.25;
}

.sd-builder-assist-form input,
.sd-builder-assist-form textarea {
  min-width: 0;
  width: 100%;
  background: color-mix(in oklch, var(--sd-surface) 72%, var(--sd-paper));
  padding: 11px 12px;
  color: var(--sd-ink);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-body);
  outline: none;
}

.sd-builder-assist-form textarea {
  min-height: 72px;
  resize: vertical;
}

.sd-builder-assist-form input:focus,
.sd-builder-assist-form textarea:focus {
  border-color: color-mix(in oklch, var(--sd-accent) 72%, var(--sd-line));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--sd-accent) 18%, transparent);
}

.sd-builder-chat-actions,
.sd-builder-assist-submit {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.sd-builder-chat-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sd-builder-chat-actions .sd-builder-assist-readiness {
  grid-column: 1 / -1;
}

.sd-builder-chat-actions .sd-button,
.sd-builder-assist-submit .sd-button {
  width: 100%;
  justify-content: center;
}

.sd-builder-assist-readiness {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
}

.sd-builder-assist-readiness.is-ready {
  color: var(--sd-success);
}

.sd-builder-chat-commands {
  display: grid;
  gap: 0;
  min-width: 0;
  border-top: 1px solid var(--sd-line);
}

.sd-builder-chat-command {
  display: grid;
  min-width: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-builder-chat-command:last-child {
  border-bottom: 0;
}

.sd-builder-chat-command > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 13px 0;
  color: var(--sd-ink);
  cursor: pointer;
  list-style: none;
}

.sd-builder-chat-command > summary::-webkit-details-marker {
  display: none;
}

.sd-builder-chat-command:not([open]) > :not(summary) {
  display: none;
}

.sd-builder-chat-command > summary span {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.25;
}

.sd-builder-chat-command > summary small {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

.sd-builder-chat-command[open] {
  padding-bottom: 16px;
}

.sd-builder-chat-command[open] > summary {
  color: var(--sd-accent-ink);
}

.sd-builder-inbox-list {
  display: grid;
  gap: 0;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 24%, transparent);
  overflow: hidden;
}

.sd-builder-inbox-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
}

.sd-builder-inbox-row:first-child {
  border-top: 0;
}

.sd-builder-inbox-row strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.24;
}

.sd-builder-inbox-row p {
  margin: 3px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sd-builder-inbox-status {
  display: inline-flex;
  margin-top: 6px;
  color: var(--sd-accent-ink);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  line-height: 1.2;
}

.sd-builder-inbox-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.sd-builder-command-form {
  display: grid;
  gap: 13px;
  min-width: 0;
}

.sd-builder-command-capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.sd-builder-command-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
  padding-top: 4px;
}

.sd-builder-command-tools > div {
  min-width: 0;
}

.sd-builder-command-tools strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  line-height: 1.25;
}

.sd-builder-command-tools p {
  margin: 3px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sd-builder-chat-command .sd-builder-definition {
  border-right: 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  padding: 13px 0 0;
}

.sd-builder-assist-state {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.sd-builder-assist .sd-fl-msg {
  max-width: 100%;
}

.sd-builder-factory-progress {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--sd-accent) 10%, var(--sd-surface)) 0%,
      color-mix(in oklch, var(--sd-surface) 76%, var(--sd-paper)) 100%
    );
  border: 1px solid color-mix(in oklch, var(--sd-accent) 34%, var(--sd-line));
  border-radius: var(--sd-radius);
}

.sd-builder-factory-progress.needs-approval {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--sd-warning) 10%, var(--sd-surface)) 0%,
      color-mix(in oklch, var(--sd-surface) 75%, var(--sd-paper)) 100%
    );
  border-color: color-mix(in oklch, var(--sd-warning) 42%, var(--sd-line));
}

.sd-builder-factory-progress.is-compact {
  gap: 9px;
  padding: 11px 12px;
}

.sd-builder-factory-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.sd-builder-factory-head strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-weight: 700;
  line-height: 1.22;
}

.sd-builder-factory-head p {
  max-width: 70ch;
  margin: 4px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.42;
}

.sd-builder-factory-alert {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: color-mix(in oklch, var(--sd-warning) 20%, var(--sd-surface));
  border: 1px solid color-mix(in oklch, var(--sd-warning) 52%, var(--sd-line));
  border-radius: var(--sd-radius-pill);
  color: color-mix(in oklch, var(--sd-warning) 78%, white);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  line-height: 1;
}

.sd-builder-factory-steps {
  display: grid;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
}

.sd-builder-factory-step {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 58%, transparent);
}

.sd-builder-factory-step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.sd-builder-factory-step > span {
  display: block;
  width: 8px;
  height: 8px;
  margin: 5px auto 0;
  background: color-mix(in oklch, var(--sd-muted) 50%, transparent);
  border-radius: var(--sd-radius-pill);
}

.sd-builder-factory-step.is-done > span {
  background: var(--sd-success);
}

.sd-builder-factory-step.is-running > span {
  background: var(--sd-accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--sd-accent) 16%, transparent);
}

.sd-builder-factory-step.is-blocked > span {
  background: var(--sd-warning);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--sd-warning) 16%, transparent);
}

.sd-builder-factory-step strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.25;
}

.sd-builder-factory-step p {
  margin: 3px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.35;
}

.sd-builder-factory-approval {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  background: color-mix(in oklch, var(--sd-warning) 9%, var(--sd-surface));
  border: 1px solid color-mix(in oklch, var(--sd-warning) 36%, var(--sd-line));
  border-radius: var(--sd-radius);
}

.sd-builder-factory-approval strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.25;
}

.sd-builder-factory-approval p {
  margin: 4px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sd-builder-factory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.sd-builder-narration {
  position: sticky;
  top: 72px;
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 20px 22px 24px;
}

.sd-builder-narration-kicker,
.sd-builder-card-label {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.sd-builder-narration h3 {
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  font-weight: 700;
  line-height: 1.24;
}

.sd-builder-narration p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.48;
}

.sd-builder-narration-next {
  display: grid;
  gap: 5px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in oklch, var(--sd-accent) 62%, var(--sd-line));
}

.sd-builder-narration-next strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
}

.sd-builder-narration-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sd-builder-narration-chips button {
  appearance: none;
  border: 1px solid color-mix(in oklch, var(--sd-line) 82%, transparent);
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-surface) 80%, transparent);
  color: var(--sd-ink);
  cursor: pointer;
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  padding: 6px 9px;
}

.sd-builder-narration-chips button:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
  color: var(--sd-ink);
}

.sd-builder-narration-facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--sd-line);
}

.sd-builder-narration-facts div {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
}

.sd-builder-narration-facts dt {
  color: var(--sd-subtle);
  font-size: var(--sd-text-eyebrow);
  letter-spacing: 0;
  text-transform: none;
}

.sd-builder-narration-facts dd {
  margin: 0;
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  line-height: 1.3;
}

.sd-builder-template-gallery,
.sd-builder-pattern-card,
.sd-builder-interview-card,
.sd-builder-test-pane {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sd-builder-template-gallery[open] {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sd-line);
}

.sd-builder-template-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.sd-builder-template-head strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-title);
  line-height: 1.25;
}

.sd-builder-template-head p {
  max-width: 58ch;
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.42;
}

.sd-builder-secondary-drawer .sd-builder-template-head {
  padding: 2px 0 12px;
}

.sd-builder-template-grid,
.sd-builder-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.sd-builder-template-card,
.sd-builder-capability-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--sd-line) 82%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 28%, var(--sd-surface));
  color: inherit;
  text-align: left;
}

.sd-builder-template-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  min-height: 104px;
  padding: 14px;
  cursor: pointer;
}

.sd-builder-template-card:hover,
.sd-builder-capability-card:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
}

.sd-builder-template-initial {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 72%, var(--sd-surface));
  color: var(--sd-accent-ink);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1;
}

.sd-builder-template-card strong,
.sd-builder-capability-card strong,
.sd-builder-pattern-card strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

.sd-builder-template-card small,
.sd-builder-capability-card small,
.sd-builder-pattern-card p {
  display: block;
  margin: 4px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.42;
}

.sd-builder-template-card em,
.sd-builder-capability-card em {
  display: block;
  margin-top: 8px;
  color: var(--sd-accent-ink);
  font-size: var(--sd-text-eyebrow);
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}

.sd-builder-interview {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.sd-builder-recommendation.is-step-mirror {
  padding: 0 0 18px;
  border-bottom: 1px solid var(--sd-line);
}

.sd-builder-pattern-card,
.sd-builder-interview-card {
  padding: 0 0 18px;
  border-bottom: 1px solid var(--sd-line);
}

.sd-builder-interview-card[data-testid="playbook-trust-proof-interview"] .sd-grid.two {
  grid-template-columns: minmax(0, 1fr);
}

.sd-builder-interview-card[data-testid="playbook-trust-proof-interview"] .sd-check span {
  max-width: 68ch;
}

.sd-builder-pattern-card,
.sd-builder-interview-card[data-testid="playbook-work-pattern"],
.sd-builder-interview-card.is-edit-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.sd-builder-pattern-card > span,
.sd-builder-interview-card > span {
  max-width: 220px;
  padding: 6px 8px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 86%, transparent);
  border-radius: var(--sd-radius-pill);
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.sd-builder-interview-head,
.sd-builder-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.sd-builder-interview-head p,
.sd-builder-picker-row p,
.sd-builder-test-pane p {
  margin: 3px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.42;
}

.sd-builder-capability-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding: 12px;
  cursor: pointer;
}

.sd-builder-capability-card input {
  margin-top: 2px;
}

.sd-builder-capability-card.is-selected {
  border-color: color-mix(in oklch, var(--sd-accent) 58%, var(--sd-line));
  background: color-mix(in oklch, var(--sd-accent-soft) 18%, var(--sd-surface));
}

.sd-builder-picker-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sd-builder-picker-row > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px 0 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
}

.sd-builder-picker-row strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  line-height: 1.25;
}

.sd-builder-test-loop {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-width: 0;
  overflow: hidden;
}

.sd-builder-test-pane {
  align-content: start;
  padding: 15px;
  background: color-mix(in oklch, var(--sd-surface-muted) 22%, var(--sd-surface));
}

.sd-builder-test-pane + .sd-builder-test-pane {
  border-left: 1px solid var(--sd-line);
}

.sd-builder-test-pane-head {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.sd-builder-test-pane-head span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
}

.sd-builder-test-pane-head strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

.sd-builder-proof-rows {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--sd-line);
}

.sd-builder-proof-rows div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
}

.sd-builder-proof-rows strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  line-height: 1.25;
}

.sd-builder-proof-rows span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sd-builder-test-review {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--sd-line);
  border-bottom: 1px solid var(--sd-line);
  background:
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--sd-accent-soft) 18%, transparent),
      transparent 58%
    );
  margin: 18px -16px 0;
  padding: 16px;
}

.sd-builder-test-review.is-passed {
  background:
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--sd-sage) 13%, transparent),
      transparent 60%
    );
}

.sd-builder-test-review.is-failed {
  background:
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--sd-danger) 10%, transparent),
      transparent 60%
    );
}

.sd-builder-test-review-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.sd-builder-test-review-head > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sd-builder-test-review-head h4 {
  margin: 0;
  color: var(--sd-ink);
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-title);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.18;
}

.sd-builder-test-review-head p {
  margin: 0;
  max-width: 68ch;
  color: var(--sd-muted);
  line-height: 1.45;
}

.sd-builder-test-review-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 78%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-line) 76%, transparent);
  overflow: hidden;
}

.sd-builder-test-review-row {
  display: grid;
  gap: 5px;
  min-width: 0;
  background: color-mix(in oklch, var(--sd-surface) 88%, var(--sd-paper));
  padding: 12px;
}

.sd-builder-test-review-row span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.sd-builder-test-review-row strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.sd-builder-test-review-row p {
  margin: 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sd-builder-test-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sd-builder-test-review-actions span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
  margin-right: 2px;
}

.sd-builder-test-review-actions button {
  appearance: none;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: color-mix(in oklch, var(--sd-surface) 82%, var(--sd-paper-strong));
  color: var(--sd-ink);
  cursor: pointer;
  font: inherit;
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.2;
  padding: 8px 11px;
}

.sd-builder-test-review-actions button:hover {
  border-color: var(--sd-line-stronger);
  background: var(--sd-surface-muted);
}

.sd-publish-focus {
  display: grid;
  gap: 18px;
  min-width: 0;
  background: var(--sd-surface);
  padding: 22px;
}

.sd-publish-focus > .sd-callout {
  margin: 0;
}

.sd-publish-support {
  margin: 0;
}

.sd-publish-support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding-top: 14px;
}

.sd-publish-support-grid > section {
  min-width: 0;
}

.sd-publish-support-grid h3 {
  margin: 0 0 10px;
  color: var(--sd-ink);
  font-family: var(--sd-font-display);
  font-size: var(--sd-text-title);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

.sd-builder-inspector {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr) minmax(190px, 0.34fr);
  min-width: 0;
  border-top: 1px solid var(--sd-line);
  background: color-mix(in oklch, var(--sd-surface-muted) 20%, var(--sd-surface));
}

.sd-builder-blueprint,
.sd-builder-definition,
.sd-builder-checklist {
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  border-right: 1px solid var(--sd-line);
}

.sd-builder-checklist {
  border-right: 0;
}

.sd-builder-blueprint[data-tone="warn"] {
  box-shadow: inset 2px 0 0 var(--sd-warning);
}

.sd-builder-blueprint-head {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.sd-builder-blueprint-head span {
  color: var(--sd-ink);
  font-size: var(--sd-text-body);
  font-weight: 700;
  line-height: 1.22;
}

.sd-builder-blueprint-head strong {
  color: var(--sd-subtle);
  font-size: var(--sd-text-eyebrow);
  font-weight: 700;
  line-height: 1.2;
}

.sd-builder-blueprint dl,
.sd-builder-definition-summary {
  display: grid;
  gap: 0;
  margin: 0;
}

.sd-builder-blueprint dl div,
.sd-builder-definition-summary div {
  display: grid;
  grid-template-columns: minmax(88px, 0.34fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 7px 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
}

.sd-builder-blueprint dt,
.sd-builder-blueprint dd,
.sd-builder-definition-summary dt,
.sd-builder-definition-summary dd {
  margin: 0;
  min-width: 0;
  font-size: var(--sd-text-label);
  line-height: 1.35;
}

.sd-builder-blueprint dt,
.sd-builder-definition-summary dt {
  color: var(--sd-muted);
  font-weight: 700;
}

.sd-builder-blueprint dd,
.sd-builder-definition-summary dd {
  color: var(--sd-ink);
}

.sd-builder-definition > summary,
.sd-builder-checklist > summary,
.sd-builder-definition-technical > summary {
  cursor: pointer;
  color: var(--sd-ink);
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  list-style: none;
}

.sd-builder-definition > summary::-webkit-details-marker,
.sd-builder-checklist > summary::-webkit-details-marker,
.sd-builder-definition-technical > summary::-webkit-details-marker {
  display: none;
}

.sd-builder-definition[open] > summary,
.sd-builder-checklist[open] > summary {
  margin-bottom: 10px;
}

.sd-builder-definition-technical {
  margin-top: 10px;
}

.sd-builder-definition pre {
  max-height: 260px;
  margin: 10px 0 0;
  overflow: auto;
  padding: 10px;
  background: var(--sd-code-bg, #101216);
  color: var(--sd-code-ink, var(--sd-ink));
  font-size: var(--sd-text-label);
  line-height: 1.45;
}

.sd-builder-checklist-rows {
  display: grid;
  gap: 0;
}

.sd-builder-checklist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 68%, transparent);
}

.sd-builder-checklist-row strong {
  color: var(--sd-ink);
  font-size: var(--sd-text-label);
  line-height: 1.25;
}

.sd-builder-checklist-row p {
  margin: 3px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  line-height: 1.35;
}

.sd-builder-review-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--sd-line) 78%, transparent);
  border-radius: var(--sd-radius);
  background: color-mix(in oklch, var(--sd-surface-muted) 38%, var(--sd-surface));
}

.sd-builder-review-banner strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.24;
}

.sd-builder-review-banner p {
  margin: 3px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.4;
}

.sd-builder-review-peek {
  grid-column: 1 / -1;
  min-width: 0;
}

.sd-builder-review-peek > summary {
  display: inline-flex;
  color: var(--sd-accent-ink);
  cursor: pointer;
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  line-height: 1.2;
  list-style: none;
}

.sd-builder-review-peek > summary::-webkit-details-marker {
  display: none;
}

.sd-builder-review-peek-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 0;
  border-top: 1px solid color-mix(in oklch, var(--sd-line) 70%, transparent);
  color: inherit;
  text-decoration: none;
}

.sd-builder-review-peek-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-builder-review-peek-row span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
  line-height: 1.2;
}

.sd-builder-review-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex: none;
}

.sd-builder-review-drawer {
  min-width: 0;
}

.sd-builder-review-drawer > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sd-accent-ink);
  cursor: pointer;
  font-size: var(--sd-text-body-sm);
  font-weight: 700;
  list-style: none;
  padding: 13px 0;
}

.sd-builder-review-drawer > summary span {
  color: var(--sd-muted);
  font-size: var(--sd-text-label);
  font-weight: 700;
}

.sd-builder-review-drawer > summary::-webkit-details-marker {
  display: none;
}

.sd-builder-review-drawer > summary::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--sd-duration-fast) var(--sd-ease-standard);
}

.sd-builder-review-drawer[open] > summary::before {
  transform: rotate(45deg);
}

.sd-builder-review-list {
  display: grid;
  gap: 8px;
  max-height: min(42vh, 360px);
  overflow: auto;
  padding: 10px 0 14px;
}

.sd-builder-review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--sd-surface);
}

.sd-builder-review-row strong {
  display: block;
  color: var(--sd-ink);
  font-size: var(--sd-text-heading);
  line-height: 1.25;
}

.sd-builder-review-row p {
  margin: 3px 0 0;
  color: var(--sd-muted);
  font-size: var(--sd-text-body-sm);
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 980px) {
  .sd-builder-console,
  .sd-builder-inspector {
    grid-template-columns: 1fr;
    max-width: 100%;
    min-width: 0;
  }

  .sd-builder-console-rail {
    border-right: 0;
    border-bottom: 1px solid var(--sd-line);
  }

  .sd-builder-narration {
    position: static;
  }

  .sd-builder-blueprint,
  .sd-builder-definition,
  .sd-builder-checklist {
    border-right: 0;
    border-bottom: 1px solid var(--sd-line);
  }
}

@media (max-width: 760px) {
  .sd-agent-quickstart-page,
  .sd-agent-quickstart-page .sd-page-primary,
  .sd-agent-quickstart-page .sd-page-body,
  .sd-agent-quickstart-page .sd-page-tabs,
  .sd-agent-quickstart-page .sd-builder-console,
  .sd-agent-quickstart-page .sd-builder-console-main,
  .sd-agent-quickstart-page .sd-builder-form,
  .sd-agent-quickstart-page .sd-builder-editor,
  .sd-agent-quickstart-page .sd-callout,
  .sd-agent-quickstart-page .sd-status-line {
    max-width: 100%;
    min-width: 0;
  }

  .sd-agent-quickstart-page .sd-page-tabs {
    overflow-x: clip;
  }

  .sd-wizard-steps {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sd-wizard-step {
    width: 100%;
    padding: 12px;
  }

  .sd-wizard-step-body > .sd-agent-index-intro {
    order: 0;
  }

  [data-testid="playbook-review-settle"] > .sd-proposal-decision-strip {
    gap: 8px;
    inset: auto;
    max-height: none;
    overflow: visible;
    padding: 10px;
    position: static;
    z-index: auto;
  }

  [data-testid="playbook-review-settle"] .sd-proposal-decision-strip-main p:not(.sd-eyebrow) {
    display: none;
  }

  [data-testid="playbook-review-settle"] .sd-proposal-decision-strip-actions {
    gap: 8px;
    order: 2;
  }

  [data-testid="playbook-review-settle"] .sd-proposal-decision-strip-actions .sd-actions,
  [data-testid="playbook-review-settle"] .sd-proposal-approve-form,
  [data-testid="playbook-review-settle"] .sd-proposal-approve-form .sd-button,
  [data-testid="playbook-review-settle"] .sd-proposal-decision-strip-actions > .sd-actions .sd-button,
  [data-testid="playbook-review-settle"] .sd-proposal-decision-strip-actions > .sd-actions button {
    width: 100%;
  }

  [data-testid="playbook-review-settle"] .sd-proposal-decision-facts {
    gap: 6px;
    order: 3;
  }

  [data-testid="playbook-review-settle"] .sd-proposal-decision-fact {
    padding: 7px 8px;
  }

  [data-testid="playbook-review-settle"] .sd-proposal-waiver-check {
    padding: 7px 8px;
  }

  [data-testid="playbook-review-settle"] .sd-proposal-waiver-check span {
    font-size: 0;
    gap: 0;
  }

  [data-testid="playbook-review-settle"] .sd-proposal-waiver-check strong {
    font-size: var(--sd-text-body);
  }

  .sd-builder-editor,
  .sd-builder-assist,
  .sd-builder-narration {
    padding: 14px;
  }

  .sd-builder-template-head,
  .sd-builder-template-grid,
  .sd-builder-capability-grid,
  .sd-builder-pattern-card,
  .sd-builder-interview-card[data-testid="playbook-work-pattern"],
  .sd-builder-recommendation-row,
  .sd-builder-interview-head,
	  .sd-builder-picker-row,
	  .sd-builder-test-loop,
	  .sd-builder-test-review-grid,
	  .sd-publish-support-grid,
	  .sd-builder-review-row {
	    grid-template-columns: 1fr;
	  }

  .sd-builder-recommendation-row p {
    grid-column: 1;
    margin-top: -2px;
  }

  .sd-builder-test-pane + .sd-builder-test-pane {
    border-left: 0;
    border-top: 1px solid var(--sd-line);
  }

  .sd-builder-test-review {
    margin-inline: -10px;
    padding: 14px 10px;
  }

  .sd-builder-test-review-head {
    grid-template-columns: 1fr;
  }

  .sd-builder-test-review-head .sd-status {
    justify-self: start;
  }

  .sd-builder-template-card {
    min-height: auto;
  }

  .sd-builder-review-banner,
  .sd-builder-inbox-row,
  .sd-builder-command-tools,
  .sd-builder-command-capabilities {
    grid-template-columns: 1fr;
  }

  .sd-builder-inbox-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .sd-builder-review-banner {
    align-items: stretch;
  }

  .sd-builder-review-actions,
  .sd-builder-review-row .sd-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .sd-builder-proof-rows div,
  .sd-builder-checklist-row {
    grid-template-columns: 1fr;
  }

  .sd-builder-proof-rows span {
    white-space: normal;
  }

  .sd-auto-agent-published-handoff {
    align-items: stretch;
  }

  .sd-auto-agent-published-actions {
    justify-content: flex-start;
  }

  .sd-auto-agent-published-actions .sd-button,
  .sd-auto-agent-published-actions a,
  .sd-auto-agent-published-actions button {
    width: 100%;
  }
}

.sd-fl-chat {
  background: var(--sd-surface);
  overflow: hidden;
  margin-bottom: 18px;
}
.sd-fl-chat-head {
  padding: 12px 15px;
  border-bottom: 1px solid var(--sd-line-strong);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sd-fl-chat-av {
  width: 26px;
  height: 26px;
  border-radius: var(--sd-radius);
  background: var(--sd-accent);
  color: var(--sd-on-accent);
  display: grid;
  place-items: center;
  flex: none;
}
.sd-fl-chat-av .sd-icon { width: 15px; height: 15px; }
.sd-fl-chat-head b { font-weight: 600; font-size: var(--sd-text-body-sm); }
.sd-fl-chat-sub { font-size: var(--sd-text-label); color: var(--sd-muted); }
.sd-fl-msgs {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
}
.sd-fl-msg {
  max-width: 88%;
  font-size: var(--sd-text-body);
  line-height: 1.5;
  padding: 10px 13px;
  border-radius: var(--sd-radius-lg);
}
.sd-fl-msg.is-bot {
  background: var(--sd-surface-muted);
  border: 1px solid var(--sd-line);
  border-top-left-radius: 4px;
  align-self: flex-start;
}
.sd-fl-msg.is-me {
  background: var(--sd-accent-soft);
  border: 1px solid color-mix(in srgb, var(--sd-accent) 30%, transparent);
  border-top-right-radius: 4px;
  align-self: flex-end;
  color: var(--sd-accent-ink);
}
.sd-fl-msg.error { color: var(--sd-warning); }
.sd-fl-msg .sd-fl-msg-reason { margin-top: 5px; font-size: var(--sd-text-body-sm); color: var(--sd-muted); }
.sd-fl-msg form { margin-top: 9px; }
.sd-fl-suggest {
  display: flex;
  gap: 8px;
  padding: 0 15px 12px;
  flex-wrap: wrap;
}
.sd-fl-suggest .sd-fl-s {
  border: 1px solid var(--sd-line-strong);
  background: var(--sd-surface);
  border-radius: var(--sd-radius-pill);
  padding: 6px 12px;
  font-size: var(--sd-text-body-sm);
  color: var(--sd-muted);
  cursor: pointer;
}
.sd-fl-suggest .sd-fl-s:hover { border-color: var(--sd-accent); color: var(--sd-accent-ink); }
.sd-fl-field { padding: 11px 15px; border-bottom: 1px solid var(--sd-line); }
.sd-fl-field .sd-fl-k {
  font-size: var(--sd-text-eyebrow);
  color: var(--sd-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sd-fl-field .sd-fl-v { font-size: var(--sd-text-body); line-height: 1.45; }
.sd-fl-clipping {
  border: 1px solid var(--sd-artifact-line);
  background: var(--sd-artifact-paper-card);
  border-radius: var(--sd-radius);
  padding: 11px 13px;
  box-shadow: inset 2px 0 0 var(--sd-sage);
}
.sd-fl-clipping .sd-fl-dateline {
  font-family: var(--sd-font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sd-artifact-ink-muted);
  margin-bottom: 6px;
}
.sd-fl-clipping .sd-fl-caveat { margin-top: 8px; font-size: var(--sd-text-eyebrow); color: var(--sd-artifact-ink-muted); line-height: 1.45; }

/* -- Diagnostics: subagent-run tree + ruled-gauge event trail --------------- */
.sd-fl-diag { border: 1px solid var(--sd-line); border-radius: var(--sd-radius); overflow: hidden; }
.sd-fl-diag-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--sd-line-strong);
  background: var(--sd-surface-muted);
}
.sd-fl-diag-split {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(min(320px, 38%), 0.82fr);
  align-items: stretch;
  min-height: 390px;
  min-width: 0;
}
.sd-fl-diag-split > * {
  min-width: 0;
}
.sd-fl-tree {
  max-height: min(58vh, 620px);
  overflow: auto;
  border-right: 1px solid var(--sd-line);
  padding: 6px 0;
  font-size: var(--sd-text-body-sm);
}
.sd-fl-trow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  cursor: pointer;
  background: var(--sd-surface);
}
.sd-fl-trow:hover { background: var(--sd-surface-muted); }
.sd-fl-trow .sd-fl-chev { color: var(--sd-subtle); transition: transform var(--sd-duration-fast); flex: none; }
.sd-fl-tnode.is-open > .sd-fl-trow .sd-fl-chev { transform: rotate(90deg); }
.sd-fl-trow .sd-fl-label { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-fl-tchildren { display: none; padding-left: 16px; border-left: 1px dashed var(--sd-line); margin-left: 20px; }
.sd-fl-tnode.is-open > .sd-fl-tchildren { display: block; }
/* Tree containers: no list bullets; the run/sub-run rows are buttons. min-width:0
   lets nodes shrink to the (narrow) column so the title ellipses and the ledger
   stays in-track instead of overflowing into the detail pane. */
.sd-fl-tree,
.sd-fl-tsubnodes { list-style: none; margin: 0; padding: 0; min-width: 0; }
.sd-fl-tree > li { min-width: 0; }
.sd-fl-tnode { min-width: 0; }
button.sd-fl-trow {
  width: 100%;
  min-width: 0;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  appearance: none;
}
button.sd-fl-trow:focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: -2px;
}
/* Per-node $/time ledger, right-aligned with a hairline separator. */
.sd-fl-tledger {
  margin-left: auto;
  flex: none;
  display: flex;
  gap: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--sd-line);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
}
.sd-fl-tcost { color: var(--sd-ink); font-weight: 600; }
.sd-fl-tdur { color: var(--sd-text-mono); }
.sd-diagnostics-internals-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sd-text-label);
  color: var(--sd-muted);
  cursor: pointer;
  flex: none;
}
.sd-diagnostics-internals-toggle input { cursor: pointer; }
/* Overflow affordance: the trail caps events but links the rest to Activity. */
.sd-fl-trail-more {
  display: block;
  padding: 5px 14px 5px 6px;
  font-size: var(--sd-text-label);
  color: var(--sd-accent-ink);
  text-decoration: none;
}
.sd-fl-trail-more:hover { text-decoration: underline; }
/* Keep a keyboard focus indicator for event rows in forced-colors/high-contrast
   mode, where box-shadow (the normal focus cue) is dropped and outline:none leaves
   nothing. The node-toggle button already uses a real outline. */
@media (forced-colors: active) {
  .sd-fl-erow:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}
.sd-fl-erow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 5px 14px 5px 6px;
  cursor: pointer;
}
.sd-fl-erow:hover { background: var(--sd-surface-muted); }
.sd-fl-erow.is-sel,
.sd-fl-erow:focus-visible {
  outline: none;
  background: var(--sd-accent-soft);
  box-shadow:
    inset 2px 0 0 var(--sd-accent),
    inset 0 1px 0 color-mix(in oklch, var(--sd-accent) 40%, transparent),
    inset 0 -1px 0 color-mix(in oklch, var(--sd-accent) 40%, transparent);
}
.sd-fl-etype {
  font-size: var(--sd-text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--sd-radius-sm);
  padding: 1px 6px;
  flex: none;
  color: var(--sd-muted);
  border: 1px solid var(--sd-line);
}
.sd-fl-ename {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 0 6px;
  min-width: 0;
  color: var(--sd-ink);
}

.sd-fl-title {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-fl-ename .sd-fl-args {
  display: inline-block;
  max-width: min(100%, 42ch);
  min-width: 0;
  color: var(--sd-subtle);
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  overflow-wrap: anywhere;
  vertical-align: bottom;
  white-space: normal;
}
.sd-fl-errpill { font-size: 0.625rem; font-weight: 700; color: var(--sd-on-danger); background: var(--sd-danger); border-radius: var(--sd-radius-sm); padding: 1px 6px; }
.sd-fl-batch {
  flex: none;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid color-mix(in oklch, var(--sd-accent) 36%, var(--sd-line));
  border-radius: var(--sd-radius-sm);
  padding: 1px 6px;
  color: var(--sd-accent-ink);
  background: color-mix(in oklch, var(--sd-accent-soft) 72%, transparent);
  font-family: var(--sd-font-mono);
  font-size: 0.64rem;
  white-space: nowrap;
}
.sd-fl-dbar {
  flex: none;
  width: 96px;
  height: 9px;
  border: 0;
  border-bottom: 1px solid var(--sd-line-strong);
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(25% - 1px),
    var(--sd-line) calc(25% - 1px),
    var(--sd-line) 25%
  );
}
.sd-fl-dbar > i { display: block; height: 7px; border-radius: 0; }
.sd-fl-dbar > i.is-fast { background: var(--sd-line-stronger); }
.sd-fl-dbar > i.is-slow { background: var(--sd-warning); }
.sd-fl-dbar > i.is-failed { background: var(--sd-danger); }
.sd-fl-tltime {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-fl-edur { font-family: var(--sd-font-mono); font-size: var(--sd-text-eyebrow); color: var(--sd-text-mono); flex: none; width: 46px; text-align: right; }
.sd-fl-edetail .sd-fl-ed-head { padding: 13px 16px; border-bottom: 1px solid var(--sd-line-strong); }
.sd-fl-ed-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--sd-line); }
.sd-fl-ed-tabs .sd-fl-et {
  font-size: var(--sd-text-label);
  font-weight: 600;
  color: var(--sd-muted);
  padding: 6px 11px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.sd-fl-ed-tabs .sd-fl-et.is-on { color: var(--sd-ink); border-color: var(--sd-accent); }
/* The view tabs are <button>s (span-designed primitive); reset native chrome so
   only the .is-on bottom-border accent shows, like the file-tab buttons. */
button.sd-fl-et {
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
}
button.sd-fl-et:focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: -2px;
  border-radius: var(--sd-radius-xs);
}

@container (max-width: 900px) {
  .sd-fl-diag-split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-height: 0;
  }

  .sd-fl-tree {
    order: 1;
    max-height: min(48vh, 520px);
    border-right: 0;
    border-bottom: 1px solid var(--sd-line);
  }
}

@container (max-width: 680px) {
  .sd-fl-tlrow {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
  }

  .sd-fl-tlrow .sd-fl-ename {
    flex: 1 1 calc(100% - 120px);
  }

  .sd-fl-tlrow .sd-fl-ename .sd-fl-args {
    display: block;
    max-width: 100%;
    white-space: normal;
  }

  .sd-fl-turn-head {
    gap: 4px 8px;
  }

  .sd-fl-turn-rows {
    padding-left: 12px;
  }

  .sd-fl-tlrow .sd-fl-dbar {
    display: none;
  }
}

.sd-fl-codewell {
  background: var(--sd-surface-muted);
  padding: 12px 13px;
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-label);
  line-height: 1.6;
  color: var(--sd-text-mono);
  white-space: pre-wrap;
  overflow: auto;
}
.sd-fl-redact { color: var(--sd-subtle); font-style: italic; }

/* Diagnostics event inspector: Plain / Structured / Raw JSON view bodies. */
.sd-fl-ed-meta {
  margin-top: 3px;
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-eyebrow);
  color: var(--sd-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
}
.sd-fl-ed-id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-xs);
  padding: 1px 6px;
}
.sd-fl-ed-id .sd-icon { font-size: var(--sd-text-label); }
.sd-fl-ed-body {
  max-height: min(48vh, 520px);
  overflow: auto;
  padding: 13px 15px;
}
.sd-fl-msgblock { margin-bottom: 12px; }
.sd-fl-msgblock .sd-fl-role {
  font-size: var(--sd-text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sd-subtle);
  font-weight: 700;
  margin-bottom: 4px;
}
.sd-fl-msgblock .sd-fl-msgbody {
  font-size: var(--sd-text-body-sm);
  line-height: 1.5;
  color: var(--sd-ink-muted);
  margin: 0;
}
.sd-fl-redact-note {
  margin: 10px 0 0;
  font-size: var(--sd-text-label);
  line-height: 1.5;
  color: var(--sd-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

/* -- Run-detail Summary: two-pane (narration + press-sheet) ---------------- */
.sd-fl-twopane {
  display: grid;
  /* Document-first (ADR 0039): the right press-sheet gets the larger share so
     the rendered result is the unambiguous hero; narration is the supporting
     column. Both keep a min-width floor so neither collapses to a sliver. */
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 0;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  overflow: hidden;
  background: var(--sd-surface);
  align-items: stretch;
}
.sd-fl-twopane > .sd-fl-pane {
  min-width: 0;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sd-fl-twopane > .sd-fl-pane + .sd-fl-pane { border-left: 1px solid var(--sd-line); }
/* The right pane is the warm press-sheet; its border-left override wins. */
.sd-fl-twopane > .sd-fl-pane.sd-fl-paper { padding: 0; gap: 0; }
.sd-run-result-narration {
  grid-column: 1;
  grid-row: 1;
  /* Narration is the supporting column — a recessed surface so the warm
     press-sheet reads as the hero. See ADR 0039. */
  background: var(--sd-surface-muted);
}
.sd-run-result-paper {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 900px) {
  .sd-fl-twopane { grid-template-columns: minmax(0, 1fr); }
  .sd-run-result-narration,
  .sd-run-result-paper {
    grid-column: 1;
  }
  .sd-run-result-narration {
    grid-row: 2;
  }
  .sd-run-result-paper {
    grid-row: 1;
  }
  .sd-fl-twopane > .sd-fl-pane + .sd-fl-pane {
    border-left: 0;
    border-top: 1px solid var(--sd-line);
  }
  .sd-fl-twopane > .sd-fl-pane.sd-fl-paper { border-left-width: 0; border-top: 0; }
}

/* Left pane: Work summary block (the answer, in plain language) */
.sd-fl-worksum {
  padding: 13px 15px;
  background: var(--sd-surface-muted);
  box-shadow: inset 2px 0 0 var(--sd-sage);
}
.sd-fl-worksum p { margin-top: 7px; font-size: var(--sd-text-heading); line-height: 1.55; color: var(--sd-ink); }
.sd-fl-worksum p b { font-weight: 700; }

/* Left pane: the activity log as timestamped pills + narration */
.sd-fl-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sd-fl-log { display: flex; flex-direction: column; gap: 11px; }
.sd-fl-logitem { display: flex; gap: 11px; align-items: flex-start; }
.sd-fl-logitem > .sd-fl-ts {
  font-family: var(--sd-font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--sd-text-eyebrow);
  color: var(--sd-subtle);
  flex: none;
  width: 56px;
  padding-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-fl-logitem > .sd-fl-logitem-body { min-width: 0; flex: 1; }
.sd-fl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--sd-line-strong);
  background: var(--sd-surface);
  border-radius: var(--sd-radius-pill);
  padding: 3px 10px;
  font-size: var(--sd-text-body-sm);
  font-weight: 600;
  color: var(--sd-ink);
}
.sd-fl-pill .sd-icon { font-size: var(--sd-text-body-sm); color: var(--sd-muted); flex: none; }
.sd-fl-pill[data-tone="attention"] { border-color: var(--sd-danger); color: var(--sd-danger); }
.sd-fl-pill[data-tone="attention"] .sd-icon { color: var(--sd-danger); }
.sd-fl-pill[data-tone="warn"] { box-shadow: inset 2px 0 0 var(--sd-warning); }
.sd-fl-nar { margin-top: 4px; font-size: var(--sd-text-body-sm); line-height: 1.45; color: var(--sd-muted); }

/* Left pane: the inline approval / question inset (amber) */
.sd-fl-inset {
  padding: 13px 15px;
  background: var(--sd-surface-muted);
}
.sd-fl-inset.sd-fl-approval {
  border-color: color-mix(in oklch, var(--sd-warning) 45%, var(--sd-line));
  box-shadow: inset 3px 0 0 var(--sd-warning);
}

/* Left pane: the footer counts line */
.sd-fl-log-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--sd-line);
  font-size: var(--sd-text-body-sm);
  color: var(--sd-muted);
}
.sd-fl-log-foot a { color: var(--sd-accent-ink); text-decoration: none; }
.sd-fl-log-foot a:hover { text-decoration: underline; }

/* Right pane: artifact tabs over the warm press-sheet doc */
.sd-fl-paper-tabs {
  display: flex;
  gap: 4px;
  padding: 11px 14px 0;
  border-bottom: 1px solid var(--sd-artifact-line);
  background: var(--sd-artifact-paper);
  flex-wrap: wrap;
}
.sd-fl-pt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sd-text-label);
  font-weight: 600;
  color: var(--sd-artifact-ink-muted);
  padding: 6px 11px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sd-fl-pt .sd-icon { font-size: var(--sd-text-body-sm); flex: none; }
/* Active file-tab: the same accent affordance as the top-level section-tabs
   (blue underline), translated onto the warm artifact paper via the
   artifact-link token so it reads correctly there. Aligns the two tab strips
   that previously clashed (amber here vs blue above). See ADR 0039. */
.sd-fl-pt.is-on {
  color: var(--sd-artifact-ink);
  border-color: var(--sd-artifact-link);
}

/* Interactive file-tab: clicking switches the document the press-sheet renders.
   Button reset so it sits flush in the warm paper-tab strip. */
button.sd-fl-pt {
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
}
button.sd-fl-pt:hover { color: var(--sd-artifact-ink); }
/* The paper-tab strip is always the warm cream surface (--sd-artifact-paper is
   not re-themed), so the focus ring uses the constant dark artifact ink rather
   than --sd-accent — the accent lightens in dark mode and would fall below the
   3:1 non-text contrast minimum against cream. */
button.sd-fl-pt:focus-visible {
  outline: 2px solid var(--sd-artifact-ink);
  outline-offset: 1px;
  border-radius: var(--sd-radius-xs);
}

/* Overflow chip: links any output beyond the capped Summary strip to the full
   Results tab. Quiet, link-styled, never an active document tab. */
a.sd-fl-pt-more {
  color: var(--sd-artifact-ink-muted);
  text-decoration: none;
  font-style: italic;
}
a.sd-fl-pt-more:hover {
  color: var(--sd-artifact-ink);
  text-decoration: underline;
}
a.sd-fl-pt-more:focus-visible {
  outline: 2px solid var(--sd-artifact-ink);
  outline-offset: 1px;
  border-radius: var(--sd-radius-xs);
}

/* -- Directory rows reused for setup credentials/browser + admin audit ----- */
.sd-fl-drow .sd-admin-audit-time {
  flex: none;
  width: 78px;
  white-space: nowrap;
}
.sd-fl-drow > form { flex: none; }
.sd-fl-drow .sd-actions { flex: none; }

@media (max-width: 900px) {
  .sd-fl-lsec { grid-template-columns: 1fr; }
  .sd-fl-lsec > .sd-fl-sp { display: none; }
  .sd-diagnostics-tool-trace,
  .sd-fl-builder-grid,
  .sd-fl-diag-split,
  .sd-fl-kpi-lead { grid-template-columns: 1fr; }
  .sd-diagnostics-tool-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--sd-line);
  }
}

@media (max-width: 640px) {
  .sd-builder-chat-plan-grid {
    display: none;
  }

  .sd-builder-chat-pills {
    margin-top: 10px;
  }

  .sd-diagnostics-tool-metrics { grid-template-columns: 1fr; }
  .sd-diagnostics-tool-metric {
    border-right: 0;
    border-bottom: 1px solid color-mix(in oklch, var(--sd-line) 72%, transparent);
  }
  .sd-diagnostics-tool-metric:last-child { border-bottom: 0; }
  .sd-diagnostics-tool-profile-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 3px;
  }
  .sd-diagnostics-tool-profile-bar {
    display: none;
  }
  .sd-fl-run-list .sd-fl-ledger-head { display: none; }
  .sd-fl-run-row { flex-wrap: wrap; row-gap: 6px; }
  .sd-fl-run-summ { flex-basis: 100%; order: 2; }
  .sd-fl-run-status { order: 1; }
  .sd-fl-run-out-tag { order: 3; }
  .sd-fl-run-row .sd-fl-ledger { order: 4; margin-left: auto; }
  .sd-fl-run-action { order: 5; }
}

/* Filed-Ledger motion is information-bearing only; honor reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .sd-fl-spine[data-tone="active"],
  .sd-fl-metric.is-tick { animation: none; }
}

/* Press-sheet: a compact action row above the result document (the document
   itself — output_preview_stage — carries the headline + warm card). */
.sd-run-press-sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

/* Quiet hover grammar — every cursor-pointer control acknowledges the cursor.
   Inactive tabs/options take the worker-tab treatment (ink + soft fill);
   bordered cards firm their hairline. Selected/active visuals stay exclusive
   to their .is-* rules. */
.sd-run-lens:hover:not(.is-active),
.sd-launch-context-tab:hover:not(.is-active),
.sd-factory-tab:hover:not(.is-active),
.sd-v4-diff-tab:hover:not(.is-active) {
  background: color-mix(in oklch, var(--sd-surface-muted) 52%, transparent);
  color: var(--sd-ink);
}

.sd-workbench-mode-option:hover:not(.is-selected) {
  border-color: var(--sd-line-stronger);
  background: color-mix(in oklch, var(--sd-surface-muted) 40%, transparent);
}

.sd-disclosure > summary:hover {
  color: var(--sd-ink);
  background: color-mix(in oklch, var(--sd-surface-muted) 52%, transparent);
}