/* ==========================================================================
   Inactive pain point message (assets/js/pain-assessment.js · showZoneHint)
   Condition landing pages only. Loaded by pain-assessment.php, not by the
   homepage (its check has every area active, so this never runs there).

   A small card with the message "This check covers … Please tap one of those
   areas." shown right next to the spot the patient tapped, so it is always on
   the visible screen. Position (left/top) and the pointer (--zh-arrow) are
   set by JS. Not clickable: taps pass through to the body.
   ========================================================================== */
.anatomy-stage .zone-hint{
  --zh-arrow:50%;
  position:absolute;z-index:40;left:10px;top:10px;
  display:flex;align-items:flex-start;gap:9px;
  width:max-content;max-width:min(320px,calc(100% - 20px));box-sizing:border-box;
  margin:0;padding:10px 14px 10px 10px;border-radius:14px;
  background:#fff;border:1px solid rgba(26,100,184,.18);
  box-shadow:0 14px 30px -12px rgba(11,55,110,.42),0 2px 6px rgba(11,55,110,.08);
  color:#0e2f5a;font-family:inherit;text-align:left;
  pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.98);transform-origin:var(--zh-arrow) 100%;
  transition:opacity .2s ease,transform .25s ease,visibility 0s linear .25s;
}
.anatomy-stage .zone-hint.is-below{transform:translateY(-6px) scale(.98);transform-origin:var(--zh-arrow) 0}
.anatomy-stage .zone-hint.is-in{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .2s ease,transform .25s ease,visibility 0s;
}
.anatomy-stage .zone-hint.is-nudge{animation:zoneHintNudge .38s ease}
@keyframes zoneHintNudge{0%,100%{translate:0}25%{translate:-4px 0}50%{translate:4px 0}75%{translate:-2px 0}}

/* small pointer toward the tapped spot */
.anatomy-stage .zone-hint::after{
  content:"";position:absolute;left:var(--zh-arrow);bottom:-6px;width:12px;height:12px;margin-left:-6px;
  background:#fff;border:1px solid rgba(26,100,184,.18);border-top:0;border-left:0;
  transform:rotate(45deg);border-radius:0 0 3px 0;
}
.anatomy-stage .zone-hint.is-below::after{bottom:auto;top:-6px;transform:rotate(225deg)}

.zone-hint__ico{
  flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:linear-gradient(135deg,#14c8df,#1a64b8);color:#fff;
}
.zone-hint__ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.zone-hint__txt{margin:0;min-width:0;font-size:13px;line-height:1.45;font-weight:500;color:#33536b}
.zone-hint__txt b{font-weight:700;color:#0e2f5a}

@media (max-width:420px){
  .anatomy-stage .zone-hint{max-width:calc(100% - 20px);padding:9px 12px 9px 9px;gap:8px}
  .zone-hint__txt{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .anatomy-stage .zone-hint,.anatomy-stage .zone-hint.is-below,.anatomy-stage .zone-hint.is-in{transform:none;transition:opacity .2s ease,visibility 0s}
  .anatomy-stage .zone-hint.is-nudge{animation:none}
}
@media print{.anatomy-stage .zone-hint{display:none!important}}