/* Alpha School — unified navigation chrome (assets/alpha-unified-nav.css)
 *
 * ONE design for the nav chrome across the whole Alpha School ecosystem:
 * the Competition Arena / Quest tool bars (class .alpha-unified-nav on the
 * bar itself) and the portal main nav (class .alpha-unified-nav added to
 * #alpha-nav by assets/analytics.js, which also loads this file).
 *
 * UNB light professional theme: background #faf9f6, surface #f4f1ea,
 * text #211d19, muted #6b6259, accent #3d5a45, accent dark #2d4433,
 * border #e9e2d5.
 *
 * Scope note: this file styles nav chrome and nav-adjacent buttons/titles
 * ONLY. It deliberately does not restyle lesson body text or lesson
 * layouts — touching 1,200+ lessons' typography would risk breaking them.
 */

/* --- Shared tool bar (Arena, Quest hub, labs, guides) --- */
.alpha-unified-nav {
  background: #f4f1ea;
  border-bottom: 1px solid #e9e2d5;
  padding: .7rem 1rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.alpha-unified-nav a {
  color: #211d19;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: .35rem .8rem;
  border: 1px solid transparent;
  border-radius: 8px;
}
.alpha-unified-nav a:hover {
  color: #2d4433;
  background: #faf9f6;
  border-color: #e9e2d5;
  text-decoration: none;
}
.alpha-unified-nav a.active {
  color: #fff;
  background: #3d5a45;
  border-color: #3d5a45;
}
.alpha-unified-nav a.nav-back {
  color: #3d5a45;
  border-color: #e9e2d5;
  background: #faf9f6;
  font-weight: 700;
}
.alpha-unified-nav a.nav-back:hover {
  background: #3d5a45;
  color: #fff;
  border-color: #3d5a45;
}

/* --- Portal main nav (#alpha-nav) — same button treatment.
 * Colours, fonts, padding, borders and radius ONLY: no display,
 * visibility, flex-direction, position or width rules here, so the live
 * mobile toggle keeps working exactly as it does now. --- */
#alpha-nav.alpha-unified-nav .nav-links a {
  color: #211d19;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: .35rem .8rem;
  border: 1px solid transparent;
  border-radius: 8px;
}
#alpha-nav.alpha-unified-nav .nav-links a:hover {
  color: #2d4433;
  background: #faf9f6;
  border-color: #e9e2d5;
  text-decoration: none;
}
#alpha-nav.alpha-unified-nav .nav-links a.active {
  color: #fff;
  background: #3d5a45;
  border-color: #3d5a45;
}
#alpha-nav.alpha-unified-nav .nav-links a.nav-back {
  color: #3d5a45;
  border-color: #e9e2d5;
  background: #faf9f6;
  font-weight: 700;
}
#alpha-nav.alpha-unified-nav .nav-links a.nav-back:hover {
  background: #3d5a45;
  color: #fff;
  border-color: #3d5a45;
}
#alpha-nav.alpha-unified-nav .nav-toggle {
  color: #211d19;
  border: 1px solid #e9e2d5;
  border-radius: 8px;
  background: #f4f1ea;
  font-weight: 600;
}

/* --- Nav-adjacent chrome only (shared-bar pages can use these) --- */
.alpha-btn-primary {
  display: inline-block;
  background: #3d5a45;
  color: #fff;
  padding: .7rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #3d5a45;
}
.alpha-btn-primary:hover {
  background: #2d4433;
  color: #fff;
  text-decoration: none;
}
.alpha-btn-secondary {
  display: inline-block;
  background: #f4f1ea;
  color: #211d19;
  padding: .7rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #e9e2d5;
}
.alpha-btn-secondary:hover {
  background: #faf9f6;
  color: #2d4433;
  text-decoration: none;
}
.alpha-page-title {
  font-size: 2rem;
  color: #211d19;
  margin: .5rem 0 .25rem;
}

/* --- Lesson overflow guard (Nov 2026) ---
 * Fixes lesson text bleeding off the right edge, reported on an Indian
 * history lesson's Exam Experience section (Queen Victoria's Proclamation
 * quotation running off-screen mid-word). Diagnosed cause: source
 * quotations are set in <pre><code> blocks, and no rule in the lesson
 * styles wraps them — the browser default white-space: pre keeps each
 * quotation on one unbroken line, so a long quotation widens the whole
 * page beyond the viewport. These rules make long lines wrap inside the
 * content column instead. They change no fonts, colours or lesson text,
 * and no layout beyond stopping the overflow. This file is loaded on
 * every page that loads assets/analytics.js (which includes all lesson
 * pages), so the guard reaches every lesson without touching any lesson
 * file. --- */
