/* ============================================================
   CAV PATHOLOGY · IHD · Coronary Steal interactive
   Scoped to the Angina page (#cavIhdAnginaTopicContent).
   BioRender base (coronary-steal.png, 740×1000) + SVG overlay
   (animated blood flow + branch highlights + at-risk muscle
   darkening), locked to the artwork via a height-controlled stage
   (the 2a heart pattern). One Scenario Selector drives [data-mode];
   the artwork gently zooms toward the bifurcation on change.
   All reader text #111. Cards reuse the shared solid-text-card.
   ============================================================ */

#cavIhdAnginaTopicContent .cs-tags { display: flex; gap: 8px; margin: 6px 0 0; flex-wrap: wrap; }
#cavIhdAnginaTopicContent .cs { margin-top: 14px; }

/* ---- Scenario Selector (sits directly above the diagram) ---- */
#cavIhdAnginaTopicContent .cs-scenario {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    max-width: 460px; margin: 0 auto;
}
#cavIhdAnginaTopicContent .cs-scn {
    appearance: none; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 2px;
    padding: 11px 16px; border-radius: 14px;
    background: var(--surface-soft); border: 1.5px solid var(--line);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#cavIhdAnginaTopicContent .cs-scn:hover { border-color: var(--accent); transform: translateY(-1px); }
#cavIhdAnginaTopicContent .cs-scn-t { font-size: 15px; font-weight: 800; color: #111111; letter-spacing: .01em; }
#cavIhdAnginaTopicContent .cs-scn-s { font-size: 12px; font-weight: 600; color: var(--muted-strong); }
#cavIhdAnginaTopicContent .cs-scn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* selected scenario — Rest = calm accent, Vasodilator = steal-red */
#cavIhdAnginaTopicContent .cs-scn.is-selected { box-shadow: var(--shadow-md); }
#cavIhdAnginaTopicContent .cs-scn[data-cs-mode="rest"].is-selected {
    background: var(--accent); border-color: var(--accent);
}
#cavIhdAnginaTopicContent .cs-scn[data-cs-mode="vasodilator"].is-selected {
    background: #9a1f17; border-color: #9a1f17;
}
#cavIhdAnginaTopicContent .cs-scn.is-selected .cs-scn-t,
#cavIhdAnginaTopicContent .cs-scn.is-selected .cs-scn-s { color: #ffffff; }

/* ---- side-by-side body: diagram (left 60%) + explanations (right 40%) ---- */
#cavIhdAnginaTopicContent .cs-body {
    display: flex; align-items: flex-start; gap: 20px; margin-top: 16px;
}
#cavIhdAnginaTopicContent .cs-left { flex: 0 0 60%; max-width: 60%; min-width: 0; }

/* ---- height-controlled image stage (locks the overlay at any width) ---- */
#cavIhdAnginaTopicContent .cs-frame {
    height: var(--steal-h, 480px); display: flex; justify-content: center;
    margin-top: 0; overflow: hidden; border-radius: 12px;
}
#cavIhdAnginaTopicContent .cs-imgwrap {
    position: relative; height: 100%;
    transform-origin: 52% 36%;            /* the bifurcation — eye lands here on zoom */
    transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
/* anatomical focus: gentle zoom toward the bifurcation on vasodilator */
#cavIhdAnginaTopicContent .cs-stage[data-mode="vasodilator"] .cs-imgwrap { transform: scale(1.08); }
#cavIhdAnginaTopicContent .cs-img { height: 100%; width: auto; display: block; border-radius: 10px; }
#cavIhdAnginaTopicContent .cs-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- branch highlights (vasodilator only) ---- */
#cavIhdAnginaTopicContent .cs-hl {
    fill: none; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
#cavIhdAnginaTopicContent .cs-hl-normal { stroke: #f5c518; stroke-width: 22; }
#cavIhdAnginaTopicContent .cs-hl-stenosed { stroke: #9a6b66; stroke-width: 20; }
/* the normal branch surges (yellow pulse); the stenosed branch fades (steal) */
#cavIhdAnginaTopicContent .cs-stage[data-mode="vasodilator"] .cs-hl-normal {
    opacity: .7; animation: cs-pulse-normal 1.4s ease-in-out infinite;
}
#cavIhdAnginaTopicContent .cs-stage[data-mode="vasodilator"] .cs-hl-stenosed {
    opacity: .5; animation: cs-pulse-steal 1.6s ease-in-out infinite;
}
@keyframes cs-pulse-normal {
    0%, 100% { opacity: .3; stroke-width: 18; }
    50%      { opacity: .85; stroke-width: 28; }
}
@keyframes cs-pulse-steal {
    0%, 100% { opacity: .18; stroke-width: 14; }
    50%      { opacity: .5; stroke-width: 22; }
}

