/* ============================================================
   CAV PATHOLOGY · Embolism · "Follow the Blood" router styling
   Page-scoped under #cavEmbolismFoundationsTopicContent so nothing
   leaks into other modules. Mirrors the heart-vessel-overlay frame
   geometry: a height-driven frame where the image sets the width and
   the SVG overlay fills the same aspect-locked box (1:1 registration).
   ============================================================ */

/* ---------- Origin controls + reset ---------- */
#cavEmbolismFoundationsTopicContent .ebr { margin-top: 6px; }

#cavEmbolismFoundationsTopicContent .ebr-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
#cavEmbolismFoundationsTopicContent .ebr-origins {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}
#cavEmbolismFoundationsTopicContent .ebr-origin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text, #1f2638);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}
#cavEmbolismFoundationsTopicContent .ebr-origin:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
    border-color: var(--origin-c);
}
#cavEmbolismFoundationsTopicContent .ebr-origin:focus-visible {
    outline: 2px solid var(--origin-c);
    outline-offset: 2px;
}
#cavEmbolismFoundationsTopicContent .ebr-origin.is-active {
    border-color: var(--origin-c);
    background: color-mix(in srgb, var(--origin-c) 12%, #ffffff);
    box-shadow: 0 0 0 1px var(--origin-c) inset;
}
#cavEmbolismFoundationsTopicContent .ebr-origin-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--origin-c); flex: none;
}
/* side → control accent colour */
#cavEmbolismFoundationsTopicContent .ebr-origin[data-side="venous"]      { --origin-c: #2563eb; }
#cavEmbolismFoundationsTopicContent .ebr-origin[data-side="arterial"]    { --origin-c: #dc2626; }
#cavEmbolismFoundationsTopicContent .ebr-origin[data-side="paradoxical"] { --origin-c: #06b6d4; }

#cavEmbolismFoundationsTopicContent .ebr-reset {
    padding: 7px 14px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 999px;
    background: transparent;
    color: var(--muted, #5a6478);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
#cavEmbolismFoundationsTopicContent .ebr-reset:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
#cavEmbolismFoundationsTopicContent .ebr-reset:disabled { opacity: 0.45; cursor: default; }
#cavEmbolismFoundationsTopicContent .ebr-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Legend ---------- */
#cavEmbolismFoundationsTopicContent .ebr-legend {
    display: flex; flex-wrap: wrap; gap: 16px;
    margin-bottom: 12px;
    font-size: 12px; font-weight: 600;
    color: var(--muted-strong, #3a4256);
}
#cavEmbolismFoundationsTopicContent .ebr-legend-item { display: inline-flex; align-items: center; gap: 6px; }
#cavEmbolismFoundationsTopicContent .ebr-legend-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--lc); }
#cavEmbolismFoundationsTopicContent .ebr-legend-item[data-side="venous"]      { --lc: #2563eb; }
#cavEmbolismFoundationsTopicContent .ebr-legend-item[data-side="arterial"]    { --lc: #dc2626; }
#cavEmbolismFoundationsTopicContent .ebr-legend-item[data-side="paradoxical"] { --lc: #06b6d4; }

/* ---------- Two-column layout: body figure left, fate cards right ---------- */
#cavEmbolismFoundationsTopicContent .ebr-main {
    display: flex;
    align-items: flex-start;
    gap: 26px;
}

/* ---------- Height-driven frame (image sets width; SVG overlays 1:1) ---------- */
#cavEmbolismFoundationsTopicContent .ebr-frame {
    --ebr-h: 520px;
    height: var(--ebr-h);
    flex: none;             /* image keeps its intrinsic width, sits on the left */
    display: flex;
    justify-content: flex-start;
}
#cavEmbolismFoundationsTopicContent .ebr-stage {
    position: relative;
    height: 100%;          /* width comes from the image's aspect ratio */
}
#cavEmbolismFoundationsTopicContent .ebr-img {
    height: 100%;
    width: auto;
    display: block;
    user-select: none;
}
#cavEmbolismFoundationsTopicContent .ebr-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---------- Flow guides + moving embolus marker ---------- */
#cavEmbolismFoundationsTopicContent .ebr-guide {
    stroke-width: 4;
    opacity: 0.55;
    stroke-dasharray: 7 7;
    animation: ebr-dash 0.9s linear infinite;
}
@keyframes ebr-dash { to { stroke-dashoffset: -14; } }

/* Paradoxical septum crossing — emphasized, solid, glowing cyan */
#cavEmbolismFoundationsTopicContent .ebr-guide-cross {
    stroke-width: 6;
    opacity: 1;
    stroke-dasharray: none;
    animation: none;
    filter: drop-shadow(0 0 5px #06b6d4);
}

#cavEmbolismFoundationsTopicContent .ebr-marker {
    filter: drop-shadow(0 0 5px currentColor);
    stroke: #ffffff;
    stroke-width: 1.5;
}

