/* ==========================================================================
   auth.css  —  Sindo Ferry authentication (Login / Register / Forgot / Verify)
   FULL-BLEED SPLIT-SCREEN. Everything scoped under #Auth.

   Sizing convention
     • Desktop rules use fixed px. The panel is now the whole viewport, so vw
       sizing would scale type and controls up on wide monitors with nothing
       capping it — 36px headings became 58px at 2560px. Fixed px keeps the
       form column identical from 1280px up; only the panels get wider.
     • @media (max-width:1023px) stays fluid vw against 430px (px / 4.3),
       which suits the narrow, well-bounded phone range.

   Layout
     #Auth        full-viewport flex container. Its gradient shows only behind
                  the OAuth result card, which is still a floating card.
     .auth-shell  full-bleed white split — scene left, form right.
     .auth-scene  42% of the width, capped at 720px so it cannot dominate an
                  ultrawide; the form column stays centred in the remainder.
     .auth-card   the form's content column (440px, 560px on --wide).
   ========================================================================== */

#Auth {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
    background:
        radial-gradient(55% 45% at 85% 10%, rgba(254, 220, 0, 0.16), transparent 70%),
        radial-gradient(65% 55% at 8% 92%, rgba(1, 105, 175, 0.20), transparent 70%),
        linear-gradient(160deg, #eaf4fd 0%, #cfe6fa 55%, #bfe0f7 100%);
}

/* _AuthLayout deliberately ships a slim CSS set (master + shared-element) with
   no Bootstrap utilities, so `.d-none` resolves to nothing on these pages —
   the phone-number error rendered permanently visible on Register, and
   userRegister.js / user.js both reset that error by ADDING `d-none`.
   Scoped here so the utility behaves as the markup and scripts expect. */
#Auth .d-none { display: none !important; }

/* ── Full-bleed split shell ────────────────────────────────────────────── */
#Auth .auth-shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-self: stretch;
    width: 100%;
    min-height: 100vh;
    background: #fff;
}

/* ── Left cartoon-ocean scene ──────────────────────────────────────────── */
#Auth .auth-scene {
    position: relative;
    flex: 0 0 42%;
    max-width: 720px;
    min-width: 380px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 44px 250px;   /* bottom clears the absolutely-positioned water */
    box-sizing: border-box;
    background: linear-gradient(180deg, #0a69b2 0%, #0169af 48%, #054f99 100%);
    color: #fff;
}

/* Reversed logo, top-left of the blue panel */
#Auth .auth-scene-logo {
    position: relative;
    z-index: 3;
    display: block;
}

#Auth .auth-scene-logo img {
    height: 40px;
    width: auto;
}

/* Sun — the ElvesLab disc plus its two alternating ray layers, same treatment
   as #sun on the marketing pages: the stack rotates while the rays pulse. */
#Auth .auth-scene-sun {
    position: absolute;
    top: -46px;
    right: -46px;
    width: 200px;
    height: 200px;
    z-index: 1;
    transform-origin: center center;
    animation: sf-spin 20s linear infinite;
}

#Auth .auth-scene-sun img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

#Auth .auth-scene-sun .sunlight {
    opacity: 0;
    mix-blend-mode: screen;
    filter: blur(1px);
}

#Auth .auth-scene-sun .sunlight.v1 { animation: sf-sunlight-odd 3s ease-in-out infinite; }
#Auth .auth-scene-sun .sunlight.v2 { animation: sf-sunlight-even 3s ease-in-out infinite; }

/* Clouds — the ElvesLab banner cloud shapes, drifting across and fading at
   both edges so they never pop in or out at the panel boundary. */
#Auth .auth-scene-cloud {
    position: absolute;
    z-index: 1;
    height: auto;
    opacity: 0;
}

#Auth .auth-scene-cloud.c1 { top: 150px; left: -60px; width: 150px; --sf-drift-x: 820px; animation: sf-drift 46s linear infinite; }
#Auth .auth-scene-cloud.c2 { top: 232px; left: -110px; width: 205px; --sf-drift-x: 880px; animation: sf-drift2 62s linear infinite; }

#Auth .auth-scene-head {
    position: relative;
    z-index: 3;
    animation: sf-rise .5s ease both;
}

