#presentation-lesson { display:grid; gap:24px; }
#presentation-lesson[hidden] { display:none; }
#presentation-lesson p { line-height:1.8; }
#presentation-lesson .intro-dialogue { padding:18px 0; border-top:1px solid var(--line,#e5e0da); }
#presentation-lesson .intro-dialogue p { margin:5px 0; }
#presentation-lesson .intro-dialogue p:nth-child(odd) { font-weight:600; }
#presentation-lesson label { display:block; margin:20px 0; line-height:1.7; }
#presentation-lesson textarea { display:block; box-sizing:border-box; width:100%; margin:8px 0 16px; padding:14px; border:1px solid #d8cec6; border-radius:12px; background:#fffdf9; color:#302b28; font:inherit; line-height:1.7; resize:vertical; }
#presentation-lesson .play-btn { display:inline-block; margin:6px 10px 6px 0; text-decoration:none; }
#presentation-lesson [hidden] { display:none; }
#presentation-lesson video { display:block; width:100%; max-height:480px; background:#222; border-radius:14px; }
#presentation-lesson input { display:block; max-width:100%; margin-top:10px; }
#presentation-lesson button:disabled { opacity:.5; cursor:default; }

#country-lesson { display:grid; gap:24px; }
#country-lesson[hidden] { display:none; }
#country-lesson p { line-height:1.8; }
#country-lesson .country-pattern { padding:18px 0; border-top:1px solid var(--line,#e5e0da); }
#country-lesson .country-pattern p { margin:5px 0; }
#country-lesson .country-pattern p:nth-child(odd) { font-weight:600; }
#country-lesson label { display:block; margin:20px 0; line-height:1.7; }
#country-lesson textarea { display:block; box-sizing:border-box; width:100%; margin:8px 0 16px; padding:14px; border:1px solid #d8cec6; border-radius:12px; background:#fffdf9; color:#302b28; font:inherit; line-height:1.7; resize:vertical; }
#country-lesson .play-btn { display:inline-block; margin:6px 10px 6px 0; text-decoration:none; }
#country-lesson [hidden] { display:none; }
#country-lesson video { display:block; width:100%; max-height:480px; background:#222; border-radius:14px; }
#country-lesson input { display:block; max-width:100%; margin-top:10px; }
#country-lesson button:disabled { opacity:.5; cursor:default; }

#country-lesson .country-model { font-size:1.15em; line-height:2; }
#country-lesson h3 { margin-bottom:8px; }

#quantifiers-lesson { display:grid; gap:24px; }
#quantifiers-lesson[hidden], #quantifiers-lesson [hidden] { display:none; }
#quantifiers-lesson p { line-height:1.8; }
#quantifiers-lesson h3 { margin-top:24px; }
#quantifiers-lesson .quantifier-example { padding:16px 0; border-top:1px solid #e5e0da; }
#quantifiers-lesson .quantifier-example p { margin:6px 0; }
#quantifiers-lesson strong { color:#7357a1; }
#quantifiers-lesson .play-btn { margin:8px 10px 8px 0; }
#quantifiers-lesson fieldset { min-width:0; margin:22px 0; padding:16px; border:1px solid #d8cec6; border-radius:12px; }
#quantifiers-lesson legend { padding:0 6px; font-weight:650; line-height:1.8; }
#quantifiers-lesson fieldset label { display:inline-flex; align-items:center; gap:5px; padding:10px 12px; margin:4px; border:1px solid #ded7e7; border-radius:10px; cursor:pointer; }
#quantifiers-lesson fieldset label:has(input:checked) { background:#eef0fa; border-color:#6c78b3; }
#quantifiers-lesson fieldset.is-correct { border-color:#568b76; }
#quantifiers-lesson fieldset.is-incorrect { border-color:#b6785a; }

/* Submitted answers: mark the options themselves as well as the feedback. */
#quantifiers-lesson fieldset label.answer-correct,
#quantifiers-lesson fieldset label.answer-correct:has(input:checked) {
  border:2px solid #267348;
  background:#eaf6ee;
  color:#175b34;
  box-shadow:0 0 0 1px #267348;
}
#quantifiers-lesson fieldset label.answer-wrong,
#quantifiers-lesson fieldset label.answer-wrong:has(input:checked) {
  border:2px solid #ba3030;
  background:#fff0f0;
  color:#962323;
}
#quantifiers-lesson label.answer-correct input { accent-color:#267348; }
#quantifiers-lesson label.answer-wrong input { accent-color:#ba3030; }
#quantifiers-lesson fieldset label:has(input:disabled) { cursor:default; }
#quantifiers-lesson button:disabled { opacity:.5; cursor:default; }