.lesson-layout {
  max-width: 100%;
  box-sizing: border-box;
}
.lesson-main,
.lesson-content {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.lesson-main pre,
.lesson-content pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}
.lesson-main pre code,
.lesson-content pre code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.lesson-main blockquote,
.lesson-content blockquote {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}
.lesson-main table,
.lesson-content table {
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  overflow-x: auto;
}
.lesson-main td,
.lesson-main th,
.lesson-content td,
.lesson-content th {
  overflow-wrap: break-word;
}
.lesson-main img,
.lesson-content img,
.lesson-main iframe,
.lesson-content iframe {
  max-width: 100%;
  box-sizing: border-box;
}
.lesson-main p,
.lesson-content p {
  overflow-wrap: break-word;
}

/* --- History lesson typography — unified (Oct 2026) ---
 * Audit of all 108 history lessons (Indian 26, British 24, US 30, World 28)
 * found two kinds of mismatch, both fixed here in the one shared file
 * that every lesson already loads (via assets/analytics.js), so no lesson
 * file is touched:
 * 1. Source quotations are set in <pre><code> blocks with no font rule
 *    anywhere, so the browser renders them in monospace while the lesson
 *    prose is the site sans — the mismatch in the reported screenshot
 *    (lesson-14, Queen Victoria's Proclamation). 59 quotation blocks in
 *    38 Indian/British lessons. These rules give quotations the same
 *    font, size, line-height and colour as the surrounding prose, keeping
 *    the wrap fix above, and mark them as quotations with a light
 *    background and an accent left border — identically on every lesson.
 * 2. The lessons carry nine different inline <style> variants: only 40
 *    of 108 files style h2/h3, key-terms, discussion and the country
 *    badge; only 68 style the audio box. The rules below are copied
 *    VERBATIM from the variants that already have them, so lessons that
 *    already had a rule see no change at all, and the rest gain exactly
 *    the same styling. This file is appended last (injected by
 *    analytics.js), so at equal specificity these rules win over the
 *    per-lesson inline <style> blocks. No !important anywhere, matching
 *    the rest of this file.
 * Deliberately unchanged: .lesson-viz/.viz-note (identical text in all
 *    108 files already); tables (no rule anywhere, so equally plain on
 *    the few lessons that have them); inline style="..." attributes
 *    (content-level, same patterns in every course); lesson text. --- */
.lesson-main pre,
.lesson-content pre {
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text, #211d19);
  background: #faf9f6;
  border-left: 3px solid var(--accent, #3d5a45);
  padding: .9rem 1.1rem;
  border-radius: 0 10px 10px 0;
  margin: 1rem 0;
}
.lesson-main pre code,
.lesson-content pre code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
}
.lesson-content h2{color:#211d19;margin-top:2rem;font-size:1.3rem;border-bottom:2px solid #e9e2d5;padding-bottom:.5rem;}
.lesson-content h3{color:#3d5a45;margin-top:1.5rem;}
.key-terms{background:#faf9f6;border:1px solid #e9e2d5;border-radius:10px;padding:1.25rem;margin:2rem 0;}
.key-terms h3{margin-top:0;color:#211d19;}
.key-terms dt{font-weight:700;color:#3d5a45;margin-top:.75rem;}
.key-terms dd{margin:.25rem 0 0;color:#444;}
.discussion{background:#f4f1ea;border-radius:10px;padding:1.25rem;margin:2rem 0;}
.discussion h3{margin-top:0;}
.discussion ol{margin:.5rem 0;padding-left:1.5rem;}
.discussion li{margin:.5rem 0;color:#444;}
.country-badge{display:inline-block;background:#3d5a45;color:#fff;font-size:.75rem;font-weight:700;
  padding:.25rem .75rem;border-radius:20px;margin-bottom:1rem;}
.lesson-audio{background:#faf9f6;border:1px solid #e9e2d5;border-radius:10px;padding:.9rem 1.1rem;margin:0 0 1.5rem;}
.lesson-audio p{margin:0 0 .5rem;font-weight:600;color:#211d19;font-size:.95rem;}
.lesson-audio audio{width:100%;max-width:560px;}