/* ============================================================================
   aims-legacy-auth.css — default appearance for the RESTORED legacy login DOM
   ============================================================================

   WHY THIS FILE EXISTS
   --------------------
   Customers brand the AIMS login by writing CSS against the legacy markup
   (.headerdiv / .brand / .logo PS / .subHeader on the Password Station login,
   #imgHeader.AuthHeaderLogo on every other module's login). Pages/Authenticate.razor
   now emits that markup again — but AIMS.WebHost ships no Bootstrap 3 and no port of
   PasswordStation/SelfService/Styles/avatier_bootstrap.css, so without this sheet the
   restored contract would carry NAMES but no default appearance and an unbranded
   install would render an unstyled page.

   This file supplies exactly the rules the login chrome needs, ported from:
     PasswordStation/SelfService/Styles/avatier_bootstrap.css   (chrome + addons + grid tweaks)
     PasswordStation/SelfService/stylesheets/bootstrap-ms.css   (grid / buttons / alerts subset)
     PasswordStation/SelfService/AIMSBase.css                   (.sectionHeader8, #pagefooter)
     PasswordStation/SelfService/baseStyle.css                  (the ul/h1 defaults .loginm inherits)
     PasswordStation/SelfService/Authenticate.aspx <style>      (.auth-page-margin-*)

   IT DOES NOT PULL IN THE LEGACY SHEETS WHOLESALE. bootstrap-ms.css sets
   html{font-size:10px} and unscoped body/a/input element rules, which would shrink
   every rem-based MudBlazor dimension app-wide by 37.5% and override MudBlazor
   typography on all 941 migrated pages. baseStyle.css/AIMSBase.css are likewise bare
   element selectors. Neither may ever be linked globally.

   CONTAINMENT — read before editing
   ---------------------------------
   SCOPE. Every rule below is prefixed with :where(.aims-legacy-auth), the class on the
   login page's root element. Two properties fall out of that, and both are required:

     a) Nothing here can reach any other page in the app — the selector cannot match
        outside the login container.

     b) :where() contributes ZERO specificity, so each rule keeps exactly the
        specificity it had in the legacy stylesheet. A customer's unscoped
        `.logo { background-image: ... }` is therefore an EQUAL-specificity match and
        wins on source order — precisely as it did in ASPX, where Custom.css was simply
        the last <link>. A plain `.aims-legacy-auth .logo` descendant prefix would have
        raised us to 0,2,0 and silently beaten the customer, defeating the whole change.

   CASCADE POSITION. Because (b) makes us tie with the customer on specificity, SOURCE
   ORDER is what decides — so this file's <link> MUST stay above /branding/css/global in
   App.razor, and it must never be loaded through <HeadContent> (that renders at the
   HeadOutlet, i.e. AFTER the customer sheets, which would invert the cascade).

   WHY NOT `@layer`. A cascade layer would guarantee the customer wins without relying on
   source order, but unlayered CSS beats layered CSS at ANY specificity — and
   MudBlazor.min.css is unlayered and ships bare element rules
   (`button{background-color:rgba(0,0,0,0);border:0;padding:0}`, `a{color:...}`).
   Layering this sheet would let those defeat `.btn`/`.btn-primary` and the login button
   would render as transparent text. Plain source order gives us MudBlazor-beats-nothing
   (0,1,0 class > 0,0,1 element) and customer-beats-us (equal specificity, later link),
   which is exactly the legacy behaviour.
   ========================================================================== */

/* Scroll unlock. aims-app.css locks the document (`html, body { height:100%;
   overflow:hidden }`) so the admin shell's own panes scroll; the legacy login is a
   normal full-flow document that must scroll when the maintenance message + captcha +
   privacy policy all render at once. Gated on the login container so the admin shell
   is untouched; wins on specificity (0,1,1 vs 0,0,1) as well as on source order. */
