/* UNomaha Fall 2026 — shared editorial dark palette */
:root {
  --bg: #0e0e10;
  --bg-2: #16161a;
  --bg-3: #1c1c21;
  --ink: #e9e6df;
  --ink-2: #b8b3a7;
  --ink-3: #7a7568;
  --rule: #2a2a31;
  --amber: #e6a85c;
  --amber-2: #f4c97a;
  --teal: #6cc1b6;
  --rose: #d97a7a;
  --green: #8bbf7a;
  --violet: #a890d9;
  --blue: #7aa8d9;
  --shadow: 0 1px 0 rgba(255,255,255,.04), 0 12px 40px rgba(0,0,0,.5);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Times New Roman', Times, 'Liberation Serif', Georgia, serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(230,168,92,.06), transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(108,193,182,.04), transparent 60%);
  min-height: 100vh;
}
h1, h2, h3, h4, .display, .serif {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; margin: 0 0 .4em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; margin: 1.6em 0 .5em; }
h3 { font-size: 1.25rem; margin: 1.4em 0 .3em; color: var(--amber-2); }
h4 { font-size: 1rem; margin: 1em 0 .2em; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
p, li { color: var(--ink); }
small, .small { color: var(--ink-3); font-size: .85em; }
a { color: var(--amber-2); text-decoration: none; border-bottom: 1px dashed rgba(244,201,122,.3); }
a:hover { color: var(--amber); border-bottom-color: var(--amber); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* Top nav */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14,14,16,.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.topnav-inner {
  display: flex; align-items: center; gap: 8px;
  max-width: 1100px; margin: 0 auto; padding: 12px 24px;
  flex-wrap: wrap;
}
.topnav .brand {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem; font-weight: 500;
  color: var(--amber-2); border: 0;
  margin-right: auto;
}
.topnav .brand small { display: block; font-size: .65em; color: var(--ink-3); letter-spacing: .15em; text-transform: uppercase; font-family: 'Inter', sans-serif; }
.topnav a.tab {
  font-size: .82rem; padding: 6px 12px;
  border-radius: 6px; border: 1px solid transparent;
  color: var(--ink-2); background: transparent;
  transition: all .15s ease;
  border-bottom: 0;
}
.topnav a.tab:hover { color: var(--ink); background: var(--bg-3); }
.topnav a.tab.active { color: var(--amber-2); border-color: rgba(230,168,92,.3); background: rgba(230,168,92,.08); }

/* Hero */
.hero {
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--rule);
}
.hero .eyebrow {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 16px;
}
.hero h1 { max-width: 800px; }
.hero .lede { font-size: 1.1rem; color: var(--ink-2); max-width: 720px; margin-top: 12px; }

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 28px 0; }
.card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px;
  transition: all .2s ease;
  display: block;
  border-bottom: 1px solid var(--rule); /* override link underline */
  color: var(--ink);
}
.card:hover { transform: translateY(-2px); border-color: var(--amber); box-shadow: var(--shadow); }
.card .code { font-family: 'JetBrains Mono', monospace; font-size: .78rem; color: var(--ink-3); }
.card h3 { margin: .3em 0; color: var(--ink); }
.card .meta { font-size: .85rem; color: var(--ink-2); }
.card .accent-bar { height: 3px; border-radius: 2px; margin-bottom: 14px; }

.course-eco .accent-bar { background: var(--green); }
.course-cell .accent-bar { background: var(--violet); }
.course-micro .accent-bar { background: var(--teal); }
.course-neuro .accent-bar { background: var(--rose); }
.course-astro .accent-bar { background: var(--blue); }

/* Reader accent. book-reader.css reads var(--accent) and fell back to green on
   every course, so the micro/neuro/cell readers all rendered in Ecology's colour. */
.course-eco   { --accent: var(--green);  --accent-soft: rgba(139,191,122,.16); }
.course-cell  { --accent: var(--violet); --accent-soft: rgba(168,144,217,.16); }
.course-micro { --accent: var(--teal);   --accent-soft: rgba(108,193,182,.16); }
.course-neuro { --accent: var(--rose);   --accent-soft: rgba(217,122,122,.16); }

.course-eco h1, .course-eco h2, .course-eco a, .course-eco .accent { color: var(--green); }
.course-cell h1, .course-cell h2, .course-cell a, .course-cell .accent { color: var(--violet); }
.course-micro h1, .course-micro h2, .course-micro a, .course-micro .accent { color: var(--teal); }
.course-neuro h1, .course-neuro h2, .course-neuro a, .course-neuro .accent { color: var(--rose); }
.course-astro h1, .course-astro h2, .course-astro a, .course-astro .accent { color: var(--blue); }

