.form-group {
    margin-bottom: 20px;
}

/* Inline label/control row — the horizontal counterpart to .form-group (which
   stacks a full-width control under its label). .form-row puts a fixed-width
   label column beside the control(s) so controls line up across stacked rows.
   Vertical spacing is the container's job (e.g. a flex column with gap); set the
   label width per container via --form-row-label-width. */
.form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.form-row-label {
    flex: 0 0 var(--form-row-label-width, 5rem);
    text-align: right;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* Controls in a horizontal row size to content rather than filling the line. */
.form-row .form-control {
    width: auto;
}

.hint-text {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.form-group label.checkbox-label {
    display: flex;
    margin-bottom: 0;
    font-weight: normal;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
}

.form-group .inline input {
    width: auto;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.form-control {
    width: 100%;
    padding: 0.5rem;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--color-text);
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
    accent-color: var(--color-accent);
    flex: none;
}

/* Hint directly under a checkbox aligns with the label text, not the box */
.checkbox-label + .hint-text {
    margin: 4px 0 0 26px;
}

.form-group textarea {
    width: 100%;
    padding: 10px;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-family: inherit; /* Ensures it matches the font of your inputs */
    resize: vertical; /* Allows users to make it taller, but keeps layout from breaking horizontally */
    min-height: 100px; /* Gives a good default starting height */
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}