/* Shared learner lesson shell. Subject colours come from design/tgo-subject-colors.json. */
:where([data-shell-theme="maths"], [data-course-theme="maths"], body:has(.app-shell-navigation--maths)) {
  --lesson-accent: #9267ea;
  --lesson-support: #f2ebff;
  --lesson-on-accent: #fff;
  --lesson-rail-on-accent: #fff;
}
:where([data-shell-theme="ai"], [data-course-theme="ai"], body:has(.app-shell-navigation--ai)) {
  --lesson-accent: #fdc8e9;
  --lesson-support: #fff0f8;
  --lesson-on-accent: #29272d;
  --lesson-rail-on-accent: #29272d;
}
:where([data-shell-theme="english"], [data-course-theme="english"], body:has(.app-shell-navigation--english)) {
  --lesson-accent: #f35aa5;
  --lesson-support: #ffe5f2;
  --lesson-on-accent: #fff;
  --lesson-rail-on-accent: #fff;
}
:where([data-shell-theme="sciences"], [data-course-theme="sciences"], body:has(.app-shell-navigation--sciences)) {
  --lesson-accent: #0fbc53;
  --lesson-support: #e5f8eb;
  --lesson-on-accent: #29272d;
  --lesson-rail-on-accent: #29272d;
}
:where([data-shell-theme="francais"], [data-course-theme="francais"], body:has(.app-shell-navigation--francais)) {
  --lesson-accent: #fd7666;
  --lesson-support: #ffe7e2;
  --lesson-on-accent: #fff;
  --lesson-rail-on-accent: #fff;
}
:where([data-shell-theme="espagnol"], [data-course-theme="espagnol"], body:has(.app-shell-navigation--espagnol)) {
  --lesson-accent: #f6cc24;
  --lesson-support: #fff5c8;
  --lesson-on-accent: #29272d;
  --lesson-rail-on-accent: #29272d;
}
:where([data-shell-theme="geographie"], [data-course-theme="geographie"], body:has(.app-shell-navigation--geographie)) {
  --lesson-accent: #2f73d9;
  --lesson-support: #e2efff;
  --lesson-on-accent: #fff;
  --lesson-rail-on-accent: #fff;
}
:where([data-shell-theme="histoire"], [data-course-theme="histoire"], body:has(.app-shell-navigation--histoire)) {
  --lesson-accent: #d79b3b;
  --lesson-support: #fff0d2;
  --lesson-on-accent: #fff;
  --lesson-rail-on-accent: #fff;
}
:where([data-shell-theme="education-civique"], [data-course-theme="education-civique"], body:has(.app-shell-navigation--education-civique)) {
  --lesson-accent: #00a98f;
  --lesson-support: #dff8f2;
  --lesson-on-accent: #fff;
  --lesson-rail-on-accent: #fff;
}
:where([data-shell-theme="arts"], [data-course-theme="arts"], body:has(.app-shell-navigation--arts)) {
  --lesson-accent: #f29c45;
  --lesson-support: #fff0dc;
  --lesson-on-accent: #fff;
  --lesson-rail-on-accent: #fff;
}
:where([data-shell-theme="musique"], [data-course-theme="musique"], body:has(.app-shell-navigation--musique)) {
  --lesson-accent: #5b5bd6;
  --lesson-support: #ebeaff;
  --lesson-on-accent: #fff;
  --lesson-rail-on-accent: #fff;
}
:where([data-shell-theme="surf"], [data-course-theme="surf"], body:has(.app-shell-navigation--surf)) {
  --lesson-accent: #2bb7c9;
  --lesson-support: #e0f8fb;
  --lesson-on-accent: #fff;
  --lesson-rail-on-accent: #fff;
}
:where([data-shell-theme="tennis"], [data-course-theme="tennis"], body:has(.app-shell-navigation--tennis)) {
  --lesson-accent: #b0ee0b;
  --lesson-support: #f2ffd3;
  --lesson-on-accent: #29272d;
  --lesson-rail-on-accent: #29272d;
}
:where([data-course-theme]) {
  --subject-dominant: var(--lesson-accent);
  --subject-dominant-text: var(--lesson-on-accent);
  --canonical-dominant: var(--lesson-accent);
  --canonical-dominant-text: var(--lesson-accent);
}

