.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-page > h1 { margin: 0 0 26px; 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); }
.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 { grid-column: 2; grid-row: 1; padding: clamp(20px, 3vw, 34px); }
.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); }
.selection-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.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.
   Both columns share the same label style and the same button width so the row reads as one unit. */
.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.is-split.has-key-topics { grid-template-columns: minmax(200px, 200px) minmax(222px, 222px) 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); }
  .papers-workspace { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
  .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 timetable button sits beside its exam, and must stay there at every width.
   It used to be a wrapping row: the button was pushed onto a second line whenever the detail text was
   wide enough, so "13 May 2027 · Afternoon · 1h 30m" wrapped while "11 Nov 2026 · Morning · 1h 30m" did
   not, and the two buttons ended up on different lines and different edges. Measured, the row needs
   about 429px and only had 439px at the widest — it never reliably fitted.
   The row no longer wraps. The button keeps its size, and the detail text is the part allowed to shrink
   and wrap inside its own box, so the button is always on the right and the rows always align, however
   long the series name or duration is. */
.upcoming-item { display: flex; flex-wrap: nowrap; 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; }
/* 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-notes { display: grid; gap: 8px; margin: 0 0 14px; }
.topics-notes ul { margin: 0; padding: 10px 14px 10px 32px; font-size: 0.9rem; line-height: 1.45; }
.topics-notes 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 { padding: 14px 0; border-bottom: 1px solid var(--line); }
.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 input: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 { display: flex; flex-wrap: wrap; gap: 8px; }
.key-topics-sets label { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid #b9cec6; border-radius: 7px; background: #fff; font-size: 0.86rem; font-weight: 650; cursor: pointer; }
.key-topics-sets label:has(input:checked) { border-color: var(--green-deep); background: var(--green-soft); color: var(--green-deep); }
.key-topics-sets input { accent-color: var(--green-deep); }
.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: #fff; }
.rrri-raised { background: #f7a03c; color: #2b1a05; }
.rrri-average { background: #fbd98c; color: #3a2a06; }
.rrri-lower { background: #dce9f8; color: #1f3550; }
.key-topics-legend { 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: 1340px) {
  .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 label { flex: 1 1 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; }
}