/* Login_modern_v3.jsp — product-owner "liquid glass" design (RM-5104).
   Static end-state only: the ported mockup's choreographed intro animation
   (mark dissolve -> card spring-in -> brand-mark glide-in) is deliberately
   NOT included here — see RM-5104 plan. The ambient aurora background is
   kept (transform-only, GPU-composited, cheap) since it's part of the
   settled look, not the one-time intro.

   Tokens ported from the supplied mockup's styles.css :root block — this is
   a distinct visual language from the rest of the modern UI (navy/royal
   blue vs the app's standard teal-blue), so tokens are scoped to this file
   rather than reusing the shared --amcs-utb-* names. */

:root {
    --amcs-utb-loginv3-surface-field:       #FBFBFD;
    --amcs-utb-loginv3-surface-field-focus: #FFFFFF;

    --amcs-utb-loginv3-ink-primary: #0F1B2E;
    --amcs-utb-loginv3-ink-muted:   #5C667B;
    --amcs-utb-loginv3-ink-faint:   #98A1B5;

    --amcs-utb-loginv3-line-hairline: rgba(15, 27, 46, 0.10);
    --amcs-utb-loginv3-line-field:    rgba(15, 27, 46, 0.13);

    --amcs-utb-loginv3-accent:        #3458D2;
    --amcs-utb-loginv3-title-blue:    #1F2C4D;

    --amcs-utb-loginv3-fx-blue:         #3A63D8;
    --amcs-utb-loginv3-fx-ring:         rgba(58, 99, 216, 0.20);
    --amcs-utb-loginv3-fx-ring-strong:  rgba(58, 99, 216, 0.34);

    --amcs-utb-loginv3-button-top:         #1F2C4D;
    --amcs-utb-loginv3-button-bottom:      #060C1E;
    --amcs-utb-loginv3-button-hover-top:   #2A395E;
    --amcs-utb-loginv3-button-hover-bottom:#0D1530;

    --amcs-utb-loginv3-radius-card:   24px;
    --amcs-utb-loginv3-radius-field:  12px;
    --amcs-utb-loginv3-radius-button: 12px;

    --amcs-utb-loginv3-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --amcs-utb-loginv3-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --amcs-utb-loginv3-space-2: 8px;
    --amcs-utb-loginv3-space-3: 12px;
    --amcs-utb-loginv3-space-4: 16px;
    --amcs-utb-loginv3-space-5: 20px;
    --amcs-utb-loginv3-space-7: 32px;

    --amcs-utb-loginv3-danger: #b3261e;

    --amcs-utb-loginv3-card-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        inset 0 4px 8px rgba(255, 255, 255, 0.40),
        inset 0 -1.5px 0 rgba(15, 27, 46, 0.10),
        inset 0 -4px 12px rgba(15, 27, 46, 0.06),
        inset 1.5px 0 0 rgba(255, 255, 255, 0.30),
        inset -1.5px 0 0 rgba(15, 27, 46, 0.05),
        0 1px 3px rgba(15, 27, 46, 0.05),
        0 10px 24px -6px rgba(15, 27, 46, 0.09),
        0 28px 56px -12px rgba(20, 36, 60, 0.18),
        0 56px 96px -32px rgba(20, 36, 60, 0.28);

    --amcs-utb-loginv3-ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --amcs-utb-loginv3-dur-micro: 180ms;

    /* Intro animation easings (Liquid Fuse panel transition + Maglev Glide
       brand entrance — the mockup's documented production defaults). */
    --amcs-utb-loginv3-ease-liquid:      cubic-bezier(0.16, 1, 0.30, 1);
    --amcs-utb-loginv3-ease-spring-soft: cubic-bezier(0.34, 1.16, 0.64, 1);
}

/* Self-hosted (not Google Fonts CDN) so this page doesn't need an external
   font-host domain added to the CSP allowlist. Variable fonts — one file
   covers the 400-700 weight range used on this page. */
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../../fonts/Geist-Variable.woff2") format("woff2");
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../../fonts/GeistMono-Variable.woff2") format("woff2");
}

html, body { height: 100%; margin: 0; padding: 0; }
body.amcs-utb-loginv3 *,
body.amcs-utb-loginv3 *::before,
body.amcs-utb-loginv3 *::after { box-sizing: border-box; }

