/* lesson.css — lesson and question content drawn by the shared renderer
   (cdn js/apas-content-render.js) inside .lesson-body, in the site's theme. */
.lesson-body { font-size: 1.08rem; line-height: 1.75; color: var(--t2); overflow-wrap: anywhere; }
.lesson-body h1, .lesson-body h2, .lesson-body h3, .lesson-body h4 {
  font-family: var(--font-display); font-weight: 400; color: var(--t1); line-height: 1.3; margin: 1.6rem 0 0.6rem; }
.lesson-body h1 { font-size: 1.7rem; margin-top: 0; }
.lesson-body h2 { font-size: 1.35rem; }
.lesson-body h3 { font-size: 1.15rem; }
.lesson-body p { margin: 0 0 1rem; }
.lesson-body ul, .lesson-body ol, .lesson-body .apc-list { margin: 0 0 1rem 1.5rem; }
.lesson-body li { margin-bottom: 0.3rem; }
.lesson-body a { color: var(--accent); }
.lesson-body .katex { color: var(--t1); font-size: 1.08em; }
.lesson-body .apc-math { margin: 1.1rem 0; padding: 0.3rem 0; overflow-x: auto; overflow-y: hidden; }
.lesson-body .apc-image, .lesson-body .apc-video { max-width: 100%; height: auto; display: block; margin: 1.1rem auto; border-radius: var(--radius-sm); }
.lesson-body .apc-audio { display: block; width: 100%; margin: 1rem 0; }
/* plots are drawn at a fixed size; let them shrink to the column on a phone */
.lesson-body svg, .lesson-body canvas { max-width: 100%; height: auto; }
.lesson-body .apc-table { border-collapse: collapse; margin: 1.1rem 0; display: block; overflow-x: auto; max-width: 100%; }
.lesson-body .apc-table th, .lesson-body .apc-table td { border: 1px solid var(--border2); padding: 0.5rem 0.8rem; text-align: left; }
.lesson-body .apc-table th { color: var(--t1); background: var(--surface2); font-weight: 600; }
.lesson-body .apc-callout { border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
  padding: 0.9rem 1.1rem; margin: 1.2rem 0; }
.lesson-body .apc-callout-label { font-weight: 600; color: var(--accent); margin-bottom: 0.35rem; }
.lesson-body .apc-callout p:last-child { margin-bottom: 0; }
.lesson-body .apc-code, .lesson-body .apc-pseudocode { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.8rem 1rem; overflow-x: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.95rem; white-space: pre; }
.lesson-body .apc-pseudocode { padding-left: 2.6rem; white-space: normal; }
.lesson-body .apc-output-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t4); margin: 0.7rem 0 0.3rem; }
.lesson-body .apc-error { color: var(--chemistry); font-family: ui-monospace, monospace; white-space: pre-wrap; }

/* Questions */
.lesson-body .apc-question { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
  padding: 1.2rem 1.3rem; margin: 1.3rem 0; }
.lesson-body .apc-question-title { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; }
.lesson-body .apc-question-prompt { font-size: 1.12rem; color: var(--t1); margin-bottom: 1rem; }
.lesson-body .apc-question-prompt p:last-child { margin-bottom: 0; }
.lesson-body .apc-question-options { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1rem; }
.lesson-body .apc-question-option { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.7rem 0.9rem; cursor: pointer;
  border: 1px solid var(--border2); border-radius: var(--radius-sm); background: var(--surface2); color: var(--t1); }
.lesson-body .apc-question-option:hover { border-color: var(--accent); }
.lesson-body .apc-question-option input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.lesson-body .apc-question-answer-input { font: inherit; color: var(--t1); background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin: 0 0.6rem 0.6rem 0; min-width: min(14rem, 100%); }
.lesson-body .apc-question-answer-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lesson-body .apc-question-check { font: inherit; font-weight: 600; color: #0a0800; background: var(--accent); border: 0;
  border-radius: var(--radius-sm); padding: 0.6rem 1.2rem; cursor: pointer; }
.lesson-body .apc-question-check:hover { opacity: 0.9; }
.lesson-body .apc-question-feedback { margin: 0.7rem 0 0; font-weight: 600; min-height: 1.4rem; }
.lesson-body .apc-question-feedback[data-correct="true"] { color: var(--physics); }
.lesson-body .apc-question-feedback[data-correct="false"] { color: var(--chemistry); }
.lesson-body .apc-question-hint, .lesson-body .apc-question-solution { margin-top: 0.7rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.65rem 0.9rem; background: var(--surface2); }
.lesson-body summary { cursor: pointer; font-weight: 600; color: var(--t1); }
.lesson-body details[open] summary { margin-bottom: 0.5rem; }

/* Shared bits for the pages that list content */
.learn-note { text-align: center; padding: 2rem 1rem; color: var(--t4); font-size: 1rem; line-height: 1.6; }
.learn-note a { color: var(--accent); }
.count-badge { display: inline-block; font-size: 0.82rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  color: var(--physics); border: 1px solid color-mix(in srgb, var(--physics) 45%, transparent);
  background: color-mix(in srgb, var(--physics) 10%, transparent); white-space: nowrap; }
.count-none { font-size: 0.85rem; color: var(--t5); }
.learn-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--t3); margin-bottom: 0.9rem; cursor: pointer; }
.learn-toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
/* A table's words are never broken into letters to make it fit: on a
   narrow screen a wide table keeps its columns and scrolls sideways. */
.lesson-body .apc-table th, .lesson-body .apc-table td { overflow-wrap: normal; word-break: normal; hyphens: none; }