/* 01-base.css — reset, element defaults, focus rings, .sr-only */

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

html {
  /* never set in px: the base must follow the user's root size */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--tx-body);
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
}

ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4 {
  color: var(--tx-strong);
  line-height: var(--lh-tight);
  font-weight: 650;
}

a { color: inherit; }

a.link {
  color: var(--tx-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a.link:hover { text-decoration-thickness: 2px; }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Anything that is an identifier or a quantity is monospaced and tabular;
   anything that is prose is proportional. Data never wraps. */
.mono { white-space: nowrap; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

blockquote { margin: 0; }

hr { border: 0; border-top: 1px solid var(--ln-hair); }

::selection { background: var(--focus); color: #fff; }

/* ---- focus ---------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 28%, transparent);
  border-radius: var(--radius);
}

/* engines without color-mix still get the ring */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :focus-visible { box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.28); }
}

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

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

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -3rem;
  z-index: 60;
  background: var(--bg-surface);
  color: var(--tx-strong);
  border: 1px solid var(--ln-control);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  transition: top 120ms ease;
}
.skip-link:focus { top: var(--sp-2); }

.muted { color: var(--tx-muted); }
.num { text-align: right; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* prefers-reduced-motion removes all transitions, hover elevation and smooth
   scrolling. There is little motion to begin with. */
@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;
  }
}