/* Exercise sections, activity blocks, feedback states, report. */

.section { margin-top: var(--s-32); }
.section-head {
  display: flex; align-items: center; gap: var(--s-14); flex-wrap: wrap;
  padding-bottom: var(--s-8);
}
.section-head .sec-code {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  font-family: var(--display-font);
  font-size: 1.1rem;
  font-weight: 800;
  box-shadow: 3px 3px 0 rgba(36, 87, 127, 0.3); /* Based on --blue-deep */
  transform: rotate(-3deg);
}
.section-head h2 { font-size: 1.15rem; }
.section-head .sec-ar { font-family: var(--arabic-font); color: var(--saffron-deep); font-size: 1rem; }
.section-head .section-rule {
  flex: 1 1 40px;
  min-width: 30px;
  height: 1px;
  background: var(--ink);
}
.section-head .sec-count { margin-left: 0; }
.section-instruction { color: var(--ink-soft); margin: var(--s-8) 0 var(--s-16); font-size: .95rem; }
/* Soft-blue accent banner for a section instruction (e.g. conditional transforms). */
.section-instruction--accent {
  background: var(--blue-soft);
  color: var(--blue-deep);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
}
.pronoun-bank {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  flex-wrap: wrap;
  margin: 0 0 var(--s-14);
  padding: var(--s-10) var(--s-12);
  border: 1px solid rgba(36, 87, 127, .25);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-sm);
  background: var(--blue-soft);
}
.pronoun-bank-label {
  color: var(--blue-deep);
  font-family: var(--utility-font);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pronoun-bank-items { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.pronoun-bank-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px var(--s-10);
  border: 1px solid rgba(36, 87, 127, .35);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--blue-deep);
  font-family: var(--display-font);
  font-size: .9rem;
  font-weight: 700;
}

/* Activity block — colored LEFT border, not a floating card. */
.activity {
  border-left: 3px solid var(--line-strong);
  background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-14) var(--s-16);
  margin-bottom: var(--s-14);
}
.activity[data-state="answered"] { border-left-color: var(--blue); }
.activity[data-state="checked-correct"] { border-left-color: var(--green); background: var(--green-soft); }
.activity[data-state="checked-incorrect"] { border-left-color: var(--red); background: var(--red-soft); }

.activity .q-head { display: flex; align-items: baseline; gap: var(--s-10); }
.activity .q-code { font-family: var(--utility-font); font-size: .68rem; color: var(--ink-faint); }
.activity .q-prompt { font-family: var(--display-font); font-weight: 600; font-size: 1rem; }
.activity .q-prompt .reference-word {
  color: var(--blue-deep);
  font-weight: 800;
  background: var(--blue-soft);
  border-bottom: 2px solid var(--blue);
  border-radius: 2px;
  padding: 0 4px 1px;
}
.activity .q-para-badge {
  font-family: var(--utility-font); font-size: .62rem;
  background: var(--blue-soft); color: var(--blue-deep);
  border-radius: var(--pill); padding: 1px 8px;
}

/* Options (radio) */
.options { list-style: none; margin: var(--s-12) 0 0; padding: 0; display: grid; gap: var(--s-8); }
.opt {
  display: flex; align-items: flex-start; gap: var(--s-10);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); padding: var(--s-10) var(--s-12);
  cursor: pointer; min-height: 44px;
}
.opt:hover { background: var(--surface-2); }
.opt input { margin-top: 3px; accent-color: var(--blue); width: 18px; height: 18px; flex: none; }
.opt .opt-text { font-family: var(--reading-font); }
.opt.is-selected { border-color: var(--blue); background: var(--blue-soft); }
.opt.is-correct { border-color: var(--green); background: var(--green-soft); }
.opt.is-wrong { border-color: var(--red); background: var(--red-soft); }
.opt .opt-mark { margin-left: auto; font-family: var(--display-font); font-weight: 700; }
.opt.is-correct .opt-mark { color: var(--green-deep); }
.opt.is-wrong .opt-mark { color: var(--red-deep); }

