/* ==========================================================================
   MEDISpa — Modern Login
   Scoped to the login page only. Loaded AFTER bootstrap.min.css.
   The previous design is preserved in login-legacy.css.
   ========================================================================== */

:root {
    /* Brand — mapped onto the shared theme palette (theme-tokens.css) so the
       login screen wears whatever theme this workstation last used. */
    --ms-brand-900: var(--nav-2);
    --ms-brand-800: var(--nav-2);
    --ms-brand-700: var(--nav-1);
    --ms-brand-600: var(--nav-1);
    --ms-brand-500: var(--nav-accent-2);
    --ms-brand-400: var(--nav-accent);

    /* Accent */
    --ms-accent-600: var(--nav-accent-2);
    --ms-accent-500: var(--nav-accent);
    --ms-accent-400: var(--nav-accent);

    /* Neutrals */
    --ms-ink-900: #0b1524;
    --ms-ink-700: #26364b;
    --ms-ink-500: #5b6b82;
    --ms-ink-400: #7a8aa0;
    --ms-line: #e3e8ef;
    --ms-line-soft: #eef2f7;
    --ms-surface: #ffffff;
    --ms-surface-2: #f5f8fc;

    /* Feedback */
    --ms-danger: #d92d20;
    --ms-warn: #b54708;
    --ms-ok: #067647;

    /* Shape */
    --ms-radius-sm: 10px;
    --ms-radius: 14px;
    --ms-radius-lg: 22px;
    --ms-shadow-card: 0 1px 2px rgba(9, 45, 72, .04), 0 24px 56px -22px rgba(9, 45, 72, .28);
    --ms-shadow-soft: 0 1px 2px rgba(9, 45, 72, .05), 0 10px 26px -16px rgba(9, 45, 72, .35);
    --ms-ring: 0 0 0 4px rgba(var(--nav-accent-rgb), .16);

    /* System font stack only. "Inter" used to lead this list, but the app never
       ships an Inter @font-face or webfont file — so the browser was free to pick
       up whatever font a workstation happened to have installed under that name.
       On at least one machine that was an icon font, which turned every letter of
       the login page into a pictograph. Asking for a family we do not supply is
       the bug; every machine already fell through to these entries anyway. */
    --ms-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html,
body {
    height: 100%;
}

body.auth-body {
    margin: 0;
    font-family: var(--ms-font);
    color: var(--ms-ink-700);
    background: var(--ms-surface-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.auth-body *:focus-visible {
    outline: 2px solid var(--ms-brand-400);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Shell — split screen
   -------------------------------------------------------------------------- */

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(460px, 0.9fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- Visual (left) --- */

.auth-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background-color: var(--ms-brand-900);
    background-image: var(--auth-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}

.auth-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 12% 8%, rgba(var(--nav-accent-rgb), .30) 0%, rgba(var(--nav-accent-rgb), 0) 55%),
        linear-gradient(165deg, rgba(var(--nav-2-rgb), .92) 0%, rgba(var(--nav-1-rgb), .72) 42%, rgba(var(--nav-2-rgb), .96) 100%);
    z-index: -1;
}

.auth-visual__content {
    position: relative;
    padding: 56px 60px 52px;
    color: #fff;
    max-width: 640px;
}

/* Hospital logos are authored for white letterheads, so give them a light plate
   rather than dropping a transparent PNG straight onto the dark photo. */
.auth-visual__logo {
    display: block;
    height: 76px;
    width: auto;
    max-width: 280px;
    box-sizing: border-box;
    padding: 10px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    object-fit: contain;
    margin-bottom: 28px;
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6);
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 22px;
}

.auth-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ms-accent-400);
    box-shadow: 0 0 0 4px rgba(var(--nav-accent-rgb), .25);
}

.auth-visual__title {
    font-size: clamp(28px, 2.6vw, 42px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 14px;
    text-wrap: balance;
}

.auth-visual__text {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 34px;
    max-width: 44ch;
}

.auth-features {
    display: grid;
    gap: 14px;
    margin: 0 0 38px;
    padding: 0;
    list-style: none;
}

.auth-features li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .90);
}

.auth-features .ico {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--ms-accent-400);
    font-size: 15px;
}

.auth-visual__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 13px;
    color: rgba(255, 255, 255, .66);
}

.auth-visual__meta .sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
}

/* --- Panel (right) --- */

.auth-panel {
    display: flex;
    flex-direction: column;
    background: var(--ms-surface-2);
}

.auth-panel__body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px 32px;
}

.auth-stack {
    width: 100%;
    max-width: 428px;
}

/* --------------------------------------------------------------------------
   Brand header (inside panel)
   -------------------------------------------------------------------------- */

.auth-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}

