/* ══════════════════════════════════════════════════════════════════
   AUTH — sign in, sign up, recovery, the codes, a suspended account
   and the profile a social sign-in owes (layouts/auth), "Bull & Bear"

   Built from the approved mockup (mockup/auth-alpai, gitignored). Sits on
   landing.css: its tokens, .glass, .btn, .brand, the language menu, and
   the bull and bear (.beasts, partials/lp_beasts) with their chips. This
   file adds the arena behind, the corners, the card and the controls.

     .au-scene   glow, candle bokeh and the moving floor, fixed behind
     .beasts     at the foot of the page on a desktop; on tablets and
                 phones landing.css puts them in the flow, under the card
     .au-card    one glass card, every field at once

   member.js still drives the behaviour: [data-reveal] on a password,
   form[data-once], and the six-box code ([data-code-boxes]).
   ══════════════════════════════════════════════════════════════════ */

body.au { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.skip { position: absolute; top: -60px; left: 16px; z-index: 10; padding: 10px 16px; border-radius: 12px; background: var(--green); color: var(--on-green); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ── the arena ──────────────────────────────────────────────────── */
.au-scene { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background: url(../images/landing/hero-glow.webp) center bottom / cover no-repeat, var(--bg); }
.au-scene::before { content: ''; position: absolute; inset: 0; opacity: .5;
    background: url(../images/landing/candles-bokeh.webp) center 35% / cover no-repeat;
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 66%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 66%, transparent); }
.au-scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 42%, transparent 40%, rgba(0, 0, 0, .6)); }

/* the hero's pair, placed for this page: low at either side of the card */
.au .beasts { z-index: -1; }
.au .beast { bottom: 58px; }
.au .beast.bull { left: max(-30px, calc(50% - 790px)); width: clamp(380px, 37vw, 580px); }
.au .beast.bear { right: max(0px, calc(50% - 730px)); width: clamp(210px, 19vw, 300px); }
.au .bull .chip { top: -10%; left: 30%; }
.au .bear .chip { top: -12%; right: 18%; }

/* ── corners ────────────────────────────────────────────────────── */
.au-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; }
.au-top .btn { gap: 8px; }
.au-top .flag { width: 18px; height: 18px; }
/* landing.css draws .lang-btn bare, for its top strip; here it is a glass pill like its neighbour */
.au-top .lang-btn { padding: 0 14px; border: 1px solid var(--stroke-2); background: rgba(255, 255, 255, .06); color: var(--ink); }
.au-top .lang-btn:hover { background: rgba(255, 255, 255, .12); color: var(--ink); }
.ic-back { transform: scaleX(-1); }

/* ── the card ───────────────────────────────────────────────────── */
.au-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 76px 16px 28px; }
.au-brand { gap: 12px; font-size: 22px; }
.au-brand .mark { width: 40px; height: 40px; filter: drop-shadow(0 0 18px rgba(59, 240, 122, .45)); }

.au-card { position: relative; width: min(460px, 100%); padding: 26px 32px 30px; border-radius: 30px; }
.au-card.wide { width: min(560px, 100%); }
/* a lit top edge, green into lime: the card catches the arena's light */
.au-card::before { content: ''; position: absolute; top: -1px; left: 40px; right: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--green), var(--lime), transparent); }

.au-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; margin-bottom: 22px; border-radius: 999px; background: rgba(0, 0, 0, .38); border: 1px solid var(--stroke); }
.au-tabs a { display: grid; place-items: center; min-height: 44px; padding: 0 10px; border-radius: 999px; color: var(--muted); font: 700 14.5px var(--f-body); text-align: center; text-decoration: none; transition: color .2s, background-color .2s; }
.au-tabs a:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.au-tabs a[aria-current] { background: linear-gradient(135deg, var(--lime), var(--green) 62%); color: var(--on-green); box-shadow: 0 8px 22px -10px rgba(59, 240, 122, .8), inset 0 1px 0 rgba(255, 255, 255, .5); }

