/* ============================================================
   CAV PATHOLOGY · IHD · "The Heart's Predicament" interactive
   Scoped to the Foundations page. The widget renders on a LIGHT
   surface so every teaching sentence (#111) is fully legible in
   light or dark mode. Colour is used only for structure labels and
   chips — never for the teaching prose.
   ============================================================ */

#cavIhdFoundationsTopicContent .ihdp-intro { color: #111111; font-size: 15px; line-height: 1.6; margin: 8px 0 14px; max-width: 70ch; }

#cavIhdFoundationsTopicContent .ihdp {
    --ihdp-ink: #111111;
    --ihdp-demand: #d6453d;
    --ihdp-supply: #1e9e6a;
    --ihdp-flow: #1e63c8;
    color: #111111;
}

/* light stage so black text always reads */
#cavIhdFoundationsTopicContent .ihdp-stage {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    padding: 18px 18px 16px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

#cavIhdFoundationsTopicContent .ihdp-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}
#cavIhdFoundationsTopicContent .ihdp-svg { width: 100%; max-height: 360px; height: auto; display: block; }

/* readout chips */
#cavIhdFoundationsTopicContent .ihdp-readout { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
#cavIhdFoundationsTopicContent .ihdp-chip {
    font-size: 12px; font-weight: 700; color: #111111;
    background: #eef1f6; border-radius: 999px; padding: 4px 11px;
}
#cavIhdFoundationsTopicContent .ihdp-chip-warn { background: rgba(214, 69, 61, 0.14); color: #9a1f17; }
#cavIhdFoundationsTopicContent .ihdp-chip-ok { background: rgba(30, 158, 106, 0.15); color: #0f6c47; }

/* ---- step 1 balance ---- */
#cavIhdFoundationsTopicContent .ihdp-post,
#cavIhdFoundationsTopicContent .ihdp-beam,
#cavIhdFoundationsTopicContent .ihdp-hang,
#cavIhdFoundationsTopicContent .ihdp-pan { stroke: #475467; fill: none; }
#cavIhdFoundationsTopicContent .ihdp-beam { stroke-width: 4; stroke-linecap: round; transition: all .25s ease; }
#cavIhdFoundationsTopicContent .ihdp-post { stroke-width: 4; }
#cavIhdFoundationsTopicContent .ihdp-hang { stroke-width: 1.5; transition: all .25s ease; }
#cavIhdFoundationsTopicContent .ihdp-pan { stroke-width: 3; stroke-linecap: round; transition: all .25s ease; }
#cavIhdFoundationsTopicContent .ihdp-base { fill: #475467; }
#cavIhdFoundationsTopicContent .ihdp-pivot { fill: #475467; }
#cavIhdFoundationsTopicContent .ihdp-weight { fill: var(--ihdp-demand); transition: all .25s ease; }
#cavIhdFoundationsTopicContent .ihdp-weight.w1 { fill: #e0635c; }
#cavIhdFoundationsTopicContent .ihdp-weight.w2 { fill: #ea8480; }
#cavIhdFoundationsTopicContent .ihdp-supply { fill: var(--ihdp-supply); }
#cavIhdFoundationsTopicContent .ihdp-wlabel { fill: #334155; font-size: 9px; font-weight: 700; }
#cavIhdFoundationsTopicContent .ihdp-slabel { fill: #0f6c47; font-size: 9px; font-weight: 700; }
#cavIhdFoundationsTopicContent .ihdp-pan-name { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
#cavIhdFoundationsTopicContent .ihdp-demand { fill: var(--ihdp-demand); }
#cavIhdFoundationsTopicContent .ihdp-supply-name { fill: var(--ihdp-supply); }
#cavIhdFoundationsTopicContent .ihdp-flag rect { fill: var(--ihdp-demand); }
#cavIhdFoundationsTopicContent .ihdp-flag text { fill: #ffffff; font-size: 12px; font-weight: 800; }

/* ---- step 2 flow graph ---- */
#cavIhdFoundationsTopicContent .ihdp-systole { fill: rgba(214, 69, 61, 0.10); transition: all .25s ease; }
#cavIhdFoundationsTopicContent .ihdp-diastole { fill: rgba(30, 158, 106, 0.14); transition: all .25s ease; }
#cavIhdFoundationsTopicContent .ihdp-flowcurve { fill: none; stroke: var(--ihdp-flow); stroke-width: 3; stroke-linecap: round; transition: all .25s ease; }
#cavIhdFoundationsTopicContent .ihdp-axis { stroke: #94a3b8; stroke-width: 1.5; }
#cavIhdFoundationsTopicContent .ihdp-axlabel { fill: #334155; font-size: 11px; font-weight: 700; }
#cavIhdFoundationsTopicContent .ihdp-sys-label { fill: #9a1f17; }
#cavIhdFoundationsTopicContent .ihdp-dia-label { fill: #0f6c47; }

