:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1b2733;
  --muted: #5d6b7a;
  --line: #dde3ea;
  --accent: #00567d;      /* First Aid teal-blue */
  --accent-soft: #e6f0f6;
  --label: #0b7285;
  --mark: #ffe9a8;
  --shadow: 0 1px 3px rgba(16,32,48,.10), 0 8px 24px rgba(16,32,48,.06);
  --head-h: 56px;
  --foot-h: 46px;
}
html[data-theme="dark"] {
  --bg: #11161c;
  --panel: #171e26;
  --ink: #e6edf5;
  --muted: #93a4b6;
  --line: #26313d;
  --accent: #4bb3e0;
  --accent-soft: #16303e;
  --label: #58c3d6;
  --mark: #5b4a12;
  --shadow: 0 1px 3px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
/* An explicit `display` on an element beats the UA rule for [hidden], so the
   attribute would otherwise fail to hide anything styled below. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 18px; color: var(--muted); z-index: 100;
  background: var(--bg);
}
.spinner {
  width: 34px; height: 34px; border: 3px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- top bar ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--head-h);
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow); z-index: 40;
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand strong { color: var(--accent); letter-spacing: .2px; }
.brand span { font-size: 11px; color: var(--muted); }

button.icon {
  border: 1px solid transparent; background: none; color: var(--ink);
  font-size: 18px; width: 36px; height: 36px; border-radius: 8px;
  cursor: pointer; flex: none;
}
button.icon:hover { background: var(--accent-soft); }
button.icon.active { color: #d9a300; }

.searchwrap { position: relative; flex: 1; max-width: 640px; margin: 0 auto; }
#search {
  width: 100%; height: 38px; padding: 0 14px; border-radius: 19px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: 15px; outline: none;
}
#search:focus { border-color: var(--accent); background: var(--panel); }

#results {
  position: absolute; top: 44px; left: 0; right: 0; max-height: 65vh;
  overflow-y: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); z-index: 50;
}
.hit { padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.hit:last-child { border-bottom: 0; }
.hit:hover, .hit.sel { background: var(--accent-soft); }
/* A figure-lettering hit can be a whole paragraph of run-on words; two lines of
   it is enough to recognise, and keeps every row the same shape. */
.hit b { color: var(--accent); font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.hit .sub { font-size: 12.5px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.hit .pg { float: right; font-size: 11px; color: var(--muted); }
.nohit { padding: 14px; color: var(--muted); }

.viewtoggle { display: flex; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; flex: none; }
.viewtoggle button {
  border: 0; background: var(--panel); color: var(--muted);
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.viewtoggle button.on { background: var(--accent); color: #fff; }

/* ---------- sidebar ---------- */
#sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; width: 320px; z-index: 60;
  background: var(--panel); border-right: 1px solid var(--line);
  overflow-y: auto; transform: translateX(-100%); transition: transform .18s ease;
}
#sidebar.open { transform: none; }
.side-head { position: sticky; top: 0; background: var(--panel);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line); }
.side-head h2 { margin: 0; font-size: 15px; letter-spacing: .3px; }
#toc { padding: 8px 0 30px; }
.ch { display: flex; justify-content: space-between; gap: 8px;
  padding: 9px 16px; cursor: pointer; font-size: 14.5px; }
.ch:hover { background: var(--accent-soft); }
.ch.lvl1 { font-weight: 600; }
.ch.lvl0 { color: var(--muted); font-size: 13.5px; }
.ch small { color: var(--muted); font-weight: 400; }
.sec { padding: 6px 16px 6px 30px; font-size: 13px; color: var(--muted);
  cursor: pointer; }
.sec:hover { background: var(--accent-soft); color: var(--ink); }
/* Where you actually are, so the contents is a map and not just a list. */
.ch.here, .sec.here {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.ch.here small { color: var(--accent); }
#marks { padding: 6px 0; border-bottom: 1px solid var(--line); }
#marks .ch { font-size: 13.5px; }
#marks h3 { margin: 10px 16px 4px; font-size: 11px; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted); }
#scrim { position: fixed; inset: 0; background: rgba(8,14,20,.45); z-index: 50; }

/* ---------- reading area ---------- */
#main { padding: calc(var(--head-h) + 18px) 20px calc(var(--foot-h) + 28px); }
/* Wide enough that a four-column table is not squeezed into a third of a
   1500px screen, still short enough that a line of prose stays readable. */
.view { max-width: 1080px; margin: 0 auto; }
#pageview { max-width: 900px; }

#pageview { text-align: center; }
#pageimg { max-width: 100%; height: auto; border-radius: 6px;
  box-shadow: var(--shadow); background: #fff; }

/* One sheet, the way the book is one page. Giving every entry its own panel,
   border and shadow turned a page of eight short entries into a stack of eight
   boxes, and the boxes said nothing the whitespace was not already saying. */
#textview {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 26px 34px 30px;
}
.entry { padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.entry:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
/* A band already separates what follows it; a rule above as well is a fence
   next to a wall. */
.entry:has(+ h2.sectionband) { border-bottom: 0; }

h3.standalone {
  margin: 20px 0 6px; font-size: 17px; color: var(--accent); line-height: 1.3;
}
.entry > h3 {
  margin: 0 0 8px; font-size: 17px; color: var(--accent); line-height: 1.3;
}
.entry p { margin: 0 0 7px; }
.entry p:last-child { margin-bottom: 0; }

/* the book's description column with its notes/mnemonics column alongside */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; }
.cols.single { grid-template-columns: 1fr; }
.col.notes { color: var(--muted); }
.col.notes strong, .col.notes b { color: var(--ink); }

h2.sectionband {
  margin: 26px 0 16px; padding: 7px 16px; border-radius: 6px;
  background: var(--accent); color: #fff; font-size: 13px;
  letter-spacing: 1.1px; text-transform: uppercase; font-weight: 700;
}
h2.sectionband:first-child { margin-top: 0; }
.entry .lbl {
  font-size: 11px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--label); font-weight: 600; margin: 10px 0 3px;
}
.entry figure { margin: 12px 0 4px; text-align: center; }
.entry figure img {
  max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; cursor: zoom-in;
}
/* An entry's panels, laid out the way the book lays them out: along a row,
   wrapping when the row runs out. Centred, because a part-full last row hanging
   off the left edge reads as a mistake. */
.plate {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: center; gap: 14px;
}
/* Each panel is set to the share of the measure it occupied in print, so a row
   of small drawings stays a row of small drawings. min-width lets a flex item
   shrink below its content when the row has to wrap on a narrow screen. */
.plate figure { margin: 12px 0 4px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.plate figure img { width: 100%; }
/* The artwork is printed on white and has to stay that way to stay legible, but
   a full-brightness white slab on a dark page glares. Take the top off it, and
   give it back the moment the reader actually looks at the picture. */
html[data-theme="dark"] .entry figure img,
html[data-theme="dark"] table.fa td.cellpic img,
html[data-theme="dark"] #pageimg {
  filter: brightness(.88) contrast(1.02);
  transition: filter .18s ease;
}
html[data-theme="dark"] .entry figure img:hover,
html[data-theme="dark"] table.fa td.cellpic img:hover,
html[data-theme="dark"] #pageimg:hover { filter: none; }

/* The lettering printed on a diagram. Present for search and for screen
   readers, hidden from anyone who can just look at the picture — clipped to a
   pixel rather than display:none, which would take it out of the accessibility
   tree and out of reach of the browser's own find-on-page. */
.labels {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Unless the search matched inside it, in which case show the match. */
.labels.shown {
  position: static; width: auto; height: auto; overflow: visible;
  clip-path: none; white-space: normal;
  margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--muted); text-align: left;
}
.labels.shown .tag {
  display: inline-block; margin-right: 7px; padding: 1px 7px;
  border-radius: 10px; background: var(--accent-soft); color: var(--label);
  font-size: 10px; letter-spacing: .7px; text-transform: uppercase;
  font-weight: 600; vertical-align: 1px;
}

table.fa {
  width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14.5px;
  display: block; overflow-x: auto;
}
table.fa th {
  text-align: left; font-size: 10.5px; letter-spacing: .7px;
  text-transform: uppercase; color: var(--label);
  border-bottom: 1.5px solid var(--line); padding: 6px 10px; white-space: nowrap;
}
table.fa td {
  vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line);
}
table.fa tr:nth-child(even) td { background: var(--accent-soft); }
/* A row that names the group below it rather than carrying data. Striping it
   like a data row makes it read as an entry whose values went missing. */
table.fa tr.group td, table.fa tr.group:nth-child(even) td {
  background: none; border-bottom: 0; padding-top: 14px; padding-bottom: 2px;
}
table.fa tr.group td:first-child {
  color: var(--ink); font-weight: 700; font-size: 13px;
  letter-spacing: .3px;
}
/* The row's name. Left to fend for itself it is the column the browser starves,
   so "Standing, Valsalva (strain phase)" stacks four words deep beside three
   columns with slack to spare. */
table.fa td:first-child, table.fa th:first-child {
  font-weight: 600; color: var(--accent); min-width: 9.5rem;
}
table.fa th:first-child { color: var(--label); font-weight: 700; }
/* A column of drawings rather than words - the hip movements, the gait
   patterns. The picture is the cell's content, so let it fill the cell. */
/* Held to a column of its own rather than left to take whatever width is going.
   Given a roomy column these drawings blow up to a 230px-tall row apiece and
   the table becomes a stack of posters with a line of text stranded by each. */
table.fa td.cellpic { padding: 4px; width: 220px; }
table.fa td.cellpic img {
  display: block; margin: 0 auto; max-width: 100%; max-height: 150px;
  height: auto; cursor: zoom-in; border-radius: 4px;
}

mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }

