/* Shared visual chrome for the auth flow (Login, SendCode, and any future
   step in this journey). Kept as a global stylesheet -- not a per-component
   scoped .razor.css -- so every auth page can reuse the exact same classes
   without duplicating rules. */

.login-shell {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    /* min-height instead of a hard height/max-height: when the card needs
       more vertical room than the viewport (extreme zoom, a very short
       window), this shell is now allowed to grow taller than 100dvh so the
       overflow shows up on .login-page's own scrollbar -- which spans the
       full browser window and sits at its right edge -- instead of clipping
       here or scrolling inside the (left-pinned, narrower) card itself. */
    min-height: 100dvh;
    width: 100%;
}

.login-page {
    /* Pinned exactly to the viewport instead of relying on 100dvh matching the
       document flow's height, so there's never a second, outer (browser-level)
       scrollbar fighting with this one over sub-pixel dvh rounding.
       This element is now the ONE scroll container for the whole page: its
       overflow-y is what shows the scrollbar, and because it's inset:0 to the
       real viewport, that scrollbar always sits at the actual window's right
       edge -- not glued to the (left-pinned, narrower) card, which is what
       happened when the card scrolled itself in the middle of the screen.

       The background art also lives here now, not on .login-shell. .login-shell
       is allowed to grow taller than the viewport to fit tall content (see its
       min-height comment), and a background painted on a growing box has to be
       re-covered as it grows -- any mismatch between that growth and the
       cover-sizing recalculation showed up as a hard seam where the art
       stopped and the plain background-color took over. .login-page's own box
       never resizes (it's pinned to the viewport via inset:0), so a background
       painted here stays a single, stable backdrop behind the scrolling
       content -- exactly like a fixed wallpaper -- with no seam possible. */
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: var(--color-login-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* --- Background art: real full-composition images, picked by orientation + viewport
   width only. background-size: cover adapts each one to the screen -- no stretching,
   no synthetic canvas extension. --- */

@media (orientation: landscape) and (max-width: 900px) {
    .login-page {
        background-image: url('/_content/Time.Shared/images/backgrounds/login/horizontal/background-landscape-sm.webp');
    }
}

@media (orientation: landscape) and (min-width: 901px) and (max-width: 1800px) {
    .login-page {
        background-image: url('/_content/Time.Shared/images/backgrounds/login/horizontal/background-landscape-lg.webp');
    }
}

@media (orientation: landscape) and (min-width: 1801px) {
    .login-page {
        background-image: url('/_content/Time.Shared/images/backgrounds/login/horizontal/background-landscape-xl.webp');
    }
}

@media (orientation: portrait) and (max-width: 480px) {
    .login-page {
        background-image: url('/_content/Time.Shared/images/backgrounds/login/vertical/background-portrait-sm.webp');
    }
}

@media (orientation: portrait) and (min-width: 481px) and (max-width: 900px) {
    .login-page {
        background-image: url('/_content/Time.Shared/images/backgrounds/login/vertical/background-portrait-lg.webp');
    }
}

@media (orientation: portrait) and (min-width: 901px) {
    .login-page {
        background-image: url('/_content/Time.Shared/images/backgrounds/login/vertical/background-portrait-xl.webp');
    }
}

.login-card {
    position: relative;
    z-index: 2;
    /* vmin (the smaller of viewport width/height) is continuous straight
       through the landscape<->portrait boundary -- unlike separate vw-based
       (landscape) and "100% - margin"-based (portrait) formulas, which land on
       very different values right at the exact width/height crossover and
       produce a visible snap the instant `orientation` flips. Using the same
       vmin-driven formula for every orientation means the card's width (and,
       below, its padding) glides through that crossover with no jump. */
    width: clamp(24rem, 96vmin, 64rem);
    min-width: 0;
    margin: auto;
    padding: clamp(1.1rem, 5vmin, 3rem);
    /* No longer needs its own scroll/overflow handling -- .login-page is the
       single scroll container now (see above), so any content taller than
       the viewport scrolls the whole window at its real right edge instead
       of scrolling inside this (left-pinned, narrower-than-window) card. That
       also means there's no overflow here to clip the round-action buttons'
       box-shadow anymore, but the extra bottom breathing room is kept as
       general spacing. */
    padding-bottom: max(clamp(1.1rem, 5vmin, 3rem), 1.75rem);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.login-step-label {
    margin: 0 0 clamp(0.6rem, min(3vw, 2vh), 1.5rem);
    color: var(--color-primary-dark);
    font-size: clamp(0.78rem, min(2vw, 1.8vh), 0.92rem);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.login-title {
    max-width: 100%;
    margin: 0;
    color: var(--color-primary-dark);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, min(9vw, 6.5vh), 3.6rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.055em;
    overflow-wrap: break-word;
    word-break: keep-all;
}

.login-subtitle {
    margin: clamp(0.6rem, min(4vw, 2.5vh), 1.35rem) 0 clamp(0.8rem, min(5vw, 3vh), 1.8rem);
    color: var(--color-text-muted);
    font-size: clamp(0.95rem, min(4vw, 3vh), 1.35rem);
    font-weight: 600;
}

.login-form {
    display: grid;
    gap: clamp(0.75rem, min(3vw, 2vh), 1.35rem);
}

.login-input-shell {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: clamp(3.2rem, min(9vw, 7vh), 4.5rem);
    padding: 0 1.35rem;
    border: 1px solid var(--color-border-soft);
    border-radius: 1.15rem;
    background: rgba(255, 248, 232, 0.86);
    box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    color: var(--color-primary-dark);
}

.login-input-shell:focus-within {
    outline: 0.18rem solid rgba(11, 82, 45, 0.18);
    border-color: rgba(11, 82, 45, 0.38);
}

.login-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    color: var(--color-primary-dark);
    font-weight: 800;
    letter-spacing: -0.12em;
}

.login-input-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-input-shell input,
.login-input-shell select {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 1.2rem;
    font-weight: 600;
}

.login-input-shell select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073E25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 1.3rem;
    padding-right: 1.8rem;
}

.login-input-shell select:invalid {
    color: var(--color-text-muted);
}

.login-input-shell input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

/* WebView2/Edge add their own native "reveal password" eye button inside
   password inputs -- hide it so only our custom toggle shows. */
.login-input-shell input::-ms-reveal,
.login-input-shell input::-ms-clear {
    display: none;
}

.login-input-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-primary-dark);
    cursor: pointer;
}

