/* ── Shared lesson-page framework CSS ──────────────────────────────────────
   Extracted from 96 topic-lesson pages: these 44 rules were verified
   BYTE-IDENTICAL (after whitespace normalization) across every page that used them before this
   extraction — nothing here changes any page's rendering. Genuinely page-specific rules (custom
   colours/spacing for the same class name, one-off components) were deliberately left in each
   page's own inline <style> block rather than merged, since merging those would have silently
   changed some pages' appearance. See tools/ if this file needs regenerating. */

body { font-family:'Lexend',sans-serif; background:#eef1f7; color:#1a1a2e; }
.lesson-container { max-width:960px; margin:0 auto; padding:28px 16px 60px; }
.objectives-section { background:#fff; padding:20px 24px; margin:0 0 22px; border-radius:12px; border:2px solid #143185; box-shadow:0 1px 6px rgba(0,0,0,.07); }
.objectives-section h2, .objectives-section h4 { color:#143185; margin-bottom:12px; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.5px; }
.objectives-section ul { margin-left:18px; color:#333; }
.objectives-section li { margin-bottom:8px; font-size:14px; line-height:1.5; }
.concept-block { background:#fff; padding:28px; margin:0 0 22px; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.07); overflow:hidden; }
.concept-title { font-size:20px; font-weight:800; color:#143185; margin-bottom:18px; padding-bottom:10px; border-bottom:2px solid #EDB115; }
.rla-box { background:#fff8e1; border:2px solid #EDB115; padding:16px 20px; border-radius:10px; margin:0 0 22px; box-shadow:0 1px 6px rgba(0,0,0,.07); }
.rla-box h2, .rla-box h4 { color:#143185; font-weight:700; margin-bottom:10px; font-size:14px; }
.example { background:#f5f7fc; padding:16px; margin:16px 0; border-radius:10px; }
.mini-assessment { background:#eef2ff; padding:24px; margin:0 0 22px; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.07); border:2px solid #4f46e5; }
.assessment-title { font-size:15px; font-weight:700; color:#143185; margin-bottom:18px; }
.progress-text { font-size:12px; color:#888; margin-bottom:6px; }
.progress-container { background:#e0e7ff; border-radius:20px; height:6px; margin-bottom:18px; }
.progress-bar { background:#143185; height:6px; border-radius:20px; transition:width .3s; }
.question-wrapper { background:#f5f7fc; padding:20px; border-radius:10px; margin:16px 0; }
.q-text { font-weight:600; color:#143185; margin-bottom:12px; font-size:14px; line-height:1.55; }
.q-options { display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.q-option { display:flex; align-items:center; gap:10px; background:#fff; padding:10px 14px; border-radius:8px; border:1px solid #e0e7ff; font-size:14px; cursor:pointer; overflow-wrap:break-word; }
.q-option > * { min-width:0; }
.q-option:hover { border-color:#143185; }
.feedback { margin-top:12px; padding:12px 16px; border-radius:8px; display:none; font-size:13px; line-height:1.6; }
.feedback.show { display:block; }
.feedback.correct { background:#dcfce7; color:#166534; }
.feedback.incorrect { background:#fee2e2; color:#991b1b; }
.check-btn { padding:9px 20px; background:#143185; color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:600; margin-top:10px; font-size:13px; font-family:inherit; transition:background .2s; }
.check-btn:hover { background:#1f4aaa; }
.wizard-buttons { display:flex; gap:12px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.wizard-btn { padding:10px 22px; background:#143185; color:#fff; border:none; border-radius:20px; cursor:pointer; font-size:13px; font-weight:700; font-family:inherit; transition:all .2s; min-width:110px; }
.wizard-btn:hover { background:#1f4aaa; }
.wizard-btn:disabled { background:#ccc; cursor:not-allowed; opacity:.6; }

/* ── 44x44 minimum tap target ── these buttons' visible box (~34-36px tall) is under the
   WCAG/Apple HIG guideline. Rather than resizing the visible button (a real layout change
   across every lesson page that uses these classes), expand the invisible hit area only,
   same technique already used for book.html's .bk-summary-remove -- an absolutely positioned
   ::before matching the button's own box but with a 44px floor, centered over it. width/
   height:100% resolve against the button itself (the nearest positioned ancestor), so a
   button already wider than 44px keeps its full width as the hit area; min-width/min-height
   only kick in for the dimension that's actually undersized. */
.check-btn, .wizard-btn, .try-btn, .q-option { position:relative; }
.check-btn::before, .wizard-btn::before, .try-btn::before, .q-option::before {
  content:''; position:absolute; top:50%; left:50%; width:100%; height:100%;
  min-width:44px; min-height:44px; transform:translate(-50%,-50%);
}
.step:last-child { border-bottom:none; padding-bottom:0; }
.rla-box ul { margin-left:18px;margin-top:8px }
.rla-box li { font-size:14px;line-height:1.5;margin-bottom:8px;color:#333 }
.try-it { background:#f0f9ff;border:2px solid #0ea5e9;border-radius:12px;padding:20px;margin:20px 0; }
.try-it h3 { color:#0369a1;font-size:15px;margin:0 0 12px; }

/* Bespoke interactive widgets (drag/drop, canvas, custom chart builders etc.) -- tagged with
   this class in addition to .try-it so every interactive element on the site can be found and
   audited as a group, distinct from a standard Q&A practice table. */
.interactive-widget { border-color:#7c3aed !important; }
.interactive-widget h3 { color:#7c3aed !important; }

/* ── Practice-table defaults (added 2026-08) ── .try-table/.try-table th/.try-table td/
   .try-table tr:nth-child(even) td were verified byte-identical (whitespace aside) across
   every one of the ~64 pages that defined them locally -- centralized here so a page can no
   longer ship class="try-table" markup with zero matching CSS, which was a real live bug on
   at least one page before this extraction (unstyled browser-default table). .try-input/
   .try-input:focus/.try-result are centralized as the MAJORITY variant only (most pages used
   these exact values) -- genuinely bespoke pages (different width for longer answers, a
   different focus colour, a different result-badge style) keep a local override in their own
   <style> block, which still wins per the normal cascade (page <style> loads after this
   shared <link>), so nothing here changes an already-intentional page's appearance. */
.try-table { width:100%; border-collapse:collapse; margin:12px 0; font-size:13px; table-layout:auto; }
.try-table th { background:#143185; color:#fff; padding:8px 12px; text-align:left; }
.try-table td { padding:8px 12px; border-bottom:1px solid #e0e7ff; vertical-align:middle; }
.try-table tr:nth-child(even) td { background:#f5f7fc; }
/* First column (#, or a short row label like "Shape"/"Type") and last column (almost always
   "Result") are short, fixed-content headers -- without this, table-layout:auto's default
   column-width guessing can squeeze them below their own content width on a long "Question"
   column, wrapping "10" onto two lines or splitting "Result" into "Resu"/"lt". width:1% is the
   standard trick to make table-layout:auto shrink a column to its content instead of sharing
   space proportionally with the others. */
.try-table th:first-child, .try-table td:first-child { white-space:nowrap; width:1%; }
.try-table th:last-child, .try-table td:last-child { white-space:nowrap; }
.try-input { width:90px; padding:5px 8px; border:2px solid #e0e7ff; border-radius:6px; font-family:Lexend,sans-serif; font-size:13px; }
.try-input:focus { border-color:#0ea5e9; outline:none; }
.try-result { font-size:12px; margin-left:6px; }

.watchout-box { background:#fff8f0;border:2px solid #f97316;border-radius:12px;padding:22px 26px;margin:0 0 22px }
.watchout-title { color:#c2410c;font-size:17px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px }
.watchout-list { margin-left:20px }
.watchout-list li { font-size:14px;line-height:1.6;margin-bottom:10px;color:#1a1a2e }
.callout { background:#fff8e1;border:2px solid #EDB115;padding:14px 18px;border-radius:8px;margin:16px 0;font-size:13px;line-height:1.6;color:#333; }
.callout-tip { background:#f0f9ff;border:2px solid #0ea5e9; }
.callout-warn { background:#fff8f0;border:2px solid #f97316; }
.self-assess { background:#fdf7e3;border:2.5px solid #EDB115;border-radius:12px;padding:16px 20px 14px;margin:0 0 22px;box-shadow:0 1px 8px rgba(237,177,21,.18); }
.self-assess .sa-head { text-align:center;margin-bottom:2px; }
.self-assess .sa-title { font-size:15px;font-weight:800;color:#143185;margin:0; }
.self-assess .sa-sub { font-size:11.5px;color:#4a5170;margin:2px 0 0;line-height:1.4; }
.self-assess .sa-table { width:100%;margin-top:8px; }
.self-assess .sa-row { display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:8px 2px;border-bottom:1px solid rgba(237,177,21,.35); }
.self-assess .sa-row:last-of-type { border-bottom:none; }
.self-assess .sa-obj { font-size:12.5px;font-weight:600;color:#1a1a2e;line-height:1.4; }
.self-assess .sa-obj-num { display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:#143185;color:#fff;font-size:9.5px;font-weight:800;margin-right:7px; }
.self-assess .sa-rag { display:flex;gap:6px;flex:0 0 auto; }
.self-assess .sa-btn { appearance:none;border:2px solid transparent;border-radius:7px;width:34px;height:30px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,box-shadow .12s ease;position:relative; }
.self-assess .sa-btn:hover { transform:translateY(-1px); }
.self-assess .sa-btn:focus-visible { outline:3px solid #143185;outline-offset:2px; }
.self-assess .sa-btn svg { width:14px;height:14px; }
.self-assess .sa-btn.r { background:#fdecea;border-color:#e57368;color:#c0392b; }
.self-assess .sa-btn.a { background:#fef3c7;border-color:#EDB115;color:#92610a; }
.self-assess .sa-btn.g { background:#dcfce7;border-color:#5fb583;color:#166534; }
.self-assess .sa-btn.r.selected { background:#e57368;color:#fff;box-shadow:0 3px 10px rgba(197,66,52,.35); }
.self-assess .sa-btn.a.selected { background:#EDB115;color:#3a2c00;box-shadow:0 3px 10px rgba(237,177,21,.4); }
.self-assess .sa-btn.g.selected { background:#5fb583;color:#fff;box-shadow:0 3px 10px rgba(51,155,101,.35); }
.self-assess .sa-btn .tick { display:none; }
.self-assess .sa-btn.selected .tick { display:block; }
.self-assess .sa-btn.selected .empty { display:none; }
.self-assess .sa-footer { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding-top:8px;border-top:1px dashed rgba(237,177,21,.5);flex-wrap:wrap; }
.self-assess .sa-save-state { font-size:10.5px;font-weight:700;color:#4a5170;display:flex;align-items:center;gap:5px;min-height:15px; }
.self-assess .sa-save-state.saved { color:#166534; }
.self-assess .sa-save-state .pulse { width:6px;height:6px;border-radius:50%;background:#166534;display:inline-block; }
.self-assess .sa-hint { font-size:10px;color:#4a5170; }
@media (max-width:520px) {
  .self-assess .sa-row { grid-template-columns:1fr;align-items:flex-start; }
  .self-assess .sa-rag { margin-top:2px; }
  .self-assess { padding:14px 16px; }
}

.try-btn { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:8px 18px;border-radius:8px;border:none;cursor:pointer;font-family:Lexend,sans-serif;margin:6px 4px 0; }
.try-btn-check { background:#143185;color:#fff; }
.example h3, .example h4 { font-weight:700; color:#143185; margin-bottom:10px; font-size:14px; }
.intro-text { font-size:14px; line-height:1.6; color:#333; margin-bottom:15px; }
.explanation { padding:12px 0 0; margin:10px 0 0; border-top:1px solid #e0e7ff; color:#143185; line-height:1.7; font-size:15px; text-align:center; font-weight:700; }

/* ── Text-overflow safety ── long LaTeX/words were escaping their containers on
   narrow viewports since nothing here ever constrained line-breaking. */
.objectives-section, .rla-box, .concept-block, .example, .mini-assessment,
.try-it, .watchout-box, .callout, .question-wrapper, .q-text, .explanation,
.intro-text, .step, .self-assess { overflow-wrap:break-word; word-break:break-word; }

.step { display:flex; gap:14px; align-items:flex-start; padding:9px 0; border-bottom:1px solid #e8ecf4; }
.step-num { font-weight:700; color:#EDB115; font-size:12px; text-transform:uppercase; letter-spacing:.4px; min-width:52px; flex-shrink:0; padding-top:2px; }

/* ── Preview-lock (2026-08) ── the rest of a gated lesson after its first concept block, for
   a visitor who isn't a subscriber. The real content stays in the page (readable by search
   crawlers, per the isAccessibleForFree/hasPart schema shared/lesson-preview-lock.js writes) --
   only its on-screen height is clipped and a gradient fade + CTA card sit over the join. Default
   state is LOCKED (fail closed): shared/lesson-preview-lock.js adds .preview-unlocked only after
   confirming an active subscription; anything that errors or never resolves leaves it locked. */
.lesson-locked { position:relative; max-height:420px; overflow:hidden; }
.lesson-locked::after { content:''; position:absolute; left:0; right:0; bottom:0; height:160px;
  background:linear-gradient(to bottom, rgba(238,241,247,0) 0%, #eef1f7 85%); pointer-events:none; }
.lesson-unlock-cta { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:calc(100% - 40px);
  max-width:420px; background:#fff; border:2px solid #143185; border-radius:14px; padding:22px 24px;
  text-align:center; box-shadow:0 8px 28px rgba(20,49,133,.18); z-index:2; }
.lesson-unlock-cta h4 { font-size:16px; font-weight:800; color:#143185; margin:0 0 8px; }
.lesson-unlock-cta p { font-size:13px; color:#555; margin:0 0 14px; line-height:1.5; }
.lesson-unlock-cta a { display:inline-block; background:#143185; color:#fff; font-weight:700; font-size:14px;
  padding:11px 26px; border-radius:10px; text-decoration:none; }
.lesson-unlock-cta a:hover { background:#0f2566; }
.preview-unlocked.lesson-locked { max-height:none; overflow:visible; }
.preview-unlocked.lesson-locked::after, .preview-unlocked .lesson-unlock-cta { display:none; }
/* Flex children default to min-width:auto, which refuses to shrink below the text's
   natural width -- overflow-wrap on the parent does nothing until this is set, which is
   why long formulas/sentences were still escaping the box on narrow screens. */
.step > p, .step > div:not(.step-num) { min-width:0; flex:1 1 auto; max-width:100%; }
.formula-box { background:#f5f7fc; padding:14px; margin:14px 0; border-radius:8px; border:2px solid #143185; text-align:center; color:#143185; font-weight:700; font-size:14px; }

/* ── MathJax containment ── do NOT put overflow-x:auto on .step/.formula-box: MathJax
   injects a screen-reader-only <mjx-assistive-mml> per equation, clipped via `clip:rect()`
   rather than removed from layout -- Chrome still counts it toward an ancestor's scrollable
   area, so any scrolling ancestor renders a blank grey scrollbar track next to equations
   that have nothing visible to scroll to (mathjax/MathJax#2521). Containing the scroll on
   mjx-container itself, with the assistive node pinned to a true 1x1 box, avoids that. */
mjx-container { max-width:100%; position:relative; }
mjx-container[display="true"] { overflow-x:auto; overflow-y:hidden; padding:3px 0; }
mjx-assistive-mml {
  position:absolute !important; top:0 !important; left:0 !important;
  width:1px !important; height:1px !important; max-width:1px !important;
  overflow:hidden !important; clip:rect(1px,1px,1px,1px) !important;
  clip-path:inset(50%) !important; padding:0 !important; border:0 !important;
  white-space:nowrap !important;
}
/* Do NOT override font-family on mjx-container/mjx-c -- MathJax CHTML hard-codes each
   glyph's advance width in px from ITS OWN font metrics (measured, not assumed: e.g. the
   reserved box for "base" was 33px but Lexend's actual ink advance is 38.71px). Swapping
   the font repaints the glyph but keeps the old-width box, so ink silently overlaps or
   gaps the next character across every equation on the page -- not just a cosmetic
   mismatch, an actual layout corruption (confirmed on "base × height" rendering as
   "base×  height"). MathJax's own math typeface stays as-is by design; word-heavy
   formula phrases should be written as plain HTML instead of LaTeX (see e.g. any
   "(cross-sectional area × length)" style line) rather than fought with CSS. */

/* ── Header/footer action rows ── reusable classes so every lesson page's top-bar
   nav and "What would you like to do next?" footer share one responsive layout
   instead of each page hand-rolling its own inline flex row. */
.lesson-top-nav { display:flex; justify-content:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.lesson-footer-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }

@media (max-width:640px) {
  .lesson-container { padding:20px 12px 48px; }
  .objectives-section, .rla-box, .concept-block, .example, .mini-assessment,
  .try-it, .watchout-box, .callout { padding:16px; }
  /* Was nowrap + horizontal scroll -- on real phone widths (and inside the Android app,
     which is always this narrow) the third button ("Next Lesson") clipped off the visible
     edge with no scroll affordance shown, reading as a broken/cut-off layout rather than a
     scrollable one (confirmed via screenshot audit, 2026-08-11). Wrapping onto two rows is
     fully visible with no discoverability problem, at the cost of a slightly taller nav. */
  .lesson-top-nav { justify-content:center; flex-wrap:wrap; }
  .lesson-top-nav a { flex:0 1 auto; white-space:nowrap; text-align:center; }
  /* Stack the step label above its formula instead of side-by-side, so the equation
     gets the full card width -- horizontal scrolling is poor UX on a phone, and every
     equation on this page fits at full card width once it isn't squeezed next to the
     "STEP 1 — ..." label. */
  .step { flex-wrap:wrap; }
  .step-num { flex:1 0 100%; min-width:0; }
  .step > p { font-size:13px !important; }
  mjx-container { font-size:95%; }
  .lesson-footer-actions { justify-content:center; }
  .lesson-footer-actions > a, .lesson-footer-actions > label {
    margin-left:0 !important; flex:1 1 auto; justify-content:center;
  }
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}