/* ==========================================================================
   design/section-chrome.css (final mockup, injected last in <head>)
   --------------------------------------------------------------------------
   The section page set in the figure kit's own language. Every block around
   the figures takes the figure's anatomy: a rule across the frame (ink for the
   page's parts, hairline for its asides), a 232 px margin column holding a
   small letter-spaced terracotta kicker and, for numbered things, a serif
   numeral, and the reading column beside it. No fills, no shadows.

   Tiers follow the kit exactly. #ct[data-reader="wide"] (set by the renderer
   with the kit's own rule, see chrome.js) puts every block on the figure's
   grid: 232 + 32 + reading column, the frame the figure's width. Every wide
   rule sits inside @media screen, so print and anything narrower fall back to
   the single column, where kickers sit above their blocks.

   Hooks: .tb-lesson, .tb-actions, .tb-practice-h, .tb-ex, .tb-kick,
   .tb-reveal, .tb-qn, .sr[data-left] (all emitted by the renderer). No :has().

   Tokens only (tokens.css gives both themes). No text-transform anywhere:
   small caps come from font-variant-caps, on labels that never hold math, and
   KaTeX is reset under them. Nothing here reaches inside a kit figure (.of).
   ========================================================================== */

body[data-view="textbooks"] #ct {
  --cm-m: 232px;
  --cm-off: 264px;
  --cm-kick: 500 13px/1.3 var(--font-sans);
  counter-reset: tb-cb tb-q;
}

/* ---------- 0. KaTeX never takes small caps or tracking from a label ---------- */
body[data-view="textbooks"] #ct .katex:not(.of *) {
  font-variant-caps: normal;
  letter-spacing: normal;
  text-transform: none;
}
/* A long inline formula scrolls inside itself instead of widening a phone
   page. app.js (tbTagWideMath) tags only the formulas wider than their block,
   so every other formula keeps its KaTeX baseline. The padding gives sums,
   limits and subscripts room inside the scroll box, and the equal negative
   margin keeps the line spacing: styled on every inline formula, a thinner
   box shaved 2 px off 32 formulas on the kriging page. */
body[data-view="textbooks"] #ct .katex.tb-wide-math:not(.of *) {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.35em 0;
  margin: -0.35em 0;
  vertical-align: middle;
}
/* A reference with a long URL or unbroken token breaks inside itself instead of
   widening a phone page (lang_1_2 by 21 px, gar_16_4 by 2 px at 17 px). */
body[data-view="textbooks"] #ct .ref-list li { overflow-wrap: anywhere; }
/* screen-reader-only text the renderer emits */
body[data-view="textbooks"] #ct .tb-sr,
body[data-view="textbooks"] #ct .tb-lesson > h3:first-child {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 1. The stray eyebrow: the skill bar is not a widget ---------- */
body[data-view="textbooks"] #ct .lang-skill-bar-mount::before,
body[data-view="textbooks"] #ct .lang-skill-bar-mount::after { content: none; display: none; }
body[data-view="textbooks"] #ct .lang-skill-bar-mount {
  box-shadow: none; background: none; border: 0; border-radius: 0; padding: 0;
}

/* ---------- 2. Reading text: ink, one size ---------- */
body[data-view="textbooks"] #ct .ls > p,
body[data-view="textbooks"] #ct .cb p,
body[data-view="textbooks"] #ct .eb > p,
body[data-view="textbooks"] #ct .ls > ul > li,
body[data-view="textbooks"] #ct .ls > ol > li,
body[data-view="textbooks"] #ct .cb ul > li,
body[data-view="textbooks"] #ct .cb ol > li,
body[data-view="textbooks"] #ct .ls > :is(ul, ol) > li > p {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--tx);
}
body[data-view="textbooks"] #ct .ls > ol > li::marker {
  color: var(--ac-strong);
  font-family: var(--font-serif);
  font-variant-numeric: lining-nums;
}
/* bullets: a short terracotta rule, the same mark everywhere */
body[data-view="textbooks"] #ct .ls > ul:not([class]) { list-style: none; padding-left: 0; }
body[data-view="textbooks"] #ct .ls > ul:not([class]) > li { position: relative; padding-left: 22px; margin-bottom: 0.45em; }
body[data-view="textbooks"] #ct .ls > ul:not([class]) > li::before,
body[data-view="textbooks"] #ct .cb ul > li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.84em;
  width: 9px;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: var(--ac);
}
/* a quotation keeps its quieter voice but stays AA on the page ground: content sets
   color: var(--tx2) inline (4.42:1 here), so the token is remapped on the element itself */
body[data-view="textbooks"] #ct .ls blockquote:not(.of *) { --tx2: var(--tx1); }
/* glossary terms: no side padding (it read as stray spaces on a phone) */
body[data-view="textbooks"] #ct .ls dfn.lang-term { padding-left: 0; padding-right: 0; }

/* prose headings: the serif, a clear step above everything inside the text */
body[data-view="textbooks"] #ct .ls > h3:not(:first-child) {
  font: 500 28px/1.2 var(--font-serif);
  letter-spacing: -0.012em;
  color: var(--tx);
  text-transform: none;
  margin: 2.2em 0 0.5em;
  padding: 0;
  border: 0;
  text-wrap: balance;
}
body[data-view="textbooks"] #ct .ls > h4:not(.ref-head) {
  font: 500 24px/1.25 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--tx);
  margin: 2em 0 0.45em;
  text-transform: none;
  text-wrap: balance;
}

body[data-view="textbooks"] #ct .tb-lesson > .lang-skill-bar-mount + :is(h3, h4),
body[data-view="textbooks"] #ct .tb-lesson > h3:first-child + :is(h3, h4) { margin-top: 0; }

/* ---------- 3. One measure: every block shares the prose column ---------- */
body[data-view="textbooks"] #ct > .eb,
body[data-view="textbooks"] #ct > h3,
body[data-view="textbooks"] #ct > .tb-actions,
body[data-view="textbooks"] #ct > .section-feedback,
body[data-view="textbooks"] #ct > .na,
body[data-view="textbooks"] #ct > .lesson-nav,
body[data-view="textbooks"] #ct > .tb-breadcrumb,
body[data-view="textbooks"] #ct > .tb-pathreturn {
  box-sizing: border-box;
  width: min(calc(100% - 2 * var(--sp-4)), calc(39.44 * var(--fs-md) - 2 * var(--sp-4)));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 1200px) {
  body[data-view="textbooks"] #ct > .eb,
  body[data-view="textbooks"] #ct > h3,
  body[data-view="textbooks"] #ct > .tb-actions,
  body[data-view="textbooks"] #ct > .section-feedback,
  body[data-view="textbooks"] #ct > .na,
  body[data-view="textbooks"] #ct > .lesson-nav,
  body[data-view="textbooks"] #ct > .tb-breadcrumb,
  body[data-view="textbooks"] #ct > .tb-pathreturn { width: min(calc(100% - 2 * var(--sp-4)), calc(46.4 * var(--fs-md) - 2 * var(--sp-4))); }
}

/* ---------- 4. Breadcrumb ---------- */
body[data-view="textbooks"] #ct .tb-breadcrumb,
body[data-view="textbooks"] #ct .tb-breadcrumb a,
body[data-view="textbooks"] #ct .tb-breadcrumb-sep { color: var(--tx1); }
body[data-view="textbooks"] #ct .tb-breadcrumb a:hover { color: var(--ac-strong); }

