/* ===================================================================================================================
   email-login.css — the original's bespoke `.quest-login-*` styling, hand-ported 1:1 from the source-of-truth
   SCSS under ../../Styles/ (_login.scss + _videoplayer.scss + _security.scss). QST-319: the user rejected the prior
   tokenized reproduction and asked for the ORIGINAL SCSS as the faithful baseline; this is that SCSS, served as a global
   stylesheet (the repo has no SCSS→CSS compiler threaded into .Email.UI, and the original SCSS is near-flat CSS, so it is
   hand-ported here rather than adding a Node/esbuild build step to this RCL). The nested SCSS selectors are expanded to
   descendant selectors; every value is verbatim. When Styles/*.scss changes, mirror it here (keep the two in lock-step).

   Served from the .Email.UI RCL at _content/OPST.Catalyst.Web.Auth.Providers.Email.UI/css/email-login.css and linked by
   Layouts/EmailAuthLayout.razor. Global classes (NOT Blazor-scoped) because the original is global and the markup carries
   the `.quest-login-*` classes verbatim. The fonts (Roboto / Roboto Condensed) the rules reference are linked in the
   layout (Google Fonts).
   =================================================================================================================== */

/* ── _videoplayer.scss — the full-bleed ambient backdrop ──────────────────────────────────────────────────────────── */

.quest-video-player {
}

.quest-video-player-background {
    /* z-index 0 (NOT the recovered -100): under a themed host the `body` carries an opaque
       background:var(--catalyst-color-surface) (catalyst.min.css), and a negative layer paints behind it and never
       shows. z-index 0 paints above the body background; the ceremony (.quest-login) is lifted to z-index 1.
       object-fit:cover keeps the full viewport covered. Mirrors Styles/_videoplayer.scss. */
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ── _login.scss — the centered three-row login ceremony ──────────────────────────────────────────────────────────── */

.quest-login {
    /* Center login */
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* QST-319: bumped from the recovered 60rem (960px) to the next standard container width, 64rem (1024px), to enlarge
       the whole field. Standard steps up from here: 72rem (1152px), 80rem (1280px / "xl"). Mirrors Styles/_login.scss. */
    max-width: 64rem;
    z-index: 1; /* above the full-bleed backdrop video (.quest-video-player-background, z-index 0) */
    height: 100%;
    width: 100%;
    /* Distribute header, body, footer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
}

.quest-login-header {
    position: relative;
    z-index: 0;
    height: 100%;
    width: 100%;
}

.quest-login-header-logo {
    position: relative;
    z-index: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.quest-login-header-logo img {
    padding-bottom: 4rem;
    max-width: 30rem;
}

.quest-login-header-messages {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2rem;
}

.quest-login-body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1rem;
}

.quest-login-footer {
    position: relative;
    height: 100%;
    width: 100%;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 3rem;
}

.quest-login-help {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1rem;
    border-radius: 1rem;
    color: rgb(218, 165, 32);
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 2rem;
    background-color: rgba(218, 165, 32, .2);
    box-shadow: .25rem .25rem .25rem rgba(0, 0, 0, 0.25);
}

.quest-login-help-title {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-size: 2rem;
}

.quest-login-help-body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: .5rem;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    font-size: 2rem;
}

.quest-login-status {
    padding: 1rem;
    border-radius: 1rem;
    color: darkred;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 2rem;
    background-color: rgba(139, 0, 0, 0.2);
    box-shadow: .25rem .25rem .25rem rgba(0, 0, 0, 0.25);
}

.quest-login-status-0 {
}

.quest-login-status-0-1 {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-size: 2rem;
}

.quest-login-status-1 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    font-size: 2rem;
}

.quest-login-status-1-1 {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-size: 2rem;
}

.quest-login-status-1-2 {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-size: 2rem;
    text-decoration: underline;
}

.quest-login-status-1-0 {
    margin: .5rem;
    padding: .5rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: nowrap;
    font-weight: 400;
    background-color: rgba(139, 50, 50, 0.2);
}

.quest-login-status-1-0-0 {
}

.quest-login-status-1-0-1 {
    font-weight: 500;
}

.quest-login-body-input {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: 1rem;
    border: .2rem solid black;
    border-radius: .25rem;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.5);
}

.quest-login-body-input-fields {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 1rem;
}

.quest-login-body-input-controls {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
}

.quest-login-input-field {
    position: relative;
    min-height: 6rem;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 4rem;
    -webkit-font-smoothing: antialiased;
    padding: 0;
    border: 0;
    background-color: transparent;
}

/* Placeholder color (the original `::placeholder` family). Scoped to the login field so the global selector does not
   reach Catalyst widgets the rest of the host renders. */
.quest-login-input-field::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #333333;
    opacity: 1; /* Firefox */
}

.quest-login-input-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #333333;
}

.quest-login-input-field::-ms-input-placeholder { /* Microsoft Edge */
    color: #333333;
}

.quest-login-input-field:focus {
    outline: none !important;
}

.quest-login-input-field:-webkit-autofill,
.quest-login-input-field:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}

.quest-login-icon {
    font-size: 4rem;
    cursor: pointer;
}

/* The interactive control wrapper — a bare, transparent <button> so the FA glyph reads exactly as the recovered bespoke
   `.quest-login-icon`, while being a real keyboard-reachable + labelled control (the better-a11y choice over a bare <i>).
   Inherits the ink color so the chevron/eye glyph picks up the surrounding text color. */
