/*
 * The standalone account pages (/auth, /invite, /forgot-password, /reset-password), laid out by
 * Pages/Shared/_AuthLayout.cshtml: one page, the mark on its left half and the form on its right, no panels or cards
 * between them. They render outside the Blazor app shell, so they use the kit's classes (ui-kit.css) rather than its
 * components.
 */

/* The whole window is the page (light, or dark with the dark theme), a soft wash of the accent from its left corners
   that is gone before the form. The two halves keep to the middle, side by side, however wide the window. */
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 460px);
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(44rem 34rem at -8% -12%, color-mix(in srgb, var(--ui-accent) 14%, transparent), transparent 70%),
        radial-gradient(38rem 30rem at 18% 112%, color-mix(in srgb, var(--ui-accent) 9%, transparent), transparent 70%),
        var(--ui-page);
}

/* ---------- The brand half ---------- */

/* A dot grid that fades out long before the half's edges (so there is no seam), and in the middle the mark inside
   three rings, the outer one slowly turning a dot. */
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    min-height: 0;
    padding: 2.25rem 2.5rem 4.5rem;
    overflow: hidden;
    color: var(--ui-text);
    isolation: isolate;
}

.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle, var(--ui-line-strong) 1.1px, transparent 1.6px) 0 0 / 22px 22px;
    -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 92%);
    mask-image: radial-gradient(closest-side, #000 20%, transparent 92%);
}

.auth-brand-art {
    position: relative;
    display: grid;
    place-items: center;
    width: min(340px, 100%);
    aspect-ratio: 1;
}

.auth-ring {
    position: absolute;
    border-radius: 50%;
}

.auth-ring.is-outer {
    inset: 0;
    border: 1px dashed color-mix(in srgb, var(--ui-accent) 28%, var(--ui-line));
    animation: auth-orbit 60s linear infinite;
}

/* The dot the outer ring carries round. */
.auth-ring.is-outer::after {
    content: "";
    position: absolute;
    top: -5px;
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ui-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 18%, transparent);
}

.auth-ring.is-middle {
    inset: 16%;
    border: 1px solid color-mix(in srgb, var(--ui-accent) 18%, var(--ui-line));
    background: color-mix(in srgb, var(--ui-page) 55%, transparent);
    backdrop-filter: blur(2px);
}

/* Wide enough round the mark that its corner brackets keep clear of the edge. */
.auth-ring.is-inner {
    inset: 28%;
    border: 1px solid var(--ui-line);
    background: var(--ui-page);
    box-shadow: var(--ui-shadow-lg);
}

.auth-brand-mark {
    position: relative;
    display: block;
    width: 84px;
    height: 84px;
}

@keyframes auth-orbit {
    to { transform: rotate(360deg); }
}

/* The letter spacing also trails the last letter: as much margin on the right takes it back, so the name is centred. */
.auth-brand-name {
    margin-right: -0.34em;
    color: var(--ui-text);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.34em;
}

.auth-brand-foot {
    position: absolute;
    right: 0;
    bottom: 1.75rem;
    left: 0;
    margin: 0;
    color: var(--ui-faint);
    font-size: var(--ui-fs-xs);
    text-align: center;
}

/* ---------- The form ---------- */

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 2rem 1.25rem;
}

.auth-card {
    width: 100%;
    max-width: 380px;
}

/* The mark over the form only where the brand panel is gone (narrow screens). */
.auth-logo {
    display: none;
    margin: 0 0 1.5rem;
}

.auth-title {
    margin: 0 0 0.45rem;
    font-size: var(--ui-fs-2xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--ui-tracking-tight);
    color: var(--ui-text);
}

.auth-subtitle {
    margin: 0 0 1.75rem;
    color: var(--ui-faint);
    font-size: var(--ui-fs-md);
    line-height: 1.5;
}

/* A title with no line under it keeps its distance from the form on its own. */
.auth-title:not(:has(+ .auth-subtitle)) {
    margin-bottom: 1.5rem;
}

.auth-card strong {
    font-weight: 600;
}

/* Fields and the button are 46 px here, on purpose: a sign-in form stands alone on the page. */
.auth-form .ui-input,
.auth-form .ui-btn-block {
    height: 46px;
}

.auth-form .ui-btn-block {
    margin-top: 0.35rem;
}

/* An empty validation message (the tag helper always renders one) takes no gap. */
.auth-form .ui-error:empty {
    display: none;
}

/* A note straight in the card (outside a form) keeps its distance from what follows; inside a form the gap does. */
.auth-card > .ui-alert {
    margin-bottom: 1rem;
}

.auth-card .ui-alert {
    animation: auth-note-in 0.2s ease-out;
}

@keyframes auth-note-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

.auth-hint {
    margin-bottom: 1rem;
    color: var(--ui-muted);
    font-size: var(--ui-fs-sm);
    line-height: 1.55;
}

.auth-form > .auth-hint {
    margin-bottom: 0;
}

/* «Запомнить меня» and «Забыли пароль?» on one line. */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--ui-fs-sm);
}

.auth-row .ui-check {
    font-size: var(--ui-fs-sm);
}

/* Tucked under the password field, closer to it than the form's gap (the invite's sign-in). */
.auth-forgot {
    text-align: right;
    margin-top: -0.5rem;
    font-size: var(--ui-fs-sm);
}

.auth-footer {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ui-line);
    color: var(--ui-faint);
    font-size: var(--ui-fs-sm);
}

.auth-footer p {
    margin: 0;
}

.auth-footer p + p {
    margin-top: 0.5rem;
}

/* How to get an account when the form to create one is closed: an icon, then the answer. */
.auth-footer-note {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    line-height: 1.5;
}

.auth-footer-note > .bi {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-accent-subtle);
    color: var(--ui-accent-strong);
    font-size: 14px;
}

.auth-footer-note strong {
    color: var(--ui-text);
}

.auth-link {
    color: var(--ui-accent-strong);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--ui-duration) ease;
}

.auth-link:hover {
    color: var(--ui-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* What a team invite opens, shown above its form on /invite: an info note, one line for the organisations and one for
   the level. */
.invite-team {
    margin-bottom: 1.25rem;
}

.invite-team .ui-alert-body {
    display: grid;
    gap: 0.4rem;
}

.invite-team-orgs,
.invite-team-level {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.invite-team-orgs {
    font-weight: 600;
}

/* ---------- Narrow screens: the form alone ---------- */

@media (max-width: 960px) {
    .auth-shell {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
    }

    .auth-brand {
        display: none;
    }

    .auth-main {
        align-items: flex-start;
        padding: 3rem 1.25rem 2rem;
        background:
            radial-gradient(40rem 20rem at 50% -8rem, color-mix(in srgb, var(--ui-accent) 12%, transparent), transparent 70%),
            var(--ui-page);
    }

    /* Only the theme's one of the two (ui-kit.css hides the other with !important). */
    .auth-logo {
        display: block;
    }
}

@media (max-width: 480px) {
    .auth-title {
        font-size: var(--ui-fs-xl);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card .ui-alert,
    .auth-ring.is-outer {
        animation: none;
    }
}