/* PHAMO lesson - junior field notebook + AR expedition */
.lesson-page {
  --lesson-ink: #20364b;
  --lesson-sky: #dff5fb;
  --lesson-paper: #fffdf5;
  --lesson-coral: #f26e64;
  --lesson-mango: #ffd45a;
  --lesson-leaf: #3aae87;
  --lesson-violet: #806bd0;
  --lesson-line: #c9e4ea;
  --lesson-shadow: 0 16px 42px rgba(38, 88, 109, .12);
  position: relative;
  padding-bottom: 112px;
  overflow: clip;
}

.lesson-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 4% 14%, rgba(255, 212, 90, .24), transparent 20rem),
    radial-gradient(circle at 96% 48%, rgba(121, 215, 242, .2), transparent 26rem),
    #f7fcfd;
}

.lesson-page h1,
.lesson-page h2,
.lesson-page h3 {
  font-family: var(--font-display);
}

.lesson-page button,
.lesson-page input,
.lesson-page select,
.lesson-page textarea {
  font: inherit;
}

.lesson-page [hidden] {
  display: none !important;
}

.lesson-hero {
  position: relative;
  width: min(1320px, calc(100% - 32px));
  min-height: 690px;
  margin: 24px auto 0;
  padding: clamp(44px, 6vw, 86px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .62fr);
  align-items: center;
  gap: clamp(40px, 8vw, 110px);
  overflow: hidden;
  color: var(--lesson-ink);
  background:
    linear-gradient(90deg, rgba(235, 250, 253, .98) 0%, rgba(235, 250, 253, .9) 42%, rgba(235, 250, 253, .22) 67%, rgba(235, 250, 253, .04) 100%),
    url('../assets/images/phamo-kids-hero-2026.webp') 68% center / cover no-repeat;
  border: 5px solid #fff;
  border-radius: 36px;
  box-shadow: 0 26px 74px rgba(32, 78, 97, .16);
  isolation: isolate;
}

.lesson-hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  pointer-events: none;
  border: 2px dashed rgba(32, 54, 75, .13);
  border-radius: 23px;
}

.lesson-hero::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: 34%;
  top: -80px;
  z-index: -1;
  border: 26px solid rgba(255, 212, 90, .28);
  border-radius: 50%;
}

.lesson-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.lesson-labels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.lesson-labels span {
  padding: 6px 11px;
  color: #476373;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(32, 54, 75, .13);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(32, 54, 75, .08);
  font-size: 11px;
  font-weight: 700;
}

.lesson-kicker {
  margin: 0 0 13px;
  color: #d4514f;
  font-size: 13px;
  font-weight: 700;
}

.lesson-hero h1 {
  margin: 0;
  max-width: 720px;
  color: var(--lesson-ink);
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.06;
}

.lesson-hero h1 em {
  position: relative;
  color: var(--lesson-coral);
  font-style: normal;
  white-space: nowrap;
}

.lesson-hero h1 em::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.06em;
  left: 0;
  height: 8px;
  opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='8' viewBox='0 0 190 8'%3E%3Cpath d='M2 5.5c43-5 80 2 119-2 26-3 49 0 67-1' fill='none' stroke='%23ffd45a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.lesson-lead {
  max-width: 620px;
  margin: 28px 0 34px;
  color: #476373;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.8;
}

.lesson-hero-actions,
.mission-actions,
.worksheet-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lesson-button {
  min-height: 48px;
  padding: 11px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--lesson-ink);
  background: transparent;
  border: 2px solid var(--lesson-ink);
  border-radius: 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.lesson-button:hover {
  color: var(--lesson-ink);
  transform: translateY(-2px);
}

.lesson-button--primary {
  background: var(--lesson-coral);
  box-shadow: 0 5px 0 var(--lesson-ink);
}

.lesson-button--primary:hover {
  background: #ff817a;
  box-shadow: 0 7px 0 var(--lesson-ink);
}

.lesson-button--paper {
  background: var(--lesson-paper);
  box-shadow: 0 5px 0 rgba(32, 54, 75, .16);
}

.lesson-button--quiet {
  background: #e6f7fa;
  border-color: #9dcfda;
}

.lesson-button--quiet:hover { background: #d7f1f5; }

.lesson-brief {
  position: relative;
  z-index: 2;
  margin-top: 130px;
  padding: 34px 30px 30px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(104, 164, 178, .12) 32px),
    var(--lesson-paper);
  border: 1px solid rgba(32, 54, 75, .13);
  border-radius: 9px;
  box-shadow: 11px 13px 0 rgba(32, 54, 75, .12);
  transform: rotate(1.4deg);
}

.lesson-brief-pin {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 28px;
  height: 28px;
  background: var(--lesson-coral);
  border: 5px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  box-shadow: 0 4px 7px rgba(32, 54, 75, .2);
  transform: translateX(-50%);
}

.lesson-brief > p {
  margin: 0 0 7px;
  color: #667f8b;
  font-size: 11px;
  font-weight: 700;
}

.lesson-brief > strong {
  display: block;
  margin-bottom: 23px;
  color: var(--lesson-ink);
  font-family: var(--font-display);
  font-size: 25px;
}

.lesson-brief ul {
  display: grid;
  gap: 15px;
  list-style: none;
}

.lesson-brief li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 11px;
  align-items: center;
  color: #4c6674;
  font-size: 13px;
  line-height: 1.55;
}

.lesson-brief li span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--lesson-ink);
  border-radius: 50%;
  font-weight: 700;
}

.lesson-brief li:nth-child(2) span { background: var(--lesson-leaf); }
.lesson-brief li:nth-child(3) span { background: var(--lesson-violet); }

.lesson-overview,
.lesson-section {
  width: min(1216px, calc(100% - 40px));
  margin-inline: auto;
}

.lesson-overview {
  margin-top: -36px;
  padding: 50px clamp(24px, 5vw, 58px) 38px;
  position: relative;
  z-index: 4;
  background: var(--lesson-paper);
  border: 4px solid #fff;
  border-radius: 26px;
  box-shadow: var(--lesson-shadow);
}

.lesson-section { padding-block: 100px; }

.lesson-section-heading {
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .7fr);
  gap: 70px;
  align-items: end;
}

