/* btl.education: visitor features added 5 October 2026, from the feature picker. Display settings (light and dark, page
   colour, reading comfort, the reading ruler), search, the contents bar, section links, sharing, the shortlist, the
   licence chooser and FAQ, the VAT switch, the three levels switch, the scheme calendar, the exam dates and printing.
   Loaded after site.css and live.css. Colours come only from tokens, so every rule works in each theme and page colour.
   Purple stays the only accent and there is no red anywhere. */

/* --- tokens: light, the page colours, then dark ------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --on-violet: #FFFFFF;
  --band: #4A2545;            /* footer band */
  --btn-line: #CFC2E4;
  --soft-panel: #FBF9FD;
  --head-band: #FCFAF5;
  --link-line: rgba(110, 68, 168, .45);
  --quote-rule: rgba(110, 68, 168, .85);
  --placeholder: #8F8197;
  --control-line: #8A7A96;
  --shade: rgba(33, 18, 43, .34);
  --mark-bg: #F4D67B;
  --mark-fg: #21122B;
  --backdrop: rgba(33, 18, 43, .55);
}
:root[data-tint="lilac"] { --cream: #F3F0F8; --lilac: #FAF5E9; }
:root[data-tint="blue"] { --cream: #EBF2F8; --blue: #F3F0F8; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cream: #1D171F; --paper: #2A2230; --lilac: #241C29; --blue: #1E2833;
    --ink: #F1EAF4; --aubergine: #EAD9F0; --violet: #BFA2EE; --violet-dark: #D3BEF5; --violet-soft: #3A2C4F;
    --mid: #BFAFC8; --line: #3B3142; --line-strong: #4A3F52; --rule: #4A4560;
    --on-violet: #1A1020; --band: #120C15; --btn-line: #5A4A6E; --soft-panel: #2F2638; --head-band: #241C29;
    --link-line: rgba(191, 162, 238, .5); --quote-rule: #BFA2EE; --placeholder: #A193A9; --control-line: #8C7C98;
    --shade: rgba(0, 0, 0, .55); --backdrop: rgba(0, 0, 0, .6);
    --page-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 6px 20px rgba(0, 0, 0, .45);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 10px rgba(0, 0, 0, .25);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .45);
  }
  :root:not([data-theme="light"])[data-tint="lilac"] { --cream: #1B1726; }
  :root:not([data-theme="light"])[data-tint="blue"] { --cream: #141B24; }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --cream: #1D171F; --paper: #2A2230; --lilac: #241C29; --blue: #1E2833;
  --ink: #F1EAF4; --aubergine: #EAD9F0; --violet: #BFA2EE; --violet-dark: #D3BEF5; --violet-soft: #3A2C4F;
  --mid: #BFAFC8; --line: #3B3142; --line-strong: #4A3F52; --rule: #4A4560;
  --on-violet: #1A1020; --band: #120C15; --btn-line: #5A4A6E; --soft-panel: #2F2638; --head-band: #241C29;
  --link-line: rgba(191, 162, 238, .5); --quote-rule: #BFA2EE; --placeholder: #A193A9; --control-line: #8C7C98;
  --shade: rgba(0, 0, 0, .55); --backdrop: rgba(0, 0, 0, .6);
  --page-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 6px 20px rgba(0, 0, 0, .45);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 10px rgba(0, 0, 0, .25);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .45);
}
:root[data-theme="dark"][data-tint="lilac"] { --cream: #1B1726; }
:root[data-theme="dark"][data-tint="blue"] { --cream: #141B24; }

/* the few colours site.css and live.css set directly, moved onto tokens (the light values are unchanged) */
.skip, .skip:focus, .btn-primary, .btn-primary:hover, .basket-link .count { color: var(--on-violet); }
.btn-secondary { border-color: var(--btn-line); }
.licence.main, .dl-consent { background: var(--soft-panel); }
.sequence h3, .table-wrap thead th { background: var(--head-band); }
.kh-body a, .policy-body a { text-decoration-color: var(--link-line); }
.kh-body blockquote { border-left-color: var(--quote-rule); }
.field input::placeholder { color: var(--placeholder); }
.site-footer, .dark, .notice { background: var(--band); }
body, .site-header, .jump, .mobile-nav, .vhead { transition: background-color .2s ease; }
@media (prefers-reduced-motion: reduce) { body, .site-header, .jump, .mobile-nav, .vhead { transition: none; } }

/* --- reading comfort: more space between lines, letters and words (British Dyslexia Association style guide) ------- */
:root[data-comfort="on"] body { letter-spacing: .03em; word-spacing: .12em; font-variant-ligatures: none; }
:root[data-comfort="on"] main p, :root[data-comfort="on"] main li, :root[data-comfort="on"] main dd { line-height: 1.85; text-align: left; }
:root[data-comfort="on"] main p { margin-bottom: 1.25em; }
:root[data-comfort="on"] .lede { max-width: 32em; }
:root[data-comfort="on"] .kh-body, :root[data-comfort="on"] .policy-body { line-height: 1.9; }
:root[data-comfort="on"] h1, :root[data-comfort="on"] h2, :root[data-comfort="on"] h3 { letter-spacing: .015em; line-height: 1.3; }
:root[data-comfort="on"] em, :root[data-comfort="on"] i { font-style: normal; font-weight: 700; }

/* --- reading ruler ------------------------------------------------------------------------------------------------ */
.ruler { display: none; }
:root[data-ruler="on"] .ruler { display: block; }
.ruler-shade { position: fixed; left: 0; right: 0; background: var(--shade); pointer-events: none; z-index: 45; }
.ruler-top { top: 0; height: 30vh; }
.ruler-bottom { bottom: 0; top: calc(30vh + 3.2em); }
.ruler-edge { position: fixed; left: 0; right: 0; height: 2px; background: var(--violet); opacity: .7; pointer-events: none; z-index: 45; }

/* --- header tools: search and display ------------------------------------------------------------------------------ */
.site-header .tools { display: flex; align-items: center; gap: 8px; flex: none; }
.tool-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-btn);
  border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; flex: none; }
