/* Sign in / sign up / «forgot password» / new password — one widget (templates/auth/entry.html, Fiobs 2026-10-10).
   Desktop: two forms side by side under a greeting panel that slides over the one not in use
   (login: panel left, form right; register: form left, panel right). Phone: a «Вхід · Реєстрація»
   switch, the forms slide sideways. Auth is always on the dark theme; the seasonal look recolours
   it through tokens and adds its scene (static/css/event-halloween.css). */

.ae {
    min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center;
    padding: 32px 16px; box-sizing: border-box;
    font-family: var(--font-sans); color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(900px 620px at 12% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
        radial-gradient(820px 620px at 108% 112%, color-mix(in srgb, var(--accent-secondary) 9%, transparent), transparent 62%),
        var(--bg);
}
.ae *, .ae *::before, .ae *::after { box-sizing: border-box; }

.ae-card {
    position: relative; isolation: isolate;
    width: min(880px, 100%); min-height: 540px;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42);
}
.ae-panes { display: contents; }

/* ── Forms ─────────────────────────────────────────────── */
.ae-pane {
    grid-row: 1;
    display: grid; align-content: center;
    padding: 44px 46px 40px;
    transition: opacity 0.35s ease 0.25s, transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.ae-pane--register { grid-column: 1; }
.ae-pane--login { grid-column: 2; }
.ae:not([data-mode="register"]) .ae-pane--register { opacity: 0; transform: translateX(28px); transition-delay: 0s; }
.ae[data-mode="register"] .ae-pane--login { opacity: 0; transform: translateX(-28px); transition-delay: 0s; }

/* Login, «forgot password» and the new password from the e-mail link share the right half */
.ae-view { grid-area: 1 / 1; transition: opacity 0.3s ease, transform 0.35s ease; }
.ae:not([data-mode="forgot"]) .ae-view--forgot,
.ae:not([data-mode="reset"]) .ae-view--reset,
.ae:is([data-mode="forgot"], [data-mode="reset"]) .ae-view--login { opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden; }

.ae-title { margin: 0 0 4px; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.ae-sub { margin: 0 0 20px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

.ae-field { margin-bottom: 12px; }
.ae-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.ae-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ae-input {
    width: 100%; height: 40px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--input-bg); color: var(--text-primary);
    font: 500 14px var(--font-sans);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.ae-input::placeholder { color: color-mix(in srgb, var(--text-muted) 60%, transparent); }
.ae-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.ae-input.has-error { border-color: color-mix(in srgb, var(--danger) 55%, transparent); box-shadow: 0 0 0 3px var(--danger-dim); }
/* Browser autofill keeps the card's colours instead of its own yellow/blue */
.ae-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px var(--surface) inset;
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
}

.ae-hint { margin: 5px 0 0; font-size: 11.5px; color: var(--text-muted); }
.ae-hint:empty { display: none; }
.ae-field-error { margin: 5px 0 0; font-size: 11.5px; color: var(--danger); }

.ae-strength { margin-top: 6px; height: 3px; border-radius: 999px; background: var(--surface-hover-strong); overflow: hidden; }
.ae-strength-fill { display: block; width: 0; height: 100%; border-radius: inherit; transition: width 0.3s ease, background-color 0.3s ease; }
.ae-strength[data-strength="weak"] .ae-strength-fill { width: 33%; background: var(--danger); }
.ae-strength[data-strength="medium"] .ae-strength-fill { width: 66%; background: var(--warning); }
.ae-strength[data-strength="strong"] .ae-strength-fill { width: 100%; background: var(--success); }

.ae-submit {
    width: 100%; height: 42px; margin-top: 6px;
    border: 0; border-radius: 10px;
    background: var(--accent); color: var(--text-on-accent);
    font: 800 14px var(--font-sans);
    cursor: pointer;
    box-shadow: 0 0 20px var(--accent-glow);
    transition: background-color 0.18s, box-shadow 0.18s, transform 0.15s, opacity 0.18s;
}
.ae-submit:hover { background: var(--accent-hover); box-shadow: 0 0 28px var(--accent-glow); transform: translateY(-1px); }
.ae-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.ae-consent { margin: 12px 0 0; text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.ae-consent a { color: inherit; text-decoration: underline; }
.ae-consent a:hover { color: var(--text-primary); }

.ae-link {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: 600 12.5px var(--font-sans); color: var(--text-muted);
    transition: color 0.15s;
}
.ae-link:hover { color: var(--accent); }
.ae-back { justify-self: start; margin-top: 16px; }

.ae-alert { margin-bottom: 14px; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.ae-alert[hidden] { display: none; }
.ae-alert.is-error { background: var(--danger-dim); border: 1px solid var(--border-danger); color: var(--danger); }
.ae-alert.is-success { background: var(--success-dim); border: 1px solid var(--border-success); color: var(--success); }

/* ── Greeting panel (desktop) ──────────────────────────── */
.ae-overlay {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
    width: 50%;
    display: grid; grid-template-rows: 1fr 1fr;   /* literally in half: greeting above, a module card below */
    overflow: hidden;
    transition: transform 0.76s cubic-bezier(0.76, 0, 0.24, 1);
}
.ae[data-mode="register"] .ae-overlay { transform: translateX(100%); }
.ae-sky {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
        radial-gradient(100% 70% at 100% 100%, color-mix(in srgb, var(--accent-secondary) 24%, transparent), transparent 62%),
        var(--bg);
}

.ae-logo { align-self: flex-start; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none; }
.ae-logo span { color: var(--accent); }

.ae-copies { display: grid; margin-top: 28px; }
/* The panel is a sheet dragged across the card: the outgoing words fade at once and stay behind,
   the new ones appear only once the sheet is halfway — the two never overlap */
.ae-copy { grid-area: 1 / 1; transition: opacity 0.16s ease, transform 0.76s cubic-bezier(0.76, 0, 0.24, 1); }
.ae:not([data-mode="register"]) .ae-copy--login,
.ae[data-mode="register"] .ae-copy--register { transition: opacity 0.4s ease 0.34s, transform 0.76s cubic-bezier(0.76, 0, 0.24, 1); }
.ae-copy--register { opacity: 0; transform: translateX(90px); pointer-events: none; }
.ae[data-mode="register"] .ae-copy--login { opacity: 0; transform: translateX(-90px); pointer-events: none; }
.ae[data-mode="register"] .ae-copy--register { opacity: 1; transform: none; pointer-events: auto; }

.ae-headline { margin: 0 0 10px; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.ae-lead { margin: 0; max-width: 30ch; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.ae-ask { margin: 24px 0 8px; font-size: 12.5px; color: var(--text-muted); }
.ae-ghost {
    padding: 9px 18px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    background: none; color: var(--text-primary); cursor: pointer;
    font: 700 13px var(--font-sans);
    transition: background-color 0.18s, border-color 0.18s;
}
.ae-ghost:hover { background: var(--surface-hover-strong); border-color: var(--border-accent); }

.ae-half { position: relative; min-height: 0; display: flex; flex-direction: column; }
.ae-half--top { padding: 34px 40px 18px; }

/* Lower half in the normal look: module numbers drift up from the bottom edge and fade out before the greeting —
   the counterpart of the festive night scene (Fiobs 2026-10-10: «цифри… просто інформують»). Lanes (--x) keep
   a number from catching up with the one ahead; transform and opacity only. Hover holds a number, a click tosses it. */
.ae-nums { position: absolute; inset: 0; overflow: hidden; -webkit-user-select: none; user-select: none; }
.ae-num {
    position: absolute; left: var(--x); bottom: -12px;
    opacity: 0; cursor: default;
    animation: ae-rise var(--dur) linear var(--delay) infinite;
    will-change: transform, opacity;
}
.ae-num-in {
    display: flex; flex-direction: column;
    font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--text-muted); white-space: nowrap;
    animation: ae-sway calc(var(--dur) / 3) ease-in-out var(--delay) infinite alternate;
}
.ae-num b {
    font-size: var(--size); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
    color: var(--mod-color); font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px color-mix(in srgb, var(--mod-color) 35%, transparent);
    transform-origin: 0 60%;
    transition: text-shadow 0.25s;
}
.ae-num:hover, .ae-num:hover .ae-num-in { animation-play-state: paused; }
.ae-num:hover b { text-shadow: 0 0 26px color-mix(in srgb, var(--mod-color) 70%, transparent); }
/* gone before the half's top edge — the numbers never get cut off by it */
@keyframes ae-rise {
    0%   { transform: translateY(0); opacity: 0; }
    14%  { opacity: var(--o); }
    60%  { opacity: var(--o); }
    100% { transform: translateY(-240px); opacity: 0; }
}
@keyframes ae-sway { from { transform: translateX(-5px); } to { transform: translateX(7px); } }


.ae-scene, .ae-strip { display: none; }

/* ── Phone: one column, «Вхід · Реєстрація» switch ─────── */
.ae-mhead { display: none; }
@media (max-width: 860px) {
    .ae { place-items: start center; padding: 16px; }
    .ae-card { display: block; min-height: 0; border-radius: 20px; }
    .ae-overlay { display: none; }
    .ae-mhead { display: block; position: relative; padding: 20px 20px 0; }
    .ae-panes { display: block; position: relative; }
    .ae-pane { padding: 20px 20px 24px; }
    .ae:not([data-mode="register"]) .ae-pane--register,
    .ae[data-mode="register"] .ae-pane--login { position: absolute; inset: 0 0 auto 0; }
    .ae:not([data-mode="register"]) .ae-pane--register { transform: translateX(40px); }
    .ae[data-mode="register"] .ae-pane--login { transform: translateX(-40px); }
    .ae-pane .ae-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    :is(.ae-view--forgot, .ae-view--reset) .ae-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 1.4rem; }
    .ae-sub { margin-bottom: 16px; }
}
.ae-seg {
    position: relative;
    display: grid; grid-template-columns: 1fr 1fr;
    margin-top: 16px; padding: 3px;
    border: 1px solid var(--border); border-radius: 11px;
    background: var(--input-bg);
}
.ae-seg-btn {
    position: relative; z-index: 1;
    height: 34px; border: 0; border-radius: 8px;
    background: none; cursor: pointer;
    font: 700 13px var(--font-sans); color: var(--text-muted);
    transition: color 0.3s;
}
.ae-seg-btn[aria-selected="true"] { color: var(--text-on-accent); }
.ae-seg-thumb {
    position: absolute; top: 3px; bottom: 3px; left: 3px;
    width: calc(50% - 3px); border-radius: 8px;
    background: var(--accent);
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
.ae[data-mode="register"] .ae-seg-thumb { transform: translateX(100%); }

@media (prefers-reduced-motion: reduce) {
    .ae-pane, .ae-view, .ae-overlay, .ae-copy, .ae-seg-thumb, .ae-seg-btn { transition: none; }
    /* the numbers stay where they are — each at its own point of the climb */
    .ae-num, .ae-num-in { animation-play-state: paused; }
}

/* Промокод при реєстрації (карби): посилання-кнопка, що плавно розкриває поле.
   «Гармошка» на grid-template-rows 0fr → 1fr — без фіксованої висоти і без стрибка. */
.ae-promo-toggle { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent); cursor: pointer; }
.ae-promo-toggle:hover { color: var(--accent-hover); }
.ae-promo-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.3s ease, opacity 0.22s ease; }
.ae-promo-fold > div { overflow: hidden; min-height: 0; }
.ae-promo-fold.is-open { grid-template-rows: 1fr; opacity: 1; }