/* True / False buttons */
.tf-group { display: flex; gap: var(--s-10); margin-top: var(--s-12); }
.tf-btn {
  flex: 1; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line-strong);
}
.tf-btn .ar { font-family: var(--arabic-font); }
.tf-btn.is-selected { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-deep); }
.tf-btn.is-correct { border-color: var(--green); background: var(--green); color: #fff; }
.tf-btn.is-wrong { border-color: var(--red); background: var(--red); color: #fff; }

/* Dropdown completion */
.cloze-line { margin-top: var(--s-12); font-family: var(--reading-font); font-size: 1rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cloze-line select { min-width: 60%; }

/* Relative-pronoun and word-bank dropdowns */
.relative-dropdowns,
.bank-dropdowns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-10);
  margin-top: var(--s-12);
}
.relative-dropdown-field,
.bank-dropdown-field { display: grid; gap: var(--s-4); min-width: 210px; }
.relative-dropdown-label,
.bank-dropdown-label {
  color: var(--saffron-deep);
  font-family: var(--utility-font);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.relative-dropdown-field select,
.bank-dropdown-field select {
  width: 100%;
  min-height: 44px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--display-font);
  font-size: .95rem;
  font-weight: 700;
  padding: var(--s-8) var(--s-12);
}
.relative-dropdown-field select:focus,
.bank-dropdown-field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.relative-dropdown-field select.is-correct,
.bank-dropdown-field select.is-correct { border-color: var(--green); background: var(--green-soft); color: var(--green-deep); }
.relative-dropdown-field select.is-wrong,
.bank-dropdown-field select.is-wrong { border-color: var(--red); background: var(--red-soft); color: var(--red-deep); }

/* Inline grammar choices: the control occupies the printed blank inside the
   sentence instead of sitting in a separate answer row. */
.activity .inline-dropdown-prompt.relative-dropdowns,
.activity .inline-dropdown-prompt.bank-dropdowns,
.activity .inline-dropdown-prompt.inline-choice-prompt,
.activity .inline-dropdown-prompt.inline-typed-prompt {
  display: block;
  margin-top: var(--s-6);
  font-family: var(--display-font);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 2.65;
}
.inline-dropdown-prompt select {
  width: auto;
  max-width: min(100%, 270px);
  min-width: 150px;
  min-height: 40px;
  margin: 0 .3em;
  padding: var(--s-6) 2.2rem var(--s-6) var(--s-10);
  vertical-align: baseline;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--display-font);
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.2;
}
.inline-dropdown-prompt select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.inline-dropdown-prompt select.is-correct { border-color: var(--green); background: var(--green-soft); color: var(--green-deep); }
.inline-dropdown-prompt select.is-wrong { border-color: var(--red); background: var(--red-soft); color: var(--red-deep); }
.inline-dropdown-prompt .inline-typed-input {
  display: inline-block;
  width: clamp(150px, 22vw, 260px);
  min-height: 40px;
  margin: 0 .3em;
  padding: var(--s-6) var(--s-10);
  vertical-align: baseline;
}
.guided-join { margin-top: var(--s-6); }
.guided-join .join-source-prompt {
  color: var(--ink-muted);
  font-family: var(--reading-font);
  font-size: .98rem;
  line-height: 1.55;
}
.guided-join .inline-dropdown-prompt {
  margin-top: var(--s-6);
  padding-left: var(--s-12);
  border-left: 2px solid var(--saffron);
}

@media (max-width: 620px) {
  .inline-dropdown-prompt select {
    min-width: 132px;
    max-width: calc(100vw - 86px);
  }
  .inline-dropdown-prompt .inline-typed-input { width: min(190px, calc(100vw - 92px)); }
}

