/* Shore Pass — Login · Register
   Translated from "Shore Pass Design/screens-settings.jsx" › LoginScreen, RegisterScreen.

   One root class — .scr-auth — wraps both screens, and EVERY rule below is scoped
   under it so nothing here can leak into another screen's stylesheet.
   Colours come from the design tokens only, so dark mode is inherited for free.

   The prototype renders these as full phone screens on var(--sp-bg); here they sit on
   the layouts/auth page, so each screen is reproduced inside one bordered panel
   (.scr-auth__screen) that stands in for the phone viewport. */

.scr-auth { width: 100%; display: grid; justify-items: center; }
.scr-auth *, .scr-auth *::before, .scr-auth *::after { box-sizing: border-box; }

/* ──────────────── The phone-screen panel ──────────────── */
.scr-auth__screen {
    width: 100%;
    background: var(--sp-bg);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-xl);
    box-shadow: var(--sp-shadow-2);
    overflow: hidden;
}
.scr-auth--login  .scr-auth__screen { max-width: 392px; }
.scr-auth--register .scr-auth__screen { max-width: 440px; }

/* Screen-reader-only label — the prototype's inputs carry placeholders only */
.scr-auth__sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   Shared form atoms — prototype `inp` / CTA / error-chip styles
   ============================================================ */
.scr-auth__field { display: block; margin: 0; }

.scr-auth__lab {
    font-size: 12px; font-weight: 700; color: var(--sp-slate);
    margin-bottom: 6px; display: block;
}
.scr-auth__lab small { font-weight: 500; color: var(--sp-slate-2); }
.scr-auth__req { color: var(--sp-red); }

.scr-auth__input {
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--sp-line);
    background: var(--sp-surface);
    font-family: var(--sp-font-body);
    font-size: 14px;
    color: var(--sp-ink);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.scr-auth__input::placeholder { color: var(--sp-slate-2); }
.scr-auth__input:focus {
    border-color: var(--sp-red);
    box-shadow: 0 0 0 3px var(--sp-red-soft);
}
.scr-auth__field.is-invalid .scr-auth__input {
    border-color: var(--sp-red);
    background: var(--sp-red-tint);
}

/* Select — prototype sets WebkitAppearance:none, so we draw our own caret */
.scr-auth__selwrap { position: relative; display: block; }
select.scr-auth__input { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
.scr-auth__selwrap::after {
    content: ''; position: absolute; right: 15px; top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--sp-slate-2);
    border-bottom: 2px solid var(--sp-slate-2);
    transform: rotate(45deg);
    pointer-events: none;
}

/* Password wrapper — keeps the existing [data-pw] show/hide button working */
.scr-auth__inwrap { position: relative; display: block; }
.scr-auth__inwrap .scr-auth__input { padding-right: 42px; }
.scr-auth__eye {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; padding: 4px; line-height: 1;
    font-size: 15px; opacity: .5; cursor: pointer;
}
.scr-auth__eye:hover, .scr-auth__eye.is-on { opacity: 1; }

/* Inline field error + form-level alert — prototype's red-soft chip */
.scr-auth__err {
    display: block; margin-top: 5px;
    font-size: 11.5px; font-weight: 600; color: var(--sp-red);
}
.scr-auth__alert {
    font-size: 12.5px; color: var(--sp-red); line-height: 1.45;
    padding: 9px 12px; border-radius: 8px; background: var(--sp-red-soft);
}
.scr-auth__note {
    font-size: 12.5px; color: var(--sp-green); line-height: 1.45;
    padding: 9px 12px; border-radius: 8px; background: var(--sp-green-soft);
}

/* Primary CTA */
.scr-auth__cta {
    width: 100%; padding: 16px; border: none; border-radius: 14px;
    background: var(--sp-red); color: #fff;
    font-family: var(--sp-font-display); font-size: 16px; font-weight: 700;
    letter-spacing: .03em; cursor: pointer;
    transition: background .15s ease, transform .08s ease;
}
.scr-auth__cta:hover { background: var(--sp-red-deep); }
.scr-auth__cta:active { transform: scale(.99); }

/* Secondary "or" rule + Google button — kept from the live app, drawn in the
   prototype's visual language (12px radius, 1.5px line border, surface fill). */
