/* ============================================================================
   Aurevon Interlude — earner hub component styles (earn.html only)
   Builds on styles.css tokens/classes. CSS only, same-origin, no remote assets.
   All motion respects prefers-reduced-motion (see the guard at the bottom and
   the global `*` reduced-motion rule in styles.css). Zero layout shift.
   ========================================================================== */

/* ---- Account-status banner (reviewRequired) ----------------------------- */
.review-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  margin: 18px 0 4px;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(230, 199, 90, 0.12), var(--glass-2));
  border: 1px solid rgba(230, 199, 90, 0.32);
  box-shadow: var(--shadow-1);
}
.review-banner .rb-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(230, 199, 90, 0.16);
  border: 1px solid rgba(230, 199, 90, 0.4);
  color: var(--warn);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}
.review-banner .rb-body { min-width: 0; }
.review-banner strong {
  display: block;
  color: var(--ink);
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.review-banner p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* ---- Cash-out CTA (shown at or over the minimum) -------------------------
   The sibling state to .min-progress below: under the minimum an earner sees
   progress, at or over it they see a way to act. Centred to sit directly under
   the balance hero it refers to, so the number and the action read as one
   unit rather than the number pointing at nothing. */
.cashout-cta {
  margin: 4px 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.cashout-cta .btn {
  /* Comfortably tappable and wide enough that the amount never wraps. */
  min-width: min(100%, 260px);
  justify-content: center;
}
.cashout-cta-note {
  margin: 0;
  font-size: 13px;
}

/* ---- Wallet stat grid (six short cards) ---------------------------------
   Pinned to a column count that divides six exactly, at both widths. The
   shared .grid-compact auto-fit rule is right for the three-card grids on the
   dashboard, but with six cards it fits all of them across at desktop widths —
   ~160px each, every label wrapped to two lines — and lands on four columns in
   the tablet band, stranding two cards on a half-empty row. Two columns on a
   phone and three above it pack evenly and keep each card readable. */
.grid3.grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .grid3.grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Progress toward the $5.00 minimum ---------------------------------- */
.min-progress {
  margin: 4px 0 18px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(5, 7, 10, 0.4);
  border: 1px solid var(--hairline);
}
.mp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 10px;
}
.mp-head .mp-pct {
  color: var(--gold-hi);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mp-track {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: rgba(5, 7, 10, 0.6);
  border: 1px solid var(--hairline-strong);
  overflow: hidden;
}
.mp-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--gold), var(--gold-hi) 55%, var(--cyan));
  box-shadow: 0 0 18px -4px rgba(47, 111, 255, 0.6);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mp-note {
  margin: 10px 0 0;
  font-size: 13px;
}

/* ---- New-earner onboarding (shown only when nothing earned yet) --------- */
.onboarding {
  border-color: rgba(111, 168, 255, 0.28);
  background: linear-gradient(160deg, rgba(111, 168, 255, 0.08), var(--glass-2));
}
.onboarding h2 { margin-bottom: 8px; }
.onboarding .lead-line {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
}
.onboarding .steps .step { border-color: rgba(111, 168, 255, 0.22); }
.onboarding .steps .step .n {
  background: linear-gradient(135deg, var(--blue-300), var(--chrome));
  color: #05070A;
}

/* ---- Cash-out method (Stripe Connect / demo "opens at launch") ---------- */
.method-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.method-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
}
.method-state .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 10px -1px rgba(230, 199, 90, 0.7);
  flex: 0 0 auto;
}
/* PayPal is wired up: the payout rail is ready, so the status dot reads calm/green. */
.method-state.ready .dot {
  background: var(--ok);
  box-shadow: 0 0 10px -1px rgba(111, 168, 255, 0.6);
}

/* ---- PayPal cash-out email (revealed only when PayPal payouts are enabled) --
   Hidden by default; earn.js adds `.is-visible` when /earners/me reports
   paypalEnabled. Class toggle only — no inline styles (CSP-safe). */
.paypal-field { display: none; }
.paypal-field.is-visible { display: block; }

/* ---- Cash-out chips (Cash out all) -------------------------------------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.chip {
  min-height: var(--tap);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: rgba(5, 7, 10, 0.45);
  color: var(--gold-hi);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease,
    transform 0.18s ease;
}
.chip:hover {
  color: var(--ink);
  border-color: rgba(111, 168, 255, 0.5);
  transform: translateY(-1px);
}
.chip:active { transform: translateY(0); }
.chip:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
.chip:disabled { opacity: 0.45; cursor: default; transform: none; }

/* ---- Earner key + copy -------------------------------------------------- */
.key-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.key-value {
  flex: 1 1 260px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-strong);
  background: rgba(5, 7, 10, 0.55);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}
.key-value.is-empty { color: var(--muted); }
.key-row .btn { flex: 0 0 auto; }

@media (max-width: 720px) {
  .key-row .btn { width: 100%; }
}

/* ---- Privacy tab: kill switch (pause tracking) -------------------------- */
.kill-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(5, 7, 10, 0.4);
  border: 1px solid var(--hairline);
  margin-top: 10px;
}
.kill-switch-copy strong { display: block; color: var(--ink); font-size: 15px; }
.kill-switch-copy p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.switch {
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.switch-track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--hairline-strong);
  position: relative;
  transition: background var(--motion-base) var(--ease-standard);
}
.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--chrome);
  transition: transform var(--motion-base) var(--ease-standard);
}
.switch[aria-checked="true"] .switch-track {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
}
.switch[aria-checked="true"] .switch-thumb {
  transform: translateX(22px);
  background: #FFFFFF;
}
.switch:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 2px;
  border-radius: var(--r-pill);
}
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-thumb { transition: none; }
}