/* Inspera-style question pane (official IELTS computer-delivered look).
   Scoped to .ins so it can be rolled out test by test. */
.ins{ --ins-ink:#000; --ins-line:#5a5a5a; --ins-focus:#2f6fdb; --ins-num:#000; }
[data-theme="dark"] .ins, .dark .ins{ --ins-ink:#e8eaed; --ins-line:#8a909b; --ins-focus:#6ea0ff; --ins-num:#e8eaed; }

.ins .q-instr .qtitle{font-size:1.09375em;font-weight:700;margin-bottom:10px;color:var(--ins-ink);}
.ins .q-instr .body{line-height:1.6;color:var(--ins-ink);}

/* ---------- Notes / summary completion ---------- */
.ins-notes{margin:6px 0 34px;color:var(--ins-ink);}
.ins-notes-title{font-size:1.125em;font-weight:700;margin:20px 0 14px;line-height:1.35;}
.ins-notes-title:first-child{margin-top:0;}
.ins-notes-sub{font-weight:700;margin:14px 0 8px;line-height:1.5;}
.ins-notes-plain{margin:12px 0 6px;line-height:1.5;}
.ins-notes ul{list-style:disc;margin:0 0 6px;padding-left:1.6em;}
.ins-notes li{line-height:1.95;margin:0 0 10px;padding:0 4px;border-radius:4px;}
.ins-notes li::marker{color:var(--ins-ink);}

.ins .ins-gap{
  display:inline-block;vertical-align:middle;box-sizing:border-box;
  width:8.8em;max-width:100%;height:1.35em;margin:0 4px;padding:0 6px;
  border:1px solid var(--ins-line);border-radius:3px;background:var(--surface);
  font:inherit;font-weight:400;color:var(--ins-ink);text-align:center;
  box-shadow:none;outline:none;
}
.ins .ins-gap::placeholder{color:var(--ins-num);font-weight:700;opacity:1;}
.ins .ins-gap:focus{border:2px solid var(--ins-focus);padding:0 5px;}
.ins .ins-gap:disabled{opacity:1;cursor:default;}
.ins li.q-block{display:list-item;padding:0 4px;border:0;}
.ins li.q-block.correct{background:var(--green-bg);}
.ins li.q-block.incorrect{background:var(--red2-bg);}
.ins li.q-block.correct .ins-gap{border-color:var(--green);}
.ins li.q-block.incorrect .ins-gap{border-color:var(--red2);}

/* ---------- TRUE / FALSE / NOT GIVEN & MCQ ---------- */
.ins .q-block.ins-q{display:block;padding:0 0 30px;border:0;border-radius:0;}
.ins .q-block.ins-q.correct,.ins .q-block.ins-q.incorrect{padding:10px 10px 22px;border-radius:6px;margin-bottom:8px;}
.ins .ins-q-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;color:var(--ins-ink);line-height:1.5;}
.ins .ins-q-num{flex-shrink:0;min-width:1.6em;height:1.6em;display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;border:2px solid transparent;border-radius:3px;box-sizing:border-box;margin-top:-0.05em;}
.ins .q-block.ins-q.is-current .ins-q-num{border-color:var(--ins-focus);}
.ins .ins-q .options{gap:18px;padding-left:.72em;}
.ins .ins-q .options label{padding:0;gap:6px;border-radius:0;color:var(--ins-ink);}
.ins .ins-q .options label:hover{background:none;}
.ins .ins-q .options input[type=radio]{width:14px;height:14px;border:1px solid var(--ins-ink);}
.ins .ins-q .options input[type=radio]:checked{border-color:var(--ins-ink);}
.ins .ins-q .options input[type=radio]:checked::after{width:7px;height:7px;background:var(--ins-ink);}
.ins .ins-q-head .qtext{margin:0;}

/* ---------- Bottom navigator: Inspera progress dash above each number ---------- */
.qnav.ins-nav{row-gap:14px;}
.qnav.ins-nav button{position:relative;margin-top:8px;overflow:visible;}
.qnav.ins-nav button::before{
  content:"";position:absolute;left:3px;right:3px;top:-9px;height:4px;border-radius:2px;
  background:#d2d2d2;transition:background .2s ease;
}
[data-theme="dark"] .qnav.ins-nav button::before{background:#3a404c;}
.qnav.ins-nav button.answered::before{background:var(--red);}
.qnav.ins-nav button.correct::before{background:var(--green);}
.qnav.ins-nav button.incorrect::before{background:var(--red2);}

/* ---------- Highlighter colours (the three-line button in the top bar) ---------- */
.ins-hl-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.ins-hl-bar{display:block;width:16px;height:3px;border-radius:2px;}
.c-yellow{background:#ffd54a;} .c-blue{background:#2f5fd0;} .c-green{background:#43a047;}
.ins-hl-btn[data-c="yellow"] .ins-hl-bar:not(.c-yellow),
.ins-hl-btn[data-c="blue"] .ins-hl-bar:not(.c-blue),
.ins-hl-btn[data-c="green"] .ins-hl-bar:not(.c-green){opacity:.45;}
.jump-menu.ins-hl-menu{width:auto;min-width:150px;grid-template-columns:1fr;gap:4px;padding:6px;}
.jump-menu.ins-hl-menu button{width:100%;height:auto;display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid transparent;background:transparent;font-weight:600;font-size:13.5px;text-align:left;}
.jump-menu.ins-hl-menu button.is-on{border-color:var(--text);background:var(--num-bg);}
.ins-hl-swatch{width:22px;height:12px;border-radius:3px;flex-shrink:0;}

mark.user-highlight[data-c="yellow"]{background:#ffe082;color:inherit;}
mark.user-highlight[data-c="blue"]{background:#2f5fd0;color:#fff;}
mark.user-highlight[data-c="green"]{background:#a5e0a0;color:#1f2328;}
:root[data-theme="dark"] mark.user-highlight[data-c="blue"]{color:#fff;}
.analysis-mode mark.user-highlight[data-c]{background:transparent;color:inherit;}
#hlBtn{display:inline-flex;align-items:center;gap:7px;}
#hlBtn .ins-hl-swatch{width:14px;height:14px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.35);}
/* Live selection (while dragging) previews the chosen highlighter colour */
html[data-hl="yellow"] .passage-pane ::selection, html[data-hl="yellow"] .question-pane ::selection{background:#ffe082;color:#1f2328;}
html[data-hl="blue"] .passage-pane ::selection, html[data-hl="blue"] .question-pane ::selection{background:#2f5fd0;color:#fff;}
html[data-hl="green"] .passage-pane ::selection, html[data-hl="green"] .question-pane ::selection{background:#a5e0a0;color:#1f2328;}

/* ---------- Top-right tool buttons: one uniform bordered square ---------- */
.topbar .right{gap:8px;}
.topbar .right .icon-btn{width:36px;height:36px;box-sizing:border-box;border:1px solid var(--border);border-radius:9px;background:var(--surface);}
.topbar .right .icon-btn:hover{border-color:var(--red);background:var(--num-bg);}
:root[data-theme="dark"] mark.user-highlight[data-c="yellow"],:root[data-theme="dark"] mark.user-highlight[data-c="green"]{color:#1f2328;}

/* ---------- Rollout to all Part 1 layouts ---------- */
/* note-style gap lines (converted from the old numbered rows) */
.ins .q-block.ins-g{display:block;padding:0 4px;margin:0 0 10px;border:0;border-radius:4px;line-height:1.95;color:var(--ins-ink);}
.ins .q-block.ins-g.correct{background:var(--green-bg);padding:0 4px;}
.ins .q-block.ins-g.incorrect{background:var(--red2-bg);padding:0 4px;}
.ins .q-block.ins-g.correct .ins-gap{border-color:var(--green);}
.ins .q-block.ins-g.incorrect .ins-gap{border-color:var(--red2);}
.ins .gap-line{line-height:1.95;color:var(--ins-ink);}
.ins .section-head{color:var(--ins-ink);font-size:1.125em;font-weight:700;margin:22px 0 12px;}
.ins .section-head:first-child{margin-top:0;}
.ins .context-line{margin:2px 0 8px;}
/* the number now lives inside each box, so separate number labels go */
.ins .inline-num,.ins .inline-qnum{display:none;}
.ins .inline-q{padding:0;gap:0;}
.ins .inline-q .ins-gap,.ins .inline-gap-wrap .ins-gap{width:8.8em;}
.ins .inline-q.correct .ins-gap,.ins .inline-gap-wrap.correct .ins-gap{border-color:var(--green);}
.ins .inline-q.incorrect .ins-gap,.ins .inline-gap-wrap.incorrect .ins-gap{border-color:var(--red2);}
/* tables & flow charts: keep the Inspera box, a touch narrower */
.ins table .ins-gap{width:7.5em;}
.ins .flow-box .ins-gap{margin:2px 4px;}
/* wide numbers such as "7–8" and tick-box questions */
.ins .ins-q-num{padding:0 3px;}
.ins .ins-q .options input[type=checkbox]{width:14px;height:14px;margin:0;accent-color:var(--ins-ink);}
/* ---------- Summary with a word list (Inspera size) ---------- */
.ins .summary-block{background:none;border:0;border-radius:0;padding:0;margin:8px 0 0;}
.ins .summary-block .summary-title{font-size:1.125em;font-weight:700;margin:22px 0 10px;line-height:1.35;color:var(--ins-ink);}
.ins .summary-block .summary-text{font-size:inherit;line-height:1.95;color:var(--ins-ink);}
.ins .wordbank-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--ins-line);border-radius:4px;background:var(--surface);}
.ins .wordbank-item{border:0;border-radius:0;padding:3px 0;background:none;font-size:inherit;line-height:1.45;gap:10px;align-items:baseline;color:var(--ins-ink);}
.ins .wordbank-item b{min-width:1em;font-weight:700;}
@media (max-width:560px){.ins .wordbank-grid{grid-template-columns:1fr;}}
.ins .select-input-inline{
  -webkit-appearance:none;appearance:none;display:inline-block;vertical-align:middle;box-sizing:border-box;
  width:8.8em;max-width:100%;height:1.35em;margin:0 4px;padding:0 6px;
  border:1px solid var(--ins-line);border-radius:3px;background:var(--surface);
  font:inherit;font-weight:700;line-height:1.2;color:var(--ins-ink);text-align:center;text-align-last:center;cursor:pointer;
}
.ins .select-input-inline.is-empty{color:var(--ins-num);}
.ins .select-input-inline:focus{outline:none;border:2px solid var(--ins-focus);padding:0 5px;background:var(--surface);}
.ins .select-input-inline:disabled{opacity:1;cursor:default;}
.ins .inline-select-wrap.correct .select-input-inline{border-color:var(--green);background:var(--green-bg);color:var(--green);}
.ins .inline-select-wrap.incorrect .select-input-inline{border-color:var(--red2);background:var(--red2-bg);color:var(--red2);}

/* ---------- Part 1 notes: one layout everywhere (reference: sleep-study-hunter-gatherers) ----------
   Every notes/table/summary heading looks like .section-head, and every note line is
   "• text [box]" on the left edge — no indented disc lists, no grey detached bullets. */
.ins .note-heading,.ins .ins-notes-title{color:var(--ins-ink);font-size:1.125em;font-weight:700;line-height:1.35;margin:22px 0 12px;}
.ins .note-heading:first-child,.ins .ins-notes-title:first-child{margin-top:0;}
.ins .q-instr + .note-heading,.ins .q-instr + .ins-notes .ins-notes-title:first-child{margin-top:22px;}
.ins .note-subheading,.ins .ins-notes-sub{color:var(--ins-ink);font-size:1em;font-weight:700;line-height:1.5;margin:16px 0 8px;}
.ins .ins-notes-plain{color:var(--ins-ink);}
.ins .ins-notes ul{list-style:none;margin:0 0 6px;padding-left:0;}
.ins .ins-notes li{line-height:1.95;margin:0 0 10px;padding:0 4px;}
.ins .ins-notes li::before{content:"\2022\00a0";}
.ins .gap-line.indent{margin-left:0;}
.ins .gap-line .dash{color:var(--ins-ink);margin-right:.25em;}
.ins .static-bullet{font-size:inherit;line-height:1.95;color:var(--ins-ink);margin:0 0 10px 0!important;padding-left:0;}
.ins .static-bullet::before{position:static;content:"\2022\00a0";color:var(--ins-ink);}
/* dropdown questions (headings / matching): plain number beside the text, like the TFNG rows */
.ins .q-block:has(> .qnum-box){display:flex;align-items:flex-start;gap:6px;padding:4px 0 6px;margin:16px 0;border:0;background:none;}
.ins .q-block:has(> .qnum-box).correct{background:var(--green-bg);border-radius:6px;padding:8px 10px;}
.ins .q-block:has(> .qnum-box).incorrect{background:var(--red2-bg);border-radius:6px;padding:8px 10px;}
.ins .q-block > .qnum-box{flex-shrink:0;min-width:24px;width:auto;height:auto;padding:0;margin:0 4px 0 0;border:0;border-radius:0;background:none;box-shadow:none;font-size:1em;font-weight:700;line-height:1.6;color:var(--ins-ink);text-align:left;display:block;}
.ins .q-block > .qnum-box + .q-content .qtext{line-height:1.6;margin:0 0 8px;color:var(--ins-ink);}