/* Keep the document's light tokens in print. No image filters: figures, QR
   codes, color samples and downloaded assets retain their original pixels. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #201f1c;
    --bg-soft: #272621;
    --paper: #272621;
    --paper-2: #302e28;
    --panel: #272621;
    --text: #e7e2d8;
    --ink: #e7e2d8;
    --ink-soft: #cec7ba;
    --muted: #b2aa9d;
    --muted-2: #a69c8c;
    --line: #4d493f;
    --line-soft: #38362f;
    --line-strong: #827868;
    --accent: #e0d7c5;
    --accent-dark: #f2eadc;
    --accent-2: #cfad70;
    --gold: #cfad70;
    --gold-light: #dfbd80;
    --gold-dark: #dbba80;
    --accent-soft: rgba(207,173,112,.12);
    --surface-page: #201f1c;
    --surface-panel: #272621;
    --surface-subtle: #302e28;
    --surface-field: #302e28;
    --surface-field-hover: #37342d;
    --surface-field-focus: #3a372f;
    --surface-field-readonly: #292823;
    --surface-output: #292823;
    --surface-inverse: #e7e2d8;
    --text-primary: #e7e2d8;
    --text-secondary: #cec7ba;
    --text-muted: #b2aa9d;
    --line-hairline: rgba(231,226,216,.13);
    --line-container: rgba(231,226,216,.24);
    --line-emphasis: rgba(231,226,216,.48);
    --line-field: #827868;
    --line-field-hover: #ad9b7e;
    --focus-color: #dfbd80;
    --shadow-field-inset: inset 0 1px 2px rgba(0,0,0,.15);
    --red: #f09c8c;
    --danger: #f09c8c;
    --orange: #e7ae76;
    --yellow: #dbba80;
    --green: #bac797;
    --shadow-panel: 0 18px 48px rgba(0,0,0,.2);
    --paper-fibers: none;
    --theme-legacy-panel: #272621;
    --theme-legacy-subtle: #302e28;
    --theme-legacy-muted: #b2aa9d;
    --theme-legacy-ink: #cec7ba;
    --theme-legacy-line: #827868;
    --theme-legacy-info: #a8c7df;
  }
  html[data-theme="dark"] body[data-surface="tool"] {
    --surface-field: #302e28;
    --surface-output: #292823;
    --tool-paper: #201f1c;
    --tool-surface: #272621;
    --tool-ink: #e7e2d8;
    --tool-muted: #b2aa9d;
    --tool-gold: #cfad70;
    --tool-gold-dark: #dbba80;
    --tool-line: #827868;
    --tool-hairline: rgba(231,226,216,.15);
    --tool-focus: rgba(207,173,112,.25);
  }
  html[data-theme="dark"] :is(.paper-card, .radar-panel, .tools-discovery, .empty-state, .toc, .article-section,
    .sosec-perspective, .code-block, .flow-step, .report-illustration-frame) {
    background: var(--surface-panel);
  }
  html[data-theme="dark"] body[data-surface="tool"] .tool-panel :is(input, textarea, select):focus-visible {
    background: var(--surface-field-focus);
  }
  html[data-theme="dark"] body[data-surface="tool"] .tool-panel :is(button.primary, .button.primary):hover:not(:disabled) {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
  }
  html[data-theme="dark"] body[data-surface="tool"] .tool-file-drop {
    background: var(--surface-subtle);
    border-color: var(--tool-line);
  }
  html[data-theme="dark"] .analysis-hub { --hub-field: var(--surface-field); --hub-panel: var(--surface-panel); }
  html[data-theme="dark"] #hub-status.error { color: var(--red); }
  html[data-theme="dark"] .hub-input.is-dragging { background: var(--surface-subtle); }
  html[data-theme="dark"] body[data-page="tools"] { --surface-field: #302e28; --surface-panel: #272621; }
  html[data-theme="dark"] :is(.severity, .chip) { background: var(--surface-subtle); }
  html[data-theme="dark"] body[data-page^="analysis-"] :is(input, select, textarea, th) {
    background: var(--surface-field); color: var(--ink); border-color: var(--line-container);
  }
  html[data-theme="dark"] body[data-page^="analysis-"] button.primary { background: var(--ink); color: var(--paper); }
  html[data-theme="dark"] #diff-visual > .diff-line-added { background: #303c2b; color: #c5d6b6; }
  html[data-theme="dark"] #diff-visual > .diff-line-deleted { background: #482f2a; color: #f0b3a6; }
  html[data-theme="dark"] #diff-visual > .diff-line-range { color: #a8c7df; }
  html[data-theme="dark"] .regex-highlight-preview mark { background: #354331; color: #dfebd6; }
  /* The overview's old translucent cream gradient washes out dark text tokens. */
  html[data-theme="dark"] .metric-card {
    background: var(--surface-panel);
    box-shadow: inset 0 0 0 1px var(--line-container);
  }
  html[data-theme="dark"] .metric-card::before,
  html[data-theme="dark"] .metric-card::after { display: none; }
  html[data-theme="dark"] .metric-card p { color: var(--text-muted); }
}

