/* ============================================================
   CAV PATHOLOGY · IHD · §6 "MI Histology Timeline" (centerpiece)
   Scoped to #cavIhdMiPathologyTopicContent. Non-linear phase-zoned
   scrubber + focal H&E image (fixed 751:565 frame) + recognition /
   stage-data panel + rupture-risk band (peaks 3–10 d) + quiz mode +
   shared image-credits modal. All reader text #111 on light surfaces.
   ============================================================ */

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

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

/* ---- scrubber ---- */
#cavIhdMiPathologyTopicContent .hist-clock { display: grid; gap: 8px; }
#cavIhdMiPathologyTopicContent .hist-clock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#cavIhdMiPathologyTopicContent .hist-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 .hist-chip strong { color: #111111; }

#cavIhdMiPathologyTopicContent .hist-track-area { position: relative; padding: 26px 10px 40px; }
#cavIhdMiPathologyTopicContent .hist-bar { position: relative; height: 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1); }
#cavIhdMiPathologyTopicContent .hist-stops { position: absolute; inset: 0; }
#cavIhdMiPathologyTopicContent .hist-stop { position: absolute; top: 50%; transform: translate(-50%, -50%); appearance: none; background: none; border: none; padding: 10px 8px; cursor: pointer; }
#cavIhdMiPathologyTopicContent .hist-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(15, 23, 42, .35); }
#cavIhdMiPathologyTopicContent .hist-stop.is-active .hist-dot { background: var(--mi-accent, #9a1f17); box-shadow: 0 0 0 2px var(--mi-accent, #9a1f17); }
#cavIhdMiPathologyTopicContent .hist-stop:focus-visible { outline: 2px solid var(--mi-accent, #9a1f17); outline-offset: 1px; border-radius: 8px; }
/* Podcheko exam-bucket flag above the stop */
#cavIhdMiPathologyTopicContent .hist-flag { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 8px; height: 10px; background: #6b7280; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }
#cavIhdMiPathologyTopicContent .hist-flag.is-hy { background: var(--mi-accent, #9a1f17); }
#cavIhdMiPathologyTopicContent .hist-tip {
    position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translate(-50%, 4px);
    width: 210px; 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 .hist-tip::after { content: ""; position: absolute; top: 100%; left: var(--tip-arrow, 50%); transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0f172a; }
#cavIhdMiPathologyTopicContent .hist-stop:hover .hist-tip, #cavIhdMiPathologyTopicContent .hist-stop:focus .hist-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

#cavIhdMiPathologyTopicContent .hist-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, .28); cursor: grab; padding: 0; z-index: 2;
}
#cavIhdMiPathologyTopicContent .hist-handle:active { cursor: grabbing; }
#cavIhdMiPathologyTopicContent .hist-handle:focus-visible { outline: 3px solid color-mix(in srgb, var(--mi-accent, #9a1f17) 40%, #fff); outline-offset: 2px; }
#cavIhdMiPathologyTopicContent .hist-ticks { position: absolute; left: 10px; right: 10px; top: 50px; height: 14px; }
#cavIhdMiPathologyTopicContent .hist-tick { position: absolute; transform: translateX(-50%); font-size: 13px; font-weight: 800; color: #111111; white-space: nowrap; }
#cavIhdMiPathologyTopicContent .hist-tick::before { content: ""; position: absolute; left: 50%; top: -9px; width: 1px; height: 5px; background: rgba(15, 23, 42, .3); }

/* ---- controls ---- */
#cavIhdMiPathologyTopicContent .hist-controls { display: flex; flex-wrap: wrap; gap: 8px; }
#cavIhdMiPathologyTopicContent .hist-btn {
    appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; color: #111111;
    background: #fff; border: 1.5px solid rgba(15, 23, 42, .2); border-radius: 999px; padding: 7px 14px;
}
#cavIhdMiPathologyTopicContent .hist-btn:hover { border-color: var(--mi-accent, #9a1f17); }
#cavIhdMiPathologyTopicContent .hist-btn:focus-visible { outline: 2px solid var(--mi-accent, #9a1f17); outline-offset: 2px; }
#cavIhdMiPathologyTopicContent .hist-btn.is-on { background: var(--mi-accent, #9a1f17); border-color: var(--mi-accent, #9a1f17); color: #fff; }

