/* Mock-only appearance. The surrounding editor always follows the OS. */
.mock-theme-controls { display: flex; align-items: center; gap: 6px; }
.mock-theme-controls > span { color: var(--text-3); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.app-preview[data-mock-theme="light"] { color-scheme: light; }
.app-preview[data-mock-theme="dark"] { color-scheme: dark; }
.mock-stage[data-mock-theme="light"] {
  color-scheme: light;
  --bg: #f8fafc; --panel: #fff; --panel-2: #f1f5f9; --panel-3: #e2e8f0;
  --text: #0f172a; --text-2: #334155; --text-3: #64748b;
  --line: #cbd5e1; --line-strong: #94a3b8; --input: #fff;
  --accent: #3A3A3A; --accent-ink: #fff;
  --mock-stage: #f1f5f9; --mock-shell: #f8fafc;
  --mock-surface: #fff; --mock-surface-alt: #f1f5f9;
  --mock-text: #0f172a; --mock-muted: #475569; --mock-border: #cbd5e1;
  --mock-control: #e2e8f0; --mock-placeholder: #cbd5e1;
  --mock-notice: #F1F1F1;
}
.mock-stage[data-mock-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220; --panel: #111827; --panel-2: #1e293b; --panel-3: #334155;
  --text: #f1f5f9; --text-2: #cbd5e1; --text-3: #94a3b8;
  --line: #334155; --line-strong: #475569; --input: #111827;
  --accent: #B8B8B8; --accent-ink: #0f172a;
  --mock-stage: #0b1220; --mock-shell: #111827;
  --mock-surface: #111827; --mock-surface-alt: #1e293b;
  --mock-text: #f1f5f9; --mock-muted: #cbd5e1; --mock-border: #334155;
  --mock-control: #334155; --mock-placeholder: #475569;
  --mock-notice: #242424;
  --mock-accent-tint: #242424; --mock-teal: #242424; --mock-cyan: #2A2A2A;
  --mock-green: #303030; --mock-amber: #382b16; --mock-red: #3b1c24;
  --mock-orange: #3b281b;
}
/* Legacy freeform screens use literal light colors. Scope their dark equivalents
   here, preserving layout and semantic accents rather than inverting the image. */
.mock-stage[data-mock-theme="dark"] * { color: var(--mock-text); border-color: var(--mock-border); }
.mock-stage[data-mock-theme="dark"] :is(
  .bob-freeform, .home-freeform, .models-freeform, .monitoring-freeform,
  .dd-freeform, .analytics-freeform, .market-freeform, .ip-freeform,
  .settings-freeform, .ask-ai-freeform, .freeform-structure
) { background: var(--bg); color: var(--mock-text); border-color: var(--mock-border); }
.mock-stage[data-mock-theme="dark"] :is(
  button, input, select, textarea,
  .bob-summary, .bob-table, .bob-sector-menu, .bob-view-manager-row,
  .bob-view-builder-grid article, .bob-structural-labels button, .bob-section-id,
  .bob-audit-tag, .bob-summary-pin,
  .home-tile, .home-team, .home-tables article, .home-bottom article, .home-audit-tag,
  .models-table, .models-audit-tag,
  .mon-work aside, .mon-work article, .mon-alerts, .mon-review-popover,
  .dd-panel, .dd-upload-panel, .dd-table,
  .an-widget, .an-library,
  .market-table, .market-grid--row, .market-quant,
  .ip-rail, .ip-canvas, .ip-monitor article, .ip-compare-widget, .ip-doc-table, .ip-notes, .ip-tiles article,
  .set-nav, .set-content,
  .ai-input, .ai-message--bot
) { background-color: var(--mock-surface); color: var(--mock-text); border-color: var(--mock-border); }
.mock-stage[data-mock-theme="dark"] :is(
  .bob-grid--head, .bob-view-rule, .home-grid--head, .models-grid--head,
  .mon-head, .mon-review-popover li, .dd-head, .market-grid:not(.market-grid--row),
  .ip-notes p, .set-grid > span, .an-canvas
) { background-color: var(--mock-surface-alt); color: var(--mock-muted); }
.mock-stage[data-mock-theme="dark"] :is(
  .bob-field-map, .bob-view-builder, .bob-views-menu, .bob-view-save-dialog,
  .bob-view-manager, .bob-active-filters .bob-filter-chip, .bob-tag, .bob-empty button,
  .mon-filter .is-active
) { background: var(--mock-accent-tint); color: #D4D4D4; border-color: var(--app-contour-color); }
.mock-stage[data-mock-theme="dark"] :is(
  .bob-bulk, .mon-bulk, .mon-trigger-set button.is-selected
) { background: var(--mock-cyan); color: #E8E8E8; border-color: var(--app-contour-color); }
.mock-stage[data-mock-theme="dark"] :is(
  .home-notification--info, .dd-drop, .dd-toolbar .is-on, .ip-drop,
  .models-filter button.is-active, .mq-body aside .is-active, .set-nav .is-active,
  .set-theme .is-active, .set-rule, .set-create, .set-upload,
  .ai-confirm, .ai-message--bot .is-default, .ai-rail .is-active
) { background: var(--mock-teal); color: #D4D4D4; border-color: var(--app-contour-color); }
.mock-stage[data-mock-theme="dark"] :is(
  .bob-status.is-reviewed, .dd-status, .ip-header i
) { background: var(--mock-green); color: #D0D0D0; }
.mock-stage[data-mock-theme="dark"] :is(
  .dd-bulk, .dd-status.is-draft, .ip-custom, .models-alert--sev3,
  .models-status.is-draft, .mq-dropped, .ai-confirm--action, .bob-bulk button:first-of-type
) { background: var(--mock-amber); color: #fde68a; border-color: #92400e; }
.mock-stage[data-mock-theme="dark"] :is(
  .home-notification--critical, .ip-alert, .models-delete-notice,
  .an-list i, .home-tier--sev1, .models-alert--sev1
) { background: var(--mock-red); color: #fca5a5; border-color: #991b1b; }
.mock-stage[data-mock-theme="dark"] :is(.home-tier--sev2, .models-alert--sev2) { background: var(--mock-orange); color: #fdba74; }
.mock-stage[data-mock-theme="dark"] :is(.bob-logo, .bob-status:not(.is-reviewed), .models-risk, .models-status:not(.is-draft), .models-alert:not([class*="models-alert--"]), .ip-rail p i) { background: var(--mock-control); color: var(--mock-text); }
.mock-stage[data-mock-theme="dark"] :is(.ip-doc-table i, .ai-message--bot > i) { background: var(--mock-teal); color: #D4D4D4; }
.mock-stage[data-mock-theme="dark"] :is(
  .models-create, .an-tabs .an-save, .ip-logo, .set-avatar,
  .set-password button, .set-primary, .ai-message--user
) { background: #3A3A3A; color: #fff; border-color: var(--app-contour-color); }
.mock-stage[data-mock-theme="dark"] :is(.dd-complete, .dd-upload, .ip-upload, .ai-input button, .ai-primary) { color: #fff !important; }
.mock-stage[data-mock-theme="dark"] :is(.bob-tabs button.is-active:not(.bob-favorites), .monitoring-tabs .is-active, .mon-analytics-footer button.is-active, .mon-review-toggle b) { background: #3A3A3A; color: #fff; border-color: var(--app-contour-color); }
.mock-stage[data-mock-theme="dark"] .bob-view-save { color: #fff !important; }
.mock-stage[data-mock-theme="dark"] .models-delete-notice button.is-danger { background: #b91c1c; color: #fff; }
.mock-stage[data-mock-theme="dark"] .ai-action { color: #fff !important; }
.mock-stage[data-mock-theme="dark"] :is(.mon-tile, .mon-tile--0, .mon-tile--1, .mon-tile--2, .mon-tile--3) { background: var(--mock-surface) !important; }
.mock-stage[data-mock-theme="dark"] .mon-tile--0 { border-top-color: #ef4444 !important; }
.mock-stage[data-mock-theme="dark"] .mon-tile--1 { border-top-color: #f97316 !important; }
.mock-stage[data-mock-theme="dark"] .mon-tile--2 { border-top-color: #B8B8B8 !important; }
.mock-stage[data-mock-theme="dark"] .mon-tile--3 { border-top-color: #60a5fa !important; }
.mock-stage[data-mock-theme="dark"] .mon-review-toggle { background: var(--mock-accent-tint) !important; color: #D4D4D4 !important; }
.mock-stage[data-mock-theme="dark"] :is(small, p, dt, .bob-filter-label, .bob-filter-select > span, .bob-field-map span, .mon-trigger-set h4, .mon-trigger-set button em, .mon-session-note, .mon-analytics-footer, .ai-rail > span, .ai-no-result) { color: var(--mock-muted); }
.mock-stage[data-mock-theme="dark"] :is(.freeform-structure b, .bob-audit-tag, .bob-summary-pin, .bob-section-id, .home-audit-tag, .models-audit-tag, .mon-review-popover code, .mon-review-popover li strong) { color: #B8B8B8; }
.mock-stage[data-mock-theme="dark"] :is(.market-link, .ai-link, .ai-success, .ip-canvas section > b) { color: #B8B8B8 !important; }
.mock-stage[data-mock-theme="dark"] :is(.mon-sev--sev1, .dd-danger, .bob-view-danger) { color: #fca5a5 !important; }
.mock-stage[data-mock-theme="dark"] .mon-sev--sev2 { color: #fdba74; }
.mock-stage[data-mock-theme="dark"] .mon-sev--sev3 { color: #D0D0D0; }
.mock-stage[data-mock-theme="dark"] :is(.bob-favorites, .bob-star.is-on) { color: #fbbf24; }
.mock-stage[data-mock-theme="dark"] .bob-grid--row:hover { background: var(--mock-surface-alt); }
.mock-stage[data-mock-theme="dark"] button:hover { filter: brightness(1.15); }
.mock-stage[data-mock-theme="dark"] input::placeholder,
.mock-stage[data-mock-theme="dark"] textarea::placeholder { color: #94a3b8; }
.mock-stage[data-mock-theme="dark"] .an-chart { background: repeating-linear-gradient(0deg, transparent 0 20px, #334155 21px); }
.mock-stage[data-mock-theme="dark"] .ip-score i { background: #334155; }
.mock-stage[data-mock-theme="dark"] .mon-switch { background: #475569; }
.mock-stage[data-mock-theme="dark"] .mon-switch.is-on { background: #777777; }
.mock-stage[data-mock-theme="dark"] .mon-heat i { background: #382b16; }
.mock-stage[data-mock-theme="dark"] .mon-heat .hot { background: #c2410c; }
.mock-stage[data-mock-theme="dark"] .mon-heat .fire { background: #ef4444; }

/* Monochrome mock theme override.
   Keep the preview/editor mock surfaces neutral; app-specific color is not part
   of the Mockument contract. */
.mock-stage[data-mock-theme="light"] {
  --accent: #5E5E5E; --accent-ink: #FFFFFF;
  --mock-notice: #F1F1F1;
}
.mock-stage[data-mock-theme="dark"] {
  --accent: #B8B8B8; --accent-ink: #151515;
  --mock-notice: #242424;
  --mock-accent-tint: #242424; --mock-teal: #242424; --mock-cyan: #2A2A2A;
  --mock-green: #303030; --mock-amber: #363636; --mock-red: #303030;
  --mock-orange: #363636;
}
.mock-stage[data-mock-theme="dark"] :is(
  .bob-field-map, .bob-view-builder, .bob-views-menu, .bob-view-save-dialog,
  .bob-view-manager, .bob-active-filters .bob-filter-chip, .bob-tag, .bob-empty button,
  .mon-filter .is-active, .home-notification--info, .dd-drop, .dd-toolbar .is-on,
  .ip-drop, .models-filter button.is-active, .mq-body aside .is-active,
  .set-nav .is-active, .set-theme .is-active, .set-rule, .set-create,
  .set-upload, .ai-confirm, .ai-message--bot .is-default, .ai-rail .is-active,
  .bob-status.is-reviewed, .dd-status, .ip-header i
) { background: #242424 !important; color: #E8E8E8 !important; border-color: var(--app-contour-color) !important; }
.mock-stage[data-mock-theme="dark"] :is(
  .models-create, .an-tabs .an-save, .ip-logo, .set-avatar,
  .set-password button, .set-primary, .ai-message--user,
  .bob-tabs button.is-active:not(.bob-favorites), .monitoring-tabs .is-active,
  .mon-analytics-footer button.is-active, .mon-review-toggle b
) { background: #D0D0D0 !important; color: #151515 !important; border-color: var(--app-contour-color) !important; }
.mock-stage[data-mock-theme="dark"] :is(
  .freeform-structure b, .bob-audit-tag, .bob-summary-pin, .bob-section-id,
  .home-audit-tag, .models-audit-tag, .mon-review-popover code,
  .mon-review-popover li strong, .market-link, .ai-link, .ai-success,
  .ip-canvas section > b
) { color: #E8E8E8 !important; }