/* 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;
}