/* MuscleMap — the static, crawlable pages under /exercises and /muscles.
 *
 * Deliberately separate from styles.css: that sheet dresses an app shell
 * (tab bars, modals, timers) and none of it applies here. This is a reading
 * layout, small enough to be read in one sitting, and it carries the brand
 * so the two halves of the site do not look like different products. */

:root {
  --bg: #08090d;
  --surface: #11141c;
  --line: rgba(255, 255, 255, .08);
  --text: #f2f5fa;
  --text-dim: #9aa5ba;
  --text-faint: #7b8699;   /* >=4.5:1 on --bg and --surface */
  --accent: #ff4d2e;
  --accent-ink: #ff8a72;
  --good: #45c88a;
  --bad: #ff6b6b;
  --maxw: 760px;      /* the reading measure */
  --wide: 1120px;     /* pages that open with a figure beside the copy */
  --radius: 14px;
}

/* Light is applied in two situations: the operating system asks for it and
   the reader has not overridden it, or the reader picked it. Both set the
   same tokens, and the explicit choice wins because [data-theme] is stamped
   on the same element and comes later. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f8fb;
    --surface: #ffffff;
    --line: rgba(16, 23, 37, .10);
    --text: #10131a;
    --text-dim: #3f4a5c;
    --text-faint: #5c6779; /* >=4.5:1 on the light ground */
    --accent: #d8371a;
    --accent-ink: #b32d13;
    --good: #12855a;
    --bad: #c8352f;
  }
}
:root[data-theme="light"] {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --line: rgba(16, 23, 37, .10);
  --text: #10131a;
  --text-dim: #3f4a5c;
  --text-faint: #5c6779;
  --accent: #d8371a;
  --accent-ink: #b32d13;
  --good: #12855a;
  --bad: #c8352f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); }
a:hover { color: var(--accent); }

/* ------------------------------------------------------------- chrome -- */
/* Sticky, so the way back to the library and into the app is always one
   tap away on a long exercise page. */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-head { background: var(--bg); }
}
header.site {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: var(--wide); margin: 0 auto; padding: 18px 24px;
}

/* Reading progress. Transform-scaled rather than width-animated so it never
   triggers layout while scrolling. */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* Keyboard users land here first; it is off-screen until focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 80;
  background: var(--accent); color: #fff; padding: 10px 16px;
  border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

.icon-btn {
  flex: none; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }

/* Filters a list that is already fully in the HTML — hidden until the
   script that powers it has actually loaded. */
.lib-search { display: flex; gap: 8px; margin: 0 0 18px; }
.lib-search input {
  flex: 1; min-width: 0; padding: 11px 14px; font: inherit; font-size: .95rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text);
}
.lib-search input::placeholder { color: var(--text-faint); }
.lib-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

#to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: #fff; border: 0; font-size: 1.1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#to-top.is-on { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #to-top { transition: none; }
}
header.site .brand {
  font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em;
  color: var(--text); text-decoration: none;
}
header.site .brand em { color: var(--accent); font-style: normal; }
/* Scrolls rather than wraps at every width. A wrapped nav costs a whole
   row of screen; at 1280 everything fits and this never engages, and at 768
   it is the difference between a 122px header and an 84px one. The strip
   owns the sideways scroll -- the page body never does. */