.login-input-toggle img,
.login-input-toggle svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The browser's autofill styling forces its own background/bold text
   (the blue rectangle). Override it back to match the rest of the field. */
.login-input-shell input:-webkit-autofill,
.login-input-shell input:-webkit-autofill:hover,
.login-input-shell input:-webkit-autofill:focus,
.login-input-shell input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0 100px rgba(255, 248, 232, 0.86) inset;
    box-shadow: 0 0 0 100px rgba(255, 248, 232, 0.86) inset;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--color-text);
    font: inherit;
    font-weight: 600;
}


.login-primary-action,
.login-secondary-action,
.login-round-action {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.login-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    /* Back to its original size: full width, matching the email/password
       field above it (both are grid items in .login-form, which stretches
       items to fill its column by default). Shared by Login (both steps) and
       SendCode, since they all reuse this one class. */
    min-height: clamp(3.1rem, min(9vw, 7vh), 4.35rem);
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary-dark));
    color: #fff;
    box-shadow: var(--shadow-control);
    font-size: 1.2rem;
    font-weight: 700;
}

.login-primary-action svg {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-primary-action:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.login-secondary-action {
    margin-top: clamp(0.5rem, min(3vw, 2vh), 1rem);
    padding: 0.35rem 0;
    background: transparent;
    color: var(--color-primary-dark);
    font-weight: 700;
}

.login-field-label {
    margin: 0 0 -0.35rem;
    color: var(--color-primary-dark);
    font-size: 0.85rem;
    font-weight: 700;
}

.login-step-nav {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
}

.login-step-nav .login-primary-action {
    grid-column: 2;
}

.login-step-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(3.1rem, min(9vw, 7vh), 4.35rem);
    min-height: clamp(3.1rem, min(9vw, 7vh), 4.35rem);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    background: rgba(255, 248, 232, 0.86);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-control);
}

.login-step-back svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-forgot-action {
    display: block;
    width: 100%;
    margin-top: clamp(0.4rem, min(2.5vw, 1.5vh), 0.9rem);
    text-align: center;
    font-size: clamp(0.82rem, min(2.5vw, 2vh), 0.92rem);
    text-decoration: underline;
    text-underline-offset: 0.15rem;
}

.login-signup-row {
    margin: clamp(0.5rem, min(3vw, 2vh), 1.1rem) 0 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: clamp(0.82rem, min(2.5vw, 2vh), 0.92rem);
    font-weight: 600;
}