.tool-btn svg { width: 20px; height: 20px; }
.tool-btn:hover, .tool-btn[aria-expanded="true"] { color: var(--violet); border-color: var(--violet); }
.tool-btn.shortlist-link { position: relative; text-decoration: none; }
.tool-btn.shortlist-link[hidden] { display: none; }
.tool-btn.shortlist-link[aria-current] { color: var(--violet); border-color: var(--violet); background: var(--violet-soft); }
.shortlist-link .count { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--violet); color: var(--on-violet);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--cream); }
.shortlist-link .count:empty { display: none; }
@media (max-width: 1160px) { .site-header > .wrap { gap: 16px; } .nav a { padding: 10px 10px; } }
.nav a { white-space: nowrap; }
/* the header gained search, display and shortlist buttons, so it needs a little more room before the menu takes over:
   tighter spacing first, with the basket showing its icon and count, then the phone menu from 986px down */
@media (min-width: 987px) and (max-width: 1080px) {
  .site-header > .wrap { gap: 12px; }
  .nav a { padding: 10px 8px; }
  .site-header .basket-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 986px) {
  :root { --header-h: 68px; }
  .site-header .nav, .site-header .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header .basket-link + .header-cta + .menu-toggle { margin-left: 0; }
  .brand img { width: 48px; height: 48px; }
  .mobile-nav { border-top: 1px solid var(--line); background: var(--cream); }
  .mobile-nav.open { display: block; }
  .mobile-nav .wrap { padding-top: 4px; padding-bottom: 24px; }
  .mobile-nav nav { display: grid; }
  .mobile-nav nav a { color: var(--ink); font-size: 20px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .mobile-nav nav a[aria-current="page"] { color: var(--violet); }
  .mobile-nav .btn { margin-top: 20px; width: 100%; }
}
@media (max-width: 986px) {
  .site-header .tools { margin-left: auto; }
  .site-header .basket-link { margin-left: 0; }
  .site-header .shortlist-link { display: none; }
}
/* phones: smaller tool buttons, and below 375px the menu button shows its icon only */
@media (max-width: 480px) {
  .site-header > .wrap { gap: 8px; }
  .site-header .tools { gap: 6px; }
  .site-header .tool-btn { width: 40px; height: 40px; }
  .menu-toggle { padding: 0 12px; }
}
@media (max-width: 374px) {
  .menu-toggle { gap: 0; }
  .menu-toggle .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.vhead .tools .tool-btn { width: 40px; height: 40px; }
.vhead .display-panel { right: var(--gutter); }

/* the Display panel opens under the header */
.display-panel { position: absolute; right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); top: calc(100% + 8px);
  width: min(380px, calc(100vw - 2 * var(--gutter))); background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 20px 20px 18px; z-index: 40; }
.display-panel[hidden] { display: none; }
.display-panel h2 { font-size: 22px; line-height: 1.2; margin: 0 0 4px; }
.display-panel .panel-note { color: var(--mid); font-size: 15px; margin: 0 0 14px; }
.setting { padding: 12px 0; border-top: 1px solid var(--line); }
.setting-label { display: block; font-weight: 700; font-size: 15px; color: var(--aubergine); margin-bottom: 8px; }
.setting-help { display: block; color: var(--mid); font-size: 14px; line-height: 1.45; margin-top: 8px; }
.panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mid); }

