/* =================================================================
   CodeMetrix shared accessibility stylesheet.

   Loaded on every page after tailwind.css. Keep this small and
   global — anything page-specific belongs in that page's own <style>.

   Why each rule is here:
     - .skip-link  : keyboard users can jump past the nav.
     - :focus-visible : every interactive element shows a clear ring
       when reached by keyboard, but mouse-clicks don't add visual
       noise. Many pages strip outlines via Tailwind `outline-none`
       — this restores accessibility without losing the visual choice.
     - .sr-only    : visually-hidden text for screen readers (WCAG
       2.4.6: meaningful labels).
     - prefers-reduced-motion : respects users with vestibular
       disorders. Disables `details/summary` chevron rotation, the
       `gradient-bg` shimmer, and any other transition-based motion.
     - .text-slate-400 darken : the original Tailwind shade fails
       WCAG AA on white at 2.56:1. Bumping to #64748b (slate-500
       equivalent) hits 4.85:1 with no perceptual difference for
       sighted users.
   ================================================================= */

/* ------------- Skip link ------------- */
/* Hidden off-screen until focused. Drops in at top-left when keyboard
   users tab into the page, and jumps to the main content landmark. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: 0.75rem 1rem;
  background: #1e3a8a;       /* brand-700 */
  color: #ffffff;
  font: 600 0.875rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  border-bottom-right-radius: 0.5rem;
  transform: translateY(-150%);
  transition: transform 120ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #2563eb;  /* brand-500 */
  outline-offset: 2px;
}

/* ------------- Visible focus rings ------------- */
/* Most pages use `outline-none` Tailwind classes for visual style.
   This restores keyboard-only focus indication without affecting
   mouse interactions. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Inputs already get a ring via Tailwind focus utilities. We only
   add the outline ring on top, which is fine — both can coexist. */

/* ------------- Screen-reader-only utility ------------- */
/* Tailwind 3 has its own `.sr-only` but we re-define here so the
   class is available even before Tailwind loads (defensive). */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------- Reduced motion ------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* The `gradient-bg` on index.html is decorative; static gradient
     stays, but any subtle motion (none today, but defensive) is killed. */
}

/* ------------- Contrast: slate-400 captions ------------- */
/* Used for timestamps, "Loading…" placeholders, footnotes. Original
   #94a3b8 fails AA on white. Override to slate-500 #64748b (AA pass). */
.text-slate-400 {
  color: #64748b !important;
}

/* ------------- Form helpers ------------- */
/* Required-field star — purely visual. */
.required-mark {
  color: #dc2626;
  margin-left: 2px;
}