/* Orbita — sign in and sign up.

   Loads after styles.css and takes its palette, its type and its brand mark, so
   the moment someone leaves the landing page they are plainly still on it.

   The page is two halves. The left half is the only thing that matters — one
   column, no more than four controls, nothing to read past the button. The
   right half is the argument for filling it in, and it is the first thing to go
   when the window gets narrow. */

/* ── shell ──────────────────────────────────────────────────────────────── */
body.auth-page{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
.auth-top{width:min(1220px,calc(100% - 64px));margin:auto;height:90px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:6}
.auth-top .brand{display:flex;align-items:center;gap:8px}
.auth-top-right{display:flex;align-items:center;gap:12px}
.auth-top-right a{font:500 11px DM Mono,monospace;color:var(--muted);text-decoration:none;transition:color .2s}
.auth-top-right a:hover{color:var(--ink)}
.auth-back{display:inline-flex;align-items:center;gap:7px}
.auth-back i{font-style:normal;font-size:14px;transition:transform .22s}
.auth-back:hover i{transform:translateX(-3px)}

.auth{flex:1;width:min(1220px,calc(100% - 64px));margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;padding:34px 0 60px}

/* ── the form side ──────────────────────────────────────────────────────── */
.auth-form{width:100%;max-width:404px}
.auth-form h1{font-size:clamp(40px,4.6vw,58px);line-height:.94;letter-spacing:-.08em;margin:18px 0 16px}
.auth-form h1 em{font-family:"Playfair Display",serif;font-weight:500;font-style:italic;letter-spacing:-.06em;color:var(--coral)}
.auth-lede{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 30px;max-width:370px}
.auth-alt{font:500 11px DM Mono,monospace;color:var(--muted);margin:26px 0 0}
.auth-alt a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.auth-fine{font:10px/1.7 DM Mono,monospace;color:var(--faint);margin:16px 0 0}
.auth-fine a{color:var(--muted);text-underline-offset:3px}

form.auth-fields{display:grid;gap:17px}
.legal-field{display:grid;gap:7px}
.legal-check{display:flex;align-items:flex-start;gap:10px;font:11px/1.55 "DM Sans",sans-serif;color:var(--muted);cursor:pointer}
.legal-check input{flex:none;width:16px;height:16px;margin:1px 0 0;accent-color:var(--coral)}
.legal-check a{color:var(--ink);text-underline-offset:3px}
.legal-field .say{font:10px/1.5 DM Mono,monospace;color:var(--faint);margin:0;min-height:14px}
.legal-field.bad .legal-check{color:var(--coral)}
.legal-field.bad .say{color:var(--coral)}

/* ── one field ──────────────────────────────────────────────────────────── */
.fld{display:grid;gap:7px}
.fld>label{font:500 10px DM Mono,monospace;letter-spacing:.09em;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.fld>label a{color:var(--muted);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--muted) 45%,transparent);letter-spacing:0}
.fld>label a:hover{color:var(--ink);border-color:var(--ink)}
.fld-box{position:relative;display:flex;align-items:center}
.fld input{width:100%;font:14px "DM Sans",sans-serif;color:var(--ink);background:var(--sheet);border:1px solid var(--card-line);border-radius:5px;padding:13px 14px;transition:border-color .18s,box-shadow .18s,background .18s}
.fld input::placeholder{color:var(--faint)}
.fld input:hover{border-color:color-mix(in srgb,var(--ink) 32%,transparent)}
.fld input:focus{outline:none;border-color:var(--purple);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 17%,transparent)}
.fld input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 40px var(--sheet) inset}

.peek{position:absolute;right:6px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:4px;background:none;color:var(--muted);cursor:pointer;transition:color .18s,background .18s}
.peek:hover,.peek:focus-visible{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent);outline:none}
.peek svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.peek .off{display:none}
.peek[aria-pressed=true] .on{display:none}
.peek[aria-pressed=true] .off{display:block}
.fld-box:has(.peek) input{padding-right:44px}

/* A note that is not an error, and an error that replaced it. Both live in the
   same row so the form never jumps by the height of a line of text. */
