/* ============================================================
   a11y.css  ·  Phase 8I bounded accessibility fixes
   Non-destructive additions. Loaded alongside page CSS.

   Addresses:
     A1 · Focus indicators           — global :focus-visible outline
     A5 · Modal focus-trap outline   — same visual treatment inside modals
     A7 · Minimum touch target       — mobile-safe minimum on small buttons
     A8 · Reduced-motion respect     — wrap adapter transitions in a query

   Palette anchors match the biotech-editorial system:
     --pp-focus-emerald: Deep Emerald  #3F6B5B
     --pp-focus-inverse: Soft White    #FAF9F6
   ============================================================ */

:root {
  --pp-focus-emerald: #3F6B5B;
  --pp-focus-inverse: #FAF9F6;
}

/* A1 · Visible focus indicator for keyboard users everywhere.
   `:focus-visible` respects the browser's keyboard-vs-pointer heuristic,
   so mouse clicks don't get an outline but Tab navigation does. */
*:focus-visible {
  outline: 2px solid var(--pp-focus-emerald);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Inputs and buttons on dark backgrounds get the inverse ring so they
   remain visible against Midnight Navy / Rich Charcoal. */
.dark *:focus-visible,
[data-theme="dark"] *:focus-visible {
  outline-color: var(--pp-focus-inverse);
}

/* A7 · Minimum touch target on small Studio buttons that are used on
   mobile (44×44 CSS pixels is the WCAG 2.5.5 minimum). Preserves
   visual footprint via padding + transparent background. */
@media (pointer: coarse) {
  .stu-btn.small,
  .stu-icon-btn,
  [data-a11y-touch-min] {
    min-width: 44px;
    min-height: 44px;
  }
}

/* A8 · Respect reduced-motion. Adapter overlays already animate
   opacity/transform. Wrap those transitions so they collapse when
   the user has requested reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .stu-modal-overlay,
  .stu-drawer,
  .peps-comm-preview,
  [data-a11y-animated] {
    transition: none !important;
    animation: none !important;
  }
}

/* Skip link — visible on focus only. Every page already has
   `<a class="skip" href="#main">`; give it a consistent appearance. */
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 1000;
  background: var(--pp-focus-emerald);
  color: var(--pp-focus-inverse);
  padding: 8px 12px;
  font: 500 12px/1 Manrope, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
}
.skip:focus-visible {
  left: 8px;
}