/* ---- step 3 wall overlay (locked to 1400x520 image) ---- */
#cavIhdFoundationsTopicContent .ihdp-wall-stage { position: relative; width: 100%; max-width: 760px; margin: 0 auto; }
#cavIhdFoundationsTopicContent .ihdp-wall-img { width: 100%; height: auto; display: block; border-radius: 10px; }
#cavIhdFoundationsTopicContent .ihdp-wall-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#cavIhdFoundationsTopicContent .ihdp-perf { stroke: var(--ihdp-flow); stroke-width: 5; }
#cavIhdFoundationsTopicContent .ihdp-wall-svg rect[fill="#000"] { transition: opacity .25s ease; }
#cavIhdFoundationsTopicContent .ihdp-wall-lbl rect { fill: rgba(255, 255, 255, 0.86); stroke: rgba(15,23,42,0.12); stroke-width: 1; }
#cavIhdFoundationsTopicContent .ihdp-wall-lbl text { fill: #111111; font-size: 22px; font-weight: 800; }

/* ---- step 4 mini-wall + ECG ---- */
#cavIhdFoundationsTopicContent .ihdp-mw-frame { fill: none; stroke: #94a3b8; stroke-width: 1.5; }
#cavIhdFoundationsTopicContent .ihdp-mw-myo { fill: #f1c9b6; }
#cavIhdFoundationsTopicContent .ihdp-mw-cap { fill: #334155; font-size: 11px; font-weight: 700; }
#cavIhdFoundationsTopicContent .ihdp-mw-dark-sub { fill: #000; opacity: 0.6; transition: opacity .3s ease; }
#cavIhdFoundationsTopicContent .ihdp-mw-dark-full { fill: #000; opacity: 0; transition: opacity .3s ease; }
#cavIhdFoundationsTopicContent [data-transmural="true"] .ihdp-mw-dark-sub { opacity: 0; }
#cavIhdFoundationsTopicContent [data-transmural="true"] .ihdp-mw-dark-full { opacity: 0.62; }
#cavIhdFoundationsTopicContent .ihdp-w2e { stroke: #555; stroke-width: 2; }
#cavIhdFoundationsTopicContent .ihdp-ecg-base { stroke: #cbd5e1; stroke-width: 1.5; }
#cavIhdFoundationsTopicContent .ihdp-ecg-wave { fill: none; stroke: #111111; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
/* ST segment: depression (down) by default, elevation (up) when transmural */
#cavIhdFoundationsTopicContent .ihdp-stseg { transform: translateY(16px); transition: transform .3s ease; }
#cavIhdFoundationsTopicContent [data-transmural="true"] .ihdp-stseg { transform: translateY(-22px); }
#cavIhdFoundationsTopicContent .ihdp-ecg-tag { font-size: 13px; font-weight: 800; fill: #1e63c8; transition: fill .3s ease; }
#cavIhdFoundationsTopicContent [data-transmural="true"] .ihdp-ecg-tag { fill: #9a1f17; }

/* ---- control row ---- */
#cavIhdFoundationsTopicContent .ihdp-control { margin-top: 14px; min-height: 40px; display: flex; justify-content: center; }
#cavIhdFoundationsTopicContent .ihdp-slider-row { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 460px; }
#cavIhdFoundationsTopicContent .ihdp-slider-label { font-size: 13px; font-weight: 700; color: #111111; white-space: nowrap; }
#cavIhdFoundationsTopicContent .ihdp-slider { flex: 1; accent-color: var(--accent); }
#cavIhdFoundationsTopicContent .ihdp-slider-val { font-size: 13px; font-weight: 800; color: #111111; min-width: 56px; text-align: right; }
#cavIhdFoundationsTopicContent .ihdp-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* toggle */
#cavIhdFoundationsTopicContent .ihdp-toggle-row { display: flex; align-items: center; gap: 12px; }
#cavIhdFoundationsTopicContent .ihdp-toggle-label { font-size: 13px; font-weight: 700; color: #111111; }
#cavIhdFoundationsTopicContent .ihdp-toggle { width: 52px; height: 28px; border-radius: 999px; border: none; background: #cbd5e1; position: relative; cursor: pointer; transition: background .2s ease; }
#cavIhdFoundationsTopicContent .ihdp-toggle.is-on { background: #9a1f17; }
#cavIhdFoundationsTopicContent .ihdp-toggle-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
#cavIhdFoundationsTopicContent .ihdp-toggle.is-on .ihdp-toggle-knob { transform: translateX(24px); }
#cavIhdFoundationsTopicContent .ihdp-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- teaching text (ALWAYS #111) ---- */
#cavIhdFoundationsTopicContent .ihdp-teach { margin-top: 14px; }
#cavIhdFoundationsTopicContent .ihdp-teach-text { color: #111111 !important; font-size: 15px; line-height: 1.65; margin: 0; }
#cavIhdFoundationsTopicContent .ihdp-teach-text strong { color: #111111; }

