/* Sign in / create account, after the user's mockup (2026-09-25): a blue
   panel with the real board in a tablet and Tara beside it, and the form in a
   white card. Loaded after css/site.css and scoped to .auth, so nothing else
   that uses site.css moves. The mockup's Google / Apple / Microsoft buttons are
   left out on purpose: there is no social sign-in behind them, and a button
   that does nothing is worse than no button. */
.auth{--l-ink:#10244b;--l-soft:#61718c;--l-faint:#8a97ad;--l-line:#e2eaf6;--l-blue:#1677ff;font-family:Inter,system-ui,Arial,sans-serif}

/* ------------------------------------------------------------ the panel */
/* site.css pins this panel at height:100vh + overflow:hidden. A REAL browser
   window gives far less than the screen's own height once tabs, the address
   bar and bookmarks are gone -- often 600-650px, not 900+ -- so that fixed
   100vh was clipping the panel's own bottom content there even in Sign in
   (user's screenshot, 2026-09-26: a scrollbar for a form that fits, because
   the LEFT column didn't). Two changes: the panel is trimmed to actually fit
   a short real window, and `sticky` (not a hard 100vh + overflow:hidden)
   keeps it in view if the form ever does need to scroll past it, without
   ever cropping its own content. */
.auth .auth-side{position:sticky;top:0;height:auto;min-height:100vh;overflow:visible;
  padding:34px 52px 22px;justify-content:center;gap:2px;
  background:radial-gradient(700px 420px at 85% 10%,#3fb8ff55,transparent 60%),linear-gradient(150deg,#1d4fe0 0%,#1f6ff0 50%,#27a8f2 100%)}
.auth .auth-side::before{background-image:radial-gradient(#ffffff2e 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%)}
.auth .auth-side .brand{position:static;margin:0 0 14px;font-size:22px;font-weight:900;color:#fff}
.auth .auth-side .brand span{color:#bfe8ff}
.auth .auth-side h2{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-1.2px;line-height:1.1;max-width:20ch;margin:0 0 8px}
.auth .auth-side h2 .hand{display:inline-block;font-size:1.1em;color:#ffd75a;padding-bottom:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C30 2 70 2 118 6' fill='none' stroke='%23ffd75a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") bottom/100% 7px no-repeat}
.auth .auth-side > p{font-size:14.5px;opacity:.94;max-width:46ch;margin:0 0 10px;line-height:1.4}
.ls-rocket{width:74px;right:34px;top:18px;transform:rotate(18deg);filter:drop-shadow(0 10px 18px #0003)}

.ls-stage{position:relative;height:clamp(150px,19vw,205px);margin:2px 0 12px;display:flex;justify-content:center;flex:none}
/* The source (768x400) has a stray speech-bubble corner and logo shadow at
   the crop edges -- too small a source to crop them out cleanly. Faded
   instead of cropped: a soft mask dissolves the top and left edges into the
   panel's own blue, which reads as intentional rather than a bad crop. */
.ls-shot{
  width:auto;height:100%;max-width:78%;border-radius:20px;box-shadow:0 22px 46px #0a1f5a5c;transform:rotate(-1.5deg);
  object-fit:cover;object-position:top;
  /* The source's own leftover speech-bubble text sits in the top-right corner
     and reaches further down than the hair does, so a straight top/diagonal
     fade either left the text showing or cut into the hair. An ellipse
     anchored on just that corner dissolves the bubble into the panel's blue
     without touching the hair on the left or the board below it. */
  -webkit-mask-image:radial-gradient(210px 105px at 100% -6%,transparent 62%,#000 100%);
  mask-image:radial-gradient(210px 105px at 100% -6%,transparent 62%,#000 100%);
}
.ls-bubble{position:absolute;right:2%;top:-12%;background:#fff;color:#1d4fe0;border-radius:50%;width:92px;height:92px;
  display:grid;place-items:center;text-align:center;font-family:'Caveat',cursive;font-size:15px;font-weight:700;line-height:1;
  transform:rotate(-8deg);box-shadow:0 10px 22px #0a1f5a40;z-index:2}
.auth .ls-pick{display:none}

.auth .auth-side ul.ls-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px;flex:none}
.auth .auth-side ul.ls-feats li{align-items:center;gap:8px;background:#ffffffe6;color:var(--l-ink);border-radius:13px;
  padding:9px 10px;font-size:11.5px;font-weight:600;line-height:1.22;box-shadow:0 8px 18px #0a1f5a2a}
.auth .auth-side ul.ls-feats li i{width:30px;height:30px;border-radius:9px;background:none;flex:none}
.auth .auth-side ul.ls-feats li i svg{width:16px;height:16px}
.ls-foot{margin:0 0 0 auto !important;font-family:'Caveat',cursive;font-size:16px !important;line-height:1.05 !important;
  text-align:right;transform:rotate(-4deg);opacity:.9 !important;max-width:none !important;color:#fff;flex:none}

/* ------------------------------------------------------------- the form */
.auth .auth-main{background:
  radial-gradient(600px 360px at 100% 0,#fdeef6,transparent 60%),#f5f8fd;padding:20px 48px}
.auth .auth-main .top{justify-content:flex-end;gap:12px}
.auth .auth-main .top #mobileBrand{margin-right:auto}
.auth .auth-main .top #mobileBrand{text-decoration:none;font-weight:900;font-size:22px}
.auth .auth-main .top span a{color:var(--l-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.auth .auth-box{width:min(500px,100%);background:#fff;border:1px solid var(--l-line);border-radius:24px;padding:20px 32px 18px;
  box-shadow:0 30px 70px rgba(23,75,131,.12);margin:auto}
.auth .auth-box h1{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-1.2px;color:var(--l-ink);margin:0 0 3px;line-height:1.08}
.auth .auth-box .sub{color:var(--l-soft);font-size:13.5px;margin:0 0 2px}
/* Tightened across the board (not just for the taller Create account form):
   Sign in already had room to spare, and a real browser window is shorter
   than the screen it runs on once its own chrome is gone (user, 2026-09-26:
   "remove scroll from registration also"). The password HELP text is one
   short line now, not two -- the input's own placeholder already says "At
   least 8 characters", so the paragraph below it only had to add the rest. */
.auth .field{margin-bottom:7px}
.auth .field .help,.auth .field .err{margin-top:2px;font-size:11.5px;line-height:1.3}
.auth .meter{margin-top:4px}
.auth .row2{gap:0 14px}
.auth .tabs2{margin-bottom:11px !important}
.auth .tabs2{background:#f1f5fb;border:1px solid var(--l-line);border-radius:999px;padding:4px}
.auth .tabs2 button{border-radius:999px;padding:8px;font-size:14px;font-weight:600;color:var(--l-soft)}
.auth .tabs2 button.on{background:linear-gradient(135deg,var(--l-blue),#1d8cf5);color:#fff;box-shadow:0 8px 20px #1677ff38}
.auth .field label{font-weight:700;font-size:13px;color:var(--l-ink);margin-bottom:4px}
.auth .field input,.auth .field select{border:1px solid #dbe4f1;border-radius:12px;padding:10px 14px;font-size:14px;background:#fff}
.auth .field input:focus,.auth .field select:focus{border-color:#8fb8f9;box-shadow:0 0 0 4px #1677ff1c}
.auth .inp{position:relative}
.auth .inp .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--l-faint);pointer-events:none}
.auth .inp input{padding-left:44px}
.auth .pw.inp input{padding-right:64px}
.auth .pw button{color:var(--l-soft);font-weight:600;font-size:13px}
.auth .linkbtn,.auth .auth-foot a{color:var(--l-blue);font-weight:600}
.auth .auth-foot .linkbtn{text-decoration:underline;text-underline-offset:3px}
.auth .auth-foot{margin-top:9px !important;font-size:13px}
.auth .fine{margin-top:6px !important;font-size:11.5px}
.auth .seg{border-radius:12px;background:#fff;border-color:#dbe4f1}
.auth .seg button{font-weight:700}
.auth .seg button.on{background:var(--l-blue);color:#fff;box-shadow:0 6px 14px #1677ff33}
.auth #submit{border-radius:14px;padding:11px;font-size:15.5px;font-weight:800;margin-top:2px;
  background:linear-gradient(135deg,#0f62fe,#1d8cf5);box-shadow:0 14px 30px #1677ff40}
.auth #submit::after{content:" \2192";font-weight:800}
.auth #submit:disabled::after{content:none}
.auth .btn.primary{border-radius:15px}

/* ------------------------------------------------------------- narrower */
@media (max-width:1280px){
  .auth .auth-side{padding:92px 40px 36px}
  .auth .auth-side .brand{left:40px}
  .auth .auth-side ul.ls-feats li{flex-direction:column;align-items:flex-start;font-size:13px}
  .auth .ls-pick{display:none}
}
@media (max-width:1020px){
  .auth .auth-main{padding:22px 18px}
  .auth .auth-box{margin:28px auto}
}
@media (max-width:560px){
  .auth .auth-box{padding:28px 20px 24px;border-radius:22px}
  .auth .auth-main .top{flex-wrap:wrap;font-size:13px}
}