/* CEIMS tokens: see docs/ceims-style-guide.html. Navy is shared; mode classes must not redeclare it. */
:root {
    --ceims-navy: #102a43;
    --ceims-navy-deep: #0b2238;
    --primary: #1b6ec2;
    --primary-line: #1861ac;
}

.m-dark {
    --canvas: #0b2238;
    --surface: #16354f;
    --line: rgb(255 255 255 / 0.16);
    --text: #e7f0f8;
    --muted: #a9c4dc;
    --accent: #00d4ea;
    --link: #6cc4ff;
    --field: #0b2238;
    --field-line: #6f8ba6;
    --raised: #1d4160;
    --row-tint: rgb(255 255 255 / 0.08);
    --ok: #5fd08a;
    --warn: #f5c451;
    --bad: #ff9b8f;
}

.m-light {
    --canvas: #f4f7fa;
    --surface: #ffffff;
    --line: #d9e2ec;
    --text: #102a43;
    --muted: #52667a;
    --accent: #087eae;
    --link: #006bb7;
    --field: #ffffff;
    --field-line: #7a8fa3;
    --raised: #eef3f8;
    --row-tint: #eef3f8;
    --ok: #1a7f45;
    --warn: #8a5a00;
    --bad: #b42318;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* CEIMS sidebar: force all Syncfusion accordion surfaces to navy */
html body .ceims-sidebar-nav,
html body .ceims-sidebar-nav .e-accordion,
html body .ceims-sidebar-nav .e-acrdn-item,
html body .ceims-sidebar-nav .e-acrdn-item.e-select,
html body .ceims-sidebar-nav .e-acrdn-item.e-active,
html body .ceims-sidebar-nav .e-acrdn-header,
html body .ceims-sidebar-nav .e-acrdn-item.e-select > .e-acrdn-header,
html body .ceims-sidebar-nav .e-acrdn-item.e-active > .e-acrdn-header,
html body .ceims-sidebar-nav .e-acrdn-header-content,
html body .ceims-sidebar-nav .e-acrdn-panel,
html body .ceims-sidebar-nav .e-acrdn-content {
    background: #102a43 !important;
    background-color: #102a43 !important;
    background-image: none !important;
    border-color: #102a43 !important;
    box-shadow: none !important;
}

    /* Keep the expand/collapse arrow visible */
    html body .ceims-sidebar-nav .e-toggle-icon,
    html body .ceims-sidebar-nav .e-toggle-icon .e-icons {
        color: #ffffff !important;
        background: #102a43 !important;
    }

/* Rounded bottom corners on the main app bar.
   overflow:hidden is required, not decorative: the bar's inner table and Syncfusion's
   own wrapper carry backgrounds that paint over the radius and square the corners back
   off. The border is what makes the rounding VISIBLE at all - .app-container behind it
   is the same #102a43 as the bar, so without a contrasting edge the curve cuts one
   navy out of an identical navy and nothing appears to change.
   html body + !important matches the rest of this file: Syncfusion's .e-appbar rules
   win otherwise. Applies to both SfAppBar instances in CEIMSPageShell.razor. */
html body .ceims-main-header {
    border-radius: 0 0 12px 12px !important;
    overflow: hidden !important;
    border-bottom: 1px solid #2c5282 !important;
}

/* Left navigator's right edge matches the header's bottom edge above (#2c5282).
   !important for the same reason as the rest of this file: Syncfusion's sidebar
   theme rules and the inline <style> in CEIMSPageShell.razor otherwise win. */
html body .e-sidebar-main,
html body .e-sidebarBL-main {
    border-right: 1px solid #2c5282 !important;
}

/* Code Scoring grids (CPT, DRG, Underpayment): headers wrap between words only, never
   mid-word; cells stay on one line (WrapMode=Header on the grid). Column widths are set
   wide enough for the longest header word plus the filter/sort icons. */
html body .cs-grid-nobreak .e-headercelldiv,
html body .cs-grid-nobreak .e-headertext {
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
}

html body .ceims-main-header .nav-link,
html body .ceims-main-header h4,
html body .ceims-main-header h6,
html body .ceims-main-header .e-btn.e-inherit,
html body .ceims-main-header .e-icons {
    color: #ffffff !important;
}

html body .app-container,
html body .app-container .main-wrapper,
html body .app-container .content-area,
html body .app-container .content-areaBL,
html body .app-container .main-ceims-flex-container {
    background: #102a43 !important;
    background-color: #102a43 !important;
    background-image: none !important;
}

/* ---------- Classic shell (user option MySidebar = Classic, the default) ----------
   The navy rules above are the MODERN frame. Classic swaps in the CEIMS 7.1.2 (Python)
   frame: its dark-theme page background (--bg #070b11 under two faint blue glows,
   main.py html[data-theme="dark"] + body), painted once on the container with every
   layer above it made transparent. Kept dark in BOTH themes, as Modern is: every page
   is built on the dark tokens (.m-dark). The app bar's own colour is set inline by
   CEIMSPageShell (AppBarBackground) - inline !important beats any rule here.
   One class deeper than the rules above, so these win. */
html body .app-container.ceims-classic {
    background-color: #070b11 !important;
    background-image:
        radial-gradient(circle at 10% 10%, rgb(36 90 179 / 20%), transparent 35%),
        radial-gradient(circle at 90% 0%, rgb(69 120 201 / 8%), transparent 30%),
        linear-gradient(180deg, #070b11, #121619) !important;
}

html body .app-container.ceims-classic .main-wrapper,
html body .app-container.ceims-classic .content-area,
html body .app-container.ceims-classic .content-areaBL,
html body .app-container.ceims-classic .main-ceims-flex-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Classic edges: the rail's hairline instead of Modern's #2c5282 blue. */
html body .app-container.ceims-classic .ceims-main-header {
    border-bottom-color: rgb(255 255 255 / 9%) !important;
}

html body .app-container.ceims-classic .e-sidebar-main,
html body .app-container.ceims-classic .e-sidebarBL-main {
    border-right-color: rgb(255 255 255 / 9%) !important;
}

/* Classic app bar buttons (Alerts, User, Logout) - the Python toolbar's buttons, main.py
   .toolbar-utility-button and button.outline, with its dark-theme tokens (the Classic bar
   is dark in both themes): 42px, 14px radius, lift 1px on hover. CEIMSPageShell adds the
   class only in Classic. html body + !important: Syncfusion's .e-btn rules win otherwise. */
html body .ceims-main-header .e-btn.cx-toolbar-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, #69a1ff 12%, rgb(148 163 184 / 28%) 88%) !important;
    border-radius: 14px !important;
    color: #f8fafc !important;
    background: color-mix(in srgb, rgb(12 18 28 / 92%) 78%, rgb(105 161 255 / 14%) 22%) !important;
    box-shadow: 0 10px 22px rgb(15 23 42 / 8%) !important;
    transition: transform 140ms ease, border-color 140ms ease, filter 140ms ease, background 140ms ease !important;
}

html body .ceims-main-header .e-btn.cx-toolbar-btn.cx-toolbar-btn-outline {
    border-color: rgb(148 163 184 / 28%) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .ceims-main-header .e-btn.cx-toolbar-btn:hover {
    filter: brightness(1.02);
    transform: translateY(-1px);
}

html body .ceims-main-header .e-btn.cx-toolbar-btn:hover,
html body .ceims-main-header .e-btn.cx-toolbar-btn:focus-visible {
    border-color: rgb(105 161 255 / 34%) !important;
}

html body .ceims-main-header .e-btn.cx-toolbar-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, #69a1ff 54%, transparent 46%) !important;
    outline-offset: 2px !important;
}

/* The icon images are dark glyphs drawn for the old light-grey buttons; on the dark
   Classic buttons they would vanish, so render them in the near-white text colour. */
html body .ceims-main-header .e-btn.cx-toolbar-btn img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    opacity: .92;
}

