/* ===================================================================
   /signup/ and /login/ — the auth shell and its forms.

   Builds on the marketing tokens in styles.css (--bg --black --deep --surface
   --grey --soft --white --ease) and the page shell in pages.css. Mobile first,
   laid out down to 375px.

   The forms are ours (build/signup.mjs): 48px pills and fields, .9rem radius,
   one dark focus ring, sentence-case buttons — the same choices the Clerk
   `appearance` used to encode, now plain CSS at the bottom of this file.
   =================================================================== */

.signup-body .page { gap: 2rem; max-width: 76rem; }
@media (min-width: 1024px) { .signup-body .page { gap: 2.75rem; } }

/* ------------------------------------------------------------------ grid */

.signup-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }
@media (min-width: 1024px) {
  .signup-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.signup-col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
/* On phones the form comes first: the picker is a nicety, signing up is not. */
.signup-col-left { order: 2; }
.signup-col-right { order: 1; }
@media (min-width: 1024px) {
  .signup-col-left { order: 1; }
  .signup-col-right { order: 2; position: sticky; top: 7.5rem; }
}

/* ------------------------------------------------------------ service chip */

.su-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--soft); color: var(--black);
  border-radius: 999px; padding: .45rem 1rem;
  font-size: .85rem; line-height: 1.2;
}
.su-chip[hidden] { display: none; }
.su-chip-slug { font-weight: 600; }

/* ----------------------------------------------------------- plan picker */

.plan-picker { border: 0; margin: 0; padding: 0; min-width: 0; }
.plan-legend {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 0; margin-bottom: .75rem;
  font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--black);
}
.plan-legend-note { font-size: .82rem; font-weight: 400; color: #6b7378; }

.plan-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 480px) { .plan-grid { grid-template-columns: 1fr 1fr; } }

