/* L5 continuity layer. Loaded last; scene geometry and evidence stay authored. */
:root{
  --font-sans:LectureSans,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --course-gutter:clamp(18px,2vw,40px);
  --course-stage-height:calc(100dvh - 150px);
  --course-title:clamp(32px,3vw,56px);
  --course-label:clamp(21px,1.65vw,28px);
  --course-conclusion:clamp(24px,2vw,32px);
  --course-condition:clamp(18px,1.3vw,22px);
}

/* One question above a large white stage. Height and width constrain the
   diagram together; no transform scales the whole page. */
.deck{
  width:100%;max-width:none;height:100dvh;min-height:0;
  padding:18px var(--course-gutter) 0;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.deck-header h1{
  margin:0;color:var(--navy);font-size:var(--course-title);
  font-weight:650;line-height:1.2;text-wrap:balance;
}
.canvas-page{padding:14px 0 8px;min-height:0;overflow:auto}
.deck .stage{max-width:none;min-height:0;padding:0;gap:16px}
.deck .stage>div{min-width:0}
.deck :is(.am-concept-diagram,.mc-diagram,.nf-diagram,.nl-svg,
  .gfa-diagram,.gf-b-diagram,.gf-c-diagram,.gfd-diagram,
  .ra-diagram,.route-b-diagram,.rc-svg),
.deck .n62tr>svg,.deck .n62-serving>svg{
  display:block;width:100%;height:auto;min-height:0;
  max-height:var(--course-stage-height);margin-inline:auto;
}
.deck .n62-serving{max-width:none}
.deck .cue-caption{margin:4px 0 0;padding:8px 0 2px}
.deck .cue-caption p{font-size:clamp(18px,1.35vw,25px);line-height:1.4}
.deck .evidence{font-size:13px;line-height:1.35;min-height:0;margin:3px 0}
.deck .evidence:empty{display:none}

/* Navigation stays secondary, while each control remains easy to hit. */
.deck-foot{
  margin:0 calc(-1 * var(--course-gutter));padding:4px var(--course-gutter);
  min-height:52px;gap:12px;background:#fff;border-top:1px solid #dce1e7;
}
.deck-foot .nav-group{gap:10px;min-width:0}
.deck-foot button,.deck-foot a{font-size:14px}
.deck-foot button{min-height:44px;padding:9px 12px;line-height:1.2;border-radius:4px}
.deck-foot button.primary{padding:10px 24px}
.deck-foot a{display:inline-flex;min-height:44px;align-items:center}
.deck-foot #counter,.deck-foot #step-counter{font-variant-numeric:tabular-nums;line-height:1.2}
.deck-foot #fullscreen{width:44px;padding:10px;justify-content:center}
.deck-foot button:hover:not(:disabled){background:#eef3fa}
.deck-foot button.primary:hover:not(:disabled){background:#123d88}
.deck-foot button:disabled{opacity:.42;cursor:default}
.progress,.progress>i{height:2px}
.progress>i{background:var(--gold)}

/* The current stop is the first reading layer. Long material scrolls inside
   the dialog, independently of the classroom state behind it. */
.modal{width:min(1000px,calc(100% - 40px));max-height:86dvh;border-radius:6px}
.modal-head{padding:18px 26px;gap:20px}
.modal-head h2{font-size:clamp(22px,1.7vw,28px);line-height:1.35}
.modal-head>button{flex:none;min-height:44px;white-space:nowrap}
.modal-body{padding:24px 30px;font-size:18px;line-height:1.8;scrollbar-gutter:stable}
.modal-body p,.modal-body li{max-width:46em}
.notes-position{margin:7px 0 0;font-size:15px;line-height:1.5}
.notes-tools{margin-bottom:20px;gap:12px 18px}
.notes-tools button{min-height:40px}
.modal-body .notes-cue{padding:0;border-bottom:1px solid var(--line)}
.modal-body .notes-cue>summary{padding:16px 4px;font-size:19px;line-height:1.5}
.modal-body .notes-cue[data-current="true"]{border-left:0}
.modal-body .notes-cue[data-current="true"]>summary{
  border-left:0;background:#fff5d8;color:var(--navy);padding:13px 16px;
}
.modal-body .notes-cue-body{padding:0 4px 20px}
.modal-body .notes-cue[data-current="true"] .notes-cue-body{padding:4px 16px 20px}
.modal-body .notes-cue-body h3{font-size:21px;line-height:1.5;margin:1.2em 0 .5em}
.spoken-text{font-size:18px;line-height:1.85}
.speaker-action{font-size:15px;line-height:1.75;border-left:0;border-top:1px solid #b9ccc7;border-radius:0}
.reader{font-size:18px;line-height:1.85}
.reader h1,.reader h2,.reader h3{color:var(--navy);text-wrap:balance}
.reader .reading-diagram{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}

/* Selection, keyboard focus, and reading scrollbars use the same palette. */
::selection{background:#ffe6a3;color:#182b43}
:where(button,a,summary,input,select,textarea):focus-visible{
  outline:3px solid #b37a00;outline-offset:3px;
}
.stage:focus{outline:none}
.canvas-page,.modal-body,.reading-diagram{scrollbar-width:thin;scrollbar-color:#8fa4c2 #f3f6fa}

@media(max-width:1100px){
  :root{--course-gutter:24px}
  .deck{padding-top:18px}
  .deck-header h1{font-size:clamp(30px,3.5vw,40px)}
  .deck-foot{gap:8px;padding-inline:16px}
  .deck-foot .nav-group{gap:5px}
  .deck-foot button{padding-inline:9px}
  .deck-foot button.primary{padding-inline:18px}
  .deck .cue-caption p{font-size:18px}
}

/* Narrow screens are reading surfaces. Preserve diagram labels and allow a
   deliberate horizontal pan instead of shrinking a 1200-unit figure. */
@media(max-width:760px){
  :root{--course-gutter:18px}
  .deck{height:auto;min-height:100dvh;display:block;padding-top:20px}
  .deck-header h1{font-size:28px;line-height:1.3;text-wrap:pretty}
  .canvas-page{overflow:visible;padding:14px 0 20px}
  .deck .stage{padding:12px 0;min-height:0;font-size:18px}
  .deck .stage>div,.reading-diagram>div{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  .deck :is(.am-concept-diagram,.mc-diagram,.nf-diagram,.nl-svg,
    .gfa-diagram,.gf-b-diagram,.gf-c-diagram,.gfd-diagram,
    .ra-diagram,.route-b-diagram,.rc-svg),
  .deck .n62tr>svg,.deck .n62-serving>svg,
  .reading-diagram :is(.gfa-diagram,.gf-b-diagram,.gf-c-diagram,.gfd-diagram,
    .ra-diagram,.route-b-diagram,.rc-svg){
    min-width:760px;min-height:0;max-height:none;
  }
  .deck .cue-caption,.deck .evidence{text-align:left}
  .deck .cue-caption p{font-size:18px;line-height:1.55}
  .deck .evidence{font-size:12px;line-height:1.55}
  .deck-foot{flex-wrap:wrap;padding:6px 12px 8px;gap:2px 10px}
  .deck-foot .nav-group{gap:4px}
  .deck-foot .nav-middle{margin:0 0 0 auto}
  .deck-foot #home-link{display:none}
  .deck-foot .controls{width:100%;justify-content:flex-end;gap:12px}
  .deck-foot #previous,.deck-foot #next{min-width:88px}
  .deck-foot #step-counter{margin-right:auto}
  .modal{width:calc(100% - 20px);max-height:92dvh}
  .modal-head{padding:15px 16px;gap:12px;align-items:flex-start}
  .modal-head h2{font-size:21px}
  .modal-head>button{padding:9px 10px;font-size:14px}
  .modal-body{padding:20px 18px;font-size:18px}
  .modal-body .notes-cue[data-current="true"] .notes-cue-body{padding-inline:4px}
  .notes-position{font-size:14px}
  .reader{margin-top:28px;padding-inline:20px}
}

@media(prefers-reduced-motion:reduce){
  .deck *, .modal *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media print{
  .reader{font-size:11pt;line-height:1.6}
  .reader .reading-diagram{overflow:visible}
  .reader .reading-diagram svg{min-width:0!important;max-height:none}
}

/* First frames, backward jumps and resets settle without a replay. */
.stage:not([data-motion="true"]) .rb-reveal,
.stage:not([data-motion="true"]) .rb-local-zoom{animation:none!important}

/* Current teaching surfaces: the scene owns labels and conclusions; the shell
   reserves only heading, evidence canvas and navigation. */
.deck .stage :is(.nf-scene,.nl-scene,.n62tr,.n62sv,.gfa-scene,.gf-c-scene,.gfd-scene){max-width:none;margin-inline:0}
.deck .stage :is(.nf-scene,.nl-scene,.n62tr,.n62sv)>svg{max-height:var(--course-stage-height);width:100%;height:auto;min-height:0}
.ra-vit-layout{grid-template-columns:minmax(0,1.7fr) minmax(290px,.85fr);gap:clamp(24px,3vw,52px);align-items:center}
.ra-vit-image{max-width:none}
.ra-vit-layout aside{font-size:var(--course-label);line-height:1.5}
.ra-vit-layout aside h2{font-size:var(--course-conclusion)!important;margin:0 0 20px!important;line-height:1.35}
.ra-vit-layout aside p{font-size:var(--course-label);line-height:1.5}
.ra-vit-identity{display:flex;flex-wrap:wrap;gap:12px 24px;margin:12px 0;font-size:var(--course-condition)}
.ra-vit-identity span{display:inline-flex;align-items:center;gap:8px}
.ra-vit-identity i{width:16px;height:16px;display:inline-block;border-radius:50%;background:currentColor}
.ra-vit-compare{font-size:var(--course-conclusion);color:var(--navy);font-weight:650;margin:20px 0}
.ra-mae-condition,.rc-evidence-note{font-size:var(--course-condition);line-height:1.5;color:var(--muted)}
.rc-takeaway{font-size:var(--course-conclusion);line-height:1.45;color:var(--navy);margin:20px 0 0;font-weight:600;text-wrap:pretty}
.rc-takeaway strong{color:var(--navy)}
.rc-example{border-left-width:1px}
.materials-intro{padding-bottom:12px;border-bottom:1px solid var(--line)}
.materials-intro h3{font-size:25px;line-height:1.4;margin:0 0 12px}
.material-list{display:block}
.material-item{padding:20px 0;border-bottom:1px solid var(--line)}
.material-item h4{font-size:21px;line-height:1.45;margin:0 0 8px}
.material-item p{margin:0;line-height:1.75}
.material-tools{margin-top:26px}
.material-tools summary{font-size:17px;color:var(--navy)}
.material-sections{display:flex;flex-wrap:wrap;gap:10px 24px;margin:26px 0 34px;align-items:baseline}
.material-sections a{display:block;line-height:1.65}
@media(max-width:600px){.material-sections{display:grid;grid-template-columns:1fr;gap:9px;margin:24px 0 32px}}
.material-tools .reading-links{margin-top:14px;padding-top:0;border-top:0}
.teacher-prep{margin:16px 0;padding:12px 0;border-top:1px solid var(--line)}
.teacher-prep>summary{font-size:16px;color:var(--muted)}
.teacher-prep .speaker-action{padding:10px 0;border:0;margin:0;font-size:16px}
.teacher-prep .rehearsal-qa{margin-top:14px}
.reader.course-reader{max-width:1240px}
.reader.course-reader>p,.handbook-unit>p,.handbook-step>.spoken-text,.handbook-step>p,.material-entry>p{max-width:46em}
.reading-figure{margin:20px 0 28px;max-width:100%;overflow-x:auto;overscroll-behavior:contain}
.reading-figure .reading-diagram{padding:12px 0;overflow:visible;min-height:0}
.reading-figure figcaption{font-size:15px;color:var(--muted);line-height:1.5;margin-top:8px}
.handbook-unit{padding:36px 0;border-top:1px solid var(--line)}
.handbook-unit>h2{font-size:30px;line-height:1.4;margin:0 0 18px}
.handbook-step{margin:26px 0}
.handbook-step>h3{font-size:22px;line-height:1.45;margin:0 0 14px}
.material-entry{margin:22px 0;padding:0 0 20px;border-bottom:1px solid var(--line)}
.material-entry h3{margin:0 0 10px;font-size:22px}
.material-archive{margin:18px 0}
.material-archive summary{color:var(--muted);font-size:16px}
.reader .reading-diagram :is(.ra-diagram,.route-b-diagram,.rc-svg,.nl-svg,.nf-diagram,.gfa-diagram,.gf-b-diagram,.gf-c-diagram,.gfd-diagram){max-height:none;min-height:0}
.reader .reading-diagram .ra-vit-layout{grid-template-columns:minmax(0,1.5fr) minmax(260px,.85fr)}
.reader .reading-diagram :is(.ra-vit-layout aside p,.ra-flow){font-size:20px}
@media (max-width:1100px){
 :root{--course-stage-height:calc(100dvh - 136px)}
 .ra-vit-layout{grid-template-columns:minmax(0,1.5fr) minmax(245px,.85fr);gap:22px}
}
@media (max-width:760px){
 .materials-intro h3{font-size:23px}
 .material-item h4{font-size:20px}
 .reader.course-reader{max-width:100%;padding-inline:18px}
 .reading-figure{margin-inline:0}
 .reading-figure .reading-diagram{min-width:760px}
 .reader .reading-diagram .ra-vit-layout{display:grid;min-width:760px}
 .handbook-unit>h2{font-size:26px}
 .deck .ra-vit-layout{min-width:760px}
 .deck .stage :is(.nf-scene,.nl-scene,.n62tr,.n62sv)>svg{min-width:760px;max-height:none}
}
@media print{
 .reader.course-reader{max-width:none}
 .handbook-unit{break-before:page}
 .reading-figure{overflow:visible;break-inside:avoid}
 .reading-figure .reading-diagram{min-width:0}
}
/* Necessary experiment conditions keep the shared reading size. */
.ra-vit-identity small{font-size:inherit;flex-basis:100%;line-height:1.5}
.ra-vit-layout figcaption{font-size:var(--course-condition);line-height:1.5}
.rc-input p{font-size:22px;line-height:1.55}

.ra-mae-condition{text-align:center;margin:0;font-size:max(20px,var(--course-condition))}
@media(max-width:760px){
 .reading-figure .reading-diagram{min-width:1100px}
 .reader .reading-diagram .ra-vit-layout{min-width:1100px}
}