/* ═══════════════════════════════════════════════════════════════════
   Ama Body Map — anatomical image with clickable HTML hotspots for
   srota-level ama localization. Intensity is painted inline by the
   Stimulus controller (backgroundColor + data-intensity); CSS handles
   hover, focus, and chip styling. Palette matches the parchment theme.
   ═══════════════════════════════════════════════════════════════════ */

.ama-hotspot {
  cursor: pointer;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out;
  border: 1px solid transparent;
  outline: none;
}

.ama-hotspot:hover {
  background-color: rgba(194, 118, 30, 0.18) !important;
  border-color: rgba(194, 118, 30, 0.55);
}

.ama-hotspot:focus-visible {
  border-color: rgba(165, 82, 26, 0.9);
  box-shadow: 0 0 0 2px rgba(216, 154, 82, 0.35);
}

/* Severity-specific outlines so painted hotspots still read as interactive. */
.ama-hotspot[data-intensity="mild"]     { border-color: rgba(216, 154, 82, 0.55); }
.ama-hotspot[data-intensity="moderate"] { border-color: rgba(165, 82, 26, 0.65); }
.ama-hotspot[data-intensity="severe"]   { border-color: rgba(90, 40, 10, 0.85); }

.ama-chip {
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

.ama-chip[data-intensity="mild"] {
  background-color: #F0DDB8;
  border-color: rgba(216, 154, 82, 0.7);
  color: rgba(90, 40, 10, 0.95);
}

.ama-chip[data-intensity="moderate"] {
  background-color: #D89A52;
  border-color: rgba(165, 82, 26, 0.85);
  color: white;
}

.ama-chip[data-intensity="severe"] {
  background-color: #A5521A;
  border-color: rgba(90, 40, 10, 1);
  color: white;
}

/* View-toggle row (Body/Tongue/Eyes) — keeps active tab visually anchored. */
.ama-view-toggle {
  transition: background-color 120ms ease-out, color 120ms ease-out;
}