header.site nav {
  margin-left: auto; display: flex; gap: 18px; align-items: center;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
header.site nav::-webkit-scrollbar { display: none; }
header.site nav a { white-space: nowrap; flex: none; }
/* The toggle and the CTA are siblings of the nav, not children of it, so
   neither scrolls away with the strip. See tools/build-static.js. */
header.site .brand { margin-right: auto; }
header.site nav a { color: var(--text-dim); text-decoration: none; font-size: .88rem; font-weight: 600; }
header.site nav a:hover { color: var(--text); }
/* Scoped to the header rather than to the nav: the CTA is a sibling of the
   nav now, not a child, so a `nav a.cta` selector silently stops matching
   and it renders as a bare underlined link. */
header.site .cta {
  background: var(--accent); color: #fff; padding: 7px 14px;
  border-radius: 9px; font-weight: 700; text-decoration: none;
  font-size: .88rem; white-space: nowrap; flex: none;
}
header.site .cta:hover { color: #fff; opacity: .92; }

/* Above phone width the brand and the nav share one line, and the nav
   shrinks and scrolls rather than dropping to a line of its own -- at 768
   that wrap was costing 38px of every screen. Below 561px the phone rule
   further down deliberately does give it its own row, and needs the wrap
   to do it, so this starts where that stops. */
@media (min-width: 561px) {
  header.site { flex-wrap: nowrap; }
  header.site nav { min-width: 0; }
}

main { max-width: var(--maxw); margin: 0 auto; padding: 8px 20px 60px; }

/* A page that opens with the chart beside its copy. The opening block gets
   the full width; everything under it stays at the reading measure, because
   a 1120px line of prose is not a line anybody reads. */
main.page { max-width: var(--wide); padding-left: 24px; padding-right: 24px; }
/* The prose is capped; the card grids are not. Capping the article instead
   left a third of a 1280px screen empty from the fold down, which is where
   the related exercises should be. */
main.page > article > h2,
main.page > article > h3,
main.page > article > p,
main.page > article > dl,
main.page > article > .steps,
main.page > article > .cues,
main.page > article > .misses,
main.page > article > .pills,
main.page > article > form,
main.page > article > ol,
main.page > article > ul { max-width: var(--maxw); }
main.page > article > .tiles { max-width: none; }
main.page > article > .cta-box { max-width: 900px; }
main.page > .share-row { max-width: var(--maxw); }

footer.site {
  max-width: var(--wide); margin: 0 auto; padding: 30px 24px 60px;
  border-top: 1px solid var(--line); color: var(--text-faint); font-size: .9rem;
}
footer.site p { margin: 0 0 8px; }
footer.site .small { font-size: .8rem; }

/* ---------------------------------------------------------- breadcrumb -- */
.crumbs { margin: 22px 0 6px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li { font-size: .8rem; color: var(--text-faint); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--text-faint); }
.crumbs a { color: var(--text-faint); text-decoration: none; }
.crumbs a:hover { color: var(--text); }

/* ------------------------------------------------------------ content -- */
h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);
  line-height: 1.05; letter-spacing: -.035em; font-weight: 800;
  margin: 10px 0 12px; text-wrap: balance;
}
/* Section heads carry a short rule, so a long page reads as chapters
   rather than as one column of undifferentiated text. */
h2 {
  font-size: 1.32rem; letter-spacing: -.02em; font-weight: 750;
  margin: 46px 0 14px; padding-top: 18px; border-top: 1px solid var(--line);
}
h2:first-child, .cta-box h2 { border-top: 0; padding-top: 0; }
h3 {
  font-size: .74rem; margin: 28px 0 10px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 800;
}
h2 a { text-decoration: none; }
/* A group label that is also a way into that group. It should read as the
   label it is, not as a line of orange underlined text. */
h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
h3 a:hover { color: var(--text); border-bottom-color: var(--accent); }
/* A section heading that belongs to one muscle, in that muscle's colour —
   the same one it has on the chart above and on its own page. */
h2.tinted { border-top-color: var(--mc, var(--line)); }
h2.tinted a { color: var(--text); }
h2.tinted a:hover { color: var(--mc, var(--accent)); }
h2.tinted::after {
  content: ""; display: block; width: 30px; height: 3px; border-radius: 2px;
  background: var(--mc, var(--accent)); margin-top: 10px;
}

/* The muscle a page is about, over its own name. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent-ink); text-decoration: none;
  margin: 4px 0 2px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .75;
}
a.eyebrow:hover { color: var(--accent); }

.latin { margin: -4px 0 14px; color: var(--text-faint); font-style: italic; font-size: .95rem; }
.lede {
  font-size: 1.14rem; line-height: 1.6; color: var(--text-dim);
  margin: 0 0 8px; max-width: 56ch; text-wrap: pretty;
}

p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; color: var(--text-dim); }
li { margin-bottom: 8px; }
li::marker { color: var(--text-faint); }
strong { color: var(--text); }

/* Facts strip: the answers someone came for, above the fold. */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 1px; margin: 22px 0 8px; padding: 0;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.facts > div { background: var(--surface); padding: 13px 15px; }
.facts dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); font-weight: 700; margin-bottom: 3px;
}
.facts dd { margin: 0; font-weight: 700; font-size: .95rem; }

/* --------------------------------------------------------------- hero -- */
/* Every page on this site is about a muscle, and not one of them showed
   you one. The chart the whole product is named after was on /map/ and
   nowhere else, so an exercise page was a wall of prose about a body part
   with no body on it. Now the page opens with the copy beside the figure,
   the muscle in question lit. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 20px 56px; align-items: center;
  margin: 6px 0 10px;
}
.hero-copy { min-width: 0; }
.hero-art { margin: 0; min-width: 0; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 4px; }
  /* On a phone the figure belongs under the name and the numbers, not
     above them: somebody arriving from a search result wants to see the
     name of the thing they searched for first. */
  .hero-art { max-width: 340px; margin: 18px auto 0; }
}

