<div class="catalog-card" data-controller="mcp-ui"
     data-mcp-ui-session-value="<%= @session_id %>"
     data-mcp-ui-participant-id-value="">
  <div class="catalog-card-actions">
    <% @buttons.each do |btn| %>
      <% label = btn["label"] || btn[:label] %>
      <% url = btn["url"] || btn[:url] || "#" %>
      <% style = btn["style"] || btn[:style] || "chat" %>
      <% modal_url = btn["modal_url"] || btn[:modal_url] %>
      <% commands = btn["commands"] || btn[:commands] || case style
           when "chat"    then "right:full right:focus context:record"
           when "explore" then "nav:go(#{url}) context:record"
           when "human"   then "chat:system(Connecting you with a specialist…) modal:open(others) context:record"
           else                "nav:go(#{url}) context:record"
         end %>
      <button type="button"
              class="catalog-card-btn catalog-card-btn--<%= style %>"
              data-action="click->mcp-ui#act"
              data-mcp-component="CatalogCard"
              data-mcp-commands="<%= commands %>"
              <% if modal_url %>data-mcp-modal-url="<%= modal_url %>"<% end %>
              data-mcp-value='<%= { url: url, label: label }.to_json %>'
              ><%= label %></button>
    <% end %>
  </div>
</div>

/* Application styles */

body {
  display: flex;
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  min-height: 100vh;
  color: #1a1a1a;
}

#mm-root {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

#mm-sidebar {
  width: 340px;
  border-left: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}

.mm-sidebar-chat {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.mm-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.mm-chat-input {
  display: flex;
  padding: 0.5rem;
  border-top: 1px solid #ddd;
  gap: 0.5rem;
}

.mm-chat-input input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}

.mm-chat-input button {
  padding: 0.5rem 1rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.mm-msg {
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0;
  border-radius: 8px;
  max-width: 85%;
  word-wrap: break-word;
}

.mm-msg-user {
  background: #dbeafe;
  margin-left: auto;
}

.mm-msg-assistant {
  background: #f3f4f6;
}

#mm-status {
  color: #666;
  font-style: italic;
}

section {
  margin-bottom: 1.5rem;
}

/* Region layouts — CSS Grid */
body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}

/* Page region — wraps all content, defines region grid.
   PLAN 0.13.96.x — conversation_pane and tool_palette moved out of the
   page grid into accordions at the top of #right_column (defined below).
   Harness chrome rows still get explicit full-width rows so they don't
   auto-place into column 2 and pin the right_column width. */
#page_region {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas:
    "header_region   header_region"
    "harness_chrome  harness_chrome"
    "main_region     right_column"
    "notes_region    notes_region"
    "nav_region      nav_region";
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
}

#harness_chrome_region { grid-area: harness_chrome; }

/* Right column — flex stack of accordion panes (AI peer, tool palette)
   above the chat panel (#right_region). When the chat pane is collapsed
   (toggleRight() flips #right_region between right--expanded and
   right--collapsed), the accordions hide alongside it so the whole
   right column shrinks to just the toggle button. */
#right_column { grid-area: right_column; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#right_column:has(> #right_region.right--collapsed) > .right-accordion,
#right_column:has(> #right_region[data-state="collapsed"]) > .right-accordion { display: none; }
#right_column > .right-accordion { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 6px; overflow: hidden; }
#right_column > .right-accordion > .right-accordion-summary {
  cursor: pointer; list-style: none; padding: 8px 12px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); background: var(--bg-overlay);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 6px;
}
#right_column > .right-accordion > .right-accordion-summary::-webkit-details-marker { display: none; }
#right_column > .right-accordion > .right-accordion-summary::before {
  content: "▸"; color: var(--text-muted); transition: transform 0.15s;
}
#right_column > .right-accordion[open] > .right-accordion-summary::before { transform: rotate(90deg); }
#right_column > .right-accordion:not([open]) > .right-accordion-summary { border-bottom: none; }
#right_column > .right-accordion > .right-accordion-body { padding: 8px 12px; max-height: 320px; overflow-y: auto; }
#right_column > .right-accordion > .right-accordion-body > * { margin: 0; }

/* Changes accordion — granular edit list. Each entry is a one-liner:
   property/kind label, before, arrow, after. Wraps on narrow widths. */
