/* Cambridge English materials pages.
 *
 * The one stylesheet every page under tests/cambridge/ loads. It follows the
 * same design system as the IELTS pages (assets/ielts/ielts.css, from which
 * the shared rules were taken with the prefix changed) plus the Cambridge
 * parts: the test selector, the sample carousel, stat tiles, the scale
 * diagram, the estimator and the printed-task widgets. No utility framework,
 * no runtime: scripts/cambridge_layout.py, cambridge_blocks.py and
 * cambridge_content.py emit the class names used here.
 *
 * Breakpoints follow the design, except that with five section tabs the
 * header collapses into its menu below 1280px rather than 1060px. The
 * sidebar gives way to a row of section chips below 760px.
 */

@font-face {
  font-family: 'ProductSans';
  src: url('../fonts/Product Sans Regular.woff2') format('woff2'),
    url('../fonts/Product Sans Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ProductSans';
  src: url('../fonts/Product Sans Bold.woff2') format('woff2'),
    url('../fonts/Product Sans Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cb-ink: #1d1d3a;
  --cb-title: #111;
  --cb-prose: #4b4d55;
  --cb-soft: #3f4250;
  --cb-muted: #6e7071;
  --cb-brand: #5e61f6;
  --cb-brand-deep: #634bf6;
  --cb-teal: #0f6f7c;
  --cb-grad: linear-gradient(90deg, #634bf6, #4baef6);
  --cb-surface: #f8f9fb;
  --cb-tint: #f1f5ff;
  --cb-chip: #f2f4f7;
  --cb-chip-hover: #e9ecf3;
  --cb-chip-on: #e4f6f8;
  --cb-line: #e6e9f2;
  --cb-line-soft: #eceef3;
  --cb-rule: #eef0f5;
  --cb-gutter: clamp(16px, 3vw, 32px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.cb {
  margin: 0;
  background: #fff;
  color: var(--cb-ink);
  font-family: 'ProductSans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* The material is ours; copying it wholesale is discouraged. */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.cb input,
.cb select,
.cb textarea {
  -webkit-user-select: text;
  user-select: text;
}

.cb img {
  max-width: 100%;
}

:where(.cb) a {
  color: var(--cb-brand);
  text-decoration: none;
}

/* :where keeps these at element weight, so widgets injected by shared scripts
   (the app banner) keep their own link colours. */
:where(.cb) a:hover {
  color: var(--cb-brand-deep);
  text-decoration: underline;
}

.cb button,
.cb select,
.cb input {
  font-family: inherit;
}

.cb button:focus-visible,
.cb a:focus-visible,
.cb summary:focus-visible,
.cb select:focus-visible,
.cb input:focus-visible {
  outline: 2px solid var(--cb-brand);
  outline-offset: 2px;
}

/* index.js swaps the Log In link for the avatar of a signed-in visitor. */
.cb .hidden {
  display: none !important;
}

.cb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   header
   -------------------------------------------------------------------------- */

.cb-hdr {
  position: relative;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--cb-rule);
}

.cb-hdr__bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px var(--cb-gutter);
}

.cb-logo {
  display: block;
  flex: none;
}

.cb-logo img {
  display: block;
  height: 40px;
  width: auto;
}

/* test selector: the dropdown that replaced the test pill. index.js wires
   every non-language <select> in the header to switch tests. */
.cb-test {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--cb-chip);
  border-radius: 999px;
  font-size: 14px;
  color: var(--cb-ink);
  white-space: nowrap;
  cursor: pointer;
}

.cb-test:hover {
  background: var(--cb-chip-hover);
}

.cb-test select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--cb-ink);
  padding: 0 22px 0 0;
  cursor: pointer;
  outline-offset: 4px;
}

.cb-test .cb-caret {
  flex: none;
  margin-left: -22px;
  pointer-events: none;
}

.cb-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #d50032;
}

.cb-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--cb-chip);
  border-radius: 999px;
  font-size: 14px;
  color: var(--cb-ink);
  cursor: pointer;
}

