.login-page {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    user-select: none;
}

.login-page-left {
    background-image: url('/Images/trees3.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
}

.login-page-right {
    background-image: var(--background-gradient);
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    width: 50%;
    min-width: 350px;
    height: 100%;
}

.cope-logo {
    font-family: Aleo, sans-serif;
    font-weight: 700;
    font-size: 26pt;
    color: var(--title-colour);
    margin-bottom: 10px;
}

.login-title {
    font-family: Aleo, sans-serif;
    font-weight: 700;
    font-size: 26pt;
    color: var(--title-colour);
    margin-bottom: 50px;
}

.login-box {
    display: flex;
    flex-direction: column;
    /*border: 1px grey solid;*/
    width: 50%;
    min-width: 200px;
    max-width: 340px;
    height: auto;
    /* Match the dialog design system. The inputs/button/link below inherit this; the brand
       titles above sit outside .login-box and keep Aleo. */
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

/* ── Inputs (design-system style) ─────────────────────────────────────────────
   These rules style both the real Login.razor TextBox2 <input> and the static
   index.html placeholder <input> (it reserves the box height while Blazor loads),
   keeping the two in sync. The descendant selector also out-specifies Lemur's
   scoped TextBox2 input rule. */
.login-page-right .login-box input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1.5px solid #cfc9bf;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: #272a27;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .login-page-right .login-box input:focus {
        border-color: #1d4a39;
        box-shadow: 0 0 0 3px rgba(29, 74, 57, 0.13);
    }

/* The real TextBox2 wraps its input in a fixed-height container; raise it to match the input.
   The extra `.login-page-right` ancestor out-specifies Lemur's scoped 27px rule (which would
   otherwise win on load order and leave the 44px input overflowing onto the label above). */
.login-page-right .login-box .container-label-left {
    height: 44px;
}

.username-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
}

.username-label {
    font-size: 13px;
    font-weight: 500;
    color: #6f756e;
    margin-bottom: 6px;
}

.password-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.password-label {
    font-size: 13px;
    font-weight: 500;
    color: #6f756e;
    margin-bottom: 6px;
}

.sign-in-button {
    align-self: stretch;
    margin-bottom: 14px;
}

/* Primary button — design-system brand-green pill. Shared by the real and placeholder buttons. */
/* Full-width variant of the standard primary button. The Sign-in button uses
   `app-btn app-btn--primary login-btn`, so the green fill, radius, shadow and hover/press
   behaviours (and their transitions) all come from .app-btn / .app-btn--primary — only the
   size deltas live here. Keeping a background/transition here would override .app-btn's
   transform transition and make the hover/press scale jump instead of animate. */
.login-btn {
    width: 100%;
    padding: 12px;
    font-size: 15px;
}

/* Dark-green dialog-style link. */
.forgotten-password-link {
    align-self: center;
    font-size: 13.5px;
    font-weight: 600;
    color: #1d4a39;
    text-decoration: none;
}

    .forgotten-password-link:hover {
        color: #143228;
    }

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.loading-box {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.loading-label {
}

.loading-bar {
    width: 300px;
    height: 5px;
    background: rgba(0,64,128,0.6);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.sectionwrapper-loading-bar {
    width: inherit;
    height: 5px;
    background: rgba(0,64,128,0.6);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading-bar-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 20%, var(--hover-colour) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
}

.bar-glow {
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--active-colour) 60%, transparent), 0 0 16px 2px color-mix(in srgb, var(--active-colour) 30%, transparent);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    50% {
        box-shadow: 0 0 10px 3px color-mix(in srgb, var(--active-colour) 80%, transparent), 0 0 28px 6px color-mix(in srgb, var(--active-colour) 45%, transparent);
    }
}

/* ══ Redesigned routine 2FA PIN dialog ════════════════════════════════════════
   Self-hosted brand fonts (CSP is font-src 'self'); latin subsets only. */
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/HankenGrotesk-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/HankenGrotesk-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/HankenGrotesk-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/CormorantGaramond-Medium.woff2') format('woff2');
}

/* The shell class is passed via DialogOptions.CssClass and lands on the popup-layer wrapper.
   It supplies the card radius/shadow; the inner Dialog is Transparent so these panels show.
   The `.popup-layer` ancestor is included to out-specify Lemur's CSS-isolation rule for
   `.popup-layer__dialog` (which is specificity-equal and loads after this sheet). */
