/* ============================================================
   CAV PATHOLOGY · IHD · MI Pathogenesis & Pathology (Page 3)
   Scoped to #cavIhdMiPathologyTopicContent. Mirrors the Angina
   designed-card visual language (header band · hover chips · pearl
   footer · deep-dive bold labels) driven by a single accent var
   --mi-accent. One level of card; sub-sections are flat labeled
   blocks (no nested boxes). All reader text #111 on light surfaces
   so it stays legible in light AND dark mode.
   ============================================================ */

/* page accent + uniform vertical rhythm between section cards */
/* MI/infarct accent — the established IHD deep red (matches unstable angina
   + coronary steal), not a one-off brighter crimson. */
#cavIhdMiPathologyTopicContent { --mi-accent: #9a1f17; display: grid; gap: 20px; }
#cavIhdMiPathologyTopicContent[hidden] { display: none; }

/* ---- container only (the topic-section-card is the single card box;
   header band + pearl are tinted bands, middle zones are flat blocks) ---- */
#cavIhdMiPathologyTopicContent .mip-card { display: grid; gap: 16px; }

/* ---- Zone 1 · header band (accent tint, rounded band) ---- */
#cavIhdMiPathologyTopicContent .mip-head {
    display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
    padding: 16px 18px; border-radius: 14px;
    border-left: 4px solid var(--mi-accent);
    background: #fbeaea;
    background: color-mix(in srgb, var(--mi-accent) 8%, #ffffff);
}
#cavIhdMiPathologyTopicContent .mip-head-main { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
#cavIhdMiPathologyTopicContent .mip-head-top { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
#cavIhdMiPathologyTopicContent .mip-name { font-size: 19px; font-weight: 800; color: #111111; letter-spacing: -.015em; }
#cavIhdMiPathologyTopicContent .mip-ic, #cavIhdMiPathologyTopicContent .mip-beat-ic { font-style: normal; }
#cavIhdMiPathologyTopicContent .mip-type {
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--mi-accent); background: #fff; border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px;
}
#cavIhdMiPathologyTopicContent .mip-essence { margin: 0; font-size: 14.5px; font-weight: 600; color: #111111; line-height: 1.5; }
#cavIhdMiPathologyTopicContent .mip-hook { margin: 0; font-size: 13.5px; color: #111111; line-height: 1.5; }
#cavIhdMiPathologyTopicContent .mip-hook strong { color: #111111; }
#cavIhdMiPathologyTopicContent .mip-loc { margin: 0; font-size: 13px; color: #111111; line-height: 1.45; }

/* key stat — LAD 40–50% > RCA 30–40% > LCX 15–20% (canonical palette,
   readable %s inline; full term + role on hover) */
#cavIhdMiPathologyTopicContent .mip-head-side { flex: none; }
#cavIhdMiPathologyTopicContent .mip-stat {
    display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px;
    background: #fff; border: 1px solid #e2e8f0; border-color: color-mix(in srgb, var(--mi-accent) 26%, #fff);
    border-radius: 11px; padding: 9px 14px; text-align: right;
}
#cavIhdMiPathologyTopicContent .mip-stat-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: 1px; }
/* arteries stacked (most → least common is read from the percentages + hover) */
#cavIhdMiPathologyTopicContent .mip-stat-main { display: grid; gap: 3px; }
#cavIhdMiPathologyTopicContent .mip-stat-row { font-size: 15.5px; font-weight: 850; color: #111111; line-height: 1.35; white-space: nowrap; }
#cavIhdMiPathologyTopicContent .mip-art { font-weight: 850; }
#cavIhdMiPathologyTopicContent .mip-lad { color: #db2777; }
#cavIhdMiPathologyTopicContent .mip-rca { color: #2563eb; }
#cavIhdMiPathologyTopicContent .mip-lcx { color: #059669; }

/* two-outcome emphasis block (used in header hook + board pearl):
   the term (Unstable angina / MI) is larger + bold, the description normal */
#cavIhdMiPathologyTopicContent .mip-split { display: grid; gap: 7px; }
#cavIhdMiPathologyTopicContent .mip-split-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* term is a touch larger than its description, but stays BELOW the beat title */
#cavIhdMiPathologyTopicContent .mip-split-term { font-size: 15px; font-weight: 800; color: #111111; letter-spacing: -.01em; }
#cavIhdMiPathologyTopicContent .mip-split-desc { font-size: 14px; color: #111111; line-height: 1.45; }
#cavIhdMiPathologyTopicContent .mip-split-desc strong { color: #111111; }

/* cross-page link — pill BUTTON so it clearly navigates */
#cavIhdMiPathologyTopicContent .mip-xlink {
    appearance: none; cursor: pointer; font: inherit; width: fit-content;
    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: 5px 13px; font-size: 12.5px; font-weight: 800;
    transition: background .15s ease;
}
#cavIhdMiPathologyTopicContent .mip-xlink:hover { background: color-mix(in srgb, var(--mi-accent) 12%, #ffffff); }
#cavIhdMiPathologyTopicContent .mip-xlink:focus-visible { outline: 2px solid var(--mi-accent); outline-offset: 2px; }
#cavIhdMiPathologyTopicContent .mip-xlink-sm { padding: 3px 10px; font-size: 12px; margin-left: 4px; }

