/*
 * .field / .field-group — shadcn-style form layout primitives.
 *
 * Usage:
 * <div class="field-group">
 *     <div class="field" data-invalid>
 *         <label class="label" for="email">Email</label>
 *         <input id="email" class="input" aria-invalid="true">
 *         <p class="field-description">We'll never share this.</p>
 *         <p class="field-error">Invalid email.</p>
 *     </div>
 * </div>
 */

.field-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.label {
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    color: var(--color-foreground);
    user-select: none;
}

.label[data-required]::after,
.label.required::after {
    content: " *";
    color: var(--color-destructive);
}

.field-description {
    font-size: var(--text-xs);
    color: var(--color-muted-foreground);
    line-height: var(--leading-normal);
    margin: 0;
}

.field-error {
    font-size: var(--text-xs);
    color: var(--color-destructive);
    line-height: var(--leading-normal);
    margin: 0;
    display: none;
}

.field[data-invalid] .field-error {
    display: block;
}

.field[data-invalid] .label {
    color: var(--color-destructive);
}

.field[data-disabled] {
    opacity: 0.6;
    pointer-events: none;
}

/* ─── Field with inline label (horizontal) ─────────── */
.field-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.field-inline .label {
    flex-shrink: 0;
    min-width: var(--space-32);
}

/* ─── Radio / checkbox row ─────────── */
.radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-foreground);
    cursor: pointer;
}

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

/* ─── Fieldset (group of related checkboxes/radios) */
.fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0;
    border: 0;
    margin: 0;
}

.fieldset-legend {
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 0;
    margin-bottom: var(--space-1);
    color: var(--color-foreground);
}

.fieldset-description {
    font-size: var(--text-xs);
    color: var(--color-muted-foreground);
    margin: 0 0 var(--space-2) 0;
}