/* ═══════════════════════════════════════════════════════════════════════════
   course-hub.css — the Vitalité course layer: subject hub + lesson reader.

   GENERATED by tools/mk-course-hub-css.py from ib-sehs-lesson.css. Do not
   hand-edit this file; edit the generator and re-run it, or the next
   regeneration will silently drop the change.

   One engine, many courses. g10-bio.html and guide.html both build an outline
   from their own DOM and hand it to course-hub.js, which renders:

     #  / #progress        subject page: progress bar, START HERE, LEARN and
                           PRACTICE tiles, chapter > section tree with progress
     #topic/<code>       one section: status strip, tiles, its own content
     #defs/<code>        every key term in that section with its definition
     #lesson/<code>      the reader: one block at a time, bilingual, with a
                           progress bar, a section map, a live glossary and a
                           term-blanking drill

   The reader is a fixed overlay rather than a page of its own, so a course can
   keep its site chrome and its own URL. Everything is scoped under .ch-lesson
   so nothing here can reach the host page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── base ────────────────────────────────────────────────────────────────── */

/* The figures were drawn against --border / --accent, which the theme does not
   define under those names. */


.ch-lesson {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font, system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

/* Reading is the point, so no accidental sideways scroll on a phone. */
.ch-lesson { overflow-x: hidden; }

/* Deliberately NOT `color: inherit` here: it is (0,1,2) and it beat the
   drill blank's `color: transparent`, so the hidden key terms stayed
   readable. The two buttons that used to lean on it declare their own. */
.ch-lesson button { font: inherit; }

.ch-lesson-shell {
  /* The rail column only exists on desktop. On a phone the reading column is
     centred with no left offset, which is why this is a plain grid here. */
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  padding: 0 1.15rem 0;
}

@media (min-width: 1040px) {
  .ch-lesson-shell {
    grid-template-columns: var(--rail-w) minmax(0, var(--lesson-w));
    gap: 3rem;
    justify-content: stretch;
    padding: 0 2.5rem 0;
  }
  /* the rail column holds the drawer contents as a static column */
  .ch-rail {
    position: sticky;
    top: calc(var(--rail-h) + 1.6rem);
    align-self: start;
    max-height: calc(100vh - var(--rail-h) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ch-rail__scrim,
  .ch-rail__close { display: none; }
}

/* `[hidden]` is only `display:none` in the UA stylesheet, so ANY author rule
   that sets `display` silently defeats it. `.ch-foot{display:flex}` and
   `.ch-reader{display:grid}` therefore left the reader's Back/Next footer and
   a 147px slice of the reader rendering on the hub, even with the attribute
   correctly set to true. This is the canonical remedy and it fixes every
   `el.hidden = true` in the script at once. */
[hidden] { display: none !important; }

/* ── top rail: Exit, progress, toggles ───────────────────────────────────── */

/* The progress bar, its counter and the term-blanking drill describe a lesson
   IN PROGRESS, so they only mean anything inside the reader. On the hub they
   rendered as a wide empty bar, a bare em dash and a "Test me" button that
   had nothing to test. .ch-reading is added on open and removed on exit. */
.ch-lesson:not(.ch-reading) #chDrill,
.ch-lesson:not(.ch-reading) .ch-top__bar,
.ch-lesson:not(.ch-reading) .ch-top__count { display: none; }

/* Same reasoning for the moment before the first slide exists: the resume
   prompt is the only thing on screen, so the counter would be a bare em dash,
   the drill would have nothing to blank and the footer nothing to advance. */
body.ch-resuming #chDrill,
body.ch-resuming .ch-top__bar,
body.ch-resuming .ch-top__count,
body.ch-resuming .ch-foot { display: none; }

.ch-top {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--rail-h);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 clamp(.9rem, 3vw, 1.6rem);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.ch-top__exit {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 40px;
  padding: 0 .7rem 0 .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--text2);
  cursor: pointer;
  flex: none;
}
.ch-top__exit:hover { color: var(--text); border-color: var(--text3); }
.ch-top__exit svg { width: 15px; height: 15px; display: block; }

/* Progress is a hairline that fills. Not a number: the eye reads position. */
.ch-top__bar {
  flex: 1 1 auto;
  height: 6px;
  min-width: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  overflow: hidden;
}
.ch-top__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f8ff0, #6d5cf0);
  transition: width .32s cubic-bezier(.4, 0, .2, 1);
}
.ch-top__count {
  flex: none;
  font-size: .76rem;
  font-weight: 800;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  min-width: 4.4em;
  text-align: right;
}

.ch-top__btn {
  flex: none;
  min-width: 40px;
  height: 40px;
  padding: 0 .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .78rem;
  font-weight: 800;
  color: var(--text2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ch-top__btn:hover { color: var(--text); }
.ch-top__btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  border-color: var(--blue2);
  color: var(--blue2);
}
/* the drawer trigger only exists where the rail is a drawer */
.ch-top__btn--rail { display: inline-flex; }
@media (min-width: 1040px) { .ch-top__btn--rail { display: none; } }

.ch-top__slot { display: none; }
@media (min-width: 1040px) { .ch-top__slot { display: block; flex: 1 1 0; } }

/* ── reading column ──────────────────────────────────────────────────────── */

.ch-read {
  min-width: 0;
  padding: clamp(1.6rem, 4vw, 3rem) 0 8rem;
  padding-left: 0;
}
@media (min-width: 1040px) { .ch-read { padding-top: 2.4rem; } }

/* Chapter cover */

.ch-cover__kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue2) 11%, var(--surface));
  color: var(--blue2);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ch-cover__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.9rem, 5.5vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: .9rem 0 .5rem;
}
.ch-cover__meta { color: var(--text2); font-size: .92rem; }

/* section opener */
.ch-sec {
  margin: 3.2rem 0 1.4rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--line);
  scroll-margin-top: calc(var(--rail-h) + 1rem);
}
.ch-sec:first-child { border-top: 0; margin-top: 1rem; }
.ch-sec__label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent, var(--gold));
}
.ch-sec__label svg { width: 17px; height: 17px; flex: none; }
.ch-sec__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.3rem, 3.6vw, 1.72rem);
  line-height: 1.22;
  margin: .5rem 0 0;
  letter-spacing: -.012em;
}
.ch-sec__code {
  display: inline-block;
  margin-left: .5rem;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .74em;
  color: var(--text3);
  font-weight: 700;
  vertical-align: .1em;
}

