/* Source-backed Mission Control excerpts; see README.md's renderer map.
   The site captions and scroll containers are not part of the TUI.
   Keep terminal cell geometry, Mocha roles, and mock controls separate from site UI. */
.example-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; color: var(--subtle); font-size: .9375rem; }
.example-controls label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.example-controls input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.tui-example { min-width: 0; margin: 0 24px; }
.tui-example > figcaption { padding: 0 0 12px; gap: 4px 16px; font: .875rem/1.6 var(--sans); color: var(--muted); }
.tui-example > figcaption > span { color: var(--subtle); font-size: .8125rem; }
.example-scroll { max-width: 100%; overflow-x: auto; padding: 2px; background: #11111b; scrollbar-color: #585b70 #11111b; }
.example-scroll:focus-visible { outline-offset: 3px; }
.example-terminal {
  --ex-bg: #11111b;
  --ex-panel: #1e1e2e;
  --ex-header: #313244;
  --ex-text: #cdd6f4;
  --ex-muted: #a6adc8;
  --ex-dim: #7f849c;
  --ex-border: #585b70;
  --ex-accent: #cba6f7;
  --ex-tool: #74c7ec;
  --ex-green: #a6e3a1;
  --ex-red: #f38ba8;
  --ex-yellow: #f9e2af;
  color: var(--ex-text);
  background: var(--ex-bg);
  font: .9375rem/1.4 "Magi Terminal", Menlo, Consolas, monospace;
  font-variant-ligatures: none;
  font-synthesis: none;
  letter-spacing: 0;
  overflow-wrap: normal;
}
.example-terminal pre { margin: 0; padding: 0; font: inherit; white-space: pre; overflow-wrap: normal; }
.example-terminal b { font-weight: 700; }
.example-terminal .ex-success { color: var(--ex-green); }
.example-terminal .ex-warning { color: var(--ex-yellow); }
.example-terminal .ex-accent, .example-terminal .ex-read { color: var(--ex-accent); }
.example-terminal .ex-dim { color: var(--ex-dim); font-weight: 400; }
.example-terminal .ex-user { color: var(--ex-tool); }
.example-terminal .ex-link { color: var(--ex-accent); text-decoration: underline; }
.example-terminal .ex-line-number { color: #6c7086; }
.example-terminal .ex-keyword { color: var(--ex-accent); font-weight: 700; }
.example-terminal .ex-function { color: #89b4fa; }
.example-terminal .ex-added { color: var(--ex-green); background: var(--ex-header); }
.example-terminal .ex-removed { color: var(--ex-red); background: var(--ex-header); }
.example-terminal .ex-selection { color: var(--ex-tool); background: var(--ex-header); font-weight: 700; }

/* Transcript cards have full-width header/body bands, no border or radius. */
.example-tools { min-width: 44ch; padding: 1.4em 1ch; }
.example-band { background: var(--ex-panel); }
.example-band + .example-band { margin-top: 1.4em; }
.example-band-header { display: flex; justify-content: space-between; gap: 2ch; padding-inline: 1ch; color: var(--ex-accent); font-weight: 700; white-space: pre; background: var(--ex-header); }
.example-terminal .example-band-body { padding: 1.4em 2ch; color: var(--ex-tool); }
.example-band-body .ex-removed, .example-band-body .ex-added { background: var(--ex-panel); }

/* Plain Ratatui pane borders, titles in the border, one-cell insets. */
.example-pane { position: relative; min-width: 0; border: 1px solid var(--ex-border); margin-top: .7em; padding: .7em 3ch .7em 1ch; background: var(--ex-bg); }
.example-pane-title { position: absolute; top: -.7em; left: 1ch; padding-inline: 1ch; color: var(--ex-muted); background: var(--ex-bg); font-weight: 700; white-space: pre; }
.example-pane-active { border-color: var(--ex-accent); }
.example-pane-active > .example-pane-title { color: var(--ex-accent); }
.example-scrollbar { position: absolute; top: .7em; bottom: .7em; right: .4ch; width: 1ch; display: flex; flex-direction: column; align-items: center; color: var(--ex-dim); }
.example-scrollbar i { position: relative; flex: 1; border-left: 1px solid currentColor; }
.example-scrollbar i::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; border-left: 2px solid var(--ex-accent); }
.example-activity { min-width: 46ch; padding: .7em 1ch; }
.example-activity .example-pane { min-height: 9.8em; }
.example-terminal .ex-activity-selected { display: block; color: var(--ex-text); background: var(--ex-header); font-weight: 700; }
.example-activity-detail { min-width: 56ch; padding: 1.4em 2ch; background: #000; }
.example-activity-detail > .example-pane { border-color: var(--ex-text); margin-top: 0; }
.example-activity-detail .example-pane-title { left: 0; padding-inline: .5ch; color: var(--ex-text); font-weight: 400; }
.example-files { min-width: 51ch; padding: .7em 1ch; }
.example-files .example-pane { min-height: 14em; padding-top: 2.1em; }
.example-files .example-pane-title > span { font-weight: 400; }
.example-summary { min-width: 44ch; padding: .7em 1ch; }
.example-summary .example-pane { min-height: 14em; }
.example-summary .example-scrollbar { top: 3.5em; }

.example-note { margin-top: 14px; color: var(--subtle); font: .875rem/1.65 var(--sans); }

/* Batch card: roster, selected task, rounded inset feed, text action. */
.example-crew-figure { margin-top: 24px; }
.example-crew { min-width: 54ch; padding: 1.4em 1ch; }
.example-crew-body { padding: 1.4em 2ch; color: var(--ex-tool); }
.example-roster { font-weight: 700; }
.example-terminal .ex-chip-selected { color: var(--ex-panel); background: var(--ex-tool); }
.example-terminal .example-task { margin-block: 1.4em; }
.example-feed { position: relative; min-height: 8.4em; padding: .7em 1ch; border: 1px solid var(--ex-tool); border-radius: .5ch; background: var(--ex-bg); color: var(--ex-muted); }
.example-feed-title { position: absolute; top: -.7em; left: 1ch; padding-inline: 1ch; background: var(--ex-panel); white-space: pre; }
.example-terminal .example-view-subagent { margin-top: 1.4em; text-align: right; color: var(--ex-accent); font-weight: 700; text-decoration: underline; }

/* Diff stays 20/40/40. Horizontal scrolling is a site accommodation, not
   a claim that the terminal stacks or hides the source panes on phones. */
.example-diff-figure { margin-bottom: 24px; }
.example-diff-stage { position: relative; min-width: 130ch; padding: .7em 1ch; }
.example-diff-columns { display: grid; grid-template-columns: 20% 40% 40%; min-height: 25.2em; }
.example-diff-columns > .example-pane { padding-left: .5ch; padding-right: 1.5ch; }
.example-diff-columns .example-pane-title { left: 0; padding-inline: .5ch; font-weight: 400; color: var(--ex-text); }
.example-diff-files pre { overflow: hidden; }
.example-terminal .ex-source-line { display: block; }
.example-terminal .ex-selected-line { text-decoration: underline; }
.example-refresh { position: absolute; bottom: -.7em; left: .5ch; background: var(--ex-header); color: var(--ex-tool); font-weight: 700; }
.example-comment-modal { position: absolute; width: 40%; min-height: 9.8em; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.4em #000; padding: .7em 1ch; border-color: var(--ex-text); }
.example-comment-modal > .example-pane-title { left: 0; padding-inline: .5ch; font-weight: 400; color: var(--ex-text); }
.example-modal-close { position: absolute; top: -.7em; right: 0; padding-inline: .5ch; color: var(--ex-text); background: var(--ex-bg); }
.example-modal-footer { position: absolute; bottom: -.7em; left: 0; padding-inline: .5ch; color: var(--ex-text); background: var(--ex-bg); white-space: pre; }
.example-cursor { background: var(--ex-text); }
.concept-label { display: block; margin-bottom: 24px; color: var(--subtle); font: .8125rem/1.6 var(--sans); text-align: center; }
.config-rows > .concept-label { text-align: left; margin-bottom: 8px; }
.storage-caption { display: block; margin-top: 24px; color: var(--subtle); font-size: .875rem; }
.storage-caption + .storage-tree { margin-top: 8px; }

@media (max-width: 540px) {
  .tui-example { margin-inline: 16px; }
}
@media (forced-colors: active) {
  .example-pane, .example-feed { border-color: CanvasText; }
  .example-terminal .ex-selection, .example-terminal .ex-chip-selected, .example-terminal .ex-activity-selected { color: HighlightText; background: Highlight; forced-color-adjust: none; }
  .ex-activity-selected .ex-dim, .ex-activity-selected .ex-success { color: inherit !important; }
  .example-scrollbar { display: none; }
}

/* Opt-in readability overrides, outside the source-palette default. */
body:has(#example-contrast:checked) .example-terminal .ex-dim,
body:has(#example-contrast:checked) .example-terminal .ex-line-number { color: #a6adc8; }
@media (prefers-contrast: more) {
  .example-terminal .ex-dim, .example-terminal .ex-line-number { color: #a6adc8; }
}