.cb-lang:hover {
  background: var(--cb-chip-hover);
}

.cb-lang svg {
  flex: none;
}

.cb-lang select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--cb-ink);
  padding: 0 22px 0 2px;
  cursor: pointer;
  outline-offset: 4px;
}

.cb-lang .cb-caret {
  margin-left: -22px;
  pointer-events: none;
}

.cb-tabs {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 1.6vw, 22px);
  font-size: 16px;
  font-weight: 700;
}

.cb .cb-tab {
  color: var(--cb-muted);
  padding: 6px 10px;
  border-radius: 8px;
}

.cb .cb-tab:hover {
  color: var(--cb-title);
  text-decoration: none;
}

.cb .cb-tab.is-active {
  color: var(--cb-title);
  background: var(--cb-chip-on);
}

.cb .cb-login {
  flex: none;
  background: var(--cb-grad);
  color: #fff;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 12px;
  white-space: nowrap;
}

.cb .cb-login:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.05);
}

.cb-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #60a5fa;
  object-fit: cover;
}

/* The menu is a <details>, so it opens without JavaScript. Its button sits in
   the header bar; the panel drops below the bar and pushes the page down. */
.cb-mnav {
  display: none;
}

.cb-burger {
  position: absolute;
  top: 16px;
  right: var(--cb-gutter);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--cb-chip);
  color: var(--cb-ink);
  cursor: pointer;
  list-style: none;
}

.cb-burger::-webkit-details-marker {
  display: none;
}

.cb-burger::marker {
  content: '';
}

.cb-burger .cb-i-close,
.cb-mnav[open] .cb-burger .cb-i-open {
  display: none;
}

.cb-mnav[open] .cb-burger .cb-i-close {
  display: block;
}

.cb-mnav__panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 20px;
  border-top: 1px solid var(--cb-rule);
  font-size: 17px;
}

.cb .cb-mnav__link {
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--cb-ink);
}

.cb .cb-mnav__link.is-active {
  background: var(--cb-tint);
  color: var(--cb-brand);
  font-weight: 700;
}

.cb-mnav__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
}

.cb .cb-mnav__chip {
  background: var(--cb-chip);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--cb-ink);
}

.cb .cb-mnav__chip.is-active {
  background: var(--cb-chip-on);
}

.cb-mnav__lang {
  padding: 4px 0 8px;
}

.cb-mnav__lang .cb-lang {
  padding: 10px 16px;
}

.cb .cb-mnav__login {
  display: block;
  text-align: center;
  padding: 14px;
}

@media (max-width: 1279.98px) {
  .cb-hdr__full {
    display: none !important;
  }

  .cb-hdr__bar {
    padding-right: calc(var(--cb-gutter) + 60px);
  }

  .cb-test {
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
  }

  .cb-test select {
    font-size: 13px;
  }

  .cb-mnav {
    display: block;
  }
}

@media (max-width: 759.98px) {
  .cb-logo img {
    height: 32px;
  }

  .cb-burger {
    top: 12px;
  }
}

/* --------------------------------------------------------------------------
   page frame: sidebar + main column
   -------------------------------------------------------------------------- */

.cb-wrap {
  /* content-box, as in the design: 1280px of content inside the gutters */
  box-sizing: content-box;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px var(--cb-gutter) 96px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  min-width: 0;
}

/* A sticky column taller than the window pins its top and puts everything
   below the fold out of reach: the course card could not be scrolled to and
   the lower menu entries looked frozen. Capping it to the viewport lets it
   scroll on its own when it does not fit, and changes nothing when it does,
   so the fully-open sidebar the design asks for is kept. */
.cb-side {
  flex: none;
  width: 220px;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.cb-side__nav {
  background: var(--cb-surface);
  border-radius: 20px;
  padding: 20px 16px;
  font-size: 16px;
}

.cb-side__list,
.cb-side__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cb-side__list {
  gap: 4px;
}

.cb .cb-side__link {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--cb-ink);
}