/* A revealed sentence. Fades and dims as later blocks land below it, so the
   newest line is always the brightest thing on screen. */
.ch-sum {
  font-size: clamp(1.02rem, 2.5vw, 1.16rem);
  line-height: 1.72;
  margin: 0 0 1.15rem;
}

.ch-sum b, .ch-card b, .ch-sec__title b { font-weight: 800; color: var(--text); }
.ch-card b, .ch-sum b { background: color-mix(in srgb, var(--gold) 15%, transparent); border-radius: 3px; padding: 0 .12em; }

/* ── cards ────────────────────────────────────────────────────────────────── */
/* Key Idea / Definition / Note / Example / Analogy all share one quadrilateral
   shell so they read as a family; only the tint and the label change. */

.ch-card {
  position: relative;
  margin: 1.35rem 0;
  padding: 1rem 1.15rem 1.05rem;
  border-radius: var(--r-md);
  border: 1px solid var(--ch-c-bd);
  border-left: 5px solid var(--ch-c-ac);
  background: var(--ch-c-bg);
  transition: opacity .3s ease;
  opacity: .62;
}


.ch-card__label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--ch-c-ac);
  margin-bottom: .4rem;
}
.ch-card__label svg { width: 16px; height: 16px; flex: none; }
.ch-card__title { font-weight: 800; font-size: 1.04rem; margin: 0 0 .3rem; }
.ch-card__body { font-size: .99rem; line-height: 1.66; margin: 0; }
.ch-card__body ul { margin: .5rem 0 0; padding-left: 1.15rem; }
.ch-card__body li { margin: .3rem 0; }
.ch-card__body li::marker { color: var(--ch-c-ac); font-weight: 800; }
.ch-card__note {
  margin: .55rem 0 0;
  font-size: .86rem;
  color: var(--text2);
  font-style: italic;
}