/* Feedback line under an activity */
.feedback { margin-top: var(--s-10); font-size: .9rem; display: none; align-items: center; gap: 8px; }
.activity[data-state="checked-correct"] .feedback,
.activity[data-state="checked-incorrect"] .feedback { display: flex; flex-wrap: wrap; }
.feedback .fb-label { font-family: var(--display-font); font-weight: 700; }
.activity[data-state="checked-correct"] .fb-label { color: var(--green-deep); }
.activity[data-state="checked-incorrect"] .fb-label { color: var(--red-deep); }
.feedback .fb-evidence { color: var(--ink-soft); }
.feedback .see-para {
  font-family: var(--utility-font); font-size: .72rem;
  border: 1px solid var(--blue); color: var(--blue-deep); background: var(--blue-soft);
  border-radius: var(--pill); padding: 2px 10px; min-height: 0;
}
.retry-btn { margin-top: var(--s-10); }

/* Section check bar */
.check-bar {
  display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap;
  margin-top: var(--s-12); padding-top: var(--s-12);
}
.check-bar .helper { font-family: var(--utility-font); font-size: .72rem; color: var(--ink-soft); }
.check-bar .sec-score { margin-left: auto; }

/* Final report */
.report {
  margin-top: var(--s-40);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-24);
}
.report h2 { font-size: 1.3rem; }
.report .total {
  font-family: var(--display-font); font-weight: 700;
  font-size: 3rem; line-height: 1; color: var(--blue-deep);
  margin: var(--s-8) 0;
}
.report .total small { font-size: 1.1rem; color: var(--ink-faint); }
.report .report-msg { color: var(--ink-soft); }
.report .completion-banner {
  margin-top: var(--s-16); padding: var(--s-12) var(--s-16);
  background: var(--green-soft); color: var(--green-deep);
  border-radius: var(--r-sm); font-family: var(--display-font); font-weight: 600;
}
.report-list { list-style: none; margin: var(--s-16) 0 0; padding: 0; display: grid; gap: 6px; }
.report-list li {
  display: flex; align-items: center; gap: var(--s-10);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--s-8) var(--s-12); background: var(--paper);
}
.report-list .rl-code { font-family: var(--utility-font); font-size: .72rem; color: var(--ink-soft); min-width: 3ch; }
.report-list .rl-status { margin-left: auto; font-family: var(--display-font); font-size: .8rem; }
.report-list .jump { min-height: 0; padding: 2px 10px; font-size: .72rem; }
.report-actions { display: flex; flex-wrap: wrap; gap: var(--s-10); margin-top: var(--s-20); }

/* Custom lesson-reset confirmation. This replaces the browser-native confirm
   so the destructive action remains visually and behaviorally part of the UI. */
body.reset-dialog-open { overflow: hidden; }
.reset-confirm-layer {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: var(--s-20);
  background: rgba(12, 28, 49, .52);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: reset-layer-in 150ms ease-out;
}
.reset-confirm-card {
  position: relative;
  width: min(100%, 470px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(14, 29, 48, .28), var(--shadow);
  padding: var(--s-28);
  animation: reset-card-in 180ms ease-out;
}
.reset-confirm-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-deep), var(--saffron), var(--blue-deep));
}
.reset-confirm-heading {
  display: flex;
  align-items: center;
  gap: var(--s-14);
}
.reset-confirm-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  height: 48px;
  border: 1px solid #cbd9e7;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-family: var(--display-font);
  font-size: 1.45rem;
  font-weight: 800;
}
.reset-confirm-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--saffron-deep);
  font-family: var(--utility-font);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reset-confirm-card h2 {
  margin: 0;
  color: var(--dash-navy);
  font-family: var(--display-font);
  font-size: 1.45rem;
  line-height: 1.15;
}
.reset-confirm-copy {
  margin: var(--s-20) 0 0;
  color: var(--ink-soft);
  font-family: var(--reading-font);
  font-size: 1.02rem;
  line-height: 1.55;
}
.reset-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-10);
  margin-top: var(--s-24);
}
.reset-confirm-btn {
  min-height: 44px;
  border-radius: var(--r-md);
  padding: var(--s-10) var(--s-20);
  font-family: var(--display-font);
  font-size: .94rem;
  font-weight: 750;
}
.reset-confirm-cancel {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
}
.reset-confirm-cancel:hover { background: var(--paper); }
.reset-confirm-action {
  border-color: var(--red-deep);
  background: var(--red-deep);
  color: #fff;
}
.reset-confirm-action:hover { border-color: var(--red); background: var(--red); }
.reset-confirm-btn:focus-visible { outline: 3px solid rgba(46, 109, 164, .32); outline-offset: 2px; }
@keyframes reset-layer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes reset-card-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .reset-confirm-card { padding: var(--s-24) var(--s-20); }
  .reset-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reset-confirm-layer,
  .reset-confirm-card { animation: none; }
}

