/*
 * m0 Design System — Components: Forms (CANONICAL)
 * .form-row, .error-icon, .category-icon, .category-name, AddressField grid, composite fieldsets.
 * Token-driven, no literal px/hex/rgba.
 */

.form-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.form-field-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.error-icon {
    color: var(--status-error);
    font-size: 2em;
    line-height: 1;
    flex-shrink: 0;
}

.category-icon {
    width: var(--spacing-xl);
    height: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    background: color-mix(in srgb, var(--anviz-accent-secondary) 12%, transparent);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.category-name {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* AddressField — composite address with country selector + postal lookup. */
.form-field--address .form-field-address-grid {
    display: grid;
    grid-template-columns: 8.75rem 1fr 1fr;
    grid-template-areas:
        "country country country"
        "postal city   region"
        "street street unit";
    gap: var(--spacing-sm);
}
.form-field-address-cell {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    position: relative;
}
.form-field-address-cell--country { grid-area: country; }
.form-field-address-cell--zip,
.form-field-address-cell--postal { grid-area: postal; }
.form-field-address-cell--city   { grid-area: city; }
.form-field-address-cell--state,
.form-field-address-cell--region { grid-area: region; }
.form-field-address-cell--street { grid-area: street; }
.form-field-address-cell--unit   { grid-area: unit; }

.form-field-address-country-resolved {
    display: inline-block;
    margin-top: 0.125rem;
    font-size: 0.74rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

@media (max-width: 560px) {
    .form-field--address .form-field-address-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "country"
            "postal"
            "city"
            "region"
            "street"
            "unit";
    }
}

/* Composite fieldsets (name / address-inline / gov-id) — shared by
 * vault + onboarding record_set_view + provider verification. */
.form-field--name-composite,
.form-field--address-inline,
.form-field--gov-id {
    border: none;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}
.form-field--name-composite > legend,
.form-field--address-inline > legend,
.form-field--gov-id > legend {
    padding: 0;
    margin: 0 0 var(--spacing-xs);
    float: none;
    width: auto;
}

.form-field-name-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr 0.7fr;
    gap: var(--spacing-sm);
    min-width: 0;
    max-width: 100%;
}
.form-field-name-row > * { min-width: 0; }
@media (max-width: 640px) {
    .form-field-name-row { grid-template-columns: 1fr 1fr; }
}

.form-field-address-inline-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    min-width: 0;
    max-width: 100%;
}
.form-field-address-inline-grid > * { min-width: 0; }
@media (min-width: 480px) {
    .form-field-address-inline-grid {
        grid-template-columns: 1.6fr 0.8fr;
    }
    .form-field-address-inline-grid > :nth-child(1) { grid-column: 1 / -1; }
}

/* Gov-id kind picker — shared form-field primitive. */
.form-field-gov-id-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: 0 0 var(--spacing-xs);
    max-width: 100%;
}
.form-field-gov-id-picker-option {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    min-width: 6.5rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: color-mix(in srgb, var(--anviz-bg-panel) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 30%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color var(--duration-fast),
        background var(--duration-fast),
        box-shadow var(--duration-fast);
}
.form-field-gov-id-picker-option:hover {
    border-color: color-mix(in srgb, var(--anviz-accent-secondary) 55%, transparent);
    background: color-mix(in srgb, var(--anviz-accent-secondary) 12%, transparent);
}
.form-field-gov-id-picker-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--anviz-accent-secondary) 25%, transparent);
}
.form-field-gov-id-picker-option[data-selected="true"],
.form-field-gov-id-picker-option[aria-checked="true"] {
    border-color: var(--anviz-accent-secondary);
    background: color-mix(in srgb, var(--anviz-accent-secondary) 18%, transparent);
    color: var(--text-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--anviz-accent-secondary) 35%, transparent);
}

.form-field-gov-id-sandbox-autofill {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--text-accent);
    text-decoration: underline;
    cursor: pointer;
}
.form-field-gov-id-sandbox-autofill:hover { opacity: 0.85; }

.form-field-gov-id-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.form-field-gov-id-extracted {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    border: 1px solid color-mix(in srgb, var(--patriot-white) 20%, transparent);
    border-radius: var(--radius-sm);
    max-width: 100%;
    overflow-wrap: anywhere;
}
.form-field-gov-id-extracted-heading {
    margin: 0 0 var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.form-field-gov-id-extracted-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.form-field-gov-id-extracted-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.8rem;
}
.form-field-gov-id-extracted-row dt {
    margin: 0;
    color: var(--text-muted);
    min-width: 6rem;
}
.form-field-gov-id-extracted-row dd {
    margin: 0;
    color: var(--text-primary);
}

.form-field-address-hint {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}