/* Shared website manual theme. Screen-only overrides preserve the print sheets.
   Keep screenshot geometry and viewer behaviour in each manual's base styles. */
@media screen {
  :root {
    color-scheme: dark;
    --page: var(--site-paper);
    --surface: var(--site-card);
    --surface-soft: var(--site-soft);
    --surface-2: var(--site-soft);
    --surface-3: var(--site-soft);
    --ink: var(--site-ink);
    --text: var(--site-ink);
    --muted: var(--site-muted);
    --line: var(--site-line);
    --line-strong: var(--site-line);
    --brand: var(--site-teal);
    --brand-dark: var(--site-teal-hover);
    --cyan: var(--site-teal);
    --blue: var(--site-teal);
    --green: #7bd3a5;
    --yellow: #f2c981;
    --red: #f0a6ae;
    --shadow: var(--site-shadow);
  }

  body {
    color: var(--ink);
    background: var(--page);
    font-family: var(--site-font);
  }

  a { color: var(--brand); }
  a:hover { color: var(--site-teal-hover); }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  [tabindex]:focus-visible {
    outline-color: var(--site-mint);
  }

  .skip,
  .skip-link {
    color: var(--site-action-ink);
    background: var(--site-action);
  }

  body > header,
  .site-header {
    color: var(--site-on-dark);
    background: var(--site-hero);
    border-bottom-color: var(--site-line);
  }
  .site-header { background: var(--site-navy); }

  body > header h1,
  body > header .brand,
  body > header .brand:hover {
    color: var(--site-on-dark);
  }

  body > header p,
  .hero > p,
  .brand small { color: var(--site-muted-on-dark); }

  header .eyebrow,
  .hero .eyebrow { color: var(--site-mint); }

  .toolbar a,
  .toolbar button,
  .header-actions a,
  .header-actions button,
  .hero-meta span {
    color: var(--site-on-dark);
    background: var(--site-card);
    border-color: var(--site-line);
  }

  .toolbar a:hover,
  .toolbar button:hover,
  .header-actions a:hover,
  .header-actions button:hover {
    color: var(--site-action-ink);
    background: var(--site-action);
    border-color: var(--site-teal);
  }

  .layout > aside,
  .sidebar-inner {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--site-shadow);
    scrollbar-color: var(--site-line) transparent;
  }

  .product-label,
  .sidebar-heading strong,
  aside label { color: var(--site-ink); }

  aside input,
  .search-box input {
    color: var(--ink);
    background: var(--site-soft);
    border-color: var(--line-strong);
  }

  aside input::placeholder,
  .search-box input::placeholder { color: var(--site-muted); }

  aside input:focus,
  .search-box input:focus { border-color: var(--brand); }

  .search-box kbd {
    color: var(--muted);
    background: var(--site-soft);
    border-color: var(--line-strong);
  }

  .sidebar-toc a,
  #toc > a { color: var(--site-muted); }

  .sidebar-toc a:hover,
  .sidebar-toc a[aria-current="location"],
  #toc > a:hover,
  .search-results a:hover {
    color: var(--site-teal-hover);
    background: var(--site-soft);
  }

  .sidebar-toc a[aria-current="location"]::before { background: var(--brand); }
  .sidebar-toc .toc-section,
  #toc > a.sub,
  .sidebar-note,
  .search-status,
  .search-results small,
  .small { color: var(--muted); }

  .search-results a {
    color: var(--ink);
    background: var(--site-soft);
  }
  .search-results strong { color: inherit; }

  .nav-close {
    color: var(--ink);
    background: var(--site-soft);
    border-color: var(--line-strong);
  }

  .mobile-nav-toggle {
    color: var(--site-action-ink);
    background: var(--site-action);
    box-shadow: var(--site-shadow);
  }

  .nav-backdrop { background: rgba(8, 25, 42, 0.62); }

  .layout > main,
  .front-matter,
  .generated-toc-card,
  .chapter {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow);
  }

  main h2,
  .generated-toc-card > h2,
  .chapter > h2 { color: var(--site-ink); }
  main h3 { color: var(--site-mint); }
  main h4,
  main strong { color: var(--site-ink); }

  .document-toc {
    background: var(--site-soft);
    border-color: var(--line);
  }
  .document-toc a { color: var(--site-muted); }
  .document-toc a:hover {
    color: var(--site-teal-hover);
    background: var(--site-soft);
  }

  .reading-note,
  .quality-note,
  .note,
  .manual-note {
    color: var(--site-ink);
    background: var(--site-soft);
    border-color: var(--site-line);
    box-shadow: none;
  }
  .note,
  .manual-note { border-left-color: var(--brand); }
  .reading-note strong { color: var(--brand-dark); }
  .reading-note p { color: var(--site-muted); }
  .manual-note > span {
    color: var(--site-action-ink);
    background: var(--site-action);
  }

  .auth-details section {
    color: var(--site-ink);
    background: var(--site-soft);
    border-color: var(--site-line);
  }
  .auth-details h4 { color: var(--site-mint); }

  code,
  pre {
    color: var(--site-teal-hover);
    background: var(--site-soft);
    border-color: var(--site-line);
  }
  kbd {
    color: var(--site-ink);
    background: var(--site-paper);
    border-color: var(--site-line);
  }
  .procedure > li::marker { color: var(--brand); }

  .table-scroll,
  th,
  td { border-color: var(--site-line); }
  table {
    color: var(--ink);
    background: var(--site-soft);
  }
  th {
    color: var(--site-ink);
    background: var(--site-card);
  }
  tr:nth-child(even),
  tbody tr:nth-child(even) { background: var(--site-paper); }

  figure,
  .manual-figure,
  .manual-diagram {
    background: var(--site-soft);
    border-color: var(--site-line);
    box-shadow: none;
  }
  figure .figure-open,
  .figure-open { background: var(--site-paper); }
  figure .figure-open:hover {
    box-shadow: 0 0 0 2px var(--site-teal), var(--site-shadow);
  }
  .figure-open::after {
    color: var(--site-on-dark);
    background: var(--site-navy);
    border-color: var(--site-line);
  }
  figcaption,
  .manual-figure figcaption,
  .manual-diagram figcaption,
  .manual-demo-photo figcaption { color: var(--site-ink); }
  .figure-caption-text,
  .manual-diagram::before { color: var(--site-muted); }

  /* Theme generated diagrams only; preserve their geometry and original markup. */
  .manual-diagram rect {
    fill: var(--site-soft);
    stroke: var(--site-line);
  }
  .manual-diagram rect[fill="#eaf3ff"] { fill: var(--site-card); }
  .manual-diagram rect[fill="#d8f8f0"] { fill: var(--site-action); }
  .manual-diagram text { fill: var(--site-ink); }
  .manual-diagram path { stroke: var(--site-mint); }
  .figure-meta,
  .manual-figure .figure-meta,
  .figure-source,
  .figure-resolution,
  .figure-context { color: var(--muted); }
  .figure-sensitive-note { color: var(--yellow); }
  .figure-steps b {
    color: var(--site-action-ink);
    background: var(--site-action);
  }
  .raw-link {
    color: var(--brand-dark);
    background: var(--site-soft);
    border-color: var(--site-line);
  }
  .raw-link:hover {
    color: var(--site-teal-hover);
    background: var(--site-soft);
    border-color: var(--site-teal);
  }

  .manual-footer,
  main > footer { color: var(--muted); }

  /* Viewer chrome shares the dark theme; screenshot pixels remain untouched. */
  dialog#image-dialog,
  .image-viewer {
    color: var(--site-ink);
    background: var(--site-hero);
    border-color: var(--site-line);
    box-shadow: 0 30px 90px rgba(5, 17, 29, 0.5);
  }
  dialog#image-dialog::backdrop,
  .image-viewer::backdrop { background: rgba(5, 17, 29, 0.86); }
  .viewer-toolbar,
  .viewer-hint,
  .viewer-help {
    color: var(--site-muted);
    background: var(--site-card);
    border-color: var(--site-line);
  }
  .viewer-heading strong,
  #viewer-title { color: var(--site-on-dark); }
  .viewer-kicker { color: var(--site-mint); }
  .viewer-meta,
  #viewer-meta { color: var(--site-muted); }
  .viewer-actions button,
  .viewer-actions a {
    color: var(--site-ink);
    background: var(--site-soft);
    border-color: var(--site-line);
  }
  .viewer-actions button:hover,
  .viewer-actions a:hover {
    color: var(--site-action-ink);
    background: var(--site-action-hover);
    border-color: var(--site-mint);
  }
  .viewer-actions button[aria-pressed="true"],
  .viewer-actions #zoom-image[aria-pressed="true"] {
    color: var(--site-action-ink);
    background: var(--site-action);
    border-color: var(--site-teal);
  }
  .viewer-actions .viewer-close {
    color: var(--site-on-dark);
    background: #823e49;
    border-color: #bc7884;
  }
  .viewer-help kbd,
  .viewer-hint kbd {
    color: var(--site-ink);
    background: var(--site-soft);
    border-color: var(--site-line);
  }
}