/*
 * Reset and element defaults. Loads before components.css, which is what the
 * alphabetical filename ordering buys — see tokens.css.
 *
 * ApplicationController declares `allow_browser versions: :modern`, so nesting
 * and :has are available without fallbacks.
 */

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

* {
  margin: 0;
}

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

body {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
}

h1 { font-size: var(--text-h2); }
h2 { font-size: var(--text-h3); }
h3 { font-size: var(--text-h4); }

p { text-wrap: pretty; }

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

a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

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

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

/* iOS zooms the viewport when a focused field is under 16px. */
input { font-size: max(1rem, 16px); }

/* The phone column. The prototype is a mobile web app; on a wider screen it
   stays a column rather than stretching into a layout it was never drawn as. */
.screen {
  width: 100%;
  max-width: var(--screen-max-width);
  margin-inline: auto;
  min-height: 100vh;
  background: var(--surface-page);
}

/* Screens that open with a plain title rather than a full-bleed hero. The top
   padding stands in for the status bar the prototype draws. */
.screen__body {
  padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--space-5) var(--space-6);
}

.screen__title {
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

.screen__subtitle {
  font-size: var(--text-body-sm);
  color: var(--gray-500);
  margin-top: var(--space-1);
}

/* Clears the fixed tab bar, plus the home indicator on a full-screen iOS
   install — the layout declares apple-mobile-web-app-capable. */
.screen--tabbed {
  padding-bottom: calc(var(--tab-bar-height) + var(--space-6) + env(safe-area-inset-bottom));
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stack--wide { gap: var(--space-5); }

.overline {
  font-size: var(--text-overline);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gray-400);
  font-weight: var(--fw-semibold);
}

/* On a navy hero the overline needs the light end of the ramp. */
.overline--inverse { color: var(--gray-300); }

.muted { color: var(--gray-500); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}