.qs{--ink:#1e293b;--line:#e2e8f0;--muted:#64748b;--panelbg:#fff;--zebra:#00000005;
  color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif}
.qs .sheet{background:var(--panelbg);border-radius:10px;padding:0 0 12px;margin:0 0 20px;
  border:1px solid var(--line);overflow:hidden}
.qs .sheet>h2{background:var(--sc);color:#fff;margin:0;padding:10px 16px;font-size:1rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.qs .sheet>h2 .staletag{font-size:.6rem;letter-spacing:.06em;background:#ffffff2e;
  padding:.15rem .45rem;border-radius:999px;margin-left:.5rem}
.qs .sheet>.sub{color:var(--muted);font-size:.82rem;padding:9px 16px 0}
.qs .cols{columns:2;column-gap:13px;padding:11px 16px 0}
@media(max-width:820px){.qs .cols{columns:1}}
.qs .panel{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0 0 11px;
  display:inline-block;width:100%;background:var(--panelbg)}
.qs .panel h3{background:var(--pc);color:#fff;margin:0;padding:6px 10px;font-size:.72rem;
  letter-spacing:.08em;font-weight:800;text-transform:uppercase}
.qs .panel table{width:100%;border-collapse:collapse;font-size:.79rem}
.qs .panel tr:nth-child(even) th,.qs .panel tr:nth-child(even) td{background:var(--zebra)}
.qs .panel th{text-align:right;vertical-align:top;padding:5px 7px 5px 10px;font-weight:700;
  color:var(--pc);width:37%;line-height:1.32}
