/* 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 { margin: 10px 2px 0; padding: 8px 10px; 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; }
/* 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; }
/* 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); }
.qbank-chip:has(input:checked) { border-color: var(--green-deep); background: var(--green-soft); color: var(--green-deep); box-shadow: inset 2px 0 var(--green-deep); }
.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-close { flex: 0 0 auto; color: var(--muted); font-size: 0.78rem; font-weight: 700; line-height: 1; }
.qbank-picker-button:hover .qbank-picker-close { color: var(--green-deep); }
.qbank-picker:not(.is-open) .qbank-picker-close { display: none; }
.qbank-picker.is-open .qbank-picker-caret { display: none; }
.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; }

.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: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; }
.qbank-resultbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; min-height: 46px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.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; }
.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 of those in 942 rendered questions 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; }
/* 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; }
.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; }
.qbank-key { margin-bottom: 5px !important; color: var(--green-deep); font-weight: 750; }
.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-scope { margin: 18px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.qbank-error { margin: 14px 0 0; padding: 10px 13px; border-radius: 6px; background: #fdecec; color: #9b1c1c; font-size: 0.9rem; }


/* ---- arrival state: two choices, nothing else ----
   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 {
  grid-column: 1 / -1; grid-row: 1; display: grid; align-content: center; justify-items: center; gap: 22px;
  padding: clamp(24px, 5vh, 56px) clamp(20px, 4vw, 44px);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  overflow: auto;
}
.qbank-start > h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.75rem); text-align: center; }
/* The choices fill a fair share of 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(280px, 1fr)); gap: clamp(16px, 2vw, 26px); width: min(1040px, 100%); }
.qbank-start-choice {
  display: grid; align-content: center; justify-items: start; gap: 12px;
  min-height: clamp(200px, 32vh, 300px); padding: clamp(24px, 3.4vw, 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: 52px; height: 52px; border-radius: 13px; background: var(--green-deep); }
.qbank-start-icon svg { width: 27px; height: 27px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qbank-start-title { font-size: clamp(1.1rem, 1.5vw, 1.32rem); font-weight: 750; color: var(--green-deep); }
.qbank-start-note { color: var(--muted); font-size: clamp(0.9rem, 1.05vw, 1rem); line-height: 1.55; }
.qbank-start .qbank-scope { max-width: 80ch; margin: 0; text-align: center; }

/* 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; }
.qbank-review-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 18px 0 6px; }
.qbank-review-options .qbank-group { display: block; }
.qbank-review-options 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-review-options input[type="text"]:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-review-list { margin: 0; padding: 0; list-style: none; counter-reset: question; }
.qbank-review-item { padding-right: 104px; cursor: grab; }
.qbank-review-item.is-dragging { opacity: 0.5; }
.qbank-review-controls { position: absolute; top: 16px; right: 0; 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; }

/* 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; }
.qbank-chip-count { padding: 1px 6px; border-radius: 999px; background: #eef2f0; color: var(--muted); font-size: 0.68rem; font-weight: 700; }
.qbank-chip:has(input:checked) .qbank-chip-count { background: #fff; color: var(--green-deep); }
.qbank-chip-any { font-weight: 750; }

/* The way out of the filter view, beside the two actions. */
.qbank-close { width: 38px; min-height: 38px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.qbank-close:hover { border-color: #9b1c1c; background: #fdecec; color: #9b1c1c; }
.qbank-close:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* ---- 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-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 { font-size: 0.92em; line-height: 1.4; }
.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. */

/* ---- what the archive knows about the choice being made ----
   It sits over the right-hand panel rather than inside it, so a filter opening never moves the
   questions underneath — and it leaves with the list that raised it. */
/* It answers the question being asked on the left, in the room the heading row already holds — so it
   costs the panels below nothing, whether it is there or not. */
/* It shares the right-hand panel's grid cell rather than taking a row of its own, and its margin is the
   panel's own padding — so it lands on the bar and costs the layout nothing. */
.qbank-note {
  grid-column: 2; grid-row: 1; z-index: 6; align-self: start; justify-self: stretch;
  position: relative; margin: clamp(20px, 3vw, 34px); padding: 9px 38px 10px 13px;
  border: 1px solid #cddbd4; border-left: 3px solid var(--green-deep); border-radius: 10px;
  background: #f5faf7; box-shadow: 0 8px 22px rgba(19, 26, 38, 0.10);
}
.qbank-note[hidden] { display: none; }
/* Lead-in and sentence read as one paragraph, so the note is as short as what it has to say. */
.qbank-note-head { display: inline; margin: 0; color: var(--green-deep); font-size: 0.76rem; font-weight: 750; }
.qbank-note-detail { display: inline; margin: 0 0 0 4px; color: var(--text); font-size: 0.74rem; line-height: 1.45; }
.qbank-note-close { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.qbank-note-close:hover { border-color: #cddbd4; background: #fff; color: var(--green-deep); }
.qbank-note-close:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.qbank-note-groups:not(:empty) { margin-top: 5px; display: grid; gap: 4px; }
.qbank-note-group { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; }
.qbank-note-group-name { margin-right: 2px; font-size: 0.72rem; font-weight: 700; }
.qbank-note-code { padding: 1px 7px; border-radius: 999px; background: #fff; border: 1px solid #cddbd4; color: var(--green-deep); font-size: 0.68rem; font-weight: 700; }
.qbank-note-select { margin-left: 4px; padding: 1px 9px; border: 1px solid var(--green-deep); border-radius: 999px; background: #fff; color: var(--green-deep); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.qbank-note-select { font-size: 0.66rem; }
.qbank-note-select:hover { background: var(--green-deep); color: #fff; }
.qbank-note-select:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* 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 ---- */
.qbank-results.is-fullscreen { padding: clamp(28px, 4vw, 60px); border-radius: 0; overflow: auto; background: var(--surface); }
.qbank-results.is-fullscreen .qbank-resultbar-context, .qbank-results.is-fullscreen .qbank-scope,
.qbank-results.is-fullscreen .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"] .qbank-results.is-fullscreen #qbank-answers { display: inline-flex; }
.qbank-results.is-fullscreen .qbank-resultbar { justify-content: flex-end; border-bottom: 0; padding-bottom: 10px; }
.qbank-results.is-fullscreen .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"] .qbank-results.is-fullscreen { overflow: hidden; }
.qbank-workspace[data-mode="generator"] .qbank-results.is-fullscreen .qbank-list { max-width: none; margin: 0; gap: 22px; }
.qbank-workspace[data-mode="generator"] .qbank-results.is-fullscreen .qbank-item,
.qbank-workspace[data-mode="generator"] .qbank-results.is-fullscreen .qbank-item:last-of-type { padding: 22px 24px 24px 58px; }
.qbank-workspace[data-mode="generator"] .qbank-results.is-fullscreen .qbank-item::before { left: 22px; }
.qbank-results.is-fullscreen .qbank-item { padding-left: 46px; }
.qbank-results.is-fullscreen .qbank-item::before { top: 22px; width: 28px; height: 28px; font-size: 0.85rem; }
/* Full screen starts from a bigger body and fitBoxes() brings it down only as far as the box needs. */
.qbank-workspace[data-mode="generator"] .qbank-results.is-fullscreen .qbank-body { font-size: 26px; }
.qbank-results.is-fullscreen .qbank-meta { font-size: 0.92rem; gap: 10px; }
.qbank-results.is-fullscreen .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-note, .qbank-filters-full { grid-column: 1; }
  .qbank-note { grid-row: 1; margin: 0 0 14px; }
  .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 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-resultbar-actions { width: 100%; }
  .qbank-action, .qbank-download { flex: 1 1 auto; min-height: 44px; }
}