/* The copy is white and the clouds are white, so on a short viewport — where
   space-between pulls the headline up towards the drifting clouds — the two
   can collide. A soft dark halo is invisible against the blue but keeps the
   text separated wherever a cloud or a sun ray passes behind it. */
#Auth .auth-scene-head h2 {
    font-family: 'Inter-Bold', Arial, sans-serif;
    font-size: 36px;
    line-height: 1.18;
    margin: 0 0 14px;
    text-shadow: 0 2px 14px rgba(5, 79, 153, 0.55);
}

#Auth .auth-scene-head p {
    font-family: 'Inter-Regular', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 330px;
    text-shadow: 0 2px 12px rgba(5, 79, 153, 0.5);
}

#Auth .auth-scene-points {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#Auth .auth-scene-points li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
}

#Auth .auth-scene-points svg {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 999px;
    background: rgba(255, 220, 0, 0.22);
    color: #ffdc00;
}

#Auth .auth-scene-water {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 240px;
    z-index: 2;
    pointer-events: none;
}

/* Ferry — the flat ElvesLab vessel illustration (Queen Star 8). It carries its
   own cartoon wake, so it sits just above the wave layers and the two read as
   one water surface. 425x155 natural.

   Width is capped against the panel as well as in px: centred at left:70% the
   hull reaches 0.70S + width/2, so a fixed 425px overflows any panel narrower
   than ~708px and the bow gets clipped. At 58% the reach is 0.99S, which
   always clears. The percentage resolves against .auth-scene-water, which
   spans the full panel width. */
#Auth .auth-scene-boat {
    position: absolute;
    left: 70%;                       /* off-centre, to balance the copy block on the left */
    bottom: 40px;
    z-index: 2;
    width: min(425px, 58%);
    height: auto;
    transform-origin: center bottom;
    animation: sf-bob 3.2s ease-in-out infinite;
}

/* The overhang is derived from the travel distance rather than hard-coded, so
   a wave can never slide further than it hangs over the edge. Each side
   overhangs by twice the travel — previously the overhang was a fixed 30px
   against a fixed 28px travel (2px of margin on desktop), and on mobile the
   overhang dropped to 4vw / ~17px while the travel stayed at 28px, which is
   what exposed the wave's edge on a phone. */
#Auth .auth-scene-wave {
    position: absolute;
    left: calc(var(--sf-wave-x, 28px) * -2);
    bottom: 0;
    width: calc(100% + var(--sf-wave-x, 28px) * 4);
}

#Auth .auth-scene-wave.w1 { --sf-wave-x: 28px; height: 135px; animation: sf-wave 5s ease-in-out infinite; }
#Auth .auth-scene-wave.w2 { --sf-wave-x: 24px; height: 108px; animation: sf-wave2 4s ease-in-out infinite; }

/* ── Right form panel ──────────────────────────────────────────────────── */
#Auth .auth-main {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 40px 68px 104px;
}

#Auth .auth-card {                                  /* the form's content column */
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    animation: sf-rise .4s ease both;
}

#Auth .auth-shell--wide .auth-card { max-width: 560px; }

/* ── Book as guest ─────────────────────────────────────────────────────────
   Sits at the foot of the card, after the provider buttons. It is the way out
   of authenticating, not a way to authenticate, so it deliberately does not
   match those buttons: narrower (fit-content, not half-width), shorter (42 vs
   50px) and pill-shaped rather than 12px — enough difference that it does not
   read as a third sign-in option.

   It was previously a yellow pill floating top-right, which made the escape
   hatch the highest-contrast element on the panel, above the primary submit
   button and ahead of the form itself. */
#Auth .auth-guest {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 20px auto 0;
    box-sizing: border-box;
    height: 42px;
    padding: 0 20px;
    border: 1px solid #d4dbe5;
    border-radius: 21px;
    background: #fff;
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 13.5px;
    color: #054f99;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

#Auth .auth-guest:hover {
    border-color: #0169af;
    background: #f4f9fd;
}

#Auth .auth-guest svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

#Auth .auth-guest span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Header ────────────────────────────────────────────────────────────── */
#Auth .auth-title {
    font-family: 'Inter-Bold', Arial, sans-serif;
    font-size: 32px;
    line-height: 1.25;
    color: #054f99;
    margin: 0 0 8px;
}

#Auth .auth-subtitle {
    font-family: 'Inter-Regular', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #6b7280;
    margin: 0 0 26px;
}

