/* ============================================================
   LOGIN 3 — sign-in pages (login, signup, check email, verify) in the landing page's style.
   Shared markup lives in views/auth3.html.
   Builds on scene-base.css (tokens, header, buttons) and landing3.css (hero, form fields, loader,
   entrance animation). Plain page background: no particles, orbs or glows.
   ============================================================ */

.lp3-login { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.lp3-login__main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    padding: clamp(6.5rem, 14vh, 8.5rem) 0 clamp(2.5rem, 6vh, 4rem);
}
.lp3-login__grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

/* ---------- Hero (landing copy, sized to sit beside the card) ---------- */
.lp3-login .lp3-login__hero { padding: 0; }
.lp3-login .lp3-hero__title { font-size: clamp(2.6rem, 6.2vw, 5.8rem); }
.lp3-login .lp3-hero__lead { margin-top: 1.75rem; max-width: 44ch; }
.lp3-login__chips { margin-top: 1.75rem; }
.lp3-login__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--ink-line-strong);
    border-radius: 999px;
    background: var(--card);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.lp3-login__chip svg { width: 17px; height: 17px; color: var(--lp3-pink-ink); }

/* ---------- Sign-in card ---------- */
.lp3-login__card {
    position: relative;
    z-index: 2;
    padding: clamp(1.75rem, 3.2vw, 2.5rem);
    background: var(--card);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-lg);
}
.lp3-login__title {
    margin-top: 1.1rem;
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--ink);
}
:root[dir="rtl"] .lp3-login__title { letter-spacing: 0; line-height: 1.25; }
.lp3-login__sub { margin-top: 0.6rem; font-size: 15px; line-height: 1.55; color: var(--ink-mute); }

.rc-panel-form { display: none; margin-top: 1.75rem; }
.rc-panel-form.is-active { display: grid; gap: 1.1rem; }

.lp3-login__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lp3-login__link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--lp3-pink-ink);
    cursor: pointer;
}
.lp3-login__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.rc-pwd-wrap { position: relative; }
.lp3-login .rc-pwd-wrap input { padding-inline-end: 3.1rem; }
.rc-eye {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.35rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--ink-mute);
    font-size: 17px;
    cursor: pointer;
}
.rc-eye:hover { color: var(--ink); background: var(--ink-line); }

.lp3-login__submit { width: 100%; justify-content: center; margin-top: 0.35rem; }
.lp3-login__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.lp3-login__grow { flex: 1 1 auto; justify-content: center; }
.lp3-login .btn:disabled { opacity: 0.7; cursor: progress; }

.lp3-login .alert {
    padding: 0.8rem 1rem;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-lg);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}
.lp3-login .alert-danger { border-color: var(--lp3-err); background: color-mix(in oklab, var(--lp3-err) 12%, transparent); }
.lp3-login .alert-success { border-color: var(--lp3-ok); background: color-mix(in oklab, var(--lp3-ok) 12%, transparent); }
.lp3-login .d-none { display: none; }

.lp3-login__switch { margin-top: 1.5rem; font-size: 14.5px; color: var(--ink-mute); text-align: center; }
.lp3-login__switch a { margin-inline-start: 0.3rem; font-weight: 600; color: var(--lp3-pink-ink); text-underline-offset: 3px; }

.lp3-login__trust { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-line); }
.lp3-login__trust-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    text-align: center;
}
:root[dir="rtl"] .lp3-login__trust-label { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }
.lp3-login__trust ul {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}
.lp3-login__trust li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 13px; color: var(--ink-mute); }
.lp3-login__trust svg { width: 15px; height: 15px; color: var(--lp3-pink-ink); }

.lp3-login__foot {
    padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ink-line);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}

/* ---------- Hero row: lead + chips beside a minimal iPhone lock screen ---------- */
.lp3-login__hero-row {
    margin-top: 1.75rem;
    display: flex;
    align-items: flex-start;
    gap: clamp(1.5rem, 3vw, 2.75rem);
}
.lp3-login__hero-copy { flex: 1 1 0; min-width: 0; }
.lp3-login .lp3-login__hero-copy .lp3-hero__lead { margin-top: 0; }

