/* Sign-up, login, password and activation pages (src/components/auth-v3).
   Taken from the design boards' web.css. Every rule holds only inside #er-auth, so nothing leaks
   into the rest of the site. The brand blue lives in --red (the name is from the first drafts). */
#er-auth{
  color-scheme:light;
  --paper:#FBFCFF; --band:#EEF1F8; --tile:#F5F7FC;
  --ink:#161A22; --ink-2:rgba(17,24,39,.76); --ink-3:rgba(17,24,39,.66); --ink-4:rgba(17,24,39,.42);
  --line:#E0E5EF; --line-2:#CFD6E3;
  --red:#2560F0; --mark:#E10600; --red-tint:#EEF3FF;
  --ok:#17A865; --ok-ink:#0B6E3F; --ok-bg:#EDFBF3;
  --warn:#EAB308; --warn-ink:#8A5A00; --warn-bg:#FFFAE6;
  --bad:#D92D20; --bad-ink:#B42318; --bad-bg:#FEF1F0;
  --sans:var(--font-geist,"Geist"),"Helvetica Neue",Arial,system-ui,sans-serif;
  --word:var(--font-outfit,"Outfit"),"Avenir Next","Century Gothic",system-ui,sans-serif;
  --mono:var(--font-plex-mono,"IBM Plex Mono"),ui-monospace,Menlo,monospace;
  --sh-hair:0 0 0 1px rgba(0,0,0,.06),0 1px 2px -1px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04);
  --sh-card:0 0 0 1px rgba(0,0,0,.05),0 18px 44px -18px rgba(16,24,40,.22);
  --spring:linear(0,.55 7%,.83 11.5%,1.02 16%,1.11 20.5%,1.145 25%,1.12 31%,1.05 39%,1.01 46%,.988 54%,.99 64%,1 82%,1);
  font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