/* Alerts button attention (CEIMSPageShell AlertsNeedAttention): blinks while the user has work
   they have not looked at, until they open My Work. Both looks. The blink is an OVERLAY
   (::after) and not the button's own background: the Classic toolbar buttons set background /
   box-shadow with !important, and an animation can never beat an !important declaration. */
html body .ceims-main-header .e-btn.ceims-attn {
    position: relative !important;
    overflow: visible !important;
}

html body .ceims-main-header .e-btn.ceims-attn::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 2px solid #f5a524;
    border-radius: 16px;
    background: rgb(245 165 36 / 38%);
    box-shadow: 0 0 14px rgb(245 165 36 / 70%);
    pointer-events: none;
    /* one blink = --ceims-attn-blink seconds (WorkAttention:BlinkSeconds, set on the app bar by
       CEIMSPageShell.AppBarStyle); --ceims-attn-anim is "none" when BlinkSeconds is 0 = steady glow */
    animation-name: var(--ceims-attn-anim, ceims-attn-blink);
    animation-duration: var(--ceims-attn-blink, 1.1s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* the small dot stays lit while the overlay blinks - and is the only cue under reduced motion */
html body .ceims-main-header .e-btn .ceims-attn-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 11px;
    height: 11px;
    border: 2px solid #0d121c;
    border-radius: 50%;
    background: #ff5a4e;
    pointer-events: none;
}