/* tile / sub-page mini grid */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 20px 0; }
.tile {
  background: var(--bg-2); border: 1px solid var(--rule);
  border-radius: 10px; padding: 18px;
  border-bottom: 1px solid var(--rule); color: var(--ink);
}
.tile:hover { border-color: var(--amber); transform: translateY(-2px); }
.tile .ico { font-size: 1.4rem; margin-bottom: 8px; }
.tile h4 { color: var(--ink); margin: 0 0 4px; text-transform: none; letter-spacing: 0; font-size: 1rem; }
.tile p { font-size: .85rem; color: var(--ink-3); margin: 0; }

/* Tables (study-guide friendly) */
table.kvt { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .92rem; }
table.kvt th, table.kvt td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.kvt th { font-weight: 600; color: var(--amber-2); font-family: 'Fraunces',serif; font-size: 1rem; }
table.kvt td:first-child { color: var(--ink-2); width: 30%; font-weight: 500; }

/* Callouts */
.callout {
  border-left: 3px solid var(--amber);
  background: rgba(230,168,92,.06);
  padding: 14px 18px;
  margin: 18px 0;
  border-radius: 0 8px 8px 0;
}
.callout.warn { border-color: var(--rose); background: rgba(217,122,122,.06); }
.callout.tip  { border-color: var(--teal); background: rgba(108,193,182,.06); }
.callout h4 { margin-top: 0; }

