/* BME 406 syllabus and lectures pages (/syllabus/, /syllabus/lectures/).
   Built by scripts/sync_syllabus.py. The document rules (everything from
   "Lab handbook: live synced page" down) are copied from the Chory Lab site
   (public/assets/css/style.css) so the page behaves like chorylab.com/bme590.
   Colours and type are switched to the BME 406 site: Duke navy, Arial. */
:root {
  --navy: #001A57;              /* Duke navy */
  --blue: #0033A0;              /* Duke royal */
  --blue-light: #a9c1ee;        /* links on dark */
  --navy-900: #00123d;          /* footnote popups */
  --ink: #1c2433;
  --muted: #4b5466;
  --line: #e4e8ef;
  --bg: #ffffff;
  --bg-soft: #f4f6fa;
  --bg-tint: #f8fafd;

  --font-display: Arial, Helvetica, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  --fs-micro: 11px;
  --fs--2: 12.5px;
  --fs--1: 13.5px;
  --fs-0: 15px;
  --fs-1: 16px;
  --fs-2: 18px;
  --fs-3: 21px;
  --fs-4: clamp(21px, 2.3vw, 26px);

  --fw-book: 400;
  --fw-med: 600;
  --fw-semi: 700;
  --tr-snug: -.01em;
  --tr-caps: .12em;

  --gutter: 24px;
  --band: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-1); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; }   /* prose links are underlined by .hb-content a */
.wrap { max-width: 1276px; margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 16px; } }

/* Header band, same gradient as the ordering guide hero */
.sy-head {
  color: #fff; padding: 34px 0 30px;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 40%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(135deg, #001A57 0%, #0033A0 100%);
}
.sy-eyebrow {
  display: inline-block; margin: 0 0 12px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.12); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.sy-head h1 { margin: 0; font-size: clamp(25px, 3.2vw, 36px); line-height: 1.15; letter-spacing: -.01em; }
.sy-lead { margin: 8px 0 0; color: #dbe4f6; font-size: var(--fs-0); max-width: 640px; }
@media (max-width: 820px) {
  .sy-head { padding: 24px 0 22px; }
  .sy-lead { display: none; }
}
.hb-bar .wrap { max-width: 1276px; }
.hb-bar-links a, .hb-bar-links button { line-height: 1.4; text-decoration: none; }
.hb-collapse-all {
  font-family: var(--font-body); font-size: var(--fs--1); font-weight: var(--fw-med);
  letter-spacing: .03em; color: #fff; padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.28); background: none; cursor: pointer;
}
.hb-collapse-all:hover { background: var(--blue); border-color: var(--blue); }
@media (max-width: 820px) { .hb-collapse-all { padding: 5px 9px; font-size: var(--fs--2); } }

.sy-foot { border-top: 1px solid var(--line); background: var(--bg-soft); color: var(--muted); font-size: var(--fs--1); }
.sy-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 20px; }

/* ===================== Lab handbook: live synced page ==============
   The handbook is generated from the live Google Doc into a navigable page:
   a sticky sidebar table of contents (scroll-spy) beside clean prose. A slim
   bar above carries the contents toggle (mobile) and PDF fallbacks. */
.hb-bar {
  position: sticky; top: 0; z-index: 30;
  background: var(--navy); color: #fff;
}
.hb-bar .wrap {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 12px; height: 46px;
}
@media (max-width: 820px) {
  /* The bar carries a title and four controls that need 430px of row; at
     390px they were spilling out of a 42px fixed-height bar and over the nav.
     The title goes (the page heading right above says the same thing) and the
     controls are tightened so the sticky bar stays one shallow row. The
     sticky offset also has to match the shorter mobile header. */
  .hb-bar .wrap {
    flex-wrap: wrap; height: auto; row-gap: 7px; gap: 7px;
    padding-top: 8px; padding-bottom: 8px; justify-content: flex-start;
  }
  .hb-bar-label { display: none; }
  .hb-bar-links { gap: 7px; }
  .hb-bar-links a, .hb-toc-toggle { padding: 5px 9px; font-size: var(--fs--2); }
}
.hb-bar-label {
  font-family: var(--font-display); font-size: var(--fs-0); font-weight: var(--fw-med);
}
.hb-bar-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hb-bar-links a, .hb-toc-toggle {
  font-family: var(--font-body); font-size: var(--fs--1); font-weight: var(--fw-med);
  letter-spacing: .03em; color: #fff; padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.28); background: none; cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease);
}
.hb-bar-links a:hover, .hb-toc-toggle:hover { background: var(--blue); border-color: var(--blue); text-decoration: none; }
.hb-toc-toggle { display: none; }          /* only shown on narrow screens */