/* System-wide broadcast message in the middle of the app bar (CEIMSPageShell, set on /ce-admin).
   The slot replaces AppBarSpacer: it grows to push the right-side controls over and shrinks
   first when the window narrows (min-width:0), so the controls never wrap. The banner is a
   tinted pill over the bar - the bar is dark in both looks, so light text works everywhere.
   Two lines at most; the full text is in the tooltip (title). */
/* Syncfusion's theme gives the bar's first block width:100% (.e-appbar > div:first-child),
   which was invisible next to AppBarSpacer but starves the broadcast slot to nothing.
   The left block (toggle, CEIMS, title) is only as wide as its content. */
html body .ceims-main-header > div:first-child {
    width: auto !important;
    flex: 0 0 auto;
}

html body .ceims-main-header > #settings-tooltip {
    flex: 0 0 auto;
    /* the bar is Prominent, which lines its children up at the TOP: centre the right-side
       controls (Alerts, user, logout) in the bar, as the broadcast slot is */
    align-self: center;
    display: flex;
    align-items: center;
}

html body .ceims-main-header > #settings-tooltip td {
    vertical-align: middle;
}

html body .ceims-main-header .ceims-broadcast-slot {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* the bar is Prominent, which lines its children up at the TOP: centre this one in the bar */
    align-self: center;
    padding: 0 16px;
}

html body .ceims-broadcast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 760px;
    min-width: 0;
    padding: 7px 16px;
    border: 1px solid;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.3;
}

html body .ceims-broadcast-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

