:root {
  --program-lesson-green: #075719;
  --program-lesson-green-dark: #043b11;
  --program-lesson-green-soft: #eef6f0;
  --program-lesson-border: #d4e2d7;
  --program-lesson-muted: #68756c;
  --program-lesson-header-height: 68px;
  --program-lesson-header-gap: 20px;
  --program-lesson-sticky-top: calc(var(--program-lesson-header-height) + var(--program-lesson-header-gap));
  --program-lesson-scroll-offset: calc(var(--program-lesson-sticky-top) + 12px);
}

.program-lesson-page {
  --program-lesson-flow-gap: 1rem;
  --program-lesson-block-gap: 1.5rem;
  --program-lesson-card-gap: 1.5rem;
  --program-lesson-section-padding: clamp(1.4rem, 3vw, 2.5rem);
  background: #eef2f6;
}

.program-lesson-page main {
  min-height: 70vh;
}

.program-lesson-hero {
  overflow: hidden;
  color: #fff;
}

.program-lesson-breadcrumb {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-top: 1.25rem;
  color: rgba(255, 255, 255, .72);
}

.program-lesson-breadcrumb a {
  color: #fff;
}

.program-lesson-hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
  gap: 2rem;
  align-items: stretch;
  padding: 2.25rem 0 0;
}

.program-lesson-hero__copy {
  align-self: center;
  padding-bottom: 2.75rem;
}

.program-lesson-hero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.65rem);
  font-weight: 700;
  line-height: 1.08;
}

.program-lesson-hero p {
  max-width: 850px;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: 1.05rem;
  line-height: 1.6;
}

.program-lesson-hero__visual {
  position: relative;
  display: flex;
  min-height: 330px;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
}

.program-lesson-hero__number {
  position: absolute;
  right: 0;
  bottom: 2.15rem;
  z-index: 0;
  color: rgba(255, 255, 255, .12);
  font-size: clamp(7rem, 11vw, 10rem);
  font-weight: 700;
  line-height: .8;
  user-select: none;
}

.program-lesson-hero__visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(250px, 19vw);
  height: auto;
  margin-right: 3rem;
}

.program-lesson-container {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.program-lesson-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: var(--program-lesson-card-gap);
  align-items: start;
}

.program-lesson-article,
.program-lesson-content {
  display: grid;
  gap: var(--program-lesson-card-gap);
  align-content: start;
  min-width: 0;
}

.program-lesson-content > section,
.program-lesson-self-check,
.program-lesson-test-link {
  min-width: 0;
  overflow: hidden;
  padding: var(--program-lesson-section-padding);
  border: 1px solid rgba(11, 73, 27, .08);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .05);
  scroll-margin-top: var(--program-lesson-scroll-offset);
}

.program-lesson-content h2,
.program-lesson-self-check h2,
.program-lesson-test-link h2 {
  color: var(--program-lesson-green);
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
}

.program-lesson-content h3 {
  margin-top: 1.5rem;
  color: var(--program-lesson-green-dark);
  font-size: 1.2rem;
  font-weight: 700;
}

.program-lesson-content p,
.program-lesson-content li,
.program-lesson-self-check p,
.program-lesson-test-link p {
  color: #526158;
  line-height: 1.65;
}

.program-lesson-content ul,
.program-lesson-content ol {
  padding-left: 1.25rem;
}

.program-lesson-content li + li {
  margin-top: .45rem;
}

.program-lesson-content a[href]:not(.brand-button):not(.brand-light-button) {
  color: #08752d;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(8, 117, 45, .42);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  overflow-wrap: anywhere;
  transition: color .18s ease, text-decoration-color .18s ease;
}

.program-lesson-content a[href]:not(.brand-button):not(.brand-light-button)::before {
  display: inline-block;
  margin-right: .35em;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .78em;
  font-style: normal;
  line-height: 1;
  text-decoration: none;
  content: "\f0c1";
}

.program-lesson-content a[href^="https://"]:not(.brand-button):not(.brand-light-button)::before {
  content: "\f08e";
}

.program-lesson-content a[href]:not(.brand-button):not(.brand-light-button):hover {
  color: #0b491b;
  text-decoration-color: currentColor;
}

.program-lesson-content a[href]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: .15rem;
}

.program-lesson-callout,
.program-lesson-source-note,
.program-lesson-sources {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 calc(0px - var(--program-lesson-section-padding));
  padding: var(--program-lesson-block-gap) var(--program-lesson-section-padding);
  border-top: 1px solid rgba(11, 73, 27, .1);
  border-bottom: 1px solid rgba(11, 73, 27, .1);
}

