/* ============================================================
   CAV PATHOLOGY · IHD · §3 MI Complication Timeline.
   Scoped to #cavIhdMiClinicalTopicContent. Bespoke continuous time
   scrubber: non-linear day axis, category-colored complication bands
   (Gantt-style), a draggable cursor, a ~3–10 d rupture danger zone,
   a live readout, and quiz mode. Bands deep-link to the comp-* cards.
   Single accent via --mi-accent; all reader text #111.
   ============================================================ */

#cavIhdMiClinicalTopicContent .mct { display: grid; gap: 14px; }
#cavIhdMiClinicalTopicContent .mct-intro { margin: 0; font-size: 14px; color: #111111; line-height: 1.5; }
#cavIhdMiClinicalTopicContent .mct-intro strong { color: #111111; }

/* legend */
#cavIhdMiClinicalTopicContent .mct-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
#cavIhdMiClinicalTopicContent .mct-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #111111; }
#cavIhdMiClinicalTopicContent .mct-leg-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* toolbar */
#cavIhdMiClinicalTopicContent .mct-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#cavIhdMiClinicalTopicContent .mct-btn {
    appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; color: #111111;
    background: #fff; border: 1px solid rgba(15, 23, 42, .2); border-radius: 999px; padding: 6px 14px;
}
#cavIhdMiClinicalTopicContent .mct-btn:hover { border-color: var(--mi-accent, #9a1f17); }
#cavIhdMiClinicalTopicContent .mct-btn.is-on { background: var(--mi-accent, #9a1f17); color: #fff; border-color: var(--mi-accent, #9a1f17); }
#cavIhdMiClinicalTopicContent .mct-dayout { margin-left: auto; font-size: 13.5px; color: #111111; }
#cavIhdMiClinicalTopicContent .mct-dayout strong { color: var(--mi-accent, #9a1f17); }

/* chart = names column + track */
#cavIhdMiClinicalTopicContent .mct-chart { display: flex; gap: 10px; align-items: stretch; }
#cavIhdMiClinicalTopicContent .mct-names { flex: 0 0 auto; width: 168px; display: flex; flex-direction: column; gap: 8px; }
#cavIhdMiClinicalTopicContent .mct-axis-spacer { height: 28px; flex: none; }
#cavIhdMiClinicalTopicContent .mct-name {
    height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 6px 0 4px;
    background: transparent; border: none; border-radius: 8px; cursor: pointer; text-align: left; font: inherit;
}
#cavIhdMiClinicalTopicContent .mct-name:hover { background: rgba(15, 23, 42, .045); }
#cavIhdMiClinicalTopicContent .mct-name-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#cavIhdMiClinicalTopicContent .mct-name-txt { font-size: 12.5px; font-weight: 700; color: #111111; line-height: 1.12; }
#cavIhdMiClinicalTopicContent .mct-name.is-live .mct-name-txt { font-weight: 850; }
#cavIhdMiClinicalTopicContent .mct-star { color: #b45309; }

/* track */
#cavIhdMiClinicalTopicContent .mct-track { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#cavIhdMiClinicalTopicContent .mct-axis { position: relative; height: 28px; flex: none; }
#cavIhdMiClinicalTopicContent .mct-tick { position: absolute; bottom: 3px; transform: translateX(-50%); }
#cavIhdMiClinicalTopicContent .mct-tick::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 1px; height: 6px; background: rgba(15, 23, 42, .3); }
#cavIhdMiClinicalTopicContent .mct-tick-l { font-size: 10.5px; font-weight: 750; color: #111111; white-space: nowrap; }

/* lanes (relative coordinate space for bands, zone, cursor) */
#cavIhdMiClinicalTopicContent .mct-lanes { position: relative; display: flex; flex-direction: column; gap: 8px; cursor: pointer; touch-action: none; }
#cavIhdMiClinicalTopicContent .mct-lane { position: relative; height: 30px; border-radius: 8px; background: rgba(15, 23, 42, .045); }

#cavIhdMiClinicalTopicContent .mct-band {
    position: absolute; top: 4px; bottom: 4px; min-width: 8px; padding: 0; border: none; border-radius: 6px; cursor: pointer;
    opacity: .8; overflow: hidden; transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease; z-index: 1;
}
#cavIhdMiClinicalTopicContent .mct-band:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(15, 23, 42, .22); }
#cavIhdMiClinicalTopicContent .mct-band:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
#cavIhdMiClinicalTopicContent .mct-band.is-live { opacity: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 3.5px rgba(17, 17, 17, .55); }
#cavIhdMiClinicalTopicContent .mct-peak { position: absolute; top: 0; bottom: 0; background: rgba(0, 0, 0, .3); }
#cavIhdMiClinicalTopicContent .mct-band.is-peaking .mct-peak { background: rgba(0, 0, 0, .42); }

/* danger zone */
#cavIhdMiClinicalTopicContent .mct-zone {
    position: absolute; top: -3px; bottom: -3px; z-index: 0; pointer-events: none; border-radius: 4px;
    background: rgba(154, 31, 23, .1); border-left: 1px dashed rgba(154, 31, 23, .55); border-right: 1px dashed rgba(154, 31, 23, .55);
}
#cavIhdMiClinicalTopicContent .mct-lanes.is-danger .mct-zone { background: rgba(154, 31, 23, .18); }
/* when the cursor is in the danger zone, the three mechanical ruptures glow */
#cavIhdMiClinicalTopicContent .mct-lanes.is-danger .mct-lane[data-mct-cat="mechanical"] .mct-band {
    opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(154, 31, 23, .85);
}