/* ---------- 5. Masthead: kind kicker, serif numeral, large serif title ---------- */
body[data-view="textbooks"] #ct .sec-masthead {
  position: relative;
  display: block;
  padding-top: 14px;
  border-top: 1px solid var(--tx);
  margin-bottom: 30px;
}
body[data-view="textbooks"] #ct .sec-masthead-main,
body[data-view="textbooks"] #ct .sec-eyebrow { position: static; }
body[data-view="textbooks"] #ct .sec-kind {
  position: absolute;
  left: 0;
  top: 14px;
  font: var(--cm-kick);
  font-style: normal;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ac-strong);
}
body[data-view="textbooks"] #ct .sec-eyebrow-sep { display: none; }
body[data-view="textbooks"] #ct .sec-num {
  display: block;
  margin: 26px 0 14px;
  font: 600 40px/1 var(--font-serif);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  color: var(--tx);
}
body[data-view="textbooks"] #ct .sec-eyebrow { display: block; margin: 0 0 8px; }
body[data-view="textbooks"] #ct .sec-part {
  font: italic 400 16px/1.4 var(--font-serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tx1);
}
body[data-view="textbooks"] #ct h2.sec-title {
  font: 500 34px/1.14 var(--font-serif);
  letter-spacing: -0.018em;
  color: var(--tx);
  margin: 0;
  text-wrap: balance;
}
body[data-view="textbooks"] #ct .sec-masthead .bks {
  position: absolute; right: -10px; top: 4px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; box-shadow: none;
  font-size: 20px; line-height: 1;
  color: var(--tx1);
}
body[data-view="textbooks"] #ct .sec-masthead .bks.on,
body[data-view="textbooks"] #ct .sec-masthead .bks:hover { color: var(--ac-strong); }

/* ---------- 6. Objectives: bare serif numerals, no row rules ---------- */
body[data-view="textbooks"] #ct .ls-obj { position: relative; margin: 0 0 8px; counter-reset: lsobj; }
body[data-view="textbooks"] #ct .ls-obj-h {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
  margin: 0 0 12px;
}
body[data-view="textbooks"] #ct .ls-obj .tag {
  display: block;
  position: relative;
  margin: 0;
  padding: 0 0 0 30px;
  border: 0;
  border-radius: 0;
  background: none;
  font: 400 17px/1.55 var(--font-serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tx);
}
body[data-view="textbooks"] #ct .ls-obj .tag + .tag { margin-top: 10px; }
body[data-view="textbooks"] #ct .ls-obj .tag::before {
  counter-increment: lsobj;
  content: counter(lsobj);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  font: 400 17px/1.55 var(--font-serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
  color: var(--ac-strong);
}

/* ---------- 7. The lesson body: an ink rule opens it ---------- */
body[data-view="textbooks"] #ct > .tb-lesson {
  position: relative;
  margin-top: 44px;
  padding-top: 20px;
  /* the rule spans the text, not the block's side padding */
  background-image: linear-gradient(var(--tx), var(--tx));
  background-repeat: no-repeat;
  background-origin: content-box;
  background-clip: border-box;
  background-size: 100% 1px;
  background-position: 0 -20px;
}

/* skill mastery: one quiet ruled note, no card */
body[data-view="textbooks"] #ct .lang-skill-bar-mount { margin: 0 0 26px; }
body[data-view="textbooks"] #ct .lang-sb-card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--bdr);
}
body[data-view="textbooks"] #ct .lang-skill-bar-mount.tb-sb-inline .lang-sb-card { border-bottom: 0; padding-bottom: 0; }
body[data-view="textbooks"] #ct .lang-sb-card-head { margin: 0 0 6px; align-items: baseline; gap: 0 10px; flex-wrap: wrap; }
body[data-view="textbooks"] #ct .lang-sb-card-title {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
}
body[data-view="textbooks"] #ct .lang-sb-card-count { font: 400 12.5px/1.3 var(--font-sans); color: var(--tx1); }
body[data-view="textbooks"] #ct .lang-sb-card-body { font: 400 14px/1.5 var(--font-serif); color: var(--tx1); }
body[data-view="textbooks"] #ct .lang-sb-name { font: 400 15px/1.4 var(--font-serif); color: var(--tx); }
body[data-view="textbooks"] #ct .lang-sb-pct-wrap,
body[data-view="textbooks"] #ct .lang-sb-pct { font-family: var(--font-sans); color: var(--tx1); }
body[data-view="textbooks"] #ct .lang-sb-row.is-mastered .lang-sb-pct,
body[data-view="textbooks"] #ct .lang-sb-check { color: var(--ac-strong); }
body[data-view="textbooks"] #ct .lang-sb-track { height: 2px; border-radius: 0; background: var(--bdr); margin: 7px 0 6px; }
body[data-view="textbooks"] #ct .lang-sb-fill { border-radius: 0; background: var(--ac); }
body[data-view="textbooks"] #ct .lang-sb-caption { font: italic 400 14px/1.45 var(--font-serif); color: var(--tx1); }
body[data-view="textbooks"] #ct .lang-sb-row + .lang-sb-row { margin-top: 12px; }
body[data-view="textbooks"] #ct .lang-sb-signin-btn {
  background: none; border: 1px solid var(--bdr2); color: var(--ac-strong); box-shadow: none;
  font: 500 13px/1 var(--font-sans); padding: 9px 14px; border-radius: 999px;
}

/* ---------- 8. Concept boxes: a titled passage under a hairline ---------- */
body[data-view="textbooks"] #ct .cb {
  counter-increment: tb-cb;
  position: relative;
  background: none;
  border: 0;
  border-top: 1px solid var(--bdr2);
  border-radius: 0;
  box-shadow: none;
  padding: 16px 0 0;
  margin: 44px 0 36px;
}
body[data-view="textbooks"] #ct .cb::before {
  content: "Concept " counter(tb-cb);
  display: block;
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
  margin: 0 0 6px;
}
body[data-view="textbooks"] #ct .cb > h4,
body[data-view="textbooks"] #ct .cb > h3 {
  font: 500 21px/1.28 var(--font-serif);
  letter-spacing: -0.008em;
  text-transform: none;
  color: var(--tx);
  border: 0;
  padding: 0;
  margin: 0 0 10px;
  text-wrap: balance;
}
body[data-view="textbooks"] #ct .cb > h4:not(:first-child) { font-size: 18px; margin-top: 1.2em; }
body[data-view="textbooks"] #ct .cb > p:last-child { margin-bottom: 0; }
body[data-view="textbooks"] #ct .cb ul { padding-left: 0; margin: 0.6em 0 0.9em; }
body[data-view="textbooks"] #ct .cb ul > li { position: relative; padding-left: 22px; margin-bottom: 0.55em; }
body[data-view="textbooks"] #ct .cb ul > li strong,
body[data-view="textbooks"] #ct .cb ul > li b { color: var(--tx); font-weight: 600; }
/* numbered walkthroughs ("Reading the figure"): hanging serif numerals */
body[data-view="textbooks"] #ct .cb ol { padding-left: 0; margin: 0.6em 0 0.9em; }
body[data-view="textbooks"] #ct .cb ol > li { padding-left: 30px; margin-bottom: 0.7em; }
body[data-view="textbooks"] #ct .cb ol > li::before {
  width: 22px; height: auto; border: 0; border-radius: 0; background: none;
  top: 0; left: 0; display: block; text-align: left;
  font: 400 var(--fs-md)/var(--lh-relaxed) var(--font-serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ac-strong);
}

/* display equations: centred on the column, no slab */
body[data-view="textbooks"] #ct .ls :is(.sp-eq, .eq) {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 6px 0; margin: 1.1em 0;
}