.hb-wrap { padding: 40px var(--gutter) var(--band); max-width: 1276px; }
.hb-layout { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 56px; align-items: start; }

/* Sidebar contents: sticky, independently scrollable, scroll-spy highlight */
.hb-toc {
  position: sticky; top: 70px; align-self: start;
  max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain;
  padding-right: 10px;
}
.hb-toc .toc-list, .hb-toc .toc-sub { list-style: none; margin: 0; padding: 0; }
.hb-toc .toc-list { border-left: 1px solid var(--line); }
.hb-toc a {
  display: block; padding: 5px 0 5px 16px; margin-left: -1px;
  border-left: 2px solid transparent; color: var(--muted);
  font-size: var(--fs--1); line-height: 1.4; transition: color .18s var(--ease), border-color .18s var(--ease);
}
.hb-toc a:hover { color: var(--navy); text-decoration: none; }
.hb-toc a.active { color: var(--blue); border-left-color: var(--blue); }

/* Top-section row: caret + link. Children (toc-sub) collapse until the section
   is expanded (by caret click or scroll-spy on the active section). */
.hb-toc .toc-sec-head { display: flex; align-items: flex-start; }
.hb-toc .toc-l1 { flex: 1; color: var(--navy); font-weight: var(--fw-med); margin-top: 4px; padding-left: 6px; }
.hb-toc .toc-caret {
  flex: 0 0 auto; width: 18px; height: 26px; margin-top: 4px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--muted);
  position: relative;
}
.hb-toc .toc-caret::before {
  content: ""; position: absolute; left: 5px; top: 10px;
  border-left: 4px solid currentColor; border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  transition: transform .18s var(--ease); transform-origin: 2px 3px;
}
.hb-toc .toc-caret[aria-expanded="true"]::before { transform: rotate(90deg); }
.hb-toc .toc-caret-none { flex: 0 0 auto; width: 18px; }
.hb-toc .toc-sub { display: none; }
.hb-toc .toc-sec.open > .toc-sub { display: block; }
.hb-toc .toc-l2 { padding-left: 30px; }

/* Content column: clean, readable prose */
.hb-content { max-width: 880px; font-size: var(--fs-1); color: var(--ink); }

/* Collapsible top sections. Each doc H1 section folds via <details>; the H2
   sits in the summary with a caret, and the section divider is the details
   border so it does not double up with the heading's own rule. */
.hb-sec { border-top: 2px solid var(--navy); }
.hb-sec:first-of-type { border-top: 0; }
.hb-sec-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 18px 0 2px;
}
.hb-sec-summary::-webkit-details-marker { display: none; }
.hb-sec-summary h2 {
  border-top: 0; margin: 0; padding-top: 0; flex: 1;
  font-family: var(--font-display); font-size: var(--fs-4); font-weight: var(--fw-med);
  color: var(--navy); letter-spacing: var(--tr-snug); line-height: 1.2;
  scroll-margin-top: 70px;
}
.hb-sec-summary::after {
  content: ""; flex: 0 0 auto; margin-top: 4px;
  border-left: 6px solid var(--muted); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .2s var(--ease);
}
.hb-sec[open] > .hb-sec-summary::after { transform: rotate(90deg); }
.hb-sec-summary:hover h2 { color: var(--blue); }
.hb-sec-body { padding: 6px 0 26px; }

.hb-content h2 {
  font-family: var(--font-display); font-size: var(--fs-4); font-weight: var(--fw-med);
  color: var(--navy); letter-spacing: var(--tr-snug); line-height: 1.2;
  margin: 46px 0 14px; padding-top: 16px; border-top: 2px solid var(--navy);
  scroll-margin-top: 70px;
}
.hb-content > h2:first-child { margin-top: 0; }
/* The section heading lives inside <summary>, where the divider is already
   drawn by .hb-sec's own border-top. Without this the rule above repaints it
   and every section break shows two navy lines. */