/* Logo, lesson identity and learner profile share one calm, non-sticky header. */
.final-brand .app-shell-navigation--lesson {
  top: auto;
  height: 168px;
  min-height: 168px;
  grid-template-columns: 156px minmax(0, 1fr) minmax(238px, auto);
  grid-template-rows: 1fr;
  row-gap: 0;
}
.final-brand .app-shell-navigation--lesson .app-shell__logo {
  display: grid !important;
}
.final-brand .app-shell-navigation--lesson > .app-shell__context--home {
  display: block;
  width: 100%;
}
.final-brand .app-shell-navigation--lesson > .app-bottom-banner {
  grid-column: 1 / -1;
  grid-row: 1;
}
.final-brand .app-shell-navigation--lesson > :is(.app-shell__logo, .app-shell__context, .app-shell__profile) {
  grid-row: 1;
}
.lesson-shell-heading {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}
.lesson-shell-heading__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.lesson-shell-heading__chip {
  display: inline-flex;
  min-height: 40px;
  padding: 0 17px 0 19px;
  border-left: 9px solid var(--lesson-accent);
  border-radius: 13px 22px 22px 13px;
  align-items: center;
  gap: 12px;
  background: var(--lesson-support);
  color: var(--ink);
  font: 900 15px/1 var(--font-display);
}
.lesson-shell-heading__chip b { font: inherit; }
.lesson-shell-heading__chip i {
  color: var(--lesson-accent);
  font: 900 19px/1 var(--font-display);
  font-style: normal;
}
.lesson-shell-heading__title {
  display: -webkit-box;
  max-width: min(920px, 100%);
  overflow: hidden;
  color: var(--ink);
  font: 950 clamp(25px, 2.4vw, 39px)/.95 var(--font-display);
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.lesson-shell-heading__back {
  display: inline-flex;
  min-width: 184px;
  min-height: 58px;
  padding: 8px 20px;
  border: 2px solid var(--lesson-accent);
  border-radius: 22px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--lesson-accent);
  color: #fff;
  cursor: pointer;
  font: 900 13px/1 var(--font-display);
}
.lesson-shell-heading__back span { color: currentColor; font-size: 22px; }
.app-shell-navigation--lesson:is(.app-shell-navigation--ai, .app-shell-navigation--espagnol, .app-shell-navigation--sciences) .lesson-shell-heading__back {
  color: var(--ink);
}
.lesson-shell-heading__back i { max-width: 160px; overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.lesson-shell-heading__back b { font: inherit; }
.lesson-shell-heading__back em { display: none; font: inherit; font-style: normal; }
.lesson-shell-heading__back:focus-visible {
  outline: 3px solid var(--lesson-accent);
  outline-offset: 5px;
}
.final-brand .app-shell-navigation--lesson .app-shell__profile {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
}
.final-brand .app-shell-navigation--lesson .app-shell__student-name {
  display: flex;
  max-width: 116px;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  overflow-wrap: anywhere;
  text-align: right;
}
.final-brand .app-shell-navigation--lesson .app-shell__student-name small {
  color: var(--ink);
  font: 850 clamp(8px, .76vw, 11px)/1 var(--font-display);
  letter-spacing: .04em;
  white-space: nowrap;
}
.final-brand .app-shell-navigation--lesson .app-shell__student-name small b { font: inherit; }
.final-brand .app-shell-navigation--lesson .app-shell__student-name small em { display: none; font: inherit; font-style: normal; }
.final-brand .app-shell-navigation--lesson .app-shell__student-name strong {
  color: var(--lesson-accent);
  font: 950 clamp(17px, 1.55vw, 24px)/.95 var(--font-display);
  letter-spacing: -.035em;
}
.final-brand .app-shell-navigation--lesson .app-shell__profile .role-menu__trigger::after {
  background: var(--lesson-accent);
}

/* A classroom carries its subject identity before the learner enters a lesson. */
.final-brand .app-shell-navigation--classroom .kid-classroom-header-greeting > span {
  color: var(--lesson-accent);
}
.final-brand .app-shell-navigation--classroom .kid-classroom-header-greeting > span i {
  background: var(--lesson-accent);
  box-shadow: 0 0 0 5px var(--lesson-support);
}
.final-brand .app-shell-navigation--classroom .kid-classroom-header-greeting h1 {
  max-width: min(960px, 100%);
  color: var(--ink);
  white-space: normal;
  text-wrap: balance;
}
.final-brand .app-shell-navigation--classroom .kid-classroom-header-greeting h1 em {
  color: var(--lesson-accent);
}
.final-brand .app-shell-navigation--classroom .app-shell__student-name {
  display: none;
}

/* The global lesson header now owns the repeated identity and duration. */
.final-brand.lesson-on main > .division-module-bar:first-child {
  display: none !important;
}
.final-brand.lesson-on main.learning-experience:has(> .division-module-bar:first-child) {
  padding-top: 32px !important;
}

/* Spanish establishes the shared rail behavior: a white track, a light selected
   stage and one strong subject-colour number marker. Only Cartes changes the
   page canvas to the subject support colour; every other stage matches the
   warm-white header canvas exactly. */
body.final-brand.lesson-on:has(.app-shell-navigation--lesson),
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app,
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main {
  background-color: #fffefa !important;
}
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main:is(.division-flashcards-page, .french-cards-page, .geo-cards-page, .clock-cards-page) {
  background-color: var(--lesson-support) !important;
}
/* The stage card belongs directly to the page canvas. These canonical layout
   wrappers keep their spacing, but must not paint a second lavender sheet. */
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main:not(.division-flashcards-page, .french-cards-page, .geo-cards-page, .clock-cards-page) :is(.kid-lab-page, .kid-summary-page, .family-guide-page) {
  background: transparent !important;
}
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) :is(.french-module-bar, .geo-module-bar, .clock-module-bar) {
  position: relative !important;
  top: auto !important;
  display: block !important;
  width: min(calc(100% - 38px), 1280px) !important;
  min-height: 0 !important;
  margin: 17px auto 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) :is(.french-module-bar__identity, .french-module-bar__tools, .geo-module-identity, .geo-module-time, .clock-module-bar__identity, .clock-module-bar__signal) {
  display: none !important;
}
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) :is(.french-module-bar, .geo-module-bar, .clock-module-bar) > :is(.french-module-nav, .geo-module-nav, .clock-module-nav) {
  width: 100% !important;
  margin: 0 !important;
}
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) :is(.division-module-nav, .french-module-nav, .geo-module-nav, .clock-module-nav) {
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--lesson-accent) 12%, white);
  border-radius: 30px 38px 28px 35px;
  gap: 4px;
  background: #fff !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--lesson-accent) 10%, transparent);
}
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) :is(.division-module-nav, .french-module-nav, .geo-module-nav, .clock-module-nav) > button {
  display: grid;
  min-height: 72px;
  padding: 8px 13px 8px 8px;
  border: 0;
  border-radius: 22px 30px 20px 27px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  background: transparent !important;
  color: var(--ink) !important;
  text-align: left;
  box-shadow: none !important;
  transform: none !important;
}
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) :is(.division-module-nav, .french-module-nav, .geo-module-nav, .clock-module-nav) > button:is(.is-current, .is-active, [aria-current="page"]) {
  background: var(--lesson-support) !important;
  color: var(--ink) !important;
}
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) :is(.division-module-nav, .french-module-nav, .geo-module-nav, .clock-module-nav) > button:not(.is-current, .is-active, [aria-current="page"]):hover {
  background: color-mix(in srgb, var(--lesson-support) 62%, white) !important;
  transform: translateY(-2px) !important;
}
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) :is(.division-module-nav, .french-module-nav, .geo-module-nav, .clock-module-nav) > button > :is(i, b):first-child {
  display: grid;
  width: 48px;
  height: 48px;
  border-radius: 17px 22px 15px 21px;
  background: var(--lesson-accent) !important;
  color: var(--lesson-rail-on-accent) !important;
  font: 950 12px/1 var(--font-display);
  font-style: normal;
  letter-spacing: 0;
  place-items: center;
}
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) :is(.division-module-nav, .french-module-nav, .geo-module-nav, .clock-module-nav) > button > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) :is(.division-module-nav, .french-module-nav, .geo-module-nav, .clock-module-nav) > button:focus-visible {
  outline: 3px solid var(--lesson-accent);
  outline-offset: 3px;
}

