/* ==========================================================================
   pages/forms.css — the public request and application forms, and the
   auth pages. Long forms sit in a single measured column under a masthead.
   ========================================================================== */

.company-form { max-width: 68rem; padding-block-end: var(--s-9); }
.company-form .form-section:first-of-type { border-top: 1px solid var(--ink); }

/* Auth: one narrow column, nothing decorative. */
.auth-page { max-width: 30rem; padding-block: var(--s-8) var(--s-10); }
.auth-page h1 { font-size: var(--t-xl); line-height: 1.15; letter-spacing: var(--track-display); }
.auth-page__intro { margin-block-start: var(--s-4); color: var(--grey-text); }
.auth-page form { margin-block-start: var(--s-7); }
.auth-page .stack { gap: var(--s-5); }
.auth-page .form-actions { margin-block-start: var(--s-6); }
.auth-page__alt { margin-block-start: var(--s-6); padding-block-start: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--t-s); color: var(--grey-text); }
.auth-page__alt a { text-decoration: underline; text-underline-offset: 3px; }

/* A quiet block of read-only facts: label left, value right. */
.facts { border-top: 1px solid var(--rule); }
.facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-block: 14px; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--grey-text); font-size: var(--t-s); }
.facts dd { margin: 0; text-align: right; }

/* A masthead without the 12-column grid, for confirmation and claim pages. */
.masthead--plain { padding-block: var(--s-8) var(--s-5); }
.masthead--plain h1 { margin-block-start: var(--s-3); font-size: var(--t-xl); line-height: 1.15; letter-spacing: var(--track-display); }
.masthead--plain .prose--lead { margin-block-start: var(--s-4); font-size: var(--t-m); color: var(--grey-text); max-width: 36em; }

/* File inputs: the browser control is the one thing that breaks the language,
   so the button is redrawn as a quiet .btn and the filename sits beside it. */
.field input[type="file"] { padding-block: 10px; color: var(--grey-text); font-size: var(--t-s); }
.field input[type="file"]::file-selector-button {
  min-height: 44px; margin-inline-end: var(--s-4); padding-inline: var(--s-5);
  border: 0; border-radius: var(--radius); background: var(--field);
  color: var(--ink); font: inherit; font-size: var(--t-body); cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.field input[type="file"]:hover::file-selector-button { background: var(--rule); }
.field input[type="file"]:focus-visible::file-selector-button { outline: 2px solid var(--ink); outline-offset: 3px; }