.lp3-push {
    flex: none;
    width: 236px;
    height: 330px;
    padding: 7px 7px 0;
    border-radius: 42px 42px 0 0;
    background: #0d0f14;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 30px 70px -30px rgba(191, 75, 143, 0.55);
    /* only the top of the phone is shown; it fades out toward the bottom */
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
    mask-image: linear-gradient(180deg, #000 72%, transparent);
}
.lp3-push__screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 35px 35px 0 0;
    padding: 12px 10px 0;
    background:
        radial-gradient(120% 70% at 85% 0%, rgba(191, 75, 143, 0.75), transparent 60%),
        radial-gradient(90% 60% at 0% 40%, rgba(113, 60, 250, 0.6), transparent 65%),
        linear-gradient(180deg, #1a1033, #0b0a1a);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    direction: ltr;   /* the device chrome stays LTR; notification text sets its own direction */
}
.lp3-push__island {
    display: block;
    width: 74px;
    height: 22px;
    margin: 0 auto;
    border-radius: 999px;
    background: #000;
}
.lp3-push__clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 14px 0 14px;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
}
.lp3-push__date { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.lp3-push__time {
    font-size: 54px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.lp3-push__stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lp3-push__item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-height: 110px;
    margin-bottom: 7px;
    padding: 9px 10px;
    overflow: hidden;
    border-radius: 17px;
    background: rgba(245, 245, 250, 0.78);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    color: #111;
    transform-origin: top center;
    transition: max-height 0.45s cubic-bezier(.2, .8, .2, 1), margin 0.45s cubic-bezier(.2, .8, .2, 1),
                padding 0.45s cubic-bezier(.2, .8, .2, 1), opacity 0.4s ease, transform 0.5s cubic-bezier(.2, .9, .25, 1.15);
}
/* newest slides down from under the clock; the oldest shrinks away at the bottom */
.lp3-push__item.is-entering { max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(-18px) scale(0.94); }
.lp3-push__item.is-leaving { max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: scale(0.92); }
.lp3-push__item:nth-child(2) { opacity: 0.94; }
.lp3-push__item:nth-child(3) { opacity: 0.82; }

.lp3-push__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 8px;
}
.lp3-push__icon svg { width: 18px; height: 18px; }
.lp3-push__icon--wa { background: #25d366; }
.lp3-push__icon--sms { background: linear-gradient(180deg, #5af575, #20c03a); }
.lp3-push__icon--rc { background: #070b1f; }
.lp3-push__icon img { width: 100%; height: 100%; display: block; }
.lp3-push__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.3; }
:root[dir="rtl"] .lp3-push__body { direction: rtl; text-align: right; font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif; }
.lp3-push__meta {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.55);
}
.lp3-push__body strong { font-size: 12.5px; font-weight: 600; }
.lp3-push__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(17, 17, 17, 0.85);
}

/* the phone sits beside the copy on wide screens only */
@media (max-width: 1180px) and (min-width: 901px) { .lp3-push { width: 210px; height: 300px; } .lp3-push__time { font-size: 46px; } }
@media (max-width: 900px) { .lp3-push { display: none; } }
@media (prefers-reduced-motion: reduce) { .lp3-push__item { transition: none; } }

/* ---------- Signup ---------- */
.lp3-signup .lp3-login__grid { align-items: start; }
.lp3-signup .lp3-login__hero { position: sticky; top: 7.5rem; }
.lp3-login__form { display: grid; gap: 1.1rem; margin-top: 1.75rem; }
.rc-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }
.lp3-field input.is-invalid { border-color: var(--lp3-err); }
.rc-field-error { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--lp3-err); }
.rc-field-error:empty { display: none; }
.rc-field-hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }
.lp3-field .rc-terms {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink-soft);
    cursor: pointer;
}
.rc-terms input {
    flex: none;
    width: 18px;
    min-height: 0;
    height: 18px;
    margin: 1px 0 0;
    padding: 0;
    accent-color: var(--lp3-pink);
}
.rc-terms a { font-weight: 600; color: var(--lp3-pink-ink); text-underline-offset: 3px; }
@media (max-width: 900px) {
    .lp3-signup .lp3-login__hero { position: static; }
}
@media (max-width: 520px) {
    .rc-field-row { grid-template-columns: minmax(0, 1fr); }
}
/* paired fields stack whenever the card itself is too narrow for two columns, whatever the viewport */
.lp3-signup .lp3-login__card { width: 100%; max-width: 580px; justify-self: end; container-type: inline-size; }
@container (max-width: 440px) {
    .rc-field-row { grid-template-columns: minmax(0, 1fr); }
}
/* a sticky hero taller than the window would be cut off, so only pin it when there is room */
@media (max-height: 760px) {
    .lp3-signup .lp3-login__hero { position: static; }
}
@media (max-width: 1180px) and (min-width: 901px) {
    .lp3-signup .lp3-login__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(2rem, 4vw, 3rem); }
    .lp3-signup .lp3-hero__title { font-size: clamp(2.6rem, 5.6vw, 4.4rem); }
    .lp3-signup .lp3-push { display: none; }
}
@media (max-width: 560px) {
    .lp3-login__form { gap: 1rem; margin-top: 1.35rem; }
    .rc-field-row { gap: 1rem; }
}
@media (pointer: coarse) {
    .rc-terms input { width: 22px; height: 22px; margin-top: 0; }
    .lp3-field .rc-terms { gap: 0.75rem; }
}

