/* Article-only teaching layouts. Shared navigation, footer, and controls are untouched. */
.lesson-page {
  --lesson-accent: #2057a5;
  --lesson-tint: #f1f6fd;
  --lesson-rule: #d7e3f0;
  color: #26364b;
  line-height: 1.78;
  min-width: 0;
  overflow-wrap: anywhere;
}
.lesson-page > p,
.lesson-page > ul,
.lesson-page > ol { max-width: 75ch; }
.lesson-page h2 {
  color: #17324f;
  font-size: clamp(1.28rem, 1.05rem + .7vw, 1.65rem);
  line-height: 1.3;
  margin-block: 2.3rem .8rem;
  scroll-margin-top: 7rem;
}
.lesson-page h3 {
  color: #243c57;
  font-size: 1.12rem;
  line-height: 1.4;
  margin-block: 1.5rem .6rem;
  scroll-margin-top: 7rem;
}
.lesson-page p { margin-block: .8rem 1rem; }
.lesson-page li + li { margin-top: .45rem; }
.lesson-page a:not([role="button"]) { text-decoration: underline; text-underline-offset: .2em; }
.lesson-page a:focus-visible,
.lesson-page summary:focus-visible { outline: 3px solid #2473bc; outline-offset: 4px; border-radius: 3px; }
.lesson-page .lesson-lead { font-size: 1.1rem; line-height: 1.75; color: #334b65; max-width: 66ch; }
.lesson-page .lesson-summary,
.lesson-page .lesson-step,
.lesson-page .lesson-checkpoint,
.lesson-page .lesson-result,
.lesson-page .lesson-warning,
.lesson-page .lesson-decision,
.lesson-page .lesson-reference,
.lesson-page .lesson-exercise {
  min-width: 0;
  max-width: 100%;
  padding: 1.15rem 1.3rem;
  margin-block: 1.5rem;
  border: 1px solid var(--lesson-rule);
  border-radius: .7rem;
  background: #fff;
}
.lesson-page .lesson-summary { background: var(--lesson-tint); border-left: 4px solid var(--lesson-accent); }
.lesson-page .lesson-checkpoint { background: #f0f8f6; border-color: #c5e0d8; border-left: 4px solid #2d7165; }
.lesson-page .lesson-result { background: #f4f8fc; border-color: #cfdfed; }
.lesson-page .lesson-warning { background: #fff8eb; border-color: #ead6ae; border-left: 4px solid #9a6b20; color: #574323; }
.lesson-page .lesson-decision { background: #f6f4fb; border-color: #dcd4ed; border-left: 4px solid #6b5593; }
.lesson-page .lesson-reference { border-radius: .25rem; border-top: 3px solid var(--lesson-accent); }
.lesson-page .lesson-exercise { border: 1px dashed #8197b0; background: #fafbfd; }
.lesson-page :is(.lesson-summary,.lesson-step,.lesson-checkpoint,.lesson-result,.lesson-warning,.lesson-decision,.lesson-reference,.lesson-exercise) > :first-child { margin-top: 0; }
.lesson-page :is(.lesson-summary,.lesson-step,.lesson-checkpoint,.lesson-result,.lesson-warning,.lesson-decision,.lesson-reference,.lesson-exercise) > :last-child { margin-bottom: 0; }
.lesson-page .lesson-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; align-items: start; margin-block: 1.5rem; }
.lesson-page .lesson-columns > * { min-width: 0; margin-block: 0; }
.lesson-page .lesson-steps { padding-left: 1.6rem; }
.lesson-page .lesson-steps > li { padding: .4rem 0 .9rem .4rem; }
.lesson-page .lesson-steps > li::marker { color: var(--lesson-accent); font-weight: 700; }
.lesson-page .lesson-table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; margin-block: 1.5rem; border: 1px solid var(--lesson-rule); border-radius: .45rem; }
.lesson-page .lesson-table-wrap table { margin: 0; width: 100%; }
.lesson-page table { border-collapse: collapse; }
.lesson-page caption { text-align: left; color: #476078; font-size: .94rem; padding: .65rem .8rem; }
.lesson-page th { text-align: left; color: #203f5b; background: #eff4fa; }
.lesson-page td,
.lesson-page th { padding: .7rem .8rem; border-bottom: 1px solid #e1e8f0; vertical-align: top; }
.lesson-page .lesson-caption { font-size: .92rem; color: #52657a; margin-top: .5rem; }
.lesson-page pre { max-width: 100%; min-width: 0; overflow-x: auto; tab-size: 4; }
.lesson-page pre code { font-size: .875rem; }
.lesson-page :not(pre) > code { display: inline-block; width: max-content; max-width: 100%; white-space: normal; vertical-align: baseline; }
.lesson-page .lesson-table-wrap :is(th,td) { overflow-wrap: normal; word-break: normal; }
.lesson-page img { max-width: 100%; height: auto; }
.lesson-page details { margin-block: 1.2rem; padding: .75rem 1rem; border: 1px solid #d9e3ed; border-radius: .45rem; }
.lesson-page summary { cursor: pointer; color: #234c77; font-weight: 600; }
.lesson-page .lesson-feedback { clear: both; border-top: 1px solid #d7e3ef; margin-top: 3rem; padding-top: 1.3rem; color: #4b6076; }
.lesson-page .lesson-feedback h2 { font-size: 1.05rem; color: #304c67; margin: 0 0 .5rem; border: 0; padding: 0; }
.lesson-page .lesson-feedback p { font-size: .95rem; margin-bottom: 0; max-width: 72ch; }
.lesson-page.lesson-format--lab { --lesson-accent: #276c64; --lesson-tint: #f1f8f5; --lesson-rule: #d0e2db; }
.lesson-page.lesson-format--reference h2:not(#tutorial-feedback-title) { padding-bottom: .55rem; border-bottom: 2px solid #d7e3ef; }
.lesson-page.lesson-format--troubleshooting { --lesson-accent: #946b30; --lesson-tint: #fff9ef; --lesson-rule: #e9ddc7; }
.lesson-page.lesson-format--troubleshooting .lesson-step { border-left: 4px solid #a17b43; border-radius: .2rem; }
.lesson-page.lesson-format--decision-guide { --lesson-accent: #69558a; --lesson-tint: #f6f3fa; --lesson-rule: #e1d9ec; }
.lesson-page.lesson-format--case-study > h2 { padding-left: .85rem; border-left: 3px solid #6585a7; }
.lesson-page.lesson-format--project { --lesson-accent: #316b84; --lesson-tint: #f0f7fa; --lesson-rule: #cde1e9; }
.lesson-page.lesson-format--concepts .lesson-lead { font-size: 1.16rem; max-width: 62ch; }
@media (max-width: 720px) {
  .lesson-page .lesson-columns { grid-template-columns: minmax(0, 1fr); }
  .lesson-page .lesson-table-wrap table { min-width: 32rem; }
  .lesson-page .gget-table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; margin-block: 1.5rem; }
  .lesson-page .gget-table-scroll::before { content: 'Scroll horizontally to read the full table'; display: block; padding: .6rem; color: #476078; font-size: .8rem; }
  .lesson-page .gget-table-scroll .gget-responsive-table { width: 35rem; min-width: 35rem; table-layout: fixed; margin: 0; }
  .lesson-page .gget-table-scroll col:nth-child(1) { width: 10rem; }
  .lesson-page .gget-table-scroll col:nth-child(2) { width: 11rem; }
  .lesson-page .gget-table-scroll col:nth-child(3) { width: 14rem; }
  .lesson-page .lesson-table-wrap::before { content: 'Scroll horizontally to read the full table'; display: block; padding: .6rem; color: #476078; font-size: .8rem; }
  .lesson-page .lesson-summary,
  .lesson-page .lesson-step,
  .lesson-page .lesson-checkpoint,
  .lesson-page .lesson-result,
  .lesson-page .lesson-warning,
  .lesson-page .lesson-decision,
  .lesson-page .lesson-reference,
  .lesson-page .lesson-exercise { padding: 1rem; border-radius: .45rem; }
  .lesson-page h2 { margin-top: 1.9rem; }
  .lesson-page .lesson-lead { font-size: 1.04rem; }
  .lesson-page td,
  .lesson-page th { padding: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lesson-page * { scroll-behavior: auto !important; }
}