/* ════════════════════════════════════════════════════════════════════
   The sign-in page — ported from the MEDBUS platform (medbus3).

   Plain CSS, no build step: it reads its palette from
   medbus-tokens.css, which must load first.

   Everything is scoped under .login-body so none of it can leak into
   the application shell.
   ════════════════════════════════════════════════════════════════════ */

.login-body {
    min-height: 100svh;
    background-color: #eef4fd;
    color: var(--text-body);
}

.dark .login-body { background-color: #0b1220; }

.login-shell {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
}

/* ── The scene ──────────────────────────────────────────────────── */

.login-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.login-scene-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% center;
    /* Lifted so the room reads as daylit rather than overcast. */
    filter: brightness(1.13) saturate(1.06) contrast(0.98);
    /* A very slow drift, enough to feel alive and not enough to notice. */
    transform-origin: 55% 45%;
    animation: login-drift 42s ease-in-out infinite;
    will-change: transform;
}

.dark .login-scene-photo { filter: brightness(0.9) saturate(1.02); }

/* The photograph is a backdrop, not the subject: the wash takes it down to a
   pale blue so navy headlines and a white card both sit on it comfortably. */
.login-scene-wash {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            /* The artboard carries its own wall lettering on the left; the
               copy has to sit on a clean field, not on top of it. */
            rgba(242, 247, 254, 0.97) 0%,
            rgba(242, 247, 254, 0.93) 24%,
            rgba(238, 245, 254, 0.46) 40%,
            rgba(233, 242, 253, 0.10) 60%,
            rgba(233, 242, 253, 0.14) 82%,
            rgba(236, 244, 254, 0.28) 100%);
}

.dark .login-scene-photo { opacity: 0.5; }

.dark .login-scene-wash {
    background:
        linear-gradient(105deg,
            rgba(11, 18, 32, 0.96) 0%,
            rgba(11, 18, 32, 0.90) 32%,
            rgba(14, 24, 46, 0.82) 55%,
            rgba(12, 20, 40, 0.92) 100%);
}

/* Two soft arcs, drawn rather than imported, echoing the curve in the art. */
/* ── Dark-mode switch ───────────────────────────────────────────── */

.login-theme {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem 0.375rem 0.375rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    font-size: 13px;
    font-weight: 700;
    color: #1c3a68;
    box-shadow: 0 4px 14px -6px rgba(20, 50, 100, 0.35);
    transition: background-color 150ms ease;
}

.login-theme:hover { background-color: rgba(255, 255, 255, 0.85); }

.login-theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: rgba(124, 92, 252, 0.14);
    color: #6d5be7;
}

.dark .login-theme {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.08);
    color: #dbe6f7;
}

.dark .login-theme:hover { background-color: rgba(255, 255, 255, 0.14); }

/* ── Layout ─────────────────────────────────────────────────────── */

.login-grid {
    position: relative;
    z-index: 10;
    display: grid;
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

@media (min-width: 1024px) {
    .login-grid {
        grid-template-columns: minmax(19rem, 26rem) minmax(0, 1fr) 26rem;
        align-content: stretch;
    }

    .login-pitch { grid-column: 1; }
    .login-team { grid-column: 2; }
    .login-panel { grid-column: 3; }
}

/* ── The pitch ──────────────────────────────────────────────────── */

.login-pitch {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1.25rem 0;
}

@media (min-width: 1024px) {
    .login-pitch {
        justify-content: space-between;
        padding: 2.5rem 1rem 2rem 3rem;
    }
}

.login-brand { display: flex; flex-direction: column; gap: 0.375rem; }

.login-brand-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #4a6a99;
}

.dark .login-brand-tag { color: #8fa9cd; }

.login-pitch-body { max-width: 30rem; }

.login-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #5b7fb5;
}