.program-lesson-callout--example {
  background: #e2ffe9;
}

.program-lesson-callout--remember {
  background: #0b491b;
}

.program-lesson-callout__body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.program-lesson-callout__watermark,
.program-lesson-source-note > i,
.program-lesson-sources__title > i {
  position: absolute;
  top: 50%;
  right: var(--program-lesson-section-padding);
  z-index: 0;
  color: #0b491b;
  opacity: .07;
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: 1;
  transform: translateY(-50%) rotate(-10deg);
  pointer-events: none;
  user-select: none;
}

/* Reuse the existing aria-hidden icons. Isolation keeps them above the panel
   background but behind its text, without adding markup to saved lessons. */
.program-lesson-source-note > i,
.program-lesson-sources__title > i {
  z-index: -1;
}

.program-lesson-callout__body > :last-child {
  margin-bottom: 0;
}

.program-lesson-callout--remember .program-lesson-callout__watermark {
  color: #25f35a;
  opacity: .12;
}

.program-lesson-content .program-lesson-callout--remember h3 {
  color: #25f35a;
}

.program-lesson-content .program-lesson-callout--remember p,
.program-lesson-content .program-lesson-callout--remember li {
  color: rgba(255, 255, 255, .9);
}

.program-lesson-content .program-lesson-callout--remember a[href]:not(.brand-button):not(.brand-light-button) {
  color: #a5ffb9;
  text-decoration-color: rgba(165, 255, 185, .6);
}

.program-lesson-content .program-lesson-callout--remember a[href]:not(.brand-button):not(.brand-light-button):hover {
  color: #fff;
  text-decoration-color: currentColor;
}

/* Imported lesson links already carry the brand color class; give their
   next-section actions the same shape as the lesson's test button. */
.program-lesson-content .program-lesson-callout--remember a.brand-light-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  max-width: 100%;
  min-height: 44px;
  padding: .8rem 1.1rem;
  border-radius: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.program-lesson-content .program-lesson-callout--remember a.brand-light-button > i {
  flex-shrink: 0;
}

.program-lesson-content .program-lesson-callout--remember a.brand-light-button:focus-visible {
  outline-color: #fff;
}

.program-lesson-sources {
  background: #f5f8f6;
}

.program-lesson-content .program-lesson-sources__title {
  /* The absolute icon is positioned against the full sources panel. */
  position: static;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .75rem;
  color: #0b491b;
  font-size: .82rem;
  font-weight: 700;
}

.program-lesson-content .program-lesson-sources__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.program-lesson-content .program-lesson-sources__list > li {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.program-lesson-content .program-lesson-sources__list a[href]:not(.brand-button):not(.brand-light-button) {
  display: flex;
  align-items: baseline;
  max-width: 100%;
  padding: .5rem .65rem;
  border: 1px solid rgba(11, 73, 27, .2);
  border-radius: .65rem;
  background: #fff;
  font-size: .82rem;
  line-height: 1.4;
  text-decoration: none;
}

.program-lesson-content .program-lesson-sources__list a[href]::before {
  flex: 0 0 auto;
}

.program-lesson-content .program-lesson-sources__list a[href]:not(.brand-button):not(.brand-light-button):hover {
  border-color: #0b491b;
  background: #e2ffe9;
}

.program-lesson-content .program-lesson-sources__note {
  margin: .75rem 0 0;
  font-size: .82rem;
}

.program-lesson-section-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .75rem;
  color: var(--program-lesson-green);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.program-lesson-outline {
  display: grid;
  gap: .75rem;
  margin-top: 1.25rem;
}

.program-lesson-outline__item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid var(--program-lesson-border);
  border-radius: .75rem;
  background: #fff;
}

.program-lesson-outline__item > i {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--program-lesson-green);
}

.program-lesson-outline__item strong {
  display: block;
  margin-bottom: .2rem;
  color: var(--program-lesson-green-dark);
}

.program-lesson-outline__item p {
  margin: 0;
  font-size: .92rem;
}

.program-lesson-source-note {
  display: block;
  background: #f5f8f6;
}

.program-lesson-source-note p {
  margin: 0;
  font-size: .92rem;
}

.program-lesson-sidebar {
  position: sticky;
  top: var(--program-lesson-sticky-top);
  z-index: 4;
}

.program-lesson-toc {
  overflow: hidden;
  border: 1px solid rgba(11, 73, 27, .12);
  background: #fff;
}

