/* ============================================================
   CAV PATHOLOGY · IHD · §4a Complication cards (four-chamber base)
   Scoped to #cavIhdMiClinicalTopicContent. Shared overlay-card engine:
   accordion cards over one base image (795×830) with Normal ↔
   Complication SVG overlays. Normal is calm; Complication is the
   only thing bright/animated (blood #b91c1c, dead tissue #7f1d1d).
   All reader text #111 on light surfaces.
   ============================================================ */

#cavIhdMiClinicalTopicContent .cmp { display: grid; gap: 14px; }

/* ---- accordion card ---- */
#cavIhdMiClinicalTopicContent .cmp-card {
    background: #fff; border: 1px solid rgba(15, 23, 42, .12); border-left: 4px solid var(--mi-accent, #9a1f17);
    border-radius: 16px; box-shadow: 0 6px 18px rgba(15, 23, 42, .05); scroll-margin-top: 16px;
}
#cavIhdMiClinicalTopicContent .cmp-head {
    width: 100%; display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: transparent;
    border: none; cursor: pointer; text-align: left;
}
#cavIhdMiClinicalTopicContent .cmp-head:hover { background: rgba(15, 23, 42, .015); }
#cavIhdMiClinicalTopicContent .cmp-head:focus-visible { outline: 2px solid var(--mi-accent, #9a1f17); outline-offset: -2px; }
#cavIhdMiClinicalTopicContent .cmp-icon { font-size: 22px; flex: none; }
#cavIhdMiClinicalTopicContent .cmp-head-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
#cavIhdMiClinicalTopicContent .cmp-title { font-size: 17px; font-weight: 850; color: #111111; letter-spacing: -.015em; }
#cavIhdMiClinicalTopicContent .cmp-teaser { font-size: 13px; font-weight: 600; color: #111111; line-height: 1.35; }
#cavIhdMiClinicalTopicContent .cmp-badge { flex: none; font-size: 12px; font-weight: 800; color: var(--mi-accent, #9a1f17); background: color-mix(in srgb, var(--mi-accent, #9a1f17) 9%, #fff); border: 1px solid color-mix(in srgb, var(--mi-accent, #9a1f17) 26%, #fff); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
#cavIhdMiClinicalTopicContent .cmp-chev { flex: none; color: var(--mi-accent, #9a1f17); font-size: 15px; transition: transform .2s ease; }
#cavIhdMiClinicalTopicContent .cmp-card.is-open .cmp-chev { transform: rotate(180deg); }
#cavIhdMiClinicalTopicContent .cmp-card.is-open .cmp-head { border-bottom: 1px solid rgba(15, 23, 42, .08); }

#cavIhdMiClinicalTopicContent .cmp-body { display: grid; gap: 12px; padding: 14px 16px 16px; }
#cavIhdMiClinicalTopicContent .cmp-body[hidden] { display: none; }   /* beat the scoped display:grid */

/* ---- normal/complication toggle ---- */
#cavIhdMiClinicalTopicContent .cmp-toggle { display: inline-flex; gap: 4px; background: var(--surface-soft, #f3f4f6); border: 1px solid rgba(15, 23, 42, .14); border-radius: 999px; padding: 3px; width: fit-content; }
#cavIhdMiClinicalTopicContent .cmp-seg { appearance: none; border: none; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; color: #111111; padding: 6px 16px; border-radius: 999px; }
#cavIhdMiClinicalTopicContent .cmp-seg.is-on { background: var(--mi-accent, #9a1f17); color: #fff; box-shadow: var(--shadow-md); }
#cavIhdMiClinicalTopicContent .cmp-seg:focus-visible { outline: 2px solid var(--mi-accent, #9a1f17); outline-offset: 2px; }

/* ---- the base figure + overlays (image-overlay lock) ---- */
#cavIhdMiClinicalTopicContent .cmp-stage { position: relative; width: 100%; max-width: 440px; margin: 0 auto; background: #fff; border-radius: 12px; }
#cavIhdMiClinicalTopicContent .cmp-img { display: block; width: 100%; height: auto; border-radius: 12px; }
#cavIhdMiClinicalTopicContent .cmp-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#cavIhdMiClinicalTopicContent .cmp-stage[data-state="normal"] .cmp-ov-comp { display: none; }
#cavIhdMiClinicalTopicContent .cmp-stage[data-state="comp"] .cmp-ov-normal { display: none; }

/* overlay primitives */
#cavIhdMiClinicalTopicContent .cmp-faint { fill: none; stroke: rgba(15, 23, 42, .45); stroke-width: 2; stroke-dasharray: 5 4; }
#cavIhdMiClinicalTopicContent .cmp-dead { fill: #7f1d1d; opacity: .82; }
#cavIhdMiClinicalTopicContent .cmp-spared { fill: none; stroke: #059669; stroke-width: 3; }
#cavIhdMiClinicalTopicContent .cmp-weak { fill: #7f1d1d; opacity: .3; }
/* annular region (outer pericardium + inner heart boundary in one path):
   even-odd fills only the rim, leaving the heart interior unfilled */
#cavIhdMiClinicalTopicContent .cmp-fill { fill: #b91c1c; fill-rule: evenodd; opacity: .4; }
#cavIhdMiClinicalTopicContent .cmp-flow { stroke-dasharray: 20 16; animation: cmp-flow 0.9s linear infinite, cmp-pulse 1.4s ease-in-out infinite; }
@keyframes cmp-flow { to { stroke-dashoffset: -36; } }
@keyframes cmp-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
#cavIhdMiClinicalTopicContent .cmp-compress path { opacity: .85; }
/* moving red blood cells — pale ring so they read as cells over the jet line */
#cavIhdMiClinicalTopicContent .cmp-cell { opacity: .95; stroke: #fde8e8; stroke-width: 1; }

