/*
 * X-Factura - the access pages (Design Handoff v3, dist/login.html and
 * login.css): login, registration, "Passwort vergessen", "Passwort
 * zurücksetzen", the password confirmation, the code entry of two-factor
 * authentication and its setup in "Mein X-Factura". Loaded by
 * resources/views/auth/layout.blade.php only; header and footer are the
 * application's own (layouts.app, css/app.css).
 *
 * The dark panel is an inverse surface: it sets the shared semantic tokens
 * (css/app.css, @layer tokens) to the colours of the v3 panel, and the
 * shared controls inside it - line fields (.lf), .check, .badge, links and
 * focus rings - take those colours by themselves. Its buttons (.primary,
 * .btn, .btn--danger, .link-button) are those of the one button system: the
 * panel is a [data-surface="dark"] surface, for which app.css derives the
 * --button-* tokens from the panel's own tokens. No button has a palette of
 * its own here: when the shared button tokens change, the panel's buttons
 * follow.
 */

@layer pages {
    /* The calm, slightly cooler page of v3 (#fafbfc); dark theme unchanged.
       Muted text on it takes the darker tone the app uses on tinted
       surfaces (--muted-canvas) - also in the fixed, translucent footer,
       behind which the dark panel may lie on a short screen. */
    body.auth-page { --paper: color-mix(in srgb, var(--canvas) 40%, var(--sheet)); --muted: var(--muted-canvas); }
    .auth-page main { display: grid; align-items: center; }

    .auth-layout {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: clamp(40px, 7vw, 85px);
        width: min(1040px, 90%); margin: 0 auto; padding: 48px 0;
    }

    /* ------------------------------------------------ the introduction */
    .auth-intro h1 { margin: 24px 0; font-size: clamp(36px, 4vw, 52px); line-height: 1.12; letter-spacing: -2px; }
    .auth-intro h1 .auth-dot { color: var(--accent); }
    .auth-intro__lead { color: var(--muted); font-size: 17px; line-height: 1.8; }
    .auth-intro__note { display: flex; align-items: center; gap: 16px; margin-top: 64px; padding-top: 25px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.6; }
    .auth-intro__mark { flex: none; width: 30px; height: auto; opacity: 0.45; }

    /* --------------------------------------------- the inverse surface */
    .auth-panel {
        color-scheme: dark;

        /* v3 panel: #151621 with a violet glow top right, text #f3f3fa,
           muted #a5a7bb, hairlines #343646, field rules #666980, error
           #ffb2b2, the green dot #a2c9bb. Links and focus: the accent
           #7239ea stepped for the dark panel (DESIGN.md, "Farben"). */
        --paper: #151621;
        --sheet: #151621;
        --sheet-2: #1c1d2d;
        --canvas: #1c1d2d;
        --pale: #262837;
        --ink: #f3f3fa;
        --ink-2: #dadbec;
        --muted: #a5a7bb;
        --muted-canvas: #a5a7bb;
        --muted-selected: #b4b6c7;
        --faint: #8d90a5;
        --line: #343646;
        --line-strong: #666980;
        --rule: #343646;
        --rule-2: #515466;
        --field-border: #8d90a5;
        --accent: #c4b1ff;
        --accent-hover: #e8e0ff;
        --accent-soft: #262837;
        --accent-ink: #261a47;
        --row-tint: #1c1d2d;
        --ok: #a2c9bb;
        --ok-soft: rgb(162 201 187 / 12%);
        --warn: #f2cf8f;
        --warn-soft: rgb(242 207 143 / 12%);
        --danger: #ffb2b2;
        --danger-soft: rgb(255 178 178 / 10%);
        --info-soft: #1c1d2d;
        --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
        --control-hover: #262837;
        --control-selected: #262837;
        --control-border: #515466;

        position: relative; min-height: 490px; padding: 32px 36px 24px;
        border: 1px solid #303244; border-radius: 24px;
        background: radial-gradient(ellipse at 100% 0%, #282a44 0, transparent 65%), var(--sheet);
        color: var(--ink);
        box-shadow: 0 26px 60px -30px rgb(22 24 45 / 40%);
    }

    .auth-panel__top { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; color: var(--muted); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; }
    .auth-panel__mark { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #55576e; border-radius: 7px; color: var(--ink-2); }
    .auth-panel__mark .icon { width: 13px; height: 13px; }
    .auth-panel__step { margin-left: auto; white-space: nowrap; }
    .auth-panel:has(.auth-back) .auth-panel__top { margin-bottom: 35px; }

    .auth-panel h2 { margin: 0 0 15px; font-size: 26px; line-height: 1.25; letter-spacing: -0.7px; hyphens: auto; overflow-wrap: break-word; }
    /* The code steps: a little smaller, as in v3 (#otp-title). */
    .auth-panel:has([data-otp]) h2 { font-size: 23px; }
    .auth-panel p { color: var(--muted); font-size: 13px; line-height: 1.7; }
    .auth-panel p strong { color: var(--ink); font-weight: 400; }
    /* Links only: a button keeps the colours of the button system on hover. */
    .auth-panel a:not(.btn, .primary, .link-button):hover { color: var(--accent-hover); }

    .auth-back { display: inline-flex; align-items: center; gap: 6px; margin: -16px 0 23px; color: var(--accent); font-size: 12px; text-decoration: none; }
    .auth-back .icon { width: 14px; height: 14px; }

    .auth-notice { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet-2); color: var(--ink-2); font-size: 13px; line-height: 1.55; }
    .auth-notice .icon { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--ok); }
    .auth-notice--error .icon { color: var(--danger); }
    .auth-notice--error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); }

    /* The shared line fields, a little more air between them than in the editor. */
    .auth-form { display: grid; gap: 18px; margin-top: 24px; }
    .auth-form .lf__control { font-size: 16px; }
    .auth-form .primary { margin-top: 6px; }
    .auth-form .check { color: var(--muted); font-size: 13px; }
    .auth-form .check__hint { color: var(--faint); }

    .auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 22px; font-size: 13px; }
    .auth-links a { text-decoration: none; }
    .auth-links a:hover { text-decoration: underline; }
    .auth-panel .auth-links span { color: var(--muted); }

    .auth-panel__bottom { display: flex; align-items: center; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
    .auth-panel__dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }

    /* ------------------------------------------ the code entry (v3 OTP) */
    .otp-stage { position: relative; display: grid; place-items: center; height: 214px; margin-top: 4px; }
    .otp-row { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: 9px; justify-content: center; width: 100%; }
    .otp-digit {
        box-sizing: border-box; width: 100%; height: 62px; padding: 0;
        border: 1px solid var(--rule-2); border-radius: 14px;
        background: linear-gradient(150deg, color-mix(in srgb, var(--ink) 14%, var(--sheet)), color-mix(in srgb, var(--ink) 7%, var(--sheet)));
        color: var(--ink); caret-color: var(--accent);
        font: 400 27px/1 var(--font-sans); text-align: center;
        box-shadow: 0 5px 14px rgb(0 0 0 / 13%); outline: none;
    }
    .otp-digit:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
    .otp-digit[aria-invalid="true"] { border-color: var(--danger); }
    .otp-digit[readonly] { cursor: default; }
    .otp-orbit { position: absolute; width: 174px; height: 174px; border: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); border-radius: 50%; opacity: 0; transition: opacity 0.25s; }
    .otp-orbit::after { content: ""; position: absolute; inset: 9px; border: 1px dashed color-mix(in srgb, var(--muted) 27%, transparent); border-radius: 50%; }
    .otp-core { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 20px var(--accent); opacity: 0; }
    .otp-stage.is-checking .otp-orbit, .otp-stage.is-checking .otp-core { opacity: 1; }
    .otp-status { min-height: 21px; margin: -2px 0 23px; font-size: 12px; text-align: center; }
    .auth-panel .otp-status.is-error { color: var(--danger); }
    /* Without JavaScript: the single field the server reads, and a visible
       button. With it (otp-input.js) six fields that send by themselves; the
       button stays for screen readers and the Enter key. */
    .otp-fallback { max-width: 240px; margin: 0 auto; }
    .otp-fallback .lf__control { font-size: 22px; letter-spacing: 6px; text-align: center; }
    .otp-stage:not(.is-enhanced) { height: auto; margin: 30px 0 18px; }
    .otp-enhanced [data-otp-submit]:not(:focus-visible) { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

    /* The switch below a code form: a .link-button (colour and focus from the
       button system), placed and quieter here. */
    .auth-switch { display: block; margin: 20px auto 0; font-size: 12px; text-align: center; text-decoration: none; }
    .auth-switch:hover { text-decoration: underline; }

    /* -------------------------------------------- two-factor setup */
    .auth-status { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
    .auth-qr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; margin: 24px 0 8px; }
    .auth-qr__code { width: 168px; padding: 12px; border-radius: 12px; background: #fff; line-height: 0; }
    .auth-qr__code svg { width: 100%; height: auto; }
    .auth-key { display: grid; gap: 6px; }
    .auth-key dt { color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
    .auth-key dd { margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: 14px; line-height: 1.7; word-spacing: 2px; overflow-wrap: anywhere; user-select: all; }
    .auth-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
    .auth-actions form { display: contents; }
    .auth-steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: step; }
    .auth-steps li { position: relative; padding: 0 0 12px 30px; color: var(--muted); font-size: 13px; line-height: 1.6; counter-increment: step; }
    .auth-steps li::before { content: "0" counter(step); position: absolute; left: 0; top: 1px; color: var(--accent); font-size: 11px; letter-spacing: 1px; }

    /* One code per line, never broken at its dash (read and typed as a whole). */
    .recovery-codes { display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-between; gap: 9px 16px; margin: 22px 0 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet-2); list-style: none; }
    .recovery-codes li { color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
    .auth-done { margin-top: 26px; text-decoration: none; }

    /* ------------------------------------------------------ small screens */
    @media (max-width: 800px) {
        .auth-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 460px; padding: 35px 0 50px; }
        .recovery-codes { grid-template-columns: max-content; justify-content: start; }
        .auth-intro h1 { margin: 15px 0; font-size: 35px; }
        .auth-intro h1 br { display: none; }
        .auth-intro__lead { margin-bottom: 0; font-size: 14px; }
        .auth-intro__note { display: none; }
        .auth-panel { min-height: 0; padding: 26px 24px; }
        .otp-row { gap: 7px; }
        .otp-digit { height: 56px; font-size: 24px; }
        .auth-qr { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    }

    @media (max-width: 380px) {
        .auth-layout { width: calc(100% - 32px); }
        .auth-panel { padding: 22px 18px; border-radius: 20px; }
        .otp-row { gap: 5px; }
        .otp-digit { height: 50px; border-radius: 11px; font-size: 22px; }
        .recovery-codes { grid-template-columns: minmax(0, 1fr); }
    }
}