/* Complete laptop scenes use the visible CSS viewport, including browser UI.
   The app examples may scroll within their content areas; their controls stay
   in the same window. Phone layouts remain in the normal document flow. */
@media (min-width: 1024px) and (min-height: 600px) {
  body[data-page="agents"] .wl-worker-demo-chapter {
    min-block-size: var(--wand-pane-height, calc(100svh - var(--header, 76px)));
    padding-block: 16px;
  }

  .scale-story-sticky {
    height: var(--wand-pane-height, calc(100svh - var(--header, 76px)));
    min-height: 0;
    max-height: none;
  }

  /* The introduction precedes this single complete national-grid scene. */
  .nations-grid-section[data-chapter-group] { padding-block: 0; }
  .nations-grid-intro[data-chapter-screen] {
    min-block-size: var(--wand-pane-height, calc(100svh - var(--header, 76px)));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 36px;
  }
  .nations-grid-intro[data-chapter-screen] .section-heading { margin-block: 0; }
  .nations-grid-screen[data-chapter-screen] {
    min-block-size: var(--wand-pane-height, calc(100svh - var(--header, 76px)));
    padding-block: 20px;
    display: flex;
    align-items: center;
  }
  .nations-grid-screen .economy {
    width: 100%;
    height: calc(var(--wand-pane-height, calc(100svh - var(--header, 76px))) - 40px);
    max-height: 950px;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(274px, .43fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 12px 30px;
  }
  .nations-grid-screen .economy-toolbar { grid-column: 1 / -1; grid-row: 1; gap: 12px 22px; flex-wrap: nowrap; }
  .nations-grid-screen .economy-scenarios { gap: 6px; flex-wrap: nowrap; }
  .nations-grid-screen .economy-scenarios button { font-size: 11px; line-height: 1.5; padding: 8px 13px; min-height: 40px; white-space: nowrap; }
  .nations-grid-screen .economy-illustration { font-size: 11px; line-height: 1.5; text-align: right; max-width: 205px; }
  .nations-grid-screen .economy-canvas-wrap { grid-column: 1; grid-row: 2; margin: 0; min-width: 0; min-height: 0; }
  .nations-grid-screen .economy-stage { width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; }
  .nations-grid-screen .economy-legend { grid-column: 1; grid-row: 3; padding: 0; gap: 7px 20px; min-height: 23px; font-size: 11px; line-height: 1.7; justify-content: center; }
  .nations-grid-screen .economy-console {
    grid-column: 2;
    grid-row: 2 / 4;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: 19px;
    border-top: 0;
    border-left: 1px solid #59426788;
    padding: 8px 0 0 26px;
  }
  .nations-grid-screen .economy-task { min-height: 0; }
  .nations-grid-screen .economy-task .eyebrow { font-size: 10px; line-height: 1.5; }
  .nations-grid-screen .economy-task h3 { font-size: clamp(25px, 2.25vw, 33px); line-height: 1.12; margin: 12px 0 14px; }
  .nations-grid-screen .economy-task > p:last-child { font-size: 13px; line-height: 1.7; }
  .nations-grid-screen .economy-trace { min-height: 0; display: flex; flex-direction: column; padding-top: 16px; border-top: 1px solid #59426788; }
  .nations-grid-screen .economy-status { flex: 0 0 auto; }
  .nations-grid-screen .economy-status strong { font-size: 12px; line-height: 1.5; }
  .nations-grid-screen .economy-trace > p { flex: 1 1 0; min-height: 38px; margin: 10px 0 12px; font-size: 12px; line-height: 1.7; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .nations-grid-screen .economy-permission { flex: 0 0 auto; min-height: 38px; font-size: 11px; line-height: 1.6; }
  .nations-grid-screen .economy-actions { flex: 0 0 auto; gap: 5px 18px; margin-top: 10px; }
  .nations-grid-screen .economy-actions button { min-height: 38px; font-size: 11px; line-height: 1.5; }
  .nations-grid-screen .economy-run { padding: 9px 15px; gap: 20px; }
  .nations-grid-screen .economy-local-pause { padding-block: 8px; }
  .nations-grid-screen .economy-footnote { grid-column: 1 / -1; grid-row: 4; max-width: none; margin: 0; padding-top: 12px; font-size: 11px; line-height: 1.6; }
}

@media (min-width: 1024px) and (min-height: 600px) and (max-height: 739px) {

  .scale-story-layout { grid-template-rows: minmax(0, 1fr) 64px; }
  .scale-story-art { bottom: 64px; }
  .scale-story-editorial { padding-block: 15px; }
  .scale-story .scale-story-title { font-size: clamp(44px, min(4.1vw, 8.3svh), 60px); margin-bottom: 20px; }
  .scale-story .scale-story-scene-heading { font-size: clamp(42px, min(3.9vw, 7.8svh), 57px); margin-bottom: 20px; }
  .scale-story-kicker { margin-bottom: 16px; font-size: 10px; }
  .scale-story-caption > p { font-size: 14px; line-height: 1.65; }
  .scale-story-caption > .scale-story-detail { font-size: 12px; line-height: 1.6; margin-top: 11px; }
  .scale-story-cta { margin-top: 18px; min-height: 44px; padding-block: 11px; }

  .nations-grid-screen[data-chapter-screen] { padding-block: 16px; }
  .nations-grid-screen .economy { height: calc(var(--wand-pane-height, calc(100svh - var(--header, 76px))) - 32px); gap: 10px 25px; }
  .nations-grid-screen .economy-console { padding: 0 0 0 22px; gap: 12px; grid-template-rows: minmax(0, .85fr) minmax(0, 1fr); }
  .nations-grid-screen .economy-task { display: flex; flex-direction: column; }
  .nations-grid-screen .economy-task h3 { font-size: 25px; line-height: 1.1; margin: 9px 0 10px; flex: 0 0 auto; }
  .nations-grid-screen .economy-task > p:last-child { font-size: 12px; line-height: 1.65; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .nations-grid-screen .economy-trace { padding-top: 12px; }
  .nations-grid-screen .economy-trace > p { margin-block: 7px 8px; min-height: 25px; }
  .nations-grid-screen .economy-actions { gap: 4px 12px; margin-top: 6px; }
  .nations-grid-screen .economy-actions button { min-height: 34px; font-size: 10px; }
  .nations-grid-screen .economy-run { padding-block: 8px; }
  .nations-grid-screen .economy-permission { min-height: 34px; }
  .nations-grid-screen .economy-legend { font-size: 10px; gap: 6px 14px; }
  .nations-grid-screen .economy-footnote { font-size: 10px; line-height: 1.6; padding-top: 10px; }
}

@media (min-width: 1024px) and (min-height: 600px) and (max-height: 659px) {
  body[data-page="agents"] .wl-learning-screen { padding-block: 16px; --wl-learning-reserve: 305px; }
  body[data-page="agents"] .wl-learning-screen .wl-learning-stage { height: max(190px, calc(var(--wand-pane-height, calc(100svh - var(--header, 76px))) - 305px)); }
  body[data-page="agents"] .wl-learning-screen .wl-exhibit-caption { min-height: 137px; }
  body[data-page="agents"] .wl-comparison-screen { padding-block: 16px; }
  body[data-page="agents"] .wl-comparison-screen .wl-comparison-art { height: max(190px, calc(var(--wand-pane-height, calc(100svh - var(--header, 76px))) - 310px)); }
  body[data-page="agents"] .wl-comparison-screen .wl-comparison-copy { min-height: 122px; }
}

/* A shorter desktop window becomes a readable document. The corresponding
   Home controller uses its inline stage controls instead of a pinned camera. */
@media (min-width: 1024px) and (max-height: 599px) {
  .scale-story { height: auto; }
  .scale-story-sticky { position: relative; top: auto; height: auto; min-height: 0; max-height: none; padding-top: var(--header, 76px); }
  .scale-story-layout { min-height: 660px; grid-template-rows: minmax(0, 1fr) 64px; }
  .scale-story-art { bottom: 64px; }
  .scale-story-editorial { padding-block: 36px; }
  .scale-story .scale-story-title { font-size: 58px; }
  .scale-story .scale-story-scene-heading { font-size: 54px; }
}

@media print {
  .nations-grid-screen .economy { height: auto; block-size: auto; max-height: none; max-block-size: none; overflow: visible; }
}