.cb .cb-side__link:hover {
  background: #fff;
  text-decoration: none;
}

.cb .cb-side__link.is-active {
  background: #fff;
  font-weight: 700;
  color: var(--cb-brand);
  box-shadow: 0 1px 4px rgba(29, 29, 58, 0.06);
}

.cb-side__sub {
  gap: 2px;
  padding: 4px 0 6px 14px;
  margin: 4px 0 2px 14px;
  border-left: 2px solid #e3e7f3;
}

.cb .cb-side__sub a {
  display: block;
  padding: 7px 12px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--cb-prose);
}

.cb .cb-side__sub a:hover,
.cb .cb-side__sub a.light-blue {
  color: var(--cb-brand);
  text-decoration: none;
}

.cb-premium {
  border-radius: 20px;
  background: linear-gradient(135deg, #f3eeff, #eaf3ff);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cb-premium__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--cb-brand-deep);
}

.cb-premium__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cb-soft);
}

.cb-premium__text b {
  color: var(--cb-ink);
}

.cb .cb-btn {
  display: block;
  background: var(--cb-grad);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 11px;
  border-radius: 10px;
  text-align: center;
}

.cb .cb-btn:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.05);
}

.cb-main {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  overflow-wrap: break-word;
}

/* Phone-only pieces: the section chips and the in-column premium card. */
.cb-chips,
.cb-premium--inline {
  display: none;
}

@media (max-width: 759.98px) {
  .cb-wrap {
    display: block;
    box-sizing: border-box;
    padding: 16px 16px 96px;
  }

  .cb-side {
    display: none;
  }

  .cb-main {
    gap: 40px;
  }

  .cb-premium--inline {
    display: flex;
    padding: 18px 20px;
  }

  .cb-premium--inline .cb-btn {
    font-size: 15px;
    padding: 13px;
    border-radius: 12px;
  }

  .cb-chips {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0 -16px -16px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--cb-rule);
  }

  .cb-chips::-webkit-scrollbar {
    display: none;
  }

  .cb .cb-chips a {
    flex: none;
    background: var(--cb-chip);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cb-ink);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */

.cb-hero {
  border-radius: 28px;
  background: linear-gradient(110deg, #e9f9fb 0%, #f1f5ff 60%, #f4f0ff 100%);
  padding: clamp(24px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cb-eyebrow {
  margin: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--cb-teal);
}

.cb-h1 {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -1px;
  font-weight: 700;
  color: var(--cb-title);
  text-wrap: balance;
}

.cb-lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cb-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   sections and text blocks
   -------------------------------------------------------------------------- */

.cb-sec {
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-margin-top: 72px;
  min-width: 0;
}

.cb-h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--cb-title);
}

.cb-h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--cb-brand);
}

.cb-p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--cb-prose);
  text-wrap: pretty;
}

.cb-p:empty {
  display: none;
}

.cb-p strong,
.cb-list strong {
  color: var(--cb-ink);
}

.cb-q {
  font-weight: 700;
  color: var(--cb-ink);
}

.cb-quote {
  border-left: 4px solid var(--cb-brand);
  padding-left: 16px;
  font-style: italic;
}

.cb-note {
  border-radius: 18px;
  background: var(--cb-tint);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cb-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--cb-prose);
}

ul.cb-list {
  list-style: disc;
}

ol.cb-list {
  list-style: decimal;
}

ol.cb-list--roman {
  list-style-type: lower-roman;
  padding-left: 36px;
}

.cb-list--tight {
  gap: 6px;
  font-size: 16px;
  line-height: 1.5;
}

.cb-ans {
  color: #15803d;
  font-weight: 700;
}

.cb-muted {
  color: var(--cb-muted);
}

.cb-warn {
  color: #b45309;
}

/* tables: bordered and rounded; a wide one scrolls inside its frame */
.cb-table {
  border: 1px solid var(--cb-line);
  border-radius: 20px;
  overflow-x: auto;
  background: #fff;
}

