/* Production copy of Arthur's css/auth.css (l46, l46b, l46c and the l46 button rule, app front public/staging e99a47c5),
   kept in /login/ because Caddy serves nothing else before sign-in. Arthur's rules below are byte for byte his, so
   `diff <(git show e99a47c5:css/auth.css) login/auth.css` shows only this note and the production block at the end
   (the reset link's form, the two-factor step and the bot-check zone of production's sign-in, which his lot does not have). */
/* auth.css (l46, 22/10): /login/ and /signup/, one sheet, in the landing's language (prod-landing/landing/css/landing.css):
   Onest, #F7F7F9 page, white soft cards, raspberry #F24886 pills with dark ink, "Lana" + "Chat" word mark.
   Light only: the sign-in pages never follow lana.theme (js/auth.js puts light back). Mobile first. */
:root{--bg:#F7F7F9;--card:#fff;--line:rgba(17,17,17,.08);--line2:rgba(17,17,17,.14);--tx:#111;--tx2:#4b4b55;--tx3:#63636e;
--ac:#f24886;--ac-hov:#ff5f97;--ac-ink:#1a0710;--ac-tx:#c0185a;--err:#c81e4a;--err-bg:#fff1f4;--ok:#0f7a4a;--ok-bg:#effaf4;
--shadow:0 1px 2px rgba(17,17,17,.04),0 8px 24px -12px rgba(17,17,17,.12);
--font:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.auth{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--tx);font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.auth::before{content:"";position:fixed;left:50%;top:-260px;width:900px;height:620px;margin-left:-450px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,72,134,.13),rgba(242,72,134,0));pointer-events:none;z-index:0}
.auth :where(a){color:inherit;text-decoration:none}
.auth :where(h1,p){margin:0}
.auth :focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}

/* l46c (Arthur): no logo or word mark above the card any more, the card with Lana is enough */

/* buttons: same shapes as the landing (.btn, .btn-ac, the hero pill) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--tx);font:500 14px/1 var(--font);cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.btn:hover,.btn:focus-visible{border-color:var(--ac);background:#fff;color:#111}
/* l46b: white label and arrow on the raspberry buttons (Arthur's call, about 3.5:1 on #f24886) */
.btn-ac{background:var(--ac);border-color:var(--ac);color:#fff}
/* l46 (Arthur): on hover white fill, #111 text and arrow (currentColor), 1 px pink outline */
.btn-ac:hover,.btn-ac:focus-visible{background:#fff;border-color:var(--ac);color:#111;transform:translateY(-1px)}
.btn-lg{width:100%;height:46px;font-size:16px}
.btn-lg.btn-ac{font-weight:600;box-shadow:0 10px 24px -12px rgba(242,72,134,.75)}
.btn:disabled,.btn[aria-busy="true"]{opacity:.65;cursor:wait}
.btn svg{flex:none}
.btn-arrow{width:18px;height:18px;transition:transform .2s ease}
.btn-ac:hover .btn-arrow,.btn-ac:focus-visible .btn-arrow{transform:translateX(3px)}
.btn-google{font-weight:500}

/* the card */
.auth-main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 16px}
.auth-card{position:relative;z-index:1;width:100%;max-width:440px;padding:18px 20px 18px;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 1px 2px rgba(17,17,17,.04),0 24px 56px -28px rgba(17,17,17,.22)}
.auth-head{text-align:center;margin-bottom:16px}
/* Lana waves (l46c): the picture and its bubble side by side, centred; the box is sized up front so nothing jumps.
   Her body never moves: only the raised arm (its own layer, cut from lana-pose-wave.webp) turns around the shoulder,
   three quick waves then a rest, every 8 s. js/auth.js swaps the layers in; until then (or without JS) the still picture. */
.auth-lana{display:flex;align-items:flex-start;justify-content:center;gap:4px;max-width:100%;height:80px;margin:0 auto 8px}
.auth-lana-wave{position:relative;flex:none;display:block;width:76px;height:71px;margin-top:9px}
.auth-lana-wave img{position:absolute;inset:0;width:100%;height:100%;display:block}
.auth-lana-arm{transform-origin:20.6% 65%;animation:lana-arm 8s ease-in-out .5s infinite}
.auth-bubble{position:relative;flex:0 1 auto;min-width:0;max-width:160px;margin-top:2px;padding:6px 11px;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid var(--line2);box-shadow:0 6px 16px -10px rgba(17,17,17,.3);color:var(--tx);font-size:14px;font-weight:600;line-height:1.25;white-space:normal;overflow-wrap:anywhere;animation:lana-pop .35s cubic-bezier(.2,.9,.3,1.3) .25s both}
/* 1.6 s of waving (three times -14deg to +10deg) out of 8 s */
@keyframes lana-arm{
  0%,20%,100%{transform:none}
  3%{transform:rotate(-14deg)}
  6.5%{transform:rotate(10deg)}
  10%{transform:rotate(-14deg)}
  13.5%{transform:rotate(10deg)}
  17%{transform:rotate(-14deg)}}
@keyframes lana-pop{from{opacity:0;transform:translateY(4px) scale(.85)}to{opacity:1;transform:none}}
.auth-head h1{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.15;text-wrap:balance}
.auth-head p{margin-top:6px;color:var(--tx2);font-size:15px;text-wrap:pretty}
.auth-head p:empty{display:none}

.auth-or{display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--tx3);font-size:13px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* fields */
.auth-form{display:grid;gap:0}
.auth-field{margin-bottom:12px}
.auth-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.auth-form label.auth-label{display:block;margin-bottom:5px;font-size:14px;font-weight:500;color:var(--tx)}
.auth-input{width:100%;height:46px;padding:0 14px;background:#fff;border:1px solid var(--line2);border-radius:12px;color:var(--tx);font:16px var(--font);outline:none;transition:border-color .15s,box-shadow .15s}
.auth-input::placeholder{color:#9a9aa4}
.auth-input:hover{border-color:rgba(17,17,17,.24)}
.auth-input:focus-visible{outline:none}
.auth-input:focus{border-color:var(--ac);box-shadow:0 0 0 4px rgba(242,72,134,.14)}
.auth-input[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 4px rgba(200,30,74,.08)}
.auth-pass{position:relative}
.auth-pass .auth-input{padding-right:72px}
.auth-reveal{position:absolute;top:5px;right:5px;height:36px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--tx2);font:500 14px var(--font);cursor:pointer}
.auth-reveal:hover{background:#f4f4f6;color:var(--tx)}
.auth-hint{margin-top:4px;font-size:13px;color:var(--tx3)}
.auth-error{margin-top:6px;font-size:13px;color:var(--err)}
.auth-error:empty{display:none}
.auth-field:has(.auth-error:not(:empty)) .auth-hint{display:none}
.auth-link{color:var(--ac-tx);font-weight:500;font-size:14px}
.auth-link:hover{text-decoration:underline;text-underline-offset:3px}

.auth-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--tx2);cursor:pointer;line-height:1.45}
.auth-check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--ac);cursor:pointer}
.auth-check a{color:var(--ac-tx);font-weight:500}
.auth-check a:hover{text-decoration:underline;text-underline-offset:3px}

