/* ==================================================================
   AUTH — sign in and account creation.

   Loaded AFTER landing.css and depends on it. The palette, the type
   ramp, .shell, .card, .btn, .eyebrow, .facts, .chip, .pay, the header
   and the background texture all come from there, so the door into the
   product is visibly the same product as the page in front of it.

   What lives here: the split layout, the form controls and the two
   scenes. Nothing landing.css already owns is restated.
   ================================================================== */

/* .hint and .check are display:flex, which beats the hidden attribute */
[hidden] { display: none !important; }

/* ── page frame ───────────────────────────────────────────────── */
.auth { position: relative; z-index: 1; padding: 54px 0 76px; }
.auth > .shell {
    display: grid;
    grid-template-columns: 516px minmax(0, 1fr);
    gap: 60px;
    /* the register form is twice the height of its drawing; centring it
       would drop the drawing below the fold and leave the top empty */
    align-items: start;
}

.auth-card { padding: 34px 34px 28px; }
.auth-card h1 {
    font-family: var(--display); font-size: 1.875rem; font-weight: 700;
    color: var(--t1); letter-spacing: -.035em; line-height: 1.15; margin: 16px 0 0;
}
.auth-card .sub { font-size: .875rem; color: var(--t3); margin: 10px 0 0; }
.auth-card .sub a { color: #93B0E8; font-weight: 700; }
.auth-card .sub a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── fields ───────────────────────────────────────────────────── */
.form { margin-top: 22px; }
.field + .field { margin-top: 16px; }
.field > label {
    display: flex; align-items: center; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--t2); margin-bottom: 9px;
}
/* an optional field has to say so in the label, not in the placeholder,
   because the placeholder disappears the moment they type */
.opt-tag {
    margin-left: 9px; padding: 2px 8px; border-radius: 7px;
    font-size: .625rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--t3);
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pair .field + .field { margin-top: 0; }

.ctrl { position: relative; display: flex; align-items: center; }
.ctrl > .lead { position: absolute; left: 15px; color: var(--t4); pointer-events: none; transition: color .15s; }
/* The card is --raise. A field painted --surface-2 with a --hairline border
   is two near-identical darks, so it reads as a faint outline rather than a
   place to type. The well is lighter than the card, the border two steps
   brighter. */
