/* TriageTrail course-engine theme — extends the "clean clinical editorial" direction (see
 * home.css/theme.css) to the actual in-course lesson experience: course.html/blood-course.html/
 * minor-course.html (course.css, driven by course.js/blood-course.js/minor-course.js), and
 * learn.html (learn.css). This is real clinical teaching content, reskinned deliberately after
 * the rest of the site — see ENGINEERING-LOG.md for why it was held back initially.
 *
 * Design choice: course.css already uses a light-background / dark-accent-card pattern (white
 * lesson body, occasional dark navy cards for knowledge checks, quiz results, data tables,
 * video blocks). That pattern already matches this site's direction — a light reading surface
 * with dark cards for emphasis — so this file mostly RETINTS the existing dark navy
 * (#071820/#0b2029/#102a34) to --ed-ink and light surfaces' text to --ed-ink/--ed-muted,
 * rather than restructuring. Several of these classes (.knowledge-check, .quiz-result,
 * .formula, .video-learning, .clinical-atlas, .assessment-image, .thyroid-axis, .range-table,
 * .guided-task, .course-nav via .site-header's sibling rule) are in experience.css's shared
 * "dark surface forces light text" rule — since they're STAYING dark here, that rule already
 * does the right thing and doesn't need fighting with !important the way the sitewide pass did
 * for sections that turned light.
 */
:root{
  --ed-bg:#f7f4ee;
  --ed-bg-alt:#efece2;
  --ed-ink:#1c2b2e;
  --ed-muted:#5b6b6a;
  --ed-teal:#0f5f5c;
  --ed-teal-soft:#e3efed;
  --ed-line:#d9d3c5;
  --ed-serif:'Fraunces',Georgia,serif;
  /* course.css's own custom properties — redefining these changes every var(--ink)/var(--line)/
     var(--muted) use in course.css automatically, since custom properties resolve at used-value
     time, not parse time. Catches a meaningful minority of rules for free; the rest (course.css
     mostly uses hardcoded hex, not these vars) are overridden by class below. */
  --ink:var(--ed-ink);
  --paper:var(--ed-bg);
  --muted:var(--ed-muted);
  --line:var(--ed-line);
}

body.course-app{background:var(--ed-bg);color:var(--ed-ink)}
h1,h2,h3,.brand .brand-word{font-family:var(--ed-serif);font-weight:500}
.eyebrow{font-family:'Inter',sans-serif}
.dimensional-field,.signal-cursor{display:none!important}