.prevnext { display: flex; justify-content: space-between; gap: var(--s-12); margin-top: var(--s-32); }

/* ---------- Matching ---------- */
.match-group { display: grid; gap: var(--s-10); margin-top: var(--s-12); }
.match-row {
  display: grid; grid-template-columns: 1fr auto minmax(180px, 42%);
  gap: var(--s-10); align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); padding: var(--s-10) var(--s-12);
}
.match-row .match-left { font-family: var(--reading-font); font-size: .98rem; }
.match-row .match-arrow { color: var(--ink-faint); font-family: var(--display-font); }
.match-row select { width: 100%; }
.match-row select.is-correct { border-color: var(--green); background: var(--green-soft); }
.match-row select.is-wrong { border-color: var(--red); background: var(--red-soft); }

/* ---------- Sequence ---------- */
.seq-list { list-style: none; margin: var(--s-12) 0 0; padding: 0; display: grid; gap: var(--s-8); }
.seq-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-10); align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); padding: var(--s-8) var(--s-12); min-height: 44px;
}
.seq-pos {
  font-family: var(--utility-font); font-size: .72rem; color: var(--blue-deep);
  background: var(--blue-soft); border-radius: var(--pill); padding: 2px 8px;
}
.seq-text { font-family: var(--reading-font); font-size: .98rem; }
.seq-controls { display: flex; gap: 6px; }
.seq-move {
  width: 36px; min-height: 36px; padding: 0;
  font-family: var(--display-font); font-weight: 700;
}
.seq-move:disabled { opacity: .35; cursor: default; }
.seq-list.is-correct .seq-item { border-color: var(--green); background: var(--green-soft); }
.seq-list.is-wrong .seq-item { border-color: var(--red); background: var(--red-soft); }

/* ---------- Classification ---------- */
.classify-group { display: grid; gap: var(--s-8); margin-top: var(--s-12); }
.classify-row {
  display: flex; flex-wrap: wrap; gap: var(--s-10); align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); padding: var(--s-8) var(--s-12);
}
.classify-word {
  font-family: var(--reading-font); font-weight: 600;
  min-width: 8ch; flex: 0 1 auto;
}
.classify-row select { flex: 1 1 180px; }
.classify-row select.is-correct { border-color: var(--green); background: var(--green-soft); }
.classify-row select.is-wrong { border-color: var(--red); background: var(--red-soft); }

/* Per-verb explanations revealed after checking (classification entries with a note) */
.classify-feedback {
  margin-top: var(--s-12);
  padding: var(--s-12) var(--s-14);
  border-left: 2px solid var(--saffron);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--saffron-soft);
  font-family: var(--reading-font);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink);
}
.classify-fb-item { margin: var(--s-6) 0; }
.classify-fb-item strong {
  font-family: var(--utility-font);
  font-size: .8rem;
  color: var(--blue-deep);
}

/* ---------- Multi-select (checkbox options) ---------- */
.opt-check input { accent-color: var(--blue); }

/* ---------- Dropdown cloze ---------- */
.cloze-text {
  margin-top: var(--s-12);
  font-family: var(--reading-font); font-size: 1rem; line-height: 2.2;
}
.cloze-text select { min-width: 130px; margin: 0 4px; }
.cloze-text select.is-correct { border-color: var(--green); background: var(--green-soft); }
.cloze-text select.is-wrong { border-color: var(--red); background: var(--red-soft); }
/* Typed inline cloze: type each word into its blank in the sentence. */
.cloze-text .cloze-typed-input {
  display: inline-block;
  width: 9.5em;
  min-width: 88px;
  max-width: calc(100vw - 92px);
  margin: 0 4px;
  vertical-align: baseline;
}