/* at-risk myocardium darkening */
#cavIhdAnginaTopicContent .cs-myo-atrisk { fill: #2b0b06; fill-opacity: 0; transition: fill-opacity 1s ease; }
#cavIhdAnginaTopicContent .cs-stage[data-mode="vasodilator"] .cs-myo-atrisk { fill-opacity: 0.55; }

/* "Ischemic" label — bold white over the darkened at-risk muscle (vasodilator only) */
#cavIhdAnginaTopicContent .cs-ischemic-label {
    fill: #ffffff;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity .6s ease;
}
#cavIhdAnginaTopicContent .cs-stage[data-mode="vasodilator"] .cs-ischemic-label { opacity: 1; }

/* blood cells (RBCs) travel ALONG the traced paths via CSS motion-path —
   the coordinates are the "space" the cells move through */
#cavIhdAnginaTopicContent .cs-cell {
    offset-rotate: auto;
    animation-name: cs-cell-move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* base speed = state-driven --cs-dur, multiplied by a per-cell --cs-spd jitter */
    animation-duration: calc(var(--cs-dur, 4s) * var(--cs-spd, 1));
    transition: opacity .4s ease;
}
@keyframes cs-cell-move { from { offset-distance: 0%; } to { offset-distance: 100%; } }
#cavIhdAnginaTopicContent .cs-rbc { fill: #c0392b; }
#cavIhdAnginaTopicContent .cs-rbc-core { fill: #e3837b; }   /* central pallor of a biconcave disc */

#cavIhdAnginaTopicContent .cs-cell-normal { --cs-dur: 4s; opacity: 0.9; }
#cavIhdAnginaTopicContent .cs-cell-stenosed { --cs-dur: 5.5s; opacity: 0.9; }
/* vasodilator: cells surge through the normal bed, crawl + thin out in the stenosed branch (the steal) */
#cavIhdAnginaTopicContent .cs-stage[data-mode="vasodilator"] .cs-cell-normal { --cs-dur: 1.8s; opacity: 1; }
#cavIhdAnginaTopicContent .cs-stage[data-mode="vasodilator"] .cs-cell-stenosed { --cs-dur: 12s; opacity: 0.4; }

/* caption */
#cavIhdAnginaTopicContent .cs-caption {
    color: #111111; font-size: 14px; font-weight: 600; line-height: 1.55;
    margin: 14px 0 0; padding-left: 12px; border-left: 3px solid var(--accent);
}
#cavIhdAnginaTopicContent .cs-stage[data-mode="vasodilator"] ~ .cs-caption { border-left-color: #9a1f17; }

/* ---- right column: teaching cards (shared solid-text-card; body #111) ----
   Narrow column → stacked, compact, scannable. Top aligns with the diagram.
   Capped to the diagram height; scrolls internally so it never pushes the
   page down. Only the selected scenario's cards render; they fade in on swap. */
#cavIhdAnginaTopicContent .cs-cards {
    flex: 1 1 40%; min-width: 0; align-self: flex-start;
    height: var(--steal-h, 480px); overflow-y: auto;
    display: grid; grid-template-columns: 1fr; grid-auto-rows: max-content;
    align-content: center;            /* center the cards vertically against the image */
    gap: 12px; margin-top: 0; padding-right: 2px;
}
#cavIhdAnginaTopicContent .cs-card { animation: cs-card-in .35s ease both; padding: 13px 15px; }
/* bold, easy-to-scan headers for the narrow column */
#cavIhdAnginaTopicContent .cs-cards .solid-text-card__badge {
    font-weight: 800; letter-spacing: .06em;
}
#cavIhdAnginaTopicContent .cs-cards .cs-card h4 { font-size: 14px; }
#cavIhdAnginaTopicContent .cs-card p { color: #111111; font-size: 14.5px; line-height: 1.5; }
@keyframes cs-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
    /* stack the columns; release the height cap so the right column flows */
    #cavIhdAnginaTopicContent .cs-body { flex-direction: column; gap: 14px; }
    #cavIhdAnginaTopicContent .cs-left { flex-basis: auto; max-width: none; }
    #cavIhdAnginaTopicContent .cs-frame { height: var(--steal-h-sm, 380px); }
    #cavIhdAnginaTopicContent .cs-scenario { max-width: none; }
    #cavIhdAnginaTopicContent .cs-cards { height: auto; overflow: visible; align-content: start; }
}
@media (prefers-reduced-motion: reduce) {
    /* no motion: cells sit statically spread; show static end-states */
    #cavIhdAnginaTopicContent .cs-cell { animation: none; }
    #cavIhdAnginaTopicContent .cs-hl { animation: none !important; }
    #cavIhdAnginaTopicContent .cs-card { animation: none; }
    #cavIhdAnginaTopicContent .cs-cell,
    #cavIhdAnginaTopicContent .cs-imgwrap,
    #cavIhdAnginaTopicContent .cs-myo-atrisk,
    #cavIhdAnginaTopicContent .cs-ischemic-label { transition: none; }
}