/* Course Book on screen: the printed lesson, enlarged for screens, with the interactive layer (lx-*). */
.page { max-width: 980px; }
.lesson { background: var(--t-paper); color: var(--t-ink); border: 1px solid var(--line); border-radius: 16px; padding: clamp(16px, 4vw, 40px); margin: 0 0 24px;
  font-size: 15.5px; line-height: 1.55; zoom: 1.32; }
@supports not (zoom: 1) { .lesson { font-size: 120%; } }
.lesson img { max-width: 100%; height: auto; }
.lesson .keep, .lesson .keepgrp { break-inside: auto; }
.lesson h2.unit-h { margin-top: 10px; }
.lesson .unitpart + .unitpart { margin-top: 18mm; padding-top: 8mm; border-top: .4mm solid var(--t-line2); }
.tests a.home { width: auto; padding: 0 10px; margin-right: 8px; }
@media (max-width: 700px) { .lesson { zoom: 1; font-size: 16px; } }

/* answer-key bar under each exercise */
.lx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 3mm 0 2mm; padding: 2mm 3mm; border-radius: 2.4mm;
  background: var(--t-tint); font-family: "Inter", system-ui, sans-serif; zoom: .78; }
.lx-label { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font: 800 11px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--t-accent); }
.lx-label svg { width: 16px; height: 16px; }
.lx-score { font: 700 14px/1.2 "Inter", sans-serif; color: #157a4a; }
.lx-key { border: .5mm solid var(--t-accent); border-radius: 2.4mm; padding: 2.5mm 3.5mm 1.5mm; margin: 0 0 4mm; background: var(--t-panel); }
.lx-key-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 1.5mm; color: var(--t-deep); font-family: "Inter", sans-serif; }
.lx-key-head .btn { zoom: .78; }
.lx-key .keysec h5 { display: none; }
.lx-key .key-ex { margin: 0; }

/* self-marking multiple choice */
.lx-mcq ol.opts > li { cursor: pointer; border-radius: 1.4mm; padding: .6mm 1.6mm; margin-left: -1.6mm; transition: background .12s; }
.lx-mcq ol.opts > li:hover { background: var(--t-tint); }
.lx-mcq ol.opts > li:focus-visible { outline: .5mm solid var(--t-accent); }
.lx-mcq ol.opts > li.lx-picked { background: var(--t-tint2); box-shadow: inset .8mm 0 0 var(--t-accent); font-weight: 600; }
.lx-revealed .lx-mcq ol.opts > li.lx-right { background: var(--ok-tint); box-shadow: inset .8mm 0 0 #157a4a; }
.lx-revealed .lx-mcq ol.opts > li.lx-wrong.lx-picked { background: var(--bad-tint); box-shadow: inset .8mm 0 0 #b42335; }
.lx-why { margin: 1mm 0 0; padding: 1.6mm 2.4mm; background: var(--t-tint); border-radius: 1.4mm; font-size: 92%; color: var(--t-ink); }

/* writing space */
textarea.lx-write { width: 100%; border: .35mm solid var(--t-line2); border-radius: 1.6mm; padding: 2mm 2.5mm; font: inherit; font-family: "Source Serif 4", Georgia, serif; background: var(--t-paper); color: var(--t-ink); resize: vertical; margin: 1mm 0 2mm; }
textarea.lx-write:focus { outline: .6mm solid var(--t-tint2); border-color: var(--t-accent); }

/* recordings */
.lx-player { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 1.5mm 0 2mm; zoom: .78; }
.lx-player audio { flex: 1 1 260px; min-width: 0; height: 38px; }
.lesson .transcript { zoom: .8; margin: 0 0 3mm; }
.lesson .transcript mark { background: var(--t-mark); border-radius: 3px; padding: 0 2px; }
.lx-listen { zoom: .75; margin-left: 10px; vertical-align: middle; }
.lx-none { display: none !important; }