/* ============================================================
   CAV PATHOLOGY · IHD · §2 "Cardiac Enzyme Curve" (Page 4)
   Scoped to #cavIhdMiClinicalTopicContent. Inline-SVG plot of the four
   cardiac markers with a draggable cursor, per-marker toggles, live
   readout, the reinfarction predict-then-reveal, and the LDH-flip note.
   Troponin dominant; curves distinguished by color AND line style.
   All reader text #111 on light surfaces.
   ============================================================ */

/* page accent + uniform section spacing (first section built on Page 4) */
#cavIhdMiClinicalTopicContent { --mi-accent: #9a1f17; display: grid; gap: 20px; }
#cavIhdMiClinicalTopicContent[hidden] { display: none; }

#cavIhdMiClinicalTopicContent .ec { display: grid; gap: 14px; }
#cavIhdMiClinicalTopicContent .ec-lead { padding-left: 15px; border-left: 4px solid var(--mi-accent); }
#cavIhdMiClinicalTopicContent .ec-lead-eyebrow { font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--mi-accent); margin-bottom: 5px; }
#cavIhdMiClinicalTopicContent .ec-intro { margin: 0; color: #111111; font-size: 17px; font-weight: 650; line-height: 1.45; letter-spacing: -.01em; }
#cavIhdMiClinicalTopicContent .ec-intro strong { color: #111111; font-weight: 850; }
#cavIhdMiClinicalTopicContent .ec-beat-label { display: flex; align-items: center; gap: 7px; color: #111111; font-size: 16px; font-weight: 850; letter-spacing: -.01em; }

/* ---- marker toggles (also the legend) ---- */
#cavIhdMiClinicalTopicContent .ec-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
#cavIhdMiClinicalTopicContent .ec-toggle {
    appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 800; color: #111111; background: #fff; border: 1.5px solid rgba(15, 23, 42, .2);
    border-radius: 999px; padding: 6px 13px;
}
#cavIhdMiClinicalTopicContent .ec-toggle.is-on { border-color: var(--mk); box-shadow: inset 0 0 0 1px var(--mk); }
#cavIhdMiClinicalTopicContent .ec-toggle[aria-pressed="false"] { opacity: .5; }
#cavIhdMiClinicalTopicContent .ec-toggle:focus-visible { outline: 2px solid var(--mi-accent); outline-offset: 2px; }
#cavIhdMiClinicalTopicContent .ec-swatch { width: 16px; height: 10px; border-radius: 2px; flex: none; }
#cavIhdMiClinicalTopicContent .ec-swatch-trop { background: #b91c1c; }
#cavIhdMiClinicalTopicContent .ec-swatch-ckmb { background: repeating-linear-gradient(90deg, #b45309 0 5px, transparent 5px 8px); }
#cavIhdMiClinicalTopicContent .ec-swatch-ldh { background: repeating-linear-gradient(90deg, #0f766e 0 2px, transparent 2px 5px); }
#cavIhdMiClinicalTopicContent .ec-swatch-ast { background: repeating-linear-gradient(90deg, #475569 0 7px, transparent 7px 9px, #475569 9px 11px, transparent 11px 14px); }

