/* ============================================
   Dhanik — Auth pages, nav control & gate modal
   ============================================ */

/* ── Auth page ── */
.auth-page {
  min-height: calc(100vh - var(--ticker-height) - var(--nav-height));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-8) var(--sp-5);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-raised);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
}
.auth-head { text-align: center; margin-bottom: var(--sp-5); }
/* The logo art is made for the dark header, so it washes out on white — sit it
   on a dark chip (same as the header) so it reads cleanly. */
.auth-logo {
  height: 30px; width: auto; display: block;
  margin: 0 auto var(--sp-5);
  background: var(--bg-dark);
  padding: 10px 18px;
  border-radius: var(--radius-lg);
}
.auth-title { font-size: var(--fs-22); font-weight: var(--fw-bold); color: var(--text-brand); letter-spacing: var(--ls-tight); }
.auth-subtitle { font-size: var(--fs-13); color: var(--text-tertiary); margin-top: var(--sp-2); line-height: 1.5; }

.auth-tabs { display: flex; gap: var(--sp-2); background: var(--bg-light-grey); padding: var(--sp-1); border-radius: var(--radius-md); margin-bottom: var(--sp-5); }
.auth-tab { flex: 1; padding: var(--sp-3); border: none; background: none; border-radius: var(--radius-sm); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.auth-tab.active { background: var(--bg-white); color: var(--text-brand); box-shadow: var(--shadow-flat); }

.auth-banner { font-size: var(--fs-12); color: #8a6d12; background: #fdf6e3; border: 1px solid #f3e4b3; border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); line-height: 1.5; }

.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.auth-field span { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-secondary); }
.auth-field input {
  height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-white); font-size: var(--fs-14); color: var(--text-brand);
}
.auth-field input:focus { border-color: var(--text-brand); box-shadow: 0 0 0 3px rgba(21,30,40,0.07); }
.auth-forgot { align-self: flex-end; background: none; border: none; color: var(--text-link); font-size: var(--fs-12); font-weight: var(--fw-medium); cursor: pointer; padding: 0; }
.auth-error { display: none; font-size: var(--fs-12); color: var(--color-down); background: rgba(216,47,68,0.07); border-radius: var(--radius-sm); padding: var(--sp-3); line-height: 1.45; }
.auth-error.show { display: block; }
.auth-submit { height: 46px; font-size: var(--fs-15); margin-top: var(--sp-1); }

.auth-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--text-tertiary); font-size: var(--fs-12); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

.auth-oauth { width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-white); font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text-brand); cursor: pointer; transition: background var(--transition-fast); }
.auth-oauth:hover { background: var(--bg-light-grey); }

.auth-terms { font-size: var(--fs-11); color: var(--text-tertiary); line-height: 1.5; margin-top: var(--sp-4); text-align: center; }
.auth-terms a { color: var(--text-link); }
.auth-skip { display: block; margin: var(--sp-4) auto 0; background: none; border: none; color: var(--text-tertiary); font-size: var(--fs-13); cursor: pointer; }
.auth-skip:hover { color: var(--text-brand); }

/* account view */
.auth-avatar-lg { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--sp-4); background: linear-gradient(135deg, var(--chart-1,#61a1e7), #3f7fd0); color: #fff; font-size: var(--fs-22); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; }
.auth-confirm-ic { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto var(--sp-4); background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.auth-account-actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.btn-danger-soft { background: rgba(216,47,68,0.08); color: var(--color-down); border: 1px solid rgba(216,47,68,0.2); }
.btn-danger-soft:hover { background: rgba(216,47,68,0.14); }

/* ── Nav auth control ── */
.auth-control { position: relative; display: flex; align-items: center; }
.auth-signin-btn { height: 36px; padding: 0 var(--sp-5); border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: var(--text-white); font-size: var(--fs-13); font-weight: var(--fw-semibold); cursor: pointer; transition: all var(--transition-fast); }
.auth-signin-btn:hover { background: rgba(255,255,255,0.14); }
.auth-avatar-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--chart-1,#61a1e7), #3f7fd0); color: #fff; font-size: var(--fs-13); font-weight: var(--fw-bold); cursor: pointer; }
.auth-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-popup); padding: var(--sp-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all var(--transition-fast); z-index: var(--z-popup, 600); }
.auth-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.auth-menu-head { padding: var(--sp-3) var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-light); margin-bottom: var(--sp-2); display: flex; flex-direction: column; gap: 2px; }
.am-name { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-brand); }
.am-email { font-size: var(--fs-12); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-menu-item { width: 100%; text-align: left; padding: var(--sp-3); border: none; background: none; border-radius: var(--radius-sm); font-size: var(--fs-13); color: var(--text-brand); cursor: pointer; }
.auth-menu-item:hover { background: var(--bg-light-grey); }
.am-signout { color: var(--color-down); margin-top: var(--sp-1); border-top: 1px solid var(--border-light); border-radius: 0; }

/* ── Auth modal (popup on the same screen) ── */
.auth-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 12, 18, 0.6);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: var(--z-modal, 800);
  padding: var(--sp-7) var(--sp-5);
  overflow-y: auto;
  opacity: 0; transition: opacity var(--transition-fast);
}
.auth-modal-overlay.show { opacity: 1; }
.auth-modal { position: relative; width: 100%; max-width: 420px; margin: auto; transform: translateY(12px) scale(0.99); transition: transform var(--transition-base); }
.auth-modal-overlay.show .auth-modal { transform: translateY(0) scale(1); }
.auth-modal-card { width: 100%; }
.auth-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: var(--fs-14); cursor: pointer; line-height: 1;
  transition: background var(--transition-fast);
}
.auth-modal-close:hover { background: rgba(255, 255, 255, 0.24); }