/* Register runs a denser two-column form, so it steps everything down a notch */
#Auth .auth-shell--wide .auth-title { font-size: 30px; margin: 0 0 6px; }
#Auth .auth-shell--wide .auth-subtitle { font-size: 14px; margin: 0 0 22px; }

/* ── Slim notice banner ────────────────────────────────────────────────── */
#Auth .auth-notice {
    display: flex;
    gap: 10px;
    background: #eef5fc;
    border: 1px solid #cfe1f3;
    border-radius: 10px;
    padding: 11px 13px;
    font-family: 'Inter-Regular', Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #334155;
    margin-bottom: 18px;
}

#Auth .auth-notice svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: #0169af; }
#Auth .auth-notice a { color: #0169af; text-decoration: underline; }

/* ── Form fields ───────────────────────────────────────────────────────── */
#Auth .auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#Auth .auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

#Auth .auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

#Auth .auth-field.auth-field--full { grid-column: 1 / -1; }

#Auth .auth-labelrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#Auth .auth-label {
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 13.5px;
    color: #1f2937;
}

#Auth .auth-shell--wide .auth-label { font-size: 12.5px; }
#Auth .auth-label .req { color: #e11d48; margin-left: 2px; }

#Auth .auth-inputwrap { position: relative; }

#Auth .auth-input {
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    padding: 0 16px;
    font-family: 'Inter-Regular', Arial, sans-serif;
    font-size: 15px;
    color: #111827;
    background: #fff;
    border: 1px solid #d4dbe5;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

#Auth .auth-shell--wide .auth-input { height: 46px; font-size: 14px; border-radius: 11px; padding: 0 14px; }

#Auth .auth-inputwrap .auth-input { padding-right: 46px; }
#Auth .auth-input::placeholder { color: #9aa5b4; }
#Auth .auth-input:focus {
    border-color: #0169af;
    box-shadow: 0 0 0 3px rgba(1, 105, 175, 0.12);
}

/* ── Show / hide password ──────────────────────────────────────────────────
   Edge draws its own reveal control inside every password field. It only
   materialises once the field has content and the browser manages its own
   visibility, so next to our toggle it reads as a second, flickering eye in
   the same corner. Suppress it and keep the one we control. Harmless in
   browsers that never had it — the selector simply matches nothing. */
#Auth .auth-input::-ms-reveal,
#Auth .auth-input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

#Auth .auth-pw-toggle {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: #6b7280;
    cursor: pointer;
}

#Auth .auth-pw-toggle svg { width: 17px; height: 17px; }

/* ── Password strength meter ───────────────────────────────────────────── */
#Auth .auth-strength {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 2px;
}

#Auth .auth-strength-track {
    flex: 1;
    height: 5px;
    border-radius: 4px;
    background: #e4e6e8;
    overflow: hidden;
}

#Auth .auth-strength-track > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: #e4e6e8;
    transition: width 0.25s, background 0.25s;
}

#Auth .auth-strength-label {
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 11px;
    color: #9aa5b4;
    min-width: 74px;
    text-align: right;
}

#Auth .auth-error {
    font-family: 'Inter-Regular', Arial, sans-serif;
    font-size: 12.5px;
    color: #e11d48;
}

#Auth .auth-hint {
    font-family: 'Inter-Regular', Arial, sans-serif;
    font-size: 11px;
    color: #9aa5b4;
    margin: 4px 0 0;
}

/* ── Forgot link ───────────────────────────────────────────────────────── */
#Auth .auth-forgot {
    background: none;
    border: 0;
    padding: 0;
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 12.5px;
    color: #0169af;
    cursor: pointer;
}

/* ── Segmented toggle (currency / gender) ──────────────────────────────── */
#Auth .btn-group { display: inline-flex; width: 100%; }

#Auth .btn-group .btn {
    flex: 1;
    height: 46px;
    padding: 0;
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #d4dbe5;
}

#Auth .btn-sindo-secondary { background: #054f99; color: #fff; border-color: #054f99; }
#Auth .btn-light-secondary { background: #fff; color: #4b5563; }
#Auth .rounded-start-3 { border-radius: 11px 0 0 11px; }
#Auth .rounded-end-3 { border-radius: 0 11px 11px 0; border-left: 0; }

