/* Student Handout v1 — load after teaching.css and lesson-specific styles.
   Contract and examples: /teaching/handout-style.html.
   Opt in with body.teaching-document.lesson-handout[data-handout="v1"]; no week/course dependency. */
html:has(body.lesson-handout) { scroll-behavior: auto; }
body.teaching-document.lesson-handout[data-handout="v1"] {
  --handout-bg: #eceee9;
  --handout-paper: #eff1f3;
  --handout-surface: #e3e6e8;
  --handout-ink: #272727;
  --handout-muted: #696773;
  --handout-accent: #b84f35;
  --handout-accent-strong: #8e3928;
  --handout-accent-soft: #f2ddd4;
  --handout-line: rgba(39, 39, 39, .14);
  --handout-line-strong: rgba(39, 39, 39, .28);
  --handout-code: #171d1e;
  --handout-code-ink: #eaf0ec;
  --handout-section-gap: 72px;
  --handout-panel-gap: 28px;
  --handout-body-size: 15.5px;
  --handout-body-leading: 1.78;
  --paper: var(--handout-paper);
  --surface: var(--handout-surface);
  --ink: var(--handout-ink);
  --ink-strong: var(--handout-ink);
  --muted: var(--handout-muted);
  --line: var(--handout-line);
  --line-strong: var(--handout-line-strong);
  --accent: var(--handout-accent);
  --accent-ink: var(--handout-accent);
  --accent-strong: var(--handout-accent-strong);
  --accent-soft: var(--handout-accent-soft);
  --link: var(--handout-accent-strong);
  background: var(--handout-bg);
  color: var(--ink);
}
body.teaching-document.lesson-handout[data-handout="v1"] .hero .hero-inner {
  width: min(1280px, calc(100% - 56px));
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(44px, 6vw, 86px);
  padding: 64px 0;
  align-items: center;
}
body.teaching-document.lesson-handout[data-handout="v1"] .hero h1 {
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.08;
  font-weight: 770;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
body.teaching-document.lesson-handout[data-handout="v1"] .hero .hero-inner > * { min-width: 0; }
body.teaching-document.lesson-handout[data-handout="v1"] .hero .lead {
  max-width: 610px;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
}
body.teaching-document.lesson-handout[data-handout="v1"] .handout-meta { margin-top: 22px; color: var(--muted); font: 11.5px/1.55 var(--mono); }
body.teaching-document.lesson-handout[data-handout="v1"] main.layout {
  width: min(1180px, calc(100% - 48px));
  grid-template-columns: minmax(0, 1fr) 238px;
  gap: 48px;
  padding-block: 48px 92px;
}
body.teaching-document.lesson-handout[data-handout="v1"] .article {
  min-width: 0;
  padding: clamp(28px, 5vw, 60px);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(20, 29, 24, .07);
  counter-reset: none;
}
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-section {
  margin: var(--handout-section-gap) 0 0;
  padding: 31px 0 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
}
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
body.teaching-document.lesson-handout[data-handout="v1"] .article h2 {
  display: block;
  margin: 0 0 13px;
  padding: 0;
  border: 0;
  color: var(--ink-strong);
  font-size: 23px;
  font-weight: 770;
  line-height: 1.35;
  letter-spacing: -.025em;
  counter-increment: none;
}
body.teaching-document.lesson-handout[data-handout="v1"] .article h2::before { content: none; display: none; }
body.teaching-document.lesson-handout[data-handout="v1"] .article h3 { margin: 34px 0 12px; font-size: 19px; line-height: 1.4; }
body.teaching-document.lesson-handout[data-handout="v1"] .article h4 { margin: 24px 0 9px; font-size: 16px; line-height: 1.45; }
body.teaching-document.lesson-handout[data-handout="v1"] .article :is(p, li, td, th, summary, label) { word-break: keep-all; overflow-wrap: break-word; }
body.teaching-document.lesson-handout[data-handout="v1"] .article p { margin: 0 0 17px; font-size: var(--handout-body-size); line-height: var(--handout-body-leading); }
body.teaching-document.lesson-handout[data-handout="v1"] .article :is(ul, ol) { margin: 0 0 22px; padding-left: 22px; }
body.teaching-document.lesson-handout[data-handout="v1"] .article li { margin: 8px 0; font-size: 14.5px; line-height: var(--handout-body-leading); }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-section > header { margin-bottom: 30px; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-intro { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.78; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-emphasis { margin: 28px 0 36px; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent-strong); }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-emphasis p:first-child { font-size: 23px; font-weight: 700; line-height: 1.65; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-emphasis p:last-child { margin-bottom: 0; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-takeaway { margin: 28px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-strong); background: transparent; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-takeaway > strong { display: block; margin-bottom: 7px; color: var(--accent-ink); font-size: 13px; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-takeaway p { margin: 0; font-size: 14.5px; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .table-wrap { width: 100%; max-width: 100%; margin-block: var(--handout-panel-gap); border: 0; border-radius: 0; overflow-x: auto; }
body.teaching-document.lesson-handout[data-handout="v1"] .article table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }
body.teaching-document.lesson-handout[data-handout="v1"] .article caption { padding: 0 0 12px; text-align: left; color: var(--muted); font-size: 12px; line-height: 1.6; }
body.teaching-document.lesson-handout[data-handout="v1"] .article :is(th, td) { padding: 12px 14px; border: 1px solid var(--line); text-align: left; line-height: 1.7; }
body.teaching-document.lesson-handout[data-handout="v1"] .article th { background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 650; }
body.teaching-document.lesson-handout[data-handout="v1"] .article td { color: var(--muted); }
body.teaching-document.lesson-handout[data-handout="v1"] .article tbody tr { background: transparent; }
body.teaching-document.lesson-handout[data-handout="v1"] .article tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 55%, transparent); }
body.teaching-document.lesson-handout[data-handout="v1"] .article code { padding: .12em .34em; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--ink); font-size: .88em; overflow-wrap: anywhere; }
body.teaching-document.lesson-handout[data-handout="v1"] :is(.handout-code, .handout-prompt) { margin: var(--handout-panel-gap) 0; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; box-shadow: none; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-code { --panel-bg: var(--handout-code); --panel-ink: var(--handout-code-ink); --panel-rule: rgba(234, 240, 236, .22); }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-prompt { --panel-bg: var(--paper); --panel-ink: var(--ink); --panel-rule: var(--line-strong); }
body.teaching-document.lesson-handout[data-handout="v1"] :is(.handout-code, .handout-prompt) { background: var(--panel-bg); color: var(--panel-ink); }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 20px; border-bottom: 1px solid var(--panel-rule); background: transparent; color: inherit; font-size: 12px; font-weight: 650; line-height: 1.6; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-code-bar button { flex-shrink: 0; min-height: 44px; min-width: 52px; padding: 8px 12px; border: 1px solid var(--panel-rule); border-radius: 3px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
body.teaching-document.lesson-handout[data-handout="v1"] .article :is(.handout-code, .handout-prompt) pre { margin: 0; padding: 24px; border: 0; border-radius: 0; background: transparent; color: inherit; font: 13px/1.72 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-prompt pre { font: 14px/1.9 var(--sans); }
body.teaching-document.lesson-handout[data-handout="v1"] .article :is(.handout-code, .handout-prompt) pre code { display: block; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; white-space: inherit; overflow-wrap: inherit; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-copy-status { margin: 0; padding: 0 20px; color: inherit; font-size: 12px; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-copy-status:not(:empty) { padding-block: 12px; border-top: 1px solid var(--panel-rule); }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-output { margin: 20px 0; padding: 16px 20px; border-left: 2px solid var(--line-strong); background: var(--surface); }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-output > figcaption { margin-bottom: 10px; color: var(--muted); font-size: 12px; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-output pre { margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font: 13px/1.72 var(--mono); white-space: pre-wrap; }
body.teaching-document.lesson-handout[data-handout="v1"] details.handout-check { margin: 28px 0; padding: 0; border: 0; border-block: 1px solid var(--line); border-radius: 0; background: transparent; }
body.teaching-document.lesson-handout[data-handout="v1"] details.handout-check > summary { min-height: 48px; margin: 0; padding: 16px 40px 16px 0; color: var(--ink); font-size: 15px; font-weight: 650; }
body.teaching-document.lesson-handout[data-handout="v1"] details.handout-check > .details-motion-content { padding: 0 0 18px; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-flow { margin: 28px 0; padding: 18px 0; border-block: 1px solid var(--line-strong); }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-flow figcaption { margin-bottom: 18px; font-size: 13px; font-weight: 650; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-flow ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-flow li { margin: 0; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-flow :is(strong, span) { display: block; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-flow strong { font-size: 15px; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-flow span { margin-top: 8px; color: var(--muted); font-size: 13px; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-actions a { padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--paper); font-size: 14px; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc { position: sticky; top: 82px; max-height: calc(100dvh - 108px); margin: 0; padding: 4px 8px 4px 20px; border: 0; border-left: 1px solid var(--line-strong); border-radius: 0; background: transparent; box-shadow: none; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc > summary { display: none; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc .handout-toc-groups { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; padding: 0; list-style: none; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc li { margin: 0; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 650; line-height: 1.5; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc-groups ol { display: grid; gap: 2px; margin: 0 0 0 3px; padding: 0 0 0 12px; border-left: 1px solid var(--line); list-style: none; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc a { position: relative; display: block; margin: 0; padding: 5px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: 12px; font-weight: 450; line-height: 1.5; text-decoration: none; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc a[aria-current="location"] { background: transparent; box-shadow: none; color: var(--accent-ink); font-weight: 700; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc a[aria-current="location"]::before { content: ""; position: absolute; left: -13px; top: 6px; bottom: 6px; width: 2px; background: currentColor; }
body.teaching-document.lesson-handout[data-handout="v1"] :is(h2, h3)[id] { scroll-margin-top: 92px; }
body.teaching-document.lesson-handout[data-handout="v1"] :is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 4px; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-code :is(button, [tabindex]):focus-visible { outline-color: var(--handout-code-ink); outline-offset: -5px; }
body.teaching-document.lesson-handout[data-handout="v1"] .article.handout-project { width: min(840px, calc(100% - 48px)); margin: 54px auto 90px; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-project h1 { font-size: clamp(30px, 4vw, 43px); line-height: 1.35; }
body.teaching-document.lesson-handout[data-handout="v1"] .handout-project h2 { margin-top: 36px; }
/* Existing handouts retain their lesson-specific diagrams and controls. */
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-document-lead { margin: 0 0 24px; font-size: 19px; font-weight: 650; line-height: 1.65; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-note { margin: 24px 0; padding: 16px 0; border: 0; border-block: 1px solid var(--line); border-radius: 0; background: transparent; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-note .callout-title { margin-bottom: 10px; color: var(--accent-ink); font-size: 13px; font-weight: 650; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .worksheet { margin: 28px 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .worksheet > .handout-code { margin-top: 12px; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-output pre code { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; white-space: inherit; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .depth-takeaway { border: 0; border-top: 1px solid var(--line-strong); background: transparent; padding: 16px 0 0; }
body.teaching-document.lesson-handout[data-handout="v1"] .article .session-outline-title { margin: 24px 0 12px; font-size: 14px; font-weight: 650; }
body.teaching-document.lesson-handout[data-handout="v1"] .article img { max-width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc a:hover { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc a[aria-current="location"]:hover { color: var(--accent-ink); }
}
@media (prefers-color-scheme: dark) {
  body.teaching-document.lesson-handout[data-handout="v1"] { --handout-bg: #1d2320; --handout-paper: #252b29; --handout-surface: #303734; --handout-ink: #eaf0ec; --handout-muted: #b1b9b4; --handout-accent: #ef8f6e; --handout-accent-strong: #ef8f6e; --handout-accent-soft: #49372f; --handout-line: rgba(236, 240, 235, .16); --handout-line-strong: rgba(236, 240, 235, .3); }
}
@media (max-width: 980px) {
  body.teaching-document.lesson-handout[data-handout="v1"] .hero .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px; }
  body.teaching-document.lesson-handout[data-handout="v1"] main.layout { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc { position: static; order: -1; max-height: none; padding: 0; border-left: 0; border-block: 1px solid var(--line); overflow: visible; }
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc > summary { display: block; position: relative; width: auto; height: auto; min-height: 48px; margin: 0; padding: 14px 40px 14px 0; overflow: visible; clip: auto; white-space: normal; color: var(--muted); }
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc > :is(.details-motion-content, nav) { max-height: min(54dvh, 360px); padding: 6px 12px 18px; overflow: auto; }
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc a { min-height: 44px; padding-block: 12px; font-size: 13px; }
  body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-flow ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body.teaching-document.lesson-handout[data-handout="v1"] { --handout-section-gap: 48px; --handout-panel-gap: 24px; }
  body.teaching-document.lesson-handout[data-handout="v1"] :is(main.layout, .hero .hero-inner) { width: calc(100% - 32px); }
  body.teaching-document.lesson-handout[data-handout="v1"] .article { padding: 28px 20px; }
  body.teaching-document.lesson-handout[data-handout="v1"] .article h2 { font-size: 21px; }
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-emphasis { padding-left: 16px; }
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-emphasis p:first-child { font-size: 21px; }
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-code-bar { padding: 10px 14px; gap: 12px; }
  body.teaching-document.lesson-handout[data-handout="v1"] .article :is(.handout-code, .handout-prompt) pre { padding: 18px 14px; }
  body.teaching-document.lesson-handout[data-handout="v1"] .article .handout-code pre { font-size: 12px; }
  body.teaching-document.lesson-handout[data-handout="v1"] .article :is(th, td) { padding: 10px; }
}
@media print {
  body.teaching-document.lesson-handout[data-handout="v1"] { --handout-bg: #fff; --handout-paper: #fff; --handout-surface: #f5f5f5; --handout-ink: #222; --handout-muted: #444; --handout-accent: #333; --handout-accent-strong: #333; --handout-line: #ccc; --handout-line-strong: #999; background: #fff; }
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-toc,
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-code-bar button,
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-copy-status { display: none; }
  body.teaching-document.lesson-handout[data-handout="v1"] main.layout { display: block; width: 100%; padding: 0; }
  body.teaching-document.lesson-handout[data-handout="v1"] .article { padding: 0; border: 0; box-shadow: none; }
  body.teaching-document.lesson-handout[data-handout="v1"] :is(.handout-code, .handout-prompt) { --panel-bg: #fff; --panel-ink: #222; --panel-rule: #999; break-inside: avoid; }
  body.teaching-document.lesson-handout[data-handout="v1"] .handout-check > .details-motion-content { display: block; height: auto; opacity: 1; }
}