/* Buttons */
.btn {
  display: inline-block; padding: 10px 18px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--bg-3); color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 500;
  cursor: pointer; transition: all .15s ease;
  border-bottom: 1px solid var(--rule);
}
.btn:hover { background: var(--bg-2); border-color: var(--amber); color: var(--amber-2); }
.btn.primary { background: var(--amber); color: #14110a; border-color: var(--amber); }
.btn.primary:hover { background: var(--amber-2); color: #14110a; }
.btn.ghost { background: transparent; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }

/* Footer */
footer.site {
  margin-top: 80px; padding: 30px 0;
  border-top: 1px solid var(--rule);
  font-size: .85rem; color: var(--ink-3);
}

/* Definition lists (study guide) */
dl.terms { margin: 20px 0; }
dl.terms dt { font-weight: 600; color: var(--amber-2); font-family: 'Fraunces',serif; font-size: 1.05rem; margin-top: 14px; }
dl.terms dd { margin: 4px 0 0 0; color: var(--ink); padding-left: 0; }

/* Code chip / kbd */
.chip { display: inline-block; background: var(--bg-3); border: 1px solid var(--rule); border-radius: 6px; padding: 2px 8px; font-family: 'JetBrains Mono', monospace; font-size: .82em; color: var(--amber-2); }
kbd { background: var(--bg-3); border: 1px solid var(--rule); border-bottom-width: 2px; padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: .85em; }

/* Print friendliness for cheat sheets */
@media print {
  .topnav, footer.site, .no-print { display: none !important; }
  body { background: white; color: black; font-size: 10pt; }
  .container { max-width: none; padding: 0; }
  h1, h2, h3 { color: black; }
  .card, .tile, .callout, table.kvt th, table.kvt td { background: white; color: black; border-color: #ccc; }
  a { color: black; border-bottom: 0; }
  dl.terms dt { color: black; }
}

/* Mobile — comprehensive responsive layout */
@media (max-width: 900px) {
  .container { padding: 0 18px; }
  /* Topnav: horizontal scroll instead of wrap */
  .topnav-inner { padding: 10px 16px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .topnav-inner::-webkit-scrollbar { height: 4px; }
  .topnav-inner::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
  .topnav .brand { flex-shrink: 0; margin-right: 14px; min-height: 40px; display: inline-flex; align-items: center; }
  .topnav a.tab { flex-shrink: 0; white-space: nowrap; font-size: .82rem; padding: 8px 12px; min-height: 38px; display: inline-flex; align-items: center; }
  .hero { padding: 32px 0 24px; }
  .hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero .lede { font-size: 1rem; }
  .card-grid { grid-template-columns: 1fr; }
  table.kvt th, table.kvt td { padding: 8px; font-size: .88rem; }
  /* Force long URLs and code to wrap */
  pre, code, .equation, .measure { word-break: break-word; overflow-wrap: anywhere; }
  /* Chapter cards full-width */
  .tb-chapter { padding: 18px; margin: 30px 0; }
  /* Search chip → small icon-only button at bottom-right (above any browser UI).
     JS widget uses an internal <style> so we override with !important. */
  .usw-launcher { right: 12px !important; bottom: 12px !important; top: auto !important; left: auto !important; padding: 10px !important; font-size: 0 !important; border-radius: 50% !important; box-shadow: 0 6px 20px rgba(0,0,0,.5) !important; }
  .usw-launcher .usw-lbl, .usw-launcher kbd { display: none !important; }
  .usw-launcher svg { width: 18px !important; height: 18px !important; }
  /* Reserve right padding so last tab isn't hidden by overflow gradient */
  .topnav-inner { padding-right: 30px; }
  /* Touch targets: stim-chip, filter inputs */
  .stim-chip { min-height: 38px; padding: 8px 12px; }
  input[type="text"], input[type="search"] { min-height: 38px; font-size: 16px; }
}
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .topnav .brand { font-size: .82rem; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topnav .brand small { display: none; }
  .topnav a.tab { font-size: .78rem; padding: 7px 10px; min-height: 36px; }
  .tile, .card { padding: 18px; }
  .btn, button.btn { min-height: 44px; padding: 10px 16px; }
  .hero { padding: 24px 0 18px; }
  .hero h1 { font-size: clamp(1.5rem, 8vw, 2rem); line-height: 1.15; }
  .hero .eyebrow { font-size: .68rem; }
  .tb-chapter { padding: 14px; margin: 22px 0; border-radius: 10px; }
  .tb-chapter > h2 { font-size: 1.2rem; }
}

/* --------------------------------------------------------------------------
   Study-guide tables on a phone.

   table.kvt is width:100% but its columns still need real room, so a 4- or
   5-column comparison table forced the whole PAGE to scroll sideways: measured
   490px of content in a 375px viewport on microbiology/study-guide.html, from
   three tables up to 474px wide.

   Making the table its own scroll container keeps the page itself fixed: you
   swipe the table, not the article. `display:block` is what gives the element
   a scrollport without needing a wrapper div around all 25 existing tables.
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  table.kvt {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* the 30% first column is a desktop nicety; on a phone it squeezes the rest */
  table.kvt td:first-child { width: auto; }
  table.kvt th, table.kvt td { padding: 8px 10px; font-size: .86rem; min-width: 7.5em; }
  /* a scrollable table is only discoverable if it looks scrollable */
  table.kvt::-webkit-scrollbar { height: 4px; }
  table.kvt::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
}

/* === Diagram figures (embedded SVG/PNG learning aids from Wikimedia Commons) === */
figure.diagram {
  margin: 18px 0 24px;
  padding: 14px 16px 12px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  text-align: center;
}
figure.diagram img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
figure.diagram figcaption {
  margin-top: 10px;
  font-size: .82rem;
  color: var(--ink-3);
  font-style: italic;
  line-height: 1.4;
}
figure.diagram figcaption b { color: var(--ink-2); font-style: normal; }
figure.diagram.compact img { max-width: 480px; }
figure.diagram.wide img { max-width: 100%; }
figure.diagram.hero { margin: 24px 0 28px; }
figure.diagram.hero img { max-height: 440px; }

/* ==========================================================================
   Reading layout for the embedded textbooks
   --------------------------------------------------------------------------
   The 106 chapter pages (ecology, neuroscience, cell-biology, microbiology)
   each carry their own inline <style> for `.ch-layout`. That inline block is
   parsed after this file, so anything here that needs to win is written with
   one extra level of specificity (`body .ch-layout`, `html[data-fit] ...`).
   Editing this one file therefore retunes every chapter at once.

   `--ch-max` is consumed by the inline `style="max-width:var(--ch-max,1180px)"`
   on each page's breadcrumb, title and stats bar, so the header furniture stays
   flush with the article column whenever the container width changes here.
   ========================================================================== */

:root { --ch-max: 1340px; }

body .ch-layout {
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 52px);
  max-width: var(--ch-max);
}

/* Capped rather than stretched to the column: past roughly this measure the
   line length costs more in readability than the extra words gain. It stays
   left-aligned in the column so the breadcrumb, title and stats bar - which are
   flush with the grid's left edge - line up with the start of the TOC rail the
   way the original design intended. */
body .ch-article { max-width: 920px; }

/* Slightly larger type and looser leading - the column is much wider than it
   used to render, so the text can afford to be easier on the eye. */
body .ch-article p {
  font-size: 1.14rem;
  line-height: 1.72;
}

/* Figures scale with the roomier column. */
body .ch-section figure.inline img { max-height: 420px; }
body .ch-section figure.float-right,
body .ch-section figure.float-left { max-width: 380px; }
body .ch-section figure.full-width img { max-height: 560px; }
body .ch-extra-figs { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
body .ch-extra-figs img { max-height: 300px; }

/* Sticky side TOC: cap it so a 30-entry chapter list scrolls inside the rail
   instead of running the full height of the viewport. */
body .ch-mini-toc { max-height: calc(100vh - 120px); }

/* --------------------------------------------------------------------------
   Auto-fit: adapt to the width actually left for the page, not the window.
   --------------------------------------------------------------------------
   Study Chat docks a resizable panel by putting `padding-right` on <body>, so
   the reading area can be several hundred pixels narrower than the viewport.
   Plain `@media (max-width: ...)` never sees that - it only ever measures the
   window - so a wide monitor with a wide panel open kept the desktop grid and
   squeezed the article. study-chat.js publishes the real available width as
   `data-fit` on <html> and these rules key off that instead.

   Values: lg >= 1180 | md 940-1179 | sm 700-939 | xs < 700.
   -------------------------------------------------------------------------- */

html[data-fit="md"] body .ch-layout {
  grid-template-columns: minmax(180px, 210px) minmax(0, 1fr);
  gap: 30px;
}

html[data-fit="sm"] body .ch-layout,
html[data-fit="xs"] body .ch-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* Stacked into one column an unbounded TOC becomes a 30-link wall between the
   reader and the first paragraph - the chapters run to 33 entries. Capping it
   turns it into a short scrollable index instead. It stays a plain height cap
   rather than a forced collapse so the page's own "In this chapter" toggle,
   which drives `data-collapsed`, keeps working unchanged. */
html[data-fit="sm"] body .ch-mini-toc,
html[data-fit="xs"] body .ch-mini-toc {
  position: static;
  max-height: 172px;
  overflow-y: auto;
  margin-bottom: 22px;
}
html[data-fit="sm"] body .ch-mini-toc[data-collapsed="true"],
html[data-fit="xs"] body .ch-mini-toc[data-collapsed="true"] {
  max-height: none;
  overflow-y: visible;
}

html[data-fit="xs"] body .ch-layout { padding: 0 14px; }
html[data-fit="xs"] body .ch-article p { font-size: 1.08rem; }

/* Figures stop floating once the column is too narrow to flow text beside one. */
html[data-fit="sm"] body .ch-section figure.float-right,
html[data-fit="sm"] body .ch-section figure.float-left,
html[data-fit="xs"] body .ch-section figure.float-right,
html[data-fit="xs"] body .ch-section figure.float-left {
  float: none;
  max-width: 100%;
  margin: 18px 0;
}

/* --------------------------------------------------------------------------
   Keep the nav out from under the search pill.
   --------------------------------------------------------------------------
   `#uswLauncher` is position:fixed against the right edge of the reading area
   (study-chat.js translates it clear of the panel), so it is outside the nav's
   flow and simply lands on top of the last tabs once `.topnav-inner` grows wide
   enough to reach it - covering "Notes" from about 1280px down, and "Mastery"
   and "Practice Exam" with the panel open. The launcher needs ~194px including
   its right offset; the nav already gets that for free from the centring margin
   once the reading area exceeds the 1100px cap, so only the shortfall is added
   back as padding. --fit-w is the reading-area width published by
   study-chat.js, which is what makes this track the panel and not just the
   window. */
.topnav-inner {
  padding-right: max(24px, calc(194px - max(0px, calc((var(--fit-w, 100vw) - 1100px) / 2))));
}

/* The MCAT chapters are built on `.container` + `.mcat-prose` rather than
   `.ch-layout`, and were set to a 740px measure inside a 1100px container -
   narrower than the chapter readers even though they carry the same kind of
   long-form text. Match them up. */
body .mcat-prose { max-width: 900px; }
body .mcat-prose p { font-size: 1.14rem; line-height: 1.72; }

/* The MCAT chapters and the hub-style pages use `.container` + `.mcat-prose`
   rather than `.ch-layout`; give them the same panel-aware narrowing. */
html[data-fit="sm"] body .container,
html[data-fit="xs"] body .container { padding-left: 16px; padding-right: 16px; }
html[data-fit="xs"] body .card-grid,
html[data-fit="xs"] body .tile-grid { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Figures that never loaded.
   --------------------------------------------------------------------------
   138 files under mcat/figures/ are HTML error pages saved with an image
   extension by the original crawl, so they decode to nothing. study-chat.js
   tags those <img>s with `data-img-broken` on error; this collapses them to a
   labelled placeholder instead of a torn-page icon on a white card.

   The `body` prefix is load-bearing: the chapter pages' own <style> block is
   parsed after this file and paints every figure on a white card
   (`.mcat-prose img { background:#fff }`), which would otherwise show through
   behind the placeholder.
   -------------------------------------------------------------------------- */
body img[data-img-broken] {
  position: relative;
  display: inline-block;
  min-width: 200px;
  min-height: 64px;
  padding: 0;
  box-sizing: border-box;
  background: var(--bg-3, #1a1c17);
  border: 1px dashed var(--rule, #2c3128);
  border-radius: 8px;
  box-shadow: none;
  float: none;
  color: transparent;
}
/* Generated content still renders on an <img> whose source failed to decode,
   which is what lets this cover the browser's own torn-page glyph. Painting the
   alt text here rather than leaving it to the img means one tidy caption
   instead of an icon sitting next to a fragment of a filename. */
body img[data-img-broken]::before {
  content: attr(alt);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 7px;
  background: var(--bg-3, #1a1c17);
  color: var(--ink-3, #7b8175);
  font: italic 400 .78rem/1.4 'Inter', system-ui, sans-serif;
  text-align: center;
}

/* ==========================================================================
   Archive section (hub)
   --------------------------------------------------------------------------
   Finished courses and non-coursework sites still need to be reachable, but
   they should not compete with the four live Fall courses for attention. They
   sit at the foot of the hub behind a single "Archive" nav tab, dimmed until
   hovered rather than hidden, so nothing is lost.
   ========================================================================== */

/* ---------- source badge (which book / what format) ---------- */
.src-badge{
  margin:14px 0 22px; padding:12px 14px;
  background:var(--bg-2); border:1px solid var(--rule);
  border-left:3px solid var(--teal); border-radius:8px;
}
.src-badge-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.src-badge-book{ font-size:.92rem; color:var(--ink-2); }
.src-badge-by{ color:var(--ink-3); font-weight:400; }
.src-badge-pill{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.72rem;
  padding:3px 8px; border-radius:999px;
  border:1px solid var(--rule); color:var(--ink-2); white-space:nowrap;
}
.src-badge-pill-off{ opacity:.55; text-decoration:line-through; }
.src-badge-meta{ margin:8px 0 0; font-size:.8rem; color:var(--ink-3); line-height:1.5; }
.src-badge-warn{
  margin:10px 0 0; padding:9px 11px; border-radius:6px;
  background:rgba(220,140,40,.10); border:1px solid rgba(220,140,40,.42);
  font-size:.8rem; color:var(--ink-2); line-height:1.55;
}
.src-badge-sib{ margin:8px 0 0; font-size:.8rem; color:var(--ink-3); }
@media (max-width:640px){ .src-badge{ margin:10px 0 16px; } }
.src-badge-pill-current{ border-color:var(--teal); color:var(--teal); font-weight:600; }
.src-badge-pill-wrong{ border-color:#c0392b; color:#e06055; font-weight:600; }
.src-badge-wrongbook{ border-left-color:#c0392b; background:rgba(192,57,43,.07); }
.src-badge-wrongbook .src-badge-warn{ background:rgba(192,57,43,.12); border-color:rgba(192,57,43,.5); }
.src-badge-warn a{ color:var(--teal); font-weight:600; }
/* reader-mode toggle */
.src-seg{ display:inline-flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden; }
.src-seg-btn{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.72rem;
  padding:5px 11px; border:0; background:transparent; color:var(--ink-3); cursor:pointer;
}
.src-seg-btn:hover{ color:var(--ink-2); }
.src-seg-btn.is-on{ background:var(--teal); color:#08211f; font-weight:600; }
.src-pdf-host{ margin:0 0 24px; }
.src-pdf-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 10px; }
.src-pdf-note{ font-size:.8rem; color:var(--ink-3); }
.src-pdf-link{
  font-size:.76rem; padding:4px 10px; border:1px solid var(--rule);
  border-radius:6px; color:var(--ink-2); text-decoration:none;
}
.src-pdf-link:hover{ border-color:var(--teal); color:var(--teal); }
.src-pdf-frame{
  width:100%; height:min(82vh,1000px); border:1px solid var(--rule);
  border-radius:8px; background:var(--bg-3);
}
@media (max-width:640px){ .src-pdf-frame{ height:72vh; } }
/* .ch-layout is a 2-col grid (TOC | article). The badge and PDF host are extra
   grid children, so they must span the full row — otherwise they consume the
   article's cell and push it into the narrow TOC column on the next row. */
.ch-layout > .src-badge,
.ch-layout > .src-pdf-host{ grid-column: 1 / -1; }
.src-badge, .src-pdf-host{ max-width:1180px; margin-left:auto; margin-right:auto; }
.src-badge{ margin-left:auto; margin-right:auto; }
@media (min-width:901px){ .src-badge, .src-pdf-host{ padding-left:20px; padding-right:20px; background-clip:padding-box; } }

/* ---------- Study Lab ---------- */
#quizRoot{max-width:900px;margin:26px auto 80px;padding:0 20px;}
.qz-h{font-family:Fraunces,Georgia,serif;font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 6px;}
.qz-sub{color:var(--ink-3);font-size:.86rem;margin:0 0 18px;line-height:1.55;}
.qz-modes{display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap;}
.qz-mode{background:var(--bg-3);color:var(--ink-3);border:1px solid var(--rule);border-radius:999px;padding:7px 16px;font-size:.82rem;cursor:pointer;font-family:inherit;}
.qz-mode.on{background:var(--teal);color:#08211f;border-color:var(--teal);font-weight:700;}
.qz-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:14px;background:var(--bg-2);border:1px solid var(--rule);border-radius:10px;margin-bottom:20px;}
.qz-f{display:flex;flex-direction:column;gap:5px;}
.qz-f label{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-family:'JetBrains Mono',monospace;}
.qz-f select{background:var(--bg-3);color:var(--ink-2);border:1px solid var(--rule);border-radius:6px;padding:7px 9px;font-size:.85rem;font-family:inherit;min-width:104px;}
.qz-go{background:var(--teal);color:#08211f;border:0;border-radius:6px;padding:9px 20px;font-weight:700;font-size:.88rem;cursor:pointer;}
.qz-go:disabled{opacity:.55;cursor:progress;}
.qz-note{font-size:.78rem;color:var(--ink-3);margin:10px 0 0;flex-basis:100%;}
.qz-card{background:var(--bg-2);border:1px solid var(--rule);border-radius:10px;padding:18px 20px;margin:0 0 16px;}
.qz-n{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--ink-3);margin-bottom:8px;}
.qz-q{font-size:1rem;line-height:1.55;margin:0 0 14px;}
.qz-opt{display:block;width:100%;text-align:left;background:var(--bg-3);color:var(--ink-2);border:1px solid var(--rule);border-radius:7px;padding:11px 13px;margin:0 0 8px;font-size:.92rem;font-family:inherit;line-height:1.45;cursor:pointer;}
.qz-opt:hover:not(:disabled){border-color:var(--teal);}
.qz-opt:disabled{cursor:default;}
.qz-opt.ok{border-color:#2e9e6b;background:rgba(46,158,107,.13);}
.qz-opt.no{border-color:#c0392b;background:rgba(192,57,43,.12);}
.qz-tag{font-family:'JetBrains Mono',monospace;font-size:.68rem;margin-left:8px;opacity:.85;}
.qz-exp{margin:12px 0 0;padding:12px 14px;background:var(--bg-3);border-left:3px solid var(--teal);border-radius:0 7px 7px 0;font-size:.86rem;line-height:1.6;}
.qz-exp h5{margin:0 0 5px;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-family:'JetBrains Mono',monospace;}
.qz-exp ul{margin:7px 0 0;padding-left:18px;}
.qz-exp li{margin:3px 0;color:var(--ink-3);}
.qz-cite{margin:10px 0 0;font-size:.78rem;color:var(--ink-3);border-top:1px dashed var(--rule);padding-top:9px;}
.qz-cite b{color:var(--ink-2);}
.qz-cite blockquote{margin:6px 0 0;padding-left:10px;border-left:2px solid var(--rule);font-style:italic;opacity:.85;}
.qz-score{position:sticky;top:70px;z-index:5;background:var(--bg-2);border:1px solid var(--rule);border-radius:8px;padding:9px 14px;margin:0 0 18px;font-family:'JetBrains Mono',monospace;font-size:.8rem;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.qz-msg{padding:14px 16px;border-radius:8px;font-size:.88rem;line-height:1.55;}
.qz-err{background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.45);}
.qz-wait{color:var(--ink-3);}
.fc{background:var(--bg-2);border:1px solid var(--rule);border-radius:12px;padding:34px 26px;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;margin:0 0 14px;}
.fc-term{font-family:Fraunces,Georgia,serif;font-size:1.6rem;line-height:1.3;}
.fc-def{font-size:1rem;line-height:1.6;color:var(--ink-2);max-width:620px;}
.fc-hint{margin-top:14px;font-size:.74rem;color:var(--ink-3);font-family:'JetBrains Mono',monospace;}
.fc-grade{display:flex;gap:10px;justify-content:center;margin:0 0 12px;}
.fc-btn{flex:1;max-width:200px;border:1px solid var(--rule);border-radius:8px;padding:11px;font-size:.88rem;font-family:inherit;cursor:pointer;background:var(--bg-3);color:var(--ink-2);}
.fc-again{border-color:#c0392b;color:#e06055;}
.fc-good{border-color:#2e9e6b;color:#4fbf8b;}
.rc-in{width:100%;background:var(--bg-3);color:var(--ink-2);border:1px solid var(--rule);border-radius:7px;padding:11px 13px;font-size:.95rem;font-family:inherit;}
.rc-in:focus{outline:none;border-color:var(--teal);}
.mt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mt-col{display:flex;flex-direction:column;gap:8px;}
.mt-i{background:var(--bg-3);border:1px solid var(--rule);border-radius:8px;padding:11px 13px;font-size:.86rem;line-height:1.45;text-align:left;font-family:inherit;color:var(--ink-2);cursor:pointer;}
.mt-i:hover:not(:disabled){border-color:var(--teal);}
.mt-i.sel{border-color:var(--teal);background:rgba(45,190,170,.12);}
.mt-i.done{opacity:.42;border-color:#2e9e6b;cursor:default;}
.mt-i.bad{border-color:#c0392b;animation:mtShake .32s;}
@keyframes mtShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:640px){.qz-bar{flex-direction:column;align-items:stretch;}.qz-f select{width:100%;}.mt-grid{grid-template-columns:1fr;}}


/* ---- full lecture study-guide blocks (rendered from the Desktop .docx guides) ---- */
.sg-lede { color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; margin: 10px 0 16px; }
.sg-list { margin: 8px 0 18px; padding-left: 22px; }
.sg-list li { margin-bottom: 7px; line-height: 1.62; }
.sg-list li strong { color: var(--ink); }
h3.sg-obj, h3.sg-review, h3.sg-mnemonic, h3.sg-quiz {
  margin-top: 26px; padding-top: 8px; border-top: 1px solid var(--rule);
  font-size: 1.02rem; letter-spacing: .01em;
}
h3.sg-obj      { color: var(--teal); }
h3.sg-review   { color: var(--amber-2); }
h3.sg-mnemonic { color: var(--green); }
h3.sg-quiz     { color: var(--rose); }
.sg-l-review li { margin-bottom: 9px; }
ul.sg-l-review { background: var(--bg-2); border-left: 3px solid var(--amber-2);
  border-radius: 0 8px 8px 0; padding: 14px 14px 14px 34px; }
ul.sg-l-mnemonic { background: var(--bg-2); border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0; padding: 14px 14px 14px 34px; font-style: italic; }
ol.sg-l-quiz li { margin-bottom: 10px; }
/* answer key stays shut until asked for - the questions are meant to be attempted */
details.sg-answers { margin: 12px 0 24px; background: var(--bg-2);
  border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; }
details.sg-answers summary { cursor: pointer; color: var(--amber); font-size: .9rem;
  font-family: 'Inter', sans-serif; }
details.sg-answers[open] summary { margin-bottom: 10px; border-bottom: 1px solid var(--rule);
  padding-bottom: 8px; }
@media (max-width: 640px) { .sg-list { padding-left: 18px; } }


/* ---- figures lifted from the Desktop .docx guides ---- */
.sg-fig { margin: 18px 0 22px; text-align: center; }
.sg-fig img { max-width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--rule); background: var(--bg-2); }
.sg-fig figcaption { margin-top: 8px; font-size: .84rem; line-height: 1.5;
  color: var(--ink-3); max-width: 640px; margin-left: auto; margin-right: auto;
  text-align: left; }
@media (max-width: 640px) { .sg-fig { margin: 14px 0 18px; } }


/* ---- study-page filter dropdown must not widen the page ----
   .sy-tools is a flex row injected by study.js and is itself a flex item of
   .sy-top. A flex item defaults to min-width:auto, so it cannot shrink below
   its content: once the cell-biology deck was re-tagged per chapter, the
   longest option ("Week 1 . Ch 6 Four types of tissue culture (7)") sized the
   <select>, .sy-tools grew to 375px inside its 343px parent, and the page had a
   391px scrollWidth on a 375px phone. The overflowing box is .sy-tools, not the
   select. Constrained at every width - a long tag overflows a narrow desktop
   column too. */
.sy-tools, .sy-tools > select { min-width: 0; max-width: 100%; box-sizing: border-box; }


/* ---- a bare URL in prose must not widen the page ----
   cell-biology/textbook.html quotes a source as a raw link
   (https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6333049), which is a single
   unbreakable token. At 375px it pushed one <p> to a 373px scrollWidth inside
   a 289px column and gave the whole page a 416px scrollWidth. break-word only
   engages when a token genuinely cannot fit, so normal prose is untouched. */
p, li, dd, td, th, blockquote, figcaption { overflow-wrap: break-word; }

/* Mobile overflow, second pass (2026-09-01, full 310-page browser sweep).
   Nine chapter pages still scrolled sideways at 375px. Three distinct causes.

   1. HEADINGS were never given a break opportunity. The earlier pass covered
      `p, li, dd, td, th, blockquote, figcaption` but not h1-h6, and the
      textbooks are full of slash compounds that browsers do not break:
      "Depersonalization/Derealization Disorder" (mcat 06 ch07, an h4 whose
      content measured 420px inside a 328px box) and "light-harvesting
      chlorophylls/bacteriochlorophylls" (microbiology brock-ch14, an h3).
      Anchors have the same problem in the prev/next rail.

   2. .ch-prevnext is `display:flex; justify-content:space-between` with no
      flex-wrap and no min-width:0 on its children, so the default
      min-width:auto refused to shrink a long chapter title below its text
      width (mcat 06 ch03/05/06/08/11). Same min-width:auto family as the
      first audit pass. These pages carry the rule in their own inline
      <style>, which loads after this file, so overriding it needs one extra
      specificity step (`body`), not merely a later rule here.

   3. .measure sets `white-space: nowrap` inline on the page. Keeping a value
      glued to its unit is right on desktop and wrong at 375px. */
h1, h2, h3, h4, h5, h6, a, figcaption { overflow-wrap: break-word; }

@media (max-width: 560px) {
  body .ch-prevnext { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 16px; }
  body .ch-prevnext > * { min-width: 0; overflow-wrap: anywhere; text-align: center; }
  body .measure { white-space: normal; }
}

/* Chapter grid: a viewport fallback for the data-fit collapse above.
   --------------------------------------------------------------------------
   `body .ch-layout` beats each chapter page's own inline `.ch-layout` rule,
   INCLUDING that page's `@media (max-width: 900px) { grid-template-columns:
   1fr }`, because a media query adds no specificity. So once this file loads,
   the ONLY thing that returns a chapter to one column is
   `html[data-fit="sm"|"xs"]` - and `data-fit` is published by study-chat.js.

   microbiology/textbook-ch29.html and ch30.html were the two chapter pages
   that never loaded study-chat.js (they were pulled off live during an
   earlier superset check and arrived without it). data-fit was therefore
   never set, they kept the desktop two-column grid at every width, and at
   375px the computed tracks were `250px 42px`: a 250px table of contents
   beside a 42-pixel-wide ribbon of body text, and a 553px document. Those two
   pages now load the script, but basic mobile layout must not depend on a
   script loading at all, so the same collapse is also expressed as a plain
   viewport query. The data-fit rules are more specific and still win when
   present, which is what we want - they measure the width actually left by
   the docked panel rather than the window. */
@media (max-width: 939px) {
  body .ch-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body .ch-mini-toc { position: static; max-height: 172px; overflow-y: auto; margin-bottom: 22px; }
  body .ch-mini-toc[data-collapsed="true"] { max-height: none; overflow-y: visible; }
}
@media (max-width: 699px) {
  body .ch-layout { padding: 0 14px; }
}

/* ============================================================================
   STUDY-GUIDE READING LAYOUT  (.sg-wrap)
   ----------------------------------------------------------------------------
   Scoped to <main class="container narrow sg-wrap"> on the five study-guide
   pages ONLY, so nothing else on the site can be affected by these rules.

   The problem it solves: `.sg-fig` was a full-width centred block, so every
   figure cut the column in half and pushed the argument it illustrates a
   screen away. Here figures float into the margin and the text wraps around
   them, which needs a wider measure than the 760px `.narrow` default.
   ========================================================================== */
.sg-wrap.narrow { max-width: 1000px; }

.sg-wrap p,
.sg-wrap .sg-list li { line-height: 1.7; }
.sg-wrap .sg-list li { margin-bottom: 9px; }
.sg-wrap h2 { margin-top: 46px; }
.sg-wrap h3 { margin-top: 28px; }

/* Figures wrap. All to the same side on purpose: a left and a right float
   that meet squeeze the text between them into an unreadable 230px gutter. */
.sg-wrap .sg-fig {
  float: right;
  clear: right;            /* one figure per band; two side by side halve the text */
  width: clamp(220px, 30%, 300px);
  margin: 6px 0 18px 30px;
  text-align: left;
}
.sg-wrap .sg-fig img { width: 100%; height: auto; }
.sg-wrap .sg-fig figcaption {
  max-width: none;
  margin: 8px 0 0;
  text-align: left;
  font-size: .8rem;
  line-height: 1.45;
}

/* A float must never run underneath the next section, and a heading must
   never sit squeezed beside one. */
.sg-wrap h2,
.sg-wrap .unitbar,
.sg-wrap .callout,
.sg-wrap table,
.sg-wrap figure.diagram { clear: both; }

/* Wide figures opt out of floating. */
.sg-wrap .sg-fig.wide,
.sg-wrap .sg-fig.full {
  float: none;
  width: 100%;
  margin: 20px 0 24px;
}

/* Below tablet the column is too narrow to wrap anything: stack full width. */
@media (max-width: 820px) {
  .sg-wrap .sg-fig {
    float: none;
    width: 100%;
    margin: 18px 0 22px;
  }
  .sg-wrap .sg-fig figcaption { text-align: left; }
}
@media (max-width: 480px) {
  .sg-wrap p, .sg-wrap .sg-list li { line-height: 1.66; }
  .sg-wrap h2 { margin-top: 34px; }
}

/* Study engine v2: insights panel, spacing issues, cram toggle */
.sy-issues { margin: 10px 0 4px; display: grid; gap: 6px; }
.sy-issue { border-left: 3px solid var(--amber); background: var(--bg-2); padding: 9px 13px; border-radius: 8px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.sy-issue.high { border-left-color: #c74e4e; }
.sy-issue.low { border-left-color: var(--ink-3); }
.sy-dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 12px 0; }
.sy-dcell { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 10px; padding: 12px; text-align: center; }
.sy-dcell b { display: block; font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--amber-2); }
.sy-dcell span { display: block; color: var(--ink-3); font-size: .74rem; margin-top: 4px; line-height: 1.3; }
.sy-h4 { font-family: 'Fraunces', serif; margin: 20px 0 6px; font-size: 1.05rem; }
.sy-fc { display: flex; gap: 6px; flex-wrap: wrap; }
.sy-fc span { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; text-align: center; font-size: .72rem; color: var(--ink-3); }
.sy-fc span b { display: block; font-size: 1.05rem; color: var(--ink); }
.sy-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.sy-table th { text-align: left; color: var(--ink-3); font-weight: 500; border-bottom: 1px solid var(--rule); padding: 6px 8px; }
.sy-table td { padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.sy-table td.bad { color: #ff8b8b; } .sy-table td.ok { color: #b5e2c2; } .sy-table td.over { color: var(--amber); }
.sy-note { color: var(--ink-3); font-size: .8rem; line-height: 1.55; margin: 6px 0 0; }
.sy-hard { font-size: .87rem; line-height: 1.65; padding-left: 20px; }
.sy-hard .lch { color: #b45309; font-style: normal; font-weight: 600; }
.sy-tools .btn.on { background: var(--amber); color: #14110a; border-color: transparent; font-weight: 600; }