.ctrl input {
    width: 100%; height: 52px; padding: 0 15px 0 44px;
    border-radius: 13px; background: #101A2E;
    border: 1px solid #2C3E68; color: var(--t1);
    font: inherit; font-size: .938rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ctrl input:hover { border-color: #3A5087; }
.ctrl input::placeholder { color: #74829C; }
.ctrl input:focus { outline: none; border-color: #4C8CF8; background: #132139; box-shadow: 0 0 0 3px rgba(47, 107, 240, .28); }
.ctrl:focus-within > .lead { color: #6BA1FF; }
.ctrl.eyed input { padding-right: 52px; }

/* 44 square, not 38: it is a real control and it is the one people hit
   with a thumb while typing a password */
.eye {
    position: absolute; right: 3px; width: 44px; height: 44px; border-radius: 11px;
    display: grid; place-items: center; background: none; border: 0; padding: 0;
    color: var(--t4); cursor: pointer;
}
.eye:hover { color: var(--t2); background: rgba(255, 255, 255, .04); }
.eye:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.eye .off { display: none; }
.eye.on .off { display: block; }
.eye.on .on-ic { display: none; }

/* verdict — the border carries it, a glyph confirms it */
.ctrl .verdict { position: absolute; right: 15px; display: none; }
.ctrl.eyed .verdict { right: 54px; }
.ctrl.ok input { border-color: #24623F; }
.ctrl.ok .verdict.v-ok { display: block; color: var(--green); }
.ctrl.bad input { border-color: #6E2C32; }
.ctrl.bad .verdict.v-bad { display: block; color: var(--red); }

/* --t4 is 4.15:1 on this surface. Everything below carries meaning, not
   decoration, so it uses --t3 at 6.0:1. */
.hint { display: flex; gap: 7px; align-items: flex-start; margin-top: 9px; font-size: .75rem; line-height: 1.5; color: var(--t3); }
.hint svg { flex-shrink: 0; margin-top: 2px; }
.hint.bad { color: #EFA2A5; }
.hint.ok { color: #86DCA9; }

/* four bare bars at zero read as a broken rule, so the meter says a word */
.meter { display: flex; align-items: center; gap: 5px; margin-top: 13px; }
/* the meter is not a .field, so the next field gets no top margin from the
   sibling rule and ends up glued to it */
.meter + .field { margin-top: 24px; }
.meter i { flex: 1; height: 4px; border-radius: 2px; background: #1E2C4A; transition: background .22s; }
.meter b {
    flex: 0 0 62px; text-align: right; font-family: var(--mono); font-size: .656rem;
    font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--t3);
}
.meter[data-score="1"] i:nth-child(-n+1) { background: var(--red); }
.meter[data-score="2"] i:nth-child(-n+2) { background: var(--amber); }
.meter[data-score="3"] i:nth-child(-n+3) { background: #6BA1FF; }
.meter[data-score="4"] i { background: var(--green); }
.meter[data-score="1"] b { color: #EFA2A5; }
.meter[data-score="2"] b { color: var(--amber); }
.meter[data-score="3"] b { color: #93B0E8; }
.meter[data-score="4"] b { color: #86DCA9; }

/* ── checkbox, links, submit ──────────────────────────────────── */
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .813rem; color: var(--t3); cursor: pointer; }
.check input {
    appearance: none; -webkit-appearance: none; flex-shrink: 0;
    width: 18px; height: 18px; margin: 1px 0 0; position: relative; cursor: pointer;
    border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2);
    transition: background .15s, border-color .15s;
}
.check input:checked { background: var(--blue-2); border-color: var(--blue-2); }
.check input:checked::after {
    content: ""; position: absolute; left: 5.5px; top: 2px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.check input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.check a { color: #93B0E8; text-decoration: underline; text-underline-offset: 2px; }
.link-b { font-size: .813rem; font-weight: 700; color: #93B0E8; }
.link-b:hover { text-decoration: underline; text-underline-offset: 3px; }

.auth-card .btn.wide { width: 100%; height: 52px; margin-top: 22px; font-size: .938rem; }
.auth-alt {
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline);
    font-size: .781rem; color: var(--t3); text-align: center;
}
.auth-alt a { color: #93B0E8; font-weight: 600; }
.auth-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── captcha and social sign-in: only rendered when switched on ── */
.cap-row { display: flex; align-items: center; gap: 12px; }
.cap-row .ctrl { flex: 1; }
.cap-row img, .cap-row canvas { border-radius: 10px; border: 1px solid var(--hairline); flex-shrink: 0; }
.g-recaptcha { margin-top: 20px; }
.or { display: flex; align-items: center; gap: 14px; margin: 22px 0 14px; font-size: .656rem; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.social { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.social .btn { height: 44px; font-size: .813rem; }
.social .btn img, .social .btn svg { width: 16px; height: 16px; }

/* ── side panel ───────────────────────────────────────────────── */
.auth-side { position: sticky; top: 96px; }
/* the chips are pinned to the drawing, so they need a box that is the
   drawing and not the whole column */
.scene-wrap { position: relative; max-width: 470px; margin: 0 auto; }
.scene { position: relative; z-index: 2; display: block; width: 100%; height: auto; overflow: visible; }
/* origins are in the 520x500 drawing space: the assistant stands at 290 */
.a-float { animation: hover 6s ease-in-out infinite; transform-origin: 290px 292px; }
.a-eyes { animation: blink 6.5s steps(1, end) infinite; transform-origin: 290px 172px; }
.a-hold { animation: hover 5.2s ease-in-out infinite .5s; }
.a-spin { animation: spin 26s linear infinite; transform-origin: 290px 250px; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-side .chip-a { bottom: 3%; left: -2%; animation: bob 7.4s ease-in-out infinite; }
.auth-side .chip-b { top: 9%; right: -1%; animation: bob 8.2s ease-in-out infinite .7s; }

.side-copy { max-width: 460px; margin: 10px auto 0; text-align: center; }
.side-copy h2 {
    font-family: var(--display); font-size: 1.188rem; font-weight: 700;
    color: var(--t1); letter-spacing: -.02em; margin: 0;
}
.side-copy p { font-size: .844rem; color: var(--t3); margin: 9px 0 0; }
/* landing.css lays .facts out as a wrapping flex row, which drops the
   third stat onto its own line as soon as a caption grows — and these
   captions are translated. A three-column grid cannot wrap at all. */
.side-copy .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 24px; }
.side-copy .fact { text-align: center; padding-left: 0; border-left: 0; }
.side-copy .fact + .fact { padding-left: 14px; border-left: 1px solid var(--hairline); }
/* landing.css paints .fact span in --t4, which is 4.43:1 here */
.side-copy .fact span { color: var(--t3); }

/* four coins across one line overflow and wrap 3 + 1; capped, they wrap
   two and two, which reads as a decision rather than an accident */
.side-pay { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; margin-top: 26px; max-width: 340px; margin-inline: auto; }
.side-pay .lbl {
    font-size: .688rem; letter-spacing: .11em; text-transform: uppercase; color: var(--t3);
    font-weight: 700; width: 100%; text-align: center; margin-bottom: 4px;
}

/* ── slim footer ──────────────────────────────────────────────── */
.auth-foot { position: relative; z-index: 1; border-top: 1px solid var(--hairline); background: #070B16; }
.auth-foot .shell { display: flex; align-items: center; gap: 10px 22px; height: 60px; flex-wrap: wrap; font-size: .75rem; color: var(--t3); }
.auth-foot nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.auth-foot a:hover { color: var(--t2); }

@media (prefers-reduced-motion: reduce) {
    .a-float, .a-eyes, .a-hold, .a-spin { animation: none !important; }
}

/* ══════════ TABLET ══════════ */
@media (max-width: 1080px) {
    .auth { padding: 40px 0 60px; }
    /* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr), and that
       auto floor is the item's min-content. A row of inputs carries an intrinsic
       width per box, so the track grew past the viewport and the page scrolled
       sideways on a phone. Zero lets it shrink to the screen. */
    .auth > .shell { grid-template-columns: minmax(0, 1fr); gap: 46px; max-width: 560px; }
    /* form first: nobody arrives here to look at the drawing */
    .auth-side { position: static; order: 2; }
    .scene-wrap { max-width: 344px; }
    .auth-side .chip-a { left: 0; bottom: 6%; }
    .auth-side .chip-b { right: 2%; }
}

/* ══════════ PHONE ══════════ */
@media (max-width: 720px) {
    .auth { padding: 26px 0 44px; }
    .auth > .shell { gap: 38px; }
    /* landing.css hides the ghost button next to the burger; there is no
       burger out here and this is the only way back to the site. Both
       labels plus the wordmark overflow 390 by 38px, so the back button
       keeps its arrow and drops its text. */
    .head .acts .btn-ghost { display: inline-flex; }
    /* an icon with no label has to clear 44px on its own */
    .head .acts .btn-sm { height: 44px; }
    .head .acts .back { width: 44px; padding: 0; }
    .head .acts .back span { display: none; }
    .auth-card { padding: 24px 20px 22px; border-radius: 18px; }
    .auth-card h1 { font-size: 1.5rem; }
    .pair { grid-template-columns: 1fr; gap: 0; }
    .pair .field + .field { margin-top: 16px; }
    .field-row { gap: 12px; }
    /* the code image and its input will not both fit on 390 */
    .cap-row { flex-wrap: wrap; }
    .cap-row .ctrl { flex: 1 0 100%; }
    .side-copy .fact + .fact { padding-left: 10px; }
    .side-copy .fact b { font-size: 1.188rem; }
    .scene-wrap { max-width: 272px; }
    .auth-side .chip-a { left: -8px; bottom: 4%; }
    .auth-side .chip-b { right: -8px; top: 6%; }
    .chip { height: 36px; font-size: .719rem; }
    .auth-foot .shell { height: auto; padding-top: 14px; padding-bottom: 16px; }
    .auth-foot nav { margin-left: 0; gap: 16px; }
}