/* Keep the colourful icons, while the banner itself belongs to the lesson subject. */
.final-brand .app-shell-navigation--lesson .app-bottom-banner {
  --bottom-banner-color: var(--lesson-accent);
  background: var(--bottom-banner-color);
  box-shadow: 0 22px 54px color-mix(in srgb, var(--lesson-accent) 34%, transparent);
  color: var(--lesson-on-accent);
}
.final-brand .app-shell-navigation--lesson .app-bottom-banner .app-rail__nav button,
.final-brand .app-shell-navigation--lesson .app-bottom-banner .app-rail__sign-out,
.final-brand .app-shell-navigation--lesson .app-bottom-banner .language-switch {
  color: var(--lesson-on-accent);
}
.final-brand .app-shell-navigation--lesson .app-bottom-banner .app-rail__nav button.is-active {
  background: var(--lesson-support);
  color: var(--ink);
}
.final-brand .app-shell-navigation--lesson .app-bottom-banner .app-nav-companion--teacher {
  background: color-mix(in srgb, white 18%, transparent);
  color: var(--lesson-on-accent);
}
.final-brand .app-shell-navigation--lesson .app-bottom-banner .app-nav-companion--teacher .app-nav-companion__copy small {
  color: var(--lesson-on-accent);
}

/* The canonical welcome inherits the exact accent/support pair of its subject. */
:where([data-course-theme]) .kid-lesson-welcome__hero {
  background-color: var(--lesson-support) !important;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .76) 0 4px, transparent 5px) !important;
}
:where([data-course-theme]) .kid-lesson-welcome__teacher > span {
  background: var(--lesson-accent) !important;
}
:where([data-course-theme]) .kid-lesson-welcome__copy > span,
:where([data-course-theme]) .kid-lesson-welcome__copy h1 em,
:where([data-course-theme]) .kid-lesson-welcome__goals > span,
:where([data-course-theme]) .kid-lesson-welcome__progress header span,
:where([data-course-theme]) .kid-lesson-welcome__progress header > strong {
  color: var(--lesson-accent) !important;
}
:where([data-course-theme]) .kid-lesson-welcome__copy button {
  background: var(--lesson-accent) !important;
  color: var(--lesson-on-accent) !important;
}
:where([data-course-theme]) .kid-lesson-welcome__copy button b {
  background: #fff !important;
  color: var(--lesson-accent) !important;
}
:where([data-course-theme]) .kid-lesson-welcome__progress-bar i {
  background: var(--lesson-accent) !important;
}