/* segmented buttons, shared by the panel, the VAT switch, the levels switch and the shortlist */
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1.5px solid var(--control-line); border-radius: var(--radius-btn); overflow: hidden; background: var(--paper); }
.seg button { font: 700 15px/1.2 var(--body); min-height: 40px; padding: 0 14px; border: 0; border-left: 1.5px solid var(--control-line); background: transparent;
  color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button:first-child { border-left: 0; }
.seg button:hover { background: var(--violet-soft); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--violet); color: var(--on-violet); }
.seg button:focus-visible { outline-offset: -4px; border-radius: 4px; }
.swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--control-line); flex: none; }
.swatch.cream { background: #FAF5E9; }
.swatch.lilac { background: #F3F0F8; }
.swatch.blue { background: #EBF2F8; }

/* --- search ------------------------------------------------------------------------------------------------------- */
.search-dialog { width: min(720px, calc(100vw - 24px)); max-height: min(84vh, 760px); margin: 8vh auto auto; padding: 0; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-2); overflow: hidden; }
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog::backdrop { background: var(--backdrop); }
.search-head { display: flex; gap: 10px; align-items: center; padding: 14px; border-bottom: 1px solid var(--line); }
.search-head svg { width: 20px; height: 20px; color: var(--mid); flex: none; margin-left: 4px; }
.search-head input { flex: 1; min-width: 0; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--cream); color: var(--ink); font: 400 18px/1.3 var(--body); }
.search-head input:focus { outline: 3px solid var(--violet-soft); border-color: var(--violet); }
.search-close { flex: none; }
.search-body { overflow-y: auto; padding: 6px 8px 12px; }
.search-status { color: var(--mid); font-size: 15px; padding: 10px 8px 4px; margin: 0; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results a { display: block; padding: 12px 10px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 400; }
.search-results a:hover, .search-results a:focus-visible { background: var(--violet-soft); color: var(--ink); outline-offset: -3px; }
.sr-kind { display: block; color: var(--violet); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.sr-title { display: block; font-family: var(--head); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--aubergine); }
.sr-section { color: var(--mid); font-family: var(--body); font-weight: 400; font-size: 15px; }
.sr-snip { display: block; color: var(--mid); font-size: 15px; line-height: 1.5; margin-top: 4px; }
.search-dialog mark, .sr-snip mark { background: var(--mark-bg); color: var(--mark-fg); border-radius: 2px; padding: 0 1px; }
.search-tips { color: var(--mid); font-size: 14px; padding: 4px 8px 0; margin: 0; }
.search-tips kbd { font: 700 13px/1 var(--body); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; background: var(--cream); color: var(--ink); }
.search-inline { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; max-width: 560px; }
.search-inline label { flex-basis: 100%; font-weight: 700; color: var(--aubergine); }
.search-inline input { flex: 1 1 240px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 17px; }
.nf-links { margin-top: 36px; }
.nf-links h2 { font-size: 24px; margin-bottom: 12px; }
.nf-links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.nf-links li a { display: inline-block; padding: 6px 0; }

/* --- the contents bar on articles, with the reading progress line ------------------------------------------------- */
.toc-bar { position: sticky; top: var(--header-h); z-index: 20; background: var(--cream); border-bottom: 1px solid var(--line); }
.toc-bar .wrap { position: relative; }
.toc-bar details { position: relative; max-width: 700px; margin: 0 auto; }
.toc-bar summary { display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; list-style: none; font-size: 16px; color: var(--ink); }
.toc-bar summary::-webkit-details-marker { display: none; }
.toc-bar summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 auto; border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(45deg); }
.toc-bar details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.toc-bar .toc-label { font-weight: 700; color: var(--violet); flex: none; }
.toc-bar .toc-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aubergine); }
.toc-bar .toc-current:not(:empty)::before { content: "· "; color: var(--mid); }
.toc-bar ol { position: absolute; left: 0; right: 0; top: 100%; list-style: none; margin: 0; padding: 6px 0; max-height: min(60vh, 460px); overflow-y: auto; background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.toc-bar ol a { display: block; padding: 9px 16px; color: var(--ink); font-weight: 400; font-size: 16px; line-height: 1.4; border-left: 3px solid transparent; }
.toc-bar ol a:hover { background: var(--violet-soft); color: var(--ink); }
.toc-bar ol a[aria-current="location"] { border-left-color: var(--violet); color: var(--violet); font-weight: 700; }
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 100%; background: var(--violet); transform-origin: 0 50%; transform: scaleX(0); }
.jump a[aria-current="location"] { color: var(--on-violet); background: var(--violet); border-color: var(--violet); }
html { scroll-padding-top: calc(var(--header-h) + 72px); }