.program-lesson-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  color: var(--program-lesson-green);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.program-lesson-toc summary::-webkit-details-marker {
  display: none;
}

.program-lesson-toc__chevron {
  font-size: .8rem;
  transition: transform .2s ease;
}

.program-lesson-toc[open] .program-lesson-toc__chevron {
  transform: rotate(180deg);
}

.program-lesson-toc__nav {
  display: grid;
  gap: .2rem;
  padding: 0 .65rem .75rem;
  max-height: calc(100vh - var(--program-lesson-sticky-top) - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.program-lesson-toc__link {
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  gap: .55rem;
  align-items: center;
  min-height: 2.6rem;
  padding: .45rem .55rem;
  border-left: 3px solid transparent;
  border-radius: .4rem;
  color: #304b37;
  font-size: .89rem;
  line-height: 1.3;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.program-lesson-toc__link:hover,
.program-lesson-toc__link:focus,
.program-lesson-toc__link.is-active {
  border-left-color: var(--program-lesson-green);
  color: var(--program-lesson-green);
  background: var(--program-lesson-green-soft);
}

.program-lesson-toc__index {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 50%;
  color: var(--program-lesson-green);
  background: #e5f0e8;
  font-size: .72rem;
  font-weight: 700;
}

.program-lesson-toc__link--child {
  grid-template-columns: 1fr;
  min-height: auto;
  margin-left: 2.2rem;
  padding: .35rem .55rem;
  color: var(--program-lesson-muted);
  font-size: .82rem;
}

.program-lesson-check-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .8rem;
  padding: .5rem .8rem;
  border: 1px solid var(--program-lesson-green);
  border-radius: .65rem;
  color: var(--program-lesson-green);
  background: #fff;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
  transition: color .18s ease, background-color .18s ease;
}

.program-lesson-check-toggle:hover,
.program-lesson-check-toggle:focus-visible,
.program-lesson-check-toggle[aria-expanded="true"] {
  color: #fff;
  background: var(--program-lesson-green);
}

.program-lesson-check-toggle:focus-visible {
  outline: 3px solid rgba(11, 73, 27, .2);
  outline-offset: 2px;
}

.program-lesson-check-toggle i {
  font-size: .72rem;
  transition: transform .2s ease;
}

.program-lesson-check-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.program-lesson-check-answer {
  height: 0;
  overflow: hidden;
  transition: height .22s ease;
}

.program-lesson-check-answer__inner {
  margin-top: .85rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--program-lesson-green);
  border-radius: 0 .65rem .65rem 0;
  background: var(--program-lesson-green-soft);
}

.program-lesson-check-answer__inner p {
  margin: 0;
  font-size: .9rem;
}

.program-lesson-check-answer__inner a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .65rem;
  color: var(--program-lesson-green);
  font-size: .82rem;
  font-weight: 700;
}

.program-lesson-test-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.program-lesson-test-link--ready {
  background: #0b491b;
}

.program-lesson-test-link--ready,
.program-lesson-test-link--ready h2,
.program-lesson-test-link--ready p,
.program-lesson-test-link--ready .program-lesson-section-label {
  color: #fff;
}

.program-lesson-test-link__copy {
  min-width: 0;
}

/* One vertical rhythm for prose and larger teaching blocks. Keep horizontal
   callout margins intact so their backgrounds still reach the card edges. */
.program-lesson-content > section > *,
.program-lesson-content .program-lesson-callout__body > *,
.program-lesson-self-check > *,
.program-lesson-test-link__copy > * {
  margin-top: 0;
  margin-bottom: 0;
}

.program-lesson-content > section > * + *,
.program-lesson-content .program-lesson-callout__body > * + *,
.program-lesson-self-check > * + *,
.program-lesson-test-link__copy > * + * {
  margin-top: var(--program-lesson-flow-gap);
}

/* Older imported lessons contain MDB spacing utilities with !important. */
.program-lesson-content > section > .mt-3,
.program-lesson-content > section > .mt-4 {
  margin-top: var(--program-lesson-flow-gap) !important;
}

