/* ============================================================
   CAV PATHOLOGY · IHD · Heart + Coronary Vessel Overlay styling
   Scoped to the Foundations page (#cavIhdFoundationsTopicContent).
   Height-driven frame (the spec's accuracy-critical layout) so the
   SVG overlay fills the same aspect-locked box as the PNG and the
   traced coordinates land 1:1 at any --heart-h. Chrome uses theme
   tokens (dark-ready); vessel hues come from the data layer.
   ============================================================ */

#cavIhdFoundationsTopicContent .hvo { display: block; margin-top: 6px; }

/* ---------- Toolbar ---------- */
#cavIhdFoundationsTopicContent .hvo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
#cavIhdFoundationsTopicContent .hvo-views {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    padding: 3px;
}
#cavIhdFoundationsTopicContent .hvo-view-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
}
#cavIhdFoundationsTopicContent .hvo-view-btn.is-active {
    background: var(--surface-strong);
    color: var(--accent-strong);
    box-shadow: var(--shadow-md);
}
#cavIhdFoundationsTopicContent .hvo-view-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#cavIhdFoundationsTopicContent .hvo-reset {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--surface-strong);
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
}
#cavIhdFoundationsTopicContent .hvo-reset:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
#cavIhdFoundationsTopicContent .hvo-reset:disabled { opacity: 0.45; cursor: default; }
#cavIhdFoundationsTopicContent .hvo-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Height-driven frame (spec layout, scoped) ---------- */
#cavIhdFoundationsTopicContent .heart-frame {
    height: var(--heart-h, 480px);
    display: flex;
    justify-content: center;
}
#cavIhdFoundationsTopicContent .heart-stage {
    position: relative;
    height: 100%;        /* width comes from the image */
}
#cavIhdFoundationsTopicContent .heart-stage img {
    height: 100%;
    width: auto;
    display: block;
}
#cavIhdFoundationsTopicContent .heart-stage svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---------- Vessels ---------- */
#cavIhdFoundationsTopicContent .hvo-vessel { cursor: pointer; }
#cavIhdFoundationsTopicContent .hvo-line {
    opacity: 0.92;
    stroke-width: 14;          /* thicker idle so the vessels read as clickable */
    transition: opacity 150ms ease, stroke-width 150ms ease, filter 150ms ease;
}
/* hover affordance — thickens + glows so it's obviously interactive */
#cavIhdFoundationsTopicContent .hvo-vessel:hover { filter: drop-shadow(0 0 6px var(--vcolor)); }
#cavIhdFoundationsTopicContent .hvo-vessel:hover .hvo-line { opacity: 1; stroke-width: 18; }
#cavIhdFoundationsTopicContent .hvo-vessel.is-lit {
    filter: drop-shadow(0 0 6px var(--vcolor)) drop-shadow(0 0 2px var(--vcolor));
}
#cavIhdFoundationsTopicContent .hvo-vessel.is-lit .hvo-line {
    opacity: 1;
    stroke-width: 19;
}
#cavIhdFoundationsTopicContent .hvo-vessel.is-dim .hvo-line { opacity: 0.32; }
#cavIhdFoundationsTopicContent .hvo-vessel:focus { outline: none; }
#cavIhdFoundationsTopicContent .hvo-vessel:focus-visible { outline: none; }
#cavIhdFoundationsTopicContent .hvo-vessel:focus-visible .hvo-line {
    opacity: 1;
    stroke-width: 19;
    filter: drop-shadow(0 0 4px var(--accent));
}

/* ---------- Hover/focus tooltip ---------- */
#cavIhdFoundationsTopicContent .hvo-tip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 10px));
    background: var(--text);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 8px;
    pointer-events: none;   /* never intercept the pointermove that drives it */
    z-index: 5;
    box-shadow: var(--shadow-md);
}

/* ---------- Caption (placeholder seat for the future payoff panel) ---------- */
#cavIhdFoundationsTopicContent .hvo-caption {
    margin-top: 14px;
    min-height: 24px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
#cavIhdFoundationsTopicContent .hvo-caption-hint { color: var(--muted); font-size: 13px; }
#cavIhdFoundationsTopicContent .hvo-caption-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}
#cavIhdFoundationsTopicContent .hvo-caption-terr {
    font-size: 13px;
    color: var(--muted-strong);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    #cavIhdFoundationsTopicContent .hvo-line { transition: none; }
}

/* ---------- Narrow screens: smaller default height ---------- */
@media (max-width: 880px) {
    #cavIhdFoundationsTopicContent .heart-frame { height: var(--heart-h-sm, 380px); }
}