/* ---------- Multi-blank word formation ----------
   The sentence is shown once as reference; each blank gets its own question. */
.wf-multi { margin-top: var(--s-10); display: grid; gap: var(--s-12); }
.wf-sentence {
  font-family: var(--reading-font); font-size: 1rem; line-height: 1.8;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--s-10) var(--s-12);
}
.wf-sentence-label {
  display: inline-block; margin-right: var(--s-8);
  font-family: var(--display-font); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
}
.wf-blank-marker {
  display: inline-block; margin: 0 3px; font-weight: 700;
  color: var(--saffron-deep); font-size: 1.05em; vertical-align: baseline;
}
.wf-questions { display: grid; gap: var(--s-10); }
.wf-question {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8);
}
.wf-q-label {
  font-family: var(--reading-font); font-size: .96rem; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
}
.wf-q-num { font-weight: 700; color: var(--saffron-deep); }
.wf-input {
  width: 11em; min-width: 100px; max-width: calc(100vw - 92px);
}


/* ---------- Table dropdown (chart fill) ---------- */
.td-table {
  width: 100%; border-collapse: collapse; margin-top: var(--s-12);
  font-family: var(--reading-font); font-size: .95rem;
}
.td-table th {
  font-family: var(--display-font); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: var(--s-8) var(--s-10); text-align: left;
}
.td-table td {
  border: 1px solid var(--line); background: var(--paper);
  padding: var(--s-8) var(--s-10); vertical-align: top;
}
.td-table .td-given { white-space: pre-wrap; }
.td-table select { width: 100%; min-width: 120px; }
.td-table select.is-correct { border-color: var(--green); background: var(--green-soft); }
.td-table select.is-wrong { border-color: var(--red); background: var(--red-soft); }

/* ---------- Answered-question selection ---------- */
.aq-list { display: grid; gap: var(--s-10); margin-top: var(--s-12); }
.aq-row {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); padding: var(--s-10) var(--s-12);
}
.aq-question { font-family: var(--reading-font); font-size: .98rem; margin: 0 0 var(--s-8); }
.aq-group { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.aq-btn {
  font-family: var(--display-font); font-size: .85rem; font-weight: 700;
  padding: var(--s-6) var(--s-12); border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.aq-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-deep); }
.aq-btn.is-selected { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-deep); }
.aq-btn.is-correct { border-color: var(--green); background: var(--green-soft); color: var(--green-deep); }
.aq-btn.is-wrong { border-color: var(--red); background: var(--red-soft); color: var(--red-deep); }
.aq-btn:disabled { cursor: default; }
.aq-evidence { margin: var(--s-8) 0 0; font-size: .88rem; color: var(--ink-soft); }


/* ---------- Typed answer (section 21) ---------- */
.typed-wrap { margin-top: var(--s-12); display: grid; gap: var(--s-8); }
.typed-label { font-size: .82rem; font-weight: 700; color: var(--saffron-deep); }
.cue-highlight {
  font-weight: 700; color: var(--blue-deep);
  background: var(--blue-soft);
  box-shadow: inset 0 -0.5em 0 var(--blue-soft);
  border-radius: var(--r-sm); padding: 0 5px;
  white-space: nowrap;
}
.cue-highlight-blue {
  color: var(--blue-deep);
  background: var(--blue-soft);
  box-shadow: inset 0 -0.5em 0 var(--blue-soft);
}
.typed-model {
  margin: var(--s-8) 0 0; font-size: .85rem; color: var(--ink-soft);
  background: var(--surface-2); border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm); padding: var(--s-6) var(--s-10);
  font-family: var(--utility-font);
}
.typed-model-label { font-weight: 700; color: var(--saffron-deep); }
.typed-model-answer { font-weight: 700; color: var(--green-deep); }
.typed-input {
  width: 100%; font-family: var(--reading-font); font-size: 1rem;
  padding: var(--s-10) var(--s-12); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
}
.typed-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.typed-input.is-correct { border-color: var(--green); background: var(--green-soft); }
.typed-input.is-wrong { border-color: var(--red); background: var(--red-soft); }

