/* ELEMENTS — bare HTML. Every component must read as plain HTML first. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: -0.015em; margin-block: 0 var(--space-4); }
h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: -0.01em; margin-block: var(--space-8) var(--space-4); }
h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); margin-block: var(--space-6) var(--space-3); }
main > :first-child { margin-top: 0; }

a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
a:visited { color: var(--color-link-visited); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
th { font-weight: var(--weight-semibold); border-bottom: var(--border-width-strong) solid var(--color-border-strong); }
td { border-bottom: var(--border-width) solid var(--color-border); }
td.is-numeric, th.is-numeric { text-align: right; font-variant-numeric: var(--numeric); }

dl { margin: 0; }
dt { color: var(--color-text-muted); }
dd { margin: 0; }

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

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

/* focus — GOV.UK pairing: yellow field + ink line, visible in both schemes,
   never colour-alone. Links get a filled treatment; controls get an outline. */
:focus { outline: none; }
a:focus-visible,
.back-link:focus-visible,
.skip-link:focus-visible {
  outline: none;
  color: var(--color-focus-text);
  background: var(--color-focus);
  box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-focus-text);
  text-decoration: none;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 var(--border-width-strong) var(--color-focus-text);
}

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