/* ==========================================================================
   OgbonMath — Accessibility Polish
   --------------------------------------------------------------------------
   Load AFTER all other design/*.css files so its rules can override earlier
   weak focus rules without relying on !important.

   Fixes shipped in this file:
     - Skip link ("Skip to main content") — WCAG 2.4.1 Bypass Blocks
     - Stronger base :focus-visible ring (replaces weak styles.css rule)
     - Global reduced-motion override (tames the 22 modules that never
       opted in to prefers-reduced-motion)
     - Account-menu-item focus ring (was subtle bg tint only)

   Pair this with design/focus-trap.js for full keyboard/screen-reader
   modal coverage.
   ========================================================================== */

/* ==========================================================================
   Skip link
   ==========================================================================
   Hidden off-screen until keyboard-focused. Common pattern: position the
   link absolutely at top:-40px so sighted users never see it, but when
   it receives focus (first Tab on page load), transform it into view.
*/
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--sp-3);
  z-index: var(--z-tooltip, 800);
  padding: 10px 18px;
  background: var(--ac);
  color: var(--ac-tx, #fff);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--sp-3);
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

/* ==========================================================================
   Stronger :focus-visible ring for interactive elements
   ==========================================================================
   styles.css has a weak base rule (outline:none + border-color only).
   We add a consistent 3px ring via box-shadow using the existing
   --ac-ring token (a soft terracotta halo). This fires only on keyboard
   focus, so mouse users aren't visually polluted.

   Scope: buttons, links, tabs, summary, and custom [role] interactive
   elements that aren't already covered by design-system rules.
*/
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="link"]:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Account-menu-item: was just bg tint. Give it an actual ring. */
.account-menu-item:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: -2px;
  background: var(--hover-bg);
}

/* ==========================================================================
   Global reduced-motion override
   ==========================================================================
   Each design/*.css file should ideally include its own reduced-motion
   block, but 22/28 don't. As a safety net, we aggressively neutralize
   motion for users who've expressed the preference.

   Strategy: use !important to override any CSS that sets transition /
   animation explicitly. This is the one legitimate use of !important —
   user preference must win over author style.

   We DON'T zero-out duration, because that can introduce subtle
   layout-jumping bugs; instead we clamp to 0.01ms. The motion becomes
   imperceptible but event ordering is preserved.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Specific components that rely on transform for layout should just
     jump to final state instead of animating. The wildcard above covers
     most, but these are belt-and-braces for the biggest offenders. */
  .celebrate-confetti,
  .celebrate-confetti-piece {
    display: none !important;
  }
}

/* ==========================================================================
   Screen-reader-only utility
   ==========================================================================
   For text that should be announced by assistive tech but not visually
   rendered. Use sparingly — aria-label is usually better.
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   High-contrast mode polish (Windows)
   ==========================================================================
   In forced-colors mode (Windows high-contrast, some mobile modes), our
   color-based focus indicators may disappear. Force outline back on.
*/
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px !important;
  }
  .skip-link {
    border: 2px solid CanvasText;
  }
}