/* ── Sign-in gate modal ── */
.auth-gate-overlay { position: fixed; inset: 0; background: rgba(15,22,30,0.45); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal, 800); padding: var(--sp-5); opacity: 0; transition: opacity var(--transition-fast); }
.auth-gate-overlay.show { opacity: 1; }
.auth-gate { width: 100%; max-width: 380px; background: var(--bg-white); border-radius: var(--radius-xl, 16px); box-shadow: var(--shadow-popup); padding: var(--sp-7); text-align: center; transform: translateY(8px); transition: transform var(--transition-fast); }
.auth-gate-overlay.show .auth-gate { transform: translateY(0); }
.auth-gate-icon { width: 56px; height: 56px; border-radius: 50%; background: #fff8e8; color: #f6b51e; font-size: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-4); }
.auth-gate-title { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--text-brand); }
.auth-gate-text { font-size: var(--fs-13); color: var(--text-tertiary); line-height: 1.55; margin: var(--sp-3) 0 var(--sp-5); }
.auth-gate-actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-gate-later { background: none; border: none; color: var(--text-tertiary); font-size: var(--fs-13); cursor: pointer; margin-top: var(--sp-2); }

@media (max-width: 480px) { .auth-card { padding: var(--sp-6) var(--sp-5); } }

/* ============================================
   Branded blue auth card (logo sits on brand blue)
   ============================================ */
.auth-card {
  /* exact header palette (--bg-dark / --bg-dark-secondary) as a subtle gradient */
  background: linear-gradient(165deg, var(--bg-dark-secondary) 0%, var(--bg-dark) 100%);
  border: 1px solid var(--border-dark);
  color: #fff;
}
.auth-logo { background: none; padding: 0; height: 34px; }
.auth-title { color: #fff; }
.auth-subtitle { color: rgba(255, 255, 255, 0.72); }

.auth-tabs { background: rgba(255, 255, 255, 0.08); }
.auth-tab { color: rgba(255, 255, 255, 0.7); }
.auth-tab.active { background: #fff; color: #14233f; box-shadow: none; }

.auth-banner { background: rgba(255, 214, 110, 0.12); border-color: rgba(255, 214, 110, 0.28); color: #ffdf9e; }

.auth-field span { color: rgba(255, 255, 255, 0.85); }
.auth-field input { background: #fff; border-color: transparent; color: var(--text-brand); }
.auth-field input::placeholder { color: var(--text-tertiary); }
.auth-field input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }
.auth-forgot { color: #9ec1ff; }
.auth-error { color: #ffb3bd; background: rgba(255, 120, 135, 0.14); }

.auth-submit.btn-primary { background: #fff; color: #14233f; }
.auth-submit.btn-primary:hover { background: #eaf0f8; }

.auth-divider { color: rgba(255, 255, 255, 0.6); }
.auth-divider::before, .auth-divider::after { background: rgba(255, 255, 255, 0.16); }

.auth-oauth { background: #fff; border-color: transparent; color: var(--text-brand); }
.auth-oauth:hover { background: #eef2f8; }

.auth-terms { color: rgba(255, 255, 255, 0.58); }
.auth-terms a { color: #9ec1ff; }
.auth-skip { color: rgba(255, 255, 255, 0.72); }
.auth-skip:hover { color: #fff; }

/* account view on the blue card */
.auth-account-actions .btn-secondary { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.auth-account-actions .btn-secondary:hover { background: rgba(255, 255, 255, 0.18); }
.btn-danger-soft { background: rgba(255, 120, 135, 0.16); color: #ffb3bd; border-color: rgba(255, 120, 135, 0.3); }
.btn-danger-soft:hover { background: rgba(255, 120, 135, 0.26); }