.popup-layer .popup-layer__dialog.tfa-shell {
    width: 612px;
    max-width: 100%;
    background: transparent;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(8, 16, 11, 0.45);
    overflow: hidden; /* clip the two panels to the rounded corners */
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

/* The setup (pairing) dialog is wider to fit the QR + setup-key block. Passed alongside
   tfa-shell (CssClass="tfa-shell tfa-setup-shell"); ordered after so its width wins. */
.popup-layer .popup-layer__dialog.tfa-setup-shell {
    width: 720px;
}

.tfa-card {
    display: flex;
}

/* ── Pairing block (setup dialog only) ── */
.tfa-pair {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.tfa-qr {
    width: 150px;
    height: 150px;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #e4dfd5;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    padding: 8px;
}

    .tfa-qr img {
        width: 100%;
        height: 100%;
        display: block;
    }

.tfa-pair-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 11px;
}

.tfa-pair-title {
    font-size: 13px;
    font-weight: 600;
    color: #272a27;
}

.tfa-pair-sub {
    font-size: 12.5px;
    color: #6f756e;
    line-height: 1.45;
    margin-top: -4px;
}

.tfa-key-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tfa-key {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.10em;
    color: #272a27;
    background: #f3f1ec;
    border: 1px solid #e4dfd5;
    border-radius: 8px;
    padding: 9px 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tfa-copy {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #d3cdc2;
    background: #fff;
    color: #1d4a39;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.tfa-copy--done {
    border-color: #1d4a39;
    background: #eef3ee;
}

.tfa-applink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    font-size: 12.5px;
    font-weight: 600;
    color: #1d4a39;
    text-decoration: none;
}

.tfa-pair-divider {
    height: 1px;
    background: #ece8e0;
    margin: 6px 0 16px;
}

.tfa-caption {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #272a27;
}

/* ── Left brand panel ── */
.tfa-brand {
    width: 224px;
    flex-shrink: 0;
    background: #1d4a39;
    padding: 30px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tfa-lockup {
    height: 34px;
    width: auto;
    display: block;
}

.tfa-brand-sub {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 19px;
    color: #9db6a5;
    margin-top: 9px;
}

.tfa-secure-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}

.tfa-secure-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9db6a5;
}

.tfa-secure-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #b9cabf;
}

/* ── Right form panel ── */
.tfa-form {
    flex: 1;
    min-width: 0;
    background: #fff;
    padding: 36px 36px 30px;
}

.tfa-heading {
    margin: 0 0 7px;
    font-size: 21px;
    font-weight: 600;
    color: #272a27;
    letter-spacing: -0.01em;
}

.tfa-subtitle {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.5;
    color: #6f756e;
    min-height: 21px;
}

.tfa-emailed {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eef3ee;
    border: 1px solid #d4e0d3;
    border-radius: 9px;
    padding: 9px 12px;
    margin-bottom: 18px;
    font-size: 12.5px;
    color: #3c5848;
}

    .tfa-emailed strong {
        color: #1d4a39;
        font-weight: 600;
    }

/* ── Segmented PIN input ── */
.tfa-pin {
    position: relative;
    margin-bottom: 8px;
}

.tfa-cells {
    display: flex;
    gap: 9px;
}

.tfa-cell {
    width: 42px;
    height: 52px;
    border-radius: 10px;
    border: 1.5px solid #cfc9bf;
    background: #fff;
    color: #272a27;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: border-color .12s, box-shadow .12s, background .12s;
}

.tfa-cell--active {
    border-color: #1d4a39;
    box-shadow: 0 0 0 3px rgba(29, 74, 57, 0.13);
}

.tfa-cell--error {
    border-color: #d3917f;
    background: #fbf2ef;
    color: #9d4031;
}

.tfa-cell--success {
    border-color: #1d4a39;
    background: #f1f6f2;
}

.tfa-caret {
    width: 2px;
    height: 25px;
    background: #1d4a39;
    border-radius: 1px;
    animation: tfaBlink 1.06s step-end infinite;
}

@keyframes tfaBlink {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

/* Transparent input overlaid on the cells, capturing all typing. */
.tfa-capture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    outline: none;
    cursor: text;
    font-size: 16px;
    caret-color: transparent;
}

.tfa-error {
    margin: 10px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #9d4031;
}

.tfa-success {
    margin: 10px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #1d4a39;
}

/* ── Primary button ── */
/* Full-width variant of the standard primary button. The login / 2FA dialog verify buttons use
   `app-btn app-btn--primary tfa-verify`, so the green fill, radius, shadow and hover/press
   behaviours all come from .app-btn / .app-btn--primary — only the size deltas and the
   login-flow disabled/success colours live here. */
