/* Reinstate501 — shared polish primitives
   Loaded by every template after its inline design-system block.
   Theme-neutral: works on the dark app pages and the light /packet/full document. */

/* Text selection — brand accent, legible on both themes */
::selection { background: rgba(79, 110, 247, 0.32); color: #fff; }

/* Thin custom scrollbar (long /result and /packet/full pages) */
* {
  scrollbar-width: thin;
  scrollbar-color: #3a3a42 transparent;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #3a3a42;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #4a4a54; background-clip: padding-box; }

/* Keyboard affordance — links & buttons had hover but no focus ring.
   Mouse clicks stay clean (:focus-visible only fires for keyboard). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #4f6ef7;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Respect reduced-motion: kill the decorative transforms/transitions */
@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;
  }
}