/* Beta Mobility v1.5.0: optional page baseline. Tokens alone are side-effect free. */
@import "tokens.css";
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Geist:wght@400;500&display=swap');

/* Metric-matched stand-in for the serif, built from the local Times New Roman.
   No font file is served. Overrides are the ones America.gov uses for the same pairing. */
@font-face {
  font-family: "Rhymes Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times");
  size-adjust: 112.68%;
  ascent-override: 95.67%;
  descent-override: 23.96%;
  line-gap-override: 0%;
}


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

/* An island re-reads the text colour from its own theme. */
:where([data-theme]) { color: var(--color-on-surface); }

/* --- Deep surface ---
   The dark ground for the footer and for dark sections. It does not change between themes.
   Put it on a dark island so text, borders and components inside take their dark values:
   <footer class="surface-deep" data-theme="dark">. */
.surface-deep {
  background-color: var(--color-surface-deep);
  color: var(--color-on-surface);
}

/* --- Tinted surfaces ---
   Two alternatives to the grey second surface. They follow the theme like --color-surface-alt.
   The classes also darken muted text inside, which would otherwise fall just below 4.5:1. */
.surface-sage,
.surface-peach {
  --color-on-surface-muted: var(--color-on-tint-muted);
}
.surface-sage  { background-color: var(--color-surface-sage); }
.surface-peach { background-color: var(--color-surface-peach); }

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "rlig", "calt", "tnum";
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
}

/* --- Type roles ---
   One class per role: family, size, weight, line height and tracking together.
   Prefer these over assembling the five properties by hand. */
.type-display,
.type-hero,
.type-statement,
.type-section {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-style: normal;
  line-height: var(--leading-display);
  font-feature-settings: "liga", "clig";
  text-wrap: balance;
}
.type-display { font-size: var(--type-display); letter-spacing: var(--tracking-hero); }
.type-hero    { font-size: var(--type-hero);    letter-spacing: var(--tracking-hero); }
.type-statement,
.type-section { font-size: var(--type-statement); letter-spacing: var(--tracking-display); }

.type-feature,
.type-sub,
.type-lede { font-family: var(--font-sans-display); }

.type-card,
.type-body-lg,
.type-body,
.type-small,
.type-label,
.type-link { font-family: var(--font-sans); }

.type-feature { font-size: var(--type-feature); font-weight: var(--weight-medium);  line-height: var(--leading-tight);   letter-spacing: var(--tracking-heading); }
.type-sub     { font-size: var(--type-sub);     font-weight: var(--weight-medium);  line-height: var(--leading-heading); letter-spacing: var(--tracking-sans-display); }
.type-lede    { font-size: var(--type-lede);    font-weight: var(--weight-regular); line-height: var(--leading-body);    letter-spacing: var(--tracking-sans-display); color: var(--color-on-surface-muted); }
.type-card    { font-size: var(--type-card);    font-weight: var(--weight-medium);  line-height: var(--leading-snug);    letter-spacing: var(--tracking-body); }
.type-body-lg { font-size: var(--type-body-lg); font-weight: var(--weight-regular); line-height: var(--leading-body);    letter-spacing: var(--tracking-body); color: var(--color-on-surface); }
.type-body    { font-size: var(--type-body);    font-weight: var(--weight-regular); line-height: var(--leading-body);    letter-spacing: var(--tracking-body); }
.type-small   { font-size: var(--type-small);   font-weight: var(--weight-regular); line-height: var(--leading-body);    letter-spacing: var(--tracking-body); }
.type-label   { font-size: var(--type-body);    font-weight: var(--weight-medium);  line-height: var(--leading-label);   letter-spacing: var(--tracking-body); }
.type-link    { font-size: var(--type-body);    font-weight: var(--weight-medium);  line-height: var(--leading-label);   letter-spacing: var(--tracking-body); color: var(--color-on-surface); text-decoration: underline; text-underline-offset: 4px; }
.type-tag     { font-family: var(--font-mono); font-size: var(--type-tag); font-weight: var(--weight-regular); line-height: var(--leading-label); letter-spacing: var(--tracking-tag); text-transform: uppercase; }

/* --- Layout ---
   .layout-container centres content and applies the page margin.
   .layout-grid lays out its children on the 4 / 12 column grid.
   .layout-section gives a page section its vertical rhythm. */
.layout-container {
  width: min(calc(100% - var(--grid-margin) * 2), var(--container));
  margin-inline: auto;
}
.layout-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-10);
}
.layout-grid > * { grid-column: 1 / -1; min-width: 0; }
.layout-section { padding-block: var(--space-section-inset); }
.layout-stack > * { margin-block: 0; }
.layout-stack { display: flex; flex-direction: column; gap: var(--space-stack); }

/* Split row: media on columns 3 to 6, copy on columns 8 to 11.
   Columns 1, 2, 7 and 12 stay empty. Stacks below 1145px. */
@media (min-width: 1145px) {
  .layout-grid > .layout-split-media { grid-column: 3 / span 4; }
  .layout-grid > .layout-split-copy  { grid-column: 8 / span 4; align-self: center; }
  .layout-grid > .layout-measure     { grid-column: 3 / span 8; }
}

/* --- Corners and elevation ---
   .squircle turns a rounded corner into a superellipse where the browser supports it
   and scales the radius by 1.194 so it keeps the same visual size. Set --squircle-radius
   to choose the radius; it defaults to the card radius. Elsewhere it is a plain round corner. */
.squircle {
  border-radius: calc(var(--squircle-radius, var(--radius-card)) * var(--corner-scale));
  corner-shape: superellipse(1.3);
}
.elevation-1 { box-shadow: var(--shadow-1); }
.elevation-2 { box-shadow: var(--shadow-2); }

/* Readable content, reusable control affordances, and safe narrow layouts. */
.layout-measure { max-width: var(--measure-prose); }
strong, b { font-weight: var(--weight-medium); }
.type-support { color: var(--color-on-surface-muted); }
.type-data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
:where(button, input, select, textarea) { font: inherit; }
:where(button, select, summary) { cursor: pointer; }
:where(h1, h2, h3, p, a) { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -8rem; left: var(--space-4); z-index: 100;
  padding: var(--space-3) var(--space-4); color: var(--color-on-emphasis);
  background: var(--color-surface-emphasis); }
.skip-link:focus { top: var(--space-4); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}