.right-accordion--changes .right-accordion-summary { display: flex; justify-content: space-between; align-items: center; }
.right-accordion-count {
  margin-left: auto; font-size: 10px; padding: 1px 6px;
  border-radius: 8px; background: var(--bg-deep, #0d1117);
  color: var(--text-muted, #8b949e); font-variant-numeric: tabular-nums;
  letter-spacing: normal; text-transform: none;
}
.changes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.changes-entry {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  padding: 4px 6px; font-size: 11px; line-height: 1.4;
  background: var(--bg-deep, #0d1117);
  border: 1px solid var(--border-subtle, #30363d);
  border-radius: 4px;
}
.changes-kind {
  font-variant: small-caps; letter-spacing: 0.04em;
  color: var(--text-muted, #8b949e); font-weight: 600;
  min-width: 56px;
}
.changes-before, .changes-after {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
  padding: 0 4px; border-radius: 3px;
  word-break: break-all;
}
.changes-before { background: #f8514922; color: #f85149; }
.changes-after  { background: #3fb95022; color: #3fb950; }
.changes-before--empty, .changes-after--empty {
  background: transparent; color: var(--text-muted, #484f58); font-style: italic;
}
.changes-arrow { color: var(--text-muted, #484f58); font-size: 12px; }
.changes-entry--node_added .changes-kind { color: #3fb950; }
.changes-entry--node_removed .changes-kind { color: #f85149; }
.changes-empty { color: var(--text-muted, #8b949e); font-size: 11px; font-style: italic; }

/* Turn detail modal — opened by clicking a TraceRibbon card. Shows the
   Orchestration Bus conversation captured during the Turn plus the
   actions promoted from the PreTurn draft. */
.turn-modal-role { font-size: 11px; font-variant: small-caps; letter-spacing: 0.04em; color: var(--text-muted, #8b949e); margin-left: 8px; }
.turn-modal-outcome { font-size: 10px; padding: 1px 6px; border-radius: 8px; font-variant: small-caps; letter-spacing: 0.05em; margin-left: 6px; }
.turn-modal-outcome--succeeded { background: #1f6feb22; color: #3fb950; }
.turn-modal-outcome--rejected  { background: #f8514922; color: #f85149; }
.turn-modal-outcome--abandoned { background: #8b949e22; color: #8b949e; }
.turn-modal-outcome--timed_out { background: #d2992222; color: #d29922; }
.turn-modal-outcome--running   { background: #1f6feb22; color: #1f6feb; }
.turn-modal-uut { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-primary, #c9d1d9); margin-left: 8px; padding: 1px 6px; background: var(--bg-deep, #0d1117); border: 1px solid var(--border-subtle, #30363d); border-radius: 3px; }

.turn-modal-meta { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 0 12px; font-size: 11px; color: var(--text-muted, #8b949e); border-bottom: 1px solid var(--border-subtle, #30363d); margin-bottom: 12px; }
.turn-modal-meta strong { color: var(--text-primary, #c9d1d9); font-weight: 600; }

.turn-modal-section { margin: 0 0 16px; }
.turn-modal-section-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-bright, #f0f6fc); }
.turn-modal-section-count { font-size: 11px; color: var(--text-muted, #8b949e); font-variant-numeric: tabular-nums; font-weight: normal; }
.turn-modal-empty { margin: 0; padding: 8px 0; color: var(--text-muted, #8b949e); font-style: italic; font-size: 12px; }

.turn-modal-conversation { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.turn-modal-msg { padding: 8px 10px; background: var(--bg-deep, #0d1117); border: 1px solid var(--border-subtle, #30363d); border-left-width: 3px; border-radius: 4px; }
.turn-modal-msg--human { border-left-color: #58a6ff; }
.turn-modal-msg--ai    { border-left-color: #3fb950; }
.turn-modal-msg--system { border-left-color: #8b949e; }
.turn-modal-msg-header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; font-size: 11px; }
.turn-modal-msg-speaker { font-variant: small-caps; letter-spacing: 0.04em; color: var(--text-muted, #8b949e); font-weight: 600; }
.turn-modal-msg-at { color: var(--text-muted, #484f58); font-family: "SF Mono", Menlo, monospace; }
.turn-modal-msg-phase { color: var(--accent-fg, #58a6ff); margin-left: auto; }
.turn-modal-msg-text { font-size: 12px; line-height: 1.45; color: var(--text-primary, #c9d1d9); white-space: pre-wrap; }
.turn-modal-msg-extras { margin: 6px 0 0; padding: 6px 8px; background: var(--bg-overlay, #161b22); border-radius: 3px; font-family: "SF Mono", Menlo, monospace; font-size: 10px; color: var(--text-secondary, #8b949e); white-space: pre-wrap; max-height: 160px; overflow: auto; }

.turn-modal-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.turn-modal-action { padding: 6px 10px; background: var(--bg-deep, #0d1117); border: 1px solid var(--border-subtle, #30363d); border-radius: 4px; }
.turn-modal-action-header { display: flex; gap: 8px; align-items: baseline; font-size: 11px; }
.turn-modal-action-index { color: var(--text-muted, #484f58); font-variant-numeric: tabular-nums; }
.turn-modal-action-op { font-family: "SF Mono", Menlo, monospace; color: var(--text-bright, #f0f6fc); font-weight: 500; }
.turn-modal-action-at { color: var(--text-muted, #484f58); font-family: "SF Mono", Menlo, monospace; margin-left: auto; }
.turn-modal-action-payload { margin: 4px 0 0; padding: 6px 8px; background: var(--bg-overlay, #161b22); border-radius: 3px; font-family: "SF Mono", Menlo, monospace; font-size: 10px; color: var(--text-secondary, #8b949e); white-space: pre-wrap; max-height: 200px; overflow: auto; }

.trace-ribbon-card[role="button"] { user-select: none; }
.trace-ribbon-card[role="button"]:focus-visible { outline: 2px solid var(--accent-border, #1f6feb); outline-offset: 1px; }

/* Canvas converting banner — shown briefly when a .html.rerb slug is
   being lifted into a canvas-managed .rerb.js on first save. */
.rerb-canvas-banner {
  margin: 0 0 8px; padding: 8px 12px;
  background: #d2992222; border: 1px solid #d2992255;
  border-radius: 4px; color: #d29922; font-size: 12px;
}

/* PLAN 0.13.96 — full-pane mode. Pages that ARE a role's work-product
   surface (bus, schema, authoring tree, DE edit forms) opt out of the
   conversation_pane / tool_palette sidebars and use the full content
   width up to 1400px. Single column; main_region spans the row. */
#page_region.page--full-pane {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas:
    "header_region"
    "harness_chrome"
    "main_region"
    "notes_region"
    "nav_region";
  max-width: 1400px;
}
#page_region.page--full-pane #right_column { display: none; }

/* Header region */
#header_region { grid-area: header_region; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 4px 24px; background: var(--bg-surface); border-bottom: 1px solid var(--border); gap: 12px; }
#header_region h1 { font-size: 13px; color: var(--accent-blue); font-weight: 600; }
#header_region a { color: var(--accent-blue); text-decoration: none; }
#header_region a:hover { text-decoration: underline; }
.header-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.header-breadcrumb a { color: var(--accent-blue); text-decoration: none; white-space: nowrap; }
.header-breadcrumb a:hover { text-decoration: underline; }
.header-sep { color: var(--text-muted); }
.header-current { color: var(--text-secondary); white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 4px; }

/* Nav region */
#nav_region { grid-area: nav_region; display: grid; grid-auto-flow: column; justify-content: center; align-items: center; gap: 16px; padding: 16px; background: var(--bg-surface); border-top: 1px solid var(--border); }
#nav_region a, #nav_region span.disabled { background: var(--bg-overlay); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 8px 20px; display: inline-block; cursor: pointer; font-size: 13px; text-decoration: none; }
#nav_region a:hover { background: var(--border); }
#nav_region span.disabled { opacity: 0.3; cursor: default; }

.progress { height: 2px; }

/* Main region */
#main_region { grid-area: main_region; min-width: 0; padding: 2px 24px 12px; overflow: auto; }

/* Right region — chat pane, lives inside #right_column (above).
   3 states: collapsed, expanded, full. */
#right_region { padding: 24px; border-left: 1px solid var(--border-subtle); }

/* State: collapsed — just toggle button */
#right_region.right--collapsed,
#right_region:has(.right--collapsed) { padding: 8px; min-width: 40px; }
#right_region.right--collapsed .right-content,
#right_region:has(.right--collapsed) .right-content { display: none; }

/* State: expanded — 280px sidebar */
#right_region.right--expanded,
#right_region:has(.right--expanded) { padding: 24px; }
#right_region.right--expanded .right-content,
#right_region:has(.right--expanded) .right-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#right_region.right--expanded .card-set-wrapper,
#right_region:has(.right--expanded) .card-set-wrapper { overflow-y: auto; max-height: 60vh; }

/* State: full — right panel takes over, main hidden */
#page_region.right-full {
  grid-template-columns: 1fr;
  grid-template-areas:
    "header_region"
    "right_column"
    "notes_region"
    "nav_region";
}
#page_region.right-full #main_region { display: none; }
#page_region.right-full #right_region { border-left: none; max-width: 720px; margin: 0 auto; width: 100%; }

/* Collapsed page grid — main gets all width */
#page_region.right-collapsed { grid-template-columns: 1fr auto; }

/* data-state selectors (legacy compat) */
#right_region[data-state="collapsed"],
#right_region:has([data-state="collapsed"]) { padding: 8px; min-width: 40px; }
#right_region[data-state="collapsed"] .right-content,
#right_region:has([data-state="collapsed"]) .right-content { display: none; }
#right_region[data-state="expanded"],
#right_region:has([data-state="expanded"]) { padding: 24px; }
#right_region[data-state="expanded"] .right-content,
#right_region:has([data-state="expanded"]) .right-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.right-toggle-btn { background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 4px; border-radius: 4px; display: block; margin-bottom: 8px; }
.right-toggle-btn:hover { color: var(--text-primary); background: var(--bg-overlay); }

/* Modal regions — the always-present #modal_region wraps a closed
   <dialog> opened via .showModal() into the top layer, so the host
   takes no flow space. The conditional #login_modal_region etc. render
   <dialog open> in flow when their content_for is set; we let them
   auto-place outside the named grid areas. */
#modal_region {
  display: contents;
}
#login_modal_region, #other_modal_region, #ai_modal_region {
  position: relative;
  z-index: 10;
  margin: 8px 0;
  padding: 8px;
}
/* Notes region */
#notes_region { grid-area: notes_region; padding: 0 24px; }

/* Slide inside main */
.slide-container { display: grid; place-items: center; padding: 0; }
.slide { display: grid; max-width: 960px; width: 100%; }

/* TOC */
.toc { max-width: 960px; width: 100%; padding: 24px; }
.toc-item { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; padding: 10px 16px; }
.toc-pos { min-width: 28px; }
.toc-subtitle { justify-self: end; }
/* PLAN 0.13.88 PR 1 — Role-and-Mode Header chrome strip. */

.harness-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 3px 16px;
  background: var(--bg-overlay, #161b22);
  border-bottom: 1px solid var(--border-subtle, #30363d);
  font-size: 12px;
  color: var(--text-primary, #c9d1d9);
  position: sticky;
  top: 0;
  z-index: 100;
  font-family: var(--font-sans, system-ui);
}

.harness-chrome-slot {
  display: flex;
  align-items: center;
  gap: 6px;
}

.harness-chrome-center {
  justify-content: flex-start;
}

.harness-chrome-right {
  min-width: 0;
}

.harness-role-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.harness-role-icon {
  font-size: 14px;
  line-height: 1;
}

.harness-role-select {
  background: transparent;
  color: var(--text-primary, #c9d1d9);
  border: 1px solid var(--border-subtle, #30363d);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

.harness-role-select:hover {
  background: var(--bg-deep, #0d1117);
}

.harness-mode-icon {
  font-size: 13px;
}

.harness-mode-label {
  font-weight: 600;
  color: var(--text-bright, #f0f6fc);
}

.harness-chrome[data-mode="in_turn"] .harness-mode-label {
  color: var(--accent-blue, #58a6ff);
}

.harness-mode-sep {
  color: var(--text-muted, #484f58);
}

.harness-mode-verb {
  color: var(--text-secondary, #8b949e);
}

.harness-mode-uut {
  color: var(--text-primary, #c9d1d9);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--bg-deep, #0d1117);
  border: 1px solid var(--border-subtle, #30363d);
  border-radius: 3px;
}

.harness-mode-metric {
  color: var(--text-muted, #484f58);
  font-variant-numeric: tabular-nums;
}

.harness-start-turn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-fg, #f0f6fc);
  background: var(--accent-bg, #1f6feb);
  border: 1px solid var(--accent-border, #1f6feb);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.harness-start-turn:hover:not(:disabled) {
  background: var(--accent-bg-hover, #388bfd);
  border-color: var(--accent-bg-hover, #388bfd);
}

.harness-start-turn:disabled {
  color: var(--text-muted, #484f58);
  background: transparent;
  border-color: var(--border-subtle, #30363d);
  cursor: not-allowed;
}

.harness-start-turn-arrow {
  font-size: 11px;
  opacity: 0.85;
}

.harness-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary, #c9d1d9);
  background: transparent;
  border: 1px solid var(--border-subtle, #30363d);
  border-radius: 4px;
  cursor: pointer;
}
.harness-reset:hover {
  color: #f85149;
  border-color: #f8514955;
  background: #f8514911;
}

.harness-component-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-base, #161b22);
  border-bottom: 1px solid var(--border-subtle, #30363d);
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.harness-component-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  user-select: none;
}

.harness-component-badge-icon {
  font-size: 10px;
  opacity: 0.85;
}

.harness-component-badge--dimmed {
  color: var(--text-muted, #484f58);
  background: transparent;
  border-color: var(--border-subtle, #30363d);
}

.harness-component-badge--pending {
  color: var(--accent-fg, #f0f6fc);
  background: var(--bg-deep, #0d1117);
  border-color: var(--accent-border-soft, #1f6feb88);
  border-style: dashed;
}

.harness-component-badge--active {
  color: var(--accent-fg, #f0f6fc);
  background: var(--accent-bg, #1f6feb);
  border-color: var(--accent-bg, #1f6feb);
}

.conversation-pane {
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--text-fg, #c9d1d9);
  background: var(--bg-base, #161b22);
  border-left: 1px solid var(--border-subtle, #30363d);
  min-width: 280px;
}

.conversation-pane-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle, #30363d);
  font-size: 12px;
  color: var(--text-muted, #8b949e);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.conversation-pane-turn {
  font-weight: 500;
  color: var(--accent-fg, #f0f6fc);
}

.conversation-pane-list {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
}

.conversation-pane-empty {
  padding: 12px;
  color: var(--text-muted, #8b949e);
  font-style: italic;
}

.conversation-pane-section-title {
  margin: 0;
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #8b949e);
  border-top: 1px solid var(--border-subtle, #30363d);
}

.conversation-suggestion,
.conversation-draft-entry,
.conversation-action {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}

.conversation-suggestion-marker {
  color: var(--accent-fg, #1f6feb);
}

.conversation-draft-index,
.conversation-action-time {
  font-size: 11px;
  color: var(--text-muted, #484f58);
  font-variant-numeric: tabular-nums;
}

.conversation-draft-components {
  font-size: 11px;
  color: var(--text-muted, #8b949e);
  font-variant: small-caps;
}

.conversation-pane--designer_review {
  background: var(--bg-deep, #0d1117);
}

.conversation-pane-memory {
  border-bottom: 1px solid var(--border-subtle, #30363d);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.conversation-pane-memory-count {
  margin-left: 6px;
  font-size: 10px;
  color: var(--text-muted, #484f58);
  font-variant-numeric: tabular-nums;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}

.conversation-memory-card {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 11px;
}

.conversation-memory-id {
  font-family: "SF Mono", Menlo, monospace;
  color: var(--text-muted, #8b949e);
}

.conversation-memory-role {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--text-muted, #8b949e);
}

.conversation-memory-outcome {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.conversation-memory-outcome--succeeded { background: #1f6feb22; color: #3fb950; }
.conversation-memory-outcome--rejected  { background: #f8514922; color: #f85149; }
.conversation-memory-outcome--abandoned { background: #8b949e22; color: #8b949e; }
.conversation-memory-outcome--timed_out { background: #d2992222; color: #d29922; }
.conversation-memory-outcome--running   { background: #1f6feb22; color: #1f6feb; }

.conversation-memory-components {
  font-size: 10px;
  color: var(--text-muted, #8b949e);
  font-variant: small-caps;
  margin-left: auto;
}

.tool-palette {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: var(--text-fg, #c9d1d9);
  background: var(--bg-base, #161b22);
  border-top: 1px solid var(--border-subtle, #30363d);
}

.tool-palette-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle, #30363d);
  border-radius: 4px;
}

.tool-palette-section--locked {
  border-style: dashed;
  opacity: 0.65;
}

.tool-palette-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.tool-palette-section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #8b949e);
}

.tool-palette-section-hint {
  font-size: 11px;
  color: var(--text-muted, #8b949e);
  font-style: italic;
}

.tool-palette-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
}

.tool-palette-group-label {
  font-size: 10px;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--text-muted, #484f58);
}

.tool-palette-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
}

.tool-palette-op {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
}

.tool-palette-op:hover {
  background: var(--bg-deep, #0d1117);
}

.tool-palette-op--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.tool-palette-op--disabled:hover {
  background: transparent;
}

.tool-palette-op-name {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
}

.tool-palette-op-mode-badge {
  font-size: 10px;
  color: var(--text-muted, #8b949e);
}

.tool-palette-empty {
  margin: 0;
  padding: 4px 0;
  color: var(--text-muted, #8b949e);
  font-style: italic;
  font-size: 11px;
}

.trace-ribbon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: var(--text-fg, #c9d1d9);
  background: var(--bg-base, #161b22);
  border-top: 1px solid var(--border-subtle, #30363d);
}

.trace-ribbon-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.trace-ribbon-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #8b949e);
}

.trace-ribbon-count {
  font-size: 11px;
  color: var(--text-muted, #484f58);
  font-variant-numeric: tabular-nums;
}

.trace-ribbon-empty {
  margin: 0;
  color: var(--text-muted, #8b949e);
  font-style: italic;
}

.trace-ribbon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.trace-ribbon-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  min-width: 140px;
  border: 1px solid var(--border-subtle, #30363d);
  border-radius: 4px;
  background: var(--bg-deep, #0d1117);
  cursor: pointer;
}

.trace-ribbon-card:hover {
  border-color: var(--accent-border, #1f6feb);
}

.trace-ribbon-card--succeeded { border-left: 3px solid #3fb950; }
.trace-ribbon-card--rejected  { border-left: 3px solid #f85149; }
.trace-ribbon-card--abandoned { border-left: 3px solid #8b949e; }
.trace-ribbon-card--timed_out { border-left: 3px solid #d29922; }
.trace-ribbon-card--running   { border-left: 3px solid #1f6feb; }

.trace-ribbon-card-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.trace-ribbon-card-id {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--text-muted, #8b949e);
}

.trace-ribbon-card-role {
  font-size: 10px;
  font-variant: small-caps;
  color: var(--text-muted, #8b949e);
}

.trace-ribbon-card-uut {
  font-size: 11px;
  color: var(--text-fg, #c9d1d9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trace-ribbon-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.trace-ribbon-card-outcome {
  font-weight: 600;
}

.trace-ribbon-dot {
  font-size: 9px;
  letter-spacing: 1px;
}

.trace-ribbon-dot--on  { color: var(--accent-fg, #1f6feb); }
.trace-ribbon-dot--off { color: var(--text-muted, #484f58); }

.trace-ribbon-card-duration {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #8b949e);
}

/* PLAN 0.13.94/95/96 — harness work-product panes (bus, schema, authoring
   tree, DE edit forms). Card-based layout, monospace where appropriate,
   readable on a wide viewport. */
.harness-bus-pane,
.harness-schema-browser,
.authoring-tree,
.harness-skill-edit,
.harness-topology-edit,
.harness-schema-doc-edit {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-primary, #c9d1d9);
}

.harness-bus-header,
.harness-schema-header,
.authoring-tree-header,
.harness-skill-edit-header,
.harness-topology-edit-header,
.harness-schema-doc-edit-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle, #30363d);
}

.harness-bus-title,
.harness-schema-title,
.authoring-tree-title,
.harness-skill-edit-title,
.harness-topology-edit-title,
.harness-schema-doc-edit-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-bright, #f0f6fc);
}

.harness-bus-subtitle,
.harness-schema-subtitle,
.authoring-tree-subtitle,
.harness-skill-edit-subtitle,
.harness-topology-edit-subtitle,
.harness-schema-doc-edit-subtitle {
  font-size: 12px;
  color: var(--text-muted, #8b949e);
}

.harness-bus-card,
.harness-schema-card,
.authoring-tree-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-overlay, #161b22);
  border: 1px solid var(--border-subtle, #30363d);
  border-radius: 6px;
}

.harness-bus-section-title,
.harness-schema-section-title,
.authoring-tree-section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright, #f0f6fc);
}

.harness-bus-count,
.authoring-tree-count {
  font-size: 11px;
  color: var(--text-muted, #8b949e);
  font-variant-numeric: tabular-nums;
}

.harness-bus-empty,
.harness-schema-empty,
.authoring-tree-empty,
.authoring-tree-empty-slides {
  margin: 0;
  color: var(--text-muted, #8b949e);
  font-style: italic;
  font-size: 13px;
}

/* Bus pane — skill list, runs table, prompt-shaper sample, topology */
.harness-bus-skill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 8px;
}
.harness-bus-skill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-deep, #0d1117);
  border: 1px solid var(--border-subtle, #30363d);
  border-radius: 4px;
  font-size: 12px;
}
.harness-bus-skill-name { font-weight: 600; color: var(--accent-fg, #58a6ff); }
.harness-bus-skill-meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-muted, #8b949e); font-variant: small-caps; }
.harness-bus-skill-source { font-family: "SF Mono", Menlo, monospace; font-size: 10px; color: var(--text-muted, #484f58); }
.harness-bus-skill-edit,
.harness-bus-edit-topology { font-size: 11px; color: var(--accent-fg, #58a6ff); text-decoration: none; }
.harness-bus-skill-edit:hover,
.harness-bus-edit-topology:hover { text-decoration: underline; }

.harness-bus-runs {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.harness-bus-runs th,
.harness-bus-runs td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle, #30363d);
}
.harness-bus-runs th { color: var(--text-muted, #8b949e); font-weight: 600; font-variant: small-caps; }
.harness-bus-outcome { font-variant: small-caps; font-weight: 600; }
.harness-bus-outcome--succeeded { color: #3fb950; }
.harness-bus-outcome--rejected  { color: #f85149; }
.harness-bus-outcome--abandoned { color: #8b949e; }

.harness-bus-prompt-shaper {
  margin: 0;
  padding: 12px;
  background: var(--bg-deep, #0d1117);
  border: 1px solid var(--border-subtle, #30363d);
  border-radius: 4px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
  color: var(--text-primary, #c9d1d9);
}

.harness-bus-channels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.harness-bus-channel { padding: 10px 12px; background: var(--bg-deep, #0d1117); border: 1px solid var(--border-subtle, #30363d); border-radius: 4px; }
.harness-bus-channel-name { margin: 0 0 2px; font-size: 13px; font-family: "SF Mono", Menlo, monospace; color: var(--accent-fg, #58a6ff); }
.harness-bus-channel-purpose { margin: 0 0 8px; font-size: 12px; color: var(--text-muted, #8b949e); }
.harness-bus-channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.harness-bus-channel-side { display: flex; flex-direction: column; gap: 2px; }
.harness-bus-channel-side-label { font-size: 10px; color: var(--text-muted, #484f58); font-variant: small-caps; letter-spacing: 0.05em; }
.harness-bus-channel-list { list-style: none; margin: 0; padding: 0; font-size: 11px; font-family: "SF Mono", Menlo, monospace; color: var(--text-primary, #c9d1d9); }

/* Schema browser — ERD table + semantic schemas list */
.harness-schema-meta { font-size: 11px; color: var(--text-muted, #8b949e); margin: 0; }
.harness-schema-tables {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: "SF Mono", Menlo, monospace;
}
.harness-schema-tables th,
.harness-schema-tables td {
  padding: 4px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle, #30363d);
  vertical-align: top;
}
.harness-schema-tables th { color: var(--text-muted, #8b949e); font-weight: 600; font-variant: small-caps; }
.harness-schema-table-name { color: var(--accent-fg, #58a6ff); font-weight: 500; }
.harness-schema-column-count { color: var(--text-muted, #8b949e); font-variant-numeric: tabular-nums; }
.harness-schema-fk-list { list-style: none; margin: 0; padding: 0; }
.harness-schema-fk { display: flex; gap: 4px; align-items: baseline; font-size: 11px; }
.harness-schema-fk-from { color: var(--text-primary, #c9d1d9); }
.harness-schema-fk-arrow { color: var(--text-muted, #484f58); }
.harness-schema-fk-to { color: var(--accent-fg, #58a6ff); }
.harness-schema-fk-none { color: var(--text-muted, #484f58); }

.harness-schema-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.harness-schema-doc { display: flex; align-items: baseline; gap: 12px; padding: 6px 10px; background: var(--bg-deep, #0d1117); border-radius: 4px; }
.harness-schema-doc-title { font-weight: 500; color: var(--text-bright, #f0f6fc); }
.harness-schema-doc-meta { font-size: 11px; color: var(--text-muted, #8b949e); font-family: "SF Mono", Menlo, monospace; }
.harness-schema-doc-edit { margin-left: auto; font-size: 11px; color: var(--accent-fg, #58a6ff); text-decoration: none; }
.harness-schema-doc-edit:hover { text-decoration: underline; }

/* Authoring tree — scenario list, slides, components */
.authoring-tree-scenario-list,
.authoring-tree-slide-list,
.authoring-tree-component-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.authoring-tree-scenario { padding: 10px 12px; background: var(--bg-deep, #0d1117); border: 1px solid var(--border-subtle, #30363d); border-radius: 4px; }
.authoring-tree-scenario-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.authoring-tree-scenario-slug { font-weight: 600; color: var(--accent-fg, #58a6ff); }
.authoring-tree-slide-list { padding-left: 16px; gap: 3px; }
.authoring-tree-slide { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.authoring-tree-slide-position { color: var(--text-muted, #484f58); font-variant-numeric: tabular-nums; min-width: 24px; }
.authoring-tree-slide-slug { font-family: "SF Mono", Menlo, monospace; color: var(--text-primary, #c9d1d9); min-width: 140px; }
.authoring-tree-component { display: flex; align-items: baseline; gap: 12px; padding: 4px 10px; }
.authoring-tree-component-slug { font-family: "SF Mono", Menlo, monospace; color: var(--text-primary, #c9d1d9); }
.authoring-tree-edit-link,
.authoring-tree-region-link { font-size: 11px; color: var(--accent-fg, #58a6ff); text-decoration: none; }
.authoring-tree-edit-link:hover,
.authoring-tree-region-link:hover { text-decoration: underline; }

/* DE edit forms — single textarea, save / cancel */
.harness-skill-edit-form,
.harness-topology-edit-form,
.harness-schema-doc-edit-form { display: flex; flex-direction: column; gap: 8px; }
.harness-skill-edit-label,
.harness-topology-edit-label,
.harness-schema-doc-edit-label { font-size: 12px; color: var(--text-muted, #8b949e); }
.harness-skill-edit-textarea,
.harness-topology-edit-textarea,
.harness-schema-doc-edit-textarea {
  width: 100%;
  min-height: 480px;
  padding: 12px;
  background: var(--bg-deep, #0d1117);
  color: var(--text-primary, #c9d1d9);
  border: 1px solid var(--border-subtle, #30363d);
  border-radius: 4px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}
.harness-skill-edit-actions,
.harness-topology-edit-actions,
.harness-schema-doc-edit-actions { display: flex; gap: 8px; align-items: center; }
.harness-skill-edit-submit,
.harness-topology-edit-submit,
.harness-schema-doc-edit-submit {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-fg, #f0f6fc);
  background: var(--accent-bg, #1f6feb);
  border: 1px solid var(--accent-border, #1f6feb);
  border-radius: 4px;
  cursor: pointer;
}
.harness-skill-edit-submit:hover,
.harness-topology-edit-submit:hover,
.harness-schema-doc-edit-submit:hover { background: var(--accent-bg-hover, #388bfd); }
.harness-skill-edit-cancel,
.harness-topology-edit-cancel,
.harness-schema-doc-edit-cancel { font-size: 12px; color: var(--text-muted, #8b949e); text-decoration: none; }
.harness-skill-edit-cancel:hover,
.harness-topology-edit-cancel:hover,
.harness-schema-doc-edit-cancel:hover { color: var(--accent-fg, #58a6ff); text-decoration: underline; }
.harness-skill-edit-error,
.harness-topology-edit-error,
.harness-schema-doc-edit-error {
  padding: 8px 12px;
  background: #f8514922;
  border: 1px solid #f8514955;
  border-radius: 4px;
  color: #f85149;
  font-size: 12px;
}
.harness-skill-edit-meta { font-size: 11px; color: var(--text-muted, #484f58); }

/* PLAN 0.13.96 follow-up — role-aware home page. Six role cards in a
   responsive grid, plus universal + harness link sections. */
.home-index {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 4px 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-primary, #c9d1d9);
}

.home-index-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #30363d);
}

.home-index-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-bright, #f0f6fc);
}

.home-index-subtitle {
  margin: 0;
  color: var(--text-muted, #8b949e);
  font-size: 13px;
}

.home-index-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.home-role-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--bg-overlay, #161b22);
  border: 1px solid var(--border-subtle, #30363d);
  border-radius: 8px;
  transition: border-color 120ms ease, transform 120ms ease;
}

.home-role-card:hover {
  border-color: var(--accent-border, #1f6feb);
  transform: translateY(-1px);
}

.home-role-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-role-icon {
  font-size: 20px;
}

.home-role-name {
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--text-bright, #f0f6fc);
}

.home-role-product {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary, #c9d1d9);
}

.home-role-product strong {
  color: var(--text-bright, #f0f6fc);
  font-weight: 500;
}

.home-role-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--accent-bg, #1f6feb);
  border: 1px solid var(--accent-border, #1f6feb);
  border-radius: 4px;
  color: var(--accent-fg, #f0f6fc);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  width: fit-content;
  text-transform: capitalize;
}

.home-role-cta:hover {
  background: var(--accent-bg-hover, #388bfd);
  border-color: var(--accent-bg-hover, #388bfd);
}

.home-role-cta-arrow { font-size: 11px; opacity: 0.85; }

.home-role-de {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, #30363d);
  font-size: 11px;
}

.home-role-de-label {
  color: var(--text-muted, #8b949e);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.home-role-de-label--posture {
  color: var(--text-secondary, #c9d1d9);
  font-weight: 500;
}

.home-role-de-reason {
  color: var(--text-muted, #484f58);
  font-style: italic;
}

.home-role-de-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-role-de-surface {
  font-family: "SF Mono", Menlo, monospace;
}

.home-role-de-surface a {
  color: var(--accent-fg, #58a6ff);
  text-decoration: none;
}

.home-role-de-surface a:hover { text-decoration: underline; }

.home-index-utility,
.home-index-harness {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, #30363d);
}

.home-index-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #8b949e);
}

.home-index-utility-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.home-utility-link {
  font-size: 13px;
  color: var(--accent-fg, #58a6ff);
  text-decoration: none;
}

.home-utility-link:hover { text-decoration: underline; }

/* PLAN 0.14.16 — Designer scope_picker chrome (three-preview disambiguation
   inside conversation_pane). Plain CSS; no framework. */
.scope-picker {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  margin: 8px 0;
  background: var(--bg-surface);
  font-size: 13px;
}
.scope-picker-prompt { color: var(--text-muted); margin: 0 0 8px; font-size: 12px; }
.scope-picker-prompt q { color: var(--text-bright); font-style: normal; }
.scope-picker-alternates { display: flex; flex-direction: column; gap: 6px; }
.scope-picker-tier {
  display: block;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.scope-picker-tier:hover { border-color: var(--accent-blue, #58a6ff); }
.scope-picker-tier--default {
  border-color: var(--accent-blue, #58a6ff);
  background: var(--bg-overlay, #161b22);
}
.scope-picker-tier input[type="radio"] { margin-right: 6px; vertical-align: middle; }
.scope-picker-tier-label { font-weight: 500; color: var(--text-bright); }
.scope-picker-preview-slot {
  margin-top: 8px;
  min-height: 40px;
  font-size: 11px;
  color: var(--text-muted);
}
.scope-picker-preview-loading,
.scope-picker-preview-error {
  padding: 6px 8px;
  text-align: center;
  font-style: italic;
}
.scope-picker-preview-error { color: var(--accent-red, #f85149); }
.scope-picker-actions {
  display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end;
}
.scope-picker-actions button {
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-bright);
  cursor: pointer;
  font-size: 12px;
}
.scope-picker-actions button:hover { background: var(--bg-overlay); }
.scope-picker-accept { border-color: var(--accent-green, #3fb950); }

/* PreviewRenderer-produced HTML structure */
.preview-render { padding: 6px; }
.preview-render-summary {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}
.preview-render-scope-label { font-weight: 500; }
.preview-render-components {
  list-style: none;
  margin: 4px 0;
  padding: 0;
  font-size: 11px;
}
.preview-render-component { color: var(--text-bright); }
.preview-render-diff {
  font-family: monospace;
  font-size: 10px;
  padding: 4px;
  margin: 4px 0 0;
  background: var(--bg-overlay, #161b22);
  border-radius: 3px;
  color: var(--text-bright);
  white-space: pre-wrap;
}
.scope-preview-card-error {
  padding: 8px;
  color: var(--accent-red, #f85149);
  font-size: 11px;
}

/* PLAN 0.14.17 — trust mode dial + Watch banner inside scope_picker. */
.trust-mode-dial {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
  background: var(--bg-overlay, #161b22);
  border: 1px solid var(--border-subtle, #21262d);
  border-radius: 4px;
  font-size: 11px;
}
.trust-mode-dial-label {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.trust-mode-dial-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-muted);
}
.trust-mode-dial-option--current {
  color: var(--text-bright);
  background: var(--bg-surface);
  border: 1px solid var(--accent-blue, #58a6ff);
}
.trust-mode-dial-option input[type="radio"] {
  margin: 0;
  width: 12px; height: 12px;
}

.trust-mode-banner {
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid;
}
.trust-mode-banner--watch {
  background: rgba(248, 81, 73, 0.08);
  border-color: var(--accent-red, #f85149);
  color: var(--text-bright);
}
.trust-mode-banner em { color: var(--accent-blue, #58a6ff); font-style: normal; font-weight: 600; }

/* Disabled Accept button when in Watch mode */
.scope-picker--mode-watch .scope-picker-accept,
.scope-picker-accept:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--border-subtle, #21262d);
}

/* PLAN 0.14.18 — Watch-mode Acknowledge button + graduation prompt. */
.scope-picker-acknowledge {
  background: var(--bg-overlay, #161b22);
  border: 1px solid var(--accent-blue, #58a6ff);
  color: var(--accent-blue, #58a6ff);
}
.scope-picker-acknowledge:hover {
  background: var(--accent-blue, #58a6ff);
  color: var(--bg-base, #0d1117);
}

.trust-graduation-prompt {
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--accent-green, #3fb950);
  border-radius: 4px;
  background: rgba(63, 185, 80, 0.06);
  font-size: 12px;
}
.trust-graduation-prompt-message {
  margin: 0 0 8px;
  color: var(--text-bright);
}
.trust-graduation-prompt-message code {
  background: var(--bg-surface);
  padding: 1px 4px;
  border-radius: 2px;
  font-family: monospace;
  font-size: 11px;
}
.trust-graduation-prompt-evidence {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.trust-graduation-prompt-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.trust-graduation-prompt-actions button {
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-bright);
  cursor: pointer;
  font-size: 11px;
}
.trust-graduation-prompt-try {
  border-color: var(--accent-green, #3fb950) !important;
  color: var(--accent-green, #3fb950) !important;
}
.trust-graduation-prompt-actions button:hover { background: var(--bg-overlay); }

/* PLAN 0.14.20 — Companion chat input + Trust auto-commit notification. */
.companion-proposer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle, #21262d);
  border-radius: 4px;
}
.companion-proposer-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-base, #0d1117);
  color: var(--text-bright);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 13px;
  outline: none;
}
.companion-proposer-input:focus {
  border-color: var(--accent-blue, #58a6ff);
}
.companion-proposer-status {
  font-size: 11px;
  min-height: 14px;
  color: var(--text-muted);
}
.companion-proposer-status--error { color: var(--accent-red, #f85149); }
.companion-proposer-status--info  { color: var(--accent-blue, #58a6ff); }

.trust-auto-commit-notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin: 8px 0;
  background: rgba(63, 185, 80, 0.10);
  border: 1px solid var(--accent-green, #3fb950);
  border-radius: 4px;
  font-size: 12px;
}
.trust-auto-commit-notification--expired {
  background: rgba(139, 148, 158, 0.06);
  border-color: var(--border-subtle, #21262d);
  color: var(--text-muted);
}
.trust-auto-commit-notification-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trust-auto-commit-notification-icon {
  font-weight: 700;
  color: var(--accent-green, #3fb950);
  margin-right: 4px;
}
.trust-auto-commit-notification-intent {
  background: var(--bg-overlay);
  padding: 1px 5px;
  border-radius: 2px;
  font-family: monospace;
  font-size: 11px;
  color: var(--text-bright);
}
.trust-auto-commit-notification-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.trust-auto-commit-notification-undo {
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--accent-green, #3fb950);
  background: transparent;
  color: var(--accent-green, #3fb950);
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}
.trust-auto-commit-notification-undo:hover {
  background: var(--accent-green, #3fb950);
  color: var(--bg-base, #0d1117);
}
.trust-auto-commit-notification-undo:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent !important;
  color: var(--text-muted) !important;
}

/* B&H Photo partner styles */

.bhphoto-landing { padding: 8px 0; }

.bhphoto-hero { margin-bottom: 24px; }
.bhphoto-hero h1 { font-size: 18px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
.bhphoto-subtitle { font-size: 13px; color: var(--text-secondary); }

.bhphoto-section-title { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 24px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }

/* Product grid — uses layout primitive */
.bhphoto-product-grid { /* layout via .grid-cards in markup if needed, or inline grid */ }

/* Product card */
.bhphoto-card { display: block; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--text-primary); background: var(--bg-surface); transition: border-color 0.15s; }
.bhphoto-card:hover { border-color: var(--accent-blue); }

.bhphoto-card-image { height: 60px; background: var(--bg-overlay); padding: 12px; }
.bhphoto-card-brand-icon { font-size: 18px; font-weight: 700; color: var(--text-muted); opacity: 0.4; }

.bhphoto-card-body { padding: 12px; }
.bhphoto-card-name { font-size: 13px; font-weight: 600; color: var(--text-bright); margin-bottom: 4px; }
.bhphoto-card-price { font-size: 16px; font-weight: 700; color: var(--accent-blue); margin-bottom: 6px; }
.bhphoto-card-specs { margin-bottom: 6px; }
.bhphoto-card-tco { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.bhphoto-card-rating { font-size: 11px; color: var(--accent-orange); }

.bhphoto-badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--bg-overlay); color: var(--text-secondary); margin-right: 4px; }
.bhphoto-badge--ink { color: var(--accent-green); background: color-mix(in srgb, var(--accent-green) 10%, transparent); }

/* Product page */
.bhphoto-product-page { padding: 8px 0; }
.bhphoto-product-header { margin-bottom: 24px; }
.bhphoto-product-name { font-size: 18px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
.bhphoto-product-brand { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.bhphoto-product-price { font-size: 24px; font-weight: 700; color: var(--accent-blue); margin-bottom: 8px; }
.bhphoto-product-desc { font-size: 13px; color: var(--text-secondary); }

/* Spec table */
.bhphoto-spec-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 24px; }
.bhphoto-spec-table tr { border-bottom: 1px solid var(--border-subtle); }
.bhphoto-spec-name { padding: 6px 12px 6px 0; color: var(--text-muted); font-size: 12px; white-space: nowrap; width: 160px; }
.bhphoto-spec-value { padding: 6px 0; color: var(--text-primary); }

/* TCO card */
.bhphoto-tco-card { border: 1px solid var(--border); border-radius: 8px; padding: 16px; background: var(--bg-surface); }
.bhphoto-tco-row { padding: 6px 0; font-size: 13px; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); }
.bhphoto-tco-total { font-weight: 700; color: var(--text-bright); border-bottom: none; font-size: 15px; }
.bhphoto-tco-detail { font-size: 11px; color: var(--text-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }

/* Category page */
.category-content { padding: 8px 0; }
.category-content h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.category-guide { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; }
.category-product-grid { display: flex; flex-direction: column; gap: 8px; } /* layout-exception: category product listing */
.category-product-card { display: block; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: border-color 0.15s; }
.category-product-card:hover { border-color: var(--accent-blue); }
.category-product-card strong { display: block; font-size: 14px; }
.category-product-meta { font-size: 12px; color: var(--text-muted); }
.category-product-desc { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.category-empty { font-size: 13px; color: var(--text-muted); font-style: italic; }

/* CategoryGrid — product card grid for category guide pages */
.category-grid { padding: 16px; }
.category-grid-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.category-grid-title { font-size: 18px; font-weight: 700; margin: 0; }
.category-grid-count { font-size: 13px; color: var(--text-muted); }
.category-grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.category-grid-card { border: 1px solid var(--border); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.category-grid-card--oos { opacity: 0.5; }
.category-grid-card-image { height: 100px; background: var(--surface-raised); border-radius: 4px; }
.category-grid-card-brand { font-size: 11px; text-transform: uppercase; color: var(--accent-blue); font-weight: 600; }
.category-grid-card-name { font-size: 14px; }
.category-grid-card-price { font-size: 16px; font-weight: 700; }
.category-grid-card-meta { display: flex; gap: 8px; font-size: 12px; color: var(--text-muted); }
.category-grid-card-badge { font-size: 11px; color: var(--accent-red); font-weight: 600; text-transform: uppercase; }

/* Chat interface styles */

/* Right panel — 3 states */
.chat-panel { display: flex; flex-direction: column; } /* layout-exception: chat domain layout */
.chat-panel.right--collapsed { width: auto; }
.chat-panel.right--expanded { height: calc(100vh - 44px); width: 280px; }
.chat-panel.right--full { height: calc(100vh - 44px); width: 100%; max-width: 720px; }
.chat-panel > .right-toggle-btn { flex-shrink: 0; } /* layout-exception: chat domain layout */
.chat-panel > .right-content { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* layout-exception: chat domain layout */

/* Empty state — vertically centered */
.chat-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: auto; margin-bottom: auto; } /* layout-exception: chat domain layout */
.chat-empty-icon { font-size: 20px; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; opacity: 0.5; }
.chat-empty-input { width: 180px; max-width: 80%; text-align: center; border-radius: 16px; padding: 6px 12px; font-size: 12px; min-height: 28px; resize: none; }
.chat-context-btn { background: none; border: 1px solid var(--border); border-radius: 12px; color: var(--text-muted); padding: 3px 10px; font-size: 11px; font-family: inherit; cursor: pointer; }
.chat-context-btn:not(:disabled):hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.chat-context-btn:disabled { opacity: 0.3; cursor: default; }
.chat-context-bar { padding: 4px 12px; }
.chat-empty.hidden { display: none; }

/* Conversation state — visibility toggles (exception: display toggle) */
.chat-state-empty .chat-conversation { display: none; }
.chat-state-conversation .chat-empty { display: none; }
.chat-conversation.hidden { display: none; }
.chat-conversation { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* layout-exception: chat domain layout */

/* Hide send button — Enter submits */
.chat-send-btn { display: none; }

.chat-messages { flex: 1; overflow-y: auto; padding: 2px 8px; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; } /* layout-exception: chat domain layout */

.chat-message {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  max-width: 85%;
  line-height: 1.25;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Thinking indicator */
.chat-thinking { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text-muted); font-size: 13px; } /* layout-exception: chat domain layout */
.chat-thinking-icon { font-size: 16px; animation: think-pulse 1.5s ease-in-out infinite; }
@keyframes think-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Message publisher styles — exception: align-self is dynamic (set by JS appendMessage) */
.chat-message--human {
  background: var(--accent-blue);
  color: var(--color-on-accent);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chat-message--ai {
  background: var(--bg-overlay);
  color: var(--text-primary);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat-message--other {
  background: var(--bg-surface);
  color: var(--text-secondary);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border-left: 2px solid var(--accent-purple, #a371f7);
}

.chat-message--system {
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
  margin: 2px 1rem;
  padding: 2px 8px;
  background: none;
  max-width: 100%;
  align-self: center;
}

.chat-message-name {
  font-weight: 600;
  font-size: 11px;
  display: block;
  margin-bottom: 1px;
  color: var(--text-muted);
}

.chat-message--human .chat-message-name { color: var(--color-on-accent); opacity: 0.8; }
.chat-message--ai .chat-message-name { color: var(--accent-blue); }
.chat-message--other .chat-message-name { color: var(--accent-purple, #a371f7); }

.chat-message-text { display: block; }

.chat-message--share {
  border: 1px solid var(--border);
  border-radius: 8px;
}

.chat-shared-context {
  padding: 6px 8px;
  background: var(--bg-deep);
  border-radius: 2px;
  margin-top: 4px;
  font-size: 12px;
  cursor: pointer;
}

/* MCP UI inline components in chat — square chrome, distinct from round message bubbles */
.mcp-ui-compare { margin: 0; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; background: var(--bg-deep); }
.mcp-ui-compare-title { padding: 3px 6px; font-size: 9px; font-weight: 600; color: var(--accent-blue); background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); text-transform: uppercase; letter-spacing: 0.3px; }
.mcp-ui-table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.mcp-ui-table th { padding: 2px 4px; font-size: 9px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; text-align: center; border-bottom: 1px solid var(--border-subtle); line-height: 1.2; }
.mcp-ui-table th:first-child { text-align: left; width: 30%; }
.mcp-ui-table td { padding: 1px 2px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); text-align: center; }
.mcp-ui-table td:first-child { text-align: left; }
.mcp-ui-table tr:last-child td { border-bottom: none; }

/* Decision table overrides — tighter than default mcp-ui-table */
table.decision-table-grid { border-spacing: 0; white-space: normal; }
table.decision-table-grid th { padding: 2px 2px; font-size: 8px; line-height: 1.1; }
table.decision-table-grid td { padding: 1px 1px; border-bottom: none; vertical-align: middle; }
table.decision-table-grid td:first-child { font-size: 9px; color: var(--text-muted); padding-right: 4px; line-height: 1.1; }
.mcp-ui-label { color: var(--text-muted); font-size: 10px; }
.mcp-ui-highlight { color: var(--accent-green); font-weight: 600; }
.mcp-ui-link { color: var(--accent-blue); text-decoration: none; }
.mcp-ui-link:hover { text-decoration: underline; }
.mcp-ui-link.mcp-ui-highlight { color: var(--accent-green); }
.mcp-ui-compare-title .mcp-ui-link { color: var(--accent-blue); }
.chat-inline-component { margin: 0; }

/* Component-only messages: full width, square chrome, no extra spacing */
.chat-message:has(.chat-inline-component):not(:has(.chat-message-text)) { max-width: 100%; padding: 0; background: none; border-radius: 2px; white-space: normal; }
.chat-message:has(.chat-inline-component) { max-width: 100%; border-radius: 2px; white-space: normal; }

/* Decision table — interactive buttons in cells */
.decision-btn { background: var(--accent-blue); color: var(--color-on-accent); border: none; border-radius: 2px; padding: 2px 2px; font-family: inherit; font-size: 9px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.1s; display: block; width: 100%; line-height: 1.15; margin: 1px 0; }
.decision-btn:hover:not(:disabled) { opacity: 0.85; transform: scale(1.03); }
.decision-btn:disabled { opacity: 0.25; cursor: default; transform: none; }
.decision-btn--selected { background: var(--accent-green); color: var(--color-on-accent); }
.decision-col--eliminated { opacity: 0.2; }
.decision-col--eliminated .decision-btn { text-decoration: line-through; background: var(--bg-overlay); color: var(--text-muted); }

.chat-shared-context:hover {
  background: var(--bg-overlay);
}

/* Channel status bar above input */
.chat-channel-bar {
  display: none;
  padding: 3px 12px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-deep);
}
.chat-channel-bar.active { display: block; }

/* Typing indicator */
.chat-status--typing { color: var(--accent-purple, #a371f7); }

.chat-component {
  margin-top: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: 8px;
  background: var(--bg-deep);
}

/* Chat input bar */
.chat-input-bar { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border-subtle); } /* layout-exception: chat domain layout */

.chat-input {
  flex: 1; /* layout-exception: chat domain layout */
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  resize: none;
  min-height: 36px;
}

.chat-input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.chat-send-btn {
  background: var(--accent-blue);
  color: var(--color-on-accent);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.chat-send-btn:hover {
  opacity: 0.9;
}

.chat-status {
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 12px 4px;
  min-height: 16px;
}

/* Chat context label */
.chat-context-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 12px 2px; }

/* Chat panel */
.right-toggle-icon { display: inline-block; }

/* Edit Modal */
.edit-modal { max-width: 640px; }
.edit-modal-title { font-size: 14px; font-weight: 600; color: var(--text-bright); margin-bottom: 12px; }
.edit-modal-content { max-height: 70vh; overflow-y: auto; }
.edit-region-block { margin-bottom: 16px; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px; }
.edit-region-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } /* layout-exception: edit domain layout */
.edit-region-name { font-size: 12px; font-weight: 600; color: var(--accent-purple); text-transform: uppercase; letter-spacing: 0.5px; min-width: 60px; }
.edit-component-select { background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-size: 12px; font-family: var(--font-mono); }
.edit-props-editor { width: 100%; background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-family: var(--font-mono); font-size: 12px; resize: vertical; tab-size: 2; }
.edit-props-editor:focus { outline: none; border-color: var(--accent-blue); }
.edit-region-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; } /* layout-exception: edit domain layout */
.edit-region-status { font-size: 11px; }

/* Modal — exception: mm-modal[open] display:flex is visibility toggle */
.mm-modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; width: 80vw; height: 80vh; min-width: 320px; min-height: 400px; max-width: none; max-height: none; padding: 0; color: var(--text-primary); position: fixed; inset: 0; margin: auto; resize: none; }
.mm-modal[open] { display: flex; flex-direction: column; } /* layout-exception: visibility toggle */
.mm-modal[style*="top"] { margin: 0; inset: unset; }
.mm-modal--inline { position: relative; width: 100%; height: auto; max-width: 480px; margin: 8px auto; }
.mm-modal--sm { width: 50vw; height: auto; min-height: 200px; max-height: 60vh; }
/* Verify/ToSpec result rows */
.verify-loading { color: var(--text-muted); padding: 12px 0; }
.verify-error { color: var(--accent-red); }
.verify-skip { color: var(--text-muted); }
.verify-success { color: var(--accent-green); }
.verify-success code { display: block; margin-top: 8px; color: var(--text-primary); font-size: 13px; }
.verify-input { margin-bottom: 12px; font-size: 13px; }
.verify-input-label { color: var(--text-muted); }
.verify-input code { color: var(--accent-blue); }
.verify-checks { display: flex; flex-direction: column; gap: 8px; } /* layout-exception: verify domain layout */
.verify-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; } /* layout-exception: verify domain layout */
.verify-row--pass { background: color-mix(in srgb, var(--accent-green) 8%, transparent); }
.verify-row--fail { background: color-mix(in srgb, var(--accent-red) 8%, transparent); }
.verify-icon { flex-shrink: 0; }
.verify-field { font-weight: 600; min-width: 80px; }
.verify-value { color: var(--text-secondary); }
.verify-diff { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } /* layout-exception: verify domain layout */
.verify-diff-label { font-size: 11px; color: var(--text-muted); margin-right: 4px; }
.verify-expected { color: var(--accent-green); word-break: break-word; }
.verify-actual { color: var(--accent-red); word-break: break-word; }
/* Pipeline inspector */
.pipeline-content { padding: 12px; font-size: 12px; overflow-y: auto; max-height: calc(100vh - 200px); }
.pipeline-phase { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.pipeline-phase-name { font-size: 11px; font-weight: 700; color: var(--accent-blue); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.pipeline-phase-body { display: flex; flex-direction: column; gap: 4px; } /* layout-exception: pipeline domain layout */
.pipeline-row { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; font-size: 12px; } /* layout-exception: pipeline domain layout */
.pipeline-row--editable { background: color-mix(in srgb, var(--accent-blue) 6%, transparent); border-radius: 4px; padding: 4px 6px; }
.pipeline-label { font-weight: 600; color: var(--text-muted); min-width: 90px; flex-shrink: 0; }
.pipeline-value { color: var(--text-primary); word-break: break-word; }
.pipeline-value--mono { font-family: var(--font-mono); font-size: 11px; }
.pipeline-input { background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12px; font-family: inherit; flex: 1; min-width: 0; }
.pipeline-input:focus { outline: none; border-color: var(--accent-blue); }
.pipeline-tree-header { font-weight: 600; color: var(--text-bright); margin-bottom: 8px; }
.pipeline-region { border: 1px solid var(--border-subtle); border-radius: 6px; padding: 8px; margin-bottom: 6px; }
.pipeline-region-name { font-size: 11px; font-weight: 700; color: var(--accent-purple); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.pipeline-props-details { margin-top: 4px; }
.pipeline-props-details summary { font-size: 11px; color: var(--text-muted); cursor: pointer; }
.pipeline-props-json { background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 8px; font-size: 11px; font-family: var(--font-mono); overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin-top: 4px; }
.pipeline-erb-source { background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 10px; font-size: 11px; font-family: var(--font-mono); overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin-top: 8px; line-height: 1.6; }
.pipeline-css-rule { border: 1px solid var(--border-subtle); border-radius: 4px; padding: 6px; margin-bottom: 6px; }
.pipeline-css-selector { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent-blue); margin-bottom: 4px; }
.pipeline-template { display: flex; flex-direction: column; gap: 4px; } /* layout-exception: pipeline domain layout */
.pipeline-resolution { display: flex; flex-direction: column; gap: 4px; } /* layout-exception: pipeline domain layout */
/* Style tab interactive elements */
.pipeline-row--clickable { cursor: pointer; }
.pipeline-row--clickable:hover { background: color-mix(in srgb, var(--accent-blue) 6%, transparent); }
.pipeline-value--editable { cursor: text; border-bottom: 1px dashed var(--border-subtle); }
.pipeline-value--editable:hover { border-color: var(--accent-blue); }
.pipeline-css-selector--clickable { cursor: pointer; }
.pipeline-css-selector--clickable:hover { text-decoration: underline; }
.pipeline-inline-input { background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--accent-blue); border-radius: 3px; padding: 2px 6px; font-size: 12px; font-family: var(--font-mono); width: 120px; }
.pipeline-inline-actions { display: inline-flex; gap: 4px; margin-left: 6px; } /* layout-exception: inline editing controls */
.pipeline-inline-btn { background: var(--accent-blue); color: var(--color-on-accent, #fff); border: none; border-radius: 3px; padding: 2px 8px; font-size: 11px; cursor: pointer; font-family: inherit; }
.pipeline-inline-btn--muted { background: var(--bg-overlay); color: var(--text-muted); }
.pipeline-inline-btn:hover { opacity: 0.9; }
.pipeline-color-swatch { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 3px; padding: 0; cursor: pointer; vertical-align: middle; margin-left: 4px; }
.pipeline-cascade { background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 8px; margin: 4px 0; font-size: 12px; }
.pipeline-cascade-header { font-family: var(--font-mono); font-weight: 600; margin-bottom: 4px; color: var(--text-bright); }
.pipeline-cascade-actions { display: flex; gap: 6px; margin-top: 6px; } /* layout-exception: cascade action buttons */
/* Intention pane */
.intention-category-label { font-size: 11px; font-weight: 700; color: var(--accent-purple); text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; padding: 4px 0; }
.pipeline-intent { display: flex; flex-direction: column; gap: 4px; } /* layout-exception: intent domain layout */
.pipeline-intent .pipeline-input { font-family: inherit; }
.pipeline-intent textarea.pipeline-input { resize: vertical; }
/* Tune sliders */
.pipeline-tune { display: flex; flex-direction: column; gap: 4px; } /* layout-exception: tune domain layout */
.tune-slider-row { align-items: center; }
.tune-slider { flex: 1; min-width: 80px; accent-color: var(--accent-blue); cursor: pointer; }
.tune-slider-value { font-family: var(--font-mono); font-size: 11px; min-width: 40px; text-align: right; color: var(--accent-blue); }
/* Role switcher */
.editor-sidebar-header { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--border-subtle); } /* layout-exception: sidebar header */
.editor-role-select { background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font-size: 11px; font-family: inherit; cursor: pointer; flex: 1; }
/* Provenance owner attribution */
.provenance-owner { font-size: 10px; font-weight: 400; color: var(--accent-purple); background: color-mix(in srgb, var(--accent-purple) 10%, transparent); padding: 1px 6px; border-radius: 8px; margin-left: 6px; }
/* Playground */
.playground-input-bar { display: flex; gap: 6px; margin-bottom: 8px; } /* layout-exception: playground input */
.playground-message-input { flex: 1; }
.playground-history { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } /* layout-exception: playground history */
.playground-history-entry { font-size: 11px; color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 8%, transparent); padding: 2px 8px; border-radius: 10px; cursor: pointer; }
.playground-history-entry:hover { background: color-mix(in srgb, var(--accent-blue) 15%, transparent); }
/* Execution trace */
.execution-arrow { text-align: center; color: var(--text-muted); font-size: 16px; line-height: 1; padding: 2px 0; }
.provenance-links { display: flex; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-subtle); } /* layout-exception: provenance cross-links */
.mm-modal::backdrop { background: color-mix(in srgb, var(--bg-deep) 40%, transparent); pointer-events: none; }
/* Modal header */
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); cursor: grab; user-select: none; } /* layout-exception: modal domain layout */
.modal-header:active { cursor: grabbing; }
.modal-title { font-size: 14px; font-weight: 600; color: var(--text-bright); }
.modal-close { background: none; border: none; color: var(--text-secondary); font-size: 18px; cursor: pointer; padding: 4px 8px; }
.modal-close:hover { color: var(--text-bright); }
.modal-body { overflow-y: auto; flex: 1; padding: 16px; font-size: 13px; } /* layout-exception: modal domain layout */
/* Modal tabs */
.modal-tabs { display: flex; gap: 4px; } /* layout-exception: modal domain layout */
.modal-tab { background: none; border: none; color: var(--text-secondary); padding: 6px 12px; font-size: 12px; font-family: inherit; cursor: pointer; border-radius: 6px; }
.modal-tab:hover { color: var(--text-primary); background: var(--bg-overlay); }
.modal-tab.active { color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 10%, transparent); }
.modal-tab-panel { display: none; padding: 16px; font-size: 13px; }
.modal-tab-panel.active { display: block; }
.modal-status-line { padding: 4px 0; }

/* Accordion in modals */
.modal-accordion-tab { cursor: pointer; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); user-select: none; }
.modal-accordion-tab::before { content: "\25B6  "; font-size: 10px; }
.modal-accordion-tab.open::before { content: "\25BC  "; }
.modal-accordion-tab:hover { color: var(--text-bright); }
.modal-accordion-panel { display: none; padding: 8px 12px; }
.modal-accordion-panel.open { display: block; }

/* Quick action toggles — layout via .row.justify-between in markup */
.quick-action { padding: 4px 0; }
.quick-toggle { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--text-primary); } /* layout-exception: toggle domain layout */
.quick-toggle-label { font-size: 13px; }
.quick-toggle-switch { background: var(--border); border-radius: 10px; width: 36px; height: 20px; position: relative; cursor: pointer; transition: background 0.15s; }
.quick-toggle-switch.on { background: var(--accent-blue); }
.quick-toggle-switch::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: white; top: 2px; left: 2px; transition: left 0.15s; }
.quick-toggle-switch.on::after { left: 18px; }

.role-option { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; color: var(--text-primary); cursor: pointer; } /* layout-exception: form domain layout */
.role-option input[type="radio"] { accent-color: var(--accent-blue); }

.context-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } /* layout-exception: context domain layout */
.context-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-radius: 4px; font-size: 12px; } /* layout-exception: context domain layout */
.context-item:hover { background: var(--bg-overlay); }
.context-item-info { display: flex; gap: 6px; min-width: 0; flex: 1; } /* layout-exception: context domain layout */
.context-item-target { font-weight: 600; color: var(--accent-blue); font-size: 11px; white-space: nowrap; }
.context-item-summary { color: var(--text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-item-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 0 4px; }
.context-item-delete:hover { color: var(--accent-red, #f85149); }
.context-clear-btn { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); padding: 4px 10px; font-size: 11px; font-family: inherit; cursor: pointer; margin-top: 4px; }
.context-clear-btn:hover { color: var(--accent-red, #f85149); border-color: var(--accent-red, #f85149); }

/* Chat inline components */
.chat-message--component { padding: 4px 0; max-width: 100%; background: none; border-radius: 0; white-space: normal; }
.chat-message--actions { max-width: 100%; background: none; border-radius: 0; white-space: normal; }
.chat-data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.chat-data-table caption { font-weight: 600; font-size: 12px; text-align: left; padding: 4px 0; }
.chat-data-table th { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); }
.chat-data-table td { padding: 4px 6px; border-bottom: 1px solid var(--border-subtle); }
.chat-product-list-title { font-weight: 600; font-size: 12px; padding: 4px 0; }
.chat-product-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } /* layout-exception: product list domain layout */
.chat-product-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface, #fff); transition: border-color 0.15s, background 0.15s; } /* layout-exception: product list domain layout */
.chat-product-item[data-product-url]:hover { border-color: var(--accent-blue); background: var(--bg-overlay, #f0f4ff); }
.chat-product-name { font-weight: 600; font-size: 12px; }
.chat-product-brand { font-size: 11px; color: var(--text-muted); }
.chat-product-price { font-size: 12px; font-weight: 600; color: var(--accent-blue); margin-left: auto; }
.chat-product-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; text-decoration: none; color: inherit; width: 100%; } /* layout-exception: product list domain layout */
.chat-message--actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0; } /* layout-exception: action button group */
.chat-action-btn { background: var(--bg-surface, #fff); border: 1px solid var(--accent-blue); border-radius: 4px; color: var(--accent-blue); padding: 4px 10px; font-size: 11px; font-family: inherit; cursor: pointer; }
.chat-action-btn:hover { background: var(--accent-blue); color: #fff; }

/* Context shelf — accordion product tray above chat messages */
.chat-shelf { display: flex; flex-direction: column; border-bottom: 1px solid var(--border-subtle); background: var(--bg-deep); flex-shrink: 0; max-height: 40vh; overflow-y: auto; } /* layout-exception: shelf domain layout */
.chat-shelf.hidden { display: none; }
.chat-shelf:empty { display: none; }

/* Accordion sections */
.shelf-accordion { border-bottom: 1px solid var(--border-subtle); }
.shelf-accordion:last-child { border-bottom: none; }
.shelf-accordion-header { display: flex; align-items: center; gap: 4px; padding: 5px 8px; font-size: 11px; font-weight: 600; color: var(--text-secondary); cursor: pointer; user-select: none; } /* layout-exception: shelf domain layout */
.shelf-accordion-header:hover { color: var(--text-primary); background: var(--bg-overlay); }
.shelf-accordion-arrow { font-size: 9px; width: 12px; text-align: center; }
.shelf-accordion-body { display: none; padding: 2px 8px 6px; }
.shelf-accordion.open .shelf-accordion-body { display: flex; flex-direction: column; gap: 3px; } /* layout-exception: shelf domain layout */

/* Shelf cards and actions */
.shelf-card { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface); font-size: 11px; transition: border-color 0.15s; }
.shelf-card:hover { border-color: var(--accent-blue); }
.shelf-card-name { display: inline; font-size: 11px; font-weight: 600; }
.shelf-card-meta { font-size: 10px; color: var(--text-muted); margin-left: 4px; }
.shelf-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0; } /* layout-exception: shelf domain layout */
.shelf-card--explored { border-color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 5%, var(--bg-surface)); }
.shelf-card--explored .shelf-card-name { color: var(--accent-blue); }

/* Provenance — designer mode shows source trace on interactive elements */
[data-role="designer"] .has-provenance { outline: 1px dashed var(--accent-purple, #a371f7); position: relative; }
[data-role="designer"] .has-provenance:hover { outline-color: var(--accent-blue); }
[data-role="designer"] .has-provenance::after { content: attr(data-provenance-label); position: absolute; top: -14px; right: 0; font-size: 8px; color: var(--accent-purple, #a371f7); background: var(--bg-surface); padding: 0 3px; border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
[data-role="designer"] .has-provenance:hover::after { opacity: 1; }

/* Folder dividers — thin separators between conversation directions */
.chat-folder-header { text-align: center; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 0; margin: 4px 0; border-top: 1px solid var(--border-subtle); }

.use-case-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } /* layout-exception: list domain layout */
.use-case-item { display: block; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--text-primary); }
.use-case-item:hover { background: var(--bg-overlay); border-color: var(--accent-blue); }
.use-case-name { font-size: 13px; font-weight: 600; }
.use-case-detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Designer styles tab */
.editor-styles-content { padding: 8px 12px; font-size: 12px; overflow-y: auto; flex: 1; min-height: 0; } /* layout-exception: editor domain layout */
.style-selector-group { margin-bottom: 12px; }
.style-selector-label { font-size: 11px; font-weight: 600; color: var(--accent-blue); font-family: var(--font-mono, monospace); padding: 4px 0; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.style-prop-row { display: grid; grid-template-columns: 100px 1fr; gap: 4px; align-items: center; padding: 2px 0; } /* layout-exception: editor domain layout */
.style-prop-label { font-size: 11px; color: var(--text-muted); text-align: right; padding-right: 4px; }
.style-prop-input { background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-family: var(--font-mono, monospace); font-size: 11px; }
.style-prop-input:focus { outline: none; border-color: var(--accent-blue); }

.modal-label { display: block; font-size: 11px; color: var(--text-muted); margin: 8px 0 4px; }
.modal-select { width: 100%; background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 13px; }
.modal-textarea { width: 100%; min-height: 80px; background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 12px; resize: vertical; }
.modal-range { width: 100%; accent-color: var(--accent-blue); }
.modal-input { width: 100px; background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-family: inherit; font-size: 13px; }
.modal-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--bg-overlay); color: var(--text-muted); margin-left: 4px; }
.modal-btn { background: var(--accent-blue); color: var(--color-on-accent); border: none; border-radius: 6px; padding: 8px 16px; font-family: inherit; font-size: 13px; cursor: pointer; }
.modal-btn:hover { opacity: 0.9; }

/* Header action buttons */
/* Role badge in header */
.header-role-badge { font-size: 11px; font-weight: 600; color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 10%, transparent); padding: 2px 8px; border-radius: 4px; white-space: nowrap; }

.header-action-btn { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); padding: 2px 8px; font-family: inherit; font-size: 12px; cursor: pointer; }
.header-action-btn:hover { color: var(--accent-blue); border-color: var(--accent-blue); }

/* Modal popover (mouseover preview) */
.modal-popover { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-primary); z-index: 1000; max-width: 320px; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.modal-popover-title { font-size: 12px; font-weight: 600; color: var(--text-bright); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }
.modal-popover .modal-body { padding: 0; overflow: visible; }
.modal-popover .modal-tabs { margin-bottom: 6px; }

/* AI button status states */
.header-action-btn[data-ai-status="thinking"] { animation: ai-pulse 1.2s ease-in-out infinite; color: var(--accent-blue); border-color: var(--accent-blue); }
.header-action-btn[data-ai-status="error"] { color: var(--accent-red, #f85149); border-color: var(--accent-red, #f85149); }
@keyframes ai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Inline action buttons in chat messages */
.chat-action-btn { background: var(--accent-blue); color: var(--color-on-accent); border: none; border-radius: 6px; padding: 2px 10px; font-family: inherit; font-size: 12px; cursor: pointer; margin-top: 6px; display: inline-block; }
.chat-action-btn:hover { opacity: 0.9; }

/* data-state selectors */
.chat-panel[data-state="expanded"] .right-content,
.chat-panel.right--full .right-content,
.chat-panel[data-panel-state="full"] .right-content { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* layout-exception: chat domain layout */
.chat-panel[data-state="collapsed"] .right-content { display: none; }
.header-breadcrumb[data-state="loading"] { opacity: 0.5; }
.header-action-btn[data-state="active"] { color: var(--accent-blue); border-color: var(--accent-blue); }
.header-action-btn[data-state="disabled"] { opacity: 0.4; pointer-events: none; }
.mm-modal[data-state="loading"] .modal-body { opacity: 0.5; }

.participants-list { display: flex; flex-direction: column; gap: 4px; } /* layout-exception: list domain layout */
.participant-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; } /* layout-exception: list domain layout */
.participant-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.participant-status-dot.online { background: var(--accent-green, #3fb950); }
.participant-status-dot.offline { background: var(--text-muted); opacity: 0.4; }
.participant-name { flex: 1; color: var(--text-primary); } /* layout-exception: list domain layout */
.participant-role-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--bg-overlay); color: var(--text-muted); }

/* Invite section */
.invite-section { padding: 4px 0; }
.invite-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.invite-session-id { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--accent-blue); background: var(--bg-deep); padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); user-select: all; }

.others-channels { display: flex; flex-direction: column; gap: 6px; } /* layout-exception: channel domain layout */
.others-channel-controls { display: flex; gap: 6px; } /* layout-exception: channel domain layout */
.others-channel-controls button { flex: 1; /* layout-exception: channel domain layout */ padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface); color: var(--text-primary); font-family: inherit; font-size: 12px; cursor: pointer; }
.others-channel-controls button:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.others-channel-controls button.channel-active { background: var(--accent-blue); color: var(--color-on-accent); border-color: var(--accent-blue); }
.channel-status { font-size: 11px; color: var(--text-muted); padding: 2px 0; min-height: 0; }
.channel-status:empty { display: none; }

/* Screen share preview */
.screen-share-preview { max-height: 200px; overflow: hidden; border-radius: 4px; }
.screen-share-preview:empty { display: none; }
.screen-share-video { width: 100%; border-radius: 4px; }

.remote-videos-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px; } /* layout-exception: video domain layout */
/* Video containers */
.local-video-container { position: relative; }
.local-video-container video { width: 120px; border-radius: 4px; }
.local-video-container video:not([src]):not([srcObject]) { display: none; }
.remote-videos-container:empty { display: none; }
.remote-video { width: 100%; border-radius: 4px; }

/* DataTableComponent styles */
.mm-data-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  color: var(--text-primary);
}

.mm-data-table th {
  text-align: left;
  padding: 6px 12px;
  border-bottom: 2px solid var(--border);
  color: var(--text-bright);
  font-weight: 600;
}

.mm-data-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.mm-data-table tbody tr:hover {
  background: var(--bg-surface);
}

/* Search Explorer styles */

.search-explorer { padding: 8px 0; }

.explorer-controls { padding: 8px 0; margin-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
.explorer-controls-row { margin-bottom: 8px; }

.explorer-control { font-size: 12px; color: var(--text-muted); margin-right: 12px; }
.explorer-control select { background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-family: inherit; font-size: 12px; margin-left: 4px; }
.explorer-control--range { min-width: 180px; }
.explorer-control--range input[type="range"] { width: 100px; vertical-align: middle; accent-color: var(--accent-blue); margin: 0 6px; }

.explorer-checkbox { font-size: 12px; color: var(--text-primary); margin-right: 12px; cursor: pointer; }
.explorer-checkbox input { accent-color: var(--accent-blue); margin-right: 3px; }

.explorer-expression-bar { padding: 6px 0; font-size: 12px; }
.explorer-expression-bar code { font-family: var(--font-mono); color: var(--accent-blue); background: var(--bg-deep); padding: 2px 8px; border-radius: 4px; }
.explorer-count { color: var(--text-muted); margin-left: 12px; }

.explorer-results { }
.explorer-card { display: block; border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; text-decoration: none; color: var(--text-primary); background: var(--bg-surface); transition: border-color 0.15s; }
.explorer-card:hover { border-color: var(--accent-blue); }
.explorer-card-name { font-size: 13px; font-weight: 600; color: var(--text-bright); margin-bottom: 4px; }
.explorer-card-price { font-size: 16px; font-weight: 700; color: var(--accent-blue); margin-bottom: 4px; }
.explorer-card-specs { margin-bottom: 4px; }
.explorer-card-tco { font-size: 11px; color: var(--text-muted); }

.explorer-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 32px; font-style: italic; }

/* Page mode — full width, no right panel */
.search-explorer--page .explorer-controls-row { /* layout-exception: explorer controls inline */ }

/* FormGroupComponent styles — layout via .stack / .stack--tight in markup */

.mm-form-group label {
  font-size: 13px;
  color: var(--text-primary);
}

.mm-form-group input,
.mm-form-group textarea,
.mm-form-group select {
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--font-mono);
}

.mm-form-group input:focus,
.mm-form-group textarea:focus,
.mm-form-group select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

/* Layout primitives — the only place layout declarations should live.
 *
 * Rule 1: Parents own spacing (.stack, .row)
 * Rule 2: Width at container boundaries (.wrap)
 * Rule 3: Alignment is explicit and rare (.align-*, .justify-*)
 *
 * Component CSS handles styling (colors, borders, typography).
 * Layout (spacing, width, alignment) lives here + in markup.
 */

/* --- Rule 1: Vertical stacking --- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--tight { gap: 4px; }
.stack--loose { gap: 24px; }
.stack--2 { gap: 2px; }
.stack--8 { gap: 8px; }
.stack--16 { gap: 16px; }

/* --- Rule 1: Horizontal grouping --- */
.row { display: flex; align-items: center; gap: 8px; }
.row--tight { gap: 4px; }
.row--loose { gap: 16px; }
.row--2 { gap: 2px; }
.row--6 { gap: 6px; }
.row--12 { gap: 12px; }

/* --- Rule 2: Width containment --- */
.wrap { width: min(100%, 960px); margin-inline: auto; padding-inline: 24px; }
.wrap--narrow { width: min(100%, 600px); }
.wrap--medium { width: min(100%, 768px); }
.wrap--wide { width: min(100%, 1200px); }
.wrap--fluid { width: 100%; }

/* --- Rule 2: Fill available space (children) --- */
.fill { flex: 1; min-width: 0; }

/* --- Rule 3: Alignment (at layout shell only) --- */
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-start { align-self: flex-start; }

/* --- Modifiers --- */
.stack--0 { gap: 0; }
.stack--6 { gap: 6px; }
.row--wrap { flex-wrap: wrap; }
.no-shrink { flex-shrink: 0; }

/* --- Domain grids --- */
.grid-cards { display: grid; gap: 16px; }
.grid-cards--2 { grid-template-columns: repeat(2, 1fr); }
.grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
.grid-cards--4 { grid-template-columns: repeat(4, 1fr); }
.grid-cards--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-cards--auto-tight { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px; }
@media (max-width: 640px) { .grid-cards { grid-template-columns: 1fr; } }

.grid-props { display: grid; grid-template-columns: 100px 1fr; gap: 4px; align-items: center; }
.grid-state { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.grid-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px; }
.grid-block { display: grid; gap: 4px; }

/* App preview — renders slide regions as mm-frame iframes */
.app-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}

.app-preview-page { min-width: 0; }

/* Accordion */
.accordion { border-top: 1px solid var(--border-subtle); }
.accordion:first-child { border-top: none; }
.accordion-label { padding: 6px 12px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg-surface); cursor: pointer; list-style: none; }
.accordion-label::-webkit-details-marker { display: none; }
.accordion-label::before { content: "▸ "; }
.accordion[open] > .accordion-label::before { content: "▾ "; }

/* Panel label */
.panel-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }

/* Empty region placeholder — layout via .row in markup for non-empty states */
.app-preview--empty { padding: 8px; min-height: 40px; text-align: center; }
.app-preview--empty .empty-state { font-size: 10px; }

/* Command panel — layout via .row.row--6 in markup */
.slide-command-panel {
  padding: 4px 12px 6px;
  background: var(--bg-surface);
}

.slide-cmd-input {
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  width: 160px;
}

.slide-cmd-input--sm { width: 80px; }

.slide-cmd-select {
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  min-width: 160px;
}

.slide-cmd-select--sm { min-width: 100px; }
.slide-cmd-select:disabled, .slide-cmd-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.slide-cmd-select optgroup { font-weight: 600; font-style: normal; color: var(--text-muted); }
.slide-cmd-select option { font-weight: 400; color: var(--text-primary); }

.slide-cmd-btn {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.slide-cmd-btn:hover { background: var(--border); }
.slide-cmd-btn--muted { color: var(--text-muted); }

/* Event log */
.slide-event-log {
  max-height: 150px;
  overflow-y: auto;
  padding: 6px 12px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-deep);
}

/* Event rows — layout via .row in markup */
.event-header {
  padding: 2px 0 4px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.event-entry {
  padding: 2px 0;
  color: var(--text-secondary);
}

.event-time   { color: var(--text-muted); min-width: 60px; }
.event-region { color: var(--accent-purple); min-width: 50px; }
.event-action { color: var(--accent-blue); min-width: 60px; }
.event-target { color: var(--accent-green); min-width: 100px; }
.event-text   { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SectionComponent styles */
.mm-section h2 {
  font-size: 18px;
  color: var(--text-bright);
  margin-bottom: 8px;
}

.mm-section p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Design tokens */
:root {
  --bg-deep: #0d1117;
  --bg-surface: #161b22;
  --bg-overlay: #21262d;
  --border: #30363d;
  --border-subtle: #21262d;
  --text-primary: #c9d1d9;
  --text-bright: #f0f6fc;
  --text-secondary: #8b949e;
  --text-muted: #484f58;
  --text-code: #e6edf3;
  --accent-blue: #58a6ff;
  --accent-green: #238636;
  --accent-green-hover: #2ea043;
  --accent-red: #f85149;
  --accent-purple: #bc8cff;
  --accent-orange: #d29922;
  --region-header: #58a6ff33;
  --region-main: #3fb95033;
  --region-right: #bc8cff33;
  --region-modal: #d2992255;
  --color-on-accent: #fff;
  --color-error: #f85149;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* Light theme */
[data-theme="light"] {
  --bg-deep: #ffffff;
  --bg-surface: #f6f8fa;
  --bg-overlay: #e1e4e8;
  --border: #d0d7de;
  --border-subtle: #e1e4e8;
  --text-primary: #1f2328;
  --text-bright: #0d1117;
  --text-secondary: #656d76;
  --text-muted: #8b949e;
  --text-code: #1f2328;
  --accent-blue: #0969da;
  --accent-green: #1a7f37;
  --accent-green-hover: #2da44e;
  --accent-red: #cf222e;
  --accent-purple: #8250df;
  --accent-orange: #bf8700;
  --region-header: #0969da33;
  --region-main: #1a7f3733;
  --region-right: #8250df33;
  --region-modal: #bf870055;
  --color-on-accent: #fff;
  --color-error: #cf222e;
}

/* Auto-detect system preference */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-deep: #ffffff;
    --bg-surface: #f6f8fa;
    --bg-overlay: #e1e4e8;
    --border: #d0d7de;
    --border-subtle: #e1e4e8;
    --text-primary: #1f2328;
    --text-bright: #0d1117;
    --text-secondary: #656d76;
    --text-muted: #8b949e;
    --text-code: #1f2328;
    --accent-blue: #0969da;
    --accent-green: #1a7f37;
    --accent-green-hover: #2da44e;
    --accent-red: #cf222e;
    --accent-purple: #8250df;
    --accent-orange: #bf8700;
    --region-header: #0969da33;
    --region-main: #1a7f3733;
    --region-right: #8250df33;
    --region-modal: #bf870055;
    --color-on-accent: #fff;
    --color-error: #cf222e;
  }
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-mono); background: var(--bg-deep); color: var(--text-primary); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Page chrome */
#header { background: var(--bg-surface); border-bottom: 1px solid var(--border); }
#header h1 { font-size: 16px; color: var(--accent-blue); font-weight: 600; }
#header a { color: var(--accent-blue); text-decoration: none; }
#header a:hover { text-decoration: underline; }
.slide-counter { font-size: 13px; color: var(--text-secondary); }
.nav { background: var(--bg-surface); border-top: 1px solid var(--border); }
.nav a, .nav span.disabled { background: var(--bg-overlay); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; transition: background 0.15s; text-decoration: none; }
.nav a:hover { background: var(--border); }
.nav span.disabled { opacity: 0.3; cursor: default; }
.progress { background: var(--bg-overlay); }
.progress-bar { background: var(--accent-blue); transition: width 0.3s ease; }
.slide-progress { width: 100%; height: 3px; border: none; appearance: none; background: var(--bg-overlay); }
.slide-progress::-webkit-progress-bar { background: var(--bg-overlay); }
.slide-progress::-webkit-progress-value { background: var(--accent-blue); transition: width 0.3s; }
.slide-progress::-moz-progress-bar { background: var(--accent-blue); }
.kbd-hint { font-size: 11px; color: var(--text-muted); }
kbd { background: var(--bg-overlay); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-size: 11px; }

/* Loading placeholder */
.loading-placeholder { color: var(--text-muted); border-style: dashed; font-size: 11px; }

/* TOC */
.toc-item { border-bottom: 1px solid var(--border-subtle); }
.toc-item:hover { background: var(--bg-surface); }
.toc-item a { color: var(--accent-blue); text-decoration: none; font-size: 15px; }
.toc-item a:hover { text-decoration: underline; }
.toc-pos { color: var(--text-muted); font-size: 13px; }
.toc-subtitle { color: var(--text-secondary); font-size: 13px; }

/* Theme toggle */
.theme-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); padding: 4px 8px; font-size: 13px; font-family: inherit; cursor: pointer; transition: color 0.15s; }
.theme-toggle:hover { color: var(--text-bright); }

/* Error state */
.error-state { color: var(--color-error); font-size: 13px; padding: 16px; border: 1px dashed var(--color-error); border-radius: 6px; text-align: center; }

/* CRUD forms — layout via .stack.stack--tight, .row in markup */
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } /* layout-exception: form domain layout */
.form-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.form-input { background: var(--bg-deep); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; font-family: inherit; font-size: 13px; }
.form-input:focus { outline: none; border-color: var(--accent-blue); }
.form-input--sm { width: 120px; }
.form-actions { display: flex; gap: 8px; margin-top: 8px; } /* layout-exception: form domain layout */
.form-btn { background: var(--accent-blue); color: var(--color-on-accent); border: none; border-radius: 6px; padding: 8px 16px; font-family: inherit; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; }
.form-btn:hover { opacity: 0.9; }
.form-btn--muted { background: var(--bg-overlay); color: var(--text-primary); border: 1px solid var(--border); }
.form-btn--muted:hover { background: var(--border); }
.form-btn--danger { background: var(--accent-red); }
.toc-action { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
.toc-action:hover { color: var(--accent-blue); }

/* Empty state */
.empty-state { color: var(--text-muted); font-size: 13px; padding: 24px; text-align: center; font-style: italic; }
[data-empty="false"] { display: none; }
[data-empty="true"].empty-state { display: block; }

/* State variants reference page — layout via .grid-state in markup */
.state-component-section { margin-bottom: 32px; }
.state-component-name { font-size: 14px; font-weight: 600; color: var(--text-bright); margin-bottom: 8px; }
.state-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.state-card-label { padding: 4px 12px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.state-card-preview { padding: 12px; min-height: 60px; }

/* SlotCardComponent — layout via .stack.stack--0 in markup */
.slot-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-surface); }
.slot-card__image { height: 120px; background: var(--bg-overlay); background-size: cover; background-position: center; }
.slot-card__image--placeholder { background: linear-gradient(135deg, var(--bg-overlay), var(--bg-deep)); }
.slot-card__body { padding: 16px; }
.slot-card__badge { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 10%, transparent); padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; }
.slot-card__title { font-size: 14px; font-weight: 600; color: var(--text-bright); margin: 0 0 4px; }
.slot-card__subtitle { font-size: 12px; color: var(--text-secondary); margin: 0 0 8px; }
.slot-card__text { font-size: 12px; color: var(--text-secondary); margin: 0 0 12px; }
.slot-card__action { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent-blue); text-decoration: none; margin-top: auto; }
.slot-card__action:hover { text-decoration: underline; }

/* Variant: hero — full-width, centered */
.slot-card--hero { grid-column: 1 / -1; text-align: center; border: none; background: var(--bg-overlay); }
.slot-card--hero .slot-card__body { padding: 48px 24px; }
.slot-card--hero .slot-card__title { font-size: 24px; margin-bottom: 8px; }
.slot-card--hero .slot-card__subtitle { font-size: 14px; max-width: 480px; }
.slot-card--hero .slot-card__action { background: var(--accent-blue); color: var(--bg-deep); padding: 8px 24px; border-radius: 6px; margin-top: 16px; }
.slot-card--hero .slot-card__action:hover { text-decoration: none; opacity: 0.9; }

/* Variant: feature — standard card */
.slot-card--feature .slot-card__body { padding: 16px; }

/* Variant: compact — minimal */
.slot-card--compact .slot-card__title { margin: 0; font-size: 13px; }
.slot-card--compact .slot-card__action { margin: 0; }

/* data-state selectors for SlotCardComponent */
.slot-card[data-state="hero"] { grid-column: 1 / -1; text-align: center; border: none; background: var(--bg-overlay); }
.slot-card[data-state="feature"] { border-color: var(--border); }

/* Scenario editor — two-panel layout (exception: complex domain grid) */
.editor { display: grid; grid-template-columns: 280px 1fr; height: calc(100vh - 120px); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } /* layout-exception: complex domain grid */
.editor.editor--sidebar-collapsed { grid-template-columns: 32px 1fr; } /* layout-exception: collapsed state */
.editor-sidebar { background: var(--bg-deep); display: flex; flex-direction: column; overflow: hidden; } /* layout-exception: editor domain layout */
.editor--sidebar-collapsed .editor-sidebar > *:not(.editor-sidebar-toggle) { display: none; }
.editor-sidebar-toggle { background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 8px; text-align: center; flex-shrink: 0; }
.editor-sidebar-toggle:hover { color: var(--text-primary); background: var(--bg-overlay); }
.editor-preview { background: var(--bg-deep); display: flex; flex-direction: column; } /* layout-exception: editor domain layout */
.editor-preview-tabs { display: flex; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; background: var(--bg-surface); } /* layout-exception: editor domain layout */
.editor-preview-tab { background: none; border: none; color: var(--text-secondary); padding: 6px 16px; font-size: 12px; font-family: inherit; cursor: pointer; border-bottom: 2px solid transparent; }
.editor-preview-tab:hover { color: var(--text-primary); }
.editor-preview-tab--active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
.editor-preview-panel { display: none; flex: 1; min-height: 0; overflow-y: auto; } /* layout-exception: editor domain layout */
.editor-preview-panel--active { display: flex; flex-direction: column; } /* layout-exception: editor domain layout */
.editor-context-content { padding: 12px; font-size: 12px; overflow-y: auto; }
.context-section { margin-bottom: 12px; }
.context-section-title { font-size: 10px; font-weight: 600; color: var(--accent-blue); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }
.context-row { display: flex; justify-content: space-between; padding: 2px 0; } /* layout-exception: editor domain layout */
.context-label { color: var(--text-muted); font-size: 11px; }
.context-value { color: var(--text-primary); font-size: 11px; font-weight: 500; }
.context-value--mono { font-family: var(--font-mono, monospace); font-size: 10px; word-break: break-all; }
.context-pipeline { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--text-secondary); background: var(--bg-surface); padding: 8px; border-radius: 4px; white-space: pre-wrap; word-break: break-all; }
.editor-log-content { padding: 12px; overflow-y: auto; flex: 1; } /* layout-exception: editor domain layout */
.editor-log-pre { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--text-secondary); background: var(--bg-surface); padding: 8px; border-radius: 4px; white-space: pre-wrap; }
.editor-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } /* layout-exception: editor domain layout */
.editor-panel-subheader { padding: 4px 12px; font-size: 10px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }

/* Sidebar tabs — layout via .row in markup */
.editor-tabs { display: flex; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } /* layout-exception: editor domain layout */
.editor-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 6px 4px; font-family: inherit; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; } /* layout-exception: editor domain layout */
.editor-tab:hover:not(:disabled) { color: var(--text-primary); }
.editor-tab:disabled { opacity: 0.3; cursor: not-allowed; }
.editor-tab--active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
/* Tab panel visibility — exception: display toggle, not layout */
.editor-tab-panel { display: none; flex-direction: column; flex: 1; overflow-y: auto; } /* layout-exception: editor domain layout */
.editor-tab-panel--active { display: flex; } /* layout-exception: editor domain layout */

/* Slides list — layout via .row in markup */
.editor-add-btn { font-size: 10px; color: var(--accent-blue); text-decoration: none; }
.editor-add-btn:hover { text-decoration: underline; }
.editor-slide-item { display: flex; gap: 8px; padding: 8px 12px; font-size: 12px; color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border-subtle); cursor: pointer; } /* layout-exception: editor domain layout */
.editor-slide-item:hover { background: var(--bg-overlay); }
.editor-slide-item--active { background: var(--bg-overlay); color: var(--text-bright); border-left: 2px solid var(--accent-blue); }
.editor-slide-pos { color: var(--text-muted); min-width: 20px; }
.editor-slide-count { margin-left: auto; font-size: 10px; color: var(--text-muted); }
.editor-slide-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-action-item { display: flex; gap: 6px; padding: 6px 12px; font-size: 11px; color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border-subtle); cursor: pointer; } /* layout-exception: editor domain layout */
.editor-action-item:hover { background: var(--bg-overlay); }
.editor-action-item--active { background: var(--bg-overlay); color: var(--text-bright); border-left: 2px solid var(--accent-blue); }
.editor-action-pos { color: var(--text-muted); min-width: 16px; font-size: 10px; }
.editor-action-detail { display: flex; flex-direction: column; gap: 1px; min-width: 0; } /* layout-exception: editor domain layout */
.editor-action-type { font-weight: 600; font-size: 10px; text-transform: uppercase; color: var(--accent-blue); letter-spacing: 0.3px; }
.editor-action-input { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-primary); }
.editor-action-trace { font-size: 10px; color: var(--text-muted); }

/* Preview */
.editor-preview-frame { flex: 1; min-height: 0; } /* layout-exception: editor domain layout */
.editor-preview-frame iframe { min-height: 100% !important; height: 100% !important; }
/* Region tabs — layout via .row.row--tight.row--wrap in markup */
.editor-region-tabs { display: flex; gap: 4px; flex-wrap: wrap; } /* layout-exception: editor domain layout */
.editor-region-tab { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); padding: 2px 8px; font-family: inherit; font-size: 10px; cursor: pointer; }
.editor-region-tab:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
.editor-region-tab--active { color: var(--accent-blue); border-color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 10%, transparent); }

/* Properties panel */
.editor-region-label { font-weight: 600; color: var(--accent-purple); font-size: 11px; }
.editor-props-content { padding: 12px; font-size: 12px; overflow-y: auto; flex: 1; min-height: 0; } /* layout-exception: editor domain layout */
.editor-props-placeholder { color: var(--text-muted); font-style: italic; padding: 24px; text-align: center; font-size: 11px; }

/* Logs */
.editor-log { padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; overflow-y: auto; flex: 1; } /* layout-exception: editor domain layout */
.editor-log .event-entry { display: block; padding: 3px 0; border-bottom: 1px solid var(--border-subtle); }
.editor-log .event-time { color: var(--text-muted); margin-right: 4px; }
.editor-log .event-action { color: var(--accent-blue); }
.editor-log .event-target { display: block; color: var(--accent-green); word-break: break-all; font-size: 9px; }

/* Status bar — exception: margin-top auto for bottom-pinning */
.editor-status-bar { margin-top: auto; padding: 8px; border-top: 1px solid var(--border-subtle); background: var(--bg-surface); flex-shrink: 0; } /* layout-exception: editor domain layout */
.editor-status-btn { width: 100%; padding: 6px; border: none; border-radius: 4px; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; }
.editor-status-btn--clean { background: var(--accent-green); color: var(--bg-deep); }
.editor-status-btn--dirty { background: var(--accent-red); color: var(--bg-deep); }

/* Diff modal table */
.diff-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: var(--font-mono); }
.diff-table th { text-align: left; padding: 6px 8px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.diff-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.diff-loc { color: var(--accent-purple); white-space: nowrap; width: 120px; }
.diff-type { text-align: center; font-weight: 700; font-size: 14px; width: 30px; }
.diff-added { color: var(--accent-green); }
.diff-removed { color: var(--accent-red); }
.diff-modified { color: var(--accent-orange); }
.diff-was { color: var(--accent-red); }
.diff-is { color: var(--accent-green); }
.diff-table pre { margin: 0; font-size: 10px; white-space: pre-wrap; max-height: 120px; overflow-y: auto; }
.diff-table code { background: var(--bg-overlay); padding: 1px 4px; border-radius: 3px; }
.diff-actions { white-space: nowrap; }
.diff-btn { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-family: inherit; font-size: 10px; cursor: pointer; margin-left: 4px; }
.diff-btn--save { color: var(--accent-green); border-color: var(--accent-green); }
.diff-btn--save:hover { background: var(--accent-green); color: var(--bg-deep); }
.diff-btn--revert { color: var(--accent-red); border-color: var(--accent-red); }
.diff-btn--revert:hover { background: var(--accent-red); color: var(--bg-deep); }
/* Modal footer — layout via .row in markup */
.modal-footer { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border-subtle); flex-shrink: 0; } /* layout-exception: modal domain layout */
.form-btn--muted { background: var(--bg-overlay); color: var(--text-secondary); }

/* Props form fields */
.props-field { margin-bottom: 12px; }
.props-label { display: block; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.props-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.props-input, .props-select, .props-textarea { width: 100%; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-family: inherit; font-size: 12px; box-sizing: border-box; }
.props-input--sm { width: 80px; }
.props-textarea { font-family: var(--font-mono); font-size: 11px; resize: vertical; }
.props-checkbox { accent-color: var(--accent-blue); }
/* Props actions — layout via .row in markup */
.props-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle); } /* layout-exception: props domain layout */
.props-status { font-size: 11px; }
.props-value { font-size: 12px; color: var(--text-primary); padding: 4px 0; }

/* Editor AI assist — exception: flex-shrink for fixed section */
.editor-ai-section { border-top: 1px solid var(--border-subtle); flex-shrink: 0; } /* layout-exception: editor domain layout */
.editor-ai-toggle { padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; list-style: none; background: var(--bg-surface); }
.editor-ai-toggle::-webkit-details-marker { display: none; }
.editor-ai-chat { padding: 8px; }

/* TodoVcComponent styles — layout via .row, .fill in markup */
.todo-page { max-width: 600px; width: 100%; }

.todo-stats { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }

.todo-form { margin-bottom: 24px; }
.todo-input {
  padding: 10px 12px;
  background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 14px;
}
.todo-input:focus { outline: none; border-color: var(--accent-blue); }
.todo-add-btn {
  padding: 10px 20px;
  background: var(--accent-green); color: var(--color-on-accent); border: none; border-radius: 6px;
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.todo-add-btn:hover { background: var(--accent-green-hover); }

.todo-list { list-style: none; }
.todo-item {
  padding: 10px 12px; border-bottom: 1px solid var(--border-subtle);
}
.todo-item:hover { background: var(--bg-surface); }
.todo-item--done .todo-title { text-decoration: line-through; color: var(--text-muted); }

.todo-check {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-primary); font-size: 14px;
}
.todo-checkbox {
  width: 20px; height: 20px;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px; color: var(--accent-blue);
}
.todo-item--done .todo-checkbox { background: var(--accent-green); border-color: var(--accent-green); color: var(--color-on-accent); }

.todo-title { font-size: 14px; }
.todo-desc { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.todo-due { display: block; font-size: 11px; color: var(--accent-blue); margin-top: 2px; }

.todo-delete {
  background: none; border: none; color: var(--text-muted); font-size: 18px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.todo-delete:hover { color: var(--accent-red); }

.todo-empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 32px; }

{
  "type": "object",
  "properties": {
    "items": {
      "type": "array",
      "items": {
        "type": "object"
      },
      "description": "Array of {label, count}"
    },
    "buttons": {
      "type": "array",
      "items": {
        "type": "object"
      },
      "description": "Array of {label, url, style}"
    },
    "prompt": {
      "type": "string"
    },
    "explorer_url": {
      "type": "string"
    }
  },
  "required": []
}