/* Agents chapters: each complete scene owns its drawing, controls and caption.
   Keep this stylesheet after learning.css. Chapter navigation lives separately. */
body[data-page="agents"] {
  --wl-screen-height: var(--wand-pane-height, calc(100vh - var(--header, 76px)));
}
@supports (height: 100svh) {
  body[data-page="agents"] { --wl-screen-height: var(--wand-pane-height, calc(100svh - var(--header, 76px))); }
}

body[data-page="agents"] .wl-agent-chapter-group { padding-block: 0; }
body[data-page="agents"] .wl-agent-chapter {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px);
  overflow-anchor: none;
}
body[data-page="agents"] .wl-chapter-intro .section-heading { margin-block: 0; }
body[data-page="agents"] .wl-worker-demo-chapter .worker-demo,
body[data-page="agents"] .wl-principles-chapter .wl-agent-principles,
body[data-page="agents"] .wl-development-chapter .wl-development-grid,
body[data-page="agents"] .wl-comparison-support .wl-editorial-pair,
body[data-page="agents"] .wl-agent-cta-chapter .wl-page-cta { margin-block: 0; }
body[data-page="agents"] .wl-learning-exhibit {
  margin-block: 0;
  overflow: visible;
}
body[data-page="agents"] .wl-learning-stage {
  height: clamp(280px, 48vh, 480px);
  height: clamp(280px, 48svh, 480px);
  margin-block: 0;
  flex: none;
}
body[data-page="agents"] .wl-learning-support {
  border-top: 1px solid #cdb4e022;
}
body[data-page="agents"] .wl-learning-support .wl-tuning { border-top: 0; }
body[data-page="agents"] .wl-learning-support .wl-exhibit-note { padding-block: 8px 0; }
body[data-page="agents"] .wl-learning-support .wl-learning-interpretation { margin-top: 40px; }
body[data-page="agents"] .wl-return-to-scene { margin-top: 20px; font-size: 12px; color: #d8bdeb; }
body[data-page="agents"] .wl-comparison-screen { margin-block: 0; }
body[data-page="agents"] .wl-comparison-phases {
  position: relative;
  inset: auto;
  min-height: 30px;
  align-items: start;
  padding-top: 4px;
  padding-bottom: 10px;
}
body[data-page="agents"] .wl-comparison-art {
  height: clamp(250px, 39vh, 390px);
  height: clamp(250px, 39svh, 390px);
  margin-top: 18px;
}
body[data-page="agents"] .wl-comparison-copy { margin-top: 18px; }

/* Viewport compositions are a desktop enhancement. All boxes remain in normal
   flow, so zoom, translated text or an open disclosure can grow the document. */
@media (min-width: 1024px) and (min-height: 600px) {
  body[data-page="agents"] .wl-agent-chapter {
    min-block-size: var(--wl-screen-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(34px, 5svh, 64px);
  }
  body[data-page="agents"] .wl-agent-chapter > * { flex-shrink: 0; }
  body[data-page="agents"] .wl-chapter-intro .section-heading { align-items: center; }
  body[data-page="agents"] .wl-chapter-intro .section-intro { max-width: 470px; }

  body[data-page="agents"] .wl-agents-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--header, 76px) + 30px);
    padding-bottom: 30px;
    display: flex;
    align-items: center;
    overflow-anchor: none;
  }
  body[data-page="agents"] .wl-agents-hero .wl-hero-layout { min-height: 0; }
  body[data-page="agents"] .wl-agents-hero .wl-hero-copy { width: 64%; padding-block: 0; }
  body[data-page="agents"] .wl-agents-hero .wl-hero-copy h1 { font-size: clamp(62px, 10svh, 98px); }
  body[data-page="agents"] .wl-agents-hero .wl-hero-copy .eyebrow { margin-bottom: 26px; }
  body[data-page="agents"] .wl-agents-hero .wl-hero-lead {
    max-width: 515px;
    margin-top: 25px;
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.75;
  }
  body[data-page="agents"] .wl-agents-hero .wl-hero-links { margin-top: 28px; gap: 24px; }
  body[data-page="agents"] .wl-agents-hero .wl-hero-art {
    top: 50%;
    right: -9%;
    width: 57%;
    height: clamp(430px, calc(var(--wl-screen-height) - 34px), 700px);
    transform: translateY(-50%);
  }
  body[data-page="agents"] .wl-agents-hero .wl-art-coordinate { bottom: 10px; }

  body[data-page="agents"] .wl-worker-demo-chapter { padding-block: 24px; }
  body[data-page="agents"] .wl-principles-chapter .wl-agent-principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px 6%;
  }
  body[data-page="agents"] .wl-principles-chapter .wl-agent-principles article { padding-top: 20px; }
  body[data-page="agents"] .wl-principles-chapter .wl-agent-principles h3 {
    font-size: clamp(24px, 2.1vw, 28px);
    margin-block: 20px 14px;
  }
  body[data-page="agents"] .wl-principles-chapter .wl-agent-principles p { font-size: 15px; line-height: 1.75; }

  /* At 1366×768: 692 px below navigation, ~362 px of artwork, and a stable
     caption/control budget. At 1024×660 the artwork is still ~254 px tall. */
  body[data-page="agents"] .wl-learning-screen {
    --wl-learning-reserve: 330px;
    padding-block: 24px;
  }
  body[data-page="agents"] .wl-learning-screen .wl-exhibit-topline {
    min-height: 44px;
    padding: 0;
    align-items: center;
  }
  body[data-page="agents"] .wl-learning-screen .wl-exhibit-title { font-size: 12px; line-height: 1.5; }
  body[data-page="agents"] .wl-learning-screen .wl-motion-button { min-height: 44px; padding-block: 9px; }
  body[data-page="agents"] .wl-learning-screen .wl-learning-stage {
    height: clamp(220px, calc(var(--wl-screen-height) - var(--wl-learning-reserve)), 620px);
  }
  body[data-page="agents"] .wl-learning-screen .wl-stage-core-label {
    min-height: 34px;
    margin: 0;
    padding: 0 12px;
    gap: 6px;
    font-size: 11px;
    line-height: 18px;
  }
  body[data-page="agents"] .wl-learning-screen .wl-stage-core-label i { height: 10px; }
  body[data-page="agents"] .wl-learning-screen .wl-act-tabs { gap: 22px; min-height: 48px; }
  body[data-page="agents"] .wl-learning-screen .wl-act-tabs button {
    min-height: 47px;
    padding-block: 8px;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    text-align: center;
  }
  body[data-page="agents"] .wl-learning-screen .wl-exhibit-caption {
    min-height: 146px;
    padding: 14px 0 0;
    gap: 8%;
    align-items: start;
  }
  body[data-page="agents"] .wl-learning-screen .wl-exhibit-caption .eyebrow { margin-bottom: 10px; font-size: 9px; }
  body[data-page="agents"] .wl-learning-screen .wl-exhibit-caption h3 {
    font-size: clamp(29px, 2.8vw, 36px);
    line-height: 1.12;
    max-width: 440px;
  }
  body[data-page="agents"] .wl-learning-screen .wl-exhibit-caption p:not(.eyebrow) { font-size: 14px; line-height: 1.75; }
  body[data-page="agents"] .wl-learning-screen .wl-exhibit-caption > p { align-self: start; padding-top: 21px; }
  body[data-page="agents"] .wl-learning-support .wl-tuning { width: 100%; }
  body[data-page="agents"] .wl-learning-support .wl-learning-interpretation { margin-top: 38px; }

  body[data-page="agents"] .wl-comparison-screen { padding-block: 24px; }
  body[data-page="agents"] .wl-comparison-screen .wl-comparison-art {
    height: clamp(220px, calc(var(--wl-screen-height) - 330px), 560px);
    margin-top: 16px;
  }
  body[data-page="agents"] .wl-comparison-screen .wl-comparison-phases {
    min-height: 30px;
    font-size: 11px;
    line-height: 1.6;
  }
  body[data-page="agents"] .wl-comparison-screen .wl-comparison-copy {
    min-height: 130px;
    margin: 12px 0 0;
    align-items: start;
    gap: 8%;
  }
  body[data-page="agents"] .wl-comparison-screen .wl-comparison-copy h3 { font-size: clamp(30px, 3vw, 42px); line-height: 1.12; }
  body[data-page="agents"] .wl-comparison-screen .wl-comparison-copy p { font-size: 15px; line-height: 1.75; }
  body[data-page="agents"] .wl-comparison-screen .wl-comparison-note { padding-bottom: 0; font-size: 10px; line-height: 1.75; }
  body[data-page="agents"] .wl-agent-cta-chapter .wl-page-cta { padding-top: 50px; }
}

