/* LockwoodSTEM immersive IED lesson pages — high-contrast v3 */

/* ---------- Dark mission hero ---------- */
body.immersive-lesson-page .lesson-mission-hero,
body.immersive-unit-page .lesson-mission-hero {
  background: linear-gradient(135deg, #061b31 0%, #0d3457 58%, #0a203a 100%);
  color: #ffffff;
  padding: 3rem 0;
  border-bottom: 4px solid #4fd7f7;
}

.lesson-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .7fr);
  gap: 1.5rem;
  align-items: stretch;
}

.lesson-course-icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 1rem;
}

body.immersive-lesson-page .lesson-mission-hero .mission-eyebrow,
body.immersive-unit-page .lesson-mission-hero .mission-eyebrow {
  color: #64ddf7 !important;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

body.immersive-lesson-page .lesson-mission-hero h1,
body.immersive-lesson-page .lesson-mission-hero h2,
body.immersive-unit-page .lesson-mission-hero h1,
body.immersive-unit-page .lesson-mission-hero h2 {
  color: #ffffff !important;
}

.lesson-hero-copy h1 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: .95;
  margin: .2rem 0 1rem;
}

body.immersive-lesson-page .lesson-mission-hero .focus-question,
body.immersive-unit-page .lesson-mission-hero .focus-question,
body.immersive-lesson-page .lesson-mission-hero .mission-panel p,
body.immersive-unit-page .lesson-mission-hero .mission-panel p {
  color: #e8f1fa !important;
}

.focus-question {
  font-size: 1.15rem;
  max-width: 850px;
}

.mission-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

body.immersive-lesson-page .lesson-mission-hero .btn.secondary,
body.immersive-unit-page .lesson-mission-hero .btn.secondary,
body.immersive-lesson-page .lesson-mission-hero .btn.ghost,
body.immersive-unit-page .lesson-mission-hero .btn.ghost {
  background: rgba(255,255,255,.11);
  color: #ffffff !important;
  border-color: rgba(255,255,255,.5);
}

body.immersive-lesson-page .lesson-mission-hero .btn.secondary:hover,
body.immersive-lesson-page .lesson-mission-hero .btn.secondary:focus,
body.immersive-lesson-page .lesson-mission-hero .btn.ghost:hover,
body.immersive-lesson-page .lesson-mission-hero .btn.ghost:focus,
body.immersive-unit-page .lesson-mission-hero .btn.secondary:hover,
body.immersive-unit-page .lesson-mission-hero .btn.secondary:focus,
body.immersive-unit-page .lesson-mission-hero .btn.ghost:hover,
body.immersive-unit-page .lesson-mission-hero .btn.ghost:focus {
  background: #ffffff;
  color: #0b1f3a !important;
}

.mission-panel {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(79,215,247,.45);
  border-radius: 24px;
  padding: 1.25rem;
  box-shadow: 0 22px 44px rgba(0,0,0,.2);
}

.mission-panel h2 {
  font-size: 1.55rem;
  line-height: 1.1;
}