.lesson-section-kicker {
  display: block;
  width: fit-content;
  margin-bottom: 12px;
  padding: 5px 11px;
  color: var(--lesson-ink);
  background: var(--lesson-mango);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.lesson-section-heading h2 {
  margin: 0;
  color: var(--lesson-ink);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.lesson-section-heading > p {
  margin: 0;
  color: #617a89;
  font-size: 15px;
  line-height: 1.8;
}

.lesson-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.lesson-timeline::before {
  content: "";
  position: absolute;
  top: 32px;
  right: 10%;
  left: 10%;
  border-top: 3px dashed #e9a78f;
}

.lesson-timeline li {
  position: relative;
  z-index: 1;
  min-height: 132px;
  padding: 16px 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  background: #eaf8fb;
  border: 2px solid #d0ebf0;
  border-radius: 17px;
}

.lesson-timeline li:nth-child(2) { background: #fff4c8; border-color: #f3dfa0; }
.lesson-timeline li:nth-child(3) { background: #e8f6e8; border-color: #cbe4ce; }
.lesson-timeline li:nth-child(4) { background: #f0ecff; border-color: #d8cef8; }
.lesson-timeline li:nth-child(5) { background: #ffecea; border-color: #f4cfca; }
.lesson-timeline li:nth-child(6) { background: #eaf8fb; border-color: #d0ebf0; }

.lesson-timeline li > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--lesson-ink);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 0 rgba(32, 54, 75, .16);
  font-size: 14px;
  font-weight: 700;
}

.lesson-timeline strong { margin-top: auto; color: var(--lesson-ink); font-size: 13px; line-height: 1.45; }
.lesson-timeline small { color: #738993; font-size: 9px; }

.curriculum-board {
  margin-top: 18px;
  overflow: hidden;
  background: #fff;
  border: 2px solid #d9e9ec;
  border-radius: 17px;
}

.curriculum-codes {
  padding: 13px 17px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  background: var(--lesson-ink);
}

.curriculum-codes span {
  padding: 6px 9px;
  color: rgba(255,255,255,.84);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
}

.learning-outcomes {
  padding: 17px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.learning-outcomes section {
  padding: 15px;
  background: #f3fafb;
  border-radius: 10px;
}

.learning-outcomes section:nth-child(2) { background: #eff9f4; }
.learning-outcomes section:nth-child(3) { background: #fff6d9; }
.learning-outcomes b { color: var(--lesson-ink); font-size: 10px; }
.learning-outcomes p { margin: 6px 0 0; color: #657d89; font-size: 9px; line-height: 1.65; }

.phase-heading {
  margin-bottom: 38px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.phase-number {
  flex: 0 0 auto;
  padding: 8px 13px;
  color: #fff;
  background: var(--lesson-ink);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  transform: rotate(-2deg);
}

.phase-heading p {
  margin: 0 0 4px;
  color: var(--lesson-coral);
  font-size: 12px;
  font-weight: 700;
}

.phase-heading h2 {
  margin: 0;
  color: var(--lesson-ink);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 600;
}

.warmup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  gap: 22px;
}

.question-postcard {
  position: relative;
  min-height: 330px;
  padding: clamp(34px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(rgba(255, 253, 245, .92), rgba(255, 253, 245, .92)),
    url('../assets/images/phamo-kids-map-2026.webp') center / cover;
  border: 3px solid #fff;
  border-radius: 24px;
  box-shadow: var(--lesson-shadow);
}

.postcard-tape {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 112px;
  height: 28px;
  background: rgba(255, 212, 90, .8);
  transform: translateX(-50%) rotate(-2deg);
}

.question-postcard > p {
  color: #6c828d;
  font-size: 11px;
  font-weight: 700;
}

.question-postcard blockquote {
  max-width: 680px;
  margin: 14px 0 26px;
  color: var(--lesson-ink);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.52;
}

.question-postcard small { color: #6a7f8b; }

.warmup-actions {
  display: grid;
  gap: 14px;
}

.warmup-actions article {
  padding: 25px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 6px 16px;
  align-items: start;
  background: #fff;
  border: 2px solid var(--lesson-line);
  border-radius: 20px;
  box-shadow: 0 7px 0 rgba(68, 139, 158, .09);
}

.warmup-actions article:nth-child(2) { border-color: #efdda1; }

.warmup-icon {
  grid-row: 1 / 4;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--lesson-ink);
  background: var(--lesson-mango);
  border-radius: 15px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
}

.warmup-actions article:nth-child(2) .warmup-icon { background: var(--lesson-sky); }
.warmup-actions strong { color: var(--lesson-ink); font-size: 15px; }
.warmup-actions p { margin: 3px 0 12px; color: #718590; font-size: 12px; }

.lesson-text-button {
  width: fit-content;
  padding: 0 0 2px;
  color: var(--lesson-ink);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--lesson-coral);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.activity-result {
  margin-top: 8px;
  color: #718590;
  font-size: 11px;
}

.activity-result.is-done { color: #277c62; font-weight: 700; }

.clue-cards {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.clue-cards article {
  padding: 25px;
  background: var(--lesson-paper);
  border: 2px solid #e5edf0;
  border-top: 7px solid #79d7f2;
  border-radius: 19px;
}

.clue-cards article:nth-child(2) { border-top-color: var(--lesson-mango); }
.clue-cards article:nth-child(3) { border-top-color: var(--lesson-coral); }
.clue-cards span { color: #6e8793; font-size: 10px; font-weight: 700; }
.clue-cards h3 { margin: 14px 0 10px; color: var(--lesson-ink); font-size: 20px; font-weight: 600; }
.clue-cards p { color: #627987; font-size: 13px; line-height: 1.7; }

.knowledge-section {
  padding-top: 84px;
}

.historian-rule {
  margin: -12px 0 30px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  align-items: center;
  color: #fff;
  background: var(--lesson-ink);
  border: 4px solid #fff;
  border-radius: 20px;
  box-shadow: 0 9px 0 rgba(32, 54, 75, .12);
}

.historian-rule-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: var(--lesson-ink);
  background: var(--lesson-mango);
  border: 3px solid rgba(255,255,255,.78);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  transform: rotate(-5deg);
}

.historian-rule strong {
  display: block;
  margin-bottom: 4px;
  color: var(--lesson-mango);
  font-size: 14px;
}

.historian-rule p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.75;
}

.knowledge-files {
  display: grid;
  gap: 24px;
}

.knowledge-file {
  --file-accent: #79d7f2;
  position: relative;
  overflow: hidden;
  background: var(--lesson-paper);
  border: 4px solid #fff;
  border-radius: 7px 26px 26px 26px;
  box-shadow: 12px 13px 0 rgba(32, 54, 75, .08), var(--lesson-shadow);
}

.knowledge-file--stone { --file-accent: var(--lesson-mango); }
.knowledge-file--network { --file-accent: #b6a9eb; }
.knowledge-file--community { --file-accent: #8ed8b8; }
.knowledge-file--ar { --file-accent: #ffaaa3; }

.knowledge-file > header {
  min-height: 116px;
  padding: 26px clamp(26px, 5vw, 48px);
  display: flex;
  align-items: center;
  gap: 22px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--file-accent) 24%, white), rgba(255,255,255,.55)),
    repeating-linear-gradient(-45deg, transparent 0 8px, rgba(32,54,75,.025) 8px 10px);
  border-bottom: 2px dashed color-mix(in srgb, var(--file-accent) 55%, #9fb6bd);
}

.file-number {
  flex: 0 0 auto;
  padding: 9px 12px;
  color: var(--lesson-ink);
  background: var(--file-accent);
  border: 2px solid #fff;
  border-radius: 10px 10px 4px 10px;
  box-shadow: 0 4px 0 rgba(32,54,75,.12);
  font-size: 10px;
  font-weight: 700;
  transform: rotate(-2deg);
}

.knowledge-file header p {
  margin: 0 0 4px;
  color: #627b88;
  font-size: 10px;
  font-weight: 700;
}

.knowledge-file header h3 {
  margin: 0;
  color: var(--lesson-ink);
  font-size: clamp(25px, 3vw, 37px);
  font-weight: 600;
  line-height: 1.35;
}

.knowledge-body {
  padding: clamp(28px, 5vw, 50px);
}

.knowledge-body > p {
  max-width: 980px;
  margin: 0 0 28px;
  color: #536f7e;
  font-size: 14px;
  line-height: 1.9;
}

.knowledge-body > p b { color: var(--lesson-ink); }

.time-ribbon {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.time-ribbon::before {
  content: "";
  position: absolute;
  top: 28px;
  right: 8%;
  left: 8%;
  border-top: 3px dotted #8ebac4;
}

.time-ribbon > div {
  position: relative;
  padding: 52px 19px 20px;
  background: #eff9fb;
  border: 1px solid #d5e9ed;
  border-radius: 16px;
}

.time-ribbon > div::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 20px;
  width: 17px;
  height: 17px;
  background: var(--lesson-coral);
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #8ebac4;
}

.time-ribbon span,
.ar-routine span {
  color: #d4514f;
  font-size: 9px;
  font-weight: 700;
}

.time-ribbon b {
  display: block;
  margin: 7px 0 8px;
  color: var(--lesson-ink);
  font-size: 13px;
  line-height: 1.55;
}

.time-ribbon small {
  color: #6f8490;
  font-size: 10px;
  line-height: 1.6;
}

.place-evidence-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.place-evidence-grid section {
  padding: 17px;
  background: #fff;
  border: 1px solid #dce8eb;
  border-left: 5px solid var(--file-accent);
  border-radius: 10px;
}

.place-evidence-grid b {
  color: var(--lesson-ink);
  font-size: 11px;
}

.place-evidence-grid p {
  margin: 6px 0 0;
  color: #667e8a;
  font-size: 10px;
  line-height: 1.65;
}

.quick-check {
  margin-top: 22px;
  color: var(--lesson-ink);
  background: color-mix(in srgb, var(--file-accent) 17%, white);
  border: 2px solid color-mix(in srgb, var(--file-accent) 48%, white);
  border-radius: 13px;
}

.quick-check summary {
  padding: 16px 18px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.quick-check p {
  margin: 0;
  padding: 0 18px 18px;
  color: #536f7e;
  font-size: 11px;
  line-height: 1.75;
}

.architecture-dictionary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.architecture-dictionary > div {
  padding: 17px 18px;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 13px;
  background: #fff9df;
  border: 1px solid #eadca1;
  border-radius: 12px;
}

.architecture-dictionary dt {
  color: var(--lesson-ink);
  font-size: 11px;
  font-weight: 700;
}

.architecture-dictionary dd {
  margin: 0;
  color: #667d88;
  font-size: 10px;
  line-height: 1.65;
}

.evidence-lab {
  margin-top: 20px;
  padding: 19px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 13px;
  align-items: center;
  background: #f3f9fa;
  border: 2px dashed #b9d7dd;
  border-radius: 14px;
}

.evidence-lab > div {
  min-height: 95px;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
}

.evidence-lab span {
  color: #53717e;
  font-size: 9px;
  font-weight: 700;
}

.evidence-lab p {
  margin: 7px 0 0;
  color: var(--lesson-ink);
  font-size: 11px;
  line-height: 1.6;
}

.evidence-lab > b { color: var(--lesson-coral); font-size: 19px; }

.evidence-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.evidence-types section {
  min-height: 190px;
  padding: 20px;
  background: #f5f2ff;
  border: 1px solid #ded6f6;
  border-radius: 15px;
}

.evidence-types span {
  width: 28px;
  height: 28px;
  margin-bottom: 15px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--lesson-violet);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

.evidence-types b { color: var(--lesson-ink); font-size: 13px; }

.evidence-types p {
  margin: 8px 0 0;
  color: #667e8a;
  font-size: 10px;
  line-height: 1.7;
}

.word-care,
.ar-limit {
  margin-top: 18px;
  padding: 20px 22px;
  color: #fff;
  background: var(--lesson-ink);
  border-radius: 14px;
}

.word-care strong,
.ar-limit strong {
  color: var(--lesson-mango);
  font-size: 12px;
}

.word-care p,
.ar-limit p {
  margin: 6px 0 0;
  color: rgba(255,255,255,.76);
  font-size: 11px;
  line-height: 1.75;
}

.knowledge-body--split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: 24px;
}

.knowledge-body--split > div > p {
  margin: 0 0 24px;
  color: #536f7e;
  font-size: 14px;
  line-height: 1.9;
}

.knowledge-body h4 {
  margin: 0 0 13px;
  color: var(--lesson-ink);
  font-family: var(--font-display);
  font-size: 20px;
}

.care-list {
  display: grid;
  gap: 8px;
  list-style: none;
}

.care-list li {
  position: relative;
  padding: 12px 14px 12px 42px;
  color: #587381;
  background: #eff9f4;
  border: 1px solid #d2eadf;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.65;
}

.care-list li::before {
  content: "✓";
  position: absolute;
  top: 12px;
  left: 14px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--lesson-leaf);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
}

.community-promise {
  min-height: 310px;
  padding: 29px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(39,121,95,.95), rgba(58,174,135,.82)),
    url('../assets/images/phamo-kids-map-2026.webp') center / cover;
  border: 5px solid #fff;
  border-radius: 19px;
  box-shadow: 0 8px 0 rgba(32,54,75,.1);
  transform: rotate(1deg);
}

.community-promise span { color: var(--lesson-mango); font-size: 43px; }
.community-promise strong { margin: 16px 0 8px; font-family: var(--font-display); font-size: 24px; }
.community-promise p { margin: 0; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.8; }
.knowledge-body--split .quick-check { grid-column: 1 / -1; margin-top: 0; }

.ar-routine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  list-style: none;
  counter-reset: ar-step;
}

.ar-routine li {
  position: relative;
  min-height: 190px;
  padding: 24px 20px;
  overflow: hidden;
  background: #fff1ef;
  border: 1px solid #f1d0cc;
  border-radius: 17px;
  counter-increment: ar-step;
}

.ar-routine li::after {
  content: counter(ar-step, decimal-leading-zero);
  position: absolute;
  right: 8px;
  bottom: -16px;
  color: rgba(242,110,100,.12);
  font-family: var(--font-display);
  font-size: 75px;
  font-weight: 700;
}

.ar-routine span { display: block; margin-bottom: 10px; }
.ar-routine b { color: var(--lesson-ink); font-family: var(--font-display); font-size: 21px; }
.ar-routine p { position: relative; z-index: 1; margin: 10px 0 0; color: #667e8a; font-size: 10px; line-height: 1.7; }

.teacher-guide {
  width: min(1280px, calc(100% - 32px));
  margin-bottom: 100px;
  padding: clamp(42px, 6vw, 74px);
  background:
    linear-gradient(rgba(232, 244, 246, .94), rgba(232, 244, 246, .94)),
    url('../assets/images/phamo-kids-map-2026.webp') center / cover;
  border: 5px solid #fff;
  border-radius: 32px;
  box-shadow: var(--lesson-shadow);
}

.teacher-guide-heading {
  margin-bottom: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .7fr);
  gap: 60px;
  align-items: end;
}

.teacher-guide-heading h2 {
  margin: 0;
  color: var(--lesson-ink);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 600;
  line-height: 1.3;
}

.teacher-guide-heading > p {
  margin: 0;
  color: #5c7784;
  font-size: 13px;
  line-height: 1.8;
}

.teacher-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.teacher-card {
  padding: clamp(25px, 4vw, 38px);
  background: var(--lesson-paper);
  border: 2px solid #d4e7ea;
  border-radius: 20px;
  box-shadow: 0 7px 0 rgba(32,54,75,.07);
}

.teacher-card--wide { grid-column: 1 / -1; }
.teacher-card--support { grid-column: 1 / -1; background: #f4f0ff; border-color: #ddd4f8; }
.teacher-card-label { color: var(--lesson-coral); font-size: 9px; font-weight: 700; }

.teacher-card h3,
.source-dossier h3 {
  margin: 7px 0 20px;
  color: var(--lesson-ink);
  font-size: 24px;
  font-weight: 600;
}

.teacher-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  list-style: none;
}

.teacher-checklist li {
  position: relative;
  padding: 15px 15px 15px 43px;
  color: #587380;
  background: #f4fafb;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.7;
}

.teacher-checklist li::before {
  content: "□";
  position: absolute;
  top: 12px;
  left: 16px;
  color: var(--lesson-leaf);
  font-size: 18px;
  font-weight: 700;
}

.teacher-questions {
  display: grid;
  gap: 8px;
  list-style-position: inside;
}

.teacher-questions li {
  padding: 11px 13px;
  color: #536f7e;
  background: #eef8fa;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.6;
}

.misconception-list {
  display: grid;
  gap: 9px;
}

.misconception-list > div {
  padding: 13px 15px;
  background: #fff4cf;
  border-radius: 9px;
}

.misconception-list dt { color: #9d4b45; font-size: 11px; font-weight: 700; }
.misconception-list dd { margin: 4px 0 0; color: #667d88; font-size: 10px; line-height: 1.65; }

.support-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.support-levels section {
  padding: 19px;
  background: rgba(255,255,255,.72);
  border: 1px solid #ddd6f2;
  border-radius: 11px;
}

.support-levels b { color: var(--lesson-violet); font-size: 11px; }
.support-levels p { margin: 8px 0 0; color: #5f7784; font-size: 10px; line-height: 1.75; }

.evidence-table-wrap {
  overflow-x: auto;
  border: 1px solid #d6e7ea;
  border-radius: 12px;
}

.evidence-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: #58727f;
  background: #fff;
  font-size: 10px;
  line-height: 1.65;
}

.evidence-table th,
.evidence-table td {
  padding: 13px 15px;
  border-bottom: 1px solid #e0ecee;
  text-align: left;
  vertical-align: top;
}

.evidence-table thead th { color: var(--lesson-ink); background: #e8f5f7; font-size: 10px; }
.evidence-table tbody th { color: #fff; background: var(--lesson-ink); font-family: var(--font-display); font-size: 15px; text-align: center; }
.evidence-table tbody tr:last-child th,
.evidence-table tbody tr:last-child td { border-bottom: 0; }

.answer-guide {
  margin-top: 18px;
  color: var(--lesson-ink);
  background: var(--lesson-paper);
  border: 2px solid #d1e5e9;
  border-radius: 15px;
}

.answer-guide summary { padding: 18px 21px; cursor: pointer; font-size: 12px; font-weight: 700; }
.answer-guide > div { padding: 0 21px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.answer-guide p { margin: 0; padding: 15px; color: #5d7682; background: #f3f9fa; border-radius: 9px; font-size: 10px; line-height: 1.7; }
.answer-guide b { color: var(--lesson-ink); }

.source-dossier {
  margin-top: 22px;
  padding: clamp(25px, 4vw, 40px);
  display: grid;
  grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr);
  gap: 30px;
  color: #fff;
  background: var(--lesson-ink);
  border-radius: 18px;
}

.source-dossier > div > span { color: var(--lesson-mango); font-size: 9px; font-weight: 700; }
.source-dossier h3 { margin-bottom: 8px; color: #fff; }
.source-dossier > div > p { margin: 0; color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.7; }
.source-dossier ul { display: grid; gap: 7px; list-style: none; }

.source-dossier a {
  padding: 11px 13px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.5;
}

.source-dossier a:hover { color: var(--lesson-mango); background: rgba(255,255,255,.1); }
.source-note { grid-column: 1 / -1; margin: -12px 0 0; padding-top: 15px; color: rgba(255,255,255,.57); border-top: 1px dashed rgba(255,255,255,.16); font-size: 9px; line-height: 1.65; }

.lesson-missions {
  width: 100%;
  padding-inline: max(20px, calc((100% - 1216px) / 2));
  background:
    linear-gradient(rgba(230, 247, 250, .88), rgba(230, 247, 250, .88)),
    url('../assets/images/phamo-kids-map-2026.webp') center / cover fixed;
  border-block: 1px solid #d7ebef;
}

.lesson-missions .lesson-section-heading,
.mission-route { width: min(1216px, 100%); margin-inline: auto; }

.mission-route {
  position: relative;
  display: grid;
  gap: 26px;
}

.mission-route::before {
  content: "";
  position: absolute;
  top: 70px;
  bottom: 70px;
  left: 50%;
  border-left: 4px dashed rgba(242, 110, 100, .5);
}

.mission-card {
  position: relative;
  z-index: 1;
  min-height: 390px;
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  background: var(--lesson-paper);
  border: 5px solid #fff;
  border-radius: 27px;
  box-shadow: var(--lesson-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.mission-card:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); }
.mission-card:nth-child(even) .mission-image { order: 2; }
.mission-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(38, 88, 109, .16); }

.mission-card.is-complete {
  box-shadow: 0 0 0 4px rgba(58, 174, 135, .22), var(--lesson-shadow);
}

.mission-image {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background: var(--lesson-sky);
}

.mission-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(32, 54, 75, .02), transparent 60%, rgba(32, 54, 75, .18));
}

.mission-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.mission-card:hover .mission-image img { transform: scale(1.025); }

.mission-number,
.mission-time {
  position: absolute;
  z-index: 2;
  top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lesson-ink);
  background: rgba(255, 253, 245, .94);
  border: 2px solid #fff;
  box-shadow: 0 4px 0 rgba(32, 54, 75, .12);
  backdrop-filter: blur(8px);
}

.mission-number {
  left: 18px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.mission-time {
  right: 18px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.mission-copy {
  padding: clamp(32px, 5vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mission-eyebrow {
  margin-bottom: 10px;
  color: var(--lesson-coral);
  font-size: 11px;
  font-weight: 700;
}

.mission-copy h3 {
  margin: 0 0 16px;
  color: var(--lesson-ink);
  font-size: clamp(27px, 3.2vw, 41px);
  font-weight: 600;
  line-height: 1.28;
}

.mission-copy > p {
  margin: 0;
  color: #607885;
  font-size: 14px;
  line-height: 1.8;
}

.mission-prompt {
  margin: 22px 0 25px;
  padding: 13px 15px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  color: #4e6876;
  background: #eef9fb;
  border-left: 4px solid #79d7f2;
  border-radius: 0 12px 12px 0;
  font-size: 12px;
  line-height: 1.6;
}

.mission-prompt span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--lesson-violet);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
}

.mission-actions { margin-top: auto; }
.mission-actions .lesson-button { min-height: 44px; padding: 9px 14px; font-size: 12px; }

.mission-stamp {
  min-height: 44px;
  margin-left: auto;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #55717e;
  background: transparent;
  border: 2px dashed #9ab6bd;
  border-radius: 12px;
  cursor: pointer;
  font-size: 11px;
}

.mission-stamp span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #7a9099;
  border: 2px solid #9ab6bd;
  border-radius: 50%;
}

.mission-stamp[aria-pressed="true"] {
  color: #1f6f59;
  background: #e5f7ef;
  border-color: var(--lesson-leaf);
}

.mission-stamp[aria-pressed="true"] span {
  color: #fff;
  background: var(--lesson-leaf);
  border-color: var(--lesson-leaf);
}

.worksheet-section { padding-block: 108px; }

.worksheet-shell {
  position: relative;
  padding: clamp(30px, 6vw, 72px);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 68px, rgba(242, 110, 100, .18) 69px, rgba(242, 110, 100, .18) 71px, transparent 72px),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(88, 160, 180, .13) 40px),
    var(--lesson-paper);
  border: 5px solid #fff;
  border-radius: 28px 8px 28px 8px;
  box-shadow: 14px 16px 0 rgba(32, 54, 75, .1), var(--lesson-shadow);
}

.worksheet-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  bottom: 0;
  width: 17px;
  background: radial-gradient(circle, #d2e3e7 0 4px, transparent 5px) center 15px / 17px 42px repeat-y;
}

.worksheet-heading {
  margin-bottom: 44px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-start;
}

.worksheet-heading > div:first-child > span {
  color: var(--lesson-coral);
  font-size: 12px;
  font-weight: 700;
}

.worksheet-heading h2 {
  margin: 6px 0 8px;
  color: var(--lesson-ink);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 600;
}

.worksheet-heading p { color: #657e8a; font-size: 13px; }

.worksheet-mark {
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  padding: 14px;
  display: grid;
  place-content: center;
  color: var(--lesson-coral);
  border: 4px double var(--lesson-coral);
  border-radius: 50%;
  text-align: center;
  font-size: 8px;
  letter-spacing: .08em;
  line-height: 1.2;
  transform: rotate(7deg);
}

.worksheet-mark strong { font-size: 12px; }

.worksheet-meta {
  display: grid;
  grid-template-columns: 1fr .7fr 1.25fr;
  gap: 14px;
}

.worksheet-meta label,
.worksheet-field {
  color: #496573;
  font-size: 12px;
  font-weight: 700;
}

.worksheet-meta input,
.worksheet-meta select,
.worksheet-field textarea {
  width: 100%;
  margin-top: 7px;
  color: var(--lesson-ink);
  background: rgba(255, 255, 255, .78);
  border: 1px solid #bfd8df;
  border-radius: 10px;
}

.worksheet-meta input,
.worksheet-meta select { min-height: 46px; padding: 10px 12px; }

.worksheet-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.worksheet-field {
  min-width: 0;
  padding: 22px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid #d8e7e9;
  border-radius: 15px;
}

.worksheet-field--wide { grid-column: 1 / -1; }
.worksheet-field > span { display: block; }
.worksheet-field b { color: var(--lesson-coral); }

.worksheet-field textarea {
  min-height: 118px;
  padding: 13px;
  resize: vertical;
  font-weight: 400;
  line-height: 1.75;
}

.impression-field textarea { min-height: 90px; }

.architecture-field legend {
  padding: 0 4px;
  color: #496573;
  font-weight: 700;
}

.architecture-options {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.architecture-options label { position: relative; cursor: pointer; }
.architecture-options input { position: absolute; opacity: 0; pointer-events: none; }

.architecture-options span {
  min-height: 42px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  color: #5b7480;
  background: #f3fafb;
  border: 2px solid #d5e7eb;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.architecture-options input:focus-visible + span { outline: 3px solid #ff9b54; outline-offset: 2px; }
.architecture-options input:checked + span { color: #1f6f59; background: #e4f7ee; border-color: var(--lesson-leaf); }
.architecture-options input:checked + span::before { content: "✓"; margin-right: 7px; font-weight: 800; }

.worksheet-actions {
  justify-content: flex-end;
  margin-top: 25px;
}

.save-status {
  margin-right: auto;
  color: #718792;
  font-size: 11px;
}

.save-status.is-saved { color: #24765f; font-weight: 700; }

.lesson-wrapup {
  width: min(1280px, calc(100% - 32px));
  margin-bottom: 34px;
  padding: clamp(42px, 6vw, 76px);
  color: #fff;
  background:
    linear-gradient(120deg, rgba(32, 54, 75, .98), rgba(53, 94, 108, .92)),
    url('../assets/images/phamo-kids-map-2026.webp') center / cover;
  border: 5px solid #fff;
  border-radius: 32px;
  box-shadow: 0 22px 62px rgba(25, 59, 74, .2);
}

.phase-heading--dark .phase-number { color: var(--lesson-ink); background: var(--lesson-mango); }
.phase-heading--dark p { color: #8fe0dc; }
.phase-heading--dark h2 { color: #fff; }

.wrapup-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 15px;
}

.wrapup-grid article {
  min-height: 340px;
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 21px;
}

.presentation-card { background: rgba(128, 107, 208, .28) !important; }
.reflection-card { background: rgba(58, 174, 135, .18) !important; }
.posttest-card { background: rgba(242, 110, 100, .18) !important; }

.presentation-label {
  color: var(--lesson-mango);
  font-size: 10px;
  font-weight: 700;
}

.presentation-timer {
  margin: 28px 0 16px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(54px, 6vw, 78px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.presentation-timer.is-finished { color: var(--lesson-mango); }

.wrapup-grid p {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 1.7;
}

.presentation-card > div:last-child { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.wrapup-grid .lesson-button--quiet { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.35); }
.reflection-card label { margin: 26px 0 12px; color: #fff; font-family: var(--font-display); font-size: 21px; line-height: 1.55; }

.reflection-card textarea {
  width: 100%;
  min-height: 112px;
  margin-bottom: 16px;
  padding: 13px;
  color: var(--lesson-ink);
  background: rgba(255, 255, 255, .94);
  border: 0;
  border-radius: 12px;
  resize: vertical;
}

.posttest-card > strong {
  margin: 29px 0 9px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
}

.posttest-card .activity-result { margin-top: 15px; color: rgba(255,255,255,.68); }
.posttest-card .activity-result.is-done { color: #b6f3dc; }

.assessment-section { padding-top: 80px; }

.score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.score-grid article {
  min-height: 190px;
  padding: 27px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 7px 15px;
  align-content: center;
  background: #eaf8fb;
  border: 3px solid #fff;
  border-radius: 20px;
  box-shadow: 0 7px 0 rgba(49, 126, 148, .09);
}

.score-grid article:nth-child(2) { background: #e7f6e9; }
.score-grid article:nth-child(3) { background: #fff2c6; }

.score-grid article > span {
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--lesson-ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 21px;
}

.score-grid article:nth-child(2) > span { background: var(--lesson-leaf); }
.score-grid article:nth-child(3) > span { background: var(--lesson-coral); }
.score-grid strong { color: var(--lesson-ink); font-size: 18px; }
.score-grid p { grid-column: 2; color: #617986; font-size: 12px; line-height: 1.6; }

.rubric-details {
  margin-top: 20px;
  background: var(--lesson-paper);
  border: 2px solid #dcecef;
  border-radius: 16px;
}

.rubric-details summary {
  padding: 18px 21px;
  color: var(--lesson-ink);
  cursor: pointer;
  font-weight: 700;
}

.rubric-grid {
  padding: 3px 21px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.rubric-grid p {
  padding: 15px;
  color: #617986;
  background: #f5fafb;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.65;
}

.rubric-grid b { display: block; margin-bottom: 4px; color: var(--lesson-ink); }

.lesson-finish {
  width: min(1216px, calc(100% - 40px));
  min-height: 480px;
  margin: 0 auto 40px;
  padding: clamp(50px, 8vw, 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    linear-gradient(rgba(255, 253, 245, .88), rgba(255, 253, 245, .9)),
    url('../assets/images/phamo-kids-map-2026.webp') center / cover;
  border: 5px solid #fff;
  border-radius: 31px;
  box-shadow: var(--lesson-shadow);
}

.finish-kicker { color: var(--lesson-coral); font-size: 12px; font-weight: 700; }

.lesson-finish h2 {
  margin: 13px 0 18px;
  color: var(--lesson-ink);
  font-size: clamp(38px, 5vw, 61px);
  font-weight: 600;
  line-height: 1.22;
}

.lesson-finish > p { max-width: 560px; color: #637c89; }

.finish-stamps {
  margin: 34px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.finish-stamp {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #9db1b8;
  background: rgba(255,255,255,.82);
  border: 2px dashed #b8c8ce;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  transform: rotate(var(--stamp-rotate, 0deg));
}

.finish-stamp.is-complete {
  color: #fff;
  background: var(--lesson-leaf);
  border: 4px double #fff;
  box-shadow: 0 5px 0 rgba(32, 54, 75, .14);
}

.lesson-reset {
  color: #69808c;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #9fb4bc;
  cursor: pointer;
  font-size: 11px;
}

.lesson-progress {
  position: fixed;
  right: 24px;
  bottom: 22px;
  left: auto;
  z-index: 900;
  width: min(440px, calc(100% - 48px));
  min-height: 62px;
  margin-inline: auto;
  padding: 12px 14px 12px 17px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  color: #fff;
  background: rgba(32, 54, 75, .96);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 19px;
  box-shadow: 0 18px 54px rgba(12, 39, 49, .25);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .2s ease, transform .2s ease;
}

.lesson-progress.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lesson-progress-copy { min-width: 105px; line-height: 1.25; }
.lesson-progress-copy span { display: block; color: rgba(255,255,255,.58); font-size: 9px; }
.lesson-progress-copy strong { font-size: 12px; }

.lesson-progress-track {
  height: 9px;
  overflow: hidden;
  background: rgba(255,255,255,.15);
  border-radius: 999px;
}

.lesson-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--lesson-mango), var(--lesson-coral));
  border-radius: inherit;
  transition: width .35s ease;
}

.lesson-progress > button {
  padding: 8px 11px;
  color: var(--lesson-ink);
  background: var(--lesson-mango);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.lesson-test-dialog {
  width: min(820px, calc(100% - 28px));
  max-height: min(880px, calc(100vh - 28px));
  padding: 0;
  color: var(--lesson-ink);
  background: var(--lesson-paper);
  border: 0;
  border-radius: 24px;
  box-shadow: 0 30px 100px rgba(8, 32, 42, .32);
}

.lesson-test-dialog::backdrop { background: rgba(12, 38, 48, .76); backdrop-filter: blur(9px); }

.test-dialog-shell {
  max-height: min(880px, calc(100vh - 28px));
  overflow-y: auto;
}

.test-dialog-header {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 24px 28px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: rgba(255, 253, 245, .96);
  border-bottom: 1px solid #e3ecee;
  backdrop-filter: blur(10px);
}

.test-dialog-header span { color: var(--lesson-coral); font-size: 10px; font-weight: 700; }
.test-dialog-header h2 { margin: 3px 0 0; color: var(--lesson-ink); font-size: 25px; font-weight: 600; }

.test-close {
  width: 38px;
  height: 38px;
  color: var(--lesson-ink);
  background: #e8f5f7;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
}

.test-progress { position: sticky; top: 81px; z-index: 3; height: 5px; background: #e4eef0; }
.test-progress span { display: block; width: 0; height: 100%; background: var(--lesson-coral); transition: width .2s; }
.test-question-list { padding: 25px 28px; display: grid; gap: 15px; }

.test-question {
  padding: 22px;
  background: #fff;
  border: 2px solid #deebed;
  border-radius: 16px;
}

.test-question legend { margin-bottom: 13px; color: var(--lesson-ink); font-weight: 700; line-height: 1.6; }
.test-question legend span { margin-right: 5px; color: var(--lesson-coral); }
.test-options { display: grid; gap: 7px; }
.test-options label { position: relative; cursor: pointer; }
.test-options input { position: absolute; opacity: 0; }

.test-options span {
  padding: 10px 12px;
  display: block;
  color: #5a7380;
  background: #f4fafb;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 13px;
}

.test-options input:checked + span { color: var(--lesson-ink); background: #fff3bd; border-color: #edcf5e; }
.test-options input:focus-visible + span { outline: 3px solid #ff9b54; outline-offset: 2px; }
.test-options span.is-correct { color: #1f6f59; background: #e3f7ed; border-color: var(--lesson-leaf); }
.test-options span.is-wrong { color: #a23f42; background: #ffe9e7; border-color: var(--lesson-coral); }

.test-explanation {
  margin-top: 10px;
  padding: 10px 12px;
  color: #5e7580;
  background: #edf7f9;
  border-radius: 9px;
  font-size: 11px;
}

.test-result {
  margin: 0 28px 22px;
  padding: 20px;
  color: var(--lesson-ink);
  background: #fff2bd;
  border: 2px solid #ebcf61;
  border-radius: 14px;
  text-align: center;
}

.test-result strong { display: block; font-family: var(--font-display); font-size: 30px; }
.test-result p { margin-top: 4px; color: #617783; font-size: 12px; }

.test-dialog-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: 18px 28px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: rgba(255, 253, 245, .96);
  border-top: 1px solid #e3ecee;
  backdrop-filter: blur(10px);
}

.lesson-toast {
  position: fixed;
  left: 50%;
  bottom: 108px;
  z-index: 1100;
  max-width: calc(100% - 36px);
  padding: 11px 16px;
  color: #fff;
  background: var(--lesson-ink);
  border-radius: 11px;
  box-shadow: 0 12px 32px rgba(12, 38, 48, .22);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .2s ease;
}

.lesson-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 980px) {
  .lesson-hero { grid-template-columns: 1fr; min-height: 760px; background-position: 66% center; }
  .lesson-hero-copy { max-width: 580px; }
  .lesson-brief { width: min(420px, 100%); margin: 20px 0 0; transform: rotate(.5deg); }
  .lesson-section-heading { grid-template-columns: 1fr; gap: 20px; }
  .lesson-timeline { grid-template-columns: repeat(3, 1fr); }
  .lesson-timeline::before { display: none; }
  .warmup-grid { grid-template-columns: 1fr; }
  .place-evidence-grid { grid-template-columns: 1fr 1fr; }
  .architecture-dictionary > div { grid-template-columns: 110px 1fr; }
  .evidence-types,
  .ar-routine { grid-template-columns: 1fr 1fr; }
  .teacher-guide-heading { grid-template-columns: 1fr; gap: 18px; }
  .lesson-progress { right: 16px; }
  .lesson-progress > button { display: none; }
  .lesson-progress { grid-template-columns: auto 1fr; }
  .mission-card,
  .mission-card:nth-child(even) { grid-template-columns: 1fr 1.1fr; }
  .mission-card:nth-child(even) .mission-image { order: 0; }
  .wrapup-grid { grid-template-columns: 1fr 1fr; }
  .presentation-card { grid-column: 1 / -1; min-height: 300px !important; }
}

@media (max-width: 720px) {
  .lesson-page { padding-bottom: 94px; }
  .lesson-hero {
    width: calc(100% - 20px);
    min-height: 820px;
    margin-top: 10px;
    padding: 40px 23px 54px;
    align-content: end;
    background-position: 70% center;
    border-radius: 24px;
  }
  .lesson-hero::before { inset: 10px; border-radius: 14px; }
  .lesson-hero::after { display: none; }
  .lesson-hero {
    background:
      linear-gradient(0deg, rgba(235, 250, 253, .99) 0%, rgba(235, 250, 253, .97) 54%, rgba(235, 250, 253, .12) 88%),
      url('../assets/images/phamo-kids-hero-2026.webp') 70% center / cover no-repeat;
  }
  .lesson-labels { margin-bottom: 25px; }
  .lesson-hero h1 { font-size: clamp(43px, 13vw, 61px); }
  .lesson-lead { font-size: 15px; }
  .lesson-hero-actions { align-items: stretch; flex-direction: column; }
  .lesson-hero-actions .lesson-button { width: 100%; }
  .lesson-brief { display: none; }
  .lesson-overview,
  .lesson-section,
  .lesson-finish { width: calc(100% - 20px); }
  .lesson-overview { margin-top: -22px; padding: 43px 18px 24px; }
  .lesson-timeline { grid-template-columns: 1fr; }
  .lesson-timeline::before { display: none; }
  .lesson-timeline li { min-height: 88px; flex-direction: row; align-items: center; }
  .lesson-timeline strong { margin: 0; }
  .lesson-timeline small { margin-left: auto; }
  .lesson-section { padding-block: 72px; }
  .learning-outcomes { grid-template-columns: 1fr; }
  .phase-heading { align-items: flex-start; }
  .phase-number { margin-top: 4px; }
  .question-postcard { min-height: 310px; padding: 42px 24px; }
  .clue-cards { grid-template-columns: 1fr; }
  .historian-rule { padding: 21px 18px; grid-template-columns: 44px 1fr; }
  .historian-rule-mark { width: 44px; height: 44px; font-size: 20px; }
  .knowledge-file { border-radius: 6px 20px 20px 20px; }
  .knowledge-file > header { padding: 23px 20px; align-items: flex-start; }
  .file-number { margin-top: 3px; }
  .knowledge-body { padding: 24px 18px; }
  .time-ribbon,
  .place-evidence-grid,
  .architecture-dictionary,
  .evidence-types,
  .knowledge-body--split,
  .ar-routine { grid-template-columns: 1fr; }
  .time-ribbon::before { display: none; }
  .architecture-dictionary > div { grid-template-columns: 1fr; gap: 5px; }
  .evidence-lab { grid-template-columns: 1fr; }
  .evidence-lab > b { transform: rotate(90deg); justify-self: center; }
  .community-promise { min-height: 250px; transform: none; }
  .knowledge-body--split .quick-check { grid-column: auto; }
  .lesson-missions { width: 100%; padding-inline: 10px; }
  .mission-route::before { display: none; }
  .mission-card,
  .mission-card:nth-child(even) { grid-template-columns: 1fr; }
  .mission-card:nth-child(even) .mission-image { order: 0; }
  .mission-image { min-height: 240px; }
  .mission-copy { padding: 28px 21px 24px; }
  .mission-actions { align-items: stretch; flex-direction: column; }
  .mission-actions .lesson-button { width: 100%; }
  .mission-stamp { width: 100%; margin: 3px 0 0; justify-content: center; }
  .worksheet-section { padding-block: 76px; }
  .worksheet-shell { padding: 36px 18px 28px 34px; border-radius: 20px 7px; }
  .worksheet-shell::before { left: 10px; }
  .worksheet-heading { align-items: center; }
  .worksheet-mark { width: 72px; height: 72px; font-size: 6px; }
  .worksheet-mark strong { font-size: 8px; }
  .worksheet-meta,
  .worksheet-grid { grid-template-columns: 1fr; }
  .worksheet-field--wide { grid-column: auto; }
  .architecture-options { grid-template-columns: 1fr; }
  .worksheet-actions { align-items: stretch; flex-direction: column; }
  .save-status { margin: 0; text-align: center; }
  .lesson-wrapup { width: calc(100% - 20px); padding: 54px 18px; border-radius: 22px; }
  .wrapup-grid { grid-template-columns: 1fr; }
  .presentation-card { grid-column: auto; }
  .score-grid { grid-template-columns: 1fr; }
  .rubric-grid { grid-template-columns: 1fr; }
  .teacher-guide { width: calc(100% - 20px); margin-bottom: 72px; padding: 44px 17px; border-radius: 22px; }
  .teacher-dashboard { grid-template-columns: 1fr; }
  .teacher-card--wide,
  .teacher-card--support { grid-column: auto; }
  .teacher-checklist,
  .support-levels,
  .answer-guide > div,
  .source-dossier { grid-template-columns: 1fr; }
  .source-note { grid-column: auto; }
  .lesson-finish { padding: 58px 20px; border-radius: 22px; }
  .lesson-progress {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  .lesson-progress > button { display: none; }
  .lesson-progress-copy { min-width: 92px; }
  .test-dialog-header,
  .test-question-list,
  .test-dialog-actions { padding-inline: 18px; }
  .test-result { margin-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-page *,
  .lesson-page *::before,
  .lesson-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header,
  .site-footer,
  .lesson-hero,
  .lesson-overview,
  .lesson-section:not(.worksheet-section),
  .lesson-finish,
  .lesson-progress,
  .lesson-toast,
  .worksheet-actions { display: none !important; }
  body { background: #fff !important; }
  .lesson-page { padding: 0 !important; }
  .worksheet-section { width: 100% !important; padding: 0 !important; }
  .worksheet-shell { box-shadow: none !important; border: 1px solid #ccd8dc !important; }
  .worksheet-field,
  .worksheet-meta input,
  .worksheet-meta select,
  .worksheet-field textarea { background: transparent !important; }
}