/* Every canonical lesson uses its own subject accent for interface identity.
   Educational proof art keeps the complete shared TGO palette. */
:where([data-course-theme]) :is(
  .kid-step-kicker,
  .kid-step-question > span,
  .kid-step-takeaway > span,
  .kid-lab-launch-copy > span,
  .kid-lab-heading > span,
  .kid-lab-answer > span,
  .kid-cards-heading > span,
  .kid-cards-progress > p strong,
  .kid-summary-heading > div > span,
  .kid-summary-example > div:first-child > span,
  .kid-summary-example > header > span,
  .kid-summary-journey > header > span,
  .kid-summary-journey li > span,
  .kid-summary-say span,
  .kid-lab-progress > p strong,
  .kid-lab-answer summary,
  .kid-lab-feedback > i,
  .kid-lab-finish-party strong,
  .kid-cards-finish > article > span,
  .kid-cards-actions > p i,
  .kid-cards-finish-cast strong,
  .family-guide-hero dt,
  .family-guide-hero > aside b,
  .family-guide-step > header span,
  .family-guide-setup strong,
  .family-guide-step__work span,
  .family-guide-step > footer strong,
  .family-guide-check summary,
  .family-guide-wins strong,
  .family-guide-finish > blockquote span
) {
  color: var(--lesson-accent) !important;
}
:where([data-course-theme]) :is(
  .kid-step-copy h1 > em,
  .kid-step-lab-copy h1 > em,
  .kid-lab-launch-copy h1 > em,
  .kid-lab-finish-card h1 > em,
  .kid-cards-finish h1 > em,
  .kid-summary-heading h1 > em
) {
  color: var(--lesson-accent) !important;
}
:where([data-course-theme]) :is(
  .kid-lesson-welcome__copy button,
  .kid-step-lab-copy button.is-next,
  .kid-lab-launch-copy > button,
  .kid-lab-finish-card button.is-next,
  .kid-lab-feedback button,
  .kid-cards-finish-actions button.is-next,
  .division-summary-actions button,
  .family-guide-actions button
) {
  background: var(--lesson-accent) !important;
  color: var(--lesson-on-accent) !important;
}
:where([data-course-theme]) :is(
  .kid-lesson-welcome__copy button b,
  .kid-step-lab-copy button.is-next b,
  .kid-lab-launch-copy > button b,
  .kid-lab-finish-card button.is-next b,
  .kid-cards-finish-actions button.is-next b,
  .family-guide-actions button b
) {
  background: var(--lesson-support) !important;
  color: var(--lesson-accent) !important;
}
:where([data-course-theme]) :is(
  .kid-lab-progress li.is-current i,
  .kid-lab-answer .maths-batch-lab__validate,
  .kid-lab-answer .maths-batch-lab__number > button,
  .kid-lab-answer .maths-batch-lab__trial button,
  .kid-lab-answer .maths-batch-lab__open button,
  .kid-cards-progress li.is-current i,
  .kid-summary-journey li > i,
  .family-guide-ready li > i,
  .family-guide-cheat dt > i,
  .family-guide-step > header > i,
  .family-guide-check li > i,
  .family-guide-step > blockquote
) {
  background: var(--lesson-accent) !important;
  color: var(--lesson-on-accent) !important;
}
:where([data-course-theme]) :is(
  .kid-lab-answer .maths-batch-lab__choices button i,
  .kid-lab-answer .maths-batch-lab__multi button i,
  .kid-lab-answer button.is-selected
) {
  border-color: color-mix(in srgb, var(--lesson-accent) 34%, white) !important;
  background: var(--lesson-support) !important;
  color: var(--lesson-accent) !important;
}
:where([data-course-theme]) .kid-step-question {
  width: 100%;
  max-width: none;
  border-left-color: var(--lesson-accent);
}
:where([data-course-theme]) .kid-step-takeaway {
  border-top-color: color-mix(in srgb, var(--lesson-accent) 24%, white);
}