/* hoverable muscle region (traced coordinates) — highlights on hover/focus */
#cavIhdMiClinicalTopicContent .cmp-musc { fill: transparent; pointer-events: all; cursor: help; transition: fill .12s ease; }
#cavIhdMiClinicalTopicContent .cmp-musc:hover,
#cavIhdMiClinicalTopicContent .cmp-musc:focus-visible { fill: rgba(185, 28, 28, .24); stroke: var(--mi-accent, #9a1f17); stroke-width: 3; outline: none; }
/* popup definition anchored over the figure */
#cavIhdMiClinicalTopicContent .cmp-musc-tip {
    position: absolute; transform: translate(-50%, -108%); max-width: 240px; z-index: 6; pointer-events: none;
    background: #fff; color: #111111; border: 1px solid rgba(15, 23, 42, .2); border-left: 3px solid var(--mi-accent, #9a1f17);
    border-radius: 10px; padding: 9px 11px; font-size: 12.5px; line-height: 1.42; font-weight: 600;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
}
#cavIhdMiClinicalTopicContent .cmp-musc-tip[hidden] { display: none; }
#cavIhdMiClinicalTopicContent .cmp-musc-tip strong { color: var(--mi-accent, #9a1f17); font-weight: 850; }

/* on-figure labels (white box, dark text; colored variants) */
#cavIhdMiClinicalTopicContent .cmp-lbl rect { fill: #fff; opacity: .94; stroke: rgba(15, 23, 42, .18); stroke-width: 1; }
#cavIhdMiClinicalTopicContent .cmp-lbl text { font-size: 15px; font-weight: 800; fill: #111111; }
#cavIhdMiClinicalTopicContent .cmp-lbl-dead text { fill: #7f1d1d; }
#cavIhdMiClinicalTopicContent .cmp-lbl-blood text { fill: #b91c1c; }

/* sequence the reveal: defect → flow → labels/compression */
#cavIhdMiClinicalTopicContent .cmp-stage[data-state="comp"] .cmp-step1 { animation: cmp-in .3s ease both; }
#cavIhdMiClinicalTopicContent .cmp-stage[data-state="comp"] .cmp-step2 { animation: cmp-in .35s ease .3s both; }
#cavIhdMiClinicalTopicContent .cmp-stage[data-state="comp"] .cmp-step3 { animation: cmp-in .35s ease .65s both; }
#cavIhdMiClinicalTopicContent .cmp-stage[data-state="comp"] .cmp-flow.cmp-step2 { animation: cmp-in .35s ease .3s both, cmp-flow 0.9s linear .3s infinite, cmp-pulse 1.4s ease-in-out .3s infinite; }
@keyframes cmp-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- caption + beats + pearl ---- */
#cavIhdMiClinicalTopicContent .cmp-caption { margin: 0; color: #111111; font-size: 13.5px; font-weight: 600; line-height: 1.5; text-align: center; padding-left: 0; }
#cavIhdMiClinicalTopicContent .cmp-beat { display: grid; gap: 7px; }
#cavIhdMiClinicalTopicContent .cmp-beat-label { display: flex; align-items: center; gap: 7px; color: #111111; font-size: 15px; font-weight: 850; letter-spacing: -.01em; }
#cavIhdMiClinicalTopicContent .cmp-beat p { margin: 0; color: #111111; font-size: 14.5px; line-height: 1.55; }
#cavIhdMiClinicalTopicContent .cmp-beat p strong { color: #111111; }
#cavIhdMiClinicalTopicContent .cmp-pearl { display: grid; gap: 8px; padding: 13px 15px; border-radius: 12px; background: color-mix(in srgb, var(--mi-accent, #9a1f17) 8%, #fff); border: 1px solid color-mix(in srgb, var(--mi-accent, #9a1f17) 22%, #fff); }
#cavIhdMiClinicalTopicContent .cmp-pearl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#cavIhdMiClinicalTopicContent .cmp-pearl p { margin: 0; color: #111111; font-size: 14.5px; line-height: 1.55; }
#cavIhdMiClinicalTopicContent .cmp-pearl p strong { color: #111111; }
#cavIhdMiClinicalTopicContent .cmp-xlinks { display: flex; flex-wrap: wrap; gap: 10px; }
#cavIhdMiClinicalTopicContent .cmp-xlink {
    appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 4px;
    color: var(--mi-accent, #9a1f17); background: #fff; border: 1.5px solid var(--mi-accent, #9a1f17); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 800;
}
#cavIhdMiClinicalTopicContent .cmp-xlink:hover { background: color-mix(in srgb, var(--mi-accent, #9a1f17) 12%, #fff); }

@media (prefers-reduced-motion: reduce) {
    #cavIhdMiClinicalTopicContent .cmp-chev { transition: none; }
    #cavIhdMiClinicalTopicContent .cmp-flow,
    #cavIhdMiClinicalTopicContent .cmp-stage[data-state="comp"] .cmp-step1,
    #cavIhdMiClinicalTopicContent .cmp-stage[data-state="comp"] .cmp-step2,
    #cavIhdMiClinicalTopicContent .cmp-stage[data-state="comp"] .cmp-step3,
    #cavIhdMiClinicalTopicContent .cmp-stage[data-state="comp"] .cmp-flow.cmp-step2 { animation: none; }
}
@media (max-width: 760px) {
    #cavIhdMiClinicalTopicContent .cmp-badge { font-size: 11px; }
}