/* Shared exam chrome for every EnglishCBT practice test.
 *
 * Chrome follows the site palette (British Council purple + cyan); the reading
 * surface itself stays plain white and neutral, as the real test does. */
:root {
  color-scheme: light;
  --ink: #16161a;
  --line: #c8ccd2;
  --line-soft: #e3e6ea;
  --chrome: #f6f5f9;
  --purple: #23085a;
  --purple-900: #180540;
  --cyan: #00dcff;
  --blue: #23085a;
  --blue-dark: #180540;
  --green: #157347;
  --red: #b02a37;
  --amber: #f0ad4e;
  --qfont: 15px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Arial, Helvetica, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-bottom: 3px solid var(--cyan); background: var(--purple);
  flex: 0 0 auto; color: #fff;
}
.who { font-size: 13px; color: rgba(255,255,255,.78); display: flex; align-items: center; gap: 9px; }
.who a { color: #fff; text-decoration: none; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; }
.who a .dot { width: 9px; height: 9px; border-radius: 2px; background: var(--cyan); display: inline-block; }
.clockwrap { display: flex; align-items: center; gap: 10px; }
.clock {
  font-size: 17px; font-weight: 700; letter-spacing: .02em; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; min-width: 128px; text-align: center;
  color: var(--ink);   /* must be set: the purple top bar sets colour to white */
}
.clock.warn { border-color: var(--amber); background: #fff6e6; }
.clock.danger { border-color: var(--red); background: #fdeaec; color: var(--red); }
.clock.hidden-time { color: #9aa0a6; }
.toolbtn {
  border: 1px solid rgba(255,255,255,.35); background: transparent; border-radius: 4px;
  padding: 6px 10px; font-size: 13px; color: #fff;
}
.toolbtn:hover { border-color: var(--cyan); color: var(--cyan); }
.toolbtn.primary { background: var(--cyan); border-color: var(--cyan); color: var(--purple-900); font-weight: 700; }
.toolbtn.primary:hover { background: #5ae9ff; color: var(--purple-900); }
.modal .toolbtn { border-color: var(--line); color: var(--ink); background: #fff; }
.modal .toolbtn:hover { border-color: var(--purple); color: var(--purple); }
.modal .toolbtn.primary { background: var(--purple); border-color: var(--purple); color: #fff; }
.modal .toolbtn.primary:hover { background: #2f0d73; color: #fff; }

/* ---------- Section banner ---------- */
.banner {
  flex: 0 0 auto; padding: 9px 16px; border-bottom: 1px solid var(--line-soft);
  background: #fafbfc; font-size: 13.5px;
}
.banner b { font-size: 14.5px; }

/* ---------- Panes ---------- */
.panes { flex: 1 1 auto; display: flex; min-height: 0; }
.pane { overflow-y: auto; padding: 18px 22px 60px; }
#passagePane { flex: 1 1 50%; border-right: 1px solid var(--line); }
#questionPane { flex: 1 1 50%; }
.splitter { flex: 0 0 6px; cursor: col-resize; background: var(--line-soft); }
.splitter:hover { background: var(--purple); }

.passage { font-size: var(--qfont); line-height: 1.62; max-width: 62ch; }
.passage h2 { font-size: 17px; margin: 0 0 12px; }
.passage h2.sub { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--line); }
.passage p { margin: 0 0 13px; }
.passage mark { background: #ffe680; padding: 1px 0; }
.passage mark.noted { background: #ffe680; border-bottom: 2px dotted #a8730a; cursor: help; }

/* ---------- Question groups ---------- */
.qgroup { margin-bottom: 30px; }
.qgroup h3 { font-size: 15px; margin-bottom: 6px; }
.qgroup .instr {
  font-size: 13.5px; line-height: 1.55; background: #f6f8fa; border-left: 3px solid var(--purple);
  padding: 9px 12px; margin-bottom: 16px;
}
.q { display: flex; gap: 10px; padding: 9px 8px; border-radius: 4px; font-size: var(--qfont); line-height: 1.55; }
.q:target, .q.active { background: #f2eefa; }
.qnum {
  flex: 0 0 26px; height: 26px; border: 1px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700;
}
.qbody { flex: 1 1 auto; }
.qbody .qtext { display: block; }

/* multiple choice: radio / letter / text columns, so wrapped lines align */
.qbody .mcqopts { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.qbody .mcqopts label {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  padding: 6px 8px; border-radius: 4px; cursor: pointer;
}
.qbody .mcqopts label:hover { background: #f2eefa; }
.qbody .mcqopts label .opt { display: grid; grid-template-columns: 20px 1fr; gap: 2px; }
.flagwrap { font-size: 12px; color: #666; display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; cursor: pointer; }

/* Block-level, not inline-flex: the row must claim the whole line, or the flag
   label flows up alongside the dropdown whenever the prompt is short. */
.inline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* gap-fill: answer box stays in the run of text so the sentence still reads */
.qbody .gapline { line-height: 2.3; }
.qbody .gapline input[type="text"] { display: inline-block; vertical-align: baseline; margin: 0 4px; width: 170px; }

select.ans, input[type="text"].ans {
  font-family: inherit; font-size: 14px; padding: 5px 7px;
  border: 1px solid #767676; border-radius: 3px; background: #fff;
}
input[type="text"].ans { width: 190px; }
.qbody input[type="radio"], .qbody input[type="checkbox"] { width: auto; margin: 3px 0 0; padding: 0; border: 0; flex: 0 0 auto; }
select.ans:focus, input[type="text"].ans:focus { outline: 2px solid var(--purple); outline-offset: 0; }

/* ---------- Option boxes (headings list, sentence endings, features) ---------- */
.optbox { border: 1px solid var(--ink); border-radius: 4px; padding: 14px 16px; margin-bottom: 18px; background: #fbfbfd; }
.optbox h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #444; margin-bottom: 10px; }
.optbox dl { display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; font-size: 14px; line-height: 1.5; }
.optbox dt { font-weight: 700; text-align: right; }
.optbox dd { color: var(--ink); }

/* ---------- Notes / summary blocks ---------- */
.notes { background: #fbfbfc; border: 1px solid var(--line-soft); padding: 12px 14px; margin-bottom: 14px; }
.notes h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #555; margin-bottom: 8px; }
.notes .q { padding: 6px 0; }

/* ---------- Summary completion from a word bank ---------- */
.summarybox { border: 1px solid var(--line); border-radius: 5px; padding: 14px 16px; margin-bottom: 10px; background: #fbfbfd; }
.summarybox h4 { font-size: 15px; text-align: center; margin-bottom: 12px; }
.summarybox p { font-size: var(--qfont); line-height: 2.5; text-align: justify; }
.summarybox select.ans { margin: 0 3px; }
/* the word list itself: two columns of lettered words, as on the paper test */
.optbox.words dl { grid-template-columns: repeat(2, 34px 1fr); }

/* ---------- Table completion ---------- */
table.qtable { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 10px; }
table.qtable th, table.qtable td { border: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: middle; }
table.qtable th { background: var(--chrome); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
table.qtable input[type="text"].ans { width: 130px; }
.qnum-inline {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 1px solid var(--ink); border-radius: 50%; font-size: 11.5px; font-weight: 700; margin-right: 6px;
}

/* ---------- Flow chart ---------- */
.flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 10px; }
.flow .step {
  border: 1px solid var(--ink); border-radius: 5px; padding: 12px 14px; font-size: 14px; line-height: 1.6;
  background: #fff;
}
.flow .arrow { align-self: center; color: var(--purple); font-size: 18px; line-height: 1; padding: 6px 0; }
.flow input[type="text"].ans { width: 150px; }

/* ---------- Diagram labelling ----------
   Padding is 0 on purpose: the answer boxes are positioned in percentages, and
   with no padding those percentages map straight onto the SVG viewBox, so a box
   lands exactly where its leader line ends. */
.diagram { position: relative; border: 1px solid var(--line); border-radius: 5px; padding: 0; background: #fff; margin-bottom: 12px; overflow: hidden; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram .pin { position: absolute; display: flex; align-items: center; gap: 5px; }
.diagram .pin input[type="text"].ans { width: 118px; font-size: 13px; padding: 4px 6px; }

/* flags for questions that live inside a table/flow/diagram */
.flagrow { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: #666; margin-bottom: 8px; }
.flagrow label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* ---------- Drag and drop ----------
   A pool of lettered chips is dragged (or, on touch, tapped) into an answer box
   next to each question. The chip and the box share the same purple lettered token
   so it is obvious what has been placed where. */
.dragdrop .pool { border: 1px solid var(--ink); border-radius: 4px; padding: 12px 14px; margin-bottom: 16px; background: #fbfbfd; position: sticky; top: 0; z-index: 2; }
.pool h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: #444; margin-bottom: 10px; }
.pool .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid #767676; border-radius: 5px;
  padding: 6px 11px 6px 7px; background: #fff; font-size: 14px; cursor: grab; user-select: none;
}
.chip:hover { border-color: var(--purple); }
.chip.armed { outline: 2px solid var(--purple); background: #f2eefa; }
.chip.used { opacity: .38; cursor: default; pointer-events: none; }
.chip:active { cursor: grabbing; }
.chip b, .slot b {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  flex: 0 0 20px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 11px; font-weight: 700;
}
.dzrow { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 4px; font-size: var(--qfont); line-height: 1.5; flex-wrap: wrap; }
.dzrow:target, .dzrow.active, .dzrow.looking { background: #f2eefa; }
.dzrow .qnum-inline { flex: 0 0 auto; }
.dzprompt { flex: 1 1 auto; min-width: 40%; }
.slot {
  flex: 0 0 auto; min-width: 168px; min-height: 34px; border: 1px dashed #9aa0a8; border-radius: 5px;
  padding: 5px 9px; background: #fff; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer;
}
.slot:empty::before { content: "drop here"; color: #b0b4bb; font-size: 12.5px; }
.slot.drop-hover { border-color: var(--purple); border-style: solid; background: #f2eefa; }
.slot.filled { border-style: solid; border-color: #767676; }
.slot:focus { outline: 2px solid var(--purple); outline-offset: 1px; }
.dzrow .flagwrap, .dzrow .fb { flex-basis: 100%; margin-top: 4px; }
body.reviewing .slot { cursor: default; }

/* ---------- Matching headings by drag (chips in the question pane, boxes on the passage) ---------- */
.hpool { border: 1px solid var(--ink); border-radius: 4px; padding: 12px 14px; margin-bottom: 14px; background: #fbfbfd; }
.hpool h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: #444; margin-bottom: 10px; }
.hpool .chips { display: flex; flex-direction: column; gap: 7px; align-items: stretch; }
.hpool .chip { justify-content: flex-start; }
.hpool .chip .htext { text-align: left; }

/* the drop box that sits just above a paragraph in the reading passage */
.para-slot {
  display: flex; align-items: center; gap: 8px; min-height: 34px; margin: 2px 0 7px;
  padding: 6px 10px; border: 1px dashed #b08948; border-radius: 5px; background: #fff8e1;
  font-size: 13.5px; cursor: pointer;
}
.para-slot:empty::before { content: "▼ drop a heading here"; color: #b0894b; font-size: 12.5px; }
.para-slot.filled { border-style: solid; border-color: #767676; background: #f2eefa; }
.para-slot.drop-hover { border-color: var(--purple); border-style: solid; background: #efe7fb; }
.para-slot:focus { outline: 2px solid var(--purple); outline-offset: 1px; }
.para-slot.looking { box-shadow: 0 0 0 2px var(--cyan); }
.para-slot b {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  flex: 0 0 20px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 11px; font-weight: 700;
}
body.reviewing .para-slot { cursor: default; background: #f4f4f7; border-style: solid; }

/* ---------- Review mode (after marking) ---------- */
.clock.review { background: var(--purple-900); color: var(--cyan); border-color: var(--cyan); font-size: 13px; letter-spacing: .1em; }
body.reviewing .q { align-items: flex-start; }
body.reviewing .ans:disabled { background: #f4f4f7; color: var(--ink); opacity: 1; cursor: default; }

.fb { margin-top: 9px; border-left: 3px solid var(--green); background: #f2f9f5; padding: 8px 11px; border-radius: 0 4px 4px 0; font-size: 13px; }
.fb.no { border-left-color: var(--red); background: #fdf3f4; }
.fb-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb .yours { font-family: "SF Mono", Menlo, Consolas, monospace; }
.fb .why { color: #4a4a55; font-size: 12.5px; line-height: 1.5; margin-top: 5px; }
.evbtn {
  margin-left: auto; border: 1px solid var(--purple); background: #fff; color: var(--purple);
  border-radius: 4px; padding: 4px 10px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.evbtn:hover { background: var(--purple); color: #fff; }

/* feedback for questions that live inside a table/flow/diagram */
.fbstack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.fbrow { display: flex; gap: 8px; align-items: flex-start; }
.fbrow .fb { margin-top: 0; flex: 1 1 auto; }
.q.looking { background: #f2eefa; box-shadow: inset 3px 0 0 var(--purple); }

/* the highlighted sentence in the passage */
.passage mark.evidence {
  background: #d7f7ff; box-shadow: 0 0 0 2px #d7f7ff, 0 0 0 3px var(--cyan);
  border-radius: 2px; padding: 1px 0;
}
.noevidence {
  border: 1px dashed var(--red); background: #fdf3f4; color: #7a1f28;
  padding: 12px 14px; border-radius: 5px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.55;
}

/* ---------- Bottom bar ---------- */
.bottombar {
  flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--chrome);
  padding: 7px 10px; display: flex; align-items: center; gap: 10px; overflow-x: auto;
}
.partgroup { display: flex; align-items: center; gap: 5px; }
.parttab {
  border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 5px 8px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.parttab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.palette { display: flex; gap: 2px; }
.pbtn {
  position: relative; width: 25px; height: 26px; border: 1px solid #9aa0a6; background: #fff;
  border-radius: 3px; font-size: 11.5px; color: #333; flex: 0 0 auto;
}
.pbtn:hover { border-color: var(--purple); }
.pbtn.answered { background: var(--ink); color: #fff; border-color: var(--ink); }
.pbtn.right { background: var(--green); color: #fff; border-color: var(--green); }
.pbtn.wrong { background: var(--red); color: #fff; border-color: var(--red); }
.pbtn.current { outline: 2px solid var(--purple); outline-offset: 1px; }
.pbtn.flagged::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px;
  background: var(--red); border-radius: 50%;
}

/* ---------- Right-click menu ---------- */
.ctxmenu {
  position: fixed; z-index: 60; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.18); border-radius: 5px; padding: 4px; display: none; min-width: 150px;
}
.ctxmenu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 12px; font-size: 13px; border-radius: 4px; }
.ctxmenu button:hover { background: #f2eefa; }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; background: rgba(24,5,64,.6); z-index: 70; display: none; align-items: center; justify-content: center; padding: 20px; }
.overlay.on { display: flex; }
.modal { background: #fff; border-radius: 8px; max-width: 900px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 26px 28px; }
.modal h2 { font-size: 20px; margin-bottom: 6px; }
.modal p.lede { color: #555; font-size: 14px; margin-bottom: 16px; line-height: 1.55; }
.modal .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.revgrid { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 16px; }
.revsec { font-size: 12.5px; font-weight: 700; color: #555; margin-bottom: 4px; }
.legend { font-size: 12.5px; color: #666; display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 13px; height: 13px; border: 1px solid #9aa0a6; border-radius: 2px; display: inline-block; }
.swatch.filled { background: var(--ink); border-color: var(--ink); }
.swatch.flag { background: var(--red); border-radius: 50%; border-color: var(--red); }

/* ---------- Results ---------- */
.scorehead { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; padding: 16px 0 20px; border-bottom: 1px solid var(--line-soft); }
.scorebig { font-size: 40px; font-weight: 800; letter-spacing: -.02em; color: var(--purple); }
.scorebig small { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #666; }
.bandnote { font-size: 13px; color: #666; max-width: 420px; line-height: 1.5; }
.blockhead { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: #555; margin: 22px 0 10px; }
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 700px) { .panels { grid-template-columns: 1fr; } }
.panel .blockhead { margin-top: 18px; }

/* pacing: where the hour went */
.pacerow, .taskrow { display: grid; grid-template-columns: 1fr 90px 54px; gap: 10px; align-items: center; margin-bottom: 7px; font-size: 13px; }
.taskrow { grid-template-columns: 1fr 70px 40px; }
.pacelabel, .taskname { color: var(--ink); }
.pacebar, .taskbar { background: #eceaf2; border-radius: 3px; height: 8px; overflow: hidden; }
.pacebar i { display: block; height: 100%; background: var(--purple); }
.taskbar i { display: block; height: 100%; background: var(--green); }
.taskbar.mid i { background: var(--amber); }
.taskbar.no i { background: var(--red); }
.pacetime, .taskscore { text-align: right; color: #555; font-variant-numeric: tabular-nums; }
.pacenote { font-size: 12.5px; color: #4a4a55; line-height: 1.5; margin-top: 10px; background: #f6f5f9; border-left: 3px solid var(--purple); padding: 8px 10px; }

table.history { border-collapse: collapse; font-size: 13px; }
table.history th, table.history td { text-align: left; padding: 6px 22px 6px 0; border-bottom: 1px solid var(--line-soft); }
table.history th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: #777; }

.tasktag { color: #6b6b76; font-size: 12px; }
.spellnote {
  background: #fff6e6; border-left: 3px solid var(--amber); padding: 6px 9px; border-radius: 0 3px 3px 0;
  font-size: 12.5px; color: #6b4a05; line-height: 1.5; margin-bottom: 4px;
}

/* live word-limit warning while typing */
input[type="text"].ans.overlimit { border-color: var(--red); background: #fdf3f4; }
.limitnote { display: block; font-size: 12px; color: var(--red); margin-top: 4px; }

table.results { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; }
table.results th, table.results td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.results th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #666; }
tr.wrong { background: #fdf3f4; }
.mark { font-weight: 800; }
.mark.ok { color: var(--green); }
.mark.no { color: var(--red); }
.yours { font-family: "SF Mono", Menlo, Consolas, monospace; }
.yours.blank { color: #999; font-style: italic; font-family: inherit; }
.why { color: #555; font-size: 12.5px; margin-top: 3px; line-height: 1.5; }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; }

/* ---------- Mobile: one pane at a time ---------- */
.mobtabs { display: none; }
@media (max-width: 820px) {
  .splitter { display: none; }
  .panes { flex-direction: column; }
  #passagePane, #questionPane { flex: 1 1 auto; border-right: 0; }
  body.show-q #passagePane { display: none; }
  body.show-p #questionPane { display: none; }
  .mobtabs { display: flex; gap: 6px; }
  .who span:last-child { display: none; }
  .pane { padding: 14px 15px 40px; }
  /* the answer boxes are pinned over the diagram in percentages; on a narrow screen a
     desktop-width box runs off the right edge, so shrink the box, not the diagram */
  .diagram .pin input[type="text"].ans { width: 72px; font-size: 12px; padding: 3px 5px; }
  .diagram .pin .qnum-inline { width: 18px; height: 18px; font-size: 10px; margin-right: 3px; }
  .qtable { min-width: 460px; }         /* let it scroll rather than crush the columns */
  input[type="text"].ans { width: 150px; }
  .summarybox p { line-height: 2.6; text-align: left; }
  .evbtn { margin-left: 0; }
  .fb-line { gap: 6px; }
  /* on a phone, native drag does not fire, so the pool stays put and answers are
     tapped in, so let the box take the full width and read clearly */
  .dzprompt { min-width: 100%; }
  .slot { width: 100%; flex-basis: 100%; }
  .dragdrop .pool { position: static; }
}