/* Compact viewports retain the same narrative and controls without a forced
   screen height, internal scrolling region, clipping, or mandatory snap. */
@media (max-width: 1023px), (max-height: 599px) {
  body[data-page="agents"] .wl-agent-chapter { min-block-size: 0; }
  body[data-page="agents"] .wl-learning-screen { padding-block: 32px 46px; }
  body[data-page="agents"] .wl-comparison-screen { padding-block: 28px 40px; }
  body[data-page="agents"] .wl-learning-support { padding-top: 38px; }
}
@media (max-width: 680px) {
  body[data-page="agents"] .wl-agent-chapter { padding-block: 42px; }
  body[data-page="agents"] .wl-chapter-intro { padding-top: 60px; padding-bottom: 22px; }
  body[data-page="agents"] .wl-worker-demo-chapter { padding-top: 28px; }
  body[data-page="agents"] .wl-learning-screen { padding-top: 24px; }
  body[data-page="agents"] .wl-learning-stage {
    height: clamp(280px, 48vh, 390px);
    height: clamp(280px, 48svh, 390px);
  }
  body[data-page="agents"] .wl-comparison-phases { font-size: 9px; gap: 12px; min-height: 44px; }
  body[data-page="agents"] .wl-comparison-copy { margin-top: 15px; }
  body[data-page="agents"] .wl-learning-support .wl-learning-interpretation { margin-top: 34px; }
}
@media print {
  body[data-page="agents"] .wl-agent-chapter { min-block-size: 0; padding-block: 28px; }
  body[data-page="agents"] .wl-learning-stage,
  body[data-page="agents"] .wl-comparison-art { height: 280px; }
}