/* ==========================================================================
   Accessibility layer (WCAG 2.1 AA baseline)
   --------------------------------------------------------------------------
   Loaded last and intentionally UNLAYERED so it reliably beats Tailwind's
   layered utility resets (e.g. `outline-none`), guaranteeing a visible
   keyboard focus indicator everywhere. Component-scoped :focus-visible rules
   still win — their [data-v-*] attribute raises specificity — so any bespoke
   focus styling is preserved.
   ========================================================================== */

/* 2.4.7 Focus Visible — a strong, token-aware ring for keyboard users only.
   Pointer/mouse users never see it (:focus-visible), so it adds no noise. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="switch"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 2px solid var(--ring, var(--primary));
  outline-offset: 2px;
}

/* 2.4.1 Bypass Blocks — let keyboard users jump straight to main content.
   Visually hidden until it receives focus, then slides into view top-left. */
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  transform: translateY(-150%);
  padding: 0.55rem 0.9rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius, 0.5rem);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--primary-foreground);
  outline-offset: 2px;
}

/* Skipping to the main region shouldn't draw a ring around the whole page. */
#main-content:focus { outline: none; }

/* 2.3.3 — honour prefers-reduced-motion as a global safety net layered on top
   of the per-component handling the style guide already mandates.
   Deliberate exception: the public landing page (.homepage-shell) is excluded —
   it is a marketing demo surface whose product-tour, logo marquee, and hero
   animations must play even when the OS reports reduced motion (Windows
   "animation effects off" was rendering the demo dead for its audience; small,
   contained motion only — no parallax or viewport-scale movement). The
   authenticated app keeps the full safety net. */
@media (prefers-reduced-motion: reduce) {
  :not(.homepage-shell, .homepage-shell *),
  :not(.homepage-shell, .homepage-shell *)::before,
  :not(.homepage-shell, .homepage-shell *)::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}