/* Atlas lesson chrome and learning surfaces. Existing controls keep their behavior. */
body.lesson-mode,
body.lesson-mode:has(.word-classes-exercise) {
  --learn-page: #eaf6fa;
  --learn-ink: #152b4b;
  --learn-muted: #46677a;
  --learn-primary: #075f85;
  --learn-action: #00698f;
  --learn-line: #cce4ed;
  --learn-track: #d9edf3;
  --learn-soft: #dcf1f8;
  --learn-mint: #e1f4eb;
  --learn-mint-ink: #195f47;
  --learn-danger: #913d3e;
  --learn-danger-bg: #fbecea;
  --learn-inline: clamp(18px, 4.6vw, 28px);
  --learn-content: 790px;
  --learn-shell: 900px;
  color: var(--learn-ink);
  background: var(--learn-page);
  font-family: Cairo, 'IBM Plex Sans Arabic', Tahoma, sans-serif;
}
.lesson-mode .flow-shell {
  width: 100%;
  max-width: var(--learn-shell);
  border: 0;
  border-radius: 0;
  color: var(--learn-ink);
  background: var(--learn-page);
  font-family: inherit;
  font-weight: 400;
}
.lesson-mode .flow-header,
.lesson-mode .classifier-header.flow-header {
  min-height: 74px;
  gap: 10px;
  padding: 10px var(--learn-inline);
  border: 0;
  border-radius: 0;
  background: var(--learn-page);
  backdrop-filter: none;
}
.lesson-mode .flow-header-copy { display: grid; gap: 2px; }
.lesson-mode .flow-header-copy p {
  color: var(--learn-muted);
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
}
.lesson-mode .flow-header-copy h1,
.lesson-mode .atlas-flow-stage {
  color: var(--learn-ink);
  font-size: clamp(17px, 4.5vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0;
}
.lesson-mode .atlas-flow-brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
  color: var(--learn-primary);
  font: 400 clamp(25px, 6vw, 32px)/1 Lalezar, Cairo, 'IBM Plex Sans Arabic', sans-serif;
  margin-inline-start: auto;
}
.lesson-mode .atlas-flow-stage + h1 {
  font-size: 12px;
  line-height: 1.45;
  color: var(--learn-muted);
}
.lesson-mode .flow-header-copy:has(.atlas-flow-stage) > p {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lesson-mode .flow-header :is(.flow-back,.flow-menu,.classifier-book) {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 13px;
  background: var(--learn-track);
  color: var(--learn-primary);
}
.lesson-mode .flow-back svg { width: 19px; height: 19px; }
.lesson-mode .flow-menu svg { width: 19px; height: 19px; }
.lesson-mode .qa-header-actions { gap: 6px; }
.lesson-mode .qa-lesson-button {
  min-height: 42px;
  padding-inline: 8px;
  border: 1px solid var(--learn-line);
  border-radius: 12px;
  color: var(--learn-primary);
  background: #fff;
}
.lesson-mode .flow-shell :is(button,a,summary):focus-visible {
  outline: 2px solid var(--learn-primary);
  outline-offset: 3px;
}

/* Illustrated lesson headers and single-column waypoint cards. */
.lesson-mode .journey-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: flex-start;
  min-height: 150px;
  margin: 0 var(--learn-inline) 15px;
  padding: 17px 20px;
  border: 1px solid var(--learn-line);
  border-radius: 19px;
  text-align: start;
  background: linear-gradient(125deg, #f2fbfd, #d3eef4);
}
.lesson-mode .journey-banner::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 10% auto 10% 15px;
  width: min(36%, 210px);
  background: var(--atlas-lesson-art, none) no-repeat center / contain;
  pointer-events: none;
}
.lesson-mode .flow-shell.atlas-flow-arabic { --atlas-lesson-art: url('assets/atlas/arabic.svg'); }
.lesson-mode .flow-shell.atlas-flow-english { --atlas-lesson-art: url('assets/atlas/english.svg'); }
.lesson-mode .flow-shell:is(.atlas-flow-arabic,.atlas-flow-english) .journey-banner-copy { max-width: min(65%, 580px); min-width: 0; }
.lesson-mode .flow-shell[data-phase=explain] .journey-banner { display: none; }
.lesson-mode .journey-banner-copy { max-width: min(100%, 580px); color: var(--learn-ink); }
.lesson-mode .journey-pattern { display: none; }
.lesson-mode .journey-kicker {
  display: inline-block;
  padding: 2px 11px;
  margin: 0 0 6px;
  border-radius: 999px;
  color: var(--learn-primary);
  background: #ffffffce;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
}
.lesson-mode .journey-banner h2 {
  color: var(--learn-ink);
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1.36;
  margin: 0 0 4px;
  text-align: start;
}
.lesson-mode .journey-banner h2[lang=en] { text-align: right; }
.lesson-mode :is(.journey-subtitle,.journey-english) {
  margin: 4px 0 8px;
  color: var(--learn-muted);
  font-size: 13px;
  line-height: 1.7;
}
.lesson-mode .journey-english { text-align: right; }
.lesson-mode .journey-count {
  border: 1px solid var(--learn-line);
  color: var(--learn-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
}
.lesson-mode .journey-content {
  max-width: var(--learn-content);
  margin: 0 auto;
  padding: 4px var(--learn-inline) 28px;
}
.lesson-mode .journey-content > h2 {
  color: var(--learn-ink);
  font-size: clamp(18px, 4.7vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  margin: 8px 0 11px;
}
.lesson-mode .journey-content > .flow-prose {
  margin: 0 0 13px;
  color: var(--learn-muted);
  font-size: 14px;
}
.lesson-mode .journey-grid {
  grid-template-columns: 1fr;
  gap: 9px;
}
.lesson-mode .journey-grid .journey-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 19px;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  min-height: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--learn-line);
  border-radius: 13px;
  color: var(--learn-ink);
}
.lesson-mode .journey-card-icon { grid-area: 1 / 1 / -1 / 2; width: 40px; height: 40px; }
.lesson-mode .journey-card.mint .journey-card-icon { background: var(--learn-mint); color: var(--learn-mint-ink); }
.lesson-mode .journey-card.coral .journey-card-icon { background: #fff1d7; color: #784911; }
.lesson-mode .journey-card.sky .journey-card-icon { background: var(--learn-soft); color: var(--learn-primary); }
.lesson-mode .journey-card-arrow {
  grid-area: 1 / 3 / -1 / 4;
  position: static;
  color: var(--learn-primary);
}
.lesson-mode .journey-card-arrow svg { width: 18px; height: 18px; }
.lesson-mode .journey-card-title {
  grid-area: 1 / 2;
  margin: 0;
  color: var(--learn-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.lesson-mode .journey-card-description,
.lesson-mode .journey-card-status {
  grid-column: 2;
  margin: 0;
  color: var(--learn-muted);
  font-size: 12px;
  line-height: 1.65;
}
.lesson-mode .journey-card-status { color: var(--learn-primary); font-weight: 700; font-size: 11px; }
.lesson-mode .journey-grid .journey-card:hover { transform: none; border-color: #84b9ca; background: #fafeff; }
.lesson-mode .journey-content .section-choices { display: grid; gap: 9px; }
.lesson-mode .journey-content .section-choice {
  min-height: 65px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--learn-line);
  border-radius: 13px;
  color: var(--learn-ink);
}
.lesson-mode .journey-content .section-choice strong { font-size: 16px; font-weight: 700; }
.lesson-mode .journey-content .section-choice small { color: var(--learn-muted); font-size: 12px; }
.lesson-mode .journey-content .section-choice svg { color: var(--learn-primary); }
.lesson-mode .journey-content .section-choice svg:first-child {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 10px;
  background: var(--learn-soft);
}
.lesson-mode :is(.lesson-outline,.flow-next-lesson,.qa-overview-link) {
  background: #fff;
  border-color: var(--learn-line);
  color: var(--learn-primary);
}

/* Progress is a card above the reading or question. */
.lesson-mode .flow-progress {
  width: calc(100% - var(--learn-inline) * 2);
  max-width: calc(var(--learn-content) - var(--learn-inline) * 2);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px 12px;
  align-items: center;
  min-height: 0;
  margin: 0 auto 12px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--learn-line);
  border-radius: 13px;
  color: var(--learn-ink);
}
.lesson-mode .flow-progress strong {
  grid-area: 1 / 1;
  color: var(--learn-ink);
  font-weight: 700;
  font-size: 13px;
}
.lesson-mode .flow-progress > span:last-child {
  grid-area: 1 / 2;
  color: var(--learn-primary);
  font-size: 12px;
  font-weight: 700;
}
.lesson-mode .flow-progress .flow-progress-track {
  grid-column: 1 / -1;
  max-width: none;
  height: 6px;
  background: var(--learn-track);
}
.lesson-mode .flow-progress .flow-progress-track i { background: #087fa1; }
.lesson-mode .flow-content {
  width: 100%;
  max-width: var(--learn-content);
  padding: 0 var(--learn-inline) 16px;
}
.lesson-mode .flow-prose,
.lesson-mode .flow-instruction {
  color: var(--learn-muted);
  font-size: clamp(14px, 3.7vw, 16px);
  line-height: 1.85;
}
.lesson-mode .flow-instruction { margin: 0 0 10px; }
.lesson-mode .flow-section-title {
  color: var(--learn-ink);
  font-size: clamp(21px, 5.5vw, 27px);
  line-height: 1.55;
  font-weight: 700;
  margin: 0 0 9px;
}
.lesson-mode .read-content > .flow-section-title {
  margin: 0;
  padding: 13px 13px 1px;
  border: 1px solid var(--learn-line);
  border-block-end: 0;
  border-radius: 14px 14px 0 0;
  background: #fff;
}
.lesson-mode .read-content > .flow-section-title + .flow-prose {
  padding: 7px 13px 12px;
  border: 1px solid var(--learn-line);
  border-block-start: 0;
  border-radius: 0 0 14px 14px;
  background: #fff;
}
.lesson-mode .read-content > .flow-section-title + .flow-prose + .formula-box,
.lesson-mode .read-rule-stage > .formula-box { margin-block-start: 10px; }
.lesson-mode :is(.formula-box,.flow-examples,.flow-note,.reading-context) {
  padding: 13px;
  margin-block-start: 10px;
  border: 1px solid var(--learn-line);
  border-radius: 13px;
  background: #fff;
  color: var(--learn-ink);
}
.lesson-mode :is(.formula-box,.flow-examples,.flow-note) h3 {
  margin: 0 0 8px;
  color: var(--learn-primary);
  font-size: 15px;
  font-weight: 700;
}
.lesson-mode :is(.formula-box,.flow-note) p { font-size: 14px; line-height: 1.85; }
.lesson-mode .flow-example {
  padding: 9px 11px;
  margin: 7px 0 0;
  border: 0;
  border-radius: 10px;
  background: var(--learn-mint);
  color: var(--learn-mint-ink);
}
.lesson-mode .flow-example:last-child { padding-bottom: 9px; }
.lesson-mode .flow-example-text { color: var(--learn-mint-ink); font-size: 16px; font-weight: 700; }
.lesson-mode .flow-example-note { color: #3e685c; font-size: 12px; line-height: 1.7; }
.lesson-mode :is(.flow-note,.reading-context) { background: #fff1d7; border-color: #edd8ac; color: #684b24; }
.lesson-mode .flow-note h3 { color: #784911; }
.lesson-mode .reading-context {
  width: calc(100% - var(--learn-inline) * 2);
  max-width: calc(var(--learn-content) - var(--learn-inline) * 2);
  margin: 0 auto 10px;
}
.lesson-mode .reading-context ~ .read-content { padding-top: 0; }
/* The first beginner Present Simple page follows the calendar model. */
.lesson-mode .habit-intro-page { --learn-content: 720px; }
.lesson-mode .habit-intro-page #lesson-content { background: #fff; }
.lesson-mode .flow-shell.habit-intro-page[data-phase=explain] .habit-intro-banner {
  display: flex;
  align-items: center;
  width: min(calc(100% - var(--learn-inline) * 2), var(--learn-content));
  min-height: 98px;
  margin: 0 auto 15px;
  padding: 12px clamp(12px, 4vw, 26px);
  overflow: hidden;
  border-color: #c3e8df;
  background: #e0faf4;
}
.lesson-mode .habit-intro-page .habit-intro-banner::after { content: none; }
.lesson-mode .habit-intro-page .habit-intro-banner .journey-banner-copy {
  position: relative;
  z-index: 1;
  max-width: none;
}
.lesson-mode .habit-intro-banner .journey-kicker {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #1a624e;
  font-size: 13px;
}
.lesson-mode .habit-intro-banner h2 {
  margin: 2px 0 0;
  color: #12372e;
  font-size: clamp(22px, 5vw, 31px);
}
.habit-intro-banner img {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
@media (max-width: 420px) {
  .habit-intro-banner img { opacity: .58; }
}
.lesson-mode .habit-intro-page .flow-back svg,
.lesson-mode .habit-intro-page .flow-nav-next:disabled svg { display: none; }
.lesson-mode .habit-intro-page .flow-back::after,
.lesson-mode .habit-intro-page .flow-nav-next:disabled::after {
  content: "";
  flex: none;
  background: no-repeat center;
}
.lesson-mode .habit-intro-page .flow-back::after {
  width: 23px;
  height: 23px;
  background-image: url('assets/lessons/present-simple-calendar/back-chevron.svg');
}
.lesson-mode .habit-intro-page .flow-nav-next:disabled::after {
  width: 19px;
  height: 19px;
  background-image: url('assets/lessons/present-simple-calendar/next-arrow.svg');
}
.lesson-mode .habit-intro-page .read-content > :is(.flow-section-title,.flow-prose) {
  padding: 0;
  border: 0;
  background: transparent;
}
.lesson-mode .habit-intro-page .read-content > .flow-section-title {
  color: #12372e;
  font-size: clamp(25px, 6vw, 34px);
}
.lesson-mode .habit-intro-page .read-content > .flow-prose { margin: 5px 0 14px; }

.habit-intro-scene {
  margin: 0 0 8px;
  color: var(--learn-mint-ink);
  font-size: 15px;
  font-weight: 700;
}
.habit-intro-calendar {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(6px, 1.4vw, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.habit-intro-calendar li {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 3px;
  border: 1px solid #bcdcc9;
  border-radius: 15px;
  background: #f5fbf8;
  color: #1a624e;
  font-size: clamp(13px, 3.4vw, 16px);
}
.habit-intro-book {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #e0faf4;
}
.habit-intro-book img { display: block; }
.habit-intro-definition {
  margin: 12px 0;
  padding: 8px 12px;
  border-radius: 13px;
  background: #fff6e2;
  color: #6b5014;
  text-align: center;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
}
.habit-intro-model,
.habit-intro-reference {
  padding: clamp(10px, 3vw, 16px);
  border: 1px solid #cbded4;
  border-radius: 16px;
  background: #f5fbf8;
  color: #12372e;
}
.habit-intro-model {
  background: #e9f7ef;
  text-align: center;
}
.habit-intro-model h3,
.habit-intro-reference h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.habit-intro-translation {
  margin: 4px 0;
  font-size: clamp(20px, 5.2vw, 25px);
  font-weight: 700;
}
.habit-intro-sentence {
  margin: 6px 0 12px;
  font-family: Arial, sans-serif;
  font-size: clamp(24px, 6vw, 31px);
  line-height: 1.4;
  font-weight: 700;
}
.habit-intro-second-model {
  margin-block-start: 14px;
  padding-block-start: 12px;
  border-block-start: 1px solid #cbded4;
}
.habit-intro-model-speaker {
  font-size: 15px;
  font-weight: 700;
}
.habit-intro-model-hint {
  color: var(--learn-mint-ink);
  font-size: 13px;
}
.habit-intro-term {
  margin: 12px 0;
  color: #36574a;
  font-size: clamp(15px, 3.7vw, 17px);
}
.habit-intro-reference { margin-block-start: 12px; }
.habit-intro-reference p {
  margin: 2px 0 8px;
  color: #4d635a;
  font-size: 14px;
}
.habit-intro-parts,
.habit-intro-pronouns {
  display: grid;
  grid-auto-columns: minmax(0,1fr);
  grid-auto-flow: column;
  gap: clamp(5px, 1.4vw, 9px);
  margin: 0;
}
.habit-intro-parts { grid-template-columns: .72fr 1fr 1.35fr; }
.habit-intro-pronouns + .habit-intro-pronouns { margin-block-start: 7px; }
.habit-intro-parts > div,
.habit-intro-pronouns > div {
  min-width: 0;
  padding: 6px 2px;
  border: 1px solid #d7e8df;
  border-radius: 9px;
  background: #fff;
  text-align: center;
}
.habit-intro-parts > div:first-child {
  background: #f0ebff;
  border-color: #ddd2ef;
  color: #513b75;
}
.habit-intro-parts > div:nth-child(2) { background: #f1fbf5; }
.habit-intro-parts dt,
.habit-intro-pronouns dt {
  font-family: Arial, sans-serif;
  font-size: clamp(15px, 3.9vw, 20px);
  line-height: 1.4;
  font-weight: 700;
}
.habit-intro-parts dd,
.habit-intro-pronouns dd {
  margin: 2px 0 0;
  color: #36574a;
  font-size: clamp(11px, 3.2vw, 15px);
  line-height: 1.55;
}
.habit-intro-more {
  margin-block-start: 10px;
  border: 1px solid var(--learn-line);
  border-radius: 11px;
  background: #fff;
}
.habit-intro-more summary {
  padding: 9px 10px;
  color: var(--learn-primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.habit-intro-more ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0 10px 10px;
  list-style: none;
}
.habit-intro-more li {
  display: grid;
  gap: 3px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--learn-mint);
  font-size: 14px;
}
.habit-intro-more li strong {
  font-family: Arial, sans-serif;
  text-align: end;
}
.habit-intro-now-example {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin-block-start: 4px;
}
.lesson-mode .habit-intro-page .read-check {
  padding: 12px;
  border-radius: 15px;
  background: #e8f5ff;
}
.lesson-mode .habit-intro-page .read-check .flow-question > span {
  color: var(--learn-primary);
  font-size: 13px;
}
.lesson-mode .habit-intro-page .read-check .flow-question h3 {
  font-size: clamp(15px, 4vw, 20px);
  font-weight: 700;
}
.lesson-mode .habit-intro-page .flow-options {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.lesson-mode .habit-intro-page .option:not(:disabled) .option-dot {
  width: 18px;
  height: 18px;
  border: 0;
  background: url('assets/lessons/present-simple-calendar/answer-radio.svg') no-repeat center;
}

.lesson-mode .read-check { margin-block-start: 13px; }
.lesson-mode .flow-question {
  margin: 0 0 11px;
  padding: 12px 13px 14px;
  border-radius: 14px;
  color: var(--learn-ink);
  background: var(--learn-soft);
}
.lesson-mode .flow-question > span {
  margin: 0 0 4px;
  color: var(--learn-primary);
  font-size: 12px;
  font-weight: 700;
}
.lesson-mode .flow-question :is(h2,h3) {
  color: var(--learn-ink);
  font-size: clamp(16px, 4.25vw, 20px);
  font-weight: 700;
  line-height: 1.7;
}
.lesson-mode .practice-translation {
  margin-block-start: 4px;
  color: var(--learn-muted);
}
.lesson-mode .guided-practice-link {
  margin-block: 0 12px;
  color: var(--learn-primary);
}
.lesson-mode .practice-rule-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-block-end: 10px;
  padding-inline: 11px;
  border: 1px solid var(--learn-line);
  border-radius: 10px;
  background: #fff;
  color: var(--learn-primary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}
.lesson-mode .practice-rule-summary svg { width: 17px; height: 17px; }
.lesson-mode .practice-rule-dialog {
  width: min(690px, calc(100% - 24px));
  max-height: 88dvh;
  padding: 0;
  border-color: var(--learn-line);
  border-radius: 16px;
  background: #fff;
  color: var(--learn-ink);
  overscroll-behavior: contain;
}
.lesson-mode .practice-rule-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  border-block-end: 1px solid var(--learn-line);
  background: #fff;
}
.lesson-mode .practice-rule-header h2 {
  margin: 0;
  font-size: clamp(17px, 4.5vw, 22px);
  color: var(--learn-primary);
}
.lesson-mode .practice-rule-header .icon-button {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--learn-primary);
}
.lesson-mode .practice-rule-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.7;
}
.lesson-mode .practice-rule-card {
  padding: 8px 11px;
  border: 1px solid var(--learn-line);
  border-radius: 9px;
  background: #f4fbfd;
}
.lesson-mode .practice-rule-card h3 { margin: 0 0 4px; color: var(--learn-primary); font-size: 15px; }
.lesson-mode .practice-rule-card[aria-current=true] {
  border: 2px solid #2f7d50;
  background: #eef9f1;
}
.lesson-mode .practice-rule-card[aria-current=true] h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--learn-mint-ink);
  font-weight: 700;
}
.lesson-mode .practice-rule-current {
  padding: 1px 7px;
  border-radius: 20px;
  background: #17633c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.lesson-mode .practice-rule-card p { margin: 0; }
.lesson-mode .practice-rule-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  align-items: center;
  gap: 5px 14px;
  padding-block: 7px;
}
.lesson-mode .practice-rule-row + .practice-rule-row { border-block-start: 1px solid var(--learn-line); }
.lesson-mode .practice-rule-pattern {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}
.lesson-mode .practice-rule-pattern > bdi {
  padding-inline: 5px;
  border-radius: 4px;
  background: var(--learn-track);
  color: var(--learn-primary);
  font-weight: 700;
  white-space: nowrap;
}
.lesson-mode .practice-rule-example {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 8px;
  direction: ltr;
}
.lesson-mode .practice-rule-example [lang=en] { text-align: left; font-weight: 700; }
.lesson-mode .practice-rule-example p:last-child { color: var(--learn-muted); font-size: 13px; }
.lesson-mode .practice-rule-be {
  margin-block-start: 8px;
  padding-block-start: 6px;
  border-block-start: 1px solid var(--learn-line);
  color: var(--learn-muted);
  font-size: 13px;
}
.lesson-mode .practice-rule-be p { margin: 0; }
.lesson-mode .practice-rule-be strong { color: var(--learn-primary); }
.lesson-mode .practice-rule-be p[lang=en] { text-align: left; }
.lesson-mode .practice-choice-reason { margin-block-start: 8px; }
.lesson-mode .practice-correction {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin-block: 10px;
}
.lesson-mode .practice-correction h3 {
  margin: 0;
  color: inherit;
  font-size: 1rem;
}
.lesson-mode .practice-correction-motion {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--learn-line);
  border-radius: 12px;
  background: #fff;
  color: var(--learn-ink);
}
.lesson-mode .practice-correction-motion p { margin: 0; }
.lesson-mode .practice-correction-label {
  color: var(--learn-muted);
  font-weight: 700;
}
.lesson-mode .practice-correction-line {
  text-align: left;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.lesson-mode .practice-correction-line b {
  display: inline-block;
  padding-inline: 6px;
  border-radius: 6px;
  background: var(--learn-soft);
  color: var(--learn-primary);
}
.lesson-mode .practice-correction-line .practice-correction-extra { background: #fff0ca; color: #704a2a; }
.lesson-mode .practice-correction-line .practice-correction-result { background: var(--learn-mint); color: var(--learn-mint-ink); }
.lesson-mode .practice-correction-line .is-narrated {
  outline: 2px solid #95641d;
  background: #fff0b8;
  color: #704a2a;
}
.lesson-mode .practice-correction-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.lesson-mode .practice-correction-tools .text-button { color: var(--learn-primary); }
@media (prefers-reduced-motion: no-preference) {
  .lesson-mode .practice-correction-motion.is-replaying > * {
    animation: practice-correction-appear .35s both;
  }
  .lesson-mode .practice-correction-motion.is-replaying > :nth-child(2) { animation-delay: .18s; }
  .lesson-mode .practice-correction-motion.is-replaying > :nth-child(3) { animation-delay: .36s; }
  .lesson-mode .practice-correction-motion.is-replaying > :nth-child(4) { animation-delay: .54s; }
  .lesson-mode .practice-correction-motion.is-replaying > :nth-child(5) { animation-delay: .72s; }
  .lesson-mode .practice-correction-motion.is-replaying > :nth-child(6) { animation-delay: .9s; }
}
@keyframes practice-correction-appear {
  from { opacity: .1; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.lesson-mode .read-check .flow-question { padding: 0; background: transparent; }
.lesson-mode .read-check .flow-question > span { font-size: 17px; color: var(--learn-ink); }
.lesson-mode .read-check .flow-question h3 { font-size: 14px; color: var(--learn-ink); font-weight: 500; }
.lesson-mode .flow-options { gap: 7px; }
.lesson-mode .flow-options .option {
  min-height: 47px;
  padding: 8px 13px;
  gap: 12px;
  border: 1px solid var(--learn-line);
  border-radius: 11px;
  background: #fff;
  color: var(--learn-ink);
}
.lesson-mode .flow-options .option-copy { font-size: 15px; line-height: 1.6; }
.lesson-mode .flow-options .option-copy[lang=en] { font-size: 15px; }
.lesson-mode .practice-option-translation {
  display: block;
  margin-block-start: 2px;
  color: var(--learn-muted);
  font: 400 13px/1.65 Cairo, 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  text-align: right;
}
.lesson-mode .flow-options .option:hover:not(:disabled) { background: #f4fbfd; border-color: #85b6ca; }
.lesson-mode .flow-options .option.selected { border-color: #61adc6; background: var(--learn-soft); color: var(--learn-primary); box-shadow: none; font-weight: 700; }
.lesson-mode .flow-options .option.correct { border-color: #7fbea1; background: var(--learn-mint); color: var(--learn-mint-ink); font-weight: 700; }
.lesson-mode .flow-options .option.incorrect { border-color: #e19b92; background: var(--learn-danger-bg); color: var(--learn-danger); font-weight: 700; }
.lesson-mode .flow-options :is(.option-dot,.option-letter) {
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--learn-line);
  border-radius: 50%;
  background: #fff;
  color: var(--learn-primary);
}
.lesson-mode .flow-options .option-letter { font-size: 9px; }
.lesson-mode .flow-options .option.selected .option-letter { border-color: #61adc6; }
.lesson-mode .flow-options .option.correct .option-dot { border-color: #72b39c; color: var(--learn-mint-ink); }
.lesson-mode .flow-options .option.incorrect .option-dot { border-color: #dc8f87; }
.lesson-mode .flow-options .option-dot svg { width: 12px; height: 12px; }
.lesson-mode .flow-shell .feedback {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d6eadf;
  background: var(--learn-mint);
  color: var(--learn-mint-ink);
}
.lesson-mode .flow-shell .feedback.bad {
  border-color: #e3c8a2;
  background: #fff2db;
  color: #704a2a;
}
.lesson-mode .read-check .feedback.bad {
  border-color: #d6eadf;
  background: var(--learn-mint);
  color: var(--learn-mint-ink);
}
.lesson-mode .tutor-feedback { margin-top: 10px; padding: 13px; border-radius: 13px; }
.lesson-mode .tutor-feedback.is-correct { border-color: #cce8d8; background: #f0faf4; }
.lesson-mode .tutor-feedback.needs-review { border-color: #edd8ac; background: #fff7e7; }
.lesson-mode .rule-source { border-radius: 12px; }
.lesson-mode :is(.source-link,.read-check-source-link,.retry-question) { color: var(--learn-primary); }
.lesson-mode .flow-shell .qa-prompt {
  border-color: var(--learn-line);
  border-radius: 13px;
  background: #fff;
}

/* Inline actions leave space for the global tab bar on small screens. */
.lesson-mode .flow-shell .flow-actions {
  position: static;
  width: 100%;
  max-width: var(--learn-content);
  min-height: 0;
  padding: 0 var(--learn-inline) 16px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}
.lesson-mode .flow-shell .flow-actions > div { max-width: none; gap: 12px; }
.lesson-mode .flow-shell :is(.flow-nav-next,.flow-nav-prev) {
  min-height: 45px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}
.lesson-mode .flow-shell .flow-nav-next,
.lesson-mode .flow-shell .btn-primary {
  border: 1px solid var(--learn-action);
  border-radius: 12px;
  background: var(--learn-action);
  color: #fff;
}
.lesson-mode .flow-shell .flow-nav-next:disabled {
  opacity: 1;
  border-color: #d2e7ed;
  background: #d2e7ed;
  color: #46677a;
}
.lesson-mode .flow-shell :is(.flow-nav-prev,.btn-secondary) {
  border: 1px solid #c4e0ea;
  border-radius: 12px;
  background: #fff;
  color: var(--learn-primary);
}
.lesson-mode .flow-shell .flow-nav-prev:disabled { opacity: .62; }
.lesson-mode .flow-shell .flow-nav-next svg { width: 16px; height: 16px; }

/* Audio, guided activity, and Arabic word classification. */
.lesson-mode .word-classes-practice {
  width: min(calc(100% - var(--learn-inline) * 2), 680px);
  margin: 0 auto 12px;
  padding: 12px;
  border: 1px solid var(--learn-line);
  border-radius: 15px;
  background: #fff;
}
.lesson-mode .word-classes-practice h2 {
  min-height: 54px;
  display: grid;
  align-items: center;
  margin: 0 0 9px;
  padding: 5px 65px 5px 7px;
  background: url('assets/atlas/audio.svg') no-repeat right center / 58px auto;
  color: var(--learn-ink);
  text-align: start;
  font-size: 17px;
}
.lesson-mode .word-classes-practice iframe { border-color: var(--learn-line); border-radius: 12px; }
.lesson-mode .word-classes-video-actions { padding-block: 0 16px; }
.lesson-mode .guided-video-content { padding-block: 0 16px; }
.lesson-mode .guided-video {
  padding: 12px;
  border: 1px solid var(--learn-line);
  border-radius: 16px;
  background: #fff;
  color: var(--learn-ink);
}
.lesson-mode .guided-video img { border-radius: 11px; }
.lesson-mode .guided-video-body { background: #fff; }
.lesson-mode .guided-video-sentence { color: var(--learn-ink); background: var(--learn-soft); }
.lesson-mode .guided-video-choices button { border-color: var(--learn-line); color: var(--learn-ink); }
.lesson-mode .guided-video-choices button[data-result=correct] { border-color: #72b39c; color: var(--learn-mint-ink); }
.lesson-mode .guided-video-choices button[data-result=incorrect] { border-color: #df978e; color: var(--learn-danger); }
.lesson-mode .word-classes-exercise {
  --classifier-inline: var(--learn-inline);
  --classifier-ink: var(--learn-ink);
  --classifier-blue: var(--learn-action);
  --classifier-pale: var(--learn-soft);
  --classifier-line: var(--learn-line);
  --classifier-muted: var(--learn-muted);
}
.lesson-mode .word-classes-exercise #lesson-content { min-height: 0; }
.lesson-mode .word-classes-exercise .word-classifier {
  max-width: var(--learn-content);
  margin: auto;
  padding: 0 var(--learn-inline) 12px;
}
.lesson-mode .word-classes-exercise .word-classifier-card { padding-block: 12px 0; }
.lesson-mode .word-classifier-choices button { min-height: 47px; border-radius: 11px; }
.lesson-mode .word-classifier-choices button[data-result=correct] { color: var(--learn-mint-ink); background: var(--learn-mint); border-color: #7fbea1; }
.lesson-mode .word-classifier-actions.flow-actions {
  margin-top: 12px;
  padding: 0;
}
.lesson-mode .word-classifier-review summary { border-radius: 12px; }
.lesson-mode .classifier-result-footer.flow-content {
  max-width: var(--learn-content);
  min-height: 0;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--learn-inline) 14px;
}

/* Completion, scores, and review. */
.lesson-mode :is(.exam-intro,.read-complete) {
  min-height: 0;
  margin: 0 auto 15px;
  padding: 23px 16px;
  border: 1px solid var(--learn-line);
  border-radius: 16px;
  background: #fff;
  color: var(--learn-ink);
}
.lesson-mode .read-complete { width: calc(100% - var(--learn-inline) * 2); max-width: calc(var(--learn-content) - var(--learn-inline) * 2); }
.lesson-mode .read-complete-icon,
.lesson-mode .exam-intro .intro-icon {
  width: 63px;
  height: 63px;
  margin: 0 auto 11px;
  outline: 0;
  border: 0;
  border-radius: 14px;
  background: var(--learn-soft);
  color: var(--learn-primary);
}
.lesson-mode .read-complete-icon svg { width: 39px; height: 39px; }
.lesson-mode .read-complete h2 { color: var(--learn-ink); }
.lesson-mode :is(.read-complete,.exam-intro) > p { color: var(--learn-muted); font-size: 14px; line-height: 1.85; }
.lesson-mode .next-activity { color: var(--learn-primary); border-color: var(--learn-line); }
.lesson-mode .flow-result {
  position: relative;
  padding: 13px;
  margin: 0 0 15px;
  border: 1px solid var(--learn-line);
  border-radius: 16px;
  background: linear-gradient(125deg, #f2fbfd, #d3eef4);
}
.lesson-mode .flow-result .trophy {
  width: 102px;
  height: 88px;
  margin: 0 auto 6px;
  border-radius: 13px;
  background: url('assets/atlas/results.svg') no-repeat center / contain;
}
.lesson-mode .flow-result .trophy svg { display: none; }
.lesson-mode .flow-result h2 { color: var(--learn-ink); font-size: 22px; font-weight: 700; }
.lesson-mode .flow-result > p { color: var(--learn-muted); font-size: 13px; margin: 5px 0 12px; }
.lesson-mode .large-score { margin: 0 0 5px; color: var(--learn-primary); }
.lesson-mode .large-score strong { color: var(--learn-primary); font-size: 40px; letter-spacing: 0; line-height: 1.4; }
.lesson-mode .large-score span { color: var(--learn-muted); font-size: 16px; }
.lesson-mode .flow-result-actions { margin-top: 9px; }
.lesson-mode .error-review-button {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--learn-action);
  border-radius: 12px;
  background: var(--learn-action);
  color: #fff;
  font-weight: 700;
}
.lesson-mode .error-review-button span { background: #fff; color: var(--learn-primary); }
.lesson-mode :is(.review-card,.perfect) { border-color: var(--learn-line); background: #fff; }
.lesson-mode .review-title { color: var(--learn-ink); }
.lesson-mode .review-title .text-button { color: var(--learn-primary); }
.lesson-mode :is(.review-card,.flow-question-block,.read-rule-source) { scroll-margin-block-start: 84px; }

/* Exam score and answer totals. */
.lesson-mode .atlas-result-hero {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 13px;
  padding: 12px 15px;
  background: linear-gradient(125deg, #f2fbfd, #d3eef4);
  border: 1px solid var(--learn-line);
  border-radius: 17px;
  color: var(--learn-ink);
}
.lesson-mode .atlas-result-hero img { width: min(32%, 120px); height: auto; flex-shrink: 0; }
.lesson-mode .atlas-result-hero p { color: var(--learn-muted); font-size: 13px; }
.lesson-mode .atlas-result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.lesson-mode .atlas-result-stats > * {
  margin: 0;
  padding: 9px 4px;
  border: 1px solid var(--learn-line);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  color: var(--learn-primary);
}
.lesson-mode .atlas-result-stats strong { display: block; font-size: 19px; line-height: 1.4; }
.lesson-mode .atlas-result-stats small { color: var(--learn-muted); font-size: 11px; }

@media (min-width: 701px) {
  .lesson-mode .flow-shell { padding-block: 12px 25px; }
  .lesson-mode .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-mode .journey-grid .journey-card:not([data-stage="exam"]) { grid-column: auto; }
  .lesson-mode .journey-grid .journey-card[data-stage="exam"] { grid-column: 1 / -1; }
  .lesson-mode .journey-banner { margin-inline: auto; width: calc(var(--learn-content) - var(--learn-inline) * 2); max-width: calc(100% - var(--learn-inline) * 2); }
}
@media (max-width: 700px) {
  .lesson-mode:has(.mobile-nav) .flow-shell { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .lesson-mode .mobile-nav {
    border-color: var(--learn-line);
    background: #fff;
    color: var(--learn-muted);
  }
  .lesson-mode .mobile-nav :is(a,button) { color: var(--learn-muted); min-height: 42px; }
  .lesson-mode .mobile-nav .active { color: var(--learn-primary); font-weight: 700; }
  .lesson-mode .mobile-nav .active svg { width: 43px; height: 25px; padding: 3px 10px; border-radius: 999px; background: var(--learn-track); }
}
@media (max-width: 370px) {
  body.lesson-mode { --learn-inline: 14px; }
  .lesson-mode .flow-header { gap: 7px; }
  .lesson-mode .flow-header-copy p { font-size: 10px; }
  .lesson-mode .flow-header .flow-back { width: 38px; height: 38px; }
  .lesson-mode .atlas-flow-brand { font-size: 24px; }
  .lesson-mode .flow-shell .flow-actions > div { gap: 8px; }
  .lesson-mode .flow-shell :is(.flow-nav-next,.flow-nav-prev) { font-size: 13px; }
}

/* Same palette for the two standalone Word Classes audio exercises. */
html.atlas-lesson-embed-root {
  background: #eaf6fa;
  color: #152b4b;
}
body.atlas-lesson-embed {
  --embed-action: #00698f;
  --embed-ink: #152b4b;
  --embed-muted: #46677a;
  --embed-line: #cce4ed;
  --embed-paper: #fff;
  --embed-soft: #dcf1f8;
  background: #eaf6fa;
  color: var(--embed-ink);
  font-family: Cairo, 'IBM Plex Arabic', Tahoma, sans-serif;
  line-height: 1.6;
}
.atlas-lesson-embed :is(.player,.preview) { padding-inline: 10px; }
.atlas-lesson-embed .player,
.atlas-lesson-embed[data-level=advanced] .player { background: #eaf6fa; }
.atlas-lesson-embed :is(.branding,.brand) { color: var(--embed-action); }
.atlas-lesson-embed--practice h1,
.atlas-lesson-embed .level {
  border: 1px solid var(--embed-line);
  background: var(--embed-paper);
  color: var(--embed-action);
}
.atlas-lesson-embed--practice .scene,
.atlas-lesson-embed--video .stage {
  border-color: var(--embed-line);
  background: var(--embed-paper);
  box-shadow: none;
}
.atlas-lesson-embed :is(.garden,.sentence) { background: var(--embed-soft); color: var(--embed-ink); }
.atlas-lesson-embed :is(.question-index,.answer-prompt,.voice-note,.hint,.eyebrow,.launch p,.summary p,.summary dd) {
  color: var(--embed-muted);
}
.atlas-lesson-embed :is(.start,.primary) {
  border: 1px solid var(--embed-action);
  border-radius: 11px;
  background: var(--embed-action);
  color: #fff;
}
.atlas-lesson-embed :is(.replay,.secondary) { color: var(--embed-action); }
.atlas-lesson-embed .choices button {
  border: 1px solid var(--embed-line);
  border-radius: 11px;
  background: var(--embed-paper);
  color: var(--embed-ink);
}
.atlas-lesson-embed .choices button:hover:not(:disabled) { border-color: #85b6ca; background: #f4fbfd; }
.atlas-lesson-embed .choices button:is([data-state=right],[data-result=correct]) {
  color: #195f47;
  border-color: #7fbea1;
  background: #e1f4eb;
}
.atlas-lesson-embed .choices button:is([data-state=wrong],[data-result=incorrect]) {
  color: #913d3e;
  border-color: #e19b92;
  background: #fbecea;
}
.atlas-lesson-embed .summary dl div { background: var(--embed-soft); }
.atlas-lesson-embed .summary dt { color: var(--embed-action); }
.atlas-lesson-embed button:focus-visible { outline: 2px solid var(--embed-action); outline-offset: 3px; }

/* The adopted Present Simple explanation uses the Atlas lesson cards. */
.lesson-mode .habit-intro-page .read-content:has(.teaching-adopted) > .flow-section-title {
  margin-block-end: 11px;
}
.teaching-adopted {
  display: grid;
  gap: 12px;
}
.teaching-block {
  min-width: 0;
  padding: clamp(11px, 3vw, 15px);
  border: 1px solid var(--learn-line);
  border-radius: 13px;
  color: var(--learn-ink);
  background: #fff;
}
.teaching-block h3, .teaching-block h4 {
  margin: 0 0 6px;
  color: var(--learn-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}
.teaching-block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.teaching-text, .teaching-case { background: #f4fbfd; }
.teaching-case-note {
  padding-block-start: 7px;
  color: var(--learn-muted);
}
.teaching-roadmap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}
.teaching-roadmap li,
.teaching-team-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--learn-primary);
  border: 1px solid var(--learn-line);
  font-size: 12px;
  font-weight: 700;
}
.teaching-roadmap li[aria-current] {
  background: var(--learn-soft);
  border-color: #a3d2e2;
}
.teaching-block .teaching-team-tag { display: inline-block; margin-block-end: 8px; font-size: 12px; }
.teaching-block .teaching-pronoun-instruction { margin-block-end: 8px; color: var(--learn-muted); }
.teaching-pronouns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 0;
}
.teaching-pronouns > div,
.teaching-pronouns > button {
  display: grid;
  gap: 2px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--learn-line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}
.teaching-pronouns dt,
.teaching-pronoun-label {
  color: var(--learn-primary);
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
}
.teaching-pronouns dd,
.teaching-pronouns > button > span {
  margin: 0;
  color: var(--learn-muted);
  font-size: 12px;
}
.teaching-pronouns > button {
  min-inline-size: 44px;
  min-block-size: 44px;
  font: inherit;
  cursor: pointer;
}
.teaching-pronouns > button[aria-pressed="true"] {
  background: var(--learn-primary);
  border-color: var(--learn-primary);
}
.teaching-pronouns > button[aria-pressed="true"] > * { color: #fff; }
.teaching-pronouns > button:focus-visible { outline: 2px solid var(--learn-primary); outline-offset: 2px; }
.teaching-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.teaching-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr));
  gap: 8px;
}
.teaching-group, .teaching-examples li {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--learn-line);
  border-radius: 10px;
  background: #f4fbfd;
}
.teaching-group:nth-child(2) { background: var(--learn-soft); }
.teaching-block .teaching-group-example {
  margin-block-start: 9px;
  color: var(--learn-primary);
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
}
.teaching-block .teaching-group-transform {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-block-start: 6px;
}
.teaching-group-transform > bdi { text-align: left; }
.teaching-group-transform > span { flex: 0 0 3em; }
.teaching-block .teaching-group-transform .teaching-group-example { margin: 0; }
.teaching-block .teaching-mini-example {
  margin-block-start: 5px;
  color: var(--learn-ink);
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.teaching-suffix, .teaching-question-subject {
  padding-inline: 2px;
  border-radius: 3px;
  color: var(--learn-primary);
  background: #d7eef7;
}
.teaching-suffix { font-weight: 800; }
.teaching-examples {
  list-style: none;
  padding: 0;
  margin: 5px 0 0;
}
.teaching-examples li > bdi {
  color: var(--learn-primary);
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.teaching-pronoun-meaning {
  margin-inline-start: 7px;
  color: var(--learn-muted);
  font-size: 13px;
}
.teaching-example-label { display: block; font-size: 13px; }
.teaching-contrast li[data-result="correct"] {
  color: var(--learn-mint-ink);
  background: var(--learn-mint);
  border-color: #c4e1d1;
}
.teaching-contrast li[data-result="wrong"] {
  color: var(--learn-danger);
  background: var(--learn-danger-bg);
  border-color: #efc9cb;
}
.teaching-contrast li[data-result] > bdi { color: inherit; }
.teaching-details summary {
  color: var(--learn-primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.teaching-details summary span {
  margin-inline-start: 4px;
  color: var(--learn-ink);
  font-weight: 500;
}
.teaching-details summary small {
  display: inline-block;
  margin-inline-start: 6px;
  color: var(--learn-muted);
  font-size: 12px;
}
.teaching-disclosure-group { margin-block-start: 10px; }
.teaching-disclosure-group .teaching-examples {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
}
.teaching-worked .teaching-english { font-weight: 700; }
.teaching-cubes {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.teaching-cubes li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 7px 4px;
  border: 1px solid var(--learn-line);
  border-radius: 9px;
  background: #f4fbfd;
  text-align: center;
  overflow-wrap: anywhere;
}
.teaching-cubes li:nth-child(2) { background: var(--learn-mint); border-color: #c4e1d1; }
.teaching-cubes li:nth-child(3) { background: var(--learn-soft); }
.teaching-cubes li strong {
  color: var(--learn-primary);
  font-family: Arial, sans-serif;
  font-size: clamp(15px, 4vw, 20px);
}
.teaching-cubes li span { color: var(--learn-muted); font-size: 13px; }
.teaching-cubes li .teaching-cube-role { font-size: 12px; font-weight: 700; }
.teaching-cubes .teaching-plus {
  position: absolute;
  inset: 50% auto auto -13px;
  transform: translateY(-50%);
  font-weight: 700;
}
.teaching-reference {
  padding: 9px 11px;
  border: 1px solid var(--learn-line);
  border-radius: 11px;
  color: var(--learn-ink);
  background: #f4fbfd;
  font-size: 14px;
}
.teaching-vocabulary { margin-block: 4px 8px; color: var(--learn-primary); font-size: 13px; }
.teaching-translation { margin: 4px 0 0; font-size: 14px; }
.lesson-mode .habit-intro-page .teaching-adopted .read-check { margin-block-start: 0; }
.lesson-mode .habit-intro-page .teaching-check .flow-options { grid-template-columns: 1fr; }
.teaching-retry { margin-inline-start: 10px; }

.lesson-mode :is(.omar-practice-review,.practice-correct-details) {
  margin-block: 12px;
  padding: 12px;
  border: 1px solid var(--learn-line);
  border-radius: 12px;
  background: #fff;
}
.lesson-mode :is(.omar-practice-review,.practice-correct-details) > summary {
  cursor: pointer;
  color: var(--learn-primary);
  font-weight: 700;
}
.lesson-mode .omar-practice-review summary span {
  margin-inline-start: 6px;
  color: var(--learn-muted);
  font-size: .8em;
  font-weight: 400;
}
.lesson-mode .omar-practice-review .flow-question { margin-block: 10px; }
.lesson-mode .omar-practice-review .flow-question h3 { margin: 0; }
.lesson-mode .omar-practice-review [data-omar-review-map] { margin-block: 10px; }
.lesson-mode .omar-practice-review [data-omar-review-summary] {
  border-block-start: 1px solid var(--learn-line);
  padding-block-start: 10px;
}
.lesson-mode .omar-practice-review [data-omar-review-summary] li:not([hidden]) {
  display: grid;
  justify-items: start;
  gap: 3px;
  padding-block: 5px;
}