/* ==========================================================================
   OgbonMath — Lesson Prose Styling (Phase 3)
   --------------------------------------------------------------------------
   Applies ONLY when body[data-view="lesson"] (or "guide", "textbooks") —
   i.e. text-reading contexts. All other views keep the sans UI font.

   Scope: #ct and its descendants. UI elements inside lesson content
   (buttons, inputs, tag pills) get explicitly re-sans'd so we don't
   accidentally serif a button.
   ========================================================================== */

/* ==========================================================================
   Reading contexts — apply serif + comfortable reading rhythm
   ==========================================================================
*/
body[data-view="lesson"] #ct,
body[data-view="guide"] #ct,
body[data-view="textbooks"] #ct,
body[data-view="about"] #ct {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--tx);
}

/* Constrain reading width — textbook gutter */
body[data-view="lesson"] #ct > .ls,
body[data-view="guide"] #ct > .ls,
body[data-view="textbooks"] #ct > .ls {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}

/* Paragraph rhythm */
body[data-view="lesson"] #ct p,
body[data-view="guide"] #ct p,
body[data-view="textbooks"] #ct p,
body[data-view="about"] #ct p {
  margin: 0 0 1em 0;
}

body[data-view="lesson"] #ct p + p,
body[data-view="guide"] #ct p + p,
body[data-view="textbooks"] #ct p + p {
  /* slight extra breathing for consecutive paragraphs */
  margin-top: 0.25em;
}

body[data-view="lesson"] #ct strong,
body[data-view="textbooks"] #ct strong {
  color: var(--tx);
  font-weight: var(--fw-semibold);
}

body[data-view="lesson"] #ct em,
body[data-view="textbooks"] #ct em {
  font-style: italic;
}

/* Inline code in prose — monospace + subtle background */
body[data-view="lesson"] #ct :not(pre) > code,
body[data-view="guide"] #ct :not(pre) > code,
body[data-view="textbooks"] #ct :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  color: var(--tx1);
}

/* ==========================================================================
   Headings — display sans, warm-char hierarchy
   ==========================================================================
*/
body[data-view="lesson"] #ct h1,
body[data-view="lesson"] #ct h2,
body[data-view="lesson"] #ct h3,
body[data-view="guide"] #ct h1,
body[data-view="guide"] #ct h2,
body[data-view="guide"] #ct h3,
body[data-view="textbooks"] #ct h1,
body[data-view="textbooks"] #ct h2,
body[data-view="textbooks"] #ct h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--tx);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

body[data-view="lesson"] #ct h1,
body[data-view="textbooks"] #ct h1 { font-size: var(--fs-3xl); margin-top: 0.5em; }
body[data-view="lesson"] #ct h2 { font-size: var(--fs-2xl); }
body[data-view="lesson"] #ct h3 { font-size: var(--fs-xl); }

/* Subtle lead-line under H3 to feel "section break" */
body[data-view="lesson"] #ct h3 {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bdr);
}

/* Opening paragraph — enlarged first line, no drop cap (feels cleaner) */
body[data-view="lesson"] #ct .ls:first-of-type > p:first-of-type {
  font-size: 1.08em;
  color: var(--tx);
}

/* ==========================================================================
   Lesson-card wrapper — elevated "page" feel
   ==========================================================================
*/
body[data-view="lesson"] #ct .ls {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-6);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-xs);
}

body[data-view="lesson"] #ct .ls:first-of-type {
  padding-top: var(--sp-5);
}

/* ==========================================================================
   Objective tags — small-caps calm label
   ==========================================================================
*/
body[data-view="lesson"] #ct .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  padding: 3px 10px;
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: var(--radius-full);
  color: var(--tx1);
  line-height: 1.4;
}

/* ==========================================================================
   Bookmark toggle — subtle, accent when set
   ==========================================================================
*/
body[data-view="lesson"] #ct .bks {
  background: transparent;
  border: 1px solid var(--bdr);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  color: var(--tx2);
  font-size: 18px;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

body[data-view="lesson"] #ct .bks:hover {
  color: var(--ac);
  border-color: var(--ac);
}

body[data-view="lesson"] #ct .bks.on {
  color: var(--ac);
  border-color: var(--ac);
  background: var(--ac-soft);
}

/* ==========================================================================
   Preserve sans for UI elements inside lesson content
   ==========================================================================
   buttons, inputs, textareas, selects, code blocks shouldn't be serif even
   though they live inside the lesson reading area.
*/
body[data-view="lesson"] #ct button,
body[data-view="lesson"] #ct input,
body[data-view="lesson"] #ct textarea,
body[data-view="lesson"] #ct select,
body[data-view="lesson"] #ct .btn,
body[data-view="lesson"] #ct .tag,
body[data-view="lesson"] #ct pre,
body[data-view="lesson"] #ct kbd,
body[data-view="guide"] #ct button,
body[data-view="guide"] #ct input,
body[data-view="guide"] #ct .btn,
body[data-view="textbooks"] #ct button,
body[data-view="textbooks"] #ct input,
body[data-view="textbooks"] #ct .btn {
  font-family: var(--font-sans);
}

body[data-view="lesson"] #ct pre,
body[data-view="lesson"] #ct kbd,
body[data-view="lesson"] #ct .mono {
  font-family: var(--font-mono);
}

/* ==========================================================================
   KaTeX retuning for the Warm Study Hall palette
   ==========================================================================
   KaTeX draws in its own Computer Modern family (already serif — pairs well
   with our Charter/Iowan prose). We tune color, size, and display blocks.
*/
.katex {
  color: var(--tx);
}

.katex-display {
  margin: 1.4em 0;
  padding: var(--sp-3) 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Only put a background/border on display math inside lesson content,
   not on inline math scattered through UI */
body[data-view="lesson"] #ct .katex-display,
body[data-view="textbooks"] #ct .katex-display {
  background: linear-gradient(to right, transparent, var(--bg3) 10%, var(--bg3) 90%, transparent);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}

/* Muted number/punctuation tone in display math for clearer focus on ops */
body[data-view="lesson"] #ct .katex .mord.mathnormal {
  color: var(--tx);
}

/* ==========================================================================
   Hint / solution reveal blocks — warm callouts, not alarming
   ==========================================================================
   The existing .hc/.hint-reveal styles from styles.css get a subtle uplift
   so they match the new palette.
*/
body[data-view="lesson"] #ct .hc {
  background: var(--ac-soft);
  border-left: 3px solid var(--ac);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0;
  color: var(--tx);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

body[data-view="lesson"] #ct .hc strong {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--ac);
  display: block;
  margin-bottom: var(--sp-1);
}

/* ==========================================================================
   Guide + About — same serif comfort but slightly tighter
   ==========================================================================
*/
body[data-view="guide"] #ct,
body[data-view="about"] #ct {
  padding-top: var(--sp-6);
}

body[data-view="about"] #ct {
  max-width: 60ch;
  margin: 0 auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}

/* ==========================================================================
   Mobile tweaks
   ==========================================================================
*/
@media (max-width: 560px) {
  body[data-view="lesson"] #ct > .ls,
  body[data-view="guide"] #ct > .ls,
  body[data-view="textbooks"] #ct > .ls {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }
  body[data-view="lesson"] #ct .ls {
    padding: var(--sp-4);
  }
  body[data-view="lesson"] #ct h1,
  body[data-view="textbooks"] #ct h1 { font-size: var(--fs-2xl); }
  body[data-view="lesson"] #ct h2 { font-size: var(--fs-xl); }
  body[data-view="lesson"] #ct h3 { font-size: var(--fs-lg); }
  body[data-view="lesson"] #ct .katex-display {
    padding: var(--sp-2) var(--sp-3);
  }
}