/* ============================================================================
 * AI Academy — site-token override layer
 * Loaded AFTER css/style.css inside each program's index.html.
 * Bridges the courses' design system to kevinweekly.com:
 *   - re-declares site CSS variables (--bg, --ink, --accent, fonts, etc.)
 *   - redirects the courses' variables (--primary, --gray-N) at site tokens
 *   - flattens the per-program .theme-* primaries so the body uses rust accent
 *   - keeps per-program color as a hint via --program-accent (icons, stripes)
 *   - repositions .app-header to sit below the site's sticky nav (top:60px)
 *   - inlines the site's .site-header / .wrap / .btn / .eyebrow so the static
 *     program shells render the navbar without pulling in global.css
 *
 * No edits to css/style.css itself.
 * ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ---- site tokens (mirrored from src/styles/global.css) ---- */
:root {
  --bg: #fbfaf7;
  --bg-2: #f4f1ea;
  --ink: #1b1a17;
  --ink-2: #45433d;
  --muted: #6f6c63;
  --line: #e3ded2;
  --accent: #b8431f;
  --accent-soft: #f3e3da;
  --max: 1080px;
  --radius: 14px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- redirect the courses' variables onto site tokens ---- */
  --primary: var(--accent);
  --primary-light: color-mix(in srgb, var(--accent) 60%, white);
  --primary-dark: color-mix(in srgb, var(--accent) 80%, black);
  --gray-50: var(--bg);
  --gray-100: var(--bg-2);
  --gray-200: var(--line);
  --gray-300: var(--line);
  --gray-400: var(--muted);
  --gray-500: var(--muted);
  --gray-600: var(--ink-2);
  --gray-700: var(--ink-2);
  --gray-800: var(--ink);
  --gray-900: var(--ink);
  --success: #2e7d4f;
  --success-light: color-mix(in srgb, #2e7d4f 14%, var(--bg-2));
  --error: var(--accent);
  --error-light: var(--accent-soft);
  --warning: #b87a1f;
  --warning-light: color-mix(in srgb, #b87a1f 14%, var(--bg-2));
  --font-stack: var(--sans);
  --sidebar-width: 280px;

  /* ---- per-program accent (used only for hints: stripes, icons, progress) ---- */
  --program-accent: var(--accent);
  --program-accent-soft: var(--accent-soft);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14130f;
    --bg-2: #1c1a15;
    --ink: #f3efe6;
    --ink-2: #d6d1c4;
    --muted: #9a958a;
    --line: #2c2a23;
    --accent: #e5703f;
    --accent-soft: #2a1f18;
  }
}

/* ---- flatten the per-program .theme-* primaries to rust ----
 * Original style.css sets .theme-circuits { --primary: blue; ... } etc.
 * We win because our rules come later (override file is loaded after style.css).
 */
.theme-semiconductor,
.theme-circuits,
.theme-mechanical,
.theme-safety {
  --primary: var(--accent);
  --primary-light: color-mix(in srgb, var(--accent) 60%, white);
  --primary-dark: color-mix(in srgb, var(--accent) 80%, black);
}

/* ---- per-program accent hints (stripes, icons, progress bar fill, sidebar active) ---- */
body.theme-circuits      { --program-accent: #2c63c8; --program-accent-soft: #dfe8f7; }
body.theme-semiconductor { --program-accent: #2c63c8; --program-accent-soft: #dfe8f7; }
body.theme-mechanical    { --program-accent: #c66a17; --program-accent-soft: #f4e1c8; }
body.theme-safety        { --program-accent: #a8362b; --program-accent-soft: #f1d8d2; }

@media (prefers-color-scheme: dark) {
  body.theme-circuits,
  body.theme-semiconductor { --program-accent: #6e9ad8; --program-accent-soft: #1a2236; }
  body.theme-mechanical    { --program-accent: #d99257; --program-accent-soft: #2a1d12; }
  body.theme-safety        { --program-accent: #d97264; --program-accent-soft: #2a1413; }
}

/* ============================================================================
 * site shell — typography, body, links
 * ============================================================================ */

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

a { color: var(--accent); }
a:hover { color: var(--accent); text-decoration: underline; }

code, pre, kbd, samp { font-family: var(--mono); }

/* ============================================================================
 * site navbar — inlined so static shells don't need global.css
 * (the actual markup is injected by scripts/build-academy-nav.mjs)
 * ============================================================================ */

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
}
.site-header .wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; height: 60px;
}
.site-header .name { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); font-weight: 600; }
.site-header .name:hover { text-decoration: none; }
.site-header nav { display: flex; gap: 1.6rem; font-size: 0.9rem; }
.site-header nav a { color: var(--ink-2); text-decoration: none; }
.site-header nav a:hover { color: var(--accent); text-decoration: none; }

/* CSS-only mobile toggle (checkbox hack). */
.site-header .wrap { position: relative; }
.site-header__toggle-cb { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.site-header__toggle { display: none; }

@media (max-width: 640px) {
	.site-header__toggle {
		display: block; cursor: pointer;
		color: var(--ink-2);
		font-size: 1.5rem; line-height: 1;
		padding: 0.3rem 0.4rem; margin-right: -0.4rem;
		user-select: none;
	}
	.site-header__toggle:hover { color: var(--accent); }
	.site-header .wrap > nav { display: none; }
	.site-header__toggle-cb:checked ~ nav {
		display: flex; flex-direction: column;
		position: absolute; top: calc(100% + 8px); right: 16px;
		background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
		padding: 0.9rem 1.2rem; gap: 0.9rem; min-width: 180px;
		box-shadow: 0 8px 28px rgba(0,0,0,0.12); font-size: 0.95rem;
	}
}

/* ============================================================================
 * course app-header — restyled to parchment, sticks below site nav
 * ============================================================================ */

.app-header {
  background: var(--bg-2);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  position: sticky;
  top: 60px;          /* below the site nav (60px tall) */
  z-index: 40;        /* below site nav z-index 50 */
  padding: 0.6rem 1rem;
  font-family: var(--sans);
}

.app-header .logo {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}
.app-header .logo:hover { opacity: 1; color: var(--accent); }

.hamburger { color: var(--ink-2); }
.hamburger:hover { color: var(--accent); }

.back-to-programs {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.back-to-programs:hover { color: var(--accent); text-decoration: none; }

.level-selector {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 2px;
}
.level-btn {
  color: var(--muted);
  background: transparent;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.level-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.level-btn.active {
  background: var(--accent);
  color: #fff;
}

.header-progress { color: var(--ink-2); }
.progress-bar { background: var(--line); }
.progress-bar-fill { background: var(--program-accent); }
.progress-text { color: var(--muted); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; opacity: 1; }

/* ============================================================================
 * sidebar — offset to live below both headers
 * ============================================================================ */

.sidebar { background: var(--bg-2); border-right: 1px solid var(--line); box-shadow: none; }
.sidebar-overlay { background: rgba(0,0,0,0.45); }

.sidebar-header {
  background: var(--bg-2);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
}
.sidebar-close { color: var(--ink-2); }
.sidebar-close:hover { color: var(--accent); }

.sidebar-nav .course-link { color: var(--ink-2); font-weight: 500; }
.sidebar-nav .course-link:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.sidebar-nav .course-link.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-left: 3px solid var(--program-accent);
}
.sidebar-nav .course-progress-badge { background: var(--line); color: var(--muted); }
.sidebar-nav .course-progress-badge.done { background: var(--program-accent); color: #fff; }

.sidebar-nav .week-sub-link { color: var(--muted); }
.sidebar-nav .week-sub-link:hover { color: var(--accent); background: transparent; }
.sidebar-nav .week-sub-link.active { color: var(--accent); border-left: 2px solid var(--program-accent); }
.sidebar-nav .week-sub-link .sub-badge.scored { background: var(--program-accent); color: #fff; }

/* desktop sidebar offset stacks below both headers: site (60) + app-header (~52) */
@media (min-width: 1024px) {
  .sidebar {
    top: 112px;
    height: calc(100vh - 112px);
    z-index: 30;
  }
}

.sidebar-context-header { background: var(--bg); color: var(--ink-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; }
.sidebar-slide-item { color: var(--ink-2); }
.sidebar-slide-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.sidebar-slide-item.active { color: var(--accent); background: var(--accent-soft); }

/* ============================================================================
 * breadcrumb
 * ============================================================================ */

.breadcrumb { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--accent); text-decoration: none; }
.breadcrumb .bc-current { color: var(--ink); }

/* ============================================================================
 * course grid / week cards
 * ============================================================================ */

.course-grid h1 { font-family: var(--serif); color: var(--ink); }
.course-grid .subtitle { color: var(--muted); }

.course-card,
.week-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.course-card:hover,
.week-card:hover {
  transform: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.course-card .course-number,
.week-card .week-number {
  background: var(--program-accent-soft);
  color: var(--program-accent);
  font-family: var(--mono);
  font-weight: 600;
}
.course-card h3,
.week-card .week-info h4 { color: var(--ink); font-family: var(--serif); font-weight: 500; }
.course-card .course-meta,
.week-card .week-info .week-meta { color: var(--muted); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; }
.course-card .progress-label { color: var(--muted); font-family: var(--mono); }
.week-card.completed { border-color: color-mix(in srgb, var(--program-accent) 35%, var(--line)); }

.week-grid h2 { color: var(--ink); }
.week-grid .back-btn { color: var(--ink-2); background: transparent; }
.week-grid .back-btn:hover { color: var(--accent); }

/* ============================================================================
 * slide view
 * ============================================================================ */

.slide-top-bar { background: var(--bg); border-bottom: 1px solid var(--line); }
.slide-top-bar .back-btn { color: var(--ink-2); }
.slide-top-bar .back-btn:hover { color: var(--accent); }
.slide-top-bar .slide-title { color: var(--ink); font-family: var(--serif); font-weight: 500; }
.slide-top-bar .slide-counter { color: var(--muted); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; }

.slide-progress { background: var(--line); }
.slide-progress-fill { background: var(--program-accent); }

.slide-inner h2 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.45rem;
  letter-spacing: -0.01em;
}
.slide-inner h3 { color: var(--ink); font-family: var(--serif); font-weight: 500; }
.slide-inner p { color: var(--ink-2); }
.slide-inner strong { color: var(--ink); }
.slide-inner code {
  background: var(--bg-2);
  color: var(--accent);
  border: 1px solid var(--line);
}
.slide-inner .highlight-box {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.slide-inner .key-concept {
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-2));
  border-left: 3px solid var(--warning);
}

.slide-inner .formula {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--mono);
}

.diagram-container {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.diagram-caption { color: var(--muted); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; }

.slide-notes {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.slide-notes summary { color: var(--ink); font-family: var(--serif); font-weight: 500; }

/* bottom navigation */
.slide-nav { background: var(--bg); border-top: 1px solid var(--line); }
.slide-nav button { border-radius: 999px; font-family: var(--sans); }
.btn-prev { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); }
.btn-prev:hover { background: var(--bg-2); border-color: var(--accent); color: var(--accent); }
.btn-next { background: var(--accent); color: #fff; }
.btn-next:hover { background: var(--accent); filter: brightness(1.07); }
.btn-quiz { background: var(--success); color: #fff; }
.btn-quiz:hover { background: var(--success); filter: brightness(1.07); }

.slide-nav .nav-dot { background: var(--line); }
.slide-nav .nav-dot.active { background: var(--accent); }
.slide-nav .nav-dot.visited { background: color-mix(in srgb, var(--accent) 45%, var(--line)); }

/* ============================================================================
 * quiz view
 * ============================================================================ */

.quiz-header h2 { color: var(--ink); }
.quiz-header .quiz-subtitle { color: var(--muted); }
.quiz-progress .progress-bar { background: var(--line); }
.quiz-progress .progress-bar-fill { background: var(--accent); }
.quiz-progress .progress-label { color: var(--muted); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; }

.question-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.question-number { color: var(--muted); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.74rem; }
.question-text { color: var(--ink); }

.quiz-option {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.quiz-option:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--bg)); }
.quiz-option .option-marker { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); }
.quiz-option.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.quiz-option.selected .option-marker { background: var(--accent); color: #fff; border-color: var(--accent); }
.quiz-option.correct { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--bg)); }
.quiz-option.correct .option-marker { background: var(--success); color: #fff; border-color: var(--success); }
.quiz-option.incorrect { border-color: var(--accent); background: var(--accent-soft); }
.quiz-option.incorrect .option-marker { background: var(--accent); color: #fff; border-color: var(--accent); }

.tf-option { background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); }
.tf-option:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tf-option.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.tf-option.correct { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--bg)); }
.tf-option.incorrect { border-color: var(--accent); background: var(--accent-soft); }

.matching-select { background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-family: var(--sans); }
.matching-select:focus { border-color: var(--accent); outline: none; }
.matching-select.correct { border-color: var(--success); }
.matching-select.incorrect { border-color: var(--accent); }

.explanation { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); }
.explanation.correct { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); background: color-mix(in srgb, var(--success) 8%, var(--bg-2)); }
.explanation.incorrect { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }

.quiz-submit { background: var(--accent); color: #fff; border-radius: 999px; border: 1px solid var(--accent); }
.quiz-submit:hover { background: var(--accent); filter: brightness(1.07); }
.quiz-submit:disabled { background: var(--bg-2); color: var(--muted); border-color: var(--line); cursor: not-allowed; opacity: 1; }

.quiz-score { font-family: var(--serif); color: var(--ink); }
.quiz-score.pass { color: var(--success); }
.quiz-score.fail { color: var(--accent); }
.quiz-results .score-text { color: var(--ink-2); }

.btn-retry { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; }
.btn-retry:hover { background: var(--bg-2); border-color: var(--accent); color: var(--accent); }
.btn-continue { background: var(--accent); color: #fff; border-radius: 999px; border: 1px solid var(--accent); }
.btn-continue:hover { background: var(--accent); filter: brightness(1.07); }

/* ============================================================================
 * glossary tooltips
 * ============================================================================ */

.glossary-term {
  border-bottom: 1.5px dotted var(--accent);
  cursor: help;
}
.glossary-term:hover { background: var(--accent-soft); }
.glossary-tooltip {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  font-family: var(--sans);
}
.glossary-tooltip-term { color: var(--accent); font-family: var(--serif); font-weight: 500; }
.glossary-tooltip-def { color: var(--ink-2); }
.glossary-tooltip-cat { color: var(--muted); font-family: var(--mono); }

/* ============================================================================
 * KaTeX font sizing + dark-mode glyph color
 * ============================================================================ */

.formula .katex { font-size: 1.05em; }
.katex { color: inherit; }

@media (prefers-color-scheme: dark) {
  .katex,
  .katex * {
    color: var(--ink);
  }
}

/* ============================================================================
 * progressive highlighting (preserve, but tint with site accent)
 * ============================================================================ */

.diagram-highlight.active {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent));
}

/* ============================================================================
 * fix old landing-page styles (program-landing.html was removed, but
 * .program-card class is reused by the Astro landing's data IDs — keep clean)
 * ============================================================================ */

.landing-page,
.landing-header,
.landing-content { /* unused now — Astro /academy replaces these */ }

/* ============================================================================
 * KaTeX dark-mode safety net for inline math inside slides
 * (KaTeX uses computed black by default; force it to inherit)
 * ============================================================================ */
.slide-inner .katex,
.slide-inner .katex * { color: inherit; }