/* TDA teaching presentation. Existing sealed releases keep their original CSS. */
html { scroll-padding-top: 12px; }
body { min-width: 0; }
main { max-width: 1180px; margin-inline: auto; }
[data-embed="true"] .masthead,
[data-embed="true"] body > footer,
[data-embed="true"] .intro,
[data-embed="true"] .collection-intro,
[data-embed="true"] .transport,
[data-embed="true"] .narration-controls,
[data-embed="true"] .narration-seek { display: none; }
[data-embed="true"] main { padding: 12px 24px 20px; }
[data-embed="true"] .narration-panel { border: 0; margin: 0; padding: 0; background: transparent; }
.guide-heading { padding-top: 0; margin: 8px 0 14px; }
.guide-heading h2 { font-size: 20px; }
#release { display: none; }
.guide-grid { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .8fr); min-height: 0; }
.visual, .reader { min-width: 0; }
.reader { padding: 22px; }
.reader h3 { font-size: clamp(23px, 2.2vw, 32px); }
.reader .dek { margin-bottom: 12px; font-size: 16px; }
.reader #transcript { font-size: 14px; line-height: 1.6; }
.reader > details { margin-top: 18px; }
.visual { padding: 20px; }
#scene { min-height: 0; }
#scene svg { max-height: 320px; }
.caption { font-size: 13px; }
.teaching-notes { border-block-start: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.teaching-notes > summary { cursor: pointer; font-size: 14px; padding: 5px 0 10px; }
.teaching-notes .reading { padding: 24px 0; }
.teaching-notes .reading:first-of-type { border-top: 0; }
.teaching-notes .state-section { padding-block: 24px; }
.teaching-notes .recording-section { padding-block: 24px; }
.playback-note, #narration-status { min-height: 1.4em; font-size: 12px; margin: 8px 0; }
.public-auto[aria-pressed="true"] { color: var(--pink); border-color: var(--pink); }
.standalone-return { display: inline-block; margin-top: 14px; font-size: 14px; }
[data-embed="true"] .standalone-return { display: none; }

/* The contact sheet stays visible while the account of the selected image changes. */
.collection-intro { padding-block: 26px; }
.collection-intro h1 { font-size: clamp(32px, 4vw, 52px); }
.workbench { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.contact-sheet { padding: 16px 24px 12px 0; }
.sheet-heading { margin-bottom: 8px; }
.sheet-heading h2 { font-size: 16px; }
.sheet-heading span { font-size: 11px; }
#group-key { min-height: 16px; margin-bottom: 5px; }
.images { gap: 7px; max-width: 370px; margin-inline: auto; }
.image svg { aspect-ratio: 1.9; }
.image-label { padding: 3px 6px; }
.image-label strong { font-size: 12px; }
.image-label span { font-size: 10px; min-height: 12px; }
.sheet-caption { margin-top: 8px; }
.explanation { padding: 20px 0 18px 24px; }
.explanation h2 { font-size: clamp(23px, 2.3vw, 30px); margin-bottom: 12px; }
.explanation p { font-size: 14px; margin-bottom: 10px; }
.explanation h3 { margin-top: 14px; }
.actions { margin: 12px 0; }
.record { padding-block: 10px; gap: 16px; }
.record h2 { font-size: 12px; }
.record dl { gap: 10px; }
.record dd { font-size: 12px; }
.announcement { min-height: 0; padding-top: 8px; font-size: 12px; }
.story-controls { padding: 8px 0; }
#views { padding-bottom: 10px; gap: 4px; }
#views button { padding: 7px 10px; font-size: 13px; }
#narration-explore { color: var(--blue); }

@media (min-width: 901px) {
  [data-embed="true"] .workbench { height: max(430px, calc(100svh - 244px)); max-height: 470px; }
  [data-embed="true"] .explanation { overflow-y: auto; scrollbar-gutter: stable; }
  [data-embed="true"] .guide-grid { min-height: min(400px, calc(100svh - 150px)); }
  [data-embed="true"] .reader { max-height: max(350px, calc(100svh - 170px)); overflow-y: auto; }
}
@media (max-width: 900px) {
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
  .reader { padding: 20px 0; }
  .visual { padding: 16px 0; }
  #scene svg { max-height: none; }
}
@media (max-width: 700px) {
  [data-embed="true"] main { padding: 12px 16px 20px; }
  .workbench { grid-template-columns: minmax(0, 1fr); }
  .contact-sheet { padding: 12px 0; }
  .sheet-heading { display: flex; }
  .images { max-width: 390px; }
  .image svg { aspect-ratio: 1.8; }
  .explanation { padding: 20px 0; }
  .record { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .record dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .branches { gap: 10px; }
  #views button { padding: 8px; font-size: 12px; }
  .story-controls { gap: 8px; }
  .story-controls #reset { margin-left: auto; }
}

@media (min-width: 901px) and (max-height: 720px) {
  #scene svg { max-height: 260px; }
  .visual { padding: 14px; }
  .guide-grid { min-height: 0; }
  #interaction { min-height: 44px; }
}