/* ==========================================================================
   Reset and base
   --------------------------------------------------------------------------
   Reset, accessibility primitives, element defaults, and the signup form.
   Every rule here is token-driven, so the navy bands restyle themselves by
   rebinding tokens rather than by restating rules.
   ========================================================================== */

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

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

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd {
    margin: 0;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

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

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

  button {
    background: none;
    border: none;
    cursor: pointer;
  }

  :where(a) {
    color: inherit;
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: var(--weight-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
  }

  /* Any section carrying a band class paints its own ground. */
  .band-navy,
  .band-cream {
    background-color: var(--surface);
    color: var(--ink);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  :where(p, li) {
    max-width: var(--measure);
  }

  /* Visible focus everywhere. The halo sits between the element and the
     outline so the indicator keeps its contrast regardless of what color the
     element itself is. */
  :focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-halo);
  }

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

  .skip-link {
    position: absolute;
    top: var(--space-2xs);
    left: var(--space-2xs);
    z-index: 100;
    padding: var(--space-2xs) var(--space-s);
    background-color: var(--white);
    color: var(--neutral-900);
    font-weight: var(--weight-bold);
    text-decoration: none;
  }

  .skip-link:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
  }

  @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;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   Signup form
   ========================================================================== */

@layer base {
  .signup__grid {
    display: grid;
    gap: var(--space-s);
  }

  @media (min-width: 34rem) {
    .signup__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .field--wide {
      grid-column: 1 / -1;
    }
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin: 0;
    max-width: none;
  }

  .field__label {
    font-size: var(--step--1);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .field__req {
    font-weight: var(--weight-body);
    text-transform: none;
    letter-spacing: var(--tracking-body);
    color: var(--ink-subtle);
  }

  .field__input {
    padding: var(--space-2xs) var(--space-xs);
    background-color: var(--field-bg);
    color: var(--field-ink);
    border: 2px solid var(--field-border);
    border-radius: var(--radius-s);
    font-size: var(--step-0);
    width: 100%;
  }

  .field__input:focus-visible {
    border-color: var(--field-border-focus);
  }

  .field__hint {
    font-size: var(--step--1);
    color: var(--ink-subtle);
  }

  .consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2xs);
    align-items: start;
    margin-top: var(--space-s);
    max-width: none;
  }

  .consent__box {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15em;
    accent-color: var(--accent-fill);
  }

  .consent__label {
    font-size: var(--step--1);
    line-height: var(--leading-snug);
  }

  /* Honeypot. Hidden from people, reachable by the bots that fill everything. */
  .signup__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .signup__status:empty {
    display: none;
  }

  .signup__status {
    margin-bottom: var(--space-s);
    padding: var(--space-xs) var(--space-s);
    border-left: 4px solid currentColor;
    font-weight: var(--weight-medium);
    max-width: none;
  }

  .signup__status--error {
    color: var(--error-ink);
    background-color: var(--surface-raised);
  }

  .field__input[aria-invalid="true"] {
    border-color: var(--error-ink);
  }

  /* Invisible unless Turnstile needs an interaction, so no space is reserved.
     When the widget does appear it takes its own height below the consent
     line and pushes the button down, which is the right behavior. */
  .signup__turnstile:not(:empty) {
    margin-top: var(--space-s);
  }

  /* Replaces the form after a successful inline submission. */
  .signup__done {
    padding: var(--space-m);
    border-left: 6px solid var(--accent-fill);
    background-color: var(--surface-raised);
  }

  .signup__done:focus {
    outline: none;
  }

  .signup__done-heading {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: var(--weight-display);
    text-transform: uppercase;
    color: var(--ink);
  }

  .signup__done-body {
    margin-top: var(--space-2xs);
    color: var(--ink-muted);
  }

  .signup__submit:disabled {
    opacity: 0.7;
    cursor: wait;
  }

  .signup__actions {
    margin-top: var(--space-m);
    max-width: none;
  }

  /* The one dominant button on the site. Red everywhere, never a second
     competing color. */
  .signup__submit {
    padding: var(--space-xs) var(--space-xl);
    background-color: var(--accent-fill);
    color: var(--accent-fill-ink);
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    border-radius: var(--radius-s);
    transition: background-color var(--transition-fast);
  }

  .signup__submit:hover {
    background-color: var(--accent-fill-hover);
  }

  .signup__privacy {
    margin-top: var(--space-s);
    font-size: var(--step--1);
    color: var(--ink-subtle);
  }

  .signup__form {
    position: relative;
  }
}