/* =========================================================================
   Accessibility — skip link + reduced-motion handling
   ========================================================================= */

/* Skip link: hidden until keyboard focus, then slides into view at the top
   so users can jump past the topbar+subnav to the main content. Standard
   "visually hidden until focused" pattern with explicit, visible focus
   styling (large enough to read, in the brand accent). */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--acc);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  transform: translateY(-150%);
  transition: transform 120ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* Respect OS-level reduced-motion preference. Users with vestibular
   disorders, motion sensitivity, or low-spec hardware set this — when on,
   we kill every animation/transition rather than asking each rule to
   special-case it. The 0.01ms (not 0) preserves Promise-based animation
   chains that wait for transitionend events. */
@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;
  }
}

/* Catch-all focus ring for keyboard users.

   Previously only a handful of components (settings switches, menu
   segment buttons, the task-list select) had :focus-visible rules; the
   ~100+ other interactive elements fell through to the browser default
   (which Chrome 122+ shows as a thin black ring — but only sometimes,
   depending on whether the click also lit it up). Keyboard users
   tab-navigating the app had to guess where focus was.

   This rule fires only on keyboard focus (not pointer click) so it
   doesn't add noise for mouse users. Component-specific :focus-visible
   rules win on specificity, so existing styling is preserved. Targets
   the same set of selectors as the implicit a11y tree:
   button, a, input/select/textarea, contenteditable, and ARIA-typed
   interactive roles. */
:where(
  button,
  a,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"]),
  [role="button"],
  [role="link"],
  [role="switch"],
  [role="checkbox"],
  [role="radio"],
  [role="tab"],
  [role="menuitem"],
  [role="option"]
):focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}