body.amcs-utb-loginv3 {
    font-family: var(--amcs-utb-loginv3-font-sans);
    color: var(--amcs-utb-loginv3-ink-primary);
    min-height: 100vh;
    position: relative;
    background: radial-gradient(130% 130% at 60% 40%, #F1F1F5 0%, #E9EAEF 46%, #DEE0E7 78%, #D6D9E1 100%);
    -webkit-font-smoothing: antialiased;
}

.amcs-utb-loginv3-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Ambient aurora background — transform-only, GPU-composited ---- */
.amcs-utb-loginv3-bg-aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
.amcs-utb-loginv3-bg-aurora i {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.amcs-utb-loginv3-bg-aurora .au1 {
    width: 90vmax; height: 90vmax; max-width: 1600px; max-height: 1600px;
    left: -25vmax; top: -35vmax;
    background: radial-gradient(closest-side, rgba(92,123,227,0.20), rgba(92,123,227,0.07) 45%, transparent 72%);
    animation: amcsUtbLoginv3AuroraA 59s ease-in-out infinite alternate;
}
.amcs-utb-loginv3-bg-aurora .au2 {
    width: 70vmax; height: 70vmax; max-width: 1300px; max-height: 1300px;
    right: -20vmax; top: -15vmax;
    background: radial-gradient(closest-side, rgba(142,197,252,0.15), rgba(142,197,252,0.05) 45%, transparent 72%);
    animation: amcsUtbLoginv3AuroraB 71s ease-in-out infinite alternate;
}
.amcs-utb-loginv3-bg-aurora .au3 {
    width: 80vmax; height: 80vmax; max-width: 1450px; max-height: 1450px;
    left: 15vmax; bottom: -45vmax;
    background: radial-gradient(closest-side, rgba(167,139,250,0.10), transparent 70%);
    animation: amcsUtbLoginv3AuroraC 87s ease-in-out infinite alternate;
}
.amcs-utb-loginv3-bg-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 38%, rgba(241,241,245,0.55), rgba(214,217,225,0.35));
}
@keyframes amcsUtbLoginv3AuroraA { to { transform: translate(9vw, 7vh)  rotate(35deg)  scale(1.08); } }
@keyframes amcsUtbLoginv3AuroraB { to { transform: translate(-11vw,9vh) rotate(-28deg) scale(1.12); } }
@keyframes amcsUtbLoginv3AuroraC { to { transform: translate(7vw,-8vh)  rotate(22deg)  scale(0.94); } }
@media (prefers-reduced-motion: reduce) {
    .amcs-utb-loginv3-bg-aurora i { animation: none; }
}

/* ---- Intro stage — Phase-1 single-mark overlay ----
   Sits above everything (z-index 1000+ card's z-index 2) so the centred
   mark visually covers the card until the Liquid Fuse transition (JS)
   dissolves/shrinks it away, revealing the card springing in beneath —
   the "coupling" the mockup's design notes describe. Background stays
   transparent so the page's own gradient (behind the aurora) shows through
   unbroken; torn down (display:none) once the transition finishes. */
.amcs-utb-loginv3-stage {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: transparent;
    contain: layout style;
    isolation: isolate;
}
.amcs-utb-loginv3-stage[data-phase="done"] { display: none; }

.amcs-utb-loginv3-stage-mark {
    position: absolute;
    inset: 0;
    background-image: url("../../img/amcs-centered.jpg");
    background-size: min(84vmin, 840px) min(84vmin, 840px);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 27vmin, transparent 35vmin);
            mask-image: radial-gradient(circle at 50% 50%, #000 0 27vmin, transparent 35vmin);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: 1;
    will-change: transform, opacity, filter;
    transform: translateZ(0);
    user-select: none;
    pointer-events: none;
}

/* Impact ripple rings — fired once by JS when the mark lands/begins to
   dissolve (data-phase="impact"). */
.amcs-utb-loginv3-stage-rings {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    pointer-events: none;
}
.amcs-utb-loginv3-ring {
    position: absolute;
    left: 0; top: 0;
    width: min(34vmin, 340px);
    height: min(34vmin, 340px);
    margin-left: calc(min(34vmin, 340px) / -2);
    margin-top:  calc(min(34vmin, 340px) / -2);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    transform: translateZ(0) rotateX(72deg) scale(0.04);
    opacity: 0;
    will-change: transform, opacity;
}
.amcs-utb-loginv3-stage[data-phase="impact"] .amcs-utb-loginv3-ring { animation: amcsUtbLoginv3RippleRing 1500ms var(--amcs-utb-loginv3-ease-liquid) forwards; }
.amcs-utb-loginv3-stage[data-phase="impact"] .amcs-utb-loginv3-ring:nth-child(2) { animation-delay: 150ms; }
@keyframes amcsUtbLoginv3RippleRing {
    0%   { transform: translateZ(0) rotateX(72deg) scale(0.04); opacity: 0.55; }
    70%  { opacity: 0.16; }
    100% { transform: translateZ(0) rotateX(72deg) scale(1);    opacity: 0; }
}

