/* The Bridge - verified working */

/*
  STYLE GUIDE — Material Design 3 inspired tokens

  To create a new theme: override the :root vars below. That's it.
  To create a new component: compose from these classes, don't invent new patterns.

  SURFACES (nest for depth):
    .surface-1  — cards, panels (--surface + border + elevation-1)
    .surface-2  — nested content, scrollable regions (--surface-high + elevation-2)
    .surface-3  — popovers, modals (--surface-highest + elevation-3)

  SPACING:
    .pad-sm     — 8px   (tight: chips, badges)
    .pad-md     — 12px  (default: cards, rows)
    .pad-lg     — 16px  (sections, panels)
    .pad-xl     — 24px  (page-level)

  SHAPE:
    .round-sm   — 6px   (buttons, inputs)
    .round-md   — 10px  (cards)
    .round-lg   — 16px  (panels, dialogs)
    .round-full — 9999px (pills, badges)

  These map 1:1 to CSS vars so themes only override vars, never classes.
*/

/* === TOKENS === */

:root {
  /* M3 Color — md.sys.color (dark scheme)
     Names match Material Design 3 token spec: m3.material.io/styles/color */
  --md-sys-color-background: #0d1117;
  --md-sys-color-surface: #161b22;
  --md-sys-color-surface-container: #1c2129;
  --md-sys-color-surface-container-high: #242a33;
  --md-sys-color-surface-container-highest: #2b3139;
  --md-sys-color-on-surface: #e6edf3;
  --md-sys-color-on-surface-variant: #d9e1e8;
  --md-sys-color-outline: #4a5563;
  --md-sys-color-outline-variant: #36414d;
  --md-sys-color-primary: #58a6ff;
  --md-sys-color-on-primary: #003a75;
  --md-sys-color-primary-container: #1a4b8a;
  --md-sys-color-on-primary-container: #dce9ff;
  --md-sys-color-secondary: #959fab;
  --md-sys-color-on-secondary: #0d1117;
  --md-sys-color-error: #ff7b72;
  --md-sys-color-on-error: #2b0705;
  --md-sys-color-tertiary: #f2cc60;
  --md-sys-color-surface-tint: #58a6ff;

  /* Layout 2 palette/state tokens */
  --layout-2-bg: #1c1b1f;
  --layout-2-surface: #2b2930;
  --layout-2-surface-hover: #36343b;
  --layout-2-border: #49454f;
  --layout-2-text: #e6e1e5;
  --layout-2-text-dim: #e1dae6;
  --layout-2-accent: #d0bcff;
  --layout-2-green: #87d98a;
  --layout-2-yellow: #e8c26c;
  --layout-2-red: #f2b8b5;
  --layout-2-blue: #a8c7fa;
  --layout-2-gray: #cac4d0; /* WCAG AA on layout-2 elevated surfaces */
  --layout-2-primary: #d0bcff;
  --layout-2-on-primary: #381e72;
  --layout-2-primary-container: #4f378b;
  --layout-2-on-primary-container: #eaddff;
  --layout-2-secondary: #ccc2dc;
  --layout-2-on-secondary: #332d41;
  --layout-2-surface-container: #211f26;
  --layout-2-surface-container-high: #2b2930;
  --layout-2-surface-container-highest: #36343b;
  --layout-2-on-surface: #e6e1e5;
  --layout-2-on-surface-variant: #cac4d0;
  --layout-2-outline: #938f99;
  --layout-2-outline-variant: #49454f;
  --layout-2-error: #f2b8b5;
  --layout-2-on-error: #601410;
  --layout-2-state-hover-primary: rgba(208, 188, 255, 0.08);
  --layout-2-state-hover-primary-strong: rgba(208, 188, 255, 0.12);
  --layout-2-state-selected-primary: rgba(208, 188, 255, 0.16);
  --layout-2-state-focus-primary: rgba(208, 188, 255, 0.2);
  --layout-2-elevation-umbra-strong: rgba(0,0,0,0.3);
  --layout-2-elevation-umbra-soft: rgba(0,0,0,0.15);

  /* Shorthand aliases (used throughout existing code) */
  --bg: var(--md-sys-color-background);
  --surface: var(--md-sys-color-surface);
  --surface-high: var(--md-sys-color-surface-container);
  --surface-highest: var(--md-sys-color-surface-container-high);
  --surface-hover: var(--md-sys-color-surface-container);
  --border: var(--md-sys-color-outline);
  --border-subtle: var(--md-sys-color-outline-variant);
  --text: var(--md-sys-color-on-surface);
  --text-dim: var(--md-sys-color-on-surface-variant);
  --text-primary: var(--text);
  --text-secondary: #bac4cf;
  --text-tertiary: #9aa0a6; /* WCAG AA on --surface-highest and layout-2 elevated surfaces */
  --accent: var(--md-sys-color-primary);
  --green: #3fb950;
  --yellow: var(--md-sys-color-tertiary);
  --red: var(--md-sys-color-error);
  --blue: var(--md-sys-color-primary);
  --gray: #c5ced8;
  --on-accent: #08131f;
  --on-green: #07170b;
  --on-yellow: #241900;
  --on-red: #2b0705;

  /* Legacy section aliases: keep Pipeline/Truth readable and AA on dark surfaces. */
  --c-bg: var(--bg);
  --c-surface: var(--surface);
  --c-surface-hover: var(--surface-high);
  --c-border: var(--border);
  --c-text: var(--text);
  --c-dim: var(--text-secondary);
  --c-accent: var(--accent);
  --c-green: var(--green);
  --c-yellow: var(--yellow);
  --c-red: var(--red);
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Tactyl: Responsive, spammable, physical-feeling UI.
     Touch targets 44px+. Instant feedback. Never blocks. Ease-out transitions.
     Reference: /root/.openclaw/docs/tactyl-concept.txt */
  --tactyl-transition-fast: 150ms ease-out;
  --tactyl-transition-normal: 200ms ease-out;
  --tactyl-touch-min: 44px;
  --tactyl-active-scale: 0.96;
  --tactyl-press-scale: 0.92;

  /* M3 Elevation — md.sys.elevation
     Dark theme: shadows + subtle surface tint overlay */
  --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --md-sys-elevation-2: 0 2px 6px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
  --md-sys-elevation-3: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --elevation-0: none;
  --elevation-1: var(--md-sys-elevation-1);
  --elevation-2: var(--md-sys-elevation-2);
  --elevation-3: var(--md-sys-elevation-3);

  /* M3 Shape — md.sys.shape */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  --round-sm: var(--md-sys-shape-corner-small);
  --round-md: var(--md-sys-shape-corner-medium);
  --round-lg: var(--md-sys-shape-corner-large);
  --round-full: var(--md-sys-shape-corner-full);

  /* Spacing (not M3-named, practical) */
  --pad-sm: 8px;
  --pad-md: 12px;
  --pad-lg: 16px;
  --pad-xl: 24px;

  /* Layout */
  --header-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Task card sizing — adjust these two numbers for responsive tuning */
  --task-min-w: 280px;
  --task-max-w: 480px;

  /* Spacing scale (aliased from pad-* for component use) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-1: var(--space-xs);
  --space-2: var(--space-sm);
  --space-3: var(--space-md);

  /* Component defaults */
  --btn-padding: 8px 16px;
  --btn-radius: var(--round-sm);
  --btn-font-size: 0.84rem;
  --input-padding: 10px 12px;
  --input-radius: var(--round-sm);
  --chip-padding: 6px 12px;
  --chip-radius: var(--round-full);
  --card-padding: var(--pad-md);
  --card-radius: var(--round-md);
  --card-gap: var(--space-sm);
}

/* === BASE COMPONENT DEFAULTS (cascade — override per-section when needed) === */

/* Buttons: all buttons get consistent padding, radius, font, tap motion */
button, .btn, [class*="-btn"] {
  font-family: inherit;
  font-size: var(--btn-font-size);
  border-radius: var(--btn-radius);
  transition: transform var(--tactyl-transition-fast);
  cursor: pointer;
}
button:active, .btn:active, [class*="-btn"]:active {
  transform: scale(var(--tactyl-active-scale));
}
button:disabled, .btn:disabled, [class*="-btn"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Text inputs: consistent padding, radius, colors */
input[type="text"], input[type="search"], input[type="url"], textarea, .intake-text-input, .intake-text {
  padding: var(--input-padding);
  font-size: var(--btn-font-size);
  font-family: inherit;
  background: var(--surface-high);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--input-radius);
}
input[type="text"]:focus, input[type="search"]:focus, textarea:focus, .intake-text-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Chips: pill-shaped tappable labels */
.design-chip, [class*="-chip"] {
  padding: var(--chip-padding);
  font-size: 0.78rem;
  border-radius: var(--chip-radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.design-chip:hover, [class*="-chip"]:hover {
  background: rgba(78,222,163,0.08);
  border-color: #4edea3;
  color: #4edea3;
}

/* Action button rows: consistent gap and wrapping */
[class*="-actions"], [class*="-chips"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Cards: consistent padding, radius, background */
[class*="-card"], [class*="-row"]:not(tr) {
  border-radius: var(--card-radius);
}

/* Section labels: uppercase, small, dimmed */
[class*="-label"]:not(label) {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: var(--space-xs);
}

/* === RESPONSIVE BREAKPOINTS (real device widths) ===
   Robert's philosophy: design for real devices, not generic "mobile/tablet/desktop".
   Also: split-screen windows (1/2, 1/3, 1/4 at common desktop resolutions).

   MOBILE (portrait):
     Samsung Galaxy S21/S22/S23:  360px
     iPhone 14/15:                393px
     iPhone 14 Plus/15 Plus:      430px

   TABLET:
     iPad Mini:                   768px
     iPad Air:                    820px
     iPad Pro 11":                834px
     Samsung Galaxy Tab:          800px

   DESKTOP (full window):
     1080p:                      1920px
     1440p:                      2560px
     4K:                         3840px

   DESKTOP (split-screen):
     Half @ 1080p:                960px
     Half @ 1440p:               1280px
     Third @ 1080p:               640px
     Third @ 1440p:               853px
     Quarter @ 1080p:             480px
     Quarter @ 1440p:             640px

   USAGE: prefer flex-wrap + min-width over @media where possible (Tactyl: fluid).
   Use @media only when layout fundamentally changes (e.g., kanban → stacked on mobile). */

/* Phone: compact layout (Samsung 360px is the floor) */
@media (max-width: 430px) {
  :root {
    --task-min-w: 100%;
    --task-max-w: 100%;
  }
  .icon-bar {
    gap: 6px;
    padding: 0 10px;
    scroll-padding-inline: 10px;
  }
  .icon-btn {
    min-width: 70px;
    min-height: 56px;
    padding: 8px 14px;
    gap: 4px;
  }
  .icon-emoji { font-size: 22px; }
  .icon-label { font-size: 11px; }
  .mod-title { font-size: 16px; }
  .mod-sub { font-size: 12px; }
  .task-group-head,
  .task-row,
  .task-head,
  .task-side,
  .ideas-stage-head,
  .mod-header,
  .mod-header-left,
  .mod-header-right {
    align-items: flex-start;
    flex-direction: column;
  }
  .mod-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    line-height: 1.4;
  }
  .task-group-head,
  .task-row,
  .ideas-stage-head,
  .mod-header,
  .mod-header-left,
  .mod-header-right {
    gap: 8px;
  }
  .task-list,
  .ideas-stage-track {
    flex-direction: column;
  }
  .task-item,
  .ideas-stage,
  .idea-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .ideas-stage {
    min-width: 0;
    flex-basis: auto;
  }
  .ideas-stage-head {
    margin: 0;
    padding: 12px;
  }
  .idea-card {
    padding: 12px 14px;
  }
}

/* Mobile touch reinforcement: compact pills/tabs/buttons can inherit small
   text sizing, so enforce a real 44px target on phone/tablet widths. */
@media (max-width: 640px) {
  .learn-suggestion,
  .learn-ask-submit,
  .feedback-option,
  .feedback-custom-submit,
  .spark-toggle,
  .board-intake-toggle,
  .spark-submit,
  .board-intake-submit,
  .board-option-btn,
  .settings-toggle,
  .settings-chip,
  .settings-theme-btn,
  .layout-option,
  .issues-tab,
  .issues-add-btn,
  .ops-btn,
  .intake-option-btn,
  .intake-text-submit,
  .mod-action-btn,
  .auth-reauth-btn,
  .version-save-btn,
  .design-tab,
  .design-view-tab,
  .design-pick-btn,
  .design-note-btn,
  .design-tryagain-btn,
  .design-chip,
  .design-open-btn,
  .design-change-btn,
  .design-approve-btn,
  .design-gauntlet-btn {
    min-height: var(--tactyl-touch-min);
  }

  .feedback-option,
  .settings-chip,
  .settings-theme-btn,
  .issues-tab,
  .board-option-btn,
  .design-pick-btn,
  .design-note-btn,
  .design-chip {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Small tablet / large phone / split-screen quarter (480-768px)
   Windows snap 1/4 at 1080p = 480px, 1/3 at 1440p = 480px.
   Task cards go single column here but with more breathing room than phone. */
@media (min-width: 431px) and (max-width: 768px) {
  :root {
    --task-min-w: 260px;
    --task-max-w: 400px;
  }
}

/* Tablet / Windows snap 1/2 at 1080p (769px-1080px)
   Two task cards can fit side by side here.
   Workshop 2-col layout not yet active (needs 860px). */
@media (min-width: 769px) and (max-width: 1080px) {
  :root {
    --task-min-w: 280px;
    --task-max-w: 480px;
  }
  .main { max-width: 900px; margin: 0 auto; }
}

/* Desktop / Windows full-screen / Windows snap 1/2 at 1440p (1081px+)
   Workshop splits into task column + metrics sidebar.
   Task cards can go 2-across within the task column. */
@media (min-width: 1081px) {
  :root {
    --task-min-w: 300px;
    --task-max-w: 520px;
  }
  .main { max-width: 1200px; margin: 0 auto; }
}

/* === NUMBERS: Stable counters, smooth transitions ===
   All numeric displays use tabular-nums for equal-width digits (no layout shift).
   Value changes get a subtle pulse animation.
   Reference: CSS-Tricks "Animating Number Counters", MDN font-variant-numeric. */

.num, .stat-value, .icon-badge, .task-group-count, .ideas-stage-count,
.fleet-count, .fuel-chip-count, .intake-tag-count, .task-id-badge,
.board-shape-position, .feedback-options .feedback-option {
  font-variant-numeric: tabular-nums;
}

/* Subtle pulse when a counter value changes (applied via JS: add .num-changed, auto-removes) */
@keyframes numPulse {
  0% { opacity: 0.5; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.num-changed {
  animation: numPulse 0.4s ease-out;
}

@keyframes countTrendUp {
  0% { transform: translateY(4px); opacity: 0.55; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes countTrendDown {
  0% { transform: translateY(-4px); opacity: 0.55; }
  100% { transform: translateY(0); opacity: 1; }
}

.count-trend-up {
  animation: countTrendUp 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.count-trend-down {
  animation: countTrendDown 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dotStateShift {
  0% { transform: scale(0.82); opacity: 0.65; }
  55% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.dot-state-shift {
  animation: dotStateShift 0.28s ease-out;
}

@keyframes dotColorGhost {
  0% { transform: scale(1); opacity: 0.92; }
  100% { transform: scale(1.22); opacity: 0; }
}

.dot-color-ghost {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
  transform: scale(1);
  opacity: 0;
  animation: dotColorGhost 0.36s ease-out forwards;
}

.provider-dot,
.agent-dot,
.container-dot,
.action-dot,
.executor-pill-dot {
  --dot-accent: var(--gray);
  --dot-ring: color-mix(in srgb, var(--dot-accent) 26%, transparent);
  position: relative;
}

.provider-dot::before,
.agent-dot::before,
.container-dot::before,
.action-dot::before,
.executor-pill-dot::before,
.status-dot::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--dot-ring);
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 0.32s ease, transform 0.32s ease;
  pointer-events: none;
}

.provider-dot::after,
.agent-dot::after,
.container-dot::after,
.action-dot::after,
.executor-pill-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--dot-accent) 24%, transparent) 0%, transparent 72%);
  opacity: 0.42;
  transform: scale(1);
  transition: opacity 0.36s ease, transform 0.36s ease;
  pointer-events: none;
}

.provider-dot.dot-state-shift::after,
.agent-dot.dot-state-shift::after,
.container-dot.dot-state-shift::after,
.action-dot.dot-state-shift::after,
.executor-pill-dot.dot-state-shift::after {
  opacity: 0.9;
  transform: scale(1.16);
}

.provider-dot.dot-state-enter::before,
.agent-dot.dot-state-enter::before,
.container-dot.dot-state-enter::before,
.action-dot.dot-state-enter::before,
.executor-pill-dot.dot-state-enter::before,
.status-dot.dot-state-enter::before {
  opacity: 0.95;
  transform: scale(1.18);
}

.provider-dot.dot-state-enter,
.agent-dot.dot-state-enter,
.container-dot.dot-state-enter,
.action-dot.dot-state-enter,
.executor-pill-dot.dot-state-enter {
  filter: saturate(1.14);
}

.provider-dot.dot-state-exit,
.agent-dot.dot-state-exit,
.container-dot.dot-state-exit,
.action-dot.dot-state-exit,
.executor-pill-dot.dot-state-exit {
  filter: saturate(0.8);
}

.provider-dot.dot-state-exit::before,
.agent-dot.dot-state-exit::before,
.container-dot.dot-state-exit::before,
.action-dot.dot-state-exit::before,
.executor-pill-dot.dot-state-exit::before,
.status-dot.dot-state-exit::before {
  opacity: 0.45;
  transform: scale(0.92);
}

@keyframes fleetCountLift {
  0% { transform: translateY(1px); opacity: 0.82; }
  55% { transform: translateY(-1px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* === RESET / BASE === */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scrollbar-width: auto;
  scrollbar-color: auto;
}

html::-webkit-scrollbar { display: initial; }
body::-webkit-scrollbar { display: initial; }

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

.skip-link {
  position: fixed;
  top: calc(var(--safe-top) + 8px);
  left: max(12px, calc(env(safe-area-inset-left, 0px) + 12px));
  z-index: 1200;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--surface-highest);
  color: var(--text);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-140%);
  transition: transform var(--tactyl-transition-fast), opacity var(--tactyl-transition-fast);
}

.skip-link:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

button:focus-visible,
a[href]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Tactyl touch baseline: every tappable control should land at 44px+.
   Cards and full-width controls already exceed this; compact icon/chip buttons
   and custom ARIA controls inherit the minimum without per-component overrides. */
button,
.btn,
[class*="-btn"],
input:not([type="hidden"]),
select,
textarea,
[role="button"],
[role="tab"],
[aria-controls],
[aria-expanded],
[aria-pressed],
summary,
[onclick],
[tabindex="0"],
a[href] {
  min-width: var(--tactyl-touch-min);
  min-height: var(--tactyl-touch-min);
  min-inline-size: var(--tactyl-touch-min);
  min-block-size: var(--tactyl-touch-min);
  touch-action: manipulation;
  box-sizing: border-box;
}

a[class*="-btn"],
a[class*="-link"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* === HEADER / ICON BAR === */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-top: var(--safe-top);
  height: calc(var(--header-h) + var(--safe-top));
  display: flex;
  align-items: stretch;
}

.icon-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  padding: 0 8px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 8px;
}

.icon-bar::-webkit-scrollbar { display: none; }

.icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 16px;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  border-radius: var(--round-md);
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transition: transform 0.1s ease-out;
  scroll-snap-align: start;
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn:hover:not(.active),
.icon-btn:focus-visible:not(.active) {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
}

.icon-btn.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.icon-btn:focus-visible,
.mod-menu-btn:focus-visible,
.settings-toggle:focus-visible,
.settings-chip:focus-visible,
.settings-theme-btn:focus-visible,
.layout-toggle:focus-visible,
.layout-option:focus-visible,
.sysmap-detail-close:focus-visible {
  outline-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  position: absolute;
  top: 2px;
  right: 2px;
}

.icon-btn.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
}

.icon-emoji {
  font-size: 20px;
  line-height: 1;
}

.icon-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Red dot alert */
.icon-btn[data-alert="true"]::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 10px;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--surface);
  will-change: transform;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.8; }
}

/* Off-screen alert indicator */
.offscreen-indicator {
  position: absolute;
  right: 0;
  top: var(--safe-top);
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 6px;
  background: linear-gradient(to right, transparent, var(--surface) 40%);
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.2s ease-out;
}

