/* ============================================================
   SHARED · HotspotOverlay styles
   Scoped to the component's own classes (.hs-host / .hs-overlay / .hs-*)
   so it renders the same on any page. Light callout matches the platform
   tooltip look; reader text #111111. Dynamic positions are inline.
   ============================================================ */

.hs-host { position: relative; display: block; }
.hs-host .atl-figure__btn { display: block; }
/* preview mode (inlineHotspots:false) — clean image, hotspots live in the zoom modal */
.hs-host--preview .atl-figure__btn { cursor: zoom-in; }

.hs-overlay {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: visible;
}

/* markers / regions */
.hs-hot { pointer-events: auto; cursor: pointer; outline: none; }

/* point marker */
.hs-dot { fill: #0a84ff; stroke: #fff; stroke-width: 6; transition: fill .12s; }
.hs-ring {
    fill: #0a84ff; opacity: .5;
    transform-box: fill-box; transform-origin: center;
    animation: hsPulse 2.1s ease-out infinite;
}
.hs-hot--point:hover .hs-dot,
.hs-hot--point.is-active .hs-dot { fill: #0066cc; }
.hs-hot:focus-visible .hs-dot { stroke: #cfe4ff; stroke-width: 9; }
@keyframes hsPulse {
    0%   { transform: scale(.55); opacity: .55; }
    70%  { transform: scale(1.9);  opacity: 0; }
    100% { transform: scale(1.9);  opacity: 0; }
}

/* rectangle region — subtle outline always, strong highlight on hover/active */
.hs-rect {
    fill: rgba(10, 132, 255, 0.05);
    stroke: rgba(10, 132, 255, 0.42);
    stroke-width: 3;
    stroke-dasharray: 10 8;
    transition: fill .12s, stroke .12s, stroke-width .12s;
}
.hs-hot--rect:hover .hs-rect,
.hs-hot--rect.is-active .hs-rect {
    fill: rgba(10, 132, 255, 0.16);
    stroke: #0a84ff;
    stroke-width: 5;
    stroke-dasharray: none;
}
.hs-hot:focus-visible .hs-rect { stroke: #0066cc; stroke-width: 5; stroke-dasharray: none; }

/* circle / oval region — mirrors the rect treatment, but highlights as a CIRCLE */
.hs-circle {
    fill: rgba(10, 132, 255, 0.05);
    stroke: rgba(10, 132, 255, 0.42);
    stroke-width: 3;
    stroke-dasharray: 10 8;
    transition: fill .12s, stroke .12s, stroke-width .12s;
}
.hs-hot--circle:hover .hs-circle,
.hs-hot--circle.is-active .hs-circle {
    fill: rgba(10, 132, 255, 0.16);
    stroke: #0a84ff;
    stroke-width: 5;
    stroke-dasharray: none;
}
.hs-hot:focus-visible .hs-circle { stroke: #0066cc; stroke-width: 5; stroke-dasharray: none; }

/* traced polygon region — outlines the real structure, highlights on hover/active */
.hs-poly {
    fill: rgba(10, 132, 255, 0.06);
    stroke: rgba(10, 132, 255, 0.5);
    stroke-width: 3;
    stroke-linejoin: round;
    transition: fill .12s, stroke .12s, stroke-width .12s;
}
.hs-hot--poly:hover .hs-poly,
.hs-hot--poly.is-active .hs-poly {
    fill: rgba(10, 132, 255, 0.2);
    stroke: #0a84ff;
    stroke-width: 5;
}
.hs-hot:focus-visible .hs-poly { stroke: #0066cc; stroke-width: 5; }

/* stroked path region — a line along the structure (e.g. eustachian tube) */
.hs-path {
    stroke: rgba(10, 132, 255, 0.5);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .12s, stroke-width .12s;
}
.hs-hot--path:hover .hs-path,
.hs-hot--path.is-active .hs-path { stroke: #0a84ff; stroke-width: 15; }
.hs-hot:focus-visible .hs-path { stroke: #0066cc; stroke-width: 15; }

@media (prefers-reduced-motion: reduce) {
    .hs-ring { animation: none; opacity: .35; }
}

/* callouts (light tooltip card; one open at a time) */
.hs-layer { position: absolute; inset: 0; pointer-events: none; }
.hs-callout {
    position: absolute;
    min-width: 168px; max-width: 236px;
    padding: 10px 12px;
    background: #fff; color: #111111;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
    font-size: 12.5px; line-height: 1.45;
    opacity: 0; visibility: hidden;
    transition: opacity .12s;
    z-index: 6;
}
.hs-callout.is-open { opacity: 1; visibility: visible; }
.hs-callout strong { font-weight: 800; color: #111111; }
.hs-callout--above { transform: translate(-50%, calc(-100% - 15px)); }
.hs-callout--below { transform: translate(-50%, 15px); }

/* ---------- flow animation (opts.flow) ---------- */
.hs-flow-path {
    stroke: rgba(225, 29, 72, 0.5);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 3 16;
}
.hs-flow-p {
    fill: #e11d48;
    stroke: #fff;
    stroke-width: 2;
    filter: drop-shadow(0 0 3px rgba(225, 29, 72, 0.6));
}
/* momentary highlight as a particle passes a waypoint */
.hs-hot.is-flow .hs-dot { fill: #e11d48; }
.hs-hot.is-flow .hs-ring { fill: #e11d48; opacity: .75; animation-duration: .8s; }
.hs-flow-toggle {
    position: absolute; left: 8px; bottom: 8px; z-index: 5;
    width: 30px; height: 30px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: rgba(255, 255, 255, 0.92); color: #111111; cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.hs-flow-toggle:hover { background: #fff; }

/* zoom modal — carries the same overlay on the enlarged image */
.hs-zoom {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.hs-zoom[hidden] { display: none; }
.hs-zoom__backdrop { position: absolute; inset: 0; background: rgba(8, 12, 22, 0.82); }
.hs-zoom__panel { position: relative; width: min(1100px, 92vw); max-height: 92vh; }
.hs-zoom__x {
    position: absolute; top: -14px; right: -14px; z-index: 2;
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: #fff; color: #111111; font-size: 16px; cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.hs-zoom__fig { position: relative; display: block; }
.hs-zoom__img {
    display: block; width: 100%; height: auto; max-height: 88vh; object-fit: contain;
    border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); background: #fff;
}
body.hs-zoom-open { overflow: hidden; }