html body .ceims-broadcast-text {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

html body .ceims-broadcast-info {
    color: #e3efff;
    background: rgb(74 163 255 / 16%);
    border-color: rgb(74 163 255 / 50%);
}
html body .ceims-broadcast-info .ceims-broadcast-icon { color: #7cc0ff; }

html body .ceims-broadcast-warning {
    color: #fff3dc;
    background: rgb(245 165 36 / 18%);
    border-color: rgb(245 165 36 / 60%);
}
html body .ceims-broadcast-warning .ceims-broadcast-icon { color: #f5b544; }

html body .ceims-broadcast-critical {
    color: #ffe6e3;
    background: rgb(255 90 78 / 20%);
    border-color: rgb(255 90 78 / 70%);
}
html body .ceims-broadcast-critical .ceims-broadcast-icon { color: #ff7d73; }

@keyframes ceims-attn-blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html body .ceims-main-header .e-btn.ceims-attn::after {
        animation: none;
        opacity: .6;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .ceims-main-header .e-btn.cx-toolbar-btn {
        transition: none !important;
    }
    html body .ceims-main-header .e-btn.cx-toolbar-btn:hover {
        transform: none;
    }
}

/* ---------- Login (style guide: Login, Form fields, Buttons) ---------- */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 16px;
    background: var(--canvas);
    color: var(--text);
    line-height: 1.5;
}

.login {
    width: 100%;
    max-width: 400px;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.login .brand {
    padding: 8px 0 24px;
    text-align: center;
}

.login .brand img {
    width: 220px;
    max-width: 100%;
    height: auto;
}

.login .field {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.login .field label {
    font-size: 0.95rem;
    font-weight: 600;
}

.login .field input {
    /* Inputs size to their `size` attribute, not the grid track; the larger code-input font
       made that intrinsic width overflow the card. */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font: inherit;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 6px;
    border: 1px solid var(--field-line);
    background: var(--field);
    color: var(--text);
}

.login .field input::placeholder {
    color: var(--muted);
    opacity: 0.8;
}

.login .field input.invalid {
    outline: none;
    border-color: var(--bad);
    box-shadow: inset 0 0 0 1px var(--bad);
}

.login .validation-message {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bad);
}

.login .validation-errors {
    margin: 0 0 16px;
    padding-left: 1.1em;
}

.login .alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--bad);
    border-radius: 6px;
    background: transparent;
    color: var(--bad);
    font-size: 0.92rem;
    font-weight: 600;
}

.login .btn {
    width: 100%;
    min-height: 48px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 8px;
    background: var(--primary);
    border: 1px solid var(--primary-line);
    color: #fff;
}

.login .btn:hover {
    background: #185fa8;
    color: #fff;
}

.login .btn:focus {
    box-shadow: none;
}

.login :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.login .links {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
}

.login a {
    color: var(--link);
}

/* Step pages after the first (two-factor, recovery code): title + one line of direction. */
.login h1 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

.login .intro {
    margin: 0 0 24px;
    color: var(--muted);
    text-align: center;
}

.login .field input.code-input {
    font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3em;
    text-align: center;
}

.login .field input.code-input::placeholder {
    letter-spacing: 0.3em;
}

.login .links span {
    color: var(--muted);
    margin-bottom: -6px;
}

/* ---------- Login, CLASSIC (appsettings "LoginMode" = Classic, the default) ----------
   The CEIMS 7.1.2 (Python) sign-in card - 22px radius, soft shadow, 12px inputs, Avenir/Segoe
   (main.py _render_auth_login_page_html) - but on the DARK Classic workspace instead of
   Python's white page (user preference, 2026-11-12): the same #070b11 page under two blue
   glows as the Classic app frame, and Python's dark-theme tokens (main.py ~53569) for the
   card, fields and text. The Modern rules above are untouched - .login-classic only
   re-points their tokens and shapes. */
.login-page.login-classic {
    --canvas: #070b11;
    --surface: rgb(18 25 38 / 96%);
    --line: rgb(148 163 184 / 16%);
    --text: #e6edf5;
    --muted: #91a0b3;
    --accent: #69a1ff;
    --link: #8db6ff;
    --field: rgb(30 37 49);
    --field-line: rgb(148 163 184 / 28%);
    --raised: rgb(20 28 40 / 98%);
    --row-tint: rgb(148 163 184 / 7%);
    --ok: #47c58d;
    --warn: #f0a44e;
    --bad: #ff7c7c;

    font-family: "Avenir Next", "Segoe UI Variable", "Helvetica Neue", sans-serif;
    background-color: #070b11;
    background-image:
        radial-gradient(circle at 10% 10%, rgb(36 90 179 / 20%), transparent 35%),
        radial-gradient(circle at 90% 0%, rgb(69 120 201 / 8%), transparent 30%),
        linear-gradient(180deg, #070b11, #121619);
}

.login-classic .login {
    max-width: 420px;
    padding: 28px;
    border-radius: 22px;
    box-shadow: 0 24px 52px rgb(0 0 0 / 34%);
}

.login-classic .login .brand img {
    width: 200px;
}

.login-classic .login .field {
    gap: 6px;
    margin-bottom: 14px;
}

.login-classic .login .field label {
    color: #f8fafc;
    font-size: 0.92rem;
}

.login-classic .login .field input {
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 12px;
    color-scheme: dark;
}

.login-classic .login .field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(105 161 255 / 24%);
}

/* Python's gradient button, in a deeper blue so the white label keeps its contrast */
.login-classic .login .btn {
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #3b6fe6);
    box-shadow: 0 12px 24px rgb(29 78 216 / 24%);
    transition: transform 140ms ease, filter 140ms ease;
}

.login-classic .login .btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #3b6fe6);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.login-classic .login .alert {
    border-radius: 14px;
    border-color: rgb(255 124 124 / 35%);
    background: rgb(255 124 124 / 10%);
}

.login-classic .login h1 {
    color: #f8fafc;
    letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
    .login-classic .login .btn { transition: none; }
    .login-classic .login .btn:hover { transform: none; }
}

/* ---------- Login, LCARS (easter egg: appsettings "LoginEasterEggDay" = MM-dd) ----------
   On that day only, Login and LoginWith2fa render inside LoginFrame's LCARS panel, whatever
   LoginMode says: black screen, orange elbow frame, colour-block column, pill controls and a
   status readout. Font: Windows' Bahnschrift Condensed - the CSP allows no web fonts
   (font-src 'self' data:). Everything is scoped to .login-lcars. */
.login-lcars {
    --lc-orange: #ff9900;
    --lc-peach: #ffcc99;
    --lc-lavender: #cc99cc;
    --lc-blue: #9999ff;
    --lc-rust: #cc6666;
    --lc-bad: #ff8f8f;

    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: #000;
    color: var(--lc-peach);
    font-family: "Bahnschrift Condensed", "Bahnschrift SemiCondensed", Bahnschrift, "Arial Narrow", sans-serif;
    font-stretch: condensed;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.35;
}

.login-lcars .lc-frame {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: 64px 1fr 64px;
    width: min(920px, 100%);
    min-height: 470px;
}

/* the elbows: a rounded orange block with a black inner corner cut out of it */
.login-lcars .lc-elbow { position: relative; background: var(--lc-orange); }
.login-lcars .lc-elbow-top { border-radius: 48px 0 0 0; }
.login-lcars .lc-elbow-bottom { border-radius: 0 0 0 48px; }
.login-lcars .lc-elbow::after {
    content: "";
    position: absolute;
    left: 96px;
    width: 24px;
    height: 42px;
    background: #000;
}
.login-lcars .lc-elbow-top::after { top: 22px; border-radius: 20px 0 0 0; }
.login-lcars .lc-elbow-bottom::after { bottom: 22px; border-radius: 0 0 0 20px; }
.login-lcars .lc-num {
    position: absolute;
    right: 32px;
    color: #000;
    font-size: 13px;
    font-weight: 600;
}
.login-lcars .lc-elbow-top .lc-num { bottom: 4px; }
.login-lcars .lc-elbow-bottom .lc-num { top: 4px; }

.login-lcars .lc-bar { display: flex; gap: 6px; height: 22px; }
.login-lcars .lc-bar-bottom { align-self: end; }
.login-lcars .lc-bar-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding-right: 10px;
    color: var(--lc-orange);
    font-size: 22px;
    line-height: 22px;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.login-lcars .lc-seg { display: block; }
.login-lcars .lc-cap { border-radius: 0 11px 11px 0; }

.login-lcars .lc-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 96px;
    padding: 6px 0;
}
.login-lcars .lc-block {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 8px 4px 0;
    color: #000;
    font-size: 13px;
    font-weight: 600;
}