/* ---- hero: image + side panel (image capped so the whole card fits on screen) ---- */
#cavIhdMiPathologyTopicContent .hist-hero { display: grid; grid-template-columns: minmax(0, 520px) minmax(260px, 1fr); gap: 20px; align-items: stretch; }
#cavIhdMiPathologyTopicContent .hist-figure { margin: 0; }
#cavIhdMiPathologyTopicContent .hist-figure-btn { position: relative; appearance: none; display: block; width: 100%; padding: 0; cursor: zoom-in; background: #fff; border: 1px solid rgba(15, 23, 42, .14); border-radius: 12px; overflow: hidden; }
#cavIhdMiPathologyTopicContent .hist-figure-btn:focus-visible { outline: 2px solid var(--mi-accent, #9a1f17); outline-offset: 2px; }
/* fixed frame (shared 751:565 aspect) so the slide doesn't jump between stops */
#cavIhdMiPathologyTopicContent .hist-figure-img { display: block; width: 100%; aspect-ratio: 751 / 565; height: auto; object-fit: cover; background: #f6f3f4; }
#cavIhdMiPathologyTopicContent .hist-stage-badge { position: absolute; left: 10px; top: 10px; background: rgba(15, 23, 42, .82); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
#cavIhdMiPathologyTopicContent .hist-zoom-badge { position: absolute; right: 10px; bottom: 10px; background: rgba(15, 23, 42, .82); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; pointer-events: none; }

