/* Presentation refinement, 2026-09-21. Screen-only: printed reports stay unchanged.
   No canvas filters, new artwork, network fonts, or additional animation loops. */
@media screen {
  :root {
    --muted: #596653;
    --ui-paper: #f7f4e9;
    --ui-ink: #293c32;
    --ui-secondary: #52634f;
    --ui-border: #c6ccba;
    --ui-accent: #365a43;
    --ui-wash: #e6ecdf;
    --ui-radius: 6px;
    --ui-shadow: 0 3px 16px #293c3212;
  }
  #experience { min-height: 0; height: 100svh; }
  /* Protect the centre of the illustration instead of washing the whole view. */
  .scene-shade {
    background: linear-gradient(180deg, #f7f4e9e8 0, #f7f4e900 160px,
      #f7f4e900 calc(100% - 105px), #f7f4e9d9 100%);
  }
  .masthead { padding: max(16px, env(safe-area-inset-top)) 28px 12px; }
  .header-actions { gap: 12px; }
  .header-actions .text-button { min-height: 44px; font-size: 13px; }
  .presentation-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 56px; min-height: 44px; padding: 8px 10px;
    font: 13px/1.4 var(--sans); color: var(--ui-ink);
    background: var(--ui-paper); border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
  }
  .presentation-toggle[aria-pressed="true"] {
    background: var(--ui-accent); border-color: var(--ui-accent); color: #fffef2;
  }
  .icon-button, .header-actions > .icon-button, .zoom-controls .icon-button,
  .walk-controls .icon-button, .walkbar > #pause-button,
  .dialog-controls #dialog-pause { min-width: 44px; height: 44px; }
  .icon-button, .toolbar-button, .location-link { touch-action: manipulation; }
  /* Walking uses pointer capture; do not override its touch-action:none. */
  .walk-button { touch-action: none; }
  .icon-button:focus-visible, .presentation-toggle:focus-visible,
  .location-link:focus-visible, .toolbar-button:focus-visible,
  .choice-button:focus-visible {
    outline: 3px solid var(--ui-accent); outline-offset: 3px;
  }
  .location-nav, .assignment, .walkbar, .world-event-button, .trial-status,
  .return-outside {
    background: var(--ui-paper); border-color: var(--ui-border);
    box-shadow: var(--ui-shadow); border-radius: var(--ui-radius);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .location-nav { top: 104px; left: 28px; gap: 10px; padding: 8px 10px; }
  .location-link { min-height: 44px; padding: 5px 8px; font-size: 14px; border-radius: 4px; }
  .location-link.active { background: var(--ui-wash); color: var(--green-dark); }
  .location-link.active::after { bottom: 1px; left: 8px; width: 24px; height: 2px; }
  .location-description { font-size: 11px; letter-spacing: 0; opacity: 1; }
  .location-number, .nav-caption { font-size: 11px; color: var(--ui-secondary); }
  .assignment { top: 104px; right: 28px; width: 246px; }
  .assignment-toggle { min-height: 56px; padding: 12px 14px; }
  .assignment-toggle strong { font-size: 16px; }
  .assignment-content { max-height: calc(100svh - 270px); overflow: auto; overscroll-behavior: contain; }
  .assignment-content > p, .task-route li { font-size: 13px; color: var(--ui-secondary); }
  .task-route small, .task-route li > span { font-size: 12px; color: var(--ui-secondary); }
  .assignment-toggle .eyebrow, .eyebrow, .save-status { font-size: 11px; color: var(--ui-secondary); }
  .return-outside { left: 28px; top: 190px; min-height: 44px; font-size: 13px; }
  .walkbar { bottom: max(32px, calc(env(safe-area-inset-bottom) + 12px)); gap: 8px; padding: 6px 10px; }
  .toolbar-button { min-height: 44px; font-size: 12px; }
  .walk-label, .zoom-controls > span { font-size: 12px; color: var(--ui-secondary); }
  .zoom-controls > span { min-width: 38px; }
  .scene-caption { left: 28px; bottom: 117px; font-size: 15px; }
  .scene-time, .canvas-help { font-size: 11px; color: var(--ui-secondary); }
  .quick-notebook { right: 28px; bottom: 42px; }
  .quick-notebook .eyebrow { font-size: 11px; }
  .world-observation { left: 28px; bottom: 157px; max-width: 295px; }
  .world-event-button { font-size: 14px; min-height: 44px; }
  .world-event-button small, .trial-status small { font-size: 12px; letter-spacing: 0; color: var(--ui-secondary); }
  .trial-status { left: 28px; bottom: 157px; }
  .trial-status > div > span { font-size: 14px; }
  .trial-status > button { min-height: 44px; font-size: 12px; }
  .trial-present .world-observation { bottom: 260px; }
  .notebook-dialog { border-color: var(--ui-border); border-radius: var(--ui-radius); }
  .dialog-top { background: var(--ui-paper); }
  .dialog-top > .eyebrow, .scene-dialog .section-label { font-size: 11px; color: var(--ui-secondary); }
  .intro-text, .dialog-content .intro-text, .welcome .lead, .small,
  .evidence-content, .empty-state { font-size: 14px; line-height: 1.85; color: var(--ui-secondary); }
  .fine-print, .welcome .fine-print, .welcome .duration,
  .evidence-source, .note-label, .field-hint, .character-role,
  .scene-dialog .character-role, .scene-dialog .dialogue-actions .fine-print,
  .scene-dialog .history p, .scene-dialog .dialogue-feedback {
    font-size: 12px; line-height: 1.75; color: var(--ui-secondary);
  }
  .evidence-type, .section-label, .field-label, .journal-tabs button,
  .underlined-button, .scene-dialog .dialogue-actions .underlined-button {
    font-size: 13px; color: var(--ui-secondary);
  }
  .field-input, .field-textarea { font-size: 15px; background: #fffdf7; border-color: #a3af9c; }
  .field-input::placeholder, .field-textarea::placeholder { color: #687160; }
  .primary-button, .secondary-button, .scene-dialog .primary-button,
  .scene-dialog .secondary-button { min-height: 44px; font-size: 14px; }
  .scene-dialog { background: var(--ui-paper); max-height: 52svh; bottom: 100px; }
  .scene-dialog .speech p { font-size: 16px; line-height: 1.85; }
  .scene-dialog .choice-button, .choice-button { min-height: 44px; font-size: 14px; line-height: 1.75; padding: 10px 12px; }
  .scene-dialog .choice-number, .choice-number { font-size: 12px; color: var(--ui-secondary); }
  .scene-dialog .dialogue-actions { flex-wrap: wrap; }
  /* A reversible composition choice, never a teaching-state change.
     Keep observations, trial status, notebook, navigation, pause and exits. */
  #experience[data-presentation="quiet"] .assignment,
  #experience[data-presentation="quiet"] .quick-notebook,
  #experience[data-presentation="quiet"] .canvas-help,
  #experience[data-presentation="quiet"] .wordmark-en,
  #experience[data-presentation="quiet"] .location-description,
  #experience[data-presentation="quiet"] .scene-time { display: none; }
}
@media screen and (max-width: 1100px) {
  .wordmark-en, .quick-notebook { display: none; }
}
@media screen and (max-width: 700px) {
  .masthead { padding: max(12px, env(safe-area-inset-top)) 12px 8px; gap: 8px; }
  .wordmark { gap: 8px; }
  .wordmark strong { font-size: 19px; letter-spacing: 2px; }
  .wordmark small { font-size: 9px; letter-spacing: .5px; }
  .wordmark-seal { width: 28px; height: 36px; font-size: 14px; }
  .header-actions { gap: 4px; }
  .header-actions .save-status { display: none; }
  .header-actions .notebook-trigger {
    position: relative; width: 44px; min-width: 44px; height: 44px;
    padding: 0; justify-content: center; font-size: 0;
  }
  .notebook-trigger .icon { font-size: 22px; }
  .notebook-trigger .count { position: absolute; right: 0; top: 0; width: 18px; min-width: 18px; height: 18px; background: var(--ui-paper); font-size: 11px; }
  .presentation-toggle { min-width: 44px; padding: 6px; font-size: 12px; }
  .location-nav { top: 82px; left: 12px; right: 12px; gap: 4px; padding: 6px; justify-content: space-between; }
  .location-link { flex: 1; min-width: 0; font-size: 13px; padding: 5px 4px; column-gap: 4px; }
  .location-number { font-size: 10px; }
  .location-description { font-size: 11px; }
  .nav-line, .nav-caption { display: none; }
  .assignment { top: 158px; right: 12px; width: 210px; }
  .assignment-toggle strong { font-size: 14px; }
  .assignment-toggle .eyebrow { font-size: 10px; letter-spacing: 1px; }
  .return-outside { left: 12px; top: 158px; font-size: 13px; }
  #experience:has(#return-outside:not([hidden])) .assignment { display: none; }
  .walkbar { width: calc(100vw - 24px); padding: 5px 4px; gap: 0; justify-content: space-between; }
  .walkbar .tool-separator, .walk-label { display: none; }
  .walkbar .toolbar-button { font-size: 12px; gap: 3px; padding: 0 2px; }
  .walkbar .toolbar-button > span:first-child { display: none; }
  .walk-controls, .zoom-controls { gap: 0; }
  .zoom-controls > span { min-width: 34px; font-size: 11px; }
  .scene-caption { left: 16px; bottom: 110px; font-size: 13px; letter-spacing: 1px; }
  .scene-time { display: none; }
  .world-observation { left: 12px; bottom: 149px; max-width: min(270px, calc(100vw - 24px)); }
  .world-event-button { font-size: 13px; padding: 9px 11px; }
  .trial-status { left: 12px; bottom: 149px; max-width: calc(100vw - 24px); padding: 8px 10px; }
  .trial-status > div > span { font-size: 13px; }
  .trial-present .world-observation { bottom: 252px; }
  .canvas-help { bottom: max(9px, env(safe-area-inset-bottom)); font-size: 10px; letter-spacing: 0; }
  .notebook-dialog.welcome { max-height: calc(100svh - 32px); transform: translateY(-50%); }
  .notebook-dialog { max-height: calc(100svh - 20px); }
  .scene-dialog { bottom: max(16px, env(safe-area-inset-bottom)); max-height: 58svh; }
  .scene-dialog .speech p { font-size: 16px; }
  .scene-dialog .choice-button { font-size: 14px; padding: 10px 12px; }
  .scene-dialog .dialogue-actions .fine-print { max-width: none; }
  .field-input, .field-textarea { font-size: 16px; }
  .dialog-content { padding-left: 20px; padding-right: 20px; }
  .welcome .dialog-content { padding-left: 22px; padding-right: 22px; }
}
@media screen and (max-height: 520px) and (min-width: 701px) {
  .masthead { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .wordmark small, .save-status, .wordmark-en, .canvas-help { display: none; }
  .location-nav { top: 70px; left: 12px; }
  .assignment { top: 70px; right: 12px; width: 218px; }
  .assignment-content { max-height: calc(100svh - 150px); }
  .return-outside { top: 148px; left: 12px; }
  .notebook-dialog, .notebook-dialog.welcome {
    top: 12px; bottom: auto; max-height: calc(100svh - 24px);
    min-height: 0; transform: none;
  }
  .scene-dialog { top: auto; bottom: 12px; max-height: calc(100svh - 90px); }
  .scene-caption { bottom: 102px; }
  .world-observation, .trial-status { bottom: 135px; }
  .trial-present .world-observation { bottom: 231px; }
}
@media screen and (forced-colors: active) {
  .presentation-toggle, .location-link.active, .walkbar, .world-event-button,
  .trial-status, .assignment, .location-nav { border: 1px solid ButtonText; }
  .presentation-toggle[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* Narrow toolbar: preserve 44px targets instead of shrinking them. */
@media screen and (max-width: 380px) {
  .walkbar { display: grid; grid-template-columns: 88px 1fr 44px; gap: 2px; }
  .walk-controls { grid-column: 1; grid-row: 1; }
  .walkbar .toolbar-button { grid-column: 2; grid-row: 1; justify-content: center; }
  .walkbar > #pause-button { grid-column: 3; grid-row: 1; }
  .zoom-controls { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .scene-caption { bottom: 164px; }
  .world-observation, .trial-status { bottom: 203px; }
  .trial-present .world-observation { bottom: 306px; }
}

/* Combined UX review: clear next steps and one active reading surface. */
@media screen {
  .assignment-next { padding: 0 14px 12px; display: grid; gap: 7px; }
  .assignment-next > span { font-size: 13px; line-height: 1.65; color: var(--ui-ink); }
  .assignment-next button { text-align: left; justify-self: start; min-height: 36px; }
  .compact-panel-open .assignment, .compact-panel-open .walkbar,
  .compact-panel-open .quick-notebook, .compact-panel-open .canvas-help,
  .compact-panel-open .world-observation, .compact-panel-open .trial-status,
  .compact-panel-open .scene-caption, .notebook-open .quick-notebook { visibility: hidden; }
  .scene-dialog .dialogue-choices { grid-template-columns: 1fr; }
  .scene-dialog .choice-number { flex: 0 0 24px; padding-top: 2px; }
  .scene-dialog { bottom: 20px; max-height: min(620px, calc(100svh - 110px)); }
  .dialog-top { position: sticky; top: 0; z-index: 2; }
  .trial-blockers, .trial-responses p, .trial-decision,
  .trial-review details > summary, .next-blocker, .completion-state {
    font-size: 14px; line-height: 1.8; color: var(--ui-ink);
  }
  .trial-decision.join { color: #365a43; }
  .next-blocker, .completion-state { padding: 12px 14px; background: var(--ui-wash); border-left: 3px solid var(--ui-accent); }
  .next-blocker p { margin: 0 0 6px; }
  .next-blocker .underlined-button, .trial-blockers button { margin-left: 0; min-height: 44px; }
  .trial-blockers li { margin-bottom: 12px; }
  .evidence-card { border-bottom: 1px solid var(--ui-border); padding: 12px 0; }
  .evidence-card > summary { cursor: pointer; font-size: 14px; line-height: 1.8; }
  .evidence-card > summary strong { margin-left: 8px; }
  .evidence-card > summary > span:last-child { display: block; color: var(--ui-secondary); font-size: 12px; padding-left: 18px; }
  .evidence-card .evidence-item { border: 0; margin-bottom: 0; }
  .citation-summary { font-size: 14px; line-height: 1.8; }
  .citation-picker { padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 5px; }
  .citation-picker summary { cursor: pointer; font-size: 14px; min-height: 32px; }
  .citation-picker .field-input { display: block; width: 100%; margin-top: 8px; min-height: 44px; }
  .check-line[hidden] { display: none; }
  .visited-label { display: block; font-size: 12px; line-height: 1.7; color: var(--ui-secondary); }
  .character-portrait { background: #fffdf5; border: 4px solid #fffdf5; outline: 1px solid #d4d2c2; box-shadow: 1px 2px 4px #293c3212; }
  summary:focus-visible, .underlined-button:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
}
@media screen and (max-width: 700px) {
  .assignment { width: min(245px, calc(100vw - 24px)); }
  .assignment-toggle { min-height: 44px; padding-bottom: 5px; }
  .assignment-toggle .eyebrow { display: none; }
  .assignment-next { gap: 2px; padding-bottom: 8px; }
  .scene-dialog { max-height: 62svh; bottom: max(12px, env(safe-area-inset-bottom)); }
  .compact-panel-open .location-nav { visibility: hidden; }
}
@media screen and (max-height: 520px) and (min-width: 701px) {
  .masthead { padding: 6px 12px; }
  .masthead .wordmark { display: none; }
  .header-actions { margin-left: auto; }
  .location-nav { top: 6px; left: 12px; padding: 0 5px; gap: 2px; }
  .location-description, .nav-caption, .location-number, .location-nav .nav-line { display: none; }
  .location-link { display: flex; }
  .assignment { top: 62px; right: 12px; width: 236px; }
  .assignment-toggle { padding: 4px 12px; min-height: 44px; }
  .assignment-toggle .eyebrow, .assignment-next > span { display: none; }
  .assignment-toggle strong { margin: 0; font-size: 14px; }
  .assignment-next { padding: 0 12px 4px; }
  .assignment-next button { min-height: 32px; }
  .assignment-content { max-height: calc(100svh - 190px); }
  .walkbar { bottom: 8px; padding: 0 8px; }
  .scene-caption { display: none; }
  .world-observation, .trial-status { bottom: 63px; max-width: 260px; }
  .trial-present .world-observation { display: none; }
  .return-outside { top: 61px; }
  .scene-dialog { top: 60px; bottom: 8px; max-height: calc(100svh - 68px); width: min(480px, 58vw); }
  .compact-panel-open .location-nav { visibility: hidden; }
}
@media screen {
  .scene-transition-status { position:absolute; z-index:30; left:50%; top:45%; transform:translate(-50%,-50%); max-width:calc(100vw - 32px); padding:18px 24px; background:var(--ui-paper); color:var(--ui-ink); border:1px solid var(--ui-border); border-radius:6px; box-shadow:var(--ui-shadow); font:14px/1.8 var(--sans); }
}