.program-lesson-content > section > h3,
.program-lesson-content > section > .program-lesson-callout,
.program-lesson-content > section > .program-lesson-callout + *,
.program-lesson-content > section > .program-lesson-sources,
.program-lesson-content > section > .program-lesson-sources + *,
.program-lesson-content > section > .program-lesson-source-note,
.program-lesson-content > section > .program-lesson-source-note + *,
.program-lesson-content > section > .program-lesson-outline,
.program-lesson-content > section > .program-lesson-figure,
.program-lesson-content > section > .program-lesson-figure + *,
.program-lesson-content > section > .program-lesson-figure-grid,
.program-lesson-content > section > .program-lesson-figure-grid + *,
.program-lesson-content > section > .program-lesson-term,
.program-lesson-content > section > .program-lesson-term + *,
.program-lesson-content > section > .program-sign-gallery,
.program-lesson-content > section > .program-sign-gallery + *,
.program-lesson-content > section > .program-sign-catalog,
.program-lesson-content > section > .program-sign-catalog + *,
.program-lesson-content > section > .program-marking-gallery,
.program-lesson-content > section > .program-marking-gallery + *,
.program-lesson-content > section > .program-marking-catalog,
.program-lesson-content > section > .program-marking-catalog + *,
.program-lesson-self-check > .program-lesson-outline {
  margin-top: var(--program-lesson-block-gap);
}

.program-lesson-content .program-lesson-figure {
  min-width: 0;
  margin-right: 0;
  margin-left: 0;
}

.program-lesson-content .program-lesson-callout__body > .program-lesson-figure {
  margin-top: var(--program-lesson-block-gap);
}

.program-lesson-figure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--program-lesson-block-gap);
  margin-top: var(--program-lesson-block-gap);
}

/* In lessons 7, 11 (overtaking), 12 and 13 scenes have several panels and small labels.
   Keep the full reading width; the separate sign/marking card grids are unchanged. */
.program-lesson-content > [data-learning-topic="7"] ~ section > .program-lesson-figure-grid,
.program-lesson-content > [data-learning-topic="11"] ~ section > .program-lesson-figure-grid,
.program-lesson-content > [data-learning-topic="12"] ~ section > .program-lesson-figure-grid,
.program-lesson-content > [data-learning-topic="13"] ~ section > .program-lesson-figure-grid {
  grid-template-columns: minmax(0, 1fr);
}

.program-lesson-figure-grid > .program-lesson-figure {
  margin: 0;
}

/* A single teaching scene must use the reading column instead of looking like
   a missing half of a two-card row. The same rule balances an odd final item. */
.program-lesson-figure-grid > .program-lesson-figure:only-child,
.program-lesson-figure-grid > .program-lesson-figure:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* A term is a teaching unit, not a table row: explanation and its own
   illustration stay together; on narrow screens the illustration follows it. */
.program-lesson-term {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--program-lesson-block-gap);
  scroll-margin-top: var(--program-lesson-scroll-offset);
}

.program-lesson-term__copy,
.program-lesson-term__media {
  min-width: 0;
}

.program-lesson-term__copy > *,
.program-lesson-term__media > figure {
  margin: 0;
}

.program-lesson-term__copy > * + *,
.program-lesson-term__media > * + * {
  margin-top: var(--program-lesson-flow-gap);
}

.program-lesson-content .program-lesson-term__copy > :first-child {
  margin-top: 0;
}

.program-lesson-content .program-lesson-term__copy h3 a[href]:not(.brand-button):not(.brand-light-button) {
  font-weight: inherit;
}

.program-lesson-content a.program-lesson-term__image-link[href]:not(.brand-button):not(.brand-light-button) {
  display: block;
  position: relative;
  border-radius: 1rem;
  text-decoration: none;
  cursor: zoom-in;
}

.program-lesson-content a.program-lesson-term__image-link[href]:not(.brand-button):not(.brand-light-button)::before {
  display: none;
}

.program-lesson-term__image-link img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: inherit;
}

.program-lesson-term__zoom {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  background: rgba(4, 59, 17, .88);
  pointer-events: none;
}

.program-lesson-term figcaption {
  margin-top: .65rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--program-lesson-muted);
}

/* Topic 6: compact visual sign families keep the lesson illustrative without
   turning its explanation into a long table. The complete group stays folded
   until the learner explicitly asks for it. */
.program-sign-gallery,
.program-sign-catalog {
  min-width: 0;
  margin-top: var(--program-lesson-block-gap);
}

.program-sign-gallery {
  padding: 1.1rem;
  border: 1px solid var(--program-lesson-border);
  border-radius: 1rem;
  background: #f4f8f5;
}

.program-lesson-content .program-sign-gallery__title {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  color: var(--program-lesson-green);
  font-weight: 800;
}

.program-sign-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  /* Match the tallest card in this gallery, without a fixed caption height. */
  grid-auto-rows: 1fr;
  gap: .85rem;
  align-items: stretch;
}