/* colour + size helpers shared by the bars and the column */
.login-lcars .lc-orange { background: var(--lc-orange); }
.login-lcars .lc-peach { background: var(--lc-peach); }
.login-lcars .lc-lavender { background: var(--lc-lavender); }
.login-lcars .lc-blue { background: var(--lc-blue); }
.login-lcars .lc-rust { background: var(--lc-rust); }
.login-lcars .lc-w30 { flex: 0 0 30px; }
.login-lcars .lc-w40 { flex: 0 0 40px; }
.login-lcars .lc-w50 { flex: 0 0 50px; }
.login-lcars .lc-w60 { flex: 0 0 60px; }
.login-lcars .lc-w70 { flex: 0 0 70px; }
.login-lcars .lc-w80 { flex: 0 0 80px; }
.login-lcars .lc-w90 { flex: 0 0 90px; }
.login-lcars .lc-grow { flex: 1; min-height: 40px; }
.login-lcars .lc-bar .lc-grow { min-height: 0; }   /* in a bar it only stretches sideways */
.login-lcars .lc-h44 { height: 44px; }
.login-lcars .lc-h58 { height: 58px; }
.login-lcars .lc-h90 { height: 90px; }

.login-lcars .lc-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 24px;
    align-items: start;
    padding: 16px 8px 16px 24px;
}

