/* ==========================================================================
   form.css — form component: card, fields, inputs, select, validation, and
   submit status. Extracted from components.css so forms own one stylesheet.

   Every rule here is scoped to the "plain" form variant. The variant is
   declared with `data-form-type` on the <form> element:

       <form data-form-type="plain"> … </form>

   Field-level rules scope as descendants of that form
   (`[data-form-type="plain"] .field`). The `.form-card` wrapper sits OUTSIDE
   the form, so it is matched with `:has()` instead. A future form type gets its
   own `[data-form-type="<variant>"] …` block and inherits none of the below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Forms. Fields are opaque with ink-on-white text. Never set a light text
   colour here: the surface beneath is white.
   -------------------------------------------------------------------------- */
.form-card:has([data-form-type="plain"]) {
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

[data-form-type="plain"] .field + .field {
    margin-top: var(--space-5);
}

[data-form-type="plain"] .field label {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink);
}

/* Required marker. The phone number is the field that must not be missed, so it
   carries a red asterisk; the input's `required` attribute is what screen
   readers use, so the asterisk itself is aria-hidden. */
[data-form-type="plain"] .req {
    color: var(--danger-ink);
    font-weight: 700;
}

[data-form-type="plain"] .field__hint {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

[data-form-type="plain"] .field__hint--inline {
    display: inline;
    margin-top: 0;
}

[data-form-type="plain"] .form-submit {
    margin-top: var(--space-6);
}

[data-form-type="plain"] .field input,
[data-form-type="plain"] .field select,
[data-form-type="plain"] .field textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3);
    background: var(--surface-raised);   /* opaque */
    color: var(--ink);                   /* 17.1:1 on the field surface */
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

[data-form-type="plain"] .field input::placeholder,
[data-form-type="plain"] .field textarea::placeholder {
    color: var(--ink-placeholder);
    opacity: 1;
}

[data-form-type="plain"] .field select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-7);
}

[data-form-type="plain"] .field input:focus,
[data-form-type="plain"] .field select:focus,
[data-form-type="plain"] .field textarea:focus {
    border-color: var(--blue-fill);
    box-shadow: 0 0 0 3px var(--blue-wash);
    outline: none;
}

[data-form-type="plain"] .field input[aria-invalid="true"],
[data-form-type="plain"] .field select[aria-invalid="true"] {
    border-color: var(--emergency);
}

[data-form-type="plain"] .field__error {
    display: none;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--emergency);
}

[data-form-type="plain"] .field__error::before {
    content: "⚠ ";
}

[data-form-type="plain"] .field [aria-invalid="true"] ~ .field__error {
    display: block;
}

/* Submit feedback — replaces the alert() dialogs. */
[data-form-type="plain"] .form-status {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-weight: 600;
}

[data-form-type="plain"] .form-status:empty {
    display: none;
}

[data-form-type="plain"] .form-status[data-state="success"] {
    background: var(--success-surface);
    border: 1px solid var(--success-border);
    color: var(--success-ink);
}

[data-form-type="plain"] .form-status[data-state="error"] {
    background: var(--danger-surface);
    border: 1px solid var(--danger-border);
    color: var(--danger-ink);
}

/* --------------------------------------------------------------------------
   Quote-form reassurance. Persistent, low-key: what happens next, no spam.
   -------------------------------------------------------------------------- */
[data-form-type="plain"] .form-reassure {
    display: flex;
    align-items: flex-start;   /* icon stays with the first line when text wraps */
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

[data-form-type="plain"] .form-reassure svg {
    flex: none;
    margin-top: 0.15em;
    color: var(--blue-text);
}