/* The numbered rail now owns progress. Remove the obsolete oversized number
   from the top-right of ordinary lesson cards. */
:where([data-course-theme]) .kid-step-card:not(.kid-step-card--lab) > .kid-step-watermark {
  display: none;
}

/* Authored lesson titles have at most two intentional lines. Runtime fitting
   keeps each authored line intact; questions stay on one line on wide screens. */
:where([data-course-theme]) .kid-step-copy h1 {
  width: 100%;
  max-width: none;
}
:where([data-course-theme]) .kid-step-copy h1 > :is(span, em) {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}
:where([data-course-theme]) .kid-step-question > strong {
  display: block;
  width: 100%;
  max-width: none;
  white-space: nowrap;
}

/* Résumé examples are two full-width horizontal layers: copy, then artwork.
   A single proof must span the complete visual row and keep its aspect ratio. */
:where([data-course-theme]) .kid-summary-example {
  grid-template-columns: minmax(0, 1fr) !important;
}
:where([data-course-theme]) .kid-summary-example > :is(div, header):first-child {
  width: 100%;
  max-width: none;
}
:where([data-course-theme]) .kid-summary-example-visual > :only-child {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  grid-column: 1 / -1 !important;
  place-self: stretch !important;
}
:where([data-course-theme]) .kid-summary-example-visual > :only-child :is(svg, img),
:where([data-course-theme]) .kid-summary-example-visual > :is(svg, img):only-child {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

@media (max-width: 900px) {
  .final-brand .app-shell-navigation--lesson {
    height: 132px;
    min-height: 132px;
    grid-template-columns: 104px minmax(0, 1fr) minmax(178px, auto);
  }
  .lesson-shell-heading { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .lesson-shell-heading__chip { min-height: 34px; padding-inline: 13px; border-left-width: 7px; gap: 8px; font-size: 12px; }
  .lesson-shell-heading__title { font-size: clamp(20px, 3.5vw, 29px); }
  .lesson-shell-heading__back { min-width: 142px; min-height: 48px; padding-inline: 14px; font-size: 11px; }
  .final-brand .app-shell-navigation--lesson .app-shell__student-name { max-width: 82px; }
  .final-brand .app-shell-navigation--lesson .app-shell__student-name strong { font-size: 17px; }
  :where([data-course-theme]) .kid-step-question > strong { white-space: normal; text-wrap: balance; }
}

@media (max-width: 600px) {
  .final-brand .app-shell-navigation--lesson {
    height: 148px;
    min-height: 148px;
    padding-inline: 10px;
    grid-template-columns: 78px minmax(0, 1fr) minmax(116px, auto);
    gap: 7px;
  }
  .final-brand .app-shell-navigation--lesson .app-shell__logo { width: 78px; height: 94px; padding: 5px; }
  .final-brand .app-shell-navigation--lesson .app-shell__logo-art.good-ones-logo { font-size: 29px; }
  .lesson-shell-heading { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 6px; }
  .lesson-shell-heading__copy { gap: 5px; }
  .lesson-shell-heading__chip { min-height: 30px; padding: 0 9px; border-left-width: 6px; gap: 6px; font-size: 10px; }
  .lesson-shell-heading__title { font-size: clamp(16px, 4.4vw, 22px); line-height: 1; }
  .lesson-shell-heading__back { width: 100%; min-width: 0; min-height: 38px; padding: 5px 10px; gap: 7px; font-size: 11px; }
  .lesson-shell-heading__back span { font-size: 17px; }
  .lesson-shell-heading__back b { display: none; }
  .lesson-shell-heading__back em { display: inline; }
  .final-brand .app-shell-navigation--lesson .app-shell__profile { gap: 6px; }
  .final-brand .app-shell-navigation--lesson .app-shell__student-name { max-width: 54px; }
  .final-brand .app-shell-navigation--lesson .app-shell__student-name small b { display: none; }
  .final-brand .app-shell-navigation--lesson .app-shell__student-name small em { display: inline; }
  .final-brand .app-shell-navigation--lesson .app-shell__student-name strong { font-size: 13px; }
  .final-brand .app-shell-navigation--lesson .app-shell__profile .role-menu__trigger { width: 68px; height: 68px; }
  .final-brand .app-shell-navigation--lesson .app-shell__profile .learner-avatar-frame { width: 64px; height: 64px; border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-shell-heading__back,
  .final-brand .app-shell-navigation--lesson .app-bottom-banner {
    transition: none !important;
  }
}

/* five-stage journey. No card-number or application navigation changes. */
@media (min-width: 1025px) {
  body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main:has(> .division-module-nav, > .clock-module-bar > .clock-module-nav) {
    display: grid !important;
    grid-template-columns: 192px minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 0;
    align-items: start;
  }
  body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main:has(> .division-module-nav, > .clock-module-bar > .clock-module-nav) > :not(.division-module-bar, .division-module-nav, .clock-module-bar, [role="status"], [hidden]) {
    grid-column: 2;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
  body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main > :is(.division-module-nav, .clock-module-bar:has(> .clock-module-nav)) {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 100% !important;
    margin: 0 !important;
  }
  body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main > .division-module-nav,
  body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main > .clock-module-bar > .clock-module-nav {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, auto);
    gap: 8px;
    overflow: visible;
  }
  body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main > .division-module-nav::before {
    top: 36px;
    bottom: 36px;
    left: 39px;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 3px;
    background: var(--lesson-support);
  }
  body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main > :is(.division-module-nav, .clock-module-bar) button > span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Leçon titles. Authored title words are unchanged here. */
body.final-brand.lesson-on #app > main.division-lesson-page .kid-step-card:not(.kid-step-card--lab) > .kid-step-copy > h1,
body.final-brand.lesson-on #app > main.science-division-lesson .division-reader-section > h2 {
  width: 100%;
  max-width: none;
  min-width: 0;
}
@media (min-width: 1025px) {
  body.final-brand.lesson-on #app > main.division-lesson-page .kid-step-card:not(.kid-step-card--lab) > .kid-step-copy > h1,
  body.final-brand.lesson-on #app > main.science-division-lesson .division-reader-section > h2 {
    display: flex;
    align-items: baseline;
    gap: .22em;
    font-size: clamp(34px, 4vw, 58px);
    white-space: nowrap;
  }
  body.final-brand.lesson-on #app > main.division-lesson-page .kid-step-copy > h1 > :is(span, em),
  body.final-brand.lesson-on #app > main.science-division-lesson .division-reader-section > h2 > em {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap;
  }
  body.final-brand.lesson-on #app > main.science-division-lesson .division-reader-section > h2 > br {
    display: none;
  }
}
/* A measured overlong desktop title wraps at the 34px floor instead of clipping. */
body.final-brand.lesson-on #app > main.division-lesson-page .kid-step-card:not(.kid-step-card--lab) > .kid-step-copy > h1[data-lesson-title-wrap],
body.final-brand.lesson-on #app > main.science-division-lesson .division-reader-section > h2[data-lesson-title-wrap] {
  display: block;
  white-space: normal;
  text-wrap: pretty;
}
body.final-brand.lesson-on #app > main.division-lesson-page .kid-step-copy > h1[data-lesson-title-wrap] > :is(span, em),
body.final-brand.lesson-on #app > main.science-division-lesson .division-reader-section > h2[data-lesson-title-wrap] > em {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.final-brand.lesson-on #app > main.division-lesson-page .kid-step-copy > h1[data-lesson-title-wrap] > em,
body.final-brand.lesson-on #app > main.science-division-lesson .division-reader-section > h2[data-lesson-title-wrap] > em {
  margin-inline-start: .22em;
}
@media (max-width: 1024px) {
  body.final-brand.lesson-on #app > main.science-division-lesson .division-reader-section > h2 {
    font-size: clamp(34px, 4.6vw, 58px);
    overflow-wrap: anywhere;
  }
  body.final-brand.lesson-on #app > main.division-lesson-page .kid-step-copy > h1 {
    display: block;
    white-space: normal;
  }
  body.final-brand.lesson-on #app > main.division-lesson-page .kid-step-copy > h1 > :is(span, em),
  body.final-brand.lesson-on #app > main.science-division-lesson .division-reader-section > h2 > em {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Existing teaching precedes the question on explicitly opted-in Leçon cards. */
