/* Shared theme controls. The startup script sets data-theme before styles paint. */
.theme-control { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; color:var(--muted); font-family:var(--sans,Arial,sans-serif); font-size:11px; letter-spacing:normal; }
.theme-control[hidden] { display:none; }
.theme-control select { min-height:34px; max-width:155px; padding:5px 8px; border:1px solid var(--control-border,#81798f); border-radius:9px; color:var(--ink); background:var(--card,#171522); font:inherit; font-size:12px; cursor:pointer; }
.theme-control option { color:var(--ink); background:var(--card,#171522); }
.theme-control select:hover { border-color:var(--yellow); }
.theme-control select:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
/* Light uses dark green accents and warm white surfaces, not inverted images. */
html[data-theme="light"] {
  color-scheme:light;
  --paper:#f7f8f4;
  --paper-deep:#edf0e9;
  --ink:#1e2520;
  --muted:#4f5b50;
  --faint:#5c665c;
  --red:#9c3048;
  --red-dark:#84283c;
  --yellow:#365314;
  --line:#d3d6cd;
  --line-strong:#72796a;
  --control-border:#72796a;
  --card:#ffffff;
  --card-strong:#eef1e9;
  --card-soft:#e1e8d9;
  --cyan:#246950;
}
html[data-theme="dark"] { color-scheme:dark; }
html[data-theme="light"] body::before { background-image:linear-gradient(rgba(30,37,32,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(30,37,32,.035) 1px,transparent 1px); }
html[data-theme="light"] body::after { background:radial-gradient(circle,rgba(54,83,20,.05),transparent 68%); }
html[data-theme="light"] .page-wavy-background { opacity:.14; mix-blend-mode:multiply; }
html[data-theme="light"] .nav, html[data-theme="light"] .nav.is-scrolled { background:rgba(247,248,244,.97); box-shadow:0 8px 28px rgba(30,37,32,.06); }
html[data-theme="light"] .development-badge { color:var(--yellow); background:rgba(54,83,20,.06); border-color:rgba(54,83,20,.35); }
html[data-theme="light"] .button-solid { box-shadow:0 8px 24px rgba(54,83,20,.12); }
html[data-theme="light"] .button-solid:hover, html[data-theme="light"] .button-solid:focus-visible,
html[data-theme="light"] .nav .navlinks .nav-cta:hover, html[data-theme="light"] .nav .navlinks .nav-cta:focus-visible,
html[data-theme="light"] .back-to-top:hover { color:#fffdf8 !important; background:#294218; border-color:#294218; }
html[data-theme="light"] .button-plain:hover, html[data-theme="light"] .button-plain:focus-visible,
html[data-theme="light"] .copy-email:hover, html[data-theme="light"] .copy-email:focus-visible,
html[data-theme="light"] .menu-toggle:hover, html[data-theme="light"] .menu-toggle:focus-visible,
html[data-theme="light"] .modal-close:hover, html[data-theme="light"] .modal-close:focus-visible { color:var(--ink); background:var(--card-soft); border-color:var(--yellow); }
html[data-theme="light"] .button:disabled, html[data-theme="light"] .menu-toggle:disabled,
html[data-theme="light"] .modal-close:disabled { color:var(--faint); background:var(--card-strong); border-color:var(--control-border); opacity:1; }
/* Photographs keep their original dark text backing and light labels. */
html[data-theme="light"] .board-top, html[data-theme="light"] .board-caption span,
html[data-theme="light"] .hero-board::after,
html[data-theme="light"] .product-image::after { color:var(--white,#fffdf8); }
html[data-theme="light"] .legal-page { --faint:#5c665c; }
html[data-theme="light"] .legal-page .notice { background:rgba(54,83,20,.06); }
html[data-theme="light"] .legal-page .support-language button[aria-pressed="true"] { color:#fffdf8; background:var(--yellow); border-color:var(--yellow); }
html[data-theme="light"] .legal-page .support-language button:hover { color:var(--ink); background:var(--card-soft); border-color:var(--control-border); }
html[data-theme="light"] .legal-page .support-language button[aria-pressed="true"]:hover { color:#fffdf8; background:#294218; border-color:#294218; }
html[data-theme="light"] .legal-page .support-language button:focus-visible { outline-color:var(--red); }
html[data-theme="light"] .legal-page .support-language button:disabled { color:var(--faint); background:var(--card-strong); border-color:var(--control-border); }
@media(forced-colors:active) { .theme-control select { border-color:ButtonText; } }