@import url('/assets/spectrum-mail.css');

/* Shared authentication surface. Applications can replace semantic tokens
   declaratively without changing this layout. */
:root {
    --login-accent: #f2a900;
    --login-accent-strong: #d99400;
    --login-background: #132a34;
    --login-overlay: #00000000;
    --login-background-image: none;
    --login-card: #fff;
    --login-text: #17232a;
    --login-muted: #52636c;
    --login-focus: #f2a900;
    --login-logo-width: 54px;
    --login-title-offset-y: 0px;
}
.login-form button[type="submit"] {
    background: var(--login-accent-strong);
    border: 1px solid var(--login-accent-strong);
    color: #fff;
    box-shadow: 0 5px 14px rgb(242 169 0 / 20%);
    transition: background-color 140ms ease, border-color 140ms ease,
        box-shadow 140ms ease, transform 140ms ease;
}

.login-form button[type="submit"]:hover {
    background: var(--login-accent);
    border-color: var(--login-accent);
    box-shadow: 0 7px 18px rgb(217 148 0 / 28%);
}

.login-form button[type="submit"]:active { transform: translateY(1px); }
.login-form button[type="submit"]:focus-visible {
    outline: 3px solid var(--login-focus);
    outline-offset: 3px;
}

/* Default Spectrum authentication canvas: a restrained network topology,
   shared branding grammar and no provider-specific imagery. */
:root { --accent: var(--login-accent); }
@keyframes spectrum-ambient-drift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; }
    50% { background-position: 56px -38px, -48px 54px, 42px 48px, 0 0; }
    100% { background-position: -44px 62px, 64px -36px, -58px 38px, 0 0; }
}
@keyframes spectrum-orbit-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-42px, -28px, 0) scale(1.055); }
    100% { transform: translate3d(30px, -52px, 0) scale(1.025); }
}
@keyframes spectrum-topology-flow {
    0% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.08); opacity: .24; }
    50% { transform: translate3d(2%, -1.5%, 0) scale(1.1); opacity: .38; }
    100% { transform: translate3d(-1%, -3%, 0) scale(1.08); opacity: .28; }
}
.login-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--login-background);
    background-image:
        linear-gradient(var(--login-overlay), var(--login-overlay)),
        var(--login-background-image),
        radial-gradient(circle at 18% 24%, rgb(242 169 0 / 12%) 0 2px, transparent 3px),
        radial-gradient(circle at 76% 18%, rgb(140 190 205 / 14%) 0 2px, transparent 3px),
        radial-gradient(circle at 84% 78%, rgb(242 169 0 / 9%) 0 3px, transparent 4px),
        linear-gradient(135deg, #09171d 0%, #132a34 52%, #0c2028 100%);
    background-position: center, center, 0 0, 0 0, 0 0, center;
    background-size: cover, cover, auto, auto, auto, cover;
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, no-repeat;
    animation: spectrum-ambient-drift 18s linear infinite alternate;
}
.login-page::before,
.login-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
}
.login-page::before {
    inset: -8%;
    opacity: .28;
    background-image:
        linear-gradient(28deg, transparent 0 37%, rgb(151 194 207 / 16%) 37.15% 37.35%, transparent 37.5%),
        linear-gradient(151deg, transparent 0 61%, rgb(151 194 207 / 12%) 61.1% 61.28%, transparent 61.4%),
        radial-gradient(circle at 50% 50%, transparent 0 28%, rgb(242 169 0 / 7%) 29%, transparent 48%);
    animation: spectrum-topology-flow 16s ease-in-out infinite alternate;
}
.login-page::after {
    width: min(58vw, 760px);
    aspect-ratio: 1;
    right: -14vw;
    bottom: -38vw;
    border: 1px solid rgb(151 194 207 / 12%);
    border-radius: 50%;
    box-shadow: 0 0 0 68px rgb(151 194 207 / 3%), 0 0 0 136px rgb(242 169 0 / 2%);
    animation: spectrum-orbit-drift 22s ease-in-out infinite alternate;
}
.login-page[data-has-background="true"]::before { opacity: .12; }
.login-page[data-has-background="true"]::after { opacity: .34; }
.login-page[data-has-background="true"] { animation: none; }
.login-card {
    position: relative;
    border: 1px solid rgb(255 255 255 / 18%);
    background: var(--login-card);
    color: var(--login-text);
}
.login-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.login-brand img { width: 54px; height: 54px; object-fit: contain; background: var(--login-accent); padding: 4px; border-radius: 12px; }
.login-page[data-logo-treatment="plain"] .login-brand img {
    width: var(--login-logo-width);
    height: auto;
    max-height: 88px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    object-position: left center;
}
.login-page[data-logo-treatment="plain"] .login-brand {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
}
.login-page[data-logo-treatment="plain"] .login-brand h1 {
    width: min(var(--login-logo-width), 100%);
    max-width: 100%;
    align-self: center;
    flex: 0 0 auto;
    text-align: center;
    transform: none;
}
.login-page[data-logo-tone="dark"] .login-brand img { filter: invert(1); }
.login-page[data-logo-tone="light"] .login-brand img { filter: none; }
.login-brand h1 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.75rem; line-height: 1.08; transform: translateY(var(--login-title-offset-y)); }
.login-intro { margin-top: 18px; }
.login-intro .eyebrow { margin: 0 0 5px; }
.login-intro .eyebrow:last-child { margin-bottom: 0; }
.login-intro p { margin: 0; color: var(--login-muted); }
.login-form input:focus-visible {
    border: 3px solid var(--login-focus);
    outline: none;
    box-shadow: none;
    padding: 7px 9px;
}
@media (max-width: 520px) {
    .login-card { padding: 26px 22px; border-radius: 20px; }
    .login-brand { display: grid; justify-items: start; gap: 12px; }
    .login-page[data-logo-treatment="plain"] .login-brand { display: flex; align-items: center; gap: 7px; }
    .login-brand img { width: 48px; height: 48px; }
    .login-page[data-logo-treatment="plain"] .login-brand img { width: min(var(--login-logo-width), 136px); height: auto; }
    .login-page[data-logo-treatment="plain"] .login-brand h1 { width: min(var(--login-logo-width), 136px); }
    .login-brand h1 { font-size: 1.65rem; transform: none; }
}
@media (forced-colors: active) {
    .login-page { background: Canvas; }
    .login-page::before,
    .login-page::after { display: none; }
    .login-page[data-logo-tone] .login-brand img { filter: none; }
    .login-form input:focus-visible {
        border-color: Highlight;
        outline: 3px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .login-page,
    .login-page::before,
    .login-page::after { animation: none; }
}