#app > main [data-lesson-reading-first] > .kid-step-copy > h1 + .kid-step-explanation {
  margin-top: 0;
}
#app > main [data-lesson-reading-first] > .kid-step-copy > .kid-step-takeaway + .kid-step-question {
  margin-top: 30px;
}

/* A single teaching sheet joins the explanation and its memory sentence. */
#app > main [data-lesson-reading-first] > .kid-step-copy > .kid-step-teaching {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--lesson-accent) 18%, white);
  border-radius: 24px;
  background: #fffefa;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 5%, transparent);
}
#app > main [data-lesson-reading-first] .kid-step-teaching > .kid-step-teaching__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px) 0;
  color: var(--ink);
  font: 850 14px/1.3 var(--font-body);
  letter-spacing: .1em;
}
#app > main [data-lesson-reading-first] .kid-step-teaching__heading > svg {
  width: 30px;
  height: 30px;
  flex: none;
  fill: none;
  stroke: var(--lesson-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#app > main [data-lesson-reading-first] .kid-step-teaching > .kid-step-explanation {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 20px clamp(20px, 3vw, 36px) clamp(26px, 3vw, 36px);
  gap: 16px;
  border: 0;
  background: transparent;
}
#app > main [data-lesson-reading-first] .kid-step-teaching > .kid-step-explanation p {
  margin: 0;
  color: var(--ink);
  font: 650 clamp(21px, 1.75vw, 26px)/1.55 var(--font-body);
  overflow-wrap: break-word;
}
#app > main [data-lesson-reading-first] .kid-step-teaching > .kid-step-explanation > p:first-child {
  font-size: clamp(23px, 2.1vw, 30px);
  font-weight: 750;
}
#app > main [data-lesson-reading-first] .kid-step-teaching > .kid-step-takeaway {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px clamp(20px, 3vw, 36px) 24px;
  gap: 10px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, #fff5c8 75%, var(--ink));
  border-radius: 0 0 23px 23px;
  background: #fff5c8;
}
#app > main [data-lesson-reading-first] .kid-step-teaching > .kid-step-takeaway > span {
  color: #66510e;
  font: 850 12px/1.3 var(--font-body);
  letter-spacing: .12em;
}
#app > main [data-lesson-reading-first] .kid-step-teaching > .kid-step-takeaway > strong {
  max-width: none;
  color: var(--ink);
  font: 750 clamp(21px, 1.9vw, 26px)/1.5 var(--font-body);
}
#app > main [data-lesson-reading-first] > .kid-step-copy > .kid-step-teaching + .kid-step-question {
  margin-top: 32px;
}

