/* ==========================================================================
   base.css — reset, document defaults, typography, focus, utilities.
   `.hidden` is the single mechanism the router (and most of the UI) uses to
   show/hide things — it must stay `display:none !important`.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--rs-font-sans);
  font-size: var(--rs-fs-md);
  line-height: var(--rs-lh);
  background: var(--rs-page);
  color: var(--rs-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The one show/hide primitive. Used by the router, toasts, staging lists,
   progress bars, retry buttons, editor sections and the list filters. */
.hidden { display: none !important; }

/* The inline SVG sprite element itself is never rendered. */
.sprite { display: none; }

/* ------------------------------ typography ------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--rs-font-brand);
  color: var(--rs-navy);
  line-height: var(--rs-lh-tight);
  margin: 0;
}
h1 { font-size: var(--rs-fs-h1); font-weight: 700; }
h2 { font-size: var(--rs-fs-h2); font-weight: 700; }
h3 { font-size: var(--rs-fs-h3); font-weight: 600; }

p { margin: 0 0 var(--rs-3); }

a { color: var(--rs-cyan-deep); }

code, kbd, samp { font-family: var(--rs-font-mono); }

.lead { font-size: var(--rs-fs-lg); color: var(--rs-ink-3); margin: 6px 0 0; max-width: 68ch; }
.muted { color: var(--rs-ink-3); }
.small { font-size: var(--rs-fs-sm); }
.error { color: var(--rs-bad); }
.spacer { flex: 1; }

/* --------------------------------- icons -------------------------------- */

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------- focus -------------------------------- */
/* The old stylesheet used `outline:none` with a border-colour change only,
   which left keyboard users with almost no focus signal. Mouse users keep a
   clean look via :focus-visible; keyboard users get the cyan ring. */

:where(a, button, input, select, textarea, [tabindex]):focus { outline: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--rs-focus-ring);
  border-radius: var(--rs-r-md);
}

/* ------------------------------- utilities ------------------------------ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Custom scrollbars, kept subtle and on-brand. */
* { scrollbar-width: thin; scrollbar-color: var(--rs-p300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rs-p300);
  border: 3px solid transparent;
  border-radius: var(--rs-r-pill);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--rs-p400); background-clip: content-box; }

/* Page scroll lock while a modal is open (see modal.js). */
body.modal-open { overflow: hidden; }

/* --------------------------- reduced motion ----------------------------- */
/* Individual components also disable their own looping animations; this is
   the blanket rule for transitions and one-shot entrances. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}