/* §12.4b / §12.4c body map. Tokens only, per §12.2.

   Two rules here are load-bearing and both fail silently if written the
   obvious way. They are commented where they sit. */

.bm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
}

.bm-fig {
  position: relative;
  width: 100%;
  max-width: var(--w-map-lg);
}

.bm--sm .bm-fig {
  max-width: var(--w-map-sm);
}

.body-map {
  display: block;
  width: 100%;
  height: auto;
}

/* TRAP 1 — the default fill goes on the GROUP, never on `path`.
   JS sets fill on each <g data-muscle> and the paths inherit it. A rule
   matching `[data-muscle] path { fill: … }` sets the property directly on the
   painted element, and a direct property always beats an inherited value — so
   every region would render this default and nothing would ever shade, with no
   error anywhere. Inheritance is the mechanism; do not break it.

   The same rule is also why shadeMap() writes an inline style rather than a
   `fill` attribute: a presentation attribute loses to this declaration. */
.body-map [data-muscle] {
  fill: var(--bm-unworked);
  stroke: var(--bm-sep);
  stroke-width: var(--stroke-map);
  cursor: pointer;
}

/* TRAP 2 — the viewBox is 727 units wide against ~200px on screen, so a
   stroke-width of 1 renders at 0.27px and the separation between regions
   disappears entirely. `non-scaling-stroke` pins the width to screen units.
   It applies to the painted element, so this is the one rule that targets
   `path` — note that it sets no fill. */
.body-map path {
  vector-effect: non-scaling-stroke;
}

/* §12.4b: under the landmark minimum. The separation stroke every path already
   carries is RECOLOURED — a second outline would read as two overlaid diagrams
   at this size, and a thickened one hides the fill it is annotating. The width
   is deliberately identical to the divider's: the warning is a change of
   colour, never of weight, so the accent underneath stays readable.
   Front delts have a minimum of 0 (§9.2) and so never take this, which is the
   point: zero direct sets there is satisfied, not neglected. */
.body-map [data-muscle].bm-low {
  stroke: var(--bm-low);
  stroke-width: var(--stroke-map-low);
}

/* Anatomy the library never scores — head, hands, feet, joints. Neutral and
   flat so an empty map reads "not applicable" rather than "unworked" (§12.4b). */
.body-map .bm-inert {
  fill: var(--bm-inert);
  stroke: none;
  pointer-events: none;
}

/* §12.4b: front and back are separate views, never side by side — at phone
   width two figures means neither is legible. */
.body-map[data-view='front'] [data-face='back'],
.body-map[data-view='back'] [data-face='front'] {
  display: none;
}

/* Bottom-right, out of the way of the figure (§12.4b). */
.bm-rotate {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--elev-1);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-label);
  cursor: pointer;
}

.bm-rotate:hover {
  border-color: var(--accent-line);
}

.bm-read {
  min-height: calc(var(--s-5) * 2);
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-label);
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---- §12.4c two scopes in the plan editor ---- */

.bm-scopes {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--card-pad);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

/* Side by side where space allows; one column at phone width, where two
   figures across would leave each about 150px. */
.bm-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-map), 100%), 1fr));
  gap: var(--s-4);
  padding-top: var(--s-3);
}

.bm-scope {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.bm-scope-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--tap);
}

.bm-scope-head .sel {
  flex: 1 1 var(--w-gym-name);
  min-width: 0;
}

.bm-scope-note {
  color: var(--text-dim);
  font-size: var(--fs-label);
}

/* ---- the small map on a library exercise card ---- */

.ex-map {
  margin-top: var(--s-2);
  border-top: var(--hair) solid var(--line-soft);
}

.ex-map-head {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text-dim);
  font-size: var(--fs-label);
  cursor: pointer;
}

.ex-map-head::marker,
.ex-map-head::-webkit-details-marker {
  color: var(--text-dim);
}

.ex-map-body {
  padding-bottom: var(--s-2);
}