.auth-mark__badge {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 19px;
    /* background: linear-gradient(140deg, var(--ms-brand-500), var(--ms-brand-800)); */
    box-shadow: var(--ms-shadow-soft);
}

.auth-mark__badge {
    position: relative;
}

/* Sits on top of the fallback icon; removed by onerror if the asset is missing */
.auth-mark__badge img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 13px;
    background: #fff;
    padding: 4px;
}

.auth-mark__name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ms-brand-800);
    line-height: 1.1;
    margin: 0;
}

.auth-mark__name .v {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ms-line-soft);
    border: 1px solid var(--ms-line);
    color: var(--ms-ink-500);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
}

.auth-mark__sub {
    font-size: 12.5px;
    color: var(--ms-ink-400);
    margin: 2px 0 0;
    line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.auth-card {
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius-lg);
    box-shadow: var(--ms-shadow-card);
    padding: 30px 30px 26px;
}

.auth-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.auth-card__head .btn-ghost {
    padding-top: 6px;
    white-space: nowrap;
}

.auth-card__title {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ms-ink-900);
    margin: 0 0 6px;
}

.auth-card__sub {
    font-size: 14px;
    color: var(--ms-ink-500);
    margin: 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Segmented control (Staff / Patient)
   -------------------------------------------------------------------------- */

.seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--ms-surface-2);
    border: 1px solid var(--ms-line);
    border-radius: 999px;
    margin-bottom: 22px;
}

/* Patient/OTP flow unavailable — the control collapses to the single Staff option */
.seg--single {
    grid-template-columns: 1fr;
}

.seg input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.seg__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ms-ink-500);
    cursor: pointer;
    user-select: none;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.seg__label i {
    font-size: 13px;
    opacity: .8;
}

.seg__label:hover {
    color: var(--ms-brand-700);
}

.seg input:checked+.seg__label {
    background: var(--ms-surface);
    color: var(--ms-brand-700);
    box-shadow: 0 1px 2px rgba(9, 45, 72, .08), 0 4px 10px -6px rgba(9, 45, 72, .35);
}

.seg input:focus-visible+.seg__label {
    box-shadow: var(--ms-ring);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

.field {
    margin-bottom: 18px;
}

.field__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ms-ink-700);
    margin-bottom: 7px;
}

.field__wrap {
    position: relative;
    display: block;
}

.field__icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--ms-ink-400);
    pointer-events: none;
    transition: color .18s ease;
}

.field__input {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 44px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--ms-ink-900);
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    appearance: none;
}

.field__input::placeholder {
    color: #a9b6c7;
}

.field__input:hover {
    border-color: #cdd7e3;
}

.field__input:focus {
    outline: none;
    border-color: var(--ms-brand-400);
    box-shadow: var(--ms-ring);
}

.field__wrap:focus-within .field__icon {
    color: var(--ms-brand-500);
}

.field--has-toggle .field__input {
    padding-right: 46px;
}

.field__toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ms-ink-400);
    font-size: 14px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.field__toggle:hover {
    color: var(--ms-brand-600);
    background: var(--ms-line-soft);
}

/* Keep autofilled inputs on-brand instead of Chrome yellow */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ms-ink-900);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    caret-color: var(--ms-ink-900);
}

.field-error {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: -10px 0 16px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ms-danger);
    line-height: 1.45;
}

.field-error i {
    margin-top: 2px;
    font-size: 11px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-auth {
    width: 100%;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: var(--ms-radius);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--ms-brand-600) 0%, var(--ms-brand-800) 100%);
    box-shadow: 0 1px 2px rgba(9, 45, 72, .18), 0 12px 24px -14px rgba(9, 45, 72, .85);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.btn-auth:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(9, 45, 72, .2), 0 18px 30px -16px rgba(9, 45, 72, .9);
}

.btn-auth:active {
    transform: translateY(0);
    filter: brightness(.97);
}

.btn-auth i {
    font-size: 13px;
    opacity: .9;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ms-ink-400);
    text-decoration: none;
    transition: color .15s ease;
}

.btn-ghost:hover {
    color: var(--ms-brand-600);
}

.auth-note {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--ms-line);
    text-align: center;
}

.auth-note__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ms-ink-700);
    margin: 0 0 2px;
}

.auth-note__text {
    font-size: 12.5px;
    color: var(--ms-ink-400);
    margin: 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Support card
   -------------------------------------------------------------------------- */

/* A button, not a disclosure: expanding in place either pushed the footer out of
   view or covered the form, so the details open in a dialog instead and the
   layout never moves. */
.support {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 15px 18px;
    text-align: left;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ms-ink-700);
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius-lg);
    box-shadow: var(--ms-shadow-soft);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.support:hover {
    border-color: #cdd7e3;
    box-shadow: 0 1px 2px rgba(9, 45, 72, .06), 0 14px 28px -18px rgba(9, 45, 72, .5);
}