/* ---- plot ---- */
#cavIhdMiClinicalTopicContent .ec-stage { position: relative; width: 100%; max-width: 760px; margin: 0 auto; }
#cavIhdMiClinicalTopicContent .ec-svg { display: block; width: 100%; height: auto; background: #fff; border: 1px solid rgba(15, 23, 42, .12); border-radius: 12px; }
#cavIhdMiClinicalTopicContent .ec-axis { stroke: rgba(15, 23, 42, .35); stroke-width: 1.5; }
#cavIhdMiClinicalTopicContent .ec-tick { stroke: rgba(15, 23, 42, .3); stroke-width: 1; }
#cavIhdMiClinicalTopicContent .ec-tick-lbl, #cavIhdMiClinicalTopicContent .ec-yaxis-lbl { fill: #111111; font-size: 12px; font-weight: 700; }
#cavIhdMiClinicalTopicContent .ec-yaxis-lbl { font-size: 11px; fill: #6b7280; }
#cavIhdMiClinicalTopicContent .ec-thresh { stroke: #6b7280; stroke-width: 1.5; stroke-dasharray: 5 4; }
#cavIhdMiClinicalTopicContent .ec-thresh-lbl { fill: #6b7280; font-size: 11px; font-weight: 700; }
#cavIhdMiClinicalTopicContent .ec-cursor { stroke: var(--mi-accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
#cavIhdMiClinicalTopicContent .ec-curve { transition: opacity .2s ease; }
/* reinfarction: flash the CK-MB line when its second peak appears */
#cavIhdMiClinicalTopicContent .ec.is-reinf .ec-curve-ckmb { animation: ec-flash 1s ease-in-out 2; }
@keyframes ec-flash { 0%, 100% { stroke-width: 2.6px; } 50% { stroke-width: 6px; } }
/* per-marker hide */
#cavIhdMiClinicalTopicContent .ec-off-trop .ec-curve-trop, #cavIhdMiClinicalTopicContent .ec-off-trop .ec-dot-trop,
#cavIhdMiClinicalTopicContent .ec-off-ckmb .ec-curve-ckmb, #cavIhdMiClinicalTopicContent .ec-off-ckmb .ec-dot-ckmb,
#cavIhdMiClinicalTopicContent .ec-off-ldh .ec-curve-ldh, #cavIhdMiClinicalTopicContent .ec-off-ldh .ec-dot-ldh,
#cavIhdMiClinicalTopicContent .ec-off-ast .ec-curve-ast, #cavIhdMiClinicalTopicContent .ec-off-ast .ec-dot-ast { display: none; }

#cavIhdMiClinicalTopicContent .ec-handle {
    position: absolute; top: 4px; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 3px solid var(--mi-accent); box-shadow: 0 2px 6px rgba(15, 23, 42, .3); cursor: grab; padding: 0;
}
#cavIhdMiClinicalTopicContent .ec-handle:active { cursor: grabbing; }
#cavIhdMiClinicalTopicContent .ec-handle:focus-visible { outline: 3px solid color-mix(in srgb, var(--mi-accent) 40%, #fff); outline-offset: 2px; }
#cavIhdMiClinicalTopicContent .ec-axis-cap { text-align: center; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-top: -6px; }

/* ---- live readout ---- */
#cavIhdMiClinicalTopicContent .ec-readout { display: grid; gap: 9px; }
#cavIhdMiClinicalTopicContent .ec-chip { width: fit-content; font-size: 13px; font-weight: 700; color: #111111; background: #fff; border: 1.5px solid var(--mi-accent); border-radius: 999px; padding: 4px 12px; }
#cavIhdMiClinicalTopicContent .ec-chip strong { color: #111111; }
#cavIhdMiClinicalTopicContent .ec-moment {
    margin: 0; color: #111111; font-size: 14.5px; line-height: 1.5; padding: 11px 13px; border-radius: 12px;
    background: color-mix(in srgb, var(--mi-accent) 8%, #fff); border: 1px solid color-mix(in srgb, var(--mi-accent) 22%, #fff);
}
#cavIhdMiClinicalTopicContent .ec-moment strong { color: #111111; }
#cavIhdMiClinicalTopicContent .ec-status { display: flex; flex-wrap: wrap; gap: 8px 16px; }
#cavIhdMiClinicalTopicContent .ec-status-row { display: inline-flex; align-items: center; gap: 7px; }
#cavIhdMiClinicalTopicContent .ec-status-name { font-size: 13px; font-weight: 800; color: #111111; }
#cavIhdMiClinicalTopicContent .ec-status-badge { font-size: 13px; font-weight: 850; }