.program-sign-gallery--compact .program-sign-gallery__grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 205px));
  justify-content: start;
}

.program-sign-card {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d9e5dc;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(6, 69, 23, .04);
}

.program-lesson-content a.program-sign-card__image[href]:not(.brand-button):not(.brand-light-button) {
  position: relative;
  display: grid;
  flex: 0 0 148px;
  place-items: center;
  width: 100%;
  height: 148px;
  min-height: 148px;
  padding: .8rem;
  background: linear-gradient(145deg, #fff, #f7faf8);
  text-decoration: none;
  cursor: zoom-in;
}

.program-lesson-content a.program-sign-card__image[href]:not(.brand-button):not(.brand-light-button)::before,
.program-lesson-content a.program-sign-card__link[href]:not(.brand-button):not(.brand-light-button)::before {
  display: none;
}

.program-sign-card__image img {
  display: block;
  width: 100%;
  max-width: 122px;
  height: 122px;
  object-fit: contain;
}

.program-sign-card__image .program-lesson-term__zoom {
  width: 1.75rem;
  height: 1.75rem;
  font-size: .78rem;
}

.program-lesson-content a.program-sign-card__link[href]:not(.brand-button):not(.brand-light-button) {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: .5rem;
  height: auto;
  min-height: 4.8rem;
  padding: .72rem .78rem;
  border-top: 1px solid #e2eae4;
  color: var(--program-lesson-green);
  background: #fff;
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}

.program-sign-card__link i {
  flex: 0 0 auto;
  margin-top: .13rem;
  font-size: .72rem;
}

.program-sign-card__link strong {
  display: block;
  margin-bottom: .12rem;
  font-size: .76rem;
  letter-spacing: .025em;
}

.program-lesson-content a.program-sign-card__link[href]:not(.brand-button):not(.brand-light-button):hover,
.program-lesson-content a.program-sign-card__link[href]:not(.brand-button):not(.brand-light-button):focus {
  color: var(--program-lesson-green-dark);
  background: var(--program-lesson-green-soft);
}

.program-sign-catalog {
  overflow: hidden;
  border: 1px solid var(--program-lesson-border);
  border-radius: 1rem;
  background: #f4f8f5;
}

.program-sign-catalog > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  color: var(--program-lesson-green);
  background: #eef7f0;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.program-sign-catalog > summary::-webkit-details-marker {
  display: none;
}

.program-sign-catalog > summary span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.program-sign-catalog > summary strong {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 .45rem;
  border-radius: 999px;
  color: #fff;
  background: var(--program-lesson-green);
  font-size: .8rem;
}

.program-sign-catalog[open] > summary {
  border-bottom: 1px solid var(--program-lesson-border);
}

.program-sign-catalog__body {
  padding: 1.1rem;
}

.program-sign-catalog__body > p {
  margin: 0 0 1rem;
  color: var(--program-lesson-muted);
  font-size: .9rem;
}

/* Topic 7: road markings need wider cards than signs because line direction,
   spacing and surrounding surface are part of the visual explanation. */
.program-marking-gallery,
.program-marking-catalog {
  min-width: 0;
  margin-top: var(--program-lesson-block-gap);
}

.program-marking-gallery {
  padding: 1.1rem;
  border: 1px solid var(--program-lesson-border);
  border-radius: 1rem;
  background: #f4f8f5;
}

.program-lesson-content .program-marking-gallery__title {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  color: var(--program-lesson-green);
  font-weight: 800;
}

.program-marking-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  gap: .85rem;
  align-items: stretch;
}

/* Topics 7, 11 and 13: keep four-item comparisons together on a large screen.
   Full catalogs and galleries with another card count keep their own layout. */
