/* ============================================================
   CAV PATHOLOGY · IHD · §4 "Wavefront of Necrosis"
   Scoped to #cavIhdMiPathologyTopicContent. Reuses the Foundations
   wall (image-overlay lock) with an animated SVG necrosis fill that
   grows endocardium → epicardium over 0–24h. The moving front edge is
   the focal element (luminous, pulses while playing); everything else
   is calm. All reader text #111 on light surfaces.
   ============================================================ */

#cavIhdMiPathologyTopicContent .wf { display: grid; gap: 18px; }

/* framing lead */
#cavIhdMiPathologyTopicContent .wf-lead { padding-left: 15px; border-left: 4px solid var(--mi-accent, #9a1f17); }
#cavIhdMiPathologyTopicContent .wf-lead-eyebrow { font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--mi-accent, #9a1f17); margin-bottom: 5px; }
#cavIhdMiPathologyTopicContent .wf-intro { margin: 0; color: #111111; font-size: 17px; font-weight: 650; line-height: 1.45; letter-spacing: -.01em; }
#cavIhdMiPathologyTopicContent .wf-intro strong { color: #111111; font-weight: 850; }

#cavIhdMiPathologyTopicContent .wf-beat-label { display: flex; align-items: center; gap: 7px; color: #111111; font-size: 17px; font-weight: 850; letter-spacing: -.01em; }

/* ---- hero wall (image-overlay lock) ---- */
#cavIhdMiPathologyTopicContent .wf-hero { display: grid; gap: 10px; }
#cavIhdMiPathologyTopicContent .wf-wall-stage { position: relative; width: 100%; max-width: 760px; margin: 0 auto; }
#cavIhdMiPathologyTopicContent .wf-wall-img { width: 100%; height: auto; display: block; border-radius: 10px; }
#cavIhdMiPathologyTopicContent .wf-wall-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* calm context: area-at-risk outline + direction cue + fixed labels */
#cavIhdMiPathologyTopicContent .wf-risk { fill: none; stroke: rgba(15, 23, 42, .42); stroke-width: 2.5; stroke-dasharray: 12 9; }
#cavIhdMiPathologyTopicContent .wf-necro { fill: #7f1d1d; fill-opacity: .8; }
#cavIhdMiPathologyTopicContent .wf-dir { stroke: rgba(15, 23, 42, .5); stroke-width: 3; }
#cavIhdMiPathologyTopicContent .wf-dir-lbl { fill: #111111; font-size: 22px; font-weight: 800; letter-spacing: .02em; }
#cavIhdMiPathologyTopicContent .wf-lbl rect { fill: #ffffff; opacity: .93; stroke: rgba(15, 23, 42, .14); stroke-width: 1; }
#cavIhdMiPathologyTopicContent .wf-lbl text { fill: #111111; font-size: 25px; font-weight: 800; }

/* the moving front — the focal element (luminous + pulses while playing) */
#cavIhdMiPathologyTopicContent .wf-front { stroke: #fb7185; stroke-width: 10; stroke-linecap: round; transition: opacity .2s ease; }
#cavIhdMiPathologyTopicContent .wf-wall-stage[data-wf-playing] .wf-front { animation: wf-pulse 1s ease-in-out infinite; }
@keyframes wf-pulse { 0%, 100% { stroke-opacity: .7; stroke-width: 9; } 50% { stroke-opacity: 1; stroke-width: 15; } }