.qs .panel td{padding:5px 10px 5px 7px;vertical-align:top;color:var(--ink);line-height:1.4}
.qs .panel ul{margin:0;padding:7px 12px 8px 25px;font-size:.79rem;line-height:1.45}
.qs .panel li{margin:.16rem 0}
/* the emphasis the quick-sheets run on: key words, term names, direction of change */
.qs .panel .hi{color:var(--pc);font-weight:700}
.qs .panel .up{color:#be123c;font-weight:700}
.qs .panel .dn{color:#0369a1;font-weight:700}
.qs .panel .eq{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.77rem;
  padding:6px 10px;line-height:1.45}
/* formula and its gloss are visually separate, so no separator character has to carry the
   distinction (a dash could not: it reads as a minus inside the formula) */
.qs .panel .eq .eqf{display:block;font-weight:700;color:var(--ink)}
.qs .panel .eq .eqg{display:block;font-family:inherit;font-size:.72rem;color:var(--muted);
  margin-top:2px}
.qs .panel .eq:nth-child(even){background:var(--zebra)}
/* side-by-side comparison, the "Diamagnetic vs Paramagnetic" box */
.qs .panel .cmp{display:flex;gap:1px;background:var(--line)}
.qs .panel .cmp .col{flex:1;background:var(--panelbg);padding:0 0 5px;min-width:0}
/* heads are equal height so a two-line head on one side does not push that column's rows
   out of line with the other's */
.qs .panel .cmp .ch{background:color-mix(in srgb,var(--pc) 13%,transparent);color:var(--pc);
  font-weight:800;font-size:.72rem;padding:4px 8px;text-align:center;min-height:2.9em;
  display:flex;align-items:center;justify-content:center;line-height:1.25}
.qs .panel .cmp .cp{font-size:.76rem;padding:4px 8px;line-height:1.35}
.qs .panel .cmp .cp+.cp{border-top:1px solid var(--line)}
/* a figure off the course's own slides. White plate behind it in both themes: these are
   lecture images with white backgrounds, and a dark panel would ring them with a grey box */
.qs .panel .figwrap{background:#fff;padding:6px 6px 4px;text-align:center}
.qs .panel .figwrap img{max-width:100%;max-height:250px;width:auto;display:inline-block}
.qs .panel .figwrap .cred{font-size:.62rem;color:#94a3b8;margin-top:3px;line-height:1.3}
/* lettered mnemonic, the "AHED" box */
.qs .panel .mn{display:flex;gap:7px;align-items:baseline;font-size:.79rem;padding:4px 10px;
  line-height:1.4}
.qs .panel .mn:nth-child(even){background:var(--zebra)}
.qs .panel .mn .ltr{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--pc);
  color:#fff;font-weight:800;font-size:.68rem;display:inline-flex;align-items:center;
  justify-content:center;align-self:center}
.qs .panel .note{padding:6px 10px 7px;font-size:.71rem;color:var(--muted);font-style:italic;
  border-top:1px solid var(--line)}
/* THE MUSCLE CHARTS. Riley, 2026-08-13: "take all the tables from the lectures and put them
   together on the end of the quicksheets". Five columns cannot live in a half-page column, so
   these span both. They do NOT scroll sideways - see the rule below, which is the one place in
   this app where a wide table wraps instead, because a quick sheet is printed and a column you
   have to swipe to reach does not exist on paper.

   `display:block` IS LOAD-BEARING AND IT LOOKS REDUNDANT. Every panel is `display:inline-block`
   (the old trick for not splitting one across a column break), and `column-span` applies only to
   BLOCK-LEVEL boxes - so the spanner was silently ignored while `getComputedStyle` cheerfully
   reported `column-span: all`. Measured at 1440px the chart panel was 576px inside a 1198px
   sheet: exactly one column, with the rule present, computed and inert. A computed value is not
   an applied one. */
.qs .panel.wide{display:block;column-span:all;-webkit-column-span:all;
  break-inside:auto;page-break-inside:auto}
/* IT WRAPS. IT DOES NOT SCROLL. Riley, 2026-08-14, on the downloaded sheet: "make the text wrap
   not scroll."
   `min-width:640px` plus `overflow-x:auto` meant the Insertion and Action columns ran off the
   right edge of the panel - the heading read "INSERTION (LATERAL ATTA" and the whole Action
   column was invisible. Worse, the ROW still sized itself to the hidden text, so Trapezius left
   an inch of blank paper under it: the tallest cell was the one nobody could see.
   `table-layout:fixed` with stated column widths is what makes five columns share the width
   instead of competing for it, and it is the only way the long cells wrap rather than push. */
.qs .panel table.chart{font-size:.72rem;width:100%;table-layout:fixed}
.qs .panel table.chart th{background:color-mix(in srgb,var(--pc) 12%,transparent);color:var(--pc);
  text-align:left;padding:5px 7px;font-size:.66rem;text-transform:uppercase;
  letter-spacing:.03em;white-space:normal;overflow-wrap:break-word}
.qs .panel table.chart td{padding:5px 7px;line-height:1.35;border-top:1px solid var(--line);
  white-space:normal;overflow-wrap:break-word;vertical-align:top}
.qs .panel table.chart td:first-child{font-weight:700;color:var(--pc)}
/* The muscle name is short and the two attachment columns carry the long prose, so the space
   goes where the words are.
   ONLY WHERE THERE ARE COLUMNS. These are keyed on `nth-child`, which outranks the plain
   `width:auto` the stacking rule below sets - so left unscoped they held every cell at 14% of
   the phone's width while it was stacked, and every value wrapped one word per line. A column
   width is a statement about a table that HAS columns. */
@media(min-width:701px){
.qs .panel table.chart th:nth-child(1),.qs .panel table.chart td:nth-child(1){width:14%}
.qs .panel table.chart th:nth-child(2),.qs .panel table.chart td:nth-child(2){width:25%}
.qs .panel table.chart th:nth-child(3),.qs .panel table.chart td:nth-child(3){width:25%}
.qs .panel table.chart th:nth-child(4),.qs .panel table.chart td:nth-child(4){width:15%}
.qs .panel table.chart th:nth-child(5),.qs .panel table.chart td:nth-child(5){width:21%}
}
/* ON A PHONE IT STACKS. Wrapping is not enough on its own: five columns across 390px gives the
   Innervation column about 58px, and at that width "wrap" means breaking words down the middle -
   the first version rendered the heading as "INNE / RVATI / ON" and Trapezius as "Trap / ezius",
   which is not a table anyone can read under time. So below 700px each muscle becomes one block
   with its name as the heading and the four facts labelled underneath, which is the same
   information in the order Riley asked for and in full words. `data-h` on the cell is where the
   label comes from - CSS `content` cannot reach the heading row. */
@media(max-width:700px){
  .qs .panel table.chart,.qs .panel table.chart tbody,.qs .panel table.chart tr,
  .qs .panel table.chart td{display:block;width:auto}
  .qs .panel table.chart{table-layout:auto}
  .qs .panel table.chart thead{display:none}
  .qs .panel table.chart tr{border-top:1px solid var(--line);padding:5px 0 7px}
  .qs .panel table.chart tr:first-child{border-top:0}
  .qs .panel table.chart td{border-top:0;padding:2px 10px 2px 10px}
  .qs .panel table.chart td:empty{display:none}
  .qs .panel table.chart td::before{content:attr(data-h);display:block;
    font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
    font-weight:700;margin-top:3px}
  /* The muscle name is the block's heading, so it keeps the panel colour and loses the label. */
  .qs .panel table.chart td:first-child{font-size:.82rem;padding-top:4px}
  .qs .panel table.chart td:first-child::before{display:none}
}