.offscreen-indicator[hidden] {
  opacity: 0;
  display: flex;
}

.offscreen-dot {
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

.offscreen-arrow {
  color: var(--text-dim);
  font-size: 18px;
  margin-left: 2px;
}

/* === DIGEST BAR === */

/* === SHARED COMPONENTS === */

/* === AGENT CARD v2 (M3-inspired) === */
.agent-perf-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 0;
}
.agent-perf-emoji { font-size: 24px; flex-shrink: 0; }
.agent-perf-info { flex: 1; min-width: 0; }
.agent-perf-name { display: block; font-size: 14px; font-weight: 500; color: var(--text); }
.agent-perf-model { display: block; font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-perf-trend { font-size: 16px; font-weight: 700; flex-shrink: 0; }
.agent-perf-trend[data-dir="up"] { color: var(--green); }
.agent-perf-trend[data-dir="down"] { color: var(--red); }
.agent-perf-bar { height: 4px; background: var(--border); border-radius: 2px; margin: 0 14px; overflow: hidden; }
.agent-perf-bar span { display: block; height: 100%; border-radius: 2px; }
.agent-perf-bar span[data-tone="green"] { background: var(--green); }
.agent-perf-bar span[data-tone="yellow"] { background: var(--yellow); }
.agent-perf-bar span[data-tone="red"] { background: var(--red); }
.agent-perf-bar span[data-tone="gray"] { background: var(--gray); }
.agent-perf-stats { display: flex; gap: 12px; padding: 0 14px 10px; font-size: 11px; color: var(--text-dim); }

.digest-bar {
  position: sticky;
  top: calc(var(--header-h) + var(--safe-top));
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 6px 16px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.02em;
}
.digest-bar[data-status="attention"] {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}

/* === MAIN / SECTIONS === */

.main {
  padding-top: calc(var(--header-h) + var(--safe-top) + 12px);
  padding-bottom: calc(var(--safe-bottom) + 24px);
  padding-left: 12px;
  padding-right: 12px;
  min-height: 100vh;
}

.section {
  display: none;
  will-change: transform, opacity;
  contain: layout style paint;
}

.section.active {
  display: block;
  animation: section-in 0.2s ease-out;
}

@keyframes section-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* === MODULE HEADERS (M3) === */

.mod-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  gap: 12px;
}

.mod-header-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.mod-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mod-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.mod-meta {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mod-sub {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 20px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.mod-sub:first-of-type {
  margin-top: 8px;
}

.mod-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tactyl-touch-min);
  height: var(--tactyl-touch-min);
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.mod-menu-btn:hover {
  background: color-mix(in srgb, var(--text-dim) 12%, transparent);
  color: var(--text);
}

.mod-menu-btn:active {
  background: color-mix(in srgb, var(--text-dim) 20%, transparent);
}

.mod-menu-btn svg {
  display: block;
}

/* === MODULE NOTES PANEL === */

.mod-notes-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mod-notes-panel[hidden] {
  display: none;
}

.mod-notes-input-row {
  display: flex;
  gap: 8px;
}

.mod-notes-input {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  min-height: 20px;
  resize: none;
  box-sizing: border-box;
}

.mod-notes-input::placeholder {
  color: var(--text-dim);
}

.mod-notes-input:focus {
  outline: none;
  border-color: var(--accent, #58a6ff);
}

.mod-notes-send {
  background: var(--accent, #58a6ff);
  color: var(--on-accent);
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.mod-notes-send:hover {
  opacity: 0.85;
}

.mod-notes-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mod-notes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}

.mod-note-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  padding: 6px 8px;
  background: var(--bg);
  border-radius: 6px;
}

.mod-note-author {
  font-weight: 600;
  color: var(--accent, #58a6ff);
  flex-shrink: 0;
}

.mod-note-text {
  color: var(--text);
  flex: 1;
  word-break: break-word;
}

.mod-note-time {
  color: var(--text-dim);
  font-size: 11px;
  flex-shrink: 0;
}

/* === HEALTH === */

.status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 4px;
}

.status-dot {
  --status-dot-color: var(--gray);
  --status-dot-shadow: 0 0 8px rgba(118, 131, 144, 0.22);
  --dot-ring: color-mix(in srgb, var(--status-dot-color) 24%, transparent);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  will-change: transform, opacity;
  transition: transform 0.28s ease, opacity 0.28s ease;
  background-color: var(--status-dot-color);
  box-shadow: var(--status-dot-shadow);
  filter: saturate(0.92);
}

.status-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--status-dot-color) 28%, transparent) 0%, transparent 72%);
  opacity: 0.65;
  transition: opacity 0.38s ease, transform 0.38s ease;
  transform: scale(1);
  pointer-events: none;
}

.status-banner[data-status="operational"] .status-dot {
  --status-dot-color: var(--green);
  --status-dot-shadow: 0 0 10px rgba(63, 185, 80, 0.28);
}
.status-banner[data-status="warning"] .status-dot,
.status-banner[data-status="degraded"] .status-dot {
  --status-dot-color: var(--yellow);
  --status-dot-shadow: 0 0 10px rgba(242, 204, 96, 0.24);
}
.status-banner[data-status="incident"] .status-dot {
  --status-dot-color: var(--red);
  --status-dot-shadow: 0 0 10px rgba(255, 123, 114, 0.28);
}
.status-banner[data-status="offline"] .status-dot {
  --status-dot-color: var(--red);
  --status-dot-shadow: 0 0 10px rgba(255, 123, 114, 0.24);
}
.status-banner[data-status="loading"] .status-dot {
  --status-dot-color: var(--gray);
  --status-dot-shadow: 0 0 8px rgba(118, 131, 144, 0.22);
}

.status-dot.dot-state-shift::after {
  opacity: 1;
  transform: scale(1.14);
}

.status-dot.dot-state-enter {
  filter: saturate(1.15);
}

.status-banner {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-wrap: wrap;
}

.status-banner:focus-visible {
  border-color: var(--accent);
}

.banner-detail {
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  will-change: opacity;
  transition: opacity 0.2s ease-out;
}

.status-banner[data-expanded="true"] .banner-detail {
  max-height: 300px;
  opacity: 1;
}

.banner-incident {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.banner-incident:first-child {
  margin-top: 8px;
}

.banner-incident-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.banner-incident-title {
  font-size: 12px;
  font-weight: 400;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.banner-incident-time {
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.status-text {
  font-weight: 600;
  flex: 1;
  opacity: 0;
  transform: translateY(4px);
  animation: statusTextFadeIn 220ms ease-out forwards;
}
@keyframes statusTextFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.status-time {
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Pipeline track — compact stage dots in banner */
.pipeline-track {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  margin-right: 8px;
}
.pipeline-track .pt-stage {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  background: var(--surface-variant, rgba(255,255,255,0.06));
  color: var(--text-dim);
}
.pipeline-track .pt-stage.active {
  background: var(--accent);
  color: var(--on-accent);
}
.pipeline-track .pt-sep {
  font-size: 8px;
  opacity: 0.25;
  color: var(--text-dim);
}

/* Pulse detail — expanded section below banner */
.pulse-detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  margin-top: -5px;
  margin-bottom: 4px;
}
.pulse-detail.open {
  max-height: 500px;
  opacity: 1;
  padding: 12px 16px;
}

/* === LOADING SKELETONS === */

.bridge-skeleton-card,
.bridge-skeleton-line,
.bridge-skeleton-bar,
.bridge-skeleton-button {
  position: relative;
  overflow: hidden;
}

.bridge-skeleton-card,
.bridge-skeleton-button {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 72%),
    color-mix(in srgb, var(--surface) 92%, var(--gray) 8%);
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--gray) 14%);
  border-radius: var(--round-md);
  box-shadow: var(--elevation-1);
}

.bridge-skeleton-card::after,
.bridge-skeleton-line::after,
.bridge-skeleton-bar::after,
.bridge-skeleton-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-135%);
  will-change: transform;
  animation: bridge-skeleton-shimmer 2.4s ease-in-out infinite;
}

.bridge-skeleton-card {
  padding: var(--pad-md);
  opacity: 0.88;
  will-change: opacity;
  animation: bridge-skeleton-breathe 1.8s ease-in-out infinite;
}

.bridge-skeleton-grid,
.bridge-skeleton-stack,
.bridge-skeleton-list,
.bridge-skeleton-actions,
.bridge-skeleton-board-track {
  display: flex;
  gap: 10px;
}

.bridge-skeleton-grid,
.bridge-skeleton-stack,
.bridge-skeleton-list {
  flex-direction: column;
}

.bridge-skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bridge-skeleton-line,
.bridge-skeleton-bar {
  display: block;
  background: color-mix(in srgb, var(--surface-high) 70%, var(--gray) 30%);
}

.bridge-skeleton-line {
  width: var(--skeleton-width, 100%);
  height: 12px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.bridge-skeleton-line.is-dot {
  width: var(--skeleton-width, 12px);
  height: var(--skeleton-width, 12px);
  border-radius: 50%;
}

.bridge-skeleton-line.is-avatar {
  width: var(--skeleton-width, 28px);
  height: var(--skeleton-width, 28px);
  border-radius: 50%;
}

.bridge-skeleton-line.is-pill {
  width: var(--skeleton-width, 28px);
  height: 20px;
}

.bridge-skeleton-line.right {
  margin-left: auto;
}

.bridge-skeleton-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
}

.bridge-skeleton-button {
  width: 112px;
  height: 36px;
  border-radius: var(--round-full);
}

.bridge-skeleton-button.small {
  width: 88px;
  height: 32px;
}

.bridge-skeleton-actions {
  flex-wrap: wrap;
}

.bridge-skeleton-provider,
.bridge-skeleton-fuel,
.bridge-skeleton-feedback,
.bridge-skeleton-robert,
.bridge-skeleton-agent-performance,
.bridge-skeleton-auth-service,
.bridge-skeleton-auth-vault,
.bridge-skeleton-ops-card,
.bridge-skeleton-design,
.bridge-skeleton-design-detail,
.bridge-skeleton-updates,
.bridge-skeleton-smoke,
.bridge-skeleton-pipeline-event,
.bridge-skeleton-stage,
.bridge-skeleton-idea,
.bridge-skeleton-step,
.bridge-skeleton-glossary,
.bridge-skeleton-metric,
.bridge-skeleton-issue,
.bridge-skeleton-truth,
.bridge-skeleton-cron-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bridge-skeleton-provider {
  flex: 1 1 calc(50% - 4px);
  min-width: 140px;
}

.bridge-skeleton-agent {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
}

.bridge-skeleton-system-row {
  display: grid;
  grid-template-columns: minmax(70px, 100px) 1fr minmax(44px, 72px);
  gap: 12px;
  align-items: center;
}

.bridge-skeleton-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.bridge-skeleton-chip {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.bridge-skeleton-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bridge-skeleton-group-head {
  justify-content: space-between;
}

.bridge-skeleton-task,
.bridge-skeleton-activity {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bridge-skeleton-workshop-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.bridge-skeleton-board-track {
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 4px;
}

.bridge-skeleton-stage {
  min-width: 260px;
  flex: 1 1 280px;
}

.bridge-skeleton-idea {
  padding: 12px;
  background: color-mix(in srgb, var(--surface-high) 94%, var(--gray) 6%);
  border-radius: var(--round-md);
}

.bridge-skeleton-cron-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.bridge-skeleton-smoke-row td {
  padding: 6px 10px;
}

.bridge-skeleton-smoke-row .bridge-skeleton-line {
  max-width: 100%;
}

.bridge-skeleton-pipeline-list {
  gap: 8px;
}

.bridge-skeleton-pipeline-event {
  min-height: 86px;
}

.bridge-skeleton-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.bridge-skeleton-learn,
.bridge-skeleton-version,
.bridge-skeleton-intake-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bridge-skeleton-version {
  min-height: 112px;
}

.bridge-skeleton-sysmap-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 20px;
}

.bridge-skeleton-sysmap-node,
.bridge-skeleton-sysmap-hint {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bridge-skeleton-sysmap-node {
  top: 16%;
  left: 12%;
  min-width: 132px;
}

.bridge-skeleton-sysmap-node-right {
  top: 28%;
  left: auto;
  right: 10%;
}

.bridge-skeleton-sysmap-node-bottom {
  top: auto;
  bottom: 18%;
  left: 38%;
}

.bridge-skeleton-sysmap-hint {
  right: 14%;
  bottom: 12%;
  min-width: 160px;
  flex-direction: column;
  align-items: stretch;
}

@keyframes bridge-skeleton-shimmer {
  0% { transform: translateX(-135%); }
  100% { transform: translateX(135%); }
}

@keyframes bridge-skeleton-breathe {
  0%, 100% { opacity: 0.76; }
  50% { opacity: 0.94; }
}

/* === PROVIDER GRID === */

.provider-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.provider-card {
  flex: 1 1 calc(50% - 4px);
  min-width: 140px;
  min-height: var(--tactyl-touch-min);
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transition: transform 0.1s ease-out;
  overflow: hidden;
}

.provider-card:active {
  transform: scale(0.97);
}

.provider-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.provider-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.provider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  will-change: transform, opacity;
  transition: transform 0.24s ease, opacity 0.24s ease;
  background-color: var(--dot-accent);
  box-shadow: 0 0 0 0 transparent;
  filter: saturate(0.92);
}

.provider-card[data-state="healthy"] .provider-dot { --dot-accent: var(--green); box-shadow: 0 0 8px rgba(63, 185, 80, 0.24); }
.provider-card[data-state="rate-limited"] .provider-dot { --dot-accent: var(--yellow); box-shadow: 0 0 8px rgba(242, 204, 96, 0.2); }
.provider-card[data-state="quarantined"] .provider-dot { --dot-accent: var(--red); box-shadow: 0 0 8px rgba(255, 123, 114, 0.24); }
.provider-card[data-state="disabled"] .provider-dot { --dot-accent: var(--gray); box-shadow: 0 0 6px rgba(118, 131, 144, 0.18); }

.provider-name {
  font-weight: 600;
  font-size: 13px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-status {
  font-size: 11px;
  color: var(--text);
  margin-top: 4px;
}

.provider-details {
  max-height: 0;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.2s ease-out;
  overflow: hidden;
}

.provider-card[data-expanded="true"] .provider-details {
  max-height: 120px;
  opacity: 1;
}

.provider-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}

.provider-detail-row:first-child {
  margin-top: 8px;
}

/* === AGENT GRID === */

.fleet-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  position: relative;
  overflow: hidden;
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.fleet-count-value,
.fleet-count-separator {
  display: inline-block;
}

.fleet-count-value {
  min-width: var(--count-digits, 1ch);
  text-align: center;
  will-change: transform, opacity;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.fleet-count-separator {
  opacity: 0.56;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.fleet-count[data-health-state="full"] .fleet-count-value[data-count-part="healthy"] {
  color: var(--green);
  text-shadow: 0 0 8px rgba(63, 185, 80, 0.18);
  filter: saturate(1.12);
}

.fleet-count[data-health-state="partial"] .fleet-count-value[data-count-part="healthy"] {
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(242, 204, 96, 0.14);
  filter: saturate(1.08);
}

.fleet-count[data-health-state="down"] .fleet-count-value[data-count-part="healthy"] {
  color: var(--red);
  text-shadow: 0 0 8px rgba(255, 123, 114, 0.16);
  filter: saturate(1.08);
}

.fleet-count[data-health-state="empty"] .fleet-count-value[data-count-part="healthy"] {
  color: var(--text-dim);
  text-shadow: none;
}

.fleet-count-updating {
  animation: fleetCountLift 0.34s ease-out;
}

.fleet-count[data-count-trend="up"] {
  transform: translateY(-1px);
}

.fleet-count[data-count-trend="down"] {
  transform: translateY(1px);
}

.fleet-count-updating .fleet-count-value {
  transform: translateY(-1px);
}

.fleet-count-updating .fleet-count-separator {
  opacity: 0.78;
  transform: scale(0.96);
}

.agent-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agent-tile {
  flex: 1 1 calc(25% - 5px);
  min-width: 72px;
  max-width: calc(25% - 5px);
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.agent-tile[data-state="active"] { border-color: var(--green); }
.agent-tile[data-state="error"] { border-color: var(--red); }
.agent-tile[data-state="blocked"] { border-color: var(--yellow); }

.agent-emoji {
  font-size: 18px;
  line-height: 1;
}

.agent-name {
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--text);
}

.agent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  will-change: transform, opacity;
  transition: transform 0.24s ease, opacity 0.24s ease;
  background-color: var(--dot-accent);
  box-shadow: 0 0 0 0 transparent;
  filter: saturate(0.92);
}

.agent-tile[data-state="idle"] .agent-dot { --dot-accent: var(--gray); box-shadow: 0 0 5px rgba(118, 131, 144, 0.16); }
.agent-tile[data-state="active"] .agent-dot { --dot-accent: var(--green); box-shadow: 0 0 6px rgba(63, 185, 80, 0.22); }
.agent-tile[data-state="error"] .agent-dot { --dot-accent: var(--red); box-shadow: 0 0 6px rgba(255, 123, 114, 0.22); }
.agent-tile[data-state="blocked"] .agent-dot { --dot-accent: var(--yellow); box-shadow: 0 0 6px rgba(242, 204, 96, 0.2); }

.agent-tile {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.agent-tile:active {
  transform: scale(0.95);
}

.agent-tile:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.agent-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  will-change: opacity;
  transition: opacity 0.2s ease-out;
}

.agent-tile[data-expanded="true"] {
  flex: 1 1 calc(50% - 3px);
  max-width: calc(50% - 3px);
}

.agent-tile[data-expanded="true"] .agent-detail {
  max-height: 120px;
  opacity: 1;
}

.agent-detail-status {
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.agent-tile[data-state="error"] .agent-detail-status { color: var(--red); }
.agent-tile[data-state="blocked"] .agent-detail-status { color: var(--yellow); }
.agent-tile[data-state="active"] .agent-detail-status { color: var(--green); }

.agent-detail-row {
  font-size: 10px;
  color: var(--text-dim);
  padding: 1px 0;
}

.agent-detail-model {
  font-size: 9px;
  color: var(--text-dim);
  opacity: 0.88;
  margin-top: 2px;
}

/* === SYSTEM STATS === */

.system-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 10px 14px;
}

.stat-label {
  font-size: 12px;
  font-weight: 600;
  width: 50px;
  flex-shrink: 0;
}

.stat-bar-track {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transform-origin: left center;
  will-change: transform;
  transition: transform 0.5s ease-out;
  background: var(--green);
}

.stat-bar-fill[data-level="warning"] { background: var(--yellow); }
.stat-bar-fill[data-level="danger"] { background: var(--red); }

.stat-value {
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
  min-width: 80px;
  text-align: right;
}

.container-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 10px 14px;
}

.container-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  will-change: transform, opacity;
  transition: transform 0.24s ease, opacity 0.24s ease;
  background-color: var(--dot-accent);
  box-shadow: 0 0 0 0 transparent;
  filter: saturate(0.92);
}

.container-row[data-state="running"] .container-dot { --dot-accent: var(--green); box-shadow: 0 0 8px rgba(63, 185, 80, 0.2); }
.container-row[data-state="exited"] .container-dot { --dot-accent: var(--red); box-shadow: 0 0 8px rgba(255, 123, 114, 0.2); }
.container-row[data-state="restarting"] .container-dot { --dot-accent: var(--yellow); box-shadow: 0 0 8px rgba(242, 204, 96, 0.18); }

.container-name {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
}

.container-status {
  font-size: 11px;
  color: var(--text-dim);
}

/* === ACTION PANEL (Controls) === */

.action-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 8px;
}

.action-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  min-width: 0;
}

.action-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  will-change: transform, opacity;
  transition: transform 0.24s ease, opacity 0.24s ease;
  background-color: var(--dot-accent);
  box-shadow: 0 0 0 0 transparent;
  filter: saturate(0.92);
}

.action-status-item[data-state="running"] .action-dot { --dot-accent: var(--green); box-shadow: 0 0 8px rgba(63, 185, 80, 0.2); }
.action-status-item[data-state="stopped"] .action-dot { --dot-accent: var(--red); box-shadow: 0 0 8px rgba(255, 123, 114, 0.2); }

.action-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
}