.verb-strip {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.verb-strip span,
.presentation-chip {
  display: inline-block;
  background: #f2c14e;
  color: #061b31 !important;
  border-radius: 999px;
  padding: .36rem .7rem;
  font-weight: 900;
  font-size: .82rem;
}

/* ---------- Light lesson sections ---------- */
body.immersive-lesson-page .lesson-section,
body.immersive-unit-page .lesson-section {
  background: #ffffff !important;
  color: #102033 !important;
  border: 1px solid #cbd5e1;
  padding: 1.35rem;
  margin: 1rem auto;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(2,10,28,.08);
}

/* This is the area shown in the user's screenshot. */
body.immersive-lesson-page .lesson-section .section-header,
body.immersive-unit-page .lesson-section .section-header,
body.immersive-lesson-page .lesson-section .section-header > div,
body.immersive-unit-page .lesson-section .section-header > div {
  color: #102033 !important;
}

body.immersive-lesson-page .lesson-section .section-header h2,
body.immersive-unit-page .lesson-section .section-header h2,
body.immersive-lesson-page .lesson-section > h2,
body.immersive-unit-page .lesson-section > h2 {
  color: #0b1f3a !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body.immersive-lesson-page .lesson-section .section-header .eyebrow,
body.immersive-unit-page .lesson-section .section-header .eyebrow,
body.immersive-lesson-page .lesson-section > .eyebrow,
body.immersive-unit-page .lesson-section > .eyebrow {
  color: #946500 !important;
  opacity: 1 !important;
}

body.immersive-lesson-page .lesson-section .section-header .section-subtitle,
body.immersive-unit-page .lesson-section .section-header .section-subtitle,
body.immersive-lesson-page .lesson-section > .section-subtitle,
body.immersive-unit-page .lesson-section > .section-subtitle {
  color: #475569 !important;
  opacity: 1 !important;
}

.lesson-section {
  padding-top: 2rem;
  padding-bottom: .75rem;
}

.lesson-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

/* ---------- Light content cards ---------- */
body.immersive-lesson-page .lesson-section .card,
body.immersive-unit-page .lesson-section .card,
body.immersive-lesson-page .lesson-section .choice,
body.immersive-unit-page .lesson-section .choice,
body.immersive-lesson-page .lesson-section .mission-steps li,
body.immersive-unit-page .lesson-section .mission-steps li,
body.immersive-lesson-page .lesson-section .callout,
body.immersive-unit-page .lesson-section .callout {
  color: #102033 !important;
}

body.immersive-lesson-page .lesson-section .card:not(.dark),
body.immersive-unit-page .lesson-section .card:not(.dark) {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
  border-color: #d6e0eb;
}

body.immersive-lesson-page .lesson-section .card:not(.dark) h2,
body.immersive-lesson-page .lesson-section .card:not(.dark) h3,
body.immersive-lesson-page .lesson-section .card:not(.dark) h4,
body.immersive-unit-page .lesson-section .card:not(.dark) h2,
body.immersive-unit-page .lesson-section .card:not(.dark) h3,
body.immersive-unit-page .lesson-section .card:not(.dark) h4 {
  color: #0b1f3a !important;
}

body.immersive-lesson-page .lesson-section .card:not(.dark) p,
body.immersive-lesson-page .lesson-section .card:not(.dark) li,
body.immersive-lesson-page .lesson-section .card:not(.dark) dd,
body.immersive-lesson-page .lesson-section .card:not(.dark) td,
body.immersive-unit-page .lesson-section .card:not(.dark) p,
body.immersive-unit-page .lesson-section .card:not(.dark) li,
body.immersive-unit-page .lesson-section .card:not(.dark) dd,
body.immersive-unit-page .lesson-section .card:not(.dark) td {
  color: #334155 !important;
}

body.immersive-lesson-page .lesson-section .card:not(.dark) .eyebrow,
body.immersive-unit-page .lesson-section .card:not(.dark) .eyebrow {
  color: #174f8a !important;
}

.lesson-card,
.prompt-card,
.interactive-card,
.submit-card,
.resource-card {
  border-top: 5px solid #147a9e !important;
}

.prompt-card {
  background: linear-gradient(180deg, #ffffff 0%, #eaf6ff 100%) !important;
}

.lesson-card-grid .card {
  min-height: 150px;
}

/* ---------- Timeline, choices, workflows ---------- */
.timeline {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

body.immersive-lesson-page .lesson-section .timeline span,
body.immersive-unit-page .lesson-section .timeline span {
  background: #d9ecff;
  color: #0a203a !important;
  border-radius: 999px;
  padding: .35rem .65rem;
  font-weight: 800;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin: 1rem 0;
}

.choice {
  display: flex;
  gap: .75rem;
  background: #f4f9fd !important;
  border: 1px solid #bfd3e6 !important;
  border-radius: 16px;
  padding: .9rem;
}

body.immersive-lesson-page .lesson-section .choice span,
body.immersive-unit-page .lesson-section .choice span {
  color: #26384d !important;
}

.choice strong {
  background: #f2c14e;
  color: #061b31 !important;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
}

.mission-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

body.immersive-lesson-page .lesson-section .mission-steps li,
body.immersive-unit-page .lesson-section .mission-steps li {
  margin: .55rem 0;
  padding: .75rem .9rem;
  border-left: 5px solid #147a9e;
  background: #f4f9fd;
  border-radius: 12px;
  color: #26384d !important;
}

body.immersive-lesson-page .lesson-section .callout,
body.immersive-unit-page .lesson-section .callout {
  border-left: 5px solid #9a6a00;
  background: #fff4c7;
  color: #3f2d00 !important;
  padding: .8rem 1rem;
  border-radius: 12px;
}

body.immersive-lesson-page .lesson-section .callout p,
body.immersive-unit-page .lesson-section .callout p {
  color: #3f2d00 !important;
}

/* ---------- Dark answer reveals ---------- */
body.immersive-lesson-page .lesson-section .reveal-card details,
body.immersive-unit-page .lesson-section .reveal-card details,
body.immersive-lesson-page .lesson-section .answer-reveal,
body.immersive-unit-page .lesson-section .answer-reveal {
  background: #061b31 !important;
  color: #f8fafc !important;
  border: 1px solid #355573;
  border-radius: 18px;
  padding: 1rem;
}

body.immersive-lesson-page .lesson-section .reveal-card details *,
body.immersive-unit-page .lesson-section .reveal-card details *,
body.immersive-lesson-page .lesson-section .answer-reveal *,
body.immersive-unit-page .lesson-section .answer-reveal * {
  color: #f8fafc !important;
}

body.immersive-lesson-page .lesson-section .reveal-card summary,
body.immersive-unit-page .lesson-section .reveal-card summary,
body.immersive-lesson-page .lesson-section .answer-reveal summary,
body.immersive-unit-page .lesson-section .answer-reveal summary {
  color: #ffd86a !important;
  cursor: pointer;
  font-weight: 900;
}

/* ---------- Tags and buttons on light cards ---------- */
body.immersive-lesson-page .lesson-section .tag,
body.immersive-unit-page .lesson-section .tag {
  background: #d1a83f;
  color: #07172b !important;
}

body.immersive-lesson-page .lesson-section .btn,
body.immersive-unit-page .lesson-section .btn,
body.immersive-lesson-page .lesson-bottom-nav .btn,
body.immersive-unit-page .lesson-bottom-nav .btn {
  color: #0b1f3a !important;
}

body.immersive-lesson-page .lesson-section .btn.dark,
body.immersive-unit-page .lesson-section .btn.dark {
  color: #ffffff !important;
}

.lesson-bottom-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 0;
}

.lesson-resource-table .btn.small {
  margin: .15rem;
}

/* ---------- Focus and responsive ---------- */
body.immersive-lesson-page summary:focus-visible,
body.immersive-unit-page summary:focus-visible,
body.immersive-lesson-page .btn:focus-visible,
body.immersive-unit-page .btn:focus-visible {
  outline: 3px solid #ffd86a;
  outline-offset: 3px;
}

@media (max-width: 800px) {
  .lesson-hero-grid,
  .lesson-grid.two,
  .choice-grid {
    grid-template-columns: 1fr;
  }

  .lesson-hero-copy h1 {
    font-size: 2.3rem;
  }
}

/* ---------- Answer reveal contrast hardening v4 ----------
   Direct element rules prevent global .card p / muted text styles from
   reducing contrast inside dark expandable answer panels. */
html body.immersive-lesson-page details.answer-reveal,
html body.immersive-unit-page details.answer-reveal,
html body.immersive-lesson-page article.reveal-card > details,
html body.immersive-unit-page article.reveal-card > details {
  background: #061b31 !important;
  color: #ffffff !important;
  border-color: #4d6f8f !important;
}

html body.immersive-lesson-page details.answer-reveal summary,
html body.immersive-unit-page details.answer-reveal summary,
html body.immersive-lesson-page article.reveal-card > details summary,
html body.immersive-unit-page article.reveal-card > details summary,
html body.immersive-lesson-page details.answer-reveal summary *,
html body.immersive-unit-page details.answer-reveal summary *,
html body.immersive-lesson-page article.reveal-card > details summary *,
html body.immersive-unit-page article.reveal-card > details summary * {
  color: #ffd86a !important;
  -webkit-text-fill-color: #ffd86a !important;
  opacity: 1 !important;
}

html body.immersive-lesson-page details.answer-reveal p,
html body.immersive-unit-page details.answer-reveal p,
html body.immersive-lesson-page article.reveal-card > details p,
html body.immersive-unit-page article.reveal-card > details p,
html body.immersive-lesson-page details.answer-reveal li,
html body.immersive-unit-page details.answer-reveal li,
html body.immersive-lesson-page article.reveal-card > details li,
html body.immersive-unit-page article.reveal-card > details li,
html body.immersive-lesson-page details.answer-reveal span,
html body.immersive-unit-page details.answer-reveal span,
html body.immersive-lesson-page article.reveal-card > details span,
html body.immersive-unit-page article.reveal-card > details span,
html body.immersive-lesson-page details.answer-reveal strong,
html body.immersive-unit-page details.answer-reveal strong,
html body.immersive-lesson-page article.reveal-card > details strong,
html body.immersive-unit-page article.reveal-card > details strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body.immersive-lesson-page details.answer-reveal p,
html body.immersive-unit-page details.answer-reveal p,
html body.immersive-lesson-page article.reveal-card > details p,
html body.immersive-unit-page article.reveal-card > details p {
  font-weight: 600;
  line-height: 1.55;
}


/* ---------- Final cross-unit consistency hardening ---------- */
body.lesson-immersive-page .lesson-web-section,
body.lesson-immersive-page main > section.container:not(.lesson-bottom-nav),
body.immersive-lesson-page .lesson-web-section {
  color: #102033;
}

body.lesson-immersive-page .lesson-web-section .section-header h2,
body.lesson-immersive-page main > section.container .section-header h2,
body.lesson-immersive-page .lesson-web-section h2,
body.lesson-immersive-page .lesson-web-section h3 {
  color: #0b1f3a !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body.lesson-immersive-page .lesson-web-section .section-subtitle,
body.lesson-immersive-page main > section.container .section-subtitle {
  color: #475569 !important;
  opacity: 1 !important;
}

body.lesson-immersive-page .lesson-web-section .eyebrow,
body.lesson-immersive-page main > section.container .eyebrow {
  color: #946500 !important;
  opacity: 1 !important;
}

body.lesson-immersive-page .lesson-web-section .card:not(.dark),
body.lesson-immersive-page main > section.container .card:not(.dark) {
  color: #102033 !important;
}

body.lesson-immersive-page .lesson-web-section .card:not(.dark) p,
body.lesson-immersive-page .lesson-web-section .card:not(.dark) li,
body.lesson-immersive-page main > section.container .card:not(.dark) p,
body.lesson-immersive-page main > section.container .card:not(.dark) li {
  color: #334155 !important;
}

/* Unit 0's original expandable structure uses .lesson-answer-reveal. */
html body.lesson-immersive-page details.lesson-answer-reveal,
html body.immersive-lesson-page details.lesson-answer-reveal {
  background: #061b31 !important;
  color: #ffffff !important;
  border: 1px solid #4d6f8f !important;
  border-radius: 18px;
  padding: 1rem;
  margin-top: 1rem;
}

html body.lesson-immersive-page details.lesson-answer-reveal summary,
html body.lesson-immersive-page details.lesson-answer-reveal summary *,
html body.immersive-lesson-page details.lesson-answer-reveal summary,
html body.immersive-lesson-page details.lesson-answer-reveal summary * {
  color: #ffd86a !important;
  -webkit-text-fill-color: #ffd86a !important;
  opacity: 1 !important;
  cursor: pointer;
  font-weight: 900;
}

html body.lesson-immersive-page details.lesson-answer-reveal .answer-panel,
html body.lesson-immersive-page details.lesson-answer-reveal .answer-panel *,
html body.immersive-lesson-page details.lesson-answer-reveal .answer-panel,
html body.immersive-lesson-page details.lesson-answer-reveal .answer-panel * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body.lesson-immersive-page details.lesson-answer-reveal .answer-panel .card,
html body.immersive-lesson-page details.lesson-answer-reveal .answer-panel .card {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.25) !important;
}

/* Consistent navigation and table behavior. */
.lesson-bottom-nav {
  align-items: center;
}

.lesson-resource-table {
  width: 100%;
}

.lesson-table-action {
  min-width: 150px;
}

@media (max-width: 760px) {
  .lesson-bottom-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .lesson-bottom-nav .btn {
    width: 100%;
    text-align: center;
  }

  .lesson-resource-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* POE immersive lesson contrast hardening - high specificity to override global light text */
body.immersive-lesson-page main section.container,
body.immersive-lesson-page main section.container p,
body.immersive-lesson-page main section.container li,
body.immersive-lesson-page main section.container span,
body.immersive-lesson-page main section.container h1,
body.immersive-lesson-page main section.container h2,
body.immersive-lesson-page main section.container h3,
body.immersive-lesson-page main section.container h4,
body.immersive-lesson-page main section.container strong,
body.immersive-lesson-page main section.container em,
body.immersive-lesson-page .lesson-section h2,
body.immersive-lesson-page .lesson-section h3,
body.immersive-lesson-page .lesson-section .section-subtitle,
body.immersive-lesson-page .lesson-web-section h2,
body.immersive-lesson-page .lesson-web-section h3,
body.immersive-lesson-page .lesson-web-section .section-subtitle,
body.immersive-lesson-page .section-header,
body.immersive-lesson-page .section-header *,
body.immersive-lesson-page .card:not(.dark),
body.immersive-lesson-page .card:not(.dark) *,
body.immersive-lesson-page .prompt-card,
body.immersive-lesson-page .prompt-card *,
body.immersive-lesson-page .choice-card,
body.immersive-lesson-page .choice-card *,
body.immersive-lesson-page .lesson-timeline,
body.immersive-lesson-page .lesson-timeline *,
body.immersive-lesson-page .pacing-strip,
body.immersive-lesson-page .pacing-strip *,
body.immersive-lesson-page .evidence-flow,
body.immersive-lesson-page .evidence-flow *,
body.immersive-lesson-page .claim-banner,
body.immersive-lesson-page .callout,
body.immersive-lesson-page .callout *,
body.immersive-lesson-page .unit-meta-list,
body.immersive-lesson-page .unit-meta-list *,
body.immersive-lesson-page .lesson-list-clean,
body.immersive-lesson-page .lesson-list-clean *,
body.immersive-lesson-page .resource-card,
body.immersive-lesson-page .resource-card * {
  color:#0b1f3a!important;
  -webkit-text-fill-color:#0b1f3a!important;
  opacity:1!important;
  text-shadow:none!important;
}
body.immersive-lesson-page .lesson-mission-hero,
body.immersive-lesson-page .lesson-mission-hero *,
body.immersive-lesson-page .page-hero,
body.immersive-lesson-page .page-hero *,
body.immersive-lesson-page .hero-grid,
body.immersive-lesson-page .hero-grid *,
body.immersive-lesson-page .lesson-hero-grid,
body.immersive-lesson-page .lesson-hero-grid *,
body.immersive-lesson-page .mission-panel,
body.immersive-lesson-page .mission-panel *,
body.immersive-lesson-page .card.dark,
body.immersive-lesson-page .card.dark * {
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  opacity:1!important;
}
body.immersive-lesson-page .tag,
body.immersive-lesson-page .tag *,
body.immersive-lesson-page .process-number,
body.immersive-lesson-page .process-number * {
  color:#061b31!important;
  -webkit-text-fill-color:#061b31!important;
}
body.immersive-lesson-page .btn,
body.immersive-lesson-page .btn * {
  -webkit-text-fill-color:currentColor!important;
  opacity:1!important;
}
body.immersive-lesson-page details.answer-reveal,
body.immersive-lesson-page details.lesson-answer-reveal {
  background:#061b31!important;
  color:#ffffff!important;
  border-radius:16px!important;
  padding:1rem!important;
  border:1px solid rgba(255,255,255,.18)!important;
}
body.immersive-lesson-page details.answer-reveal summary,
body.immersive-lesson-page details.answer-reveal summary *,
body.immersive-lesson-page details.lesson-answer-reveal summary,
body.immersive-lesson-page details.lesson-answer-reveal summary * {
  color:#ffd86a!important;
  -webkit-text-fill-color:#ffd86a!important;
  opacity:1!important;
  cursor:pointer!important;
  font-weight:800!important;
}
body.immersive-lesson-page details.answer-reveal p,
body.immersive-lesson-page details.answer-reveal p *,
body.immersive-lesson-page details.answer-reveal li,
body.immersive-lesson-page details.answer-reveal li *,
body.immersive-lesson-page details.answer-reveal h3,
body.immersive-lesson-page details.answer-reveal h3 *,
body.immersive-lesson-page details.answer-reveal div,
body.immersive-lesson-page details.answer-reveal div *,
body.immersive-lesson-page details.lesson-answer-reveal p,
body.immersive-lesson-page details.lesson-answer-reveal p *,
body.immersive-lesson-page details.lesson-answer-reveal li,
body.immersive-lesson-page details.lesson-answer-reveal li *,
body.immersive-lesson-page details.lesson-answer-reveal h3,
body.immersive-lesson-page details.lesson-answer-reveal h3 *,
body.immersive-lesson-page details.lesson-answer-reveal div,
body.immersive-lesson-page details.lesson-answer-reveal div * {
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  opacity:1!important;
  text-shadow:none!important;
}
body.immersive-lesson-page details.answer-reveal .callout,
body.immersive-lesson-page details.answer-reveal .callout *,
body.immersive-lesson-page details.lesson-answer-reveal .callout,
body.immersive-lesson-page details.lesson-answer-reveal .callout * {
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  background:rgba(255,255,255,.08)!important;
}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.choice-card{border:1px solid #d9e3ec;border-radius:14px;padding:1rem;background:#fff}.choice-card strong{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:999px;background:#d9ab3d;color:#061b31!important;-webkit-text-fill-color:#061b31!important;margin-right:.5rem}.lesson-list-clean{margin:0;padding-left:1.25rem}.lesson-list-clean li{margin:.5rem 0}.poe-system-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-top:1rem}.poe-system-strip span{display:block;background:#eaf4fb;border:1px solid #c9e6f4;border-radius:12px;padding:.75rem;font-weight:700;color:#0b4d78!important;-webkit-text-fill-color:#0b4d78!important}.unit-lesson-table .btn.small{white-space:nowrap}.deliverable-card{border-left:6px solid #d9ab3d}.lesson-nav-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;margin-top:1.5rem}.lesson-nav-row .btn{margin:.25rem 0}.pacing-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.65rem}.pacing-strip span{display:block;border-radius:12px;background:#fff;border:1px solid #d9e3ec;padding:.7rem;color:#0b1f3a!important;-webkit-text-fill-color:#0b1f3a!important;font-weight:700}.pacing-strip em{display:block;font-style:normal;color:#0b4d78!important;-webkit-text-fill-color:#0b4d78!important;font-size:.85rem;font-weight:800;margin-bottom:.2rem}


/* POE Unit 3 contrast hardening */
body.immersive-lesson-page main section.container,
body.immersive-lesson-page main section.container *,
body.immersive-unit-page main section.container,
body.immersive-unit-page main section.container *,
body.immersive-lesson-page .card:not(.dark),
body.immersive-lesson-page .card:not(.dark) *,
body.immersive-unit-page .card:not(.dark),
body.immersive-unit-page .card:not(.dark) *,
body.immersive-lesson-page .section-header,
body.immersive-lesson-page .section-header *,
body.immersive-unit-page .section-header,
body.immersive-unit-page .section-header * { color:#0b1f3a!important; -webkit-text-fill-color:#0b1f3a!important; opacity:1!important; }
body.immersive-lesson-page .lesson-mission-hero,
body.immersive-lesson-page .lesson-mission-hero *,
body.immersive-unit-page .lesson-mission-hero,
body.immersive-unit-page .lesson-mission-hero *,
body.immersive-lesson-page .card.dark,
body.immersive-lesson-page .card.dark *,
body.immersive-unit-page .mission-panel,
body.immersive-unit-page .mission-panel * { color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; opacity:1!important; }
body.immersive-lesson-page details.answer-reveal,
body.immersive-lesson-page details.answer-reveal *,
body.immersive-unit-page details.answer-reveal,
body.immersive-unit-page details.answer-reveal * { color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; opacity:1!important; }

/* ================================================================
   POE LESSON CONTRAST HARDENING v6
   All non-hero lesson sections are explicit light surfaces. This
   prevents the site's dark body background from showing behind dark
   lesson headings when a page uses plain section.container markup.
   ================================================================ */
html body.lesson-immersive-page main > section.container,
html body.immersive-lesson-page main > section.container {
  background: #ffffff !important;
  color: #102033 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(2, 10, 28, .10) !important;
  padding: 2rem 1.35rem 1.35rem !important;
  margin-top: 1.25rem !important;
}

html body.lesson-immersive-page main > section.container .section-header,
html body.immersive-lesson-page main > section.container .section-header,
html body.lesson-immersive-page main > section.container .section-header > div,
html body.immersive-lesson-page main > section.container .section-header > div {
  color: #102033 !important;
  opacity: 1 !important;
}

html body.lesson-immersive-page main > section.container .section-header h1,
html body.lesson-immersive-page main > section.container .section-header h2,
html body.lesson-immersive-page main > section.container .section-header h3,
html body.immersive-lesson-page main > section.container .section-header h1,
html body.immersive-lesson-page main > section.container .section-header h2,
html body.immersive-lesson-page main > section.container .section-header h3 {
  color: #0b1f3a !important;
  -webkit-text-fill-color: #0b1f3a !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body.lesson-immersive-page main > section.container .section-header .eyebrow,
html body.immersive-lesson-page main > section.container .section-header .eyebrow {
  color: #8a5b00 !important;
  -webkit-text-fill-color: #8a5b00 !important;
  opacity: 1 !important;
}

html body.lesson-immersive-page main > section.container .section-header .section-subtitle,
html body.immersive-lesson-page main > section.container .section-header .section-subtitle {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  opacity: 1 !important;
}

/* Plain lesson text outside cards */
html body.lesson-immersive-page main > section.container > p,
html body.lesson-immersive-page main > section.container > ul,
html body.lesson-immersive-page main > section.container > ol,
html body.immersive-lesson-page main > section.container > p,
html body.immersive-lesson-page main > section.container > ul,
html body.immersive-lesson-page main > section.container > ol,
html body.lesson-immersive-page .lesson-prompt,
html body.lesson-immersive-page .scenario-text,
html body.lesson-immersive-page .claim-banner,
html body.lesson-immersive-page .lesson-big-statement,
html body.immersive-lesson-page .lesson-prompt,
html body.immersive-lesson-page .scenario-text,
html body.immersive-lesson-page .claim-banner,
html body.immersive-lesson-page .lesson-big-statement {
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
  opacity: 1 !important;
}

/* Pacing strip and process arrows */
html body.lesson-immersive-page .lesson-timeline div,
html body.immersive-lesson-page .lesson-timeline div {
  background: #eef5fc !important;
  border: 1px solid #cbddeb !important;
  color: #102033 !important;
}
html body.lesson-immersive-page .lesson-timeline strong,
html body.lesson-immersive-page .lesson-timeline span,
html body.immersive-lesson-page .lesson-timeline strong,
html body.immersive-lesson-page .lesson-timeline span,
html body.lesson-immersive-page .evidence-flow > span,
html body.immersive-lesson-page .evidence-flow > span {
  color: #0b1f3a !important;
  -webkit-text-fill-color: #0b1f3a !important;
  opacity: 1 !important;
}

/* Light cards must always use dark text. */
html body.lesson-immersive-page main > section.container .card:not(.dark),
html body.immersive-lesson-page main > section.container .card:not(.dark),
html body.lesson-immersive-page main > section.container .choice-card,
html body.immersive-lesson-page main > section.container .choice-card {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%) !important;
  color: #102033 !important;
}
html body.lesson-immersive-page main > section.container .card:not(.dark) h2,
html body.lesson-immersive-page main > section.container .card:not(.dark) h3,
html body.lesson-immersive-page main > section.container .card:not(.dark) h4,
html body.immersive-lesson-page main > section.container .card:not(.dark) h2,
html body.immersive-lesson-page main > section.container .card:not(.dark) h3,
html body.immersive-lesson-page main > section.container .card:not(.dark) h4 {
  color: #0b1f3a !important;
  -webkit-text-fill-color: #0b1f3a !important;
  opacity: 1 !important;
}
html body.lesson-immersive-page main > section.container .card:not(.dark) p,
html body.lesson-immersive-page main > section.container .card:not(.dark) li,
html body.immersive-lesson-page main > section.container .card:not(.dark) p,
html body.immersive-lesson-page main > section.container .card:not(.dark) li,
html body.lesson-immersive-page main > section.container .choice-card p,
html body.immersive-lesson-page main > section.container .choice-card p {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  opacity: 1 !important;
}

/* Dark answer panels remain high contrast after the broad light rules. */
html body.lesson-immersive-page main > section.container details.answer-reveal,
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal,
html body.immersive-lesson-page main > section.container details.answer-reveal,
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal,
html body.lesson-immersive-page main > section.container article.reveal-card > details,
html body.immersive-lesson-page main > section.container article.reveal-card > details {
  background: #071b31 !important;
  color: #ffffff !important;
  border: 1px solid #587794 !important;
}
html body.lesson-immersive-page main > section.container details.answer-reveal summary,
html body.lesson-immersive-page main > section.container details.answer-reveal summary *,
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal summary,
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal summary *,
html body.immersive-lesson-page main > section.container details.answer-reveal summary,
html body.immersive-lesson-page main > section.container details.answer-reveal summary *,
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal summary,
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal summary * {
  color: #ffd86a !important;
  -webkit-text-fill-color: #ffd86a !important;
  opacity: 1 !important;
}
html body.lesson-immersive-page main > section.container details.answer-reveal :is(p,li,span,strong,h2,h3,h4),
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal :is(p,li,span,strong,h2,h3,h4),
html body.immersive-lesson-page main > section.container details.answer-reveal :is(p,li,span,strong,h2,h3,h4),
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal :is(p,li,span,strong,h2,h3,h4),
html body.lesson-immersive-page main > section.container article.reveal-card > details :is(p,li,span,strong,h2,h3,h4),
html body.immersive-lesson-page main > section.container article.reveal-card > details :is(p,li,span,strong,h2,h3,h4) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Secondary buttons on white lesson surfaces */
html body.lesson-immersive-page main > section.container .btn.secondary,
html body.immersive-lesson-page main > section.container .btn.secondary {
  background: #eef5fc !important;
  color: #0b1f3a !important;
  border-color: #b9ccdc !important;
}

/* Bottom lesson navigation lives on the dark page background. */
html body.lesson-immersive-page .lesson-bottom-nav .btn.secondary,
html body.immersive-lesson-page .lesson-bottom-nav .btn.secondary {
  background: #ffffff !important;
  color: #0b1f3a !important;
  border-color: #ffffff !important;
}


/* Unit 5 page contrast hardening */
body.immersive-lesson-page main section.container,
body.immersive-lesson-page main section.container *,
body.immersive-unit-page main section.container,
body.immersive-unit-page main section.container * { color:#0b1f3a!important; -webkit-text-fill-color:#0b1f3a!important; opacity:1!important; }
body.immersive-lesson-page .lesson-mission-hero,
body.immersive-lesson-page .lesson-mission-hero *,
body.immersive-unit-page .lesson-mission-hero,
body.immersive-unit-page .lesson-mission-hero *,
body.immersive-lesson-page details.answer-reveal,
body.immersive-lesson-page details.answer-reveal *,
body.immersive-unit-page details.answer-reveal,
body.immersive-unit-page details.answer-reveal * { color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; opacity:1!important; }
main section.container { background:#f4f8fb; }

/* ==========================================================================
   FINAL LESSON REVEAL READABILITY OVERRIDE — 2026-07-20
   Uses a light answer surface and a gold summary bar for reliable contrast.
   ========================================================================== */
html body.lesson-immersive-page main > section.container details.answer-reveal,
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal,
html body.immersive-lesson-page main > section.container details.answer-reveal,
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal,
html body.lesson-immersive-page main > section.container article.reveal-card > details,
html body.immersive-lesson-page main > section.container article.reveal-card > details {
  background: #ffffff !important;
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
  border: 2px solid #9db2c4 !important;
  border-radius: 14px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(6, 27, 49, 0.08) !important;
}

html body.lesson-immersive-page main > section.container details.answer-reveal summary,
html body.lesson-immersive-page main > section.container details.answer-reveal summary *,
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal summary,
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal summary *,
html body.immersive-lesson-page main > section.container details.answer-reveal summary,
html body.immersive-lesson-page main > section.container details.answer-reveal summary *,
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal summary,
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal summary *,
html body.lesson-immersive-page main > section.container article.reveal-card > details summary,
html body.lesson-immersive-page main > section.container article.reveal-card > details summary *,
html body.immersive-lesson-page main > section.container article.reveal-card > details summary,
html body.immersive-lesson-page main > section.container article.reveal-card > details summary * {
  background: #f3c95c !important;
  color: #061b31 !important;
  -webkit-text-fill-color: #061b31 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  cursor: pointer !important;
  font-weight: 900 !important;
}

html body.lesson-immersive-page main > section.container details.answer-reveal summary,
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal summary,
html body.immersive-lesson-page main > section.container details.answer-reveal summary,
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal summary,
html body.lesson-immersive-page main > section.container article.reveal-card > details summary,
html body.immersive-lesson-page main > section.container article.reveal-card > details summary {
  display: block !important;
  padding: 1rem 1.15rem !important;
  min-height: 48px !important;
  line-height: 1.4 !important;
}

html body.lesson-immersive-page main > section.container details[open].answer-reveal summary,
html body.lesson-immersive-page main > section.container details[open].lesson-answer-reveal summary,
html body.immersive-lesson-page main > section.container details[open].answer-reveal summary,
html body.immersive-lesson-page main > section.container details[open].lesson-answer-reveal summary,
html body.lesson-immersive-page main > section.container article.reveal-card > details[open] summary,
html body.immersive-lesson-page main > section.container article.reveal-card > details[open] summary {
  border-bottom: 2px solid #9db2c4 !important;
}

html body.lesson-immersive-page main > section.container details.answer-reveal :is(p,li,span,strong,h2,h3,h4,div),
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal :is(p,li,span,strong,h2,h3,h4,div),
html body.immersive-lesson-page main > section.container details.answer-reveal :is(p,li,span,strong,h2,h3,h4,div),
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal :is(p,li,span,strong,h2,h3,h4,div),
html body.lesson-immersive-page main > section.container article.reveal-card > details :is(p,li,span,strong,h2,h3,h4,div),
html body.immersive-lesson-page main > section.container article.reveal-card > details :is(p,li,span,strong,h2,h3,h4,div) {
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body.lesson-immersive-page main > section.container details.answer-reveal > :not(summary),
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal > :not(summary),
html body.immersive-lesson-page main > section.container details.answer-reveal > :not(summary),
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal > :not(summary),
html body.lesson-immersive-page main > section.container article.reveal-card > details > :not(summary),
html body.immersive-lesson-page main > section.container article.reveal-card > details > :not(summary) {
  margin-left: 1.15rem !important;
  margin-right: 1.15rem !important;
}

html body.lesson-immersive-page main > section.container details.answer-reveal > :last-child,
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal > :last-child,
html body.immersive-lesson-page main > section.container details.answer-reveal > :last-child,
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal > :last-child,
html body.lesson-immersive-page main > section.container article.reveal-card > details > :last-child,
html body.immersive-lesson-page main > section.container article.reveal-card > details > :last-child {
  margin-bottom: 1rem !important;
}

html body.lesson-immersive-page main > section.container details.answer-reveal .answer-panel,
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal .answer-panel,
html body.immersive-lesson-page main > section.container details.answer-reveal .answer-panel,
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal .answer-panel {
  background: #ffffff !important;
  margin: 0 !important;
  padding: 1rem 1.15rem !important;
}

html body.lesson-immersive-page main > section.container details.answer-reveal .callout,
html body.lesson-immersive-page main > section.container details.lesson-answer-reveal .callout,
html body.immersive-lesson-page main > section.container details.answer-reveal .callout,
html body.immersive-lesson-page main > section.container details.lesson-answer-reveal .callout,
html body.lesson-immersive-page main > section.container article.reveal-card > details .callout,
html body.immersive-lesson-page main > section.container article.reveal-card > details .callout {
  background: #eef5fb !important;
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
  border-color: #b7c9d8 !important;
}