#interrogatives-lesson { display:grid; gap:24px; }
#interrogatives-lesson[hidden], #interrogatives-lesson [hidden] { display:none; }
#interrogatives-lesson p { line-height:1.8; }
#interrogatives-lesson h3 { margin-top:24px; }
#interrogatives-lesson .quantifier-example { padding:16px 0; border-top:1px solid #e5e0da; }
#interrogatives-lesson .quantifier-example p { margin:6px 0; }
#interrogatives-lesson strong { color:#7357a1; }
#interrogatives-lesson .play-btn { margin:8px 10px 8px 0; }
#interrogatives-lesson fieldset { min-width:0; margin:22px 0; padding:16px; border:1px solid #d8cec6; border-radius:12px; }
#interrogatives-lesson legend { padding:0 6px; font-weight:650; line-height:1.8; }
#interrogatives-lesson fieldset label { display:inline-flex; align-items:center; gap:5px; padding:10px 12px; margin:4px; border:1px solid #ded7e7; border-radius:10px; cursor:pointer; }
#interrogatives-lesson fieldset label:has(input:checked) { background:#eef0fa; border-color:#6c78b3; }
#interrogatives-lesson fieldset.is-correct { border-color:#568b76; }
#interrogatives-lesson fieldset.is-incorrect { border-color:#b6785a; }

/* Submitted answers: mark the options themselves as well as the feedback. */
#interrogatives-lesson fieldset label.answer-correct,
#interrogatives-lesson fieldset label.answer-correct:has(input:checked) {
  border:2px solid #267348;
  background:#eaf6ee;
  color:#175b34;
  box-shadow:0 0 0 1px #267348;
}
#interrogatives-lesson fieldset label.answer-wrong,
#interrogatives-lesson fieldset label.answer-wrong:has(input:checked) {
  border:2px solid #ba3030;
  background:#fff0f0;
  color:#962323;
}
#interrogatives-lesson label.answer-correct input { accent-color:#267348; }
#interrogatives-lesson label.answer-wrong input { accent-color:#ba3030; }
#interrogatives-lesson fieldset label:has(input:disabled) { cursor:default; }
#interrogatives-lesson button:disabled { opacity:.5; cursor:default; }

#weather-lesson { display:grid; gap:24px; }
#weather-lesson[hidden], #weather-lesson [hidden] { display:none; }
#weather-lesson p { line-height:1.8; }
#weather-lesson h3 { margin-top:24px; }
#weather-lesson .quantifier-example { padding:16px 0; border-top:1px solid #e5e0da; }
#weather-lesson .quantifier-example p { margin:6px 0; }
#weather-lesson strong { color:#7357a1; }
#weather-lesson .play-btn { margin:8px 10px 8px 0; }
#weather-lesson fieldset { min-width:0; margin:22px 0; padding:16px; border:1px solid #d8cec6; border-radius:12px; }
#weather-lesson legend { padding:0 6px; font-weight:650; line-height:1.8; }
#weather-lesson fieldset label { display:inline-flex; align-items:center; gap:5px; padding:10px 12px; margin:4px; border:1px solid #ded7e7; border-radius:10px; cursor:pointer; }
#weather-lesson fieldset label:has(input:checked) { background:#eef0fa; border-color:#6c78b3; }
#weather-lesson fieldset.is-correct { border-color:#568b76; }
#weather-lesson fieldset.is-incorrect { border-color:#b6785a; }

/* Submitted answers: mark the options themselves as well as the feedback. */
#weather-lesson fieldset label.answer-correct,
#weather-lesson fieldset label.answer-correct:has(input:checked) {
  border:2px solid #267348;
  background:#eaf6ee;
  color:#175b34;
  box-shadow:0 0 0 1px #267348;
}
#weather-lesson fieldset label.answer-wrong,
#weather-lesson fieldset label.answer-wrong:has(input:checked) {
  border:2px solid #ba3030;
  background:#fff0f0;
  color:#962323;
}
#weather-lesson label.answer-correct input { accent-color:#267348; }
#weather-lesson label.answer-wrong input { accent-color:#ba3030; }
#weather-lesson fieldset label:has(input:disabled) { cursor:default; }
#weather-lesson button:disabled { opacity:.5; cursor:default; }

#weather-lesson .weather-compass { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:20px 0; text-align:center; }
#weather-lesson .weather-compass > div { padding:10px 4px; background:#faf4ec; border-radius:12px; overflow-wrap:anywhere; }
#weather-lesson .weather-compass p { margin:4px 0; }
#weather-lesson textarea { display:block; box-sizing:border-box; width:100%; margin:12px 0; padding:14px; font:inherit; border:1px solid #cfc8c0; border-radius:12px; }
#weather-lesson details { margin-top:18px; }
#weather-lesson summary { cursor:pointer; }
#weather-lesson button[aria-pressed="true"] { background:#355e50; color:white; }