.hb-content .hb-sec-summary h2 { border-top: 0; padding-top: 0; margin-top: 0; }
/* Heading ladder. h3 and h4 were 24px and 20px of the same display face in
   near-identical colours, so a sub-heading read as a peer of its parent. Each
   level now differs on three axes at once (rule, typeface, size) rather than
   on size alone: h2 sits on a 2px navy rule, h3 on a hairline in the display
   face, h4 is the body face at body size, h5 is smaller and grey. Longest h4
   in the handbook runs to 80 characters, so no all-caps treatment here. */
.hb-content h3 {
  font-family: var(--font-display); font-size: var(--fs-3); font-weight: var(--fw-med);
  color: var(--navy); letter-spacing: var(--tr-snug);
  margin: 48px 0 12px; padding-top: 15px; border-top: 1px solid var(--line);
  scroll-margin-top: 70px;
}
.hb-content h4 {
  font-family: var(--font-body); font-size: var(--fs-2); font-weight: var(--fw-semi);
  color: var(--navy); letter-spacing: 0; line-height: 1.4;
  margin: 44px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
  scroll-margin-top: 70px;
}
/* h5 was small grey caps and disappeared into the text around it (Emma, Oct
   2026). It is now navy body-size text on a blue left bar. */
.hb-content h5, .hb-content h6 {
  font-family: var(--font-body); font-size: var(--fs-1); font-weight: var(--fw-semi);
  letter-spacing: 0; color: var(--navy); line-height: 1.4;
  margin: 30px 0 8px; padding-left: 11px; border-left: 3px solid var(--blue);
  scroll-margin-top: 70px;
}
/* A heading straight after its parent should not carry the full gap */
.hb-content h2 + h3, .hb-content h3 + h4, .hb-content h4 + h5 { margin-top: 18px; }
.hb-content h2 + h3 { padding-top: 0; border-top: 0; }
.hb-content p { margin: 0 0 16px; line-height: 1.7; color: var(--muted); }
.hb-content p.hb-runin { margin-top: 24px; }   /* "For each receipt:" style steps, set by sync_handbook.py */
/* Links: always underlined (no hover toggle that repaints), and lifted above
   any highlight-span background so the whole run is one stable click target,
   which stops the cursor flickering on hover. */
.hb-content a {
  color: var(--blue); overflow-wrap: break-word;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
  position: relative; z-index: 1;
}
.hb-content a:hover { color: var(--navy); }
/* A highlighted run that IS a link should not paint its background over the
   link's hit area unevenly. */
.hb-content [class*="hb-hl-"] > a { background: transparent; }
/* Pull quotes and their attribution, centered. */
.hb-content .hb-quote { text-align: center; }
.hb-content .hb-quote-cite { text-align: center; }
.hb-content strong { color: var(--ink); font-weight: 600; }
.hb-content ul, .hb-content ol { margin: 0 0 18px; padding-left: 22px; }
.hb-content li { margin: 0 0 7px; line-height: 1.65; color: var(--muted); }
.hb-content li > ul, .hb-content li > ol { margin: 8px 0 4px; }
/* Sub-bullets. The Google export does not nest its <ul>s: a sub-list is a
   sibling list and the depth is carried in the item's margin-left, so
   sync_handbook.py reads that and tags the item with its level. Without these
   every sub-point sat at the same indent as its parent and read as a peer. */
.hb-content li.hb-lvl-1 { margin-left: 26px; }
.hb-content li.hb-lvl-2 { margin-left: 52px; }
.hb-content li.hb-lvl-3 { margin-left: 78px; }
.hb-content li.hb-lvl-4 { margin-left: 104px; }
.hb-content li.hb-lvl-1::marker { content: "\25E6  "; }   /* hollow bullet */
.hb-content li.hb-lvl-2::marker,
.hb-content li.hb-lvl-3::marker,
.hb-content li.hb-lvl-4::marker { content: "\25AA  "; }   /* small square */
@media (max-width: 640px) {
  .hb-content li.hb-lvl-1 { margin-left: 14px; }
  .hb-content li.hb-lvl-2 { margin-left: 28px; }
  .hb-content li.hb-lvl-3 { margin-left: 42px; }
  .hb-content li.hb-lvl-4 { margin-left: 56px; }
}
.hb-figure { margin: 22px 0; }
.hb-content img { max-width: 100%; height: auto; }   /* also caps images inline in paragraphs */
.hb-table { overflow-x: auto; margin: 0 0 22px; }
.hb-table table { border-collapse: collapse; width: 100%; font-size: var(--fs-0); }
.hb-table td, .hb-table th {
  border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top;
  color: var(--muted);
}
.hb-table th { background: var(--bg-soft); color: var(--ink); font-weight: 600; }