.cb-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.5;
}

.cb-table th {
  text-align: left;
  padding: 14px 18px;
  background: var(--cb-surface);
  font-weight: 700;
  color: var(--cb-ink);
  vertical-align: bottom;
}

.cb-table td {
  padding: 14px 18px;
  border-top: 1px solid var(--cb-line-soft);
  color: var(--cb-soft);
  vertical-align: top;
}

.cb-table td strong {
  color: var(--cb-ink);
}

/* two-column cards */
.cb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.cb-card {
  border: 1px solid var(--cb-line);
  border-radius: 20px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
}

.cb .cb-card__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--cb-teal);
}

.cb-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cb-soft);
}

/* FAQ: an accordion of <details> */
.cb-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cb-faq__item {
  border-radius: 20px;
  border: 1px solid var(--cb-line);
  background: #fff;
}

.cb-faq__item[open] {
  background: var(--cb-surface);
}

.cb-faq__item > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}

.cb-faq__item > summary::-webkit-details-marker {
  display: none;
}

.cb-faq__item > summary::after {
  content: '+';
  margin-left: auto;
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: var(--cb-brand-deep);
}

.cb-faq__item[open] > summary::after {
  content: '\2212';
}

.cb-faq__q {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--cb-ink);
}

.cb-faq__a {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cb-prose);
}

/* worked example and printed task material */
.cb-example,
.cb-task {
  border-radius: 24px;
  background: var(--cb-surface);
  padding: clamp(18px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.cb-passage {
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--cb-line);
  padding: 20px 22px;
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cb-box {
  border: 1px solid var(--cb-line);
  border-radius: 18px;
  padding: 16px 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cb-box--text {
  display: block;
  font-size: 17px;
  line-height: 1.65;
  color: var(--cb-prose);
}

.cb-figure {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--cb-line);
  background: #fff;
}

/* multiple-choice options: real radio buttons, so they work without JS */
.cb-opts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 560px;
  padding-left: 12px;
  border-left: 2px solid #d9defa;
}

.cb-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.4;
  color: var(--cb-soft);
}

.cb-opt:hover {
  background: var(--cb-tint);
}

.cb-opt input {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  accent-color: var(--cb-brand);
}

/* answer keys and model answers: <details>, open without JS */
.cb-reveal {
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--cb-line);
}

.cb-reveal > summary {
  cursor: pointer;
  padding: 13px 18px;
  font-weight: 700;
  font-size: 15px;
  color: var(--cb-brand);
}

.cb-reveal > summary::marker {
  color: var(--cb-brand);
}

.cb-reveal__body {
  padding: 2px 18px 16px;
}

.cb-reveal__label {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--cb-ink);
}

.cb-line {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cb-soft);
}

.cb-model {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--cb-ink);
  text-wrap: pretty;
}

.cb-why {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
}

/* speaking cue card */
.cb-cue {
  border-radius: 22px;
  background: var(--cb-tint);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cb-cue__eyebrow {
  margin: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--cb-brand-deep);
}

.cb-cue__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--cb-title);
}

.cb-cue__say {
  margin: 0;
  font-size: 15px;
  color: var(--cb-prose);
}

/* audio player: audio.js finds its parts by these class names */
.cb-audio {
  border-radius: 16px;
  background: var(--cb-tint);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cb-audio__ctl {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.cb-audio button {
  width: 24px;
  height: 24px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.cb-audio button img {
  display: block;
  width: 100%;
  height: 100%;
}

.cb-audio__time {
  color: var(--cb-brand);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.cb-audio .audio-progress {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 6px;
  background: rgba(94, 97, 246, 0.2);
  overflow: hidden;
}

.cb-audio .audio-progress > div {
  max-width: 0%;
  width: 100%;
  height: 100%;
  background: var(--cb-brand);
  transition: max-width 0.3s ease;
}

/* audio.js toggles this on the volume button when muted */
.cb .muted-volume::after {
  content: '';
  position: absolute;
  top: 55%;
  left: -30%;
  width: 140%;
  height: 2px;
  transform: rotate(45deg) translateY(-55%);
  background-color: #000;
}

.cb .transcript-toggle {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: var(--cb-brand);
}

.cb .transcript {
  font-size: 16px;
  line-height: 1.65;
  color: var(--cb-prose);
}

/* calculators */
.cb-tool {
  border-radius: 22px;
  background: var(--cb-tint);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cb-tool h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--cb-title);
}

.cb-tool .hint {
  margin: -10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cb-muted);
}

.cb-tool .row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.cb-tool label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--cb-prose);
}