@media (min-width: 1200px) {
  .program-lesson-content > [data-learning-topic="7"] ~ section > .program-marking-gallery > .program-marking-gallery__grid:has(> .program-marking-card:nth-child(4):last-child),
  .program-lesson-content > [data-learning-topic="11"] ~ section > .program-marking-gallery > .program-marking-gallery__grid:has(> .program-marking-card:nth-child(4):last-child),
  .program-lesson-content > [data-learning-topic="13"] ~ section > .program-marking-gallery > .program-marking-gallery__grid:has(> .program-marking-card:nth-child(4):last-child),
  .program-lesson-content > [data-learning-topic="11"] ~ section > .program-sign-gallery > .program-sign-gallery__grid:has(> .program-sign-card:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.program-marking-card {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d9e5dc;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(6, 69, 23, .04);
}

.program-lesson-content a.program-marking-card__image[href]:not(.brand-button):not(.brand-light-button) {
  position: relative;
  display: grid;
  flex: 0 0 176px;
  place-items: center;
  height: 176px;
  min-height: 176px;
  padding: .8rem;
  background: linear-gradient(145deg, #fff, #f7faf8);
  text-decoration: none;
  cursor: zoom-in;
}

.program-lesson-content a.program-marking-card__image[href]:not(.brand-button):not(.brand-light-button)::before,
.program-lesson-content a.program-marking-card__link[href]:not(.brand-button):not(.brand-light-button)::before {
  display: none;
}

.program-marking-card__image img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 135px;
  object-fit: contain;
}

.program-marking-card__image .program-lesson-term__zoom {
  width: 1.75rem;
  height: 1.75rem;
  font-size: .78rem;
}

.program-lesson-content a.program-marking-card__link[href]:not(.brand-button):not(.brand-light-button) {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: .5rem;
  height: auto;
  min-height: 4.8rem;
  padding: .72rem .78rem;
  border-top: 1px solid #e2eae4;
  color: var(--program-lesson-green);
  background: #fff;
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}

.program-marking-card__link i {
  flex: 0 0 auto;
  margin-top: .13rem;
  font-size: .72rem;
}

.program-marking-card__link strong {
  display: block;
  margin-bottom: .12rem;
  font-size: .76rem;
  letter-spacing: .025em;
}

@media (min-width: 640px) {
  .program-marking-gallery--single .program-marking-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .program-marking-gallery--single .program-marking-card {
    display: grid;
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
  }

  .program-lesson-content .program-marking-gallery--single a.program-marking-card__link[href]:not(.brand-button):not(.brand-light-button) {
    flex: 1 1 auto;
    align-items: center;
    height: auto;
    min-height: 100%;
    border-top: 0;
    border-left: 1px solid #e2eae4;
    font-size: .95rem;
  }
}

.program-lesson-content a.program-marking-card__link[href]:not(.brand-button):not(.brand-light-button):hover,
.program-lesson-content a.program-marking-card__link[href]:not(.brand-button):not(.brand-light-button):focus {
  color: var(--program-lesson-green-dark);
  background: var(--program-lesson-green-soft);
}

.program-marking-catalog {
  overflow: hidden;
  border: 1px solid var(--program-lesson-border);
  border-radius: 1rem;
  background: #f4f8f5;
}

.program-marking-catalog > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  color: var(--program-lesson-green);
  background: #eef7f0;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.program-marking-catalog > summary::-webkit-details-marker {
  display: none;
}

.program-marking-catalog > summary span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.program-marking-catalog > summary strong {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 .45rem;
  border-radius: 999px;
  color: #fff;
  background: var(--program-lesson-green);
  font-size: .8rem;
}

.program-marking-catalog[open] > summary {
  border-bottom: 1px solid var(--program-lesson-border);
}

.program-marking-catalog__body {
  padding: 1.1rem;
}

.program-marking-catalog__body > p {
  margin: 0 0 1rem;
  color: var(--program-lesson-muted);
  font-size: .9rem;
}

.program-lesson-action {
  margin-top: var(--program-lesson-block-gap);
}

.program-lesson-content > [data-learning-topic="7"] ~ section > .program-lesson-action {
  text-align: center;
}

.program-lesson-content .program-lesson-action a.brand-light-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 44px;
  padding: .8rem 1.1rem;
  border-radius: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.program-lesson-inline-check {
  min-width: 0;
}

.program-lesson-inline-check .program-lesson-check-answer__inner {
  padding: .85rem 0 0;
  border-top: 1px solid var(--program-lesson-border);
  border-left: 0;
  border-radius: 0;
  background: transparent;
}

.program-lesson-inline-check .program-lesson-check-answer__inner > p > strong:first-child {
  color: var(--program-lesson-green);
}

.program-lesson-inline-check .program-lesson-check-answer__inner > * {
  margin: 0;
}

.program-lesson-inline-check .program-lesson-check-answer__inner > * + * {
  margin-top: var(--program-lesson-flow-gap);
}

@media (min-width: 1200px) {
  .program-lesson-term:not(.program-lesson-term--wide) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.program-lesson-content > section > :first-child,
.program-lesson-content .program-lesson-callout__body > :first-child,
.program-lesson-self-check > :first-child,
.program-lesson-test-link__copy > :first-child {
  margin-top: 0;
}

/* Adjacent highlighted panels form a continuous band, with a single divider.
   Prose between panels still receives the normal teaching-block spacing. */
.program-lesson-content > section > :is(.program-lesson-callout, .program-lesson-source-note, .program-lesson-sources) + :is(.mt-3, .mt-4) {
  margin-top: var(--program-lesson-block-gap) !important;
}

.program-lesson-content > section > :is(.program-lesson-callout, .program-lesson-source-note, .program-lesson-sources) + :is(.program-lesson-callout, .program-lesson-source-note, .program-lesson-sources) {
  margin-top: 0;
  border-top: 0;
}

.program-lesson-content > section > :is(.program-lesson-callout, .program-lesson-source-note, .program-lesson-sources):first-child {
  margin-top: calc(0px - var(--program-lesson-section-padding));
  border-top: 0;
}

/* Full-width panels finish at the card edges without a white end strip. */
.program-lesson-content > section > :is(.program-lesson-callout, .program-lesson-source-note, .program-lesson-sources):last-child {
  margin-bottom: calc(0px - var(--program-lesson-section-padding));
  border-bottom: 0;
}

.program-lesson-test-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.program-lesson-test-meta span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: .65rem;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
}

.program-lesson-test-start {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .8rem 1.1rem;
  font-weight: 700;
  white-space: nowrap;
}

.program-lesson-disabled-action {
  flex: 0 0 auto;
  padding: .65rem 1rem;
  border: 1px solid #cbd4cd;
  border-radius: .65rem;
  color: #7a837d;
  background: #f1f3f1;
  font-size: .88rem;
  font-weight: 700;
}

.program-lesson-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--program-lesson-card-gap);
  overflow: hidden;
  border: 1px solid rgba(11, 73, 27, .08);
}