/* ---------- 9. Prose tables: booktabs, sans, scroll inside the column ---------- */
body[data-view="textbooks"] #ct .ls > table,
body[data-view="textbooks"] #ct .cb table,
body[data-view="textbooks"] #ct table.tb-table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  border: 0;
  border-top: 1.5px solid var(--tx);
  border-bottom: 1.5px solid var(--tx);
  margin: 1.4em 0 1.6em;
  font: 400 14.5px/1.45 var(--font-sans);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--tx);
  background: none;
}
body[data-view="textbooks"] #ct .ls > table :is(th, td),
body[data-view="textbooks"] #ct .cb table :is(th, td),
body[data-view="textbooks"] #ct table.tb-table :is(th, td) {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  border: 0;
  padding: 7px 18px 7px 0;
  text-align: left;
  vertical-align: top;
  background: none;
  color: var(--tx);
}
body[data-view="textbooks"] #ct .ls > table th,
body[data-view="textbooks"] #ct .cb table th,
body[data-view="textbooks"] #ct table.tb-table th { font-weight: 600; border-bottom: 1px solid var(--tx); }
body[data-view="textbooks"] #ct .ls > table tr + tr td,
body[data-view="textbooks"] #ct .cb table tr + tr td,
body[data-view="textbooks"] #ct table.tb-table tr + tr td { border-top: 1px solid var(--bdr); }

/* ---------- 9b. Code: the page's ink and terracotta, not a borrowed palette ----------
   prism.css ships a slate ground and pinks, ambers and teals that miss AA on
   paper (numbers 4.4:1, strings 3.0:1, comments 2.4:1). Here every token takes
   a text-safe colour from tokens.css, in both themes. Kit figures keep theirs. */
body[data-view="textbooks"] #ct pre[class*="language-"]:not(.of *) {
  background: var(--bg2);
  color: var(--tx);
  border: 0;
  border-left: 2px solid var(--bdr2);
  border-radius: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}
body[data-view="textbooks"] #ct pre[class*="language-"]:not(.of *) > code[class*="language-"] { background: none; border: 0; color: inherit; }
body[data-view="textbooks"] #ct :not(pre) > code[class*="language-"]:not(.of *) {
  background: var(--bg2);
  color: var(--tx);
  border: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body[data-view="textbooks"] #ct :is(.token.comment, .token.prolog, .token.doctype):not(.of *) { color: var(--tx3); font-style: italic; }
body[data-view="textbooks"] #ct :is(.token.keyword, .token.decorator):not(.of *) { color: var(--ac-strong); font-weight: 600; }
body[data-view="textbooks"] #ct :is(.token.number, .token.boolean):not(.of *) { color: var(--ac-strong); }
body[data-view="textbooks"] #ct :is(.token.string, .token.triple-quoted-string):not(.of *) { color: var(--tx1); }
body[data-view="textbooks"] #ct :is(.token.function, .token.class-name, .token.builtin):not(.of *) { color: var(--tx); font-weight: 500; }
body[data-view="textbooks"] #ct :is(.token.operator, .token.punctuation):not(.of *) { color: var(--tx1); }

/* ---------- 10. Legacy widgets: the figure's frame, not a beige slab ---------- */
/* (a widget set inside a concept box, as in 3D interpretation 8.4, gets the same frame) */
body[data-view="textbooks"] #ct :is(.ls, .cb) > :is([data-gar-demo], [data-gst-demo], [data-lang-demo], [data-mlg-demo], [data-pet-demo], [data-psn-demo], [data-res-demo], [data-sa-demo], [data-sds-demo], [data-seismic-demo], [data-sp-demo], [data-vel-demo], [data-rp-demo], [data-gm-demo], [data-ssm-demo]):not(.of-host):not(.lang-skill-bar-mount) {
  position: relative;
  background: none;
  border: 0;
  border-top: 1px solid var(--tx);
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 14px;
  margin-top: 36px;
  margin-bottom: 36px;
}
body[data-view="textbooks"] #ct :is(.ls, .cb) > :is([data-gar-demo], [data-gst-demo], [data-lang-demo], [data-mlg-demo], [data-pet-demo], [data-psn-demo], [data-res-demo], [data-sa-demo], [data-sds-demo], [data-seismic-demo], [data-sp-demo], [data-vel-demo], [data-rp-demo], [data-gm-demo], [data-ssm-demo]):not(.of-host):not(.lang-skill-bar-mount)::before {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  content: "Interactive";
  display: block;
}
body[data-view="textbooks"] #ct :is(.ls, .cb) > :is([data-gar-demo], [data-gst-demo], [data-lang-demo], [data-mlg-demo], [data-pet-demo], [data-psn-demo], [data-res-demo], [data-sa-demo], [data-sds-demo], [data-seismic-demo], [data-sp-demo], [data-vel-demo], [data-rp-demo], [data-gm-demo], [data-ssm-demo]):not(.of-host) input[type="range"],
body[data-view="textbooks"] #ct :is(.ls, .cb) > :is([data-gar-demo], [data-gst-demo], [data-lang-demo], [data-mlg-demo], [data-pet-demo], [data-psn-demo], [data-res-demo], [data-sa-demo], [data-sds-demo], [data-seismic-demo], [data-sp-demo], [data-vel-demo], [data-rp-demo], [data-gm-demo], [data-ssm-demo]):not(.of-host) input[type="checkbox"],
body[data-view="textbooks"] #ct :is(.ls, .cb) > :is([data-gar-demo], [data-gst-demo], [data-lang-demo], [data-mlg-demo], [data-pet-demo], [data-psn-demo], [data-res-demo], [data-sa-demo], [data-sds-demo], [data-seismic-demo], [data-sp-demo], [data-vel-demo], [data-rp-demo], [data-gm-demo], [data-ssm-demo]):not(.of-host) input[type="radio"] {
  accent-color: var(--ac);
}
body[data-view="textbooks"] #ct .ls select:not(.of *) { max-width: 100%; min-width: 0; flex-shrink: 1; }

/* ---------- 11. Math-book and SDS callouts ---------- */
body[data-view="textbooks"] #ct .lang-rw-callout {
  position: relative;
  background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--bdr2);
  padding: 14px 0 0;
  margin: 40px 0 32px;
}
body[data-view="textbooks"] #ct .lang-rw-callout-eyebrow {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
  margin: 0 0 8px;
}
body[data-view="textbooks"] #ct .lang-rw-callout-list { padding-left: 0; }
body[data-view="textbooks"] #ct .lang-rw-callout-list li {
  font: 400 var(--fs-md)/var(--lh-relaxed) var(--font-serif);
  color: var(--tx);
  padding-left: 22px;
  margin-bottom: 10px;
}
body[data-view="textbooks"] #ct .lang-rw-callout-list li::before { color: var(--ac-strong); font-weight: 400; font-family: var(--font-sans); }

/* pause and check: the figure's aside rule, with its kicker */
body[data-view="textbooks"] #ct .lang-pause-check,
body[data-view="textbooks"] #ct .sds-pause-check,
body[data-view="textbooks"] #ct .gst-pause-check {
  position: relative;
  background: none; border: 0; border-radius: 0;
  border-left: 2px solid var(--ac);
  padding: 2px 0 2px 18px;
  margin: 28px 0;
  font: italic 400 var(--fs-md)/var(--lh-relaxed) var(--font-serif);
  color: var(--tx);
}
body[data-view="textbooks"] #ct .lang-pause-check::before {
  content: "Pause";
  display: block;
  font: var(--cm-kick);
  font-style: normal;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
  margin: 0 0 2px;
}
body[data-view="textbooks"] #ct :is(.sds-pause-check, .gst-pause-check) > :is(em, strong):first-child {
  font: normal 500 14px/1 var(--font-sans);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
  margin-right: 4px;
}
body[data-view="textbooks"] #ct .lang-pause-check.tb-lead::before { content: none; display: none; }
body[data-view="textbooks"] #ct .lang-pause-check strong,
body[data-view="textbooks"] #ct .lang-pause-check b { color: var(--tx); }

