/*
 * Reset, typography, links, focus. See 01_tokens.css for the load-order contract.
 */

* { box-sizing: border-box; }

/* The hidden attribute must beat every display rule in the later files (the notify
   opt-in button is toggled purely by that attribute). */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Anchor targets (the file-note section jump list) must clear the sticky header. */
  scroll-padding-top: calc(var(--header-height) + var(--gap-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  /* Long client references and Graph paths must never widen the page on a phone. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { color: var(--navy); line-height: 1.25; margin: 0 0 var(--gap-2); }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 0.98rem; font-weight: 700; }
h4 { font-size: 0.92rem; font-weight: 700; color: var(--ink-soft); }

p { margin: 0 0 var(--gap-3); }
a { color: var(--navy); }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

/* Visually hidden but read by screen readers — used for the responsive tables' column
   labels, which are shown on mobile (04_components) and announced on every width. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}