/* ── Primary button ────────────────────────────────────────────────────── */
#Auth .auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 54px;
    margin-top: 6px;
    border: 0;
    border-radius: 27px;
    background: #0169af;
    color: #fff;
    font-family: 'Inter-SemiBold', Arial, sans-serif;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(1, 105, 175, 0.32);
    transition: background-color 0.15s, box-shadow 0.15s;
}

#Auth .auth-btn:hover { background: #054f99; box-shadow: 0 10px 22px rgba(5, 79, 153, 0.4); }
#Auth .auth-btn:disabled { opacity: 0.7; cursor: default; }

/* ── Alternate-action text ─────────────────────────────────────────────── */
#Auth .auth-alt {
    font-family: 'Inter-Regular', Arial, sans-serif;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
    margin: 12px 0 0;
}

#Auth .auth-alt a { font-family: 'Inter-SemiBold', Arial, sans-serif; color: #0169af; margin-left: 4px; }

/* ── Divider ───────────────────────────────────────────────────────────── */
#Auth .auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 12px;
    color: #9aa5b4;
}

#Auth .auth-divider::before,
#Auth .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }

/* ── Social login ──────────────────────────────────────────────────────────
   Each provider dictates its own colours and type — see the notes in
   _AuthSocialButtons.cshtml. The shared geometry (equal widths, 50px height,
   12px radius) is ours; the per-brand values below are not.
   50px clears Google's 40px floor and Apple's 44pt floor. */
#Auth .auth-social {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

/* Each button is wrapped in its own GET form, so the form is the flex item */
#Auth .auth-social form { margin: 0; flex: 1; min-width: 0; display: flex; }

#Auth .auth-social-btn {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;                       /* Google: 10px between mark and label */
    padding: 0 12px;                 /* Google: 12px leading the mark */
    background: #fff;
    border: 1px solid #747775;
    border-radius: 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s, box-shadow .15s;
}

#Auth .auth-social-btn:hover { background: #f7f8f8; }

#Auth .auth-social-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#Auth .auth-social-icon { flex: 0 0 auto; width: 18px; height: 18px; }

/* The shared 1px #747775 bezel and 500 weight above are Google's mandated
   light-theme values. Apple permits both: its HIG fixes only the logo and
   title to black or white, while explicitly allowing you to "use a stroke to
   emphasize the button bezel" and to "adjust the font's weight and size".
   A black Apple bezel next to Google's grey one made Apple read as the
   primary choice, which is the opposite of the parity Apple asks for.

   Google light theme: #FFFFFF fill, 1px #747775 inside stroke, #1F1F1F label.
   Google Sans is not distributed for third-party use, so Roboto — the family
   Google's own assets fall back to — leads the stack. */
#Auth .auth-social-btn--google {
    color: #1F1F1F;
    font-family: 'Google Sans', Roboto, 'Inter-Medium', Arial, sans-serif;
}

/* Apple "white with an outline": white fill, black mark and title. Apple asks
   for the system font, which resolves to SF Pro on Apple platforms and
   degrades to the template face elsewhere. */
#Auth .auth-social-btn--apple {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter-Medium', Arial, sans-serif;
}

#Auth .auth-social-btn--apple .auth-social-icon {
    width: 16px;
    height: 18px;
    margin-top: -2px;                /* optically centres the mark */
}

/* ── Terms text (register) ─────────────────────────────────────────────── */
#Auth .auth-terms {
    font-family: 'Inter-Regular', Arial, sans-serif;
    font-size: 11px;
    line-height: 1.6;
    color: #9aa5b4;
    text-align: center;
    margin: 10px 0 0;
}

#Auth .auth-terms a { color: #0169af; text-decoration: underline; }

/* ── Verify: OTP code inputs ───────────────────────────────────────────── */
#Auth .auth-otp { display: flex; gap: 10px; }

#Auth .auth-otp input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    height: 56px;
    text-align: center;
    font-family: 'Inter-Bold', Arial, sans-serif;
    font-size: 22px;
    color: #054f99;
    border: 1px solid #d4dbe5;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

#Auth .auth-otp input:focus { border-color: #0169af; box-shadow: 0 0 0 3px rgba(1, 105, 175, 0.12); }

/* ── Icon badge (forgot / verify heads) ────────────────────────────────── */
#Auth .auth-badge {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #eef5fc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: #0169af;
}

