/* Dark mode: the parts that live in a stylesheet.
 *
 * Everything else is remapped from its inline style by theme-*.js. Only a
 * handful of colours here are declared in CSS rather than inline - the ground,
 * links, form controls, and the mobile nav - and those are the ones below.
 *
 * The ground is #161616, not pure black: true black makes the cards above it
 * glare, and every surface in the dark tables sits above this value. */
html[data-theme="dark"] body { background: #161616; }
html[data-theme="dark"] a { color: #6E9CE8; }
html[data-theme="dark"] a:hover { color: #8FBCF6; }
html[data-theme="dark"] ::selection { background: #2E63C8; color: #fff; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #1A1A1A; color: #E9ECF4; border-color: #313131;
}
html[data-theme="dark"] ::placeholder { color: #6C7484; }
/* Copy that declares no colour inherits the browser default: black, invisible
 * on a dark card. No rewrite can catch it - there is no colour in the markup
 * to rewrite - so dark mode supplies the inherited default itself. */
html[data-theme="dark"] body { color: #B4BCCC; }

/* Animated so the switch reads as a transition, not a flash - but only where
 * the reader has not asked otherwise, and only once the first theme has landed
 * or every page load would fade in its colour. */
@media (prefers-reduced-motion: no-preference) {
  html.v-theme-ready body, html.v-theme-ready body * { transition: background-color .25s ease, color .25s ease,
                             border-color .25s ease, fill .25s ease,
                             stroke .25s ease; }
}

/* The switch floats over the page, so the footer needs room beneath its last
 * line or the control covers the copyright. It occupies 56px of the bottom
 * right (22px clear of the edge, 34px tall) and the last row already sits 26px
 * above the page end, so 48px is the clearance plus a little air - not the
 * larger round number it is tempting to reach for, because every pixel here is
 * a deviation from the design on every page of the site.
 *
 * Applied in both themes: light mode carries the same control and should not
 * be the only one left unpadded. */
.v-foot { padding-bottom: 48px !important; }

#theme-toggle {
  position: fixed; bottom: 22px; right: 22px; z-index: 9999;
  display: flex; align-items: center; gap: 9px;
  font: 600 11.5px/1 'Chakra Petch', system-ui, sans-serif; letter-spacing: 2px;
  padding: 10px 14px; cursor: pointer;
  background: #fff; color: #16255E; border: 1px solid #C9D4EA;
  box-shadow: 0 1px 2px rgba(22,37,94,.06), 0 10px 26px rgba(22,37,94,.10);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
html[data-theme="dark"] #theme-toggle {
  background: #1A1A1A; color: #E9ECF4; border-color: #313131;
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.55);
}
#theme-toggle:focus-visible { outline: 2px solid #2E63C8; outline-offset: 2px; }
#theme-toggle .dot {
  width: 9px; height: 9px; background: #16255E; border-radius: 50%;
  box-shadow: inset -3px -1px 0 0 #fff;
}
html[data-theme="dark"] #theme-toggle .dot {
  background: #57A0F5; box-shadow: inset -3px -1px 0 0 #161616;
}

/* The mobile nav is the one part of the site whose colours live in a
 * stylesheet, so the walk cannot reach it - and it recolours the links inside
 * the panel while leaving the panel white: near-white text on #fff. Measured
 * before this rule, the MENU label sat at 1.21:1 and the open links at 1.10:1.
 * Scoped to the breakpoint it corrects, so the desktop nav is untouched. */
@media (max-width: 767px) {
  html[data-theme="dark"] .v-navtoggle {
    color: #E9ECF4;
    border-color: #313131;
  }
  html[data-theme="dark"] .v-nav {
    background: #1A1A1A;
    border-bottom-color: #2B2B2B;
  }
}