.action-state {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.action-status-item[data-state="running"] .action-state { color: var(--green); }
.action-status-item[data-state="stopped"] .action-state { color: var(--red); }

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactyl-touch-min);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.action-btn:hover { background: var(--surface-hover, var(--border)); }
.action-btn:active { transform: scale(0.97); }
.action-btn:disabled { opacity: 0.5; cursor: default; }
.action-btn-warn {
  border-color: var(--yellow);
  color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 12%, var(--surface));
}

/* === FUEL GAUGES === */

.fuel-gauges {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fuel-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, rgba(88, 166, 255, 0.08), rgba(22, 27, 34, 0.98));
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 10px 14px;
}

.fuel-row-top,
.fuel-row-bottom,
.fuel-free-head,
.fuel-cost-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fuel-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fuel-label-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.fuel-label-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
}

.fuel-row-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fuel-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(139, 148, 158, 0.28);
  background: rgba(139, 148, 158, 0.08);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fuel-pill-blue {
  border-color: rgba(88, 166, 255, 0.38);
  background: rgba(88, 166, 255, 0.12);
  color: var(--blue);
}

.fuel-pill-green {
  border-color: rgba(63, 185, 80, 0.38);
  background: rgba(63, 185, 80, 0.12);
  color: var(--green);
}

.fuel-bar-track {
  flex: 1;
  width: 100%;
  height: 12px;
  background: rgba(48, 54, 61, 0.7);
  border-radius: 999px;
  overflow: hidden;
}

.fuel-bar-fill {
  height: 100%;
  border-radius: 999px;
  transform-origin: left center;
  will-change: transform;
  transition: transform 0.5s ease-out;
  background: var(--green);
}

.fuel-bar-fill[data-level="safe"] { background: var(--green); }
.fuel-bar-fill[data-level="warning"] { background: var(--yellow); }
.fuel-bar-fill[data-level="danger"] { background: var(--red); }

.fuel-value {
  font-size: 11px;
  color: var(--text-dim);
}

.fuel-free-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(56, 139, 253, 0.06), rgba(22, 27, 34, 0.98));
}

.fuel-free-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.fuel-free-sub,
.fuel-cost-label {
  font-size: 11px;
  color: var(--text-dim);
}

.fuel-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fuel-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 11px;
  min-height: var(--tactyl-touch-min);
  border-radius: 999px;
  border: 1px solid rgba(88, 166, 255, 0.24);
  background: rgba(88, 166, 255, 0.08);
  color: var(--text);
  font: inherit;
}

.fuel-chip-name {
  font-size: 11px;
  font-weight: 600;
}

.fuel-chip-count {
  min-width: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(13, 17, 23, 0.65);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.fuel-chip-detail {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(48, 54, 61, 0.9);
  background: rgba(13, 17, 23, 0.58);
}

.fuel-chip-detail[data-state="expanding"],
.fuel-chip-detail[data-state="expanded"],
.fuel-chip-detail[data-state="collapsing"] {
  display: flex;
}

.fuel-chip-detail[data-state="expanding"],
.fuel-chip-detail[data-state="expanded"] {
  animation: fuel-detail-in 0.18s ease-out;
}

.fuel-chip-detail[data-state="collapsing"] {
  opacity: 0;
  transform: translateY(-4px);
}

@keyframes fuel-detail-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fuel-chip-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fuel-chip-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.fuel-chip-detail-value,
.fuel-cost-value {
  font-size: 12px;
  color: var(--text);
  text-align: right;
}

.fuel-cost-line {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(63, 185, 80, 0.2);
  background: rgba(63, 185, 80, 0.06);
}

@media (max-width: 520px) {
  .fuel-row-top,
  .fuel-row-bottom,
  .fuel-free-head,
  .fuel-cost-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .fuel-chip-detail-row {
    flex-direction: column;
    gap: 4px;
  }

  .fuel-chip-detail-value,
  .fuel-cost-value {
    text-align: left;
  }
}

/* === ACTIVITY === */

.activity-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 58%),
    var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--round-md);
  box-shadow: var(--md-sys-elevation-1);
  color: var(--text-dim);
  text-align: center;
  padding: 24px var(--pad-lg);
}

.activity-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-height: var(--tactyl-touch-min);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), transparent 62%),
    var(--md-sys-color-surface);
  border-radius: var(--round-md);
  border: 1px solid var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-1);
  padding: var(--pad-md);
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;
  transition:
    transform 0.14s ease-out;
}

.activity-item:hover,
.activity-item:focus-visible {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 62%),
    var(--md-sys-color-surface-container);
  border-color: color-mix(in srgb, var(--md-sys-color-outline) 72%, var(--md-sys-color-primary) 28%);
  box-shadow: var(--md-sys-elevation-2);
}

.activity-item:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.activity-item:active {
  transform: scale(0.985);
}

.activity-item[data-status="ok"] {
  border-color: var(--green);
}

.activity-item[data-status="warn"] {
  border-color: var(--yellow);
}

.activity-item[data-status="error"] {
  border-color: var(--red);
}

.activity-item[data-status="active"] {
  border-color: var(--blue);
}

.activity-item.entering {
  animation: activity-in 0.26s ease-out;
}

@keyframes activity-in {
  from {
    transform: translateY(-14px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.activity-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.activity-icon {
  font-size: 18px;
  line-height: 1;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.activity-main {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.activity-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.activity-description {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.activity-source {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.activity-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.activity-time {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray);
  flex-shrink: 0;
  will-change: transform, opacity;
  transition: transform 0.24s ease, opacity 0.24s ease;
  box-shadow: 0 0 0 0 transparent;
}

.activity-item[data-status="ok"] .activity-dot { background: var(--green); box-shadow: 0 0 8px rgba(63, 185, 80, 0.18); }
.activity-item[data-status="warn"] .activity-dot { background: var(--yellow); box-shadow: 0 0 8px rgba(242, 204, 96, 0.18); }
.activity-item[data-status="error"] .activity-dot { background: var(--red); box-shadow: 0 0 8px rgba(255, 123, 114, 0.2); }
.activity-item[data-status="active"] .activity-dot { background: var(--blue); box-shadow: 0 0 8px rgba(88, 166, 255, 0.18); }
.activity-item[data-status="info"] .activity-dot { background: var(--gray); box-shadow: 0 0 6px rgba(118, 131, 144, 0.16); }

.activity-details {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.activity-item[data-expanded="true"] .activity-details {
  display: flex;
  animation: activity-detail-in 0.18s ease-out;
}

@keyframes activity-detail-in {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.activity-detail-text {
  font-size: 12px;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

.activity-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.activity-chip {
  font-size: 10px;
  color: var(--text-dim);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
  border-radius: 999px;
  padding: 4px 8px;
}

/* === WORKSHOP === */

/* Workshop shell: on wider screens, split into a 2-column layout.
   Left column: active work (in_progress, pending, blocked) — the quick-glance.
   Right column: metrics + timeline — the context layer.
   On mobile/narrow: single column, active work first (order-driven). */
.workshop-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Workshop header: title row with inline status indicators.
   Mobile: title on top, status line + executor below, wrapping naturally.
   Split-screen: title + status on one line, executor pill right-aligned.
   Full-screen: everything on one line with space-between. */
.workshop-shell .mod-header-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  row-gap: 4px;
}

/* Pipeline summary: override mod-meta to allow wrapping (contains HTML chips) */
.workshop-shell .mod-meta {
  white-space: normal;
  overflow: visible;
  font-size: 12px;
  line-height: 1.5;
}

/* Executor status sits inline with the status text */
.workshop-shell .workshop-head-status {
  display: inline-flex;
  align-items: center;
}

/* Mobile: stack title above status line */
@media (max-width: 430px) {
  .workshop-shell .mod-header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* Split-screen (431-768px): title + chips wrap, executor inline */
@media (min-width: 431px) and (max-width: 768px) {
  .workshop-shell .mod-header-left {
    align-items: baseline;
  }
}

/* Full-screen (1081px+): single line, all items inline */
@media (min-width: 1081px) {
  .workshop-shell .mod-header-left {
    flex-wrap: nowrap;
  }
}

/* Wide layout: task groups + context sidebar side-by-side.
   flex-wrap: wrap with 100% header forces it onto its own row.
   The two columns use calc(% - gap) so they sit side-by-side on the next row. */
@media (min-width: 860px) {
  .workshop-shell {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }
  /* Header + notes: full-width row */
  .workshop-shell > .mod-header,
  .workshop-shell > .mod-notes-panel {
    flex: 0 0 100%;
  }
  /* Task groups: ~58% of row */
  .workshop-shell > .task-groups {
    flex: 0 0 calc(58% - 10px);
    min-width: 0;
  }
  /* Context sidebar: ~42% of row minus gap */
  .workshop-shell > .workshop-context-sidebar {
    flex: 0 0 calc(42% - 10px);
    min-width: 0;
  }
}

/* Extra-wide: shift proportion slightly */
@media (min-width: 1200px) {
  .workshop-shell > .task-groups {
    flex: 0 0 calc(60% - 10px);
  }
  .workshop-shell > .workshop-context-sidebar {
    flex: 0 0 calc(36% - 10px);
  }
}

/* Context sidebar: wraps metrics + executor log into one flex child
   so the wide layout gets a clean 2-column split (tasks | context). */
.workshop-context-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.spark-bar {
  display: flex;
  flex-direction: column;
  gap: var(--pad-md);
}

.spark-form {
  display: flex;
  flex-direction: column;
  gap: var(--pad-md);
  padding: var(--pad-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 70%),
    var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--round-md);
  box-shadow: var(--md-sys-elevation-1);
}

.spark-input,
.spark-select {
  width: 100%;
  min-width: 0;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.4;
}

.spark-input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

.spark-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--md-sys-color-on-surface-variant) 50%),
    linear-gradient(135deg, var(--md-sys-color-on-surface-variant) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.spark-input:hover,
.spark-select:hover {
  background-color: var(--md-sys-color-surface-container-high);
  border-color: color-mix(in srgb, var(--md-sys-color-outline) 72%, var(--md-sys-color-primary) 28%);
}

.spark-input:focus,
.spark-select:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

.spark-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pad-md);
  align-items: stretch;
}

.spark-row > .spark-select {
  flex: 1 1 170px;
}

.spark-row > .spark-submit {
  flex: 0 0 auto;
}

/* Task groups container.
   On mobile: completed/cancelled get reduced opacity to de-emphasize.
   Active work (in_progress, pending, blocked) stays full prominence. */
.task-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* De-emphasize completed/cancelled on narrow screens — active work is the glance */
@media (max-width: 600px) {
  .task-group[data-status="completed"],
  .task-group[data-status="cancelled"] {
    opacity: 0.7;
  }
  .task-group[data-status="completed"]:hover,
  .task-group[data-status="cancelled"]:hover {
    opacity: 1;
  }
}

.workshop-metrics {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Metrics grid: auto-fit columns on standalone, single column in sidebar.
   At 860px+ the metrics sit in a sidebar (~40% width) so force single column. */
.workshop-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

@media (min-width: 860px) {
  .workshop-metrics-grid {
    grid-template-columns: 1fr;
  }
}

.workshop-metric-card,
.workshop-timeline-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--pad-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 68%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--round-md);
  box-shadow: var(--elevation-1);
}

/* Wide metric card (Telegram delivery): must not overflow narrow sidebar.
   Always spans full grid width. At small widths, rate chips stack and text truncates. */
.workshop-metric-card-wide {
  min-width: 0;
  overflow: hidden;
  grid-column: 1 / -1;
}

.workshop-metric-card-wide .workshop-rate-list {
  flex-direction: column;
  gap: 6px;
}

.workshop-metric-card-wide .workshop-rate-chip {
  min-width: 0;
  overflow: hidden;
}

.workshop-metric-card-wide .workshop-rate-method,
.workshop-metric-card-wide .workshop-rate-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workshop-metric-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.workshop-metric-value {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
}

.workshop-metric-meta {
  font-size: 12px;
  color: var(--text-dim);
}

.workshop-rate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workshop-rate-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--round-full);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
  color: var(--text);
}

.workshop-rate-chip[data-tone="good"] {
  border-color: color-mix(in srgb, var(--green) 42%, var(--md-sys-color-outline-variant) 58%);
}

.workshop-rate-chip[data-tone="warn"] {
  border-color: color-mix(in srgb, var(--yellow) 46%, var(--md-sys-color-outline-variant) 54%);
}

.workshop-rate-chip[data-tone="bad"] {
  border-color: color-mix(in srgb, var(--red) 46%, var(--md-sys-color-outline-variant) 54%);
}

.workshop-rate-method {
  font-size: 12px;
  font-weight: 600;
}

.workshop-rate-value,
.workshop-rate-empty,
.workshop-timeline-empty {
  font-size: 12px;
  color: var(--text-dim);
}

.workshop-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.workshop-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.workshop-timeline-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--gray);
  flex-shrink: 0;
}

.workshop-timeline-dot[data-state="ok"] {
  background: var(--green);
}

.workshop-timeline-dot[data-state="bad"] {
  background: var(--red);
}

.workshop-timeline-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.workshop-timeline-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.workshop-timeline-summary {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.workshop-timeline-time,
.workshop-timeline-meta {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.workshop-timeline-meta {
  white-space: normal;
}

@media (max-width: 520px) {
  .workshop-timeline-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .workshop-timeline-time {
    white-space: normal;
  }
}

/* Task groups are ordered by status in JS (in_progress first).
   The active group gets a subtle left accent to draw the eye. */
.task-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Active work group: subtle left border accent */
.task-group[data-status="in_progress"] {
  padding-left: 10px;
  border-left: 3px solid var(--blue);
  border-radius: 2px;
}

.task-group[data-status="blocked"] {
  padding-left: 10px;
  border-left: 3px solid var(--yellow);
  border-radius: 2px;
}

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

.task-group-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.task-group-count {
  font-size: 11px;
  color: var(--text-dim);
}

/* Task cards: auto-column with flex-wrap.
   Cards auto-size from --task-min-w (set per breakpoint in :root).
   flex: 1 1 <min> means: cards fill available space, wrap when they can't fit 2.
   gap handles all spacing — no margin hacks. */
.task-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.task-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: var(--task-min-w, 280px);
  max-width: var(--task-max-w, 480px);
  flex: 1 1 var(--task-min-w, 280px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 70%),
    var(--surface);
  border-radius: var(--round-md);
  border: 1px solid var(--border);
  box-shadow: var(--elevation-1);
  padding: 14px 16px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;
  transition:
    transform 0.16s ease-out,
    opacity 0.16s ease-out;
  overflow: hidden;
}

.task-item:hover,
.task-item:focus-visible {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 72%),
    var(--md-sys-color-surface-container);
  border-color: color-mix(in srgb, var(--border) 76%, var(--md-sys-color-primary) 24%);
  box-shadow: var(--elevation-2);
}

.task-item:focus-visible {
  outline: 1px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.task-item:active {
  transform: scale(0.985);
}

.task-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0;
  opacity: 0;
  transform: scaleY(0.95);
  transform-origin: center;
  transition: transform 0.16s ease-out, opacity 0.16s ease-out;
}

.task-item[data-status="completed"] { border-color: var(--green); }
.task-item[data-status="in_progress"] { border-color: var(--blue); }
.task-item[data-status="blocked"] { border-color: var(--yellow); }
.task-item[data-status="failed"] { border-color: var(--red); }
.task-item[data-status="cancelled"] { border-color: var(--red); }
.task-item[data-status="in_progress"]::before {
  opacity: 1;
  transform: scaleY(1);
  background: var(--blue);
}

.task-item[data-status="blocked"]::before {
  opacity: 1;
  transform: scaleY(1);
  background: var(--yellow);
}

.task-item[data-status="failed"]::before,
.task-item[data-status="cancelled"]::before {
  opacity: 1;
  transform: scaleY(1);
  background: var(--red);
}

.task-item[data-status="completed"]::before {
  opacity: 1;
  transform: scaleY(1);
  background: var(--green);
}

.task-item.entering {
  animation: task-item-in 0.2s ease-out;
}

@keyframes task-item-in {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.task-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.task-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  background: var(--gray);
  will-change: transform, opacity;
  transition: transform 0.24s ease, opacity 0.24s ease;
  box-shadow: 0 0 0 0 transparent;
}

.task-item[data-status="completed"] .task-status-dot { background: var(--green); box-shadow: 0 0 8px rgba(63, 185, 80, 0.18); }
.task-item[data-status="in_progress"] .task-status-dot { background: var(--blue); box-shadow: 0 0 8px rgba(88, 166, 255, 0.2); }
.task-item[data-status="pending"] .task-status-dot { background: var(--gray); box-shadow: 0 0 6px rgba(118, 131, 144, 0.14); }
.task-item[data-status="blocked"] .task-status-dot { background: var(--yellow); box-shadow: 0 0 8px rgba(242, 204, 96, 0.18); }
.task-item[data-status="failed"] .task-status-dot { background: var(--red); box-shadow: 0 0 8px rgba(255, 123, 114, 0.2); }
.task-item[data-status="cancelled"] .task-status-dot { background: var(--red); box-shadow: 0 0 8px rgba(255, 123, 114, 0.18); }

.task-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.task-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.task-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.task-id-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 74%, var(--bg) 26%);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  flex-shrink: 0;
}