.plan-card {
  position: relative;
  display: flex; flex-direction: column; gap: .3rem;
  background: #fff; border: 1px solid rgba(30,35,44,.12); border-radius: 1.25rem;
  padding: 1.1rem 1.1rem 1.15rem; cursor: pointer;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.plan-card:hover { border-color: rgba(30,35,44,.3); }
.plan-card.is-selected {
  border-color: var(--deep);
  box-shadow: inset 0 0 0 1px var(--deep);
}
.plan-card:focus-within { outline: 2px solid var(--deep); outline-offset: 3px; }

/* The radio stays in the accessibility tree and keeps keyboard selection
   working; the label is the visible control. */
.plan-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

.plan-flag {
  position: absolute; top: -.6rem; right: 1rem;
  background: var(--deep); color: var(--white);
  border-radius: 999px; padding: .2rem .6rem;
  font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.plan-name { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6b7378; }
.plan-card.is-selected .plan-name { color: var(--deep); }
.plan-price { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; color: var(--black); }
.plan-per { font-size: .82rem; font-weight: 400; letter-spacing: 0; color: #6b7378; margin-left: .15rem; }
.plan-lines { display: flex; flex-direction: column; gap: .2rem; margin-top: .35rem; }
.plan-line { font-size: .85rem; line-height: 1.4; color: #4b5257; }

/* -------------------------------------------------------- what happens next */

.su-next { display: flex; flex-direction: column; gap: .85rem; }
.su-next-title { font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--black); margin: 0; }
.su-next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; counter-reset: none; }
.su-next-item { display: flex; gap: .75rem; align-items: flex-start; }
.su-next-list.is-unordered .su-next-num { width: .5rem; height: .5rem; margin: .5rem .55rem 0 .55rem; }
.su-next-num {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: var(--deep); color: var(--white);
  font-size: .75rem; font-weight: 600;
}
.su-next-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.su-next-head { font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--black); }
.su-next-sub { font-size: .87rem; line-height: 1.45; color: #6b7378; }

/* ------------------------------------------------------------ signup card */

.signup-card {
  background: #fff;
  border: 1px solid rgba(30,35,44,.12);
  border-radius: 1.5rem;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: 0 24px 48px -36px rgba(12,16,22,.4);
  min-width: 0;
}
.signup-card-head { display: flex; flex-direction: column; gap: .3rem; }
.signup-card-title { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--black); margin: 0; }
.signup-card-sub { font-size: .9rem; line-height: 1.45; color: #6b7378; }

/* The mount point (legacy signup grid). */
.signup-mount { min-width: 0; display: flex; flex-direction: column; }
.signup-mount:empty { min-height: 0; }

.signup-fallback {
  font-size: .9rem; line-height: 1.5; color: #4b5257;
  background: var(--soft); border-radius: .9rem; padding: .85rem 1rem;
}
.signup-fallback[hidden] { display: none; }
.signup-fallback a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.signup-note { font-size: .9rem; line-height: 1.5; color: #4b5257; background: var(--soft); border-radius: .75rem; padding: .65rem .85rem; }

.su-fine { font-size: .9rem; color: #6b7378; }
.su-fine a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ aside */

.su-aside { min-width: 0; }
.su-aside .aside-card { max-width: 100%; }
@media (min-width: 1024px) {
  .su-aside .aside-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem 2rem; align-items: start; padding: 1.75rem 2rem; }
  .su-aside .aside-card h3 { grid-column: 1 / -1; margin-bottom: .5rem; }
  .su-aside .aside-card .su-aside-note { grid-column: 1 / -1; }
}
.su-aside-note { font-size: .85rem; line-height: 1.5; color: var(--grey); margin: .75rem 0 0; }

/* --------------------------------------------------------------- 375px trim */

@media (max-width: 400px) {
  .signup-card { padding: 1.15rem; border-radius: 1.25rem; }
  .plan-card { padding: .95rem; }
  .plan-price { font-size: 1.4rem; }
  .su-aside .aside-card { padding: 1.25rem; }
}


/* ===================================================================
   /login/ — the auth shell.

   A full-viewport split: the form pane on the left, a dark brand panel on the
   right from 1024px up. The page is generated with renderPage({ bare: true }),
   so there is no site header, no page hero and no marketing footer here.
   =================================================================== */

.auth-body { background: var(--white); }
.auth-body .cookie-bar, .auth-body .cookie-banner { z-index: 60; }

.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.auth-pane {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 100vh; min-height: 100dvh;
  padding: 1.25rem;
}
@media (min-width: 640px) { .auth-pane { padding: 1.75rem 2rem; } }
@media (min-width: 1024px) { .auth-pane { padding: 2rem 2.5rem; } }

/* ------------------------------------------------------------------- top bar */

.auth-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: 0 0 auto; }
.auth-logo { display: inline-flex; align-items: center; gap: .55rem; }
.auth-logo img { width: 1.75rem; height: 1.75rem; }
.auth-wordmark { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.045em; color: var(--black); }
.auth-bar-link {
  font-size: .875rem; font-weight: 500; color: var(--black);
  border: 1px solid rgba(30,35,44,.16); border-radius: 999px;
  padding: .5rem 1.1rem; white-space: nowrap;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.auth-bar-link:hover { border-color: rgba(30,35,44,.4); background: rgba(30,35,44,.04); }
/* The way back to squiid.io: these pages are served from the console host, so "/" is not it. */
.auth-bar-actions { display: inline-flex; align-items: center; gap: .85rem; }
.auth-bar-back { font-size: .875rem; font-weight: 500; color: rgba(30,35,44,.6); white-space: nowrap; transition: color .25s var(--ease); }
.auth-bar-back:hover { color: var(--black); }
@media (max-width: 420px) { .auth-bar-back { display: none; } }

/* --------------------------------------------------------------------- card */

.auth-main { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 1.25rem 0; min-width: 0; }

.auth-card {
  width: 100%; max-width: 25.5rem; min-width: 0;
  display: flex; flex-direction: column; gap: 1.1rem;
  background: #fff;
  border: 1px solid rgba(30,35,44,.10);
  border-radius: 1.5rem;
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(12,16,22,.04), 0 24px 56px -40px rgba(12,16,22,.45);
}
@media (max-width: 400px) { .auth-card { padding: 1.25rem; border-radius: 1.25rem; } }

.auth-head { display: flex; flex-direction: column; gap: .35rem; }
.auth-title { font-size: 1.65rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; color: var(--black); margin: 0; }
.auth-sub { font-size: .9rem; line-height: 1.45; color: #6b7378; }

.auth-mount { min-width: 0; display: flex; flex-direction: column; }

/* --------------------------------------------------------------- legal line */

.auth-legal {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem;
  font-size: .78rem; color: var(--grey);
  /* Positioned so the gift-code popover it carries paints over the card, which
     GSAP's entrance tween leaves in a stacking context of its own. */
  position: relative; z-index: 50;
}
.auth-legal a { color: #6b7378; }
.auth-legal a:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- brand panel */

.auth-brand { display: none; }
@media (min-width: 1024px) {
  .auth-brand {
    display: block; position: relative; overflow: hidden;
    background: var(--deep);
  }
  .auth-brand-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; filter: grayscale(1) contrast(1.04) brightness(1.12);
  }
  /* two videos are stacked; signup.js crossfades .is-active when the page switches */
  .auth-brand-video.is-active { opacity: .68; }
  .auth-brand-veil {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(12,16,22,.35) 0%, rgba(12,16,22,.05) 38%, rgba(12,16,22,.88) 100%),
      linear-gradient(90deg, rgba(12,16,22,.55) 0%, rgba(12,16,22,0) 42%);
  }
  .auth-brand-line {
    position: absolute; left: 3rem; right: 3rem; bottom: 3rem;
    font-size: clamp(1.9rem, 2.4vw, 2.6rem); font-weight: 600;
    letter-spacing: -0.045em; line-height: 1.08;
    color: var(--white);
  }
}
@media (prefers-reduced-motion: reduce) { .auth-brand-video { display: none; } }

/* ===================================================================
   The forms
   =================================================================== */

.auth-form { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.auth-form[hidden] { display: none; }

.auth-social { display: grid; grid-template-columns: 1fr; gap: .5rem; }

.auth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  height: 48px; min-height: 48px; width: 100%;
  border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: .95rem; font-weight: 600; letter-spacing: 0;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.auth-btn-primary { background: #0C1016; color: #F0F6F8; }
.auth-btn-primary:hover, .auth-btn-primary:focus-visible { background: #1E242C; }
.auth-btn-social { height: 44px; min-height: 44px; background: #fff; color: var(--black); border-color: rgba(30,35,44,.15); font-weight: 500; font-size: .9rem; }
.auth-btn-social:hover, .auth-btn-social:focus-visible { background: #F0F6F8; border-color: rgba(30,35,44,.3); }
.auth-btn-social svg { flex: 0 0 auto; }
.auth-btn[disabled], .auth-btn[aria-busy="true"] { opacity: .55; cursor: progress; }
.auth-btn:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }

.auth-rule { display: flex; align-items: center; gap: .85rem; margin: 0; color: #8b9296; font-size: .8rem; }
.auth-rule::before, .auth-rule::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(30,35,44,.12); }

.auth-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.auth-label { font-size: .85rem; font-weight: 500; color: #4b5257; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.auth-input {
  height: 44px; min-height: 44px; width: 100%;
  border-radius: .9rem; border: 1px solid rgba(30,35,44,.15);
  background: #fff; color: var(--black);
  padding: 0 1rem; font: inherit; font-size: .95rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.auth-input::placeholder { color: #a3a9ad; }
.auth-input:focus, .auth-input:focus-visible { outline: none; border-color: var(--deep); box-shadow: 0 0 0 1px var(--deep); }
.auth-input[aria-invalid="true"] { border-color: #9a3b3b; }

.auth-link { background: none; border: 0; padding: 0; font: inherit; color: #0C1016; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-link:hover { color: #1E242C; }
.auth-link-sm { font-size: .8rem; font-weight: 500; color: #6b7378; }
.auth-link-sm:hover { color: var(--black); }

.auth-msg { margin: 0; padding: .65rem .85rem; border-radius: .75rem; font-size: .875rem; line-height: 1.45; }
.auth-msg[hidden] { display: none; }
.auth-msg.is-error { background: rgba(154,59,59,.08); color: #9a3b3b; }
.auth-msg.is-notice { background: var(--soft); color: #1E232C; }

.auth-fine { margin: -.15rem 0 0; text-align: center; font-size: .78rem; line-height: 1.45; color: #8b9296; }
.auth-fine a { color: #6b7378; text-decoration: underline; text-underline-offset: 3px; }
.auth-fine a:hover { color: var(--black); }

/* "Check your email": the form folds down to the notice. The way to the other
   card is the pill in the top bar, which the fold never touches. */
.auth-form.is-sent > :not(.auth-msg) { display: none; }

/* the card's inner content is what animates on a sign-in ↔ sign-up switch */
.auth-swap-target { will-change: transform, opacity; }

/* Short laptop screens (a 1280x720 or 1366x768 panel, minus the browser chrome):
   the card is fixed to the viewport here, so it has to fit rather than scroll.
   One step down in every dimension, proportionally, so it still reads as the
   same card with room around it. */
@media (min-width: 1024px) and (max-height: 800px) {
  .auth-pane { padding: 1.25rem 2.5rem; }
  .auth-main { padding: .75rem 0; }
  .auth-card { gap: .9rem; padding: 1.5rem; }
  .auth-title { font-size: 1.45rem; }
  .auth-form { gap: .65rem; }
  .auth-social { gap: .45rem; }
  .auth-btn-social, .auth-input { height: 42px; min-height: 42px; }
  .auth-btn-primary { height: 46px; min-height: 46px; }
}

/* The auth screens are fixed to the viewport from 1024px up: nothing to scroll to.
   Below that the card can be taller than a phone screen, so scrolling stays on. */
@media (min-width: 1024px) {
  html:has(.auth-body), .auth-body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .auth-shell { height: 100vh; height: 100dvh; min-height: 0; }
  .auth-pane { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .auth-main { min-height: 0; }
  /* both forms sit in a box the height of the taller one (sign-up), so the two cards match */
}

/* -------------------------------------------------------------------
   "Have a code?": the SQUIIDY easter egg. A quiet link at the right end of the
   footer that opens a small popover above itself, rather than a row inside the
   card — on a sign-up card an always-there code field reads like a checkout
   page, and it made the card taller than a laptop screen. Only on sign-up; a
   cookie carries the code to the console (/start reads it), so it is
   independent of auth.
   ------------------------------------------------------------------- */
.auth-code { position: relative; margin-left: auto; display: inline-flex; }
.auth-code[hidden] { display: none; }
[data-auth-kind="sign-in"] .auth-code { display: none; }
.auth-code-toggle { padding: 0; border: 0; background: none; font: 500 .78rem/1.4 Inter, ui-sans-serif, system-ui, sans-serif; color: #8b9296; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color .2s; }
.auth-code-toggle:hover, .auth-code-toggle:focus-visible { color: #1E232C; text-decoration: underline; text-underline-offset: 3px; }
/* Once the code is in, the link says so and stops looking like an invitation. */
.auth-code.is-applied .auth-code-toggle { color: #2f9e63; font-weight: 600; }
.auth-code.is-applied .auth-code-toggle:hover { color: #2f9e63; }

/* The popover: anchored above the link, right-aligned so it can never run off
   the pane (which is `overflow: hidden` from 1024px up). */
.auth-code-pop {
  position: absolute; right: 0; bottom: calc(100% + .6rem); z-index: 40;
  width: 17.5rem; max-width: calc(100vw - 2.5rem);
  display: flex; flex-direction: column; gap: .5rem;
  background: #fff; border: 1px solid rgba(30,35,44,.10); border-radius: 1rem;
  padding: .9rem;
  box-shadow: 0 1px 2px rgba(12,16,22,.05), 0 18px 40px -22px rgba(12,16,22,.5);
}
.auth-code-pop[hidden] { display: none; }
.auth-code-title { font-size: .78rem; font-weight: 600; letter-spacing: .01em; color: #4b5257; }
.auth-code-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.auth-code-row .auth-code-input { flex: 1 1 auto; min-width: 0; }
.auth-code-input { height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid rgba(30,35,44,.14); background: #fff; font: 500 .85rem/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: #1E232C; outline: none; transition: border-color .2s, box-shadow .2s; }
.auth-code-input:focus { border-color: #1E232C; box-shadow: 0 0 0 3px rgba(30,35,44,.08); }
.auth-code-input.is-valid { border-color: #3ddc84; box-shadow: 0 0 0 3px rgba(61,220,132,.18); }
.auth-code-apply { flex: 0 0 auto; height: 40px; padding: 0 1rem; border: 0; border-radius: 999px; background: #0C1016; color: #F0F6F8; font: 600 .8rem/1 Inter, ui-sans-serif, system-ui, sans-serif; cursor: pointer; transition: background-color .2s; }
.auth-code-apply:hover:not(:disabled) { background: #1E242C; }
.auth-code-apply:disabled { opacity: .45; cursor: default; }
.auth-code-error { margin: 0; font-size: .78rem; line-height: 1.4; color: #9a3b3b; }
.auth-code-error[hidden] { display: none; }
.auth-code-ok { margin: 0; font-size: .78rem; line-height: 1.4; color: #2f9e63; }
.auth-code-ok[hidden] { display: none; }

/* Narrow screens: the popover spans the pane rather than hanging off the link. */
@media (max-width: 480px) {
  .auth-code-pop { right: 0; width: calc(100vw - 2.5rem); }
}

/* 16-bit confetti, ported from main.js's deep-end burst (styles.css .deep-confetti).
   Fixed to the viewport, and on <body>, because the pane it bursts from clips
   its overflow from 1024px up. */
.auth-confetti { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 80; }
.auth-confetti i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; display: block; }

/* The card with no auth behind it: the forms are replaced by one honest line
   (signup.js, /api/public/auth-config). */
.auth-notice { margin: 0; padding: .9rem 1rem; border-radius: .75rem; background: var(--soft); font-size: .875rem; line-height: 1.5; color: #1E232C; }
.auth-notice[hidden] { display: none; }
.auth-notice a { color: #0C1016; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }