/* [2026-07-10] JMA Recipe B (kid, calm+warm). Tokens use !important so they win even when a page
   REDEFINES :root later. Plus universal kills for the common hardcoded washes/leaks, and the inline
   expressive-shape frame. Per-page one-off leaks may still need a local touch. */
:root{
  --bg:#fdfcfa !important; --card:#ffffff !important;
  --text:#171717 !important; --text-light:#5a5142 !important; --text-muted:#6b6459 !important;
  --primary:#ea7a27 !important; --primary-dark:#b85c12 !important; --primary-soft:#fdf0dd !important;
  --gold:#ea7a27 !important; --gold-soft:#fbf1dc !important;
  --accent:#ea7a27 !important; --accent-soft:#fdf0dd !important; --purple:#ea7a27 !important;
  --success:#26a259 !important; --correct:#26a259 !important; --near:#f59f0a !important; --wrong:#e4573a !important;
  --font-display:'Baloo 2',cursive !important; --font-body:'Nunito',sans-serif !important;
}
/* universal washes/leaks -> one calm surface */
.hero, .intro-section, [class*="hero"], [class*="banner"]{ background:#fdfbf6 !important; }
.board-badge{ background:transparent !important; color:#6b6459 !important; border:1px solid #e7ded0 !important; }
/* the recurring green "promise / contract / cognitive" card -> neutral warm surface */
[class*="promise"], [class*="contract"], .cognitive-contract, .our-promise{
  background:#f7f2e8 !important; border-color:#ece3d3 !important; color:#2a241c !important; }
/* inline expressive-shape frame */
.jm-em{ display:inline-flex; width:1.4em; height:1.4em; vertical-align:-0.34em; background:#fff;
  border:1px solid #ece3d3; border-radius:6px; padding:1px; overflow:hidden; }
.jm-em svg{ width:100%; height:100%; }
/* [2026-07-10] shared chapter-class leaks: gradient-purple headings -> ink; green promise heading -> ink; icon -> amber */
.intro-title, .phase-title, .section-title, .big-idea-title{
  background:none !important; -webkit-text-fill-color:currentColor !important; color:var(--text) !important; }
.safety-contract h3, .promise-title, [class*="promise"] h3{ color:#2a241c !important; }
.promise-icon{ color:var(--gold) !important; }
.topic-scene{ background:#f6f0e4 !important; border-color:#ece3d3 !important; }
.chapter-num{ background:#f6e6c8 !important; color:#9a6a12 !important; }
.thinklab-banner{ background:#f7f2e8 !important; border-color:#ece3d3 !important; }
/* [2026-07-10] Pawan: text-box default (placeholder) text rules — (1) muted gray, never dominant;
   (2) never larger than the surrounding paragraph text; (3) clears the moment the box is FOCUSED
   (on select, not only when you start typing). Applies to every input/textarea. */
input::placeholder, textarea::placeholder{
  color:#9a938a !important; opacity:1 !important;      /* muted warm gray, secondary (opacity:1 fixes Firefox) */
  font-size:0.9rem !important; font-weight:400 !important;   /* <= surrounding text, not bold */
  font-style:normal !important;
}
input:focus::placeholder, textarea:focus::placeholder{ color:transparent !important; }  /* disappears on focus/select */
/* [2026-07-10] shapes used as section/hero emblems (inside headings/headers) render larger than inline */
h1 .jm-em, h2 .jm-em, h3 .jm-em, [class*="header"] .jm-em, [class*="title"] .jm-em,
[class*="hero"] .jm-em, .intro-icon .jm-em{ width:1.85em; height:1.85em; vertical-align:-0.5em; }
/* [2026-07-10] the gold shell's off-screen mobile drawer (translateX(102%)) leaked horizontal scroll on
   pages lacking an overflow guard. overflow-x:clip clips it WITHOUT creating a scroll container, so the
   sticky header keeps working (unlike overflow-x:hidden). Kills overflow@360 on the class indexes etc. */
html,body{ overflow-x:clip; }
/* [2026-07-10] Pawan: kill the double header. The gold shell (.sh-topbar) is the ONLY header + identity;
   hide the demoted bespoke page header on CHAPTER pages (its wordmark + breadcrumb duplicated the shell
   chip). Class indexes keep their strip (search/badges are real features there). */
body[data-shell-chip*="Ch "] > header.header, body[data-shell-chip*="Ch "] > .header{ display:none !important; }
/* no train-size buttons anywhere: cap oversized nav/next/prev/section buttons to a sane inline size */
.chapter-nav-row a, .chapter-nav-row button, .nav-next, .nav-prev, .next-btn, .prev-btn, .section-nav-btn{
  width:auto !important; max-width:240px !important; padding:.55rem 1.1rem !important;
  font-size:.95rem !important; flex:0 0 auto !important; }
.chapter-nav-row{ justify-content:center !important; gap:14px !important; }
/* navigation rows sit in flow, never a fixed/sticky slab */
.section-nav, .chapter-nav-row, .bottom-nav, [class*="section-nav"]{ position:static !important; }
body > header.header, body > .header{ position:static !important; }   /* demote any bespoke page header (hub search bar stays, non-sticky) */
/* [2026-07-10] Pawan: one peppy secondary (teal), kept SUBTLE. Amber stays the content accent;
   teal is the second voice only on things a student interacts with — progress, the active tab,
   and keyboard focus. A fresh lift without flooding. */
:root{ --accent-2:#ea7a27 !important; --accent-2-soft:#fdf0dd !important; }
/* progress = teal */
.progress-fill, #mainProgress{ background:var(--accent-2) !important; }
/* active tab/section pill = teal (the one lively interactive state) */
.section-nav-btn.active, [class*="nav-btn"].active, .tab.active, [class*="tab"].active,
.stage.active .stage-node, [aria-selected="true"]{ background:var(--accent-2) !important; color:#fff !important; border-color:var(--accent-2) !important; }
/* keyboard focus ring = teal */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, .section-nav-btn:focus-visible{
  outline:2.5px solid var(--accent-2) !important; outline-offset:2px; }
/* [2026-07-10] Pawan: lesser margins across sections — tighten ONLY the oversized hero + nav gaps
   (precise, not a blanket rule). hero 40/40+30 -> 20/16+12; section-nav margin 24 -> 12. */
.hero, .intro-section, [class*="intro-section"]{ padding-top:20px !important; padding-bottom:16px !important; margin-bottom:12px !important; }
.section-nav, [class*="section-nav"]{ margin-bottom:12px !important; }
/* [2026-07-10] PHASE 2 — component convergence to the gold standard (soft-orange #ea7a27, ink #171717,
   white cards + #eadfce hairline border, mist #fdf0dd callouts w/ orange left-border). Structural only;
   dynamic feedback states (.correct/.wrong/.selected) are left to the page so they still show. */
/* cards: white + hairline border + soft shadow */
.practice-card, .level, .faq-item, .philosophy-point, .zone-card, .scene-card{
  background:#fff !important; border:1px solid #eadfce !important; border-radius:14px !important;
  box-shadow:0 1px 3px rgba(23,23,23,.05) !important; }
/* pill / tab / option buttons: neutral default, soft-orange when active/selected */
.section-nav-btn, .scale-btn, .trap-btn, .option-btn, .mcq-option{
  background:#fff !important; border:1px solid #eadfce !important; color:#171717 !important; }
.section-nav-btn.active, .scale-btn.active, .trap-btn.active,
.option-btn.selected, .mcq-option.selected, [aria-selected="true"]{
  background:#ea7a27 !important; border-color:#ea7a27 !important; color:#fff !important; }
/* primary CTAs stay soft-orange filled */
.check-btn, .next-section-btn, .next-context-btn{
  background:#ea7a27 !important; border:1px solid #ea7a27 !important; color:#fff !important; max-width:260px; }
/* callouts / hints / prompts -> mist bg + orange left-border */
.hint, .reasoning-prompt, .note{ background:#fdf0dd !important; border-left:3px solid #ea7a27 !important; }
/* inputs clean; focus soft-orange */
.answer-input{ border:1px solid #eadfce !important; }
.answer-input:focus{ border-color:#ea7a27 !important; outline:none !important; }
/* section-number circle + mcq-letter -> soft orange */
.section-number, [class*="section-num"], .mcq-letter{ background:#ea7a27 !important; color:#fff !important; }
/* [2026-07-10] linked sub-pages (practice lab etc.) had a TRANSPARENT body, so the shell's dark root
   (#1c1714, there to back the dark footer) showed through and the page looked dark/broken. Force the
   light surface on every JMA body — harmless on pages already cream. */
body{ background:#fdfcfa !important; }
/* [2026-07-10] Pawan: clicking Parent/Teacher tab must EXPAND the notes fully (standard = parent notes
   expanded by default). Kill the max-height truncation + fade + read-more; style the tabs to gold. */
.parent-content-box, .parent-notes-container, #parentNotes, #teacherNotes,
[class*="truncat"] .notes-content, .notes-content{ max-height:none !important; overflow:visible !important; }
.parent-fade-overlay, [class*="fade-overlay"]{ display:none !important; }
.parent-toggle-btn, [class*="read-more"], [class*="show-more"]{ display:none !important; }
.notes-tab{ background:#fff !important; border:1px solid #eadfce !important; color:#171717 !important; }
.notes-tab.active{ background:#ea7a27 !important; border-color:#ea7a27 !important; color:#fff !important; }
/* [2026-07-10] the injected truncation wraps notes in .truncated-view (max-height + fade) with a
   .read-more-btn. Expand fully + drop the fade + hide the extra button (tab click shows full notes). */
.truncated-view{ max-height:none !important; overflow:visible !important; }
.truncated-view::after, .truncated-view::before{ display:none !important; content:none !important; }
.read-more-btn{ display:none !important; }