/* .lc-main also carries .login, so the Modern card rules apply first - reset the card */
.login-lcars .login.lc-main {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.login-lcars .lc-heading {
    color: var(--lc-peach);
    font-size: 38px;
    line-height: 1;
}

.login-lcars .lc-sub {
    margin: 4px 0 18px;
    color: var(--lc-blue);
    font-size: 15px;
}

.login-lcars .login .field { gap: 6px; margin-bottom: 14px; }

.login-lcars .login .field label {
    color: var(--lc-orange);
    font-size: 15px;
    font-weight: 400;
}

.login-lcars .login .field input {
    min-height: 42px;
    padding: 0 18px;
    border: 2px solid var(--lc-blue);
    border-radius: 22px;
    color: var(--lc-peach);
    font-family: inherit;
    font-size: 17px;
    letter-spacing: .06em;
    text-transform: none;
    background: #000;
    color-scheme: dark;
}

.login-lcars .login .field input::placeholder { color: #7a7ab0; opacity: 1; }

.login-lcars .login .field input:focus {
    outline: none;
    border-color: var(--lc-orange);
    box-shadow: 0 0 0 2px rgb(255 153 0 / 35%);
}

.login-lcars .login .field input.invalid {
    border-color: var(--lc-bad);
    box-shadow: none;
}

.login-lcars .login .validation-message,
.login-lcars .login .validation-errors { color: var(--lc-bad); }

.login-lcars .login .alert {
    border: 0;
    border-radius: 20px;
    padding: 10px 18px;
    color: #000;
    background: var(--lc-rust);
}

.login-lcars .login .alert-success { background: var(--lc-blue); }

/* ENGAGE: the orange pill, label pushed right as LCARS buttons are */
.login-lcars .login .btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    min-width: 150px;
    min-height: 40px;
    margin-left: auto;
    padding: 0 18px;
    border: 0;
    border-radius: 20px;
    color: #000;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--lc-orange);
}

.login-lcars .login .btn:hover,
.login-lcars .login .btn:focus-visible { color: #000; background: #ffad33; }

.login-lcars .login :focus-visible { outline: 2px solid var(--lc-peach); outline-offset: 3px; }

.login-lcars .login .links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
}

.login-lcars .login .links span {
    flex-basis: 100%;
    margin: 0;
    color: var(--lc-blue);
    text-align: right;
}

.login-lcars .login .links a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    text-decoration: none;
    background: var(--lc-lavender);
}

.login-lcars .login .links a.lc-pill-blue { background: var(--lc-blue); }
.login-lcars .login .links a:hover { filter: brightness(1.12); }

.login-lcars .lc-readout {
    display: grid;
    gap: 6px;
    color: var(--lc-blue);
    font-size: 14px;
    text-align: right;
}
.login-lcars .lc-readout-head { color: var(--lc-orange); }
.login-lcars .lc-readout-value { color: var(--lc-peach); }
.login-lcars .lc-readout-gap { height: 6px; }
.login-lcars .lc-readout-pill {
    height: 30px;
    margin-top: 6px;
    border-radius: 15px;
    background: var(--lc-rust);
}

/* phones: drop the column, readout and bar title; the elbows shrink to a slim frame */
@media (max-width: 640px) {
    .login-lcars .lc-frame { grid-template-columns: 40px minmax(0, 1fr); }
    .login-lcars .lc-elbow-top { border-radius: 28px 0 0 0; }
    .login-lcars .lc-elbow-bottom { border-radius: 0 0 0 28px; }
    .login-lcars .lc-elbow::after { left: 22px; width: 18px; }
    .login-lcars .lc-num,
    .login-lcars .lc-bar-title,
    .login-lcars .lc-readout { display: none; }
    .login-lcars .lc-column { width: 22px; }
    .login-lcars .lc-block { font-size: 0; padding: 0; }
    .login-lcars .lc-body { grid-template-columns: minmax(0, 1fr); padding: 16px 0 16px 16px; }
}