.cb-tool input,
.cb-tool select {
  border: 1px solid #d6dcef;
  border-radius: 12px;
  background: #fff;
  height: 46px;
  padding: 0 14px;
  font-size: 16px;
  width: 150px;
  min-width: 150px;
  color: var(--cb-ink);
}

.cb-tool select {
  width: auto;
}

.cb-tool .out {
  border-radius: 16px;
  background: #fff;
  padding: 16px 20px;
}

.cb-tool .band {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cb-brand);
}

.cb-tool .band small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--cb-prose);
}

/* author */
.cb-author {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 22px;
  background: var(--cb-surface);
  padding: 20px 22px;
}

.cb-author__photo {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
}

.cb-author__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 66% 34%;
  transform: scale(2.1);
  transform-origin: 66% 34%;
}

.cb-author__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cb-author__name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: #1f2937;
}

.cb-author__bio {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4b5563;
}

.cb-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f59e0b;
  white-space: nowrap;
}

.cb-stars__part {
  position: relative;
  display: inline-block;
  color: #d1d5db;
}

.cb-stars__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 70%;
  overflow: hidden;
  color: #f59e0b;
}

.cb-stars__num {
  margin-left: 4px;
  color: #4b5563;
}

/* floating mock-test button. mobile-app-banner.js moves anything whose class
   ends in -cta-sticky to the left while its desktop card is showing. */
.cam-cta-sticky {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
}

.cb .cam-cta-sticky a {
  display: block;
  background: var(--cb-grad);
  color: #fff;
  font-size: 16px;
  padding: 12px 22px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(99, 75, 246, 0.3);
}

.cb .cam-cta-sticky a:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.05);
}

/* On a phone the app banner takes the bottom of the screen; the button
   comes back once it is dismissed. */
body.has-app-banner .cam-cta-sticky {
  display: none;
}

/* --------------------------------------------------------------------------
   footer: a static copy of the main site's footer
   -------------------------------------------------------------------------- */

.ts-footer {
  background: #fafafa;
  padding: 56px 0 36px;
  color: #12284a;
  border-top: 1px solid rgba(18, 40, 74, 0.08);
}

.ts-footer__container {
  max-width: 1470px;
  padding: 0 15px;
  margin: 0 auto;
}

.ts-footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.ts-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.ts-footer__logo {
  display: block;
  width: 140px;
  height: 90px;
  object-fit: contain;
}

.ts-footer__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 16px;
  line-height: 1.3;
}

.cb .ts-footer__lang {
  color: #183b63;
  font-weight: 700;
}

.cb .ts-footer__lang:hover {
  color: #183b63;
  text-decoration: underline;
}

.cb .ts-footer__lang.is-active:hover {
  text-decoration: none;
}

.ts-footer__desc {
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(18, 40, 74, 0.78);
}

.ts-footer__desc p {
  margin: 0;
}

.ts-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.cb .ts-footer__legal a,
.cb .ts-footer__mail {
  color: #183b63;
  font-size: 16px;
  line-height: 1.4;
}

.cb .ts-footer__legal a:hover,
.cb .ts-footer__mail:hover {
  color: #183b63;
  text-decoration: underline;
}