/* ---- reinfarction predict-then-reveal ---- */
#cavIhdMiClinicalTopicContent .ec-reinf { display: grid; gap: 9px; padding: 14px 16px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--mi-accent) 24%, #fff); background: color-mix(in srgb, var(--mi-accent) 5%, #fff); }
#cavIhdMiClinicalTopicContent .ec-reinf-q { margin: 0; color: #111111; font-size: 14.5px; line-height: 1.45; }
#cavIhdMiClinicalTopicContent .ec-reinf-q strong { color: #111111; }
#cavIhdMiClinicalTopicContent .ec-reinf-btns { display: flex; flex-wrap: wrap; gap: 8px; }
#cavIhdMiClinicalTopicContent .ec-btn {
    appearance: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 800; border-radius: 999px; padding: 7px 16px;
    background: #fff; color: #111111; border: 1.5px solid rgba(15, 23, 42, .25); width: fit-content;
}
#cavIhdMiClinicalTopicContent .ec-btn:hover { border-color: var(--mi-accent); color: var(--mi-accent); }
#cavIhdMiClinicalTopicContent .ec-reinf-go { background: var(--mi-accent); color: #fff; border: none; }
#cavIhdMiClinicalTopicContent .ec-reinf-go:hover { color: #fff; filter: brightness(1.08); }
#cavIhdMiClinicalTopicContent .ec-reinf-ans { padding: 12px 14px; border-radius: 11px; }
#cavIhdMiClinicalTopicContent .ec-reinf-ans.is-good { background: #e7f7ee; border: 1px solid #a7e0c0; }
#cavIhdMiClinicalTopicContent .ec-reinf-ans.is-bad { background: #fdecea; border: 1px solid #f3b4ad; }
#cavIhdMiClinicalTopicContent .ec-reinf-verdict { font-size: 15px; font-weight: 850; color: #111111; margin-bottom: 4px; }
#cavIhdMiClinicalTopicContent .ec-reinf-ans p { margin: 0; color: #111111; font-size: 14px; line-height: 1.5; }
#cavIhdMiClinicalTopicContent .ec-reinf-ans strong { color: #111111; }

/* ---- LDH flip note ---- */
#cavIhdMiClinicalTopicContent .ec-flip { color: #111111; font-size: 13px; }
#cavIhdMiClinicalTopicContent .ec-flip > summary { cursor: pointer; font-weight: 800; color: var(--mi-accent); }
#cavIhdMiClinicalTopicContent .ec-flip p { margin: 7px 0 0; color: #111111; line-height: 1.5; }
#cavIhdMiClinicalTopicContent .ec-flip strong { color: #111111; }

/* ---- pearl + cross-links ---- */
#cavIhdMiClinicalTopicContent .ec-pearl { padding: 16px 18px; gap: 10px; }
#cavIhdMiClinicalTopicContent .ec-callout-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#cavIhdMiClinicalTopicContent .ec-pearl .solid-text-card__badge { color: var(--mi-accent); background: #fff; border-color: color-mix(in srgb, var(--mi-accent) 28%, #fff); }
#cavIhdMiClinicalTopicContent .ec-pearl p { margin: 0; color: #111111; font-size: 14.5px; line-height: 1.55; }
#cavIhdMiClinicalTopicContent .ec-pearl p strong { color: #111111; }
#cavIhdMiClinicalTopicContent .ec-xlinks { display: flex; flex-wrap: wrap; gap: 10px; }
#cavIhdMiClinicalTopicContent .ec-xlink {
    appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 4px;
    color: var(--mi-accent); background: #fff; border: 1.5px solid var(--mi-accent); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 800;
}
#cavIhdMiClinicalTopicContent .ec-xlink:hover { background: color-mix(in srgb, var(--mi-accent) 12%, #fff); }

@media (prefers-reduced-motion: reduce) {
    #cavIhdMiClinicalTopicContent .ec-curve { transition: none; }
    #cavIhdMiClinicalTopicContent .ec.is-reinf .ec-curve-ckmb { animation: none; }
}