/* ============================================================
   auth.css — authentication, account menu & leaderboard
   Split out from main.css to keep each stylesheet focused.
   ============================================================ */

/* ---------- AUTH: sign in / sign up ---------- */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-panel {
  display: flex; flex-direction: column; padding: clamp(28px, 4vw, 56px);
  min-height: 100vh; position: relative;
}
.auth-form-wrap { width: 100%; max-width: 400px; margin: auto; padding-block: 40px; }
.auth-form-wrap h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 10px; }
.auth-form-wrap > p { margin-bottom: 30px; font-size: var(--fs-sm); }
.auth-field { margin-bottom: 18px; }
.auth-field label { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 7px; display: block; }
.auth-field .input { width: 100%; padding: 13px 15px; }

select.input {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c7c8c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

.input-affix { position: relative; display: flex; }
.input-affix .input { padding-right: 46px; }
.affix-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-3);
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  transition: color var(--dur-1), background var(--dur-1);
}
.affix-btn:hover { color: var(--text); background: var(--surface-3); }
.affix-btn svg { width: 18px; height: 18px; }

.pw-meter { display: flex; align-items: center; gap: 5px; margin-top: 9px; }
.pw-meter i { height: 3px; flex: 1; border-radius: 2px; background: var(--surface-3); transition: background var(--dur-2); }
.pw-meter span { font-size: 11px; font-weight: 600; min-width: 44px; text-align: right; }

