/* ---------------------------------------------------------------------------
   Sign in / create account (sign-in.html), and the "check your email" wait (confirm-email.html):
   one full screen that never scrolls and never shows the footer. A brand panel on the left, the
   form on the right. If the form is taller than a small screen (a phone with the keyboard open),
   only the form panel scrolls inside itself; the page stays put.
   --------------------------------------------------------------------------- */
body.auth-screen { height: 100vh; height: 100dvh; overflow: hidden; }
body.auth-screen .site-topbar,
body.auth-screen .site-footer,
body.auth-screen .cursor-dot { display: none !important; }
body.auth-screen main#main.auth-main {
  height: 100vh; height: 100dvh; padding: 0 !important; max-width: none; margin: 0;
  display: grid; grid-template-columns: 1fr minmax(300px, 42%);
}

.auth-brand {
  order: 2; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 4vw, 44px); color: #fff; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 4px), linear-gradient(135deg, #ff7a00 0%, #1c1c1f 100%);
}
/* the logo sits straight on the indigo, as a white mark, with no square behind it */
.auth-brand-logo { display: inline-flex; width: 52px; height: 52px; }
.auth-brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.auth-brand .auth-tagline { margin: 0; max-width: 420px; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; font-weight: 500; letter-spacing: -0.035em; color: #fff; }
.auth-brand .auth-links { display: flex; gap: 10px; margin-top: 22px; font-size: 14px; color: #ffcc99; text-transform: lowercase; }
.auth-brand .auth-links a { color: #fff1de; text-decoration: underline; text-underline-offset: 3px; }
.auth-brand .auth-links a:hover { color: #fff; }

.auth-pane { order: 1; display: flex; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(16px, 3vh, 36px) clamp(18px, 4vw, 48px); }
body.auth-screen .auth-wrap { width: min(440px, 100%); max-width: 440px; margin: auto; padding: 0; text-align: left; }
body.auth-screen .auth-tabs { margin-bottom: clamp(14px, 3vh, 26px); }
body.auth-screen .auth-form .field { margin-bottom: clamp(8px, 1.6vh, 14px); }
body.auth-screen .auth-form .field-hint { margin: 4px 0 0; font-size: 11.5px; line-height: 1.4; }
body.auth-screen .auth-submit { margin-top: 8px; }
body.auth-screen .auth-terms-note, body.auth-screen .auth-status { margin: 8px 0 0; font-size: 12px; min-height: 0; }

/* confirm-email.html: waiting for the confirmation link to be clicked */
.confirm-wait { text-align: center; }
.confirm-wait.is-hidden { display: none; }
.confirm-wait h1 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 30px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.confirm-wait .auth-help { text-align: center; margin: 0 auto 22px; max-width: 360px; }
.confirm-wait .auth-status { text-align: center; }
.confirm-wait .auth-terms-note { text-align: center; }
.confirm-spin {
  width: 34px; height: 34px; margin: 0 auto 22px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: confirm-spin 900ms linear infinite;
}
@keyframes confirm-spin { to { transform: rotate(360deg); } }
.confirm-acts { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .confirm-spin { animation-duration: 1800ms; } }

/* create folder: pairs of fields side by side so everything fits on one screen */
body.auth-screen #formSignUp { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
body.auth-screen #formSignUp .field:nth-of-type(3),
body.auth-screen #formSignUp .field:nth-of-type(6),
body.auth-screen #formSignUp .auth-submit,
body.auth-screen #formSignUp .auth-terms-note,
body.auth-screen #formSignUp .auth-status { grid-column: 1 / -1; }
body.auth-screen #formSignUp.is-hidden { display: none; }

@media (max-width: 860px) {
  body.auth-screen main#main.auth-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand { order: 0; flex-direction: row; align-items: center; padding: 12px 18px; }
  .auth-pane { order: 1; }
  .auth-brand-copy { display: none; }
  .auth-brand-logo { width: 38px; height: 38px; }
  .auth-pane { padding: 18px; }
}
@media (max-width: 520px) {
  .auth-pane { padding: 10px 16px; }
  body.auth-screen .auth-tabs { margin-bottom: 10px; }
  body.auth-screen .auth-tab { padding: 10px 0; }
  body.auth-screen .auth-form .field { margin-bottom: 6px; }
  body.auth-screen .auth-form .field label { margin-bottom: 3px; font-size: 12px; }
  body.auth-screen .auth-form input[type="text"], body.auth-screen .auth-form input[type="email"], body.auth-screen .auth-form input[type="password"] { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  body.auth-screen .auth-submit { min-height: 42px; margin-top: 4px; }
  body.auth-screen .auth-form .field-hint { font-size: 11px; line-height: 1.35; margin-top: 3px; }
}
@media (max-width: 340px) {
  body.auth-screen #formSignUp { grid-template-columns: 1fr; }
  body.auth-screen #formSignUp .field:nth-of-type(n) { grid-column: 1 / -1; }
}

/* PR code: tucked behind an arrow */
.reveal-toggle { display: flex; align-items: center; gap: 6px; padding: 4px 0; background: none; border: 0; font: inherit; font-size: 13px; color: var(--ink-soft); text-transform: lowercase; cursor: pointer; transition: color 140ms ease; }
.reveal-toggle:hover, .reveal-toggle:focus-visible { color: var(--accent); }
.reveal-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reveal-toggle svg { transition: transform 200ms ease; }
.reveal-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.reveal-body { margin-top: 6px; }
.reveal-body[hidden] { display: none; }
.reveal-body input { width: 100%; }

/* the connector's short explanation */
.auth-help { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
#connectCode { letter-spacing: 0.14em; text-transform: uppercase; }

/* three tabs: the longer one may wrap rather than push the others off the page */
.auth-tabs { gap: 4px; }
.auth-tab { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.25; }
#tabConnect { flex: 1.5 1 0; }

/* the rolling word in the tagline */
.auth-brand .auth-rot { position: relative; display: inline-block; height: 1.12em; overflow: hidden; vertical-align: top; transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.auth-rot-word { display: inline-block; white-space: nowrap; transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 560ms ease; }
.auth-rot-word + .auth-rot-word { position: absolute; left: 0; top: 0; }
.auth-rot-word.is-enter { transform: translateY(112%); opacity: 0; }
.auth-rot-word.is-out { transform: translateY(-112%); opacity: 0; }