/* Dark mode. Applied when <html data-theme="dark">. The whole page is colour-inverted and
   hue-corrected (so blues stay blue), then pictures and embeds are inverted back so they look normal. */
html[data-theme="dark"] { background: #fff; filter: invert(1) hue-rotate(180deg); color-scheme: dark; }
html[data-theme="dark"] img, html[data-theme="dark"] picture, html[data-theme="dark"] video,
html[data-theme="dark"] iframe, html[data-theme="dark"] canvas, html[data-theme="dark"] .qr,
html[data-theme="dark"] [data-keep-colors] { filter: invert(1) hue-rotate(180deg); }
/* soften: pure inverted white is #000, use a gentle charcoal instead */
html[data-theme="dark"] body { background-color: #f3f5f8; }
html[data-theme="dark"] ::selection { background: #7fb6e0; }

/* the toggle button */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 6px; border-radius: 50%; border: 0; cursor: pointer; background: #E3F2FD; color: #062F4D; flex: none; transition: transform .2s; }
.theme-btn:hover { transform: scale(1.06); }
.theme-btn:focus-visible { outline: 2px solid #094570; outline-offset: 2px; }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .t-sun { display: none; }
html[data-theme="dark"] .theme-btn .t-sun { display: block; }
html[data-theme="dark"] .theme-btn .t-moon { display: none; }
.theme-btn.theme-float { position: fixed; z-index: 9999; right: 14px; bottom: 14px; margin: 0; width: 44px; height: 44px; background: #fff; box-shadow: 0 0 0 1px #D5E0E8, 0 10px 24px -10px rgba(6,47,77,.45); }
html[dir="rtl"] .theme-btn.theme-float { right: auto; left: 14px; }
@media print { html[data-theme="dark"] { filter: none; } .theme-btn { display: none; } }
/* blocks that are deliberately coloured keep their original look */
html[data-theme="dark"] .ja-cover { filter: invert(1) hue-rotate(180deg); }

/* keep the menu button visible on phones: the pill is narrow, so the extras shrink */
@media (max-width: 600px) {
  .h-pill .theme-btn { width: 34px; height: 34px; margin: 0 2px 0 auto; }
  .h-pill .theme-btn svg { width: 16px; height: 16px; }
  .h-pill > .lang { margin-left: 0; }
  .h-pill > .lang .lang-btn { padding: 0 10px; min-width: 0; }
  .h-pill > .lang .lang-btn svg + span, .h-pill > .lang .lang-btn .lang-cur { font-size: 12px; }
  .h-pill .h-brand { font-size: 15px; min-width: 0; white-space: nowrap; }
  .h-pill .h-tog { flex: none; }
}
@media (max-width: 380px) { .h-pill .h-brand { font-size: 14px; gap: 6px; } .h-pill > .lang .lang-btn .lang-cur { display: none; } }
@media (max-width: 345px) { .h-pill .h-brand { font-size: 12.5px; gap: 5px; } .h-pill .h-brand svg { width: 16px; height: 20px; } .h-pill .theme-btn { width: 30px; height: 30px; } }
/* mid-width screens: keep the nav links on one line now that the theme button sits in the bar */
@media (min-width: 901px) and (max-width: 1240px) { .h-pill .h-links a, .h-pill .h-links button { white-space: nowrap; font-size: 13.5px; } .h-pill .h-links { gap: 12px; } .h-pill .h-cta-btn, .h-pill .btn { padding-left: 16px; padding-right: 16px; } }