/* try it: ink, and numbered lists get hanging serif numerals */
body[data-view="textbooks"] #ct .lang-try-it > li,
body[data-view="textbooks"] #ct .sds-tryit > li,
body[data-view="textbooks"] #ct .gst-tryit > li {
  font: 400 var(--fs-md)/var(--lh-relaxed) var(--font-serif);
  color: var(--tx);
}
body[data-view="textbooks"] #ct :is(ol.sds-tryit, ol.gst-tryit, ol.lang-try-it) { list-style: none; padding-left: 30px; counter-reset: tbtry; }
body[data-view="textbooks"] #ct :is(ol.sds-tryit, ol.gst-tryit, ol.lang-try-it) > li { position: relative; counter-increment: tbtry; }
body[data-view="textbooks"] #ct :is(ol.sds-tryit, ol.gst-tryit, ol.lang-try-it) > li::before {
  content: counter(tbtry);
  position: absolute; left: -30px; top: 0; width: 20px;
  font: 400 var(--fs-md)/var(--lh-relaxed) var(--font-serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ac-strong);
}

/* bulleted try-it lists take the page's rule bullet, not the browser disc */
body[data-view="textbooks"] #ct ul.lang-try-it { list-style: none; padding-left: 0; }
body[data-view="textbooks"] #ct ul.lang-try-it > li { position: relative; padding: 0 0 0 22px; margin: 0 0 0.55em; }
body[data-view="textbooks"] #ct ul.lang-try-it > li:not([data-check])::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.84em;
  width: 9px;
  height: 1px;
  background: var(--ac);
}
/* live try-its (the widget checks them): a hollow ring that turns into a
   check, in the bullet's place; the ones with inputs lose the grey slab */
body[data-view="textbooks"] #ct ul.lang-try-it > li[data-check],
body[data-view="textbooks"] #ct ul.lang-try-it > li.lang-try-it-input {
  padding: 0 0 0 22px;
  margin: 0 0 0.55em;
  background: none;
  border-radius: 0;
}
body[data-view="textbooks"] #ct ul.lang-try-it > li[data-check]::before {
  display: block;
  position: absolute;
  left: -1px;
  top: 0;
  width: 16px;
  font: 400 14px/calc(var(--fs-md) * var(--lh-relaxed)) var(--font-sans);
  color: var(--ac-strong);
  transform: none;
}
body[data-view="textbooks"] #ct ul.lang-try-it > li.lang-try-it-input:not(.lang-check-passed)::before { content: "\25CB"; }
body[data-view="textbooks"] #ct ul.lang-try-it > li.lang-check-passed::before { color: var(--gn); font-weight: 600; }
body[data-view="textbooks"] #ct input.lang-ti {
  font: 400 15px/1.3 var(--font-sans);
  font-variant-numeric: lining-nums tabular-nums;
  width: 64px;
  padding: 2px 6px;
  margin: 0 4px;
  background: var(--bg);
  color: var(--tx);
  border: 0;
  border-bottom: 1px solid var(--bdr2);
  border-radius: 0;
}
body[data-view="textbooks"] #ct input.lang-ti:focus { border-bottom-color: var(--ac); background: var(--ac-soft); }

/* long inline code breaks inside the column instead of pushing past it */
body[data-view="textbooks"] #ct :is(.ls > p, .ls li, .cb p, .cb li, .lang-rw-callout-list li) > code { overflow-wrap: anywhere; word-break: break-word; }

/* practice hints: the quiet outlined pill every other text action uses */
body[data-view="textbooks"] #ct .lang-pq-hint-btn {
  font: 500 13px/1 var(--font-sans);
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--bdr2);
  border-radius: 999px;
  background: none;
  color: var(--tx1);
}
body[data-view="textbooks"] #ct .lang-pq-hint-btn:hover { border-color: var(--ac); background: var(--ac-soft); color: var(--ac-strong); }
body[data-view="textbooks"] #ct .lang-pq-hint-revealed {
  background: none;
  box-shadow: none;
  border: 0;
  border-left: 2px solid var(--bdr2);
  border-radius: 0;
  padding: 2px 0 2px 14px;
  font: 400 16px/1.55 var(--font-serif);
  color: var(--tx);
}
body[data-view="textbooks"] #ct .lang-pq-hint-label {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
  margin: 0 0 2px;
}

/* optional code challenge: its badge a small label, its button the outlined pill */
body[data-view="textbooks"] #ct .lang-cc-trigger-badge {
  font: 500 12.5px/1.3 var(--font-sans);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--tx1);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
body[data-view="textbooks"] #ct .lang-cc-trigger-cta {
  font: 500 13.5px/1 var(--font-sans);
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--bdr2);
  background: none;
  color: var(--ac-strong);
  filter: none;
  transform: none;
}
body[data-view="textbooks"] #ct .lang-cc-trigger:hover .lang-cc-trigger-cta { border-color: var(--ac); background: var(--ac-soft); filter: none; transform: none; }
body[data-view="textbooks"] #ct .lang-cc-trigger-title { font: 500 19px/1.3 var(--font-serif); color: var(--tx); }

/* the content's own complete buttons duplicate the footer's (all data-tb-complete) */
body[data-view="textbooks"] #ct .ls :is(.lang-complete-btn, .sds-complete-btn, .gst-complete-btn) { display: none; }

/* references */
body[data-view="textbooks"] #ct .ref-head {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
}
body[data-view="textbooks"] #ct .ref-list > li { font: 400 15px/1.55 var(--font-serif); color: var(--tx1); }
body[data-view="textbooks"] #ct .ref-list > li :is(em, i),
body[data-view="textbooks"] #ct .ref-list > li em .lang-term { color: var(--tx1); }

/* ---------- 12. Quick check: a ruled block, its title the kicker ---------- */
body[data-view="textbooks"] #ct .lang-quiz { margin: 48px 0 40px; position: relative; }
body[data-view="textbooks"] #ct .lang-quiz-root,
body[data-view="textbooks"] #ct .lang-quiz-card {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
}
body[data-view="textbooks"] #ct .lang-quiz-root {
  border-top: 1px solid var(--bdr2);
  padding: 16px 0 4px;
}
body[data-view="textbooks"] #ct .lang-quiz-title {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
  margin: 0 0 6px;
}
body[data-view="textbooks"] #ct .lang-quiz-meta {
  font: 400 16px/1.55 var(--font-serif);
  color: var(--tx1);
  margin: 0 0 14px;
  max-width: 34em;
}
body[data-view="textbooks"] #ct .lang-quiz-btn {
  font: 500 13.5px/1 var(--font-sans);
  height: 40px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--bdr2);
  background: none;
  color: var(--ac-strong);
  box-shadow: none;
  transform: none;
  display: inline-flex; align-items: center; gap: 8px;
}
body[data-view="textbooks"] #ct .lang-quiz-btn:hover:not(:disabled) { border-color: var(--ac); background: var(--ac-soft); }
body[data-view="textbooks"] #ct .lang-quiz-btn-primary::before {
  content: ""; width: 0; height: 0;
  border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
