/*
 * base.css. Reset and element defaults only. No component may be styled here, and
 * nothing here uses a class except the two page level helpers at the end.
 */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-cond);
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
  color: var(--ink);
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4, h5, h6 { font-size: var(--text-base); }

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

a {
  color: var(--brand);
  text-decoration: none;
}

/* [295]: zero specificity, so a component that colours its own link keeps its colour on hover.
   As `a:hover` (one element and one pseudo-class) this outranked every single-class component
   rule, and on the action card's navy it turned a row's label the navy of its own ground: 12.4:1
   at rest, 1.0:1 under the pointer, an icon with no words. A bare link still gets it. */
:where(a:hover) { color: var(--brand-hover); text-decoration: underline; }

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

/*
 * Focus. design.md section 7 makes this non negotiable: every interactive element
 * shows where it is, using the brand colour. :focus-visible rather than :focus so a
 * mouse click does not leave a ring behind, but keyboard use always does.
 */
:focus-visible {
  outline: var(--focus-width) solid var(--brand);
  outline-offset: var(--focus-offset);
}

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

button { background: none; border: 0; cursor: pointer; }
:where(button[disabled]) { cursor: not-allowed; }

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

th { text-align: left; font-weight: var(--weight-semi); }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.95em; }
pre { margin: 0; overflow-x: auto; }

hr { border: 0; border-top: var(--border-width) solid var(--line); margin: var(--space-6) 0; }

::selection { background: var(--brand); color: var(--brand-ink); }

/* Scrollbars, so a dark panel does not get a bright system scrollbar through it. */
* { scrollbar-color: var(--surface-3) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--radius-pill); }

/* A lead paragraph. Four screens open with one. Not a component, an element style. */
.l-lead {
  color: var(--ink-2);
  font-size: var(--text-md);
  max-width: 72ch;
  margin-bottom: var(--space-6);
}

/* Visible to a screen reader, not on screen. Used for skip links and icon names. */
.l-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.l-sr-focus:focus {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  padding: var(--space-3) var(--space-5);
  background: var(--brand);
  color: var(--brand-ink);
}

@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;
  }
}