/* ===========================================================================
   Account pages

   Two layouts share this file:

     .auth-split      login and register: the form beside a panel that says
                      what an account is for. Mirrors home.css and detail.css
                      (Inter, hairlines, 4px corners) so signing up does not
                      feel like leaving the site for a different one.
     .auth-container  the single-card pages (the password reset steps, email
                      preferences, unsubscribe), which have one job each and
                      nothing to pitch.

   The form components further down (.form-group, .form-input, .auth-button
   and friends) are used by both.

   The old version set labels, inputs and buttons in Special Elite and the
   titles in Lacquer. Both are display faces; a typewriter face in a password
   box is the one place legibility matters more than mood. Inter throughout,
   same as the rest of the redesigned site.
   =========================================================================== */

:root {
    --auth-red: #ff0000;
    --auth-red-dim: #cc0000;
    --auth-red-soft: #ff4444;
    --auth-line: rgba(255, 255, 255, 0.10);
    --auth-line-strong: rgba(255, 255, 255, 0.18);
    --auth-surface: #101010;
    --auth-field: #0c0c0c;
    --auth-muted: #8a8a8a;
    --auth-text: #d8d8d8;
    --auth-error: #ff6b6b;
    --auth-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* The fixed header is 89px tall but <main> only reserves 60px (the same
       gap .dp-crumbs in detail.css pads past), so the first thing on each of
       these pages has to clear the difference itself. The old register page
       had its logo cut in half by it. */
    --auth-header-overlap: 29px;
}

.auth-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Turnstile shows nothing unless it needs a tick; then a box above the button. */
.auth-turnstile:not(:empty) {
    margin: 4px 0 16px;
}

/* ---------------------------------------------------------------------------
   Login / register: form + panel
   --------------------------------------------------------------------------- */

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* The panel is second in the DOM, so a screen reader reaches the form
       first; it only sits on the left visually. It holds nothing focusable,
       so tab order is unaffected. */
    grid-template-areas: "panel main";
    min-height: calc(100vh - 60px);
    min-height: calc(100svh - 60px);
    background: #050505;
    font-family: var(--auth-font);
    color-scheme: dark;
}

.auth-main {
    grid-area: main;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--auth-header-overlap) + 3rem) clamp(1.25rem, 4vw, 4rem) 4rem;
    background: #0a0a0a;
    border-left: 1px solid var(--auth-line);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    animation: auth-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

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

.auth-head {
    margin-bottom: 1.75rem;
}

.auth-heading {
    margin: 0 0 0.45rem;
    font-size: clamp(1.8rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

/* A phone gets the panel below the form, so the one-line version of the
   pitch sits here instead. Desktop has the full panel beside it. */
.auth-head-lede {
    display: none;
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #a8a8a8;
}

.auth-switch {
    margin: 0;
    font-size: 0.92rem;
    color: var(--auth-muted);
}

.auth-switch a,
.auth-links a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 0, 0, 0.75);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.auth-switch a:hover,
.auth-links a:hover {
    color: var(--auth-red-soft);
}

/* Google ------------------------------------------------------------------- */

/* Google's dark-theme button (#131314 fill, #8E918F stroke) with the full
   colour mark. The old one was a monochrome Font Awesome glyph in an outlined
   box, which read as a generic secondary button rather than as Google. */
.auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 1rem;
    background: #131314;
    border: 1px solid #8e918f;
    border-radius: 4px;
    color: #e3e3e3;
    font: 500 0.95rem/1.2 var(--auth-font);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.auth-google:hover {
    background: #1d1d1f;
    border-color: #b5b8b6;
}

.auth-google:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.auth-google-g {
    width: 18px;
    height: 18px;
    flex: none;
}

.auth-google-note {
    margin: 0.6rem 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--auth-muted);
}

/* "or" divider -------------------------------------------------------------- */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: #6f6f6f;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--auth-line);
}

/* On register the divider is inside the form, whose flex gap already spaces
   it. */
.auth-form > .auth-divider {
    margin: 0.3rem 0;
}

/* Panel --------------------------------------------------------------------- */