.task-agent {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.task-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.task-title-text {
  min-width: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task-item[data-expanded="true"] .task-title-text {
  -webkit-line-clamp: unset;
  display: block;
}

.task-urgency-indicator {
  color: var(--red);
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.task-item[data-urgency="critical"] .task-title {
  color: color-mix(in srgb, var(--text) 78%, var(--red) 22%);
}

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

.task-time {
  font-size: 12px;
  color: var(--text-dim);
}

.task-status-label {
  font-size: 11px;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Executor status: inline indicator, not a button.
   No border, no pill shape — just a dot + text like a status line. */
.executor-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
}

.executor-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  --dot-accent: var(--gray);
  background-color: var(--dot-accent);
  flex-shrink: 0;
  will-change: transform, opacity;
  transition: transform 0.24s ease, opacity 0.24s ease;
  box-shadow: 0 0 0 0 transparent;
  filter: saturate(0.92);
}

.executor-pill[data-state="alive"] .executor-pill-dot {
  --dot-accent: var(--green);
  box-shadow: 0 0 8px rgba(63, 185, 80, 0.18);
}

.executor-pill[data-state="down"] .executor-pill-dot {
  --dot-accent: var(--red);
  box-shadow: 0 0 8px rgba(255, 123, 114, 0.2);
}

.executor-pill-label {
  color: var(--text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.executor-pill-meta {
  color: var(--text-dim);
}

/* === TASK STEPS: Live activity stream in expanded task view === */

.task-steps-container {
  min-width: 0;
}

.task-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.task-steps-loading,
.task-steps-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 0;
}

.task-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  padding: 3px 0;
  min-width: 0;
}

.task-step-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.task-step-summary {
  flex: 1;
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-step[data-status="running"] .task-step-summary {
  color: var(--blue);
}

.task-step[data-status="failed"] .task-step-summary {
  color: var(--red);
}

.task-step-time {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Discovery steps: highlighted */
.task-step-discovery {
  background: color-mix(in srgb, var(--yellow) 8%, transparent 92%);
  border-radius: 4px;
  padding: 3px 6px;
}

.task-step-discovery .task-step-icon::before {
  content: "\uD83D\uDCA1";
}

.task-steps-footer {
  display: flex;
  gap: 12px;
  padding-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}

.task-steps-tokens,
.task-steps-elapsed {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.task-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.task-chip {
  font-size: 10px;
  color: var(--text-dim);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--round-full);
  background: var(--md-sys-color-surface-container);
  padding: 4px 8px;
}

.task-chip[data-kind="trigger"] {
  color: var(--blue);
  border-color: var(--blue);
}

.task-chip[data-kind="schedule"] {
  color: var(--yellow);
  border-color: var(--yellow);
}

.task-chip[data-kind="engine"] {
  color: var(--green);
  border-color: var(--green);
}

.task-chip[data-kind="agent"] {
  color: var(--text-dim);
  border-color: var(--border);
}

.task-chip[data-kind="urgency"] {
  color: var(--red);
  border-color: var(--red);
}

.task-details {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.task-item[data-expanded="true"] .task-details {
  display: flex;
  animation: task-detail-in 0.18s ease-out;
}

@keyframes task-detail-in {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.task-detail-text {
  font-size: 12px;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

.task-detail-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.task-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Pipeline chips: status text indicators in the workshop header.
   No border/pill/shadow — reads as a status line, not tappable buttons. */
.pipeline-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 0;
  margin-right: 2px;
  font-weight: 500;
  border: none;
  background: none;
  box-shadow: none;
}

/* Pipeline summary: chips row in workshop header.
   Mobile: chips wrap into 2x2 grid naturally via flex-wrap.
   Wider: inline row with gap. */
.pipeline-summary-row,
.pipeline-summary-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.pipeline-summary-note {
  margin-top: 4px;
}

.pipeline-blocked { color: var(--red); }
.pipeline-active  { color: var(--green); }
.pipeline-pending { color: var(--text-dim); }
.pipeline-done    { color: var(--blue); }
.pipeline-failed  { color: var(--red); font-weight: 600; }
.pipeline-clear   { color: var(--green); }

.pipeline-all-clear {
  font-size: 11px;
  color: var(--green);
  opacity: 0.9;
}

/* Button row — always visible at card bottom */
.task-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* Per-button dropdown menus */
.fix-dropdown {
  position: relative;
}

.fix-dropdown-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--md-sys-elevation-2, 0 2px 6px rgba(0,0,0,0.4));
  min-width: 220px;
  max-width: 280px;
  z-index: 10;
  padding: 12px;
}

.fix-dropdown-menu.fix-dropdown-open {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fix-dropdown-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

.fix-dropdown-action {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.fix-dropdown-action:hover {
  opacity: 0.85;
}

/* Legacy fix-action — used by inline edit form */
.task-fix-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.task-dot-pulse {
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.fix-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
}

.fix-options {
  display: flex;
  gap: 8px;
}

.fix-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactyl-touch-min);
  background: var(--red);
  color: var(--on-red);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.4;
}

.fix-btn[data-state="tapping"] {
  transform: scale(0.95);
}

.fix-btn:active {
  transform: scale(0.95);
}

.fix-btn:disabled {
  opacity: 0.6;
  pointer-events: none;
}

.fix-btn-done {
  background: var(--green);
  color: var(--on-green);
}

.fix-recommended {
  background: var(--blue);
  color: var(--on-accent);
}

.fix-hint {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.3;
  flex-basis: 100%;
}

.task-empty {
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  text-align: center;
}

.bridge-offline-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(248, 81, 73, 0.26);
  background:
    linear-gradient(180deg, rgba(248, 81, 73, 0.1), rgba(13, 17, 23, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.bridge-offline-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.bridge-offline-copy {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
}

.bridge-offline-hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* === AGENTS === */

.agents-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agents-meta {
  font-size: 11px;
  color: var(--text-dim);
}

.robert-card,
.agent-performance-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: var(--pad-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--round-md);
  box-shadow: var(--elevation-1);
  color: inherit;
  overflow: hidden;
}

.robert-card::before,
.agent-performance-card::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  bottom: 16px;
  width: 4px;
  border-radius: 999px;
  opacity: 1;
  background: var(--blue);
}

.robert-card-head,
.agent-performance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.robert-card-title,
.agent-performance-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  padding-left: 12px;
}

.robert-emoji,
.agent-performance-emoji {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.robert-copy,
.agent-performance-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.robert-name,
.agent-performance-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.robert-sub,
.agent-performance-sub {
  font-size: 12px;
  color: var(--text-dim);
}

.robert-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  padding-left: 12px;
}

.robert-time {
  font-size: 11px;
}

.robert-summary {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
  padding-left: 12px;
}

.robert-score,
.agent-performance-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-high);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.robert-score[data-tone="green"],
.agent-performance-card[data-score-tone="green"] .agent-performance-score {
  color: var(--green);
  border-color: rgba(63, 185, 80, 0.4);
  background: rgba(63, 185, 80, 0.08);
}

.robert-score[data-tone="yellow"],
.agent-performance-card[data-score-tone="yellow"] .agent-performance-score {
  color: var(--yellow);
  border-color: rgba(210, 153, 34, 0.4);
  background: rgba(210, 153, 34, 0.08);
}

.robert-score[data-tone="red"],
.agent-performance-card[data-score-tone="red"] .agent-performance-score {
  color: var(--red);
  border-color: rgba(248, 81, 73, 0.4);
  background: rgba(248, 81, 73, 0.08);
}

.robert-score-value,
.agent-performance-score-value {
  font-size: 15px;
  font-weight: 700;
}

.agent-performance-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agent-performance-card {
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;
  transition: transform 0.16s ease-out, opacity 0.16s ease-out;
}

.agent-performance-card:active,
.agent-performance-card[data-state="tapping"] {
  transform: scale(0.985);
}

.agent-performance-card[data-score-tone="green"]::before { background: var(--green); }
.agent-performance-card[data-score-tone="yellow"]::before { background: var(--yellow); }
.agent-performance-card[data-score-tone="red"]::before { background: var(--red); }

.agent-performance-card[data-state="expanded"] {
  border-color: rgba(88, 166, 255, 0.4);
  box-shadow: var(--elevation-2);
}

.agent-performance-details {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
}

.agent-performance-card[data-state="expanding"] .agent-performance-details,
.agent-performance-card[data-state="expanded"] .agent-performance-details,
.agent-performance-card[data-state="collapsing"] .agent-performance-details {
  display: flex;
}

.agent-performance-card[data-state="expanding"] .agent-performance-details,
.agent-performance-card[data-state="expanded"] .agent-performance-details {
  animation: perf-detail-in 0.18s ease-out;
}

.agent-performance-card[data-state="collapsing"] .agent-performance-details {
  opacity: 0;
  transform: translateY(-4px);
}

@keyframes perf-detail-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.agent-performance-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.agent-performance-detail-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.agent-performance-detail-value {
  font-size: 12px;
  color: var(--text-dim);
  text-align: right;
  max-width: min(100%, 68%);
}

.agent-performance-empty {
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  text-align: center;
}

/* === SSE CONNECTION INDICATOR === */

.sse-indicator {
  position: fixed;
  top: calc(var(--header-h) + var(--safe-top) + 8px);
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  will-change: opacity;
  transition: opacity 0.3s ease;
  z-index: 50;
}

.sse-indicator[data-state="connected"] { background: var(--green); opacity: 0.5; }
.sse-indicator[data-state="connecting"] { background: var(--yellow); animation: pulse-dot 1s ease-in-out infinite; }
.sse-indicator[data-state="disconnected"] { background: var(--red); opacity: 0.7; }

@media (min-width: 768px) {
  .activity-item {
    padding: 14px 16px;
  }
}

.fix-promote {
  background: var(--blue);
}

.fix-unstick {
  background: var(--yellow);
  color: var(--bg);
}

.fix-unstick-btn {
  position: relative;
  overflow: hidden;
  min-width: 92px;
}

.fix-unstick-label {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

.fix-unstick-btn .fix-unstick-label[data-role="next"] {
  position: absolute;
  inset: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

.fix-unstick-btn.is-transitioning .fix-unstick-label[data-role="current"] {
  animation: fix-label-out 0.24s ease-out forwards;
}

.fix-unstick-btn.is-transitioning .fix-unstick-label[data-role="next"] {
  animation: fix-label-in 0.24s ease-out forwards;
}

@keyframes fix-label-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-120%);
    opacity: 0;
  }
}

@keyframes fix-label-in {
  from {
    transform: translateY(120%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fix-kill {
  background: var(--red);
}

.fix-defer {
  background: var(--gray);
}

.fix-edit {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.fix-verify {
  background: var(--green);
}

.fix-btn-warn {
  background: var(--yellow);
  color: var(--bg);
}

.task-edit-form {
  margin-top: 8px;
}

.task-edit-textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
  box-sizing: border-box;
}

.task-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* === LAYOUT SWITCHER === */

.layout-switcher {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 16px);
  right: 16px;
  z-index: 90;
}

.layout-toggle {
  width: var(--tactyl-touch-min);
  height: var(--tactyl-touch-min);
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

.layout-toggle:active { transform: scale(0.92); }

.layout-toggle-icon { font-size: 16px; }

.layout-menu {
  position: absolute;
  bottom: 48px;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  will-change: transform, opacity;
  transform-origin: bottom right;
}

.layout-menu[hidden] {
  display: block;
  transform: scale(0.8);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.15s cubic-bezier(0.4,0,1,1), opacity 0.1s ease;
}

.layout-menu:not([hidden]) {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.2s cubic-bezier(0,0,0.2,1), opacity 0.15s ease;
}

.layout-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tactyl-touch-min);
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  -webkit-tap-highlight-color: transparent;
}

.layout-option:active { background: var(--surface-hover); }

.layout-option[data-active="true"] { color: var(--blue); }

.layout-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.layout-option[data-active="true"] .layout-num {
  background: var(--blue);
  color: var(--on-accent);
}

/* === UNDO / HISTORY === */

.updates-undo { margin-top: 24px; }

.undo-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.undo-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 12px;
}

.undo-hash {
  font-family: monospace;
  color: var(--blue);
  font-size: 11px;
  flex-shrink: 0;
}

.undo-msg {
  flex: 1;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.undo-time {
  color: var(--text-dim);
  font-size: 11px;
  flex-shrink: 0;
}

.undo-btn {
  background: var(--red);
  color: var(--on-red);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* === INTAKE (New Idea) === */

.intake-shell { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.intake-form { display: flex; flex-direction: column; gap: 14px; }

.intake-text {
  font-size: 15px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); resize: vertical; font-family: inherit;
}
.intake-text:focus { border-color: var(--accent); outline: none; }

.intake-tag-group { margin-bottom: 10px; }
.intake-tag-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.5px;
}
.intake-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }

.intake-tag {
  font-size: 12px; font-weight: 500; padding: 6px 12px;
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: transform 0.1s;
  white-space: nowrap;
}
.intake-tag:hover { background: var(--surface-hover, var(--border)); }
.intake-tag:active { transform: scale(0.95); }
.intake-tag[data-selected="true"] {
  background: var(--accent); border-color: var(--accent);
  color: var(--surface); font-weight: 600;
}

.intake-tag-count {
  font-size: 10px; opacity: 0.6; margin-left: 3px;
}
.intake-tag-new {
  border-style: dashed; opacity: 0.6;
}
.intake-tag-new:hover { opacity: 1; }

.intake-tag-input {
  font-size: 12px; padding: 5px 10px; border-radius: 16px;
  border: 1px solid var(--accent); background: var(--surface);
  color: var(--text); outline: none; width: 120px;
}

.intake-summary {
  background: var(--surface); border-radius: 10px;
  border: 1px solid var(--border); padding: 12px 14px;
  transition: opacity 0.2s;
}
.intake-summary-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 8px; letter-spacing: 0.5px;
}
.intake-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px 0; font-size: 13px;
}
.intake-summary-key { color: var(--text-dim); font-weight: 500; }
.intake-summary-val { color: var(--text); font-weight: 600; text-align: right; max-width: 60%; }

.intake-submit {
  font-size: 14px; font-weight: 600; padding: 12px 20px;
  border-radius: 10px; border: none;
  background: var(--accent); color: var(--surface); cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.intake-submit:hover { opacity: 0.9; }
.intake-submit:active { transform: scale(0.97); }
.intake-submit:disabled { opacity: 0.5; cursor: default; }

/* === BOARD === */

.ideas-stage-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 10px;
  scroll-snap-type: x proximity;
}
.ideas-stage-track::-webkit-scrollbar { height: 4px; }
.ideas-stage-track::-webkit-scrollbar-thumb { background: var(--gray); border-radius: 2px; }

.ideas-stage {
  flex: 0 0 180px;
  min-width: 160px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-high) 92%, transparent) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--round-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-snap-align: start;
  box-shadow: var(--elevation-1);
  position: relative;
  overflow: hidden;
}
.ideas-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.ideas-stage[data-density="empty"] { opacity: 0.72; }
.ideas-stage[data-stage="spark"] { border-top: 3px solid var(--yellow); }
.ideas-stage[data-stage="shape"] { border-top: 3px solid var(--blue); }
.ideas-stage[data-stage="gauntlet"] { border-top: 3px solid var(--red); }
.ideas-stage[data-stage="greenlight"] { border-top: 3px solid var(--green); }
.ideas-stage[data-stage="build"] { border-top: 3px solid #a371f7; }
.ideas-stage[data-stage="proof"] { border-top: 3px solid #f0883e; }

.ideas-stage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: -4px -4px 0;
  padding: 10px 12px;
  background: var(--surface-high);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--round-lg) - 4px);
}
.ideas-stage-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
}
.ideas-stage-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  min-width: 22px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  padding: 0 6px;
  border-radius: var(--round-full);
  box-sizing: border-box;
}
.ideas-stage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100%;
}
.ideas-stage-empty {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 14px 10px;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--round-md);
  background: color-mix(in srgb, var(--surface-high) 72%, transparent);
}

.idea-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--round-md);
  min-height: var(--tactyl-touch-min);
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: var(--elevation-1);
  transition:
    transform 0.2s ease-out;
}
.idea-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--surface) 84%, var(--surface-high));
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}
.idea-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.35;
}
.idea-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.idea-progress-bar {
  display: flex;
  gap: 2px;
  height: 4px;
  margin-bottom: 6px;
}
.idea-progress-bar span {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border-radius: var(--round-full);
  background: color-mix(in srgb, var(--border) 72%, transparent);
}
.idea-progress-bar span[data-filled="true"] {
  background: var(--green);
}
.idea-card-meta {
  font-size: 11px;
  color: var(--text-dim);
}