.auth-error {
  background: rgba(255,90,106,0.1); border: 1px solid rgba(255,90,106,0.3); color: #ff8a95;
  padding: 11px 14px; border-radius: 11px; font-size: var(--fs-sm); margin-bottom: 16px;
}
.btn.loading { opacity: 0.75; cursor: progress; }
.auth-switch { margin-top: 22px; font-size: var(--fs-sm); color: var(--text-2); text-align: center; }
.auth-switch a { color: var(--brand-300); font-weight: 600; margin-left: 5px; }
.auth-switch a:hover { text-decoration: underline; }
.auth-guest { margin-top: 12px; font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
.auth-guest a { color: var(--text-2); text-decoration: underline; }
.auth-guest a:hover { color: var(--text); }
.auth-legal { font-size: var(--fs-xs); color: var(--text-3); margin-top: auto; }

/* Right-hand proof panel */
.auth-proof {
  position: relative; overflow: hidden; border-left: 1px solid var(--line);
  background: linear-gradient(160deg, #0d0d16, #0a0a10);
  display: flex; align-items: center; padding: clamp(32px, 4vw, 64px);
}
.auth-proof-glow {
  position: absolute; inset: -20% -30% auto -10%; height: 70%;
  background: radial-gradient(60% 60% at 60% 20%, rgba(109,92,255,0.28), transparent 65%),
              radial-gradient(50% 50% at 20% 60%, rgba(52,224,196,0.12), transparent 65%);
  filter: blur(20px); pointer-events: none;
}
.auth-proof-inner { position: relative; max-width: 460px; }
.auth-proof h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 16px 0 14px; }
.auth-proof-inner > p { font-size: var(--fs-sm); margin-bottom: 34px; }
.auth-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.auth-stats b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.auth-stats small { color: var(--text-3); font-size: 11px; }
.auth-quote {
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px; margin-bottom: 26px; box-shadow: var(--ring-inset);
}
.auth-quote p { font-size: var(--fs-sm); line-height: 1.6; margin-bottom: 16px; }
.auth-quote figcaption { display: flex; align-items: center; gap: 11px; }
.auth-quote figcaption b { font-size: var(--fs-sm); display: block; }
.auth-quote figcaption small { color: var(--text-3); font-size: var(--fs-xs); }
.auth-avatars { display: flex; }
.auth-avatars .avatar { width: 34px; height: 34px; margin-left: -9px; border: 2px solid #0b0b12; font-size: 11px; }
.auth-avatars .avatar:first-child { margin-left: 0; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-proof { display: none; }
}

/* ---------- ACCOUNT MENU (navbar) ---------- */
.account { position: relative; }
.account-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full);
  cursor: pointer; color: var(--text); font-weight: 600; font-size: var(--fs-sm);
  transition: border-color var(--dur-1), background var(--dur-1);
}
.account-btn:hover { border-color: var(--line-strong); background: var(--surface-3); }
.account-btn .avatar { width: 28px; height: 28px; font-size: 11px; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; z-index: 120;
  background: var(--elevated); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 8px; animation: menu-in var(--dur-2) var(--ease-out);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.account-menu .am-head { padding: 12px 12px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.account-menu .am-head b { display: block; font-size: var(--fs-sm); }
.account-menu .am-head small { color: var(--text-3); font-size: var(--fs-xs); word-break: break-all; }
.account-menu a, .account-menu button {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: 10px;
  background: none; border: none; cursor: pointer; color: var(--text-2); font-size: var(--fs-sm);
  font-weight: 500; text-align: left; transition: background var(--dur-1), color var(--dur-1);
}
.account-menu a:hover, .account-menu button:hover { background: var(--surface-2); color: var(--text); }
.account-menu svg { width: 17px; height: 17px; }
.account-menu .danger { color: #ff8a95; }
.account-menu .danger:hover { background: rgba(255,90,106,0.1); color: #ff8a95; }
.am-stat { display: flex; justify-content: space-between; padding: 7px 12px; font-size: var(--fs-xs); color: var(--text-3); }
.am-stat b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- LEADERBOARD ---------- */
.lb-list { display: grid; gap: 4px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; transition: background var(--dur-1); }
.lb-row:hover { background: var(--surface-2); }
.lb-row.you { background: rgba(109,92,255,0.1); box-shadow: inset 0 0 0 1px rgba(109,92,255,0.24); }
.lb-rank { width: 26px; text-align: center; font-weight: 700; color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.lb-row:nth-child(1) .lb-rank { color: #ffd166; }
.lb-row:nth-child(2) .lb-rank { color: #d8d8e4; }
.lb-row:nth-child(3) .lb-rank { color: #e0a06a; }
.lb-name { flex: 1; min-width: 0; }
.lb-name b { display: block; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name small { color: var(--text-3); font-size: var(--fs-xs); }
.lb-time { font-family: var(--font-mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.lb-empty { text-align: center; padding: 28px 16px; color: var(--text-3); font-size: var(--fs-sm); }

/* ---------- Sync indicator ---------- */
.sync-pill { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--text-3); }
.sync-pill .dot { width: 7px; height: 7px; }
.sync-pill.offline .dot { background: var(--warning); }

/* ---------- Google sign-in ---------- */
.btn-google {
  --btn-bg: #fff;
  background: #fff; color: #1f1f1f; border-color: #dadce0;
  font-weight: 600; margin-bottom: 4px; min-height: 48px;
}
.btn-google:hover { background: #f7f8f8; border-color: #c9ced4; }
.btn-google svg { flex: none; }
:root[data-theme="dark"] .btn-google { box-shadow: 0 1px 2px rgba(0,0,0,0.4); }

.auth-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 20px; color: var(--text-3); font-size: var(--fs-xs);
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ---------- Student progress card ---------- */
.profile-card { width: 100%; max-width: 420px; }
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.profile-head .avatar { width: 52px; height: 52px; font-size: 1rem; }
.profile-head b { display: block; font-size: 1.1rem; letter-spacing: -0.02em; }
.profile-head small { color: var(--text-3); font-size: var(--fs-xs); }
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.profile-stat {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 15px;
}
.profile-stat b { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.profile-stat small { color: var(--text-3); font-size: var(--fs-xs); }
.profile-now {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: var(--r-sm);
  background: rgba(61,220,132,0.1); border: 1px solid rgba(61,220,132,0.26);
  color: var(--accent-green); font-size: var(--fs-sm); font-weight: 600; margin-bottom: 16px;
}
.profile-empty { color: var(--text-3); font-size: var(--fs-sm); text-align: center; padding: 22px 8px; }

/* Clickable rows */
.participant[data-uid], .lb-row[data-uid] { cursor: pointer; }
.participant[data-uid]:focus-visible, .lb-row[data-uid]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }