/* ============================================================================
   AVENLEO — AUTH  (sign up / sign in / recovery)
   ----------------------------------------------------------------------------
   A centred card on a plain page. No app shell, no artwork, no gradient.

   This is now the front door: every URL in the product redirects here until
   there is an account, so it is the screen that has to establish that this is a
   serious place to put money. It does that by being plain and precise —
   correct spacing, one action, no ornament — rather than by being impressive.
   ========================================================================== */

.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-5);
  position: relative;
}

.auth-toggle { position: absolute; top: var(--space-4); right: var(--space-4); }

.auth-card {
  width: 100%;
  max-width: 392px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-7) var(--space-6);
  box-shadow: var(--shadow-md), var(--edge-highlight);
}

.auth-brand {
  display: flex; align-items: center; gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-5);
}

.auth-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  text-align: center;
}
.auth-sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
  line-height: var(--leading-snug);
}

/* The welcome bonus, on the sign-up screen only. Gold, because it is the
   same earned-money signal the rewards page uses for it — and quiet, because
   the thing to do on this screen is fill the form, not read a banner. Both
   conditions are in the copy: an offer whose terms only appear later is how
   somebody ends up at the withdrawal screen learning them. */
.auth-bonus {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-3);
  border: 1px solid var(--color-accent-border);
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
}
.auth-bonus__mark { flex: none; display: grid; place-items: center; color: var(--color-accent-strong); }
.auth-bonus__mark .icon { width: 16px; height: 16px; }
.auth-bonus__text {
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.auth-bonus__text b { color: var(--color-accent-strong); font-weight: var(--weight-semibold); }

.auth-field { margin-bottom: var(--space-3); }
.auth-field__label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.auth-field__label label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text); }
.auth-field__label a { font-size: var(--text-xs); color: var(--color-primary-fg); font-weight: var(--weight-medium); }
/* The right-hand side of a field label: what is still needed, or a hint. Turns
   amber once the field is the only thing standing between somebody and the
   button, which is the one state worth pointing at. */
.auth-field__hint { font-size: var(--text-2xs); color: var(--color-text-faint); }
.auth-field__hint[data-waiting="true"] { color: var(--color-warning); }

.auth-field__note {
  margin-top: 6px;
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  color: var(--color-text-faint);
}

/* A segmented control across the full width of a form field, thirds. The
   inline-flex default is right for a toolbar and wrong for a choice somebody
   has to make, which wants the same target size for every option. */
.segmented--block { display: flex; width: 100%; }
.segmented--block .segmented__item { flex: 1 1 0; justify-content: center; }
/* The symbol carries the recognition — most people know ₦ before they know NGN
   — so it is given the weight and the code is left as the label. */
.cur-sym { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

.auth-input-wrap { position: relative; }
.auth-input-wrap .reveal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }

.auth-error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin: calc(var(--space-1) * -1) 0 var(--space-3);
  display: none;
}

.auth-agree {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}
.auth-agree a { color: var(--color-primary-fg); }

.auth-divider {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--color-text-faint);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.auth-foot {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.auth-foot a { color: var(--color-primary-fg); font-weight: var(--weight-medium); }
.auth-foot a:hover { text-decoration: underline; }

.auth-legal {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--text-2xs);
  color: var(--color-text-faint);
  line-height: var(--leading-relaxed);
}
.auth-legal a { color: var(--color-text-subtle); text-decoration: underline; }

/* A one-line reassurance under the card. Three facts, no marketing. */
.auth-trust {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--text-2xs);
  color: var(--color-text-faint);
}
.auth-trust span { display: inline-flex; align-items: center; gap: 5px; }
.auth-trust .icon { width: 13px; height: 13px; }

@media (max-width: 420px) {
  .auth { padding: var(--space-4); }
  .auth-card { padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); }
  .auth-toggle { top: var(--space-3); right: var(--space-3); }
}

/* --- phone field with country selector --------------------------------- */
.phone-field { position: relative; display: flex; align-items: stretch; gap: var(--space-2); }
.phone-cc {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  cursor: pointer; flex: none;
  color: var(--color-text);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.phone-cc:hover { border-color: var(--color-border-strong); }
.phone-cc .icon { width: 13px; height: 13px; color: var(--color-text-faint); }
.phone-flag { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; background: var(--color-surface-3); display: block; }
.phone-dial { font-variant-numeric: tabular-nums; }
.phone-input { flex: 1; min-width: 0; }
.phone-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--color-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.phone-search { padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.phone-search input {
  width: 100%; padding: 6px var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text);
  font-family: inherit; font-size: var(--text-sm);
}
.phone-search input:focus { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.phone-list { max-height: 216px; overflow-y: auto; list-style: none; margin: 0; padding: var(--space-1); }
.phone-opt {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 6px var(--space-2); border-radius: var(--radius-sm);
  cursor: pointer; font-size: var(--text-sm);
}
.phone-opt:hover { background: var(--color-surface-2); }
.phone-opt img { border-radius: 2px; object-fit: cover; flex: none; background: var(--color-surface-3); }
.phone-opt__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-opt__dial { color: var(--color-text-faint); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- WELCOME ---
   The screen between "correct password" and the first page.

   It is not decoration over an invented wait. Sign-in genuinely fetches the
   balances, the levels, the dashboard, the ledger and the referral overview
   here — see core/cache.js — so that every screen afterwards opens on data it
   already has. This says so, greets the person by name while it happens, and
   its progress bar is the real count of what has landed, not a timer.

   It used to be a gradient tile with an orbiting conic ring and a blurred halo
   breathing underneath it. That is a loading screen designed to be looked at.
   This one is designed to be over: the mark, a line of text that changes as
   each request lands, and the bar. */

.welcome {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: var(--space-6);
  background: var(--color-bg);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.welcome.is-open { opacity: 1; }
.welcome.is-leaving { opacity: 0; }

.welcome__box { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 260px; }
.welcome__mark { margin-bottom: var(--space-5); }

.welcome__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.welcome__step {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin: var(--space-2) 0 var(--space-5);
  min-height: 1.4em;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.welcome__step.is-swapping { opacity: 0; }
.welcome__bar { width: 100%; max-width: 180px; }

@media (prefers-reduced-motion: reduce) {
  .welcome { transition: none; opacity: 1; }
  .welcome__step { transition: none; }
  .welcome__step.is-swapping { opacity: 1; }
}

/* ---------------------------------------------------------------- SCROLL LOCK
   `app.js` puts `.no-scroll` on <body> whenever an overlay opens, and the rule
   that makes it mean anything lives in utilities.css — which the auth pages do
   not load. Without this the terms dialog opened over a sign-up form that was
   still scrolling behind it.

   Declared here rather than by pulling in utilities.css, which is 3.5KB on the
   wire to gain one rule the auth pages need and nothing else from.

   One page does load both: the admin console's sign-in screen. That is fine
   and is worth stating rather than leaving somebody to find — the two
   declarations are identical, so whichever the cascade takes gives the same
   result. Keep them identical, or delete this one. */
.no-scroll { overflow: hidden !important; }