.ts-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.ts-footer__social a {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.ts-footer__social a:hover {
  opacity: 0.72;
}

.ts-footer__social img {
  display: block;
  width: 24px;
  height: 24px;
}

.ts-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ts-footer__badges a {
  display: inline-flex;
  align-items: center;
}

.ts-footer__badges img {
  display: block;
  height: 48px;
  width: auto;
}

.ts-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.ts-footer__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.ts-footer__title {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  color: #12284a;
}

.ts-footer__links {
  display: grid;
  gap: 14px;
}

.cb .ts-footer__links a {
  color: #183b63;
  font-size: 18px;
  line-height: 1.35;
}

.cb .ts-footer__links a:hover {
  color: #183b63;
  text-decoration: underline;
}

.ts-footer__bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(18, 40, 74, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(18, 40, 74, 0.62);
  font-size: 14px;
  line-height: 1.5;
}

.ts-footer__bottom p {
  margin: 0;
}

@media (max-width: 1100px) {
  .ts-footer__top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ts-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
}

@media (max-width: 700px) {
  .ts-footer {
    padding: 40px 0 28px;
  }

  .ts-footer__brand {
    gap: 16px;
  }

  .ts-footer__legal {
    gap: 8px 16px;
  }

  .ts-footer__title {
    font-size: 22px;
  }

  .cb .ts-footer__links a {
    font-size: 16px;
  }

  .ts-footer__bottom {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .ts-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }

  .ts-footer__badges {
    gap: 10px;
  }

  .ts-footer__badges img {
    width: auto;
    max-width: 146px;
    height: auto;
  }
}

/* ==========================================================================
   Cambridge parts
   ========================================================================== */

/* Main-column text sets its own spacing (flex gaps); browser margins off. */
.cb-main :where(p, figure, ul, ol, h3, h4) {
  margin: 0;
}

.cb-note--warn {
  background: #fff7e8;
}

.cb-caption {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cb-muted);
}

.cb-label {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--cb-ink);
}

.cb-small {
  font-size: 13px;
}

.cb-normal {
  font-weight: 400;
}

.cb-h3__aside {
  font-size: 15px;
  font-weight: 400;
  color: var(--cb-muted);
}

.cb-h3--map {
  margin-top: 10px;
  color: var(--cb-title);
}

/* at-a-glance tiles */
.cb-stats {
  border-radius: 22px;
  background: var(--cb-tint);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 6px;
}

.cb-stat {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cb-stat__label {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--cb-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cb-stat__value {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cb-title);
}

/* formula and the scale diagram */
.cb-formula {
  border: 1px solid var(--cb-line);
  border-radius: 20px;
  background: #fff;
  padding: 18px 22px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cb-formula math {
  font-size: 18px;
}

.cb-scale {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cb-scale__frame {
  border: 1px solid var(--cb-line);
  border-radius: 20px;
  background: #fff;
  padding: 12px;
  overflow-x: auto;
}

.cb-scale svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
  font-family: inherit;
}

/* raw-mark estimator on the scoring pages */
.cb-tool .row .band {
  align-self: center;
  font-size: 22px;
}

.cb-tool .est-raw {
  width: 120px;
  min-width: 120px;
}

/* sample carousel: the design's set switcher. Folded only when the page
   script runs (html.cb-js); otherwise every slide shows. */
.cb-car {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.cb-car__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cb-surface);
  border-radius: 999px;
  padding: 6px;
  min-width: 0;
}

.cb-car__btn {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  background: #fff;
  color: var(--cb-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(29, 29, 58, 0.08);
}

.cb-car__btn:hover {
  color: var(--cb-brand);
}

.cb-car__chips {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cb-car__chips::-webkit-scrollbar {
  display: none;
}

.cb-car__chip {
  flex: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  background: #fff;
  color: var(--cb-ink);
}

.cb-car__chip.is-active {
  background: var(--cb-grad);
  color: #fff;
}

.cb-car__pos {
  flex: none;
  padding: 0 4px;
  font-size: 14px;
  color: var(--cb-muted);
  font-variant-numeric: tabular-nums;
}

html:not(.cb-js) .cb-car__bar {
  display: none;
}

.cb-js .cb-slide:not(.is-active) {
  display: none;
}

.cb-slide {
  min-width: 0;
}

@media (max-width: 759.98px) {
  .cb-car__pos {
    display: none;
  }
}

/* a practice part: title, fact badges, the printed task, the answer key */
.cb-task {
  scroll-margin-top: 72px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--cb-prose);
}

.cb-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cb-badge {
  background: #e8f8fa;
  color: var(--cb-teal);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  padding: 5px 10px;
  border-radius: 999px;
}

.cb-tip {
  font-size: 15.5px;
  color: var(--cb-soft);
}

.cb-tip strong {
  color: var(--cb-ink);
}

.cam-instruction {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cb-ink);
}

.cam-player {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cam-answers {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--cb-soft);
}

.cam-answers .cb-reveal__label:not(:first-child) {
  margin-top: 10px;
}

.cam-key-sub {
  margin-top: 6px;
  font-weight: 700;
  color: var(--cb-ink);
}

.cam-answers .cb-table {
  border-radius: 16px;
}

/* printed-task widgets: question cards, gaps, notices, pictures, notes */
.cam-item {
  border: 1px solid var(--cb-line);
  border-radius: 20px;
  background: #fff;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.cam-stem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--cb-ink);
}

.cam-stem--center {
  align-items: center;
}

.cam-indent {
  padding-left: 38px;
  color: var(--cb-ink);
}

.cam-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cb-grad);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.cam-example-tag {
  align-self: center;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cb-muted);
}

