/* Computer exam layout: independent reading panes and answers inside the task. */
#app > .practice-shell.computer-exam { width:100%; max-width:none; height:100dvh; margin:0; border:0; border-radius:0; display:flex; flex-direction:column; background:#fff; color:#222; font-family:Arial,"PingFang SC",sans-serif; }
.computer-exam .practice-top { flex:0 0 auto; min-height:66px; padding:10px 22px; gap:16px; background:#f3f3f3; border-bottom:1px solid #bbb; }
.computer-exam .practice-title > strong { font:600 16px/1.4 Arial,"PingFang SC",sans-serif; color:#222; }
.computer-exam .practice-title { min-width:0; }
.computer-exam .timer { margin-left:auto; background:#fff; border:1px solid #a4a4a4; border-radius:3px; color:#222; }
.computer-exam #timer-value { font-size:22px; font-variant-numeric:tabular-nums; letter-spacing:.03em; color:#222; }
.computer-exam .timer.warning #timer-value { color:#b12f29; }
.computer-exam .btn { border-radius:3px; font-family:inherit; }
.computer-exam .btn.primary { background:#1677a2; border-color:#1677a2; color:#fff; }
.computer-exam .btn.ghost { color:#333; }
.computer-exam .practice-subbar { flex:0 0 auto; display:flex; padding:0 18px; gap:14px; background:#fafafa; border-bottom:1px solid #bbb; }
.computer-exam .practice-subbar > .section-tabs { flex:1; padding:0; overflow-x:auto; white-space:nowrap; }
.computer-exam .section-tabs button { padding:12px 18px; font-size:14px; color:#333; border-radius:0; }
.computer-exam .section-tabs button.active { background:#e7f0f5; color:#125c7a; box-shadow:inset 0 -3px #1677a2; }
.computer-exam .exam-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.computer-exam .exam-tools > .muted { font-size:11px; }
#app > .computer-exam .practice-main { flex:1 1 auto; min-height:0; max-height:none; height:auto; display:grid; grid-template-columns:minmax(0,calc(var(--exam-left,50%) - 5px)) 10px minmax(0,1fr); overflow:hidden; }
.computer-exam .passage-panel,.computer-exam .questions-panel { min-width:0; min-height:0; padding:20px 30px 45px; overflow:auto; overscroll-behavior:contain; background:#fff; border:0; }
.computer-exam .paper-heading { font-family:Arial,sans-serif; font-size:21px; line-height:1.45; color:#222; margin:16px 0 22px; }
.computer-exam .reading-text { font-family:Arial,"PingFang SC",sans-serif; color:#222; font-size:17px; line-height:1.8; }
.computer-exam .reading-text p { margin:0 0 20px; }
.computer-exam .annotation-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; border-bottom:1px solid #ddd; padding-bottom:9px; }
.computer-exam .annotation-tools > div { display:flex; gap:4px; }
.computer-exam .annotation-tools .btn { min-height:29px; padding:5px 9px; font-size:12px; }
.computer-exam .exam-part-label { font-size:14px; font-weight:700; color:#333; }
.computer-exam .exam-divider { background:#ececec; border-inline:1px solid #ccc; cursor:col-resize; position:relative; touch-action:none; }
.computer-exam .exam-divider::before { content:'⋮'; position:absolute; left:50%; top:48%; transform:translateX(-50%); color:#6b6b6b; font-size:23px; }
.computer-exam .exam-divider:hover,.computer-exam .exam-divider:focus,.computer-exam .exam-divider.dragging { background:#cce0eb; outline:0; }
.computer-exam .practice-media { flex:0 0 auto; border-bottom:1px solid #ccc; background:#f7f7f7; padding:7px 22px; }
.computer-exam .audio-box { display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start; gap:18px; padding:0; margin:0; background:none; border:0; border-radius:0; }
.computer-exam .exam-audio-title { display:flex; align-items:center; gap:7px; flex:none; font-size:14px; color:#222; }
.computer-exam .exam-audio-title svg { width:20px; height:20px; }
.computer-exam .audio-box > audio { width:360px; max-width:70%; height:34px; flex:0 1 360px; margin:0; }
.computer-exam .audio-box > #audio-status { flex:0 1 auto; font-size:12px; color:#666; }
.computer-exam #audio-status:empty { display:none; }
#app > .computer-exam[data-exam-module="listening"] .practice-main { display:block; }
.computer-exam .listening-questions { height:100%; max-width:1000px; margin:0 auto; padding:20px 36px 50px; }
.computer-exam .exam-bottom { flex:0 0 auto; display:flex; padding:12px 20px; gap:13px; background:#f3f3f3; border-top:1px solid #bbb; }
.computer-exam .exam-bottom > span { font-size:12px; color:#444; white-space:nowrap; }
.computer-exam .number-nav { display:flex; flex:1; flex-wrap:wrap; gap:4px; justify-content:center; }
.computer-exam .number-nav button { width:28px; height:28px; font-size:12px; border:1px solid #aaa; border-radius:2px; color:#333; background:#fff; }
.computer-exam .number-nav button.answered { color:#145675; background:#e3f0f8; border-color:#5692b0; }
.computer-exam .number-nav button.flagged { box-shadow:inset 0 3px #d49600; }
.computer-exam .writing-editor { display:flex; flex-direction:column; height:100%; min-height:0; }
.computer-exam .writing-editor textarea { width:100%; flex:1; min-height:320px; resize:none; border:1px solid #aaa; border-radius:0; font:17px/1.75 Arial,sans-serif; color:#222; padding:18px; background:white; }
.computer-exam .writing-editor-footer { display:flex; justify-content:space-between; align-items:center; color:#444; font-size:13px; padding:10px 0; }
.computer-exam .writing-editor .word-count { padding:0; color:#333; font-size:13px; }
.computer-exam .writing-table table { width:100%; border-collapse:collapse; font-size:14px; color:#222; margin-top:24px; }
.computer-exam .writing-table th,.computer-exam .writing-table td { border:1px solid #777; padding:11px 8px; text-align:center; }
.computer-exam .writing-table th { background:#f6f6f6; font-weight:600; }
.computer-exam .exam-notes { margin-top:28px; font-size:13px; color:#444; }
.computer-exam .exam-notes textarea { margin-top:10px; width:100%; font:15px/1.6 Arial,sans-serif; }
.computer-exam .pause-banner { padding:8px 24px; flex:0 0 auto; }
.computer-exam .is-paused > .exam-divider { pointer-events:none; }
.computer-exam :focus-visible { outline:2px solid #1677a2; outline-offset:2px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1000px) {
  .computer-exam .practice-top { padding:10px 14px; gap:9px; }
  .computer-exam .passage-panel,.computer-exam .questions-panel { padding:18px 20px 35px; }
  .computer-exam .exam-tools > .muted { display:none; }
  .computer-exam .exam-bottom { flex-wrap:wrap; gap:8px; padding:9px 14px; }
  .computer-exam .number-nav { order:3; flex-basis:100%; justify-content:flex-start; }
  .computer-exam .listening-questions { padding-inline:24px; }
}
@media (max-width:640px) {
  #app > .practice-shell.computer-exam { min-height:100dvh; height:auto; }
  .computer-exam .practice-top { flex-wrap:wrap; }
  .computer-exam .practice-top > .practice-title { order:-1; flex-basis:100%; padding:0; text-align:left; border:0; }
  .computer-exam .practice-title > strong { font-size:14px; }
  .computer-exam .practice-subbar { padding:0 7px; gap:4px; align-items:center; }
  .computer-exam .section-tabs button { font-size:12px; padding:12px 9px; }
  .computer-exam .exam-tools { gap:0; }
  .computer-exam .exam-tools .btn { font-size:11px; padding:5px; }
  #app > .computer-exam .practice-main { display:block; min-height:0; }
  .computer-exam .exam-divider { display:none; }
  #app > .computer-exam .practice-main > .passage-panel { max-height:44vh; overflow:auto; border-bottom:6px solid #ddd; }
  #app > .computer-exam .practice-main > .questions-panel { max-height:none; overflow:visible; }
  .computer-exam .listening-questions { height:auto; padding-inline:18px; }
  .computer-exam .practice-media { padding:6px 12px; }
  .computer-exam .audio-box { flex-wrap:wrap; gap:8px; }
  .computer-exam .audio-box > audio { max-width:100%; flex:1 1 220px; }
  .computer-exam .exam-audio-title { font-size:12px; }
  .computer-exam .exam-bottom { position:sticky; bottom:0; z-index:4; }
  .computer-exam .writing-editor textarea { min-height:45vh; }
  .computer-exam #timer-value { font-size:19px; }
  .computer-exam .writing-table th,.computer-exam .writing-table td { padding:8px 5px; font-size:12px; }
}

/* Task groups keep instructions and shared material above the related answers. */
.exam-question-groups { font-family:Arial,"PingFang SC",sans-serif; font-size:16px; line-height:1.7; color:#222; }
.exam-question-group { padding:24px 0 28px; border-bottom:1px solid #d8d8d8; }
.exam-question-group:first-child { padding-top:0; }
.exam-question-group:last-child { border-bottom:0; }
.exam-group-range { margin:0 0 10px; color:#222; font-size:18px; font-weight:700; line-height:1.5; }
.exam-group-instructions { margin:0 0 22px; color:#222; font-size:15px; line-height:1.65; }
.exam-group-title { margin:22px 0 16px; font-family:Arial,sans-serif; color:#222; font-size:19px; font-weight:700; }
.exam-paper-paragraph { margin:0 0 15px; font-size:16px; line-height:2.35; }
.exam-gap-anchor { display:inline-flex; align-items:center; vertical-align:baseline; gap:5px; white-space:nowrap; margin:2px 4px; scroll-margin:45px; }
.exam-gap-number { color:#333; font-size:14px; font-weight:700; min-width:14px; }
.exam-inline-answer { display:inline-block; width:155px; height:32px; min-height:32px; margin:0; padding:3px 7px; background:#fff; color:#111; border:1px solid #888; border-radius:0; font:16px/1.4 Arial,sans-serif; box-shadow:none; vertical-align:baseline; }
.exam-inline-answer::placeholder { color:#666; opacity:1; }
.exam-inline-answer:focus { border-color:#1677a2; outline:2px solid #1677a2; outline-offset:1px; box-shadow:none; }
.exam-inline-select { width:96px; padding-right:22px; }
.exam-inline-answer:disabled { color:#555; background:#fafafa; opacity:1; }
.exam-flag { display:inline-flex; align-items:center; justify-content:center; width:22px; height:25px; min-height:0; padding:0; color:#aaa; background:transparent; border:0; border-radius:0; font-size:19px; line-height:1; cursor:pointer; }
.exam-flag:hover,.exam-flag.selected { color:#a67400; background:#fff4cf; }
.exam-gap-anchor.marked .exam-inline-answer { border-color:#bd8c22; }
.exam-question { margin:0 0 22px; }
.exam-question-heading { display:grid; grid-template-columns:25px minmax(0,1fr) 22px; gap:7px; align-items:start; margin-bottom:9px; }
.exam-question-number { font-size:16px; font-weight:700; line-height:1.7; }
.exam-question-prompt { font-size:16px; line-height:1.7; color:#222; }
.exam-choice-options { display:flex; flex-direction:column; align-items:stretch; gap:5px; padding-left:32px; }
.exam-choice-option { display:flex; align-items:baseline; gap:9px; color:#222; font-size:15px; line-height:1.65; padding:5px 3px; cursor:pointer; }
.exam-choice-option input[type="radio"] { width:16px; height:16px; flex:none; margin:0 1px 0 0; accent-color:#1677a2; transform:translateY(2px); }
.exam-choice-option:has(input:checked) { background:#eaf3f9; }
.exam-choice-letter { min-width:16px; font-weight:700; }
.exam-judgement-question .exam-choice-options { flex-direction:row; flex-wrap:wrap; gap:20px; }
.exam-judgement-question .exam-choice-option { font-size:14px; }
.exam-option-bank { display:grid; grid-template-columns:minmax(0,1fr); gap:5px 20px; margin:18px 0 24px; padding:17px 20px; border:1px solid #999; background:#fff; }
.exam-option-bank-item { display:grid; grid-template-columns:24px minmax(0,1fr); gap:6px; color:#222; font-size:15px; line-height:1.6; }
.exam-option-bank-item > strong { font-weight:700; }
.exam-group-summary .exam-option-bank { grid-template-columns:repeat(3,minmax(0,1fr)); }
.exam-group-example { padding:9px 0; margin-bottom:15px; font-size:15px; font-weight:600; }
.exam-matching-rows { display:flex; flex-direction:column; gap:12px; }
.exam-matching-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.exam-row-prompt { line-height:1.7; font-size:16px; }
.exam-booking-form { margin:18px 0; padding:20px 24px; border:1px solid #999; }
.exam-form-row { display:grid; grid-template-columns:minmax(140px,1fr) minmax(180px,1.5fr); align-items:baseline; gap:16px; margin:9px 0; }
.exam-form-row dt { font-weight:600; font-size:15px; }
.exam-form-row dd { margin:0; font-size:16px; }
.exam-form-row .exam-inline-answer { max-width:190px; }
.exam-group-notes .exam-notes-body { border:1px solid #999; padding:20px 24px; }
.exam-inline-sentence { line-height:2.35; }
.exam-generic-questions > .exam-group-instructions { margin-bottom:25px; }
.question-reference .exam-question-groups { margin-top:22px; }
.question-reference .exam-question-group { padding-inline:0; }
.question-reference .exam-paper-paragraph { line-height:2.35; }
@media (max-width:640px) {
  .exam-question-groups,.exam-paper-paragraph,.exam-row-prompt { font-size:15px; }
  .exam-inline-answer { width:135px; font-size:15px; }
  .exam-inline-select { width:85px; }
  .exam-gap-anchor { gap:4px; margin-inline:3px; }
  .exam-gap-number { font-size:12px; }
  .exam-matching-row { grid-template-columns:minmax(0,1fr) auto; gap:7px; }
  .exam-booking-form { padding:12px 14px; }
  .exam-form-row { grid-template-columns:minmax(90px,1fr) minmax(150px,1.5fr); gap:8px; }
  .exam-group-notes .exam-notes-body { padding:14px; }
  .exam-group-summary .exam-option-bank { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .exam-judgement-question .exam-choice-options { gap:10px; }
}

/* Map labels and table cells remain the answer positions in the computer exam. */
.exam-table-scroll{overflow-x:auto;margin:20px 0}
.exam-answer-table{border-collapse:collapse;width:100%;min-width:550px;line-height:1.65}
.exam-answer-table th,.exam-answer-table td{border:1px solid #9b9fa1;padding:14px 16px;text-align:left;vertical-align:top}
.exam-answer-table th{background:#f2f3f3;font-weight:600}
.exam-answer-table .exam-inline-answer{max-width:170px}
.exam-map-scroll{overflow-x:auto;margin:20px 0}
.exam-map{position:relative;max-width:900px}
.exam-map img{display:block;width:100%;height:auto}
.exam-map.has-positioned-fields{min-width:700px}
.exam-map.has-positioned-fields .exam-map-field{position:absolute}
.exam-map-field .exam-gap-anchor{display:flex;align-items:center;gap:6px;background:white}
.exam-map-field .exam-inline-answer{width:100%;min-width:0;flex:1}
.exam-map-field .exam-flag{flex-shrink:0}

.exam-composite-answer{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.exam-composite-answer .exam-inline-answer{width:120px;min-width:80px;max-width:145px}

/* Figures and evidence tables stay with their original question or passage. */
.exam-question-figure { margin:18px 0; }
.exam-question-figure img { display:block; max-width:100%; height:auto; margin:auto; }
.exam-passage-table { width:100%; border-collapse:collapse; font:15px/1.6 Arial,sans-serif; margin:20px 0; color:#222; }
.exam-passage-table caption { caption-side:bottom; text-align:left; font-style:italic; padding-top:8px; }
.exam-passage-table th,.exam-passage-table td { border:1px solid #777; padding:10px; text-align:left; background:#fff; font-weight:normal; }
.exam-passage-table thead th { background:#f6f6f6; font-weight:600; }

.exam-question-figure figcaption { font:12px/1.5 Arial,sans-serif; color:#66716b; text-align:center; margin-top:7px; }