/* ---------- Highlight pulses ---------- */
#cavEmbolismFoundationsTopicContent .ebr-pulse { opacity: 0.7; transition: opacity .15s ease; }
#cavEmbolismFoundationsTopicContent .ebr-pulse-core { stroke: #ffffff; stroke-width: 1.5; transition: r .12s ease; }
#cavEmbolismFoundationsTopicContent .ebr-pulse-g.is-clickable { cursor: pointer; }
#cavEmbolismFoundationsTopicContent .ebr-pulse-g.is-clickable:hover .ebr-pulse-core,
#cavEmbolismFoundationsTopicContent .ebr-pulse-g.is-hover .ebr-pulse-core { r: 9; }
#cavEmbolismFoundationsTopicContent .ebr-pulse-g.is-clickable:focus { outline: none; }
#cavEmbolismFoundationsTopicContent .ebr-pulse-g.is-clickable:focus-visible .ebr-pulse-core {
    stroke: var(--accent, #2d6cdf);
    stroke-width: 2.5;
}
/* dim the unchosen scatter dots once a target is picked */
#cavEmbolismFoundationsTopicContent .ebr-pulse-g.is-dim { opacity: 0.3; }
#cavEmbolismFoundationsTopicContent .ebr-pulse-g.is-dim .ebr-pulse { opacity: 0.25; }
/* chosen dot stays bold */
#cavEmbolismFoundationsTopicContent .ebr-pulse-g.is-selected .ebr-pulse-core { r: 8; stroke-width: 2; }

/* ---------- Hover tooltip naming a pulsing dot ---------- */
#cavEmbolismFoundationsTopicContent .ebr-tip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px));
    background: var(--text, #1f2638);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    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, 0 6px 18px rgba(15, 23, 42, 0.18));
}

/* ---------- Right-side panel: lead + fate cards ---------- */
#cavEmbolismFoundationsTopicContent .ebr-panel {
    flex: 1;
    min-width: 0;
    align-self: stretch;
}
#cavEmbolismFoundationsTopicContent .ebr-panel-lead { margin-bottom: 12px; }
#cavEmbolismFoundationsTopicContent .ebr-panel-lead:empty { display: none; }
#cavEmbolismFoundationsTopicContent .ebr-cap-hint { color: var(--muted-strong, #3a4256); font-size: 14.5px; line-height: 1.55; }
#cavEmbolismFoundationsTopicContent .ebr-cap-lead {
    margin: 0; font-size: 14.5px; line-height: 1.55; color: #111111;
}
#cavEmbolismFoundationsTopicContent .ebr-cap-cross {
    display: flex; align-items: baseline; gap: 8px;
    margin: 0 0 10px; padding: 11px 14px;
    border-radius: 12px;
    background: rgba(6, 182, 212, 0.10);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: #0e3b45; font-size: 14px; line-height: 1.5;
}
#cavEmbolismFoundationsTopicContent .ebr-cap-cross-icon { font-size: 18px; color: #06b6d4; font-weight: 800; }

/* fate cards stack */
#cavEmbolismFoundationsTopicContent .ebr-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#cavEmbolismFoundationsTopicContent .ebr-card {
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-left: 5px solid var(--tone-c, #94a3b8);
    border-radius: 14px;
    background: #ffffff;
    padding: 13px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease,
                border-color .18s ease, filter .18s ease;
}
#cavEmbolismFoundationsTopicContent .ebr-card[data-tone="pe"]          { --tone-c: #2563eb; }
#cavEmbolismFoundationsTopicContent .ebr-card[data-tone="hemorrhagic"] { --tone-c: #dc2626; }
#cavEmbolismFoundationsTopicContent .ebr-card[data-tone="pale"]        { --tone-c: #eab308; }
#cavEmbolismFoundationsTopicContent .ebr-card-title {
    font-size: 15px; font-weight: 800; color: #111111; margin-bottom: 4px;
}
#cavEmbolismFoundationsTopicContent .ebr-card-body { font-size: 14px; line-height: 1.5; color: #111111; margin: 0; }

/* interactive (systemic) cards */
#cavEmbolismFoundationsTopicContent .ebr-card[role="button"] { cursor: pointer; }
#cavEmbolismFoundationsTopicContent .ebr-card[role="button"]:hover,
#cavEmbolismFoundationsTopicContent .ebr-card.is-hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--tone-c) 45%, #ffffff);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}
#cavEmbolismFoundationsTopicContent .ebr-card[role="button"]:focus-visible {
    outline: 2px solid var(--tone-c);
    outline-offset: 2px;
}
/* the chosen organ lifts + brightens; the rest dim back */
#cavEmbolismFoundationsTopicContent .ebr-card.is-selected {
    transform: translateY(-3px) scale(1.012);
    border-color: var(--tone-c);
    background: color-mix(in srgb, var(--tone-c) 8%, #ffffff);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
}
#cavEmbolismFoundationsTopicContent .ebr-card.is-dim {
    opacity: 0.42;
    filter: saturate(0.7);
}
#cavEmbolismFoundationsTopicContent .ebr-card.is-dim:hover {
    opacity: 0.85;   /* re-surface on hover so comparison is easy */
    filter: none;
}

/* ---------- Responsive: stack the panel under the figure on narrow screens ---------- */
@media (max-width: 760px) {
    #cavEmbolismFoundationsTopicContent .ebr-main { flex-direction: column; align-items: stretch; }
    #cavEmbolismFoundationsTopicContent .ebr-frame { --ebr-h: 440px; justify-content: center; }
    #cavEmbolismFoundationsTopicContent .ebr-origin { font-size: 12px; padding: 7px 11px; }
}