/* ---- Brand reveal (Phase 3) — the large corner mark that wells up
   bottom-right once the panel has settled, overlapping the card's corner.
   Anchored by the mark's top-left corner so resizing grows it down-right
   from a fixed point behind the card at every viewport width. */
.amcs-utb-loginv3-brand-reveal {
    position: fixed;
    z-index: 1;
    --brand-frame: clamp(740px, 134vmin, 1208px);
    --brand-zoom:  103%;
    --brand-r:     calc(0.239 * var(--brand-frame));
    --brand-ax:    clamp(-15px, -1.7vmin, -12px);
    --brand-ay:    clamp(-153px, -17vmin, -122px);
    width:  var(--brand-frame);
    height: var(--brand-frame);
    left: calc(50% + var(--brand-ax) - var(--brand-frame) / 2 + var(--brand-r));
    top:  calc(50% + var(--brand-ay) - var(--brand-frame) / 2 + var(--brand-r));
    -webkit-mask-image: radial-gradient(closest-side, #000 0 70%, rgba(0,0,0,0.5) 87%, transparent 99%);
            mask-image: radial-gradient(closest-side, #000 0 70%, rgba(0,0,0,0.5) 87%, transparent 99%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: 0;
    will-change: opacity, transform, filter;
    pointer-events: none;
}
.amcs-utb-loginv3-brand-surface {
    position: absolute;
    inset: 0;
    background: url("../../img/amcs-centered.jpg") center / var(--brand-zoom) no-repeat;
}
/* Maglev Glide motion-trail echoes: ghost copies running the same spring
   lagged +45/+90ms, collapsing to zero as the surface settles. */
.amcs-utb-loginv3-brand-echo {
    position: absolute; inset: 0;
    background: url("../../img/amcs-centered.jpg") center / var(--brand-zoom) no-repeat;
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
}

@media (max-width: 600px) {
    .amcs-utb-loginv3-brand-reveal {
        --brand-frame: clamp(300px, 96vmin, 520px);
        --brand-ax:    clamp(-6px, -1.5vmin, -2px);
        --brand-ay:    clamp(-110px, -24vmin, -78px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .amcs-utb-loginv3-stage { display: none !important; }
    .amcs-utb-loginv3-card { opacity: 1 !important; transform: none !important; transition: none !important; }
    .amcs-utb-loginv3-card-mark, .amcs-utb-loginv3-card-header,
    .amcs-utb-loginv3-credentials-block, .amcs-utb-loginv3-card-terms { animation: none !important; }
    .amcs-utb-loginv3-brand-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
    .amcs-utb-loginv3-brand-echo { display: none !important; }
    .amcs-utb-loginv3-footer { opacity: 1 !important; transition: none !important; }
    body.amcs-utb-loginv3 *, body.amcs-utb-loginv3 *::before, body.amcs-utb-loginv3 *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---- Page / card layout ---- */
.amcs-utb-loginv3-page {
    position: relative;
    z-index: 2;
    min-height: 100dvh;
    display: grid;
    justify-items: center;
    align-items: safe center;
    padding: clamp(20px, 4vh, 32px) clamp(16px, 5vw, 20px) clamp(64px, 12vh, 80px);
}

.amcs-utb-loginv3-card {
    position: relative;
    width: 100%;
    max-width: 408px;
    min-width: 0;
    border-radius: var(--amcs-utb-loginv3-radius-card);
    border: 1px solid var(--amcs-utb-loginv3-line-hairline);
    box-shadow: var(--amcs-utb-loginv3-card-shadow);

    /* Card enters hidden; intro-orchestrator.js reveals it via .is-revealed.
       For the Liquid Fuse transition the actual opacity/transform motion is
       driven by WAAPI (so it can be frame-synced with the mark dissolving
       away above it) — this CSS transition is the fallback path only. */
    opacity: 0;
    transform: translateY(22px) scale(0.965);
    will-change: transform, opacity;
}
.amcs-utb-loginv3-card.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 900ms var(--amcs-utb-loginv3-ease-liquid),
        transform 1100ms var(--amcs-utb-loginv3-ease-spring-soft);
}

.amcs-utb-loginv3-card.is-revealed .amcs-utb-loginv3-card-mark {
    animation: amcsUtbLoginv3CardMarkSettle 900ms var(--amcs-utb-loginv3-ease-liquid) both;
}
@keyframes amcsUtbLoginv3CardMarkSettle {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
.amcs-utb-loginv3-card.is-revealed .amcs-utb-loginv3-card-header        { animation: amcsUtbLoginv3ContentRise 560ms var(--amcs-utb-loginv3-ease-liquid) 90ms both; }
.amcs-utb-loginv3-card.is-revealed .amcs-utb-loginv3-credentials-block  { animation: amcsUtbLoginv3ContentRise 560ms var(--amcs-utb-loginv3-ease-liquid) 200ms both; }
.amcs-utb-loginv3-card.is-revealed .amcs-utb-loginv3-card-terms         { animation: amcsUtbLoginv3ContentRise 560ms var(--amcs-utb-loginv3-ease-liquid) 310ms both; }
@keyframes amcsUtbLoginv3ContentRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.amcs-utb-loginv3-card-glass {
    position: relative;
    padding: clamp(28px, 7vw, 40px) clamp(22px, 6vw, 32px) clamp(20px, 4.5vw, 24px);
    border-radius: var(--amcs-utb-loginv3-radius-card);
    overflow: hidden;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(248, 248, 252, 0.42) 40%,
        rgba(232, 234, 240, 0.48) 100%
    );
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
}

/* Small panel icon — the official AMCS favicon vector, white fill with an
   inner-shadow SVG filter (feComponentTransfer + blur + offset, composited
   to stay inside the path) so a debossed/engraved look follows the icon's
   actual silhouette — including the diamond aperture in the middle —
   rather than a plain rectangular box-shadow. */
.amcs-utb-loginv3-card-mark {
    width: clamp(96px, 28vw, 120px);
    height: clamp(96px, 28vw, 120px);
    margin: 0 auto var(--amcs-utb-loginv3-space-4) auto;
    /* Previous look: the mockup's "specular rim" gradient keyline
       (mark2="white" + mark2border="specular"), opacity stops already
       softened ~40% from the mockup's original 0.9/0.55/0.15. Dropped once
       the inner shadow below was added — the keyline became redundant for
       defining the icon's edge. Swap this back in for the old look:
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 103.93 103.98'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='104' y2='104'%3E%3Cstop offset='0' stop-color='%235B7FD4' stop-opacity='0.55'/%3E%3Cstop offset='0.4' stop-color='%232E52BE' stop-opacity='0.35'/%3E%3Cstop offset='1' stop-color='%231F2C4D' stop-opacity='0.08'/%3E%3C/linearGradient%3E%3Cfilter id='innerShadow' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeComponentTransfer in='SourceAlpha'%3E%3CfeFuncA type='table' tableValues='1 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3CfeOffset dx='0' dy='1.6' result='offsetblur'/%3E%3CfeFlood flood-color='rgb(15,27,46)' flood-opacity='0.45'/%3E%3CfeComposite in2='offsetblur' operator='in'/%3E%3CfeComposite in2='SourceAlpha' operator='in'/%3E%3CfeMerge%3E%3CfeMergeNode in='SourceGraphic'/%3E%3CfeMergeNode/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='%23FFFFFF' stroke='url(%23g)' stroke-width='1' stroke-linejoin='round' filter='url(%23innerShadow)' d='M71.54,2h-39.15c0,16.76-13.63,30.39-30.39,30.39v39.15c16.76,0,30.39,13.63,30.39,30.39h39.15c0-16.76,13.63-30.39,30.39-30.39v-39.15c-16.76,0-30.39-13.63-30.39-30.39ZM82.19,55.21c-6.04,2.55-11.46,6.21-16.12,10.86-4.65,4.65-8.31,10.08-10.86,16.12-1.5,3.56-2.59,7.24-3.24,11-.65-3.77-1.74-7.45-3.24-11-2.55-6.04-6.21-11.46-10.86-16.12s-10.08-8.31-16.12-10.86c-3.56-1.5-7.24-2.59-11-3.24,3.77-.65,7.45-1.74,11-3.24,6.04-2.55,11.46-6.21,16.12-10.86s8.31-10.08,10.86-16.12c1.5-3.56,2.59-7.24,3.24-11,.65,3.77,1.74,7.45,3.24,11,2.55,6.04,6.21,11.46,10.86,16.12,4.65,4.65,10.08,8.31,16.12,10.86,3.56,1.5,7.24,2.59,11,3.24-3.77.65-7.45,1.74-11,3.24Z'/%3E%3C/svg%3E") center / contain no-repeat;
    */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 103.93 103.98'%3E%3Cdefs%3E%3Cfilter id='innerShadow' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeComponentTransfer in='SourceAlpha'%3E%3CfeFuncA type='table' tableValues='1 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3CfeOffset dx='0' dy='1.1' result='offsetblur'/%3E%3CfeFlood flood-color='rgb(15,27,46)' flood-opacity='0.58'/%3E%3CfeComposite in2='offsetblur' operator='in'/%3E%3CfeComposite in2='SourceAlpha' operator='in'/%3E%3CfeMerge%3E%3CfeMergeNode in='SourceGraphic'/%3E%3CfeMergeNode/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='%23FFFFFF' filter='url(%23innerShadow)' d='M71.54,2h-39.15c0,16.76-13.63,30.39-30.39,30.39v39.15c16.76,0,30.39,13.63,30.39,30.39h39.15c0-16.76,13.63-30.39,30.39-30.39v-39.15c-16.76,0-30.39-13.63-30.39-30.39ZM82.19,55.21c-6.04,2.55-11.46,6.21-16.12,10.86-4.65,4.65-8.31,10.08-10.86,16.12-1.5,3.56-2.59,7.24-3.24,11-.65-3.77-1.74-7.45-3.24-11-2.55-6.04-6.21-11.46-10.86-16.12s-10.08-8.31-16.12-10.86c-3.56-1.5-7.24-2.59-11-3.24,3.77-.65,7.45-1.74,11-3.24,6.04-2.55,11.46-6.21,16.12-10.86s8.31-10.08,10.86-16.12c1.5-3.56,2.59-7.24,3.24-11,.65,3.77,1.74,7.45,3.24,11,2.55,6.04,6.21,11.46,10.86,16.12,4.65,4.65,10.08,8.31,16.12,10.86,3.56,1.5,7.24,2.59,11,3.24-3.77.65-7.45,1.74-11,3.24Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.amcs-utb-loginv3-card-header { text-align: center; margin-bottom: var(--amcs-utb-loginv3-space-7); }

.amcs-utb-loginv3-card-wordmark {
    display: block;
    height: 24px;
    width: auto;
    margin: 0 auto var(--amcs-utb-loginv3-space-3);
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.amcs-utb-loginv3-card-title {
    margin: 0;
    font-size: clamp(22px, 6vw, 27px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--amcs-utb-loginv3-title-blue);
}
/* Smaller than the credentials-step title so "Choose a group to sign in to"
   fits on one line at the card's fixed width instead of wrapping. */
.amcs-utb-loginv3-card-title [data-title-state="group"] {
    display: none;
    font-size: clamp(18px, 5vw, 21px);
}
.amcs-utb-loginv3-card.is-step-group .amcs-utb-loginv3-card-title [data-title-state="credentials"] { display: none; }
.amcs-utb-loginv3-card.is-step-group .amcs-utb-loginv3-card-title [data-title-state="group"] { display: inline; }

/* ---- Inline validation slot ---- */
.amcs-utb-loginv3-validation {
    min-height: 0;
    margin: 0 0 var(--amcs-utb-loginv3-space-3);
    font-size: 14px;
    line-height: 1.5;
    color: var(--amcs-utb-loginv3-danger);
    text-align: center;
}
.amcs-utb-loginv3-validation:empty { margin: 0; }

.amcs-utb-loginv3-card.is-shaking { animation: amcsUtbLoginv3Shake 480ms var(--amcs-utb-loginv3-ease-out-soft); }
@keyframes amcsUtbLoginv3Shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

/* ---- Form / fields ---- */
.amcs-utb-loginv3-credentials-block {
    display: flex;
    flex-direction: column;
    gap: var(--amcs-utb-loginv3-space-3);
}
/* Only clip during the group-switch morph (height-collapse animation) —
   clipping by default cropped the focus-ring glow around the fields.
   max-height: 0 here (not just overflow) is the permanent collapsed
   end-state: the JS morph only sets max-height inline *during* the
   transition, then clears the inline value once it settles — without a
   class-scoped max-height to fall back to, clearing it would let this
   block spring back to its natural (uncollapsed) height. */
.amcs-utb-loginv3-card.is-step-group .amcs-utb-loginv3-credentials-block {
    overflow: hidden;
    max-height: 0;
}
.amcs-utb-loginv3-card.is-step-group .amcs-utb-loginv3-card-terms {
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
}
/* Permanent open end-state for the group box, mirroring the above — the
   base rule (max-height: 0, further down) is the closed default; this
   override is what the JS morph's cleared inline style falls back to once
   the card has switched into the group step. */
.amcs-utb-loginv3-card.is-step-group .amcs-utb-loginv3-group-stage {
    max-height: none;
}

.amcs-utb-loginv3-field {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--amcs-utb-loginv3-surface-field);
    border: 1px solid var(--amcs-utb-loginv3-line-field);
    border-radius: var(--amcs-utb-loginv3-radius-field);
    /* Clips the plain, square-cornered <input> to the field's rounded pill —
       otherwise Chrome's autofill background (painted directly on the input,
       flush to the field's edge) pokes past the rounded corner. Safe for the
       focus-ring box-shadow below: overflow only clips descendants, never an
       element's own outward box-shadow. */
    overflow: hidden;
    box-shadow:
        inset 0 1px 2px rgba(15, 27, 46, 0.05),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
    transition:
        border-color var(--amcs-utb-loginv3-dur-micro) var(--amcs-utb-loginv3-ease-out-soft),
        background-color var(--amcs-utb-loginv3-dur-micro) var(--amcs-utb-loginv3-ease-out-soft),
        box-shadow var(--amcs-utb-loginv3-dur-micro) var(--amcs-utb-loginv3-ease-out-soft);
}
.amcs-utb-loginv3-field:hover { border-color: rgba(15, 27, 46, 0.20); }
/* Border + ring only, no background tint — deliberately simpler than the
   mockup's liquid-tint effect. That gradient background couldn't survive
   Chrome's autofill styling without visible seams/mismatches (box-shadow,
   the only way to override autofill's forced background, can't paint a
   gradient) — not worth the fragility for a login field. */
.amcs-utb-loginv3-field:focus-within {
    border-color: var(--amcs-utb-loginv3-fx-blue);
    box-shadow:
        inset 0 1px 2px rgba(15, 27, 46, 0.04),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.55),
        0 0 0 4px var(--amcs-utb-loginv3-fx-ring);
}
.amcs-utb-loginv3-field.is-typing {
    box-shadow:
        inset 0 1px 2px rgba(15, 27, 46, 0.04),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.6),
        0 0 0 4px var(--amcs-utb-loginv3-fx-ring-strong);
}

.amcs-utb-loginv3-field-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 100%;
    color: var(--amcs-utb-loginv3-ink-faint);
    flex-shrink: 0;
    transition: color 260ms var(--amcs-utb-loginv3-ease-out-soft), transform 260ms var(--amcs-utb-loginv3-ease-out-soft);
}
.amcs-utb-loginv3-field-icon svg { width: 18px; height: 18px; }
.amcs-utb-loginv3-field:focus-within .amcs-utb-loginv3-field-icon,
.amcs-utb-loginv3-field:has(input:not(:placeholder-shown)) .amcs-utb-loginv3-field-icon { color: var(--amcs-utb-loginv3-fx-blue); }
@keyframes amcsUtbLoginv3FieldPulse {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.amcs-utb-loginv3-field.is-typing .amcs-utb-loginv3-field-icon { animation: amcsUtbLoginv3FieldPulse 240ms var(--amcs-utb-loginv3-ease-out-soft); }
@media (prefers-reduced-motion: reduce) {
    .amcs-utb-loginv3-field.is-typing .amcs-utb-loginv3-field-icon { animation: none; }
}

.amcs-utb-loginv3-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 var(--amcs-utb-loginv3-space-3) 0 0;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 16px;
    color: var(--amcs-utb-loginv3-fx-blue);
    caret-color: var(--amcs-utb-loginv3-fx-blue);
    transition: color 200ms var(--amcs-utb-loginv3-ease-out-soft);
}
.amcs-utb-loginv3-field--password .amcs-utb-loginv3-input { padding-right: 0; }
.amcs-utb-loginv3-input::placeholder { color: var(--amcs-utb-loginv3-ink-faint); }

/* Chrome forces its own background on autofilled inputs; repaint it to match
   the field's (now-constant, non-gradient) background via the inset
   box-shadow trick so it blends into the icon strip beside it with no seam. */
.amcs-utb-loginv3-input:-webkit-autofill,
.amcs-utb-loginv3-input:-webkit-autofill:hover,
.amcs-utb-loginv3-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--amcs-utb-loginv3-fx-blue) !important;
    caret-color: var(--amcs-utb-loginv3-fx-blue);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: 0 0 0 1000px var(--amcs-utb-loginv3-surface-field) inset;
}

