/* form-group.css — pattern: label + control + help/error grouping.
   The composition primitive every form field uses.  Never style raw
   <label> directly — wrap in .biq-form-group.
   See FSE_UI.md → Form Group. */

.biq-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--biq-space-2);
    margin-bottom: var(--biq-space-4);
}

.biq-form-group__label {
    font-size: var(--biq-fs-sm);
    font-weight: var(--biq-fw-medium);
    color: var(--biq-color-text-primary);
}

.biq-form-group__label--required::after {
    content: " *";
    color: var(--biq-color-danger);
    font-weight: var(--biq-fw-bold);
}

.biq-form-group__hint {
    font-size: var(--biq-fs-sm);
    color: var(--biq-color-text-muted);
    line-height: var(--biq-lh-snug);
}

.biq-form-group__error {
    display: flex;
    align-items: flex-start;
    gap: var(--biq-space-2);
    font-size: var(--biq-fs-sm);
    color: var(--biq-color-danger-strong);
    line-height: var(--biq-lh-snug);
}

.biq-form-group__error[hidden] { display: none; }

/* Inline (label beside control, narrow forms) */
.biq-form-group--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--biq-space-3);
}

.biq-form-group--inline .biq-form-group__label {
    flex: 0 0 auto;
    min-width: 8rem;
}

/* Two-column form layout */
.biq-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--biq-space-4) var(--biq-space-5);
}

@media (max-width: 720px) {
    .biq-form-grid { grid-template-columns: 1fr; }
}