/* ============================================================
   VB-themed auth pages (sign in / create account).

   Loaded AFTER css/styles.css by auth templates only — selectors
   here rely on cascade order, so keep specificity matched to the
   rules they override. Tokens mirror static/vb/vb.css.
   ============================================================ */

:root {
  --vb-ink-0: #07080c;
  --vb-line: rgba(255, 255, 255, .07);
  --vb-line-2: rgba(255, 255, 255, .13);
  --vb-text: #f2f4f9;
  --vb-dim: #99a1b5;
  --vb-dimmer: #626b80;
  --vb-gold: #e9cd97;
  --vb-holo: linear-gradient(115deg, #8ee9ff 0%, #c9a6ff 22%, #ffd9a8 45%, #9dffd2 68%, #a9c8ff 88%);
}

body {
  color: var(--vb-text);
  background:
    radial-gradient(120% 90% at 50% -10%, #0c101e 0%, #07080d 55%, #05060a 100%);
  background-attachment: fixed;
}

/* the light theme paints its ground through a fixed body::before image
   overlay — remove it so the VB night gradient actually shows */
body::before {
  content: none;
}

/* ---- the VB lander's aurora dome, behind everything ---- */
.vb-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.vb-aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.site-header, main, .auth-layout, .site-footer, footer { position: relative; z-index: 1; }

/* dome accent — matches the lander's featured (Heavy) violet */
:root { --vb-acc: 96, 88, 220; }

/* ---- base chrome replaced by the VB bar + legal footer ---- */
.site-header, .site-footer { display: none; }

/* free the content shell: no top gap, full-bleed main (same unlock the
   homepage's shell gets), so the VB bar and footer span edge to edge */
.page-shell { padding-top: 0; }
.page-shell > main {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-shell > main > .auth-layout { flex: 1; width: 100%; }

.vb-bar {
  position: sticky;
  top: 0;
  z-index: 70;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: calc(env(safe-area-inset-top) + 14px) 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(7, 8, 12, .54);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.vb-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--vb-text);
  text-decoration: none;
}
.vb-brand img { width: 34px; height: 34px; object-fit: contain; }
.vb-brand > span { font-size: 20px; line-height: 1; font-weight: 800; }
.vb-brand small { color: var(--vb-gold); font-size: .62em; }
.vb-bar-actions { display: flex; align-items: center; gap: 10px; }
.vb-balance {
  display: grid;
  min-width: 92px;
  padding: 7px 12px;
  color: var(--vb-text);
  text-decoration: none;
  text-align: right;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(10, 12, 18, .72);
}
.vb-balance small {
  color: var(--vb-dim);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.vb-balance strong { margin-top: 4px; color: var(--vb-gold); font-size: 14px; line-height: 1; }
.vb-balance.is-login { display: inline-flex; justify-content: center; align-items: center; font-weight: 800; font-size: 13px; }

/* ---- the ledger: Balance and Rewards, one card, two rows. Each row is its
   own link (balance -> account, rewards -> the vault's redeem panel). The
   rewards row is driven by points_widget.js; it reserves its space while the
   fetch is in flight so the bar never jumps, and drops out if the program is
   dark. ---- */
.vb-ledger {
  display: grid;
  gap: 3px;
  min-width: 164px;
  padding: 6px 12px 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(10, 12, 18, .72);
}
.vb-ledger .vb-balance,
.vb-rewards {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
  color: var(--vb-text);
  text-decoration: none;
}
.vb-ledger .vb-balance small,
.vb-rewards small {
  color: var(--vb-dim);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
}
.vb-ledger .vb-balance strong { margin-top: 0; font-variant-numeric: tabular-nums; }
.vb-rewards strong {
  display: inline-flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px;
  color: #dccbff;
  font-size: 14px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vb-rewards strong b { font-weight: inherit; line-height: 1; }
.vb-rewards strong i { font-style: normal; font-size: 11px; line-height: 1; color: #c4b5fd; filter: drop-shadow(0 0 4px rgba(196, 181, 253, .7)); }
.vb-rewards.is-pending { visibility: hidden; }
.vb-rewards.is-off { display: none; }
.vb-rewards.is-ready small { color: #f0abfc; }
.vb-rewards.is-ready strong { color: #ffffff; text-shadow: 0 0 10px rgba(240, 171, 252, .9); }
@media (hover: hover) {
  .vb-ledger a:hover strong { filter: brightness(1.18); }
}
/* narrow phones: the wordmark gives up its ".com" and a couple of points so
   the ledger never has to squeeze */
@media (max-width: 430px) {
  .vb-bar.has-ledger .vb-brand small { display: none; }
  .vb-bar.has-ledger .vb-brand > span { font-size: 17px; }
  .vb-ledger { min-width: 0; padding: 6px 10px 7px; }
  .vb-ledger .vb-balance, .vb-rewards { gap: 10px; }
}
.vb-menu { position: relative; }
.vb-menu summary {
  width: 42px;
  height: 42px;
  display: grid;
  place-content: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(10, 12, 18, .72);
}
.vb-menu summary::-webkit-details-marker { display: none; }
.vb-menu summary i { width: 17px; height: 2px; background: var(--vb-text); }
.vb-menu nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(9, 11, 17, .98);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
}
.vb-menu nav a,
.vb-menu nav button {
  width: 100%;
  display: block;
  padding: 11px 12px;
  color: var(--vb-text);
  text-decoration: none;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}
.vb-menu nav a:hover,
.vb-menu nav button:hover { background: rgba(255, 255, 255, .07); }
.vb-menu form { margin: 0; }

.vb-legal-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  min-height: 62px;
  padding: 14px clamp(20px, 4vw, 64px) calc(env(safe-area-inset-bottom) + 14px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--vb-dim);
  background: rgba(7, 8, 12, .9);
}
.vb-legal-copy { min-width: 0; display: grid; gap: 2px; }
.vb-legal-copy span { color: #c7ccda; font-size: 11px; font-weight: 750; }
.vb-legal-copy small { max-width: 790px; font-size: 9px; line-height: 1.35; }
.vb-legal-footer nav { flex: none; display: flex; align-items: center; gap: 20px; }
.vb-legal-footer nav a {
  color: #c7ccda;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}
.vb-legal-footer nav a:hover { color: var(--vb-gold); }
.vb-bar, main { position: relative; z-index: 1; }

/* ---- email signup as a clean expandable ---- */
.auth-email-expand { margin-top: 2px; }
.auth-email-expand summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 3rem;
  padding: 0.74rem 1rem;
  border: 1px solid var(--vb-line-2);
  border-radius: 14px;
  background: rgba(10, 12, 18, .6);
  color: #dfe5f1;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.auth-email-expand summary::-webkit-details-marker { display: none; }
.auth-email-expand summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--vb-dim);
  border-bottom: 2px solid var(--vb-dim);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
}
.auth-email-expand[open] summary { border-color: rgba(206, 236, 255, .45); background: rgba(10, 12, 18, .85); }
.auth-email-expand[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.auth-email-expand .auth-form { margin-top: 0.9rem; }

/* ---- the card: lit glass on the dark field ---- */
.auth-layout { padding: 1.6rem 0 2.4rem; }

.auth-card,
.auth-card-compact {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(
    158deg,
    rgba(255, 255, 255, .10),
    rgba(255, 255, 255, .035) 34%,
    rgba(var(--vb-acc), .06) 78%,
    rgba(255, 255, 255, .05)
  );
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .55),
    0 0 46px rgba(var(--vb-acc), .1),
    inset 0 1px 0 rgba(255, 255, 255, .25),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
}
/* the cut: one still specular facet across the top-left corner */
.auth-card::before,
.auth-card-compact::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}
.auth-card > *,
.auth-card-compact > * { position: relative; }

.auth-card h1,
.auth-card-compact h1 {
  color: var(--vb-text);
  letter-spacing: -0.01em;
}

/* eyebrow gets the living-holo treatment from VB */
.auth-card .eyebrow,
.auth-card-compact .eyebrow {
  background: var(--vb-holo);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: vb-auth-iris 7s linear infinite;
  font-weight: 800;
  letter-spacing: .14em;
}
@keyframes vb-auth-iris { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .auth-card .eyebrow, .auth-card-compact .eyebrow { animation: none; }
}

.auth-copy,
.auth-card .auth-copy,
.auth-field-hint,
.auth-google-hint {
  color: var(--vb-dim);
}

.auth-form label {
  color: #c3cbdb;
  font-weight: 700;
}

.auth-form input {
  background: rgba(7, 9, 14, .72);
  border: 1px solid var(--vb-line-2);
  border-radius: 10px;
  color: var(--vb-text);
  caret-color: var(--vb-text);
}
.auth-form input:focus,
.auth-form input:focus-visible {
  border-color: rgba(206, 236, 255, .55);
  outline: none;
  box-shadow: 0 0 0 3px rgba(142, 202, 255, .14);
}
.auth-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--vb-text);
  -webkit-box-shadow: 0 0 0 60px #0d0f16 inset;
  caret-color: var(--vb-text);
}

/* ---- primary action: VB's frost-glass buy button ---- */
.auth-action-button {
  border: 2px solid rgba(206, 236, 255, .88);
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      rgba(142, 202, 255, .20) 0%,
      rgba(150, 190, 255, .05) 48%,
      rgba(124, 108, 255, .16) 100%);
  color: #f4f9ff;
  text-shadow: 0 1px 8px rgba(120, 180, 255, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 12px 30px rgba(70, 120, 220, .18);
}
.auth-action-button:hover,
.auth-action-button:focus-visible {
  border-color: #e6f4ff;
  background:
    linear-gradient(180deg,
      rgba(142, 202, 255, .30) 0%,
      rgba(150, 190, 255, .10) 48%,
      rgba(124, 108, 255, .24) 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 16px 36px rgba(70, 120, 220, .26);
}

/* provider buttons: quiet dark glass so the primary stays the star */
.auth-google-button,
.auth-google-button:hover,
.auth-google-button:focus-visible {
  border: 1px solid var(--vb-line-2);
  background: rgba(244, 247, 252, .96);
  color: #10213c;
  text-shadow: none;
}
.auth-discord-button,
.auth-discord-button:hover,
.auth-discord-button:focus-visible {
  border: 1px solid rgba(120, 132, 255, .45);
  background: rgba(88, 101, 242, .16);
  color: #cdd4ff;
  text-shadow: none;
  box-shadow: none;
}

.auth-divider { color: var(--vb-dimmer); }
.auth-divider::before,
.auth-divider::after { background: var(--vb-line-2); }

.auth-footer,
.auth-helper-link { color: var(--vb-dim); }
.auth-footer a,
.auth-helper-link a { color: var(--vb-gold); }
.auth-back-button { color: var(--vb-dim); }

/* flashes readable on dark */
.flash-message,
.flash {
  background: rgba(13, 15, 22, .9);
  border: 1px solid var(--vb-line-2);
  color: var(--vb-text);
}