/* The sheet's running head, set the way the book sets its own. */
.pagehead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 0 0 20px; padding-bottom: 10px;
  border-bottom: 2px solid var(--accent-soft);
  color: var(--muted); font-size: 12px; letter-spacing: .6px;
  text-transform: uppercase;
}
.pagehead .chap { color: var(--accent); font-weight: 700; }

/* ---------- footer ---------- */
#pager {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--foot-h);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--panel); border-top: 1px solid var(--line); z-index: 40;
}
#crumb { font-size: 13px; color: var(--muted); }
#jump { width: 78px; height: 30px; text-align: center; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); }

/* ---------- lightbox ---------- */
#lightbox {
  position: fixed; inset: 0; background: rgba(6,10,14,.9); z-index: 90;
  display: grid; place-items: center; cursor: zoom-out; padding: 24px;
}
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }

/* ---------- shortcuts ---------- */
#help {
  position: fixed; inset: 0; background: rgba(6,10,14,.55); z-index: 95;
  display: grid; place-items: center; padding: 24px;
}
#help .card {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); padding: 20px 26px;
  max-width: 360px; width: 100%;
}
#help h2 { margin: 0 0 12px; font-size: 15px; color: var(--accent); }
#help dl {
  display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0;
  align-items: baseline;
}
#help dt {
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 7px; text-align: center; white-space: nowrap;
}
#help dd { margin: 0; font-size: 13.5px; }
#help .hint { margin: 14px 0 0; font-size: 12px; color: var(--muted); }