.login-inline-link {
    margin-left: 0.35rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-primary-dark);
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.15rem;
    cursor: pointer;
}

.login-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.6rem;
    margin: clamp(0.9rem, min(4vw, 2.5vh), 1.8rem) clamp(1rem, 4vw, 2rem) clamp(0.7rem, min(3vw, 2vh), 1.25rem);
    color: var(--color-primary-dark);
}

.login-divider span {
    height: 1px;
    background: rgba(11, 82, 45, 0.35);
}

.login-divider strong {
    font-size: 0.95rem;
    font-weight: 800;
}

.login-placeholder-actions {
    display: flex;
    justify-content: center;
    gap: clamp(3rem, 12vw, 6rem);
}

.login-round-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(3.1rem, min(9vw, 7vh), 4.3rem);
    height: clamp(3.1rem, min(9vw, 7vh), 4.3rem);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(255, 248, 232, 0.88);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-control);
    font-size: 2.15rem;
    font-weight: 800;
}

.login-round-action img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.login-google-action {
    padding: 0.85rem;
}

/* Single, unified style for every inline error/hint message in the auth flow
   -- plain bold red text, no bordered/filled bubble. This replaces both the
   old boxed alert AND the browser's native validation bubble (suppressed via
   novalidate on the forms), so there's exactly one visual language for
   feedback across email, password, and any future step. */
.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 1rem;
    color: #8d2416;
    font-weight: 700;
    font-size: 0.92rem;
}

.login-alert span {
    white-space: pre-line;
}

.login-alert-icon {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* All landscape widths, from a rotated phone up to a wide desktop window, in
   ONE continuous rule -- no min-width gate. The old version split this into
   two separate breakpoints (below/above 768px) with different formulas for
   alignment, card width, and padding, so crossing 768px snapped everything at
   once: centered -> left-pinned, one width formula -> another. That's what
   produced the "jump" from a narrow/centered look straight to a wide/offset
   look with a single scroll or zoom notch. Using clamp() everywhere here
   means every value grows or shrinks smoothly with the viewport, with no
   width threshold where multiple properties change discontinuously together.

   Width and padding are intentionally NOT overridden here anymore -- they now
   live only on the base .login-card rule, driven by vmin, so the same formula
   applies in landscape and portrait alike. Only alignment (pinned to the left
   instead of centered) and the title's font-size differ by orientation; that
   keeps the card's own size perfectly continuous across the orientation
   boundary, eliminating the "shrinks while landscape, then snaps back to full
   size the instant it flips to portrait" jump. */
@media (orientation: landscape) {
    .login-shell {
        justify-content: flex-start;
        width: 100%;
        min-height: 100vh;
        padding-left: clamp(1rem, 10vw, 13rem);
    }

    .login-card {
        margin: 0;
    }

    .login-title {
        font-size: clamp(2rem, min(3.6vw, 5.5vh), 3.4rem);
    }
}

@media (max-width: 420px) {
    /* Width/padding are deliberately left to the base vmin-driven .login-card
       rule here -- overriding them at this fixed-width breakpoint would
       reintroduce the same kind of snap we just removed from the
       landscape/portrait boundary, just triggered by width instead of
       orientation. Only typography gets a dedicated tweak at this size. */
    .login-title {
        font-size: clamp(2.1rem, min(11vw, 7vh), 3.2rem);
    }

    .login-divider {
        margin-inline: 0.5rem;
    }
}

/* Touch devices in portrait (typical phone): more compact card. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .login-page {
        overflow-x: hidden;
    }

    .login-shell {
        width: 100%;
        min-height: 100lvh;
        padding-inline: 0.75rem;
    }

    .login-card {
        width: min(100% - 1rem, 31rem);
        padding: clamp(0.85rem, min(4vw, 3vh), 1.35rem) clamp(0.7rem, min(3vw, 2vh), 1rem) clamp(1rem, min(4.5vw, 3.5vh), 1.75rem);
        padding-bottom: max(clamp(1rem, min(4.5vw, 3.5vh), 1.75rem), 1.75rem);
    }

    .login-title {
        font-size: clamp(2.1rem, min(11vw, 7vh), 3.2rem);
    }

    .login-subtitle {
        font-size: clamp(0.9rem, min(4.8vw, 3.2vh), 1.2rem);
    }

    .login-placeholder-actions {
        gap: clamp(1.5rem, 10vw, 3rem);
    }
}

/* Touch devices in landscape (phone rotated). */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .login-shell {
        width: 100%;
    }
}