/* Question and evidence share one frame, paired with the teaching sheet. */
#app > main [data-lesson-reading-first] > .kid-step-inquiry {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  min-width: 0;
  margin: 0 clamp(36px, 6vw, 88px) 32px;
  border: 1px solid color-mix(in srgb, var(--lesson-accent) 18%, white);
  border-radius: 24px;
  background: #fffefa;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 5%, transparent);
}
#app > main [data-lesson-reading-first] > .kid-step-inquiry > .kid-step-question {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 3vw, 36px);
  gap: 14px;
  border: 0;
  border-radius: 23px 23px 0 0;
  background: var(--lesson-support);
}
#app > main [data-lesson-reading-first] .kid-step-inquiry .kid-step-question__heading,
#app > main [data-lesson-reading-first] .kid-step-inquiry > .kid-step-proof-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  color: var(--ink);
  font: 850 14px/1.4 var(--font-body);
  letter-spacing: .1em;
}
#app > main [data-lesson-reading-first] .kid-step-inquiry .kid-step-question__heading > span,
#app > main [data-lesson-reading-first] .kid-step-inquiry > .kid-step-proof-heading > span {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
#app > main [data-lesson-reading-first] .kid-step-inquiry .kid-step-question__heading > svg,
#app > main [data-lesson-reading-first] .kid-step-inquiry > .kid-step-proof-heading > svg {
  width: 30px;
  height: 30px;
  flex: none;
  fill: none;
  stroke: var(--lesson-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#app > main [data-lesson-reading-first] .kid-step-inquiry > .kid-step-question > strong {
  min-width: 0;
  max-width: none;
  color: var(--ink);
  font: 750 clamp(23px, 2.1vw, 30px)/1.45 var(--font-body);
  white-space: normal;
  overflow-wrap: break-word;
}
#app > main [data-lesson-reading-first] .kid-step-inquiry > .kid-step-question > small {
  color: color-mix(in srgb, var(--ink) 78%, white);
  font: 650 16px/1.5 var(--font-body);
}
#app > main [data-lesson-reading-first] .kid-step-inquiry > .kid-step-proof-heading {
  margin: 0;
  padding: 24px clamp(20px, 3vw, 36px) 16px;
  border-top: 1px solid color-mix(in srgb, var(--lesson-accent) 18%, white);
}
#app > main [data-lesson-reading-first] .kid-step-inquiry > .kid-step-visual {
  min-height: 0;
  padding: 0 clamp(6px, 1.5vw, 18px) 24px;
}
@media (max-width: 720px) {
  #app > main [data-lesson-reading-first] > .kid-step-inquiry {
    margin-inline: 22px;
  }
}

/* Four learner actions use one heading treatment and one outline-icon family. */
#app > main [data-lesson-reading-first] :is(.kid-step-teaching, .kid-step-inquiry) :is(header, span).kid-step-section-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  color: var(--ink);
  font: 850 15px/1.4 var(--font-body);
  letter-spacing: .025em;
  text-transform: none;
}
#app > main [data-lesson-reading-first] :is(.kid-step-teaching, .kid-step-inquiry) .kid-step-section-heading > span {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
#app > main [data-lesson-reading-first] :is(.kid-step-teaching, .kid-step-inquiry) .kid-step-section-heading > svg {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
  fill: none;
  stroke: var(--lesson-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Verification and retention titles share the subject color; surfaces stay unchanged. */
#app > main [data-lesson-reading-first] .kid-step-inquiry > header.kid-step-proof-heading {
  color: var(--lesson-accent);
}