/* css/styles.css — Khan Academy style base */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@400;500;600;700;800&family=Nunito:wght@700;800;900&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Khan left nav — collapsed */
#chapter-sidenav { width: 300px; }
#chapter-sidenav.collapsed { width: 64px; }
#chapter-sidenav.collapsed .sidenav-label { display: none !important; }
#chapter-sidenav.collapsed #sidenav-chapter-list .chapter-row-label { display: none; }
#chapter-sidenav.collapsed #sidenav-chapter-list .chapter-row { justify-content: center; padding: 0.6rem 0.4rem; }
.khan-chapter-row { display:flex; gap:0.6rem; align-items:center; padding:0.55rem 0.5rem; border-radius:8px; cursor:pointer; border:1px solid transparent; }
.khan-chapter-row:hover { background:#F7F8FA; border-color:#E6E7EB; }
.khan-chapter-row.active { background:#E7F0FF; border-color:#1865F2; }
/* legacy thermo kept but Khan uses dots */
.thermo-track { width:6px; background:#F0F1F3; border:1px solid #E6E7EB; border-radius:999px; overflow:hidden; }
.thermo-fill.low { background:#D6D8DE; }
.thermo-fill.mid { background:#FFA600; }
.thermo-fill.high { background:#1EB77A; }
.chapter-row { display:flex; gap:0.6rem; align-items:center; padding:0.6rem 0.5rem; border-radius:8px; cursor:pointer; }

h1, h2, h3, h4, .font-heading { font-family: 'Nunito','Inter',sans-serif; letter-spacing: -0.02em; }

/* Khan header — white, airy */
.khan-header { background: #FFFFFF; border-bottom: 1px solid #D6D8DE; }
.khan-search { background: #F0F1F3; border: 1px solid transparent; border-radius: 8px; }
.khan-search:focus-within { background: #fff; border-color: #1865F2; box-shadow: 0 0 0 3px rgba(24,101,242,0.15); }
.khan-btn-primary { background: var(--khan-blue); color:#fff; border-radius:8px; font-weight:700; }
.khan-btn-primary:hover { background: var(--khan-blue-dark); }
.khan-card { background:#fff; border:1px solid #E6E7EB; border-radius:12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.khan-card:hover { border-color:#D6D8DE; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.khan-lesson-card { border-left:4px solid transparent; }
.khan-lesson-card.active { border-left-color: var(--khan-blue); background:#F0F6FF; }

/* Khan mastery dots */
.khan-dot { width:10px; height:10px; border-radius:999px; border:2px solid #D6D8DE; background:#fff; }
.khan-dot.familiar { background:#FFD43D; border-color:#FFD43D; }
.khan-dot.proficient { background:#1EB77A; border-color:#1EB77A; }
.khan-dot.mastered { background:#1865F2; border-color:#1865F2; }
.khan-dot.attempted { background:#FFA600; border-color:#FFA600; }

.font-mono-math {
  font-family: 'Fira Code', monospace;
}

/* Glassmorphism & Surface Helpers */
.bg-surface-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bg-surface-subtle {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
}

.glow-cyan {
  box-shadow: var(--shadow-glow-cyan);
}

.glow-gold {
  box-shadow: var(--shadow-glow-gold);
}

.glow-emerald {
  box-shadow: var(--shadow-glow-emerald);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

/* KaTeX custom sizing & scroll behavior */
.katex-display {
  margin: 0.5em 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25em 0;
}
.katex {
  font-size: 1.15em;
  text-rendering: optimizeLegibility;
}

/* Dynamic Animation Utilities */
@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.03); }
}

.animate-pulse-glow {
  animation: pulseGlow 2.5s infinite ease-in-out;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fadeInScale 0.25s ease-out forwards;
}

/* Responsive Grid Helpers */
@media (max-width: 1024px) {
  .practice-layout-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Focused chapter-learning workspace — JAMS 7th grade readability boost */
.learning-shell { max-width: 980px; margin: 0 auto; }
.eyebrow-label, .mode-kicker { color: var(--accent-cyan); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.learning-chapter-select, .learning-response { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 0.85rem; padding: 0.85rem 1rem; outline: none; font-size: 0.95rem; }
.learning-chapter-select:focus, .learning-response:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-cyan-glow); }
.learning-mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.learning-mode-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 1rem; padding: 1.1rem; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; transition: 0.2s ease; }
.learning-mode-btn i { color: var(--accent-cyan); grid-row: span 2; font-size: 1.25rem; }
.learning-mode-btn span { color: var(--text-primary); font-weight: 800; font-size: 0.95rem; }
.learning-mode-btn small { color: var(--text-secondary); font-size: 0.78rem; margin-top: 0.15rem; }
.learning-mode-btn:hover, .learning-mode-btn.active-mode { border-color: var(--accent-cyan); background: var(--bg-card-hover); box-shadow: var(--shadow-glow-cyan); }
.learning-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 1.5rem; padding: clamp(1.5rem, 5vw, 4rem); min-height: 410px; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow-card); }
.learning-prompt { color: var(--text-primary); font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1.4; font-weight: 700; text-align: center; max-width: 820px; margin: 2.5rem auto 0; }
.learning-answer { background: var(--bg-surface); color: var(--text-primary); border-left: 3px solid var(--accent-emerald); border-radius: 0.8rem; padding: 1rem; max-width: 760px; margin: 1.5rem auto 0; line-height: 1.6; font-size: 0.95rem; }
.learning-response { width: 100%; min-height: 130px; margin-top: 2rem; resize: vertical; }
.primary-learning-btn, .secondary-learning-btn { border-radius: 0.85rem; padding: 0.85rem 1.2rem; font-weight: 800; transition: 0.2s ease; font-size: 0.95rem; min-height: 44px; }
.primary-learning-btn { background: var(--accent-cyan); color: var(--button-contrast); }
.primary-learning-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.secondary-learning-btn { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); }
.secondary-learning-btn:hover { border-color: var(--accent-cyan); }
.source-label { color: var(--text-muted); font-size: 0.78rem; text-align: center; margin-top: 2rem; overflow-wrap: anywhere; }
.chapter-learning-note { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--text-secondary); font-size: 0.85rem; margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--border-color); border-radius: 0.85rem; background: var(--bg-surface); line-height: 1.5; }
.chapter-learning-note i { color: var(--accent-cyan); margin-top: 0.15rem; }
.practice-subtab { transition: all 0.2s ease; min-height: 38px; }
/* Daily mission progress polish */
#daily-mission-hero { max-width: 980px; margin: 0 auto; width: 100%; }
#hero-progress-ring.done { background: var(--accent-emerald); color: white; border-color: var(--accent-emerald); }
/* XP toast for 7th-grade delight */
.xp-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-card); border: 1px solid var(--accent-gold); color: var(--text-primary); padding: 0.85rem 1.2rem; border-radius: 1rem; box-shadow: var(--shadow-card); font-weight: 800; font-size: 0.9rem; z-index: 70; opacity: 0; pointer-events: none; transition: all 0.35s ease; }
.xp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.learning-tool-toolbar { position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 60; display: flex; flex-direction: column-reverse; align-items: center; gap: 0.65rem; }
.tool-fab-main, .tool-fab { width: 2.9rem; height: 2.9rem; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--border-color); box-shadow: var(--shadow-card); transition: 0.2s ease; }
.tool-fab-main { background: var(--accent-cyan); color: var(--button-contrast); font-size: 1.1rem; }
.tool-fab { background: var(--bg-card); color: var(--text-primary); opacity: 0; pointer-events: none; transform: translateY(0.5rem) scale(0.8); }
.tools-open .tool-fab { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.tool-fab:hover, .tool-fab-main:hover { transform: scale(1.06); }
.tool-sidecar { position: fixed; right: 1.25rem; top: 5.5rem; bottom: 1.25rem; width: min(390px, calc(100vw - 2rem)); z-index: 55; overflow: auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 1.25rem; padding: 1.15rem; box-shadow: var(--shadow-card); animation: slideInRight 0.25s ease-out; }
.sidecar-close { color: var(--text-secondary); padding: 0.35rem; }
.sidecar-canvas-wrap { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 0.8rem; overflow: hidden; }
#sidecar-scratchpad-canvas { width: 100%; height: 280px; display: block; touch-action: none; }
#sidecar-graph-canvas { width: 100%; height: 260px; display: block; }
@media (max-width: 640px) { .learning-mode-tabs { grid-template-columns: 1fr; } .learning-tool-toolbar { right: 0.75rem; bottom: 4.75rem; } .tool-sidecar { right: 0.75rem; top: 4.75rem; bottom: 4.75rem; } }

/* Light-mode readability corrections for the existing Tailwind-heavy UI */
html[data-theme="light"] { --button-contrast: #ffffff; --code-surface: #F1F5F9; }
html[data-theme="dark"], html[data-theme="oled"], html[data-theme="cyberpunk"] { --button-contrast: #07111F; --code-surface: var(--bg-input); }
html[data-theme="light"] .text-white { color: var(--text-primary) !important; }
html[data-theme="light"] .text-slate-300, html[data-theme="light"] .text-slate-400 { color: var(--text-secondary) !important; }
html[data-theme="light"] .text-slate-500, html[data-theme="light"] .text-slate-600 { color: var(--text-muted) !important; }
html[data-theme="light"] .bg-slate-900, html[data-theme="light"] .bg-slate-800 { background-color: var(--code-surface) !important; }
html[data-theme="light"] .border-slate-700, html[data-theme="light"] .border-slate-700\/60 { border-color: var(--border-color) !important; }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color: var(--text-primary); }