/* VialForge 2.2: injection-site body map (static/bodymap.js).
   Built from the theme tokens in style.css only, so it follows light and dark
   and every accent. Shading is never the only signal: picked zones carry a
   check mark and a spoken status line, and the Sites map prints days since
   last use on each logged zone, with the same facts listed as text below. */

.bm-wrap{margin-top:10px}
.bm-svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;overflow:visible}
.bm-body{fill:var(--panel-2);stroke:var(--dim);stroke-width:1.1;stroke-linejoin:round}
.bm-detail{fill:var(--dim);stroke:var(--dim);stroke-width:.9;opacity:.7}
.bm-cap text{font:600 9px/1 system-ui,-apple-system,"Segoe UI",sans-serif;fill:var(--muted);
  text-anchor:middle}

/* picking (dose sheet): every zone is a button */
.bm-pick .bm-zone{cursor:pointer;outline:none}
.bm-hit{fill:transparent;pointer-events:all;stroke:none}
.bm-pick .bm-shape{fill:color-mix(in srgb,var(--a) 16%,transparent);
  stroke:color-mix(in srgb,var(--a) 75%,var(--ink));stroke-width:1.1;
  transition:fill .12s}
.bm-pick .bm-zone:hover .bm-shape{fill:color-mix(in srgb,var(--a) 34%,transparent)}
.bm-pick .bm-zone.on .bm-shape{fill:var(--a);stroke:var(--ink);stroke-width:1.8}
.bm-mark{font:800 10px/1 system-ui,sans-serif;fill:var(--on-a);text-anchor:middle;
  pointer-events:none}
.bm-zone:not(.on) .bm-mark{display:none}
.bm-pick .bm-zone:focus-visible .bm-hit{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 2}
.bm-pick .bm-zone:focus-visible .bm-shape{stroke:var(--ink);stroke-width:2.2}

.bm-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px}
.bm-note{font-size:12px;text-align:center;margin:6px 0 0}
.bm-say{min-height:1.3em;margin:2px 0 0;font-size:13px;text-align:center;color:var(--ink)}

/* recency (Sites sheet): stronger shading = logged more recently */
.bm-b1{--bm-fill:color-mix(in srgb,var(--a) 88%,var(--panel))}
.bm-b2{--bm-fill:color-mix(in srgb,var(--a) 62%,var(--panel))}
.bm-b3{--bm-fill:color-mix(in srgb,var(--a) 40%,var(--panel))}
.bm-b4{--bm-fill:color-mix(in srgb,var(--a) 22%,var(--panel))}
.bm-b0{--bm-fill:transparent}
.bm-recency .bm-shape{fill:var(--bm-fill);stroke:color-mix(in srgb,var(--a) 70%,var(--ink));
  stroke-width:1}
.bm-recency .bm-b0 .bm-shape{stroke:var(--dim);stroke-dasharray:2.5 2}
.bm-days{font:800 7.5px/1 system-ui,sans-serif;fill:var(--ink);text-anchor:middle;
  paint-order:stroke;stroke:var(--panel);stroke-width:2.4px;stroke-linejoin:round}

.bm-sites{display:flex;flex-direction:column;gap:12px}
.bm-sites .seg button{min-height:44px}
.bm-intro{margin:0;font-size:13.5px}
.bm-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;
  font-size:12.5px;color:var(--muted)}
.bm-legend li{display:flex;align-items:center;gap:7px}
.bm-key{width:16px;height:16px;border-radius:5px;flex:0 0 auto;background:var(--bm-fill);
  border:1px solid color-mix(in srgb,var(--a) 70%,var(--ink))}
.bm-key.bm-b0{border:1.5px dashed var(--dim)}
.bm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bm-item{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:2px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel-2);font-size:14px}
.bm-name{font-weight:560;min-width:0;overflow-wrap:anywhere}
.bm-fact{font-size:13px;color:var(--muted)}
.bm-item.none .bm-fact{color:var(--dim)}

/* short landscape phones: keep the map within one screen of the sheet */
@media (orientation:landscape) and (max-height:520px){
  .bm-sites .bm-svg{max-width:340px}
}