/* ---------- Header / brand ---------- */
.course-header{background:#fff;border-bottom-color:var(--ed-line)}
.brand{display:inline-flex;align-items:baseline;gap:10px;color:var(--ed-ink)}
.brand:before{content:none}
.brand .brand-word{font-size:1.1rem;color:var(--ed-ink)}
.brand .brand-word em{color:var(--ed-teal);font-style:italic}
.brand small{color:var(--ed-muted)}
.course-title small{color:var(--ed-muted)}
.course-title strong{color:var(--ed-ink)}
.button.ghost{background:transparent!important;border-color:var(--ed-ink)!important;color:var(--ed-ink)!important;backdrop-filter:none!important}
.button{background:var(--ed-ink);border-color:var(--ed-ink)}
.button:not(.ghost){color:#fff}

/* ---------- Course nav sidebar (kept dark, retinted) ---------- */
.course-nav{background:var(--ed-ink)}
.nav-intro>p:not(.eyebrow){color:#aebfbb}
.overall>span{background:#2c3e40}
.module-link{color:#9fb3af}
.module-link strong small,.progress-row strong small{color:#8a9c98}
.module-link.active{background:#273a3c;border-left-color:#79f2be}
.workbook-link,.back-link{border-top-color:#3a4d4f}

/* ---------- Lesson stage (light reading surface) ---------- */
.stage-top{border-bottom-color:var(--ed-line)}
#stage-top #save-state,.stage-top #save-state{color:var(--ed-muted)}
#module-content h2{color:var(--ed-ink);font-family:var(--ed-serif);font-weight:500}
#module-content h3{color:var(--ed-ink);font-family:var(--ed-serif);font-weight:500}
#module-content p,#module-content li{color:#2f4044}
.learning-box{background:var(--ed-teal-soft);border-left-color:var(--ed-teal)}
.reflection{background:#fff;border-color:var(--ed-line)}
.source-list{color:var(--ed-muted)!important}
.module-actions{border-top-color:var(--ed-line)}

/* ---------- Quiz ---------- */
.quiz-meta span{background:var(--ed-bg-alt);color:var(--ed-ink)}
.question-card{background:#fff;border-color:var(--ed-line)}
.quiz-option{border-color:var(--ed-line)}
.quiz-option:has(input:checked){border-color:var(--ed-teal);background:var(--ed-teal-soft)}
.quiz-result{background:var(--ed-ink)}
/* #module-content p{color:...} below also reaches into this nested dark card for its .eyebrow
   (which is a <p>) — same ID-selector-beats-class trap as the .knowledge-check h3 fix above. */
.quiz-result .eyebrow{color:#79f2be!important}
.quiz-result h2{color:#79f2be!important}
.result-grid span{background:#273a3c}
.result-grid strong{color:#fff}

/* ---------- Certificate ---------- */
.certificate{background:#fff;border-color:var(--ed-ink);outline-color:#79f2be}
.certificate .name{color:var(--ed-teal)}
.certificate .seal{background:var(--ed-ink)}
.certificate small{color:var(--ed-muted)}
.cert-brand{border-bottom-color:var(--ed-line)}
.cert-brand span strong{color:var(--ed-teal)}
.cert-facts{border-color:var(--ed-line)}
.cert-facts span{border-right-color:var(--ed-line);color:var(--ed-muted)}
.cert-facts b,.cert-sign b{color:var(--ed-ink)}
.cert-sign span{border-top-color:var(--ed-ink);color:var(--ed-muted)}
.cert-boundary{color:var(--ed-muted)!important}
.certificate-form{background:#fff}
.certificate-form input{border-color:var(--ed-line)}

/* ---------- Progress dialog ---------- */
#progress-content{background:#fff}
.progress-row{background:var(--ed-bg-alt)}
.progress-row b{color:var(--ed-teal)}

/* ---------- ECG / lesson content blocks ---------- */
.ecg-figure,.blood-visual,.minor-visual,.case-study{background:#fff;border-color:var(--ed-line)}
.ecg-figure figcaption,.blood-visual figcaption,.minor-visual figcaption{color:var(--ed-muted)}
.compare-grid>div,.pattern-card{background:#fff;border-color:var(--ed-line)}
.callout{border-color:var(--ed-teal);background:var(--ed-teal-soft)}
.callout.warning{border-color:#d4832f;background:#fff8ec}
.callout.pearl{border-color:#0d7a8c;background:#eef9fb}
.callout.red-flag{border-color:#c4273b;background:#fdeef0}
.metric-strip span{background:var(--ed-ink);color:#d8e5e1}
.metric-strip b{color:#79f2be}
.formula{background:var(--ed-ink);color:#79f2be}
.formula span{color:#9cb0aa}
.mini-case{background:#fff}
.pattern-card span{color:var(--ed-teal)}
.rhythm-table{border-color:var(--ed-line)}
.rhythm-table>div{border-bottom-color:var(--ed-line)}
.rhythm-table>div:first-child{background:var(--ed-ink);color:#fff}
.method-list li{border-bottom-color:var(--ed-line)}
.method-list li:before{color:var(--ed-teal)}
.practice-set details{background:#fff;border-color:var(--ed-line)}
.knowledge-check{background:var(--ed-ink)}
/* #module-content h3{color:...!important} below (an ID selector) otherwise wins over a plain
   ".knowledge-check h3" rule regardless of !important on both sides, since ID beats class no
   matter how many classes are added — found live (the knowledge-check's own heading rendered
   dark ink text on its own dark ink background, invisible). Matching the ID tier here instead
   of just adding a class rule fixes it. */
#module-content .knowledge-check :is(h1,h2,h3,h4,h5,h6,legend,strong){color:#fff!important}
#module-content .knowledge-check p{color:#d7e4e0!important}
.knowledge-check label{border-color:#3a4d4f}
.knowledge-check label:has(input:checked){border-color:#79f2be;background:#273a3c}
.check-feedback.correct,.check-feedback.review{background:#273a3c;border-left-color:#79f2be}
.check-feedback.review{border-left-color:#ffc36b}
.unlock-message{color:#79f2be!important}

/* ---------- Evidence / reference blocks ---------- */
.evidence-box{background:#fff;border-color:var(--ed-line);border-left-color:var(--ed-ink)}
.evidence-box .eyebrow{color:var(--ed-teal)}
.evidence-box footer{border-top-color:var(--ed-line);color:var(--ed-muted)}
.evidence-box footer cite,.reference-item cite{color:var(--ed-ink)}
.evidence-box footer a,.reference-item a{color:var(--ed-teal)}
.reference-item{border-bottom-color:var(--ed-line);color:var(--ed-muted)}
.gallery-note{background:var(--ed-teal-soft);border-left-color:var(--ed-teal)}
.bbb-grid .rhythm-figure{background:#fff}

/* ---------- Diagrams with their own figure chrome (anatomy/heart-map left as-is: the pink/red
   gradient represents tissue, not UI chrome) ---------- */
.rhythm-figure,.concept-figure{background:#fff;border-color:var(--ed-line)}
.rhythm-figure figcaption,.concept-figure figcaption{color:var(--ed-muted)}
.rhythm-teach{border-bottom-color:var(--ed-line)}
.rhythm-teach h4{color:var(--ed-teal)}
.node{background:var(--ed-ink);color:#79f2be}
.case-grid article{background:#fff;border-color:var(--ed-line)}
.case-grid article>b{color:var(--ed-teal)}

/* ---------- Guided task / analyte / pattern-lane / trend-figure ---------- */
.guided-task{background:var(--ed-ink)}
.guided-task h3{color:#79f2be!important}
.guided-task p{color:#c7d6d2!important}
.analyte-grid article{background:#fff;border-color:var(--ed-line)}
.analyte-grid b{color:var(--ed-teal)}
.pattern-lane span{background:var(--ed-teal-soft)}
.trend-figure{background:#fff}

/* ---------- Range table / thyroid axis (data tables, kept dark for contrast) ---------- */
.range-table{background:var(--ed-ink)}
.range-table th,.range-table td{border-color:#3a4d4f;color:#fff}
.range-table th{background:#28393b}
.range-table tbody tr:nth-child(even){background:#233436}
.range-note{background:#233436;border-left-color:#dfff66}
.thyroid-axis{background:var(--ed-ink);border-color:#3a4d4f}
.thyroid-axis span{background:#79f2be;color:var(--ed-ink)}

/* ---------- Clinical atlas / assessment images / video learning (kept dark) ---------- */
.clinical-atlas{background:var(--ed-ink);border-color:#3a4d4f}
.clinical-atlas figcaption>strong{color:#79f2be}
.clinical-atlas figcaption small{color:#bdd3cd}
.assessment-image{background:var(--ed-ink);border-color:rgba(121,242,190,.35)}
.video-learning{background:var(--ed-ink);border-color:#3a4d4f}
.video-learning-copy .eyebrow{color:#79f2be!important}
.video-learning-copy h3{color:#fff!important}
.video-learning-copy p{color:#c8dad5!important}

/* ---------- learn.html (the lesson-reading shell — account.css + learn.css) ---------- */
.learn-page{background:var(--ed-ink)!important;color:#fff}
.learn-top{background:rgba(28,43,46,.95)!important;border-bottom-color:#3a4d4f}
/* The generic .brand .brand-word{color:var(--ed-ink)} rule (written for the light
   course-header) otherwise wins here too — same dark-surface-wordmark issue as the sitewide
   footer fix, just a different dark bar. Found live: "Triage" was invisible, only italic
   "Trail" and the small label were visible. */
.learn-top .brand .brand-word{color:#fff!important}
.learn-top .brand .brand-word em{color:#79f2be!important}
.learn-top .brand small{color:#9db3ae!important}
/* Same story as .site-header vs plain .button.ghost in theme.css: the generic ghost-button
   fix defaults to dark-ink text (for light surfaces), which is invisible on this dark bar. */
.learn-top .button.ghost{border-color:#fff!important;color:#fff!important}
.learn-shell nav button{background:#273a3c;border-color:#3a4d4f;color:#c7d6d2}
.learn-shell nav button.active{border-color:#79f2be;color:#79f2be}
.learn-shell article{background:#fff;color:var(--ed-ink)}
.learn-shell aside h1{font-family:var(--ed-serif);font-weight:500}
.lesson-meta{color:var(--ed-muted)!important}
.protected-note{border-top-color:#3a4d4f;color:#aebfbb!important}
/* .knowledge-check is in experience.css's shared dark-surface list (course.html's version of
   it correctly stays dark above, no conflict there) — but learn.html's version is a light card
   nested in the light .learn-shell article, so it needs the same !important treatment as the
   sitewide account-card fix, or its own heading/label text renders near-white-on-light. */
.learn-page .knowledge-check{background:var(--ed-teal-soft)!important;border-left-color:var(--ed-teal)}
.learn-page .knowledge-check :is(h1,h2,h3,h4,h5,h6,legend,label,strong){color:var(--ed-ink)!important}
.learn-page .knowledge-check :is(p,li,small,span){color:var(--ed-muted)!important}
.learn-page .knowledge-check label{background:#fff!important}
.learn-page .check-feedback.correct,.learn-page .module-complete{color:#0f5f5c!important}
.learn-page .check-feedback.incorrect{color:#b4303a!important}

@media(prefers-reduced-motion:reduce){
  .course,.product{transition:none}
}