/* ──────────────────────────────────────────────────────────
   forms.css — MSNYC shared form system (the core form look).

   Canonical source: the rental-application (apply) form. Use
   these classes for ALL forms going forward; page CSS may
   override per-case (the classes win the cascade only over
   element defaults, so a later page rule can always adjust).

   Layout:  .form-section → .form-row / .form-field → label + control
   Buttons: .form-submit (primary)  ·  .form-btn-secondary (cancel)

   Loads on top of tokens.css. SELF-CONTAINED: it sets no body or
   page-level styles and overrides no global design tokens, so it
   is safe to load on any page (public or staff) next to that
   page's own CSS. Token refs carry hex fallbacks.
   ────────────────────────────────────────────────────────── */
:root {
    --form-line: #d8d2c2; /* control border */
    --form-line-soft: #e8e0c8; /* section hairline */
    --form-label: #6b6b6b; /* uppercase field label */
    --form-radius: 2px;
}

/* ── grouping ── */
.form-section {
    background: var(--ed-surface, #fff);
    border: 0.5px solid var(--form-line-soft);
    border-radius: 3px;
    padding: 22px 22px 14px;
    margin-bottom: 14px;
}
.form-section h3 {
    font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--form-line-soft);
    color: var(--ed-ink, #1a1a1a);
}

/* ── layout ── */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.form-field {
    margin-bottom: 14px;
}
.form-row .form-field {
    margin-bottom: 0;
}

/* ── labels ── */
.form-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--form-label);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── controls: the core input/select/textarea look ──
   Two ways to opt in, same look either way:
     • .form-field  — explicit per-field wrapper (apply, signup, …)
     • .msnyc-form   — container scope: styles EVERY control inside it,
                       ideal for dense / dynamically-built forms (the
                       new-client-application wizard). Checkboxes,
                       radios, and hidden inputs are left alone. */
.form-field input,
.form-field select,
.form-field textarea,
.msnyc-form input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
.msnyc-form select,
.msnyc-form textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--form-line);
    border-radius: var(--form-radius);
    font-size: 16px; /* 16px keeps iOS from zooming on focus */
    font-family: var(--font-body, 'Montserrat', sans-serif);
    color: var(--ed-ink, #1a1a1a);
    background: #fff;
    min-height: 42px;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.form-field textarea,
.msnyc-form textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.5;
}
/* Container mode has no per-field wrapper, so the control owns its
   own bottom spacing (the .form-field wrapper supplies it otherwise). */
.msnyc-form input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
.msnyc-form select,
.msnyc-form textarea {
    margin-bottom: 14px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.msnyc-form input:focus,
.msnyc-form select:focus,
.msnyc-form textarea:focus {
    border-color: var(--ed-gold, #a08830);
    outline: none;
    box-shadow: 0 0 0 3px rgba(160, 136, 48, 0.12);
}
.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled,
.msnyc-form input:disabled,
.msnyc-form select:disabled,
.msnyc-form textarea:disabled {
    background: #f3f0e8;
    color: #9a9486;
    cursor: not-allowed;
}
.form-field input::placeholder,
.form-field textarea::placeholder,
.msnyc-form input::placeholder,
.msnyc-form textarea::placeholder {
    color: #b3ac9a;
}

/* ── primary submit ── */
.form-submit,
.submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    min-height: 48px;
    background: var(--ed-ink, #1a1a1a);
    color: #fff;
    border: none;
    border-radius: var(--form-radius);
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 6px;
}
.form-submit:hover:not(:disabled),
.submit-btn:hover:not(:disabled) {
    background: var(--ed-gold, #a08830);
}
.form-submit:disabled,
.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── secondary / cancel ── */
.form-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    min-height: 44px;
    background: transparent;
    color: var(--ed-ink, #1a1a1a);
    border: 1px solid var(--form-line);
    border-radius: var(--form-radius);
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s;
}
.form-btn-secondary:hover {
    border-color: var(--ed-ink, #1a1a1a);
}

/* ── a row of actions (e.g. Cancel + Submit) ── */
.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}
.form-actions .form-submit,
.form-actions .submit-btn {
    margin-top: 0;
}

/* ── small print under a form ── */
.form-legal {
    text-align: center;
    color: var(--form-label);
    font-size: 0.7rem;
    margin-top: 18px;
    line-height: 1.5;
}

/* ── inline info / prefill note ── */
.form-note {
    background: rgba(160, 136, 48, 0.08);
    border-left: 3px solid var(--ed-gold, #a08830);
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 0.82rem;
    color: #5a4a1a;
    border-radius: 2px;
}
.form-note a {
    color: var(--ed-gold, #a08830);
    font-weight: 500;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
@media (max-width: 680px) {
    .form-section {
        padding: 20px 18px 10px;
    }
}