/* --- section links, sharing, back to top, the toast --------------------------------------------------------------- */
.anchor { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 6px; padding: 0; vertical-align: middle;
  border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--mid); cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.anchor svg { width: 18px; height: 18px; }
h2:hover > .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--violet); background: var(--violet-soft); }
@media (hover: none) { .anchor { opacity: .7; } }
.share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.share:empty { display: none; }
.share .btn svg { width: 18px; height: 18px; }
.to-top { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 35;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-btn); border: 1.5px solid var(--violet);
  background: var(--paper); color: var(--violet); font: 700 15px/1 var(--body); box-shadow: var(--shadow-1); cursor: pointer; }
.to-top svg { width: 16px; height: 16px; }
.to-top[hidden] { display: none; }
@media (max-width: 600px) {
  .to-top { width: 44px; padding: 0; justify-content: center; }
  .to-top span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .to-top svg { width: 20px; height: 20px; }
}
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; max-width: min(460px, calc(100vw - 32px));
  background: var(--aubergine); color: var(--cream); padding: 10px 16px; border-radius: var(--radius-btn); font-size: 15px; font-weight: 700; box-shadow: var(--shadow-2); }
.toast:empty { display: none; }

/* --- pop-up definitions -------------------------------------------------------------------------------------------- */
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: help; text-align: inherit;
  text-decoration: underline dotted; text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.term:hover, .term[aria-expanded="true"] { color: var(--violet); }
/* doubled class: site.css styles every span in some lists and cards, and a definition can open inside one */
.term-tip.term-tip { position: absolute; z-index: 45; width: min(340px, calc(100vw - 32px)); padding: 14px 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-2); font-size: 15px; line-height: 1.55; font-weight: 400;
  letter-spacing: normal; word-spacing: normal; text-align: left; font-family: var(--body); }