/* ---- retrieval ---- */
#cavIhdFoundationsTopicContent .ihdp-retrieval { margin-top: 16px; display: grid; gap: 14px; }
#cavIhdFoundationsTopicContent .ihdp-q-prompt { color: #111111; font-size: 14px; font-weight: 700; margin: 0 0 8px; }
#cavIhdFoundationsTopicContent .ihdp-opts { display: flex; gap: 8px; flex-wrap: wrap; }
#cavIhdFoundationsTopicContent .ihdp-opt {
    border: 1.5px solid rgba(15, 23, 42, 0.18); background: #fff; color: #111111;
    border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
#cavIhdFoundationsTopicContent .ihdp-opt:hover:not(:disabled) { border-color: var(--accent); }
#cavIhdFoundationsTopicContent .ihdp-opt.is-correct { border-color: #0f6c47; background: rgba(30, 158, 106, 0.15); color: #0f6c47; }
#cavIhdFoundationsTopicContent .ihdp-opt.is-wrong { border-color: #9a1f17; background: rgba(214, 69, 61, 0.12); color: #9a1f17; }
#cavIhdFoundationsTopicContent .ihdp-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#cavIhdFoundationsTopicContent .ihdp-reveal { color: #111111; font-size: 13.5px; line-height: 1.55; margin: 8px 0 0; }
#cavIhdFoundationsTopicContent .ihdp-closing { color: #111111; font-size: 14px; font-weight: 700; line-height: 1.6; margin: 4px 0 0; padding: 12px 14px; background: #f3f6fb; border-radius: 12px; border-left: 4px solid var(--accent); }

/* ---- nav ---- */
#cavIhdFoundationsTopicContent .ihdp-nav { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
#cavIhdFoundationsTopicContent .ihdp-navbtn {
    border: 1px solid rgba(15, 23, 42, 0.14); background: var(--surface-strong); color: #111111;
    border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
}
#cavIhdFoundationsTopicContent .ihdp-next { background: var(--accent); color: #fff; border-color: var(--accent); }
#cavIhdFoundationsTopicContent .ihdp-navbtn:disabled { opacity: 0.4; cursor: default; }
#cavIhdFoundationsTopicContent .ihdp-navbtn:focus-visible,
#cavIhdFoundationsTopicContent .ihdp-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* bottom step indicator — titled steps inside a blue bubble */
#cavIhdFoundationsTopicContent .ihdp-dots {
    display: flex; gap: 4px; margin: 0 auto; flex-wrap: wrap; justify-content: center;
    background: rgba(10, 132, 255, 0.08);
    border: 1px solid rgba(10, 132, 255, 0.20);
    border-radius: 999px;
    padding: 5px 8px;
}
#cavIhdFoundationsTopicContent .ihdp-step {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; background: transparent; cursor: pointer;
    padding: 4px 10px; border-radius: 999px; color: var(--muted-strong);
    transition: background .15s ease, color .15s ease;
}
#cavIhdFoundationsTopicContent .ihdp-step-num {
    width: 18px; height: 18px; border-radius: 50%;
    background: #cbd5e1; color: #fff; font-size: 11px; font-weight: 800;
    display: grid; place-items: center; flex: none;
}
#cavIhdFoundationsTopicContent .ihdp-step-title { font-size: 12px; font-weight: 700; white-space: nowrap; }
#cavIhdFoundationsTopicContent .ihdp-step.is-active { background: var(--accent); }
#cavIhdFoundationsTopicContent .ihdp-step.is-active .ihdp-step-num { background: #fff; color: var(--accent-strong); }
#cavIhdFoundationsTopicContent .ihdp-step.is-active .ihdp-step-title { color: #fff; }
#cavIhdFoundationsTopicContent .ihdp-step:hover:not(.is-active) { color: var(--text); }
#cavIhdFoundationsTopicContent .ihdp-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#cavIhdFoundationsTopicContent .ihdp-reset { border: none; background: transparent; color: var(--muted-strong); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; }

@media (max-width: 700px) {
    #cavIhdFoundationsTopicContent .ihdp-slider-row { flex-wrap: wrap; }
    #cavIhdFoundationsTopicContent .ihdp-nav { flex-wrap: wrap; justify-content: center; }
    #cavIhdFoundationsTopicContent .ihdp-reset { width: 100%; text-align: center; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    #cavIhdFoundationsTopicContent .ihdp-beam,
    #cavIhdFoundationsTopicContent .ihdp-hang,
    #cavIhdFoundationsTopicContent .ihdp-pan,
    #cavIhdFoundationsTopicContent .ihdp-weight,
    #cavIhdFoundationsTopicContent .ihdp-systole,
    #cavIhdFoundationsTopicContent .ihdp-diastole,
    #cavIhdFoundationsTopicContent .ihdp-flowcurve,
    #cavIhdFoundationsTopicContent .ihdp-wall-svg rect[fill="#000"],
    #cavIhdFoundationsTopicContent .ihdp-mw-dark-sub,
    #cavIhdFoundationsTopicContent .ihdp-mw-dark-full,
    #cavIhdFoundationsTopicContent .ihdp-stseg,
    #cavIhdFoundationsTopicContent .ihdp-ecg-tag,
    #cavIhdFoundationsTopicContent .ihdp-toggle,
    #cavIhdFoundationsTopicContent .ihdp-toggle-knob { transition: none; }
}