/*
 * site/chapter-shell.css — Light chapter hub + topic pages.
 *
 * Brings these pages onto the same approved public-site design system as
 * Home / Class 10 / Science: header, footer, breadcrumb, container width,
 * Manrope, palette. Loaded alongside home.css (for tokens/header/footer/
 * .ph-container) via the shared `.ph-page` wrapper class.
 *
 * The article's own semantic markup and typography selectors (h1-h3, .lede,
 * .term, .formula-block, .activity, .topic-card, .topic-nav, table, code,
 * .lesson-launch, etc.) still come from site.css — UNTOUCHED. This file
 * only remaps the handful of CSS custom properties those selectors read
 * (--ink, --muted, --card, --line, --accent, --accent-ink, --lede, --focus)
 * to the approved emerald equivalents, scoped to `.chapter-page` so
 * site.css's own light/dark theme and every other page stay unaffected.
 *
 * `.lesson-overlay` (the full-screen immersive lesson) is deliberately NOT
 * touched here — it keeps its own fixed dark "stage" look regardless of the
 * article's theme, per site.css's own documented intent. Website shell and
 * lesson shell are two different concerns; this file only reskins the
 * former.
 */

.chapter-page {
  --ink: var(--text);
  --muted: var(--text-secondary);
  --card: var(--surface);
  --line: var(--border);
  --accent: var(--mint);
  --accent-ink: var(--text);
  --lede: var(--text-secondary);
  --focus: var(--mint);
}

/* two hardcoded (non-var) colours in site.css need an explicit override —
   everything else follows automatically from the token remap above */
.chapter-page .skip-link { background: var(--mint); color: #06281d; }
.chapter-page code { background: rgba(255, 255, 255, 0.08); color: var(--text); }

.chapter-shell { padding-top: clamp(28px, 4.5vh, 56px); padding-bottom: clamp(40px, 6vh, 72px); }

/* narrow the prose article for comfortable reading, centered within the
   wider shared 1240px shell */
.chapter-shell > article { max-width: 46rem; margin: 0 auto; }

/* breadcrumb — same visual language as /class-10/ and /class-10/science/ */
.chp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto 28px;
  max-width: 46rem;
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--text-muted);
}
.chp-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.chp-breadcrumb a:hover { color: var(--text-secondary); }
.chp-breadcrumb [aria-current="page"] { color: var(--text-secondary); font-weight: 600; }
.chp-crumb-sep { color: var(--border); }

/* topic-page launcher: give the .ph-btn a little breathing room within the
   retinted article */
.lesson-launch { margin: 24px 0 12px; }

/* a touch more separation for card-like blocks against the emerald surface */
.activity { box-shadow: 0 10px 24px rgba(3, 20, 14, 0.22); }

/* ---- chapter hub: "Learn this chapter" navigator ----
   Sits above the fold, replacing the old CTA-then-article-then-topic-list
   flow: one compact, clickable row per real, implemented topic. Same
   quiet-row visual language as the Science index's chapter list. */
.chp-hub-meta {
  margin: -4px 0 14px;
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chp-learn { margin: 20px 0 36px; }
.chp-nav-list { list-style: none; margin: 12px 0 4px; padding: 0; }
.chp-nav-row { border-bottom: 1px solid var(--border); }
.chp-nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 8px;
  margin-inline: -8px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}
.chp-nav-link:hover, .chp-nav-link:focus-visible { background: rgba(169, 232, 207, 0.08); }
.chp-nav-num { flex-shrink: 0; width: 1.8rem; font-size: var(--text-meta); font-weight: 600; color: var(--mint); }
.chp-nav-title { flex: 1 1 auto; font-size: var(--text-body); font-weight: 600; color: var(--text); }
.chp-nav-go { flex-shrink: 0; color: var(--mint); }
.chp-nav-go .ph-icon { width: 16px; height: 16px; }
.chp-nav-more { margin: 10px 4px 0; font-size: var(--text-meta); color: var(--text-muted); }