/* Economics Questions Bank.
   Layout, panel sizing, contained scrolling, scroll cues and control-panel styling are adapted from
   past-papers.css, which in turn took them from the Learning area's learning-index.css. The two pages
   sit beside each other on the homepage and are built on the same archive, so they should feel like one
   product: controls on the left, display on the right, each panel scrolling inside a workspace that
   fits the viewport rather than growing the page. Colours come from the shared tokens in home.css;
   nothing here invents a brand colour. */

.qbank-main { background: var(--bg); }
.qbank-page.wrap { width: min(1380px, calc(100% - 48px)); max-width: none; padding: clamp(22px, 3vw, 34px) 0 18px; }
/* The strip drops under the title rather than pushing the page wider when there is no room beside it. */
.qbank-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px clamp(16px, 3vw, 40px); margin: 0 0 16px; }
.qbank-head h1 { min-width: 0; margin: 0; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em; }
.qbank-head-side { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 0 auto; }

/* The workspace is sized to what is left of the viewport, so the page itself never scrolls. */
.qbank-workspace {
  position: relative; display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: 24px; align-items: stretch; min-height: 0;
  height: max(260px, calc(100dvh - var(--qbank-workspace-top, 320px) - 18px));
}
.qbank-controls, .qbank-results {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow); min-width: 0; min-height: 0;
}
.qbank-controls { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.qbank-controls > h2 { margin: 0; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.qbank-filter-body { grid-column: 1; grid-row: 2; display: grid; grid-auto-rows: max-content; align-content: start; gap: 10px; min-height: 0; padding: 14px 12px; }

/* Shared scrolling behaviour and scrollbars, matching Past Papers exactly. */
.qbank-filter-body, .qbank-results { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #8ab8a7 #edf5f1; }
.qbank-filter-body::-webkit-scrollbar, .qbank-results::-webkit-scrollbar { width: 11px; }
.qbank-filter-body::-webkit-scrollbar-track, .qbank-results::-webkit-scrollbar-track { background: #edf5f1; border-radius: 999px; }
.qbank-filter-body::-webkit-scrollbar-thumb, .qbank-results::-webkit-scrollbar-thumb { min-height: 48px; border: 3px solid #edf5f1; border-radius: 999px; background: #72aa95; }
.qbank-filter-body::-webkit-scrollbar-thumb:hover, .qbank-results::-webkit-scrollbar-thumb:hover { background: var(--green-deep); }
.qbank-filter-body:focus-visible, .qbank-results:focus-visible { outline: 2px solid var(--green-deep); outline-offset: -2px; }

.qbank-scroll-cue { align-self: end; justify-self: stretch; z-index: 4; display: flex; justify-content: center; margin: 0 12px 2px; padding: 34px 0 12px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--surface) 58%); }
.qbank-scroll-cue[hidden] { display: none; }
.qbank-scroll-cue span { padding: 6px 11px; color: var(--green-deep); font-size: .76rem; font-weight: 750; }
.controls-scroll-cue { grid-column: 1; grid-row: 2; }
.results-scroll-cue { grid-column: 2; grid-row: 1; }

/* ---- control panel ----
   The compact panel is a tight stack of rows rather than a column of bordered cards: six scope filters
   in the space four cards used to take. The detail filters are in the same container but collapsed,
   and reappear when the container moves into the full filter view. */
.qbank-filter-fields { display: grid; gap: 0; }
.qbank-row { padding: 9px 2px; }
.qbank-row:first-child { padding-top: 2px; }
/* The divider sits between rows rather than under each one, so the generator-only row disappearing in
   paper mode leaves no stray line hanging at the bottom of the panel. */
.qbank-row + .qbank-row { border-top: 1px solid var(--line); }
.qbank-row > label { display: block; }
/* What the archive is, where its one-value filters used to be. */
.qbank-fixed-scope { margin: 0 2px 4px; padding: 7px 10px; border-radius: 6px; background: #f2f5f4; color: var(--muted); font-size: 0.74rem; font-weight: 700; line-height: 1.4; }
.qbank-fixed-scope[hidden] { display: none; }
.qbank-picker[hidden] { display: none; }
.qbank-row-note { color: #8a9a94; font-size: 0.66rem; font-weight: 650; letter-spacing: 0.02em; text-transform: none; }
.qbank-row-label { display: block; margin: 0 0 4px; color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.045em; text-transform: uppercase; }
.qbank-row select {
  width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 650;
}
.qbank-row select:hover:not(:disabled) { border-color: #bfd2cb; }
.qbank-row select:disabled { background: #f4f6f5; color: var(--muted); cursor: default; }
.qbank-row select:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 10px 2px 0; padding: 7px 9px; border-radius: 6px; background: var(--green-soft); color: var(--green-deep); font-size: 0.76rem; font-weight: 650; line-height: 1.4; }
.qbank-applied[hidden] { display: none; }
.qbank-applied-label { margin-right: 2px; }
.qbank-applied-remove { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 6px; border: 0; border-radius: 5px; background: rgba(255, 255, 255, 0.66); color: inherit; font: inherit; line-height: 1.35; text-align: left; cursor: pointer; }
.qbank-applied-remove:hover { background: #fff; }
.qbank-applied-remove:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 1px; }
.qbank-applied-value { min-width: 0; overflow-wrap: anywhere; }
.qbank-applied-x { flex: none; font-size: 1rem; font-weight: 800; line-height: 1; }
/* A row of the control panel rather than part of what scrolls inside it: More filters is always one
   click away, and never underneath the cue that says the list has more in it. */
.qbank-filter-actions { grid-column: 1; grid-row: 3; display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.qbank-more-filters { flex: 1 1 auto; min-height: 38px; padding: 8px 12px; border: 1px solid var(--green-deep); border-radius: 6px; background: var(--green-soft); color: var(--green-deep); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; }
.qbank-more-filters:hover { background: var(--green-deep); color: #fff; }
.qbank-more-filters:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

.qbank-group { margin: 0; padding: 10px 11px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfb; }
.qbank-group-label { display: block; margin: 0 0 7px; padding: 0; color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.045em; text-transform: uppercase; }
/* The chip groups use role="group" with aria-labelledby rather than fieldset/legend. A <legend> is cut
   into its fieldset's border, which set those two labels on the border line while every other group
   label sat inside its card, and floating it out of the cut-out broke the chip wrapping. The role keeps
   the grouping announced to screen readers without the rendering quirk. */
.qbank-group select {
  width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--text); font: inherit; font-size: 0.84rem; font-weight: 650;
}
.qbank-group select:hover { border-color: #bfd2cb; }

.qbank-chips { display: flex; flex-wrap: wrap; gap: 5px; }
/* Four tariffs are too cramped in the compact panel. Two balanced rows keep the counts readable. */
#filter-marks-short { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
/* The row's own label says these are marks, leaving each box to carry its tick, value and count. */
#filter-marks-short .qbank-chip {
  justify-content: center; white-space: nowrap; padding: 6px 5px; font-size: 0.78rem;
}
#filter-marks-short .qbank-chip::before { width: 13px; height: 13px; margin-right: 5px; background-size: 9px 9px; }
#filter-marks-short .qbank-chip-count { margin-left: 4px; font-size: 0.68rem; }
/* A chip is a checkbox rendered as a toggle: the input keeps its place in the accessibility tree and
   keyboard focus, only its appearance changes. Selected state matches a chosen hierarchy choice. */
.qbank-chip { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 0.8rem; font-weight: 650; cursor: pointer; }
.qbank-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.qbank-chip:hover { background: var(--green-soft); color: var(--green-deep); }
/* Tint alone read as "this is what colour these are". A chip that is on now carries a tick, so on and
   off are told apart by a mark rather than by a shade. */
.qbank-chip::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-right: 7px;
  border: 1.5px solid #c3cfca; border-radius: 4px; background: #fff;
  background-position: center; background-repeat: no-repeat; background-size: 10px 10px;
}
.qbank-chip:has(input:checked) { border-color: var(--green-deep); background: var(--green-soft); color: var(--green-deep); }
.qbank-chip:has(input:checked)::before {
  border-color: var(--green-deep); background-color: var(--green-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.4 2.4 4.6-5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.qbank-chip:has(input:focus-visible), .qbank-group select:focus-visible, .qbank-reset:focus-visible,
.qbank-action:focus-visible, .qbank-download:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* ---- a filter that takes several values ----
   A button showing what is chosen, and a list of tick boxes under it. The list opens in the flow rather
   than floating over the panel: the panel scrolls, and a floating menu would be cut off by it. */
.qbank-picker-button {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text);
  font: inherit; font-size: 0.82rem; font-weight: 650; text-align: left; cursor: pointer;
}
.qbank-picker-button:hover:not(:disabled) { border-color: #bfd2cb; }
.qbank-picker-button:disabled { background: #f4f6f5; color: var(--muted); cursor: default; }
.qbank-picker-button:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-picker-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbank-picker.is-chosen .qbank-picker-button { border-color: var(--green-deep); background: var(--green-soft); color: var(--green-deep); }
/* The caret is drawn rather than typed, so it matches the arrow on the one remaining menu beside it. */
.qbank-picker-caret { flex: 0 0 auto; width: 9px; height: 9px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
.qbank-picker.is-open .qbank-picker-caret { transform: translateY(2px) rotate(225deg); }
.qbank-picker-menu {
  max-height: 232px; margin: 7px 0 1px; padding: 5px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #8ab8a7 #edf5f1;
}
.qbank-picker-menu[hidden] { display: none; }
/* While a list is open it owns the control panel: 322 specification points in a 230px window is not a
   list anyone can use. Everything else stands aside and comes back when the list closes. */
.qbank-controls[data-picking] .qbank-filter-body { display: flex; flex-direction: column; padding-bottom: 4px; }
/* The rows live in their own container, so that is what has to give the open list its height. */
.qbank-controls[data-picking] .qbank-filter-fields { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.qbank-controls[data-picking] .qbank-fixed-scope,
.qbank-controls[data-picking] .qbank-applied,
.qbank-controls[data-picking] .qbank-row:not(.is-open) { display: none; }
.qbank-controls[data-picking] .qbank-row.is-open { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.qbank-controls[data-picking] .qbank-picker-menu { max-height: none; flex: 1 1 auto; min-height: 0; margin-bottom: 0; }

/* Two entries in one list can be the same thing: the 2017 Linear and 2023 Modular specifications are one
   course, and the eight International GCSE paper codes are two units. The list says so while the choice
   is being made. It is scoped to its own list and never means anything across lists, and an entry with
   nothing to pair with is left plain — which is why the IAL specification and its four units carry no
   colour.

   The group is not written on the row. The note above the list already says what the colour means, and a
   name like "Microeconomics and Business Economics" cannot share a 230px row with the paper it belongs
   to: it took the width and broke the paper's own label into a column one character wide. So the marker
   is the bar, and the group's identity is carried by the bar's STYLE as well as its hue — solid, double,
   dashed — so the groups stay apart for anyone who cannot use colour, in print, and in forced colours.
   The name itself is still in the row for a screen reader to read. */
/* The note explains the colours, so it must not wear one of them. Tinted like the rows it describes it
   read as another entry in the list — the thing a legend must never look like. It takes the site's
   informational navy instead (app.css --navy, the colour of .tip), which no group uses and which this
   page does not otherwise draw, so it reads as a caption above the list rather than an item inside it.
   The value is repeated here because the question bank page does not load app.css. */
.qbank-pair-note { display: flex; align-items: center; gap: 10px; margin: 2px 2px 4px; padding: 10px 12px; border-radius: 7px; background: #10233f; color: #fff; font-size: 0.73rem; font-weight: 600; line-height: 1.5; }
.qbank-pair-note-text { flex: 1 1 auto; min-width: 0; margin: 0; }
.qbank-check[data-pair-group] { border-left: 5px solid transparent; padding-left: 9px; }
.qbank-check[data-pair-group="1"] { border-left-color: #1f7a5a; background: #e7f3ee; }
.qbank-check[data-pair-group="2"] { border-left-color: #a8620d; background: #fbeed8; }
.qbank-check[data-pair-group="3"] { border-left-color: #4b3b8f; background: #efecfa; }
/* Each colour group opens with its own Select all, drawn in the group's colour. The row's top margin is
   the gap that sets one group apart from the next. Ticked entries keep their group's colour, so a
   ticked Paper 2 still reads as Paper 2 rather than turning the same green as Paper 1. */
/* The head is the top of its group's coloured block: same tint and bar as the entries under it, button
   centred, so the group reads as one rectangle with its Select all inside it. The gap above it is what
   separates one group from the next (owner, 23 September 2026). */
.qbank-pair-head { display: flex; justify-content: center; margin: 10px 0 0; padding: 6px 8px 6px 9px; border-left: 5px solid transparent; border-radius: 5px; }
.qbank-pair-head[data-pair-group="1"] { border-left-color: #1f7a5a; background: #e7f3ee; }
.qbank-pair-head[data-pair-group="2"] { border-left-color: #a8620d; background: #fbeed8; }
.qbank-pair-head[data-pair-group="3"] { border-left-color: #4b3b8f; background: #efecfa; }
.qbank-pair-head[hidden], .qbank-pair-note[hidden] { display: none; }
.qbank-pair-select { padding: 3px 12px; border: 1px solid currentColor; border-radius: 999px; background: #fff; font: inherit; font-size: 0.72rem; font-weight: 750; cursor: pointer; }
.qbank-pair-select:hover { color: #fff; }
.qbank-pair-select:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.qbank-pair-head[data-pair-group="1"] .qbank-pair-select { color: #1f7a5a; }
.qbank-pair-head[data-pair-group="2"] .qbank-pair-select { color: #a8620d; }
.qbank-pair-head[data-pair-group="3"] .qbank-pair-select { color: #4b3b8f; }
.qbank-pair-head[data-pair-group="1"] .qbank-pair-select:hover { background: #1f7a5a; border-color: #1f7a5a; }
.qbank-pair-head[data-pair-group="2"] .qbank-pair-select:hover { background: #a8620d; border-color: #a8620d; }
.qbank-pair-head[data-pair-group="3"] .qbank-pair-select:hover { background: #4b3b8f; border-color: #4b3b8f; }
.qbank-check[data-pair-group="1"]:has(input:checked) { background: #d3eadf; }
.qbank-check[data-pair-group="2"]:has(input:checked) { background: #f6e0bd; }
.qbank-check[data-pair-group="3"]:has(input:checked) { background: #e0dbf5; }
@media (forced-colors: active) {
  .qbank-check[data-pair-group], .qbank-pair-head { border-left-color: currentColor; }
}
.qbank-check { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; color: var(--text); font-size: 0.8rem; font-weight: 650; line-height: 1.35; cursor: pointer; }
.qbank-check:hover { background: var(--green-soft); color: var(--green-deep); }
.qbank-check input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--green-deep); cursor: pointer; }
.qbank-check-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.qbank-check .qbank-chip-count { flex: 0 0 auto; margin-left: auto; padding-left: 6px; }
.qbank-check:has(input:checked) { background: var(--green-soft); color: var(--green-deep); }
.qbank-check:has(input:focus-visible) { outline: 2px solid var(--green-deep); outline-offset: -1px; }

.qbank-reset { justify-self: start; min-height: 38px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font: inherit; font-size: 0.84rem; font-weight: 650; cursor: pointer; }
.qbank-reset:hover { border-color: var(--green-deep); color: var(--green-deep); background: var(--green-soft); }

/* ---- results ---- */
.qbank-results { grid-column: 2; grid-row: 1; padding: clamp(20px, 3vw, 34px); }
/* The bar must not move when the mode changes or the review step opens. Its context block and its
   primary button each keep a fixed footprint, so "Show answers" sits in the same place whether the
   button beside it says "Download PDF" or "Review and export", and the list below starts at the same
   height in every state. */
/* Which tool you are in, and the way out of it: beside the page heading, not inside the panels. */
.qbank-toolbar[hidden] { display: none; }
.qbank-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; min-height: 28px; }
.qbank-toolbar .selection-context { margin: 0; color: var(--green-deep); font-size: 0.82rem; font-weight: 750; }
/* The bar names what you are looking at and holds what acts on it, so it stays while the list moves.
   The negative margin and matching padding let it sit flush to the panel's own padded edge — the same
   move the Past Papers keywords list uses for its sticky head. */
.qbank-results, .qbank-review, .qbank-filters-full { --qbank-pad: clamp(20px, 3vw, 34px); position: relative; }
.qbank-resultbar {
  position: sticky; top: calc(var(--qbank-pad, 0px) * -1); z-index: 5;
  margin: calc(var(--qbank-pad, 0px) * -1) calc(var(--qbank-pad, 0px) * -1) 0;
  padding: var(--qbank-pad, 0px) var(--qbank-pad, 0px) 18px;
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px;
  min-height: 46px; border-bottom: 2px solid #cbd9d3; background: var(--surface);
}
.qbank-resultbar-context { min-height: 22px; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.qbank-resultbar .selection-context { margin: 0 0 5px; color: var(--green-deep); font-size: 0.78rem; font-weight: 750; }
.qbank-resultbar #qbank-count { margin: 0; color: var(--muted); font-size: 0.9rem; }
.qbank-resultbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Quick build, the main action of Build a paper: centred in the bar between the count and the other
   actions, larger than them and filled in the logo's green (#00b22d) so it cannot be mistaken for them.
   Dark text on that green keeps it readable. */
.qbank-workspace[data-mode="paper"] .qbank-results .qbank-resultbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; }
.qbank-workspace[data-mode="paper"] .qbank-results .qbank-resultbar-actions { justify-self: end; justify-content: flex-end; }
.qbank-quick-cta { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.qbank-quick-button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 26px; border: 0; border-radius: 999px; background: #00b22d; color: #06260f; font: inherit; font-size: 1.02rem; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 178, 45, 0.28); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; }
.qbank-quick-button:hover { background: #00c532; transform: translateY(-1px); box-shadow: 0 9px 20px rgba(0, 178, 45, 0.34); }
.qbank-quick-button:active { transform: translateY(0); }
.qbank-quick-button:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; }
.qbank-quick-foot { margin: 0; color: var(--muted); font-size: 0.72rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .qbank-quick-button { transition: none; } .qbank-quick-button:hover { transform: none; } }
@media (forced-colors: active) { .qbank-quick-button { border: 2px solid ButtonText; } }
.qbank-action { min-height: 38px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--green-deep); font: inherit; font-size: 0.84rem; font-weight: 650; cursor: pointer; }
.qbank-action:hover { border-color: var(--green-deep); background: var(--green-soft); }
.qbank-action[aria-pressed="true"] { border-color: var(--green-deep); background: var(--green-soft); box-shadow: inset 2px 0 var(--green-deep); }
.qbank-download { min-width: 158px; min-height: 38px; padding: 7px 15px; border: 1px solid var(--green-deep); border-radius: 6px; background: var(--green-deep); color: #fff; font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; }
.qbank-download:hover:not(:disabled) { background: var(--green-darker); }
/* Nothing to review or export until something is in the paper, and it should look that way. */
.qbank-action:disabled, .qbank-download:disabled { border-color: var(--line); background: #f1f4f3; color: #9aa7a2; cursor: not-allowed; box-shadow: none; }

.qbank-list { margin: 0; padding: 0; list-style: none; counter-reset: question; }
/* Source text occasionally carries a long unbreakable token — a URL in a stem, a run-together figure
   reference. One such rendered question was enough to widen the panel and give the page a
   horizontal scrollbar, so text is allowed to break rather than push the layout. */
.qbank-item { position: relative; min-width: 0; padding: 18px 0 18px 34px; border-bottom: 1px solid var(--line); counter-increment: question; overflow-wrap: anywhere; }
.qbank-item::before {
  content: counter(question); position: absolute; left: 0; top: 19px;
  display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: #dfeae6; color: var(--green-deep); font-size: 0.66rem; font-weight: 750;
}
.qbank-item:last-of-type { border-bottom: 0; }
/* The heading line carries everything that identifies the question and, where the mode has one, the
   button that acts on it — so the rows below it are the question and nothing else. */
.qbank-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 7px; color: var(--muted); font-size: 0.78rem; }
.qbank-meta-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* A hairline rather than a pipe character: it separates the source from the topics without reading as
   text of its own. */
.qbank-divider { display: inline-block; width: 1px; height: 13px; margin: 0 1px; background: var(--line); }
.qbank-meta .qbank-tag { margin: 0; padding: 2px 8px; font-size: 0.68rem; }
.qbank-extract { padding: 1px 7px; border-radius: 999px; background: #eef2f0; color: var(--muted); font-size: 0.68rem; font-weight: 700; }
/* A question whose printed figure, drawing space or data table is not carried yet. It is offered, not
   hidden, so it is marked rather than dropped — amber reads as "not ready", never as an error. */
.qbank-incomplete { padding: 1px 7px; border-radius: 999px; background: #fdf1dc; color: #7a5312; font-size: 0.68rem; font-weight: 700; }
/* Small, pushed to the end of the line, and never wider than the marks badge beside it. */
.qbank-meta .qbank-add, .qbank-meta .qbank-reveal {
  flex: 0 0 auto; margin: 0 0 0 auto; min-height: 0; padding: 3px 11px; border: 1px solid var(--green-deep);
  border-radius: 999px; background: #fff; color: var(--green-deep);
  font: inherit; font-size: 0.72rem; font-weight: 700; line-height: 1.45; cursor: pointer;
}
.qbank-meta .qbank-add:hover, .qbank-meta .qbank-reveal:hover { background: var(--green-soft); }
.qbank-meta .qbank-add.is-added, .qbank-meta .qbank-reveal.is-on { background: var(--green-deep); color: #fff; }
.qbank-meta .qbank-add:focus-visible, .qbank-meta .qbank-reveal:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-body { min-width: 0; }
.qbank-marks-badge { padding: 2px 8px; border-radius: 999px; background: var(--green-deep); color: #fff; font-weight: 700; }
.qbank-type { color: var(--green-deep); font-weight: 700; }
/* Paper and question references open the document viewer, so they look like links. */
.qbank-source-link { color: var(--green-deep); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.qbank-source-link:hover { text-decoration-thickness: 2px; }
.qbank-source-link:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; border-radius: 3px; }
.qbank-stem { margin: 0 0 7px; color: var(--muted); line-height: 1.5; font-size: 0.92rem; }
.qbank-question { margin: 0; font-weight: 650; line-height: 1.5; }
.qbank-options { margin: 8px 0 0; padding-left: 20px; line-height: 1.55; font-size: 0.92rem; overflow-wrap: anywhere; }
.qbank-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
.qbank-tag { max-width: 100%; overflow-wrap: anywhere; padding: 3px 9px; border-radius: 999px; background: #edf1ef; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.02em; }
.qbank-answer { margin: 10px 0 0; padding: 10px 13px; border-left: 3px solid var(--green-deep); border-radius: 0 6px 6px 0; background: var(--green-soft); }
.qbank-answer p { margin: 0; line-height: 1.5; font-size: 0.9rem; }
/* A mark scheme is a list of points, so it is rendered as one: a point to a row, marked, rather than a
   paragraph a teacher has to pick apart at the front of a room. */
.qbank-scheme { margin: 0; padding-left: 18px; list-style: disc; }
.qbank-scheme li { margin: 0 0 4px; line-height: 1.5; font-size: 0.9rem; }
.qbank-scheme li:last-child { margin-bottom: 0; }
.qbank-key { margin-bottom: 5px !important; color: var(--green-deep); font-weight: 750; }
/* Browsing for a paper is a long list of mixed lengths — a nine-mark question carrying a paragraph of
   source text sits directly above a one-mark definition — and at a glance they ran together. The fix is
   the one the Past Papers keywords list uses: rule the rows properly, and give the source extract its
   own block so it reads as the material rather than as more question. Same two moves, same tokens. */
/* Each question is a card that opens its paper at the question (owner, 23 September 2026, replacing
   the ruled rows): a light border and a gap keep one question apart from the next, and on hover the
   card tints green, its border darkens, the pointer becomes a hand and a small "Open in paper" appears,
   so what a click does is visible before it is made. */
.qbank-workspace[data-mode="paper"] .qbank-item { margin: 0 0 12px; padding: 18px 18px 30px 50px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.qbank-workspace[data-mode="paper"] .qbank-item::before {
  left: 16px; top: 19px; width: 23px; height: 23px; background: var(--green-deep); color: #fff; font-size: 0.7rem;
}
.qbank-card { cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; }
.qbank-workspace[data-mode="paper"] .qbank-card:hover { border-color: var(--green-deep); background: #f3faf6; box-shadow: 0 4px 14px rgba(19, 26, 38, 0.07); }
.qbank-card:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-card::after { content: "Open in paper ↗"; position: absolute; right: 16px; bottom: 10px; color: var(--green-deep); font-size: 0.72rem; font-weight: 750; opacity: 0; transition: opacity 0.12s ease; pointer-events: none; }
.qbank-card:hover::after, .qbank-card:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .qbank-card, .qbank-card::after { transition: none; } }
/* The extract is source material, not the question. Ruled and tinted so the eye skips it when scanning
   and finds it when reading — neutral, so the green answer block stays the one green thing in the row. */
.qbank-workspace[data-mode="paper"] .qbank-stem {
  margin: 0 0 9px; padding: 9px 13px; border-left: 3px solid #cfd8dd; border-radius: 0 6px 6px 0;
  background: #f6f8f9; color: #4d5a63; font-size: 0.88rem; line-height: 1.5;
}
/* The question itself is what the teacher is choosing between, so it carries the weight in the row. */
.qbank-workspace[data-mode="paper"] .qbank-question { font-size: 1.02rem; font-weight: 700; line-height: 1.45; color: var(--text); }
.qbank-workspace[data-mode="paper"] .qbank-meta { margin-bottom: 9px; }

.qbank-empty { display: grid; place-content: center; min-height: 60%; max-width: 46ch; margin: 0 auto; color: var(--muted); text-align: center; }
.qbank-empty[hidden] { display: none; }
.qbank-error { margin: 14px 0 0; padding: 10px 13px; border-radius: 6px; background: #fdecec; color: #9b1c1c; font-size: 0.9rem; }


/* ---- arrival state: choose a tool after the question data is ready ----
   The workspace collapses to a single centred panel until a mode is chosen, so the page begins simple
   and gains its controls only when they are asked for. */
.qbank-workspace[data-mode=""] { grid-template-columns: minmax(0, 1fr); }
.qbank-workspace[data-mode=""] .qbank-controls,
.qbank-workspace[data-mode=""] .qbank-results,
.qbank-workspace[data-mode=""] .qbank-scroll-cue,
.qbank-workspace[data-mode=""] .qbank-review { display: none; }
.qbank-workspace:not([data-mode=""]) .qbank-start { display: none; }

.qbank-start {
  position: relative; grid-column: 1 / -1; grid-row: 1; display: grid; align-content: center; justify-items: center; gap: 14px;
  /* Each band keeps the height its contents need. Without this the panel shares its height out and the
     figures are cut off by the band that holds them. */
  grid-auto-rows: max-content;
  padding: clamp(20px, 3.4vh, 44px) clamp(20px, 4vw, 44px);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  overflow: auto;
}
html:not([data-questions-bank-ready="true"]) .qbank-start > :not(.qbank-loading) { visibility: hidden; }
.qbank-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--green-deep); font-weight: 750; }
html[data-questions-bank-ready="true"] .qbank-loading { display: none; }
.qbank-start > h2 {
  width: min(1180px, 100%); margin: 0; padding-bottom: clamp(12px, 1.6vh, 20px);
  border-bottom: 1px solid var(--line); font-size: clamp(1.35rem, 2.8vw, 2.1rem); text-align: center;
}

/* ---- the figures ----
   The three figures name the archive without repeating a board-specific scope line above them. They are
   counted from the bank at load, never typed in, and the question count leads at twice the visual weight. */
.qbank-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px;
  width: min(1180px, 100%); margin: 0; padding: 0; list-style: none;
  border: 1px solid #d5e5dd; border-radius: var(--radius); background: #d5e5dd; overflow: hidden;
}
.qbank-stat {
  display: grid; align-content: center; justify-items: center; gap: 4px;
  padding: clamp(13px, 1.7vw, 20px) 18px; background: #f7fbf9; text-align: center;
}
.qbank-stat-lead { background: var(--green-deep); }
.qbank-stat-figure {
  color: var(--green-deep); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800;
  line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.qbank-stat-lead .qbank-stat-figure { color: #fff; font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
.qbank-stat-label { color: var(--muted); font-size: clamp(0.82rem, 1vw, 0.95rem); font-weight: 700; line-height: 1.3; }
.qbank-stat-lead .qbank-stat-label { color: #d8f0e5; }
/* The choices are the page at this point, so they take the panel rather than floating as two small cards
   in a large empty box: they grow with the space, up to a width that keeps the lines readable. */
.qbank-start-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(18px, 2.2vw, 30px); width: min(1180px, 100%); }
.qbank-start-choice {
  display: grid; align-content: start; justify-items: start; gap: 14px;
  min-height: clamp(230px, 28vh, 320px); padding: clamp(24px, 3.2vw, 40px);
  border: 1px solid var(--line); border-top: 3px solid var(--brand-green); border-radius: var(--radius);
  background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.qbank-start-choice:hover { border-color: #bfd2cb; box-shadow: var(--shadow); transform: translateY(-1px); }
.qbank-start-choice:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-start-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--green-deep); }
.qbank-start-icon svg { width: 29px; height: 29px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qbank-start-title { font-size: clamp(1.08rem, 1.45vw, 1.32rem); font-weight: 750; line-height: 1.2; color: var(--green-deep); }
/* Three short lines rather than one paragraph: each says one thing the tool does, so the card can be
   read at a glance instead of parsed. */
.qbank-start-note { display: grid; gap: 9px; color: var(--muted); font-size: clamp(0.92rem, 1.05vw, 1.02rem); line-height: 1.5; }
.qbank-start-note > span { position: relative; padding-left: 20px; }
.qbank-start-note > span::before {
  content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--brand-green);
}
/* Full-screen guidance uses the existing Key Topics amber treatment. */
.qbank-start-note > .qbank-start-highlight {
  padding: 8px 12px; border-left: 3px solid #d89523; border-radius: 0 7px 7px 0;
  background: #fff4e5; color: #704c16; font-weight: 700;
}
.qbank-start-note > .qbank-start-highlight::before { display: none; }
/* A short window is a laptop, not a phone: everything still has to be on it. The bands give up a little
   of their room rather than the screen giving up a band — but never so much that the type is crushed. */
@media (max-height: 800px) {
  .qbank-start { gap: 13px; padding: 16px clamp(20px, 4vw, 44px); }
  .qbank-stat { padding: 10px 14px; }
  .qbank-stat-lead .qbank-stat-figure { font-size: clamp(2rem, 3.6vw, 2.9rem); }
  .qbank-stat-figure { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
  .qbank-start > h2 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
  .qbank-start-choice { min-height: 0; }
  .qbank-start-choice { gap: 11px; padding: clamp(18px, 2.4vw, 28px); }
}

@media (max-height: 740px) {
  .qbank-start { gap: 10px; padding: 12px clamp(20px, 4vw, 44px); }
  .qbank-start-note { gap: 7px; }
}

/* Controls that belong to one mode only. */
.qbank-workspace[data-mode="paper"] .qbank-generator-only,
.qbank-workspace[data-mode="generator"] .qbank-paper-only { display: none; }

.qbank-controls-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.qbank-controls-head h2 { margin: 0; font-size: 1rem; }
/* The crumb row keeps its height whether or not it carries the back button, so the review step's bar is
   exactly as tall as the results bar and nothing below it shifts. */
.qbank-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 26px; margin: 0 0 5px; }
.qbank-crumbs .selection-context { margin: 0; }
.qbank-mode-back { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.qbank-mode-back:hover { border-color: var(--green-deep); color: var(--green-deep); background: var(--green-soft); }
.qbank-mode-back:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* ---- the paper basket, under the filters ---- */
.qbank-basket { grid-column: 1; grid-row: 4; padding: 13px 16px 15px; border-top: 1px solid var(--line); background: #fbfcfb; }
.qbank-workspace[data-mode="paper"] .qbank-controls { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.qbank-basket h3 { margin: 0 0 4px; font-size: 0.82rem; }
.qbank-basket-total { margin: 0; color: var(--green-deep); font-size: 0.88rem; font-weight: 700; }
.qbank-basket-empty { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.qbank-basket-empty[hidden] { display: none; }

/* ---- add button on a question ---- */
.qbank-more { display: block; width: 100%; margin: 16px 0 0; min-height: 40px; padding: 9px 14px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; color: var(--green-deep); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.qbank-more:hover { border-color: var(--green-deep); background: var(--green-soft); }
.qbank-more:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
/* Add lives in the heading line — see .qbank-meta .qbank-add above. Putting it there rather than on a
   row of its own, with the topics beside the source, takes two rows off every question in the list. */

/* ---- review step ---- */
.qbank-review { grid-column: 2; grid-row: 1; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); min-width: 0; min-height: 0; padding: clamp(20px, 3vw, 34px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8ab8a7 #edf5f1; }
.qbank-review[hidden] { display: none; }
.qbank-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qbank-review #qbank-review-count { margin: 0; color: var(--muted); font-size: 0.9rem; }
/* ---- the export step ----
   The options belong to the export, so they are asked for when it is asked for and are not on screen
   before that. A dialog rather than a panel: it cannot move the review underneath it, and the browser
   handles the focus trap and Escape. */
.qbank-export-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(19, 26, 38, 0.24); }
.qbank-export-dialog::backdrop { background: rgba(19, 26, 38, 0.38); }
.qbank-export-form { display: grid; gap: 16px; padding: clamp(20px, 3vw, 28px); }
.qbank-export-form h2 { margin: 0; color: var(--green-deep); font-size: 1.1rem; }
.qbank-export-field { display: grid; gap: 7px; }
.qbank-export-field input[type="text"] { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font: inherit; font-size: 0.86rem; }
.qbank-export-field input[type="text"]:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-export-options { display: flex; flex-wrap: wrap; gap: 6px; }
.qbank-export-note { margin: 2px 0 0; color: var(--muted); font-size: 0.74rem; line-height: 1.45; }
.qbank-export-actions { display: flex; justify-content: flex-end; gap: 8px; }
.qbank-review-list { margin: 0; padding: 0; list-style: none; counter-reset: question; }
.qbank-workspace[data-mode="paper"] .qbank-review-item { padding-right: 196px; cursor: pointer; }
.qbank-review-controls { cursor: default; }
.qbank-move svg { display: block; margin: auto; }
/* A locked question is marked on its lock, filled like any control that is on. */
.qbank-lock.is-on { border-color: var(--green-deep); background: var(--green-deep); color: #fff; }
.qbank-lock.is-on:hover:not(:disabled) { background: var(--green-darker); }

/* ---- quick build ---- */
.qbank-quick-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.qbank-quick-scope { margin: -8px 0 0; color: var(--muted); font-size: 0.82rem; }
.qbank-quick-input { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; color: var(--text); font-size: 0.84rem; font-weight: 650; }
.qbank-quick-input[hidden], .qbank-export-field[hidden] { display: none; }
.qbank-quick-input input, .qbank-quick-input select, .qbank-quick-priority select, .qbank-quick-dialog .qbank-export-field > select { min-height: 36px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font: inherit; font-size: 0.84rem; }
.qbank-quick-input input { width: 7em; }
.qbank-quick-input select, .qbank-quick-dialog .qbank-export-field > select { max-width: 100%; }
.qbank-quick-priorities { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qbank-quick-priorities:empty { display: none; }
.qbank-quick-priority { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--green-soft); }
.qbank-quick-priority-name { flex: 1 1 12em; min-width: 0; color: var(--green-deep); font-size: 0.84rem; font-weight: 700; }
/* After a build the bar says so in the space it already has, so nothing moves: an amber badge, the most
   prominent thing in the bar, then one short line with the size and the two controls to adjust it. */
#qbank-review-count { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.qbank-status-badge { padding: 5px 14px; border: 1px solid #e3c79a; border-left: 4px solid #d89523; border-radius: 8px; background: #fff4e5; color: #704c16; font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.qbank-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--muted); font-size: 0.84rem; }
.qbank-status-note { color: #704c16; font-weight: 750; cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.qbank-status-tool { display: inline-flex; align-items: center; gap: 5px; color: var(--green-deep); font-weight: 700; }
.qbank-status-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.qbank-priority-badge { padding: 2px 8px; border: 1px solid #e3c79a; border-radius: 999px; background: #fff4e5; color: #704c16; font-size: 0.68rem; font-weight: 750; }
.qbank-quick-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; }
.qbank-quick-pair[hidden] { display: none; }
.qbank-quick-pair .qbank-quick-input { margin-top: 0; }
.qbank-quick-hint { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 0.76rem; }
.qbank-review-item.is-dragging { opacity: 0.5; }
.qbank-review-controls { position: absolute; top: 16px; right: 14px; display: flex; gap: 5px; }
.qbank-move { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--green-deep); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.qbank-move:hover:not(:disabled) { border-color: var(--green-deep); background: var(--green-soft); }
.qbank-move:disabled { color: #c2cbd2; cursor: default; }
.qbank-move:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-remove:hover { border-color: #9b1c1c; background: #fdecec; color: #9b1c1c; }

/* ---- the full filter view ----
   It takes the right-hand panel and nothing else: the compact panel stays in place beside it, so the
   scope already chosen is still in sight and is never asked for a second time. Only the filters the
   compact panel does not carry live in here. */
.qbank-filters-full { grid-column: 2; grid-row: 1; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); min-width: 0; min-height: 0; padding: clamp(20px, 3vw, 34px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8ab8a7 #edf5f1; }
.qbank-filters-full[hidden] { display: none; }
.qbank-filters-full .qbank-resultbar h2 { margin: 0 0 5px; color: var(--green-deep); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.02em; text-transform: uppercase; }
.qbank-filters-full #qbank-filters-count { margin: 0; color: var(--muted); font-size: 0.9rem; }
.qbank-filters-full-slot { margin-top: 18px; }
.filters-scroll-cue { grid-column: 2; grid-row: 1; }
/* In here the detail filters get room: cards in columns, with the chip groups running full width. */
.qbank-filters-full .qbank-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.qbank-filters-full .qbank-row { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfb; }
.qbank-filters-full .qbank-row + .qbank-row { border-top: 1px solid var(--line); }
.qbank-filters-full .qbank-row:first-child { padding-top: 12px; }
/* Every filter is a full-width band, so the view reads as one ordered column rather than a card alone
   on a row with empty space beside it. The one select in here keeps a readable width inside its band. */
.qbank-filters-full .qbank-row { grid-column: 1 / -1; }
.qbank-filters-full .qbank-row select { max-width: 420px; min-height: 38px; font-size: 0.86rem; }
.qbank-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 7px; }
.qbank-detail-head .qbank-row-label { margin: 0; }
.qbank-group-clear { flex: none; min-width: 54px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--green-deep); font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.qbank-group-clear:hover:not(:disabled) { border-color: var(--green-deep); background: var(--green-soft); }
.qbank-group-clear:disabled { color: #aeb9b5; background: #f5f7f6; cursor: default; }
.qbank-group-clear:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* Topic: laid out, not a menu, and last — the longest list, so it reads best with everything else
   settled above it. The count on each chip says how many questions carry that topic. */
.qbank-topic-chips { gap: 6px; }
.qbank-topic-chips .qbank-chip { gap: 7px; }
/* How many there are of a value is a footnote to the value, so it is set in brackets and faded rather
   than boxed into a badge that reads as loud as the label. */
.qbank-chip-count { margin-left: 5px; color: #90a09a; font-size: 0.72rem; font-weight: 650; }
/* A value with nothing behind it is not a choice, and display on the chip itself would otherwise beat
   the hidden attribute. */
.qbank-chip[hidden], .qbank-check[hidden] { display: none; }
.qbank-chip:has(input:checked) .qbank-chip-count { color: #6f9284; }
.qbank-chip-any { font-weight: 750; }

/* The way out of the filter view, beside the two actions. */
/* Retired 23 September 2026. Closing the filter panel is a "go back", not a delete, but this drew it as
   a bare ✕ with a red hover — the same glyph the page uses to remove a filter and to remove a question
   from a paper. It now reuses .qbank-mode-back, the arrow the header already uses for "← Change tool". */

/* ---- the generator shows its questions as boxes ----
   A starter is read a question at a time off a board, so each one is its own card rather than a row in
   a list. The boxes are one size and between them they fill the panel: the panel becomes a column with
   the bar on top and the grid taking everything left, and the grid is an equal share per cell. Asking
   for six gives six boxes in the space four had; asking for eight when three questions match gives
   three boxes sharing it. Columns and rows are set from the count by tileGenerator(). */
.qbank-workspace[data-mode="generator"] .qbank-results { display: flex; flex-direction: column; overflow: hidden; }
/* A display rule on a class beats the browser's own [hidden] rule, so the panel has to be told again to
   go away when the filter view takes its place — otherwise the two sit on top of each other. */
.qbank-workspace[data-mode="generator"] .qbank-results[hidden] { display: none; }
/* The bar keeps its own height: as a flex item it would otherwise shrink to fit the grid below it, and
   the questions would start a few pixels higher here than they do in the browsing list. */
.qbank-workspace[data-mode="generator"] .qbank-resultbar,
.qbank-workspace[data-mode="generator"] .qbank-error,
.qbank-workspace[data-mode="generator"] .qbank-empty { flex: 0 0 auto; }
.qbank-workspace[data-mode="generator"] .qbank-list {
  /* No top margin: the bar above already leaves its own gap, and a margin here would start the boxes
     18px lower than the browsing list does — drift between the two modes. */
  flex: 1 1 auto; min-height: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(var(--qbank-columns, 2), minmax(0, 1fr));
  /* A row never goes below a readable height. On a short screen that means the grid is taller than the
     panel and the grid scrolls — one scroll for the board, rather than eight boxes each too small to
     read and each scrolling on its own. */
  grid-template-rows: repeat(var(--qbank-rows, 2), minmax(var(--qbank-row-floor, 190px), 1fr));
  /* The gutter is held whether or not the grid scrolls: a scrollbar appearing after the boxes were
     fitted would narrow every column and make the text taller than the box it was just fitted to. */
  overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #8ab8a7 #edf5f1;
}
.qbank-workspace[data-mode="generator"] .qbank-item,
.qbank-workspace[data-mode="generator"] .qbank-item:last-of-type {
  min-height: 0; padding: 16px 16px 16px 42px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; box-shadow: var(--shadow);
  /* A box keeps its share of the panel whatever is in it; a long stem scrolls inside its own box
     rather than making that box taller than the others. */
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8ab8a7 #edf5f1;
}
.qbank-workspace[data-mode="generator"] .qbank-item::before { left: 14px; top: 17px; }
/* The heading line is fixed type, so in a narrow box it can eat the room the question needs. Three and
   four columns compact it: smaller type, tighter gaps, a smaller number and less indent — which is what
   lets the question itself keep a readable size. */
.qbank-list[data-columns="3"] .qbank-meta, .qbank-list[data-columns="4"] .qbank-meta { gap: 7px; margin-bottom: 5px; font-size: 0.7rem; }
.qbank-list[data-columns="3"] .qbank-meta-facts, .qbank-list[data-columns="4"] .qbank-meta-facts { gap: 6px; }
.qbank-list[data-columns="4"] .qbank-marks-badge { padding: 1px 7px; }
.qbank-list[data-columns="4"] .qbank-extract { padding: 1px 5px; font-size: 0.62rem; }
.qbank-list[data-columns="4"] .qbank-incomplete { padding: 1px 5px; font-size: 0.62rem; }
.qbank-workspace[data-mode="generator"] .qbank-list[data-columns="4"] .qbank-item { padding: 13px 13px 13px 32px; }
.qbank-workspace[data-mode="generator"] .qbank-list[data-columns="4"] .qbank-item::before { left: 11px; top: 14px; width: 16px; height: 16px; font-size: 0.6rem; }

/* The body carries one font size, set by fitBoxes(), and everything inside it is expressed relative to
   that — so a box is fitted to its contents by scaling a single value. The heading line stays at a
   fixed size so its button keeps a usable target however small the type below gets. */
.qbank-workspace[data-mode="generator"] .qbank-body { font-size: 16px; line-height: 1.38; }
.qbank-workspace[data-mode="generator"] .qbank-body .qbank-stem { margin: 0 0 0.4em; font-size: 0.9em; line-height: 1.4; }
.qbank-workspace[data-mode="generator"] .qbank-body .qbank-question { font-size: 1em; line-height: 1.38; }
.qbank-workspace[data-mode="generator"] .qbank-body .qbank-options { margin: 0.45em 0 0; padding-left: 1.3em; font-size: 0.92em; line-height: 1.42; }
.qbank-workspace[data-mode="generator"] .qbank-body .qbank-answer { margin: 0; padding: 0.55em 0.75em; }
.qbank-workspace[data-mode="generator"] .qbank-body .qbank-answer p,
.qbank-workspace[data-mode="generator"] .qbank-body .qbank-scheme li { font-size: 0.92em; line-height: 1.4; }
.qbank-workspace[data-mode="generator"] .qbank-body .qbank-scheme { padding-left: 1.1em; }
.qbank-workspace[data-mode="generator"] .qbank-body .qbank-key { margin-bottom: 0.35em !important; }
/* The cue follows the grid in this mode, since the grid is what scrolls when a screen is too short for
   the number of boxes asked for. */

/* The count control while it is on loan to the full-screen bar: no uppercase label, just the menu. */
.qbank-limit-slot:empty { display: none; }
.qbank-limit-slot .qbank-row-label { display: none; }
.qbank-limit-slot select {
  min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--green-deep); font: inherit; font-size: 0.84rem; font-weight: 650; cursor: pointer;
}
.qbank-limit-slot select:hover { border-color: var(--green-deep); background: var(--green-soft); }
.qbank-limit-slot select:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* ---- full screen: the questions and nothing else ---- */
/* Full screen is the whole workspace, not the questions panel alone. That is what lets the topics view
   and the review step open inside it: they are panels of the same workspace, and a panel that is not
   the full-screen element cannot be seen behind one. */
.qbank-workspace.is-fullscreen {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: 0; height: 100%; background: var(--surface);
}
.qbank-workspace.is-fullscreen .qbank-controls,
.qbank-workspace.is-fullscreen .qbank-scroll-cue { display: none; }
.qbank-workspace.is-fullscreen .qbank-results,
.qbank-workspace.is-fullscreen .qbank-filters-full,
.qbank-workspace.is-fullscreen .qbank-review {
  grid-column: 1; grid-row: 1; border: 0; border-radius: 0; box-shadow: none; min-height: 0;
}
.is-fullscreen .qbank-results { padding: clamp(28px, 4vw, 60px); border-radius: 0; overflow: auto; background: var(--surface); }
/* The topics view and the review step get the room the screen has, and scroll inside it. */
.qbank-workspace.is-fullscreen .qbank-filters-full,
.qbank-workspace.is-fullscreen .qbank-review { padding: clamp(28px, 4vw, 60px); overflow: auto; }
.is-fullscreen .qbank-results .qbank-resultbar-context,
.is-fullscreen .qbank-results .qbank-toolbar { display: none; }
/* In the generator the set is already shuffled by the filters, and the answers belong with the boxes
   the class is looking at — not on the page where the teacher is choosing. */
.qbank-workspace[data-mode="generator"] #qbank-answers { display: none; }
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results #qbank-answers { display: inline-flex; }
.is-fullscreen .qbank-results .qbank-resultbar { justify-content: flex-end; border-bottom: 0; padding-bottom: 10px; }

/* ---- the filters in full screen ----
   Full screen is where the generator is meant to be used, so the panel's filters come with it and lie
   across the top as one strip. They are moved, not copied, so there is only ever one of each and no
   second state to drift. */
.qbank-fullscreen-filters:empty { display: none; }
.qbank-fullscreen-filters {
  display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px;
  margin: 0 0 18px; padding: 0 0 16px; border-bottom: 2px solid #cbd9d3;
}
.qbank-fullscreen-filters .qbank-filter-body { display: block; flex: 1 1 560px; min-width: 0; padding: 0; overflow: visible; }
.qbank-fullscreen-filters .qbank-filter-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; }
/* Side by side there is nothing for a divider to divide, so the rows lose the rule that separated them
   in the stack and take a share of the width instead. */
.qbank-fullscreen-filters .qbank-row { flex: 1 1 190px; min-width: 0; padding: 0; border-top: 0; }
/* Four mark chips need their own share of the strip. The grid is contained by that share, so it cannot
   paint underneath the adjacent Topic control at intermediate desktop widths. */
.qbank-fullscreen-filters .qbank-marks-row { flex: 2 1 480px; }
.qbank-fullscreen-filters #filter-marks-short { width: 100%; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Topic is a menu here and chips in the topics view: the strip has no room for the full list, and no
   panel beside the board to open that view into. It is the same set of ticks either way. */
.qbank-topic-picker { display: none; }
.qbank-fullscreen-filters .qbank-topic-picker { display: block; }
/* Number of questions is in the bar; only its empty label would be left here. */
.qbank-fullscreen-filters #qbank-limit-row { display: none; }
.qbank-fullscreen-filters .qbank-fixed-scope { flex: 1 1 100%; margin: 0 0 8px; }
.qbank-fullscreen-filters .qbank-applied { flex: 1 1 100%; margin: 8px 0 0; }
.qbank-fullscreen-filters .qbank-filter-actions { flex: 0 0 auto; padding: 0; border-top: 0; background: none; }
/* Stacked, a list opened in the flow; in a row it would push the board down, so it hangs under its own
   button instead. The board is behind it and comes back untouched when the list closes. */
.qbank-fullscreen-filters .qbank-row { position: relative; }
.qbank-fullscreen-filters .qbank-picker-menu {
  position: absolute; top: 100%; left: 0; z-index: 9; width: min(440px, calc(100vw - 24px)); max-width: calc(100vw - 24px); margin-top: 5px;
  transform: translateX(var(--qbank-menu-shift, 0px)); overflow-x: hidden;
  /* 322 specification points in a 232px window is the same unusable list it is in the panel. Full
     screen has the height, so the list takes it and scrolls inside itself. */
  max-height: calc(100dvh - 32px);
  box-shadow: 0 14px 34px rgba(19, 26, 38, 0.18);
}
.is-fullscreen .qbank-results .qbank-list { max-width: 1160px; margin: 0 auto; }
/* Full screen is the same rule on a bigger canvas: the boxes still tile it, re-shaped to the width. */
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results { overflow: hidden; }
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results .qbank-list { max-width: none; margin: 0; gap: 22px; }
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results .qbank-item,
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results .qbank-item:last-of-type { padding: 22px 24px 24px 58px; }
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results .qbank-item::before { left: 22px; }
.is-fullscreen .qbank-results .qbank-item { padding-left: 46px; }
.is-fullscreen .qbank-results .qbank-item::before { top: 22px; width: 28px; height: 28px; font-size: 0.85rem; }
/* A tight board box (fitBoxes) gives its question the room: compact padding and a small number. */
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results .qbank-item.is-tight { padding: 10px 10px 10px 32px; }
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results .qbank-item.is-tight::before { left: 8px; top: 10px; width: 18px; height: 18px; font-size: 0.6rem; }
/* Full screen starts from a bigger body and fitBoxes() brings it down only as far as the box needs. */
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results .qbank-body { font-size: 26px; }
.is-fullscreen .qbank-results .qbank-meta { font-size: 0.92rem; gap: 10px; }
.is-fullscreen .qbank-results .qbank-meta .qbank-reveal { padding: 5px 14px; font-size: 0.82rem; }

@media (max-width: 860px) {
  /* Below this the two panels stack, and the workspace stops constraining height so the page scrolls
     normally — the same behaviour Past Papers uses at its narrow breakpoint. */
  .qbank-workspace { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; }
  .qbank-controls, .qbank-results, .qbank-review, .qbank-start, .qbank-filters-full { grid-column: 1; }
  .qbank-review { grid-row: 2; }
  .qbank-controls { grid-row: 1; }
  .qbank-results { grid-row: 2; }
  .qbank-filter-body, .qbank-results { overflow: visible; }
  .qbank-scroll-cue { display: none; }
  /* Stacked, the panel is not what scrolls — the page is — so a bar stuck to the panel's top edge would
     sit above the screen. It goes back to being an ordinary heading row. */
  .qbank-resultbar { position: relative; top: auto; }
  .qbank-start-choice { min-height: 0; }
  /* Stacked, the page scrolls normally, so the boxes go one under another at their own height rather
     than sharing a fixed panel between them. */
  .qbank-workspace[data-mode="generator"] .qbank-results { display: block; overflow: visible; }
  .qbank-workspace[data-mode="generator"] .qbank-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .qbank-workspace[data-mode="generator"] .qbank-item { overflow: visible; }
}

@media (max-width: 560px) {
  .qbank-workspace[data-mode="paper"] .qbank-results .qbank-resultbar { grid-template-columns: minmax(0, 1fr); }
  .qbank-quick-cta { order: -1; align-items: stretch; }
  .qbank-quick-button { justify-content: center; }
  .qbank-resultbar-actions { width: 100%; }
  .qbank-action, .qbank-download { flex: 1 1 auto; min-height: 44px; }
}

/* On a narrow phone, preserve readable text and reachable actions inside the same toolbar area. */

/* Full-screen navigation is separate from the board actions. Topic already has its own menu. */
.is-fullscreen #qbank-fullscreen { margin-left: 16px; }
.qbank-workspace[data-mode="generator"].is-fullscreen [data-testid="qbank-more-filters"] { display: none; }

@media (max-width: 560px) {
  .is-fullscreen .qbank-results .qbank-resultbar-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .is-fullscreen #qbank-fullscreen { grid-column: 2; grid-row: 1; min-width: 0; margin-left: 0; }
  .is-fullscreen #qbank-limit-slot { grid-column: 1; grid-row: 1; }
  .is-fullscreen #qbank-shuffle { grid-column: 1; grid-row: 2; }
  .is-fullscreen #qbank-answers { grid-column: 2; grid-row: 2; }
}

/* On a phone the five review controls sit under the question rather than beside it, so the question
   keeps the width to be read. */
@media (max-width: 560px) {
  .qbank-workspace[data-mode="paper"] .qbank-review-item { padding-right: 18px; }
  .qbank-review-controls { position: static; justify-content: flex-end; margin-top: 8px; }
}

/* Full screen where the browser has none or refuses (site/fullscreen.mjs, 25 September 2026): iPhone Safari and
   older iPad Safari. The workspace fills the window instead; the is-fullscreen layout above is unchanged. */
.qbank-workspace.is-page-fullscreen { position: fixed; inset: 0; z-index: 10000; height: 100dvh; overflow: auto; }
html.has-page-fullscreen, html.has-page-fullscreen body { overflow: hidden; }
.qbank-workspace.is-entering-fullscreen .qbank-results,.qbank-workspace.is-entering-fullscreen .qbank-controls { visibility: hidden; }
.qbank-workspace.is-entering-fullscreen::after { content: "Opening short answer questions…"; position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #f7faf8; color: var(--green-deep); font-weight: 750; }

/* Test yourself: multiple choice (owner, 25 September 2026). The navy primary of Keywords' Test yourself
   (past-papers.css .keywords-test) and the answer buttons and feedback of its "Find the keyword". */
.qbank-quiz-open { min-height: 38px; padding: 7px 15px; border: 1px solid #10233f; border-radius: 6px; background: #10233f; color: #fff; font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(16, 35, 63, 0.2); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.qbank-quiz-open:hover { background: #0b1a30; transform: translateY(-1px); box-shadow: 0 6px 15px rgba(16, 35, 63, 0.28); }
.qbank-quiz-open:focus-visible { outline: 2px solid #10233f; outline-offset: 2px; }
#qbank-quiz { background: #fff; color: #10233f; box-shadow: none; }
#qbank-quiz:hover { background: #eef1f6; }
.qbank-quiz-only { display: none; }
.qbank-workspace[data-quiz] .qbank-quiz-only { display: inline-flex; align-items: center; }
.qbank-workspace[data-quiz] #qbank-quiz,
.qbank-workspace[data-quiz] #qbank-answers,
.qbank-workspace[data-quiz] .qbank-list { display: none; }
/* Full screen shows Show answers for the board; the quiz has its own answers. */
.qbank-workspace[data-quiz][data-mode="generator"].is-fullscreen .qbank-results #qbank-answers { display: none; }
.qbank-quiz-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 46px; margin-bottom: 10px; }
.qbank-quiz-title { margin: 0; font-size: 1.15rem; }
.qbank-quiz-progress { margin: 0; color: var(--muted); font-size: 0.86rem; font-weight: 700; }
/* The message sits at the end of the heading line; its space is always held, so it never moves anything. */
.qbank-quiz-head .qbank-quiz-feedback { margin-left: auto; min-height: 0; padding: 0; }
/* This round's figures, below the options so their growth never moves them (owner, 25 September 2026). */
.qbank-quiz-stats { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.qbank-quiz-stats-empty { margin: 0; color: var(--muted); font-size: 0.86rem; }
.qbank-quiz-stats-empty[hidden], .qbank-quiz-tiles[hidden], .qbank-quiz-missed[hidden] { display: none; }
.qbank-quiz-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qbank-quiz-tile { padding: 10px 14px; border-radius: 8px; background: #f3f7f5; }
.qbank-quiz-figure { margin: 0; color: var(--text); font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.qbank-quiz-caption { margin: 2px 0 0; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.qbank-quiz-missed { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.qbank-quiz-missed-title { margin: 0 0 8px; color: #8c2540; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.qbank-quiz-missed-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qbank-quiz-missed-item { padding: 5px 11px; border: 1px solid #efd3da; border-left: 3px solid #c56b82; border-radius: 6px; background: #fff; font-size: 0.82rem; }
.qbank-workspace[data-quiz][data-mode="generator"] .qbank-results { display: block; overflow: auto; }
.qbank-quiz[hidden], .qbank-quiz-end[hidden] { display: none; }
.qbank-quiz { max-width: 980px; margin: 0 auto; padding: 4px 0 24px; }
.qbank-quiz-card { position: relative; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.qbank-quiz-card .qbank-body { font-size: 1.15rem; }
/* A B over C D, as the paper prints them (owner, 25 September 2026); one column on a phone. */
.qbank-quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (max-width: 560px) { .qbank-quiz-options { grid-template-columns: minmax(0, 1fr); } }
.qbank-quiz-choice { min-height: 48px; padding: 10px 14px; border: 1px solid #b9cec6; border-radius: 7px; background: #fff; color: var(--green-deep); font: inherit; font-size: 1rem; font-weight: 650; text-align: left; white-space: pre-wrap; cursor: pointer; }
.qbank-quiz-choice:hover:not(:disabled) { background: var(--green-soft, #e7f3ee); }
.qbank-quiz-choice.is-correct { background: var(--green-deep); color: #fff; }
.qbank-quiz-choice.is-incorrect { color: #704c16; border-color: #d89523; background: #fff4e5; }
.qbank-quiz-choice:disabled { cursor: default; }
.qbank-quiz-choice:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-quiz-feedback { min-height: 54px; display: flex; align-items: center; padding-bottom: 8px; }
.qbank-quiz-feedback p { margin: 0; padding: 9px 14px; border: 1px solid transparent; border-radius: 999px; font-weight: 650; font-size: .95rem; visibility: hidden; }
.qbank-quiz-feedback p.is-visible { visibility: visible; }
.qbank-quiz-feedback [data-outcome="incorrect"] { color: #8c2540; background: #fff0f3; border-color: #f0c3ce; }
.qbank-quiz-feedback [data-outcome="correct"] { color: #09634c; background: #e7f7ee; border-color: #abd6c0; }
.qbank-quiz-feedback [data-outcome="incorrect"]::before { content: "↻ "; }
.qbank-quiz-feedback [data-outcome="correct"]::before { content: "✓ "; }
.qbank-quiz-end { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; text-align: center; }
.qbank-quiz-end-text { margin: 0; font-size: 1.05rem; font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .qbank-quiz-open { transition: none; } .qbank-quiz-open:hover { transform: none; } }
/* A figure's aside, in brackets and faded, as every count on this page (rule 18a). */
.qbank-quiz-aside { color: var(--muted); font-weight: 600; opacity: 0.75; }
.qbank-quiz-missed-title .qbank-quiz-aside { color: inherit; }

/* Full screen uses the whole screen (owner, 25 September 2026): the question and options take a wide
   column in large type, and the round's figures a column beside them, growing downwards on their own so
   they never move what is being answered. Below 1000px wide they stack as in the panel. */
@media (min-width: 1000px) {
  .is-fullscreen .qbank-quiz {
    max-width: none; display: grid; column-gap: 28px; align-items: start;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    grid-template-areas: "head head" "card stats" "options stats" "end stats";
  }
  .is-fullscreen .qbank-quiz-head { grid-area: head; }
  .is-fullscreen .qbank-quiz-card { grid-area: card; }
  .is-fullscreen .qbank-quiz-options { grid-area: options; }
  .is-fullscreen .qbank-quiz-stats { grid-area: stats; margin-top: 0; }
  .is-fullscreen .qbank-quiz-end { grid-area: end; }
  .is-fullscreen .qbank-quiz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.is-fullscreen .qbank-quiz[hidden] { display: none; }
.is-fullscreen .qbank-quiz-title { font-size: 1.5rem; }
.is-fullscreen .qbank-quiz-progress { font-size: 1.05rem; }
.is-fullscreen .qbank-quiz-card { padding: 24px 28px; }
.is-fullscreen .qbank-quiz-card .qbank-body { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.qbank-workspace.is-fullscreen .qbank-quiz-card .qbank-body .qbank-question { font-size: clamp(1.7rem, 2.3vw, 2.5rem); line-height: 1.3; }
.is-fullscreen .qbank-quiz-choice { min-height: clamp(90px, 17vh, 190px); padding: 16px 22px; font-size: clamp(1.2rem, 1.6vw, 1.6rem); }
.is-fullscreen .qbank-quiz-figure { font-size: 2rem; }

/* Play with friends (play.mjs, owner 25 September 2026). A game takes the page: the filters and the solo quiz
   step aside and the game uses the full width, on every screen. It reuses the quiz's card, options and type. */
.qbank-workspace[data-play] .qbank-controls,
.qbank-workspace[data-play] .qbank-start,
.qbank-workspace[data-play] .qbank-quiz,
.qbank-workspace[data-play] .qbank-list,
.qbank-workspace[data-play] .qbank-resultbar,
.qbank-workspace[data-play] .qbank-empty,
.qbank-workspace[data-play] .qbank-scroll-cue,
body:has(.qbank-workspace[data-play]) .qbank-toolbar { display: none; }
.qbank-workspace[data-play] .qbank-results { grid-column: 1 / -1; display: block; overflow: auto; }
.qbank-workspace[data-play][data-mode=""] .qbank-results { display: block; }
.qbank-workspace[data-rematch-edit] #qbank-rematch-use { display: inline-flex; }
.qbank-workspace[data-rematch-edit] #qbank-quiz-back,.qbank-workspace[data-rematch-edit] #qbank-play-open,
.qbank-workspace[data-rematch-edit] #qbank-fullscreen { display: none; }
.qbank-play[hidden] { display: none; }
.qbank-play { max-width: 1100px; margin: 0 auto; padding: 8px 0 28px; }
.qbank-play-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 14px; }
.qbank-play-leave { margin-left: auto; }
.qbank-play-sound { order: 3; box-sizing: border-box; width: 116px; flex: 0 0 116px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; }
.qbank-play-sound[hidden] { display: none; }
.qbank-play-sound[aria-pressed="false"] { color: #63706b; background: #f4f6f5; }
.qbank-play-sound:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-play-code { padding: 16px 20px; border-radius: 10px; background: #10233f; color: #fff; text-align: center; }
.qbank-play-code .qbank-quiz-caption { color: #c9d4e3; }
.qbank-play-code-value { margin: 4px 0 0; font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 800; letter-spacing: 0.18em; font-variant-numeric: tabular-nums; }
.qbank-play-share, .qbank-play-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 14px 0; }
.qbank-play-players { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.qbank-play-player { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 700; }
.qbank-play-player.is-away { opacity: 0.5; }
.qbank-play-remove { border: 0; background: none; color: #8c2540; font-size: 1.05rem; font-weight: 800; cursor: pointer; }
.qbank-play-message { margin: 18px 0; color: var(--muted); font-size: 1rem; font-weight: 650; text-align: center; }
.qbank-play-clock { margin: 0 0 8px; color: var(--green-deep); font-size: 1.6rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; min-height: 1.6em; }
.qbank-play-question-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 6px; }
.qbank-play-question-controls .qbank-play-clock { margin: 0; }
.qbank-play-scope-summary:has(> .qbank-play-question-controls) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.qbank-play-scope-summary > .qbank-play-question-controls { margin: 0; }
.qbank-play-board-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.qbank-play-board-controls .qbank-play-pause { margin-top: 0; }
/* The host's Skip button is outlined (owner, 1 October 2026), so it never looks like an answer or the main action. */
.qbank-play .qbank-play-advance { background: #fff; border: 2px solid var(--green-deep); color: var(--green-deep); font-weight: 750; }
.qbank-play .qbank-play-advance:hover { background: #e9f6ed; }
.qbank-play .qbank-play-advance:disabled { opacity: .6; cursor: wait; }
.qbank-play-note { min-height: 1.4em; margin: 12px 0 0; color: var(--muted); font-weight: 650; }
.qbank-play-result { margin: 14px 0 0; font-size: 1.4rem; font-weight: 800; color: var(--text); }
.qbank-play-result.is-correct,.qbank-play-result.is-incorrect { padding: 14px 18px; border-radius: 10px; animation: qbank-result-pop .35s ease-out both; }
.qbank-play-result.is-correct { background: #e2f4ea; color: #0b684e; border-left: 5px solid #0b735c; }
.qbank-play-result.is-incorrect { background: #fff1ef; color: #9b3d2e; border-left: 5px solid #b44a32; }
/* A host who only watches sees the answer without a result of their own. */
.qbank-play-result.is-hosting { padding: 14px 18px; border-radius: 10px; background: #eef3f6; color: var(--text); border-left: 5px solid #52616b; }
.qbank-play-result-detail { display: block; margin-top: 4px; font-size: .84rem; font-weight: 600; }
.qbank-play-round-result { margin: 8px 0; color: var(--green-deep); font-size: .96rem; font-weight: 750; }
.qbank-play-round-result span { color: var(--muted); font-size: .84rem; font-weight: 550; }
@keyframes qbank-result-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.qbank-quiz-choice.is-picked { border-color: #10233f; background: #eef1f6; }
.qbank-play-board { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: place; }
.qbank-play-board li { counter-increment: place; display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-weight: 700; }
.qbank-play-board li { animation: qbank-rank-move .65s cubic-bezier(.2,.8,.25,1) both; }
@keyframes qbank-rank-move { from { opacity: .35; transform: translateY(calc((var(--old-rank) - var(--new-rank)) * 44px)); } to { opacity: 1; transform: none; } }
.qbank-play-board li::before { content: counter(place); min-width: 2ch; color: var(--muted); }
.qbank-play-board-name { flex: 1 1 auto; }
.qbank-play-board-stats { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; font-weight: 600; line-height: 1.35; }
.qbank-play-rank-change { min-width: 36px; color: #0b735c; font-variant-numeric: tabular-nums; }
.qbank-play-gain { color: #0b735c; font-size: .8rem; animation: qbank-result-pop .5s ease-out both; }
.qbank-play-board .is-me { background: #eef7f2; }
.qbank-play-title { margin: 10px 0; font-size: 1.8rem; text-align: center; }
.qbank-play-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.qbank-play-place { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border-radius: 10px 10px 0 0; background: #f3f7f5; font-weight: 800; text-align: center; }
.qbank-play-place.place-1 { order: 2; padding-top: 34px; background: #e2f4ea; }
.qbank-play-place.place-2 { order: 1; padding-top: 22px; }
.qbank-play-place.place-3 { order: 3; }
.qbank-play-medal { font-size: 2rem; }
.qbank-play-confetti { position: relative; height: 0; }
.qbank-play-confetti span { position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px; animation: qbank-confetti 2.4s ease-in forwards; }
@keyframes qbank-confetti { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(320px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qbank-play-confetti { display: none; } }
.qbank-play-scope-summary { margin: 0 0 18px; padding: 9px 13px; border-radius: 8px; background: #eaf5ef; color: #0b684e; font-size: .86rem; font-weight: 700; }
.qbank-play-scope-summary:empty { display: none; }
.qbank-play-join-only[hidden], .qbank-play-create[hidden], .qbank-play-form-only[hidden], .qbank-play-choose[hidden], .qbank-play-step[hidden] { display: none; }
.qbank-play-rematch-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
#qbank-play-dialog { width: min(760px, calc(100vw - 32px)); max-height: 88dvh; overflow-y: auto; }
#qbank-play-dialog[data-intent="choose"] { width: min(680px, calc(100vw - 32px)); }
#qbank-play-dialog[data-intent="choose"] .qbank-export-form { position: relative; gap: 20px; }
#qbank-play-dialog[data-intent="choose"] h2 { color: var(--text); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; letter-spacing: -.025em; }
#qbank-play-dialog[data-intent="choose"] h2::before { content: "PLAY WITH FRIENDS"; display: block; margin-bottom: 5px; color: var(--green-deep); font-size: .72rem; font-weight: 800; letter-spacing: .09em; }
.qbank-play-choose-close { position: absolute; top: 18px; right: 18px; }
.qbank-play-choose .ems-play-option,.qbank-play-choose .ems-play-join { cursor: pointer; font: inherit; }
.qbank-play-choose .ems-play-option { width: 100%; }
.qbank-play-choose .ems-play-join { width: 100%; }
.qbank-play-setup { display: grid; gap: 8px; counter-reset: play-step; }
.qbank-play-step { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(180px, 1fr); align-items: center; gap: 14px; min-height: 58px; margin: 0; padding: 9px 13px; border: 1px solid #dbe7e1; border-radius: 9px; background: #f8fbf9; counter-increment: play-step; }
.qbank-play-step-heading { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; color: var(--text); font-size: .84rem; font-weight: 750; line-height: 1.25; }
.qbank-play-step-index { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #dceee5; color: var(--green-deep); font-size: .8rem; font-weight: 800; }
.qbank-play-step-index::before { content: counter(play-step); }
.qbank-play-optional { margin-left: auto; color: var(--muted); font-size: .68rem; font-weight: 600; white-space: nowrap; }
#qbank-play-dialog[data-game-kind="keywords"] .qbank-play-mcq-only { display: none; }
.qbank-play-step select,.qbank-play-step input[type="number"],.qbank-play-step input[type="text"] { width: 100%; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: .84rem; }
.qbank-play-step .qbank-export-options { margin: 0; }
.qbank-play-step select:disabled,.qbank-play-step input:disabled { color: var(--muted); background: #f0f3f1; }
.qbank-play-step select:focus-visible,.qbank-play-step input:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-play-available { margin-left: auto; color: var(--muted); font-size: .68rem; font-weight: 600; white-space: nowrap; }
#qbank-play-dialog .qbank-export-actions { position: sticky; bottom: 0; z-index: 1; padding-top: 12px; border-top: 1px solid var(--line); background: #fff; }
@media(max-width:650px) { .qbank-play-step { grid-template-columns: 1fr; gap: 7px; padding: 10px 12px; } .qbank-play-optional { margin-left: auto; } }
.qbank-play-definition { margin: 0; padding: 18px 22px; border-left: 4px solid #df981f; border-radius: 0 10px 10px 0; background: #fff4e5; color: #704c16; font-size: clamp(1.25rem, 2vw, 1.85rem); line-height: 1.4; font-weight: 700; }
.qbank-play-keyword-options .qbank-quiz-choice { min-height: 58px; }
.qbank-play-keyword-options.is-all { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: min(58dvh, 620px); overflow-y: auto; padding: 3px; }
.qbank-play-keyword-options.is-all .qbank-quiz-choice { min-height: 44px; padding: 8px 11px; font-size: .95rem; }
@media (max-width: 700px) { .qbank-play-keyword-options.is-all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .qbank-play-keyword-options.is-all { grid-template-columns: minmax(0, 1fr); } }
.qbank-rematch-dialog { width: min(440px, calc(100vw - 32px)); }
.qbank-rematch-intro { margin: -4px 0 0; color: var(--muted); line-height: 1.45; }
.qbank-rematch-dialog .qbank-play-rematch-choices { margin: 0; }
.qbank-play-chart-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin: 18px 0 8px; }
.qbank-play-chart-heading .qbank-play-note { margin: 0; }
.qbank-play-chart-heading .qbank-quiz-missed-title { margin: 0 0 0 auto; white-space: nowrap; }
.qbank-play-chart { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f7faf8; }
.qbank-play-chart svg { display: block; width: 100%; height: auto; font-family: system-ui, sans-serif; }
.qbank-play-chart [data-player] { transition: opacity .2s ease; }
.qbank-play-chart [data-player].is-dimmed { opacity: .12; }
.qbank-play-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.qbank-play-legend-item { padding: 5px 10px; border: 1px solid var(--series); border-radius: 99px; background: #fff; color: var(--series); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.qbank-play-legend-item.is-selected { background: var(--series); color: #fff; }
.qbank-play-stats-wrap { max-width: 100%; overflow-x: auto; }
.qbank-play[data-phase="finished"] { height: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
.qbank-play[data-phase="finished"] .qbank-play-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.qbank-workspace[data-play="on"] .qbank-results:has(.qbank-play[data-phase="finished"]) { overflow: hidden; }
.qbank-play-finish-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 10px 0 7px; }
.qbank-play-finish-toolbar > .qbank-play-note { margin: 0; }
.qbank-play-finish-toolbar .qbank-play-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.qbank-play-finish-panel { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.qbank-play-finish-panel > [hidden] { display: none; }
.qbank-play-finish-panel > .qbank-play-chart,
.qbank-play-finish-panel > .qbank-play-stats-wrap { position: absolute; inset: 0; width: 100%; }
.qbank-play-finish-panel .qbank-play-chart { display: flex; flex-direction: column; box-sizing: border-box; height: 100%; min-height: 0; padding: 8px; }
.qbank-play-finish-panel > .qbank-play-chart[hidden] { display: none; }
.qbank-play-finish-panel .qbank-play-chart svg { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; }
.qbank-play-finish-panel .qbank-play-legend { flex: 0 0 auto; max-height: 58px; overflow: auto; margin-top: 5px; }
.qbank-play-finish-panel .qbank-play-stats-wrap { box-sizing: border-box; height: 100%; overflow: auto; }
@media (max-width: 500px), (max-height: 499px) {
  .qbank-play[data-phase="finished"], .qbank-play[data-phase="finished"] .qbank-play-body { height: auto; display: block; }
  .qbank-workspace[data-play="on"] .qbank-results:has(.qbank-play[data-phase="finished"]) { overflow: auto; }
  .qbank-play-finish-toolbar { flex-wrap: wrap; }
  .qbank-play-finish-panel { height: 46dvh; min-height: 250px; }
}
.qbank-play-stats { width: 100%; border-collapse: collapse; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qbank-play-stats th,.qbank-play-stats td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.qbank-play-stats thead { border-bottom: 3px solid var(--green-deep); }
.qbank-play-stats th { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.qbank-play-stats tr.is-me { background: #eef7f2; }
.qbank-play-sort { display: inline-flex; align-items: center; gap: 4px; margin: -3px -6px; padding: 3px 6px; border: 0; border-radius: 5px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.qbank-play-sort:hover { background: var(--green-soft); }
.qbank-play-sort:hover,.qbank-play-sort.is-active { color: var(--green-deep); }
.qbank-play-sort-arrow { font-size: .75em; opacity: .55; }
.qbank-play-sort:hover .qbank-play-sort-arrow,.qbank-play-sort.is-active .qbank-play-sort-arrow { opacity: 1; }
.qbank-play-sort:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .qbank-play-result,.qbank-play-board li,.qbank-play-gain { animation: none !important; }
  .qbank-play-chart [data-player] { transition: none; }
}
.qbank-play-scope { margin: 0 0 12px; color: var(--muted); }
.qbank-play-scope p { margin: 0 0 4px; font-weight: 650; color: var(--text); }
.qbank-play-scope ul { margin: 0; padding-left: 1.2em; }

/* ---- figures cropped from the printed paper ----
   Sized in em by the page script so they shrink with a board's fitted type; never stretched. */
.qbank-figure { margin: 0.55em 0; }
.qbank-figure img { display: block; max-width: 100%; height: auto; }

/* ---- answer options (owner, 27 September 2026) ----
   A letter badge per option, never run into its text; short options sit two by two (A B / C D),
   sentences stack. Wording and order are the paper's; the layout is ours. Sized in em so a fitted board
   shrinks them with its type. */
.qbank-options { list-style: none; padding-left: 0; display: grid; gap: 0.4em 1.4em; }
.qbank-workspace[data-mode="generator"] .qbank-body .qbank-options { padding-left: 0; }
/* Two by two only where the box is wide enough for it; a narrow box (an 8-question board) stacks, so a
   word is never split across a line (it was: "Supernorma / l"). Measured in the box's own type size. */
.qbank-body { container-type: inline-size; }
@container (min-width: 26em) { .qbank-options.is-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qbank-options li { display: flex; align-items: flex-start; gap: 0.55em; min-width: 0; }
.qbank-letter { display: inline-grid; place-items: center; flex: none; min-width: 1.6em; height: 1.6em; padding: 0 0.25em; border-radius: 0.4em; background: var(--green-soft); color: var(--green-deep); font-size: 0.82em; font-weight: 750; line-height: 1; margin-top: 0.08em; }
.qbank-option-text { min-width: 0; overflow-wrap: normal; }
/* A word is never split (owner, 27 September 2026: "Con / sum / ptio / n"). A word too long for its column
   overflows instead, which the layout chooser measures and rules that arrangement out. */
.qbank-options, .qbank-options li { overflow-wrap: normal; word-break: normal; }

/* ---- tables rebuilt from the printed paper ----
   Simple, clean, compact: light rules, a tinted heading row, numbers centred in tabular figures, as the papers print them.
   The crop is kept as the source; this is only its presentation. */
.qbank-table { margin: 0.6em 0; max-width: 100%; overflow-x: auto; font-size: 0.9em; }
.qbank-table table { border-collapse: collapse; }
.qbank-table th, .qbank-table td { border: 1px solid #cfdcd5; padding: 0.38em 0.8em; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; hyphens: none; }
.qbank-table th { background: #eef4f1; font-weight: 700; }
.qbank-table td.is-number { text-align: center; font-variant-numeric: tabular-nums; }
.qbank-table .qbank-table-letter { border: 0; background: none; padding-left: 0; }
.qbank-table figcaption, .qbank-table .qbank-table-title { margin: 0.4em 0 0; font-size: 0.85em; font-weight: 700; color: var(--muted); }
.qbank-table .qbank-table-note { margin: 0.3em 0 0; font-size: 0.78em; color: var(--muted); overflow-wrap: anywhere; }

/* Show answer / Hide answer keep one width, so pressing it never moves the box's heading. */
.qbank-meta .qbank-reveal { min-width: 8.6em; text-align: center; }

/* ---- the enlarged card ----
   One board box, centred and large, over a dimmed page; the board behind it does not move. */
.qbank-workspace[data-mode="generator"] #qbank-list > .qbank-item { cursor: zoom-in; }
.qbank-workspace[data-mode="generator"] #qbank-list > .qbank-item:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; }
.qbank-enlarged { width: min(1180px, 92vw); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 16px; background: transparent; }
.qbank-enlarged::backdrop { background: rgb(17 33 29 / 62%); }
.qbank-enlarged-card { box-sizing: border-box; height: min(86vh, 900px); padding: 30px 38px; border-radius: 16px; background: #fff; box-shadow: 0 30px 90px rgb(10 30 24 / 35%); }
.qbank-enlarged-card .qbank-body { font-size: 24px; }
.qbank-enlarged-actions { display: inline-flex; gap: 10px; align-items: center; margin-left: auto; }
.qbank-enlarged-close { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.qbank-enlarged-close:hover { color: var(--green-deep); background: var(--green-soft); }
.qbank-enlarged-close:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
@media (max-width: 640px) { .qbank-enlarged-card { padding: 18px; height: 88vh; } }
/* The heading row scales with the enlarged card so the marks, source and buttons stay in proportion. */
.qbank-enlarged-card .qbank-meta { zoom: 1.45; }

/* ---- answer choices: tiles and strips (owner, 27 September 2026) ----
   One layout for every view. Drawn choices are lettered tiles; a table of choices is one strip per
   choice with the column headings above; text choices are letter-and-answer strips. In the quiz they are
   the buttons and look it: an edge, a soft shadow, a filled letter, a lift on hover, then green with a tick
   or red with a cross. On a board they are the same layout, flat. */
.qbank-choose { display: inline-block; margin-left: 0.6em; color: var(--muted); font-size: 0.42em; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; vertical-align: 0.25em; }
/* The row "Choose an answer" used to take stays free: the answers keep their distance from the question. */
.qbank-answers.is-quiz { margin-top: 2.2em; }
.qbank-answers { margin-top: 0.5em; }
.qbank-strips { display: grid; grid-template-columns: auto repeat(var(--qbank-strip-columns), minmax(max-content, auto)); row-gap: 0.45em; justify-content: start; font-size: 0.9em; }
.qbank-strip-head, .qbank-strip { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
/* The column headings are a bar of their own: as wide as the strips, on the same column grid so every
   divider lines up, tinted like a table heading and never a button. */
.qbank-strip-head { border: 1px solid #dde7e2; border-radius: 0.55em; background: #eef4f1; margin-bottom: -0.15em; }
.qbank-strip-head > span { padding: 0.45em 0.9em; font-weight: 700; }
.qbank-strip-head > span:first-child { padding: 0; }
.qbank-strip-head > span + span + span { border-left: 1px solid #d5e0da; }
.qbank-strips.is-interactive .qbank-strip-head { padding-right: 2.1em; }
.qbank-strip { padding: 0; border: 1px solid #cfdcd5; border-radius: 0.55em; background: #fff; color: inherit; font: inherit; text-align: left; overflow-wrap: normal; }
.qbank-strip > span { padding: 0.5em 0.9em; }
.qbank-strip > span + span + span { border-left: 1px solid #e3ebe7; }
.qbank-strip > .is-number { text-align: center; font-variant-numeric: tabular-nums; }
.qbank-strip > .qbank-letter { margin: 0.35em 0 0.35em 0.45em; padding: 0 0.25em; }
.qbank-strips .qbank-table-caption { grid-column: 1 / -1; margin: 0.2em 0 0; color: var(--muted); font-size: 0.85em; font-weight: 700; }
.qbank-text-strips { display: grid; gap: 0.5em; }
/* A text answer is one cell of the grid, not a full-width row: the table-strip rule (full width, subgrid)
   made every text answer span the row, so the 2×2 and one-row layouts never took effect in the quiz. */
.qbank-text-strips > .qbank-strip { grid-column: auto; display: flex; align-items: center; }
@container (min-width: 26em) { .qbank-text-strips.is-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qbank-strip-text { display: flex; align-items: center; gap: 0.7em; padding: 0.45em 0.9em 0.45em 0.45em; }
.qbank-strip-text > span { padding: 0; }
.qbank-strip-text > .qbank-letter { margin: 0; }
.qbank-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.7em; }
/* On a board, too, a diagram set sits in one row where the box is wide enough, as in the quiz: two by two
   in a wide box left half of it empty and forced the diagrams down to their smallest (owner, 27 September
   2026, no scrolling on a board). Each diagram keeps its proportions and shrinks to its share if needed. */
@container (min-width: 640px) { .qbank-tiles:not(.is-interactive) { grid-template-columns: repeat(4, minmax(0, max-content)); } }
.qbank-tile { position: relative; display: block; padding: 1.7em 0.7em 0.6em; border: 1px solid #cfdcd5; border-radius: 0.6em; background: #fff; font: inherit; color: inherit; }
.qbank-tile > .qbank-letter { position: absolute; top: 0.45em; left: 0.45em; margin: 0; }
.qbank-tile img { display: block; max-width: 100%; height: auto; }
.qbank-letter-row { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 0.6em; }
.qbank-letter-button { min-width: 3em; min-height: 2.4em; border: 1px solid #cfdcd5; border-radius: 0.55em; background: #fff; color: var(--green-deep); font: inherit; font-weight: 750; }
.is-interactive .qbank-strip, .is-interactive .qbank-tile, .qbank-letter-button {
  cursor: pointer; box-shadow: 0 1px 0 rgb(15 40 30 / 6%), 0 3px 8px rgb(15 40 30 / 8%);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.is-interactive .qbank-letter { background: var(--green-deep); color: #fff; }
.is-interactive .qbank-strip:hover:not(:disabled), .is-interactive .qbank-tile:hover:not(:disabled), .qbank-letter-button:hover:not(:disabled) {
  border-color: var(--green-deep); background: var(--green-soft); transform: translateY(-1px); box-shadow: 0 2px 0 rgb(15 40 30 / 6%), 0 8px 18px rgb(15 40 30 / 12%);
}
.is-interactive .qbank-strip:focus-visible, .is-interactive .qbank-tile:focus-visible, .qbank-letter-button:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; }
.is-interactive .is-correct { border-color: #1f7a5a; background: #e3f4ea; }
.is-interactive .is-correct .qbank-letter { background: #1f7a5a; }
.is-interactive .is-incorrect { border-color: #d98a9b; background: #fff0f3; color: #8c2540; }
.is-interactive .is-incorrect .qbank-letter { background: #c2405d; }
.is-interactive .is-correct::after, .is-interactive .is-incorrect::after { position: absolute; right: 0.6em; top: 50%; transform: translateY(-50%); font-weight: 800; }
.is-interactive .qbank-strip.is-correct, .is-interactive .qbank-strip.is-incorrect { position: relative; }
.is-interactive .is-correct::after { content: "✓"; color: #1f7a5a; }
.is-interactive .is-incorrect::after { content: "✕"; color: #c2405d; }
.is-interactive .qbank-tile.is-correct::after, .is-interactive .qbank-tile.is-incorrect::after { top: 0.9em; }
.is-interactive :disabled { cursor: default; transform: none; }
.qbank-letter-row .is-correct { border-color: #1f7a5a; background: #e3f4ea; color: #1f7a5a; }
.qbank-letter-row .is-incorrect { border-color: #d98a9b; background: #fff0f3; color: #8c2540; }
@media (prefers-reduced-motion: reduce) { .is-interactive .qbank-strip, .is-interactive .qbank-tile, .qbank-letter-button { transition: none; } }
/* Room for the tick or cross, so it never sits on the answer's last word. */
.is-interactive .qbank-strip { padding-right: 2.1em; position: relative; }
.is-interactive .qbank-tile { padding-right: 2.1em; }
/* In the quiz a diagram set sits in one row where the card is wide enough (A B C D, left to right), each
   diagram scaled to its share of the width and always in proportion; a narrow card keeps two by two. */
.qbank-tiles.is-interactive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 640px) { .qbank-tiles.is-interactive { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qbank-tiles.is-interactive img { mix-blend-mode: multiply; }
.qbank-tiles.is-interactive img { width: 100% !important; }
.qbank-quiz-card .qbank-body { container-type: inline-size; }

/* ---- layouts chosen by measuring (owner, 27 September 2026; QUESTION-PRESENTATION.md) ----
   Keep the meaning, change the layout: the board and the quiz try each and keep the one that needs least
   height. Printed order is the default and wins a tie. */
.qbank-materials { min-width: 0; }
.qbank-table-across { display: none; }
.is-across .can-lie-across .qbank-table-printed { display: none; }
.is-across .can-lie-across .qbank-table-across { display: table; }
.qbank-table-across th { text-align: left; white-space: nowrap; }
/* Material beside the question: figure or table on the left, the question and its answers on the right. */
.qbank-body.is-beside { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1.4em; align-items: start; }
.qbank-body.is-beside > * { grid-column: 2; }
.qbank-body.is-beside > .qbank-materials { grid-column: 1; grid-row: 1 / span 12; max-width: 62cqi; }
.qbank-body.is-beside > .qbank-materials img { max-width: 100%; }
/* Two printed figures side by side rather than one above the other. */
.qbank-body.is-row > .qbank-materials { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 1.2em; }
.qbank-body.is-row > .qbank-materials > * { min-width: 0; flex: 0 1 auto; }
/* Four short answers in one row (A B C D) where the box is wide enough. */
/* The answers' arrangement where it has been measured (QUESTION-PRESENTATION.md rule 4): stacked A–D, two by
   two, or one row. It overrides the width-only defaults above. */
.qbank-options[data-answers="stack"], .qbank-text-strips[data-answers="stack"] { grid-template-columns: minmax(0, 1fr); }
.qbank-options[data-answers="pairs"], .qbank-text-strips[data-answers="pairs"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qbank-options[data-answers="row"], .qbank-text-strips[data-answers="row"] { grid-template-columns: repeat(var(--qbank-answer-count, 4), minmax(0, 1fr)); }
/* The fitted quiz card sets one size on its body; the question keeps its emphasis relative to it. */
.qbank-workspace .qbank-quiz-card.is-fitted .qbank-body .qbank-question { font-size: 1.12em; }
.qbank-quiz-missed-item[hidden] { display: none; }
.qbank-quiz-missed-more { padding: 5px 2px; color: var(--muted); font-size: 0.82rem; font-weight: 700; list-style: none; }

/* Activities allocate the screen to readable questions; scope editing opens explicitly. */
.qbank-scope-open { display: none; }
.is-fullscreen .qbank-scope-open { display: inline-flex; }
.is-fullscreen .qbank-fullscreen-filters { display: none; }
.qbank-scope-dialog { width: min(720px, 94vw); max-height: 90dvh; overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 10px; }
.qbank-scope-dialog::backdrop { background: #10233f66; }
.qbank-scope-dialog .qbank-filter-body { display: block; padding: 12px 0; }
.qbank-scope-dialog .qbank-filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qbank-scope-dialog .qbank-topic-picker { display: block; }
.qbank-scope-dialog .qbank-more-filters { display: none; }
/* The filters box holds still (owner, 30 September 2026: opening Topic made it jump). Its top is fixed instead of
   re-centring on its content, and opening a list no longer changes its content; its lists hang under their button like any
   dropdown, over the box's edge if need be (app.js positionPickerMenu), instead of pushing the rows below or
   being cut off by the box; Done sits with Clear at its foot; and the question count, already in the
   toolbar, is not repeated. Before, opening Topic grew it from 540 to 742px and moved it up 101px. */
.qbank-scope-dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
  gap: 12px 14px; height: fit-content; max-height: 88dvh; margin: 6dvh auto auto; overflow: hidden; }
.qbank-scope-dialog .qbank-filter-body { grid-column: 1 / -1; grid-row: 1; min-height: 0; max-height: calc(88dvh - 110px); overflow: auto; padding: 4px 2px 12px; }
.qbank-scope-dialog .qbank-filter-actions { grid-column: 1; grid-row: 2; align-self: center; padding: 0; border-top: 0; background: none; }
.qbank-scope-dialog .qbank-scope-done { grid-column: 2; grid-row: 2; align-self: center; background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.qbank-scope-dialog #qbank-limit-row { display: none; }
.qbank-scope-dialog .qbank-row { position: relative; }
.qbank-scope-dialog .qbank-picker-menu { position: fixed; right: auto; z-index: 9; margin: 0; transform: none;
  max-height: calc(100dvh - 32px); overflow-y: auto; overflow-x: hidden; box-shadow: 0 14px 34px rgba(19, 26, 38, 0.18); }
/* Keep the exit control in the first row on tablets as well as phones. A wrapping flex row placed it
   below the board actions at 768px, despite the original top-right navigation rule. */
@media (max-width: 999px) {
  .qbank-workspace[data-mode="generator"].is-fullscreen:not([data-quiz]):not([data-play]) .qbank-resultbar-actions {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%;
  }
  .is-fullscreen #qbank-fullscreen { grid-column: 2; grid-row: 1; margin-left: 0; }
  .is-fullscreen #qbank-limit-slot { grid-column: 1; grid-row: 1; }
  .is-fullscreen #qbank-shuffle { grid-column: 1; grid-row: 2; }
  .is-fullscreen #qbank-answers { grid-column: 2; grid-row: 2; }
  .is-fullscreen .qbank-scope-open { grid-column: 1 / -1; grid-row: 3; }
}
/* A short landscape screen has room across the toolbar. Three stacked rows consumed the content
   pane at 844 × 390, leaving no height for diagram answer options after their labels and padding. */
@media (min-width: 561px) and (max-width: 999px) and (max-height: 600px) {
  .qbank-workspace[data-mode="generator"].is-fullscreen:not([data-quiz]):not([data-play]) .qbank-resultbar-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .qbank-workspace[data-mode="generator"].is-fullscreen:not([data-quiz]):not([data-play]) .qbank-resultbar-actions > * { grid-row: 1; min-width: 0; }
  .qbank-workspace[data-mode="generator"].is-fullscreen #qbank-limit-slot { grid-column: 1; }
  .qbank-workspace[data-mode="generator"].is-fullscreen #qbank-shuffle { grid-column: 2; }
  .qbank-workspace[data-mode="generator"].is-fullscreen #qbank-answers { grid-column: 3; }
  .qbank-workspace[data-mode="generator"].is-fullscreen .qbank-scope-open { grid-column: 4; }
  .qbank-workspace[data-mode="generator"].is-fullscreen #qbank-fullscreen { grid-column: 5; }
}
.qbank-board-pages, .qbank-content-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; padding-top: 8px; font-size: 13px; }
.qbank-board-pages[hidden] { display: none; }
.qbank-board-pages > button { flex: 0 0 auto; }
.qbank-board-pages > span { min-width: 0; text-align: center; }
.qbank-workspace[data-quiz] .qbank-board-pages,
.qbank-workspace[data-play] .qbank-board-pages { display: none; }
.qbank-content-pages button { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; }
.qbank-content-pages button:disabled { opacity: .45; cursor: default; }
.qbank-body.is-paged { column-fill: auto; column-gap: 24px; overflow: hidden; }
.qbank-body.is-paged .qbank-materials { display: block; }
.qbank-body.is-paged .qbank-figure, .qbank-body.is-paged .qbank-tile, .qbank-body.is-paged button { break-inside: avoid; }
.qbank-body.is-paged img { max-height: calc(var(--qbank-page-height) - 28px); max-width: 100%; width: auto !important; height: auto; object-fit: contain; }
.qbank-body.is-paged .qbank-answers { break-inside: auto; }
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results { overflow: hidden; padding: 18px 24px; }
.qbank-workspace[data-quiz][data-mode="generator"] .qbank-results { overflow: hidden; }
.is-fullscreen .qbank-quiz { min-height: 0; }
.is-fullscreen .qbank-quiz-head { min-height: 34px; margin-bottom: 8px; }
.is-fullscreen .qbank-quiz-card { padding: 16px 20px; }
@media (max-width: 999px) {
  .is-fullscreen .qbank-quiz-stats { display: none; }
}
@media (max-width: 560px) {
  .qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results { display: flex; padding: 12px; }
  .qbank-workspace[data-mode="generator"].is-fullscreen:not([data-quiz]):not([data-play]) .qbank-list { display: grid; grid-template-rows: repeat(var(--qbank-rows, 1), minmax(0, 1fr)); }
  .is-fullscreen .qbank-results .qbank-resultbar-actions { display: grid; gap: 6px; }
  .is-fullscreen .qbank-scope-open { grid-column: 1 / -1; }
  .is-fullscreen .qbank-action, .is-fullscreen #filter-limit { min-height: 36px; padding: 5px 8px; font-size: 12px; }
  .is-fullscreen .qbank-item { padding: 12px; }
  .is-fullscreen .qbank-quiz-card { padding: 12px; }
  .qbank-scope-dialog .qbank-filter-fields { grid-template-columns: minmax(0, 1fr); }
}
/* Activity cards reserve room for their controls; statistics stay accessible separately on narrow screens. */
.qbank-stats-open { display: none; }
.qbank-stats-dialog { width: min(700px, 92vw); max-height: 90dvh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.qbank-stats-dialog .qbank-quiz-stats { display: block !important; max-height: none !important; }
.qbank-workspace[data-quiz][data-mode="generator"].is-fullscreen .qbank-quiz { padding-bottom: 0; }
.qbank-workspace[data-quiz][data-mode="generator"].is-fullscreen .qbank-quiz-stats { min-height: 0; }
.qbank-workspace[data-play="on"] .qbank-results { min-height: 0; }
.qbank-play[data-phase="question"] .qbank-quiz-card,
.qbank-play[data-phase="answer"] .qbank-quiz-card { min-height: 0; }
@media (max-width: 999px) {
  .qbank-workspace[data-quiz].is-fullscreen .qbank-stats-open { display: inline-flex; }
  .is-fullscreen .qbank-quiz-head { flex-wrap: wrap; height: auto; min-height: 34px; }
}

.qbank-body.is-paged .qbank-table { break-inside: auto; overflow: visible; }
.qbank-body.is-paged .qbank-table table { width: 100%; table-layout: fixed; }
.qbank-body.is-paged .qbank-table th, .qbank-body.is-paged .qbank-table td { padding: .3em; overflow-wrap: anywhere; }
.qbank-body.is-paged .qbank-table tr { break-inside: avoid; }
.qbank-body.is-paged .qbank-strips { display: flex; flex-direction: column; }
.qbank-body.is-paged .qbank-strip-head { display: none; }
.qbank-body.is-paged .qbank-strips > .qbank-strip { display: flex; flex-wrap: wrap; gap: .3em; }
.qbank-body.is-paged .qbank-strips > .qbank-strip > span[data-heading] { flex: 1 1 100%; padding: .3em .6em; }
.qbank-body.is-paged .qbank-strips > .qbank-strip > span[data-heading]:not([data-heading=""])::before { content: attr(data-heading) ": "; font-weight: 700; }

/* Joining directly enters the same bounded activity room without loading bank filters. */
.qbank-workspace[data-play="on"] { position: fixed; inset: 0; z-index: 10000; height: 100dvh; display: block; overflow: hidden; }
html:has(.qbank-workspace[data-play="on"]), body:has(.qbank-workspace[data-play="on"]) { overflow: hidden; }
.qbank-workspace[data-play="on"] .qbank-results { height: 100%; box-sizing: border-box; padding: 18px 24px; border-radius: 0; }
.qbank-workspace[data-play="on"][data-play-kind="mcq"] .qbank-results:has(.qbank-play[data-phase="question"]),
.qbank-workspace[data-play="on"][data-play-kind="mcq"] .qbank-results:has(.qbank-play[data-phase="answer"]) { overflow: hidden; }
.qbank-workspace[data-play="on"] .qbank-play { padding: 0; }
.qbank-play .qbank-quiz-card { container-type: inline-size; }
.qbank-play .qbank-play-clock { margin: 0 0 6px; }
.qbank-play .qbank-play-note { margin: 8px 0; }
@media (max-width: 560px) { .qbank-workspace[data-play="on"] .qbank-results { padding: 12px; } .qbank-play-head { gap: 4px 8px; margin-bottom: 8px; } .qbank-play-scope-summary { margin-bottom: 8px; } }

/* Bounded question activities. Build a paper retains its browsing and review scrolling. */
.qbank-workspace[data-mode="generator"].is-fullscreen,
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results { scrollbar-gutter: auto; overflow: hidden; }
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results { display: flex; flex-direction: column; }
.qbank-workspace[data-mode="generator"].is-fullscreen .qbank-resultbar { position: static; margin: 0; padding: 0 0 8px; min-height: 0; }
.qbank-workspace[data-play="on"][data-play-kind] .qbank-results { display: block; scrollbar-gutter: auto; overflow: auto; }
.qbank-workspace[data-play="on"][data-play-kind="mcq"] .qbank-results:has(.qbank-play[data-phase="question"]),
.qbank-workspace[data-play="on"][data-play-kind="mcq"] .qbank-results:has(.qbank-play[data-phase="answer"]) { overflow: hidden; }
.qbank-workspace[data-mode="generator"].is-fullscreen:not([data-quiz]):not([data-play]) .qbank-list {
  display: grid; overflow: hidden; scrollbar-gutter: auto;
  grid-template-columns: repeat(var(--qbank-columns, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--qbank-rows, 1), minmax(0, 1fr));
}
.qbank-workspace[data-quiz][data-mode="generator"] .qbank-list { display: none; }
.qbank-workspace[data-quiz].is-fullscreen .qbank-quiz { flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; box-sizing: border-box; }
.qbank-play-clock:empty, .qbank-play-note:empty { display: none; }
.qbank-game-scope { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.qbank-game-scope:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
.qbank-quiz-feedback:not(:has(.is-visible)) { display: none; }
.qbank-content-pages button { min-width: 34px; min-height: 32px; padding: 4px 8px; }
.qbank-content-pages span { text-align: center; white-space: nowrap; }
.qbank-body.is-paged .qbank-answer { overflow-wrap: anywhere; }
.qbank-body.is-paged .qbank-tile img { max-height: calc(var(--qbank-page-height) - 3.5em); }
.qbank-body.is-paged img { width: min(100%, var(--qbank-image-width), calc((var(--qbank-page-height) - 28px) * var(--qbank-image-ratio))) !important; }
.qbank-body.is-paged .qbank-tile img { width: min(100%, var(--qbank-image-width), calc((var(--qbank-page-height) - 3.5em) * var(--qbank-image-ratio))) !important; }
.qbank-body.is-paged .qbank-stem, .qbank-body.is-paged .qbank-question { overflow-wrap: anywhere; }
.qbank-workspace[data-mode="generator"] .qbank-meta { flex-wrap: wrap; }
.qbank-workspace[data-mode="generator"] .qbank-meta-facts { flex: 1 1 210px; }
.qbank-enlarged-card .qbank-meta-facts { flex: 1 1 300px; }
.qbank-enlarged-actions { flex: 0 0 auto; }
.qbank-answers.is-quiz { margin-top: .8em; }
@media (max-width: 640px) {
  .qbank-enlarged-card .qbank-meta { zoom: 1; gap: 6px; }
  .qbank-enlarged-card .qbank-meta-facts { flex-basis: 100%; gap: 5px 8px; }
  .qbank-enlarged-close { width: 32px; height: 32px; }
}
@media (max-width: 560px), (max-height: 600px) {
  .qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results,
  .qbank-workspace[data-play="on"] .qbank-results { padding: 10px; }
  .is-fullscreen .qbank-results .qbank-resultbar { min-height: 0; padding-bottom: 8px; }
  .is-fullscreen .qbank-results .qbank-resultbar-actions { gap: 5px; }
  .is-fullscreen .qbank-action, .is-fullscreen #filter-limit { min-height: 32px; padding: 4px 7px; font-size: 12px; }
  .is-fullscreen #qbank-fullscreen { margin-left: 0; }
  .is-fullscreen .qbank-quiz-head { min-height: 0; gap: 4px 8px; margin-bottom: 6px; }
  .is-fullscreen .qbank-quiz-title { font-size: 1rem; }
  .is-fullscreen .qbank-quiz-progress { font-size: .8rem; }
  .is-fullscreen .qbank-quiz-feedback p { font-size: .8rem; padding: 4px 8px; }
  .is-fullscreen .qbank-results .qbank-item,
  .is-fullscreen .qbank-quiz-card { padding: 10px; }
  .qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results .qbank-item,
  .qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results .qbank-item:last-of-type { padding: 12px 12px 12px 40px; }
  .qbank-workspace[data-mode="generator"].is-fullscreen .qbank-results .qbank-item::before { left: 10px; top: 12px; width: 22px; height: 22px; font-size: .75rem; }
  .is-fullscreen .qbank-results .qbank-meta { font-size: .75rem; line-height: 1.3; gap: 5px; }
  .is-fullscreen .qbank-results .qbank-meta-facts { gap: 5px 8px; }
  .qbank-play[data-phase="question"] .qbank-play-head,
  .qbank-play[data-phase="answer"] .qbank-play-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; margin-bottom: 6px; }
  .qbank-play[data-phase="question"] .qbank-play-head h2,
  .qbank-play[data-phase="answer"] .qbank-play-head h2 { font-size: 1rem; line-height: 1.25; }
  .qbank-play[data-phase="question"] .qbank-play-head .qbank-quiz-progress,
  .qbank-play[data-phase="answer"] .qbank-play-head .qbank-quiz-progress { grid-column: 1; grid-row: 2; font-size: .75rem; }
  .qbank-play[data-phase="question"] .qbank-play-sound,
  .qbank-play[data-phase="answer"] .qbank-play-sound { grid-column: 2; grid-row: 2; justify-self: end; }
  .qbank-play[data-phase="question"] .qbank-play-leave,
  .qbank-play[data-phase="answer"] .qbank-play-leave { grid-column: 2; grid-row: 1; min-height: 32px; padding: 4px 8px; }
  .qbank-play[data-phase="question"] .qbank-play-scope-summary,
  .qbank-play[data-phase="answer"] .qbank-play-scope-summary { padding: 6px 9px; margin-bottom: 6px; font-size: .75rem; line-height: 1.3; }
  .qbank-play .qbank-play-clock { min-height: 0; font-size: 1rem; line-height: 1.2; margin-bottom: 6px; }
  .qbank-play .qbank-quiz-card { padding: 10px; }
  .qbank-play .qbank-play-note { margin: 6px 0; font-size: .8rem; line-height: 1.3; min-height: 0; }
  .qbank-play .qbank-play-result { margin-top: 6px; padding: 8px 10px; font-size: 1rem; line-height: 1.3; }
}

/* Diagram games (DIAGRAM-GAMES.md, 29 September 2026): the snapshot, its answers, the reasons and the pause. */
.qbank-play-snapshot { display: block; width: 100%; max-width: 760px; height: auto; max-height: 40vh; object-fit: contain; margin: 4px auto 10px; }
.qbank-play-question-figure { max-width: 760px; margin: 4px auto 10px; }
.qbank-play-question-figure .qbank-play-snapshot { margin: 0; }
.qbank-play-zoomable { position: relative; }
.qbank-play-zoomable.qbank-figure { width: fit-content; max-width: 100%; }
.qbank-play-tile-frame { min-width: 0; }
.qbank-play-tile-frame > .qbank-tile { width: 100%; height: 100%; }
.qbank-play-diagram-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; }
.qbank-play .qbank-quiz-card { background: #fff; border-color: var(--line); }
.qbank-play-question-panel { padding: 14px 17px; border-left: 4px solid #df981f; border-radius: 0 9px 9px 0; background: #fff7e7; }
.qbank-workspace .qbank-play .qbank-quiz-card.is-scenario .qbank-body .qbank-scenario-event,
.qbank-workspace .qbank-play .qbank-quiz-card.is-scenario .qbank-body .qbank-scenario-prompt { font-size: inherit; line-height: 1.35; color: var(--text); }
.qbank-play .qbank-quiz-card.is-scenario .qbank-scenario-event { margin: 0 0 .35em; font-weight: 400; }
.qbank-play .qbank-quiz-card.is-scenario .qbank-scenario-prompt { font-weight: 700; }
.qbank-play-diagram-options .qbank-quiz-choice.is-bulleted { text-align: left; white-space: pre-line; line-height: 1.32; font-size: .88em; font-weight: 400; }
.qbank-play-diagram-options .qbank-quiz-choice.is-bulleted strong { font-size: inherit; font-weight: 700; }
.qbank-play-diagram-options .qbank-quiz-choice[aria-pressed="true"] { border-color: #f59e0b; background: #fde68a; }
.qbank-play-diagram-options .qbank-play-check[hidden] { display: none; }
.qbank-play-diagram-options .qbank-play-check { grid-column: 1 / -1; justify-self: end; min-width: 140px; }
/* First to answer offers more options (owner, 1 October 2026): a long list of short answers packs tighter, and of
   long ones (a real-world scenario's bullets) stays two across. */
.qbank-play-diagram-options.is-many { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.qbank-play-diagram-options.is-many .qbank-quiz-choice { min-height: 40px; padding: 6px 9px; }
.qbank-play-diagram-options.is-many.is-long { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.qbank-play-diagram-options.is-many.is-long .qbank-quiz-choice { min-height: 0; }
/* With a long list the diagram gives up a little height, so the options and the line under them fit with room to
   spare on an iPad held sideways (measured by verify-first-to-answer-browser.mjs). */
.qbank-quiz-card:has(.qbank-play-diagram-options.is-many) .qbank-play-snapshot { max-height: 27vh; }
/* First to answer's read-first beat: a calm countdown, then the warning about losing points. */
/* First to answer's read-first panel: navy, in the space where the options will appear (owner, 1 October 2026). */
.qbank-play-ready-panel { display: grid; justify-items: center; gap: 4px; margin-top: 12px; padding: 16px 18px; border-radius: 12px; background: #10233f; color: #fff; text-align: center; }
.qbank-play-ready-panel p { margin: 0; }
.qbank-play-ready-label { font-size: 1rem; font-weight: 700; }
.qbank-play-ready-count { font-size: clamp(2.2rem, 7vh, 3.6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.qbank-play-ready-rule { font-size: .95rem; font-weight: 650; color: #dbe7f5; }
.qbank-play-ready-panel .qbank-play-advance { margin-top: 6px; background: transparent; border-color: #fff; color: #fff; }
.qbank-play-ready-panel .qbank-play-advance:hover { background: #ffffff1f; }
@media (max-height: 520px) { .qbank-play-ready-panel { padding: 8px 12px; } .qbank-play-ready-count { font-size: 1.8rem; } }
.qbank-play-gain.is-loss { color: #b42318; }
.qbank-play-stats tfoot .qbank-play-stats-average th, .qbank-play-stats tfoot .qbank-play-stats-average td { border-top: 2px solid var(--green-deep); border-bottom: 0; background: #f4f8f6; color: var(--text); font-weight: 800; font-size: inherit; letter-spacing: 0; text-transform: none; }
.qbank-play-stats tfoot { position: sticky; bottom: 0; }
.qbank-play-explain { margin: 8px 0 0; padding: 10px 14px 10px 30px; border-left: 4px solid #0b735c; border-radius: 8px; background: #e9f6ed; line-height: 1.45; }
.qbank-play-explain li { margin: 2px 0; }
.qbank-play-pause { margin-top: 10px; }
.qbank-play-clock.is-won { padding: 7px 12px; border-radius: 8px; background: #e9f6ed; color: #0b735c; font-weight: 800; }
.qbank-play-review-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.qbank-play-review-controls .qbank-play-note { margin: 0; }
.qbank-play-help-request { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; }
.qbank-play-help-request .qbank-play-note { margin: 0; font-size: .78rem; }
.qbank-play-help-private { width: fit-content; max-width: 100%; margin-top: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.qbank-play-help-private summary { cursor: pointer; font-weight: 700; }
.qbank-play-help-inside { padding-top: 8px; }
.qbank-play-help-inside ul { margin: 8px 0 0; padding-left: 20px; }
.qbank-play-help-inside ul[hidden] { display: none; }
/* The teacher's pause stands apart (owner, 30 September 2026): solid amber to pause, green to continue. */
.qbank-play .qbank-play-pause { background: #f59e0b; border: 1px solid #d97706; color: #2b1a00; font-weight: 800; }
.qbank-play .qbank-play-pause:hover { background: #fbbf24; }
.qbank-play .qbank-play-pause:focus-visible { outline: 3px solid #92400e; outline-offset: 2px; }
.qbank-play .qbank-play-pause.is-paused { background: #0b735c; border-color: #0b735c; color: #fff; }
.qbank-play .qbank-play-paused { padding: 6px 12px; border-radius: 999px; background: #fef3c7; color: #7c4a03; font-weight: 700; }
/* The reveal: the lit diagram beside the question and its explanation; stacked on narrow screens. */
.qbank-play-reveal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; margin-top: 12px; }
.qbank-play-reveal-figure { position: relative; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.qbank-play-zoom { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--green-deep); font: inherit; font-size: 1.45rem; cursor: zoom-in; opacity: 0; transition: opacity .15s ease; }
.qbank-play-zoomable:hover .qbank-play-zoom,.qbank-play-zoom:focus-visible { opacity: 1; }
@media (hover: none) { .qbank-play-zoom { opacity: 1; } }
.qbank-play-enlarged { box-sizing: border-box; width: min(1180px, 92vw); max-width: none; max-height: 90dvh; padding: 44px 12px 12px; border: 0; border-radius: 14px; background: #fff; }
.qbank-play-enlarged::backdrop { background: rgb(17 33 29 / 62%); }
.qbank-play-enlarged img { display: block; max-width: 100%; max-height: calc(90dvh - 60px); width: auto; height: auto; margin: auto; }
.qbank-play-enlarged .qbank-enlarged-close { position: absolute; top: 6px; right: 8px; }
.qbank-play-reveal .qbank-play-snapshot { max-height: 58vh; margin: 0 auto; }
.qbank-play-reveal-question { margin: 0 0 8px; padding: 9px 11px; border: 1px solid #efc76d; border-radius: 8px; background: #fff7e7; font-weight: 400; line-height: 1.35; color: var(--text); }
.qbank-play-reveal-question p { margin: 0 0 4px; }
.qbank-play-reveal-question p:last-child { margin-bottom: 0; }
.qbank-play-reveal-question .qbank-play-reveal-prompt { font-weight: 700; }
.qbank-play-reveal-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 8px; }
.qbank-play-reveal-option { min-width: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: .76rem; line-height: 1.25; }
.qbank-play-reveal-option b { display: block; }
.qbank-play-reveal-option-first { display: block; font-weight: 700; }
.qbank-play-reveal-option span { display: block; white-space: pre-line; overflow-wrap: anywhere; font-weight: 400; }
.qbank-play-reveal-option.is-correct { border-color: #0b735c; background: #e9f6ed; }
.qbank-play-reveal-option.is-picked { border-color: #b42318; background: #fff0ee; }
.qbank-play-reveal-hint { margin: 0 0 6px; font-size: .8rem; color: var(--muted); }
.qbank-play-reveal .qbank-play-explain { margin-top: 0; }
.qbank-play-explain li.is-pointable { margin-left: -6px; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
.qbank-play-explain li.is-pointable:hover, .qbank-play-explain li.is-lit { background: #fde68a; }
.qbank-play-explain li.is-pointable:focus-visible { outline: 2px solid #92400e; outline-offset: 1px; }
/* Stacked on narrow and portrait screens (an upright iPad left the diagram small beside the text), side by side
   on laptops, boards and landscape phones. */
@media (max-width: 760px), (orientation: portrait) { .qbank-play-reveal { grid-template-columns: minmax(0, 1fr); gap: 10px; } .qbank-play-reveal .qbank-play-snapshot { max-height: 45vh; } }
@media (max-width: 760px), (orientation: portrait) { .qbank-play-reveal .qbank-play-snapshot { max-height: 24vh; } .qbank-play-reveal-options { gap: 3px; } .qbank-play-reveal-option { padding: 3px 5px; font-size: .69rem; } }
@media (max-height: 520px) { .qbank-play-reveal .qbank-play-snapshot { max-height: 48vh; } .qbank-play-reveal { margin-top: 6px; } }
@media (max-height: 450px) and (orientation: landscape) {
  /* A single header row gives paged MCQs a useful content height on a short landscape phone. */
  .qbank-play[data-phase="question"] .qbank-play-head,
  .qbank-play[data-phase="won"] .qbank-play-head,
  .qbank-play[data-phase="answer"] .qbank-play-head { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 3px; }
  .qbank-play[data-phase="question"] .qbank-play-head h2,
  .qbank-play[data-phase="won"] .qbank-play-head h2,
  .qbank-play[data-phase="answer"] .qbank-play-head h2 { flex: 0 1 auto; white-space: nowrap; }
  .qbank-play[data-phase="question"] .qbank-play-head .qbank-quiz-progress,
  .qbank-play[data-phase="won"] .qbank-play-head .qbank-quiz-progress,
  .qbank-play[data-phase="answer"] .qbank-play-head .qbank-quiz-progress { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qbank-play[data-phase="question"] .qbank-play-scope-summary,
  .qbank-play[data-phase="won"] .qbank-play-scope-summary { margin-bottom: 2px; padding: 3px 7px; }
  .qbank-play[data-phase="question"] .qbank-play-clock,
  .qbank-play[data-phase="won"] .qbank-play-clock { margin-bottom: 2px; }
  .qbank-play[data-phase="answer"] .qbank-play-scope-summary { display: none; }
  .qbank-play[data-phase="answer"] .qbank-play-result { margin-top: 2px; padding: 5px 8px; font-size: .86rem; }
  .qbank-play[data-phase="answer"] .qbank-play-reveal { gap: 8px; margin-top: 3px; }
  .qbank-play[data-phase="answer"] .qbank-play-reveal .qbank-play-snapshot { max-height: 37vh; }
  .qbank-play[data-phase="answer"] .qbank-play-reveal-question { padding: 5px 7px; margin-bottom: 4px; font-size: .78rem; line-height: 1.2; }
  .qbank-play[data-phase="answer"] .qbank-play-reveal-option { padding: 2px 4px; font-size: .65rem; line-height: 1.12; }
  .qbank-play[data-phase="answer"] .qbank-play-explain { padding: 5px 7px 5px 20px; font-size: .7rem; line-height: 1.15; }
}
@media (max-width: 360px) {
  .qbank-play[data-phase="answer"][data-game-mode="first"] .qbank-quiz-card { padding: 4px; }
  .qbank-play[data-phase="question"] .qbank-play-note,
  .qbank-play[data-phase="won"] .qbank-play-note,
  .qbank-play[data-phase="answer"] .qbank-play-note { margin: 2px 0; }
  .qbank-play[data-phase="answer"] .qbank-play-result { margin-top: 1px; padding: 2px 6px; font-size: .88rem; line-height: 1.2; }
}
/* The feedback lines up with the diagram; the teacher controls line up with the words column. */
.qbank-play-result-line { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: stretch; }
.qbank-play-result-line .qbank-play-result { min-width: 0; margin-top: 0; display: flex; align-items: center; }
.qbank-play-result-controls { display: flex; align-items: stretch; justify-content: flex-end; gap: 8px; min-width: 0; }
.qbank-play-result-controls > * { flex: 1 1 0; min-width: 0; margin: 0; }
.qbank-play-result-controls > :last-child { margin-left: auto; }
@media (max-width: 760px), (orientation: portrait) { .qbank-play-result-line { grid-template-columns: 1fr; gap: 8px; } }
.qbank-play-reveal.is-words-only { grid-template-columns: minmax(0, 1fr); }
/* Quick build's Number of questions reads "Any" until a number is typed (owner, 1 October 2026), shown as a value,
   not a faint hint, because Any is the choice. */
#qbank-quick-count::placeholder { color: var(--text); opacity: 1; }
/* "(Sam answered first)" keeps a clear space after the answer (owner, 1 October 2026). */
.qbank-play-result-detail { margin-left: .45em; font-weight: 600; }