.lesson-shell {
  display: grid;
  gap: 18px;
}

.lesson-hero,
.lesson-card,
.exercise-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.008)),
    var(--panel);
  box-shadow: var(--shadow), var(--inner-glow);
}

.lesson-hero {
  background:
    linear-gradient(135deg, rgba(22, 52, 82, 0.96), rgba(16, 43, 70, 0.92));
}

.lesson-hero h1 {
  margin: 8px 0 10px;
  font-size: 2.7rem;
}

.lesson-hero p:not(.eyebrow),
.lesson-card p,
.exercise-card p {
  color: var(--soft);
  font-weight: 850;
}

.lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.lesson-score-status {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(246, 211, 117, 0.24);
  border-radius: 8px;
  background: rgba(246, 211, 117, 0.08);
  color: var(--soft);
  font-weight: 900;
}

.lesson-score-status.success {
  border-color: rgba(117, 228, 193, 0.42);
  background: rgba(117, 228, 193, 0.1);
}

.lesson-score-status.needs-review {
  border-color: rgba(242, 139, 130, 0.34);
  background: rgba(242, 139, 130, 0.08);
}

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

.lesson-card.wide {
  grid-column: span 2;
}

.lesson-card li {
  margin-bottom: 6px;
  color: var(--soft);
  font-weight: 850;
}

.vocab-section,
.grammar-note,
.conjugation-block {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.vocab-section h3,
.grammar-note h3,
.conjugation-block h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
}

.conjugation-block dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.conjugation-block dl div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(210, 236, 255, 0.18);
  border-radius: 8px;
  background: var(--field);
}

.conjugation-block dt,
.conjugation-block dd {
  margin: 0;
  color: var(--soft);
  font-weight: 850;
}

.static-practice-list {
  display: grid;
  gap: 10px;
}

.practice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.static-practice-item {
  padding: 12px;
  border: 1px solid rgba(210, 236, 255, 0.18);
  border-radius: 8px;
  background: var(--field);
}

.static-practice-item {
  display: grid;
  gap: 8px;
}

.static-practice-item span {
  color: var(--text);
  font-weight: 900;
}

.static-practice-item small,
.static-practice-item em {
  color: var(--muted);
  font-weight: 800;
}

.static-practice-item input,
.static-practice-item select {
  min-height: 40px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(238, 248, 255, 0.12);
  border: 1px solid rgba(210, 236, 255, 0.22);
  border-radius: 8px;
}

.word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.word-chip,
.mini-button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
}

.word-chip {
  color: var(--text);
  background: rgba(204, 234, 255, 0.14);
  border: 1px solid rgba(204, 234, 255, 0.3);
  font-weight: 900;
  cursor: pointer;
}

.word-chip:disabled {
  opacity: 0.45;
  cursor: default;
}

.ordered-answer {
  min-height: 40px;
  padding: 10px;
  color: var(--text);
  font-weight: 900;
  border: 1px dashed rgba(246, 211, 117, 0.34);
  border-radius: 8px;
  background: rgba(246, 211, 117, 0.08);
}

.matching-grid {
  display: grid;
  gap: 8px;
}

.matching-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.static-practice-item .correct {
  border-color: rgba(117, 228, 193, 0.56);
}

.static-practice-item .incorrect {
  border-color: rgba(242, 139, 130, 0.56);
}

.lesson-evidence-stage {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(210, 236, 255, 0.18);
  border-radius: 10px;
}

