/* ============================================================================
   Dark mode: the same page in the dark, chosen by the phone's setting or
   the sun/moon switch in the header (features.js keeps the choice in
   localStorage "leeTheme"; a line in the <head> sets data-theme before the
   first paint, so nothing flashes white).

   The page's tokens do most of it: paper becomes a deep warm grey, ink
   stays ink, the ball stays the ball. The black bands (statement, contact,
   footer) stay black, now a step darker than the page. What follows is the
   handful of places that said "white" or "black" out loud.
   ========================================================================== */

:root[data-theme="dark"] {
  --bg: #141413;
  --bg-soft: #1b1b1a;
  --card: #191918;
  --accent: #f2f2f0;
  --text: #f2f2f0;
  --muted: #a6a6a2;
  --line: #2b2b29;
  color-scheme: dark;
}

/* --- Ink on light became light on dark: the buttons and bubbles that use
       the text colour as a fill need the page colour as their text. */
:root[data-theme="dark"] .btn-primary { color: var(--bg); }
:root[data-theme="dark"] .btn-primary:hover { background: #cfcfcc; }
:root[data-theme="dark"] .skip-link { color: var(--bg); }
:root[data-theme="dark"] .ask-launch { color: var(--bg); }
:root[data-theme="dark"] .ask-launch:hover, :root[data-theme="dark"] .ask.is-open .ask-launch { background: #cfcfcc; }
:root[data-theme="dark"] .ask-msg--visitor { color: var(--bg); }
:root[data-theme="dark"] .ask-send { color: var(--bg); }
:root[data-theme="dark"] .ask-send:hover, :root[data-theme="dark"] .ask-send:disabled { background: #cfcfcc; }
:root[data-theme="dark"] .matcher-row .btn:disabled { background: #cfcfcc; }
:root[data-theme="dark"] .header { background: rgba(20, 20, 19, .97); }
:root[data-theme="dark"] .lesson:hover { border-color: #3b3b39; }
:root[data-theme="dark"] .avatar { background: #2a2a28; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { border-color: #3b3b39; }
:root[data-theme="dark"] ::selection { background: var(--text); color: var(--bg); }

/* --- The logo is black ink on a transparent ground; in the dark it is
       the one thing that has to flip. The sound note and the booked bar
       stay ink with white text, as the bands do. */
:root[data-theme="dark"] .brand-logo { filter: invert(1); }

/* --- The lesson cards' pointer light was a white glow on a pale card; in
       the dark it is a faint one, and the ink edge-light becomes a pale one. */
:root[data-theme="dark"] .lesson::before { background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%); }
:root[data-theme="dark"] .lesson::after { background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 0%), rgba(242, 242, 240, .55), rgba(242, 242, 240, 0) 70%); }

/* --- Drawings that put ink on a cleared canvas keep a white plate under
       them, like the elbow figure's pictures already do. */
:root[data-theme="dark"] .tip-demo-stage { background: #fff; }
:root[data-theme="dark"] .elbow-art { background: #fff; }

/* --- The switch itself: a square like the menu button, the sun in the
       dark and the moon in the light. */
.theme-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text);
  cursor: pointer; padding: 0; transition: border-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.theme-toggle:hover { border-color: var(--text); }
.theme-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
@media (max-width: 760px) { .theme-toggle { display: none; } }   /* the phone's own setting decides */