#Auth .auth-badge svg { width: 24px; height: 24px; }

/* ── intl-tel-input: force the template font ───────────────────────────── */
#Auth .iti { width: 100%; }
#Auth .iti, #Auth .iti input, #Auth .iti__selected-dial-code,
#Auth .iti__country, #Auth .iti__country-list, #Auth .iti__search-input {
    font-family: 'Inter-Regular', Arial, sans-serif;
}

/* ── Scene animations ──────────────────────────────────────────────────── */
@keyframes sf-bob    { 0%,100% { transform: translateX(-50%) translateY(0) rotate(-1.5deg); } 50% { transform: translateX(-50%) translateY(-9px) rotate(1.5deg); } }
@keyframes sf-spin   { to { transform: rotate(360deg); } }

/* Ray layers alternate, so one set is always fading up as the other fades down */
@keyframes sf-sunlight-odd  { 0%,100% { opacity: .2; transform: scale(1); }    50% { opacity: 1; transform: scale(1.05); } }
@keyframes sf-sunlight-even { 0%,100% { opacity: 1; transform: scale(1.05); }  50% { opacity: .2; transform: scale(1); } }

/* Travel distance comes from --sf-drift-x on the cloud itself rather than a vw
   figure: the scene is capped at 720px, so vw would overshoot on wide monitors
   and undershoot on phones. The mobile block resets the variable. */
@keyframes sf-drift  { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: .95; } 88% { opacity: .95; } 100% { transform: translateX(var(--sf-drift-x, 820px)); opacity: 0; } }
@keyframes sf-drift2 { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: .8; }  88% { opacity: .8; }  100% { transform: translateX(var(--sf-drift-x, 820px)); opacity: 0; } }
@keyframes sf-wave   { 0%,100% { transform: translateX(0); } 50% { transform: translateX(calc(var(--sf-wave-x, 28px) * -1)); } }
@keyframes sf-wave2  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(var(--sf-wave-x, 24px)); } }
@keyframes sf-rise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    #Auth .auth-scene-sun, #Auth .auth-scene-cloud, #Auth .auth-scene-boat,
    #Auth .auth-scene-sun .sunlight, #Auth .auth-scene-wave,
    #Auth .auth-scene-head, #Auth .auth-card { animation: none !important; }

    /* The clouds and ray layers rest at opacity 0 and are revealed by their
       keyframes, so without animation they would simply never appear. */
    #Auth .auth-scene-cloud.c1 { opacity: .95; }
    #Auth .auth-scene-cloud.c2 { opacity: .8; }
    #Auth .auth-scene-sun .sunlight.v1 { opacity: 1; }
    #Auth .auth-scene-sun .sunlight.v2 { opacity: 0; }
}

/* ── Result card (OAuth "try again" landing) ───────────────────────────────
   Used by Views/GoogleLogin/TryAgain.cshtml and Views/AppleLogin/TryAgain.cshtml,
   which drop a bare .auth-card straight into #Auth with no .auth-shell around it.
   This one stays a floating card on the #Auth gradient — it is a short dead-end
   message, not a form, so the full-bleed split would be overkill. */
#Auth .auth-card.auth-result {
    text-align: center;
    max-width: 520px;
    margin: 24px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(5, 79, 153, 0.15);
    padding: 40px 40px 34px;
    box-sizing: border-box;
}

#Auth .auth-result-img {
    width: 280px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 20px;
}

#Auth .auth-result-msg {
    font-family: 'Inter-SemiBold', Arial, sans-serif;
    font-size: 20px;
    color: #054f99;
    margin: 0 0 24px;
}

#Auth .auth-result-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

#Auth .auth-result-actions .auth-btn {
    width: auto;
    padding: 0 32px;
}

#Auth .auth-link {
    font-family: 'Inter-SemiBold', Arial, sans-serif;
    font-size: 15px;
    color: #0169af;
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   SHORT DESKTOP VIEWPORTS — keep the register form whole without scrolling

   Register needs ~915px of viewport at full size, so it fits a 1080p screen
   but not a 900p or 768p one. These tiers reclaim height in the order that
   costs the least: dead padding first, then the layout, then type.

   The biggest single win is pairing the two password fields. They are the
   only .auth-field--full in the form, so they take a row each (113 + 67 + gap
   = 194px) where every other pair shares one. Pairing them saves 81px on its
   own and changes nothing about legibility.

   Width is abundant on these screens and height is not, so nothing here
   narrows the form — it only removes vertical slack.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tier 1 — 1080p and 900p-class screens (~780-950px viewport). Rhythm only.
   The ceiling is 1000px rather than 900px because a 1080p browser window is
   ~946px of viewport, and the register card no longer fits that at full size
   once the guest link is in the stack. */