/* Compact, responsive groups for lesson 13 in both interface languages. */
#weather-lesson .weather-card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:16px;
  margin:20px 0;
}
#weather-lesson .weather-card-grid > .quantifier-example {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:18px;
  border:1px solid #e5e0da;
  border-radius:14px;
  background:#fffcf8;
  overflow-wrap:anywhere;
}
#weather-lesson .weather-card-grid .quantifier-example > p:first-child {
  color:var(--ink,#282c32);
  font-weight:650;
}
#weather-lesson .weather-card-grid .quantifier-example > p:last-of-type {
  flex:1;
}
#weather-lesson .weather-card-grid .play-btn { margin:12px 0 0; }
#weather-lesson .weather-card-grid-wide {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
#weather-lesson .weather-vocabulary {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:12px;
}
#weather-lesson .weather-vocabulary > div {
  min-width:0;
  padding:14px 16px;
  border-radius:12px;
  background:#faf4ec;
  overflow-wrap:anywhere;
}
#weather-lesson .weather-vocabulary strong { color:var(--ink,#282c32); }
#weather-lesson .weather-vocabulary p { margin:4px 0 0; }
#weather-lesson .weather-question-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:18px;
  margin:20px 0;
  align-items:start;
}
#weather-lesson .weather-question-grid fieldset { margin:0; }
@media (max-width:600px) {
  #weather-lesson .weather-card-grid { gap:12px; }
  #weather-lesson .weather-card-grid > .quantifier-example { padding:16px; }
}

/* Number spelling practice sits after the complete vocabulary list. */
.numbers-quiz { grid-column:1 / -1; }
.numbers-quiz .numbers-quiz-value { margin:20px 0; font-size:clamp(48px,8vw,80px); font-weight:750; line-height:1.2; color:var(--ink,#282c32); }
.numbers-quiz label { display:block; margin-bottom:8px; font-weight:600; }
.numbers-quiz input { box-sizing:border-box; width:100%; max-width:480px; min-height:48px; padding:12px 14px; border:1px solid #cfc8c0; border-radius:12px; font:inherit; background:white; color:var(--ink,#282c32); }
.numbers-quiz .numbers-quiz-accents, .numbers-quiz .numbers-quiz-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.numbers-quiz .numbers-quiz-accents[hidden] { display:none; }
.numbers-quiz .numbers-quiz-accents button { min-width:44px; }
.numbers-quiz .is-correct { color:#175b34; }
.numbers-quiz .is-incorrect { color:#962323; }
.numbers-quiz button:disabled { opacity:.5; cursor:default; }
/* Secondary controls on the white quiz card need dark text and a visible fill. */
.numbers-quiz .secondary-btn {
  background:#f7eee6;
  color:#853c25;
  border:1px solid #b78168;
  font-weight:650;
  min-height:44px;
}
.numbers-quiz .secondary-btn:hover { background:#efddcf; }
.numbers-quiz button:focus-visible, .numbers-quiz input:focus-visible {
  outline:3px solid #853c25;
  outline-offset:3px;
}

/* Lesson 10: learn the vocabulary before reading the country model. */
#country-lesson .country-vocabulary-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:14px;
  margin:20px 0;
}
#country-lesson .country-phrase-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));
}
#country-lesson .country-vocabulary-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:18px;
  border:1px solid #e5e0da;
  border-radius:14px;
  background:#fffcf8;
  overflow-wrap:anywhere;
}
#country-lesson .country-vocabulary-item p { margin:4px 0; }
#country-lesson .country-vocabulary-item p:first-child { font-weight:650; color:var(--ink,#282c32); }
#country-lesson .country-vocabulary-item p:nth-child(2) { flex:1; }
#country-lesson .country-vocabulary-item .play-btn { margin:12px 0 0; }

/* Lesson 12: one compact card for each question word. */
#interrogatives-lesson .interrogative-rule-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:16px;
  margin:20px 0;
}
#interrogatives-lesson .interrogative-rule-card {
  min-width:0;
  padding:18px 20px;
  border:1px solid #e1dce9;
  border-radius:14px;
  background:#faf8fd;
  overflow-wrap:anywhere;
}
#interrogatives-lesson .interrogative-rule-card h3 {
  margin:0 0 10px;
  color:#654b8d;
  font-size:1.25em;
}
#interrogatives-lesson .interrogative-rule-card p { margin:0; line-height:1.75; }

#usage-help[hidden] { display:none; }
#usage-help p { line-height:1.8; }
#usage-help .help-entry { display:flex; align-items:center; gap:18px; padding:20px; margin-top:24px; border:1px solid #e5e0da; border-radius:16px; color:var(--ink,#282c32); text-decoration:none; background:#fffcf8; }
#usage-help .help-entry > span { font-size:28px; color:#b6785a; }
#usage-help .help-entry > span:last-child { margin-left:auto; }
#usage-help .help-entry h3 { margin:0 0 6px; }
#usage-help .help-entry p { margin:0; }
#usage-help .help-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:0; margin:28px 0; list-style:none; }
#usage-help .help-steps li { min-width:0; padding:18px; border:1px solid #e5e0da; border-radius:16px; background:#faf9f7; }
#usage-help .help-steps h3 { margin:0; }
#usage-help .help-steps img { display:block; width:100%; max-width:360px; height:auto; margin:18px auto 0; border-radius:14px; border:1px solid #e5e0da; }
@media(max-width:700px) { #usage-help .help-steps { grid-template-columns:1fr; } .topic-nav .topic-tab { padding:12px 4px; } .topic-nav .topic-tab strong { font-size:13px; } }