/* SAB v5 exam guides ("SAB Exam Guides"): server-rendered, light theme. */
body:has(.guide-page) main { max-width: none; }
.guide-page { --guide-width: 1184px; color: #1b2a24; }
.guide-page h1, .guide-page h2, .guide-page h3 { font-family: Lora, Georgia, serif; font-weight: 400; margin: 0; }
.guide-page p { margin: 0; }
.guide-page a { color: #3a5fa8; text-decoration: none; }
.guide-page a:hover { text-decoration: underline; }
.guide-page .button { text-decoration: none; }
.guide-page .button.primary { background: var(--accent, #7a3550); border-color: var(--accent, #7a3550); color: #fff; }
.guide-eyebrow, .guide-page .guide-eyebrow { font: 600 10.5px 'Work Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #646e69; }
.guide-eyebrow.accent { color: var(--accent, #7a3550); }

.guide-page .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Band */
.guide-band { background: #f3efe6; border-bottom: 1px solid #e3ded2; padding: 34px 32px 40px; }
.guide-band-inner { max-width: var(--guide-width); margin: auto; display: grid; gap: 16px; }
.guide-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: #4a554f; }
.guide-crumbs li + li::before { content: '/'; margin-right: 6px; color: #8b938e; }
.guide-band h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -.02em; max-width: 19ch; text-wrap: balance; }
.guide-lead { font-size: 18px; line-height: 1.6; color: #4a554f; max-width: 52ch; font-weight: 300; }
.guide-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13.5px; color: #4a554f; margin-top: 6px; }
.guide-byline img { background: #fffefb; border: 1px solid #e3ded2; border-radius: 99px; padding: 6px; width: 34px; height: 34px; }
.guide-byline b { font-weight: 500; color: #1b2a24; }
.guide-byline span + span::before { content: '·'; margin-right: 18px; color: #b9b2a2; }
.guide-pills { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.guide-pills li { background: #fffefb; border: 1px solid #e3ded2; border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }

/* Layout */
.guide-layout { max-width: calc(var(--guide-width) + 64px); margin: auto; padding: 44px 32px 24px; display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 56px; align-items: start; }
.guide-layout.section-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
.guide-toc { position: sticky; top: 24px; display: grid; gap: 22px; }
.guide-toc summary { font: 600 10.5px 'Work Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #646e69; list-style: none; cursor: default; margin-bottom: 12px; }
.guide-toc summary::-webkit-details-marker { display: none; }
.guide-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid #e3ded2; }
.guide-toc li a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; color: #3d4844; font-size: 14px; }
.guide-toc li a:hover { border-left-color: var(--accent, #7a3550); text-decoration: none; color: #1b2a24; }
.guide-side-cta { background: var(--tint, #f5eaee); border: 1px solid var(--accent-border, #ead7de); border-radius: 12px; padding: 20px 18px; display: grid; gap: 10px; }
.guide-side-cta h2 { font-size: 20px; line-height: 1.25; }
.guide-side-cta p { font-size: 13.5px; color: #4a554f; line-height: 1.55; }
.guide-side-cta .button { justify-content: center; padding: 11px 16px; border-radius: 8px; }
.guide-side { display: grid; gap: 18px; position: sticky; top: 24px; }
.guide-side-links { background: #fffefb; border: 1px solid #e3ded2; border-radius: 12px; padding: 18px 20px; display: grid; gap: 8px; }
.guide-side-links a { font-size: 14px; }
.guide-article { display: grid; gap: 52px; min-width: 0; }
.guide-section { display: grid; gap: 16px; scroll-margin-top: 24px; }
.guide-section > h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.01em; }
.guide-section > p { font-size: 15.5px; line-height: 1.75; color: #2a3833; }
.guide-meta { font-size: 13px; color: #646e69; }
.guide-source { font-size: 12.5px; line-height: 1.6; color: #646e69; }

/* Quick answer and figures */
.quick-answer { background: #fffefb; border: 1px solid #e3ded2; border-left: 4px solid var(--accent, #7a3550); border-radius: 12px; padding: 22px 28px; display: grid; gap: 10px; }
.quick-answer .guide-eyebrow { color: var(--accent, #7a3550); }
.quick-answer p:not(.guide-eyebrow) { font-size: 16px; line-height: 1.75; }
.guide-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; border-top: 1.5px solid #1b2a24; padding-top: 18px; margin: 0; }
.guide-glance > div { display: flex; flex-direction: column; gap: 2px; }
.guide-glance dd { margin: 0; font: 400 32px/1.1 Lora, Georgia, serif; }
.guide-glance dt { order: 1; font-size: 13px; color: #4a554f; }

/* Tables and cards */
.guide-table-wrap { overflow-x: auto; position: relative; background: #fffefb; border: 1px solid #e3ded2; border-radius: 12px; }
.guide-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.guide-table thead th { font: 600 10.5px 'Work Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 14px 20px; border-bottom: 1.5px solid #1b2a24; white-space: nowrap; }
.guide-table tbody th, .guide-table tbody td { padding: 15px 20px; border-bottom: 1px solid #f0ece2; text-align: left; vertical-align: top; white-space: normal; }
.guide-table tbody tr:last-child > * { border-bottom: 0; }
.guide-table tbody th { font: 500 15px 'Work Sans', sans-serif; letter-spacing: 0; text-transform: none; }
.guide-table.outcomes tbody th { width: 34%; }
.guide-table.compare { table-layout: fixed; }
.guide-table.compare thead th:first-child { width: 22%; }
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-card { background: #fffefb; border: 1px solid #e3ded2; border-radius: 12px; padding: 18px 20px; display: grid; gap: 6px; align-content: start; }
.guide-card h3 { font: 500 15px 'Work Sans', sans-serif; }
.guide-card p { font-size: 14px; line-height: 1.6; color: #4a554f; }
.guide-card > a { font-size: 13.5px; font-weight: 500; }
.guide-card.link { color: inherit; }
.guide-card.link h3 { font: 400 21px Lora, Georgia, serif; }
.guide-card.link:hover { border-color: #c9c2b2; text-decoration: none; }
.tests-rows { border-top: 1.5px solid #1b2a24; }
.tests-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid #e3ded2; }
.tests-row h3 { font: 500 16px 'Work Sans', sans-serif; }
.tests-row p { font-size: 15px; line-height: 1.7; color: #2a3833; }
.guide-tags { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.guide-tags li { background: #f0ece2; border-radius: 999px; padding: 5px 12px; font-size: 13px; white-space: nowrap; }
.guide-bullets { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.6; }
.guide-bullets li::marker { color: var(--accent, #7a3550); }
.guide-link-card { display: flex; align-items: center; gap: 16px; background: #fffefb; border: 1px solid #e3ded2; border-radius: 12px; padding: 16px 20px; color: #1b2a24 !important; }
.guide-link-card span { flex: 1; font-weight: 500; }
.guide-link-card b { color: #3a5fa8; font-weight: 500; white-space: nowrap; font-size: 14px; }

/* Tabs: every panel is in the HTML; without scripts they show one after another. */
.guide-tab-list { display: none; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.guide-tabs.is-enhanced .guide-tab-list { display: flex; }
.guide-tabs.is-enhanced .tab-panel-heading { display: none; }
.guide-tabs:not(.is-enhanced) .guide-tab-panel + .guide-tab-panel { margin-top: 22px; }
.tab-panel-heading { font: 500 15px 'Work Sans', sans-serif !important; margin-bottom: 10px !important; }
.guide-tab-list button { border: 1px solid #ddd8ca; background: #fffefb; border-radius: 999px; padding: 8px 16px; font: 500 14px 'Work Sans', sans-serif; color: #1b2a24; }
.guide-tab-list button[aria-selected="true"] { background: #1b2a24; border-color: #1b2a24; color: #faf8f3; }
.date-status { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.date-status.is-confirmed { background: #e6efe8; color: #2f6b4f; }
.date-status.is-expected { background: #fbf3e4; color: #7a5410; }
.dates-pending { background: #fffefb; border: 1px dashed #d9d3c4; border-radius: 12px; padding: 20px; font-size: 15px; color: #4a554f; }

/* Sample question in the exam-style frame */
.sample-frame { background: #fff; border: 1px solid #d9dde6; border-radius: 12px; overflow: hidden; }
.sample-frame > header { display: flex; justify-content: space-between; gap: 12px; background: #002664; color: #fff; padding: 11px 18px; font-size: 13.5px; font-weight: 500; }
.sample-body { padding: 20px 22px 22px; display: grid; gap: 14px; font-size: 15.5px; line-height: 1.65; }
.sample-passage { background: #f7f8fb; border: 1px solid #e3e7ef; border-radius: 8px; padding: 14px 18px; font-size: 15px; }
.sample-passage.is-poem p { font-family: Lora, Georgia, serif; line-height: 1.8; }
.sample-passage-label { font-weight: 600; margin-bottom: 6px !important; }
.sample-prompt { display: grid; gap: 10px; white-space: normal; }
.sample-options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 14.5px; }
.sample-options li { border: 1px solid #d9dde6; border-radius: 8px; padding: 10px 14px; display: flex; gap: 10px; }
.sample-solution { border-top: 1px solid #eceef3; padding-top: 14px; display: grid; gap: 6px; font-size: 14.5px; }
.sample-solution .guide-eyebrow { color: #2f6b4f; }

/* FAQ */
.guide-faq { border-top: 1px solid #e3ded2; }
.guide-faq details { border-bottom: 1px solid #e3ded2; padding: 16px 0; }
.guide-faq summary { cursor: pointer; list-style: none; display: flex; gap: 16px; font-weight: 500; font-size: 15.5px; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: '+'; margin-left: auto; color: var(--accent, #7a3550); font-weight: 400; }
.guide-faq details[open] summary::after { content: '−'; }
.guide-faq details p { margin-top: 10px; font-size: 15px; line-height: 1.7; color: #3d4844; }

/* Results guide */
.band-list { background: #fffefb; border: 1px solid #e3ded2; border-radius: 12px; }
.band-list > div { display: grid; grid-template-columns: 140px 200px minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 20px; font-size: 14.5px; }
.band-list > div + div { border-top: 1px solid #f0ece2; }
.band-list b { font-weight: 500; }
.band-bar { display: block; height: 10px; border-radius: 99px; background: var(--accent, #7a3550); justify-self: start; }
.band-list > div:nth-child(2) .band-bar { opacity: .75; }
.band-list > div:nth-child(3) .band-bar { opacity: .5; }
.band-list > div:nth-child(4) .band-bar { opacity: .25; }
.band-list span:last-child { color: #4a554f; font-size: 13.5px; }
.key-facts { background: #fffefb; border: 1px solid #e3ded2; border-radius: 12px; padding: 18px 20px; }
.key-facts dl { margin: 10px 0 0; }
.key-facts dl > div { padding: 10px 0; border-top: 1px solid #f0ece2; }
.key-facts dt { font-size: 12.5px; color: #646e69; }
.key-facts dd { margin: 2px 0 0; font-weight: 500; font-size: 14px; }

/* Related, CTA and index */
.guide-wide { max-width: calc(var(--guide-width) + 64px); margin: auto; padding: 24px 32px 64px; display: grid; gap: 28px; }
.guide-related { border-top: 1px solid #e3ded2; padding-top: 34px; display: grid; gap: 16px; }
.guide-cta { display: flex; align-items: center; gap: 24px; background: var(--tint, #f5eaee); border: 1px solid var(--accent-border, #ead7de); border-radius: 16px; padding: 34px 38px; }
.guide-cta > div { flex: 1; display: grid; gap: 6px; }
.guide-cta h2 { font-size: 30px; line-height: 1.2; }
.guide-cta p { color: #3d4844; font-size: 15px; }
.guide-cta .button { padding: 13px 22px; border-radius: 9px; font-size: 15px; }
.guide-index { max-width: 760px; margin: auto; padding: 40px 32px 72px; display: grid; gap: 16px; }
.guide-index-card { background: #fffefb; border: 1px solid #e3ded2; border-top: 3px solid var(--card-rule, #e3ded2); border-radius: 12px; padding: 22px 24px; display: grid; gap: 8px; }
.guide-index-card h2 { font-size: 26px; }
.guide-index-card h2 a { color: #1b2a24 !important; }
.guide-index-card p { color: #4a554f; font-size: 14px; }
.guide-index-card nav { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; }
.guide-index-card nav a + a::before { content: '·'; color: #8b938e; margin: 0 8px; display: inline-block; }
.inside-guides { font-size: 14.5px; color: #4a554f; }
.inside-guides a { color: #3a5fa8; }

/* Past papers (7e): the Department's practice tests, linked from its site. */
.past-papers-head { max-width: var(--guide-width); display: flex; align-items: flex-end; gap: 32px; }
.past-papers-intro { flex: 1; display: grid; gap: 16px; }
.past-papers-head h1 { max-width: 22ch; }
.past-papers-head .guide-lead { max-width: 64ch; }
.exam-switch-pill { display: flex; flex: none; background: #e9e3d6; border-radius: 999px; padding: 4px; }
.exam-switch-pill a { font: 500 13.5px 'Work Sans', sans-serif; color: #4a554f; text-decoration: none; border-radius: 999px; padding: 9px 18px; white-space: nowrap; }
.exam-switch-pill a[aria-current="page"] { background: #fffefb; color: #1b2a24; box-shadow: 0 1px 3px #1b2a241f; }
.past-papers { grid-template-columns: minmax(0, 1fr); padding-top: 40px; gap: 36px; }
.official-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; background: #fffefb; border: 1px solid #e3ded2; border-radius: 16px; padding: 26px 30px; }
.official-icon { width: 56px; height: 56px; border-radius: 14px; background: #002664; display: grid; place-items: center; }
.official-eyebrow { font: 600 10.5px 'Work Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #002664; }
.official-card h2 { font: 400 24px/1.2 Lora, Georgia, serif; margin-top: 6px; }
.official-card p:not(.official-eyebrow) { font-size: 14.5px; line-height: 1.6; color: #4a554f; margin-top: 4px; }
/* The Department's navy, so the button reads as official rather than SAB's own. */
.guide-page .official-button { display: inline-flex; align-items: center; gap: 8px; background: #002664; border-color: #002664; color: #fff; border-radius: 9px; padding: 13px 20px; font: 500 14.5px 'Work Sans', sans-serif; white-space: nowrap; }
.past-papers-tests > header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.past-papers-tests h2 { flex: 1; font-size: 30px; line-height: 1.2; }
.paper-tabs { display: flex; gap: 8px; }
.paper-tabs a { font: 500 14px 'Work Sans', sans-serif; padding: 9px 18px; border-radius: 999px; border: 1px solid #ddd8ca; color: #3d4844; text-decoration: none; white-space: nowrap; }
.paper-tabs a[aria-current="page"] { background: #1b2a24; border-color: #1b2a24; color: #faf8f3; }
.past-papers-table tbody th, .past-papers-table tbody td { vertical-align: middle; }
.past-papers-table thead th:first-child { width: 31%; }
.paper-link { font: 500 13.5px 'Work Sans', sans-serif; color: #3a5fa8; text-decoration: none; white-space: nowrap; }
.paper-link svg { margin-right: 7px; vertical-align: -1px; }
.paper-link:hover { text-decoration: underline; }
.paper-meta { margin-left: 8px; font-size: 12px; color: #7c8580; white-space: nowrap; }
.paper-missing { font-size: 13px; color: #9aa29e; }
.paper-missing sup a { color: inherit; text-decoration: none; }
.past-papers-tests .guide-source { margin-top: 10px; font-size: 13px; }
@media (max-width: 1099px) {
  .guide-layout, .guide-layout.section-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .guide-toc, .guide-side { position: static; }
  .guide-toc details { background: #fffefb; border: 1px solid #e3ded2; border-radius: 12px; padding: 14px 18px; }
  .guide-toc summary { cursor: pointer; margin: 0; }
  .guide-toc details[open] summary { margin-bottom: 10px; }
  .guide-toc .guide-side-cta { display: none; }
  .guide-cards.three { grid-template-columns: minmax(0, 1fr); }
  .past-papers-head { flex-direction: column; align-items: start; }
  .official-card { grid-template-columns: auto minmax(0, 1fr); }
  .official-card .official-button { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 700px) {
  .guide-band { padding: 26px 20px 30px; }
  .guide-layout { padding: 28px 20px 16px; }
  .guide-wide { padding: 16px 20px 48px; }
  .guide-index { padding: 28px 20px 56px; }
  .guide-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-cards, .sample-options { grid-template-columns: minmax(0, 1fr); }
  .tests-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .band-list > div { grid-template-columns: 100px minmax(0, 1fr); }
  .band-list span:last-child { grid-column: 1 / -1; }
  .guide-cta { flex-direction: column; align-items: start; padding: 26px 22px; }
  .guide-section > h2 { font-size: 27px; }
  .guide-byline { gap: 4px 14px; }
  .guide-byline span + span::before { display: none; }
  .guide-table thead th, .guide-table tbody th, .guide-table tbody td { padding-left: 14px; padding-right: 14px; }
  .official-card { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .official-card .official-button { white-space: normal; }
  .past-papers-tests > header { flex-wrap: wrap; }
  .past-papers-tests h2 { flex-basis: 100%; font-size: 27px; }
  .paper-meta { display: block; margin: 2px 0 0 20px; }
  .past-papers-table thead th { white-space: normal; }
  .past-papers-table thead th:first-child { width: auto; }
}