.support .ico {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(20, 184, 166, .10);
    color: var(--ms-accent-600);
    font-size: 13px;
}

.support .chev {
    margin-left: auto;
    font-size: 12px;
    color: var(--ms-ink-400);
    transition: transform .2s ease;
}

.support:hover .chev {
    transform: translateX(3px);
    color: var(--ms-brand-600);
}

/* Server clock stays on the page — it is glanceable information, not a detail */
.auth-clock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ms-ink-400);
}

.auth-clock i {
    color: var(--ms-accent-600);
}

.support__hint {
    font-size: 12.5px;
    color: var(--ms-ink-400);
    margin: 0 0 14px;
    line-height: 1.5;
}

.support__list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.support__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--ms-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--ms-ink-700);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.support__list a:hover {
    background: var(--ms-surface-2);
    color: var(--ms-brand-700);
}

.support__list i {
    width: 15px;
    text-align: center;
    font-size: 12px;
    color: var(--ms-ink-400);
}

.support__list .ext {
    margin-left: auto;
    font-size: 10px;
    opacity: .7;
}

.support__list a {
    border: 1px solid transparent;
}

.support__list a:hover {
    border-color: var(--ms-line);
}

/* --------------------------------------------------------------------------
   Footer + floating home button
   -------------------------------------------------------------------------- */

.auth-foot {
    padding: 16px 40px 22px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ms-ink-400);
}

.auth-foot strong {
    color: var(--ms-ink-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Shortcut to the mobile app — only useful on the devices that run it, so it is
   hidden from tablet-landscape upwards (see the min-width: 992px rule below). */
.home-fab {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1040;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(9, 45, 72, .10);
    color: var(--ms-brand-700);
    font-size: 15px;
    text-decoration: none;
    backdrop-filter: blur(10px);
    box-shadow: var(--ms-shadow-soft);
    transition: transform .16s ease, box-shadow .16s ease, color .16s ease;
}

.home-fab:hover {
    color: var(--ms-brand-900);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(9, 45, 72, .08), 0 14px 26px -14px rgba(9, 45, 72, .6);
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */

.auth-modal .modal-content {
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius-lg);
    box-shadow: 0 32px 70px -24px rgba(9, 45, 72, .5);
    overflow: hidden;
}

.auth-modal .modal-header {
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--ms-line-soft);
}

.auth-modal .modal-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ms-ink-900);
    margin: 0;
}

.auth-modal .modal-subtitle {
    font-size: 12.5px;
    color: var(--ms-ink-400);
    margin: 3px 0 0;
}

.auth-modal .modal-body {
    padding: 20px 22px 24px;
}

.auth-modal .modal-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(20, 184, 166, .10);
    color: var(--ms-accent-600);
    font-size: 15px;
}

.otp-input {
    width: 100%;
    height: 56px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .5em;
    text-indent: .5em;
    font-variant-numeric: tabular-nums;
    color: var(--ms-ink-900);
    background: var(--ms-surface-2);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.otp-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--ms-brand-400);
    box-shadow: var(--ms-ring);
}

.otp-countdown {
    min-height: 20px;
    margin: 12px 0 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ms-ink-500);
}

.otp-countdown strong {
    color: var(--ms-brand-700);
    font-variant-numeric: tabular-nums;
}

.auth-table {
    width: 100%;
    margin: 0;
    font-size: 13.5px;
    border-collapse: separate;
    border-spacing: 0;
}

.auth-table thead th {
    padding: 10px 14px;
    background: var(--ms-surface-2);
    border-bottom: 1px solid var(--ms-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ms-ink-400);
}

.auth-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ms-line-soft);
    color: var(--ms-ink-700);
    vertical-align: middle;
}

.auth-table tbody tr:last-child td {
    border-bottom: 0;
}

.auth-table tbody tr:hover td {
    background: var(--ms-surface-2);
}

.auth-table .btn-primary {
    --bs-btn-bg: var(--ms-brand-600);
    --bs-btn-border-color: var(--ms-brand-600);
    --bs-btn-hover-bg: var(--ms-brand-700);
    --bs-btn-hover-border-color: var(--ms-brand-700);
    --bs-btn-active-bg: var(--ms-brand-800);
    border-radius: 9px;
    font-weight: 600;
}