@media screen and (min-width: 1024px) and (max-height: 1000px) {
    #Auth .auth-main { padding: 28px 68px 44px; }
    #Auth .auth-guest { margin-top: 14px; }

    #Auth .auth-shell--wide .auth-title { margin-bottom: 4px; }
    #Auth .auth-shell--wide .auth-subtitle { margin-bottom: 14px; }

    /* Pair the passwords instead of giving each a full-width row */
    #Auth .auth-shell--wide .auth-field.auth-field--full { grid-column: auto; }

    #Auth .auth-shell--wide .auth-form { gap: 12px; }
    #Auth .auth-shell--wide .auth-divider { margin: 14px 0 10px; }
    #Auth .auth-shell--wide .auth-alt { margin-top: 8px; }
}

/* Tier 2 — 768p-class screens (~650px viewport). Tighten the controls too. */
@media screen and (min-width: 1024px) and (max-height: 780px) {
    #Auth .auth-main { padding: 12px 68px 14px; }
    #Auth .auth-guest { margin-top: 8px; height: 36px; }

    /* Login/Forgot/Verify need trimming here too — every tightening below the
       guest link is --wide-scoped, so without these only Register benefits.
       The --wide rules are more specific, so Register still wins where it
       needs to be tighter than this. */
    #Auth .auth-title { font-size: 28px; }
    #Auth .auth-subtitle { margin-bottom: 16px; }
    #Auth .auth-notice { padding: 8px 10px; font-size: 11.5px; margin-bottom: 12px; }
    #Auth .auth-form { gap: 12px; }
    #Auth .auth-input { height: 46px; }
    #Auth .auth-divider { margin: 12px 0 10px; }
    #Auth .auth-social-btn { height: 46px; }
    #Auth .auth-alt { margin-top: 8px; }

    #Auth .auth-shell--wide .auth-title { font-size: 24px; }
    #Auth .auth-shell--wide .auth-subtitle { font-size: 13px; margin-bottom: 8px; }

    #Auth .auth-shell--wide .auth-grid { gap: 8px 18px; }
    #Auth .auth-shell--wide .auth-field { gap: 4px; }
    #Auth .auth-shell--wide .auth-input { height: 40px; }
    #Auth .auth-shell--wide .btn-group .btn { height: 40px; }

    /* The strength meter already communicates this, so the advisory line is
       the one thing here worth dropping rather than shrinking. */
    #Auth .auth-shell--wide .auth-hint { display: none; }

    #Auth .auth-shell--wide .auth-btn { height: 46px; margin-top: 2px; }
    #Auth .auth-shell--wide .auth-terms { font-size: 10px; margin-top: 4px; }
    #Auth .auth-shell--wide .auth-divider { margin: 8px 0 6px; }
    #Auth .auth-shell--wide .auth-social-btn { height: 44px; }
    #Auth .auth-shell--wide .auth-alt { margin-top: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET / SMALL LAPTOP (max-width: 1279px)
   The scene keeps its minimum, so the form column gives up its side padding
   first rather than letting the split go lopsided.
   ══════════════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    #Auth .auth-scene { padding: 34px 32px 210px; }
    #Auth .auth-scene-head h2 { font-size: 30px; }
    #Auth .auth-scene-head p { font-size: 15px; }
    #Auth .auth-main { padding: 36px 44px 88px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 1023px) — vw against 430px (px / 4.3)
   ══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1023px) {
    #Auth { display: block; }

    #Auth .auth-shell,
    #Auth .auth-shell.auth-shell--wide {
        flex-direction: column;
        min-height: 100vh;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* Scene collapses to a short branded header. space-between leaves no slack
       at this height, so stack from the top and set the gap explicitly —
       otherwise the logo and the headline touch on narrow phones. */
    #Auth .auth-scene {
        flex: 0 0 auto;
        max-width: none;
        min-width: 0;
        min-height: 67vw;
        justify-content: flex-start;
        padding: 6.512vw 5.581vw 35vw;   /* bottom clears the water layer */
    }

    #Auth .auth-scene-logo img { height: 8.4vw; }
    #Auth .auth-scene-head { margin-top: 5.116vw; }

    /* Tucked further into the corner so the rays stay clear of the headline */
    #Auth .auth-scene-sun { top: -11vw; right: -11vw; width: 32vw; height: 32vw; }
    #Auth .auth-scene-sun .sunlight { filter: blur(0.233vw); }

    /* No usable sky in the collapsed header — the strip is logo, headline and
       water with nothing between, so the clouds would only ever drift across
       the copy. The sun, ferry and waves carry the illustration here. */
    #Auth .auth-scene-cloud { display: none; }
    #Auth .auth-scene-head h2 { font-size: 6.5vw; margin: 0 0 2.5vw; }
    #Auth .auth-scene-head p { font-size: 3.256vw; max-width: 68vw; }
    #Auth .auth-scene-points { display: none; }
    #Auth .auth-scene-water { height: 32vw; }
    #Auth .auth-scene-boat { width: 54vw; height: auto; bottom: 5vw; }
    /* Travel scales with the viewport; the base rule derives the overhang
       from it, so the edges stay covered at every phone width. */
    #Auth .auth-scene-wave.w1 { --sf-wave-x: 6vw; height: 18vw; }
    #Auth .auth-scene-wave.w2 { --sf-wave-x: 5vw; height: 14vw; }

    /* Column so the two stacked cards on Forgot / Verify sit one above the
       other rather than sharing a row. */
    #Auth .auth-main {
        flex: 1;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 7.442vw 6.512vw 6.512vw;
    }

    #Auth .auth-card,
    #Auth .auth-shell--wide .auth-card { max-width: none; margin: 0; }

    /* Full width on a phone — a fit-content pill is an awkward tap target,
       and there is no neighbouring button for it to be confused with here. */
    #Auth .auth-guest {
        width: 100%;
        margin-top: 4.651vw;
        height: 11.163vw;
        border-radius: 5.581vw;
        gap: 2.326vw;
        padding: 0 4.186vw;
        font-size: 3.256vw;
    }
    #Auth .auth-guest svg { width: 3.953vw; height: 3.953vw; }

    #Auth .auth-title,
    #Auth .auth-shell--wide .auth-title { font-size: 5.581vw; margin: 0 0 1.395vw; }
    #Auth .auth-subtitle,
    #Auth .auth-shell--wide .auth-subtitle { font-size: 3.256vw; margin: 0 0 4.186vw; }

    #Auth .auth-notice {
        border-radius: 2.791vw; padding: 3.256vw; gap: 2.326vw;
        font-size: 2.791vw; margin-bottom: 4.186vw;
    }
    #Auth .auth-notice svg { width: 3.72vw; height: 3.72vw; }

    #Auth .auth-form { gap: 3.721vw; }
    #Auth .auth-grid { grid-template-columns: 1fr; gap: 3.256vw; }
    #Auth .auth-field { gap: 1.395vw; }
    #Auth .auth-label,
    #Auth .auth-shell--wide .auth-label { font-size: 3.023vw; }
    #Auth .auth-label .req { margin-left: 0.465vw; }

    #Auth .auth-input,
    #Auth .auth-shell--wide .auth-input {
        height: 11.628vw; padding: 0 3.721vw; font-size: 3.256vw; border-radius: 2.791vw;
    }
    #Auth .auth-inputwrap .auth-input { padding-right: 11.628vw; }
    #Auth .auth-input:focus { box-shadow: 0 0 0 0.698vw rgba(1, 105, 175, 0.12); }

    #Auth .auth-pw-toggle { right: 2vw; width: 8vw; height: 8vw; }
    #Auth .auth-pw-toggle svg { width: 4.4vw; height: 4.4vw; }

    #Auth .auth-strength { gap: 2.326vw; }
    #Auth .auth-strength-track { height: 1.163vw; border-radius: 1vw; }
    #Auth .auth-strength-label { font-size: 2.558vw; min-width: 17vw; }
    #Auth .auth-hint { font-size: 2.558vw; margin: 0.93vw 0 0; }

    #Auth .auth-error { font-size: 2.791vw; }
    #Auth .auth-forgot { font-size: 3.023vw; }

    #Auth .btn-group .btn { height: 11.628vw; font-size: 3.256vw; }
    #Auth .rounded-start-3 { border-radius: 2.791vw 0 0 2.791vw; }
    #Auth .rounded-end-3 { border-radius: 0 2.791vw 2.791vw 0; }

    #Auth .auth-btn {
        height: 12.093vw; border-radius: 6.047vw; font-size: 3.488vw;
        box-shadow: 0 1.395vw 3.721vw rgba(1, 105, 175, 0.32);
    }

    #Auth .auth-alt { font-size: 3.023vw; margin: 2.791vw 0 0; }
    #Auth .auth-alt a { margin-left: 0.93vw; }
    #Auth .auth-divider { gap: 2.791vw; margin: 4.651vw 0 3.721vw; font-size: 2.791vw; }
    /* "Continue with Google" cannot fit half a phone-width card at a legible
       size, and neither vendor allows shortening the label — so stack. */
    #Auth .auth-social { flex-direction: column; gap: 2.791vw; }
    #Auth .auth-social-btn { height: 12.093vw; border-radius: 2.791vw; font-size: 3.256vw; gap: 2.326vw; }
    #Auth .auth-social-icon { width: 4.186vw; height: 4.186vw; }
    #Auth .auth-social-btn--apple .auth-social-icon { width: 3.721vw; height: 4.186vw; }
    #Auth .auth-terms { font-size: 2.791vw; margin: 2.791vw 0 0; }

    #Auth .auth-otp { gap: 2.326vw; }
    #Auth .auth-otp input { min-width: 0; box-sizing: border-box; height: 14vw; font-size: 5.5vw; border-radius: 2.791vw; }

    #Auth .auth-badge { width: 14vw; height: 14vw; border-radius: 3.721vw; margin-bottom: 4.186vw; }
    #Auth .auth-badge svg { width: 6vw; height: 6vw; }

    /* ── Result card (OAuth "try again" landing) ─────────────────────────── */
    #Auth .auth-card.auth-result {
        max-width: 100%;
        margin: 14vw 4.651vw;
        border-radius: 5.116vw;
        box-shadow: 0 2.791vw 8.372vw rgba(5, 79, 153, 0.15);
        padding: 7.442vw 6.512vw 6.512vw;
    }

    #Auth .auth-result-img { width: 55vw; margin: 0 auto 4.651vw; }
    #Auth .auth-result-msg { font-size: 4.186vw; margin: 0 0 5.116vw; }
    #Auth .auth-result-actions { flex-direction: column; gap: 2.791vw; }
    #Auth .auth-result-actions .auth-btn { width: 100%; padding: 0; }
    #Auth .auth-link { font-size: 3.488vw; }
}