body[data-view="textbooks"] #ct .lang-quiz-btn:disabled { color: var(--tx1); border-color: var(--bdr); background: none; }
body[data-view="textbooks"] #ct .lang-quiz-question { font: 400 18px/1.5 var(--font-serif); color: var(--tx); }
body[data-view="textbooks"] #ct .lang-quiz-option {
  background: none; border: 0; border-top: 1px solid var(--bdr); border-radius: 0; box-shadow: none;
  font: 400 16px/1.5 var(--font-serif); color: var(--tx); padding: 11px 4px 11px 8px;
}
body[data-view="textbooks"] #ct .lang-quiz-option:last-child { border-bottom: 1px solid var(--bdr); }
body[data-view="textbooks"] #ct .lang-quiz-option:hover:not(:disabled) { background: var(--hover-bg); }
body[data-view="textbooks"] #ct .lang-quiz-option-selected { background: var(--ac-soft); box-shadow: inset 3px 0 0 var(--ac); }
body[data-view="textbooks"] #ct .lang-quiz-option-letter {
  background: none; border: 0; width: auto; min-width: 22px;
  font: 600 16px/1.5 var(--font-serif); color: var(--ac-strong);
}
body[data-view="textbooks"] #ct .lang-quiz-option-correct { background: var(--gn-bg); box-shadow: inset 3px 0 0 var(--gn); }
body[data-view="textbooks"] #ct .lang-quiz-option-wrong { background: var(--rd-bg); box-shadow: inset 3px 0 0 var(--rd); }
body[data-view="textbooks"] #ct .lang-quiz-rationale { background: none; border: 0; border-left: 2px solid var(--bdr2); border-radius: 0; color: var(--tx1); font: 400 15.5px/1.55 var(--font-serif); }
body[data-view="textbooks"] #ct .lang-quiz-counter,
body[data-view="textbooks"] #ct .lang-quiz-subhead {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
}
body[data-view="textbooks"] #ct .lang-quiz-progress-bar { height: 2px; border-radius: 0; background: var(--bdr); }
body[data-view="textbooks"] #ct .lang-quiz-progress-fill { border-radius: 0; background: var(--ac); }
/* a manual mount under its own "Quick check" heading: the heading is the
   title, so the block drops its rule and its repeated kicker */
body[data-view="textbooks"] #ct .ls > h4 + .lang-quiz { margin-top: 0; }
body[data-view="textbooks"] #ct .ls > h4 + .lang-quiz .lang-quiz-root { border-top: 0; padding-top: 2px; }
body[data-view="textbooks"] #ct .ls > h4 + .lang-quiz .lang-quiz-intro > .lang-quiz-title { display: none; }

/* ---------- 13. Worked examples: kicker + numeral, numbered steps, one live control ---------- */
body[data-view="textbooks"] #ct > .eb,
body[data-view="textbooks"] #ct .eb {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
body[data-view="textbooks"] #ct > .eb.tb-ex {
  position: relative;
  border-top: 1px solid var(--bdr2);
  padding-top: 16px;
  padding-bottom: 8px;
  margin-top: 48px;
  margin-bottom: 0;
}
body[data-view="textbooks"] #ct > .ls + .eb.tb-ex { margin-top: 64px; border-top-color: var(--tx); }
body[data-view="textbooks"] #ct .eb.tb-ex::before { content: none; display: none; }
body[data-view="textbooks"] #ct .tb-kick {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
  margin: 0 0 6px;
}
body[data-view="textbooks"] #ct .eb > h4 {
  font: 500 22px/1.25 var(--font-serif);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--tx) !important; /* textbook.css sets .eb h4 { color: var(--ac) !important } */
  border: 0;
  padding: 0;
  margin: 0 0 10px;
  text-wrap: balance;
}
body[data-view="textbooks"] #ct .eb > p { margin-bottom: 14px; }

body[data-view="textbooks"] #ct .sr {
  counter-reset: tb-step;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 20px;
  margin-top: 4px;
}
body[data-view="textbooks"] #ct .sr > .st {
  counter-increment: tb-step;
  flex: 1 1 100%;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 11px 0 11px 34px;
  border: 0;
  border-top: 1px solid var(--bdr);
  border-radius: 0;
  background: none;
  font: 400 var(--fs-md)/var(--lh-relaxed) var(--font-serif);
  color: var(--tx);
  overflow: visible;
  min-width: 0;
}
body[data-view="textbooks"] #ct .sr > .st.rev { background: none; border: 0; border-top: 1px solid var(--bdr); color: var(--tx); outline: none; }
body[data-view="textbooks"] #ct .sr > .st.rev::before {
  content: counter(tb-step);
  position: absolute;
  left: 0;
  top: 11px;
  width: 22px;
  font: 400 var(--fs-md)/var(--lh-relaxed) var(--font-serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ac-strong);
}
/* hidden steps: only the next one shows, as one quiet pill */
body[data-view="textbooks"] #ct .sr > .st:not(.rev) ~ .st:not(.rev) { display: none; }
body[data-view="textbooks"] #ct .sr > .st:not(.rev) {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  margin: 16px 0 6px;
  padding: 0 17px 0 15px;
  border: 1px solid var(--bdr2);
  border-radius: 999px;
  font: 500 13.5px/1 var(--font-sans);
  font-variant-numeric: lining-nums;
  color: var(--ac-strong);
  cursor: pointer;
}
body[data-view="textbooks"] #ct .sr > .st:not(.rev) > em { display: none; }
body[data-view="textbooks"] #ct .sr > .st:not(.rev)::before {
  content: "";
  width: 0; height: 0;
  border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
body[data-view="textbooks"] #ct .sr > .st:not(.rev):hover { border-color: var(--ac); background: var(--ac-soft); }
/* "Show all n steps": a text action beside it, only while two or more are hidden */
body[data-view="textbooks"] #ct .sr > .btn[data-tb-raei] {
  flex: 0 0 auto;
  margin: 16px 0 6px;
  height: 40px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  font: 500 13.5px/1 var(--font-sans);
  letter-spacing: 0;
  color: var(--tx);
  text-decoration: underline;
  text-decoration-color: var(--bdr2);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
body[data-view="textbooks"] #ct .sr > .btn[data-tb-raei]:hover { color: var(--ac-strong); background: none; text-decoration-color: var(--ac); }
body[data-view="textbooks"] #ct .sr:is([data-left="0"], [data-left="1"]) > .btn[data-tb-raei] { display: none; }