/* Appearance stays outside the mobile navigation, one action away. */
.site-header .site-appearance {
  position: relative; flex: 0 0 auto; min-width: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--ink);
  font: 13px/1.4 var(--font-ui);
}
.site-header .site-appearance > summary {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 10px; border-radius: 6px; list-style: none; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-weight: 500;
}
.site-header .site-appearance > summary::-webkit-details-marker { display: none; }
.site-header .site-appearance > summary::after { content: none; }
.site-header .site-appearance > summary:hover,
.site-header .site-appearance[open] > summary { background: var(--accent-soft); color: var(--ink); }
.site-header .site-appearance-options {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  width: 184px; min-width: 0; margin: 0; padding: 6px;
  border: 1px solid var(--line-container); border-radius: 8px;
  background: var(--surface-panel); box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.site-header .site-appearance-options label {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  margin: 0; padding: 8px 10px; border-radius: 4px; cursor: pointer;
  color: var(--ink); font: 14px/1.4 var(--font-ui);
}
.site-header .site-appearance-options label:hover { background: var(--accent-soft); }
.site-header .site-appearance-options input {
  appearance: auto; flex: 0 0 auto; width: 16px; height: 16px; min-height: 0;
  margin: 0; padding: 0; accent-color: var(--gold-dark); cursor: pointer;
}
.site-header .site-appearance :is(summary, input):focus-visible {
  outline: 2px solid var(--focus-color); outline-offset: 3px; box-shadow: none;
}
html body .site-header .site-navigation .language-switcher {
  position: static; display: flex; align-items: center; gap: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
}
html body .site-header .language-switcher a {
  min-width: 40px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: var(--text-muted);
  font: 13px/1.4 var(--font-ui); text-decoration: none;
}
html body .site-header .language-switcher a[aria-current="page"] {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold);
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}
html body .site-header .language-switcher a:hover { color: var(--ink); }
html body .site-header .language-switcher a:focus-visible {
  outline: 2px solid var(--focus-color); outline-offset: 1px; box-shadow: none;
}
@media screen and (min-width: 901px) {
  html body .site-header { display: flex; gap: 24px; flex-wrap: nowrap; }
  html body .site-header .brand { margin-right: auto; flex-shrink: 0; }
  html body .site-header .site-navigation { display: flex; gap: 20px; align-items: center; }
  html body .site-header .primary-navigation { gap: 20px; flex-wrap: nowrap; }
  html body .site-header .primary-navigation a { white-space: nowrap; }
  html body .site-header .language-switcher { position: static; flex-shrink: 0; }
  html body .site-header .site-local-status { display: none; }
}
@media screen and (min-width: 901px) and (max-width: 1180px) {
  html body .site-header { gap: 14px; }
  html body .site-header .site-navigation { gap: 14px; }
  html body .site-header .brand-descriptor { display: none; }
}
@media screen and (max-width: 900px) {
  html:root body[data-page] .site-header { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; }
  .site-appearance { grid-column: 2; grid-row: 1; }
  .site-header .site-appearance > summary { padding: 0 8px; font-size: 13px; }
  html body .site-header .site-nav-toggle { grid-column: 3; grid-row: 1; }
  html body .site-header .primary-navigation { justify-self: stretch; width: 100%; }
  html body .site-header .primary-navigation a { justify-content: flex-start; width: 100%; }
}
@media print { .site-appearance { display: none !important; } }