/*
  Reset, typography and the accessibility primitives.

  The rules here are not cosmetic. Focus visibility, reduced motion, target sizes and the
  skip link are the difference between an application that can be operated without a mouse
  and one that cannot, and they are far cheaper to establish now than to retrofit across
  six views later.
*/

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

html {
  /* Mirrors the resolved mode so native controls, scrollbars and form widgets match. */
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
}

:root[data-color-scheme="light"] { color-scheme: light; }
:root[data-color-scheme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

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

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--accent-hover); }

/*
  Focus. :focus-visible only shows the ring for keyboard interaction, so mouse users are
  not distracted — but the ring is never removed outright, which would leave keyboard users
  with no idea where they are.
*/
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

/* The main region receives focus after navigation; it should not draw a ring for that. */
#main:focus { outline: none; }

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

button { cursor: pointer; }

img, svg { max-width: 100%; }

/* Visible only to assistive technology. */
.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;
}

/*
  Skip link. Off-screen until focused, then the first thing a keyboard user sees — it lets
  them bypass the header and navigation instead of tabbing through them on every view.
*/
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius);
  font-weight: var(--weight-medium);
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

/*
  Respect a stated preference for less motion. Vestibular disorders make animation
  genuinely unpleasant, and none of this app's motion carries meaning.
*/
@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;
  }
}

/* Honour a forced-colours (high contrast) environment rather than fighting it. */
@media (forced-colors: active) {
  .btn,
  .nav__link {
    border: 1px solid ButtonText;
  }
}

.noscript {
  max-width: 40rem;
  margin: var(--space-8) auto;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}