/* ==========================================================================
   RoadRanger — Auth (Sign In / Sign Up / Verify)
   Same system as the landing page (see DESIGN.md): ink/paper/dark palette,
   hazard-yellow as the one accent, Archivo display, Inter body, IBM Plex
   Mono labels, flat no-shadow surfaces, full-pill buttons. Reuses .brand,
   .brand-logo and .cta-pill from landing.css directly rather than
   redefining them. Structure only (split info panel / form panel) borrows
   from a reference the client shared; none of that reference's visual
   language (navy/white, illustration, styling) carries over.
   ========================================================================== */

body.rr-auth {
    margin: 0;
    min-height: 100vh;
    background: var(--dark);
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.rr-auth ::selection { background: var(--yellow); color: var(--yellow-ink); }
.rr-auth :focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.rr-auth ::-webkit-scrollbar { width: 12px; }
.rr-auth ::-webkit-scrollbar-track { background: var(--dark); }
.rr-auth ::-webkit-scrollbar-thumb { background: var(--dark-line); border: 3px solid var(--dark); border-radius: 6px; }

.rr-auth h1, .rr-auth h2 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
    text-wrap: balance;
}

/* ---------- shell: split panel, same device as the landing hero ---------- */
.auth-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.auth-panel {
    position: relative;
    background: var(--yellow);
    color: var(--yellow-ink);
    padding: clamp(28px, 5vw, 44px) var(--edge);
    display: flex;
    flex-direction: column;
    gap: 40px;
    transition: background 0.4s ease, color 0.4s ease;
}

.auth-panel .brand { color: var(--yellow-ink); }

/* ---------- entrance: same rise-and-settle as the landing hero (reuses
   the hero-rise keyframe already defined in landing.css) ---------- */
.auth-panel .brand,
.auth-panel-copy h1,
.auth-panel-copy .lede,
.auth-stats,
.auth-back {
    animation: hero-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-panel-copy h1 { animation-delay: 0.06s; }
.auth-panel-copy .lede { animation-delay: 0.14s; }
.auth-stats { animation-delay: 0.22s; }
.auth-back { animation-delay: 0.3s; }

.auth-form-head,
.seg-toggle,
form.auth-form.active .field,
form.auth-form.active .field-row,
form.auth-form.active .terms-row,
form.auth-form.active .cta-pill,
form.auth-form.active .method-toggle {
    animation: hero-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-form-head { animation-delay: 0.1s; }
.seg-toggle { animation-delay: 0.16s; }
form.auth-form.active .field:nth-child(1),
form.auth-form.active .field-row:nth-child(1) { animation-delay: 0.2s; }
form.auth-form.active .field:nth-child(2),
form.auth-form.active .field-row:nth-child(2),
form.auth-form.active .method-toggle { animation-delay: 0.25s; }
form.auth-form.active .field:nth-child(3),
form.auth-form.active .field-row:nth-child(3) { animation-delay: 0.3s; }
form.auth-form.active .field:nth-child(4),
form.auth-form.active .field-row:nth-child(4) { animation-delay: 0.35s; }
form.auth-form.active .field:nth-child(5) { animation-delay: 0.4s; }
form.auth-form.active .terms-row { animation-delay: 0.42s; }
form.auth-form.active .cta-pill { animation-delay: 0.46s; }

/* Sign Up (and the verify step that follows it) get the paper tone instead
   of yellow, so tabbing between Sign In and Sign Up is never "the same
   screen twice" even before anyone scrolls. */
.auth-panel.is-paper {
    background: var(--paper);
    color: var(--ink);
}

.auth-panel.is-paper .brand,
.auth-panel.is-paper .auth-back { color: var(--ink); }

.auth-panel.is-paper .lede { color: var(--paper-dim); }
.auth-panel.is-paper .auth-stats { border-top-color: rgba(17, 17, 16, 0.14); }

.auth-panel-copy h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.02;
    max-width: 12ch;
}

.auth-panel-copy .lede {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.55;
    max-width: 34ch;
    color: rgba(23, 20, 0, 0.72);
}

.auth-stats {
    display: flex;
    gap: 20px;
    padding-top: 20px;
    margin-top: 4px;
    border-top: 1px solid rgba(23, 20, 0, 0.16);
}

.auth-stats div { display: flex; flex-direction: column; gap: 2px; }
.auth-stats strong { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.auth-stats span { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.72; }

.auth-back {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--yellow-ink);
    opacity: 0.75;
    width: fit-content;
}

.auth-back:hover { opacity: 1; }
.auth-back svg { width: 13px; height: 13px; }

/* ---------- form panel ---------- */
.auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vh, 40px) var(--edge);
}

.auth-form-inner { width: 100%; max-width: 420px; }

.auth-form-head { margin-bottom: 18px; }

.auth-form-head h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.auth-form-head p {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--dark-dim);
}

/* segmented pill toggle: shared by the Sign In / Sign Up tabs and the
   password / magic-link method switch */
.seg-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--dark-line);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 18px;
}

.seg-toggle .tab,
.seg-toggle .method-btn {
    flex: 1;
    text-align: center;
    padding: 9px 14px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--dark-dim);
    cursor: pointer;
    transition: background 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease, transform 0.1s ease;
}

