/* Theme controls are shared by the English and French pages. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: transparent;
  color: var(--ink);
  font: 12px/1 var(--mono);
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.theme-toggle:hover { background: #e8effc; border-color: var(--accent); color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-icon { width: 16px; text-align: center; font-size: 18px; line-height: 1; }

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b1528;
  --ink: #e8f0ff;
  --muted: #afc1df;
  --line: #344867;
  --accent: #91b9ff;
  --theme-panel: #142540;
  --theme-panel-raised: #1a3153;
  --theme-panel-hover: #25446f;
}
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] ::selection { background: #557cc9; color: #fff; }
html[data-theme="dark"] header { background: #0b1528f2; }
html[data-theme="dark"] .theme-toggle:hover { background: var(--theme-panel-hover); }
html[data-theme="dark"] .theme-toggle[aria-pressed="true"] {
  background: var(--theme-panel-raised);
  border-color: #7196d5;
}
html[data-theme="dark"] .button,
html[data-theme="dark"] .kinetic-controls button,
html[data-theme="dark"] .language-buttons button { border-color: #56729b; }
html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .kinetic-controls button:hover { background: var(--theme-panel-hover); color: var(--ink); }
html[data-theme="dark"] .button.dark,
html[data-theme="dark"] .regatta-controls .regatta-row {
  background: #3155b9;
  border-color: #7095ec;
  color: #fff;
}
html[data-theme="dark"] .button.dark:hover,
html[data-theme="dark"] .regatta-controls .regatta-row:hover { background: #4168cb; color: #fff; }
html[data-theme="dark"] .language-buttons button[aria-pressed="true"] {
  background: #294c8c;
  border-color: #8eb6ff;
  color: #fff;
}
html[data-theme="dark"] .shortcut button { border-bottom-color: #7794c1; }
html[data-theme="dark"] .hero-bottom p,
html[data-theme="dark"] .project-description > p,
html[data-theme="dark"] .gridready-process p,
html[data-theme="dark"] .project-contribution p,
html[data-theme="dark"] .community-note p { color: var(--muted); }

/* Cards, project presentation, games, and the portrait. */
html[data-theme="dark"] .project-visual,
html[data-theme="dark"] .video-heading,
html[data-theme="dark"] .hobby-grid article,
html[data-theme="dark"] .regatta-layout,
html[data-theme="dark"] .project-contribution { background: var(--theme-panel); border-color: var(--line); }
html[data-theme="dark"] .project-contribution { border-left-color: var(--accent); }
html[data-theme="dark"] .visual-header,
html[data-theme="dark"] .visual-footer,
html[data-theme="dark"] .winner-badge { color: #bfd6ff; }
html[data-theme="dark"] .grid-line { background: #5c80bf; }
html[data-theme="dark"] .grid-cell {
  background: #1d3454;
  border-color: #5978a2;
  box-shadow: 3px 3px 0 #0a1629;
}
html[data-theme="dark"] .grid-cell span,
html[data-theme="dark"] .grid-cell small { color: #bbd0ef; }
html[data-theme="dark"] .winner-ribbon {
  background: #173660;
  border-color: #597ab1;
  color: #c3d8ff;
}
html[data-theme="dark"] .winner-ribbon:hover { background: #214574; color: #fff; }
html[data-theme="dark"] .number-grid button {
  background: var(--theme-panel-raised);
  border-color: #6c89b2;
  color: var(--ink);
}
html[data-theme="dark"] .number-grid button:hover:not([aria-disabled="true"]) { background: var(--theme-panel-hover); }
html[data-theme="dark"] .number-grid button.correct { background: #204f6d; border-color: #86d6ec; color: #e8faff; }
html[data-theme="dark"] .number-grid button.incorrect { background: #5b2e33; border-color: #da8b83; color: #ffe1dd; }
html[data-theme="dark"] .hobby-grid .button { background: var(--theme-panel-raised); }
html[data-theme="dark"] .stroke-beats span { border-color: #6b88b5; }
html[data-theme="dark"] .stroke-beats .active { color: #fff; }
html[data-theme="dark"] .tool-skill-grid article,
html[data-theme="dark"] .membership-grid article,
html[data-theme="dark"] .community-note { background: #142541; }
html[data-theme="dark"] .about-portrait {
  background: linear-gradient(145deg, #1a3153, #101f36);
  box-shadow: 12px 14px 0 #030a163d;
}
html[data-theme="dark"] .about-portrait:hover { box-shadow: 12px 17px 0 #030a1666; }
html[data-theme="dark"] .project-story-link,
html[data-theme="dark"] .choice-note,
html[data-theme="dark"] .scroll-band p { color: var(--accent); }
html[data-theme="dark"] .hobby-motion { border-color: var(--line); }
html[data-theme="dark"] .hobby-motion span { color: #a9c4f4; }
html[data-theme="dark"] .timeline::before { background: #536f9c; }
html[data-theme="dark"] .regatta-legend span + span i { background: #a6badf; }
html[data-theme="dark"] .timing-meter { background: #263c5c; }
html[data-theme="dark"] .timing-zone { background: #7098e8; border-color: #b9d0ff; }
html[data-theme="dark"] .timing-marker { background: #fff; }
html[data-theme="dark"] .regatta-controls .regatta-row:disabled {
  background: #354861;
  border-color: #354861;
  color: #b2c0d4;
}

/* Interactive diagrams use a darker surface, while their blue strokes stay visible. */
html[data-theme="dark"] .kinetic-surface {
  background: radial-gradient(ellipse at 50% 45%, #1b365d 0%, #101e35 75%);
  border-color: #526e9c;
}
html[data-theme="dark"] .kinetic-mesh .kinetic-surface { background: linear-gradient(140deg, #12223b, #1a3357); }
html[data-theme="dark"] .kinetic-orbit .kinetic-surface { background: #142947; }
html[data-theme="dark"] .kinetic-atlas .kinetic-surface {
  background: radial-gradient(circle at 53% 45%, #1d4183 0%, #112b59 43%, #081a37 100%);
  border-color: #7798d8;
}
html[data-theme="dark"] .surface-caption { color: #afc8ee; }
html[data-theme="dark"] .kinetic-controls button[aria-pressed="true"],
html[data-theme="dark"] .motion-switch[aria-pressed="true"] { background: #244878; border-color: #7fa8e8; }
html[data-theme="dark"] .kinetic-panel:not(.kinetic-atlas) canvas,
html[data-theme="dark"] .mini-wave canvas,
html[data-theme="dark"] .mini-gyro canvas,
html[data-theme="dark"] .energy-flow canvas,
html[data-theme="dark"] .hobby-motion canvas,
html[data-theme="dark"] .lab canvas,
html[data-theme="dark"] .regatta-water canvas { filter: brightness(1.55) saturate(1.08); }

/* The Paris–Hong Kong story remains the visual centre in either theme. */
html[data-theme="dark"] .story-journey {
  background: linear-gradient(150deg, #101f38 0%, #0d192e 55%, #152746 100%);
  border-color: var(--line);
}
html[data-theme="dark"] .story-heading .eyebrow,
html[data-theme="dark"] .decision-head .eyebrow,
html[data-theme="dark"] .story-step .eyebrow { color: var(--accent); }
html[data-theme="dark"] .story-heading h2,
html[data-theme="dark"] .story-step h3,
html[data-theme="dark"] .decision-head h2,
html[data-theme="dark"] .decision-stop strong,
html[data-theme="dark"] .decision-prose p:first-child { color: var(--ink); }
html[data-theme="dark"] .story-step p,
html[data-theme="dark"] .story-step .story-aside,
html[data-theme="dark"] .decision-intro,
html[data-theme="dark"] .decision-prose p,
html[data-theme="dark"] .decision-stop small,
html[data-theme="dark"] .decision-stop .eyebrow,
html[data-theme="dark"] .decision-source { color: var(--muted); }
html[data-theme="dark"] .story-enhanced .story-word { color: #e8f0ff5c; }
html[data-theme="dark"] .story-enhanced .story-word.is-lit { color: var(--ink); }
html[data-theme="dark"] .story-visual {
  background: radial-gradient(circle at 50% 50%, #243c64 0%, #182d4e 60%, #10213b 100%);
  border-color: #5a7ab0;
  box-shadow: inset 0 0 0 1px #8caeef2e, 0 26px 72px #020b1a99;
}
html[data-theme="dark"] .story-visual::before,
html[data-theme="dark"] .story-visual::after { border-color: #7fa5d955; }
html[data-theme="dark"] .story-path-base { stroke: #7392c6; }
html[data-theme="dark"] .story-path-live { stroke: #a5c4ff; }
html[data-theme="dark"] .story-traveller { fill: #8db5ff; stroke: #f4f9ff; }
html[data-theme="dark"] .story-point { fill: #142a4d; stroke: #a5c4ff; }
html[data-theme="dark"] .story-point.is-active { fill: #91b9ff; }
html[data-theme="dark"] .story-visual-label,
html[data-theme="dark"] .story-progress { color: #d5e4ff; }
html[data-theme="dark"] .story-progress-track { background: #4b6895; }
html[data-theme="dark"] .story-progress-track i { background: var(--accent); }
html[data-theme="dark"] .decision-story { border-color: var(--line); }
html[data-theme="dark"] .decision-head h2 em,
html[data-theme="dark"] .decision-stop-chosen strong { color: var(--accent); }
html[data-theme="dark"] .decision-intro { border-left-color: var(--accent); }
html[data-theme="dark"] .decision-route {
  background: linear-gradient(145deg, #192d4c, #10213a);
  border-color: #4c6c9d;
  box-shadow: 0 18px 50px #03091466;
}
html[data-theme="dark"] .decision-divider { background: #8bb6ff; }
html[data-theme="dark"] .decision-quote { background: #23477e; color: #fff; }
html[data-theme="dark"] .decision-source a:hover { color: var(--accent); }
html[data-theme="dark"] .site-language a { color: #c2d4f1; }
html[data-theme="dark"] .site-language a[aria-current="page"] { background: #244778; color: #fff; }
html[data-theme="dark"] .site-language a:hover { background: #2d5286; color: #fff; }

/* Keep modal dialogs and the mobile menu in the same palette. */
html[data-theme="dark"] dialog { background: #142540; color: var(--ink); box-shadow: 0 30px 90px #020814c9; }
html[data-theme="dark"] dialog::backdrop { background: #020814bf; }
html[data-theme="dark"] .skip { background: #d3e4ff; color: #0b1528; }
@media (max-width: 900px) {
  nav .theme-toggle { grid-column: 1 / -1; width: 100%; min-height: 44px; margin-top: 5px; }
  html[data-theme="dark"] nav { background: #101e34; box-shadow: 0 16px 34px #02081499; }
  html[data-theme="dark"] nav a:hover { background: #263e64; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}
@media print {
  .theme-toggle { display: none !important; }
  html[data-theme="dark"] { color-scheme: light; --paper: #fff; --ink: #152b55; --muted: #586a86; --line: #d5deee; --accent: #2c5dea; }
  html[data-theme="dark"] body { background: #fff !important; color: #152b55 !important; }
  html[data-theme="dark"] body * { background: transparent !important; color: #152b55 !important; box-shadow: none !important; text-shadow: none !important; }
}