/*
 * Mock exam, computer-delivered look. Loaded after ielts-mock-v2.css on /study/ielts/mock-exam.
 * While a section runs the page becomes the test screen a candidate knows from the official computer test: a black
 * candidate bar (name, number, "X minutes left", Help, Hide), a grey "Part" box, the passage and the questions side
 * by side (Arial, black on white, no decoration), question groups with the test's own wording, and a bottom bar with
 * a Review box, the parts and question numbers, arrows and Submit. The start, break and results screens keep the
 * Vidi look. landing-edu/styles.css forces square corners, so any rounding needs !important.
 * Never style details.study-navigation / details.study-rail-account outside the running exam.
 */
.mk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cd-top { display: none; }

/* ---------- The running exam takes the whole window ---------- */
body.mk-v2[data-mock-status="running"] { padding: 0 !important; background: #fff; }
body.mk-v2[data-mock-status="running"] :is(.study-navigation, #study-feedback, .mock-paper-picker, .mock-format-link, .skip-link, .site-header) { display: none !important; }
body.mk-v2[data-mock-status="running"] main.wrap { width: 100%; max-width: none; margin: 0; padding: 0; }
body.mk-v2[data-mock-status="running"] .mock-toolbar.mk-bar { display: none; }
body.mk-v2[data-mock-status="running"] .mock-section > :is(.mk-note, .mk-task-chips, .mock-part-tabs, nav.mock-part-tabs) { display: none; }
body.mk-v2[data-mock-status="running"] #mock-current { font-family: Arial, Helvetica, sans-serif; color: #111; }
body.mk-v2[data-mock-status="running"] #mock-current :is(h2, h3, h4, p, li, label, td, th, span, b, strong, input, select, textarea, button, legend, output) { font-family: Arial, Helvetica, sans-serif; }
body.mk-v2[data-mock-status="running"] .mock-section:not([hidden]) { display: block; }
body.mk-v2[data-mock-status="running"] .mock-part,
body.mk-v2[data-mock-status="running"] .mock-writing-task { margin: 0; padding: 0; background: #fff; border-radius: 0 !important; box-shadow: none; animation: none; }

/* ---------- Candidate bar ---------- */
body.mk-v2[data-mock-status="running"] .cd-top { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 12px; min-height: 52px; padding: 6px 16px; background: #111; color: #fff; font: 14px/1.3 Arial, Helvetica, sans-serif; }
.cd-who { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.cd-name { overflow: hidden; font-weight: 700; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.cd-no { color: #d4d4d4; white-space: nowrap; }
.mk-v2 .cd-timer { position: static; display: inline-flex; place-items: normal; align-items: center; gap: 8px; width: auto; height: auto; min-height: 0; padding: 0;
  background: none; color: #fff; border: 0; border-radius: 0 !important; animation: none; }
.mk-v2 .cd-timer > .mk-i { width: 20px; height: 20px; stroke: currentColor; }
.mk-v2 .cd-timer #mock-clock { color: inherit; font: 700 17px/1 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-v2 .cd-timer[data-hidden="true"] #mock-clock { visibility: hidden; }
.mk-v2 .cd-timer[data-level="warn"], .mk-v2 .cd-timer[data-level="danger"] { background: none; border: 0; }
.mk-v2 .cd-timer[data-level="warn"] { color: #ffd166; }
.mk-v2 .cd-timer[data-level="danger"] { color: #ff8a8a; }
.cd-tools { display: flex; justify-content: flex-end; gap: 8px; }
.cd-btn { min-height: 34px; padding: 5px 14px; background: #fff; color: #111; border: 1px solid #fff; border-radius: 3px !important; font: 700 13.5px/1.2 Arial, Helvetica, sans-serif; cursor: pointer; }
.cd-btn:hover { background: #e5e5e5; }
.cd-btn:focus-visible { outline: 3px solid #5b9dff; outline-offset: 2px; }
.cd-btn[aria-pressed="true"] { background: #4a4a4a; color: #fff; }
.cd-btn-dark { background: #111; color: #fff; border-color: #111; }
.cd-btn-dark:hover { background: #333; }

/* ---------- Grey "Part" box ---------- */
.cd-partbox { display: none; }
body.mk-v2[data-mock-status="running"] .cd-partbox { display: block; margin: 10px 16px 10px; padding: 9px 16px 10px; background: #f1f1f1; border: 1px solid #cfcfcf;
  border-radius: 4px !important; color: #111; font: 15px/1.45 Arial, Helvetica, sans-serif; }
body.mk-v2[data-mock-status="running"] .cd-partbox p { margin: 0; color: #111; font: inherit; }
body.mk-v2[data-mock-status="running"] .cd-partbox .cd-part-name { font-weight: 700; font-size: 16px; }

/* ---------- Passage and questions side by side ---------- */
body.mk-v2[data-mock-status="running"] #mock-current .study-split { height: var(--mk-split-h, 68dvh); min-height: 320px; margin: 0; gap: 0;
  border: 0; border-top: 1px solid #cfcfcf; border-bottom: 1px solid #cfcfcf; border-radius: 0 !important; }
body.mk-v2[data-mock-status="running"] #mock-current .study-split.has-divider {
  grid-template-columns: minmax(0, calc(var(--mk-split, 50) * 1% - 7px)) 14px minmax(0, 1fr); }
body.mk-v2[data-mock-status="running"] #mock-current .study-split > .study-pane { padding: 14px 26px 30px; background: #fff; border-right: 0; }
body.mk-v2[data-mock-status="running"] #mock-current .study-split .study-pane-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.mk-v2[data-mock-status="running"] .mock-passage { position: static; max-height: none; overflow: visible; padding: 0; background: #fff; border: 0; box-shadow: none;
  color: #111; font: 16px/1.65 Arial, Helvetica, sans-serif; }
body.mk-v2[data-mock-status="running"] .mock-passage .cd-passage-title { margin: 2px 0 14px; color: #111; font: 700 19px/1.3 Arial, Helvetica, sans-serif; }
body.mk-v2[data-mock-status="running"] .mock-passage p { margin: 0 0 14px; line-height: 1.65; }
body.mk-v2[data-mock-status="running"] .mock-passage p strong { margin-right: 8px; }
body.mk-v2[data-mock-status="running"] .mock-passage:focus-visible { outline: 2px solid #1a56db; outline-offset: 4px; }

.mk-divider { position: relative; z-index: 1; min-width: 0; background: #e9e9e9; border-left: 1px solid #cfcfcf; border-right: 1px solid #cfcfcf; cursor: col-resize; touch-action: none; }
.mk-divider::before { content: "\2194"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 26px; height: 26px; background: #fff;
  color: #111; border: 1px solid #8a8a8a; border-radius: 50% !important; font: 700 14px/1 Arial, sans-serif; transform: translate(-50%, -50%); }
.mk-divider:hover::before, .mk-divider.is-dragging::before { background: #111; color: #fff; border-color: #111; }
.mk-divider:focus-visible { outline: 3px solid #1a56db; outline-offset: -3px; }

/* ---------- Question groups, the test's wording ---------- */
body.mk-v2[data-mock-status="running"] .mk-group { margin: 0 0 26px; }
.mk-group-head { margin: 0 0 12px; }
body.mk-v2 .mk-group-head p { margin: 0 0 4px; color: #111; font: 15px/1.5 Arial, Helvetica, sans-serif; }
body.mk-v2 .mk-group-head .mk-group-q { margin-bottom: 6px; font-weight: 700; font-size: 16px; }
.mk-key-table { margin: 6px 0 4px; border-collapse: collapse; font: 15px/1.45 Arial, Helvetica, sans-serif; }
.mk-key-table th { padding: 2px 18px 2px 0; text-align: left; font-weight: 700; white-space: nowrap; vertical-align: top; }
.mk-key-table td { padding: 2px 0; }
.mk-list-box { margin: 10px 0 4px; padding: 10px 16px 8px; border: 1px solid #111; background: #fff; }
body.mk-v2 .mk-list-box .mk-list-title { margin: 0 0 6px; font-weight: 700; text-align: center; }
.mk-list-box ul { margin: 0; padding: 0; list-style: none; font: 15px/1.6 Arial, Helvetica, sans-serif; }
.mk-list-box li b { display: inline-block; min-width: 2.2em; }

body.mk-v2[data-mock-status="running"] .mock-question { position: relative; margin: 0 0 14px; padding: 2px 4px; background: none; border: 0; border-radius: 0 !important; box-shadow: none; }
body.mk-v2[data-mock-status="running"] .mock-question.is-answered { background: none; }
body.mk-v2[data-mock-status="running"] .mock-question.is-answered::after { display: none; }
body.mk-v2[data-mock-status="running"] .mock-question:focus-within { background: none; box-shadow: none; }
body.mk-v2[data-mock-status="running"] .mock-question.is-flagged > .mk-q-line .mk-qn,
body.mk-v2[data-mock-status="running"] .mk-q-inline.is-flagged .mk-gap { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
body.mk-v2 .mock-question .mk-q-line { display: block; margin: 0 0 6px; padding: 0; color: #111; font: 16px/2 Arial, Helvetica, sans-serif; }
.mk-qn { display: inline-grid; place-items: center; min-width: 26px; height: 24px; margin-right: 6px; padding: 0 4px; font-weight: 700; border: 1px solid transparent; border-radius: 3px !important; }

/* Gaps: a box typed straight into the sentence, its question number shown until it is answered. */
body.mk-v2 .mock-page .mock-question input.mk-gap,
body.mk-v2 .mock-question input.mk-gap { display: inline-block; width: 10.5em; max-width: 100%; height: 30px; margin: 0 4px; padding: 2px 8px; vertical-align: middle;
  background: #fff; color: #111; border: 1px solid #111; border-radius: 2px !important; font: 15px/1.2 Arial, Helvetica, sans-serif; text-align: center; box-shadow: none; }
.mock-question input.mk-gap::placeholder { color: #111; font-weight: 700; opacity: 1; }
.mock-question input.mk-gap:focus::placeholder { color: transparent; }
body.mk-v2 .mock-question input.mk-gap:focus { outline: 2px solid #1a56db; outline-offset: 1px; border-color: #1a56db; box-shadow: none; }
body.mk-v2 .mock-question input.mk-gap:disabled { background: #f5f5f5; color: #555; }
.mk-q-inline { display: inline; }
.ex-step .mk-gap { margin: 2px 4px; }

/* Choices: radio buttons, one option per line (TRUE / FALSE / NOT GIVEN in a row). */
.mk-opts { display: grid; gap: 4px; margin: 0 0 4px 34px; }
.mk-opts-row { display: flex; flex-wrap: wrap; gap: 6px 22px; }
body.mk-v2 .mock-question label.mk-opt { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 4px 6px; color: #111; font: 15.5px/1.45 Arial, Helvetica, sans-serif; cursor: pointer; }
.mk-opt:hover { background: #f1f1f1; }
body.mk-v2 .mock-question .mk-opt input[type="radio"] { flex: none; width: 18px; height: 18px; max-width: none; margin: 2px 0 0; padding: 0; accent-color: #111; border: 0; box-shadow: none; }
.mk-opt-letter { flex: none; min-width: 1.1em; font-weight: 700; }
.mk-opt:has(input:checked) { background: #ececec; }
.mk-opt:has(input:focus-visible) { outline: 2px solid #1a56db; outline-offset: 1px; }

/* Drop-downs: headings, paragraphs and plan letters. */
body.mk-v2 .mock-question.mk-q-select { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
body.mk-v2 .mock-question.mk-q-select .mk-q-line { flex: 1 1 14em; margin: 0; }
body.mk-v2 .mock-question.mk-q-select select { flex: 0 1 auto; width: auto; min-width: 5.5em; max-width: 100%; height: 32px; padding: 2px 8px; background: #fff; color: #111;
  border: 1px solid #111; border-radius: 2px !important; font: 15px Arial, Helvetica, sans-serif; box-shadow: none; }
body.mk-v2 .mock-question select:focus { outline: 2px solid #1a56db; outline-offset: 1px; box-shadow: none; }
body.mk-v2 .mk-group[data-group="heading"] .mock-question.mk-q-select select { min-width: 6em; }
body.mk-v2 .mk-group-figure .mk-figure-questions .mock-question { margin-bottom: 8px; }

/* ---------- Listening: one wide column; a plan sits beside its questions ---------- */
body.mk-v2[data-mock-status="running"] .mock-section[data-section="0"] .mock-part { max-width: 1180px; margin: 0 auto; }
body.mk-v2[data-mock-status="running"] .mock-section[data-section="0"] .mk-listening-questions { padding: 6px 26px 24px; }
body.mk-v2[data-mock-status="running"] .mock-section[data-section="0"] .cd-partbox { margin-left: 26px; margin-right: 26px; }
body.mk-v2[data-mock-status="running"] .mock-section[data-section="0"] .mock-question:not(.mk-q-choice) { max-width: 760px; }
body.mk-v2[data-mock-status="running"] .mock-section[data-section="0"] > .mk-note, #mock-resume-audio { margin: 8px 26px; }

/* ---------- Writing: the task and figure left, the answer box right ---------- */
.mk-task-box { margin: 0 0 12px; padding: 12px 16px; border: 1px solid #111; background: #fff; }
body.mk-v2 .mk-task-box p { margin: 0 0 8px; color: #111; font: 15.5px/1.55 Arial, Helvetica, sans-serif; }
body.mk-v2 .mk-task-box p:last-child { margin-bottom: 0; }
body.mk-v2[data-mock-status="running"] .mock-section[data-section="2"] .mock-prompt { padding: 0; background: none; border: 0; font-weight: 400; }
body.mk-v2[data-mock-status="running"] .mock-section[data-section="2"] .study-pane-answers > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.mk-v2[data-mock-status="running"] .mock-section[data-section="2"] .study-pane-answers textarea { width: 100%; min-height: max(220px, calc(var(--mk-split-h, 600px) - 110px));
  padding: 12px 14px; background: #fff; color: #111; border: 1px solid #111; border-radius: 0 !important; font: 16px/1.65 Arial, Helvetica, sans-serif; resize: none; box-shadow: none; }
body.mk-v2[data-mock-status="running"] .mock-section[data-section="2"] .study-pane-answers textarea:focus { outline: 2px solid #1a56db; outline-offset: 0; }
body.mk-v2[data-mock-status="running"] .mock-section[data-section="2"] [data-word-count] { margin: 8px 0 0; padding: 0; background: none; color: #111; text-align: right;
  font: 700 14px Arial, Helvetica, sans-serif; }
body.mk-v2[data-mock-status="running"] .mock-section[data-section="2"] .cd-partbox { margin: 10px 16px; }

/* ---------- Bottom bar: Review, parts and numbers, arrows, Submit ---------- */
.cd-review { display: none; }
.mk-v2 .mk-nav { position: sticky; bottom: 0; z-index: 25; display: grid; grid-template-columns: auto auto minmax(0, 1fr) 44px 44px auto;
  grid-template-areas: "review parts strip prev next finish"; align-items: center; gap: 8px; margin: 0; padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid #bdbdbd; border-radius: 0 !important; box-shadow: 0 -6px 16px -14px rgba(0, 0, 0, .5); font-family: Arial, Helvetica, sans-serif; }
.mk-v2 .mk-nav[hidden] { display: none; }
body[data-mock-status="running"] .cd-review { grid-area: review; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px;
  border-right: 1px solid #d4d4d4; color: #111; font: 700 14px Arial, Helvetica, sans-serif; cursor: pointer; }
.cd-review input { width: 18px; height: 18px; margin: 0; accent-color: #111; }
.cd-review:has(input:disabled) { color: #9a9a9a; cursor: default; }
.mk-nav-actions { display: contents; }
.mk-nav-parts { grid-area: parts; display: flex; align-items: center; gap: 2px; min-width: 0; }
.mk-nav-strip { grid-area: strip; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 2px; overflow-x: auto; scrollbar-width: thin; }
.mk-nav-strip[hidden] { display: none; }
.mk-v2 .mk-nav[data-section="2"] { grid-template-areas: "review parts parts prev next finish"; }
.mk-v2 .mk-nav[data-section="2"] .cd-review, .mk-v2 .mk-nav[data-section="3"] .cd-review { visibility: hidden; }
.mk-v2 .mk-nav[data-section="3"] { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "review parts finish"; }
.mk-nav-label { display: inline-flex; align-items: baseline; gap: 6px; min-height: 38px; padding: 6px 10px; background: #fff; color: #111; border: 0;
  border-bottom: 3px solid transparent; border-radius: 0 !important; font: 13px/1.2 Arial, Helvetica, sans-serif; white-space: nowrap; cursor: pointer; }
.mk-nav-label b { font-weight: 700; font-size: 14.5px; }
.mk-nav-label:hover { background: #f1f1f1; }
.mk-nav-label[aria-pressed="true"] { border-bottom-color: #111; }
.mk-nav:not([data-section="2"]) .mk-nav-label[aria-pressed="true"] .mk-nav-count { display: none; }
.mk-nav-label:focus-visible { outline: 3px solid #1a56db; outline-offset: 2px; }
.mk-nav-count { color: #444; font-variant-numeric: tabular-nums; }
.mk-nav-short { display: none; }
.mk-q { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; background: #fff; color: #111; border: 1px solid #9a9a9a;
  border-radius: 2px !important; font: 700 13px/1 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.mk-q[hidden] { display: none; }
.mk-q:hover { border-color: #111; }
.mk-q[data-answered="true"] { box-shadow: inset 0 -4px 0 #111; }
.mk-q[data-flagged="true"] { border: 2px solid #111; border-radius: 50% !important; }
.mk-q[aria-current="true"] { background: #111; color: #fff; border-color: #111; }
.mk-q:focus-visible { outline: 3px solid #1a56db; outline-offset: 2px; }
.mk-nav-step { display: grid; place-items: center; width: 44px; height: 40px; padding: 0; background: #111; color: #fff; border: 0; border-radius: 2px !important; cursor: pointer; }
.mk-nav-step .mk-i { width: 22px; height: 22px; stroke: #fff; }
.mk-nav-step[hidden] { display: none; }
#mk-prev { grid-area: prev; }
#mk-next { grid-area: next; }
.mk-nav-step:hover { background: #3a3a3a; }
.mk-nav-step:focus-visible { outline: 3px solid #1a56db; outline-offset: 2px; }
.mk-v2 main .btn .mk-finish-short { display: none; }
.mk-v2 main .btn.mock-finish { grid-area: finish; margin: 0; min-height: 40px; padding: 8px 16px; background: #fff; color: #111; border: 2px solid #111; border-radius: 2px !important;
  box-shadow: none; font: 700 14px Arial, Helvetica, sans-serif; white-space: nowrap; }
.mk-v2 main .btn.mock-finish:hover { background: #111; color: #fff; transform: none; }

/* ---------- Review dialog ---------- */
.mk-review { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; color: #111; background: #fff; border: 1px solid #111;
  border-radius: 4px !important; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); }
.mk-review::backdrop { background: rgba(0, 0, 0, .55); }
.mk-review-body { display: grid; gap: 12px; padding: 22px 24px 20px; font-family: Arial, Helvetica, sans-serif; }
.mk-v2 .mk-review-kicker { margin: 0; color: #444; font: 700 12px/1.3 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.mk-v2 .mk-review h2 { margin: 0; font: 700 23px/1.2 Arial, sans-serif; }
.mk-v2 .mk-review h2:focus { outline: none; }
.mk-v2 .mk-review-time { margin: 0; color: #222; font: 14.5px/1.5 Arial, sans-serif; }
.mk-review-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-review-stats li { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 12px; background: #f1f1f1; border: 1px solid #d4d4d4; font: 13.5px/1.3 Arial, sans-serif; }
.mk-review-stats b { font-size: 18px; }
.mk-review-stats .is-done { background: #111; color: #fff; border-color: #111; }
.mk-v2 .mk-review-line { margin: 0; font: 14.5px/1.5 Arial, sans-serif; }
.mk-v2 .mk-review-line[data-met="false"] { color: #a33; }
.mk-review-grid { display: grid; gap: 8px; }
.mk-review-part { display: grid; gap: 6px; }
.mk-v2 .mk-review-part-name { margin: 0; color: #444; font: 700 12px/1.2 Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.mk-review .mk-nav-qs { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; padding: 0; list-style: none; color: #222; font: 12.5px/1.3 Arial, sans-serif; }
.mk-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mk-legend li::before { content: ""; width: 16px; height: 16px; border: 1px solid #9a9a9a; background: #fff; }
.mk-legend .is-done::before { box-shadow: inset 0 -4px 0 #111; }
.mk-legend .is-flag::before { border: 2px solid #111; border-radius: 50% !important; }
.mk-review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* Help */
.cd-dialog { width: min(620px, calc(100vw - 24px)); padding: 20px 24px; color: #111; background: #fff; border: 1px solid #111; border-radius: 4px !important; font: 15px/1.55 Arial, Helvetica, sans-serif; }
.cd-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.mk-v2 .cd-dialog h2 { margin: 0 0 10px; font: 700 21px/1.2 Arial, sans-serif; }
.cd-help-list { margin: 0 0 16px; padding-left: 20px; }
.cd-help-list li { margin: 0 0 6px; }
.cd-dialog .cd-btn { display: block; margin-left: auto; }

.mk-toast { position: fixed; top: 60px; left: 50%; z-index: 210; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px);
  padding: 10px 18px; background: #111; color: #fff; border-radius: 4px !important; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .6);
  font: 700 14px/1.35 Arial, Helvetica, sans-serif; transform: translateX(-50%); }
.mk-toast:empty { display: none; }
.mk-toast .mk-i { flex: none; width: 18px; height: 18px; }

/* ---------- Highlights ---------- */
mark.mk-hl { padding: 0; background: #ffe58a; color: inherit; border-radius: 0 !important; cursor: pointer; }
mark.mk-hl:focus-visible { outline: 2px solid #111; outline-offset: 1px; }
mark.mk-hl.has-note { border-bottom: 2px dotted #7a5a00; }
mark.mk-hl.has-note::after { content: "\270E"; margin-left: 1px; color: #7a5a00; font-size: .7em; vertical-align: super; }
.mk-hl-menu { position: fixed; z-index: 205; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: min(340px, calc(100vw - 16px)); padding: 5px;
  background: #111; color: #fff; border-radius: 4px !important; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .55); font: 700 13px/1.2 Arial, sans-serif; }
.mk-hl-menu[hidden] { display: none; }
.mk-hl-menu > button, .mk-hl-note button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; background: transparent; color: #fff;
  border: 0; border-radius: 3px !important; font: inherit; cursor: pointer; }
.mk-hl-menu button[hidden] { display: none; }
.mk-hl-menu > button:hover, .mk-hl-menu > button:focus-visible { background: #3a3a3a; outline: none; }
.mk-hl-menu > button[data-hl="add"] .mk-i { color: #ffe58a; }
.mk-hl-menu .mk-i { width: 16px; height: 16px; }
.mk-hl-note { display: grid; gap: 6px; flex-basis: 100%; padding: 6px; }
.mk-hl-note[hidden] { display: none; }
.mk-hl-note label { font: 12px/1.3 Arial, sans-serif; color: #d4d4d4; }
.mk-hl-note textarea { width: 100%; min-height: 64px; padding: 8px; color: #111; background: #fff; border: 0; border-radius: 2px !important; font: 14px/1.45 Arial, sans-serif; resize: vertical; }
.mk-hl-note button { justify-self: end; background: #ffe58a; color: #111; }

/* ---------- Your results (start and results screens keep the Vidi look) ---------- */
.mk-history { margin: 4px 0 14px; padding: 18px 22px 14px; background: #fff; border-radius: 26px !important; box-shadow: 0 18px 40px -34px rgba(17, 24, 39, .5); }
.mk-history-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; margin-bottom: 10px; }
.mk-history-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; background: #111827; color: #fff; border-radius: 13px !important; }
.mk-v2 .mk-history h2 { margin: 0; font-size: 21px; }
.mk-v2 .mk-history-head .mock-small { margin: 0; }
.mk-history-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mk-history-list > * { min-width: 0; }
.mk-v2 .mk-history-empty { margin: 0; padding: 12px 14px; background: #f3f4f6; color: #374151; border-radius: 14px !important; font: 500 14px/1.5 var(--ir-font); }
.mk-history-paper { padding: 12px 14px; background: #f8fafc; border-radius: 16px !important; }
.mk-history-paper[data-current="true"] { box-shadow: inset 0 0 0 2px #111827; }
.mk-v2 .mk-history-paper h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: 16px; }
.mk-history-count { color: #6b7280; font: 600 12.5px/1.3 var(--ir-font); }
.mk-history-scroll { overflow-x: auto; }
.mk-history-table { width: 100%; border-collapse: collapse; font: 500 14px/1.4 var(--ir-font, sans-serif); font-variant-numeric: tabular-nums; }
.mk-history-table th { padding: 6px 8px; color: #475569; font: 700 12px/1.3 var(--ir-font); text-align: left; border-bottom: 1px solid #e2e8f0; }
.mk-history-table td { padding: 8px; border-bottom: 1px solid #eef2f6; white-space: nowrap; }
.mk-history-table tr:last-child td { border-bottom: 0; }
.mk-history-table tr[data-latest="true"] td { background: #fffbeb; }
.mk-history-table td b { color: #0f172a; font-size: 16px; }
.mk-history-of { margin-right: 6px; color: #6b7280; font-size: 12.5px; }
.mk-delta { display: inline-block; min-width: 30px; padding: 1px 7px; border-radius: 999px !important; font: 800 12px/1.5 var(--ir-font, sans-serif); text-align: center; }
.mk-delta[data-trend="up"] { background: #dcfce7; color: #166534; }
.mk-delta[data-trend="down"] { background: #fee2e2; color: #991b1b; }
.mk-delta[data-trend="same"] { background: #e5e7eb; color: #374151; }
.mk-delta[data-trend="first"] { background: transparent; color: #6b7280; font-weight: 600; }
.mk-history-band { display: inline-block; margin-right: 6px; padding: 1px 7px; background: #fff0e4; color: #9a3412; border-radius: 999px !important; font: 700 12px/1.5 var(--ir-font, sans-serif); }
.mk-history-none { color: #9ca3af; }
.mk-v2 .mk-history-guest { margin: 0; }
#mock-intro .mk-history { animation: mk-rise .5s var(--ease, ease) .2s backwards; }

/* ---------- Narrower screens: a two-row bottom bar (Review, parts and Submit on top, numbers and arrows below) ---------- */
@media (max-width: 1100px) {
  .mk-v2 .mk-nav { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "review parts finish" "prev strip next"; gap: 6px; padding: 6px 8px; }
  .mk-v2 .mk-nav[data-section="2"] { grid-template-areas: "review parts finish" "prev . next"; }
  .mk-nav-parts { overflow-x: auto; scrollbar-width: none; }
}

/* ---------- Phones: Passage / Questions tabs ---------- */
@media (max-width: 760px) {
  body.mk-v2[data-mock-status="running"] .cd-top { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; min-height: 46px; padding: 5px 10px; }
  .cd-no { display: none; }
  .cd-name { font-size: 13.5px; }
  .mk-v2 .cd-timer #mock-clock { font-size: 15px; }
  .mk-v2 .cd-timer > .mk-i { display: none; }
  .cd-btn { min-height: 32px; padding: 4px 9px; font-size: 12.5px; }
  body.mk-v2[data-mock-status="running"] .cd-partbox { margin: 8px 10px; padding: 7px 12px; font-size: 14px; }
  body.mk-v2[data-mock-status="running"] #mock-current .study-split.has-divider { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .mk-divider { display: none; }
  body.mk-v2[data-mock-status="running"] #mock-current .study-split > .study-pane { padding: 10px 14px 24px; }
  body.mk-v2[data-mock-status="running"] #mock-current .study-split-switch { display: flex; gap: 0; margin: 0; padding: 0; border-bottom: 1px solid #cfcfcf; background: #fff; }
  body.mk-v2[data-mock-status="running"] #mock-current .study-split-switch button { flex: 1; min-height: 40px; margin: 0; background: #fff; color: #111; border: 0;
    border-bottom: 3px solid transparent; border-radius: 0 !important; box-shadow: none; font: 700 14px Arial, sans-serif; }
  body.mk-v2[data-mock-status="running"] #mock-current .study-split-switch button[aria-pressed="true"] { border-bottom-color: #111; }
  body.mk-v2[data-mock-status="running"] .mock-section[data-section="0"] .mk-listening-questions { padding: 4px 12px 20px; }
  body.mk-v2[data-mock-status="running"] .mock-section[data-section="0"] .cd-partbox { margin-left: 10px; margin-right: 10px; }
  .mk-opts { margin-left: 4px; }
  .mk-v2 main .btn .mk-finish-long { display: none; }
  .mk-v2 main .btn .mk-finish-short { display: inline; }
  body[data-mock-status="running"] .cd-review { padding: 4px 6px; border-right: 0; }
  .mk-nav-label { gap: 4px; min-height: 36px; padding: 4px 8px; }
  .mk-nav-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mk-nav-short { display: inline; }
  .mk-nav .mk-nav-label .mk-nav-count { display: none; }   /* P1 P2 P3 P4 fit on a phone; counts are in the review dialog */
  .mk-v2 main .btn.mock-finish { min-height: 36px; padding: 6px 12px; font-size: 13px; }
  .mk-nav-step { width: 40px; }
  body.mk-v2 .mock-question .mk-q-line { font-size: 15.5px; }
  .mk-review-body { padding: 18px 16px 16px; }
  .mk-history { padding: 14px 14px 10px; border-radius: 22px !important; }
  .mk-history-paper { padding: 10px; }
  .mk-history-table td, .mk-history-table th { padding: 6px 4px; vertical-align: top; }
  .mk-history-table td { white-space: normal; }
  .mk-history-table { font-size: 13px; }
  .mk-history-table .mk-delta { display: table; margin-top: 3px; }
  .mk-history-band { display: block; margin: 0 0 3px; }
}
@media print {
  .mk-nav, .mk-hl-menu, .mk-toast, .mk-divider, .cd-top { display: none !important; }
}

/* ---------- Speaking: the video call with Alice ---------- */
body.mk-v2 .mk-call{max-width:820px;margin:12px auto 10px;border-radius:14px!important;overflow:hidden;background:#0d0f14;border:1px solid #2a2f3a}
.mk-call-video{position:relative;aspect-ratio:1280/731;background:#0d0f14 url(/static/study-hub/examiner/alice.webp?v=1) center/cover}
.mk-call-still,.mk-call-cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-call-cam{opacity:0;transition:opacity .25s}.mk-call-cam.on{opacity:1}
.mk-call[data-examiner-motion="still"] .mk-call-cam{display:none}
.mk-call-name{position:absolute;left:12px;top:12px;margin:0;display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 13px Arial,sans-serif}
.mk-call-dot{width:9px;height:9px;border-radius:50%;background:#3ccf6e;box-shadow:0 0 0 3px rgba(60,207,110,.25)}
.mk-call[data-examiner-state="talking"] .mk-call-dot{animation:mk-call-pulse .8s ease-in-out infinite}
@keyframes mk-call-pulse{50%{box-shadow:0 0 0 7px rgba(60,207,110,.15)}}
.mk-call-caption{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(92%,700px);margin:0;padding:8px 14px;border-radius:8px;
  background:rgba(0,0,0,.72);color:#fff;font:500 17px/1.45 Arial,sans-serif;text-align:center}
.mk-call-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:#161a22}
.mk-call-status{flex:1 1 200px;margin:0;color:#e8ebf2;font:600 14px Arial,sans-serif}
body.mk-v2 .mk-call-bar .btn{min-height:36px;border-radius:6px!important}
body.mk-v2 .mk-call-bar .btn-primary{background:#fff;color:#111;border-color:#fff}
.mk-call-bar .mock-phase-clock{order:-1;margin:0!important}
body.mk-v2 .mk-call .mock-recorder{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;padding:4px 12px 12px;background:#161a22;border:0;border-radius:0!important;box-shadow:none}
body.mk-v2 .mk-call .mock-recorder #mock-record-status{flex:1 1 260px;margin:0;color:#aeb4c0;font:12.5px/1.45 Arial,sans-serif}
/* Alice asks the Part 1, follow-up and Part 3 questions out loud; only the Part 2 task card stays on screen. */
.mock-section[data-section="3"][data-alice-phase="0"] .study-split,.mock-section[data-section="3"][data-alice-phase="3"] .study-split,.mock-section[data-section="3"][data-alice-phase="4"] .study-split{display:none}
@media (max-width:760px){body.mk-v2[data-mock-status="running"] .mk-phases{margin:0 0 8px;padding:2px 10px 6px}.mk-call-caption{font-size:14px;bottom:8px;padding:6px 10px}.mk-call-name{font-size:11.5px;top:8px;left:8px}body.mk-v2 .mk-call{margin:8px 10px}}
@media (prefers-reduced-motion:reduce){.mk-call-cam{display:none}}