@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Lora:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  /* Violet Bloom (dark, default) */
  color-scheme: dark;
  --background: #0e0f11;
  --foreground: oklch(0.9551 0 0);
  --card: oklch(0.2568 0.0076 274.6528);
  --card-foreground: oklch(0.9551 0 0);
  --popover: oklch(0.2568 0.0076 274.6528);
  --popover-foreground: oklch(0.9551 0 0);
  --primary: oklch(0.6132 0.2294 291.7437);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.2940 0.0130 272.9312);
  --secondary-foreground: oklch(0.9551 0 0);
  --muted-ui: oklch(0.2940 0.0130 272.9312);
  --muted-foreground: oklch(0.7058 0 0);
  --accent-ui: oklch(0.2795 0.0368 260.0310);
  --accent-foreground: oklch(0.7857 0.1153 246.6596);
  --destructive: oklch(0.7106 0.1661 22.2162);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.3289 0.0092 268.3843);
  --input: oklch(0.3289 0.0092 268.3843);
  --ring: oklch(0.6132 0.2294 291.7437);
  --chart-1: oklch(0.8003 0.1821 151.7110);
  --chart-2: oklch(0.6132 0.2294 291.7437);
  --chart-3: oklch(0.8077 0.1035 19.5706);
  --chart-4: oklch(0.6691 0.1569 260.1063);
  --chart-5: oklch(0.7058 0 0);
  --font-sans: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-serif: "Lora", Georgia, serif;
  --font-mono: "IBM Plex Mono", "Consolas", "SFMono-Regular", monospace;
  --radius: 1.4rem;
  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
  --shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
  --shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.4);
  --tracking-normal: -0.025em;
  --spacing: 0.27rem;

  /* Semantic aliases consumed by existing frontend layouts/tests */
  --bg-0: var(--background);
  --bg-1: color-mix(in oklch, var(--card) 88%, var(--background));
  --bg-2: color-mix(in oklch, var(--secondary) 90%, var(--background));
  --text: var(--foreground);
  --muted: var(--muted-foreground);
  --accent: var(--accent-foreground);
  --accent-2: var(--primary);
  --warn: var(--destructive);
  --ok: var(--chart-1);
  --heading: var(--foreground);
  --heading-soft: color-mix(in oklch, var(--foreground) 88%, var(--accent-foreground));
  --status-neutral-fg: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  --status-ok-fg: color-mix(in oklch, var(--chart-1) 78%, white);
  --status-fail-fg: color-mix(in oklch, var(--destructive) 70%, white);
  --button-primary-fg: var(--primary-foreground);
  --button-muted-fg: var(--secondary-foreground);
  --button-warn-fg: var(--destructive-foreground);
  --surface-glass: color-mix(in oklch, var(--background) 82%, transparent);
  --surface-popover: color-mix(in oklch, var(--popover) 90%, transparent);
  --surface-input: color-mix(in oklch, var(--input) 88%, transparent);
  --surface-muted: color-mix(in oklch, var(--secondary) 86%, transparent);
  --surface-card-strong: color-mix(in oklch, var(--card) 92%, transparent);
  --border-soft: color-mix(in oklch, var(--border) 76%, transparent);
  --primary-soft: color-mix(in oklch, var(--primary) 24%, transparent);
  --accent-soft: color-mix(in oklch, var(--accent-foreground) 20%, transparent);
  --ok-soft: color-mix(in oklch, var(--chart-1) 23%, transparent);
  --warn-soft: color-mix(in oklch, var(--destructive) 22%, transparent);
  --danger-soft: color-mix(in oklch, var(--destructive) 28%, transparent);
  --shadow-ui: var(--shadow-md);
  --surface-panel: color-mix(in oklch, var(--card) 88%, var(--background));
  --surface-panel-2: color-mix(in oklch, var(--card) 78%, var(--background));
  --surface-control: color-mix(in oklch, var(--input) 86%, transparent);
  --surface-control-hover: color-mix(in oklch, var(--input) 72%, transparent);
  --surface-control-strong: color-mix(in oklch, var(--secondary) 70%, var(--background));
  --focus-ring-soft: color-mix(in oklch, var(--ring) 26%, transparent);
  --bg-video-opacity: 0.08;
  --bg-video-transition-opacity: 0.008;
  --bg-canvas: #0e0f11;
  --bg-video-seam-color: #0e0f11;
  --bg-video-loop-duration: 15s;
}

/* 2026-03-14: storyteller desktop final eof authority */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head,
  .layout.is-story-focused .story-shell-top .story-compose-head {
    grid-template-columns: minmax(0, 1fr) minmax(228px, 0.32fr);
    gap: 8px 18px;
    align-items: start;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy,
  .layout.is-story-focused .story-shell-top .story-compose-copy {
    gap: 4px;
    align-content: start;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3,
  .layout.is-story-focused .story-shell-top .story-compose-copy h3 {
    width: max-content;
    max-width: none;
    font-size: clamp(1.5rem, 1.34rem + 0.2vw, 1.68rem);
    line-height: 1.02;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p,
  .layout.is-story-focused .story-shell-top .story-compose-copy p {
    width: max-content;
    max-width: none;
    font-size: 0.71875rem;
    line-height: 1.5;
    white-space: nowrap;
  }

  .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary {
    grid-template-columns: minmax(0, 1fr);
    min-height: 112px;
    gap: 9px;
    padding: 14px 48px 14px 18px;
  }

  .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;
  }

  .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary-text {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-box-orient: initial;
    -webkit-line-clamp: 1;
  }

  .layout.is-story-focused #storyResultsGrid.story-results-grid {
    grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.56fr);
    gap: 14px;
  }

  .layout.is-story-focused #storyLatestOutput.story-latest-output-shell .story-output-stage {
    grid-template-columns: minmax(0, 1.04fr) minmax(332px, 0.96fr);
    gap: 16px;
  }

  .layout.is-story-focused #storyLatestOutput .story-output-dossier-title {
    white-space: nowrap;
  }

  .layout.is-story-focused #storyLatestOutput .story-output-dossier-note {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .layout.is-story-focused #storyResultsSecondary.story-results-secondary {
    padding: 12px 14px 14px;
  }

  .layout.is-story-focused #storyResultsSecondary .story-atlas-head p,
  .layout.is-story-focused #storyResultsSecondary .story-atlas-meta {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .layout.is-story-focused #storyBottomGrid.story-bottom-grid {
    grid-template-columns: minmax(228px, 0.31fr) minmax(0, 1.69fr);
    gap: 10px;
  }
}

/* 2026-03-14: storyteller desktop readable chrome shelf and runtime balance authority */
@media (min-width: 1180px) {
  .layout.is-story-focused .panel-story-studio > h2 {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .layout.is-story-focused .panel-story-studio > h2 > span:last-child,
  .layout.is-story-focused .panel-story-studio .story-intro,
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3,
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p {
    max-width: none;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) {
    border-color: color-mix(in oklch, var(--border-soft) 36%, transparent);
    border-radius: 18px;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 26%, transparent),
        color-mix(in oklch, var(--surface-panel) 86%, transparent)
      );
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 11%, transparent),
      0 16px 34px color-mix(in oklch, var(--shadow-color) 18%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    min-height: 112px;
    gap: 9px;
    padding: 14px 48px 14px 18px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary::after {
    top: 50%;
    right: 18px;
    width: 12px;
    height: 12px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    transform: translateY(-52%) rotate(45deg);
    opacity: 0.82;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-copy {
    align-self: start;
    gap: 4px;
    min-width: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title {
    overflow: hidden;
    font-size: 0.90625rem;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint {
    display: block;
    overflow: hidden;
    font-size: 0.71875rem;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: stretch;
    align-items: start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding-right: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.46;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-box-orient: initial;
    -webkit-line-clamp: 1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta {
    width: max-content;
    min-height: 24px;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    padding-left: 0;
    border-left: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag {
    min-height: 24px;
    padding: 4px 10px;
    border: 1px solid color-mix(in oklch, var(--border-soft) 38%, transparent);
    background: color-mix(in oklch, var(--surface-control) 62%, transparent);
    font-size: 0.6875rem;
    line-height: 1.18;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.52fr) minmax(332px, 0.48fr);
    align-items: start;
    gap: 16px;
  }

  .layout.is-story-focused .story-results-secondary {
    gap: 8px;
    padding: 12px 14px 14px;
    border-radius: 26px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card {
    gap: 6px;
    padding-top: 10px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-head h3 {
    font-size: 0.96875rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p,
  .layout.is-story-focused .story-results-secondary .story-atlas-meta {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-overflow: clip;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p {
    font-size: 0.75rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-meta {
    font-size: 0.71875rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage,
  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage {
    grid-template-columns: minmax(0, 1.08fr) minmax(356px, 0.92fr);
    gap: 18px;
    align-items: start;
  }

  .layout.is-story-focused .story-output-main {
    gap: 12px;
  }

  .layout.is-story-focused .story-output-title {
    max-width: 30ch;
    font-size: clamp(1.24rem, 1.08rem + 0.3vw, 1.46rem);
    line-height: 1.04;
  }

  .layout.is-story-focused .story-output-summary {
    max-width: 64ch;
    font-size: 0.84375rem;
    line-height: 1.52;
  }

  .layout.is-story-focused .story-output-dossier-section {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "title"
      "note"
      "tags"
      "metrics";
    gap: 6px;
    padding: 12px 0 12px 14px;
  }

  .layout.is-story-focused .story-output-dossier-title {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.16;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-output-dossier-note {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.58;
    white-space: normal;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .layout.is-story-focused .story-output-metrics.is-compact {
    grid-template-columns: repeat(4, max-content);
    gap: 6px 12px;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-title {
    max-width: none;
    font-size: clamp(1.18rem, 1.06rem + 0.24vw, 1.34rem);
    line-height: 1.08;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta {
    font-size: 0.78125rem;
    line-height: 1.52;
    white-space: normal;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-text {
    font-size: 0.8125rem;
    line-height: 1.62;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(246px, 0.3fr) minmax(0, 1.7fr);
    align-items: start;
    gap: 12px;
    padding: 14px 16px 16px;
  }

  .layout.is-story-focused .story-controls-grid {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 8px 10px;
  }

  .layout.is-story-focused .story-segment-card,
  .layout.is-story-focused .story-segment-card.is-selected {
    min-height: 194px;
  }
}

/* 2026-03-14: storyteller desktop id-specific authority cleanup */
@media (min-width: 1180px) {
  .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary {
    min-height: 112px;
    padding: 14px 48px 14px 18px;
  }

  .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;
  }

  .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary-text {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-box-orient: initial;
    -webkit-line-clamp: 1;
  }

  .layout.is-story-focused #storyResultsGrid.story-results-grid {
    grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.56fr);
    gap: 14px;
  }

  .layout.is-story-focused #storyLatestOutput.story-latest-output-shell .story-output-stage {
    grid-template-columns: minmax(0, 1.04fr) minmax(332px, 0.96fr);
    gap: 16px;
  }

  .layout.is-story-focused #storyLatestOutput .story-output-dossier-title {
    white-space: nowrap;
  }

  .layout.is-story-focused #storyLatestOutput .story-output-dossier-note {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .layout.is-story-focused #storyResultsSecondary.story-results-secondary {
    padding: 12px 14px 14px;
  }

  .layout.is-story-focused #storyResultsSecondary .story-atlas-head p,
  .layout.is-story-focused #storyResultsSecondary .story-atlas-meta {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .layout.is-story-focused #storyBottomGrid.story-bottom-grid {
    grid-template-columns: minmax(228px, 0.31fr) minmax(0, 1.69fr);
    gap: 10px;
  }
}

/* 2026-03-13: storyteller desktop runtime orderly shelf pass */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-compose-shell .story-tray-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .layout.is-story-focused .story-compose-shell #storyDirectionTray:not([open]) {
    grid-column: auto;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 4px;
    min-height: 58px;
    padding: 10px 34px 10px 14px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) > summary::after {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 11px;
    height: 11px;
    transform: translateY(-58%) rotate(45deg);
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-copy {
    gap: 2px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-title {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.84rem;
    line-height: 1.08;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-hint {
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.38;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-right: 0;
    text-align: left;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary-text {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    display: block;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.42;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
    padding-left: 8px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.6875rem;
    line-height: 1.18;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.54fr) minmax(228px, 0.46fr);
    align-items: start;
    gap: 10px;
  }

  .layout.is-story-focused .story-results-secondary {
    gap: 4px;
    padding: 9px 10px 10px;
  }

  .layout.is-story-focused .story-atlas-rail {
    gap: 6px;
    overflow: visible;
  }

  .layout.is-story-focused .story-atlas-tab {
    min-width: 0;
    padding: 8px 12px;
  }

  .layout.is-story-focused .story-atlas-tab-label,
  .layout.is-story-focused .story-results-secondary .story-atlas-head h3,
  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage,
  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage {
    grid-template-columns: minmax(0, 1.48fr) minmax(212px, 0.52fr);
    gap: 14px;
  }

  .layout.is-story-focused .story-output-dossier-section {
    gap: 5px;
    padding: 10px 0 10px 12px;
  }

  .layout.is-story-focused .story-output-dossier-note {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-output-metrics.is-compact {
    gap: 5px 12px;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-title,
  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-assets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-assets .story-asset-pill {
    max-width: 100%;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(236px, 0.32fr) minmax(0, 1.68fr);
    align-items: start;
    gap: 9px;
    padding: 14px 15px 15px;
  }

  .layout.is-story-focused .story-controls {
    gap: 7px;
  }

  .layout.is-story-focused .story-controls-grid {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 7px 9px;
  }

  .layout.is-story-focused .story-controls-grid .field {
    gap: 5px;
    padding: 7px 9px;
  }

  .layout.is-story-focused .story-controls-grid .field :is(select, .select-trigger) {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 37px;
    padding: 8px 29px 8px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-controls-grid .select-trigger::after {
    top: 50%;
    right: 10px;
    transform: translateY(-54%) rotate(45deg);
  }

  .layout.is-story-focused .story-controls-grid #storyTimelinePosition.meta-box {
    min-height: 37px;
    padding: 8px 10px;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-controls-hint {
    max-width: none;
    font-size: 0.6875rem;
    line-height: 1.42;
  }

  .layout.is-story-focused .story-scenes-shell {
    gap: 8px;
    padding-left: 6px;
  }

  .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
  .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
    gap: 8px;
  }

  .layout.is-story-focused .story-segment-card,
  .layout.is-story-focused .story-segment-card.is-selected {
    min-height: 192px;
  }

  .layout.is-story-focused .story-segment-card {
    gap: 6px;
    padding: 12px 12px 11px;
  }

  .layout.is-story-focused .story-segment-head {
    align-items: start;
    gap: 8px;
  }

  .layout.is-story-focused .story-segment-index,
  .layout.is-story-focused .story-segment-state {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-segment-title {
    font-size: 0.86rem;
    line-height: 1.16;
    min-height: calc(2 * 1.16em);
  }

  .layout.is-story-focused .story-segment-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.75rem;
    line-height: 1.48;
  }

.layout.is-story-focused .story-segment-footer {
    gap: 6px 8px;
    padding-top: 8px;
  }
}

/* 2026-03-20: Stage 1 case-workspace shell for the live first fold */
.layout[data-active-tab="live-negotiator"] .panel-live-intent-composer {
  overflow: hidden;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-shell {
  display: grid;
  gap: 16px;
  margin: 0 0 18px;
  padding: 20px 20px 18px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(360px 160px at 0% -16%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 96%, transparent), color-mix(in oklch, var(--surface-panel-2) 99%, transparent));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: start;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-hero-copy {
  display: grid;
  gap: 6px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-hero-copy h2 {
  margin: 0;
  font-size: clamp(1.42rem, 2vw, 2rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-hero-intro {
  margin: 0;
  max-width: 72ch;
  color: var(--muted-foreground);
  font-size: 0.92rem;
  line-height: 1.55;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  align-self: start;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-hero-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  background: color-mix(in oklch, var(--surface-control) 76%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-flow-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
  gap: 12px;
  align-items: stretch;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 12px 13px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 20px;
  background: color-mix(in oklch, var(--surface-control) 80%, transparent);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-step.is-current {
  border-color: color-mix(in oklch, var(--primary) 50%, var(--border-soft));
  background:
    radial-gradient(140px 76px at 0% -10%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 72%),
    color-mix(in oklch, var(--surface-control) 86%, transparent);
  transform: translateY(-1px);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-step.is-complete {
  border-color: color-mix(in oklch, var(--ok) 42%, var(--border-soft));
  background: color-mix(in oklch, var(--ok) 12%, var(--surface-control));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-panel) 74%, transparent);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--border-soft) 80%, transparent);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-step.is-current .case-workspace-step-index {
  background: color-mix(in oklch, var(--primary) 24%, var(--surface-panel));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-step.is-complete .case-workspace-step-index {
  background: color-mix(in oklch, var(--ok) 26%, var(--surface-panel));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-step-copy {
  display: grid;
  gap: 2px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-step-title {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.2;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-step-status {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.35;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-flow-card {
  display: grid;
  gap: 10px;
  padding: 16px 16px 18px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(180px 88px at 0% -18%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 82%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-flow-title {
  margin: 0;
  color: var(--foreground);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.28;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-flow-actions {
  display: grid;
  gap: 10px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-flow-actions > button {
  width: 100%;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-flow-hint {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.79rem;
  line-height: 1.45;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-card {
  display: grid;
  gap: 10px;
  padding: 16px 16px 18px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(180px 88px at 0% -18%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 82%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-head,
.layout[data-active-tab="live-negotiator"] .case-workspace-action-section-copy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-list div {
  display: grid;
  gap: 2px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-list dt {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-list dd {
  margin: 0;
  color: var(--foreground);
  font-size: 0.94rem;
  font-weight: 600;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-copy {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.5;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-next-focus {
  display: grid;
  gap: 3px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-next-focus-label {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-next-focus-value {
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.4;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-next-stage {
  display: grid;
  gap: 3px;
  margin-top: 0.5rem;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-next-stage-label {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-next-stage-value {
  color: rgba(233, 236, 245, 0.92);
  font-size: 0.92rem;
  line-height: 1.4;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-completed-focus {
  display: grid;
  gap: 3px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-completed-focus-label {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-completed-focus-value {
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.4;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-completed-stage {
  display: grid;
  gap: 3px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-completed-stage-label {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-completed-stage-value {
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.4;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-prepared {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 62%, transparent);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-prepared-label {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-prepared-copy {
  margin: 0;
  color: var(--foreground);
  font-size: 0.84rem;
  line-height: 1.45;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-case-wiki {
  grid-column: 1 / -1;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-summary-case-wiki .case-workspace-summary-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-evidence-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 2px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-focus-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 2px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-focus-group {
  display: grid;
  gap: 8px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-focus-label {
  color: color-mix(in oklch, var(--primary) 58%, var(--muted-foreground));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-focus-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-focus-chip {
  border: 1px solid color-mix(in oklch, var(--border-soft) 76%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 78%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
  min-height: 34px;
  padding: 7px 12px;
  font-size: 0.8rem;
  line-height: 1.25;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    color 120ms ease,
    transform 120ms ease;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-focus-chip:hover {
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border-soft));
  background: color-mix(in oklch, var(--surface-panel-2) 84%, var(--surface-control));
  transform: translateY(-1px);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-focus-chip:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--primary) 52%, transparent);
  outline-offset: 2px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-focus-chip.is-active {
  border-color: color-mix(in oklch, var(--primary) 52%, var(--border-soft));
  background: color-mix(in oklch, var(--primary) 16%, var(--surface-panel-2));
  color: color-mix(in oklch, var(--foreground) 96%, var(--primary));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-focus-empty {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.45;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-row {
  border: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  border-radius: 18px;
  background: color-mix(in oklch, var(--surface-control) 72%, transparent);
  overflow: clip;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-summary {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-summary::-webkit-details-marker {
  display: none;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-label {
  color: color-mix(in oklch, var(--primary) 58%, var(--muted-foreground));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-title {
  color: color-mix(in oklch, var(--foreground) 95%, var(--accent-foreground));
  font-size: 0.92rem;
  line-height: 1.35;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-meta {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.4;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-body {
  margin: 0;
  padding: 0 14px 14px;
  color: var(--foreground);
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 10px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-panel-2) 82%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.68rem;
  line-height: 1.2;
  white-space: nowrap;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-badge.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 40%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 94%, var(--chart-1));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-badge.is-watch {
  border-color: color-mix(in oklch, var(--warning) 38%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 94%, var(--warning));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-badge.is-neutral {
  border-style: dashed;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 14px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-action {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-panel-title {
  margin-top: 4px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-panel-intro {
  max-width: 74ch;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-stack {
  display: grid;
  gap: 14px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-section {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 84%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-title {
  color: color-mix(in oklch, var(--primary) 56%, var(--muted-foreground));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-hint {
  margin: 0;
  max-width: 64ch;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.45;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-meta {
  flex: 1 1 280px;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.82rem;
  line-height: 1.45;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-task-rail {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 94%, transparent));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-task-rail-label {
  color: color-mix(in oklch, var(--primary) 58%, var(--muted-foreground));
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-task-rail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-task-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-task-item-label {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-task-item-value {
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .layout[data-active-tab="live-negotiator"] .case-workspace-main-action-task-rail-grid {
    grid-template-columns: 1fr;
  }
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-path-context {
  display: grid;
  gap: 8px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-path-context-label {
  color: color-mix(in oklch, var(--muted-foreground) 88%, var(--foreground));
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-path-context-body {
  display: grid;
  gap: 8px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-surface-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-surface-label {
  color: color-mix(in oklch, var(--primary) 52%, var(--muted-foreground));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-surface-value {
  color: color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-outcome-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-outcome-label {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--primary));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-outcome-value {
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.81rem;
  line-height: 1.45;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-proof-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-proof-label {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--accent));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-main-action-proof-value {
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.45;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-inline-pill {
  align-self: flex-start;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-group {
  width: 100%;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell {
  gap: 0;
  padding: 0;
  overflow: clip;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell-summary::-webkit-details-marker {
  display: none;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell-copy {
  flex: 1 1 auto;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell-copy .case-workspace-action-hint {
  display: block;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell-pill {
  margin-left: auto;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell-body {
  padding: 0 18px 18px;
  border-top: 1px dashed color-mix(in oklch, var(--border-soft) 70%, transparent);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-request-shell-body {
  display: grid;
  gap: 12px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-path-shell-body {
  display: grid;
  gap: 12px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-path-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklch, var(--primary) 20%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 90%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 8%, transparent);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-path-copy {
  display: grid;
  gap: 6px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-preview-rail {
  display: grid;
  gap: 10px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-preview-row {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px dashed color-mix(in oklch, var(--border-soft) 82%, transparent);
  background: color-mix(in oklch, var(--surface-panel-2) 84%, transparent);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-preview-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground) 88%, var(--foreground));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-preview-title {
  font-size: 0.96rem;
  font-weight: 600;
  color: color-mix(in oklch, var(--foreground) 92%, var(--surface-panel));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-path-actions {
  padding-top: 2px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-subshell {
  overflow: clip;
  border: 1px dashed color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 16px;
  background: color-mix(in oklch, var(--surface-panel-2) 86%, transparent);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-subshell-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-subshell-summary::-webkit-details-marker {
  display: none;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-subshell-body {
  padding: 0 14px 14px;
  border-top: 1px dashed color-mix(in oklch, var(--border-soft) 74%, transparent);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell:not([open]) .case-workspace-action-shell-summary {
  padding-bottom: 15px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell:not([open]) .case-workspace-action-shell-pill {
  background: color-mix(in oklch, var(--surface-panel-2) 88%, transparent);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell[open] .case-workspace-action-shell-summary {
  padding-bottom: 14px;
}

.layout[data-active-tab="live-negotiator"] .live-compose-preset-btn[data-case-workspace-action-state="recommended"] {
  border-color: color-mix(in oklch, var(--primary) 52%, var(--border));
  background: linear-gradient(135deg, color-mix(in oklch, var(--primary) 88%, white), var(--primary));
  color: var(--primary-foreground);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 22%, transparent),
    0 10px 24px -18px color-mix(in oklch, var(--primary) 72%, transparent),
    var(--shadow-sm);
}

.layout[data-active-tab="live-negotiator"] .live-compose-preset-btn[data-case-workspace-action-kicker] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  text-align: left;
}

.layout[data-active-tab="live-negotiator"] .live-compose-preset-btn[data-case-workspace-action-kicker]::before {
  content: attr(data-case-workspace-action-kicker);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
}

.layout[data-active-tab="live-negotiator"] .live-compose-preset-btn[data-case-workspace-action-state="recommended"][data-case-workspace-action-kicker]::before {
  color: color-mix(in oklch, var(--primary-foreground) 88%, white);
}

.layout[data-active-tab="live-negotiator"] .live-compose-preset-btn[data-case-workspace-action-state="completed"][data-case-workspace-action-kicker]::before {
  color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
}

.layout[data-active-tab="live-negotiator"] .live-compose-preset-btn[data-case-workspace-action-state="completed"] {
  border-color: color-mix(in oklch, var(--primary) 26%, var(--border));
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
}

.layout[data-active-tab="live-negotiator"] .live-compose-preset-btn[data-case-workspace-action-state="preview"],
.layout[data-active-tab="live-negotiator"] .live-compose-preset-btn[data-case-workspace-action-state="jump"],
.layout[data-active-tab="live-negotiator"] .live-compose-preset-btn[data-case-workspace-action-state="held"],
.layout[data-active-tab="live-negotiator"] .live-compose-preset-btn[data-case-workspace-action-state="utility"] {
  opacity: 0.74;
}

.layout[data-active-tab="live-negotiator"] .live-compose-preset-btn[data-case-workspace-action-state="preview"] {
  cursor: not-allowed;
  border-style: dashed;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell[data-case-workspace-drawer-state="recommended"] .case-workspace-action-shell-pill,
.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell[data-case-workspace-drawer-state="review"] .case-workspace-action-shell-pill,
.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell[data-case-workspace-drawer-state="ready"] .case-workspace-action-shell-pill {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell[data-case-workspace-drawer-state="recommended"] .case-workspace-action-hint,
.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell[data-case-workspace-drawer-state="review"] .case-workspace-action-hint {
  color: color-mix(in oklch, var(--foreground) 90%, var(--accent-foreground));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell[data-case-workspace-drawer-ownership="secondary"] .case-workspace-action-shell-summary {
  gap: 12px;
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell[data-case-workspace-drawer-ownership="secondary"] .case-workspace-action-title {
  color: color-mix(in oklch, var(--muted-foreground) 90%, var(--foreground));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell[data-case-workspace-drawer-ownership="secondary"] .case-workspace-action-hint {
  color: color-mix(in oklch, var(--muted-foreground) 94%, var(--foreground));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-shell[data-case-workspace-drawer-ownership="secondary"] .case-workspace-action-shell-pill {
  background: color-mix(in oklch, var(--surface-panel-2) 92%, transparent);
  border-color: color-mix(in oklch, var(--border-soft) 84%, transparent);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-section-main[data-case-workspace-primary-state="case"],
.layout[data-active-tab="live-negotiator"] .case-workspace-action-section-main[data-case-workspace-primary-state="review"] {
  border-color: color-mix(in oklch, var(--primary) 32%, var(--border-soft));
  background:
    radial-gradient(180px 88px at 0% -18%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 88%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-section-main[data-case-workspace-primary-state="case"] .case-workspace-main-action-meta,
.layout[data-active-tab="live-negotiator"] .case-workspace-action-section-main[data-case-workspace-primary-state="review"] .case-workspace-main-action-meta {
  color: color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-section-main[data-case-workspace-primary-surface="case"] .case-workspace-main-action-surface-value,
.layout[data-active-tab="live-negotiator"] .case-workspace-action-section-main[data-case-workspace-primary-surface="result"] .case-workspace-main-action-surface-value {
  color: color-mix(in oklch, var(--foreground) 96%, white);
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-section-main[data-case-workspace-primary-state="case"] .case-workspace-main-action-outcome-value,
.layout[data-active-tab="live-negotiator"] .case-workspace-action-section-main[data-case-workspace-primary-state="review"] .case-workspace-main-action-outcome-value {
  color: color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
}

.layout[data-active-tab="live-negotiator"] .case-workspace-action-section-main[data-case-workspace-primary-state="case"] .case-workspace-main-action-proof-value,
.layout[data-active-tab="live-negotiator"] .case-workspace-action-section-main[data-case-workspace-primary-state="review"] .case-workspace-main-action-proof-value {
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
}

@media (max-width: 1100px) {
  .layout[data-active-tab="live-negotiator"] .case-workspace-hero,
  .layout[data-active-tab="live-negotiator"] .case-workspace-flow-shell,
  .layout[data-active-tab="live-negotiator"] .case-workspace-summary-grid {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="live-negotiator"] .case-workspace-hero-actions {
    justify-content: flex-start;
  }

  .layout[data-active-tab="live-negotiator"] .case-workspace-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout[data-active-tab="live-negotiator"] .case-workspace-summary-case-wiki .case-workspace-summary-list {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-focus-shell,
  .layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-detail-shell,
  .layout[data-active-tab="live-negotiator"] .case-workspace-case-wiki-evidence-rail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .layout[data-active-tab="live-negotiator"] .case-workspace-shell {
    padding: 18px 16px 16px;
  }

  .layout[data-active-tab="live-negotiator"] .case-workspace-action-section {
    padding: 14px 14px 15px;
  }

  .layout[data-active-tab="live-negotiator"] .case-workspace-action-shell {
    padding: 0;
  }

  .layout[data-active-tab="live-negotiator"] .case-workspace-action-shell-summary {
    padding: 14px 14px 13px;
  }

  .layout[data-active-tab="live-negotiator"] .case-workspace-action-shell-body {
    padding: 0 14px 14px;
  }

  .layout[data-active-tab="live-negotiator"] .case-workspace-hero-chip {
    min-height: 32px;
  }

  .layout[data-active-tab="live-negotiator"] .case-workspace-stepper {
    grid-template-columns: 1fr;
  }
}

/* 2026-03-20: Stage 3 split between product support and operator tools inside live dock */
.layout[data-active-tab="live-negotiator"] .live-context-dock-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 0;
}

.layout[data-active-tab="live-negotiator"] .live-context-dock-legend-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 76%, transparent);
  border-radius: 18px;
  background: color-mix(in oklch, var(--surface-control) 74%, transparent);
}

.layout[data-active-tab="live-negotiator"] .live-context-dock-legend-hint {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.4;
}

.layout[data-active-tab="live-negotiator"] .live-context-dock-legend-action {
  justify-self: start;
  margin-top: 2px;
}

.layout[data-active-tab="live-negotiator"] .live-context-dock-btn[data-live-context-group="product"] {
  border-color: color-mix(in oklch, var(--primary) 26%, var(--border-soft));
}

.layout[data-active-tab="live-negotiator"] .live-context-dock-btn[data-live-context-group="operator"] {
  border-color: color-mix(in oklch, var(--warning) 20%, var(--border-soft));
}

.layout[data-active-tab="live-negotiator"] .live-context-dock-btn[data-live-context-group="operator"] .live-context-dock-label {
  color: color-mix(in oklch, var(--warning) 34%, var(--foreground));
}

@media (max-width: 900px) {
  .layout[data-active-tab="live-negotiator"] .live-context-dock-legend {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1180px) {
/* 2026-03-15 Pass - desktop storyteller studio band and compose-head air refinement */
.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal {
    grid-template-columns: minmax(0, 1fr) fit-content(23.75rem) !important;
    gap: 22px 36px !important;
}

.dashboard-sidebar.is-story-focused {
    flex: 0 0 232px !important;
    min-width: 232px !important;
    max-width: 232px !important;
}

.layout.is-story-focused .panel-story-studio {
    gap: 14px !important;
    padding: 22px 24px 24px !important;
}

.layout.is-story-focused .panel-story-studio .story-intro {
    max-width: 52ch !important;
    margin: -4px 0 0 64px !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-head,
  .layout.is-story-focused .story-shell-top .story-compose-head {
    grid-template-columns: minmax(0, 1fr) fit-content(16.5rem) !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p,
  .layout.is-story-focused .story-shell-top .story-compose-copy p {
    max-width: 44ch !important;
}

/* 2026-03-15 Pass - desktop storyteller mode rail and cue ledger air refinement */
.layout.is-story-focused #storyModeRail.story-mode-rail,
  .layout.is-story-focused .story-shell-top #storyModeRail.story-mode-rail {
    gap: 10px 12px !important;
    padding: 6px 0 8px !important;
}

.layout.is-story-focused .story-signal-strip,
  .layout.is-story-focused .story-shell-top .story-signal-strip {
    gap: 2px !important;
    padding: 8px 0 0 14px !important;
}

.layout.is-story-focused .story-signal-strip .story-signal-card-world .story-signal-value,
  .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-card-world .story-signal-value {
    max-width: 24ch !important;
}

/* 2026-03-15 Pass - desktop storyteller prompt lane and CTA handoff refinement */
.layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading,
  .layout.is-story-focused .story-shell-top .story-compose-field .field-heading {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-count,
  .layout.is-story-focused .story-shell-top .story-compose-count {
    min-height: 0 !important;
    font-size: 0.6875rem !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions,
  .layout.is-story-focused .story-shell-top .story-compose-secondary-actions {
    display: flex !important;
    align-items: center !important;
}

/* 2026-03-15 Pass - desktop storyteller collapsed tray shelf rhythm refinement */
.layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary,
  .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) > summary {
    min-height: 112px !important;
    grid-template-columns: minmax(0, 1fr) fit-content(10rem) !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint,
  .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-hint {
    overflow: hidden !important;
    font-size: 0.71875rem !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta,
  .layout.is-story-focused .story-shell-top .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta {
    justify-content: flex-end !important;
    align-items: center !important;
}

/* 2026-03-15 Pass - desktop storyteller header and left-rail balance refinement */
.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal {
    grid-template-columns: minmax(0, 1fr) fit-content(21.5rem) !important;
    gap: 24px 28px !important;
}

.dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn {
    width: 100% !important;
    min-height: 62px !important;
    height: 62px !important;
}

/* 2026-03-15 Pass - desktop storyteller studio shell depth and rhythm refinement */
.layout.is-story-focused .panel-story-studio {
    gap: 18px !important;
    padding: 24px 28px 28px !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell,
  .layout.is-story-focused .story-shell-top .story-compose-shell {
    gap: 11px !important;
    padding: 18px 20px 20px !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-canvas,
  .layout.is-story-focused .story-shell-top .story-compose-canvas {
    gap: 14px !important;
    padding: 16px 18px 17px !important;
}

/* 2026-03-15 Pass - desktop storyteller compose-head lockup refinement */
.layout.is-story-focused .story-shell-top.is-prerun .story-compose-head,
  .layout.is-story-focused .story-shell-top .story-compose-head {
    grid-template-columns: minmax(0, 1fr) fit-content(14.75rem) !important;
    gap: 14px 24px !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p,
  .layout.is-story-focused .story-shell-top .story-compose-copy p {
    max-width: 48ch !important;
    font-size: 0.8125rem !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-status,
  .layout.is-story-focused .story-shell-top .story-compose-status {
    width: min(100%, 14.75rem) !important;
    gap: 4px 10px !important;
}

/* 2026-03-15 Pass - desktop storyteller mode-rail lockup refinement */
.layout.is-story-focused #storyModeRail.story-mode-rail,
  .layout.is-story-focused .story-shell-top #storyModeRail.story-mode-rail {
    gap: 12px 14px !important;
    padding: 7px 0 10px !important;
}

.layout.is-story-focused #storyModeRail .story-mode-card.is-active,
  .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card.is-active {
    min-width: 356px !important;
    min-height: 58px !important;
}

.layout.is-story-focused #storyModeRail .story-mode-card:not(.is-active),
  .layout.is-story-focused .story-shell-top #storyModeRail .story-mode-card:not(.is-active) {
    justify-content: center !important;
    min-width: 126px !important;
    min-height: 40px !important;
}

/* 2026-03-15 Pass - desktop storyteller cue-ledger lockup refinement */
.layout.is-story-focused .story-signal-strip,
  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip,
  .layout.is-story-focused .story-shell-top .story-signal-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.layout.is-story-focused .story-signal-strip .story-signal-card,
  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip .story-signal-card,
  .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-card {
    min-width: 0 !important;
    gap: 4px !important;
}

.layout.is-story-focused .story-signal-strip .story-signal-value,
  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip .story-signal-value,
  .layout.is-story-focused .story-shell-top .story-signal-strip .story-signal-value {
    display: block !important;
    min-width: 0 !important;
}

/* 2026-03-15 Pass - desktop storyteller prompt lockup and meta-ledger refinement */
.layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading,
  .layout.is-story-focused .story-shell-top .story-compose-field .field-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-meta,
  .layout.is-story-focused .story-shell-top .story-compose-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions,
  .layout.is-story-focused .story-shell-top .story-compose-actions {
    gap: 12px 18px !important;
    padding-top: 14px !important;
}

/* 2026-03-15 Pass - desktop storyteller tray-open, header, and run-rail overflow resilience */
.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal {
    grid-template-columns: minmax(0, 1fr) minmax(31rem, 33%) !important;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value {
    display: -webkit-box !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
}

.layout.is-story-focused .story-compose-shell #storyCraftTray[open] .story-tray-body,
  .layout.is-story-focused .story-compose-shell #storyMediaTray[open] .story-tray-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr) !important;
}

.layout.is-story-focused .story-compose-shell #storyCraftTray[open] .story-tray-section-grid:not(.story-tray-section-grid-single),
  .layout.is-story-focused .story-compose-shell #storyMediaTray[open] .story-tray-section-grid:not(.story-tray-section-grid-single) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.layout.is-story-focused .story-compose-shell #storyDirectionTray[open] .story-tray-body.story-tray-body-full {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

.layout.is-story-focused #storyRunRail .story-head-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.layout.is-story-focused #storyTimelineControls .select-shell.is-open-upward .select-menu {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
}

/* 2026-03-15 Pass - desktop storyteller tray-card clarity, title alignment, and sidebar lift */
/* 2026-03-15 Pass - desktop storyteller chevron alignment and live utility pill */
/* 2026-03-15 Pass - desktop storyteller chevron alignment and live utility pill (late load) */
.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal {
    grid-template-columns: minmax(0, 1fr) minmax(34rem, 40%) !important;
}

.dashboard-sidebar.is-story-focused {
    flex: 0 0 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
}

.layout.is-story-focused .panel-story-studio .story-intro {
    max-width: 36ch !important;
    margin: 2px 0 0 86px !important;
}

.layout.is-story-focused #storyTimelineSelect + .select-shell .select-menu {
    left: 0 !important;
    right: auto !important;
}

.layout.is-story-focused
    .story-compose-shell
    :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open]
    > summary {
    min-height: 58px !important;
    gap: 12px 24px !important;
    padding: 12px 56px 12px 12px !important;
}

.layout.is-story-focused
    .story-shell-top.is-prerun
    :is(#storyComposerOpenLiveBtn.button-muted, #storyTimelineGuideOpenLiveBtn.button-muted),
.layout.is-story-focused
    .story-shell-top
    :is(#storyComposerOpenLiveBtn.button-muted, #storyTimelineGuideOpenLiveBtn.button-muted) {
    border-radius: 999px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.layout.is-story-focused
    .story-compose-shell
    :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open])
    > summary::before,
  .layout.is-story-focused
    .story-compose-shell
    :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open]
    > summary::before {
    top: 14px !important;
    right: 14px !important;
    width: 30px !important;
    height: 30px !important;
    background-size: 13px 13px !important;
    border: 0 !important;
    transform: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ece8f5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3C/svg%3E") !important;
}

.layout.is-story-focused
    .story-compose-shell
    :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray)[open]
    > summary::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ece8f5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 14 12 9 17 14'/%3E%3C/svg%3E") !important;
}

/* 2026-03-16 Pass - desktop storyteller left-rail late authority */
.layout.is-story-focused .dashboard-body.is-story-focused {
    grid-template-columns: 284px minmax(0, 1fr) !important;
    column-gap: 24px !important;
}

.layout.is-story-focused .dashboard-sidebar.is-story-focused {
    flex: 0 0 284px !important;
    min-width: 284px !important;
    max-width: 284px !important;
}

.layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn[data-tab-target="live-negotiator"] {
    border-color: color-mix(in oklch, var(--primary) 26%, var(--border-soft)) !important;
}

.layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav-icon {
    display: inline-flex !important;
    width: 60px !important;
    min-width: 60px !important;
}

/* 2026-03-16 Pass - desktop storyteller left-rail and title alignment EOF authority */
.layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav-copy {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

.layout.is-story-focused .dashboard-sidebar.is-story-focused .dashboard-nav-title {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.layout.is-story-focused .panel-story-studio .story-intro {
    margin: 2px 0 0 88px !important;
    padding-left: 0 !important;
}
}

/* 2026-03-18: timeline-panel alignment exact-token authority */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.66fr) minmax(272px, 0.34fr);
    align-items: start;
    gap: 12px;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.46fr) minmax(292px, 0.54fr);
    gap: 12px;
  }

  .layout.is-story-focused .story-results-secondary {
    align-self: start;
    gap: 5px;
    padding: 10px 11px 11px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage {
    grid-template-columns: minmax(0, 1.34fr) minmax(232px, 0.66fr);
    gap: 11px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage,
  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage {
    grid-template-columns: minmax(0, 1.48fr) minmax(212px, 0.52fr);
    gap: 14px;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(224px, 0.34fr) minmax(0, 1.66fr);
    align-items: start;
    gap: 7px;
    padding: 13px 14px 14px;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(236px, 0.32fr) minmax(0, 1.68fr);
    align-items: start;
    gap: 9px;
    padding: 14px 15px 15px;
  }

  .layout.is-story-focused .story-controls-grid .field :is(select, .select-trigger) {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 7px 31px 7px 10px;
  }

  .layout.is-story-focused .story-controls-grid {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 7px 9px;
  }

  .layout.is-story-focused .story-segment-card,
  .layout.is-story-focused .story-segment-card.is-selected {
    min-height: 186px;
  }

  .layout.is-story-focused .story-segment-card,
  .layout.is-story-focused .story-segment-card.is-selected {
    min-height: 192px;
  }

  .layout.is-story-focused .story-segment-title {
    font-size: 0.85rem;
    line-height: 1.15;
    min-height: calc(2 * 1.15em);
  }

  .layout.is-story-focused .story-compose-field .field-inline-hint {
    display: none;
  }

  .layout.is-story-focused .story-compose-count {
    padding: 0;
  }
}

@media (min-width: 1180px) {
  /* 2026-03-13: storyteller desktop final one-line and honest-wrap cleanup pass */
  .layout.is-story-focused .story-compose-shell .story-tray > summary {
    list-style: none;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary-text {
    flex: 1 1 19ch;
    min-width: 12ch;
    max-width: none;
    display: block;
    overflow: visible;
    font-size: 0.75rem;
    line-height: 1.46;
    white-space: normal;
    text-overflow: clip;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(244px, 0.58fr);
    align-items: start;
    gap: 8px;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.66fr) minmax(272px, 0.34fr);
    align-items: start;
    gap: 12px;
  }

  .panel-live-intent-composer .translation-language-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  }

  .panel-live-intent-composer .translation-language-row .intent-field-language {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  }

  .panel-live-intent-composer #speechLanguageField {
  order: -2;
  }

  .panel-live-intent-composer #intentLanguageField {
  order: -1;
  }

  .panel-live-intent-composer .intent-field-language :is(select, .select-trigger) {
  min-height: 44px;
  font-size: 14px;
  }
}

@media (min-width: 1180px) {
  .layout.is-story-focused .story-mode-rail {
  order: 1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell {
  width: 100%;
  max-width: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell {
    gap: 9px;
    padding: 18px 20px 18px;
    border-radius: 24px;
    border-color: color-mix(in oklch, var(--border-soft) 80%, transparent);
  }

  .layout.is-story-focused .story-signal-strip {
  order: 2;
  }

  .layout.is-story-focused .story-flow-strip {
  display: none;
  }

  .layout.is-story-focused .story-signal-card:not(:last-child)::after {
    content: "";
  }

  .layout.is-story-focused .story-tray-grid {
  order: 5;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail {
    gap: 6px 9px;
    padding: 4px 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status {
    align-items: center;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    padding-top: 10px;
    gap: 10px 14px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 34%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions > #storyComposerSubmitBtn {
    min-width: 214px;
    min-height: 42px;
    padding: 0 22px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions {
    align-items: center;
    justify-content: flex-end;
    gap: 5px 9px;
    padding-left: 12px;
    border-left: 1px solid color-mix(in oklch, var(--border-soft) 38%, transparent);
  }

  .layout.is-story-focused .hero {
    gap: 1px 10px;
    padding: 0 1px;
    border: 0;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-eyebrow {
    display: none;
  }

  .layout.is-story-focused .hero-headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 2px 10px;
    align-items: baseline;
  }

  .layout.is-story-focused .hero-language-control {
    padding: 1px 0 1px 5px;
    border-color: transparent;
    background: transparent;
  }

  .layout.is-story-focused .hero-language-select {
    min-height: 24px;
    padding: 1px 7px;
    border-color: color-mix(in oklch, var(--border-soft) 20%, transparent);
  }

  .layout.is-story-focused .hero h1 {
    font-size: 0.6875rem;
    line-height: 1.18;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title {
    font-size: 0.72rem;
    line-height: 1.12;
    color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card {
    gap: 2px;
    padding-right: 5px;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value {
    font-size: 0.6875rem;
    line-height: 1.16;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) {
    min-height: 0;
    padding: 0 2px;
    border: 0;
    background: transparent;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active {
    gap: 2px 8px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip {
    gap: 0;
    padding: 2px 0 0 11px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value {
    max-width: 13ch;
    font-size: 0.66rem;
    line-height: 1.2;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-kicker {
    min-height: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card-scope {
    display: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail {
    display: contents;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip::before {
    content: "";
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    max-width: 21ch;
    padding: 0 12px 0 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

@media (max-width: 720px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card-scope {
    display: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail {
    display: contents;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip::before {
    content: "";
  }
}

@media (min-width: 1180px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-overview-chip {
    display: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head {
    gap: 5px 16px;
    padding-bottom: 6px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 10px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions {
    padding-top: 8px;
    gap: 8px 12px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions > #storyComposerSubmitBtn {
    min-width: 188px;
    min-height: 40px;
    padding: 0 18px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerTemplateBtn {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.69rem;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] {
    grid-column: 1 / -1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    min-height: 88px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] > summary {
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyCraftTray[open] .story-tray-body,
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyMediaTray[open] .story-tray-body {
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] .story-tray-body {
    grid-template-columns: minmax(260px, 0.44fr) minmax(0, 1fr);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (min-width: 1180px) {
  .layout.is-story-focused .story-compose-copy h3 {
    max-width: none;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.46fr) minmax(292px, 0.54fr);
    gap: 12px;
  }

  .layout.is-story-focused .story-output-dossier-note {
    display: -webkit-box;
    max-width: none;
    overflow: hidden;
    white-space: normal;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  .story-tray > summary::marker {
  content: "";
}

  .layout.is-story-focused .story-results-secondary {
    align-self: start;
    gap: 5px;
    padding: 10px 11px 11px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage {
    grid-template-columns: minmax(0, 1.34fr) minmax(232px, 0.66fr);
    gap: 11px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage,
  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage {
    grid-template-columns: minmax(0, 1.48fr) minmax(212px, 0.52fr);
    gap: 14px;
  }
}

@media (min-width: 1180px) {
  .dashboard-sidebar.is-story-focused .dashboard-nav {
    gap: 3px;
    padding: 2px 0;
    border: 0;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn {
    position: relative;
    min-height: 40px;
    padding: 5px 0 5px 12px;
    border: 0;
    border-radius: 0;
    gap: 4px;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav-title {
    font-size: 0.7rem;
    line-height: 1.2;
  }

  .layout.is-story-focused .panel-story-studio {
    gap: 13px;
    padding: 15px 20px 17px;
    border-color: color-mix(in oklch, var(--border-soft) 66%, transparent);
    border-radius: 26px;
  }

  .layout.is-story-focused .panel-story-studio > h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 0;
    font-size: clamp(1.64rem, 1.08rem + 0.98vw, 1.98rem);
  }

  .layout.is-story-focused .story-intro {
    max-width: 30ch;
    margin-top: -5px;
    padding-left: 46px;
    font-size: 0.6875rem;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-overview-chip {
    min-height: 0;
    padding: 0;
    border: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 7px 18px;
    align-items: start;
    padding-bottom: 7px;
    border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 40%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3 {
    max-width: 28ch;
    font-size: clamp(1.3rem, 1.14rem + 0.34vw, 1.48rem);
    line-height: 0.98;
    letter-spacing: -0.038em;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p {
    max-width: 44ch;
    font-size: 0.72rem;
    line-height: 1.38;
    color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail {
    grid-template-columns: minmax(0, 1.12fr) repeat(3, max-content);
    align-items: center;
    gap: 6px 9px;
    margin-top: 1px;
    padding: 4px 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 26%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active {
    gap: 2px 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border-color: color-mix(in oklch, var(--border-soft) 30%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint {
    max-width: 24ch;
    color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
    font-size: 0.64rem;
    line-height: 1.28;
    opacity: 0.82;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip {
    position: relative;
    align-items: baseline;
    gap: 0;
    margin-top: -1px;
    padding: 2px 0 0 11px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 1px;
    width: 1px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    max-width: 18ch;
    padding: 0 10px 0 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value {
    display: block;
    max-width: 13ch;
    font-size: 0.66rem;
    line-height: 1.2;
    color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-canvas {
    margin-top: -1px;
    gap: 9px;
    padding: 16px 18px 15px;
    border-radius: 17px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading {
    display: grid;
    justify-content: start;
    gap: 3px;
    padding-left: 1px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-count {
    padding: 0;
    min-height: 0;
    border-color: transparent;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 54%, var(--muted-foreground));
    font-size: 0.6875rem;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field textarea {
    min-height: 194px;
    padding: 17px 20px 19px;
    border-radius: 18px;
    border-color: color-mix(in oklch, var(--border-soft) 52%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    padding-top: 10px;
    gap: 10px 14px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field textarea:focus {
    border-color: color-mix(in oklch, var(--accent) 18%, var(--border-soft));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    padding-top: 3px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 32%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(138px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
    min-height: 54px;
    padding: 8px 30px 8px 13px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary::after {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 14px;
    height: 14px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-hint {
    display: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 50%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px 7px;
    min-width: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary-text {
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.6875rem;
    line-height: 1.28;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary-meta {
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 3px 6px;
    min-width: max-content;
    padding-left: 8px;
    border-left: 1px solid color-mix(in oklch, var(--border-soft) 28%, transparent);
  }

  .layout.is-story-focused .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(170px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 8px 16px;
    min-height: 64px;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
  }

  .layout.is-story-focused .story-output-side-card-dossier {
    border: 0;
    border-left: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  }

  .layout.is-story-focused .story-preview-support-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 11px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 64%, transparent);
  }

  .layout.is-story-focused .story-run-rail,
  .layout.is-story-focused .story-results-secondary {
    gap: 6px;
    padding: 11px 12px 12px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-tag {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card.is-active {
    gap: 4px;
    min-height: 0;
    padding-top: 8px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-section-eyebrow {
    display: none;
  }

  .layout.is-story-focused .story-run-rail .story-guidance {
    padding: 8px 0 0;
    border: 0;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 58%, transparent);
  }

  .layout.is-story-focused .story-run-rail.is-error .story-guidance {
  padding: 8px 0 0;
  border: 0;
  border-top: 1px dashed color-mix(in oklch, oklch(0.68 0.1 28) 20%, var(--border-soft));
  }

  .layout.is-story-focused .story-run-rail .story-stat-card {
    gap: 2px;
    padding: 8px 0 9px;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 52%, transparent);
  }

  .layout.is-story-focused .story-run-rail.is-error .story-stat-card {
  gap: 2px;
  padding: 8px 0 9px;
  border: 0;
  border-top: 1px solid color-mix(in oklch, oklch(0.68 0.08 28) 16%, var(--border-soft));
  }

  .layout.is-story-focused .story-run-rail:not(.is-idle) .story-stat-card-title {
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-output-body-card-main {
    gap: 8px;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-latest-output-body {
    min-height: 0;
    padding: 13px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 62%, transparent);
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-section-head p,
  .layout.is-story-focused .story-latest-output-shell.is-ready .story-latest-output-meta {
    display: none;
  }

  .layout.is-story-focused .story-output-summary.is-display-meta {
    max-width: none;
    color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-kicker {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-section-head p {
    display: none;
  }

  .layout.is-story-focused .story-preview-head {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 6px 10px;
  }

  .layout.is-story-focused .story-preview-summary.story-preview-summary-meta {
    max-width: none;
    color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-preview-support-card:not(.story-preview-support-card-assets) {
    display: none;
  }

  .layout.is-story-focused .story-output-main.is-compact .story-output-cue-strip {
    padding-top: 7px;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 62%, transparent);
  }

  .layout.is-story-focused .story-output-cue-pill {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .layout.is-story-focused .story-run-rail .story-stat-label {
    font-size: 0.6875rem;
    line-height: 1.18;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-meta {
    max-width: none;
    padding-top: 6px;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 56%, transparent);
    color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.38;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-kicker {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 48%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.2;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage {
    grid-template-columns: minmax(0, 1.28fr) minmax(220px, 0.72fr);
    gap: 12px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-main {
    gap: 9px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 58%, transparent);
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage {
    grid-template-columns: minmax(0, 1.24fr) minmax(208px, 0.76fr);
    gap: 11px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-cue-strip {
    max-width: 60ch;
    gap: 4px 9px;
    padding-top: 7px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-body-text {
    max-width: 56ch;
    max-height: none;
    overflow: visible;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-side-card-dossier {
    border: 0;
    border-left: 1px solid color-mix(in oklch, oklch(0.68 0.08 28) 14%, var(--border-soft));
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-compact {
    gap: 0;
    max-width: 68ch;
    padding-top: 10px;
  }

  .layout.is-story-focused .story-results-primary .story-preview-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 64%, transparent);
  }

  .layout.is-story-focused .story-output-metrics.is-compact {
    grid-template-columns: repeat(4, max-content);
    align-items: baseline;
    gap: 5px 12px;
  }

  .layout.is-story-focused .story-output-variants-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: visible;
  }

  .layout.is-story-focused .story-output-variant-card {
    gap: 3px;
    padding: 10px 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 54%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-results-primary .story-section-eyebrow {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 0.6875rem;
  line-height: 1.18;
  }

  .layout.is-story-focused .story-output-dossier-label {
    font-size: 0.6875rem;
    line-height: 1.18;
  }

  .story-output-side-card-dossier .story-output-card-tag {
  min-height: 26px;
  padding: 4px 9px;
  font-size: 0.6875rem;
  }

  .story-output-metric span {
  color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.24;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(192px, 0.38fr) minmax(0, 1.62fr);
    gap: 8px;
    padding: 14px 15px 15px;
  }

  .layout.is-story-focused .story-controls-hint {
    padding: 8px 0 0;
    border: 0;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 62%, transparent);
  }

  .layout.is-story-focused .story-segment-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 6px 10px;
    padding-top: 9px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 64%, transparent);
  }

  .layout.is-story-focused .story-segment-index {
  min-height: 24px;
  padding: 4px 9px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  line-height: 1.18;
  }

  .layout.is-story-focused .story-controls-grid .field > span {
  font-size: 0.6875rem;
  line-height: 1.28;
  letter-spacing: 0.12em;
  }

  .layout.is-story-focused .story-controls-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .layout.is-story-focused .story-controls-grid .field:nth-child(3) {
    display: flex;
    grid-column: 1 / -1;
    align-items: baseline;
    gap: 8px;
  }

  .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
  .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 7px;
  }

  .layout.is-story-focused .story-controls-grid .field :is(select, .select-trigger) {
    display: block;
    min-height: 38px;
    padding: 8px 28px 8px 10px;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.28;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-preview-support-card-assets .story-asset-pill {
    min-width: 0;
    max-width: 100%;
    padding: 6px 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-preview-support-card-assets .story-preview-assets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.36fr) minmax(220px, 0.64fr);
    gap: 9px;
  }

  .layout.is-story-focused .story-segment-meta {
    font-size: 0.6875rem;
    line-height: 1.42;
  }

  .layout.is-story-focused .story-segment-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.18;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(124px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 5px 9px;
    min-height: 52px;
    padding: 7px 29px 7px 12px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .layout.is-story-focused .story-compose-shell #storyDirectionTray:not([open]) {
    grid-column: auto;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 4px;
    min-height: 58px;
    padding: 10px 34px 10px 14px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-hint {
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.38;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-title {
    font-size: 0.82rem;
    line-height: 1.08;
    white-space: nowrap;
  }
}

/* 2026-03-16 Pass - desktop sidebar nav full-title true EOF authority */
@media (min-width: 1180px) {
  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav {
    align-items: stretch;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    width: 100%;
    min-width: 0;
    min-height: 88px;
    height: 88px;
    gap: 6px;
    padding: 12px 14px;
    box-sizing: border-box;
    overflow: hidden;
    transform: none;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn:hover,
  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn:focus-visible,
  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn.active {
    transform: none;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    min-height: 24px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav-copy {
    display: grid;
    align-content: start;
    gap: 4px;
    width: 100%;
    min-width: 0;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav-title {
    min-width: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.2;
    text-wrap: pretty;
  }

  .layout[data-active-tab="operator"] .dashboard-body {
    grid-template-columns: minmax(168px, 184px) minmax(0, 1fr);
    gap: 14px;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar {
    gap: 6px;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav {
    gap: 6px;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    width: 100%;
    min-width: 0;
    min-height: 76px;
    height: 76px;
    gap: 4px;
    padding: 10px 10px 10px 14px;
    box-sizing: border-box;
    overflow: hidden;
    transform: none;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn::before {
    top: 10px;
    bottom: 10px;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn:hover,
  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn:focus-visible,
  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn.active {
    transform: none;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    min-height: 18px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav-copy {
    display: grid;
    align-content: start;
    gap: 3px;
    width: 100%;
    min-width: 0;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav-title {
    min-width: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-size: 0.78rem;
    line-height: 1.16;
    text-wrap: pretty;
  }
}

/* 2026-03-16 Pass - desktop sidebar nav full-title EOF authority */
@media (min-width: 1180px) {
  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav {
    align-items: stretch;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    width: 100%;
    min-width: 0;
    min-height: 88px;
    height: 88px;
    gap: 6px;
    padding: 12px 14px;
    box-sizing: border-box;
    overflow: hidden;
    transform: none;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn:hover,
  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn:focus-visible,
  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn.active {
    transform: none;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    min-height: 24px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav-copy {
    display: grid;
    align-content: start;
    gap: 4px;
    width: 100%;
    min-width: 0;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav-title {
    min-width: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.2;
    text-wrap: pretty;
  }

  .layout[data-active-tab="operator"] .dashboard-body {
    grid-template-columns: minmax(168px, 184px) minmax(0, 1fr);
    gap: 14px;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar {
    gap: 6px;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav {
    gap: 6px;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    width: 100%;
    min-width: 0;
    min-height: 76px;
    height: 76px;
    gap: 4px;
    padding: 10px 10px 10px 14px;
    box-sizing: border-box;
    overflow: hidden;
    transform: none;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn::before {
    top: 10px;
    bottom: 10px;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn:hover,
  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn:focus-visible,
  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn.active {
    transform: none;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    min-height: 18px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav-copy {
    display: grid;
    align-content: start;
    gap: 3px;
    width: 100%;
    min-width: 0;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav-title {
    min-width: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-size: 0.78rem;
    line-height: 1.16;
    text-wrap: pretty;
  }
}

/* 2026-03-16 Pass - desktop sidebar nav full-title normalization */
@media (min-width: 1180px) {
  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav {
    align-items: stretch;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn,
  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    justify-items: start;
    align-items: start;
    overflow: hidden;
    transform: none;
    text-align: left;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn {
    grid-template-columns: minmax(0, 1fr);
    min-height: 88px;
    height: 88px;
    gap: 6px;
    padding: 12px 14px;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn:hover,
  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn:focus-visible,
  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav .tab-btn.active,
  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn:hover,
  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn:focus-visible,
  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn.active {
    transform: none;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    min-height: 24px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav-copy,
  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav-copy {
    display: grid;
    align-content: start;
    gap: 4px;
    justify-items: start;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
    text-align: left;
  }

  .dashboard-sidebar:not(.is-story-focused) .dashboard-nav-title,
  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav-title {
    display: block;
    justify-self: stretch;
    align-self: start;
    min-width: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.2;
    text-wrap: pretty;
    text-align: left;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn {
    grid-template-columns: minmax(0, 1fr);
    min-height: 76px;
    height: 76px;
    gap: 4px;
    padding: 10px 10px 10px 14px;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav .tab-btn::before {
    top: 10px;
    bottom: 10px;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    min-height: 18px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar .dashboard-nav-title {
    font-size: 0.78rem;
    line-height: 1.16;
  }
}

/* 2026-03-14: storyteller desktop real eof authority */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head,
  .layout.is-story-focused .story-shell-top .story-compose-head {
    grid-template-columns: minmax(0, 1fr) minmax(228px, 0.32fr);
    gap: 8px 18px;
    align-items: start;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy,
  .layout.is-story-focused .story-shell-top .story-compose-copy {
    gap: 4px;
    align-content: start;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3,
  .layout.is-story-focused .story-shell-top .story-compose-copy h3 {
    width: max-content;
    max-width: none;
    font-size: clamp(1.5rem, 1.34rem + 0.2vw, 1.68rem);
    line-height: 1.02;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p,
  .layout.is-story-focused .story-shell-top .story-compose-copy p {
    width: max-content;
    max-width: none;
    font-size: 0.71875rem;
    line-height: 1.5;
    white-space: nowrap;
  }

  .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) > summary {
    grid-template-columns: minmax(0, 1fr);
    min-height: 112px;
    gap: 9px;
    padding: 14px 48px 14px 18px;
  }

  .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;
  }

  .layout.is-story-focused :is(#storyCraftTray, #storyMediaTray, #storyDirectionTray):not([open]) .story-tray-summary-text {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-box-orient: initial;
    -webkit-line-clamp: 1;
  }

  .layout.is-story-focused #storyResultsGrid.story-results-grid {
    grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.56fr);
    gap: 14px;
  }

  .layout.is-story-focused #storyLatestOutput.story-latest-output-shell .story-output-stage {
    grid-template-columns: minmax(0, 1.04fr) minmax(332px, 0.96fr);
    gap: 16px;
  }

  .layout.is-story-focused #storyLatestOutput .story-output-dossier-title {
    white-space: nowrap;
  }

  .layout.is-story-focused #storyLatestOutput .story-output-dossier-note {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .layout.is-story-focused #storyResultsSecondary.story-results-secondary {
    padding: 12px 14px 14px;
  }

  .layout.is-story-focused #storyResultsSecondary .story-atlas-head p,
  .layout.is-story-focused #storyResultsSecondary .story-atlas-meta {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .layout.is-story-focused #storyBottomGrid.story-bottom-grid {
    grid-template-columns: minmax(228px, 0.31fr) minmax(0, 1.69fr);
    gap: 10px;
  }
}
/* 2026-03-13: storyteller desktop cascade lock */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint,
  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value {
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card {
    max-width: none !important;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 4px 8px !important;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text {
    flex: 1 1 19ch !important;
    min-width: 12ch !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint,
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title {
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.66fr) minmax(272px, 0.34fr) !important;
    gap: 12px !important;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-head h3,
  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p,
  .layout.is-story-focused .story-output-dossier-note,
  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-title,
  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage,
  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage {
    grid-template-columns: minmax(0, 1.58fr) minmax(284px, 0.42fr) !important;
    gap: 18px !important;
  }

  .layout.is-story-focused .story-controls-grid .field :is(select, .select-trigger) {
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* 2026-03-13 Pass — quieter desktop story runtime rail and storyboard shelf (tail cascade) */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-run-rail {
    gap: 7px;
    padding: 13px 14px 12px;
    border-radius: 18px;
  }

  .layout.is-story-focused .story-run-rail .story-head-grid {
    gap: 0 10px;
  }

  .layout.is-story-focused .story-run-rail .story-stat-card,
  .layout.is-story-focused .story-run-rail .story-stat-card-title,
  .layout.is-story-focused .story-run-rail:not(.is-idle) .story-stat-card-title {
    gap: 2px;
    padding: 7px 0 8px;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 54%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-run-rail .story-stat-card-title {
    padding-top: 0;
    border-top: 0;
  }

  .layout.is-story-focused .story-run-rail.is-error .story-stat-card,
  .layout.is-story-focused .story-run-rail.is-error .story-stat-card-title,
  .layout.is-story-focused .story-run-rail.is-error:not(.is-idle) .story-stat-card-title {
    border-top-color: color-mix(in oklch, oklch(0.68 0.08 28) 16%, var(--border-soft));
  }

  .layout.is-story-focused .story-run-rail .story-stat-card:not(.story-stat-card-state) .story-stat-note {
    display: none;
  }

  .layout.is-story-focused .story-run-rail .story-stat-value {
    font-size: 0.94rem;
    line-height: 1.2;
  }

  .layout.is-story-focused .story-run-rail .story-status-row-summary {
    gap: 4px;
  }

  .layout.is-story-focused .story-run-rail .story-status-row-summary .status-pill {
    min-height: 20px;
    padding: 2px 7px;
    font-size: 0.66rem;
  }

  .layout.is-story-focused .story-run-rail .story-guidance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 5px 10px;
    padding: 8px 0 0;
    border: 0;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 56%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-run-rail.is-error .story-guidance {
    border-top-color: color-mix(in oklch, oklch(0.68 0.1 28) 20%, var(--border-soft));
  }

  .layout.is-story-focused .story-run-rail .story-guidance-copy {
    gap: 2px;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-title {
    font-size: 0.76rem;
    line-height: 1.22;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-hint {
    max-width: 26ch;
    font-size: 0.68rem;
    line-height: 1.34;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-actions {
    gap: 5px;
    align-items: center;
  }

  .layout.is-story-focused .story-run-rail #storyTimelineGuideTemplateBtn {
    display: inline-flex;
    min-width: 0;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.7rem;
  }

  .layout.is-story-focused .story-run-rail.is-ready #storyTimelineGuideTemplateBtn {
    display: none;
  }

  .layout.is-story-focused .story-run-rail #storyTimelineGuideOpenLiveBtn {
    min-height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.68rem;
  }

  .layout.is-story-focused .story-controls-hint {
    padding: 7px 0 0;
    border: 0;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 58%, transparent);
    border-radius: 0;
    background: transparent;
    font-size: 0.68rem;
    line-height: 1.36;
  }

  .layout.is-story-focused .story-scenes-shell {
    gap: 7px;
  }

  .layout.is-story-focused .story-scenes-shell .story-list-head {
    padding-bottom: 8px;
  }

  .layout.is-story-focused .story-scenes-shell .story-list-head-summary {
    max-width: 34ch;
    font-size: 0.72rem;
    line-height: 1.34;
  }

  .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
  .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
    gap: 7px;
  }

  .layout.is-story-focused .story-segment-card {
    flex: 0 0 clamp(198px, 15.6vw, 214px);
    min-height: 150px;
    gap: 5px;
    padding: 10px 11px 9px;
    border-radius: 18px;
  }

  .layout.is-story-focused .story-segment-card.is-selected {
    flex-basis: clamp(216px, 16.8vw, 236px);
    min-height: 156px;
  }

  .layout.is-story-focused .story-segment-head {
    gap: 6px;
    align-items: start;
  }

  .layout.is-story-focused .story-segment-index,
  .layout.is-story-focused .story-segment-state {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.66rem;
  }

  .layout.is-story-focused .story-segment-title {
    font-size: 0.82rem;
    line-height: 1.12;
    min-height: calc(2 * 1.12em);
  }

  .layout.is-story-focused .story-segment-text {
    -webkit-line-clamp: 2;
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .layout.is-story-focused .story-segment-cues {
    gap: 4px;
  }

  .layout.is-story-focused .story-segment-cue:nth-child(n + 2) {
    display: none;
  }

  .layout.is-story-focused .story-segment-cue {
    min-height: 20px;
    padding: 3px 7px;
    font-size: 0.64rem;
  }

  .layout.is-story-focused .story-segment-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    padding-top: 7px;
  }

  .layout.is-story-focused .story-segment-meta {
    max-width: 14ch;
    overflow: hidden;
    font-size: 0.66rem;
    line-height: 1.32;
    white-space: nowrap;
    text-align: right;
    text-overflow: ellipsis;
  }
}
/* 2026-03-13: storyteller desktop final one-line and honest-wrap cleanup pass */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-compose-shell .story-tray > summary {
    list-style: none;
  }

  .layout.is-story-focused .story-compose-shell .story-tray > summary::-webkit-details-marker {
    display: none;
  }

  .layout.is-story-focused .story-compose-shell .story-tray > summary::marker {
    content: "";
    font-size: 0;
  }

  .layout.is-story-focused .panel-story-studio > h2 {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .layout.is-story-focused .panel-story-studio > h2 > span:last-child,
  .layout.is-story-focused .panel-story-studio .story-intro,
  .layout.is-story-focused #storyComposeHeading,
  .layout.is-story-focused #storyComposeIntro,
  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-title,
  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint,
  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-title,
  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-hint {
    max-width: none;
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
  }

  .layout.is-story-focused .panel-story-studio .story-intro {
    font-size: 0.75rem;
    line-height: 1.46;
  }

  .layout.is-story-focused #storyComposeHeading {
    font-size: clamp(1.88rem, 1.75vw, 2.18rem);
    line-height: 1.02;
  }

  .layout.is-story-focused #storyComposeIntro {
    font-size: 0.76rem;
    line-height: 1.46;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active {
    gap: 3px 10px;
    padding: 10px 12px 9px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-title {
    font-size: 0.9rem;
    line-height: 1.06;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint {
    font-size: 0.6875rem;
    line-height: 1.34;
    color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip {
    gap: 0 10px;
    padding: 2px 0 0 10px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card {
    gap: 3px;
    max-width: none;
    min-width: 0;
    padding-right: 10px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value {
    max-width: none;
    overflow: visible;
    font-size: 0.6875rem;
    line-height: 1.36;
    white-space: nowrap;
    text-overflow: clip;
  }

  .layout.is-story-focused .story-compose-shell .story-tray-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary,
  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(146px, max-content) minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: 6px 11px;
    min-height: 60px;
    padding: 9px 36px 9px 14px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray > summary::after {
    content: "";
    box-sizing: border-box;
    border-right: 1.5px solid color-mix(in oklch, var(--foreground) 72%, transparent);
    border-bottom: 1.5px solid color-mix(in oklch, var(--foreground) 72%, transparent);
    border-radius: 1px;
    opacity: 0.76;
    pointer-events: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary::after,
  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) > summary::after {
    top: 50%;
    right: 13px;
    width: 10px;
    height: 10px;
    transform: translateY(-58%) rotate(45deg);
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-copy {
    gap: 3px;
    min-width: 0;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-title {
    font-size: 0.84rem;
    line-height: 1.1;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-hint {
    font-size: 0.6875rem;
    line-height: 1.42;
    color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px 8px;
    min-width: 0;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary-text {
    flex: 1 1 19ch;
    min-width: 12ch;
    max-width: none;
    display: block;
    overflow: visible;
    font-size: 0.75rem;
    line-height: 1.46;
    white-space: normal;
    text-overflow: clip;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 4px 6px;
    min-width: max-content;
    padding-left: 10px;
    border-left: 1px solid color-mix(in oklch, var(--border-soft) 28%, transparent);
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag {
    min-height: 23px;
    padding: 4px 9px;
    font-size: 0.6875rem;
    line-height: 1.18;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.66fr) minmax(272px, 0.34fr);
    align-items: start;
    gap: 12px;
  }

  .layout.is-story-focused .story-results-secondary {
    gap: 6px;
    padding: 11px 12px 13px;
  }

  .layout.is-story-focused .story-atlas-tab-label,
  .layout.is-story-focused .story-results-secondary .story-atlas-head h3 {
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p,
  .layout.is-story-focused .story-output-dossier-note,
  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-title,
  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.46;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage,
  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage {
    grid-template-columns: minmax(0, 1.58fr) minmax(284px, 0.42fr);
    gap: 18px;
  }

  .layout.is-story-focused .story-output-dossier-section {
    gap: 7px;
    padding: 10px 0 10px 14px;
  }

  .layout.is-story-focused .story-output-dossier-note {
    display: block;
    font-size: 0.75rem;
    line-height: 1.54;
  }

  .layout.is-story-focused .story-output-metrics.is-compact {
    gap: 6px 14px;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta {
    line-height: 1.52;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(248px, 0.34fr) minmax(0, 1.66fr);
    align-items: start;
    gap: 12px;
    padding: 14px 15px 15px;
  }

  .layout.is-story-focused .story-controls-grid {
    grid-template-columns: minmax(0, 1fr) 108px;
    gap: 8px 10px;
  }

  .layout.is-story-focused .story-controls-grid .field :is(select, .select-trigger) {
    padding: 8px 31px 8px 10px;
    overflow: visible;
    font-size: 0.75rem;
    line-height: 1.34;
    text-overflow: clip;
  }

  .layout.is-story-focused .story-controls-grid .select-trigger::after {
    top: 50%;
    right: 11px;
    width: 8px;
    height: 8px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
    opacity: 0.76;
    transform: translateY(-58%) rotate(45deg);
  }

  .layout.is-story-focused .story-controls-hint {
    font-size: 0.6875rem;
    line-height: 1.46;
    white-space: normal;
  }

  .layout.is-story-focused .story-scenes-shell {
    gap: 9px;
    padding-left: 8px;
  }

  .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
  .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
    gap: 9px;
  }

  .layout.is-story-focused .story-segment-card,
  .layout.is-story-focused .story-segment-card.is-selected {
    min-height: 198px;
  }

  .layout.is-story-focused .story-segment-title {
    font-size: 0.875rem;
    line-height: 1.18;
  }
}

/* 2026-03-13 Pass — quieter desktop story runtime rail and storyboard shelf */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-run-rail {
    gap: 7px;
    padding: 13px 14px 12px;
    border-radius: 18px;
  }

  .layout.is-story-focused .story-run-rail .story-head-grid {
    gap: 0 10px;
  }

  .layout.is-story-focused .story-run-rail .story-stat-card,
  .layout.is-story-focused .story-run-rail .story-stat-card-title,
  .layout.is-story-focused .story-run-rail:not(.is-idle) .story-stat-card-title {
    gap: 2px;
    padding: 7px 0 8px;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 54%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-run-rail .story-stat-card-title {
    padding-top: 0;
    border-top: 0;
  }

  .layout.is-story-focused .story-run-rail.is-error .story-stat-card,
  .layout.is-story-focused .story-run-rail.is-error .story-stat-card-title,
  .layout.is-story-focused .story-run-rail.is-error:not(.is-idle) .story-stat-card-title {
    border-top-color: color-mix(in oklch, oklch(0.68 0.08 28) 16%, var(--border-soft));
  }

  .layout.is-story-focused .story-run-rail .story-stat-card:not(.story-stat-card-state) .story-stat-note {
    display: none;
  }

  .layout.is-story-focused .story-run-rail .story-stat-value {
    font-size: 0.94rem;
    line-height: 1.2;
  }

  .layout.is-story-focused .story-run-rail .story-status-row-summary {
    gap: 4px;
  }

  .layout.is-story-focused .story-run-rail .story-status-row-summary .status-pill {
    min-height: 20px;
    padding: 2px 7px;
    font-size: 0.66rem;
  }

  .layout.is-story-focused .story-run-rail .story-guidance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 5px 10px;
    padding: 8px 0 0;
    border: 0;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 56%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-run-rail.is-error .story-guidance {
    border-top-color: color-mix(in oklch, oklch(0.68 0.1 28) 20%, var(--border-soft));
  }

  .layout.is-story-focused .story-run-rail .story-guidance-copy {
    gap: 2px;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-title {
    font-size: 0.76rem;
    line-height: 1.22;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-hint {
    max-width: 26ch;
    font-size: 0.68rem;
    line-height: 1.34;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-actions {
    gap: 5px;
    align-items: center;
  }

  .layout.is-story-focused .story-run-rail #storyTimelineGuideTemplateBtn {
    display: inline-flex;
    min-width: 0;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.7rem;
  }

  .layout.is-story-focused .story-run-rail.is-ready #storyTimelineGuideTemplateBtn {
    display: none;
  }

  .layout.is-story-focused .story-run-rail #storyTimelineGuideOpenLiveBtn {
    min-height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.68rem;
  }

  .layout.is-story-focused .story-controls-hint {
    padding: 7px 0 0;
    border: 0;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 58%, transparent);
    border-radius: 0;
    background: transparent;
    font-size: 0.68rem;
    line-height: 1.36;
  }

  .layout.is-story-focused .story-scenes-shell {
    gap: 7px;
  }

  .layout.is-story-focused .story-scenes-shell .story-list-head {
    padding-bottom: 8px;
  }

  .layout.is-story-focused .story-scenes-shell .story-list-head-summary {
    max-width: 34ch;
    font-size: 0.72rem;
    line-height: 1.34;
  }

  .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
  .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
    gap: 7px;
  }

  .layout.is-story-focused .story-segment-card {
    flex: 0 0 clamp(198px, 15.6vw, 214px);
    min-height: 150px;
    gap: 5px;
    padding: 10px 11px 9px;
    border-radius: 18px;
  }

  .layout.is-story-focused .story-segment-card.is-selected {
    flex-basis: clamp(216px, 16.8vw, 236px);
    min-height: 156px;
  }

  .layout.is-story-focused .story-segment-head {
    gap: 6px;
    align-items: start;
  }

  .layout.is-story-focused .story-segment-index,
  .layout.is-story-focused .story-segment-state {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.66rem;
  }

  .layout.is-story-focused .story-segment-title {
    font-size: 0.82rem;
    line-height: 1.12;
    min-height: calc(2 * 1.12em);
  }

  .layout.is-story-focused .story-segment-text {
    -webkit-line-clamp: 2;
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .layout.is-story-focused .story-segment-cues {
    gap: 4px;
  }

  .layout.is-story-focused .story-segment-cue:nth-child(n + 2) {
    display: none;
  }

  .layout.is-story-focused .story-segment-cue {
    min-height: 20px;
    padding: 3px 7px;
    font-size: 0.64rem;
  }

  .layout.is-story-focused .story-segment-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    padding-top: 7px;
  }

  .layout.is-story-focused .story-segment-meta {
    max-width: 14ch;
    overflow: hidden;
    font-size: 0.66rem;
    line-height: 1.32;
    white-space: nowrap;
    text-align: right;
    text-overflow: ellipsis;
  }
}

/* 2026-03-13: storyteller desktop RU readability and honest wrapping pass */
@media (min-width: 1180px) {
  .layout.is-story-focused .panel-story-studio > h2 {
    gap: 12px;
    margin-bottom: 6px;
  }

  .layout.is-story-focused .panel-story-studio > h2 span:last-child {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-intro {
    max-width: none;
    margin-top: -4px;
    padding-left: 46px;
    font-size: 0.72rem;
    line-height: 1.48;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-compose-head {
    grid-template-columns: minmax(0, 1fr) minmax(176px, 0.34fr);
    gap: 11px 18px;
  }

  .layout.is-story-focused .story-compose-copy {
    gap: 5px;
  }

  .layout.is-story-focused .story-compose-copy h3 {
    max-width: none;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-compose-copy p {
    max-width: none;
    display: block;
    overflow: visible;
    font-size: 0.75rem;
    line-height: 1.52;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-compose-status {
    max-width: 18ch;
    gap: 5px 8px;
  }

  .layout.is-story-focused .story-compose-status p {
    max-width: none;
    font-size: 0.69rem;
    line-height: 1.4;
  }

  .layout.is-story-focused .story-mode-card .story-mode-title {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint {
    max-width: none;
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value {
    max-width: 18ch;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-compose-shell .story-tray-grid {
    gap: 9px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) > summary {
    min-height: 60px;
    padding: 11px 38px 11px 16px;
    gap: 4px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) > summary::after {
    right: 14px;
    width: 12px;
    height: 12px;
    opacity: 0.82;
    border-color: color-mix(in oklch, var(--foreground) 76%, transparent);
    transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) > summary:hover::after {
    opacity: 1;
    border-color: color-mix(in oklch, var(--primary) 76%, white);
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-copy {
    gap: 2px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-title {
    font-size: 0.84rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-hint {
    overflow: visible;
    font-size: 0.6875rem;
    line-height: 1.44;
    white-space: nowrap;
    text-overflow: clip;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary {
    gap: 6px 9px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary-text {
    font-size: 0.79rem;
    line-height: 1.3;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.46fr) minmax(292px, 0.54fr);
    gap: 12px;
  }

  .layout.is-story-focused .story-results-secondary {
    gap: 7px;
    padding: 12px 13px 13px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card {
    gap: 3px;
    padding-top: 9px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-head h3 {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.5;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding-top: 6px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage,
  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage {
    grid-template-columns: minmax(0, 1.24fr) minmax(284px, 0.76fr);
    gap: 18px;
  }

  .layout.is-story-focused .story-output-dossier-section {
    gap: 6px;
    padding: 10px 0 10px 14px;
  }

  .layout.is-story-focused .story-output-dossier-title {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-output-dossier-note {
    display: -webkit-box;
    max-width: none;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.75rem;
    line-height: 1.52;
  }

  .layout.is-story-focused .story-output-metrics.is-compact {
    grid-template-columns: repeat(2, minmax(0, max-content));
    align-items: start;
    gap: 7px 14px;
  }

  .layout.is-story-focused .story-output-body-card-error {
    gap: 8px;
  }

  .layout.is-story-focused .story-output-body-footnote {
    margin: 0;
    max-width: 64ch;
    color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
    font-size: 0.72rem;
    line-height: 1.5;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.52;
  }
}

/* 2026-03-13: storyteller desktop scenario rail quiet pass (tail cascade) */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail {
    gap: 6px 9px;
    padding: 4px 0;
    border-top-color: color-mix(in oklch, var(--border-soft) 26%, transparent);
    border-bottom-color: color-mix(in oklch, var(--border-soft) 28%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) {
    min-height: 0;
    padding: 0 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0.58;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active):hover {
    border: 0;
    background: transparent;
    opacity: 0.82;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) .story-mode-title {
    font-size: 0.68rem;
    line-height: 1.16;
    color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active {
    gap: 2px 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border-color: color-mix(in oklch, var(--border-soft) 30%, transparent);
    background: color-mix(in oklch, var(--surface-control) 12%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-title {
    font-size: 0.82rem;
    line-height: 1.04;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint {
    max-width: 24ch;
    font-size: 0.64rem;
    line-height: 1.28;
    opacity: 0.82;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip {
    gap: 0;
    padding: 2px 0 0 11px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card {
    gap: 3px;
    max-width: 18ch;
    padding: 0 10px 0 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-label {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    color: color-mix(in oklch, var(--foreground) 28%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value {
    max-width: 13ch;
    font-size: 0.66rem;
    line-height: 1.2;
    color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
  }
}

/* 2026-03-13: storyteller desktop tray editor readability pass */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) {
    grid-column: span 1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    min-height: 88px;
    padding: 14px 40px 14px 16px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) > summary::after {
    top: 21px;
    right: 14px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-copy {
    gap: 4px;
    min-width: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-title {
    font-size: 0.88rem;
    line-height: 1.12;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-hint {
    display: block;
    max-width: none;
    font-size: 0.72rem;
    line-height: 1.42;
    color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px 10px;
    padding-right: 0;
    text-align: left;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-text {
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.73rem;
    line-height: 1.42;
    white-space: normal;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px;
    min-width: 0;
    padding-left: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag {
    min-height: 20px;
    padding: 2px 8px;
    border-color: color-mix(in oklch, var(--border-soft) 44%, transparent);
    background: color-mix(in oklch, var(--surface-control) 48%, transparent);
    font-size: 0.66rem;
    line-height: 1.18;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] {
    grid-column: 1 / -1;
    border-radius: 20px;
    border-color: color-mix(in oklch, var(--primary) 18%, var(--border-soft));
    background:
      radial-gradient(320px 132px at 0% 0%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 76%),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 38%, transparent),
        color-mix(in oklch, var(--surface-panel) 94%, transparent)
      );
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
      0 18px 28px -34px color-mix(in oklch, var(--primary) 36%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] > summary {
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
    align-items: start;
    gap: 10px 20px;
    padding: 18px 22px 14px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] > summary::after {
    top: 24px;
    right: 22px;
    width: 12px;
    height: 12px;
    transform: rotate(225deg);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-copy {
    gap: 5px;
    min-width: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-title {
    font-size: 0.98rem;
    line-height: 1.14;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-hint {
    display: block;
    max-width: 34ch;
    font-size: 0.76rem;
    line-height: 1.48;
    color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    justify-items: start;
    gap: 8px 12px;
    padding-right: 34px;
    text-align: left;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-summary-text {
    max-width: none;
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.78rem;
    line-height: 1.48;
    white-space: normal;
    color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-summary-meta {
    justify-content: flex-start;
    gap: 6px;
    padding-left: 0;
    border-left: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-summary-meta .story-atlas-tag {
    min-height: 22px;
    padding: 3px 9px;
    border-color: color-mix(in oklch, var(--border-soft) 46%, transparent);
    background: color-mix(in oklch, var(--surface-control) 44%, transparent);
    font-size: 0.68rem;
    line-height: 1.18;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-body {
    gap: 16px 18px;
    padding: 16px 22px 22px;
    border-top-color: color-mix(in oklch, var(--border-soft) 48%, transparent);
    align-items: start;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyCraftTray[open] .story-tray-body,
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyMediaTray[open] .story-tray-body {
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] {
    grid-column: 1 / -1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] .story-tray-body {
    grid-template-columns: minmax(260px, 0.44fr) minmax(0, 1fr);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section,
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-note-card {
    gap: 12px;
    padding: 18px 18px 17px;
    border-radius: 18px;
    border-color: color-mix(in oklch, var(--border-soft) 56%, transparent);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 42%, transparent),
        color-mix(in oklch, var(--surface-panel) 88%, transparent)
      );
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section-head {
    gap: 7px;
    padding-bottom: 12px;
    border-bottom-color: color-mix(in oklch, var(--border-soft) 40%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section-copy {
    max-width: 44ch;
    font-size: 0.78rem;
    line-height: 1.54;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section-grid-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .story-tray-section-compact {
    max-width: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .field {
    min-width: 0;
    gap: 8px;
    align-content: start;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] .field > span {
    font-size: 0.79rem;
    line-height: 1.38;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 16px;
    border-color: color-mix(in oklch, var(--border-soft) 56%, transparent);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 56%, transparent),
        color-mix(in oklch, var(--surface-panel) 92%, transparent)
      );
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell .story-tray[open] :is(input, select) {
    min-height: 50px;
    padding: 12px 14px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell #storyDirectionTray[open] textarea {
    min-height: 214px;
    padding: 18px 18px 20px;
    line-height: 1.64;
  }
}

/* 2026-03-13: storyteller desktop scenario rail quiet pass */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail {
    gap: 6px 9px;
    padding: 4px 0;
    border-top-color: color-mix(in oklch, var(--border-soft) 26%, transparent);
    border-bottom-color: color-mix(in oklch, var(--border-soft) 28%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) {
    min-height: 0;
    padding: 0 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0.58;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active):hover {
    border: 0;
    background: transparent;
    opacity: 0.82;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) .story-mode-title {
    font-size: 0.68rem;
    line-height: 1.16;
    color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active {
    gap: 2px 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border-color: color-mix(in oklch, var(--border-soft) 30%, transparent);
    background: color-mix(in oklch, var(--surface-control) 12%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-title {
    font-size: 0.82rem;
    line-height: 1.04;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint {
    max-width: 24ch;
    font-size: 0.64rem;
    line-height: 1.28;
    opacity: 0.82;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip {
    gap: 0;
    padding: 2px 0 0 11px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card {
    gap: 3px;
    max-width: 18ch;
    padding: 0 10px 0 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-label {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    color: color-mix(in oklch, var(--foreground) 28%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value {
    max-width: 13ch;
    font-size: 0.66rem;
    line-height: 1.2;
    color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
  }
}

:root[data-theme="light"] {
  /* Violet Bloom (light) */
  color-scheme: light;
  --background: oklch(0.9940 0 0);
  --foreground: oklch(0 0 0);
  --card: oklch(0.9940 0 0);
  --card-foreground: oklch(0 0 0);
  --popover: oklch(0.9911 0 0);
  --popover-foreground: oklch(0 0 0);
  --primary: oklch(0.5393 0.2713 286.7462);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9540 0.0063 255.4755);
  --secondary-foreground: oklch(0.1344 0 0);
  --muted-ui: oklch(0.9702 0 0);
  --muted-foreground: oklch(0.4386 0 0);
  --accent-ui: oklch(0.9393 0.0288 266.3680);
  --accent-foreground: oklch(0.5445 0.1903 259.4848);
  --destructive: oklch(0.6290 0.1902 23.0704);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9300 0.0094 286.2156);
  --input: oklch(0.9401 0 0);
  --ring: oklch(0 0 0);
  --chart-1: oklch(0.7459 0.1483 156.4499);
  --chart-2: oklch(0.5393 0.2713 286.7462);
  --chart-3: oklch(0.7336 0.1758 50.5517);
  --chart-4: oklch(0.5828 0.1809 259.7276);
  --chart-5: oklch(0.5590 0 0);

  --bg-0: var(--background);
  --bg-1: color-mix(in oklch, var(--card) 90%, var(--secondary));
  --bg-2: color-mix(in oklch, var(--secondary) 76%, var(--accent-ui));
  --text: var(--foreground);
  --muted: var(--muted-foreground);
  --accent: var(--accent-foreground);
  --accent-2: var(--primary);
  --warn: var(--destructive);
  --ok: var(--chart-1);
  --heading: var(--foreground);
  --heading-soft: color-mix(in oklch, var(--foreground) 86%, var(--accent-foreground));
  --status-neutral-fg: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
  --status-ok-fg: color-mix(in oklch, var(--chart-1) 64%, black);
  --status-fail-fg: color-mix(in oklch, var(--destructive) 66%, black);
  --button-primary-fg: var(--primary-foreground);
  --button-muted-fg: var(--secondary-foreground);
  --button-warn-fg: var(--destructive-foreground);
  --surface-glass: color-mix(in oklch, var(--background) 92%, transparent);
  --surface-popover: color-mix(in oklch, var(--popover) 94%, transparent);
  --surface-input: color-mix(in oklch, var(--input) 92%, transparent);
  --surface-muted: color-mix(in oklch, var(--secondary) 96%, transparent);
  --surface-card-strong: color-mix(in oklch, var(--card) 96%, transparent);
  --border-soft: color-mix(in oklch, var(--border) 82%, transparent);
  --primary-soft: color-mix(in oklch, var(--primary) 16%, transparent);
  --accent-soft: color-mix(in oklch, var(--accent-foreground) 14%, transparent);
  --ok-soft: color-mix(in oklch, var(--chart-1) 16%, transparent);
  --warn-soft: color-mix(in oklch, var(--destructive) 14%, transparent);
  --danger-soft: color-mix(in oklch, var(--destructive) 18%, transparent);
  --shadow-ui: var(--shadow-sm);
  --surface-panel: color-mix(in oklch, var(--card) 96%, white);
  --surface-panel-2: color-mix(in oklch, var(--secondary) 74%, white);
  --surface-control: color-mix(in oklch, var(--input) 94%, white);
  --surface-control-hover: color-mix(in oklch, var(--input) 84%, white);
  --surface-control-strong: color-mix(in oklch, var(--secondary) 84%, white);
  --focus-ring-soft: color-mix(in oklch, var(--ring) 16%, transparent);
  --bg-video-opacity: 0.06;
  --bg-video-transition-opacity: 0.006;
  --bg-canvas: #0e0f11;
  --bg-video-seam-color: #0e0f11;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--primary) 34%, var(--border)) color-mix(in oklch, var(--surface-panel-2) 92%, transparent);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: color-mix(in oklch, var(--surface-panel-2) 92%, transparent);
}

*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border) 64%, transparent);
  background:
    radial-gradient(140px 48px at 0% -20%, color-mix(in oklch, var(--primary) 22%, transparent), transparent 74%),
    color-mix(in oklch, var(--secondary) 88%, var(--surface-control));
}

*::-webkit-scrollbar-thumb:hover {
  background:
    radial-gradient(140px 48px at 0% -20%, color-mix(in oklch, var(--primary) 28%, transparent), transparent 74%),
    color-mix(in oklch, var(--secondary) 84%, var(--surface-control-hover));
}

.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;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--foreground);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-normal);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(
      1200px 700px at 8% -18%,
      color-mix(in oklch, var(--primary) 8%, transparent),
      transparent 70%
    ),
    radial-gradient(
      1000px 660px at 94% -12%,
      color-mix(in oklch, var(--accent-foreground) 6%, transparent),
      transparent 68%
    ),
    linear-gradient(
      165deg,
      var(--bg-canvas),
      color-mix(in srgb, var(--bg-canvas) 90%, var(--bg-1)) 56%,
      color-mix(in srgb, var(--bg-canvas) 84%, var(--bg-1))
    );
  background-color: var(--bg-canvas);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      color-mix(in oklch, var(--border) 18%, transparent),
      color-mix(in oklch, var(--border) 18%, transparent) 1px,
      transparent 1px,
      transparent 42px
    ),
    repeating-linear-gradient(
      90deg,
      color-mix(in oklch, var(--border) 10%, transparent),
      color-mix(in oklch, var(--border) 10%, transparent) 1px,
      transparent 1px,
      transparent 42px
    );
  opacity: 0.24;
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      560px 250px at 8% -8%,
      color-mix(in oklch, var(--primary) 24%, transparent),
      transparent 72%
    ),
    radial-gradient(
      620px 280px at 94% -10%,
      color-mix(in oklch, var(--accent-foreground) 21%, transparent),
      transparent 74%
    );
  opacity: 0.72;
  z-index: -1;
}

.background-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -3;
  pointer-events: none;
  opacity: var(--bg-video-opacity);
  filter: saturate(0.84) contrast(1.03);
  will-change: opacity, filter;
  transition:
    opacity 680ms ease-in-out,
    filter 680ms ease-in-out;
}

.background-video-fade {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-video-seam-color) 78%, transparent),
    color-mix(in srgb, var(--bg-video-seam-color) 96%, transparent)
  );
  transition: opacity 680ms ease-in-out;
}

body.bg-video-loop-transition .background-video {
  opacity: var(--bg-video-transition-opacity);
  filter: blur(0.2px) saturate(0.82) contrast(1.02);
}

body.bg-video-loop-transition .background-video-fade {
  opacity: 0.22;
}

.layout {
  width: min(1420px, calc(100vw - 72px));
  margin: 34px auto 84px;
  display: grid;
  gap: 32px;
  overflow-x: hidden;
}

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-panel), var(--surface-panel-2));
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) + 2px);
  padding: 24px;
  backdrop-filter: blur(10px);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: -138px;
  width: 520px;
  height: 280px;
  opacity: 0.56;
  z-index: 0;
}

.hero::before {
  left: -140px;
  background: radial-gradient(
    circle at center,
    color-mix(in oklch, var(--primary) 26%, transparent),
    transparent 72%
  );
}

.hero::after {
  right: -160px;
  background: radial-gradient(
    circle at center,
    color-mix(in oklch, var(--accent-foreground) 24%, transparent),
    transparent 74%
  );
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin: 0 0 12px;
  font-size: clamp(1.42rem, 2.15vw, 1.9rem);
  font-weight: 760;
  letter-spacing: -0.035em;
  font-family: var(--font-sans);
}

.hero-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hero-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-language-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background:
    radial-gradient(160px 60px at 0% -30%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    var(--surface-glass);
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.1;
}

.hero-language-select {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid color-mix(in oklch, var(--accent-foreground) 42%, var(--border));
  border-radius: 999px;
  background: var(--surface-control);
  color: var(--foreground);
  font: inherit;
  cursor: pointer;
}

.hero-language-select:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--ring) 52%, var(--border));
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.hero-sub {
  margin: 0;
  color: var(--muted-foreground);
  max-width: 64ch;
  font-size: 0.94rem;
  line-height: 1.5;
}

.hero-legacy-note {
  margin: 2px 0 0;
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  max-width: 72ch;
  font-size: 0.78rem;
  line-height: 1.45;
}

.hero-open-app-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 11px 20px;
  border: 1px solid color-mix(in oklch, var(--accent-foreground) 52%, var(--border));
  border-radius: 999px;
  text-decoration: none;
  transition: transform 140ms ease, filter 140ms ease, background 140ms ease, border-color 140ms ease;
}

.hero-open-app-link:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 0 0 3px var(--focus-ring-soft);
}

.dashboard-workspace-summary {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) + 8px);
  background:
    radial-gradient(300px 108px at 0% -10%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 96%, transparent), var(--surface-panel-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-sm);
  display: grid;
  gap: 10px;
}

.dashboard-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dashboard-workspace-eyebrow {
  margin: 0 0 6px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--primary) 62%, var(--muted-foreground));
}

.dashboard-workspace-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.98rem, 1.02vw, 1.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.dashboard-workspace-description {
  margin: 3px 0 0;
  max-width: 46ch;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.42;
}

.dashboard-command-grid,
.dashboard-glance-grid {
  gap: 7px;
  margin-top: 0;
}

.dashboard-command-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-glance-grid {
  display: flex;
  flex-wrap: wrap;
}

.dashboard-command-card,
.dashboard-glance-card {
  position: relative;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), var(--surface-panel-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-xs);
}

.dashboard-command-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.dashboard-command-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--primary) 38%, var(--border));
  background:
    radial-gradient(180px 84px at 0% -8%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 80%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 96%, transparent), var(--surface-panel-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    var(--shadow-sm);
}

.dashboard-command-card:focus-visible,
.dashboard-quick-button:focus-visible,
.dashboard-nav .tab-btn:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--ring) 56%, var(--border));
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.dashboard-command-label,
.dashboard-glance-label,
.dashboard-sidebar-label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground) 88%, white);
}

.dashboard-command-title,
.dashboard-glance-value {
  color: color-mix(in oklch, var(--foreground) 98%, white);
}

.dashboard-command-title {
  font-size: 0.9rem;
  line-height: 1.2;
}

.dashboard-command-hint,
.dashboard-glance-hint,
.dashboard-sidebar-note-copy,
.dashboard-nav-hint {
  color: var(--muted-foreground);
  line-height: 1.55;
}

.dashboard-command-hint,
.dashboard-glance-hint {
  font-size: 0.78rem;
}

.dashboard-command-hint,
.dashboard-glance-hint,
.dashboard-nav-hint {
  display: none !important;
}

.dashboard-glance-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 8px 11px;
  border-radius: 999px;
}

.dashboard-glance-value {
  font-size: clamp(0.84rem, 1.05vw, 0.94rem);
  line-height: 1.2;
}

.dashboard-body {
  display: grid;
  grid-template-columns: minmax(150px, 164px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.dashboard-sidebar {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 10px;
  align-self: start;
}

.dashboard-nav {
  position: static;
  top: auto;
  z-index: auto;
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.dashboard-nav .tab-btn,
.dashboard-sidebar-section {
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid color-mix(in oklch, var(--border-soft) 90%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 92%, transparent), var(--surface-panel-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    var(--shadow-xs);
}

.dashboard-nav .tab-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: calc(var(--radius) + 2px);
  border-color: color-mix(in oklch, var(--border-soft) 90%, transparent);
}

.dashboard-nav .tab-btn:hover {
  transform: translateY(-1px);
  background:
    radial-gradient(220px 80px at 0% -8%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 82%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), var(--surface-panel-2));
}

.dashboard-nav .tab-btn.active {
  background:
    radial-gradient(220px 90px at 0% -12%, color-mix(in oklch, var(--primary) 18%, transparent), transparent 78%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control-strong) 92%, transparent), var(--surface-panel-2));
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 12%, transparent),
    var(--shadow-sm);
}

.dashboard-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border));
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.dashboard-nav-copy {
  display: grid;
  gap: 0;
  min-width: 0;
}

.dashboard-nav-title {
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
}

.dashboard-nav-hint {
  font-size: 0.8rem;
  -webkit-line-clamp: 1;
}

.dashboard-sidebar-section {
  display: none;
  padding: 16px;
}

.dashboard-sidebar-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.dashboard-quick-button {
  width: 100%;
  min-height: 46px;
  justify-content: flex-start;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 80%, transparent);
  background:
    radial-gradient(180px 60px at 0% -10%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 80%),
    var(--surface-control);
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.dashboard-quick-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border));
}

.dashboard-sidebar-note-copy {
  margin: 12px 0 0;
  font-size: 0.92rem;
}

.dashboard-main {
  min-width: 0;
}

.tabs {
  position: sticky;
  top: 12px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(180deg, var(--surface-panel), var(--surface-panel-2));
  backdrop-filter: blur(8px);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  min-height: 42px;
  padding: 10px 16px;
  background: transparent;
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
  font-weight: 600;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    transform 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease;
}

.tab-btn:hover {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border));
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  color: color-mix(in oklch, var(--foreground) 98%, white);
}

.tab-btn:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--ring) 52%, var(--border));
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.tab-btn.active {
  background:
    radial-gradient(180px 70px at 10% -45%, color-mix(in oklch, var(--primary) 20%, transparent), transparent 74%),
    var(--surface-control-strong);
  color: color-mix(in oklch, var(--foreground) 99%, white);
  border-color: color-mix(in oklch, var(--primary) 36%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 8px 18px -18px color-mix(in oklch, var(--primary) 74%, transparent);
}

.tab-content {
  display: none;
  gap: 26px;
}

.tab-content.active {
  display: grid;
}

#tab-live-negotiator {
  grid-template-columns: 1fr;
  gap: 18px;
}

@keyframes panel-fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content.active > .panel {
  animation: panel-fade-slide-in 240ms ease both;
}

.tab-content.active > .panel:nth-of-type(2) {
  animation-delay: 45ms;
}

.tab-content.active > .panel:nth-of-type(3) {
  animation-delay: 90ms;
}

.live-negotiator-main {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.24fr) minmax(300px, 0.76fr);
  order: 1;
}

.live-negotiator-primary {
  display: grid;
  gap: 18px;
}

.live-negotiator-secondary {
  display: grid;
  gap: 16px;
  align-content: start;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.live-negotiator-secondary::-webkit-scrollbar {
  width: 8px;
}

.live-negotiator-secondary::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary) 28%, var(--border));
}

.panel-live-connection {
  order: 2;
}

.panel-live-controls {
  order: 3;
}

.live-top-summary,
.live-support-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.live-top-summary::-webkit-details-marker,
.live-support-summary::-webkit-details-marker {
  display: none;
}

.live-top-summary:focus-visible,
.live-support-summary:focus-visible {
  outline: none;
  border-radius: 18px;
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.live-top-summary-copy,
.live-support-summary-copy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.live-top-summary-copy .section-badge,
.live-support-summary-copy .section-badge {
  margin-top: 1px;
}

.live-top-summary-title,
.live-support-summary-title {
  display: block;
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-size: 1.02rem;
  line-height: 1.2;
}

.live-top-summary-hint,
.live-support-summary-hint {
  margin: 6px 0 0;
  color: var(--muted-foreground);
  line-height: 1.45;
  font-size: 0.88rem;
}

.live-top-panel-body,
.live-support-grid {
  margin-top: 20px;
}

.panel-live-top:not([open]) .live-top-panel-body,
.live-support-section:not([open]) .live-support-grid {
  display: none;
}

.panel-live-intent-composer {
  background:
    radial-gradient(360px 144px at 0% -10%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 98%, transparent), var(--surface-panel-2));
}

.live-compose-intro {
  margin: -4px 0 14px;
  color: var(--muted-foreground);
  max-width: 46ch;
  font-size: 0.84rem;
  line-height: 1.48;
}

.live-intent-stage {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.live-intent-stage-head {
  display: none;
}

.live-intent-stage-label {
  margin: 0;
  color: color-mix(in oklch, var(--primary) 62%, var(--muted-foreground));
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.live-intent-stage-hint {
  margin: 6px 0 0;
  max-width: 56ch;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.45;
}

.live-intent-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.live-intent-option {
  display: grid;
  gap: 2px;
  flex: 1 1 148px;
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), var(--surface-panel-2));
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-xs);
}

.live-intent-option:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border));
}

.live-intent-option.is-active {
  border-color: color-mix(in oklch, var(--primary) 48%, var(--border));
  background:
    radial-gradient(180px 84px at 0% -10%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control-strong) 94%, transparent), var(--surface-panel-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 16%, transparent);
}

.live-intent-option:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--ring) 56%, var(--border));
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.live-intent-option-label {
  display: none;
}

.live-intent-option-title {
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
}

.live-intent-option-hint {
  display: none;
}

.live-intent-native-field {
  display: none;
}

.live-compose-guidance {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), var(--surface-panel-2));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.live-compose-mode-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 30%, var(--border));
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-compose-helper {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  font-size: 0.78rem;
  line-height: 1.4;
}

.intent-compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(176px, 0.36fr);
  gap: 12px;
  align-items: start;
}

.intent-field-language {
  grid-column: 2;
}

.live-compose-guidance {
  grid-column: 1;
}

.intent-field-message {
  grid-column: 1 / -1;
}

.translation-direction-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 8px 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid color-mix(in oklch, var(--primary) 26%, var(--border-soft));
  border-radius: 14px;
  background:
    radial-gradient(180px 70px at 0% -24%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 62%, transparent);
}

.translation-direction-summary[hidden] {
  display: none !important;
}

.translation-direction-summary-label {
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.translation-direction-summary-value {
  color: color-mix(in oklch, var(--foreground) 94%, white);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.3;
}

.live-compose-mic-status {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  margin-top: -2px;
}

.live-compose-mic-status[hidden] {
  display: none !important;
}

.live-compose-mic-status-pill {
  margin: 0;
  min-height: 24px;
  padding: 3px 9px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live-compose-mic-status-hint {
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
  font-size: 0.74rem;
  line-height: 1.38;
}

.live-compose-mic-status[data-status-code="listening"] .live-compose-mic-status-pill,
.live-compose-mic-status[data-status-code="recognized"] .live-compose-mic-status-pill,
.live-compose-mic-status[data-status-code="sending"] .live-compose-mic-status-pill {
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border-soft));
  background: color-mix(in oklch, var(--primary) 14%, transparent);
  color: color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
}

.field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.field-inline-hint {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: right;
}

.panel-live-intent-composer textarea#message {
  min-height: 156px;
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .translation-direction-summary {
    gap: 5px 8px;
    padding: 7px 10px;
  }

  .translation-direction-summary-value {
    width: 100%;
    font-size: 0.78rem;
  }

  .live-compose-mic-status {
    align-items: flex-start;
    gap: 8px;
  }

  .live-compose-mic-status-hint {
    width: 100%;
    font-size: 0.71rem;
  }
}

.live-compose-primary-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.live-compose-primary-actions > button {
  min-width: 176px;
  min-height: 52px;
  border-radius: 16px;
}

.live-compose-send-hint {
  margin: 0;
  color: var(--muted-foreground);
  max-width: 28ch;
  font-size: 0.76rem;
  line-height: 1.45;
}

.live-control-advanced-shell {
  margin-top: 18px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 74%, transparent), color-mix(in oklch, var(--surface-panel-2) 88%, transparent));
  border-color: color-mix(in oklch, var(--border-soft) 78%, transparent);
}

.live-control-advanced-shell > summary {
  padding: 13px 14px;
}

.live-control-advanced-stack {
  display: grid;
  gap: 12px;
}

.live-input-optional-tools {
  margin-top: 18px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 88%, transparent), color-mix(in oklch, var(--surface-panel-2) 92%, transparent));
  border-color: color-mix(in oklch, var(--border-soft) 84%, transparent);
}

.live-control-advanced-shell .live-input-optional-tools,
.live-control-advanced-shell .live-technical-timeline {
  margin-top: 0;
}

.live-secondary-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.live-secondary-tool-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: calc(var(--radius) - 1px);
  background: linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 88%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.live-secondary-tool-copy {
  display: grid;
  gap: 6px;
}

.live-secondary-tool-title {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: color-mix(in oklch, var(--foreground) 95%, white);
}

.live-secondary-tool-hint {
  margin: 0;
  max-width: 42ch;
  color: var(--muted-foreground);
  font-size: 0.83rem;
  line-height: 1.45;
}

.live-input-optional-tools .intent-followup-actions {
  margin-top: 0;
  display: grid;
  gap: 10px;
}

.live-input-optional-tools .intent-followup-actions .action-group {
  display: grid;
  gap: 10px;
}

.live-input-optional-tools .intent-followup-actions button {
  width: 100%;
}

.live-input-optional-tools .intent-audio-row {
  grid-template-columns: minmax(0, 1fr);
}

.live-support-section {
  background:
    radial-gradient(320px 120px at 0% -16%, color-mix(in oklch, var(--accent-foreground) 10%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-panel), var(--surface-panel-2));
  order: 2;
}

.live-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.live-support-card {
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 2px);
  padding: 18px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), var(--surface-panel-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-xs);
}

.live-support-card h3 {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}

.live-support-card-copy {
  display: grid;
  gap: 10px;
}

.live-support-card-queue {
  gap: 14px;
}

.live-support-card-queue > .meta-row {
  margin-top: 16px;
}

.live-support-queue-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.live-support-queue-actions > * {
  flex: 0 0 auto;
}

.live-support-queue-snapshot {
  margin-top: 14px;
}

.live-support-queue-snapshot > .events {
  margin-top: 18px;
}

.panel-live-top {
  order: 3;
}

.panel {
  background: linear-gradient(180deg, var(--surface-panel), var(--surface-panel-2));
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) + 2px);
  padding: 26px;
  backdrop-filter: blur(10px);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent);
}

.panel h2 {
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 1.2rem;
  color: var(--foreground);
}

.panel > :is(.grid-2, .grid-3, .field, .actions, .meta-row, .kpi-board, .operator-health-board, .events, .transcript, .story-intro, .story-head-grid, .story-status-row, .story-progress, .story-workspace, .story-timeline-preview, .story-timeline-list):not(:first-child) {
  margin-top: 22px;
}

.operator-event-log-settings {
  margin-top: 0;
}

.operator-event-log-settings .events {
  max-height: 320px;
  overflow: auto;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklch, var(--primary) 48%, var(--border));
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in oklch, var(--primary) 18%, transparent);
}

.advanced-settings {
  margin-top: 22px;
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) - 2px);
  padding: 10px 14px 16px;
  background: linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.advanced-settings > summary {
  list-style: none;
  display: grid;
  gap: 4px;
  padding: 4px 2px;
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 32px;
}

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

.advanced-settings > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  border-bottom: 2px solid color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  transform: translateY(-68%) rotate(45deg);
  transition: transform 120ms ease;
}

.advanced-settings[open] > summary::after {
  transform: translateY(-40%) rotate(-135deg);
}

.advanced-settings > summary:focus-visible {
  outline: none;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.advanced-title {
  color: color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.advanced-hint {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  letter-spacing: 0;
}

.advanced-settings > :not(summary) {
  margin-top: 14px;
}

.connection-url-field {
  max-width: min(980px, 100%);
}

.advanced-connection-settings {
  max-width: 100%;
}

.connection-advanced-grid {
  gap: 18px;
}

.approval-advanced-settings {
  max-width: 100%;
}

.approval-advanced-grid {
  gap: 16px;
}

.grid-2,
.grid-3 {
  display: grid;
  gap: 20px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.field {
  display: grid;
  gap: 12px;
}

.field span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.media-upload-field {
  gap: 12px;
}

.media-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(196px, auto);
  gap: 12px;
  align-items: stretch;
}

.media-upload-input {
  margin: 0;
}

.media-upload-actions {
  margin-top: 0;
  align-self: stretch;
  display: flex;
}

.media-upload-actions button {
  min-width: 0;
  width: 100%;
  min-height: 58px;
  white-space: nowrap;
}

.intent-grid-primary {
  gap: 22px;
}

.intent-grid-advanced {
  gap: 22px;
}

.intent-grid-advanced textarea {
  min-height: 126px;
}

.field-audio {
  width: 100%;
  max-width: min(560px, 100%);
}

.intent-audio-field {
  max-width: 100%;
  gap: 12px;
}

.intent-audio-row {
  width: 100%;
}

.intent-audio-actions {
  align-self: end;
}

.intent-audio-actions button {
  min-width: 196px;
}

.intent-grid-primary #message {
  min-height: 136px;
}

.meta-box {
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) - 1px);
  background: linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  color: var(--muted-foreground);
  min-height: 90px;
  padding: 14px 16px;
  font-size: 0.93rem;
  line-height: 1.58;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-2xs);
}

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

input,
select,
textarea {
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, black);
  border-radius: calc(var(--radius) - 4px);
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--surface-control) 86%, transparent),
    color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
  );
  color: var(--foreground);
  min-height: 52px;
  padding: 13px 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--background) 12%, transparent);
}

input,
textarea {
  cursor: text;
}

select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer;
  padding-right: 16px;
  --select-surface-start: var(--surface-control);
  --select-surface-end: var(--surface-panel-2);
  background: linear-gradient(180deg, var(--select-surface-start), var(--select-surface-end));
}

select::-ms-expand {
  display: none;
}

select:hover {
  --select-surface-start: var(--surface-control-hover);
}

select option {
  color: var(--foreground) !important;
  background-color: color-mix(in oklch, var(--card) 88%, var(--background)) !important;
}

select option:checked {
  color: color-mix(in oklch, var(--foreground) 96%, white) !important;
  background-color: color-mix(in oklch, var(--primary) 34%, var(--card)) !important;
}

select optgroup {
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground)) !important;
  background-color: color-mix(in oklch, var(--card) 88%, var(--background)) !important;
}

.select-shell {
  position: relative;
  width: 100%;
  isolation: isolate;
  z-index: 0;
}

.select-native-enhanced {
  display: none;
}

.select-trigger {
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) + 2px);
  width: 100%;
  min-height: 48px;
  padding: 13px 42px 13px 16px;
  background: linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  color: var(--foreground);
  text-align: left;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 1px 2px color-mix(in oklch, black 20%, transparent);
}

.select-trigger::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  border-bottom: 2px solid color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  transform: translateY(-65%) rotate(45deg);
  transition: transform 120ms ease;
}

.select-trigger:hover {
  transform: none;
  filter: none;
  background: linear-gradient(180deg, var(--surface-control-hover), var(--surface-panel-2));
}

.select-shell.is-open .select-trigger {
  border-color: color-mix(in oklch, var(--ring) 56%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 3px var(--focus-ring-soft);
}

.select-shell.is-open {
  z-index: 1280;
}

.select-shell.is-open .select-trigger::after {
  transform: translateY(-35%) rotate(-135deg);
}

.select-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1290;
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) - 4px);
  background: linear-gradient(180deg, var(--surface-panel), var(--surface-panel-2));
  padding: 6px;
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent);
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
}

.select-shell.is-open .select-menu {
  display: grid;
  gap: 3px;
}

.select-option {
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 9px);
  width: 100%;
  padding: 8px 30px 8px 10px;
  background: transparent;
  color: var(--foreground);
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.28;
  display: grid;
  gap: 1px;
  cursor: pointer;
  box-shadow: none;
  position: relative;
}

.select-option::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 9px;
  height: 5px;
  border-left: 2px solid color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
  border-bottom: 2px solid color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
  transform: translateY(-62%) rotate(-45deg) scale(0.82);
  transform-origin: center;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}

.select-option .select-option-label {
  font-weight: 620;
  letter-spacing: -0.01em;
}

.select-option small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  line-height: 1.3;
}

.select-option:hover,
.select-option:focus-visible {
  transform: none;
  filter: none;
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
  background: color-mix(in oklch, var(--primary) 14%, var(--card));
  outline: none;
}

.select-option.is-selected {
  border-color: color-mix(in oklch, var(--primary) 46%, var(--border));
  background: color-mix(in oklch, var(--primary) 26%, var(--card));
  color: color-mix(in oklch, var(--foreground) 98%, white);
}

.select-option.is-selected::after {
  opacity: 1;
  transform: translateY(-62%) rotate(-45deg) scale(1);
}

.select-option.is-selected small {
  color: color-mix(in oklch, var(--foreground) 80%, var(--accent-foreground));
}

.file-picker {
  border: 1px dashed color-mix(in oklch, var(--primary) 36%, var(--border-soft));
  border-radius: calc(var(--radius) - 4px);
  min-height: 58px;
  padding: 10px 13px;
  background:
    radial-gradient(220px 80px at 0% -16%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 86%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--background) 12%, transparent);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.file-picker:hover {
  border-color: color-mix(in oklch, var(--primary) 52%, var(--border-soft));
  background:
    radial-gradient(220px 80px at 0% -16%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-hover) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
}

.file-picker:focus-within {
  border-color: color-mix(in oklch, var(--ring) 56%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--background) 12%, transparent),
    0 0 0 3px var(--focus-ring-soft);
}

.file-picker-button {
  flex: 0 0 auto;
  border: 1px solid color-mix(in oklch, var(--primary) 54%, var(--border));
  border-radius: calc(var(--radius) - 7px);
  min-height: 38px;
  padding: 0 13px;
  background:
    radial-gradient(130px 56px at 0% -18%, color-mix(in oklch, var(--primary) 20%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, white), var(--surface-panel-2));
  color: color-mix(in oklch, var(--foreground) 99%, white);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 8px 16px -22px color-mix(in oklch, var(--primary) 46%, transparent);
}

.file-picker-button:hover {
  transform: none;
  filter: none;
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border));
  background: linear-gradient(180deg, var(--surface-control-hover), var(--surface-panel-2));
}

.file-picker-button:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--ring) 56%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 3px var(--focus-ring-soft);
}

.file-picker-name {
  min-width: 0;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.92rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-picker-name.is-empty {
  color: color-mix(in oklch, var(--muted-foreground) 88%, transparent);
}

.file-picker-native {
  display: none;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in oklch, var(--muted-foreground) 80%, transparent);
}

input:hover,
textarea:hover {
  background: linear-gradient(180deg, var(--surface-control-hover), var(--surface-panel-2));
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--ring) 56%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 3px var(--focus-ring-soft);
}

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

.actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.operator-toolbar {
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: calc(var(--radius) - 8px);
  background: color-mix(in oklch, var(--surface-panel) 96%, transparent);
  box-shadow: none;
}

.operator-control-grid {
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 94%, transparent);
  border-radius: calc(var(--radius) - 6px);
  background: color-mix(in oklch, var(--surface-panel) 97%, transparent);
  box-shadow: none;
}

.operator-filter-field {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 94%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background: color-mix(in oklch, var(--surface-control) 92%, var(--surface-panel));
  box-shadow: none;
  transition: border-color 130ms ease, box-shadow 130ms ease, background 130ms ease;
}

.operator-filter-field-critical {
  border-color: color-mix(in oklch, var(--primary) 32%, var(--border-soft));
}

.operator-filter-field > span {
  color: color-mix(in oklch, var(--foreground) 96%, var(--muted-foreground));
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.operator-filter-field-critical > span {
  color: color-mix(in oklch, var(--foreground) 98%, var(--accent-foreground));
}

.operator-filter-field:focus-within {
  border-color: color-mix(in oklch, var(--primary) 50%, var(--border-soft));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 0 0 3px color-mix(in oklch, var(--primary) 14%, transparent);
}

.operator-filter-field input,
.operator-filter-field select,
.operator-filter-field .select-trigger {
  border-color: color-mix(in oklch, var(--border-soft) 92%, var(--border));
  background: color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control));
  color: color-mix(in oklch, var(--foreground) 96%, white);
  min-height: 46px;
  font-size: 0.92rem;
  font-weight: 620;
  letter-spacing: -0.006em;
  box-shadow: none;
  caret-color: color-mix(in oklch, var(--primary) 90%, white);
  text-shadow: none;
  opacity: 1;
  transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.operator-filter-field-critical input,
.operator-filter-field-critical select,
.operator-filter-field-critical .select-trigger {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
  font-weight: 640;
}

.operator-filter-field input:hover,
.operator-filter-field select:hover,
.operator-filter-field .select-trigger:hover {
  background:
    radial-gradient(240px 88px at 0% -20%, color-mix(in oklch, var(--primary) 30%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-hover) 70%, white),
      color-mix(in oklch, var(--surface-panel-2) 52%, var(--surface-control-hover))
    );
  border-color: color-mix(in oklch, var(--primary) 88%, var(--border));
}

.operator-filter-field input:focus-visible,
.operator-filter-field .select-trigger:focus-visible {
  border-color: color-mix(in oklch, var(--primary) 90%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 20%, transparent),
    0 0 0 3px color-mix(in oklch, var(--primary) 36%, transparent),
    0 12px 20px -16px color-mix(in oklch, var(--primary) 54%, transparent);
}

.operator-filter-field .select-shell.is-open .select-trigger {
  border-color: color-mix(in oklch, var(--primary) 90%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 20%, transparent),
    0 0 0 3px color-mix(in oklch, var(--primary) 36%, transparent),
    0 12px 20px -16px color-mix(in oklch, var(--primary) 54%, transparent);
}

.operator-filter-field input::placeholder {
  color: color-mix(in oklch, var(--foreground) 93%, var(--muted-foreground));
}

.operator-filter-field-critical input::placeholder {
  color: color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
}

.operator-filter-field .select-trigger::after {
  border-right-color: color-mix(in oklch, var(--foreground) 84%, var(--accent-foreground));
  border-bottom-color: color-mix(in oklch, var(--foreground) 84%, var(--accent-foreground));
}

.operator-filter-field-role {
  border-color: color-mix(in oklch, var(--primary) 52%, var(--border-soft));
}

.operator-filter-field-task {
  border-color: color-mix(in oklch, var(--primary) 56%, var(--border-soft));
}

.operator-filter-field-service {
  border-color: color-mix(in oklch, var(--accent-foreground) 34%, var(--border-soft));
}

.operator-control-hint {
  margin: 10px 0 0;
  color: color-mix(in oklch, var(--foreground) 91%, var(--muted-foreground));
  font-size: 0.82rem;
  line-height: 1.48;
}

.operator-control-hint code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  background: color-mix(in oklch, var(--surface-control) 93%, transparent);
  color: color-mix(in oklch, var(--foreground) 91%, white);
}

.operator-toolbar > .button-muted {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 14px;
  border-color: color-mix(in oklch, var(--accent-foreground) 34%, var(--border));
  background:
    radial-gradient(160px 62px at 0% -24%, color-mix(in oklch, var(--accent-foreground) 9%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 92%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control))
    );
  color: color-mix(in oklch, var(--foreground) 95%, var(--muted-foreground));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 8px 16px -22px color-mix(in oklch, var(--primary) 28%, transparent);
}

.operator-toolbar > #operatorRefreshBtn {
  margin-left: auto;
  min-width: 154px;
  border-color: color-mix(in oklch, var(--primary) 60%, var(--border));
  background: linear-gradient(
    140deg,
    color-mix(in oklch, var(--primary) 86%, white),
    color-mix(in oklch, var(--primary) 76%, var(--accent-foreground))
  );
  color: var(--primary-foreground);
  text-shadow: 0 1px 0 color-mix(in oklch, black 24%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 12px 18px -20px color-mix(in oklch, var(--primary) 62%, transparent),
    var(--shadow-sm);
}

.operator-toolbar > #operatorRefreshBtn:hover {
  border-color: color-mix(in oklch, var(--primary) 68%, var(--border));
  background: linear-gradient(
    140deg,
    color-mix(in oklch, var(--primary) 92%, white),
    color-mix(in oklch, var(--primary) 82%, var(--accent-foreground))
  );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 20%, transparent),
    0 14px 20px -20px color-mix(in oklch, var(--primary) 68%, transparent),
    var(--shadow-sm);
}

.operator-toolbar > #operatorFocusCriticalBtn,
.operator-toolbar > #operatorIssuesOnlyBtn {
  min-width: 142px;
  border-color: color-mix(in oklch, var(--accent-foreground) 42%, var(--border));
  background:
    radial-gradient(140px 56px at 0% -24%, color-mix(in oklch, var(--accent-foreground) 10%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--secondary) 72%, var(--surface-control-hover)),
      color-mix(in oklch, var(--surface-panel-2) 86%, var(--surface-control))
    );
  color: color-mix(in oklch, var(--foreground) 96%, var(--muted-foreground));
}

.operator-toolbar > #operatorFocusCriticalBtn[aria-pressed="true"],
.operator-toolbar > #operatorIssuesOnlyBtn[aria-pressed="true"] {
  color: color-mix(in oklch, var(--foreground) 99%, white);
}

.operator-toolbar > #operatorFocusCriticalBtn[aria-pressed="true"] {
  border-color: color-mix(in oklch, var(--primary) 58%, var(--border));
  background:
    radial-gradient(160px 62px at 0% -24%, color-mix(in oklch, var(--primary) 20%, transparent), transparent 72%),
    linear-gradient(
      150deg,
      color-mix(in oklch, var(--primary) 70%, white),
      color-mix(in oklch, var(--primary) 54%, var(--accent-foreground))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 16%, transparent),
    0 10px 18px -20px color-mix(in oklch, var(--primary) 54%, transparent),
    var(--shadow-xs);
}

.operator-toolbar > #operatorIssuesOnlyBtn[aria-pressed="true"] {
  border-color: color-mix(in oklch, var(--destructive) 54%, var(--border));
  background:
    radial-gradient(160px 62px at 0% -24%, color-mix(in oklch, var(--destructive) 20%, transparent), transparent 72%),
    linear-gradient(
      150deg,
      color-mix(in oklch, var(--destructive) 58%, white),
      color-mix(in oklch, var(--destructive) 46%, var(--accent-foreground))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 16%, transparent),
    0 10px 18px -20px color-mix(in oklch, var(--destructive) 48%, transparent),
    var(--shadow-xs);
}

.operator-toolbar > .button-muted:hover {
  border-color: color-mix(in oklch, var(--primary) 44%, var(--border));
  color: color-mix(in oklch, var(--foreground) 98%, white);
  background:
    radial-gradient(160px 62px at 0% -24%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control-hover) 92%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control))
    );
}

.operator-guide-toggle {
  min-width: 154px;
}

.operator-guide-toggle.is-active {
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border));
  color: color-mix(in oklch, var(--foreground) 97%, white);
  background:
    radial-gradient(160px 62px at 0% -24%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control-hover) 92%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control))
    );
}

.operator-view-mode-actions {
  margin-right: 6px;
  padding: 6px;
  border: 1px solid color-mix(in oklch, var(--primary) 24%, var(--border-soft));
  border-radius: calc(var(--radius) - 6px);
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
    color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
  );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.operator-view-mode-actions .button-muted {
  min-width: 130px;
  min-height: 40px;
}

.operator-board-actions {
  margin-top: 10px;
}

.operator-board-actions-row {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.operator-board-actions-row > button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.operator-board-actions-row .button-warn {
  margin-left: 0;
}

.operator-board-mode-hint {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.76rem;
  line-height: 1.38;
}

.operator-status-strip {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

.operator-mode-copy-block {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.operator-last-refresh {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 999px;
  min-height: 40px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  background: color-mix(in oklch, var(--surface-panel) 97%, transparent);
}

.operator-last-refresh::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--muted-foreground) 78%, var(--foreground));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--surface-control) 88%, transparent);
}

.operator-last-refresh.is-pending {
  border-color: color-mix(in oklch, var(--accent-foreground) 30%, var(--border-soft));
}

.operator-last-refresh.is-pending::before {
  background: color-mix(in oklch, var(--accent-foreground) 72%, var(--foreground));
}

.operator-last-refresh.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 40%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 94%, var(--muted-foreground));
}

.operator-last-refresh.is-ok::before {
  background: color-mix(in oklch, var(--chart-1) 84%, var(--foreground));
}

.operator-last-refresh.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 46%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 92%, var(--destructive));
}

.operator-last-refresh.is-fail::before {
  background: color-mix(in oklch, var(--destructive) 86%, var(--foreground));
}

.operator-mode-banner {
  margin-top: 0;
  border: 1px solid color-mix(in oklch, var(--border-soft) 90%, transparent);
  border-radius: calc(var(--radius) - 7px);
  min-height: 40px;
  padding: 7px 10px;
  background: color-mix(in oklch, var(--surface-panel) 97%, transparent);
  box-shadow: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.operator-mode-banner.is-demo {
  border-color: color-mix(in oklch, var(--chart-1) 36%, var(--border-soft));
}

.operator-mode-banner.is-full-ops {
  border-color: color-mix(in oklch, var(--accent-foreground) 40%, var(--border-soft));
  background: color-mix(in oklch, var(--surface-panel) 97%, transparent);
}

.operator-mode-banner .status-pill {
  margin: 0;
  flex: 0 0 auto;
  min-width: 108px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.operator-mode-copy {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 94%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.4;
}

.operator-demo-summary-strip {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px;
}

.operator-demo-summary-strip.is-hidden {
  display: none;
}

.operator-demo-summary-card {
  border: 1px solid color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: calc(var(--radius) - 8px);
  min-height: 0;
  width: 100%;
  padding: 13px 14px;
  background: color-mix(in oklch, var(--surface-panel) 97%, transparent);
  box-shadow: none;
  display: grid;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 130ms ease, box-shadow 130ms ease, background 130ms ease;
}

.operator-demo-summary-card:hover {
  transform: none;
  filter: none;
  border-color: color-mix(in oklch, var(--primary) 36%, var(--border));
  background: color-mix(in oklch, var(--surface-control-hover) 94%, var(--surface-panel));
  box-shadow: none;
}

.operator-demo-summary-card.is-placeholder {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--muted-foreground) 34%, var(--border-soft));
  background:
    radial-gradient(240px 88px at 0% -18%, color-mix(in oklch, var(--muted-foreground) 8%, transparent), transparent 76%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 95%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 6px 12px -20px color-mix(in oklch, var(--muted-foreground) 30%, transparent);
}

.operator-demo-summary-card.is-placeholder .operator-demo-summary-title,
.operator-demo-summary-card.is-placeholder .operator-demo-summary-copy {
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
}

.operator-demo-summary-card.is-placeholder .operator-demo-summary-kpi {
  opacity: 0.84;
}

.operator-demo-summary-card:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 3px var(--focus-ring-soft);
}

.operator-demo-summary-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: end;
}

.operator-demo-summary-title {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in oklch, var(--foreground) 94%, var(--muted-foreground));
}

.operator-demo-summary-card .status-pill {
  justify-self: start;
  margin: 0;
  font-size: 0.84rem;
  font-weight: 690;
}

.operator-demo-summary-kpi {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 24px;
}

.operator-demo-summary-kpi-token {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.28;
  transition:
    border-color 130ms ease,
    color 130ms ease,
    background-color 130ms ease;
}

.operator-demo-summary-kpi-fail {
  border-color: color-mix(in oklch, var(--destructive) 38%, var(--border-soft));
  color: color-mix(in oklch, var(--status-fail-fg) 86%, var(--destructive-foreground));
  background: color-mix(in oklch, var(--destructive) 18%, transparent);
}

.operator-demo-summary-kpi-neutral {
  border-color: color-mix(in oklch, var(--muted-foreground) 38%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  background: color-mix(in oklch, var(--surface-control) 84%, transparent);
}

.operator-demo-summary-kpi-ok {
  border-color: color-mix(in oklch, var(--chart-1) 38%, var(--border-soft));
  color: color-mix(in oklch, var(--status-ok-fg) 84%, var(--foreground));
  background: color-mix(in oklch, var(--chart-1) 18%, transparent);
}

.operator-demo-summary-kpi.is-updated .operator-demo-summary-kpi-token {
  animation: operatorDemoSummaryKpiPulse 260ms ease-out;
}

@keyframes operatorDemoSummaryKpiPulse {
  0% {
    transform: translateY(0.5px) scale(0.96);
    filter: brightness(0.9);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

.operator-demo-summary-copy {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.87rem;
  line-height: 1.5;
  color: color-mix(in oklch, var(--foreground) 95%, var(--muted-foreground));
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.operator-summary-guide {
  margin-top: 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: calc(var(--radius) - 7px);
  padding: 10px 12px;
  background: color-mix(in oklch, var(--surface-panel) 97%, transparent);
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.operator-summary-guide.is-full-ops {
  border-color: color-mix(in oklch, var(--accent-foreground) 36%, var(--border-soft));
  background: color-mix(in oklch, var(--surface-panel) 97%, transparent);
}

.operator-summary-guide.is-hidden {
  display: none;
}

.operator-summary-guide-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.operator-summary-guide-title {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 96%, var(--accent-foreground));
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.operator-summary-guide-hint {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.81rem;
  line-height: 1.4;
}

.operator-summary-guide-action {
  min-width: 0;
  min-height: 40px;
  padding: 8px 13px;
  font-size: 0.79rem;
}

.operator-summary-guide-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.operator-summary-guide-actions > .operator-summary-guide-action-refresh {
  grid-column: 2;
  grid-row: 2;
}

.operator-summary-guide-action-secondary {
  min-width: 0;
}

.operator-support-panel {
  margin-top: 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: calc(var(--radius) - 7px);
  background: color-mix(in oklch, var(--surface-panel) 97%, transparent);
  box-shadow: none;
  overflow: hidden;
}

.operator-support-panel.is-minimized {
  display: none;
}

.operator-support-panel > summary {
  list-style: none;
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  cursor: pointer;
  user-select: none;
  position: relative;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  background: color-mix(in oklch, var(--surface-panel) 98%, transparent);
  transition: background 130ms ease, border-color 130ms ease;
}

.operator-support-panel > summary::-webkit-details-marker {
  display: none;
}

.operator-support-panel > summary::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  border-bottom: 2px solid color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  transform: translateY(-60%) rotate(45deg);
  transition: transform 140ms ease;
}

.operator-support-panel[open] > summary::after {
  transform: translateY(-38%) rotate(-135deg);
}

.operator-support-panel > summary:hover {
  border-bottom-color: color-mix(in oklch, var(--primary) 28%, var(--border-soft));
  background: color-mix(in oklch, var(--surface-control-hover) 96%, var(--surface-panel));
}

.operator-support-panel > summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring-soft);
}

.operator-support-summary-title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: color-mix(in oklch, var(--foreground) 97%, var(--accent-foreground));
}

.operator-support-summary-head {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-right: 24px;
}

.operator-support-summary-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.operator-support-summary-pill-idle {
  border-color: color-mix(in oklch, var(--accent-foreground) 28%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 90%, var(--accent-foreground));
}

.operator-support-summary-pill-hot {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 92%, white);
}

.operator-support-summary-hint {
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.4;
  padding-right: 26px;
}

.operator-support-summary-action {
  justify-self: end;
  align-self: center;
  position: relative;
  z-index: 1;
}

.operator-quick-start {
  border-color: color-mix(in oklch, var(--accent-foreground) 22%, var(--border-soft));
}

.operator-lane-playbook {
  border-color: color-mix(in oklch, var(--primary) 20%, var(--border-soft));
}

.operator-quick-start-body,
.operator-lane-playbook-body {
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
}

.operator-quick-start-copy {
  min-width: 0;
  display: none;
  gap: 4px;
}

.operator-quick-start-title {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 95%, var(--accent-foreground));
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.operator-quick-start-hint {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.45;
}

.operator-quick-start-hint code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, white);
}

.operator-quick-start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.operator-quick-start-action {
  flex: 1 1 168px;
  min-width: 0;
}

.operator-lane-playbook-body {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.operator-lane-playbook-card:first-child {
  grid-column: auto;
}

.operator-lane-playbook-card {
  border: 1px solid color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: calc(var(--radius) - 10px);
  min-height: 104px;
  padding: 12px 12px 11px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: 7px;
  background: color-mix(in oklch, var(--surface-control) 94%, var(--surface-panel));
  box-shadow: none;
}

.operator-lane-playbook-card h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 97%, var(--accent-foreground));
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.operator-lane-playbook-card p {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 91%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.42;
}

.operator-lane-playbook-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
}

.operator-lane-playbook-action {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 4px 9px;
  font-size: 0.71rem;
  font-weight: 630;
  letter-spacing: -0.004em;
}

.operator-lane-playbook-run {
  border-color: color-mix(in oklch, var(--primary) 28%, var(--border));
  background: color-mix(in oklch, var(--secondary) 84%, var(--surface-panel-2));
  color: color-mix(in oklch, var(--foreground) 93%, white);
  box-shadow: none;
}

.operator-lane-playbook-run:hover {
  border-color: color-mix(in oklch, var(--primary) 36%, var(--border));
  background: linear-gradient(
    140deg,
    color-mix(in oklch, var(--secondary) 78%, white),
    color-mix(in oklch, var(--surface-panel-2) 90%, var(--surface-control))
  );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 10%, transparent),
    0 5px 10px -20px color-mix(in oklch, var(--primary) 16%, transparent),
    var(--shadow-2xs);
}

.operator-lane-playbook-run-primary {
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border));
  background: color-mix(in oklch, var(--primary) 18%, var(--accent-foreground));
  color: var(--primary-foreground);
  box-shadow: none;
}

.operator-lane-playbook-run-secondary {
  border-style: solid;
  border-color: color-mix(in oklch, var(--accent-foreground) 20%, var(--border));
  background: color-mix(in oklch, var(--surface-control) 96%, var(--surface-panel));
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  box-shadow: none;
}

.operator-lane-playbook-run-secondary:hover {
  border-color: color-mix(in oklch, var(--accent-foreground) 28%, var(--border));
  background: linear-gradient(
    150deg,
    color-mix(in oklch, var(--secondary) 82%, var(--surface-control-hover)),
    color-mix(in oklch, var(--surface-panel-2) 92%, var(--surface-control))
  );
  color: color-mix(in oklch, var(--foreground) 93%, white);
}

.operator-lane-playbook-refresh {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  margin-left: 0;
  padding: 0;
  border-radius: 999px;
  justify-content: center;
  font-size: 0.68rem;
  letter-spacing: 0;
}

.operator-lane-playbook-refresh.button-muted {
  border-color: color-mix(in oklch, var(--muted-foreground) 36%, var(--border));
  background: color-mix(in oklch, var(--surface-panel) 97%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  box-shadow: none;
}

.operator-lane-playbook-refresh.button-muted:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
  color: color-mix(in oklch, var(--foreground) 97%, white);
}

.operator-lane-playbook-refresh > span[aria-hidden="true"] {
  line-height: 1;
  transform: translateY(-0.5px);
}

.operator-lane-playbook-refresh:hover > span[aria-hidden="true"] {
  transform: translateY(-0.5px) rotate(18deg);
}

.operator-control-surfaces {
  border-color: color-mix(in oklch, var(--border-soft) 94%, transparent);
}

.operator-control-surfaces > summary {
  background: color-mix(in oklch, var(--surface-panel) 98%, transparent);
}

.operator-control-surfaces-body {
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
}

.operator-control-surfaces-body > .operator-support-panel,
.operator-control-surfaces-body > .operator-advanced-actions {
  margin-top: 0;
}

.operator-control-surfaces-body > .operator-support-panel {
  border-radius: calc(var(--radius) - 10px);
}

.operator-control-surfaces-body > .operator-support-panel > summary {
  padding: 12px 13px;
  background: color-mix(in oklch, var(--surface-control) 95%, var(--surface-panel));
}

.operator-scope-controls {
  border-color: color-mix(in oklch, var(--accent-foreground) 22%, var(--border-soft));
}

.operator-scope-controls-body {
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  padding: 12px 13px 14px;
  display: grid;
  gap: 10px;
}

.operator-scope-controls-body .operator-control-grid {
  padding: 10px;
  border-radius: calc(var(--radius) - 10px);
  background: color-mix(in oklch, var(--surface-control) 95%, var(--surface-panel));
}

.operator-scope-controls-body .operator-control-hint {
  margin: 0;
}

.operator-control-surfaces .operator-runtime-drills,
.operator-control-surfaces .operator-workflow-control,
.operator-control-surfaces .operator-browser-worker-control,
.operator-control-surfaces .operator-bootstrap-doctor-control,
.operator-control-surfaces .operator-session-ops-control {
  border-color: color-mix(in oklch, var(--border-soft) 92%, transparent);
  background: color-mix(in oklch, var(--surface-panel) 97%, transparent);
  box-shadow: none;
}

.operator-control-surfaces .operator-runtime-drills-body,
.operator-control-surfaces .operator-workflow-control-body,
.operator-control-surfaces .operator-browser-worker-control-body,
.operator-control-surfaces .operator-bootstrap-doctor-control-body,
.operator-control-surfaces .operator-session-ops-control-body {
  padding: 12px 13px 14px;
  gap: 10px;
}

.operator-control-surfaces .operator-runtime-drills-output-card,
.operator-control-surfaces .operator-workflow-control-output-card,
.operator-control-surfaces .operator-browser-worker-control-output-card,
.operator-control-surfaces .operator-bootstrap-doctor-control-output-card,
.operator-control-surfaces .operator-session-ops-control-output-card {
  border-color: color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background: color-mix(in oklch, var(--surface-control) 95%, var(--surface-panel));
  box-shadow: none;
}

.operator-control-surfaces .operator-runtime-drills-output,
.operator-control-surfaces .operator-workflow-control-output,
.operator-control-surfaces .operator-browser-worker-control-output,
.operator-control-surfaces .operator-bootstrap-doctor-control-output,
.operator-control-surfaces .operator-session-ops-control-output {
  border-color: color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background: color-mix(in oklch, var(--surface-panel) 98%, transparent);
}

.operator-runtime-drills {
  border: 1px solid color-mix(in oklch, var(--primary) 24%, var(--border-soft));
  background:
    radial-gradient(320px 110px at 100% -18%, color-mix(in oklch, var(--secondary) 12%, transparent), transparent 72%),
    radial-gradient(260px 94px at 0% -22%, color-mix(in oklch, var(--accent-foreground) 8%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.operator-runtime-drills-body {
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.operator-runtime-drills-hint,
.operator-runtime-drills-meta,
.operator-runtime-drills-copy {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.48;
}

.operator-runtime-drills-hint code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, white);
}

.operator-runtime-drills-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.operator-runtime-drills-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.operator-runtime-drills-grid > .field {
  margin: 0;
}

.operator-runtime-drills-checkbox {
  align-self: stretch;
}

.operator-runtime-drills-checkbox-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.45;
}

.operator-runtime-drills-checkbox-row > input {
  margin-top: 2px;
  flex: 0 0 auto;
}

.operator-runtime-drills-context-field {
  grid-column: 1 / -1;
}

.operator-runtime-drills-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.operator-runtime-drills-actions > button {
  flex: 1 1 168px;
  min-width: 0;
}

.operator-runtime-drills-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.operator-runtime-drills-output-card {
  min-width: 0;
  min-height: 138px;
  border: 1px solid color-mix(in oklch, var(--primary) 22%, var(--border-soft));
  border-radius: calc(var(--radius) - 6px);
  padding: 12px;
  display: grid;
  gap: 8px;
  background:
    radial-gradient(220px 84px at 0% -16%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 72%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    var(--shadow-2xs);
}

.operator-runtime-drills-output-card-wide {
  grid-column: 1 / -1;
}

.operator-runtime-drills-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operator-runtime-drills-output-head h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 97%, var(--accent-foreground));
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.operator-runtime-drills-copy {
  white-space: pre-line;
}

.operator-runtime-drills-output {
  margin: 0;
  min-height: 112px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 10px 11px;
  background: color-mix(in oklch, var(--surface-panel) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, white);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.52;
  white-space: pre-wrap;
}

.operator-workflow-control {
  border: 1px solid color-mix(in oklch, var(--accent-foreground) 20%, var(--border-soft));
  background:
    radial-gradient(320px 120px at 100% -22%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    radial-gradient(260px 96px at 0% -18%, color-mix(in oklch, var(--secondary) 10%, transparent), transparent 72%),
    linear-gradient(
      158deg,
      color-mix(in oklch, var(--surface-panel) 92%, var(--surface-control)),
      color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-2xs);
}

.operator-workflow-control-body {
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.operator-workflow-control-hint,
.operator-workflow-control-meta {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.48;
}

.operator-workflow-control-hint code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, white);
}

.operator-workflow-control-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.operator-workflow-control-context-field {
  margin: 0;
}

.operator-workflow-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.operator-workflow-control-actions > button {
  flex: 1 1 168px;
  min-width: 0;
}

.operator-workflow-control-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.operator-workflow-control-output-card {
  min-width: 0;
  min-height: 138px;
  border: 1px solid color-mix(in oklch, var(--accent-foreground) 18%, var(--border-soft));
  border-radius: calc(var(--radius) - 6px);
  padding: 12px;
  display: grid;
  gap: 8px;
  background:
    radial-gradient(220px 84px at 100% -16%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    var(--shadow-2xs);
}

.operator-workflow-control-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operator-workflow-control-output-head h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 97%, var(--accent-foreground));
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.operator-workflow-control-output {
  margin: 0;
  min-height: 112px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 10px 11px;
  background: color-mix(in oklch, var(--surface-panel) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, white);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.52;
  white-space: pre-wrap;
}

.operator-browser-worker-control {
  border: 1px solid color-mix(in oklch, var(--secondary) 22%, var(--border-soft));
  background:
    radial-gradient(320px 120px at 100% -22%, color-mix(in oklch, var(--secondary) 10%, transparent), transparent 74%),
    radial-gradient(260px 96px at 0% -18%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 72%),
    linear-gradient(
      158deg,
      color-mix(in oklch, var(--surface-panel) 92%, var(--surface-control)),
      color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-2xs);
}

.operator-browser-worker-control-body {
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.operator-browser-worker-control-hint,
.operator-browser-worker-control-meta {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.48;
}

.operator-browser-worker-control-hint code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, white);
}

.operator-browser-worker-control-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.operator-browser-worker-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.operator-browser-worker-control-grid > .field {
  margin: 0;
}

.operator-browser-worker-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.operator-browser-worker-control-actions > button {
  flex: 1 1 168px;
  min-width: 0;
}

.operator-browser-worker-control-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.operator-workflow-control.is-unavailable,
.operator-browser-worker-control.is-unavailable {
  border-color: color-mix(in oklch, var(--secondary) 34%, var(--border-soft));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    0 0 0 1px color-mix(in oklch, var(--secondary) 18%, transparent),
    var(--shadow-2xs);
}

.operator-workflow-control.is-unavailable .operator-workflow-control-status-row,
.operator-browser-worker-control.is-unavailable .operator-browser-worker-control-status-row {
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--secondary) 24%, var(--border-soft));
  border-radius: calc(var(--radius) - 8px);
  background:
    linear-gradient(
      135deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
}

.operator-workflow-control.is-stale .operator-workflow-control-output-card:first-child,
.operator-browser-worker-control.is-stale .operator-browser-worker-control-output-card:first-child {
  border-color: color-mix(in oklch, var(--secondary) 26%, var(--border-soft));
}

.operator-bootstrap-doctor-control {
  border: 1px solid color-mix(in oklch, var(--primary) 20%, var(--border-soft));
  background:
    radial-gradient(320px 120px at 100% -20%, color-mix(in oklch, var(--accent-foreground) 10%, transparent), transparent 74%),
    radial-gradient(260px 96px at 0% -18%, color-mix(in oklch, var(--secondary) 10%, transparent), transparent 72%),
    linear-gradient(
      158deg,
      color-mix(in oklch, var(--surface-panel) 92%, var(--surface-control)),
      color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-2xs);
}

.operator-bootstrap-doctor-control-body {
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.operator-bootstrap-doctor-control-hint,
.operator-bootstrap-doctor-control-meta {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.48;
}

.operator-bootstrap-doctor-control-hint code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, white);
}

.operator-bootstrap-doctor-control-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.operator-bootstrap-doctor-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.operator-bootstrap-doctor-control-grid > .field {
  margin: 0;
}

.operator-bootstrap-doctor-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.operator-bootstrap-doctor-control-actions > button {
  flex: 1 1 168px;
  min-width: 0;
}

.operator-bootstrap-doctor-control-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.operator-bootstrap-doctor-control-output-card {
  min-width: 0;
  min-height: 138px;
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  border-radius: calc(var(--radius) - 6px);
  padding: 12px;
  display: grid;
  gap: 8px;
  background:
    radial-gradient(220px 84px at 100% -16%, color-mix(in oklch, var(--secondary) 8%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    var(--shadow-2xs);
}

.operator-bootstrap-doctor-control-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operator-bootstrap-doctor-control-output-head h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 97%, var(--accent-foreground));
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.operator-bootstrap-doctor-control-output {
  margin: 0;
  min-height: 112px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 10px 11px;
  background: color-mix(in oklch, var(--surface-panel) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, white);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.52;
  white-space: pre-wrap;
}

.operator-session-ops-control {
  border: 1px solid color-mix(in oklch, var(--secondary) 20%, var(--border-soft));
  background:
    radial-gradient(320px 120px at 100% -18%, color-mix(in oklch, var(--secondary) 10%, transparent), transparent 74%),
    radial-gradient(260px 96px at 0% -16%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 72%),
    linear-gradient(
      158deg,
      color-mix(in oklch, var(--surface-panel) 92%, var(--surface-control)),
      color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-2xs);
}

.operator-session-ops-control-body {
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.operator-session-ops-control-hint,
.operator-session-ops-control-meta {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.48;
}

.operator-session-ops-control-hint code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, white);
}

.operator-session-ops-control-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.operator-session-ops-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.operator-session-ops-control-grid > .field {
  margin: 0;
}

.operator-session-ops-control-purpose-field {
  grid-column: span 2;
}

.operator-session-ops-control-note-grid {
  align-items: start;
}

.operator-session-ops-control-note-field {
  grid-column: span 3;
}

.operator-session-ops-control-note-field textarea {
  min-height: 96px;
}

.operator-session-ops-control-note-step-field {
  grid-column: span 2;
}

.operator-session-ops-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.operator-session-ops-control-actions > button {
  flex: 1 1 168px;
  min-width: 0;
}

.operator-session-ops-control-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.operator-session-ops-control-output-card {
  min-width: 0;
  min-height: 138px;
  border: 1px solid color-mix(in oklch, var(--secondary) 18%, var(--border-soft));
  border-radius: calc(var(--radius) - 6px);
  padding: 12px;
  display: grid;
  gap: 8px;
  background:
    radial-gradient(220px 84px at 100% -16%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    var(--shadow-2xs);
}

.operator-session-ops-control-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operator-session-ops-control-output-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.operator-session-ops-control-output-actions > button {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 0.68rem;
}

.operator-session-ops-control-output-primary-action {
  border: 1px solid color-mix(in oklch, var(--primary) 34%, var(--border));
  background:
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--primary) 22%, var(--surface-control)),
      color-mix(in oklch, var(--primary) 14%, var(--surface-panel))
    );
  color: color-mix(in oklch, var(--foreground) 98%, white);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 26%, transparent),
    0 8px 18px -18px color-mix(in oklch, var(--primary) 44%, transparent);
}

.operator-session-ops-control-output-head h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 97%, var(--secondary));
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.operator-session-ops-control-output {
  margin: 0;
  min-height: 112px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 10px 11px;
  background: color-mix(in oklch, var(--surface-panel) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, white);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.52;
  white-space: pre-wrap;
}

.operator-browser-worker-control-output-card {
  min-width: 0;
  min-height: 138px;
  border: 1px solid color-mix(in oklch, var(--secondary) 18%, var(--border-soft));
  border-radius: calc(var(--radius) - 6px);
  padding: 12px;
  display: grid;
  gap: 8px;
  background:
    radial-gradient(220px 84px at 100% -16%, color-mix(in oklch, var(--secondary) 8%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    var(--shadow-2xs);
}

.operator-browser-worker-control-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operator-browser-worker-control-output-head h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 97%, var(--secondary));
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.operator-browser-worker-control-output {
  margin: 0;
  min-height: 112px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 10px 11px;
  background: color-mix(in oklch, var(--surface-panel) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, white);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.52;
  white-space: pre-wrap;
}

.operator-triage-summary {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
}

.operator-triage-stat {
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 6px);
  padding: 12px;
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
    color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
  );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
  display: grid;
  gap: 5px;
}

.operator-triage-stat h3 {
  margin: 0;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
}

.operator-triage-stat p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: color-mix(in oklch, var(--foreground) 96%, var(--accent-foreground));
}

.operator-triage-stat-fail {
  border-color: color-mix(in oklch, var(--destructive) 42%, var(--border-soft));
  background:
    radial-gradient(160px 65px at 0% -10%, color-mix(in oklch, var(--destructive) 10%, transparent), transparent 72%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
}

.operator-triage-stat-neutral {
  border-color: color-mix(in oklch, var(--muted-foreground) 30%, var(--border-soft));
}

.operator-triage-stat-ok {
  border-color: color-mix(in oklch, var(--chart-1) 38%, var(--border-soft));
  background:
    radial-gradient(160px 65px at 0% -10%, color-mix(in oklch, var(--chart-1) 10%, transparent), transparent 72%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
}

.operator-advanced-actions {
  margin-top: 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 10px 12px;
  background: color-mix(in oklch, var(--surface-panel) 97%, transparent);
  box-shadow: none;
}

.operator-advanced-actions > summary {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}

.operator-advanced-actions > summary::-webkit-details-marker {
  display: none;
}

.operator-advanced-actions > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  border-bottom: 2px solid color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  transform: translateY(-2px) rotate(45deg);
  transition: transform 130ms ease;
}

.operator-advanced-actions[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.operator-advanced-actions-hint {
  margin: 8px 0 0;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  font-size: 0.86rem;
  line-height: 1.5;
}

.operator-advanced-actions-row {
  margin-top: 10px;
}

.operator-signal-strip {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: minmax(0, 1fr);
  gap: 12px;
}

.operator-signal-card {
  border: 1px solid color-mix(in oklch, var(--border-soft) 90%, transparent);
  border-radius: calc(var(--radius) - 5px);
  width: 100%;
  min-height: 0;
  padding: 13px 14px;
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
    color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
  );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
  display: grid;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.operator-signal-card:hover {
  transform: none;
  filter: none;
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--surface-control-hover) 90%, var(--surface-panel)),
    color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
}

.operator-signal-card.is-placeholder {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--muted-foreground) 34%, var(--border-soft));
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
    color-mix(in oklch, var(--surface-panel-2) 95%, var(--surface-control))
  );
}

.operator-signal-card.is-placeholder h3 {
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
}

.operator-signal-card.is-placeholder .status-pill {
  opacity: 0.88;
}

.operator-signal-card:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    0 0 0 3px var(--focus-ring-soft);
}

.operator-signal-card h3 {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
}

.operator-signal-card .status-pill {
  justify-self: start;
}

.operator-health-card-flash {
  border-color: color-mix(in oklch, var(--primary) 56%, var(--border-soft)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 3px color-mix(in oklch, var(--primary) 20%, transparent),
    var(--shadow-md) !important;
  transition: box-shadow 260ms ease, border-color 260ms ease;
}

.actions-priority {
  display: grid;
  gap: 14px;
  align-items: start;
}

.actions-priority .action-group {
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 6px);
  padding: 10px;
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--surface-control) 88%, var(--surface-panel)),
    color-mix(in oklch, var(--surface-panel-2) 93%, var(--surface-control))
  );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.actions-priority .action-group-primary {
  border-color: color-mix(in oklch, var(--primary) 26%, var(--border-soft));
  background:
    radial-gradient(220px 90px at 0% -20%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 88%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 93%, var(--surface-control))
    );
}

.actions-priority .action-group-secondary {
  border-color: color-mix(in oklch, var(--muted-foreground) 32%, var(--border-soft));
}

.intent-followup-actions .action-group-primary {
  border-color: color-mix(in oklch, var(--muted-foreground) 32%, var(--border-soft));
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--surface-control) 88%, var(--surface-panel)),
    color-mix(in oklch, var(--surface-panel-2) 93%, var(--surface-control))
  );
}

.intent-followup-actions .action-group-primary > button {
  flex: 1 1 100%;
}

.intent-followup-actions .action-group-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.actions-priority .action-group-secondary.action-group-export {
  justify-content: flex-end;
  border-color: color-mix(in oklch, var(--primary) 22%, var(--border-soft));
}

.panel-live-connection {
  position: relative;
  z-index: 28;
  overflow: visible;
}

.panel-live-connection .actions-priority {
  position: relative;
  z-index: 36;
  overflow: visible;
}

.panel-live-connection .action-group-primary {
  align-items: center;
  justify-content: flex-start;
  min-height: 74px;
  gap: 12px;
  padding-top: 11px;
  padding-bottom: 11px;
  overflow: visible;
  isolation: isolate;
}

.panel-live-connection .action-group-primary > .export-menu {
  margin-left: auto;
  align-self: stretch;
  z-index: 220;
}

.panel-live-connection .export-menu[open] {
  z-index: 520;
  z-index: 1340;
}

.panel-live-connection .export-menu-list {
  z-index: 540;
  z-index: 1350;
}

.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.panel-live-controls .action-group-live-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.panel-live-top .field > span {
  color: color-mix(in oklch, var(--foreground) 96%, var(--accent-foreground));
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.024em;
  text-transform: uppercase;
}

.panel-live-top .field :is(input, select, textarea, .select-trigger) {
  border-color: color-mix(in oklch, var(--primary) 36%, var(--border-soft));
  background:
    radial-gradient(230px 86px at 0% -18%, color-mix(in oklch, var(--primary) 13%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 88%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 98%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 11%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--background) 20%, transparent),
    0 10px 18px -22px color-mix(in oklch, var(--primary) 24%, transparent);
}

.panel-live-top .field :is(input, select, textarea, .select-trigger):hover {
  border-color: color-mix(in oklch, var(--primary) 44%, var(--border-soft));
  background:
    radial-gradient(230px 86px at 0% -18%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-hover) 84%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 98%, transparent)
    );
}

.panel-live-top .field :is(input, select, textarea):focus-visible,
.panel-live-top .field .select-shell.is-open .select-trigger {
  border-color: color-mix(in oklch, var(--primary) 48%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 10%, transparent),
    0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent),
    0 10px 20px -20px color-mix(in oklch, var(--primary) 30%, transparent);
}

.panel-live-top .action-group > .button-muted {
  border-color: color-mix(in oklch, var(--primary) 74%, var(--border));
  background:
    radial-gradient(170px 68px at 0% -20%, color-mix(in oklch, var(--primary) 24%, transparent), transparent 72%),
    radial-gradient(180px 72px at 100% -24%, color-mix(in oklch, var(--accent-foreground) 16%, transparent), transparent 74%),
    linear-gradient(
      165deg,
      color-mix(in oklch, var(--secondary) 58%, white),
      color-mix(in oklch, var(--surface-panel-2) 62%, var(--surface-control-hover))
    );
  color: color-mix(in oklch, var(--foreground) 99.4%, white);
  font-weight: 700;
  letter-spacing: -0.006em;
  text-shadow: 0 1px 0 color-mix(in oklch, black 30%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 28%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent),
    0 14px 24px -18px color-mix(in oklch, var(--primary) 42%, transparent),
    0 12px 20px -20px color-mix(in oklch, var(--accent-foreground) 32%, transparent),
    var(--shadow-sm);
}

.panel-live-top .action-group > .button-muted:hover {
  border-color: color-mix(in oklch, var(--primary) 80%, var(--border));
  background:
    radial-gradient(170px 68px at 0% -20%, color-mix(in oklch, var(--primary) 28%, transparent), transparent 72%),
    radial-gradient(180px 72px at 100% -24%, color-mix(in oklch, var(--accent-foreground) 20%, transparent), transparent 74%),
    linear-gradient(
      165deg,
      color-mix(in oklch, var(--secondary) 50%, white),
      color-mix(in oklch, var(--surface-panel-2) 58%, var(--surface-control-hover))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 30%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--foreground) 14%, transparent),
    0 16px 24px -18px color-mix(in oklch, var(--primary) 50%, transparent),
    0 12px 20px -20px color-mix(in oklch, var(--accent-foreground) 36%, transparent),
    var(--shadow-sm);
}

.panel-live-top .action-group > .button-muted:focus-visible {
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 26%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--foreground) 12%, transparent),
    0 0 0 3px color-mix(in oklch, var(--primary) 28%, transparent),
    0 16px 24px -18px color-mix(in oklch, var(--primary) 42%, transparent),
    var(--shadow-sm);
}

.panel-live-connection .action-group-primary > .button-muted {
  min-width: 162px;
  min-height: 50px;
  padding-inline: 18px;
}

.panel-live-controls .control-cluster {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 13px;
  background:
    radial-gradient(180px 70px at 0% -24%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 84%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 92%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 10px 18px -22px color-mix(in oklch, var(--primary) 32%, transparent),
    var(--shadow-2xs);
}

.panel-live-controls .control-cluster-label {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.panel-live-controls .control-cluster-hint {
  margin: 0;
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.82rem;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.panel-live-controls .control-cluster-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 11px;
  padding: 6px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background: linear-gradient(
    165deg,
    color-mix(in oklch, var(--surface-control) 92%, var(--surface-panel)),
    color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control))
  );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.panel-live-controls .control-cluster-actions > button {
  width: 100%;
  min-height: 50px;
  border-radius: calc(var(--radius) - 10px);
  font-weight: 660;
}

.panel-live-controls .control-cluster-mic {
  border-color: color-mix(in oklch, var(--chart-1) 26%, var(--border-soft));
}

.panel-live-controls .control-cluster-mic .control-cluster-actions > button {
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 12%, transparent),
    0 8px 16px -20px color-mix(in oklch, var(--chart-1) 52%, transparent),
    var(--shadow-xs);
}

.panel-live-controls .control-cluster-mic .control-cluster-actions {
  border-color: color-mix(in oklch, var(--chart-1) 24%, var(--border-soft));
}

.panel-live-controls .control-cluster-mic .control-cluster-actions > .button-muted {
  border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border));
}

.panel-live-controls .control-cluster-ptt {
  border-color: color-mix(in oklch, var(--accent-foreground) 32%, var(--border-soft));
}

.panel-live-controls .control-cluster-ptt .control-cluster-actions > button {
  border-color: color-mix(in oklch, var(--accent-foreground) 42%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 12%, transparent),
    0 8px 16px -20px color-mix(in oklch, var(--accent-foreground) 38%, transparent),
    var(--shadow-xs);
}

.panel-live-controls .control-cluster-ptt .control-cluster-actions {
  border-color: color-mix(in oklch, var(--accent-foreground) 26%, var(--border-soft));
}

.panel-live-controls .button-live-primary {
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 12px 22px -20px color-mix(in oklch, var(--primary) 74%, transparent),
    var(--shadow-sm);
}

.panel-live-controls .button-live-secondary {
  border-color: color-mix(in oklch, var(--primary) 54%, var(--border));
  background:
    radial-gradient(160px 62px at 0% -28%, color-mix(in oklch, var(--primary) 15%, transparent), transparent 72%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--secondary) 70%, white),
      color-mix(in oklch, var(--surface-panel-2) 78%, var(--surface-control-hover))
    );
  color: color-mix(in oklch, var(--foreground) 99.2%, white);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 18%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--foreground) 8%, transparent),
    0 10px 18px -20px color-mix(in oklch, var(--primary) 30%, transparent),
    var(--shadow-xs);
}

.panel-live-controls .button-live-secondary:hover {
  border-color: color-mix(in oklch, var(--primary) 62%, var(--border));
  background:
    radial-gradient(160px 62px at 0% -28%, color-mix(in oklch, var(--primary) 18%, transparent), transparent 72%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--secondary) 64%, white),
      color-mix(in oklch, var(--surface-panel-2) 72%, var(--surface-control-hover))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 20%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
    0 12px 20px -20px color-mix(in oklch, var(--primary) 34%, transparent),
    var(--shadow-sm);
}

.panel-live-controls .button-live-tertiary {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border-soft));
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--surface-control) 78%, var(--secondary)),
    color-mix(in oklch, var(--surface-panel-2) 84%, var(--surface-control-hover))
  );
  color: color-mix(in oklch, var(--foreground) 94%, var(--muted-foreground));
}

.panel-live-controls .button-live-fallback {
  border-color: color-mix(in oklch, var(--chart-4) 42%, var(--border));
  background:
    radial-gradient(160px 62px at 0% -28%, color-mix(in oklch, var(--chart-4) 14%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--secondary) 64%, var(--surface-control-hover)),
      color-mix(in oklch, var(--surface-panel-2) 74%, var(--surface-control))
    );
  color: color-mix(in oklch, var(--foreground) 99%, white);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 14%, transparent),
    0 9px 18px -22px color-mix(in oklch, var(--chart-4) 36%, transparent),
    var(--shadow-xs);
}

.panel-live-controls .button-live-fallback.is-active {
  border-color: color-mix(in oklch, var(--chart-4) 56%, var(--border));
  background:
    radial-gradient(160px 62px at 0% -28%, color-mix(in oklch, var(--chart-4) 18%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--chart-4) 32%, var(--surface-control-hover)),
      color-mix(in oklch, var(--surface-panel-2) 68%, var(--surface-control))
    );
}

.panel-live-controls .control-cluster-actions > button:disabled {
  opacity: 0.76;
  border-style: solid;
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  background:
    radial-gradient(140px 56px at 0% -24%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 88%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
  filter: saturate(0.82);
}

.panel-live-controls .action-group-secondary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 12px;
  align-items: center;
  padding: 36px 12px 12px;
  border: 1px solid color-mix(in oklch, var(--destructive) 22%, var(--border-soft));
  border-radius: calc(var(--radius) - 8px);
  background:
    radial-gradient(180px 70px at 0% -24%, color-mix(in oklch, var(--destructive) 8%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 84%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 92%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 10px 18px -24px color-mix(in oklch, var(--destructive) 28%, transparent),
    var(--shadow-2xs);
}

.panel-live-controls .action-group-secondary::before {
  content: "Safety & fallback";
  position: absolute;
  top: 9px;
  left: 12px;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.panel-live-controls .button-live-danger {
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 10px 18px -22px color-mix(in oklch, var(--destructive) 40%, transparent),
    var(--shadow-sm);
}

.panel-live-controls .action-group-secondary > .button-muted {
  min-height: 50px;
}

.action-group-secondary > button {
  border-color: color-mix(in oklch, var(--primary) 24%, var(--border));
}

.action-group-secondary > .button-warn {
  border-color: color-mix(in oklch, var(--destructive) 74%, var(--border));
}

.action-group-export {
  align-items: stretch;
  justify-content: flex-end;
}

.export-menu {
  position: relative;
  min-width: 0;
  z-index: 260;
  isolation: isolate;
}

.export-menu[open] {
  z-index: 1320;
}

.export-menu > summary {
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border));
  border-radius: 999px;
  min-height: 48px;
  min-width: 220px;
  padding: 9px 16px;
  color: color-mix(in oklch, var(--foreground) 96%, var(--accent-foreground));
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--secondary) 82%, var(--surface-control)),
    color-mix(in oklch, var(--surface-panel-2) 92%, var(--surface-control))
  );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 6px 16px -18px color-mix(in oklch, var(--primary) 62%, transparent),
    var(--shadow-xs);
  font-weight: 700;
  letter-spacing: -0.01em;
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  transition: transform 140ms ease, filter 140ms ease, border-color 120ms ease, background 120ms ease;
}

.export-menu-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 42%, var(--border));
  background: color-mix(in oklch, var(--primary) 18%, transparent);
  color: color-mix(in oklch, var(--foreground) 98%, var(--primary-foreground));
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  font-weight: 700;
}

#exportMenuSummaryLabel {
  font-size: 0.96rem;
}

.export-menu-summary-icon[data-export-kind="audio"] {
  border-color: color-mix(in oklch, var(--chart-4) 44%, var(--border));
  background: color-mix(in oklch, var(--chart-4) 22%, transparent);
}

.export-menu-summary-icon[data-export-kind="json"] {
  border-color: color-mix(in oklch, var(--chart-2) 42%, var(--border));
  background: color-mix(in oklch, var(--chart-2) 24%, transparent);
}

.export-menu-summary-icon[data-export-kind="markdown"] {
  border-color: color-mix(in oklch, var(--chart-1) 44%, var(--border));
  background: color-mix(in oklch, var(--chart-1) 20%, transparent);
}

.export-menu-summary-icon[data-export-kind="skipped"] {
  border-color: color-mix(in oklch, var(--destructive) 48%, var(--border));
  background: color-mix(in oklch, var(--destructive) 22%, transparent);
}

.export-menu > summary::-webkit-details-marker {
  display: none;
}

.export-menu > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
  border-bottom: 2px solid color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
  margin-left: auto;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 120ms ease;
}

.export-menu[open] > summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.export-menu > summary:hover {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border));
  transform: translateY(-1px);
}

.export-menu > summary:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 0 0 3px var(--focus-ring-soft);
}

.export-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 460;
  z-index: 1330;
  min-width: min(258px, calc(100vw - 56px));
  padding: 3px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) - 8px);
  background: linear-gradient(180deg, var(--surface-panel), var(--surface-panel-2));
  backdrop-filter: blur(8px);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.export-menu-meta {
  margin: 0;
  padding: 0 6px 3px;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.69rem;
  font-family: var(--font-mono);
}

.export-menu-item {
  width: 100%;
  min-height: 31px;
  justify-content: flex-start;
  text-align: left;
  gap: 5px;
  padding: 4px 7px;
  border-radius: calc(var(--radius) - 13px);
}

.export-menu-item.button-muted {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
  background:
    radial-gradient(150px 56px at 0% -20%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 91%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 7%, transparent),
    0 6px 12px -18px color-mix(in oklch, var(--primary) 26%, transparent);
}

.export-menu-item.button-muted:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
  background:
    radial-gradient(150px 56px at 0% -20%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-hover) 92%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 97%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 7%, transparent),
    0 8px 14px -18px color-mix(in oklch, var(--primary) 30%, transparent);
}

.export-menu-item:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 0 0 3px var(--focus-ring-soft);
}

.export-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  border-color: color-mix(in oklch, var(--border-soft) 92%, transparent);
  background: color-mix(in oklch, var(--surface-control) 90%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent);
}

.export-menu-item:disabled .export-menu-item-icon {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--border-soft) 88%, transparent);
  background: color-mix(in oklch, var(--surface-control) 86%, transparent);
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
}

.export-menu-item:disabled .export-menu-item-label {
  color: color-mix(in oklch, var(--muted-foreground) 94%, var(--foreground));
}

.export-menu-item:disabled .export-menu-item-hint {
  color: color-mix(in oklch, var(--muted-foreground) 88%, var(--foreground));
}

.export-menu-item-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 34%, var(--border));
  background: color-mix(in oklch, var(--accent) 26%, transparent);
  color: color-mix(in oklch, var(--foreground) 98%, var(--accent-foreground));
  font-family: var(--font-mono);
  font-size: 0.53rem;
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.export-menu-item-copy {
  min-width: 0;
  display: grid;
  gap: 0;
}

.export-menu-item-label {
  font-size: 0.75rem;
  font-weight: 640;
  color: color-mix(in oklch, var(--foreground) 97%, var(--muted-foreground));
}

.export-menu-item-hint {
  font-size: 0.63rem;
  line-height: 1.2;
  color: color-mix(in oklch, var(--muted-foreground) 93%, var(--foreground));
}

.export-menu-history {
  margin-top: 1px;
  padding: 4px 2px 0;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  display: grid;
  gap: 4px;
}

.export-menu-history-title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
}

.export-menu-history-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}

.export-menu-history-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 5px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background: color-mix(in oklch, var(--surface-control) 86%, transparent);
}

.export-menu-history-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 34%, var(--border));
  background: color-mix(in oklch, var(--accent) 24%, transparent);
  color: color-mix(in oklch, var(--foreground) 97%, var(--accent-foreground));
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.export-menu-history-item.is-audio .export-menu-history-badge {
  border-color: color-mix(in oklch, var(--chart-4) 44%, var(--border));
  background: color-mix(in oklch, var(--chart-4) 22%, transparent);
}

.export-menu-history-item.is-json .export-menu-history-badge {
  border-color: color-mix(in oklch, var(--chart-2) 42%, var(--border));
  background: color-mix(in oklch, var(--chart-2) 22%, transparent);
}

.export-menu-history-item.is-markdown .export-menu-history-badge {
  border-color: color-mix(in oklch, var(--chart-1) 45%, var(--border));
  background: color-mix(in oklch, var(--chart-1) 18%, transparent);
}

.export-menu-history-item.is-skipped .export-menu-history-badge {
  border-color: color-mix(in oklch, var(--destructive) 44%, var(--border));
  background: color-mix(in oklch, var(--destructive) 18%, transparent);
}

.export-menu-history-main {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.export-menu-history-file {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in oklch, var(--foreground) 96%, var(--muted-foreground));
  font-size: 0.71rem;
  font-family: var(--font-mono);
}

.export-menu-history-time {
  flex: 0 0 auto;
  color: color-mix(in oklch, var(--muted-foreground) 88%, var(--foreground));
  font-size: 0.64rem;
  font-family: var(--font-mono);
}

.export-menu-history-empty {
  padding: 4px;
  border: 1px dashed color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: calc(var(--radius) - 10px);
  color: color-mix(in oklch, var(--muted-foreground) 90%, var(--foreground));
  font-size: 0.7rem;
  text-align: center;
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
}

button {
  border: 1px solid color-mix(in oklch, var(--primary) 56%, var(--border));
  border-radius: 999px;
  min-height: 52px;
  padding: 11px 20px;
  background: linear-gradient(135deg, var(--primary), color-mix(in oklch, var(--primary) 78%, var(--accent-foreground)));
  color: var(--button-primary-fg);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease, background 140ms ease, border-color 140ms ease;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 10px 24px -18px color-mix(in oklch, var(--primary) 72%, transparent),
    var(--shadow-sm);
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

button:active {
  transform: translateY(0);
  filter: brightness(1.02);
}

button:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 0 0 3px var(--focus-ring-soft);
}

.button-muted {
  border-color: color-mix(in oklch, var(--accent-foreground) 52%, var(--border));
  background:
    radial-gradient(180px 70px at 12% -24%, color-mix(in oklch, var(--accent-foreground) 14%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--secondary) 70%, var(--surface-control-hover)),
      color-mix(in oklch, var(--surface-panel-2) 84%, var(--surface-control))
    );
  color: color-mix(in oklch, var(--foreground) 99%, white);
  text-shadow: 0 1px 0 color-mix(in oklch, black 28%, transparent);
  font-weight: 680;
  letter-spacing: -0.008em;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 16%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--foreground) 8%, transparent),
    0 12px 20px -20px color-mix(in oklch, var(--accent-foreground) 34%, transparent),
    var(--shadow-xs);
}

.button-muted:hover {
  border-color: color-mix(in oklch, var(--accent-foreground) 60%, var(--border));
  background:
    radial-gradient(180px 70px at 12% -24%, color-mix(in oklch, var(--accent-foreground) 16%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--secondary) 64%, var(--surface-control-hover)),
      color-mix(in oklch, var(--surface-panel-2) 80%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 18%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
    0 14px 22px -22px color-mix(in oklch, var(--accent-foreground) 38%, transparent),
    var(--shadow-sm);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
  filter: none;
}

.button-muted.is-active {
  border-color: color-mix(in oklch, var(--primary) 52%, var(--border));
  background: linear-gradient(135deg, color-mix(in oklch, var(--primary) 88%, white), var(--primary));
  color: var(--primary-foreground);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 22%, transparent),
    0 10px 24px -18px color-mix(in oklch, var(--primary) 72%, transparent),
    var(--shadow-sm);
}

.button-warn {
  border-color: color-mix(in oklch, var(--destructive) 74%, var(--border));
  background: linear-gradient(130deg, color-mix(in oklch, var(--destructive) 80%, white), var(--destructive));
  color: var(--button-warn-fg);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 10px 20px -20px color-mix(in oklch, var(--destructive) 52%, transparent),
    var(--shadow-sm);
}

.button-warn:hover {
  border-color: color-mix(in oklch, var(--destructive) 80%, var(--border));
  background: linear-gradient(
    130deg,
    color-mix(in oklch, var(--destructive) 88%, oklch(0.92 0.05 8)),
    color-mix(in oklch, var(--destructive) 84%, oklch(0.76 0.18 356))
  );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 12px 22px -20px color-mix(in oklch, var(--destructive) 58%, transparent),
    var(--shadow-sm);
}

.button-warn:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 0 0 3px color-mix(in oklch, var(--destructive) 28%, transparent),
    0 10px 20px -20px color-mix(in oklch, var(--destructive) 52%, transparent),
    var(--shadow-sm);
}

.meta-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.meta-row-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.meta-row-status > div {
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid color-mix(in oklch, var(--border) 84%, color-mix(in oklch, var(--foreground) 10%, transparent));
  border-radius: 999px;
  flex: 0 1 auto;
  background:
    radial-gradient(180px 70px at 0% -40%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 95%, black 5%)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 7%, transparent),
    var(--shadow-2xs);
}

.meta-row-status .status-item-wide {
  flex: 1 1 290px;
  border-radius: calc(var(--radius) - 6px);
}

.meta-row-status strong {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  color: color-mix(in oklch, var(--foreground) 96%, var(--muted-foreground));
  white-space: nowrap;
}

.meta-row-status > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  max-width: 100%;
  text-align: left;
  min-width: 0;
}

.meta-row-status > div > span:not(.status-pill) {
  padding: 0;
  border: none;
  background: transparent;
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-family: var(--font-mono);
  font-size: 0.83rem;
  font-weight: 560;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.meta-row-status .status-pill {
  margin-top: 0;
  margin-left: 0;
  padding: 4px 10px;
  font-size: 0.79rem;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 10%, transparent),
    0 0 0 1px color-mix(in oklch, var(--border-soft) 72%, transparent);
}

.panel-live-top .meta-row-status > div {
  border-color: color-mix(in oklch, var(--border) 90%, color-mix(in oklch, var(--foreground) 16%, transparent));
  background:
    radial-gradient(200px 80px at 8% -24%, color-mix(in oklch, var(--primary) 13%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 86%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 95%, black 5%)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 10%, transparent),
    0 8px 20px -18px color-mix(in oklch, var(--primary) 34%, transparent),
    var(--shadow-2xs);
}

.panel-live-top .meta-row-status strong {
  color: color-mix(in oklch, var(--foreground) 98%, var(--accent-foreground));
}

.panel-live-top .meta-row-status > div > span:not(.status-pill) {
  color: color-mix(in oklch, var(--foreground) 99%, white);
}

.panel-live-top .meta-row-status .status-neutral {
  border-color: color-mix(in oklch, var(--muted-foreground) 48%, transparent);
  background: color-mix(in oklch, var(--surface-control) 92%, transparent);
  color: color-mix(in oklch, var(--foreground) 93%, var(--muted-foreground));
}

.meta-row-status-live {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid color-mix(in oklch, var(--primary) 20%, var(--border-soft));
  border-radius: calc(var(--radius) - 4px);
  background:
    radial-gradient(360px 130px at 3% -28%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), var(--surface-panel-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 11%, transparent),
    0 10px 20px -22px color-mix(in oklch, var(--primary) 44%, transparent),
    var(--shadow-2xs);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
}

.meta-row-status-live > div {
  min-width: 0;
  min-height: 66px;
  padding: 12px 14px;
  border-radius: calc(var(--radius) - 10px);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-color: color-mix(in oklch, var(--primary) 24%, var(--border));
  background:
    radial-gradient(220px 80px at 8% -24%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 88%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 97%, black 3%)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 11%, transparent),
    0 8px 16px -18px color-mix(in oklch, var(--primary) 34%, transparent);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.meta-row-status-live > div.status-item-variant-neutral {
  border-color: color-mix(in oklch, var(--primary) 20%, var(--border));
  background:
    radial-gradient(220px 80px at 8% -24%, color-mix(in oklch, var(--primary) 11%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 84%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, black 4%)
    );
}

.meta-row-status-live > div.status-item-variant-ok {
  border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border));
  background:
    radial-gradient(220px 80px at 8% -24%, color-mix(in oklch, var(--chart-1) 14%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 84%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, black 4%)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 11%, transparent),
    0 8px 16px -18px color-mix(in oklch, var(--chart-1) 44%, transparent);
}

.meta-row-status-live > div.status-item-variant-fail {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border));
  background:
    radial-gradient(220px 80px at 8% -24%, color-mix(in oklch, var(--destructive) 13%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 84%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, black 4%)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 11%, transparent),
    0 8px 16px -18px color-mix(in oklch, var(--destructive) 44%, transparent);
}

.meta-row-status-live .status-item-wide {
  grid-column: span 2;
  min-width: 0;
}

.meta-row-status-live .status-item-wide > span:not(.status-pill) {
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.meta-row-status-live strong {
  color: color-mix(in oklch, white 99.8%, var(--foreground));
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0.012em;
  white-space: nowrap;
  flex: 0 0 auto;
  text-shadow: 0 1px 0 color-mix(in oklch, black 30%, transparent);
}

.meta-row-status-live > div > span:not(.status-pill) {
  color: color-mix(in oklch, white 99.8%, var(--foreground));
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.28;
  justify-content: flex-end;
  text-align: right;
}

.meta-row-status-live .status-pill {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.012em;
  justify-content: center;
  text-align: center;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 14%, transparent),
    0 0 0 1px color-mix(in oklch, var(--border-soft) 84%, transparent);
}

.meta-row-status-live .status-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 38%, var(--border-soft));
  background:
    radial-gradient(160px 64px at 12% -34%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  color: color-mix(in oklch, white 99%, var(--foreground));
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 670;
  line-height: 1.2;
  white-space: normal;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 10%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 20%, transparent);
}

.meta-row > div {
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) - 2px);
  min-height: 70px;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.meta-row strong {
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
}

.meta-row > div,
.meta-row span {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kpi-board {
  margin-top: 18px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi-panel > .grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

.live-negotiator-secondary .kpi-panel > .grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.kpi-panel > .kpi-target-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.kpi-panel > .kpi-target-grid .field > span {
  min-height: 2.75em;
  display: flex;
  align-items: flex-end;
}

.kpi-board-featured {
  grid-template-columns: 1fr;
}

.kpi-card {
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) + 1px);
  padding: 18px;
  background: linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-xs);
}

.kpi-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: color-mix(in oklch, var(--foreground) 84%, var(--accent-foreground));
}

.kpi-card p {
  margin: 0 0 7px;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
}

.kpi-card-offer {
  background:
    radial-gradient(400px 160px at 15% -10%, var(--primary-soft), transparent 70%),
    color-mix(in oklch, var(--card) 88%, transparent);
}

.kpi-card-offer .kpi-metric {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 11px 12px;
}

.kpi-card-offer .kpi-label {
  flex: 1 1 auto;
}

.kpi-card-offer .kpi-label::after {
  flex: 0 0 42px;
  max-width: 48px;
  min-width: 18px;
  border-bottom-style: dotted;
  opacity: 0.58;
}

.kpi-card-offer .kpi-value {
  min-width: 3ch;
  text-align: right;
  padding-left: 4px;
  font-size: 1.1rem;
}

.kpi-card-status {
  background:
    radial-gradient(420px 200px at 100% -10%, var(--accent-soft), transparent 70%),
    color-mix(in oklch, var(--card) 88%, transparent);
}

.kpi-metric {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) - 1px);
  padding: 12px 13px;
  background: linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.88rem;
  font-weight: 600;
}

.kpi-label::after {
  content: "";
  flex: 0 0 44px;
  max-width: 44px;
  min-width: 22px;
  border-bottom: 1px dashed color-mix(in oklch, var(--border) 80%, transparent);
  transform: translateY(1px);
  opacity: 0.58;
}

.kpi-value {
  flex: 0 0 auto;
  min-width: 3.2ch;
  text-align: right;
  color: var(--foreground);
  font-size: 1.26rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: var(--font-mono);
}

.kpi-value-neutral {
  color: var(--status-neutral-fg);
}

.kpi-value-ok {
  color: var(--status-ok-fg);
}

.kpi-value-fail {
  color: var(--status-fail-fg);
}

.kpi-card-status .status-pill {
  margin-bottom: 10px;
}

.kpi-status-note {
  margin: 9px 0 0;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.88rem;
  line-height: 1.5;
}

.kpi-signal-grid {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.kpi-signal {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.87rem;
}

.kpi-delta {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.kpi-delta-neutral {
  border-color: color-mix(in oklch, var(--muted-foreground) 38%, transparent);
  background: color-mix(in oklch, var(--muted-ui) 74%, transparent);
  color: var(--status-neutral-fg);
}

.kpi-delta-ok {
  border-color: color-mix(in oklch, var(--chart-1) 40%, transparent);
  background: var(--ok-soft);
  color: var(--status-ok-fg);
}

.kpi-delta-fail {
  border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
  background: var(--warn-soft);
  color: var(--status-fail-fg);
}

.operator-health-board {
  margin-top: 18px;
  display: grid;
  gap: 18px;
}

.operator-health-board,
.operator-health-group-body,
.operator-health-card .events,
.operator-event-log-settings .events,
.operator-summary {
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in oklch, var(--foreground) 14%, var(--primary))
    color-mix(in oklch, var(--surface-panel) 96%, transparent);
}

.operator-health-board::-webkit-scrollbar,
.operator-health-group-body::-webkit-scrollbar,
.operator-health-card .events::-webkit-scrollbar,
.operator-event-log-settings .events::-webkit-scrollbar,
.operator-summary::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.operator-health-board::-webkit-scrollbar-track,
.operator-health-group-body::-webkit-scrollbar-track,
.operator-health-card .events::-webkit-scrollbar-track,
.operator-event-log-settings .events::-webkit-scrollbar-track,
.operator-summary::-webkit-scrollbar-track {
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-panel) 88%, transparent);
}

.operator-health-board::-webkit-scrollbar-thumb,
.operator-health-group-body::-webkit-scrollbar-thumb,
.operator-health-card .events::-webkit-scrollbar-thumb,
.operator-event-log-settings .events::-webkit-scrollbar-thumb,
.operator-summary::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--foreground) 14%, var(--primary)),
    color-mix(in oklch, var(--foreground) 8%, var(--secondary))
  );
}

.operator-health-board::-webkit-scrollbar-thumb:hover,
.operator-health-group-body::-webkit-scrollbar-thumb:hover,
.operator-health-card .events::-webkit-scrollbar-thumb:hover,
.operator-event-log-settings .events::-webkit-scrollbar-thumb:hover,
.operator-summary::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--foreground) 17%, var(--primary)),
    color-mix(in oklch, var(--foreground) 10%, var(--secondary))
  );
}

.operator-health-board::-webkit-scrollbar-corner,
.operator-health-group-body::-webkit-scrollbar-corner,
.operator-health-card .events::-webkit-scrollbar-corner,
.operator-event-log-settings .events::-webkit-scrollbar-corner,
.operator-summary::-webkit-scrollbar-corner {
  background: transparent;
}

.operator-health-group {
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) + 1px);
  padding: 18px;
  background: linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-xs);
}

.operator-health-group[data-operator-group-state="fail"] {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border-soft));
  background:
    radial-gradient(240px 92px at 0% -20%, color-mix(in oklch, var(--destructive) 10%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.operator-health-group[data-operator-group-state="watch"] {
  border-color: color-mix(in oklch, var(--accent-foreground) 28%, var(--border-soft));
  background:
    radial-gradient(240px 92px at 0% -20%, color-mix(in oklch, var(--accent-foreground) 8%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.operator-health-group[data-operator-group-state="stale"] {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--accent-foreground) 24%, var(--border-soft));
}

.operator-health-group[data-operator-group-state="ok"] {
  border-color: color-mix(in oklch, var(--chart-1) 24%, var(--border-soft));
}

.operator-health-group-hidden {
  display: none;
}

.operator-health-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.operator-health-group-title-row {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.operator-health-group-head h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 91%, var(--accent-foreground));
  font-size: 1.01rem;
}

.operator-group-metrics {
  margin: 0;
  font-size: 0.79rem;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.operator-group-metrics.is-has-fail {
  color: color-mix(in oklch, var(--destructive) 74%, var(--foreground));
}

.operator-group-metrics.is-all-ok {
  color: color-mix(in oklch, var(--chart-1) 74%, var(--foreground));
}

.operator-group-toggle {
  padding: 8px 12px;
  font-size: 0.8rem;
}

.operator-health-group-body {
  margin-top: 16px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.operator-health-group.is-collapsed .operator-health-group-body {
  display: none;
}

.operator-health-group.is-collapsed .operator-group-toggle {
  filter: saturate(0.75);
}

.operator-health-card {
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) - 1px);
  padding: 15px;
  background: linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-2xs);
}

.operator-health-card[data-operator-critical] {
  border-color: color-mix(in oklch, var(--primary) 36%, var(--border-soft));
  background:
    radial-gradient(200px 75px at 0% -12%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.operator-health-board.is-demo-view .operator-health-card[data-operator-demo-essential] {
  border-color: color-mix(in oklch, var(--primary) 48%, var(--border-soft));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 18%, transparent),
    var(--shadow-2xs);
}

.operator-health-card-hidden {
  display: none;
}

.operator-health-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: color-mix(in oklch, var(--foreground) 90%, var(--accent-foreground));
}

.operator-health-card .status-pill {
  margin-bottom: 10px;
}

.operator-health-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.operator-health-actions > button {
  flex: 1 1 168px;
  min-width: 0;
  min-height: 44px;
}

.operator-health-action-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.operator-health-action-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  border-radius: calc(var(--radius) - 8px);
  background:
    radial-gradient(180px 62px at 0% -26%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 96%, transparent), var(--surface-panel-2));
}

.operator-health-action-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 260px;
}

.operator-health-action-copy strong {
  color: color-mix(in oklch, var(--foreground) 96%, var(--accent-foreground));
  font-size: 0.8rem;
}

.operator-health-action-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.operator-health-action-status-row .status-pill {
  margin: 0;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.72rem;
}

.operator-health-action-status-detail {
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  font-size: 0.76rem;
  line-height: 1.42;
}

.operator-health-action-meta {
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  font-size: 0.77rem;
  line-height: 1.46;
}

.operator-health-action-item > button {
  flex: 0 0 auto;
  min-width: 170px;
  min-height: 42px;
}

.operator-health-action-empty {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.79rem;
  line-height: 1.48;
}

.operator-health-action-history {
  margin: 10px 0 0;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.76rem;
  line-height: 1.46;
}

.operator-health-action-history.is-ok {
  color: color-mix(in oklch, var(--ok) 72%, var(--foreground));
}

.operator-health-action-history.is-warn {
  color: color-mix(in oklch, var(--warn) 72%, var(--foreground));
}

.operator-health-action-history.is-fail {
  color: color-mix(in oklch, var(--danger) 72%, var(--foreground));
}

.operator-health-card.operator-health-card-condensed .operator-health-row {
  display: none;
}

.operator-health-card.operator-health-card-condensed .status-pill {
  margin-bottom: 6px;
}

.operator-health-card.operator-health-card-condensed .operator-health-hint {
  margin-top: 8px;
  font-size: 0.83rem;
}

.operator-health-card.operator-health-card-empty {
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border-soft));
  border-style: dashed;
  background:
    radial-gradient(220px 86px at 0% -16%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 72%),
    radial-gradient(180px 70px at 100% -20%, color-mix(in oklch, var(--accent-foreground) 9%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 86%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 92%, transparent)
    );
}

.operator-health-card.operator-health-card-empty .operator-health-row {
  display: none;
}

.operator-health-card.operator-health-card-empty .status-pill {
  margin-bottom: 8px;
  border-color: color-mix(in oklch, var(--primary) 46%, var(--border-soft));
  background:
    radial-gradient(170px 64px at 0% -26%, color-mix(in oklch, var(--primary) 18%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel));
  color: color-mix(in oklch, var(--foreground) 95%, var(--accent-foreground));
}

.operator-health-card.operator-health-card-empty .operator-health-hint {
  margin-top: 8px;
  font-size: 0.82rem;
}

.panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty {
  min-height: 0;
}

.panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty h3 {
  margin-bottom: 8px;
}

.operator-health-empty-actions {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.operator-health-empty-cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  grid-column: 1 / -1;
}

.operator-health-empty-cue::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary) 70%, var(--accent-foreground));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 22%, transparent);
}

.operator-health-empty-action {
  min-height: 40px;
  padding: 7px 12px;
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}

.operator-health-empty-copy {
  margin: 0;
  grid-column: 1 / -1;
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
  font-size: 0.77rem;
  line-height: 1.45;
}

.operator-health-empty-action-primary {
  border-color: color-mix(in oklch, var(--primary) 52%, var(--border));
  background: linear-gradient(
    140deg,
    color-mix(in oklch, var(--primary) 78%, white),
    color-mix(in oklch, var(--primary) 64%, var(--accent-foreground))
  );
  color: var(--primary-foreground);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 16%, transparent),
    0 10px 20px -20px color-mix(in oklch, var(--primary) 62%, transparent),
    var(--shadow-2xs);
}

.operator-health-empty-action-primary:hover {
  border-color: color-mix(in oklch, var(--primary) 60%, var(--border));
  background: linear-gradient(
    140deg,
    color-mix(in oklch, var(--primary) 84%, white),
    color-mix(in oklch, var(--primary) 70%, var(--accent-foreground))
  );
}

.operator-health-empty-action-primary:focus-visible {
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 0 0 3px color-mix(in oklch, var(--primary) 26%, transparent),
    0 10px 20px -20px color-mix(in oklch, var(--primary) 62%, transparent),
    var(--shadow-2xs);
}

.operator-health-empty-action[disabled] {
  min-width: 0;
  opacity: 0.58;
}

.operator-health-empty-action-refresh {
  min-width: 132px;
  justify-self: end;
}

.operator-health-empty-action-refresh:hover {
  border-color: color-mix(in oklch, var(--accent-foreground) 52%, var(--border));
}

.operator-health-row {
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 11px;
  color: color-mix(in oklch, var(--foreground) 91%, var(--muted-foreground));
  font-size: 0.93rem;
}

.operator-health-row strong {
  color: color-mix(in oklch, var(--foreground) 93%, var(--accent-foreground));
  font-weight: 620;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
}

.operator-health-row strong::after {
  content: "";
  flex: 1 1 auto;
  min-width: 12px;
  border-bottom: 1px dashed color-mix(in oklch, var(--border-soft) 88%, transparent);
  opacity: 0.72;
}

.operator-health-row span {
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-family: var(--font-mono);
  font-size: 0.87rem;
  text-align: right;
  flex: 0 1 auto;
  max-width: min(56%, 30ch);
  overflow-wrap: anywhere;
}

.operator-health-row span.operator-metric-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklch, var(--primary) 38%, var(--border-soft));
  border-radius: 999px;
  padding: 2px 9px;
  min-height: 24px;
  max-width: min(100%, 34ch);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.73rem;
  font-weight: 640;
  letter-spacing: 0.01em;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  background:
    radial-gradient(150px 54px at 8% -18%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 72%),
    color-mix(in oklch, var(--surface-control) 92%, var(--surface-panel));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent);
}

.operator-health-path {
  margin: -2px 0 10px;
  display: grid;
  gap: 6px;
}

.operator-health-path-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.operator-health-path-item {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 8px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 97%, transparent),
      color-mix(in oklch, var(--surface-panel) 92%, transparent)
    );
}

.operator-health-path-item[data-readiness="needs_prep"] {
  border-color: color-mix(in oklch, var(--accent-foreground) 30%, var(--border-soft));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--accent-soft) 46%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
}

.operator-health-path-item[data-readiness="ready"] {
  border-color: color-mix(in oklch, var(--chart-1) 24%, var(--border-soft));
}

.operator-health-path-step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.operator-health-path-step-index {
  flex: 0 0 auto;
  min-width: 18px;
  color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.operator-health-path-step-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: color-mix(in oklch, var(--foreground) 97%, white);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.operator-health-path-step-meta,
.operator-health-path-step-detail {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.72rem;
  line-height: 1.35;
}

.operator-health-path-step-detail {
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
}

.operator-health-hint {
  margin: 12px 0 0;
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) - 2px);
  padding: 11px 12px;
  font-size: 0.89rem;
  line-height: 1.5;
}

.operator-health-hint-neutral {
  background: color-mix(in oklch, var(--muted-ui) 72%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, var(--status-neutral-fg));
}

.operator-health-hint-ok {
  background: var(--ok-soft);
  border-color: color-mix(in oklch, var(--chart-1) 38%, transparent);
  color: var(--status-ok-fg);
}

.operator-health-hint-warn {
  background: var(--accent-soft);
  border-color: color-mix(in oklch, var(--accent-foreground) 40%, transparent);
  color: color-mix(in oklch, var(--accent-foreground) 88%, white);
}

.operator-health-hint-fail {
  background: var(--danger-soft);
  border-color: color-mix(in oklch, var(--destructive) 44%, transparent);
  color: var(--status-fail-fg);
}

.status-pill {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 0.84rem;
  font-weight: 700;
}

.status-neutral {
  border-color: color-mix(in oklch, var(--muted-foreground) 40%, var(--border-soft));
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--surface-control) 88%, transparent),
    color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control))
  );
  color: color-mix(in oklch, var(--foreground) 95%, var(--muted-foreground));
}

.status-ok {
  border-color: color-mix(in oklch, var(--chart-1) 44%, transparent);
  background: var(--ok-soft);
  color: var(--status-ok-fg);
}

.status-fail {
  border-color: color-mix(in oklch, var(--destructive) 42%, transparent);
  background: var(--warn-soft);
  color: var(--status-fail-fg);
}

.panel-story-timeline {
  display: grid;
  gap: 20px;
  overflow: hidden;
}

.story-intro {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  font-size: 0.94rem;
  max-width: 76ch;
  line-height: 1.65;
}

.story-head-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.story-stat-card {
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) - 2px);
  min-height: 116px;
  padding: 16px 18px;
  background:
    radial-gradient(220px 90px at 10% -10%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
  display: grid;
  gap: 7px;
}

.story-stat-label {
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.story-stat-value {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-family: var(--font-mono);
  font-size: clamp(1rem, 0.84rem + 0.3vw, 1.18rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

#storyTimelineTitle.story-stat-value {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.88rem + 0.25vw, 1.14rem);
  line-height: 1.3;
  font-weight: 700;
}

#storyTimelineCount.story-stat-value,
#storyTimelinePendingJobs.story-stat-value,
#storyTimelineProgressKpi.story-stat-value {
  font-size: clamp(1.26rem, 1.04rem + 0.7vw, 1.64rem);
  line-height: 1.1;
}

.story-stat-note {
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.42;
  margin-top: auto;
}

.story-stat-card-state.is-idle {
  border-color: color-mix(in oklch, var(--muted-foreground) 32%, var(--border-soft));
  background:
    radial-gradient(220px 90px at 10% -10%, color-mix(in oklch, var(--muted-foreground) 10%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-stat-card-state.is-pending {
  border-color: color-mix(in oklch, var(--accent-foreground) 42%, var(--border-soft));
  background:
    radial-gradient(220px 90px at 10% -10%, color-mix(in oklch, var(--accent-foreground) 15%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-stat-card-state.is-ready {
  border-color: color-mix(in oklch, var(--chart-1) 42%, var(--border-soft));
  background:
    radial-gradient(220px 90px at 10% -10%, color-mix(in oklch, var(--chart-1) 16%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-workspace {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 24px;
  align-items: start;
}

.story-workspace > * {
  min-width: 0;
}

.story-controls {
  display: grid;
  gap: 20px;
  padding: 18px;
  border: 1px solid color-mix(in oklch, var(--primary) 22%, var(--border-soft));
  border-radius: calc(var(--radius) - 4px);
  background:
    radial-gradient(280px 114px at 0% -24%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.story-controls.is-pending {
  border-color: color-mix(in oklch, var(--accent-foreground) 34%, var(--border-soft));
  background:
    radial-gradient(260px 108px at 0% -24%, color-mix(in oklch, var(--accent-foreground) 11%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-controls.is-ready {
  border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border-soft));
  background:
    radial-gradient(260px 108px at 0% -24%, color-mix(in oklch, var(--chart-1) 10%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-controls-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.story-controls-grid .field {
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  border-radius: calc(var(--radius) - 8px);
  background:
    radial-gradient(220px 84px at 0% -30%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 86%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 94%, transparent)
    );
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.story-controls-grid .field:focus-within {
  border-color: color-mix(in oklch, var(--ring) 52%, var(--border-soft));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 2px color-mix(in oklch, var(--ring) 16%, transparent);
}

.story-controls-grid.is-idle .field {
  border-color: color-mix(in oklch, var(--muted-foreground) 26%, var(--border-soft));
}

.story-controls-grid.is-pending .field {
  border-color: color-mix(in oklch, var(--accent-foreground) 34%, var(--border-soft));
  background:
    radial-gradient(220px 84px at 0% -30%, color-mix(in oklch, var(--accent-foreground) 10%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 86%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 94%, transparent)
    );
}

.story-controls-grid.is-ready .field {
  border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border-soft));
  background:
    radial-gradient(220px 84px at 0% -30%, color-mix(in oklch, var(--chart-1) 10%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 86%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 94%, transparent)
    );
}

.story-controls-grid .field > span {
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.story-controls-grid .field :is(select, .select-trigger) {
  border-color: color-mix(in oklch, var(--primary) 28%, var(--border-soft));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 97%, transparent)
    );
}

.story-controls-grid .field :is(select, .select-trigger):hover {
  border-color: color-mix(in oklch, var(--primary) 38%, var(--border-soft));
}

.story-controls-grid .field:first-child input[type="range"] {
  accent-color: color-mix(in oklch, var(--primary) 88%, white);
}

.story-controls-grid.is-pending .field :is(select, .select-trigger) {
  border-color: color-mix(in oklch, var(--accent-foreground) 40%, var(--border));
}

.story-controls-grid.is-ready .field :is(select, .select-trigger) {
  border-color: color-mix(in oklch, var(--chart-1) 42%, var(--border));
}

.story-controls-grid #storyTimelinePosition.meta-box {
  min-height: 52px;
  padding: 13px 16px;
  border-color: color-mix(in oklch, var(--primary) 28%, var(--border-soft));
  background:
    radial-gradient(220px 90px at 15% -15%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    var(--shadow-2xs);
  font-size: 0.92rem;
  font-family: var(--font-mono);
  line-height: 1.25;
  display: flex;
  align-items: center;
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
}

.story-controls-grid.is-pending #storyTimelinePosition.meta-box {
  border-color: color-mix(in oklch, var(--accent-foreground) 42%, var(--border));
  background:
    radial-gradient(220px 90px at 15% -15%, color-mix(in oklch, var(--accent-foreground) 14%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-controls-grid.is-ready #storyTimelinePosition.meta-box {
  border-color: color-mix(in oklch, var(--chart-1) 42%, var(--border));
  background:
    radial-gradient(220px 90px at 15% -15%, color-mix(in oklch, var(--chart-1) 14%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-controls-hint {
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 10px 14px;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.84rem;
  line-height: 1.45;
  background:
    radial-gradient(220px 80px at 0% -24%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.story-controls-hint code {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 38%, var(--border-soft));
  background: color-mix(in oklch, var(--primary) 14%, transparent);
  color: color-mix(in oklch, var(--foreground) 95%, white);
}

.story-controls-hint-idle {
  border-color: color-mix(in oklch, var(--muted-foreground) 30%, var(--border-soft));
}

.story-controls-hint-pending {
  border-color: color-mix(in oklch, var(--accent-foreground) 38%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 90%, var(--accent-foreground));
}

.story-controls-hint-ready {
  border-color: color-mix(in oklch, var(--chart-1) 42%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
}

.story-preview-column {
  display: grid;
  grid-column: 1 / -1;
  gap: 16px;
  margin-top: 0;
}

.story-preview-column h3 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: 0.005em;
  color: color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
}

.story-timeline-preview {
  border: 1px solid color-mix(in oklch, var(--primary) 26%, var(--border-soft));
  border-radius: calc(var(--radius) - 1px);
  background:
    radial-gradient(300px 140px at 105% -20%, color-mix(in oklch, var(--accent-foreground) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  padding: 22px;
  min-height: 218px;
  display: grid;
  gap: 16px;
  line-height: 1.58;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-timeline-preview.is-pending {
  border-color: color-mix(in oklch, var(--accent-foreground) 44%, var(--border-soft));
  background:
    radial-gradient(320px 150px at 102% -20%, color-mix(in oklch, var(--accent-foreground) 18%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-timeline-preview.is-ready {
  border-color: color-mix(in oklch, var(--chart-1) 42%, var(--border-soft));
  background:
    radial-gradient(320px 150px at 102% -20%, color-mix(in oklch, var(--chart-1) 15%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-timeline-preview.is-ready .story-preview-index {
  border-color: color-mix(in oklch, var(--chart-1) 52%, var(--border));
  background: color-mix(in oklch, var(--chart-1) 20%, transparent);
}

.story-timeline-preview.is-pending .story-preview-index {
  border-color: color-mix(in oklch, var(--accent-foreground) 48%, var(--border));
  background: color-mix(in oklch, var(--accent-foreground) 18%, transparent);
}

.story-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.story-preview-index {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklch, var(--primary) 42%, var(--border));
  border-radius: 999px;
  padding: 5px 10px;
  color: color-mix(in oklch, var(--foreground) 96%, white);
  background: color-mix(in oklch, var(--primary) 20%, transparent);
  font-weight: 700;
  font-size: 0.82rem;
}

.story-preview-status {
  font-size: 0.78rem;
}

.story-preview-text {
  margin: 0;
  max-width: 60ch;
  color: color-mix(in oklch, var(--foreground) 94%, var(--muted-foreground));
  font-size: 0.94rem;
  line-height: 1.54;
  white-space: pre-wrap;
}

.story-preview-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.story-asset-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
  background: color-mix(in oklch, var(--surface-control) 95%, transparent);
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.story-asset-pill.is-image {
  border-color: color-mix(in oklch, var(--chart-2) 46%, transparent);
  background: color-mix(in oklch, var(--chart-2) 18%, transparent);
}

.story-asset-pill.is-video {
  border-color: color-mix(in oklch, var(--chart-4) 44%, transparent);
  background: color-mix(in oklch, var(--chart-4) 18%, transparent);
}

.story-asset-pill.is-audio {
  border-color: color-mix(in oklch, var(--chart-1) 44%, transparent);
  background: color-mix(in oklch, var(--chart-1) 18%, transparent);
}

.story-asset-pill.is-empty {
  border-style: dashed;
  color: var(--muted-foreground);
}

.story-progress {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.story-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  font-size: 0.92rem;
}

.story-progress-track {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  height: 13px;
  background: linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-progress-track.is-empty {
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in oklch, var(--muted-ui) 85%, transparent),
      color-mix(in oklch, var(--muted-ui) 85%, transparent) 10px,
      color-mix(in oklch, var(--muted-ui) 55%, transparent) 10px,
      color-mix(in oklch, var(--muted-ui) 55%, transparent) 20px
    ),
    color-mix(in oklch, var(--card) 85%, transparent);
}

.story-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(130deg, var(--primary), var(--accent-foreground));
  transition: width 160ms ease;
}

.story-progress-track.is-active .story-progress-fill {
  background: linear-gradient(130deg, var(--primary), var(--accent-foreground));
}

.story-progress-track.is-pending .story-progress-fill {
  background: linear-gradient(130deg, var(--accent-foreground), var(--destructive));
  animation: story-progress-pulse 1.2s ease-in-out infinite;
}

.story-status-row {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: calc(var(--radius) - 6px);
  padding: 12px 14px;
  background:
    radial-gradient(220px 84px at 0% -20%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-status-row .status-pill {
  margin: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  font-size: 0.79rem;
  color: color-mix(in oklch, var(--foreground) 94%, var(--muted-foreground));
  letter-spacing: 0.01em;
}

.story-status-row.is-idle {
  justify-content: flex-start;
  border-style: dashed;
  border-color: color-mix(in oklch, var(--muted-foreground) 34%, var(--border-soft));
  background:
    radial-gradient(220px 84px at 0% -20%, color-mix(in oklch, var(--muted-ui) 64%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
}

.story-status-row.is-idle #storyTimelineAssetMix,
.story-status-row.is-idle #storyTimelineProgressHint {
  display: none;
}

.story-status-row.is-idle #storyTimelineMode {
  padding-inline: 12px;
  border-color: color-mix(in oklch, var(--muted-foreground) 38%, var(--border));
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
}

.story-status-row.is-pending {
  border-color: color-mix(in oklch, var(--accent-foreground) 34%, var(--border-soft));
}

.story-status-row.is-ready {
  border-color: color-mix(in oklch, var(--chart-1) 30%, var(--border-soft));
}

.story-guidance {
  margin-top: 14px;
  border: 1px solid color-mix(in oklch, var(--primary) 32%, var(--border-soft));
  border-radius: calc(var(--radius) - 3px);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 14px;
  background:
    radial-gradient(260px 96px at 0% -18%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 72%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.story-guidance.is-hidden {
  display: none;
}

.story-guidance.is-pending {
  border-color: color-mix(in oklch, var(--accent-foreground) 44%, var(--border-soft));
  background:
    radial-gradient(260px 96px at 0% -18%, color-mix(in oklch, var(--accent-foreground) 14%, transparent), transparent 72%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
}

.story-guidance-copy {
  min-width: 0;
  flex: 1 1 340px;
  display: grid;
  gap: 6px;
}

.story-guidance-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 48%, var(--border-soft));
  background: color-mix(in oklch, var(--primary) 16%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.story-guidance-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: color-mix(in oklch, var(--foreground) 96%, white);
}

.story-guidance-hint {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: color-mix(in oklch, var(--foreground) 89%, var(--muted-foreground));
}

.story-guidance-hint code {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, white);
}

.story-guidance-actions {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.story-guidance-action {
  min-width: 192px;
  margin-top: 0;
  box-shadow:
    0 8px 16px -16px color-mix(in oklch, var(--primary) 56%, transparent),
    var(--shadow-xs);
}

.story-guidance-action-template {
  min-width: 194px;
}

.story-timeline-preview-empty {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--primary) 38%, var(--border-soft));
  display: block;
  color: var(--muted-foreground);
  background:
    radial-gradient(240px 140px at 14% -12%, color-mix(in oklch, var(--primary) 15%, transparent), transparent 74%),
    repeating-linear-gradient(
      -45deg,
      color-mix(in oklch, var(--muted-ui) 58%, transparent),
      color-mix(in oklch, var(--muted-ui) 58%, transparent) 10px,
      color-mix(in oklch, var(--muted-ui) 34%, transparent) 10px,
      color-mix(in oklch, var(--muted-ui) 34%, transparent) 20px
    ),
    color-mix(in oklch, var(--card) 85%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 16px 24px -26px color-mix(in oklch, var(--primary) 38%, transparent);
}

.story-empty-state {
  min-height: 100%;
  display: grid;
  place-items: center;
  gap: 16px;
  padding: 30px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.story-empty-state.is-pending {
  border-radius: calc(var(--radius) - 5px);
  background: color-mix(in oklch, var(--accent-foreground) 7%, transparent);
}

.story-empty-state::before {
  content: "";
  position: absolute;
  inset: -20% -8% auto;
  height: 150px;
  background:
    radial-gradient(280px 120px at 15% 50%, color-mix(in oklch, var(--primary) 22%, transparent), transparent 72%),
    radial-gradient(260px 120px at 85% 45%, color-mix(in oklch, var(--accent-foreground) 16%, transparent), transparent 74%);
  opacity: 0.72;
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  animation: story-empty-sheen 7.5s linear infinite;
}

.story-empty-state.is-pending::before {
  background:
    radial-gradient(280px 120px at 15% 50%, color-mix(in oklch, var(--accent-foreground) 22%, transparent), transparent 72%),
    radial-gradient(260px 120px at 85% 45%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 74%);
  opacity: 0.86;
}

.story-empty-state > * {
  position: relative;
  z-index: 1;
}

.story-empty-intro {
  width: min(100%, 560px);
  display: grid;
  justify-items: start;
  gap: 10px;
}

.story-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  min-height: 34px;
  border: 1px solid color-mix(in oklch, var(--primary) 44%, var(--border));
  border-radius: 999px;
  padding: 4px 14px;
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
  background: color-mix(in oklch, var(--primary) 16%, transparent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 12%, transparent),
    0 10px 20px -18px color-mix(in oklch, var(--primary) 58%, transparent);
  animation: story-empty-float 4.8s ease-in-out infinite;
}

.story-empty-icon.is-pending {
  border-color: color-mix(in oklch, var(--accent-foreground) 50%, var(--border));
  background: color-mix(in oklch, var(--accent-foreground) 20%, transparent);
  color: color-mix(in oklch, var(--foreground) 96%, var(--accent-foreground));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 14%, transparent),
    0 10px 20px -18px color-mix(in oklch, var(--accent-foreground) 62%, transparent);
}

.story-empty-icon-glyph {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  line-height: 1;
  background: color-mix(in oklch, var(--primary) 28%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--primary) 44%, transparent),
    0 0 18px -12px color-mix(in oklch, var(--primary) 80%, transparent);
}

.story-empty-icon.is-pending .story-empty-icon-glyph {
  background: color-mix(in oklch, var(--accent-foreground) 34%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent-foreground) 44%, transparent),
    0 0 18px -12px color-mix(in oklch, var(--accent-foreground) 82%, transparent);
}

.story-empty-icon-label {
  line-height: 1;
}

.story-empty-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: color-mix(in oklch, var(--foreground) 98%, white);
}

.story-empty-lead {
  margin: 0;
  max-width: 50ch;
  font-size: 0.98rem;
  line-height: 1.58;
  color: color-mix(in oklch, var(--foreground) 93%, white);
}

.story-empty-hint {
  margin: 0;
  max-width: 50ch;
  font-size: 0.92rem;
  line-height: 1.58;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
}

.story-empty-hint code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 85%, transparent);
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, white);
}

.story-empty-kpis {
  width: min(460px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.story-empty-kpi {
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 10px 11px;
  display: grid;
  gap: 4px;
  text-align: left;
  background:
    radial-gradient(160px 64px at 0% -24%, color-mix(in oklch, var(--accent-foreground) 10%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-empty-kpi-label {
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.story-empty-kpi-value {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
}

.story-empty-support {
  width: min(100%, 780px);
  display: grid;
  grid-template-columns: minmax(180px, 0.44fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.story-empty-support .story-empty-kpis,
.story-empty-support .story-empty-board {
  width: 100%;
}

.story-empty-support .story-empty-kpis {
  grid-template-columns: 1fr;
  gap: 8px;
}

.story-empty-board {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.story-empty-board-single {
  grid-template-columns: 1fr;
}

.story-empty-board-card {
  display: grid;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 5px);
  background:
    radial-gradient(220px 88px at 100% -22%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 88%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
  );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-empty-board-note {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  font-size: 0.78rem;
  line-height: 1.48;
}

.story-empty-board-card-story {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.story-empty-column {
  display: grid;
  align-content: start;
  gap: 8px;
}

.story-empty-board-kicker {
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-empty-board-subtitle {
  color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-empty-board .story-empty-checklist,
.story-empty-board .story-empty-arc {
  width: 100%;
}

.story-empty-board .story-empty-checklist li,
.story-empty-board .story-empty-arc li {
  min-height: 0;
}

.story-empty-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(520px, 100%);
  display: grid;
  gap: 9px;
  text-align: left;
}

.story-empty-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 8px 11px;
  font-size: 0.83rem;
  line-height: 1.45;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--surface-control) 90%, transparent),
    color-mix(in oklch, var(--surface-panel-2) 95%, transparent)
  );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-empty-checklist li::before {
  content: "";
  margin-top: 7px;
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent-foreground) 82%, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 22%, transparent);
}

.story-empty-arc {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  width: min(520px, 100%);
  display: grid;
  gap: 9px;
}

.story-empty-arc li {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 9px 11px;
  text-align: left;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--surface-control) 90%, transparent),
    color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
  );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-empty-arc li strong {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

.story-empty-arc li span {
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.79rem;
  line-height: 1.45;
}

.story-empty-actions {
  width: min(580px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

.story-empty-details {
  width: min(540px, 100%);
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 6px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-empty-details-summary {
  list-style: none;
  cursor: pointer;
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 30px 10px 14px;
  font-size: 0.82rem;
  font-weight: 620;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  position: relative;
}

.story-empty-details-summary::-webkit-details-marker {
  display: none;
}

.story-empty-details-summary::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in oklch, var(--accent-foreground) 78%, var(--primary));
  font-weight: 700;
}

.story-empty-details[open] .story-empty-details-summary::after {
  content: "-";
}

.story-empty-details-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.story-empty-action {
  margin-top: 0;
  width: 100%;
  min-width: 0;
  border-color: color-mix(in oklch, var(--primary) 54%, var(--border));
  box-shadow:
    0 10px 20px -18px color-mix(in oklch, var(--primary) 62%, transparent),
    var(--shadow-xs);
}

.story-empty-action-template {
  border-color: color-mix(in oklch, var(--accent-foreground) 40%, var(--border));
  min-width: 0;
}

.story-empty-action:hover {
  border-color: color-mix(in oklch, var(--primary) 62%, var(--border));
}

.story-empty-action-template:hover {
  border-color: color-mix(in oklch, var(--accent-foreground) 54%, var(--border));
}

.story-empty-cta-note {
  margin: 2px 0 0;
  max-width: 62ch;
  font-size: 0.8rem;
  line-height: 1.45;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
}

@media (max-width: 980px) {
  .story-empty-support {
    grid-template-columns: 1fr;
  }

  .story-empty-board-card-story {
    grid-template-columns: 1fr;
  }
}

.story-list-head {
  margin-top: 8px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: calc(var(--radius) - 4px);
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background:
    radial-gradient(220px 88px at 0% -24%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-list-head.is-idle {
  border-color: color-mix(in oklch, var(--muted-foreground) 32%, var(--border-soft));
}

.story-list-head.is-pending {
  border-color: color-mix(in oklch, var(--accent-foreground) 42%, var(--border-soft));
  background:
    radial-gradient(220px 88px at 0% -24%, color-mix(in oklch, var(--accent-foreground) 12%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-list-head.is-ready {
  border-color: color-mix(in oklch, var(--chart-1) 42%, var(--border-soft));
  background:
    radial-gradient(220px 88px at 0% -24%, color-mix(in oklch, var(--chart-1) 11%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.story-list-head-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.story-list-head-copy h3 {
  margin: 0;
  font-size: 0.96rem;
  color: color-mix(in oklch, var(--foreground) 95%, white);
}

.story-list-head-summary {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
}

.story-list-head.is-pending .story-list-head-summary {
  color: color-mix(in oklch, var(--foreground) 90%, var(--accent-foreground));
}

.story-list-head.is-ready .story-list-head-summary {
  color: color-mix(in oklch, var(--foreground) 92%, var(--chart-1));
}

.story-list-head .status-pill {
  margin: 0;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 10px;
  font-size: 0.72rem;
}

.story-list-head.is-pending .status-pill {
  border-color: color-mix(in oklch, var(--accent-foreground) 44%, var(--border));
  box-shadow: 0 6px 14px -16px color-mix(in oklch, var(--accent-foreground) 62%, transparent);
}

.story-list-head.is-ready .status-pill {
  border-color: color-mix(in oklch, var(--chart-1) 44%, var(--border));
  box-shadow: 0 6px 14px -16px color-mix(in oklch, var(--chart-1) 62%, transparent);
}

.story-timeline-list {
  max-height: 396px;
  gap: 12px;
}

.story-timeline-list-empty {
  display: grid;
  justify-items: stretch;
  gap: 18px;
  border: 1px dashed color-mix(in oklch, var(--border-soft) 85%, transparent);
  border-radius: calc(var(--radius) - 2px);
  padding: 24px 22px;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  text-align: left;
  background:
    radial-gradient(300px 130px at 12% -10%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 92%, transparent);
  position: relative;
  overflow: hidden;
}

.story-timeline-list-empty.is-pending {
  border-style: solid;
  border-color: color-mix(in oklch, var(--accent-foreground) 42%, var(--border-soft));
  background:
    radial-gradient(300px 130px at 12% -10%, color-mix(in oklch, var(--accent-foreground) 14%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 92%, transparent);
}

.story-timeline-list-empty::before {
  content: "";
  position: absolute;
  inset: -24% -10% auto;
  height: 120px;
  background:
    radial-gradient(240px 90px at 18% 54%, color-mix(in oklch, var(--primary) 20%, transparent), transparent 72%),
    radial-gradient(220px 90px at 82% 44%, color-mix(in oklch, var(--accent-foreground) 14%, transparent), transparent 74%);
  opacity: 0.62;
  filter: blur(7px);
  pointer-events: none;
  z-index: 0;
  animation: story-empty-sheen 8s linear infinite;
}

.story-timeline-list-empty.is-pending::before {
  background:
    radial-gradient(240px 90px at 18% 54%, color-mix(in oklch, var(--accent-foreground) 22%, transparent), transparent 72%),
    radial-gradient(220px 90px at 82% 44%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 74%);
}

.story-timeline-list-empty > * {
  position: relative;
  z-index: 1;
}

.story-timeline-list-empty-main {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.story-timeline-list-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 118px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 34%, transparent);
  background:
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--primary) 28%, transparent),
      color-mix(in oklch, var(--accent-foreground) 10%, transparent)
    );
  color: color-mix(in oklch, var(--primary-foreground) 90%, white);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: story-empty-float 5.4s ease-in-out infinite;
}

.story-timeline-list-empty-icon.is-pending {
  border-color: color-mix(in oklch, var(--accent-foreground) 50%, transparent);
  background:
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--accent-foreground) 30%, transparent),
      color-mix(in oklch, var(--primary) 10%, transparent)
    );
}

.story-timeline-list-empty-icon-glyph {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  line-height: 1;
  background: color-mix(in oklch, var(--primary) 30%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--primary) 42%, transparent),
    0 0 16px -10px color-mix(in oklch, var(--primary) 78%, transparent);
}

.story-timeline-list-empty-icon.is-pending .story-timeline-list-empty-icon-glyph {
  background: color-mix(in oklch, var(--accent-foreground) 34%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent-foreground) 42%, transparent),
    0 0 16px -10px color-mix(in oklch, var(--accent-foreground) 76%, transparent);
}

.story-timeline-list-empty-icon-label {
  line-height: 1;
}

.story-timeline-list-empty-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: color-mix(in oklch, var(--foreground) 96%, var(--accent-foreground));
}

.story-timeline-list-empty-hint {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in oklch, var(--foreground) 89%, var(--muted-foreground));
}

.story-timeline-list-empty-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.story-timeline-list-empty-board {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 4px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 88%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-timeline-list-empty-board-label {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-timeline-list-empty-board-note {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  font-size: 0.79rem;
  line-height: 1.45;
}

.story-timeline-list-empty-status .status-pill {
  margin: 0;
  font-size: 0.75rem;
  padding: 5px 10px;
}

.story-timeline-list-empty-preview {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.story-timeline-list-empty-card {
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 8px);
  padding: 10px;
  display: grid;
  gap: 7px;
  text-align: left;
  background:
    radial-gradient(180px 72px at 100% -22%, color-mix(in oklch, var(--primary) 11%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.story-timeline-list-empty-card-kicker {
  color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-timeline-list-empty-card strong {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.82rem;
}

.story-timeline-list-empty-card span {
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  font-size: 0.76rem;
  line-height: 1.45;
}

.story-timeline-list-empty-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

.story-timeline-list-empty-action {
  margin-top: 0;
  min-width: 220px;
  flex: 1 1 220px;
  border-color: color-mix(in oklch, var(--primary) 54%, var(--border));
  box-shadow:
    0 10px 18px -18px color-mix(in oklch, var(--primary) 58%, transparent),
    var(--shadow-xs);
}

.story-timeline-list-empty-action-template {
  border-color: color-mix(in oklch, var(--accent-foreground) 42%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--accent-foreground) 18%, var(--surface-control)),
    color-mix(in oklch, var(--surface-panel-2) 92%, var(--surface-control))
  );
}

.story-timeline-list-empty-action:hover {
  border-color: color-mix(in oklch, var(--primary) 62%, var(--border));
}

.story-timeline-list-empty-action-template:hover {
  border-color: color-mix(in oklch, var(--accent-foreground) 54%, var(--border));
}

.story-timeline-list-empty-cta {
  margin: 0;
  max-width: 60ch;
  font-size: 0.79rem;
  line-height: 1.45;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
}

.story-segment-card {
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 3px);
  background:
    radial-gradient(240px 120px at 100% -20%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  color: var(--foreground);
  width: 100%;
  min-height: 0;
  padding: 14px;
  text-align: left;
  display: grid;
  gap: 10px;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
  letter-spacing: -0.005em;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  position: relative;
  overflow: hidden;
}

.story-segment-card:hover {
  transform: translateY(-1px);
  filter: none;
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    0 12px 20px -22px color-mix(in oklch, var(--primary) 58%, transparent);
}

.story-segment-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 24%, transparent);
}

.story-segment-card.is-selected {
  border-color: color-mix(in oklch, var(--primary) 58%, var(--border));
  background:
    radial-gradient(280px 120px at 100% -20%, color-mix(in oklch, var(--primary) 20%, transparent), transparent 72%),
    color-mix(in oklch, var(--card) 90%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 26%, transparent),
    0 12px 22px -24px color-mix(in oklch, var(--primary) 66%, transparent);
}

.story-segment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.story-segment-index {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 84%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.story-segment-card.is-selected .story-segment-index {
  color: color-mix(in oklch, var(--foreground) 98%, white);
  border-color: color-mix(in oklch, var(--primary) 48%, transparent);
  background: color-mix(in oklch, var(--primary) 18%, transparent);
}

.story-segment-state {
  font-size: 0.73rem;
}

.story-segment-kicker {
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-segment-title {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 1rem;
  line-height: 1.26;
}

.story-segment-card.is-selected .story-segment-title {
  color: color-mix(in oklch, var(--foreground) 98%, white);
}

.story-segment-text {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.86rem;
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.story-segment-cues {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.story-segment-footer {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.story-segment-cue {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
  color: color-mix(in oklch, var(--foreground) 84%, var(--accent-foreground));
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
}

.story-segment-card.is-selected .story-segment-cue {
  border-color: color-mix(in oklch, var(--primary) 36%, transparent);
  background: color-mix(in oklch, var(--primary) 14%, transparent);
}

.story-segment-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.story-segment-meta {
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
  font-size: 0.73rem;
  line-height: 1.42;
}

@keyframes story-progress-pulse {
  0%,
  100% {
    filter: saturate(0.95);
  }
  50% {
    filter: saturate(1.2);
  }
}

@keyframes story-empty-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5px);
  }
}

@keyframes story-empty-sheen {
  0% {
    transform: translateX(-3%);
  }
  50% {
    transform: translateX(3%);
  }
  100% {
    transform: translateX(-3%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-btn {
    transition: none !important;
  }

  .tab-content.active > .panel {
    animation: none !important;
  }

  .story-empty-icon,
  .story-timeline-list-empty-icon,
  .story-empty-state::before,
  .story-timeline-list-empty::before {
    animation: none !important;
  }
}

.panel-transcript .transcript {
  min-height: 420px;
  max-height: 560px;
}

.panel-transcript-live .transcript {
  min-height: 320px;
  max-height: min(56vh, 520px);
}

.live-support-intro {
  margin: 0;
  color: var(--muted-foreground);
  max-width: 42ch;
  line-height: 1.45;
  font-size: 0.84rem;
}

.live-reading-stack {
  margin-top: 12px;
  display: grid;
  gap: 14px;
}

.live-result-card {
  border: 1px solid color-mix(in oklch, var(--primary) 22%, var(--border));
  border-radius: calc(var(--radius) + 2px);
  padding: 16px 18px;
  background:
    radial-gradient(320px 140px at 0% -22%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), color-mix(in oklch, var(--surface-panel-2) 84%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-xs);
}

.live-result-card.is-empty {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--border-soft) 78%, transparent);
}

.live-result-card.is-error {
  border-color: color-mix(in oklch, var(--destructive) 42%, var(--border));
  background:
    radial-gradient(300px 120px at 8% -18%, color-mix(in oklch, var(--destructive) 12%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.live-result-card.is-streaming {
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 18%, transparent),
    0 0 0 6px color-mix(in oklch, var(--primary) 10%, transparent);
}

.live-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.live-result-label {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: color-mix(in oklch, var(--foreground) 94%, white);
}

.live-result-body {
  margin-top: 12px;
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
  font-size: 0.96rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.live-history-shell {
  border: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  border-radius: calc(var(--radius) + 2px);
  padding: 14px 14px 12px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 82%, transparent), color-mix(in oklch, var(--surface-panel-2) 76%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent);
}

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

.live-history-head h3 {
  margin: 0;
  font-size: 1rem;
  color: color-mix(in oklch, var(--foreground) 94%, white);
}

.live-history-hint {
  margin: 6px 0 0;
  color: var(--muted-foreground);
  line-height: 1.45;
  font-size: 0.84rem;
}

.panel-transcript-live .conversation-history {
  min-height: 220px;
  max-height: min(60vh, 520px);
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 6px 2px 2px;
  gap: 12px;
}

.panel-transcript-live .conversation-history:empty::before {
  content: attr(data-empty-text);
  color: var(--muted-foreground);
  font-size: 0.94rem;
}

.live-technical-timeline {
  margin-top: 18px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 82%, transparent), color-mix(in oklch, var(--surface-panel-2) 88%, transparent));
  border-color: color-mix(in oklch, var(--border-soft) 82%, transparent);
}

.live-debug-transcript-shell {
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 76%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 86%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent);
}

.live-debug-transcript-shell .transcript {
  min-height: 180px;
  max-height: min(30vh, 320px);
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.transcript,
.events {
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) - 1px);
  background: linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  padding: 14px 14px;
  display: grid;
  gap: 11px;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.entry {
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  background: color-mix(in oklch, var(--surface-control) 74%, transparent);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.entry.system {
  border-color: color-mix(in oklch, var(--accent-foreground) 36%, var(--border));
  background: color-mix(in oklch, var(--accent-foreground) 14%, transparent);
}

.conversation-history .entry.user {
  border-color: color-mix(in oklch, var(--primary) 26%, var(--border));
  background: color-mix(in oklch, var(--primary) 11%, transparent);
  justify-self: end;
  max-width: 86%;
}

.conversation-history .entry.assistant {
  border-color: color-mix(in oklch, var(--accent) 26%, var(--border));
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  justify-self: start;
  max-width: 86%;
}

@media (max-width: 980px) {
  .live-secondary-tools-grid {
    grid-template-columns: 1fr;
  }
}

.entry.error {
  border-color: color-mix(in oklch, var(--destructive) 38%, var(--border));
  background: color-mix(in oklch, var(--destructive) 14%, transparent);
}

.entry small {
  display: block;
  color: var(--muted-foreground);
  margin-bottom: 4px;
  font-size: 0.8rem;
}

.active-task-empty-state {
  border: 1px dashed color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 2px);
  padding: 22px 20px;
  background:
    radial-gradient(250px 120px at 0% -20%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 74%),
    repeating-linear-gradient(
      -45deg,
      color-mix(in oklch, var(--muted-ui) 66%, transparent),
      color-mix(in oklch, var(--muted-ui) 66%, transparent) 12px,
      color-mix(in oklch, var(--muted-ui) 44%, transparent) 12px,
      color-mix(in oklch, var(--muted-ui) 44%, transparent) 24px
    ),
    color-mix(in oklch, var(--card) 84%, transparent);
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.active-task-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  min-height: 28px;
  border: 1px solid color-mix(in oklch, var(--primary) 42%, var(--border));
  border-radius: 999px;
  padding: 4px 10px;
  background: color-mix(in oklch, var(--primary) 14%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.active-task-empty-title {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 700;
  color: color-mix(in oklch, var(--foreground) 95%, white);
}

.active-task-empty-hint {
  margin: 0;
  max-width: 44ch;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.9rem;
  line-height: 1.55;
}

.active-task-empty-actions {
  margin-top: 4px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.active-task-empty-action {
  min-width: 166px;
}

.active-task-empty-action-primary {
  box-shadow:
    0 8px 18px -12px color-mix(in oklch, var(--primary) 68%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 22%, transparent);
}

.active-task-empty-action-refresh {
  min-width: 204px;
}

.task-entry {
  border-color: color-mix(in oklch, var(--primary) 32%, var(--border));
  background:
    radial-gradient(260px 96px at 0% -30%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  display: grid;
  gap: 10px;
  padding: 14px 14px 13px;
  border-radius: 16px;
}

.task-entry[data-task-variant="ok"] {
  border-color: color-mix(in oklch, var(--primary) 46%, var(--border));
}

.task-entry[data-task-variant="neutral"] {
  border-color: color-mix(in oklch, var(--warning) 34%, var(--border));
}

.task-entry[data-task-variant="fail"] {
  border-color: color-mix(in oklch, var(--destructive) 48%, var(--border));
  background:
    radial-gradient(260px 96px at 0% -30%, color-mix(in oklch, var(--destructive) 12%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.task-entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.task-entry-title-block {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.task-entry-eyebrow {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.task-entry-title {
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

.task-entry-subtitle {
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.35;
}

.task-entry-head .status-pill {
  margin-top: 0;
  font-size: 0.76rem;
  padding: 3px 9px;
  flex-shrink: 0;
}

.task-entry-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.task-entry-chip {
  display: grid;
  gap: 4px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 12px;
  background: color-mix(in oklch, var(--surface-control) 92%, transparent);
  align-content: start;
}

.task-entry-chip strong {
  color: color-mix(in oklch, var(--foreground) 97%, var(--accent-foreground));
  font-weight: 650;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.task-entry-chip span:last-child {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.task-entry-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.74rem;
  color: color-mix(in oklch, var(--muted-foreground) 94%, var(--foreground));
}

.task-entry-progress-track {
  position: relative;
  height: 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 90%, transparent);
  background: color-mix(in oklch, var(--surface-control) 86%, transparent);
  overflow: hidden;
}

.task-entry-progress-track[data-task-variant="neutral"] .task-entry-progress-fill {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--warning) 84%, var(--primary)),
    color-mix(in oklch, var(--accent-foreground) 80%, var(--warning))
  );
}

.task-entry-progress-track[data-task-variant="fail"] .task-entry-progress-fill {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--destructive) 88%, white),
    color-mix(in oklch, var(--warning) 74%, var(--destructive))
  );
}

.task-entry-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--primary) 88%, var(--accent-foreground)),
    color-mix(in oklch, var(--chart-4) 72%, var(--primary))
  );
  box-shadow: 0 0 10px -6px color-mix(in oklch, var(--primary) 72%, transparent);
}

.task-entry-ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.task-entry-ref-card {
  display: grid;
  gap: 5px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 12px;
  background: color-mix(in oklch, var(--surface-control) 74%, transparent);
}

.task-entry-ref-label {
  color: color-mix(in oklch, var(--muted-foreground) 95%, var(--foreground));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.task-entry-ref-value {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.task-entry-error {
  margin: 0;
  color: color-mix(in oklch, var(--destructive) 90%, white);
  font-size: 0.76rem;
  line-height: 1.45;
  padding: 9px 10px;
  border: 1px solid color-mix(in oklch, var(--destructive) 38%, transparent);
  border-radius: 12px;
  background: color-mix(in oklch, var(--destructive) 10%, transparent);
}

.panel-device-nodes {
  display: grid;
  gap: 20px;
  overflow: visible;
}

.device-node-intro {
  margin: 0;
  max-width: 72ch;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.91rem;
  line-height: 1.6;
}

.device-node-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.device-node-hero-copy,
.device-node-guide-card,
.device-node-primary-shell,
.device-node-fleet-shell,
.device-node-advanced-shell {
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  border-radius: calc(var(--radius) - 2px);
  background:
    radial-gradient(260px 110px at 0% -24%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(
      165deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 95%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-2xs);
}

.device-node-hero-copy,
.device-node-guide-card,
.device-node-primary-shell,
.device-node-fleet-shell {
  padding: 20px;
}

.device-node-primary-shell {
  display: grid;
  gap: 18px;
  align-content: start;
}

.device-node-kicker,
.device-node-guide-label,
.device-node-section-kicker {
  margin: 0 0 10px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--primary) 72%, var(--foreground));
}

.device-node-hero-copy h3,
.device-node-guide-card h3,
.device-node-shell-head h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-size: 1.1rem;
  line-height: 1.2;
}

.device-node-hero-copy > p,
.device-node-guide-card > p,
.device-node-shell-head > div > p {
  margin: 10px 0 0;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.9rem;
  line-height: 1.58;
}

.device-node-step-strip {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.device-node-step-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 90%, transparent);
  border-radius: calc(var(--radius) - 8px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 92%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
}

.device-node-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 44%, var(--border));
  background: color-mix(in oklch, var(--primary) 18%, var(--surface-panel));
  color: color-mix(in oklch, var(--primary) 82%, white);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.device-node-step-card strong {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.92rem;
}

.device-node-step-card p,
.device-node-guide-muted {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  font-size: 0.84rem;
  line-height: 1.5;
}

.device-node-guide-card {
  display: grid;
  gap: 0;
}

.device-node-guide-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.device-node-guide-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 62%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
}

.device-node-guide-card code {
  font-size: 0.82rem;
}

.device-node-shell-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.device-node-write-guard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(208px, 240px);
  gap: 16px;
  align-items: start;
  padding: 16px 17px;
  border: 1px solid color-mix(in oklch, var(--primary) 16%, var(--border-soft));
  border-radius: 18px;
  background:
    radial-gradient(220px 84px at 100% -24%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 76%, transparent);
}

.device-node-write-guard-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.device-node-write-guard-label {
  color: color-mix(in oklch, var(--muted-foreground) 90%, var(--foreground));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.device-node-write-guard-copy strong {
  color: color-mix(in oklch, var(--foreground) 97%, white);
  max-width: 34ch;
  font-size: 0.99rem;
  line-height: 1.28;
}

.device-node-write-guard-copy p {
  margin: 0;
  max-width: 40ch;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.84rem;
  line-height: 1.55;
}

.device-node-write-guard-side {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.device-node-role-field {
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 16px;
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
}

.device-node-role-field > span {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.device-node-role-field select {
  width: 100%;
}

.device-node-write-guard-side .status-pill {
  width: fit-content;
  margin: 0;
}

.device-node-shell-head > div {
  min-width: 0;
}

.device-node-shell-aside {
  margin: 0;
  max-width: 32ch;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 92%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 97%, transparent)
    );
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  font-size: 0.84rem;
  line-height: 1.5;
}

.device-node-context-row {
  margin-top: 2px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.device-node-context-row .status-pill {
  margin: 0;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  justify-content: center;
  text-align: center;
}

.panel-device-nodes .device-node-stack {
  margin-top: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 22px;
  align-items: start;
}

.panel-device-nodes .device-node-stack > * {
  width: 100%;
  min-width: 0;
}

.device-node-advanced-shell {
  padding: 0;
  overflow: clip;
}

.device-node-advanced-shell > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

.device-node-advanced-shell > summary::-webkit-details-marker {
  display: none;
}

.device-node-advanced-title {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-weight: 700;
}

.device-node-advanced-hint {
  max-width: 42ch;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: right;
}

.device-node-advanced-body {
  display: grid;
  gap: 18px;
  padding: 0 20px 20px;
}

.panel-device-nodes .device-node-fleet-summary,
.panel-device-nodes .device-node-list-toolbar,
.panel-device-nodes .device-node-list-context,
.panel-device-nodes .device-node-snapshot,
.panel-device-nodes .device-node-meta-row,
.panel-device-nodes .device-node-list-hint,
.panel-device-nodes .device-node-list {
  grid-column: 1 / -1;
}

.device-node-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid color-mix(in oklch, var(--primary) 22%, var(--border-soft));
  border-radius: calc(var(--radius) - 3px);
  padding: 22px;
  gap: 20px;
  background:
    radial-gradient(280px 110px at 0% -22%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 72%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-2xs);
}

.device-node-primary-shell .device-node-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.device-node-primary-shell .device-node-form-grid .field:nth-child(5) {
  grid-column: 1 / -1;
}

.device-node-form-grid-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.device-node-field-wide {
  grid-column: 1 / -1;
}

.device-node-support-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 4px);
  padding: 20px;
  gap: 20px;
  align-items: start;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--surface-control) 88%, transparent),
    color-mix(in oklch, var(--surface-panel-2) 95%, transparent)
  );
}

.device-node-support-grid .meta-box {
  min-height: 102px;
}

.device-node-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  border: 1px solid color-mix(in oklch, var(--primary) 20%, var(--border-soft));
  border-radius: calc(var(--radius) - 4px);
  padding: 18px;
  gap: 12px;
  background:
    radial-gradient(220px 92px at 0% -28%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 72%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 88%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
}

.device-node-actions > button {
  width: 100%;
  min-height: 50px;
  flex: 0 0 auto;
  min-width: 0;
}

.device-node-actions-primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.device-node-primary-action-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.device-node-primary-action-hint {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  font-size: 0.82rem;
  line-height: 1.5;
}

.device-node-actions-support {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.device-node-actions-secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.device-node-advanced-summary-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.device-node-advanced-summary-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.device-node-actions .device-node-action-template {
  order: 2;
  border-style: dashed;
  border-color: color-mix(in oklch, var(--accent-foreground) 42%, var(--border));
  background:
    radial-gradient(180px 62px at 0% -24%, color-mix(in oklch, var(--accent-foreground) 11%, transparent), transparent 74%),
    linear-gradient(
      165deg,
      color-mix(in oklch, var(--secondary) 70%, var(--surface-control-hover)),
      color-mix(in oklch, var(--surface-panel-2) 84%, var(--surface-control))
    );
}

.device-node-actions .device-node-action-template:hover {
  border-color: color-mix(in oklch, var(--accent-foreground) 58%, var(--border));
}

.device-node-actions #deviceNodeUpsertBtn {
  order: -1;
  grid-column: 1 / -1;
  min-height: 56px;
  flex: 0 0 auto;
}

.device-node-actions .device-node-action-conflict {
  order: 6;
  grid-column: span 2;
}

.device-node-actions .device-node-action-refresh {
  order: 3;
}

.device-node-actions .device-node-action-heartbeat {
  order: 4;
}

.device-node-actions .device-node-action-status {
  order: 5;
}

.device-node-actions-secondary .device-node-action-heartbeat {
  order: 1;
}

.device-node-actions-secondary .device-node-action-status {
  order: 2;
}

.device-node-actions-secondary .device-node-action-conflict {
  order: 3;
  grid-column: auto;
}

.device-node-actions .device-node-action-upsert {
  border-color: color-mix(in oklch, var(--primary) 62%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 20%, transparent),
    0 12px 22px -20px color-mix(in oklch, var(--primary) 66%, transparent),
    var(--shadow-sm);
}

.device-node-actions .device-node-action-heartbeat {
  border-color: color-mix(in oklch, var(--chart-1) 40%, var(--border));
  background:
    radial-gradient(160px 62px at 0% -22%, color-mix(in oklch, var(--chart-1) 12%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--secondary) 72%, var(--surface-control-hover)),
      color-mix(in oklch, var(--surface-panel-2) 82%, var(--surface-control))
    );
}

.device-node-actions .device-node-action-heartbeat:hover {
  border-color: color-mix(in oklch, var(--chart-1) 56%, var(--border));
}

.device-node-actions .device-node-action-conflict {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--destructive) 40%, var(--border));
  background:
    radial-gradient(180px 72px at 0% -24%, color-mix(in oklch, var(--destructive) 10%, transparent), transparent 74%),
    linear-gradient(
      165deg,
      color-mix(in oklch, var(--secondary) 72%, var(--surface-control-hover)),
      color-mix(in oklch, var(--surface-panel-2) 84%, var(--surface-control))
    );
}

.device-node-actions .device-node-action-conflict:hover {
  border-color: color-mix(in oklch, var(--destructive) 54%, var(--border));
}

.device-node-meta-row {
  margin-top: 0;
}

.device-node-meta-row > div {
  min-height: 62px;
}

.device-node-meta-row strong {
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
}

.device-node-list-hint {
  margin: 0;
  position: relative;
  display: grid;
  gap: 5px;
  padding: 12px 14px 12px 34px;
  border: 1px solid color-mix(in oklch, var(--primary) 24%, var(--border-soft));
  border-radius: calc(var(--radius) - 8px);
  background:
    radial-gradient(220px 84px at 0% -22%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 95%, var(--surface-control))
    );
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.85rem;
  line-height: 1.5;
}

.device-node-list-hint::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  border-radius: 999px;
  width: 8px;
  height: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--primary) 70%, var(--foreground));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 12%, transparent);
}

.device-node-list-hint.is-empty {
  border-color: color-mix(in oklch, var(--chart-3) 34%, var(--border-soft));
  background:
    radial-gradient(220px 86px at 0% -24%, color-mix(in oklch, var(--chart-3) 12%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 88%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 95%, var(--surface-control))
    );
}

.device-node-list-hint.is-empty::before {
  background: color-mix(in oklch, var(--chart-3) 72%, var(--foreground));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--chart-3) 14%, transparent);
}

.device-node-list-hint.is-filtered {
  border-color: color-mix(in oklch, var(--accent-foreground) 34%, var(--border-soft));
  background:
    radial-gradient(220px 86px at 0% -24%, color-mix(in oklch, var(--accent-foreground) 12%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 88%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 95%, var(--surface-control))
    );
}

.device-node-list-hint.is-filtered::before {
  background: color-mix(in oklch, var(--accent-foreground) 76%, var(--foreground));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent-foreground) 16%, transparent);
}

.device-node-list-hint.is-ready {
  border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border-soft));
  background:
    radial-gradient(220px 86px at 0% -24%, color-mix(in oklch, var(--chart-1) 11%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 88%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 95%, var(--surface-control))
    );
}

.device-node-list-hint.is-ready::before {
  background: color-mix(in oklch, var(--chart-1) 78%, var(--foreground));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--chart-1) 14%, transparent);
}

.device-node-fleet-shell {
  display: grid;
  gap: 18px;
}

.device-node-fleet-summary {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 16px;
}

.device-node-list-toolbar {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  align-items: stretch;
  gap: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--primary) 20%, var(--border-soft));
  border-radius: calc(var(--radius) - 4px);
  padding: 14px 15px;
  background:
    radial-gradient(220px 92px at 0% -24%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 72%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control))
    );
}

.device-node-toolbar-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 760px;
}

.device-node-filter-field {
  margin: 0;
  width: 100%;
  padding: 8px;
  border: 1px solid color-mix(in oklch, var(--primary) 30%, var(--border-soft));
  border-radius: calc(var(--radius) - 8px);
  background:
    radial-gradient(220px 84px at 0% -20%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
}

.device-node-filter-field > span {
  color: color-mix(in oklch, var(--foreground) 91%, var(--muted-foreground));
}

.device-node-sort-field {
  margin: 0;
  width: 100%;
  padding: 8px;
  border: 1px solid color-mix(in oklch, var(--primary) 30%, var(--border-soft));
  border-radius: calc(var(--radius) - 8px);
  background:
    radial-gradient(220px 84px at 0% -20%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
}

.device-node-sort-field > span {
  color: color-mix(in oklch, var(--foreground) 91%, var(--muted-foreground));
}

.device-node-filter-field .select-trigger,
.device-node-sort-field .select-trigger {
  border-color: color-mix(in oklch, var(--primary) 44%, var(--border));
  background:
    radial-gradient(180px 72px at 0% -20%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-hover) 88%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 84%, var(--surface-control))
    );
  color: color-mix(in oklch, var(--foreground) 98%, white);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 10%, transparent),
    0 8px 14px -20px color-mix(in oklch, var(--primary) 26%, transparent);
}

.device-node-filter-field .select-trigger:hover,
.device-node-sort-field .select-trigger:hover {
  border-color: color-mix(in oklch, var(--primary) 56%, var(--border));
}

.device-node-filter-field .select-shell.is-open .select-trigger,
.device-node-sort-field .select-shell.is-open .select-trigger {
  border-color: color-mix(in oklch, var(--primary) 56%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 7%, transparent),
    0 0 0 3px color-mix(in oklch, var(--primary) 20%, transparent);
}

.device-node-list-stats {
  margin: 0;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: end;
  min-width: 216px;
  border: 1px solid color-mix(in oklch, var(--primary) 26%, var(--border-soft));
  border-radius: calc(var(--radius) - 6px);
  padding: 11px 14px;
  background:
    radial-gradient(180px 70px at 0% -16%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.86rem;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.device-node-list-stats strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1ch;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 34%, var(--border-soft));
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: color-mix(in oklch, var(--foreground) 96%, var(--accent-foreground));
  font-family: var(--font-mono);
}

.device-node-list-stats.is-empty {
  border-color: color-mix(in oklch, var(--border-soft) 88%, transparent);
}

.device-node-list-stats.is-filtered {
  border-color: color-mix(in oklch, var(--destructive) 38%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 90%, var(--destructive));
}

.device-node-list-stats.is-ready {
  border-color: color-mix(in oklch, var(--chart-1) 40%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
}

.device-node-list-context {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  gap: 10px;
}

.device-node-context-chip {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid color-mix(in oklch, var(--primary) 24%, var(--border-soft));
  border-radius: 999px;
  padding: 6px 14px;
  background:
    radial-gradient(150px 58px at 0% -16%, color-mix(in oklch, var(--primary) 11%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 92%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 97%, transparent)
    );
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.device-node-context-chip.is-muted {
  border-color: color-mix(in oklch, var(--border-soft) 88%, transparent);
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
}

.device-node-context-chip.is-filtered {
  border-color: color-mix(in oklch, var(--accent-foreground) 44%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 90%, var(--accent-foreground));
}

.device-node-context-chip.is-active {
  border-color: color-mix(in oklch, var(--primary) 54%, var(--border));
  color: color-mix(in oklch, var(--foreground) 97%, white);
  background:
    radial-gradient(150px 58px at 0% -16%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-hover) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 95%, transparent)
    );
}

#deviceNodeListScopeChip.is-empty {
  border-color: color-mix(in oklch, var(--border-soft) 88%, transparent);
}

#deviceNodeListScopeChip.is-filtered {
  border-color: color-mix(in oklch, var(--destructive) 40%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 90%, var(--destructive));
}

#deviceNodeListScopeChip.is-full {
  border-color: color-mix(in oklch, var(--chart-1) 42%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 92%, var(--chart-1));
}

.device-node-snapshot {
  margin-top: 0;
  border: 1px solid color-mix(in oklch, var(--primary) 22%, var(--border-soft));
  border-radius: calc(var(--radius) - 4px);
  padding: 16px;
  background:
    radial-gradient(250px 100px at 0% -22%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  display: grid;
  gap: 12px;
}

.device-node-snapshot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.device-node-snapshot-head h3 {
  margin: 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in oklch, var(--muted-foreground) 88%, var(--foreground));
}

.device-node-snapshot-head .status-pill {
  white-space: nowrap;
  min-height: 30px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.01em;
}

.device-node-snapshot-grid {
  display: grid;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.device-node-snapshot-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(98px, 0.55fr) minmax(0, 0.72fr) minmax(110px, 0.7fr);
  align-items: center;
  gap: 9px;
  min-width: 640px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: calc(var(--radius) - 9px);
  padding: 11px 13px;
  background:
    radial-gradient(180px 68px at 0% -20%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 92%, transparent);
}

.device-node-snapshot-row[role="button"] {
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease;
}

.device-node-snapshot-row[role="button"]:hover {
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border-soft));
  background:
    radial-gradient(180px 68px at 0% -20%, color-mix(in oklch, var(--primary) 11%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 94%, transparent);
  transform: translateY(-1px);
}

.device-node-snapshot-row[role="button"]:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--primary) 52%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--primary) 22%, transparent),
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 9%, transparent);
}

.device-node-snapshot-row.is-selected {
  border-color: color-mix(in oklch, var(--primary) 56%, var(--border));
  background:
    radial-gradient(220px 72px at 0% -20%, color-mix(in oklch, var(--primary) 17%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control-hover) 94%, var(--surface-control));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 10%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 22%, transparent),
    0 8px 16px -20px color-mix(in oklch, var(--primary) 50%, transparent);
}

.device-node-snapshot-row-head {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft));
  background: color-mix(in oklch, var(--surface-panel-2) 96%, transparent);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground) 88%, var(--foreground));
}

.device-node-snapshot-col-head {
  font-weight: 600;
}

.device-node-snapshot-identity {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.device-node-snapshot-identity strong {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 0.84rem;
  line-height: 1.2;
}

.device-node-snapshot-identity small {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-family: var(--font-mono);
  font-size: 0.71rem;
  overflow-wrap: anywhere;
}

.device-node-snapshot-row.is-selected .device-node-snapshot-identity strong {
  color: color-mix(in oklch, var(--foreground) 99%, white);
}

.device-node-snapshot-row .device-node-snapshot-status {
  justify-self: start;
  padding: 4px 9px;
  font-size: 0.72rem;
}

.device-node-snapshot-platform,
.device-node-snapshot-last-seen {
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

.device-node-snapshot-row.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border-soft));
}

.device-node-snapshot-row.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 36%, var(--border-soft));
}

.device-node-snapshot-row.is-neutral {
  border-color: color-mix(in oklch, var(--border-soft) 86%, transparent);
}

.device-node-snapshot-empty,
.device-node-snapshot-overflow {
  margin: 0;
  border: 1px dashed color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 9px);
  padding: 8px 10px;
  color: color-mix(in oklch, var(--muted-foreground) 94%, var(--foreground));
  font-size: 0.8rem;
}

.device-node-snapshot-overflow {
  text-align: right;
  border-style: solid;
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

.device-node-snapshot-grid::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.device-node-snapshot-grid::-webkit-scrollbar-track {
  background: color-mix(in oklch, var(--surface-panel-2) 92%, transparent);
  border-radius: 999px;
}

.device-node-snapshot-grid::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--primary) 36%, var(--border-soft));
  border-radius: 999px;
}

.device-node-fleet-card {
  border: 1px solid color-mix(in oklch, var(--border-soft) 90%, transparent);
  border-radius: calc(var(--radius) - 6px);
  min-height: 108px;
  padding: 12px 13px;
  background:
    radial-gradient(160px 70px at 0% -15%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
  display: grid;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.device-node-fleet-card::after {
  content: "";
  position: absolute;
  inset: -42% -10% auto;
  height: 68px;
  background:
    radial-gradient(180px 68px at 20% 60%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 74%);
  pointer-events: none;
  opacity: 0.72;
}

.device-node-fleet-card h3 {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in oklch, var(--muted-foreground) 84%, var(--foreground));
}

.device-node-fleet-card p {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 700;
  color: color-mix(in oklch, var(--foreground) 96%, var(--accent-foreground));
}

.device-node-fleet-note {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.device-node-fleet-card.is-online {
  border-color: color-mix(in oklch, var(--chart-1) 38%, var(--border-soft));
  background:
    radial-gradient(180px 74px at 0% -16%, color-mix(in oklch, var(--chart-1) 12%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.device-node-fleet-card.is-degraded {
  border-color: color-mix(in oklch, var(--accent-foreground) 40%, var(--border-soft));
  background:
    radial-gradient(180px 74px at 0% -16%, color-mix(in oklch, var(--accent-foreground) 12%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.device-node-fleet-card.is-offline {
  border-color: color-mix(in oklch, var(--destructive) 42%, var(--border-soft));
  background:
    radial-gradient(180px 74px at 0% -16%, color-mix(in oklch, var(--destructive) 11%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.device-node-fleet-card.is-stale {
  border-style: dashed;
}

.device-node-list {
  max-height: 520px;
  overflow: auto;
  border-color: color-mix(in oklch, var(--primary) 20%, var(--border-soft));
  background:
    radial-gradient(320px 120px at 0% -18%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  gap: 13px;
}

.device-node-empty-state {
  border: 1px dashed color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 2px);
  padding: 24px 20px;
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in oklch, var(--muted-ui) 60%, transparent),
      color-mix(in oklch, var(--muted-ui) 60%, transparent) 10px,
      color-mix(in oklch, var(--muted-ui) 40%, transparent) 10px,
      color-mix(in oklch, var(--muted-ui) 40%, transparent) 20px
    ),
    color-mix(in oklch, var(--card) 84%, transparent);
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.device-node-empty-state::before {
  content: "";
  position: absolute;
  inset: -24% -8% auto;
  height: 120px;
  background:
    radial-gradient(220px 92px at 18% 54%, color-mix(in oklch, var(--primary) 18%, transparent), transparent 72%);
  opacity: 0.68;
  filter: blur(6px);
  pointer-events: none;
}

.device-node-empty-state > * {
  position: relative;
  z-index: 1;
}

.device-node-empty-state-filtered {
  border-style: solid;
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border-soft));
  background:
    radial-gradient(250px 115px at 12% -15%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 74%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
}

.device-node-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  min-height: 28px;
  border: 1px solid color-mix(in oklch, var(--primary) 42%, var(--border));
  border-radius: 999px;
  padding: 4px 10px;
  background: color-mix(in oklch, var(--primary) 14%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.device-node-empty-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: color-mix(in oklch, var(--foreground) 94%, white);
}

.device-node-empty-hint {
  margin: 0;
  max-width: 44ch;
  font-size: 0.89rem;
  line-height: 1.55;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
}

.device-node-empty-actions {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px;
  width: min(520px, 100%);
}

.device-node-empty-action {
  margin-top: 0;
  min-width: 188px;
  width: auto;
  flex: 1 1 188px;
}

.device-node-empty-action-secondary {
  max-width: 240px;
}

.device-node-empty-action-clear {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--accent-foreground) 42%, var(--border));
}

.device-node-card {
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: calc(var(--radius) - 3px);
  width: 100%;
  min-height: 0;
  padding: 14px 15px;
  text-align: left;
  display: grid;
  gap: 11px;
  color: var(--foreground);
  background:
    radial-gradient(280px 120px at 100% -20%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 72%),
    linear-gradient(180deg, var(--surface-control), var(--surface-panel-2));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.device-node-card:hover {
  border-color: color-mix(in oklch, var(--primary) 46%, var(--border));
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 10px 18px -20px color-mix(in oklch, var(--primary) 44%, transparent);
}

.device-node-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 22%, transparent);
}

.device-node-card.is-selected {
  border-color: color-mix(in oklch, var(--primary) 58%, var(--border));
  background:
    radial-gradient(320px 132px at 100% -20%, color-mix(in oklch, var(--primary) 22%, transparent), transparent 72%),
    color-mix(in oklch, var(--card) 90%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 20%, transparent),
    0 10px 20px -22px color-mix(in oklch, var(--primary) 52%, transparent);
}

.device-node-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.device-node-card-title {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.device-node-card-title strong {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 1rem;
  font-weight: 700;
}

.device-node-card-title span {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-family: var(--font-mono);
  font-size: 0.79rem;
  overflow-wrap: anywhere;
}

.device-node-card-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.device-node-card-fact {
  margin: 0;
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: calc(var(--radius) - 10px);
  padding: 9px 10px;
  background: color-mix(in oklch, var(--surface-control) 80%, transparent);
}

.device-node-card-fact-key {
  color: color-mix(in oklch, var(--muted-foreground) 90%, var(--foreground));
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.device-node-card-fact-value {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 0.82rem;
  line-height: 1.4;
}

.device-node-card-route {
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid color-mix(in oklch, var(--primary) 16%, var(--border-soft));
  border-radius: calc(var(--radius) - 8px);
  background:
    radial-gradient(200px 70px at 0% -18%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 86%, transparent);
}

.device-node-card-route.is-empty {
  border-color: color-mix(in oklch, var(--border-soft) 86%, transparent);
}

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

.device-node-card-route-label {
  color: color-mix(in oklch, var(--muted-foreground) 88%, var(--foreground));
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.device-node-card-version {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 80%, transparent);
  border-radius: 999px;
  padding: 4px 9px;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.72rem;
  line-height: 1.2;
}

.device-node-card-route-value {
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.device-node-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
}

.device-node-card-selection {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
  background: color-mix(in oklch, var(--surface-control) 58%, transparent);
  color: color-mix(in oklch, var(--muted-foreground) 90%, var(--foreground));
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.device-node-card-action {
  margin-top: 0;
  width: auto;
  min-width: 0;
  min-height: 34px;
  padding: 8px 14px;
  border: 1px solid color-mix(in oklch, var(--primary) 22%, var(--border-soft));
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 74%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, var(--primary));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: none;
}

.device-node-card-action:hover {
  background: color-mix(in oklch, var(--surface-control-hover) 78%, transparent);
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border));
}

.device-node-card-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
}

.device-node-card.is-selected .device-node-card-selection {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border));
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: color-mix(in oklch, var(--foreground) 95%, var(--primary));
}

.device-node-card.is-selected .device-node-card-action {
  background: color-mix(in oklch, var(--primary) 13%, var(--surface-control));
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border));
}

.device-node-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.device-node-list::-webkit-scrollbar-track {
  background: color-mix(in oklch, var(--surface-panel-2) 92%, transparent);
}

.device-node-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border) 66%, transparent);
  background:
    radial-gradient(120px 40px at 0% -20%, color-mix(in oklch, var(--primary) 24%, transparent), transparent 72%),
    color-mix(in oklch, var(--secondary) 88%, var(--surface-control));
}

.device-node-card-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.device-node-cap-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklch, var(--accent-foreground) 36%, var(--border));
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in oklch, var(--accent-foreground) 11%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
  font-size: 0.72rem;
  font-family: var(--font-mono);
}

.device-node-cap-pill.is-empty {
  border-style: dashed;
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: var(--muted-foreground);
}

@media (max-width: 1320px) and (min-width: 981px) {
  .panel-device-nodes .device-node-stack {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .device-node-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-node-form-grid .field:last-child {
    grid-column: 1 / -1;
  }

  .meta-row-status-live > div {
    min-height: 42px;
  }

  .meta-row-status-live .status-item-wide {
    grid-column: span 2;
  }
}

@media (max-width: 980px) {
  .layout {
    width: min(1280px, calc(100vw - 36px));
    margin: 20px auto 40px;
    gap: 18px;
  }

  .panel,
  .hero {
    padding: 22px;
  }

  .dashboard-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .dashboard-sidebar {
    position: static;
  }

  .dashboard-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-command-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .dashboard-glance-grid {
    grid-template-columns: 1fr;
  }

  .grid-3,
  .kpi-board,
  .operator-health-group-body {
    grid-template-columns: 1fr;
  }

  .live-negotiator-main {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .intent-compose-grid,
  .live-support-grid {
    grid-template-columns: 1fr;
  }

  .live-intent-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-intent-stage-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .live-negotiator-primary,
  .live-negotiator-secondary {
    gap: 18px;
  }

  .live-negotiator-secondary {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .meta-row-status {
    gap: 8px;
  }

  .meta-row-status-live {
    padding: 8px;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-row-status-live > div {
    min-height: 42px;
    padding: 8px 10px;
    gap: 6px;
  }

  .meta-row-status-live .status-item-wide {
    grid-column: span 2;
  }

  .media-upload-row {
    grid-template-columns: 1fr;
  }

  .media-upload-actions button {
    min-width: 0;
    width: 100%;
  }

  .actions-priority {
    gap: 11px;
  }

  .actions-priority .action-group {
    padding: 9px;
  }

  .kpi-panel > .grid-3 {
    grid-template-columns: 1fr;
  }

  .kpi-panel > .kpi-target-grid .field > span {
    min-height: 0;
  }

  .story-head-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-workspace {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .story-empty-actions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .panel-device-nodes .device-node-stack {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .device-node-form-grid,
  .device-node-support-grid,
  .device-node-actions,
  .device-node-list-toolbar {
    padding: 10px;
  }

  .device-node-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-node-actions #deviceNodeUpsertBtn {
    grid-column: 1 / -1;
  }

  .device-node-context-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-node-context-row .status-pill:last-child {
    grid-column: span 2;
  }

  .device-node-card-meta {
    grid-template-columns: 1fr;
  }

  .story-timeline-list {
    max-height: 320px;
  }
}

@media (max-width: 1120px) and (min-width: 981px) {
  .layout {
    width: min(1280px, calc(100vw - 42px));
    margin: 18px auto 34px;
    gap: 16px;
  }

  .panel,
  .hero {
    padding: 24px;
  }

  .dashboard-body {
      grid-template-columns: minmax(204px, 228px) minmax(0, 1fr);
      gap: 18px;
    }

  .dashboard-command-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .live-negotiator-main {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 18px;
  }

  .meta-row-status {
    gap: 9px;
  }

  .actions-priority {
    gap: 10px;
  }

  .kpi-panel > .kpi-target-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-panel > .kpi-target-grid .field > span {
    min-height: 0;
  }
}

@media (max-width: 860px) {
  .action-group {
    width: 100%;
  }

  .action-group > button {
    width: 100%;
    flex: 1 1 100%;
  }

  .action-group > .export-menu {
    width: 100%;
  }

  .panel-live-connection .action-group-primary > .export-menu {
    margin-left: 0;
  }

  .panel-live-controls .action-group-live-control {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .panel-live-controls .action-group-secondary {
    grid-template-columns: 1fr;
    padding: 34px 10px 10px;
  }

  .intent-followup-actions .action-group-secondary {
    grid-template-columns: 1fr;
  }

  .panel-live-controls .control-cluster {
    padding: 9px;
  }

  .panel-live-controls .control-cluster-actions {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .export-menu > summary {
    width: 100%;
  }

  .export-menu-list {
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
    max-height: min(56vh, 420px);
    overflow: auto;
  }

  .media-upload-actions {
    width: 100%;
  }

  .media-upload-actions button {
    width: 100%;
  }

  .meta-row-status {
    gap: 8px;
  }

  .panel-transcript-live .transcript {
    min-height: 300px;
    max-height: 52vh;
  }

  .story-head-grid {
    grid-template-columns: 1fr;
  }

  .story-head-grid .story-stat-card:first-child {
    grid-column: span 1;
  }

  .story-preview-column h3 {
    font-size: 0.92rem;
  }
}

@media (max-width: 720px) {
  .layout {
    width: min(1280px, calc(100vw - 24px));
    margin: 14px auto 26px;
    gap: 16px;
  }

  .panel,
  .hero {
    padding: 18px;
  }

  .hero-headline {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-toolbar {
    width: 100%;
    justify-content: flex-start;
  }

  .hero h1 {
    font-size: clamp(1.2rem, 5.2vw, 1.42rem);
    line-height: 1.24;
  }

  .hero-sub {
    font-size: 0.82rem;
    line-height: 1.48;
  }

  .hero-legacy-note {
    font-size: 0.74rem;
  }

  .live-top-summary,
  .live-support-summary {
    align-items: flex-start;
  }

  .live-top-summary-copy,
  .live-support-summary-copy {
    flex-direction: column;
    gap: 10px;
  }

  .live-top-panel-body,
  .live-support-grid {
    margin-top: 16px;
  }

  .panel-live-intent-composer textarea#message {
    min-height: 132px;
  }

  .dashboard-workspace-summary {
      padding: 16px;
    }

  .dashboard-workspace-head {
    flex-direction: column;
  }

  .dashboard-nav {
    grid-template-columns: 1fr;
  }

  .dashboard-nav .tab-btn {
      min-height: 74px;
      padding: 14px;
    }

  .dashboard-nav-icon {
    min-width: 48px;
    min-height: 32px;
    padding: 0 10px;
  }

  .dashboard-command-card,
  .dashboard-glance-card,
  .dashboard-sidebar-section {
    padding: 14px;
  }

  .tab-content {
    gap: 18px;
  }

  .tabs {
    gap: 5px;
    padding: 6px;
  }

  .tab-btn {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.86rem;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .actions-priority,
  .action-group {
    gap: 9px;
  }

  .actions-priority .action-group {
    padding: 8px;
    border-radius: calc(var(--radius) - 8px);
  }

  .panel-live-connection .action-group-primary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }

  .panel-live-connection .action-group-primary > button,
  .panel-live-connection .action-group-primary > .export-menu {
    width: 100%;
    min-width: 0;
  }

  .panel-live-connection .action-group-primary > .export-menu {
    grid-column: 1 / -1;
    margin-left: 0;
  }

  .panel-live-controls .control-cluster-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-live-controls .control-cluster-actions > button {
    width: 100%;
    min-width: 0;
  }

  .operator-summary-guide {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .operator-control-grid {
    padding: 9px;
    gap: 10px;
  }

  .operator-filter-field {
    padding: 8px;
  }

  .operator-demo-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-signal-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-demo-summary-card,
  .operator-signal-card {
    min-height: 120px;
    padding: 12px;
    gap: 8px;
  }

  .operator-mode-banner {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .operator-status-strip {
    grid-template-columns: 1fr;
  }

  .operator-last-refresh {
    width: 100%;
    justify-content: flex-start;
  }

  .operator-summary-guide-action {
    width: auto;
    min-width: 0;
  }

  .operator-summary-guide-actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-summary-guide-actions > button {
    width: 100%;
    min-width: 0;
  }

  .operator-toolbar > #operatorRefreshBtn {
    margin-left: 0;
    min-width: 0;
  }

  .operator-health-empty-actions {
    grid-template-columns: 1fr;
  }

  .operator-health-empty-action,
  .operator-health-empty-action-refresh {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .operator-board-actions-row > button {
    width: 100%;
    min-width: 0;
  }

  .operator-board-actions-row .button-warn {
    grid-column: auto;
    margin-left: 0;
  }

  .operator-support-panel > summary {
    padding: 11px 12px;
  }

  .operator-support-summary-hint {
    padding-right: 24px;
  }

  .operator-quick-start-body {
    gap: 9px;
  }

  .operator-quick-start-actions > button {
    flex: 1 1 calc(50% - 8px);
  }

  .operator-quick-start-actions > button:last-child {
    flex-basis: 100%;
  }

  .operator-lane-playbook-body {
    grid-template-columns: 1fr;
  }

  .operator-runtime-drills-status-row,
  .operator-runtime-drills-output-head {
    align-items: flex-start;
  }

  .operator-runtime-drills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-browser-worker-control-grid {
    grid-template-columns: 1fr;
  }

  .operator-session-ops-control-grid {
    grid-template-columns: 1fr;
  }

  .operator-session-ops-control-purpose-field {
    grid-column: auto;
  }

  .operator-session-ops-control-note-field,
  .operator-session-ops-control-note-step-field {
    grid-column: auto;
  }

  .operator-runtime-drills-output-grid {
    grid-template-columns: 1fr;
  }

  .operator-workflow-control-status-row,
  .operator-workflow-control-output-head,
  .operator-session-ops-control-status-row,
  .operator-session-ops-control-output-head,
  .operator-browser-worker-control-status-row,
  .operator-browser-worker-control-output-head {
    align-items: flex-start;
  }

  .operator-workflow-control-output-grid,
  .operator-session-ops-control-output-grid,
  .operator-browser-worker-control-output-grid {
    grid-template-columns: 1fr;
  }

  .operator-lane-playbook-card:first-child {
    grid-column: auto;
  }

  .operator-lane-playbook-action {
    min-height: 34px;
    padding: 4px 10px;
  }

  .operator-lane-playbook-refresh {
    width: 30px;
    min-width: 30px;
    min-height: 30px;
  }

  .device-node-form-grid,
  .device-node-support-grid,
  .device-node-actions,
  .device-node-list-toolbar {
    padding: 9px;
  }

  .device-node-form-grid,
  .device-node-support-grid {
    grid-template-columns: 1fr;
  }

  .device-node-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-node-actions #deviceNodeUpsertBtn {
    grid-column: 1 / -1;
  }

  .device-node-list-toolbar {
    grid-template-columns: 1fr;
  }

  .device-node-list-stats {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    justify-content: flex-start;
  }

  .device-node-list-context {
    margin-top: 0;
    gap: 7px;
  }

  .device-node-context-chip {
    min-height: 28px;
    padding: 3px 9px;
    font-size: 0.72rem;
  }

  .device-node-context-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .device-node-context-row .status-pill:last-child {
    grid-column: span 1;
  }

  .device-node-filter-field,
  .device-node-sort-field {
    padding: 7px;
  }

  .operator-health-group {
    padding: 10px;
  }

  .operator-health-group-head {
    position: sticky;
    top: 8px;
    z-index: 2;
    margin: -2px -2px 0;
    padding: 6px 8px;
    border: 1px solid var(--border-soft);
    border-radius: calc(var(--radius) - 4px);
    background: color-mix(in oklch, var(--card) 90%, transparent);
    backdrop-filter: blur(6px);
  }

  .operator-health-group-head h3 {
    font-size: 0.88rem;
  }

  .operator-group-toggle {
    padding: 6px 10px;
    font-size: 0.76rem;
  }

  .operator-health-group-body {
    gap: 9px;
    margin-top: 10px;
  }

  .operator-health-card .events,
  .operator-event-log-settings .events {
    max-height: 220px;
    padding: 10px;
  }

  .operator-health-card {
    padding: 10px;
  }

  .operator-health-row {
    gap: 6px;
    font-size: 0.82rem;
  }

  .operator-health-row span {
    max-width: 60%;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .operator-health-path-item {
    padding: 7px 9px;
  }

  .operator-health-path-step-label {
    font-size: 0.76rem;
  }

  .operator-health-path-step-meta,
  .operator-health-path-step-detail {
    font-size: 0.69rem;
  }

  .operator-health-hint {
    font-size: 0.78rem;
  }

  .meta-row {
    grid-template-columns: 1fr;
  }

  .meta-row-status {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }

  .meta-row-status > div {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    gap: 10px;
    justify-content: space-between;
    border-radius: calc(var(--radius) - 6px);
  }

  .meta-row-status > div > span {
    justify-content: flex-end;
    text-align: right;
    max-width: 64%;
  }

  .meta-row-status-live {
    gap: 8px;
    padding: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-row-status-live > div {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    justify-content: space-between;
    gap: 7px;
  }

  .meta-row-status-live strong {
    font-size: 0.78rem;
    line-height: 1.3;
  }

  .meta-row-status-live > div > span {
    max-width: 100%;
    justify-content: flex-end;
    text-align: right;
  }

  .meta-row-status-live > div > span:not(.status-pill) {
    font-size: 0.82rem;
    line-height: 1.3;
  }

  .meta-row-status-live .status-item-wide {
    grid-column: span 2;
  }

  .story-workspace {
    gap: 12px;
  }

  .story-controls-grid {
    grid-template-columns: 1fr;
  }

  .story-timeline-preview {
    min-height: 150px;
    padding: 12px;
  }

  .story-timeline-preview-empty .story-empty-state {
    padding: 16px 12px;
    gap: 9px;
  }

  .story-timeline-preview-empty .story-empty-actions,
  .story-timeline-preview-empty .story-empty-cta-note {
    display: none;
  }

  .story-timeline-list {
    max-height: 280px;
    padding: 10px;
  }

  .story-list-head {
    padding: 9px 10px;
    align-items: flex-start;
    flex-direction: column;
  }

  .story-list-head .status-pill {
    align-self: flex-start;
  }

  .story-guidance {
    padding: 12px;
  }

  .story-guidance-copy,
  .story-guidance-actions {
    flex-basis: 100%;
  }

  .story-guidance-actions {
    justify-content: flex-start;
  }

  .story-empty-state {
    padding: 22px 16px;
    gap: 12px;
  }

  .story-empty-lead,
  .story-empty-cta-note,
  .story-timeline-list-empty-cta {
    max-width: 100%;
  }

  .story-empty-icon,
  .story-timeline-list-empty-icon {
    min-width: 106px;
    gap: 7px;
  }

  .story-empty-kpis {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-timeline-list-empty {
    padding: 14px 12px;
    gap: 9px;
  }

  .story-empty-details-summary,
  .story-timeline-list-empty-details-summary {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .layout {
    width: min(1280px, calc(100vw - 16px));
    margin: 10px auto 20px;
    gap: 12px;
  }

  .panel,
  .hero {
    padding: 14px;
  }

  .dashboard-workspace-summary {
      margin-top: 18px;
      padding: 14px;
    }

    .dashboard-command-grid,
    .dashboard-glance-grid,
    .live-intent-switcher {
      display: grid;
      grid-template-columns: 1fr;
    }

    .field-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 4px;
    }

    .field-inline-hint {
      text-align: left;
    }

  .live-support-card {
    padding: 14px;
  }

  .dashboard-workspace-title {
    font-size: 1.04rem;
  }

  .dashboard-command-card {
    min-height: 132px;
    padding: 14px;
  }

  .dashboard-glance-card,
  .dashboard-sidebar-section {
    padding: 12px;
  }

  .tab-content {
    gap: 14px;
  }

  .panel h2 {
    margin: 0 0 16px;
    gap: 8px;
    font-size: 1.03rem;
  }

  .tabs {
    gap: 4px;
    padding: 4px;
  }

  .tab-btn {
    flex: 1 1 calc(50% - 5px);
    min-height: 42px;
    padding: 8px 10px;
    font-size: 0.79rem;
  }

  .operator-demo-summary-strip,
  .operator-signal-strip {
    grid-template-columns: 1fr;
  }

  .operator-triage-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-control-grid {
    padding: 7px;
    gap: 8px;
  }

  .operator-filter-field {
    padding: 7px;
    border-radius: calc(var(--radius) - 10px);
  }

  .operator-last-refresh {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 0.74rem;
  }

  .operator-demo-summary-card,
  .operator-signal-card {
    min-height: 98px;
    padding: 10px;
  }

  .operator-quick-start-actions > button {
    flex: 1 1 100%;
  }

  .operator-runtime-drills-grid {
    grid-template-columns: 1fr;
  }

  .operator-runtime-drills-actions > button {
    flex: 1 1 100%;
  }

  .operator-workflow-control-actions > button {
    flex: 1 1 100%;
  }

  .operator-session-ops-control-actions > button {
    flex: 1 1 100%;
  }

  .operator-browser-worker-control-actions > button {
    flex: 1 1 100%;
  }

  .operator-board-actions-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .operator-toolbar > #operatorRefreshBtn {
    margin-left: 0;
    width: 100%;
  }

  .operator-board-actions-row > button {
    width: 100%;
    min-width: 0;
  }

  .operator-lane-playbook-card {
    padding: 10px;
  }

  .operator-lane-playbook-actions {
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 8px;
  }

  .operator-lane-playbook-actions > .operator-lane-playbook-action {
    min-height: 30px;
    font-size: 0.72rem;
  }

  .operator-lane-playbook-actions > .operator-lane-playbook-refresh {
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    margin-left: 0;
  }

  .device-node-form-grid,
  .device-node-support-grid,
  .device-node-actions,
  .device-node-list-toolbar {
    padding: 7px;
  }

  .device-node-form-grid,
  .device-node-support-grid {
    grid-template-columns: 1fr;
  }

  .device-node-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-node-actions #deviceNodeUpsertBtn {
    grid-column: 1 / -1;
  }

  .device-node-list-toolbar {
    gap: 10px;
  }

  .device-node-list-context {
    gap: 6px;
  }

  .device-node-context-chip {
    min-height: 27px;
    padding: 3px 8px;
    font-size: 0.7rem;
  }

  .device-node-context-row {
    gap: 7px;
  }

  .device-node-context-row .status-pill {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 0.72rem;
  }

  .device-node-actions > button,
  .device-node-empty-action {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }

  .field {
    gap: 8px;
  }

  .field span {
    font-size: 0.86rem;
    line-height: 1.3;
  }

  input,
  select,
  textarea {
    min-height: 50px;
    padding: 11px 13px;
    font-size: 0.95rem;
    border-radius: calc(var(--radius) - 7px);
  }

  textarea {
    min-height: 96px;
  }

  button {
    min-height: 50px;
    padding: 10px 16px;
    font-size: 0.95rem;
  }

  .actions {
    margin-top: 14px;
    gap: 8px;
  }

  .actions-priority .action-group {
    padding: 7px;
    border-radius: calc(var(--radius) - 9px);
  }

  .advanced-settings {
    margin-top: 16px;
    padding: 8px 10px 12px;
  }

  .advanced-settings > :not(summary) {
    margin-top: 10px;
  }

  .meta-row-status {
    gap: 8px;
    flex-direction: column;
  }

  .meta-row-status-live {
    gap: 8px;
    padding: 8px;
    grid-template-columns: 1fr;
  }

  .meta-row-status-live > div {
    min-height: 44px;
    padding: 9px 10px;
  }

  .meta-row-status-live > div > span:not(.status-pill) {
    font-size: 0.83rem;
  }

  .meta-row-status-live .status-item-wide {
    grid-column: span 1;
  }

  .kpi-metric {
    padding: 12px;
    gap: 10px;
  }

  .kpi-label::after {
    min-width: 10px;
  }

  .kpi-value {
    font-size: 1.18rem;
  }

  .panel-transcript-live .transcript {
    min-height: 250px;
    max-height: 50vh;
  }

  .story-intro {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .story-list-head-copy h3 {
    font-size: 0.86rem;
  }

  .story-list-head-summary {
    font-size: 0.74rem;
  }

  .story-stat-card {
    padding: 12px;
    gap: 5px;
  }

  .story-stat-label {
    font-size: 0.74rem;
  }

  .story-stat-value {
    font-size: 0.94rem;
  }

  .story-progress-head {
    font-size: 0.83rem;
  }

  .story-progress-track {
    height: 10px;
  }

  .story-guidance {
    padding: 9px 10px;
    gap: 8px;
  }

  .story-guidance-chip {
    font-size: 0.67rem;
  }

  .story-guidance-title {
    font-size: 0.86rem;
  }

  .story-guidance-hint {
    font-size: 0.77rem;
  }

  .story-guidance-actions {
    width: 100%;
    gap: 7px;
  }

  .story-guidance-action {
    width: 100%;
    min-width: 0;
  }

  .story-preview-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .story-preview-text {
    font-size: 0.9rem;
  }

  .story-empty-checklist {
    width: 100%;
    gap: 7px;
  }

  .story-empty-kpis {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .story-empty-checklist li {
    padding: 7px 9px;
    font-size: 0.79rem;
  }

  .story-empty-arc {
    width: 100%;
    gap: 7px;
  }

  .story-empty-arc li {
    padding: 7px 9px;
  }

  .story-empty-arc li strong {
    font-size: 0.81rem;
  }

  .story-empty-arc li span {
    font-size: 0.75rem;
  }

  .story-empty-lead {
    font-size: 0.84rem;
  }

  .story-empty-cta-note,
  .story-timeline-list-empty-cta {
    font-size: 0.74rem;
  }

  .story-timeline-list-empty-preview {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .story-timeline-list-empty-card {
    padding: 8px 9px;
  }

  .story-timeline-list-empty-card strong {
    font-size: 0.78rem;
  }

  .story-timeline-list-empty-card span {
    font-size: 0.72rem;
  }

  .story-empty-actions {
    gap: 8px;
  }

  .story-empty-actions .story-empty-action {
    width: 100%;
    min-width: 0;
  }

  .story-empty-state {
    padding: 18px 12px;
    gap: 11px;
  }

  .story-empty-details-summary,
  .story-timeline-list-empty-details-summary {
    min-height: 44px;
    padding: 12px;
    font-size: 0.8rem;
  }

  .active-task-empty-state {
    padding: 14px;
  }

  .active-task-empty-actions {
    width: 100%;
    gap: 8px;
  }

  .active-task-empty-action {
    width: 100%;
    min-width: 0;
  }

  .task-entry {
    gap: 8px;
  }

  .task-entry-details,
  .task-entry-ref-grid {
    grid-template-columns: 1fr;
  }

  .task-entry-chip,
  .task-entry-ref-card {
    min-height: 0;
  }

  .task-entry-ref-value {
    white-space: normal;
    word-break: break-word;
  }

  .story-timeline-list-empty-action {
    width: 100%;
    min-width: 0;
  }

  .story-timeline-list-empty-actions {
    width: 100%;
  }

  .story-asset-pill {
    padding: 3px 8px;
    font-size: 0.72rem;
  }

  .story-segment-card {
    padding: 9px 10px;
    gap: 6px;
  }

  .story-segment-text {
    font-size: 0.84rem;
  }

  .device-node-fleet-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .device-node-list-toolbar {
    gap: 10px;
  }

  .device-node-snapshot-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .device-node-toolbar-controls {
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  .device-node-filter-field {
    width: 100%;
  }

  .device-node-sort-field {
    width: 100%;
  }

  .device-node-list-stats {
    width: 100%;
    justify-content: flex-start;
  }

  .device-node-fleet-card {
    padding: 9px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .background-video,
  .background-video-fade {
    display: none;
  }
}
.panel-live-top {
  order: 3;
  border-style: solid;
  border-color: color-mix(in oklch, var(--border-soft) 78%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 92%, transparent), var(--surface-panel-2));
}

.panel-live-top .live-top-summary-hint {
  display: none;
}

.panel-live-top .section-badge,
.live-support-section .section-badge {
  opacity: 0.9;
}

/* 2026-03-09: cleaner dashboard shell and flatter live surfaces */
.hero {
  padding: 18px 20px;
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: calc(var(--radius) + 6px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 94%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 98%, transparent)
    );
  backdrop-filter: blur(12px);
  box-shadow: 0 26px 48px -44px color-mix(in oklch, black 72%, transparent);
}

.hero::before,
.hero::after {
  display: none;
}

.hero-headline {
  gap: 16px;
}

.hero-toolbar {
  gap: 12px;
}

.hero h1 {
  margin-bottom: 8px;
  font-size: clamp(1.38rem, 1.9vw, 1.72rem);
}

.hero-sub {
  max-width: 58ch;
  margin-bottom: 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

.dashboard-workspace-summary {
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 12px;
}

.dashboard-workspace-head {
  align-items: flex-end;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 70%, transparent);
}

.dashboard-workspace-title {
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
}

.dashboard-workspace-description {
  max-width: 52ch;
  margin-top: 4px;
  font-size: 0.84rem;
  line-height: 1.5;
}

.dashboard-command-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-command-card {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  border-color: color-mix(in oklch, var(--border-soft) 76%, transparent);
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
  box-shadow: none;
}

.dashboard-command-card:hover {
  background: color-mix(in oklch, var(--surface-control-hover) 88%, transparent);
  box-shadow: none;
}

.dashboard-command-label,
.dashboard-command-hint {
  display: none !important;
}

.dashboard-command-title {
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.2;
}

.dashboard-glance-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-glance-card {
  padding: 8px 12px;
  border-color: color-mix(in oklch, var(--border-soft) 74%, transparent);
  background: color-mix(in oklch, var(--surface-control) 76%, transparent);
  box-shadow: none;
}

.dashboard-glance-label {
  color: color-mix(in oklch, var(--muted-foreground) 82%, white);
}

.dashboard-body {
  grid-template-columns: minmax(176px, 196px) minmax(0, 1fr);
  gap: 20px;
}

.dashboard-sidebar {
  gap: 12px;
}

.dashboard-nav {
  gap: 4px;
  padding: 8px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 88%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 94%, transparent)
    );
  box-shadow: 0 22px 38px -40px color-mix(in oklch, black 78%, transparent);
}

.dashboard-nav .tab-btn,
.dashboard-sidebar-section {
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.dashboard-nav .tab-btn {
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
}

.dashboard-nav .tab-btn:hover {
  background: color-mix(in oklch, var(--surface-control) 84%, transparent);
  transform: none;
}

.dashboard-nav .tab-btn.active {
  border: 1px solid color-mix(in oklch, var(--primary) 18%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-strong) 88%, transparent),
      color-mix(in oklch, var(--surface-control) 96%, transparent)
    );
  box-shadow:
    inset 3px 0 0 color-mix(in oklch, var(--primary) 80%, transparent),
    0 10px 22px -24px color-mix(in oklch, var(--primary) 42%, transparent);
}

.dashboard-nav-icon {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in oklch, var(--primary) 88%, white);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.dashboard-nav-copy {
  gap: 2px;
}

.dashboard-nav-title {
  font-size: 0.95rem;
  font-weight: 640;
}

.live-negotiator-main {
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.74fr);
  gap: 22px;
}

.live-negotiator-primary,
.live-negotiator-secondary {
  gap: 14px;
}

.live-negotiator-secondary {
  top: 12px;
}

.panel {
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: calc(var(--radius) + 6px);
  padding: 22px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 93%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 98%, transparent)
    );
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 42px -42px color-mix(in oklch, black 78%, transparent);
}

.panel h2 {
  margin-bottom: 18px;
  gap: 10px;
  font-size: 1.08rem;
}

.section-badge {
  padding: 3px 9px;
  border-color: color-mix(in oklch, var(--primary) 24%, transparent);
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  color: color-mix(in oklch, var(--primary) 86%, white);
}

.panel-live-intent-composer,
.live-support-section,
.panel-live-top {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 93%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 98%, transparent)
    );
}

.live-compose-intro,
.live-top-summary-hint,
.live-support-summary-hint,
.live-support-intro {
  font-size: 0.82rem;
  line-height: 1.52;
}

.live-intent-stage {
  gap: 10px;
  margin-bottom: 12px;
}

.live-intent-switcher {
  gap: 10px;
}

.live-intent-option {
  gap: 3px;
  min-height: 44px;
  padding: 12px 14px;
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 16px;
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
  box-shadow: none;
}

.live-intent-option:hover {
  transform: none;
  background: color-mix(in oklch, var(--surface-control-hover) 88%, transparent);
}

.live-intent-option.is-active {
  border-color: color-mix(in oklch, var(--primary) 28%, transparent);
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  box-shadow: none;
}

.live-intent-option-title {
  font-size: 0.84rem;
  font-weight: 640;
}

.live-compose-guidance {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.live-compose-mode-chip {
  padding: 4px 9px;
  border-color: color-mix(in oklch, var(--primary) 24%, transparent);
  background: color-mix(in oklch, var(--primary) 10%, transparent);
}

.live-compose-helper,
.live-compose-send-hint,
.advanced-hint,
.field-inline-hint {
  font-size: 0.78rem;
  line-height: 1.45;
}

.actions-priority .action-group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.action-group {
  gap: 10px;
}

.advanced-settings {
  border-color: color-mix(in oklch, var(--border-soft) 70%, transparent);
  border-radius: 18px;
  padding: 10px 12px 14px;
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
  box-shadow: none;
}

.panel-live-top .field > span {
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.panel-live-top .field :is(input, select, textarea, .select-trigger) {
  border-color: color-mix(in oklch, var(--border-soft) 78%, transparent);
  background: color-mix(in oklch, var(--surface-control) 86%, transparent);
  box-shadow: none;
}

.panel-live-top .action-group > .button-muted {
  border-color: color-mix(in oklch, var(--border-soft) 76%, transparent);
  background: color-mix(in oklch, var(--surface-control) 86%, transparent);
  color: color-mix(in oklch, var(--foreground) 96%, white);
  text-shadow: none;
  box-shadow: none;
}

.panel-live-top .action-group > .button-muted:hover {
  border-color: color-mix(in oklch, var(--primary) 34%, transparent);
  background: color-mix(in oklch, var(--surface-control-hover) 92%, transparent);
  box-shadow: none;
}

.panel-live-top .action-group > .button-muted:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.panel-live-connection .action-group-primary {
  min-height: 0;
  gap: 10px;
  padding-top: 0;
  padding-bottom: 0;
}

.panel-live-connection .action-group-primary > .button-muted {
  min-width: 152px;
}

.meta-row-status-live {
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 10px;
}

.meta-row-status > div {
  min-height: 46px;
  padding: 10px 12px;
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 16px;
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
  box-shadow: none;
}

.panel-live-top .meta-row-status > div {
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
  box-shadow: none;
}

.meta-row-status strong {
  font-size: 0.78rem;
}

.meta-row-status .status-pill {
  box-shadow: none;
}

.panel-live-controls .control-cluster,
.live-support-card,
.kpi-card,
.live-result-card {
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 20px;
  background: color-mix(in oklch, var(--surface-control) 80%, transparent);
  box-shadow: none;
}

.panel-live-controls .control-cluster {
  padding: 16px;
}

.panel-live-controls .control-cluster-actions {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.panel-live-controls .control-cluster-actions > button {
  min-height: 48px;
  border-radius: 16px;
}

.panel-live-controls .control-cluster-mic,
.panel-live-controls .control-cluster-ptt {
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
}

.panel-live-controls .control-cluster-mic .control-cluster-actions > button,
.panel-live-controls .control-cluster-ptt .control-cluster-actions > button,
.panel-live-controls .button-live-primary,
.panel-live-controls .button-live-secondary,
.panel-live-controls .button-live-tertiary,
.panel-live-controls .button-live-fallback {
  box-shadow: none;
}

.panel-live-controls .button-live-secondary,
.panel-live-controls .button-live-tertiary,
.panel-live-controls .button-live-fallback {
  border-color: color-mix(in oklch, var(--border-soft) 74%, transparent);
  background: color-mix(in oklch, var(--surface-control) 86%, transparent);
  color: color-mix(in oklch, var(--foreground) 96%, white);
  text-shadow: none;
}

.panel-live-controls .button-live-secondary:hover,
.panel-live-controls .button-live-fallback:hover {
  border-color: color-mix(in oklch, var(--primary) 34%, transparent);
  background: color-mix(in oklch, var(--surface-control-hover) 92%, transparent);
  box-shadow: none;
}

.panel-live-controls .button-live-tertiary {
  border-style: solid;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
}

.panel-live-controls .action-group-secondary {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.panel-live-controls .action-group-secondary::before {
  position: static;
  display: block;
  width: 100%;
  margin-bottom: 2px;
  padding: 0;
  background: transparent;
  letter-spacing: 0.08em;
}

.live-support-grid {
  gap: 12px;
}

.live-support-card h3 {
  margin-bottom: 14px;
  font-size: 0.98rem;
}

.kpi-card {
  padding: 16px;
}

.kpi-card h3 {
  font-size: 0.92rem;
}

.live-result-card {
  margin-top: 0;
  padding: 16px 18px;
}

.live-result-card.is-empty,
.live-result-card.is-error,
.live-result-card.is-streaming {
  box-shadow: none;
}

.live-history-shell {
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 20px;
  background: color-mix(in oklch, var(--surface-control) 80%, transparent);
}

/* 2026-03-09: quieter utility trays for connection, live controls, and support */
.panel-live-top,
.live-support-section {
  padding: 18px 20px;
}

.live-top-summary,
.live-support-summary {
  align-items: flex-start;
  gap: 12px;
}

.live-top-summary-copy,
.live-support-summary-copy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.live-top-summary-copy .section-badge,
.live-support-summary-copy .section-badge {
  width: fit-content;
  margin-top: 0;
}

.live-top-summary-title,
.live-support-summary-title {
  font-size: 0.98rem;
  font-weight: 635;
  line-height: 1.25;
}

.live-top-summary-hint,
.live-support-summary-hint {
  max-width: 58ch;
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.48;
}

.live-top-panel-body,
.live-support-grid {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
}

.panel-live-top .field > span {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground) 84%, white);
}

.connection-url-field {
  max-width: min(100%, 760px);
}

.connection-url-field input {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.82rem;
}

.panel-live-connection .action-group-primary {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.panel-live-connection .action-group-primary > button,
.panel-live-connection .action-group-primary > .export-menu {
  min-height: 44px;
}

.panel-live-connection .action-group-primary > .button-muted {
  min-width: 0;
  padding-inline: 16px;
}

.panel-live-connection .action-group-primary > .export-menu {
  margin-inline-start: auto;
}

.panel-live-connection .action-group-primary > .export-menu > summary {
  min-height: 44px;
  padding-inline: 15px;
}

.meta-row-status-live {
  margin-top: 12px;
  gap: 8px;
}

.meta-row-status > div,
.panel-live-top .meta-row-status > div {
  min-height: 0;
  padding: 9px 10px;
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 72%, transparent);
  border-color: color-mix(in oklch, var(--border-soft) 66%, transparent);
}

.meta-row-status-live > div {
  gap: 6px;
}

.meta-row-status-live strong {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground) 84%, white);
}

.meta-row-status-live .status-pill {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.88rem;
  font-weight: 620;
}

.meta-row-status-live .status-value {
  font-size: 0.88rem;
  font-weight: 620;
}

.panel-live-controls .action-group-live-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.panel-live-controls .control-cluster {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.panel-live-controls .control-cluster + .control-cluster {
  padding-left: 18px;
  border-left: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
}

.panel-live-controls .control-cluster-label {
  margin-bottom: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground) 84%, white);
}

.panel-live-controls .control-cluster-hint {
  max-width: 32ch;
  margin-bottom: 10px;
  font-size: 0.8rem;
  line-height: 1.48;
}

.panel-live-controls .control-cluster-actions {
  gap: 8px;
}

.panel-live-controls .control-cluster-actions > button {
  min-height: 44px;
  border-radius: 14px;
}

.panel-live-controls .action-group-secondary {
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
}

.panel-live-controls .action-group-secondary::before {
  content: none;
  display: none;
}

.panel-live-controls .button-live-danger,
.panel-live-controls .button-live-fallback {
  flex: 1 1 240px;
}

.panel-live-controls .button-live-danger {
  box-shadow: none;
  background: color-mix(in oklch, oklch(0.72 0.16 23) 74%, var(--surface-control));
}

.panel-live-controls .button-live-fallback {
  background: color-mix(in oklch, var(--surface-control) 88%, transparent);
}

.media-upload-field {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
}

.live-support-grid {
  gap: 10px;
}

.live-support-card {
  padding: 18px;
}

.live-support-card h3 {
  line-height: 1.28;
}

@media (max-width: 980px) {
  .panel-live-controls .action-group-live-control {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .panel-live-controls .control-cluster + .control-cluster {
    padding-left: 0;
    border-left: 0;
    padding-top: 14px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  }
}

.transcript {
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  box-shadow: none;
}

@media (max-width: 1180px) {
  .dashboard-body {
    grid-template-columns: minmax(168px, 184px) minmax(0, 1fr);
  }

  .dashboard-command-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-command-card {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 860px) {
  .hero {
    padding: 16px;
  }

  .dashboard-workspace-head {
    align-items: flex-start;
  }

  .dashboard-command-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-nav {
    border-radius: 20px;
  }

  .dashboard-nav .tab-btn {
    min-height: 54px;
  }

  .live-negotiator-main {
    gap: 16px;
  }
}

/* 2026-03-09: meaning-first cleanup for live workspace */
.dashboard-nav {
  gap: 8px;
}

.dashboard-nav .tab-btn {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  align-items: start;
  gap: 5px;
  min-height: 74px;
  padding: 12px 14px;
}

.dashboard-nav-icon {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dashboard-nav-copy {
  width: 100%;
  gap: 4px;
}

.dashboard-nav-title {
  font-size: 1rem;
  line-height: 1.18;
}

.dashboard-nav-hint {
  display: none;
}

.dashboard-workspace-head {
  align-items: flex-start;
  gap: 12px;
}

.dashboard-command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-command-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 84%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow: none;
  align-items: flex-start;
}

.dashboard-command-card:hover {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-hover) 86%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  border-color: color-mix(in oklch, var(--primary) 22%, var(--border));
}

.dashboard-command-label,
.dashboard-command-hint {
  display: block !important;
}

.dashboard-command-label {
  color: color-mix(in oklch, var(--primary) 78%, white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-command-title {
  font-size: 0.96rem;
  line-height: 1.24;
}

.dashboard-command-hint {
  max-width: none;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.45;
}

.dashboard-glance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-glance-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 6px;
  min-height: 0;
  padding: 0 0 0 16px;
  border: 0;
  border-left: 1px solid color-mix(in oklch, var(--border-soft) 70%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-glance-card:first-child {
  padding-left: 0;
  border-left: 0;
}

.dashboard-glance-label {
  margin: 0;
  color: color-mix(in oklch, var(--muted-foreground) 88%, white);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-glance-value {
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
}

.dashboard-glance-hint {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.44;
}

.live-support-summary-copy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.live-support-summary-copy > div {
  display: grid;
  gap: 6px;
}

.live-support-summary-title {
  display: block;
  max-width: 16ch;
  font-size: 1.02rem;
  line-height: 1.15;
}

.live-support-summary-hint {
  max-width: 44ch;
  font-size: 0.84rem;
  line-height: 1.5;
}

.live-support-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.live-support-card {
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 84%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow: none;
}

.live-support-card h3 {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.live-support-card {
  padding: 20px;
}

.live-support-card h3 {
  margin-bottom: 18px;
  line-height: 1.22;
}

.live-support-card-title {
  display: block;
  max-width: 28ch;
  white-space: pre-line;
  font-size: 1.04rem;
  font-weight: 650;
  line-height: 1.28;
}

.live-support-card .actions {
  margin-top: 14px;
  gap: 10px;
  flex-wrap: wrap;
}

.live-support-card .actions > button {
  min-height: 44px;
}

.live-support-card .meta-row {
  margin-top: 14px;
}

.live-support-card .meta-row > div {
  min-height: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 74%, transparent);
}

.live-support-card .meta-row strong {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground) 84%, white);
}

.live-support-card .advanced-settings {
  margin-top: 14px;
}

.live-support-card .events {
  max-height: none;
  min-height: 0;
}

.live-support-card .active-task-empty-state {
  padding: 18px;
}

.live-support-card .active-task-empty-actions {
  flex-direction: column;
  align-items: stretch;
}

.live-support-card .active-task-empty-action {
  width: 100%;
}

@media (min-width: 1100px) {
  .live-support-section {
    max-width: 920px;
  }
}

.dashboard-nav {
  gap: 6px;
  padding: 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 66%, transparent);
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 84%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 94%, transparent)
    );
  box-shadow: 0 20px 36px -40px color-mix(in oklch, black 80%, transparent);
}

.dashboard-nav .tab-btn {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  align-items: start;
  gap: 6px;
  min-height: 78px;
  padding: 14px 16px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.dashboard-nav .tab-btn:hover {
  background: color-mix(in oklch, var(--surface-control) 78%, transparent);
}

.dashboard-nav .tab-btn.active {
  border: 0;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-strong) 80%, transparent),
      color-mix(in oklch, var(--surface-control) 94%, transparent)
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--primary) 18%, transparent),
    0 8px 16px -18px color-mix(in oklch, var(--primary) 40%, transparent);
}

.dashboard-nav-icon {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in oklch, var(--primary) 88%, white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dashboard-nav-copy {
  width: 100%;
  gap: 6px;
}

.dashboard-nav-title {
  font-size: 0.98rem;
  font-weight: 640;
  line-height: 1.16;
}

.dashboard-nav-hint {
  display: none;
}

@media (max-width: 1180px) {
  .dashboard-command-grid,
  .dashboard-glance-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-command-card,
  .dashboard-glance-card {
    min-height: 0;
  }
}

@media (max-width: 860px) {
  .dashboard-nav .tab-btn {
    min-height: 68px;
  }

  .live-support-summary-copy {
    grid-template-columns: 1fr;
  }
}

/* 2026-03-09: storyteller workspace cleanup */
.panel-story-timeline {
  gap: 18px;
}

.story-shell-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

/* 2026-03-09: global shell simplification for live workspace */
.dashboard-workspace-summary {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 28px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 70%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--surface-panel) 96%, transparent),
    color-mix(in oklch, var(--surface-panel-2) 98%, transparent)
  );
  box-shadow: none;
  gap: 14px;
}

.dashboard-workspace-head {
  align-items: flex-start;
  gap: 12px;
}

.dashboard-workspace-title {
  font-size: clamp(1rem, 1.08vw, 1.14rem);
  line-height: 1.08;
}

.dashboard-workspace-description {
  margin-top: 6px;
  max-width: 58ch;
  font-size: 0.82rem;
  line-height: 1.5;
}

.dashboard-shell-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 65%, transparent);
}

.dashboard-glance-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 5px;
  min-height: 0;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-glance-card:first-child {
  padding-left: 0;
  border-left: 0;
}

.dashboard-glance-label {
  display: block;
  color: color-mix(in oklch, var(--muted-foreground) 88%, white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-glance-value {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.18;
}

.dashboard-glance-hint {
  display: block !important;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  line-height: 1.45;
}

.dashboard-sidebar {
  gap: 0;
}

.dashboard-sidebar-section {
  display: none !important;
}

.dashboard-nav {
  gap: 8px;
}

.dashboard-nav .tab-btn {
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 22px;
  box-shadow: none;
}

.dashboard-nav .tab-btn.active {
  box-shadow: none;
}

.dashboard-nav-icon {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in oklch, var(--primary) 82%, white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dashboard-nav-copy {
  width: 100%;
  gap: 6px;
}

.dashboard-nav-title {
  font-size: 0.98rem;
  font-weight: 640;
  line-height: 1.16;
}

.live-intent-secondary-shell {
  margin-top: 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  border-radius: 18px;
  background: color-mix(in oklch, var(--surface-control) 42%, transparent);
  overflow: hidden;
}

.live-intent-secondary-shell > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.live-intent-secondary-shell > summary::-webkit-details-marker {
  display: none;
}

.live-intent-secondary-shell > summary::after {
  content: "";
  margin-top: 6px;
  width: 8px;
  height: 8px;
  border-right: 2px solid color-mix(in oklch, var(--muted-foreground) 78%, transparent);
  border-bottom: 2px solid color-mix(in oklch, var(--muted-foreground) 78%, transparent);
  transform: rotate(45deg);
  transition: transform 140ms ease;
}

.live-intent-secondary-shell[open] > summary::after {
  transform: rotate(225deg);
}

.live-intent-secondary-shell[open] > summary {
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
}

.live-intent-secondary-shell > summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring-soft);
}

.live-intent-secondary-copy {
  display: grid;
  gap: 4px;
}

.live-intent-secondary-label {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.live-intent-secondary-hint {
  color: color-mix(in oklch, var(--muted-foreground) 86%, white);
  font-size: 0.78rem;
  line-height: 1.45;
}

.live-intent-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px 14px;
}

.live-intent-secondary-shell:not([open]) .live-intent-secondary-actions {
  display: none;
}

.live-intent-option-secondary {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 16px;
}

.live-intent-option-secondary .live-intent-option-label {
  font-size: 0.66rem;
}

.live-intent-option-secondary .live-intent-option-title {
  font-size: 0.9rem;
}

@media (max-width: 1180px) {
  .dashboard-shell-meta {
    grid-template-columns: 1fr;
  }

  .dashboard-glance-card {
    padding-left: 0;
    border-left: 0;
    padding-top: 12px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  }

  .dashboard-glance-card:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

.story-overview-panel,
.story-guidance,
.story-controls,
.story-timeline-preview,
.story-timeline-list {
  border-radius: 24px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 80%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--surface-panel) 96%, transparent),
    color-mix(in oklch, var(--surface-panel-2) 98%, transparent)
  );
  box-shadow: none;
}

.story-overview-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.story-overview-copy {
  display: grid;
  gap: 8px;
  max-width: 58ch;
}

.story-overview-chip,
.story-section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 26%, var(--border-soft));
  background: color-mix(in oklch, var(--primary) 11%, transparent);
  color: color-mix(in oklch, var(--primary-foreground) 96%, var(--foreground));
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.story-overview-copy h3,
.story-section-head h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-size: clamp(1.24rem, 1rem + 0.55vw, 1.72rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.story-overview-copy p,
.story-section-head p {
  margin: 0;
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.95rem;
  line-height: 1.56;
}

.story-head-grid {
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 0.85fr));
  gap: 12px;
}

.story-stat-card {
  min-height: 0;
  padding: 16px 18px;
  border-radius: 20px;
  border-color: color-mix(in oklch, var(--border-soft) 86%, transparent);
  background: color-mix(in oklch, var(--surface-control) 72%, transparent);
  box-shadow: none;
}

.story-stat-card-title {
  gap: 10px;
}

.story-stat-label {
  font-size: 0.74rem;
  letter-spacing: 0.11em;
}

.story-stat-value {
  font-size: clamp(1rem, 0.88rem + 0.26vw, 1.16rem);
}

#storyTimelineCount.story-stat-value,
#storyTimelineProgressKpi.story-stat-value {
  font-size: clamp(1.44rem, 1.12rem + 0.68vw, 1.88rem);
}

.story-inline-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
}

.story-inline-metric-label {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.8rem;
  line-height: 1.4;
}

.story-inline-metric-value {
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-family: var(--font-mono);
  font-size: 1.04rem;
  line-height: 1;
}

.story-status-row {
  gap: 8px;
  margin: 0;
}

.story-status-row .status-pill {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border-color: color-mix(in oklch, var(--border-soft) 78%, transparent);
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
  box-shadow: none;
}

.story-progress {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 78%, transparent);
  border-radius: 18px;
  background: color-mix(in oklch, var(--surface-control) 68%, transparent);
  box-shadow: none;
}

.story-progress-head span:first-child {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.story-guidance {
  padding: 22px;
  gap: 18px;
  align-content: start;
}

.story-guidance-title {
  font-size: 1.3rem;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.story-guidance-hint {
  max-width: 40ch;
  font-size: 0.95rem;
  line-height: 1.58;
}

.story-guidance-actions {
  grid-template-columns: 1fr;
  gap: 10px;
}

.story-guidance-action {
  min-height: 48px;
  border-radius: 16px;
}

.story-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 18px;
  align-items: start;
}

.story-preview-column,
.story-edit-column {
  display: grid;
  gap: 16px;
}

.story-section-head {
  display: grid;
  gap: 8px;
}

.story-section-head-compact {
  margin-bottom: 2px;
}

.story-controls {
  gap: 16px;
  padding: 20px;
}

.story-controls-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.story-controls-grid .field {
  padding: 14px 15px;
  border-radius: 16px;
  border-color: color-mix(in oklch, var(--border-soft) 84%, transparent);
  background: color-mix(in oklch, var(--surface-control) 70%, transparent);
  box-shadow: none;
}

.story-controls-hint {
  min-height: 0;
  padding: 12px 14px;
  border-radius: 16px;
  box-shadow: none;
}

.story-preview-column h3 {
  display: none;
}

.story-timeline-preview {
  min-height: 420px;
  padding: 20px;
}

.story-list-head {
  margin: 0;
  padding: 2px 2px 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.story-list-head-copy {
  gap: 8px;
}

.story-list-head-copy h3 {
  margin: 0;
}

.story-list-head-summary {
  max-width: 42ch;
}

.story-timeline-list {
  min-height: 420px;
  padding: 18px;
}

@media (max-width: 1180px) {
  .story-shell-top,
  .story-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .story-overview-panel,
  .story-guidance,
  .story-controls,
  .story-timeline-preview,
  .story-timeline-list {
    padding: 18px;
  }

  .story-head-grid {
    grid-template-columns: 1fr;
  }

  .story-status-row {
    gap: 6px;
  }
}

/* 2026-03-09: unify live voice and connection into one quieter utility layer */
.live-utility-shell {
  order: 3;
}

.live-utility-shell > .live-top-panel-body {
  display: grid;
  gap: 18px;
}

.live-utility-grid > .panel-live-top {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.live-utility-grid > .panel-live-connection {
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 70%, transparent);
}

.live-utility-card-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.live-utility-card-heading .section-badge {
  width: fit-content;
}

.live-utility-card-heading .live-top-summary-title {
  display: block;
  font-size: 1rem;
}

.live-utility-shell > .live-top-summary .live-top-summary-hint,
.live-utility-card-heading .live-top-summary-hint {
  display: block;
  max-width: 58ch;
  margin: 0;
}

.live-utility-grid > .panel-live-top > :not(.live-utility-card-heading) + :not(.live-utility-card-heading) {
  margin-top: 14px;
}

.live-utility-grid .actions-priority {
  margin-top: 0;
}

.live-utility-grid .meta-row-status-live {
  margin-top: 14px;
}

@media (max-width: 860px) {
  .live-utility-shell > .live-top-panel-body {
    gap: 16px;
  }

  .live-utility-grid > .panel-live-connection {
    padding-bottom: 14px;
  }
}

/* 2026-03-09: quieter live utility first fold */
.connection-advanced-grid-core {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.connection-url-field {
  margin-top: 14px;
}

.meta-row-status-connection-advanced {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
}

.panel-live-connection > .meta-row-status-live > div {
  flex: 1 1 220px;
}

.panel-live-controls .advanced-settings .media-upload-field {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
}

.panel-live-controls .advanced-settings .media-upload-row {
  align-items: center;
}

.panel-live-controls .advanced-settings .media-upload-actions {
  justify-content: flex-start;
}

.live-session-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.live-session-strip > div {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: 6px;
}

.live-session-strip strong {
  color: color-mix(in oklch, var(--muted-foreground) 84%, white);
  font-size: 0.69rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.live-session-strip .status-pill,
.live-session-strip .status-value {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 74%, transparent);
  box-shadow: none;
}

/* 2026-03-09: compact utility toolbar density */
.live-utility-grid .actions-priority {
  gap: 10px;
}

.panel-live-connection .action-group-primary {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.panel-live-connection .action-group-primary > button,
.panel-live-connection .action-group-primary > .export-menu {
  flex: 0 0 auto;
  width: auto;
}

.panel-live-connection .action-group-primary > button,
.panel-live-connection .action-group-primary > .export-menu > summary {
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 14px;
  font-size: 0.92rem;
}

.panel-live-controls .control-cluster-label {
  margin-bottom: 4px;
}

.panel-live-controls .control-cluster-hint {
  max-width: 26ch;
  margin-bottom: 8px;
  font-size: 0.76rem;
  line-height: 1.42;
  color: color-mix(in oklch, var(--muted-foreground) 84%, white);
}

.panel-live-controls .control-cluster-actions {
  gap: 8px;
}

.panel-live-controls .control-cluster-actions > button {
  min-height: 42px;
  border-radius: 14px;
  font-size: 0.92rem;
}

.panel-live-controls .action-group-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
}

.panel-live-controls .button-live-danger,
.panel-live-controls .button-live-fallback {
  flex: 0 0 auto;
  min-width: 152px;
  padding-inline: 14px;
}

.panel-live-controls .button-live-danger {
  background: color-mix(in oklch, oklch(0.72 0.16 23) 66%, var(--surface-control));
}

@media (max-width: 860px) {
  .connection-advanced-grid-core {
    grid-template-columns: 1fr;
  }
}

/* 2026-03-09: plain-language live compose and service sections */
.intent-compose-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.live-compose-guidance,
.intent-field-language,
.intent-field-message {
  grid-column: 1;
}

.intent-field-language {
  width: min(100%, 320px);
}

.intent-field-language select {
  width: 100%;
}

.live-secondary-tools-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.live-secondary-tool-card {
  padding: 16px;
}

.live-support-card h3 {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}

.live-support-card .actions {
  gap: 10px;
}

.live-support-card .actions > button {
  flex: 1 1 220px;
  min-width: 0;
}

.panel-live-controls .action-group-live-control {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.panel-live-controls .control-cluster + .control-cluster {
  margin-top: 0;
}

/* 2026-03-10: top contextual dock for live tools */
.live-context-dock-shell {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 26px 26px 28px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: calc(var(--radius) - 4px);
  background:
    radial-gradient(320px 120px at 0% -18%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 97%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
}

.live-context-dock-shell[data-live-context-open="true"] {
  border-color: color-mix(in oklch, var(--primary) 22%, var(--border-soft));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 14%, transparent);
}

.live-context-dock-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: start;
}

.live-context-dock-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.live-context-dock-title {
  display: block;
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -0.02em;
  color: color-mix(in oklch, var(--foreground) 98%, var(--accent-foreground));
}

.live-context-dock-copy-hint {
  margin: 0;
  max-width: 52ch;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.79rem;
  line-height: 1.52;
}

.live-context-dock-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label pill"
    "hint pill";
  gap: 3px 10px;
  align-items: start;
  padding: 10px 12px;
  min-width: 0;
  min-height: 0;
  min-width: 220px;
  max-width: 280px;
  justify-self: end;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 74%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
}

.live-context-dock-current-label {
  grid-area: label;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  font-size: 0.77rem;
  font-weight: 670;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* 2026-03-10: Storyteller studio rebuild */
.panel-story-studio {
  display: grid;
  gap: 28px;
  padding: 30px;
  border-color: color-mix(in oklch, var(--border-soft) 90%, transparent);
  background:
    radial-gradient(460px 220px at 2% -10%, color-mix(in oklch, oklch(0.73 0.13 58) 18%, transparent), transparent 72%),
    radial-gradient(360px 180px at 100% 0%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 99%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 98%, transparent)
    );
}

.panel-story-studio > h2 {
  margin: 0;
}

.panel-story-studio > h2 span:last-child,
.panel-story-studio .story-compose-copy h3,
.panel-story-studio .story-run-rail-head h3,
.panel-story-studio .story-section-head h3,
.panel-story-studio .story-atlas-head h3 {
  font-family: var(--font-serif);
  letter-spacing: -0.03em;
}

.panel-story-studio > h2 span:last-child {
  font-size: clamp(1.58rem, 1.5vw + 1rem, 2rem);
}

.panel-story-studio .story-intro {
  max-width: 72ch;
  margin: -16px 0 0;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  line-height: 1.7;
}

.story-shell-top {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.68fr);
  gap: 24px;
  align-items: start;
}

.story-compose-shell,
.story-run-rail,
.story-preview-shell,
.story-latest-output-shell,
.story-atlas-card,
.story-controls,
.story-scenes-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 28px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 98%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 22px 48px color-mix(in oklch, var(--shadow-color) 18%, transparent);
}

.story-compose-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(360px 220px at 6% 0%, color-mix(in oklch, oklch(0.74 0.12 58) 18%, transparent), transparent 72%),
    radial-gradient(320px 180px at 88% 10%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 74%);
  pointer-events: none;
}

.story-compose-shell > *,
.story-run-rail > *,
.story-preview-shell > *,
.story-latest-output-shell > *,
.story-atlas-card > *,
.story-controls > *,
.story-scenes-shell > * {
  position: relative;
  z-index: 1;
}

.story-compose-shell {
  display: grid;
  gap: 22px;
  padding: 26px;
}

.story-compose-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: 18px;
  align-items: start;
}

.story-compose-copy,
.story-run-rail-head,
.story-atlas-head,
.story-section-head {
  display: grid;
  gap: 10px;
}

.story-compose-copy h3,
.story-run-rail-head h3,
.story-section-head h3,
.story-atlas-head h3 {
  margin: 0;
  font-size: clamp(1.08rem, 0.7rem + 0.7vw, 1.34rem);
  line-height: 1.12;
}

.story-compose-copy p,
.story-run-rail-head p,
.story-section-head p,
.story-atlas-head p {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  line-height: 1.58;
}

.story-overview-chip,
.panel-story-studio .story-section-eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 76%, transparent);
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story-compose-status {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: start;
  max-width: 252px;
  padding: 14px 15px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 74%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.story-compose-status p {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  line-height: 1.55;
}

.story-signal-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.story-signal-card {
  display: grid;
  gap: 6px;
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 74%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.story-signal-card-lead {
  background:
    radial-gradient(180px 120px at 0% 0%, color-mix(in oklch, var(--primary) 13%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 74%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.story-signal-card-world {
  background:
    radial-gradient(180px 120px at 100% 0%, color-mix(in oklch, oklch(0.74 0.12 58) 14%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 74%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.story-signal-card-delivery {
  background:
    radial-gradient(180px 120px at 50% 0%, color-mix(in oklch, oklch(0.72 0.08 235) 13%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 74%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.story-signal-card-scope {
  background:
    radial-gradient(180px 120px at 0% 100%, color-mix(in oklch, oklch(0.76 0.09 150) 12%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 74%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.story-signal-label {
  color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.story-signal-value {
  color: color-mix(in oklch, var(--foreground) 97%, var(--accent-foreground));
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.42;
}

.story-mode-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.story-flow-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.story-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 76%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.story-flow-step-index {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary) 28%, var(--surface-control));
  color: color-mix(in oklch, white 92%, var(--foreground));
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.story-flow-step-copy {
  display: grid;
  gap: 4px;
}

.story-flow-step-copy strong {
  color: color-mix(in oklch, var(--foreground) 96%, var(--accent-foreground));
  font-size: 0.86rem;
  line-height: 1.28;
}

.story-flow-step-copy p {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
  font-size: 0.75rem;
  line-height: 1.48;
}

.story-mode-card {
  display: grid;
  grid-column: span 1;
  gap: 6px;
  align-content: start;
  min-height: 88px;
  padding: 13px 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 72%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
  text-align: left;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.story-mode-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--primary) 22%, var(--border-soft));
}

.story-mode-card.is-active {
  order: -1;
  grid-column: span 2;
  gap: 10px;
  min-height: 120px;
  padding: 16px;
  border-color: color-mix(in oklch, oklch(0.73 0.13 58) 40%, var(--primary));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, oklch(0.73 0.13 58) 18%, var(--surface-control)),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 12%, transparent);
}

.story-mode-card:not(.is-active) .story-mode-kicker,
.story-mode-card:not(.is-active) .story-mode-hint {
  display: none;
}

.story-mode-kicker {
  color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.story-mode-title {
  color: color-mix(in oklch, var(--foreground) 98%, var(--accent-foreground));
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.28;
}

.story-mode-hint {
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
  font-size: 0.79rem;
  line-height: 1.48;
}

.story-compose-canvas {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 78%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.story-compose-field {
  margin: 0;
}

.story-compose-field textarea {
  min-height: 220px;
  font-size: 1rem;
  line-height: 1.74;
}

.story-compose-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.story-compose-preview,
.story-compose-count {
  margin: 0;
}

.story-compose-preview {
  flex: 1 1 360px;
  max-width: 72ch;
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.62;
}

.story-compose-count {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 76%, transparent);
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
  font-size: 0.76rem;
}

.story-compose-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
}

.story-compose-actions > button {
  flex: 0 0 auto;
}

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

.story-compose-secondary-actions > button {
  flex: 0 0 auto;
}

.story-compose-secondary-actions > #storyComposerTemplateBtn {
  min-height: 42px;
  padding-inline: 16px;
  border-color: color-mix(in oklch, var(--border-soft) 78%, transparent);
  background: color-mix(in oklch, var(--surface-control) 52%, transparent);
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  box-shadow: none;
}

.story-compose-secondary-actions > #storyComposerTemplateBtn:hover {
  border-color: color-mix(in oklch, var(--primary) 22%, var(--border-soft));
  background: color-mix(in oklch, var(--surface-control) 62%, transparent);
  color: color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
}

.story-compose-secondary-actions > #storyComposerOpenLiveBtn {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
  box-shadow: none;
}

.story-compose-secondary-actions > #storyComposerOpenLiveBtn:hover {
  background: transparent;
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
}

.story-tray-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.story-tray {
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 68%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.story-tray[open] {
  grid-column: 1 / -1;
  border-color: color-mix(in oklch, var(--primary) 20%, var(--border-soft));
}

.story-tray > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  min-height: 88px;
}

.story-tray > summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1.5px solid color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground));
  border-bottom: 1.5px solid color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground));
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.story-tray[open] > summary::after {
  transform: rotate(225deg);
}

.story-tray > summary::-webkit-details-marker {
  display: none;
}

.story-tray > summary::marker {
  content: "";
}

.story-tray-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#storyDirectionTray {
  grid-column: 1 / -1;
}

.story-tray[open] > summary {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  padding-bottom: 12px;
}

.story-tray[open] .story-tray-summary {
  display: none;
}

.story-tray-title {
  color: color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
  font-weight: 700;
}

.story-tray-hint {
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.5;
}

.story-tray-body {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  padding: 14px 18px 18px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 62%, transparent);
}

.story-tray-section {
  display: grid;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 56%, transparent),
      color-mix(in oklch, var(--surface-panel) 86%, transparent)
    );
}

.story-tray-section-compact {
  max-width: 320px;
}

.story-tray-section-head {
  display: grid;
  gap: 5px;
}

.story-tray-section-eyebrow {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-tray-section-copy {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
  font-size: 0.84rem;
  line-height: 1.55;
}

.story-tray-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.story-tray-section-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.story-tray-note-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 52%, transparent),
      color-mix(in oklch, var(--surface-panel) 86%, transparent)
    );
}

.story-tray-summary {
  display: grid;
  gap: 6px;
  justify-items: end;
  min-width: 0;
  padding-right: 14px;
  text-align: right;
}

.story-tray-summary-text {
  max-width: 38ch;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  font-size: 0.76rem;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.story-tray-summary-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.story-tray-summary-meta .story-atlas-tag {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 0.66rem;
  line-height: 1.18;
  background: color-mix(in oklch, var(--surface-control) 68%, transparent);
}

.story-tray-body-full {
  grid-template-columns: 1fr;
}

.story-run-rail {
  display: grid;
  gap: 14px;
  padding: 20px;
  align-content: start;
  position: sticky;
  top: 18px;
}

.story-run-rail .story-head-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.story-run-rail .story-stat-card,
.story-run-rail .story-guidance,
.story-controls,
.story-preview-shell .story-timeline-preview,
.story-scenes-shell .story-timeline-list {
  box-shadow: none;
}

.story-run-rail .story-stat-card {
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 78%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.story-run-rail .story-stat-card-title {
  grid-column: 1 / -1;
  gap: 6px;
}

.story-run-rail .story-guidance {
  margin: 0;
  padding: 14px;
  border-radius: 18px;
}

.story-run-rail .story-status-row-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.story-run-rail .story-status-row-summary .status-pill {
  width: 100%;
  justify-content: center;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 0.71rem;
}

.story-run-rail .story-progress {
  padding: 12px 13px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 18px;
  background: color-mix(in oklch, var(--surface-control) 72%, transparent);
}

.story-run-rail .story-guidance-actions {
  display: grid;
  gap: 8px;
}

.story-run-rail .story-guidance-action {
  width: 100%;
}

.story-run-rail.is-idle .story-status-row-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-run-rail.is-idle #storyTimelineProgressHint {
  display: none;
}

.story-run-rail.is-idle #storyTimelineGuideTemplateBtn {
  display: none;
}

.story-run-rail.is-idle #storyTimelineGuideOpenLiveBtn {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
  justify-content: flex-start;
  box-shadow: none;
}

.story-run-rail.is-idle #storyTimelineGuideOpenLiveBtn:hover {
  color: color-mix(in oklch, var(--foreground) 90%, var(--accent-foreground));
  background: transparent;
}

.story-run-rail.is-pending .story-guidance {
  border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft));
  background:
    radial-gradient(220px 90px at 0% 0%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 82%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.story-run-rail.is-ready .story-stat-card-state {
  border-color: color-mix(in oklch, oklch(0.76 0.09 150) 24%, var(--border-soft));
}

.story-results-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(280px, 0.72fr);
  gap: 24px;
  align-items: start;
}

.story-results-primary,
.story-results-secondary {
  display: grid;
  gap: 18px;
}

.story-results-secondary {
  padding: 20px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 26px;
  background:
    radial-gradient(280px 120px at 0% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 76%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 16px 24px -30px color-mix(in oklch, var(--primary) 38%, transparent);
}

.story-latest-output-shell,
.story-preview-shell,
.story-controls,
.story-scenes-shell {
  padding: 22px;
}

.story-latest-output-shell {
  display: grid;
  gap: 14px;
  min-height: 240px;
}

.story-latest-output-meta,
.story-atlas-meta {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.58;
}

.story-atlas-shell-head {
  gap: 10px;
}

.story-atlas-shell-head h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 97%, white);
  font-family: var(--font-serif);
  font-size: clamp(1.16rem, 1rem + 0.62vw, 1.44rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.story-atlas-shell-head p {
  margin: 6px 0 0;
  max-width: 42ch;
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.56;
}

.story-atlas-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.story-atlas-tab {
  flex: 1 1 156px;
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 60px;
  padding: 11px 13px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 80%, transparent);
  border-radius: 18px;
  background: color-mix(in oklch, var(--surface-control) 66%, transparent);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.story-atlas-tab:hover {
  border-color: color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  background:
    radial-gradient(160px 70px at 0% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 74%, transparent);
}

.story-atlas-tab:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--primary) 56%, white);
  outline-offset: 2px;
}

.story-atlas-tab.is-active {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft));
  background:
    radial-gradient(180px 84px at 0% 0%, color-mix(in oklch, var(--primary) 13%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 82%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
  transform: translateY(-1px);
}

.story-atlas-tab-label {
  color: color-mix(in oklch, var(--foreground) 92%, white);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-atlas-tab-hint {
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-atlas-panels {
  display: grid;
}

.story-latest-output-body {
  min-height: 160px;
  padding: 18px 18px 20px;
  display: grid;
  gap: 18px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 76%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
  color: color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
  line-height: 1.72;
}

.story-latest-output-shell.is-empty .story-latest-output-body {
  color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
}

.story-latest-output-shell.is-pending .story-latest-output-meta {
  color: color-mix(in oklch, var(--primary) 70%, white);
}

.story-latest-output-shell.is-error .story-latest-output-body {
  border-color: color-mix(in oklch, oklch(0.68 0.16 26) 42%, var(--border-soft));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, oklch(0.68 0.16 26) 10%, var(--surface-control)),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.story-latest-output-shell.is-streaming .story-latest-output-body {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 20%, transparent);
}

.story-output-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(240px, 0.92fr);
  gap: 16px;
}

.story-output-stage-idle {
  grid-template-columns: minmax(0, 1.16fr) minmax(220px, 0.84fr);
}

.story-output-main,
.story-output-side {
  display: grid;
  align-content: start;
}

.story-output-main {
  gap: 12px;
}

.story-output-side {
  gap: 10px;
}

.story-output-kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.story-output-kicker,
.story-output-variant-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 76%, transparent);
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-output-title {
  margin: 0;
  max-width: 18ch;
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-family: var(--font-serif);
  font-size: clamp(1.14rem, 0.96rem + 0.72vw, 1.46rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.story-output-summary {
  margin: 0;
  max-width: 58ch;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.94rem;
  line-height: 1.56;
}

.story-output-body-card,
.story-output-side-card,
.story-output-variant-card {
  display: grid;
  gap: 10px;
  padding: 15px 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 78%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-output-body-card-muted {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 70%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 95%, transparent)
    );
}

.story-output-body-card-main {
  gap: 12px;
}

.story-output-main.is-error .story-output-body-card,
.story-output-variant-card.is-error {
  border-color: color-mix(in oklch, oklch(0.68 0.16 26) 36%, var(--border-soft));
}

.story-output-body-label,
.story-output-side-card > span {
  color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-output-side-card-dossier {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.story-output-side-card-idle {
  align-content: start;
}

.story-output-support-strip {
  display: grid;
  gap: 8px;
}

.story-output-support-card {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 72%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.story-output-support-label {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-output-support-title {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 0.85rem;
  line-height: 1.28;
}

.story-output-support-note {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  font-size: 0.74rem;
  line-height: 1.4;
}

.story-output-dossier-section {
  display: grid;
  gap: 7px;
  padding: 12px 13px;
}

.story-output-dossier-section + .story-output-dossier-section {
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 78%, transparent);
}

.story-output-dossier-label {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-output-dossier-title {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.9rem;
  line-height: 1.28;
}

.story-output-dossier-note {
  margin: 0;
  max-width: 34ch;
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
  font-size: 0.74rem;
  line-height: 1.42;
}

.story-output-side-card-dossier .story-output-card-tags {
  gap: 6px;
}

.story-output-side-card-dossier .story-output-card-tag {
  min-height: 26px;
  padding: 4px 9px;
  font-size: 0.6875rem;
}

.story-output-dossier-section .story-output-metrics {
  margin-top: 2px;
}

.story-output-body-text {
  max-height: 240px;
  overflow: auto;
  max-width: 60ch;
  color: color-mix(in oklch, var(--foreground) 94%, var(--accent-foreground));
  font-size: 0.95rem;
  line-height: 1.66;
  white-space: pre-wrap;
}

.story-output-cue-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.story-output-cue-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid color-mix(in oklch, var(--primary) 24%, var(--border-soft));
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 76%, transparent);
  color: color-mix(in oklch, var(--foreground) 86%, var(--accent-foreground));
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.34;
}

.story-output-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.story-output-highlight {
  display: inline-flex;
  min-height: 56px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 16px;
  background: color-mix(in oklch, var(--surface-control) 80%, transparent);
  color: color-mix(in oklch, var(--foreground) 88%, var(--accent-foreground));
  font-size: 0.76rem;
  line-height: 1.5;
}

.story-output-side-card strong,
.story-output-variant-title {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.97rem;
  line-height: 1.34;
}

.story-output-side-card p,
.story-output-variant-meta,
.story-output-variant-note,
.story-output-variants-empty {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.5;
}

.story-output-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.story-output-card-tags-compact {
  gap: 6px;
}

.story-output-card-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 80%, transparent);
  color: color-mix(in oklch, var(--foreground) 86%, var(--accent-foreground));
  font-size: 0.72rem;
  font-weight: 600;
}

.story-output-card-tags-compact .story-output-card-tag {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 0.6875rem;
}

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

.story-output-metrics.is-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.story-output-metric {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 74%, transparent);
}

.story-output-metric span {
  color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-output-metric strong {
  color: color-mix(in oklch, var(--foreground) 96%, var(--accent-foreground));
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.story-output-metrics.is-compact .story-output-metric {
  gap: 2px;
  padding: 7px 8px;
  border-radius: 12px;
}

.story-output-metrics.is-compact .story-output-metric strong {
  font-size: 0.82rem;
}

.story-output-variants {
  display: grid;
  gap: 12px;
}

.story-output-variants-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.story-output-variants-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.story-output-variant-card {
  gap: 8px;
}

.story-preview-shell {
  display: grid;
  gap: 16px;
}

.story-preview-shell .story-timeline-preview-empty {
  padding: 0;
}

.story-preview-shell .story-timeline-preview {
  min-height: 320px;
  padding: 0;
  border: 0;
  background: transparent;
}

.story-preview-shell .story-empty-state {
  min-height: 292px;
}

.story-timeline-preview-empty .story-empty-state {
  place-items: stretch;
  align-content: start;
  text-align: left;
}

.story-timeline-preview-empty .story-empty-kpis {
  width: min(400px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-timeline-preview-empty .story-empty-kpis > :nth-child(3) {
  display: none;
}

.story-preview-stage {
  min-height: 292px;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(250px, 0.76fr);
  gap: 16px;
  padding: 20px;
  border: 1px solid color-mix(in oklch, var(--primary) 26%, var(--border-soft));
  border-radius: 22px;
  background:
    radial-gradient(320px 150px at 0% -16%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 72%),
    radial-gradient(240px 120px at 100% 0%, color-mix(in oklch, var(--accent-foreground) 10%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 16px 24px -30px color-mix(in oklch, var(--primary) 46%, transparent);
}

.story-preview-stage-editorial {
  grid-template-columns: minmax(0, 1fr);
}

.story-preview-copy {
  display: grid;
  align-content: start;
  gap: 10px;
}

.story-preview-kicker {
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-preview-title {
  margin: 0;
  max-width: 18ch;
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-size: clamp(1.16rem, 0.98rem + 0.66vw, 1.44rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.story-preview-summary {
  margin: 0;
  max-width: 52ch;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.93rem;
  line-height: 1.54;
}

.story-preview-cue-stack {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 74%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 95%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-preview-copy-card {
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 80%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-preview-copy-card-main {
  gap: 10px;
}

.story-preview-copy-card-muted {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 70%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 95%, transparent)
    );
}

.story-preview-copy-label {
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-preview-cues {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.story-preview-cues-inline {
  gap: 6px;
}

.story-preview-cues-hero {
  gap: 6px;
}

.story-preview-cue {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
  color: color-mix(in oklch, var(--foreground) 88%, var(--accent-foreground));
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.25;
}

.story-preview-rail {
  display: grid;
  align-content: start;
  gap: 12px;
}

.story-preview-rail-card {
  display: grid;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 74%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 95%, transparent)
    );
}

.story-preview-rail-card-split {
  gap: 0;
}

.story-preview-support-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(212px, 0.78fr);
  gap: 8px;
}

.story-preview-support-card {
  align-content: start;
  gap: 8px;
}

.story-preview-support-card-assets {
  gap: 8px;
}

.story-preview-support-card-assets .story-preview-assets {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

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

.story-preview-summary-item {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.story-preview-rail-card span {
  color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-preview-rail-card strong {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.96rem;
  line-height: 1.28;
}

.story-preview-rail-card p {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  font-size: 0.76rem;
  line-height: 1.42;
}

.story-preview-stage .story-preview-assets {
  padding: 14px 15px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 72%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 94%, transparent)
    );
}

.story-results-secondary {
  align-content: start;
  gap: 14px;
}

.story-atlas-card[hidden] {
  display: none !important;
}

.story-atlas-card {
  display: none;
  gap: 10px;
  min-height: 152px;
  padding: 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.story-atlas-card.is-active {
  display: grid;
}

.story-atlas-card.is-shaped {
  border-color: color-mix(in oklch, var(--primary) 18%, var(--border-soft));
}

.story-atlas-card.is-empty {
  opacity: 0.94;
}

.story-atlas-card.is-pending {
  border-color: color-mix(in oklch, var(--primary) 22%, var(--border-soft));
}

.story-atlas-card.is-ready {
  border-color: color-mix(in oklch, oklch(0.76 0.09 150) 20%, var(--border-soft));
}

.story-atlas-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.story-atlas-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 78%, transparent);
  color: color-mix(in oklch, var(--foreground) 86%, var(--accent-foreground));
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
}

.story-atlas-card-world {
  background:
    radial-gradient(240px 140px at 0% 0%, color-mix(in oklch, oklch(0.74 0.12 58) 16%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 98%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
}

.story-atlas-card-character {
  background:
    radial-gradient(220px 140px at 100% 0%, color-mix(in oklch, var(--primary) 15%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 98%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
}

.story-atlas-card-media {
  background:
    radial-gradient(260px 140px at 50% 0%, color-mix(in oklch, oklch(0.72 0.08 235) 14%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 98%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
}

.story-atlas-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.story-atlas-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 72%, transparent);
  white-space: nowrap;
}

.story-atlas-metric.is-empty {
  opacity: 0.58;
  background: color-mix(in oklch, var(--surface-control) 42%, transparent);
}

.story-atlas-metric.is-ready {
  border-color: color-mix(in oklch, var(--primary) 16%, var(--border-soft));
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
}

.story-atlas-metric span {
  color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-atlas-metric strong {
  color: color-mix(in oklch, var(--foreground) 98%, var(--accent-foreground));
  font-family: var(--font-mono);
  font-size: 0.96rem;
  line-height: 1;
}

.story-timeline-list-empty-action-secondary {
  border-color: color-mix(in oklch, var(--border-soft) 80%, transparent);
  background: color-mix(in oklch, var(--surface-control) 74%, transparent);
}

.story-bottom-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr);
  gap: 24px;
  align-items: start;
}

.story-scenes-shell {
  display: grid;
  gap: 16px;
}

.story-scenes-shell .story-timeline-list {
  min-height: 380px;
  padding: 0;
  border: 0;
  background: transparent;
}

.story-scenes-shell .story-list-head {
  padding: 0;
}

.story-scenes-shell .story-segment-card {
  border-radius: 18px;
}

@media (max-width: 1180px) {
  .story-shell-top,
  .story-results-grid,
  .story-bottom-grid {
    grid-template-columns: 1fr;
  }

  .story-mode-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-mode-card.is-active {
    grid-column: span 2;
  }

  .story-signal-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-flow-strip {
    grid-template-columns: 1fr;
  }

  .story-run-rail {
    position: static;
    top: auto;
  }

  .story-preview-stage,
  .story-output-stage,
  .story-empty-board {
    grid-template-columns: 1fr;
  }

  .story-output-highlights,
  .story-output-variants-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .panel-story-studio {
    gap: 22px;
    padding: 20px;
  }

  .story-compose-shell,
  .story-run-rail,
  .story-preview-shell,
  .story-latest-output-shell,
  .story-atlas-card,
  .story-controls,
  .story-scenes-shell {
    padding: 18px;
    border-radius: 22px;
  }

  .story-compose-head,
  .story-signal-strip,
  .story-mode-rail,
  .story-flow-strip,
  .story-tray-body,
  .story-output-stage,
  .story-preview-stage,
  .story-empty-board {
    grid-template-columns: 1fr;
  }

  .story-compose-actions > button {
    flex: 1 1 100%;
  }

  .story-timeline-list-empty-preview {
    grid-template-columns: 1fr;
  }

  .story-output-highlights,
  .story-output-variants-grid {
    grid-template-columns: 1fr;
  }

  .story-run-rail .story-head-grid,
  .story-run-rail .story-status-row-summary {
    grid-template-columns: 1fr;
  }

  .story-run-rail .story-stat-card-title,
  .story-run-rail .story-stat-card-metric,
  .story-run-rail .story-stat-card-state {
    grid-column: span 1;
  }

  .story-atlas-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-output-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-mode-card,
  .story-mode-card.is-active {
    grid-column: span 1;
  }

  .story-latest-output-body,
  .story-preview-shell .story-timeline-preview,
  .story-scenes-shell .story-timeline-list {
    min-height: 0;
  }
}

.live-context-dock-current-hint {
  grid-area: hint;
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
  font-size: 0.71rem;
  line-height: 1.42;
}

.live-context-dock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.live-context-dock-btn {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 92px;
  padding: 14px 15px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 76%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 0 0 1px color-mix(in oklch, var(--border-soft) 52%, transparent);
  text-align: left;
  transition:
    transform 140ms ease,
    border-color 130ms ease,
    background-color 130ms ease,
    box-shadow 130ms ease,
    color 130ms ease;
  overflow: hidden;
}

.live-context-dock-btn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.live-context-dock-btn:hover {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-hover) 88%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  transform: translateY(-1px);
}

.live-context-dock-btn:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--primary) 46%, var(--border-soft));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 10%, transparent),
    0 0 0 3px var(--focus-ring-soft);
}

.live-context-dock-btn.is-active {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border-soft));
  background:
    radial-gradient(240px 90px at 0% -18%, color-mix(in oklch, var(--primary) 13%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 90%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 10%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 34%, transparent);
}

.live-context-dock-btn .status-pill,
.live-context-dock-current .status-pill,
.live-context-tray-actions .status-pill {
  margin: 0;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  box-shadow: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
}

.live-context-dock-label {
  font-size: 0.96rem;
  font-weight: 760;
  letter-spacing: -0.01em;
  color: color-mix(in oklch, var(--foreground) 97%, var(--accent-foreground));
  line-height: 1.2;
}

.live-context-dock-hint {
  max-width: none;
  font-size: 0.76rem;
  font-weight: 590;
  line-height: 1.35;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.live-context-tray {
  margin: 20px 0 26px;
  padding: 24px 26px 26px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(280px 110px at 0% -18%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 97%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 0 0 1px color-mix(in oklch, var(--border-soft) 52%, transparent);
}

.live-context-tray[hidden],
.live-context-tray-panel[hidden] {
  display: none;
}

.live-context-tray-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px 20px;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
}

.live-context-tray-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.live-context-tray-title {
  display: block;
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -0.02em;
  color: color-mix(in oklch, var(--foreground) 98%, var(--accent-foreground));
}

.live-context-tray-hint {
  margin: 0;
  max-width: 50ch;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.82rem;
  line-height: 1.52;
}

.live-context-tray-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.live-context-tray-close {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 72%, transparent);
  color: color-mix(in oklch, var(--foreground) 94%, var(--muted-foreground));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.live-context-tray-close:hover {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft));
  background: color-mix(in oklch, var(--surface-control-hover) 78%, transparent);
}

.live-context-tray-close:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border-soft));
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.live-context-tray-panel {
  display: grid;
  gap: 26px;
}

.live-context-mounted-section {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.live-context-mounted-section > summary {
  display: none;
}

.live-context-mounted-section[data-live-context-persistent="false"] > summary {
  display: grid;
}

.live-context-tray-panel .live-intent-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
}

.live-context-tray-panel .live-top-panel-body,
.live-context-tray-panel .live-support-grid,
.live-context-tray-panel .live-secondary-tools-grid {
  display: grid;
  gap: 22px;
}

.live-context-mounted-section.live-utility-shell > .live-top-panel-body,
.live-context-mounted-section.live-support-section .live-support-grid {
  margin: 0;
  padding: 0;
  border: 0;
}

.live-context-mounted-section.live-support-section {
  display: block;
}

.live-context-mounted-section.live-technical-timeline {
  display: block;
}

.live-context-mounted-section .panel-live-top,
.live-context-mounted-section .live-support-card,
.live-context-mounted-section .live-secondary-tool-card {
  padding: 20px 20px 22px;
  border-color: color-mix(in oklch, var(--border-soft) 92%, transparent);
  border-radius: 20px;
  background: color-mix(in oklch, var(--surface-control) 95%, var(--surface-panel));
  box-shadow: none;
}

.live-context-dock-current .status-pill {
  grid-area: pill;
  align-self: start;
}

.live-context-tray-panel .live-intent-option-secondary {
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: 18px;
  background: color-mix(in oklch, var(--surface-control) 86%, transparent);
  box-shadow: none;
}

.live-context-tray-panel .live-intent-option-secondary:hover {
  border-color: color-mix(in oklch, var(--primary) 32%, transparent);
  background: color-mix(in oklch, var(--surface-control-hover) 90%, transparent);
}

.live-context-tray-panel .live-intent-option-secondary .live-intent-option-title {
  font-size: 0.92rem;
}

.live-context-dock-shell + .intent-compose-grid {
  margin-top: 22px;
}

.live-context-tray + .intent-compose-grid {
  margin-top: 22px;
}

/* 2026-03-10: open up live composer and reading rail after dock compaction */
.live-negotiator-main {
  grid-template-columns: minmax(0, 1.48fr) minmax(300px, 0.72fr);
  gap: 26px;
}

.live-negotiator-primary,
.live-negotiator-secondary {
  gap: 18px;
}

.live-compose-primary-actions {
  margin-top: 18px;
  display: grid;
  justify-items: start;
  gap: 10px;
}

.live-compose-primary-actions > button {
  min-width: 188px;
}

.live-compose-send-hint {
  max-width: 42ch;
}

.panel-transcript-live {
  padding: 24px;
}

.live-support-intro {
  max-width: 44ch;
  font-size: 0.82rem;
  line-height: 1.58;
}

.live-reading-stack {
  margin-top: 16px;
  gap: 18px;
}

.live-result-card {
  display: grid;
  gap: 14px;
  padding: 20px 20px 18px;
}

.live-result-head {
  display: grid;
  gap: 8px;
}

.live-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.live-result-label {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.panel-transcript-live #liveResultMeta {
  justify-self: start;
}

.live-result-action-btn {
  border: 1px solid rgba(138, 103, 255, 0.42);
  background: rgba(138, 103, 255, 0.12);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.live-result-action-btn:hover,
.live-result-action-btn:focus-visible {
  border-color: rgba(138, 103, 255, 0.68);
  background: rgba(138, 103, 255, 0.18);
  outline: none;
}

.live-result-action-btn:active {
  transform: translateY(1px);
}

.live-result-body {
  margin-top: 0;
  font-size: 0.97rem;
  line-height: 1.7;
}

.live-history-shell {
  display: grid;
  gap: 14px;
  padding: 18px 18px 14px;
}

.live-history-head {
  gap: 8px;
}

.live-history-head h3 {
  font-size: 0.98rem;
}

.live-history-hint {
  margin-top: 4px;
  max-width: 34ch;
  line-height: 1.52;
}

.panel-transcript-live .conversation-history {
  min-height: 200px;
  max-height: min(42vh, 400px);
  padding: 2px 0 0;
  gap: 10px;
}

.live-technical-timeline {
  margin-top: 20px;
  border-style: dashed;
}

.live-debug-transcript-shell {
  margin-top: 10px;
  padding: 10px 12px;
}

.live-debug-transcript-shell .transcript {
  min-height: 160px;
  max-height: min(28vh, 280px);
}

.intent-grid-primary {
  grid-template-columns: minmax(0, 1fr);
}

.intent-grid-primary #intentLanguageField {
  grid-column: 1;
  width: min(100%, 360px);
}

@media (max-width: 1080px) {
  .live-context-dock-head {
    grid-template-columns: 1fr;
  }

  .live-context-tray-head {
    grid-template-columns: 1fr;
  }

  .live-context-dock-current,
  .live-context-tray-actions {
    justify-self: start;
    justify-items: start;
    justify-content: flex-start;
    min-width: 0;
  }

  .live-context-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .live-context-dock-shell {
    padding: 20px 16px 22px;
  }

  .live-context-tray {
    margin: 18px 0 22px;
    padding: 20px 16px 22px;
  }

  .live-context-tray-panel .live-intent-secondary-actions {
    grid-template-columns: 1fr;
  }

  .live-compose-primary-actions > button {
    width: 100%;
  }

  .panel-transcript-live {
    padding: 20px;
  }
}

/* 2026-03-10: keep dashboard shell truly single-column on narrow screens */
@media (max-width: 860px) {
  .dashboard-body {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    position: static;
  }

  .dashboard-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-negotiator-main {
    grid-template-columns: 1fr;
  }

  .live-negotiator-secondary {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 520px) {
  .live-context-dock {
    grid-template-columns: 1fr;
  }

  .live-context-dock-current {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "hint"
      "pill";
    width: 100%;
    max-width: none;
  }
}

/* 2026-03-10: operator console hierarchy reset for faster triage scan */
.panel-operator-console {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.9fr);
  grid-template-areas:
    "header header"
    "entry entry"
    "chooser chooser"
    "workspace workspace"
    "toolbar toolbar"
    "status guide"
    "demo guide"
    "signal triage"
    "lanefocus lanefocus"
    "health health"
    "quickstart playbook"
    "controls controls"
    "advancedactions advancedactions"
    "summary summary";
  gap: 18px;
  align-items: start;
}

.panel-operator-console > h2 {
  grid-area: header;
  margin-bottom: 0;
}

.panel-operator-console > .operator-console-entry {
  grid-area: entry;
  margin-top: 0;
}

.panel-operator-console > .operator-workspace-chooser {
  grid-area: chooser;
  margin-top: 0;
}

.panel-operator-console > .operator-workspace-header {
  grid-area: workspace;
  margin-top: 0;
}

.panel-operator-console > .operator-toolbar {
  grid-area: toolbar;
  margin-top: 0;
}

.panel-operator-console > .operator-status-strip {
  grid-area: status;
  margin-top: 0;
}

.panel-operator-console > .operator-demo-summary-strip {
  grid-area: demo;
  margin-top: 0;
}

.panel-operator-console > .operator-summary-guide {
  grid-area: guide;
  margin-top: 0;
}

.panel-operator-console > .operator-quick-start {
  grid-area: quickstart;
  margin-top: 0;
}

.panel-operator-console > .operator-lane-playbook {
  grid-area: playbook;
  margin-top: 0;
}

.panel-operator-console > .operator-triage-summary {
  grid-area: triage;
  margin-top: 0;
}

.panel-operator-console > .operator-signal-strip-surface {
  grid-area: signal;
  margin-top: 0;
}

.panel-operator-console > .operator-lane-focus-rail {
  grid-area: lanefocus;
  margin-top: 0;
}

.panel-operator-console > .operator-health-board {
  grid-area: health;
  margin-top: 0;
}

.panel-operator-console > .operator-control-surfaces {
  grid-area: controls;
  margin-top: 0;
}

.panel-operator-console > .operator-advanced-actions {
  grid-area: advancedactions;
  margin-top: 0;
}

.panel-operator-console > #operatorSummary {
  grid-area: summary;
  margin-top: 0;
}

.panel-operator-console > .operator-health-board > [data-operator-group="bridge-safety"] {
  order: 1;
}

.panel-operator-console > .operator-health-board > [data-operator-group="queue-lifecycle"] {
  order: 2;
}

.panel-operator-console > .operator-health-board > [data-operator-group="runtime-device"] {
  order: 3;
}

.panel-operator-console > .operator-health-board > [data-operator-group="governance-evidence"] {
  order: 4;
}

.panel-operator-console .operator-status-strip {
  grid-template-columns: minmax(208px, 0.64fr) minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--primary) 20%, var(--border-soft));
  border-radius: calc(var(--radius) - 4px);
  background:
    radial-gradient(260px 96px at 0% -24%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    var(--shadow-2xs);
}

.panel-operator-console .operator-console-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto;
  gap: 14px 18px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  border-radius: calc(var(--radius) - 3px);
  background:
    radial-gradient(280px 110px at 0% -28%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 96%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
}

.panel-operator-console .operator-console-entry:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--primary) 42%, white);
  outline-offset: 3px;
}

.panel-operator-console .operator-console-entry-copy {
  display: grid;
  gap: 6px;
}

.panel-operator-console .operator-console-entry-copy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.panel-operator-console .operator-console-entry-status {
  margin: 0;
}

.panel-operator-console .operator-console-entry-title {
  display: block;
  font-size: 1rem;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: color-mix(in oklch, var(--foreground) 94%, white);
}

.panel-operator-console .operator-console-entry-hint {
  margin: 0;
  max-width: 68ch;
  color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
}

.panel-operator-console .operator-console-entry-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.panel-operator-console .operator-console-entry-action {
  min-height: 38px;
  padding-inline: 14px;
  white-space: nowrap;
}

.panel-operator-console .operator-console-entry-action[data-entry-action-state="current"] {
  border-color: color-mix(in oklch, var(--chart-1) 14%, var(--border-soft));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 84%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
  opacity: 0.78;
}

.panel-operator-console .operator-console-entry-action[data-entry-action-state="current"]:hover {
  border-color: color-mix(in oklch, var(--chart-1) 18%, var(--border-soft));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control-hover) 86%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
  opacity: 0.84;
}

.panel-operator-console .operator-console-entry-action-refresh {
  border-color: color-mix(in oklch, var(--primary) 28%, var(--border-soft));
}

.panel-operator-console .operator-console-entry[data-entry-state="complete"] {
  border-color: color-mix(in oklch, var(--chart-1) 18%, var(--border-soft));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 96%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.panel-operator-console .operator-console-entry[data-entry-state="complete"] .operator-console-entry-title {
  color: color-mix(in oklch, var(--foreground) 88%, white);
}

.panel-operator-console .operator-console-entry[data-entry-state="complete"] .operator-console-entry-hint {
  color: color-mix(in oklch, var(--foreground) 56%, var(--muted-foreground));
}

.panel-operator-console .operator-console-entry[data-entry-state="complete"] .operator-console-entry-actions {
  opacity: 0.88;
}

.panel-operator-console .operator-workspace-chooser {
  display: grid;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 90%, transparent);
  border-radius: calc(var(--radius) - 3px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-workspace-chooser-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: 14px 18px;
  align-items: start;
}

.panel-operator-console .operator-workspace-chooser-copy {
  display: grid;
  gap: 6px;
}

.panel-operator-console .operator-workspace-chooser-title {
  display: block;
  font-size: 0.98rem;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: color-mix(in oklch, var(--foreground) 94%, white);
}

.panel-operator-console .operator-workspace-chooser-hint {
  margin: 0;
  max-width: 68ch;
  color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-chooser-status-row {
  display: grid;
  gap: 7px;
  justify-items: start;
  align-content: start;
}

.panel-operator-console .operator-workspace-chooser-meta {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.42;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-return {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  justify-self: start;
  font-size: 0.72rem;
  font-weight: 600;
}

.panel-operator-console .operator-workspace-chooser-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.panel-operator-console .operator-workspace-header {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: 12px 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  border-radius: calc(var(--radius) - 4px);
  background:
    radial-gradient(200px 84px at 0% -28%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-workspace-header-copy {
  display: grid;
  gap: 8px;
  align-content: start;
}

.panel-operator-console .operator-workspace-header-copy-block {
  display: grid;
  gap: 6px;
}

.panel-operator-console .operator-workspace-header-title {
  display: block;
  font-size: 0.98rem;
  line-height: 1.2;
  color: color-mix(in oklch, var(--foreground) 95%, white);
}

.panel-operator-console .operator-workspace-header-hint {
  margin: 0;
  max-width: 66ch;
  font-size: 0.79rem;
  line-height: 1.45;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-header-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.panel-operator-console .operator-workspace-header-fact {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 10px 11px;
  border-radius: calc(var(--radius) - 8px);
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-workspace-header-fact-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-header-fact-value {
  font-size: 0.79rem;
  line-height: 1.34;
  color: color-mix(in oklch, var(--foreground) 92%, white);
}

.panel-operator-console .operator-workspace-header-fact-source {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
  font-size: 0.62rem;
  line-height: 1.24;
}

.panel-operator-console .operator-workspace-header-fact[data-signal-density="compact"] .operator-workspace-header-fact-source {
  font-size: 0.6rem;
  line-height: 1.22;
  color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-header-fact-freshness {
  color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
  font-size: 0.61rem;
  line-height: 1.24;
}

.panel-operator-console .operator-workspace-header-fact[data-freshness-state="dormant"] .operator-workspace-header-fact-freshness {
  color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-header-fact[data-freshness-state="steady"] .operator-workspace-header-fact-freshness {
  color: color-mix(in oklch, var(--foreground) 74%, white);
}

.panel-operator-console .operator-workspace-header-fact[data-freshness-state="neutral"] .operator-workspace-header-fact-freshness {
  color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-header-fact[data-freshness-state="fail"] .operator-workspace-header-fact-freshness {
  color: color-mix(in oklch, var(--destructive) 58%, white);
}

.panel-operator-console .operator-workspace-header-fact[data-signal-state="dormant"] .operator-workspace-header-fact-value {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-header-fact[data-signal-state="steady"] .operator-workspace-header-fact-value {
  color: color-mix(in oklch, var(--foreground) 82%, white);
}

.panel-operator-console .operator-workspace-header-fact[data-signal-state="neutral"] .operator-workspace-header-fact-value {
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-header-fact[data-signal-state="fail"] .operator-workspace-header-fact-value {
  color: color-mix(in oklch, var(--chart-4) 64%, white);
}

.panel-operator-console .operator-workspace-card {
  min-height: 126px;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 7px;
  padding: 12px 13px;
  border-radius: calc(var(--radius) - 8px);
  text-align: left;
  white-space: normal;
}

.panel-operator-console .operator-workspace-card[data-workspace-state="fail"] {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border-soft));
  background:
    radial-gradient(180px 72px at 0% -22%, color-mix(in oklch, var(--destructive) 10%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-workspace-card[data-workspace-state="neutral"] {
  border-color: color-mix(in oklch, var(--warning) 30%, var(--border-soft));
}

.panel-operator-console .operator-workspace-card[data-workspace-state="ok"] {
  border-color: color-mix(in oklch, var(--chart-1) 28%, var(--border-soft));
}

.panel-operator-console .operator-workspace-card[data-workspace-current="true"] .operator-workspace-card-footer {
  gap: 4px;
}

.panel-operator-console .operator-workspace-card[data-workspace-current="true"] .operator-workspace-card-meta {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-current="true"] .operator-workspace-card-signal-label {
  color: color-mix(in oklch, var(--foreground) 54%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-focus {
  gap: 1px;
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-focus-label {
  color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-focus-value {
  font-size: 0.63rem;
  line-height: 1.24;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-open {
  gap: 1px;
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-open-label {
  color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-open-value {
  font-size: 0.63rem;
  line-height: 1.24;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-view {
  gap: 1px;
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-view-label {
  color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-view-value {
  font-size: 0.63rem;
  line-height: 1.24;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card.is-active {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft));
  background:
    radial-gradient(180px 72px at 0% -22%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-workspace-card-overview.is-active {
  border-color: color-mix(in oklch, var(--accent-foreground) 28%, var(--border-soft));
}

.panel-operator-console .operator-workspace-card-kicker {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  background: color-mix(in oklch, var(--surface-control) 92%, transparent);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-marker="current"] .operator-workspace-card-marker {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft));
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--primary) 16%, var(--surface-control)),
      color-mix(in oklch, var(--primary) 10%, var(--surface-panel-2)));
  color: color-mix(in oklch, var(--foreground) 96%, white);
}

.panel-operator-console .operator-workspace-card[data-workspace-marker="recommended-next"] .operator-workspace-card-marker {
  border-color: color-mix(in oklch, var(--chart-2) 22%, var(--border-soft));
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--chart-2) 12%, var(--surface-control)),
      color-mix(in oklch, var(--chart-2) 8%, var(--surface-panel-2)));
  color: color-mix(in oklch, var(--chart-2) 56%, white);
}

.panel-operator-console .operator-workspace-card-title {
  font-size: 0.84rem;
  line-height: 1.28;
}

.panel-operator-console .operator-workspace-card-hint {
  font-size: 0.74rem;
  line-height: 1.38;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-hint {
  font-size: 0.68rem;
  line-height: 1.28;
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-footer {
  width: 100%;
  display: grid;
  gap: 6px;
  margin-top: auto;
}

.panel-operator-console .operator-workspace-card-footer > .status-pill {
  min-height: 24px;
}

.panel-operator-console .operator-workspace-card-meta {
  font-size: 0.68rem;
  line-height: 1.35;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-meta {
  font-size: 0.63rem;
  line-height: 1.28;
  color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-status {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-status {
  gap: 0;
}

.panel-operator-console .operator-workspace-card[data-workspace-summary-density="compact"] .operator-workspace-card-status-label {
  display: none;
}

.panel-operator-console .operator-workspace-card-next {
  display: grid;
  gap: 2px;
}

.panel-operator-console .operator-workspace-card-focus {
  display: grid;
  gap: 2px;
}

.panel-operator-console .operator-workspace-card-open {
  display: grid;
  gap: 2px;
}

.panel-operator-console .operator-workspace-card-mode {
  display: grid;
  gap: 2px;
}

.panel-operator-console .operator-workspace-card-view {
  display: grid;
  gap: 2px;
}

.panel-operator-console .operator-workspace-card-status-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-next-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-focus-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-open-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-mode-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-view-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-next-value {
  font-size: 0.68rem;
  line-height: 1.28;
  color: color-mix(in oklch, var(--foreground) 84%, white);
}

.panel-operator-console .operator-workspace-card-focus-value {
  font-size: 0.68rem;
  line-height: 1.28;
  color: color-mix(in oklch, var(--foreground) 84%, white);
}

.panel-operator-console .operator-workspace-card-open-value {
  font-size: 0.68rem;
  line-height: 1.28;
  color: color-mix(in oklch, var(--foreground) 84%, white);
}

.panel-operator-console .operator-workspace-card-mode-value {
  font-size: 0.68rem;
  line-height: 1.28;
  color: color-mix(in oklch, var(--foreground) 84%, white);
}

.panel-operator-console .operator-workspace-card-view-value {
  font-size: 0.68rem;
  line-height: 1.28;
  color: color-mix(in oklch, var(--foreground) 84%, white);
}

.panel-operator-console .operator-workspace-card[data-workspace-state="neutral"] .operator-workspace-card-next-value {
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-state="neutral"] .operator-workspace-card-focus-value {
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-state="neutral"] .operator-workspace-card-open-value {
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-state="neutral"] .operator-workspace-card-mode-value {
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-state="neutral"] .operator-workspace-card-view-value {
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card[data-workspace-state="fail"] .operator-workspace-card-next-value {
  color: color-mix(in oklch, var(--destructive) 60%, white);
}

.panel-operator-console .operator-workspace-card[data-workspace-state="fail"] .operator-workspace-card-focus-value {
  color: color-mix(in oklch, var(--destructive) 60%, white);
}

.panel-operator-console .operator-workspace-card[data-workspace-state="fail"] .operator-workspace-card-open-value {
  color: color-mix(in oklch, var(--destructive) 60%, white);
}

.panel-operator-console .operator-workspace-card[data-workspace-state="fail"] .operator-workspace-card-mode-value {
  color: color-mix(in oklch, var(--destructive) 60%, white);
}

.panel-operator-console .operator-workspace-card[data-workspace-state="fail"] .operator-workspace-card-view-value {
  color: color-mix(in oklch, var(--destructive) 60%, white);
}

.panel-operator-console .operator-workspace-card-signal {
  display: grid;
  gap: 3px;
  padding-top: 2px;
}

.panel-operator-console .operator-workspace-card-signal-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-signal[data-signal-role="current"] .operator-workspace-card-signal-label {
  color: color-mix(in oklch, var(--foreground) 82%, white);
}

.panel-operator-console .operator-workspace-card-signal-value {
  font-size: 0.69rem;
  line-height: 1.32;
  color: color-mix(in oklch, var(--foreground) 82%, white);
}

.panel-operator-console .operator-workspace-card-signal-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 6px;
  align-items: baseline;
}

.panel-operator-console .operator-workspace-card-signal-source {
  font-size: 0.61rem;
  line-height: 1.22;
}

.panel-operator-console .operator-workspace-card-signal-freshness {
  font-size: 0.6rem;
  line-height: 1.22;
}

.panel-operator-console .operator-workspace-card-signal-meta-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-signal-meta-value {
  min-width: 0;
}

.panel-operator-console .operator-workspace-card-signal[data-signal-density="compact"] {
  gap: 2px;
}

.panel-operator-console .operator-workspace-card-signal[data-signal-density="compact"] .operator-workspace-card-signal-source {
  grid-template-columns: minmax(0, 1fr);
}

.panel-operator-console .operator-workspace-card-signal[data-signal-density="compact"] .operator-workspace-card-signal-source .operator-workspace-card-signal-meta-label {
  display: none;
}

.panel-operator-console .operator-workspace-card-signal[data-signal-density="compact"] .operator-workspace-card-signal-source .operator-workspace-card-signal-meta-value {
  font-size: 0.56rem;
  line-height: 1.2;
  color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-signal[data-signal-state="dormant"] .operator-workspace-card-signal-value {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-signal[data-signal-state="steady"] .operator-workspace-card-signal-value {
  color: color-mix(in oklch, var(--foreground) 82%, white);
}

.panel-operator-console .operator-workspace-card-signal[data-signal-state="neutral"] .operator-workspace-card-signal-value {
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-signal[data-signal-state="fail"] .operator-workspace-card-signal-value {
  color: color-mix(in oklch, var(--chart-4) 60%, white);
}

.panel-operator-console .operator-workspace-card-signal[data-signal-state="dormant"] .operator-workspace-card-signal-source .operator-workspace-card-signal-meta-value {
  color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-signal[data-freshness-state="dormant"] .operator-workspace-card-signal-freshness .operator-workspace-card-signal-meta-value {
  color: color-mix(in oklch, var(--foreground) 54%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-signal[data-signal-state="steady"] .operator-workspace-card-signal-source .operator-workspace-card-signal-meta-value {
  color: color-mix(in oklch, var(--foreground) 76%, white);
}

.panel-operator-console .operator-workspace-card-signal[data-freshness-state="steady"] .operator-workspace-card-signal-freshness .operator-workspace-card-signal-meta-value {
  color: color-mix(in oklch, var(--foreground) 74%, white);
}

.panel-operator-console .operator-workspace-card-signal[data-signal-state="neutral"] .operator-workspace-card-signal-source .operator-workspace-card-signal-meta-value {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-signal[data-freshness-state="neutral"] .operator-workspace-card-signal-freshness .operator-workspace-card-signal-meta-value {
  color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
}

.panel-operator-console .operator-workspace-card-signal[data-signal-state="fail"] .operator-workspace-card-signal-source .operator-workspace-card-signal-meta-value {
  color: color-mix(in oklch, var(--chart-4) 50%, white);
}

.panel-operator-console .operator-workspace-card-signal[data-freshness-state="fail"] .operator-workspace-card-signal-freshness .operator-workspace-card-signal-meta-value {
  color: color-mix(in oklch, var(--destructive) 58%, white);
}

.panel-operator-console .operator-last-refresh,
.panel-operator-console .operator-mode-banner {
  min-height: 54px;
  padding: 9px 11px;
  border-radius: calc(var(--radius) - 8px);
}

.panel-operator-console .operator-mode-copy-block {
  gap: 3px;
}

.panel-operator-console .operator-mode-copy {
  font-size: 0.82rem;
  line-height: 1.34;
}

.panel-operator-console .operator-board-mode-hint {
  max-width: none;
  font-size: 0.74rem;
  line-height: 1.34;
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.panel-operator-console .operator-demo-summary-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.panel-operator-console .operator-surface-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
  color: color-mix(in oklch, var(--foreground) 90%, var(--accent-foreground));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 10px 24px -22px color-mix(in oklch, var(--shadow-color) 40%, transparent);
}

.panel-operator-console .operator-surface-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel-operator-console .operator-surface-icon-realtime {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border-soft));
  background:
    radial-gradient(80px 48px at 0% 0%, color-mix(in oklch, var(--destructive) 14%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
  color: color-mix(in oklch, var(--destructive) 78%, white);
}

.panel-operator-console .operator-surface-icon-queue,
.panel-operator-console .operator-surface-icon-runtime {
  border-color: color-mix(in oklch, var(--accent-foreground) 34%, var(--border-soft));
  background:
    radial-gradient(80px 48px at 0% 0%, color-mix(in oklch, var(--accent-foreground) 14%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
  color: color-mix(in oklch, var(--accent-foreground) 84%, white);
}

.panel-operator-console .operator-surface-icon-approvals,
.panel-operator-console .operator-surface-icon-guardrails {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft));
  background:
    radial-gradient(80px 48px at 0% 0%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
  color: color-mix(in oklch, var(--primary) 80%, white);
}

.panel-operator-console .operator-surface-icon-startup,
.panel-operator-console .operator-surface-icon-workflow {
  border-color: color-mix(in oklch, var(--chart-2) 34%, var(--border-soft));
  background:
    radial-gradient(80px 48px at 0% 0%, color-mix(in oklch, var(--chart-2) 16%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
  color: color-mix(in oklch, var(--chart-2) 82%, white);
}

.panel-operator-console .operator-surface-icon-executor,
.panel-operator-console .operator-surface-icon-evidence,
.panel-operator-console .operator-surface-icon-device {
  border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border-soft));
  background:
    radial-gradient(80px 48px at 0% 0%, color-mix(in oklch, var(--chart-1) 16%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
  color: color-mix(in oklch, var(--chart-1) 78%, white);
}

.panel-operator-console .operator-demo-summary-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 14px 15px;
  gap: 8px;
  border-radius: calc(var(--radius) - 4px);
}

.panel-operator-console .operator-demo-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.panel-operator-console .operator-demo-summary-title-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.panel-operator-console .operator-demo-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: color-mix(in oklch, var(--muted-foreground) 42%, var(--border-soft));
  opacity: 0.88;
}

.panel-operator-console .operator-demo-summary-card[data-operator-variant="fail"] {
  border-color: color-mix(in oklch, var(--destructive) 42%, var(--border-soft));
  background:
    radial-gradient(240px 92px at 0% -20%, color-mix(in oklch, var(--destructive) 12%, transparent), transparent 72%),
    linear-gradient(165deg, color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)), color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control)));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 18px 30px -30px color-mix(in oklch, var(--destructive) 54%, transparent),
    var(--shadow-2xs);
}

.panel-operator-console .operator-demo-summary-card[data-operator-variant="fail"]::before {
  background: color-mix(in oklch, var(--destructive) 78%, white);
}

.panel-operator-console .operator-demo-summary-card[data-operator-variant="ok"] {
  border-color: color-mix(in oklch, var(--chart-1) 40%, var(--border-soft));
  background:
    radial-gradient(240px 92px at 0% -20%, color-mix(in oklch, var(--chart-1) 11%, transparent), transparent 72%),
    linear-gradient(165deg, color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)), color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control)));
}

.panel-operator-console .operator-demo-summary-card[data-operator-variant="ok"]::before {
  background: color-mix(in oklch, var(--chart-1) 76%, white);
}

.panel-operator-console .operator-demo-summary-card[data-operator-variant="stale"] {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--accent-foreground) 32%, var(--border-soft));
  background:
    radial-gradient(240px 92px at 0% -20%, color-mix(in oklch, var(--accent-foreground) 8%, transparent), transparent 72%),
    linear-gradient(165deg, color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)), color-mix(in oklch, var(--surface-panel-2) 94%, var(--surface-control)));
}

.panel-operator-console .operator-demo-summary-card[data-operator-variant="stale"]::before {
  background: color-mix(in oklch, var(--accent-foreground) 62%, white);
}

.panel-operator-console .operator-demo-summary-card[data-operator-variant="neutral"]:not(.is-placeholder)::before {
  background: color-mix(in oklch, var(--accent-foreground) 74%, white);
}

.panel-operator-console .operator-demo-summary-title {
  margin: 0;
  font-size: 0.77rem;
}

.panel-operator-console .operator-demo-summary-copy {
  margin: 0;
  max-width: 30ch;
  font-size: 0.76rem;
  line-height: 1.34;
}

.panel-operator-console .operator-demo-summary-placeholder-note {
  display: none;
  margin: 0;
  max-width: 30ch;
  overflow: hidden;
  font-size: 0.74rem;
  line-height: 1.34;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.panel-operator-console .operator-demo-summary-card:has(.status-pill[data-status-code="no_data"]) .operator-demo-summary-copy,
.panel-operator-console .operator-demo-summary-card:has(.status-pill[data-status-code="awaiting_refresh"]) .operator-demo-summary-copy,
.panel-operator-console .operator-demo-summary-card:has(.status-pill[data-status-code="summary_error"]) .operator-demo-summary-copy,
.panel-operator-console .operator-demo-summary-card.is-placeholder .operator-demo-summary-copy {
  display: none;
}

.panel-operator-console .operator-demo-summary-card:has(.status-pill[data-status-code="no_data"]) .operator-demo-summary-placeholder-note,
.panel-operator-console .operator-demo-summary-card:has(.status-pill[data-status-code="awaiting_refresh"]) .operator-demo-summary-placeholder-note,
.panel-operator-console .operator-demo-summary-card:has(.status-pill[data-status-code="summary_error"]) .operator-demo-summary-placeholder-note,
.panel-operator-console .operator-demo-summary-card.is-placeholder .operator-demo-summary-placeholder-note {
  display: -webkit-box;
}

.panel-operator-console .operator-demo-summary-ledger {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: end;
}

.panel-operator-console .operator-demo-summary-kpi {
  margin-top: 0;
  justify-self: end;
  align-self: end;
  gap: 4px;
}

.panel-operator-console .operator-demo-summary-kpi-token {
  padding: 2px 8px;
  font-size: 0.67rem;
}

.panel-operator-console .operator-demo-summary-card .status-pill {
  min-height: 27px;
  padding: 4px 9px;
  font-size: 0.74rem;
}

.panel-operator-console .operator-summary-guide {
  position: sticky;
  top: 14px;
  padding: 16px;
  gap: 14px;
  border-radius: calc(var(--radius) - 2px);
  border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft));
  background:
    radial-gradient(260px 96px at 0% -26%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 18px 36px -34px color-mix(in oklch, var(--primary) 42%, transparent),
    var(--shadow-xs);
  grid-template-columns: 1fr;
}

.panel-operator-console .operator-summary-guide[data-operator-variant="fail"] {
  border-color: color-mix(in oklch, var(--destructive) 42%, var(--border-soft));
  background:
    radial-gradient(260px 96px at 0% -26%, color-mix(in oklch, var(--destructive) 12%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-summary-guide[data-operator-variant="ok"] {
  border-color: color-mix(in oklch, var(--chart-1) 42%, var(--border-soft));
  background:
    radial-gradient(260px 96px at 0% -26%, color-mix(in oklch, var(--chart-1) 10%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-summary-guide-head {
  display: grid;
  gap: 10px;
}

.panel-operator-console .operator-summary-guide-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
}

.panel-operator-console .operator-summary-guide-title {
  font-size: 1rem;
}

.panel-operator-console .operator-summary-guide-hint {
  font-size: 0.81rem;
  line-height: 1.44;
}

.panel-operator-console .operator-summary-guide-status-row {
  display: grid;
  gap: 6px;
  padding: 10px 11px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 90%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-summary-guide-status-row .status-pill {
  margin: 0;
  justify-self: start;
}

.panel-operator-console .operator-summary-guide-meta {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.78rem;
  line-height: 1.38;
}

.panel-operator-console .operator-summary-guide-context {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  border-radius: calc(var(--radius) - 10px);
  background:
    radial-gradient(220px 72px at 0% -28%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-summary-guide-context.is-hidden {
  display: none;
}

.panel-operator-console .operator-summary-guide-view-pill {
  justify-self: start;
  padding: 6px 10px;
  border: 1px solid color-mix(in oklch, var(--primary) 26%, var(--border-soft));
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 96%, var(--muted-foreground));
  background: color-mix(in oklch, var(--surface-control-hover) 90%, transparent);
}

.panel-operator-console .operator-summary-guide-context[data-saved-view="runtime"] .operator-summary-guide-view-pill {
  border-color: color-mix(in oklch, var(--accent-foreground) 34%, var(--border-soft));
}

.panel-operator-console .operator-summary-guide-context[data-saved-view="approvals"] .operator-summary-guide-view-pill {
  border-color: color-mix(in oklch, var(--warning) 38%, var(--border-soft));
}

.panel-operator-console .operator-summary-guide-context[data-saved-view="audit"] .operator-summary-guide-view-pill {
  border-color: color-mix(in oklch, var(--chart-1) 38%, var(--border-soft));
}

.panel-operator-console .operator-summary-guide-view-note {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  font-size: 0.79rem;
  line-height: 1.46;
}

.panel-operator-console .operator-summary-guide-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.panel-operator-console .operator-summary-guide-preview-item {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-summary-guide-preview-card {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.panel-operator-console .operator-summary-guide-preview-card:hover {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft));
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -22px color-mix(in oklch, black 42%, transparent);
}

.panel-operator-console .operator-summary-guide-preview-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--ring) 18%, transparent),
    0 12px 22px -22px color-mix(in oklch, black 42%, transparent);
}

.panel-operator-console .operator-summary-guide-preview-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
}

.panel-operator-console .operator-summary-guide-preview-value {
  font-size: 0.76rem;
  line-height: 1.34;
  color: color-mix(in oklch, var(--foreground) 92%, white);
}

.panel-operator-console .operator-summary-guide-preview[data-workspace-state="fail"] .operator-summary-guide-preview-item {
  border-color: color-mix(in oklch, var(--destructive) 28%, var(--border-soft));
}

.panel-operator-console .operator-summary-guide-preview[data-workspace-state="ok"] .operator-summary-guide-preview-item {
  border-color: color-mix(in oklch, var(--chart-1) 24%, var(--border-soft));
}

.panel-operator-console .operator-summary-guide-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.panel-operator-console .operator-summary-guide-step {
  display: grid;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-summary-guide-step[data-step-state="current"] {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft));
  background:
    radial-gradient(180px 72px at 0% -22%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-summary-guide-step[data-step-state="done"] {
  border-color: color-mix(in oklch, var(--chart-1) 30%, var(--border-soft));
}

.panel-operator-console .operator-summary-guide-step.is-disabled {
  opacity: 0.76;
}

.panel-operator-console .operator-summary-guide-step-head,
.panel-operator-console .operator-summary-guide-step-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.panel-operator-console .operator-summary-guide-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  background: color-mix(in oklch, var(--surface-control-hover) 90%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.72rem;
  font-weight: 800;
}

.panel-operator-console .operator-summary-guide-step-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.panel-operator-console .operator-summary-guide-step-title {
  font-size: 0.79rem;
  line-height: 1.35;
}

.panel-operator-console .operator-summary-guide-step-hint {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.73rem;
  line-height: 1.44;
}

.panel-operator-console .operator-summary-guide-step-foot .status-pill {
  flex: 0 0 auto;
}

.panel-operator-console .operator-summary-guide-step-action {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.74rem;
}

@media (max-width: 1200px) {
  .panel-operator-console .operator-workspace-chooser-head {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-workspace-header {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-workspace-header-facts {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-summary-guide-path {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-summary-guide-step-head,
  .panel-operator-console .operator-summary-guide-step-foot {
    flex-wrap: wrap;
  }
}

.panel-operator-console .operator-summary-guide-watch {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.panel-operator-console .operator-summary-guide-watch[data-watch-state="empty"] {
  display: none;
}

.panel-operator-console .operator-summary-guide-watch-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
}

.panel-operator-console .operator-summary-guide-watchlist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.panel-operator-console .operator-summary-guide-watch-chip {
  border: 1px solid color-mix(in oklch, var(--border-soft) 90%, transparent);
  border-radius: 999px;
  min-height: 30px;
  padding: 5px 10px;
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, transform 130ms ease;
}

.panel-operator-console .operator-summary-guide-watch-chip:hover {
  border-color: color-mix(in oklch, var(--primary) 42%, var(--border));
  background: color-mix(in oklch, var(--surface-control-hover) 92%, transparent);
  transform: translateY(-1px);
}

.panel-operator-console .operator-summary-guide-watch-chip.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 44%, var(--border-soft));
  background: color-mix(in oklch, var(--danger-soft) 86%, transparent);
  color: var(--status-fail-fg);
}

.panel-operator-console .operator-summary-guide-watch-chip.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 42%, var(--border-soft));
  background: color-mix(in oklch, var(--ok-soft) 84%, transparent);
  color: var(--status-ok-fg);
}

.panel-operator-console .operator-summary-guide-watch-chip.is-empty {
  cursor: default;
  border-style: dashed;
}

.panel-operator-console .operator-summary-guide-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.panel-operator-console .operator-summary-guide-actions > .operator-summary-guide-action-refresh {
  grid-column: 1 / -1;
  grid-row: 1;
}

.panel-operator-console .operator-summary-guide-actions > [hidden] {
  display: none !important;
}

.panel-operator-console .operator-summary-guide-action {
  min-height: 42px;
}

.panel-operator-console .operator-summary-guide-action-secondary {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.74rem;
}

.panel-operator-console .operator-signal-strip-surface {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 6px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-signal-strip-surface[data-signal-state="fail"] {
  border-color: color-mix(in oklch, var(--destructive) 32%, var(--border-soft));
  background:
    radial-gradient(220px 84px at 0% -22%, color-mix(in oklch, var(--destructive) 9%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-signal-strip-surface[data-signal-state="stale"] {
  border-color: color-mix(in oklch, var(--accent-foreground) 28%, var(--border-soft));
  background:
    radial-gradient(220px 84px at 0% -22%, color-mix(in oklch, var(--accent-foreground) 9%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-signal-strip-surface[data-signal-state="ok"] {
  border-color: color-mix(in oklch, var(--chart-1) 28%, var(--border-soft));
}

.panel-operator-console .operator-signal-strip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.panel-operator-console .operator-signal-strip-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.panel-operator-console .operator-signal-strip-summary {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in oklch, var(--accent-foreground) 18%, var(--border-soft));
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 92%, transparent);
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel-operator-console .operator-signal-strip-summary-secondary {
  border-color: color-mix(in oklch, var(--border-soft) 86%, transparent);
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.panel-operator-console .operator-signal-strip-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.panel-operator-console .operator-signal-strip-kicker {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-signal-strip-hint {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.8rem;
  line-height: 1.45;
}

.panel-operator-console .operator-signal-strip {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.panel-operator-console .operator-signal-stable-surface {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
}

.panel-operator-console .operator-signal-stable-surface.is-hidden {
  display: none;
}

.panel-operator-console .operator-signal-stable-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 10px;
}

.panel-operator-console .operator-signal-stable-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-signal-stable-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.42;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
}

.panel-operator-console .operator-signal-stable-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-operator-console .operator-signal-stable-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, white);
  font-size: 0.73rem;
  font-weight: 600;
}

.panel-operator-console .operator-signal-stable-chip.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 24%, var(--border-soft));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-signal-stable-chip.is-dormant {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--muted-foreground) 32%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
}

.panel-operator-console .operator-signal-stable-chip:hover {
  border-color: color-mix(in oklch, var(--primary) 32%, var(--border));
  background: color-mix(in oklch, var(--surface-control-hover) 92%, transparent);
}

.panel-operator-console .operator-signal-stable-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.panel-operator-console .operator-signal-overflow-chip {
  min-width: 0;
  min-height: 34px;
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 6px 10px;
  border: 1px dashed color-mix(in oklch, var(--accent-foreground) 22%, var(--border-soft));
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--surface-panel) 97%, transparent));
  color: color-mix(in oklch, var(--foreground) 90%, white);
  text-align: left;
}

.panel-operator-console .operator-signal-overflow-chip:hover {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
  background: color-mix(in oklch, var(--surface-control-hover) 92%, transparent);
}

.panel-operator-console .operator-signal-overflow-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.panel-operator-console .operator-signal-overflow-chip-label {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
}

.panel-operator-console .operator-signal-overflow-chip-meta {
  font-size: 0.65rem;
  line-height: 1.15;
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
}

.panel-operator-console .operator-signal-stable-chip-label {
  white-space: nowrap;
}

.panel-operator-console .operator-signal-stable-chip-status {
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
  font-size: 0.69rem;
  line-height: 1.2;
}

.panel-operator-console .operator-lane-focus-rail {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 8px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-lane-focus-rail.is-hidden {
  display: none;
}

.panel-operator-console .operator-lane-focus-rail.is-inline {
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  align-items: center;
  gap: 10px 14px;
}

.panel-operator-console .operator-lane-focus-rail-head,
.panel-operator-console .operator-lane-focus-rail-copy {
  display: grid;
  gap: 4px;
}

.panel-operator-console .operator-lane-focus-rail-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-lane-focus-rail-hint {
  margin: 0;
  max-width: 54ch;
  font-size: 0.77rem;
  line-height: 1.42;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
}

.panel-operator-console .operator-lane-focus-rail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-operator-console .operator-lane-focus-chip {
  display: grid;
  gap: 4px;
  min-width: min(220px, 100%);
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background:
    radial-gradient(180px 58px at 0% -24%, color-mix(in oklch, var(--surface-control-hover) 34%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--surface-panel) 97%, transparent));
  color: color-mix(in oklch, var(--foreground) 92%, white);
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-rail-head {
  align-self: center;
}

.panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-rail-hint {
  max-width: none;
}

.panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-rail-list {
  justify-content: flex-end;
}

.panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-chip,
.panel-operator-console .operator-lane-focus-chip.is-inline {
  min-width: min(340px, 100%);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
}

.panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-chip-title,
.panel-operator-console .operator-lane-focus-chip.is-inline .operator-lane-focus-chip-title,
.panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-chip-meta,
.panel-operator-console .operator-lane-focus-chip.is-inline .operator-lane-focus-chip-meta {
  grid-column: 1 / 2;
}

.panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-chip-scope,
.panel-operator-console .operator-lane-focus-chip.is-inline .operator-lane-focus-chip-scope {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  padding-left: 12px;
  border-left: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
}

.panel-operator-console .operator-lane-focus-chip:hover {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft));
  transform: translateY(-1px);
}

.panel-operator-console .operator-lane-focus-chip.is-active {
  border-color: color-mix(in oklch, var(--primary) 48%, var(--border-soft));
  box-shadow:
    0 18px 36px -30px color-mix(in oklch, var(--primary) 26%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 10%, transparent);
}

.panel-operator-console .operator-lane-focus-chip.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 36%, var(--border-soft));
  background:
    radial-gradient(180px 58px at 0% -24%, color-mix(in oklch, var(--destructive) 12%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--danger-soft) 82%, transparent));
}

.panel-operator-console .operator-lane-focus-chip.is-watch,
.panel-operator-console .operator-lane-focus-chip.is-stale {
  border-color: color-mix(in oklch, var(--warning) 32%, var(--border-soft));
  background:
    radial-gradient(180px 58px at 0% -24%, color-mix(in oklch, var(--warning) 10%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--warning-soft) 80%, transparent));
}

.panel-operator-console .operator-lane-focus-chip.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 32%, var(--border-soft));
  background:
    radial-gradient(180px 58px at 0% -24%, color-mix(in oklch, var(--chart-1) 11%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--chart-1) 10%, transparent));
}

.panel-operator-console .operator-lane-focus-chip-title {
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.panel-operator-console .operator-lane-focus-chip-meta,
.panel-operator-console .operator-lane-focus-chip-scope {
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.7rem;
  line-height: 1.38;
}

.panel-operator-console .operator-health-group-focus-flash {
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--primary) 30%, transparent),
    0 20px 40px -34px color-mix(in oklch, var(--primary) 28%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 8%, transparent);
}

.panel-operator-console .operator-signal-card {
  min-height: 0;
  padding: 11px 12px;
  gap: 6px;
  border-radius: calc(var(--radius) - 10px);
}

.panel-operator-console .operator-signal-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.panel-operator-console .operator-signal-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.panel-operator-console .operator-signal-card-title-row .operator-surface-icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 10px;
}

.panel-operator-console .operator-signal-card[data-operator-variant="fail"] {
  border-color: color-mix(in oklch, var(--destructive) 42%, var(--border-soft));
  background:
    radial-gradient(180px 64px at 0% -24%, color-mix(in oklch, var(--destructive) 10%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-signal-card[data-operator-variant="ok"] {
  border-color: color-mix(in oklch, var(--chart-1) 38%, var(--border-soft));
  background:
    radial-gradient(180px 64px at 0% -24%, color-mix(in oklch, var(--chart-1) 9%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-signal-card[data-operator-variant="stale"] {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--accent-foreground) 32%, var(--border-soft));
  background:
    radial-gradient(180px 64px at 0% -24%, color-mix(in oklch, var(--accent-foreground) 8%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-signal-card h3 {
  margin: 0;
  font-size: 0.71rem;
}

.panel-operator-console .operator-signal-card .status-pill {
  margin: 0;
  min-height: 28px;
  padding-block: 4px;
}

.panel-operator-console .operator-triage-stat {
  min-height: 86px;
  padding: 12px 13px;
}

.panel-operator-console .operator-triage-summary-head {
  grid-area: head;
}

.panel-operator-console .operator-priority-queue-list {
  grid-area: queue;
}

.panel-operator-console .operator-action-center-support-head {
  grid-area: supporthead;
  display: grid;
  gap: 2px;
  padding-top: 2px;
}

.panel-operator-console .operator-action-center-support-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
}

.panel-operator-console .operator-action-center-support-hint {
  margin: 0;
  max-width: 29ch;
  font-size: 0.71rem;
  line-height: 1.32;
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.panel-operator-console .operator-action-center-support {
  grid-area: support;
  display: grid;
  gap: 6px;
}

.panel-operator-console .operator-action-center-support[data-support-density="utility"] {
  gap: 0;
  padding-top: 2px;
}

.panel-operator-console .operator-action-center-card {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 90%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 7%, transparent),
    0 14px 22px -24px color-mix(in oklch, var(--shadow-color) 22%, transparent);
}

.panel-operator-console .operator-action-center-card.is-compact {
  gap: 7px;
  padding: 10px 11px;
}

.panel-operator-console .operator-action-center-card.is-utility-rail {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  padding: 2px 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.panel-operator-console .operator-action-center-card.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 42%, var(--border-soft));
  background:
    radial-gradient(220px 72px at 0% -26%, color-mix(in oklch, var(--destructive) 10%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-action-center-card.is-watch {
  border-color: color-mix(in oklch, var(--accent-foreground) 30%, var(--border-soft));
  background:
    radial-gradient(220px 72px at 0% -26%, color-mix(in oklch, var(--accent-foreground) 8%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-action-center-card.is-stale {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--accent-foreground) 28%, var(--border-soft));
  background:
    radial-gradient(220px 72px at 0% -26%, color-mix(in oklch, var(--accent-foreground) 7%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-action-center-card.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 32%, var(--border-soft));
  background:
    radial-gradient(220px 72px at 0% -26%, color-mix(in oklch, var(--chart-1) 8%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-action-center-card-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.panel-operator-console .operator-action-center-card.is-compact .operator-action-center-card-copy {
  gap: 4px;
}

.panel-operator-console .operator-action-center-card.is-utility-rail .operator-action-center-card-copy {
  gap: 1px;
}

.panel-operator-console .operator-action-center-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.panel-operator-console .operator-action-center-card.is-compact .operator-action-center-card-head {
  gap: 6px;
}

.panel-operator-console .operator-action-center-card.is-utility-rail .operator-action-center-card-head {
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.panel-operator-console .operator-action-center-card-kicker {
  margin: 0;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
}

.panel-operator-console .operator-action-center-card.is-fail .operator-action-center-card-kicker {
  color: color-mix(in oklch, var(--destructive) 78%, white);
}

.panel-operator-console .operator-action-center-card.is-watch .operator-action-center-card-kicker,
.panel-operator-console .operator-action-center-card.is-stale .operator-action-center-card-kicker {
  color: color-mix(in oklch, var(--accent-foreground) 80%, white);
}

.panel-operator-console .operator-action-center-card.is-ok .operator-action-center-card-kicker {
  color: color-mix(in oklch, var(--chart-1) 78%, white);
}

.panel-operator-console .operator-action-center-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.panel-operator-console .operator-action-center-card.is-compact .operator-action-center-tags {
  gap: 5px;
}

.panel-operator-console .operator-action-center-card.is-utility-rail .operator-action-center-tags {
  justify-content: flex-start;
}

.panel-operator-console .operator-action-center-support[data-support-density="utility"] .operator-action-center-card.is-utility-rail .operator-action-center-card-kicker {
  display: none;
}

.panel-operator-console .operator-action-center-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-panel) 95%, transparent);
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.panel-operator-console .operator-action-center-card.is-compact .operator-action-center-tag {
  min-height: 20px;
  padding: 0 7px;
  font-size: 0.64rem;
}

.panel-operator-console .operator-action-center-support[data-support-density="utility"] .operator-action-center-card.is-utility-rail .operator-action-center-tag {
  min-height: 18px;
  padding: 0 6px;
  font-size: 0.61rem;
}

.panel-operator-console .operator-action-center-card h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.panel-operator-console .operator-action-center-card.is-compact h3 {
  font-size: 0.82rem;
}

.panel-operator-console .operator-action-center-card.is-utility-rail h3 {
  font-size: 0.78rem;
  line-height: 1.08;
}

.panel-operator-console .operator-action-center-meta {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.79rem;
  line-height: 1.45;
}

.panel-operator-console .operator-action-center-card.is-compact .operator-action-center-meta {
  max-width: 44ch;
  font-size: 0.74rem;
  line-height: 1.38;
}

.panel-operator-console .operator-action-center-card.is-utility-rail .operator-action-center-meta {
  display: none;
}

.panel-operator-console .operator-action-center-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-operator-console .operator-action-center-card.is-compact .operator-action-center-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.panel-operator-console .operator-action-center-card.is-utility-rail .operator-action-center-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.panel-operator-console .operator-action-center-action {
  flex: 1 1 136px;
  min-width: 0;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid color-mix(in oklch, var(--primary) 28%, var(--border));
  border-radius: 12px;
  background: linear-gradient(
    150deg,
    color-mix(in oklch, var(--primary) 80%, white),
    color-mix(in oklch, var(--primary) 68%, var(--accent-foreground))
  );
  color: var(--primary-foreground);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 14px 24px -24px color-mix(in oklch, var(--primary) 54%, transparent);
}

.panel-operator-console .operator-action-center-card.is-compact .operator-action-center-action {
  flex: 0 1 auto;
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 0.72rem;
}

.panel-operator-console .operator-action-center-card.is-utility-rail .operator-action-center-action {
  flex: 0 1 auto;
  width: auto;
  min-width: 84px;
  min-height: 27px;
  padding: 4px 8px;
  font-size: 0.67rem;
}

.panel-operator-console .operator-action-center-action:hover {
  border-color: color-mix(in oklch, var(--primary) 38%, var(--border));
  filter: brightness(1.03);
}

.panel-operator-console .operator-action-center-action-secondary {
  border-color: color-mix(in oklch, var(--accent-foreground) 18%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
  color: color-mix(in oklch, var(--foreground) 92%, white);
  box-shadow: none;
}

.panel-operator-console .operator-triage-summary-foot {
  grid-area: foot;
}

.panel-operator-console .operator-quick-start,
.panel-operator-console .operator-lane-playbook,
.panel-operator-console .operator-advanced-actions {
  align-self: start;
}

@media (min-width: 921px) {
  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-group-body {
    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
    gap: 10px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty {
    padding: 10px 11px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty h3 {
    margin-bottom: 7px;
    font-size: 0.82rem;
    line-height: 1.22;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .status-pill {
    min-height: 23px;
    margin-bottom: 6px;
    padding: 4px 9px;
    font-size: 0.72rem;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .operator-health-hint {
    margin-top: 6px;
    font-size: 0.7rem;
    line-height: 1.22;
  }
  .panel-operator-console .operator-lane-focus-rail {
    padding: 8px 10px;
    gap: 6px;
  }

  .panel-operator-console .operator-lane-focus-rail-head {
    display: none;
  }

  .panel-operator-console .operator-lane-focus-rail-head {
    display: none;
  }

  .panel-operator-console .operator-lane-focus-rail.is-inline {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .panel-operator-console .operator-lane-focus-rail-list,
    .panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-rail-list {
    justify-content: flex-start;
    gap: 6px;
  }

  .panel-operator-console .operator-lane-focus-rail-list,
  .panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-rail-list {
    justify-content: flex-start;
    gap: 6px;
  }

  .panel-operator-console .operator-lane-focus-chip {
    min-width: min(188px, 100%);
    padding: 7px 10px;
    gap: 2px;
    border-radius: calc(var(--radius) - 11px);
  }

  .panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-chip,
  .panel-operator-console .operator-lane-focus-chip.is-inline {
    min-width: min(288px, 100%);
    gap: 2px 10px;
  }

  .panel-operator-console .operator-lane-focus-chip-title {
    font-size: 0.72rem;
    line-height: 1.28;
  }

  .panel-operator-console .operator-lane-focus-chip-meta,
  .panel-operator-console .operator-lane-focus-chip-scope {
    font-size: 0.64rem;
    line-height: 1.24;
  }

  .panel-operator-console .operator-advanced-actions:not([open]) {
    padding: 0;
    border-color: color-mix(in oklch, var(--border-soft) 86%, transparent);
    background: transparent;
  }

  .panel-operator-console .operator-advanced-actions:not([open]) > summary {
    min-height: 32px;
    padding: 7px 30px 7px 10px;
    gap: 8px;
    font-size: 0.78rem;
    line-height: 1.1;
  }

  .panel-operator-console .operator-advanced-actions:not([open]) > summary::after {
    width: 7px;
    height: 7px;
  }

  .panel-operator-console .operator-advanced-actions[open] {
    padding: 9px 10px;
  }

  .panel-operator-console .operator-advanced-actions[open] > summary {
    font-size: 0.82rem;
  }

  .panel-operator-console .operator-advanced-actions-hint {
    margin-top: 6px;
    font-size: 0.74rem;
    line-height: 1.34;
  }

  .panel-operator-console .operator-advanced-actions-row {
    margin-top: 8px;
  }

  .panel-operator-console .operator-demo-summary-card {
    padding: 11px 12px;
    gap: 6px;
  }

  .panel-operator-console .operator-demo-summary-ledger {
    gap: 6px 8px;
  }

  .panel-operator-console .operator-demo-summary-copy {
    display: none;
  }

  .panel-operator-console .operator-demo-summary-placeholder-note {
    display: -webkit-box;
    max-width: none;
    color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  }

  .panel-operator-console .operator-support-panel {
    margin-top: 8px;
  }

  .panel-operator-console .operator-quick-start:not([open]),
  .panel-operator-console .operator-lane-playbook:not([open]),
  .panel-operator-console .operator-control-surfaces:not([open]),
  .panel-operator-console .operator-control-surfaces-body > .operator-support-panel:not([open]) {
    border-color: color-mix(in oklch, var(--border-soft) 86%, transparent);
    background:
      linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 96%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent);
  }

  .panel-operator-console .operator-quick-start:not([open]) > summary,
  .panel-operator-console .operator-lane-playbook:not([open]) > summary,
  .panel-operator-console .operator-control-surfaces:not([open]) > summary,
  .panel-operator-console .operator-control-surfaces-body > .operator-support-panel:not([open]) > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 34px 8px 11px;
    border-bottom-color: transparent;
    background: transparent;
  }

  .panel-operator-console .operator-quick-start:not([open]) > summary .operator-support-summary-title,
  .panel-operator-console .operator-lane-playbook:not([open]) > summary .operator-support-summary-title,
  .panel-operator-console .operator-control-surfaces:not([open]) > summary .operator-support-summary-title,
  .panel-operator-console .operator-control-surfaces-body > .operator-support-panel:not([open]) > summary .operator-support-summary-title {
    font-size: 0.78rem;
    line-height: 1.1;
  }

  .panel-operator-console .operator-quick-start:not([open]) > summary .operator-support-summary-head,
  .panel-operator-console .operator-lane-playbook:not([open]) > summary .operator-support-summary-head,
  .panel-operator-console .operator-control-surfaces-body > .operator-support-panel:not([open]) > summary .operator-support-summary-head {
    gap: 6px;
    padding-right: 0;
  }

  .panel-operator-console .operator-quick-start:not([open]) > summary .operator-support-summary-hint,
  .panel-operator-console .operator-lane-playbook:not([open]) > summary .operator-support-summary-hint,
  .panel-operator-console .operator-control-surfaces:not([open]) > summary .operator-support-summary-hint,
  .panel-operator-console .operator-control-surfaces-body > .operator-support-panel:not([open]) > summary .operator-support-summary-hint {
    display: none;
  }

  .panel-operator-console .operator-quick-start:not([open]) > summary .operator-support-summary-pill,
  .panel-operator-console .operator-lane-playbook:not([open]) > summary .operator-support-summary-pill,
  .panel-operator-console .operator-control-surfaces-body > .operator-support-panel:not([open]) > summary .operator-support-summary-pill {
    min-height: 18px;
    padding: 1px 6px;
    font-size: 0.55rem;
  }

  .panel-operator-console .operator-quick-start:not([open]) > summary::after,
  .panel-operator-console .operator-lane-playbook:not([open]) > summary::after,
  .panel-operator-console .operator-control-surfaces:not([open]) > summary::after,
  .panel-operator-console .operator-control-surfaces-body > .operator-support-panel:not([open]) > summary::after {
    right: 13px;
    width: 7px;
    height: 7px;
  }

  .panel-operator-console .operator-control-surfaces:not([open]) > summary > .operator-support-summary-action {
    min-height: 24px;
    padding: 0 8px;
    font-size: 0.62rem;
  }

  .panel-operator-console .operator-priority-queue-list {
    gap: 8px;
  }

  .panel-operator-console .operator-priority-queue-item {
    padding: 10px 11px;
    gap: 8px 10px;
  }

  .panel-operator-console .operator-priority-queue-item[data-queue-density="compact"] {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 8px 9px;
  }

  .panel-operator-console .operator-priority-queue-item[data-queue-density="compact"] .operator-priority-queue-copy {
    gap: 2px;
  }

  .panel-operator-console .operator-priority-queue-item[data-queue-density="compact"] .operator-priority-queue-head {
    gap: 5px;
  }

  .panel-operator-console .operator-priority-queue-item[data-queue-density="compact"] .operator-priority-queue-rank {
    min-width: 30px;
    min-height: 20px;
    padding: 0 6px;
    font-size: 0.62rem;
  }

  .panel-operator-console .operator-priority-queue-item[data-queue-density="compact"] .operator-priority-queue-kicker {
    display: none;
  }

  .panel-operator-console .operator-priority-queue-item[data-queue-density="compact"] h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 0.78rem;
    line-height: 1.16;
  }

  .panel-operator-console .operator-priority-queue-meta {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .panel-operator-console .operator-priority-queue-item[data-queue-density="compact"] .operator-priority-queue-meta {
    max-width: none;
    font-size: 0.71rem;
    line-height: 1.24;
    -webkit-line-clamp: 1;
  }

  .panel-operator-console .operator-priority-queue-item[data-queue-density="compact"] .operator-priority-queue-actions {
    align-self: center;
    min-width: 98px;
    gap: 4px;
  }

  .panel-operator-console .operator-priority-queue-item[data-queue-density="compact"] .operator-priority-queue-action {
    min-width: 96px;
    min-height: 28px;
    padding: 4px 8px;
    font-size: 0.68rem;
  }
}

.panel-operator-console .operator-quick-start-body,
.panel-operator-console .operator-lane-playbook-body {
  gap: 12px;
}

.panel-operator-console .operator-quick-start-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.panel-operator-console .operator-quick-start-hint {
  font-size: 0.74rem;
  line-height: 1.32;
}

.panel-operator-console .operator-lane-playbook-card {
  min-height: 96px;
  padding: 12px 12px 11px;
  gap: 6px;
}

.panel-operator-console .operator-lane-playbook-card p {
  font-size: 0.74rem;
  line-height: 1.32;
}

.panel-operator-console .operator-health-board {
  gap: 16px;
}

.panel-operator-console .operator-health-group {
  padding: 16px;
}

.panel-operator-console #operatorSummary {
  max-height: 260px;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 6px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

@media (max-width: 1180px) {
  .panel-operator-console {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  }

  .panel-operator-console .operator-demo-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-operator-console .operator-signal-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .panel-operator-console {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "toolbar"
      "status"
      "guide"
      "triage"
      "demo"
      "signal"
      "lanefocus"
      "health"
      "quickstart"
      "playbook"
      "controls"
      "advancedactions"
      "summary";
  }

  .panel-operator-console .operator-summary-guide {
    position: static;
  }

  .panel-operator-console .operator-signal-strip-head {
    display: grid;
  }

  .panel-operator-console .operator-signal-strip-meta {
    justify-content: flex-start;
  }

  .panel-operator-console .operator-demo-summary-strip,
  .panel-operator-console .operator-signal-strip,
  .panel-operator-console .operator-quick-start-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .panel-operator-console .operator-status-strip,
  .panel-operator-console .operator-summary-guide-actions,
  .panel-operator-console .operator-demo-summary-strip,
  .panel-operator-console .operator-signal-strip,
  .panel-operator-console .operator-quick-start-actions {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-summary-guide-watchlist {
    display: grid;
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-summary-guide-preview {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-control-surfaces > summary {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-control-surfaces > summary > .operator-support-summary-action {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    width: fit-content;
  }

  .panel-operator-console .operator-demo-summary-card {
    min-height: 126px;
    padding: 14px;
    gap: 8px;
  }

  .panel-operator-console .operator-demo-summary-copy,
  .panel-operator-console .operator-signal-strip-hint {
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .panel-operator-console .operator-demo-summary-ledger {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .panel-operator-console .operator-demo-summary-kpi {
    justify-self: start;
  }

  .panel-operator-console .operator-signal-stable-head {
    display: grid;
  }

  .panel-operator-console .operator-signal-stable-strip {
    display: grid;
  }

  .panel-operator-console .operator-signal-stable-chip {
    justify-content: space-between;
  }

  .panel-operator-console .operator-triage-stat {
    min-height: 74px;
    padding: 10px 12px;
  }
}

/* 2026-03-10: operator console refinement pass for calmer toolbar grouping and quieter board counts */
.panel-operator-console .operator-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.32fr) minmax(164px, 0.72fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
}

.panel-operator-console .operator-toolbar[data-workspace-focus="approvals"],
.panel-operator-console .operator-toolbar[data-workspace-focus="runtime"],
.panel-operator-console .operator-toolbar[data-workspace-focus="audit"] {
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.34fr) minmax(152px, 0.54fr);
}

.panel-operator-console .operator-toolbar-cluster {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: start;
}

.panel-operator-console .operator-toolbar-advanced {
  min-width: 0;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 7px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
}

.panel-operator-console .operator-toolbar-advanced-summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
}

.panel-operator-console .operator-toolbar-advanced-summary::-webkit-details-marker {
  display: none;
}

.panel-operator-console .operator-toolbar-advanced-copy {
  display: grid;
  gap: 2px;
}

.panel-operator-console .operator-toolbar-advanced-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: color-mix(in oklch, var(--foreground) 92%, white);
}

.panel-operator-console .operator-toolbar-advanced-hint {
  font-size: 0.69rem;
  line-height: 1.35;
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
}

.panel-operator-console .operator-toolbar-advanced-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 88%, white);
  background: color-mix(in oklch, var(--surface-panel) 84%, transparent);
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
}

.panel-operator-console .operator-toolbar-advanced-body {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.panel-operator-console .operator-toolbar-advanced[data-workspace-focus="approvals"]:not([open]),
.panel-operator-console .operator-toolbar-advanced[data-workspace-focus="runtime"]:not([open]),
.panel-operator-console .operator-toolbar-advanced[data-workspace-focus="audit"]:not([open]) {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 88%, transparent), color-mix(in oklch, var(--surface-panel-2) 94%, transparent));
}

.panel-operator-console .operator-toolbar-cluster-filters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-operator-console .operator-toolbar-cluster-saved {
  grid-template-columns: 1fr;
}

.panel-operator-console .operator-toolbar-cluster-filters > .operator-toolbar-label,
.panel-operator-console .operator-toolbar-cluster-refresh > .operator-toolbar-label,
.panel-operator-console .operator-toolbar-cluster-view > .operator-toolbar-label,
.panel-operator-console .operator-toolbar-cluster-saved > .operator-toolbar-label {
  grid-column: 1 / -1;
}

.panel-operator-console .operator-toolbar-cluster-refresh {
  min-width: 0;
  justify-self: end;
  align-self: start;
}

.panel-operator-console .operator-toolbar-refresh-meta {
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.35;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-control-surfaces > summary {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
}

.panel-operator-console .operator-control-surfaces > summary > .operator-support-summary-title,
.panel-operator-console .operator-control-surfaces > summary > .operator-support-summary-hint {
  grid-column: 1;
}

.panel-operator-console .operator-control-surfaces > summary > .operator-support-summary-action {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.panel-operator-console .operator-toolbar-label {
  margin: 0;
  padding-left: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-toolbar-hint {
  margin: 0;
  display: none;
  padding-left: 0;
  font-size: 0.7rem;
  line-height: 1.36;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
}

.panel-operator-console .operator-toolbar .operator-view-mode-actions {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.panel-operator-console .operator-saved-view-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.panel-operator-console .operator-saved-view-btn.is-active,
.operator-mobile-dock-btn.is-active {
  border-color: color-mix(in oklch, var(--primary) 52%, var(--border));
  background:
    radial-gradient(160px 62px at 0% -24%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(160deg, color-mix(in oklch, var(--surface-control-hover) 90%, var(--surface-panel)), color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control)));
  color: color-mix(in oklch, var(--foreground) 98%, white);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 10%, transparent),
    0 16px 26px -30px color-mix(in oklch, var(--primary) 54%, transparent);
}

.panel-operator-console .operator-saved-view-btn[data-operator-saved-view="incidents"].is-active,
.operator-mobile-dock-btn[data-operator-saved-view="incidents"].is-active {
  border-color: color-mix(in oklch, var(--destructive) 50%, var(--border));
  background:
    radial-gradient(160px 62px at 0% -24%, color-mix(in oklch, var(--destructive) 12%, transparent), transparent 74%),
    linear-gradient(160deg, color-mix(in oklch, var(--surface-control-hover) 90%, var(--surface-panel)), color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control)));
}

.panel-operator-console .operator-saved-view-btn[data-operator-saved-view="runtime"].is-active,
.operator-mobile-dock-btn[data-operator-saved-view="runtime"].is-active {
  border-color: color-mix(in oklch, var(--accent-foreground) 48%, var(--border));
}

.panel-operator-console .operator-saved-view-btn[data-operator-saved-view="audit"].is-active,
.operator-mobile-dock-btn[data-operator-saved-view="audit"].is-active {
  border-color: color-mix(in oklch, var(--chart-1) 44%, var(--border));
}

.panel-operator-console .operator-mobile-dock,
.operator-mobile-dock {
  display: none;
}

.operator-mobile-dock.is-hidden {
  display: none !important;
}

.panel-operator-console #operatorSummaryGuide,
.panel-operator-console #operatorGroupRuntimeDevice,
.panel-operator-console #operatorGroupQueueLifecycle,
.panel-operator-console #operatorGroupGovernanceEvidence {
  scroll-margin-top: 108px;
}

.panel-operator-console .operator-summary-guide.operator-saved-view-focus,
.panel-operator-console .operator-health-group.operator-saved-view-focus {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft));
  box-shadow:
    0 24px 42px -34px color-mix(in oklch, var(--primary) 32%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 10%, transparent);
}

.panel-operator-console .operator-toolbar .button-muted {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 6px 10px;
  border-color: color-mix(in oklch, var(--accent-foreground) 28%, var(--border));
  background:
    radial-gradient(160px 62px at 0% -24%, color-mix(in oklch, var(--accent-foreground) 8%, transparent), transparent 74%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 92%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 96%, var(--surface-control))
    );
  color: color-mix(in oklch, var(--foreground) 94%, var(--muted-foreground));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    0 8px 16px -24px color-mix(in oklch, var(--primary) 24%, transparent);
  font-size: 0.77rem;
}

.panel-operator-console .operator-toolbar #operatorRefreshBtn {
  min-height: 38px;
  border-color: color-mix(in oklch, var(--primary) 56%, var(--border));
  background: linear-gradient(
    140deg,
    color-mix(in oklch, var(--primary) 84%, white),
    color-mix(in oklch, var(--primary) 74%, var(--accent-foreground))
  );
  color: var(--primary-foreground);
  text-shadow: 0 1px 0 color-mix(in oklch, black 24%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 14px 22px -24px color-mix(in oklch, var(--primary) 58%, transparent),
    var(--shadow-xs);
}

.panel-operator-console .operator-toolbar #operatorFocusCriticalBtn,
.panel-operator-console .operator-toolbar #operatorIssuesOnlyBtn {
  min-width: 0;
  font-size: 0.8rem;
}

.panel-operator-console .operator-toolbar #operatorGuideToggleBtn {
  min-height: 40px;
  font-size: 0.78rem;
}

.panel-operator-console .operator-demo-summary-card {
  min-height: 116px;
  padding: 12px 13px;
  gap: 7px;
}

.panel-operator-console .operator-demo-summary-card.is-placeholder {
  min-height: 104px;
}

.panel-operator-console .operator-demo-summary-title {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}

.panel-operator-console .operator-demo-summary-copy {
  font-size: 0.74rem;
  line-height: 1.3;
}

.panel-operator-console .operator-demo-summary-ledger {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
}

.panel-operator-console .operator-demo-summary-kpi {
  justify-self: end;
}

@media (max-width: 620px) {
  .panel-operator-console .operator-mode-copy-block {
    display: none;
  }

  .panel-operator-console .operator-demo-summary-ledger {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .panel-operator-console .operator-demo-summary-kpi {
    justify-self: start;
  }
}

.panel-operator-console .operator-signal-strip {
  padding: 10px;
  gap: 8px;
}

.panel-operator-console .operator-signal-card {
  padding: 10px 11px;
}

.panel-operator-console .operator-triage-summary {
  padding: 13px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 6px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "queue"
    "evidence"
    "supporthead"
    "support"
    "foot";
  gap: 10px;
}

.panel-operator-console .operator-triage-summary[data-support-head="hidden"] {
  grid-template-areas:
    "head"
    "queue"
    "evidence"
    "support"
    "foot";
}

.panel-operator-console .operator-triage-summary[data-queue-state="fail"] {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border-soft));
  background:
    radial-gradient(220px 88px at 0% -20%, color-mix(in oklch, var(--destructive) 10%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-triage-summary[data-queue-state="watch"] {
  border-color: color-mix(in oklch, var(--accent-foreground) 28%, var(--border-soft));
  background:
    radial-gradient(220px 88px at 0% -20%, color-mix(in oklch, var(--accent-foreground) 8%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-triage-summary[data-queue-state="ok"] {
  border-color: color-mix(in oklch, var(--chart-1) 30%, var(--border-soft));
}

.panel-operator-console .operator-triage-summary-head {
  display: grid;
  gap: 4px;
}

.panel-operator-console .operator-triage-summary-copy {
  display: grid;
  gap: 4px;
}

.panel-operator-console .operator-triage-summary-kicker {
  margin: 0;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
}

.panel-operator-console .operator-triage-summary-hint {
  margin: 0;
  max-width: 30ch;
  font-size: 0.74rem;
  line-height: 1.36;
  color: color-mix(in oklch, var(--foreground) 85%, var(--muted-foreground));
}

.panel-operator-console .operator-priority-queue-list {
  display: grid;
  gap: 10px;
}

.panel-operator-console .operator-priority-queue-overflow {
  margin: -2px 0 0;
  font-size: 0.71rem;
  line-height: 1.34;
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.panel-operator-console .operator-priority-queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 90%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-priority-queue-item.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 42%, var(--border-soft));
  background:
    radial-gradient(220px 72px at 0% -26%, color-mix(in oklch, var(--destructive) 10%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-priority-queue-item.is-watch {
  border-color: color-mix(in oklch, var(--accent-foreground) 30%, var(--border-soft));
}

.panel-operator-console .operator-priority-queue-item.is-stale {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--accent-foreground) 28%, var(--border-soft));
}

.panel-operator-console .operator-priority-queue-item.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 30%, var(--border-soft));
}

.panel-operator-console .operator-priority-queue-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.panel-operator-console .operator-priority-queue-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.panel-operator-console .operator-priority-queue-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 23px;
  padding: 0 8px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-operator-console .operator-priority-queue-rank.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 40%, var(--border-soft));
  background: color-mix(in oklch, var(--danger-soft) 84%, transparent);
  color: var(--status-fail-fg);
}

.panel-operator-console .operator-priority-queue-rank.is-watch,
.panel-operator-console .operator-priority-queue-rank.is-stale {
  border-color: color-mix(in oklch, var(--accent-foreground) 36%, var(--border-soft));
  background: color-mix(in oklch, var(--accent-soft) 80%, transparent);
  color: color-mix(in oklch, var(--accent-foreground) 84%, white);
}

.panel-operator-console .operator-priority-queue-rank.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border-soft));
  background: color-mix(in oklch, var(--ok-soft) 82%, transparent);
  color: var(--status-ok-fg);
}

.panel-operator-console .operator-priority-queue-kicker {
  margin: 0;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
}

.panel-operator-console .operator-priority-queue-item.is-fail .operator-priority-queue-kicker {
  color: color-mix(in oklch, var(--destructive) 78%, white);
}

.panel-operator-console .operator-priority-queue-item.is-watch .operator-priority-queue-kicker,
.panel-operator-console .operator-priority-queue-item.is-stale .operator-priority-queue-kicker {
  color: color-mix(in oklch, var(--accent-foreground) 78%, white);
}

.panel-operator-console .operator-priority-queue-item.is-ok .operator-priority-queue-kicker {
  color: color-mix(in oklch, var(--chart-1) 78%, white);
}

.panel-operator-console .operator-priority-queue-item h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.panel-operator-console .operator-priority-queue-meta {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.79rem;
  line-height: 1.45;
}

.panel-operator-console .operator-priority-queue-actions {
  display: grid;
  justify-items: stretch;
  align-content: start;
  gap: 8px;
  min-width: 136px;
}

.panel-operator-console .operator-priority-queue-action {
  min-width: 136px;
  min-height: 34px;
  padding: 7px 12px;
  font-size: 0.75rem;
  font-weight: 700;
}

.panel-operator-console .operator-priority-queue-action-secondary {
  min-height: 32px;
}

.panel-operator-console .operator-evidence-drawer {
  grid-area: evidence;
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 10px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-evidence-drawer[data-evidence-variant="fail"] {
  border-color: color-mix(in oklch, var(--destructive) 40%, var(--border-soft));
  background:
    radial-gradient(220px 72px at 0% -24%, color-mix(in oklch, var(--destructive) 10%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-evidence-drawer[data-evidence-variant="stale"],
.panel-operator-console .operator-evidence-drawer[data-evidence-variant="watch"] {
  border-color: color-mix(in oklch, var(--accent-foreground) 32%, var(--border-soft));
  background:
    radial-gradient(220px 72px at 0% -24%, color-mix(in oklch, var(--accent-foreground) 8%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-evidence-drawer[data-evidence-variant="ok"] {
  border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border-soft));
  background:
    radial-gradient(220px 72px at 0% -24%, color-mix(in oklch, var(--chart-1) 9%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel-2) 97%, transparent));
}

.panel-operator-console .operator-evidence-drawer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.panel-operator-console .operator-evidence-drawer-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.panel-operator-console .operator-evidence-drawer-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-title {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.panel-operator-console .operator-evidence-drawer-lane,
.panel-operator-console .operator-evidence-drawer-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-hint {
  display: none;
}

.panel-operator-console .operator-evidence-drawer-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.panel-operator-console .operator-evidence-drawer-context-item {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 14px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 88%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
}

.panel-operator-console .operator-evidence-drawer-context-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-context-value {
  color: color-mix(in oklch, var(--foreground) 94%, white);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
}

.panel-operator-console .operator-evidence-drawer-context-source {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
  font-size: 0.62rem;
  line-height: 1.25;
}

.panel-operator-console .operator-evidence-drawer-context-freshness {
  color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
  font-size: 0.61rem;
  line-height: 1.25;
}

.panel-operator-console .operator-evidence-drawer-context[data-workspace="approvals"] .operator-evidence-drawer-context-item {
  border-color: color-mix(in oklch, var(--chart-1) 26%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-context[data-workspace="approvals"] .operator-evidence-drawer-context-value {
  color: color-mix(in oklch, var(--chart-1) 54%, white);
}

.panel-operator-console .operator-evidence-drawer-context[data-workspace="runtime"] .operator-evidence-drawer-context-item {
  border-color: color-mix(in oklch, var(--chart-2) 26%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-context[data-workspace="runtime"] .operator-evidence-drawer-context-value {
  color: color-mix(in oklch, var(--chart-2) 54%, white);
}

.panel-operator-console .operator-evidence-drawer-context[data-workspace="audit"] .operator-evidence-drawer-context-item {
  border-color: color-mix(in oklch, var(--chart-5) 24%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-context[data-workspace="audit"] .operator-evidence-drawer-context-value {
  color: color-mix(in oklch, var(--chart-5) 50%, white);
}

.panel-operator-console .operator-evidence-drawer-context[data-workspace-state="fail"] .operator-evidence-drawer-context-value {
  color: color-mix(in oklch, var(--destructive) 62%, white);
}

.panel-operator-console .operator-evidence-drawer-context[data-workspace-state="ok"] .operator-evidence-drawer-context-value {
  color: color-mix(in oklch, var(--success) 62%, white);
}

.panel-operator-console .operator-evidence-drawer-context-item[data-signal-state="dormant"] .operator-evidence-drawer-context-value {
  color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-context-item[data-signal-state="steady"] .operator-evidence-drawer-context-value {
  color: color-mix(in oklch, var(--foreground) 84%, white);
}

.panel-operator-console .operator-evidence-drawer-context-item[data-signal-state="neutral"] .operator-evidence-drawer-context-value {
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-context-item[data-signal-state="fail"] .operator-evidence-drawer-context-value {
  color: color-mix(in oklch, var(--chart-4) 62%, white);
}

.panel-operator-console .operator-evidence-drawer-context-item[data-signal-state="dormant"] .operator-evidence-drawer-context-source {
  color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-context-item[data-signal-density="compact"] .operator-evidence-drawer-context-source {
  font-size: 0.6rem;
  line-height: 1.22;
  color: color-mix(in oklch, var(--foreground) 56%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-context-item[data-freshness-state="dormant"] .operator-evidence-drawer-context-freshness {
  color: color-mix(in oklch, var(--foreground) 54%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-context-item[data-signal-state="steady"] .operator-evidence-drawer-context-source {
  color: color-mix(in oklch, var(--foreground) 76%, white);
}

.panel-operator-console .operator-evidence-drawer-context-item[data-freshness-state="steady"] .operator-evidence-drawer-context-freshness {
  color: color-mix(in oklch, var(--foreground) 74%, white);
}

.panel-operator-console .operator-evidence-drawer-context-item[data-signal-state="neutral"] .operator-evidence-drawer-context-source {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-context-item[data-freshness-state="neutral"] .operator-evidence-drawer-context-freshness {
  color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-context-item[data-signal-state="fail"] .operator-evidence-drawer-context-source {
  color: color-mix(in oklch, var(--chart-4) 50%, white);
}

.panel-operator-console .operator-evidence-drawer-context-item[data-freshness-state="fail"] .operator-evidence-drawer-context-freshness {
  color: color-mix(in oklch, var(--destructive) 58%, white);
}

.panel-operator-console .operator-evidence-drawer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-operator-console .operator-evidence-drawer-tab {
  min-height: 31px;
  padding: 6px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 88%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.panel-operator-console .operator-evidence-drawer-tab:hover {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft));
  color: color-mix(in oklch, var(--foreground) 94%, white);
}

.panel-operator-console .operator-evidence-drawer-tab.is-active {
  border-color: color-mix(in oklch, var(--primary) 52%, var(--border));
  background:
    radial-gradient(180px 68px at 0% -28%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 92%, transparent),
      color-mix(in oklch, var(--surface-panel) 98%, transparent)
    );
  color: color-mix(in oklch, var(--foreground) 97%, white);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 8%, transparent),
    0 12px 24px -24px color-mix(in oklch, var(--primary) 50%, transparent);
}

.panel-operator-console .operator-evidence-drawer-tab:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--ring) 18%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 8%, transparent);
}

.panel-operator-console .operator-evidence-drawer-panel {
  display: grid;
  gap: 10px;
}

.panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-panel,
.panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-panel,
.panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-panel {
  gap: 7px;
}

.panel-operator-console .operator-evidence-drawer-panel-head {
  display: grid;
  gap: 4px;
}

.panel-operator-console .operator-evidence-drawer-panel-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-panel-meta {
  margin: 0;
  max-width: 40ch;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.75rem;
  line-height: 1.45;
}

.panel-operator-console .operator-evidence-drawer-summary {
  margin: 0;
  max-width: 46ch;
  color: color-mix(in oklch, var(--foreground) 92%, var(--muted-foreground));
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.48;
}

.panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-summary,
.panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-summary,
.panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-summary {
  max-width: 34ch;
  font-size: 0.74rem;
  line-height: 1.36;
}

.panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-actions,
.panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-actions,
.panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-actions {
  gap: 6px;
}

@media (min-width: 921px) {
  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-group-body {
    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
    gap: 10px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty {
    padding: 10px 11px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty h3 {
    margin-bottom: 7px;
    font-size: 0.82rem;
    line-height: 1.22;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .status-pill {
    min-height: 23px;
    margin-bottom: 6px;
    padding: 4px 9px;
    font-size: 0.72rem;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .operator-health-hint {
    margin-top: 6px;
    font-size: 0.7rem;
    line-height: 1.22;
  }
  .panel-operator-console .operator-toolbar {
    gap: 6px;
    padding: 6px 8px;
  }

  .panel-operator-console .operator-toolbar-cluster {
    gap: 3px;
  }

  .panel-operator-console .operator-toolbar-label {
    font-size: 0.6rem;
    letter-spacing: 0.07em;
  }

  .panel-operator-console .operator-toolbar .operator-view-mode-actions,
  .panel-operator-console .operator-saved-view-buttons {
    gap: 5px;
  }

  .panel-operator-console .operator-toolbar .button-muted {
    min-height: 33px;
    padding: 5px 9px;
    font-size: 0.73rem;
  }

  .panel-operator-console .operator-toolbar #operatorRefreshBtn {
    min-height: 35px;
  }

  .panel-operator-console .operator-status-strip {
    gap: 8px;
    padding: 8px 10px;
  }

  .panel-operator-console .operator-last-refresh,
  .panel-operator-console .operator-mode-banner {
    min-height: 48px;
    padding: 8px 10px;
  }

  .panel-operator-console .operator-mode-copy {
    font-size: 0.76rem;
    line-height: 1.3;
  }

  .panel-operator-console .operator-board-mode-hint {
    font-size: 0.69rem;
    line-height: 1.24;
  }

  .panel-operator-console .operator-demo-summary-strip {
    gap: 9px;
  }

  .panel-operator-console .operator-summary-guide {
    padding: 14px;
    gap: 10px;
  }

  .panel-operator-console .operator-summary-guide-head {
    gap: 8px;
  }

  .panel-operator-console .operator-summary-guide-hint {
    display: none;
  }

  .panel-operator-console .operator-summary-guide-status-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
  }

  .panel-operator-console .operator-summary-guide-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
  }

  .panel-operator-console .operator-summary-guide-view-note {
    display: none;
  }

  .panel-operator-console .operator-summary-guide-watch {
    gap: 4px;
    padding-top: 0;
  }

  .panel-operator-console .operator-summary-guide-watch-label {
    display: none;
  }

  .panel-operator-console .operator-summary-guide-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .panel-operator-console .operator-summary-guide-actions > .operator-summary-guide-action-refresh {
    grid-column: auto;
    grid-row: auto;
  }

  .panel-operator-console .operator-summary-guide-action,
  .panel-operator-console .operator-summary-guide-action-secondary {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.74rem;
  }

  .panel-operator-console .operator-demo-summary-card {
    min-height: 96px;
    padding: 10px 11px;
    gap: 5px;
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
      0 10px 18px -24px color-mix(in oklch, var(--shadow-color) 26%, transparent);
  }

  .panel-operator-console .operator-demo-summary-card::before {
    width: 3px;
  }

  .panel-operator-console .operator-demo-summary-head {
    gap: 6px;
  }

  .panel-operator-console .operator-demo-summary-title-row {
    align-items: center;
    gap: 7px;
  }

  .panel-operator-console .operator-surface-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 10px;
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
      0 8px 18px -22px color-mix(in oklch, var(--shadow-color) 34%, transparent);
  }

  .panel-operator-console .operator-surface-icon svg {
    width: 15px;
    height: 15px;
  }

  .panel-operator-console .operator-demo-summary-title {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .panel-operator-console .operator-demo-summary-ledger {
    gap: 4px 7px;
    align-items: center;
  }

  .panel-operator-console .operator-demo-summary-placeholder-note {
    max-width: none;
    font-size: 0.68rem;
    line-height: 1.2;
    -webkit-line-clamp: 1;
  }

  .panel-operator-console .operator-demo-summary-kpi {
    gap: 3px;
  }

  .panel-operator-console .operator-demo-summary-kpi-token {
    padding: 2px 6px;
    font-size: 0.61rem;
  }

  .panel-operator-console .operator-demo-summary-card .status-pill {
    min-height: 23px;
    padding: 3px 8px;
    font-size: 0.68rem;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] {
    gap: 8px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-card {
    min-height: 72px;
    padding: 8px 10px;
    gap: 4px;
    border-radius: 18px;
    background:
      linear-gradient(
        160deg,
        color-mix(in oklch, var(--surface-control) 94%, var(--surface-panel)),
        color-mix(in oklch, var(--surface-panel-2) 99%, var(--surface-control))
      );
    box-shadow: none;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-card.is-placeholder {
    border-style: solid;
    background:
      linear-gradient(
        160deg,
        color-mix(in oklch, var(--surface-control) 94%, var(--surface-panel)),
        color-mix(in oklch, var(--surface-panel-2) 99%, var(--surface-control))
      );
    box-shadow: none;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-card::before {
    width: 2px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-head {
    gap: 4px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-title-row {
    gap: 6px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-surface-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    border-radius: 8px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-surface-icon svg {
    width: 12px;
    height: 12px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-title {
    font-size: 0.68rem;
    line-height: 1.16;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-copy,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-placeholder-note {
    display: none !important;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-ledger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-kpi {
    justify-self: auto;
    gap: 2px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-kpi-token {
    padding: 2px 5px;
    font-size: 0.58rem;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="quiet"] .operator-demo-summary-card .status-pill {
    min-height: 21px;
    padding: 2px 7px;
    font-size: 0.64rem;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] {
    gap: 9px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot {
    min-height: 90px;
    padding: 9px 10px;
    gap: 4px;
    box-shadow: none;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot::before,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot::before {
    width: 2px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot .operator-demo-summary-head,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot .operator-demo-summary-head {
    gap: 4px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot .operator-demo-summary-title-row,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot .operator-demo-summary-title-row {
    gap: 6px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot .operator-surface-icon,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot .operator-surface-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 8px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot .operator-surface-icon svg,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot .operator-surface-icon svg {
    width: 12px;
    height: 12px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot .operator-demo-summary-title,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot .operator-demo-summary-title {
    font-size: 0.69rem;
    line-height: 1.16;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot .operator-demo-summary-ledger,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot .operator-demo-summary-ledger {
    gap: 4px 6px;
    align-items: center;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot .operator-demo-summary-placeholder-note,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot .operator-demo-summary-placeholder-note {
    max-width: none;
    font-size: 0.66rem;
    line-height: 1.16;
    -webkit-line-clamp: 1;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot .operator-demo-summary-kpi,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot .operator-demo-summary-kpi {
    gap: 2px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot .operator-demo-summary-kpi-token,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot .operator-demo-summary-kpi-token {
    padding: 2px 5px;
    font-size: 0.58rem;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="standard"] .operator-demo-summary-card.is-hot .status-pill,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-hot .status-pill {
    min-height: 22px;
    padding: 2px 7px;
    font-size: 0.62rem;
    line-height: 1.1;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet {
    align-self: start;
    min-height: 78px;
    padding: 9px 11px;
    gap: 4px;
    border-radius: 18px;
    background:
      linear-gradient(
        160deg,
        color-mix(in oklch, var(--surface-control) 94%, var(--surface-panel)),
        color-mix(in oklch, var(--surface-panel-2) 99%, var(--surface-control))
      );
    box-shadow: none;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet::before {
    width: 2px;
    opacity: 0.78;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet .operator-demo-summary-head {
    gap: 4px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet .operator-demo-summary-title-row {
    gap: 6px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet .operator-surface-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 8px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet .operator-surface-icon svg {
    width: 12px;
    height: 12px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet .operator-demo-summary-title {
    font-size: 0.69rem;
    line-height: 1.16;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet .operator-demo-summary-copy,
  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet .operator-demo-summary-placeholder-note {
    display: none !important;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet .operator-demo-summary-ledger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet .operator-demo-summary-kpi {
    justify-self: auto;
    gap: 2px;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet .operator-demo-summary-kpi-token {
    padding: 2px 5px;
    font-size: 0.58rem;
  }

  .panel-operator-console .operator-demo-summary-strip[data-summary-density="mixed"] .operator-demo-summary-card.is-quiet .status-pill {
    min-height: 21px;
    padding: 2px 7px;
    font-size: 0.64rem;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"],
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"],
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] {
    gap: 8px;
    padding: 10px 11px;
    box-shadow: none;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-strip-head,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-strip-head,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-strip-head {
    align-items: center;
    gap: 8px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-strip-copy,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-strip-copy,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-strip-copy {
    gap: 0;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-strip-kicker,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-strip-kicker,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-strip-kicker,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-strip-hint,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-strip-hint,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-strip-hint,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-stable-head,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-stable-head,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-stable-head {
    display: none;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-strip-meta,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-strip-meta,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-strip-meta {
    gap: 6px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-strip-summary,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-strip-summary,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-strip-summary {
    min-height: 21px;
    padding: 0 7px;
    font-size: 0.62rem;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-strip,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-strip,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-strip {
    padding: 0;
    gap: 6px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-card,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-card,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-card {
    padding: 7px 9px;
    border-radius: 16px;
    box-shadow: none;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-overflow-chip,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-overflow-chip,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-overflow-chip {
    min-height: 100%;
    padding: 7px 9px;
    border-radius: 16px;
    box-shadow: none;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-card-head,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-card-head,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-card-head {
    align-items: center;
    gap: 6px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-card-title-row,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-card-title-row,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-card-title-row {
    gap: 6px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-card-title-row .operator-surface-icon,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-card-title-row .operator-surface-icon,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-card-title-row .operator-surface-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    border-radius: 8px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-card-title-row .operator-surface-icon svg,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-card-title-row .operator-surface-icon svg,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-card-title-row .operator-surface-icon svg {
    width: 12px;
    height: 12px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-card h3,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-card h3,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-card h3 {
    font-size: 0.68rem;
    line-height: 1.12;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-card .status-pill,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-card .status-pill,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-card .status-pill {
    min-height: 21px;
    padding: 2px 7px;
    font-size: 0.63rem;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-overflow-chip-label,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-overflow-chip-label,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-overflow-chip-label {
    font-size: 0.68rem;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-overflow-chip-meta,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-overflow-chip-meta,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-overflow-chip-meta {
    font-size: 0.6rem;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-stable-surface,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-stable-surface,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-stable-surface {
    gap: 6px;
    padding-top: 6px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-stable-strip,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-stable-strip,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-stable-strip {
    gap: 6px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-stable-chip,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-stable-chip,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-stable-chip {
    min-height: 28px;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 12px;
    font-size: 0.68rem;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="quiet"] .operator-signal-stable-chip-status,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="shelf"] .operator-signal-stable-chip-status,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-stable-chip-status {
    font-size: 0.63rem;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] {
    gap: 6px;
    padding: 9px 10px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-strip-meta {
    gap: 4px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-strip-summary-secondary {
    display: none;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-card,
  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-overflow-chip {
    padding: 6px 8px;
    border-radius: 14px;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-card .status-pill {
    min-height: 20px;
    padding: 2px 6px;
    font-size: 0.6rem;
    white-space: nowrap;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-overflow-chip {
    gap: 0;
  }

  .panel-operator-console .operator-signal-strip-surface[data-signal-density="standard"][data-signal-compact="collapsed"] .operator-signal-overflow-chip-meta {
    display: none;
  }

  .panel-operator-console .operator-triage-summary {
    padding: 12px;
    gap: 8px;
  }

  .panel-operator-console .operator-triage-summary-head {
    gap: 0;
  }

  .panel-operator-console .operator-triage-summary-hint {
    display: none;
  }

  .panel-operator-console .operator-triage-summary-foot {
    gap: 4px;
    padding-top: 4px;
  }

  .panel-operator-console .operator-triage-summary-foot-label {
    display: none;
  }

  .panel-operator-console .operator-triage-summary-grid {
    gap: 4px;
  }

  .panel-operator-console .operator-triage-stat-total {
    display: none;
  }

  .panel-operator-console .operator-triage-stat {
    gap: 5px;
    padding: 4px 7px;
    border-radius: 12px;
  }

  .panel-operator-console .operator-triage-stat-label {
    font-size: 0.56rem;
    letter-spacing: 0.06em;
  }

  .panel-operator-console .operator-triage-stat-value {
    font-size: 0.72rem;
  }

  .panel-operator-console .operator-priority-queue-list {
    gap: 8px;
  }

  .panel-operator-console .operator-priority-queue-item {
    gap: 8px 10px;
    padding: 10px;
  }

  .panel-operator-console .operator-priority-queue-copy {
    gap: 4px;
  }

  .panel-operator-console .operator-priority-queue-meta {
    max-width: 30ch;
    font-size: 0.75rem;
    line-height: 1.34;
  }

  .panel-operator-console .operator-priority-queue-actions {
    min-width: 124px;
    gap: 6px;
  }

  .panel-operator-console .operator-priority-queue-action {
    min-width: 124px;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.73rem;
  }

  .panel-operator-console .operator-action-center-support-head {
    gap: 0;
    padding-top: 0;
  }

  .panel-operator-console .operator-action-center-support-hint {
    display: none;
  }

  .panel-operator-console .operator-action-center-card.is-compact {
    gap: 6px;
    padding: 9px 10px;
  }

  .panel-operator-console .operator-action-center-card.is-compact .operator-action-center-meta {
    max-width: 34ch;
    font-size: 0.72rem;
    line-height: 1.32;
  }

  .panel-operator-console .operator-action-center-card.is-compact .operator-action-center-actions {
    gap: 5px;
  }

  .panel-operator-console .operator-action-center-card.is-compact .operator-action-center-action {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 0.7rem;
  }

  .panel-operator-console .operator-action-center-support[data-support-density="utility"] {
    padding-top: 1px;
  }

  .panel-operator-console .operator-action-center-support[data-support-density="utility"] .operator-action-center-card.is-utility-rail {
    gap: 6px 9px;
    padding: 0;
  }

  .panel-operator-console .operator-action-center-support[data-support-density="utility"] .operator-action-center-card.is-utility-rail .operator-action-center-card-copy {
    gap: 0;
  }

  .panel-operator-console .operator-action-center-support[data-support-density="utility"] .operator-action-center-card.is-utility-rail .operator-action-center-tag {
    min-height: 17px;
    padding: 0 5px;
    font-size: 0.59rem;
  }

  .panel-operator-console .operator-action-center-support[data-support-density="utility"] .operator-action-center-card.is-utility-rail h3 {
    font-size: 0.76rem;
  }

  .panel-operator-console .operator-action-center-support[data-support-density="utility"] .operator-action-center-card.is-utility-rail .operator-action-center-actions {
    gap: 3px;
  }

  .panel-operator-console .operator-action-center-support[data-support-density="utility"] .operator-action-center-card.is-utility-rail .operator-action-center-action[data-action-density="compact"] {
    min-width: 74px;
    min-height: 26px;
    padding: 3px 7px;
    font-size: 0.65rem;
  }

  .panel-operator-console .operator-evidence-drawer {
    padding: 10px 11px;
    gap: 8px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-head,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-head,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-head {
    gap: 6px;
    align-items: center;
  }

  .panel-operator-console .operator-evidence-drawer-head {
    gap: 8px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-copy,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-copy,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-copy {
    gap: 1px;
  }

  .panel-operator-console .operator-evidence-drawer-copy {
    gap: 2px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-kicker,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-kicker,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-kicker {
    display: none;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-title,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-title,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-title {
    font-size: 0.82rem;
    line-height: 1.16;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .status-pill,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .status-pill,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .status-pill {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 0.64rem;
  }

  .panel-operator-console .operator-evidence-drawer-tabs {
    gap: 6px;
  }

  .panel-operator-console .operator-evidence-drawer-tab {
    min-height: 29px;
    padding: 5px 9px;
    font-size: 0.7rem;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-hint,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-hint,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-hint {
    display: none;
  }

  .panel-operator-console .operator-evidence-drawer-context {
    gap: 6px;
  }

  .panel-operator-console .operator-evidence-drawer-context-item {
    padding: 6px 8px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-summary,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-summary,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-summary {
    max-width: 28ch;
    font-size: 0.7rem;
    line-height: 1.2;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-facts,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-facts,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-fact,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-fact,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-fact {
    padding: 6px 8px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"][data-evidence-facts="compact"] .operator-evidence-drawer-facts {
    gap: 4px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"][data-evidence-facts="compact"] .operator-evidence-drawer-fact,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"][data-evidence-facts="compact"] .operator-evidence-drawer-fact.is-primary,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"][data-evidence-facts="compact"] .operator-evidence-drawer-fact.is-secondary {
    gap: 4px;
    padding: 5px 8px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"][data-evidence-facts="compact"] .operator-evidence-drawer-fact-label {
    font-size: 0.56rem;
    letter-spacing: 0.06em;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"][data-evidence-facts="compact"] .operator-evidence-drawer-fact strong,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"][data-evidence-facts="compact"] .operator-evidence-drawer-fact.is-primary strong {
    font-size: 0.68rem;
    line-height: 1.16;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-fact:nth-child(n + 3),
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-fact:nth-child(n + 3),
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-fact:nth-child(n + 3) {
    display: none;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-provenance-label,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-provenance-label,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-provenance-label {
    display: none;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-provenance-shell,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-provenance-shell,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-provenance-shell {
    gap: 4px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-provenance,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-provenance,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-provenance {
    gap: 4px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-provenance-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 7px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-provenance-item,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-provenance-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 7px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-provenance-item-label,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-provenance-item-label,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-provenance-item-label {
    flex: 0 0 auto;
    font-size: 0.54rem;
    letter-spacing: 0.06em;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-provenance-item-value {
    min-width: 0;
    font-size: 0.67rem;
    line-height: 1.14;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-provenance-item-value,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-provenance-item-value {
    min-width: 0;
    font-size: 0.67rem;
    line-height: 1.14;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-actions,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-actions,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-actions {
    gap: 3px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-action,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-action,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-action {
    min-height: 28px;
    padding: 4px 9px;
    font-size: 0.69rem;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-action-secondary,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-action-secondary,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-action-secondary {
    min-height: 27px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-action-density="compact"] .operator-evidence-drawer-actions {
    gap: 3px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-action-density="compact"] .operator-evidence-drawer-action-stack {
    gap: 3px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-action-density="compact"] .operator-evidence-drawer-action-stack[data-action-primary="true"] {
    gap: 3px;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-action-density="compact"] .operator-evidence-drawer-action {
    min-height: 28px;
    padding: 4px 9px;
    font-size: 0.69rem;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-action-density="compact"] .operator-evidence-drawer-action-primary {
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--chart-1) 16%, transparent),
      0 8px 16px color-mix(in oklch, black 20%, transparent);
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-action-density="compact"] .operator-evidence-drawer-action-meta {
    max-width: 18ch;
    font-size: 0.6rem;
    line-height: 1.25;
  }
}

.panel-operator-console .operator-evidence-drawer-origins {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-operator-console .operator-evidence-drawer-origin {
  display: grid;
  gap: 4px;
  min-width: min(156px, 100%);
  padding: 8px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
}

.panel-operator-console .operator-evidence-drawer-origin.is-placeholder {
  border-style: dashed;
}

.panel-operator-console .operator-evidence-drawer-origin.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-origin.is-watch,
.panel-operator-console .operator-evidence-drawer-origin.is-stale {
  border-color: color-mix(in oklch, var(--warning) 30%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-origin.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 30%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-origin-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-origin-value {
  color: color-mix(in oklch, var(--foreground) 94%, white);
  font-size: 0.74rem;
  line-height: 1.35;
}

.panel-operator-console .operator-evidence-drawer-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.panel-operator-console .operator-evidence-drawer[data-evidence-facts="compact"] .operator-evidence-drawer-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel-operator-console .operator-evidence-drawer-fact {
  display: grid;
  gap: 6px;
  min-height: 70px;
  padding: 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 12px);
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.panel-operator-console .operator-evidence-drawer-fact.is-primary {
  grid-column: span 2;
  min-height: 82px;
  padding: 12px;
  gap: 7px;
  background:
    radial-gradient(220px 100px at 0% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 78%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 96%, transparent), color-mix(in oklch, var(--surface-panel) 98%, transparent));
}

.panel-operator-console .operator-evidence-drawer-fact.is-primary.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border-soft));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent), 0 0 0 1px color-mix(in oklch, var(--destructive) 12%, transparent);
}

.panel-operator-console .operator-evidence-drawer-fact.is-primary.is-watch,
.panel-operator-console .operator-evidence-drawer-fact.is-primary.is-stale {
  border-color: color-mix(in oklch, var(--warning) 30%, var(--border-soft));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent), 0 0 0 1px color-mix(in oklch, var(--warning) 10%, transparent);
}

.panel-operator-console .operator-evidence-drawer-fact.is-primary.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 30%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer[data-evidence-facts="compact"] .operator-evidence-drawer-fact,
.panel-operator-console .operator-evidence-drawer[data-evidence-facts="compact"] .operator-evidence-drawer-fact.is-primary,
.panel-operator-console .operator-evidence-drawer[data-evidence-facts="compact"] .operator-evidence-drawer-fact.is-secondary {
  grid-column: auto;
  min-height: 0;
  padding: 9px 10px;
}

.panel-operator-console .operator-evidence-drawer-fact.is-secondary {
  min-height: 62px;
}

.panel-operator-console .operator-evidence-drawer-fact.is-muted {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 95%, transparent), color-mix(in oklch, var(--surface-panel) 98%, transparent));
}

.panel-operator-console .operator-evidence-drawer-fact.is-placeholder {
  border-style: dashed;
}

.panel-operator-console .operator-evidence-drawer-fact-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-fact.is-primary .operator-evidence-drawer-fact-label {
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-fact strong {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 0.78rem;
  line-height: 1.4;
}

.panel-operator-console .operator-evidence-drawer-fact.is-primary strong {
  font-size: 0.88rem;
  line-height: 1.48;
}

.panel-operator-console .operator-evidence-drawer[data-evidence-facts="compact"] .operator-evidence-drawer-fact strong,
.panel-operator-console .operator-evidence-drawer[data-evidence-facts="compact"] .operator-evidence-drawer-fact.is-primary strong {
  font-size: 0.76rem;
  line-height: 1.34;
}

.panel-operator-console .operator-evidence-drawer-timeline-shell {
  display: grid;
  gap: 8px;
}

.panel-operator-console .operator-evidence-drawer-timeline-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.panel-operator-console .operator-evidence-drawer-timeline-item {
  display: grid;
  gap: 6px;
  min-height: 82px;
  padding: 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 12px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--surface-panel) 97%, transparent));
}

.panel-operator-console .operator-evidence-drawer-timeline-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.panel-operator-console .operator-evidence-drawer-timeline-item.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-timeline-item.is-watch,
.panel-operator-console .operator-evidence-drawer-timeline-item.is-stale {
  border-color: color-mix(in oklch, var(--warning) 30%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-timeline-item.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 30%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-timeline-step {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-timeline-time {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
}

.panel-operator-console .operator-evidence-drawer-timeline-item strong {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 0.78rem;
  line-height: 1.35;
}

.panel-operator-console .operator-evidence-drawer-timeline-title {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 0.78rem;
  line-height: 1.35;
}

.panel-operator-console .operator-evidence-drawer-timeline-item p {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.72rem;
  line-height: 1.45;
}

.panel-operator-console .operator-evidence-drawer-timeline-meta {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
  font-size: 0.72rem;
  line-height: 1.45;
}

.panel-operator-console .operator-evidence-drawer-checkpoints-shell {
  display: grid;
  gap: 8px;
}

.panel-operator-console .operator-evidence-drawer-checkpoints-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-checkpoints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.panel-operator-console .operator-evidence-drawer-checkpoint {
  display: grid;
  gap: 4px;
  min-width: min(148px, 100%);
  padding: 7px 9px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 14px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--surface-panel) 97%, transparent));
}

.panel-operator-console .operator-evidence-drawer-checkpoint.is-placeholder {
  border-style: dashed;
}

.panel-operator-console .operator-evidence-drawer-checkpoint.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-checkpoint.is-watch,
.panel-operator-console .operator-evidence-drawer-checkpoint.is-stale {
  border-color: color-mix(in oklch, var(--warning) 30%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-checkpoint.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 30%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-checkpoint-label {
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-checkpoint strong {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 0.74rem;
  line-height: 1.4;
}

.panel-operator-console .operator-evidence-drawer-checkpoint-value {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 0.72rem;
  line-height: 1.32;
}

.panel-operator-console .operator-evidence-drawer-provenance-shell {
  display: grid;
  gap: 8px;
}

.panel-operator-console .operator-evidence-drawer-provenance-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-provenance,
.panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-provenance,
.panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-provenance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-operator-console .operator-evidence-drawer-provenance-item {
  display: grid;
  gap: 4px;
  min-width: min(148px, 100%);
  padding: 7px 9px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: calc(var(--radius) - 14px);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 95%, transparent), color-mix(in oklch, var(--surface-panel) 98%, transparent));
}

.panel-operator-console .operator-evidence-drawer-provenance-item.is-placeholder {
  border-style: dashed;
}

.panel-operator-console .operator-evidence-drawer-provenance-item.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-provenance-item.is-watch,
.panel-operator-console .operator-evidence-drawer-provenance-item.is-stale {
  border-color: color-mix(in oklch, var(--warning) 30%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-provenance-item.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 30%, var(--border-soft));
}

.panel-operator-console .operator-evidence-drawer-provenance-item-label {
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-provenance-item-value {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 0.72rem;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.panel-operator-console .operator-evidence-drawer-proof-path {
  display: grid;
  gap: 8px;
}

.panel-operator-console .operator-evidence-drawer-proof-path > summary {
  display: grid;
  gap: 3px;
  list-style: none;
  padding: 9px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 14px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 92%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 97%, transparent)
    );
  cursor: pointer;
}

.panel-operator-console .operator-evidence-drawer-proof-path > summary::-webkit-details-marker {
  display: none;
}

.panel-operator-console .operator-evidence-drawer-proof-path[open] > summary {
  display: none;
}

.panel-operator-console .operator-evidence-drawer-proof-path-body {
  display: grid;
  gap: 10px;
}

.panel-operator-console .operator-evidence-drawer-proof-path-kicker {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-proof-path-title {
  color: color-mix(in oklch, var(--foreground) 95%, white);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
}

.panel-operator-console .operator-evidence-drawer-proof-path-hint {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
  font-size: 0.68rem;
  line-height: 1.34;
}

.panel-operator-console .operator-evidence-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-operator-console .operator-evidence-drawer-action-stack {
  display: grid;
  gap: 4px;
  align-content: start;
}

.panel-operator-console .operator-evidence-drawer-action-stack[data-action-primary="true"] {
  gap: 5px;
}

.panel-operator-console .operator-evidence-drawer-action-meta {
  margin: 0;
  max-width: 22ch;
  font-size: 0.66rem;
  line-height: 1.35;
  color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-action {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 0.75rem;
  font-weight: 700;
}

.panel-operator-console .operator-evidence-drawer-action-primary {
  border-color: color-mix(in oklch, var(--chart-1) 52%, var(--border-soft));
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--chart-1) 26%, var(--surface-control)),
      color-mix(in oklch, var(--chart-1) 18%, var(--surface-panel)));
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--chart-1) 18%, transparent),
    0 10px 22px color-mix(in oklch, black 24%, transparent);
  color: color-mix(in oklch, var(--foreground) 98%, white);
}

.panel-operator-console .operator-evidence-drawer-action-primary[data-action-workspace="approvals"] {
  border-color: color-mix(in oklch, var(--chart-1) 58%, var(--border-soft));
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--chart-1) 28%, var(--surface-control)),
      color-mix(in oklch, var(--chart-1) 20%, var(--surface-panel)));
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--chart-1) 22%, transparent),
    0 10px 22px color-mix(in oklch, black 24%, transparent);
}

.panel-operator-console .operator-evidence-drawer-action-primary[data-action-workspace="runtime"] {
  border-color: color-mix(in oklch, var(--chart-2) 58%, var(--border-soft));
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--chart-2) 28%, var(--surface-control)),
      color-mix(in oklch, var(--chart-2) 20%, var(--surface-panel)));
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--chart-2) 22%, transparent),
    0 10px 22px color-mix(in oklch, black 24%, transparent);
}

.panel-operator-console .operator-evidence-drawer-action-primary[data-action-workspace="audit"] {
  border-color: color-mix(in oklch, var(--chart-5) 56%, var(--border-soft));
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--chart-5) 24%, var(--surface-control)),
      color-mix(in oklch, var(--chart-5) 18%, var(--surface-panel)));
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--chart-5) 20%, transparent),
    0 10px 22px color-mix(in oklch, black 24%, transparent);
}

.panel-operator-console .operator-evidence-drawer-action-stack[data-action-primary="true"][data-action-workspace="approvals"] .operator-evidence-drawer-action-meta {
  color: color-mix(in oklch, var(--chart-1) 58%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-action-stack[data-action-primary="true"][data-action-workspace="runtime"] .operator-evidence-drawer-action-meta {
  color: color-mix(in oklch, var(--chart-2) 58%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-action-stack[data-action-primary="true"][data-action-workspace="audit"] .operator-evidence-drawer-action-meta {
  color: color-mix(in oklch, var(--chart-5) 54%, var(--muted-foreground));
}

.panel-operator-console .operator-evidence-drawer-action-secondary {
  min-height: 32px;
}

.panel-operator-console .operator-triage-summary-foot {
  grid-area: foot;
  display: grid;
  gap: 5px;
  padding-top: 5px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
}

.panel-operator-console .operator-triage-summary-foot-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
}

.panel-operator-console .operator-triage-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.panel-operator-console .operator-triage-stat {
  min-height: 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 88%, transparent), color-mix(in oklch, var(--surface-panel) 96%, transparent));
  box-shadow: none;
}

@media (min-width: 921px) {
  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-group-body {
    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
    gap: 10px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty {
    padding: 10px 11px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty h3 {
    margin-bottom: 7px;
    font-size: 0.82rem;
    line-height: 1.22;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .status-pill {
    min-height: 23px;
    margin-bottom: 6px;
    padding: 4px 9px;
    font-size: 0.72rem;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .operator-health-hint {
    margin-top: 6px;
    font-size: 0.7rem;
    line-height: 1.22;
  }
  .panel-operator-console .operator-triage-summary-grid .operator-triage-stat-total {
    display: none;
  }
}

.panel-operator-console .operator-triage-stat h3 {
  font-size: 0.67rem;
}

.panel-operator-console .operator-triage-stat p {
  font-size: 0.94rem;
}

.panel-operator-console .operator-triage-stat-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-triage-stat-value {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.76rem;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
}

.panel-operator-console .operator-triage-stat-fail .operator-triage-stat-label,
.panel-operator-console .operator-triage-stat-fail .operator-triage-stat-value {
  color: color-mix(in oklch, var(--destructive) 82%, white);
}

.panel-operator-console .operator-triage-stat-ok .operator-triage-stat-label,
.panel-operator-console .operator-triage-stat-ok .operator-triage-stat-value {
  color: color-mix(in oklch, var(--chart-1) 78%, white);
}

@media (max-width: 1180px) {
  .panel-operator-console .operator-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .panel-operator-console .operator-saved-view-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .panel-operator-console .operator-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-operator-console .operator-toolbar-cluster-refresh {
    justify-self: stretch;
  }

  .panel-operator-console .operator-toolbar-refresh-meta {
    max-width: 36ch;
  }

  .panel-operator-console .operator-evidence-drawer-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-operator-console .operator-evidence-drawer-origin {
    min-width: min(180px, 100%);
  }

  .panel-operator-console .operator-evidence-drawer-provenance-item {
    min-width: min(180px, 100%);
  }

  .panel-operator-console .operator-evidence-drawer-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-operator-console .operator-evidence-drawer-checkpoint {
    min-width: min(200px, 100%);
  }

  .panel-operator-console .operator-toolbar-cluster-saved {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .panel-operator-console .operator-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 10px;
    align-items: start;
  }

  .panel-operator-console .operator-toolbar-cluster {
    gap: 5px;
  }

  .panel-operator-console .operator-toolbar-label {
    font-size: 0.62rem;
    letter-spacing: 0.07em;
  }

  .panel-operator-console .operator-toolbar .operator-view-mode-actions,
  .panel-operator-console .operator-toolbar-cluster-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .panel-operator-console .operator-toolbar .button-muted {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 0.75rem;
  }

  .panel-operator-console .operator-toolbar-cluster-refresh {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .panel-operator-console .operator-toolbar #operatorRefreshBtn {
    width: auto;
    min-width: 148px;
    padding-inline: 14px;
  }

  .panel-operator-console .operator-toolbar-refresh-meta {
    max-width: none;
  }

  .panel-operator-console .operator-toolbar-cluster-saved,
  .panel-operator-console .operator-board-mode-hint {
    display: none;
  }

  .panel-operator-console .operator-triage-summary-grid {
    gap: 5px;
  }

  .panel-operator-console .operator-triage-stat {
    padding: 5px 9px;
    gap: 6px;
  }

  .panel-operator-console .operator-triage-stat-value {
    font-size: 0.76rem;
  }

  .panel-operator-console {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 108px);
  }

  .panel-operator-console .operator-priority-queue-item {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-priority-queue-actions {
    min-width: 0;
  }

  .panel-operator-console .operator-priority-queue-action {
    min-width: 0;
    width: 100%;
  }

  .panel-operator-console .operator-action-center-card-head {
    justify-content: flex-start;
  }

  .panel-operator-console .operator-action-center-tags {
    justify-content: flex-start;
  }

  .panel-operator-console .operator-action-center-actions {
    flex-direction: column;
  }

  .panel-operator-console .operator-action-center-action {
    flex-basis: auto;
    width: 100%;
  }

  .panel-operator-console .operator-action-center-card.is-compact .operator-action-center-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-operator-console .operator-evidence-drawer-head,
  .panel-operator-console .operator-evidence-drawer-facts {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-evidence-drawer[data-evidence-view="latest"] .operator-evidence-drawer-provenance,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="recovery"] .operator-evidence-drawer-provenance,
  .panel-operator-console .operator-evidence-drawer[data-evidence-view="audit"] .operator-evidence-drawer-provenance {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-evidence-drawer-fact.is-primary {
    grid-column: auto;
  }

  .panel-operator-console .operator-evidence-drawer-origins {
    display: grid;
  }

  .panel-operator-console .operator-evidence-drawer-timeline {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-evidence-drawer-provenance {
    display: grid;
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-evidence-drawer-checkpoints {
    display: grid;
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-evidence-drawer-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-operator-console .operator-evidence-drawer-tab {
    width: 100%;
  }

  .panel-operator-console .operator-evidence-drawer-actions {
    flex-direction: column;
  }

  .panel-operator-console .operator-evidence-drawer-action {
    width: 100%;
  }

  .panel-operator-console .operator-lane-focus-rail.is-inline {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-rail-list,
  .panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-chip,
  .panel-operator-console .operator-lane-focus-chip.is-inline {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-lane-focus-rail.is-inline .operator-lane-focus-chip-scope,
  .panel-operator-console .operator-lane-focus-chip.is-inline .operator-lane-focus-chip-scope {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    padding-left: 0;
    border-left: 0;
  }

  .panel-operator-console .operator-lane-focus-rail-list {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-collapsed-preview {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-mobile-dock,
  .operator-mobile-dock {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 120;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px;
    border: 1px solid color-mix(in oklch, var(--primary) 22%, var(--border-soft));
    border-radius: calc(var(--radius) - 2px);
    background:
      radial-gradient(220px 80px at 0% -24%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 76%),
      linear-gradient(180deg, color-mix(in oklch, var(--surface-panel) 95%, transparent), color-mix(in oklch, var(--surface-panel-2) 98%, transparent));
    backdrop-filter: blur(14px);
    box-shadow:
      0 20px 38px -28px color-mix(in oklch, var(--shadow-color) 54%, transparent),
      inset 0 1px 0 color-mix(in oklch, white 8%, transparent);
  }

  .operator-mobile-dock-btn {
    flex: 0 0 auto;
    min-height: 38px;
    min-width: max-content;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
  }

  .operator-mobile-dock-refresh {
    border: 1px solid color-mix(in oklch, var(--primary) 58%, var(--border));
    background: linear-gradient(
      140deg,
      color-mix(in oklch, var(--primary) 84%, white),
      color-mix(in oklch, var(--primary) 74%, var(--accent-foreground))
    );
    color: var(--primary-foreground);
  }

  .panel-operator-console .operator-demo-summary-title-row,
  .panel-operator-console .operator-health-group-title-cluster {
    gap: 9px;
  }

  .panel-operator-console .operator-signal-card-title-row .operator-surface-icon,
  .panel-operator-console .operator-demo-summary-title-row .operator-surface-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .panel-operator-console .operator-triage-summary-hint {
    max-width: none;
  }
}
/* 2026-03-10: live dock polish pass for cleaner scan rhythm */
.live-context-dock-shell {
  gap: 20px;
  padding: 24px 24px 26px;
}

.live-context-dock-head {
  gap: 10px 16px;
  align-items: end;
}

.live-context-dock-copy {
  gap: 8px;
}

.live-context-dock-copy-hint {
  max-width: 40ch;
  font-size: 0.75rem;
  line-height: 1.46;
}

.live-context-dock-current {
  gap: 2px 8px;
  padding: 8px 10px;
  min-width: 196px;
  max-width: 236px;
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 58%, transparent);
}

.live-context-dock-current-label {
  font-size: 0.74rem;
}

.live-context-dock-current-hint {
  font-size: 0.67rem;
  line-height: 1.35;
}

.live-context-dock {
  gap: 8px;
}

.live-context-dock-btn {
  gap: 7px;
  min-height: 82px;
  padding: 13px 14px;
  border-radius: 15px;
}

.live-context-dock-btn-head {
  align-items: flex-start;
  gap: 6px;
}

.live-context-dock-btn .status-pill,
.live-context-dock-current .status-pill {
  min-height: 22px;
  padding: 1px 7px;
  font-size: 0.64rem;
}

.live-context-dock-label {
  font-size: 0.92rem;
}

.live-context-dock-hint {
  font-size: 0.72rem;
  line-height: 1.34;
}

.live-context-tray {
  margin: 16px 0 28px;
  padding: 22px 24px 24px;
  border-color: color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(260px 92px at 0% -18%, color-mix(in oklch, var(--primary) 6%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 68%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 7%, transparent),
    0 18px 36px color-mix(in oklch, var(--shadow-color) 10%, transparent);
}

.live-context-tray-head {
  gap: 14px 18px;
  margin-bottom: 20px;
  padding-bottom: 18px;
}

.live-context-tray-copy {
  gap: 8px;
}

.live-context-tray-title {
  font-size: 1.02rem;
}

.live-context-tray-hint {
  max-width: 42ch;
  font-size: 0.78rem;
  line-height: 1.46;
}

.live-context-tray-actions {
  gap: 10px;
}

.live-context-tray-actions .status-pill {
  display: none;
}

.live-context-tray-close {
  min-height: 34px;
  padding: 0 13px;
  font-size: 0.76rem;
}

.live-context-tray-panel {
  gap: 24px;
}

.live-context-tray-panel .live-intent-secondary-actions {
  gap: 12px;
}

.live-context-tray-panel .live-top-panel-body,
.live-context-tray-panel .live-support-grid,
.live-context-tray-panel .live-secondary-tools-grid {
  gap: 18px;
}

.live-context-mounted-section .panel-live-top,
.live-context-mounted-section .live-support-card,
.live-context-mounted-section .live-secondary-tool-card {
  padding: 18px 18px 20px;
  border-color: color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: 18px;
  background: color-mix(in oklch, var(--surface-control) 84%, var(--surface-panel));
}

.live-context-tray-panel .live-intent-option-secondary {
  min-height: 54px;
  padding: 13px 14px;
  border-radius: 16px;
}

.live-context-dock-shell + .intent-compose-grid {
  margin-top: 24px;
}

.live-context-tray + .intent-compose-grid {
  margin-top: 24px;
}

.live-negotiator-main {
  grid-template-columns: minmax(0, 1.42fr) minmax(340px, 0.82fr);
  gap: 30px;
}

.live-negotiator-primary,
.live-negotiator-secondary {
  gap: 20px;
}

.live-compose-primary-actions {
  margin-top: 22px;
  gap: 12px;
}

.live-compose-send-hint {
  max-width: 36ch;
  font-size: 0.74rem;
  line-height: 1.5;
}

.panel-transcript-live {
  padding: 26px 24px;
  border-color: color-mix(in oklch, var(--border-soft) 84%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 98%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 94%, transparent)
    );
}

.live-support-intro {
  max-width: 34ch;
  font-size: 0.78rem;
  line-height: 1.5;
}

.live-reading-stack {
  margin-top: 18px;
  gap: 20px;
}

.live-result-card {
  gap: 12px;
  padding: 22px 22px 20px;
  border-radius: 22px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  background:
    radial-gradient(240px 110px at 0% 0%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 82%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.live-result-head {
  gap: 6px;
}

.live-result-label {
  font-size: 0.96rem;
}

.panel-transcript-live #liveResultMeta {
  font-size: 0.68rem;
}

.live-result-body {
  font-size: 0.95rem;
  line-height: 1.74;
}

.live-history-shell {
  gap: 12px;
  padding: 16px 18px 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 78%, transparent);
  border-radius: 20px;
  background: color-mix(in oklch, var(--surface-control) 72%, transparent);
}

.live-history-head h3 {
  font-size: 0.92rem;
}

.live-history-hint {
  max-width: 30ch;
  font-size: 0.76rem;
}

.panel-transcript-live .conversation-history {
  min-height: 170px;
  max-height: min(36vh, 340px);
  gap: 9px;
}

.live-technical-timeline {
  margin-top: 16px;
  border-style: dashed;
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  background: color-mix(in oklch, var(--surface-control) 56%, transparent);
}

.live-debug-transcript-shell {
  margin-top: 8px;
  padding: 10px 12px;
}

.live-debug-transcript-shell .transcript {
  min-height: 140px;
  max-height: min(26vh, 240px);
}

@media (max-width: 1080px) {
  .live-negotiator-main {
    grid-template-columns: 1fr;
  }

  .live-context-dock-current {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .live-context-dock-btn {
    min-height: 78px;
  }

  .panel-transcript-live {
    padding: 20px;
  }
}


/* 2026-03-10: operator lane headers and real grid-order activation */
.panel-operator-console .operator-health-group-head {
  align-items: start;
}

.panel-operator-console .operator-health-group-title-row {
  gap: 6px;
}

.panel-operator-console .operator-health-group-title-cluster {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.panel-operator-console .operator-health-group-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 14px;
}

.panel-operator-console .operator-health-group-title-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.panel-operator-console .operator-health-group-title-copy h3 {
  margin: 0;
}

.panel-operator-console .operator-health-group-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-health-group[data-operator-group-state="fail"] .operator-health-group-kicker {
  color: color-mix(in oklch, var(--destructive) 78%, white);
}

.panel-operator-console .operator-health-group[data-operator-group-state="watch"] .operator-health-group-kicker {
  color: color-mix(in oklch, var(--accent-foreground) 80%, white);
}

.panel-operator-console .operator-health-group[data-operator-group-state="stale"] .operator-health-group-kicker {
  color: color-mix(in oklch, var(--accent-foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-health-group[data-operator-group-state="ok"] .operator-health-group-kicker {
  color: color-mix(in oklch, var(--chart-1) 76%, white);
}

.panel-operator-console .operator-health-group-copy {
  margin: 0;
  max-width: 58ch;
  font-size: 0.79rem;
  line-height: 1.42;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
}

.panel-operator-console .operator-health-group-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1px 0 2px;
}

.panel-operator-console .operator-health-group-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: 999px;
  background:
    radial-gradient(120px 40px at 0% -12%, color-mix(in oklch, var(--surface-control-hover) 34%, transparent), transparent 74%),
    linear-gradient(160deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--surface-control) 94%, transparent));
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
}

.panel-operator-console .operator-health-group-summary-chip-label {
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-health-group-summary-chip-value {
  color: color-mix(in oklch, var(--foreground) 97%, white);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.panel-operator-console .operator-health-group-summary-chip.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 38%, var(--border-soft));
  background:
    radial-gradient(140px 48px at 0% -20%, color-mix(in oklch, var(--destructive) 16%, transparent), transparent 76%),
    linear-gradient(160deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--danger-soft) 82%, transparent));
}

.panel-operator-console .operator-health-group-summary-chip.is-watch {
  border-color: color-mix(in oklch, var(--warning) 34%, var(--border-soft));
  background:
    radial-gradient(140px 48px at 0% -20%, color-mix(in oklch, var(--warning) 14%, transparent), transparent 76%),
    linear-gradient(160deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--warning-soft) 78%, transparent));
}

.panel-operator-console .operator-health-group-summary-chip.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 38%, var(--border-soft));
  background:
    radial-gradient(140px 48px at 0% -20%, color-mix(in oklch, var(--chart-1) 14%, transparent), transparent 76%),
    linear-gradient(160deg, color-mix(in oklch, var(--surface-panel) 94%, transparent), color-mix(in oklch, var(--ok-soft) 80%, transparent));
}

.panel-operator-console .operator-health-group-summary-chip.is-dormant {
  border-color: color-mix(in oklch, var(--border-soft) 88%, transparent);
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
}

.panel-operator-console .operator-group-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.75rem;
  white-space: normal;
  overflow: visible;
}

.panel-operator-console .operator-group-metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
}

.panel-operator-console .operator-group-metric-pill-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-operator-console .operator-group-metric-pill strong {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.panel-operator-console .operator-group-metric-pill.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 36%, var(--border-soft));
  background: color-mix(in oklch, var(--danger-soft) 84%, transparent);
}

.panel-operator-console .operator-group-metric-pill.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 36%, var(--border-soft));
  background: color-mix(in oklch, var(--ok-soft) 82%, transparent);
}

.panel-operator-console .operator-group-metric-pill.is-neutral,
.panel-operator-console .operator-group-metric-pill.is-hidden,
.panel-operator-console .operator-group-metric-pill.is-visible {
  background: color-mix(in oklch, var(--surface-control) 94%, transparent);
}

.panel-operator-console .operator-group-toggle {
  align-self: start;
}

@media (max-width: 920px) {
  .panel-operator-console .operator-health-group-copy {
    max-width: none;
  }

  .panel-operator-console .operator-lane-focus-rail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-operator-console .operator-lane-focus-chip {
    min-width: 0;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-collapsed-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-operator-console .operator-health-group-summary-strip {
    gap: 6px;
  }

  .panel-operator-console .operator-health-group-summary-chip {
    min-height: 28px;
    padding: 4px 9px;
  }
}

/* 2026-03-10: live compose canvas polish */
.panel-live-intent-composer {
  display: grid;
  gap: 16px;
  padding: 28px;
}

.panel-live-intent-composer > h2 {
  margin-bottom: 0;
}

.live-compose-intro {
  margin: -2px 0 2px;
  max-width: 44ch;
  font-size: 0.8rem;
  line-height: 1.56;
}

.case-workspace-panel-intro[data-case-workspace-intent-mode="secondary"],
.case-workspace-panel-intro[data-case-workspace-intent-mode="after-case"] {
  color: color-mix(in oklch, var(--muted-foreground) 88%, var(--foreground));
}

.live-intent-stage {
  gap: 14px;
  margin-bottom: 0;
  padding: 18px 18px 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 80%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 78%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.live-intent-stage[data-case-workspace-intent-mode="secondary"],
.live-intent-stage[data-case-workspace-intent-mode="after-case"] {
  border-color: color-mix(in oklch, var(--border-soft) 62%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 62%, transparent),
      color-mix(in oklch, var(--surface-panel) 90%, transparent)
    );
}

.live-intent-stage-head {
  display: grid;
  gap: 6px;
}

.live-intent-stage-label {
  font-size: 0.68rem;
}

.live-intent-stage-hint {
  margin: 0;
  max-width: 48ch;
  font-size: 0.76rem;
  line-height: 1.48;
}

.live-intent-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.live-intent-option {
  align-content: start;
  gap: 4px;
  min-height: 62px;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in oklch, var(--surface-control) 86%, transparent);
}

.live-intent-option-title {
  font-size: 0.84rem;
}

.live-compose-primary-shell {
  display: grid;
  gap: 14px;
}

.live-compose-primary-shell[data-case-workspace-intent-mode="secondary"] .intent-compose-grid,
.live-compose-primary-shell[data-case-workspace-intent-mode="after-case"] .intent-compose-grid {
  border-color: color-mix(in oklch, var(--border-soft) 64%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 64%, transparent),
      color-mix(in oklch, var(--surface-panel) 92%, transparent)
    );
}

.intent-compose-grid {
  gap: 16px 18px;
  padding: 20px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 82%, transparent);
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 76%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.live-compose-guidance {
  gap: 8px;
  padding: 14px 16px;
  border-radius: 20px;
  background:
    radial-gradient(220px 96px at 0% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 92%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.live-compose-mode-chip {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.live-compose-helper {
  max-width: 44ch;
  font-size: 0.79rem;
  line-height: 1.52;
}

.field-heading {
  display: grid;
  gap: 4px;
  align-items: start;
}

.field-inline-hint {
  text-align: left;
  font-size: 0.72rem;
  line-height: 1.42;
}

.panel-live-intent-composer textarea#message {
  min-height: 184px;
  padding: 18px 18px 20px;
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 78%, transparent),
      color-mix(in oklch, var(--surface-panel) 97%, transparent)
    );
}

.live-compose-primary-actions {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
}

.live-compose-primary-actions > button {
  min-width: 196px;
  min-height: 54px;
  border-radius: 18px;
}

.live-compose-send-hint {
  max-width: 34ch;
}

@media (max-width: 900px) {
  .live-intent-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intent-compose-grid {
    grid-template-columns: 1fr;
  }

  .intent-field-language {
    grid-column: 1;
    width: min(100%, 360px);
  }
}

@media (max-width: 560px) {
  .panel-live-intent-composer {
    padding: 22px 18px;
  }

  .live-intent-switcher {
    grid-template-columns: 1fr;
  }

  .intent-compose-grid {
    padding: 16px;
  }
}
/* 2026-03-10: operator lane live previews */
.panel-operator-console .operator-health-group-preview {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.42;
  color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
}

.panel-operator-console .operator-health-group-preview.is-has-fail {
  color: color-mix(in oklch, var(--destructive) 76%, var(--foreground));
}

.panel-operator-console .operator-health-group-preview.is-stale {
  color: color-mix(in oklch, var(--warning) 76%, var(--foreground));
}

.panel-operator-console .operator-health-group-preview.is-all-ok {
  color: color-mix(in oklch, var(--chart-1) 76%, var(--foreground));
}

.panel-operator-console .operator-health-group-preview.is-muted {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
}

.panel-operator-console .operator-health-card.operator-health-card-lead {
  grid-column: span 2;
  padding: 16px;
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border-soft));
  background:
    radial-gradient(220px 84px at 0% -16%, color-mix(in oklch, var(--primary) 11%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 10%, transparent),
    var(--shadow-2xs);
}

.panel-operator-console .operator-health-card.operator-health-card-lead.has-lead-summary .operator-health-row,
.panel-operator-console .operator-health-card.operator-health-card-lead.has-lead-summary .operator-health-actions,
.panel-operator-console .operator-health-card.operator-health-card-lead.has-lead-summary .operator-health-action-list,
.panel-operator-console .operator-health-card.operator-health-card-lead.has-lead-summary .operator-health-action-history,
.panel-operator-console .operator-health-card.operator-health-card-lead.has-lead-summary .operator-health-empty-actions {
  display: none;
}

.panel-operator-console .operator-health-card-lead-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.panel-operator-console .operator-health-card-lead-summary-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 12px);
  background:
    radial-gradient(128px 44px at 0% -24%, color-mix(in oklch, var(--surface-control-hover) 28%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel) 97%, transparent));
}

.panel-operator-console .operator-health-card-lead-summary-item.is-primary {
  grid-column: span 2;
  border-color: color-mix(in oklch, var(--primary) 28%, var(--border-soft));
  background:
    radial-gradient(170px 60px at 0% -24%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel) 98%, transparent));
}

.panel-operator-console .operator-health-card-lead-summary-item.is-placeholder {
  border-style: dashed;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-health-card-lead-summary-label {
  min-width: 0;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
}

.panel-operator-console .operator-health-card-lead-summary-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: color-mix(in oklch, var(--foreground) 97%, white);
  font-size: 0.9rem;
  line-height: 1.35;
}

.panel-operator-console .operator-health-card.operator-health-card-lead.has-lead-summary .operator-health-hint {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.46;
}

.panel-operator-console .operator-health-card.operator-health-card-lead.has-lead-summary .operator-health-hint.is-compact-lead-hint {
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 0.74rem;
  line-height: 1.28;
  border-color: color-mix(in oklch, var(--border-soft) 82%, transparent);
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
}

.panel-operator-console .operator-health-card.operator-health-card-lead[data-operator-lead-summary-count="2"] .operator-health-card-lead-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-operator-console .operator-health-card.operator-health-card-lead[data-operator-lead-summary-count="2"] .operator-health-card-lead-summary-item.is-primary {
  grid-column: span 1;
}

.panel-operator-console
  .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"] {
  padding: 13px 14px;
}

.panel-operator-console
  .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
  .status-pill {
  margin-bottom: 7px;
  padding: 5px 10px;
  font-size: 0.79rem;
}

.panel-operator-console
  .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
  h3 {
  margin-bottom: 9px;
  font-size: 0.96rem;
}

.panel-operator-console
  .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
  .operator-health-card-lead-summary {
  gap: 6px;
  margin-top: 9px;
}

.panel-operator-console
  .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
  .operator-health-card-lead-summary-item {
  gap: 4px;
  padding: 8px 10px;
}

.panel-operator-console
  .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
  .operator-health-card-lead-summary-label {
  font-size: 0.6rem;
}

.panel-operator-console
  .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
  .operator-health-card-lead-summary-value {
  font-size: 0.86rem;
  line-height: 1.28;
}

.panel-operator-console
  .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
  .operator-health-hint.is-compact-lead-hint {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 0.72rem;
  line-height: 1.24;
}

.panel-operator-console .operator-health-card.operator-health-card-supporting {
  padding: 11px 12px;
  border-color: color-mix(in oklch, var(--border-soft) 88%, transparent);
  background:
    radial-gradient(140px 46px at 0% -20%, color-mix(in oklch, var(--surface-control-hover) 26%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), color-mix(in oklch, var(--surface-panel) 96%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 10px 22px color-mix(in oklch, var(--shadow-color) 6%, transparent);
}

.panel-operator-console .operator-health-card.operator-health-card-selectable {
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.panel-operator-console .operator-health-card.operator-health-card-selectable:hover {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft));
  transform: translateY(-1px);
}

.panel-operator-console .operator-health-card.operator-health-card-selectable:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--primary) 48%, var(--border-soft));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    0 0 0 2px color-mix(in oklch, var(--primary) 20%, transparent),
    var(--shadow-2xs);
}

.panel-operator-console .operator-health-card.is-evidence-active {
  border-color: color-mix(in oklch, var(--primary) 52%, var(--border-soft));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 18%, transparent),
    0 16px 30px color-mix(in oklch, var(--shadow-color) 10%, transparent);
}

.panel-operator-console .operator-health-card.operator-health-card-supporting h3 {
  margin-bottom: 7px;
  font-size: 0.92rem;
}

.panel-operator-console .operator-health-card h3.is-compact-title {
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.panel-operator-console .operator-health-card.operator-health-card-supporting .status-pill {
  margin-bottom: 7px;
}

.panel-operator-console .operator-health-card.operator-health-card-supporting .operator-health-row,
.panel-operator-console .operator-health-card.operator-health-card-supporting .operator-health-actions,
.panel-operator-console .operator-health-card.operator-health-card-supporting .operator-health-action-list,
.panel-operator-console .operator-health-card.operator-health-card-supporting .operator-health-action-history,
.panel-operator-console .operator-health-card.operator-health-card-supporting .operator-health-empty-actions {
  display: none;
}

.panel-operator-console .operator-health-card.operator-health-card-supporting .operator-health-hint {
  margin-top: 0;
  padding: 8px 10px;
  font-size: 0.8rem;
  line-height: 1.42;
  border-color: color-mix(in oklch, var(--border-soft) 82%, transparent);
  background: color-mix(in oklch, var(--surface-control) 80%, transparent);
}

.panel-operator-console .operator-health-card-drilldown-note {
  display: none;
}

.panel-operator-console .operator-health-card-supporting-summary {
  display: none;
}

.panel-operator-console .operator-health-card.operator-health-card-supporting .operator-health-card-drilldown-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-health-card.operator-health-card-supporting .operator-health-card-drilldown-note::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary) 74%, white);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 14%, transparent);
}

.panel-operator-console .operator-health-group-body.has-supporting-ledger {
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: start;
}

.panel-operator-console .operator-health-group-body.has-single-supporting-ledger {
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr);
}

.panel-operator-console .operator-health-group-body.has-supporting-ledger > .operator-health-card.operator-health-card-lead {
  grid-column: 1;
}

.panel-operator-console .operator-health-supporting-ledger {
  grid-column: 2;
  align-self: start;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: calc(var(--radius) - 4px);
  background:
    radial-gradient(160px 56px at 0% -16%, color-mix(in oklch, var(--surface-control-hover) 34%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 90%, transparent), color-mix(in oklch, var(--surface-panel) 96%, transparent));
}

.panel-operator-console .operator-health-supporting-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panel-operator-console .operator-health-supporting-ledger-title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.panel-operator-console .operator-health-supporting-ledger-count {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.panel-operator-console .operator-health-supporting-ledger-copy {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
}

.panel-operator-console .operator-health-supporting-ledger-list {
  display: grid;
  gap: 8px;
}

.panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting {
  margin: 0;
}

@media (min-width: 921px) {
  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-group-body {
    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
    gap: 10px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty {
    padding: 10px 11px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty h3 {
    margin-bottom: 7px;
    font-size: 0.82rem;
    line-height: 1.22;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .status-pill {
    min-height: 23px;
    margin-bottom: 6px;
    padding: 4px 9px;
    font-size: 0.72rem;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .operator-health-hint {
    margin-top: 6px;
    font-size: 0.7rem;
    line-height: 1.22;
  }
  .panel-operator-console .operator-health-group.has-single-lead-layout:not(.is-collapsed):not(.has-supporting-ledger-layout) .operator-health-group-copy,
  .panel-operator-console .operator-health-group.has-single-lead-layout:not(.is-collapsed):not(.has-supporting-ledger-layout) .operator-health-group-preview {
    display: none;
  }

  .panel-operator-console .operator-health-group.has-single-lead-layout:not(.is-collapsed):not(.has-supporting-ledger-layout) .operator-health-group-head {
    gap: 12px;
  }

  .panel-operator-console .operator-health-group.has-single-lead-layout:not(.is-collapsed):not(.has-supporting-ledger-layout) .operator-health-group-title-row {
    gap: 10px;
  }

  .panel-operator-console .operator-health-group.has-single-lead-layout:not(.is-collapsed):not(.has-supporting-ledger-layout) .operator-health-group-summary-strip {
    margin-bottom: 0;
  }

  .panel-operator-console .operator-health-group.has-single-lead-layout:not(.is-collapsed):not(.has-supporting-ledger-layout) .operator-group-metrics {
    margin: 0;
    gap: 5px;
  }

  .panel-operator-console .operator-health-group.has-single-lead-layout:not(.is-collapsed):not(.has-supporting-ledger-layout) .operator-group-metric-pill {
    min-height: 22px;
    gap: 5px;
    padding: 3px 7px;
  }

  .panel-operator-console .operator-health-group.has-single-lead-layout:not(.is-collapsed):not(.has-supporting-ledger-layout) .operator-group-metric-pill-label {
    font-size: 0.6rem;
  }

  .panel-operator-console .operator-health-group.has-single-lead-layout:not(.is-collapsed):not(.has-supporting-ledger-layout) .operator-group-metric-pill strong {
    font-size: 0.68rem;
  }

  .panel-operator-console .operator-health-group.has-single-lead-layout:not(.is-collapsed):not(.has-supporting-ledger-layout) .operator-group-toggle {
    padding: 7px 10px;
    font-size: 0.72rem;
  }

  .panel-operator-console .operator-health-group-body.has-single-lead-card {
    gap: 8px;
  }

  .operator-health-group-body.has-single-lead-card
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"] {
    padding: 11px 12px;
  }

  .panel-operator-console
    .operator-health-group-body.has-single-lead-card
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"] {
    padding: 11px 12px;
  }

  .panel-operator-console
    .operator-health-group-body.has-single-lead-card
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .status-pill {
    margin-bottom: 5px;
    padding: 3px 8px;
    font-size: 0.7rem;
  }

  .panel-operator-console
    .operator-health-group-body.has-single-lead-card
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    h3 {
    max-width: 100%;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
    line-height: 1.16;
  }

  .panel-operator-console
    .operator-health-group-body.has-single-lead-card
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-card-lead-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
  }

  .panel-operator-console
    .operator-health-group-body.has-single-lead-card
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-card-lead-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .panel-operator-console
    .operator-health-group-body.has-single-lead-card
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-card-lead-summary-item.is-primary {
    grid-column: auto;
  }

  .panel-operator-console
    .operator-health-group-body.has-single-lead-card
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-card-lead-summary-label {
    font-size: 0.54rem;
    letter-spacing: 0.05em;
  }

  .panel-operator-console
    .operator-health-group-body.has-single-lead-card
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-card-lead-summary-value {
    font-size: 0.72rem;
    line-height: 1.14;
  }

  .panel-operator-console
    .operator-health-group-body.has-single-lead-card
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-hint.is-compact-lead-hint {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
    font-size: 0.62rem;
    line-height: 1.14;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-health-group-copy,
  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-health-group-preview {
    display: none;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) {
    padding: 12px 12px 11px;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-health-group-head {
    gap: 8px;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-health-group-title-row {
    gap: 8px;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-health-group-title-cluster {
    gap: 10px;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-health-group-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 12px;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-health-group-title-copy {
    gap: 3px;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-health-group-title-copy h3 {
    font-size: 0.96rem;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-health-group-kicker {
    font-size: 0.64rem;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-health-group-summary-strip {
    display: none;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-group-metrics {
    margin: 0;
    gap: 5px;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-group-metric-pill {
    min-height: 22px;
    gap: 5px;
    padding: 3px 7px;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-group-metric-pill-label {
    font-size: 0.6rem;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-group-metric-pill strong {
    font-size: 0.68rem;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-group-metric-pill.is-ok,
  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-group-metric-pill.is-hidden {
    display: none;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-group-toggle {
    padding: 7px 10px;
    font-size: 0.72rem;
  }

  .panel-operator-console .operator-health-group.has-single-supporting-ledger-layout:not(.is-collapsed) .operator-group-metrics {
    gap: 5px;
  }

  .panel-operator-console .operator-health-group-body.has-supporting-ledger {
    grid-template-columns: minmax(0, 1.34fr) minmax(252px, 0.66fr);
    gap: 8px;
  }

  .panel-operator-console .operator-health-group-body.has-single-supporting-ledger {
    grid-template-columns: minmax(0, 1.46fr) minmax(228px, 0.54fr);
  }

  .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "status title"
      "summary summary"
      "hint hint";
    align-items: start;
    gap: 3px 7px;
    padding: 8px 9px;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "status title"
      "summary summary"
      "hint hint";
    align-items: start;
    gap: 3px 7px;
    padding: 8px 9px;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell
    .status-pill {
    grid-area: status;
    align-self: center;
    margin: 0;
    min-height: 18px;
    padding: 1px 7px;
    font-size: 0.62rem;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell
    h3 {
    grid-area: title;
    align-self: center;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    line-height: 1.14;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell
    .operator-health-card-lead-summary {
    grid-area: summary;
    gap: 3px;
    margin: 0;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell
    .operator-health-card-lead-summary-item {
    padding: 1px 6px;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell
    .operator-health-card-lead-summary-value {
    font-size: 0.69rem;
    line-height: 1.12;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell
    .operator-health-hint.is-compact-lead-hint {
    grid-area: hint;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.61rem;
    line-height: 1.12;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"] {
    padding: 9px 10px;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .status-pill {
    margin-bottom: 5px;
    padding: 3px 8px;
    font-size: 0.7rem;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    h3 {
    max-width: 100%;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
    line-height: 1.16;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-card-lead-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 5px;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-card-lead-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-card-lead-summary-item.is-primary {
    grid-column: auto;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-card-lead-summary-label {
    font-size: 0.52rem;
    letter-spacing: 0.05em;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-card-lead-summary-value {
    font-size: 0.69rem;
    line-height: 1.12;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead[data-operator-lead-summary-density="compact"]
    .operator-health-hint.is-compact-lead-hint {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
    font-size: 0.61rem;
    line-height: 1.14;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"] {
    padding: 8px 9px;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
    .status-pill {
    margin: 0;
    padding: 1px 7px;
    font-size: 0.62rem;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
    h3 {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    line-height: 1.14;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
    .operator-health-card-lead-summary {
    gap: 3px;
    margin-top: 0;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
    .operator-health-card-lead-summary-item {
    padding: 1px 6px;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
    .operator-health-card-lead-summary-label {
    font-size: 0.52rem;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
    .operator-health-card-lead-summary-value {
    font-size: 0.69rem;
    line-height: 1.12;
  }

  .panel-operator-console
    .operator-health-group-body.has-supporting-ledger
    > .operator-health-card.operator-health-card-lead.has-compact-lead-shell[data-operator-lead-summary-count="2"]
    .operator-health-hint.is-compact-lead-hint {
    margin-top: 0;
    padding: 0;
    font-size: 0.61rem;
    line-height: 1.12;
  }

  .panel-operator-console .operator-health-supporting-ledger {
    gap: 5px;
    padding: 6px 7px;
  }

  .panel-operator-console .operator-health-group.has-supporting-ledger-layout:not(.is-collapsed) .operator-health-supporting-ledger-head {
    display: none;
  }

  .panel-operator-console .operator-health-supporting-ledger-head {
    gap: 8px;
  }

  .panel-operator-console .operator-health-supporting-ledger-title {
    font-size: 0.62rem;
  }

  .panel-operator-console .operator-health-supporting-ledger-count {
    font-size: 0.68rem;
  }

  .panel-operator-console .operator-health-supporting-ledger-copy {
    display: none;
  }

  .panel-operator-console .operator-health-supporting-ledger.is-single-signal .operator-health-supporting-ledger-head {
    display: none;
  }

  .panel-operator-console .operator-health-supporting-ledger.is-single-signal {
    padding-top: 8px;
  }

  .panel-operator-console .operator-health-supporting-ledger-list {
    gap: 5px;
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "status title note"
      ". hint note";
    align-items: center;
    gap: 3px 7px;
    padding: 7px 8px;
    min-height: 0;
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
      0 8px 18px color-mix(in oklch, var(--shadow-color) 4%, transparent);
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting.has-supporting-summary {
    grid-template-areas:
      "status title note"
      ". summary note";
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting .status-pill {
    grid-area: status;
    align-self: start;
    margin: 0;
    min-height: 18px;
    padding: 1px 6px;
    font-size: 0.58rem;
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting h3 {
    grid-area: title;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting .operator-health-card-supporting-summary {
    grid-area: summary;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting .operator-health-card-supporting-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    padding: 2px 6px;
    border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
    border-radius: 999px;
    background: color-mix(in oklch, var(--surface-control) 78%, transparent);
    color: color-mix(in oklch, var(--foreground) 88%, white);
    font-size: 0.62rem;
    line-height: 1.2;
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting .operator-health-card-supporting-summary-item.is-placeholder {
    color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  }

  .panel-operator-console
    .operator-health-supporting-ledger
    .operator-health-card.operator-health-card-supporting[data-operator-supporting-summary-count="2"]
    .operator-health-card-supporting-summary {
    gap: 4px;
  }

  .panel-operator-console
    .operator-health-supporting-ledger
    .operator-health-card.operator-health-card-supporting[data-operator-supporting-summary-count="2"]
    .operator-health-card-supporting-summary-item {
    padding: 2px 6px;
    font-size: 0.62rem;
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting .operator-health-card-supporting-summary-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting .operator-health-card-supporting-summary-value {
    min-width: 0;
    font-size: 0.64rem;
    font-weight: 700;
    color: inherit;
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting .operator-health-hint {
    grid-area: hint;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
    font-size: 0.68rem;
    line-height: 1.28;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting.has-supporting-summary .operator-health-hint {
    display: none;
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting .operator-health-card-drilldown-note {
    grid-area: note;
    justify-self: end;
    align-self: center;
    margin: 0;
    white-space: nowrap;
    font-size: 0.54rem;
    letter-spacing: 0.06em;
  }

  .panel-operator-console
    .operator-health-supporting-ledger
    .operator-health-card.operator-health-card-supporting[data-operator-supporting-summary-count="2"]
    .operator-health-card-drilldown-note {
    font-size: 0.58rem;
  }

  .panel-operator-console .operator-health-supporting-ledger .operator-health-card.operator-health-card-supporting .operator-health-card-drilldown-note::before {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 12%, transparent);
  }
}

.panel-operator-console .operator-health-group-collapsed-preview {
  display: none;
}

.panel-operator-console .operator-health-group-collapsed-pill {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  border-radius: calc(var(--radius) - 12px);
  background:
    radial-gradient(120px 40px at 0% -18%, color-mix(in oklch, var(--surface-control-hover) 32%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--surface-panel) 96%, transparent));
}

.panel-operator-console .operator-health-group-collapsed-pill-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
}

.panel-operator-console .operator-health-group-collapsed-pill-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.72rem;
  font-weight: 700;
}

.panel-operator-console .operator-health-group-collapsed-pill.is-fail {
  border-color: color-mix(in oklch, var(--destructive) 36%, var(--border-soft));
  background:
    radial-gradient(140px 48px at 0% -24%, color-mix(in oklch, var(--destructive) 16%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--danger-soft) 82%, transparent));
}

.panel-operator-console .operator-health-group-collapsed-pill.is-watch,
.panel-operator-console .operator-health-group-collapsed-pill.is-stale {
  border-color: color-mix(in oklch, var(--warning) 34%, var(--border-soft));
  background:
    radial-gradient(140px 48px at 0% -24%, color-mix(in oklch, var(--warning) 14%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--warning-soft) 80%, transparent));
}

.panel-operator-console .operator-health-group-collapsed-pill.is-ok {
  border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border-soft));
  background:
    radial-gradient(140px 48px at 0% -24%, color-mix(in oklch, var(--chart-1) 14%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 92%, transparent), color-mix(in oklch, var(--chart-1) 10%, transparent));
}

.panel-operator-console .operator-health-group-collapsed-pill.is-muted {
  border-color: color-mix(in oklch, var(--border-soft) 88%, transparent);
}

.panel-operator-console .operator-health-group.is-collapsed {
  padding: 14px 15px;
}

.panel-operator-console .operator-health-group.is-collapsed .operator-health-group-copy,
.panel-operator-console .operator-health-group.is-collapsed .operator-group-metrics,
.panel-operator-console .operator-health-group.is-collapsed .operator-health-group-preview {
  display: none;
}

.panel-operator-console .operator-health-group.is-collapsed .operator-health-group-head {
  align-items: center;
  gap: 10px;
}

.panel-operator-console .operator-health-group.is-collapsed .operator-health-group-title-row {
  gap: 7px;
}

.panel-operator-console .operator-health-group.is-collapsed .operator-health-group-summary-strip {
  gap: 6px;
  margin: 0;
}

.panel-operator-console .operator-health-group.is-collapsed .operator-health-group-summary-chip {
  min-height: 26px;
  padding: 4px 8px;
}

.panel-operator-console .operator-health-group.is-collapsed .operator-health-group-summary-chip-label {
  font-size: 0.57rem;
}

.panel-operator-console .operator-health-group.is-collapsed .operator-health-group-summary-chip-value {
  font-size: 0.67rem;
}

.panel-operator-console .operator-health-group.is-collapsed .operator-health-group-collapsed-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

@media (min-width: 921px) {
  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-group-body {
    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
    gap: 10px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty {
    padding: 10px 11px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty h3 {
    margin-bottom: 7px;
    font-size: 0.82rem;
    line-height: 1.22;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .status-pill {
    min-height: 23px;
    margin-bottom: 6px;
    padding: 4px 9px;
    font-size: 0.72rem;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .operator-health-hint {
    margin-top: 6px;
    font-size: 0.7rem;
    line-height: 1.22;
  }
  .panel-operator-console .operator-health-group.is-collapsed {
    padding: 10px 12px;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-head {
    align-items: center;
    gap: 10px;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-title-cluster {
    gap: 8px;
    min-width: 0;
    margin-right: 0;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 11px;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-kicker {
    display: none;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-title-copy {
    gap: 0;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-title-copy h3 {
    font-size: 0.9rem;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-summary-strip {
    display: none;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-collapsed-preview {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: none;
    gap: 5px;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-collapsed-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    min-height: 24px;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-collapsed-pill-label {
    font-size: 0.5rem;
    letter-spacing: 0.07em;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-health-group-collapsed-pill-value {
    font-size: 0.64rem;
  }

  .panel-operator-console .operator-health-group.is-collapsed[data-operator-group-state="dormant"] .operator-health-group-collapsed-pill:nth-child(3),
  .panel-operator-console .operator-health-group.is-collapsed[data-operator-group-state="ok"] .operator-health-group-collapsed-pill:nth-child(3) {
    display: none;
  }

  .panel-operator-console .operator-health-group.is-collapsed .operator-group-toggle {
    min-width: 96px;
    padding: 6px 10px;
    font-size: 0.72rem;
  }
}

@media (max-width: 1180px) {
  .panel-operator-console .operator-health-group-body.has-supporting-ledger {
    grid-template-columns: 1fr;
  }

  .panel-operator-console .operator-health-supporting-ledger {
    grid-column: 1;
  }

  .panel-operator-console .operator-health-card.operator-health-card-lead {
    grid-column: span 1;
  }

  .panel-operator-console .operator-health-card-lead-summary-item.is-primary {
    grid-column: span 1;
  }
}
/* 2026-03-10: live workspace summary and right rail final polish */
.dashboard-workspace-summary {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  padding: 20px 22px 22px;
  border-radius: 30px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  background:
    radial-gradient(340px 120px at 0% -12%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 76%),
    radial-gradient(280px 100px at 100% 0%, color-mix(in oklch, var(--accent-foreground) 8%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 97%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 98%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 20px 42px color-mix(in oklch, var(--shadow-color) 12%, transparent);
  gap: 18px;
}

.dashboard-workspace-head {
  align-items: end;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
}

.dashboard-workspace-eyebrow {
  margin-bottom: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.dashboard-workspace-title {
  font-size: clamp(1.12rem, 1.2vw, 1.34rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.dashboard-workspace-description {
  margin-top: 8px;
  max-width: 46ch;
  font-size: 0.8rem;
  line-height: 1.58;
}

.dashboard-workspace-head .status-pill {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.7rem;
}

.dashboard-shell-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 0;
  border-top: 0;
}

.dashboard-glance-card {
  gap: 6px;
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-left: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 18px;
  background: color-mix(in oklch, var(--surface-control) 70%, transparent);
}

.dashboard-glance-card:first-child {
  padding-left: 16px;
  border-left: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
}

.dashboard-glance-label {
  font-size: 0.64rem;
  letter-spacing: 0.18em;
}

.dashboard-glance-value {
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

.dashboard-glance-hint {
  max-width: 22ch;
  font-size: 0.74rem;
  line-height: 1.46;
}

.panel-transcript-live {
  display: grid;
  gap: 14px;
}

.panel-transcript-live > h2 {
  margin-bottom: 0;
}

.live-support-intro {
  max-width: 30ch;
  font-size: 0.76rem;
  line-height: 1.48;
}

.live-reading-stack {
  gap: 16px;
}

.live-result-card {
  gap: 14px;
  padding: 24px 24px 22px;
  border-radius: 24px;
  border-color: color-mix(in oklch, var(--primary) 20%, var(--border-soft));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 18px 30px -26px color-mix(in oklch, var(--primary) 34%, transparent);
}

.live-result-card.is-empty {
  border-style: solid;
}

.live-result-label {
  font-size: 1.02rem;
}

.panel-transcript-live #liveResultMeta {
  min-height: 24px;
  padding: 2px 8px;
}

.live-result-body {
  min-height: 92px;
}

.live-history-shell {
  gap: 10px;
  padding: 14px 16px 12px;
  border-color: color-mix(in oklch, var(--border-soft) 70%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 68%, transparent),
      color-mix(in oklch, var(--surface-panel) 92%, transparent)
    );
}

.live-history-head h3 {
  font-size: 0.88rem;
}

.live-history-hint {
  max-width: 27ch;
  font-size: 0.74rem;
  line-height: 1.44;
}

.panel-transcript-live .conversation-history {
  min-height: 152px;
  max-height: min(34vh, 312px);
}

.panel-transcript-live .conversation-history:empty::before {
  font-size: 0.8rem;
}

.live-technical-timeline {
  margin-top: 4px;
  border-radius: 18px;
}

.live-technical-timeline > summary {
  padding: 12px 14px;
}

.live-debug-transcript-shell {
  padding: 8px 10px;
  border-radius: 16px;
}

.live-debug-transcript-shell .transcript {
  min-height: 126px;
}

@media (max-width: 1120px) {
  .dashboard-workspace-head {
    align-items: flex-start;
  }

  .dashboard-shell-meta {
    grid-template-columns: 1fr;
  }

  .dashboard-glance-card,
  .dashboard-glance-card:first-child {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .dashboard-workspace-summary {
    padding: 18px 16px 18px;
    gap: 14px;
  }

  .dashboard-workspace-head {
    padding-bottom: 12px;
  }

  .dashboard-glance-card,
  .dashboard-glance-card:first-child {
    padding: 12px 14px;
  }
}

/* 2026-03-10: live workspace and reading rail refinement */
.dashboard-workspace-summary {
  margin-top: 18px;
  padding: 22px 24px 24px;
  gap: 20px;
}

.dashboard-workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px 18px;
}

.dashboard-workspace-head > div {
  display: grid;
  gap: 4px;
}

.dashboard-workspace-title {
  font-size: clamp(1.16rem, 1.3vw, 1.4rem);
}

.dashboard-workspace-description {
  max-width: 54ch;
  font-size: 0.79rem;
  line-height: 1.62;
}

.dashboard-shell-meta {
  gap: 14px;
}

.dashboard-glance-card {
  display: grid;
  align-content: start;
  min-height: 86px;
  gap: 7px;
  padding: 15px 16px;
}

.dashboard-glance-value {
  line-height: 1.14;
}

.dashboard-glance-hint {
  max-width: none;
}

.panel-transcript-live {
  gap: 16px;
  padding: 28px 24px 24px;
  border-radius: 28px;
  align-self: start;
}

.panel-transcript-live > h2 {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
}

#liveSupportPanelTitle {
  display: block;
  font-size: clamp(1.02rem, 1.12vw, 1.18rem);
  letter-spacing: -0.03em;
}

.live-support-intro {
  margin: -2px 0 0;
  max-width: 31ch;
  font-size: 0.74rem;
  line-height: 1.5;
}

.live-reading-stack {
  margin-top: 2px;
  gap: 18px;
}

.live-result-card {
  position: relative;
  overflow: hidden;
  gap: 14px;
  padding: 24px 24px 22px;
}

.live-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.live-result-label {
  max-width: 20ch;
  font-size: 0.9rem;
  line-height: 1.28;
}

.panel-transcript-live #liveResultMeta {
  margin-left: auto;
}

.live-result-body {
  font-size: 0.92rem;
  line-height: 1.68;
}

.live-history-shell {
  gap: 10px;
  padding: 16px 18px 16px;
}

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

.live-history-head h3 {
  font-size: 0.86rem;
}

.live-history-hint {
  max-width: none;
  font-size: 0.73rem;
  line-height: 1.46;
}

.panel-transcript-live .conversation-history {
  min-height: 144px;
  max-height: min(30vh, 280px);
}

.live-technical-timeline {
  margin-top: 2px;
}

.live-technical-timeline > summary {
  padding: 12px 14px;
}

.live-debug-transcript-shell {
  padding: 10px 12px 12px;
  background: color-mix(in oklch, var(--surface-control) 72%, transparent);
}

@media (min-width: 1081px) {
  .panel-transcript-live {
    position: sticky;
    top: 22px;
  }
}

@media (max-width: 1120px) {
  .dashboard-workspace-head {
    grid-template-columns: 1fr;
  }

  .dashboard-workspace-head .status-pill {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .dashboard-workspace-summary {
    padding: 18px 16px 18px;
  }

  .panel-transcript-live {
    padding: 22px 18px 18px;
    border-radius: 24px;
  }

  .live-result-card {
    padding: 20px 18px 18px;
  }
}

/* 2026-03-10: live structural clarity pass */
.dashboard-body {
  grid-template-columns: minmax(164px, 178px) minmax(0, 1fr);
  gap: 18px;
}

.dashboard-workspace-summary {
  padding: 18px 20px 20px;
  gap: 16px;
}

.dashboard-workspace-head {
  gap: 16px;
  padding-bottom: 14px;
}

.dashboard-workspace-description {
  max-width: 44ch;
  margin-top: 6px;
  font-size: 0.78rem;
}

.dashboard-shell-meta {
  gap: 10px;
}

.dashboard-glance-card {
  min-height: 84px;
  padding: 13px 14px;
}

.live-negotiator-main {
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, 0.92fr);
  gap: 24px;
}

.live-negotiator-main > * {
  min-width: 0;
}

.live-negotiator-primary,
.live-negotiator-secondary {
  gap: 18px;
}

.live-negotiator-secondary,
.live-negotiator-secondary > *,
.live-reading-stack,
.panel-transcript-live,
.live-result-card,
.live-history-shell,
.panel-transcript-live .conversation-history,
.panel-transcript-live .conversation-history .entry {
  min-width: 0;
}

.panel-live-intent-composer {
  gap: 18px;
  padding: 24px 24px 26px;
  border-radius: 30px;
  border-color: color-mix(in oklch, var(--border-soft) 62%, transparent);
  background:
    radial-gradient(380px 138px at 0% -12%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 90%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 82%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 16px 34px -30px color-mix(in oklch, var(--shadow-color) 18%, transparent);
}

.panel-live-intent-composer > h2 {
  display: grid;
  gap: 8px;
}

.live-compose-intro {
  margin: -6px 0 0;
  max-width: 42ch;
  font-size: 0.77rem;
}

.live-intent-stage {
  gap: 12px;
  padding: 16px 16px 14px;
  border-radius: 24px;
  border-color: color-mix(in oklch, var(--border-soft) 70%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 66%, transparent),
      color-mix(in oklch, var(--surface-panel) 88%, transparent)
    );
}

.live-intent-stage-head {
  gap: 4px;
}

.live-intent-switcher {
  gap: 8px;
}

.live-intent-option {
  min-height: 58px;
  padding: 11px 13px;
  border-radius: 15px;
}

.live-intent-option-title {
  font-size: 0.82rem;
}

.live-context-dock-shell {
  gap: 16px;
  margin-top: 0;
  padding: 18px 18px 20px;
  border-radius: 24px;
  border-color: color-mix(in oklch, var(--border-soft) 74%, transparent);
  background:
    radial-gradient(240px 84px at 0% -12%, color-mix(in oklch, var(--primary) 5%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 56%, transparent),
      color-mix(in oklch, var(--surface-panel) 88%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.live-context-dock-head {
  grid-template-columns: minmax(0, 1fr) minmax(172px, auto);
  gap: 10px 14px;
  align-items: center;
}

.live-context-dock-copy-hint {
  max-width: 34ch;
  font-size: 0.73rem;
  line-height: 1.42;
}

.live-context-dock-current {
  gap: 2px 8px;
  padding: 8px 10px;
  min-width: 0;
  max-width: 220px;
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 46%, transparent);
}

.live-context-dock-current-label {
  font-size: 0.72rem;
}

.live-context-dock-current-hint {
  font-size: 0.66rem;
  line-height: 1.3;
}

.live-context-dock {
  gap: 8px;
}

.live-context-dock-btn {
  min-height: 70px;
  padding: 10px 12px 11px;
  gap: 7px;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 72%, transparent),
      color-mix(in oklch, var(--surface-panel) 92%, transparent)
    );
}

.live-context-dock-btn-head {
  align-items: center;
  gap: 8px;
}

.live-context-dock-btn .status-pill,
.live-context-dock-current .status-pill {
  min-height: 20px;
  padding: 1px 6px;
  font-size: 0.61rem;
}

.live-context-dock-label {
  font-size: 0.88rem;
}

.live-context-dock-hint {
  max-width: 16ch;
  font-size: 0.67rem;
  line-height: 1.32;
}

.live-context-tray {
  margin: 12px 0 16px;
  padding: 18px 18px 20px;
  border-radius: 24px;
  border-color: color-mix(in oklch, var(--border-soft) 76%, transparent);
  background:
    radial-gradient(220px 80px at 0% -12%, color-mix(in oklch, var(--primary) 4%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 58%, transparent),
      color-mix(in oklch, var(--surface-panel) 90%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.live-context-tray-head {
  gap: 12px 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.live-context-tray-title {
  font-size: 0.98rem;
}

.live-context-tray-hint {
  max-width: 34ch;
  font-size: 0.75rem;
  line-height: 1.42;
}

.live-context-tray-close {
  min-height: 32px;
  padding: 0 12px;
}

.live-context-tray-panel {
  gap: 18px;
}

.live-context-mounted-section .panel-live-top,
.live-context-mounted-section .live-support-card,
.live-context-mounted-section .live-secondary-tool-card {
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: color-mix(in oklch, var(--surface-control) 76%, var(--surface-panel));
}

.live-context-tray-panel .live-top-panel-body,
.live-context-tray-panel .live-support-grid,
.live-context-tray-panel .live-secondary-tools-grid {
  gap: 14px;
}

.live-context-dock-shell + .intent-compose-grid,
.live-context-tray + .intent-compose-grid {
  margin-top: 18px;
}

.intent-compose-grid {
  gap: 18px 20px;
  padding: 22px 22px 20px;
  border-radius: 26px;
  border-color: color-mix(in oklch, var(--border-soft) 76%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 68%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
}

.live-compose-guidance {
  padding: 12px 14px;
  border-radius: 18px;
}

.field-heading {
  gap: 5px;
}

.panel-live-intent-composer textarea#message {
  min-height: 198px;
  padding: 20px 20px 22px;
  border-radius: 22px;
}

.live-compose-primary-actions {
  padding-top: 18px;
}

.panel-transcript-live {
  gap: 18px;
  padding: 24px 22px 22px;
  border-radius: 30px;
}

.live-support-intro {
  max-width: 32ch;
}

.live-reading-stack {
  gap: 18px;
}

.live-result-card {
  padding: 22px 22px 20px;
}

.live-result-head {
  gap: 8px 10px;
}

.panel-transcript-live #liveResultMeta {
  margin-left: 0;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}

.live-result-body {
  font-size: 0.94rem;
  line-height: 1.74;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.live-history-shell {
  gap: 12px;
  padding: 15px 16px 14px;
}

.panel-transcript-live .conversation-history {
  gap: 12px;
  max-height: min(56vh, 500px);
}

.panel-transcript-live .conversation-history .entry {
  padding: 12px 13px;
  border-radius: 18px;
  font-size: 0.88rem;
  line-height: 1.58;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.panel-transcript-live .conversation-history .entry small {
  margin-bottom: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.panel-transcript-live .conversation-history .entry.user {
  max-width: 88%;
}

.panel-transcript-live .conversation-history .entry.assistant {
  max-width: 92%;
}

.live-technical-timeline > summary {
  padding: 11px 13px;
}

.live-debug-transcript-shell .transcript {
  min-height: 120px;
}

@media (max-width: 1220px) {
  .live-negotiator-main {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  }
}

@media (max-width: 1080px) {
  .dashboard-body {
    grid-template-columns: 1fr;
  }

  .live-negotiator-main {
    grid-template-columns: 1fr;
  }

  .panel-transcript-live {
    position: static;
  }
}

@media (max-width: 820px) {
  .live-context-dock-head {
    grid-template-columns: 1fr;
  }

  .live-context-dock-current {
    max-width: none;
    justify-self: stretch;
  }

  .live-context-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .panel-live-intent-composer {
    padding: 20px 16px 22px;
  }

  .live-context-dock-shell,
  .live-context-tray,
  .intent-compose-grid,
  .panel-transcript-live {
    padding-left: 16px;
    padding-right: 16px;
  }

  .live-context-dock {
    grid-template-columns: 1fr;
  }

  .live-context-dock-btn {
    min-height: 66px;
  }
}

/* 2026-03-10: live action rail and compose refinement */
.live-intent-stage {
  gap: 10px;
  padding: 14px 14px 12px;
}

.live-intent-stage-head {
  gap: 3px;
}

.live-intent-stage-hint {
  max-width: 38ch;
  font-size: 0.72rem;
  line-height: 1.42;
}

.live-intent-switcher {
  gap: 8px;
}

.live-intent-option {
  position: relative;
  overflow: hidden;
  align-content: center;
  gap: 2px;
  min-height: 54px;
  padding: 9px 11px 10px;
  border-radius: 17px;
  border-color: color-mix(in oklch, var(--border-soft) 64%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 64%, transparent),
      color-mix(in oklch, var(--surface-panel) 88%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.live-intent-option:hover {
  border-color: color-mix(in oklch, var(--primary) 22%, var(--border-soft));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-hover) 78%, transparent),
      color-mix(in oklch, var(--surface-panel) 92%, transparent)
    );
}

.live-intent-option.is-active {
  border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft));
  background:
    radial-gradient(180px 78px at 0% 0%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 74%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    0 14px 24px -24px color-mix(in oklch, var(--primary) 48%, transparent);
}

.live-intent-option-label {
  display: inline-flex;
  color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.live-intent-option.is-active .live-intent-option-label {
  color: color-mix(in oklch, var(--primary) 78%, var(--foreground));
}

.live-intent-option-title {
  font-size: 0.85rem;
  font-weight: 680;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.live-intent-option-hint {
  display: none;
}

.intent-compose-grid {
  gap: 16px 18px;
  padding: 20px 20px 18px;
}

.live-compose-guidance {
  grid-column: 1 / -1;
  gap: 7px;
  padding: 0 0 14px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 66%, transparent);
}

.live-compose-helper {
  max-width: 48ch;
  font-size: 0.78rem;
  line-height: 1.56;
}

.field-heading > span:first-child {
  font-weight: 680;
  letter-spacing: -0.01em;
}

.field-inline-hint {
  max-width: 26ch;
}

.panel-live-intent-composer .intent-compose-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.panel-live-intent-composer .live-compose-guidance,
.panel-live-intent-composer .intent-field-message {
  grid-column: 1 / -1;
}

.panel-live-intent-composer .intent-field-language {
  grid-column: auto;
  width: 100%;
  min-width: 0;
}

.panel-live-intent-composer .translation-language-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  gap: 16px 18px;
  align-items: start;
}

.panel-live-intent-composer .translation-language-row .intent-field-language {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
}

.panel-live-intent-composer #speechLanguageField {
  order: -2;
}

.panel-live-intent-composer #intentLanguageField {
  order: -1;
}

.panel-live-intent-composer .intent-field-language :is(select, .select-trigger) {
  min-height: 44px;
  font-size: 14px;
  line-height: 1.35;
}

.panel-live-intent-composer .intent-field-language .select-trigger {
  padding: 11px 40px 11px 14px;
}

.panel-live-intent-composer .intent-field-language .select-option {
  font-size: 14px;
}

.panel-live-intent-composer textarea#message {
  min-height: 210px;
}

.live-compose-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(172px, max-content));
  align-items: center;
  justify-content: start;
  justify-items: start;
  gap: 14px 18px;
}

.live-compose-primary-actions > button {
  min-width: 172px;
  min-height: 50px;
  border-radius: 16px;
}

#resetVisaDemoBtn {
  grid-column: 1 / -1;
  justify-self: start;
}

.live-compose-send-hint,
.live-compose-preset-hint {
  grid-column: 1 / -1;
}

.live-compose-send-hint {
  max-width: 40ch;
  font-size: 0.72rem;
  line-height: 1.46;
}

.live-compose-preset-hint {
  margin: -4px 0 0;
  max-width: 40ch;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.46;
}

.case-workspace-action-section-demo .live-compose-preset-hint {
  margin-top: 0;
}

.live-compose-preset-map {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.case-workspace-action-section-demo .live-compose-preset-map {
  margin-top: 4px;
}

.live-compose-preset-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 86%, transparent);
  background: color-mix(in oklch, var(--surface-control) 84%, transparent);
}

.live-compose-preset-card strong {
  font-size: 0.8rem;
  line-height: 1.35;
  color: color-mix(in oklch, var(--foreground) 96%, white);
}

.live-compose-preset-card p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.48;
}

@media (max-width: 980px) {
  .live-compose-primary-actions {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .live-compose-preset-map {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .live-intent-stage {
    padding: 12px 12px 10px;
  }

  .live-intent-option {
    min-height: 50px;
  }

  .live-compose-guidance {
    padding-bottom: 12px;
  }

  .live-compose-primary-actions > button {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .panel-live-intent-composer .intent-compose-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel-live-intent-composer .intent-field-language {
    grid-column: 1;
    width: min(100%, 360px);
  }
}

/* 2026-03-10: live reading rail content polish */
.live-rail-kicker {
  display: inline-flex;
  align-items: center;
  color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.live-result-card {
  gap: 16px;
  padding: 22px 22px 20px;
  border-color: color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  background:
    radial-gradient(220px 90px at 0% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 76%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
}

.live-result-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.live-result-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.live-result-label {
  font-size: 1.04rem;
  line-height: 1.12;
}

.panel-transcript-live #liveResultMeta {
  justify-self: start;
  min-height: 22px;
  padding: 2px 7px;
  font-size: 0.64rem;
  letter-spacing: 0.02em;
}

.live-result-body {
  min-height: 108px;
  font-size: 0.94rem;
  line-height: 1.78;
}

.live-result-summary {
  display: grid;
  gap: 10px;
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 70%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 70%, transparent),
      color-mix(in oklch, var(--surface-panel) 88%, transparent)
    );
}

.live-result-summary-title {
  font-size: 0.78rem;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
}

.live-result-summary-list {
  display: grid;
  gap: 10px;
}

.live-result-summary-item {
  display: grid;
  gap: 4px;
}

.live-result-summary-label {
  font-size: 0.68rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--foreground) 54%, var(--muted-foreground));
}

.live-result-summary-value {
  font-size: 0.82rem;
  line-height: 1.5;
  color: color-mix(in oklch, var(--foreground) 92%, white);
}

.live-result-summary-handoff {
  margin: 0;
  padding-top: 2px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 62%, transparent);
  font-size: 0.78rem;
  line-height: 1.56;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
}

.live-result-summary-copy-btn {
  justify-self: start;
}

.live-history-shell {
  gap: 14px;
  padding: 16px 16px 15px;
  border-color: color-mix(in oklch, var(--border-soft) 64%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 62%, transparent),
      color-mix(in oklch, var(--surface-panel) 90%, transparent)
    );
}

.live-history-head {
  display: grid;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 60%, transparent);
}

.live-history-head > div {
  display: grid;
  gap: 4px;
}

.live-history-head h3 {
  font-size: 0.9rem;
  letter-spacing: -0.015em;
}

.live-history-hint {
  max-width: 30ch;
  font-size: 0.72rem;
  line-height: 1.46;
}

.panel-transcript-live .conversation-history {
  gap: 10px;
  padding-top: 2px;
  max-height: min(34vh, 320px);
}

.panel-transcript-live .conversation-history .entry {
  gap: 8px;
  padding: 12px 13px;
  border-radius: 18px;
  font-size: 0.88rem;
  line-height: 1.58;
}

.panel-transcript-live .conversation-history .entry .entry-meta,
.live-debug-transcript-shell .entry .entry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
}

.panel-transcript-live .conversation-history .entry .entry-role,
.live-debug-transcript-shell .entry .entry-role {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: capitalize;
}

.panel-transcript-live .conversation-history .entry .entry-time,
.live-debug-transcript-shell .entry .entry-time {
  color: color-mix(in oklch, var(--foreground) 56%, var(--muted-foreground));
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.panel-transcript-live .conversation-history .entry .entry-body {
  color: color-mix(in oklch, var(--foreground) 94%, var(--muted-foreground));
}

.panel-transcript-live .conversation-history .entry.user .entry-role {
  color: color-mix(in oklch, var(--primary) 82%, var(--foreground));
}

.panel-transcript-live .conversation-history .entry.assistant .entry-role {
  color: color-mix(in oklch, var(--accent) 72%, var(--foreground));
}

.panel-transcript-live .conversation-history .entry.error .entry-role {
  color: color-mix(in oklch, var(--destructive) 82%, var(--foreground));
}

.live-technical-timeline {
  margin-top: 0;
  border-color: color-mix(in oklch, var(--border-soft) 62%, transparent);
  background: color-mix(in oklch, var(--surface-control) 44%, transparent);
}

.live-technical-timeline > summary {
  padding: 12px 13px;
}

.live-technical-timeline .advanced-title {
  font-size: 0.8rem;
}

.live-technical-timeline .advanced-hint {
  max-width: 30ch;
  font-size: 0.68rem;
  line-height: 1.4;
}

.live-debug-transcript-shell {
  margin-top: 8px;
  padding: 10px 11px;
}

.live-debug-transcript-shell .transcript {
  gap: 8px;
  min-height: 116px;
}

.live-debug-transcript-shell .entry {
  padding: 10px 11px;
  border-radius: 14px;
}

.live-debug-transcript-shell .entry .entry-body {
  font-size: 0.78rem;
  line-height: 1.48;
}

@media (max-width: 620px) {
  .live-result-card,
  .live-history-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .panel-transcript-live .conversation-history .entry .entry-meta,
  .live-debug-transcript-shell .entry .entry-meta {
    flex-wrap: wrap;
  }
}

/* 2026-03-10: live tray surface polish */
.live-context-tray-panel {
  gap: 16px;
}

.live-context-mounted-section.live-utility-shell > .live-top-panel-body,
.live-context-mounted-section.live-support-section .live-support-grid,
.live-context-mounted-section.live-input-optional-tools > .live-secondary-tools-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.live-context-mounted-section .panel-live-top,
.live-context-mounted-section .live-support-card,
.live-context-mounted-section .live-secondary-tool-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  border-color: color-mix(in oklch, var(--border-soft) 74%, transparent);
  background:
    radial-gradient(220px 90px at 0% -22%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 72%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.live-context-mounted-section .panel-live-top > :not(.live-utility-card-heading) + :not(.live-utility-card-heading),
.live-context-mounted-section .live-support-card > :not(h3) + :not(h3),
.live-context-mounted-section .live-secondary-tool-card > :not(.live-secondary-tool-copy) + :not(.live-secondary-tool-copy) {
  margin-top: 0;
}

.live-context-mounted-section .live-utility-card-heading,
.live-context-mounted-section .live-secondary-tool-copy,
.live-context-mounted-section .live-support-card h3 {
  gap: 6px;
  margin: 0;
}

.live-context-mounted-section .live-utility-card-heading .section-badge,
.live-context-mounted-section .live-support-card h3 .section-badge {
  width: fit-content;
}

.live-context-mounted-section .live-utility-card-heading .live-top-summary-title,
.live-context-mounted-section .live-support-card-title,
.live-context-mounted-section .live-secondary-tool-title {
  display: block;
  font-size: 0.97rem;
  font-weight: 690;
  line-height: 1.24;
  letter-spacing: -0.015em;
}

.live-context-mounted-section .live-utility-card-heading .live-top-summary-hint,
.live-context-mounted-section .live-secondary-tool-hint,
.live-context-mounted-section .live-support-summary-hint {
  max-width: 36ch;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.live-context-mounted-section.live-utility-shell .live-utility-grid > .panel-live-connection {
  padding-bottom: 16px;
  border-bottom: 0;
}

.live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary {
  gap: 7px;
}

.live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary > button,
.live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary > .export-menu > summary {
  min-height: 36px;
  padding-inline: 12px;
  border-radius: 12px;
  font-size: 0.84rem;
}

.live-context-mounted-section.live-utility-shell .live-session-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.live-context-mounted-section.live-utility-shell .live-session-strip > div {
  padding: 10px 11px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 62%, transparent);
  gap: 5px;
}

.live-context-mounted-section.live-utility-shell .live-session-strip strong {
  font-size: 0.63rem;
  letter-spacing: 0.12em;
}

.live-context-mounted-section.live-utility-shell .live-session-strip .status-pill,
.live-context-mounted-section.live-utility-shell .live-session-strip .status-value {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .action-group-live-control {
  gap: 0;
  padding-top: 2px;
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .control-cluster {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .control-cluster + .control-cluster {
  padding-left: 14px;
  border-left: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .control-cluster-label {
  margin-bottom: 0;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .control-cluster-hint {
  max-width: none;
  margin-bottom: 0;
  font-size: 0.74rem;
  line-height: 1.46;
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .control-cluster-actions {
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .control-cluster-actions > button,
.live-context-mounted-section.live-utility-shell .panel-live-controls .button-live-danger,
.live-context-mounted-section.live-utility-shell .panel-live-controls .button-live-fallback {
  min-height: 36px;
  border-radius: 12px;
  font-size: 0.84rem;
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .action-group-secondary.action-group-live-safety {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 66%, transparent);
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .button-live-danger,
.live-context-mounted-section.live-utility-shell .panel-live-controls .button-live-fallback {
  min-width: 0;
  padding-inline: 12px;
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .button-live-danger {
  background: color-mix(in oklch, oklch(0.69 0.14 24) 44%, var(--surface-control));
}

.live-context-mounted-section.live-support-section .live-support-card {
  gap: 12px;
}

.live-context-mounted-section.live-support-section .live-support-card .grid-3,
.live-context-mounted-section.live-support-section .live-support-card .actions,
.live-context-mounted-section.live-support-section .live-support-card .meta-row,
.live-context-mounted-section.live-support-section .live-support-card .events,
.live-context-mounted-section.live-support-section .live-support-card .advanced-settings {
  margin-top: 0;
}

.live-context-mounted-section.live-support-section .live-support-card .grid-3 {
  grid-template-columns: 1fr;
  gap: 10px;
}

.live-context-mounted-section.live-support-section .live-support-card .actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.live-context-mounted-section.live-support-section .live-support-card .actions > button {
  min-height: 38px;
  border-radius: 12px;
  font-size: 0.84rem;
}

.live-context-mounted-section.live-support-section .live-support-card #refreshTasksBtn {
  grid-column: 1 / -1;
}

.live-context-mounted-section.live-support-section .live-support-card .meta-row > div {
  padding: 9px 10px;
  border-radius: 12px;
}

.live-context-mounted-section.live-support-section .live-support-card .events {
  max-height: 220px;
  padding: 11px 12px;
  border-radius: 16px;
  border-color: color-mix(in oklch, var(--border-soft) 68%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 68%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.live-context-mounted-section.live-support-section .live-support-card .events.is-empty-state {
  max-height: none;
  overflow: visible;
  padding-right: 12px;
}

.live-context-mounted-section.live-support-section .live-support-card .active-task-empty-state {
  padding: 14px 13px;
  gap: 10px;
  border-radius: 14px;
}

.live-context-mounted-section.live-support-section .live-support-card .active-task-empty-icon {
  min-width: 58px;
  min-height: 24px;
  padding: 3px 9px;
}

.live-context-mounted-section.live-support-section .live-support-card .active-task-empty-title {
  font-size: 0.92rem;
}

.live-context-mounted-section.live-support-section .live-support-card .active-task-empty-hint {
  font-size: 0.78rem;
  line-height: 1.46;
}

.live-context-mounted-section.live-support-section .live-support-card .active-task-empty-actions {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.live-context-mounted-section.live-support-section .live-support-card .active-task-empty-action,
.live-context-mounted-section.live-support-section .live-support-card .active-task-empty-action-refresh {
  width: 100%;
  min-width: 0;
  min-height: 36px;
}

@media (max-width: 560px) {
  .live-context-mounted-section.live-support-section .live-support-card .active-task-empty-actions {
    grid-template-columns: 1fr;
  }
}

.live-context-mounted-section.live-input-optional-tools {
  gap: 14px;
}

.live-context-mounted-section.live-input-optional-tools .advanced-title,
.live-context-mounted-section.live-support-section .advanced-title,
.live-context-mounted-section.live-utility-shell .advanced-title {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.live-context-mounted-section.live-input-optional-tools .advanced-hint,
.live-context-mounted-section.live-support-section .advanced-hint,
.live-context-mounted-section.live-utility-shell .advanced-hint {
  max-width: 34ch;
  font-size: 0.72rem;
  line-height: 1.44;
}

.live-context-mounted-section.live-input-optional-tools .file-picker {
  min-height: 52px;
  padding: 9px 10px;
  border-radius: 16px;
}

.live-context-mounted-section.live-input-optional-tools .file-picker-button {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 11px;
  font-size: 0.82rem;
}

.live-context-mounted-section.live-input-optional-tools .file-picker-name {
  font-size: 0.84rem;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions {
  gap: 8px;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group {
  padding: 0;
  border: 0;
  background: transparent;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-primary {
  display: flex;
  justify-content: flex-start;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-primary > button {
  width: auto;
  min-width: 0;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions button {
  min-height: 36px;
  border-radius: 12px;
  font-size: 0.84rem;
}

@media (max-width: 1160px) {
  .live-context-mounted-section.live-utility-shell > .live-top-panel-body,
  .live-context-mounted-section.live-support-section .live-support-grid,
  .live-context-mounted-section.live-input-optional-tools > .live-secondary-tools-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .live-context-mounted-section.live-utility-shell .panel-live-controls .action-group-live-control {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .live-context-mounted-section.live-utility-shell .panel-live-controls .control-cluster + .control-cluster {
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  }
}

@media (max-width: 720px) {
  .live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary > .export-menu {
    grid-column: 1 / -1;
  }

  .live-context-mounted-section.live-utility-shell .live-session-strip,
  .live-context-mounted-section.live-support-section .live-support-card .actions,
  .live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-secondary {
    grid-template-columns: 1fr;
  }
}

/* 2026-03-10: live tray single-column cleanup */
#uiTaskAdvancedSection .intent-grid-advanced {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

#uiTaskAdvancedSection .field,
#uiTaskAdvancedSection .field > span {
  min-height: 0;
}

#uiTaskAdvancedSection textarea {
  min-height: 108px;
}

#uiTaskAdvancedSection .advanced-hint {
  max-width: 40ch;
}

.live-context-mounted-section.live-utility-shell > .live-top-panel-body,
.live-context-mounted-section.live-support-section .live-support-grid,
.live-context-mounted-section.live-input-optional-tools > .live-secondary-tools-grid {
  grid-template-columns: 1fr;
}

.live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary > .export-menu {
  grid-column: 1 / -1;
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .action-group-live-control {
  grid-template-columns: 1fr;
  gap: 12px;
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .control-cluster + .control-cluster {
  padding-left: 0;
  padding-top: 12px;
  border-left: 0;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .control-cluster-actions {
  grid-template-columns: 1fr;
}

.live-context-mounted-section.live-utility-shell .live-session-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.live-context-mounted-section.live-utility-shell .live-session-strip > div {
  min-width: 0;
}

.live-context-mounted-section.live-utility-shell .live-session-strip .status-pill,
.live-context-mounted-section.live-utility-shell .live-session-strip .status-value {
  display: block;
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.live-context-mounted-section.live-support-section .approval-advanced-grid,
.live-context-mounted-section.live-support-section .live-support-card .actions {
  grid-template-columns: 1fr;
}

.live-context-mounted-section.live-support-section .live-support-card .actions > button {
  width: 100%;
}

.live-context-mounted-section.live-support-section .live-support-card .meta-row > div {
  width: 100%;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-primary,
.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-secondary {
  display: grid;
  grid-template-columns: 1fr;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-primary > button,
.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-secondary > button {
  width: 100%;
}

@media (max-width: 720px) {
  .live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary,
  .live-context-mounted-section.live-utility-shell .live-session-strip {
    grid-template-columns: 1fr;
  }
}

/* 2026-03-10: restore compact action rows inside live trays */
.live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary > button {
  width: 100%;
  min-width: 0;
}

.live-context-mounted-section.live-utility-shell .panel-live-controls .control-cluster-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.live-context-mounted-section.live-support-section .live-support-card .actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-primary,
.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group {
  display: contents;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-primary > button,
.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-secondary > button {
  width: 100%;
}

@media (max-width: 980px) {
  .live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-primary,
  .live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-secondary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-context-mounted-section.live-utility-shell .panel-live-connection .action-group-primary > #newSessionBtn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .live-context-mounted-section.live-support-section .live-support-card .actions,
  .live-context-mounted-section.live-utility-shell .panel-live-controls .control-cluster-actions {
    grid-template-columns: 1fr;
  }
}

/* 2026-03-10: live compose and rail state polish */
.live-compose-primary-actions > button:disabled {
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  background: color-mix(in oklch, var(--surface-control) 82%, transparent);
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  box-shadow: none;
}

.live-compose-primary-actions > button:disabled + .live-compose-send-hint {
  color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
}

.live-compose-primary-actions > button.is-pending {
  position: relative;
  padding-left: 42px;
  border-color: color-mix(in oklch, var(--primary) 38%, var(--border));
  background:
    radial-gradient(140px 60px at 0% -20%, color-mix(in oklch, var(--primary) 18%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklch, var(--surface-control-hover) 94%, transparent), color-mix(in oklch, var(--surface-panel-2) 96%, transparent));
  cursor: progress;
}

.live-compose-primary-actions > button.is-pending::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--primary) 26%, transparent);
  border-top-color: color-mix(in oklch, var(--primary) 78%, white);
  animation: live-send-button-spin 0.9s linear infinite;
}

.live-compose-send-hint.is-pending {
  color: color-mix(in oklch, var(--foreground) 86%, var(--primary));
  font-weight: 600;
}

@keyframes live-send-button-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.live-result-card.is-empty {
  border-color: color-mix(in oklch, var(--border-soft) 70%, transparent);
  background:
    radial-gradient(240px 110px at 0% 0%, color-mix(in oklch, var(--primary) 6%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 72%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.live-result-card.is-empty .live-result-body {
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
}

.live-result-card.is-error .live-result-body {
  color: color-mix(in oklch, var(--foreground) 94%, var(--destructive));
}

.panel-transcript-live .conversation-history:empty {
  min-height: 120px;
  padding: 14px;
  border: 1px dashed color-mix(in oklch, var(--border-soft) 70%, transparent);
  border-radius: 18px;
  background: color-mix(in oklch, var(--surface-control) 56%, transparent);
}

.panel-transcript-live .conversation-history:empty::before {
  display: block;
  max-width: 28ch;
  line-height: 1.5;
}

.live-technical-timeline > summary {
  background: color-mix(in oklch, var(--surface-control) 54%, transparent);
}

/* 2026-03-10: live result/history/log state hierarchy */
.live-result-card .live-result-body {
  text-wrap: pretty;
}

.live-result-card.is-pending {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft));
  background:
    radial-gradient(240px 120px at 0% 0%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 80%, transparent),
      color-mix(in oklch, var(--surface-panel) 98%, transparent)
    );
}

.live-result-card.is-pending::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in oklch, var(--primary) 60%, transparent), transparent 78%);
  opacity: 0.85;
}

.live-result-card.is-pending .live-result-body {
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.live-result-card.is-ready {
  border-color: color-mix(in oklch, var(--accent) 22%, var(--border-soft));
  background:
    radial-gradient(220px 90px at 0% 0%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 80%, transparent),
      color-mix(in oklch, var(--surface-panel) 98%, transparent)
    );
}

.live-result-card.is-ready::before,
.live-result-card.is-streaming::before,
.live-result-card.is-error::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  opacity: 0.9;
}

.live-result-card.is-ready::before {
  background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 54%, transparent), transparent 80%);
}

.live-result-card.is-streaming::before {
  background: linear-gradient(90deg, color-mix(in oklch, var(--primary) 62%, transparent), transparent 80%);
}

.live-result-card.is-error::before {
  background: linear-gradient(90deg, color-mix(in oklch, var(--destructive) 66%, transparent), transparent 80%);
}

.live-result-card.is-streaming .status-pill {
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 18%, transparent);
}

.panel-transcript-live .conversation-history.is-awaiting:empty {
  border-style: solid;
  border-color: color-mix(in oklch, var(--primary) 22%, var(--border-soft));
  background:
    radial-gradient(220px 100px at 0% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 62%, transparent);
}

.panel-transcript-live .conversation-history.is-awaiting:empty::before {
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.live-debug-transcript-shell .transcript:empty {
  position: relative;
  min-height: 96px;
  padding: 14px;
  border: 1px dashed color-mix(in oklch, var(--border-soft) 66%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 58%, transparent),
      color-mix(in oklch, var(--surface-panel) 86%, transparent)
    );
}

.live-debug-transcript-shell .transcript:empty::before {
  content: attr(data-empty-text);
  display: block;
  max-width: 32ch;
  color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
  font-size: 0.78rem;
  line-height: 1.55;
}

.live-debug-transcript-shell .transcript:empty::after {
  content: "DEBUG";
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: color-mix(in oklch, var(--foreground) 22%, var(--muted-foreground));
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.panel-transcript-live .conversation-history .entry {
  position: relative;
  display: grid;
  gap: 9px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 62%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.panel-transcript-live .conversation-history .entry::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--border-soft) 56%, transparent);
}

.panel-transcript-live .conversation-history .entry.user::before {
  inset: 10px 0 10px auto;
  background: color-mix(in oklch, var(--primary) 60%, transparent);
}

.panel-transcript-live .conversation-history .entry.assistant::before {
  background: color-mix(in oklch, var(--accent) 56%, transparent);
}

.panel-transcript-live .conversation-history .entry.error::before {
  background: color-mix(in oklch, var(--destructive) 62%, transparent);
}

.panel-transcript-live .conversation-history .entry .entry-meta,
.live-debug-transcript-shell .entry .entry-meta {
  align-items: flex-start;
}

.panel-transcript-live .conversation-history .entry .entry-role {
  font-size: 0.69rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-transcript-live .conversation-history .entry .entry-body {
  text-wrap: pretty;
}

.live-debug-transcript-shell .entry {
  border: 1px solid color-mix(in oklch, var(--border-soft) 56%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 72%, transparent),
      color-mix(in oklch, var(--surface-panel) 88%, transparent)
    );
}

.live-debug-transcript-shell .entry.system {
  border-color: color-mix(in oklch, var(--border-soft) 48%, transparent);
}

.live-debug-transcript-shell .entry.error {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border-soft));
  background:
    radial-gradient(180px 70px at 0% 0%, color-mix(in oklch, var(--destructive) 8%, transparent), transparent 78%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 72%, transparent),
      color-mix(in oklch, var(--surface-panel) 88%, transparent)
    );
}

.live-debug-transcript-shell .entry .entry-role {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.live-debug-transcript-shell .entry .entry-body {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  text-wrap: pretty;
}

/* 2026-03-10: storyteller hierarchy decompression */
.dashboard-workspace-summary.is-story-minimal {
  margin-top: 12px;
  padding: 15px 16px 16px;
  gap: 12px;
  border-radius: 24px;
  border-color: color-mix(in oklch, var(--border-soft) 66%, transparent);
  background:
    radial-gradient(260px 90px at 0% -10%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 78%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 95%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 98%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    0 14px 28px color-mix(in oklch, var(--shadow-color) 8%, transparent);
}

.dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head {
  align-items: center;
  gap: 10px 14px;
  padding-bottom: 0;
  border-bottom: 0;
}

.dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div {
  gap: 3px;
}

.dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title {
  font-size: clamp(1rem, 1.02vw, 1.14rem);
}

.dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description {
  margin-top: 4px;
  max-width: 58ch;
  font-size: 0.75rem;
  line-height: 1.48;
}

.dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head .status-pill {
  min-height: 24px;
  padding: 3px 9px;
  font-size: 0.66rem;
}

.dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-workspace-summary.is-story-minimal .dashboard-glance-card {
  min-height: 0;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: color-mix(in oklch, var(--surface-control) 62%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.dashboard-workspace-summary.is-story-minimal .dashboard-glance-label {
  font-size: 0.6rem;
}

.dashboard-workspace-summary.is-story-minimal .dashboard-glance-value {
  font-size: 0.9rem;
}

.dashboard-workspace-summary.is-story-minimal .dashboard-glance-hint {
  display: none;
}

.story-controls.is-collapsed {
  gap: 12px;
}

.story-controls.is-collapsed .story-section-head {
  gap: 8px;
}

.story-controls.is-collapsed .story-controls-grid {
  display: none;
}

.story-controls.is-collapsed .story-controls-hint {
  min-height: 0;
  padding: 14px 16px;
  border-radius: 20px;
  border-color: color-mix(in oklch, var(--border-soft) 74%, transparent);
  background:
    radial-gradient(220px 84px at 0% -16%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 72%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.story-controls.is-collapsed.is-pending .story-controls-hint {
  border-color: color-mix(in oklch, var(--primary) 24%, var(--border-soft));
  background:
    radial-gradient(220px 84px at 0% -16%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 76%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.story-scenes-shell.is-idle {
  gap: 12px;
}

.story-scenes-shell.is-idle .story-list-head .status-pill {
  display: none;
}

.story-scenes-shell.is-idle .story-timeline-list-empty {
  gap: 16px;
  padding: 18px 20px 16px;
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 60%, transparent),
      color-mix(in oklch, var(--surface-panel) 92%, transparent)
    );
}

.story-scenes-shell.is-idle .story-timeline-list-empty-board {
  gap: 12px;
  padding: 14px 16px;
}

.story-scenes-shell.is-idle .story-timeline-list-empty-card {
  min-height: 74px;
  padding: 12px 13px;
}

.story-scenes-shell.is-idle .story-timeline-list-empty-cta {
  font-size: 0.76rem;
  line-height: 1.42;
}

@media (max-width: 1120px) {
  .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .dashboard-workspace-summary.is-story-minimal {
    padding: 14px;
  }

  .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card {
    padding: 10px 11px;
  }

  .story-controls.is-collapsed .story-controls-hint {
    padding: 12px 13px;
  }

  .story-scenes-shell.is-idle .story-timeline-list-empty-preview {
    grid-template-columns: 1fr;
  }
}

/* 2026-03-10: storyteller focused shell simplification */
.layout.is-story-focused .hero {
  gap: 8px;
  padding: 12px 14px 13px;
}

.layout.is-story-focused .hero-headline {
  gap: 10px;
  align-items: center;
}

.layout.is-story-focused .hero h1 {
  margin: 0;
  font-size: clamp(1.02rem, 1.28vw, 1.18rem);
  letter-spacing: -0.025em;
}

.layout.is-story-focused .hero-toolbar {
  gap: 8px;
}

.layout.is-story-focused .hero-language-control {
  gap: 6px;
  padding: 6px 8px;
  border-color: color-mix(in oklch, var(--border-soft) 58%, transparent);
  background: color-mix(in oklch, var(--surface-control) 26%, transparent);
}

.layout.is-story-focused .hero-language-select {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 0.72rem;
}

.layout.is-story-focused #themeToggleBtn {
  min-height: 32px;
  padding: 7px 12px;
  font-size: 0.74rem;
}

.layout.is-story-focused .hero-sub {
  display: none;
}

.dashboard-body.is-story-focused {
  grid-template-columns: minmax(122px, 132px) minmax(0, 1fr);
  gap: 14px;
}

.dashboard-sidebar.is-story-focused .dashboard-nav {
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  border-color: color-mix(in oklch, var(--border-soft) 56%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 54%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 30%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent);
}

.dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn {
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 16px;
  gap: 4px;
  opacity: 0.76;
  transition:
    opacity 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover,
.dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible {
  opacity: 0.94;
}

.dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active {
  opacity: 1;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control-strong) 68%, transparent),
      color-mix(in oklch, var(--surface-control) 88%, transparent)
    );
  box-shadow:
    inset 2px 0 0 color-mix(in oklch, var(--primary) 54%, transparent),
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent);
}

.dashboard-sidebar.is-story-focused .dashboard-nav-copy {
  gap: 1px;
}

.dashboard-sidebar.is-story-focused .dashboard-nav-title {
  font-size: 0.74rem;
  line-height: 1.08;
}

.dashboard-sidebar.is-story-focused .dashboard-nav-icon {
  color: color-mix(in oklch, var(--primary) 74%, white);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
}

.layout.is-story-focused .panel-story-studio > h2 {
  margin-bottom: 8px;
}

.layout.is-story-focused .panel-story-studio {
  gap: 20px;
  padding: 22px;
}

.layout.is-story-focused .story-intro {
  max-width: 34ch;
  margin-top: 0;
  font-size: 0.72rem;
  line-height: 1.42;
}

.layout.is-story-focused .story-shell-top {
  grid-template-columns: minmax(0, 1.62fr) minmax(248px, 0.5fr);
  gap: 16px;
}

.layout.is-story-focused .story-shell-top.is-prerun {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell {
  width: 100%;
  max-width: none;
}

.layout.is-story-focused .story-shell-top.is-prerun .story-compose-status,
.layout.is-story-focused .story-shell-top.is-prerun .story-flow-strip {
  display: none;
}

.layout.is-story-focused .story-compose-shell {
  gap: 14px;
  padding: 20px 22px 18px;
  border-radius: 22px;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal {
  margin-top: 2px;
  padding: 0;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  padding-bottom: 0;
  border-bottom: 0;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.18;
  color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title {
  font-size: 0.88rem;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description {
  display: none;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head .status-pill {
  display: none;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding-top: 0;
  border-top: 0;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:not([hidden]):not(:last-child)::after {
  content: "";
  width: 1px;
  height: 12px;
  margin-left: 1px;
  background: color-mix(in oklch, var(--border-soft) 64%, transparent);
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label {
  font-size: 0.52rem;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value {
  font-size: 0.74rem;
  line-height: 1.16;
}

.layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-hint {
  display: none !important;
}

.layout.is-story-focused .story-compose-head {
  order: 0;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.48fr);
  gap: 10px 14px;
  align-items: start;
}

.layout.is-story-focused .story-compose-copy {
  gap: 6px;
}

.layout.is-story-focused .story-compose-copy h3 {
  max-width: 18ch;
  line-height: 1.06;
}

.layout.is-story-focused .story-compose-copy p {
  max-width: 48ch;
  font-size: 0.8rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.layout.is-story-focused .story-compose-status {
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px 8px;
  max-width: 24ch;
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.layout.is-story-focused .story-compose-status .status-pill {
  min-height: 24px;
  padding: 4px 9px;
  font-size: 0.62rem;
}

.layout.is-story-focused .story-compose-status p {
  max-width: none;
  font-size: 0.69rem;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1180px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell {
    gap: 16px;
    padding: 24px 28px 22px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head {
    gap: 12px 16px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy {
    gap: 8px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3 {
    max-width: 22ch;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p {
    max-width: 54ch;
    -webkit-line-clamp: 3;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail {
    gap: 10px 12px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-canvas {
    gap: 18px;
    padding: 26px 26px 22px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions {
    padding-top: 16px;
  }
}

.layout.is-story-focused .story-signal-strip {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.layout.is-story-focused .story-signal-card {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  gap: 7px;
  padding: 6px 10px;
  font-size: 0.6875rem;
  line-height: 1.24;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  background: color-mix(in oklch, var(--surface-control) 28%, transparent);
  background-size: auto;
  box-shadow: none;
}

.layout.is-story-focused .story-signal-label {
  font-size: 0.6875rem;
  line-height: 1.18;
  letter-spacing: 0.08em;
}

.layout.is-story-focused .story-signal-value {
  max-width: 15ch;
  font-size: 0.72rem;
  line-height: 1.3;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout.is-story-focused .story-mode-rail {
  order: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
  overflow: visible;
  gap: 8px 10px;
  padding-bottom: 0;
  align-items: stretch;
}

.layout.is-story-focused .story-mode-card {
  min-width: 0;
  min-height: 0;
  align-content: center;
  gap: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border-color: color-mix(in oklch, var(--border-soft) 64%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 42%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
}

.layout.is-story-focused .story-mode-card .story-mode-title {
  font-size: 0.74rem;
  line-height: 1.14;
  white-space: nowrap;
}

.layout.is-story-focused .story-mode-card.is-active {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-column: 1;
  min-width: 0;
  gap: 5px 11px;
  min-height: 0;
  padding: 13px 15px;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 7%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 8%, transparent);
}

.layout.is-story-focused .story-mode-card .story-mode-kicker,
.layout.is-story-focused .story-mode-card .story-mode-hint {
  display: none;
}

.layout.is-story-focused .story-mode-card.is-active .story-mode-title {
  grid-column: 2;
  font-size: 0.94rem;
  line-height: 1.1;
  white-space: normal;
}

.layout.is-story-focused .story-mode-card.is-active .story-mode-kicker,
.layout.is-story-focused .story-mode-card.is-active .story-mode-hint {
  display: block;
}

.layout.is-story-focused .story-mode-card.is-active .story-mode-kicker {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 64%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 44%, transparent);
  font-size: 0.6875rem;
  line-height: 1.14;
  letter-spacing: 0.08em;
}

.layout.is-story-focused .story-mode-card.is-active .story-mode-hint {
  grid-column: 2;
  font-size: 0.72rem;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.layout.is-story-focused .story-flow-strip {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.layout.is-story-focused .story-flow-step {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  align-items: center;
  gap: 7px;
  padding: 0 20px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.layout.is-story-focused .story-flow-step:not(:last-child)::after {
  content: ">";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  color: color-mix(in oklch, var(--foreground) 34%, var(--muted-foreground));
  font-size: 0.72rem;
}

.layout.is-story-focused .story-flow-step-copy {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.layout.is-story-focused .story-flow-step-copy strong {
  font-size: 0.72rem;
  white-space: nowrap;
}

.layout.is-story-focused .story-flow-step-copy p {
  display: none;
}

.layout.is-story-focused .story-flow-step-index {
  width: 20px;
  height: 20px;
  font-size: 0.6875rem;
}

.layout.is-story-focused .story-compose-canvas {
  order: 4;
  gap: 16px;
  padding: 24px 24px 21px;
  border-radius: 22px;
}

.layout.is-story-focused .story-compose-field {
  gap: 14px;
}

.layout.is-story-focused .story-compose-field .field-heading {
  align-items: start;
  justify-content: start;
  gap: 10px 18px;
}

.layout.is-story-focused .story-compose-field .field-heading > span:first-child {
  font-size: 1rem;
  line-height: 1.2;
}

.layout.is-story-focused .story-compose-field .field-inline-hint {
  max-width: 38ch;
  font-size: 0.74rem;
  line-height: 1.38;
  text-align: left;
}

.layout.is-story-focused .story-compose-field textarea {
  min-height: 228px;
  padding: 17px 18px 19px;
  border-radius: 20px;
  line-height: 1.76;
}

.layout.is-story-focused .story-compose-meta {
  align-items: flex-start;
  gap: 10px 16px;
}

.layout.is-story-focused .story-compose-preview {
  flex: 1 1 320px;
  max-width: 60ch;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.58;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.layout.is-story-focused .story-compose-preview[hidden] {
  display: none;
}

.layout.is-story-focused .story-compose-count {
  padding: 5px 9px;
  font-size: 0.7rem;
}

.layout.is-story-focused .story-compose-actions {
  gap: 12px 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 58%, transparent);
}

.layout.is-story-focused .story-compose-actions > #storyComposerSubmitBtn {
  min-width: 220px;
}

.layout.is-story-focused .story-compose-secondary-actions {
  align-items: center;
  gap: 8px 12px;
}

.layout.is-story-focused .story-compose-secondary-actions > #storyComposerTemplateBtn {
  min-height: 40px;
  padding: 0 15px;
}

.layout.is-story-focused .story-compose-secondary-actions > #storyComposerOpenLiveBtn {
  font-size: 0.76rem;
}

.layout.is-story-focused .story-tray-grid {
  order: 5;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 14px;
}

.layout.is-story-focused .story-tray {
  border-radius: 18px;
}

.layout.is-story-focused .story-tray > summary {
  gap: 8px 13px;
  padding: 13px 16px;
  min-height: 76px;
}

.layout.is-story-focused .story-tray[open] > summary {
  gap: 5px;
  padding-bottom: 10px;
}

.layout.is-story-focused .story-tray-title {
  font-size: 0.92rem;
}

.layout.is-story-focused .story-tray-hint {
  max-width: 28ch;
  font-size: 0.72rem;
  line-height: 1.36;
}

.layout.is-story-focused .story-tray-body {
  gap: 14px;
  padding: 12px 16px 18px;
}

.layout.is-story-focused .story-tray-section {
  gap: 14px;
  padding: 15px 16px;
  border-radius: 16px;
}

.layout.is-story-focused .story-tray-note-card {
  gap: 10px;
  padding: 15px 16px;
  border-radius: 16px;
  border-color: color-mix(in oklch, var(--border-soft) 68%, transparent);
}

.layout.is-story-focused .story-tray-section-head {
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 48%, transparent);
}

.layout.is-story-focused .story-tray-section-eyebrow {
  font-size: 0.6875rem;
  line-height: 1.28;
  letter-spacing: 0.12em;
}

.layout.is-story-focused .story-tray-section-copy {
  max-width: 40ch;
  font-size: 0.74rem;
  line-height: 1.5;
}

.layout.is-story-focused .story-tray-section-grid {
  gap: 10px 12px;
}

.layout.is-story-focused .story-mode-rail::-webkit-scrollbar {
  display: none;
}

.layout.is-story-focused .story-run-rail {
  gap: 8px;
  padding: 15px 15px 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 64%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(220px 96px at 0% -18%, color-mix(in oklch, var(--primary) 5%, transparent), transparent 78%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 58%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 10px 18px color-mix(in oklch, var(--shadow-color) 4%, transparent);
  top: 14px;
}

.layout.is-story-focused .story-run-rail[hidden] {
  display: none;
}

.layout.is-story-focused .story-run-rail.is-prerun .story-head-grid,
.layout.is-story-focused .story-run-rail.is-prerun .story-status-row-summary,
.layout.is-story-focused .story-run-rail.is-prerun .story-progress {
  display: none;
}

.layout.is-story-focused .story-run-rail.is-prerun .story-guidance {
  padding: 11px 12px;
}

.layout.is-story-focused .story-run-rail.is-prerun .story-guidance-hint {
  max-width: 32ch;
}

.layout.is-story-focused .story-run-rail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 10px;
}

.layout.is-story-focused .story-run-rail-head p {
  display: none;
}

.layout.is-story-focused .story-run-rail-head h3 {
  font-size: 1rem;
}

.layout.is-story-focused .story-run-rail .story-head-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.layout.is-story-focused .story-run-rail .story-stat-card {
  min-height: 0;
  gap: 4px;
  padding: 10px 11px;
  border-radius: 15px;
  border-color: color-mix(in oklch, var(--border-soft) 64%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 50%, transparent),
      color-mix(in oklch, var(--surface-panel) 92%, transparent)
    );
}

.layout.is-story-focused .story-run-rail .story-stat-card-title {
  grid-column: 1 / -1;
  gap: 3px;
  padding: 11px 12px;
}

.layout.is-story-focused .story-run-rail:not(.is-idle) .story-stat-card-title {
  border-color: color-mix(in oklch, var(--border-soft) 52%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 36%, transparent),
      color-mix(in oklch, var(--surface-panel) 88%, transparent)
    );
}

.layout.is-story-focused .story-run-rail .story-stat-label {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  line-height: 1.18;
  white-space: nowrap;
}

.layout.is-story-focused .story-run-rail .story-stat-value {
  font-size: 1rem;
  line-height: 1.24;
}

.layout.is-story-focused .story-run-rail .story-stat-note {
  font-size: 0.69rem;
  line-height: 1.34;
}

.layout.is-story-focused .story-run-rail .story-inline-metric {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.layout.is-story-focused .story-run-rail .story-inline-metric-label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 62%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 60%, transparent);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.24;
}

.layout.is-story-focused .story-run-rail .story-inline-metric-value {
  font-size: 0.76rem;
}

.layout.is-story-focused .story-run-rail .story-status-row-summary {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.layout.is-story-focused .story-run-rail .story-status-row-summary .status-pill {
  width: auto;
  min-height: 22px;
  min-width: 0;
  padding: 3px 7px;
  font-size: 0.6875rem;
  justify-content: flex-start;
  border-color: color-mix(in oklch, var(--border-soft) 62%, transparent);
  background: color-mix(in oklch, var(--surface-control) 58%, transparent);
}

.layout.is-story-focused .story-run-rail.is-ready .story-status-row-summary {
  display: none;
}

.layout.is-story-focused .story-run-rail.is-ready #storyTimelineProgressHint {
  display: none;
}

.layout.is-story-focused .story-run-rail .story-progress {
  margin-top: 0;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.layout.is-story-focused .story-run-rail.is-idle .story-progress {
  display: none;
}

.layout.is-story-focused .story-run-rail.is-ready .story-progress {
  display: none;
}

.layout.is-story-focused .story-run-rail.is-error .story-progress {
  display: none;
}

.layout.is-story-focused .story-run-rail .story-progress-head {
  font-size: 0.6875rem;
  line-height: 1.28;
}

.layout.is-story-focused .story-run-rail .story-progress-track {
  height: 10px;
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
}

.layout.is-story-focused .story-run-rail .story-guidance {
  margin-top: 0;
  padding: 10px 11px;
  border-radius: 15px;
  border-style: dashed;
  border-color: color-mix(in oklch, var(--border-soft) 62%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 52%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
}

.layout.is-story-focused .story-run-rail.is-error .story-guidance {
  padding: 8px 0 0;
  border: 0;
  border-top: 1px dashed color-mix(in oklch, oklch(0.68 0.1 28) 20%, var(--border-soft));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.layout.is-story-focused .story-run-rail.is-error .story-guidance-copy {
  gap: 4px;
}

.layout.is-story-focused .story-run-rail.is-error .story-guidance-title {
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
}

.layout.is-story-focused .story-run-rail.is-error .story-guidance-hint {
  max-width: 34ch;
  color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
}

.layout.is-story-focused .story-run-rail.is-error .story-stat-card {
  gap: 2px;
  padding: 8px 0 9px;
  border: 0;
  border-top: 1px solid color-mix(in oklch, oklch(0.68 0.08 28) 16%, var(--border-soft));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.layout.is-story-focused .story-run-rail.is-error .story-status-row-summary .status-pill {
  border-color: color-mix(in oklch, oklch(0.68 0.08 28) 14%, var(--border-soft));
  background: color-mix(in oklch, var(--surface-control) 40%, transparent);
}

.layout.is-story-focused .story-run-rail .story-guidance-chip {
  display: none;
}

.layout.is-story-focused .story-run-rail .story-guidance-copy {
  gap: 3px;
}

.layout.is-story-focused .story-run-rail .story-guidance-title {
  font-size: 0.78rem;
  line-height: 1.24;
}

.layout.is-story-focused .story-run-rail .story-guidance-hint {
  max-width: 28ch;
  font-size: 0.7rem;
  line-height: 1.38;
}

.layout.is-story-focused .story-run-rail .story-guidance-actions {
  flex: 0 0 auto;
  gap: 4px;
  justify-content: flex-start;
}

.layout.is-story-focused .story-run-rail #storyTimelineGuideTemplateBtn {
  display: none;
}

.layout.is-story-focused .story-run-rail #storyTimelineGuideOpenLiveBtn {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
  justify-content: flex-start;
  box-shadow: none;
}

.layout.is-story-focused .story-run-rail #storyTimelineGuideOpenLiveBtn:hover {
  color: color-mix(in oklch, var(--foreground) 92%, var(--accent-foreground));
  background: transparent;
}

.layout.is-story-focused .story-latest-output-shell .story-section-head,
.layout.is-story-focused .story-preview-shell .story-section-head,
.layout.is-story-focused .story-atlas-shell-head {
  gap: 4px;
}

.layout.is-story-focused .story-latest-output-shell .story-section-head h3,
.layout.is-story-focused .story-preview-shell .story-section-head h3,
.layout.is-story-focused .story-atlas-shell-head h3,
.layout.is-story-focused .story-scenes-shell .story-list-head-copy h3 {
  font-size: 1rem;
  line-height: 1.08;
}

.layout.is-story-focused .story-latest-output-shell .story-section-head p,
.layout.is-story-focused .story-preview-shell .story-section-head p,
.layout.is-story-focused .story-atlas-shell-head p,
.layout.is-story-focused .story-scenes-shell .story-list-head-summary {
  display: none;
}

.layout.is-story-focused .story-latest-output-meta {
  font-size: 0.74rem;
  line-height: 1.42;
}

.layout.is-story-focused .story-results-secondary {
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(220px 96px at 0% 0%, color-mix(in oklch, var(--primary) 5%, transparent), transparent 78%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 62%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 10px 18px -24px color-mix(in oklch, var(--shadow-color) 24%, transparent);
}

.layout.is-story-focused .story-atlas-rail {
  gap: 6px;
  padding: 2px 0 0;
  scrollbar-width: none;
}

.layout.is-story-focused .story-atlas-rail::-webkit-scrollbar {
  display: none;
}

.layout.is-story-focused .story-atlas-tab {
  flex: 1 1 0;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 14px;
  border-color: color-mix(in oklch, var(--border-soft) 64%, transparent);
  background: color-mix(in oklch, var(--surface-control) 54%, transparent);
}

.layout.is-story-focused .story-atlas-tab.is-active {
  transform: none;
  border-color: color-mix(in oklch, var(--primary) 22%, var(--border-soft));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 64%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
  box-shadow: none;
}

.layout.is-story-focused .story-atlas-tab-label {
  font-size: 0.69rem;
  line-height: 1.22;
}

.layout.is-story-focused .story-atlas-tab-hint {
  font-size: 0.6875rem;
  line-height: 1.28;
}

.layout.is-story-focused .story-results-secondary .story-atlas-card {
  min-height: 0;
  gap: 6px;
  padding: 12px 12px 13px;
  border-radius: 18px;
  border-color: color-mix(in oklch, var(--border-soft) 68%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 54%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
}

.layout.is-story-focused .story-results-secondary .story-atlas-meta {
  display: none;
}

.layout.is-story-focused .story-results-secondary .story-atlas-head {
  gap: 3px;
}

.layout.is-story-focused .story-results-secondary .story-atlas-head h3 {
  font-size: 0.96rem;
  line-height: 1.14;
}

.layout.is-story-focused .story-results-secondary .story-atlas-head p {
  font-size: 0.78rem;
  line-height: 1.42;
}

.layout.is-story-focused .story-results-secondary .story-atlas-tags {
  gap: 5px;
}

.layout.is-story-focused .story-results-secondary .story-atlas-tag {
  min-height: 22px;
  padding: 3px 7px;
  font-size: 0.6875rem;
  line-height: 1.28;
  white-space: nowrap;
}

.layout.is-story-focused .story-results-secondary .story-atlas-metrics {
  gap: 5px 7px;
  margin-top: 0;
  padding-top: 5px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 60%, transparent);
}

.layout.is-story-focused .story-results-secondary .story-atlas-metric {
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 58%, transparent);
}

.layout.is-story-focused .story-results-secondary .story-atlas-metric.is-empty {
  opacity: 0.36;
  background: transparent;
}

.layout.is-story-focused .story-results-secondary .story-atlas-metric span {
  font-size: 0.6875rem;
  line-height: 1.24;
}

.layout.is-story-focused .story-results-secondary .story-atlas-metric strong {
  font-size: 0.8rem;
}

.layout.is-story-focused .story-scenes-shell {
  gap: 10px;
  padding: 18px 19px 19px;
}

.layout.is-story-focused .story-scenes-shell .story-list-head {
  padding-bottom: 8px;
  gap: 6px;
}

.layout.is-story-focused .story-scenes-shell .story-list-head-copy {
  gap: 2px;
}

.layout.is-story-focused .story-latest-output-shell.is-empty .story-output-stage {
  grid-template-columns: minmax(0, 1fr) minmax(256px, 0.74fr);
  gap: 12px;
}

.layout.is-story-focused .story-latest-output-shell.is-empty .story-output-main {
  gap: 10px;
}

.layout.is-story-focused .story-latest-output-shell.is-empty .story-output-body-card {
  padding: 14px 15px;
}

.layout.is-story-focused .story-latest-output-shell.is-empty .story-output-side {
  display: grid;
  gap: 0;
  overflow: visible;
}

.layout.is-story-focused .story-latest-output-shell.is-empty .story-output-side-card-idle {
  min-height: 100%;
}

.layout.is-story-focused .story-latest-output-shell.is-empty .story-output-body-text {
  max-height: none;
}

.layout.is-story-focused .story-output-stage {
  grid-template-columns: minmax(0, 1.16fr) minmax(228px, 0.84fr);
  gap: 14px;
}

.layout.is-story-focused .story-output-title {
  max-width: 16ch;
  font-size: clamp(1.08rem, 0.94rem + 0.54vw, 1.32rem);
}

.layout.is-story-focused .story-output-summary {
  max-width: 54ch;
  font-size: 0.88rem;
  line-height: 1.5;
}

.layout.is-story-focused .story-output-body-card-main {
  gap: 12px;
}

.layout.is-story-focused .story-output-support-card {
  gap: 4px;
  padding: 10px 11px;
}

.layout.is-story-focused .story-output-cue-strip {
  gap: 6px;
}

.layout.is-story-focused .story-output-dossier-section {
  gap: 6px;
}

.layout.is-story-focused .story-output-dossier-note {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.layout.is-story-focused .story-output-cue-pill {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 0.6875rem;
  line-height: 1.28;
  white-space: nowrap;
}

.layout.is-story-focused .story-timeline-preview-empty .story-empty-state {
  place-items: start;
  gap: 12px;
  padding: 20px;
  text-align: left;
}

.layout.is-story-focused .story-timeline-preview-empty .story-empty-intro {
  width: 100%;
  gap: 8px;
}

.layout.is-story-focused .story-timeline-preview-empty .story-empty-title,
.layout.is-story-focused .story-timeline-preview-empty .story-empty-lead,
.layout.is-story-focused .story-timeline-preview-empty .story-empty-hint,
.layout.is-story-focused .story-timeline-preview-empty .story-empty-cta-note {
  max-width: 58ch;
}

.layout.is-story-focused .story-timeline-preview-empty .story-empty-support {
  width: 100%;
}

.layout.is-story-focused .story-preview-support-card {
  gap: 6px;
}

.layout.is-story-focused .story-preview-title {
  max-width: 16ch;
  font-size: clamp(1.1rem, 0.96rem + 0.52vw, 1.3rem);
}

.layout.is-story-focused .story-preview-summary {
  max-width: 48ch;
  font-size: 0.88rem;
  line-height: 1.48;
}

.layout.is-story-focused .story-preview-copy-card-main {
  gap: 9px;
}

.layout.is-story-focused .story-preview-support-strip {
  gap: 8px;
}

.layout.is-story-focused .story-preview-summary-item {
  gap: 4px;
}

.layout.is-story-focused .story-preview-summary-item p {
  display: none;
}

.layout.is-story-focused .story-bottom-grid {
  position: relative;
  grid-template-columns: minmax(220px, 0.56fr) minmax(0, 1.44fr);
  gap: 18px;
  align-items: start;
  padding: 18px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(340px 136px at 0% 0%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 98%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 18px 36px -34px color-mix(in oklch, var(--shadow-color) 30%, transparent);
}

.layout.is-story-focused .story-bottom-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(220px 140px at 100% 0%, color-mix(in oklch, var(--accent-foreground) 6%, transparent), transparent 78%),
    linear-gradient(180deg, color-mix(in oklch, var(--foreground) 2%, transparent), transparent 18%);
}

.layout.is-story-focused .story-bottom-grid > * {
  position: relative;
  z-index: 1;
}

.layout.is-story-focused .story-bottom-grid > .story-controls,
.layout.is-story-focused .story-bottom-grid > .story-scenes-shell {
  align-self: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.layout.is-story-focused .story-controls {
  gap: 12px;
  padding-right: 18px;
}

.layout.is-story-focused .story-controls .story-section-head {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
}

.layout.is-story-focused .story-controls .story-section-head p {
  display: none;
}

.layout.is-story-focused .story-controls .story-section-head h3 {
  font-size: 1rem;
}

.layout.is-story-focused .story-controls-grid {
  grid-template-columns: minmax(0, 1fr) minmax(144px, 0.72fr);
  gap: 10px;
}

.layout.is-story-focused .story-controls-grid .field:first-child {
  grid-column: 1 / -1;
}

.layout.is-story-focused .story-controls-grid .field {
  min-height: 0;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
}

.layout.is-story-focused .story-controls-grid .field > span {
  font-size: 0.6875rem;
  line-height: 1.28;
  letter-spacing: 0.12em;
}

.layout.is-story-focused .story-controls-grid #storyTimelinePosition.meta-box {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 0.8rem;
}

.layout.is-story-focused .story-controls-hint {
  min-height: 0;
  padding: 10px 12px;
  border-radius: 16px;
  border-style: dashed;
  background: color-mix(in oklch, var(--surface-control) 42%, transparent);
  font-size: 0.76rem;
  line-height: 1.42;
}

.layout.is-story-focused .story-scenes-shell {
  gap: 12px;
  padding: 0 0 0 18px;
  border-left: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
}

.layout.is-story-focused .story-scenes-shell .story-list-head {
  margin-top: 0;
  padding: 0 0 10px;
  align-items: end;
  border: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  border-radius: 0;
  background: transparent;
}

.layout.is-story-focused .story-scenes-shell .story-list-head-copy {
  gap: 4px;
}

.layout.is-story-focused .story-scenes-shell .story-list-head-summary {
  max-width: 50ch;
  font-size: 0.78rem;
  line-height: 1.42;
}

.layout.is-story-focused .story-scenes-shell .story-list-head .status-pill {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 0.67rem;
}

.layout.is-story-focused .story-scenes-shell .story-timeline-list {
  max-height: none;
  min-height: 0;
  overflow: visible;
  gap: 12px;
}

.layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
.layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: stretch;
  gap: 10px;
  padding: 2px 0 4px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list::-webkit-scrollbar,
.layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list::-webkit-scrollbar {
  display: none;
}

.layout.is-story-focused .story-segment-card {
  flex: 0 0 clamp(212px, 18vw, 236px);
  min-height: 166px;
  gap: 7px;
  padding: 14px;
  border-radius: 20px;
  scroll-snap-align: start;
  background:
    radial-gradient(220px 88px at 100% -16%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 78%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.layout.is-story-focused .story-segment-card.is-selected {
  flex-basis: clamp(248px, 22vw, 288px);
  min-height: 176px;
}

.layout.is-story-focused .story-segment-head {
  align-items: center;
}

.layout.is-story-focused .story-segment-index {
  min-height: 24px;
  padding: 4px 9px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  line-height: 1.18;
}

.layout.is-story-focused .story-segment-state {
  min-height: 24px;
  padding: 4px 9px;
  font-size: 0.6875rem;
  line-height: 1.18;
}

.layout.is-story-focused .story-segment-title {
  font-size: 0.92rem;
  line-height: 1.28;
}

.layout.is-story-focused .story-segment-text {
  font-size: 0.79rem;
  line-height: 1.48;
  -webkit-line-clamp: 3;
}

.layout.is-story-focused .story-segment-cues {
  gap: 6px;
}

.layout.is-story-focused .story-segment-footer {
  gap: 7px;
}

.layout.is-story-focused .story-segment-cue {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 0.6875rem;
  line-height: 1.26;
  white-space: nowrap;
}

.layout.is-story-focused .story-segment-meta {
  font-size: 0.7rem;
  line-height: 1.4;
}

.layout.is-story-focused .story-scenes-shell.is-idle .story-timeline-list-empty {
  gap: 14px;
  padding: 18px 18px 16px;
  border-style: solid;
  border-color: color-mix(in oklch, var(--border-soft) 74%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(260px 110px at 10% -12%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 70%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
}

.layout.is-story-focused .story-scenes-shell.is-idle .story-timeline-list-empty::before {
  opacity: 0.38;
}

.layout.is-story-focused .story-scenes-shell.is-idle .story-timeline-list-empty-main {
  gap: 10px;
}

.layout.is-story-focused .story-scenes-shell.is-idle .story-timeline-list-empty-title {
  font-size: 0.96rem;
}

.layout.is-story-focused .story-scenes-shell.is-idle .story-timeline-list-empty-hint,
.layout.is-story-focused .story-scenes-shell.is-idle .story-timeline-list-empty-board-note,
.layout.is-story-focused .story-scenes-shell.is-idle .story-timeline-list-empty-cta {
  font-size: 0.76rem;
  line-height: 1.44;
}

.layout.is-story-focused .story-scenes-shell.is-idle .story-timeline-list-empty-board {
  gap: 10px;
  padding: 12px 14px;
}

.layout.is-story-focused .story-results-grid {
  gap: 18px;
}

.layout.is-story-focused .story-results-grid.is-output-only {
  grid-template-columns: minmax(0, 1fr);
}

.layout.is-story-focused .story-results-primary {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 84%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(340px 140px at 0% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 76%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-panel) 98%, transparent),
      color-mix(in oklch, var(--surface-panel-2) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 18px 36px -34px color-mix(in oklch, var(--shadow-color) 30%, transparent);
}

.layout.is-story-focused .story-results-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(220px 140px at 100% 0%, color-mix(in oklch, var(--accent-foreground) 7%, transparent), transparent 78%),
    linear-gradient(180deg, color-mix(in oklch, var(--foreground) 2%, transparent), transparent 18%);
}

.layout.is-story-focused .story-results-primary > * {
  position: relative;
  z-index: 1;
}

.layout.is-story-focused .story-results-primary.is-output-only {
  gap: 0;
}

.layout.is-story-focused .story-results-primary > .story-latest-output-shell,
.layout.is-story-focused .story-results-primary > .story-preview-shell {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.layout.is-story-focused .story-results-primary > .story-latest-output-shell {
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 76%, transparent);
}

.layout.is-story-focused .story-results-primary.is-output-only > .story-latest-output-shell {
  padding-bottom: 0;
  border-bottom: 0;
}

.layout.is-story-focused .story-results-primary .story-section-head {
  gap: 4px;
}

.layout.is-story-focused .story-results-primary .story-section-head-compact {
  margin-bottom: 0;
}

.layout.is-story-focused .story-results-primary .story-section-eyebrow {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 0.6875rem;
  line-height: 1.18;
  letter-spacing: 0.14em;
}

.layout.is-story-focused .story-results-primary .story-latest-output-meta {
  font-size: 0.72rem;
  line-height: 1.38;
}

.layout.is-story-focused .story-results-primary .story-latest-output-body,
.layout.is-story-focused .story-results-primary .story-preview-stage {
  border-radius: 20px;
}

.layout.is-story-focused .story-results-primary .story-latest-output-body {
  padding: 16px 16px 18px;
  gap: 14px;
}

.layout.is-story-focused .story-results-primary .story-preview-stage {
  min-height: 0;
  padding: 18px;
  gap: 12px;
}

.layout.is-story-focused .story-results-primary .story-preview-copy {
  gap: 8px;
}

.layout.is-story-focused .story-results-primary .story-preview-copy-card-main,
.layout.is-story-focused .story-results-primary .story-output-body-card-main {
  gap: 9px;
}

@media (max-width: 980px) {
  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
  }

  .layout.is-story-focused .story-controls {
    padding: 0 0 12px;
    border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  }

  .layout.is-story-focused .story-scenes-shell {
    padding: 2px 0 0;
    border-left: 0;
  }

  .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
  .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .layout.is-story-focused .hero {
    gap: 10px;
  }

  .layout.is-story-focused .hero-sub {
    display: none;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal {
    margin-top: 6px;
    padding: 0;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding-bottom: 0;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-description,
  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta {
    display: none;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title {
    font-size: 0.88rem;
  }

  .dashboard-body.is-story-focused {
    gap: 10px;
  }

  .layout.is-story-focused .story-controls {
    padding-bottom: 10px;
  }

  .layout.is-story-focused .story-controls .story-section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .layout.is-story-focused .story-controls-grid {
    grid-template-columns: 1fr;
  }

  .layout.is-story-focused .story-controls-grid .field:first-child {
    grid-column: auto;
  }

  .layout.is-story-focused .story-scenes-shell {
    padding-top: 0;
  }

  .layout.is-story-focused .story-results-primary {
    padding: 14px;
    gap: 10px;
    border-radius: 22px;
  }

  .layout.is-story-focused .story-results-primary > .story-latest-output-shell {
    padding-bottom: 10px;
  }

  .layout.is-story-focused .story-results-primary .story-latest-output-body,
  .layout.is-story-focused .story-results-primary .story-preview-stage {
    padding: 14px;
    border-radius: 18px;
  }

  .layout.is-story-focused .story-scenes-shell .story-list-head {
    align-items: flex-start;
    gap: 8px;
  }

  .layout.is-story-focused .story-scenes-shell.is-idle .story-timeline-list-empty-preview {
    grid-template-columns: 1fr;
  }

  .layout.is-story-focused .story-segment-card {
    min-height: 0;
    flex-basis: min(80vw, 228px);
  }

  .layout.is-story-focused .story-segment-card.is-selected {
    flex-basis: min(88vw, 272px);
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-width: none;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav::-webkit-scrollbar,
  .layout.is-story-focused .story-signal-strip::-webkit-scrollbar,
  .layout.is-story-focused .story-mode-rail::-webkit-scrollbar,
  .layout.is-story-focused .story-flow-strip::-webkit-scrollbar {
    display: none;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 42px;
    padding: 9px 12px;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid color-mix(in oklch, var(--border-soft) 70%, transparent);
    background: color-mix(in oklch, var(--surface-control) 62%, transparent);
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active {
    background:
      radial-gradient(160px 60px at 0% 0%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 78%),
      color-mix(in oklch, var(--surface-control) 74%, transparent);
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav-icon {
    display: none;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav-copy {
    display: inline-flex;
    align-items: center;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav-title {
    font-size: 0.75rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  .dashboard-body.is-story-focused {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar.is-story-focused {
    position: static;
    top: auto;
  }

  .layout.is-story-focused .panel-story-studio {
    gap: 16px;
    padding: 16px;
  }

  .layout.is-story-focused .story-intro {
    display: none;
  }

  .layout.is-story-focused .story-shell-top {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .layout.is-story-focused .story-compose-shell {
    gap: 14px;
  }

  .layout.is-story-focused .story-compose-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .layout.is-story-focused .story-compose-copy {
    gap: 8px;
  }

  .layout.is-story-focused .story-compose-copy h3 {
    font-size: 1.02rem;
  }

  .layout.is-story-focused .story-compose-copy p {
    max-width: none;
    font-size: 0.74rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .layout.is-story-focused .story-compose-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: none;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-compose-status p {
    max-width: 22ch;
    font-size: 0.72rem;
    line-height: 1.36;
  }

  .layout.is-story-focused .story-signal-strip {
    order: 2;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 7px;
    padding-bottom: 2px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .layout.is-story-focused .story-signal-card {
    flex: 0 0 156px;
    scroll-snap-align: start;
    min-height: 0;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  .layout.is-story-focused .story-signal-card strong {
    font-size: 0.76rem;
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .layout.is-story-focused .story-signal-card span {
    font-size: 0.62rem;
  }

  .layout.is-story-focused .story-tray > summary {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 7px;
    padding: 13px 15px;
  }

  .layout.is-story-focused .story-tray-grid {
    grid-template-columns: 1fr;
  }

  .story-tray-section-grid {
    grid-template-columns: 1fr;
  }

  .story-tray-section-compact {
    max-width: none;
  }

  .layout.is-story-focused .story-tray > summary::after {
    display: none;
  }

  .layout.is-story-focused .story-tray-summary {
    justify-items: start;
    padding-right: 0;
    text-align: left;
  }

  .layout.is-story-focused .story-tray-summary-text {
    max-width: none;
    font-size: 0.74rem;
    -webkit-line-clamp: 3;
  }

  .layout.is-story-focused .story-tray-summary-meta {
    justify-content: flex-start;
  }

  .layout.is-story-focused .story-tray-summary-meta .story-atlas-tag {
    min-height: 22px;
    padding: 4px 7px;
    font-size: 0.6875rem;
  }

  .layout.is-story-focused .story-compose-actions {
    padding-top: 10px;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .layout.is-story-focused .story-compose-actions > #storyComposerSubmitBtn {
    min-width: 0;
  }

  .layout.is-story-focused .story-compose-secondary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .layout.is-story-focused .story-mode-rail {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    gap: 6px;
    padding-bottom: 0;
  }

  .layout.is-story-focused .story-mode-card {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 0;
    padding: 8px 11px;
    border-radius: 999px;
  }

  .layout.is-story-focused .story-mode-card .story-mode-kicker,
  .layout.is-story-focused .story-mode-card .story-mode-hint {
    display: none;
  }

  .layout.is-story-focused .story-mode-card.is-active {
    flex: 1 1 100%;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .layout.is-story-focused .story-mode-card.is-active .story-mode-kicker,
  .layout.is-story-focused .story-mode-card.is-active .story-mode-hint {
    display: block;
  }

  .layout.is-story-focused .story-mode-card .story-mode-title {
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-mode-card.is-active .story-mode-title {
    white-space: normal;
  }

  .layout.is-story-focused .story-mode-card.is-active .story-mode-hint {
    font-size: 0.71rem;
    line-height: 1.36;
  }

  .layout.is-story-focused .story-flow-strip {
    order: 3;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .layout.is-story-focused .story-flow-step {
    flex: 0 0 auto;
    min-width: max-content;
    grid-template-columns: auto auto;
    align-items: center;
    min-height: 0;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 999px;
  }

  .layout.is-story-focused .story-flow-step-copy {
    display: inline-flex;
    align-items: center;
  }

  .layout.is-story-focused .story-flow-step-copy strong {
    font-size: 0.74rem;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-flow-step-copy p {
    display: none;
  }

  .layout.is-story-focused .story-flow-step-index {
    width: 20px;
    height: 20px;
    font-size: 0.66rem;
  }

  .layout.is-story-focused .story-compose-canvas {
    order: 4;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
  }

  .layout.is-story-focused .story-compose-field .field-heading {
    display: grid;
    justify-content: start;
    gap: 6px;
  }

  .layout.is-story-focused .story-compose-field textarea {
    min-height: 180px;
    font-size: 0.94rem;
    line-height: 1.62;
  }

  .layout.is-story-focused .story-compose-meta {
    gap: 8px;
  }

  .layout.is-story-focused .story-compose-preview {
    flex-basis: 100%;
    font-size: 0.69rem;
    line-height: 1.48;
  }

  .layout.is-story-focused .story-compose-count {
    padding: 5px 9px;
    font-size: 0.71rem;
  }

  .layout.is-story-focused .story-compose-actions {
    gap: 8px;
  }

  .layout.is-story-focused .story-run-rail {
    gap: 10px;
    padding: 16px;
    border-radius: 20px;
  }

  .layout.is-story-focused .story-run-rail-head {
    gap: 6px;
  }

  .layout.is-story-focused .story-run-rail-head p {
    display: none;
  }

  .layout.is-story-focused .story-run-rail .story-head-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 8px;
    padding-bottom: 0;
    scrollbar-width: auto;
    scroll-snap-type: none;
  }

  .layout.is-story-focused .story-run-rail .story-status-row-summary {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    gap: 6px;
    padding-bottom: 0;
    scrollbar-width: none;
    scroll-snap-type: none;
  }

  .layout.is-story-focused .story-atlas-rail {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .layout.is-story-focused .story-run-rail .story-head-grid .story-stat-card {
    min-width: 0;
  }

  .layout.is-story-focused .story-run-rail .story-head-grid .story-stat-card {
    min-height: 0;
    padding: 12px 13px;
    border-radius: 16px;
  }

  .layout.is-story-focused .story-run-rail.is-idle .story-head-grid .story-stat-card-title {
    display: none;
  }

  .layout.is-story-focused .story-run-rail .story-status-row-summary .status-pill {
    width: auto;
    min-width: max-content;
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .layout.is-story-focused .story-run-rail .story-progress {
    padding: 10px 11px;
    border-radius: 16px;
  }

  .layout.is-story-focused .story-run-rail.is-ready .story-status-row-summary,
  .layout.is-story-focused .story-run-rail.is-ready .story-progress {
    display: none;
  }

  .layout.is-story-focused .story-run-rail.is-idle .story-progress {
    display: none;
  }

  .layout.is-story-focused .story-run-rail .story-guidance {
    padding: 12px 13px;
    border-radius: 16px;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-title {
    font-size: 0.84rem;
    line-height: 1.3;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-hint {
    font-size: 0.72rem;
    line-height: 1.42;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-actions {
    gap: 6px;
  }

.layout.is-story-focused .story-results-grid {
  gap: 18px;
}

.layout.is-story-focused .story-latest-output-shell .story-section-head,
.layout.is-story-focused .story-preview-shell .story-section-head,
.layout.is-story-focused .story-atlas-shell-head {
  gap: 6px;
}

.layout.is-story-focused .story-latest-output-shell .story-section-head h3,
.layout.is-story-focused .story-preview-shell .story-section-head h3,
.layout.is-story-focused .story-atlas-shell-head h3,
.layout.is-story-focused .story-scenes-shell .story-list-head-copy h3 {
  font-size: 1rem;
  line-height: 1.08;
}

.layout.is-story-focused .story-latest-output-shell .story-section-head p,
.layout.is-story-focused .story-preview-shell .story-section-head p,
.layout.is-story-focused .story-atlas-shell-head p,
.layout.is-story-focused .story-scenes-shell .story-list-head-summary {
  display: none;
}

.layout.is-story-focused .story-latest-output-meta {
  font-size: 0.74rem;
  line-height: 1.42;
}

.layout.is-story-focused .story-results-secondary {
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(220px 96px at 0% 0%, color-mix(in oklch, var(--primary) 5%, transparent), transparent 78%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 62%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
    0 10px 18px -24px color-mix(in oklch, var(--shadow-color) 24%, transparent);
}

.layout.is-story-focused .story-atlas-rail {
  gap: 6px;
  padding: 2px 0 0;
  scrollbar-width: none;
}

.layout.is-story-focused .story-atlas-rail::-webkit-scrollbar {
  display: none;
}

.layout.is-story-focused .story-atlas-tab {
  flex: 1 1 0;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 14px;
  border-color: color-mix(in oklch, var(--border-soft) 64%, transparent);
  background: color-mix(in oklch, var(--surface-control) 54%, transparent);
}

.layout.is-story-focused .story-atlas-tab.is-active {
  transform: none;
  border-color: color-mix(in oklch, var(--primary) 22%, var(--border-soft));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 64%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
  box-shadow: none;
}

.layout.is-story-focused .story-atlas-tab-label {
  font-size: 0.69rem;
  line-height: 1.22;
}

.layout.is-story-focused .story-atlas-tab-hint {
  font-size: 0.6875rem;
  line-height: 1.28;
}

.layout.is-story-focused .story-results-secondary .story-atlas-card {
  min-height: 0;
  gap: 6px;
  padding: 12px 12px 13px;
  border-radius: 18px;
  border-color: color-mix(in oklch, var(--border-soft) 68%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 54%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
}

.layout.is-story-focused .story-results-secondary .story-atlas-meta {
  display: none;
}

.layout.is-story-focused .story-results-secondary .story-atlas-head {
  gap: 3px;
}

.layout.is-story-focused .story-results-secondary .story-atlas-head h3 {
  font-size: 0.96rem;
  line-height: 1.14;
}

.layout.is-story-focused .story-results-secondary .story-atlas-head p {
  font-size: 0.78rem;
  line-height: 1.42;
}

.layout.is-story-focused .story-results-secondary .story-atlas-tags {
  gap: 5px;
}

.layout.is-story-focused .story-results-secondary .story-atlas-tag {
  min-height: 22px;
  padding: 3px 7px;
  font-size: 0.6875rem;
  line-height: 1.28;
  white-space: nowrap;
}

.layout.is-story-focused .story-results-secondary .story-atlas-metrics {
  gap: 4px;
  margin-top: 0;
  padding-top: 4px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 60%, transparent);
}

.layout.is-story-focused .story-results-secondary .story-atlas-metric {
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 58%, transparent);
}

.layout.is-story-focused .story-results-secondary .story-atlas-metric.is-empty {
  opacity: 0.36;
  background: transparent;
}

.layout.is-story-focused .story-results-secondary .story-atlas-metric span {
  font-size: 0.6875rem;
  line-height: 1.24;
}

.layout.is-story-focused .story-results-secondary .story-atlas-metric strong {
  font-size: 0.8rem;
}

.layout.is-story-focused .story-latest-output-shell,
.layout.is-story-focused .story-preview-shell {
  gap: 10px;
}

.layout.is-story-focused .story-scenes-shell {
  gap: 10px;
  padding: 18px 19px 19px;
}

.layout.is-story-focused .story-scenes-shell .story-list-head {
  padding-bottom: 8px;
  gap: 6px;
}

.layout.is-story-focused .story-scenes-shell .story-list-head-copy {
  gap: 2px;
}

  .layout.is-story-focused .story-latest-output-shell.is-empty .story-output-stage {
    grid-template-columns: 1fr;
  }

.layout.is-story-focused .story-output-stage {
    grid-template-columns: minmax(0, 1.18fr) minmax(220px, 0.82fr);
    gap: 12px;
  }

  .layout.is-story-focused .story-output-main {
    gap: 11px;
  }

  .layout.is-story-focused .story-output-side,
  .layout.is-story-focused .story-output-variants-grid,
  .layout.is-story-focused .story-preview-rail,
  .layout.is-story-focused .story-empty-kpis,
  .layout.is-story-focused .story-empty-checklist,
  .layout.is-story-focused .story-empty-arc {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .layout.is-story-focused .story-output-side::-webkit-scrollbar,
  .layout.is-story-focused .story-output-variants-grid::-webkit-scrollbar,
  .layout.is-story-focused .story-preview-rail::-webkit-scrollbar,
  .layout.is-story-focused .story-empty-kpis::-webkit-scrollbar,
  .layout.is-story-focused .story-empty-checklist::-webkit-scrollbar,
  .layout.is-story-focused .story-empty-arc::-webkit-scrollbar {
    display: none;
  }

  .layout.is-story-focused .story-output-side-card,
  .layout.is-story-focused .story-output-variant-card,
  .layout.is-story-focused .story-preview-rail-card,
  .layout.is-story-focused .story-preview-stage .story-preview-assets,
  .layout.is-story-focused .story-empty-kpi,
  .layout.is-story-focused .story-empty-checklist li,
  .layout.is-story-focused .story-empty-arc li {
    flex: 0 0 214px;
    min-width: 0;
    scroll-snap-align: start;
  }

.layout.is-story-focused .story-output-side-card-dossier {
  flex-basis: 228px;
}

.layout.is-story-focused .story-latest-output-shell.is-empty .story-output-side {
  display: grid;
}

.layout.is-story-focused .story-output-support-strip {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 2px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.layout.is-story-focused .story-output-support-strip::-webkit-scrollbar {
  display: none;
}

.layout.is-story-focused .story-output-support-card {
  flex: 0 0 182px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 16px;
  scroll-snap-align: start;
}

.layout.is-story-focused .story-output-support-title {
  font-size: 0.84rem;
}

.layout.is-story-focused .story-output-support-note {
  font-size: 0.72rem;
  line-height: 1.4;
}

.layout.is-story-focused .story-output-dossier-section {
  gap: 6px;
  padding: 12px 13px;
}

.layout.is-story-focused .story-output-dossier-note {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

  .layout.is-story-focused .story-output-summary {
    max-width: none;
    font-size: 0.82rem;
    line-height: 1.54;
  }

.layout.is-story-focused .story-output-body-text {
  max-height: 182px;
  font-size: 0.88rem;
  line-height: 1.62;
}

.layout.is-story-focused .story-output-body-card-main {
  gap: 12px;
}

.layout.is-story-focused .story-output-cue-strip {
  gap: 6px;
}

.layout.is-story-focused .story-latest-output-shell.is-empty .story-output-body-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

  .layout.is-story-focused .story-output-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .layout.is-story-focused .story-output-metric {
    padding: 8px 9px;
    border-radius: 12px;
  }

  .layout.is-story-focused .story-output-metric span {
    font-size: 0.6875rem;
    line-height: 1.24;
  }

  .layout.is-story-focused .story-output-metric strong {
    font-size: 0.88rem;
  }

  .layout.is-story-focused .story-preview-stage {
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
  }

  .layout.is-story-focused .story-preview-copy {
    gap: 10px;
  }

  .layout.is-story-focused .story-preview-summary {
    max-width: none;
    font-size: 0.84rem;
    line-height: 1.52;
  }

  .layout.is-story-focused .story-preview-copy-card-main {
    gap: 10px;
  }

  .layout.is-story-focused .story-preview-support-strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .layout.is-story-focused .story-preview-support-strip::-webkit-scrollbar {
    display: none;
  }

.layout.is-story-focused .story-preview-support-card {
    flex: 0 0 214px;
    min-width: 0;
    gap: 6px;
    padding: 12px 13px;
    border-radius: 16px;
    scroll-snap-align: start;
  }

  .layout.is-story-focused .story-preview-support-card .story-preview-summary-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .layout.is-story-focused .story-preview-support-card-assets {
    flex-basis: 240px;
  }

  .layout.is-story-focused .story-preview-cue-stack,
  .layout.is-story-focused .story-preview-copy-card,
  .layout.is-story-focused .story-preview-rail-card,
  .layout.is-story-focused .story-preview-stage .story-preview-assets {
    padding: 12px 13px;
    border-radius: 16px;
  }

  .layout.is-story-focused .story-preview-support-card-assets .story-preview-assets {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-preview-cues-hero {
    gap: 6px;
  }

  .layout.is-story-focused .story-preview-summary-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .layout.is-story-focused .story-preview-summary-item {
    gap: 4px;
  }

  .layout.is-story-focused .story-preview-summary-item p {
    display: none;
  }

  .layout.is-story-focused .story-preview-text {
    max-height: 170px;
    overflow: auto;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .layout.is-story-focused .story-empty-state {
    min-height: 0;
    padding: 14px 14px 12px;
    gap: 10px;
  }

  .layout.is-story-focused .story-empty-intro {
    width: 100%;
    gap: 8px;
  }

  .layout.is-story-focused .story-empty-title {
    font-size: 1.04rem;
  }

  .layout.is-story-focused .story-empty-lead {
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .layout.is-story-focused .story-empty-hint {
    display: none;
  }

  .layout.is-story-focused .story-empty-kpi {
    padding: 9px 10px;
    border-radius: 14px;
  }

  .layout.is-story-focused .story-empty-kpi-value {
    font-size: 0.82rem;
  }

  .layout.is-story-focused .story-empty-board {
    width: 100%;
    gap: 10px;
  }

  .layout.is-story-focused .story-empty-board-card {
    gap: 9px;
    padding: 11px 12px;
    border-radius: 18px;
  }

  .layout.is-story-focused .story-empty-board-subtitle {
    display: none;
  }

  .layout.is-story-focused .story-empty-board-note {
    font-size: 0.74rem;
    line-height: 1.42;
  }

  .layout.is-story-focused .story-empty-checklist li,
  .layout.is-story-focused .story-empty-arc li {
    min-height: 0;
    padding: 8px 10px;
  }

  .layout.is-story-focused .story-empty-cta-note {
    font-size: 0.72rem;
    line-height: 1.42;
  }
}

@media (max-width: 560px) {
  .layout.is-story-focused .panel-story-studio {
    gap: 14px;
    padding: 14px;
  }

  .layout.is-story-focused .story-compose-copy p,
  .layout.is-story-focused .story-compose-status p,
  .layout.is-story-focused .story-compose-preview {
    display: none;
  }

  .layout.is-story-focused .story-signal-card {
    flex-basis: 142px;
  }

  .layout.is-story-focused .story-signal-strip {
    gap: 6px;
    padding-bottom: 0;
  }

  .layout.is-story-focused .story-signal-card {
    flex-basis: 132px;
    gap: 2px;
    padding: 7px 8px;
    border-radius: 12px;
  }

  .layout.is-story-focused .story-signal-card strong {
    -webkit-line-clamp: 1;
    font-size: 0.72rem;
  }

  .layout.is-story-focused .story-signal-card span {
    font-size: 0.58rem;
  }

  .layout.is-story-focused .story-tray-grid {
    gap: 8px;
  }

  .layout.is-story-focused .story-tray {
    border-radius: 16px;
    box-shadow: none;
  }

  .layout.is-story-focused .story-tray:not([open]) {
    border-color: color-mix(in oklch, var(--border-soft) 42%, transparent);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-panel) 18%, transparent),
        color-mix(in oklch, var(--surface-panel-2) 10%, transparent)
      );
  }

  .layout.is-story-focused .story-tray:not([open]) > summary {
    gap: 4px;
    padding: 11px 12px;
    min-height: 0;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-copy {
    gap: 2px;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-hint {
    display: none;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-title {
    font-size: 0.88rem;
    line-height: 1.14;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-summary {
    gap: 3px;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-summary-text {
    max-width: none;
    color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
    font-size: 0.69rem;
    line-height: 1.34;
    -webkit-line-clamp: 2;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-summary-meta {
    gap: 4px;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 56%, var(--muted-foreground));
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.24;
    box-shadow: none;
  }

  .layout.is-story-focused .story-run-rail .story-head-grid .story-stat-card {
    flex-basis: 206px;
  }

  .layout.is-story-focused .story-run-rail {
    gap: 8px;
    padding: 14px;
  }

  .layout.is-story-focused .story-run-rail-head,
  .layout.is-story-focused .story-atlas-shell-head {
    gap: 4px;
  }

  .layout.is-story-focused .story-run-rail-head .story-section-eyebrow,
  .layout.is-story-focused .story-atlas-shell-head .story-section-eyebrow {
    display: none;
  }

  .layout.is-story-focused .story-run-rail-head h3,
  .layout.is-story-focused .story-atlas-shell-head h3 {
    font-size: 0.92rem;
  }

  .layout.is-story-focused .story-run-rail .story-head-grid {
    gap: 6px;
  }

  .layout.is-story-focused .story-run-rail .story-head-grid .story-stat-card {
    padding: 10px 11px;
    border-radius: 14px;
  }

  .layout.is-story-focused .story-run-rail .story-stat-card-title {
    gap: 3px;
  }

  .layout.is-story-focused .story-run-rail .story-stat-card-title .story-stat-label,
  .layout.is-story-focused .story-run-rail .story-stat-card-title .story-stat-note {
    display: none;
  }

  .layout.is-story-focused .story-run-rail .story-stat-card-title .story-stat-value {
    font-size: 0.9rem;
    line-height: 1.2;
  }

  .layout.is-story-focused .story-run-rail .story-stat-card-metric,
  .layout.is-story-focused .story-run-rail .story-stat-card-state {
    gap: 4px;
  }

  .layout.is-story-focused .story-run-rail .story-inline-metric {
    margin-top: 0;
    padding-top: 4px;
  }

  .layout.is-story-focused .story-run-rail .story-inline-metric-label {
    font-size: 0.6875rem;
    line-height: 1.24;
  }

  .layout.is-story-focused .story-run-rail .story-guidance {
    padding: 10px 11px;
    gap: 6px;
  }

  .layout.is-story-focused .story-run-rail.is-ready .story-guidance-hint,
  .layout.is-story-focused .story-run-rail.is-ready .story-guidance-actions {
    display: none;
  }

  .layout.is-story-focused .story-results-secondary {
    gap: 9px;
    padding: 13px;
  }

  .layout.is-story-focused .story-atlas-shell-head {
    margin-bottom: 1px;
  }

  .layout.is-story-focused .story-atlas-rail {
    gap: 6px;
    padding-bottom: 0;
  }

  .layout.is-story-focused .story-mode-rail {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    align-items: start;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .layout.is-story-focused .story-mode-rail::-webkit-scrollbar {
    display: none;
  }

  .layout.is-story-focused .story-mode-card {
    flex: initial;
    min-width: max-content;
    padding: 7px 10px;
  }

  .layout.is-story-focused .story-mode-card.is-active {
    grid-column: 1 / -1;
    min-width: 0;
    width: min(100%, 100%);
    padding: 10px 11px;
  }

  .layout.is-story-focused .story-mode-card.is-active .story-mode-hint {
    -webkit-line-clamp: 1;
  }

  .layout.is-story-focused .story-flow-step {
    padding: 7px 9px;
  }

  .layout.is-story-focused .story-compose-canvas {
    padding: 14px;
  }

  .layout.is-story-focused .story-compose-secondary-actions {
    grid-template-columns: 1fr;
  }

  .layout.is-story-focused .story-compose-field textarea {
    min-height: 160px;
  }

  .layout.is-story-focused .story-run-rail .story-guidance {
    padding: 11px 12px;
  }

  .layout.is-story-focused .story-output-stage {
    gap: 8px;
  }

  .layout.is-story-focused .story-output-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .layout.is-story-focused .story-output-support-label,
  .layout.is-story-focused .story-output-dossier-label {
    display: none;
  }

  .layout.is-story-focused .story-output-support-card {
    flex-basis: 166px;
    gap: 4px;
    padding: 10px 11px;
  }

  .layout.is-story-focused .story-output-side-card-dossier {
    flex-basis: 100%;
  }

  .layout.is-story-focused .story-output-dossier-section {
    gap: 5px;
    padding: 10px 11px;
  }

  .layout.is-story-focused .story-output-dossier-title {
    font-size: 0.84rem;
    line-height: 1.28;
  }

  .layout.is-story-focused .story-output-dossier-note {
    font-size: 0.72rem;
    line-height: 1.38;
  }

  .layout.is-story-focused .story-output-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .layout.is-story-focused .story-atlas-tab {
    flex-basis: 116px;
    min-height: 40px;
    padding: 8px 10px;
  }

  .layout.is-story-focused .story-atlas-tab-hint,
  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-section-eyebrow {
    display: none;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card {
    gap: 6px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-head {
    gap: 4px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-head h3 {
    font-size: 0.92rem;
    line-height: 1.14;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-head p {
    font-size: 0.8rem;
    line-height: 1.46;
  }

  .layout.is-story-focused .story-preview-support-card {
    flex-basis: 186px;
    gap: 5px;
    padding: 11px 12px;
  }

  .layout.is-story-focused .story-preview-summary-grid {
    gap: 6px;
  }

  .layout.is-story-focused .story-preview-summary-item {
    gap: 3px;
  }

  .layout.is-story-focused .story-preview-rail-card span {
    font-size: 0.6875rem;
    line-height: 1.24;
  }

  .layout.is-story-focused .story-preview-rail-card strong {
    font-size: 0.84rem;
    line-height: 1.22;
  }

  .layout.is-story-focused .story-empty-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .layout.is-story-focused .story-output-side-card,
  .layout.is-story-focused .story-output-variant-card,
  .layout.is-story-focused .story-preview-rail-card,
  .layout.is-story-focused .story-preview-stage .story-preview-assets,
  .layout.is-story-focused .story-empty-kpi,
  .layout.is-story-focused .story-empty-checklist li {
    flex-basis: 190px;
  }

  .layout.is-story-focused .story-empty-kpi {
    flex-basis: auto;
    scroll-snap-align: none;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card {
    padding: 12px;
  }
}

/* 2026-03-10: live session export surface and advanced-settings cleanup */
.live-session-export-shell {
  display: grid;
  gap: 12px;
  padding: 14px 15px 15px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(220px 90px at 0% -20%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 72%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent),
    var(--shadow-xs);
}

.live-session-export-copy {
  display: grid;
  gap: 6px;
}

.live-session-export-badge {
  width: fit-content;
}

.live-session-export-title {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.015em;
}

.live-session-export-hint {
  margin: 0;
  max-width: 48ch;
  font-size: 0.76rem;
  line-height: 1.52;
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.live-session-export-shell .export-menu {
  width: 100%;
  min-width: 0;
}

.live-session-export-shell .export-menu > summary {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 12px 18px;
  gap: 10px;
  align-items: center;
}

.export-menu-summary-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.export-menu-summary-hint {
  color: color-mix(in oklch, var(--muted-foreground) 90%, var(--foreground));
  font-size: 0.72rem;
  line-height: 1.42;
  font-weight: 520;
}

.live-session-export-shell .export-menu-summary-icon {
  min-width: 34px;
  min-height: 24px;
  padding-inline: 7px;
}

.live-session-export-shell .export-menu-list {
  inset-inline: 0;
  top: calc(100% + 10px);
  min-width: 100%;
  padding: 12px;
  gap: 10px;
  border-radius: 20px;
}

.live-session-export-shell .export-menu-meta {
  padding: 0 2px 10px;
  border-bottom-width: 1px;
  font-size: 0.74rem;
  line-height: 1.46;
}

.live-session-export-shell .export-menu-item {
  min-height: 72px;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 16px;
}

.live-session-export-shell .export-menu-item-icon {
  min-width: 32px;
  min-height: 22px;
  font-size: 0.61rem;
}

.live-session-export-shell .export-menu-item-copy {
  gap: 4px;
}

.live-session-export-shell .export-menu-item-label {
  font-size: 0.91rem;
  line-height: 1.28;
}

.live-session-export-shell .export-menu-item-hint {
  font-size: 0.76rem;
  line-height: 1.48;
}

.live-session-export-shell .export-menu-history {
  margin-top: 4px;
  padding-top: 12px;
  gap: 8px;
}

.live-session-export-shell .export-menu-history-title {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.live-session-export-shell .export-menu-history-list {
  gap: 8px;
}

.live-session-export-shell .export-menu-history-item {
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 14px;
  align-items: flex-start;
}

.live-session-export-shell .export-menu-history-main {
  display: grid;
  gap: 3px;
  justify-content: flex-start;
}

.live-session-export-shell .export-menu-history-file {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.42;
}

.live-session-export-shell .export-menu-history-time {
  font-size: 0.68rem;
}

.live-session-export-shell .export-menu-history-empty {
  padding: 10px 11px;
  border-radius: 14px;
  font-size: 0.74rem;
}

.live-context-mounted-section.live-utility-shell .advanced-settings {
  padding: 14px 15px 16px;
  border-radius: 18px;
  background:
    radial-gradient(180px 82px at 0% -20%, color-mix(in oklch, var(--primary) 5%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 76%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.live-context-mounted-section.live-utility-shell .advanced-settings > summary {
  gap: 5px;
  padding: 2px 34px 8px 0;
}

.live-context-mounted-section.live-utility-shell .advanced-settings > :not(summary) {
  margin-top: 16px;
}

.live-context-mounted-section.live-utility-shell .advanced-settings .field {
  gap: 8px;
}

.live-context-mounted-section.live-utility-shell .advanced-settings .field > span {
  font-size: 0.76rem;
  line-height: 1.42;
}

.live-context-mounted-section.live-utility-shell .advanced-settings :is(input[type="text"], select, textarea) {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 16px;
}

.live-context-mounted-section.live-utility-shell .advanced-settings textarea {
  min-height: 120px;
}

.connection-advanced-shell {
  display: grid;
  gap: 14px;
}

#connectionAdvancedSection .connection-advanced-grid-core {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#connectionAdvancedSection .connection-url-field {
  margin-top: 0;
}

#connectionAdvancedSection .meta-row-status-connection-advanced {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
  padding-top: 14px;
}

#connectionAdvancedSection .meta-row-status-connection-advanced > .status-item {
  min-height: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 70%, transparent);
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 68%, transparent);
  gap: 5px;
}

#connectionAdvancedSection .meta-row-status-connection-advanced strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground) 88%, var(--foreground));
}

#connectionAdvancedSection .meta-row-status-connection-advanced .status-pill,
#connectionAdvancedSection .meta-row-status-connection-advanced .status-value {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.38;
}

.live-setup-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.live-setup-activity-field,
.live-setup-instruction-field {
  grid-column: 1 / -1;
}

#liveSetupAdvanced .live-setup-media-field {
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
}

#liveSetupAdvanced .media-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

#liveSetupAdvanced .media-upload-actions {
  margin-top: 0;
}

#liveSetupAdvanced .media-upload-actions > button,
#liveSetupAdvanced .live-setup-actions > button {
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 14px;
}

#liveSetupAdvanced .live-setup-actions {
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 920px) {
  .live-setup-advanced-grid,
  #connectionAdvancedSection .connection-advanced-grid-core,
  #connectionAdvancedSection .meta-row-status-connection-advanced {
    grid-template-columns: 1fr;
  }

  #liveSetupAdvanced .media-upload-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .live-session-export-shell .export-menu-list {
    min-width: min(100%, calc(100vw - 36px));
  }
}

@media (max-width: 720px) {
  .live-session-export-shell {
    padding: 13px;
  }

  .live-session-export-shell .export-menu > summary {
    padding: 12px 14px;
  }
}

/* 2026-03-11: live tablet pass keeps Live in one calmer reading flow on mid-width screens */
@media (max-width: 1120px) {
  .layout[data-active-tab="live-negotiator"] .dashboard-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .layout[data-active-tab="live-negotiator"] .dashboard-sidebar {
    position: static;
  }

  .layout[data-active-tab="live-negotiator"] .dashboard-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
  }

  .layout[data-active-tab="live-negotiator"] .dashboard-nav .tab-btn {
    min-height: 52px;
    padding: 10px 12px;
  }

  .layout[data-active-tab="live-negotiator"] .dashboard-workspace-summary {
    margin-top: 14px;
    padding: 16px 18px 18px;
    gap: 16px;
  }

  .layout[data-active-tab="live-negotiator"] .dashboard-workspace-head {
    gap: 12px 14px;
  }

  .layout[data-active-tab="live-negotiator"] .dashboard-workspace-description {
    max-width: 60ch;
    font-size: 0.76rem;
    line-height: 1.56;
  }

  .layout[data-active-tab="live-negotiator"] .dashboard-shell-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .layout[data-active-tab="live-negotiator"] .dashboard-glance-card {
    min-height: 0;
    gap: 5px;
    padding: 12px 13px;
  }

  .layout[data-active-tab="live-negotiator"] .live-negotiator-main {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .layout[data-active-tab="live-negotiator"] .live-negotiator-secondary {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .layout[data-active-tab="live-negotiator"] .panel-live-intent-composer,
  .layout[data-active-tab="live-negotiator"] .panel-transcript-live,
  .layout[data-active-tab="live-negotiator"] .live-context-dock-shell,
  .layout[data-active-tab="live-negotiator"] .live-context-tray {
    padding: 22px 20px;
  }

  .layout[data-active-tab="live-negotiator"] .panel-live-intent-composer {
    gap: 20px;
  }

  .layout[data-active-tab="live-negotiator"] .panel-transcript-live {
    gap: 14px;
  }

  .layout[data-active-tab="live-negotiator"] .live-context-dock-shell {
    gap: 18px;
  }

  .layout[data-active-tab="live-negotiator"] .live-context-dock-head,
  .layout[data-active-tab="live-negotiator"] .live-context-tray-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .layout[data-active-tab="live-negotiator"] .live-context-dock-current,
  .layout[data-active-tab="live-negotiator"] .live-context-tray-actions {
    justify-self: stretch;
    justify-items: start;
    justify-content: flex-start;
    max-width: none;
  }

  .layout[data-active-tab="live-negotiator"] .live-context-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .layout[data-active-tab="live-negotiator"] .live-intent-switcher {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .layout[data-active-tab="live-negotiator"] .live-intent-option {
    min-height: 0;
    padding: 11px 12px;
  }

  .layout[data-active-tab="live-negotiator"] .live-reading-stack {
    gap: 14px;
  }
}

@media (max-width: 940px) {
  .layout[data-active-tab="live-negotiator"] .dashboard-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout[data-active-tab="live-negotiator"] .dashboard-shell-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout[data-active-tab="live-negotiator"] .live-intent-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .layout[data-active-tab="live-negotiator"] .dashboard-shell-meta {
    grid-template-columns: 1fr;
  }
}

/* 2026-03-11: live approval card alignment */
.live-context-mounted-section.live-support-section .live-support-card-approval {
  gap: 14px;
}

.live-context-mounted-section.live-support-section .live-support-card-copy {
  display: grid;
  gap: 8px;
}

.live-context-mounted-section.live-support-section .live-support-card-approval h3 {
  margin-bottom: 0;
}

.live-context-mounted-section.live-support-section .live-support-card-intro {
  max-width: 46ch;
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  font-size: 0.79rem;
  line-height: 1.52;
}

.live-context-mounted-section.live-support-section .approval-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.95fr);
  gap: 12px;
  align-items: stretch;
}

.live-context-mounted-section.live-support-section .approval-reference-field,
.live-context-mounted-section.live-support-section .approval-status-card {
  min-height: 100%;
  margin: 0;
}

.live-context-mounted-section.live-support-section .approval-reference-field {
  gap: 10px;
  padding: 14px 16px 15px;
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  border-radius: 16px;
  background:
    radial-gradient(240px 88px at 0% -28%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 84%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent),
    0 10px 22px -24px color-mix(in oklch, var(--primary) 34%, transparent);
}

.live-context-mounted-section.live-support-section .approval-reference-field > span {
  display: block;
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.live-context-mounted-section.live-support-section .approval-reference-field input[readonly] {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 560;
  line-height: 1.45;
}

.live-context-mounted-section.live-support-section .approval-status-card {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 14px 16px 15px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(220px 84px at 0% -26%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 80%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 8%, transparent);
}

.live-context-mounted-section.live-support-section #approvalStatusCard[data-approval-variant="neutral"] {
  border-color: color-mix(in oklch, var(--warning) 24%, var(--border-soft));
}

.live-context-mounted-section.live-support-section #approvalStatusCard[data-approval-variant="ok"] {
  border-color: color-mix(in oklch, var(--chart-1) 34%, var(--border-soft));
  background:
    radial-gradient(220px 84px at 0% -26%, color-mix(in oklch, var(--chart-1) 12%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 80%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.live-context-mounted-section.live-support-section #approvalStatusCard[data-approval-variant="fail"] {
  border-color: color-mix(in oklch, var(--destructive) 34%, var(--border-soft));
  background:
    radial-gradient(220px 84px at 0% -26%, color-mix(in oklch, var(--destructive) 11%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 80%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.live-context-mounted-section.live-support-section .approval-status-card strong {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.live-context-mounted-section.live-support-section .approval-status-card .status-pill {
  justify-self: start;
  margin-top: 0;
}

.live-context-mounted-section.live-support-section .approval-status-hint {
  max-width: 28ch;
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
  font-size: 0.75rem;
  line-height: 1.48;
}

.live-context-mounted-section.live-support-section #approvalAdvancedSection {
  margin-top: 2px;
}

.live-context-mounted-section.live-support-section #approvalAdvancedSection > summary {
  padding: 14px 16px;
  border-radius: 16px;
  background: color-mix(in oklch, var(--surface-control) 78%, transparent);
}

.live-context-mounted-section.live-support-section #approvalAdvancedSection[open] > summary {
  margin-bottom: 12px;
}

.live-context-mounted-section.live-support-section #approvalAdvancedSection .advanced-hint {
  max-width: 40ch;
}

.live-context-mounted-section.live-support-section .approval-advanced-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.live-context-mounted-section.live-support-section .approval-advanced-grid .field {
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 72%, transparent);
}

.live-context-mounted-section.live-support-section .approval-advanced-grid .field > span {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.live-context-mounted-section.live-support-section .approval-advanced-grid .field input {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.live-context-mounted-section.live-support-section .approval-actions {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.live-context-mounted-section.live-support-section .approval-actions > button {
  min-height: 44px;
}

.live-context-mounted-section.live-support-section .approval-actions > #approveResumeBtn {
  box-shadow:
    0 10px 20px -18px color-mix(in oklch, var(--primary) 60%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 20%, transparent);
}

@media (max-width: 980px) {
  .live-context-mounted-section.live-support-section .approval-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .live-context-mounted-section.live-support-section .approval-actions {
    grid-template-columns: 1fr;
  }
}

/* 2026-03-11: live more-tools and reading-rail micro polish */
.live-context-mounted-section.live-input-optional-tools > .live-secondary-tools-grid {
  gap: 14px;
}

.live-context-mounted-section.live-input-optional-tools .live-secondary-tool-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(220px 88px at 0% -24%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 78%, transparent),
      color-mix(in oklch, var(--surface-panel) 95%, transparent)
    );
}

.live-context-mounted-section.live-input-optional-tools .live-secondary-tool-copy {
  display: grid;
  gap: 6px;
}

.live-context-mounted-section.live-input-optional-tools .live-secondary-tool-title {
  font-size: 0.96rem;
  font-weight: 680;
  line-height: 1.22;
  letter-spacing: -0.012em;
}

.live-context-mounted-section.live-input-optional-tools .live-secondary-tool-hint {
  max-width: 38ch;
  margin: 0;
  font-size: 0.77rem;
  line-height: 1.56;
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
}

.live-context-mounted-section.live-input-optional-tools .file-picker {
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 18px;
  border-color: color-mix(in oklch, var(--primary) 20%, var(--border-soft));
  background:
    radial-gradient(220px 88px at 0% -24%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 72%),
    color-mix(in oklch, var(--surface-control) 72%, transparent);
}

.live-context-mounted-section.live-input-optional-tools .file-picker-name {
  line-height: 1.45;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions {
  gap: 10px;
  align-items: stretch;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-primary > button,
.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-secondary > button {
  min-height: 42px;
}

.live-context-mounted-section.live-input-optional-tools .intent-followup-actions .action-group-secondary {
  gap: 10px;
}

.live-result-card .live-result-copy {
  display: grid;
  gap: 4px;
}

.live-result-card.is-empty .live-result-body,
.live-result-card.is-pending .live-result-body,
.live-result-card.is-error .live-result-body {
  max-width: 38ch;
  margin-top: 0;
  padding: 14px 16px;
  border-radius: 16px;
}

.live-result-card.is-empty .live-result-body {
  border: 1px dashed color-mix(in oklch, var(--border-soft) 72%, transparent);
  background: color-mix(in oklch, var(--surface-control) 60%, transparent);
}

.live-result-card.is-pending .live-result-body {
  border: 1px solid color-mix(in oklch, var(--primary) 20%, var(--border-soft));
  background:
    radial-gradient(220px 88px at 0% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 68%, transparent);
}

.live-result-card.is-error .live-result-body {
  border: 1px solid color-mix(in oklch, var(--destructive) 24%, var(--border-soft));
  background:
    radial-gradient(220px 88px at 0% 0%, color-mix(in oklch, var(--destructive) 8%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 68%, transparent);
}

.live-result-card.is-ready .live-result-body {
  max-width: 64ch;
}

.panel-transcript-live .conversation-history:empty,
.live-debug-transcript-shell .transcript:empty {
  display: grid;
  align-content: start;
  gap: 8px;
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 6%, transparent);
}

.panel-transcript-live .conversation-history:empty::before,
.live-debug-transcript-shell .transcript:empty::before {
  font-weight: 560;
}

@media (max-width: 620px) {
  .live-result-card.is-empty .live-result-body,
  .live-result-card.is-pending .live-result-body,
  .live-result-card.is-error .live-result-body {
    max-width: none;
    padding: 12px 13px;
  }
}

/* 2026-03-11: device nodes split workspace and advanced grouping polish */
.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary {
  margin-top: 12px;
}

@media (min-width: 921px) {
  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-group-body {
    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
    gap: 10px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty {
    padding: 10px 11px;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty h3 {
    margin-bottom: 7px;
    font-size: 0.82rem;
    line-height: 1.22;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .status-pill {
    min-height: 23px;
    margin-bottom: 6px;
    padding: 4px 9px;
    font-size: 0.72rem;
  }

  .panel-operator-console .operator-health-group[data-operator-group="bridge-safety"] .operator-health-card.operator-health-card-empty .operator-health-hint {
    margin-top: 6px;
    font-size: 0.7rem;
    line-height: 1.22;
  }
  .layout[data-active-tab="operator"] .hero {
    padding: 12px 14px 8px;
    gap: 2px;
    border-radius: calc(var(--radius) + 4px);
    box-shadow:
      0 18px 44px -34px color-mix(in oklch, var(--shadow-color) 34%, transparent),
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
  }

  .layout[data-active-tab="operator"] .hero::before,
  .layout[data-active-tab="operator"] .hero::after {
    top: -176px;
    width: 420px;
    height: 240px;
    opacity: 0.28;
  }

  .layout[data-active-tab="operator"] .hero-headline {
    align-items: center;
    gap: 6px 10px;
  }

  .layout[data-active-tab="operator"] .hero h1 {
    margin: 0;
    font-size: clamp(0.94rem, 1.05vw, 1.12rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
  }

  .layout[data-active-tab="operator"] .hero-sub {
    display: none;
  }

  .layout[data-active-tab="operator"] .hero-toolbar {
    gap: 3px;
  }

  .layout[data-active-tab="operator"] .hero-language-control {
    gap: 4px;
    padding: 2px 0 2px 6px;
    border-color: transparent;
    background: transparent;
    font-size: 0.6rem;
  }

  .layout[data-active-tab="operator"] .hero-language-control > span {
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--foreground) 40%, var(--muted-foreground));
  }

  .layout[data-active-tab="operator"] .hero-language-select {
    min-height: 24px;
    padding: 2px 7px;
    border-color: transparent;
    background: color-mix(in oklch, var(--surface-control) 30%, transparent);
    font-size: 0.64rem;
  }

  .layout[data-active-tab="operator"] #themeToggleBtn {
    min-height: 26px;
    padding: 0 8px;
    border-color: transparent;
    background: transparent;
    font-size: 0.64rem;
    opacity: 0.78;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-toolbar {
    grid-template-columns: max-content max-content minmax(0, 1fr) auto;
    gap: 4px;
    align-items: center;
    padding: 5px 7px;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-console-entry {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 13px;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-console-entry-actions {
    justify-content: flex-start;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-console-entry-action {
    min-height: 34px;
    padding-inline: 11px;
    font-size: 0.72rem;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-toolbar-cluster {
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 4px;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-toolbar-cluster-filters {
    display: flex;
    grid-template-columns: none;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-toolbar-cluster-saved {
    display: flex;
    grid-column: auto;
    justify-content: flex-start;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-toolbar-cluster-refresh {
    grid-column: auto;
    justify-self: end;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-toolbar-label {
    display: none;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-toolbar-hint {
    display: none;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-toolbar .operator-view-mode-actions,
  .layout[data-active-tab="operator"] .panel-operator-console .operator-saved-view-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-toolbar .button-muted {
    min-height: 30px;
    width: auto;
    max-width: none;
    padding: 0 9px;
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .layout[data-active-tab="operator"] .panel-operator-console .operator-toolbar #operatorRefreshBtn {
    min-height: 30px;
    min-width: 96px;
    padding-inline: 10px;
  }

  .layout[data-active-tab="operator"] .dashboard-body {
    grid-template-columns: minmax(118px, 132px) minmax(0, 1fr);
    gap: 12px;
  }

  .layout[data-active-tab="operator"] .dashboard-sidebar {
    top: 10px;
    gap: 4px;
  }

  .layout[data-active-tab="operator"] .dashboard-nav {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout[data-active-tab="operator"] .dashboard-nav .tab-btn {
    position: relative;
    width: 100%;
    min-height: 40px;
    padding: 6px 0 6px 10px;
    border: 0;
    border-radius: 0;
    justify-items: start;
    align-items: start;
    gap: 2px;
    background: transparent;
    box-shadow: none;
    opacity: 0.56;
    text-align: left;
  }

  .layout[data-active-tab="operator"] .dashboard-nav .tab-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 1px;
    border-radius: 999px;
    background: transparent;
  }

  .layout[data-active-tab="operator"] .dashboard-nav .tab-btn:hover,
  .layout[data-active-tab="operator"] .dashboard-nav .tab-btn:focus-visible {
    transform: none;
    background: transparent;
    opacity: 0.86;
  }

  .layout[data-active-tab="operator"] .dashboard-nav .tab-btn.active {
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
  }

  .layout[data-active-tab="operator"] .dashboard-nav .tab-btn.active::before {
    background: color-mix(in oklch, var(--primary) 58%, transparent);
  }

  .layout[data-active-tab="operator"] .dashboard-nav-icon {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.54rem;
    line-height: 1;
    letter-spacing: 0.16em;
    color: color-mix(in oklch, var(--primary) 62%, var(--muted-foreground));
    opacity: 0.82;
  }

  .layout[data-active-tab="operator"] .dashboard-nav-copy {
    gap: 0;
    justify-items: start;
    justify-self: stretch;
    text-align: left;
  }

  .layout[data-active-tab="operator"] .dashboard-nav-title {
    display: block;
    justify-self: stretch;
    font-size: 0.74rem;
    line-height: 1.08;
    color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
    text-align: left;
  }

  .layout[data-active-tab="operator"] .dashboard-nav .tab-btn.active .dashboard-nav-title {
    color: color-mix(in oklch, var(--foreground) 96%, white);
  }

  .layout[data-active-tab="operator"] .dashboard-nav-hint {
    display: none;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary {
    margin-top: 4px;
  }

  .panel-operator-console .operator-status-strip {
    grid-template-columns: minmax(178px, auto) minmax(0, 1fr);
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .panel-operator-console .operator-last-refresh,
  .panel-operator-console .operator-mode-banner {
    min-height: 42px;
    padding: 7px 10px;
    border-radius: 14px;
    box-shadow: none;
  }

  .panel-operator-console .operator-last-refresh {
    font-size: 0.74rem;
  }

  .panel-operator-console .operator-mode-banner {
    gap: 8px;
  }

  .panel-operator-console .operator-mode-banner .status-pill {
    min-height: 22px;
    padding: 2px 8px;
    font-size: 0.6rem;
  }

  .panel-operator-console .operator-mode-copy-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }

  .panel-operator-console .operator-mode-copy {
    font-size: 0.72rem;
    line-height: 1.18;
  }

  .panel-operator-console .operator-board-mode-hint {
    display: none;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: 0;
    gap: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-workspace-head {
    align-items: center;
    gap: 0 8px;
    padding-bottom: 0;
    border-bottom: 0;
    min-width: 0;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-workspace-head > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    max-width: none;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-workspace-eyebrow {
    display: none;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-workspace-title {
    font-size: 0.78rem;
    line-height: 1.08;
    color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-workspace-description {
    display: none;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-workspace-head .status-pill {
    min-height: 18px;
    padding: 0 6px;
    font-size: 0.54rem;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-shell-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    padding-top: 0;
    border-top: 0;
    min-width: 0;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-workspace-glances {
    display: contents;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-glance-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 0;
    padding: 0 7px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-glance-card:not([hidden]):not(:last-child)::after {
    content: "";
    width: 1px;
    height: 10px;
    margin-left: 1px;
    background: color-mix(in oklch, var(--border-soft) 46%, transparent);
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-glance-label {
    font-size: 0.48rem;
    letter-spacing: 0.12em;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-glance-value {
    font-size: 0.68rem;
    line-height: 1.08;
  }

  .layout[data-active-tab="operator"] .dashboard-workspace-summary.is-operator-minimal .dashboard-glance-hint {
    display: none !important;
  }
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal {
  padding: 13px 14px 14px;
  gap: 10px;
  border-radius: 22px;
  border-color: color-mix(in oklch, var(--border-soft) 66%, transparent);
  background:
    radial-gradient(260px 96px at 100% -22%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 76%),
    linear-gradient(
      160deg,
      color-mix(in oklch, var(--surface-control) 90%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel-2) 98%, var(--surface-control))
    );
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-workspace-head {
  align-items: center;
  gap: 8px 12px;
  padding-bottom: 0;
  border-bottom: 0;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-workspace-head > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-workspace-eyebrow {
  margin: 0;
  font-size: 0.58rem;
  line-height: 1;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-workspace-title {
  font-size: 0.98rem;
  line-height: 1.12;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-workspace-description {
  flex-basis: 100%;
  max-width: 50ch;
  margin-top: 0;
  font-size: 0.72rem;
  line-height: 1.48;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-workspace-head .status-pill {
  min-height: 22px;
  padding: 2px 8px;
  font-size: 0.6rem;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-shell-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 0;
  border-top: 0;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-workspace-glances {
  display: contents;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-glance-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 6px 10px;
  border-radius: 999px;
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  background: color-mix(in oklch, var(--surface-control) 48%, transparent);
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-glance-label {
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-glance-value {
  font-size: 0.78rem;
  line-height: 1.12;
}

.layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-glance-hint {
  display: none;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes {
  gap: 20px;
}

.layout[data-active-tab="device-nodes"] .device-node-intro {
  max-width: 62ch;
  font-size: 0.82rem;
  line-height: 1.52;
}

.layout[data-active-tab="device-nodes"] .device-node-hero {
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
  gap: 14px;
}

.layout[data-active-tab="device-nodes"] .device-node-hero-copy,
.layout[data-active-tab="device-nodes"] .device-node-guide-card,
.layout[data-active-tab="device-nodes"] .device-node-primary-shell,
.layout[data-active-tab="device-nodes"] .device-node-fleet-shell,
.layout[data-active-tab="device-nodes"] .device-node-advanced-shell {
  border-color: color-mix(in oklch, var(--border-soft) 74%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    var(--shadow-2xs);
}

.layout[data-active-tab="device-nodes"] .device-node-hero-copy,
.layout[data-active-tab="device-nodes"] .device-node-guide-card {
  padding: 18px 18px 16px;
}

.layout[data-active-tab="device-nodes"] .device-node-step-strip {
  margin-top: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.layout[data-active-tab="device-nodes"] .device-node-step-card {
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 9px;
  padding: 10px 11px;
  border-radius: 14px;
  border-color: color-mix(in oklch, var(--border-soft) 80%, transparent);
  background: color-mix(in oklch, var(--surface-control) 56%, transparent);
}

.layout[data-active-tab="device-nodes"] .device-node-step-number {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  font-size: 0.6rem;
}

.layout[data-active-tab="device-nodes"] .device-node-step-card strong {
  font-size: 0.78rem;
  line-height: 1.18;
}

.layout[data-active-tab="device-nodes"] .device-node-step-card p,
.layout[data-active-tab="device-nodes"] .device-node-guide-muted {
  font-size: 0.7rem;
  line-height: 1.38;
}

.layout[data-active-tab="device-nodes"] .device-node-guide-card {
  align-content: start;
  gap: 7px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 74%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.layout[data-active-tab="device-nodes"] .device-node-context-row {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.layout[data-active-tab="device-nodes"] .device-node-context-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 46%, transparent);
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-context-label {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.layout[data-active-tab="device-nodes"] .device-node-context-card .status-pill {
  width: fit-content;
  min-height: 24px;
  padding-inline: 8px;
  font-size: 0.66rem;
  justify-content: flex-start;
  text-align: left;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated {
  gap: 16px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-intro {
  display: none;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-hero-copy,
.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-card {
  padding: 14px 15px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-hero-copy {
  gap: 4px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-kicker,
.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-label {
  font-size: 0.54rem;
  letter-spacing: 0.14em;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-hero-copy h3,
.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-card h3 {
  font-size: 0.92rem;
  line-height: 1.18;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-hero-copy > p,
.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-card > p {
  font-size: 0.72rem;
  line-height: 1.45;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-step-strip,
.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated #deviceNodeGuideCopy,
.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-muted {
  display: none;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-card {
  min-width: 272px;
  align-content: center;
  gap: 6px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-rail {
  margin-top: 2px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-context-row {
  gap: 6px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-context-card {
  padding: 7px 9px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-context-card .status-pill {
  min-height: 22px;
  padding-inline: 7px;
  font-size: 0.62rem;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: 18px;
  align-items: start;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] {
  grid-template-columns: minmax(260px, 0.34fr) minmax(0, 1fr);
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="advanced-focus"] {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="dual-collapsed"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-stack[data-support-layout="empty-primary"],
.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-stack[data-support-layout="empty-idle"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 981px) {
  .layout[data-active-tab="device-nodes"] .panel-device-nodes > h2,
  .layout[data-active-tab="device-nodes"] #deviceNodeIntro {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) {
    gap: 16px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-hero {
    gap: 12px;
    align-items: stretch;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-context-row,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-selection-strip,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-fleet-summary,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) #deviceNodeSnapshot,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-list-hint,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-list-shell-rail,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-advanced-shell {
    display: none;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-fleet-shell > .device-node-shell-head {
    margin-bottom: 12px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-list-shell {
    gap: 14px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-list-shell-head {
    padding-bottom: 0;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-list-shell-head > div {
    max-width: 48ch;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-hero {
    grid-template-columns: minmax(0, 1.22fr) minmax(260px, 0.78fr);
    gap: 10px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-hero-copy,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-guide-card {
    padding: 16px 17px 15px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-kicker,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-guide-label {
    margin-bottom: 8px;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-hero-copy h3,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-guide-card h3 {
    font-size: 1rem;
    line-height: 1.14;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-hero-copy > p,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-guide-card > p {
    margin-top: 8px;
    font-size: 0.8rem;
    line-height: 1.46;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-step-strip {
    margin-top: 10px;
    gap: 5px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-step-card {
    min-height: 0;
    padding: 9px 10px;
    gap: 4px 8px;
    grid-template-columns: auto minmax(0, 1fr);
    background: color-mix(in oklch, var(--surface-control) 54%, transparent);
    box-shadow: none;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-step-card strong {
    font-size: 0.72rem;
    line-height: 1.16;
    align-self: center;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-step-card p {
    grid-column: 2;
    margin: 0;
    font-size: 0.63rem;
    line-height: 1.32;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-guide-card {
    gap: 6px;
    align-content: start;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-guide-rail {
    margin-top: 2px;
    gap: 6px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-guide-chip {
    min-height: 28px;
    padding: 6px 10px;
    font-size: 0.65rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-guide-muted {
    display: none;
  }
}

.layout[data-active-tab="device-nodes"] .device-node-primary-shell {
  grid-column: 2;
  position: static;
  align-self: start;
  min-height: 0;
  padding: 0;
  display: block;
  overflow: clip;
}

.layout[data-active-tab="device-nodes"] .device-node-fleet-shell {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.04fr) minmax(300px, 0.96fr);
  gap: 16px 18px;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-shell {
  grid-column: 1;
  align-self: start;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-advanced-shell {
  display: none;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-shell {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-shell > summary {
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 70%, transparent);
  background:
    radial-gradient(220px 84px at 0% -26%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 72%),
    color-mix(in oklch, var(--surface-control) 54%, transparent);
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-summary-copy {
  gap: 4px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-summary-copy .device-node-section-kicker {
  margin: 0;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-summary-copy strong {
  font-size: 1rem;
  line-height: 1.18;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-summary-hint {
  max-width: 48ch;
  font-size: 0.74rem;
  line-height: 1.44;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) #deviceNodePrimarySummaryMode {
  display: none;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-summary-strip {
  display: none;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-body {
  gap: 12px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-write-guard {
  padding: 10px 12px;
  gap: 10px 12px;
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 66%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-write-guard-copy {
  gap: 4px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-write-guard-copy strong {
  max-width: 34ch;
  font-size: 0.86rem;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-write-guard-copy p {
  max-width: 40ch;
  font-size: 0.74rem;
  line-height: 1.42;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-write-guard-side {
  grid-template-columns: minmax(144px, auto) auto;
  align-items: center;
  gap: 8px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-role-field {
  gap: 5px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-role-field > span {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-write-guard-side .status-pill {
  display: none;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-write-guard-label {
  font-size: 0.56rem;
  letter-spacing: 0.14em;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-write-guard-side {
  grid-template-columns: minmax(176px, 220px);
  justify-content: end;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-advanced-shell,
.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="advanced-focus"] .device-node-primary-shell {
  align-self: start;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-shell > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-shell > summary::-webkit-details-marker {
  display: none;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-shell[open] > summary {
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 70%, transparent);
  background:
    radial-gradient(220px 84px at 0% -26%, color-mix(in oklch, var(--primary) 6%, transparent), transparent 72%),
    color-mix(in oklch, var(--surface-control) 54%, transparent);
}

.layout[data-active-tab="device-nodes"] .device-node-primary-summary-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-summary-copy .device-node-section-kicker {
  margin: 0;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-summary-copy strong {
  color: color-mix(in oklch, var(--foreground) 97%, white);
  font-size: 0.98rem;
  line-height: 1.18;
  letter-spacing: -0.012em;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-summary-hint {
  max-width: 38ch;
  color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
  font-size: 0.76rem;
  line-height: 1.5;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-summary-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-shell[open] .device-node-shell-head {
  display: none;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-shell:not([open]),
.layout[data-active-tab="device-nodes"] .device-node-primary-shell:not([open]) {
  background: color-mix(in oklch, var(--surface-control) 42%, transparent);
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-shell:not([open]) > summary {
  min-height: 0;
  gap: 10px;
  padding: 12px 14px;
  align-items: center;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-shell:not([open]) > summary {
  min-height: 0;
  gap: 10px;
  padding: 12px 14px;
  align-items: center;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-shell:not([open]) .device-node-advanced-title,
.layout[data-active-tab="device-nodes"] .device-node-primary-shell:not([open]) .device-node-primary-summary-copy strong {
  font-size: 0.9rem;
  line-height: 1.18;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-shell:not([open]) .device-node-advanced-hint,
.layout[data-active-tab="device-nodes"] .device-node-primary-shell:not([open]) .device-node-primary-summary-hint {
  max-width: 34ch;
  font-size: 0.7rem;
  line-height: 1.4;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-shell:not([open]) .device-node-advanced-summary-strip,
.layout[data-active-tab="device-nodes"] .device-node-primary-shell:not([open]) .device-node-primary-summary-strip {
  gap: 5px;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-shell:not([open]) .device-node-context-chip,
.layout[data-active-tab="device-nodes"] .device-node-primary-shell:not([open]) .device-node-context-chip {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 0.64rem;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-advanced-shell:not([open]) .device-node-advanced-hint,
.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-primary-shell:not([open]) .device-node-primary-summary-hint {
  display: none;
}

.layout[data-active-tab="device-nodes"] .device-node-shell-head {
  margin-bottom: 16px;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-shell .device-node-shell-head {
  margin-bottom: 0;
  gap: 10px;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-shell .device-node-shell-aside {
  max-width: 36ch;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  border-radius: 16px;
  background: color-mix(in oklch, var(--surface-control) 52%, transparent);
  color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
  font-size: 0.76rem;
  line-height: 1.52;
}

.layout[data-active-tab="device-nodes"] .device-node-write-guard {
  border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 12px 14px;
  padding: 12px 13px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 72%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-write-guard.is-admin {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft));
  background:
    radial-gradient(220px 84px at 100% -24%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 88%, var(--surface-panel)),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.layout[data-active-tab="device-nodes"] .device-node-write-guard .status-pill {
  justify-self: start;
}

.layout[data-active-tab="device-nodes"] .device-node-write-guard-copy {
  gap: 5px;
}

.layout[data-active-tab="device-nodes"] .device-node-write-guard-copy strong {
  max-width: 28ch;
  font-size: 0.9rem;
  line-height: 1.24;
}

.layout[data-active-tab="device-nodes"] .device-node-write-guard-copy p {
  max-width: 40ch;
  font-size: 0.76rem;
  line-height: 1.46;
}

.layout[data-active-tab="device-nodes"] .device-node-write-guard-side {
  grid-template-columns: minmax(156px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.layout[data-active-tab="device-nodes"] .device-node-role-field {
  min-width: 0;
}

.layout[data-active-tab="device-nodes"] .device-node-role-field span {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.layout[data-active-tab="device-nodes"] .device-node-write-guard-side .status-pill {
  min-height: 30px;
  padding-inline: 10px;
  font-size: 0.68rem;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-action-shell {
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 20px;
  background: color-mix(in oklch, var(--surface-control) 56%, transparent);
  gap: 8px;
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-action-shell .device-node-action-upsert {
  width: 100%;
  min-height: 44px;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-action-shell .device-node-action-upsert[disabled] {
  border-color: color-mix(in oklch, var(--border-soft) 78%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 70%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-action-shell .device-node-action-upsert[disabled]:hover {
  transform: none;
  border-color: color-mix(in oklch, var(--border-soft) 78%, transparent);
}

.layout[data-active-tab="device-nodes"] .device-node-primary-shell .device-node-form-grid {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-shell .device-node-form-grid .field {
  grid-column: auto;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-action-hint {
  max-width: 36ch;
  font-size: 0.76rem;
  line-height: 1.42;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-primary-body {
  gap: 16px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-write-guard {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-write-guard-copy strong {
  max-width: 34ch;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-primary-shell .device-node-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-primary-shell .device-node-form-grid .field:nth-child(5) {
  grid-column: 1 / -1;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-actions-support {
  justify-content: flex-end;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-primary-summary-strip {
  gap: 5px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-primary-summary-strip .device-node-context-chip {
  min-height: 26px;
  padding: 3px 9px;
  font-size: 0.64rem;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-write-guard {
  padding: 10px 12px;
  gap: 10px 12px;
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 64%, transparent),
      color-mix(in oklch, var(--surface-panel) 94%, transparent)
    );
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-write-guard-copy {
  gap: 4px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-write-guard-copy strong {
  max-width: 30ch;
  font-size: 0.84rem;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-write-guard-copy p {
  max-width: 34ch;
  font-size: 0.72rem;
  line-height: 1.42;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-write-guard-side {
  grid-template-columns: minmax(144px, auto) auto;
  align-items: center;
  gap: 8px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-role-field {
  gap: 5px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-role-field > span {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-write-guard-side .status-pill {
  min-height: 26px;
  padding-inline: 8px;
  font-size: 0.64rem;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-primary-action-shell {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-primary-action-shell .device-node-action-upsert {
  min-height: 42px;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-primary-action-hint {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  line-height: 1.42;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-actions-support {
  width: fit-content;
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 8px;
  justify-self: flex-end;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-actions-support > button {
  min-height: 36px;
  padding-inline: 12px;
  font-size: 0.7rem;
}

.layout[data-active-tab="device-nodes"] .device-node-primary-action-shell button[disabled],
.layout[data-active-tab="device-nodes"] .device-node-advanced-shell button[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-shell-aside {
  max-width: 28ch;
  border-radius: 16px;
  background:
    radial-gradient(220px 88px at 100% -28%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 76%, transparent);
}

.layout[data-active-tab="device-nodes"] .device-node-guide-rail {
  margin-top: 2px;
  gap: 6px;
}

.layout[data-active-tab="device-nodes"] .device-node-guide-chip {
  min-height: 24px;
  padding: 3px 9px;
  font-size: 0.64rem;
  border-color: color-mix(in oklch, var(--border-soft) 76%, transparent);
  background: color-mix(in oklch, var(--surface-control) 56%, transparent);
}

.layout[data-active-tab="device-nodes"] .device-node-guide-muted {
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
}

.layout[data-active-tab="device-nodes"] .device-node-selection-strip,
.layout[data-active-tab="device-nodes"] .device-node-fleet-summary,
.layout[data-active-tab="device-nodes"] .device-node-fleet-shell > .device-node-shell-head {
  grid-column: 1 / -1;
}

.layout[data-active-tab="device-nodes"] .device-node-selection-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) repeat(3, minmax(112px, 0.56fr));
  gap: 8px;
  align-items: stretch;
}

.layout[data-active-tab="device-nodes"] .device-node-selection-card {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  border-radius: 16px;
  background: color-mix(in oklch, var(--surface-control) 46%, transparent);
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-selection-card.is-current {
  gap: 5px;
  padding: 14px 15px;
  border-color: color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  background:
    radial-gradient(220px 84px at 0% -18%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 74%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 68%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
}

.layout[data-active-tab="device-nodes"] .device-node-selection-card:not(.is-current) {
  align-content: center;
}

.layout[data-active-tab="device-nodes"] .device-node-selection-label {
  color: color-mix(in oklch, var(--muted-foreground) 92%, var(--foreground));
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.layout[data-active-tab="device-nodes"] .device-node-selection-value {
  color: color-mix(in oklch, var(--foreground) 98%, white);
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.22;
}

.layout[data-active-tab="device-nodes"] .device-node-selection-card.is-current .device-node-selection-value {
  font-size: 1rem;
}

.layout[data-active-tab="device-nodes"] .device-node-selection-card:not(.is-current) .device-node-selection-value {
  font-size: 0.96rem;
}

.layout[data-active-tab="device-nodes"] .device-node-selection-subvalue {
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  font-family: var(--font-mono);
  font-size: 0.69rem;
  line-height: 1.34;
  overflow-wrap: anywhere;
}

.layout[data-active-tab="device-nodes"] .device-node-selection-note {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground));
  font-size: 0.72rem;
}

.layout[data-active-tab="device-nodes"] .device-node-selection-note strong {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.layout[data-active-tab="device-nodes"] .device-node-fleet-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.layout[data-active-tab="device-nodes"] .device-node-fleet-card {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 1 auto;
  padding: 8px 11px;
  border-radius: 999px;
  border-color: color-mix(in oklch, var(--border-soft) 68%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 48%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-fleet-card::after {
  display: none;
}

.layout[data-active-tab="device-nodes"] .device-node-fleet-card h3 {
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.layout[data-active-tab="device-nodes"] .device-node-fleet-card p {
  font-size: 0.88rem;
  line-height: 1;
}

.layout[data-active-tab="device-nodes"] .device-node-fleet-note {
  font-size: 0.62rem;
  line-height: 1;
}

.layout[data-active-tab="device-nodes"] .device-node-fleet-card.is-total .device-node-fleet-note {
  display: none;
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot {
  margin-top: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border-soft));
  border-radius: 18px;
  background:
    radial-gradient(260px 100px at 0% -24%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface-control) 82%, transparent),
      color-mix(in oklch, var(--surface-panel) 96%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent);
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot-head {
  gap: 6px;
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot-head h3 {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot-head .status-pill {
  min-height: 24px;
  padding: 2px 8px;
  font-size: 0.64rem;
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot-grid {
  gap: 7px;
  overflow: visible;
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot-row-head {
  display: none;
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot-row {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 8px;
  padding: 8px 10px;
  border-radius: 14px;
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot-identity {
  flex: 1 1 180px;
  gap: 1px;
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot-identity strong {
  font-size: 0.78rem;
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot-identity small {
  font-size: 0.67rem;
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot-row .device-node-snapshot-status {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 0.66rem;
}

.layout[data-active-tab="device-nodes"] .device-node-snapshot-platform,
.layout[data-active-tab="device-nodes"] .device-node-snapshot-last-seen {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface-control) 46%, transparent);
  font-size: 0.66rem;
  line-height: 1.2;
  white-space: nowrap;
}

.layout[data-active-tab="device-nodes"] .device-node-list-hint {
  margin: 0;
  min-height: 0;
  padding: 13px 14px 13px 44px;
  align-self: start;
}

.layout[data-active-tab="device-nodes"] .device-node-list {
  margin-top: 0;
  min-height: 320px;
  max-height: 740px;
  padding: 12px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
}

.layout[data-active-tab="device-nodes"] .device-node-list.is-compact {
  min-height: 0;
  max-height: none;
}

.layout[data-active-tab="device-nodes"] .device-node-empty-state {
  min-height: 100%;
  align-content: center;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-list {
  min-height: clamp(320px, 40vh, 420px);
  max-height: none;
  overflow: visible;
  align-content: stretch;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-list.is-empty {
  grid-template-columns: minmax(0, 1fr);
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-empty-state {
  min-height: 100%;
  padding: 34px 36px;
  gap: 16px;
  align-content: center;
  justify-items: center;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-empty-title {
  font-size: 1.42rem;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-empty-hint {
  max-width: 52ch;
  font-size: 0.98rem;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-empty-actions {
  width: min(560px, 100%);
}

@media (min-width: 981px) {
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-shell .device-node-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-shell .device-node-form-grid .field,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-shell .device-node-form-grid .field:nth-child(5) {
    grid-column: auto;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-action-shell {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-action-shell .device-node-action-upsert {
    min-height: 42px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-primary-action-hint {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    line-height: 1.42;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-actions-support {
    width: fit-content;
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 8px;
    justify-self: flex-end;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes:not(.is-populated) .device-node-actions-support > button {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 0.68rem;
  }
}

.layout[data-active-tab="device-nodes"] .device-node-card {
  border-radius: 18px;
  padding: 13px 14px;
  border-color: color-mix(in oklch, var(--border-soft) 74%, transparent);
  background: color-mix(in oklch, var(--surface-control) 52%, transparent);
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-card-meta {
  grid-template-columns: 1fr;
  gap: 7px;
}

.layout[data-active-tab="device-nodes"] .device-node-card-row {
  gap: 1px;
  padding: 7px 9px;
}

.layout[data-active-tab="device-nodes"] .device-node-card-key {
  font-size: 0.68rem;
}

.layout[data-active-tab="device-nodes"] .device-node-card-value {
  font-size: 0.78rem;
}

.layout[data-active-tab="device-nodes"] .device-node-list-shell {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 20px;
  background: color-mix(in oklch, var(--surface-control) 48%, transparent);
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-list-shell-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.layout[data-active-tab="device-nodes"] .device-node-list-shell-head > div {
  display: grid;
  gap: 7px;
}

.layout[data-active-tab="device-nodes"] .device-node-list-shell-rail {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.layout[data-active-tab="device-nodes"] .device-node-list-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.layout[data-active-tab="device-nodes"] .device-node-list-action {
  min-height: 34px;
  padding: 6px 12px;
  border-color: color-mix(in oklch, var(--border-soft) 76%, transparent);
  background: color-mix(in oklch, var(--surface-control) 52%, transparent);
  color: color-mix(in oklch, var(--foreground) 92%, white);
  font-size: 0.71rem;
}

.layout[data-active-tab="device-nodes"] .device-node-list-shell-head h3 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 1.02rem;
  line-height: 1.2;
}

.layout[data-active-tab="device-nodes"] .device-node-list-shell-head p:last-child,
.layout[data-active-tab="device-nodes"] .device-node-list-shell-head > div > p:last-child {
  margin: 0;
  max-width: 62ch;
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  font-size: 0.84rem;
  line-height: 1.58;
}

.layout[data-active-tab="device-nodes"] .device-node-list-shell .device-node-shell-aside {
  max-width: 29ch;
}

.layout[data-active-tab="device-nodes"] .device-node-list-shell .device-node-list-hint {
  margin: 0;
}

.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-advanced-shell:not([open]),
.layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-primary-shell:not([open]) {
  display: none;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-shell > summary {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-title {
  font-size: 0.98rem;
  line-height: 1.22;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-hint {
  max-width: 40ch;
  font-size: 0.75rem;
  line-height: 1.44;
  text-align: left;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-summary-strip .device-node-context-chip {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.7rem;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-body {
  gap: 10px;
  padding: 0 16px 16px;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(200px 74px at 0% -18%, color-mix(in oklch, var(--primary) 6%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 46%, transparent);
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-card-head {
  display: grid;
  gap: 4px;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-card-kicker {
  margin: 0;
  color: color-mix(in oklch, var(--primary) 72%, var(--foreground));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-card-head h4 {
  margin: 0;
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.94rem;
  line-height: 1.22;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-card-head p {
  margin: 0;
  max-width: 48ch;
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  font-size: 0.74rem;
  line-height: 1.42;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-inline-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-inline-note {
  margin: 0;
  min-height: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 58%, transparent);
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  font-size: 0.74rem;
  line-height: 1.42;
}

.layout[data-active-tab="device-nodes"] .device-node-form-grid-secondary {
  border: 0;
  padding: 0;
  gap: 12px;
  background: none;
  box-shadow: none;
}

.layout[data-active-tab="device-nodes"] .device-node-form-grid-secondary .field,
.layout[data-active-tab="device-nodes"] .device-node-support-grid .field {
  gap: 6px;
  padding: 12px 13px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 74%, transparent);
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 74%, transparent);
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-panel {
  border: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(200px 74px at 0% -18%, color-mix(in oklch, var(--primary) 6%, transparent), transparent 74%),
    color-mix(in oklch, var(--surface-control) 46%, transparent);
  box-shadow: none;
  overflow: clip;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-panel > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-panel > summary::-webkit-details-marker {
  display: none;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-panel > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  justify-self: end;
  border-right: 2px solid color-mix(in oklch, var(--muted-foreground) 82%, var(--foreground));
  border-bottom: 2px solid color-mix(in oklch, var(--muted-foreground) 82%, var(--foreground));
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-panel[open] > summary::after {
  transform: rotate(225deg);
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-panel[open] > summary {
  border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-panel-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-panel-kicker {
  margin: 0;
  color: color-mix(in oklch, var(--primary) 72%, var(--foreground));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-panel-title {
  color: color-mix(in oklch, var(--foreground) 96%, white);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.22;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-panel-hint {
  color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground));
  font-size: 0.73rem;
  line-height: 1.42;
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-panel-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.layout[data-active-tab="device-nodes"] .device-node-support-grid .meta-box {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
  font-size: 0.74rem;
  line-height: 1.42;
}

.layout[data-active-tab="device-nodes"] .device-node-support-grid .field > span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground) 86%, var(--foreground));
}

.layout[data-active-tab="device-nodes"] .device-node-advanced-card-actions .device-node-support-grid .field {
  gap: 5px;
  padding: 10px 11px;
  border-radius: 14px;
  background: color-mix(in oklch, var(--surface-control) 54%, transparent);
}

.layout[data-active-tab="device-nodes"] .device-node-actions-secondary {
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.layout[data-active-tab="device-nodes"] .device-node-actions-secondary > button {
  min-height: 42px;
}

.layout[data-active-tab="device-nodes"] .device-node-actions-secondary .device-node-action-conflict {
  grid-column: auto;
}

.layout[data-active-tab="device-nodes"] .device-node-list-toolbar {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  gap: 10px 12px;
  align-items: end;
}

.layout[data-active-tab="device-nodes"] .device-node-list-context {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklch, var(--border-soft) 78%, transparent);
  gap: 6px;
}

.layout[data-active-tab="device-nodes"] .device-node-context-chip {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 0.68rem;
  background: color-mix(in oklch, var(--surface-control) 46%, transparent);
}

.layout[data-active-tab="device-nodes"] .device-node-list-stats {
  min-height: 42px;
  min-width: 188px;
  padding: 8px 12px;
  font-size: 0.78rem;
}

.layout[data-active-tab="device-nodes"] .device-node-card {
  gap: 10px;
  padding: 15px;
}

.layout[data-active-tab="device-nodes"] .device-node-card-title strong {
  font-size: 0.98rem;
}

.layout[data-active-tab="device-nodes"] .device-node-card-title span {
  font-size: 0.75rem;
}

.layout[data-active-tab="device-nodes"] .device-node-card-glance {
  gap: 8px;
}

.layout[data-active-tab="device-nodes"] .device-node-card-fact {
  padding: 8px 9px;
}

.layout[data-active-tab="device-nodes"] .device-node-card-route {
  padding: 11px 12px;
}

.layout[data-active-tab="device-nodes"] .device-node-card-route-value {
  font-size: 0.76rem;
}

.layout[data-active-tab="device-nodes"] .device-node-card-footer {
  gap: 8px;
}

.layout[data-active-tab="device-nodes"] .device-node-card-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.layout[data-active-tab="device-nodes"] .device-node-card-selection {
  min-height: 24px;
  padding: 3px 9px;
  font-size: 0.68rem;
}

.layout[data-active-tab="device-nodes"] .device-node-card-action {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 0.71rem;
}

.layout[data-active-tab="device-nodes"] .device-node-cap-pill {
  padding: 4px 8px;
  font-size: 0.7rem;
}

@media (max-width: 1240px) {
  .layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-fleet-shell {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-advanced-shell {
    grid-column: auto;
  }

  .layout[data-active-tab="device-nodes"] .device-node-primary-shell {
    grid-column: auto;
  }

  .layout[data-active-tab="device-nodes"] .device-node-selection-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout[data-active-tab="device-nodes"] .device-node-context-row,
  .layout[data-active-tab="device-nodes"] .device-node-list {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-card-glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout[data-active-tab="device-nodes"] .device-node-card-footer {
    flex-wrap: wrap;
  }

  .layout[data-active-tab="device-nodes"] .device-node-list-hint,
  .layout[data-active-tab="device-nodes"] .device-node-list,
  .layout[data-active-tab="device-nodes"] .device-node-snapshot {
    grid-column: auto;
  }

  .layout[data-active-tab="device-nodes"] .device-node-primary-shell > summary {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-primary-summary-strip {
    justify-content: flex-start;
  }
}

@media (min-width: 981px) {
  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal.is-device-populated {
    padding: 10px 12px 11px;
    gap: 7px;
    border-radius: 20px;
    background:
      radial-gradient(220px 84px at 100% -20%, color-mix(in oklch, var(--primary) 6%, transparent), transparent 78%),
      linear-gradient(
        165deg,
        color-mix(in oklch, var(--surface-control) 82%, var(--surface-panel)),
        color-mix(in oklch, var(--surface-panel-2) 97%, var(--surface-control))
      );
  }

  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal.is-device-populated .dashboard-workspace-head {
    gap: 7px 10px;
  }

  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal.is-device-populated .dashboard-workspace-head > div {
    gap: 4px 9px;
  }

  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal.is-device-populated .dashboard-workspace-title {
    font-size: 0.92rem;
    letter-spacing: -0.01em;
  }

  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal.is-device-populated .dashboard-workspace-description {
    display: none;
  }

  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal.is-device-populated .dashboard-shell-meta {
    gap: 5px;
  }

  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal.is-device-populated .dashboard-glance-card {
    padding: 5px 9px;
    gap: 5px;
    background: color-mix(in oklch, var(--surface-control) 34%, transparent);
  }

  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal.is-device-populated .dashboard-glance-label {
    font-size: 0.54rem;
  }

  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal.is-device-populated .dashboard-glance-value {
    font-size: 0.74rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated {
    gap: 14px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-context-row {
    display: none;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-hero {
    grid-template-columns: minmax(0, 1fr) minmax(228px, 0.54fr);
    gap: 8px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-hero-copy,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-card {
    padding: 12px 14px;
    border-color: color-mix(in oklch, var(--border-soft) 64%, transparent);
    box-shadow: none;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-hero-copy {
    gap: 3px;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 64%, transparent),
        color-mix(in oklch, var(--surface-panel) 94%, transparent)
      );
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-card {
    min-width: 238px;
    gap: 5px;
    align-content: center;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 58%, transparent),
        color-mix(in oklch, var(--surface-panel) 94%, transparent)
      );
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-hero-copy h3,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-card h3 {
    font-size: 0.88rem;
    line-height: 1.16;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-hero-copy > p,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-card > p {
    font-size: 0.69rem;
    line-height: 1.4;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-rail {
    margin-top: 0;
    gap: 5px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-chip {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.61rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-strip {
    grid-template-columns: minmax(0, 1.74fr) repeat(3, minmax(102px, 0.42fr));
    gap: 6px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-card {
    gap: 3px;
    padding: 9px 10px;
    border-color: color-mix(in oklch, var(--border-soft) 62%, transparent);
    background: color-mix(in oklch, var(--surface-control) 38%, transparent);
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-card.is-current {
    gap: 4px;
    padding: 12px 13px;
    background:
      radial-gradient(220px 84px at 0% -18%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 74%),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 62%, transparent),
        color-mix(in oklch, var(--surface-panel) 94%, transparent)
      );
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-label {
    font-size: 0.58rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-card.is-current .device-node-selection-value {
    font-size: 0.96rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-card:not(.is-current) .device-node-selection-value {
    font-size: 0.84rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-subvalue {
    font-size: 0.64rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-note {
    font-size: 0.67rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-fleet-summary {
    gap: 6px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-fleet-card {
    gap: 6px;
    padding: 6px 10px;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 38%, transparent),
        color-mix(in oklch, var(--surface-panel) 94%, transparent)
      );
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-fleet-card p {
    font-size: 0.82rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-fleet-note {
    font-size: 0.58rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-shell-head {
    gap: 12px;
    margin-bottom: 14px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-shell .device-node-shell-aside {
    max-width: 24ch;
    padding: 9px 11px;
    font-size: 0.71rem;
    line-height: 1.42;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-stack[data-support-layout="primary-focus"],
  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-stack[data-support-layout="advanced-focus"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-stack[data-support-layout="dual-open"] {
    grid-template-columns: minmax(260px, 0.32fr) minmax(0, 0.68fr);
    gap: 14px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-stack[data-support-layout="primary-focus"] .device-node-primary-shell {
    grid-column: 1;
    width: min(100%, 860px);
    max-width: 860px;
    justify-self: end;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-stack[data-support-layout="advanced-focus"] .device-node-advanced-shell {
    grid-column: 1;
    width: min(100%, 760px);
    max-width: 760px;
    justify-self: start;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-primary-shell[open] > summary {
    padding: 12px 14px;
    background:
      radial-gradient(220px 84px at 0% -26%, color-mix(in oklch, var(--primary) 5%, transparent), transparent 72%),
      color-mix(in oklch, var(--surface-control) 48%, transparent);
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-primary-summary-copy strong {
    font-size: 0.92rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-primary-summary-hint {
    max-width: 34ch;
    font-size: 0.72rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-primary-body {
    gap: 12px;
    padding: 14px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-write-guard {
    padding: 9px 11px;
    gap: 9px 11px;
    border-radius: 16px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-write-guard-copy strong {
    font-size: 0.82rem;
    max-width: 28ch;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-write-guard-copy p {
    font-size: 0.71rem;
    line-height: 1.4;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-primary-shell .device-node-form-grid {
    gap: 10px 12px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-primary-shell .device-node-form-grid .field {
    padding: 11px 12px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-primary-action-shell {
    padding: 10px 11px;
    border-radius: 16px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-primary-action-shell .device-node-action-upsert {
    min-height: 40px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-primary-action-hint {
    font-size: 0.71rem;
  }
}

@media (max-width: 980px) {
  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-shell-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-glance-card {
    justify-content: space-between;
  }

  .layout[data-active-tab="device-nodes"] .dashboard-workspace-glances {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-hero {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-hero {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-guide-card {
    min-width: 0;
  }

  .layout[data-active-tab="device-nodes"] .device-node-step-strip {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-advanced-grid {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-advanced-inline-notes {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-list-toolbar {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-list-shell-head {
    flex-direction: column;
  }

  .layout[data-active-tab="device-nodes"] .device-node-list-shell-rail,
  .layout[data-active-tab="device-nodes"] .device-node-list-actions {
    justify-items: start;
    justify-content: flex-start;
  }

  .device-node-write-guard,
  .layout[data-active-tab="device-nodes"] .device-node-write-guard-side {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-write-guard .status-pill {
    justify-self: start;
  }

  .layout[data-active-tab="device-nodes"] .device-node-advanced-shell > summary {
    grid-template-columns: 1fr;
  }

  .device-node-advanced-summary-strip {
    justify-content: flex-start;
  }

  .layout[data-active-tab="device-nodes"] .device-node-actions-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout[data-active-tab="device-nodes"] .device-node-actions-secondary .device-node-action-conflict {
    grid-column: 1 / -1;
  }

  .layout[data-active-tab="device-nodes"] .device-node-list-stats {
    justify-self: start;
    min-width: 0;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-primary-action-shell {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes .device-node-stack[data-support-layout="primary-focus"] .device-node-actions-support {
    width: 100%;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
  }
}

/* 2026-03-12: device nodes desktop fleet quiet pass */
@media (min-width: 1241px) {
  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-strip {
    grid-template-columns: minmax(0, 1.38fr) minmax(112px, 0.4fr) minmax(140px, 0.5fr);
    gap: 6px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-card {
    gap: 2px;
    padding: 8px 10px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-card.is-version {
    display: none;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-card.is-current {
    padding: 11px 12px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-note {
    margin-top: 2px;
    justify-content: flex-start;
    gap: 6px;
    font-size: 0.64rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-selection-note strong {
    font-size: 0.72rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-fleet-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-fleet-card.is-total {
    display: none;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-fleet-card {
    padding: 6px 9px;
    gap: 6px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-fleet-card p {
    font-size: 0.8rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-fleet-note {
    font-size: 0.58rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-shell {
    gap: 10px;
    padding: 12px;
    border-color: color-mix(in oklch, var(--border-soft) 62%, transparent);
    background:
      radial-gradient(220px 84px at 100% -24%, color-mix(in oklch, var(--primary) 5%, transparent), transparent 76%),
      color-mix(in oklch, var(--surface-control) 34%, transparent);
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-shell-head {
    gap: 14px;
    align-items: start;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-shell-head h3 {
    font-size: 0.92rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-shell-head > div > p:last-child,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-shell .device-node-shell-aside {
    font-size: 0.72rem;
    line-height: 1.38;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-shell-rail {
    align-items: end;
    justify-items: end;
    gap: 5px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-actions {
    gap: 6px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-action {
    min-height: 28px;
    padding: 4px 10px;
    border-style: dashed;
    border-color: color-mix(in oklch, var(--border-soft) 70%, transparent);
    background: color-mix(in oklch, var(--surface-control) 18%, transparent);
    color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground));
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: none;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-action:hover {
    border-color: color-mix(in oklch, var(--primary) 30%, var(--border-soft));
    background: color-mix(in oklch, var(--surface-control) 26%, transparent);
    color: color-mix(in oklch, var(--foreground) 92%, white);
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-hint.is-ready {
    padding: 8px 10px 8px 28px;
    border-style: dashed;
    border-color: color-mix(in oklch, var(--border-soft) 76%, transparent);
    background: color-mix(in oklch, var(--surface-control) 18%, transparent);
    font-size: 0.73rem;
    line-height: 1.36;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-hint.is-ready::before {
    left: 10px;
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--chart-1) 10%, transparent);
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list-shell .device-node-shell-aside {
    max-width: 20ch;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
    text-align: right;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot {
    padding: 12px;
    gap: 10px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot.is-compact-switcher {
    padding: 11px;
    gap: 8px;
    border-color: color-mix(in oklch, var(--border-soft) 72%, transparent);
    background:
      radial-gradient(180px 72px at 0% -20%, color-mix(in oklch, var(--primary) 6%, transparent), transparent 76%),
      linear-gradient(180deg, color-mix(in oklch, var(--surface-control) 78%, transparent), color-mix(in oklch, var(--surface-panel) 95%, transparent));
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-head {
    gap: 10px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-head h3 {
    font-size: 0.82rem;
    letter-spacing: 0.05em;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-head .status-pill {
    min-height: 26px;
    padding: 3px 9px;
    font-size: 0.68rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-head .status-pill.is-compact-switcher {
    min-height: 24px;
    padding: 2px 8px;
    border-color: color-mix(in oklch, var(--border-soft) 70%, transparent);
    background: color-mix(in oklch, var(--surface-control) 34%, transparent);
    font-size: 0.64rem;
    letter-spacing: 0.01em;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-grid {
    gap: 8px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-grid.is-compact-switcher {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-row {
    grid-template-columns: minmax(0, 1.7fr) minmax(84px, 0.46fr) minmax(0, 0.66fr) minmax(100px, 0.6fr);
    min-width: 560px;
    gap: 8px;
    padding: 10px 11px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-row-head {
    padding: 8px 11px;
    min-width: 560px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-grid.is-compact-switcher .device-node-snapshot-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "identity status"
      "platform lastSeen";
    align-items: start;
    gap: 6px 8px;
    padding: 10px 11px;
    border-radius: 15px;
    background:
      radial-gradient(150px 56px at 0% -18%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 78%),
      color-mix(in oklch, var(--surface-control) 78%, transparent);
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-grid.is-compact-switcher .device-node-snapshot-row[role="button"]:hover {
    transform: none;
    border-color: color-mix(in oklch, var(--primary) 34%, var(--border-soft));
    background:
      radial-gradient(150px 56px at 0% -18%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 78%),
      color-mix(in oklch, var(--surface-control) 82%, transparent);
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-grid.is-compact-switcher .device-node-snapshot-identity {
    grid-area: identity;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-grid.is-compact-switcher .device-node-snapshot-row .device-node-snapshot-status {
    grid-area: status;
    justify-self: end;
    min-height: 22px;
    padding: 2px 8px;
    font-size: 0.64rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-grid.is-compact-switcher .device-node-snapshot-platform,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-grid.is-compact-switcher .device-node-snapshot-last-seen {
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    font-size: 0.67rem;
    line-height: 1.3;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-grid.is-compact-switcher .device-node-snapshot-platform {
    grid-area: platform;
    justify-self: start;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-grid.is-compact-switcher .device-node-snapshot-last-seen {
    grid-area: lastSeen;
    justify-self: end;
    text-align: right;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-identity strong {
    font-size: 0.8rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-identity small,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-platform,
  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-snapshot-last-seen {
    font-size: 0.7rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-list.is-dense {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card {
    padding: 12px;
    gap: 8px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-head {
    gap: 8px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-title {
    gap: 2px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-title strong {
    font-size: 0.88rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-title span {
    font-size: 0.68rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-glance {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 9px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-fact {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-fact-key {
    font-size: 0.55rem;
    letter-spacing: 0.07em;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-fact-value {
    font-size: 0.7rem;
    color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-route {
    gap: 5px;
    padding: 8px 9px;
    border-color: color-mix(in oklch, var(--primary) 10%, var(--border-soft));
    background: color-mix(in oklch, var(--surface-control) 40%, transparent);
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-route-label {
    font-size: 0.56rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-version {
    min-height: 20px;
    padding: 2px 6px;
    font-size: 0.62rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-route-value {
    font-size: 0.68rem;
    line-height: 1.28;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-caps {
    gap: 4px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-cap-pill {
    padding: 3px 6px;
    font-size: 0.63rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-cap-pill.is-overflow {
    border-style: dashed;
    background: color-mix(in oklch, var(--surface-control) 70%, transparent);
    color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground));
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-footer {
    gap: 6px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-selection {
    min-height: 22px;
    padding: 2px 8px;
    font-size: 0.62rem;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-actions {
    gap: 6px;
  }

  .layout[data-active-tab="device-nodes"] .panel-device-nodes.is-populated .device-node-card-action {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 0.66rem;
  }
}

@media (max-width: 720px) {
  .layout[data-active-tab="device-nodes"] .dashboard-workspace-summary.is-device-minimal .dashboard-workspace-description {
    display: none;
  }

  .layout[data-active-tab="device-nodes"] .device-node-context-row,
  .layout[data-active-tab="device-nodes"] .device-node-selection-strip,
  .layout[data-active-tab="device-nodes"] .device-node-fleet-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-card-glance {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-card-footer {
    align-items: stretch;
  }

  .layout[data-active-tab="device-nodes"] .device-node-card-actions {
    width: 100%;
  }

  .layout[data-active-tab="device-nodes"] .device-node-card-action {
    width: 100%;
    justify-content: center;
  }

  .layout[data-active-tab="device-nodes"] .device-node-actions-secondary {
    grid-template-columns: 1fr;
  }

  .layout[data-active-tab="device-nodes"] .device-node-actions-secondary .device-node-action-conflict {
    grid-column: auto;
  }
}


/* 2026-03-12: storyteller mobile prompt-canvas vertical rhythm pass */
@media (max-width: 720px) {
  .layout.is-story-focused .story-compose-shell {
    gap: 11px;
  }

  .layout.is-story-focused .story-mode-card.is-active {
    gap: 4px 10px;
    padding: 9px 12px;
  }

  .layout.is-story-focused .story-mode-card.is-active .story-mode-kicker {
    min-height: 22px;
    padding: 0 7px;
    font-size: 0.6875rem;
  }

  .layout.is-story-focused .story-mode-card.is-active .story-mode-hint {
    font-size: 0.69rem;
    line-height: 1.32;
    -webkit-line-clamp: 1;
  }

  .layout.is-story-focused .story-signal-strip {
    padding-bottom: 0;
    gap: 6px;
  }

  .layout.is-story-focused .story-compose-canvas {
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
  }

  .layout.is-story-focused .story-compose-field {
    gap: 10px;
  }

  .layout.is-story-focused .story-compose-field textarea {
    min-height: 154px;
    padding: 14px 15px 16px;
    border-radius: 16px;
    line-height: 1.58;
  }

  .layout.is-story-focused .story-compose-actions {
    padding-top: 6px;
    border-top-color: color-mix(in oklch, var(--border-soft) 42%, transparent);
  }

  .layout.is-story-focused .story-compose-secondary-actions > #storyComposerTemplateBtn {
    min-height: 38px;
    padding: 0 13px;
  }

  .layout.is-story-focused .story-tray-grid {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 32%, transparent);
  }
}

@media (max-width: 560px) {
  .layout.is-story-focused .story-compose-shell {
    gap: 9px;
  }

  .layout.is-story-focused .story-mode-card.is-active {
    gap: 3px 9px;
    padding: 8px 11px;
    border-radius: 14px;
  }

  .layout.is-story-focused .story-mode-card.is-active .story-mode-title {
    font-size: 0.88rem;
  }

  .layout.is-story-focused .story-mode-card.is-active .story-mode-kicker {
    min-height: 20px;
    padding: 0 6px;
    font-size: 0.6875rem;
  }

  .layout.is-story-focused .story-mode-card.is-active .story-mode-hint {
    display: none;
  }

  .layout.is-story-focused .story-compose-canvas {
    gap: 7px;
    padding: 11px;
    border-radius: 14px;
  }

  .layout.is-story-focused .story-compose-field {
    gap: 8px;
  }

  .layout.is-story-focused .story-compose-field .field-inline-hint {
    display: none;
  }

  .layout.is-story-focused .story-compose-field .field-heading > span:first-child {
    font-size: 0.92rem;
  }

  .layout.is-story-focused .story-compose-field textarea {
    min-height: 124px;
    padding: 11px 12px 13px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.54;
  }

  .layout.is-story-focused .story-compose-meta {
    gap: 4px 6px;
  }

  .layout.is-story-focused .story-compose-count {
    padding: 0;
    min-height: 0;
    border-color: transparent;
    background: transparent;
    font-size: 0.6875rem;
  }

  .layout.is-story-focused .story-compose-actions {
    padding-top: 4px;
    gap: 6px;
    border-top-color: color-mix(in oklch, var(--border-soft) 28%, transparent);
  }

  .layout.is-story-focused .story-compose-actions > #storyComposerSubmitBtn {
    min-height: 44px;
    font-size: 0.84rem;
  }

  .layout.is-story-focused .story-compose-secondary-actions > #storyComposerTemplateBtn {
    min-height: 36px;
    padding: 0 11px;
    font-size: 0.74rem;
  }

  .layout.is-story-focused .story-compose-secondary-actions > #storyComposerOpenLiveBtn {
    font-size: 0.72rem;
  }

  .layout.is-story-focused .story-tray-grid {
    margin-top: 8px;
    padding-top: 8px;
    gap: 5px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 24%, transparent);
  }

  .layout.is-story-focused .story-tray:not([open]) > summary {
    gap: 3px;
    padding: 9px 10px;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-title {
    font-size: 0.84rem;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-summary-text {
    font-size: 0.6875rem;
    line-height: 1.3;
    -webkit-line-clamp: 1;
  }
}

/* ================================================================
   2026-03-12  Pass 1 + 2 — prompt-first & compose-canvas focal card
   Inspired by Krea / Luma Dream Machine / Kling patterns
   ================================================================ */

/* ── Pass 1-A: Signal-strip → compact inline pills ──────────────── */

.layout.is-story-focused .story-signal-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 1px 0 0;
}

.layout.is-story-focused .story-signal-card {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  max-width: 24ch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.68rem;
  line-height: 1.3;
  box-shadow: none;
}

.layout.is-story-focused .story-signal-card:not(:last-child)::after {
  content: "·";
  flex-shrink: 0;
  margin-left: 2px;
  color: color-mix(in oklch, var(--foreground) 32%, var(--muted-foreground));
}

.layout.is-story-focused .story-signal-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.52rem;
  color: color-mix(in oklch, var(--foreground) 46%, var(--muted-foreground));
  flex-shrink: 0;
}

.layout.is-story-focused .story-signal-value {
  min-width: 0;
  font-weight: 520;
  color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Pass 1-B: Flow-strip → collapse by default ─────────────────── */

.layout.is-story-focused .story-flow-strip {
  display: none;
}

/* ── Pass 1-C: story-intro → hide on mobile ─────────────────────── */

@media (max-width: 980px) {
  .layout.is-story-focused .story-intro {
    display: none;
  }
}

/* ── Pass 1-D: compose-head intro → tighter on mobile ───────────── */

@media (max-width: 720px) {
  .layout.is-story-focused .story-compose-copy h3 {
    font-size: 1rem;
    line-height: 1.25;
  }

  .layout.is-story-focused .story-compose-copy p {
    font-size: 0.7rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  .layout.is-story-focused .story-compose-copy p {
    display: none;
  }

  .layout.is-story-focused .story-compose-copy h3 {
    font-size: 0.92rem;
  }

  .layout.is-story-focused .story-signal-card {
    max-width: none;
    font-size: 0.6875rem;
    line-height: 1.24;
    padding: 0;
  }

  .layout.is-story-focused .story-signal-label {
    display: none;
  }

  .layout.is-story-focused .story-signal-card:not(:last-child)::after {
    margin-left: 1px;
  }
}


/* ── Pass 2-A: compose-canvas → focal card with border + shadow ── */

.layout.is-story-focused .story-compose-canvas {
  border: 1px solid color-mix(in oklch, var(--border-soft) 55%, transparent);
  border-radius: 20px;
  box-shadow:
    0 1px 3px color-mix(in oklch, var(--shadow-color, #000) 6%, transparent),
    0 4px 16px color-mix(in oklch, var(--shadow-color, #000) 4%, transparent);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.layout.is-story-focused .story-compose-canvas:focus-within {
  border-color: color-mix(in oklch, var(--accent) 40%, var(--border-soft));
  box-shadow:
    0 1px 3px color-mix(in oklch, var(--shadow-color, #000) 8%, transparent),
    0 6px 24px color-mix(in oklch, var(--shadow-color, #000) 6%, transparent);
}

/* ── Pass 2-B: Generate button → stronger presence ──────────────── */

.layout.is-story-focused .story-compose-actions button:first-child {
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.layout.is-story-focused .story-compose-actions button:first-child:active {
  transform: scale(0.97);
}

/* ── Pass 2-C: textarea → subtle inner glow on focus ────────────── */

.layout.is-story-focused .story-compose-field textarea:focus {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 25%, transparent);
  border-color: color-mix(in oklch, var(--accent) 30%, var(--border-soft));
}


/* ── Pass 3: Mode-rail → pill-tabs ──────────────────────────────── */

.layout.is-story-focused .story-mode-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
}

.layout.is-story-focused .story-mode-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--border-soft) 50%, transparent);
  background: color-mix(in oklch, var(--surface-raised) 30%, transparent);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-direction: row;
}

.layout.is-story-focused .story-mode-card:hover {
  border-color: color-mix(in oklch, var(--accent) 30%, var(--border-soft));
  background: color-mix(in oklch, var(--surface-raised) 60%, transparent);
}

.layout.is-story-focused .story-mode-card.is-active {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--border-soft));
  background: color-mix(in oklch, var(--accent) 12%, var(--surface-raised));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 20%, transparent);
}

/* Hide "Mode" kicker — it repeats 4 times and is self-evident */
.layout.is-story-focused .story-mode-kicker {
  display: none;
}

/* Mode title → pill label */
.layout.is-story-focused .story-mode-title {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Mode hint → show only for active */
.layout.is-story-focused .story-mode-hint {
  display: none;
}

.layout.is-story-focused .story-mode-card.is-active .story-mode-hint {
  display: inline;
  font-size: 0.65rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

@media (max-width: 720px) {
  .layout.is-story-focused .story-mode-card {
    padding: 5px 11px;
  }

  .layout.is-story-focused .story-mode-title {
    font-size: 0.72rem;
  }

  .layout.is-story-focused .story-mode-card.is-active .story-mode-hint {
    display: none;
  }
}

@media (max-width: 560px) {
  .layout.is-story-focused .story-mode-card {
    padding: 4px 9px;
  }

  .layout.is-story-focused .story-mode-title {
    font-size: 0.6875rem;
  }
}


/* ── Pass 4: Tray-grid → 3 equal columns on desktop ─────────────── */

@media (min-width: 1200px) {
  .layout.is-story-focused .story-tray-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .layout.is-story-focused .story-tray {
    grid-column: span 1;
  }
}

/* ── Pass 5: Mobile brief-header → active mode + quiet cue line ─── */

@media (max-width: 720px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail {
    gap: 5px 6px;
    margin-top: -1px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) {
    opacity: 0.78;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active {
    gap: 2px 9px;
    padding: 9px 11px 8px;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
    box-shadow:
      0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
      0 0 0 1px color-mix(in oklch, var(--primary) 8%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip {
    margin-top: -4px;
    padding: 1px 0 0 12px;
    gap: 3px 6px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card {
    max-width: 15ch;
    font-size: 0.6875rem;
    line-height: 1.22;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card-scope {
    display: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card-delivery::after {
    content: none;
  }
}

@media (max-width: 560px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell {
    gap: 9px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active {
    gap: 2px 8px;
    padding: 8px 10px 7px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-title {
    font-size: 0.84rem;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip {
    padding-left: 10px;
    gap: 2px 5px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card {
    max-width: 13ch;
    font-size: 0.58rem;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-canvas {
    margin-top: 2px;
  }
}

/* ── Pass 6: Smallest mobile rail split → active mode, cues, choices ─ */

@media (max-width: 560px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell {
    grid-template-columns: repeat(3, max-content) minmax(0, 1fr);
    align-items: start;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head,
  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip,
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-canvas,
  .layout.is-story-focused .story-shell-top.is-prerun .story-tray-grid {
    grid-column: 1 / -1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail {
    display: contents;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active {
    order: 1;
    grid-column: 1 / -1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip {
    order: 2;
    margin-top: -3px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) {
    order: 3;
    justify-self: start;
    align-self: start;
    padding: 4px 8px;
    border-color: color-mix(in oklch, var(--border-soft) 24%, transparent);
    background: transparent;
    box-shadow: none;
    opacity: 0.68;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-canvas {
    order: 4;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray-grid {
    order: 5;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active):hover {
    border-color: color-mix(in oklch, var(--accent) 18%, var(--border-soft));
    background: color-mix(in oklch, var(--surface-raised) 14%, transparent);
    opacity: 0.88;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) .story-mode-title {
    font-size: 0.6875rem;
    line-height: 1.18;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip {
    position: relative;
    padding: 4px 0 0 10px;
    gap: 2px 5px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 1px;
    width: 1px;
    border-radius: 999px;
    background: color-mix(in oklch, var(--border-soft) 30%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card {
    max-width: 12ch;
    font-size: 0.6875rem;
    line-height: 1.22;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value {
    color: color-mix(in oklch, var(--foreground) 70%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card:not(:last-child)::after {
    margin-left: 1px;
    color: color-mix(in oklch, var(--foreground) 24%, var(--muted-foreground));
  }
}

/* Tray summary hint — single line ellipsis */
.layout.is-story-focused .story-tray-hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Pass 7: Micro-animations ────────────────────────────────────── */

/* Tray open/close */
.layout.is-story-focused .story-tray-body {
  animation: traySlideIn 0.25s ease;
}

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

/* Generate button hover lift */
.layout.is-story-focused .story-compose-actions button:first-child:hover {
  box-shadow:
    0 2px 8px color-mix(in oklch, var(--accent) 20%, transparent),
    0 0 0 1px color-mix(in oklch, var(--accent) 15%, transparent);
}

/* ================================================================
   2026-03-12  Pass 6 — Prompt quality indicator colors
   2026-03-12  Pass 8 — Empty state uplift
   ================================================================ */

/* ── Pass 6: Quality feedback colors ─────────────────────────────── */

.layout.is-story-focused .story-compose-count {
  transition: color 0.3s ease;
}

.layout.is-story-focused .story-compose-count[data-quality="short"] {
  color: color-mix(in oklch, oklch(0.75 0.15 65) 80%, var(--text-muted));
}

.layout.is-story-focused .story-compose-count[data-quality="fair"] {
  color: var(--text-muted);
}

.layout.is-story-focused .story-compose-count[data-quality="detailed"] {
  color: color-mix(in oklch, oklch(0.72 0.16 155) 80%, var(--text-muted));
}


/* ── Pass 8-A: Pre-run unified empty state ──────────────────────── */

/* Run rail — softer when idle */
.layout.is-story-focused .story-run-rail .story-stat-card.story-stat-card-metric.is-idle,
.layout.is-story-focused .story-run-rail .story-stat-card.story-stat-card-state.is-idle {
  opacity: 0.55;
}

/* ── Pass 7: Desktop-first brief header polish ───────────────────────── */
@media (min-width: 1180px) {
  .dashboard-body.is-story-focused {
    grid-template-columns: minmax(106px, 116px) minmax(0, 1fr);
    gap: 18px;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav {
    gap: 3px;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn {
    position: relative;
    min-height: 40px;
    padding: 5px 0 5px 12px;
    border: 0;
    border-radius: 0;
    gap: 4px;
    background: transparent;
    opacity: 0.6;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    border-radius: 999px;
    background: transparent;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:hover,
  .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn:focus-visible {
    opacity: 0.84;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active {
    background: transparent;
    box-shadow: none;
    opacity: 0.92;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav .tab-btn.active::before {
    background: color-mix(in oklch, var(--primary) 50%, transparent);
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav-copy {
    gap: 0;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav-title {
    font-size: 0.7rem;
    line-height: 1.2;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav-hint {
    display: none;
  }

  .dashboard-sidebar.is-story-focused .dashboard-nav-icon {
    font-size: 0.6875rem;
    line-height: 1.18;
    letter-spacing: 0.12em;
    opacity: 0.78;
  }

  .layout.is-story-focused .hero {
    gap: 1px 10px;
    padding: 0 1px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
  }

  .layout.is-story-focused .hero::before,
  .layout.is-story-focused .hero::after {
    display: none;
  }

  .layout.is-story-focused .hero-headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 2px 10px;
    align-items: baseline;
  }

  .layout.is-story-focused .hero h1 {
    font-size: 0.6875rem;
    line-height: 1.18;
    font-weight: 640;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--foreground) 34%, var(--muted-foreground));
  }

  .layout.is-story-focused .hero-toolbar {
    gap: 2px;
    align-items: center;
  }

  .layout.is-story-focused .hero-language-control {
    padding: 1px 0 1px 5px;
    border-color: transparent;
    background: transparent;
  }

  .layout.is-story-focused .hero-language-control > span {
    font-size: 0.6875rem;
    line-height: 1.16;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--foreground) 36%, var(--muted-foreground));
  }

  .layout.is-story-focused .hero-language-select {
    min-height: 24px;
    padding: 1px 7px;
    border-color: color-mix(in oklch, var(--border-soft) 20%, transparent);
    background: color-mix(in oklch, var(--surface-control) 8%, transparent);
    box-shadow: none;
    font-size: 0.6875rem;
  }

  .layout.is-story-focused #themeToggleBtn {
    min-height: 26px;
    padding: 3px 8px;
    font-size: 0.6875rem;
    background: transparent;
    border-color: transparent;
    opacity: 0.64;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal {
    margin-top: 0;
    gap: 0;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-eyebrow {
    display: none;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-head > div {
    gap: 2px 6px;
    max-width: 32ch;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-workspace-title {
    font-size: 0.72rem;
    line-height: 1.12;
    color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-shell-meta {
    gap: 0;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card {
    gap: 2px;
    padding-right: 5px;
    color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-card:not([hidden]):not(:last-child)::after {
    height: 8px;
    background: color-mix(in oklch, var(--border-soft) 32%, transparent);
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-label {
    font-size: 0.6875rem;
    line-height: 1.18;
    letter-spacing: 0.08em;
  }

  .layout.is-story-focused .dashboard-workspace-summary.is-story-minimal .dashboard-glance-value {
    font-size: 0.6875rem;
    line-height: 1.16;
  }

  .layout.is-story-focused .panel-story-studio {
    gap: 13px;
    padding: 15px 20px 17px;
    border-color: color-mix(in oklch, var(--border-soft) 66%, transparent);
    border-radius: 26px;
    background:
      radial-gradient(260px 120px at 100% 0%, color-mix(in oklch, var(--primary) 6%, transparent), transparent 80%),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-panel) 97%, transparent),
        color-mix(in oklch, var(--surface-panel-2) 95%, transparent)
      );
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent),
      0 10px 22px color-mix(in oklch, var(--shadow-color) 8%, transparent);
  }

  .layout.is-story-focused .panel-story-studio > h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 0;
    font-size: clamp(1.64rem, 1.08rem + 0.98vw, 1.98rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
  }

  .layout.is-story-focused .panel-story-studio > h2 .section-badge {
    min-height: 23px;
    padding: 3px 8px;
    border-color: color-mix(in oklch, var(--border-soft) 52%, transparent);
    background: transparent;
    font-size: 0.6875rem;
    line-height: 1.12;
    letter-spacing: 0.13em;
  }

  .layout.is-story-focused .story-intro {
    max-width: 30ch;
    margin-top: -5px;
    padding-left: 46px;
    font-size: 0.6875rem;
    line-height: 1.44;
    color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell {
    gap: 9px;
    padding: 18px 20px 18px;
    border-radius: 24px;
    border-color: color-mix(in oklch, var(--border-soft) 80%, transparent);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-panel) 97%, transparent),
        color-mix(in oklch, var(--surface-panel-2) 95%, transparent)
      );
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 4%, transparent),
      0 14px 30px color-mix(in oklch, var(--shadow-color) 10%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-shell::before {
    background:
      radial-gradient(220px 128px at 0% -12%, color-mix(in oklch, oklch(0.74 0.09 58) 10%, transparent), transparent 78%),
      radial-gradient(260px 140px at 100% 0%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 80%);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 7px 18px;
    align-items: start;
    padding-bottom: 7px;
    border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 40%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy {
    gap: 4px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-overview-chip {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 40%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.16;
    letter-spacing: 0.14em;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3 {
    max-width: 28ch;
    font-size: clamp(1.3rem, 1.14rem + 0.34vw, 1.48rem);
    line-height: 0.98;
    letter-spacing: -0.038em;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p {
    max-width: 44ch;
    font-size: 0.72rem;
    line-height: 1.38;
    color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
    -webkit-line-clamp: 2;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status {
    align-items: center;
    justify-content: flex-end;
    gap: 6px 12px;
    max-width: none;
    padding-top: 2px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status p {
    max-width: 24ch;
    font-size: 0.6875rem;
    line-height: 1.38;
    -webkit-line-clamp: 1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status[data-story-compose-state="pending"] p,
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status[data-story-compose-state="updating"] p {
    color: color-mix(in oklch, var(--foreground) 72%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-rail {
    grid-template-columns: minmax(0, 1.12fr) repeat(3, max-content);
    align-items: center;
    gap: 6px 9px;
    margin-top: 1px;
    padding: 4px 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 26%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 28%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) {
    min-height: 0;
    padding: 0 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0.58;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active):hover {
    border: 0;
    background: transparent;
    opacity: 0.82;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card:not(.is-active) .story-mode-title {
    font-size: 0.68rem;
    font-weight: 560;
    line-height: 1.16;
    letter-spacing: 0.01em;
    color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active {
    gap: 2px 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border-color: color-mix(in oklch, var(--border-soft) 30%, transparent);
    background: color-mix(in oklch, var(--surface-control) 12%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-kicker {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 40%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.14;
    letter-spacing: 0.12em;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-title {
    font-size: 0.82rem;
    line-height: 1.04;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-mode-card.is-active .story-mode-hint {
    max-width: 24ch;
    color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
    font-size: 0.64rem;
    line-height: 1.28;
    opacity: 0.82;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip {
    position: relative;
    align-items: baseline;
    gap: 0;
    margin-top: -1px;
    padding: 2px 0 0 11px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-strip::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 1px;
    width: 1px;
    background: color-mix(in oklch, var(--border-soft) 42%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    max-width: 18ch;
    padding: 0 10px 0 0;
    font-size: 0.6875rem;
    line-height: 1.24;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-card:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 9px;
    margin-left: 0;
    background: color-mix(in oklch, var(--border-soft) 46%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-label {
    flex-shrink: 0;
    font-size: 0.64rem;
    line-height: 1.16;
    letter-spacing: 0.06em;
    color: color-mix(in oklch, var(--foreground) 28%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-signal-value {
    display: block;
    max-width: 13ch;
    font-size: 0.66rem;
    line-height: 1.2;
    color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-canvas {
    margin-top: -1px;
    gap: 9px;
    padding: 16px 18px 15px;
    border-radius: 17px;
    border-color: color-mix(in oklch, var(--border-soft) 64%, transparent);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 72%, transparent),
        color-mix(in oklch, var(--surface-panel) 98%, transparent)
      );
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 2%, transparent),
      0 4px 14px color-mix(in oklch, var(--shadow-color) 4%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field {
    gap: 7px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading {
    display: grid;
    justify-content: start;
    gap: 3px;
    padding-left: 1px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading > span:first-child {
    font-size: 0.88rem;
    line-height: 1.04;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-inline-hint {
    max-width: 40ch;
    font-size: 0.6875rem;
    line-height: 1.36;
    color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field textarea {
    min-height: 194px;
    padding: 17px 20px 19px;
    border-radius: 18px;
    border-color: color-mix(in oklch, var(--border-soft) 52%, transparent);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 50%, transparent),
        color-mix(in oklch, var(--surface-panel) 94%, transparent)
      );
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 2%, transparent),
      inset 0 0 0 1px color-mix(in oklch, var(--foreground) 3%, transparent);
    line-height: 1.72;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field textarea:focus {
    border-color: color-mix(in oklch, var(--accent) 18%, var(--border-soft));
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 58%, transparent),
        color-mix(in oklch, var(--surface-panel) 95%, transparent)
      );
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent),
      inset 0 0 0 1px color-mix(in oklch, var(--accent) 12%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-meta {
    align-items: baseline;
    gap: 4px 10px;
    padding-top: 2px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-preview {
    max-width: 56ch;
    font-size: 0.6875rem;
    line-height: 1.36;
    -webkit-line-clamp: 1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-count {
    padding: 0;
    min-height: 0;
    border-color: transparent;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 54%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.28;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    padding-top: 10px;
    gap: 10px 14px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 34%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions[data-story-compose-state="pending"],
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions[data-story-compose-state="updating"] {
    border-top-color: color-mix(in oklch, var(--border-soft) 52%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    padding-top: 3px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 32%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun #storyDirectionTray {
    grid-column: span 1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) {
    border-color: color-mix(in oklch, var(--border-soft) 28%, transparent);
    border-radius: 11px;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(146px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
    min-height: 56px;
    padding: 9px 34px 9px 14px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary::after {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 15px;
    height: 15px;
    margin-right: 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
    transform: translateY(-56%) rotate(45deg);
    opacity: 0.8;
    pointer-events: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-copy {
    align-self: center;
    gap: 2px;
    min-width: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-title {
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-hint {
    display: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px 8px;
    min-width: 0;
    padding-right: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary-text {
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.6875rem;
    line-height: 1.28;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary-meta {
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 3px 7px;
    min-width: max-content;
    padding-left: 10px;
    border-left: 1px solid color-mix(in oklch, var(--border-soft) 28%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 50%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.2;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions > #storyComposerSubmitBtn {
    min-width: 214px;
    min-height: 42px;
    padding: 0 22px;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions > #storyComposerSubmitBtn[disabled] {
    opacity: 1;
    border-color: color-mix(in oklch, var(--border-soft) 60%, transparent);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 48%, transparent),
        color-mix(in oklch, var(--surface-control) 70%, transparent)
      );
    color: color-mix(in oklch, var(--foreground) 76%, var(--muted-foreground));
    box-shadow: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions {
    align-items: center;
    justify-content: flex-end;
    gap: 5px 9px;
    padding-left: 12px;
    border-left: 1px solid color-mix(in oklch, var(--border-soft) 38%, transparent);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerTemplateBtn {
    min-height: 34px;
    padding: 0 12px;
    border-color: color-mix(in oklch, var(--border-soft) 42%, transparent);
    background: color-mix(in oklch, var(--surface-control) 18%, transparent);
    font-size: 0.73rem;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerTemplateBtn[disabled] {
    opacity: 1;
    border-color: color-mix(in oklch, var(--border-soft) 28%, transparent);
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 50%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerOpenLiveBtn {
    font-size: 0.7rem;
    opacity: 0.66;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerOpenLiveBtn[data-story-action-state="pending"],
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerOpenLiveBtn[data-story-action-state="updating"],
  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerOpenLiveBtn[data-story-action-state="ready"] {
    opacity: 0.82;
    color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-tray-grid {
    align-items: stretch;
  }

  .layout.is-story-focused .story-tray:not([open]) {
    border-color: color-mix(in oklch, var(--border-soft) 32%, transparent);
    border-radius: 14px;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 20%, transparent),
        color-mix(in oklch, var(--surface-panel) 74%, transparent)
      );
  }

  .layout.is-story-focused .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(170px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 8px 16px;
    min-height: 64px;
    padding: 11px 38px 11px 16px;
  }

  .layout.is-story-focused .story-tray:not([open]) > summary::after {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 15px;
    height: 15px;
    margin-right: 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
    transform: translateY(-56%) rotate(45deg);
    opacity: 0.78;
    pointer-events: none;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-copy {
    align-self: center;
    gap: 3px;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-title {
    font-size: 0.75rem;
    line-height: 1.22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-hint {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.36;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
    padding-right: 0;
    text-align: left;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-summary-text {
    display: block;
    max-width: none;
    width: 100%;
    font-size: 0.75rem;
    line-height: 1.38;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: unset;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-summary-meta {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 10px;
    min-width: max-content;
    padding-left: 12px;
    border-left: 1px solid color-mix(in oklch, var(--border-soft) 32%, transparent);
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-summary-meta:empty {
    display: none;
    padding-left: 0;
    border-left: 0;
  }

  .layout.is-story-focused .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.28;
    white-space: nowrap;
  }

  /* 2026-03-13 Pass — quieter desktop prerun brief handoff */
  .layout.is-story-focused .story-shell-top.is-prerun .story-overview-chip {
    display: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-head {
    gap: 5px 16px;
    padding-bottom: 6px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy {
    gap: 2px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy h3 {
    max-width: 24ch;
    font-size: clamp(1.22rem, 1.08rem + 0.28vw, 1.38rem);
    line-height: 1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-copy p {
    max-width: 36ch;
    font-size: 0.66rem;
    line-height: 1.28;
    color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground));
    -webkit-line-clamp: 1;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status {
    gap: 4px 10px;
    padding-top: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-status p {
    max-width: 18ch;
    font-size: 0.64rem;
    line-height: 1.26;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field {
    gap: 6px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 10px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-heading > span:first-child {
    font-size: 0.82rem;
    line-height: 1.02;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-field .field-inline-hint {
    max-width: none;
    font-size: 0.64rem;
    line-height: 1.24;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-meta {
    justify-content: space-between;
    gap: 6px 12px;
    padding-top: 1px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-count {
    font-size: 0.64rem;
    line-height: 1.2;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions {
    padding-top: 8px;
    gap: 8px 12px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-actions > #storyComposerSubmitBtn {
    min-width: 188px;
    min-height: 40px;
    padding: 0 18px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions {
    gap: 4px 8px;
    padding-left: 10px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerTemplateBtn {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.69rem;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-compose-secondary-actions > #storyComposerOpenLiveBtn {
    font-size: 0.68rem;
    opacity: 0.6;
  }

  .layout.is-story-focused .story-results-primary {
    padding: 17px 18px 19px;
    gap: 10px;
    border-radius: 26px;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(248px, 0.72fr);
    gap: 10px;
    align-items: start;
  }

  .layout.is-story-focused .story-run-rail,
  .layout.is-story-focused .story-results-secondary {
    gap: 7px;
    padding: 12px 13px 13px;
    border-color: color-mix(in oklch, var(--border-soft) 58%, transparent);
    border-radius: 24px;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 46%, transparent),
        color-mix(in oklch, var(--surface-panel) 92%, transparent)
      );
    box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent);
  }

  .layout.is-story-focused .story-run-rail-head,
  .layout.is-story-focused .story-atlas-shell-head {
    gap: 4px 9px;
  }

  .layout.is-story-focused .story-run-rail-head h3,
  .layout.is-story-focused .story-atlas-shell-head h3 {
    font-size: 0.94rem;
    line-height: 1.08;
  }

  .layout.is-story-focused .story-run-rail .story-head-grid {
    gap: 4px;
  }

  .layout.is-story-focused .story-run-rail .story-stat-card {
    gap: 2px;
    padding: 8px 0 9px;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 52%, transparent);
    border-radius: 0;
    background: transparent;
  }

  .layout.is-story-focused .story-run-rail .story-head-grid .story-stat-card:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .layout.is-story-focused .story-run-rail .story-stat-card-title {
    padding: 0 0 6px;
    border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 54%, transparent);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    background: transparent;
  }

  .layout.is-story-focused .story-run-rail:not(.is-idle) .story-stat-card-title {
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-run-rail .story-stat-card.story-stat-card-metric,
  .layout.is-story-focused .story-run-rail .story-stat-card.story-stat-card-state {
    min-height: 0;
  }

  .layout.is-story-focused .story-run-rail .story-stat-label {
    font-size: 0.6875rem;
    line-height: 1.18;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-run-rail .story-stat-value {
    font-size: 0.88rem;
    line-height: 1.16;
  }

  .layout.is-story-focused .story-run-rail .story-stat-note {
    max-width: 24ch;
    font-size: 0.6875rem;
    line-height: 1.38;
    color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-run-rail .story-inline-metric {
    gap: 4px 8px;
  }

  .layout.is-story-focused .story-run-rail .story-inline-metric-label {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.6875rem;
    line-height: 1.28;
    color: color-mix(in oklch, var(--foreground) 54%, var(--muted-foreground));
    white-space: nowrap;
  }

  .layout.is-story-focused .story-run-rail .story-inline-metric-value {
    font-size: 0.7rem;
    color: color-mix(in oklch, var(--foreground) 88%, var(--accent-foreground));
  }

  .layout.is-story-focused .story-run-rail .story-status-row-summary {
    gap: 3px;
  }

  .layout.is-story-focused .story-run-rail .story-status-row-summary .status-pill {
    min-height: 18px;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
    font-size: 0.6875rem;
  }

  .layout.is-story-focused .story-run-rail .story-progress {
    padding: 8px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 56%, transparent);
    border-radius: 0;
    background: transparent;
  }

  .layout.is-story-focused .story-run-rail .story-progress-head {
    font-size: 0.6875rem;
    line-height: 1.28;
    color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-run-rail .story-progress-track {
    height: 7px;
    background: color-mix(in oklch, var(--surface-control) 40%, transparent);
  }

  .layout.is-story-focused .story-run-rail .story-guidance {
    padding: 8px 0 0;
    border: 0;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 58%, transparent);
    border-radius: 0;
    background: transparent;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-title {
    font-size: 0.72rem;
    line-height: 1.18;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-hint {
    font-size: 0.6875rem;
    line-height: 1.42;
    color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-run-rail .story-guidance-actions[data-story-compose-state] {
    gap: 7px;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-action {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-action[disabled] {
    opacity: 1;
    border-color: color-mix(in oklch, var(--border-soft) 32%, transparent);
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground));
    box-shadow: none;
  }

  .layout.is-story-focused .story-run-rail .story-guidance-action[data-story-action-state="pending"],
  .layout.is-story-focused .story-run-rail .story-guidance-action[data-story-action-state="updating"],
  .layout.is-story-focused .story-run-rail .story-guidance-action[data-story-action-state="ready"] {
    letter-spacing: 0.01em;
  }

  .layout.is-story-focused .story-atlas-rail {
    gap: 4px;
    padding: 1px 0 0;
  }

  .layout.is-story-focused .story-atlas-tab {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 10px;
    border-color: transparent;
    background: transparent;
  }

  .layout.is-story-focused .story-atlas-tab.is-active {
    border-color: color-mix(in oklch, var(--border-soft) 62%, transparent);
    background: color-mix(in oklch, var(--surface-control) 42%, transparent);
  }

  .layout.is-story-focused .story-atlas-tab-label {
    font-size: 0.6875rem;
    line-height: 1.22;
  }

  .layout.is-story-focused .story-atlas-tab-hint {
    display: none;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card {
    gap: 4px;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 62%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card.is-active {
    gap: 5px;
    min-height: 0;
    padding-top: 9px;
    border-top-color: color-mix(in oklch, var(--border-soft) 56%, transparent);
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-section-eyebrow {
    display: none;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head {
    gap: 3px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-head h3 {
    font-size: 0.88rem;
    line-height: 1.1;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-head p {
    font-size: 0.72rem;
    line-height: 1.34;
    color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p {
    max-width: none;
    font-size: 0.75rem;
    line-height: 1.38;
    color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-meta {
    max-width: none;
    padding-top: 7px;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 56%, transparent);
    color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.42;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-tags {
    gap: 3px 7px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-tag {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.26;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-metrics {
    gap: 5px 11px;
    padding-top: 8px;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 54%, transparent);
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-metric {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-metric.is-empty {
    opacity: 0.42;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-metric span {
    font-size: 0.6875rem;
    line-height: 1.24;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-metric strong {
    font-size: 0.72rem;
  }

  .layout.is-story-focused .story-results-primary > .story-latest-output-shell {
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
  }

  .layout.is-story-focused .story-results-primary .story-latest-output-body,
  .layout.is-story-focused .story-results-primary .story-preview-stage {
    border-color: color-mix(in oklch, var(--border-soft) 76%, transparent);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 70%, transparent),
        color-mix(in oklch, var(--surface-panel) 94%, transparent)
      );
    box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent);
  }

  .layout.is-story-focused .story-output-stage {
    grid-template-columns: minmax(0, 1.26fr) minmax(196px, 0.74fr);
    gap: 11px;
    align-items: start;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-latest-output-body {
    min-height: 0;
    padding: 13px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 62%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage {
    grid-template-columns: minmax(0, 1.14fr) minmax(248px, 0.86fr);
    gap: 14px;
    align-items: start;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-section-head p,
  .layout.is-story-focused .story-latest-output-shell.is-ready .story-latest-output-meta {
    display: none;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-section-head p {
    display: none;
  }

  .layout.is-story-focused .story-preview-head {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 6px 10px;
  }

  .layout.is-story-focused .story-preview-title,
  .layout.is-story-focused .story-preview-summary.story-preview-summary-meta {
    grid-column: 1 / -1;
  }

  .layout.is-story-focused .story-output-main {
    gap: 8px;
    align-self: start;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-main {
    gap: 10px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-kicker-row {
    padding-top: 0;
  }

  .layout.is-story-focused .story-output-kicker,
  .layout.is-story-focused .story-output-variant-kicker,
  .layout.is-story-focused .story-preview-index {
    min-height: 24px;
    padding: 3px 8px;
    border-color: color-mix(in oklch, var(--border-soft) 68%, transparent);
    background: transparent;
    font-size: 0.6875rem;
    line-height: 1.2;
  }

  .layout.is-story-focused .story-output-summary,
  .layout.is-story-focused .story-preview-summary {
    max-width: 48ch;
    font-size: 0.82rem;
    line-height: 1.44;
  }

  .layout.is-story-focused .story-output-summary.is-display-meta {
    max-width: none;
    color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
    font-size: 0.72rem;
    line-height: 1.42;
    letter-spacing: 0.01em;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-kicker {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 48%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.2;
    letter-spacing: 0.14em;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-title {
    max-width: 28ch;
    font-size: clamp(1.24rem, 1rem + 0.42vw, 1.52rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-summary.is-display-meta {
    max-width: none;
    color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
    font-size: 0.72rem;
    line-height: 1.48;
    letter-spacing: 0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-preview-summary.story-preview-summary-meta {
    max-width: none;
    color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
    font-size: 0.72rem;
    line-height: 1.46;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-output-body-card-main,
  .layout.is-story-focused .story-preview-copy-card-main {
    padding: 13px 14px;
    border-color: color-mix(in oklch, var(--border-soft) 76%, transparent);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 64%, transparent),
        color-mix(in oklch, var(--surface-panel) 92%, transparent)
      );
  }

  .layout.is-story-focused .story-output-body-text,
  .layout.is-story-focused .story-preview-text {
    max-width: 58ch;
    font-size: 0.88rem;
    line-height: 1.62;
  }

  .layout.is-story-focused .story-output-cue-strip {
    gap: 5px;
  }

  .layout.is-story-focused .story-output-cue-pill {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.6875rem;
    line-height: 1.28;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-output-side {
    gap: 0;
    align-self: start;
  }

  .layout.is-story-focused .story-output-side-card-dossier {
    border: 0;
    border-left: 1px solid color-mix(in oklch, var(--border-soft) 72%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-output-dossier-section {
    gap: 6px;
    padding: 11px 0 11px 16px;
  }

  .layout.is-story-focused .story-output-dossier-section + .story-output-dossier-section {
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 66%, transparent);
  }

  .layout.is-story-focused .story-output-dossier-label {
    font-size: 0.6875rem;
    line-height: 1.18;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-output-dossier-title {
    font-size: 0.86rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-output-dossier-note {
    max-width: none;
    font-size: 0.75rem;
    line-height: 1.54;
  }

  .layout.is-story-focused .story-output-side-card-dossier .story-output-card-tag {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-output-metrics.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .layout.is-story-focused .story-output-metrics.is-compact .story-output-metric {
    padding: 8px 10px;
    border-radius: 14px;
  }

  .layout.is-story-focused .story-output-metrics.is-compact .story-output-metric span {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-output-body-card-main {
    gap: 8px;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 68%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-main {
    gap: 9px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 58%, transparent);
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-latest-output-body {
    min-height: 0;
    padding: 13px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, oklch(0.68 0.08 28) 18%, var(--border-soft));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-section-head p {
    display: none;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-kicker {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 50%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.2;
    letter-spacing: 0.12em;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage {
    grid-template-columns: minmax(0, 1.12fr) minmax(232px, 0.88fr);
    gap: 12px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-summary {
    max-width: 58ch;
    color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
    font-size: 0.78rem;
    line-height: 1.52;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-body-card-main {
    gap: 8px;
    padding-top: 10px;
    border: 0;
    border-top: 1px solid color-mix(in oklch, oklch(0.68 0.08 28) 16%, var(--border-soft));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-compact {
    gap: 0;
    max-width: 62ch;
    padding-top: 11px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-compact .story-output-body-text {
    max-width: 60ch;
    max-height: none;
    overflow: visible;
    font-size: 0.86rem;
    line-height: 1.68;
  }

  .layout.is-story-focused .story-preview-copy-card-main {
    gap: 4px;
    padding: 11px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 62%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-output-main.is-compact {
    gap: 6px;
  }

  .layout.is-story-focused .story-output-main.is-compact .story-output-cue-strip {
    padding-top: 7px;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 62%, transparent);
  }

  .layout.is-story-focused .story-output-cue-strip {
    gap: 4px 10px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-cue-strip {
    max-width: 60ch;
    gap: 4px 9px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-cue-strip {
    max-width: 60ch;
    gap: 4px 9px;
    padding-top: 7px;
    border-top: 1px dashed color-mix(in oklch, oklch(0.68 0.08 28) 18%, var(--border-soft));
  }

  .layout.is-story-focused .story-output-cue-pill {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.28;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-cue-pill {
    color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
    font-size: 0.6875rem;
    font-weight: 560;
    line-height: 1.28;
    letter-spacing: 0.015em;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-cue-pill {
    color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
    font-size: 0.6875rem;
    font-weight: 560;
    line-height: 1.28;
    letter-spacing: 0.015em;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-text {
    max-width: 58ch;
    color: color-mix(in oklch, var(--foreground) 95%, var(--accent-foreground));
    font-size: 0.9rem;
    line-height: 1.74;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-body-text {
    max-width: 56ch;
    max-height: none;
    overflow: visible;
    color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground));
    font-size: 0.84rem;
    line-height: 1.66;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-side-card-dossier {
    border: 0;
    border-left: 1px solid color-mix(in oklch, oklch(0.68 0.08 28) 14%, var(--border-soft));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-dossier-section {
    gap: 5px;
    padding: 10px 0 10px 16px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-dossier-note {
    max-width: none;
    font-size: 0.75rem;
    line-height: 1.52;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-side-card-dossier .story-output-card-tag {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-output-variants {
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 60%, transparent);
  }

  .layout.is-story-focused .story-output-variants-head {
    align-items: baseline;
    gap: 8px;
  }

  .layout.is-story-focused .story-output-variants-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .layout.is-story-focused .story-output-variant-card {
    gap: 3px;
    padding: 10px 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 54%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-output-variants-grid .story-output-variant-card:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .layout.is-story-focused .story-output-variant-kicker {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 50%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.18;
  }

  .layout.is-story-focused .story-output-variant-title {
    max-width: 36ch;
    font-size: 0.88rem;
    line-height: 1.28;
  }

  .layout.is-story-focused .story-output-variant-meta {
    font-size: 0.6875rem;
    line-height: 1.38;
    color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-output-variant-note {
    max-width: 48ch;
    font-size: 0.72rem;
    line-height: 1.46;
    color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-results-primary .story-preview-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 13px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 64%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-preview-copy {
    gap: 10px;
  }

  .layout.is-story-focused .story-preview-title {
    max-width: none;
    font-size: clamp(1.14rem, 0.98rem + 0.34vw, 1.32rem);
    line-height: 1.08;
    letter-spacing: -0.026em;
  }

  .layout.is-story-focused .story-preview-text {
    max-width: 72ch;
  }

  .layout.is-story-focused .story-preview-support-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 11px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 64%, transparent);
  }

  .layout.is-story-focused .story-preview-support-card,
  .layout.is-story-focused .story-preview-support-card-assets {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-preview-support-card:not(.story-preview-support-card-assets) {
    display: none;
  }

  .layout.is-story-focused .story-preview-support-card-assets {
    padding-top: 10px;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 60%, transparent);
  }

  .layout.is-story-focused .story-preview-support-card-assets .story-preview-assets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .layout.is-story-focused .story-preview-support-card-assets .story-asset-pill {
    min-width: 0;
    max-width: 100%;
    padding: 6px 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-preview-summary-grid {
    gap: 10px 16px;
  }

  .layout.is-story-focused .story-preview-summary-item {
    gap: 4px;
    padding-right: 10px;
  }

  .layout.is-story-focused .story-preview-stage .story-preview-assets {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-preview-rail-card span {
    font-size: 0.6875rem;
    line-height: 1.24;
  }

  .layout.is-story-focused .story-preview-rail-card strong {
    font-size: 0.82rem;
  }

  .layout.is-story-focused .story-preview-rail-card p {
    font-size: 0.71rem;
    line-height: 1.36;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(208px, 0.44fr) minmax(0, 1.56fr);
    gap: 9px;
    padding: 14px 15px 15px;
    border-color: color-mix(in oklch, var(--border-soft) 76%, transparent);
    border-radius: 26px;
    background:
      radial-gradient(280px 118px at 100% 0%, color-mix(in oklch, var(--accent-foreground) 5%, transparent), transparent 78%),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-panel) 97%, transparent),
        color-mix(in oklch, var(--surface-panel-2) 95%, transparent)
      );
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--foreground) 3%, transparent),
      0 14px 28px -30px color-mix(in oklch, var(--shadow-color) 24%, transparent);
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(224px, 0.34fr) minmax(0, 1.66fr);
    align-items: start;
    gap: 7px;
    padding: 13px 14px 14px;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(236px, 0.32fr) minmax(0, 1.68fr);
    align-items: start;
    gap: 9px;
    padding: 14px 15px 15px;
  }

  .layout.is-story-focused .story-bottom-grid::before {
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--foreground) 2%, transparent), transparent 18%),
      linear-gradient(180deg, color-mix(in oklch, var(--foreground) 2%, transparent), transparent 18%);
  }

  .layout.is-story-focused .story-controls {
    gap: 7px;
    padding-right: 0;
  }

  .layout.is-story-focused .story-controls .story-section-head {
    gap: 6px 10px;
    padding-bottom: 8px;
    align-items: baseline;
  }

  .layout.is-story-focused .story-controls .story-section-head h3 {
    font-size: 0.92rem;
    line-height: 1.08;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-controls-grid {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
  }

  .layout.is-story-focused .story-controls-grid .field:first-child {
    grid-column: 1 / -1;
  }

  .layout.is-story-focused .story-controls-grid .field {
    gap: 5px;
    min-width: 0;
    padding: 7px 9px;
    border-color: color-mix(in oklch, var(--border-soft) 70%, transparent);
    border-radius: 13px;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 56%, transparent),
        color-mix(in oklch, var(--surface-panel) 90%, transparent)
      );
  }

  .layout.is-story-focused .story-controls-grid .field > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-controls-grid .field :is(select, .select-trigger) {
    display: block;
    min-height: 38px;
    padding: 8px 28px 8px 10px;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.28;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-controls-grid .select-trigger::after {
    right: 11px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
    transform: translateY(-54%) rotate(45deg);
  }

  .layout.is-story-focused .story-controls-grid #storyTimelinePosition.meta-box {
    min-height: 38px;
    padding: 8px 9px;
    justify-content: flex-start;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-controls-hint {
    padding: 8px 0 0;
    border: 0;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 62%, transparent);
    border-radius: 0;
    background: transparent;
    font-size: 0.6875rem;
    line-height: 1.42;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .layout.is-story-focused .story-scenes-shell {
    gap: 8px;
    padding-left: 4px;
  }

  .layout.is-story-focused .story-scenes-shell .story-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: 7px;
    gap: 6px 10px;
    align-items: baseline;
  }

  .layout.is-story-focused .story-scenes-shell .story-list-head-summary {
    display: none;
  }

  .layout.is-story-focused .story-scenes-shell .story-list-head-copy h3 {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-scenes-shell .story-list-head .status-pill {
    min-height: 22px;
    padding: 2px 7px;
    border-color: transparent;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
  .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    padding: 2px 0 1px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .layout.is-story-focused .story-segment-card {
    min-width: 0;
    min-height: 198px;
    gap: 6px;
    padding: 12px 13px 11px;
    border-color: color-mix(in oklch, var(--border-soft) 74%, transparent);
    background:
      radial-gradient(200px 82px at 100% -14%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 76%),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-control) 72%, transparent),
        color-mix(in oklch, var(--surface-panel) 95%, transparent)
      );
  }

  .layout.is-story-focused .story-segment-card.is-selected {
    min-height: 198px;
  }

  .layout.is-story-focused .story-segment-index,
  .layout.is-story-focused .story-segment-state {
    min-height: 20px;
    padding: 2px 7px;
    border-color: transparent;
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 62%, var(--muted-foreground));
  }

  .layout.is-story-focused .story-segment-title {
    font-size: 0.89rem;
    line-height: 1.16;
  }

  .layout.is-story-focused .story-segment-text {
    font-size: 0.78rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
  }

  .layout.is-story-focused .story-segment-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 6px 10px;
    padding-top: 9px;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 64%, transparent);
  }

  .layout.is-story-focused .story-segment-cues {
    gap: 4px 8px;
  }

  .layout.is-story-focused .story-segment-cue {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.6875rem;
    line-height: 1.26;
    color: color-mix(in oklch, var(--foreground) 66%, var(--muted-foreground));
    white-space: nowrap;
  }

  .layout.is-story-focused .story-segment-meta {
    font-size: 0.6875rem;
    line-height: 1.42;
    color: color-mix(in oklch, var(--foreground) 64%, var(--muted-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary {
    grid-template-columns: minmax(138px, max-content) minmax(0, 1fr);
    gap: 6px 10px;
    min-height: 54px;
    padding: 8px 30px 8px 13px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary::after {
    right: 12px;
    width: 14px;
    height: 14px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary {
    gap: 4px 7px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary-meta {
    gap: 3px 6px;
    padding-left: 8px;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.36fr) minmax(220px, 0.64fr);
    gap: 9px;
  }

  .layout.is-story-focused .story-run-rail,
  .layout.is-story-focused .story-results-secondary {
    gap: 6px;
    padding: 11px 12px 12px;
    border-radius: 23px;
  }

  .layout.is-story-focused .story-results-secondary {
    align-content: start;
  }

  .layout.is-story-focused .story-atlas-rail {
    gap: 3px;
    padding: 0;
  }

  .layout.is-story-focused .story-atlas-tab {
    min-height: 32px;
    padding: 5px 9px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card {
    gap: 3px;
    padding: 8px 0 0;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card.is-active {
    gap: 4px;
    padding-top: 8px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head {
    gap: 2px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-head h3 {
    font-size: 0.86rem;
    line-height: 1.08;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p {
    font-size: 0.72rem;
    line-height: 1.34;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-meta {
    padding-top: 6px;
    line-height: 1.38;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-tags {
    gap: 2px 8px;
  }

  .layout.is-story-focused .story-output-stage {
    grid-template-columns: minmax(0, 1.34fr) minmax(208px, 0.66fr);
    gap: 10px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage {
    grid-template-columns: minmax(0, 1.28fr) minmax(220px, 0.72fr);
    gap: 12px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-title {
    max-width: none;
  }

  .layout.is-story-focused .story-output-dossier-section {
    gap: 5px;
    padding: 10px 0 10px 14px;
  }

  .layout.is-story-focused .story-output-dossier-title {
    font-size: 0.84rem;
    line-height: 1.26;
  }

  .layout.is-story-focused .story-output-dossier-note {
    font-size: 0.74rem;
    line-height: 1.48;
  }

  .layout.is-story-focused .story-output-metrics.is-compact {
    grid-template-columns: repeat(4, max-content);
    align-items: baseline;
    gap: 5px 12px;
  }

  .layout.is-story-focused .story-output-metrics.is-compact .story-output-metric {
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .layout.is-story-focused .story-output-metrics.is-compact .story-output-metric span {
    letter-spacing: 0.08em;
  }

  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage {
    grid-template-columns: minmax(0, 1.24fr) minmax(208px, 0.76fr);
    gap: 11px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-compact {
    max-width: 68ch;
    padding-top: 10px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-compact .story-output-body-text,
  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-text,
  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-cue-strip {
    max-width: 64ch;
  }

  .layout.is-story-focused .story-results-primary .story-preview-stage {
    gap: 8px;
    padding: 12px 0 0;
  }

  .layout.is-story-focused .story-preview-copy {
    gap: 9px;
  }

  .layout.is-story-focused .story-preview-title {
    font-size: clamp(1.08rem, 0.94rem + 0.24vw, 1.22rem);
    line-height: 1.06;
  }

  .layout.is-story-focused .story-preview-text {
    max-width: 74ch;
  }

  .layout.is-story-focused .story-preview-support-card-assets {
    padding-top: 9px;
  }

  .layout.is-story-focused .story-preview-support-card-assets .story-preview-assets {
    gap: 6px;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(192px, 0.38fr) minmax(0, 1.62fr);
    gap: 8px;
  }

  .layout.is-story-focused .story-controls-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .layout.is-story-focused .story-controls-grid .field:nth-child(3) {
    display: flex;
    grid-column: 1 / -1;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0 0;
    border: 0;
    background: transparent;
  }

  .layout.is-story-focused .story-controls-grid .field:nth-child(3) > span {
    overflow: visible;
    text-overflow: clip;
  }

  .layout.is-story-focused .story-controls-grid #storyTimelinePosition.meta-box {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.78rem;
    line-height: 1.28;
  }

  .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
  .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
    gap: 7px;
  }

  .layout.is-story-focused .story-segment-card,
  .layout.is-story-focused .story-segment-card.is-selected {
    min-height: 192px;
  }

  .layout.is-story-focused .story-segment-card {
    padding: 12px 12px 11px;
  }

  .layout.is-story-focused .story-segment-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .layout.is-story-focused .story-segment-text {
    font-size: 0.76rem;
    line-height: 1.46;
  }
  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(138px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
    min-height: 54px;
    padding: 8px 30px 8px 13px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary::after {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 14px;
    height: 14px;
    margin-right: 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
    transform: translateY(-56%) rotate(45deg);
    opacity: 0.8;
    pointer-events: none;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px 7px;
    min-width: 0;
    padding-right: 0;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary-meta {
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 3px 6px;
    min-width: max-content;
    padding-left: 8px;
    border-left: 1px solid color-mix(in oklch, var(--border-soft) 28%, transparent);
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card.is-active {
    gap: 4px;
    min-height: 0;
    padding-top: 8px;
    border-top-color: color-mix(in oklch, var(--border-soft) 56%, transparent);
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-meta {
    max-width: none;
    padding-top: 6px;
    border-top: 1px dashed color-mix(in oklch, var(--border-soft) 56%, transparent);
    color: color-mix(in oklch, var(--foreground) 60%, var(--muted-foreground));
    font-size: 0.6875rem;
    line-height: 1.38;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-body-card-compact {
    gap: 0;
    max-width: 68ch;
    padding-top: 10px;
  }

  .layout.is-story-focused .story-results-primary .story-preview-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--border-soft) 64%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(192px, 0.38fr) minmax(0, 1.62fr);
    gap: 8px;
    padding: 14px 15px 15px;
  }

  .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
  .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 7px;
    padding: 2px 0 1px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .layout.is-story-focused .story-preview-support-card-assets .story-preview-assets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

/* Story progress — dim when 0% */
.layout.is-story-focused .story-progress-track[aria-valuenow="0"] {
  opacity: 0.35;
}

/* Results grid — unified muted state before first run */
.layout.is-story-focused .story-latest-output-shell.is-empty {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.layout.is-story-focused .story-latest-output-shell.is-empty:hover {
  opacity: 0.85;
}

/* Atlas cards — dim empty metrics */
.layout.is-story-focused .story-atlas-metric.is-empty {
  opacity: 0.4;
}

.layout.is-story-focused .story-atlas-metric.is-ready {
  opacity: 1;
}

/* Preview empty state — bigger, centered */
.layout.is-story-focused .story-timeline-preview-empty .story-empty-state {
  text-align: center;
  padding: 40px 24px;
}

.layout.is-story-focused .story-timeline-preview-empty .story-empty-icon {
  font-size: 2rem;
  opacity: 0.3;
  margin-bottom: 12px;
}

.layout.is-story-focused .story-timeline-preview-empty .story-empty-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.layout.is-story-focused .story-timeline-preview-empty .story-empty-lead {
  font-size: 0.78rem;
  opacity: 0.65;
  line-height: 1.45;
  max-width: 360px;
  margin: 0 auto;
}

/* Scene cards empty — soften placeholder */
.layout.is-story-focused .story-scenes-shell .story-empty-state {
  text-align: center;
  padding: 32px 20px;
  opacity: 0.55;
}

/* ── Pass 8-B: Status row pills — more readable ────────────────── */

.layout.is-story-focused .story-status-row .status-pill {
  font-size: 0.65rem;
  letter-spacing: 0.03em;
}

/* ── Pass 8-C: Guidance card — softer idle state ────────────────── */

.layout.is-story-focused .story-guidance.is-idle {
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.layout.is-story-focused .story-guidance.is-idle:hover {
  opacity: 0.9;
}

/* ── Negotiate Offer Fields ─────────────────────────────────────── */

.negotiate-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.negotiate-offer-field {
  margin: 0;
}

.negotiate-offer-field span {
  font-size: 0.78rem;
  font-weight: 600;
  color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
  letter-spacing: 0.02em;
}

.negotiate-offer-field input {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 8px;
}

/* ── Thinking / Loading Indicator ──────────────────────────────── */

.live-thinking-indicator {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid color-mix(in oklch, var(--primary) 28%, var(--border-soft));
  border-radius: 18px;
  background:
    radial-gradient(120px 60px at 0% -20%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 72%),
    color-mix(in oklch, var(--surface-control) 82%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--foreground) 5%, transparent),
    0 0 18px -10px color-mix(in oklch, var(--primary) 30%, transparent);
  justify-self: start;
  max-width: 200px;
  animation: thinking-fade-in 0.3s ease;
}

.live-thinking-indicator.is-visible {
  display: flex;
}

.live-thinking-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.live-thinking-dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--primary) 72%, var(--accent-foreground));
  box-shadow: 0 0 6px color-mix(in oklch, var(--primary) 40%, transparent);
  animation: thinking-pulse 1.4s ease-in-out infinite;
}

.live-thinking-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.live-thinking-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.live-thinking-label {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

@keyframes thinking-pulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.35;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes thinking-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}







@media (min-width: 1180px) {
  .layout.is-story-focused .story-shell-top.is-prerun .story-tray-grid {
    align-items: start;
    gap: 5px 7px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(124px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 5px 9px;
    min-height: 52px;
    padding: 7px 29px 7px 12px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) > summary::after {
    right: 11px;
    width: 12px;
    height: 12px;
    transform: translateY(-54%) rotate(45deg);
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-copy {
    min-width: 0;
    gap: 1px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-title {
    font-size: 0.82rem;
    line-height: 1.08;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary-meta {
    gap: 2px 5px;
    padding-left: 7px;
  }

  .layout.is-story-focused .story-shell-top.is-prerun .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(244px, 0.58fr);
    align-items: start;
    gap: 8px;
  }

  .layout.is-story-focused .story-results-primary {
    align-content: start;
    gap: 9px;
  }

  .layout.is-story-focused .story-results-secondary {
    align-self: start;
    gap: 5px;
    padding: 10px 11px 11px;
  }

  .layout.is-story-focused .story-atlas-shell-head {
    padding-bottom: 7px;
    border-bottom: 1px solid color-mix(in oklch, var(--border-soft) 58%, transparent);
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card {
    gap: 2px;
    padding: 7px 0 0;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card.is-active {
    gap: 3px;
    padding-top: 7px;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-head h3 {
    font-size: 0.84rem;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .layout.is-story-focused .story-results-secondary .story-atlas-meta {
    padding-top: 5px;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage {
    grid-template-columns: minmax(0, 1.34fr) minmax(232px, 0.66fr);
    gap: 11px;
  }

  .layout.is-story-focused .story-output-dossier-section {
    gap: 4px;
    padding: 9px 0 9px 12px;
  }

  .layout.is-story-focused .story-output-dossier-title {
    font-size: 0.82rem;
    line-height: 1.24;
  }

  .layout.is-story-focused .story-output-dossier-note {
    font-size: 0.72rem;
    line-height: 1.46;
  }

  .layout.is-story-focused .story-output-metrics.is-compact {
    grid-template-columns: repeat(4, max-content);
    align-items: baseline;
    gap: 4px 10px;
  }

  .layout.is-story-focused .story-output-metrics.is-compact .story-output-metric {
    display: grid;
    grid-auto-flow: column;
    align-items: baseline;
    gap: 4px;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(224px, 0.34fr) minmax(0, 1.66fr);
    align-items: start;
    gap: 7px;
    padding: 13px 14px 14px;
  }

  .layout.is-story-focused .story-controls {
    gap: 6px;
  }

  .layout.is-story-focused .story-controls-grid {
    gap: 6px;
  }

  .layout.is-story-focused .story-controls-grid .field {
    gap: 4px;
    padding: 6px 8px;
  }

  .layout.is-story-focused .story-controls-grid .select-shell {
    width: 100%;
    min-width: 0;
  }

  .layout.is-story-focused .story-controls-grid .field :is(select, .select-trigger) {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 7px 31px 7px 10px;
  }

  .layout.is-story-focused .story-controls-grid .select-trigger::after {
    right: 10px;
  }

  .layout.is-story-focused .story-controls-grid .field:nth-child(3) {
    gap: 6px;
    padding-top: 1px;
  }

  .layout.is-story-focused .story-controls-grid #storyTimelinePosition.meta-box {
    font-size: 0.76rem;
  }

  .layout.is-story-focused .story-controls-hint {
    max-width: 30ch;
  }

  .layout.is-story-focused .story-scenes-shell {
    gap: 7px;
    padding-left: 2px;
  }

  .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
  .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
    gap: 6px;
  }

  .layout.is-story-focused .story-segment-card,
  .layout.is-story-focused .story-segment-card.is-selected {
    min-height: 186px;
  }

  .layout.is-story-focused .story-segment-card {
    gap: 5px;
    padding: 11px 12px 10px;
  }

  .layout.is-story-focused .story-segment-title {
    font-size: 0.85rem;
    line-height: 1.15;
    min-height: calc(2 * 1.15em);
  }

  .layout.is-story-focused .story-segment-text {
    font-size: 0.75rem;
    line-height: 1.44;
  }

  .layout.is-story-focused .story-segment-footer {
    gap: 5px 8px;
    padding-top: 8px;
  }
}

/* 2026-03-13: storyteller desktop runtime orderly shelf pass (tail cascade) */
@media (min-width: 1180px) {
  .layout.is-story-focused .story-compose-shell .story-tray-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .layout.is-story-focused .story-compose-shell #storyDirectionTray:not([open]) {
    grid-column: auto;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) > summary {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 4px;
    min-height: 58px;
    padding: 10px 34px 10px 14px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) > summary::after {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 11px;
    height: 11px;
    transform: translateY(-58%) rotate(45deg);
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-copy {
    gap: 2px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-title {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.84rem;
    line-height: 1.08;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-hint {
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.38;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-right: 0;
    text-align: left;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary-text {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    display: block;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.42;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
    padding-left: 8px;
  }

  .layout.is-story-focused .story-compose-shell .story-tray:not([open]) .story-tray-summary-meta .story-atlas-tag {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.6875rem;
    line-height: 1.18;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-results-grid {
    grid-template-columns: minmax(0, 1.54fr) minmax(228px, 0.46fr);
    align-items: start;
    gap: 10px;
  }

  .layout.is-story-focused .story-results-secondary {
    gap: 4px;
    padding: 9px 10px 10px;
  }

  .layout.is-story-focused .story-atlas-rail {
    gap: 6px;
    overflow: visible;
  }

  .layout.is-story-focused .story-atlas-tab {
    min-width: 0;
    padding: 8px 12px;
  }

  .layout.is-story-focused .story-atlas-tab-label,
  .layout.is-story-focused .story-results-secondary .story-atlas-head h3,
  .layout.is-story-focused .story-results-secondary .story-atlas-card .story-atlas-head p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-latest-output-shell.is-ready .story-output-stage,
  .layout.is-story-focused .story-latest-output-shell.is-error .story-output-stage {
    grid-template-columns: minmax(0, 1.48fr) minmax(212px, 0.52fr);
    gap: 14px;
  }

  .layout.is-story-focused .story-output-dossier-section {
    gap: 5px;
    padding: 10px 0 10px 12px;
  }

  .layout.is-story-focused .story-output-dossier-note {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-output-metrics.is-compact {
    gap: 5px 12px;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-title,
  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-summary.story-preview-summary-meta {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-assets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .layout.is-story-focused .story-preview-shell.is-ready .story-preview-assets .story-asset-pill {
    max-width: 100%;
  }

  .layout.is-story-focused .story-bottom-grid {
    grid-template-columns: minmax(236px, 0.32fr) minmax(0, 1.68fr);
    align-items: start;
    gap: 9px;
    padding: 14px 15px 15px;
  }

  .layout.is-story-focused .story-controls {
    gap: 7px;
  }

  .layout.is-story-focused .story-controls-grid {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 7px 9px;
  }

  .layout.is-story-focused .story-controls-grid .field {
    gap: 5px;
    padding: 7px 9px;
  }

  .layout.is-story-focused .story-controls-grid .field :is(select, .select-trigger) {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 37px;
    padding: 8px 29px 8px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout.is-story-focused .story-controls-grid .select-trigger::after {
    top: 50%;
    right: 10px;
    transform: translateY(-54%) rotate(45deg);
  }

  .layout.is-story-focused .story-controls-grid #storyTimelinePosition.meta-box {
    min-height: 37px;
    padding: 8px 10px;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .layout.is-story-focused .story-controls-hint {
    max-width: none;
    font-size: 0.6875rem;
    line-height: 1.42;
  }

  .layout.is-story-focused .story-scenes-shell {
    gap: 8px;
    padding-left: 6px;
  }

  .layout.is-story-focused .story-scenes-shell.is-ready .story-timeline-list,
  .layout.is-story-focused .story-scenes-shell.is-pending .story-timeline-list {
    gap: 8px;
  }

  .layout.is-story-focused .story-segment-card,
  .layout.is-story-focused .story-segment-card.is-selected {
    min-height: 192px;
  }

  .layout.is-story-focused .story-segment-card {
    gap: 6px;
    padding: 12px 12px 11px;
  }

  .layout.is-story-focused .story-segment-head {
    align-items: start;
    gap: 8px;
  }

  .layout.is-story-focused .story-segment-index,
  .layout.is-story-focused .story-segment-state {
    white-space: nowrap;
  }

  .layout.is-story-focused .story-segment-title {
    font-size: 0.86rem;
    line-height: 1.16;
    min-height: calc(2 * 1.16em);
  }

  .layout.is-story-focused .story-segment-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.75rem;
    line-height: 1.48;
  }

  .layout.is-story-focused .story-segment-footer {
    gap: 6px 8px;
    padding-top: 8px;
  }
}