/* ─────────────────────────────────────────────────────────────────────
   ConferenceApp · Blockchain Education 2026
   Author: Viktor Georgiev
   ───────────────────────────────────────────────────────────────────── */
/* ============================================================
   authStyle.css — the shared styles for Login, Verification, Register and
   AccessDenied. It replaced the separate login and register stylesheets.

   The palette and the typography come from mainStyle.css
   (--bg, --panel, --text, --muted, --line, --accent), so there is no :root of
   its own here. The fallbacks inside each var(...) keep the page readable if
   mainStyle.css fails to load.
   ============================================================ */

.auth-page {
    --auth-top: 84px;
    background: var(--bg, #050505);
    color: var(--text, #f4f2ec);
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 300;
}

.auth-split {
    display: grid;
    grid-template-columns: 1fr 0.56fr;
    min-height: calc(100vh - var(--auth-top));
}

/* The panel is the same width on every auth page.

   The pages render inside <main class="site-main">, between the sticky
   .topbar and the footer, so a bare 100vh is used NOWHERE. --auth-top is the
   height of that bar: check it against .topbar in mainStyle.css if its padding
   ever changes. */
.auth-page--wide .auth-split { grid-template-columns: 1fr 0.56fr; }

/* ── The form column ──────────────────────────────────────── */
.auth-col {
    display: flex;
    align-items: center;
    padding: 64px 6vw 96px;
}

.auth-form-wrap {
    width: 100%;
    max-width: 430px;
}

.auth-page--wide .auth-form-wrap { max-width: 520px; }

/* A focused field draws a red rule in from the left. */
@keyframes authFieldLine {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.auth-field { position: relative; }

.auth-field::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent, #ff3636);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

.auth-field:focus-within::after {
    animation: authFieldLine 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* With an error message present, that rule would land below it. */
.auth-field:has(.error-message:not(:empty))::after { display: none; }

/* For the OTP field the block also contains the Ctrl + V hint, and the rule
   at its bottom edge ran straight through that text. Here it is moved to sit
   under the code boxes themselves. */
.auth-field:has(.auth-otp)::after { display: none; }

.auth-otp-line { position: relative; }

.auth-otp-line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* This was -2px, which left the rule all but touching the bottom edge of
       the boxes. The hint below it sits 16px from the grid, so -8px splits
       that gap evenly — 8px down to the rule, 8px on to the text — rather than
       pushing the rule down and creating a new crowding against the hint. */
    bottom: -8px;
    height: 2px;
    background: var(--accent, #ff3636);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

.auth-otp-line:focus-within::after {
    animation: authFieldLine 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 44px;
}

.auth-brand img {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(var(--logo-invert, 1));
    opacity: 0.92;
}

.auth-brand-rule {
    width: 1px;
    height: 22px;
    background: rgba(var(--ink), 0.14);
}

.auth-step {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted, #a7a39b);
}

.auth-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
}

.auth-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--accent, #ff3636);
}

.auth-title {
    margin: 0 0 10px;
    max-width: 14ch;
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 600;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.12;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    text-wrap: balance;
}

.auth-page--wide .auth-title { font-size: clamp(38px, 4vw, 48px); }

.auth-title-rule {
    display: block;
    width: 56px;
    height: 2px;
    background: var(--accent, #ff3636);
    margin-bottom: 30px;
}

/* ── The stepper (registration, three phases) ─────────────── */
.auth-stepper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 34px;
    list-style: none;
    padding: 0;
}

.auth-stepper li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 2px solid rgba(var(--ink), 0.12);
}

.auth-stepper b {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--text-dim);
}

.auth-stepper span {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.auth-stepper li.is-done { border-top-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.auth-stepper li.is-done b { color: var(--accent, #ff3636); }
.auth-stepper li.is-done span { color: var(--muted, #a7a39b); }

.auth-stepper li.is-current { border-top-color: var(--accent, #ff3636); }
.auth-stepper li.is-current b { color: var(--accent, #ff3636); }
.auth-stepper li.is-current span { color: var(--text, #f4f2ec); }

/* ── Messages ─────────────────────────────────────────────── */
.auth-alert,
.auth-notice,
.auth-ok {
    padding: 12px 16px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.5;
    animation: authFadeIn 0.25s ease-out;
}

.auth-alert {
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-left: 3px solid var(--accent, #ff3636);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: #ff8f8f;
}

.auth-notice {
    border: 1px solid rgba(var(--ink), 0.1);
    border-left: 3px solid var(--muted, #a7a39b);
    background: rgba(var(--ink), 0.04);
    color: var(--muted, #a7a39b);
}

.auth-ok {
    border: 1px solid rgba(40, 167, 69, 0.4);
    border-left: 3px solid #28a745;
    background: rgba(40, 167, 69, 0.08);
    color: #6fcf8b;
}

.auth-alert:empty,
.auth-notice:empty,
.auth-ok:empty { display: none; }

.auth-alert ul,
.auth-ok ul,
.auth-notice ul { list-style: none; padding: 0; margin: 0; }

@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.error-message {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #ff8f8f;
}

/* ── The form ─────────────────────────────────────────────── */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.auth-form--long { gap: 26px; }

.auth-form.is-blocked {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.4);
}

.auth-field label,
.auth-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted, #a7a39b);
}

.auth-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.auth-field-head label { margin-bottom: 0; }

.required { color: var(--accent, #ff3636); }

.auth-reveal {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
}

.auth-input,
.auth-page select,
.auth-page textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 14px;
    background: var(--panel, #0b0b0b);
    border: 1px solid rgba(var(--ink), 0.12);
    border-radius: 0;
    color: var(--text, #f4f2ec);
    font-family: inherit;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0.02em;
    caret-color: var(--accent, #ff3636);
    transition: border-color 0.2s ease;
    touch-action: manipulation;
}

.auth-input { min-height: 50px; }
.auth-input.is-secret { letter-spacing: 0.08em; }
.auth-input::placeholder { color: var(--text-dim); }

.auth-input:focus,
.auth-page select:focus,
.auth-page textarea:focus {
    outline: none;
    border-color: var(--accent, #ff3636);
}

.auth-input.is-locked {
    background: var(--bg);
    color: var(--muted, #a7a39b);
    cursor: not-allowed;
}

.auth-page select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted, #a7a39b) 50%),
                      linear-gradient(135deg, var(--muted, #a7a39b) 50%, transparent 50%);
    background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.auth-page select option { background: var(--panel, #0b0b0b); color: var(--text, #f4f2ec); }

.auth-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.auth-grid-2 .span-2 { grid-column: span 2; }

/* The participation form: tiles rather than a dropdown */
.auth-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.auth-choice label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 14px;
    background: var(--panel, #0b0b0b);
    border: 1px solid rgba(var(--ink), 0.12);
    color: var(--muted, #a7a39b);
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.auth-choice input { position: absolute; opacity: 0; pointer-events: none; }

.auth-choice label::before {
    content: "";
    width: 8px;
    height: 8px;
    background: rgba(var(--ink), 0.2);
    flex: none;
    transition: background 0.2s ease;
}

.auth-choice label:hover { border-color: rgba(var(--ink), 0.28); }

.auth-choice input:checked + span,
.auth-choice label:has(input:checked) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent, #ff3636);
    color: var(--text, #f4f2ec);
}

.auth-choice label:has(input:checked)::before { background: var(--accent, #ff3636); }

.auth-choice input:focus-visible + span { outline: 2px solid var(--accent, #ff3636); outline-offset: 2px; }

/* Checkboxes */
.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text, #f4f2ec);
    cursor: pointer;
}

.auth-check input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--accent, #ff3636);
    flex: none;
    cursor: pointer;
}

.auth-check a { color: var(--accent, #ff3636); text-decoration: underline; }

.auth-agreements { display: flex; flex-direction: column; gap: 16px; }

.auth-legal {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted, #a7a39b);
}

/* ── The paper: the drag-and-drop zone ─────────────────────── */
.auth-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 8px 0 16px;
    background: var(--panel, #0b0b0b);
    border: 1px dashed rgba(var(--ink), 0.18);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

/* The button that clears the chosen file sits below the zone and appears
   only when there is one; the page's script toggles its `hidden`. */
.auth-drop-clear {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 7px 12px;
    min-height: 34px;
    background: transparent;
    border: 1px solid rgba(var(--ink), 0.14);
    border-radius: 0;
    color: var(--muted, #a7a39b);
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.auth-drop-clear svg { width: 13px; height: 13px; flex: none; }

.auth-drop-clear:hover {
    color: var(--accent, #ff3636);
    border-color: var(--accent, #ff3636);
}

/* The file error (size or format), below the zone, in the accent colour. */
.auth-field-err {
    display: block;
    margin-top: 8px;
    color: var(--accent, #ff3636);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.45;
}

.auth-drop-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.auth-drop-head label { margin-bottom: 0; }

.auth-drop:hover { border-color: rgba(var(--ink), 0.3); }

.auth-drop.is-dragging {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: var(--accent, #ff3636);
}

.auth-drop > svg { flex: none; stroke: var(--text-dim); }
.auth-drop.is-dragging > svg { stroke: #ffb3b3; }
.auth-drop.has-file > svg { stroke: var(--text, #f4f2ec); }

.auth-drop-label {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-drop.is-dragging .auth-drop-label { color: #ffb3b3; }
.auth-drop.has-file .auth-drop-label { color: var(--text, #f4f2ec); }

.auth-drop-btn {
    display: flex;
    align-items: center;
    flex: none;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(var(--ink), 0.2);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text, #f4f2ec);
}

/* The real input is hidden: the whole zone is its label. */
.auth-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── The verification note (student / journalist) ──────────── */
/* `.auth-callout` sets `display: flex`, and an author-level rule beats the
   user agent's `[hidden] { display: none }`. So `hidden="hidden"` had no
   effect at all and the note was shown to lecturers and online participants
   too, not only to students and journalists. The global rule below also
   protects any future element with an explicit display. */
[hidden] { display: none !important; }

.auth-callout {
    display: flex;
    gap: 14px;
    margin-top: -8px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-left: 3px solid var(--accent, #ff3636);
    animation: authFadeIn 0.25s ease-out;
}

.auth-callout > svg { flex: none; margin-top: 3px; stroke: var(--accent, #ff3636); }

.auth-callout > div { display: flex; flex-direction: column; gap: 5px; }

/* "International participant": the row is styled as a field rather than as a
   stray checkbox among the personal details. */
.auth-toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 16px;
    background: var(--panel, #0b0b0b);
    border: 1px solid rgba(var(--ink), 0.12);
    cursor: pointer;
    transition: border-color 0.18s ease;
}

.auth-toggle-row:hover { border-color: rgba(var(--ink), 0.24); }

.auth-toggle-row > svg { flex: none; stroke: var(--text-dim); }

.auth-toggle-row > span {
    flex: 1;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text, #f4f2ec);
}

.auth-toggle-row input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent, #ff3636);
    flex: none;
    cursor: pointer;
}

.auth-toggle-row:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.auth-toggle-row:has(input:checked) > svg { stroke: var(--accent, #ff3636); }

.auth-callout b {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
}

.auth-callout span { font-size: 14px; line-height: 1.5; color: var(--text-soft); }

/* ── The summary (phase 03) ───────────────────────────────── */
.auth-summary {
    margin: 0;
    border-top: 1px solid rgba(var(--ink), 0.08);
}

.auth-summary > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(var(--ink), 0.06);
}

.auth-summary dt {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.auth-summary dd {
    margin: 0;
    font-size: 14px;
    color: var(--text, #f4f2ec);
    text-align: right;
}

/* Buttons */
.auth-actions-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-top: 4px;
}

.auth-submit {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0 20px;
    background: var(--accent, #ff3636);
    border: 0;
    border-radius: 0;
    color: var(--on-accent);
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease;
}

.auth-submit:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.auth-submit:active { background: var(--accent-active); }
.auth-submit:disabled { opacity: 0.45; cursor: not-allowed; }

.auth-back {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 18px;
    background: transparent;
    border: 1px solid rgba(var(--ink), 0.2);
    color: var(--text, #f4f2ec);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    flex: none;
}

.auth-back:hover { border-color: var(--text, #f4f2ec); color: var(--text, #f4f2ec); text-decoration: none; }

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

.auth-btn,
.auth-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}

.auth-btn { background: var(--accent, #ff3636); color: var(--on-accent); }
.auth-btn:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }

.auth-btn-outline { border: 1px solid rgba(var(--ink), 0.2); color: var(--text, #f4f2ec); }
.auth-btn-outline:hover { border-color: var(--text, #f4f2ec); color: var(--text, #f4f2ec); text-decoration: none; }

.auth-page :focus-visible {
    outline: 2px solid var(--accent, #ff3636);
    outline-offset: 2px;
}

/* ── OTP ──────────────────────────────────────────────────── */
.auth-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
    margin-bottom: 26px;
    border-top: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.auth-meta p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted, #a7a39b); }
.auth-meta strong { color: var(--text, #f4f2ec); font-weight: 400; }

.auth-meta-timer {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.auth-timer {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--accent, #ff3636);
}

.auth-otp {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.auth-otp-box {
    width: 100%;
    height: 62px;
    padding: 0;
    text-align: center;
    background: var(--panel, #0b0b0b);
    border: 1px solid rgba(var(--ink), 0.12);
    border-radius: 0;
    color: var(--text, #f4f2ec);
    font-family: inherit;
    font-weight: 400;
    font-size: 26px;
    caret-color: var(--accent, #ff3636);
    box-sizing: border-box;
    touch-action: manipulation;
    transition: border-color 0.2s ease;
}

.auth-otp-box:focus { outline: none; border-color: var(--accent, #ff3636); }

.auth-resend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.auth-resend {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    color: var(--text, #f4f2ec);
    text-decoration: underline;
    cursor: pointer;
}

.auth-resend:disabled { color: var(--text-dim); text-decoration: none; cursor: default; }

/* The Ctrl + V hint, on a desktop only (see the media query below). */
.auth-paste-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    line-height: 1.45;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--text-dim);
}

.auth-paste-hint svg { flex: none; }

.auth-note { margin: 0; font-size: 13px; color: var(--muted, #a7a39b); }

/* ── The text of the 403 page ─────────────────────────────── */
.auth-body {
    margin: 0 0 26px;
    max-width: 40ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted, #a7a39b);
}

/* ── The footer ───────────────────────────────────────────── */
.auth-footer {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.auth-footer p { margin: 0; font-size: 15px; color: var(--muted, #a7a39b); }
.auth-footer a { color: var(--accent, #ff3636); text-decoration: none; }
.auth-footer a:hover { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; }

/* ── The image column ─────────────────────────────────────── */
.auth-visual {
    --auth-frame-inset: 16px;
    position: sticky;
    top: var(--auth-top);
    align-self: start;
    width: 100%;
    height: calc(100vh - var(--auth-top));
    overflow: hidden;
    border-left: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.auth-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 28%;
    filter: grayscale(1) contrast(1.35) brightness(0.5);
}

/* Layer 1 — a red tint over the top */
.auth-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, transparent) 0%, rgba(255, 54, 54, 0) 55%);
    mix-blend-mode: var(--blend-tint, overlay);
}

/* Layer 2 — fading into the background on the left */
.auth-visual-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg, #050505) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 40%, color-mix(in srgb, var(--bg) 25%, transparent) 100%);
}

/* Layer 3 — the vignette and the scanlines */
.auth-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 70% 25%, rgba(0, 0, 0, 0) 28%, color-mix(in srgb, var(--bg) 88%, transparent) 100%),
        repeating-linear-gradient(0deg, rgba(var(--ink), 0.04) 0px, rgba(var(--ink), 0.04) 1px, transparent 1px, transparent 4px);
}

/* Layer 4 — a fine technical grid over the photograph, not animated */
.auth-visual-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(var(--ink), 0.05) 1px, transparent 1px) 0 0 / 100% 48px,
        linear-gradient(90deg, rgba(var(--ink), 0.05) 1px, transparent 1px) 0 0 / 48px 100%;
    mix-blend-mode: var(--blend-soft, soft-light);
    pointer-events: none;
}

/* Layer 5 — an inset frame with a red corner mark at the top left. Inset
   rather than a fixed band, so that it behaves the same at any width. */
.auth-visual-edge {
    position: absolute;
    inset: var(--auth-frame-inset);
    border: 1px solid rgba(var(--ink), 0.14);
    pointer-events: none;
}

.auth-visual-edge::before,
.auth-visual-edge::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    background: var(--accent, #ff3636);
}

.auth-visual-edge::before { width: 26px; height: 2px; }
.auth-visual-edge::after  { width: 2px; height: 26px; }

@keyframes authPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.7); }
}

/* An entrance animation on every step. The pages are rendered on the server,
   so the element is new each time and the animation starts by itself. */
@keyframes authStepIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes authGhostIn {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: none; }
}

/* A slow breath across the letters of the wordmark, not a sweeping
   glint. */
@keyframes authShimmer {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
}

.auth-step-in {
    position: relative;
    animation: authStepIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* The outlined step number behind the heading. It is NOT shown on the
   registration page: the stepper already carries the number and the two would
   overlap. */
.auth-ghost {
    position: absolute;
    top: -10px;
    right: 0;
    font-size: 128px;
    font-weight: 600;
    line-height: 0.8;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--ink), 0.08);
    pointer-events: none;
    animation: authGhostIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.auth-page--wide .auth-ghost { display: none; }

@media (prefers-reduced-motion: reduce) {
    .auth-ladder li.is-current span::after { animation: none; }
    .auth-field:focus-within::after { animation: none; transform: scaleX(1); }
    .auth-otp-line:focus-within::after { animation: none; transform: scaleX(1); }
    .auth-callout { animation: none; }
    .auth-handoff.is-visible,
    .auth-handoff img,
    .auth-handoff-eyebrow,
    .auth-handoff-title,
    .auth-handoff-note { animation: none; }
    .auth-handoff-bar i { animation: none; transform: scaleX(1); }
    .auth-step-in,
    .auth-ghost {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .auth-wordmark { animation: none; }
}

.auth-visual-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 36px 44px;
    z-index: 1;
}

.auth-visual-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--ink), 0.14);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.auth-wordmark {
    background: linear-gradient(100deg, var(--muted) 0%, var(--text) 42%, rgb(var(--ink)) 50%, var(--text) 58%, var(--muted) 100%) 0 0 / 300% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: authShimmer 14s ease-in-out infinite;
}

.auth-visual-top b {
    flex: none;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--accent, #ff3636);
    text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}

.auth-visual-bottom { display: flex; flex-direction: column; gap: 34px; }

.auth-visual-claim {
    max-width: 22ch;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

/* The ladder: register → code → profile */
.auth-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.auth-ladder li {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid rgba(var(--ink), 0.12);
}

.auth-ladder b {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--text-dim);
}

.auth-ladder span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted, #a7a39b);
}

.auth-ladder span::after {
    content: "";
    width: 6px;
    height: 6px;
    background: transparent;
    flex: none;
}

.auth-ladder li.is-current { border-top-color: color-mix(in srgb, var(--accent) 60%, transparent); }
/* On the 403 page there is no current step: the three rows are the actions
   available instead. */
.auth-ladder--routes li { border-top-color: rgba(var(--ink), 0.16); }
.auth-ladder--routes b { color: var(--accent, #ff3636); }
.auth-ladder--routes span { color: var(--text, #f4f2ec); }
.auth-ladder--routes span::after { display: none; }

/* ── The hand-off to the profile ─────────────── */
/* Shown on the submit of the last step and held until the server answers with
   a redirect to /Profile, so that the wait is never a blank screen. */
.auth-handoff {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bg, #050505);
}

.auth-handoff.is-visible { display: flex; animation: authFadeQuick 0.26s ease both; }

.auth-handoff-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    text-align: center;
}

.auth-handoff img {
    height: 30px;
    width: auto;
    filter: brightness(0) invert(var(--logo-invert, 1));
    opacity: 0.92;
    animation: authHandRise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.auth-handoff-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
    animation: authHandRise 0.44s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s both;
}

.auth-handoff-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--accent, #ff3636);
}

.auth-handoff-title {
    margin: 0;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    animation: authHandRise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}

.auth-handoff-bar {
    display: block;
    width: 240px;
    max-width: 62vw;
    height: 2px;
    background: rgba(var(--ink), 0.14);
    overflow: hidden;
}

.auth-handoff-bar i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--accent, #ff3636);
    transform-origin: left;
    animation: authHandBar 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.auth-handoff-note {
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    animation: authHandRise 0.5s ease 0.16s both;
}

@keyframes authFadeQuick { from { opacity: 0; } to { opacity: 1; } }
@keyframes authHandRise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes authHandBar   { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.auth-ladder li.is-current b { color: var(--accent, #ff3636); }
.auth-ladder li.is-current span { color: var(--text, #f4f2ec); }
.auth-ladder li.is-current span::after {
    background: var(--accent, #ff3636);
    animation: authPulse 2.6s ease-in-out infinite;
}

/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .auth-split,
    .auth-page--wide .auth-split { grid-template-columns: 1fr 0.46fr; }
    .auth-col { padding: 56px 40px 72px; }
    .auth-visual-inner { padding: 28px 24px 32px; }
    .auth-visual-bottom { gap: 22px; }
    .auth-ladder li { padding: 11px 0; }
}

/* ── Phone ────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .auth-split,
    .auth-page--wide .auth-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .auth-visual {
        position: relative;
        top: 0;
        order: -1;
        height: 190px;
        border-left: 0;
        border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
    }

    .auth-visual img { object-position: 50% 30%; }

    .auth-visual-fade {
        background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 35%, transparent) 0%, color-mix(in srgb, var(--bg) 90%, transparent) 100%);
    }

    .auth-visual::after {
        background:
            radial-gradient(120% 100% at 50% 0%, rgba(0, 0, 0, 0) 40%, color-mix(in srgb, var(--bg) 70%, transparent) 100%),
            repeating-linear-gradient(0deg, rgba(var(--ink), 0.035) 0px, rgba(var(--ink), 0.035) 1px, transparent 1px, transparent 4px);
    }

    .auth-visual-inner { padding: 18px 22px; }
    .auth-visual-grid { background-size: 100% 32px, 32px 100%; }
    .auth-visual { --auth-frame-inset: 10px; }
    .auth-visual-top { font-size: 10px; }
    .auth-visual-bottom { gap: 14px; }
    .auth-visual-claim { max-width: none; font-size: 20px; }

    /* On a phone the ladder becomes one horizontal line. */
    .auth-ladder { flex-direction: row; gap: 8px; }

    /* In the registration the stepper already shows the progress; the ladder
       would be the same bar twice, one under the other. */
    .auth-page--wide .auth-ladder { display: none; }
    .auth-ladder li {
        flex: 1;
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 8px 0 0;
    }
    .auth-ladder span { font-size: 11px; letter-spacing: 0.08em; }
    .auth-ladder span::after { display: none; }

    .auth-col,
    .auth-page--wide .auth-col { padding: 26px 22px 48px; }

    .auth-form-wrap,
    .auth-page--wide .auth-form-wrap { max-width: none; }

    .auth-brand { margin-bottom: 28px; }
    .auth-title { font-size: 38px; line-height: 1.06; }
    .auth-page--wide .auth-title { font-size: 34px; }

    .auth-stepper { gap: 6px; margin-bottom: 28px; }
    .auth-stepper span { font-size: 10px; letter-spacing: 0.06em; }

    .auth-grid-2,
    .auth-choice { grid-template-columns: 1fr; gap: 16px; }
    .auth-grid-2 .span-2 { grid-column: auto; }
    .auth-choice { gap: 10px; }

    .auth-otp { gap: 8px; }
    .auth-otp-box { height: 52px; font-size: 22px; }
    /* The hint is dropped on a phone, but the rule still has to sit under the
       code boxes. */
    .auth-otp-line::after { bottom: -8px; }

    .auth-ghost { top: -6px; font-size: 76px; }

    /* A phone has no keyboard Ctrl + V, so the line is dropped. */
    .auth-paste-hint { display: none; }

    .auth-drop { padding: 0 8px 0 14px; }
    .auth-drop-label { font-size: 13px; }
    .auth-drop-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .auth-callout { padding: 14px; margin-top: 0; }
    .auth-toggle-row { padding: 0 14px; }

    .auth-actions .auth-btn,
    .auth-actions .auth-btn-outline { flex: 1 1 100%; justify-content: center; }
}

/* On a very small screen, the OTP boxes on two rows beat one cramped
   row. */
@media (max-width: 380px) {
    .auth-otp { grid-template-columns: repeat(3, 1fr); }
    .auth-otp-line::after { display: none; }
    .auth-ghost { display: none; }
}