.program-lesson-pager__item {
  display: flex;
  gap: .85rem;
  align-items: center;
  min-height: 5.25rem;
  padding: 1rem 1.25rem;
  color: var(--program-lesson-green);
  background: #fff;
}

.program-lesson-pager__item + .program-lesson-pager__item {
  border-left: 1px solid #e4ebe6;
}

.program-lesson-pager__item:hover,
.program-lesson-pager__item:focus {
  color: var(--program-lesson-green-dark);
  background: var(--program-lesson-green-soft);
}

.program-lesson-pager__item span {
  display: grid;
}

.program-lesson-pager__item small {
  margin-bottom: .2rem;
  color: var(--program-lesson-muted);
}

.program-lesson-pager__item--next {
  justify-content: flex-end;
  text-align: right;
}

.program-lesson-pager__item.is-disabled {
  color: #89938c;
  background: #f8faf8;
}

@media (min-width: 992px) {
  .program-lesson-toc summary {
    cursor: default;
  }
}

@media (max-width: 991.98px) {
  .program-lesson-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .program-lesson-sidebar {
    order: -1;
  }

  .program-lesson-toc__nav {
    max-height: min(calc(100vh - var(--program-lesson-sticky-top) - 96px), 430px);
    overflow-y: auto;
  }
}

@media (max-width: 767.98px) {
  .program-lesson-page {
    --program-lesson-card-gap: 1rem;
  }

  .program-lesson-hero__content {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1.75rem 0 0;
  }

  .program-lesson-hero__copy {
    padding-bottom: 0;
  }

  .program-lesson-hero__visual {
    width: min(100%, 280px);
    min-height: 0;
    justify-self: center;
  }

  .program-lesson-hero__number {
    right: 0;
    bottom: 1.5rem;
    font-size: clamp(4.8rem, 19vw, 7rem);
  }

  .program-lesson-hero__visual img {
    width: min(155px, 40vw);
    margin-right: 0;
  }

  .program-lesson-hero h1 {
    font-size: clamp(1.85rem, 9vw, 2.55rem);
  }

  .program-lesson-container {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  .program-lesson-test-link {
    align-items: flex-start;
    flex-direction: column;
  }

  .program-lesson-test-start {
    width: 100%;
  }

  .program-lesson-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .program-lesson-pager__item + .program-lesson-pager__item {
    border-top: 1px solid #e4ebe6;
    border-left: 0;
  }

  .program-sign-gallery,
  .program-sign-catalog__body {
    padding: .8rem;
  }

  .program-sign-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }

  .program-sign-gallery--compact .program-sign-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .program-lesson-content a.program-sign-card__image[href]:not(.brand-button):not(.brand-light-button) {
    flex-basis: 112px;
    height: 112px;
    min-height: 112px;
    padding: .6rem;
  }

  .program-sign-card__image img {
    max-width: 98px;
    height: 98px;
  }

  .program-lesson-content a.program-sign-card__link[href]:not(.brand-button):not(.brand-light-button) {
    min-height: 4.8rem;
    padding: .62rem;
    font-size: .78rem;
  }

  .program-lesson-figure-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .program-marking-gallery,
  .program-marking-catalog__body {
    padding: .8rem;
  }

  .program-marking-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
  }

  .program-lesson-content a.program-marking-card__image[href]:not(.brand-button):not(.brand-light-button) {
    flex-basis: 148px;
    height: 148px;
    min-height: 148px;
    padding: .6rem;
  }

  .program-marking-card__image img {
    height: 118px;
  }

  .program-lesson-content .program-lesson-action a.brand-light-button {
    width: 100%;
  }
}