.auth-panel {
    grid-area: panel;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--auth-header-overlap) + 3rem) clamp(2rem, 6vw, 6rem) 3rem;
    background:
        radial-gradient(ellipse 75% 55% at 0% 100%, rgba(255, 0, 0, 0.15), transparent 70%),
        radial-gradient(ellipse 55% 40% at 100% 0%, rgba(255, 0, 0, 0.05), transparent 70%),
        #050505;
}

/* Pinned while a long register form scrolls past it. Only where there is
   room: on a short screen a pinned panel would crop its own content. */
@media (min-width: 961px) and (min-height: 640px) {
    .auth-panel {
        position: sticky;
        top: 60px;
        height: calc(100vh - 60px);
        align-self: start;
    }
}

.auth-panel-inner {
    position: relative;
    z-index: 1;
    max-width: 520px;
    animation: auth-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both;
}

/* The register page renders one panel per audience and hides the rest. */
.auth-panel-inner[hidden] {
    display: none;
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--auth-red-soft);
}

.auth-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--auth-red);
    animation: auth-live 2.4s ease-in-out infinite;
}

@keyframes auth-live {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(255, 0, 0, 0); }
}

.auth-panel-title {
    margin: 0 0 1.1rem;
    font-size: clamp(2.3rem, 4.2vw, 3.75rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: #fff;
}

.auth-panel-lede {
    margin: 0 0 2rem;
    max-width: 34rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: #a8a8a8;
}

.auth-benefits {
    list-style: none;
    display: grid;
    gap: 1.1rem;
    margin: 0 0 2.25rem;
    padding: 0;
}

.auth-benefits li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: start;
    gap: 0.9rem;
}

.auth-benefit-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 0, 0, 0.35);
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.08);
    color: var(--auth-red-soft);
    font-size: 0.9rem;
}

.auth-benefits strong {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.auth-benefit-detail {
    display: block;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--auth-muted);
}

/* The same two figures as the homepage hero. dt comes first in the markup, as
   it must; column-reverse puts the number on top. */
.auth-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.75rem;
    margin: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--auth-line);
}

.auth-stats div {
    display: flex;
    flex-direction: column-reverse;
}

.auth-stats dd {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.auth-stats dt {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--auth-muted);
}

@media (min-width: 961px) and (max-height: 820px) {
    .auth-panel-title { font-size: clamp(2rem, 3.4vw, 3rem); }
    .auth-panel-lede { margin-bottom: 1.5rem; }
    .auth-benefits { gap: 0.8rem; margin-bottom: 1.5rem; }
    .auth-benefit-detail { display: none; }
    .auth-benefits li { align-items: center; }
}

/* Radar --------------------------------------------------------------------- */

/* The site mark, drawn rather than photographed: no stock imagery on these
   pages any more than on the venue pages. Rings, crosshairs, a sweep and a
   few blips, each timed to light as the beam passes over it. */
.auth-radar {
    position: absolute;
    right: -16%;
    bottom: -20%;
    width: clamp(420px, 72%, 660px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 0, 0, 0.16);
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side,
            transparent calc(25% - 1px), rgba(255, 0, 0, 0.14) calc(25% - 1px) 25%,
            transparent 25% calc(50% - 1px), rgba(255, 0, 0, 0.12) calc(50% - 1px) 50%,
            transparent 50% calc(75% - 1px), rgba(255, 0, 0, 0.10) calc(75% - 1px) 75%,
            transparent 75%),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 0, 0, 0.09) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(255, 0, 0, 0.09) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    pointer-events: none;
}

.auth-radar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--auth-red);
    box-shadow: 0 0 14px 3px rgba(255, 0, 0, 0.5);
}

/* Leading edge at 360deg, tail fading behind it, rotating clockwise. */
.auth-radar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg 280deg,
        rgba(255, 0, 0, 0.05) 300deg,
        rgba(255, 0, 0, 0.30) 360deg);
    animation: auth-sweep 6s linear infinite;
}

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

/* Each delay is (angle clockwise from twelve o'clock / 360 x 6s) - 6s, so the
   blip flares on the beam's pass. Move a blip and its delay moves with it. */
.auth-radar-blip {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--auth-red-soft);
    box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.55);
    opacity: 0;
    animation: auth-blip 6s ease-out infinite;
}

