/* foundation.css — the contract between markup and styles.
 *
 * Loaded by every page, ahead of styles.css and evidence-tools.css.
 *
 * WHAT BELONGS HERE
 *   Design tokens. Container behaviour. Button primitives. Focus states.
 *   Breakpoints. Things that must mean the same thing on every page.
 *
 * WHAT DOES NOT
 *   Hero layouts, cards, charts, maps, tool controls, forms, tables, or anything
 *   a single page or template owns. Those stay in styles.css and
 *   evidence-tools.css, which describe two different page systems and must be
 *   allowed to keep disagreeing.
 *
 * WHY IT EXISTS
 *   The structural audit found six ways of writing the content column across 104
 *   pages: .inner on 38, .wrap on 19, .container on 17, .wrap.narrow on 9,
 *   .content on 5, and 26 pages with none. That is why markup inserted into one
 *   page renders correctly and the same markup in another runs full-bleed with no
 *   layout. It caused three live defects in a single day.
 *
 * WHY NOT JUST LOAD evidence-tools.css EVERYWHERE
 *   Because it carries tool-specific component styles, and dropping it onto 56
 *   legacy pages would silently restyle their headings, cards, tables and form
 *   elements while fixing their container widths. Fixing a measure by changing
 *   everything else is not a fix. This file is deliberately the smallest thing
 *   that gives every page the same vocabulary.
 *
 * THE RULE FOR ADDING TO IT
 *   If a rule would look wrong on any existing page, it does not belong here.
 *   Every addition is verified with scripts/visual-baseline.py --check across 8
 *   routes at 320, 768 and 1440 before it ships.
 */

:root {
  /* Content measures. Named for the job, not the number, so a change of taste is
     a change in one place. */
  --atg-content-wide: 72rem;
  --atg-content-standard: 64rem;
  --atg-content-narrow: 46rem;
  --atg-gutter: 1.5rem;

  /* Spacing scale. */
  --atg-space-1: 0.25rem;
  --atg-space-2: 0.5rem;
  --atg-space-3: 0.75rem;
  --atg-space-4: 1rem;
  --atg-space-6: 1.5rem;
  --atg-space-8: 2rem;
  --atg-space-12: 3rem;
  --atg-space-16: 4rem;

  /* Brand and neutrals. These mirror the values already in use across both page
     systems rather than introducing new ones: the point is a shared name for the
     colour that is already there, not a redesign. */
  --atg-pink: #f62aa0;
  --atg-black: #0a0a0a;
  --atg-white: #ffffff;
  --atg-off-white: #fafafa;
  --atg-ink: #222222;
  --atg-muted: #666666;
  --atg-rule: #e6e6e6;

  /* Type. */
  --atg-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --atg-line: 1.65;

  /* One focus treatment, everywhere. Several pages currently have none, which is
     a keyboard accessibility failure rather than a style preference. */
  --atg-focus: 3px solid var(--atg-pink);
  --atg-focus-offset: 2px;
}

/* ── containers: opt-in only ───────────────────────────────────────────────
 * The first version of this file gave .inner, .wrap, .container and .content a
 * shared width, written with :where() so any existing rule would win. It was not
 * safe, and the visual baselines said so within a minute: 18 page and width
 * combinations moved, including /for-law-firms at every width. The reason is the
 * 26 pages that define no container rule at all. They had no width, :where()
 * gave them one, and that is a change whatever its specificity.
 *
 * So the aliases are opt-in. A page adopts .atg-content when someone has looked
 * at it, and nothing changes underneath any page that has not been looked at.
 * This is slower and it is the only version that can ship unattended.
 */
.atg-content {
  width: min(100% - (var(--atg-gutter) * 2), var(--atg-content-standard));
  margin-inline: auto;
}
.atg-content--narrow {
  width: min(100% - (var(--atg-gutter) * 2), var(--atg-content-narrow));
  margin-inline: auto;
}
.atg-content--wide {
  width: min(100% - (var(--atg-gutter) * 2), var(--atg-content-wide));
  margin-inline: auto;
}

/* ── keyboard focus ────────────────────────────────────────────────────────
 * Not wrapped in :where(), because a missing focus ring is a defect rather than
 * a style, and a page silently overriding it should be visible in review. Only
 * :focus-visible, so it appears for keyboard users and not on mouse click.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--atg-focus);
  outline-offset: var(--atg-focus-offset);
}

/* ── button primitives ─────────────────────────────────────────────────────
 * The role vocabulary, not a restyling of the eight existing classes. Nothing
 * currently uses these, and that is deliberate: the audit's correction was that
 * flattening `d3-btn` and `guide-read` into a primary button would put a second
 * apparent conversion action on pages whose whole point is having one. Classes
 * migrate onto these roles page by page, after each one is classified.
 */
:where(.btn) {
  display: inline-flex;
  align-items: center;
  gap: var(--atg-space-2);
  font-family: inherit;
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--atg-space-3) var(--atg-space-6);
  border: 3px solid var(--atg-black);
  cursor: pointer;
}

:where(.btn--primary) { background: var(--atg-pink); border-color: var(--atg-pink); color: var(--atg-white); }
:where(.btn--secondary) { background: var(--atg-white); color: var(--atg-black); }
:where(.btn--text) {
  background: none; border: none; padding: 0;
  text-transform: none; font-weight: 800;
  border-bottom: 3px solid var(--atg-pink);
  color: var(--atg-black);
}
:where(.btn--utility) {
  background: var(--atg-off-white); border: 1px solid var(--atg-rule);
  color: var(--atg-ink); font-weight: 700; text-transform: none;
  padding: var(--atg-space-2) var(--atg-space-4);
}

/* ── the one thing that is not optional ────────────────────────────────────
 * Wide content scrolls inside its own box rather than pushing the document
 * sideways. This is a fix for a real defect found on a phone, not a preference,
 * so it is not wrapped in :where().
 */
.tablewrap,
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

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