/* ------------------------------------------------------------------
   partner-forms.css — WEB04 Phase 04

   The THIRD, opt-in stylesheet. Linked by SiteLayout only from the two
   /partners* form surfaces (partnerFormsCSS: true), never from / and
   never from the two directory pages.

   WHY IT EXISTS: site.css declares no `textarea` and no `select` rule
   anywhere — measured — and these forms need both. Unstyled, they render
   as light browser defaults on a dark page. Appending to site.css would
   land those bytes on WEB-72's homepage budget; appending to
   partner-directory.css would move WEB-95's two pins to pay for CSS a
   /partners visitor never uses. A third opt-in file leaves both untouched.

   🔴 NO MOTION IN THIS FILE, BY CONSTRUCTION. WEB-61's reduced-motion
   contract reads site.css only, so any other served stylesheet is a blind
   spot for it. A sheet that carries no transition, no animation and no
   transform cannot violate a contract nobody is checking here. A later
   phase wanting motion on a form page widens WEB-61 first.

   🔴 IT ADDS; IT NEVER RE-DECLARES. Every selector below is a control
   type site.css does not style. The .auth / .auth-card / .auth-form /
   .btn-primary / .form-error-region vocabulary is site.css's and is
   reused as-is. Custom properties (--bg-raised, --border, --text,
   --text-muted, --accent, --accent-bright) come from site.css's :root,
   which is always linked above this file.
   ------------------------------------------------------------------ */

/* The two controls site.css has no rule for, on its own `.auth-form input`
   shape so a form does not read as three different design languages. */
.auth-form textarea,
.auth-form select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
}

/* Visible focus for pointer users too — both pseudo-classes, matching the
   landed `.auth-form input:focus` pair exactly. */
.auth-form textarea:focus,
.auth-form textarea:focus-visible,
.auth-form select:focus,
.auth-form select:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* Vertical only: a horizontally resizable textarea can be dragged wider
   than its card and break the layout. A minimum height so the message
   field reads as a message field before anything is typed. */
.auth-form textarea {
    min-height: 9rem;
    resize: vertical;
}

/* A checkbox is the one control that must NOT stretch to the field width,
   and its label sits beside it rather than above it. */
.auth-form .field-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.auth-form .field-consent input[type="checkbox"] {
    width: auto;
    margin-top: 0.2rem;
    flex: none;
}

.auth-form .field-consent label {
    margin-bottom: 0;
    font-weight: 400;
    color: var(--text-muted);
}

/* Per-field inline errors. Colour is never the sole signal — the markup
   pairs this with the word "Error" in the row's own text. */
.auth-form .field-error {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: #ff9a8b;
}

/* The apply page's swap region. Empty it occupies nothing, so the page
   does not reserve a gap for a form nobody has asked for yet. */
.partner-form-region:empty {
    display: none;
}

/* The form card is wider than the login card: a message textarea in a
   26rem column is a cramped place to write four sentences. */
.partner-form-card {
    max-width: 34rem;
}

/* The back link above each standalone form. */
.partner-form-back {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

/* The success state that replaces the form. */
.partner-form-success h2 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
}

.partner-form-success p {
    margin: 0 0 0.75rem;
    color: var(--text-muted);
}

/* The privacy line under each form. */
.partner-form-note {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ------------------------------------------------------------------
   /partners/apply — the intro band.

   These four rules mirror partner-directory.css's `.partner-directory-hero`
   block; they are NOT shared with it, because /partners/apply does not link
   that sheet and linking it would move both of WEB-95's pins to pay for CSS
   this page does not otherwise use.
   ------------------------------------------------------------------ */

.partner-apply-hero {
    padding: 3.5rem 0 2rem;
    text-align: center;
}

.partner-apply-hero h1 {
    margin: 0 0 0.8rem;
    font-size: 2.4rem;
    line-height: 1.15;
}

.partner-apply-hero .section-sub {
    max-width: 42rem;
    margin: 0 auto;
}

.partner-apply-band {
    padding: 1.5rem 0;
}

.partner-apply-band h2 {
    margin: 0 0 1rem;
    font-size: 1.4rem;
}

/* The apply CTA, and the card the swapped form lands in. */
.partner-apply-cta {
    padding: 1.5rem 0 3rem;
    text-align: center;
}