#cavIhdMiPathologyTopicContent .hist-side { display: grid; gap: 11px; align-content: center; }
#cavIhdMiPathologyTopicContent .hist-data { display: grid; gap: 9px; }
#cavIhdMiPathologyTopicContent .hist-data-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
/* the time — large + bold (the "when" is a headline) */
#cavIhdMiPathologyTopicContent .hist-data-time { font-size: 20px; font-weight: 850; color: #111111; letter-spacing: -.01em; }
#cavIhdMiPathologyTopicContent .hist-phasetag { display: inline-block; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; }
/* high-yield emphasis (only on the tested high-yield stop) */
#cavIhdMiPathologyTopicContent .hist-emph { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; width: fit-content; }
#cavIhdMiPathologyTopicContent .hist-emph-txt { font-size: 13px; font-weight: 800; color: #111111; }
#cavIhdMiPathologyTopicContent .hist-phase-death { background: #e5e7eb; color: #334155; }
#cavIhdMiPathologyTopicContent .hist-phase-inflammation { background: #fde7c4; color: #92400e; }
#cavIhdMiPathologyTopicContent .hist-phase-demolition { background: #fed0a8; color: #9a3412; }
#cavIhdMiPathologyTopicContent .hist-phase-repair { background: #cfeede; color: #047857; }
#cavIhdMiPathologyTopicContent .hist-phase-scar { background: #e2e8f0; color: #334155; }
/* the dominant cell — the prominent "who's running the show" line */
#cavIhdMiPathologyTopicContent .hist-data-cell { font-size: 25px; font-weight: 850; color: #111111; letter-spacing: -.02em; line-height: 1.12; border-radius: 7px; padding: 1px 5px; }
#cavIhdMiPathologyTopicContent .hist-data-cell.is-flash { animation: hist-flash .65s ease; }
@keyframes hist-flash { 0% { background: color-mix(in srgb, var(--mi-accent, #9a1f17) 34%, #fff); } 100% { background: transparent; } }
#cavIhdMiPathologyTopicContent .hist-recog-h { font-size: 14px; font-weight: 850; color: #111111; margin-bottom: 3px; }
#cavIhdMiPathologyTopicContent .hist-recog p { margin: 0; color: #111111; font-size: 15px; line-height: 1.5; }
#cavIhdMiPathologyTopicContent .hist-recog strong { color: #111111; }
#cavIhdMiPathologyTopicContent .hist-gross { color: #111111; font-size: 13px; line-height: 1.45; }
#cavIhdMiPathologyTopicContent .hist-gross-h { font-weight: 850; }
#cavIhdMiPathologyTopicContent .hist-quiz-q { margin: 0; color: #111111; font-size: 15px; line-height: 1.45; }
#cavIhdMiPathologyTopicContent .hist-quiz-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- rupture-risk band ---- */
#cavIhdMiPathologyTopicContent .hist-risk { display: grid; gap: 8px; padding: 14px 16px; border-radius: 13px; border: 1px solid rgba(15, 23, 42, .14); background: #fff; transition: box-shadow .2s ease, border-color .2s ease; }
#cavIhdMiPathologyTopicContent .hist-risk.is-peak { border-color: var(--mi-accent, #9a1f17); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mi-accent, #9a1f17) 16%, #fff); }
#cavIhdMiPathologyTopicContent .hist-risk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#cavIhdMiPathologyTopicContent .hist-risk-status { font-size: 14px; font-weight: 850; }
#cavIhdMiPathologyTopicContent .hist-risk-meter { height: 12px; border-radius: 999px; background: var(--surface-strong, #eef1f6); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); }
#cavIhdMiPathologyTopicContent .hist-risk-fill { height: 100%; border-radius: 999px; transition: width .25s ease, background .25s ease; }
#cavIhdMiPathologyTopicContent .hist-risk-note { margin: 0; color: #111111; font-size: 13px; line-height: 1.5; }
#cavIhdMiPathologyTopicContent .hist-risk-note strong { color: #111111; }

/* ---- pearl / NBME / forward / credits ---- */
#cavIhdMiPathologyTopicContent .hist-pearl { padding: 16px 18px; gap: 10px; }
#cavIhdMiPathologyTopicContent .hist-callout-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#cavIhdMiPathologyTopicContent .hist-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 .hist-pearl p { margin: 0; color: #111111; font-size: 14.5px; line-height: 1.55; }
#cavIhdMiPathologyTopicContent .hist-pearl p strong { color: #111111; }
#cavIhdMiPathologyTopicContent .hist-nbme { color: #111111; font-size: 13px; }
#cavIhdMiPathologyTopicContent .hist-nbme > summary { cursor: pointer; font-weight: 800; color: #6b7280; }
#cavIhdMiPathologyTopicContent .hist-nbme p { margin: 7px 0 0; color: #111111; line-height: 1.5; }
#cavIhdMiPathologyTopicContent .hist-nbme strong { color: #111111; }
#cavIhdMiPathologyTopicContent .hist-forward { margin: 0; color: #111111; font-size: 13px; line-height: 1.5; }
#cavIhdMiPathologyTopicContent .hist-forward strong { color: #111111; }
#cavIhdMiPathologyTopicContent .hist-foot { display: flex; }
#cavIhdMiPathologyTopicContent .hist-credits-btn, #cavIhdMiPathologyTopicContent .hist-xlink {
    appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 5px;
    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; width: fit-content;
}
#cavIhdMiPathologyTopicContent .hist-credits-btn:hover, #cavIhdMiPathologyTopicContent .hist-xlink:hover { background: color-mix(in srgb, var(--mi-accent, #9a1f17) 12%, #fff); }

/* ---- lightbox + credits modal ---- */
#cavIhdMiPathologyTopicContent .hist-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
#cavIhdMiPathologyTopicContent .hist-lightbox[hidden] { display: none; }
#cavIhdMiPathologyTopicContent .hist-lb-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .72); }
#cavIhdMiPathologyTopicContent .hist-lb-panel { position: relative; z-index: 1; width: 100%; max-width: 940px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); }
#cavIhdMiPathologyTopicContent .hist-lb-x { position: absolute; top: 8px; right: 10px; appearance: none; width: 32px; height: 32px; border: none; border-radius: 999px; background: rgba(15, 23, 42, .06); color: #111; font-size: 20px; line-height: 1; cursor: pointer; }
#cavIhdMiPathologyTopicContent .hist-lb-x:hover { background: rgba(15, 23, 42, .12); }
#cavIhdMiPathologyTopicContent .hist-lb-img { display: block; width: 100%; height: auto; border-radius: 10px; }
#cavIhdMiPathologyTopicContent .hist-lb-desc { margin-top: 10px; color: #111111; font-size: 14px; line-height: 1.55; }
#cavIhdMiPathologyTopicContent .hist-lb-desc strong { color: #111111; }
#cavIhdMiPathologyTopicContent .hist-credits-panel { max-width: 620px; }
#cavIhdMiPathologyTopicContent .hist-credits-title { margin: 0 30px 10px 0; font-size: 17px; color: #111111; }
#cavIhdMiPathologyTopicContent .hist-credit { margin: 0 0 10px; color: #111111; font-size: 13px; line-height: 1.55; }
#cavIhdMiPathologyTopicContent .hist-credit a { color: var(--mi-accent, #9a1f17); }

@media (prefers-reduced-motion: reduce) {
    #cavIhdMiPathologyTopicContent .hist-tip, #cavIhdMiPathologyTopicContent .hist-risk-fill, #cavIhdMiPathologyTopicContent .hist-risk { transition: none; }
    #cavIhdMiPathologyTopicContent .hist-data-cell.is-flash { animation: none; }
}
@media (max-width: 820px) {
    #cavIhdMiPathologyTopicContent .hist-hero { grid-template-columns: 1fr; }
    #cavIhdMiPathologyTopicContent .hist-tick { font-size: 9.5px; }
}