/* ---------- One-word text cloze ---------- */
.cloze-input {
  width: 100%; font-family: var(--reading-font); font-size: 1rem;
  padding: var(--s-10) var(--s-12); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
}
.cloze-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.cloze-input.is-correct { border-color: var(--green); background: var(--green-soft); }
.cloze-input.is-wrong { border-color: var(--red); background: var(--red-soft); }

/* ---------- Word-bank cloze (visible list + tap-to-place) ---------- */
.wbc-wrap { margin-top: var(--s-12); display: grid; gap: var(--s-10); }
.wbc-bank { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.wbc-chip {
  font-family: var(--display-font); font-size: .9rem; font-weight: 700;
  padding: var(--s-6) var(--s-14); border-radius: var(--pill);
  border: 1.5px solid var(--blue); background: var(--blue-soft); color: var(--blue-deep);
  cursor: pointer; transition: background .15s ease;
}
.wbc-chip:hover:not(:disabled) { background: var(--surface-2); }
.wbc-chip.is-used { opacity: .35; cursor: default; }
.wbc-chip:disabled { cursor: default; }
.wbc-blank {
  display: inline-block; min-width: 90px; text-align: center;
  font-family: var(--reading-font); font-size: .95rem;
  padding: var(--s-4) var(--s-10); margin: 0 2px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.wbc-blank.is-filled { border-style: solid; border-color: var(--blue); color: var(--blue-deep); background: var(--blue-soft); }
.wbc-blank.is-correct { border-color: var(--green); background: var(--green-soft); color: var(--green-deep); }
.wbc-blank.is-wrong { border-color: var(--red); background: var(--red-soft); color: var(--red-deep); }

/* ---------- Visible word bank for dropdown-cloze ---------- */
.cloze-wrap { display: grid; gap: var(--s-8); }
.cloze-bank { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.cloze-bank-word {
  font-family: var(--display-font); font-size: .85rem; font-weight: 700;
  padding: var(--s-4) var(--s-12); border-radius: var(--pill);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-soft);
}

/* --- "Review the lesson" mini-lesson (inline drop-down on mock exercises) --- */
.review-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 8px 0 0; padding: 8px 14px;
  background: var(--blue-soft); color: var(--blue-deep);
  border: 1px solid var(--blue); border-radius: var(--pill);
  font-family: var(--display-font); font-weight: 700; font-size: .85rem; cursor: pointer;
}
.review-toggle:hover,
.review-toggle:focus,
.review-toggle:active { background: var(--blue) !important; color: #fff !important; border-color: var(--blue-deep) !important; }
.review-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.review-ico { display: inline-grid; place-items: center; }
.review-ico svg { display: block; }
.review-caret { transition: transform .18s ease; }
.review-toggle[aria-expanded="true"] .review-caret { transform: rotate(180deg); }

.review-panel {
  margin: 10px 0 4px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--blue); border-radius: var(--r-md);
}
.review-panel.is-collapsed { display: none; }
.review-topic { font-family: var(--display-font); font-weight: 800; font-size: 1rem; color: var(--ink); margin-bottom: 6px; }
.review-rule { font-family: var(--reading-font); color: var(--ink); line-height: 1.6; margin: 0 0 10px; }
.review-examples { margin: 0 0 10px; padding-left: 18px; }
.review-examples li { font-family: var(--reading-font); color: var(--ink); line-height: 1.55; margin-bottom: 4px; }
.review-tip {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 12px 0 0;
  padding: 10px 12px;
  font-family: var(--utility-font);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--saffron-soft);
  border: 1px solid rgba(176, 125, 31, .35);
  border-left: 3px solid var(--saffron);
  border-radius: var(--r-sm);
}
.review-tip strong:not(.review-kw) { color: var(--saffron-deep); font-weight: 800; }
.review-kw { color: var(--blue-deep) !important; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .review-caret { transition: none; } }

