/* ============================================================
   Bynteq — bridge.css
   Maps the original course-site design tokens onto the v2
   (indigo / light-dark) design system so existing pages adopt
   the new look. Loaded AFTER the v2 framework + site styles.
   ============================================================ */

:root {
  /* Surfaces */
  --bg-primary: var(--bg-base);
  --bg-secondary: var(--bg-surface);
  --surface: var(--bg-card);
  --surface-2: var(--bg-card-hover);
  --surface-raised: var(--bg-card-hover);

  /* Text (shared names --text-primary/-secondary come from v2) */
  --text-tertiary: var(--text-muted);

  /* Lines */
  --border-strong: var(--border-accent);

  /* Accent */
  --accent: var(--accent-1);
  --accent-secondary: var(--accent-2);
  --accent-contrast: #ffffff;
  --accent-soft: rgba(99, 102, 241, 0.14);
  --accent-glow: rgba(99, 102, 241, 0.45);

  /* Semantic */
  --success: var(--accent-android);
  --success-soft: rgba(0, 200, 83, 0.14);
  --error: #f87171;
  --error-soft: rgba(248, 113, 113, 0.14);
  --xp: var(--accent-gold);

  /* Radius (site-only alias; shared radii come from v2) */
  --radius: var(--radius-lg);

  /* Shadow / elevation (site-only aliases) */
  --shadow: var(--shadow-md);
  --glow: 0 12px 40px var(--accent-glow);

  /* Layout */
  --maxw: 1200px;
  --reading: 720px;

  /* Motion */
  --t-fast: var(--dur-fast);
  --t: var(--dur-base);
  --t-slow: var(--dur-slow);
}

/* Light theme: keep the semantic soft tints readable */
[data-theme="light"] {
  --accent-soft: rgba(99, 102, 241, 0.10);
  --success-soft: rgba(0, 168, 70, 0.12);
  --error-soft: rgba(220, 38, 38, 0.10);
}

/* ---- Global chrome offset for the fixed v2 navbar ---- */
body > main {
  padding-top: calc(var(--navbar-h) + var(--space-lg));
}

/* The lesson layout has its own two-column grid; keep it clearing the navbar */
main.lesson-page {
  padding-top: calc(var(--navbar-h) + var(--space-lg));
}

/* Make sure page backgrounds use the themed base, not a hardcoded dark */
body {
  background: var(--bg-base);
  color: var(--text-primary);
}

/* Keep site buttons on-brand with the indigo gradient */
.btn-primary,
button.btn-primary {
  background: linear-gradient(135deg, var(--accent-1), #4f46e5);
  color: #fff;
  border: none;
}
.btn-primary:hover,
button.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45);
}

/* ---- Light-mode legibility fixes for originally dark-only surfaces ---- */
[data-theme="light"] pre,
[data-theme="light"] code,
[data-theme="light"] .lesson-content pre,
[data-theme="light"] .code-result {
  background: #0f1629;
  color: #f0f4ff;
}
[data-theme="light"] pre code {
  background: transparent;
  color: inherit;
}

/* Reveal-on-scroll: default to visible so no content is ever hidden if JS is slow */
.reveal { opacity: 1; }


/* ============================================================
   Safety net: never leave the page hidden.
   The framework sets body{opacity:0} and reveals it via JS on
   window.load. If that event is delayed (offline fonts, file://,
   slow resources) the page would appear blank. These rules make
   content always visible and auto-clear the splash even if JS
   never runs. When JS does run it hides the splash sooner.
   ============================================================ */
body { opacity: 1 !important; }
#loading-screen { animation: bynteqSplashOut 0.5s ease 1.4s forwards; }
@keyframes bynteqSplashOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  #loading-screen { animation-delay: 0.2s; }
}


/* ============================================================
   Auth (login / sign-up) UI
   ============================================================ */
.login-logo { font-size: 3rem; margin-bottom: var(--space-sm); }
.auth-tabs {
  display: flex; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 4px;
  margin: 0 auto var(--space-lg); max-width: 300px;
}
.auth-tab {
  flex: 1; border: none; background: transparent;
  color: var(--text-secondary); font-family: inherit;
  font-size: var(--text-sm); font-weight: 600;
  padding: 0.55rem 1rem; border-radius: var(--radius-pill);
  cursor: pointer; transition: all var(--dur-base) var(--ease-out);
}
.auth-tab.active {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff; box-shadow: var(--shadow-sm);
}
.oauth-buttons { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.oauth-btn {
  width: 100%; justify-content: center; gap: 0.6rem;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); font-weight: 600;
}
.oauth-btn:hover:not(:disabled) { border-color: var(--border-accent); background: var(--bg-card-hover); }
.oauth-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.oauth-btn svg { width: 18px; height: 18px; flex: none; }
.auth-divider {
  display: flex; align-items: center; gap: var(--space-sm);
  color: var(--text-muted); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin: var(--space-md) 0;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
#auth-form .form-group { text-align: left; margin-bottom: var(--space-md); }
.auth-forgot { display: inline-block; margin-top: var(--space-sm); color: var(--text-link); font-size: var(--text-sm); text-decoration: none; cursor: pointer; }
.auth-forgot:hover { text-decoration: underline; }
#config-warning {
  margin-top: var(--space-md); padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-accent); border-radius: var(--radius-md);
  background: rgba(99,102,241,0.08); color: var(--text-secondary);
  font-size: var(--text-sm); line-height: 1.5;
}
.nav-logout { cursor: pointer; }


/* ============================================================
   Account page + navbar avatar
   ============================================================ */
.account-provider { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: 2px; }
.account-email { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.account-avatar-wrap { position: relative; width: 112px; height: 112px; margin: 0 auto var(--space-md); }
.account-avatar, .account-avatar-fallback {
  width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--border-accent); background: var(--bg-card);
}
.account-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}
.avatar-edit {
  position: absolute; bottom: 2px; right: 2px; width: 34px; height: 34px;
  border-radius: 50%; background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid var(--bg-base); font-size: 0.95rem;
}
#account-form .form-group { text-align: left; margin-bottom: var(--space-md); }
.account-notice {
  margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-accent); border-radius: var(--radius-md);
  background: rgba(99,102,241,0.08); color: var(--text-secondary);
  font-size: var(--text-sm); line-height: 1.5;
}
.nav-avatar {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  vertical-align: middle; margin-right: 6px; border: 1px solid var(--border-accent);
}