.table-shell {
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Desktop: the window itself never scrolls. The brand panel is pinned and the
   form column owns any scrolling, with its gutter reserved up front — otherwise
   a scrollbar appearing mid-interaction narrows the viewport and everything
   visibly jumps sideways. */
@media (min-width: 992px) {

    /* The mobile app is not used from a desktop, so drop the shortcut here */
    .home-fab {
        display: none;
    }

    .auth-shell {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .auth-visual {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        height: 100dvh;
    }

    .auth-panel {
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: rgba(9, 45, 72, .22) transparent;
    }

    /* Transparent track so the reserved gutter is invisible while collapsed */
    .auth-panel::-webkit-scrollbar {
        width: 10px;
    }

    .auth-panel::-webkit-scrollbar-track {
        background: transparent;
    }

    .auth-panel::-webkit-scrollbar-thumb {
        background: rgba(9, 45, 72, .22);
        background-clip: content-box;
        border: 3px solid transparent;
        border-radius: 99px;
    }

    .auth-panel::-webkit-scrollbar-thumb:hover {
        background: rgba(9, 45, 72, .34);
        background-clip: content-box;
    }

}

@media (max-width: 1400px) {
    .auth-visual__content {
        padding: 48px 48px 44px;
    }
}

@media (max-width: 1199.98px) {
    .auth-shell {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 480px);
    }

    .auth-visual__content {
        padding: 44px 40px 40px;
    }

    .auth-features {
        margin-bottom: 30px;
    }
}

@media (max-width: 991.98px) {

    /* Single column: the photo becomes the page backdrop */
    .auth-shell {
        grid-template-columns: 1fr;
        position: relative;
    }

    .auth-shell::before {
        content: "";
        position: fixed;
        inset: 0;
        background-color: var(--ms-brand-900);
        background-image: var(--auth-bg);
        background-size: cover;
        background-position: center;
        z-index: 0;
    }

    .auth-shell::after {
        content: "";
        position: fixed;
        inset: 0;
        background: linear-gradient(180deg, rgba(var(--nav-2-rgb), .90) 0%, rgba(var(--nav-2-rgb), .95) 100%);
        z-index: 0;
    }

    body.auth-body {
        background: var(--ms-brand-900);
    }

    .auth-visual {
        display: none;
    }

    .auth-panel {
        position: relative;
        z-index: 1;
        background: transparent;
    }

    /* Single column: centre the stack in the viewport. The container grows past
       100dvh when the content is taller, so centring never clips anything — the
       page just scrolls as usual. */
    .auth-panel__body {
        padding: 34px 20px 24px;
        align-items: center;
    }

    .auth-mark {
        justify-content: center;
        text-align: left;
        margin-bottom: 20px;
    }

    .auth-mark__name {
        color: #fff;
    }

    .auth-mark__name .v {
        background: rgba(255, 255, 255, .12);
        border-color: rgba(255, 255, 255, .2);
        color: rgba(255, 255, 255, .8);
    }

    .auth-mark__sub {
        color: rgba(255, 255, 255, .62);
    }

    .auth-foot {
        color: rgba(255, 255, 255, .6);
        padding: 10px 20px 20px;
    }

    .auth-foot strong {
        color: rgba(255, 255, 255, .78);
    }
}

@media (max-width: 575.98px) {
    .auth-panel__body {
        padding: 26px 14px 18px;
    }

    .auth-card {
        padding: 24px 20px 22px;
        border-radius: 18px;
    }

    .auth-card__title {
        font-size: 21px;
    }

    .home-fab {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
    }

    .auth-mark {
        margin-bottom: 18px;
    }
}

/* Short laptop screens (1366x768 and friends) — compact everything so the
   card, helpline and footer all stay above the fold. */
@media (min-width: 992px) and (max-height: 800px) {
    .auth-panel__body {
        align-items: flex-start;
        padding: 20px 40px 12px;
    }

    .auth-mark {
        margin-bottom: 14px;
    }

    .auth-card {
        padding: 20px 26px 16px;
    }

    .auth-card__head {
        margin-bottom: 14px;
    }

    .seg {
        margin-bottom: 14px;
    }

    .field {
        margin-bottom: 14px;
    }

    .field__input,
    .btn-auth {
        height: 46px;
    }

    .auth-note {
        margin-top: 10px;
        padding-top: 10px;
    }

    .support {
        margin-top: 12px;
        padding: 11px 18px;
    }

    .auth-clock {
        margin-top: 8px;
    }

    .auth-foot {
        padding: 8px 40px 12px;
    }

    .auth-visual__content {
        padding: 40px 48px 34px;
    }

    .auth-visual__title {
        font-size: clamp(24px, 2.2vw, 34px);
    }

    .auth-visual__text {
        margin-bottom: 24px;
    }

    .auth-features {
        gap: 10px;
        margin-bottom: 24px;
    }

    .auth-features .ico {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .auth-visual__meta {
        padding-top: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .auth-body *,
    .auth-body *::before,
    .auth-body *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}