/* ============================================================
   RAR MEDICAL MICROBIOLOGY · "Sinusitis & Otitis Media" page styles
   Section-1 anatomy overlay lives in the shared ZoomableFigure SVG
   viewBox, so these shapes track zoom/pan. Callouts use the shared
   .zf-caption strip (zoom-proof). Reader text #111111. Prefix: som-.
   ============================================================ */

.rar-topic-content .som-anat-lead { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.5; color: #5a6473; }
.rar-topic-content .som-anat-fig { margin: 0 0 4px; }

/* Start-here card: the anatomy map sits smaller, inline to the right of the text */
.rar-topic-content #som-syndrome .mk-fig-row > .mk-fig { flex: 0 0 340px; max-width: 340px; align-self: flex-start; }
@media (max-width: 820px) {
    .rar-topic-content #som-syndrome .mk-fig-row > .mk-fig { flex-basis: auto; max-width: 420px; }
}

/* region hit-shapes (rects) — faint dashed until hover/active */
.rar-topic-content .som-anat-region {
    fill: rgba(10, 132, 255, 0.02);
    stroke: rgba(10, 132, 255, 0.28);
    stroke-width: 3;
    stroke-dasharray: 12 10;
    cursor: pointer;
    outline: none;
    transition: fill .15s, stroke .15s, stroke-width .15s;
}
.rar-topic-content .som-anat-region.is-active {
    fill: rgba(10, 132, 255, 0.16);
    stroke: #0a84ff;
    stroke-width: 5;
    stroke-dasharray: none;
}
.rar-topic-content .som-anat-region:focus-visible { stroke: #0066cc; stroke-dasharray: none; }

/* point markers */
.rar-topic-content .som-anat-hot { cursor: pointer; outline: none; }
.rar-topic-content .som-anat-dot { fill: #0a84ff; stroke: #fff; stroke-width: 5; transition: fill .12s; }
.rar-topic-content .som-anat-ring {
    fill: #0a84ff; opacity: .45;
    transform-box: fill-box; transform-origin: center;
    animation: somAnatPulse 2.1s ease-out infinite;
}
.rar-topic-content .som-anat-hot.is-active .som-anat-dot { fill: #0066cc; }
.rar-topic-content .som-anat-hot:focus-visible .som-anat-dot { stroke: #cfe4ff; stroke-width: 8; }
@keyframes somAnatPulse { 0% { transform: scale(.55); opacity: .55; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rar-topic-content .som-anat-ring { animation: none; opacity: .3; } }

/* eustachian-tube path (stroked hit-area) */
.rar-topic-content .som-anat-path {
    stroke: rgba(10, 132, 255, 0.3);
    stroke-width: 22;
    stroke-linecap: round;
    stroke-linejoin: round;
    cursor: pointer;
    outline: none;
    transition: stroke .15s;
}
.rar-topic-content .som-anat-path.is-active { stroke: rgba(10, 132, 255, 0.6); }
.rar-topic-content .som-anat-path:focus-visible { stroke: rgba(0, 102, 204, 0.65); }

/* ---------- pathogenesis step-strip regions (spotlight: active clear + glow, others scrimmed) ----------
   NOTE: un-scoped (no .rar-topic-content prefix) — the shared ZoomableFigure "⤢ Zoom"
   MOVES the figure into a body-level lightbox, so these rects must still be styled there. */
.rar-topic-content .som-path-fig { margin: 0 0 4px; }
.som-path-region {
    fill: rgba(248, 250, 252, 0.58);        /* light scrim dims non-active stages */
    stroke: rgba(15, 23, 42, 0.12);
    stroke-width: 2;
    cursor: pointer; outline: none;
    transition: fill .2s, stroke .2s, stroke-width .2s;
}
.som-path-region.is-active {
    fill: transparent;                      /* the active stage shows through */
    stroke: #0a84ff;
    stroke-width: 6;
}
.som-path-region:focus-visible { stroke: #0066cc; }