.term-tip.term-tip[hidden] { display: none; }
.term-tip .tip-text { display: inline; color: inherit; font-size: inherit; margin: 0; }
.term-tip b { display: block; font-family: var(--head); font-size: 18px; color: var(--aubergine); margin-bottom: 4px; }
.term-tip p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.term-tip a { font-size: 15px; }

/* --- the VAT switch ------------------------------------------------------------------------------------------------- */
.price small.vp-more { margin-left: 0; }
.price .vp small { margin-left: 6px; }
.vat-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; }
.vat-switch[hidden] { display: none; }
.vat-switch .vat-label { font-size: 15px; font-weight: 700; color: var(--mid); }
.vat-switch .seg button { min-height: 36px; padding: 0 12px; font-size: 14px; }

/* --- licence chooser and licence questions --------------------------------------------------------------------------- */
.chooser { max-width: 920px; margin: 0 0 28px; }
.chooser fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.chooser legend { font-family: var(--head); font-size: 22px; font-weight: 700; color: var(--aubergine); padding: 0; margin-bottom: 14px; }
.chooser .options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.chooser label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper); cursor: pointer; font-size: 16px; line-height: 1.4; }
.chooser label:hover { border-color: var(--violet); }
.chooser input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--violet); flex: none; }
/* drawn radios and ticks, so they read clearly on the light and the dark pages alike */
.chooser input[type="radio"], .cal-days input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center;
  border: 2px solid var(--control-line); background: var(--paper); cursor: pointer; }
.chooser input[type="radio"] { border-radius: 50%; }
.chooser input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--violet); transform: scale(0); }
.chooser input[type="radio"]:checked { border-color: var(--violet); }
.chooser input[type="radio"]:checked::before { transform: scale(1); }
.cal-days input[type="checkbox"] { border-radius: 4px; }
.cal-days input[type="checkbox"]::before { content: ""; width: 9px; height: 5px; margin-top: -2px; border: solid var(--on-violet); border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); }
.cal-days input[type="checkbox"]:checked { background: var(--violet); border-color: var(--violet); }
.cal-days input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
.chooser input:focus-visible, .cal-days input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
@media (forced-colors: active) {
  .chooser input[type="radio"], .cal-days input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }
  .chooser input[type="radio"]::before, .cal-days input[type="checkbox"]::before { display: none; }
}
.chooser label:has(input:checked) { border-color: var(--violet); background: var(--soft-panel); }
.chooser .answer { margin-top: 16px; padding: 16px 18px; border-left: 4px solid var(--violet); background: var(--soft-panel); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.chooser .answer[hidden] { display: none; }
.chooser .answer p { margin: 0 0 10px; }
.chooser .answer .actions { margin-top: 12px; }
.qa { max-width: 860px; margin-top: 40px; }
.qa h3 { font-size: 24px; margin-bottom: 8px; }
.policy-qa .qa { margin-top: 0; }
.policy-qa h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 40px 0 12px; }
.qa details { border-top: 1px solid var(--line-strong); }
.qa details:last-of-type { border-bottom: 1px solid var(--line-strong); }
.qa summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 700; color: var(--aubergine); font-size: 18px; line-height: 1.4; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font: 400 26px/1 var(--body); color: var(--violet); }
.qa details[open] summary::after { content: "–"; }
.qa details p { margin: 0 0 18px; max-width: 46em; }
.qa .qa-more { margin-top: 16px; font-size: 16px; }
.ask-school { margin-top: 20px; font-size: 16px; color: var(--mid); }
.ask-school a { white-space: nowrap; }

