/**
 * Authentication pages (Login, Register, Forgot Password)
 *
 * Shared styles for auth flows including role selector,
 * terms links, and page-specific typography.
 */

/* ─── Role Selector ─────────────────────────────────────────
   Fieldset reset for accessible radio group wrapping.
   min-width:0 prevents fieldset from blocking grid shrink. */
.auth-fieldset {
    border: 0;
    padding: 0;
    margin-inline: 0;
    min-width: 0;
}

/* Two cards side by side at every width — the descriptions are one short
   line, and stacking pushed the form below the fold on phones. */
.auth-role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}

/* Role option — the <label> wraps its radio, so the whole card (check mark
   included) is the hit area. The input stays in the DOM for keyboard and
   screen readers; it is only visually hidden. */
.auth-role {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.auth-role input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-role__box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: 100%;
    min-height: 184px;
    padding: var(--s-5) var(--s-3);
    border: 2px solid var(--sam-light);
    border-radius: var(--radius-lg);
    text-align: center;
    background: var(--sam-white);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-role:hover input:not(:checked) + .auth-role__box {
    border-color: var(--sam-brown-medium);
}

/* Selected: thick coral border, tinted fill, and a filled check mark in the
   corner — the check is the non-colour cue (WCAG 1.4.1). The inset shadow
   thickens the border without shifting the card's content. */
.auth-role input:checked + .auth-role__box {
    border-color: var(--color-action);
    box-shadow: inset 0 0 0 1px var(--color-action);
    background: var(--sam-brown-light);
}

.auth-role input:focus-visible + .auth-role__box {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Radio indicator: an empty ring when unselected, a filled coral disc with a
   white tick when selected. */
.auth-role__check {
    position: absolute;
    top: var(--s-2);
    right: var(--s-2);
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--sam-brown-medium);
    border-radius: 50%;
    background: var(--sam-white);
}

.auth-role__check svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--sam-white);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.auth-role input:checked + .auth-role__box .auth-role__check {
    border-color: var(--color-action);
    background: var(--color-action);
}

.auth-role input:checked + .auth-role__box .auth-role__check svg {
    opacity: 1;
}

.auth-role__icon {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--sam-red);
    stroke-width: 1.8;
}

.auth-role__title {
    display: block;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.auth-role__desc {
    display: block;
    font-size: var(--text-sm);
    color: var(--sam-brown-dark);
}

/* Role validation error */
.auth-role-error:not(:empty) {
    display: block;
}

/* ─── Auth Page Header ──────────────────────────────────────── */
.auth-title {
    letter-spacing: -.01em;
    margin: 0 0 6px;
}

.auth-subtitle {
    margin: 0;
}

/* ─── Terms & Login Link ──────────────────────────── */
.auth-terms a {
    text-decoration: underline;
}

.auth-login-link a {
    color: var(--color-action);
    font-weight: 700;
    text-decoration: none;
}

.auth-login-link a:hover {
    text-decoration: underline;
}

/* ─── Login Options (Remember me + Forgot password) ─────────── */
.auth-options a {
    text-decoration: none;
}

.auth-options a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .auth-options {
        flex-wrap: wrap;
        gap: var(--s-2);
    }
}

/* ─── reCAPTCHA Error ───────────────────────────────────────── */
.auth-recaptcha-error {
    display: none;
    margin-top: 8px;
}