.auth-radar-blip:nth-child(1) { left: 28%; top: 40%; animation-delay: -1.09s; } /* 294deg */
.auth-radar-blip:nth-child(2) { left: 42%; top: 20%; animation-delay: -0.25s; } /* 345deg */
.auth-radar-blip:nth-child(3) { left: 18%; top: 62%; animation-delay: -1.84s; } /* 249deg */
.auth-radar-blip:nth-child(4) { left: 60%; top: 30%; animation-delay: -5.56s; } /*  27deg */
.auth-radar-blip:nth-child(5) { left: 40%; top: 58%; animation-delay: -2.15s; } /* 231deg */

@keyframes auth-blip {
    0% { opacity: 0; transform: scale(0.4); }
    3% { opacity: 1; transform: scale(1); }
    45% { opacity: 0.25; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* ---------------------------------------------------------------------------
   Single-card pages (reset steps, email preferences, unsubscribe)
   --------------------------------------------------------------------------- */

.auth-container {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--auth-header-overlap) + 2.5rem) 1rem 3.5rem;
    background:
        radial-gradient(ellipse 900px 600px at 50% -10%, rgba(255, 0, 0, 0.14), transparent 60%),
        #050505;
    font-family: var(--auth-font);
    color-scheme: dark;
}

.auth-box {
    width: 100%;
    max-width: 440px;
    padding: 2.25rem 2rem;
    background: var(--auth-surface);
    border: 1px solid var(--auth-line);
    border-top: 2px solid var(--auth-red);
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    animation: auth-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.auth-title {
    margin: 0 0 1rem;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fff;
}

.auth-intro {
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #a8a8a8;
}

.auth-intro--quiet {
    font-size: 0.85rem;
    color: #777;
}

/* ---------------------------------------------------------------------------
   Form components (both layouts)
   --------------------------------------------------------------------------- */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.form-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--auth-text);
}

.form-optional {
    margin-left: 0.35rem;
    font-weight: 400;
    color: #6f6f6f;
}

.form-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.form-label-link {
    font-size: 0.8rem;
    color: var(--auth-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-label-link:hover {
    color: #fff;
}

/* 1rem on purpose: iOS zooms the page into any input set smaller than 16px. */
.form-input {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0.9rem;
    background-color: var(--auth-field);
    border: 1px solid var(--auth-line-strong);
    border-radius: 4px;
    color: #fff;
    font: 400 1rem/1.4 var(--auth-font);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-input::placeholder {
    color: #5c5c5c;
}

.form-input:hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.3);
}

.form-input:focus {
    outline: none;
    border-color: var(--auth-red);
    background-color: #0f0f0f;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.22);
}

/* Django sets aria-invalid on any field with errors, so the outline follows
   the real error rather than a class the template has to remember. */
.form-input[aria-invalid="true"] {
    border-color: var(--auth-error);
}

.form-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
}

/* Chrome paints autofilled fields pale yellow-blue, which on this background
   is a white bar with white text in it. Password managers fill these two
   forms more than anyone types into them. */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px var(--auth-field) inset;
    caret-color: #fff;
    transition: background-color 9999s ease 0s;
}

.form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #0f0f0f inset, 0 0 0 3px rgba(255, 0, 0, 0.22);
}

select.form-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    cursor: pointer;
}

select.form-input option {
    background: #111;
    color: #fff;
}

.field-help {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #7a7a7a;
}

/* Django renders its password rules as a <ul>. */
.field-help ul {
    margin: 0.15rem 0 0;
    padding-left: 1.05rem;
}

.field-help li {
    margin-bottom: 0.1rem;
}

/* Hints that only matter while you are filling the field in: shown on focus,
   and kept once there is something in it (so they don't vanish from under
   the pointer on the way to the next box) or when the field has an error.
   Still announced on focus: aria-describedby reads hidden targets. */
.form-group--reveal-help .field-help {
    display: none;
}

.form-group--reveal-help:focus-within .field-help,
.form-group--reveal-help:has(.form-input:valid) .field-help,
.form-group--reveal-help.has-error .field-help {
    display: block;
}

.field-error {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--auth-error);
}

.field-error p {
    margin: 0;
}

.field-error p + p {
    margin-top: 0.2rem;
}