.lesson-evidence-stage > legend {
  padding: 0 8px;
  color: var(--gold);
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lesson-evidence-stage > p {
  margin: 0;
  color: var(--soft);
  font-weight: 800;
}

/* Lesson Engine V1: one continuous, article-like learning surface. */
.lesson-engine {
  width: min(920px, calc(100% - 44px));
  margin: 0 auto;
  padding-bottom: 48px;
}

.lesson-preview-indicator {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 18px 0 0;
  padding: 7px 10px;
  border: 1px solid rgba(246, 211, 117, 0.34);
  border-radius: 999px;
  background: rgba(246, 211, 117, 0.08);
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 800;
}

.lesson-preview-indicator strong {
  color: var(--gold);
}

.lesson-engine-hero {
  padding: clamp(28px, 5vw, 52px) 0 34px;
  border-bottom: 1px solid var(--line);
}

.lesson-engine-hero h1 {
  max-width: 780px;
  margin: 8px 0 22px;
  font-size: clamp(2.25rem, 6vw, 4.4rem);
  line-height: 1.02;
}

.lesson-can-do {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  max-width: 780px;
  padding: 16px 18px;
  border-left: 3px solid var(--gold);
  background: rgba(246, 211, 117, 0.07);
}

.lesson-can-do strong {
  color: var(--gold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lesson-can-do p {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.lesson-engine-flow {
  display: grid;
}

.lesson-content-block {
  padding: clamp(30px, 5vw, 52px) 0;
  border-bottom: 1px solid var(--line);
}

.lesson-content-block > h2,
.lesson-practice-heading h2 {
  margin: 0 0 18px;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.lesson-prose {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.lesson-prose p,
.lesson-content-block > p {
  margin: 0;
  color: var(--soft);
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.75;
}

.lesson-key-idea,
.lesson-tip {
  display: grid;
  gap: 5px;
  max-width: 760px;
  margin: 24px 0 0;
  padding: 15px 17px;
  border-radius: 8px;
}

.lesson-key-idea {
  border: 1px solid rgba(246, 211, 117, 0.3);
  background: rgba(246, 211, 117, 0.08);
}

.lesson-tip {
  border: 1px solid rgba(134, 203, 255, 0.25);
  background: rgba(134, 203, 255, 0.07);
}

.lesson-key-idea strong,
.lesson-tip strong {
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lesson-terminology {
  display: grid;
  grid-template-columns: minmax(100px, 0.25fr) minmax(0, 1fr);
  gap: 14px;
  max-width: 760px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}

.lesson-terminology dt,
.lesson-terminology dd {
  margin: 0;
}

.lesson-terminology dt { color: var(--gold); font-weight: 950; }
.lesson-terminology dd { color: var(--soft); font-weight: 750; line-height: 1.6; }

.lesson-inline-examples,
.lesson-example-list,
.lesson-mistake-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.lesson-example,
.lesson-mistake-list article {
  padding: 17px 19px;
  border-left: 3px solid rgba(134, 203, 255, 0.55);
  background: rgba(255, 255, 255, 0.035);
}

.lesson-example p {
  margin: 0;
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.55;
}

.lesson-example mark {
  padding: 0 2px;
  color: var(--gold);
  background: transparent;
  border-bottom: 2px solid rgba(246, 211, 117, 0.5);
}

.lesson-example .lesson-translation,
.lesson-example .lesson-example-explanation {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 750;
}

.lesson-memory-tool,
.lesson-note,
.lesson-summary {
  margin: 32px 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.lesson-memory-tool .lesson-mnemonic {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 1.4rem;
  font-weight: 950;
}

.lesson-memory-tool li,
.lesson-summary li,
.lesson-practice-feedback li {
  margin-top: 7px;
  color: var(--soft);
  font-weight: 750;
  line-height: 1.55;
}

.lesson-note.is-important { border-color: rgba(246, 211, 117, 0.36); }
.lesson-note.is-exception { border-color: rgba(242, 139, 130, 0.32); }

.lesson-table-block > p {
  margin-bottom: 16px;
}

.lesson-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lesson-table-scroll:focus-visible {
  outline: 3px solid rgba(246, 211, 117, 0.45);
  outline-offset: 3px;
}

.lesson-table-block table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.02);
}

.lesson-table-block th,
.lesson-table-block td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.lesson-table-block thead th {
  color: var(--gold);
  background: rgba(246, 211, 117, 0.06);
}

.lesson-table-block tbody th { color: var(--text); }
.lesson-table-block td { color: var(--soft); font-weight: 750; }

.lesson-contrast-list {
  display: grid;
  gap: 18px;
}

.lesson-contrast-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lesson-contrast-pair > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--soft);
  font-weight: 750;
}

.lesson-incorrect,
.lesson-correct {
  margin: 0;
  font-weight: 900;
}

.lesson-incorrect { color: #ffaaa2; text-decoration: line-through; }
.lesson-correct { margin-top: 6px; color: #8be7c7; }
.lesson-mistake-list article > p:last-child:not(.lesson-correct) { color: var(--muted); font-weight: 750; }

.lesson-practice {
  padding: clamp(34px, 6vw, 58px) 0;
}

.lesson-practice-heading > p:last-child {
  max-width: 680px;
  color: var(--soft);
  font-weight: 750;
}

.lesson-practice-list {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.lesson-practice-item {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.lesson-practice-item h3,
.lesson-practice-item p { margin: 0; }
.lesson-practice-item > p { color: var(--soft); font-weight: 750; }
.lesson-practice-number { color: var(--gold) !important; font-size: 0.78rem; font-weight: 950 !important; }

.lesson-practice-item fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.lesson-practice-item fieldset label {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.lesson-practice-item input[type="text"],
.lesson-practice-item textarea {
  width: 100%;
  padding: 12px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

.lesson-practice-item .primary-button { justify-self: start; }

.lesson-practice-feedback {
  min-height: 1.4em;
  color: var(--soft);
  font-weight: 800;
}

.lesson-practice-feedback.is-correct { color: #8be7c7; }
.lesson-practice-feedback.is-incorrect { color: #ffaaa2; }
.lesson-practice-feedback.is-self-review { color: var(--text); }
.lesson-practice-feedback p { margin-top: 6px; }

.lesson-engine-footer {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

@media (max-width: 700px) {
  .lesson-engine { width: min(100% - 28px, 920px); }
  .lesson-can-do,
  .lesson-terminology,
  .lesson-contrast-pair { grid-template-columns: 1fr; }
  .lesson-contrast-pair > p { grid-column: auto; }
  .lesson-content-block { padding-block: 32px; }
}

@media (max-width: 480px) {
  .lesson-engine { width: calc(100% - 20px); }
  .lesson-memory-tool,
  .lesson-note,
  .lesson-summary,
  .lesson-practice-item { padding: 18px; }
}

.spanish-character-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spanish-character-bar button {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid rgba(210, 236, 255, 0.28);
  border-radius: 8px;
  color: var(--text);
  background: rgba(204, 234, 255, 0.1);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.spanish-character-bar button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (max-width: 920px) {
  .lesson-grid,
  .lesson-card.wide {
    grid-template-columns: 1fr;
    grid-column: span 1;
  }
}