/* A figure whose crop never rendered. Says so, rather than dumping the alt
   text - which here is every word printed on the diagram. */
.nofig {
  padding: 22px; border: 1px dashed var(--line); border-radius: 8px;
  color: var(--muted); font-size: 13px; text-align: center;
}

/* ---------- print ---------- */
@media print {
  #topbar, #sidebar, #scrim, #pager, #loader, #lightbox { display: none !important; }
  #main { padding: 0; }
  .view { max-width: none; }
  body { background: #fff; color: #000; }
  #textview { border: 0; box-shadow: none; padding: 0; background: none; }
  .entry { padding: 0 0 10px; margin-bottom: 10px; break-inside: avoid; }
  /* A table or a figure split across a page break is unreadable on paper. */
  table.fa, .entry figure { break-inside: avoid; }
  table.fa { display: table; }
  h2.sectionband { box-shadow: none; -webkit-print-color-adjust: exact;
                   print-color-adjust: exact; }
}

@media (max-width: 720px) {
  /* On a phone the sheet's margins are just lost reading width. */
  #textview { padding: 16px 14px 20px; border-radius: 10px; }
  .cols { grid-template-columns: 1fr; }
  .col.notes { border-top: 1px solid var(--line); padding-top: 8px; }
  .brand, .viewtoggle span { display: none; }
  #main { padding-left: 12px; padding-right: 12px; }
  #sidebar { width: 86vw; }
}