.form-errors {
    position: relative;
    padding: 0.8rem 1rem 0.8rem 2.6rem;
    border: 1px solid rgba(255, 77, 77, 0.35);
    border-radius: 4px;
    background: rgba(255, 0, 0, 0.08);
    color: #ffc9c9;
    font-size: 0.88rem;
    line-height: 1.5;
}

.form-errors::before {
    content: '!';
    position: absolute;
    left: 0.9rem;
    top: 0.95rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--auth-error);
    color: #1a0000;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1rem;
    text-align: center;
}

.form-errors p {
    margin: 0;
}

.form-errors p + p {
    margin-top: 0.25rem;
}

/* Show/hide password -------------------------------------------------------- */

.password-field {
    position: relative;
}

/* Room for the button so a long password never runs underneath it. */
.password-field .form-input {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 4px;
    color: #777;
    font-size: 0.95rem;
    cursor: pointer;
}

/* An author `display` beats the UA's [hidden] rule, and this button is
   rendered hidden until auth.js confirms it can work. */
.password-toggle[hidden] {
    display: none;
}

.password-toggle:hover {
    color: #fff;
}

.password-toggle:focus-visible {
    outline: 2px solid var(--auth-red);
    outline-offset: -2px;
}

/* Newsletter consent -------------------------------------------------------- */

.form-consent {
    padding: 0.9rem 1rem;
    border: 1px solid var(--auth-line);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.form-consent:hover {
    border-color: var(--auth-line-strong);
}

.form-consent:has(.form-checkbox:checked) {
    border-color: rgba(255, 0, 0, 0.45);
    background: rgba(255, 0, 0, 0.06);
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--auth-text);
}

.consent-label strong {
    display: block;
    font-weight: 600;
    color: #fff;
}

.consent-help {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--auth-muted);
}

/* Big enough to hit on a phone, and accent-coloured rather than browser blue. */
.form-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0.1rem 0 0;
    accent-color: var(--auth-red);
    cursor: pointer;
}

/* Buttons and links --------------------------------------------------------- */

.auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 50px;
    margin-top: 0.35rem;
    padding: 0.8rem 1.25rem;
    background: var(--auth-red);
    border: 0;
    border-radius: 4px;
    color: #fff;
    font: 700 1rem/1.2 var(--auth-font);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.auth-button:hover {
    background: var(--auth-red-dim);
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.25);
}

.auth-button:active {
    transform: translateY(1px);
    box-shadow: none;
}

.auth-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.auth-button:disabled {
    background: #7a1a1a;
    box-shadow: none;
    transform: none;
    cursor: progress;
}

.auth-button--link {
    text-decoration: none;
}

.auth-links {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--auth-muted);
}

.auth-legal {
    margin: 0.25rem 0 0;
    text-align: center;
    font-size: 0.76rem;
    line-height: 1.55;
    color: #6f6f6f;
}

.auth-legal a {
    color: #a0a0a0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-legal a:hover {
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------- */

@media (max-width: 960px) {
    .auth-split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main" "panel";
        min-height: 0;
    }

    .auth-main {
        align-items: flex-start;
        padding: calc(var(--auth-header-overlap) + 1.75rem) 1.25rem 2.75rem;
        border-left: 0;
    }

    .auth-card {
        max-width: 460px;
    }

    .auth-head-lede {
        display: block;
    }

    .auth-panel {
        justify-content: flex-start;
        padding: 2.75rem 1.25rem 3.25rem;
        border-top: 1px solid var(--auth-line);
    }

    .auth-panel-inner {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
    }

    .auth-panel-title {
        font-size: clamp(1.9rem, 8vw, 2.6rem);
    }

    .auth-radar {
        width: 420px;
        right: -190px;
        bottom: -210px;
        opacity: 0.6;
    }

    /* Nobody on a login page needs persuading; on a phone the panel would
       only be something to scroll past on the way to the footer. */
    .auth-split--login .auth-panel {
        display: none;
    }

    .auth-split--login {
        min-height: calc(100svh - 60px);
    }
}

@media (max-width: 480px) {
    .auth-box {
        padding: 1.75rem 1.25rem;
    }

    .auth-title {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .auth-box,
    .auth-panel-inner,
    .auth-eyebrow::before,
    .auth-radar::after,
    .auth-radar-blip {
        animation: none;
    }

    .auth-radar-blip {
        opacity: 0.6;
    }
}