/* bodymap.css — augments the body-map widget's own body-map.css.
 *
 * Adds the pinch-zoom viewport, severity legend, hint, reset pill, and a
 * vertically-stacked silhouette layout that mirrors the native iOS
 * BodyMapField (FRONT block over BACK block). Severity fills come from the
 * shared --sev-* token group (tokens.css), so all three body-map surfaces
 * (silhouette fills, legend dots, tap-list chips) stay in sync.
 *
 * Design tokens live in tokens.css. USE THE VARS. */

.bodymap {
  display: flex;
  flex-direction: column;
  gap: var(--space, 16px);
}

/* ---- legend (iOS: mild / moderate / severe dots) ---- */
.bm-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bm-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: var(--weight-medium, 500);
  color: var(--text-secondary);
}

.bm-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.bm-dot.bm-mild     { background: color-mix(in srgb, var(--sev-mild) 55%, transparent); }
.bm-dot.bm-moderate { background: color-mix(in srgb, var(--sev-mod) 65%, transparent); }
.bm-dot.bm-severe   { background: color-mix(in srgb, var(--sev-severe) 75%, transparent); }

/* ---- hint ---- */
.bm-hint {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary);
}

/* ---- zoom viewport (clips) + transformed inner layer ---- */
.bm-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-surface);
  /* viewport handles all gestures itself; stop the browser hijacking them */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.bm-zoom-layer {
  transform-origin: 0 0;
  will-change: transform;
}

/* The widget mounts its two silhouettes here. The mount IS the .body-map element,
 * so use a COMPOUND selector (not descendant) to override the widget's side-by-side
 * row into iOS's FRONT-over-BACK vertical stack. svg sizing comes from .bm-side. */
.bm-mount.body-map {
  flex-direction: column;
  gap: var(--space-lg, 24px);
  align-items: center;
  padding: var(--space, 16px) 0;
}

/* ---- reset pill (shown only when zoomed) ---- */
.bm-reset {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  border: none;
  border-radius: var(--radius-pill, 999px);
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-semibold, 600);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-base) 78%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

/* ---- loading / fallback ---- */
.bm-loading {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ---- severity fills (iOS palette; restated so severe -> --danger) ----
 * The widget sets data-severity on each .muscle path. */
.bm-viewport .muscle {
  fill: transparent;
  stroke: rgba(160, 160, 160, 0.55);
  stroke-width: 1.5;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill-opacity 120ms ease-out, stroke 120ms ease-out;
}
.bm-viewport .muscle[data-severity="none"]     { fill: transparent; }
.bm-viewport .muscle[data-severity="mild"]     { fill: var(--sev-mild); fill-opacity: var(--sev-mild-a); }
.bm-viewport .muscle[data-severity="moderate"] { fill: var(--sev-mod); fill-opacity: var(--sev-mod-a); }
.bm-viewport .muscle[data-severity="severe"]   { fill: var(--sev-severe); fill-opacity: var(--sev-severe-a); }

/* While panning a zoomed silhouette, suppress hover-stroke flicker. */
.bm-viewport.is-zoomed .muscle:hover {
  stroke: rgba(160, 160, 160, 0.55);
  stroke-width: 1.5;
}

@media (prefers-color-scheme: dark) {
  .bm-viewport .muscle {
    stroke: rgba(200, 200, 200, 0.45);
  }
}