/* /apply — the little that is not inline in the React components.
   The design system styles everything through inline style objects, so this
   file carries only what an inline style cannot express: media queries, the
   pre-boot fallback, and focus-visible. */

body { background: var(--surface-page); }

/* Shown before the bundle boots, and the whole page for a visitor with
   JavaScript off. */
.boot-fallback {
  max-width: 560px;
  margin: 96px auto;
  padding: 0 24px;
  font-family: var(--font-sans);
  color: var(--text-body);
}
.boot-fallback h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--ink-950);
  margin: 0 0 10px;
}
.boot-fallback p { font-size: 15px; line-height: 1.6; margin: 0; }

/* Keyboard focus has to stay visible: the form's own focus ring is painted by
   the components, but buttons and links rely on this. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-1); }

@media (max-width: 720px) {
  /* The field grid is 4 columns so half/quarter widths land on it. On a phone
     everything is full width -- a quarter-width ZIP box is unusable there. */
  .lyq-grid { grid-template-columns: 1fr !important; }
  .lyq-grid > * { grid-column: 1 / -1 !important; }
  .lyq-summary { grid-template-columns: 1fr 1fr !important; }
  /* The step rail does not fit beside the wordmark; keep the labels, wrap the
     bar. Hiding the rail would remove the only indication of progress. */
  .lyq-bar { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; row-gap: 10px; }
  .lyq-progress { gap: 6px; }
  .lyq-progress span { font-size: 11px; }
}

@media (max-width: 460px) {
  /* Below this the four step labels collide; the coloured rail alone still
     shows how far along the applicant is. */
  .lyq-progress > div > span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}