/* ---- predict-then-reveal gate ---- */
#cavIhdMiPathologyTopicContent .wf-predict { display: grid; gap: 9px; }
#cavIhdMiPathologyTopicContent .wf-predict-q { color: #111111; font-size: 14.5px; font-weight: 700; }
#cavIhdMiPathologyTopicContent .wf-predict-btns { display: flex; flex-wrap: wrap; gap: 10px; }
#cavIhdMiPathologyTopicContent .wf-pbtn {
    appearance: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 800; color: #111111;
    background: #fff; border: 1.5px solid rgba(15, 23, 42, .25); border-radius: 999px; padding: 7px 16px;
}
#cavIhdMiPathologyTopicContent .wf-pbtn:hover { border-color: var(--mi-accent, #9a1f17); color: var(--mi-accent, #9a1f17); }
#cavIhdMiPathologyTopicContent .wf-answer { padding: 12px 15px; border-radius: 12px; background: #e7f7ee; border: 1px solid #a7e0c0; }
#cavIhdMiPathologyTopicContent .wf-answer-v { font-size: 14.5px; font-weight: 850; color: #111111; margin-bottom: 3px; }
#cavIhdMiPathologyTopicContent .wf-answer p { margin: 0; color: #111111; font-size: 13.5px; line-height: 1.5; }

/* ---- controls (Play/Pause/Reset + draggable track) ---- */
#cavIhdMiPathologyTopicContent .wf-controls { display: grid; gap: 10px; }
#cavIhdMiPathologyTopicContent .wf-ctl-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#cavIhdMiPathologyTopicContent .wf-play, #cavIhdMiPathologyTopicContent .wf-reset {
    appearance: none; cursor: pointer; font: inherit; font-weight: 800; border-radius: 999px;
}
#cavIhdMiPathologyTopicContent .wf-play { background: var(--mi-accent, #9a1f17); color: #fff; border: none; font-size: 13.5px; padding: 8px 18px; }
#cavIhdMiPathologyTopicContent .wf-play:hover { filter: brightness(1.08); }
#cavIhdMiPathologyTopicContent .wf-play:disabled { opacity: .45; cursor: not-allowed; filter: none; }
#cavIhdMiPathologyTopicContent .wf-reset { background: #fff; color: #111111; border: 1.5px solid rgba(15, 23, 42, .25); font-size: 13px; padding: 7px 15px; }
#cavIhdMiPathologyTopicContent .wf-reset:hover { border-color: var(--mi-accent, #9a1f17); }
#cavIhdMiPathologyTopicContent .wf-chip { font-size: 13px; font-weight: 700; color: #111111; background: #fff; border: 1.5px solid rgba(15, 23, 42, .2); border-radius: 999px; padding: 4px 12px; }
#cavIhdMiPathologyTopicContent .wf-chip strong { color: #111111; }

#cavIhdMiPathologyTopicContent .wf-track-area { position: relative; padding: 26px 8px 42px; }
#cavIhdMiPathologyTopicContent .wf-bar { position: relative; height: 14px; border-radius: 999px; background: var(--surface-strong, #eef1f6); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); touch-action: none; }
#cavIhdMiPathologyTopicContent .wf-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #f1b4ac, #7f1d1d); }
#cavIhdMiPathologyTopicContent .wf-handle {
    position: absolute; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 3px solid var(--mi-accent, #9a1f17); box-shadow: 0 3px 8px rgba(15, 23, 42, .25); cursor: grab; padding: 0;
}
#cavIhdMiPathologyTopicContent .wf-handle:active { cursor: grabbing; }
#cavIhdMiPathologyTopicContent .wf-handle:focus-visible { outline: 3px solid color-mix(in srgb, var(--mi-accent, #9a1f17) 40%, #fff); outline-offset: 2px; }

/* emphasis dots above the bar (at depth-category change points) */
#cavIhdMiPathologyTopicContent .wf-events { position: absolute; left: 8px; right: 8px; top: 8px; height: 16px; }
#cavIhdMiPathologyTopicContent .wf-event { position: absolute; transform: translateX(-50%); appearance: none; background: none; border: none; padding: 6px; cursor: help; }
#cavIhdMiPathologyTopicContent .wf-event-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: #9a1f17; box-shadow: 0 0 0 3px #fff; }
#cavIhdMiPathologyTopicContent .wf-event:focus-visible { outline: 2px solid var(--mi-accent, #9a1f17); outline-offset: 2px; border-radius: 6px; }
#cavIhdMiPathologyTopicContent .wf-tip {
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
    width: 230px; max-width: 70vw; z-index: 60; background: #0f172a; color: #fff; text-align: left;
    font-size: 12px; font-weight: 500; line-height: 1.45; padding: 8px 10px; border-radius: 9px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .28); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease;
}
#cavIhdMiPathologyTopicContent .wf-tip::after { content: ""; position: absolute; top: 100%; left: var(--tip-arrow, 50%); transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0f172a; }
#cavIhdMiPathologyTopicContent .wf-event:hover .wf-tip, #cavIhdMiPathologyTopicContent .wf-event:focus .wf-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