/* ---------- 14. Practice ---------- */
body[data-view="textbooks"] #ct > h3.tb-practice-h,
body[data-view="textbooks"] #ct > h3 {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ac-strong);
  border-top: 1px solid var(--tx);
  padding-top: 16px;
  margin-top: 64px;
  margin-bottom: 4px;
}
body[data-view="textbooks"] #ct > h3 #mcq-score {
  font: 400 13px/1.3 var(--font-sans);
  font-variant-caps: normal;
  letter-spacing: 0;
  color: var(--tx1);
  margin-left: 8px;
}
body[data-view="textbooks"] #ct .eb[id^="mcq-"] {
  position: relative;
  border-top: 1px solid var(--bdr);
  padding-top: 14px;
  padding-bottom: 12px;
  margin-top: 0;
  margin-bottom: 0;
}
body[data-view="textbooks"] #ct > h3 + .eb[id^="mcq-"] { border-top: 0; }
body[data-view="textbooks"] #ct .eb[id^="mcq-"] > p:first-child {
  font: 400 var(--fs-md)/var(--lh-relaxed) var(--font-serif);
  color: var(--tx);
  margin-bottom: 8px;
}
body[data-view="textbooks"] #ct .eb[id^="mcq-"] > p:first-child > strong:first-child {
  font: 600 var(--fs-md)/1 var(--font-serif);
  font-variant-numeric: lining-nums;
  color: var(--ac-strong);
  margin-right: 6px;
}
/* reveal-type answer: a quiet underlined text action (only the step control is a pill) */
body[data-view="textbooks"] #ct .eb[id^="mcq-"] > .st:not(.rev) {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 2px; margin: 0 0 2px;
  border: 0; border-radius: 0; background: none;
  font: 500 14px/1 var(--font-sans);
  color: var(--tx);
  text-decoration: underline;
  text-decoration-color: var(--bdr2);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
}
body[data-view="textbooks"] #ct .eb[id^="mcq-"] > .st:not(.rev) > em { display: none; }
body[data-view="textbooks"] #ct .eb[id^="mcq-"] > .st:not(.rev):hover { color: var(--ac-strong); text-decoration-color: var(--ac); background: none; }
body[data-view="textbooks"] #ct .eb[id^="mcq-"] > .st.rev {
  background: none; border: 0; border-left: 2px solid var(--ac); border-radius: 0;
  padding: 2px 0 2px 16px; margin: 4px 0 8px;
  font: 400 var(--fs-md)/var(--lh-relaxed) var(--font-serif); color: var(--tx);
  outline: none;
}
/* multiple choice: ruled rows, serif letters, right and wrong carry a rule and a word */
body[data-view="textbooks"] #ct .mcq-choices { gap: 0; margin: 6px 0 10px; }
body[data-view="textbooks"] #ct .mcq-choice {
  position: relative;
  background: none; border: 0; border-top: 1px solid var(--bdr); border-radius: 0; box-shadow: none;
  padding: 10px 8px; gap: 12px; transform: none;
  font: 400 16px/1.5 var(--font-serif); color: var(--tx);
}
body[data-view="textbooks"] #ct .mcq-choice:last-child { border-bottom: 1px solid var(--bdr); }
body[data-view="textbooks"] #ct .mcq-choice:hover:not(.mcq-answered) { background: var(--hover-bg); border-color: var(--bdr); transform: none; }
body[data-view="textbooks"] #ct .mcq-letter {
  background: none; width: 18px; height: auto; border-radius: 0; justify-content: flex-start;
  font: 600 16px/1.5 var(--font-serif); color: var(--ac-strong);
}
body[data-view="textbooks"] #ct .mcq-choice { min-width: 0; max-width: 100%; }
body[data-view="textbooks"] #ct .mcq-text { padding-top: 0; min-width: 0; overflow-wrap: anywhere; }
body[data-view="textbooks"] #ct .mcq-choice.mcq-answered { opacity: 1; color: var(--tx1); }
body[data-view="textbooks"] #ct .mcq-choice.mcq-correct,
body[data-view="textbooks"] #ct .mcq-choice.mcq-wrong { color: var(--tx); border-color: var(--bdr); padding-right: 96px; }
body[data-view="textbooks"] #ct .mcq-choice.mcq-correct { background: var(--gn-bg); box-shadow: inset 3px 0 0 var(--gn); }
body[data-view="textbooks"] #ct .mcq-choice.mcq-wrong { background: var(--rd-bg); box-shadow: inset 3px 0 0 var(--rd); }
body[data-view="textbooks"] #ct .mcq-choice.mcq-correct .mcq-letter { color: var(--gn); }
body[data-view="textbooks"] #ct .mcq-choice.mcq-wrong .mcq-letter { color: var(--rd); }
body[data-view="textbooks"] #ct .mcq-choice.mcq-correct::after,
body[data-view="textbooks"] #ct .mcq-choice.mcq-wrong::after {
  position: absolute; right: 10px; top: 12px;
  font: 600 13px/1.3 var(--font-sans);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--tx);
}
body[data-view="textbooks"] #ct .mcq-choice.mcq-correct::after { content: "Correct"; }
body[data-view="textbooks"] #ct .mcq-choice.mcq-wrong::after { content: "Not quite"; }
body[data-view="textbooks"] #ct .mcq-explanation {
  background: none; border: 0; border-left: 2px solid var(--gn); border-radius: 0;
  font: 400 16px/1.6 var(--font-serif); color: var(--tx1); padding: 2px 0 2px 16px; margin: 10px 0 6px;
}

/* ---------- 15. The footer: one ruled row of text actions ---------- */
body[data-view="textbooks"] #ct > .tb-actions {
  text-align: left;
  padding-top: 18px;
  padding-bottom: 18px;
  margin-top: 64px;
  margin-bottom: 0;
  border-top: 1px solid var(--tx);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 26px;
  position: relative;
}
body[data-view="textbooks"] #ct > .tb-actions > button {
  margin: 0;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  font: 500 14px/1 var(--font-sans);
  letter-spacing: 0;
  color: var(--tx);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body[data-view="textbooks"] #ct > .tb-actions > button > span[aria-hidden] { color: var(--ac-strong); font-weight: 600; }
body[data-view="textbooks"] #ct > .tb-actions > button:hover { color: var(--ac-strong); background: none; text-decoration: underline; text-decoration-color: var(--ac); text-underline-offset: 5px; }
body[data-view="textbooks"] #ct > .tb-actions > [data-tb-complete] {
  padding: 0 17px 0 15px;
  border: 1px solid var(--bdr2);
  border-radius: 999px;
  color: var(--ac-strong);
}
body[data-view="textbooks"] #ct > .tb-actions > [data-tb-complete]:hover { border-color: var(--ac); background: var(--ac-soft); text-decoration: none; }
body[data-view="textbooks"] #ct > .tb-actions > [data-tb-project-menu] { margin-left: -20px; width: 28px; justify-content: center; }

/* was this section clear? one quiet line */
body[data-view="textbooks"] #ct > .section-feedback {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 0; margin-bottom: 0;
  padding-top: 14px; padding-bottom: 14px;
  border: 0; border-bottom: 1px solid var(--bdr); border-radius: 0;
  background: none;
}
body[data-view="textbooks"] #ct .sf-ask { font: italic 400 16px/1.4 var(--font-serif); color: var(--tx); margin: 0; }
body[data-view="textbooks"] #ct .sf-votes { display: inline-flex; gap: 18px; margin: 0; }
body[data-view="textbooks"] #ct .sf-vote {
  height: 40px; padding: 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: 500 14px/1 var(--font-sans); color: var(--tx);
  text-decoration: underline; text-decoration-color: var(--bdr2); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
body[data-view="textbooks"] #ct .sf-vote:hover { color: var(--ac-strong); text-decoration-color: var(--ac); background: none; }
body[data-view="textbooks"] #ct .sf-vote.is-on { color: var(--ac-strong); text-decoration-color: var(--ac); background: none; }
body[data-view="textbooks"] #ct .sf-note,
body[data-view="textbooks"] #ct .sf-thanks { flex: 1 1 100%; }
body[data-view="textbooks"] #ct .sf-note-input,
body[data-view="textbooks"] #ct .sf-note-email {
  background: none; border: 1px solid var(--bdr2); border-radius: var(--radius-xs); box-shadow: none;
  font: 400 16px/1.5 var(--font-serif); color: var(--tx);
}
body[data-view="textbooks"] #ct .sf-reassure { font: italic 400 14px/1.4 var(--font-serif); color: var(--tx1); }
body[data-view="textbooks"] #ct .sf-send {
  height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--bdr2); background: none; box-shadow: none;
  font: 500 13.5px/1 var(--font-sans); color: var(--ac-strong);
}
body[data-view="textbooks"] #ct .sf-send:hover { border-color: var(--ac); background: var(--ac-soft); color: var(--ac-strong); }
body[data-view="textbooks"] #ct .sf-thanks { font: italic 400 16px/1.4 var(--font-serif); color: var(--tx1); }

/* your notes: a ruled writing space */
body[data-view="textbooks"] #ct > .na { position: relative; margin-top: 0; padding-top: 18px; padding-bottom: 8px; background: none; border: 0; }
body[data-view="textbooks"] #ct > .na > h3 {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
  margin: 0 0 8px;
  padding: 0; border: 0;
}
body[data-view="textbooks"] #ct #tb-note {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  padding: 10px 12px;
  background: none;
  border: 1px solid var(--bdr2);
  border-radius: var(--radius-xs);
  box-shadow: none;
  font: 400 16px/1.55 var(--font-serif);
  color: var(--tx);
}
body[data-view="textbooks"] #ct #tb-note::placeholder { font-style: italic; color: var(--tx1); opacity: 1; }
body[data-view="textbooks"] #ct #tb-note:focus { border-color: var(--ac); box-shadow: none; }
body[data-view="textbooks"] #ct > .na .mh-trigger {
  margin-top: 8px; height: 32px; min-width: 40px; padding: 0 10px;
  background: none; border: 1px solid var(--bdr2); border-radius: 999px; box-shadow: none;
  color: var(--tx1);
}