/* ---------- Optional mock-exam timer ---------- */
.mock-timer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  align-items: center;
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--utility-font);
}
.mock-timer .mt-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mock-timer .mt-time {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--blue-deep);
  min-width: 4.5ch;
}
.mock-timer .mt-time.is-expired {
  color: var(--red);
  animation: mt-pulse 1.1s ease-in-out infinite;
}
@keyframes mt-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.mock-timer .mt-btn {
  padding: 4px 12px;
  font-family: var(--utility-font);
  font-size: .74rem;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--pill);
  cursor: pointer;
  transition: background .15s ease;
}
button.mock-timer .mt-btn:hover:not(:disabled) { background: var(--blue-deep); }
.mock-timer .mt-btn--ghost {
  color: var(--ink-soft);
  background: transparent;
  border-color: var(--line);
}
.mock-timer .mt-btn--ghost:hover:not(:disabled) { background: var(--surface-2); }
.mock-timer .mt-duration {
  padding: 3px 6px;
  font-family: var(--utility-font);
  font-size: .72rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.mock-timer .mt-status {
  width: 100%;
  font-family: var(--reading-font);
  font-size: .82rem;
  color: var(--red);
}
@media (prefers-reduced-motion: reduce) {
  .mock-timer .mt-time.is-expired { animation: none; }
}

/* ---------- True/False + sentence evidence selection ---------- */
.tfe-wrap { display: grid; gap: var(--s-10); }
.ev-actions { display: grid; gap: var(--s-6); }
.ev-btn {
  justify-self: start;
  padding: 7px 16px;
  font-family: var(--utility-font);
  font-size: .78rem;
  font-weight: 700;
  color: var(--blue-deep);
  background: var(--blue-soft);
  border: 1px solid rgba(46, 109, 164, .45);
  border-radius: var(--pill);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
button.ev-btn:hover:not(:disabled) { background: #d6e4f1; border-color: var(--blue); }
button.ev-btn:disabled { opacity: .45; cursor: not-allowed; }
.ev-selected {
  margin: 0;
  font-family: var(--reading-font);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ev-selected .ev-label {
  font-family: var(--utility-font);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ev-selected .ev-text { font-style: italic; }
/* A selection exists: make the chosen sentence clearly noticeable */
.ev-selected.has {
  padding: 9px 12px;
  background: var(--saffron-soft);
  border: 1px solid rgba(176, 125, 31, .4);
  border-left: 3px solid var(--saffron);
  border-radius: var(--r-md);
  color: var(--ink);
}
.ev-selected.has .ev-label { color: var(--saffron-deep); }
.ev-selected.has .ev-text {
  font-style: normal;
  font-weight: 600;
  color: var(--saffron-deep);
}
.ev-selected.is-correct {
  background: var(--green-soft);
  border-color: rgba(74, 122, 78, .45);
  border-left-color: var(--green);
}
.ev-selected.is-correct .ev-text { color: var(--green-deep); }
.ev-selected.is-wrong {
  background: var(--red-soft);
  border-color: rgba(176, 58, 45, .45);
  border-left-color: var(--red);
}
.ev-selected.is-wrong .ev-text { color: var(--red-deep); }

/* Evidence selection happening directly inside the reading passage */
.ev-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  align-items: center;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--saffron-soft);
  border: 1px solid rgba(176, 125, 31, .4);
  border-left: 3px solid var(--saffron);
  border-radius: var(--r-md);
}
.ev-note-tag {
  font-family: var(--utility-font);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--saffron-deep);
}
.ev-note-q {
  flex: 1 1 auto;
  font-family: var(--reading-font);
  font-size: .88rem;
  color: var(--ink);
}
.ev-note-cancel {
  padding: 4px 10px;
  font-family: var(--utility-font);
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid rgba(176, 125, 31, .45);
  border-radius: var(--pill);
  cursor: pointer;
}
button.ev-note-cancel:hover:not(:disabled) { background: var(--surface); }

/* Selectable sentences inside the existing passage */
.passage.ev-active .ev-sel {
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 0 0 2px transparent;
  transition: background .14s ease, box-shadow .14s ease;
}
.passage.ev-active .ev-sel:hover {
  background: rgba(217, 154, 43, .16);
  box-shadow: 0 0 0 2px rgba(217, 154, 43, .35);
}
.passage.ev-active .ev-sel.is-selected {
  background: rgba(217, 154, 43, .22);
  box-shadow: 0 0 0 2px rgba(217, 154, 43, .55);
}
@media (prefers-reduced-motion: reduce) {
  .passage.ev-active .ev-sel { transition: none; }
}

/* ---------- Open writing (AI-evaluated) ---------- */
.writing-wrap { display: grid; gap: var(--s-12); }
.writing-task {
  font-family: var(--reading-font); font-size: 1rem; color: var(--ink);
  white-space: pre-wrap; line-height: 1.6; padding: var(--s-10) var(--s-12);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.writing-checklist { margin: 0; padding-left: 20px; font-size: .9rem; color: var(--ink-soft); }
.writing-checklist li { margin-bottom: 4px; }
.writing-editor {
  width: 100%; min-height: 200px; font-family: var(--reading-font); font-size: 1rem;
  padding: var(--s-12); color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); resize: vertical;
  line-height: 1.6;
}
.writing-editor:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.writing-wordcount {
  font-family: var(--utility-font); font-size: .78rem; color: var(--ink-faint);
  justify-self: start; padding-left: 2px;
}
.writing-eval-btn { align-self: start; }
.writing-model-toggle {
  justify-self: start;
  margin-top: var(--s-6);
  padding: 6px 14px;
  font-family: var(--display-font);
  font-size: .78rem;
  font-weight: 700;
  color: var(--blue-deep);
  background: var(--blue-soft);
  border: 1px solid var(--blue);
  border-radius: var(--pill);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.writing-model-toggle:hover:not(:disabled) {
  background: var(--blue);
  color: #fff;
}
.writing-model {
  margin-top: var(--s-10);
  padding: var(--s-12) var(--s-14);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--r-sm);
}
.writing-model.is-collapsed { display: none; }
.writing-model-label {
  margin: 0 0 var(--s-6);
  font-family: var(--utility-font);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.writing-model-text {
  font-family: var(--reading-font);
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink);
}
.writing-feedback { display: grid; gap: var(--s-10); }
.writing-loading, .writing-error { font-family: var(--utility-font); font-size: .9rem; color: var(--ink-soft); }
.writing-error { color: var(--red); }
.writing-score {
  font-family: var(--display-font); font-size: 1.5rem; font-weight: 700;
  color: var(--blue-deep);
}
.writing-criteria { display: grid; gap: var(--s-8); }
.writing-criterion {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-8);
  padding: var(--s-8) var(--s-10); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.wc-label { text-transform: capitalize; font-size: .9rem; color: var(--ink-soft); }
.wc-score { font-weight: 700; color: var(--blue-deep); }
.wc-feedback { grid-column: 1 / -1; font-size: .85rem; color: var(--ink); margin: 0; }
.writing-requirements { list-style: none; padding: 0; }
.writing-requirements li { font-size: .9rem; margin-bottom: 4px; }
.req-met { color: var(--green-deep); }
.req-unmet { color: var(--red); }
.req-comment { color: var(--ink-soft); font-size: .85rem; }
.writing-section-label { font-weight: 700; font-size: .9rem; color: var(--ink); margin: 0; }
.writing-strengths, .writing-improvements, .writing-corrections { margin: 0; padding-left: 20px; font-size: .9rem; }
.writing-strengths li { color: var(--green-deep); }
.writing-improvements li { color: var(--saffron-deep); }
.writing-corrections li { color: var(--ink); }
.corr-original { text-decoration: line-through; color: var(--red); }
.corr-suggested { font-weight: 700; color: var(--green-deep); }
.corr-explanation { color: var(--ink-soft); font-size: .85rem; }
.writing-summary { font-size: .9rem; color: var(--ink); font-style: italic; margin: 0; }