/* Revision Cards extends the supplied site's Arial interface and topic colours. */
:root { color-scheme: light; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid #2563eb; outline-offset: 4px;
}
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 1100; background: #fff; padding: .7rem 1rem; border-radius: 10px; }
.skip-link:focus { top: 1rem; }
.nav-links > a[aria-current="page"] { color: #1d4ed8; background: #eff6ff; font-weight: 700; }
.dropdown:focus-within .dropdown-content { display: block; }
.revision-main { padding-top: 30px; }
.revision-intro { padding: 0 0 22px; }
.revision-intro h1 { color: #0f172a; font-size: clamp(2rem, 4vw, 2.65rem); line-height: 1.2; margin: 7px 0 12px; }
.revision-intro p { color: #4b5563; font-size: 1.05rem; }
.revision-course { min-width: 0; padding: 38px; margin-bottom: 34px; background: linear-gradient(135deg, #fff 0%, #eff6ff 100%); border: 1px solid #dbeafe; border-radius: 28px; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.revision-course > .revision-intro { padding-bottom: 28px; }
.revision-course .course-back { margin-bottom: 14px; font-size: .95rem; font-weight: 600; color: #2563eb; }
.course-back a { display: inline-block; }
.course-back a:hover { text-decoration: underline; }
.revision-course .revision-intro h1 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 0; }
.revision-course > .directory-shell { min-width: 0; border-color: #bfdbfe; }
.revision-course > .course-choices { margin-bottom: 0; }
.breadcrumb { display: flex; gap: .6rem; flex-wrap: wrap; color: #475569; font-size: .9rem; margin-bottom: 18px; }
.breadcrumb a:hover, .back-link:hover, .related-link:hover { color: #1d4ed8; text-decoration: underline; }
.directory-shell { container: revision-directory / inline-size; background: #fff; border: 1px solid #e5e7eb; border-radius: 22px; padding: 26px; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
.directory-tools { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: end; gap: 16px; margin-bottom: 20px; }
.directory-tools.directory-tools-complete { grid-template-columns: minmax(0, 1fr); }
.search-field { min-width: 0; }
.search-field label { display: block; color: #334155; font-weight: 700; margin-bottom: 7px; }
.search-box { position: relative; }
.search-box svg { position: absolute; left: 16px; top: 16px; pointer-events: none; width: 22px; height: 22px; color: #64748b; }
.search-box input { width: 100%; height: 54px; padding: 12px 52px 12px 48px; border: 1px solid #cbd5e1; border-radius: 14px; color: #0f172a; background: #f8fafc; }
.search-box input:placeholder-shown { padding-right: 16px; }
.search-box input::placeholder { color: #64748b; opacity: 1; }
.search-box input::-webkit-search-cancel-button { display: none; }
.clear-search { position: absolute; right: 7px; top: 7px; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; font-size: 1.5rem; color: #475569; }
/* One accessible switch: both halves share one click target and equal space. */
.availability { position: relative; width: 286px; max-width: 100%; }
.availability-switch { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; isolation: isolate; width: 100%; height: 54px; padding: 5px; border: 1px solid #cbd5e1; border-radius: 14px; background: #f8fafc; color: #475569; font-weight: 700; font-size: .9rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.availability-switch::before { content: ''; position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 2); border-radius: 9px; background: #2563eb; box-shadow: 0 2px 5px #1e40af24; transform: translateX(0); transition: transform 230ms cubic-bezier(.2,.8,.2,1); }
.availability-switch[aria-checked="false"]::before { transform: translateX(100%); }
.availability-switch > span { padding: 0 5px; white-space: nowrap; text-align: center; transition: color 180ms ease; }
.availability-switch[aria-checked="true"] > [data-filter="ready"], .availability-switch[aria-checked="false"] > [data-filter="all"] { color: #fff; }
.availability-switch:hover { border-color: #93c5fd; }
.availability-switch:disabled { cursor: default; }
.directory-shell[data-directory-initializing] .availability-switch::before,
.directory-shell[data-directory-initializing] .availability-switch > span { transition: none; }
.availability-tip { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(290px, calc(100vw - 72px)); padding: 14px 42px 14px 16px; border: 1.5px solid #2563eb; border-radius: 14px; background: #fff; color: #334155; box-shadow: 0 7px 22px #0f172a1c; z-index: 6; font-size: .95rem; line-height: 1.45; }
.availability-tip::after { content: ''; position: absolute; left: 64px; bottom: -7px; width: 12px; height: 12px; transform: rotate(45deg); border-right: 1.5px solid #2563eb; border-bottom: 1.5px solid #2563eb; background: #fff; }
.availability .availability-tip button { position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; min-height: 0; padding: 0; border: 1px solid #cbd5e1; border-radius: 50%; background: #f8fafc; color: #475569; font-size: 1.15rem; }
@media (prefers-reduced-motion: reduce) { .availability-switch::before, .availability-switch > span { transition: none; } }
.topic-sections { display: grid; gap: 16px; }
.topic-section { border: 1px solid var(--topic-line); border-left: 5px solid var(--topic); border-radius: 18px; background: var(--topic-pale); overflow: clip; scroll-margin-top: 120px; overflow-anchor: none; }
.topic-section > summary { list-style: none; display: flex; align-items: center; gap: 15px; padding: 19px 21px; background: var(--topic-pale); cursor: pointer; }
.topic-section > summary::-webkit-details-marker { display: none; }
.topic-symbol { display: flex; justify-content: center; align-items: center; width: 46px; height: 46px; flex: 0 0 auto; background: #fff; border: 1px solid var(--topic-line); color: var(--topic); border-radius: 12px; font-size: 1.4rem; font-weight: 700; }
.topic-heading { flex: 1; min-width: 0; }
.topic-title { display: block; font-size: 1.25rem; line-height: 1.35; color: #0f172a; font-weight: 700; }
.topic-count { display: block; color: #475569; font-size: .875rem; font-weight: 400; margin-top: 2px; }
.topic-heading-complete { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55em; row-gap: .15em; }
.topic-heading-complete .topic-count { display: inline; white-space: nowrap; margin-top: 0; }
.topic-count-separator { margin-right: .2em; }
.topic-chevron { width: 22px; height: 22px; color: var(--topic); flex-shrink: 0; transition: transform .2s; }
.topic-section[open] .topic-chevron { transform: rotate(180deg); }
.skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px; }
.skill-tile { display: flex; flex-direction: column; align-items: start; gap: 12px; min-height: 110px; padding: 17px; border: 1px solid #e5e7eb; border-radius: 14px; background: #f8fafc; color: #334155; transition: border-color .15s, background .15s; }
.skill-tile[data-status="ready"] { position: relative; cursor: pointer; background: #fff; border-color: var(--topic-line); }
.skill-tile[data-status="ready"]:hover { background: var(--topic-pale); border-color: var(--topic); }
.skill-name { font-weight: 700; font-size: 1rem; line-height: 1.35; }
.skill-bottom { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; margin-top: auto; }
.skill-level { font-size: .875rem; color: #64748b; }
.skill-action { font-size: .875rem; font-weight: 700; color: var(--topic); white-space: nowrap; }
.soon-label { padding: 3px 8px; border-radius: 999px; background: #e5e7eb; color: #4b5563; font-size: .8125rem; white-space: nowrap; }
.skill-tile[aria-disabled="true"] { color: #64748b; }
.empty-state { padding: 30px 16px; text-align: center; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 16px; }
.empty-state h2 { font-size: 1.3rem; margin-bottom: 8px; }
.empty-state p { color: #64748b; margin-bottom: 16px; }
.revision-card-wrap { width: min(850px, 100%); margin: 0 auto; }
.revision-paper { border: 1px solid var(--topic-line); border-top: 5px solid var(--topic); border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.06); overflow: hidden; }
.card-heading { padding: 23px 28px 21px; background: var(--topic-pale); border-bottom: 1px solid var(--topic-line); }
.card-tags { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.topic-tag, .level-tag { padding: 4px 10px; border-radius: 999px; font-size: calc(.875rem + 1pt); font-weight: 700; }
.topic-tag { background: #fff; color: var(--topic); border: 1px solid var(--topic-line); }
.level-tag { color: #475569; background: #fff; }
.card-heading h1 { font-size: clamp(1.65rem, 4vw, 2.2rem); color: #0f172a; line-height: 1.2; margin: 0 0 10px; }
.card-heading p { color: #475569; }
.explanation { padding: 25px 28px 28px; }
.key-points { list-style: none; display: grid; gap: 8px; margin-bottom: 23px; }
.key-points li { position: relative; padding-left: 20px; }
.key-points li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--topic); }
.example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.worked-example { min-width: 0; background: var(--topic-pale); border: 1px solid var(--topic-line); border-radius: 15px; padding: 18px; }
.worked-example.full-width { grid-column: 1 / -1; }
.example-label { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--topic-line); color: var(--topic); font-size: calc(.9rem + 1pt); font-weight: 700; margin-bottom: 13px; }
.example-prompt { margin-bottom: 11px; }
.working { display: grid; gap: 12px; }
.work-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 13px; }
.work-note { font-size: calc(.875rem + 1pt); color: #475569; }
.math { font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif; font-size: 1.22em; line-height: 1.4; max-width: 100%; }
.math math { font-size: 1em; }
.math-block { display: block; overflow-x: auto; padding: 4px 0; }
.answer-box { display: inline-flex; justify-content: center; padding: 8px 15px; margin-top: 17px; border: 2px solid var(--topic); border-radius: 8px; color: #0f172a; background: #fff; max-width: 100%; }
.answer-box .math { overflow-x: auto; }
.remember { display: flex; gap: 12px; margin-top: 18px; padding: 15px 17px; border: 1px solid var(--topic-line); border-radius: 12px; background: #fff; color: #334155; }
.remember strong { color: var(--topic); }
.reference-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--topic-line); border-radius: 12px; overflow: hidden; margin: 0 0 20px; }
.reference-table th, .reference-table td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--topic-line); vertical-align: middle; }
.reference-table th { color: var(--topic); background: var(--topic-pale); font-weight: 700; }
.reference-table tr:last-child td { border-bottom: 0; }
.reference-table td + td, .reference-table th + th { border-left: 1px solid var(--topic-line); }
.reference-table .math { font-size: 1.16em; }
.diagram { display: block; width: 100%; height: auto; overflow: visible; margin: 0 auto 12px; }
.diagram text { font-family: "Cambria Math", "Times New Roman", serif; fill: #0f172a; }
.diagram .distribution-arrow { stroke: var(--topic); fill: none; stroke-width: 2.5; stroke-linecap: round; }
.diagram .coefficient-ring { stroke: var(--topic); fill: none; stroke-width: 2; }
.diagram .secondary-arrow, .diagram .secondary-ring { stroke: #c2410c; }
.diagram .secondary-arrow { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.diagram .secondary-ring { fill: none; stroke-width: 2; }
.practice-deck { padding: 0; border-top: 2px solid var(--topic); background: var(--topic-pale); border-radius: 0 0 20px 20px; }
.practice-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 25px 12px; }
.practice-top h2 { color: #0f172a; font-size: calc(1.15rem + 1pt); }
.practice-counter, .practice-progress { display: none; }
.practice-stage { position: relative; display: grid; overflow: hidden; min-height: 180px; background: #fff; margin: 0; isolation: isolate; }
.practice-face { grid-area: 1 / 1; padding: 21px 28px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.practice-face[aria-hidden="true"] { visibility: hidden; }
.practice-question { z-index: 2; transform-origin: bottom left; }
.practice-answer { z-index: 1; }
.practice-face p { text-align: center; }
.practice-face .question-equation { font-size: 1.5rem; max-width: 100%; text-align: center; overflow-x: auto; }
.practice-answer .answer-box { margin: 0; }
.practice-answer .answer-working { text-align: center; color: #475569; display: grid; gap: 6px; }
.answer-working .math { font-size: calc(1.1rem + 1pt); }
.practice-face .diagram { width: min(450px,100%); margin: 0; }
.face-label { color: var(--topic); font-size: calc(.875rem + 1pt); font-weight: 700; }
.practice-bottom { padding: 17px 25px 21px; }
.practice-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.practice-actions button { min-height: 46px; border-radius: 12px; padding: 10px 16px; border: 1px solid var(--topic-line); background: #fff; color: var(--topic); font-weight: 700; }
.practice-actions .check-answer { background: var(--topic); color: #fff; border-color: var(--topic); min-width: 170px; }
.practice-actions button:disabled { opacity: .4; cursor: default; }
.question-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.question-dots button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; margin: 0; line-height: 1; text-align: center; font-variant-numeric: lining-nums tabular-nums; appearance: none; border: 1px solid var(--topic-line); border-radius: 50%; background: #fff; color: var(--topic); font-size: calc(.875rem + 1pt); }
.question-dots button[aria-current="true"] { background: var(--topic); color: #fff; }
.practice-noscript { padding: 20px 28px; background: #fff; }
.practice-noscript details { margin: 10px 0; }
.practice-noscript summary { cursor: pointer; font-weight: 700; color: var(--topic); }
.card-footer { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-top: 22px; font-size: calc(.9rem + 1pt); color: #475569; }
.related-cards { margin-top: 24px; }
.related-cards h2 { font-size: calc(1rem + 1pt); margin-bottom: 10px; }
.related-links { display: flex; gap: 8px; flex-wrap: wrap; }
.related-link { padding: 7px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; color: #334155; font-size: calc(.9rem + 1pt); }
/* Overall totals are already in the introduction. Keep live search feedback
   available to screen readers without a duplicate visible count row. */
.sr-only, .directory-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 950px) {
  .revision-course { padding: 26px; }
  .dropdown:focus-within .dropdown-content { display: none; }
  .dropdown.mobile-open .dropdown-content { display: block; }
  .skill-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 650px) {
  .revision-main { padding-top: 20px; }
  .revision-course { padding: 22px 12px 12px; border-radius: 22px; }
  .revision-course > .revision-intro { padding: 0 8px 24px; }
  .revision-course > .directory-shell { padding: 14px; border-radius: 18px; }
  .directory-shell { padding: 17px; }
  .directory-tools { gap: 11px; }
  .topic-section > summary { padding: 14px 13px; gap: 11px; }
  .topic-symbol { width: 38px; height: 38px; font-size: 1.2rem; }
  .topic-title { font-size: 1.1rem; }
  .skill-grid { grid-template-columns: 1fr; padding: 12px; gap: 10px; }
  .skill-tile { min-height: 90px; padding: 14px; }
  .card-heading { padding: 20px; }
  .explanation { padding: 20px; }
  .example-grid { grid-template-columns: 1fr; }
  .worked-example { padding: 15px; }
  .reference-table th, .reference-table td { padding: 10px; }
  .practice-top { padding: 16px 18px 12px; }
  .practice-face { padding: 20px 18px; }
  .practice-bottom { padding: 15px 15px 18px; }
  .practice-actions { gap: 7px; }
  .practice-actions button { padding: 10px 11px; font-size: calc(.9rem + 1pt); }
  .practice-actions .check-answer { min-width: 0; flex: 1; }
  .card-footer { flex-direction: column; gap: 10px; }
}
@container revision-directory (max-width: 400px) {
  .directory-tools { grid-template-columns: minmax(0, 1fr); }
  .availability { width: 100%; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 500px) {
    .directory-tools { grid-template-columns: minmax(0, 1fr); }
    .availability { width: 100%; }
    }
}
@media (max-width: 360px) {
  .revision-course { padding-left: 8px; padding-right: 8px; }
  .revision-course > .directory-shell { padding: 10px; }
  .brand { font-size: 1.55rem; }
  .directory-shell { padding: 12px; }
  .practice-actions button { padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* V27: compact cards, bright topic pills and a viewport-bounded pop-out. */
.topic-content { display: grid; gap: 10px; padding: 14px 18px 18px; }
.skill-group { --objective-border: color-mix(in srgb, var(--topic) 65%, #fff); --objective-pale: color-mix(in srgb, var(--topic-pale) 65%, #fff); min-width: 0; overflow: clip; border: 2px solid #fff; border-radius: 12px; background: #fff; transition: background-color .15s; }
.skill-group + .skill-group { margin-top: 0; }
.skill-group > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; cursor: pointer; }
.skill-group > summary::-webkit-details-marker { display: none; }
.skill-group > summary::marker { content: ''; }
.skill-group > summary:hover, .skill-group > summary:focus-visible { background: var(--objective-pale, var(--topic-pale)); }
.skill-group h3 { flex: 1; min-width: 0; margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.4; color: var(--topic-text, var(--topic)); }
.skill-group-count { flex: none; box-sizing: border-box; width: 6rem; padding: 4px 10px; border-radius: 999px; background: var(--topic); color: #fff; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4; text-align: center; white-space: nowrap; }
.skill-group-chevron { flex: none; width: 18px; height: 18px; color: var(--topic-text, var(--topic)); transition: transform .2s ease; }
.skill-group[open] > summary .skill-group-chevron { transform: rotate(180deg); }
.skill-group[open] { border-color: var(--objective-border); background: #fff; }
.skill-group[open] > summary { background: #fff; }
.skill-group .skill-grid { padding: 14px; }
@media (max-width: 650px) { .skill-group > summary { gap: 8px; padding: 9px; } .skill-group .skill-grid { padding: 10px; } }
.skill-tile { min-height: 96px; padding: 14px; }
.skill-name { font-size: .94rem; }
.skill-level, .skill-action { font-size: .78rem; }
.skill-bottom { flex-wrap: wrap; }
.revision-card-wrap { width: min(780px, 100%); font-size: calc(.95rem + 1pt); line-height: 1.5; }
.revision-paper { border: 0; border-radius: 24px; }
.card-heading { padding: 18px 22px 16px; background: linear-gradient(125deg, var(--topic-line), var(--topic-pale) 70%); }
.card-heading h1 { font-size: clamp(1.3rem, 3.2vw, 1.7rem); line-height: 1.22; margin-bottom: 7px; }
.card-heading p { font-size: calc(.92rem + 1pt); line-height: 1.45; color: #334155; }
.card-tags { gap: 7px; margin-bottom: 9px; }
.topic-tag { background: var(--topic); color: #fff; border-color: var(--topic); }
.topic-tag:hover { color: #fff; filter: brightness(.94); }
.topic-tag, .level-tag { padding: 4px 11px; font-size: calc(.77rem + 1pt); line-height: 1.4; }
.level-tag { border: 1px solid var(--topic-line); }
.explanation { padding: 18px 22px 20px; }
.key-points { gap: 7px; margin: 0 0 16px; padding: 0; }
.key-points li { padding-left: 16px; }
.key-points li::before { position: static; display: inline-block; width: 6px; height: 6px; margin-left: -16px; margin-right: 10px; vertical-align: .15em; }
.example-grid { gap: 12px; }
.worked-example { padding: 14px; border: 1.5px solid var(--topic-line); background: linear-gradient(145deg, #fff 0%, var(--topic-pale) 55%, var(--topic-line) 160%); }
.example-label { margin-bottom: 10px; padding: 4px 11px; font-size: calc(.78rem + 1pt); line-height: 1.45; color: #fff; background: var(--topic); border: 0; box-shadow: 0 2px 4px #0f172a0c; }
.example-prompt { font-size: calc(.89rem + 1pt); margin-bottom: 9px; }
.working { gap: 9px; }
.work-row { gap: 4px 9px; }
.work-note { font-size: calc(.78rem + 1pt); line-height: 1.4; }
.math { display: inline; vertical-align: baseline; max-width: 100%; font-size: 1em; line-height: inherit; font-family: inherit; }
.math mjx-container { display: inline; vertical-align: baseline; max-width: 100%; margin: 0; }
.math > mjx-container > svg { max-width: 100%; height: auto; overflow: visible; }
/* MathJax clips stretched underline glyphs inside nested SVG viewports. */
.math svg svg { overflow: hidden; }
.math-block { display: block; }
.reference-table .math { font-size: 1.04rem; }
.answer-box { margin-top: 12px; padding: 7px 12px; border-radius: 9px; background: #fff; box-shadow: 0 2px 0 var(--topic-line); }
.remember { margin-top: 14px; padding: 12px 14px; background: var(--topic-pale); font-size: calc(.86rem + 1pt); }
.remember strong { display: inline-block; background: var(--topic); color: #fff; border-radius: 999px; padding: 2px 9px; margin-bottom: 5px; font-size: calc(.75rem + 1pt); }
.reference-table { margin-bottom: 16px; font-size: calc(.88rem + 1pt); }
.reference-table th, .reference-table td { padding: 8px 11px; }
.diagram text { font-family: Arial, sans-serif; }
.diagram.number-line { width: min(100%, 320px); margin: 16px auto 4px; }
.compound-scroll { max-width: 100%; overflow-x: auto; padding: 5px 0; }
.responsive-working { container-type: inline-size; width: 100%; }
.working-narrow { display: none; }
@container (max-width: 370px) {
  .working-wide { display: none; }
  .working-narrow { display: block; }
}
.compound-working { display: grid; grid-template-columns: var(--compound-left) max-content var(--compound-middle) max-content var(--compound-right); width: max-content; margin-inline: auto; column-gap: .35em; row-gap: .38em; align-items: center; font-size: var(--working-maths-size); }
.compound-part, .compound-sign, .compound-operation { text-align: center; white-space: nowrap; }
.compound-operation { font-size: calc(1em - 1pt); color: var(--topic-text); padding-bottom: .25em; }
.compound-note { grid-column: 1 / -1; font-size: var(--card-body-size); color: #475569; text-align: center; }
.split-inequalities { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.inequality-case { min-width: 0; padding: 14px 10px; background: #ffffffb8; border: 1px solid var(--topic-line); border-radius: 12px; }
.inequality-case h3 { font-size: var(--card-body-size); color: var(--topic-text); text-align: center; margin-bottom: 12px; }
.inequality-combine { text-align: center; margin: 12px auto 0; font-size: var(--card-body-size); }
@media (max-width: 620px) { .split-inequalities { grid-template-columns: 1fr; } }
.distribution-equation { position: relative; padding: 54px 8px 12px; margin: 0 0 9px; }
.distribution-maths { text-align: center; line-height: 1; }
.distribution-maths .math { font-size: calc(1.4rem + 1pt); }
.distribution-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.expansion-expression { display: inline-block; position: relative; vertical-align: baseline; padding-top: var(--arrow-top, 58px); padding-bottom: var(--arrow-bottom, 18px); white-space: nowrap; }
.expansion-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.aligned-scroll.has-expansion { padding-left: 8px; padding-right: 8px; }
.bar-model { margin: 8px auto 10px; }
.practice-top { padding: 13px 20px 11px; }
.practice-top h2 { border-radius: 999px; background: var(--topic); color: #fff; padding: 4px 12px; font-size: calc(.86rem + 1pt); }
.practice-stage { min-height: 135px; }
.practice-face { padding: 17px 22px; gap: 10px; }
.practice-face[aria-hidden="true"] { position: absolute; width: 100%; visibility: hidden; pointer-events: none; }
.practice-face .question-equation { font-size: 1rem; overflow: visible; }
.question-equation .math { font-size: calc(1.28rem + 1pt); }
.answer-working .math { font-size: calc(1.03rem + 1pt); }
.practice-face p { font-size: calc(.92rem + 1pt); }
.practice-bottom { padding: 13px 20px 15px; }
.practice-actions { gap: 12px; }
.practice-actions .question-arrow { display: grid; place-items: center; padding: 0; width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; border-radius: 50%; border: 2px solid var(--topic); box-shadow: 0 2px 0 var(--topic-line); }
.question-arrow svg { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.practice-actions .question-arrow:disabled { opacity: .3; box-shadow: none; }
.practice-actions .check-answer { min-height: 44px; min-width: 156px; padding: 9px 17px; border-radius: 999px; font-size: calc(.86rem + 1pt); }
.practice-actions button:not(:disabled):hover, .question-dots button:not(:disabled):hover { filter: brightness(.96); }
.question-dots { gap: 7px; margin-top: 11px; }
.question-dots button { width: 32px; height: 32px; font-size: calc(.78rem + 1pt); }
.revision-modal { width: min(784px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; margin: auto; border: 0; border-radius: 20px; overflow: hidden; background: #fff; color: #0f172a; box-shadow: 0 22px 90px #0f172a55; }
.revision-modal::backdrop { background: #0f172a80; backdrop-filter: blur(3px); }
.modal-content { overflow: hidden; background: #fff; }
.revision-modal .revision-card-wrap { width: 100%; margin: 0; }
.revision-modal .revision-paper { box-shadow: none; }
.revision-modal .card-heading { padding-right: 62px; }
.modal-close { position: absolute; top: 10px; right: 12px; z-index: 10; }
.modal-close, .practice-fullscreen .practice-fullscreen-toggle {
  display: grid; place-items: center; box-sizing: border-box;
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0;
  border-radius: 50%; border: 1px solid #cbd5e1; color: #334155; background: #fff;
  box-shadow: 0 2px 8px #0f172a12; line-height: 1; cursor: pointer;
}
.modal-close svg, .practice-fullscreen .practice-fullscreen-toggle svg {
  display: block; width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.modal-close:hover, .practice-fullscreen .practice-fullscreen-toggle:hover { background: #f1f5f9; }
@media (max-width: 650px) {
  .topic-content { padding: 12px; }
  .card-heading { padding: 16px; }
  .explanation { padding: 15px 16px 17px; }
  .worked-example { padding: 13px; }
  .practice-top { padding: 12px 16px 10px; }
  .practice-face { padding: 16px; }
  .practice-bottom { padding: 12px 16px 15px; }
  .practice-actions .check-answer { min-width: 0; flex: 0 1 180px; }
  .revision-modal { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 17px; }
  .revision-modal .revision-paper { border-radius: 17px; }
  .modal-close { top: 9px; right: 10px; }
  .distribution-maths .math { font-size: calc(1.28rem + 1pt); }
  .revision-card-wrap { font-size: calc(.92rem + 1pt); }
}
.topic-symbol > svg { display: block; width: 32px; height: 32px; }
.topic-symbol { color: var(--topic-text, var(--topic)); }
/* V100: concise course introductions and readable function machines. */
.revision-intro .revision-scope-note { font-size: .88rem; color: #64748b; margin-top: 8px; line-height: 1.5; }
.function-machine-diagram { width: 100%; max-width: 560px; margin: 14px auto; }
.function-machine-diagram svg { display: block; width: 100%; height: auto; }
.function-machine-diagram figcaption { margin-top: 4px; text-align: center; font-size: .84rem; color: #475569; line-height: 1.4; }
.ai-card-label { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid #ddd6fe; border-radius: 999px; color: #6d28d9; background: #f5f3ff; font-size: .76rem; font-weight: 700; }
.topic-tag, .example-label, .remember strong, .practice-top h2, .practice-actions .check-answer, .question-dots button[aria-current="true"] { color: #fff; }
.topic-tag:hover { color: #fff; }
.skill-action, .skill-group h3 { color: var(--topic-text, var(--topic)); }

/* V75: one clear action, with the entire tile sharing its hit area. */
.skill-tile .skill-open {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-height: 40px; padding: 9px 14px; margin: 0 0 0 auto;
  border: 0; border-radius: 10px; background: #2563eb; color: #fff;
  font-family: inherit; font-size: .875rem; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s;
}
.skill-tile .skill-open::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.skill-tile .skill-open:hover { background: #1d4ed8; color: #fff; }
.skill-tile .skill-open:focus-visible { outline: none; }
.skill-tile .skill-open:focus-visible::after { outline: 3px solid #2563eb; outline-offset: 3px; }
.revision-modal.is-opening { transform-origin: 50% 50%; will-change: transform, opacity; }
.long-division { margin: 10px 0 4px; }
.synthetic-division { margin: 12px 0; min-width: 0; container-type: inline-size; }
.practice-face .synthetic-division { width: 100%; }
.synthetic-division figcaption, .synthetic-reading { font-size: calc(.85rem + 1pt); line-height: 1.55; color: #334155; }
.synthetic-division figcaption { margin-bottom: 10px; }
.synthetic-scroll { max-width: 100%; overflow-x: auto; padding: 2px 0 6px; }
.synthetic-table { border-collapse: collapse; margin: 0 auto; background: transparent; }
.synthetic-table th, .synthetic-table td { padding: 7px 9px; text-align: center; vertical-align: middle; white-space: nowrap; font-weight: 400; }
.synthetic-table .math { font-size: var(--working-maths-size); }
.synthetic-table .synthetic-root { border-right: 2px solid var(--topic); color: var(--topic-text, var(--topic)); font-weight: 700; }
.synthetic-products td { color: var(--topic-text, var(--topic)); }
.synthetic-products th { border-right: 2px solid var(--topic); }
.synthetic-bring-down { font-size: 1.2rem; }
.synthetic-sums td { border-top: 2px solid var(--topic); }
.synthetic-sums .synthetic-remainder { border-left: 2px dashed var(--topic-line); background: var(--topic-pale); }
.synthetic-table .synthetic-key td { padding: 5px 7px; color: #475569; font-size: calc(.7rem + 1pt); white-space: normal; line-height: 1.35; }
.synthetic-steps { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; align-items: baseline; gap: 8px 20px; margin: 12px auto; max-width: 100%; overflow-x: auto; padding: 3px 0; }
.synthetic-steps .math { font-size: calc(.92rem + 1pt); }
.synthetic-step-heading { font-size: calc(.8rem + 1pt); font-weight: 700; color: var(--topic-text, var(--topic)); }
.synthetic-step { display: contents; }
.synthetic-mobile-label { display: none; }
.synthetic-reading { margin: 10px 0 0; }
@container (max-width: 320px) {
  .synthetic-steps { grid-template-columns: minmax(0, 1fr); gap: 0; justify-content: stretch; }
  .synthetic-step-heading { display: none; }
  .synthetic-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 10px 0; border-bottom: 1px solid var(--topic-line); }
  .synthetic-step:last-child { border-bottom: 0; }
  .synthetic-step > span { display: block; text-align: center; }
  .synthetic-mobile-label { display: block; font-size: calc(.8rem + 1pt); font-weight: 700; color: var(--topic-text, var(--topic)); margin-bottom: 3px; }
}
@media (max-width: 400px) {
  .synthetic-table th, .synthetic-table td { padding: 6px 5px; }
  .synthetic-steps { gap: 8px 12px; }
}
.long-division figcaption { color: #475569; font-size: calc(.85rem + 1pt); margin-bottom: 10px; }
.division-scroll { max-width: 100%; overflow-x: auto; padding-bottom: 5px; }
.division-table { border-collapse: collapse; margin: 0 auto; background: #fff; }
.division-table th, .division-table td { text-align: right; vertical-align: middle; padding: 7px 6px; white-space: nowrap; }
.division-table th { font-weight: 400; }
.division-table .math { font-size: calc(1.05rem + 1pt); }
.division-table .division-quotient { text-align: right; border-bottom: 2px solid var(--topic); padding-bottom: 9px; color: var(--topic-text, var(--topic)); }
.division-preparation { margin: 10px 0 14px; }
.division-preparation p { margin: 0 0 6px; font-size: calc(.85rem + 1pt); color: #334155; }
.preparation-maths { max-width: 100%; overflow-x: auto; text-align: center; padding: 3px 0; font-size: var(--working-maths-size); }
.division-dividend td:first-of-type { border-left: 2px solid var(--topic); padding-left: 10px; }
.division-subtract td { border-bottom: 1px solid #94a3b8; }
.division-subtract th { color: var(--topic-text, var(--topic)); }
.division-result:last-child { background: var(--topic-pale); }
.practice-face .long-division { width: 100%; }
.practice-face .division-table .math { font-size: calc(1rem + 1pt); }
.trig-triangle { max-width: 350px; }
@media (max-width: 650px) { .topic-symbol > svg { width: 28px; height: 28px; } .division-table th, .division-table td { padding: 6px 4px; } }

/* V29 shared card details. */
.practice-deck { border-top: 2px dashed var(--topic); }
.modal-close { border-radius: 50%; }
.revision-modal { isolation: isolate; }
.revision-modal .revision-paper { border: 0; border-radius: 0; }
.card-title-subtitle { display: block; margin-top: 5px; font-size: .83em; font-weight: 600; line-height: 1.35; }
.card-title-subtitle .math { font-size: 1em; }
.skill-name .card-title-subtitle { font-size: .87em; font-weight: 500; }

.invisible-relation { visibility: hidden; }

/* A reversible turn of the attached practice card. */
.practice-stage { display: block; perspective: 1200px; }
.practice-turner { position: relative; display: grid; min-height: 135px; transform-style: preserve-3d; transition: transform 360ms cubic-bezier(.4,0,.2,1); }
.practice-turner.is-flipped { transform: rotateY(180deg); }
.practice-turner.no-turn { transition: none; }
.practice-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: center; z-index: auto; }
.practice-face[aria-hidden="true"] { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; visibility: visible; pointer-events: none; }
.practice-question { transform: rotateY(0deg); }
.practice-answer { transform: rotateY(180deg); }
.practice-primary { display: flex; justify-content: center; gap: 8px; flex: 1 1 auto; min-width: 0; align-items: stretch; }
.practice-actions .generate-questions { flex: 1 1 180px; max-width: 210px; min-width: 0; border-radius: 12px; font-size: calc(.86rem + 1pt); padding: 9px 12px; color: var(--topic-text); }
.practice-actions .check-answer { flex: 1 1 145px; max-width: 180px; min-width: 0; border-radius: 12px; }
.question-dots .answer-checked { border-width: 2px; box-shadow: 0 0 0 2px var(--topic-line); }
@media (max-width: 650px) {
  .practice-actions { gap: 8px; }
  .practice-primary { gap: 6px; }
  .practice-actions .generate-questions, .practice-actions .check-answer { padding: 8px 7px; font-size: calc(.82rem + 1pt); }
}
@media (prefers-reduced-motion: reduce) { .practice-turner { transition: none; } }

/* A 4px solid edge with 4px fades inwards and outwards.
   The 8px outer extent leaves a 10px buffer to the viewport. */
.revision-card-wrap, .revision-modal { --card-frame: 4px; --card-edge: 4px; --card-radius: 24px; }
.revision-paper {
  position: relative; isolation: isolate; padding: var(--card-frame); border-radius: var(--card-radius); overflow: visible;
  display: flex; flex-direction: column; min-height: 0;
  max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px);
}
.revision-paper::after, .revision-modal::after, .practice-fullscreen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 20;
  box-shadow: 0 0 0 4px var(--topic, #2563eb), 0 0 4px 4px var(--topic-line, #dbeafe), inset 0 0 4px var(--topic, #2563eb);
}
@supports (color: color-mix(in srgb, blue, transparent)) {
  .revision-paper::after, .revision-modal::after, .practice-fullscreen::after {
    box-shadow:
      0 0 0 4px var(--topic, #2563eb),
      0 0 0 5px color-mix(in srgb, var(--topic, #2563eb) 50%, transparent),
      0 0 0 6px color-mix(in srgb, var(--topic, #2563eb) 36%, transparent),
      0 0 0 7px color-mix(in srgb, var(--topic, #2563eb) 22%, transparent),
      0 0 0 8px color-mix(in srgb, var(--topic, #2563eb) 10%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--topic, #2563eb) 50%, transparent),
      inset 0 0 0 2px color-mix(in srgb, var(--topic, #2563eb) 36%, transparent),
      inset 0 0 0 3px color-mix(in srgb, var(--topic, #2563eb) 22%, transparent),
      inset 0 0 0 4px color-mix(in srgb, var(--topic, #2563eb) 10%, transparent);
  }
}
.revision-paper > .card-heading { flex: 0 0 auto; border-radius: 20px 20px 0 0; }
.card-body {
  flex: 1 1 auto; min-height: 0; min-width: 0; margin-right: 3px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; scrollbar-gutter: stable;
  border-radius: 0 0 17px 20px;
}
.card-body:focus-visible { outline: 2px solid var(--topic); outline-offset: -3px; }
.card-body > .practice-deck { border-radius: 0 0 17px 20px; }
.revision-modal {
  width: min(784px, calc(100vw - 36px)); max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px);
  padding: var(--card-frame); border-radius: var(--card-radius); overflow: visible;
}
/* This wrapper clips rounded corners without becoming a second scroll container.
   overflow:hidden lets focus/scrollIntoView move the fixed heading off screen. */
.modal-content { border-radius: 20px; overflow: clip; }
.revision-modal .revision-paper { padding: 0; border-radius: 0; max-height: calc(100vh - 44px); max-height: calc(100dvh - 44px); }
.revision-modal .revision-paper::after { content: none; }
.modal-close { top: 15px; right: 17px; }
.answer-line { display: block; }
.answer-line + .answer-line { margin-top: .35em; }
.answer-copy { min-width: 0; }
.example-caption { margin: 0 0 9px; color: #334155; font-size: calc(.85rem + 1pt); font-weight: 600; line-height: 1.45; }
.example-grid-wide { grid-template-columns: 1fr; }
/* Prose keeps the surrounding font size, including inside answer tables.
   MathJax's own SVG vertical-align records the glyph depth; do not reset it. */
.work-equations .work-note .math, .reference-table .math { font-size: 1em; }
.diagram-math { color: #0f172a; }
@media (max-width: 650px) {
  .modal-close { top: 14px; right: 16px; }
}

/* Centre the working as one group; notes and final answers cannot widen its columns. */
.revision-card-wrap { --card-body-size: calc(.95rem + 1pt); --working-maths-size: calc(1.04rem + 1pt); }
.worked-solution { width: 100%; min-width: 0; font-size: var(--working-maths-size); }
.aligned-scroll { max-width: 100%; overflow-x: auto; padding: 3px 0 5px; }
.aligned-working {
  display: grid; align-items: baseline; width: 100%;
  min-width: calc(var(--work-left-width) + var(--work-sign-width) + var(--work-right-width) + 16px);
  grid-template-columns: minmax(0, 1fr) calc(var(--work-left-width) + 4px) calc(var(--work-sign-width) + 8px) calc(var(--work-right-width) + 4px) minmax(0, 1fr);
}
.work-equations > .work-left { grid-column: 2; text-align: right; padding: 6px 2px; }
.work-equations > .work-relation { grid-column: 3; text-align: center; padding: 6px 4px; }
.work-equations > .work-right { grid-column: 4; text-align: left; padding: 6px 2px; }
.work-equations .math { font-size: 1em; }
.work-equations .math svg { max-width: none; }
.work-equations > .work-note {
  grid-column: 1 / -1; justify-self: center; min-width: 0; max-width: min(100%, 28em);
  margin: -1px 0 7px; text-align: center; white-space: normal; overflow-wrap: break-word;
  font-size: calc(.78rem + 1pt);
}
/* V117: let enlarged integrals use two readable lines in narrow working areas. */
.integral-scroll { container-type: inline-size; }
@container (max-width: 430px) {
  .integral-working { min-width: 0; grid-template-columns: max-content minmax(0, 1fr); }
  .integral-working > .work-left { grid-column: 1 / -1; min-width: 0; text-align: center; overflow-x: auto; padding: 6px 0 2px; }
  .integral-working > .work-left:empty { display: none; }
  .integral-working > .work-relation { grid-column: 1; padding-inline: 0 6px; }
  .integral-working > .work-right { grid-column: 2; min-width: 0; overflow-x: auto; }
  .integral-working > .work-note { grid-column: 1 / -1; justify-self: stretch; max-width: 100%; }
}
.final-answer { display: flex; width: 100%; max-width: 100%; overflow-x: auto; padding: 7px 0 3px; font-size: var(--working-maths-size); }
.final-answer > .answer-box { flex: 0 0 auto; width: max-content; max-width: none; margin: 0 auto; padding: 8px 10px; }
.answer-copy { text-align: center; }
.answer-copy > .math { font-size: 1em; white-space: nowrap; }
.answer-copy > .math svg { max-width: none; }
/* V83: list every finite solution separately inside the existing answer box. */
.final-answer.numbered-answer > .answer-box { flex: 0 1 auto; max-width: 100%; }
.numbered-solutions { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .4em 1em; }
.numbered-solution { display: inline-block; max-width: 100%; white-space: nowrap; }
.numbered-solution > .math { font-size: 1em; }
.numbered-solution > .math svg { max-width: none; }
.numbered-solutions.has-solution-notes { display: grid; text-align: left; }
.solution-detail { display: block; margin-top: 3px; white-space: normal; font-size: var(--card-body-size); color: #334155; }
.text-answer { font-size: var(--card-body-size); max-width: 100%; }
.final-answer > .text-answer { max-width: 100%; }
.has-narrow-answer { container-type: inline-size; }
.answer-narrow { display: none; }
@container (max-width: 370px) {
  .has-narrow-answer .answer-wide { display: none; }
  .has-narrow-answer .answer-narrow { display: inline-block; }
}
.text-answer .math { font-size: 1em; }
.fraction-equivalence { color: #0f172a; }
.fraction-equivalence .equivalence-loop { fill: none; stroke: var(--topic); stroke-width: 1.8; stroke-linecap: round; }
.fraction-equivalence .equivalence-operation .diagram-math { color: var(--topic-text, var(--topic)); }
.example-given { text-align: center; font-size: var(--working-maths-size); margin: 5px 0 12px; overflow-x: auto; }
.teaching-note { margin-top: 10px; font-size: calc(.85rem + 1pt); color: #475569; line-height: 1.5; }
.teaching-table-scroll { max-width: 100%; overflow-x: auto; margin: 10px 0 13px; padding: 3px 2px 6px; }
.teaching-table-scroll table { margin-inline: auto; border-collapse: separate; border-spacing: 0; font-size: var(--working-maths-size); }
.teaching-table-scroll caption { font-family: Arial, sans-serif; font-size: calc(.8rem + 1pt); color: #475569; padding-bottom: 9px; }
.teaching-caption { text-align: center; color: #475569; font-size: calc(.8rem + 1pt); margin: 0 0 9px; }
.column-calculation td { padding: 3px 6px; text-align: center; min-width: 1.45em; }
.column-calculation .column-sign { min-width: 1.3em; padding-right: 8px; }
.column-calculation .decimal-column, .place-grid .decimal-column { min-width: 0; width: .45em; padding-inline: 0; }
.column-carry { color: var(--topic); font-size: .72em; }
.column-carry td { padding-bottom: 0; }
.column-rule td, .column-answer td, .column-partial-first td { border-top: 1.5px solid var(--topic); padding-top: 7px; }
.column-answer { color: var(--topic-text); font-weight: 700; }
.exchanged-digit > .math { position: relative; }
.exchanged-digit > .math::after { content: ""; position: absolute; left: -2px; right: -2px; top: 48%; height: 1.5px; background: var(--topic); transform: rotate(-20deg); }
.placeholder-zero { background: var(--topic-pale); border-radius: 5px; color: var(--topic); }
.place-grid th { padding: 5px 6px; font-size: calc(.8rem + 1pt); font-weight: 400; color: #475569; }
.place-grid td { padding: 8px 10px; border: 1px solid var(--topic-line); background: #fff; text-align: center; }
/* Centre the glyph bounds, including the much shorter decimal point. */
.place-grid th, .place-grid td { text-align: center; vertical-align: middle; }
.place-grid .math { display: flex; align-items: center; justify-content: center; min-height: 1.4em; line-height: 1; width: 100%; }
.place-grid .math > mjx-container { display: flex; align-items: center; justify-content: center; line-height: 0; margin: 0; }
.place-grid .math > mjx-container > svg { display: block; vertical-align: 0 !important; max-width: none; }
.place-grid .place-focus { background: var(--topic); color: #fff; }
.place-grid .place-decision { background: #ffedd5; border-color: #fb923c; color: #9a3412; }
.bus-stop td { min-width: 2em; padding: 6px 10px; text-align: right; }
.bus-stop th { padding-right: 12px; font-weight: 400; }
.bus-stop .bus-dividend { border-top: 2px solid var(--topic); position: relative; }
.bus-stop .bus-first { border-left: 2px solid var(--topic); }
.bus-carry { position: absolute; top: 0; left: 2px; color: var(--topic); font-size: .65em; }
.factor-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: center; margin: 10px 0; }
.factor-pairs > span { padding: 7px; background: #fff; border: 1px solid var(--topic-line); border-radius: 8px; }
.recipe-table th, .recipe-table td { padding: 8px; border: 1px solid var(--topic-line); background: #fff; text-align: center; }
.recipe-table th { font-size: calc(.8rem + 1pt); font-weight: 600; }
.recipe-table tbody th { text-align: left; }
.division-table, .division-result:last-child { background: transparent; }
.division-example-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
.division-method { font-size: calc(.85rem + 1pt); color: #475569; padding-top: 7px; }
.division-example-body .long-division { margin: 0; min-width: 0; }
.division-example-body figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.division-example-body .division-table { margin-inline: auto; }
@media (max-width: 650px) {
  .revision-card-wrap { --card-body-size: calc(.92rem + 1pt); --working-maths-size: calc(1rem + 1pt); }
  .division-example-body { grid-template-columns: minmax(0, 1fr); }
  .division-method { padding-top: 0; }
  .division-example-body .division-table { margin-inline: auto; }
}

/* Course and A-level strand choices share the established card and pill styling. */
.course-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 36px; }
.course-choices-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 651px) {
  .ib-course-choices > :nth-child(1) { grid-area: 1 / 1; }
  .ib-course-choices > :nth-child(2) { grid-area: 2 / 1; }
  .ib-course-choices > :nth-child(3) { grid-area: 1 / 2; }
  .ib-course-choices > :nth-child(4) { grid-area: 2 / 2; }
}
.course-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border: 1px solid #e2e8f0; border-top: 4px solid var(--choice-colour); border-radius: 18px; background: #fff; color: #0f172a; }
a.course-choice:hover { border-color: var(--choice-colour); box-shadow: 0 6px 20px #0f172a0d; }
.course-choice h2 { font-size: 1.35rem; }
.course-choice p { color: #475569; }
.course-choice-icon { color: var(--choice-colour); }
.course-choice-icon svg { width: 34px; height: 34px; }
.course-choice-status { margin-top: auto; border-radius: 999px; padding: 5px 12px; background: #f1f5f9; color: var(--choice-colour); font-size: .9rem; font-weight: 700; }
.course-choice[aria-disabled="true"] .course-choice-status { color: #64748b; }
@media (max-width: 650px) { .course-choices, .course-choices-three { grid-template-columns: 1fr; } }

/* V46: the same bracketed operation sits below each side of an equation. */
.work-equations > .balance-operation { font-size: calc(var(--working-maths-size) - 1pt); color: var(--topic-text); text-align: center; padding: 0 2px 5px; }
.work-equations > .balance-left { grid-column: 2; }
.work-equations > .balance-right { grid-column: 4; }
/* V82: a one-card trial. Full-width examples, each read down then across.
   Unflagged examples and all practice solutions keep their existing layout. */
.split-working-example { container-type: inline-size; }
.split-working { display: block; }
.split-working .aligned-working {
  min-width: calc(var(--split-left-width) + var(--split-relation-width) + var(--split-right-width) + 16px);
  grid-template-columns: minmax(0, 1fr) calc(var(--split-left-width) + 4px) calc(var(--split-relation-width) + 8px) calc(var(--split-right-width) + 4px) minmax(0, 1fr);
}
.split-working-left, .split-working-right { min-width: 0; }
.working-flow-arrow { display: none; }
.working-flow-down { display: block; width: 28px; height: 30px; margin: 4px auto 12px; color: var(--topic); }
.working-flow-down svg { display: block; width: 28px; height: 30px; }
@container (min-width: 640px) {
  .split-working { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
  .split-working .aligned-working {
    min-width: calc(var(--work-left-width) + var(--work-sign-width) + var(--work-right-width) + 16px);
    grid-template-columns: minmax(0, 1fr) calc(var(--work-left-width) + 4px) calc(var(--work-sign-width) + 8px) calc(var(--work-right-width) + 4px) minmax(0, 1fr);
  }
  .split-working-left { position: relative; padding-bottom: 32px; }
  .working-flow-down { display: none; }
  .working-flow-arrow { display: block; position: absolute; left: calc(100% - 20px); top: 10px; bottom: 0; width: 96px; color: var(--topic); pointer-events: none; }
  .working-flow-top, .working-flow-bottom { position: absolute; left: 0; width: 96px; height: 40px; overflow: visible; }
  .working-flow-top { top: 0; }
  .working-flow-bottom { bottom: 0; }
  .working-flow-stem { position: absolute; left: 44.5px; top: 39px; bottom: 39px; width: 7px; background: currentColor; }
}
.quadratic-pair-method { min-width: 0; }
.pair-instruction { font-size: var(--card-body-size); margin: 8px 0; line-height: 1.5; }
.pair-formula { text-align: center; overflow-x: auto; padding: 4px 0; font-size: var(--working-maths-size); }
.pair-formula .math { font-size: 1em; white-space: nowrap; }
.quadratic-pair-scroll { max-width: 100%; overflow-x: auto; padding: 4px 0 8px; }
.quadratic-pair-table { border-collapse: separate; border-spacing: 0; margin-inline: auto; background: #ffffffb8; border: 1px solid var(--topic-line); border-radius: 11px; }
.quadratic-pair-table th { padding: 7px 8px; color: #334155; font-size: calc(.8rem + 1pt); font-weight: 650; text-align: center; }
.quadratic-pair-table td { padding: 3px 8px; border-top: 1px solid var(--topic-line); text-align: center; font-size: var(--working-maths-size); }
.factor-pair-ring { display: inline-flex; justify-content: center; padding: 3px 7px; border: 2px solid transparent; border-radius: 50%; white-space: nowrap; }
.selected-pair .factor-pair-ring { border-color: var(--topic); background: var(--topic-pale); }
.selected-pair td { color: var(--topic-text); }
.pair-omissions td { padding-block: 3px; color: #64748b; font-size: var(--card-body-size); }
.pair-next { text-align: center; }
.practice-answer .quadratic-pair-method { width: min(100%, 540px); margin-inline: auto; }
@media (max-width: 400px) {
  .quadratic-pair-table th, .quadratic-pair-table td { padding-inline: 4px; }
  .factor-pair-ring { padding-inline: 5px; }
}
/* V52: one palette for like-term rectangles, grouped working and answers. */
.revision-paper {
  --like-terms-green: #15803d;
  --like-terms-blue: #2563eb;
  --like-terms-red: #dc2626;
  --like-terms-yellow: #9b7600;
}
.like-terms-expression { display:inline-block; position:relative; padding:8px 0; }
.like-terms-overlay { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.revision-paper :is(.like-x1,.like-x2,.group-x,.answer-x) { color:var(--like-terms-green); fill:currentColor; stroke:currentColor; }
.revision-paper :is(.like-y1,.like-y2,.group-y,.answer-y) { color:var(--like-terms-blue); fill:currentColor; stroke:currentColor; }
.revision-paper :is(.like-xy1,.like-xy2,.group-xy,.answer-xy) { color:var(--like-terms-red); fill:currentColor; stroke:currentColor; }
.revision-paper :is(.like-fourth,.group-fourth,.answer-fourth) { color:var(--like-terms-yellow); fill:currentColor; stroke:currentColor; }
/* V45: each candidate is checked in the original absolute-value equation. */
.absolute-value-cases { display: grid; gap: 15px; min-width: 0; }
.worked-example .absolute-value-cases { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
/* V48: share the heading, working and checking rows in Example 2. */
.aligned-case-checks { container-type: inline-size; row-gap: 0; }
.aligned-case-checks > .absolute-case { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
@container (max-width: 574px) {
  .aligned-case-checks > .absolute-case + .absolute-case { margin-top: 15px; }
}
.absolute-case { min-width: 0; border-top: 1px dashed var(--topic-line); padding-top: 12px; }
.absolute-case-label { margin: 0 0 5px; color: var(--topic-text); font-size: var(--card-body-size); font-weight: 750; text-align: left; }
.absolute-check { margin-top: 8px; padding: 10px; background: #ffffffc9; border: 1px solid var(--topic-line); border-radius: 10px; min-width: 0; }
.absolute-check h4 { margin: 0 0 9px; color: #334155; font-size: var(--card-body-size); font-weight: 650; text-align: center; }
.absolute-check-side { display: grid; gap: 3px; min-width: 0; margin: 7px 0; }
.absolute-side-label { color: #475569; font-size: calc(.78rem + 1pt); text-align: left; }
.absolute-check-maths { max-width: 100%; overflow-x: auto; text-align: center; padding-block: 3px; font-size: var(--working-maths-size); }
.absolute-check-maths .math { white-space: nowrap; }
.absolute-comparison { text-align: center; margin: 8px 0; font-size: var(--working-maths-size); }
.absolute-verdict { display: flex; width: fit-content; max-width: 100%; margin: 8px auto 0; align-items: center; justify-content: center; gap: 7px; padding: 6px 10px; border: 1px solid; border-radius: 9px; font-size: var(--card-body-size); }
.absolute-verdict > svg { width: 26px; height: 26px; flex: 0 0 26px; }
.absolute-verdict.accepted { color: #146c36; border-color: #a6d7b7; background: #ecfdf3; }
.absolute-verdict.rejected { color: #b42327; border-color: #f0a7aa; background: #fff1f2; }
.absolute-verdict > .math { font-size: 1em; }
.practice-answer .absolute-value-cases { width: min(100%, 540px); margin: 0 auto; }
/* V44: static grid-method examples share the card's topic palette. */
.column-expansion { margin:8px 0 0; }
.column-original,.column-reorder { text-align:center; font-size:var(--working-maths-size); }
.column-original { margin:6px 0 14px; }
.column-reorder { margin:6px 0 0; }
.column-stages { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.column-expansion-triple .column-stages { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.column-stage { min-width:0; }
.column-stage-label { text-align:left; line-height:1.5; margin:4px 0 8px; color:inherit; }
.column-stage-label strong { margin-right:4px; }
.column-expansion .column-expansion-diagram { display:block; }
.column-expansion .expansion-column-diagram { display:block; max-width:100%; height:auto; margin:0 auto; overflow:visible; }
/* Override the shared black diagram ink so each product follows its arrow. */
.expansion-column-diagram .diagram-math { color: inherit; }
.column-expansion .column-note { margin:8px 0; line-height:1.5; font-size:inherit; text-align:center; color:inherit; }
.column-expansion .final-answer { margin-top:8px; }
@media(max-width:620px) { .column-expansion-triple .column-stages { grid-template-columns:minmax(0,1fr); gap:20px; } }
.expansion-grids { margin:14px 0 8px; }
.expansion-grid-stage + .expansion-grid-stage { margin-top:20px; padding-top:16px; border-top:1px dashed var(--topic-line); }
.grid-stage-heading { display:flex; align-items:center; gap:8px; font-weight:700; margin:0 0 10px; }
.grid-stage-pill { display:inline-flex; align-items:center; justify-content:center; flex:0 0 25px; height:25px; border-radius:7px; background:var(--topic); color:#fff; font-size:.85rem; }
.grid-stage-expression { text-align:center; font-size:var(--working-maths-size); margin:8px 0 12px; }
.expansion-grid-scroll { overflow-x:auto; max-width:100%; padding:2px 0; }
.expansion-grid { border-collapse:separate; border-spacing:0; margin:0 auto; width:max-content; font-size:var(--working-maths-size); border:1.5px solid var(--topic); border-radius:9px; overflow:hidden; }
.expansion-grid th,.expansion-grid td { text-align:center; padding:9px 13px; border-right:1px solid var(--topic-line); border-bottom:1px solid var(--topic-line); font-weight:400; white-space:nowrap; }
.expansion-grid tr > :last-child { border-right:0; }
.expansion-grid tbody tr:last-child > * { border-bottom:0; }
.expansion-grid th { background:var(--topic-pale); color:var(--topic); }
.expansion-grid td { background:#fff; }
.expansion-grid .grid-product-row-1 th { color:#c45b08; background:#fff3e8; }
.grid-collection-label { text-align:center; font-size:calc(.85rem + 1pt); margin:10px 0 4px; color:#475569; }
@media(max-width:480px) { .expansion-grid th,.expansion-grid td { padding:8px 10px; } }

/* V58: keep linked-triangle drawings legible without enlarging the labels on wide cards. */
.linked-triangles { display:block; width:100%; max-width:440px; margin:14px auto; }

/* V59: full-width graph examples, exact coordinate grids and readable mappings. */
.transformation-story { margin: 16px 0; }
.transformation-steps { display: block; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: transform-step; }
.transformation-steps li { min-width: 0; counter-increment: transform-step; margin: 0 0 18px; padding: 0; border: 0; border-radius: 0; background: none; }
.transformation-steps strong::before { content: counter(transform-step) '. '; color: var(--topic-text, var(--topic)); }
.transformation-steps p { margin: 6px 0; }
.transformation-maths { text-align: left; overflow-x: auto; padding: 5px 0; }
.transformation-panels { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px; align-items:start; margin-top:18px; }
.transformation-panels figure { min-width:0; margin:0; background:#ffffffb8; border:1px solid var(--topic-line); border-radius:12px; padding:10px 4px 0; }
.transformation-panels figcaption { text-align:center; padding:4px 8px 10px; font-weight:700; }
.transformation-graph { max-width:520px; margin:10px auto 0; }
.transformation-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:12px 0; }
.transformation-legend span { display:inline-flex; align-items:center; gap:8px; }
.transformation-legend i { display:inline-block; width:26px; border-top:3px solid #64748b; }
.transformation-legend .original { border-top-style:dashed; }
.transformation-legend .image { border-color:#15803d; }
.transformation-legend .auxiliary { border-color:#b45309; border-top-style:dashed; }
.transformation-facts { padding-left:22px; margin:12px 0; }
.transformation-mapping { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; padding:12px 0; }
.transformation-mapping > div { display:flex; align-items:center; gap:10px; }
@media (max-width:700px) { .transformation-panels { grid-template-columns:1fr; } }
.transformation-panels .transform-detail { grid-column: 1 / -1; width: min(100%,420px); justify-self: center; }

/* Keep graph labels legible when a curve passes behind them. */
.transformation-graph .diagram-math path { paint-order:stroke fill; stroke:#fff; stroke-width:60px; stroke-linejoin:round; }
/* Pair the plot origins even when one caption contains a tall fraction. */
.transformation-panels figcaption { min-height:68px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px; }

/* Solid topic controls always use white ink; outlined controls retain topic text. */
.face-label, .practice-actions .question-arrow, .question-dots button,
.reference-table th, .transformation-maths, .placeholder-zero,
.bus-carry, .expansion-grid th, .practice-noscript summary {
  color: var(--topic-text, var(--topic));
}
.question-dots button[aria-current="true"], .place-grid .place-focus, .grid-stage-pill {
  color: #fff;
}

/* V61 elementary geometry: drawings stay centred; all labels remain horizontal. */
.elementary-geometry { display:block; width:100%; max-width:560px; height:auto; margin:12px auto 8px; overflow:visible; }
.geometry-responsive { container-type:inline-size; width:100%; }
.geometry-mobile { display:none; }
.v61-work-intro { display:grid; justify-items:center; gap:7px; margin:8px 0; max-width:100%; }
.v61-work-intro > .math { max-width:100%; overflow-x:auto; }
.v61-work-intro .work-note { text-align:center; line-height:1.4; }
@container (max-width:370px) {
  .geometry-desktop { display:none; }
  .geometry-mobile { display:block; }
}
.elementary-geometry .v61-fill { fill:var(--topic-pale); fill-opacity:.48; stroke:none; }
.elementary-geometry .v61-edge { fill:none; stroke:var(--topic-text); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.elementary-geometry .v61-guide { fill:none; stroke:#64748b; stroke-width:1.25; stroke-dasharray:5 4; }
.elementary-geometry .v61-mark,.elementary-geometry .v61-angle-arc { fill:none; stroke:var(--topic-text); stroke-width:1.25; stroke-linejoin:round; }
.elementary-geometry .diagram-math { color:#172033; }
.elementary-geometry .v61-label-leader { fill:none; stroke:#64748b; stroke-width:1; }
.elementary-geometry .v61-scale-note { font:11px Arial,sans-serif; fill:#475569; }
.geometry-reference-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:18px; align-items:stretch; }
.geometry-reference-panel { min-width:0; border:1px solid var(--topic-line); border-radius:13px; padding:12px; background:linear-gradient(145deg,#fff,var(--topic-pale)); }
.geometry-reference-panel h2 { margin:0; color:var(--topic-text); font-size:1rem; line-height:1.3; text-align:center; }
.geometry-reference-panel .elementary-geometry { margin:6px auto 10px; max-width:360px; }
.geometry-reference-facts { margin:0; padding-left:17px; font-size:calc(.8rem + 1pt); line-height:1.45; }
.geometry-reference-facts li + li { margin-top:7px; }
.geometry-reference-rule { margin-top:12px; padding-top:10px; border-top:1px solid var(--topic-line); text-align:center; }
.geometry-reference-rule .math { font-size:calc(.95rem + 1pt); }
@media(max-width:720px) {
  .geometry-reference-grid.quadrilaterals { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .geometry-reference-grid.triangles { grid-template-columns:1fr; }
  .geometry-reference-grid.triangles .geometry-reference-panel { display:grid; grid-template-columns:minmax(0,1fr); }
}
@media(max-width:440px) {
  .geometry-reference-grid { padding:14px; }
  .geometry-reference-grid.quadrilaterals { grid-template-columns:1fr; }
  .geometry-reference-panel .elementary-geometry { max-width:300px; }
}

/* V62 circle theorem cards: exact geometry, with a rule above two examples. */
.circle-theorem-rule{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:22px;margin:20px 0 28px;padding:18px 24px;border:2px solid #e6bf46;border-radius:18px;background:#fffdf3}
.circle-rule-copy h2{font-size:1.2rem;margin:0 0 12px;color:#6b4f00}.circle-rule-copy p{font-size:1.08rem;line-height:1.65;margin:0 0 18px}.circle-rule-formula{font-size:1.22rem;padding:12px 0;color:#142d4e}
.circle-theorem-diagram{display:block;width:100%;height:auto;max-width:560px;margin:0 auto;overflow:visible}.circle-theorem-diagram .ct-circle{fill:#f8fbff;stroke:#213d5c;stroke-width:2.6}.circle-theorem-diagram .ct-edge{fill:none;stroke:#213d5c;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.circle-theorem-diagram .ct-highlight-arc{fill:none;stroke:#1974b8;stroke-width:5;stroke-linecap:round}.circle-theorem-diagram .ct-tick,.circle-theorem-diagram .ct-right{fill:none;stroke:#213d5c;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.circle-theorem-diagram .ct-angle{fill:none;stroke:#1974b8;stroke-width:2}.circle-theorem-diagram .ct-sector{fill:#1974b812;stroke:none}.circle-theorem-diagram .ct-angle.unknown{stroke:#c86612}.circle-theorem-diagram .ct-sector.unknown{fill:#e9851818}.circle-theorem-diagram .ct-angle.algebra{stroke:#7950b2}.circle-theorem-diagram .ct-sector.algebra{fill:#7950b212}.circle-theorem-diagram .ct-point{fill:#213d5c}.circle-theorem-diagram .ct-leader{fill:none;stroke:#7d8fa3;stroke-width:1.15;stroke-linecap:round}.circle-theorem-diagram .diagram-math{fill:#142d4e;color:#142d4e}
@media(max-width:680px){.circle-theorem-rule{grid-template-columns:1fr;gap:4px;padding:18px 12px}.circle-rule-copy h2{font-size:1.08rem}.circle-rule-copy p{font-size:1rem}.circle-rule-formula{font-size:1.08rem}.circle-theorem-rule .circle-theorem-diagram{max-width:450px}}
@media(max-width:520px){.circle-theorem-card .practice-primary{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.circle-theorem-card .practice-actions .generate-questions,.circle-theorem-card .practice-actions .check-answer{width:100%;max-width:none;min-width:0;box-sizing:border-box;white-space:normal;line-height:1.35;padding:9px 7px}.circle-theorem-card .practice-bottom{padding-left:10px;padding-right:10px}.circle-theorem-card .practice-actions .question-arrow{width:36px;height:36px;min-height:36px;flex-basis:36px}}

/* V63: compact geometry, centred practice, and neutral circle constructions. */
.elementary-geometry{max-width:500px;margin:4px auto 6px}
.practice-face .diagram{margin-left:auto;margin-right:auto}
.practice-face .geometry-responsive{width:100%;margin-inline:auto}
.circle-theorem-diagram .ct-background{fill:none;stroke:none}
.circle-theorem-diagram .ct-circle{fill:none}
.circle-theorem-diagram .ct-angle,.circle-theorem-diagram .ct-angle.unknown,.circle-theorem-diagram .ct-angle.algebra{stroke:#213d5c;stroke-width:1.6}
.circle-theorem-diagram .ct-edge{stroke-width:2.2}
.measure-summary{display:grid;justify-items:center;gap:7px;margin:12px 0;text-align:center;max-width:100%}
.measure-summary>.math{max-width:100%;overflow-x:auto;font-size:var(--working-maths-size)}
.measure-summary .work-note{line-height:1.45;font-size:14px}
.card-heading .card-title-subtitle{display:block;font-size:.76em;line-height:1.4;margin-top:7px}
.skill-name{line-height:1.4}
@media(max-width:520px){
.revision-paper .practice-primary{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.revision-paper .practice-actions .generate-questions,.revision-paper .practice-actions .check-answer{width:100%;max-width:none;min-width:0;box-sizing:border-box;white-space:normal;line-height:1.35;padding:9px 7px}
.revision-paper .practice-bottom{padding-left:10px;padding-right:10px}
.revision-paper .practice-actions .question-arrow{width:36px;height:36px;min-height:36px;flex-basis:36px}
}

/* V64 proportion tables and exact graphs. */
.v64-table-wrap { margin: 14px auto; width:100%; max-width:360px; }
.v64-value-table { border-collapse:collapse; table-layout:fixed; width:100%; font-size:1rem; text-align:center; }
.v64-value-table th, .v64-value-table td { border:1px solid var(--topic-line); padding:.5rem .18rem; }
.v64-value-table th { background:var(--topic-pale); color:var(--topic-text); }
.v64-value-table .math { font-size:1em; }
.v64-value-table svg { max-width:100%; }
.v64-proportion-graph { display:block; width:100%; max-width:360px; height:auto; margin:4px auto 12px; }
.v64-grid { stroke:#d7dfe8; stroke-width:1; fill:none; }
.v64-axis { stroke:#283e57; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.v64-curve { stroke:var(--topic-text); stroke-width:3; fill:none; stroke-linecap:round; }
.v64-sample { fill:var(--topic-text); }

/* V72: opening points, Remember notes and example conclusions share the same prose. */
.revision-paper :is(.key-points, .remember, .teaching-note) {
  font-family: Arial, Helvetica, sans-serif; font-size: var(--card-body-size);
  font-weight: 400; line-height: 1.6; color: #0f172a;
}
.revision-paper :is(.key-points, .remember, .teaching-note) > p { color: inherit; font: inherit; }

/* V78: preserve a single product in the compact difference-of-squares answer. */
.final-answer.fit-answer > .answer-box { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.fit-answer .answer-copy > .math { display: block; max-width: 100%; }
.fit-answer .math > mjx-container > svg { max-width: 100%; height: auto; }

/* V94: a measured question window, framed like its revision card. */
.practice-fullscreen-toggle {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px;
  padding: 0; border: 1px solid var(--topic-line); border-radius: 50%;
  background: #fff; color: var(--topic-text, var(--topic)); line-height: 1;
}
.practice-fullscreen-toggle svg {
  display: block; width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.practice-fullscreen-toggle:hover { background: var(--topic-pale); }
.practice-fullscreen {
  position: fixed; inset: 0; box-sizing: border-box; margin: auto; padding: 4px;
  width: min(784px, calc(100vw - 36px)); max-width: calc(100vw - 36px);
  height: fit-content; max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px);
  border: 0; border-radius: 24px; background: #fff; color: #0f172a;
  overflow: visible; font: inherit; box-shadow: 0 22px 90px #0f172a55;
}
.practice-fullscreen[open] { display: flex; flex-direction: column; }
.practice-fullscreen::backdrop { background: #0f172a80; backdrop-filter: blur(3px); }
.practice-fullscreen > .practice-deck {
  display: flex; flex-direction: column; width: 100%; min-height: 0;
  border: 0; border-radius: 20px; background: #fff; overflow: clip;
}
.practice-fullscreen .practice-top {
  flex: 0 0 auto; padding: 14px 18px; flex-wrap: wrap; gap: 8px 12px;
  background: linear-gradient(125deg, var(--topic-line), var(--topic-pale) 70%);
  border-bottom: 1px solid var(--topic-line);
}
.practice-popout-topic { display: none; }
.practice-fullscreen .practice-popout-topic {
  display: block; order: 2; width: 100%; font-weight: 600; font-size: .95rem; line-height: 1.35;
}
.practice-fullscreen .practice-fullscreen-toggle { margin-left: auto; flex: 0 0 40px; }
.practice-fullscreen #interactive-practice { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
.practice-fullscreen .practice-stage {
  display: flex; flex-direction: column; flex: 0 1 var(--practice-content-height);
  height: var(--practice-content-height); min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
.practice-fullscreen .practice-turner { flex: 1 0 auto; width: 100%; min-width: 0; margin-inline: auto; }
/* Both faces keep their natural height within the reserved stage. */
.practice-fullscreen .practice-face,
.practice-fullscreen .practice-face[aria-hidden="true"] { position: relative; inset: auto; height: auto; overflow: visible; }
.practice-fullscreen .practice-face { padding: 18px 22px; gap: 12px; }
/* A scrollable question window must not rely on a clipped 3D back face.
   The measured stage reserves its height; only the active face is displayed. */
.practice-fullscreen:not(.practice-popout-measure) .practice-turner,
.practice-fullscreen:not(.practice-popout-measure) .practice-turner.is-flipped {
  transform: none; transform-style: flat; transition: none;
}
.practice-fullscreen:not(.practice-popout-measure) .practice-face {
  transform: none; backface-visibility: visible; -webkit-backface-visibility: visible;
}
.practice-fullscreen:not(.practice-popout-measure) .practice-face[aria-hidden="true"] {
  display: none; visibility: hidden; pointer-events: none;
}
.practice-fullscreen .practice-bottom {
  flex: 0 0 auto; padding: 13px 18px 15px;
  background: var(--topic-pale); border-top: 1px solid var(--topic-line);
}
.practice-fullscreen .practice-actions { max-width: 780px; margin-inline: auto; }
.practice-fullscreen .question-dots { margin-top: 12px; }
.practice-fullscreen.practice-popout-measure {
  display: block; inset: auto; left: -20000px; top: 0; margin: 0;
  height: auto; max-height: none; visibility: hidden; pointer-events: none;
}
.practice-popout-measure .practice-stage { display: block; height: auto; max-height: none; overflow-y: scroll; }
.practice-popout-measure .practice-turner { display: block; }
.practice-popout-measure .practice-face { transform: none; backface-visibility: visible; min-height: 135px; }
.practice-popout-measure::after { content: none; }
@media (max-width: 650px) { .practice-fullscreen .practice-face { padding: 16px; } }
@media (max-height: 420px) {
  .practice-fullscreen .practice-top { padding-block: 6px; }
  .practice-fullscreen .practice-bottom { padding-block: 8px; }
  .practice-fullscreen .question-dots { margin-top: 8px; }
}

/* V101: qualification-specific card eligibility within the existing tier pages. */
.qualification-field { margin:0 0 1.25rem; max-width:42rem; }
.qualification-field label { display:block; font-weight:700; margin-bottom:.4rem; }
.qualification-field select { width:100%; max-width:30rem; padding:.7rem 2rem .7rem .8rem; border:1px solid #b9bdc5; border-radius:.65rem; background:#fff; color:#17202d; font:inherit; }
.qualification-field select:focus-visible { outline:3px solid #3159bc; outline-offset:3px; }
.qualification-field p { margin:.5rem 0 0; font-size:.88rem; line-height:1.5; color:#536070; }
.qualification-directory .availability { display:none; }
.curriculum-coverage { margin:0 0 1rem; font-size:.84rem; line-height:1.6; color:#465368; }
.curriculum-coverage summary { cursor:pointer; font-weight:700; }
.curriculum-coverage p { margin:.4rem 0 0; }
.curriculum-notice { padding:.65rem .85rem; margin:0 0 1rem; border-left:3px solid var(--topic); background:#f4f6fa; font-size:.9rem; line-height:1.55; }

/* V116: mathematical headings and labelled integration diagrams. */
.skill-name .math, .card-heading h1 .math { font-size: 1em; }
.integration-figure { margin: 16px 0; }
.integration-region { display: block; width: min(100%, 510px); height: auto; margin: 0 auto; }
.integration-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; font-size: .95em; }
.integration-key > span { display: inline-flex; align-items: center; gap: 9px; }
.integration-key-line { display: inline-block; width: 25px; border-top: 2px solid var(--topic); }
.integration-key-line.dashed { border-top: 2px dashed #334155; }
.math-phrase { display: inline-block; max-width: 100%; white-space: nowrap; vertical-align: baseline; }
.math-phrase .math > mjx-container > svg { max-width: calc(100% - .4em); }
/* Let the sticky menu follow the full directory, including long mobile panels. */
body[data-section="revision"] { height: auto; min-height: 100vh; }
@media (max-width: 420px) {
  .skill-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 7px 8px; }
  .skill-group h3 { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; }
  .skill-group-count { grid-column: 1; grid-row: 2; justify-self: start; width: auto; min-width: 80px; }
  .skill-group-chevron { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}