/* ---------- Check email / verify notices: one centred card ---------- */
.lp3-notice__card { max-width: 480px; margin: 0 auto; text-align: center; }
.lp3-notice__icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--lp3-pink);
    color: #fff;
    font-size: 28px;
}
.lp3-notice__icon--warn { background: #b45309; }
.lp3-notice__card .lp3-login__title { margin-top: 1.25rem; }
.lp3-notice__email { margin-top: 0.75rem; font-weight: 600; color: var(--ink); word-break: break-all; }
.lp3-notice__email:empty { display: none; }
.lp3-notice__form { display: grid; gap: 0.9rem; margin-top: 1.5rem; text-align: start; }

/* ---------- Entrance: the card rises after the hero lines (see "Page loader + hero entrance" in landing3.css) ---------- */
.lp3-js .lp3-login__card,
.lp3-js .lp3-push,
.lp3-js .lp3-login__chips { transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); }
.lp3-js:not(.lp3-ready) .lp3-login__card,
.lp3-js:not(.lp3-ready) .lp3-push,
.lp3-js:not(.lp3-ready) .lp3-login__chips { opacity: 0; transform: translateY(28px); }
.lp3-ready .lp3-push { transition-delay: 0.55s; }
.lp3-ready .lp3-login__chips { transition-delay: 0.6s; }
.lp3-ready .lp3-login__card { transition-delay: 0.3s; }

/* ---------- Header: only utilities here, no nav panel ---------- */
.lp3-login__nav { margin-inline-start: auto; }
@media (max-width: 980px) {
    .lp3-login .lp3-login__nav { flex-direction: row; width: auto; }
    :root[dir="rtl"] .lp3-login .brand { width: auto; }
    :root[dir="rtl"] .lp3-login .lp3-login__nav { width: auto; margin-inline-start: auto; }
}

/* ---------- Notched devices: keep content clear of the rounded corners / camera cut-out in landscape ---------- */
.lp3-login .lp3-wrap,
.lp3-login .site-header .container {
    padding-left: max(clamp(1.25rem, 3vw, 2.5rem), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(1.25rem, 3vw, 2.5rem), env(safe-area-inset-right, 0px));
}
.lp3-login__label-row { flex-wrap: wrap; row-gap: 0.25rem; }
.lp3-login__card { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Wide screens: keep the card a comfortable width ---------- */
.lp3-login:not(.lp3-signup):not(.lp3-notice) .lp3-login__card { width: 100%; max-width: 480px; justify-self: end; }
@media (min-width: 1600px) {
    .lp3-login .lp3-wrap { max-width: 1440px; }
}

/* ---------- Small laptops / tablets landscape: tighter columns ---------- */
@media (max-width: 1180px) and (min-width: 901px) {
    .lp3-login:not(.lp3-signup) .lp3-login__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(2rem, 4vw, 3rem); }
    .lp3-login .lp3-hero__title { font-size: clamp(2.6rem, 5.6vw, 4.4rem); }
}

/* ---------- Narrow screens: one centred column, sign-in card right under a compact hero ---------- */
@media (max-width: 900px) {
    .lp3-login__main { padding-top: clamp(5.5rem, 12vh, 7rem); }
    .lp3-login__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; justify-items: center; }
    .lp3-login .lp3-login__hero,
    .lp3-login .lp3-login__card:not(.lp3-notice__card) { width: 100%; max-width: 560px; justify-self: center; }
    .lp3-login .lp3-hero .eyebrow { margin-bottom: 1rem; }
    .lp3-login .lp3-hero__title { font-size: clamp(2.1rem, 9vw, 3.6rem); }
    .lp3-login .lp3-hero__lead { display: none; }
    .lp3-login__hero-row { margin-top: 0; }
    .lp3-login__chips { margin-top: 1.25rem; }
}

