/* assets/accessibility.css
   Small accessibility & performance helpers:
   - visible skip link
   - focus outline styles
   - prefers-reduced-motion
   - mobile/fallback simplifications
*/

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 9999;
  font-weight: 700;
  text-decoration: none;
  transition: left 0.15s ease, top 0.15s ease;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  outline: 3px solid rgba(0,242,254,0.22);
  outline-offset: 2px;
}

/* Accessible focus styles for keyboard users */
:focus {
  outline: 3px solid rgba(0,242,254,0.20);
  outline-offset: 2px;
}
button:focus, a:focus {
  outline: 3px solid var(--neon-cyan, rgba(0,242,254,0.25));
  outline-offset: 3px;
}

/* #main-content is a large landmark wrapper (the skip-link target and where
   focus lands after the landing screen closes) - not a control, so it
   shouldn't get a full-page outline box. */
#main-content:focus {
  outline: none;
}

/* Reduced motion preference */
@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;
  }
}

/* Lower-power fallback for small screens: drop the backdrop blur only -
   that's the actual perf cost (compositing a blurred backdrop on every
   frame on a low-power phone GPU). The box-shadow and background this
   used to force here too were flattening every card to one hardcoded
   dark color+shadow with !important, on every touch device (hover:
   none) regardless of which theme was active - silently overriding
   each theme's own designed card look (e.g. Boot Hill's bone-white
   hero card, Boot Hill's hard offset shadow) since !important beats
   any theme selector's specificity. Each theme already sets its own
   backdrop-filter: none and an opaque background on these elements, so
   dropping blur here is enough; it doesn't need to also repaint them. */
@media (max-width: 520px), (hover: none) {
  .hero-stat-card,
  .sort-drawer,
  .ledger-card,
  .catalog-item-row,
  .sheet-modal,
  .bulk-tier-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}