/* IELTS interactive tests: the printed test on screen, with answer inputs (ix-*) and explanations. */
.ix-in { font: 600 15px/1.2 "Inter", system-ui, sans-serif; width: 9em; max-width: 100%; padding: 3px 8px; margin: 0 2px; border: 1.5px solid var(--t-soft);
  border-radius: 6px; background: var(--t-paper); color: var(--t-deep); vertical-align: baseline; }
.ix-in.wide { width: 13em; }
.ix-in::placeholder { color: var(--t-mute); font-weight: 800; }
.ix-in:focus { outline: 3px solid var(--t-tint2); border-color: var(--t-accent); }
.ix-in.ok { border-color: #157a4a; background: var(--ok-tint); color: #157a4a; }
.ix-in.bad { border-color: #b42335; background: var(--bad-tint); color: #b42335; }
.ix-choice { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; margin-left: 4px; }
.ix-choice button { font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: .02em; border: 1.5px solid var(--t-line2); background: var(--t-paper); color: var(--t-deep); border-radius: 6px; padding: 5px 8px; cursor: pointer; }
.ix-choice button:hover { border-color: var(--t-accent); }
.ix-choice button.on { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }
.ix-choice button.key { background: #157a4a; border-color: #157a4a; color: #fff; }
.ix-choice button.bad { background: #b42335; border-color: #b42335; color: #fff; }
.ix-mcq ol.opts > li { cursor: pointer; border-radius: 1.4mm; padding: .6mm 1.6mm; margin-left: -1.6mm; transition: background .12s; }
.ix-mcq ol.opts > li:hover { background: var(--t-tint); }
.ix-mcq ol.opts > li.ix-picked { background: var(--t-tint2); box-shadow: inset .8mm 0 0 var(--t-accent); font-weight: 600; }
.ix-mcq ol.opts > li.ix-key { background: var(--ok-tint); box-shadow: inset .8mm 0 0 #157a4a; }
.ix-mcq ol.opts > li.ix-wrong { background: var(--bad-tint); box-shadow: inset .8mm 0 0 #b42335; }

.ix-exp { display: grid; gap: 2mm; margin: 0 0 4mm; }
.ix-row { display: flex; gap: 3mm; align-items: flex-start; border: .35mm solid var(--t-line2); border-radius: 2mm; padding: 2mm 3mm; background: var(--t-panel); }
.ix-n { flex: none; display: inline-grid; place-items: center; min-width: 7mm; height: 7mm; border-radius: 1.6mm; background: var(--t-accent); color: #fff; font: 800 9pt/1 "Inter", sans-serif; }
.ix-body { flex: 1; min-width: 0; }
.ix-ans { margin: .6mm 0 0; font-family: "Inter", sans-serif; }
.ix-ans b { color: #157a4a; }
.ix-ans small { color: var(--t-mute); margin-left: 2mm; }
.ix-verdict { margin-left: 3mm; font: 700 8.6pt "Inter", sans-serif; }
.ix-verdict.ok { color: #157a4a; } .ix-verdict.bad { color: #b42335; }
.ix-why blockquote { margin: 1.5mm 0; padding: .6mm 0 .6mm 3mm; border-left: .8mm solid var(--t-accent); font-style: italic; }
.ix-why p { margin: 0 0 1.5mm; }
.ix-acts { display: flex; flex-wrap: wrap; gap: 6px; zoom: .8; }

#player { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
#player .tag { font: 700 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
#player audio { flex: 1 1 280px; min-width: 0; height: 38px; }
#transcript { max-height: 380px; margin: 0 0 14px; }
#transcript mark { background: var(--t-mark); border-radius: 3px; padding: 0 2px; }
mark.proofmark { background: var(--t-mark); box-shadow: 0 0 0 2px var(--t-mark); border-radius: 2px; }
.lesson .module, .lesson section.lpart, .lesson section.rpassage, .lesson section.rsection { break-before: auto; }
.lesson .lpart + .lpart, .lesson .rpassage + .rpassage, .lesson .rsection + .rsection { margin-top: 14mm; padding-top: 8mm; border-top: .5mm solid var(--t-tint2); }

/* writing and speaking practice */
.wx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 3mm 0; font-family: "Inter", sans-serif; zoom: .78; }
.wx-clock { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; background: var(--t-tint); color: var(--t-deep); border-radius: 999px; padding: 6px 14px; font: 800 18px/1 "Inter", sans-serif; font-variant-numeric: tabular-nums; }
.wx-clock small { font: 700 10.5px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--t-mute); }
.wx-clock.live { background: var(--t-deep); color: #fff; } .wx-clock.live small { color: var(--t-line2); }
textarea.wx-text { width: 100%; min-height: 70mm; border: .4mm solid var(--t-line2); border-radius: 2mm; padding: 3mm; font: 400 11pt/1.6 "Source Serif 4", Georgia, serif; background: var(--t-paper); color: var(--t-ink); resize: vertical; }
textarea.wx-text:focus { outline: .6mm solid var(--t-tint2); border-color: var(--t-accent); }
.wx-count { font: 600 9pt "Inter", sans-serif; color: var(--t-mute); margin: 1mm 0 3mm; display: flex; justify-content: space-between; }
.wx-model { margin: 3mm 0 6mm; }
.wx-rec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; zoom: .78; margin: 0 0 3mm; }
.wx-rec audio { flex: 1 1 260px; height: 38px; }
.wx-rec .btn[aria-pressed="true"] { background: #b42335; border-color: #b42335; color: #fff; }
.wx-listen { zoom: .75; margin-left: 10px; vertical-align: middle; }
.ix-in.reveal { border-color: #157a4a; background: var(--ok-tint); } .ix-in.reveal::placeholder { color: #157a4a; font-weight: 700; }
.ix-labels { display: flex; flex-wrap: wrap; gap: 3mm 6mm; margin: 2mm 0 4mm; padding: 3mm; background: var(--t-panel); border-radius: 2mm; }
.ix-labels label { display: inline-flex; align-items: center; gap: 2mm; }