/* Signup dialogs (lib/signup.js): the island, opened into a form. A black panel that grows out of the
   notch's camera housing (the island that hung there tucks in first, and grows back out on close), a
   4%→20% rim like the Solid island expanded, panes that squeeze-blur in, the site's own notch CTA.
   Shared; owned by the architect. */

html.su-open{overflow:hidden}

.su{position:fixed;inset:0 0 auto;margin:0 auto;padding:0;border:0;background:none;color:var(--fg);
  width:min(540px,calc(100vw - 16px));max-width:none;max-height:100svh;overflow:visible;
  border-radius:0 0 30px 30px;filter:drop-shadow(0 26px 40px rgb(0 0 0/.5)) drop-shadow(0 12px 22px rgb(0 0 0/.3))}   /* follows the panel's clip (signup.js) */
/* the band stays crisp above the dim: the panel reads as part of the same hardware */
.su::backdrop{clip-path:inset(40px 0 0 0);background:rgb(7 7 8/.5);-webkit-backdrop-filter:blur(6px) saturate(.9);backdrop-filter:blur(6px) saturate(.9)}
@media (max-width:767px){.su::backdrop{clip-path:inset(44px 0 0 0)}}
.su:focus{outline:none}

.su__panel{position:relative;max-height:100svh;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(255 255 255/.22) transparent;
  border:1px solid transparent;border-top:0;border-radius:0 0 30px 30px;
  background:linear-gradient(#000,#000) padding-box,
    linear-gradient(transparent var(--band-h),rgb(255 255 255/.06) calc(var(--band-h) + 24px),rgb(255 255 255/.2)) border-box;
  padding:0 clamp(20px,5vw,34px) clamp(22px,4vw,30px);
  font-family:var(--f-display);font-stretch:100%}

/* header band beside the housing, like the island's pinned header; the camera lens sits in the gap */
.su__hd{display:flex;align-items:center;height:var(--band-h);font:500 12px/1 var(--f-ui);color:var(--fg-2)}
.su__app,.su__hd-r{flex:1 1 0;min-width:0;display:flex;align-items:center}
.su__app{gap:7px;white-space:nowrap;overflow:hidden}
.su__app img{width:14px;height:14px;flex:none}
.su__gap{position:relative;flex:none;align-self:stretch;width:var(--gap,244px)}
.su__lens{position:absolute;left:50%;top:calc(16px * var(--ns,1.25));width:calc(7px * var(--ns,1.25));aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,rgb(90 110 255/.35) 0 calc(1px * var(--ns,1.25)),transparent calc(1.6px * var(--ns,1.25))),#0A0B10;
  box-shadow:inset 0 0 0 .5px rgb(255 255 255/.07)}
.su__hd-r{justify-content:flex-end}
.su__x{display:grid;place-items:center;width:32px;height:32px;margin-right:-8px;border-radius:50%;color:var(--fg-2);transition:background var(--d-micro),color var(--d-micro)}
.su__x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.su__x:hover{background:rgb(255 255 255/.1);color:var(--fg)}
.su__x:focus-visible{outline:2px solid var(--teal);outline-offset:0;box-shadow:none}
@media (max-width:440px){.su__app span{display:none}.su__app img{width:16px;height:16px}}

