/* Infinite Soldier — shared accessibility layer.
   Loaded last in <head> on every page so it can correct the per-page inline <style> blocks.
   Deliberately small: only the things that were failing site-wide.
   Added 2026-08-25 (expert-panel rotation). */

/* 1. Visible keyboard focus.
   Many pages set `outline:none` on inputs with no replacement, so someone tabbing to the
   email field could not see where they were. !important is what beats those rules without
   editing 27 files. Only shows for keyboard users — mouse clicks are unaffected. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #F4B740 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* 2. Form-field edges.
   --line is rgba(255,255,255,.08), which composites to ~1.17:1 on the dark background —
   the field is effectively invisible in sunlight or to older eyes. WCAG 1.4.11 wants 3:1;
   .34 gives ~4.4:1 and still reads as a quiet border on the cosmic theme. */
input,
textarea,
select {
  border-color: rgba(255, 255, 255, 0.34) !important;
}

/* 3. Skip link (styles ready; the anchor is added per page). */
.skip-to-main {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: #F4B740;
  color: #07060d;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-to-main:focus { left: 0; }

/* 4. Respect a stated preference for less motion on the two continuous animations
   that were still running regardless (the music page emblem and equaliser). */
@media (prefers-reduced-motion: reduce) {
  .emblem,
  .eq span {
    animation: none !important;
  }
}