.quest-login-icon-button {
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.quest-login-icon-button:disabled {
    cursor: default;
    opacity: 0.35;
}

.quest-login-icon-button:focus-visible {
    outline: 0.2rem solid rgb(218, 165, 32);
    outline-offset: 0.2rem;
    border-radius: 0.25rem;
}

/* The chevron submit accent — kept neutral (the original chevron inherited the ink color); a subtle emphasis marks it as
   the primary action without departing from the recovered look. */
.quest-login-icon--submit {
    color: #000;
}

.quest-login-tooltip {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: .25rem;
}

.quest-login-tooltip-float {
    visibility: hidden;
    position: absolute;
    left: 0rem;
    top: -6rem;
    z-index: 1;
    min-height: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: 1rem;
    border: .4rem solid rgb(218, 165, 32);
    border-radius: 1rem;
    background-color: rgba(218, 165, 32, .75);
    box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.5);
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 600;
    font-size: 2rem;
    -webkit-font-smoothing: antialiased;
}

.quest-login-tooltip:hover .quest-login-tooltip-float {
    visibility: visible;
    transition-delay: 1s;
}

.quest-login-tooltip-label {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 600;
    font-size: 1rem;
}

.quest-login-tooltip-content {
}

.quest-login-status-field {
    min-height: 4rem;
    min-width: 40rem;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 4rem;
    padding: 0;
    margin: 0;
}

.quest-login-status-field-final {
    min-height: 4rem;
    min-width: 60rem;
    padding: 0;
    margin: 0;
}

/* The TOTP enrollment panel (QST-319: re-created to the cleaner pre-rework layout, in the bespoke idiom). A centered
   vertical stack — guidance on top → QR centered → Proceed below — on the translucent `.quest-login`-style surface so it
   reads over the video. Replaces the former side-by-side `.quest-login-shared-secret-setup*` (flex-row + yellow guidance
   wash). */
.quest-login-totp-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.5);
}

/* The guidance line — clean Roboto, centered (no yellow wash); the same goldenrod-free, legible-over-video treatment as
   the rest of the ceremony's copy. */
.quest-login-totp-guidance {
    max-width: 36rem;
    text-align: center;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
}

/* The QR — centered, ~18rem, on its own near-opaque white card so the dark-on-light PNG stays scannable against the
   dark video (the QR must NOT sit directly on the translucent surface). */
.quest-login-totp-qr {
    width: 18rem;
    max-width: 100%;
    height: auto;
    padding: 1rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.quest-login-button {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 2rem;
    cursor: pointer;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, .75);
    background-image: linear-gradient(to top left,
            rgba(0, 0, 0, .2),
            rgba(0, 0, 0, .2) 30%,
            rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
    inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.quest-login-button:hover {
    background-color: rgba(0, 0, 0, 1);
}

.quest-login-button:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
    inset 2px 2px 3px rgba(0, 0, 0, .6);
}

.quest-login-bang-hint {
    padding: 1rem;
    border-radius: 1rem;
    font-weight: 400;
    font-size: 2rem;
    color: #88ff8e;
    background-color: rgba(216, 255, 218, .2);
    box-shadow: .25rem .25rem .25rem rgba(0, 0, 0, 0.25);
}

/* The footer pill row (the bang hint + the contextual step hint, stacked). The original rendered a single
   `.quest-login-bang-hint`; the rebuilt machine can show a teaching/confirming pill + a per-step pill, so they stack. */
.quest-login-bang-hints {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── _security.scss — the page-title override ─────────────────────────────────────────────────────────────────────── */

.quest-login-title {
    /* Visually hidden (NOT removed): the recovered original showed no standalone title — step context comes from the
       field, the status panel, and the help panel (on the ? toggle). The <h1> stays in the DOM as the form's
       aria-labelledby target (a11y), so screen readers still announce the step; it just doesn't render visually. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The field label is visually hidden (QST-319): the oversized field text then vertically centers within the input row,
   aligned with the inline icons, instead of being pushed down by the label. The <label for>/aria-label keep the
   accessible name + the E2E data-slot selector. Same sr-only pattern as .quest-login-title. */
.quest-login-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── fade-in — the original markup adds `fade-in` to the help / status / bang-hint panels (the help-message, the bang
      hint, and the help panel all carry it). The recovered SCSS for the keyframes was not part of the four login
      partials; this is the conventional fade the class name implies, faithful to its intent (a soft enter). ──────────── */
.fade-in {
    animation: quest-login-fade-in 200ms ease-in;
}

@keyframes quest-login-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Reduced-motion: drop the fade enter animation (decorative). */
@media (prefers-reduced-motion: reduce) {
    .fade-in {
        animation: none;
    }
}

/* ── Affordances the recovered login carried in spirit but not as a discrete class — kept in the original's idiom. ──── */

/* Recovery affordance — the recovered `fa-envelope` "Reset" icon (QST-319: an icon, not a text link). It rides the
   in-field controls row as a `.quest-login-icon-button` wearing the `fa-envelope` glyph (the same idiom as the
   back / resend / reveal icons above), so it needs no dedicated class; the former `.quest-login-recovery` /
   `.quest-login-link` text-button rules were removed when the text links were replaced by the icon. */

/* The terminal "signed in" hold — the indeterminate progress + the green confirmation, stacked + centered. */
.quest-login-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* The single-field login screen is a focused ceremony; the bespoke oversized field/panels own the surface. The
   visually-hidden live region (a11y addition over the original — the recovered screen had none) is positioned off-screen
   but still read by assistive technology. */
.quest-login-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}