/* previous / up next: two ruled halves, no cards */
body[data-view="textbooks"] #ct > .lesson-nav {
  margin-top: 44px;
  margin-bottom: 36px;
  padding-top: 0;
  border-top: 1px solid var(--tx);
  gap: 0 32px;
}
body[data-view="textbooks"] #ct .lesson-nav-card {
  background: none; border: 0; border-radius: 0; box-shadow: none; transform: none;
  min-height: 0;
  padding: 16px 0 6px;
  gap: 6px;
}
body[data-view="textbooks"] #ct .lesson-nav-card:hover { background: none; box-shadow: none; transform: none; }
body[data-view="textbooks"] #ct .lesson-nav-card:hover .lesson-nav-title { color: var(--ac-strong); }
body[data-view="textbooks"] #ct .lesson-nav-direction {
  font: var(--cm-kick);
  font-variant-caps: all-small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ac-strong);
}
body[data-view="textbooks"] #ct .lesson-nav-title {
  font: 500 20px/1.3 var(--font-serif);
  letter-spacing: -0.005em;
  color: var(--tx);
  text-wrap: balance;
}
body[data-view="textbooks"] #ct .lesson-nav-context { font: italic 400 14px/1.4 var(--font-serif); color: var(--tx1); text-transform: none; letter-spacing: 0; }

/* ---------- 16. Focus, motion, forced colours ---------- */
body[data-view="textbooks"] #ct :is(.sr > .st:not(.rev), .eb[id^="mcq-"] > .st:not(.rev), .sr > .btn[data-tb-raei], .mcq-choice, .lang-quiz-btn, .lang-quiz-option, .tb-actions > button, .sf-vote, .sf-send, .lesson-nav-card, .bks, .tb-breadcrumb a):focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 3px;
  box-shadow: none;
}
body[data-view="textbooks"] #ct .sr > .st:not(.rev):focus-visible,
body[data-view="textbooks"] #ct .tb-actions > [data-tb-complete]:focus-visible { outline-offset: 2px; }
body[data-view="textbooks"] #ct .st.rev:focus,
body[data-view="textbooks"] #ct .st.rev:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  body[data-view="textbooks"] #ct .st,
  body[data-view="textbooks"] #ct .st.rev { animation: none; transition: none; }
}
@media (forced-colors: active) {
  body[data-view="textbooks"] #ct .ls > ul:not([class]) > li::before,
  body[data-view="textbooks"] #ct .cb ul > li::before { forced-color-adjust: none; background: CanvasText; }
  body[data-view="textbooks"] #ct .lang-sb-fill { forced-color-adjust: none; background: Highlight; }
  body[data-view="textbooks"] #ct .mcq-choice.mcq-correct,
  body[data-view="textbooks"] #ct .mcq-choice.mcq-wrong { border-left: 3px solid CanvasText; }
}

/* ---------- 17. Phone ---------- */
@media (max-width: 600px) {
  body[data-view="textbooks"] #ct h2.sec-title { font-size: 31px; line-height: 1.15; }
  body[data-view="textbooks"] #ct .sec-num { font-size: 36px; }
  body[data-view="textbooks"] #ct .ls > h3:not(:first-child) { font-size: 25px; }
  body[data-view="textbooks"] #ct .ls > h4:not(.ref-head) { font-size: 22px; }
  body[data-view="textbooks"] #ct .cb > h4,
  body[data-view="textbooks"] #ct .cb > h3 { font-size: 20px; }
  body[data-view="textbooks"] #ct .eb > h4 { font-size: 21px; }
  body[data-view="textbooks"] #ct .cb { margin: 36px 0 28px; }
  body[data-view="textbooks"] #ct .ls-obj .tag { font-size: 16px; }
  body[data-view="textbooks"] #ct > .lesson-nav { grid-template-columns: 1fr; }
  body[data-view="textbooks"] #ct .lesson-nav-next { text-align: left; align-items: flex-start; border-top: 1px solid var(--bdr); }
  body[data-view="textbooks"] #ct .lesson-nav-empty { display: none; }
  body[data-view="textbooks"] #ct > .tb-actions { gap: 2px 22px; }
  body[data-view="textbooks"] #ct .mcq-choice.mcq-correct,
  body[data-view="textbooks"] #ct .mcq-choice.mcq-wrong { padding-right: 8px; padding-bottom: 30px; }
  body[data-view="textbooks"] #ct .mcq-choice.mcq-correct::after,
  body[data-view="textbooks"] #ct .mcq-choice.mcq-wrong::after { top: auto; bottom: 8px; left: 38px; right: auto; }
}