.login-eyebrow span { margin: 0 0.4rem; color: #9dbbe4; }

.dark .login-eyebrow { color: #7f9dc9; }

.login-headline {
    margin-top: 0.75rem;
    /* Figtree carries a true 900; Plus Jakarta Sans stops at 800 and the
       headline is the one place on the page that wants the extra weight. */
    font-family: 'Figtree', var(--mb-font-sans);
    font-size: clamp(2.2rem, 5.4vw, 3.6rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #10254c;
    text-wrap: balance;
}

.dark .login-headline { color: #eaf1fb; }

/* The one place on the page that earns a gradient. */
.login-headline-accent {
    background-image: linear-gradient(96deg, #1f7aec 0%, #4a63e8 55%, #7c5cfc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.login-lede {
    margin-top: 1rem;
    max-width: 30rem;
    font-size: 15px;
    line-height: 1.65;
    color: #3f5a80;
}

.dark .login-lede { color: #9db6d8; }

/* ── Feature row ────────────────────────────────────────────────── */

.login-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.75rem;
    max-width: 27rem;
    list-style: none;
    padding: 0;
}

.login-feature { display: flex; flex-direction: column; gap: 0.5rem; }

.login-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    box-shadow: 0 6px 16px -10px rgba(20, 50, 100, 0.5);
}

.login-feature-label {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    color: #23406e;
}

.dark .login-feature-label { color: #c3d5ee; }

/* ── Figures ────────────────────────────────────────────────────── */

.login-figures {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(31, 122, 236, 0.18);
    max-width: 27rem;
}

.login-figure { flex: 1; }

.login-figure + .login-figure {
    padding-left: 1.5rem;
    border-left: 1px solid rgba(31, 122, 236, 0.18);
}

.login-figure-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #10254c;
}

.login-figure-label {
    margin-top: 0.25rem;
    font-size: 12px;
    font-weight: 600;
    color: #5b7fb5;
}

.dark .login-figure-value { color: #eaf1fb; }
.dark .login-figure-label { color: #8fa9cd; }
.dark .login-figures,
.dark .login-figure + .login-figure { border-color: rgba(120, 165, 230, 0.22); }

.login-copyright {
    display: none;
    font-size: 12.5px;
    color: #6b87ad;
}

.dark .login-copyright { color: #7f96b8; }

@media (min-width: 1024px) {
    .login-copyright { display: block; }
}

/* ── The staff ──────────────────────────────────────────────────── */

/* The artwork is scenery and must not swallow clicks meant for the card
   behind it — but the pill inside it is a real link, so it takes its
   pointer events back. */
.login-team {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    pointer-events: none;
}

.login-tour { pointer-events: auto; }

/* The stack is what gets sized; both frames simply fill it. */
.login-team-stack {
    position: relative;
    display: block;
    width: min(100%, 30rem);
    /* Only the middle four read at small sizes; the fifth is cropped away
       rather than shrunk into an unreadable smudge. */
    aspect-ratio: 5 / 4;
}

.login-team-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 46% top;
}

/* The closed eyes sit exactly over the open ones. A blink is a cut rather
   than a dissolve — half-open eyes are not a thing a face does. */
.login-team-blink {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.login-team-blink.is-blinking {
    animation: login-blink 0.34s steps(1, end);
}

/* A soft light behind the group, breathing slowly. */
.login-team-glow {
    position: absolute;
    left: 50%;
    bottom: 4%;
    z-index: -1;
    width: 84%;
    aspect-ratio: 1 / 0.72;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(210, 231, 255, 0.55) 45%,
        rgba(190, 220, 255, 0) 78%);
    animation: login-breathe 9s ease-in-out infinite;
    pointer-events: none;
}

.dark .login-team-glow {
    background: radial-gradient(closest-side,
        rgba(96, 150, 235, 0.28) 0%,
        rgba(60, 100, 200, 0.18) 45%,
        rgba(40, 70, 160, 0) 78%);
}

@media (min-width: 1024px) {
    .login-team {
        margin-top: 0;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
    }

    .login-team-stack {
        width: 100%;
        max-width: 46rem;
        max-height: 82vh;
        aspect-ratio: 1100 / 916;
    }

    .login-team-photo {
        object-fit: contain;
        object-position: bottom center;
    }
}

/* ── The card ───────────────────────────────────────────────────── */

.login-panel {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem 2rem;
}

@media (min-width: 1024px) {
    .login-panel { padding: 2rem 2rem 2rem 0; }
}

.login-card {
    width: 100%;
    max-width: 25rem;
    padding: 1.75rem 1.5rem;
    border-radius: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 60px -30px rgba(16, 45, 95, 0.45);
}

@media (min-width: 1024px) {
    .login-card { padding: 2rem 1.75rem; }
}

.dark .login-card {
    border-color: rgba(255, 255, 255, 0.09);
    background-color: rgba(19, 29, 48, 0.86);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.login-card-head { text-align: center; }

.login-title {
    margin-top: 0.875rem;
    font-family: 'Figtree', var(--mb-font-sans);
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #10254c;
}

.dark .login-title { color: #eaf1fb; }

.login-subtitle {
    margin-top: 0.375rem;
    font-size: 13px;
    line-height: 1.55;
    color: #62789b;
}

.dark .login-subtitle { color: #94aac9; }

/* ── Form ───────────────────────────────────────────────────────── */

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 1.5rem;
}

.login-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 12.5px;
    font-weight: 600;
    color: #4a6a99;
}

.dark .login-label { color: #9db6d8; }

.login-field { position: relative; }

.login-field-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: #7d9ec9;
    pointer-events: none;
}

.dark .login-field-icon { color: #6f8bb4; }

.login-input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem 0 2.875rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(146, 178, 220, 0.55);
    background-color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    color: #14294f;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.login-input::placeholder { color: #90a8c6; }

.login-input:focus {
    outline: none;
    border-color: #1f7aec;
    box-shadow: 0 0 0 3px rgba(31, 122, 236, 0.16);
}

.login-input-padded { padding-right: 2.875rem; }

.login-input-bad { border-color: var(--color-bad-500); }

.dark .login-input {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.05);
    color: #e8effa;
}

.dark .login-input::placeholder { color: #7b93b6; }

/* The native arrow is replaced by one that matches the field icons. */
.login-select {
    appearance: none;
    padding-right: 2.75rem;
    cursor: pointer;
}

.login-field-caret {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: #7d9ec9;
    pointer-events: none;
}

.login-field-reveal {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    padding: 0.4rem;
    border-radius: 0.5rem;
    color: #7d9ec9;
    transition: background-color 150ms ease;
}

.login-field-reveal:hover { background-color: rgba(31, 122, 236, 0.1); }

.login-error {
    margin-top: -0.375rem;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-bad-600);
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 13px;
    color: #3f5a80;
}

.dark .login-remember { color: #a9c0dd; }

.login-link {
    font-size: 13px;
    font-weight: 600;
    color: #1f7aec;
}

.login-link:hover { text-decoration: underline; }

.dark .login-link { color: #7db0f5; }

.login-hint {
    margin-top: -0.25rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background-color: rgba(31, 122, 236, 0.08);
    font-size: 12px;
    line-height: 1.5;
    color: #33517d;
}

.dark .login-hint {
    background-color: rgba(31, 122, 236, 0.14);
    color: #b6cdea;
}

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    height: 3.25rem;
    margin-top: 0.25rem;
    border-radius: 0.875rem;
    background-image: linear-gradient(96deg, #1f7aec 0%, #4a63e8 55%, #7c5cfc 100%);
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 14px 30px -14px rgba(58, 96, 236, 0.85);
    transition: transform 120ms ease, box-shadow 150ms ease;
}

.login-submit:hover {
    box-shadow: 0 18px 34px -14px rgba(58, 96, 236, 0.95);
}

.login-submit:active { transform: translateY(1px); }

/* ── Notes and the demo hint ────────────────────────────────────── */

.login-note {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding: 0.75rem;
    border-radius: 0.875rem;
    font-size: 13px;
    font-weight: 500;
}

.login-note-good {
    background-color: var(--color-good-50);
    color: var(--color-good-700);
}

.login-note-bad {
    background-color: var(--color-bad-50);
    color: var(--color-bad-700);
}

.login-demo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.875rem;
    background-color: rgba(31, 122, 236, 0.07);
}

.login-demo-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5b7fb5;
}

.login-demo-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: #23406e;
}

.dark .login-demo { background-color: rgba(31, 122, 236, 0.13); }
.dark .login-demo-label { color: #8fa9cd; }
.dark .login-demo-value { color: #cfe0f5; }

.login-card-foot {
    margin-top: 1rem;
    text-align: center;
    font-size: 12px;
    color: #7b93b6;
}

.login-card-foot span { margin: 0 0.3rem; }

/* ── The tour pill ──────────────────────────────────────────────── */

.login-team { position: relative; }

/* Sits over the lower third of the staff, as in the design. */
.login-tour {
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: max-content;
    max-width: min(92%, 26rem);
    /* Padded evenly, so the arrow hugs the right corner the way the face
       hugs the left one. */
    padding: 0.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 34px -18px rgba(16, 45, 95, 0.65);
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

.login-tour:hover {
    background-color: rgba(255, 255, 255, 0.78);
    box-shadow: 0 20px 40px -18px rgba(16, 45, 95, 0.75);
}

/* It arrives a beat after the page settles, then drifts. Both animations
   carry the -50% themselves, or the pill would jump out of centre. An
   animated transform outranks a static one, so the hover states below move
   the pill's contents rather than the pill. */
.login-tour {
    animation:
        login-pop 0.62s cubic-bezier(0.2, 1.5, 0.4, 1) 0.75s backwards,
        login-float 5.5s ease-in-out 1.4s infinite;
}

.login-tour:hover { animation-play-state: paused; }

.login-tour-face {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    object-fit: cover;
    background-color: #dbeafe;
    flex: none;
}

.login-tour-label {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    color: #16305c;
    /* Hovering opens a gap here, which widens the pill and carries the
       arrow out to its new right corner. Growing a margin animates where
       growing a max-content width does not. */
    margin-right: 0;
    transition: margin-right 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.login-tour:hover .login-tour-label { margin-right: 2.5rem; }

.login-tour-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background-image: linear-gradient(135deg, #1f7aec, #7c5cfc);
    color: #ffffff;
    flex: none;
    /* Pinned to the right edge, so it stays in the corner as the pill opens. */
    margin-left: auto;
    box-shadow: 0 6px 14px -6px rgba(58, 96, 236, 0.8);
    transition: transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 220ms ease;
}

/* A nudge when the pill is hovered, and a proper zoom when the circle
   itself is. */
.login-tour:hover .login-tour-go { transform: scale(1.06); }

.login-tour-go:hover {
    transform: scale(1.22);
    box-shadow: 0 10px 22px -8px rgba(58, 96, 236, 0.95);
}

.dark .login-tour {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(18, 28, 48, 0.7);
}

.dark .login-tour:hover { background-color: rgba(24, 36, 62, 0.85); }
.dark .login-tour-label { color: #dce8f8; }

.login-notice {
    margin-top: 0.875rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background-color: rgba(31, 122, 236, 0.08);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: #33517d;
}

.dark .login-notice {
    background-color: rgba(31, 122, 236, 0.14);
    color: #b6cdea;
}

/* ── Everything arriving ────────────────────────────────────────── */

/* The page assembles from the top down: name, promise, then the form. Each
   piece rises the same short distance, so it reads as one movement rather
   than as five separate ones. */
.login-brand,
.login-eyebrow,
.login-headline,
.login-lede,
.login-copyright,
.login-team,
.login-card {
    opacity: 0;
    animation: login-rise 0.66s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.login-brand { animation-delay: 0.05s; }
.login-eyebrow { animation-delay: 0.16s; }
.login-headline { animation-delay: 0.24s; }
.login-lede { animation-delay: 0.34s; }
.login-copyright { animation-delay: 0.9s; }

/* The staff and the card come in together, a beat behind the words. */
.login-team { animation-delay: 0.42s; animation-duration: 0.85s; }

.login-card {
    animation-name: login-card-in;
    animation-delay: 0.3s;
    animation-duration: 0.75s;
}

/* The fields follow the card rather than arriving with it. */
.login-card-head,
.login-form > *,
.login-card-foot {
    opacity: 0;
    animation: login-rise 0.5s ease-out forwards;
    animation-delay: 0.62s;
}

.login-form > *:nth-child(2) { animation-delay: 0.70s; }
.login-form > *:nth-child(3) { animation-delay: 0.76s; }
.login-form > *:nth-child(4) { animation-delay: 0.82s; }
.login-form > *:nth-child(5) { animation-delay: 0.88s; }
.login-form > *:nth-child(6) { animation-delay: 0.94s; }
.login-card-foot { animation-delay: 1.05s; }

/* The switch is chrome, so it simply fades. */
.login-theme {
    opacity: 0;
    animation: login-fade 0.5s ease-out 0.5s forwards;
}

/* ── Motes behind the group ─────────────────────────────────────── */

.login-orbs {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.login-orbs i {
    position: absolute;
    bottom: 12%;
    left: calc(8% + var(--n) * 12%);
    width: calc(10px + var(--n) * 3px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%,
        rgba(255, 255, 255, 0.95),
        rgba(168, 206, 255, 0.55) 55%,
        rgba(140, 185, 250, 0) 72%);
    opacity: 0;
    --peak: 0.55;
    --sway: calc(var(--n) * 6px - 20px);
    animation: login-orb calc(11s + var(--n) * 1.6s) linear calc(var(--n) * -2.3s) infinite;
}

.dark .login-orbs i {
    background: radial-gradient(circle at 34% 30%,
        rgba(150, 195, 255, 0.55),
        rgba(90, 140, 230, 0.30) 55%,
        rgba(60, 100, 200, 0) 72%);
    --peak: 0.4;
}

/* ── The tiles and the figures ──────────────────────────────────── */

.login-feature,
.login-figure {
    opacity: 0;
    animation: login-rise 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    animation-delay: calc(0.28s + var(--n, 0) * 0.09s);
}

.login-figure { animation-delay: calc(0.62s + var(--n, 0) * 0.09s); }

.login-feature-icon {
    transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.25s ease;
}

.login-feature:hover .login-feature-icon {
    transform: translateY(-4px) scale(1.07);
    box-shadow: 0 12px 22px -12px rgba(20, 50, 100, 0.6);
}

.login-feature:hover .login-feature-label { color: var(--color-brand-700); }

.login-feature-label { transition: color 0.2s ease; }

.login-figure-value {
    font-variant-numeric: tabular-nums;
    transition: transform 0.25s ease;
}

.login-figure:hover .login-figure-value { transform: translateY(-2px); }

/* ── Motion ─────────────────────────────────────────────────────── */

/* One cut to the closed eyes and back, about the length of a real blink. */
@keyframes login-blink {
    0%, 34% { opacity: 1; }
    35%, 100% { opacity: 0; }
}

@keyframes login-orb {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.7); }
    18% { opacity: var(--peak, 0.5); }
    82% { opacity: var(--peak, 0.5); }
    100% { opacity: 0; transform: translate3d(var(--sway, 12px), -190px, 0) scale(1.15); }
}

@keyframes login-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes login-card-in {
    from { opacity: 0; transform: translateY(26px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes login-breathe {
    0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

@keyframes login-drift {
    0%, 100% { transform: scale(1.04) translate3d(0, 0, 0); }
    50% { transform: scale(1.09) translate3d(-1.1%, -0.6%, 0); }
}

@keyframes login-pop {
    0% { opacity: 0; transform: translateX(-50%) translateY(18px) scale(0.86); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes login-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}

/* Nothing here is load-bearing, so it all stops on request. */
@media (prefers-reduced-motion: reduce) {
    .login-scene-photo,
    .login-team-blink,
    .login-team-glow,
    .login-orbs i,
    .login-tour {
        animation: none;
    }

    .login-feature,
    .login-figure,
    .login-brand,
    .login-eyebrow,
    .login-headline,
    .login-lede,
    .login-copyright,
    .login-team,
    .login-card,
    .login-card-head,
    .login-form > *,
    .login-card-foot,
    .login-theme {
        opacity: 1;
        animation: none;
    }

    .login-orbs { display: none; }

    .login-tour-label,
    .login-tour-go {
        transition: none;
    }

    .login-scene-photo { transform: none; }
}

/* ── Small screens ──────────────────────────────────────────────── */

@media (max-width: 1023px) {
    /* Stacked, the copy sits directly over the room rather than beside it,
       so the wash runs down the page instead of across it. */
    .login-scene-wash {
        background:
            linear-gradient(180deg,
                rgba(240, 246, 254, 0.96) 0%,
                rgba(240, 246, 254, 0.90) 34%,
                rgba(236, 244, 254, 0.62) 52%,
                rgba(230, 240, 253, 0.34) 70%,
                rgba(228, 239, 253, 0.48) 100%);
    }

    .dark .login-scene-wash {
        background:
            linear-gradient(180deg,
                rgba(11, 18, 32, 0.95) 0%,
                rgba(11, 18, 32, 0.90) 34%,
                rgba(13, 22, 42, 0.78) 52%,
                rgba(13, 22, 42, 0.68) 70%,
                rgba(12, 20, 40, 0.86) 100%);
    }

    /* The brand row and the switch share a line, as on the phone mock-up. */
    .login-theme {
        top: 1.5rem;
        right: 1rem;
    }

    /* The switch clears the logo on its own; reserving width for it here
       only wrapped the tagline onto a second line. */
    .login-brand-tag { letter-spacing: 0.14em; }

    /* The wordmark is set for the wide layout; a phone wants it smaller. */
    .login-brand-logo {
        height: 48px !important;
        width: 141px !important;
    }

    .login-features {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .login-feature-icon {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.875rem;
    }

    .login-feature-label { font-size: 11px; }

    /* The staff fill the width and are cropped to four figures, so they read
       at phone size instead of shrinking into a strip. The overflow is what
       drops the fifth figure off the right edge. */
    .login-team {
        position: relative;
        height: 17rem;
        margin-bottom: -2rem;
        overflow: hidden;
    }

    /* Scaled past the viewport so the fifth figure falls off the right, and
       anchored to the top so the crop takes the legs rather than the faces.
       The card then covers what is left of them. */
    .login-team-stack {
        position: absolute;
        top: 0;
        left: -2%;
        width: 133%;
        max-width: none;
        max-height: none;
        height: auto;
        aspect-ratio: 1100 / 916;
    }

    .login-team-photo { object-fit: contain; }

    .login-team-glow { bottom: 22%; width: 76%; }

    /* Extra room at the foot so the wave reads below the card rather than
       being entirely covered by it. */
    .login-panel { padding-top: 0; padding-bottom: 3.5rem; }

    /* Lifted clear of the card's top edge, which sits 3.5rem into the
       staff — otherwise the pill's lower half disappears behind it. */
    .login-tour {
        bottom: 2.9rem;
        padding: 0.4rem;
    }

    .login-tour-face { width: 2.5rem; height: 2.5rem; }
    .login-tour-label { font-size: 12.5px; }
    .login-tour-go { width: 2rem; height: 2rem; }
}

/* On a phone the page is the promise and the form, nothing between: the
   tiles and the figures are what a wide screen has room to add. */
@media (max-width: 767px) {
    .login-features,
    .login-figures { display: none; }

    .login-pitch { gap: 1rem; }
}


/* ── Aurora additions ───────────────────────────────────────────────
   Two things this build needs that the platform's own page does not:
   a flash slot for CodeIgniter's session messages, and a clinic select
   that is always shown (the platform hides it for single-clinic
   tenants; here it is how the session picks its clinic). */

.login-flash {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding: 0.75rem;
    border-radius: 0.875rem;
    font-size: 13px;
    font-weight: 500;
    background-color: var(--color-bad-50);
    color: var(--color-bad-700);
}

.login-flash svg { flex: none; margin-top: 1px; }

/* The native select renders its options with the OS palette, so the
   field itself is the only part worth theming. */
.dark .login-select option {
    background-color: #131d30;
    color: #e8effa;
}

/* The wordmark in the pitch is the platform's; the one on the card is
   the clinic's. Both are 200x68 artwork sized by height. */
.login-brand-logo,
.login-card-logo { display: block; object-fit: contain; }

/* Two files rather than a CSS filter: the wordmark is brand blue beside
   black, and black is invisible on the dark scene. The dark variant lifts
   only the black half, so the blue stays the brand's blue. */
.login-brand-logo-dark { display: none; }
.dark .login-brand-logo-light { display: none; }
.dark .login-brand-logo-dark { display: block; }

.login-card-logo { margin: 0 auto; }


/* ── Phone ───────────────────────────────────────────────────────
   Safari zooms the whole page when a field smaller than 16px takes
   focus, which on this layout throws the card half off the screen.
   Sizing the fields at 16px is what stops it. */

@media (max-width: 1023.98px) {
    .login-input {
        font-size: 16px;
        height: 3.25rem;
    }

    .login-submit { height: 3.5rem; }

    /* Room below the card for the browser's own chrome. */
    .login-panel { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
}