.amcs-utb-loginv3-field-toggle {
    display: grid;
    place-items: center;
    width: 46px;
    height: 100%;
    background: transparent;
    border: 0;
    border-radius: 0 var(--amcs-utb-loginv3-radius-field) var(--amcs-utb-loginv3-radius-field) 0;
    color: var(--amcs-utb-loginv3-ink-faint);
    cursor: pointer;
    transition: color var(--amcs-utb-loginv3-dur-micro) var(--amcs-utb-loginv3-ease-out-soft);
}
.amcs-utb-loginv3-field-toggle:hover { color: var(--amcs-utb-loginv3-accent); }
.amcs-utb-loginv3-field-toggle:focus-visible { outline: 2px solid var(--amcs-utb-loginv3-accent); outline-offset: -2px; }
.amcs-utb-loginv3-field-toggle-icon { width: 18px; height: 18px; }
.amcs-utb-loginv3-field-toggle-icon--hide { display: none; }
.amcs-utb-loginv3-field-toggle[aria-pressed="true"] .amcs-utb-loginv3-field-toggle-icon--show { display: none; }
.amcs-utb-loginv3-field-toggle[aria-pressed="true"] .amcs-utb-loginv3-field-toggle-icon--hide { display: block; }

/* ---- Select (group-switch) ---- */
.amcs-utb-loginv3-field-select { padding-right: 0; }
.amcs-utb-loginv3-select {
    appearance: none;
    -webkit-appearance: none;
    /* No icon on this field (unlike username/password) — padding-left is
       the only inset, and it's also what carries into the open dropdown's
       row inset on Windows Chrome (per-<option> padding is ignored there). */
    padding-left: 14px;
    padding-right: 36px !important;
    cursor: pointer;
}
.amcs-utb-loginv3-select-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--amcs-utb-loginv3-ink-faint);
    pointer-events: none;
}