/* --- three levels switch on the scheme pages ------------------------------------------------------------------------ */
.levels-switch .seg { margin-bottom: 24px; }
.levels-switch .seg button { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 16px; min-height: 52px; text-align: left; }
.levels-switch .seg small { font-weight: 400; font-size: 13px; opacity: .9; }
@media (max-width: 560px) {
  .levels-switch .seg { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .levels-switch .seg button { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 48px;
    border-left: 0; border-top: 1.5px solid var(--control-line); }
  .levels-switch .seg button:first-child { border-top: 0; }
}
.level-panel { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.level-panel + .level-panel { margin-top: 40px; }
.levels-switch.js .level-panel + .level-panel { margin-top: 0; }
.level-panel[hidden] { display: none; }
.level-panel .shot { display: block; border-radius: 2px; overflow: hidden; background: #fff; box-shadow: var(--page-shadow); }
.level-panel .shot img { width: 100%; }
.level-panel h3 { font-size: 26px; }
.level-panel .aim { color: var(--violet); font-weight: 700; margin: 4px 0 14px; }
@media (max-width: 760px) { .level-panel { grid-template-columns: minmax(0, 1fr); } .level-panel .shot { max-width: 420px; } }

/* --- the scheme calendar ------------------------------------------------------------------------------------------- */
.calendar-card { margin-top: 28px; max-width: 920px; }
.calendar-card h3 { margin-bottom: 6px; }
.calendar-card > p { color: var(--mid); font-size: 16px; }
.cal-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; margin-top: 18px; align-items: start; }
.cal-form label, .cal-form legend { font-weight: 700; font-size: 15px; color: var(--aubergine); display: block; margin-bottom: 6px; padding: 0; }
.cal-form input[type="date"] { min-height: 46px; width: 100%; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper);
  color: var(--ink); font: inherit; font-size: 16px; }
.cal-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cal-days { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-days label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; margin: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-btn);
  font-weight: 400; font-size: 15px; color: var(--ink); cursor: pointer; background: var(--paper); }
.cal-days input { accent-color: var(--violet); width: 18px; height: 18px; margin: 0; flex: none; }
.cal-days label:has(input:checked) { border-color: var(--violet); background: var(--soft-panel); }
.cal-help { color: var(--mid); font-size: 14px; margin-top: 6px; }
.cal-out { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.cal-summary { margin: 0; font-size: 16px; color: var(--ink); }

/* --- exam dates on the revision packs page ------------------------------------------------------------------------- */
.exam-dates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.exam { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.exam .paper-name { font-family: var(--head); font-size: 20px; font-weight: 700; color: var(--aubergine); line-height: 1.3; }
.exam .paper-what { color: var(--mid); font-size: 15px; line-height: 1.45; }
.exam .when { margin-top: 10px; font-weight: 700; }
.exam .length { color: var(--mid); font-size: 15px; }
.exam .left { margin-top: 10px; font-family: var(--head); font-size: 30px; line-height: 1.1; color: var(--violet); font-variant-numeric: tabular-nums; }
.exam .left:empty { display: none; }
.exam .left small { display: block; font-family: var(--body); font-size: 14px; color: var(--mid); font-weight: 700; }
.exam-note { margin-top: 18px; color: var(--mid); font-size: 15px; max-width: 52em; }
@media (max-width: 1000px) { .exam-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .exam-dates { grid-template-columns: minmax(0, 1fr); } }

/* --- the shortlist --------------------------------------------------------------------------------------------------- */
.save-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-btn); border: 1.5px solid var(--btn-line);
  background: var(--paper); color: var(--violet); font: 700 15px/1.1 var(--body); cursor: pointer; white-space: nowrap; }
.save-btn svg { width: 16px; height: 16px; }
.save-btn:hover { border-color: var(--violet); }
.save-btn[aria-pressed="true"] { background: var(--violet-soft); border-color: var(--violet); }
.save-btn[aria-pressed="true"] .when-off, .save-btn[aria-pressed="false"] .when-on { display: none; }
.licence .save-btn { margin-top: 8px; }
/* site.css styles every span in a licence card as its label; prices and buttons keep their own look */
.licence .price .vp, .licence .save-btn span { display: inline; font-size: inherit; color: inherit; margin-bottom: 0; }
.plan .actions .save-btn { min-height: 48px; }
.slist { list-style: none; margin: 0; padding: 0; }
.slist li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding: 16px 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); }
.slist li + li { margin-top: 12px; }
.slist .s-name { font-weight: 700; color: var(--aubergine); }
.slist .s-name a { color: inherit; }
.slist .s-price { font-family: var(--head); font-size: 20px; color: var(--aubergine); white-space: nowrap; }
.slist .s-price small { font-family: var(--body); font-size: 13px; color: var(--mid); margin-left: 4px; }
.slist .btn-text { min-height: 36px; font-size: 15px; background: transparent; border: 0; }
.slist-actions { margin-top: 24px; }
.slist-note { margin-top: 18px; color: var(--mid); font-size: 15px; }
.slist-empty .actions { margin-top: 20px; }