/* ---------- 18. Wide: every block on the figure's grid (screen only) ---------- */
@media screen {
  body[data-view="textbooks"] #ct[data-reader="wide"] > .ls,
  body[data-view="textbooks"] #ct[data-reader="wide"] > .eb,
  body[data-view="textbooks"] #ct[data-reader="wide"] > h3,
  body[data-view="textbooks"] #ct[data-reader="wide"] > .section-feedback,
  body[data-view="textbooks"] #ct[data-reader="wide"] > .na,
  body[data-view="textbooks"] #ct[data-reader="wide"] > .lesson-nav,
  body[data-view="textbooks"] #ct[data-reader="wide"] > .tb-breadcrumb,
  body[data-view="textbooks"] #ct[data-reader="wide"] > .tb-pathreturn,
  body[data-view="textbooks"] #ct[data-reader="wide"] > .cb {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    margin-left: 24px;
    margin-right: 24px;
    padding-left: var(--cm-off);
    padding-right: max(0px, calc(100% - 1072px));
    position: relative;
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] > .tb-breadcrumb { margin-bottom: 36px; text-align: left; justify-content: flex-start; }

  /* masthead: "Lecture" over 3.3 in the margin */
  body[data-view="textbooks"] #ct[data-reader="wide"] .sec-masthead {
    margin: 0 0 40px -264px;
    padding: 20px 0 0 var(--cm-off);
    min-height: 118px;
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] .sec-kind { top: 24px; left: 0; width: var(--cm-m); }
  body[data-view="textbooks"] #ct[data-reader="wide"] .sec-num {
    position: absolute;
    left: 0;
    top: 50px;
    margin: 0;
    font-size: 54px;
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] .sec-eyebrow { margin-bottom: 12px; padding-right: 48px; }
  body[data-view="textbooks"] #ct[data-reader="wide"] h2.sec-title { font-size: 44px; line-height: 1.1; padding-right: 48px; }
  body[data-view="textbooks"] #ct[data-reader="wide"] .sec-masthead .bks { right: -10px; top: 12px; }

  /* objectives: kicker in the margin, numerals hang in the gutter */
  body[data-view="textbooks"] #ct[data-reader="wide"] .ls-obj-h {
    position: absolute;
    left: -264px;
    top: 3px;
    width: var(--cm-m);
    margin: 0;
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] .ls-obj .tag { padding-left: 0; }
  body[data-view="textbooks"] #ct[data-reader="wide"] .ls-obj .tag::before { left: auto; right: calc(100% + 14px); width: auto; text-align: right; }

  /* lesson body: the skill note lives in the margin */
  body[data-view="textbooks"] #ct[data-reader="wide"] > .tb-lesson { margin-top: 56px; background-image: none; border-top: 1px solid var(--tx); }
  body[data-view="textbooks"] #ct[data-reader="wide"] > .tb-lesson > .lang-skill-bar-mount:not(.tb-sb-inline) {
    float: left;
    clear: left;
    width: var(--cm-m);
    margin: 3px 0 24px -264px;
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] > .tb-lesson > .lang-skill-bar-mount:not(.tb-sb-inline) .lang-sb-card { border: 0; padding: 0; }
  body[data-view="textbooks"] #ct[data-reader="wide"] > .tb-lesson > .lang-skill-bar-mount:not(.tb-sb-inline) .lang-sb-name { font-size: 14.5px; }
  body[data-view="textbooks"] #ct[data-reader="wide"] > .tb-lesson > .lang-skill-bar-mount:not(.tb-sb-inline) .lang-sb-caption { font-size: 13.5px; }
  /* anything that reaches into the margin starts below the note */
  body[data-view="textbooks"] #ct[data-reader="wide"] > .ls > :is(div:not(.lang-skill-bar-mount), aside, table, p.lang-pause-check, .ref-head, .ref-list) { clear: left; }

  /* concept boxes: kicker and ordinal in the margin (a box set straight in #ct, like the
     "Content Coming Soon" placeholder, has no margin column to reach into: it sits on the grid) */
  body[data-view="textbooks"] #ct[data-reader="wide"] > * .cb {
    margin: 52px 0 44px -264px;
    padding: 18px 0 0 var(--cm-off);
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] > * .cb::before {
    content: "Concept";
    position: absolute;
    left: 0;
    top: 21px;
    width: var(--cm-m);
    margin: 0;
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] > * .cb::after {
    content: counter(tb-cb);
    position: absolute;
    left: 0;
    top: 45px;
    font: 600 24px/1 var(--font-serif);
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums;
    color: var(--tx);
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] .cb ol > li { padding-left: 0; }
  body[data-view="textbooks"] #ct[data-reader="wide"] .cb ol > li::before { left: auto; right: calc(100% + 14px); width: auto; text-align: right; }

  /* legacy widgets: the "Interactive" kicker in the margin, as the figure's */
  body[data-view="textbooks"] #ct[data-reader="wide"] .ls > :is([data-gar-demo], [data-gst-demo], [data-lang-demo], [data-mlg-demo], [data-pet-demo], [data-psn-demo], [data-res-demo], [data-sa-demo], [data-sds-demo], [data-seismic-demo], [data-sp-demo], [data-vel-demo], [data-rp-demo], [data-gm-demo], [data-ssm-demo]):not(.of-host):not(.lang-skill-bar-mount) {
    margin-left: -264px;
    padding-left: var(--cm-off);
    padding-top: 18px;
    max-width: none;
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] .ls > :is([data-gar-demo], [data-gst-demo], [data-lang-demo], [data-mlg-demo], [data-pet-demo], [data-psn-demo], [data-res-demo], [data-sa-demo], [data-sds-demo], [data-seismic-demo], [data-sp-demo], [data-vel-demo], [data-rp-demo], [data-gm-demo], [data-ssm-demo]):not(.of-host):not(.lang-skill-bar-mount)::before {
    position: absolute;
    left: 0;
    top: 21px;
    width: var(--cm-m);
    margin: 0;
  }

  /* callouts, pause, references, quick check: kickers in the margin */
  body[data-view="textbooks"] #ct[data-reader="wide"] .lang-rw-callout { margin-left: -264px; padding-left: var(--cm-off); }
  body[data-view="textbooks"] #ct[data-reader="wide"] .lang-rw-callout-eyebrow { position: absolute; left: 0; top: 17px; width: var(--cm-m); margin: 0; }
  body[data-view="textbooks"] #ct[data-reader="wide"] .lang-pause-check::before { position: absolute; left: -264px; top: 5px; width: var(--cm-m); margin: 0; }
  body[data-view="textbooks"] #ct[data-reader="wide"] .ls > .ref-head { position: absolute; left: 0; width: var(--cm-m); margin-top: 12px; }
  body[data-view="textbooks"] #ct[data-reader="wide"] .lang-quiz-root { margin-left: -264px; padding-left: var(--cm-off); position: relative; }
  body[data-view="textbooks"] #ct[data-reader="wide"] .lang-quiz-title { position: absolute; left: 0; top: 19px; width: var(--cm-m); margin: 0; }

  /* worked examples: kicker and numeral in the margin, step numerals in the gutter */
  body[data-view="textbooks"] #ct[data-reader="wide"] .tb-kick {
    position: absolute;
    left: 0;
    top: 19px;
    width: var(--cm-m);
    margin: 0;
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] .tb-kick-l { display: block; }
  body[data-view="textbooks"] #ct[data-reader="wide"] .tb-kick-n {
    display: block;
    margin-top: 8px;
    font: 600 30px/1 var(--font-serif);
    font-variant-caps: normal;
    letter-spacing: -0.01em;
    color: var(--tx);
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] .sr > .st { padding-left: 0; }
  body[data-view="textbooks"] #ct[data-reader="wide"] .sr > .st.rev::before { left: auto; right: calc(100% + 14px); width: auto; text-align: right; }
  body[data-view="textbooks"] #ct[data-reader="wide"] .sr > .st:not(.rev) { padding-left: 15px; }

  /* practice: the heading is the kicker, each question number the numeral */
  body[data-view="textbooks"] #ct[data-reader="wide"] > h3 {
    margin-bottom: -17px;
    padding-left: 0;
    padding-right: 0;
    z-index: 1;
    pointer-events: none;
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] > h3 > * { pointer-events: auto; }
  body[data-view="textbooks"] #ct[data-reader="wide"] > h3 + .eb[id^="mcq-"] { padding-top: 0; }
  body[data-view="textbooks"] #ct[data-reader="wide"] .eb[id^="mcq-"] > p:first-child > strong.tb-qn {
    position: absolute;
    left: 0;
    top: 12px;
    margin: 0;
    font: 600 24px/1.1 var(--font-serif);
    letter-spacing: -0.01em;
    color: var(--tx);
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] > h3 + .eb[id^="mcq-"] > p:first-child > strong.tb-qn { top: 26px; }

  /* the footer: kickers in the margin */
  body[data-view="textbooks"] #ct[data-reader="wide"] > .tb-actions::before,
  body[data-view="textbooks"] #ct[data-reader="wide"] > .section-feedback::before {
    position: absolute;
    left: 0;
    width: var(--cm-m);
    font: var(--cm-kick);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
    color: var(--ac-strong);
  }
  body[data-view="textbooks"] #ct[data-reader="wide"] > .tb-actions::before { content: "This section"; top: 30px; }
  body[data-view="textbooks"] #ct[data-reader="wide"] > .section-feedback::before { content: "Feedback"; top: 26px; }
  body[data-view="textbooks"] #ct[data-reader="wide"] > .na > h3 { position: absolute; left: 0; top: 20px; width: var(--cm-m); }
}

/* ---------- 19. Print: one column, no controls ---------- */
@media print {
  body[data-view="textbooks"] #ct :is(.tb-actions, .section-feedback, .na, .lesson-nav, .tb-pathreturn, .sr > .st:not(.rev), .sr > .btn[data-tb-raei], .eb[id^="mcq-"] > .st:not(.rev), .lang-quiz, .lang-skill-bar-mount) { display: none !important; }
  body[data-view="textbooks"] #ct :is(.cb, .eb, .sec-masthead) { break-inside: avoid; }
  body[data-view="textbooks"] #ct :is(.cb, .eb.tb-ex, .tb-lesson, .sec-masthead) { border-top-color: var(--tx); }
}