/* ------------------------------------------------------------- the chart -- */
/* The same figure the app draws, rendered flat: no hit targets, no hover,
   just the body with one muscle burning. Each region links to that muscle's
   page, which is the product's own idea — point at a muscle, get its work —
   working on a page with no JavaScript at all. */
.chart {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px 12px 12px; margin: 0;
}
.chart .bodymap-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
}
.chart figcaption {
  text-align: center; font-size: .74rem; color: var(--text-faint);
  padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line);
}
.chart figcaption b { color: var(--text-dim); font-weight: 700; }
/* The muscle this page is about. --mc is that muscle's own colour, the
   same one it has on /map/ and on its share card. */
.bodymap .region.is-lit .lit {
  fill: var(--mc, var(--map-hot));
  stroke: color-mix(in srgb, var(--mc, var(--map-hot)) 70%, #000);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .bodymap .region.is-lit .lit { stroke: var(--map-line); }
}
/* A region that is a link rather than a button, on a page with no script. */
.bodymap a.region { cursor: pointer; }
.bodymap a.region:hover .lit,
.bodymap a.region:focus-visible .lit { fill: var(--map-hot); }
.bodymap a.region:focus { outline: none; }

/* ---------------------------------------------------------- the steps -- */
/* "How to do it" was a numbered list rendered by the browser: a grey digit,
   a full stop, and a line of text that wrapped back under the number. These
   are rungs — the number in its own column, the instruction beside it —
   because somebody reads this standing under a bar. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 10px; }
.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 18px 46px; margin: 0; color: var(--text-dim);
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  font-size: .84rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .steps li::before { background: var(--surface); border-color: var(--line); }
}
/* The thread between the rungs, so the sequence reads as one movement. */
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 33px; bottom: 4px;
  width: 1px; background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }

/* Cues and mistakes: the same shape, opposite signs. A bulleted list gave a
   cue and a mistake the same grey dot, which is the one thing they are not. */
.cues, .misses { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 9px; }
.cues li, .misses li {
  position: relative; margin: 0; padding: 12px 15px 12px 44px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; color: var(--text-dim);
}
.cues li::before, .misses li::before {
  position: absolute; left: 15px; top: 12px;
  font-weight: 800; font-size: .95rem; line-height: 1.5;
}
.cues li::before { content: "✓"; color: var(--good); }
.misses li::before { content: "✕"; color: var(--bad); }

/* --------------------------------------------------------- pill links -- */
/* A row of equipment or muscle links under the facts: small, tappable, and
   a way into the catalogue from every page that mentions one. */
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; }
.pills li { margin: 0; }
.pills a, .pills span {
  display: inline-block; text-decoration: none;
  padding: 7px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-dim);
}
.pills a:hover { border-color: var(--accent); color: var(--text); }
.pills a.is-primary {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-ink);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .pills a.is-primary { border-color: var(--accent); }
}
.icon-btn svg { display: block; }

/* -------------------------------------------------------------- tiles -- */
.tiles { list-style: none; padding: 0; margin: 0 0 18px;
  display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.tiles.wide { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.tiles li { margin: 0; }
.tiles a {
  display: block; height: 100%; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 15px;
  transition: border-color .16s ease, transform .16s ease;
}
.tiles a:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--text); }
.tiles b { display: block; font-size: .92rem; font-weight: 700; margin-bottom: 3px; }
.tiles span { display: block; font-size: .78rem; color: var(--text-faint); }
.tiles span.meta { margin-top: 6px; font-weight: 650; }

/* A card that belongs to one muscle wears that muscle's colour: a stripe
   down its edge, and the colour picked up on the title. Fourteen identical
   grey cards asked the reader to match a name to a region on the chart
   above by reading it. */
.tiles a.tinted {
  border-left: 3px solid var(--mc, var(--line));
  padding-left: 14px;
}
.tiles a.tinted:hover { border-color: var(--mc, var(--accent)); }
.tiles a.tinted b { color: var(--text); }
.tiles a.tinted::before {
  content: ""; display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--mc, var(--accent)); margin-bottom: 9px;
}

