/* /css/pages/login.css
 *
 * Login page only. Most of the form layout comes from forms.css
 * (.auth-container, .form-group, .form-control). This stylesheet
 * covers the small login-specific bits — currently just the
 * "Keep me signed in" pill.
 *
 * Class hierarchy:
 *   .login-remember     — right-aligned pill wrapping checkbox + label
 *
 * Convention note: kept page-scoped because the pill treatment is
 * specific to login's visual rhythm (small, right-anchored, modest).
 * If another form ever needs the same shape, promote to forms.css as
 * a generic .form-checkbox-row.
 */

/* ============================================================================
 * Remember-me pill
 *
 * The .form-control wrapper inherits .form-control's default
 * "margin-bottom: --space-4". We override its layout to a right-anchored
 * inline pill instead of the usual stacked label-above-input.
 *
 * `align-self: flex-end` works inside .form-group (which is a flex column);
 * `margin-left: auto` is the safety net when this is rendered outside a
 * flex parent.
 * ============================================================================ */

.login-help {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.login-forgot {
    flex: 1;
}

.login-remember {
    /* Inline Pill Shape */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin: 0 0 0 auto; /* right-align inside the form */
    align-self: flex-end;
    background: var(--color-brown-cream);
    border: 1px solid var(--color-brown-soft);
    border-radius: var(--radius-round);
    transition: border-color var(--transition-fast),
    background var(--transition-fast);
}

/* Subtle hover treatment so the pill reads as interactive */
.login-remember:hover {
    background: var(--color-bg);
    border-color: var(--color-green-bright);
}

/* The label inside the pill: tighter, no extra margin (replaces the
 * inline style="margin:0; font-weight:500;" from the template). */
.login-remember label {
    margin: 0;
    color: var(--color-brown-deep);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* Checkbox inside the pill: small, accent-colored to match the brand */
.login-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-green-bright);
}