/* ==========================================================================
   auth.css — sign in and onboarding. These are the only two screens without
   the app shell, so they carry their own frame.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sign in — a drifting field behind a floating card.

   Three washes in sky and mist, wide enough to cover the viewport and blurred
   far past the point where they read as circles. Their run times are 61, 74
   and 53 seconds: no common factor, so they never fall into step and the loop
   never announces itself.
   -------------------------------------------------------------------------- */
.auth {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-sunken);
}

/* The clip lives here, so a wash can travel far past the edge without ever
   adding a scrollbar to the page. */
.auth__field { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.auth__field-layer { position: absolute; inset: -20%; }

.auth__wash {
  position: absolute;
  border-radius: var(--radius-full);
  /* One large blur rather than several small ones: cheaper for the browser,
     and it is what stops the shapes reading as objects. */
  filter: blur(155px);
  will-change: transform, opacity;
}

.auth__wash--a {
  width: 78rem; height: 78rem; top: -30%; left: -26%;
  background: hsl(205 62% 94%);
  animation: auth-drift-a 61s ease-in-out infinite;
}
.auth__wash--b {
  width: 72rem; height: 72rem; top: 24%; left: 46%;
  background: hsl(190 48% 94%);
  animation: auth-drift-b 74s ease-in-out infinite;
}
.auth__wash--c {
  width: 64rem; height: 64rem; top: -2%; left: 8%;
  background: hsl(220 54% 95%);
  animation: auth-drift-c 53s ease-in-out infinite;
}

@keyframes auth-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
  18%  { transform: translate3d(34vw, 22vh, 0) scale(1.14); opacity: 1; }
  37%  { transform: translate3d(18vw, 58vh, 0) scale(0.92); opacity: .82; }
  56%  { transform: translate3d(52vw, 44vh, 0) scale(1.08); opacity: .95; }
  78%  { transform: translate3d(8vw, 26vh, 0) scale(0.98); opacity: .88; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
}
@keyframes auth-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .88; }
  22%  { transform: translate3d(-40vw, 18vh, 0) scale(0.9); opacity: .96; }
  44%  { transform: translate3d(-16vw, -22vh, 0) scale(1.16); opacity: .84; }
  63%  { transform: translate3d(-48vw, -6vh, 0) scale(1.02); opacity: .92; }
  85%  { transform: translate3d(-22vw, 30vh, 0) scale(0.94); opacity: .9; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: .88; }
}
@keyframes auth-drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  27%  { transform: translate3d(-26vw, 34vh, 0) scale(1.2); opacity: .95; }
  51%  { transform: translate3d(22vw, 52vh, 0) scale(0.86); opacity: .8; }
  74%  { transform: translate3d(36vw, 8vh, 0) scale(1.1); opacity: .93; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .auth__wash { animation: none; }
}

.auth__stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4);
}

.auth__card {
  width: 100%;
  max-width: 24rem;
  background: var(--surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
}

.auth__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

/* The mark is defined in layout.css for the app shell; sign-in and
   onboarding load without that file, so it is repeated here. */
.brand__mark {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-md);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.auth__title { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }

.auth__lede {
  font-size: var(--text-md);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
}

.auth__fields { display: flex; flex-direction: column; gap: var(--space-4); }

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth__link {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth__link:hover { color: var(--text-primary); }

.auth__foot {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--space-5);
}

.auth__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--negative-soft);
  color: var(--negative);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.auth__error svg { width: 0.875rem; height: 0.875rem; }

@media (max-width: 45rem) {
  .auth__card { padding: var(--space-6); }
}

/* --------------------------------------------------------------------------
   Onboarding
   -------------------------------------------------------------------------- */
.onboard {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-sunken);
}

.onboard__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--topbar-height);
  padding: 0 var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}

.onboard__steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.step-dots { display: flex; gap: var(--space-1); }
.step-dots span {
  width: 1.25rem;
  height: 0.1875rem;
  border-radius: var(--radius-full);
  background: var(--gray-200);
}
.step-dots span[data-state="done"] { background: var(--gray-400); }
.step-dots span[data-state="active"] { background: var(--gray-950); }

.onboard__body {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4) var(--space-12);
}

.onboard__card {
  width: 100%;
  max-width: 34rem;
  background: var(--surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}

.onboard__title {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
}

.onboard__lede {
  font-size: var(--text-md);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.onboard__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.onboard__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.onboard__actions .btn--primary { margin-left: auto; }

/* Connection rows in the "connect your sources" step. */
.connect-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--border-strong);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.connect-row[data-state="connected"] { box-shadow: 0 0 0 1px var(--positive); }

.connect-row__logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--gray-75);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.connect-row__body { min-width: 0; }
.connect-row__name { font-size: var(--text-md); font-weight: 550; }
.connect-row__meta { font-size: var(--text-xs); color: var(--text-tertiary); }
.connect-row__action { margin-left: auto; }

@media (max-width: 45rem) {
  .onboard__card { padding: var(--space-5); }
  .onboard__body { padding: var(--space-4) var(--space-3) var(--space-8); }
}

/* The onboarding shares the sign-in field, so the two screens read as one
   flow rather than two products. */
.onboard { position: relative; isolation: isolate; }
.onboard__bar, .onboard__body { position: relative; z-index: 1; }
.onboard__bar { background: hsl(0 0% 100% / .8); backdrop-filter: blur(8px); }

/* --------------------------------------------------------------------------
   Onboarding instructions
   A numbered list rather than a paragraph, because this is the one screen
   where someone is switching between two browser tabs and needs to find
   their place again after every step.
   -------------------------------------------------------------------------- */
.onboard__card { max-width: 38rem; }

.steps {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px var(--alpha-100);
}

.step {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.step:last-child { border-bottom: 0; }

.step__num {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  font-size: var(--text-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.step__body {
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}
.step__body strong { color: var(--text-primary); font-weight: 550; }
.step__extra { margin-top: var(--space-3); }

/* Scopes as chips with one copy button. In a comma-separated line one always
   gets missed, and the shop then quietly returns no orders. */
.scopes { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.scope {
  display: inline-flex;
  align-items: center;
  height: 1.375rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--gray-75);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--gray-800);
}
.copy-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.copy-note { font-size: var(--text-2xs); color: var(--text-tertiary); }

.callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--info-soft);
  font-size: var(--text-xs);
  color: var(--gray-900);
  margin-top: var(--space-4);
}
.callout svg { width: 1rem; height: 1rem; color: var(--info); flex-shrink: 0; }

.summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--surface-sunken);
}
.summary__row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.summary__row span:last-child { margin-left: auto; font-weight: 550; font-variant-numeric: tabular-nums; }

.check {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--radius-full);
  background: var(--positive-soft);
  color: var(--positive);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.check svg { width: 0.625rem; height: 0.625rem; }

@media (max-width: 45rem) {
  .step { padding: var(--space-4); }
}

/* Two ways in, so the screen asks which one you have rather than guessing. */
.method {
  display: inline-flex;
  padding: 0.125rem;
  border-radius: var(--radius-control);
  background: var(--gray-75);
  gap: 0.125rem;
  margin-top: var(--space-6);
}
.method__tab {
  height: 1.75rem;
  padding: 0 var(--space-3);
  border-radius: calc(var(--radius-control) - 0.125rem);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-out);
}
.method__tab[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}
.method__hint { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-2); }

.step__body code {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  background: var(--gray-75);
  padding: 0.0625rem var(--space-1);
  border-radius: var(--radius-sm);
}