/* ------------------------------------------------------------- share -- */
.share-row { margin: 34px 0 0; }
.share-btn {
  font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer;
  color: var(--text-dim); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 20px;
}
.share-btn:hover { border-color: var(--accent); color: var(--text); }
.share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ cta box -- */
.cta-box {
  margin: 34px 0; padding: 22px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.cta-box h2 { margin-top: 0; font-size: 1.05rem; }
.cta-box p { color: var(--text-dim); }
.cta-box p:last-child { margin-bottom: 0; }
.btn {
  display: inline-block; background: var(--accent); color: #fff;
  padding: 11px 20px; border-radius: 10px; font-weight: 700;
  text-decoration: none; font-size: .92rem;
}
.btn:hover { color: #fff; opacity: .92; }

@media (max-width: 560px) {
  h1 { font-size: 1.68rem; }
  header.site { gap: 10px; padding: 14px 18px; }
  /* Six nav items plus a CTA wrapped to three lines on a phone once Map and
     Workouts were added, which is most of the screen spent on navigation
     before the page has said anything. Moving the links to their own row
     under the brand fixed the third line; it did not fix the second, and
     measured at 320, 390 and 430 they still took two rows, holding the
     heading a quarter of the way down every phone screen.

     So the row scrolls instead of wrapping. Somebody arriving from a search
     result came for this page, not for the menu, and the links they cannot
     see are all in the footer as well. overflow-x belongs to the strip
     alone -- the page body must never scroll sideways, which phone.js
     checks on every route. */
  header.site nav {
    margin-left: 0; width: 100%; order: 3;
    gap: 0 18px; font-size: .84rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  header.site nav::-webkit-scrollbar { display: none; }
  /* A link that wraps inside a nowrap row is a link two words tall. */
  header.site nav a { font-size: .84rem; white-space: nowrap; flex: none; }
  /* Row one is the brand, the toggle and the CTA; row two is the strip.
     The CTA used to be lifted out of flow to achieve that, which only
     worked because the nav was wrapping anyway. */
  header.site .cta { padding: 6px 12px; font-size: .82rem; }
  header.site { position: relative; }
  main { padding: 4px 18px 48px; }
}

.empty-note {
  padding: 26px 20px; text-align: center; color: var(--text-faint);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.empty-note p { margin: 0; }

/* --------------------------------------------------------------- legal -- */
/* These pages are long, dense and read top to bottom, so they get a narrower
   measure than the library pages and a little more air between clauses. */
.legal { max-width: 62ch; }
.legal h2 { font-size: 1.04rem; margin: 30px 0 10px; }
.legal p { font-size: .93rem; line-height: 1.72; color: var(--text-dim); }
.legal .lede { font-size: 1.02rem; }
.legal ul { font-size: .91rem; line-height: 1.65; }
.legal .updated {
  font-size: .78rem; color: var(--text-faint); margin: 0 0 4px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.warn-box {
  margin: 22px 0 8px; padding: 16px 18px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--accent);
  border-left-width: 4px;
}
.warn-box p { margin: 0; color: var(--text); font-weight: 650; }

/* ================================================================ print === */
/* An exercise page printed is a reference sheet you can take to the gym:
   the steps, the cues and the mistakes, without the chrome that only works
   on a screen. */
@media print {
  :root {
    --bg: #fff; --surface: #fff; --line: #ccc;
    --text: #000; --text-dim: #222; --text-faint: #444;
    --accent: #000; --accent-ink: #000;
  }
  .site-head, .read-progress, #to-top, .lib-search, .cta-box, .crumbs,
  .share-row, header.site nav, header.site .cta,
  header.site #theme-toggle { display: none !important; }
  body { font-size: 11pt; }
  main { max-width: none; padding: 0; }
  h1 { font-size: 20pt; }
  h2 { font-size: 13pt; margin-top: 18pt; page-break-after: avoid; }
  h3 { page-break-after: avoid; }
  li, p { page-break-inside: avoid; }
  .facts { border: 1px solid #ccc; }
  .facts > div { padding: 6pt 8pt; }
  .tiles a { border: 1px solid #ddd; }
  /* A printed link to a hash route is useless; a printed URL is not. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  footer.site { border-top: 1px solid #ccc; font-size: 9pt; }
}

/* ---------------------------------------------------- workout sessions --- */
/* The numbered session on a workout page. A row is the movement, what it
   trains, and the prescription — the three things somebody standing in a gym
   is reading it for. */
.wk-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.wk-list li {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 15px;
}
.wk-n {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: .8rem; font-weight: 800;
}
.wk-b { flex: 1; min-width: 0; }
.wk-name { font-weight: 700; font-size: .98rem; color: var(--text); text-decoration: none; }
.wk-name:hover { text-decoration: underline; }
.wk-meta { font-size: .8rem; color: var(--text-faint); margin-top: 3px; line-height: 1.45; }
.wk-rx { flex: none; text-align: right; }
.wk-rx b {
  display: block; font-size: .95rem; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wk-rx span { display: block; font-size: .74rem; color: var(--text-faint); margin-top: 2px; }
/* A rest day is part of the week, not a gap in it — shown, but plainly. */
.wk-list li.is-rest { background: none; border-style: dashed; }
.wk-list li.is-rest .wk-n { background: none; border: 1px solid var(--line); color: var(--text-faint); }
.wk-list li.is-rest .wk-name { color: var(--text-faint); }
@media (max-width: 460px) {
  .wk-list li { flex-wrap: wrap; }
  .wk-rx { text-align: left; width: 100%; padding-left: 39px; }
  .wk-rx b { display: inline; }
  .wk-rx span { display: inline; margin-left: 8px; }
}


/* ======================================================== the muscle map === */
/* The figure is drawn by the same module the app uses (views/bodymap.js),
   so these are the app's own rules restated against this sheet's tokens —
   static.css deliberately shares no variables with the app stylesheet. */
:root {
  --map-body: #ccd4e2;
  --map-line: #39415a;
  --map-hot: #ff4f63;
}
/* Light mode puts a pale figure on a white card, where it all but
   disappears; this is the same body a shade further from the surface. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --map-body: #dde3ed; }
}
:root[data-theme="light"] { --map-body: #dde3ed; }
:root[data-theme="dark"] { --map-body: #ccd4e2; }

.bodymap-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 18px 10px 14px; margin: 22px 0 6px;
}
.bodymap { width: 100%; max-width: 235px; height: auto; display: block; margin: 0 auto; }
.bodymap-label {
  text-align: center; font-size: .66rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); padding-bottom: 8px;
}
.bodymap .ground { fill: var(--map-body); stroke: none; pointer-events: none; }
.bodymap .edge {
  fill: none; stroke: var(--map-line); stroke-width: 2;
  stroke-linejoin: round; pointer-events: none;
}
.bodymap .trim {
  fill: none; stroke: var(--map-line); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.bodymap .trim .fill { fill: var(--map-body); }
.bodymap .region { cursor: pointer; }
.bodymap .lit {
  fill: var(--map-body); stroke: var(--map-line); stroke-width: 1.5;
  stroke-linejoin: round; pointer-events: none; transition: fill .16s ease;
}
/* The same paths again, painting nothing, dilated by a fat stroke into
   something a thumb can hit. */
.bodymap .hit {
  fill: transparent; stroke: transparent; stroke-width: 13;
  stroke-linejoin: round; pointer-events: all;
}
.bodymap .region:hover .lit,
.bodymap .region:focus-visible .lit { fill: var(--map-hot); }
.bodymap .region:focus { outline: none; }

/* On /map/ the figure is what the page is for, so it gets the room rather
   than sitting in a 300px column beside some copy. */
.map-page .chart { max-width: 620px; margin: 24px auto 32px; padding: 22px 18px 14px; }
.map-page .chart .bodymap-wrap { gap: 18px; }
.map-page .bodymap { max-width: 280px; }

/* One section per muscle, each the target of a link on the figure. */
.map-m {
  border-top: 1px solid var(--line);
  padding-top: 22px; margin-top: 26px;
  /* The header is sticky, so a plain anchor jump parks the heading behind
     it. This is the header's own height plus a little air; without it,
     clicking a muscle on the chart lands you on a section whose name you
     cannot read. */
  scroll-margin-top: 84px;
}
@media (max-width: 560px) {
  .map-m { scroll-margin-top: 124px; }
}
.map-m h2 { margin-bottom: 6px; }
/* Arriving from the chart: say which one you landed on. */
.map-m:target h2 { color: var(--mc, var(--accent-ink)); }
.map-m:target { border-top-color: var(--mc, var(--accent)); }
.map-blurb { margin: 0 0 6px; }
.map-facts { font-size: .82rem; color: var(--text-faint); margin: 0 0 14px; }
.map-ex {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.map-ex li {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.map-ex a { font-weight: 650; text-decoration: none; }
.map-ex a:hover { text-decoration: underline; }
.map-ex span { display: block; font-size: .74rem; color: var(--text-faint); margin-top: 3px; }
.map-more { font-size: .85rem; margin: 0; }
@media (max-width: 560px) {
  .bodymap-wrap { padding: 14px 6px 10px; gap: 8px; }
}