.auth-alert{margin:0 0 14px;padding:10px 12px;border:1px solid rgba(200,30,74,.22);border-radius:12px;background:var(--err-bg);color:var(--err);font-size:14px}
.auth-alert:empty{display:none}
.auth-done{margin:0 0 14px;padding:10px 12px;border:1px solid rgba(15,122,74,.2);border-radius:12px;background:var(--ok-bg);color:var(--ok);font-size:14px}

.auth-switch{margin-top:14px;text-align:center;font-size:14px;color:var(--tx2)}
.auth-back{display:block;margin-top:12px;text-align:center}
.auth-note{position:relative;z-index:1;max-width:560px;margin:12px auto 0;text-align:center;font-size:12px;line-height:1.45;color:var(--tx3);text-wrap:pretty}
.auth-note a{color:var(--tx2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.auth-note a:hover{color:var(--tx);text-decoration-color:currentColor}

/* the bot check (Cloudflare Turnstile) runs without a box: nothing is drawn unless Cloudflare itself asks for a click */
.auth-ts:empty{display:none}
.auth-ts{margin:12px auto 0;display:flex;justify-content:center;max-width:440px}

/* toasts: bottom centre, above the support bubble */
.auth-toasts{position:fixed;left:50%;bottom:20px;z-index:60;display:grid;gap:8px;width:min(420px,calc(100% - 32px));transform:translateX(-50%);pointer-events:none}
.auth-toast{padding:11px 14px;border-radius:12px;background:#111;color:#fff;font-size:14px;box-shadow:0 12px 30px -12px rgba(17,17,17,.45);animation:auth-in .2s ease-out}
.auth-toast-error{background:#2a0b16}
@keyframes auth-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.no-script{position:relative;z-index:1;margin:0 auto 16px;text-align:center;color:var(--err);font-size:14px}

@media (min-width:600px){
  .auth-main{padding:20px 24px}
  .auth-lana{height:90px}
  .auth-lana-wave{width:84px;height:78px;margin-top:12px}
  .auth-card{padding:24px 32px 22px}
  .auth-head h1{font-size:26px}
  .btn-lg{height:48px}
  .auth-input{height:48px}
}
/* l46c: no vertical scroll on short windows (1280x720 laptops, phones): every gap a notch tighter, same look */
@media (max-height:820px){
  .auth-main{padding-top:10px;padding-bottom:10px}
  .auth-card{padding-top:18px;padding-bottom:16px}
  .auth-lana{height:82px;margin-bottom:6px}
  .auth-lana-wave{margin-top:6px}
  .auth-or{margin:10px 0}
  .auth-field{margin-bottom:10px}
  .auth-input,.btn-lg{height:44px}
  .auth-reveal{top:4px;height:36px}
  .auth-switch{margin-top:12px}
  .auth-note{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){.btn-arrow{transition:none}.btn{transition:background-color .18s ease,color .18s ease,border-color .18s ease}.btn-ac:hover,.btn-ac:focus-visible{transform:none}.btn-ac:hover .btn-arrow{transform:none}.auth-toast,.auth-lana-arm,.auth-bubble{animation:none}}

/* ---- l46b: Lana at work around the card ----
   /login/ = she is busy (a fan chat, a sale in Stars, today's sales rolling up, three fans answered);
   /signup/ = her first day (checklist ticking, first chat, first sale). Decorative (aria-hidden), texts translated.
   >= 1120 px: three small windows in the side gutters, placed from the centre (card is 440 px wide), never over the form.
   Narrower: one pill above the card. Every item is VISIBLE by default and the animations only hide it for a moment,
   so with prefers-reduced-motion (animation:none) the full still scene shows. One 10 s loop for the sequences. */
.auth-scenes{display:none}
.aw-pill{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:0 auto 10px;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--line2);box-shadow:0 6px 16px -12px rgba(17,17,17,.3);font-size:13px;font-weight:500;color:var(--tx2);line-height:1.2;animation:aw-pop .4s cubic-bezier(.2,.9,.3,1.3) .5s both}
.aw-pill>span:not(.aw-roll):not(.aw-tick){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-pill .aw-roll{color:var(--tx);font-weight:600}
.aw-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.15);animation:aw-breathe 2.4s ease-in-out infinite}
.aw-roll{display:inline-block;height:1.25em;overflow:hidden;vertical-align:bottom;line-height:1.25;font-variant-numeric:tabular-nums}
.aw-roll span{display:block;animation:aw-roll 10s ease-in-out infinite}
.aw-tick{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ac)}
.aw-check{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.aw-pill .aw-tick{animation:aw-pop .4s cubic-bezier(.2,.9,.3,1.3) 1s both}
.aw-star{flex:none;width:16px;height:16px;fill:#f5b301}

@media (min-width:1120px){
  .aw-pill{display:none}
  .auth-scenes{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .aw{position:absolute;width:236px;padding:14px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(17,17,17,.04),0 18px 40px -24px rgba(17,17,17,.28);font-size:13px;line-height:1.35;color:var(--tx);animation:aw-enter .6s cubic-bezier(.2,.7,.2,1) .2s backwards,aw-float 7s ease-in-out 1s infinite alternate}
  .aw-left{left:calc(50% - 500px);top:calc(50% - 170px)}
  .aw-right-top{left:calc(50% + 264px);top:calc(50% - 230px);animation-delay:.3s,1.6s}
  .aw-right-bottom{left:calc(50% + 264px);top:calc(50% + 30px);animation-delay:.4s,2.2s}
  .aw-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .aw-title{font-weight:600}
  .aw-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--tx3);white-space:nowrap}
  .aw-live i{width:6px;height:6px;border-radius:50%;background:#16a34a;animation:aw-breathe 2.4s ease-in-out infinite}
  .aw-ava{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:600;color:#fff}
  img.aw-ava{background:#fff0f5}
  .aw-ava-a{background:#8b5cf6}.aw-ava-b{background:#0ea5e9}.aw-ava-c{background:#f59e0b}
  .aw-msg{display:flex;align-items:flex-end;gap:6px;margin:0 0 6px}
  .aw-msg>span:last-child{padding:6px 10px;border-radius:14px;max-width:180px}
  .aw-fan>span:last-child{background:#f1f1f3;border-bottom-left-radius:4px}
  .aw-lana{justify-content:flex-end}
  .aw-lana>span:last-child{background:var(--ac);color:#fff;border-bottom-right-radius:4px}
  .aw-sale{display:flex;align-items:center;gap:5px;margin:8px 0 0;padding:7px 10px;border-radius:12px;background:#fff8e6;border:1px solid #fde7a8;font-weight:600}
  .aw-sale em{margin-left:auto;font-style:normal;font-weight:500;font-size:11px;color:#a16207}
  .aw-label{font-size:12px;font-weight:500;color:var(--tx3);margin-bottom:6px}
  .aw-big{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
  .aw-bars{display:flex;align-items:flex-end;gap:6px;height:44px;margin-top:10px}
  .aw-bars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--ac),#f78bb2);transform-origin:50% 100%;animation:aw-rise .7s cubic-bezier(.2,.9,.3,1.15) both,aw-bar 3.2s ease-in-out infinite alternate}
  .aw-bars i:nth-child(1){height:30%;animation-delay:.5s,1.2s}.aw-bars i:nth-child(2){height:45%;animation-delay:.6s,1.5s}
  .aw-bars i:nth-child(3){height:38%;animation-delay:.7s,1.8s}.aw-bars i:nth-child(4){height:60%;animation-delay:.8s,2.1s}
  .aw-bars i:nth-child(5){height:72%;animation-delay:.9s,2.4s}.aw-bars i:nth-child(6){height:92%;animation-delay:1s,2.7s}
  .aw-row{display:flex;align-items:center;gap:8px;margin:0 0 8px}
  .aw-row:last-child{margin-bottom:0}
  .aw-name{font-weight:500}
  .aw-done{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--ok)}
  .aw-done .aw-check{stroke:var(--ok);width:12px;height:12px}
  .aw-first{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;width:180px}
  .aw-first .aw-star{grid-row:span 2;width:30px;height:30px}
  .aw-first .aw-label{margin:0}
  /* the sequence: items show up one after the other, stay, then everything resets together */
  .aw-s1{animation:aw-s1 10s ease-out infinite}.aw-s2{animation:aw-s2 10s ease-out infinite}
  .aw-s3{animation:aw-s3 10s ease-out infinite}.aw-s4{animation:aw-s4 10s cubic-bezier(.3,1.5,.5,1) infinite}
  .aw-first.aw-s3{animation:aw-enter .6s cubic-bezier(.2,.7,.2,1) .4s backwards,aw-s3 10s cubic-bezier(.3,1.5,.5,1) infinite}
}
@keyframes aw-s1{0%,4%{opacity:0;transform:translateY(6px)}10%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aw-s2{0%,22%{opacity:0;transform:translateY(6px)}28%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aw-s3{0%,40%{opacity:0;transform:translateY(6px)}46%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aw-s4{0%,58%{opacity:0;transform:scale(.85)}64%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aw-roll{0%,28%{transform:none}33%,61%{transform:translateY(-100%)}66%,94%{transform:translateY(-200%)}100%{transform:none}}
@keyframes aw-enter{from{opacity:0;translate:0 10px}}
@keyframes aw-float{to{translate:0 -6px}}
@keyframes aw-rise{from{transform:scaleY(0)}}
@keyframes aw-bar{to{transform:scaleY(.86)}}
@keyframes aw-breathe{50%{opacity:.45}}
@keyframes aw-pop{from{opacity:0;transform:scale(.85)}}
@media (prefers-reduced-motion:reduce){.aw,.aw *,.aw-pill,.aw-pill *{animation:none!important}}

/* ---- production only (not in Arthur's lot): what production's sign-in has and his pages do not ----
   The reset link's form (#reset-form) and the two-factor step (#twofa-form) wear his fields, links and button; the
   code fields read as digits; "Use a recovery code" is a link-styled button. The bot check zone (#auth-ts) stays
   under the card as in his page: empty (hidden) unless Cloudflare asks the visitor for a click. */
.auth-code-block,.auth-code-field,.auth-rec-field{display:grid;min-width:0}
.auth-code-switch{justify-self:start;margin:-2px 0 12px;padding:0;border:0;background:none;font-family:inherit;line-height:1.4;text-align:left;cursor:pointer}
.auth-code-switch:hover{text-decoration:underline;text-underline-offset:3px}
.auth-again{display:block;margin:0 0 12px;text-align:center}
#twofa-code,#reset-code{letter-spacing:.24em;font-variant-numeric:tabular-nums}
/* a busy or disabled pink button keeps its pink on hover (Arthur's hover turns it white; brand lane's note) */
.btn-ac:is(:disabled,[aria-busy="true"]):is(:hover,:focus-visible){background:var(--ac);border-color:var(--ac);color:#fff;transform:none}
.btn-ac:is(:disabled,[aria-busy="true"]) .btn-arrow{transform:none}
/* Cloudflare asks for a click: login.js reserves the box's height (65 px, 140 px compact) before it scrolls the zone's end
   into view, so on a phone the box never lands below the screen */
.auth-ts.is-asking{display:flex;min-height:65px}
.auth-ts.is-asking[data-size="compact"]{min-height:140px}