@media (max-width: 419.98px) {
  .program-lesson-hero__visual img {
    width: 125px;
  }
}

/* Topic 6 comparison tables: each sign is one image-and-number unit. */
.program-sign-table-wrap {
  container-type: inline-size;
}

.program-lesson-content .program-sign-table {
  width: 100%;
  table-layout: fixed;
}

.program-lesson-content .program-sign-table > :is(thead, tbody) > tr > :first-child {
  width: 13rem;
}

.program-lesson-content .program-sign-table > tbody > tr > td {
  padding: 1rem;
  vertical-align: top;
  line-height: 1.6;
}

.program-sign-table__items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .5rem;
}

.program-lesson-content .program-sign-table .request > a[href] {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow-wrap: normal;
}

.program-sign-table__items > .request {
  display: inline-flex;
  flex: 0 0 4.5rem;
}

.program-lesson-content .program-sign-table__items > .request > a[href] {
  flex-direction: column;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  min-height: 5.75rem;
  padding: .6rem .35rem;
  border: 1px solid var(--program-lesson-border);
  border-radius: .5rem;
  background: #fff;
  font-size: .875rem;
  line-height: 1.2;
}

.program-lesson-content .program-sign-table__items > .request > a[href]::before {
  content: none;
}

.program-sign-table__items > .request > a > img {
  order: -1;
  flex: none;
  width: 3.5rem;
  max-width: 100%;
  height: 3rem !important;
  padding: 0 !important;
  object-fit: contain;
}

.program-sign-table__items--combination {
  flex-direction: column;
  align-items: center;
  width: 4.5rem;
  gap: .25rem;
}

.program-sign-table__items--combination > .request {
  flex-basis: auto;
  width: 100%;
}

.program-sign-table__relation {
  color: var(--program-lesson-muted);
  font-size: .72rem;
  line-height: 1.4;
  text-align: center;
}

@container (max-width: 620px) {
  .program-lesson-content .program-sign-table,
  .program-lesson-content .program-sign-table > tbody {
    display: block;
  }

  .program-lesson-content .program-sign-table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .program-lesson-content .program-sign-table > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 1px solid var(--program-lesson-border);
  }

  .program-lesson-content .program-sign-table > tbody > tr > td {
    display: block;
    width: auto;
    border: 0;
    padding: .85rem .6rem;
  }

  .program-lesson-content .program-sign-table > tbody > tr > td + td {
    padding-top: 0;
  }
}

/* Topic 15: the 200px identification strip has a square transparent canvas.
   Limit its size and clip only the empty vertical margins, leaving zoom aside. */
.program-lesson-content > [data-learning-topic="15"] ~ section .program-lesson-figure > a.program-lesson-term__image-link[href="/images/pdr/8.14.webp"] {
  width: 244px;
  max-width: 100%;
  padding-right: 44px;
}

.program-lesson-content > [data-learning-topic="15"] ~ section .program-lesson-figure > a[href="/images/pdr/8.14.webp"] > img {
  aspect-ratio: 25 / 6;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.program-lesson-content > [data-learning-topic="15"] ~ section .program-lesson-figure > a[href="/images/pdr/8.14.webp"] > .program-lesson-term__zoom {
  top: 50%;
  right: 0;
  bottom: auto;
  transform: translateY(-50%);
}

/* Equipment-safety pictogram, separate from the native PDR image snippets. */
.program-lesson-article .program-lesson-safety-sign {
  display: block;
  width: 128px;
  max-width: 100%;
  height: auto;
  margin: .75rem 0;
}