.seg-toggle .tab.active,
.seg-toggle .method-btn.active {
    background: var(--yellow);
    color: var(--yellow-ink);
}

.seg-toggle .tab:active,
.seg-toggle .method-btn:active { transform: scale(0.96); }

.method-toggle.seg-toggle { margin-bottom: 14px; }
.method-toggle .method-btn { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; text-transform: uppercase; }

/* ---------- forms ---------- */
form.auth-form { display: none; flex-direction: column; }
form.auth-form.active { display: flex; }

.field { display: flex; flex-direction: column; margin-bottom: 12px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.field label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dark-dim);
    margin-bottom: 6px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field input[type="date"],
.field select {
    appearance: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--dark-line);
    border-radius: 10px;
    padding: 11px 13px;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.field input:active { transform: scale(0.995); }

.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a97' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

.field select option { background: var(--dark); color: #fff; }

.field input::placeholder { color: var(--dark-dim); opacity: 0.8; }

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--yellow);
    background: rgba(255, 255, 255, 0.08);
}

.field-hint {
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--dark-dim);
}

.terms-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.terms-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
    accent-color: var(--yellow);
}

.terms-row label {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dark-dim);
}

.terms-row a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* buttons: reuse .cta-pill exactly; only widen it to the field's width and
   reset native <button> chrome (the landing page only ever used .cta-pill
   on <a>, which has no default border/cursor to strip) */
button.cta-pill {
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
}

.auth-form .cta-pill,
.auth-form-inner > .cta-pill { width: 100%; justify-content: center; margin-top: 4px; }

/* press feedback: a quick, slightly-springy scale-down on tap/click,
   the "apple" tactile feel the flat system was missing */
.cta-pill { transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease; }
.cta-pill:active { transform: translateY(0) scale(0.96); }

/* loading state: swapped in on submit so clicking never feels like
   nothing happened while the request is in flight */
.cta-pill.is-loading {
    pointer-events: none;
    opacity: 0.82;
}

.cta-pill.is-loading .btn-label { opacity: 0.85; }

.btn-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(23, 20, 0, 0.28);
    border-top-color: var(--yellow-ink);
    animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

.link-btn.is-loading { opacity: 0.6; pointer-events: none; }

/* ---------- alerts: flat tint, no left border ---------- */
.alert {
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.45;
}

.alert-error {
    background: rgba(216, 74, 63, 0.14);
    color: #ff9d94;
}

.alert-success {
    background: rgba(255, 197, 61, 0.14);
    color: var(--yellow);
}

/* ---------- verify: mechanical-counter numeral input ---------- */
.otp-input {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    padding: 18px 14px !important;
    font-variant-numeric: tabular-nums;
}

.verify-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--dark-dim);
    cursor: pointer;
}

.link-btn:hover { color: var(--yellow); }
.verify-footer-divider { color: var(--dark-line); font-size: 11px; }
.inline-form { display: inline; }

/* ---------- mobile: compact the hero so the actual form (the task
   someone opened this page for) isn't pushed a full screen down below
   marketing copy -- same content, just not fighting the form for the
   first viewport. ---------- */
@media (max-width: 980px) {
    /* Slim branded header instead of the full hero: just the logo -- the
       marketing copy/stats/back-link are what was pushing the actual
       form off the first screen, so they're dropped here, not shrunk. */
    .auth-panel {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 20px var(--edge);
        gap: 12px;
    }

    .auth-panel .brand-logo { height: 44px; }
    .auth-panel .brand { font-size: 19px; }
    .auth-panel-copy,
    .auth-stats,
    .auth-back { display: none; }

    /* Top-align instead of vertically centering -- a short form (Sign In)
       centered in a tall mobile viewport leaves an awkward empty gap
       above it instead of starting right under the header. .auth-form-panel
       is a row-direction flex container, so align-items (not
       justify-content) is what actually controls its vertical position. */
    .auth-form-panel { align-items: flex-start; padding: 18px var(--edge) clamp(24px, 6vh, 40px); }

    /* First/Last name, Phone/Gender, Password/Confirm -- one column on
       mobile instead of a tight side-by-side squeeze. */
    .field-row { flex-direction: column; gap: 0; }

    /* A touch more compact than desktop, to balance the now-bigger header. */
    .auth-form-head h2 { font-size: 1.3rem; }
    .field input[type="text"],
    .field input[type="email"],
    .field input[type="password"],
    .field input[type="tel"],
    .field input[type="date"],
    .field select {
        padding: 9px 12px;
        font-size: 13.5px;
    }
    .seg-toggle .tab,
    .seg-toggle .method-btn { padding: 8px 12px; font-size: 12.5px; }
}

/* ---------- desktop split ---------- */
@media (min-width: 981px) {
    .auth-shell { flex-direction: row; }

    .auth-panel {
        flex: 0 0 42%;
        min-height: 100vh;
        justify-content: space-between;
        padding: clamp(40px, 5vw, 64px);
    }

    .auth-panel-copy { margin: auto 0; }

    .auth-form-panel { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .rr-auth * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}