/* cursor */
#cavIhdMiClinicalTopicContent .mct-cursor { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px solid var(--mi-accent, #9a1f17); z-index: 3; pointer-events: none; }
#cavIhdMiClinicalTopicContent .mct-knob {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%;
    background: var(--mi-accent, #9a1f17); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(15, 23, 42, .45); cursor: grab; pointer-events: auto;
}
#cavIhdMiClinicalTopicContent .mct-knob:focus-visible { outline: 2px solid var(--mi-accent, #9a1f17); outline-offset: 2px; }

/* quiz: hide the complication name labels */
#cavIhdMiClinicalTopicContent .mct.is-quiz .mct-name-txt { visibility: hidden; }

/* zone-explainer callout */
#cavIhdMiClinicalTopicContent .mct-zonelabel {
    font-size: 13px; color: #111111; line-height: 1.5; padding: 11px 13px; border-radius: 10px;
    background: color-mix(in srgb, #9a1f17 7%, #fff); border: 1px solid color-mix(in srgb, #9a1f17 20%, #fff);
}
#cavIhdMiClinicalTopicContent .mct-zonelabel strong { color: #111111; }

/* readout */
#cavIhdMiClinicalTopicContent .mct-readout { display: grid; gap: 8px; }
#cavIhdMiClinicalTopicContent .mct-readhead { font-size: 13px; font-weight: 750; color: #111111; }
#cavIhdMiClinicalTopicContent .mct-readhead strong { color: var(--mi-accent, #9a1f17); }
#cavIhdMiClinicalTopicContent .mct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#cavIhdMiClinicalTopicContent .mct-chip {
    appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 750; color: #111111;
    background: #fff; border: 1px solid var(--c); border-left: 4px solid var(--c); border-radius: 8px; padding: 5px 10px;
    display: inline-flex; align-items: center; gap: 6px;
}
#cavIhdMiClinicalTopicContent .mct-chip:hover { background: color-mix(in srgb, var(--c) 8%, #fff); }
#cavIhdMiClinicalTopicContent .mct-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
#cavIhdMiClinicalTopicContent .mct-chip.is-peaking { background: color-mix(in srgb, var(--c) 13%, #fff); font-weight: 850; }
#cavIhdMiClinicalTopicContent .mct-chip-pk { font-size: 10px; font-weight: 850; color: var(--c); text-transform: uppercase; letter-spacing: .03em; }
#cavIhdMiClinicalTopicContent .mct-none { font-size: 13px; color: #111111; }

/* quiz box */
#cavIhdMiClinicalTopicContent .mct-quizbox {
    display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--mi-accent, #9a1f17) 7%, #fff); border: 1px solid color-mix(in srgb, var(--mi-accent, #9a1f17) 22%, #fff);
}
#cavIhdMiClinicalTopicContent .mct-quiz-q { margin: 0; font-size: 14px; color: #111111; line-height: 1.45; }
#cavIhdMiClinicalTopicContent .mct-quiz-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* cross-link pills */
#cavIhdMiClinicalTopicContent .mct-xlink {
    appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; color: var(--mi-accent, #9a1f17);
    background: #fff; border: 1.5px solid var(--mi-accent, #9a1f17); border-radius: 999px; padding: 5px 12px;
}
#cavIhdMiClinicalTopicContent .mct-xlink:hover { background: color-mix(in srgb, var(--mi-accent, #9a1f17) 12%, #fff); }
#cavIhdMiClinicalTopicContent .mct-xlink-inline { margin-top: 6px; }

/* pearl */
#cavIhdMiClinicalTopicContent .mct-pearl {
    display: grid; gap: 8px; padding: 14px 16px; 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);
}
#cavIhdMiClinicalTopicContent .mct-pearl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#cavIhdMiClinicalTopicContent .mct-pearl-label { font-size: 15px; font-weight: 850; color: #111111; }
#cavIhdMiClinicalTopicContent .mct-pearl-headline { font-size: 13.5px; font-weight: 800; color: var(--mi-accent, #9a1f17); }
#cavIhdMiClinicalTopicContent .mct-pearl p { margin: 0; font-size: 14px; color: #111111; line-height: 1.55; }
#cavIhdMiClinicalTopicContent .mct-pearl p strong { color: #111111; }

/* deep-link flash on the target complication card */
#cavIhdMiClinicalTopicContent .mct-flash { animation: mct-flash 1.1s ease; }
@keyframes mct-flash {
    0%, 100% { box-shadow: 0 6px 18px rgba(15, 23, 42, .05); }
    25%, 60% { box-shadow: 0 0 0 3px var(--mi-accent, #9a1f17); }
}

@media (prefers-reduced-motion: reduce) {
    #cavIhdMiClinicalTopicContent .mct-band { transition: none; }
    #cavIhdMiClinicalTopicContent .mct-flash { animation: none; }
}
@media (max-width: 640px) {
    #cavIhdMiClinicalTopicContent .mct-names { width: 116px; }
    #cavIhdMiClinicalTopicContent .mct-name-txt { font-size: 11.5px; }
}