.su__body{transform-origin:50% 0}
.su-kicker{display:flex;align-items:center;gap:9px;margin-top:22px;font:500 11px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.su-title:focus-visible{outline:none;box-shadow:none}
.su-title{margin-top:12px;font:780 clamp(30px,4.4vw,42px)/.96 var(--f-display);font-stretch:78%;letter-spacing:-.03em;color:var(--fg);text-wrap:balance;outline:none}
.su-lede{margin-top:12px;max-width:44ch;font:420 16px/1.45 var(--f-display);font-stretch:96%;color:var(--fg-2);text-wrap:pretty}
.su-lede strong{color:var(--fg);font-weight:600}
.su-lede code{padding:1px 5px;border-radius:5px;background:rgb(255 255 255/.1);color:var(--fg);font:400 .86em/1 var(--f-mono)}

/* the done kicker: a 22px ring that fills, then a teal check (static = the finished state) */
.su-tick{width:22px;height:22px;flex:none;margin:-4px 0}
.su-tick svg{width:100%;height:100%;overflow:visible}
.su-tick circle,.su-tick path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.su-tick .trk{stroke:rgb(255 255 255/.2)}
.su-tick .val{stroke:var(--teal);stroke-dasharray:100;stroke-dashoffset:0;opacity:.35;transform:rotate(-90deg);transform-origin:12px 12px}
.su-tick .chk{stroke:var(--teal);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:0}

.su-form{display:block}
.su-field{display:block;margin-top:14px}
.su-form .su-lede + .su-field{margin-top:22px}
.su-field__lbl{display:block;margin-bottom:7px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.su-field input{display:block;width:100%;height:52px;padding:0 16px;border-radius:14px;border:1px solid rgb(255 255 255/.14);
  background:rgb(255 255 255/.06);color:var(--fg);font:400 17px/1 var(--f-display);font-stretch:100%;caret-color:var(--teal);
  transition:border-color var(--d-micro),background var(--d-micro),box-shadow var(--d-micro)}
.su-field input::placeholder{color:rgb(236 237 232/.38)}
.su-field input:hover{border-color:rgb(255 255 255/.24)}
.su-field input:focus,.su-field input:focus-visible{outline:none;border-color:var(--teal);background:rgb(255 255 255/.08);box-shadow:0 0 0 3px rgb(92 201 166/.22)}
.su-field input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgb(242 107 107/.2)}
.su-field input:-webkit-autofill{-webkit-text-fill-color:var(--fg);-webkit-box-shadow:0 0 0 40px #151615 inset;transition:background-color 9999s}
.su-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.su-err{margin-top:10px;font:650 14px/1.4 var(--f-display);color:var(--red)}   /* red is always bold */
.su-err:empty{margin:0}   /* always in the DOM (a live region), takes no room until it speaks */

/* the site's CTA, on night: it hangs from a hairline under the form, like every Download on the page */
.su .cta-hang{margin-top:24px}
.su .cta[disabled]{cursor:progress}
@media (max-width:440px){.su .cta--l .cta__label{font-size:19px}}

.su-fine{margin-top:14px;font:420 14px/1.45 var(--f-display);font-stretch:96%;color:var(--fg-2);text-wrap:pretty}
.su-req{margin-top:8px;font:400 11.5px/1.5 var(--f-mono);color:var(--fg-3);font-variant-numeric:tabular-nums;text-wrap:balance}
.su-req span{white-space:nowrap}
.su-fine a,.su-req a{color:var(--fg);text-decoration-color:rgb(236 237 232/.35);text-underline-offset:.2em}
.su-fine a:hover,.su-req a:hover{color:#fff;text-decoration-color:currentColor}
.su-done .cta-hang{margin-top:22px}

/* the star nudge */
.su-star{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 14px 14px 16px;border-radius:18px;
  background:rgb(255 255 255/.05);border:1px solid rgb(255 255 255/.08)}
.su-done .cta-hang + .su-star{margin-top:0}
.su-star p{flex:1;min-width:0;font:420 14px/1.4 var(--f-display);font-stretch:96%;color:var(--fg-2)}
.su-star strong{display:block;color:var(--fg);font-weight:650}
@media (max-width:400px){.su-star{flex-direction:column;align-items:stretch}.su-star .gh-chip{justify-content:center}}

.su-done-btn{display:inline-flex;align-items:center;justify-content:center;min-width:120px;height:44px;margin-top:18px;padding:0 22px;border-radius:var(--r-pill);
  border:1px solid rgb(255 255 255/.16);color:var(--fg);font:650 15px/1 var(--f-display);font-stretch:96%;transition:background var(--d-micro),border-color var(--d-micro)}
.su-done-btn:hover{background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.28)}
.su-done-btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px;box-shadow:none}