/*
 * Owns: shared form primitives used across public/auth pages and any
 * other module that hasn't grown its own form owner file — field
 * stacking/spacing, labels, text inputs, and the password-visibility
 * toggle. Does not own page-specific form layout/composition (that
 * belongs in the page's own CSS) or non-form components (buttons live in
 * 10_buttons.css, alerts in 16_alerts.css).
 */

.form-stack {
    display: grid;
    gap: 16px;
}

.field-stack {
    display: grid;
    gap: 7px;
}

.field-label {
    color: var(--st-text);
    font-size: .88rem;
    font-weight: 700;
}

.field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.field-label-link {
    color: var(--st-primary);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}

.field-label-link:hover,
.field-label-link:focus-visible {
    text-decoration: underline;
}

.field-control {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    background: var(--st-surface);
    color: var(--st-text);
    padding: 0 12px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.field-control:focus {
    border-color: var(--st-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
    outline: none;
}

.field-control-group {
    position: relative;
}

.field-control-group .field-control {
    padding-right: 68px;
}

.field-toggle-visibility {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--st-primary);
    font-size: .8rem;
    font-weight: 700;
    padding: 6px 8px;
    cursor: pointer;
}

.field-toggle-visibility:hover,
.field-toggle-visibility:focus-visible {
    text-decoration: underline;
    outline: none;
}