.board-shell { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.spark-toggle,
.board-intake-toggle {
  border-radius: 6px;
  min-height: var(--tactyl-touch-min);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}

.spark-submit,
.board-intake-submit,
.board-editor-save,
.board-editor-gauntlet {
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
}

.board-intake-bar { margin-bottom: 8px; }
.board-intake-toggle:hover,
.spark-toggle:hover,
.spark-submit:hover { opacity: 0.85; }
.board-intake-form { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; background: var(--surface, #161b22); border: 1px solid var(--border, #30363d); border-radius: 8px; padding: 14px; }
.board-intake-input { background: var(--bg, #0d1117); color: var(--text, #e6edf3); border: 1px solid var(--border, #30363d); border-radius: 6px; padding: 10px 12px; font-size: 15px; width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; }
.board-intake-input::placeholder { color: var(--text-dim, #8b949e); }
.board-intake-row { display: flex; gap: 16px; flex-wrap: wrap; }
.board-intake-group { flex: 1; min-width: 140px; }
.board-intake-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-dim, #8b949e); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.board-intake-options { display: flex; gap: 6px; flex-wrap: wrap; }
.board-option-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactyl-touch-min);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
}
.board-option-btn:hover { border-color: var(--accent, #58a6ff); }
.board-option-custom { background: var(--bg, #0d1117); color: var(--text, #e6edf3); border: 1px solid var(--border, #30363d); border-radius: 6px; padding: 6px 10px; font-size: 13px; flex: 1; min-width: 100px; }
.board-option-custom::placeholder { color: var(--text-dim, #8b949e); }
.board-intake-submit { align-self: flex-end; }
.board-intake-submit:hover,
.board-editor-save:hover,
.board-editor-gauntlet:hover { opacity: 0.85; }

.board-edit-panel { margin-top: 8px; }
.board-editor { background: var(--surface, #161b22); border: 1px solid var(--border, #30363d); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.board-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.board-editor-title { font-size: 16px; font-weight: 600; color: var(--text, #e6edf3); margin: 0; }
.board-editor-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactyl-touch-min);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
}
.board-editor-close:hover { border-color: var(--accent); }
.board-editor-stage { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.board-editor-by { color: var(--text-dim, #8b949e); }
.board-editor-fields { display: flex; flex-direction: column; gap: 8px; }
.board-editor-field { display: flex; flex-direction: column; gap: 3px; }
.board-editor-field[data-empty="true"] { border-left: 2px solid var(--yellow, #d29922); padding-left: 8px; }
.board-editor-field-label { font-size: 11px; font-weight: 600; color: var(--text-dim, #8b949e); text-transform: uppercase; letter-spacing: 0.3px; }
.board-editor-field-input { background: var(--bg, #0d1117); color: var(--text, #e6edf3); border: 1px solid var(--border, #30363d); border-radius: 4px; padding: 6px 8px; font-size: 14px; font-family: inherit; resize: vertical; width: 100%; box-sizing: border-box; }
.board-editor-field-input:focus { border-color: var(--accent, #58a6ff); outline: none; }
.board-editor-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.board-editor-shape { gap: 16px; }
.board-shape-loading,
.board-shape-error {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
}
.board-shape-loading {
  background: color-mix(in srgb, var(--surface, #161b22) 82%, var(--blue, #58a6ff) 18%);
  color: var(--text, #e6edf3);
  border: 1px solid color-mix(in srgb, var(--border, #30363d) 72%, var(--blue, #58a6ff) 28%);
}
.board-shape-error {
  background: color-mix(in srgb, var(--surface, #161b22) 82%, var(--red, #f85149) 18%);
  color: var(--text, #e6edf3);
  border: 1px solid color-mix(in srgb, var(--border, #30363d) 70%, var(--red, #f85149) 30%);
}
.board-shape-shell { display: flex; flex-direction: column; gap: 14px; }
.board-shape-progress { display: flex; flex-direction: column; gap: 8px; }
.board-shape-progress-bar { display: flex; gap: 6px; }
.board-shape-progress-segment {
  flex: 1 1 0;
  height: 8px;
  border-radius: 999px;
  background: var(--gray, #6e7681);
  opacity: 0.28;
}
.board-shape-progress-segment[data-state="filled"] {
  background: var(--green, #3fb950);
  opacity: 0.9;
}
.board-shape-progress-segment[data-state="current"],
.board-shape-progress-segment[data-state="current-filled"] {
  background: var(--blue, #58a6ff);
  opacity: 1;
  will-change: transform, opacity;
  animation: board-shape-pulse 1.2s ease-in-out infinite;
}
.board-shape-progress-meta {
  font-size: 12px;
  color: var(--text-dim, #8b949e);
  letter-spacing: 0.02em;
}
.board-shape-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.board-shape-nav-btn,
.board-shape-summary-toggle,
.board-shape-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border, #30363d);
  background: var(--surface, #161b22);
  color: var(--text, #e6edf3);
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  transition:
    transform 0.1s ease-out,
    opacity 0.18s ease-out;
}
.board-shape-nav-btn,
.board-shape-skip { padding: 8px 14px; font-size: 13px; font-weight: 500; }
.board-shape-summary-toggle { width: 100%; justify-content: space-between; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.board-shape-nav-btn:hover,
.board-shape-summary-toggle:hover,
.board-shape-skip:hover {
  border-color: color-mix(in srgb, var(--border, #30363d) 62%, var(--blue, #58a6ff) 38%);
  background: color-mix(in srgb, var(--surface, #161b22) 88%, white 12%);
}
.board-shape-nav-btn:active,
.board-shape-summary-toggle:active,
.board-shape-skip:active { transform: scale(0.97); }
.board-shape-nav-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.board-shape-position {
  font-size: 12px;
  color: var(--text-dim, #8b949e);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.board-shape-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border, #30363d) 76%, white 24%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 70%),
    var(--surface, #161b22);
  box-shadow: var(--elevation-2);
}
.board-shape-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue, #58a6ff);
}
.board-shape-question {
  font-size: 18px;
  line-height: 1.35;
  color: var(--text, #e6edf3);
}
.board-shape-hint {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim, #8b949e);
}
.board-shape-options { margin-top: 2px; }
.board-shape-option[data-selected="true"] {
  border-color: var(--blue, #58a6ff);
  background: color-mix(in srgb, var(--blue, #58a6ff) 18%, var(--md-sys-color-surface-container-high, var(--surface, #161b22)) 82%);
  color: var(--text, #e6edf3);
}
.board-shape-custom { margin-top: 2px; }
.board-shape-custom-input {
  min-height: 92px;
  background: var(--md-sys-color-surface-container, var(--bg, #0d1117));
}
.board-shape-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.board-shape-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border, #30363d);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #161b22) 92%, white 8%);
  overflow: hidden;
}
.board-shape-summary-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
}
.board-shape-summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.board-shape-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim, #8b949e);
}
.board-shape-summary-value {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text, #e6edf3);
  white-space: pre-wrap;
}
.board-shape-summary-empty {
  font-size: 13px;
  color: var(--text-dim, #8b949e);
}
.board-shape-ready {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--green, #3fb950) 36%, var(--border, #30363d) 64%);
  background: color-mix(in srgb, var(--surface, #161b22) 82%, var(--green, #3fb950) 18%);
}
.board-shape-ready-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green, #3fb950);
  margin-bottom: 6px;
}
.board-shape-ready-copy {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text, #e6edf3);
}

@keyframes board-shape-pulse {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.96); opacity: 0.72; }
}

.idea-stage-pill[data-stage="spark"] .idea-stage-pill-dot { background: var(--yellow); }

.board-empty {
  color: var(--text-dim);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}

/* === FEEDBACK === */
.feedback-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-empty {
  color: var(--text-dim);
  font-size: 14px;
  padding: 24px var(--pad-lg);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--round-md);
  box-shadow: var(--elevation-1);
  text-align: center;
}
.feedback-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feedback-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 72%),
    var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--round-md);
  box-shadow: var(--elevation-1);
  padding: var(--pad-lg);
}

.feedback-item:hover,
.feedback-item:focus-within {
  border-color: color-mix(in srgb, var(--md-sys-color-outline) 72%, var(--md-sys-color-primary) 28%);
  box-shadow: var(--elevation-2);
}

.feedback-answered {
  opacity: 0.7;
}

.feedback-source {
  font-size: 11px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.feedback-question {
  font-size: 14px;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface);
  white-space: pre-wrap;
}

.feedback-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactyl-touch-min);
  max-width: 100%;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--round-full);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.1s ease-out,
    opacity 0.18s ease-out;
}

.feedback-option:hover {
  border-color: color-mix(in srgb, var(--md-sys-color-outline) 62%, var(--md-sys-color-primary) 38%);
  background: var(--md-sys-color-surface-container-highest);
}

.feedback-option:focus-visible {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

.feedback-option:active {
  transform: scale(0.97);
}

.feedback-option:disabled {
  opacity: 0.45;
  cursor: default;
}

.feedback-secondary {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.feedback-logissue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tactyl-touch-min);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  border-radius: var(--round-full);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.1s ease-out,
    opacity 0.18s ease-out;
}

.feedback-logissue:hover {
  background: var(--md-sys-color-surface-container-high);
}

.feedback-logissue:active {
  transform: scale(0.97);
}

.feedback-logissue:disabled {
  opacity: 0.5;
  cursor: default;
}

.feedback-custom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.feedback-custom-input {
  flex: 1 1 260px;
  width: 100%;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--round-md);
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  line-height: 1.4;
}

.feedback-custom-input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

.feedback-custom-input:hover {
  background: var(--md-sys-color-surface-container-high);
  border-color: color-mix(in srgb, var(--md-sys-color-outline) 72%, var(--md-sys-color-primary) 28%);
}

.feedback-custom-input:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

.feedback-custom-submit {
  white-space: nowrap;
  align-self: stretch;
}

@media (prefers-contrast: more) {
  :root {
    --surface: #121820;
    --surface-high: #1a2330;
    --surface-highest: #233041;
    --text-dim: #edf3f8;
    --border: #6c7a8b;
    --border-subtle: #546170;
  }

  .icon-btn,
  .learn-suggestion,
  .feedback-option,
  .board-option-btn,
  .settings-card,
  .provider-card,
  .agent-tile,
  .activity-item {
    border-width: 2px;
  }
}

@media (forced-colors: active) {
  .skip-link,
  button,
  input,
  select,
  textarea,
  [role="button"] {
    forced-color-adjust: auto;
  }
}

.feedback-answer {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
}

@media (max-width: 600px) {
  .feedback-custom-submit {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .workshop-shell,
  .board-shell {
    gap: 16px;
  }
  .task-groups,
  .task-group,
  .ideas-stage-list {
    gap: 12px;
  }
  .task-item {
    min-height: 96px;
    padding: 16px;
  }
  .task-title-text,
  .idea-card-title {
    font-size: 14px;
  }
  .task-time,
  .task-status-label,
  .idea-card-meta {
    font-size: 12px;
  }
  .board-shape-nav { align-items: stretch; }
  .board-shape-nav-btn,
  .board-shape-skip,
  .board-editor-save {
    width: 100%;
  }
  .board-shape-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 600px) {
  .ideas-stage { flex: 1 1 auto; min-width: 0; }
}

/* === SETTINGS === */

.settings-shell { display: flex; flex-direction: column; gap: 20px; }
.settings-group { display: flex; flex-direction: column; gap: 8px; }
.settings-group-title { font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.settings-group-desc { font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--round-md); box-shadow: var(--elevation-1); overflow: hidden; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--pad-lg); border-bottom: 1px solid var(--border-subtle); }
.settings-row:last-child { border-bottom: none; }
.settings-row-label { flex: 1; min-width: 0; }
.settings-row-title { display: block; font-size: 14px; color: var(--text); font-weight: 500; }
.settings-row-desc { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactyl-touch-min);
  border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.settings-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactyl-touch-min);
  border-radius: 12px; padding: 8px 12px; font-size: 12px; cursor: pointer;
}
.settings-theme-picks { display: flex; gap: 6px; }
.settings-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactyl-touch-min);
  border-radius: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer;
}

/* === UPDATES === */

.icon-btn-updates {
  will-change: transform, opacity;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.icon-btn-updates[data-update-state="hidden"] {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  width: 0;
  padding: 0;
  overflow: hidden;
}

.icon-btn-updates[data-update-state="alerting"] {
  transform: scale(1);
  opacity: 1;
}

.icon-btn-updates[data-update-state="viewing"],
.icon-btn-updates[data-update-state="deploying"],
.icon-btn-updates[data-update-state="deployed"] {
  transform: scale(1);
  opacity: 1;
}

@media (max-width: 430px) {
  .settings-row {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-theme-picks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .settings-theme-btn,
  .mod-action-btn,
  .auth-reauth-btn {
    width: 100%;
  }
}

.updates-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 16px;
  min-height: 40vh;
}

.updates-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  padding: 24px 20px;
  background: linear-gradient(180deg, rgba(88, 166, 255, 0.08), rgba(88, 166, 255, 0.03));
  border: 1px solid rgba(88, 166, 255, 0.18);
  border-radius: var(--round-lg);
  box-shadow: var(--elevation-1);
}

.updates-icon {
  font-size: 48px;
  line-height: 1;
}

.updates-headline {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  text-wrap: balance;
}

.updates-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
  max-width: 32ch;
  line-height: 1.5;
  text-wrap: pretty;
}

.updates-deploy-btn {
  margin-top: 16px;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 430px) {
  .updates-status {
    padding: 20px 16px;
  }

  .updates-headline {
    font-size: 17px;
  }
}

/* === SYSTEM MAP === */

.sysmap-shell {
  padding: var(--pad-md) var(--pad-lg);
}

.sysmap-canvas-wrap {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 320px;
  max-height: 600px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
}

.sysmap-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.sysmap-detail {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--pad-md) var(--pad-lg);
}

.sysmap-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sysmap-detail-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.sysmap-detail-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactyl-touch-min);
  min-height: var(--tactyl-touch-min);
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.sysmap-detail-close:hover {
  color: var(--text);
}

.sysmap-detail-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sysmap-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.sysmap-detail-label {
  color: var(--text-dim);
  font-weight: 500;
}

.sysmap-detail-value {
  color: var(--text);
}

.sysmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-dim);
}

.sysmap-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sysmap-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

@media (max-width: 480px) {
  .sysmap-canvas-wrap {
    height: 50vh;
    min-height: 280px;
  }
}

/* === LAYOUT MODE OVERRIDES === */

body[data-layout="1"] { /* default — current dark theme */ }
/* === Layout 2: Material Design 3 Dark Theme ===
   Source: m3.material.io — adapted for dark dashboard PWA
   All M3 tokens override the base CSS variables so every component inherits. */
body[data-layout="2"] {
  /* M3 Dark color scheme */
  --bg: var(--layout-2-bg);
  --surface: var(--layout-2-surface);
  --surface-hover: var(--layout-2-surface-hover);
  --border: var(--layout-2-border);
  --text: var(--layout-2-text);
  --text-dim: var(--layout-2-text-dim);
  --accent: var(--layout-2-accent);
  --green: var(--layout-2-green);
  --yellow: var(--layout-2-yellow);
  --red: var(--layout-2-red);
  --blue: var(--layout-2-blue);
  --gray: var(--layout-2-gray);

  /* M3 semantic tokens */
  --m3-primary: var(--layout-2-primary);
  --m3-on-primary: var(--layout-2-on-primary);
  --m3-primary-container: var(--layout-2-primary-container);
  --m3-on-primary-container: var(--layout-2-on-primary-container);
  --m3-secondary: var(--layout-2-secondary);
  --m3-on-secondary: var(--layout-2-on-secondary);
  --m3-surface-container: var(--layout-2-surface-container);
  --m3-surface-container-high: var(--layout-2-surface-container-high);
  --m3-surface-container-highest: var(--layout-2-surface-container-highest);
  --m3-on-surface: var(--layout-2-on-surface);
  --m3-on-surface-variant: var(--layout-2-on-surface-variant);
  --m3-outline: var(--layout-2-outline);
  --m3-outline-variant: var(--layout-2-outline-variant);
  --m3-error: var(--layout-2-error);
  --m3-on-error: var(--layout-2-on-error);

  /* M3 typography */
  font-family: "Google Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.01em;

  /* M3 shape */
  --m3-radius-sm: 8px;
  --m3-radius-md: 12px;
  --m3-radius-lg: 16px;
  --m3-radius-xl: 28px;

  /* M3 elevation (dark) */
  --m3-elevation-1: 0 1px 2px 0 var(--layout-2-elevation-umbra-strong), 0 1px 3px 1px var(--layout-2-elevation-umbra-soft);
  --m3-elevation-2: 0 1px 2px 0 var(--layout-2-elevation-umbra-strong), 0 2px 6px 2px var(--layout-2-elevation-umbra-soft);
  --m3-elevation-3: 0 1px 3px 0 var(--layout-2-elevation-umbra-strong), 0 4px 8px 3px var(--layout-2-elevation-umbra-soft);

  /* M3 motion */
  --m3-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --m3-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --m3-duration-short: 200ms;
  --m3-duration-medium: 400ms;
}

/* M3 header */
body[data-layout="2"] .header {
  background: var(--m3-surface-container);
  border-bottom: 1px solid var(--m3-outline-variant);
}

/* M3 icon bar buttons */
body[data-layout="2"] .icon-btn {
  border-radius: var(--m3-radius-lg);
}
body[data-layout="2"] .icon-btn.active {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  box-shadow: none;
}
body[data-layout="2"] .icon-btn:hover:not(.active) {
  background: var(--layout-2-state-hover-primary);
}

/* M3 cards — provider, agent, task, idea, feedback, version */
body[data-layout="2"] .provider-card,
body[data-layout="2"] .agent-tile,
body[data-layout="2"] .task-item,
body[data-layout="2"] .idea-card,
body[data-layout="2"] .feedback-item,
body[data-layout="2"] .version-item,
body[data-layout="2"] .agent-performance-card,
body[data-layout="2"] .robert-card,
body[data-layout="2"] .board-editor,
body[data-layout="2"] .board-intake-form {
  background: var(--m3-surface-container-high);
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-radius-md);
  box-shadow: var(--m3-elevation-1);
}
body[data-layout="2"] .task-item:hover,
body[data-layout="2"] .idea-card:hover,
body[data-layout="2"] .activity-item:hover {
  box-shadow: var(--m3-elevation-2);
}

/* M3 buttons */
body[data-layout="2"] .spark-toggle,
body[data-layout="2"] .spark-submit,
body[data-layout="2"] .board-intake-toggle,
body[data-layout="2"] .board-intake-submit,
body[data-layout="2"] .board-editor-save,
body[data-layout="2"] .version-save-btn,
body[data-layout="2"] .feedback-option {
  border-radius: var(--m3-radius-xl);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: transform var(--m3-duration-short) var(--m3-ease-standard),
              opacity var(--m3-duration-short) var(--m3-ease-standard);
}
body[data-layout="2"] .spark-toggle,
body[data-layout="2"] .board-intake-toggle,
body[data-layout="2"] .version-save-btn {
  background: var(--m3-primary);
  color: var(--m3-on-primary);
}
body[data-layout="2"] .spark-submit,
body[data-layout="2"] .board-intake-submit,
body[data-layout="2"] .board-editor-save {
  background: var(--m3-primary);
  color: var(--m3-on-primary);
}
body[data-layout="2"] .board-editor-gauntlet,
body[data-layout="2"] .version-rollback-btn,
body[data-layout="2"] .version-lesson-confirm {
  background: var(--m3-error);
  color: var(--m3-on-error);
  border-radius: var(--m3-radius-xl);
}

/* M3 board option buttons */
body[data-layout="2"] .board-option-btn {
  border-radius: var(--m3-radius-sm);
  border-color: var(--m3-outline);
}
body[data-layout="2"] .board-option-btn[data-selected="true"] {
  background: var(--m3-primary);
  border-color: var(--m3-primary);
  color: var(--m3-on-primary);
}

/* M3 module headers */
body[data-layout="2"] .mod-header {
  border-bottom-color: var(--m3-outline-variant, var(--border));
}

body[data-layout="2"] .mod-title {
  font-weight: 400;
  letter-spacing: 0;
}

body[data-layout="2"] .mod-menu-btn:hover {
  background: var(--layout-2-state-hover-primary-strong);
  color: var(--m3-primary);
}

body[data-layout="2"] .mod-notes-panel {
  background: var(--m3-surface-container);
  border-color: var(--m3-outline-variant);
}

body[data-layout="2"] .mod-notes-input {
  background: var(--bg);
  border-color: var(--m3-outline-variant);
}

body[data-layout="2"] .mod-notes-input:focus {
  border-color: var(--m3-primary);
}

body[data-layout="2"] .mod-notes-send {
  background: var(--m3-primary);
}

body[data-layout="2"] .mod-note-author {
  color: var(--m3-primary);
}

/* M3 status banner */
body[data-layout="2"] .status-banner {
  border-radius: var(--m3-radius-md);
  background: var(--m3-surface-container-high);
}

/* M3 pipeline chips */
body[data-layout="2"] .pipeline-chip {
  border-radius: var(--round-full);
}

/* M3 idea stage dots */
body[data-layout="2"] .ideas-stage {
  border-radius: var(--m3-radius-md);
}
body[data-layout="2"] .idea-stage-pill {
  border-radius: var(--m3-radius-xl);
}

/* M3 progress bars */
body[data-layout="2"] .idea-progress-bar {
  border-radius: var(--m3-radius-sm);
}
body[data-layout="2"] .idea-progress-bar span {
  border-radius: var(--m3-radius-sm);
}

/* M3 layout switcher */
body[data-layout="2"] .layout-toggle {
  border-radius: var(--m3-radius-lg);
  background: var(--m3-surface-container-high);
  box-shadow: var(--m3-elevation-2);
}

/* M3 main content area */
body[data-layout="2"] .main {
  background: var(--bg);
}
body[data-layout="3"] { /* variant B — designer experiments here */ }

/* Version Manager */
.version-save-btn { min-height: var(--tactyl-touch-min); border-radius: 6px; padding: 10px 16px; font-size: 14px; font-weight: 600; }
.version-save-btn:hover { opacity: 0.85; }
.version-list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 440px; overflow-y: auto;
  padding: var(--pad-md);
  background: var(--surface-high);
  border: 1px solid var(--border-subtle);
  border-radius: var(--round-md);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
}
.version-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--round-md); padding: var(--pad-md);
  box-shadow: var(--elevation-1);
}
.version-inline-action { margin-top: 8px; }
.version-inline-feedback { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.version-inline-feedback textarea { font-size: 14px; }
.version-inline-btns { display: flex; gap: 6px; }
.version-list::-webkit-scrollbar { width: 4px; }
.version-list::-webkit-scrollbar-thumb { background: var(--gray); border-radius: 2px; }
.version-item { background: var(--surface, #161b22); border: 1px solid var(--border, #30363d); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.version-current { border-color: var(--green, #3fb950); border-width: 2px; }
.version-item-head { display: flex; align-items: center; gap: 8px; }
.version-hash { font-family: monospace; font-size: 12px; background: var(--bg, #0d1117); padding: 2px 6px; border-radius: 4px; color: var(--accent, #58a6ff); }
.version-badge { font-size: 10px; font-weight: 700; color: var(--green, #3fb950); text-transform: uppercase; letter-spacing: 0.5px; }
.version-date { font-size: 12px; color: var(--text-dim, #8b949e); margin-left: auto; }
.version-msg { font-size: 14px; color: var(--text, #e6edf3); }
.version-rollback-btn { border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; align-self: flex-start; margin-top: 4px; }
.version-rollback-btn:hover { opacity: 0.85; }
.version-empty { color: var(--text-dim, #8b949e); font-size: 14px; padding: 16px 0; }
.version-lesson-input { background: var(--bg, #0d1117); color: var(--text, #e6edf3); border: 1px solid var(--border, #30363d); border-radius: 6px; padding: 10px 12px; font-size: 15px; font-family: inherit; resize: vertical; width: 100%; box-sizing: border-box; }
.version-lesson-input::placeholder { color: var(--text-dim, #8b949e); }
.version-lesson-confirm { border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 600; }
.version-lesson-confirm:hover { opacity: 0.85; }
.version-lesson-cancel { border-radius: 6px; padding: 8px 16px; font-size: 14px; }
.version-lesson-cancel:hover { border-color: var(--accent); }

/* === CORINNE'S THEME ===
   Warm light palette from fictionandflame.com
   Rose accent, plum text, cream background, Inter font.
   Applied via body[data-user="corinne"] */

body[data-user="corinne"] {
  /* Color scheme: tell the browser this is a light theme.
     Affects scrollbar colors, form control defaults, system UI.
     CSS-Tricks: use color-scheme for native element consistency. */
  color-scheme: light;

  /* Palette from fictionandflame.com */
  --bg: #faf7f5;
  --surface: #ffffff;
  --surface-high: #f5f0ed;
  --surface-highest: #ece6e2;
  --surface-hover: #f0ebe7;
  --border: #e0d6d0;
  --border-subtle: #ebe3de;
  --text: #4a3f4d;
  --text-dim: #796d7d;      /* 4.6:1 on cream — was #8a7f8e (3.6:1 FAIL) */
  --accent: #a06152;        /* 4.6:1 on white — was #cba8a0 (2.2:1 FAIL). Deep rose, keeps warmth. */
  --accent-light: #cba8a0;  /* Original rose — use for backgrounds, fills, non-text decorative elements */
  --green: #427f4c;         /* 4.5:1 on cream — was #5ea66a (2.8:1 FAIL) */
  --yellow: #8b6e28;        /* 4.5:1 on cream — was #c4a24e (2.3:1 FAIL) */
  --red: #bd4e4e;           /* 4.5:1 on cream — was #c47070 (3.3:1 FAIL) */
  --blue: #4f739b;          /* 4.9:1 on white — was #7a9ec4 (2.8:1 FAIL) */
  --gray: #a09698;

  /* Typography: Inter from her site, system stack fallback */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Tactyl: smooth, responsive, spammable.
     Touch targets 44px+ (WCAG). Transitions ease-out 200ms.
     Active states give instant tactile feedback via transform. */
  --transition-fast: 150ms ease-out;
  --transition-normal: 200ms ease-out;
  --touch-min: 44px;
}

body[data-user="corinne"] .header {
  background: #ffffff;
  border-bottom: 1px solid #e0d6d0;
}

body[data-user="corinne"] .icon-btn {
  color: var(--text-dim);
}

body[data-user="corinne"] .icon-btn.active,
body[data-user="corinne"] .icon-btn:hover {
  color: #4a3f4d;
}

body[data-user="corinne"] .icon-btn.active {
  background: rgba(203, 168, 160, 0.18);
  box-shadow: inset 0 0 0 1px rgba(203, 168, 160, 0.28);
}

body[data-user="corinne"] .icon-btn.active::after {
  background: #cba8a0;
}

body[data-user="corinne"] .status-banner[data-status="operational"] {
  background: #f0ebe7;
  border-color: #e0d6d0;
}

body[data-user="corinne"] .status-banner[data-status="operational"] .status-dot {
  background: var(--green);
}

body[data-user="corinne"] .idea-stage-pill {
  font-weight: 600;
}

body[data-user="corinne"] .intake-tag[data-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

body[data-user="corinne"] .intake-submit,
body[data-user="corinne"] .board-editor-save {
  background: var(--accent);
  color: var(--on-accent);
}

body[data-user="corinne"] .mod-title {
  color: #4a3f4d;
}

body[data-user="corinne"] .intake-text:focus,
body[data-user="corinne"] .feedback-custom-input:focus {
  border-color: #cba8a0;
}

/* === LEARN SECTION (Corinne's gentle guide) === */

.learn-shell { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.learn-map { padding: 16px 0; }
.learn-map-row {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}

.learn-node {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 20px; border-radius: 16px;
  border: 2px solid var(--border); background: var(--surface);
  cursor: pointer; transition: transform 0.1s;
  min-width: 80px;
}
.learn-node:hover,
.learn-node:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.learn-node:active { transform: scale(0.95); }
.learn-node-icon { font-size: 28px; }
.learn-node-label { font-size: 12px; font-weight: 600; color: var(--text); }

.learn-arrow { font-size: 20px; color: var(--text-dim); }

@media (max-width: 640px) {
  .learn-map-row {
    flex-direction: column;
    gap: 10px;
  }

  .learn-node {
    width: min(100%, 220px);
  }

  .learn-arrow {
    transform: rotate(90deg);
    line-height: 1;
  }
}

.learn-detail {
  background: var(--surface); border-radius: 12px;
  border: 1px solid var(--border); padding: 16px;
  margin-top: 12px; animation: learnFadeIn 0.3s ease;
}
@keyframes learnFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.learn-detail-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.learn-detail-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}
.learn-detail-next { font-size: 13px; color: var(--accent); font-style: italic; }

.learn-suggestions {
  display: flex; flex-direction: column; gap: 8px;
}
.learn-suggestion {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 16px; border-radius: 10px;
  min-height: var(--tactyl-touch-min);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 14px; line-height: 1.35; text-align: left;
  color: var(--text); cursor: pointer;
}
.learn-suggestion:hover { border-color: var(--accent); background: var(--surface-hover, var(--border)); }
.learn-suggestion:focus-visible,
.design-card:focus-visible,
.pulse-issue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.learn-ask { margin-top: 8px; }
.learn-ask-label { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.learn-ask-input {
  width: 100%; font-size: 14px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-family: inherit; resize: vertical;
  overflow-wrap: anywhere;
}
.learn-ask-input:focus { border-color: var(--accent); outline: none; }
.learn-ask-submit {
  margin-top: 8px; font-size: 13px; font-weight: 600;
  min-height: var(--tactyl-touch-min);
  padding: 10px 20px; border-radius: 8px; border: none;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  transition: opacity 0.15s;
}
.learn-ask-submit:hover { opacity: 0.9; }
.learn-ask-submit:disabled { opacity: 0.5; }

.learn-history { margin-top: 20px; }
.learn-history-title { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.learn-qa { padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 8px; }
.learn-qa-q { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; overflow-wrap: anywhere; }
.learn-qa-q::before { content: "You asked: "; font-weight: 400; color: var(--text-dim); }
.learn-qa-a { font-size: 14px; color: var(--text); line-height: 1.5; padding-left: 12px; border-left: 2px solid var(--accent); overflow-wrap: anywhere; }
.learn-qa-pending { font-size: 13px; color: var(--text-dim); font-style: italic; }

/* Compact action buttons appear in mixed header/form contexts and can inherit
   undersized content metrics. Give them an explicit 44px touch floor. */
.mod-action-btn,
.intake-submit,
.spark-submit,
.board-intake-submit,
.auth-reauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactyl-touch-min);
}

/* === PIPELINE STEPPER + PULSE DETAIL (issue expand) === */
.pipeline-stepper-row { display: flex; justify-content: space-around; padding: 12px 0; gap: 8px; }
.pipeline-stepper-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pipeline-stepper-count { font-size: 20px; font-weight: 700; color: var(--text); }
.pipeline-stepper-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }

.pulse-group { margin-bottom: 12px; }
.pulse-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pulse-group-count { font-size: 12px; color: var(--text-dim); }
.pulse-issue {
  min-height: var(--tactyl-touch-min);
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); margin-bottom: 6px;
}
.pulse-issue-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pulse-issue-system { font-size: 12px; font-weight: 600; color: var(--text); text-transform: capitalize; }
.pulse-issue-sev { font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; }
.pulse-sev-high { background: rgba(248,81,73,0.15); color: var(--red, #f85149); }
.pulse-sev-med { background: rgba(210,153,34,0.15); color: var(--yellow, #d29922); }
.pulse-sev-low { background: rgba(139,148,158,0.15); color: var(--text-dim); }
.pulse-issue-desc { font-size: 13px; color: var(--text); line-height: 1.4; }
.pulse-issue-fix { font-size: 12px; color: var(--accent); margin-top: 4px; font-style: italic; }
.pulse-issue-meta { font-size: 11px; color: var(--text-dim); margin-top: 4px; font-family: monospace; }
.pulse-issue-count { font-size: 11px; font-weight: 700; color: var(--accent); margin-left: 4px; }
.pulse-issue { cursor: pointer; }
.pulse-issue:hover { border-color: var(--accent); }

/* Drill-down: issue → task connections */
.pulse-drill { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.drill-loading, .drill-empty { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 4px 0; }
.drill-section { margin-bottom: 10px; }
.drill-label { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.drill-task { padding: 6px 8px; border-radius: 6px; background: var(--bg, #0d1117); border: 1px solid var(--border); margin-bottom: 4px; }
.drill-task-id { font-size: 11px; font-weight: 700; color: var(--accent); font-family: monospace; }
.drill-task-agent { font-size: 11px; color: var(--text-dim); }
.drill-task-status { font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.drill-status-completed { background: rgba(63,185,80,0.15); color: var(--green, #3fb950); }
.drill-status-blocked { background: rgba(248,81,73,0.15); color: var(--red, #f85149); }
.drill-status-pending { background: rgba(139,148,158,0.15); color: var(--text-dim); }
.drill-status-in_progress { background: rgba(88,166,255,0.15); color: var(--accent); }
.drill-task-text { font-size: 12px; color: var(--text); margin-top: 2px; line-height: 1.3; }
.drill-task-blocked { border-color: var(--red, #f85149); border-style: dashed; }
.drill-sibling { font-size: 12px; color: var(--text); padding: 4px 0; border-bottom: 1px dotted var(--border); }
.drill-sibling:last-child { border-bottom: none; }
.drill-sibling-system { font-weight: 600; color: var(--text-dim); text-transform: capitalize; }

/* === OPS SECTION === */
.ops-empty { font-size: 14px; color: var(--text-dim); padding: 16px; text-align: center; }
.ops-issue-card {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); margin-bottom: 8px;
}
.ops-issue-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ops-issue-system { font-size: 14px; font-weight: 600; color: var(--text); text-transform: capitalize; }
.ops-issue-badge {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 6px;
}
.ops-status-ok .ops-issue-badge { background: rgba(63,185,80,0.15); color: var(--green, #3fb950); }
.ops-status-warn .ops-issue-badge { background: rgba(210,153,34,0.15); color: var(--yellow, #d29922); }
.ops-status-open .ops-issue-badge { background: rgba(248,81,73,0.15); color: var(--red, #f85149); }
.ops-issue-id { font-size: 12px; color: var(--text-dim); font-family: monospace; }
.ops-issue-count { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.ops-blocked-card {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); margin-bottom: 8px;
}
.ops-blocked-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ops-blocked-agent { font-size: 13px; font-weight: 600; color: var(--accent); }
.ops-blocked-id { font-size: 12px; color: var(--text-dim); font-family: monospace; }
.ops-blocked-text { font-size: 14px; color: var(--text); line-height: 1.4; margin-bottom: 6px; }
.ops-blocked-reason { font-size: 12px; color: var(--yellow, #d29922); font-style: italic; margin-bottom: 8px; }
.ops-blocked-actions { display: flex; gap: 8px; }

.ops-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tactyl-touch-min);
  font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer;
}
.ops-btn:hover { border-color: var(--accent); }
.ops-btn:disabled { opacity: 0.5; cursor: default; }
.ops-btn-retry { border-color: var(--green, #3fb950); color: var(--green, #3fb950); }
.ops-btn-cancel { border-color: var(--red, #f85149); color: var(--red, #f85149); }

.ops-controls-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin-bottom: 12px;
}
.ops-control-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface);
}
.ops-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  will-change: transform, opacity;
  transition: transform 0.24s ease, opacity 0.24s ease;
  box-shadow: 0 0 0 0 transparent;
}
.ops-dot-ok { background: var(--green, #3fb950); box-shadow: 0 0 8px rgba(63, 185, 80, 0.18); }
.ops-dot-down { background: var(--red, #f85149); box-shadow: 0 0 8px rgba(248, 81, 73, 0.2); }
.ops-dot-idle { background: rgba(143, 155, 179, 0.45); box-shadow: none; }
/* B4: auth blocker badge on agent performance cards. blocked = known+fresh auth failure (red),
   stale/unknown = surfaced uncertainty (muted) — see renderPerformanceCard in app.js. */
.agent-perf-auth { font-size: 10px; padding: 1px 6px; border-radius: 6px; margin-left: 6px; white-space: nowrap; }
.agent-perf-auth[data-state="blocked"] { background: rgba(248, 81, 73, 0.18); color: var(--red, #f85149); }
.agent-perf-auth[data-state="stale"], .agent-perf-auth[data-state="unknown"] { background: rgba(143, 155, 179, 0.18); color: var(--text-dim, #8b949e); }
.ops-dot-warn { background: var(--yellow, #d29922); box-shadow: 0 0 8px rgba(210, 153, 34, 0.2); }
.ops-dot-stale { background: rgba(143, 155, 179, 0.55); box-shadow: none; }
.ops-dot-unknown { background: rgba(143, 155, 179, 0.35); box-shadow: none; }

/* Host Signals sub-panel (Ops section) — freshness-aware host/maintenance status */
.ops-host-grid { display: flex; flex-direction: column; gap: 6px; }
.ops-host-item {
  display: grid;
  grid-template-columns: 14px minmax(140px, 1.4fr) minmax(80px, 1fr) 52px auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  font-size: 13px;
}
.ops-host-item.stale { opacity: 0.62; border-left: 3px solid var(--yellow, #d29922); }
.ops-host-key { font-weight: 600; color: var(--text, #e6edf3); }
.ops-host-val { color: var(--text-dim, #8b949e); }
.ops-host-state { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim, #8b949e); }
.ops-host-meta { font-size: 11px; color: var(--text-dim, #8b949e); text-align: right; }
.ops-host-msg { grid-column: 2 / -1; font-size: 11px; color: var(--text-dim, #8b949e); opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .num-changed,
  .dot-state-shift,
  .dot-color-ghost,
  .fleet-count-updating {
    animation: none !important;
  }

  .status-dot,
  .status-dot::after,
  .provider-dot,
  .agent-dot,
  .container-dot,
  .action-dot,
  .activity-dot,
  .task-status-dot,
  .executor-pill-dot,
  .ops-dot,
  .fleet-count,
  .fleet-count-value,
  .fleet-count-separator {
    transition: transform 0s, opacity 0s !important;
  }
}
.ops-control-name { font-size: 13px; font-weight: 500; color: var(--text); }
.ops-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Cron health grid */
.cron-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cron-item { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.cron-item-head { display: flex; align-items: center; gap: 8px; }
.cron-name { font-size: 13px; font-weight: 600; color: var(--text); }
.cron-meta { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.cron-output { font-size: 11px; color: var(--red, #f85149); margin-top: 4px; font-family: monospace; white-space: pre-wrap; word-break: break-all; }
.health-cron-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 6px; }
.health-cron-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.health-cron-item .ops-dot {
  width: 9px;
  height: 9px;
  margin-top: 3px;
}
.health-cron-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.health-cron-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  word-break: break-word;
}
.health-cron-meta {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.2;
}

/* === INTAKE TRUST METER === */
.intake-trust {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--surface);
  border-radius: 10px; border: 1px solid var(--border);
  margin-bottom: 8px;
}
.intake-trust-label {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  white-space: nowrap;
}
.intake-trust-select {
  font-size: 12px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); flex: 1;
}

/* === DESIGN PROJECTS SECTION === */
.design-card {
  min-height: var(--tactyl-touch-min);
  padding: 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); margin-bottom: 10px; cursor: pointer;
}
.design-card:hover { border-color: var(--accent); }
.design-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.design-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
.design-deploy { font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
.design-deploy-prod { background: rgba(63,185,80,0.15); color: var(--green, #3fb950); }
.design-deploy-preview { background: rgba(88,166,255,0.15); color: var(--accent); }
.design-card-stage { font-size: 12px; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.design-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.design-card-intent { font-size: 13px; color: var(--text-dim); line-height: 1.4; margin-bottom: 8px; }
.design-progress { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin-bottom: 4px; }
.design-progress-fill { height: 100%; border-radius: 2px; background: var(--green, #3fb950); }
.design-progress-label { font-size: 11px; color: var(--text-dim); }
.design-card-drill { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.design-ref a,
.design-preview-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactyl-touch-min);
}
.design-ref a { font-size: 12px; color: var(--accent); text-decoration: none; }
.design-ref a:hover { text-decoration: underline; }
.design-preview-link { font-size: 13px; color: var(--accent); text-decoration: none; word-break: break-all; }
.design-metric { padding: 4px 0; border-bottom: 1px dotted var(--border); }
.design-metric:last-child { border-bottom: none; }
.design-metric-phase { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; }
.design-metric-event { font-size: 12px; color: var(--text); }
.design-metric-detail { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.design-actions { display: flex; gap: 8px; }
/* Assembly Line — Session Visibility Module */

.assembly-shell {
  padding: var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
}

.assembly-stats {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) 0;
}

.assembly-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-container-low, rgba(255,255,255,0.04));
  border-radius: 8px;
}

.assembly-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #e8eaed);
}

.assembly-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #9aa0a6);
  margin-top: 2px;
}

.assembly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.assembly-card {
  background: var(--surface-container, rgba(255,255,255,0.06));
  border-radius: 10px;
  padding: var(--space-md);
  border-left: 4px solid var(--text-secondary, #666);
}

.assembly-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.assembly-card.assembly-status-active {
  border-left-color: #4edea3;
}

.assembly-card.assembly-status-error {
  border-left-color: #ffb4ab;
}

.assembly-card.assembly-status-closed {
  border-left-color: var(--text-secondary, #666);
}

.assembly-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs, 6px);
}

.assembly-agent {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary, #e8eaed);
}

.assembly-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary, #666);
}

.assembly-status-active .assembly-dot {
  background: #4edea3;
  box-shadow: 0 0 6px #4edea3;
  animation: assembly-pulse 2s ease-in-out infinite;
}

.assembly-status-error .assembly-dot {
  background: #ffb4ab;
  box-shadow: 0 0 4px #ffb4ab;
}

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

.assembly-desc {
  font-size: 0.82rem;
  color: var(--text-secondary, #9aa0a6);
  margin-bottom: var(--space-sm, 8px);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.assembly-meta-row {
  display: flex;
  gap: var(--space-sm, 8px);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary, #9aa0a6);
}

.assembly-task-status {
  margin-top: var(--space-xs, 4px);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary, #9aa0a6);
}

/* Mobile: single column */
@media (max-width: 600px) {
  .assembly-grid {
    grid-template-columns: 1fr;
  }
  .assembly-stats {
    justify-content: space-around;
  }
}

/* Intake Wizard — Universal Router + Web Project Steps */

.intake-wizard {
  padding: var(--space-sm) 0;
}

.intake-question {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary, #e8eaed);
  margin-bottom: var(--space-md);
  line-height: 1.4;
}

.intake-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
  max-width: 400px;
}

.intake-option-btn {
  display: block;
  width: 100%;
  min-height: var(--tactyl-touch-min);
  padding: 12px 16px;
  font-size: 0.92rem;
  text-align: left;
  background: var(--surface-container, rgba(255,255,255,0.06));
  color: var(--text-primary, #e8eaed);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  cursor: pointer;
}

.intake-option-btn:hover {
  background: var(--surface-container-high, rgba(255,255,255,0.1));
  border-color: #4edea3;
}

.intake-option-btn:active {
  background: var(--surface-container-highest, rgba(255,255,255,0.14));
}

.intake-option-other {
  color: var(--text-secondary, #9aa0a6);
  font-size: 0.84rem;
  border-style: dashed;
}

.intake-progress {
  height: 3px;
  background: var(--surface-container-low, rgba(255,255,255,0.04));
  border-radius: 2px;
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.intake-progress-bar {
  height: 100%;
  background: #4edea3;
  border-radius: 2px;
}

.intake-type-input {
  display: flex;
  gap: var(--space-sm, 8px);
  margin-top: var(--space-sm, 8px);
}

.intake-text-input {
  flex: 1;
  padding: 10px 12px;
  font-size: 0.92rem;
  background: var(--surface-container, rgba(255,255,255,0.06));
  color: var(--text-primary, #e8eaed);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
}

.intake-text-input:focus {
  outline: none;
  border-color: #4edea3;
}

.intake-text-submit {
  min-height: var(--tactyl-touch-min);
  padding: 10px 20px;
  font-size: 0.88rem;
  background: #4edea3;
  color: #0d1322;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.intake-text-submit:hover {
  background: #3cc992;
}

/* Design Detail — Two-Screen UX (Style Picker + Canvas) */

.design-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  margin-bottom: var(--space-sm);
}

.design-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactyl-touch-min);
  min-height: var(--tactyl-touch-min);
  background: none;
  border: none;
  color: var(--text-primary, #e8eaed);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 8px;
}

.design-detail-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary, #e8eaed);
}

.design-tab-bar {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-md);
  background: var(--surface-container-low, rgba(255,255,255,0.04));
  border-radius: 8px;
  padding: 3px;
}

.design-tab {
  flex: 1;
  min-height: var(--tactyl-touch-min);
  padding: 8px 12px;
  font-size: 0.84rem;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary, #9aa0a6);
  cursor: pointer;
}

.design-tab-active {
  background: var(--surface-container, rgba(255,255,255,0.08));
  color: var(--text-primary, #e8eaed);
  font-weight: 600;
}

.design-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Style Picker */
.design-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 24px);
}

.design-picker-empty {
  padding: var(--space-lg) 0;
}

.design-picker-context {
  font-size: 0.86rem;
  color: var(--text-secondary, #9aa0a6);
  margin: var(--space-sm) 0 var(--space-md);
  line-height: 1.5;
}

.design-picker-category {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 8px);
}

.design-picker-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, #9aa0a6);
  margin-bottom: 4px;
}

.design-palette-row, .design-layout-row, .design-font-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: 10px 12px;
  background: var(--surface-container, rgba(255,255,255,0.06));
  border-radius: 8px;
  border: 2px solid transparent;
}

.design-picked {
  border-color: #4edea3;
}

.design-palette-swatches {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.design-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
}

.design-palette-name, .design-layout-desc {
  flex: 1;
  font-size: 0.86rem;
  color: var(--text-primary, #e8eaed);
}

.design-font-sample {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.design-font-headline {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, #e8eaed);
}

.design-font-body {
  font-size: 0.82rem;
  color: var(--text-dim);
}

.design-pick-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.design-pick-btn, .design-note-btn {
  min-height: var(--tactyl-touch-min);
  padding: 6px 12px;
  font-size: 0.76rem;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.design-pick-btn:hover { background: #4edea3; color: #0d1322; border-color: #4edea3; }
.design-note-btn:hover { background: var(--surface-container-high, rgba(255,255,255,0.1)); }

.design-picked .design-pick-btn {
  background: #4edea3;
  color: #0d1322;
  border-color: #4edea3;
}

.design-tryagain-btn {
  align-self: flex-start;
  min-height: var(--tactyl-touch-min);
  padding: 8px 14px;
  font-size: 0.78rem;
  color: var(--text-dim);
  background: transparent;
  border: 1px dashed var(--border, rgba(255,255,255,0.1));
  border-radius: 6px;
  cursor: pointer;
}

.design-tryagain-btn:hover { color: var(--text); border-color: var(--text-dim); }

.design-generate-wrap {
  padding: var(--space-md) 0;
}

.design-generate-btn {
  width: 100%;
  max-width: 400px;
  padding: 14px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  background: #4edea3;
  color: #0d1322;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.design-generate-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Canvas */
.design-canvas-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px);
}

.design-canvas-frame {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: #fff;
}

.design-canvas-empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--text-secondary, #9aa0a6);
}

.design-canvas-actions {
  display: flex;
  gap: var(--space-sm, 8px);
  padding: var(--space-sm) 0;
  flex-wrap: wrap;
}

.design-open-btn, .design-change-btn, .design-approve-btn {
  padding: 8px 16px;
  font-size: 0.82rem;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
}

.design-approve-btn { background: #4edea3; color: #0d1322; border-color: #4edea3; font-weight: 600; }
.design-open-btn:hover, .design-change-btn:hover { background: var(--surface-container-high); }

/* Info tab */
.design-info-wrap { padding: var(--space-sm) 0; }
.design-info-row { display: flex; gap: var(--space-sm); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.design-info-key { font-size: 0.78rem; color: var(--text-tertiary, #9aa0a6); min-width: 80px; text-transform: capitalize; }
.design-info-val { font-size: 0.86rem; color: var(--text-primary, #e8eaed); }

@media (max-width: 600px) {
  .design-palette-row, .design-layout-row, .design-font-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .design-pick-actions { align-self: flex-end; }
  .design-canvas-wrap { height: calc(100vh - 140px); }
}

/* Design Comp Viewer — 3 viewport widths */

.design-view-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-sm);
  background: var(--surface-container-low, rgba(255,255,255,0.04));
  border-radius: 8px;
  padding: 3px;
}

.design-view-tab {
  flex: 1;
  min-height: var(--tactyl-touch-min);
  padding: 8px 10px;
  font-size: 0.82rem;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary, #9aa0a6);
  cursor: pointer;
}

.design-view-active {
  background: var(--surface-container, rgba(255,255,255,0.08));
  color: var(--text-primary, #e8eaed);
  font-weight: 600;
}

.design-comp-viewport {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  background: var(--surface-container-low, rgba(255,255,255,0.03));
  border-radius: 8px;
  min-height: 300px;
  max-height: calc(100vh - 240px);
}

.design-comp-img {
  display: block;
  height: auto;
  border-radius: 4px;
}

/* Mobile: constrain to phone width */
.design-comp-mobile .design-comp-img {
  width: 390px;
  max-width: 100%;
}

/* Desktop Split: half desktop width */
.design-comp-split .design-comp-img {
  width: 720px;
  max-width: 100%;
}

/* Desktop Full: full width */
.design-comp-full .design-comp-img {
  width: 1440px;
  max-width: 100%;
}

@media (max-width: 600px) {
  .design-comp-viewport {
    max-height: calc(100vh - 200px);
  }
}

/* Generating state */
.design-generating-msg {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary, #e8eaed);
  margin-bottom: var(--space-sm);
}
.design-generating-sub {
  font-size: 0.86rem;
  color: var(--text-secondary, #9aa0a6);
  line-height: 1.5;
}

/* Simple pick rows (spacing, corners, imagery, density) */
.design-simple-row {
  padding: 10px 14px;
  background: var(--surface-container, rgba(255,255,255,0.06));
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  margin-bottom: 6px;
}
.design-simple-row:hover {
  border-color: rgba(78,222,163,0.3);
}
.design-simple-row.design-picked {
  border-color: #4edea3;
}
.design-simple-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary, #e8eaed);
}
.design-simple-desc {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.design-simple-row:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

/* Gauntlet Design Review */
.design-gauntlet-area { margin: var(--space-sm) 0; }
.design-gauntlet-running {
  padding: 12px 16px;
  background: var(--surface-container-low, rgba(255,255,255,0.04));
  border-radius: 8px;
  font-size: 0.86rem;
  color: var(--text-secondary, #9aa0a6);
  border-left: 3px solid #ffb95f;
}
.design-gauntlet-btn {
  padding: 8px 16px;
  font-size: 0.82rem;
  border-radius: 6px;
  border: 1px solid #ffb95f;
  background: transparent;
  color: #ffb95f;
  cursor: pointer;
}
.design-gauntlet-btn:hover { background: rgba(255,185,95,0.1); }
.design-gauntlet-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.design-gauntlet-results {
  padding: 12px 16px;
  background: var(--surface-container-low, rgba(255,255,255,0.04));
  border-radius: 8px;
  border-left: 3px solid #4edea3;
}
.design-gauntlet-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary, #e8eaed);
  margin-bottom: var(--space-sm);
}
.design-gauntlet-section { margin-bottom: var(--space-sm); }
.design-gauntlet-role {
  display: flex;
  align-items: center;
  min-height: var(--tactyl-touch-min);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4edea3;
  margin-bottom: 4px;
  cursor: pointer;
}
.design-gauntlet-text {
  font-size: 0.82rem;
  color: var(--text-secondary, #9aa0a6);
  line-height: 1.5;
}
.design-gauntlet-details { margin-bottom: var(--space-sm); }
.design-gauntlet-details summary { list-style: none; }
.design-gauntlet-details summary::before { content: "▸ "; }
.design-gauntlet-details[open] summary::before { content: "▾ "; }

/* No preference option */
.design-simple-nopref {
  border-style: dashed;
  opacity: 0.7;
}
.design-simple-nopref.design-picked {
  opacity: 1;
  border-style: solid;
}
.design-simple-nopref .design-simple-name {
  color: var(--text-secondary, #9aa0a6);
}

/* Try-again inline input */
.design-tryagain-input-wrap {
  margin-top: var(--space-sm, 8px);
  padding: 8px 0;
}
.design-tryagain-label {
  font-size: 0.78rem;
  color: var(--text-secondary, #9aa0a6);
}
.design-note-input-wrap {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* Tile layout — max 400px, wrap into rows */
.design-picker-label {
  width: 100%;
  flex-basis: 100%;
}
.design-palette-row, .design-layout-row, .design-font-row, .design-simple-row {
  max-width: 400px;
  flex: 1 1 280px;
}
.design-tryagain-btn {
  flex-basis: 100%;
}

/* Loading skeleton for "Try Different" */
.design-loading {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
}
.design-loading::after {
  content: "";
  position: absolute;
  top: 0; left: -100%; width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent 30%, rgba(78,222,163,0.08) 50%, transparent 70%);
  will-change: transform;
  animation: design-shimmer 1.2s ease-in-out infinite;
}
@keyframes design-shimmer {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(50%); }
}

/* Appearance transition */
.design-palette-row, .design-layout-row, .design-font-row, .design-simple-row {
  animation: design-fade-in 0.3s ease;
}
@keyframes design-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Generating state — prominent */
.design-generating-state {
  text-align: center;
  padding: 60px 20px;
}
.design-generating-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  will-change: opacity;
  animation: design-pulse-icon 2s ease-in-out infinite;
}
@keyframes design-pulse-icon {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Change Request UI */
.design-change-request {
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: var(--space-sm);
}
.design-change-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, #9aa0a6);
  margin-bottom: var(--space-sm);
}
.design-change-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-sm);
}
.design-chip {
  min-height: var(--tactyl-touch-min);
  padding: 8px 12px;
  font-size: 0.78rem;
  border-radius: 16px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--text-secondary, #9aa0a6);
  cursor: pointer;
}
.design-chip:hover {
  background: rgba(78,222,163,0.08);
  border-color: #4edea3;
  color: #4edea3;
}
.design-change-input-row {
  display: flex;
  gap: 8px;
}
.design-change-text {
  flex: 1;
}
.design-change-status {
  margin-top: var(--space-sm);
}

/* Collapsible info sections */
.design-info-section {
  margin-bottom: var(--space-md);
  border-radius: 8px;
  background: var(--surface-container-low, rgba(255,255,255,0.03));
  overflow: hidden;
}
.design-info-section-header {
  display: flex;
  align-items: center;
  min-height: var(--tactyl-touch-min);
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #9aa0a6);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.design-info-section-header::before { content: "▾ "; }
.design-info-section:not([open]) .design-info-section-header::before { content: "▸ "; }
.design-info-section-body {
  padding: 0 14px 14px;
}

/* Review meta-feedback */
.design-review-meta-wrap {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.design-review-meta-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary, #9aa0a6);
  margin-bottom: var(--space-sm);
}
.design-review-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.design-review-meta-thanks {
  font-size: 0.82rem;
  color: #4edea3;
  padding: 8px 0;
}

/* Build action between review and info */
.design-build-action {
  padding: var(--space-md) 0;
  text-align: center;
}
.design-build-action .design-approve-btn {
  padding: 12px 32px;
  font-size: 0.95rem;
}

/* Inspect section */
.inspect-shell { padding: var(--space-md); max-width: 1200px; margin: 0 auto; }

.inspect-building { margin-bottom: var(--space-lg); }
.inspect-building-card {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface-high);
  border-radius: var(--round-md);
  border-left: 4px solid var(--yellow);
  margin-bottom: var(--space-sm);
  animation: assembly-pulse 2s ease-in-out infinite;
}
.inspect-building-text { flex: 1; font-size: var(--btn-font-size); color: var(--text); }
.inspect-building-status { font-size: 0.72rem; text-transform: uppercase; color: var(--text-dim); }

.inspect-project-card {
  display: block;
  width: 100%;
  min-height: var(--tactyl-touch-min);
  padding: var(--space-md);
  background: var(--surface-high);
  border-radius: var(--round-md);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--green);
  margin-bottom: var(--space-sm);
  cursor: pointer;
  text-align: left;
}
.inspect-project-card:hover,
.inspect-project-card:focus-visible {
  border-left-color: #4edea3;
  background: color-mix(in srgb, var(--surface-high) 88%, var(--accent) 12%);
}

.inspect-card-header { display: flex; justify-content: space-between; align-items: center; }
.inspect-card-name { font-weight: 600; font-size: var(--btn-font-size); color: var(--text); }
.inspect-status {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: var(--round-full);
}
.inspect-status-live { background: rgba(63,185,80,0.15); color: var(--green); }
.inspect-status-preview { background: rgba(88,166,255,0.15); color: var(--accent); }
.inspect-card-url { font-size: 0.78rem; color: var(--text-dim); margin-top: 4px; }
.inspect-card-meta { font-size: 0.72rem; color: var(--text-dim); margin-top: 4px; }

.inspect-detail { display: flex; flex-direction: column; }
.inspect-detail-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.inspect-frame { flex: 1; min-height: 400px; max-height: calc(100vh - 280px); }

@media (max-width: 600px) {
  .inspect-frame { min-height: 300px; max-height: calc(100vh - 240px); }
}

/* iframe viewport — fixed-width iframe in scrollable container */
.design-iframe-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-high);
  border-radius: var(--round-md);
  margin-bottom: var(--space-sm);
}

.design-iframe {
  display: block;
  border: none;
  height: 70vh;
  min-height: 400px;
  background: #fff;
}

/* When iframe is narrower than container, center it */
@media (min-width: 800px) {
  .design-iframe-viewport {
    display: flex;
    justify-content: center;
  }
}

/* Priority and Route dropdowns */
.fix-priority, .fix-route {
  min-width: 100px;
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  background: var(--surface-high);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  cursor: pointer;
}

/* Deferred group styling */
.task-group[data-status="deferred"] .task-group-title {
  color: var(--yellow);
}

/* Task Steps v2 — richer rendering */
.task-step {
  display: flex;
  gap: var(--space-sm);
  padding: 4px 0;
  align-items: flex-start;
  animation: design-fade-in 0.3s ease;
}
.task-step-content {
  flex: 1;
  min-width: 0;
}
.task-step-summary {
  font-size: 0.82rem;
  color: var(--text);
  word-break: break-word;
}
.task-step-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}
.task-step-tool {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: var(--round-full);
  background: var(--surface-high);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.task-step-time {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.task-step-failed .task-step-summary {
  color: var(--red);
}
.task-step-error {
  border-left: 2px solid var(--red);
  padding-left: var(--space-sm);
}
.task-step-tool_call {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-sm);
}
.task-step-system {
  opacity: 0.7;
}
.task-step-detail summary {
  display: flex;
  align-items: center;
  min-height: var(--tactyl-touch-min);
  font-size: 0.7rem;
  color: var(--text-dim);
  cursor: pointer;
}
.task-step-detail-text {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 150px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 6px;
  background: var(--surface-high);
  border-radius: var(--round-sm);
}
.task-steps-footer {
  display: flex;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: var(--space-sm);
}
.task-steps-count {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Glossary */
.learn-glossary { margin: var(--space-md) 0; }
.glossary-wrap { margin-top: var(--space-md); }
.glossary-search { width: 100%; margin-bottom: var(--space-md); }
.glossary-category { margin-bottom: var(--space-md); }
.glossary-category-header {
  display: flex;
  align-items: center;
  min-height: var(--tactyl-touch-min);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  cursor: pointer;
  padding: var(--space-sm) 0;
}
.glossary-items { display: flex; flex-direction: column; gap: 2px; }
.glossary-item {
  display: flex;
  gap: var(--space-sm);
  padding: 6px var(--space-sm);
  border-radius: var(--round-sm);
  animation: design-fade-in 0.3s ease;
}
.glossary-item:hover { background: var(--surface-high); }
.glossary-term {
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--text);
  white-space: nowrap;
  min-width: 120px;
}
.glossary-def {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.4;
}
@media (max-width: 600px) {
  .glossary-item { flex-direction: column; gap: 2px; }
  .glossary-term { min-width: auto; }
}

/* Known Issues Section — Stitch "Tactical Operations" inspired */
.issues-shell { padding: var(--space-md); max-width: 1200px; margin: 0 auto; }

.issues-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-md);
  background: var(--surface-high);
  border-radius: var(--round-sm);
  padding: 3px;
}
.issues-tab {
  flex: 1;
  min-height: var(--tactyl-touch-min);
  padding: 8px 12px;
  font-size: var(--btn-font-size);
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
}
.issues-tab-active {
  background: var(--surface-highest);
  color: var(--text);
  font-weight: 600;
}
.issues-tab:focus-visible {
  border-color: var(--accent);
  color: var(--text);
}

.issues-search { margin-bottom: var(--space-md); }
.issues-search input { width: 100%; }

.issues-card {
  padding: var(--space-md);
  background: var(--surface-high);
  border-radius: var(--round-md);
  border-left: 4px solid var(--gray);
  margin-bottom: var(--space-sm);
  animation: design-fade-in 0.3s ease;
}
.issues-card.issues-sev-high { border-left-color: var(--red); }
.issues-card.issues-sev-medium { border-left-color: var(--yellow); }
.issues-card.issues-sev-low { border-left-color: var(--gray); }

.issues-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 4px;
}
.issues-sev-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--round-full);
  background: rgba(255,255,255,0.06);
}
.issues-sev-high .issues-sev-badge { color: var(--red); background: rgba(255,123,114,0.12); }
.issues-sev-medium .issues-sev-badge { color: var(--yellow); background: rgba(210,153,34,0.12); }
.issues-sev-low .issues-sev-badge { color: var(--text); background: rgba(178,189,201,0.16); }

.issues-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}
.issues-status-dot.issues-status-open { background: var(--red); }
.issues-status-dot.issues-status-mitigated { background: var(--yellow); }
.issues-status-dot.issues-status-resolved { background: var(--green); }
.issues-status-dot.issues-status-bydesign { background: var(--accent); }

.issues-status-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: capitalize;
}

.issues-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.issues-card-desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}
.issues-card-affected {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-sm);
}
.issues-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--round-full);
  background: rgba(78,222,163,0.08);
  color: #4edea3;
  border: 1px solid rgba(78,222,163,0.15);
}
.issues-card-meta {
  display: flex;
  gap: var(--space-md);
  font-size: 0.72rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.issues-add { padding: var(--space-md) 0; }
.issues-add-btn {
  min-height: var(--tactyl-touch-min);
  padding: 10px 16px;
  font-size: var(--btn-font-size);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: var(--round-sm);
  cursor: pointer;
}
.issues-add-btn:hover { border-color: #4edea3; color: #4edea3; }

.issues-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface-high);
  border-radius: var(--round-md);
  margin-bottom: var(--space-md);
}

/* ── Auth panel (inside Health section) ──────────────────────────────────────
   Added: 2026-04-23
   HTML: index.html, search "AUTH PANEL" (inside section-health, before Controls)
   JS: app.js, search "loadAuthPanel" and "renderAuthPanel"
   API: dashboard-api.py, search "/api/auth/status" and "/api/auth/reauth"
   Chart: infra-bridge-auth-panel
   Why: Robert re-authed OAuth tokens via SSH terminal 3x/week. Now one tap from Bridge.
   ───────────────────────────────────────────────────────────────────────────── */
.auth-panel { display: flex; flex-direction: column; gap: 8px; }
.auth-services { display: flex; flex-direction: column; gap: 6px; }
.auth-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
}
.auth-card[data-status="expired"], .auth-card[data-status="error"] { border-left: 3px solid var(--red); }
.auth-card[data-status="warning"] { border-left: 3px solid var(--yellow); }
.auth-card[data-status="healthy"] { border-left: 3px solid var(--green); }
.auth-card-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.auth-card-info { flex: 1; min-width: 0; }
.auth-card-name { font-size: 13px; font-weight: 500; color: var(--text); }
.auth-card-detail { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.auth-card-status {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 4px; flex-shrink: 0;
}
.auth-card-status[data-s="healthy"] { color: var(--green); }
.auth-card-status[data-s="expired"], .auth-card-status[data-s="error"] { color: var(--red); }
.auth-card-status[data-s="warning"] { color: var(--yellow); }
.auth-card-status[data-s="missing"] { color: var(--gray); }
.auth-reauth-btn {
  min-height: var(--tactyl-touch-min);
  font-size: 11px; padding: 8px 12px; border-radius: 4px; cursor: pointer;
  background: var(--blue); color: var(--on-accent); border: none; flex-shrink: 0;
}
.auth-reauth-btn:hover { opacity: 0.85; }
.auth-vault {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; margin-top: 4px;
}
.auth-vault-title { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
.auth-vault-detail { font-size: 11px; color: var(--text-dim); }
.auth-vault[data-status="drift"] { border-left: 3px solid var(--yellow); }
.auth-vault[data-status="synced"] { border-left: 3px solid var(--green); }
.auth-reauth-flow {
  background: var(--surface); border: 1px solid var(--blue); border-radius: 8px;
  padding: 14px; margin-top: 8px;
}
.auth-reauth-url { word-break: break-all; color: var(--blue); font-size: 13px; }
.auth-reauth-code { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: 0.1em; margin: 8px 0; }
.auth-reauth-status { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.auth-reauth-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: 50%; will-change: transform; animation: auth-spin 0.8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* === Pipeline: Live Event Feed === */
.pipeline-shell { padding: 0; }
.pipeline-feed { max-height: 70vh; overflow-y: auto; padding: 0 var(--space-2); }
.pipeline-event { display: flex; align-items: baseline; gap: var(--space-1); padding: 4px var(--space-1); border-bottom: 1px solid var(--c-border); font-size: 0.82rem; line-height: 1.4; }
.pipeline-event:hover { background: var(--c-surface-hover); }
.pipeline-icon { flex-shrink: 0; width: 1.4em; text-align: center; }
.pipeline-time { flex-shrink: 0; color: var(--c-dim); font-family: var(--ff-mono); font-size: 0.75rem; min-width: 5em; }
.pipeline-label { flex-shrink: 0; color: var(--c-accent); font-weight: 500; min-width: 8em; }
.pipeline-source { flex-shrink: 0; color: var(--c-dim); font-size: 0.75rem; max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-detail { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-empty { padding: var(--space-3); color: var(--c-dim); text-align: center; }
.pipeline-event[data-type*="blocked"], .pipeline-event[data-type*="dead_letter"] { background: rgba(255, 80, 80, 0.08); }
.pipeline-event[data-type*="completed"] { background: rgba(80, 200, 80, 0.05); }
.pipeline-event[data-type*="deferred_result"] { background: rgba(100, 150, 255, 0.06); }
#pipelineFilter { min-height: var(--tactyl-touch-min); background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: 4px; padding: 8px 10px; font-size: 0.8rem; }

/* === Truth Pass: Diagnostics Cards === */
.truth-shell { padding: 0; }
.truth-cards {
  padding: var(--space-md);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}
.truth-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  background: var(--surface);
  border-radius: var(--round-md);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-left-width: 4px;
  box-shadow: var(--elevation-1);
}
.truth-card-header {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.truth-card-title {
  flex: 1 1 160px;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  text-transform: capitalize;
}
.truth-card-count {
  flex: 0 0 auto;
  align-self: center;
  padding: 2px 8px;
  border-radius: var(--round-full);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
}
.truth-card-status {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.truth-items {
  margin-top: 0;
  padding-top: var(--space-sm);
  font-size: 0.82rem;
  color: var(--text-dim);
  max-height: 144px;
  overflow-y: auto;
  border-top: 1px solid var(--border-subtle);
}
.truth-item {
  padding: 6px 0;
  border-top: 1px solid var(--border-subtle);
  line-height: 1.45;
}
.truth-item:first-child { border-top: 0; padding-top: 0; }
.truth-loading, .truth-error, .truth-empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--text-dim);
}
.truth-error { color: var(--red); }

/* === Truth Pass: Annotation Details === */
.truth-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-height: var(--tactyl-touch-min);
  padding: 6px 10px;
  background: var(--surface-high);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border) 70%);
  border-radius: var(--round-full);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.truth-expand-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-high));
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border) 48%);
  color: var(--text);
}
.truth-expand-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.truth-annotations { margin-top: var(--space-1); }
.truth-annotation-group { margin-bottom: var(--space-1); }
.truth-annotation-summary {
  display: flex;
  align-items: center;
  min-height: var(--tactyl-touch-min);
  cursor: pointer;
  padding: 4px 0;
  font-size: 0.85rem;
}
.truth-annotation-detail { padding: var(--space-1); font-size: 0.8rem; line-height: 1.5; color: var(--c-text); }
.truth-annotation-detail div { margin-bottom: 4px; }
.truth-annotation-rows { margin-top: var(--space-1); border-top: 1px solid var(--c-border); padding-top: 4px; }
.truth-annotation-raw { color: var(--c-dim); font-family: var(--ff-mono); font-size: 0.75rem; }

/* === Annotation integrity indicators === */
.truth-superseded { color: var(--c-dim); font-size: 0.7rem; text-decoration: line-through; }
.truth-low-conf { color: var(--c-yellow); font-size: 0.7rem; font-weight: 600; margin-left: 4px; }

/* === Truth Pass: Action Hints === */
.truth-action-hint {
  padding: 8px 10px;
  margin-top: var(--space-sm);
  background: color-mix(in srgb, var(--yellow) 12%, transparent);
  border-left: 2px solid var(--yellow);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text);
  border-radius: 0 var(--round-sm) var(--round-sm) 0;
}

@media (max-width: 560px) {
  .truth-card-header {
    align-items: stretch;
  }

  .truth-expand-btn {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
}

/* Final mobile/coarse-pointer guard: component rules below the shared baseline
   can set compact heights, so keep every tap target at the Tactyl floor. */
@media (max-width: 640px), (pointer: coarse) {
  button,
  .btn,
  [class*="-btn"],
  input:not([type="hidden"]),
  textarea:not(.sr-only),
  select,
  [role="button"],
  [role="tab"],
  [aria-controls],
  [aria-expanded],
  [aria-pressed],
  summary,
  [onclick],
  [tabindex="0"],
  a[href] {
    min-width: var(--tactyl-touch-min);
    min-height: var(--tactyl-touch-min);
    min-inline-size: var(--tactyl-touch-min);
    min-block-size: var(--tactyl-touch-min);
    touch-action: manipulation;
    box-sizing: border-box;
  }

  a[href] {
    display: inline-flex;
    align-items: center;
  }
}

/* === Workshop "Projects" group — longer multi-dispatch work tracked as one card === */
.task-group.project-group {
  padding-left: 10px;
  border-left: 3px solid var(--accent);
  border-radius: 2px;
}
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 100%;
  min-width: var(--task-min-w, 280px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--round-md);
  box-shadow: var(--elevation-1);
  padding: 14px 16px;
}
.project-card.project-active  { border-left: 3px solid var(--blue); }
.project-card.project-blocked { border-left: 3px solid var(--yellow); }
.project-card.project-paused  { border-left: 3px solid var(--text-dim); }
.project-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.project-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.project-status-chip {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--chip-radius, 999px);
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  white-space: nowrap;
}
.project-status-chip.project-active  { background: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--blue); }
.project-status-chip.project-blocked { background: color-mix(in srgb, var(--yellow) 22%, transparent); color: var(--yellow); }
.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
}
.project-active-chip { color: var(--blue); }
.project-blocked-chip { color: var(--yellow); }
.project-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.project-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--green);
  transform-origin: left center;
  transition: transform 240ms ease;
}
.project-next { font-size: 13px; color: var(--text); }
.project-next-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-right: 4px;
}
.project-note { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.project-children {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
@media (prefers-reduced-motion: reduce) {
  .project-bar-fill { transition: none; }
}


/* ============================================================================
   NORTH STAR section (build plan Part 3). Ported from north-star-prototype.html.
   Namespaced .ns-* ONLY; tokens-only (var(--accent) etc.); transform/opacity anim (GPU).
   ========================================================================== */
.ns-app, .ns-app * { box-sizing: border-box; }
.ns-app { --ns-gap: 12px; max-width: 1100px; margin: 0 auto; padding: 0 12px env(safe-area-inset-bottom) 12px; }

/* --- top bar --------------------------------------------------------------- */
.ns-top { position: sticky; top: 0; z-index: 5; background: var(--bg);
  display: flex; align-items: center; gap: 10px; padding: 14px 4px 10px; }
.ns-top h1 { font-size: 20px; margin: 0; font-weight: 650; letter-spacing: .2px; }
.ns-top .ns-stari { font-size: 20px; }
.ns-spacer { flex: 1; }
.ns-userpill { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9999px;
  padding: 5px 10px 5px 6px; font-size: 13px; color: var(--text);
  transition: opacity .2s ease-out; }
.ns-userpill:active { opacity: .7; }
.ns-avatar { width: 22px; height: 22px; border-radius: 9999px; background: var(--accent);
  color: #061427; font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.ns-sub { color: var(--text-dim); font-size: 12.5px; margin: 0 4px 12px; }
.ns-sub b { color: var(--accent); font-weight: 600; }

/* --- segmented control (Conversation | Vision) ----------------------------- */
.ns-seg { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 9999px; padding: 4px; margin: 0 4px 14px; }
.ns-seg button { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 14px; font-weight: 600; padding: 9px 10px; border-radius: 9999px;
  cursor: pointer; transition: opacity .2s ease-out; }
.ns-seg button .c { color: var(--text-dim); font-weight: 700; margin-left: 5px; opacity: .8; }
.ns-seg button[aria-pressed="true"] { background: var(--accent); color: #061427; }
.ns-seg button[aria-pressed="true"] .c { color: #061427; }

/* --- panels: tabbed on phone; on desktop the North Star "loop" (Conversation +
       Vision) sits side-by-side while Workflows takes the full width ----------- */
.ns-panes { display: block; }
.ns-pane { display: none; }
.ns-pane.show { display: block; }
@media (min-width: 860px) {
  .ns-panes { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--ns-gap); align-items: start; }
  /* North Star loop active -> show convo + vision, hide workflows */
  .ns-panes:not([data-active="workflows"]) .ns-pane[data-pane="convo"],
  .ns-panes:not([data-active="workflows"]) .ns-pane[data-pane="vision"] { display: block; }
  .ns-panes:not([data-active="workflows"]) .ns-pane[data-pane="workflows"] { display: none; }
  /* Workflows active -> full width, hide the loop */
  .ns-panes[data-active="workflows"] { grid-template-columns: 1fr; }
  .ns-panes[data-active="workflows"] .ns-pane[data-pane="convo"],
  .ns-panes[data-active="workflows"] .ns-pane[data-pane="vision"] { display: none; }
  .ns-panes[data-active="workflows"] .ns-pane[data-pane="workflows"] { display: block; }
  .ns-vision { position: sticky; top: 64px; }
}

/* --- conversation ---------------------------------------------------------- */
.ns-privbar { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--text-dim); background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.ns-lock { font-size: 13px; }
.ns-thread { display: flex; flex-direction: column; gap: 12px; }
.ns-msg { display: flex; flex-direction: column; max-width: 86%; }
.ns-msg.agent { align-self: flex-start; }
.ns-msg.me { align-self: flex-end; align-items: flex-end; }
.ns-who { font-size: 11.5px; color: var(--text-dim); margin: 0 6px 4px; }
.ns-bubble { padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45;
  overflow-wrap: anywhere; }
.ns-msg.agent .ns-bubble { background: var(--surface); border: 1px solid var(--border);
  border-bottom-left-radius: 5px; }
.ns-msg.me .ns-bubble { background: var(--md-sys-color-primary-container, #1a4b8a);
  color: var(--md-sys-color-on-primary-container, #dce9ff); border-bottom-right-radius: 5px; }
.ns-q-tag { display: inline-block; font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 5px; }

/* commit affordance under my messages */
.ns-commit { display: flex; align-items: center; gap: 8px; margin: 7px 6px 0; }
.ns-commitbtn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 9999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 600;
  will-change: transform, opacity;
  transition: opacity .2s ease-out, transform .2s ease-out; }
.ns-commitbtn:hover { color: var(--text); }
.ns-commitbtn:active { transform: scale(.96); }
.ns-commitbtn.done { border-color: var(--md-sys-color-tertiary); color: var(--md-sys-color-tertiary);
  cursor: default; }
.ns-privtag { font-size: 11px; color: var(--text-dim); opacity: .8; }

/* section picker popover (faked) */
.ns-picker { margin: 8px 6px 0; display: none; flex-wrap: wrap; gap: 6px;
  background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; padding: 10px; }
.ns-picker.show { display: flex; }
.ns-picker .ns-pickhint { width: 100%; font-size: 11.5px; color: var(--text-dim); margin-bottom: 2px; }
.ns-chip { cursor: pointer; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 9999px; padding: 6px 11px; font-size: 12.5px; transition: opacity .2s ease-out; }
.ns-chip:active { opacity: .7; }

/* composer */
.ns-composer { position: sticky; bottom: 8px; margin-top: 14px; display: flex; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 8px; }
.ns-composer textarea { flex: 1; min-width: 0; resize: none; background: transparent; border: 0; color: var(--text);
  font: inherit; font-size: 14.5px; padding: 7px 8px; max-height: 120px; outline: none; }
.ns-send { border: 0; cursor: pointer; background: var(--accent); color: #061427; font-weight: 700;
  border-radius: 12px; padding: 0 16px; font-size: 14px; will-change: transform, opacity;
  transition: opacity .2s ease-out, transform .2s ease-out; }
.ns-send:active { transform: scale(.96); }
.ns-typing { align-self: flex-start; color: var(--text-dim); font-size: 13px; padding: 4px 6px;
  display: none; }
.ns-typing.show { display: block; }

/* --- vision (generated NORTH_STAR.md) -------------------------------------- */
.ns-vision .ns-vhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ns-vision h2 { font-size: 15px; margin: 0; font-weight: 650; }
.ns-shared { font-size: 11px; color: var(--md-sys-color-tertiary); border: 1px solid var(--md-sys-color-tertiary);
  border-radius: 9999px; padding: 2px 9px; font-weight: 600; }
.ns-vmeta { font-size: 11.5px; color: var(--text-dim); margin-left: auto; }
.ns-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; will-change: transform, opacity;
  transition: transform .25s ease-out, opacity .25s ease-out; }
.ns-sec h3 { font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-dim);
  margin: 0 0 6px; font-weight: 700; }
.ns-sec p { margin: 0; font-size: 14px; line-height: 1.5; }
.ns-sec.empty { border-style: dashed; }
.ns-sec.empty p { color: var(--text-dim); font-style: italic; }
.ns-sec.empty .ns-ask { display: inline-block; margin-top: 7px; font-size: 12.5px; color: var(--accent);
  font-weight: 600; cursor: pointer; }
.ns-sec.justadded { animation: nsPop .4s ease-out; }
@keyframes nsPop { from { transform: scale(.97); opacity: .3; } to { transform: scale(1); opacity: 1; } }
.ns-flash { outline: 2px solid var(--md-sys-color-tertiary); }

/* --- vision commit composer (P5): inline "commit a fact to this section" ---- */
.ns-vc-open { margin-top: 8px; background: none; border: none; padding: 0; color: var(--accent);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: opacity .2s ease-out; }
.ns-vc-open:active { opacity: .6; }
.ns-vc { margin-top: 10px; }
.ns-vc-text { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 14px;
  line-height: 1.5; resize: vertical; }
.ns-vc-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ns-vc-save { background: var(--accent); color: #061427; border: none; border-radius: 9999px;
  padding: 7px 16px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: opacity .2s ease-out; }
.ns-vc-save:disabled { opacity: .6; cursor: default; }
.ns-vc-cancel { background: none; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 9999px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ns-vc-save:active, .ns-vc-cancel:active { opacity: .7; }
.ns-vc-msg { font-size: 12px; color: var(--md-sys-color-error, #ff6b6b); }

/* --- conversation (P6): the private vision-interview ----------------------- */
.ns-convo-log { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto;
  padding: 4px 2px 12px; margin-bottom: 10px; }
.ns-msg { display: flex; }
.ns-msg-user { justify-content: flex-end; }
.ns-msg-agent { justify-content: flex-start; }
.ns-msg-body { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14px;
  line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.ns-msg-user .ns-msg-body { background: var(--accent); color: #061427; border-bottom-right-radius: 5px; }
.ns-msg-agent .ns-msg-body { background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-bottom-left-radius: 5px; }
.ns-thinking { color: var(--text-dim); font-style: italic; will-change: opacity; animation: nsPulse 1.4s ease-in-out infinite; }
@keyframes nsPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.ns-convo-form { display: flex; gap: 8px; align-items: flex-end; }
.ns-convo-input { flex: 1; box-sizing: border-box; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font: inherit;
  font-size: 14px; line-height: 1.5; resize: vertical; }
.ns-convo-send { background: var(--accent); color: #061427; border: none; border-radius: 9999px;
  padding: 10px 20px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity .2s ease-out; }
.ns-convo-send:disabled { opacity: .55; cursor: default; }
.ns-convo-send:active { opacity: .75; }

/* --- workflows ------------------------------------------------------------- */
.ns-wf-intro { font-size: 13px; color: var(--text-dim); margin: 0 4px 12px; line-height: 1.45; }
.ns-wf-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px 14px; }
.ns-wf-filter { cursor: pointer; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 9999px; padding: 6px 12px; font: inherit; font-size: 12.5px;
  font-weight: 600; transition: opacity .2s ease-out; }
.ns-wf-filter[aria-pressed="true"] { background: var(--accent); color: #061427; border-color: var(--accent); }
.ns-wf-filter:active { opacity: .7; }
.ns-wf { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 10px; overflow: hidden; }
.ns-wf.hide { display: none; }
.ns-wf-head { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; cursor: pointer;
  transition: opacity .2s ease-out; }
.ns-wf-head:active { opacity: .8; }
.ns-wf-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.ns-wf-ico { font-size: 20px; flex: 0 0 auto; line-height: 1.2; }
.ns-wf-tt { flex: 1; min-width: 0; }
.ns-wf-tt h3 { margin: 0; font-size: 14.5px; font-weight: 650; }
.ns-wf-when { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ns-wf-surfaces { font-size: 10.5px; color: var(--accent); margin-top: 6px; letter-spacing: .2px;
  opacity: .85; }
.ns-wf-chev { color: var(--text-dim); will-change: transform; transition: transform .25s ease-out; flex: 0 0 auto; margin-top: 2px; }
.ns-wf.open .ns-wf-chev { transform: rotate(90deg); }
.ns-wf-steps { display: none; padding: 0 14px 14px; }
.ns-wf.open .ns-wf-steps { display: block; }
.ns-step { display: flex; gap: 11px; padding: 10px 0; border-top: 1px solid var(--border); }
.ns-step-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 9999px; background: var(--bg);
  border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; font-weight: 700;
  display: grid; place-items: center; }
.ns-step-body { flex: 1; min-width: 0; }
.ns-step-body p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; }
.ns-actor { display: inline-block; font-size: 10px; letter-spacing: .4px; text-transform: uppercase;
  font-weight: 700; border-radius: 9999px; padding: 1px 8px; }
.ns-actor.you { color: var(--md-sys-color-on-primary-container, #dce9ff);
  background: var(--md-sys-color-primary-container, #1a4b8a); }
.ns-actor.sys { color: var(--accent); border: 1px solid var(--border); }
.ns-wf-run { margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--accent); color: #061427; border: 0; border-radius: 10px; padding: 8px 14px;
  font: inherit; font-size: 13px; font-weight: 700; text-align: left;
  will-change: transform, opacity;
  transition: opacity .2s ease-out, transform .2s ease-out; }
.ns-wf-run:active { transform: scale(.97); }
.ns-wf.ns-wf-new { will-change: transform, opacity; animation: nsPop .4s ease-out; }

/* add-a-workflow composer (faked) */
.ns-wf-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  cursor: pointer; background: transparent; border: 1px dashed var(--border); color: var(--accent);
  border-radius: 12px; padding: 12px; font: inherit; font-size: 13.5px; font-weight: 650;
  will-change: transform, opacity;
  margin-bottom: 12px; transition: opacity .2s ease-out, transform .2s ease-out; }
.ns-wf-add:active { transform: scale(.99); }
.ns-wf-form { background: var(--surface); border: 1px solid var(--accent); border-radius: 14px;
  padding: 14px; margin-bottom: 12px; }
.ns-wf-form[hidden] { display: none; }
.ns-fin { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px; margin-bottom: 9px; outline: none; }
.ns-fin:focus { border-color: var(--accent); }
.ns-fin.ns-err { border-color: var(--red); }
.ns-flabel { font-size: 11px; color: var(--text-dim); font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; margin: 4px 2px 7px; display: block; }
.ns-wf-surfsel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.ns-surf { cursor: pointer; background: var(--bg); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 9999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 600;
  transition: opacity .2s ease-out; }
.ns-surf[aria-pressed="true"] { background: var(--accent); color: #061427; border-color: var(--accent); }
.ns-steprow { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.ns-actor-toggle { flex: 0 0 auto; cursor: pointer; border-radius: 9999px; padding: 5px 9px;
  font: inherit; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  border: 1px solid var(--border); min-width: 60px; transition: opacity .2s ease-out; }
.ns-actor-toggle[data-who="you"] { background: var(--md-sys-color-primary-container,#1a4b8a);
  color: var(--md-sys-color-on-primary-container,#dce9ff); border-color: transparent; }
.ns-actor-toggle[data-who="sys"] { background: transparent; color: var(--accent); }
.ns-stepin { flex: 1; min-width: 0; margin-bottom: 0; }
.ns-steprm { flex: 0 0 auto; cursor: pointer; background: transparent; border: 0; color: var(--text-dim);
  font-size: 14px; padding: 4px 6px; border-radius: 8px; transition: opacity .2s ease-out; }
.ns-steprm:active { opacity: .6; }
.ns-wf-addstep { cursor: pointer; background: transparent; border: 0; color: var(--accent);
  font: inherit; font-size: 12.5px; font-weight: 650; padding: 4px 2px; margin: 2px 0 12px; }
.ns-wf-formactions { display: flex; gap: 8px; margin-top: 4px; }
.ns-wf-save { cursor: pointer; background: var(--accent); color: #061427; border: 0; border-radius: 10px;
  padding: 10px 16px; font: inherit; font-size: 13.5px; font-weight: 700;
  will-change: transform; transition: transform .2s ease-out; }
.ns-wf-save:active { transform: scale(.97); }
.ns-wf-cancel { cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 13.5px; font-weight: 600; }

.ns-note { font-size: 11.5px; color: var(--text-dim); text-align: center; margin: 20px 6px 8px;
  padding-top: 12px; border-top: 1px solid var(--border); }
.ns-note b { color: var(--text); }

/* North Star Workflows — P4 wiring: edit/delete actions on each card + form error highlight.
   Tokens-only, GPU-safe (transform/opacity), matches the .ns-wf-* prototype styles already above. */
.ns-wf-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--border); }
.ns-wf-edit, .ns-wf-del { cursor: pointer; background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 9999px; padding: 5px 13px; font: inherit; font-size: 12.5px;
  font-weight: 600; will-change: transform, opacity; transition: opacity .2s ease-out, transform .2s ease-out; }
.ns-wf-edit:hover { color: var(--text); }
.ns-wf-del:hover { color: var(--red, #f85149); border-color: var(--red, #f85149); }
.ns-wf-edit:active, .ns-wf-del:active { transform: scale(.96); }
.ns-vc-open:focus-visible,
.ns-wf-filter:focus-visible,
.ns-wf-add:focus-visible,
.ns-surf:focus-visible,
.ns-actor-toggle:focus-visible,
.ns-steprm:focus-visible,
.ns-wf-addstep:focus-visible,
.ns-wf-save:focus-visible,
.ns-wf-cancel:focus-visible,
.ns-wf-edit:focus-visible,
.ns-wf-del:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ns-fin.ns-err, .ns-err { border-color: var(--red, #f85149); }

@media (prefers-reduced-motion: reduce) {
  .ns-sec.justadded,
  .ns-wf.ns-wf-new,
  .ns-thinking {
    animation: none !important;
  }
}