/* BBF shared polish layer — ADDITIVE ONLY.
   Deliberately does NOT redefine :root color tokens; each page keeps its own palette.
   This file only adds things every page was missing: a visible focus ring, touch feedback,
   reduced-motion respect, and dark-page scrollbars. Safe to link anywhere. */

/* --- Focus visibility (was absent on 13 of 15 pages — keyboard/switch users were blind) --- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #FF8A3D;
  outline-offset: 2px;
  border-radius: 8px;
}
/* Never leave a control with no focus affordance at all. */
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* --- Touch feedback: a pressed state so a tap on a phone visibly registers --- */
@media (hover: none) {
  :where(button, .btn, .pick, .step, .card, .nav a, a.btn):active {
    filter: brightness(1.12);
    transform: translateY(1px);
  }
}

/* --- Inputs: >=16px prevents iOS auto-zoom on focus; roomier for a fingertip --- */
:where(input, select, textarea) { font-size: max(16px, 1rem); }

/* --- Dark-page scrollbars (default light OS bar cuts a bright stripe on dark UI) --- */
@media (prefers-color-scheme: dark), (min-width: 0px) {
  html { scrollbar-color: #2a3444 transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #2a3444; border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: #3a465a; }
}

/* --- Respect reduced motion everywhere (was honored on only 2 of 15 pages) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Never let a page scroll sideways on a phone; wide content scrolls inside itself --- */
html, body { max-width: 100%; overflow-x: hidden; }
:where(table, pre) { max-width: 100%; overflow-x: auto; display: block; }