/* ---- Submit / primary button ---- */
.amcs-utb-loginv3-submit {
    position: relative;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--amcs-utb-loginv3-space-2);
    width: 100%;
    height: 50px;
    padding: 0 var(--amcs-utb-loginv3-space-5);
    border: 0;
    border-radius: var(--amcs-utb-loginv3-radius-button);
    color: #FFFFFF;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.005em;
    cursor: pointer;
    background: linear-gradient(180deg, var(--amcs-utb-loginv3-button-top) 0%, var(--amcs-utb-loginv3-button-bottom) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 1px 0 0 rgba(255, 255, 255, 0.04),
        inset -1px 0 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        0 1px 2px rgba(15, 27, 46, 0.20),
        0 8px 20px -6px rgba(20, 40, 90, 0.35),
        0 16px 32px -12px rgba(15, 27, 46, 0.30);
    transition:
        background var(--amcs-utb-loginv3-dur-micro) var(--amcs-utb-loginv3-ease-out-soft),
        box-shadow var(--amcs-utb-loginv3-dur-micro) var(--amcs-utb-loginv3-ease-out-soft);
}
.amcs-utb-loginv3-submit:hover {
    background: linear-gradient(180deg, var(--amcs-utb-loginv3-button-hover-top) 0%, var(--amcs-utb-loginv3-button-hover-bottom) 100%);
}
.amcs-utb-loginv3-submit:focus-visible {
    outline: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 0 4px var(--amcs-utb-loginv3-fx-ring),
        0 8px 20px -6px rgba(20, 40, 90, 0.40);
}
.amcs-utb-loginv3-submit-spinner { display: none; }
.amcs-utb-loginv3-submit.is-loading { cursor: default; }
.amcs-utb-loginv3-submit.is-loading .amcs-utb-loginv3-submit-spinner {
    display: inline-block;
    width: 15px; height: 15px;
    margin-right: 8px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: amcsUtbLoginv3Spin 700ms linear infinite;
}
.amcs-utb-loginv3-submit[data-label-state] { display: none; }
.amcs-utb-loginv3-submit .amcs-utb-loginv3-submit-label { display: inline; }
.amcs-utb-loginv3-submit-label[data-label-state="loading"] { display: none; }
.amcs-utb-loginv3-submit.is-loading .amcs-utb-loginv3-submit-label[data-label-state="default"] { display: none; }
.amcs-utb-loginv3-submit.is-loading .amcs-utb-loginv3-submit-label[data-label-state="loading"] { display: inline; }
@keyframes amcsUtbLoginv3Spin { to { transform: rotate(360deg); } }