#cavIhdMiPathologyTopicContent .wf-ticks { position: absolute; left: 8px; right: 8px; top: 48px; height: 14px; }
#cavIhdMiPathologyTopicContent .wf-tick { position: absolute; transform: translateX(-50%); font-size: 11.5px; font-weight: 700; color: #111111; }
#cavIhdMiPathologyTopicContent .wf-tick::before { content: ""; position: absolute; left: 50%; top: -10px; width: 1px; height: 6px; background: rgba(15, 23, 42, .3); }
/* axis title on its own row BELOW the ticks so the last tick can't overlap it */
#cavIhdMiPathologyTopicContent .wf-axis-label { position: absolute; right: 8px; top: 68px; font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }

/* ---- live readout + payoff ---- */
#cavIhdMiPathologyTopicContent .wf-readout { display: grid; gap: 9px; }
#cavIhdMiPathologyTopicContent .wf-ro-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
#cavIhdMiPathologyTopicContent .wf-ro-label { font-size: 13px; font-weight: 850; color: #111111; letter-spacing: -.01em; }
#cavIhdMiPathologyTopicContent .wf-depth, #cavIhdMiPathologyTopicContent .wf-ecg { font-size: 14px; font-weight: 700; color: #111111; border-radius: 7px; padding: 1px 6px; }
#cavIhdMiPathologyTopicContent .wf-depth.is-flash, #cavIhdMiPathologyTopicContent .wf-ecg.is-flash { animation: wf-flash .6s ease; }
@keyframes wf-flash { 0% { background: color-mix(in srgb, var(--mi-accent, #9a1f17) 38%, #fff); } 100% { background: transparent; } }
#cavIhdMiPathologyTopicContent .wf-payoff {
    margin: 2px 0 0; color: #111111; font-size: 14px; line-height: 1.5; padding: 11px 13px; 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);
}
#cavIhdMiPathologyTopicContent .wf-payoff strong { color: #111111; }
#cavIhdMiPathologyTopicContent .wf-forward { margin: 0; color: #111111; font-size: 13px; line-height: 1.5; }
#cavIhdMiPathologyTopicContent .wf-xlinks { display: flex; flex-wrap: wrap; gap: 10px; }
#cavIhdMiPathologyTopicContent .wf-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;
}
#cavIhdMiPathologyTopicContent .wf-xlink:hover { background: color-mix(in srgb, var(--mi-accent, #9a1f17) 12%, #fff); }

/* ---- pearl ---- */
#cavIhdMiPathologyTopicContent .wf-pearl { padding: 16px 18px; gap: 10px; }
#cavIhdMiPathologyTopicContent .wf-callout-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#cavIhdMiPathologyTopicContent .wf-pearl .solid-text-card__badge { color: var(--mi-accent, #9a1f17); background: #fff; border-color: color-mix(in srgb, var(--mi-accent, #9a1f17) 28%, #fff); }
#cavIhdMiPathologyTopicContent .wf-pearl p { margin: 0; color: #111111; font-size: 14.5px; line-height: 1.55; }
#cavIhdMiPathologyTopicContent .wf-pearl p strong { color: #111111; }

@media (prefers-reduced-motion: reduce) {
    #cavIhdMiPathologyTopicContent .wf-wall-stage[data-wf-playing] .wf-front { animation: none; }
    #cavIhdMiPathologyTopicContent .wf-depth.is-flash, #cavIhdMiPathologyTopicContent .wf-ecg.is-flash { animation: none; }
    #cavIhdMiPathologyTopicContent .wf-front { transition: none; }
}