.papers-main { background: var(--bg); }
.papers-page.wrap { width: min(1380px, calc(100% - 48px)); max-width: none; padding: clamp(36px, 5vw, 58px) 0 24px; }
.papers-heading h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em; }
/* Panel sizing, contained scrolling and cues adapted from the Learning area's learning-index.css. */
.papers-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; height: max(200px, calc(100dvh - var(--papers-workspace-top, 300px) - 24px)); min-height: 0; }
.paper-hierarchy, .papers-content { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); min-width: 0; min-height: 0; }
.paper-hierarchy { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.paper-hierarchy > h2 { margin: 0; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.academic-tree { grid-column: 1; grid-row: 2; display: grid; grid-auto-rows: max-content; align-content: start; gap: 10px; min-height: 0; padding: 14px 12px; counter-reset: hierarchy-level; }
.academic-tree, .papers-content { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #8ab8a7 #edf5f1; }
.academic-tree::-webkit-scrollbar, .papers-content::-webkit-scrollbar { width: 11px; }
.academic-tree::-webkit-scrollbar-track, .papers-content::-webkit-scrollbar-track { background: #edf5f1; border-radius: 999px; }
.academic-tree::-webkit-scrollbar-thumb, .papers-content::-webkit-scrollbar-thumb { min-height: 48px; border: 3px solid #edf5f1; border-radius: 999px; background: #72aa95; }
.academic-tree::-webkit-scrollbar-thumb:hover, .papers-content::-webkit-scrollbar-thumb:hover { background: var(--green-deep); }
.academic-tree:focus-visible, .papers-content:focus-visible { outline: 2px solid var(--green-deep); outline-offset: -2px; }
.papers-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%); }
.papers-scroll-cue[hidden] { display: none; }
.papers-scroll-cue span { padding: 6px 11px; color: var(--green-deep); font-size: .76rem; font-weight: 750; }
.hierarchy-scroll-cue { grid-column: 1; grid-row: 2; }
.results-scroll-cue { grid-column: 2; grid-row: 1; }
.hierarchy-node { border: 1px solid var(--line); border-radius: 8px; background: #fbfcfb; counter-increment: hierarchy-level; overflow: hidden; }
.hierarchy-node.is-open { border-color: #bfd2cb; background: #fff; }
.hierarchy-heading { margin: 0; }
.hierarchy-toggle { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; width: 100%; padding: 10px 11px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hierarchy-toggle:hover { background: #f4f8f6; }
.hierarchy-toggle::after { content: "›"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 1.1rem; transform: rotate(90deg); transition: transform 120ms ease; }
.hierarchy-toggle[aria-expanded="true"]::after { transform: rotate(-90deg); }
.hierarchy-label { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.045em; text-transform: uppercase; }
.hierarchy-label::before { content: counter(hierarchy-level); display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #dfeae6; color: var(--green-deep); font-size: 0.66rem; letter-spacing: 0; }
.hierarchy-summary { grid-column: 1; overflow: hidden; color: var(--green-deep); font-size: 0.84rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hierarchy-choices { display: grid; gap: 4px; padding: 0 11px 11px; }
.hierarchy-choices[hidden] { display: none; }
.hierarchy-choice { width: 100%; min-height: 38px; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 0.84rem; font-weight: 650; text-align: left; cursor: pointer; }
.hierarchy-choice:hover, .hierarchy-choice[aria-current="true"] { background: var(--green-soft); color: var(--green-deep); }
.hierarchy-choice[aria-current="true"] { box-shadow: inset 3px 0 var(--green-deep); }
/* Colour-coded equivalents, the Questions Bank's rule 7c (QUESTIONS-BANK.md): the same navy note, tints and bars,
   25 September 2026, replacing the amber equivalence note. The bar, not its hue, is the signal. */
.hierarchy-pair-note { margin: 0 0 4px; padding: 10px 12px; border-radius: 7px; background: #10233f; color: #fff; font-size: 0.73rem; font-weight: 600; line-height: 1.5; }
.hierarchy-choice[data-pair-group] { border-left: 5px solid transparent; border-radius: 5px; padding-left: 9px; }
.hierarchy-choice.pair-start { margin-top: 6px; }
.hierarchy-choice[data-pair-group="1"] { border-left-color: #1f7a5a; background: #e7f3ee; }
.hierarchy-choice[data-pair-group="2"] { border-left-color: #a8620d; background: #fbeed8; }
.hierarchy-choice[data-pair-group="3"] { border-left-color: #4b3b8f; background: #efecfa; }
.hierarchy-choice[data-pair-group="1"]:hover { background: #d3eadf; color: var(--text); }
.hierarchy-choice[data-pair-group="2"]:hover { background: #f6e0bd; color: var(--text); }
.hierarchy-choice[data-pair-group="3"]:hover { background: #e0dbf5; color: var(--text); }
/* The chosen entry keeps its group's colour and is marked by a tick and bold, not a deeper shade, which
   read as a second colour (owner, 25 September 2026). */
.hierarchy-choice[data-pair-group][aria-current="true"] { box-shadow: none; color: var(--text); font-weight: 800; }
.hierarchy-choice[data-pair-group][aria-current="true"]::after { content: "✓"; float: right; color: var(--green-deep); font-weight: 800; }
@media (forced-colors: active) { .hierarchy-choice[data-pair-group] { border-left-color: currentColor; } }
.hierarchy-choice:focus-visible, .hierarchy-toggle:focus-visible, .paper-filters select:focus-visible, .filter-reset:focus-visible, .paper-link:focus-visible, .paper-notice-link:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

.papers-content {
  --papers-content-pad: clamp(20px, 3vw, 34px); position: relative; grid-column: 2; grid-row: 1;
  padding: var(--papers-content-pad); scroll-padding-top: 160px;
}
.paper-empty { display: grid; place-content: center; min-height: 100%; text-align: center; }
.paper-empty[hidden] { display: none; }
.paper-empty h2 { margin: 0 0 7px; font-size: 1.3rem; }
.paper-empty p { max-width: 42ch; margin: 0; color: var(--muted); }
/* The selected unit identifies everything below it. Reuse the contained-scroll sticky header pattern
   from the Question Bank result bar so the context and exam-series count remain visible while browsing. */
.selection-heading {
  position: sticky; top: calc(var(--papers-content-pad) * -1); z-index: 3;
  display: flex; justify-content: space-between; gap: 24px; align-items: end;
  margin: calc(var(--papers-content-pad) * -1) calc(var(--papers-content-pad) * -1) 0;
  padding: var(--papers-content-pad) var(--papers-content-pad) 18px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.selection-context { margin: 0 0 5px; color: var(--green-deep); font-size: 0.78rem; font-weight: 750; }
.selection-heading h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; font-size: 1.35rem; }
.selection-note { max-width: 68ch; margin: 8px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.selection-heading > p { flex: none; margin: 0; color: var(--muted); font-size: 0.9rem; }
.paper-variant { padding: 3px 7px; border-radius: 999px; background: #edf1ef; color: var(--muted); font-size: 0.65rem; letter-spacing: 0.04em; text-transform: uppercase; }
.specification-resource { margin: 18px 0 0; padding: 15px 18px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbf9; }
.specification-resource[hidden] { display: none; }
/* One panel, sliced by width: specification on the left, confirmed upcoming exams on the right.
   Shared labels and button styling connect the columns; Revision needs less width than Specification. */
.specification-resource.is-split { display: grid; grid-template-columns: minmax(200px, 200px) minmax(0, 1fr); gap: 0 22px; }
.specification-resource.is-split .resource-column + .resource-column { padding-left: 22px; border-left: 1px solid var(--line); }
.specification-resource.has-key-topics .resource-column:nth-child(2) .resource-action { width: 100%; }
.specification-resource.is-split.has-key-topics { grid-template-columns: minmax(200px, 200px) minmax(170px, 170px) minmax(0, 1fr); }
button.resource-action { font-family: inherit; font-size: 0.85rem; font-weight: 650; line-height: inherit; cursor: pointer; }
.resource-column { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.resource-heading { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.resource-action { flex: none; width: 200px; justify-content: center; padding: 7px 12px; font-size: 0.85rem; text-align: center; }
.paper-filters { display: flex; align-items: end; gap: 12px; margin: 18px 0 24px; }
.paper-filters label { display: grid; gap: 5px; min-width: 170px; }
.paper-filters label span { color: var(--text); font-size: 0.76rem; font-weight: 700; }
.paper-filters select { width: 100%; min-height: 42px; padding: 7px 34px 7px 10px; border: 1px solid #b8c2c8; border-radius: 7px; background: #fff; color: var(--text); font: inherit; }
.filter-reset { min-height: 42px; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--green-deep); font: inherit; font-weight: 650; cursor: pointer; }
.filter-reset:hover { background: var(--green-soft); }
.paper-set { display: grid; grid-template-columns: minmax(196px, 0.65fr) minmax(0, 3fr); gap: 18px; align-items: center; padding: 15px 18px; border: 1px solid var(--line); border-bottom: 0; background: #fff; }
.paper-set:first-child { border-radius: 8px 8px 0 0; }
.paper-set:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.paper-series { margin: 0; font-size: 0.94rem; white-space: nowrap; }
.paper-links { display: flex; flex-wrap: wrap; gap: 8px; }
.paper-link { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 11px; border: 1px solid #b9cec6; border-radius: 7px; background: #f8fbf9; color: var(--green-deep); font-size: 0.88rem; font-weight: 650; text-decoration: none; }
.paper-link:hover { border-color: var(--green-deep); background: var(--green-soft); }
.paper-notice { grid-column: 1 / -1; padding: 12px 14px; border-radius: 7px; background: #f4f7f6; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.paper-notice-publisher-error { background: #fff4e5; color: #704c16; }
.paper-notice-title { display: block; margin-bottom: 2px; color: inherit; }
.paper-notice p { margin: 0; }
.paper-notice-link { display: inline-block; margin-top: 5px; color: var(--green-deep); font-weight: 700; }
.papers-error { padding: 22px; border-radius: 8px; background: #fff4e5; color: #704c16; }

@media (max-width: 760px) {
  .papers-page.wrap { width: min(100% - 32px, 1380px); }
  /* Keep the document pane tall enough for its sticky paper heading and a tappable resource button. */
  .papers-workspace { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; min-height: 620px; }
  .papers-content, .results-scroll-cue { grid-column: 1; grid-row: 2; }
}
@media (max-width: 560px) {
  .selection-heading { display: block; }
  .selection-heading > p { margin-top: 6px; }
  .paper-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .paper-filters label { min-width: 0; }
  .filter-reset { grid-column: 1 / -1; justify-self: start; }
  .paper-set { grid-template-columns: 1fr; gap: 10px; padding: 15px; }
  .paper-series { white-space: normal; }
  .paper-links { display: grid; grid-template-columns: 1fr; }
  .paper-link { justify-content: center; min-height: 44px; text-align: center; }
  .specification-copy { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* Upcoming exams column (Past Papers/EXAM-TIMETABLES.md). */
.upcoming-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; }
/* The countdown uses the gap before the timetable link; narrow rows wrap rather than overflow. */
.upcoming-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-size: 0.9rem; }
.upcoming-item .resource-action { flex: 0 0 auto; width: auto; }
.upcoming-part { white-space: nowrap; }
.upcoming-detail { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.upcoming-series { font-weight: 650; color: var(--green-deep); }
.upcoming-when { color: var(--muted); font-size: 0.86rem; }

/* Keywords: the same panel as Key Topics, holding a glossary instead of a ranking. A definition list
   keeps the term and its mark-scheme answer associated for screen readers as well as visually.
   A ruled list — keyword, definition, marks — matching the PDF. Cards of different heights read as
   disorganised (owner, 19 Sep 2026); every row now shares the same columns and rules. */
.keywords-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
.keywords-context { margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 0.86rem; font-weight: 650; }
/* The source note and column heads stay pinned while the rows scroll beneath them. The negative offsets
   cover the body's 18px top padding (sticky pins at the padding edge) so no row shows above it. */
.keywords-sticky { position: sticky; top: -18px; z-index: 2; margin-top: -18px; padding-top: 18px; background: var(--surface); }
.keywords-source { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--green-deep); border-radius: 0 7px 7px 0; background: var(--green-soft); color: var(--text); font-size: 0.9rem; font-weight: 700; }
.keywords-head, .keywords-list .keyword-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 70px; gap: 16px; align-items: baseline; }
.keywords-head { padding: 0 0 7px; border-bottom: 2px solid var(--green-deep); color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.keywords-head span:last-child, .keywords-list .keyword-marks { text-align: right; }
.keywords-list { margin: 0; padding: 0; }
.keywords-list .keyword-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.keywords-list .keyword-term { margin: 0; font-weight: 700; color: var(--green-deep); text-transform: capitalize; }
.keywords-list .keyword-answer { margin: 0; line-height: 1.45; }
.keywords-list .keyword-marks { margin: 0; color: var(--muted); font-size: 0.78rem; font-weight: 650; white-space: nowrap; }
/* The board's "(1)" markers, kept but quietened, and held to the word before so one never wraps alone. */
.mark-held { white-space: nowrap; }
.mark-tag { display: inline-block; min-width: 1.35em; margin: 0 2px; padding: 0 5px; border-radius: 5px; background: #eef1f3; color: var(--muted); font-size: 0.72rem; font-weight: 700; line-height: 1.5; text-align: center; vertical-align: 1px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The page's own "Scroll for more" cue, laid over the foot of the list. */
.keywords-panel .key-topics-head { grid-row: 1; }
.keywords-panel .key-topics-body, .keywords-scroll-cue, .test-scroll-cue, .key-topics-scroll-cue, .questions-scroll-cue { grid-column: 1; grid-row: 2; }
.keywords-panel .key-topics-actions { grid-row: 3; }
/* Download CSV sits beside Download PDF as the calculators' secondary export button does. */
.key-topics-download.is-secondary { background: #fff; color: var(--green-deep); }
.key-topics-download.is-secondary:hover { background: var(--green-soft); }

/* Test yourself: flashcards from the keywords, in the Keywords panel's footprint. The mode switch is the
   Tax Simulator's segmented toggle (app.css .allocation-format-toggle): a grey track, the chosen option
   a raised white pill. The card flips in 3D; with reduced motion it simply swaps faces. */
.test-panel { grid-template-rows: auto minmax(0, 1fr); }
.test-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.test-toolbar [data-testid="test-shuffle"] { margin-left: auto; }
.test-play-link { display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid var(--green-deep); border-radius: 7px; color: var(--green-deep); font-size: .88rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.test-play-link:hover,.test-play-link:focus-visible { background: var(--green-soft); color: var(--green-deep); }
/* Inside Keywords, Test yourself sits at the right-hand end of the source note's row, pinned with it. */
.keywords-source-row { display: flex; align-items: stretch; gap: 12px; margin-bottom: 16px; }
.keywords-source-row .keywords-source { flex: 1 1 auto; margin: 0; }
/* Navy, as the Take-home Pay Calculator's primary export button (app.css .btn-primary, --navy #10233f):
   the site's only other button colour. Green would blend into the green note beside it; red, amber and
   purple already mean tax, National Insurance, student loan and warnings on this site. */
.key-topics-download.keywords-test { flex: none; border-color: #10233f; background: #10233f; box-shadow: 0 3px 10px rgba(16, 35, 63, 0.2); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.key-topics-download.keywords-test:hover { background: #0b1a30; transform: translateY(-1px); box-shadow: 0 6px 15px rgba(16, 35, 63, 0.28); }
.key-topics-download.keywords-test:focus-visible { outline: 2px solid #10233f; outline-offset: 2px; }
.test-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #eef2f3; }
.test-mode { min-height: 38px; padding: 5px 16px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 0.84rem; font-weight: 750; white-space: nowrap; cursor: pointer; }
.test-mode[aria-pressed="true"] { background: #fff; color: var(--green-deep); box-shadow: 0 1px 4px rgba(16, 38, 52, 0.16); }
.test-shuffle, .test-reveal { padding: 5px 14px; border: 1px solid var(--green-deep); border-radius: 999px; background: #fff; color: var(--green-deep); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.test-shuffle:hover, .test-reveal:hover { background: var(--green-soft); }
.test-shuffle[aria-pressed="true"], .test-reveal.is-on { background: var(--green-deep); color: #fff; }
.test-mode:focus-visible, .test-shuffle:focus-visible, .test-reveal:focus-visible, .test-card:focus-visible, .test-nav button:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.test-cards { display: grid; justify-items: center; gap: 12px; max-width: 760px; margin: 0 auto; }
.test-cards[hidden], .test-list[hidden] { display: none; }
.test-count { margin: 0; color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.test-card { display: block; width: 100%; height: clamp(220px, 42vh, 340px); padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: center; cursor: pointer; perspective: 1400px; }
.test-card-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform 0.45s ease; transform-style: preserve-3d; }
.test-card.is-flipped .test-card-inner { transform: rotateY(180deg); }
.test-card.no-motion .test-card-inner { transition: none; }
.test-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 26px clamp(18px, 4vw, 44px); overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.test-back { transform: rotateY(180deg); border-color: #b9cec6; background: #fbfdfc; }
.test-face-label { position: absolute; top: 14px; left: 18px; color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.test-term { color: var(--green-deep); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; line-height: 1.2; text-transform: capitalize; }
.test-marks { color: var(--muted); font-size: 0.84rem; font-weight: 650; }
.test-back-term { color: var(--green-deep); font-size: 0.9rem; font-weight: 800; text-transform: capitalize; }
.test-answer { max-width: 60ch; font-size: clamp(1.02rem, 1.8vw, 1.22rem); line-height: 1.5; }
.test-hint { margin: 0; color: var(--muted); font-size: 0.8rem; text-align: center; }
.test-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.test-nav .key-topics-download { min-width: 130px; }
.test-nav .key-topics-download:disabled { border-color: var(--line); background: #f1f4f3; color: #9aa7a2; cursor: not-allowed; }
.test-list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 14px; }
.test-list-note { margin: 0; color: var(--muted); font-size: 0.86rem; }
.test-rows .keyword-answer .test-reveal { padding: 2px 11px; font-size: 0.74rem; vertical-align: 1px; }
@media (prefers-reduced-motion: reduce) { .test-card-inner { transition: none; } }
@media (max-width: 560px) {
  .keywords-source-row { flex-wrap: wrap; }
  /* Prefixed with the panel so these outrank the Key Topics rules, which come later in this file. */
  .key-topics-panel .topics-head { display: none; }
  .key-topics-panel .topics-list .topic-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .key-topics-panel .topics-list .topics-count { display: none; }
  .key-topics-panel .topic-breakdown { display: block; margin-top: 2px; color: var(--muted); font-size: 0.74rem; font-weight: 500; }
  .test-modes { width: 100%; }
  .test-toolbar { margin-bottom: 12px; }
  .test-card { height: 200px; }
  .test-hint { display: none; }
  .test-nav .key-topics-download { flex: 1 1 0; min-width: 0; width: auto; }
}

/* Key Topics, laid out as Keywords (19 Sep 2026): a pinned block with the plain-words description in the
   emphasised green box, the question choice and colour key on one row, then a ruled list — rank, topic,
   one column per mark value (how many questions of that value), score. Column count follows the data
   through --mark-columns. */
.keywords-source.topics-intro { font-weight: 500; }
/* The plain-words notes as bullet rows, then the disclaimer on its own row in the site's warning amber
   (the notice colours already used on this page and in the calculators: #fff4e5 / #704c16, #d89523 bar),
   so "not a prediction" cannot be missed. Rows, not columns (owner, 19 Sep 2026). */
.topics-sticky { margin-top: 0; padding-top: 0; top: 0; }
.topics-notes { display: grid; gap: 8px; margin: 0 0 14px; }
.topics-intro { margin: 0 0 14px; padding: 10px 14px 10px 32px; font-size: 0.9rem; line-height: 1.45; }
.topics-intro li + li { margin-top: 3px; }
.topics-caveat { margin: 0; padding: 10px 14px; border-left: 3px solid #d89523; border-radius: 0 7px 7px 0; background: #fff4e5; color: #704c16; font-size: 0.9rem; font-weight: 700; }
.topics-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 10px; }
.topics-basis-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; }
.key-topics-basis { margin: 0; color: var(--muted); font-size: 0.8rem; }
.topics-hint { margin: 0; color: var(--green-deep); font-size: 0.82rem; font-weight: 700; }
.topics-head, .topics-list .topic-row { display: grid; grid-template-columns: 34px minmax(160px, 1fr) repeat(var(--mark-columns, 6), minmax(46px, 76px)) 72px; gap: 12px; align-items: center; }
.topics-head { padding: 0 0 7px; border-bottom: 2px solid var(--green-deep); color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
/* Sortable column heads: they keep the heading look, gain a hover state and show ▼/▲ when active. */
.topics-sort { position: relative; display: inline-flex; align-items: center; padding: 2px 0; white-space: nowrap; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.topics-head .topics-count, .topics-head .topics-score { justify-content: flex-end; justify-self: end; }
.topics-head .topics-name { justify-self: start; }
/* Every sortable head shows a faint ↕ and highlights on hover, so it reads as a control, not a label. */
.topics-sort { margin: -3px -6px; padding: 3px 6px; border-radius: 5px; }
.topics-sort:hover { background: var(--green-soft); }
.topics-sort:hover, .topics-sort.is-active { color: var(--green-deep); }
.topics-sort:not(.is-active) .topics-sort-arrow { opacity: 0.55; }
.topics-sort:hover .topics-sort-arrow { opacity: 1; }
/* The arrow sits inside the head's hover area; heads never wrap, so a wide one spills into the gap. */
.topics-sort-arrow { margin-left: 4px; font-size: 0.66rem; letter-spacing: 0; }
.topics-sort:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.topics-list { margin: 0; padding: 0; list-style: none; }
.topics-list .topic-item { border-bottom: 1px solid var(--line); }
.topics-list .topic-row { padding: 6px 0; }
.topics-rank, .topics-count, .topics-score { text-align: right; font-variant-numeric: tabular-nums; }
.topics-list .topics-rank { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.topics-list .topics-name { min-width: 0; font-weight: 650; overflow-wrap: break-word; }
.topics-list .topics-count { font-weight: 650; }
.topics-list .topics-count.is-zero { color: #c3cad1; font-weight: 500; }
/* Topic names and counts open the questions behind them, and look it: a topic reads as a green link
   with an arrow, a count as a small outlined button in the page's document-link style (.paper-link). */
.topic-toggle, .count-toggle { font: inherit; cursor: pointer; }
.topic-toggle { display: flex; flex-wrap: wrap; align-items: baseline; justify-self: start; padding: 2px 0; border: 0; background: none; color: var(--green-deep); text-align: left; text-decoration: underline; text-decoration-color: rgba(10, 107, 82, 0.35); text-underline-offset: 4px; }
.topic-toggle::after { content: "›"; order: 1; margin-left: 6px; font-weight: 800; }
.topic-toggle .topic-breakdown { order: 2; flex-basis: 100%; }
.topic-toggle:hover { text-decoration-color: currentColor; }
.count-toggle { justify-self: end; min-width: 42px; padding: 3px 10px; border: 1px solid #b9cec6; border-radius: 7px; background: #f8fbf9; color: var(--green-deep); text-align: center; }
.count-toggle:hover { border-color: var(--green-deep); background: var(--green-soft); }
.topic-toggle:focus-visible, .count-toggle:focus-visible, .questions-chip:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
/* The Questions panel: back to Key topics, the topic, mark-value chips, then each question with its wording
   and its question paper, mark scheme and examiner report. */
.questions-panel { grid-template-rows: auto minmax(0, 1fr); }
.questions-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.questions-topic { margin: 0; color: var(--green-deep); font-size: 1.2rem; font-weight: 800; }
.questions-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.questions-chip { padding: 5px 13px; border: 1px solid #b9cec6; border-radius: 999px; background: #fff; color: var(--green-deep); font-size: 0.82rem; font-weight: 700; }
.questions-chip:hover { border-color: var(--green-deep); background: var(--green-soft); }
.questions-chip[aria-pressed="true"] { border-color: var(--green-deep); background: var(--green-deep); color: #fff; }
.questions-chip-count { font-weight: 600; opacity: 0.6; }
.topic-questions { margin: 0; padding: 0; list-style: none; }
.topic-question { position: relative; margin: 0 0 12px; padding: 16px 18px 28px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
/* The Questions Bank's card (QUESTIONS-BANK.md rules 16 and 32), shared through site/question-card.mjs,
   25 September 2026: the paper and question are links, and the card opens the paper at the question. */
.topic-question-link { color: var(--green-deep); font-weight: 750; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.topic-question-link:hover { text-decoration-thickness: 2px; }
.topic-question-link:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; border-radius: 3px; }
.topic-question-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 10px; vertical-align: middle; }
.topic-question-tag { max-width: 100%; overflow-wrap: anywhere; padding: 2px 8px; border-radius: 999px; background: #edf1ef; color: var(--muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; }
.topic-question-card { cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; }
.topic-question-card:hover { border-color: var(--green-deep); background: #f3faf6; box-shadow: 0 4px 14px rgba(19, 26, 38, 0.07); }
.topic-question-card:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.topic-question-card::after { content: "Open in paper ↗"; position: absolute; right: 16px; bottom: 8px; color: var(--green-deep); font-size: 0.72rem; font-weight: 750; opacity: 0; transition: opacity 0.12s ease; pointer-events: none; }
.topic-question-card:hover::after, .topic-question-card:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .topic-question-card, .topic-question-card::after { transition: none; } }
.topic-question p { margin: 0; }
.topic-question-meta { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.topic-question-text { margin-top: 4px !important; font-size: 1rem; line-height: 1.5; }
.topic-question-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px !important; }
.topic-question-links .paper-link { min-height: 34px; padding: 5px 11px; font-size: 0.82rem; }
.topic-breakdown { display: none; }

/* Key Topics download options: the Take-home Pay Calculator's export dialog (app.css .export-dialog),
   in this page's green. */
.export-dialog { width: min(560px, calc(100vw - 28px)); max-height: min(760px, 90vh); padding: 0; border: 0; border-radius: 16px; color: var(--text); box-shadow: 0 22px 70px rgba(9, 30, 56, 0.25); }
.export-dialog::backdrop { background: rgba(9, 30, 56, 0.42); }
.export-dialog-shell { max-height: min(760px, 90vh); padding: 22px; overflow: auto; }
.export-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.export-dialog-header h2 { margin: 0; color: var(--green-deep); font-size: 1.3rem; }
.export-dialog-header p { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.dialog-close { flex: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #f8fbf9; color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.export-layouts { display: grid; gap: 10px; margin-bottom: 18px; }
.export-choice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #b9cec6; border-radius: 10px; cursor: pointer; }
.export-choice:has(input:checked) { border-color: var(--green-deep); background: var(--green-soft); }
.export-choice input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green-deep); }
.export-choice strong { display: block; color: var(--green-deep); }
.export-choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.84rem; }
.export-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.export-pdf-help { margin: 0 auto 0 0; color: var(--muted); font-size: 0.8rem; }
.dialog-close:focus-visible, .export-choice:has(input:focus-visible) { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* Key Topics: covers the paper documents panel using its exact footprint, as the Tax Diagram's working
   inspector covers its controls card. Choice and action styling adapted from the calculators' export dialog. */
.key-topics-panel { grid-column: 2; grid-row: 1; z-index: 6; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.key-topics-panel[hidden] { display: none; }
.key-topics-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 10px 8px 20px; background: var(--green-deep); color: #fff; }
.key-topics-head h2 { margin: 0; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.key-topics-head h2:focus { outline: none; }
.key-topics-close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-family: inherit; font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer; }
.key-topics-close:hover { background: rgba(255, 255, 255, 0.26); }
/* Full screen sits beside the close button in the green header, in the same light-on-green style. */
.panel-head-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.panel-fullscreen { min-height: 34px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.panel-fullscreen:hover { background: rgba(255, 255, 255, 0.26); }
.panel-fullscreen:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Full screen takes the whole workspace and shows only the open panel, edge to edge. */
.papers-workspace.is-fullscreen { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; height: 100dvh; background: var(--surface); }
.papers-workspace.is-fullscreen > .paper-hierarchy, .papers-workspace.is-fullscreen > .papers-content, .papers-workspace.is-fullscreen > .papers-scroll-cue { display: none; }
.papers-workspace.is-fullscreen > .key-topics-panel { grid-column: 1; grid-row: 1; border: 0; border-radius: 0; box-shadow: none; }
.key-topics-close:focus-visible, .key-topics-download:focus-visible, .key-topics-sets:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.key-topics-close:focus-visible { outline-color: #fff; }
.key-topics-body { min-height: 0; padding: 18px clamp(18px, 3vw, 30px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8ab8a7 #edf5f1; }
.key-topics-sets { max-width: 100%; min-height: 40px; padding: 8px 36px 8px 12px; border: 1px solid #b9cec6; border-radius: 7px; background-color: #fff; color: var(--green-deep); font: inherit; font-size: 0.86rem; font-weight: 650; cursor: pointer; }
.key-topics-basis { margin: 0 0 10px; color: var(--muted); font-size: 0.8rem; }
.rrri-value { min-width: 50px; padding: 3px 7px; border-radius: 6px; font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.rrri-high { background: #e8621c; color: #2b1a05; }
.rrri-raised { background: #f7a03c; color: #2b1a05; }
.rrri-average { background: #fbd98c; color: #3a2a06; }
.rrri-lower { background: #dce9f8; color: #1f3550; }
.key-topics-legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 0.78rem; }
.key-topics-legend span { display: inline-flex; align-items: center; gap: 6px; }
.key-topics-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.key-topics-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; padding: 12px clamp(18px, 3vw, 30px); border-top: 1px solid var(--line); background: var(--surface); }
.key-topics-help { margin: 0; color: var(--muted); font-size: 0.78rem; }
.key-topics-error { flex-basis: 100%; margin: 0; padding: 8px 10px; border-radius: 7px; background: #fff4e5; color: #704c16; font-size: 0.82rem; }
.key-topics-error[hidden] { display: none; }
.key-topics-download { min-height: 40px; padding: 7px 16px; border: 2px solid var(--green-deep); border-radius: 8px; background: var(--green-deep); color: #fff; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.key-topics-download:hover { background: #075a45; }

@media (max-width: 760px) {
  .key-topics-panel { grid-column: 1; grid-row: 2; }
  /* Pinned, the description, choice and key would leave almost no room for the list on a phone. */
  .topics-sticky { position: static; }
}

/* Measured, not guessed: the three columns need the exams row to hold "13 May 2027 · Afternoon · 1h 30m"
   and its button on one line. That holds down to a 1360px viewport and breaks at 1320px, so below 1340px
   the columns stack full width instead — where the row has room again — rather than squeezing the exams
   column until its text wraps. */
@media (max-width: 1440px) {
  .specification-resource.is-split, .specification-resource.is-split.has-key-topics { grid-template-columns: 1fr; gap: 14px; }
  .specification-resource.is-split .resource-column + .resource-column {
    padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .resource-action { width: 100%; min-height: 44px; }
  .key-topics-sets { width: 100%; }
  .key-topics-actions { justify-content: stretch; }
  .key-topics-download { width: 100%; min-height: 44px; }
  .keywords-head { display: none; }
  .keywords-list .keyword-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .keywords-list .keyword-answer { grid-column: 1 / -1; grid-row: 2; }
}

/* Anchor guidance above the panel: it grows upward without moving the workspace.
   Limit it to the heading and top padding; phones reserve a compact scrollable row. */
.papers-heading { position: relative; display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); align-items: center; gap: 24px; margin-bottom: 26px; }
.exam-countdown { flex: 0 0 auto; padding: 4px 8px; border-radius: 6px; background: #fff4e5; color: #704c16; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.upcoming-detail { flex-basis: 160px; }
/* Kept for a future restoration; hidden controls take no space and cannot receive focus. */
.study-downloads[hidden] { display: none; }
.topics-explanation { margin-left: auto; font-family: inherit; line-height: inherit; display: inline-flex; align-items: center; gap: 10px; padding: 7px 11px; border: 1px solid #b9cec6; border-radius: 7px; color: var(--green-deep); background: #fff; font-size: 0.86rem; font-weight: 650; cursor: pointer; list-style: none; }
.topics-explanation::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); }
.topics-explanation[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.topics-view-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.topics-fullscreen-hint { padding: 7px 11px; border: 0; border-left: 3px solid #d89523; border-radius: 0 7px 7px 0; background: #fff4e5; color: #704c16; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.topics-fullscreen-hint[hidden], .topics-head[hidden], .topics-list[hidden], .topics-matrix-scroll[hidden] { display: none; }
.topics-matrix-scroll { max-width: 100%; overflow-x: auto; padding-bottom: 12px; }
.topics-matrix { border-collapse: separate; border-spacing: 0; font-size: 0.86rem; text-align: center; }
.topics-matrix th, .topics-matrix td { min-width: 138px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.topics-matrix thead { background: #f5faf7; }
.topics-matrix tr > :first-child { position: sticky; left: 0; z-index: 1; min-width: 150px; background: #f5faf7; text-align: left; }
.matrix-topic, .matrix-count { border: 0; background: none; color: var(--green-deep); font: inherit; font-weight: 650; cursor: pointer; }
.matrix-topic { text-align: left; overflow-wrap: anywhere; }
.matrix-count { min-width: 44px; min-height: 38px; padding: 4px 8px; border: 1px solid #b9cec6; border-radius: 7px; }
.matrix-count:hover, .matrix-topic:hover { background: var(--green-soft); }
.matrix-note { position: sticky; left: 0; margin: 10px 0 0; color: var(--muted); font-size: 0.78rem; }
.topics-matrix-scroll:focus-visible, .matrix-count:focus-visible, .matrix-topic:focus-visible, .topics-explanation:focus-visible, .topics-fullscreen-hint:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
@media (max-width: 760px) {
  .papers-heading { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 88px; gap: 16px; }
}

/* Navigation stays reachable while the activity or question list scrolls underneath. */
.study-sticky { position: sticky; top: -18px; z-index: 3; margin-top: -18px; padding-top: 18px; background: var(--surface); max-height: min(60dvh, 60%); overflow: auto; }
.test-toolbar .test-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.keyword-match-clue { margin: 8px 0 14px; padding: 18px 22px; border-left: 4px solid #df981f; border-radius: 0 10px 10px 0; background: #fff4e5; color: #704c16; }
.keyword-match-label { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.keyword-match-definition { margin: 0; font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1.35; font-weight: 700; }
@media(max-width:600px) { .keyword-match-clue { padding: 12px 14px; } }
.keyword-match-feedback { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; padding-bottom: 12px; }
.keyword-match-feedback p { margin: 0; color: var(--green-deep); }
.keyword-match-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 12px 0; }
.keyword-match-choice { min-height: 44px; padding: 10px 12px; border: 1px solid #b9cec6; border-radius: 7px; background: #fff; color: var(--green-deep); font: inherit; font-weight: 650; text-transform: capitalize; cursor: pointer; }
.keyword-match-choice:hover:not(:disabled) { background: var(--green-soft); }
.keyword-match-choice.is-correct { background: var(--green-deep); color: #fff; }
.keyword-match-choice.is-incorrect { color: #704c16; border-color: #d89523; background: #fff4e5; }
.keyword-match-options[hidden], .keyword-match-prompt[hidden] { display: none; }
.keyword-match-choice:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

.key-topics-body:has(.study-sticky) { scroll-padding-top: var(--study-sticky-height, 100px); scroll-padding-bottom: 16px; }

.keyword-match-feedback { min-height: 54px; }
.keyword-match-feedback [data-testid="match-feedback"] { margin: 0; padding: 9px 14px; border: 1px solid transparent; border-radius: 999px; font-weight: 650; font-size: .95rem; visibility: hidden; }
.keyword-match-feedback [data-testid="match-feedback"].is-visible { visibility: visible; }
.keyword-match-feedback [data-outcome="incorrect"] { color: #8c2540; background: #fff0f3; border-color: #f0c3ce; }
.keyword-match-feedback [data-outcome="correct"] { color: #09634c; background: #e7f7ee; border-color: #abd6c0; }
.keyword-match-feedback [data-outcome="incorrect"]::before { content: "↻ "; }
.keyword-match-feedback [data-outcome="correct"]::before { content: "✓ "; }

.topics-matrix .matrix-series-link { color:var(--green-deep);text-decoration:underline;text-decoration-color:#a7c9bd;text-underline-offset:4px; }
.topics-matrix .matrix-series-link:hover { text-decoration-color:currentColor; }
.topics-matrix .matrix-series-link:focus-visible { outline:2px solid var(--green-deep);outline-offset:3px;border-radius:2px; }

/* 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. */
.papers-workspace.is-page-fullscreen { position: fixed; inset: 0; z-index: 10000; height: 100dvh; }
html.has-page-fullscreen, html.has-page-fullscreen body { overflow: hidden; }