/* The interface palette changes independently of artwork and brand previews. */
.topbar-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  margin-left: auto;
}
.topbar .search-mini { min-width: 0; }
.auth-theme-controls {
  display: flex;
  justify-content: flex-end;
  max-width: 460px;
  margin: 0 auto;
  padding: 20px 35px 0;
}
.auth-theme-controls + .auth-content { padding-top: 18px; }
button.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font: 12px/1.4 var(--mono);
  white-space: nowrap;
}
button.theme-toggle:hover { background: var(--soft); border-color: var(--ink); }
.theme-toggle-icon { display: block; width: 18px; height: 18px; flex-shrink: 0; }

/* Screen-only overrides keep exported and printed documents on light paper. */
@media screen {
  html[data-theme="dark"] {
    --paper: var(--black);
    --raised: #101a10;
    --panel: #152015;
    --ink: var(--phosphor);
    --muted: #9bb598;
    --rule: #4d6549;
    --line: var(--rule);
    --soft: #20321e;
    --green: var(--phosphor);
    --red: #f0a598;
    --theme-success-surface: #172c19;
    --theme-warning-surface: #302718;
    --theme-warning-ink: #e8c083;
    --theme-error-surface: #321e1a;
    color-scheme: dark;
    accent-color: var(--phosphor);
    scrollbar-color: var(--rule) var(--paper);
  }

  html[data-theme="dark"] ::selection { background: var(--phosphor); color: var(--black); }
  html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
  html[data-theme="dark"] :is(input, select, textarea) { caret-color: var(--phosphor); }
  html[data-theme="dark"] input::file-selector-button {
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 7px 10px;
    margin-right: 12px;
    background: var(--soft);
    color: var(--ink);
  }

  /* Only the shell glyph changes color. Product and review media are untouched. */
  html[data-theme="dark"] :is(.identity, .mobile-brand, .auth-content, .boot) > img[src="/assets/glyph.svg"] {
    filter: brightness(0) saturate(100%) invert(88%) sepia(20%) saturate(704%) hue-rotate(64deg) brightness(96%) contrast(88%);
  }
  html[data-theme="dark"] .brand-identity img { background: #e3e3e3; padding: 24px; }
  html[data-theme="dark"] .brand-asset-preview { border-bottom-color: var(--rule); }

  html[data-theme="dark"] .tag:is(.bench, .wear, .owner, .reviewed) { border-color: #61865c; }
  html[data-theme="dark"] .tag.rejected { border-color: #b5796c; }
  html[data-theme="dark"] .error {
    background: var(--theme-error-surface);
    color: var(--red);
  }
  html[data-theme="dark"] .success-note { background: var(--theme-success-surface); }
  html[data-theme="dark"] .notice {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--ink);
    box-shadow: 0 4px 20px #0006;
  }
  html[data-theme="dark"] dialog { box-shadow: 0 15px 80px #0009; }
  html[data-theme="dark"] dialog::backdrop { background: #030703df; }
  html[data-theme="dark"] :is(.blind-banner, .context-intro) {
    background: var(--raised);
    border: 1px solid var(--rule);
    color: var(--ink);
  }
  html[data-theme="dark"] .blind-banner .hint { color: var(--muted); }

  /* Studio, bench timing and batch status. */
  html[data-theme="dark"] .weekly-focus {
    background: var(--theme-success-surface);
    color: var(--ink);
    border-color: var(--phosphor);
  }
  html[data-theme="dark"] .weekly-focus :is(p, .eyebrow, .meta) { color: var(--muted); }
  html[data-theme="dark"] .weekly-focus button {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  html[data-theme="dark"] :is(.is-blocked, .blocked-note) { border-left-color: var(--theme-warning-ink); }
  html[data-theme="dark"] .blocked-note {
    background: var(--theme-warning-surface);
    color: var(--theme-warning-ink);
  }
  html[data-theme="dark"] .check-status {
    background: var(--theme-success-surface);
    color: var(--ink);
  }
  html[data-theme="dark"] .check-status.due {
    background: var(--theme-warning-surface);
    color: var(--theme-warning-ink);
  }
  html[data-theme="dark"] .aging-phase.current {
    background: var(--theme-success-surface);
    border-top-color: var(--phosphor);
  }
  html[data-theme="dark"] :is(.bridge-status, .studio-status) { background: var(--theme-success-surface); }
  html[data-theme="dark"] :is(.bridge-status, .astra-message, .next-focus) { border-left-color: #61865c; }

  /* Content reviews and production states retain distinct warning/error colors. */
  html[data-theme="dark"] .content-deny {
    background: var(--theme-error-surface);
    color: var(--red);
    border-color: var(--red);
  }
  html[data-theme="dark"] .pipeline-preview { background: var(--panel); color: var(--muted); }
  html[data-theme="dark"] .pipeline-badge.passed {
    background: var(--theme-success-surface);
    color: var(--ink);
  }
  html[data-theme="dark"] .pipeline-badge.pending {
    background: var(--raised);
    color: var(--muted);
  }
  html[data-theme="dark"] .pipeline-badge.denied {
    background: var(--theme-error-surface);
    color: var(--red);
    border-color: #b5796c;
  }
  html[data-theme="dark"] .output-chip:has(input:checked) {
    background: var(--theme-success-surface);
    color: var(--ink);
    border-color: #61865c;
  }
  html[data-theme="dark"] :is(.project-callout, .creative-approval) { background: var(--theme-success-surface); }
  html[data-theme="dark"] .project-callout.warn {
    background: var(--theme-warning-surface);
    color: var(--theme-warning-ink);
    border-color: var(--theme-warning-ink);
  }
  html[data-theme="dark"] .project-card:hover { border-color: var(--ink); }
  html[data-theme="dark"] :is(.state-running, .state-queued, .state-ready, .state-complete, .state-completed, .state-selected, .state-ready_for_review) {
    background: var(--theme-success-surface);
    color: var(--ink);
    border-color: #61865c;
  }
  html[data-theme="dark"] :is(.state-blocked, .state-submission_uncertain) {
    background: var(--theme-warning-surface);
    color: var(--theme-warning-ink);
    border-color: #a4895f;
  }
  html[data-theme="dark"] :is(.state-failed, .state-failed_terminal, .state-failed_retryable) {
    background: var(--theme-error-surface);
    color: var(--red);
    border-color: #b5796c;
  }
  html[data-theme="dark"] .project-artifact.is-selected {
    border-color: var(--phosphor);
    box-shadow: inset 0 3px var(--phosphor);
  }
}

@media (max-width: 800px) {
  .topbar-controls { gap: 10px; }
  .auth-theme-controls { padding: 16px 28px 0; }
  .theme-toggle-label { display: none; }
  button.theme-toggle { width: 44px; padding: 10px; }
}
@media print {
  html[data-theme="dark"] {
    --paper: #e3e3e3;
    --raised: #ececea;
    --panel: #f4f4f0;
    --ink: #171917;
    --muted: #575b55;
    --rule: #b9beb5;
    --line: var(--rule);
    --soft: #d3d7cd;
    --red: #963a2e;
    --green: #2a5933;
    color-scheme: light;
  }
  .theme-toggle, .auth-theme-controls { display: none !important; }
}