.au-title { font: 800 31px/1.15 var(--f-head); letter-spacing: -.015em; text-wrap: balance; }
.au-title em { font: italic 700 1.1em var(--f-serif); padding-right: .06em; background: linear-gradient(90deg, var(--green), var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.au-lede { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.au-lede b { color: var(--ink); }
.au-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 18px; color: var(--green); background: rgba(59, 240, 122, .12); border: 1px solid rgba(59, 240, 122, .3); }
.au-icon.is-down { color: var(--red); background: rgba(255, 74, 87, .12); border-color: rgba(255, 74, 87, .3); }
.au-icon .ic { width: 26px; height: 26px; }

.au-form { display: grid; gap: 14px; margin-top: 22px; }
.au-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.au-form .btn-lg { margin-top: 4px; }
.btn-block { width: 100%; }
.au-switch { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--stroke); color: var(--muted); font-size: 14px; text-align: center; }
.au-note { color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; }
.au-note b { color: var(--ink); font-variant-numeric: tabular-nums; }
.au-switch a, .au-note a, .check a, .au-link { color: var(--green); font-weight: 700; text-decoration: none; }
.au-switch a:hover, .au-note a:hover, .check a:hover, .au-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-link { font-size: 14px; }
/* a 40px finger target without moving the line it sits on */
.au-link, .au-foot a { padding: 10px 4px; margin: -10px -4px; }

/* ── fields ─────────────────────────────────────────────────────── */
.field { display: grid; align-content: start; gap: 7px; min-width: 0; }
.fld-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 12px; min-height: 20px; }
.fld-head .hint { margin-left: auto; text-align: right; }
.label { color: var(--ink-2); font: 600 13px var(--f-body); }
.hint { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.hint:empty { display: none; }
.hint[data-state="ok"] { color: var(--green); }
.hint[data-state="bad"] { color: var(--red); }
/* a small lit dot that never makes its line taller than the label beside it */
.hint[data-state="ok"]::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; vertical-align: .12em; }

.ctl { position: relative; }
.ctl > .ic { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--muted); pointer-events: none; transition: color .2s; }
.ctl:focus-within > .ic { color: var(--green); }
.input { width: 100%; min-height: 54px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--stroke); background: rgba(0, 0, 0, .34); color: var(--ink); font: 600 16px var(--f-body);
    transition: border-color .2s, box-shadow .2s, background-color .2s; }
.ctl > .ic + .input { padding-left: 46px; }
.input { text-overflow: ellipsis; }  /* a long placeholder (RU, ES) ends in an ellipsis, not mid-letter */
.input::placeholder { color: rgba(255, 255, 255, .3); font-weight: 500; }
.input:hover { border-color: var(--stroke-2); }
.input:focus { outline: none; border-color: rgba(59, 240, 122, .7); background: rgba(0, 0, 0, .46); box-shadow: 0 0 0 4px rgba(59, 240, 122, .14); }
.input[aria-invalid="true"] { border-color: rgba(255, 74, 87, .75); box-shadow: 0 0 0 4px rgba(255, 74, 87, .12); }
select.input { padding-right: 44px; appearance: none; cursor: pointer;
    background: rgba(0, 0, 0, .34) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386948C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; }