.cam-root {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cb-ink);
}

.cam-roots {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.cam-roots li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cam-kwt-key {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb-ink);
}

.cam-gap {
  display: inline-block;
  min-width: 88px;
  border-bottom: 2px solid var(--cb-brand);
  color: var(--cb-brand);
  font-weight: 700;
  text-align: left;
  line-height: 1.2;
  margin: 0 2px;
}

.cb-main p.cam-gap-line,
.cam-gap-line {
  display: block;
  border: 2px dashed #b9c3f9;
  border-radius: 12px;
  background: #f5f7ff;
  color: var(--cb-brand);
  font-weight: 700;
  text-align: center;
  padding: 10px;
  margin: 8px 0 14px;
}

.cam-text {
  border: 1px solid var(--cb-line);
  border-radius: 18px;
  background: #fff;
  padding: 18px 22px;
}

.cb-main .cam-text p {
  margin-bottom: 12px;
  line-height: 1.75;
}

.cb-main .cam-text p:last-child {
  margin-bottom: 0;
}

.cam-text__title {
  font-weight: 700;
  color: var(--cb-ink);
}

.cam-text-email {
  border-top: 4px solid var(--cb-brand);
}

.cam-notice {
  max-width: 420px;
  padding: 16px 18px;
  line-height: 1.5;
  white-space: pre-line;
  color: var(--cb-ink);
}

.cam-notice-sign {
  border: 3px solid #1f2937;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cam-notice-poster {
  border: 2px solid var(--cb-brand);
  border-radius: 12px;
  background: var(--cb-tint);
  text-align: center;
}

.cam-notice-note {
  background: #fff8c5;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: rotate(-0.6deg);
}

.cam-notice-message {
  background: #e7f0ff;
  border-radius: 18px 18px 18px 4px;
}

.cam-notice-email {
  background: #fff;
  border: 1px solid var(--cb-line);
  border-top: 4px solid var(--cb-brand);
  border-radius: 10px;
}

.cam-notice-label {
  background: #fff;
  border: 1px dashed var(--cb-muted);
  border-radius: 10px;
  font-size: 0.95rem;
}