html:has(.aims-legacy-auth),
body:has(.aims-legacy-auth) {
    height: auto;
    min-height: 100%;
    overflow: auto;
}

    /* ---------------------------------------------------------------
       ROOT
       --------------------------------------------------------------- */
    /* --aims-login-accent is published on this element from the per-product colour
       so a customer stylesheet can consume it. NOTHING in this sheet consumes it:
       legacy paints every module's login button bootstrap blue (.btn-primary
       #337ab7) regardless of product, and reproducing the legacy default is the goal. */
    .aims-legacy-auth {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #333;
    }

    /* avatier_bootstrap.css:44 — legacy sizes login text at 16px, not MudBlazor's rem scale.
       Legacy could write this unscoped (`div, span, input.form-control, select.form-control`)
       because ASPX had no component library to collide with. Here it lands on MudBlazor's own
       wrapper divs AND — the reason for the :not() below — on the <span> inside our
       <button id="btnTextIAgree"><span>…</span></button>, shrinking the button label from the
       legacy 18px (.button-split-2 input[type=submit]) to 16px. asp:Button rendered a void
       input[type=submit] with no child, so legacy never had an inner span to hit.

       The :not() argument is wrapped in :where() ON PURPOSE. :where() contributes zero
       specificity, so these selectors stay at (0,0,1) — exactly their legacy weight — and a
       customer's later `div { font-size: … }` still wins on source order, which is the
       invariant this file's header documents. A bare :not(.mud-input-control *) would have
       raised us to (0,1,1) and silently started beating equal-specificity customer rules.

       NOTE: excluding .mud-* here is defense-in-depth and a button-label fix — it is NOT the
       cause of the oversized login field. Measured on the live page, deleting this rule's
       font-size changed every MudBlazor control height by 0px, because MudBlazor pins its
       metric-bearing elements at higher specificity (.mud-typography-subtitle1 (0,1,0) on
       .mud-input, div.mud-input-slot.mud-input-root{font:inherit} (0,2,1) on the slot). The
       height is handled by the MUDBLAZOR LOGIN FIELD GEOMETRY block further down. */
    :where(.aims-legacy-auth) div:not(:where([class*="mud-"], [class*="mud-"] *, .btn, .btn *)),
    :where(.aims-legacy-auth) span:not(:where([class*="mud-"], [class*="mud-"] *, .btn, .btn *)),
    :where(.aims-legacy-auth) input.form-control,
    :where(.aims-legacy-auth) select.form-control {
        font-size: 16px;
    }

    :where(.aims-legacy-auth) .font15 {
        font-size: 15px;
    }

    /* baseStyle.css ul{} — the customer-rebranded Resources.PRIMARY_ACCOUNT string ships a
       <ul class="loginm"> block that inherited these in legacy. MudBlazor's reset removes
       them, so the rebranded markup would render unstyled without this. .loginm itself is
       defined in NO product stylesheet — it is purely a customer hook, exactly as in legacy. */
    :where(.aims-legacy-auth) ul {
        font-family: Verdana, Geneva, Arial, sans-serif;
        font-size: 11px;
        list-style-type: square;
        list-style-position: outside;
        padding-left: 30px;
        margin-left: 0;
        margin-top: 5px;
        color: #666;
    }

    /* ---------------------------------------------------------------
       GRID — the subset the two login shells actually use.
       bootstrap-ms.css breakpoints: xs <640, ms >=640, sm >=768, md >=992, lg >=1200.
       (The `ms` tier is an Avatier-only extra tier; a stock Bootstrap 3 build does
       not have it, which is why the grid is hand-ported rather than vendored.)
       --------------------------------------------------------------- */
    :where(.aims-legacy-auth) .container-fluid {
        margin-right: auto;
        margin-left: auto;
        /* avatier_bootstrap.css zeroes this at BOTH tiers, so it is unconditional here. */
        padding-left: 0;
        padding-right: 0;
    }

    :where(.aims-legacy-auth) .container-fluid:before,
    :where(.aims-legacy-auth) .container-fluid:after,
    :where(.aims-legacy-auth) .row-fluid:before,
    :where(.aims-legacy-auth) .row-fluid:after,
    :where(.aims-legacy-auth) .form-horizontal .form-group:before,
    :where(.aims-legacy-auth) .form-horizontal .form-group:after {
        content: " ";
        display: table;
    }

    :where(.aims-legacy-auth) .container-fluid:after,
    :where(.aims-legacy-auth) .row-fluid:after,
    :where(.aims-legacy-auth) .form-horizontal .form-group:after {
        clear: both;
    }

    /* NOTE: `.row-fluid` is a Bootstrap 2 name and is defined in NO legacy stylesheet
       (verified: 0 hits in bootstrap-ms.css, avatier_bootstrap.css, AIMSBase.css,
       baseStyle.css, PasswordStation.css). It is a bare block div in legacy and stays
       one here — only the clearfix above is added so floated columns do not escape. */

    :where(.aims-legacy-auth) .col-xs-4,
    :where(.aims-legacy-auth) .col-xs-12,
    :where(.aims-legacy-auth) .col-ms-2,
    :where(.aims-legacy-auth) .col-ms-10,
    :where(.aims-legacy-auth) .col-sm-2,
    :where(.aims-legacy-auth) .col-sm-8,
    :where(.aims-legacy-auth) .col-sm-10,
    :where(.aims-legacy-auth) .col-sm-12,
    :where(.aims-legacy-auth) .col-md-4,
    :where(.aims-legacy-auth) .col-md-5,
    :where(.aims-legacy-auth) .col-md-6,
    :where(.aims-legacy-auth) .col-md-8,
    :where(.aims-legacy-auth) .col-md-10,
    :where(.aims-legacy-auth) .col-lg-4,
    :where(.aims-legacy-auth) .col-lg-5,
    :where(.aims-legacy-auth) .col-lg-8,
    :where(.aims-legacy-auth) .col-lg-12 {
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
    }

    :where(.aims-legacy-auth) .col-xs-4,
    :where(.aims-legacy-auth) .col-xs-12 {
        float: left;
    }

    :where(.aims-legacy-auth) .col-xs-4 {
        width: 33.33333333%;
    }

    :where(.aims-legacy-auth) .col-xs-12 {
        width: 100%;
    }

    /* xs — avatier_bootstrap.css narrows the phone gutters and gives .xs-margin its margins. */
    @media (max-width: 639px) {
        :where(.aims-legacy-auth) .col-xs-4,
        :where(.aims-legacy-auth) .col-xs-12 {
            padding-left: 0;
            padding-right: 0;
        }

        :where(.aims-legacy-auth) .xs-margin {
            margin-left: 8px;
            margin-right: 8px;
        }

        :where(.aims-legacy-auth) #user_prompt_area {
            padding-left: 0;
            padding-right: 0;
        }

        :where(.aims-legacy-auth) .form-horizontal .form-group {
            margin-left: 0;
            margin-right: 0;
        }

        :where(.aims-legacy-auth) .hidden-xs {
            display: none !important;
        }
    }

    /* ms >= 640 */
    @media (min-width: 640px) {
        :where(.aims-legacy-auth) .col-ms-2,
        :where(.aims-legacy-auth) .col-ms-10 {
            float: left;
        }

        :where(.aims-legacy-auth) .col-ms-2 {
            width: 16.66666667%;
        }

        :where(.aims-legacy-auth) .col-ms-10 {
            width: 83.33333333%;
        }

        :where(.aims-legacy-auth) .col-ms-offset-1 {
            margin-left: 8.33333333%;
        }
    }

    @media (min-width: 640px) and (max-width: 767px) {
        :where(.aims-legacy-auth) .hidden-ms {
            display: none !important;
        }
    }

    /* sm >= 768 */
    @media (min-width: 768px) {
        :where(.aims-legacy-auth) .col-sm-2,
        :where(.aims-legacy-auth) .col-sm-8,
        :where(.aims-legacy-auth) .col-sm-10,
        :where(.aims-legacy-auth) .col-sm-12 {
            float: left;
        }

        :where(.aims-legacy-auth) .col-sm-2 {
            width: 16.66666667%;
        }

        :where(.aims-legacy-auth) .col-sm-8 {
            width: 66.66666667%;
        }

        :where(.aims-legacy-auth) .col-sm-10 {
            width: 83.33333333%;
        }

        :where(.aims-legacy-auth) .col-sm-12 {
            width: 100%;
        }

        :where(.aims-legacy-auth) .col-sm-offset-2 {
            margin-left: 16.66666667%;
        }
    }

    /* md >= 992 */
    @media (min-width: 992px) {
        :where(.aims-legacy-auth) .col-md-4,
        :where(.aims-legacy-auth) .col-md-5,
        :where(.aims-legacy-auth) .col-md-6,
        :where(.aims-legacy-auth) .col-md-8,
        :where(.aims-legacy-auth) .col-md-10 {
            float: left;
        }

        :where(.aims-legacy-auth) .col-md-4 {
            width: 33.33333333%;
        }

        :where(.aims-legacy-auth) .col-md-5 {
            width: 41.66666667%;
        }

        :where(.aims-legacy-auth) .col-md-6 {
            width: 50%;
        }

        :where(.aims-legacy-auth) .col-md-8 {
            width: 66.66666667%;
        }

        :where(.aims-legacy-auth) .col-md-10 {
            width: 83.33333333%;
        }

        :where(.aims-legacy-auth) .col-md-offset-1 {
            margin-left: 8.33333333%;
        }

        :where(.aims-legacy-auth) .col-md-offset-3 {
            margin-left: 25%;
        }

        /* push/pull — the System Maintenance two-column swap on the PS login. */
        :where(.aims-legacy-auth) .col-md-push-7 {
            left: 58.33333333%;
        }

        :where(.aims-legacy-auth) .col-md-pull-4 {
            right: 33.33333333%;
        }
    }

    /* lg >= 1200 */
    @media (min-width: 1200px) {
        :where(.aims-legacy-auth) .col-lg-4,
        :where(.aims-legacy-auth) .col-lg-5,
        :where(.aims-legacy-auth) .col-lg-8,
        :where(.aims-legacy-auth) .col-lg-12 {
            float: left;
        }

        :where(.aims-legacy-auth) .col-lg-4 {
            width: 33.33333333%;
        }

        :where(.aims-legacy-auth) .col-lg-5 {
            width: 41.66666667%;
        }

        :where(.aims-legacy-auth) .col-lg-8 {
            width: 66.66666667%;
        }

        :where(.aims-legacy-auth) .col-lg-12 {
            width: 100%;
        }

        :where(.aims-legacy-auth) .col-lg-offset-2 {
            margin-left: 16.66666667%;
        }

        :where(.aims-legacy-auth) .col-lg-offset-4 {
            margin-left: 33.33333333%;
        }

        :where(.aims-legacy-auth) .col-lg-push-7 {
            left: 58.33333333%;
        }

        :where(.aims-legacy-auth) .col-lg-pull-2 {
            right: 16.66666667%;
        }
    }

    :where(.aims-legacy-auth) .text-center {
        text-align: center;
    }

    :where(.aims-legacy-auth) .img-responsive {
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* avatier_bootstrap.css:8,22 */
    :where(.aims-legacy-auth) .col-centered {
        float: none;
        margin: 0 auto;
        display: block;
    }

    :where(.aims-legacy-auth) .bottom-buffer {
        margin-bottom: 10px;
    }

    :where(.aims-legacy-auth) .top-buffer {
        margin-top: 10px;
    }

    /* ---------------------------------------------------------------
       FORM SCAFFOLDING
       Authenticate.aspx's own <style> block (lines 38-46) — these two live nowhere
       else, so without them the login field spacing collapses.
       --------------------------------------------------------------- */
    :where(.aims-legacy-auth) .form-group {
        margin-bottom: 15px;
    }

    :where(.aims-legacy-auth) .auth-page-margin-bottom-extra {
        margin-bottom: 28px;
    }

    :where(.aims-legacy-auth) .auth-page-margin-top-extra {
        margin-top: 28px;
    }

    :where(.aims-legacy-auth) .control-label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: bold;
    }

    /* avatier_bootstrap.css:1223 (AIMSBase.css) — the login section headings
       (PASSWORD STATION SYSTEM STATUS / PRIMARY ACCOUNT / PRIVACY POLICY). */
    :where(.aims-legacy-auth) .sectionHeader8 {
        margin: 0 0 10px;
        font-size: 20px;
        color: #333;
        border-bottom: solid 1px #BBBBBB;
        padding: 2px 0;
    }

    /* avatier_bootstrap.css:127-211 — icon-in-textbox contract. The MudBlazor inputs keep
       their own adornments (see the deviation note in Authenticate.razor), so the .glyphicon
       rules are omitted; the wrapper rules stay because they are part of the DOM contract
       a customer targets. */
    :where(.aims-legacy-auth) .icon-addon {
        position: relative;
        color: #999999;
        display: block;
    }

    :where(.aims-legacy-auth) .icon-addon:after,
    :where(.aims-legacy-auth) .icon-addon:before {
        display: table;
        content: " ";
    }

    :where(.aims-legacy-auth) .icon-addon:after {
        clear: both;
    }

    :where(.aims-legacy-auth) .dropdown-lg .form-control {
        line-height: 1.33;
        height: 46px;
        font-size: 18px;
        padding: 10px 16px 10px 16px;
    }

    :where(.aims-legacy-auth) .icon-addon.addon-lg .form-control {
        line-height: 1.33;
        height: 46px;
        font-size: 18px;
        padding: 10px 16px 10px 40px;
    }

    /* ---------------------------------------------------------------
       MUDBLAZOR LOGIN FIELD GEOMETRY — the legacy 46px control box.

       The two rules above are the legacy sizing for `input.form-control` / the
       `select.form-control` inside .dropdown-lg. They currently match NOTHING, because the
       credential controls are MudBlazor (documented deviation #2 in Authenticate.razor) and
       carry no .form-control class. They are kept as the DOM contract a customer targets; this
       block is what actually sizes the shipped controls, and it deliberately lands on the same
       46px legacy box so the two agree if the markup is ever switched back.

       WHY IT IS NEEDED. A MudBlazor outlined input is 56px tall by default (slot padding
       18.5px + height:1lh 19px + 18.5px, content-box) — already ~10px taller than the ASPX
       control before any branding. Worse, MudTextField/MudSelect put the LEGACY ELEMENT ID on
       their inner <input> slot, so a customer's geometric rule written for the ASPX control —
       CVS ship `#editUserID { margin-bottom: 30px !important }`, which on ASPX put a 30px GAP
       BELOW a 46px pill — instead lands on a paddingless, borderless flex ITEM. Because
       .mud-input is `display:inline-flex; align-items:center` with an auto cross size, the
       item's MARGIN box becomes the container's height, so the control measured 86px and the
       .mud-input-outlined-border (position:absolute; height:100%) painted an 86px pill.

       THE FIX, in three parts:
         1. pin the control box to the legacy 46px;
         2. slot padding 13.5px so 13.5 + 1lh(19) + 13.5 = 46;
         3. align the slot to the START of the (now definite) 46px line box, so any vertical
            margin a customer puts on the inner slot overflows BELOW the pill as a gap — the
            ASPX behaviour — instead of inflating the painted control. The adornment icon keeps
            align-self:center, which now centres against the definite 46px box.

       EVERY selector here is .mud-*-prefixed, which is why none of this can steal the
       customer's cascade: no customer stylesheet has ever seen those class names, and the
       legacy-named selectors (.form-control, .icon-addon, #editUserID) keep their legacy
       specificity and gain no !important.

       KNOWN LIMIT, recorded rather than papered over: a customer rule written as a bare
       element selector (`input { font-size: 18px }`) still cannot reach the field text,
       because MudBlazor's own `div.mud-input-slot.mud-input-root, .mud-input>input.mud-input-root
       { font: inherit }` is (0,2,1) and beating it would mean beating the customer too. Rules
       written against the legacy id or a class (CVS's `#editUserID { font-size: 22px }`) do
       apply, and the `font: inherit` restoration below lets typography set on any ANCESTOR —
       body, #page, .form-group, .icon-addon — flow into the field, which is how a legacy sheet
       usually carries its font.
       --------------------------------------------------------------- */

    /* (0,1,0) — ties .mud-typography-subtitle1 and wins on source order (this file is linked
       after MudBlazor.min.css), so the field text inherits the page's typography instead of
       MudBlazor's rem scale. line-height stays MudBlazor's 1.1876em, which is what `height:1lh`
       on the slot resolves against. */
    :where(.aims-legacy-auth) .mud-input {
        font-size: inherit;
        font-family: inherit;
    }

    :where(.aims-legacy-auth) .mud-input-control .mud-input.mud-input-outlined {
        height: 46px;
    }

    :where(.aims-legacy-auth) .mud-input-control .mud-input.mud-input-outlined > .mud-input-slot {
        align-self: flex-start;
        padding-top: 13.5px;
        padding-bottom: 13.5px;
    }

    :where(.aims-legacy-auth) .mud-input-control .mud-input.mud-input-outlined > .mud-input-adornment {
        align-self: center;
    }

    /* The floating label has to be re-centred for the shorter box. MudBlazor 8.5.0 ships
       `.mud-input-label-outlined { transform: translate(14px, 20px) scale(1) }` — a resting
       offset tuned for its own 56px outlined control — and positions the label absolutely at
       top:0 of the input container. Shrinking the control to 46px above without touching that
       offset left the placeholder sitting ~6px BELOW the text it labels and almost against the
       bottom border. 13.8px = (46 − 18.4)/2, where 18.4px is the label's own
       `line-height: 1.15rem`, so the resting label is vertically centred in the new box.

       (0,3,1) on purpose: comfortably above MudBlazor's own (0,2,0) resting rules (including
       the margin-dense variant, which shares this 46px box) and comfortably BELOW its
       (0,5,1) shrink rules `.mud-shrink ~ label…` / `.mud-input:focus-within ~ label…`, so the
       focused / filled floated position is left exactly as MudBlazor computes it. Like every
       other rule in this block the selector is .mud-*-only, so it cannot steal a customer's
       cascade — no branded stylesheet has ever seen these class names. */
    :where(.aims-legacy-auth) .mud-input-control > .mud-input-control-input-container > label.mud-input-label-outlined {
        transform: translate(14px, 13.8px) scale(1);
    }

    /* ---------------------------------------------------------------
       BUTTONS — bootstrap-ms.css subset. NOTE the default is Bootstrap blue on EVERY
       module: legacy has no per-product login-button colour (grepped: no .btn-primary
       override in PasswordStation.css / AIMSBase.css / avatier_bootstrap.css /
       ld_bootstrap.css). Reproducing that is the point — the previous Blazor build
       painted the button with an inline background-color from the product palette,
       which no customer stylesheet can override without !important.
       --------------------------------------------------------------- */
    :where(.aims-legacy-auth) .btn {
        display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        touch-action: manipulation;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857;
        border-radius: 4px;
        user-select: none;
    }

    :where(.aims-legacy-auth) .btn:hover,
    :where(.aims-legacy-auth) .btn:focus {
        text-decoration: none;
    }

    :where(.aims-legacy-auth) .btn[disabled] {
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.65;
    }

    :where(.aims-legacy-auth) .btn-lg {
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.33333;
        border-radius: 6px;
    }

    :where(.aims-legacy-auth) .btn-default {
        color: #333;
        background-color: #fff;
        border-color: #ccc;
    }

    :where(.aims-legacy-auth) .btn-default:hover,
    :where(.aims-legacy-auth) .btn-default:focus {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

    :where(.aims-legacy-auth) .btn-primary {
        color: #fff;
        background-color: #337ab7;
        border-color: #2e6da4;
    }

    :where(.aims-legacy-auth) .btn-primary:hover,
    :where(.aims-legacy-auth) .btn-primary:focus {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }

    /* Authenticate.aspx <style> — .btn-secondary is not a Bootstrap 3 class,
       it exists only in that page-level block. */
    :where(.aims-legacy-auth) .btn-secondary,
    :where(.aims-legacy-auth) .btn-secondary:hover,
    :where(.aims-legacy-auth) .btn-secondary:focus {
        color: white;
        background-color: #4d565d;
    }

    /* avatier_bootstrap.css:52,226-292 — the split-button rows.
       avatier_bootstrap.css sizes these rows exclusively through
       `input[type="submit"]` / `input[type="button"]`, because asp:Button renders an <input>.
       The Blazor port uses <button> (it needs child content for the spinner/label swap), so
       BOTH spellings are listed on every rule below: the .btn spelling is what our markup
       actually matches, and the input[type=...] spelling is the pattern a customer copies out
       of avatier_bootstrap.css into their own sheet. Keeping the two in lockstep means a
       branded install gets the same defaults whichever shape their rules were written for. */
    :where(.aims-legacy-auth) .button-split-1 .btn,
    :where(.aims-legacy-auth) .button-split-2 .btn,
    :where(.aims-legacy-auth) .button-split-3 .btn,
    :where(.aims-legacy-auth) .button-split-1 input[type="submit"],
    :where(.aims-legacy-auth) .button-split-1 input[type="button"],
    :where(.aims-legacy-auth) .button-split-2 input[type="submit"],
    :where(.aims-legacy-auth) .button-split-2 input[type="button"],
    :where(.aims-legacy-auth) .button-split-3 input[type="submit"],
    :where(.aims-legacy-auth) .button-split-3 input[type="button"] {
        height: 40px;
        font-size: 18px;
        line-height: 27px;
        /* Legacy's own bootstrap .btn vertical padding. The product `.ps-layout-container .btn`
           rule (aims-app.css) pads 10px, which inside this FIXED 40px border-box squeezes the
           content box to 18px - smaller than the 27px line box, whose overflow anchors top and
           pushes the label visibly below centre on <input> buttons (flex centring only works on
           <button>). 6px restores legacy's 26px content box, where the line box fits and the UA
           centres the label exactly as the ASPX pages did. A customer's own button rules still
           outrank this (id selectors vs :where()-zeroed classes). */
        padding-top: 6px;
        padding-bottom: 6px;
    }

    @media (min-width: 640px) {
        :where(.aims-legacy-auth) .button-split-1,
        :where(.aims-legacy-auth) .button-split-2,
        :where(.aims-legacy-auth) .button-split-3 {
            padding-bottom: 20px;
            padding-top: 20px;
        }

        :where(.aims-legacy-auth) .button-split-1 .btn,
        :where(.aims-legacy-auth) .button-split-1 input[type="submit"],
        :where(.aims-legacy-auth) .button-split-1 input[type="button"] {
            width: 100%;
        }

        :where(.aims-legacy-auth) .button-split-2 .btn,
        :where(.aims-legacy-auth) .button-split-2 input[type="submit"],
        :where(.aims-legacy-auth) .button-split-2 input[type="button"] {
            width: calc(50% - 7px);
        }

        :where(.aims-legacy-auth) .button-split-2 .btn:first-child,
        :where(.aims-legacy-auth) .button-split-2 input[type="submit"]:first-child,
        :where(.aims-legacy-auth) .button-split-2 input[type="button"]:first-child {
            margin-right: 9px;
        }
    }

    @media (max-width: 639px) {
        :where(.aims-legacy-auth) .button-split-1,
        :where(.aims-legacy-auth) .button-split-2,
        :where(.aims-legacy-auth) .button-split-3 {
            padding-bottom: 20px;
            padding-top: 20px;
        }

        :where(.aims-legacy-auth) .button-split-1 .btn,
        :where(.aims-legacy-auth) .button-split-2 .btn,
        :where(.aims-legacy-auth) .button-split-3 .btn,
        :where(.aims-legacy-auth) .button-split-1 input[type="submit"],
        :where(.aims-legacy-auth) .button-split-1 input[type="button"],
        :where(.aims-legacy-auth) .button-split-2 input[type="submit"],
        :where(.aims-legacy-auth) .button-split-2 input[type="button"],
        :where(.aims-legacy-auth) .button-split-3 input[type="submit"],
        :where(.aims-legacy-auth) .button-split-3 input[type="button"] {
            margin-bottom: 12px;
            width: 100%;
        }
    }

    /* ---------------------------------------------------------------
       ALERTS — bootstrap-ms.css subset; the login error surface.
       --------------------------------------------------------------- */
    :where(.aims-legacy-auth) .alert {
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    :where(.aims-legacy-auth) .alert-danger {
        background-color: #f2dede;
        border-color: #ebccd1;
        color: #a94442;
    }

    :where(.aims-legacy-auth) .alert-warning {
        background-color: #fcf8e3;
        border-color: #faebcc;
        color: #8a6d3b;
    }

    /* EnrollMFA.aspx's two states: the enrolment prompt is div.alert.alert-info and the
       completion notice is .alert-success. Without these the box has padding and a
       transparent border — the text reads as unstyled body copy. */
    :where(.aims-legacy-auth) .alert-info {
        background-color: #d9edf7;
        border-color: #bce8f1;
        color: #31708f;
    }

    :where(.aims-legacy-auth) .alert-success {
        background-color: #dff0d8;
        border-color: #d6e9c6;
        color: #3c763d;
    }

    /* ---------------------------------------------------------------
       CONTRACT B — the shared module login (Authenticate.aspx).
       The brand hook is ONE element: a transparent spacer <img> whose visible artwork
       comes entirely from `content: url(...)`. That is what a customer overrides;
       putting the artwork in the img src instead is exactly what breaks rebranding.
       --------------------------------------------------------------- */
    :where(.aims-legacy-auth) .AuthHeaderLogo {
        content: url(../img/ida-color-s.png);
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        margin-bottom: 25px;
    }

    :where(.aims-legacy-auth) .copyright_auth {
        color: #777777;
        font-size: 13px;
    }

    /* ---------------------------------------------------------------
       CONTRACT A — the Password Station login banner (ASCX/HeaderPSWelcome.ascx).
       Every one of these selectors is reproduced at its LEGACY specificity so a
       customer's CustomPS.css written against the ASPX build binds unchanged.
       The logo element is an empty <div> painted by background-image — never an
       <img> — precisely so `.logo { background-image: ... }` can reskin it.
       --------------------------------------------------------------- */
    :where(.aims-legacy-auth) #content {
        margin-top: 10px;
        padding-left: 0;
        padding-right: 0;
        margin-right: 0;
        margin-left: 0;
    }

    :where(.aims-legacy-auth) .navbar {
        position: relative;
        margin-bottom: 0;
        overflow: hidden;
        border: 0;
    }

    :where(.aims-legacy-auth) .navbar-fixed-top {
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        z-index: 1030;
    }

    :where(.aims-legacy-auth) .navbar .navbar-header .brand .logo {
        display: block;
        float: left;
        height: 60px;
        background-repeat: no-repeat;
    }

    :where(.aims-legacy-auth) .navbar .navbar-header .brand .logo.PS,
    :where(.aims-legacy-auth) .navbar .navbar-header .brand .logo.HD {
        width: 336px;
        background-image: url('../img/header-PM.png');
    }

    :where(.aims-legacy-auth) .navbar .navbar-header .brand .logo.AT {
        width: 360px;
        background-image: url('../img/Header-AT.png');
    }

    :where(.aims-legacy-auth) .navbar .navbar-header .brand .logo.Approver {
        width: 297px;
        background-image: url('../img/Header-Approver.png');
    }

    :where(.aims-legacy-auth) .headerdiv.PS .navbar,
    :where(.aims-legacy-auth) .headerdiv.HD .navbar {
        background-color: RGB(4,168,79);
    }

    :where(.aims-legacy-auth) .headerdiv.AT .navbar {
        background-color: RGB(159,161,164);
    }

    :where(.aims-legacy-auth) .headerdiv.Approver .navbar {
        background-color: RGB(247,151,30);
        z-index: 5005;
    }

    :where(.aims-legacy-auth) .headerdiv.AIMS .navbar {
        background-color: #0082C8;
    }

    :where(.aims-legacy-auth) .headerdiv.AIMS .logo {
        background-image: url('../img/header-avatier.png');
        width: 237px;
        height: 60px;
    }

    :where(.aims-legacy-auth) .headerdiv .twistedLogo {
        display: none;
    }

    :where(.aims-legacy-auth) .headerdiv .subHeader {
        display: inline-block;
        text-align: right;
        margin-top: 5px;
        padding: 0;
        position: absolute;
        right: 55px;
    }

    :where(.aims-legacy-auth) .headerdiv.HD .subHeader,
    :where(.aims-legacy-auth) .headerdiv.AT .subHeader {
        right: 115px;
    }

    :where(.aims-legacy-auth) .headerdiv.HD.WELCOME .subHeader,
    :where(.aims-legacy-auth) .headerdiv.AT.WELCOME .subHeader {
        right: 65px;
    }

    :where(.aims-legacy-auth) .headerdiv .subHeader span {
        background-color: transparent;
    }

    :where(.aims-legacy-auth) .headerdiv .subHeader,
    :where(.aims-legacy-auth) .headerdiv .signOutArea {
        color: White;
    }

    /* phone */
    @media screen and (max-width: 767px) {
        :where(.aims-legacy-auth) .headerdiv,
        :where(.aims-legacy-auth) .navbar,
        :where(.aims-legacy-auth) .navbar-header {
            height: 50px;
        }

        :where(.aims-legacy-auth) .navbar .navbar-header .brand .logo {
            background-size: 50% 50%;
            margin-top: 10px;
            margin-left: 9px;
        }

        :where(.aims-legacy-auth) .headerdiv .versionNumber {
            display: none;
        }
    }

    /* tablet */
    @media screen and (max-width: 1024px) and (min-width: 768px) {
        :where(.aims-legacy-auth) .headerdiv,
        :where(.aims-legacy-auth) .navbar,
        :where(.aims-legacy-auth) .navbar-header {
            height: 60px;
        }

        :where(.aims-legacy-auth) .navbar .navbar-header .brand .logo {
            background-size: 66.66666% 66.66666%;
            margin-top: 10px;
            margin-left: 9px;
            margin-right: -75px;
        }

        :where(.aims-legacy-auth) .headerdiv .versionNumber {
            display: none;
        }
    }

    /* desktop */
    @media screen and (min-width: 1025px) {
        :where(.aims-legacy-auth) .headerdiv,
        :where(.aims-legacy-auth) .navbar,
        :where(.aims-legacy-auth) .navbar-header {
            height: 90px;
        }

        :where(.aims-legacy-auth) .navbar .navbar-header .brand .logo {
            height: 60px;
            background-size: 100% 100%;
            margin-top: 15px;
            margin-left: 14px;
        }

        :where(.aims-legacy-auth) .headerdiv .subHeader {
            position: absolute;
            right: 250px;
        }

        :where(.aims-legacy-auth) .headerdiv.HD .subHeader,
        :where(.aims-legacy-auth) .headerdiv.AT .subHeader {
            position: absolute;
            right: 320px;
        }

        :where(.aims-legacy-auth) .headerdiv.HD.WELCOME .subHeader,
        :where(.aims-legacy-auth) .headerdiv.AT.WELCOME .subHeader {
            position: absolute;
            right: 250px;
        }

        :where(.aims-legacy-auth) .headerdiv .versionNumber {
            display: none;
        }

        :where(.aims-legacy-auth) .headerdiv .subHeader.PS.welcome .versionNumber,
        :where(.aims-legacy-auth) .headerdiv .subHeader.HD.welcome .versionNumber,
        :where(.aims-legacy-auth) .headerdiv .subHeader.AT.welcome .versionNumber {
            display: inline-block;
        }

        :where(.aims-legacy-auth) .headerdiv .subHeader.PS.welcome .versionNumber {
            display: inline-block;
            position: absolute;
            top: 55px;
            right: -64px;
            white-space: nowrap;
        }

        :where(.aims-legacy-auth) .headerdiv .twistedLogo {
            position: absolute;
            top: 0;
            right: 0;
            background-repeat: no-repeat;
            display: block;
            z-index: -999999999;
        }

        :where(.aims-legacy-auth) .headerdiv .twistedLogo.PS,
        :where(.aims-legacy-auth) .headerdiv .twistedLogo.HD {
            background-image: url('../img/Twisted-PS.png');
            width: 159px;
            height: 90px;
        }

        :where(.aims-legacy-auth) .headerdiv .twistedLogo.AT {
            background-image: url('../img/twisted-AT.png');
            width: 159px;
            height: 90px;
        }

        :where(.aims-legacy-auth) .headerdiv.AIMS .twistedLogo {
            background-image: url('../img/twisted-avatier.png');
            width: 159px;
            height: 90px;
        }

        :where(.aims-legacy-auth) .headerdiv .twistedLogo.Approver {
            background-image: url('../img/Twisted-IE.png');
            width: 159px;
            height: 90px;
        }
    }

    /* ---------------------------------------------------------------
       CONTRACT A footer — PS/Footer.htm + AIMSBase.css:3341. The grey bar the
       card design had lost entirely.
       --------------------------------------------------------------- */
    :where(.aims-legacy-auth) #pagefooter {
        min-height: 50px;
        background-color: #b9b9b9;
        color: #e9e9e9;
        width: 100%;
        overflow: hidden;
        font-size: 10px;
        margin-top: 35px;
    }

    :where(.aims-legacy-auth) #pagefooter img {
        margin-left: 4px;
        margin-bottom: 2px;
    }

    /* ---------------------------------------------------------------
       CAPTCHA chrome — these classes are defined ONLY in the page-level <style>
       blocks of Authenticate.aspx (38-189) and PS/Default.aspx (117-307), so they
       have no other home in the Blazor host. They belong in the DEFAULT sheet
       (before the customer sheets) so customers can still restyle them.
       --------------------------------------------------------------- */
    :where(.aims-legacy-auth) .captchaBanner {
        background-color: #0084C5;
        color: white;
        padding: 8px 12px;
        font-weight: bold;
        font-size: 14px;
    }

    :where(.aims-legacy-auth) .mathCaptchaWrapper,
    :where(.aims-legacy-auth) .cubeCaptchaWrapper {
        border: 1px solid #D3D3D3;
        float: left;
        width: 100%;
        padding: 5px;
        overflow: hidden;
        background-color: #F9F9F9;
    }

    :where(.aims-legacy-auth) .cubeCaptchaWrapper {
        margin-bottom: 30px;
    }

    :where(.aims-legacy-auth) .sortableNumCaptcha_wrap {
        list-style: none;
        margin: 0;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        border: 1px solid #D3D3D3;
        background-color: #F9F9F9;
    }

    :where(.aims-legacy-auth) .sortableNumCaptcha_wrap .captchaItem {
        cursor: move;
        user-select: none;
        background-color: #dbdee2;
        border: 1px solid #999;
        padding: 8px 14px;
        font-size: 18px;
        font-weight: bold;
        color: #333;
        border-radius: 4px;
        min-width: 40px;
        text-align: center;
    }

    :where(.aims-legacy-auth) .mathCaptchaError,
    :where(.aims-legacy-auth) .cubeCaptchaError,
    :where(.aims-legacy-auth) .sortableNumCaptchaError {
        color: red;
        font-weight: bold;
    }

    :where(.aims-legacy-auth) #DivCaptchaV4,
    :where(.aims-legacy-auth) #cubeCaptchaContainer {
        width: 280px;
        margin: 0 auto;
    }

    :where(.aims-legacy-auth) #DivCaptchaV5 {
        width: 350px;
        margin: 0 auto;
    }