.tfa-verify {
    width: 100%;
    margin-top: 4px;
    padding: 13px;
    font-size: 15px;
}

    /* Login-flow disabled is a solid muted green, not the .app-btn 45% fade — override the
       colour and the opacity, including on hover (to beat .app-btn--primary:disabled:hover). */
    .tfa-verify:disabled,
    .tfa-verify:disabled:hover {
        background: #8aa597;
        opacity: 1;
        cursor: default;
    }

/* Success keeps its green even while disabled during navigation. */
.tfa-verify--success,
.tfa-verify--success:disabled,
.tfa-verify--success:disabled:hover {
    background: #2e6b4f;
    opacity: 1;
}

/* ── Secondary actions ── */
.tfa-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}

.tfa-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #1d4a39;
    cursor: pointer;
}

    .tfa-link:hover:not(:disabled) {
        color: #143228;
    }

    .tfa-link:disabled {
        color: #a7a89f;
        cursor: default;
    }

.tfa-cancel {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: #a7a89f;
    cursor: pointer;
}

    .tfa-cancel:hover {
        color: #6f756e;
    }

/* ══ Standalone anonymous pages (Password Reset, Account Reactivation) ═════════
   Screens 3–4 of the redesign. Same brand/form/button primitives as the 2FA
   dialogs above, but rendered as full pages (not in the popup layer) with the
   legal footer. The card floats on the app's standard beige gradient background. */
.tfa-page {
    position: fixed;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-image: var(--background-gradient);
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

/* Card box for the page context (parallel to the popup `.tfa-shell`). */
.tfa-page-card {
    position: relative;
    z-index: 1;
    width: 612px;
    max-width: 100%;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(8, 16, 11, 0.45);
    overflow: hidden; /* clip the two panels to the rounded corners */
}

.tfa-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    font-size: 11.5px;
    color: grey;
}

.tfa-footer-links {
    display: flex;
    gap: 18px;
}

    .tfa-footer a {
        color: grey;
        text-decoration: none;
    }

        .tfa-footer a:hover {
            color: var(--title-colour);
        }

/* ── Password field (reset form) ── */
.tfa-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tfa-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #3c4140;
}

.tfa-input-wrap {
    position: relative;
}

.tfa-input {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    padding: 0 44px 0 13px;
    border: 1.5px solid #d8d3ca;
    border-radius: 11px;
    font-family: inherit;
    font-size: 14px;
    color: #272a27;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .tfa-input:focus {
        border-color: #1d4a39;
        box-shadow: 0 0 0 3px rgba(29, 74, 57, 0.13);
    }

.tfa-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    line-height: 0;
    display: flex;
}

/* ── Strength meter (driven by zxcvbn score, mapped to 4 segments) ── */
.tfa-strength {
    margin-top: 12px;
}

.tfa-strength-inner {
    opacity: 0;
    transition: opacity .55s ease;
}

    .tfa-strength-inner.is-shown {
        opacity: 1;
    }

.tfa-strength-bars {
    display: flex;
    gap: 6px;
}

.tfa-seg {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: #e8e3da; /* empty; filled segments get their colour inline */
    transition: background .15s;
}

.tfa-strength-text {
    margin-top: 7px;
    font-size: 12px;
    color: #6f756e;
}

    .tfa-strength-text strong {
        font-weight: 700; /* colour set inline to match the score */
    }

/* ── Result states (success / invalid-link) ── */
.tfa-form--center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 36px 34px;
}

.tfa-result-center {
    text-align: center;
    padding: 8px 0 4px;
}

.tfa-status-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.tfa-result-center .tfa-status-icon {
    margin: 0 auto 18px;
}

.tfa-status-icon--success {
    background: #eef3ee;
}

.tfa-status-icon--error {
    background: #f7ece9;
}

.tfa-body {
    margin: 0 0 26px;
    font-size: 14px;
    line-height: 1.55;
    color: #6f756e;
    max-width: 390px;
}

.tfa-result-center .tfa-body {
    margin: 0 0 24px;
    max-width: none;
}

/* ── Blank-password error (reset form) ── */
.tfa-form-error {
    margin: 12px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #9d4031;
}

/* ── Primary action rendered as an anchor (Continue / Go to sign in) ── */
.tfa-verify-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    padding: 13px;
    border-radius: 11px;
    background: #1d4a39;
    color: #f3f1ea;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    transition: background .15s;
}

    .tfa-verify-link:hover {
        background: #143228;
    }

.tfa-verify-link--inline {
    display: inline-block;
    width: fit-content;
    padding: 13px 22px;
    text-align: left;
}

/* "Back to sign in" link centred under the reset button. */
.tfa-back {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: #1d4a39;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

    .tfa-back:hover {
        color: #143228;
    }