select.input option { background: #0E1511; color: var(--ink); }
.ctl.pw .input { padding-right: 54px; }
.eye { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; translate: 0 -50%; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; }
.eye:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.eye .ic { width: 19px; height: 19px; }

.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 2px; }
.meter i { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); transition: background-color .25s; }
.meter[data-score="1"] i:nth-child(-n + 1) { background: var(--red); }
.meter[data-score="2"] i:nth-child(-n + 2) { background: #FF8A4A; }
.meter[data-score="3"] i:nth-child(-n + 3) { background: var(--lime); }
.meter[data-score="4"] i { background: var(--green); }

.check { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding-top: 9px; color: var(--ink-2); font-size: 14px; line-height: 1.45; cursor: pointer; }
.check input { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0; border-radius: 6px; border: 1px solid var(--stroke-2); background: rgba(0, 0, 0, .3); appearance: none; cursor: pointer; }
.check input:checked { border-color: transparent; background: linear-gradient(135deg, var(--lime), var(--green)); }
.check input:checked::after { content: ''; width: 10px; height: 5px; border: 2px solid var(--on-green); border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px; }

/* a mobile number after its dialling code (user_data), a captcha beside its field */
.cap-row { display: flex; align-items: center; gap: 10px; }
.cap-row .input { flex: 1; min-width: 0; }
.cap-row img, .cap-row canvas { border-radius: 12px; }
.dial { display: grid; place-items: center; min-width: 64px; min-height: 54px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--stroke); background: rgba(255, 255, 255, .05); color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.g-recaptcha-slot { min-height: 78px; }
.optional { color: var(--muted); font-weight: 500; }

/* ── a code of six digits: one input, drawn as six cells once member.js is in ── */
.code6 i { display: none; }
.code6[data-ready] { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.code6[data-ready] i { display: grid; place-items: center; height: 62px; border-radius: 16px; border: 1px solid var(--stroke); background: rgba(0, 0, 0, .34); color: var(--ink); font: 700 26px var(--f-head); font-style: normal; transition: border-color .2s, box-shadow .2s; }
.code6[data-ready] i.is-on { border-color: rgba(59, 240, 122, .7); box-shadow: 0 0 0 4px rgba(59, 240, 122, .14); }
.code6[data-ready] i.is-on:empty::after { content: ''; width: 2px; height: 26px; background: var(--green); animation: blink 1s steps(1) infinite; }
.code6[data-ready] input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: text; }
.input.otp { font: 700 22px var(--f-head); letter-spacing: .5em; text-align: center; }

/* ── someone else's sign-in, when an operator turns one on ──────── */
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--stroke); }
.social { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.social svg { width: 18px; height: 18px; }

/* the reason an account was suspended */
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255, 74, 87, .3); background: rgba(255, 74, 87, .1); color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.alert > .ic { margin-top: 2px; color: var(--red); }
.alert b { display: block; margin-bottom: 2px; color: var(--red); }

.au-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; max-width: 560px; color: var(--muted); font-size: 12.5px; text-align: center; }
.au-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.au-foot a { color: var(--ink-2); text-decoration: none; }
.au-foot a:hover { color: var(--green); }

@keyframes blink { 50% { opacity: 0; } }

/* ── tablets and phones: landing.css puts the animals in the flow; here
      they sit under the card, then the legal line ──────────────────── */
@media (max-width: 1023px) {
    .au-main { justify-content: flex-start; }
    .au .beasts { z-index: 0; order: 3; max-width: 460px; height: min(46vw, 230px); margin: -6px 0 -4px; }
    .au .beasts::after { left: 6%; right: 6%; height: 40px; background: radial-gradient(closest-side, rgba(200, 255, 61, .2), transparent); }
    .au .beast { bottom: 18px; }
    .au .beast.bull { left: 0; width: 62%; }
    .au .beast.bear { right: 2%; width: 28%; }
    .au-foot { order: 4; }
}

@media (max-width: 600px) {
    .au-top { padding: 12px 14px; }
    .au-top .btn { min-height: 40px; padding: 0 12px; }
    .au-main { gap: 16px; padding: 70px 16px 24px; }
    .au-brand { font-size: 19px; }
    .au-brand .mark { width: 34px; height: 34px; }
    .au-card, .au-card.wide { padding: 18px 18px 24px; border-radius: 24px; }
    .au-title { font-size: 26px; }
    .au-pair { grid-template-columns: minmax(0, 1fr); }
    .code6[data-ready] { gap: 7px; }
    .code6[data-ready] i { height: 54px; font-size: 22px; border-radius: 13px; }
}