/* ---- Group-switch stage ---- */
.amcs-utb-loginv3-group-stage {
    /* flex + gap here (not just relying on .amcs-utb-loginv3-submit's own
       margin-top) matches .amcs-utb-loginv3-credentials-block's layout —
       without it, Continue sat closer to the select than Sign In sits to
       the password field, since the field itself carries no bottom margin. */
    display: flex;
    flex-direction: column;
    gap: var(--amcs-utb-loginv3-space-3);
    overflow: hidden;
    max-height: 0;
}
.amcs-utb-loginv3-group-identity {
    margin: var(--amcs-utb-loginv3-space-5) 0 0;
    font-size: 13px;
    color: var(--amcs-utb-loginv3-ink-muted);
    text-align: center;
}
.amcs-utb-loginv3-group-identity a { color: var(--amcs-utb-loginv3-accent); }

/* ---- SSO ---- */
.amcs-utb-loginv3-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: var(--amcs-utb-loginv3-space-4) 0;
    color: var(--amcs-utb-loginv3-ink-muted);
    font-size: 12px;
}
.amcs-utb-loginv3-divider::before,
.amcs-utb-loginv3-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--amcs-utb-loginv3-line-hairline);
}
.amcs-utb-loginv3-sso-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    background: var(--amcs-utb-loginv3-surface-field);
    border: 1px solid var(--amcs-utb-loginv3-line-field);
    border-radius: var(--amcs-utb-loginv3-radius-field);
    color: var(--amcs-utb-loginv3-ink-primary);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--amcs-utb-loginv3-dur-micro) var(--amcs-utb-loginv3-ease-out-soft), background var(--amcs-utb-loginv3-dur-micro) var(--amcs-utb-loginv3-ease-out-soft);
}
.amcs-utb-loginv3-sso-button:hover { border-color: rgba(15, 27, 46, 0.20); background: var(--amcs-utb-loginv3-surface-field-focus); }
.amcs-utb-loginv3-ms-mark {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    width: 15px; height: 15px;
}
.amcs-utb-loginv3-ms-mark span:nth-child(1) { background: #F25022; }
.amcs-utb-loginv3-ms-mark span:nth-child(2) { background: #7FBA00; }
.amcs-utb-loginv3-ms-mark span:nth-child(3) { background: #00A4EF; }
.amcs-utb-loginv3-ms-mark span:nth-child(4) { background: #FFB900; }

/* ---- Legal + footer ---- */
.amcs-utb-loginv3-card-terms {
    margin: var(--amcs-utb-loginv3-space-5) 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.35;
    color: var(--amcs-utb-loginv3-ink-muted);
}
.amcs-utb-loginv3-card-terms a { color: var(--amcs-utb-loginv3-accent); }

.amcs-utb-loginv3-footer {
    position: fixed;
    left: 0; right: 0; bottom: var(--amcs-utb-loginv3-space-5);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--amcs-utb-loginv3-ink-primary);
    pointer-events: none;
    /* Placed as the FINAL layer of the intro — fades in after the brand
       mark lands (or immediately, via .is-visible, on the instant path). */
    opacity: 0;
    transition: opacity 800ms var(--amcs-utb-loginv3-ease-liquid);
}
.amcs-utb-loginv3-footer.is-visible { opacity: 1; }
.amcs-utb-loginv3-footer-info { display: flex; align-items: center; gap: var(--amcs-utb-loginv3-space-2); flex-wrap: wrap; justify-content: center; }
.amcs-utb-loginv3-footer-versions { font-family: var(--amcs-utb-loginv3-font-mono); font-size: 11.5px; display: flex; align-items: center; gap: var(--amcs-utb-loginv3-space-2); }
.amcs-utb-loginv3-footer-sep { opacity: 0.6; }
.amcs-utb-loginv3-footer-chrome { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.amcs-utb-loginv3-chrome-icon { width: 13px; height: 13px; flex: none; }

@media (max-height: 640px) {
    .amcs-utb-loginv3-footer { display: none; }
}