.scr-auth__or {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--sp-slate-2);
    text-transform: uppercase; letter-spacing: .1em;
}
.scr-auth__or::before, .scr-auth__or::after {
    content: ''; flex: 1; height: 1px; background: var(--sp-line);
}
.scr-auth__google {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 14px; border-radius: 12px;
    border: 1.5px solid var(--sp-line); background: var(--sp-surface);
    font-family: var(--sp-font-body); font-size: 14px; font-weight: 700;
    color: var(--sp-ink); text-decoration: none; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.scr-auth__google:hover:not(:disabled) { border-color: var(--sp-slate-2); background: var(--sp-bg-2); }
.scr-auth__google:disabled { opacity: .6; cursor: not-allowed; }
.scr-auth__g {
    font-family: var(--sp-font-display); font-size: 16px; font-weight: 700;
    color: var(--sp-blue);
}

/* Footer switcher — "No account? Register" / "Have an account? Sign In" */
.scr-auth__foot { text-align: center; font-size: 14px; color: var(--sp-slate); margin: 0; }
.scr-auth__foot a { color: var(--sp-red); font-weight: 700; text-decoration: none; }
.scr-auth__foot a:hover { text-decoration: underline; }

/* ============================================================
   LOGIN — centred column: stamp · title · sub · fields · CTA
   ============================================================ */
.scr-auth--login .scr-auth__screen {
    display: flex; flex-direction: column; align-items: center;
    padding: 46px 24px 40px;
}
.scr-auth__stamp { display: flex; justify-content: center; }
/* The shared partials/stamp badge lands on top of its own "ACCESS GRANTED" line at
   these sizes — drop it clear. Scoped to this screen; app.css is left untouched. */
.scr-auth .sp-stamp--lg .sp-stamp__check { bottom: -15px; }
.scr-auth .sp-stamp--sm .sp-stamp__check { bottom: -9px; }
/* …and the sm box is ~3px shorter than its own five lines of type. */
.scr-auth .sp-stamp--sm { height: 64px; }
.scr-auth__h1 {
    font-family: var(--sp-font-display); font-size: 26px; font-weight: 700;
    color: var(--sp-ink); text-align: center;
    margin: 20px 0 6px; line-height: 1.15;
}
.scr-auth__lede {
    font-size: 13.5px; color: var(--sp-slate); text-align: center;
    margin: 0 0 28px; line-height: 1.5;
}
.scr-auth__form {
    width: 100%; display: flex; flex-direction: column; gap: 12px;
}
.scr-auth__forgot {
    text-align: center; font-size: 12.5px; font-weight: 600;
    color: var(--sp-blue); text-decoration: none; margin-top: -2px;
}
.scr-auth__forgot:hover { text-decoration: underline; }
.scr-auth--login .scr-auth__foot { margin-top: 24px; }

/* ============================================================
   REGISTER — header strip + scrolling body, exactly as the prototype
   ============================================================ */
.scr-auth__head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 12px;
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-line);
}
.scr-auth__back {
    width: 36px; height: 36px; flex: 0 0 auto;
    border-radius: 10px; background: var(--sp-bg);
    border: 1px solid var(--sp-line);
    display: grid; place-items: center; color: var(--sp-ink);
    text-decoration: none; cursor: pointer;
    transition: border-color .15s ease;
}
.scr-auth__back:hover { border-color: var(--sp-red); color: var(--sp-red); }
/* No "chevron-left" in the icon set — chevron-right, mirrored. */
.scr-auth .scr-auth__backico { width: 20px; height: 20px; display: block; transform: rotate(180deg); }
.scr-auth__head .sp-stamp { flex: 0 0 auto; }
.scr-auth__htitle {
    flex: 1; min-width: 0; margin: 0;
    font-family: var(--sp-font-display); font-size: 20px; font-weight: 700;
    color: var(--sp-ink); line-height: 1.15;
}

.scr-auth__body {
    padding: 18px 16px 26px;
    display: flex; flex-direction: column; gap: 12px;
}
.scr-auth__intro {
    font-size: 13.5px; color: var(--sp-slate); line-height: 1.5; margin: 0;
}
.scr-auth__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Terms checkbox */
.scr-auth__check {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 12.5px; color: var(--sp-slate); line-height: 1.5; cursor: pointer;
    margin: 2px 0 0;
}
.scr-auth__check input {
    margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 auto;
    accent-color: var(--sp-red);
}
.scr-auth__check a { color: var(--sp-red); font-weight: 700; text-decoration: none; }
.scr-auth__check a:hover { text-decoration: underline; }
.scr-auth__check.is-invalid { color: var(--sp-red); }

.scr-auth--register .scr-auth__cta { margin-top: 6px; }
.scr-auth--register .scr-auth__foot { margin-top: 8px; }

/* ──────────────── Narrow viewports ──────────────── */
@media (max-width: 420px) {
    .scr-auth--login .scr-auth__screen { padding: 36px 18px 32px; }
    .scr-auth__pair { grid-template-columns: 1fr; }
}

/* ── Verify-email step ─────────────────────────────────────────────────────
   Shares the login/register shell; only the code input and the two small
   helper rows are new. */
.scr-auth__code {
    text-align: center;
    font-family: var(--sp-font-mono);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .34em;
    text-indent: .34em;      /* re-centres text that letter-spacing pushes left */
    padding-block: 14px;
}
.scr-auth__note {
    background: var(--sp-green-soft); color: var(--sp-green);
    border-radius: var(--sp-r-md); padding: 10px 14px;
    font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.scr-auth__hint { font-size: 12px; color: var(--sp-slate); text-align: center; margin: 10px 0 0; }
.scr-auth__resend { text-align: center; margin-top: 14px; }
.scr-auth__linkbtn {
    background: none; border: none; padding: 0;
    color: var(--sp-blue); font: 600 13px var(--sp-font-body); cursor: pointer;
}
.scr-auth__linkbtn:hover { text-decoration: underline; }

/* Why you were sent here (requireLogin) — informational, not a failure. */
.scr-auth__alert--why {
    background: var(--sp-surface-2, #eef2f7);
    border-color: var(--sp-line);
    color: var(--sp-slate);
}