/* ============================================================
   CAV PATHOLOGY · IHD · §0 Topic Roadmap Strip
   Scoped to #cavIhdMiPathologyTopicContent. Quiet "you are here"
   timeline: 5 compact step cards in a row with sequence connectors;
   tapping one expands its detail below in the shared solid-text-card
   holder (one open at a time). 5-across on desktop, snap-scroll on
   phones; detail panel always full-width. All reader text #111.
   ============================================================ */

#cavIhdMiPathologyTopicContent .mrm { display: grid; gap: 12px; }
#cavIhdMiPathologyTopicContent .mrm-head { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 850; color: #111111; letter-spacing: -.01em; }

/* ---- the strip ---- */
#cavIhdMiPathologyTopicContent .mrm-strip { display: flex; align-items: stretch; gap: 6px; }
#cavIhdMiPathologyTopicContent .mrm-conn { flex: none; align-self: center; color: #9ca3af; font-size: 15px; font-weight: 700; }

#cavIhdMiPathologyTopicContent .mrm-step {
    flex: 1 1 0; min-width: 150px; display: flex; align-items: flex-start; gap: 9px; text-align: left;
    appearance: none; cursor: pointer; font: inherit; padding: 10px 12px; border-radius: 12px;
    background: #fff; border: 1px solid rgba(15, 23, 42, .14);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#cavIhdMiPathologyTopicContent .mrm-step:hover { border-color: color-mix(in srgb, var(--mi-accent, #9a1f17) 45%, #fff); }
#cavIhdMiPathologyTopicContent .mrm-step:focus-visible { outline: 2px solid var(--mi-accent, #9a1f17); outline-offset: 2px; }
#cavIhdMiPathologyTopicContent .mrm-step.is-active {
    border-color: var(--mi-accent, #9a1f17);
    background: color-mix(in srgb, var(--mi-accent, #9a1f17) 7%, #fff);
    box-shadow: inset 0 -3px 0 var(--mi-accent, #9a1f17);
}
#cavIhdMiPathologyTopicContent .mrm-step-n {
    flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-strong, #eef1f6); color: #111111; font-size: 13px; font-weight: 850;
}
#cavIhdMiPathologyTopicContent .mrm-step.is-active .mrm-step-n { background: var(--mi-accent, #9a1f17); color: #fff; }
#cavIhdMiPathologyTopicContent .mrm-step-text { display: grid; gap: 2px; min-width: 0; }
#cavIhdMiPathologyTopicContent .mrm-step-title { font-size: 13px; font-weight: 850; color: #111111; letter-spacing: -.01em; line-height: 1.18; }
#cavIhdMiPathologyTopicContent .mrm-step-teaser { font-size: 11.5px; font-weight: 500; color: #111111; line-height: 1.35; }

/* ---- detail panel (shared solid-text-card holder; body forced #111) ---- */
#cavIhdMiPathologyTopicContent .mrm-detail[hidden] { display: none; }
#cavIhdMiPathologyTopicContent .mrm-card p { color: #111111; }
#cavIhdMiPathologyTopicContent .mrm-card .solid-text-card__badge { color: var(--mi-accent, #9a1f17); background: #fff; border-color: color-mix(in srgb, var(--mi-accent, #9a1f17) 28%, #fff); }

/* ---- responsive: phones keep cards readable via snap-scroll ---- */
@media (max-width: 820px) {
    #cavIhdMiPathologyTopicContent .mrm-strip {
        overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        padding-bottom: 4px; scrollbar-width: thin;
    }
    #cavIhdMiPathologyTopicContent .mrm-step { flex: 0 0 auto; min-width: 210px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
    #cavIhdMiPathologyTopicContent .mrm-step { transition: none; }
}