/* ---------- Phones: the form is the priority, so the hero shrinks to a short intro ---------- */
@media (max-width: 560px) {
    .lp3-login__main { padding-bottom: 2rem; }
    .lp3-login__grid { gap: 1.5rem; }
    .lp3-login .lp3-hero__title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
    .lp3-login .lp3-hero__title > span { display: inline; }
    .lp3-login .lp3-hero__title > span::after { content: " "; }
    .lp3-login__chips { display: none; }
    .lp3-login__title { margin-top: 0.75rem; font-size: clamp(1.6rem, 7vw, 2rem); }
    .lp3-login__sub { font-size: 14px; }
    .rc-panel-form { margin-top: 1.35rem; }
    /* 16px stops iOS Safari from zooming the page when an input gets focus */
    .lp3-login .lp3-field input:not([type="checkbox"]) { font-size: 16px; }
    .lp3-login__foot { text-align: center; }
}
@media (max-width: 480px) {
    .lp3-login__card { padding: 1.5rem 1.1rem; border-radius: var(--radius-lg); }
    .lp3-login__row .btn { width: 100%; justify-content: center; }
}
@media (max-width: 360px) {
    .lp3-login .lp3-wrap,
    .lp3-login .site-header .container { padding-left: max(0.85rem, env(safe-area-inset-left, 0px)); padding-right: max(0.85rem, env(safe-area-inset-right, 0px)); }
    .lp3-login__card { padding: 1.25rem 0.9rem; }
    .lp3-login .lp3-hero .eyebrow { font-size: 10px; letter-spacing: 0.12em; }
    .lp3-login .brand__logo .rc-logo-lockup { width: 100px; }
    .lp3-login .nav__utilities { gap: 0.4rem; }
}

/* ---------- Short viewports (phones in landscape, small laptop windows): don't force vertical centring ---------- */
@media (max-height: 560px) and (orientation: landscape) {
    .lp3-login__main { align-items: flex-start; padding-top: 5rem; padding-bottom: 1.5rem; }
    .lp3-login .site-header { padding: 0.5rem 0; }
    .lp3-login .lp3-hero__lead,
    .lp3-login__chips { display: none; }
    .lp3-login .lp3-hero__title { font-size: clamp(1.8rem, 5vw, 2.8rem); }
    .lp3-login__trust { display: none; }
}

/* ---------- Touch devices: finger-sized targets ---------- */
@media (pointer: coarse) {
    .rc-eye { width: 44px; height: 44px; inset-inline-end: 0.15rem; }
    .lp3-login .rc-pwd-wrap input { padding-inline-end: 3.3rem; }
    .lp3-login__link { padding: 0.4rem 0; margin: -0.4rem 0; }
    .lp3-login__switch a { display: inline-block; padding: 0.35rem 0; }
    .lp3-login .lp3-field input:not([type="checkbox"]) { min-height: 48px; }
    .lp3-login .locale a { padding: 0.5rem 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .lp3-js:not(.lp3-ready) .lp3-login__card,
    .lp3-js:not(.lp3-ready) .lp3-login__chips { transform: none; }
}

/* ---------- Login on narrow screens: the lock-screen phone moves below the sign-in card ----------
   The phone lives inside the hero (before the card in the markup), so the hero is flattened into the page grid
   and the phone is reordered after the card; the form still comes first. Signup keeps it hidden. */
@media (max-width: 900px) {
    .lp3-login:not(.lp3-signup) .lp3-login__grid {
        grid-template-columns: minmax(0, 560px);
        justify-content: center;
        justify-items: stretch;
        row-gap: 0;
    }
    .lp3-login:not(.lp3-signup) .lp3-login__hero,
    .lp3-login:not(.lp3-signup) .lp3-login__hero-row { display: contents; }
    .lp3-login:not(.lp3-signup) .lp3-login__hero > .eyebrow { justify-self: start; }
    .lp3-login:not(.lp3-signup) .lp3-login__card { margin-top: 2rem; }
    .lp3-login:not(.lp3-signup) .lp3-push {
        display: block;
        order: 2;
        justify-self: center;
        margin-top: 2.5rem;
    }
}
@media (max-width: 560px) {
    .lp3-login:not(.lp3-signup) .lp3-login__card { margin-top: 1.5rem; }
    .lp3-login:not(.lp3-signup) .lp3-push { margin-top: 2rem; }
}