:where(#er-auth),:where(#er-auth) *,:where(#er-auth) *::before,:where(#er-auth) *::after{box-sizing:border-box}
:where(#er-auth) :is(h1,h2,h3,h4,p,ul,ol,figure,blockquote){margin:0}
:where(#er-auth) :is(ul,ol){padding:0;list-style:none}
:where(#er-auth) a{color:inherit;text-decoration:none}
:where(#er-auth) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:where(#er-auth) button:disabled{cursor:default}
:where(#er-auth) input{font:inherit;color:inherit}
:where(#er-auth) img{display:block;max-width:none}
:where(#er-auth) :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}

:where(#er-auth) .i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(#er-auth) .row{display:flex;align-items:center;gap:10px}
:where(#er-auth) .col{display:flex;flex-direction:column}
:where(#er-auth) .sp{flex:1}
:where(#er-auth) .mono{font-family:var(--mono);font-weight:500}
:where(#er-auth) .container{width:100%;max-width:1080px;margin-inline:auto;padding-inline:20px}
:where(#er-auth) .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* type */
:where(#er-auth) .h1{font-size:46px;line-height:1.08;letter-spacing:-.045em;font-weight:470;text-wrap:balance}
:where(#er-auth) .h3{font-size:20px;line-height:1.3;letter-spacing:-.02em;font-weight:600}
:where(#er-auth) .lede{font-size:17px;line-height:1.55;color:var(--ink-2)}
:where(#er-auth) .cap{font-size:13.5px;line-height:1.45;color:var(--ink-3)}
:where(#er-auth) .eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
:where(#er-auth) .lnk{color:var(--red);font-weight:560}
:where(#er-auth) .lnk:hover{text-decoration:underline;text-underline-offset:3px}

/* brand */
:where(#er-auth) .brand{display:inline-flex;align-items:center;gap:7px;font-family:var(--word);font-weight:600;font-size:21px;letter-spacing:-.015em;color:var(--ink)}
:where(#er-auth) .brand svg{width:32px;height:32px;flex:none}

/* buttons */
:where(#er-auth) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:540;white-space:nowrap;transition:filter .15s,opacity .15s,background-color .15s}
:where(#er-auth) .btn-red{background:var(--red);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(24,61,154,.3),0 8px 18px -8px rgba(37,96,240,.6)}
:where(#er-auth) .btn-red:hover{filter:brightness(1.07)}
:where(#er-auth) .btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--sh-hair)}
:where(#er-auth) .btn-ghost:hover{background:var(--tile)}
:where(#er-auth) .btn:disabled{opacity:.6}
:where(#er-auth) .btn-sm{height:38px;padding:0 16px;font-size:14px}
:where(#er-auth) .btn-block{width:100%}
:where(#er-auth) .btn-tall{height:50px}
:where(#er-auth) .btn .i{width:15px;height:15px;stroke-width:2.2}
:where(#er-auth) .spin{width:15px;height:15px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:er-auth-spin .7s linear infinite}
:where(#er-auth) .spin-lg{width:28px;height:28px;border-width:3px;color:var(--red)}

/* message bubbles */
:where(#er-auth) .talk{display:flex;flex-direction:column;gap:12px}
:where(#er-auth) .talk-tight{gap:10px}
:where(#er-auth) .bub{position:relative;align-self:flex-start;max-width:88%;padding:12px 20px;border-radius:26px;background:#fff;box-shadow:0 10px 34px rgba(16,24,40,.06),0 0 0 1px rgba(0,0,0,.04);font-size:15.5px;line-height:1.5;overflow-wrap:anywhere;animation:er-auth-bub .35s cubic-bezier(.22,1,.36,1) both}
:where(#er-auth) .bub b{font-weight:600}
:where(#er-auth) .bub{border-bottom-left-radius:8px}
:where(#er-auth) .bub .tail{display:none}
:where(#er-auth) .bub.me{align-self:flex-end;background:var(--ink);color:var(--paper);box-shadow:0 10px 34px rgba(16,24,40,.1)}
:where(#er-auth) .bub.me{border-bottom-left-radius:26px;border-bottom-right-radius:8px}
:where(#er-auth) button.bub.me:hover{background:#2A303C}
:where(#er-auth) .bub.err{background:var(--bad-bg);color:var(--bad-ink);box-shadow:none}
:where(#er-auth) .bub.warn{background:var(--warn-bg);color:var(--warn-ink);box-shadow:none}
:where(#er-auth) .bub.ok{background:var(--ok-bg);color:var(--ok-ink);box-shadow:none}
:where(#er-auth) .bub.wide{align-self:stretch;max-width:none}
:where(#er-auth) .bub-more{display:block;margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.08);font-size:13.5px}
:where(#er-auth) .bub .btn{margin-top:10px}

/* fields */
:where(#er-auth) .fld{display:flex;align-items:center;gap:6px;height:54px;padding:5px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.09),0 8px 22px -12px rgba(24,61,154,.2);transition:box-shadow .15s}
:where(#er-auth) .fld:focus-within{box-shadow:0 0 0 1.5px var(--red),0 0 0 5px rgba(37,96,240,.12)}
:where(#er-auth) .fld.bad,:where(#er-auth) .fld.bad:focus-within{box-shadow:0 0 0 1.5px var(--bad),0 0 0 5px rgba(217,45,32,.12)}
:where(#er-auth) .fld input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;padding:0 6px 0 18px;font-size:16px;border-radius:999px}
:where(#er-auth) .fld input::placeholder{color:var(--ink-4)}
:where(#er-auth) .fld input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset;-webkit-text-fill-color:var(--ink)}
:where(#er-auth) .fld .btn{height:44px;padding:0 20px}
:where(#er-auth) .fld .eye{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;color:var(--ink-3)}
:where(#er-auth) .fld .eye:hover{background:var(--band);color:var(--ink)}
:where(#er-auth) .fld .eye .i{width:18px;height:18px}
:where(#er-auth) .lbl{display:block;font-size:14px;font-weight:540;margin-bottom:7px}
:where(#er-auth) .hint{font-size:13px;color:var(--ink-3);padding-left:18px;margin-top:8px}
:where(#er-auth) .agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink-2);cursor:pointer}
:where(#er-auth) .agree input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--red);flex:none}
:where(#er-auth) .agree a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
:where(#er-auth) .agree a:hover{text-decoration-color:currentColor}

/* the registration and login window */
:where(#er-auth) .backdrop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:30px 20px;background:linear-gradient(180deg,#fff 0,#F3F7FE 42%,#DFE9FB 100%);overflow:hidden}
/* the ground of the window: the brand's hexagons rising from the bottom edge, and the way home in the corner */
:where(#er-auth) .backdrop::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.25' height='42' viewBox='0 0 24.25 42'%3E%3Cpath fill='%232560F0' fill-opacity='.2' d='M12.12 6l3.9 2.25v4.5L12.12 15l-3.9-2.25v-4.5zM0 27l3.9 2.25v4.5L0 36l-3.9-2.25v-4.5zM24.25 27l3.9 2.25v4.5L24.25 36l-3.9-2.25v-4.5z'/%3E%3C/svg%3E") 50% 100%/24.25px 42px;-webkit-mask-image:linear-gradient(0deg,#000,transparent 62%);mask-image:linear-gradient(0deg,#000,transparent 62%);pointer-events:none}
:where(#er-auth) .bd-h{display:none}
:where(#er-auth) .bd-top{position:absolute;left:0;top:0;right:0;display:flex;align-items:center;height:72px;padding:0 28px}
:where(#er-auth) .card{position:relative;width:460px;max-width:100%;border-radius:28px;background:var(--paper);box-shadow:0 0 0 1px rgba(16,24,40,.05),0 40px 90px -30px rgba(24,61,154,.38);padding:26px 24px 20px}
:where(#er-auth) .backdrop .card{margin-top:118px;animation:er-auth-in .55s var(--spring) both}
:where(#er-auth) .card-k{position:absolute;left:50%;bottom:calc(100% - 22px);width:140px;height:160px;margin-left:-70px;pointer-events:none;user-select:none}
:where(#er-auth) .card-x{position:absolute;top:14px;right:14px;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink-3)}
:where(#er-auth) .card-x:hover{background:var(--band);color:var(--ink)}
:where(#er-auth) .card-grab{display:none}
:where(#er-auth) .card h2{font-size:24px;line-height:1.2;font-weight:540;letter-spacing:-.035em;text-align:center;margin-top:8px;text-wrap:balance}
:where(#er-auth) .card-sub{text-align:center;font-size:14.5px;color:var(--ink-3);margin-top:4px}
:where(#er-auth) .prog{height:3px;border-radius:2px;background:var(--line);margin:16px 0 18px;overflow:hidden}
:where(#er-auth) .prog i{display:block;height:100%;background:var(--red);border-radius:2px;transition:width .5s cubic-bezier(.22,1,.36,1)}
:where(#er-auth) .card-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--ink-3);text-align:center}
:where(#er-auth) .card-form{margin-top:16px}
:where(#er-auth) .card-stack{display:flex;flex-direction:column;gap:14px;margin-top:20px}
:where(#er-auth) .card-acts{display:flex;flex-direction:column;gap:10px;margin-top:18px}
:where(#er-auth) .card-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px}
:where(#er-auth) .card-row .lnk{font-size:14px;padding:6px 0}
:where(#er-auth) .note{margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink-3);text-align:center}
:where(#er-auth) .only-phone{display:none}

/* password rules on the new-password page: a tick shows a rule that is met */
:where(#er-auth) .rules{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:0 6px;font-size:14.5px;color:var(--ink-3)}
:where(#er-auth) .rules li{display:flex;align-items:center;gap:9px}
:where(#er-auth) .rules .i{stroke-width:2.6;opacity:.35}
:where(#er-auth) .rules .met{color:var(--ok-ink)}
:where(#er-auth) .rules .met .i{opacity:1}

/* full pages: the top bar, the login page, the new-password page, the page after activation */
:where(#er-auth) .page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:linear-gradient(180deg,#fff 0,#fff 30%,#EFF4FD 72%,#FBFCFF 100%)}
:where(#er-auth) .top{max-width:1180px;height:72px;flex:none}
:where(#er-auth) .top-back{gap:6px;padding:12px 0;font-size:14.5px}
:where(#er-auth) .top-back:hover{color:var(--ink)}
:where(#er-auth) .page-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 20px 70px}
:where(#er-auth) .page-mid .card{margin-top:120px;box-shadow:var(--sh-card)}

:where(#er-auth) .split{display:flex;flex-wrap:wrap;min-height:100vh;min-height:100dvh;background:#fff}
:where(#er-auth) .split-form{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;padding:28px 56px 30px}
:where(#er-auth) .split-box{display:flex;flex-direction:column;margin:auto;width:100%;max-width:420px;padding-block:40px}
:where(#er-auth) .split-k{display:none}
:where(#er-auth) .split-box .lede{margin-top:12px}
:where(#er-auth) .split-box .h1{margin-top:10px}
:where(#er-auth) .split-fields{display:flex;flex-direction:column;gap:16px;margin-top:30px}
:where(#er-auth) .split-fields .card-row .lnk{padding:12px 0}
:where(#er-auth) .split-alt{margin-top:22px;font-size:14.5px;text-align:center}
:where(#er-auth) .split-legal{flex-wrap:wrap;gap:6px 18px}
:where(#er-auth) .split-legal a:hover{color:var(--ink)}
:where(#er-auth) .split-side{flex:1 1 560px;min-width:0;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 48px;background:linear-gradient(180deg,#F0F4FD,#EEF1F8)}
:where(#er-auth) .hxd{position:absolute;pointer-events:none}
:where(#er-auth) .hxd path{fill:#2560F0}
:where(#er-auth) .hxd-a{right:-24px;top:-20px;width:380px;height:302px}
:where(#er-auth) .hxd-b{left:-40px;bottom:-30px;width:340px;height:270px}
:where(#er-auth) .split-big{position:relative;width:300px;height:343px}
:where(#er-auth) .quote{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}
:where(#er-auth) .quote .bub{align-self:center;max-width:420px;padding:16px 24px;font-size:20px;line-height:1.4;letter-spacing:-.01em;animation:none}
:where(#er-auth) .quote figcaption{font-size:14.5px}
:where(#er-auth) .stats{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:480px;margin-top:36px}
:where(#er-auth) .stats div{padding:2px 18px;border-left:1px solid var(--line-2)}
:where(#er-auth) .stats b{display:block;font-size:30px;line-height:1.1;font-weight:520;letter-spacing:-.045em;white-space:nowrap}

:where(#er-auth) .done{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:18px 56px}
:where(#er-auth) .done-k{width:210px;height:240px}
:where(#er-auth) .pill{display:inline-flex;align-items:center;gap:8px;margin-top:4px;height:30px;padding:0 12px;border-radius:999px;font-size:13.5px;font-weight:600}
:where(#er-auth) .pill .i{stroke-width:2.6}
:where(#er-auth) .pill-ok{background:var(--ok-bg);color:var(--ok-ink)}
:where(#er-auth) .pill-bad{background:var(--bad-bg);color:var(--bad-ink)}
:where(#er-auth) .done .h1{margin-top:16px}
:where(#er-auth) .done .lede{max-width:520px;margin-top:14px}
:where(#er-auth) .done-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
:where(#er-auth) .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:940px;margin-top:56px;text-align:left}
:where(#er-auth) .steps li{padding:4px 26px 6px;border-left:1px solid var(--line-2)}
:where(#er-auth) .steps li:last-child{border-right:1px solid var(--line-2)}
:where(#er-auth) .steps .mono{font-size:13px;color:var(--ink-3)}
:where(#er-auth) .steps .h3{margin-top:6px}
:where(#er-auth) .steps .cap{margin-top:6px;font-size:15px}

@keyframes er-auth-spin{to{transform:rotate(360deg)}}
@keyframes er-auth-bub{from{opacity:0;transform:translateY(6px)}}
@keyframes er-auth-in{from{opacity:0;transform:translateY(18px) scale(.98)}}
@keyframes er-auth-up{from{transform:translateY(100%)}}

/* the login page on narrow screens: one column, the helper above the title (board: MobilGiris) */
@media (max-width:1000px){
  :where(#er-auth) .split{background:linear-gradient(180deg,#fff 0,#fff 34%,#EFF4FD 72%,#FBFCFF 100%)}
  :where(#er-auth) .split-side{display:none}
  :where(#er-auth) .split-form{padding:16px 20px 24px}
  :where(#er-auth) .split-box{align-items:stretch;margin-block:0 auto;padding-block:18px 28px}
  :where(#er-auth) .split-k{display:block;align-self:center;width:150px;height:171px}
  :where(#er-auth) .split-box .eyebrow{margin-top:6px;text-align:center}
  :where(#er-auth) .split-box .h1{margin-top:8px;font-size:30px;line-height:1.12;letter-spacing:-.04em;font-weight:480;text-align:center}
  :where(#er-auth) .split-box .lede{margin-top:6px;font-size:15px;color:var(--ink-3);text-align:center}
  :where(#er-auth) .split-fields{gap:14px;margin-top:24px}
  :where(#er-auth) .split-legal{justify-content:center}
  :where(#er-auth) .split-legal .sp{display:none}
  :where(#er-auth) .brand{font-size:19px}
  :where(#er-auth) .brand svg{width:28px;height:28px}
}
@media (max-width:760px){
  :where(#er-auth) .h1{font-size:34px}
  :where(#er-auth) .steps{grid-template-columns:1fr;gap:18px;margin-top:40px}
  :where(#er-auth) .steps li,:where(#er-auth) .steps li:last-child{border-right:0;padding:2px 0 2px 18px}
  :where(#er-auth) .done-acts{flex-direction:column;align-self:stretch}
  :where(#er-auth) .top{height:60px}
  :where(#er-auth) .page-mid{padding:10px 16px 40px}
}

/* a window over a page that is already there (the name question over the panel) */
#er-auth:has(> .gate){background:none}
:where(#er-auth) .gate{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(16,24,40,.44);animation:er-auth-fade .25s both}
:where(#er-auth) .gate .card{margin-top:118px;animation:er-auth-in .55s var(--spring) both}
@keyframes er-auth-fade{from{opacity:0}}
/* phones: the window is a card that rises from the bottom (board: MobilKayit) */
@media (max-width:640px){
  :where(#er-auth) .backdrop{justify-content:flex-end;padding:0}
  :where(#er-auth) .bd-top{height:60px;padding:0 18px}
  /* the page behind the card: its one sentence, which the card covers as it grows */
  :where(#er-auth) .bd-h{display:block;position:absolute;left:24px;right:24px;top:84px;font-size:27px;line-height:1.14;font-weight:480;letter-spacing:-.04em;text-align:center;text-wrap:balance;color:var(--ink)}
  :where(#er-auth) .bd-h b{font-weight:inherit;color:var(--red)}
  :where(#er-auth) .backdrop .card{width:100%;margin-top:150px;border-radius:28px 28px 0 0;box-shadow:0 0 0 1px rgba(16,24,40,.05),0 -20px 60px -24px rgba(24,61,154,.4);padding:22px 18px 0;animation:er-auth-up .45s cubic-bezier(.22,1,.36,1) both}
  :where(#er-auth) .backdrop .card-in{max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain;margin-inline:-8px;padding:0 8px calc(26px + env(safe-area-inset-bottom,0px))}
  :where(#er-auth) .backdrop .card-k{width:118px;height:135px;margin-left:-59px;bottom:calc(100% - 19px)}
  :where(#er-auth) .gate{align-items:flex-end;padding:0}
  :where(#er-auth) .gate .card{width:100%;margin-top:150px;border-radius:28px 28px 0 0;padding:22px 18px 0;animation:er-auth-up .45s cubic-bezier(.22,1,.36,1) both}
  :where(#er-auth) .gate .card-in{padding:0 0 calc(22px + env(safe-area-inset-bottom,0px))}
  :where(#er-auth) .gate .card-k{width:118px;height:135px;margin-left:-59px;bottom:calc(100% - 19px)}
  :where(#er-auth) .gate .card h2{margin-top:12px}
  :where(#er-auth) .card-grab{display:block;position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line-2)}
  :where(#er-auth) .backdrop .card h2{margin-top:12px}
  :where(#er-auth) .card-row{padding:0 4px}
  :where(#er-auth) .card-row .lnk{padding:12px 0}
  :where(#er-auth) .only-phone{display:inline-flex}
  :where(#er-auth) .only-wide{display:none}
  :where(#er-auth) .card-stack .btn-block,:where(#er-auth) .card-acts .btn-block{height:50px}
}
@media (prefers-reduced-motion:reduce){
  :where(#er-auth) *,:where(#er-auth) *::before,:where(#er-auth) *::after{animation:none!important;transition:none!important}
}
:where(#er-auth) .talk:empty{display:none}
:where(#er-auth) .done .talk{align-items:center}
:where(#er-auth) .done .bub{align-self:center;text-align:left}
/* centred bubbles speak for no side: all four corners stay round */
:where(#er-auth) .quote .bub,:where(#er-auth) .done .bub{border-radius:26px}