/* ---- body: flat labeled blocks (no box, no inner padding) ---- */
#cavIhdMiPathologyTopicContent .mip-body { display: grid; gap: 20px; padding: 2px 4px; }
#cavIhdMiPathologyTopicContent .mip-beat { display: grid; gap: 11px; }
/* deep-dive style labels: bold 850, dark, title-case + emoji.
   Sit ABOVE the split-terms but BELOW the card title (.mip-name 19px). */
#cavIhdMiPathologyTopicContent .mip-beat-label {
    display: flex; align-items: center; gap: 7px; color: #111111;
    font-size: 17px; font-weight: 850; letter-spacing: -.01em;
}

/* pale grey reading-pause divider (between header blocks) */
#cavIhdMiPathologyTopicContent .mip-rule {
    height: 0; margin: 5px 0; border: none; border-top: 1px solid rgba(17, 17, 17, .1);
}

/* ---- Zone 2 · pathogenesis chips with hover/tap detail ---- */
#cavIhdMiPathologyTopicContent .mip-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
#cavIhdMiPathologyTopicContent .mip-chip {
    position: relative; appearance: none; font: inherit; cursor: help; color: #111111;
    background: #f6f8fc; background: color-mix(in srgb, var(--mi-accent) 7%, #ffffff);
    border: 1px solid #e2e8f0; border-color: color-mix(in srgb, var(--mi-accent) 26%, #ffffff);
    border-radius: 9px; padding: 6px 10px; font-size: 13px; font-weight: 600; line-height: 1.2;
}
#cavIhdMiPathologyTopicContent .mip-chip:hover { background: color-mix(in srgb, var(--mi-accent) 14%, #ffffff); }
#cavIhdMiPathologyTopicContent .mip-chip:focus-visible { outline: 2px solid var(--mi-accent); outline-offset: 2px; }
#cavIhdMiPathologyTopicContent .mip-arrow { color: var(--mi-accent); font-weight: 800; }

#cavIhdMiPathologyTopicContent .mip-tip {
    position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translate(-50%, 4px);
    width: 264px; max-width: 74vw; z-index: 60;
    background: #0f172a; color: #fff; text-transform: none; letter-spacing: normal;
    font-size: 12.5px; font-weight: 500; line-height: 1.5; padding: 9px 11px; border-radius: 9px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .28);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
#cavIhdMiPathologyTopicContent .mip-tip strong { color: #ffffff; }
#cavIhdMiPathologyTopicContent .mip-tip::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #0f172a;
}
#cavIhdMiPathologyTopicContent .mip-chip:hover .mip-tip,
#cavIhdMiPathologyTopicContent .mip-chip:focus .mip-tip,
#cavIhdMiPathologyTopicContent .mip-chip:focus-within .mip-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---- Zone 3 · "other causes" labeled grid (no boxes) ---- */
#cavIhdMiPathologyTopicContent .mip-causes { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; margin: 0; }
#cavIhdMiPathologyTopicContent .mip-causes dt { color: #111111; font-size: 14px; font-weight: 850; letter-spacing: -.01em; white-space: nowrap; }
#cavIhdMiPathologyTopicContent .mip-causes dd { margin: 0; color: #111111; font-size: 14px; line-height: 1.5; }

/* ---- Zone 4 · board-pearl footer banner (accent tint, rounded band) ---- */
#cavIhdMiPathologyTopicContent .mip-pearl {
    display: grid; gap: 9px; padding: 14px 16px; border-radius: 14px;
    background: #fbeaea; background: color-mix(in srgb, var(--mi-accent) 9%, #ffffff);
    border: 1px solid #f1d3d3; border-color: color-mix(in srgb, var(--mi-accent) 18%, #ffffff);
}
#cavIhdMiPathologyTopicContent .mip-pearl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
#cavIhdMiPathologyTopicContent .mip-pearl-headline { font-size: 14.5px; font-weight: 700; color: #111111; }
#cavIhdMiPathologyTopicContent .mip-pearl-foot { margin: 0; color: #111111; font-size: 13.5px; line-height: 1.5; }
#cavIhdMiPathologyTopicContent .mip-pearl p { margin: 0; color: #111111; font-size: 14.5px; line-height: 1.55; }
#cavIhdMiPathologyTopicContent .mip-pearl p strong { color: #111111; }

@media (prefers-reduced-motion: reduce) {
    #cavIhdMiPathologyTopicContent .mip-tip { transition: none; }
}
@media (max-width: 760px) {
    #cavIhdMiPathologyTopicContent .mip-head-side { width: 100%; }
    #cavIhdMiPathologyTopicContent .mip-stat { align-items: flex-start; text-align: left; max-width: none; }
    #cavIhdMiPathologyTopicContent .mip-causes { grid-template-columns: 1fr; gap: 2px 0; }
    #cavIhdMiPathologyTopicContent .mip-causes dt { padding-top: 9px; }
    #cavIhdMiPathologyTopicContent .mip-causes dt:first-child { padding-top: 0; }
    #cavIhdMiPathologyTopicContent .mip-tip { width: 210px; }
}