.cam-notice-heading {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

.cam-options {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cam-options li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
}

.cam-letter {
  font-weight: 700;
  color: var(--cb-brand);
  min-width: 18px;
}

.cb-opt .cam-letter {
  min-width: 14px;
}

.cam-pics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.cam-pics-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cam-photos {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.cam-pics figure,
.cam-figure {
  border: 1px solid var(--cb-line);
  border-radius: 16px;
  background: #fff;
  padding: 8px;
  text-align: center;
}

.cam-pics img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

.cam-photos img {
  aspect-ratio: 3 / 2;
}

.cam-figure {
  max-width: 520px;
}

.cam-figure img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.cam-pics figcaption,
.cam-figure figcaption {
  font-weight: 700;
  color: var(--cb-brand);
  margin-top: 6px;
}

.cam-notes {
  border: 1px solid var(--cb-line);
  border-radius: 18px;
  background: #fffdf5;
  padding: 16px 20px;
}

.cam-notes ul {
  list-style: none;
  padding: 0;
}

.cam-notes li {
  padding: 8px 0;
  border-bottom: 1px dotted #d8e2ec;
  line-height: 1.6;
}

.cam-notes li:last-child {
  border-bottom: 0;
}

.cam-mindmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
}

.cam-mindmap .cam-mm-q {
  grid-column: 2;
  grid-row: 2;
  border: 2px solid var(--cb-brand);
  border-radius: 16px;
  background: var(--cb-tint);
  font-weight: 700;
  color: var(--cb-ink);
  text-align: center;
  padding: 16px 12px;
}

.cam-mindmap .cam-mm-p {
  border: 1px solid var(--cb-line);
  border-radius: 999px;
  background: #fff;
  text-align: center;
  padding: 10px 12px;
}

.cam-card {
  border: 2px solid #1f2937;
  border-radius: 12px;
  background: #fff;
  padding: 18px 20px;
  max-width: 520px;
}

.cam-card__heading {
  margin-bottom: 8px !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cb-muted);
}

.cam-card__q {
  font-weight: 700;
  line-height: 1.6;
  color: var(--cb-ink);
}

.cam-card__list {
  margin-top: 12px !important;
  padding-left: 22px;
  list-style: disc;
}

.cam-examiner {
  border-left: 4px solid #4baef6;
  background: #f3faff;
  border-radius: 0 16px 16px 0;
  padding: 12px 16px;
}

.cb-main .cam-examiner p {
  margin-bottom: 8px;
  line-height: 1.6;
}

.cb-main .cam-examiner p:last-child {
  margin-bottom: 0;
}

.cam-examiner__label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4b8fd6;
}

.cam-prompt {
  border: 1px solid var(--cb-line);
  border-radius: 18px;
  background: #fff;
  padding: 18px 22px;
}

.cb-main .cam-prompt p {
  margin-bottom: 10px;
  line-height: 1.7;
}

.cb-main .cam-prompt p:last-child {
  margin-bottom: 0;
}

.cam-prompt__heading {
  font-weight: 700;
  color: var(--cb-brand);
}

.cam-handnotes {
  margin: 12px 0;
  padding-left: 12px;
  border-left: 2px solid #1d4ed8;
}

.cam-handnote {
  display: block;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  color: #1d4ed8;
  margin: 4px 0;
}

.cb-main .cam-transcript p {
  margin-bottom: 6px;
}

.cam-model {
  border: 1px solid var(--cb-line);
  border-radius: 14px;
  background: #fff;
  padding: 14px 16px;
  white-space: pre-line;
}

@media (max-width: 640px) {
  .cam-pics-3 {
    gap: 6px;
  }

  .cam-pics figure {
    padding: 4px;
  }

  .cam-mindmap {
    grid-template-columns: 1fr;
  }

  .cam-mindmap .cam-mm-q {
    grid-column: auto;
    grid-row: auto;
    order: -1;
  }

  .cam-mindmap .cam-mm-p {
    grid-row: auto !important;
    grid-column: auto !important;
  }
}

/* Hover in the sidebar highlights the entry, it does not underline it: the
   generic a:hover underline reads as a change of state rather than a pointer,
   and on the pages whose menu comes from the design import it was the only
   rule that matched. */
.cb .cb-side a:hover,
.cb .cb-side .aside__list a:hover {
  text-decoration: none;
  color: var(--cb-brand);
}