.form {
    border: 1px solid var(--border-color-2);
    background-color: var(--background-color-1);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form--width-compact {
    width: 100%;
    max-width: 320px;
}

.form--width-regular {
    width: 100%;
    max-width: 480px;
}

.form--width-wide {
    width: 100%;
    max-width: 720px;
}

.form--width-full {
    width: 100%;
}

.form + .form {
    margin-top: var(--spacing-md);
}

.form__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-color-2);
}

.form__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.form-reveal {
    margin-top: var(--spacing-md);
}

.form-reveal__trigger {
    display: inline-block;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--text-color-3);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.form-reveal__trigger::-webkit-details-marker {
    display: none;
}

.form-reveal__trigger:hover {
    color: var(--text-color-1);
}

.form-reveal[open] .form-reveal__trigger {
    margin-bottom: var(--spacing-md);
    color: var(--text-color-1);
}

.fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;

    .label {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .label-text {
        color: var(--text-color-2);
        font-weight: 500;
        font-size: var(--font-size-sm);
        letter-spacing: 2px;
    }
}

.fieldset__legend {
    color: var(--text-color-2);
    font-weight: 500;
    font-size: var(--font-size-sm);
    letter-spacing: 2px;
    padding: 0;
}

.fieldset__hint {
    margin: 0;
    color: var(--text-color-3);
    font-size: var(--font-size-sm);
}

.fieldset__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Bordered variant — visually contains related groups. Same background
   as <.input> so a fieldset of inputs reads as a single panel. */
.fieldset--bordered {
    background-color: var(--background-color-0);
    border: 1px solid var(--border-color-2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

.fieldset--bordered > .fieldset__legend {
    padding: 0 var(--spacing-xs);
}

.input-error {
    color: var(--error-text-bright);
    font-size: var(--font-size-sm);
    margin: 0;
}

.label-hint {
    color: var(--text-color-3);
    font-size: var(--font-size-sm);
    margin: 0;
}

.choice {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    color: var(--text-color-1);
    user-select: none;
}

.choice input[type="checkbox"],
.choice input[type="radio"] {
    accent-color: var(--accent-color);
    cursor: pointer;
}

.choice-group {
    display: flex;
    gap: var(--spacing-md);
}

.choice-group--display-block {
    flex-direction: column;
    gap: var(--spacing-sm);
}

.choice-group--display-inline {
    flex-direction: row;
    flex-wrap: wrap;
}

.input[aria-invalid="true"] {
    border-color: var(--error-border);
}