/* Teaching layer, loaded last. Screen rules set the desktop reading grid, frame interactive figures and
   distinguish statement types. The learning components (chapter overview, prompts with hidden answers,
   staged exercise help and self-check questions) also have print rules, so the paper edition stays compact. */
:root{--panel:#f4f4f1;--accent:#1f5a8a}
html[data-theme=dark]{--panel:#1b1b1b;--accent:#8fbbe3}

.check-options{list-style:none;padding:0;counter-reset:option}
.check-options>li{counter-increment:option}
.check-options label::before{content:"(" counter(option,lower-alpha) ")";font-weight:600;color:var(--muted);flex:none}

@media screen{
  /* In single-chapter view the hidden course guide no longer adds a rule and gap above each title. */
  body:not(.all-notes) .chapter+.chapter{margin-top:0;padding-top:0;border-top:0}
  .notes-end .source-note{border-top:0;margin-top:0}

  /* Interactive figures: a visible frame, instructions first, one type scale across topics. */
  .interactive-figure{border:1px solid var(--rule);background:var(--panel);padding:14px 18px 16px;margin:22px 0 28px}
  .interactive-figure::before{content:"Interactive figure";display:block;font:700 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
  .interactive-figure>.figure-lead{font:17px/1.5 var(--sans);color:var(--ink);margin:0 0 14px}
  .interactive-figure :is(.lab-output,.topic2-output,.t4-result,.s3-result,[data-result]){font-family:var(--prose-font);font-size:19px;line-height:1.5}
  [data-lab] button{font-size:16px}

  /* Statement types: definitions (including axioms and model definitions) sit on a panel; results keep a rule. */
  .statement{margin:18px 0 20px}
  .statement-label{display:block;font:700 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin:0 0 5px}
  .statement-label .label-stop{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .statement-definition{border-left:0;background:var(--panel);padding:12px 16px}
  .statement-result{border-left:3px solid var(--strong-rule);padding:3px 0 3px 16px}

  /* Learning components. */
  :is(.frame-label,.pitfall-label,.example-label){font:700 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
  .chapter-frame{max-width:var(--reading);margin:4px 0 32px;padding:14px 18px 8px;background:var(--panel);border-left:3px solid var(--accent);font:17px/1.5 var(--sans)}
  .frame-label{color:var(--accent)}
  .frame-intro{margin:0 0 4px}
  .frame-outcomes{margin:0 0 12px;padding-left:22px}
  .frame-outcomes li{margin:0 0 5px}
  .frame-builds{font-size:15px;color:var(--muted);margin:0 0 6px}
  .frame-builds strong{color:var(--ink);margin-right:6px}
  .think-first,.learning-cue{max-width:var(--reading);border-left:3px solid var(--accent);padding:2px 0 2px 16px;margin:18px 0 22px}
  .think-first>p{font:18px/1.5 var(--sans);margin:0 0 2px}
  :is(.think-first>p,.learning-cue)>strong:first-child{color:var(--accent)}
  .think-answer{margin:0}
  .think-answer>p{font:18px/1.5 var(--sans);margin:0 0 10px}
  .pitfall{max-width:var(--reading);margin:18px 0 22px;padding:2px 0 2px 16px;border-left:3px dashed var(--strong-rule)}
  .pitfall>p:last-child{margin-bottom:0}
  .worked-example{max-width:var(--reading);margin:18px 0 26px;padding:12px 0 4px;border-top:1px solid var(--strong-rule);border-bottom:1px solid var(--rule)}
  .exercise :is(.hint,.answer){border:0;margin:0;padding:0;background:none}
  .exercise :is(.hint,.answer)>p{margin:0 0 12px}
  .exercise .solution{margin-top:0}
  .check-intro{font:16px/1.5 var(--sans);color:var(--muted);max-width:var(--reading)}
  .check-question{border:0;padding:0;margin:0 0 28px;min-width:0;max-width:var(--reading)}
  .check-question>legend{padding:0;margin:0 0 10px;font:20px/1.5 var(--prose-font)}
  .check-number{font:700 17px var(--sans);margin-right:4px}
  .check-options{margin:0 0 4px}
  .check-options>li{margin:0 0 8px}
  .check-options label{display:flex;gap:10px;align-items:baseline;padding:9px 12px;border:1px solid var(--rule);background:var(--paper);cursor:pointer;font:17px/1.45 var(--sans)}
  .check-options label:hover{border-color:var(--strong-rule)}
  .check-options input{order:-1;flex:none;margin:0;width:18px;height:18px;align-self:center;accent-color:var(--accent)}
  .check-options li.correct label{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
  .check-options li.incorrect label{border-style:dashed;border-color:var(--strong-rule)}
  .option-feedback{font:16px/1.5 var(--sans);margin:8px 0 4px 14px;padding-left:12px;border-left:3px solid var(--rule)}
  .correct>.option-feedback{border-left-color:var(--accent)}
  .correct>.option-feedback>strong:first-child{color:var(--accent)}
  .check-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .check-answer{margin:0;border:0}
  .check-answer>summary{font-size:15px;color:var(--muted)}
  .check-answer>p{font:16px/1.5 var(--sans)}
  .key-ideas{max-width:var(--reading);padding-left:24px}
  .key-ideas li{margin:0 0 8px}
}
/* Desktop reading grid: the text and notes columns always fill the main width. The notes column takes
   about a fifth (200-340 px) and absorbs any width beyond an 860 px text column; below 1,151 px the notes
   run inline and the text uses the full width. */
@media screen and (min-width:1151px){:root{--gutter:40px;--margin:clamp(200px,max(20%,calc(100% - 900px)),340px)}}
@media screen and (max-width:720px){
  .interactive-figure{padding:12px 12px 14px}
  .interactive-figure :is(.lab-output,.topic2-output,.t4-result,.s3-result,[data-result]){font-size:18px}
  .chapter-frame{padding:12px 14px 6px;font-size:16px}
  .check-question>legend{font-size:19px}
  .check-options label{font-size:16px;padding:8px 10px}
}

@media print{
  .chapter-frame{border-left:1.5pt solid #000;padding:1pt 0 1pt 9pt;margin:0 0 12pt;font:10pt/1.4 var(--sans);break-inside:avoid}
  :is(.frame-label,.pitfall-label,.example-label){font:700 8pt/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;margin:0 0 3pt}
  .frame-intro{margin:0 0 2pt}
  .frame-outcomes{margin:0 0 3pt;padding-left:14pt}
  .frame-outcomes li{margin:0 0 1pt}
  .frame-builds{font-size:9pt;margin:0}
  .frame-builds strong{margin-right:4pt}
  .think-first{border-left:1.5pt solid #000;padding-left:8pt;margin:8pt 0;break-inside:avoid}
  .think-first>p,.think-answer>p{font:10pt/1.4 var(--sans);margin:0 0 3pt}
  :is(.think-answer,.check-answer)>summary{list-style:none;margin:0;padding:0 0 2pt;font:8.5pt/1.4 var(--sans);color:#444;break-after:avoid}
  :is(.think-answer,.check-answer)>summary::marker{content:''}
  .pitfall{border-left:1.5pt dashed #000;padding-left:8pt;margin:8pt 0;break-inside:avoid}
  .worked-example{border-top:1pt solid #000;border-bottom:.5pt solid #999;padding:6pt 0 2pt;margin:8pt 0 10pt}
  .exercise :is(details.hint,details.answer){display:none!important}
  .check-intro,.check-status{display:none}
  .check-question{border:0;padding:0;margin:0 0 9pt;min-width:0;break-inside:avoid}
  .check-question>legend{font:11pt/1.4 Georgia,serif;padding:0;margin:0 0 3pt}
  .check-number{font-weight:700}
  .check-options{margin:0 0 3pt}
  .check-options>li{margin:0 0 1pt}
  .check-options label{display:flex;gap:5pt;font:10pt/1.4 var(--sans)}
  .check-answer>p{font:10pt/1.4 var(--sans);margin:0}
  .key-ideas{padding-left:14pt}
  .key-ideas li{margin:0 0 2pt}
}

/* Animations share the interactive-figure frame. The video waits for the reader; its numbered steps follow playback
   and each step can be chosen to show its completed frame. Print shows the final frame with the same steps. */
@media screen{
  .interactive-figure.animation-figure::before{content:"Animation"}
  .animation-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#101217;cursor:pointer}
  .animation-bar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
  .animation-bar button{font:16px/1.3 var(--sans);padding:6px 14px;min-height:38px;border:1px solid var(--strong-rule);background:var(--paper);color:var(--ink)}
  .animation-bar .animation-play{font-weight:700;min-width:9.5em}
  .animation-bar button:hover{background:var(--hover)}
  .animation-bar button:disabled{cursor:default;color:var(--muted)}
  .animation-hint{margin:12px 0 0;font:14px/1.4 var(--sans);color:var(--muted)}
  .animation-steps{max-width:760px;margin:12px 0 0;padding-left:24px;font:16px/1.5 var(--sans)}
  .animation-hint+.animation-steps{margin-top:4px}
  .animation-steps>li{margin:0 0 4px}
  .animation-ready .animation-steps{list-style:none;padding:0;counter-reset:step}
  .animation-ready .animation-steps>li{counter-increment:step;margin:0}
  .animation-step{display:flex;gap:10px;align-items:baseline;width:100%;padding:5px 10px 5px 8px;border:0;border-left:3px solid transparent;background:none;color:var(--ink);font:inherit;line-height:1.5;text-align:left}
  .animation-step::before{content:counter(step);flex:none;min-width:1.1em;font-weight:700;color:var(--muted)}
  .animation-step>span{flex:1;min-width:0}
  .animation-step:hover{background:var(--hover)}
  .animation-steps>li.current>.animation-step{border-left-color:var(--accent);background:var(--paper)}
  .animation-steps>li.current>.animation-step::before{color:var(--accent)}
}
@media screen and (max-width:720px){
  .animation-bar button{min-height:44px}
  .animation-steps{font-size:15px}
}
@media print{
  .animation-hint{display:none}
  .animation-figure .print-figure img{display:block;width:100%;max-width:16cm;height:auto;margin:2pt 0 5pt}
  .animation-steps,.animation-ready .animation-steps{list-style:decimal;margin:0;padding-left:14pt;font:9.5pt/1.35 var(--sans)}
  .animation-steps>li{margin:0 0 1pt}
  .animation-steps .animation-step{display:inline!important;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left}
  .animation-step::before{content:none}
}

/* Controls keep a readable width inside wide frames; the Bayes inputs sit side by side when there is room. */
@media screen{
  .interactive-figure :is(fieldset,.topic2-controls,.s3-controls){max-width:760px}
  [data-lab=bayes] fieldset.lab-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 18px}
  [data-lab=bayes] fieldset.lab-controls>:is(legend,.note,.lab-button-row){grid-column:1/-1}
  [data-lab=bayes] .lab-slider{display:flex;flex-direction:column;gap:3px}
}
@media screen and (max-width:900px){[data-lab=bayes] fieldset.lab-controls{grid-template-columns:1fr}}