/* Pages before sign-in: the landing page, not-found and the login pages. */

/* Public pages (LandingLayout). Dark in either theme, so the colours are fixed rather than palette
   variables. */

.ms-landing {
    --ms-landing-bg: #0B1A29;
    --ms-landing-ink: #EDF3F9;
    --ms-landing-muted: #93ADC4;
    --ms-landing-faint: #6F89A1;
    --ms-landing-accent: #8FC0EA;
    --ms-landing-line: rgba(201, 220, 238, .14);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    color: var(--ms-landing-ink);
    color-scheme: dark;
    background:
        radial-gradient(45% 45% at 50% 40%, rgba(0, 119, 176, .22) 0%, transparent 70%),
        radial-gradient(60% 60% at 88% 0%, #15314B 0%, transparent 70%),
        radial-gradient(50% 50% at 0% 100%, #102538 0%, transparent 70%),
        var(--ms-landing-bg);
    font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
}

/* A ledger grid that fades out from the centre. */
.ms-landing::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(201, 220, 238, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 220, 238, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000 0%, transparent 80%);
}

/* Overscroll and the moment before the layout paints would otherwise show the theme's light background. */
body:has(.ms-landing) {
    background-color: #0B1A29;
}

.ms-landing .mud-typography,
.ms-landing .mud-button-root {
    font-family: inherit;
}

.ms-landing .mud-appbar.ms-landing__bar {
    position: relative;
    z-index: 1;
    background: transparent;
    color: var(--ms-landing-ink);
}

.ms-landing__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: -.01em;
}

.ms-landing__brand img {
    display: block;
    height: 26px;
    width: auto;
}

.ms-landing__brand-name {
    font-weight: 600;
    color: #FFFFFF;
}

.ms-landing__brand-divider {
    width: 1px;
    height: 18px;
    background: rgba(201, 220, 238, .28);
}

.ms-landing__brand-product {
    font-weight: 500;
    color: var(--ms-landing-muted);
}

/* The full product name leaves Logg ut no room on a phone. */
@media (max-width: 599.98px) {
    .ms-landing__brand-product-rest {
        display: none;
    }
}

.ms-landing .mud-button-root.ms-landing__quiet {
    color: var(--ms-landing-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.ms-landing .mud-button-root.ms-landing__quiet:hover {
    color: #FFFFFF;
    background-color: rgba(201, 220, 238, .08);
}

.ms-landing__main {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 48px;
}

.ms-landing__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 44rem;
    text-align: center;
}

.ms-landing__mark {
    display: block;
    width: 80px;
    height: auto;
    margin-bottom: 36px;
    filter: drop-shadow(0 14px 40px rgba(0, 119, 176, .55));
}

.ms-landing .mud-icon-root.ms-landing__icon {
    width: 72px;
    height: 72px;
    font-size: 72px;
    margin-bottom: 28px;
    color: var(--ms-landing-accent);
}

.ms-landing__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 13px 6px 11px;
    border: 1px solid rgba(143, 192, 234, .28);
    border-radius: 999px;
    background: rgba(143, 192, 234, .08);
    color: #C9DCEE;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ms-landing__pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ms-landing-accent);
    animation: ms-landing-pulse 2.4s ease-out infinite;
}

@keyframes ms-landing-pulse {
    0% { box-shadow: 0 0 0 0 rgba(143, 192, 234, .55); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(143, 192, 234, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ms-landing__pulse {
        animation: none;
    }
}

.ms-landing .mud-typography.ms-landing__title {
    margin: 22px 0 0;
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.035em;
    color: #FFFFFF;
    text-wrap: balance;
}

.ms-landing .mud-typography.ms-landing__title--small {
    margin-top: 0;
    font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

.ms-landing__title em {
    font-style: normal;
    color: var(--ms-landing-accent);
}

.ms-landing .mud-typography.ms-landing__lead {
    max-width: 34rem;
    margin: 18px 0 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ms-landing-muted);
    text-wrap: balance;
}

.ms-landing .mud-button-root.ms-landing__cta {
    min-height: 50px;
    margin-top: 36px;
    padding: 0 28px;
    border-radius: 10px;
    background-color: #FFFFFF;
    color: var(--ms-landing-bg);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    transition: background-color .15s, box-shadow .15s, transform .15s;
}

.ms-landing .mud-button-root.ms-landing__cta:hover,
.ms-landing .mud-button-root.ms-landing__cta:focus-visible {
    background-color: #E4EFF9;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .4), 0 0 0 4px rgba(143, 192, 234, .22);
    transform: translateY(-1px);
}

.ms-landing .mud-typography.ms-landing__note {
    margin-top: 16px;
    font-size: .875rem;
    color: var(--ms-landing-faint);
}

.ms-landing__note strong {
    font-weight: 500;
    color: #C9DCEE;
}

.ms-landing__footer {
    position: relative;
    z-index: 1;
    padding: 20px 16px 28px;
    text-align: center;
    font-size: .75rem;
    color: var(--ms-landing-faint);
}

/* Sign-in pages (LoginLayout). The card is light on the dark frame, so MudBlazor's inputs, alerts and
   popovers keep the light theme they are built for. */

.ms-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 27rem;
}

.ms-auth__mark {
    display: block;
    width: 56px;
    height: auto;
    margin-bottom: 28px;
    filter: drop-shadow(0 12px 32px rgba(0, 119, 176, .55));
}

/* System messages over the sign-in card, rounded and lifted off the frame like the card itself. Light in both
   themes, as the card is, so the selector has to outrank the dark theme's rule for the strip. */
.ms-auth__notices {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
}

.ms-auth .ms-auth__notices .ms-notice {
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--ms-tone) 10%, var(--mud-palette-surface));
    box-shadow: inset 4px 0 0 var(--ms-tone), 0 12px 32px rgba(0, 0, 0, .35);
}

/* Positioned so it paints over the emblem's glow: a filtered element otherwise draws above later siblings. */
.ms-auth__card {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 36px 36px 32px;
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--mud-palette-text-primary);
    color-scheme: light;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
}

@media (max-width: 480px) {
    .ms-auth__card {
        padding: 28px 22px 24px;
    }
}

.ms-auth__card .mud-typography-h6 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: #12263A;
}

.ms-auth__card .mud-typography-body2:not(.mud-link) {
    color: #556E84;
}

.ms-auth__card .mud-input,
.ms-auth__card .mud-input-label {
    font-family: inherit;
}

.ms-auth__card .mud-button-root {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.ms-auth__card .mud-button-filled {
    min-height: 44px;
    border-radius: 10px;
    box-shadow: none;
}

.ms-auth__card .mud-link {
    font-weight: 500;
}