/* the five tints */
.ch-card--idea    { --ch-c-ac: #7c4dff; --ch-c-bg: color-mix(in srgb, #7c4dff 7%, var(--surface));  --ch-c-bd: color-mix(in srgb, #7c4dff 26%, transparent); }
.ch-card--def     { --ch-c-ac: #d63d84; --ch-c-bg: color-mix(in srgb, #d63d84 7%, var(--surface));  --ch-c-bd: color-mix(in srgb, #d63d84 26%, transparent); }
.ch-card--note    { --ch-c-ac: #17936b; --ch-c-bg: color-mix(in srgb, #17936b 8%, var(--surface));  --ch-c-bd: color-mix(in srgb, #17936b 26%, transparent); }
/* Analogy and Example are the two the brief calls out by name. */
.ch-card--analogy { --ch-c-ac: #d93b3b; --ch-c-bg: color-mix(in srgb, #d93b3b 8%, var(--surface));  --ch-c-bd: color-mix(in srgb, #d93b3b 30%, transparent); }
.ch-card--example { --ch-c-ac: #2b6fe0; --ch-c-bg: color-mix(in srgb, #2b6fe0 8%, var(--surface));  --ch-c-bd: color-mix(in srgb, #2b6fe0 30%, transparent); }

/* Definition card gets a term + its definition, which is what feeds both the
   glossary and the flashcard deck. */
.ch-def__term { font-weight: 800; font-size: 1.06rem; margin: 0 0 .25rem; }

/* ── flashcard slide ────────────────────────────────────────────────────── */

.ch-flash { margin: 1.6rem 0; text-align: center; opacity: .62; transition: opacity .3s ease; }

.ch-flash__label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; font-weight: 900; letter-spacing: .04em; color: #7c4dff;
}
.ch-flash__label svg { width: 16px; height: 16px; }
.ch-flash__card {
  margin: .6rem auto 0;
  max-width: 30rem;
  min-height: 13rem;
  padding: 2.4rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(16, 33, 58, .05);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ch-flash__q { font-size: 1.12rem; font-weight: 800; }
.ch-flash__hint { margin: .8rem 0 0; font-size: .82rem; color: var(--text3); }
.ch-flash.is-flipped .ch-flash__q { color: var(--text2); font-weight: 700; }

/* ── MCQ slide ──────────────────────────────────────────────────────────── */

.ch-mcq { margin: 1.7rem 0; opacity: .62; transition: opacity .3s ease; }

.ch-mcq__label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; font-weight: 900; letter-spacing: .04em; color: #2b6fe0;
}
.ch-mcq__label svg { width: 16px; height: 16px; }
.ch-mcq__q { font-size: 1.06rem; font-weight: 800; margin: .7rem 0 1rem; }
.ch-mcq__opt {
  color: var(--text);
  display: flex; align-items: flex-start; gap: .7rem;
  width: 100%; text-align: left;
  padding: .78rem .95rem; margin: .5rem 0;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer;
  font-size: .97rem; line-height: 1.5;
}
.ch-mcq__opt:hover:not(:disabled) { border-color: var(--blue2); }
.ch-mcq__opt:disabled { cursor: default; }
.ch-mcq__key {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: .78rem; font-weight: 900; color: var(--text3);
}
.ch-mcq__opt.is-right { border-color: #17936b; background: color-mix(in srgb, #17936b 10%, var(--surface)); }
.ch-mcq__opt.is-right .ch-mcq__key { border-color: #17936b; color: #17936b; }
.ch-mcq__opt.is-wrong { border-color: #d93b3b; background: color-mix(in srgb, #d93b3b 9%, var(--surface)); }
.ch-mcq__opt.is-wrong .ch-mcq__key { border-color: #d93b3b; color: #d93b3b; }
.ch-mcq__why { margin: .8rem 0 0; font-size: .9rem; color: var(--text2); }
.ch-mcq__hintbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; min-height: 38px;
  border: 1px solid color-mix(in srgb, #7c4dff 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #7c4dff 12%, var(--surface));
  color: #7c4dff; font-size: .82rem; font-weight: 800; cursor: pointer;
}
.ch-mcq__hintbtn:hover { background: color-mix(in srgb, #7c4dff 20%, var(--surface)); }

/* ── term-blanking drill ────────────────────────────────────────────────── */
/* With the drill on, every bolded key term renders as a tap-to-reveal blank.
   That is the "learn it yourself" half: the page stops reading for you. */
.ch-blank {
  display: inline-block;
  min-width: 7.5em;
  margin: 0 .1em;
  padding: 0 .5em;
  border-bottom: 2px dashed var(--blue2);
  background: color-mix(in srgb, var(--blue2) 9%, transparent);
  border-radius: 5px 5px 0 0;
  color: transparent;
  text-shadow: none;
  cursor: pointer;
  vertical-align: baseline;
  transition: background .18s ease, color .18s ease;
}
.ch-blank::before {
  content: attr(data-hint);
  color: color-mix(in srgb, var(--text3) 70%, transparent);
  font-size: .88em;
  font-style: italic;
}
.ch-blank.is-open {
  color: var(--text);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border-bottom-color: transparent;
  border-bottom-style: solid;
}
.ch-blank.is-open::before { content: none; }
.ch-blank:focus-visible { outline: 2px solid var(--blue2); outline-offset: 2px; }

/* ── rail: chapter map + live glossary ──────────────────────────────────── */

.ch-rail__scrim {
  position: fixed; inset: 0; z-index: 48;
  background: rgba(8, 14, 24, .5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
/* NB: the scrim is the sibling BEFORE .ch-rail in the markup, so an adjacent
   sibling combinator could not reach it. It is toggled by class from JS. */
.ch-rail__scrim.is-open { opacity: 1; pointer-events: auto; }

.ch-rail {
  padding: 1.4rem 0 0;
}
@media (max-width: 1039px) {
  .ch-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 50;
    width: min(88vw, 22rem);
    padding: calc(var(--rail-h) + .8rem) 0 2rem;
    background: var(--bg);
    border-right: 1px solid var(--line);
    box-shadow: 0 0 40px rgba(8, 14, 24, .2);
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ch-rail.is-open { transform: none; }
  .ch-lesson .ch-rail__close { display: inline-flex; }
}
.ch-rail__close {
  /* NB: hidden by default. This rule used to declare display:inline-flex
     unconditionally, and because it sits AFTER the desktop media query's
     .ch-rail__close{display:none} at equal specificity, source order let it
     win — so the drawer's close "x" floated over the desktop hub as a stray
     button next to "All topics". The drawer only exists below 1040px, so the
     button is enabled there and nowhere else. */
  display: none;
  align-items: center; justify-content: center;
  position: absolute; top: .55rem; right: .7rem;
  width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); font-size: 1.1rem; cursor: pointer;
}

.ch-rail__head {
  font-size: .72rem; font-weight: 900; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text3);
  margin: 0 0 .55rem;
}
.ch-map { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ch-map__topic {
  font-size: .74rem; font-weight: 900; color: var(--blue2);
  margin: .85rem 0 .3rem; letter-spacing: .04em;
}
.ch-map__sec {
  display: flex; align-items: flex-start; gap: .5rem;
  width: 100%; text-align: left;
  padding: .42rem .5rem; min-height: 38px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  font-size: .86rem; line-height: 1.4;
  color: var(--text2);
}
.ch-map__sec:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.ch-map__sec.is-now { background: color-mix(in srgb, var(--blue2) 12%, transparent); color: var(--blue2); font-weight: 800; }
.ch-map__tick {
  flex: none; width: 1.05rem; height: 1.05rem; margin-top: .18rem;
  border: 1.5px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  font-size: .6rem; color: transparent;
}
.ch-map__sec.is-done .ch-map__tick { background: #17936b; border-color: #17936b; color: #fff; }

.ch-gloss__search {
  width: 100%; padding: .5rem .65rem; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-size: .87rem;
  margin-bottom: .5rem;
}
.ch-gloss__list { list-style: none; margin: 0; padding: 0; }
.ch-gloss__list li { padding: .45rem 0; border-bottom: 1px dotted var(--line); font-size: .85rem; line-height: 1.45; }
.ch-gloss__list b { display: block; color: var(--blue2); font-size: .86em; }
.ch-gloss__empty { font-size: .84rem; color: var(--text3); padding: .5rem 0; }

/* ── footer controls ────────────────────────────────────────────────────── */

.ch-foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem;
  padding: .7rem clamp(.9rem, 3vw, 2.5rem) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
}
@media (min-width: 1040px) {
  /* keep the footer's right edge on the reading column, not the window */
  .ch-foot { padding-left: calc(var(--rail-w) + 2.5rem); }
}
.ch-foot__btn {
  color: var(--text);
  min-height: 46px;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .92rem; font-weight: 800;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
}
.ch-foot__btn:disabled { opacity: .4; cursor: default; }
.ch-foot__btn--next {
  background: linear-gradient(180deg, #4a90e8, #3d7fd6);
  border-color: #3d7fd6;
  color: #fff;
  box-shadow: 0 2px 8px rgba(61, 127, 214, .3);
}
.ch-foot__btn--next:hover:not(:disabled) { background: linear-gradient(180deg, #3f86dc, #3575c8); }
.ch-foot__btn--next svg { width: 15px; height: 15px; }
.ch-foot__spacer { flex: 1 1 auto; }

/* ── end card ───────────────────────────────────────────────────────────── */

.ch-done { text-align: center; padding: 2rem 0 1rem; }
.ch-done__big {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0 0 .5rem;
}
.ch-done__stats { color: var(--text2); font-size: .95rem; margin: 0 0 1.3rem; }
.ch-done__acts { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* ── dark ───────────────────────────────────────────────────────────────── */
/* The theme stylesheet owns the dark variable block; this only keeps our own
   tints legible against a dark surface. */
.ch-lesson.dark .ch-top__fill { background: linear-gradient(90deg, #6ea8ff, #9b8bff); }
.ch-lesson.dark .ch-mcq__hintbtn { color: #b79cff; }
.ch-lesson.dark .ch-flash__label { color: #b79cff; }
.ch-lesson.dark .ch-mcq__label { color: #7db0ff; }

/* ── motion / print ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ch-sum, .ch-card, .ch-fig, .ch-tbl, .ch-flash, .ch-mcq, .ch-cover { transition: none; }
  .ch-rail, .ch-rail__scrim, .ch-top__fill { transition: none; }
}

@media print {
  .ch-top, .ch-foot, .ch-rail, .ch-rail__scrim { display: none !important; }
  .ch-sum, .ch-card, .ch-fig, .ch-tbl, .ch-flash, .ch-mcq, .ch-cover { opacity: 1 !important; }
}

/* ── recede ────────────────────────────────────────────────────────────────
   Earlier this was a bare opacity of .62 on each block type. A sentence at .62
   reads as obviously lightened, but a CARD at .62 did not, because its pale
   tint background still looked bright — so analogy and example blocks appeared
   to stay at full strength while the text around them faded. Desaturating as
   well as fading means a tinted card recedes exactly as far as a sentence, and
   the newest block is unambiguously the only thing at full colour. */
.ch-read > .ch-block {
  transition: opacity .3s ease, filter .3s ease;
}
.ch-read > .ch-now { opacity: 1; filter: none; }
.ch-read > .ch-recede { opacity: .42; filter: saturate(.28); }
.ch-read > .ch-block[hidden] { display: none !important; }

/* lesson reader: real air between slides and between the items inside one
   slide. A section's text arrives as one slide holding a list of ideas (e.g.
   "The principle:" then "Endurance adaptation:"), and those items render
   flush against each other without these rules. Applies to every lesson
   because the reader is shared across the Textbook and G10. */
.ch-read > .ch-block + .ch-block { margin-top: 2.25rem; }
.ch-read .ch-block li + li { margin-top: 1rem; }
.ch-read .ch-block .facts li + li { margin-top: 1.5rem; }
.ch-read .ch-block ul { margin: .9rem 0 1.1rem; }
.ch-read .ch-block p + p { margin-top: 1rem; }
.ch-read .ch-block h3, .ch-read .ch-block h4 { margin: 1.4rem 0 .7rem; }

/* lesson content on the page itself (accordion view): the bold lead-ins of
   the fact cards are the "sections" of a lesson, and they must be visibly
   separated here too — the page view previously rendered them flush. Also
   covers the test-prep bullet lists. Shared by the Textbook and G10. */
.acc-body-inner ul.facts li + li { margin-top: 1.5rem; }
.acc-body-inner .test-prep li + li { margin-top: .85rem; }
/* The Textbook page's inline block-reader cardifies every fact <li> into its
   own <figure class="gb-fact"> (the inline style there sets margin:0), so in
   the accordion view the visible "sections" are consecutive gb-fact cards.
   Give those cards real gaps — this is the view the lesson page itself shows. */
.acc-body-inner > figure.gb-fact + figure.gb-fact { margin-top: 1.5rem; }
/* Reader-side safety net: if several cards ever land inside one slide, keep
   them separated there too. */
.ch-read .ch-block .gb-fact + .gb-fact { margin-top: 1.5rem; }

/* sr-only: the model layer reads a section's <h3 data-en> for its title, and
   the reader has already shown that heading, so this one only has to exist. */
.ch-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── resume chooser ───────────────────────────────────────────────────── */
.ch-resume {
  margin: 3rem auto 1rem;
  max-width: 34rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue2);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
}
.ch-resume__title { font-family: var(--font-heading); font-size: 1.4rem; margin: 0 0 .35rem; }
.ch-resume__meta { color: var(--text2); font-size: .93rem; margin: 0 0 1.2rem; }
.ch-resume__row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* ── HUB ───────────────────────────────────────────────────────────────── */

.ch-hub {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.6rem) 7rem;
}

.ch-hero { margin-bottom: 1.5rem; }
.ch-hero__kicker {
  display: inline-flex; align-items: center;
  padding: .3rem .75rem; border-radius: 999px;
  background: color-mix(in srgb, var(--blue2) 11%, var(--surface));
  color: var(--blue2);
  font-size: .72rem; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
}
.ch-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
  line-height: 1.1; letter-spacing: -.02em;
  margin: .8rem 0 .4rem;
}
.ch-hero__sub { color: var(--text2); margin: 0; max-width: 46rem; }

/* the six-level legend */
.ch-legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  padding: .85rem 1rem; margin: 0 0 1.4rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  font-size: .8rem; color: var(--text2);
}
.ch-legend__item { display: inline-flex; align-items: center; gap: .4rem; }

/* status squares — the site's OWN palette, ordered so they read as a scale */
.ch-lev {
  flex: none; display: inline-block;
  width: 1.05rem; height: 1.05rem; border-radius: 5px;
  background: var(--line);
}
.ch-lev--mastered   { background: var(--blue); }
.ch-lev--proficient { background: var(--blue2); }
.ch-lev--familiar   { background: var(--ch-green); }
.ch-lev--learning   { background: var(--gold); }
.ch-lev--unfamiliar { background: var(--ch-red); }
.ch-lev--unseen     { background: transparent; border: 1.5px dashed var(--line); }

.ch-tabs {
  display: flex; gap: .4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.3rem;
}
.ch-tab {
  min-height: 42px; padding: .5rem .95rem;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; cursor: pointer;
  font-size: .92rem; font-weight: 800; color: var(--text3);
}
.ch-tab.is-on { color: var(--blue2); border-bottom-color: var(--blue2); }

.ch-grp__title {
  font-family: var(--font-heading);
  font-size: 1.05rem; margin: 1.6rem 0 .6rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
.ch-tlist, .ch-seclist { list-style: none; margin: 0; padding: 0; }
.ch-trow {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left;
  min-height: 46px; padding: .55rem .6rem;
  border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
}
.ch-trow:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.ch-trow__txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.ch-trow__txt strong { font-size: .96rem; font-weight: 700; }
.ch-trow__meta { font-size: .78rem; color: var(--text3); }
.ch-trow.is-on { background: color-mix(in srgb, var(--blue2) 10%, transparent); }

/* The row title opens the topic detail; this pill enters the lesson directly,
   so lesson mode is one click from the list instead of two. They are separate
   buttons on purpose — a button inside a button is invalid HTML. */
.ch-trowwrap { display: flex; align-items: center; gap: .5rem; }
.ch-trowwrap .ch-trow { flex: 1 1 auto; min-width: 0; }
.ch-trowgo {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .34rem;
  min-height: 40px; padding: .34rem .8rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, var(--surface)); color: var(--text2);
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
}
.ch-trowgo:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.ch-trowgo svg { width: 13px; height: 13px; }
.ch-trowgo--done { border-color: var(--ch-green); color: var(--ch-green); }
.ch-trowgo--done:hover { background: var(--ch-green); color: #fff; }
.ch-trowwrap:hover .ch-trow { background: color-mix(in srgb, var(--text) 5%, transparent); }

/* the "where do I start" call to action at the top of the hub */
.ch-cta {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 1.1rem; padding: 1rem 1.15rem;
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--r-sm);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--blue) 7%, var(--surface)), var(--surface) 62%);
}
.ch-cta__txt { display: flex; flex-direction: column; gap: .16rem; min-width: 0; flex: 1 1 auto; }
.ch-cta__eyebrow {
  font-size: .68rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text3);
}
.ch-cta__title { font-size: 1.02rem; font-weight: 700; }
.ch-cta__sub { font-size: .8rem; color: var(--text2); }
.ch-cta__go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .5rem 1.05rem;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #3f86dc, #3575c8); color: #fff;
  font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ch-cta__go:hover { filter: brightness(1.07); }
.ch-cta__go svg { width: 14px; height: 14px; }

.ch-crumb { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text3); margin-bottom: .5rem; padding-left: .2rem; }
.ch-crumb b { font-weight: 700; line-height: inherit; }
.ch-crumb__sep { opacity: .5; }
.ch-dt__title {
  font-family: var(--font-heading); font-size: clamp(1.4rem, 4vw, 1.9rem);
  margin: 0 0 1rem; letter-spacing: -.015em;
}
.ch-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  padding: .95rem 1.1rem; margin-bottom: 1.4rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.ch-strip__lev { display: flex; align-items: center; gap: .5rem; }
.ch-strip__lev strong { font-size: 1rem; }
.ch-strip__next { font-size: .8rem; color: var(--text3); }
.ch-strip__stats { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-left: auto; }
.ch-stat { display: flex; flex-direction: column; line-height: 1.2; }
.ch-stat b { font-size: 1.06rem; }
.ch-stat span { font-size: .72rem; color: var(--text3); }

.ch-dt__group { margin: 0 0 1.4rem; }
.ch-dt__grouphead {
  font-size: .74rem; font-weight: 900; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text3);
  margin: 1.4rem 0 .6rem;
}
.ch-tiles { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ch-tiles { grid-template-columns: 1fr 1fr; } }
.ch-tile {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .9rem 1rem; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
button.ch-tile { cursor: pointer; font: inherit; color: inherit; }
button.ch-tile:hover { border-color: var(--blue2); }
.ch-tile__ico {
  flex: none; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--blue2) 10%, var(--surface));
  color: var(--blue2);
}
.ch-tile__ico svg { width: 1.2rem; height: 1.2rem; }
.ch-tile__txt { display: flex; flex-direction: column; gap: .1rem; }
.ch-tile__txt strong { font-size: .98rem; }
.ch-tile__txt span { font-size: .84rem; color: var(--text2); }
.ch-tile__txt em { font-style: normal; font-size: .74rem; color: var(--text3); margin-top: .2rem; }

.ch-secrow {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left;
  min-height: 44px; padding: .5rem .6rem;
  border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  font-size: .93rem;
}
.ch-secrow:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }

.ch-rail__hub {
  display: inline-flex; align-items: center;
  width: 100%; min-height: 40px; margin-bottom: .8rem;
  padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
  font-size: .86rem; font-weight: 800; color: var(--blue2);
}
.ch-rail__hub:hover { border-color: var(--blue2); }

.ch-gloss__list b { display: block; color: var(--blue2); font-size: .86em; }
.ch-gloss__list span { display: block; color: var(--text2); }

/* ── the course page's per-topic content, on this page ──────────────────── */

.ch-dt__lede { color: var(--text2); margin: -.4rem 0 1rem; max-width: 44rem; }

.ch-bigq {
  margin: 0 0 1.4rem; padding: .95rem 1.1rem;
  border: 1px solid var(--line); border-left: 4px solid var(--blue2);
  border-radius: var(--r-md); background: color-mix(in srgb, var(--blue2) 5%, var(--surface));
}
.ch-bigq__tag {
  margin: 0 0 .3rem; font-size: .7rem; font-weight: 900;
  letter-spacing: .09em; text-transform: uppercase; color: var(--blue2);
}
.ch-bigq__text { margin: 0; font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.45; }

.ch-seclist > li { border-bottom: 1px solid var(--line); }
.ch-secrow__n {
  margin-left: auto; font-size: .72rem; font-weight: 800;
  color: var(--text3); font-variant-numeric: tabular-nums;
}
.ch-secinfo { padding: .1rem 0 1.1rem 1.75rem; }
.ch-secinfo__focus {
  margin: 0 0 .7rem; font-size: .92rem; color: var(--text2);
}
.ch-secinfo__head {
  margin: .8rem 0 .35rem; font-size: .7rem; font-weight: 900;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text3);
}
.ch-termlist { margin: 0; }
.ch-termlist dt { font-weight: 800; font-size: .95rem; margin-top: .5rem; }
.ch-termlist dt:first-child { margin-top: 0; }
.ch-termlist dd { margin: .1rem 0 0; font-size: .88rem; color: var(--text2); }

.ch-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ch-chip {
  display: inline-block; padding: .18rem .55rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface2);
  font-size: .78rem; color: var(--text2); white-space: nowrap;
}
.ch-quicklist { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--text2); }
.ch-quicklist li { margin: .22rem 0; }

/* definitions view */
.ch-defcard {
  margin: 0 0 .6rem; padding: .7rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.ch-defcard__t { font-weight: 800; font-size: .98rem; margin-bottom: .15rem; }
.ch-defcard__d { font-size: .89rem; color: var(--text2); }

/* ═══ collapsible section detail ═══
   The long tail of a section (In detail / numbers / mistakes / why) is
   collapsed by default. Nothing is deleted — the default read is shorter so a
   student is not confronted by a wall of prose, and the full detail is one
   click away. The label swaps between "Go deeper" and "Show less" through two
   spans, because a single data-en/data-zh pair cannot express both states and
   a language toggle would otherwise reset an open button to its closed label. */
.native-deep { margin: 1.1rem 0 .2rem; }
.native-deep__btn {
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .45rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
}
.native-deep__btn::before { content: '\25BE'; font-size: .8em; opacity: .8; }
.native-deep__btn:hover { color: var(--text); border-color: var(--gold); }
.native-deep__lbl-open { display: none; }
.native-deep.is-open .native-deep__lbl-open { display: inline; }
.native-deep.is-open .native-deep__lbl-closed { display: none; }
.native-deep.is-open .native-deep__btn::before { content: '\25B4'; }
.native-deep__body { display: none; }
.native-deep.is-open .native-deep__body { display: block; }
.native-deep.is-open .native-deep__btn { margin-bottom: .6rem; }
@media (max-width: 620px) {
  .native-deep__btn { width: 100%; justify-content: center; }
}

/* ═══ unknown topic code ═══
   An unrecognised code used to render the first topic's lesson as a two-block
   stub that looked like a broken reader. It now says what happened and keeps the
   full topic list underneath so the reader can carry on. */
.ch-missing {
  margin: 0 0 1.6rem;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red, #d93b3b);
  border-radius: 14px;
  background: var(--surface);
}
.ch-missing__title {
  font-family: var(--font-heading);
  font-size: 1.32rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}
.ch-missing__code { font-size: .92rem; color: var(--text2); margin: 0 0 .4rem; }
.ch-missing__code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
  padding: .1em .42em;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--line);
}
.ch-missing__hint { font-size: .92rem; color: var(--text2); margin: 0 0 1rem; }
.ch-missing__row { display: flex; flex-wrap: wrap; gap: .55rem; }
.ch-missing__btn {
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  min-height: 40px;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
}
.ch-missing__btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.ch-missing__btn:hover { filter: brightness(1.08); }
.ch-lesson button.ch-missing__btn { font: inherit; color: #fff; }
.ch-lesson button.ch-missing__btn--ghost { color: var(--text); }
@media (max-width: 620px) {
  .ch-missing { padding: .9rem .95rem 1rem; }
  .ch-missing__row { flex-direction: column; align-items: stretch; }
  .ch-missing__btn { width: 100%; }
}
.ch-defgrp {
  font-family: var(--font-heading); font-size: 1.02rem;
  margin: 1.4rem 0 .5rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--line);
}
button.ch-tile--toggle {
  margin: 0 0 1.2rem; width: auto; padding: .45rem .9rem;
  min-height: 38px; font-size: .84rem; font-weight: 800; color: var(--blue2);
}

/* ═══ subject page, topic tree, topic page, lessons, study guide ═════════ */

/* overall progress next to the subject title */
.ch-hero__stat {
  display: inline-flex; align-items: baseline; gap: .45rem;
  margin-top: .7rem; padding: .3rem .7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
}
.ch-hero__stat b { font-size: 1.05rem; font-weight: 800; color: var(--blue); }
.ch-hero__stat span { font-size: .76rem; color: var(--text3); }

/* section headings inside the subject and topic pages */
.ch-rsec {
  margin: 1.7rem 0 .7rem;
  font-size: 1.24rem; font-weight: 700; letter-spacing: -.01em;
}
.ch-rgrid {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.ch-rtile {
  display: flex; align-items: flex-start; gap: .8rem;
  width: 100%; min-height: 72px; padding: .95rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: inherit; text-align: left;
  font: inherit; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.ch-rtile:hover {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
  transform: translateY(-1px);
}
.ch-rtile__ico { flex: 0 0 auto; color: var(--blue2); }
.ch-rtile__ico svg { width: 26px; height: 26px; display: block; }
.ch-rtile__txt { display: flex; flex-direction: column; gap: .16rem; min-width: 0; }
.ch-rtile__txt strong { font-size: .98rem; font-weight: 700; }
.ch-rtile__txt span { font-size: .83rem; color: var(--text2); }
.ch-rtile__txt em {
  font-size: .74rem; font-style: normal; font-weight: 700;
  color: var(--text3); letter-spacing: .02em; margin-top: .1rem;
}

/* the progress legend sits in its own card, as on the reference */
.ch-legendbox {
  padding: .9rem 1.05rem; margin-bottom: 1.2rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.ch-legendbox__t { font-size: .95rem; font-weight: 700; margin-bottom: .55rem; }

/* chapter heading, then each group as a collapsible */
.ch-chhead {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  margin: 1.6rem 0 .5rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.ch-chhead__n {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3);
}
.ch-chhead__t { font-size: 1.16rem; font-weight: 700; }

.ch-ghead {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  min-height: 46px; padding: .55rem .3rem;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  background: transparent; color: inherit; text-align: left;
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.ch-ghead:hover { color: var(--blue); }
.ch-ghead__t { flex: 1 1 auto; min-width: 0; }
.ch-ghead__caret { color: var(--text3); transition: transform .18s ease; }
.ch-ghead__caret svg { width: 14px; height: 14px; display: block; }
.ch-ghead.is-open .ch-ghead__caret { transform: rotate(180deg); }
.ch-grouplist { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 .35rem; }
.ch-grouplist[hidden] { display: none; }

.ch-crumb__link {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--text3); font: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}
.ch-crumb__link:hover { color: var(--blue); }

/* section header that jumps to the study guide */
.ch-secgo {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  min-height: 46px; margin-top: .9rem; padding: .5rem .6rem;
  border: 0; border-top: 1px solid var(--line);
  background: transparent; color: inherit; text-align: left;
  font: inherit; font-weight: 700; cursor: pointer;
}
.ch-secgo:hover { color: var(--blue); }
.ch-secgo svg { width: 14px; height: 14px; color: var(--text3); margin-left: auto; }
.ch-secgo > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }

.ch-backpill {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; margin-bottom: .8rem; padding: .4rem .85rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text2);
  font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.ch-backpill:hover { border-color: var(--blue); color: var(--blue); }
.ch-backpill svg { width: 14px; height: 14px; }

/* the lesson list */
.ch-leshead {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 1.2rem 0 .7rem; padding: .7rem .95rem;
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  font-size: .88rem;
}
.ch-leshead span { color: var(--text3); }
.ch-lesslist { list-style: none; margin: 0; padding: 0; }
.ch-lessrow {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  min-height: 54px; padding: .7rem .8rem;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius: var(--r-sm);
  background: transparent; color: inherit; text-align: left;
  font: inherit; font-size: .95rem; cursor: pointer;
}
.ch-lessrow:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.ch-lessrow__circ {
  flex: 0 0 auto; width: 20px; height: 20px;
  border: 1.5px dashed var(--line); border-radius: 50%;
}
.ch-lessrow__t { min-width: 0; }
.ch-lesstart { margin-top: 1.2rem; }

/* the study guide reuses the course page's own content classes */
.ch-guide { margin-top: 1.2rem; }
.ch-empty {
  padding: 1.4rem; border: 1px dashed var(--line); border-radius: var(--r-md);
  color: var(--text3); font-size: .9rem;
}
.ch-defcard__g {
  margin: 1.4rem 0 .5rem; font-size: .8rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text3);
}

/* the whole content block reads a little narrower than the chrome above it */
.ch-guide .native-lesson { max-width: 74ch; }

/* ── narrow-screen top bar ──────────────────────────────────────────────── */
/* At a 500px viewport the reader bar measured 655px wide and pushed the page
   155px sideways: Exit + rail + home + progress bar + counter + Test me + EN +
   dark simply do not fit. The counter already carries the progress, so the bar
   is the first thing to go, then the gaps and padding. Below 430px Exit
   collapses to a single ✕, which is also what the reference reader uses. */
@media (max-width: 620px) {
  .ch-top { gap: .3rem; padding: .4rem .55rem; }
  .ch-top__bar { display: none; }
  .ch-top__btn, .ch-top__exit { padding: .42rem .6rem; font-size: .8rem; min-height: 40px; }
  .ch-top__count { font-size: .78rem; }
}
@media (max-width: 430px) {
  .ch-lesson .ch-top__exit { font-size: 0; padding: .5rem .62rem; }
  .ch-lesson .ch-top__exit::before { content: '✕'; font-size: 1rem; line-height: 1; }
}
/* The rail and home buttons carry their label as text, and applyLanguage
   rewrites textContent from data-en/data-zh, so below 1040px — where the rail
   button is shown — it measured 162px ("Sections & terms") and pushed the bar
   past the viewport. They are icon-only below 1040px: font-size 0 hides the
   rewritten label and ::before supplies the glyph. aria-label is unaffected. */
/* NB: .ch-lesson button{font:inherit} is (0,1,2) and beats a bare class
   selector, so these are qualified with the body class or they do nothing. */
@media (max-width: 1039px) {
  .ch-lesson .ch-top__btn--rail, .ch-lesson .ch-top__btn--home {
    font-size: 0; gap: 0;
  }
  .ch-lesson .ch-top__btn--rail::before { content: '\2630'; font-size: 1.05rem; }
  .ch-lesson .ch-top__btn--home::before  { content: '\25F1'; font-size: 1.05rem; }
}

/* the breadcrumb is navigation, so it needs a real tap target */
.ch-crumb__link {
  min-height: 40px; padding: .3rem .1rem;
  display: inline-flex; align-items: center;
}


/* ═══ reader as a focused player (compact ✕, one Next) ═══════════════════ */

/* The exit control is icon-only at every width: font-size 0 hides the label
   that applyLanguage rewrites from data-en/data-zh, and ::before supplies the
   glyph. Qualified with .ch-lesson because .ch-lesson button{font:inherit}
   is (0,1,2) and beats a bare class selector. */
.ch-lesson .ch-top__exit--x {
  font-size: 0; width: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ch-lesson .ch-top__exit--x::before {
  content: '✕'; font-size: 1.05rem; line-height: 1;
}

/* The progress bar is the spine of the bar now that there is no word beside it */
.ch-lesson .ch-top .ch-top__bar { min-width: 60px; }

/* Back becomes a quiet arrow; Next carries the weight, as in the reference */
.ch-foot__btn--back {
  width: 44px; padding: 0; justify-content: center;
  font-size: 1.15rem; color: var(--text2);
  background: transparent;
}
.ch-foot__btn--back:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text);
}
.ch-foot__btn--back > span { pointer-events: none; }

.ch-foot__btn--next { gap: .45rem; padding-left: 1.15rem; padding-right: 1.05rem; }
.ch-foot__btn--next > span { pointer-events: none; }
.ch-foot__arrow { font-size: 1rem; line-height: 1; }
@media (hover: none) { .ch-foot__btn--next .ch-foot__arrow { font-size: 1.1rem; } }


/* ── the tokens ──────────────────────────────────────────────────────────────
   ib-sehs-lesson.css opens with a :root block holding the reader's own geometry
   tokens. It is part of the file, so it is part of the extraction.
   NB: these banners must be CSS comments. A bare `#` line is an ID SELECTOR, and
   the parser then swallows every following rule up to the next `}` — which is
   how the whole :root block silently stopped existing while the file still
   looked correct. */
:root {
  --rail-h: 58px;
  --rail-w: 296px;
  --lesson-w: 46rem;          /* comfortable measure for long-form reading */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
}

/* The theme does not name the scale this layer draws with. --line, --blue,
   --blue2 and --gold resolve to NOTHING on a page that never defined them, and
   a declaration containing an undefined var() is dropped outright — so 48
   border rules, 50 colour rules and 24 radius rules silently stop applying.
   No error, no warning: the hub just renders unbordered and its six-step
   progress scale loses four of its six colours.
   Every value below is taken from the site's OWN computed palette
   (--border2, --os-cobalt, --os-azure, --amber, --green, --red), so light and
   dark both come for free — those four already flip with body.dark.
   Measured on g10-bio: --line/--blue/--blue2/--gold were all empty, while
   --green #2E7D5B, --red #B3323A, --amber #B7791F, --os-cobalt #1E4F8F,
   --os-azure #3A78C2, --os-sky #8DB6E2 were present.
   Safe to define here: grep proves no other stylesheet on the site references
   any of these six names. */
:root {
  --line: var(--border2, rgba(22, 42, 74, .18));
  --blue: #1e4f8f;
  --blue2: #2f6fb5;
  --gold: var(--amber, #b7791f);
}

/* Dark needs its own blues. The theme's cobalt and azure are dark values: on
   #0D1829 they fall to ~3:1, which is why the dark override lifts them rather
   than reusing them. #5b93d6 and the theme's own --os-sky #8DB6E2 are tints of
   that same cobalt/azure and stay distinguishable, so the six-level scale keeps
   six colours instead of collapsing to two. */
body.dark {
  --blue: #5b93d6;
  --blue2: var(--os-sky, #8db6e2);
}

/* The status scale reads --green / --red. Both exist on this site today, but a
   page that did not define them would lose two more steps of the scale, so the
   fallbacks are stated once here. */
:root { --ch-green: var(--green, #2e7d5b); --ch-red: var(--red, #b3323a); }

/* ═══ the overlay ═══════════════════════════════════════════════════════════
   The reader is a fixed layer over the host page. z-index sits below the
   tutorial spotlight's 2147483000+ layer so an onboarding bubble can still
   cover it if it ever fires, and above the site's FABs and notification bell. */
.ch-lesson {
  position: fixed;
  inset: 0;
  z-index: 2147482400;
  background: var(--bg);
  color: var(--text);
  overflow: auto;
  overscroll-behavior: contain;
  /* The host page must not scroll behind the reader. */
  -webkit-overflow-scrolling: touch;
}
body.ch-reading { overflow: hidden; }

/* the reading column clears the sticky footer */
.ch-lesson-shell { padding-bottom: 0; }
.ch-read { padding-bottom: 8rem; }

/* ═══ the course header (host page, above the hub) ═════════════════════════ */
.ch-course {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.4rem clamp(1rem, 3vw, 2rem) 0;
}
.ch-course__bar {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.ch-course__label {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem; border-radius: 999px;
  background: color-mix(in srgb, var(--blue2) 11%, var(--surface));
  color: var(--blue2);
  font-size: .72rem; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
}
.ch-course__title {
  font-family: var(--font-heading);
  /* 2rem, measured off ib-sehs-learn.html's .learn-course-bar h1 — the same
     38.4px this rule used to produce was a third larger than the reference it
     is supposed to match. */
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  line-height: 1.12; letter-spacing: -.02em;
  margin: .7rem 0 0;
}
.ch-course__acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.ch-course__btn {
  min-height: 44px; padding: .55rem 1.1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-size: .9rem; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center;
}
.ch-course__btn:hover { border-color: var(--text3); }
.ch-course__btn--primary {
  background: linear-gradient(180deg, #4a90e8, #3d7fd6);
  border-color: #3d7fd6; color: #fff;
  box-shadow: 0 2px 8px rgba(61, 127, 214, .3);
}

/* the overall progress bar under the course header */
.ch-overall {
  display: flex; align-items: center; gap: .8rem;
  margin-top: 1rem;
}
.ch-overall__bar {
  flex: 1 1 auto; height: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  overflow: hidden;
}
.ch-overall__fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #4f8ff0, #6d5cf0);
  transition: width .32s cubic-bezier(.4, 0, .2, 1);
}
.ch-overall__n {
  flex: none; font-size: .82rem; font-weight: 900;
  color: var(--text2); font-variant-numeric: tabular-nums;
}
.ch-overall__t { flex: none; font-size: .8rem; color: var(--text3); }

/* The drawer is a full-height column of its own and the desktop version gets
   its horizontal inset from the shell's padding, which the fixed drawer does
   not have. Without this its labels sit flush against the screen edge. */
@media (max-width: 1039px) {
  .ch-lesson .ch-rail { padding-left: 1.15rem; padding-right: 1.15rem; }
  .ch-lesson .ch-rail__close { right: .5rem; top: .7rem; }
}

/* The block map's tick is drawn in CSS, not written as a glyph. vi-icons.js
   rewrites a whole-emoji text node inside a span into its own SVG, which gave
   every NOT-yet-reached block a coloured checkmark — the span's own
   `color: transparent` could not hide a replaced element. */
.ch-map__tick::after {
  content: ""; display: block;
  width: 5px; height: 9px; margin: -.16rem auto 0;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.ch-map__tick { color: transparent; }
.ch-map__sec.is-done .ch-map__tick { color: #fff; }

/* The definitions toggle shipped at 38px, under the 40px floor every other
   control in this layer holds. */
button.ch-tile--toggle { min-height: 40px; }

/* The host page is always behind the reader, so the bar's 86% wash lets the
   site's own top bar read through it as a ghost. 94% keeps the frost and drops
   the ghost; the standalone reader had nothing behind it, which is why 86% was
   fine there. */
.ch-lesson .ch-top {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

/* ═══ the host page's own content while the hub is up ══════════════════════ */
.ch-pagebody[hidden] { display: none !important; }

/* ═══ reader blocks lifted straight out of a course page ══════════════════
   A course page keeps its prose, tables and figures in ordinary elements, so a
   "block" here is a clone of those elements rather than something this file
   knows how to draw. The rules below give them a reading measure and let the
   page's own table/callout styling do the rest. */
.ch-blocks { min-width: 0; }
.ch-blocks > * { max-width: 68ch; }
.ch-blocks > .table-wrap,
.ch-blocks > table,
.ch-blocks > figure,
.ch-blocks > img { max-width: 100%; }
.ch-blocks > img { display: block; height: auto; border-radius: var(--r-md); }
.ch-blocks h4, .ch-blocks h3 { margin: 1.5rem 0 .5rem; }
.ch-blocks > h4:first-child, .ch-blocks > h3:first-child { margin-top: 0; }
.ch-blocks .ch-empty { color: var(--text3); }

/* The reveal: a new block arrives, everything older steps back. Both states are
   on the block itself, so Back restores the previous emphasis exactly. */
@keyframes ch-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ch-read > .ch-block.is-in { animation: ch-in .3s cubic-bezier(.4, 0, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .ch-read > .ch-block.is-in { animation: none; }
}

/* the reader reuses the page's own tables, which are built for a wide column */
.ch-blocks .table-wrap { margin: 1.2rem 0; }
.ch-blocks table { margin: 0; }

/* a section's own heading inside the reader */
.ch-sec__title {
  font-family: var(--font-heading);
  font-size: 1.25rem; line-height: 1.25;
  margin: 0 0 .8rem;
}

/* the topic page's copy of the section lives here */
.ch-guide .ch-blocks { max-width: none; }
.ch-guide .ch-blocks > * { max-width: 68ch; }

/* The cloned section content stacks Pattern tables, TEST PREP callouts and the
   Test Your Knowledge tray back-to-back because the page's own styles assume
   they sit between paragraphs with natural margins. Force an explicit gap
   between every direct child of the study-guide blocks container so each
   subsection reads as its own block. Scoped to .ch-guide so the reader
   overlay's .ch-blocks (which are one block per slide) is untouched. */
.ch-guide .ch-blocks > * + * { margin-top: 1.6rem; }
/* List items inside a block (e.g. the "What these are / Stress → recovery …"
   bullet list) still render flush against each other: give every line its own
   air so the rectangles are visibly separated. */
.ch-guide .ch-blocks ul li + li { margin-top: .95rem; }
.ch-guide .ch-blocks p + p { margin-top: .95rem; }
.ch-guide .ch-blocks table { margin-bottom: .4rem; }
.ch-guide .ch-blocks h4 { margin: 1.4rem 0 .65rem; }

/* #models/<code>: host for the injected .kn-learn panel. The panel itself
   ships its own chrome from knowledge.css; we only give it a touch of top
   spacing and let it read at the same 68ch measure as the study guide. */
.ch-models { margin-top: 1.2rem; }
.ch-models > .kn-learn { max-width: 88ch; }