/* --- read next at the end of an article ---------------------------------------------------------------------------- */
.kh-next { padding-top: 40px; padding-bottom: clamp(64px, 8vw, 104px); }
.kh-next h2 { font-size: 24px; margin-bottom: 16px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.kh-next .next-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kh-next .next-cards a { display: block; padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 400; }
.kh-next .next-cards a:hover { border-color: var(--violet); }
.kh-next .next-cards b { display: block; font-family: var(--head); font-size: 19px; line-height: 1.3; color: var(--aubergine); margin-bottom: 6px; }
.kh-next .next-cards span { color: var(--mid); font-size: 15px; line-height: 1.5; }
.kh-next h3 { font-size: 19px; margin: 28px 0 8px; }
.kh-next ul { margin: 0; padding-left: 1.2em; }
.kh-next li { margin-bottom: 6px; }
.kh-next .kh-up { margin-top: 20px; }
.kh-section { scroll-margin-top: 0; } /* html scroll-padding already clears the header and the jump bar */
.kh-next li::marker { color: var(--violet); }
@media (max-width: 640px) { .kh-next .next-cards { grid-template-columns: minmax(0, 1fr); } }

/* --- moving between pages --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
}

/* --- printing: black on white, the web address after each link, nothing to click ----------------------------------- */
@media print {
  :root, :root[data-theme], :root[data-tint] {
    color-scheme: light; --cream: #FFFFFF; --paper: #FFFFFF; --lilac: #FFFFFF; --blue: #FFFFFF; --ink: #000000; --aubergine: #21122B;
    --violet: #4B2A7A; --mid: #3D3343; --line: #BBBBBB; --line-strong: #999999; --rule: #BBBBBB;
  }
  body { background: #fff; color: #000; font-size: 11.5pt; letter-spacing: normal; word-spacing: normal; }
  .site-header, .mobile-nav, .jump, .toc-bar, .site-footer, .share, .tools, .display-panel, .search-dialog, .to-top, .toast, .anchor, .vat-switch,
  .save-btn, .chooser, .calendar-card, .levels-switch .seg, .ruler, .kh-next, .basket-link, .buy-select, .actions, .term-tip, .skip { display: none !important; }
  .level-panel[hidden] { display: grid !important; }
  .section, .page-head, .kh-head { padding-top: 12pt; padding-bottom: 12pt; }
  .section.tint { background: none; }
  h1 { font-size: 26pt; } h2 { font-size: 18pt; } h3 { font-size: 13pt; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  p, li, dd { orphans: 3; widows: 3; }
  figure, .kh-model, .kh-level, img, .card, .qa details, .exam { break-inside: avoid; page-break-inside: avoid; }
  .qa details > p { display: block; }
  .kh-body a, .policy-body a, .kh-head a, .qa a { color: #000; text-decoration: underline; }
  .kh-body a[href^="/"]::after, .policy-body a[href^="/"]::after, .qa a[href^="/"]::after { content: " (btl.education" attr(href) ")"; font-weight: 400; font-size: .85em; color: #333; }
  .kh-body a[href^="http"]::after, .policy-body a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; font-size: .85em; color: #333; word-break: break-all; }
  .term { text-decoration: none; }
  main::after { content: "From " attr(data-print-url); display: block; margin-top: 18pt; padding-top: 6pt; border-top: 1px solid #999; font-size: 9.5pt; color: #333; }
}