/* Dark mode: the hand-picked part. Loads after dark-auto.css (made by tools/build_dark_css.php) and wins.
   The look is chosen by the <html data-theme="..."> attribute: the script at the top of
   partials/header.php sets it from the visitor's own choice (the Dark/Light button in the top strip),
   or, when they have never pressed it, from their computer's own light/dark setting. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1520;
  --card: #162030;
  --ink: #e3e9f3;
  --muted: #9ba9be;
  --line: #2a364a;
  --navy: #dce6f6;
  --accent: #82abff;
  --accent-strong: #a3c0ff;
  --accent-soft: #1c2b48;
  --row: #1c2739;
  --thead: #1a2435;
  --danger: #f08b8b;
  --green: #6fcf98;
  --amber-bg: #2a2313;
  --amber-line: #4e401d;
  --amber-ink: #e6c97f;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-hover: 0 12px 28px rgba(0,0,0,.5);
}

/* the strips that are navy in the light look stay a deep navy, a step darker than the cards */
:root[data-theme="dark"] .top-strip { background: #0a1019; border-bottom: 1px solid #1f2a3c; }

/* form fields */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  color: var(--ink);
}
:root[data-theme="dark"] ::placeholder { color: #7d8ba1; }

/* photographs: a touch less glare at night */
:root[data-theme="dark"] img { filter: brightness(.94); }

/* ---------- the Dark / Light button in the top strip ---------- */
.theme-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: 99px;
  color: #c6d2e5; font: inherit; font-size: .8rem; font-weight: 600;
  padding: .12rem .6rem .12rem .5rem; cursor: pointer; line-height: 1.4;
}
.theme-toggle:hover { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); }
.theme-toggle:focus-visible { outline: 2px solid #e7c873; outline-offset: 2px; }
.theme-toggle svg { width: 14px; height: 14px; flex: none; }
.theme-toggle .tt-sun, :root[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .tt-sun { display: inline; }
.theme-toggle .tt-label::before { content: "Dark"; }
:root[data-theme="dark"] .theme-toggle .tt-label::before { content: "Light"; }

/* on phones the top strip scrolls sideways; the button stays pinned at its right-hand end */
@media (max-width: 560px) {
  .theme-toggle { position: sticky; right: 0; order: 99; background: var(--navy-strip, #1e2f4d);
    box-shadow: -14px 0 10px -4px var(--navy-strip, #1e2f4d); }
  :root[data-theme="dark"] .theme-toggle { --navy-strip: #0a1019; }
  .theme-toggle .tt-label { display: none; }
  .theme-toggle { padding: .2rem .45rem; }
}