/* ============================================================
   Account pages — sign in, create an account, forgotten password,
   confirmation emails (AuthLayout + Components/Account/Pages).

   The guest site's look, since that is where a visitor comes from:
   Hanken Grotesk, slate ink, flag blue for actions and links, a linen
   page with one white card. Same literal values as GuestNavMenu /
   GuestFooter (the signed-in --skrol-* tokens are a different palette).

   Every pair meets WCAG AA: ink 16.5:1, soft ink 6.9:1, blue 7.8:1,
   error red 6.6:1, success green 6.4:1 on white; input borders 3.6:1
   (non-text, 1.4.11). Controls are at least 44px tall; inputs use
   16px text so iOS doesn't zoom on focus. Logical properties
   throughout, so the Arabic (RTL) pages mirror for free; the few
   physical rules are marked.

   Rules are scoped to .auth-shell: global sheets (app.css,
   modern-design-system.css, bootstrap) style h1, .invalid, buttons…
   and these must win without !important.
   ============================================================ */

.auth-shell {
    --auth-ink: #15202b;
    --auth-ink-soft: #4f5b67;
    --auth-ink-mute: #5d6873;
    --auth-line: #e4e8ec;
    --auth-field-line: #7d8995;
    --auth-blue: #00558c;
    --auth-blue-hover: #00416c;
    --auth-focus: #006aa7;
    --auth-tint: #eaf2f8;
    --auth-paper: #f7f5f0;
    --auth-danger: #b42318;
    --auth-danger-ink: #8a1c12;
    --auth-danger-soft: #fef3f2;
    --auth-danger-line: #f4c7c3;
    --auth-success: #1e6b52;
    --auth-success-soft: #ecf6f1;
    --auth-success-line: #bfdccf;
    --auth-warning: #8a4b00;
    --auth-warning-soft: #fff4e5;
    --auth-warning-line: #f3d6a8;
    --auth-radius: 12px;
    --auth-gutter: 16px;

    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    background: var(--hub-card, #fff);
    color: var(--auth-ink);
    font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* Dark theme — sign-in / sign-up / forgot; --auth-blue is a link + headline colour 13 times and a fill twice, so the text shade wins */
.theme-dark .auth-shell {
    --auth-ink: #F2EEE5;
    --auth-ink-soft: #C9C2B4;
    --auth-ink-mute: #A09989;
    --auth-line: #38332B;
    --auth-field-line: #49433A;
    --auth-blue: #7CC1F7;
    --auth-blue-hover: #A6D6FA;
    --auth-focus: #2E97EC;
    --auth-tint: #0F2A40;
    --auth-paper: #15130F;
    --auth-danger: #FF9A8E;
    --auth-danger-ink: #FF9A8E;
    --auth-danger-soft: #3F1D1A;
    --auth-danger-line: #5E2B27;
    --auth-success: #86E3B0;
    --auth-success-soft: #143324;
    --auth-success-line: #2E5A34;
    --auth-warning: #FFD27A;
    --auth-warning-soft: #3A2C10;
    --auth-warning-line: #5C4716;
}

.auth-shell:lang(ar) {
    font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}

/* One class of specificity: enough to beat bootstrap's element rules (p and ul margins,
   ul padding), and every class rule below still wins by coming later. A bare :where()
   reset would lose to them. */
.auth-shell :where(h1, h2, p, ul, ol) {
    margin: 0;
}

.auth-shell :where(ul[role="list"], ol[role="list"]) {
    padding: 0;
    list-style: none;
}

.auth-shell a {
    color: var(--auth-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.auth-shell a:hover {
    color: var(--auth-blue-hover);
    text-decoration-thickness: 2px;
}

.auth-shell :focus-visible {
    outline: 3px solid var(--auth-focus);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Focus that is placed, not tabbed to: the h1 after an in-site navigation (Blazor's
   focus-on-navigate), an error box after a refused submit, <main> after the skip link.
   None of them is a control, and a ring around a heading reads as a bug. */
.auth-shell .auth-title:focus,
.auth-shell .auth-alert:focus,
.auth-main:focus {
    outline: none;
}

/* ---------- Header ------------------------------------------- */

.auth-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    block-size: 56px;
    padding-inline: var(--auth-gutter);
    border-block-end: 1px solid var(--auth-line);
    background: var(--hub-card, #fff);
}

.auth-skip {
    position: absolute;
    inset-inline-start: 8px;
    inset-block-start: 6px;
    z-index: 2;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--auth-blue);
    font-weight: 700;
    transform: translateY(-160%);
}

.auth-shell .auth-skip,
.auth-shell .auth-skip:hover {
    color: #fff;
    text-decoration: none;
}

.auth-skip:focus {
    transform: none;
}

.auth-skip:not(:focus) {
    opacity: 0;
    pointer-events: none;
}

.auth-shell .auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-block-size: 44px;
    margin-inline-end: auto;
    color: var(--auth-ink);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    text-decoration: none;
}

.auth-brand img {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 8px;
}

/* Language menu — a <details> disclosure, like the guest header's. */
.auth-lang {
    position: relative;
}

.auth-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    padding-inline: 10px;
    border-radius: 10px;
    color: var(--auth-ink-soft);
    font-size: 15px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.auth-lang-btn::-webkit-details-marker {
    display: none;
}

.auth-lang-btn:hover,
.auth-lang[open] > .auth-lang-btn {
    background: var(--auth-tint);
    color: var(--auth-blue);
}

.auth-lang-btn > .bi-globe2 {
    font-size: 17px;
}

.auth-lang-chev {
    font-size: 11px;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}

.auth-lang[open] .auth-lang-chev {
    transform: rotate(180deg);
}

.auth-lang-menu {
    position: absolute;
    z-index: 10;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    min-inline-size: 190px;
    padding: 6px;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    background: var(--hub-card, #fff);
    box-shadow: 0 18px 40px -18px rgba(11, 42, 69, .38);
}

.auth-shell .auth-lang-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-block-size: 44px;
    padding-inline: 12px;
    border-radius: 10px;
    color: var(--auth-ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.auth-shell .auth-lang-menu a:hover {
    background: var(--auth-tint);
    color: var(--auth-blue);
}

/* Marked by weight, colour and a check — not colour alone. */
.auth-shell .auth-lang-menu a[aria-current="true"] {
    color: var(--auth-blue);
    font-weight: 800;
}

.auth-lang-btn :lang(ar),
.auth-lang-menu a:lang(ar) {
    font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}

/* ---------- Page and panel ----------------------------------- */

.auth-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px var(--auth-gutter) 40px;
}

/* Phones: the form sits straight on the page — a card inside a 360px screen only takes width. */
.auth-panel {
    inline-size: 100%;
    max-inline-size: 440px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-panel--wide {
    max-inline-size: 480px;
}

/* ---------- Heading ------------------------------------------ */

.auth-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.auth-badge {
    display: grid;
    place-items: center;
    inline-size: 56px;
    block-size: 56px;
    margin-block-end: 6px;
    border-radius: 50%;
    background: var(--auth-tint);
    color: var(--auth-blue);
    font-size: 26px;
}

.auth-badge.is-success {
    background: var(--auth-success-soft);
    color: var(--auth-success);
}

.auth-badge.is-warning {
    background: var(--auth-warning-soft);
    color: var(--auth-warning);
}

.auth-badge.is-danger {
    background: var(--auth-danger-soft);
    color: var(--auth-danger);
}

.auth-shell .auth-title {
    color: var(--auth-ink);
    font-family: inherit;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.auth-lede {
    max-inline-size: 36ch;
    color: var(--auth-ink-soft);
    font-size: 16px;
}

/* The address the email went to, inside a sentence. */
.auth-lede bdi,
.auth-text bdi {
    color: var(--auth-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.auth-text {
    color: var(--auth-ink-soft);
}

.auth-center {
    text-align: center;
}

/* ---------- Form --------------------------------------------- */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-label {
    color: var(--auth-ink);
    font-size: 15px;
    font-weight: 700;
}

.auth-hint {
    color: var(--auth-ink-mute);
    font-size: 14px;
}

.auth-input-wrap {
    position: relative;
}

.auth-shell .auth-input {
    display: block;
    inline-size: 100%;
    min-block-size: 48px;
    padding: 11px 14px;
    border: 1.5px solid var(--auth-field-line);
    border-radius: 10px;
    background: var(--hub-card, #fff);
    color: var(--auth-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}

.auth-shell .auth-input::placeholder {
    color: var(--c-6b7680, #6b7680);
    opacity: 1;
}

/* Email and password read left to right (dir="ltr"); on an Arabic page they still
   line up with the right-aligned labels. Physical on purpose: the input's own
   direction is ltr, so "end" would be its right edge everywhere. */
[dir="rtl"] .auth-shell .auth-input[dir="ltr"] {
    text-align: right;
}

/* app.css outlines every .invalid / .valid.modified input (the Blazor template's rules). */
.auth-shell .auth-input.invalid,
.auth-shell .auth-input.valid.modified {
    outline: none;
}

.auth-shell .auth-input:hover {
    border-color: var(--auth-ink-soft);
}

.auth-shell .auth-input.invalid,
.auth-shell .auth-input[aria-invalid="true"] {
    border-color: var(--auth-danger);
    box-shadow: inset 0 0 0 1px var(--auth-danger);
}

.auth-shell .auth-input:focus,
.auth-shell .auth-input:focus-visible {
    border-color: var(--auth-focus);
    outline: 3px solid rgba(0, 106, 167, .35);
    outline-offset: 1px;
    box-shadow: none;
    border-radius: 10px;
}

/* A field with an error keeps its red edge while it is being corrected. */
.auth-shell .auth-input.invalid:focus,
.auth-shell .auth-input[aria-invalid="true"]:focus {
    border-color: var(--auth-danger);
    box-shadow: inset 0 0 0 1px var(--auth-danger);
}

/* Room for the show/hide button. Physical, like the alignment above: the input is ltr. */
.auth-shell .auth-input-pw {
    padding-right: 52px;
}

[dir="rtl"] .auth-shell .auth-input-pw {
    padding-right: 14px;
    padding-left: 52px;
}

.auth-shell .auth-pw-toggle {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--auth-ink-soft);
    font-size: 19px;
    cursor: pointer;
}

.auth-shell .auth-pw-toggle[hidden] {
    display: none;
}

.auth-shell .auth-pw-toggle:hover {
    color: var(--auth-blue);
    background: var(--auth-tint);
}

.auth-shell .auth-pw-toggle[aria-pressed="true"] {
    color: var(--auth-blue);
}

/* Always in the accessibility tree (a live region must be there before it speaks);
   it only takes room once auth-forms.js writes into it. */
.auth-caps {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--auth-warning);
    font-size: 14px;
    font-weight: 600;
}

/* Empty, it gives back the field's row gap above it. */
.auth-caps:empty {
    margin-block-start: -6px;
}

/* bi-capslock-fill */
.auth-caps:not(:empty)::before {
    content: "\F222";
    font-family: bootstrap-icons;
    font-weight: 400;
}

.auth-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--auth-danger);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
}

.auth-field-error[hidden] {
    display: none;
}

.auth-field-error > .bi {
    margin-block-start: 1px;
}

.auth-field-error-line {
    display: block;
}

/* Keep me signed in */
.auth-check {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auth-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 44px;
}

.auth-shell .auth-checkbox {
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    margin: 0;
    accent-color: var(--auth-blue);
    cursor: pointer;
}

.auth-check-row label {
    color: var(--auth-ink);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.auth-check .auth-hint {
    padding-inline-start: 30px;
    margin-block-start: -8px;
}

/* ---------- Password hint (PasswordHint) --------------------- */
/* One quiet line under a new password instead of a box of rules. It shows while the field
   is in use (focus) or holds something, and steps aside while the field shows an error (the
   error line then says what is missing). Icon and words change together, never colour alone:
   bi-info-circle while there is something to do, bi-check-circle-fill once it is done. */

.auth-pw-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--auth-ink-soft);
    font-size: 14px;
    line-height: 1.45;
}

.auth-pw-hint-icon::before {
    content: "\F431";
}

.auth-pw-hint.is-done {
    color: var(--auth-success);
    font-weight: 600;
}

.auth-pw-hint.is-done .auth-pw-hint-icon::before {
    content: "\F26A";
}

.auth-field:not(:focus-within) .auth-pw-hint.is-idle,
.auth-field:has(.auth-input[aria-invalid="true"]) .auth-pw-hint {
    display: none;
}

/* ---------- Email: tick and typo suggestion ------------------ */

/* A valid address gets a quiet tick at the end of the field (auth-forms.js sets data-valid
   when the field is left). Physical sides, like the password eye: the input is ltr. */
.auth-shell .auth-input-email {
    padding-right: 42px;
}

[dir="rtl"] .auth-shell .auth-input-email {
    padding-right: 14px;
    padding-left: 42px;
}

.auth-input-ok {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 14px;
    display: none;
    color: var(--auth-success);
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.auth-input[data-valid]:not([aria-invalid="true"]) ~ .auth-input-ok {
    display: block;
}

/* "Did you mean name@gmail.com?" - a live region that only takes room when it says something. */
.auth-suggest {
    color: var(--auth-ink-soft);
    font-size: 14.5px;
}

.auth-suggest:empty {
    margin-block-start: -6px;
}

.auth-shell .auth-suggest-btn {
    display: inline;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--auth-blue);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.auth-shell .auth-suggest-btn:hover {
    color: var(--auth-blue-hover);
    text-decoration-thickness: 2px;
}

/* ---------- Sign-up: the greeting and the trial line ---------- */

/* "Hej!" - the course's first word, in a speech bubble in the flag's yellow (ink on
   #fecc02 is 13:1). Logical corners, so the bubble's tail sits at the start in Arabic too. */
.auth-hej {
    display: inline-block;
    margin-block-end: 6px;
    padding: 6px 16px 7px;
    border-radius: 18px;
    border-end-start-radius: 4px;
    background: #fecc02;
    color: var(--auth-ink);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}

@media (prefers-reduced-motion: no-preference) {
    .auth-hej {
        animation: auth-hej-in .45s cubic-bezier(.2, .7, .2, 1.25) backwards;
        transform-origin: 0 100%;
    }

    [dir="rtl"] .auth-hej {
        transform-origin: 100% 100%;
    }
}

@keyframes auth-hej-in {
    from {
        opacity: 0;
        scale: .6;
    }
}

/* Under the button: the free trial, and no card. */
.auth-reassure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-block-start: -6px;
    color: var(--auth-ink-soft);
    font-size: 14.5px;
    text-align: center;
}

.auth-reassure .bi {
    color: var(--auth-success);
    font-size: 16px;
}

/* ---------- Buttons ------------------------------------------ */

.auth-shell .auth-submit,
.auth-shell .auth-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    inline-size: 100%;
    min-block-size: 50px;
    padding: 12px 20px;
    border: 1.5px solid var(--auth-blue);
    border-radius: var(--auth-radius);
    background: var(--auth-blue);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, scale .15s cubic-bezier(.2, .7, .2, 1);
}

.auth-shell .auth-submit:hover,
.auth-shell .auth-button:hover {
    border-color: var(--auth-blue-hover);
    background: var(--auth-blue-hover);
    color: #fff;
}

.auth-shell .auth-button.is-secondary {
    background: var(--hub-card, #fff);
    color: var(--auth-blue);
}

.auth-shell .auth-button.is-secondary:hover {
    background: var(--auth-tint);
    color: var(--auth-blue-hover);
}

@media (prefers-reduced-motion: no-preference) {
    .auth-shell .auth-submit:active,
    .auth-shell .auth-button:active {
        scale: .98;
    }
}

/* Sending: the label changes, a spinner turns, and a second press does nothing. */
.auth-spinner {
    display: none;
    inline-size: 18px;
    block-size: 18px;
    border: 2.5px solid rgba(255, 255, 255, .45);
    border-block-start-color: var(--hub-card, #fff);
    border-radius: 50%;
}

.auth-submit.is-busy {
    cursor: progress;
    opacity: .85;
}

.auth-submit.is-busy .auth-spinner {
    display: inline-block;
    animation: auth-spin .8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .auth-submit.is-busy .auth-spinner {
        animation-duration: 2.4s;
    }

    .auth-lang-chev,
    .auth-shell .auth-submit,
    .auth-shell .auth-button,
    .auth-shell .auth-input {
        transition: none;
    }
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- Continue with Google ----------------------------- */
/* Google's rules for its sign-in button: the four-colour G on white, a #747775 outline,
   #1f1f1f text (16.1:1). As tall as the submit button below it. */

.auth-google {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-shell .auth-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    inline-size: 100%;
    min-block-size: 50px;
    padding: 12px 20px;
    border: 1px solid #747775;
    border-radius: var(--auth-radius);
    background: var(--hub-card, #fff);
    color: var(--c-1f1f1f, #1f1f1f);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s, scale .15s cubic-bezier(.2, .7, .2, 1);
}

.auth-shell .auth-google-btn:hover {
    border-color: #5f6368;
    background: var(--bsgray-100, #f8f9fa);
    box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.auth-shell .auth-google-btn:focus-visible {
    border-radius: var(--auth-radius);
}

.auth-google-logo {
    flex: none;
    inline-size: 20px;
    block-size: 20px;
}

/* Busy (the round trip to Google, or One Tap signing in): the spinner takes the G's place. */
.auth-google-btn .auth-spinner {
    border-color: rgba(31, 31, 31, .25);
    border-block-start-color: #1f1f1f;
}

.auth-google-btn.is-busy {
    cursor: progress;
}

.auth-google-btn.is-busy .auth-spinner {
    display: inline-block;
    animation: auth-spin .8s linear infinite;
}

.auth-google-btn.is-busy .auth-google-logo {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .auth-shell .auth-google-btn:active {
        scale: .98;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-shell .auth-google-btn {
        transition: none;
    }

    .auth-google-btn.is-busy .auth-spinner {
        animation-duration: 2.4s;
    }
}

/* The terms step after Google for someone new (GoogleSignUp.razor): which Google account,
   then the terms and the two choices. */
.auth-google-account {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius);
    background: var(--auth-paper);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.auth-google-terms {
    color: var(--auth-ink-soft);
    text-align: center;
}

/* "or" between Google and the email form, with a rule on each side. */
.auth-or {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--auth-ink-mute);
    font-size: 14px;
}

.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1;
    border-block-start: 1px solid var(--auth-line);
}

/* ---------- Alerts ------------------------------------------- */
/* .modern-alert (StatusMessage, kept on the sign-in page for the end-to-end tests and the
   external-login messages) brings its own global styles; these outrank them. */

.auth-shell .auth-alert,
.auth-shell .auth-panel .modern-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--auth-line);
    border-inline-start-width: 4px;
    border-radius: 10px;
    background: var(--auth-tint);
    box-shadow: none;
    backdrop-filter: none;
    color: var(--auth-ink);
    font-size: 15px;
    line-height: 1.5;
    animation: none;
}

.auth-shell .auth-alert.is-info {
    border-color: var(--c-cfe0ee, #cfe0ee);
    border-inline-start-color: var(--auth-blue);
}

.auth-shell .auth-alert.is-danger,
.auth-shell .auth-panel .modern-alert.alert-danger {
    border-color: var(--auth-danger-line);
    border-inline-start-color: var(--auth-danger);
    background: var(--auth-danger-soft);
}

.auth-shell .auth-alert.is-success,
.auth-shell .auth-panel .modern-alert.alert-success {
    border-color: var(--auth-success-line);
    border-inline-start-color: var(--auth-success);
    background: var(--auth-success-soft);
}

.auth-shell .auth-alert.is-warning {
    border-color: var(--auth-warning-line);
    border-inline-start-color: var(--auth-warning);
    background: var(--auth-warning-soft);
}

.auth-alert-icon {
    flex: none;
    margin-block-start: 1px;
    font-size: 20px;
    line-height: 1.2;
    color: var(--auth-blue);
}

.auth-alert.is-danger .auth-alert-icon {
    color: var(--auth-danger);
}

.auth-alert.is-success .auth-alert-icon {
    color: var(--auth-success);
}

.auth-alert.is-warning .auth-alert-icon {
    color: var(--auth-warning);
}

.auth-alert-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 0;
}

/* Also an h2 on the status pages: undo the global heading sizes. */
.auth-shell .auth-alert-title {
    color: var(--auth-ink);
    font-family: inherit;
    font-size: inherit;
    font-weight: 800;
    line-height: inherit;
}

.auth-alert.is-danger .auth-alert-title {
    color: var(--auth-danger-ink);
}

.auth-alert.is-success .auth-alert-title {
    color: var(--auth-success);
}

.auth-alert-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-weight: 700;
}

/* StatusMessage's inner parts, in step with the boxes above. */
.auth-shell .auth-panel .modern-alert .alert-content {
    gap: 12px;
}

.auth-shell .auth-panel .modern-alert .alert-icon {
    inline-size: auto;
    block-size: auto;
    background: none;
    font-size: 20px;
}

.auth-shell .auth-panel .modern-alert .alert-message {
    color: var(--auth-ink);
    font-size: 15px;
}

/* ---------- Lists on the status pages ------------------------ */

.auth-steps {
    display: grid;
    gap: 12px;
    counter-reset: auth-step;
}

.auth-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    counter-increment: auth-step;
}

.auth-steps li::before {
    content: counter(auth-step);
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: var(--auth-tint);
    color: var(--auth-blue);
    font-size: 14px;
    font-weight: 800;
}

.auth-tips {
    display: grid;
    gap: 10px;
    color: var(--auth-ink-soft);
    font-size: 15px;
}

.auth-tips li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.auth-tips .bi {
    flex: none;
    margin-block-start: 1px;
    color: var(--auth-blue);
}

/* ---------- Secondary links under the form -------------------- */

.auth-alt {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--auth-line);
    color: var(--auth-ink-soft);
    font-size: 15px;
    text-align: center;
}

/* A link wraps to the next line whole rather than breaking after its first word. */
.auth-alt a {
    display: inline-block;
    font-weight: 700;
}

.auth-legal {
    color: var(--auth-ink-soft);
    font-size: 13.5px;
    text-align: center;
}

/* Small print right under the button it belongs to. */
.auth-form .auth-legal {
    margin-block-start: -6px;
}

.auth-help {
    max-inline-size: 440px;
    color: var(--auth-ink-soft);
    font-size: 14px;
    text-align: center;
}

/* Links inside sentences are exempt from WCAG 2.5.8's target size; the one under the
   password ("Forgot password?") stands alone, so it gets the height of a target. */
.auth-field-after {
    display: flex;
    justify-content: flex-end;
}

.auth-shell .auth-field-after a {
    display: inline-flex;
    align-items: center;
    min-block-size: 32px;
    font-size: 14.5px;
    font-weight: 700;
}

/* ---------- Footer ------------------------------------------- */

.auth-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px var(--auth-gutter) calc(20px + env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--auth-line);
    background: var(--hub-card, #fff);
    color: var(--auth-ink-soft);
    font-size: 14px;
}

.auth-foot ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 20px;
}

.auth-shell .auth-foot a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--auth-ink-soft);
    text-decoration: none;
}

.auth-shell .auth-foot a:hover {
    color: var(--auth-blue);
    text-decoration: underline;
}

/* ---------- Larger screens: the form becomes a card ----------- */

@media (min-width: 576px) {
    .auth-shell {
        --auth-gutter: 24px;
    }

    .auth-main {
        padding-block: clamp(32px, 7vh, 72px) 48px;
        background: var(--auth-paper);
    }

    .auth-panel {
        padding: 36px 36px 28px;
        border: 1px solid var(--auth-line);
        border-radius: 16px;
        background: var(--hub-card, #fff);
        box-shadow: 0 1px 2px rgba(21, 32, 43, .04), 0 12px 32px -18px rgba(21, 32, 43, .22);
    }

    .auth-panel--wide {
        max-inline-size: 500px;
    }

    .auth-shell .auth-title {
        font-size: 28px;
    }
}

@media (min-width: 768px) {
    .auth-shell {
        --auth-gutter: max(32px, calc((100% - 1120px) / 2 + 32px));
    }

    .auth-top {
        block-size: 64px;
    }

    .auth-shell .auth-brand {
        font-size: 20px;
    }

    .auth-brand img {
        inline-size: 30px;
        block-size: 30px;
    }
}

/* Very narrow phones: a little more room for the form. */
@media (max-width: 359.98px) {
    .auth-shell {
        --auth-gutter: 12px;
    }

    .auth-shell .auth-title {
        font-size: 24px;
    }
}

/* Forced colours (Windows high contrast): keep the boxes and the busy state visible. */
@media (forced-colors: active) {
    .auth-shell .auth-alert,
    .auth-panel {
        border: 1px solid CanvasText;
    }

    .auth-spinner,
    .auth-google-btn .auth-spinner {
        border-color: ButtonText;
    }

    .auth-or::before,
    .auth-or::after {
        border-color: CanvasText;
    }
}

/* Dark theme — the blue is a link colour in the dark; buttons keep a fill white text can sit on */
.theme-dark .auth-skip { background: #005FAE; }
.theme-dark .auth-shell .auth-submit, .theme-dark .auth-shell .auth-button { background: #005FAE; }
.theme-dark .auth-shell .auth-submit:hover, .theme-dark .auth-shell .auth-button:hover { background: #2E97EC; }
.theme-dark .auth-shell .auth-submit, .theme-dark .auth-shell .auth-button { border-color: #005FAE; }
.theme-dark .auth-shell .auth-submit:hover, .theme-dark .auth-shell .auth-button:hover { border-color: #2E97EC; }
.theme-dark .auth-shell .auth-hej { color: #191712; } /* ink on the yellow bubble, which stays yellow */

/* Dark theme — accent fills keep their light-mode colour, so a white label keeps the contrast it has today; the lifted dark
   accent shades are for text and borders only (generated from every fill that reads an accent token). */
.theme-dark .auth-skip { background: #00558c; }
.theme-dark .auth-shell .auth-input.invalid, .theme-dark .auth-shell .auth-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #b42318; }
.theme-dark .auth-shell .auth-input.invalid:focus, .theme-dark .auth-shell .auth-input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px #b42318; }
.theme-dark .auth-shell .auth-submit, .theme-dark .auth-shell .auth-button { background: #00558c; }
.theme-dark .auth-shell .auth-submit:hover, .theme-dark .auth-shell .auth-button:hover { background: #00416c; }