/* Footnotes. The definitions used to sit in a Notes list at the foot of the
   page, so reading one meant losing your place. sync_handbook.py now inlines
   the text into the marker and this shows it on hover. tabindex + :focus-within
   means keyboard and touch get it too, not just a mouse, and the print rule
   puts the text back in the flow so a printed handbook still carries it. */
.hb-content .hb-fn { position: relative; display: inline; cursor: help; }
.hb-content .hb-fn-mark {
  color: var(--blue); font-weight: var(--fw-semi); font-size: .72em;
  padding: 0 1px 0 2px; vertical-align: super; line-height: 0;
  border-bottom: 1px dotted var(--blue);
}
.hb-content .hb-fn:hover .hb-fn-mark,
.hb-content .hb-fn:focus-visible .hb-fn-mark { color: var(--navy); }
.hb-content .hb-fn-pop {
  position: absolute; z-index: 30; left: 50%; transform: translateX(-50%);
  top: calc(100% + 9px); width: max-content; max-width: min(380px, 78vw);
  background: var(--navy-900); color: #dbe5f2; text-align: left;
  font-size: var(--fs--1); font-weight: var(--fw-book); line-height: 1.6;
  padding: 13px 16px; box-shadow: 0 10px 30px rgba(8, 15, 33, .3);
  opacity: 0; visibility: hidden; transition: opacity .14s var(--ease);
}
.hb-content .hb-fn:hover .hb-fn-pop,
.hb-content .hb-fn:focus .hb-fn-pop,
.hb-content .hb-fn:focus-within .hb-fn-pop { opacity: 1; visibility: visible; }
.hb-content .hb-fn-pop .hb-fn-num {
  display: inline-block; margin-right: 8px; color: var(--blue-light);
  font-weight: var(--fw-semi);
}
.hb-content .hb-fn-pop a { color: var(--blue-light); }
.hb-content .hb-fn-pop a:hover { color: #fff; }
.hb-content .hb-fn-pop span { color: inherit; }   /* doc colours would vanish on navy */
@media (max-width: 640px) {
  /* Centred on a narrow screen a popup anchored to the marker falls off the
     edge, so pin it to the viewport instead. */
  .hb-content .hb-fn-pop {
    position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto;
    transform: none; width: auto; max-width: none;
  }
}
@media print {
  .hb-content .hb-fn-pop {
    position: static; opacity: 1; visibility: visible; display: block;
    background: none; color: #000; box-shadow: none; padding: 4px 0 4px 14px;
    max-width: none; width: auto; transform: none; font-style: italic;
  }
}
.hb-content sup { font-size: .72em; line-height: 0; }
.hb-content sup a { font-weight: var(--fw-med); }

/* Inline formatting carried over from the doc, collapsed to a consistent set of
   site-aligned buckets (see color_bucket / hl_bucket in sync_handbook.py). */
.hb-content .hb-b { font-weight: 600; color: var(--ink); }
.hb-content .hb-i { font-style: italic; }
.hb-content .hb-u { text-decoration: underline; text-underline-offset: 2px; }
.hb-content .hb-c-red   { color: #c0392b; }
.hb-content .hb-c-blue  { color: var(--blue); }
.hb-content .hb-c-green { color: #1e7a52; }
.hb-content .hb-c-amber { color: #b26a00; }
.hb-content .hb-c-ink   { color: var(--ink); }
.hb-content .hb-c-muted { color: var(--muted); }
.hb-content .hb-hl-yellow { background: #fff3bf; padding: .05em .18em; border-radius: 2px; }
.hb-content .hb-hl-blue   { background: #e2edfb; padding: .05em .18em; border-radius: 2px; }
.hb-content .hb-hl-green  { background: #e4f5ea; padding: .05em .18em; border-radius: 2px; }
.hb-content .hb-hl-grey   { background: var(--bg-soft); padding: .05em .18em; border-radius: 2px; }
/* a bolded coloured run keeps its colour, not the default ink of .hb-b */
.hb-content .hb-b.hb-c-red { color: #c0392b; }
.hb-content .hb-b.hb-c-blue { color: var(--blue); }
.hb-content .hb-b.hb-c-green { color: #1e7a52; }
.hb-content .hb-b.hb-c-amber { color: #b26a00; }


@media (max-width: 900px) {
  .hb-toc-toggle { display: inline-block; }
  /* minmax(0,...), not 1fr: a plain 1fr cannot shrink below the widest
     item's min-content, which pushed the whole page 115px wider than the
     phone viewport and let the handbook scroll sideways. */
  .hb-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Phones: the contents are a drawer that slides in over the page from
     wherever the reader is. It used to open in the page flow at the very top,
     so from the middle of the handbook "Contents" seemed to do nothing until
     you scrolled all the way back up. A floating button (made by site.js)
     opens it with a thumb; tapping a section, Close, the dimmed page or
     Escape shuts it. ".hb-layout >" outranks portal.css, which sets a sticky
     top on .hb-toc that would otherwise push the drawer down. */
  .hb-layout > .hb-toc {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000;
    align-self: stretch;                   /* "start" from the sidebar shrank it to its content */
    width: min(86vw, 340px); max-height: none; margin: 0;
    padding: 0 16px 40px; background: #fff;
    overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 0 28px rgba(9, 14, 30, .2);
    transform: translateX(-105%); visibility: hidden;
    transition: transform .2s var(--ease), visibility 0s linear .2s;
  }
  body.hb-toc-open .hb-layout > .hb-toc {
    transform: none; visibility: visible; transition: transform .2s var(--ease);
  }
  body.hb-toc-open { overflow: hidden; }   /* the page behind stays put */
  body.hb-toc-open::after {
    content: ""; position: fixed; inset: 0; z-index: 999; background: rgba(9, 14, 30, .38);
  }
  .hb-toc .hb-toc-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1; background: #fff;
    margin: 0 0 8px; padding: 16px 0 12px; border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-size: var(--fs-1); color: var(--navy);
  }
  .hb-toc-close {
    padding: 6px 12px; background: none; border: 1px solid var(--line); cursor: pointer;
    font-family: var(--font-body); font-size: var(--fs--1); color: var(--navy);
  }
  /* bigger tap targets than the desktop sidebar */
  .hb-toc a { padding-top: 9px; padding-bottom: 9px; }
  .hb-toc .toc-caret { width: 32px; height: 38px; margin-top: 0; }
  .hb-toc .toc-caret::before { left: 12px; top: 16px; }
  .hb-toc .toc-l1 { margin-top: 0; }
  body .hb-toc-fab {                      /* "body" outranks the hide-everywhere rule below */
    display: block; position: fixed; right: 16px; bottom: 16px; z-index: 900;
    padding: 12px 18px; border: 0; cursor: pointer;
    background: var(--navy); color: #fff; box-shadow: 0 4px 16px rgba(9, 14, 30, .28);
    font-family: var(--font-body); font-size: var(--fs--1); font-weight: var(--fw-semi);
    letter-spacing: .03em;
  }
  body.hb-toc-open .hb-toc-fab { display: none; }
}
/* the drawer's header and the floating button exist only on phones */
.hb-toc-head, .hb-toc-fab { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hb-layout > .hb-toc { transition: none !important; }
}
/* Feature cards carry more content, so give them room to breathe */

/* Tables from the doc (BME 406 additions). The first row is the doc's header
   row, and a row that is one merged cell (the schedule's "Week 1: ..." rows)
   is a section row. */
.hb-table table { font-size: var(--fs--1); }
.hb-table td, .hb-table th { padding: 8px 10px; line-height: 1.5; }
.hb-table tr:first-child td { background: var(--bg-soft); color: var(--ink); font-weight: 700; }
.hb-table tr.hb-row-span td { background: #e9effb; color: var(--navy); font-weight: 700; border-top: 2px solid var(--navy); }
.hb-table tr.hb-row-span td .hb-b { color: var(--navy); }
@media (max-width: 640px) { .hb-table table { min-width: 640px; } }   /* phones scroll the table sideways instead of crushing it */