/* Shared auth page styles */

/* Fills the space .page-content has left rather than subtracting a guessed
 * 140px of chrome from the viewport - the same banner-blind arithmetic fixed
 * on the map and table pages in CCT-322. */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 22px;
    flex: 1 1 auto;
}

.auth-card {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
}

.auth-title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.auth-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.auth-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.auth-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 17px;
    font-family: inherit;
    background: var(--gray-50);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--ocean-tint-strong);
}

.auth-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.auth-btn-primary {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary-color);
    color: var(--text-on-accent);
    transition: all var(--transition-fast);
}

.auth-btn-primary:hover {
    background: var(--primary-hover);
}

/* Cooling-down resend button (CCT-399), styled like the site's other disabled
   buttons (base.css .modal-btn.primary:disabled). */
.auth-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-btn-secondary {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    background: var(--gray-900);
    color: var(--text-on-accent);
    transition: all var(--transition-fast);
}

.auth-btn-secondary:hover {
    background: var(--slate-700);
}

.auth-btn-outline {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.auth-btn-outline:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.auth-form-group {
    margin-bottom: 16px;
}

.auth-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-toggle {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-secondary);
}

.auth-toggle a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

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

/* Inline status boxes: one shape, three palettes. .auth-notice is the neutral
   one (CCT-399) — the "wait a few minutes" resend refusal is a pace limit, not
   a failure the user did anything wrong to earn. */
.auth-error,
.auth-success,
.auth-notice {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.auth-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--red-800);
}

.auth-success {
    background: var(--green-50);
    border: 1px solid var(--success-border);
    color: var(--success);
}

.auth-notice {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--orange-820);
}

.auth-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-icon-success {
    background: var(--green-50);
}

.auth-icon-info {
    background: var(--ocean-light);
}

.auth-icon-warning {
    background: var(--amber-50);
}

.auth-message {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
}

.auth-email {
    font-weight: 600;
    color: var(--text-primary);
}

.auth-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 24px;
}

.auth-back {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

.auth-back a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

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

.password-section {
    margin-top: 0;
}

.password-toggle-wrap {
    text-align: center;
    margin-top: 20px;
}

.password-toggle {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
}

.password-toggle:hover {
    text-decoration: underline;
}

/* Centered card variant for status/confirmation pages */
.auth-card-centered {
    text-align: center;
}

.auth-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------------------------------------------------------------------------
   Referral attribution chips (account/_referral_source.html)

   Replaces a native <select> for "how did you hear about us?". A select costs
   two taps plus a scroll on mobile — roughly half this audience — and the
   question is optional, so that friction showed up directly as a ~73% skip
   rate. Chips make answering a single tap and keep every option visible, which
   also stops the answer being biased by whichever options happen to be in view.

   Built on real radio inputs (visually hidden, not display:none) so keyboard
   focus, tab order, and screen-reader semantics all survive.
--------------------------------------------------------------------------- */
.referral-group {
    margin-bottom: 14px;
}

.referral-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.referral-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.referral-chip {
    position: relative;
    display: inline-flex;
}

/* Visually hidden but still focusable — display:none would drop the input from
   the tab order and from accessibility tree. */
.referral-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.referral-chip span {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--gray-50);
    font-size: 13px;
    line-height: 1.2;
    color: var(--gray-700);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-fast), background var(--transition-fast),
        color var(--transition-fast);
}

.referral-chip span:hover {
    border-color: var(--primary-color);
}

.referral-chip input:checked + span {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-on-accent);
}

/* Focus ring mirrors .auth-input:focus so keyboard users get the same affordance. */
.referral-chip input:focus-visible + span {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--ocean-tint-strong);
}

/* The follow-up free-text answer ("which account or video?") — smaller than
   .auth-input because it is a secondary detail, not a primary credential. */
.referral-detail {
    width: 100%;
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--gray-50);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.referral-detail:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--ocean-tint-strong);
}

/* Skip affordance on the post-signup referral prompt.

   Deliberately NOT .auth-btn-secondary: that style is a heavy dark fill, which
   made "Skip" read as more prominent than the primary "Done" and would depress
   the answer rate this prompt exists to raise. Skipping must stay obviously
   available — it is what keeps the step honest — but it should not compete
   with answering. A quiet text button does both. */
.referral-skip {
    width: 100%;
    padding: 10px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--gray-500);
    cursor: pointer;
    border-radius: 8px;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.referral-skip:hover {
    color: var(--gray-700);
    background: var(--gray-50);
}