/* ── Back to Home (Login) ──────────────────────────────────────────────────
   Fixed to the viewport rather than placed in the card, so it stays reachable
   while the form is scrolled — on phones the panel is taller than the screen
   and the card's own links sit at the very bottom.

   Top-right: on desktop that is empty space in the form column, and on the
   collapsed phone header it keeps clear of the logo in the opposite corner.
   White pill like .auth-guest, so it reads as a way out rather than a third
   sign-in option, and stays legible over both the scene and the white panel. */
#Auth .auth-home {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #d4dbe5;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(5, 79, 153, 0.12);
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1;
    color: #054f99;
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

#Auth .auth-home:hover,
#Auth .auth-home:focus-visible {
    border-color: #0169af;
    background: #fff;
    color: #0169af;
}

#Auth .auth-home svg { width: 17px; height: 17px; flex: 0 0 auto; }

@media screen and (max-width: 1023px) {
    /* Absolute, not fixed: the phone layout stacks the header above a form that
       runs well past a screen, so a pinned pill would sit over whatever field
       reached the top — it covered the right edge of inputs, and the password
       eye toggle with them. Here it rides in the blue header and scrolls away
       with it; the form below is never obstructed. */
    #Auth .auth-home {
        position: absolute;
        top: 3.256vw;
        right: 3.256vw;
        height: 9.302vw;
        padding: 0 3.721vw;
        border-radius: 4.651vw;
        gap: 1.86vw;
        font-size: 3.023vw;
    }

    #Auth .auth-home svg { width: 3.953vw; height: 3.953vw; }
}