.fld .say{font:10px/1.5 DM Mono,monospace;color:var(--faint);min-height:14px;transition:color .18s}
.fld.bad input{border-color:var(--coral)}
.fld.bad input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 20%,transparent)}
.fld.bad .say{color:var(--coral)}
.fld.good .say{color:#2f9e6e}
:root[data-theme=dark] .fld.good .say{color:#5ad39a}

/* ── password strength ──────────────────────────────────────────────────── */
.meter{display:flex;gap:4px;margin-top:2px}
.meter i{flex:1;height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 12%,transparent);transition:background .3s}
.meter[data-score="1"] i:nth-child(-n+1){background:var(--coral)}
.meter[data-score="2"] i:nth-child(-n+2){background:#e8a33f}
.meter[data-score="3"] i:nth-child(-n+3){background:#d3b93c}
.meter[data-score="4"] i{background:#2f9e6e}

/* ── caps lock ──────────────────────────────────────────────────────────── */
.caps{display:flex;align-items:center;gap:7px;font:10px DM Mono,monospace;color:var(--on-sun);background:var(--sun);border-radius:4px;padding:7px 10px;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s;pointer-events:none;height:0;overflow:hidden;padding-block:0}
.caps.on{opacity:1;transform:none;height:auto;padding-block:7px}

/* ── submit ─────────────────────────────────────────────────────────────── */
.auth-go{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:6px;padding:15px 17px;border:0;border-radius:4px;background:var(--coral);color:#fff;font:500 11px DM Mono,monospace;letter-spacing:.03em;cursor:pointer;transition:transform .2s,box-shadow .2s,opacity .2s}
.auth-go:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 20px color-mix(in srgb,var(--coral) 38%,transparent)}
.auth-go:disabled{cursor:default;opacity:.72}
.auth-go span{font-size:17px;line-height:0}
.auth-go .spin{position:absolute;width:15px;height:15px;border-radius:50%;border:2px solid #ffffff55;border-top-color:#fff;opacity:0;animation:auth-spin .7s linear infinite}
.auth-go.busy b,.auth-go.busy span{opacity:0}
.auth-go.busy .spin{opacity:1}
@keyframes auth-spin{to{transform:rotate(360deg)}}

/* The one thing that went wrong with the whole form rather than one field. */
.auth-wrong{display:none;align-items:flex-start;gap:9px;font:11px/1.55 DM Mono,monospace;color:var(--coral);background:color-mix(in srgb,var(--coral) 10%,transparent);border:1px solid color-mix(in srgb,var(--coral) 34%,transparent);border-radius:5px;padding:11px 13px}
.auth-wrong.on{display:flex;animation:auth-shake .42s cubic-bezier(.36,.07,.19,.97)}
.auth-wrong svg{flex:none;width:15px;height:15px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@keyframes auth-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

/* Told after the fact, and it says the same thing whether or not the address
   has an account — otherwise the form doubles as a way to ask which of your
   colleagues has one. */
.auth-said{display:none;align-items:flex-start;gap:9px;font:11px/1.6 DM Mono,monospace;color:var(--ink);background:var(--sheet-hi);border:1px solid var(--card-line);border-radius:5px;padding:13px 14px}
.auth-said.on{display:flex}
/* Inside the form it is a grid row and the gap already spaces it; standing on
   its own above the heading it has to make its own room. */
.auth-form>.auth-said,.pane>.auth-said{margin-bottom:22px}
.auth-said svg{flex:none;width:15px;height:15px;margin-top:2px;fill:none;stroke:var(--coral);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Two forms in one slot: sign in, and the one that asks for a reset link. */
.pane[hidden]{display:none}

/* ── the argument side ──────────────────────────────────────────────────── */
.auth-art{position:relative;align-self:stretch;min-height:520px;border-radius:8px;background:var(--slab);color:var(--onslab);padding:40px 38px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;box-shadow:14px 15px var(--coral)}
.auth-art .eyebrow{color:#a49ccd;position:relative;z-index:2}
.auth-rings{position:absolute;right:-70px;top:-90px;width:330px;height:330px;pointer-events:none}
.auth-rings i{position:absolute;inset:0;border:2px solid color-mix(in srgb,var(--onslab) 15%,transparent);border-radius:50%;transform:rotate(-28deg)}
.auth-rings i:nth-child(2){inset:64px -24px;border-color:color-mix(in srgb,var(--coral) 55%,transparent);transform:rotate(26deg)}
.auth-rings i:nth-child(3){inset:-18px 92px;border-color:color-mix(in srgb,var(--yellow) 42%,transparent);transform:rotate(40deg)}
.auth-rings b{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 12px color-mix(in srgb,var(--coral) 16%,transparent)}

/* The call and what comes back. Nothing here is a real request — it is the
   shape of one, which is the only thing worth showing before an account. */
.auth-demo{position:relative;z-index:2;margin:26px 0 0;border-radius:6px;background:color-mix(in srgb,#000 22%,transparent);border:1px solid color-mix(in srgb,var(--onslab) 11%,transparent)}
.auth-demo-top{display:flex;align-items:center;gap:5px;padding:11px 13px;border-bottom:1px solid color-mix(in srgb,var(--onslab) 11%,transparent)}
.auth-demo-top i{width:7px;height:7px;border-radius:50%;background:#948cb6}
.auth-demo-top b{font:10px DM Mono,monospace;color:#d4cff4;margin-left:8px;font-weight:400}
.auth-demo-top u{margin-left:auto;text-decoration:none;font:10px DM Mono,monospace;color:#8981ae}
/* Not a <pre>: the lines are separate blocks so they can arrive one at a time,
   and inside a <pre> the newline between two of them would print as a blank
   line of its own. Each block keeps its own leading spaces instead. */
.auth-demo .code{padding:17px 18px;font:11px/1.85 DM Mono,monospace;color:#dedbf0}
.auth-demo .k{color:#b8abff}
.auth-demo .s{color:#ffc36c}
.auth-demo .n{color:#c8ffad}
.auth-demo .c{color:#8981ae}
.auth-demo .hit{display:block;white-space:pre-wrap;word-break:break-word;min-height:1.85em;opacity:0;transform:translateY(6px)}
.auth-demo .hit.in{opacity:1;transform:none;transition:opacity .34s ease,transform .44s cubic-bezier(.22,1,.36,1)}
html:not(.motion) .auth-demo .hit{opacity:1;transform:none}

.auth-points{position:relative;z-index:2;list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.auth-points li{position:relative;padding-left:22px;font-size:12.5px;line-height:1.5;color:#c3bce0}
.auth-points li:before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:var(--yellow)}
.auth-points li b{color:var(--onslab);font-weight:600}

/* ── the preview strip ──────────────────────────────────────────────────── */
/* Loud on purpose. There is no server behind these forms until ORBITA_API is
   set, and nobody should be able to mistake this build for one that has one. */
.demo-strip{position:relative;z-index:7;width:min(1220px,calc(100% - 64px));margin:0 auto;display:flex;align-items:center;gap:10px;font:10px/1.5 DM Mono,monospace;color:var(--on-sun);background:var(--sun);border-radius:5px;padding:9px 13px}
.demo-strip svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.demo-strip b{font-weight:500}

/* ── entrances ──────────────────────────────────────────────────────────── */
/* Same contract as the landing page: hidden only while the document can
   actually animate its way back, so a page that cannot is a page that reads. */
/* Hidden by selector, not by script, so there is never a frame where the form
   is painted and then snaps out of sight. The pane itself is skipped: on the
   page that has two of them the stagger belongs to the rows inside, and a pane
   that is still closed keeps its rows hidden until it opens. */
html.motion .auth-form>*:not(.pane),html.motion .auth-form .pane>*{opacity:0;transform:translateY(15px)}
html.motion .auth-form>.in,html.motion .auth-form .pane>.in{opacity:1;transform:none;transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)}
html.motion .auth-art{opacity:0;transform:translateY(22px) scale(.985)}
html.motion .auth-art.in{opacity:1;transform:none;transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1)}
html.motion .auth-page .demo-strip{opacity:0}
html.motion .auth-page .demo-strip.in{opacity:1;transition:opacity .5s ease .3s}
html.motion.still .auth-form *,html.motion.still .auth-art,html.motion.still .demo-strip,html.motion.still .auth-demo .hit{transition:none!important}

@media(prefers-reduced-motion:reduce){.auth-go .spin{animation:none}}

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .auth-top,.auth,.demo-strip{width:calc(100% - 36px)}
  .auth{grid-template-columns:1fr;padding:18px 0 44px}
  .auth-form{max-width:none;margin:0 auto;width:min(430px,100%)}
  .auth-art{display:none}
}
@media(max-width:430px){
  .auth-form h1{font-size:38px}
  .auth-top-right .auth-hide{display:none}
}